/* Full-screen 3D canvas; HUD pinned to safe-area corners; menus are panels over the live island or stage scene */
:root{
  --bg:#0e1217; --panel:#151b23; --panel-2:#1c2430; --line:#2b3542; --ink:#edf1f6; --muted:#8f9cad;
  --blue:#2f7bff; --blue-soft:rgba(47,123,255,.18); --orange:#ff8a1f; --orange-soft:rgba(255,138,31,.18);
  --good:#3ecf8e; --danger:#ff4d5e; --gold:#f2c230; --white:#ffffff;
  --display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --body:'Barlow Semi Condensed','Arial Narrow',system-ui,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;-webkit-user-select:none;user-select:none;touch-action:none}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;background:var(--bg)}
.num{font-variant-numeric:tabular-nums}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none}
#hud.ov .top,#hud.ov .bl,#hud.ov .br,#hud.ov #feed{display:none}
#perf{position:absolute;left:calc(10px + env(safe-area-inset-left,0px));top:calc(8px + env(safe-area-inset-top,0px));font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink);background:rgba(14,18,23,.6);padding:2px 7px;border-radius:4px}
#mini{position:absolute;left:calc(10px + env(safe-area-inset-left,0px));top:calc(32px + env(safe-area-inset-top,0px));border-radius:6px;background:rgba(14,18,23,.7);border:1px solid var(--line)}
.top{position:absolute;left:0;right:0;top:calc(10px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;align-items:center;gap:6px}
.scorebar{display:flex;align-items:stretch;background:rgba(14,18,23,.78);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.sc{min-width:54px;padding:4px 10px;font-family:var(--display);font-weight:900;font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center}
.sc.b{background:var(--blue);color:var(--white)} .sc.o{background:var(--orange);color:#1a1006}
.mid{padding:5px 14px;text-align:center;min-width:170px}
.mid .rnd{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mid .wp{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.04em;text-transform:uppercase;line-height:1.05}
.mid .tm{font-size:15px;font-weight:700}
.mid .tm.ot{color:var(--orange)} .mid .tm.el{color:var(--danger);animation:pulse .5s infinite}
.flagstat{display:flex;gap:8px;font-size:13px;font-weight:600;flex-wrap:wrap;justify-content:center}
.fs{padding:2px 9px;border-radius:4px;background:rgba(14,18,23,.72);border:1px solid var(--line)}
.fs.b{border-color:var(--blue)} .fs.o{border-color:var(--orange)} .fs.n{border-color:var(--white)}
#flagAlarm{background:var(--danger);color:var(--white);font-weight:800;padding:6px 16px;border-radius:5px;font-size:15px;letter-spacing:.05em;text-transform:uppercase;text-align:center;max-width:calc(100vw - 32px);animation:pulse 1s ease-in-out infinite}
#flagAlarm.down{background:var(--orange);color:#1a1006}
@keyframes pulse{50%{opacity:.62}}
#edge{position:absolute;inset:0;box-shadow:inset 0 0 0 4px var(--danger),inset 0 0 70px rgba(255,77,94,.4);animation:pulse 1s ease-in-out infinite}
#feed{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));top:calc(12px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:4px;align-items:flex-end;max-width:40vw}
.fe{background:rgba(14,18,23,.72);padding:3px 9px;border-radius:4px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fe .t0{color:#7fb0ff} .fe .t1{color:var(--orange)} .fe .w{color:var(--muted);font-weight:500} .fe.chat{border-left:3px solid var(--blue)} .fe b{color:var(--gold)}
.bl,.br{background:rgba(14,18,23,.62);padding:8px 12px;border-radius:6px}
.bl{position:absolute;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:4px}
.hpnum{font-family:var(--display);font-weight:900;font-size:40px;line-height:.9}
.hpbar{width:180px;max-width:38vw;height:8px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.hpfill{height:100%;background:var(--good);width:100%;transition:width .12s}
.hpfill.arm{background:#9fc3ff}
.armor{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9fc3ff}
.armor .hpbar{width:110px}
.small{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.regen{color:var(--good)} .streak{color:var(--gold)} .lvl{color:var(--muted)}
.br{position:absolute;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));text-align:right}
.ammo{font-family:var(--display);font-weight:900;font-size:40px;line-height:.9}
.wname{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.reload{color:var(--orange);font-weight:700;font-size:13px;letter-spacing:.08em}
.keyhint{font-size:11px;color:var(--muted);letter-spacing:.05em;margin-top:2px}
#cross{position:absolute;left:50%;top:50%;width:0;height:0}
#cross i{position:absolute;background:var(--white);box-shadow:0 0 2px #000}
#cross .dot{width:2px;height:2px;left:-1px;top:-1px}
#cross.reach i{background:var(--danger);box-shadow:0 0 4px var(--danger)}
#cross.ads i:not(.dot){opacity:0;transition:opacity .12s}
#reachTxt{position:absolute;left:50%;top:calc(50% + 18px);transform:translateX(-50%);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--danger);text-shadow:0 1px 2px #000}
#hit{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%) rotate(45deg);opacity:0}
#hit::before,#hit::after{content:"";position:absolute;background:var(--white)}
#hit::before{left:14px;top:0;width:2px;height:30px;clip-path:polygon(0 0,100% 0,100% 30%,0 30%,0 70%,100% 70%,100% 100%,0 100%)}
#hit::after{top:14px;left:0;height:2px;width:30px;clip-path:polygon(0 0,30% 0,30% 100%,0 100%,0 0,70% 0,100% 0,100% 100%,70% 100%)}
#hit.head::before,#hit.head::after{background:var(--danger)}
#alert{position:absolute;left:50%;top:calc(150px + env(safe-area-inset-top,0px));transform:translateX(-50%);padding:8px 18px;border-radius:6px;text-align:center;min-width:min(420px,calc(100vw - 32px));max-width:calc(100vw - 32px);animation:pop .35s ease-out}
#alert.bad{background:var(--danger);color:var(--white)} #alert.good{background:var(--blue);color:var(--white)} #alert.info{background:rgba(14,18,23,.88);color:var(--ink);border:1px solid var(--line)}
#alert .ab{font-family:var(--display);font-weight:900;font-size:clamp(22px,4vw,34px);text-transform:uppercase;letter-spacing:.03em;line-height:1}
#alert .as{font-size:13px;font-weight:600;margin-top:3px;letter-spacing:.04em}
@keyframes pop{0%{transform:translateX(-50%) scale(.9);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
#banner{position:absolute;left:0;right:0;top:26%;text-align:center;opacity:0;transition:opacity .25s}
#banner .big{font-family:var(--display);font-weight:900;font-size:clamp(34px,7vw,72px);letter-spacing:.03em;text-transform:uppercase;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.45)}
#banner .sm{margin-top:6px;font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 2px #000}
#callout{position:absolute;left:0;right:0;top:36%;text-align:center;pointer-events:none}
#callout .c1{font-family:var(--display);font-weight:900;font-size:clamp(36px,6.5vw,64px);text-transform:uppercase;color:var(--gold);letter-spacing:.04em;line-height:1;text-shadow:0 3px 0 #5a3d00,0 0 18px rgba(242,194,48,.45)}
#callout .c2{font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 2px #000}
#callout.go{animation:callout 1.8s ease-out forwards}
@keyframes callout{0%{transform:scale(1.6);opacity:0}12%{transform:scale(1);opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
#xpf{position:absolute;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(110px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.xpi{font-size:13px;font-weight:700;color:var(--gold);text-shadow:0 1px 2px #000;animation:xpi 2.2s ease-out forwards}
@keyframes xpi{0%{opacity:0;transform:translateX(12px)}10%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#nums{position:absolute;inset:0;overflow:hidden}
.dn{position:absolute;transform:translate(-50%,-50%);font-family:var(--display);font-weight:900;font-size:22px;color:var(--white);text-shadow:0 2px 0 #000,0 0 4px #000;white-space:nowrap}
.dn.head{color:#ff4d5e;font-size:28px} .dn.armor{color:#9fc3ff} .dn.imm{color:var(--muted);font-size:16px}
#carry,#prot{position:absolute;left:50%;top:calc(50% + 46px);transform:translateX(-50%);font-weight:700;padding:4px 12px;border-radius:4px;font-size:14px;letter-spacing:.04em;white-space:nowrap}
#carry{background:var(--orange);color:#1a1006} #prot{background:rgba(14,18,23,.85);border:1px solid var(--good);color:var(--good);top:calc(50% + 78px)}
#afk{position:absolute;left:50%;top:58%;transform:translateX(-50%);background:var(--danger);color:var(--white);padding:10px 18px;border-radius:6px;text-align:center;font-weight:700;font-size:16px}
#afk b{font-family:var(--display);font-size:34px;display:block;line-height:1}
#dead{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,77,94,0) 30%,rgba(255,77,94,.3) 100%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:18%}
#dead .box{text-align:center;background:rgba(14,18,23,.84);padding:12px 22px;border-radius:8px;max-width:calc(100vw - 32px)}
#dead .k{font-size:15px;font-weight:600} #dead .taunt{font-size:14px;color:var(--gold);margin-top:4px;font-weight:600} #dead .r{font-family:var(--display);font-weight:900;font-size:34px;margin-top:4px}
#dmg{position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(255,40,60,.65);opacity:0;transition:opacity .25s}
#scope{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0 30vmin,rgba(0,0,0,.92) 30.5vmin)}
#scope::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(0,0,0,.8)}
#scope::after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(0,0,0,.8)}
#markers{position:absolute;inset:0;overflow:hidden}
.marker{position:absolute;transform:translate(-50%,-100%);text-align:center;font-size:12px;font-weight:700;white-space:nowrap;text-shadow:0 1px 2px #000}
.marker .ic{width:14px;height:14px;margin:0 auto 2px;border:2px solid currentColor;border-radius:3px;transform:rotate(45deg);background:rgba(14,18,23,.6)}
.marker.b{color:#7fb0ff} .marker.o{color:var(--orange)} .marker.n{color:var(--white)} .marker.e{color:var(--danger)} .marker.p{color:var(--gold)} .marker.mate{font-size:11px;color:#9cc3ff;opacity:.85}
.marker.big{font-family:var(--display);font-size:20px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
#board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100vw - 32px));background:rgba(14,18,23,.94);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
#board table{width:100%;border-collapse:collapse;font-size:14px}
#board th{text-align:right;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:4px 6px}
#board th:first-child,#board td:first-child{text-align:left}
#board td{text-align:right;padding:4px 6px;border-top:1px solid var(--line)}
#board tr.me td{background:rgba(255,255,255,.06);font-weight:700}
#board .tb{color:#7fb0ff} #board .to{color:var(--orange)}
#qc{position:absolute;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:calc(100vw - 32px);pointer-events:auto}
#qc button{font-family:var(--body);font-weight:700;font-size:13px;padding:8px 10px;border-radius:6px;border:1px solid var(--line);background:rgba(14,18,23,.88);color:var(--ink)}
#lobbyTag{position:absolute;left:calc(10px + env(safe-area-inset-left,0px));bottom:calc(150px + env(safe-area-inset-bottom,0px));font-size:11px;color:var(--muted);letter-spacing:.05em}

/* Round end stage */
#stageUi{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px))}
#stTitle{font-family:var(--display);font-weight:900;font-size:clamp(30px,5.6vw,68px);text-transform:uppercase;line-height:.9;text-align:center;text-shadow:0 3px 0 rgba(0,0,0,.4)}
#stSub{font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center;margin-top:6px}
.awards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:960px}
.aw{background:rgba(14,18,23,.86);border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-width:130px;text-align:center}
.aw .t{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700}
.aw .n{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.1}
.aw .v{font-size:12px;color:var(--muted)}
.aw .n.t0{color:#7fb0ff} .aw .n.t1{color:var(--orange)}
.stname{position:absolute;transform:translate(-50%,0);font-weight:700;font-size:13px;text-shadow:0 1px 2px #000;white-space:nowrap}

/* Touch */
#touch{position:fixed;inset:0;pointer-events:none}
#stick{position:absolute;left:calc(24px + env(safe-area-inset-left,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px));width:120px;height:120px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.05)}
#knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.35)}
.tbtn{position:absolute;pointer-events:auto;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(14,18,23,.45);color:var(--ink);font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;text-transform:uppercase}
.tbtn[aria-pressed="true"]{background:rgba(62,207,142,.4)}
#tFire{right:calc(28px + env(safe-area-inset-right,0px));bottom:calc(110px + env(safe-area-inset-bottom,0px));width:84px;height:84px;background:rgba(255,77,94,.35)}
#tJump{right:calc(124px + env(safe-area-inset-right,0px));bottom:calc(40px + env(safe-area-inset-bottom,0px));width:58px;height:58px}
#tReload{right:calc(28px + env(safe-area-inset-right,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px));width:58px;height:58px}
#tScope{right:calc(124px + env(safe-area-inset-right,0px));bottom:calc(112px + env(safe-area-inset-bottom,0px));width:54px;height:54px}
#tCrouch{right:calc(192px + env(safe-area-inset-right,0px));bottom:calc(40px + env(safe-area-inset-bottom,0px));width:54px;height:54px}
#tSprint{left:calc(40px + env(safe-area-inset-left,0px));bottom:calc(160px + env(safe-area-inset-bottom,0px));width:54px;height:54px}
#tPing{right:calc(192px + env(safe-area-inset-right,0px));bottom:calc(112px + env(safe-area-inset-bottom,0px));width:50px;height:50px}
#tPause,#tBoard,#tChat{top:calc(150px + env(safe-area-inset-top,0px));width:46px;height:46px;border-radius:8px;font-size:11px}
#tPause{right:calc(14px + env(safe-area-inset-right,0px))} #tBoard{right:calc(66px + env(safe-area-inset-right,0px))} #tChat{right:calc(118px + env(safe-area-inset-right,0px))}

/* Screens */
#isle{position:fixed;inset:0;pointer-events:none}
.isl{position:absolute;transform:translate(-50%,-100%);text-align:center;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:3px}
.isl .n{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.05em;text-transform:uppercase;color:var(--white);text-shadow:0 2px 4px rgba(0,0,0,.65)}
.isl .s{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:3px;background:rgba(14,18,23,.78);color:var(--muted)}
.isl.live .s{background:var(--good);color:#06130c}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(9,12,16,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));overflow-y:auto;box-sizing:border-box}
.screen.side{background:linear-gradient(90deg,rgba(9,12,16,.92) 0,rgba(9,12,16,.78) 560px,rgba(9,12,16,0) 820px);backdrop-filter:none;-webkit-backdrop-filter:none;justify-content:flex-start}
.screen.side .panel{width:min(600px,100%)}
@media (max-width:960px){.screen.side{background:rgba(9,12,16,.74);justify-content:center}}
.panel{width:min(720px,100%);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:14px;max-height:calc(100% - 8px);overflow-y:auto;box-sizing:border-box}
.panel>*{flex-shrink:0}
.phead{display:flex;gap:14px;align-items:center}
.seg.small button{font-size:12px;padding:7px 6px;flex:1 1 auto}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.sgrid h3{grid-column:1/-1;margin:8px 0 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sgrid label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600}
.sgrid label span{color:var(--muted);font-weight:500}
.sgrid label.chk{flex-direction:row;align-items:center;gap:8px}
.sgrid input[type=range]{accent-color:var(--blue);width:100%}
@media (max-width:620px){.sgrid{grid-template-columns:1fr}}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.credits h4{margin:10px 0 4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.credits p{margin:0 0 4px;font-size:14px;line-height:1.45}
.chal{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.chal .d{font-size:12.5px;color:var(--muted)} .chal .p{font-size:12px;font-weight:700} .chal.done .p{color:var(--good)}
#cross.enemy i{background:var(--danger)} #cross.friend i{background:var(--good)}
.logo{font-family:var(--display);font-weight:900;font-size:clamp(56px,12vw,104px);line-height:.82;letter-spacing:.01em}
.logo .f1{color:var(--blue)} .logo .f2{color:var(--orange)}
.tag{font-size:17px;font-weight:600;color:var(--muted);letter-spacing:.04em}
.lead{font-size:15px;line-height:1.45;max-width:62ch;margin:0}
.row{display:flex;flex-wrap:wrap;gap:10px}
button.btn{font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:11px 18px;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);cursor:pointer}
button.btn:hover{border-color:var(--muted)}
button:focus-visible,select:focus-visible{outline:2px solid var(--white);outline-offset:2px}
button.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--white)}
/* V0.1.1 (17): Surrender buttons always readable (red tint + light red text; filled red always has white text) */
button.btn.warn{background:rgba(255,77,94,.14);border-color:var(--danger);color:#ff7d8a}
button.btn.danger,button.btn.danger:hover{background:var(--danger);border-color:var(--danger);color:var(--white)}
.prof{display:flex;align-items:center;gap:12px;background:var(--panel-2);border-radius:8px;padding:10px 12px}
.lvbadge{font-family:var(--display);font-weight:900;font-size:28px;line-height:1;min-width:58px;text-align:center;padding:6px 8px;border-radius:6px;background:var(--gold);color:#2a1d00}
.xpbar{flex:1;min-width:0}
.xpbar .bar{height:8px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden;margin-top:5px}
.xpbar .bar i{display:block;height:100%;background:var(--gold)}
.xpbar .t{font-size:13px;color:var(--muted)}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.rule{background:var(--panel-2);border-radius:6px;padding:9px 11px;font-size:13.5px;line-height:1.4}
.rule h4{margin:0 0 3px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px 14px;font-size:13px;color:var(--muted)}
.keys b{color:var(--ink);display:inline-block;min-width:58px;font-weight:700}
.note{font-size:13px;color:var(--muted);line-height:1.4;margin:0}
.card{border:1px dashed var(--line);border-radius:8px;padding:10px 12px;font-size:13.5px;line-height:1.4}
.card h4{margin:0 0 4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
h2.h{margin:0;font-family:var(--display);font-weight:900;font-size:42px;line-height:.95;text-transform:uppercase;text-wrap:balance}
.winb{color:var(--blue)} .wino{color:var(--orange)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}
.st{background:var(--panel-2);border-radius:6px;padding:9px 11px}
.st .v{font-family:var(--display);font-weight:900;font-size:30px;line-height:1}
.st .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.recorded{padding:10px 12px;border-radius:6px;font-size:14px;line-height:1.4;border:1px solid var(--good)}
.recorded.bad{border-color:var(--danger)}
.seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex-wrap:wrap}
.seg button{flex:1;font-family:var(--body);font-weight:700;font-size:13px;padding:9px 8px;background:transparent;color:var(--muted);border:0;cursor:pointer;letter-spacing:.05em;text-transform:uppercase}
.seg button[aria-pressed="true"]{background:var(--panel-2);color:var(--ink)}
select{font-family:var(--body);font-size:15px;font-weight:600;padding:9px 10px;border-radius:6px;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);min-width:0;max-width:100%}
.lbwrap{overflow-x:auto}
table.lb{width:100%;border-collapse:collapse;font-size:15px}
table.lb td,table.lb th{padding:6px 8px;text-align:left;border-top:1px solid var(--line)}
table.lb th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-top:0}
table.lb td.v,table.lb th.v{text-align:right}
table.lb tr.gap td{border-top:0;color:var(--muted);text-align:center;padding:2px}
table.lb tr.me td{background:var(--blue-soft);font-weight:700}
.ex{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-left:6px}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.item{font-family:var(--body);text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:8px 10px;color:var(--ink);cursor:pointer;font-size:14px;font-weight:700}
.item small{display:block;font-weight:500;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.item[aria-pressed="true"]{border-color:var(--good);box-shadow:inset 0 0 0 1px var(--good)}
.item.locked{opacity:.55;cursor:not-allowed}
.ach{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:14px}
.ach .d{font-size:12px;color:var(--muted)} .ach .p{font-size:12px;font-weight:700;text-align:right}
.ach .bar{grid-column:1/3;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden} .ach .bar i{display:block;height:100%;background:var(--good)}
.ach.done .p{color:var(--good)}
.link{font-family:ui-monospace,Menlo,monospace;font-size:16px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:10px 12px;word-break:break-all;user-select:text;-webkit-user-select:text}
@media (prefers-reduced-motion: reduce){#alert,#flagAlarm,#edge,#callout.go,.xpi{animation:none}#banner,#dmg,.hpfill{transition:none}}
@media (max-width:620px){.panel{padding:16px}.sc{font-size:24px;min-width:42px}.mid{min-width:120px;padding:4px 8px}.mid .wp{font-size:16px}#feed{max-width:52vw;top:calc(118px + env(safe-area-inset-top,0px))}.fe{font-size:11px}.hpnum,.ammo{font-size:30px}#mini{transform:scale(.75);transform-origin:0 0}}

.nothing{border:3px solid var(--danger);background:rgba(255,77,94,.14);border-radius:10px;padding:16px 18px;text-align:center}
.nothing b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(34px,6.5vw,60px);line-height:.95;letter-spacing:.02em;text-transform:uppercase;color:var(--danger)}
.nothing span{display:block;margin-top:8px;font-size:17px;font-weight:700;line-height:1.35}

.item.gun{display:flex;flex-direction:column;gap:2px}
.item.gun img{width:100%;height:auto;aspect-ratio:240/110;object-fit:contain;margin-bottom:4px;background:radial-gradient(ellipse at center,rgba(255,255,255,.07),transparent 70%);border-radius:4px}
.lkh{margin:6px 0 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.mastery{background:var(--panel-2);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.mastery .bar,.nx .bar{height:7px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}.mastery .bar i,.nx .bar i{display:block;height:100%;background:var(--gold)}
.unh{margin:4px 0 0;font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase;letter-spacing:.03em}
.unl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.ucard{background:linear-gradient(180deg,rgba(242,194,48,.16),var(--panel-2));border:1px solid var(--gold);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:3px;animation:upop .55s cubic-bezier(.2,1.4,.4,1) both}
.ucard img{width:100%;aspect-ratio:240/110;object-fit:contain}
.ucard .uic{font-size:42px;line-height:1;color:var(--gold);text-align:center;padding:14px 0}
.ucard .uk{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700}
.ucard .un{font-family:var(--display);font-weight:900;font-size:24px;line-height:1;text-transform:uppercase}
.ucard .us{font-size:13px;color:var(--muted)}
.btn.small{font-size:12px;padding:7px 10px;margin-top:6px}
@keyframes upop{0%{transform:scale(.6) translateY(16px);opacity:0}100%{transform:none;opacity:1}}
.nextl{display:flex;flex-direction:column;gap:8px}
.nx{display:flex;align-items:center;gap:12px;background:var(--panel-2);border-radius:8px;padding:8px 10px}
.nx img{width:96px;flex:none}.nx .nxi{width:96px;flex:none}.nx .nxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
@media (prefers-reduced-motion: reduce){.ucard{animation:none}}

.showcase{position:relative;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.12),rgba(255,255,255,0) 65%),linear-gradient(180deg,#1f2833,#141a22);border:1px solid var(--line)}
.showcase img{display:block;width:100%;height:auto;aspect-ratio:720/300}
.showcase .nosh{aspect-ratio:720/300;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.showcase .shn{position:absolute;left:12px;bottom:10px;font-family:var(--display);font-weight:900;font-size:28px;line-height:1;text-transform:uppercase;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.showcase .shn span{display:block;font-family:var(--body);font-size:11px;letter-spacing:.14em;color:var(--gold);font-weight:700;margin-bottom:3px}
/* page heading is the logo; consent bar; menu footer links */
h1.logo{margin:0}
.legal a,.legal .linkbtn{color:var(--muted);text-decoration:underline;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.legal a:hover,.legal .linkbtn:hover{color:var(--ink)}
#consent{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1000;width:min(640px,calc(100% - 32px));box-sizing:border-box;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-family:var(--body);font-size:15px;line-height:1.4;box-shadow:0 10px 30px rgba(0,0,0,.45);display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
#consent p{margin:0;flex:1 1 300px} #consent a{color:#7fb0ff}
#consent .cbtns{display:flex;gap:8px;flex:0 0 auto} #consent .btn{padding:9px 14px;font-size:13px}
/* Flex now */
button.btn.flexb,.ucard .flexb,.flexb{background:linear-gradient(90deg,#f2c230,#ff8a1f);border-color:#f2c230;color:#1a1006}
#results .flexb{margin:4px 0 8px}
.flexin{border-color:var(--gold,#f2c230)} .flexin h4{color:var(--gold,#f2c230)}
#flexDlg{position:fixed;inset:0;z-index:1001;background:rgba(5,8,12,.72);display:flex;align-items:center;justify-content:center;padding:16px}
#flexDlg .fbox{position:relative;width:min(640px,100%);max-height:100%;overflow:auto;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:12px;font-family:var(--body);color:var(--ink)}
#flexDlg h3{margin:0;font-family:var(--display);font-size:32px} #flexDlg img{width:100%;border-radius:6px;border:1px solid var(--line)}
#flexDlg .frow{display:flex;flex-wrap:wrap;gap:8px} #flexDlg a.btn{font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);text-decoration:none}
#flexDlg .fx{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--muted);font-size:28px;cursor:pointer}
/* touch: floating stick (moves under the thumb), bigger fire button that also aims */
#game{touch-action:none} html,body{overscroll-behavior:none}
#stick{transition:opacity .15s} #stick:not(.on){opacity:.4}
#tFire{width:96px;height:96px;font-size:14px} #tFire.down{background:rgba(255,77,94,.65);border-color:#fff}
#tJump{width:66px;height:66px} #tReload{width:62px;height:62px}
/* touch v2: left fire button, sprint lock, button size (--ts) */
#touch{--ts:1}
#touch .tbtn{transform:scale(var(--ts))}
#tFireL{left:calc(26px + env(safe-area-inset-left,0px));bottom:calc(205px + env(safe-area-inset-bottom,0px));width:70px;height:70px;background:rgba(255,77,94,.3)}
#tFireL.down{background:rgba(255,77,94,.65);border-color:#fff}
#tSprint{bottom:calc(290px + env(safe-area-inset-bottom,0px))}
#stick::before{content:'';position:absolute;left:50%;top:-44px;width:26px;height:26px;margin-left:-13px;border-radius:50%;border:2px dashed rgba(255,255,255,.3);opacity:0;transition:opacity .15s}
#stick.on::before{opacity:1} #stick.arm::before,#stick.lock::before{border-style:solid;border-color:#3ecf8e;background:rgba(62,207,142,.45);opacity:1}
#stick.lock{opacity:.85}
/* the sprint toggle is replaced by full-push sprint and sprint lock */
#tSprint{display:none}
/* left fire sits beside the minimap, not on it */
#tFireL{left:calc(132px + env(safe-area-inset-left,0px));bottom:calc(150px + env(safe-area-inset-bottom,0px))}
@media (max-height:420px){#tPause,#tBoard,#tChat{top:calc(8px + env(safe-area-inset-top,0px))} #tPause{right:calc(14px + env(safe-area-inset-right,0px))} #tBoard{right:calc(66px + env(safe-area-inset-right,0px))} #tChat{right:calc(118px + env(safe-area-inset-right,0px))} #tFire{bottom:calc(96px + env(safe-area-inset-bottom,0px))} #tScope,#tPing{bottom:calc(104px + env(safe-area-inset-bottom,0px))}}
/* results and other menus on short phone screens: compact so everything fits */
@media (max-height:520px){
  .screen{padding:8px max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px))}
  .panel{padding:12px 14px;gap:8px}
  #results .h{font-size:28px}
  .stats{grid-template-columns:repeat(4,1fr);gap:6px} .st{padding:6px 8px} .st .v{font-size:22px} .st .l{font-size:10px}
  .unl{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px} .ucard{padding:8px} .ucard .un{font-size:19px}
  .nx img,.nx .nxi{width:72px} .nx .nxt{font-size:13px}
  .awards{gap:6px} .aw{min-width:110px;padding:6px 9px} .aw .n{font-size:18px}
  #results .row{position:sticky;bottom:-12px;background:var(--panel);padding:8px 0 4px;margin-bottom:-4px}
}
/* phones: event messages (steam vents, gates, flags...) become a small strip under the scoreboard instead of covering the middle of the view */
body.touch #alert{top:calc(86px + env(safe-area-inset-top,0px));min-width:0;max-width:46vw;padding:3px 12px;opacity:.9;pointer-events:none}
body.touch #alert .ab{font-size:14px;letter-spacing:.04em} body.touch #alert .as{display:none}
body.touch #banner{top:15%;pointer-events:none} body.touch #banner .big{font-size:clamp(22px,5vw,34px)} body.touch #banner .sm{font-size:11px;letter-spacing:.1em}

/* ===================== Site: top navigation, front page, content pages ===================== */
#sitenav{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:18px;height:48px;padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));background:linear-gradient(180deg,rgba(9,12,16,.9),rgba(9,12,16,.62));border-bottom:1px solid rgba(43,53,66,.7);box-sizing:content-box}
#sitenav a{color:var(--muted);text-decoration:none}
#sitenav .sn-home{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:.01em;line-height:1;flex:none}
#sitenav .sn-home .f1{color:var(--blue)} #sitenav .sn-home .f2{color:var(--orange)}
#sitenav .sn-links{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
#sitenav .sn-links::-webkit-scrollbar{display:none}
#sitenav .sn-links a{font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:5px;white-space:nowrap}
#sitenav .sn-links a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
#sitenav .sn-links a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--orange)}
#sitenav a:focus-visible{outline:2px solid var(--white);outline-offset:-2px}
body.nav .screen{padding-top:calc(60px + env(safe-area-inset-top,0px))}
/* the front page */
.home .hbtns{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.home .partyb{width:100%;margin-top:-2px}
.home .btn small{display:block;font-family:var(--body);font-size:12px;letter-spacing:.08em;font-weight:600;opacity:.8;margin-top:3px}
.home button.btn.play{font-family:var(--display);font-weight:900;font-size:40px;letter-spacing:.04em;line-height:1;padding:14px 18px 12px;box-shadow:0 6px 24px rgba(47,123,255,.35)}
.home button.btn.play:hover{filter:brightness(1.08)}
.home button.btn.priv{font-family:var(--display);font-weight:800;font-size:24px;line-height:1;letter-spacing:.04em}
.arena{border:1px solid var(--line);border-left:4px solid var(--gold);background:linear-gradient(90deg,rgba(242,194,48,.1),rgba(242,194,48,0) 70%),var(--panel-2);border-radius:8px;padding:10px 12px}
.arena .ak{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700}
.arena .an{font-family:var(--display);font-weight:900;font-size:26px;line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
.arena .as{font-size:13px;color:var(--muted);line-height:1.35}
.arena.open{border-left-color:var(--good)}
.ver{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));font-size:11px;letter-spacing:.06em;color:var(--muted);opacity:.75;pointer-events:none}
/* content pages: a wider panel over the island */
.screen.page{background:linear-gradient(90deg,rgba(9,12,16,.94) 0,rgba(9,12,16,.86) 900px,rgba(9,12,16,.35) 1200px)}
.screen.side.page .panel{width:min(940px,100%)}
@media (max-width:960px){.screen.page{background:rgba(9,12,16,.86)}}
.page .lead{max-width:84ch}
.page .rules{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
h3.sh{margin:6px 0 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.mapl{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:12px}
.mapc{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:6px}
.mapc img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:5px;background:#222}
.mapt{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.mapt h3{margin:0;font-family:var(--display);font-weight:900;font-size:26px;text-transform:uppercase;line-height:1}
.mapt .mb{font-size:13px;font-weight:700;color:var(--muted)} .mapt .tb{color:#7fb0ff} .mapt .to{color:var(--orange)}
.mapc p{margin:0;font-size:14px;line-height:1.4}
.diag svg{width:100%;max-width:640px;height:auto;display:block}
.diag rect,.diag circle,.diag path{fill:var(--panel-2);stroke:var(--line);stroke-width:2}
.diag .on rect{fill:rgba(47,123,255,.22);stroke:var(--blue)}
.diag text{fill:var(--ink);font-family:var(--body);font-weight:700;font-size:13px;text-anchor:middle}
.diag text.sub{fill:var(--muted);font-weight:600;font-size:12px}
.diag text.s{font-size:10px}
.diag .mouse{fill:var(--panel-2)} .diag .mbtn.on{fill:rgba(255,77,94,.3);stroke:var(--danger)} .diag .mbtn.on2{fill:rgba(47,123,255,.22);stroke:var(--blue)} .diag .whl{fill:rgba(242,194,48,.35);stroke:var(--gold)}
.diag .phone{fill:#0b0e12;stroke:var(--line)} .diag .scr{fill:#26303b;stroke:none} .diag .look{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.25);stroke-dasharray:6 5}
.diag .mini{fill:rgba(14,18,23,.7)} .diag .tb{fill:rgba(14,18,23,.6);stroke:rgba(255,255,255,.35)}
.diag .stk{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.3)} .diag .knob{fill:rgba(255,255,255,.35);stroke:none} .diag .arr{fill:none;stroke:var(--good);stroke-width:2.5}
.diag .fire{fill:rgba(255,77,94,.4);stroke:rgba(255,255,255,.5)} .diag .sm{fill:rgba(14,18,23,.5);stroke:rgba(255,255,255,.4)}
.clog ul{list-style:none;margin:0;padding:0}
.clog li{display:grid;grid-template-columns:96px 1fr auto;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.35;align-items:baseline}
.clog .cd{color:var(--muted);font-size:12.5px} .clog code{font-size:11px;color:var(--muted)}
/* results: the scroll area is only a box on phones */
.rscroll{display:contents}
/* "Rotate your phone" during a match in portrait (under the pause menu, over the HUD) */
#rotate{display:none;position:fixed;inset:0;background:rgba(9,12,16,.95);align-items:center;justify-content:center;text-align:center;padding:24px}
#rotate>div{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink)}
#rotate svg{color:var(--orange);animation:rot 2.4s ease-in-out infinite}
#rotate b{font-family:var(--display);font-weight:900;font-size:30px;text-transform:uppercase;letter-spacing:.03em}
#rotate span{color:var(--muted);font-size:15px}
@keyframes rot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait){body.touch:has(#hud:not([hidden])) #rotate{display:flex}}

/* ===================== Phone scale: landscape phones (up to ~500 px high) and narrow portrait screens ===================== */
@media (max-height:500px),(max-width:600px){
  body{font-size:13px}
  #sitenav{height:38px;gap:10px} #sitenav .sn-home{font-size:19px} #sitenav .sn-links a{font-size:11px;padding:6px 7px}
  body.nav .screen{padding-top:calc(44px + env(safe-area-inset-top,0px))}
  .screen{padding:8px max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px))}
  .panel{padding:12px 14px;gap:8px;border-radius:8px}
  h2.h{font-size:26px}
  .logo{font-size:44px}
  .tag{font-size:13px}
  .lead{font-size:13px;line-height:1.4}
  .note{font-size:12px}
  .card{font-size:12.5px;padding:8px 10px}
  button.btn{font-size:12.5px;padding:9px 12px;min-height:38px}
  .row{gap:6px}
  .prof{padding:7px 10px;gap:10px} .lvbadge{font-size:20px;min-width:42px;padding:4px 6px} .xpbar .t{font-size:12px}
  .nothing{padding:10px 12px;border-width:2px} .nothing b{font-size:24px} .nothing span{font-size:13px;margin-top:4px}
  .seg button{font-size:11.5px;padding:7px 6px}
  select{font-size:13px;padding:7px 8px}
  .sgrid{gap:8px 14px} .sgrid label{font-size:13px} .sgrid h3{font-size:11px;margin-top:4px}
  table.lb{font-size:13px} table.lb td,table.lb th{padding:5px 6px}
  .rule{font-size:12.5px;padding:7px 9px}
  .credits p{font-size:13px}
  .items{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px} .item{font-size:13px;padding:6px 8px}
  .showcase .shn{font-size:22px}
  /* front page */
  .home button.btn.play{font-size:30px;padding:10px 14px 8px} .home button.btn.priv{font-size:19px} .home .btn small{font-size:10.5px}
  .arena{padding:7px 10px} .arena .an{font-size:20px} .arena .as{font-size:12px}
  .ver{font-size:10px}
  /* pages */
  .mapl{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px} .mapt h3{font-size:21px} .mapc p{font-size:13px}
  .clog li{grid-template-columns:78px 1fr;font-size:13px} .clog code{display:none}
  /* results: score and XP stay on top, cards scroll, buttons always visible */
  #results .panel{max-height:100%;overflow:hidden}
  #results .h{font-size:24px}
  #results .rscroll{display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0;flex:1 1 auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  #results .rscroll>*{flex-shrink:0}
  #results .row{position:static;background:none;padding:0;margin:0;flex-wrap:nowrap}
  #results .row .btn{flex:1 1 0;min-width:0;padding:8px 6px;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stats{grid-template-columns:repeat(4,1fr);gap:6px} .st{padding:5px 7px} .st .v{font-size:20px} .st .l{font-size:9.5px}
  .recorded{font-size:12.5px;padding:7px 10px}
  .unh{font-size:18px}
  .unl{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px} .ucard{padding:7px} .ucard img{max-height:52px} .ucard .un{font-size:17px} .ucard .us{font-size:12px} .ucard .uic{font-size:30px;padding:8px 0}
  .awards{gap:6px} .aw{min-width:100px;padding:5px 8px} .aw .n{font-size:16px} .aw .t{font-size:10px}
  /* pause and confirm: big, easy tap targets */
  #pause .row .btn,#confirm .row .btn{flex:1 1 0;min-height:44px}
  #pause .panel,#confirm .panel{width:min(520px,100%)}
  /* scoreboard */
  #board{width:min(520px,calc(100vw - 24px));padding:8px 10px;max-height:calc(100% - 20px);overflow-y:auto;box-sizing:border-box}
  #board table{font-size:12px} #board th{font-size:10px;padding:3px 5px} #board td{padding:3px 5px}
  /* HUD text */
  .sc{font-size:22px;min-width:38px;padding:3px 8px} .mid{min-width:110px;padding:3px 8px} .mid .rnd{font-size:9.5px} .mid .wp{font-size:15px} .mid .tm{font-size:13px}
  .flagstat{font-size:11px;gap:5px} .fs{padding:1px 7px}
  #flagAlarm{font-size:11.5px;padding:4px 10px}
  .hpnum,.ammo{font-size:28px} .hpbar{width:130px} .small,.wname,.reload{font-size:10.5px} .bl,.br{padding:6px 9px}
  .fe{font-size:11px;padding:2px 7px}
  #dead .box{padding:8px 14px} #dead .k{font-size:13px} #dead .taunt{font-size:12px} #dead .r{font-size:24px}
  #afk{font-size:12px;padding:6px 12px} #afk b{font-size:22px}
  .marker{font-size:11px} .marker.big{font-size:14px} .marker .ic{width:11px;height:11px}
  .dn{font-size:17px} .dn.head{font-size:21px}
  .xpi{font-size:11.5px}
  #stTitle{font-size:30px} #stSub{font-size:12px}
  .stname{font-size:11px}
}
/* phones: nothing big in the middle of the view during a match. Event text is a small, short-lived strip
   near the top; carry, spawn protection and AFK notes move up under the scoreboard */
body.touch #banner{top:calc(84px + env(safe-area-inset-top,0px))} body.touch #banner .big{font-size:clamp(20px,4.2vw,28px)} body.touch #banner .sm{font-size:10.5px}
body.touch #callout{top:calc(112px + env(safe-area-inset-top,0px))} body.touch #callout .c1{font-size:22px;text-shadow:0 2px 0 #5a3d00} body.touch #callout .c2{font-size:10.5px}
body.touch #carry,body.touch #prot{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));font-size:11px;padding:2px 9px;white-space:normal;max-width:34vw;text-align:center}
body.touch #carry:not([hidden])~#prot{bottom:calc(48px + env(safe-area-inset-bottom,0px))}
body.touch #afk{top:calc(110px + env(safe-area-inset-top,0px))}
/* phones: while the scoreboard is open the touch buttons fade so it stays readable (they still work) */
body.touch:has(#board:not([hidden])) #touch .tbtn:not(#tBoard),body.touch:has(#board:not([hidden])) #stick{opacity:.18}
/* landscape phones: the kill feed starts under the Chat / Score / Pause buttons and keeps three lines */
@media (max-height:420px){body.touch #feed{top:calc(60px + env(safe-area-inset-top,0px));max-width:34vw} body.touch .fe:nth-child(n+4){display:none}}
body.touch #dead{padding-bottom:12%}
body.touch #reachTxt{font-size:10px}
/* ---------- Arena (weekend mode) ---------- */
.arena .abtn{display:block;width:100%;margin-top:8px;background:var(--gold);border-color:var(--gold);color:#1a1300;font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:.04em;line-height:1;padding:10px 14px 8px}
.arena .abtn small{display:block;font-family:var(--body);font-size:11px;letter-spacing:.08em;font-weight:600;opacity:.8;margin-top:3px}
#arenaMe{display:none;position:absolute;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));align-items:center;gap:10px;background:rgba(14,18,23,.78);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:6px;padding:6px 12px 6px 10px}
#arenaMe .af{font-family:var(--display);font-weight:900;font-size:40px;line-height:1;color:var(--gold);min-width:1ch;text-align:center}
#arenaMe .al{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700} #arenaMe .ar{font-size:14px;font-weight:700}
body.arenamode #arenaMe{display:flex}
body.arenamode #hud .bl,body.arenamode #hud .br,body.arenamode #tReload,body.arenamode #tScope,body.arenamode #tPing,body.arenamode #tChat{display:none}
body.arenamode #sB{color:var(--gold)}
body.touch #arenaMe{left:calc(150px + env(safe-area-inset-left,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:3px 9px 3px 7px;gap:6px} body.touch #arenaMe .af{font-size:26px} body.touch #arenaMe .al{font-size:9px} body.touch #arenaMe .ar{font-size:11px}
body.arenamode #dead{background:none;padding-bottom:5%} body.arenamode #dead .r{font-size:20px} body.arenamode #dead .box{padding:8px 16px}
.arena button.abtn{background:var(--gold);border-color:var(--gold);color:#1a1300}
#rTitle.arenaw{color:var(--gold)}
/* ---------- Phone HUD layout (touch): nothing sits under the resting move stick or the right-hand buttons ----------
   HP becomes a compact strip right of the stick, ammo + weapon name one line left of Reload (below Jump/Crouch when
   those are on), carry / spawn-protection notes sit above the HP strip, and the touch buttons go away while the HUD
   is hidden (round-end stage). */
body.touch .bl{left:calc(156px + env(safe-area-inset-left,0px));bottom:calc(4px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:auto auto;column-gap:8px;row-gap:3px;align-items:center;padding:4px 9px}
body.touch .bl .hpnum{grid-row:1 / span 4;font-size:26px}
body.touch .bl>:not(.hpnum){grid-column:2}
body.touch .bl .hpbar{width:96px} body.touch .bl .armor{gap:5px;font-size:9.5px} body.touch .bl .armor .hpbar{width:46px}
body.touch .bl .small{font-size:9.5px} body.touch .bl .lvl{display:none}
body.touch .br{right:calc(104px + env(safe-area-inset-right,0px));bottom:calc(4px + env(safe-area-inset-bottom,0px));display:flex;align-items:baseline;gap:7px;padding:4px 9px}
body.touch .br .ammo{font-size:22px} body.touch .br .wname,body.touch .br .reload{font-size:10px;white-space:nowrap} body.touch .br .keyhint{display:none}
body.touch #carry,body.touch #prot{left:calc(156px + env(safe-area-inset-left,0px));bottom:calc(52px + env(safe-area-inset-bottom,0px));transform:none;text-align:left;max-width:min(34vw,240px)}
body.touch #carry:not([hidden])~#prot{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
#hud[hidden]~#touch{display:none}
/* game modes: the mode card in the overview (name, how to play, win condition) */
#modeCard{position:absolute;left:50%;top:62%;transform:translateX(-50%);width:min(560px,92vw);text-align:center;background:rgba(10,14,20,.72);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 14px;pointer-events:none}
#modeCard .mn{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
#modeCard .mh{margin-top:4px;font-size:14px;font-weight:600}
#modeCard .mw{margin-top:3px;font-size:13px;opacity:.85}
body.touch #modeCard{top:calc(140px + env(safe-area-inset-top,0px));width:min(420px,54vw);padding:5px 10px}
body.touch #modeCard .mn{font-size:15px} body.touch #modeCard .mh{font-size:11px} body.touch #modeCard .mw{font-size:10.5px}
/* pause / surrender confirm on short (phone landscape) screens: the whole panel scrolls into view (a centred flex box
   cut its top off) and the big "nothing saved" box is smaller, so the buttons stay on screen */
#pause,#confirm{align-items:flex-start} #pause>.panel,#confirm>.panel{margin:auto}
@media (max-height:480px){
  #pause .nothing,#confirm .nothing{padding:8px 12px} #pause .nothing b,#confirm .nothing b{font-size:24px} #pause .nothing span,#confirm .nothing span{font-size:12px}
  #pause .h,#confirm .h{font-size:24px;margin-bottom:6px} #pause .lead,#confirm .lead{font-size:12px;margin:6px 0}
}
/* AFK: a bot plays the slot until the player presses Return (game plan) */
#afkOut{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(9,12,16,.55);pointer-events:auto;z-index:5}
#afkOut .box{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;background:rgba(14,18,23,.92);border:2px solid var(--danger);padding:16px 22px;border-radius:10px;max-width:min(460px,calc(100vw - 32px))}
#afkOut b{font-family:var(--display);font-weight:900;font-size:clamp(24px,5vw,40px);text-transform:uppercase;color:var(--danger)} #afkOut span{font-size:15px} #afkOut small{font-size:12px;color:var(--muted)} #afkOut .btn{min-height:48px;font-size:16px;padding:12px 22px}

/* ===================== V0.1.1 (18): music mute button (site header, pause menu, phone HUD) ===================== */
.musbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:6px;border:1px solid var(--line);background:rgba(28,36,48,.85);color:var(--ink);cursor:pointer;flex:none}
.musbtn:hover{border-color:var(--muted)}
.musbtn.off{color:var(--muted);background:rgba(28,36,48,.6)}
.musbtn:focus-visible{outline:2px solid var(--white);outline-offset:2px}
#sitenav .musbtn{margin-left:auto}
#pause .panel{position:relative} #pMusic{position:absolute;right:14px;top:14px}
#touch #tMusic{top:calc(150px + env(safe-area-inset-top,0px));right:calc(118px + env(safe-area-inset-right,0px));width:46px;height:46px;border-radius:8px;border:2px solid rgba(255,255,255,.35);background:rgba(14,18,23,.45)}
#touch #tMusic.off{opacity:.75}
@media (max-height:420px){#touch #tMusic{top:calc(8px + env(safe-area-inset-top,0px));width:38px;height:38px}}
@media (max-height:520px){#sitenav .musbtn{width:28px;height:28px} #sitenav .musbtn svg{width:15px;height:15px}}

/* ===================== V0.1.1 (19): round-end winners stage on phones: small text, characters visible ===================== */
@media (max-height:500px),(max-width:600px){
  #stageUi{padding:calc(8px + env(safe-area-inset-top,0px)) 10px calc(6px + env(safe-area-inset-bottom,0px))}
  #stTitle{font-size:19px;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.4)} #stSub{font-size:9px;letter-spacing:.1em;margin-top:3px;opacity:.9}
  #stageUi .awards{gap:4px;flex-wrap:nowrap;max-width:100%}
  #stageUi .aw{min-width:0;padding:2px 7px;border-radius:5px;background:rgba(14,18,23,.62)}
  #stageUi .aw .t{font-size:7.5px;letter-spacing:.08em} #stageUi .aw .n{font-size:12px;line-height:1.15} #stageUi .aw .v{font-size:8.5px;line-height:1.1}
  .stname{font-size:9.5px}
}

/* ===================== V0.1.1 (22): every phone notification small ===================== */
/* During play nothing big sits in the middle of a phone screen. Event text is small, see-through and short-lived,
   in two lanes: a top lane under the scoreboard (round banner, then alerts / mode card / AFK) and a bottom lane
   between the HP strip and the ammo box (streak callouts, network notices; its centre is 56 px right of the screen centre
   because the HP strip is wider than the ammo box), with mission toasts and the death note just above it. Desktop is unchanged. */
body.touch #banner{top:calc(88px + env(safe-area-inset-top,0px))}
body.touch #banner .big{font-size:14px;letter-spacing:.05em;opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.7)}
body.touch #banner .sm{font-size:9px;margin-top:2px;opacity:.75;max-width:60vw;margin-left:auto;margin-right:auto}
body.touch #alert{top:calc(120px + env(safe-area-inset-top,0px));max-width:44vw;padding:2px 10px;border-radius:4px;animation:phNote 2.4s ease-out forwards}
body.touch #alert.bad{background:rgba(255,77,94,.55)} body.touch #alert.good{background:rgba(47,123,255,.55)} body.touch #alert.info{background:rgba(14,18,23,.55)}
body.touch #alert .ab{font-size:11.5px}
body.touch #flagAlarm{font-size:10px;padding:2px 8px;animation:none;opacity:.8}
body.touch #modeCard{top:calc(120px + env(safe-area-inset-top,0px));width:min(300px,40vw);box-sizing:border-box;padding:3px 9px;background:rgba(10,14,20,.5);border-color:rgba(255,255,255,.08)}
body.touch #modeCard .mn{font-size:12px} body.touch #modeCard .mh{font-size:9px;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body.touch #modeCard .mw{display:none}
body.touch #afk{top:calc(120px + env(safe-area-inset-top,0px));font-size:9.5px;padding:2px 9px;background:rgba(255,77,94,.6);border-radius:4px;width:max-content;max-width:min(300px,40vw);box-sizing:border-box}
body.touch #afk b{display:inline;font-size:13px;margin:0 5px}
body.touch #callout{top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));left:calc(50% + 56px);right:auto;width:min(220px,calc(100vw - 520px));transform:translateX(-50%)}
body.touch #callout .c1{font-size:15px;text-shadow:0 1px 2px rgba(0,0,0,.8)} body.touch #callout .c2{font-size:8.5px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.touch #callout.go{animation:phNote 1.6s ease-out forwards}
body.touch div#misToast:not(.atres){bottom:calc(46px + env(safe-area-inset-bottom,0px));max-width:min(260px,34vw);font-size:10px;padding:2px 8px;background:rgba(14,18,23,.55);box-shadow:none} body.touch div#misToast:not(.atres) .k{font-size:8.5px}
body.touch #xpf{right:calc(104px + env(safe-area-inset-right,0px));bottom:calc(42px + env(safe-area-inset-bottom,0px))}
body.touch .xpi{font-size:9.5px;opacity:.85} body.touch .xpi:nth-child(n+4){display:none}
body.touch .dn{font-size:13px;opacity:.85} body.touch .dn.head{font-size:15px} body.touch .dn.imm{font-size:10px}
body.touch #dead{background:radial-gradient(ellipse at center,rgba(255,77,94,0) 55%,rgba(255,77,94,.16) 100%);padding-bottom:calc(46px + env(safe-area-inset-bottom,0px))}
body.touch #dead .box{padding:3px 12px;background:rgba(14,18,23,.55);border-radius:5px;max-width:48vw}
body.touch #dead .k{font-size:10.5px} body.touch #dead .taunt{font-size:9.5px;margin-top:1px} body.touch #dead .r{font-size:14px;margin-top:1px}
body.touch #carry,body.touch #prot{font-size:9.5px;padding:1px 7px;opacity:.85}
body.touch #carry{background:rgba(255,138,31,.6)} body.touch #prot{background:rgba(14,18,23,.5)}
body.touch .marker.big{font-size:11px;opacity:.85} body.touch .marker{font-size:9.5px}
body.touch:has(#hud:not([hidden])) #netNote{top:auto !important;bottom:calc(8px + env(safe-area-inset-bottom,0px)) !important;left:calc(50% + 56px) !important;font-size:10px !important;padding:2px 9px !important;background:rgba(14,18,26,.55) !important}
@keyframes phNote{0%{opacity:0}8%{opacity:.9}70%{opacity:.9}100%{opacity:0}}

/* ===================== Site layout v2: wrappers (phones and tablets lay them out exactly as before) ===================== */
.home-main,.home-side,.ctl-sec,.about-split,.about-pub,.about-log,.sgroup,.lbbar{display:contents}
.sgroup:has(>h3[hidden]){display:none}
#acctBox:empty,#navExtra:empty{display:none}
#sitenav .sn-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
#sitenav .sn-play{display:none}
.home .facts{display:none}
.mapc.cta{justify-content:center;gap:10px;background:linear-gradient(135deg,rgba(47,123,255,.22),rgba(255,138,31,.16));border-color:rgba(255,255,255,.12)}
.mapc.cta h3{margin:0;font-family:var(--display);font-weight:900;font-size:26px;text-transform:uppercase;line-height:1}
.mapc.cta .btn{align-self:flex-start}
@media (max-height:500px),(max-width:600px){.plead{display:none}}

/* ===================== Site layout v2: desktop (wide and tall enough; phones keep the compact layout above) ===================== */
@media (min-width:961px) and (min-height:501px){
  /* header */
  #sitenav{height:64px;gap:28px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px));background:linear-gradient(180deg,rgba(9,12,16,.94),rgba(9,12,16,.78));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.07)}
  #sitenav .sn-home{font-size:32px}
  #sitenav .sn-links{gap:4px}
  #sitenav .sn-links a{font-size:14.5px;letter-spacing:.1em;padding:10px 14px;border-radius:6px;position:relative;transition:color .15s,background .15s}
  #sitenav .sn-links a[aria-current="page"]{box-shadow:none;background:rgba(255,255,255,.06)}
  #sitenav .sn-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--orange));transform:scaleX(0);transition:transform .2s ease}
  #sitenav .sn-links a:hover::after{transform:scaleX(.5)}
  #sitenav .sn-links a[aria-current="page"]::after{transform:scaleX(1)}
  #sitenav .sn-play{display:block;font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:.06em;text-transform:uppercase;line-height:1;padding:10px 22px 9px;border-radius:7px;border:0;background:var(--blue);color:var(--white);cursor:pointer;box-shadow:0 4px 18px rgba(47,123,255,.4);transition:filter .15s,transform .15s}
  #sitenav .sn-play:hover{filter:brightness(1.1);transform:translateY(-1px)}
  body.onhome #sitenav .sn-play{display:none}
  body.nav .screen{padding-top:calc(88px + env(safe-area-inset-top,0px));padding-bottom:28px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}

  /* every menu panel: a deeper card */
  .panel{border-radius:16px;border-color:rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(24,31,41,.97),rgba(18,23,31,.96));box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);padding:32px 36px;gap:18px}
  button.btn{transition:filter .15s,border-color .15s,transform .15s,box-shadow .15s}
  button.btn.primary:hover{filter:brightness(1.1)}
  .lead{font-size:17px;line-height:1.55}
  .note{font-size:14px}

  /* ---------- front page: hero on the left, the island in the middle, progress on the right ---------- */
  #menu.screen.side{--hm:clamp(430px,38vw,640px);background:linear-gradient(90deg,rgba(9,12,16,.94) 0,rgba(9,12,16,.86) calc(var(--hm) + 40px),rgba(9,12,16,.2) calc(var(--hm) + 200px),rgba(9,12,16,0) calc(var(--hm) + 280px),rgba(9,12,16,0) 66%,rgba(9,12,16,.55) 78%,rgba(9,12,16,.82) 100%);align-items:flex-start}
  #menu .panel.home{width:100%;max-width:1760px;margin:auto;background:none;border:0;box-shadow:none;padding:0;max-height:none;overflow:visible;display:grid;grid-template-columns:var(--hm) minmax(0,1fr) clamp(310px,25vw,400px);grid-template-areas:"main . side" "legal legal legal";gap:20px 32px;align-items:center}
  .home-main{display:flex;flex-direction:column;gap:18px;grid-area:main;min-width:0}
  .home-side{display:flex;flex-direction:column;gap:14px;grid-area:side;min-width:0;align-self:center}
  #menu .legal{grid-area:legal;font-size:13px}
  .home .hero{display:flex;flex-direction:column;gap:12px}
  .home .logo{font-size:min(clamp(96px,9.4vw,168px),14vh);line-height:.8;text-shadow:0 8px 40px rgba(0,0,0,.45)}
  .home .tag{font-size:clamp(18px,1.45vw,23px);color:#c6cfdb;letter-spacing:.03em}
  .home .facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:2px 0 0;padding:0}
  .home .facts li{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c6cfdb;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
  .home .hbtns{grid-template-columns:1.7fr 1fr;gap:14px;margin-top:6px}
  .home button.btn.play{position:relative;overflow:hidden;font-size:min(clamp(52px,4.6vw,72px),8vh);padding:22px 20px 18px;border-radius:12px;background:linear-gradient(180deg,#4a8dff,#2f7bff 55%,#2364d6);box-shadow:0 14px 44px rgba(47,123,255,.45),inset 0 1px 0 rgba(255,255,255,.3)}
  .home button.btn.play::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .6s ease}
  .home button.btn.play:hover{transform:translateY(-2px);box-shadow:0 18px 54px rgba(47,123,255,.6),inset 0 1px 0 rgba(255,255,255,.3)}
  .home button.btn.play:hover::after{left:120%}
  .home button.btn.play small{font-size:14px;letter-spacing:.14em}
  .home button.btn.priv{font-size:clamp(28px,2.3vw,36px);border-radius:12px;background:rgba(28,36,48,.97);border-color:rgba(255,255,255,.14)}
  .home button.btn.priv:hover{border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
  .home button.btn.priv small{font-size:12.5px}
  .home .partyb{margin:0;font-size:13.5px;padding:12px 14px;border-radius:10px;background:rgba(28,36,48,.7);border-color:rgba(255,255,255,.1)}
  .home .partyb:hover{border-color:rgba(255,255,255,.35)}
  #menu .arena{border-radius:12px;padding:16px 20px;border-color:rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(242,194,48,.14),rgba(242,194,48,0) 75%),rgba(22,28,37,.9)}
  #menu .arena .ak{font-size:12.5px}
  #menu .arena .an{font-size:34px}
  #menu .arena .as{font-size:15px}
  #menu .arena{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center}
  #menu .arena>:not(.abtn){grid-column:1}
  #menu .arena .abtn{grid-column:2;grid-row:1/span 3;width:auto;font-size:24px;padding:12px 22px 10px;border-radius:10px;margin-top:0;white-space:nowrap}   /* Arena sits beside its text, so Play stays the biggest button */
  #menu .arena .abtn:hover{filter:brightness(1.08);transform:translateY(-1px)}
  #menu .arena .abtn small{font-size:12px}
  /* right column: glass cards */
  #menu .home-side>*{background:rgba(16,21,28,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.09);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
  #menu .prof{padding:14px 16px;gap:14px}
  #menu .prof .lvbadge{font-size:32px;min-width:62px}
  #menu .prof .xpbar .t{font-size:14px;color:#c6cfdb}
  #menu .prof .xpbar .bar{height:9px}
  #menu .mis{padding:14px 16px;gap:8px;border-left:4px solid var(--blue)}
  #menu .mis .mk{font-size:12.5px}
  #menu .mis.compact .mrow{font-size:14px}
  #menu .mis.compact .mrow.wk{font-size:13.5px}
  #menu .ver{font-size:12px}
  /* entrance */
  #menu:not([hidden]) .home-main>*,#menu:not([hidden]) .home-side>*{animation:ffRise .5s cubic-bezier(.2,.8,.2,1) both}
  #menu:not([hidden]) .home-main>:nth-child(2){animation-delay:.04s} #menu:not([hidden]) .home-main>:nth-child(3){animation-delay:.08s}
  #menu:not([hidden]) .home-main>:nth-child(4){animation-delay:.12s} #menu:not([hidden]) .home-main>:nth-child(5){animation-delay:.16s}
  #menu:not([hidden]) .home-side>*{animation-delay:.14s}

  /* ---------- content pages: one wide, centred column over the dimmed island ---------- */
  .screen.page,#lb,#settings,#credits{align-items:flex-start}
  .screen.page{background:radial-gradient(ellipse at 50% 0,rgba(9,12,16,.55),rgba(9,12,16,.9) 70%),rgba(9,12,16,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);justify-content:center}
  body.nav #lb,body.nav #settings,body.nav #credits{background:radial-gradient(ellipse at 50% 0,rgba(9,12,16,.55),rgba(9,12,16,.9) 70%),rgba(9,12,16,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .screen.side.page .panel,#lb .panel,#settings .panel,#credits .panel{max-height:none;overflow:visible;margin:0 auto auto}
  .screen.side.page .panel{width:min(1280px,100%);padding:44px 52px 48px;gap:22px}
  .screen:not([hidden])>.panel{animation:ffRise .45s cubic-bezier(.2,.8,.2,1) both}
  #menu:not([hidden])>.panel{animation:none}
  .page h2.h,#lb h2.h,#settings h2.h,#credits h2.h{font-size:clamp(56px,5vw,80px);line-height:.9}
  .page h2.h::after,#lb h2.h::after,#settings h2.h::after,#credits h2.h::after{content:"";display:block;width:72px;height:5px;margin-top:16px;border-radius:3px;background:linear-gradient(90deg,var(--blue) 50%,var(--orange) 50%)}
  .page .lead,.plead{font-size:19px;line-height:1.55;max-width:72ch;color:#d4dbe5}
  h3.sh{display:flex;align-items:center;gap:14px;margin:18px 0 0;font-size:14px;letter-spacing:.16em}
  h3.sh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
  .page .rules{gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
  .page .rule{padding:18px 20px;border-radius:12px;font-size:15.5px;line-height:1.5;color:#c6cfdb;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--panel-2);border:1px solid rgba(255,255,255,.06);transition:transform .2s,border-color .2s}
  .page .rule:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14)}
  .page .rule h4{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:.02em;line-height:1.05;color:var(--ink);margin:0 0 8px}
  .page .rules.modes .rule{border-top:4px solid var(--blue)}
  .page .rules.modes .rule:nth-child(2){border-top-color:var(--orange)} .page .rules.modes .rule:nth-child(3){border-top-color:var(--good)} .page .rules.modes .rule:nth-child(4){border-top-color:var(--gold)}

  /* Maps: big mood cards */
  .mapl{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .mapc{padding:0;gap:0;overflow:hidden;border-radius:14px;border-color:rgba(255,255,255,.07);box-shadow:0 12px 30px rgba(0,0,0,.3);transition:transform .25s,box-shadow .25s,border-color .25s}
  .mapc:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(0,0,0,.45);border-color:rgba(255,255,255,.18)}
  .mapc img{border-radius:0;aspect-ratio:16/9;transition:transform .6s ease}
  .mapc:hover img{transform:scale(1.04)}
  .mapc .mapt{padding:16px 20px 4px;position:relative;background:var(--panel-2)}
  .mapc .mapt h3{font-size:34px}
  .mapc .mapt .mb{font-size:14.5px}
  .mapc>p{padding:0 20px 18px;font-size:16px;color:#c6cfdb;background:var(--panel-2)}
  .mapc.cta{padding:32px;gap:18px}
  .mapc.cta:hover{transform:none}
  .mapc.cta h3{font-size:44px}
  .mapc.cta p{padding:0;background:none;font-size:18px;max-width:46ch;margin-top:8px}
  .mapc.cta .btn{font-family:var(--display);font-weight:900;font-size:30px;padding:16px 34px 13px;border-radius:10px;box-shadow:0 10px 30px rgba(47,123,255,.4)}

  /* Controls: big diagrams beside their key lists */
  .ctl-sec{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:center;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:28px}
  .diag svg{max-width:none}
  .diag text{font-size:14px}
  .keys{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;font-size:16px;color:#c6cfdb}
  .keys>div{display:flex;align-items:center;gap:12px}
  .keys b{padding:6px 10px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line);box-shadow:inset 0 -3px 0 rgba(0,0,0,.35);font-size:14px;color:var(--ink);text-align:center;min-width:64px}
  .ctl-sec .rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctl-sec .rule h4{font-size:20px}

  /* About: built in public beside the changelog */
  .about-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:start;margin-top:10px}
  .about-pub,.about-log{display:flex;flex-direction:column;gap:16px;min-width:0}
  .about-pub .fbl{font-size:16px}
  .fbl a{color:#9cc3ff}
  .clog li{grid-template-columns:110px 1fr auto;font-size:15.5px;padding:10px 0}
  .clog .cd{font-size:13.5px}

  /* Leaderboards */
  #lb .panel{width:min(1040px,100%);padding:44px 52px 48px;gap:20px}
  .lbbar{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
  .lbbar .seg{flex:1 1 380px}
  .lbbar select{flex:0 1 300px}
  #lb .seg button{font-size:14px;padding:12px 10px}
  #lb select{font-size:16px;padding:11px 12px}
  table.lb{font-size:17px}
  table.lb td,table.lb th{padding:12px 14px}
  table.lb th{font-size:12.5px}
  table.lb tbody tr:not(.gap):not(.me):hover td{background:rgba(255,255,255,.03)}
  table.lb td:first-child{width:72px;font-family:var(--display);font-weight:900;font-size:22px}
  table.lb tbody tr:nth-child(1):not(.gap) td:first-child{color:var(--gold)}
  table.lb tbody tr:nth-child(2):not(.gap) td:first-child{color:#d5dde8}
  table.lb tbody tr:nth-child(3):not(.gap) td:first-child{color:#e0955a}
  table.lb td.v{font-weight:700}

  /* Settings: grouped cards, Done always in reach */
  #settings .panel{width:min(1180px,100%);padding:44px 52px 0;gap:20px}
  #settings .sgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  #settings .sgroup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;align-content:start;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px 22px}
  #settings .sgroup.sg-gfx{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}
  #settings .sgroup.sg-touch{grid-column:1/-1}
  #settings .sgroup:has(>label:only-of-type) label{grid-column:1/-1}
  #settings .sgrid h3{margin:0;font-size:14px;letter-spacing:.16em}
  #settings .sgrid label{font-size:15px}
  #settings .sgrid select{font-size:15px;padding:10px 12px}
  body.nav #settings{padding-bottom:0}
  #settings .panel{margin-bottom:28px}
  #settings .sgroup:has(>h3[hidden]){display:none}
  #settings .setfoot{position:sticky;bottom:0;margin:0 -52px;padding:16px 52px 20px;background:linear-gradient(180deg,rgba(18,23,31,0),rgba(18,23,31,.97) 35%);border-radius:0 0 16px 16px;justify-content:flex-end}
  #settings .setfoot .btn{min-width:160px;font-size:16px;padding:13px 24px}

  /* Credits: two columns */
  #credits .panel{width:min(1100px,100%);padding:44px 52px 48px}
  #credits .credits{columns:2;column-gap:48px}
  #credits .credits h4{font-size:13px;margin:0 0 6px;break-after:avoid}
  #credits .credits p{font-size:15.5px;line-height:1.55;margin:0 0 18px;color:#c6cfdb;break-inside:avoid}

  /* Profile: wider panel, the character stays in view on the right */
  #locker.screen.side{background:linear-gradient(90deg,rgba(9,12,16,.88) 0,rgba(9,12,16,.6) 44%,rgba(9,12,16,0) 60%)}
  #locker .panel{width:min(860px,54vw);padding:28px 32px}
  #locker .items{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  #locker .item{font-size:15px;padding:10px 12px}

  /* Results, private lobby, party */
  #results .panel{width:min(1040px,100%);padding:36px 44px}
  #results h2.h{font-size:clamp(48px,4.6vw,72px)}
  #results .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  #results .st{padding:14px 16px;border-radius:10px}
  #results .st .v{font-size:40px}
  #results .st .l{font-size:12.5px}
  #priv .panel,#party .panel{width:min(820px,100%);padding:40px 48px 44px;gap:18px}
  #priv h2.h,#party h2.h{font-size:clamp(48px,4.4vw,68px);line-height:.9}
  #priv h2.h::after,#party h2.h::after{content:"";display:block;width:72px;height:5px;margin-top:14px;border-radius:3px;background:linear-gradient(90deg,var(--blue) 50%,var(--orange) 50%)}
  #priv .link,#party .link{font-size:17px;padding:14px 16px;border-radius:10px}
  #priv .sgrid label{font-size:15px} #priv .sgrid select{font-size:16px;padding:11px 12px}
  #priv .row .btn,#party .row .btn{font-size:16px;padding:13px 20px;border-radius:9px}
  #priv .row .btn.primary,#party .row .btn.primary{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:.04em;padding:12px 28px 10px;box-shadow:0 10px 30px rgba(47,123,255,.35)}
}
@media (min-width:1280px) and (min-height:501px){
  .mapl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mapc.cta{grid-column:span 2;flex-direction:row;align-items:center;justify-content:space-between}
  .mapc.cta .btn{align-self:center;flex:none}
  #results .stats{grid-template-columns:repeat(8,minmax(0,1fr))}
}
@keyframes ffRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .screen>.panel,#menu .home-main>*,#menu .home-side>*{animation:none!important}
  .mapc,.mapc img,.rule,#sitenav .sn-links a::after,.home button.btn.play::after{transition:none!important}
}