/* Double/triple-clicking while shooting used to select page text and turn everything blue -
   nothing in the app had user-select:none. The game chrome is not text you ever want to
   select, so kill selection everywhere EXCEPT real inputs and the chat log (where you may
   legitimately want to copy a message). ::selection is also neutralised on game chrome so a
   drag-select started elsewhere cannot paint it blue either. */
body.mode-game, .arena-shell, .arena-hud, .hud-pill, .online-pill, .weapon-tag, .killfeed,
.health-wrap, .sb-overlay, .win-banner, #hudNades, .nav, .nav-btn, .topbar, .server-menu-screen,
.score-row, .public-room, .chip, .kbd, .server-card {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.arena-shell ::selection, .arena-hud ::selection { background: transparent; }
/* Inputs and chat history must stay selectable - you type in one and copy from the other. */
input, textarea, select, .chat-log, .chat-msg, .sb-overlay-inner {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}

/* --- mobile spectate: floating "Next view" button (touch devices only) --- */
#specNextBtn{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:945;
  display:none;padding:14px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.22);
  background:rgba(20,26,36,.92);color:#fff;font-size:15px;font-weight:900;letter-spacing:.4px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);touch-action:manipulation;-webkit-user-select:none;user-select:none}
#specNextBtn:active{transform:scale(.96);background:rgba(40,52,68,.95)}

/* --- mobile arena controls + full-bleed spectate (touch devices only) --- */
#mobileArenaBar{position:fixed;left:calc(12px + env(safe-area-inset-left));top:calc(12px + env(safe-area-inset-top));z-index:946;display:none;gap:8px;pointer-events:auto}
.m-arena-btn{padding:11px 15px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(20,26,36,.92);color:#fff;font-size:15px;font-weight:900;letter-spacing:.3px;box-shadow:0 10px 30px rgba(0,0,0,.5);touch-action:manipulation;-webkit-user-select:none;user-select:none}
.m-arena-btn:active{transform:scale(.96);background:rgba(40,52,68,.95)}
#mobileArenaBar{display:none!important}

/* --- in-game chat (CS2 style): log top-left, input line only while typing --- */
#gameChat{position:fixed;left:18px;top:96px;z-index:940;width:min(460px,44vw);pointer-events:none;
  display:flex;flex-direction:column;gap:6px;user-select:none}
