:root {
  --cell: 56px;
  --bg1: #fff3ea;
  --bg2: #ffe4ee;
  --ink: #3a1030;
  --muted: #9a6b83;
  --accent: #ff4d6d;
  --card: #fffdfb;
  --radius: 18px;
  --dur: .28s;
  --ease: cubic-bezier(.32, 1.28, .5, 1);

  /* candy palette (six matchable colors) */
  --c0: #ff4d6d; --c1: #ffb23f; --c2: #ffd23f;
  --c3: #5ecb6b; --c4: #4aa8ff; --c5: #b06bff;

  --board-face: linear-gradient(135deg, #6a2a52, #45183a);
  --tile-radius: 14px;
  --glyph-fill: #ffffffe6;
}

/* ---------- wood theme: same engine, re-skinned ---------- */
body[data-theme="wood"] {
  --bg1: #efe0c9;
  --bg2: #e2cba9;
  --ink: #3a2415;
  --muted: #8a6b4a;
  --accent: #a85f34;
  --card: #f7eddc;
  --tile-radius: 6px;
  /* --c0..5 stay vibrant (from :root): natural oak blocks, painted-carved symbols */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: "Baloo 2", ui-rounded, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(rgba(18,9,30,.40), rgba(18,9,30,.58)),
    #1b0f2e url("assets/bg.webp") center / cover no-repeat;
  display: flex; align-items: flex-start; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.wrap { width: 100%; max-width: 520px; padding: 18px 16px 40px; }

/* ---------- hud ---------- */
.hud { display: flex; gap: 10px; justify-content: space-between; margin-bottom: 12px; }
/* sleek black "cool pills" with a candy glow that constantly cycles color */
.hud-item {
  position: relative; background: #14141b; border-radius: 999px; padding: 9px 14px; flex: 1;
  text-align: center; box-shadow: 0 4px 14px #00000055, 0 0 16px 1px #b06bffaa;
  animation: hudGlow 5s linear infinite;
}
.hud-item:nth-child(2) { animation-delay: -1.6s; }
.hud-item:nth-child(3) { animation-delay: -3.3s; }
@keyframes hudGlow {
  0%, 100% { box-shadow: 0 4px 14px #00000055, 0 0 17px 1px #ff4d6d; }
  20% { box-shadow: 0 4px 14px #00000055, 0 0 17px 1px #ffb23f; }
  40% { box-shadow: 0 4px 14px #00000055, 0 0 17px 1px #ffd23f; }
  60% { box-shadow: 0 4px 14px #00000055, 0 0 17px 1px #5ecb6b; }
  80% { box-shadow: 0 4px 14px #00000055, 0 0 17px 1px #4aa8ff; }
}
.hud-label {
  display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: #9a9ab0; font-weight: 600;
}
.hud-value { font-size: 21px; font-weight: 800; color: #ffffff; }

.tools { display: flex; gap: 8px; justify-content: center; margin: 0 0 12px; }
.tool {
  font-family: inherit; font-weight: 700; font-size: 13px; color: #f0f0f6;
  background: #14141b; border: 0; border-radius: 999px; padding: 9px 16px;
  cursor: pointer; box-shadow: 0 4px 12px #00000044, 0 0 10px #4aa8ff66;
  text-decoration: none; display: inline-flex; align-items: center;
  transition: transform .12s var(--ease), filter .2s;
  animation: toolGlow 6.5s linear infinite;
}
.tool:nth-child(2) { animation-delay: -1.3s; }
.tool:nth-child(3) { animation-delay: -2.6s; }
.tool:nth-child(4) { animation-delay: -3.9s; }
.tool:nth-child(5) { animation-delay: -5.2s; }
/* NEON DROP tab gets the arcade's own cyan instead of the cycling candy glow */
#tab-arcade { animation: none; box-shadow: 0 4px 12px #00000044, 0 0 12px #00f0f0aa; }
#tab-arcade:hover { filter: brightness(1.15); }
@keyframes toolGlow {
  0%, 100% { box-shadow: 0 4px 12px #00000044, 0 0 11px #ff4d6d77; }
  33% { box-shadow: 0 4px 12px #00000044, 0 0 11px #ffd23f77; }
  66% { box-shadow: 0 4px 12px #00000044, 0 0 11px #5ecb6b77; }
}
.tool:hover { transform: translateY(-1px); filter: brightness(.98); }
.tool:active { transform: translateY(1px); }
.tool:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- board ---------- */
.board {
  position: relative; overflow: hidden;
  width: calc(var(--cell) * 8); height: calc(var(--cell) * 8);
  margin: 0 auto; border-radius: var(--radius);
  background: var(--board-face);
  box-shadow: inset 0 2px 12px #00000030, 0 18px 40px #5a224633;
}
body[data-theme="wood"] .board {
  background: #3a2414 url("assets/wood-board.jpg") center / cover no-repeat;
}

.candy {
  position: absolute; top: 0; left: 0;
  width: var(--cell); height: var(--cell);
  display: grid; place-items: center;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  transform: translate(calc(var(--x, 0) * var(--cell)), calc(var(--y, 0) * var(--cell)));
  transition: transform var(--dur) var(--ease);
  will-change: transform;
}
.candy::before {
  content: ""; position: absolute; inset: 5px; border-radius: var(--tile-radius);
  background: var(--cc);
  box-shadow: inset 0 -4px 8px #0003, inset 0 5px 8px #ffffff70, 0 3px 6px #00000030;
}
body[data-theme="wood"] .candy::before {
  background-color: #8a5a30;
  background-image:
    linear-gradient(158deg, rgba(255,240,214,.16), rgba(30,16,6,.30)),
    url("assets/wood.jpg");
  background-size: 180%, 180%;
  background-position: calc(var(--wx, 50) * 1%) calc(var(--wy, 50) * 1%);
  box-shadow:
    inset 0 -5px 8px rgba(0,0,0,.42),
    inset 0 4px 6px rgba(255,240,214,.30),
    inset 0 0 0 1px rgba(35,18,6,.38),
    0 3px 5px rgba(0,0,0,.34);
}
body[data-theme="wood"] .candy svg {
  fill: var(--cc);
  filter: drop-shadow(0 1px 0 rgba(255,245,220,.55)) drop-shadow(0 -1px 1px rgba(0,0,0,.4));
}
.candy svg { position: relative; width: 50%; height: 50%; fill: var(--glyph-fill); }
/* glossy specular shine — makes candies read as shiny hard candy (hidden in wood) */
.candy::after {
  content: ""; position: absolute; top: 6px; left: 26%; width: 34%; height: 20%;
  border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(closest-side, rgba(255,255,255,.72), rgba(255,255,255,0));
}
body[data-theme="wood"] .candy::after { display: none; }
.candy[data-type="0"] { --cc: var(--c0); }
.candy[data-type="1"] { --cc: var(--c1); }
.candy[data-type="2"] { --cc: var(--c2); }
.candy[data-type="3"] { --cc: var(--c3); }
.candy[data-type="4"] { --cc: var(--c4); }
.candy[data-type="5"] { --cc: var(--c5); }

/* ---------- specials ---------- */
.candy.sp-striped.sp-row::before { background-image: repeating-linear-gradient(0deg, #ffffffb0 0 3px, transparent 3px 9px); }
.candy.sp-striped.sp-col::before { background-image: repeating-linear-gradient(90deg, #ffffffb0 0 3px, transparent 3px 9px); }
.candy.sp-wrapped::before { box-shadow: inset 0 0 0 3px #fff, inset 0 -4px 8px #0003, 0 0 14px 2px var(--cc); }
.candy.sp-wrapped { animation: wob 1.4s ease-in-out infinite; }
.candy.sp-bomb::before { background: conic-gradient(#ff4d6d, #ffb23f, #ffd23f, #5ecb6b, #4aa8ff, #b06bff, #ff4d6d); }
.candy.sp-bomb svg { fill: #ffffff; opacity: .9; }

/* ---------- states (after specials so pop wins the animation slot) ---------- */
.candy.selected { z-index: 5; animation: selpulse .75s ease-in-out infinite; }
.candy.selected::before { outline: 3px solid #fff; outline-offset: -2px; transform: scale(1.07); }
@keyframes selpulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,255,255,.7)); }
  50% { filter: drop-shadow(0 0 11px rgba(255,255,255,.95)); }
}
.candy.pop { animation: pop .2s var(--ease) forwards; z-index: 6; }
.candy.shake { animation: shake .3s; }

@keyframes pop {
  0%   { transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell))) scale(1); }
  40%  { transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell))) scale(1.22); }
  100% { transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell))) scale(0); opacity: 0; }
}
@keyframes shake {
  0%, 100% { transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell))); }
  25% { transform: translate(calc(var(--x) * var(--cell) - 4px), calc(var(--y) * var(--cell))); }
  75% { transform: translate(calc(var(--x) * var(--cell) + 4px), calc(var(--y) * var(--cell))); }
}
@keyframes wob { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }

.footnote { text-align: center; color: rgba(255,255,255,.6); font-size: 12px; margin-top: 16px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.builder-credit { display: block; text-align: center; margin-top: 5px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; color: rgba(255,255,255,.5); text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,.5); transition: color .2s; }
.builder-credit b { color: rgba(255,255,255,.8); }
.builder-credit:hover { color: #b06bff; }
.builder-credit:hover b { color: #cba3ff; }

/* particle-effects canvas — above the board, below the overlays */
#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; }
/* 250th-round celebration: translucent scrim so fireworks show through behind the note */
#overlay.party { background: radial-gradient(circle at 50% 42%, rgba(45,22,60,.26), rgba(18,9,26,.55)); }

/* generic hide (for #resume) — .screen.hidden still covers full-screen sections */
.hidden { display: none !important; }

/* ---------- save-mode sheet ---------- */
.sheet-card { text-align: center; }
.sheet-in { width: 100%; font-family: inherit; font-weight: 700; font-size: 19px; color: var(--ink);
  background: #fff; border: 2px solid transparent; border-radius: 14px; padding: 13px 16px; margin: 0 0 12px;
  box-shadow: inset 0 2px 6px #0000000f; outline: none; }
.sheet-in:focus { border-color: var(--accent); }
.sheet-in::placeholder { color: #cab6c2; font-weight: 600; }
.sheet-pin { text-align: center; letter-spacing: .55em; font-size: 26px; padding-left: .55em; }
.sheet-err { color: var(--accent); font-size: 14px; font-weight: 700; margin: -4px 0 10px; min-height: 18px; }
.sheet-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px;
  padding: 8px 16px; background: none; border: 0; color: var(--muted); font-family: inherit; font-weight: 700;
  font-size: 14px; cursor: pointer; text-decoration: underline; }
.sheet-link:hover { color: var(--ink); }
.save-rows { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.save-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: inherit; text-align: left; width: 100%; background: #fff; border: 0; border-radius: 14px;
  padding: 14px 16px; cursor: pointer; box-shadow: 0 4px 12px #5a224615; transition: transform .12s var(--ease); }
.save-row:hover { transform: translateY(-1px); }
.save-row:active { transform: translateY(1px); }
.save-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.save-row-name { font-weight: 800; font-size: 17px; color: var(--ink); }
.save-row-meta { font-weight: 600; font-size: 12px; color: var(--muted); white-space: nowrap; }
@keyframes shakeX { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.shaking { animation: shakeX .32s; }

/* ---------- cosmic jukebox ---------- */
.jukebox-btn { position: fixed; right: 16px; bottom: 16px; z-index: 45; width: 54px; height: 54px; border-radius: 50%;
  border: 0; cursor: pointer; background: linear-gradient(145deg, #3a2a72, #1b1440); color: #d9d2ff;
  box-shadow: 0 10px 24px rgba(0,0,0,.4), inset 0 0 0 1px rgba(150,130,255,.28); display: grid; place-items: center;
  transition: transform .15s var(--ease); }
.jukebox-btn svg { width: 24px; height: 24px; fill: currentColor; }
.jukebox-btn:hover { transform: translateY(-2px); }
.jukebox-btn:focus-visible { outline: 3px solid #6f63ff; outline-offset: 2px; }
.jukebox-btn.playing { animation: jbpulse 1.5s ease-in-out infinite; }
@keyframes jbpulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(111,99,255,.35), inset 0 0 0 1px rgba(150,130,255,.35); }
  50% { box-shadow: 0 12px 34px rgba(111,99,255,.6), inset 0 0 0 2px rgba(150,130,255,.55); }
}
.jukebox-card { background: rgba(16,12,38,.94); color: #ece9ff; border: 1px solid #2a2350; max-width: 380px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(111,99,255,.14); }
.jb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jb-brand { font-weight: 700; letter-spacing: 2px; font-size: 12px; color: #b9b1ff; }
.jb-brand b { color: #8a7dff; }
.jb-close { background: none; border: 0; color: #8e87bd; font-size: 18px; line-height: 1; cursor: pointer;
  padding: 6px; min-width: 40px; min-height: 40px; }
.jb-close:hover { color: #ece9ff; }
.jb-cv { display: block; width: 100%; height: 168px; border-radius: 14px; background: #0b0820; margin-bottom: 10px; }
.jb-spotify { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; background: #0b0820; margin-bottom: 10px; }
.jb-now { text-align: center; margin-bottom: 10px; }
.jb-title { font-size: 20px; font-weight: 700; }
.jb-sub { font-size: 12px; color: #9a93c8; }
.jb-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.jb-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #3a3270; background: #150f2e; color: #ece9ff;
  cursor: pointer; display: grid; place-items: center; transition: .15s; }
.jb-btn svg { width: 20px; height: 20px; fill: currentColor; }
.jb-btn:hover { background: #241b4d; border-color: #6f63ff; }
.jb-play { width: 60px; height: 60px; background: #1b1440; }
.jb-play svg { width: 26px; height: 26px; }
.jb-vol { display: flex; align-items: center; margin-bottom: 14px; }
.jb-vol input { width: 100%; accent-color: #6f63ff; }
.jb-stations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.jb-chip { padding: 10px 8px; border-radius: 12px; border: 1px solid #2f2860; background: #120d28; color: #ece9ff;
  cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: .15s; font-family: inherit; }
.jb-chip:hover { border-color: #5a4fd0; }
.jb-chip.on { border: 2px solid #6f63ff; background: #1c1442; box-shadow: 0 0 20px rgba(111,99,255,.25); }
.jb-n { font-size: 13px; font-weight: 700; }
.jb-s { font-size: 10px; color: #a49ce0; }

/* ---------- screens (title + overlays) ---------- */
.screen {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 50;
  background: radial-gradient(circle at 50% 28%, #5a2246ee, #2a1024f2);
}
.screen.hidden { display: none; }

/* full-bleed hero title (uses assets/hero.png) */
.hero { padding: 0; cursor: pointer; align-items: flex-end; justify-content: center;
  background: #1b0f2e url("assets/hero.webp") center / cover no-repeat; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
  background: linear-gradient(transparent, #1b0f2ecc); pointer-events: none; }
.hero-cta { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  gap: 8px; margin-bottom: clamp(12px, 4vh, 40px); }
.hero-play { font-size: clamp(16px, 2.4vw, 22px); padding: 15px 44px; letter-spacing: .01em; }
.hero-play:hover { transform: translateY(-2px); filter: brightness(1.06); }
.hero-sub { font-size: clamp(13px, 1.8vw, 15px); padding: 9px 20px; letter-spacing: 0;
  background: rgba(20,10,30,.5); box-shadow: 0 6px 16px rgba(0,0,0,.32); }
.hero-sub:hover { background: rgba(20,10,30,.64); }
.hero-arcade { margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  color: rgba(255,255,255,.7); text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,.5); transition: color .2s; }
.hero-arcade:hover { color: #00f0f0; }
.hero:focus-visible { outline: 4px solid #ffffffaa; outline-offset: -6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* portrait phones: whole scene as a top banner (logo stays readable), CTA just beneath it */
@media (max-aspect-ratio: 4/5) {
  .hero { background-size: contain; background-position: center 4%; background-color: #241546; align-items: flex-start; }
  .hero-cta { margin: calc(56vw + 20px) 0 0; }
}

.screen-card {
  background: var(--card); border-radius: 26px; padding: 34px 28px; max-width: 360px; width: 100%;
  text-align: center; box-shadow: 0 30px 70px #00000055;
}
.kicker { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--accent); font-weight: 700; margin: 0 0 8px; }
.title { font-size: clamp(34px, 9vw, 52px); line-height: 1; margin: 0 0 14px; font-weight: 800; color: var(--ink); transform: rotate(-2deg); }
.subtitle { color: var(--muted); font-size: 17px; margin: 0 0 22px; font-weight: 600; }
.name { color: var(--accent); }
.ov-title { font-size: 32px; margin: 0 0 8px; font-weight: 800; }
.ov-body { color: var(--muted); font-size: 17px; margin: 0 0 22px; font-weight: 600; line-height: 1.4; }

.btn {
  font-family: inherit; font-weight: 800; font-size: 17px; color: #fff; background: var(--accent);
  border: 0; border-radius: 16px; padding: 14px 22px; cursor: pointer; box-shadow: 0 10px 24px #ff4d6d55;
  transition: transform .12s var(--ease), box-shadow .2s, filter .2s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 30px #ff4d6d66; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .candy { transition-duration: .05ms; }
  .candy.pop, .candy.shake, .candy.sp-wrapped { animation-duration: .05ms !important; }
  .candy.selected { animation: none !important; }
  .shaking { animation-duration: .05ms !important; }
  .save-row { transition-duration: .05ms; }
  .jukebox-btn.playing { animation-duration: .05ms !important; }
  .hud-item, .tool, .hud-value { animation: none !important; }
}