:root{color-scheme:dark;--ink:#eaf7ff;--muted:#8da9b8;--cyan:#53e3ff;--orange:#ffb44a;--panel:rgba(9,29,43,.78);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 20% 0%,rgba(35,118,145,.28),transparent 34rem),radial-gradient(circle at 90% 80%,rgba(23,76,104,.22),transparent 30rem),#050d14}button{font:inherit}.shell{width:min(1080px,100%);margin:0 auto;padding:28px clamp(14px,3vw,34px) 36px}.topbar{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px}.eyebrow{margin:0 0 2px;color:var(--cyan);font-size:.72rem;font-weight:800;letter-spacing:.24em}h1{margin:0;font-size:clamp(2.3rem,7vw,4.8rem);line-height:.9;letter-spacing:-.06em}.stats{display:flex;gap:clamp(10px,3vw,28px)}.stats div{min-width:58px;text-align:right}.stats span{display:block;color:var(--muted);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}.stats strong{font-variant-numeric:tabular-nums;font-size:1.25rem}.game-card{position:relative;overflow:hidden;border:1px solid rgba(111,212,236,.28);border-radius:22px;background:#07131d;box-shadow:0 28px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.05)}canvas{display:block;width:100%;aspect-ratio:16/10;outline:none;touch-action:none}canvas:focus-visible{box-shadow:inset 0 0 0 3px var(--cyan)}.corner-help{position:absolute;right:14px;bottom:11px;padding:6px 9px;border-radius:999px;color:#cfe8f3;background:rgba(1,10,16,.6);font-size:.76rem;pointer-events:none}.corner-help span{color:var(--orange)}.message{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%) scale(.92);padding:14px 22px;border:1px solid rgba(83,227,255,.5);border-radius:999px;background:rgba(3,18,28,.88);box-shadow:0 12px 45px rgba(0,0,0,.5);font-weight:800;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.message.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px}.dpad{display:grid;grid-template:repeat(2,48px)/repeat(3,48px);gap:6px}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .down{grid-area:2/2}.dpad .right{grid-area:2/3}.dpad button,.actions button{border:1px solid rgba(135,214,232,.25);color:var(--ink);background:var(--panel);box-shadow:inset 0 1px rgba(255,255,255,.05);cursor:pointer;user-select:none;-webkit-user-select:none}.dpad button{border-radius:13px;font-size:1rem;touch-action:none}.dpad button.active,.dpad button:active{border-color:var(--cyan);color:#021018;background:var(--cyan)}.actions{display:flex;flex-wrap:wrap;justify-content:end;gap:9px}.actions button{padding:11px 15px;border-radius:999px}.actions button:hover,.actions button:focus-visible{border-color:var(--cyan)}.instructions{margin-top:16px;padding:18px 20px;border:1px solid rgba(135,214,232,.18);border-radius:16px;color:#c5dce7;background:rgba(6,21,31,.64)}.instructions h2{margin:0 0 8px;color:var(--ink);font-size:1rem}.instructions p{margin:5px 0;line-height:1.55}@media(max-width:650px){.shell{padding-top:20px}.topbar{align-items:center}.stats{gap:10px}.stats div{min-width:48px}.stats strong{font-size:1rem}.controls{align-items:end}.actions{max-width:220px}.actions button{padding:9px 12px;font-size:.82rem}canvas{aspect-ratio:4/3}}@media(prefers-reduced-motion:reduce){.message{transition:none}}