:root{--ink: #14203a;--paper: rgba(255, 255, 255, .82);--stroke: rgba(255, 255, 255, .55);--shadow: 0 26px 70px rgba(9, 18, 38, .42), 0 4px 12px rgba(9, 18, 38, .24);--accent: #ff9a2b;--accent-deep: #f2650f;--radius: 26px;--ui: clamp(13px, min(1.7vmin, 2.1vh) + 8px, 18px);--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#0b1220;overscroll-behavior:none}body{font-family:var(--font);color:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{position:fixed;inset:0;height:100%;height:100dvh;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;cursor:pointer}.game-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.hud{--safe-top: max(14px, env(safe-area-inset-top));--safe-right: max(14px, env(safe-area-inset-right));--safe-bottom: max(14px, env(safe-area-inset-bottom));position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:var(--ui);z-index:2}.hud>*{grid-area:1 / 1}.hud__vignette{position:absolute;inset:0;background:radial-gradient(122% 84% at 50% 42%,#060e1e00 54%,#060e1e4d)}.hud__flash{position:absolute;inset:0;background:#fff;opacity:0}.hud__flash.is-on{animation:flash .42s ease-out forwards}@keyframes flash{0%{opacity:calc(var(--flash, 1) * .62)}to{opacity:0}}.hud__score{align-self:start;justify-self:center;margin-top:calc(var(--safe-top) + clamp(2px,2.2vh,26px));opacity:0;transform:translateY(-14px) scale(.9);transition:opacity .26s ease,transform .32s cubic-bezier(.22,1.2,.36,1)}.hud__score-value{display:block;font-size:clamp(46px,12.5vmin,104px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;color:#fff;text-shadow:0 3px 0 rgba(20,32,58,.32),0 0 22px rgba(255,236,190,.5),0 10px 26px rgba(9,18,38,.45)}.is-playing .hud__score,.is-dying .hud__score,.is-paused .hud__score{opacity:1;transform:none}.hud__score.is-pop .hud__score-value{animation:pop .34s cubic-bezier(.2,1.5,.4,1)}@keyframes pop{0%{transform:scale(1)}36%{transform:scale(1.24);filter:brightness(1.25)}to{transform:scale(1)}}.card{--enter: 0ms;position:relative;display:none;flex-direction:column;align-items:center;gap:.7em;width:min(90vw,23em);padding:1.6em 1.6em 1.5em;text-align:center;border-radius:var(--radius);border:1px solid var(--stroke);background:linear-gradient(180deg,#ffffff42,#ffffff1a),#12203c57;box-shadow:var(--shadow),inset 0 1px #ffffff80;backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);color:#fff;text-shadow:0 2px 10px rgba(8,16,34,.5)}.is-ready .card--ready,.is-over .card--over,.is-paused .card--paused{display:flex;animation:rise .42s cubic-bezier(.2,.9,.28,1) both}.card--ready{align-self:end;margin-bottom:calc(var(--safe-bottom) + clamp(0px,4vh,44px))}@keyframes rise{0%{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}}.card__title{margin:0;font-size:2.5em;font-weight:800;line-height:.95;letter-spacing:-.035em;display:flex;flex-direction:column;text-shadow:0 4px 16px rgba(8,16,34,.5)}.card__title em{font-style:normal;background:linear-gradient(100deg,#ffd76a,var(--accent) 55%,#ff6f5e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 10px rgba(255,145,40,.4))}.card__eyebrow{margin:0;font-size:.85em;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.9}.card__lede{margin:0;font-size:1em;font-weight:500;line-height:1.45;opacity:.95}.card__meta{margin:0;font-size:.85em;font-weight:600;opacity:.8}.card__meta b{font-weight:800;font-variant-numeric:tabular-nums}kbd{display:inline-block;padding:.12em .5em;border-radius:7px;border:1px solid rgba(255,255,255,.5);border-bottom-width:2px;background:#fff3;font:inherit;font-size:.88em;font-weight:700;text-shadow:none}.cue{position:relative;display:grid;place-items:center;width:5.4em;height:5.4em;margin:.1em 0}.cue__ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.75);animation:ping 2.2s cubic-bezier(.2,.7,.3,1) infinite}.cue__ring--late{animation-delay:1.1s}@keyframes ping{0%{transform:scale(.55);opacity:0}22%{opacity:.9}to{transform:scale(1.15);opacity:0}}.cue__glyph{width:2.5em;height:2.5em;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 8px rgba(8,16,34,.45));animation:hover 2.2s ease-in-out infinite}@keyframes hover{0%,to{transform:translateY(3px)}50%{transform:translateY(-4px)}}.medal{position:relative;display:grid;place-items:center;gap:.5em;margin-top:.1em}.medal__face{position:relative;width:4.6em;height:4.6em;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85),transparent 46%),conic-gradient(from 210deg,var(--m2),var(--m1) 25%,var(--m2) 50%,var(--m1) 75%,var(--m2));border:3px solid var(--m3);box-shadow:inset 0 -6px 14px #0000003d,0 10px 24px #0912266b;--m1: #d8dee8;--m2: #9aa6b8;--m3: #7e8b9e}.medal__face:after{content:"";position:absolute;inset:.62em;border-radius:50%;border:2px dashed rgba(255,255,255,.45)}.medal[data-tier=bronze] .medal__face{--m1: #f0b183;--m2: #c2703b;--m3: #a15a2c}.medal[data-tier=silver] .medal__face{--m1: #f2f5fa;--m2: #a9b6c8;--m3: #8592a6}.medal[data-tier=gold] .medal__face{--m1: #ffe89a;--m2: #e6a71f;--m3: #bd8410}.medal[data-tier=platinum] .medal__face{--m1: #eaf6ff;--m2: #8fd0e8;--m3: #5aa9c9;box-shadow:inset 0 -6px 14px #0003,0 10px 30px #78dcff73}.medal[data-tier=none] .medal__face{opacity:.42;filter:saturate(.3)}.medal__label{font-size:.72em;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.85}.tally{display:flex;align-items:center;justify-content:center;gap:1.1em;width:100%}.tally__cell{display:grid;gap:.15em;min-width:4.4em}.tally__cell span{font-size:.72em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.78}.tally__cell b{font-size:1.9em;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.tally__rule{width:1px;height:2.4em;background:linear-gradient(#fff0,#ffffff8c,#fff0)}.ribbon{display:none;margin:-.35em 0 0;padding:.25em .9em;border-radius:999px;background:linear-gradient(100deg,#ffd76a,var(--accent));color:#47240a;font-size:.76em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-shadow:none;box-shadow:0 6px 16px #ff9a2b73}.ribbon.is-shown{display:block;animation:badge .52s cubic-bezier(.2,1.5,.4,1) both}@keyframes badge{0%{opacity:0;transform:scale(.6) rotate(-6deg)}to{opacity:1;transform:none}}.btn{pointer-events:auto;margin-top:.2em;padding:.72em 1.9em;border:0;border-radius:999px;background:linear-gradient(180deg,#ffb454,var(--accent-deep));color:#fff;font:inherit;font-size:1.02em;font-weight:800;letter-spacing:.02em;cursor:pointer;text-shadow:0 1px 2px rgba(120,50,0,.4);box-shadow:0 10px 24px #d6600c6b,inset 0 1px #ffffff80,inset 0 -3px #8c3c0059;transition:transform .14s cubic-bezier(.2,1.2,.4,1),box-shadow .14s ease,filter .14s ease}.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}.btn:active{transform:translateY(2px) scale(.98);box-shadow:0 4px 12px #d6600c66,inset 0 -1px #8c3c0059}.btn:focus-visible,.hud__sound:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:3px}.hud__sound{pointer-events:auto;align-self:start;justify-self:end;margin:var(--safe-top) var(--safe-right) 0 0;width:2.9em;height:2.9em;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:#101c3652;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:transform .14s ease,background .2s ease}.hud__sound:hover{transform:scale(1.06);background:#101c3680}.hud__sound svg{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.hud__sound-body{fill:currentColor;stroke-linejoin:round}.hud__sound-slash{opacity:0;transition:opacity .16s ease}.hud__sound.is-muted .hud__sound-waves{opacity:0}.hud__sound.is-muted .hud__sound-slash{opacity:1}@media(max-height:560px){.card{padding:1.2em 1.4em;gap:.6em}.cue{width:3.6em;height:3.6em}.card__title{font-size:2em}.medal__face{width:3.4em;height:3.4em}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}