/* TankWar game client styles: HUD, lobby, touch UI */
:root { --ink: #e6ebd6; --muted: #9ba28a; --olive: #4d5a3c; --accent: #f2c14e; --red: #ff4a3a; --blue: #3fa0ff; --panel: rgba(14,16,11,0.82); --line: rgba(170,180,140,0.25);
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0c08; color: var(--ink); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#scene.thermal { filter: grayscale(1) contrast(1.9) brightness(1.35); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
#hitflash { position: absolute; inset: 0; box-shadow: inset 0 0 160px rgba(255,30,10,0.0); }
#hitflash.on { animation: hf 0.6s ease-out; }
@keyframes hf { 0% { box-shadow: inset 0 0 200px rgba(255,30,10,0.75); } 100% { box-shadow: inset 0 0 160px rgba(255,30,10,0); } }
#topbar { position: absolute; top: calc(62px + var(--sat)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; font: 700 15px ui-monospace, monospace; }
#topbar .team { padding: 3px 10px; border-radius: 4px; background: rgba(10,12,8,0.6); }
#topbar .team.a { color: var(--blue); } #topbar .team.b { color: var(--red); }
#topbar .team.mine { outline: 1px solid currentColor; }
#timer { padding: 3px 10px; background: rgba(10,12,8,0.6); border-radius: 4px; color: #fff; min-width: 64px; text-align: center; }
#mmWrap { position: absolute; top: calc(10px + var(--sat)); left: calc(10px + var(--sal)); }
#minimap { width: 200px; height: 200px; display: block; }
#weatherInfo { margin-top: 4px; max-width: 230px; font: 11px ui-monospace, monospace; color: #d6dcc4; text-shadow: 0 1px 2px #000; }
#stats { position: absolute; top: calc(8px + var(--sat)); right: calc(12px + var(--sar)); font: 11px ui-monospace, monospace; color: #b9c0a6; text-shadow: 0 1px 2px #000; }
#killfeed { position: absolute; top: calc(28px + var(--sat)); right: calc(12px + var(--sar)); display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.kf { background: rgba(10,12,8,0.65); padding: 3px 9px; border-radius: 3px; font-size: 13px; transition: opacity 1s; }
.kf.kf-me { border: 1px solid var(--accent); } .kf.fade { opacity: 0; }
.kf .ally { color: var(--blue); } .kf .enemy { color: var(--red); } .kf-icon { color: #ddd; margin: 0 4px; } .kf-tank { color: var(--muted); font-size: 11px; }
#hitmarkers { position: absolute; top: 58%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hm { font: 800 20px system-ui, sans-serif; letter-spacing: 0.04em; text-shadow: 0 2px 4px #000, 0 0 12px rgba(0,0,0,0.6); animation: hm 1.8s ease-out forwards; }
.hm-pen { color: #ffd34a; } .hm-kill { color: #ff5a3a; font-size: 26px; } .hm-nopen { color: #cfd6c0; } .hm-rico { color: #9fd0ff; } .hm-hurt { color: #ff6a5a; }
@keyframes hm { 0% { transform: scale(1.35); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
body[data-view="driver"] #hitmarkers { top: 46%; }
#notice { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); padding: 6px 16px; background: rgba(10,12,8,0.7); border-left: 3px solid var(--accent); font-weight: 600; opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
#notice.show { opacity: 1; }
#speakers { position: absolute; top: calc(250px + var(--sat)); left: calc(12px + var(--sal)); font-size: 13px; color: #ffd34a; text-shadow: 0 1px 2px #000; }
#micState { position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); color: #ff6a4a; font: 700 13px ui-monospace, monospace; background: rgba(0,0,0,0.6); padding: 3px 10px; border-radius: 3px; display: none; }
#micState.on { display: block; }
#chatWrap { position: absolute; left: calc(12px + var(--sal)); bottom: calc(150px + var(--sab)); width: min(420px, 40vw); }
body[data-view="driver"] #chatWrap { bottom: 41%; }
#chatList { max-height: 180px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
#chatList.open { pointer-events: auto; overflow-y: auto; background: rgba(0,0,0,0.35); }
.cm { text-shadow: 0 1px 2px #000; transition: opacity 1.2s; } .cm.fade { opacity: 0; } #chatList.open .cm.fade { opacity: 0.85; }
.cm b.ally { color: #7fc0ff; } .cm b.enemy { color: #ff8a7a; } .cm .tag { color: #b3ff9a; font-size: 11px; } .cm-radio .tag { color: #ffd34a; } .cm .sys { color: #f2c14e; font-style: italic; }
#chatBox { display: none; margin-top: 4px; pointer-events: auto; }
#chatBox.open { display: flex; }
#chatScope { background: #2c3a22; border: 1px solid var(--line); padding: 4px 8px; font: 700 11px ui-monospace, monospace; }
#chatScope.team { background: #1d3550; }
#chatInput { flex: 1; background: rgba(0,0,0,0.75); border: 1px solid var(--line); color: #fff; padding: 6px 8px; font-size: 14px; outline: none; -webkit-user-select: text; user-select: text; }
#scoreboard { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; gap: 14px; background: rgba(10,12,8,0.9); padding: 16px; border: 1px solid var(--line); pointer-events: auto; max-width: 96vw; }
#scoreboard.show { display: flex; }
.sb-team h3 { margin: 0 0 6px; font-size: 14px; } .sb-team:first-child h3 { color: var(--blue); } .sb-team:last-child h3 { color: var(--red); }
.sb-team table { border-collapse: collapse; font-size: 13px; min-width: 340px; } .sb-team td:first-child { white-space: nowrap; }
.sb-team td, .sb-team th { padding: 3px 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sb-team th { color: var(--muted); font-weight: 500; font-size: 11px; }
.sb-team tr.me { background: rgba(242,193,78,0.15); } .sb-team tr.deadrow { opacity: 0.55; } .sb-team i { color: var(--muted); font-size: 10px; }
.mute { background: none; border: 0; }
#deadPanel { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); text-align: center; display: none; pointer-events: auto; background: rgba(30,6,4,0.72); padding: 12px 28px; border: 1px solid rgba(255,80,60,0.5); }
#deadPanel.show { display: block; } #deadPanel h2 { margin: 0 0 4px; color: var(--red); letter-spacing: 0.1em; }
#roundEnd { position: absolute; inset: 0; display: none; place-content: center; text-align: center; background: rgba(0,0,0,0.55); }
#roundEnd.show { display: grid; } #roundEnd h2 { font-size: 64px; margin: 0; letter-spacing: 0.15em; color: var(--accent); }
#clickHint { position: absolute; bottom: 45%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.65); padding: 8px 14px; font-size: 13px; pointer-events: auto; cursor: pointer; border: 1px solid var(--line); text-align: center; max-width: 90vw; }
#help { display: none; }

/* ---------- menu / loading ---------- */
#menu, #loading, .modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(5,6,4,0.7); z-index: 20; }
#loading { background: radial-gradient(ellipse at center, #232818, #0a0b07); }
.ld { text-align: center; } .ld h1 { font-size: 54px; letter-spacing: 0.12em; margin: 0; } .ld h1 span, .brand span { color: var(--accent); }
.ld .bar { width: 280px; height: 4px; background: #222; margin: 14px auto; } .ld .bar i { display: block; height: 100%; width: 10%; background: var(--accent); transition: width 0.4s; }
.panel { background: var(--panel); border: 1px solid var(--line); padding: 22px; width: min(440px, 92vw); display: flex; flex-direction: column; gap: 12px; }
.panel h2 { margin: 0; letter-spacing: 0.1em; }
.modal { z-index: 40; } .modal p { margin: 0; font-size: 14px; line-height: 1.45; } .modal .row { display: flex; gap: 8px; flex-wrap: wrap; }
label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; }
label.chk { justify-content: flex-start; }
.btn { background: #2a3020; border: 1px solid var(--line); padding: 8px 14px; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-size: 12px; }
.btn:hover { background: #374029; } .btn.primary { background: linear-gradient(#c9962a, #9b6f16); color: #140f02; border-color: #f2c14e; } .btn.primary:hover { filter: brightness(1.1); }
.btn.big { padding: 14px; font-size: 16px; width: 100%; } .btn.small { padding: 6px 9px; }

/* ---------- lobby ---------- */
#lobby { position: fixed; inset: 0; z-index: 10; overflow-y: auto; touch-action: pan-y; -webkit-user-select: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(80,90,50,0.35), transparent 60%), linear-gradient(160deg, #161a10, #0b0c08 60%, #151208);
  padding: calc(12px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); }
.lb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.brand { font: 800 26px system-ui, sans-serif; letter-spacing: 0.12em; color: var(--ink); text-decoration: none; }
.lb-grid { display: grid; grid-template-columns: 300px 1fr 340px; gap: 16px; max-width: 1400px; margin: 0 auto; }
.col h4 { margin: 12px 0 6px; font-size: 11px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.row { display: flex; gap: 6px; } .row input { flex: 1; }
input#callsign, select { background: #10120c; border: 1px solid var(--line); color: var(--ink); padding: 8px; font-size: 15px; -webkit-user-select: text; user-select: text; }
#tankList, #mapList { display: grid; gap: 5px; }
.tank-card, .map-card, .room { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: rgba(30,34,24,0.85); border: 1px solid var(--line); padding: 7px 10px; }
.tank-card small, .map-card small, .room small { color: var(--muted); font-size: 11px; }
.tank-card.sel, .map-card.sel, .room.sel { border-color: var(--accent); background: rgba(70,62,30,0.85); }
.map-card .online { font-size: 11px; color: #9fd47a; }
.map-card { background-size: cover; } .map-card.temperate { box-shadow: inset 4px 0 #5f7a3a; } .map-card.steppe { box-shadow: inset 4px 0 #b39a52; } .map-card.arid { box-shadow: inset 4px 0 #b9824a; } .map-card.forest { box-shadow: inset 4px 0 #2f5a2a; }
.col.center { display: flex; flex-direction: column; }
#tankPreview { width: 100%; height: 340px; display: block; background: radial-gradient(ellipse at center 60%, rgba(120,130,90,0.25), transparent 70%); }
#tankStats h3 { margin: 4px 0 8px; } #tankStats h3 small { color: var(--muted); font-weight: 400; font-size: 12px; }
.stat { display: grid; grid-template-columns: 120px 1fr 80px; align-items: center; gap: 8px; font-size: 12px; margin: 3px 0; }
.stat i { height: 6px; background: #222619; display: block; } .stat em { display: block; height: 100%; background: linear-gradient(90deg, #6d8a3e, #c8d46a); }
.stat b { text-align: right; font-family: ui-monospace, monospace; }
.seg { display: flex; } .seg button { flex: 1; padding: 8px; background: #1b1f15; border: 1px solid var(--line); font-size: 12px; } .seg button.sel { background: #4a4120; border-color: var(--accent); }
body[data-mode="single"] .only-online, body[data-mode="online"] .only-single { display: none; }
#roomList { display: grid; gap: 4px; margin-top: 6px; max-height: 150px; overflow-y: auto; }
.room { flex-direction: row; justify-content: space-between; gap: 8px; }
details { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; } summary { cursor: pointer; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
#lobbyStatus { min-height: 20px; margin: 10px 0 6px; font-size: 13px; color: #9fd47a; } #lobbyStatus.err { color: var(--red); }
#onlineTotal { font-size: 12px; }
@media (max-width: 1000px) { .lb-grid { grid-template-columns: 1fr 1fr; } .col.center { grid-column: 1 / -1; order: -1; } #tankPreview { height: 200px; } }
@media (max-width: 640px) { .lb-grid { grid-template-columns: 1fr; } }

/* ---------- touch ---------- */
#touchUI { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#aimZone { position: absolute; top: 0; right: 0; width: 55%; height: 100%; pointer-events: auto; }
#stick { position: absolute; left: calc(26px + var(--sal)); bottom: calc(26px + var(--sab)); width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 2px solid rgba(255,255,255,0.18); pointer-events: auto; }
#stickKnob { position: absolute; left: 40px; top: 40px; width: 60px; height: 60px; border-radius: 50%; background: rgba(242,193,78,0.45); border: 2px solid rgba(255,255,255,0.4); }
.tb { position: absolute; pointer-events: auto; width: 50px; height: 50px; border-radius: 50%; background: rgba(20,24,16,0.55); border: 2px solid rgba(255,255,255,0.25); font: 700 10px ui-monospace, monospace; color: #fff; -webkit-tap-highlight-color: transparent; }
.tb.on { background: rgba(242,193,78,0.6); }
.tb.big { width: 78px; height: 78px; font-size: 14px; background: rgba(160,40,20,0.55); }
#tFire { right: calc(20px + var(--sar)); bottom: calc(24px + var(--sab)); }
#tSight { right: calc(108px + var(--sar)); bottom: calc(18px + var(--sab)); }
#tZoom { right: calc(108px + var(--sar)); bottom: calc(76px + var(--sab)); }
#tShell { right: calc(34px + var(--sar)); bottom: calc(112px + var(--sab)); }
#tLase { right: calc(166px + var(--sar)); bottom: calc(18px + var(--sab)); }
#tView { right: calc(166px + var(--sar)); bottom: calc(76px + var(--sab)); }
#tBrake { left: calc(40px + var(--sal)); bottom: calc(158px + var(--sab)); }
#tMic { right: calc(20px + var(--sar)); top: calc(80px + var(--sat)); }
#tChat { right: calc(78px + var(--sar)); top: calc(80px + var(--sat)); }
#tScore { right: calc(136px + var(--sar)); top: calc(80px + var(--sat)); }
#stick { width: 124px !important; height: 124px !important; } #stickKnob { left: 32px !important; top: 32px !important; }
body.touch #minimap { width: 120px; height: 120px; }
body.touch #weatherInfo { display: none; }
body.touch #chatWrap { bottom: auto; top: calc(150px + var(--sat)); width: 34vw; } body.touch #chatList { max-height: 90px; font-size: 11px; }
body.touch #topbar { top: calc(58px + var(--sat)); }
body.touch #speakers { top: calc(135px + var(--sat)); }
body.touch #killfeed { top: calc(140px + var(--sat)); } body.touch #killfeed .kf { font-size: 11px; } body.touch #stats { display: none; } body.touch #clickHint { display: none; }
#rotate { position: fixed; inset: 0; z-index: 50; background: #0b0c08; display: none; place-content: center; text-align: center; font-size: 18px; }
#rotate div { font-size: 64px; animation: rot 2s infinite; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: grid; } }
body.touch.portrait #rotate { display: grid; }
/* Domination capture points + tickets */
#capsBar { position: absolute; top: 94px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; pointer-events: none; font: 700 13px ui-monospace, monospace; }
#capsBar .cap { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: conic-gradient(var(--c) var(--p), rgba(0,0,0,0.55) 0); border: 2px solid rgba(255,255,255,0.35); text-shadow: 0 1px 2px #000; }
#capsBar .cap.mine { border-color: #3fa0ff; } #capsBar .cap.theirs { border-color: #ff3b30; } #capsBar .cap.contested { animation: capPulse 0.8s infinite alternate; }
#capsBar .tickets { padding: 2px 8px; border-radius: 4px; background: rgba(0,0,0,0.5); } #capsBar .tickets.a { color: #6cb8ff; } #capsBar .tickets.b { color: #ff7a70; }
@keyframes capPulse { from { box-shadow: 0 0 0 0 rgba(255,210,80,0.0); } to { box-shadow: 0 0 0 4px rgba(255,210,80,0.7); } }
/* lobby account area */
.lb-acct { display: flex; gap: 8px; align-items: center; }
#proOpts label { flex: 1; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
#proOpts select { width: 100%; }
#tankStats .gate a { color: var(--accent); }
/* post-battle summary */
#roundEnd .rs-card { background: rgba(14,16,10,0.92); border: 1px solid var(--line); padding: 22px 28px; min-width: min(420px, 92vw); max-width: 92vw; pointer-events: auto; }
#roundEnd .rs-score { margin: 4px 0 14px; color: var(--muted); }
.rs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 12px; }
.rs-grid div { background: rgba(255,255,255,0.04); padding: 8px 4px; } .rs-grid b { display: block; font-size: 22px; color: var(--accent); } .rs-grid span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.rs-xp { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 10px; } .rs-xp td { padding: 3px 4px; text-align: left; } .rs-xp td + td { text-align: right; color: #9fd47a; } .rs-xp tr.tot td { border-top: 1px solid var(--line); font-weight: 700; }
.rs-level { display: grid; grid-template-columns: 1fr; gap: 4px; text-align: left; font-size: 13px; } .rs-level i { display: block; height: 8px; background: #222; } .rs-level em { display: block; height: 100%; background: var(--accent); } .rs-level small { color: var(--muted); }
.rs-up { color: #ffd34a; font-weight: 700; margin: 10px 0 0; } .rs-cd { color: var(--muted); margin: 10px 0 0; font-size: 13px; }
@media (max-width: 600px) { .rs-grid { grid-template-columns: repeat(3, 1fr); } #roundEnd h2 { font-size: 40px; } }
/* key rebinding */
.keybinds { display: grid; grid-template-columns: 1fr; gap: 3px; margin: 6px 0; max-height: 260px; overflow-y: auto; }
.kb-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.kb-row .kb { min-width: 74px; text-transform: none; } .kb-row .kb.wait { border-color: var(--accent); color: var(--accent); }
/* first-run tutorial */
#tutorial { position: absolute; top: 118px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; background: rgba(10,12,8,0.85); border: 1px solid var(--accent); padding: 8px 14px; font-size: 14px; max-width: min(720px, 92vw); pointer-events: auto; z-index: 3; }
#tutorial b { color: var(--accent); white-space: nowrap; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

/* weather data attribution (Open-Meteo, CC BY 4.0) */
.credit { font-size: 12px; margin: 6px 0; }
.credit a { color: inherit; text-decoration: underline; }