.gc-log{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.gc-msg{max-width:100%;padding:3px 8px;border-radius:6px;background:rgba(6,10,16,.55);
  font-size:13px;font-weight:700;color:#e8edf4;line-height:1.35;word-break:break-word;
  text-shadow:0 1px 2px rgba(0,0,0,.9);transition:opacity .9s ease}
.gc-msg.gc-fade{opacity:0}
.gc-name{font-weight:900;color:#ffd34d}
.gc-form{display:flex;align-items:center;gap:7px;pointer-events:auto;
  background:rgba(6,10,16,.85);border:1px solid rgba(255,255,255,.16);border-radius:7px;padding:5px 9px}
.gc-form.hidden{display:none}
.gc-say{font-size:12px;font-weight:900;letter-spacing:.4px;color:#ffd34d;text-transform:uppercase}
.gc-form input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:13px;
  font-weight:700;padding:2px 0}

/* --- hold-Tab scoreboard overlay --- */
.sb-overlay{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:rgba(6,10,16,.55);backdrop-filter:blur(3px);pointer-events:none}
.sb-overlay.hidden{display:none}
.sb-overlay-inner{min-width:420px;max-width:min(680px,92vw);max-height:80vh;overflow:auto;padding:16px 18px;border-radius:14px;background:rgba(16,22,32,.94);box-shadow:0 18px 60px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.10)}
/* --- win/lose banner --- */
.win-banner{position:fixed;left:0;right:0;top:14%;z-index:950;display:flex;justify-content:center;pointer-events:none;transition:opacity .35s ease,transform .35s ease}
.win-banner.hidden{opacity:0;transform:translateY(-14px)}
.win-banner-in{text-align:center;padding:18px 54px;border-radius:16px;background:rgba(10,14,22,.82);box-shadow:0 20px 70px rgba(0,0,0,.6);animation:winPop .45s cubic-bezier(.2,1.4,.4,1) both}
.win-title{font-size:58px;font-weight:900;letter-spacing:.10em;line-height:1}
.win-sub{margin-top:8px;font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.72)}
.win-banner.won .win-title{color:#41e07a;text-shadow:0 0 30px rgba(65,224,122,.55)}
.win-banner.won .win-banner-in{box-shadow:0 20px 70px rgba(0,0,0,.6),inset 0 0 0 2px rgba(65,224,122,.5)}
.win-banner.lost .win-title{color:#ff5a5a;text-shadow:0 0 30px rgba(255,90,90,.5)}
.win-banner.lost .win-banner-in{box-shadow:0 20px 70px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,90,90,.45)}
@keyframes winPop{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}

body.mode-game .site{padding-top:92px}
/* --- in-match leaderboard + team picker --- */
.sb-row{display:grid;grid-template-columns:1fr 30px 30px 44px 42px;gap:6px;align-items:center;padding:5px 8px;border-radius:8px;font-size:13px;line-height:1.25}
.sb-row>span{text-align:center;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.sb-row .sb-name{text-align:left;display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-row .sb-score{text-align:right;font-weight:900}
.sb-row:nth-of-type(even){background:rgba(255,255,255,.025)}
.sb-row.me{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.sb-head{border-radius:0;padding:0 8px 4px;margin-bottom:3px;border-bottom:1px solid rgba(255,255,255,.10);background:none !important;box-shadow:none !important}
.sb-head>span{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.score-row{display:grid;grid-template-columns:1fr auto auto auto auto;gap:8px;align-items:center;padding:6px 8px;border-radius:10px}
.score-row.me{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.score-kd{text-align:center;min-width:34px;line-height:1.05}
.score-kd b{display:block;font-size:13px;font-weight:800;color:#fff}
.score-kd span{display:block;font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,.42)}
.score-value{min-width:34px;text-align:right;font-weight:900;font-size:16px}
.team-head{display:flex;align-items:center;justify-content:space-between;margin:12px 0 4px;padding:4px 8px;
border-left:3px solid var(--tc,#888);background:linear-gradient(90deg,color-mix(in srgb,var(--tc,#888) 22%,transparent),transparent);
font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--tc,#ddd);border-radius:0 8px 8px 0}
.team-head span{font-size:15px;color:#fff}
.team-pick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.team-btn{flex:1 1 auto;padding:8px 10px;border-radius:10px;cursor:pointer;font-size:12px;font-weight:800;
background:rgba(255,255,255,.05);color:#ddd;border:1px solid var(--tc,rgba(255,255,255,.16));transition:all .12s ease}
.team-btn span{display:block;font-size:10px;font-weight:600;opacity:.7}
.team-btn:hover:not(:disabled){background:color-mix(in srgb,var(--tc,#888) 25%,transparent);transform:translateY(-1px)}
.team-btn.on{background:var(--tc,#888);color:#0d0d0d;border-color:var(--tc,#888)}
.team-btn:disabled{opacity:.35;cursor:not-allowed}
.name-badge{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;background:linear-gradient(135deg,#ffd45e,#f0850c);color:#241503;font-size:10px;font-weight:900;letter-spacing:.6px;line-height:1.5;vertical-align:middle;text-transform:uppercase;box-shadow:0 1px 4px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.35);}
.score-name .name-badge{font-size:9px;padding:1px 6px;}
.chat-name .name-badge{font-size:9px;padding:0 5px;}
#shopModal,#rankModal,#settingsMenu,#tutorialScreen{z-index:700!important;pointer-events:auto!important}
body.mode-menu.viewing-page:has(#shopModal:not(.hidden)) .site .page.active,body.mode-menu.viewing-page:has(#rankModal:not(.hidden)) .site .page.active,body.mode-menu.viewing-page:has(#settingsMenu:not(.hidden)) .site .page.active,body.mode-menu.viewing-page:has(#tutorialScreen:not(.hidden)) .site .page.active{display:none!important}
body.mode-menu .site{z-index:500!important;pointer-events:none} body.mode-menu .topbar{pointer-events:auto} body.mode-menu.viewing-page .site{pointer-events:auto} body.mode-game .topbar{display:flex!important;position:fixed;top:0;left:0;right:0;max-width:none;margin:0;z-index:600;pointer-events:auto} body.arena-locked .topbar{display:none!important}
:root{
  --white:#fff;
  --muted:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.075);
  --glass:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.14);
  --radius:28px;
}
*{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Arial,sans-serif}
body{
  margin:0;min-height:100vh;color:white;overflow-x:hidden;background:
  linear-gradient(var(--line) 1px,transparent 1px),
  linear-gradient(90deg,var(--line) 1px,transparent 1px),
  radial-gradient(circle at 50% 20%,rgba(255,255,255,.055),transparent 32%),
  radial-gradient(circle at 80% 80%,rgba(255,255,255,.035),transparent 32%),#050505;
  background-size:42px 42px,42px 42px,auto,auto,auto;animation:gridMove 18s linear infinite}
@keyframes gridMove{to{background-position:42px 42px,42px 42px,center,center,center}}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(circle at center,transparent 0%,rgba(0,0,0,.58) 72%);pointer-events:none;z-index:0}
.site{position:relative;z-index:1;min-height:100vh;padding:24px}
.topbar{max-width:1280px;margin:0 auto 18px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.brand,.nav,.glass,.hud-pill,.modal-card,.online-pill{
  background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16)}
.brand{padding:11px 16px;border-radius:999px;font-weight:850;text-transform:uppercase;letter-spacing:.45px;font-size:13px;white-space:nowrap}
.brand::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.65);margin-right:10px}
.nav{display:flex;gap:8px;padding:7px;border-radius:20px;flex-wrap:wrap}
button{font-family:inherit}
.nav-btn,.switch-btn,.copy-btn,.start-btn,.ghost-btn,.danger-btn,.tiny-btn{
  border:1px solid rgba(255,255,255,.36);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.66));
  color:#050505;font-weight:850;cursor:pointer;transition:.25s ease;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 30px rgba(0,0,0,.18)}
.nav-btn{padding:12px 16px;border-radius:15px;text-transform:uppercase;font-size:13px}.nav-btn:not(.active),.switch-btn:not(.active){opacity:.62}
.nav-btn:hover,.switch-btn:hover,.copy-btn:hover,.start-btn:hover,.ghost-btn:hover,.danger-btn:hover,.tiny-btn:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.06);box-shadow:0 18px 42px rgba(0,0,0,.32),0 0 24px rgba(255,255,255,.16)}
.page{display:none;max-width:1280px;margin:0 auto;animation:enter .55s ease both}.page.active{display:block}
@keyframes enter{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.glass{border-radius:var(--radius);position:relative;overflow:hidden}.glass::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 28%),linear-gradient(315deg,rgba(255,255,255,.035),transparent 38%);pointer-events:none;z-index:0}.glass>*{position:relative;z-index:1}
h1{margin:0;font-size:clamp(48px,6vw,78px);line-height:.92;letter-spacing:-3.4px}.thin{font-weight:500;color:rgba(255,255,255,.68)}.bold{font-weight:900}
h2{margin:0 0 8px;font-size:30px;letter-spacing:-1px}.small-text{color:var(--muted);margin-bottom:20px;font-size:14px;line-height:1.5}.mini-text{color:rgba(255,255,255,.55);font-size:12px;line-height:1.45;font-weight:650}
label{display:block;margin:16px 0 8px;color:rgba(255,255,255,.86);font-weight:750;font-size:13px;text-transform:uppercase;letter-spacing:.55px}
input,select{width:100%;padding:15px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.18);outline:none;background:rgba(255,255,255,.10);color:white;font-size:16px;font-weight:650}select option{color:#000}input::placeholder{color:rgba(255,255,255,.38)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.start-btn,.copy-btn,.ghost-btn,.danger-btn{width:100%;margin-top:14px;padding:14px;border-radius:18px;text-transform:uppercase;font-size:14px}.ghost-btn{background:rgba(255,255,255,.10);color:white;border-color:rgba(255,255,255,.16)}.danger-btn{background:rgba(255,80,80,.18);color:white;border-color:rgba(255,120,120,.26)}.tiny-btn{padding:11px 13px;border-radius:14px;text-transform:uppercase;font-size:12px}
.result-box{padding:17px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.075));border:1px solid rgba(255,255,255,.13)}.result-title{color:rgba(255,255,255,.58);font-size:12px;margin-bottom:7px;font-weight:800;text-transform:uppercase;letter-spacing:.45px}.result-value{font-size:32px;font-weight:900;letter-spacing:-1.2px}.box-tip{margin-top:9px;color:rgba(255,255,255,.48);font-size:12px;line-height:1.45;font-weight:600;min-height:28px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(30px);padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(20px);z-index:99;opacity:0;transition:.25s ease;font-weight:850;font-size:13px}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Online */
.online-layout{display:grid;grid-template-columns:330px 1fr 300px;gap:18px;height:calc(100vh - 112px);min-height:720px}.online-panel{padding:24px;display:flex;flex-direction:column;overflow:auto;max-height:calc(100vh - 112px)}.online-panel::-webkit-scrollbar{width:8px}.online-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}.status-line{display:flex;align-items:center;gap:9px;margin:8px 0 12px;color:rgba(255,255,255,.72);font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.45px}.status-dot{width:9px;height:9px;border-radius:50%;background:#ff7474;box-shadow:0 0 16px rgba(255,116,116,.6)}.status-dot.online{background:#fff;box-shadow:0 0 18px rgba(255,255,255,.8)}.room-code{font-size:34px;font-weight:950;letter-spacing:2px}.chip-row{display:flex;gap:8px;flex-wrap:wrap}.chip,.kbd{padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);font-size:11px;text-transform:uppercase;font-weight:900;letter-spacing:.4px;color:rgba(255,255,255,.72)}
.arena-shell{height:100%;min-height:720px;position:relative}.arena-shell #arenaMount{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:#050505;z-index:1}.arena-shell canvas{display:block;width:100%;height:100%;cursor:none}.arena-hud{position:absolute;inset:0;z-index:4;pointer-events:none}.hud-top{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.hud-left,.hud-right{display:flex;gap:8px;flex-wrap:wrap}.hud-pill,.online-pill{padding:10px 14px;border-radius:999px;font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.45px;color:rgba(255,255,255,.82)}.crosshair{position:absolute;left:50%;top:50%;width:180px;height:180px;transform:translate(-50%,-50%);pointer-events:none;image-rendering:pixelated}.scope-overlay{position:absolute;inset:0;z-index:6;display:none;pointer-events:none;background:radial-gradient(circle at center,transparent 0 31%,rgba(0,0,0,.92) 31.4% 100%)}.scope-overlay.active{display:block}.scope-overlay::before,.scope-overlay::after{content:"";position:absolute;background:rgba(255,255,255,.9);left:50%;top:50%;transform:translate(-50%,-50%)}.scope-overlay::before{width:1px;height:62%}.scope-overlay::after{width:62%;height:1px}.scope-ring{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1/1;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 9999px rgba(0,0,0,.15)}
.center-message{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.38);backdrop-filter:blur(12px);padding:24px}.center-message.hidden{display:none}.modal-card{width:min(560px,100%);border-radius:28px;padding:28px;text-align:center}.modal-card h2{font-size:38px;margin:0;letter-spacing:-1.5px}.modal-card p{color:var(--muted);line-height:1.6}.hit-text{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font-size:38px;font-weight:950;opacity:0;z-index:9;pointer-events:none;text-shadow:0 0 24px rgba(255,255,255,.45)}.hit-text.show{animation:hitPop .38s ease forwards}@keyframes hitPop{from{opacity:1;transform:translate(-50%,-50%) scale(.8)}to{opacity:0;transform:translate(-50%,-90%) scale(1.25)}}.damage-flash{position:absolute;inset:0;background:radial-gradient(circle at center,transparent,rgba(255,0,0,.22));opacity:0;pointer-events:none;z-index:5}.damage-flash.show{animation:damageFlash .35s ease}@keyframes damageFlash{0%{opacity:0}.15%{opacity:1}100%{opacity:0}}
.health-wrap{position:absolute;left:18px;bottom:18px;width:min(360px,42vw)}.health-top{display:flex;justify-content:space-between;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.45px;color:rgba(255,255,255,.82);margin-bottom:8px}.health-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);overflow:hidden}.health-fill{height:100%;width:100%;background:linear-gradient(90deg,#fff,rgba(255,255,255,.55));transition:.15s ease}.weapon-tag{position:absolute;right:18px;bottom:18px;z-index:5;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.45px;color:rgba(255,255,255,.82)}.killfeed{position:absolute;right:18px;top:72px;width:min(320px,calc(100% - 36px));display:grid;gap:8px;z-index:5;pointer-events:none}.feed-item{padding:10px 12px;border-radius:16px;background:rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);font-size:12px;font-weight:800;color:rgba(255,255,255,.82);animation:enter .25s ease both}.scoreboard,.public-rooms,.chat-log{display:grid;gap:8px}.score-row,.public-room{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11)}.score-row.me{background:rgba(255,255,255,.14)}.score-name{font-weight:950;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-meta{font-size:11px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.4px;margin-top:3px;font-weight:800}.score-value{font-size:22px;font-weight:950;letter-spacing:-.7px}.public-room{width:100%;color:white;text-align:left;cursor:pointer}.public-room:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)}.chat-log{height:150px;overflow:auto;align-content:start;padding-right:4px}.chat-msg{font-size:12px;color:rgba(255,255,255,.75);line-height:1.35;word-break:break-word}.chat-name{font-weight:950;color:white}.chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.chat-form input{padding:12px 13px;border-radius:14px;font-size:13px}.arena-shell:fullscreen{border-radius:0!important;box-shadow:none!important;background:#050505!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.arena-shell:fullscreen #arenaMount{width:100vw;height:100vh}

/* Converter */
.converter-layout,.solo-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:28px}.hero{min-height:590px;padding:46px;display:flex;flex-direction:column;justify-content:space-between}.card{padding:34px}.game-row{display:flex;gap:12px;flex-wrap:wrap}.game-pill{padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);font-weight:800;font-size:13px;text-transform:uppercase}.switch-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:7px;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);margin-bottom:24px}.switch-btn{padding:14px 12px;border-radius:15px;text-transform:uppercase;font-size:13px}.converter-section{display:none;animation:enter .3s ease both}.converter-section.active{display:block}.results{margin-top:24px;display:grid;gap:13px}.formula{margin-top:20px;padding:16px;border-radius:18px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.11);color:rgba(255,255,255,.65);font-size:13px;line-height:1.7}.error{margin-top:12px;color:#ffb4b4;display:none}.success{margin-top:12px;display:none}.big-link{text-decoration:none;display:block;text-align:center;color:#050505}.note{margin-top:auto;padding-top:18px;color:rgba(255,255,255,.48);font-size:12px;line-height:1.55}
@media(max-width:1180px){.online-layout{grid-template-columns:1fr}.online-panel{max-height:none}.arena-shell{height:720px}.right-panel{order:3}.nav{justify-content:center}.topbar{flex-direction:column;align-items:stretch}}
@media(max-width:980px){.converter-layout,.solo-layout{grid-template-columns:1fr}.hero{min-height:auto}.nav{display:grid;grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.site{padding:14px}.hero,.card,.online-panel,.arena-shell{border-radius:22px}.hero,.card,.online-panel{padding:22px}h1{font-size:42px}.switch-buttons,.two,.button-row{grid-template-columns:1fr}.arena-shell{height:640px;min-height:640px}.hud-top{left:12px;right:12px}.health-wrap{left:12px;width:calc(100% - 24px)}.weapon-tag{right:12px;bottom:76px}.killfeed{right:12px;top:112px;width:calc(100% - 24px)}.nav{grid-template-columns:1fr}}

/* Session login + server browser upgrades */
.login-screen{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.login-screen.hidden{display:none}.login-card{width:min(520px,100%);padding:32px;border-radius:30px}.login-card h2{font-size:38px;margin:0 0 8px;letter-spacing:-1.4px}.session-line strong{color:#fff;letter-spacing:0;text-transform:none}input[readonly]{opacity:.72;cursor:not-allowed}.public-room.locked{border-color:rgba(255,255,255,.24);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055))}.server-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.server-badge{padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);font-size:10px;text-transform:uppercase;font-weight:950;letter-spacing:.38px;color:rgba(255,255,255,.7)}.server-badge.locked{background:rgba(255,210,120,.13);border-color:rgba(255,210,120,.26)}

/* Cleaner pro-quality pass */
body{letter-spacing:-.01em}.online-panel{gap:10px}.online-panel h2{font-size:32px;margin-bottom:4px}.online-panel label{margin-top:14px}.compact-btn{margin-top:0;margin-bottom:4px;padding:11px 13px;font-size:12px}.status-line{padding:9px 11px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10)}
.online-panel .result-box{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.arena-shell{box-shadow:0 30px 120px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.15)}.public-room{transition:.2s ease}.public-room strong{font-size:14px}.public-room:hover{border-color:rgba(255,255,255,.23);box-shadow:0 14px 34px rgba(0,0,0,.28)}.score-row{min-height:62px}.score-row.me{border-color:rgba(255,255,255,.24)}.chat-log{border-radius:16px;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.08);padding:10px}.hud-pill{background:rgba(0,0,0,.30);border-color:rgba(255,255,255,.12)}.weapon-tag,.feed-item{box-shadow:0 14px 34px rgba(0,0,0,.30)}.modal-card{box-shadow:0 34px 100px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.18)}

/* First-time tutorial */
.tutorial-screen{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.tutorial-screen.hidden{display:none}.tutorial-card{width:min(660px,100%);padding:30px;border-radius:32px}.tutorial-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.tutorial-topline span{font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.62)}.ghost-tiny{background:rgba(255,255,255,.08);color:white;border-color:rgba(255,255,255,.15);width:auto}.tutorial-card h2{font-size:42px;letter-spacing:-1.7px;margin:0 0 8px}.tutorial-card p{color:rgba(255,255,255,.68);line-height:1.6;margin:0}.tutorial-visual{margin:22px 0;padding:18px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.13);display:grid;gap:10px}.tutorial-chip-row{display:flex;gap:8px;flex-wrap:wrap}.tutorial-chip{padding:9px 11px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);font-size:12px;text-transform:uppercase;font-weight:950;color:rgba(255,255,255,.76)}.tutorial-actions{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:10px}.tutorial-actions .start-btn,.tutorial-actions .ghost-btn{margin-top:0}.tutorial-note{font-size:13px;color:rgba(255,255,255,.58);line-height:1.5}.tutorial-step-card{padding:14px;border-radius:18px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08)}
@media(max-width:560px){.tutorial-card{padding:22px;border-radius:24px}.tutorial-card h2{font-size:32px}.tutorial-actions{grid-template-columns:1fr}.compact-btn{margin-bottom:2px}}

