/* ============================================================
   PUZZLEPOWER — MIDNIGHT ARCADE
   Single-theme by design: a dark arcade at night. Every color
   is painted explicitly; the page never borrows the host ground.
   ============================================================ */
:root{
  --ink:#0c0e1a;
  --ink-2:#131629;
  --ink-3:#1b1f3a;
  --tile:#efead9;
  --tile-dim:rgba(239,234,217,.66);
  --tile-faint:rgba(239,234,217,.38);
  --line:rgba(239,234,217,.08);
  --coral:#ff5648;
  --gold:#ffc445;
  --mint:#3fe08f;
  --peri:#8b95ff;
  --act:#ff5648; /* live accent — scroll-driven, JS lerps this */
  --display:"Bricolage Grotesque",Futura,"Helvetica Neue",sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --pixel:"Press Start 2P","IBM Plex Mono",monospace;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 44px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/44px 100%,
    radial-gradient(120% 90% at 50% 0%,#141833 0%,var(--ink) 55%) var(--ink);
  color:var(--tile);
  font-family:var(--body);
  font-size:1.1875rem;
  line-height:1.62;
  overflow-x:hidden;
}
::selection{background:var(--act);color:var(--ink)}
a{color:inherit}
:focus-visible{outline:2px solid var(--act);outline-offset:3px;border-radius:2px}
img,svg,canvas{max-width:100%;display:block}
em{font-style:italic;color:var(--tile)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--pixel);font-size:.625rem;letter-spacing:.14em;
  color:var(--act);text-transform:uppercase;line-height:1.9;
}
.lvl-title{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.4rem,6.4vw,4.75rem);line-height:.96;letter-spacing:-.015em;
  text-wrap:balance;
}
.lvl-sub{
  max-width:34em;color:var(--tile-dim);font-size:clamp(1.1rem,1.5vw,1.3rem);
  font-weight:400;
}
.nowrap{white-space:nowrap}
.section-head{display:grid;gap:1.1rem;margin-bottom:3.2rem;max-width:60rem}

/* ---------- HUD ---------- */
.hud{
  position:fixed;inset:0 0 auto 0;z-index:50;display:flex;
  justify-content:space-between;align-items:center;
  padding:.9rem 1.2rem;pointer-events:none;
  font-family:var(--pixel);font-size:.6rem;letter-spacing:.08em;
  color:var(--tile-dim);
  background:linear-gradient(rgba(12,14,26,.88),rgba(12,14,26,0));
}
.hud__logo{display:flex;align-items:center;gap:.55rem;color:var(--tile)}
.hud__tile{
  display:grid;place-items:center;width:1.55rem;height:1.55rem;
  background:var(--act);color:var(--ink);border-radius:.2rem;
  font-size:.65rem;box-shadow:0 3px 0 rgba(0,0,0,.45);
}
.hud__score{display:flex;gap:.9rem;align-items:center}
.hud__score [data-score]{color:var(--tile);min-width:6ch;text-align:right}
.hud__1up{color:var(--act);animation:blink 1.1s steps(2) infinite}
.hud__score.hi [data-score]{color:var(--gold);animation:blink .4s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hud-level{
  position:fixed;left:1.2rem;bottom:1.1rem;z-index:50;pointer-events:none;
  font-family:var(--pixel);font-size:.55rem;letter-spacing:.1em;
  color:var(--act);padding:.55rem .7rem;border:1px solid color-mix(in oklab,var(--act),transparent 65%);
  background:rgba(12,14,26,.82);border-radius:.25rem;
}
@media (max-width:640px){.hud-level{display:none}.hud{font-size:.5rem}}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--pixel);font-size:.7rem;
  letter-spacing:.06em;text-decoration:none;cursor:pointer;border:0;
  background:var(--act);color:var(--ink);padding:1.05rem 1.4rem .95rem;
  border-radius:.3rem;box-shadow:0 6px 0 color-mix(in oklab,var(--act),black 50%);
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 color-mix(in oklab,var(--act),black 50%)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in oklab,var(--act),black 50%)}
.btn--ghost{
  background:transparent;color:var(--tile);box-shadow:none;
  border:2px solid var(--line);
}
.btn--ghost:hover{border-color:var(--act);color:var(--act);box-shadow:none}

/* ---------- reveal util ---------- */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.js .rv.on{opacity:1;transform:none}

/* ============================================================
   HERO — ATTRACT MODE
   ============================================================ */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;overflow:hidden}
.hero__grid{position:absolute;inset:0;width:100%;height:100%}
.hero__scrim{
  position:absolute;inset:0;
  background:radial-gradient(90% 75% at 50% 62%,rgba(12,14,26,.94) 30%,rgba(12,14,26,.55) 62%,rgba(12,14,26,.15) 100%);
}
.hero__content{
  position:relative;z-index:2;place-self:center;text-align:center;
  display:grid;gap:1.6rem;justify-items:center;padding:7rem 1.4rem 6rem;
  max-width:64rem;
}
.hero__title{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(3rem,10vw,8.25rem);line-height:.92;letter-spacing:-.02em;
  text-wrap:balance;
}
.hero__title span{display:block}
.js .hero__title span{opacity:0;transform:translateY(.35em);animation:rise .8s cubic-bezier(.2,.9,.3,1) forwards}
.js .hero__title span:nth-child(2){animation-delay:.18s}
@keyframes rise{to{opacity:1;transform:none}}
.hero__sub{
  max-width:36em;color:var(--tile-dim);font-size:clamp(1.1rem,1.6vw,1.35rem);
}
.js .hero__sub,.js .hero__cta{opacity:0;animation:rise .8s ease .45s forwards}
.hero__cta{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;justify-content:center}
.hero__hint{font-family:var(--mono);font-size:.78rem;color:var(--tile-faint)}
.hero__scroll{
  position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;z-index:2;
  font-family:var(--pixel);font-size:.55rem;letter-spacing:.14em;color:var(--tile-faint);
  animation:blink 1.6s steps(2) infinite;
}

