/* Little Spellers — robot theme
   A friendly round robot in soft metal with glowing accents.
   The belly is a glowing screen where kids tap letters; a small chest screen
   shows the picture clue; the face speaks with an animated mouth + voice waves. */

:root {
  --accent: #3fc4d6;                 /* robot color — tweakable */
  --bg-color: #6c83b6;               /* background tint — tweakable */
  --ui-font: "Baloo 2", system-ui, sans-serif;

  /* derived accent shades */
  --accent-bright: color-mix(in oklab, var(--accent), white 26%);
  --accent-deep:   color-mix(in oklab, var(--accent), black 24%);
  --accent-soft:   color-mix(in oklab, var(--accent), white 74%);
  --accent-glow:   color-mix(in oklab, var(--accent), white 8%);

  /* soft-metal shell */
  --shell-hi:  #ffffff;
  --shell-1:   #eef2f6;
  --shell-2:   #dde4ec;
  --shell-3:   #c6d0db;
  --shell-edge:#aeb9c6;
  --bolt:      #9aa7b6;

  /* screen */
  --screen-1: #0b1320;
  --screen-2: #142337;
  --screen-line: color-mix(in oklab, var(--accent), #1b2a40 72%);

  --heart: #ff6f9d;
  --ink: #2b3442;
  --ink-soft: #687586;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--ui-font);
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 50% -10%,
      color-mix(in oklab, var(--bg-color), white 46%) 0%,
      color-mix(in oklab, var(--bg-color), white 14%) 42%,
      color-mix(in oklab, var(--bg-color), black 10%) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* soft floating dots in the backdrop */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.28) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 26% 84%, rgba(255,255,255,.25) 0 2px, transparent 3px);
  background-size: 100% 100%;
  pointer-events: none;
  opacity: .7;
}

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px 28px;
}

/* ───────────────────────── top control bar ───────────────────────── */
.topbar {
  width: min(680px, 96vw);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(20,30,50,.35);
  letter-spacing: .01em;
}
.brand .brand-bot {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(160deg, var(--accent-bright), var(--accent-deep));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.2);
  position: relative;
}
.brand .brand-bot::before {
  content: ""; position: absolute; inset: 7px 5px auto 5px; height: 7px;
  border-radius: 4px; background: #0b1320;
  box-shadow: 0 0 0 0 var(--accent);
}
.brand .brand-bot::after {
  content: ""; position: absolute; top: 9px; left: 8px; width: 3.5px; height: 3.5px;
  border-radius: 50%; background: var(--accent-bright);
  box-shadow: 9px 0 0 var(--accent-bright);
}
.brand b { font-size: 19px; }

.top-actions { display: flex; gap: 8px; }
.pill {
  appearance: none; border: none; cursor: pointer;
  font-family: var(--ui-font); font-weight: 700; font-size: 13px;
  color: #25527a;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 2px 0 rgba(40,60,90,.18), 0 4px 12px rgba(30,45,70,.18);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.pill:hover { transform: translateY(-1px); background: #fff; }
.pill:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(40,60,90,.18); }
.pill .ic { margin-right: 5px; }

/* ───────────────────────── grade selection ───────────────────────── */
.screen-view { display: none; width: 100%; flex-direction: column; align-items: center; }
.screen-view.active { display: flex; }

.grade-hero { text-align: center; margin: 4vh 0 22px; }
.grade-hero .hi {
  font-size: clamp(28px, 6vw, 46px); font-weight: 800; color: #fff;
  text-shadow: 0 3px 14px rgba(20,30,50,.32); margin: 0;
}
.grade-hero .sub {
  font-size: clamp(15px, 2.6vw, 19px); color: #eaf1ff; font-weight: 600;
  margin-top: 8px; text-shadow: 0 1px 6px rgba(20,30,50,.3);
}
.greeter {
  width: clamp(120px, 26vw, 168px); margin: 10px auto 4px;
}
.grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 14px;
  width: min(660px, 94vw);
}
.grade-card {
  appearance: none; border: none; cursor: pointer;
  font-family: var(--ui-font);
  background: linear-gradient(180deg, var(--shell-1), var(--shell-3));
  border-radius: 20px;
  padding: 16px 12px;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.85),
    inset 0 -3px 6px rgba(120,140,165,.4),
    0 6px 14px rgba(30,45,70,.22);
  transition: transform .16s, box-shadow .16s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.grade-card:hover { transform: translateY(-3px); }