/* v5 cleanup: no mouse glow, centered buttons, server-first flow */
.cursor-glow{display:none!important}.hidden,.hidden-controls{display:none!important}.eyebrow{font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.65px;color:rgba(255,255,255,.55);margin-bottom:8px}
.nav-btn,.switch-btn,.copy-btn,.start-btn,.ghost-btn,.danger-btn,.tiny-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;min-height:44px;white-space:normal;vertical-align:middle;padding-top:12px;padding-bottom:12px}.start-btn,.copy-btn,.ghost-btn,.danger-btn{min-height:48px}.nav-btn,.tiny-btn{min-height:40px}.start-btn:disabled,.ghost-btn:disabled,.danger-btn:disabled,.tiny-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;filter:none!important}.button-row .start-btn,.button-row .ghost-btn,.button-row .danger-btn{margin-top:0}.compact-btn{min-height:42px}.chat-form button{margin-top:0}.big-link{display:flex;align-items:center;justify-content:center}
.login-screen{z-index:140}.server-menu-screen,.create-server-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.76);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.server-menu-screen{z-index:125}.create-server-modal{z-index:145}.tutorial-screen{z-index:150}.server-menu-card{width:min(1180px,100%);max-height:min(860px,calc(100vh - 48px));padding:28px;border-radius:34px;overflow:auto}.server-menu-header{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;margin-bottom:20px}.server-menu-header h2,.create-server-card h2{font-size:clamp(34px,4vw,58px);letter-spacing:-2px;line-height:.95;margin:0 0 10px}.server-menu-actions{display:grid;grid-template-columns:1fr;gap:10px;min-width:190px}.server-menu-actions .start-btn,.server-menu-actions .ghost-btn{margin-top:0}.server-menu-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:18px}.server-list-panel,.server-overview-panel{padding:18px;border-radius:26px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.server-list-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;color:rgba(255,255,255,.62);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.5px}.server-list{display:grid;gap:10px;max-height:520px;overflow:auto;padding-right:4px}.server-list::-webkit-scrollbar{width:8px}.server-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}.server-card{width:100%;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:15px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.052));border:1px solid rgba(255,255,255,.12);color:white;text-align:left;cursor:pointer;transition:.2s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.server-card:hover,.server-card.selected,.public-room.selected{transform:translateY(-2px);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));border-color:rgba(255,255,255,.30);box-shadow:0 18px 42px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.12)}.server-card strong{display:block;font-size:17px;font-weight:950;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-card.locked{border-color:rgba(255,210,120,.25)}.server-card-count{font-size:28px;font-weight:950;letter-spacing:-1px;color:#fff}.empty-server-list{min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:22px;border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.045);gap:6px;color:rgba(255,255,255,.64)}.empty-server-list strong{font-size:20px;color:#fff}.server-overview-panel h3{font-size:30px;margin:4px 0 8px;letter-spacing:-1.2px}.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.overview-stat{padding:14px;border-radius:18px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.09)}.overview-stat span{display:block;font-size:11px;color:rgba(255,255,255,.52);font-weight:950;text-transform:uppercase;letter-spacing:.45px;margin-bottom:6px}.overview-stat strong{font-size:22px;letter-spacing:-.6px}.server-menu-footer{display:grid;grid-template-columns:1.2fr .8fr;gap:10px;margin-top:14px}.server-menu-footer .start-btn,.server-menu-footer .ghost-btn{margin-top:0}.server-menu-note{margin-top:12px}.create-server-card{width:min(560px,100%);max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;padding:28px;border-radius:32px}.create-server-card .start-btn{margin-top:18px}.menu-password-wrap{margin-top:8px}.public-room{min-height:70px}.match-panel .current-server-card{margin-bottom:6px}
@media(max-width:920px){.server-menu-header{grid-template-columns:1fr}.server-menu-actions{grid-template-columns:1fr 1fr 1fr;min-width:0}.server-menu-grid{grid-template-columns:1fr}.server-overview-panel{order:-1}.server-menu-footer{grid-template-columns:1fr}.server-menu-card{padding:22px}}
@media(max-width:560px){.server-menu-screen,.create-server-modal{padding:12px}.server-menu-card,.create-server-card{border-radius:24px;padding:18px}.server-menu-actions{grid-template-columns:1fr}.server-menu-header h2,.create-server-card h2{font-size:34px}.overview-grid{grid-template-columns:1fr}.server-card{grid-template-columns:1fr}.server-card-count{font-size:22px}.server-list{max-height:360px}}


/* v6 dedicated login/server browser flow */
body.mode-login .site,
body.mode-menu .site{display:none!important}
body.mode-game .site{display:block}
body.mode-game .login-screen,
body.mode-game .server-menu-screen{display:none!important}
body.mode-login .server-menu-screen{display:none!important}
body.mode-menu .login-screen{display:none!important}
body.mode-menu .server-menu-screen:not(.hidden){display:flex!important}

.login-screen,
.server-menu-screen,
.create-server-modal,
.tutorial-screen{
  background:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px),
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.08),transparent 32%),
    radial-gradient(circle at 80% 85%,rgba(255,255,255,.055),transparent 32%),
    #050505!important;
  background-size:42px 42px,42px 42px,auto,auto,auto!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.login-screen{z-index:300!important}