/* ============================================================
   PINNED SCENES
   ============================================================ */
.pin{position:relative}
.js .pin{height:320vh}
.stage{position:relative;min-height:100vh;display:grid;overflow:hidden}
.js .stage{position:sticky;top:0;height:100vh}
@media (prefers-reduced-motion:reduce){
  .js .pin{height:auto}
  .js .stage{position:relative;height:auto;min-height:100vh}
}

/* beats: sequenced captions inside a pinned scene */
.js .beat{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .beat.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .beat{opacity:1;transform:none}}

/* ---------- LEVEL 1 · THE PROBLEM ---------- */
.problem__canvas{position:absolute;inset:0;width:100%;height:100%}
.problem__copy{
  position:relative;z-index:2;place-self:center;text-align:center;
  display:grid;gap:1.4rem;justify-items:center;padding:2rem 1.4rem 22vh;max-width:56rem;
}
.js .problem__copy>.beat{grid-area:1/1;place-self:center}
@media (prefers-reduced-motion:reduce){.js .problem__copy>.beat{grid-area:auto}}
.problem__lede{font-size:clamp(1.2rem,2vw,1.6rem);color:var(--tile-dim)}
.problem__stat{display:grid;justify-items:center;gap:.4rem}
.problem__num{
  font-family:var(--display);font-weight:800;line-height:.85;
  font-size:clamp(6rem,22vw,17rem);letter-spacing:-.03em;color:var(--act);
  font-variant-numeric:tabular-nums;
}
.problem__num sup{font-size:.35em;vertical-align:.9em;letter-spacing:0}
.problem__stat p{font-size:clamp(1.15rem,1.8vw,1.45rem);color:var(--tile-dim);max-width:26em}
.problem__kicker{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:500;max-width:24em;text-wrap:balance}
.problem__kicker em{color:var(--act)}

