/* ── Theme tokens ─────────────────────────────────────────────────────────────
   Felt-tip marker on paper. Light = the original white sheet, dark = blackboard.
   Module CSS must only use these tokens for colour. */
:root {
  --paper: #f6f3ea;
  --paper-2: #ebe6d8;
  --ink: #1b1a1f;
  --ink-soft: #5d5966;
  --line: #1b1a1f;
  --creator: #e8327f;     /* hot pink marker */
  --processor: #f08a00;   /* orange highlighter */
  --recorder: #2f9e44;    /* green marker */
  --sky: #1f8fd6;         /* blue biro */
  --danger: #d6331f;
  --glow: rgba(232, 50, 127, 0.25);
  --shadow: 3px 3px 0 var(--ink);
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;
  --font-marker: 'Permanent Marker', 'Comic Sans MS', cursive;
  --stroke: 2.5px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #17161c;
    --paper-2: #221f2a;
    --ink: #f2eee4;
    --ink-soft: #a7a1b3;
    --line: #f2eee4;
    --creator: #ff5fa8;
    --processor: #ffb12e;
    --recorder: #6be07a;
    --sky: #4cc3ff;
    --danger: #ff6a55;
    --glow: rgba(255, 95, 168, 0.3);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #17161c;
  --paper-2: #221f2a;
  --ink: #f2eee4;
  --ink-soft: #a7a1b3;
  --line: #f2eee4;
  --creator: #ff5fa8;
  --processor: #ffb12e;
  --recorder: #6be07a;
  --sky: #4cc3ff;
  --danger: #ff6a55;
  --glow: rgba(255, 95, 168, 0.3);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ── The sheet of paper ───────────────────────────────────────────────────── */
.board {
  position: relative;
  aspect-ratio: 16 / 10;
  width: min(100vw - 16px, (100vh - 16px) * 1.6);
  background:
    radial-gradient(circle at 30% 20%, transparent 60%, rgba(0, 0, 0, 0.04)),
    var(--paper);
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  /* Everything inside scales with the sheet. 1cqw = 1% of board width. */
  container-type: inline-size;
  transform: rotate(-0.4deg);
}

.zone {
  position: absolute;
  transition: opacity 0.3s, filter 0.3s;
}

/* Positions trace the original sketch: left, top, width, height in % of the sheet. */
#rail { left: 0.5%; top: 3%; width: 3.5%; height: 94%; }
#modes { left: 4.5%; top: 1%; width: 15%; height: 11%; }
#logo { left: 31%; top: 4%; width: 13%; height: 12%; }
#cutupper { left: 45%; top: 1%; width: 9%; height: 15%; }
#processor { left: 54%; top: 9%; width: 8%; height: 15%; }
#orbs { left: 63%; top: 1%; width: 14%; height: 12%; }
#knob-k { left: 20%; top: 12%; width: 9%; height: 15%; }
#len { left: 13%; top: 27%; width: 13%; height: 14%; }
#sing { left: 20%; top: 41%; width: 8%; height: 13%; }
#critter { left: 17%; top: 55%; width: 8%; height: 12%; }
#rings { left: 28%; top: 26%; width: 34%; height: 54%; }
#sunchain { left: 63%; top: 14%; width: 20%; height: 17%; }
#wave { left: 84%; top: 12%; width: 5%; height: 32%; }
#osc { left: 67%; top: 44%; width: 14%; height: 11%; }
#grid { left: 73%; top: 56%; width: 18%; height: 30%; }
#trash { left: 74%; top: 87%; width: 12%; height: 12%; }
#knob-s { left: 15%; top: 73%; width: 10%; height: 16%; }
#file { left: 27%; top: 81%; width: 12%; height: 18%; }
#glitch { left: 40%; top: 81%; width: 14%; height: 18%; }
#reverse { left: 62%; top: 66%; width: 10%; height: 15%; }
#rec { left: 63%; top: 82%; width: 6%; height: 10%; }

/* Focus modes: the active family pops, the rest fade back into the paper. */
body:not([data-mode='all']) .zone:not([data-family='all']) {
  opacity: 0.28;
  filter: grayscale(0.8);
}
body[data-mode='creator'] .zone[data-family='creator'],
body[data-mode='recorder'] .zone[data-family='recorder'],
body[data-mode='processor'] .zone[data-family='processor'] {
  opacity: 1;
  filter: none;
}

/* ── Shared controls (from js/core/ui.js) ─────────────────────────────────── */
.btn {
  font-family: var(--font-marker);
  font-size: clamp(10px, 1.05cqw, 16px);
  color: var(--ink);
  background: var(--paper);
  border: var(--stroke) solid var(--line);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* wobbly hand-drawn box */
  padding: 0.2em 0.6em;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.btn:hover {
  transform: translate(-1px, -1px) rotate(-1deg);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}
.btn[aria-pressed='true'] {
  background: var(--creator);
  color: var(--paper);
}

.knob {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: ns-resize;
  touch-action: none;
  line-height: 1;
}
.knob .knob-face {
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: var(--stroke);
}
.knob-label {
  font-family: var(--font-marker);
  font-size: clamp(9px, 0.85cqw, 14px);
  text-transform: uppercase;
}
.knob-value {
  font-size: clamp(10px, 0.9cqw, 15px);
  color: var(--ink-soft);
}

:focus-visible {
  outline: 3px dashed var(--sky);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Drag and drop */
.is-draggable {
  cursor: grab;
  touch-action: none;
}
.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.25));
}
body.is-dragging,
body.is-dragging * {
  cursor: grabbing !important;
}
.drop-hover {
  outline: 3px dashed var(--recorder);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Generic hand-lettered label and annotation arrow text */
.hand-label {
  font-family: var(--font-marker);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(9px, 1cqw, 16px);
}

/* ── Start overlay (audio needs a user gesture) ───────────────────────────── */
.start-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  backdrop-filter: blur(3px);
  z-index: 2000;
}
.start-overlay[hidden] {
  display: none;
}
.start-btn {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--line);
  border-radius: 50% 46% 52% 48%;
  width: min(60vw, 320px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 6px 6px 0 var(--ink);
  animation: wobble 3s ease-in-out infinite;
}
.start-title {
  font-family: var(--font-marker);
  font-size: 64px;
  color: var(--creator);
}
.start-sub {
  font-size: 24px;
}
@keyframes wobble {
  50% {
    transform: rotate(3deg) scale(1.03);
  }
}

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

/* ── Narrow screens: unfold the sheet into a scrolling column ─────────────── */
@media (max-width: 760px) {
  body {
    display: block;
    overflow: auto;
  }
  .board {
    aspect-ratio: auto;
    width: 100%;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    border-radius: 0;
  }
  .zone {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: calc(50% - 8px) !important;
    height: 150px !important;
  }
  #rings {
    order: -1;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
  }
  #modes,
  #grid,
  #rail {
    width: 100% !important;
  }
  #rail {
    height: 64px !important;
  }
}