.server-menu-screen{z-index:260!important;align-items:stretch!important;justify-content:center!important;overflow:auto!important}
/* Persistent HUD (coins, rank, dev-panel button) must sit ABOVE the full-screen server
   browser overlay (z 260) so they stay visible and the Dev Panel button stays clickable. */
#coinHud,#rankHud{z-index:280!important}
#devShowButton{z-index:281!important}
.create-server-modal{z-index:320!important}
.tutorial-screen{z-index:340!important}
.login-card{width:min(560px,calc(100vw - 32px))!important;padding:38px!important;border-radius:34px!important}
.login-card h2{font-size:clamp(42px,5vw,64px)!important;line-height:.92!important;letter-spacing:-2.4px!important;margin-bottom:12px!important}
.login-actions{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;margin-top:16px}.login-actions .start-btn,.login-actions .ghost-btn{margin-top:0}

.server-menu-card{
  width:min(1280px,calc(100vw - 42px))!important;
  min-height:min(840px,calc(100vh - 42px))!important;
  max-height:none!important;
  margin:auto!important;
  padding:34px!important;
  display:flex!important;
  flex-direction:column!important;
}
.server-menu-header{grid-template-columns:1fr auto!important;align-items:center!important;margin-bottom:24px!important}
.server-menu-header h2{font-size:clamp(52px,6vw,86px)!important;line-height:.86!important;letter-spacing:-4px!important;margin:0 0 12px!important}
.server-menu-actions{grid-template-columns:repeat(3,minmax(130px,1fr))!important;min-width:min(520px,40vw)!important}
.server-menu-grid{display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(360px,.72fr)!important;gap:22px!important;flex:1!important;min-height:0!important}
.server-list-panel,.server-overview-panel{border-radius:30px!important;padding:22px!important;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.04))!important}
.server-list{max-height:none!important;min-height:430px!important;overflow:auto!important;grid-template-columns:1fr!important}
.server-card{min-height:96px!important;border-radius:24px!important;padding:18px 20px!important}
.server-card strong{font-size:22px!important;letter-spacing:-.7px!important}.server-card-count{font-size:34px!important}
.server-overview-panel{display:flex!important;flex-direction:column!important}.server-overview-panel h3{font-size:40px!important;line-height:1!important;margin:8px 0 12px!important}
.overview-grid{grid-template-columns:1fr 1fr!important;margin:20px 0!important}.overview-stat{min-height:88px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}.overview-stat strong{font-size:28px!important}
.server-menu-footer{grid-template-columns:1fr!important;margin-top:auto!important}.server-menu-footer .start-btn{min-height:62px!important;font-size:16px!important}.server-menu-footer .ghost-btn{min-height:54px!important}
.empty-server-list{min-height:430px!important}.menu-password-wrap input{margin-top:8px}