/* ---------- LEVEL 2 · THE LOOP ---------- */
.stage--loop{place-items:center;padding:5.5rem 1.4rem 4rem}
.loop__inner{display:grid;gap:2.6rem;width:min(72rem,100%)}
.loop__row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
@media (max-width:820px){.loop__row{grid-template-columns:1fr;gap:1rem}}
.frame{
  display:grid;gap:.9rem;margin:0;
  transition:opacity .5s ease,transform .5s ease;
}
.js .frame{opacity:.32;transform:scale(.965)}
.js .frame.live,.js .frame.done{opacity:1;transform:none}
.js .frame.done{opacity:.75}
@media (prefers-reduced-motion:reduce){.js .frame{opacity:1;transform:none}}
.frame__step{
  font-family:var(--pixel);font-size:.6rem;letter-spacing:.12em;color:var(--act);
}
.shopwin{
  background:var(--ink-2);border:1px solid var(--line);border-radius:.6rem;
  overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.shopwin__bar{
  display:flex;align-items:center;gap:.45rem;padding:.55rem .8rem;
  border-bottom:1px solid var(--line);font-family:var(--mono);
  font-size:.68rem;color:var(--tile-faint);
}
.shopwin__bar i{width:.55rem;height:.55rem;border-radius:50%;background:var(--ink-3);display:inline-block}
.shopwin__bar span{margin-left:.4rem}
.shopwin__body{padding:1rem;display:grid;gap:.9rem;min-height:16.5rem;align-content:start}
.shopwin__product{display:flex;gap:.8rem;align-items:center}
.shopwin__thumb{
  width:3rem;height:3rem;border-radius:.4rem;flex:none;
  background:linear-gradient(135deg,#2b3358,#151a36);
  border:1px solid var(--line);
}
.shopwin__name{font-family:var(--mono);font-size:.8rem;color:var(--tile)}
.shopwin__price{font-family:var(--mono);font-size:.72rem;color:var(--tile-faint)}
.widgetlabel{
  font-family:var(--pixel);font-size:.5rem;letter-spacing:.12em;color:var(--tile-faint);
}
/* mini word-search grid used in the PLAY frame + cabinets */
.minigrid{
  display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:3px;
  font-family:var(--mono);font-weight:600;
}
.minigrid b{
  aspect-ratio:1;display:grid;place-items:center;font-weight:600;
  background:var(--ink-3);border-radius:.2rem;color:var(--tile-dim);
  font-size:.78rem;transition:background .3s ease,color .3s ease;
}
.minigrid b.lit{background:var(--cabhue,var(--act));color:var(--ink)}
/* WIN frame */
.winbox{position:relative;display:grid;place-items:center;min-height:12.5rem}
.conf{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.conf i{
  position:absolute;top:-8%;width:.42rem;height:.62rem;border-radius:1px;
  opacity:0;
}
.js .live .conf i{animation:confetti 1.5s ease-in infinite}
@keyframes confetti{
  0%{opacity:1;transform:translateY(0) rotate(0)}
  100%{opacity:0;transform:translateY(14rem) rotate(260deg)}
}
@media (prefers-reduced-motion:reduce){.js .live .conf i{animation:none}}
.ticket{
  position:relative;background:var(--gold);color:var(--ink);border-radius:.45rem;
  padding:1rem 1.2rem;display:grid;gap:.3rem;justify-items:center;text-align:center;
  transform:rotate(-2deg);width:min(15rem,100%);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.js .frame .ticket{transform:rotate(-2deg) translateY(1.4rem);opacity:0;transition:all .55s cubic-bezier(.2,.9,.3,1) .25s}
.js .frame.live .ticket,.js .frame.done .ticket{transform:rotate(-2deg);opacity:1}
.ticket::before,.ticket::after{
  content:"";position:absolute;top:50%;width:1rem;height:1rem;border-radius:50%;
  background:var(--ink-2);transform:translateY(-50%);
}
.ticket::before{left:-.5rem}.ticket::after{right:-.5rem}
.ticket__won{font-family:var(--pixel);font-size:.5rem;letter-spacing:.12em}
.ticket__code{font-family:var(--mono);font-weight:600;font-size:1.05rem;letter-spacing:.06em}
.ticket__off{font-family:var(--display);font-weight:800;font-size:1.5rem;text-transform:uppercase}
/* BUY frame */
.cartrow{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:.8rem;color:var(--tile-dim)}
.cartrow s{color:var(--tile-faint)}
.cartrow strong{color:var(--mint);font-weight:600}
.checkout{
  font-family:var(--pixel);font-size:.6rem;text-align:center;color:var(--ink);
  background:var(--mint);border-radius:.3rem;padding:.85rem .6rem;
}
.js .frame.live .checkout{animation:pulse 1.2s ease infinite}
@keyframes pulse{50%{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.js .frame.live .checkout{animation:none}}
.frame__cap{color:var(--tile-dim);font-size:1rem;line-height:1.5;max-width:30em}
.frame__cap strong{color:var(--tile);font-weight:500}

/* ============================================================
   LEVEL 3 · THE ARSENAL
   ============================================================ */
.arsenal{padding:9rem 1.4rem;max-width:80rem;margin:0 auto}
.cabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:1.1rem}
.cab{
  --cabhue:var(--coral);
  background:linear-gradient(180deg,var(--ink-2),var(--ink));
  border:1px solid var(--line);border-top:4px solid var(--cabhue);
  border-radius:.65rem;padding:1.1rem 1.1rem 1.3rem;display:grid;gap:1rem;
  align-content:start;
  transition:transform .25s ease,border-color .25s ease;
}
.cab:hover{transform:translateY(-6px);border-color:color-mix(in oklab,var(--cabhue),transparent 55%)}
.cab__marquee{
  font-family:var(--pixel);font-size:.62rem;letter-spacing:.1em;color:var(--cabhue);
  display:flex;justify-content:space-between;align-items:center;
}
.cab__marquee small{font-size:.5rem;color:var(--tile-faint);letter-spacing:.06em}
.cab__screen{
  background:var(--ink);border:1px solid var(--line);border-radius:.45rem;
  min-height:11.5rem;display:grid;place-items:center;padding:.9rem;overflow:hidden;
}
.cab__blurb{font-size:.98rem;color:var(--tile-dim);line-height:1.55}
/* crossword screen */
.xword{display:grid;grid-template-columns:repeat(4,2rem);gap:3px;font-family:var(--mono);font-weight:600}
.xword b{
  width:2rem;height:2rem;display:grid;place-items:center;font-size:.85rem;
  background:var(--tile);color:var(--ink);border-radius:2px;font-weight:600;
}
.xword b:empty{background:var(--ink)}
.xword b.blank{background:var(--ink-3)} /* white cell awaiting a letter */
.xword b.caret{outline:2px solid var(--cabhue);outline-offset:-2px}
/* cryptogram screen */
.crypt{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;perspective:600px}
.crypt .sp{width:.7rem}
.crypt__tile{width:2.1rem;height:2.4rem;position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.8,.3,1)}
.crypt__tile.flip{transform:rotateX(180deg)}
.crypt__tile b,.crypt__tile i{
  position:absolute;inset:0;display:grid;place-items:center;border-radius:.25rem;
  font-family:var(--mono);font-weight:600;font-size:1rem;font-style:normal;
  backface-visibility:hidden;
}
.crypt__tile i{background:var(--ink-3);color:var(--cabhue)}
.crypt__tile b{background:var(--cabhue);color:var(--ink);transform:rotateX(180deg)}
.crypt__hint{font-family:var(--mono);font-size:.68rem;color:var(--tile-faint);margin-top:.7rem;text-align:center}
/* scramble screen */
.scram{position:relative;height:2.6rem;width:15rem}
.scram b{
  position:absolute;top:0;width:2.2rem;height:2.5rem;display:grid;place-items:center;
  background:var(--tile);color:var(--ink);font-family:var(--mono);font-weight:600;
  border-radius:.25rem;font-size:1.05rem;box-shadow:0 3px 0 rgba(0,0,0,.4);
  transition:transform .6s cubic-bezier(.3,.9,.3,1.1);
}
.scram.solved b{background:var(--cabhue)}
/* jigsaw screen */
.jig{width:11rem;height:11rem}
.jig path{transition:transform 1s cubic-bezier(.25,.9,.3,1);transform-box:fill-box;transform-origin:center}

/* ============================================================
   LEVEL 4 · THE BRAIN
   ============================================================ */
.brain{padding:9rem 1.4rem;max-width:80rem;margin:0 auto}
.brain__demo{
  display:grid;grid-template-columns:1fr auto 1.2fr;gap:1.4rem;align-items:stretch;
}
@media (max-width:900px){.brain__demo{grid-template-columns:1fr}}
.panel{
  background:var(--ink-2);border:1px solid var(--line);border-radius:.6rem;
  padding:1.1rem;display:grid;gap:.8rem;align-content:start;
}
.panel__label{font-family:var(--pixel);font-size:.5rem;letter-spacing:.12em;color:var(--tile-faint)}
.feed__mask{height:15rem;overflow:hidden;position:relative}
.feed__mask::before,.feed__mask::after{
  content:"";position:absolute;left:0;right:0;height:2.2rem;z-index:2;pointer-events:none;
}
.feed__mask::before{top:0;background:linear-gradient(var(--ink-2),transparent)}
.feed__mask::after{bottom:0;background:linear-gradient(transparent,var(--ink-2))}
.feed__list{list-style:none;display:grid;gap:.55rem;font-family:var(--mono);font-size:.78rem;color:var(--tile-dim)}
.js .feed__list{animation:feedscroll 16s linear infinite}
@keyframes feedscroll{to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.js .feed__list{animation:none}}
.feed__list li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--line);padding-bottom:.55rem}
.feed__list li span:last-child{color:var(--tile-faint);flex:none}
.pipe{
  display:grid;gap:.7rem;align-content:center;justify-items:center;text-align:center;
  padding:1rem .4rem;
}
.pipe__chip{
  font-family:var(--mono);font-size:.72rem;color:var(--act);
  border:1px solid color-mix(in oklab,var(--act),transparent 60%);
  border-radius:2rem;padding:.45rem .9rem;background:var(--ink-2);white-space:nowrap;
}
.pipe__json{
  font-family:var(--mono);font-size:.66rem;line-height:1.7;color:var(--tile-dim);
  text-align:left;min-height:8.2rem;width:min(19rem,100%);overflow:hidden;
  background:var(--ink);border:1px solid var(--line);border-radius:.5rem;padding:.8rem .9rem;
  white-space:pre-wrap;word-break:break-word;
}
.pipe__json::after{content:"▌";color:var(--act);animation:blink 1s steps(2) infinite}
.braincells{
  display:grid;grid-template-columns:repeat(9,1fr);gap:3px;font-family:var(--mono);font-weight:600;
}
.braincells b{
  aspect-ratio:1;display:grid;place-items:center;border-radius:2px;font-size:.72rem;
  background:var(--ink-3);color:transparent;transition:all .4s ease;font-weight:600;
}
.braincells b.seed{color:var(--tile-faint)}
.braincells b.word{background:var(--act);color:var(--ink)}
.brain__chips{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2rem}
.chip{
  font-family:var(--mono);font-size:.74rem;color:var(--tile-dim);
  border:1px solid var(--line);border-radius:2rem;padding:.45rem .95rem;
}

/* ============================================================
   LEVEL 5 · THE PRIZE
   ============================================================ */
.prize{padding:9rem 1.4rem;max-width:80rem;margin:0 auto}
.prize__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.4rem;align-items:center}
.bigticket{
  background:var(--gold);color:var(--ink);border-radius:.6rem;padding:1.6rem;
  display:grid;gap:.5rem;justify-items:center;text-align:center;position:relative;
  transform:rotate(-2.5deg);box-shadow:0 24px 50px rgba(0,0,0,.5);
}
.bigticket::before,.bigticket::after{
  content:"";position:absolute;top:50%;width:1.4rem;height:1.4rem;border-radius:50%;
  background:var(--ink);transform:translateY(-50%);
}
.bigticket::before{left:-.7rem}.bigticket::after{right:-.7rem}
.bigticket .ticket__off{font-size:2.4rem}
.bigticket .ticket__code{font-size:1.25rem}
.bigticket small{font-family:var(--mono);font-size:.68rem;opacity:.75}
.giftcard{
  background:linear-gradient(135deg,var(--ink-3),#232a52);border:1px solid var(--line);
  border-radius:.8rem;padding:1.6rem;display:grid;gap:2.2rem;transform:rotate(1.6deg);
  box-shadow:0 24px 50px rgba(0,0,0,.5);
}
.giftcard__brand{font-family:var(--pixel);font-size:.55rem;letter-spacing:.12em;color:var(--tile-dim)}
.giftcard__amt{font-family:var(--display);font-weight:800;font-size:3rem;line-height:1}
.giftcard__num{font-family:var(--mono);font-size:.78rem;color:var(--tile-faint);letter-spacing:.12em}
.prize__facts{list-style:none;display:grid;gap:1rem}
.prize__facts li{
  display:grid;gap:.2rem;border-left:2px solid var(--act);padding-left:1rem;
}
.prize__facts strong{font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--tile);letter-spacing:.02em}
.prize__facts span{font-size:.95rem;color:var(--tile-dim)}

/* ============================================================
   LEVEL 6 · THE SCOREBOARD
   ============================================================ */
.score{padding:9rem 1.4rem;max-width:80rem;margin:0 auto}
.score__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:1.1rem;margin-bottom:1.1rem}
.stat{
  background:var(--ink-2);border:1px solid var(--line);border-radius:.6rem;
  padding:1.3rem 1.2rem;display:grid;gap:.7rem;
}
.stat__num{
  font-family:var(--pixel);font-size:clamp(1rem,2vw,1.35rem);color:var(--act);
  font-variant-numeric:tabular-nums;line-height:1.3;
}
.stat__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--tile-faint);text-transform:uppercase}
.chartbox{
  background:var(--ink-2);border:1px solid var(--line);border-radius:.6rem;padding:1.3rem;
  display:grid;gap:.8rem;
}
.chartbox svg{width:100%;height:auto}
.chart__line{fill:none;stroke:var(--act);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.js .chart__line{stroke-dasharray:620;stroke-dashoffset:620;transition:stroke-dashoffset 1.8s ease .2s}
.js .chartbox.on .chart__line{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.js .chart__line{stroke-dasharray:none;stroke-dashoffset:0}}
.chart__fill{fill:url(#chfill);opacity:0}
.js .chartbox.on .chart__fill{opacity:1;transition:opacity 1s ease 1.2s}
.chart__dot{fill:var(--act)}
.chart__grid{stroke:var(--line);stroke-width:1}
.chart__cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;color:var(--tile-faint)}
.score__note{margin-top:2.2rem;color:var(--tile-dim);max-width:38em}

/* ============================================================
   BOSS LEVEL · PRICING
   ============================================================ */
.boss{padding:9rem 1.4rem;max-width:86rem;margin:0 auto}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem;align-items:stretch}
.plan{
  background:var(--ink-2);border:1px solid var(--line);border-radius:.65rem;
  padding:1.4rem 1.3rem;display:grid;gap:1.05rem;align-content:start;position:relative;
  transition:transform .25s ease,border-color .25s ease;
}
.plan:hover{transform:translateY(-6px);border-color:color-mix(in oklab,var(--act),transparent 55%)}
.plan--hot{border-color:var(--act);background:linear-gradient(180deg,color-mix(in oklab,var(--act),transparent 92%),var(--ink-2))}
.plan__flag{
  position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);
  font-family:var(--pixel);font-size:.5rem;letter-spacing:.1em;color:var(--ink);
  background:var(--act);padding:.4rem .6rem;border-radius:.25rem;white-space:nowrap;
}
.plan__name{font-family:var(--pixel);font-size:.66rem;letter-spacing:.1em;color:var(--tile)}
.plan__price{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1}
.plan__price small{font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--tile-faint)}
.plan__feats{list-style:none;display:grid;gap:.5rem;font-family:var(--mono);font-size:.76rem;color:var(--tile-dim);line-height:1.5}
.plan__feats li::before{content:"▸ ";color:var(--act)}
.boss__note{margin-top:2rem;font-family:var(--mono);font-size:.78rem;color:var(--tile-faint);text-align:center}

