:root{color-scheme:dark;--navy:#061b30;--ink:#05243b;--cyan:#5ee8ff;--yellow:#ffd55a;--white:#f7fdff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#087a9a 0,#073b63 38%,#041827 100%);color:var(--white);font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.shell{width:min(1120px,calc(100% - 28px));margin:auto;padding:24px 0 50px}header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}h1{font-size:clamp(2rem,5vw,4.4rem);line-height:.84;letter-spacing:-.065em;margin:5px 0 0;text-transform:uppercase}h1 span{color:var(--yellow)}.eyebrow,.kicker{font-size:.76rem;letter-spacing:.2em;font-weight:900;color:var(--cyan);margin:0}.ghost,.primary,.mobile-controls button{border:0;color:white;font:inherit;font-weight:800;cursor:pointer}.ghost{padding:11px 16px;border-radius:999px;background:#ffffff12;border:1px solid #ffffff35}.ghost:hover{background:#ffffff22}.hud{display:grid;grid-template-columns:repeat(3,1fr);background:#051a2acc;border:1px solid #70ebff40;border-bottom:0;border-radius:20px 20px 0 0;overflow:hidden}.hud div{padding:10px 18px;border-right:1px solid #70ebff25}.hud div:last-child{border:0}.hud small{display:block;color:#a8cfda;font-size:.65rem;font-weight:800;letter-spacing:.15em}.hud strong{font-size:1.05rem}.game-frame{position:relative;border:1px solid #70ebff55;border-radius:0 0 22px 22px;overflow:hidden;box-shadow:0 24px 70px #00101eaa}canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#087a9a}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;background:linear-gradient(90deg,#031b2ed9,#062a40b8);backdrop-filter:blur(3px)}.overlay.hidden{display:none}.overlay h2{font-size:clamp(1.7rem,4vw,3rem);line-height:1;margin:10px 0}.overlay p:not(.kicker){max-width:510px;margin:0 0 20px;color:#d7f5fb}.primary{background:var(--yellow);color:#2d2100;padding:13px 24px;border-radius:999px;box-shadow:0 7px 0 #bd8e16}.primary:hover{transform:translateY(-1px)}.primary:active{transform:translateY(5px);box-shadow:0 2px 0 #bd8e16}.tip{text-align:center;color:#bfe5ed;margin:12px 0 25px}.mobile-controls{display:none;text-align:center;margin-top:14px}.mobile-controls button{width:58px;height:48px;margin:3px;border-radius:13px;background:#ffffff18;border:1px solid #ffffff35;touch-action:none}.leaderboard{background:#061b30aa;border:1px solid #ffffff1c;border-radius:18px;padding:18px}.leaderboard h2{font-size:1rem;margin:0 0 10px;color:#d6f6ff}dialog{width:min(520px,calc(100% - 28px));background:#07253a;color:white;border:1px solid #5ee8ff77;border-radius:22px;padding:28px;box-shadow:0 30px 90px #000}dialog::backdrop{background:#00111bd9;backdrop-filter:blur(5px)}dialog h2{font-size:2rem;margin:8px 0}dialog li{margin-bottom:9px}.dialog-close{position:absolute;right:12px;top:8px;border:0;background:none;color:white;font-size:2rem;cursor:pointer} @media(max-width:720px){.shell{width:min(100% - 16px,1120px);padding-top:14px}h1{font-size:2.35rem}.ghost{font-size:.82rem}.hud div{padding:8px 10px}.hud strong{font-size:.9rem}.mobile-controls{display:block}.tip{font-size:.82rem}}