@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&family=Manrope:wght@500;700;800&display=swap";:root{font-family:Manrope,system-ui,sans-serif;color:#102a4c;background:#0b1d35;font-synthesis:none;--ink: #102a4c;--cream: #fff7df;--coral: #ff7058;--yellow: #ffd45c}*{box-sizing:border-box}html,body,#app{width:100%;min-height:100%;margin:0}body{overflow:hidden;background:radial-gradient(circle at 50% 20%,#294f7c,#09192e 72%)}button{font:inherit}#app{display:grid;place-items:center;min-height:100dvh;padding:14px}.game-shell{position:relative;width:min(100%,480px);aspect-ratio:2 / 3;max-height:calc(100dvh - 28px);overflow:hidden;border-radius:26px;background:#9fd9e9;box-shadow:0 32px 80px #020a16aa,0 0 0 1px #ffffff20;isolation:isolate}#game-canvas,#game-canvas canvas{width:100%!important;height:100%!important;display:block}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-user-select:none;user-select:none}.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:24px 26px}.brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800;letter-spacing:.16em;text-shadow:0 1px 10px #17345c55}.brand-mark{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;color:var(--ink);background:var(--yellow);font-size:12px;letter-spacing:0;box-shadow:0 3px #d19e35}.icon-button{pointer-events:auto;width:38px;height:38px;border:1px solid #fff7;border-radius:50%;color:#fff;background:#17345c2e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;font-size:20px;transition:transform .15s,background .15s}.icon-button:hover{transform:translateY(-2px);background:#17345c55}.score{position:absolute;top:74px;left:50%;translate:-50% 0;color:#fff;font-size:58px;line-height:1;font-weight:800;text-shadow:0 5px 0 #17345c30;opacity:0;transition:opacity .2s}.score.visible{opacity:1}.panel{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px;pointer-events:none}.panel[hidden]{display:none}.eyebrow{margin:0 0 14px;font:500 11px/1 DM Mono,monospace;letter-spacing:.24em;color:#27547c}h1{margin:0;color:var(--ink);font-size:clamp(44px,11vw,62px);line-height:.92;letter-spacing:-.065em}h1 em{color:var(--coral);font-style:normal}.lede{margin:22px 0 28px;color:#315879;font-size:15px;line-height:1.6}.primary-button{pointer-events:auto;display:flex;align-items:center;gap:28px;min-width:250px;justify-content:space-between;padding:8px 10px 8px 20px;border:0;border-radius:12px;color:var(--cream);background:var(--ink);box-shadow:0 7px #071a30,0 12px 24px #17345c30;cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.12em;transition:translate .12s,box-shadow .12s}.primary-button:hover{translate:0 -2px;box-shadow:0 9px #071a30,0 14px 28px #17345c38}.primary-button:active{translate:0 5px;box-shadow:0 2px #071a30}.keycap{padding:10px 12px;border-radius:7px;background:#ffffff18;color:#b9d1e2;font:500 9px/1 DM Mono,monospace;letter-spacing:.08em}.tap-hint{margin:19px 0 0;color:#4c718d;font:500 10px/1 DM Mono,monospace}.result-panel{justify-content:center;background:linear-gradient(#d9f0efdd,#fef1cedd);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.result-panel h2{margin:0 0 28px;color:var(--ink);font-size:38px;letter-spacing:-.05em}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;width:250px;margin-bottom:30px;border-radius:13px;overflow:hidden;background:#17345c22}.result-grid div{display:grid;gap:7px;padding:16px;background:#fff9e7b8}.result-grid span{color:#56748c;font:500 9px/1 DM Mono,monospace;letter-spacing:.12em}.result-grid strong{color:var(--ink);font-size:29px}.pause-chip{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;padding:10px 15px;border-radius:7px;color:#fff;background:#102a4cdd;font:500 11px/1 DM Mono,monospace;letter-spacing:.18em}.footer-hint{position:absolute;left:50%;bottom:19px;translate:-50% 0;display:flex;align-items:center;gap:9px;white-space:nowrap;color:#fff;font:500 8px/1 DM Mono,monospace;letter-spacing:.13em;opacity:.72}.footer-hint i{width:3px;height:3px;border-radius:50%;background:var(--yellow)}@media(max-width:520px){#app{padding:0}.game-shell{width:100%;height:100dvh;max-height:none;aspect-ratio:auto;border-radius:0}.topbar{padding:max(19px,env(safe-area-inset-top)) 20px 0}.footer-hint{bottom:max(15px,env(safe-area-inset-bottom))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}