/* ============================================================
   READY PLAYER ONE — CTA + FOOTER
   ============================================================ */
.start{
  padding:10rem 1.4rem 8rem;text-align:center;display:grid;gap:1.6rem;justify-items:center;
  background:radial-gradient(70% 60% at 50% 100%,color-mix(in oklab,var(--act),transparent 88%),transparent 70%);
}
.start .lvl-title{font-size:clamp(2.8rem,8vw,6.5rem)}
.start__form{
  display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;align-items:stretch;
  width:min(38rem,100%);margin-top:.6rem;
}
.start__input{
  flex:1;min-width:16rem;background:var(--ink-2);border:2px solid var(--line);
  border-radius:.3rem;color:var(--tile);font-family:var(--mono);font-size:.95rem;
  padding:1rem 1.1rem;letter-spacing:.03em;
}
.start__input::placeholder{color:var(--tile-faint)}
.start__input:focus{outline:none;border-color:var(--act)}
.start__note{font-family:var(--mono);font-size:.78rem;color:var(--tile-faint);max-width:34em}
.start__msg{font-family:var(--mono);font-size:.8rem;color:var(--gold);min-height:1.4em}
.footer{
  border-top:1px solid var(--line);padding:3rem 1.4rem 8rem;
  display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:start;
  max-width:80rem;margin:0 auto;
}
.footer__logo{display:flex;align-items:center;gap:.55rem;font-family:var(--pixel);font-size:.6rem;color:var(--tile)}
.footer__nav{display:flex;gap:1.4rem;flex-wrap:wrap;font-family:var(--mono);font-size:.76rem}
.footer__nav a{color:var(--tile-dim);text-decoration:none}
.footer__nav a:hover{color:var(--act)}
.footer small{font-family:var(--mono);font-size:.7rem;color:var(--tile-faint);width:100%}

/* ---------- utility ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   PLAYABLE CABINETS — insert coin button + demo modal
   ============================================================ */
.cab__play{
  font-family:var(--pixel);font-size:.55rem;letter-spacing:.08em;cursor:pointer;
  background:transparent;color:var(--cabhue);border:2px solid color-mix(in oklab,var(--cabhue),transparent 55%);
  border-radius:.3rem;padding:.7rem .8rem .6rem;transition:background .15s ease,color .15s ease;
}
.cab__play:hover{background:var(--cabhue);color:var(--ink)}