/* In-game layout is only visible after a server join. Keep it focused on play, chat and match status. */
/* The 3-column rule MUST stay inside this min-width query. `body.mode-game .online-layout`
   has specificity 0,2,1 and beats the responsive `.online-layout` rules (0,1,0) at
   max-width:1180px and max-width:900px - specificity wins over source order even between two
   !important declarations. Unscoped, it forced 280px + 300px of fixed side columns onto every
   window narrower than 1180px, leaving the arena ~90px wide. Measured at a 766px viewport:
   grid-template-columns computed to "280px 91px 300px". */
@media(min-width:1181px){
  body.mode-game .online-layout{grid-template-columns:280px 1fr 300px!important}
}
/* Explicit companion at the same specificity, so the single-column layout is guaranteed to win
   below the breakpoint rather than depending on source order against .online-layout (0,1,0).
   Verified live at 766px: arena shell 90px -> 692px. */
@media(max-width:1180px){
  body.mode-game .online-layout{grid-template-columns:1fr!important}
}
body.mode-game .online-layout{gap:16px!important}.match-panel h2{font-size:28px!important}.match-panel .button-row{display:none!important}
.match-panel label[for="playerName"],#playerName,#playerName+.mini-text{display:none!important}
.right-panel .result-box:has(#publicRooms){display:none!important}
.right-panel .result-box:last-child{display:none!important}.current-server-card .ghost-btn{margin-top:12px}

.nav-btn,.switch-btn,.copy-btn,.start-btn,.ghost-btn,.danger-btn,.tiny-btn{align-items:center!important;justify-content:center!important;text-align:center!important;line-height:1.05!important;padding-top:12px!important;padding-bottom:12px!important;min-height:48px!important}.nav-btn{min-height:44px!important}

@media(max-width:900px){
  .server-menu-header{grid-template-columns:1fr!important}.server-menu-actions{grid-template-columns:1fr 1fr 1fr!important;min-width:0!important}.server-menu-grid{grid-template-columns:1fr!important}.server-overview-panel{order:-1}.server-menu-card{width:calc(100vw - 22px)!important;padding:22px!important}.server-menu-header h2{font-size:48px!important;letter-spacing:-2px!important}.server-list{min-height:320px!important}.empty-server-list{min-height:260px!important}.online-layout{grid-template-columns:1fr!important;height:auto!important}.arena-shell{height:720px!important}
}
@media(max-width:560px){.login-actions,.server-menu-actions,.overview-grid{grid-template-columns:1fr!important}.server-menu-card,.login-card{border-radius:24px!important}.server-menu-header h2{font-size:38px!important}.server-card{grid-template-columns:1fr!important}.server-card-count{font-size:24px!important}.server-list{min-height:260px!important}.login-card{padding:24px!important}.login-card h2{font-size:38px!important}}

.in-game-server-list{display:none!important}

/* v8 developer access + stats */
.global-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.global-stats span{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.45px;color:rgba(255,255,255,.64)}
.global-stats strong{color:white;margin-left:4px}
.dev-access-modal{position:fixed;inset:0;z-index:390;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.78);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.dev-access-card{width:min(560px,100%);padding:30px;border-radius:32px}.dev-access-card h2{font-size:42px;margin:0 0 8px;letter-spacing:-1.7px}.dev-access-card .start-btn{margin-top:14px}
.dev-panel{position:fixed;right:22px;bottom:22px;z-index:360;width:min(390px,calc(100vw - 44px));padding:18px;border-radius:26px;background:rgba(8,8,8,.78)!important;border-color:rgba(255,255,255,.22)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.dev-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.dev-panel-head span{font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.7)}
.dev-badge-preview{padding:12px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:14px;font-weight:900}.dev-badge-preview span:first-child,.dev-badge,.name-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.9);color:#050505;font-size:10px;font-weight:950;letter-spacing:.35px;margin-right:6px;vertical-align:middle}.dev-inline{display:grid;grid-template-columns:1fr auto;gap:8px}.dev-inline .tiny-btn,.dev-command-form .tiny-btn{margin-top:0}.dev-stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin:14px 0}.dev-stats-grid div{padding:10px;border-radius:16px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.11)}.dev-stats-grid span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.52);font-weight:950}.dev-stats-grid strong{display:block;font-size:20px;margin-top:3px}.dev-command-form{display:grid;grid-template-columns:1fr auto;gap:8px}.dev-command-form input{padding:12px 13px;border-radius:14px;font-size:13px}.dev-output{margin-top:10px;padding:10px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);font-size:12px;line-height:1.45;color:rgba(255,255,255,.7);max-height:100px;overflow:auto}.server-card.not-joinable{opacity:.72}.server-card.not-joinable .server-card-count::after{content:' VIEW';font-size:10px;margin-left:4px;color:rgba(255,255,255,.55)}
body.mode-login .dev-panel{display:none!important}
@media(max-width:560px){.dev-panel{right:12px;bottom:12px;width:calc(100vw - 24px)}.dev-stats-grid{grid-template-columns:1fr 1fr}.dev-inline,.dev-command-form{grid-template-columns:1fr}.global-stats{display:grid;grid-template-columns:1fr}}
/* v8 developer-key upload fixes */
.dev-hidden-file{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}
.dev-file-btn{margin-top:8px!important}
.dev-file-status{margin-top:10px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:850;color:rgba(255,255,255,.72);word-break:break-word}
.error.ok{color:#bfffcf!important}

.dev-file-picker{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin-top:8px}.dev-file-picker .ghost-btn{margin-top:0}.dev-access-card #devVerifyKeyBtn{margin-top:10px}.dev-access-card strong{color:#fff}

@media(max-width:560px){.dev-file-picker{grid-template-columns:1fr}}


/* v9 draggable developer tools */
.dev-panel{touch-action:none;will-change:left,top}
.dev-panel.dragging,.dev-show-button.dragging{transition:none!important;user-select:none}
.dev-panel-head{cursor:grab;user-select:none}
.dev-panel-head:active{cursor:grabbing}
.dev-show-button{position:fixed;right:22px;bottom:22px;z-index:361;width:72px;height:52px;border-radius:18px;padding:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9)!important;color:#050505!important;border:1px solid rgba(255,255,255,.5)!important;font-size:12px;font-weight:950;letter-spacing:.5px;box-shadow:0 20px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.9);cursor:grab;touch-action:none}
.dev-show-button:active{cursor:grabbing}
body.mode-login .dev-show-button{display:none!important}
@media(max-width:560px){.dev-show-button{right:12px;bottom:12px}}

/* v10 simplified flow, themes, countdown, suggestions */
body[data-theme="midnight"]{
  --line:rgba(126,166,255,.10);
  --glass:rgba(16,30,58,.62);
  --border:rgba(150,185,255,.20);
  background:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px),
    radial-gradient(circle at 18% 8%,rgba(70,120,255,.22),transparent 30%),
    radial-gradient(circle at 82% 88%,rgba(0,190,255,.12),transparent 32%),#030714!important;
}
body[data-theme="mono"]{
  --line:rgba(255,255,255,.055);
  --glass:rgba(255,255,255,.055);
  --border:rgba(255,255,255,.16);
  background:#090909!important;
}
body[data-theme="light"]{
  color:#080808;
  --line:rgba(0,0,0,.06);
  --glass:rgba(255,255,255,.72);
  --border:rgba(0,0,0,.12);
  --muted:rgba(0,0,0,.58);
  background:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px),
    radial-gradient(circle at 18% 8%,rgba(0,0,0,.055),transparent 30%),#f4f4f0!important;
}
body[data-theme="light"]::before{background:none!important}
body[data-theme="light"] .small-text,
body[data-theme="light"] .mini-text,
body[data-theme="light"] label,
body[data-theme="light"] .result-title,
body[data-theme="light"] .box-tip{color:rgba(0,0,0,.62)!important}
body[data-theme="light"] input,
body[data-theme="light"] select{background:rgba(0,0,0,.055);border-color:rgba(0,0,0,.14);color:#080808}
body[data-theme="light"] .ghost-btn,
body[data-theme="light"] .danger-btn{color:#080808;background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.14)}
body[data-theme="light"] .glass,
body[data-theme="light"] .nav,
body[data-theme="light"] .brand{box-shadow:0 30px 90px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.4)}
.settings-menu{position:fixed;right:24px;top:86px;z-index:380;width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain;padding:18px;border-radius:24px;background:rgba(8,8,8,.86)!important}
.settings-menu.hidden{display:none!important}.settings-menu label{margin-top:12px}.compact-nav .nav-btn{min-width:92px}.weapon-agree{margin-top:8px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11)}
.big-countdown{position:absolute;left:50%;top:50%;z-index:12;transform:translate(-50%,-50%);font-size:clamp(96px,17vw,230px);line-height:.85;font-weight:1000;letter-spacing:-10px;color:#fff;text-shadow:0 12px 70px rgba(255,255,255,.4),0 4px 24px rgba(0,0,0,.8);pointer-events:none;animation:countPulse .5s ease both}.big-countdown.hidden{display:none!important}@keyframes countPulse{from{opacity:0;transform:translate(-50%,-50%) scale(.72)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.suggestion-form{margin-top:18px;padding:16px;border-radius:24px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11)}.suggestion-form label{margin-top:0}.suggestion-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.suggestion-row .tiny-btn{height:52px;min-width:80px}.suggestion-row input{height:52px}
.server-menu-actions{grid-template-columns:repeat(3,minmax(120px,1fr))!important}.server-menu-footer{gap:10px!important}.server-menu-footer .ghost-btn{opacity:.88}.match-panel .button-row,#fullscreenBtn{display:none!important}.match-panel .note{margin-top:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
body.mode-menu .topbar{max-width:1280px}.server-list-title{font-size:13px;font-weight:950;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.72);display:flex;justify-content:space-between;margin-bottom:12px}.server-card{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;text-align:left}.server-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.server-badge{padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.65)}.server-badge.locked{background:rgba(255,190,70,.10);border-color:rgba(255,190,70,.20)}.overview-grid{gap:10px}.overview-stat{padding:14px;border-radius:18px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.11)}.overview-stat span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.45px;color:rgba(255,255,255,.52);font-weight:950}.overview-stat strong{display:block;margin-top:3px}
@media(max-width:900px){.settings-menu{right:12px;top:112px}.suggestion-row{grid-template-columns:1fr}.server-menu-actions{grid-template-columns:1fr!important}.compact-nav .nav-btn{min-width:0}}

