*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b1220; --card:#121a2b; --ink:#eef2f8; --muted:#9fb0c9; --line:#243147;
  --accent:#ffe24a;
}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-user-select:none;user-select:none}
canvas#game{position:fixed;inset:0;width:100vw;height:100vh;display:block;background:#87b7e8;cursor:crosshair}
.hidden{display:none !important}

/* ---------------- HUD ---------------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#scoreboard{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;background:rgba(11,18,32,.72);
  border:1px solid var(--line);backdrop-filter:blur(8px);
  padding:8px 14px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
#scoreboard .pill{width:14px;height:14px;border-radius:4px;background:#888}
#scoreboard .code{font-weight:800;letter-spacing:.06em;font-size:15px;color:var(--muted)}
#scoreboard .score{font-weight:900;font-size:26px;min-width:26px;text-align:center;
  font-variant-numeric:tabular-nums}
#scoreboard .clock{font-weight:800;font-size:16px;color:var(--accent);
  background:rgba(0,0,0,.35);padding:3px 10px;border-radius:8px;font-variant-numeric:tabular-nums}
#scoreboard .poss{width:14px;text-align:center;color:var(--accent);font-size:12px}
#banner{position:absolute;top:34%;left:50%;transform:translateX(-50%);
  font-weight:900;font-size:min(9vw,74px);letter-spacing:.02em;text-align:center;
  color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 40px rgba(255,226,74,.5);
  -webkit-text-stroke:2px rgba(0,0,0,.25)}
#controls-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  font-size:12.5px;color:var(--muted);background:rgba(11,18,32,.55);
  padding:6px 12px;border-radius:10px;border:1px solid var(--line);white-space:nowrap;max-width:96vw;overflow:hidden}
#controls-hint b{color:var(--ink)}

/* ---------------- Menu ---------------- */
#menu{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(37,79,153,.55), transparent 60%),
    radial-gradient(900px 500px at 50% 120%, rgba(19,155,75,.35), transparent 55%),
    linear-gradient(180deg,#0a1120,#0b1424)}
.menu-card{width:min(760px,94vw);background:linear-gradient(180deg,#141d30,#0f1727);
  border:1px solid var(--line);border-radius:22px;padding:26px 26px 20px;
  box-shadow:0 30px 90px rgba(0,0,0,.55)}
.brand{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.brand .logo{font-size:44px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.brand h1{font-size:38px;font-weight:900;letter-spacing:.04em;
  background:linear-gradient(90deg,#fff,#c9d6ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{color:var(--muted);font-size:13.5px;margin-top:2px}
.fld{display:block;margin-bottom:16px}
.fld span{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
input{width:100%;background:#0c1424;border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:11px 13px;font-size:15px;outline:none}
input:focus{border-color:#3b6bd6}
.pickrow{display:flex;gap:14px;align-items:flex-end;margin-bottom:18px}
.pick{flex:1}
.pick-title{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.vs{color:var(--muted);font-weight:800;padding-bottom:24px}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.team{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:#0c1424;border:1.5px solid var(--line);border-radius:12px;padding:9px 10px;cursor:pointer;
  color:var(--ink);transition:.12s}
.team:hover{border-color:#3b6bd6;transform:translateY(-1px)}
.team.active{border-color:var(--c);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 55%,transparent) inset}
.team .swatch{position:absolute;right:9px;top:9px;width:14px;height:14px;border-radius:4px;background:var(--c)}
.team .tc{font-weight:900;font-size:15px;letter-spacing:.05em}
.team .tn{font-size:11px;color:var(--muted)}
.play{width:100%;border:none;border-radius:14px;padding:15px;font-size:17px;font-weight:900;
  letter-spacing:.06em;color:#0a1018;cursor:pointer;
  background:linear-gradient(180deg,#ffe873,#ffcf33);box-shadow:0 10px 30px rgba(255,207,51,.28);transition:.12s}
.play:hover{transform:translateY(-1px);filter:brightness(1.04)}
.invite{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.invite-title{font-size:13px;color:var(--muted);margin-bottom:10px}
.invite-row{display:flex;gap:10px;margin-bottom:10px}
.invite-row input{flex:1}
.sidetoggle{display:flex;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.side{background:#0c1424;border:none;color:var(--muted);padding:0 12px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.side.active{background:#22314c;color:var(--ink)}
.ghost{flex:1;background:#12203a;border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:11px;font-weight:700;font-size:14px;cursor:pointer;transition:.12s}
.ghost:hover{border-color:#3b6bd6;background:#16274a}
.hint{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted)}
.legend b{color:var(--ink)}
.foot{color:var(--muted);font-size:12px;opacity:.8}
.foot #status{color:var(--accent)}
.trailer-link{color:var(--accent);text-decoration:none;font-weight:700}
.trailer-link:hover{text-decoration:underline}

/* ================= Mobile touch controls ================= */
#menu{overflow-y:auto}
#touch{position:fixed;inset:0;z-index:6;pointer-events:none;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
#touchsurface{position:absolute;inset:0;pointer-events:auto;touch-action:none;z-index:1}
#stickbase{position:fixed;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
  z-index:2;pointer-events:none;opacity:0;transition:opacity .12s;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.10),rgba(255,255,255,.03) 70%,transparent 72%);
  border:2px solid rgba(255,255,255,.22)}
#stickbase.on{opacity:1}
#stickring{position:absolute;inset:26px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.18)}
#stickknob{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.95),rgba(210,225,255,.75));
  box-shadow:0 6px 18px rgba(0,0,0,.4);will-change:transform}

#tbtns{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));
  z-index:3;pointer-events:auto;display:flex;align-items:flex-end;gap:14px}
.tb{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  width:78px;height:78px;border-radius:50%;border:2px solid rgba(255,255,255,.28);
  background:rgba(18,26,43,.55);backdrop-filter:blur(6px);color:#fff;font-weight:900;font-size:14px;
  letter-spacing:.04em;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  touch-action:none;transition:transform .06s,background .12s}
.tb .lbl{position:relative;z-index:2}
.tb:active,.tb.on{transform:scale(.94);background:rgba(40,58,92,.7)}
.tb.mini{width:56px;height:56px;font-size:12px}
.tb-col{display:flex;flex-direction:column;gap:12px}
.tb.shoot{width:104px;height:104px;font-size:16px;border-color:rgba(255,207,51,.75);
  background:rgba(120,80,10,.35)}
.tb.shoot.on,.tb.shoot:active{background:rgba(150,100,12,.5)}
.tb.shoot .fill{position:absolute;inset:0;border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(255,226,74,.95),rgba(255,180,40,.85));
  transform:scale(0);transform-origin:center;transition:none}
.tb.shoot.charging .fill{transform:scale(1);transition:transform .85s linear}

/* portrait nudge */
#rotate{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#0a1120,#0b1424);color:var(--ink);text-align:center}
.rot-inner{font-size:64px;line-height:1.1;animation:spin 2.4s ease-in-out infinite}
.rot-inner div{font-size:20px;font-weight:800;margin-top:14px}
.rot-inner small{font-size:13px;color:var(--muted);font-weight:400}
@keyframes spin{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}

/* on touch devices, drop the desktop-only hints */
body.touch #controls-hint{display:none}
body.touch .legend{display:none}