.pmodal{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:1.2rem;background:rgba(12,14,26,.82);backdrop-filter:blur(4px);
  overflow-y:auto;
}
.pmodal[hidden]{display:none}
.pmodal__cab{
  --cabhue:var(--coral);
  width:min(30rem,100%);max-height:calc(100dvh - 2rem);overflow-y:auto;
  background:linear-gradient(180deg,var(--ink-2),var(--ink));
  border:1px solid var(--line);border-top:4px solid var(--cabhue);
  border-radius:.7rem;box-shadow:0 34px 90px rgba(0,0,0,.65);
}
.pmodal__bar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.95rem 1.1rem;border-bottom:1px solid var(--line);
  font-family:var(--pixel);font-size:.62rem;letter-spacing:.1em;color:var(--cabhue);
}
.pmodal__close{
  background:var(--ink-3);color:var(--tile);border:1px solid var(--line);cursor:pointer;
  width:2rem;height:2rem;border-radius:.3rem;font-family:var(--mono);font-size:.9rem;
}
.pmodal__close:hover{background:var(--cabhue);color:var(--ink)}
.pmodal__screen{padding:1.2rem;min-height:20rem;display:grid;gap:1.1rem;align-content:center;justify-items:center}
.pmodal__foot{
  padding:.85rem 1.1rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;color:var(--tile-faint);
}
.pbtn{
  font-family:var(--pixel);font-size:.58rem;letter-spacing:.08em;cursor:pointer;
  background:var(--cabhue,var(--act));color:var(--ink);border:0;border-radius:.3rem;
  padding:.8rem 1rem .7rem;text-decoration:none;display:inline-block;
  box-shadow:0 4px 0 rgba(0,0,0,.45);transition:transform .12s ease;
}
.pbtn:hover{transform:translateY(-2px)}
.pbtn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.pbtn--dim{background:var(--ink-3);color:var(--tile-dim);box-shadow:0 4px 0 rgba(0,0,0,.35)}
.pbtn--go{background:var(--gold)}

