:root{--bg:#151c1a;--panel:#1b2421;--line:#38423b;--text:#e8ece2;--muted:#9ba69d;--accent:#d4ef81;--blue:#72c2df;--red:#ee916b;font-family:Inter,"Segoe UI","Yu Gothic UI",Meiryo,sans-serif;color:var(--text);background:var(--bg);font-size:14px;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}#scene{position:fixed;inset:0;width:100%;height:100%;display:block}.vignette{position:fixed;inset:0;background:linear-gradient(90deg,rgba(15,23,20,.97),rgba(15,23,20,.58) 48%,rgba(15,23,20,.18)),linear-gradient(0deg,#151c1a 5%,transparent 95%);pointer-events:none}#menu{position:relative;max-width:1500px;margin:auto;padding:0 4.5vw}header{height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #78857040;gap:20px}.brand{font-size:23px;letter-spacing:3px;font-weight:800;display:flex;align-items:center;gap:12px}.brand-icon{display:inline-flex;width:32px;height:32px;background:var(--accent);color:var(--bg);align-items:center;justify-content:center;font-style:italic;font-size:29px;letter-spacing:-4px;padding-right:5px}.alpha{font-size:9px;color:var(--muted);letter-spacing:1px;border-left:1px solid var(--line);padding-left:15px;margin-left:5px}.header-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:#c4cebf}.live-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #c3ea7170}.build-tag{margin-left:20px;font-size:9px;letter-spacing:1px;border:1px solid #abb89560;padding:6px 10px}.hero{padding:38px 0 29px}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:600;color:var(--accent);margin-bottom:16px}h1{font-size:clamp(34px,4vw,59px);font-weight:650;line-height:1.3;letter-spacing:-2px;margin:0 0 15px}h1 em{font-style:normal;color:var(--accent)}.hero p{color:#b7c0b4;line-height:1.9;font-size:13px;margin:0}.hero-tags{display:flex;gap:20px;font-size:9px;letter-spacing:1.5px;color:#c6d0bd;margin-top:22px}.lobby-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:28px;align-items:start}.section-label{display:flex;align-items:center;justify-content:space-between;margin:0 0 13px;font-size:12px;letter-spacing:1px}.section-label b{color:var(--accent);font-family:monospace;font-size:11px;margin-right:12px}.section-label small{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.mode-card{position:relative;text-align:left;color:var(--text);min-height:155px;padding:17px;border:1px solid #5d6b565c;background:linear-gradient(135deg,#263029ee,#1b2421f5);transition:border-color .2s,background .2s;overflow:hidden}.mode-card:hover{border-color:#b2c18b;background:#303b2b}.mode-card.active{border-color:var(--accent);background:linear-gradient(135deg,#35422b,#222f24)}.mode-card.active:after{content:'✓';position:absolute;right:13px;top:10px;font-size:14px;color:var(--accent)}.mode-icon{display:block;font:27px monospace;color:#a9b39d;line-height:1;margin-bottom:15px}.mode-card.active .mode-icon{color:var(--accent)}.mode-card .mode-tag{display:block;letter-spacing:1.5px;font-size:8px;color:var(--muted);margin-bottom:6px}.mode-card strong{font-size:12px;display:block;margin-bottom:7px;font-weight:600;white-space:nowrap}.mode-card p{font-size:10px;line-height:1.7;color:var(--muted);margin:0}.config-panel{background:#19221fea;border:1px solid #53614e70;padding:20px;margin-top:-215px;backdrop-filter:blur(16px)}.config-panel .section-label{padding-bottom:14px;border-bottom:1px solid var(--line)}.field-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:13px 0;min-height:35px}.field-row label{font-size:11px;white-space:nowrap}.field-row label small{display:block;color:var(--muted);font-size:9px;margin-top:4px}select,input{background:#273129;border:1px solid #495443;color:var(--text);padding:9px 10px;border-radius:0;min-width:0}select{font-size:11px;cursor:pointer}input{width:60%;font-size:12px}.field-row select{max-width:64%}.field-note{font-size:10px;color:var(--muted);line-height:1.7}.settings-row{display:flex;gap:14px;padding:12px 0 19px;border-top:1px solid var(--line);margin-top:18px}.settings-row label{display:flex;align-items:center;gap:10px;font-size:10px;flex:1}.settings-row select{width:100%;font-size:10px;padding:8px 5px}.primary{width:100%;background:var(--accent);color:#222a1d;display:flex;justify-content:space-between;align-items:center;padding:17px 18px;border:0;font-weight:750;letter-spacing:1px}.primary:hover{background:#e4ff96}.primary span{font-size:10px;letter-spacing:1.5px}.secondary{width:100%;background:transparent;color:var(--text);padding:13px;border:1px solid var(--line);margin-top:10px}#status{font-size:9px;text-align:center;color:var(--muted);line-height:1.8;margin:12px 0 0}footer{display:flex;gap:20px;align-items:center;justify-content:space-between;border-top:1px solid #60705550;margin-top:27px;padding:18px 0;font-size:9px;color:#a7b09f}footer .live-dot{margin-right:6px}footer button{border:0;background:none;color:var(--text);font-size:11px}footer button span{color:var(--accent);margin-left:14px}.muted{color:#7d8b7e;font-size:9px}.hidden{display:none!important}body.playing{overflow:hidden}body.playing .vignette{display:none}#hud{position:fixed;inset:0;pointer-events:none;text-shadow:0 2px 4px #0008}.hud-top{display:flex;align-items:start;justify-content:space-between;padding:27px 30px;background:linear-gradient(#111b1980,transparent)}.hud-brand{letter-spacing:3px;font-size:18px}#match-mode{font-size:10px;margin-top:6px;color:#ebf1df}.score-strip{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:30px;background:#172522d9;padding:9px 25px;border-top:2px solid #bccc8d}.score-strip>strong{font:30px monospace;color:var(--blue)}.score-strip>strong:last-child{color:var(--red)}.score-strip>div{text-align:center}#timer{font:18px monospace}.score-strip small{display:block;font-size:8px;letter-spacing:1.5px;margin-top:3px;color:#afbdaf}#perf{font:10px/1.8 monospace;text-align:right;color:#e1edce}#minimap{position:absolute;left:30px;top:112px;width:155px;height:155px;border:1px solid #b6c59b70;background:#16231bdb}.minimap-label{position:absolute;left:30px;top:273px;font:8px monospace;letter-spacing:1px}.minimap-label span{color:var(--accent);margin-left:16px}#crosshair{position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%)}#crosshair i{position:absolute;background:#eafaed;box-shadow:0 0 2px #000;height:2px;width:6px;top:11px}#crosshair i:nth-child(2){right:0}#crosshair i:nth-child(3){width:2px;height:6px;top:0;left:11px}#crosshair i:nth-child(4){width:2px;height:6px;top:18px;left:11px}#hitmarker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:40px sans-serif;color:var(--accent);opacity:0}#damage-flash{position:absolute;inset:0;box-shadow:inset 0 0 100px 35px #b92d24;opacity:0}#objective-bar{position:absolute;top:95px;left:50%;transform:translateX(-50%);display:flex;gap:9px}#objective-bar span{background:#182822d9;border-bottom:3px solid #b9c09c;padding:8px 15px;font:11px monospace}#killfeed{position:absolute;right:28px;top:112px;text-align:right;font-size:10px;line-height:2.4}#killfeed div{background:#16231bcc;margin-bottom:3px;padding:0 12px}#killfeed b{color:var(--accent)}#announcement{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);text-align:center;font-size:20px;letter-spacing:2px;background:#13241dbb;padding:15px 30px;min-width:280px}#announcement:empty{display:none}#interaction{position:absolute;left:50%;bottom:180px;transform:translateX(-50%);font-size:12px;background:#172820d9;padding:9px 17px;color:var(--accent)}#interaction:empty{display:none}.hud-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:end;justify-content:space-between;padding:35px 30px;background:linear-gradient(transparent,#111c1caa)}.vitals{width:155px}.vitals small,.ammo small{font-size:9px;letter-spacing:1.5px}.vitals strong,.ammo strong{font:42px monospace;display:block;margin:7px 0}.vitals strong span{color:var(--accent);font-size:26px}.health-track{height:4px;background:#78826c90}.health-track i{display:block;height:4px;background:var(--accent);width:100%}.ammo{text-align:right;min-width:180px}.ammo strong span{font-size:20px;color:#b6c4b3}#reload-label{font:9px monospace;color:#c6d4bc}.quick-help{font-size:9px;letter-spacing:.5px;color:#e2ead7}.quick-help span{padding:0 14px;color:#adbea9}.overlay{position:fixed;inset:0;background:#0b1414be;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;z-index:10}.modal,dialog{padding:34px;background:#1b2621;border:1px solid #68765370;width:420px;max-width:92vw;box-shadow:0 25px 100px #0005}h2{font-size:28px;font-weight:650;margin:0 0 18px}.modal p,dialog p{font-size:12px;line-height:2;color:#b4c1b0}.controls-compact{font-size:10px;color:var(--muted);line-height:2.2;margin-top:24px;border-top:1px solid var(--line);padding-top:18px}.results-modal{width:580px}.board-modal{width:610px}#score-table,#result-table{max-height:45vh;overflow:auto;margin:18px 0}table{width:100%;border-collapse:collapse;font:12px monospace;text-align:right}td,th{padding:9px;border-bottom:1px solid #45534065}td:nth-child(2),th:nth-child(2){text-align:left}th{color:#a4b199;font-size:9px;font-weight:400}tr.me{color:var(--accent);background:#33442a}#result-stats{color:var(--accent);font:15px monospace;padding:14px 0;border-bottom:1px solid var(--line)}dialog{color:var(--text);position:fixed;max-height:90vh}dialog::backdrop{background:#08150eca;backdrop-filter:blur(8px)}dialog small{font-size:10px;color:var(--muted);line-height:1.7;display:block}.close{float:right;font-size:24px;border:0;background:none;color:var(--text)}@media(min-width:1600px){.hero{padding-top:65px;padding-bottom:45px}.mode-card{min-height:175px}}@media(max-width:1050px){#menu{padding:0 25px}.alpha,.header-meta .build-tag{display:none}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.config-panel{margin-top:-130px}.hero h1{font-size:44px}.mode-card{min-height:140px}.quick-help{display:none}footer .muted{max-width:200px}}@media(max-width:720px){header{height:70px}.header-meta{display:none}.hero{padding-top:27px}.hero h1{font-size:37px}.lobby-grid{display:block}.config-panel{margin-top:25px}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-card strong{font-size:11px}footer{flex-wrap:wrap}.hud-top{padding:15px}.hud-brand{font-size:12px}#perf{font-size:8px}.score-strip{gap:14px;padding:7px 12px}.score-strip>strong{font-size:22px}#minimap{left:15px;top:88px;width:110px;height:110px}.minimap-label{left:15px;top:205px}.hud-bottom{padding:20px}.hud-brand{letter-spacing:1px}#killfeed{right:15px;top:145px}}
.settings-row label{white-space:nowrap}
#location-label{position:absolute;left:30px;top:292px;color:#e6f1c9;font-size:10px;letter-spacing:.6px}@media(max-width:720px){#location-label{left:15px;top:223px;font-size:8px}}
.audio-settings{display:flex;align-items:center;gap:12px;margin:14px 0 18px;font-size:11px}.audio-settings label{white-space:nowrap}.audio-settings input{flex:1;width:80px;accent-color:var(--accent);padding:0}.audio-settings button{background:none;border:1px solid var(--line);color:var(--accent);padding:6px 9px}.audio-settings output{color:var(--muted);margin-left:5px}.open-browser.secondary{display:block;text-align:center;font-size:11px}.modal{max-height:94vh;overflow:auto}

#sight-dot{position:absolute;left:50%;top:50%;width:3px;height:3px;transform:translate(-50%,-50%);background:#ff6547;border-radius:50%;box-shadow:0 0 4px #ff6547;opacity:0}#sight-dot.scope{width:2px;height:16px;border-radius:0;box-shadow:none}#sight-dot.scope:after{content:'';position:absolute;width:16px;height:2px;left:-7px;top:7px;background:#ff6547}.preview-link{display:block;text-align:center;font-size:11px;margin:0 0 14px}
.mode-card[data-mode="assault"]{grid-column:1/-1;min-height:125px;background:linear-gradient(110deg,#394531,#192b27);border-color:#80945d}.mode-card[data-mode="assault"] strong{font-size:18px}.mode-card[data-mode="assault"] .mode-icon{float:left;margin:15px 24px 20px 0;font-size:44px}.mode-card[data-mode="assault"] p{font-size:12px}.mode-card[data-mode="assault"].active{border-color:var(--accent)}#assault-briefing{margin-top:14px;padding:23px;border:1px solid #71825980;background:#17231fee}#assault-briefing h2{font-size:23px}#assault-briefing p{font-size:12px;line-height:1.9;color:#cad6be}#assault-briefing small{font-size:10px;line-height:1.8;color:var(--muted)}#field-name:empty{display:none}#assault-objective{position:absolute;left:30px;top:310px;width:270px;background:#15231ee8;border-left:3px solid var(--accent);padding:15px}#assault-objective small{font:10px monospace;color:var(--accent)}#assault-objective strong{display:block;font-size:15px;margin:9px 0 12px}#assault-objective p{font-size:10px;line-height:1.8;color:#c6d5bc;margin:9px 0 0}.assault-track{height:4px;background:#647155}.assault-track i{display:block;height:100%;background:var(--accent);transition:width .15s}#objective-bar .current{border-color:var(--accent);color:var(--accent)}#objective-bar .secured{border-color:var(--blue);color:var(--blue)}#objective-bar .locked{border-color:#697366;color:#a2aca0}@media(max-width:720px){#assault-objective{left:15px;top:235px;width:220px;padding:10px}#objective-bar{top:80px;left:auto;right:15px;transform:none;flex-direction:column;gap:3px}#objective-bar span{padding:5px 9px;font-size:9px}}

/* Movement widens the reticle without changing line thickness. */
#crosshair i{transition:transform .08s ease-out}
#crosshair i:nth-child(1){transform:translateX(calc(-1 * var(--spread-gap,0px)))}
#crosshair i:nth-child(2){transform:translateX(var(--spread-gap,0px))}
#crosshair i:nth-child(3){transform:translateY(calc(-1 * var(--spread-gap,0px)))}
#crosshair i:nth-child(4){transform:translateY(var(--spread-gap,0px))}

#posture-label{position:absolute;left:30px;bottom:160px;padding:6px 10px;background:#172522d9;border-left:2px solid var(--accent);font-size:11px;letter-spacing:1px}
.quick-help{line-height:2}
.quick-help b{font-weight:500}.controls-compact b,#help b{color:var(--accent);font-weight:500}
#help{overflow:auto}#bindings{width:780px;padding:24px;overflow:auto}#bindings h2{font-size:26px}#bindings p{margin:10px 0}
.binding-heading,.binding-row{display:grid;grid-template-columns:minmax(140px,1.2fr) repeat(2,minmax(150px,1fr));gap:12px;align-items:center}
.binding-heading{color:var(--muted);font-size:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.binding-row{padding:8px 0;border-bottom:1px solid #38423b80;font-size:12px}.binding-row>div{display:flex;gap:4px;min-width:0}
.binding-row button{background:#273129;border:1px solid #495443;color:var(--text);padding:9px 5px;flex:1;min-width:0;overflow-wrap:anywhere}
.binding-row button:hover{border-color:var(--accent)}.binding-row .waiting{border-color:var(--accent);color:var(--accent);background:#3a482b}
.binding-row .binding-clear{flex:0 0 28px;color:var(--muted)}.bindings-footer{position:sticky;bottom:-24px;background:#1b2621;padding:10px 0 20px;border-top:1px solid var(--line)}
#bindings-status{color:var(--accent);min-height:48px;line-height:1.6}.bindings-actions{display:flex;gap:10px;margin-top:12px;align-items:stretch}.bindings-actions button{margin:0;width:auto;flex:1;font-size:12px;justify-content:center}
@media(max-width:600px){#bindings{padding:16px}.binding-heading,.binding-row{grid-template-columns:minmax(90px,1fr) repeat(2,minmax(85px,1fr));gap:6px}.binding-row{font-size:11px}.binding-row .binding-clear{flex-basis:22px}.bindings-actions{flex-wrap:wrap}.bindings-actions button{padding:12px 8px}.bindings-footer{bottom:-16px}.bindings-actions .primary{flex-basis:100%}}
@media(max-width:720px){#posture-label{left:20px;bottom:145px}}

#attachment-state{position:absolute;right:30px;bottom:160px;font:11px monospace;color:#d4ef81;background:#14221bd9;padding:7px 10px}#attachment-state:empty{display:none}

#vehicle-heading{position:absolute;right:30px;bottom:220px;display:grid;grid-template-columns:80px 1fr;align-items:center;gap:4px 10px;padding:10px 14px;background:#14221bed;border:1px solid #718775;border-left:3px solid #d4ef81;pointer-events:none}
#vehicle-heading svg{width:80px;height:80px}
#vehicle-heading strong{display:block;color:#d4ef81;font-size:15px;margin-bottom:8px}
#vehicle-heading small{display:block;font-size:10px;color:#dce8da;line-height:1.7}
#vehicle-heading .vehicle-heading-key{display:block;font-size:10px;color:#b7ccc0;margin-top:5px}
#vehicle-heading [data-controls]{grid-column:1/-1;border-top:1px solid #71877566;padding-top:6px}
@media(max-width:720px){#vehicle-heading{right:15px;bottom:215px;grid-template-columns:60px 1fr;padding:7px;gap:3px 7px}#vehicle-heading svg{width:60px;height:60px}#vehicle-heading strong{font-size:12px;margin-bottom:4px}#vehicle-heading small,#vehicle-heading .vehicle-heading-key{font-size:9px}}
#range-briefing { margin-top: 18px; padding: 22px; border: 1px solid #758b54; background: #18241fe8; border-radius: 12px; }
#range-briefing h2 { margin: 10px 0; font-size: 26px; }
#range-briefing p, #range-briefing small { line-height: 1.8; color: #c1cdc1; }
#range-hud { position: absolute; top: 320px; left: 30px; width: 290px; padding: 16px 20px; background: #111c1bea; border-left: 3px solid #d4ef81; border-radius: 4px; }
#range-hud strong { display: block; margin-top: 8px; font-size: 17px; }
#range-hud p { margin: 8px 0; color: #d4ef81; }
#range-hud small { color: #bfccbf; font-size: 11px; }
@media(max-width:720px) { #range-hud { top: 245px; left: 15px; width: 240px; padding: 10px; } #range-hud strong { font-size: 13px; } }
#range-customization { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; overflow: hidden; }
#range-customization iframe { display: block; width: 100%; height: 100%; border: 0; background: #111b1d; }
#sensitivity-settings { width: min(560px, 94vw); max-height: 90vh; overflow-y: auto; padding: 28px; }
#sensitivity-settings p { font-size: 12px; line-height: 1.8; color: #bdc9b6; }
.sensitivity-field { margin: 24px 0; }
.sensitivity-field label { display: block; color: #d4ef81; margin-bottom: 10px; }
.sensitivity-inputs { display: flex; gap: 10px; align-items: center; }
.sensitivity-inputs input[type=range] { flex: 1; min-width: 0; accent-color: #d4ef81; }
.sensitivity-inputs input[type=number] { width: 80px; }
.sensitivity-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sensitivity-actions button { flex: 1; min-width: 125px; margin: 0; }
