@font-face { font-family: 'Chakra Petch'; font-weight: 400; font-display: swap; src: url('/assets/fonts/chakra-petch-400.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap; src: url('/assets/fonts/chakra-petch-600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-display: swap; src: url('/assets/fonts/chakra-petch-700.woff2') format('woff2'); }

:root {
	--bg: #07090c;
	--panel: rgba(12, 15, 20, 0.82);
	--panel-solid: #10141a;
	--line: rgba(255, 255, 255, 0.09);
	--line-strong: rgba(255, 255, 255, 0.2);
	--text: #e9edf2;
	--muted: #8a94a3;
	--accent: #ff8a2a;
	--accent-2: #ffc15a;
	--good: #6dff8f;
	--bad: #ff5147;
	--red: #ff4636;
	--blue: #3d8bff;
	--gold: #f2c14e;
	--font: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
	--mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	/* Notches and the home bar (index.html asks for viewport-fit=cover); zero on desktops. */
	--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);
	color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; user-select: none; -webkit-user-select: none;
	overscroll-behavior: none; -webkit-text-size-adjust: 100%; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
canvas#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- menu ---------- */
#menu { position: fixed; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: calc(24px + var(--sat)) calc(16px + var(--sar)) calc(24px + var(--sab)) calc(16px + var(--sal));
	touch-action: manipulation; overscroll-behavior: contain;
	background: radial-gradient(1200px 700px at 70% 10%, rgba(255, 138, 42, 0.12), transparent 60%), radial-gradient(900px 600px at 10% 90%, rgba(61, 139, 255, 0.1), transparent 60%), linear-gradient(180deg, rgba(7, 9, 12, 0.55), rgba(7, 9, 12, 0.92)); }