/* word hunt */
.ph-grid{
  display:grid;grid-template-columns:repeat(var(--cols,8),2.2rem);gap:3px;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
@media (max-width:480px){.ph-grid{grid-template-columns:repeat(var(--cols,8),1.9rem)}}
.ph-cell{
  aspect-ratio:1;display:grid;place-items:center;cursor:pointer;
  font-family:var(--mono);font-weight:600;font-size:.85rem;
  background:var(--ink-3);border-radius:.2rem;color:var(--tile-dim);
}
.ph-cell.sel{background:var(--tile);color:var(--ink)}
.ph-cell.found{background:var(--cabhue);color:var(--ink)}
.ph-words{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.ph-word{
  font-family:var(--mono);font-size:.74rem;color:var(--tile-dim);
  border:1px solid var(--line);border-radius:2rem;padding:.3rem .8rem;
}
.ph-word.found{background:var(--cabhue);border-color:var(--cabhue);color:var(--ink);text-decoration:line-through}

/* crossword */
.px-grid{display:grid;grid-template-columns:repeat(8,2.2rem);gap:2px}
@media (max-width:480px){.px-grid{grid-template-columns:repeat(8,1.85rem)}}
.px-cell{position:relative;aspect-ratio:1;background:var(--ink-3);border-radius:2px}
.px-cell.off{background:transparent;border:1px dashed rgba(239,234,217,.06)}
.px-cell input{
  width:100%;height:100%;border:0;background:var(--tile);color:var(--ink);
  text-align:center;font-family:var(--mono);font-weight:600;font-size:1rem;
  text-transform:uppercase;border-radius:2px;caret-color:var(--ink);
}
.px-cell input:focus{outline:2px solid var(--cabhue);outline-offset:-2px}
.px-cell input.rev{background:var(--cabhue)}
.px-num{
  position:absolute;top:1px;left:3px;z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:.55rem;font-weight:600;color:var(--ink);opacity:.65;
}
.px-clues{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;
  font-family:var(--mono);font-size:.74rem;color:var(--tile-dim);
}
@media (max-width:480px){.px-clues{grid-template-columns:1fr}}
.px-clues b{font-family:var(--pixel);font-size:.5rem;color:var(--cabhue);display:block;margin-bottom:.5rem}
.px-clues ul{list-style:none;display:grid;gap:.4rem}
.px-clues li{cursor:pointer;line-height:1.45}
.px-clues li:hover{color:var(--tile)}

/* cryptogram */
.pc-row{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}
.pc-sp{width:1rem}
.pc-ch{display:grid;gap:.3rem;justify-items:center}
.pc-ch input{
  width:2.1rem;height:2.4rem;text-align:center;border:0;border-radius:.25rem;
  background:var(--tile);color:var(--ink);font-family:var(--mono);font-weight:600;
  font-size:1rem;text-transform:uppercase;
}
.pc-ch input:focus{outline:2px solid var(--cabhue);outline-offset:-2px}
.pc-ch input.hint{background:var(--cabhue)}
.pc-sym{font-family:var(--mono);font-size:.8rem;color:var(--cabhue)}
.pc-hint{font-family:var(--mono);font-size:.72rem;color:var(--tile-faint);text-align:center}

/* scramble */
.ps-list{list-style:none;display:grid;gap:.9rem;width:100%}
.ps-item{
  display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;align-items:center;
  border:1px solid var(--line);border-radius:.5rem;padding:.85rem .9rem;
  transition:border-color .3s ease;
}
.ps-item.ok{border-color:var(--cabhue)}
.ps-scr{font-family:var(--mono);font-weight:600;font-size:1rem;letter-spacing:.06em;color:var(--cabhue);min-width:9ch}
.ps-inp{
  background:var(--ink-3);border:1px solid var(--line);border-radius:.3rem;
  color:var(--tile);font-family:var(--mono);font-size:.9rem;padding:.5rem .7rem;
  text-transform:uppercase;width:100%;
}
.ps-inp:focus{outline:none;border-color:var(--cabhue)}
.ps-item.ok .ps-inp{background:var(--cabhue);color:var(--ink);border-color:var(--cabhue)}
.ps-hint{grid-column:1/-1;font-family:var(--mono);font-size:.7rem;color:var(--tile-faint)}

/* jigsaw */
.pj-board{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:min(19rem,100%);touch-action:manipulation}
.pj-board.done{gap:0}
.pj-tile{
  aspect-ratio:1;border:0;padding:0;cursor:pointer;border-radius:.2rem;
  background-size:300% 300%;background-repeat:no-repeat;
  transition:transform .15s ease,border-radius .4s ease;
}
.pj-board.done .pj-tile{border-radius:0}
.pj-tile:hover{transform:scale(1.03)}
.pj-tile.sel{outline:3px solid var(--tile);outline-offset:-3px;transform:scale(1.05);z-index:2}
.pj-hint{font-family:var(--mono);font-size:.72rem;color:var(--tile-faint);text-align:center}

/* win screen */
.pwin{position:relative;display:grid;gap:1.2rem;justify-items:center;text-align:center;padding:1.4rem 0;width:100%}
.pwin__conf{position:absolute;inset:-1.2rem;overflow:hidden;pointer-events:none}
.pwin__conf i{position:absolute;top:-8%;width:.42rem;height:.62rem;border-radius:1px;animation:pwfall 1.6s ease-in infinite}
@keyframes pwfall{
  0%{opacity:1;transform:translateY(0) rotate(0)}
  100%{opacity:0;transform:translateY(22rem) rotate(260deg)}
}
@media (prefers-reduced-motion:reduce){.pwin__conf i{animation:none;opacity:0}}
.pwin__ticket{transform:rotate(-2deg)}
.pwin__note{font-size:.95rem;color:var(--tile-dim);max-width:26em}
.pwin__row{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}

/* ============================================================
   BONUS STAGE — the corner arcade section
   ============================================================ */
.side{padding:9rem 1.4rem;max-width:80rem;margin:0 auto}
.side__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem}
.gamecard{
  --cabhue:var(--coral);
  text-align:left;cursor:pointer;font:inherit;
  background:linear-gradient(180deg,var(--ink-2),var(--ink));color:var(--tile);
  border:1px solid var(--line);border-top:4px solid var(--cabhue);
  border-radius:.65rem;padding:1.2rem 1.1rem 1.3rem;display:grid;gap:.85rem;
  align-content:start;transition:transform .25s ease,border-color .25s ease;
}
.gamecard:hover{transform:translateY(-6px);border-color:color-mix(in oklab,var(--cabhue),transparent 55%)}
.gamecard__icon{font-size:2.2rem;line-height:1}
.gamecard__name{
  font-family:var(--pixel);font-size:.62rem;letter-spacing:.1em;color:var(--cabhue);
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
}
.gamecard__name small{font-size:.5rem;color:var(--tile-faint);letter-spacing:.06em}
.gamecard__blurb{font-size:.95rem;color:var(--tile-dim);line-height:1.55}
.gamecard__cta{font-family:var(--pixel);font-size:.52rem;letter-spacing:.08em;color:var(--tile);opacity:.75}
.gamecard:hover .gamecard__cta{color:var(--cabhue);opacity:1}
.side__note{
  margin-top:2.4rem;font-family:var(--mono);font-size:.82rem;color:var(--tile-dim);
  border:1px dashed color-mix(in oklab,var(--act),transparent 55%);border-radius:.5rem;
  padding:.95rem 1.1rem;max-width:46rem;
}
.side__note b{color:var(--act);font-weight:600}

/* ============================================================
   CORNER ARCADE WIDGET — launcher + player
   ============================================================ */
.arcw-fab{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:80;cursor:pointer;
  display:grid;gap:.3rem;justify-items:center;
  background:var(--ink-2);color:var(--tile);border:2px solid var(--act);
  border-radius:.6rem;padding:.7rem .85rem .6rem;
  box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 0 color-mix(in oklab,var(--act),transparent 60%);
  animation:fabpulse 2.6s ease infinite;
  transition:transform .15s ease;
}
.arcw-fab:hover{transform:translateY(-3px)}
.arcw-fab--hide{display:none}
.arcw-fab__coin{font-size:1.35rem;line-height:1}
.arcw-fab__label{font-family:var(--pixel);font-size:.45rem;letter-spacing:.12em;color:var(--act)}
@keyframes fabpulse{
  0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 0 color-mix(in oklab,var(--act),transparent 60%)}
  50%{box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 9px color-mix(in oklab,var(--act),transparent 100%)}
}
@media (prefers-reduced-motion:reduce){.arcw-fab{animation:none}}

