/* Layout: full-bleed canvas arena, DOM overlays for HUD, menu and touch pads. Single dark arcade look. */
:root{
  --bg:#060a15; --panel:rgba(8,13,28,.92); --line:#26365f; --ink:#e9eefb; --mute:#8794bb;
  --blue:#3aa4ff; --orange:#ff8a2e;
  --disp:"Saira Condensed","Arial Narrow",system-ui,sans-serif; --body:"Saira",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
canvas{position:fixed;inset:0;display:block}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* HUD */
#hud{position:fixed;top:calc(6px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;font-family:var(--disp);pointer-events:none}
.team{display:flex;align-items:center;gap:10px}
.sc{font-size:46px;font-weight:800;line-height:1;min-width:1.1em;text-align:center;font-variant-numeric:tabular-nums}
.blue{color:var(--blue)} .orange{color:var(--orange)}
.bar{width:84px;height:7px;background:rgba(255,255,255,.1);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.bar i{display:block;height:100%;width:34%;background:currentColor}
.orange .bar i{margin-left:auto}
#clock{font-size:30px;font-weight:800;padding:0 16px;background:#0d1530;border:1px solid var(--line);
  font-variant-numeric:tabular-nums;color:var(--ink);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
#msgw{position:fixed;left:0;right:0;top:34%;display:flex;flex-direction:column;align-items:center;pointer-events:none}
#msg{text-align:center;font-family:var(--disp);font-weight:800;font-style:italic;
  font-size:clamp(44px,10vw,120px);letter-spacing:.02em;text-shadow:0 0 28px currentColor;will-change:transform}
#msg.goal{font-size:clamp(56px,11vw,140px);letter-spacing:.05em;line-height:1;text-shadow:0 0 34px currentColor,0 0 80px currentColor}
#sub{text-align:center;font-family:var(--disp);font-weight:800;font-style:italic;font-size:clamp(20px,3.4vw,40px);
  letter-spacing:.32em;text-transform:uppercase;text-shadow:0 0 16px currentColor;opacity:0}
#sv{position:fixed;left:0;right:0;top:21%;text-align:center;font-family:var(--disp);font-weight:800;font-style:italic;
  font-size:clamp(28px,5.2vw,64px);letter-spacing:.08em;pointer-events:none;opacity:0;text-shadow:0 0 18px currentColor}
#exit{position:fixed;z-index:6;top:calc(10px + env(safe-area-inset-top,0px));left:calc(12px + env(safe-area-inset-left,0px));
  background:rgba(255,255,255,.06);border:1px solid var(--line);padding:4px 12px;font-family:var(--disp);
  font-weight:600;letter-spacing:.08em;font-size:13px;text-transform:uppercase}

/* Help "?" and settings gear: in the menu card, and as a pair in the top-right corner in a match. */
#helpG,#setG{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:9;
  width:28px;height:28px;padding:0;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line);
  font-family:var(--disp);font-weight:800;font-size:15px;line-height:1;color:var(--mute)}
#helpG{right:calc(48px + env(safe-area-inset-right,0px))}
#helpG:hover,#setG:hover{color:var(--ink)}
.row>.hbtn{flex:0 0 auto;min-width:52px;padding-inline:16px}
#help,#settings{z-index:8}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 4px}
.setrow .btn{min-width:72px;padding:6px 14px;font-size:14px}
#leave{z-index:10}
#leave .card{max-width:340px}
.hhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hhead .btn{font-size:14px;padding:6px 14px}

