:root {
  --bg: #15170f;
  --panel: rgba(20, 22, 15, 0.82);
  --line: #3a3e2e;
  --fg: #ecead9;
  --muted: #a3a38e;
  --accent: #d9b44a;
  --ok: #8fb35a;
  --hit: #e2563c;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--body); }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }
button { font: inherit; }

/* ---------- join */
#join { position: fixed; inset: 0; display: flex; align-items: safe center; overflow-y: auto; padding: 16px; background: linear-gradient(90deg, rgba(15,17,10,.92) 0%, rgba(15,17,10,.55) 55%, rgba(15,17,10,.15) 100%); }
.join-card { width: min(460px, 100%); display: flex; flex-direction: column; gap: 8px; margin-left: clamp(0px, 6vw, 90px); margin-block: auto; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(56px, min(11vw, 14vh), 112px); line-height: .85; letter-spacing: .02em; text-transform: uppercase; }
.lead { margin: 4px 0 8px; color: var(--muted); font-size: 15px; }
label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
#name { background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 3px; color: var(--fg); padding: 11px 12px; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; outline: none; }
#name:focus { border-color: var(--accent); }
.kits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kit { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 3px; background: rgba(0,0,0,.3); font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; text-align: center; }
.kit .sw { display: flex; height: 10px; border-radius: 2px; overflow: hidden; }
.kit .sw i { flex: 1; }
.kit[aria-pressed="true"] { border-color: var(--accent); background: rgba(217,180,74,.12); }
.kit:focus-visible, #deploy:focus-visible, #resume:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#deploy, #resume { all: unset; cursor: pointer; margin-top: 10px; text-align: center; padding: 13px; background: var(--accent); color: #17180f; font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; }
#deploy:disabled { opacity: .5; cursor: progress; }
.keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.keys b { color: var(--fg); font-weight: 500; }
.err { color: var(--hit); margin: 6px 0 0; }

/* ---------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; font-family: var(--display); text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.cross { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); transition: width .08s, height .08s, opacity .1s; }
.cross i { position: absolute; background: var(--fg); box-shadow: 0 0 2px rgba(0,0,0,.8); }
.cross i:nth-child(1) { left: calc(50% - 1px); top: 0; width: 2px; height: 8px; }
.cross i:nth-child(2) { left: calc(50% - 1px); bottom: 0; width: 2px; height: 8px; }
.cross i:nth-child(3) { top: calc(50% - 1px); left: 0; height: 2px; width: 8px; }
.cross i:nth-child(4) { top: calc(50% - 1px); right: 0; height: 2px; width: 8px; }
.cross.ads { opacity: 0; }
/* jeep machine gun: a ring + dot that stays up, also when aiming */
.cross.mg::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border: 1.5px solid var(--fg); border-radius: 50%; box-shadow: 0 0 2px rgba(0,0,0,.8); }
.cross.mg::before { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; transform: translate(-50%, -50%); background: var(--hit); border-radius: 50%; }
/* grenades left, and the "grenade near you" warning that points at it */
.slots .nades i { letter-spacing: .1em; color: var(--accent); }
.slots .nades.empty i { color: var(--muted); }
.nadewarn { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.nw-icon { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(226, 86, 60, .9); color: #fff; font-weight: 700; font-size: 18px; line-height: 30px; text-align: center; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.hitmark { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; transition: opacity .15s; }
.hitmark i { position: absolute; background: var(--fg); }
.hitmark i:nth-child(1) { left: calc(50% - 1px); top: 0; width: 2px; height: 9px; }
.hitmark i:nth-child(2) { left: calc(50% - 1px); bottom: 0; width: 2px; height: 9px; }
.hitmark i:nth-child(3) { top: calc(50% - 1px); left: 0; height: 2px; width: 9px; }
.hitmark i:nth-child(4) { top: calc(50% - 1px); right: 0; height: 2px; width: 9px; }
.hitmark.on { opacity: 1; transition: none; }
.hitmark.head i { background: var(--accent); }
.hitmark.kill i { background: var(--hit); }
.hitmark.veh i { background: #9fb4c0; }
.hitmark.vkill i { background: #ff9a30; }
.vignette { position: absolute; inset: 0; box-shadow: inset 0 0 160px 40px rgba(200, 30, 20, .55); opacity: 0; transition: opacity .5s; }
.vignette.on { opacity: 1; transition: none; }
.topleft { position: absolute; left: 18px; top: 14px; }
.mapname { font-weight: 700; font-size: 22px; letter-spacing: .06em; }
.mapname span { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--fg); opacity: .85; margin-left: 8px; letter-spacing: 0; }
.ping { font-family: var(--mono); font-size: 11px; color: var(--fg); opacity: .8; }
.health { position: absolute; left: 18px; bottom: 16px; display: grid; grid-template-columns: auto 180px; grid-template-rows: auto auto; column-gap: 12px; align-items: end; }
.hp-num { grid-row: span 2; font-weight: 700; font-size: 52px; line-height: .85; font-variant-numeric: tabular-nums; }
.hp-bar { height: 8px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.15); }
.hp-bar div { height: 100%; width: 100%; background: var(--ok); transition: width .15s; }
.hp-bar div.low { background: var(--hit); }
.hp-label, .ammo-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.ammo { position: absolute; right: 18px; bottom: 16px; text-align: right; font-weight: 700; font-size: 52px; line-height: .85; font-variant-numeric: tabular-nums; }
.ammo small { font-size: 22px; color: var(--muted); margin-left: 6px; }
.ammo.low #ammo { color: var(--hit); }
.ammo-label { margin-top: 6px; }
.feed { position: absolute; right: 18px; top: 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-family: var(--mono); font-size: 12.5px; }
.feed div { background: rgba(15,17,10,.72); padding: 4px 9px; border-right: 2px solid var(--line); animation: fade 6s forwards; }
.feed div.me { border-right-color: var(--accent); }
.feed .k { color: var(--fg); }
.feed .x { color: var(--hit); margin: 0 6px; }
.feed .hs { color: var(--accent); margin-left: 6px; }
@keyframes fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
.center-msg { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); text-align: center; text-transform: uppercase; }
.center-msg .big { white-space: nowrap; font-weight: 700; font-size: 44px; letter-spacing: .04em; color: var(--hit); }
.center-msg .small { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-top: 6px; text-transform: none; }
.streak { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font-weight: 700; font-size: 26px; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); background: var(--panel); border: 1px solid var(--line); padding: 14px 16px; }
.board-head { display: flex; justify-content: space-between; font-weight: 700; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.board-head span:last-child { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted); }
.scoreboard table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.scoreboard th { text-align: left; color: var(--muted); font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.scoreboard td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.05); }
.scoreboard th:not(:first-child), .scoreboard td:not(:first-child) { text-align: right; width: 56px; }
.scoreboard tr.me td { color: var(--accent); }
.scoreboard td .bot { color: var(--muted); }
.paused { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,12,8,.55); pointer-events: auto; }
.paused-card { background: var(--panel); border: 1px solid var(--line); padding: 20px 22px; width: min(420px, calc(100% - 32px)); }
.paused-card h2 { margin: 0; font-family: var(--display); font-size: 36px; text-transform: uppercase; letter-spacing: .04em; }
.paused-card p { margin: 4px 0 0; color: var(--muted); font-family: var(--body); }
#resume { display: block; }
.tag3d { position: absolute; transform: translate(-50%, -100%); font-family: var(--mono); font-size: 11px; color: var(--fg); background: rgba(15,17,10,.55); padding: 1px 6px; white-space: nowrap; }
@media (max-width: 640px) { .health { grid-template-columns: auto 110px; } .hp-num, .ammo { font-size: 40px; } }

.prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.prompt b { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--fg); border-radius: 4px; font-size: 18px; }
.vehhud { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); text-align: center; display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; }
.kmh { font-weight: 700; font-size: 56px; line-height: .9; font-variant-numeric: tabular-nums; }
.kmh small { font-size: 18px; color: var(--muted); margin-left: 6px; letter-spacing: .1em; }
.vbar { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.vbar .bar { width: 180px; height: 8px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.15); }
.vbar .bar div { height: 100%; width: 100%; background: var(--ok); transition: width .15s; }
.vbar .bar div.mid { background: var(--accent); }
.vbar .bar div.low { background: var(--hit); }
.vbar b { color: var(--fg); font-weight: 500; min-width: 3ch; text-align: left; }
.ammo.hot #ammo { color: #ff8a2a; }
.veh-keys { font-family: var(--mono); font-size: 11px; color: var(--fg); opacity: .8; max-width: min(520px, 60vw); line-height: 1.5; }

/* ---------- weapons */
.guns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gun { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 3px; background: rgba(0,0,0,.3); }
.gun[aria-pressed="true"] { border-color: var(--accent); background: rgba(217,180,74,.12); }
.gun:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gun-name { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .05em; text-transform: uppercase; }
.gun-name small { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.stat { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stat .bar { height: 4px; background: rgba(255,255,255,.1); }
.stat .bar i { display: block; height: 100%; background: var(--fg); }
.gun[aria-pressed="true"] .stat .bar i { background: var(--accent); }
.slots { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); }
.slots span { display: flex; gap: 5px; align-items: center; opacity: .6; }
.slots span.on { opacity: 1; color: var(--fg); }
.slots b { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 2px; font-size: 10px; }
.slots i { font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
.scope { position: absolute; inset: 0; pointer-events: none; }
.scope-ring { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0, transparent min(36vh, 36vw), #050605 calc(min(36vh, 36vw) + 1px)); }
.scope-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(min(72vh, 72vw)); height: calc(min(72vh, 72vw)); transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 40px 10px rgba(0,0,0,.65); }
.scope .sh, .scope .sv { position: absolute; background: #0a0b0a; }
.scope .sh { left: calc(50% - min(36vh, 36vw)); right: calc(50% - min(36vh, 36vw)); top: calc(50% - 1px); height: 2px; }
.scope .sv { top: calc(50% - min(36vh, 36vw)); bottom: calc(50% - min(36vh, 36vw)); left: calc(50% - 1px); width: 2px; }
.loadout { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,12,8,.6); pointer-events: auto; }
.loadout-card { background: var(--panel); border: 1px solid var(--line); padding: 18px 20px; width: min(520px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 10px; }
.loadout-head { display: flex; justify-content: space-between; align-items: center; }
.loadout-head h2 { margin: 0; font-family: var(--display); font-size: 34px; text-transform: uppercase; letter-spacing: .04em; }
#loadoutClose { all: unset; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border: 1px solid var(--line); border-radius: 3px; }
#loadoutClose:focus-visible { outline: 2px solid var(--accent); }
.loadout-note { margin: 0; font-family: var(--body); color: var(--muted); font-size: 14px; }
.slots span.nades { opacity: 1; }

/* spare ammo running low, and the "picked up supplies" note */
.ammo small.low { color: var(--hit); }
.pickup { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: #ffd34d; text-shadow: 0 1px 3px rgba(0,0,0,.8); }

/* radio subtitle: HQ calls show top-left while the voice plays */
.radio { position: absolute; left: 18px; top: 62px; display: flex; flex-direction: column; gap: 3px; max-width: 340px; padding: 7px 11px 8px; background: rgba(15,17,10,.72); border-left: 2px solid var(--accent); }
.radio b { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--accent); font-weight: 600; }
.radio span { font-size: 14px; font-weight: 600; color: var(--fg); }

/* supply drop marker: a red diamond over the crate with the gun and the distance */
.dropmark { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: -10px 0 0 -60px; width: 120px; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.dropmark i { width: 13px; height: 13px; background: #ff4a36; transform: rotate(45deg); box-shadow: 0 0 10px rgba(255,74,54,.7); }
.dropmark b { margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #ff8a7a; font-weight: 600; }
.dropmark span { font-family: var(--mono); font-size: 11px; color: var(--fg); }

/* round clock under the ping */
.roundclock { margin-top: 4px; font-family: var(--mono); font-size: 13px; color: var(--accent); letter-spacing: .06em; }
/* admin console (F10) */
.console { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(760px, 96vw); height: 46vh; display: flex; flex-direction: column; background: rgba(12,14,9,.94); border: 1px solid #3a3f2e; border-top: none; z-index: 30; font-family: var(--mono); font-size: 12.5px; pointer-events: auto; }
.con-head { padding: 7px 12px; color: var(--accent); letter-spacing: .14em; font-size: 11px; border-bottom: 1px solid #2c3024; display: flex; justify-content: space-between; }
.con-head span { color: #8a8d7e; letter-spacing: 0; }
.con-log { flex: 1; overflow-y: auto; padding: 8px 12px; white-space: pre-wrap; line-height: 1.45; color: #d8d6c8; }
.con-log .cmd { color: #e8e4d4; margin-top: 4px; }
.con-log .ok { color: #b7c98a; }
.con-log .err { color: #e07a62; }
.con-log .dim { color: #8a8d7e; }
.con-in { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #2c3024; }
.con-in b { color: var(--accent); }
.con-in input { flex: 1; background: transparent; border: none; outline: none; color: #f0eee2; font: inherit; }

/* teams: Woodland green, Desert sand */
.tn0 { color: #a8c878; } .tn1 { color: #e3b86c; }
.tag3d.mate { color: #c9e6a0; border-bottom: 2px solid #8fb35a; }
.tag3d.mate::after { content: "▼"; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-size: 9px; color: #8fb35a; }
.tag3d.foe { color: #f0a594; }
.teambar { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 5px 14px; background: rgba(15,17,10,.72); font-family: var(--display); font-size: 18px; letter-spacing: .08em; white-space: nowrap; }
.teambar b { font-size: 24px; margin: 0 4px; color: var(--fg); }
.teambar i { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.teambar .mine { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.modebanner { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 30px 16px; background: rgba(15,17,10,.8); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); text-align: center; pointer-events: none; }
.modebanner small { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; color: var(--accent); }
.modebanner b { font-family: var(--display); font-size: 40px; letter-spacing: .12em; line-height: 1.05; }
.modebanner span { font-size: 15px; color: var(--fg); }
.modebanner em { font-style: normal; font-weight: 600; }
.scoreboard tr.teamhead td { font-family: var(--display); font-size: 16px; letter-spacing: .1em; padding-top: 10px; border-bottom: 1px solid var(--line); }
.feed .tn0 { color: #a8c878; } .feed .tn1 { color: #e3b86c; }

.teambar .row { display: flex; align-items: center; gap: 14px; }
/* Domination: point strip under the score, capture bar, floating letters */
.teambar .pts { display: flex; gap: 6px; }
.teambar .pt { position: relative; width: 26px; height: 26px; display: grid; place-items: center; font-family: var(--display); font-size: 16px; color: var(--fg); background: rgba(216,214,200,.12); border: 1px solid #55594a; overflow: hidden; }
.teambar .pt::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--k); background: var(--c); opacity: .55; }
.teambar .pt.o0 { border-color: #7fa34a; } .teambar .pt.o1 { border-color: #d9a650; }
.teambar .pt.x { border-color: #e2563c; animation: ptx .6s infinite alternate; }
@keyframes ptx { to { box-shadow: 0 0 8px #e2563c; } }
.capbar { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); width: 300px; text-align: center; }
.capbar .cap-t { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; margin-bottom: 5px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.capbar .cap-t b { font-family: var(--display); font-size: 18px; color: var(--accent); margin-right: 4px; }
.capbar .cap-bar { height: 8px; background: rgba(15,17,10,.75); border: 1px solid #55594a; }
.capbar .cap-bar i { display: block; height: 100%; }
.ptmark { position: absolute; left: 0; top: 0; margin: -16px 0 0 -16px; width: 32px; display: flex; flex-direction: column; align-items: center; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.ptmark b { width: 24px; height: 24px; display: grid; place-items: center; font-family: var(--display); font-size: 16px; color: var(--fg); background: rgba(15,17,10,.6); border: 2px solid #d8d6c8; }
.ptmark.o0 b { border-color: #7fa34a; color: #c9e6a0; } .ptmark.o1 b { border-color: #d9a650; color: #f0d3a0; }
.ptmark.x b { border-color: #e2563c; }
.ptmark span { font-family: var(--mono); font-size: 10px; color: var(--fg); margin-top: 2px; }

/* Capture the Flag */
.teambar .flags { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
.teambar .fl.carried { animation: ptx .6s infinite alternate; }
.teambar .fl.dropped { opacity: .85; font-style: italic; }
.flagmark { position: absolute; left: 0; top: 0; margin: -18px 0 0 -70px; width: 140px; display: flex; flex-direction: column; align-items: center; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.flagmark b { font-size: 22px; line-height: 1; }
.flagmark.t0 b { color: #8fb35a; } .flagmark.t1 b { color: #e3b86c; }
.flagmark span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--fg); background: rgba(15,17,10,.55); padding: 1px 5px; margin-top: 1px; white-space: nowrap; }
.flagmark.urgent span { color: #ffd34d; border: 1px solid #ffd34d; }
.flagcarry { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 18px; background: rgba(15,17,10,.75); border: 2px solid #ffd34d; text-align: center; }
.flagcarry b { font-family: var(--display); font-size: 24px; letter-spacing: .12em; color: #ffd34d; }
.flagcarry span { font-size: 13px; }

/* player settings */
.linkbtn { all: unset; cursor: pointer; display: block; margin-top: 10px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.linkbtn:hover, .linkbtn:focus-visible { color: var(--accent); }
.settings { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(8,10,6,.6); padding: 16px; }
.settings-card { width: min(480px, 100%); max-height: 100%; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); padding: 18px 22px 16px; backdrop-filter: blur(6px); }
.settings-head { display: flex; justify-content: space-between; align-items: center; }
.settings-head h2 { margin: 0; font-family: var(--display); font-size: 32px; text-transform: uppercase; letter-spacing: .04em; }
.set-x { all: unset; cursor: pointer; padding: 7px 16px; background: var(--accent); color: #17180f; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; }
.settings-card h3 { margin: 16px 0 4px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.set-row { display: grid; grid-template-columns: 1fr 150px 54px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.set-lab { display: grid; } .set-lab span { font-size: 14px; } .set-lab small { color: var(--muted); font-size: 11.5px; }
.set-row input[type=range] { width: 100%; accent-color: var(--accent); }
.set-row output { font-family: var(--mono); font-size: 12px; text-align: right; }
.set-check { grid-template-columns: 1fr auto; cursor: pointer; }
.set-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.set-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.set-foot button { all: unset; cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--fg); border: 1px solid var(--line); padding: 5px 10px; }
.set-foot button:hover { border-color: var(--accent); }
@media (max-width: 520px) { .set-row { grid-template-columns: 1fr 110px 48px; } }
.settings .set-check { font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--fg); margin-top: 0; }

/* Gun Game ladder */
.ggbar { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 12px; background: rgba(15,17,10,.72); white-space: nowrap; }
.gg-steps { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.gg-steps i { font-style: normal; opacity: .5; }
.gg-steps .done { color: #6f735f; text-decoration: line-through; }
.gg-steps .now { color: #17180f; background: var(--accent); padding: 1px 6px; font-weight: 500; }
.gg-info { font-family: var(--mono); font-size: 12px; color: var(--fg); letter-spacing: .04em; }
.gg-info b { color: var(--accent); font-size: 14px; }
.scoreboard td { white-space: nowrap; }

/* Last Man Standing */
.lmsbar { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 6px 16px; background: rgba(15,17,10,.72); font-family: var(--mono); font-size: 13px; letter-spacing: .06em; white-space: nowrap; }
.lmsbar b { font-family: var(--display); font-size: 24px; color: var(--accent); margin-right: 2px; }
.lmsbar em { font-style: normal; color: #ff8a64; animation: ptx .6s infinite alternate; }
.zonewarn { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 18px; background: rgba(60,14,6,.75); border: 2px solid #ff6a3d; }
.zonewarn b { font-family: var(--display); font-size: 26px; letter-spacing: .12em; color: #ffb39a; }
.zonewarn span { font-size: 13px; }
.zonemark b { color: #ff8a64; }
.specbar { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); padding: 6px 14px; background: rgba(15,17,10,.72); font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; }
.specbar b { color: var(--accent); }

/* helicopter nose marker (pilot, first person) */
#noseMark { position: fixed; left: 0; top: 0; display: flex; align-items: center; gap: 6px; pointer-events: none; z-index: 4; filter: drop-shadow(0 0 2px rgba(0,0,0,.7)); }
#noseMark[hidden] { display: none; }
#noseMark i { width: 34px; height: 2px; background: #b9f2a0; }
#noseMark b { width: 14px; height: 14px; border: 2px solid #b9f2a0; border-radius: 50%; }

/* server password on the join screen */
#joinPw { background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 3px; color: var(--fg); padding: 9px 12px; font-size: 16px; outline: none; }
#joinPw:focus { border-color: var(--accent); }
#joinPw[hidden], #joinPwLab[hidden] { display: none; }

/* killcam: letterbox bars, who got you and with what, how to skip */
#killcam { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
#killcam[hidden] { display: none; }
#killcam::before, #killcam::after { content: ''; position: absolute; left: 0; right: 0; height: 9vh; background: rgba(8,9,6,.82); }
#killcam::before { top: 0; } #killcam::after { bottom: 0; }
.kc-top { position: absolute; top: calc(9vh + 14px); left: 50%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 12px; padding: 6px 14px; background: rgba(0,0,0,.45); border-left: 3px solid #d9483b; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; }
.kc-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: #ff7b6e; }
.kc-who { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg); }
.kc-how { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kc-skip { position: absolute; bottom: calc(9vh + 14px); left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
#hud.kc .health, #hud.kc .ammo, #hud.kc #vignette, #hud.kc #teamBar, #hud.kc #capBar, #hud.kc #radio { visibility: hidden; }