:root {
  color-scheme: dark;
  --bg:#020712; --ink:#edfdfb; --muted:#76929b; --aqua:#7cffe1; --aqua-soft:rgba(124,255,225,.2);
  --gold:#ffcf67; --rose:#ff5d91; --panel:rgba(3,12,25,.78); --line:rgba(171,255,239,.15);
  --display:Didot,"Bodoni MT",Georgia,serif; --sans:Inter,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; min-width:320px; min-height:100%; background:var(--bg); }
body { min-height:100vh; overflow:hidden; color:var(--ink); font-family:var(--sans); }
button { border:0; color:inherit; font:inherit; }
button:focus-visible { outline:2px solid var(--aqua); outline-offset:5px; }
#game-canvas:focus-visible { outline:2px solid var(--aqua); outline-offset:-2px; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
body.is-playing #game-canvas { cursor:none; }
#game-canvas,.water-light,.grain { position:fixed; inset:0; width:100%; height:100%; }
#game-canvas { z-index:0; background:radial-gradient(circle at 50% 50%,#092634 0,#03111f 44%,#01050d 100%); }
.water-light { z-index:1; pointer-events:none; opacity:.2; background:radial-gradient(ellipse at 68% 115%,rgba(31,220,210,.65),transparent 52%),radial-gradient(ellipse at 0 0,rgba(52,101,255,.5),transparent 45%); mix-blend-mode:screen; }
.grain { z-index:2; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.app-shell { position:relative; z-index:3; display:grid; grid-template-rows:auto 1fr auto; min-height:100svh; pointer-events:none; }
.topbar,.footer { display:grid; align-items:center; padding:1.25rem clamp(1rem,3vw,3rem); pointer-events:auto; }
.topbar { grid-template-columns:1fr auto 1fr; border-bottom:1px solid rgba(255,255,255,.055); }
.brand { display:flex; align-items:center; justify-self:start; gap:.7rem; padding:0; background:transparent; cursor:pointer; font-size:.75rem; font-weight:650; letter-spacing:.17em; text-transform:uppercase; }
.brand-glyph { position:relative; display:grid; place-items:center; width:1.5rem; height:1.5rem; border:1px solid var(--line); border-radius:50%; }
.brand-glyph::before,.brand-glyph::after,.brand-glyph i { content:""; position:absolute; width:.25rem; height:.25rem; border-radius:50%; background:var(--aqua); box-shadow:0 0 12px var(--aqua); }
.brand-glyph::before { transform:translate(-.33rem,.15rem); } .brand-glyph::after { transform:translate(.33rem,-.15rem); } .brand-glyph i { opacity:.7; }
.edition { color:var(--muted); font-weight:400; }
.scoreboard { display:flex; gap:2.5rem; }
.scoreboard div { display:flex; align-items:baseline; gap:.7rem; }
.scoreboard span { color:var(--muted); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; }
.scoreboard strong { min-width:5.6rem; color:var(--ink); font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:1rem; font-weight:500; letter-spacing:.08em; }
.top-actions { display:flex; justify-self:end; gap:.5rem; }
.icon-button { display:grid; place-items:center; width:2.55rem; height:2.55rem; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.025); cursor:pointer; backdrop-filter:blur(12px); transition:transform 180ms,border-color 180ms,background 180ms; }
.icon-button:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--aqua); background:var(--aqua-soft); }
.icon-button:disabled { opacity:.3; cursor:not-allowed; }
.icon-button svg { width:1rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; }
.sound-on { display:none; } .sound-active .sound-on { display:block; } .sound-active .sound-off { display:none; }
main { position:relative; min-height:0; pointer-events:none; }
.panel { position:absolute; top:50%; left:clamp(1.2rem,8vw,8rem); width:min(91vw,70rem); transform:translateY(-50%); pointer-events:auto; }
.eyebrow { display:flex; align-items:center; gap:.75rem; margin:0 0 1rem; color:var(--aqua); font-size:.68rem; font-weight:650; letter-spacing:.23em; text-transform:uppercase; }
.eyebrow span { width:2rem; height:1px; background:currentColor; }
h1 { margin:0; font-family:var(--display); font-size:clamp(5rem,12vw,11rem); font-weight:400; letter-spacing:-.06em; line-height:.7; text-transform:uppercase; }
h1 em { color:transparent; font-style:italic; -webkit-text-stroke:1px rgba(237,253,251,.72); }
.lede { max-width:33rem; margin:clamp(1.8rem,3vw,2.5rem) 0; color:#b5cad0; font-size:1rem; line-height:1.6; }
.rules { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1.25rem; max-width:52rem; margin-bottom:2rem; }
.rules div { display:grid; grid-template-columns:auto 1fr; gap:.75rem; padding-top:.8rem; border-top:1px solid var(--line); }
.rules p { margin:0; color:#8da8af; font-size:.76rem; line-height:1.45; }
.rules strong { color:var(--ink); font-weight:500; }
.rule-number { color:var(--aqua); font-family:ui-monospace,monospace; font-size:.66rem; }
.primary-button { display:inline-flex; align-items:center; gap:1rem; padding:.78rem .8rem .78rem 1.25rem; border-radius:999px; background:var(--aqua); color:#031118; cursor:pointer; font-size:.84rem; font-weight:650; box-shadow:0 .8rem 3rem rgba(54,255,219,.13); transition:transform 180ms,box-shadow 180ms; }
.primary-button:hover { transform:translateY(-3px); box-shadow:0 1rem 3rem rgba(54,255,219,.25); }
.button-orb { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:rgba(0,0,0,.13); }
.microcopy { margin:.8rem 0 0 .3rem; color:var(--muted); font-size:.66rem; letter-spacing:.03em; }
.hud { position:absolute; inset:0; pointer-events:none; }
.hud[hidden] { display:none; }
.hud-left { position:absolute; left:clamp(1rem,3vw,3rem); top:2rem; }
.timer span,.meter-copy span,.combo span,.depth span { color:var(--muted); font-size:.62rem; letter-spacing:.17em; text-transform:uppercase; }
.timer strong { display:block; margin-top:.25rem; color:var(--ink); font-family:var(--display); font-size:2.35rem; font-weight:400; }
.energy { display:flex; gap:.35rem; margin-top:.7rem; }
.energy-pip { width:2rem; height:.22rem; border-radius:99px; background:rgba(255,255,255,.12); transition:background 250ms,box-shadow 250ms; }
.energy-pip.active { background:var(--aqua); box-shadow:0 0 10px var(--aqua); }
/* Dimmed by colour and scale, not by opacity. At the old `opacity:.35` the label
   measured 1.68:1 and the number 2.45:1 against the deep — both failures, and
   both invisible in the CSS because the tokens themselves are fine. This is the
   same fix task 008 applied to PRICESHOCK's losing card, for the same reason:
   if text must stay readable, alpha is not a dimming tool. */
.combo { position:absolute; top:2rem; left:50%; display:flex; flex-direction:column; align-items:center; transform:translateX(-50%) scale(.86); transition:transform 180ms,color 180ms; }
.combo.hot { transform:translateX(-50%) scale(1); }
.combo strong { color:var(--muted); font-family:var(--display); font-size:3rem; font-weight:400; line-height:1; transition:color 180ms,text-shadow 180ms; }
.combo.hot strong { color:var(--gold); text-shadow:0 0 18px rgba(255,207,103,.4); }
.depth { margin-top:.9rem; }
.depth strong { display:block; margin-top:.2rem; color:var(--gold); font-family:var(--display); font-size:1.4rem; font-weight:400; line-height:1; }
.depth.rising strong { animation:depthRise 700ms ease-out; }
@keyframes depthRise { 0% { transform:translateY(.35rem); text-shadow:0 0 22px var(--gold); } 100% { transform:none; } }
.meters { position:absolute; top:2rem; right:clamp(1rem,3vw,3rem); display:grid; gap:.9rem; width:9rem; }
.meter-copy { display:flex; justify-content:space-between; align-items:baseline; }
.meter-copy strong { color:var(--aqua); font-family:ui-monospace,monospace; font-size:.72rem; font-weight:500; }
.meter-boost .meter-copy strong { color:var(--gold); }
.meter-boost .meter-track span { background:var(--gold); box-shadow:0 0 10px var(--gold); }
/* The boost bar is the one thing that moves every frame, so it gets no width
   transition — a 180ms ease on a value changing 60 times a second reads as lag
   rather than smoothing, and boost is exactly the control that must feel direct. */
.meter-boost .meter-track span { transition:none; }
.meter-boost.spent .meter-copy strong { color:var(--rose); }
.meter-boost.spent .meter-track span { background:var(--rose); box-shadow:0 0 10px var(--rose); }
.meter-track { height:2px; margin-top:.65rem; overflow:hidden; background:rgba(255,255,255,.1); }
.meter-track span { display:block; width:0; height:100%; background:var(--aqua); box-shadow:0 0 10px var(--aqua); transition:width 180ms; }
.action-buttons { position:absolute; right:clamp(1rem,3vw,3rem); bottom:1rem; display:flex; gap:.6rem; }
.action-button { display:flex; align-items:center; gap:.8rem; padding:.7rem .75rem .7rem 1rem; border:1px solid var(--line); border-radius:999px; background:rgba(3,12,25,.68); color:var(--muted); pointer-events:auto; cursor:pointer; backdrop-filter:blur(14px); font-size:.72rem; touch-action:none; }
.pulse-button.ready { border-color:var(--aqua); color:var(--ink); box-shadow:0 0 1.5rem rgba(124,255,225,.16); animation:pulseReady 1.3s ease-in-out infinite alternate; }
.action-button:disabled { cursor:not-allowed; opacity:.6; }
.boost-button[aria-pressed="true"],.boost-button.engaged { border-color:var(--gold); color:var(--ink); box-shadow:0 0 1.5rem rgba(255,207,103,.18); }
kbd { padding:.26rem .42rem; border:1px solid var(--line); border-radius:.35rem; color:var(--aqua); font:inherit; font-size:.62rem; }
.overlay { position:absolute; top:50%; left:50%; width:min(90vw,46rem); padding:clamp(2rem,5vw,4rem); transform:translate(-50%,-50%); border:1px solid var(--line); border-radius:1.5rem; background:var(--panel); box-shadow:0 2rem 8rem rgba(0,0,0,.55); backdrop-filter:blur(28px); pointer-events:auto; animation:arrive 650ms cubic-bezier(.2,.8,.2,1) both; }
.overlay[hidden] { display:none; }
.overlay h2 { margin:0; font-family:var(--display); font-size:clamp(2.7rem,6vw,5.3rem); font-weight:400; letter-spacing:-.035em; line-height:.95; }
.compact { margin-top:2rem; }
.result-score { margin:2.2rem 0 1.7rem; }
.result-score>span { display:block; color:var(--muted); font-size:.65rem; letter-spacing:.17em; text-transform:uppercase; }
.result-score>strong { display:block; color:var(--aqua); font-family:ui-monospace,monospace; font-size:clamp(2.8rem,8vw,5.5rem); font-weight:400; letter-spacing:.08em; line-height:1.1; text-shadow:0 0 2rem var(--aqua-soft); }
.result-score p { margin:.5rem 0 0; color:#a9bfc5; font-family:var(--display); font-size:1.2rem; }
.result-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr)); gap:1rem; }
.result-stats div { padding:.9rem 0; border-top:1px solid var(--line); }
.result-stats span { display:block; color:var(--muted); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }
.result-stats strong { display:block; margin-top:.35rem; font-family:var(--display); font-size:1.5rem; font-weight:400; }
.announcement { position:absolute; left:50%; bottom:18%; margin:0; transform:translateX(-50%); color:var(--aqua); font-family:var(--display); font-size:clamp(1.2rem,3vw,2.2rem); text-align:center; text-shadow:0 0 16px var(--aqua); opacity:0; transition:opacity 180ms,transform 300ms; }
.announcement.show { opacity:1; transform:translate(-50%,-1rem); }
.footer { grid-template-columns:1fr auto; color:var(--muted); font-size:.64rem; letter-spacing:.08em; }
.legend { display:flex; gap:1.2rem; } .legend span { display:flex; align-items:center; gap:.45rem; }
.legend i { width:.42rem; height:.42rem; border-radius:50%; }
.mote-dot { background:var(--aqua); box-shadow:0 0 9px var(--aqua); } .ink-dot { border:1px solid var(--rose); box-shadow:inset 0 0 6px var(--rose); }
.footer p { margin:0; }
@keyframes pulseReady { to { box-shadow:0 0 2.5rem rgba(124,255,225,.34); } }
@keyframes arrive { from { opacity:0; transform:translate(-50%,-44%) scale(.95); filter:blur(8px); } to { opacity:1; transform:translate(-50%,-50%) scale(1); filter:none; } }
@media (max-width:760px) {
  .topbar { grid-template-columns:1fr auto; padding:.85rem 1rem; } .scoreboard { order:3; grid-column:1/-1; justify-content:center; gap:1.5rem; margin-top:.75rem; }
  .edition { display:none; } .panel { left:0; width:100%; padding:1rem; }
  h1 { font-size:clamp(4.6rem,23vw,7.2rem); line-height:.72; }
  .lede { margin:1.5rem 0; } .rules { grid-template-columns:1fr; gap:.7rem; margin-bottom:1.4rem; } .rules div { padding-top:.55rem; }
  .microcopy { max-width:19rem; line-height:1.5; }
  .hud-left { top:1rem; } .combo { top:1rem; } .meters { top:1rem; width:6rem; gap:.55rem; }
  .depth { margin-top:.6rem; } .depth strong { font-size:1.15rem; }
  .action-buttons { bottom:.4rem; gap:.4rem; } .action-button { padding:.6rem .85rem; } .action-button kbd { display:none; }
  .overlay { padding:2.2rem 1.4rem 1.5rem; } .result-stats { gap:.5rem; }
  .result-stats span { letter-spacing:.04em; } .footer { padding:.75rem 1rem; } .footer p { display:none; }
}
@media (max-height:720px) and (min-width:761px) { h1 { font-size:clamp(4rem,9vw,7rem); } .lede { margin:1.4rem 0; } .rules { margin-bottom:1.2rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }