/* How does Pixelcosm keep the board primary within the 2layers visual system? */
@import url("./theme.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background: var(--color-ground);
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body {
  color: var(--color-paper);
  background: var(--color-ground);
  font-family: var(--font-sans);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(button, input, [role="button"]):focus-visible {
  outline: var(--focus-width) solid var(--color-cobalt);
  outline-offset: 2px;
}

#mainPage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--color-ground);
  transform: translateY(0);
  transition: transform var(--motion-medium) var(--ease-system);
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

#mainPage.slideUp {
  transform: translateY(-85%);
}

#boardContainer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: var(--color-ground);
  cursor: grab;
}

#canvas,
#overlayCanvas {
  position: absolute;
  inset: 0 auto auto 0;
  touch-action: none;
}

#canvas {
  transform: translateZ(0);
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
}

#overlayCanvas {
  z-index: 4;
  pointer-events: none;
}

.logo {
  position: fixed;
  top: max(var(--space-3), env(safe-area-inset-top));
  right: max(var(--space-3), env(safe-area-inset-right));
  z-index: 30;
  display: grid;
  width: 2.75rem;
  aspect-ratio: 1;
  padding: var(--space-1);
  border: var(--rule) solid var(--color-rule-dark);
  background: var(--color-ground);
  cursor: pointer;
  touch-action: manipulation;
}

.logo:hover,
.logo[aria-expanded="true"] {
  border-color: var(--color-cobalt);
  background: var(--color-surface);
}

.logo.loading {
  animation: logo-loading var(--motion-slow) var(--ease-system) infinite alternate;
}

.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes logo-loading {
  to {
    border-color: var(--color-cobalt);
    opacity: 0.58;
  }
}

#coordinateDisplay {
  position: absolute;
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  left: max(var(--space-3), env(safe-area-inset-left));
  z-index: 10;
  padding: var(--space-1) var(--space-2);
  border: var(--rule) solid var(--color-rule-dark);
  color: var(--color-paper);
  background: var(--color-ground);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.035em;
  pointer-events: none;
}

#connectionStatus {
  position: fixed;
  top: max(var(--space-3), env(safe-area-inset-top));
  left: max(var(--space-3), env(safe-area-inset-left));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: var(--space-1) var(--space-2);
  border: var(--rule) solid currentColor;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  transform-origin: left center;
  transition:
    opacity var(--motion-medium) var(--ease-system),
    transform var(--motion-medium) var(--ease-system);
}

.status-connected {
  color: var(--color-mint);
  background: var(--color-ground);
  animation: status-resolve var(--motion-slow) var(--ease-system) 900ms forwards;
}

.status-connecting {
  color: var(--color-cobalt);
  background: var(--color-ground);
}

.status-disconnected {
  color: var(--color-vermilion);
  background: var(--color-ground);
}

@keyframes status-resolve {
  to {
    opacity: 0;
    transform: translateY(calc(0px - var(--space-2)));
    visibility: hidden;
  }
}

#palette {
  --palette-action-clearance: calc(max(var(--space-3), env(safe-area-inset-bottom)) + 4.75rem);
  --palette-hidden-transform: translate(-50%, calc(100% + var(--palette-action-clearance)));
  position: fixed;
  bottom: var(--palette-action-clearance);
  left: 50%;
  z-index: 40;
  display: flex;
  width: min(34rem, calc(100vw - var(--edge) - var(--edge)));
  max-width: calc(100vw - var(--edge) - var(--edge));
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: manipulation;
  border: var(--rule) solid var(--color-rule-light);
  color: var(--color-ink);
  background: var(--color-paper);
  transform: var(--palette-hidden-transform);
  transition: transform var(--motion-medium) var(--ease-system);
}

#palette[style*="150%"] {
  transform: var(--palette-hidden-transform) !important;
}

.swatchesContainer {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
  scrollbar-color: var(--color-graphite) transparent;
  scrollbar-width: thin;
}

.colorSwatch {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  margin: 2px 0 5px;
  padding: 0;
  appearance: none;
  border: var(--rule) solid var(--color-ink);
  border-radius: 0;
  cursor: pointer;
}

.colorSwatch:hover {
  outline: var(--rule) solid var(--color-ink);
  outline-offset: 2px;
}

.colorSwatch.selected,
.colorSwatch[aria-pressed="true"] {
  outline: var(--focus-width) solid var(--color-ink);
  outline-offset: 2px;
}

.controlsContainer {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-1);
  justify-content: center;
}