.grade-card:active { transform: translateY(0); }
.grade-card .gc-chip {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, var(--accent-bright), var(--accent-deep));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 3px 8px color-mix(in oklab, var(--accent), transparent 55%);
}
.grade-card .gc-name { font-weight: 800; font-size: 15px; color: var(--ink); }
.grade-card .gc-age { font-size: 12px; color: var(--ink-soft); font-weight: 600; }

/* ───────────────────────── the robot ───────────────────────── */
.robot-wrap { width: min(660px, 96vw); display: flex; flex-direction: column; align-items: center; }

.robot {
  position: relative;
  width: 100%;
  font-size: clamp(13px, 2.4vw, 16px);   /* scale anchor for em-based parts */
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  transform-origin: center bottom;
}
.robot.bounce { animation: bot-bounce .45s ease-out both; }
@keyframes bot-bounce {
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-8px) scale(1.015,.985)}
  100%{transform:translateY(0) scale(1)}
}
.robot.shake { animation: bot-shake .42s ease-in-out both; }
@keyframes bot-shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px) rotate(-1.2deg)}
  40%{transform:translateX(9px) rotate(1.2deg)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)}
}

/* antenna */
.antenna { position: relative; height: 30px; display: flex; justify-content: center; }
.antenna .stalk { width: 4px; height: 26px; border-radius: 3px;
  background: linear-gradient(var(--shell-edge), var(--shell-3)); }
.antenna .bulb {
  position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 14px 2px color-mix(in oklab, var(--accent), transparent 30%);
}
.robot.speaking .antenna .bulb { animation: bulb-pulse .7s ease-in-out infinite; }
@keyframes bulb-pulse {
  0%,100%{ box-shadow:0 0 0 3px rgba(255,255,255,.25), 0 0 10px 1px color-mix(in oklab,var(--accent),transparent 40%); }
  50%{ box-shadow:0 0 0 5px rgba(255,255,255,.35), 0 0 22px 6px color-mix(in oklab,var(--accent),transparent 10%); }
}

/* head / face */
.head {
  position: relative;
  width: 74%;
  max-width: 420px;
  margin: 0 auto -18px;
  background: linear-gradient(168deg, var(--shell-hi), var(--shell-2) 55%, var(--shell-3));
  border-radius: 60px 60px 44px 44px / 54px 54px 40px 40px;
  padding: 14px 24px 24px;
  box-shadow:
    inset 0 3px 3px rgba(255,255,255,.9),
    inset 0 -10px 18px rgba(120,140,165,.4),
    0 14px 26px rgba(30,45,70,.22);
  z-index: 3;
}
/* ears */
.head .ear {
  position: absolute; top: 38%; width: 16px; height: 40px; border-radius: 8px;
  background: linear-gradient(var(--accent-bright), var(--accent-deep));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 3px 6px rgba(0,0,0,.2);
}
.head .ear.l { left: -10px; }
.head .ear.r { right: -10px; }

/* visor */
.visor {
  position: relative;
  background: linear-gradient(160deg, var(--screen-2), var(--screen-1));
  border-radius: 24px;
  padding: 12px 20px 10px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.55), 0 0 0 2px color-mix(in oklab, var(--accent), transparent 60%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  overflow: hidden;
}
.visor::after { /* faint screen sheen */
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 40%);
  pointer-events:none;
}
.eyes { display: flex; gap: 30px; }
.eye {
  position: relative;
  width: 27px; height: 27px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--accent-bright), var(--accent-deep) 72%);
  box-shadow: 0 0 14px 2px color-mix(in oklab, var(--accent), transparent 35%);
  transition: height .12s ease, transform .2s;
}
.eye .spark { position:absolute; top:6px; left:8px; width:7px; height:7px; border-radius:50%;
  background: rgba(255,255,255,.92); }