#menu.over-game { background: rgba(5, 7, 10, 0.72); backdrop-filter: blur(6px); }
.shell { width: min(1080px, 100%); display: grid; gap: 18px; }
.brand { display: flex; align-items: baseline; gap: 14px; }
.brand h1 { margin: 0; font-size: clamp(44px, 8vw, 88px); letter-spacing: 0.06em; font-weight: 700; line-height: 0.9;
	background: linear-gradient(180deg, #fff 0%, #ffd9b0 45%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: 0 0 40px rgba(255, 138, 42, 0.25); }
.brand .tag { color: var(--muted); letter-spacing: 0.2em; text-transform: uppercase; font-size: 13px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 18px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.card h2 { margin: 0 0 12px; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2); font-weight: 600; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.btn { appearance: none; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); padding: 10px 16px; border-radius: 3px; cursor: pointer;
	text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 13px; transition: background 0.12s, border-color 0.12s, transform 0.06s; }
.btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.35); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #ff9b45, #e8701a); border-color: #ffb070; color: #1a0d02; }
.btn.primary:hover { background: linear-gradient(180deg, #ffab5e, #f07e28); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: 0.45; cursor: default; }
.field { display: grid; gap: 6px; }
.field label, .label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.input, select.input { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-strong); border-radius: 3px; padding: 10px 12px; min-width: 0; outline: none; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 138, 42, 0.18); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.muted { color: var(--muted); }
.error { color: var(--bad); min-height: 1.2em; font-size: 14px; }
.small { font-size: 12px; }

table.servers { width: 100%; border-collapse: collapse; font-size: 14px; }
table.servers th { text-align: left; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--line); }
table.servers td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
table.servers tr.srv { cursor: pointer; }
table.servers tr.srv:hover td { background: rgba(255, 138, 42, 0.07); }
table.servers tr.srv.sel td { background: rgba(255, 138, 42, 0.14); }
.ping-good { color: var(--good); } .ping-ok { color: var(--gold); } .ping-bad { color: var(--bad); }
.pill { display: inline-block; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.empty { padding: 28px; text-align: center; color: var(--muted); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.tab { padding: 8px 14px; cursor: pointer; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; border-bottom: 2px solid transparent; }
.tab.on { color: var(--text); border-color: var(--accent); }
.setting { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.4fr) 64px; gap: 10px; align-items: center; padding: 6px 0; }
.setting input[type=range] { width: 100%; accent-color: var(--accent); }
.bind { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.keycap { font-family: var(--mono); font-size: 12px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 3px; background: rgba(255, 255, 255, 0.04); cursor: pointer; min-width: 110px; text-align: center; }
.keycap.wait { border-color: var(--accent); color: var(--accent); }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 20px; font-size: 14px; }
.help-grid div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: 4px 0; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; font-family: var(--font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
#hud .cross { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#hud .cross .xs { -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; filter: drop-shadow(0 0 1px #000); }
#hud .hitmark { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; transition: opacity 0.2s; }
#hud .hitmark::before, #hud .hitmark::after { content: ''; position: absolute; background: #fff; }
#hud .hitmark::before { left: 13px; top: 0; width: 2px; height: 28px; clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%, 0 65%, 100% 65%, 100% 100%, 0 100%); }
#hud .hitmark::after { top: 13px; left: 0; height: 2px; width: 28px; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%); }
#hud .hitmark.on { opacity: 1; transition: none; }
.vitals { position: absolute; left: calc(22px + var(--sal)); bottom: calc(20px + var(--sab)); display: flex; gap: 10px; align-items: flex-end; }
/* Panels and icons are Synty HUD sprites (web/assets/hud, tools/pack-hud.mjs): white shapes used as
   masks, so one sprite takes any colour. */
.stat { position: relative; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 26px 7px 16px; }
.stat::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(8, 11, 16, 0.62); -webkit-mask: url(/assets/hud/panel.webp) center / 100% 100% no-repeat; mask: url(/assets/hud/panel.webp) center / 100% 100% no-repeat; }
.stat .ico { grid-row: 1 / 3; width: 30px; height: 30px; background: var(--good); -webkit-mask: url(/assets/hud/health.webp) center / contain no-repeat; mask: url(/assets/hud/health.webp) center / contain no-repeat; }
.stat.armor .ico { background: #8fc3ff; -webkit-mask-image: url(/assets/hud/armor.webp); mask-image: url(/assets/hud/armor.webp); }
.stat.shield .ico { background: var(--gold); -webkit-mask-image: url(/assets/hud/shield.webp); mask-image: url(/assets/hud/shield.webp); }
.stat .v { font-size: 42px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 10px; letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; }
.stat.low .v { color: var(--bad); animation: pulse 0.8s infinite; }
.stat.low .ico { background: var(--bad); }
.stat.shield .v { color: var(--gold); }
@keyframes pulse { 50% { opacity: 0.55; } }
.ammo { position: absolute; right: calc(22px + var(--sar)); bottom: calc(20px + var(--sab)); display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; justify-items: end; padding: 8px 16px 7px 26px; }
.ammo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(8, 11, 16, 0.62); transform: scaleX(-1); -webkit-mask: url(/assets/hud/panel.webp) center / 100% 100% no-repeat; mask: url(/assets/hud/panel.webp) center / 100% 100% no-repeat; }
.ammo .aico { grid-row: 1 / 3; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
.ammo .v { font-size: 42px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ammo .k { font-size: 11px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; }
.weapons { position: absolute; left: 50%; bottom: calc(14px + var(--sab)); transform: translateX(-50%); display: flex; gap: 3px; }
.weapons .w { position: relative; width: 66px; height: 40px; opacity: 0.3; }
.weapons .w::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(8, 11, 16, 0.6); -webkit-mask: url(/assets/hud/slot.webp) center / 100% 100% no-repeat; mask: url(/assets/hud/slot.webp) center / 100% 100% no-repeat; }
.weapons .w.own { opacity: 0.85; }
.weapons .w.cur { opacity: 1; }
.weapons .w.cur::before { background: rgba(255, 138, 42, 0.32); }
.weapons .w.cur::after { content: ''; position: absolute; inset: -3px; background: var(--accent); -webkit-mask: url(/assets/hud/corners.webp) center / 100% 100% no-repeat; mask: url(/assets/hud/corners.webp) center / 100% 100% no-repeat; }
.weapons .w b { position: absolute; left: 7px; top: 2px; font-size: 11px; color: var(--muted); }
.weapons .w.cur b { color: var(--accent-2); }
.weapons .w .gun { position: absolute; inset: 9px 8px 5px 12px; background: #fff; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.weapons .w.cur .gun { background: var(--accent-2); }
.topbar { position: absolute; top: calc(14px + var(--sat)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; }
.topbar .clock { position: relative; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 5px 22px 7px; }
.topbar .clock::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(8, 11, 16, 0.65); -webkit-mask: url(/assets/hud/clock.webp) center / 100% 100% no-repeat; mask: url(/assets/hud/clock.webp) center / 100% 100% no-repeat; }
.topbar .team { min-width: 64px; text-align: center; font-size: 26px; font-weight: 700; padding: 2px 14px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.topbar .team.red { background: rgba(255, 70, 54, 0.38); }
.topbar .team.blue { background: rgba(61, 139, 255, 0.38); }
.topbar .flagst { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; display: block; opacity: 0.85; }
.rank { position: absolute; right: calc(22px + var(--sar)); top: calc(14px + var(--sat)); text-align: right; font-size: 14px; }
.rank .big { font-size: 28px; font-weight: 700; }
.feed { position: absolute; right: calc(22px + var(--sar)); top: calc(80px + var(--sat)); display: grid; gap: 4px; justify-items: end; font-size: 14px; }
.feed div { display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.4); padding: 3px 10px; border-right: 2px solid var(--accent); animation: fadein 0.15s; }
.feed .gunico { display: inline-block; width: 52px; height: 22px; background: #fff; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.feed .head { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.feed .me { border-color: var(--gold); background: rgba(242, 193, 78, 0.18); }
.announce { position: absolute; top: 24%; left: 0; right: 0; text-align: center; font-size: 34px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: #fff; text-shadow: 0 0 24px rgba(255, 138, 42, 0.8), 0 2px 3px #000; }
.announce .sub { display: block; font-size: 18px; letter-spacing: 0.1em; opacity: 0.85; font-weight: 600; }
.center-msg { position: absolute; top: 62%; left: 0; right: 0; text-align: center; font-size: 18px; letter-spacing: 0.08em; }
.chatlog { position: absolute; left: calc(22px + var(--sal)); bottom: calc(110px + var(--sab)); width: min(520px, 60vw); display: grid; gap: 3px; font-size: 15px; }
.chatlog div { animation: fadein 0.15s; }
.chatlog .who { font-weight: 700; }
.chatlog .sys { color: var(--muted); font-style: italic; }
.chatlog .teamtag { color: var(--gold); }
.chatbox { position: absolute; left: calc(22px + var(--sal)); bottom: calc(80px + var(--sab)); width: min(520px, 60vw); pointer-events: auto; display: flex; gap: 8px; align-items: center; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--accent); padding: 6px 10px; }
.chatbox input { flex: 1; background: transparent; border: 0; outline: none; font-size: 15px; }
.scores { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); width: min(900px, 94vw); background: rgba(8, 10, 14, 0.9); border: 1px solid var(--line-strong); padding: 16px 18px; }
.scores h3 { margin: 0 0 10px; letter-spacing: 0.14em; text-transform: uppercase; font-size: 15px; display: flex; justify-content: space-between; }
.scores table { width: 100%; border-collapse: collapse; font-size: 14px; }
.scores td, .scores th { padding: 5px 8px; text-align: left; font-variant-numeric: tabular-nums; }
.scores th { color: var(--muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.scores tr.me td { background: rgba(255, 138, 42, 0.14); }
.scores .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.scores .teamhead.red { color: var(--red); } .scores .teamhead.blue { color: var(--blue); }
.dmg { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; }
.dmg i { position: absolute; left: 50%; top: 0; width: 60px; height: 14px; margin-left: -30px; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 100%, rgba(255, 60, 40, 0.9), transparent 70%); transform-origin: 30px 110px; }
.net { position: absolute; left: calc(10px + var(--sal)); top: calc(10px + var(--sat)); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.voicebar { position: absolute; left: calc(22px + var(--sal)); top: 50%; display: grid; gap: 4px; font-size: 13px; }
.voicebar div { background: rgba(0, 0, 0, 0.45); padding: 3px 10px; border-left: 3px solid var(--good); }
.charge { position: absolute; left: 50%; top: calc(50% + 26px); transform: translateX(-50%); width: 80px; height: 4px; background: rgba(255, 255, 255, 0.15); }
.charge i { display: block; height: 100%; background: var(--accent); }
.scope { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 32vh, rgba(0, 0, 0, 0.96) 32.3vh); }
.scope::before, .scope::after { content: ''; position: absolute; background: rgba(0, 0, 0, 0.8); }
.scope::before { left: 50%; top: 18vh; bottom: 18vh; width: 1px; }
.scope::after { top: 50%; left: calc(50% - 32vh); right: calc(50% - 32vh); height: 1px; }
.spec { position: absolute; bottom: calc(110px + var(--sab)); left: 0; right: 0; text-align: center; font-size: 16px; letter-spacing: 0.1em; }
@keyframes fadein { from { opacity: 0; transform: translateY(-3px); } }
.loading { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* ---------- controller and touch ---------- */
/* The pad's focus ring in menus (pad.js). */
.padfocus { outline: 2px solid var(--accent); outline-offset: 2px; }
tr.srv.padfocus, .tab.padfocus { outline-offset: -2px; }
tr.srv.padfocus td { background: rgba(255, 138, 42, 0.2); }
.tab.padfocus { color: var(--text); }
.toast { position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content; top: calc(16px + var(--sat)); z-index: 10; pointer-events: none; display: grid; justify-items: center; gap: 2px; max-width: calc(100vw - 32px);
	padding: 8px 18px; text-align: center; background: var(--panel-solid); border: 1px solid var(--line-strong); border-bottom: 2px solid var(--accent); animation: fadein 0.15s; }
.toast b { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); }
.toast span { font-size: 12px; color: var(--muted); }

/* On-screen controls; touch.js places and sizes the buttons. Octagon plates with a light rim. */
#touch { position: fixed; inset: 0; touch-action: none; --oct: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%); }
#touch .tsafe { position: absolute; visibility: hidden; padding: var(--sat) var(--sar) var(--sab) var(--sal); }
.tbtn { position: absolute; display: grid; place-items: center; isolation: isolate; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 2px #000; }
.tbtn::before, .tbtn::after { content: ''; position: absolute; z-index: -1; -webkit-clip-path: var(--oct); clip-path: var(--oct); }
.tbtn::before { inset: 0; background: rgba(255, 255, 255, 0.28); }
.tbtn::after { inset: 2px; background: rgba(8, 11, 16, 0.4); }
.tbtn.on::after { background: rgba(255, 138, 42, 0.5); }
/* By data-a, not class: .scores already means the scoreboard. */
.tbtn[data-a=fire] { font-size: 15px; }
.tbtn[data-a=fire]::before { background: rgba(255, 138, 42, 0.75); }
.tbtn[data-a=menu], .tbtn[data-a=scores] { font-size: 10px; opacity: 0.75; }
.tstick { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; pointer-events: none;
	border: 2px solid rgba(255, 255, 255, 0.3); background: radial-gradient(circle, rgba(8, 11, 16, 0.1), rgba(8, 11, 16, 0.4)); }
.tstick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); border: 2px solid rgba(255, 138, 42, 0.8); }
.tstick.idle { opacity: 0.3; }
/* Thumbs own the bottom corners: the weapon bar moves up (tap a gun to take it) and the ammo to the middle. */
.touch-on #hud .weapons { top: calc(64px + var(--sat)); bottom: auto; transform: translateX(-50%) scale(0.85); transform-origin: 50% 0; }
.touch-on #hud .ammo { right: 50%; bottom: calc(8px + var(--sab)); transform: translateX(50%) scale(0.8); transform-origin: 50% 100%; }
.touch-on #hud .vitals { bottom: calc(8px + var(--sab)); transform: scale(0.8); transform-origin: 0 100%; }

@media (max-width: 700px) {
	.stat .v, .ammo .v { font-size: 32px; }
	.weapons .w { width: 34px; font-size: 9px; }
	.weapons .w i { display: none; }
	.setting { grid-template-columns: 1fr; }
}