.controlButton,
#muteButton {
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-3);
  appearance: none;
  border: var(--rule) solid var(--color-rule-light);
  border-radius: 0;
  color: var(--color-ink);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.controlButton {
  display: none;
  min-width: 6.5rem;
}

.controlButton[style*="display: block"] {
  display: block;
}

.controlButton:hover,
#muteButton:hover {
  border-color: var(--color-ink);
  background: var(--color-paper-bright);
}

#muteButton[aria-pressed="true"] {
  border-color: var(--color-ink);
  color: var(--color-paper);
  background: var(--color-ink);
}

.controlButton:disabled,
#muteButton:disabled {
  border-color: var(--color-rule-light);
  color: var(--color-graphite);
  background: transparent;
  cursor: not-allowed;
}

#centerColorButton {
  position: fixed;
  right: max(var(--edge), env(safe-area-inset-right));
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  z-index: 35;
  min-width: 8rem;
  min-height: 3.25rem;
  padding: var(--space-2) var(--space-4);
  border: var(--rule) solid var(--color-cobalt);
  border-radius: 0;
  color: var(--color-paper-bright);
  background: var(--color-cobalt);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

#centerColorButton:hover {
  color: var(--color-ink);
  background: var(--color-paper-bright);
}

#centerColorButton:focus-visible {
  outline-color: var(--color-paper-bright);
}

#centerColorButton:disabled {
  border-color: var(--color-rule-dark);
  color: var(--color-quiet);
  background: var(--color-surface-raised);
  cursor: not-allowed;
}

#fakePixel {
  z-index: 3;
  box-sizing: border-box;
  aspect-ratio: 1;
  border: var(--focus-width) solid var(--color-paper-bright);
  box-shadow: inset 0 0 0 var(--rule) var(--color-ink);
  image-rendering: pixelated;
  pointer-events: none;
}

#loadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  overscroll-behavior: none;
  touch-action: none;
  background: color-mix(in srgb, var(--color-ground) 82%, transparent);
  cursor: wait;
}

#loadingOverlay::after {
  width: 1.5rem;
  aspect-ratio: 1;
  border: var(--rule) solid var(--color-rule-dark);
  border-top-color: var(--color-cobalt);
  content: "";
}

#loadingOverlay.board-loading::after {
  animation: loading-mark var(--motion-slow) linear infinite;
}

#loadingOverlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-medium) var(--ease-system);
}

#loadingOverlay.board-loading {
  opacity: 1;
  pointer-events: auto;
}

@keyframes loading-mark {
  to {
    transform: rotate(1turn);
  }
}

#menuPage {
  position: fixed;
  top: 15%;
  left: 0;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 85%;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  border-top: var(--rule) solid var(--color-rule-light);
  color: var(--color-ink);
  color-scheme: light;
  background: var(--color-paper);
  transform: translateY(100%);
  transition: transform var(--motion-medium) var(--ease-system);
}

#menuPage.active {
  transform: translateY(0);
}

.menuBanner {
  position: relative;
  display: flex;
  min-height: var(--header-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--edge) var(--space-3);
  touch-action: none;
  border-bottom: var(--rule) solid var(--color-rule-light);
  background: var(--color-paper-bright);
  cursor: grab;
}

.menuBanner:active {
  cursor: grabbing;
}

.menuBanner::after {
  position: absolute;
  top: var(--space-2);
  left: 50%;
  width: var(--space-5);
  height: var(--rule);
  background: var(--color-graphite);
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
}

.menuBanner h1 {
  margin: 0;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.settingsBar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-2) var(--edge);
  touch-action: manipulation;
  border-bottom: var(--rule) solid var(--color-rule-light);
  background: var(--color-paper);
}

.audioControls,
.bwToggleContainer {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.bwToggleContainer {
  justify-content: flex-end;
}

.settingsBar label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.035em;
}

#volumeSlider {
  width: min(13rem, 32vw);
  accent-color: var(--color-cobalt);
}

#bwToggle {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-cobalt);
}

body.blackAndWhite {
  filter: grayscale(100%);
}

@media (max-width: 42rem) {
  #palette {
    width: calc(100vw - var(--space-3) - var(--space-3));
    max-width: none;
  }

  .colorSwatch {
    width: 2rem;
    height: 2rem;
  }

  #centerColorButton {
    right: max(var(--space-3), env(safe-area-inset-right));
    min-width: 7.5rem;
  }

  .settingsBar {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .bwToggleContainer {
    justify-content: flex-start;
  }

  #volumeSlider {
    width: min(13rem, 48vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}