.eye .heart { position:absolute; inset:-3px; display:grid; place-items:center; font-size:28px;
  opacity:0; transform: scale(.3); }
.robot.happy .eye .spark { display:none; }
.robot.speaking .eye { box-shadow: 0 0 20px 5px color-mix(in oklab, var(--accent), transparent 18%); }
.robot.blink .eye { height: 5px; }
.robot.happy .eye { background: transparent; box-shadow: none; }
.robot.happy .eye .spark { opacity: 0; }
.robot.happy .eye .heart { opacity: 1; transform: scale(1); }

/* mouth equalizer */
.mouth { display: flex; align-items: flex-end; gap: 4px; height: 18px; }
.mouth .bar {
  width: 5px; height: 5px; border-radius: 3px;
  background: var(--accent-bright);
  box-shadow: 0 0 6px color-mix(in oklab, var(--accent), transparent 40%);
}
.robot.speaking .mouth .bar { animation: eq 0.5s ease-in-out infinite; }
.robot.speaking .mouth .bar:nth-child(1){ animation-delay: 0s; }
.robot.speaking .mouth .bar:nth-child(2){ animation-delay: .12s; }
.robot.speaking .mouth .bar:nth-child(3){ animation-delay: .06s; }
.robot.speaking .mouth .bar:nth-child(4){ animation-delay: .18s; }
.robot.speaking .mouth .bar:nth-child(5){ animation-delay: .09s; }
@keyframes eq { 0%,100%{height:5px} 50%{height:16px} }
.robot.happy .mouth .bar { height: 5px; }
/* a smile on happy: bars form an arc via individual heights */
.robot.happy .mouth { gap: 3px; }
.robot.happy .mouth .bar:nth-child(1),
.robot.happy .mouth .bar:nth-child(5){ height: 12px; }
.robot.happy .mouth .bar:nth-child(2),
.robot.happy .mouth .bar:nth-child(4){ height: 7px; }
.robot.happy .mouth .bar:nth-child(3){ height: 5px; }

/* voice waves */
.waves { position:absolute; bottom: 10px; left:50%; transform: translateX(-50%);
  width: 40px; height: 40px; pointer-events:none; opacity:0; }
.robot.speaking .waves { opacity: 1; }
.waves span { position:absolute; inset:0; margin:auto; width: 12px; height: 12px; border-radius:50%;
  border: 2px solid color-mix(in oklab, var(--accent), transparent 30%); }
.robot.speaking .waves span { animation: ripple 1.1s ease-out infinite; }
.robot.speaking .waves span:nth-child(2){ animation-delay: .55s; }
@keyframes ripple { 0%{transform:scale(.3);opacity:.7} 100%{transform:scale(2.4);opacity:0} }

/* ───────────────────────── body ───────────────────────── */
.body {
  position: relative;
  width: 100%;
  background: linear-gradient(176deg, var(--shell-1), var(--shell-2) 60%, var(--shell-3));
  border-radius: 40px;
  padding: 26px 22px 20px;
  box-shadow:
    inset 0 3px 3px rgba(255,255,255,.85),
    inset 0 -14px 24px rgba(120,140,165,.38),
    0 18px 34px rgba(30,45,70,.24);
  z-index: 2;
}
/* arms */
.arm {
  position: absolute; top: 26px; width: 22px; height: 120px; border-radius: 14px;
  background: linear-gradient(var(--shell-1), var(--shell-3));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.7), 0 4px 8px rgba(30,45,70,.18);
  z-index: 1;
}
.arm.l { left: -16px; transform: rotate(6deg); transform-origin: top center; }
.arm.r { right: -16px; transform: rotate(-6deg); transform-origin: top center; }
.arm .hand { position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(160deg, var(--accent-bright), var(--accent-deep));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 3px 6px rgba(0,0,0,.2); }
.robot.happy .arm.r { animation: wave-arm .6s ease-in-out 2; }
@keyframes wave-arm { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(-26deg)} }

