/* 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)}
#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)}
button.btn.warn{background:transparent;border-color:var(--danger);color:var(--danger)}
button.btn.danger{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 */
.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))}}