:root{--bg-a: #071a3a;--bg-b: #020914;--panel: rgba(4, 12, 28, .62);--gold: #ffd84d;--cyan: #6ee7ff;--white: #ffffff;--ink: #06111f}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at top,var(--bg-a),var(--bg-b) 70%);color:var(--white);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;touch-action:none}canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;display:block;touch-action:none;cursor:crosshair}.hud{position:fixed;z-index:5;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:none}.brand,.scoreboard{background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 10px 28px #00000047;padding:10px 14px}.brand-title{margin:0;font-size:clamp(14px,2.6vw,22px);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:850;line-height:1.1}.brand-sub{margin-top:3px;font-size:clamp(10px,1.7vw,13px);opacity:.78}.scoreboard{min-width:150px;text-align:right}.fs-toggle{pointer-events:auto;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--white);cursor:pointer;transition:transform .2s,background .2s;box-shadow:0 10px 28px #00000047}.fs-toggle:hover{transform:scale(1.1);background:#ffffff26}.fs-toggle:active{transform:scale(.95)}.score-line{font-size:clamp(16px,3vw,28px);font-weight:850;line-height:1.05}.time-line{margin-top:4px;font-size:clamp(12px,2vw,15px);opacity:.85}.overlay{position:fixed;z-index:10;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 30% 20%,rgba(110,231,255,.18),transparent 30%),radial-gradient(circle at 70% 80%,rgba(255,216,77,.18),transparent 32%),#010610d6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.card{width:min(720px,100%);border-radius:28px;padding:clamp(20px,4vw,42px);background:linear-gradient(180deg,#071a3aeb,#020914f0);border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 80px #00000073;text-align:center}.card h1{margin:0 0 10px;font-size:clamp(34px,8vw,72px);line-height:.95;letter-spacing:-.04em;color:var(--gold)}.card p{margin:10px auto;max-width:56ch;color:#ffffffdb;line-height:1.5;font-size:clamp(15px,2.6vw,18px)}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 10px}.mode{border:1px solid rgba(255,255,255,.18);background:#ffffff12;color:var(--white);border-radius:16px;padding:13px 10px;cursor:pointer;font-weight:800}.mode small{display:block;margin-top:5px;opacity:.75;font-weight:600}.mode.active{outline:2px solid var(--gold);background:#ffd84d29}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}button.primary,button.secondary{border:0;border-radius:999px;padding:14px 22px;font-size:16px;font-weight:850;cursor:pointer}button.primary{color:var(--ink);background:linear-gradient(135deg,var(--gold),#fff0a8)}button.secondary{color:var(--white);background:#ffffff1f;border:1px solid rgba(255,255,255,.18)}.hint{margin-top:18px;font-size:13px;opacity:.72}.hidden{display:none}@media (max-width: 620px){.mode-grid{grid-template-columns:1fr}.hud{align-items:stretch}.brand-sub{display:none}}