/* chest row: clue screen + readout + speaker */
.chest {
  display: flex; align-items: stretch; gap: 12px; margin-bottom: 12px;
}
.clue {
  flex: 0 0 auto;
  width: 116px;
  background: linear-gradient(160deg, var(--screen-2), var(--screen-1));
  border-radius: 16px;
  padding: 8px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5), 0 0 0 2px color-mix(in oklab, var(--accent), transparent 62%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative;
}
.clue .clue-label {
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: color-mix(in oklab, var(--accent-bright), white 10%);
}
.clue .clue-pic {
  width: 100%; height: 56px; border-radius: 10px;
  background: radial-gradient(circle at 50% 40%, color-mix(in oklab, var(--accent), #0c1422 60%), #0a111c);
  display: grid; place-items: center; font-size: 40px; line-height: 1;
  box-shadow: inset 0 0 12px rgba(0,0,0,.5);
}
.clue .clue-pic.listening { font-size: 26px; }
.clue .clue-pic.text {
  font-size: 12px; line-height: 1.18; font-weight: 700; padding: 5px 6px;
  text-align: center; word-break: break-word; hyphens: auto;
  color: color-mix(in oklab, var(--accent-bright), white 22%);
}
.clue .clue-pic .mini-eq { display:flex; gap:3px; align-items:flex-end; height:20px; }
.clue .clue-pic .mini-eq i { width:4px; height:6px; border-radius:2px; background: var(--accent-bright);
  display:inline-block; }
.robot.speaking .clue .clue-pic .mini-eq i { animation: eq .5s ease-in-out infinite; }
.clue .clue-pic .mini-eq i:nth-child(2){animation-delay:.1s}
.clue .clue-pic .mini-eq i:nth-child(3){animation-delay:.05s}
.clue .peek {
  appearance:none;border:none;cursor:pointer;font-family:var(--ui-font);font-weight:700;
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color: color-mix(in oklab, var(--accent-bright), white 10%);
  background: rgba(255,255,255,.08); border-radius: 7px; padding: 3px 8px;
}
.clue .peek:hover { background: rgba(255,255,255,.16); }

.readout {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(160deg, var(--screen-2), var(--screen-1));
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5), 0 0 0 2px color-mix(in oklab, var(--accent), transparent 62%);
}
.readout .stat .lbl {
  font-size: 9px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color: color-mix(in oklab, var(--accent-bright), #2a3a50 30%);
}
.readout .stat .num {
  font-size: 30px; font-weight: 800; line-height: 1; color: #fff;
  text-shadow: 0 0 12px color-mix(in oklab, var(--accent), transparent 40%);
  font-variant-numeric: tabular-nums;
}
.readout .grade-chip {
  appearance:none; border:none; cursor:pointer; font-family:var(--ui-font);
  font-weight:800; font-size:14px; color: var(--screen-1);
  background: linear-gradient(160deg, var(--accent-bright), var(--accent-deep));
  border-radius: 12px; padding: 8px 12px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 3px 8px color-mix(in oklab,var(--accent),transparent 55%);
  display:flex; flex-direction:column; align-items:center; line-height:1.05;
}
.readout .grade-chip small { font-size:8px; letter-spacing:.1em; text-transform:uppercase; opacity:.85; font-weight:700;}

.speaker {
  flex: 0 0 auto;
  appearance:none; border:none; cursor:pointer;
  width: 58px; border-radius: 16px;
  background: linear-gradient(170deg, var(--accent-bright), var(--accent-deep));
  box-shadow: inset 0 2px 3px rgba(255,255,255,.55), 0 6px 14px color-mix(in oklab, var(--accent), transparent 50%);
  color:#fff; font-size: 24px;
  display:grid; place-items:center;
  transition: transform .15s, box-shadow .15s;
}
.speaker:hover { transform: translateY(-2px); }
.speaker:active { transform: translateY(1px); }
.robot.speaking .speaker { animation: spk 0.7s ease-in-out infinite; }
@keyframes spk { 0%,100%{box-shadow: inset 0 2px 3px rgba(255,255,255,.55), 0 6px 14px color-mix(in oklab,var(--accent),transparent 55%);}
  50%{box-shadow: inset 0 2px 3px rgba(255,255,255,.55), 0 6px 22px color-mix(in oklab,var(--accent),transparent 25%);} }

/* main belly screen */
.screen {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px),
    linear-gradient(170deg, var(--screen-2), var(--screen-1));
  border-radius: 22px;
  padding: 16px 16px 18px;
  box-shadow:
    inset 0 2px 14px rgba(0,0,0,.6),
    0 0 0 3px color-mix(in oklab, var(--accent), transparent 55%),
    0 0 26px color-mix(in oklab, var(--accent), transparent 72%);
}
.screen .prompt {
  text-align:center; color: color-mix(in oklab, var(--accent-bright), white 18%);
  font-weight: 700; font-size: 14px; letter-spacing: .02em; margin-bottom: 10px;
  min-height: 18px;
}
.screen .prompt.good { color: #7CF2B0; }
.screen .prompt.bad  { color: #ff9bb3; }

/* answer slots */
.slots {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--slot-gap, 9px);
  margin-bottom: 13px;
}
.slot {
  width: var(--cell, 50px); height: var(--cell, 50px);
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: calc(var(--cell, 50px) * .48); font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,.04);
  border: 2px dashed color-mix(in oklab, var(--accent), transparent 55%);
  transition: all .18s;
}
.slot.filled {
  background: linear-gradient(165deg, var(--accent-bright), var(--accent-deep));
  border: 2px solid transparent; cursor: pointer;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent), transparent 55%), inset 0 1px 2px rgba(255,255,255,.4);
}
.slot.filled:hover { transform: translateY(2px) scale(.96); }
.slots.win .slot { animation: slot-pop .4s ease both; }
@keyframes slot-pop { 0%{transform:scale(1)} 50%{transform:scale(1.14)} 100%{transform:scale(1)} }