/* Menu */
.overlay{position:fixed;z-index:7;inset:0;display:flex;align-items:center;justify-content:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:16px;background:radial-gradient(ellipse at center,rgba(6,10,21,.35),rgba(6,10,21,.8));overflow:auto}
.card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);padding:22px 22px 18px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  display:flex;flex-direction:column;gap:14px;max-height:100%;overflow:auto}
h1{margin:0;font-family:var(--disp);font-weight:800;font-style:italic;font-size:52px;line-height:.9;letter-spacing:.01em}
h1 .b{color:var(--blue)} h1 .o{color:var(--orange)}
h1 small{font-size:22px;color:var(--mute);letter-spacing:.3em;font-style:normal;vertical-align:middle}
.sub{margin:-6px 0 0;color:var(--mute);font-size:14px}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1 1 0;min-width:0}
.btn{border:1px solid var(--line);background:#111b38;padding:11px 14px;font-family:var(--disp);font-weight:800;
  font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.btn:hover{background:#18254b}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#04101f}
.btn.pri:hover{background:#61b6ff}
.btn.ghost{background:transparent}
input{user-select:text;-webkit-user-select:text;background:#050913;border:1px solid var(--line);color:var(--ink);
  padding:10px 12px;font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:.35em;text-transform:uppercase;text-align:center}
.lbl{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
#code{font-family:var(--disp);font-weight:800;font-size:56px;letter-spacing:.3em;color:var(--orange);line-height:1;user-select:text;-webkit-user-select:text}
#status{margin:0;min-height:1.2em;font-size:14px;color:#ffd28a;user-select:text;-webkit-user-select:text;word-break:break-all}
.keys{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:13px}
.keys dt{color:var(--mute)} .keys dd{margin:0}
.foot{margin:0;font-size:12px;color:var(--mute);line-height:1.5}
#oT{font-family:var(--disp);font-weight:800;font-style:italic;font-size:54px;line-height:1}
#oS{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--mute);font-variant-numeric:tabular-nums}

#oN{min-height:1.2em;font-size:14px;color:#ffd28a}

/* Arena picker */
.arenas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ar{border:1px solid var(--line);background:#0d1530;padding:6px 4px 7px;font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.ar i{display:block;width:100%;height:26px}
.ar[aria-pressed=true]{border-color:var(--blue);background:#14214a;box-shadow:inset 0 0 0 1px var(--blue)}

/* Touch pads */
#touch .pad{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:12px}
#touch .l{left:calc(14px + env(safe-area-inset-left,0px))}
#touch .r{right:calc(14px + env(safe-area-inset-right,0px));align-items:flex-end}
.tb{width:72px;height:72px;border-radius:50%;background:rgba(6,10,21,.62);border:3px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.5);text-shadow:0 1px 3px rgba(0,0,0,.8);
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:.06em;touch-action:none}
.tb svg{width:26px;height:26px;fill:currentColor}
.tb.on{background:rgba(255,255,255,.34);transform:scale(.95)}
#stick{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:calc(18px + env(safe-area-inset-left,0px));
  width:140px;height:140px;border-radius:50%;background:rgba(6,10,21,.5);border:3px solid rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.5);pointer-events:none;opacity:.8;transition:opacity .12s}
#stick.on{opacity:1}
#sz{position:fixed;left:0;top:calc(64px + env(safe-area-inset-top,0px));bottom:0;width:55%;touch-action:none}
#knob{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;
  background:rgba(255,255,255,.4);border:3px solid rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(0,0,0,.55);pointer-events:none}
.tb.boost{border-color:var(--orange);color:var(--orange);width:66px;height:66px;font-size:14px;letter-spacing:.03em}
.tb.boost.on{background:rgba(255,138,46,.45);color:#fff}
.tb.jump{border-color:var(--blue);color:var(--blue);width:84px;height:84px;margin-bottom:22px}
.tb.jump.on{background:rgba(58,164,255,.45);color:#fff}
#rotate{display:none;position:fixed;inset:0;align-items:center;justify-content:center;background:var(--bg);
  font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:.06em;text-align:center;padding:24px}
@media (orientation:portrait) and (pointer:coarse){ body.ingame #rotate{display:flex} }
@media (max-height:420px){ h1{font-size:38px} .card{gap:10px;padding:16px} }