.menu-theme-row{margin-top:12px;display:grid;grid-template-columns:auto minmax(160px,240px);align-items:center;gap:10px;width:max-content;max-width:100%}.menu-theme-row label{margin:0;font-size:11px;color:rgba(255,255,255,.58);font-weight:950;text-transform:uppercase;letter-spacing:.45px}.menu-theme-row select{padding:10px 12px;border-radius:14px;font-size:13px}
@media(max-width:720px){.menu-theme-row{grid-template-columns:1fr;width:100%}}

.tool-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.tool-links .ghost-btn{margin-top:0}


/* v13 shooting feedback, ammo bar, and private suggestion text */
.cooldown-wrap{position:absolute;left:18px;bottom:58px;width:min(360px,42vw);z-index:5;opacity:.98}
.cooldown-top{display:flex;justify-content:space-between;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.45px;color:rgba(255,255,255,.86);margin-bottom:7px;text-shadow:0 1px 16px rgba(0,0,0,.65)}
.cooldown-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.32)}
.cooldown-fill{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.45),#fff);transition:width .04s linear,opacity .12s ease;box-shadow:0 0 18px rgba(255,255,255,.42)}
.cooldown-wrap.cooldown-ready .cooldown-fill{opacity:.95;box-shadow:0 0 24px rgba(255,255,255,.55)}
.arena-shell.shot-pulse::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.20),transparent 17%,transparent 100%);animation:shotPulse .12s ease-out both}
@keyframes shotPulse{from{opacity:1}to{opacity:0}}
@media(max-width:560px){.cooldown-wrap{left:12px;bottom:56px;width:calc(100% - 24px)}.health-wrap{bottom:18px!important}.weapon-tag{bottom:92px!important}}
/* v13 bot practice card + ammo/smoke hint */
.bot-practice-card{border-style:dashed!important;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055))!important}
.bot-practice-card .server-card-count{font-size:18px;letter-spacing:.8px}


/* ---- Access top nav tabs from the lobby (menu mode) ---- */
body.mode-menu .site{display:block!important}
body.mode-menu .site .page{display:none!important}
body.mode-menu .topbar{position:fixed;top:0;left:0;right:0;max-width:none;margin:0;z-index:400;background:var(--glass,rgba(12,14,20,.92));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 18px;border-bottom:1px solid var(--border,rgba(255,255,255,.1))}
body.mode-menu.viewing-page .site .page.active{display:block!important;padding-top:78px}
body.mode-menu.viewing-page .server-menu-screen{display:none!important}