/* letter keys */
.keys {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--key-gap, 9px);
}
.key {
  width: var(--cell, 50px); height: var(--cell, 50px);
  appearance: none; border: none; cursor: pointer;
  border-radius: 12px;
  font-family: var(--ui-font); font-weight: 800;
  font-size: calc(var(--cell, 50px) * .46);
  color: var(--screen-1);
  background: linear-gradient(180deg, #f4f8fc, #cdd9e6);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 3px 0 #9fb0c2, 0 5px 10px rgba(0,0,0,.3);
  transition: transform .08s, box-shadow .08s, opacity .2s;
}
.key:hover { transform: translateY(-1px); }
.key:active { transform: translateY(3px); box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 0 0 #9fb0c2; }
.key.used { opacity: .22; pointer-events: none; transform: scale(.9); }

/* feet */
.feet { display:flex; justify-content:center; gap: 60px; margin-top: -8px; z-index: 0; position: relative; }
.feet .foot { width: 56px; height: 22px; border-radius: 0 0 16px 16px;
  background: linear-gradient(var(--shell-3), var(--shell-edge));
  box-shadow: 0 6px 10px rgba(30,45,70,.25); }

/* action buttons under robot */
.actions { display:flex; justify-content:center; gap: 12px; margin-top: 14px; }
.btn-action {
  appearance:none;border:none;cursor:pointer;font-family:var(--ui-font);font-weight:800;font-size:15px;
  padding: 11px 22px; border-radius: 16px; color:#fff;
  background: linear-gradient(170deg, var(--accent-bright), var(--accent-deep));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.5), 0 4px 0 var(--accent-deep), 0 7px 14px color-mix(in oklab,var(--accent),transparent 55%);
  transition: transform .12s, box-shadow .12s;
}
.btn-action.ghost {
  color: #25527a; background: rgba(255,255,255,.85);
  box-shadow: 0 3px 0 rgba(40,60,90,.22), 0 6px 14px rgba(30,45,70,.18);
}
.btn-action:hover { transform: translateY(-2px); }
.btn-action:active { transform: translateY(2px); box-shadow: inset 0 2px 2px rgba(255,255,255,.5), 0 1px 0 var(--accent-deep); }

/* confetti / sparkle layer */
.sparkles { position: fixed; inset: 0; pointer-events:none; z-index: 50; overflow:hidden; }
.sparkles .sp { position:absolute; font-size: 22px; will-change: transform, opacity;
  animation: sp-fall var(--d,1.6s) ease-in forwards; }
@keyframes sp-fall {
  0% { transform: translateY(-10px) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(80vh) rotate(var(--r, 360deg)); opacity: 0; }
}

/* ───────────────────────── modals ───────────────────────── */
.modal { display:none; position: fixed; inset: 0; z-index: 200;
  background: rgba(18,28,46,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal.show { display:grid; place-items:center; }
.modal-card {
  width: min(440px, 92vw); background: linear-gradient(180deg, #fff, #eef3f8);
  border-radius: 24px; padding: 24px;
  box-shadow: 0 24px 60px rgba(20,30,50,.4); border: 3px solid color-mix(in oklab, var(--accent), white 40%);
}
.modal-card h3 { margin: 0 0 14px; font-size: 22px; color: var(--ink); display:flex; align-items:center; gap:8px; }
.modal-card .x { float:right; appearance:none;border:none;background:none;cursor:pointer;font-size:26px;color:var(--ink-soft); line-height:1;}
.score-table { width:100%; border-collapse:collapse; margin-top: 6px; }
.score-table th, .score-table td { padding: 10px; text-align:center; font-weight:700; color: var(--ink); }
.score-table th { background: linear-gradient(160deg, var(--accent-bright), var(--accent-deep)); color:#fff; }
.score-table th:first-child{border-radius:10px 0 0 0} .score-table th:last-child{border-radius:0 10px 0 0}
.score-table tr:nth-child(even) td { background: rgba(0,0,0,.03); }
.score-toggle { display:flex; justify-content:center; margin: 6px 0 10px; }
.empty-note { text-align:center; color: var(--ink-soft); padding: 18px; font-weight:600; }

/* tweaks panel (vanilla) */
.twk {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999; width: 264px;
  display: none; flex-direction: column;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 16px;
  box-shadow: 0 14px 40px rgba(20,30,50,.28); color: var(--ink);
  font-family: var(--ui-font); overflow: hidden;
}
.twk.open { display: flex; }
.twk-hd { display:flex; align-items:center; justify-content:space-between; padding: 12px 10px 12px 16px; cursor: move; }
.twk-hd b { font-size: 14px; }
.twk-hd button { appearance:none;border:none;background:none;cursor:pointer;font-size:18px;color:var(--ink-soft); }
.twk-body { padding: 4px 16px 16px; display:flex; flex-direction:column; gap: 14px; }
.twk-row .lbl { font-size: 11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-soft); margin-bottom: 7px; display:flex; justify-content:space-between;}
.swatches { display:flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 9px; cursor:pointer; border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 5px rgba(0,0,0,.18); }
.swatch.sel { outline: 3px solid var(--ink); outline-offset: 1px; }
.seg { display:flex; background: rgba(0,0,0,.06); border-radius: 10px; padding: 3px; gap:3px; }
.seg button { flex:1; appearance:none;border:none;cursor:pointer;font-family:var(--ui-font);font-weight:700;font-size:12px;
  padding: 7px 4px; border-radius: 8px; background: transparent; color: var(--ink-soft); }
.seg button.sel { background:#fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.twk-slider { width:100%; }

/* TV / keyboard focus ring */
.tv-focus { outline: 4px solid #ffd24a; outline-offset: 3px; border-radius: 14px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* small screens */
@media (max-width: 560px) {
  .chest { flex-wrap: wrap; }
  .clue { width: 100%; flex-direction: row; height: 56px; }
  .clue .clue-pic { width: 64px; height: 100%; }
  .clue .clue-pic.text { font-size: 9.5px; line-height: 1.12; padding: 3px 4px; }
  .readout { order: -1; width: 100%; }
  .speaker { width: 100%; height: 48px; font-size: 22px; }
  .head { width: 86%; }
  .feet { gap: 40px; }
}