:root { --red:#ef8195; --blue:#8cb8cd; --cyan:#68dbea; --ink:#111416; --panel:#1b1f22; --line:#3f464b; --muted:#939ea5; }
/* Keep only actionable UI and match information; retain legacy hooks for state updates. */
.terminal::before,#tickets>div,#movementMode,#cameraMode { display:none !important; }
#authHelp:empty,#authError:empty,#joinError:empty,#buyHint:empty,#leaderboardStatus:empty,#network:empty { display:none; }
.auth-tabs { display:flex; gap:8px; margin-bottom:20px; }
.auth-tabs button,#logout,#showLeaderboard { padding:9px 12px; background:transparent; color:var(--muted); border:1px solid var(--line); font:10px ui-monospace,monospace; }
.auth-tabs .selected { border-color:var(--cyan); color:var(--cyan); background:#29343c; }
#authSubmit { width:100%; padding:13px; background:var(--cyan); color:var(--ink); border:0; font:700 11px ui-monospace,monospace; }
#authSubmit:disabled { opacity:.5; cursor:wait; }
.auth-help { font-size:11px; color:var(--muted); }
#authError { color:var(--red); font-size:12px; min-height:18px; }
#signedIn { margin-bottom:22px; }
#accountName,#accountPoints { display:block; } #accountPoints { margin:6px 0 12px; color:var(--cyan); font:10px ui-monospace,monospace; }
#showLeaderboard { width:100%; margin:10px 0 24px; }
#closeLeaderboard { position:absolute;right:15px;top:12px;border:0;background:none;color:var(--muted);font-size:26px; }
.leaderboard-scroll { overflow:auto; max-height:50vh; }
#leaderboard table { width:100%;border-collapse:collapse;font:12px ui-monospace,monospace; }
#leaderboard th,#leaderboard td { text-align:left;padding:12px 8px;border-bottom:1px solid var(--line); }
#leaderboard th { color:var(--muted); font-size:10px; }
.own-rank { color:var(--cyan); background:#29343c; }
#personalRank { color:var(--cyan); }
#returnToMenu { pointer-events:auto; position:fixed;right:20px;top:20px;background:#14181be8;border:1px solid var(--line);color:var(--muted);padding:8px;font:9px ui-monospace,monospace; }
#rankedStatus { position:fixed;left:50%;top:67px;transform:translateX(-50%);font:8px ui-monospace,monospace;color:var(--cyan);text-shadow:0 1px 2px #000; }
* { box-sizing:border-box; }
body { margin:0; overflow:hidden; background:var(--ink); color:#d6dee3; font:14px/1.5 system-ui,sans-serif; }
canvas { display:block; }
.hidden { display:none!important; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,.server-card:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.menu-shell { position:fixed; inset:0; z-index:10; display:grid; grid-template-columns:1fr minmax(390px,490px); align-items:center; gap:9vw; padding:7vw; overflow:auto; background:linear-gradient(90deg,rgba(12,19,29,.92),rgba(12,19,29,.97)),repeating-conic-gradient(from 25deg at 30% 45%,#506370 0% 12%,#232a2e 12% 24%,#35424a 24% 35%,#171b1e 35% 50%); background-size:auto,390px 310px; }
.menu-shell::before { content:''; position:absolute; inset:24px; border:1px solid #65768222; pointer-events:none; }
.identity { position:relative; max-width:570px; }
.eyebrow,label { font:600 10px/1.5 ui-monospace,monospace; color:var(--muted); letter-spacing:.17em; text-transform:uppercase; }
.identity h1 { font-size:clamp(40px,5.7vw,78px); line-height:1; letter-spacing:-.055em; font-weight:750; margin:25px 0; }
.identity h1 i { display:block; color:var(--cyan); font-style:normal; }
.identity>p { color:#b3bcc2; font-size:17px; max-width:360px; }
.operation-number { margin-top:32px; font:11px ui-monospace,monospace; color:#76828a; letter-spacing:.1em; }
.brief { display:flex; flex-direction:column; gap:10px; max-width:420px; margin-top:44px; padding:18px 0 18px 20px; border-left:2px solid #60717c; }
.brief b { font:600 10px ui-monospace,monospace; letter-spacing:.16em; color:var(--cyan); }
.brief span { font-size:13px; color:var(--muted); }
.terminal { position:relative; padding:30px; border:1px solid var(--line); background:#191d20ed; box-shadow:0 16px 60px #0004; }
.terminal::before { content:'OPERATIONS / DEPLOYMENT'; display:block; font:10px ui-monospace,monospace; letter-spacing:.17em; color:#a3b6c2; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:24px; }
input { display:block; width:100%; margin:8px 0 25px; padding:13px; background:#101416; color:#d6dee3; border:1px solid #485660; border-radius:0; }
input::placeholder { color:#6c777e; font-size:12px; letter-spacing:.08em; }
.server-heading { display:flex; justify-content:space-between; gap:8px; margin-bottom:12px; font:10px ui-monospace,monospace; letter-spacing:.1em; color:var(--muted); }
.server-heading small { font:inherit; color:var(--cyan); }
.server-card { display:grid; grid-template-columns:1fr auto; width:100%; color:inherit; text-align:left; gap:6px; padding:17px 15px; margin:8px 0; border:1px solid #384147; background:#202529; cursor:pointer; transition:background .15s,border-color .15s; }
.server-card:hover,.server-card.selected { border-color:#859fb1; background:#2a3238; }
.server-card.selected { box-shadow:inset 3px 0 var(--cyan); }
.server-card.full { opacity:.45; cursor:not-allowed; }
.server-card b { font-size:14px; font-weight:600; }
.server-card small { display:block; font:9px/1.6 ui-monospace,monospace; color:#96a3ac; margin-top:5px; }
.server-card .count { font:16px ui-monospace,monospace; }
.server-card .teams { grid-column:1/-1; display:flex; gap:18px; font:10px ui-monospace,monospace; margin-top:7px; }
.server-card.loading { display:block; font:11px ui-monospace,monospace; color:var(--muted); }
#deploy { width:100%; margin-top:16px; padding:14px; border:1px solid #a4bac9; background:#8ba5b7; color:#121a20; font:700 11px ui-monospace,monospace; letter-spacing:.15em; }
#deploy:hover { background:#a4bac9; }
#deploy:disabled { background:#2c373e; border-color:#39444b; color:#6c7982; cursor:not-allowed; }
.controls { display:block; margin-top:18px; color:#7d8991; text-align:center; font:9px/1.8 ui-monospace,monospace; }
#joinError { min-height:18px; color:var(--red); text-align:center; font-size:12px; margin-top:8px; }
.red { color:var(--red); } .blue { color:var(--blue); }
#hud { pointer-events:none; }
#tickets,#teamIdentity,#minimapWrap,#status>div,#base,#basePrompt { background:#14181be8; border:1px solid #4b586180; }
#tickets { position:fixed; top:20px; left:50%; transform:translateX(-50%); display:flex; align-items:center; font:600 17px ui-monospace,monospace; }
#tickets>span { padding:11px 20px; }
#tickets>div { text-align:center; min-width:125px; padding:6px 12px; border-left:1px solid #49576055; border-right:1px solid #49576055; }
#tickets em { display:block; font:8px ui-monospace,monospace; letter-spacing:.15em; color:var(--muted); }
#tickets strong { font:10px ui-monospace,monospace; }
#minimapWrap { position:fixed; left:20px; top:20px; width:222px; }
#minimapWrap>div { padding:6px 9px; border-bottom:1px solid #3b4851; font:9px ui-monospace,monospace; letter-spacing:.14em; color:#9dabb5; }
#minimap { width:220px; height:122px; }
#teamIdentity { position:fixed; left:20px; top:151px; padding:6px 10px; border-left:4px solid var(--cyan); }
#teamIdentity small { font:8px ui-monospace,monospace; color:var(--muted); margin-right:10px; }
#teamIdentity strong { font:600 11px ui-monospace,monospace; }
.team-red #teamIdentity { border-left-color:var(--red); color:#ff8694; background:#30141dea; } .team-blue #teamIdentity { border-left-color:var(--blue); color:#69cfff; background:#102a40ea; }
.team-red #minimapWrap { border-color:#dd5267; } .team-blue #minimapWrap { border-color:#48b9ee; }
#waiting { position:fixed; top:83px; left:50%; transform:translateX(-50%); width:330px; text-align:center; background:#21272beb; border:1px solid #546571; padding:10px; font:10px ui-monospace,monospace; color:var(--cyan); }
#waiting small { display:block; margin-top:5px; font:10px/1.5 system-ui,sans-serif; color:var(--muted); }
#objective { position:fixed; top:83px; left:50%; transform:translateX(-50%); text-align:center; width:230px; background:#161a1dbf; padding:7px 12px; }
#objective>div { height:3px; background:#434d54; margin:5px 0; }
#capture { display:block; height:100%; width:0; background:var(--cyan); }
#objective span { font:9px ui-monospace,monospace; }
#crosshair { position:fixed; left:50%; top:50%; width:18px; height:18px; transform:translate(-50%,-50%); filter:drop-shadow(0 1px 1px #000); }
#crosshair i { position:absolute; background:#d8e0e5; }
#crosshair i:first-child { width:14px; height:1px; left:2px; top:8px; }
#crosshair i:last-child { width:1px; height:14px; left:8px; top:2px; }
#status { position:fixed; bottom:20px; left:20px; display:flex; gap:5px; }
#status>div { padding:9px 13px; min-width:78px; border-top:2px solid #768995; }
#status label,#status b { display:block; }
#status label { font-size:8px; }
#status b { font:600 16px/1.7 ui-monospace,monospace; }
#base { position:fixed; bottom:20px; right:20px; width:220px; padding:10px 12px; }
#base span { display:flex; gap:5px; font:9px ui-monospace,monospace; color:var(--muted); }
#base b { margin-left:auto; }
#base .base-meter+.base-meter { margin-top:10px; }
.base-meter>i { display:block; margin-top:5px; height:3px; background:#3a454c; }
.base-meter em { display:block; width:100%; height:100%; transition:width .16s linear; }
.red-meter em { background:var(--red); } .blue-meter em { background:var(--blue); }
#stamina { position:fixed; bottom:112px; left:20px; width:160px; }
#stamina label { font-size:8px; }
#stamina>div { height:3px; background:#444d53aa; margin-top:4px; }
#stamina i { display:block; height:100%; background:var(--cyan); }
#movementMode,#cameraMode { position:fixed; bottom:94px; font:9px ui-monospace,monospace; color:#b0bcc4; text-shadow:0 1px 2px #000; }
#movementMode { left:20px; } #cameraMode { right:20px; }
#basePrompt { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); padding:8px 12px; font:10px ui-monospace,monospace; }
#feed { position:fixed; right:20px; top:85px; text-align:right; font:11px/1.8 system-ui,sans-serif; }
.feed-item { margin:4px 0; padding:2px 8px; background:#171c20bf; animation:fade 5s forwards; }
@keyframes fade { 80%{opacity:1} 100%{opacity:0} }
.panel { position:fixed; z-index:15; left:50%; top:50%; transform:translate(-50%,-50%); width:min(760px,94vw); max-height:90vh; overflow:auto; padding:28px; background:#191e21fa; border:1px solid #5b6b75; box-shadow:0 24px 80px #0008; }
.panel h2 { font-size:24px; font-weight:600; letter-spacing:-.03em; margin:8px 0; }
.panel>p { font-size:12px; color:var(--muted); }
#closeBuy { position:absolute; right:18px; top:12px; border:0; background:none; color:#b0bcc4; font-size:26px; }
#weapons { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.weapon-card { width:100%; color:inherit; text-align:left; padding:16px; border:1px solid #3c4952; background:#20272c; cursor:pointer; }
.weapon-card:hover,.weapon-card.equipped { border-color:var(--cyan); }
.weapon-card img { display:block; width:100%; height:100px; object-fit:contain; margin:0 0 12px; }
.weapon-card b { display:block; font-size:14px; font-weight:600; }
.weapon-card span { display:block; margin:5px 0; color:var(--cyan); font:10px ui-monospace,monospace; }
.weapon-card small { font:10px/1.8 ui-monospace,monospace; color:#9aa8b2; }
.weapon-card.disabled { opacity:.42; cursor:not-allowed; }
#respawn.ready { cursor:pointer; padding:12px; border:1px solid var(--cyan); text-align:center; color:var(--cyan); }
#banner { position:fixed; z-index:20; inset:0; background:#0d1114ee; display:grid; place-items:center; text-align:center; font-size:38px; letter-spacing:.05em; font-weight:600; }
#banner small { font-size:15px; color:var(--muted); }
#banner button { display:block; margin:28px auto; padding:14px 20px; background:#28353d; border:1px solid #6c8290; color:#c8d5de; font:11px ui-monospace,monospace; }
#notice { position:fixed; z-index:30; bottom:150px; left:50%; transform:translateX(-50%); padding:10px 16px; background:#1e262bf2; border:1px solid #6f8695; font:11px ui-monospace,monospace; }
#scope { position:fixed; inset:0; z-index:4; background:radial-gradient(circle at center,transparent 0 32%,#050708fc 32.7%); pointer-events:none; }
.scope-ring { position:absolute; left:50%; top:50%; width:min(65vw,65vh); height:min(65vw,65vh); transform:translate(-50%,-50%); border:2px solid #647580; border-radius:50%; }
#scope>i { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#1e262b; }
.scope-h { width:min(65vw,65vh); height:1px; } .scope-v { height:min(65vw,65vh); width:1px; }
#scope>span { position:absolute; left:50%; bottom:10%; transform:translateX(-50%); font:10px ui-monospace,monospace; color:var(--muted); }
body.scoped #crosshair { display:none; }
#adsSight { position:fixed; left:50%; top:50%; width:4px; height:4px; transform:translate(-50%,-50%); background:#d7876a; border-radius:50%; box-shadow:0 0 3px #bb7752; pointer-events:none; }
body.aiming #crosshair { display:none; }
@media(max-width:1000px) { .menu-shell { gap:5vw; padding:6vw; grid-template-columns:1fr 390px; } #tickets>span { padding:10px 12px; } #tickets>div { min-width:105px; } }
@media(max-width:760px) { .menu-shell { grid-template-columns:1fr; padding:24px; } .identity { display:none; } .terminal { width:min(490px,100%); margin:auto; } #minimapWrap { top:74px; transform:scale(.7); transform-origin:top left; } #teamIdentity { top:184px; } #tickets { top:12px; } #tickets>span { font-size:13px; } #status>div { padding:7px; min-width:55px; } #status b { font-size:12px; } #base { width:160px; right:10px; } #weapons { grid-template-columns:1fr; } .weapon-card img { height:75px; } #feed { top:220px; } }