/* ---- Extra themes ---- */
body[data-theme='crimson']{--line:rgba(255,90,90,.10);--glass:rgba(40,14,16,.62);--border:rgba(255,120,120,.20);background:radial-gradient(circle at 20% 10%,rgba(200,30,40,.22),transparent 42%),radial-gradient(circle at 82% 90%,rgba(120,0,20,.20),transparent 42%),#140809 fixed}
body[data-theme='ocean']{--line:rgba(60,200,220,.10);--glass:rgba(10,32,40,.62);--border:rgba(90,210,230,.20);background:radial-gradient(circle at 20% 10%,rgba(0,160,190,.22),transparent 42%),radial-gradient(circle at 82% 90%,rgba(0,110,150,.20),transparent 42%),#07161c fixed}
body[data-theme='forest']{--line:rgba(120,220,120,.10);--glass:rgba(14,32,18,.62);--border:rgba(140,230,140,.20);background:radial-gradient(circle at 20% 10%,rgba(40,180,70,.22),transparent 42%),radial-gradient(circle at 82% 90%,rgba(20,110,50,.20),transparent 42%),#0a1610 fixed}
body[data-theme='purple']{--line:rgba(180,120,255,.10);--glass:rgba(26,16,40,.62);--border:rgba(190,140,255,.20);background:radial-gradient(circle at 20% 10%,rgba(150,60,255,.22),transparent 42%),radial-gradient(circle at 82% 90%,rgba(90,20,180,.20),transparent 42%),#100a1a fixed}
body[data-theme='amoled']{--line:rgba(255,255,255,.05);--glass:rgba(10,10,10,.75);--border:rgba(255,255,255,.12);background:#000 fixed}
body[data-theme='sunset']{--line:rgba(255,170,90,.10);--glass:rgba(40,22,14,.62);--border:rgba(255,180,110,.22);background:radial-gradient(circle at 20% 10%,rgba(255,120,40,.22),transparent 42%),radial-gradient(circle at 82% 90%,rgba(200,40,80,.20),transparent 42%),#170d09 fixed}

/* ===== Animated / patterned themes ===== */
/* Nebula: drifting colour clouds + parallax starfield */
body[data-theme="nebula"]{--line:rgba(255,255,255,.09);--glass:rgba(22,18,42,.72);--border:rgba(160,130,255,.22);
  background-color:#0a0716;
  background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.9),transparent 60%),radial-gradient(1.6px 1.6px at 70% 60%,rgba(190,210,255,.8),transparent 60%),radial-gradient(1.8px 1.8px at 45% 80%,rgba(255,255,255,.7),transparent 60%),radial-gradient(circle at 25% 25%,rgba(120,60,220,.42),transparent 55%),radial-gradient(circle at 75% 70%,rgba(220,50,140,.36),transparent 55%),linear-gradient(160deg,#0a0716,#140a2c 60%,#0a0716);
  background-size:520px 520px,380px 380px,640px 640px,180% 180%,180% 180%,100% 100%;
  animation:nebulaDrift 42s ease-in-out infinite alternate;}
@keyframes nebulaDrift{0%{background-position:0 0,0 0,0 0,0% 50%,100% 50%,0 0}100%{background-position:-260px -140px,180px -90px,-120px 160px,100% 50%,0% 50%,0 0}}

/* Cyber Grid: scrolling neon grid with horizon glow */
body[data-theme="grid"]{--line:rgba(0,255,210,.14);--glass:rgba(6,20,24,.74);--border:rgba(0,255,210,.24);
  background-color:#03090c;
  background-image:linear-gradient(rgba(0,255,210,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,210,.14) 1px,transparent 1px),radial-gradient(ellipse at 50% 108%,rgba(0,255,210,.30),transparent 62%);
  background-size:46px 46px,46px 46px,100% 70%;
  background-repeat:repeat,repeat,no-repeat;
  background-position:0 0,0 0,center bottom;
  animation:gridScroll 2.6s linear infinite;}
@keyframes gridScroll{from{background-position:0 0,0 0,center bottom}to{background-position:0 46px,46px 0,center bottom}}

/* Aurora: slow flowing polar light ribbons */
body[data-theme="aurora"]{--line:rgba(255,255,255,.10);--glass:rgba(8,26,30,.70);--border:rgba(90,255,190,.20);
  background-color:#04121a;
  background-image:linear-gradient(115deg,transparent 20%,rgba(60,255,180,.30) 35%,transparent 52%),linear-gradient(155deg,transparent 30%,rgba(80,140,255,.28) 52%,transparent 70%),linear-gradient(95deg,transparent 40%,rgba(190,80,255,.22) 60%,transparent 78%),linear-gradient(180deg,#04121a,#061f2b 55%,#04121a);
  background-size:260% 260%,240% 240%,220% 220%,100% 100%;
  animation:auroraFlow 26s ease-in-out infinite alternate;}
@keyframes auroraFlow{0%{background-position:0% 50%,100% 40%,50% 60%,0 0}100%{background-position:100% 50%,0% 60%,50% 30%,0 0}}

/* Carbon: real woven carbon-fibre weave (static, tactile) */
body[data-theme="carbon"]{--line:rgba(255,255,255,.07);--glass:rgba(18,20,24,.80);--border:rgba(255,255,255,.12);
  background-color:#0d0f12;
  background-image:repeating-linear-gradient(45deg,#16191e 0 5px,#0e1114 5px 10px),repeating-linear-gradient(-45deg,rgba(255,255,255,.045) 0 5px,transparent 5px 10px);
  background-size:20px 20px,20px 20px;
  background-attachment:fixed;}

/* Lava: molten blobs slowly churning */
body[data-theme="lava"]{--line:rgba(255,180,80,.12);--glass:rgba(30,12,6,.76);--border:rgba(255,120,40,.24);
  background-color:#120603;
  background-image:radial-gradient(circle at 18% 28%,rgba(255,90,20,.50),transparent 45%),radial-gradient(circle at 82% 34%,rgba(255,170,30,.38),transparent 46%),radial-gradient(circle at 46% 82%,rgba(220,30,60,.42),transparent 48%),linear-gradient(180deg,#120603,#240a04 60%,#120603);
  background-size:170% 170%,150% 150%,190% 190%,100% 100%;
  animation:lavaChurn 30s ease-in-out infinite alternate;}
@keyframes lavaChurn{0%{background-position:0% 0%,100% 20%,30% 100%,0 0}50%{background-position:60% 40%,20% 70%,80% 30%,0 0}100%{background-position:100% 80%,0% 100%,10% 0%,0 0}}

/* Matrix: falling glyph rain */
body[data-theme="matrix"]{--line:rgba(0,255,90,.12);--glass:rgba(4,16,8,.80);--border:rgba(0,255,90,.22);
  background-color:#020703;
  background-image:repeating-linear-gradient(90deg,rgba(0,255,90,.10) 0 1px,transparent 1px 14px),linear-gradient(180deg,rgba(0,255,90,.20),transparent 42%),linear-gradient(180deg,#020703,#04140a 60%,#020703);
  background-size:14px 100%,100% 220px,100% 100%;
  animation:matrixRain 3.4s linear infinite;}
@keyframes matrixRain{from{background-position:0 0,0 -220px,0 0}to{background-position:0 0,0 100vh,0 0}}

@media (prefers-reduced-motion:reduce){body[data-theme="nebula"],body[data-theme="grid"],body[data-theme="aurora"],body[data-theme="lava"],body[data-theme="matrix"]{animation:none}}
/* Animated themes: pause the heavy body animation during the 3D game (background-attachment:fixed
   forced full-screen repaints -> jank), and let the animation show through the server-browser
   overlay instead of hiding behind a near-opaque dark layer. */
body.mode-game[data-theme="nebula"],body.mode-game[data-theme="grid"],body.mode-game[data-theme="aurora"],body.mode-game[data-theme="lava"],body.mode-game[data-theme="matrix"]{animation:none!important}
body[data-theme="nebula"] .server-menu-screen,body[data-theme="grid"] .server-menu-screen,body[data-theme="aurora"] .server-menu-screen,body[data-theme="lava"] .server-menu-screen,body[data-theme="matrix"] .server-menu-screen{background:rgba(0,0,0,.45)}


/* === Mobile layout: gate on SCREEN WIDTH, not touch capability (touchscreen PCs kept the
   desktop sidebar broken when this keyed off touch). Placed last so it overrides base rules. === */
@media(max-width:900px){
  body.mode-game .topbar{display:none!important}
  body.mode-game .site{padding-top:0!important}
  body.mode-game .online-layout{display:flex!important;flex-direction:column!important;height:auto!important}
  body.mode-game .arena-shell{order:-1;height:100dvh!important;min-height:100dvh!important;border-radius:0!important}
  body.mode-game .online-panel{margin-top:10px}
  /* Lock page scroll while in the arena: a one-finger drag to look around (spectate) must not
     scroll the themed page background into view - that was the blue/green "flood". */
  body.mode-game{overflow:hidden!important;overscroll-behavior:none!important}
  body.mode-game .arena-shell{touch-action:none!important;-webkit-user-select:none!important;user-select:none!important}
  body.touch-device.mode-game #mobileArenaBar{display:flex!important}
  /* Menu: never let the fixed top nav sit on top of the server browser / modals. */
  /* Only the true focus modals (create / tutorial) hide the nav. The server browser keeps it,
     so you can still reach Play / Converter / Profile / Settings on mobile. */
  body:has(.create-server-modal:not(.hidden)) .topbar,body:has(.tutorial-screen:not(.hidden)) .topbar{display:none!important}
  body.mode-menu .server-menu-screen{align-items:flex-start!important;padding-top:58px!important}
  /* Compact the lobby nav into one short scrollable row so it can't eat half the screen. */
  body.mode-menu .topbar{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:500!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:8px!important;padding:7px 10px!important;background:var(--glass,rgba(12,14,20,.96))}
  body.mode-menu .brand{flex:0 0 auto!important;font-size:11px!important;padding:7px 9px!important}
  body.mode-menu .nav{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:6px!important;-webkit-overflow-scrolling:touch}
  body.mode-menu .nav .nav-btn{flex:0 0 auto!important;min-width:0!important;padding:9px 12px!important;font-size:12px!important;min-height:38px!important}
}


/* ============================================================================
   THEME ANIMATION - ROOT CAUSE FIX
   html had no background of its own, so the BODY background was propagated to the root
   canvas. Browsers paint that canvas background as a static layer and never re-run a
   background-position animation on it: every animated theme's computed value advanced each
   frame while nothing on screen ever moved. Giving html its own background stops the
   propagation, so the body paints and animates like a normal element. This also revives the
   default dark theme's gridMove scroll, which had never animated either.
   ============================================================================ */
html{background:#050505}
html:has(body[data-theme="light"]){background:#eef1f5}
html:has(body[data-theme="mono"]){background:#090909}
html:has(body[data-theme="amoled"]){background:#000}

/* ============================================================================
   LIGHT THEME - finished properly
   The original only recoloured the page background and a few inputs. Every surface built on a
   white-alpha fill (cards, server rows, result boxes, panels) stayed white-on-white, and the
   Settings and Dev panels were pinned dark by !important while the light rules forced their
   text dark - black text on a black panel. The in-game HUD is deliberately left dark: it
   overlays the 3D arena, which stays dark for visibility.
   ============================================================================ */
body[data-theme="light"] .settings-menu,
body[data-theme="light"] .dev-panel{background:rgba(252,252,253,.97)!important;border-color:rgba(0,0,0,.12)!important;color:#080808}
body[data-theme="light"] .settings-menu label,
body[data-theme="light"] .settings-menu .mini-text,
body[data-theme="light"] .dev-panel,
body[data-theme="light"] .dev-panel *{color:#080808}
body[data-theme="light"] .result-box,
body[data-theme="light"] .score-row,
body[data-theme="light"] .public-room,
body[data-theme="light"] .server-card,
body[data-theme="light"] .overview-stat,
body[data-theme="light"] .server-list-panel,
body[data-theme="light"] .server-overview-panel,
body[data-theme="light"] .formula,
body[data-theme="light"] .game-pill,
body[data-theme="light"] .switch-buttons,
body[data-theme="light"] .weapon-agree,
body[data-theme="light"] .chat-log,
body[data-theme="light"] .tutorial-chip,
body[data-theme="light"] .tutorial-visual,
body[data-theme="light"] .tutorial-step-card,
body[data-theme="light"] .status-line{background:rgba(0,0,0,.045)!important;border-color:rgba(0,0,0,.12)!important;color:#080808}
body[data-theme="light"] .server-card:hover,
body[data-theme="light"] .server-card.selected,
body[data-theme="light"] .public-room:hover,
body[data-theme="light"] .public-room.selected,
body[data-theme="light"] .score-row.me{background:rgba(0,0,0,.09)!important;border-color:rgba(0,0,0,.24)!important}
body[data-theme="light"] .server-card strong,
body[data-theme="light"] .server-card-count,
body[data-theme="light"] .score-name,
body[data-theme="light"] .score-value,
body[data-theme="light"] .overview-stat strong,
body[data-theme="light"] .chat-name,
body[data-theme="light"] .result-value,
body[data-theme="light"] .empty-server-list strong,
body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3{color:#080808!important}
body[data-theme="light"] .score-meta,
body[data-theme="light"] .chat-msg,
body[data-theme="light"] .note,
body[data-theme="light"] .server-menu-note,
body[data-theme="light"] .server-list-title,
body[data-theme="light"] .overview-stat span,
body[data-theme="light"] .empty-server-list,
body[data-theme="light"] .eyebrow,
body[data-theme="light"] .global-stats{color:rgba(0,0,0,.62)!important}
body[data-theme="light"] .empty-server-list{background:rgba(0,0,0,.03)!important;border-color:rgba(0,0,0,.16)!important}
/* A near-black scrim over a light page reads as a rendering bug - use a light scrim. */
body[data-theme="light"] .server-menu-screen,
body[data-theme="light"] .create-server-modal,
body[data-theme="light"] .tutorial-screen,
body[data-theme="light"] .login-screen{background:rgba(226,230,236,.88)!important}
/* The primary button is white-on-white in this theme without an explicit dark fill. */
body[data-theme="light"] .start-btn{background:#101216!important;color:#fff!important;border-color:#101216!important}
body[data-theme="light"] .start-btn:hover{filter:brightness(1.25)}
body[data-theme="light"] .big-link{color:#fff!important}



/* ---- Crosshair editor ------------------------------------------------------------------ */
.xh-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);padding:18px}
.xh-modal.hidden{display:none}
.xh-card{width:min(760px,96vw);max-height:92vh;overflow:auto;border-radius:18px;padding:20px}
.xh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.xh-head h2{margin:0;font-size:19px}
.xh-body{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.xh-preview-wrap{text-align:center}
.xh-preview-wrap canvas{width:180px;height:180px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,#3a3f46,#23272c 60%,#191c20);display:block}
.xh-controls{display:flex;flex-direction:column;gap:6px}
.xh-controls label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;opacity:.78;margin-top:6px}
.xh-controls input[type=range]{width:100%}
.xh-controls input[type=color]{width:64px;height:32px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:none;cursor:pointer}
.xh-val{float:right;font-variant-numeric:tabular-nums;opacity:.95}
.xh-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.xh-row input[type=text]{flex:1 1 220px;min-width:0}
.xh-check{display:flex;align-items:center;gap:6px;margin:0!important;text-transform:none!important;letter-spacing:0!important;font-size:13px!important;opacity:1!important}
.xh-check input{margin:0}
.xh-codes{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10)}
.xh-codes label{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;opacity:.78;margin-top:10px}
#xhStatus{opacity:.85}
#xhStatus.xh-bad{color:#ff8f8f;opacity:1}
@media(max-width:640px){.xh-body{grid-template-columns:1fr}.xh-preview-wrap{margin:0 auto}}

/* ---- Team chat ------------------------------------------------------------------------- */
.chat-scope,.gc-scope{color:#7bd88f;font-weight:900;letter-spacing:.3px}
.chat-msg.chat-team .chat-name,.gc-msg.gc-team .gc-name{color:#7bd88f}
.gc-say-team{color:#7bd88f}

/* ---- Animated themes: the menu surfaces never scrolled -------------------------------------
   .server-menu-screen / .create-server-modal / .login-screen / .tutorial-screen each paint
   their OWN copy of the 42px grid and sit on top of <body>. The gridMove animation was only
   ever attached to <body>, so on every menu you were looking at these surfaces' static grid
   while the body animated invisibly underneath. Attach the scroll to the surfaces themselves.
   One full 42px tile per cycle, so it wraps seamlessly. Only the two grid layers move; the
   remaining layers are pinned so the rest of the design does not shift. */
@keyframes surfaceGridScroll{
  from{background-position:0 0,0 0,0% 0%,0% 0%,0% 0%}
  to{background-position:42px 42px,42px 42px,0% 0%,0% 0%,0% 0%}
}
.login-screen,.server-menu-screen,.create-server-modal,.tutorial-screen{
  animation:surfaceGridScroll 6s linear infinite
}
/* Not while a match is running - same reasoning as the body theme animations. */
body.mode-game .login-screen,body.mode-game .server-menu-screen,
body.mode-game .create-server-modal,body.mode-game .tutorial-screen{animation:none}
@media (prefers-reduced-motion:reduce){
  .login-screen,.server-menu-screen,.create-server-modal,.tutorial-screen{animation:none}
}

/* ---- Animated themes must survive the reduced-motion preference ----------------------------
   These five themes are an explicit opt-in: the picker literally labels them "(animated)".
   The reduced-motion media query was cancelling all five, so on any machine with the OS
   "animation effects" setting turned off they rendered as flat colour with no indication why -
   and no amount of fixing HOW the background paints could ever show, because the animation was
   never allowed to start. Restored here: later in source order at equal specificity, so these
   win over the media query. Every other animation on the site still honours the preference,
   and body.mode-game{animation:none} is more specific, so matches stay still. */
body[data-theme="nebula"]{animation:nebulaDrift 42s ease-in-out infinite alternate}
body[data-theme="aurora"]{animation:auroraFlow 26s ease-in-out infinite alternate}
body[data-theme="grid"]{animation:gridScroll 2.6s linear infinite}
body[data-theme="lava"]{animation:lavaChurn 30s ease-in-out infinite alternate}
body[data-theme="matrix"]{animation:matrixRain 3.4s linear infinite}
.login-screen,.server-menu-screen,.create-server-modal,.tutorial-screen{
  animation:surfaceGridScroll 6s linear infinite}