.arcw{
  position:fixed;right:.9rem;bottom:.9rem;z-index:110;
  width:min(22.5rem,calc(100vw - 1.8rem));
  max-height:calc(100dvh - 1.8rem);overflow-y:auto;
  background:var(--ink-2);border:1px solid var(--line);border-radius:.8rem;
  box-shadow:0 30px 80px rgba(0,0,0,.65);
  display:grid;align-content:start;
}
.arcw[hidden]{display:none}
.arcw__head{
  display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;
  border-bottom:1px solid var(--line);background:var(--ink-3);
  position:sticky;top:0;z-index:3;
}
.arcw__coin{font-size:1.2rem}
.arcw__titles{display:grid;gap:.15rem;flex:1;min-width:0}
.arcw__title{font-family:var(--pixel);font-size:.55rem;letter-spacing:.1em;color:var(--tile)}
.arcw__tag{font-family:var(--mono);font-size:.62rem;color:var(--tile-faint)}
.arcw__close{
  background:var(--ink);color:var(--tile);border:1px solid var(--line);cursor:pointer;
  width:1.9rem;height:1.9rem;border-radius:.3rem;font-family:var(--mono);font-size:.85rem;flex:none;
}
.arcw__close:hover{background:var(--act);color:var(--ink)}
.arcw__menu{display:grid;gap:.6rem;padding:1rem}
.arcw__intro{font-family:var(--mono);font-size:.72rem;color:var(--tile-dim);line-height:1.6;margin-bottom:.2rem}
.arcw__item{
  display:flex;align-items:center;gap:.85rem;cursor:pointer;text-align:left;
  background:var(--ink);border:1px solid var(--line);border-radius:.5rem;
  padding:.8rem .9rem;color:var(--tile);font:inherit;
  transition:border-color .15s ease,transform .15s ease;
}
.arcw__item:hover{border-color:var(--act);transform:translateX(3px)}
.arcw__item-icon{font-size:1.5rem;flex:none}
.arcw__item-name{display:grid;gap:.25rem;flex:1;min-width:0}
.arcw__item-name b{font-family:var(--pixel);font-size:.52rem;letter-spacing:.1em;color:var(--tile)}
.arcw__item-name i{font-family:var(--mono);font-style:normal;font-size:.62rem;color:var(--tile-faint)}
.arcw__item-best{font-family:var(--pixel);font-size:.42rem;color:var(--gold);flex:none}
.arcw__game{display:grid;gap:.7rem;padding:.9rem 1rem 1rem}
.arcw__game[hidden],.arcw__menu[hidden]{display:none}
.arcw__top{display:flex;align-items:center;gap:.8rem;justify-content:space-between}
.arcw__back{
  background:transparent;border:1px solid var(--line);color:var(--tile-dim);cursor:pointer;
  font-family:var(--pixel);font-size:.45rem;letter-spacing:.08em;
  padding:.5rem .6rem .4rem;border-radius:.3rem;
}
.arcw__back:hover{border-color:var(--act);color:var(--act)}
.arcw__score{font-family:var(--pixel);font-size:.45rem;letter-spacing:.08em;color:var(--tile-faint)}
.arcw__score b{color:var(--tile);font-weight:400}
.arcw__score--best b{color:var(--gold)}
.arcw__stage{position:relative;border:1px solid var(--line);border-radius:.5rem;overflow:hidden;background:var(--ink)}
.arcw__canvas{width:100%;aspect-ratio:320/400;display:block;touch-action:none}
.arcw__over{
  position:absolute;inset:0;z-index:2;display:grid;gap:.8rem;place-content:center;justify-items:center;
  background:rgba(12,14,26,.9);text-align:center;padding:1rem;
}
.arcw__over[hidden]{display:none}
.arcw__over-title{font-family:var(--pixel);font-size:.95rem;color:var(--coral);letter-spacing:.08em}
.arcw__over-score{font-family:var(--pixel);font-size:.5rem;color:var(--tile-dim);letter-spacing:.08em}
.arcw__mini{
  background:var(--gold);color:var(--ink);border-radius:.4rem;padding:.7rem 1rem;
  display:grid;gap:.25rem;justify-items:center;transform:rotate(-2deg);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.arcw__mini b{font-family:var(--pixel);font-size:.5rem;letter-spacing:.08em}
.arcw__mini span{font-family:var(--mono);font-weight:600;font-size:.85rem;letter-spacing:.05em}
.arcw__over-note{font-family:var(--mono);font-size:.68rem;color:var(--tile-dim);max-width:22em;line-height:1.6}
.arcw__over-row{display:flex;gap:.7rem}
.arcw__over .pbtn{--cabhue:var(--act)}
.arcw__pads{display:flex;gap:.5rem;justify-content:center}
.arcw__pads:empty{display:none}
.arcw__pad{
  flex:1;max-width:6.5rem;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;
  background:var(--ink-3);color:var(--tile);border:1px solid var(--line);border-radius:.4rem;
  font-family:var(--pixel);font-size:.6rem;padding:.85rem .4rem .75rem;
}
.arcw__pad--wide{max-width:none}
.arcw__pad:active{background:var(--act);color:var(--ink);border-color:var(--act)}
.arcw__hint{font-family:var(--mono);font-size:.66rem;color:var(--tile-faint);text-align:center}
@media (max-width:480px){
  .arcw{right:.6rem;bottom:.6rem;width:calc(100vw - 1.2rem)}
  .arcw-fab{right:.8rem;bottom:.8rem}
}