:root {
  --ink: #0d0f17;
  --ink2: rgba(13, 15, 23, 0.82);
  --line: rgba(255, 236, 214, 0.14);
  --fg: #f1ece4;
  --dim: #a59c96;
  --sodium: #ffae57;
  --t0: #58c7d8;
  --t1: #f0a050;
  --bad: #ff5a4a;
  --font: Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8f7a8a; color: var(--fg); font-family: var(--font); user-select: none; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }

/* ------------------------------------------------ screens and panels */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 15; pointer-events: none; }
.overlay .panel { pointer-events: auto; }
.panel { background: var(--ink2); border: 1px solid var(--line); padding: clamp(16px, 3.6svh, 26px) clamp(20px, 2.4vw, 30px); backdrop-filter: blur(6px); box-shadow: 0 20px 60px rgba(0,0,0,0.45); }
.screen > .panel { max-height: calc(100svh - 32px); }
h2 { margin: 0 0 clamp(10px, 2.2svh, 16px); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 15px; color: var(--sodium); }
.small { font-size: 13px; color: var(--dim); line-height: 1.5; }

#splash { flex-direction: column; gap: clamp(14px, 3.6svh, 26px); background: radial-gradient(ellipse at 30% 70%, rgba(13,15,23,0.1), rgba(13,15,23,0.7)); }
#splash .press { font-size: 18px; letter-spacing: 0.3em; text-transform: uppercase; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

.brand .logo { font-size: clamp(44px, min(5vw, 9svh), 64px); font-weight: 700; letter-spacing: 0.08em; font-stretch: condensed; line-height: 0.95;
  background: linear-gradient(180deg, #fff2df 20%, #ffae57 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 30px rgba(255, 140, 60, 0.25); }
.brand.big .logo { font-size: clamp(64px, min(9vw, 16svh), 120px); text-align: center; }
.brand .tag { margin-top: clamp(4px, 1.2svh, 10px); font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: #e8d9cc; opacity: 0.85; }
.brand.big .tag { text-align: center; }

#menu { justify-content: flex-start; background: linear-gradient(90deg, rgba(13,15,23,0.86) 0%, rgba(13,15,23,0.55) 34%, rgba(13,15,23,0) 60%); }
.menu-col { width: min(460px, 40vw); margin-left: 7vw; max-height: calc(100svh - 32px); display: flex; flex-direction: column; gap: clamp(14px, 4svh, 34px); }
.items { display: flex; flex-direction: column; gap: clamp(1px, 0.5svh, 4px); }
.nav-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-left: 3px solid transparent; padding: clamp(6px, 1.4svh, 11px) 16px; font-size: clamp(16px, 2.4svh, 18px); letter-spacing: 0.05em; color: var(--fg); transition: background .12s, border-color .12s; }
.nav-item label { cursor: pointer; }
.nav-item .val { color: var(--sodium); font-variant-numeric: tabular-nums; }
.nav-item.sel .val::before { content: '\25C2  '; opacity: 0.5; }
.nav-item.sel .val::after { content: '  \25B8'; opacity: 0.5; }
.nav-item.focus { background: rgba(255, 174, 87, 0.12); border-left-color: var(--sodium); }
.nav-item.primary { font-size: clamp(21px, 3.4svh, 26px); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff4e6; }
.nav-item.primary.focus { background: linear-gradient(90deg, rgba(255,174,87,0.32), rgba(255,174,87,0.04)); }
.nav-item[disabled] { opacity: 0.4; }
.status { font-size: 13px; color: var(--dim); letter-spacing: 0.04em; line-height: 1.6; padding-left: 16px; }
.status b { color: var(--fg); font-weight: 600; }
.status .ok { color: #8be38b; }

/* options */
.opt-wrap { display: flex; gap: 22px; align-items: flex-start; max-height: calc(100svh - 32px); }
.opt-panel { width: 470px; }
.opt-panel .nav-item { font-size: clamp(14px, 2.1svh, 15px); padding: clamp(3px, 0.9svh, 8px) 12px; }
.opt-panel .items { margin-bottom: clamp(6px, 1.4svh, 10px); }
.opt-panel .sl { flex: 1; height: 4px; background: rgba(255,255,255,0.15); position: relative; margin: 0 6px; max-width: 170px; }
.opt-panel .sl i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sodium); }
.opt-panel output { min-width: 54px; text-align: right; color: var(--sodium); font-variant-numeric: tabular-nums; }
.opt-panel label { flex: 0 0 170px; }
.readout-panel { width: 440px; font-size: 13px; max-height: calc(100svh - 32px); overflow: hidden; }
#readout .dev { margin-bottom: 12px; line-height: 1.5; }
#readout .dev b { color: var(--fg); }
#readout .kind { display: inline-block; padding: 1px 7px; margin-right: 6px; background: rgba(255,174,87,0.18); color: var(--sodium); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
#readout .axes { display: grid; grid-template-columns: 70px 1fr 52px; gap: 3px 8px; align-items: center; margin: 8px 0; font-variant-numeric: tabular-nums; }
#readout .ab { height: 8px; background: rgba(255,255,255,0.1); position: relative; }
#readout .ab i { position: absolute; top: 0; bottom: 0; background: var(--t0); }
#readout .ab::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,0.35); }
#readout .btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#readout .btns span { padding: 2px 6px; border: 1px solid var(--line); color: var(--dim); font-size: 11px; min-width: 30px; text-align: center; }
#readout .btns span.on { background: var(--sodium); color: #1b1208; border-color: var(--sodium); }
#readout .sticks { display: flex; gap: 18px; margin: 10px 0; }
#readout .stick { width: 92px; height: 92px; border: 1px solid var(--line); border-radius: 50%; position: relative; }
#readout .stick .dz { position: absolute; border: 1px dashed rgba(255,255,255,0.25); border-radius: 50%; }
#readout .stick i { position: absolute; width: 10px; height: 10px; margin: -5px; background: var(--sodium); border-radius: 50%; }
#readout .stick em { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-style: normal; color: var(--dim); font-size: 11px; }

.controls-panel { width: min(860px, 92vw); }
#controlsTable { width: 100%; border-collapse: collapse; font-size: clamp(13px, 2.1svh, 15px); margin-bottom: clamp(8px, 1.8svh, 14px); }
#controlsTable th { text-align: left; color: var(--dim); font-weight: 400; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 8px; }
#controlsTable td { padding: clamp(3px, 0.8svh, 6px) 8px; border-top: 1px solid var(--line); }
#controlsTable kbd { line-height: 1.3; padding: 0 6px; }
@media (max-height: 700px) { #controlsTable td { padding: 2px 8px; } #controlsTable { font-size: 13px; } }
.controls-panel .small { margin: 0 0 clamp(6px, 1.4svh, 10px); }
#controlsTable td:first-child { color: var(--sodium); }
kbd { display: inline-block; padding: 1px 7px; border: 1px solid rgba(255,255,255,0.3); border-bottom-width: 2px; font: 12px var(--font); margin-right: 3px; }

.list-panel { width: 360px; }
.results-panel { width: min(860px, 94vw); }
.res-title { font-size: clamp(36px, 7svh, 54px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.05; }
.res-sub { color: var(--dim); margin: 4px 0 clamp(8px, 2.2svh, 18px); letter-spacing: 0.1em; }
/* the two team tables sit side by side so the card stays short */
#resTable .sb { width: calc(50% - 8px); display: inline-table; vertical-align: top; font-size: 14px; }
#resTable .sb + .sb { margin-left: 16px; }
#resTable .sb td { padding: clamp(2px, 0.6svh, 5px) 6px; }
#resTable .sb th { padding: 3px 6px; }
.res-actions { display: grid; grid-template-columns: repeat(2, 220px); gap: 10px; margin-top: clamp(10px, 2.4svh, 20px); }
.res-actions .nav-item, .res-actions .nav-item.primary { justify-content: center; background: rgba(255,236,214,0.05); font-size: clamp(16px, 2.4svh, 18px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* scoreboard tables (results + hold) */
.sb { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.sb th { font-weight: 400; color: var(--dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; text-align: right; padding: 3px 8px; }
.sb th:first-child, .sb td:first-child { text-align: left; }
.sb td { padding: 5px 8px; text-align: right; border-top: 1px solid var(--line); }
.sb tr.me td { background: rgba(255,255,255,0.06); }
.sb tr.dead td { opacity: 0.45; }
.sb caption { text-align: left; font-weight: 700; letter-spacing: 0.16em; padding: 6px 8px; }
.sb.t0 caption { color: var(--t0); } .sb.t1 caption { color: var(--t1); }
.sb-panel { width: 640px; }

/* ------------------------------------------------ HUD */
/* Shared layer: the match bar (scores, clock), view dividers, the spare quarter with three players.
   Everything first-person lives in one .vhud per player, laid over that player's viewport. A .vhud's
   inner box is laid out at (viewport / scale) and then scaled, so the same HUD reads the same in a
   full screen, a half and a quarter. */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
#views { position: absolute; inset: 0; }
.vhud { position: absolute; overflow: hidden; }
.vhud .vin { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.vdiv { position: absolute; background: #07080c; z-index: 2; }

#topbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 0; z-index: 3; }
#topbar.mid { top: 50%; transform: translate(-50%, -50%) scale(0.72); box-shadow: 0 0 0 3px #07080c; }
#topbar .side { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--ink2); }
#topbar .side b { font-size: 30px; min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
#topbar .s0 b, #topbar .s0 .tname { color: var(--t0); } #topbar .s1 b, #topbar .s1 .tname { color: var(--t1); }
#topbar .tname { font-size: 11px; letter-spacing: 0.2em; }
.pips { display: flex; gap: 3px; }
.pips i { width: 7px; height: 18px; background: currentColor; opacity: 0.9; }
.pips i.h { box-shadow: inset 0 -5px 0 rgba(255,255,255,0.85); }
.s0 .pips { color: var(--t0); } .s1 .pips { color: var(--t1); }
.pips i.dead { opacity: 0.18; }
#clock { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 96px; padding: 4px 12px; background: rgba(13,15,23,0.92); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
#timer { font-size: 26px; font-variant-numeric: tabular-nums; }
#clock em { font-style: normal; font-size: 10px; letter-spacing: 0.25em; color: var(--sodium); }
#clock.low #timer { color: var(--bad); }
#spare { position: absolute; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(28,24,32,0.96), #0b0c12); }
#spare .spare-in { width: 88%; }
#spare .sb { font-size: 13px; margin-bottom: 8px; }
#spare .sb td { padding: 3px 8px; }

.vhud .radar { position: absolute; top: 14px; left: 14px; width: 184px; height: 184px; border-radius: 50%; background: rgba(13,15,23,0.55); border: 1px solid var(--line); }
.vhud .feed { position: absolute; top: 14px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kf { background: var(--ink2); padding: 5px 10px; font-size: 14px; display: flex; gap: 8px; align-items: center; animation: kfin .2s ease-out; }
.kf.me { border: 1px solid rgba(255, 174, 87, 0.7); }
.kf .t0 { color: var(--t0); } .kf .t1 { color: var(--t1); }
.kf i { font-style: normal; color: var(--dim); font-size: 12px; letter-spacing: 0.06em; }
.kf .hs { color: #fff; font-size: 12px; }
@keyframes kfin { from { opacity: 0; transform: translateX(16px); } }

.vhud .crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --gap: 6px; }
.crosshair i { position: absolute; background: #e9fff0; box-shadow: 0 0 0 1px rgba(0,0,0,0.55); }
.crosshair .ch-l, .crosshair .ch-r { width: 9px; height: 2px; top: -1px; }
.crosshair .ch-t, .crosshair .ch-b { width: 2px; height: 9px; left: -1px; }
.crosshair .ch-l { right: var(--gap); } .crosshair .ch-r { left: var(--gap); }
.crosshair .ch-t { bottom: var(--gap); } .crosshair .ch-b { top: var(--gap); }
.crosshair .ch-dot { width: 2px; height: 2px; left: -1px; top: -1px; }
.vhud .hitmarker { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
.hitmarker i { position: absolute; width: 10px; height: 2px; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,0.8); }
.hitmarker i:nth-child(1) { transform: translate(5px, 5px) rotate(45deg); } .hitmarker i:nth-child(2) { transform: translate(-15px, 5px) rotate(-45deg); }
.hitmarker i:nth-child(3) { transform: translate(5px, -7px) rotate(-45deg); } .hitmarker i:nth-child(4) { transform: translate(-15px, -7px) rotate(45deg); }
.hitmarker.kill i { background: var(--bad); }
.hitmarker.head i { width: 13px; }

.vhud .dmgdirs { position: absolute; left: 50%; top: 50%; }
.dd { position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%; opacity: 0;
  background: conic-gradient(from -22deg, rgba(255,70,50,0.85) 0deg, rgba(255,70,50,0) 44deg, transparent 44deg);
  -webkit-mask: radial-gradient(circle, transparent 74px, #000 76px, #000 88px, transparent 90px); mask: radial-gradient(circle, transparent 74px, #000 76px, #000 88px, transparent 90px); }

.vhud .vitals { position: absolute; left: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.vhud .money { font-size: 20px; color: #9be59b; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.vit { display: flex; align-items: center; gap: 10px; background: var(--ink2); padding: 6px 12px 6px 10px; min-width: 230px; }
.vit .ic { font-size: 11px; letter-spacing: 0.12em; color: var(--dim); width: 20px; }
.vit b { font-size: 30px; min-width: 52px; font-variant-numeric: tabular-nums; }
.vit .bar { flex: 1; height: 4px; background: rgba(255,255,255,0.12); }
.vit .bar i { display: block; height: 100%; background: var(--fg); transition: width .15s; }
.vit.low b { color: var(--bad); } .vit.low .bar i { background: var(--bad); }
.vit.armour b { font-size: 20px; } .vit.armour .bar i { background: #8fb4d9; }

.vhud .weapon { position: absolute; right: 20px; bottom: 18px; text-align: right; background: var(--ink2); padding: 8px 16px 10px; min-width: 190px; }
.weapon .wname { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.weapon .ammo b { font-size: 40px; font-variant-numeric: tabular-nums; }
.weapon .ammo span { margin: 0 6px; color: var(--dim); font-size: 22px; }
.weapon .ammo em { font-style: normal; font-size: 20px; color: var(--dim); font-variant-numeric: tabular-nums; }
.weapon.empty .ammo b { color: var(--bad); }
.weapon .reloadbar { height: 3px; background: rgba(255,255,255,0.1); margin-top: 4px; opacity: 0; }
.weapon .reloadbar i { display: block; height: 100%; width: 0; background: var(--sodium); }

.vhud .banner { position: absolute; left: 0; right: 0; top: 24%; text-align: center; opacity: 0; transition: opacity .3s; }
.banner.show { opacity: 1; }
.banner b { display: block; font-size: 46px; letter-spacing: 0.14em; text-transform: uppercase; }
.banner span { display: block; font-size: 15px; letter-spacing: 0.25em; text-transform: uppercase; color: #e8d9cc; margin-top: 6px; }
.banner.t0 b { color: var(--t0); } .banner.t1 b { color: var(--t1); }

.vhud .hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 13px; letter-spacing: 0.08em; color: #e8d9cc; background: rgba(13,15,23,0.6); padding: 5px 12px; white-space: nowrap; }
.vhud .hint:empty { display: none; }
.vhud.split .hint { bottom: 64px; }
.vhud .keys { position: absolute; top: 210px; left: 14px; width: 268px; background: var(--ink2); border: 1px solid var(--line); padding: 8px 10px 9px; font-size: 12px; transition: opacity 0.6s; }
.keys.off { opacity: 0; }
.keys.quiet { opacity: 0.7; width: auto; max-width: 268px; }
.keys.quiet .kg-goal { margin-bottom: 2px; }
.keys.quiet .kg-rows { display: none; }
.keys.quiet::after { content: attr(data-hint); display: block; color: var(--dim); font-size: 11px; letter-spacing: 0.06em; }
.keys .kg-goal { color: var(--sodium); font-size: 12px; letter-spacing: 0.06em; margin-bottom: 6px; }
.keys .kg-rows div { display: flex; gap: 8px; align-items: baseline; padding: 1.5px 0; }
.keys .kg-rows b { flex: 0 0 auto; min-width: 92px; font-weight: 600; color: var(--fg); background: rgba(255,236,214,0.08); padding: 0 5px; text-align: center; font-size: 11px; letter-spacing: 0.04em; }
.keys .kg-rows span { color: var(--dim); }
.keys .kg-rows .hot b { background: var(--sodium); color: var(--ink); }
.keys .kg-rows .hot span { color: var(--fg); animation: kgPulse 1.1s ease-in-out infinite alternate; }
@keyframes kgPulse { from { opacity: 1; } to { opacity: 0.55; } }
/* short views (two stacked, four in a grid): the guide sits to the right of the radar */
.vhud.short .keys { top: 14px; left: 212px; }
.vhud.short .ptag { top: 206px; left: 14px; }
/* scope: a circle 68% of the view's height, the rest black */
.vhud .scope { position: absolute; inset: 0; display: none; background: radial-gradient(circle closest-side at center, transparent 0, transparent 68%, #050507 68.8%); }
.vhud .scope.on { display: block; }
.scope .reticle { position: absolute; left: 50%; top: 16%; height: 68%; aspect-ratio: 1; transform: translateX(-50%); background:
  linear-gradient(#000, #000) center / 1px 100% no-repeat,
  linear-gradient(#000, #000) center / 100% 1px no-repeat; }
.vhud .hurt { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(170, 20, 10, 0.55) 100%); }
/* player badge (split screen only): whose view this is */
.vhud .ptag { position: absolute; left: 210px; top: 18px; display: none; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; background: var(--ink2); border-left: 4px solid var(--pc, var(--sodium));
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em; color: var(--pc, var(--sodium)); }
.vhud.split .ptag { display: flex; }
.ptag em { font-style: normal; font-weight: 400; font-size: 11px; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; }
#fps { position: absolute; right: 8px; top: 50%; font-size: 11px; color: var(--dim); z-index: 4; }

/* buy menu (inside a player's view) */
.vhud .buy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vhud .buy .panel { pointer-events: auto; }
.buy-panel { width: 560px; margin-right: 30%; }
.vhud.split .buy-panel { margin-right: 0; }
.buy-head { display: flex; justify-content: space-between; align-items: baseline; }
.buy-head span { font-size: 22px; color: #9be59b; font-variant-numeric: tabular-nums; }
.buy-head em { font-style: normal; color: var(--dim); margin-left: 12px; font-size: 13px; }
.buy-row { display: grid; grid-template-columns: 26px 1fr 120px 80px; align-items: center; gap: 8px; }
.buy-row .key { color: var(--dim); font-size: 12px; }
.buy-row .nm b { display: block; font-size: 18px; } .buy-row .nm span { font-size: 12px; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; }
.buy-row .stats { display: flex; flex-direction: column; gap: 3px; }
.buy-row .stats div { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 4px; font-size: 9px; color: var(--dim); letter-spacing: 0.1em; }
.buy-row .stats s { display: block; height: 3px; background: rgba(255,255,255,0.12); text-decoration: none; position: relative; }
.buy-row .stats s i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sodium); }
.buy-row .price { text-align: right; font-variant-numeric: tabular-nums; }
.buy-row.owned .price { color: #9be59b; }
.buy-row.poor .price { color: var(--bad); }
.vhud .sbv { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* split views: round messages sit under the crosshair, clear of the radar and the key guide */
.vhud.split .banner { top: 58%; }
.vhud.split .banner b { font-size: 38px; }
.vhud.above-bar .vitals, .vhud.above-bar .weapon { bottom: 34px; }
.vhud.below-bar .radar, .vhud.below-bar .feed, .vhud.below-bar .keys { top: 40px; }
.vhud.below-bar .ptag { top: 232px; }
.vhud.below-bar.short .keys { top: 40px; }
.vhud.below-bar:not(.short) .keys { top: 236px; }

/* ------------------------------------------------ gulls: the afterlife (gull.js) */
.vhud .toast { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; color: #ffe1b8; white-space: nowrap; opacity: 0; transition: opacity .25s; }
.vhud .toast.show { opacity: 1; }
.vhud.split .toast { top: 72%; }
.vhud .gullhud { position: absolute; inset: 0; display: none; }
.vhud.gullmode .gullhud { display: block; }
.vhud.gullmode .vitals, .vhud.gullmode .weapon, .vhud.gullmode .dmgdirs { display: none; }
.vhud.dead .vitals, .vhud.dead .weapon { display: none; }
.greticle { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; --cd: 1; transition: transform .12s; }
.greticle::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(246, 243, 236, 0.95) calc(var(--cd) * 360deg), rgba(246, 243, 236, 0.2) 0);
  -webkit-mask: radial-gradient(circle, transparent 18px, #000 19px, #000 22px, transparent 23px); mask: radial-gradient(circle, transparent 18px, #000 19px, #000 22px, transparent 23px);
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.9)); }
.greticle::after { content: ''; position: absolute; left: 21px; top: 21px; width: 4px; height: 4px; border-radius: 50%; background: #f6f3ec; box-shadow: 0 0 0 1px rgba(0,0,0,0.6); }
.greticle b { position: absolute; left: 0; right: 0; top: 52px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--dim); }
.greticle.ready::before { background: conic-gradient(var(--sodium) 360deg, var(--sodium) 0); }
.greticle.lock { transform: scale(1.18); }
.greticle.lock::before { background: conic-gradient(#ff5a3c 360deg, #ff5a3c 0); }
.glock { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; }
.glock i { position: absolute; width: 14px; height: 16px; border: 3px solid #ff5a3c; filter: drop-shadow(0 0 2px rgba(0,0,0,0.8)); animation: glock .7s ease-in-out infinite alternate; }
.glock i:nth-child(1) { left: -28px; top: -40px; border-right: 0; border-bottom: 0; }
.glock i:nth-child(2) { left: 14px; top: -40px; border-left: 0; border-bottom: 0; }
.glock i:nth-child(3) { left: -28px; top: 24px; border-right: 0; border-top: 0; }
.glock i:nth-child(4) { left: 14px; top: 24px; border-left: 0; border-top: 0; }
@keyframes glock { to { opacity: 0.55; } }
/* where the vitals were: the bird itself owns the bottom centre of the view */
.gstatus { position: absolute; left: 18px; bottom: 18px; min-width: 270px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--ink2); border-left: 4px solid var(--pc, var(--sodium)); padding: 8px 18px 10px 14px; }
.gstatus .gname { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--pc, var(--sodium)); }
.gstatus b { font-size: 20px; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; }
.gstatus em { font-style: normal; font-size: 12px; letter-spacing: 0.06em; color: var(--dim); white-space: nowrap; }
.vhud.above-bar .gstatus { bottom: 34px; }
.kf .wing { width: 20px; height: 10px; fill: none; stroke: #e8e4dc; stroke-width: 1.8; stroke-linecap: round; }
.kf.gull { background: rgba(30, 34, 44, 0.85); }
/* blinded by an enemy gull: a wing sweeps across, a white wash, feathers drifting off */
.vhud .gulled { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.gulled.on { animation: gulled 1.7s ease-in forwards; }
@keyframes gulled { 0% { opacity: 1; } 65% { opacity: 0.9; } 100% { opacity: 0; } }
.gwash { position: absolute; inset: -10%; background: radial-gradient(ellipse at 50% 48%, rgba(246,243,236,0.97) 0%, rgba(232,228,220,0.9) 32%, rgba(200,196,190,0.5) 60%, rgba(120,116,112,0) 86%); }
.gulled.on .gwash { animation: gwash 1.7s ease-out forwards; }
@keyframes gwash { 0% { transform: scale(0.6); } 14% { transform: scale(1.04); } 55% { opacity: 0.85; } 100% { transform: scale(1.3); opacity: 0; } }
.gwing { position: absolute; width: 130%; left: -15%; top: 16%; fill: #9ea7b1; transform: translateX(-120%); }
.gwing .tip { fill: #1f2328; }
.gulled.on .gwing { animation: gwing .4s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes gwing { from { transform: translateX(-110%) rotate(-14deg); } to { transform: translateX(125%) rotate(10deg); } }
/* the feather shape is a <use> clone: page CSS cannot reach inside it, so the colour comes in as currentColor */
.gfeathers { position: absolute; inset: 0; width: 100%; height: 100%; color: #f4f1ea; }
.gfeathers g { transform-box: fill-box; transform-origin: center; }
.gfeathers .f2, .gfeathers .f5, .gfeathers .f8 { color: #c9ced4; }
.gulled.on .gfeathers g { animation: fdrift 1.7s cubic-bezier(.15,.6,.35,1) forwards; }
.f1 { --dx: -170px; --dy: 140px; --r: -70deg; } .f2 { --dx: 190px; --dy: 90px; --r: 80deg; } .f3 { --dx: 40px; --dy: 230px; --r: -140deg; } .f4 { --dx: -90px; --dy: 200px; --r: 50deg; }
.f5 { --dx: 220px; --dy: 210px; --r: -40deg; } .f6 { --dx: -240px; --dy: 160px; --r: 120deg; } .f7 { --dx: 30px; --dy: 120px; --r: 200deg; } .f8 { --dx: 260px; --dy: 60px; --r: -90deg; }
@keyframes fdrift { from { transform: translate(0, -20px) rotate(0); } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }

/* ------------------------------------------------ split-screen lobby */
#lobby { background: linear-gradient(180deg, rgba(13,15,23,0.9), rgba(13,15,23,0.72) 60%, rgba(13,15,23,0.9)); }
.lobby-wrap { width: min(1240px, 94vw); max-height: calc(100svh - 32px); display: flex; flex-direction: column; gap: clamp(12px, 3.4svh, 26px); }
.lobby-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.lobby-head .logo { font-size: clamp(38px, min(4vw, 7svh), 52px); }
.lobby-head .tag { white-space: nowrap; }
.lobby-opts .lopt span { white-space: nowrap; }
.lobby-opts { display: grid; grid-template-columns: repeat(2, 290px); gap: 6px; }
.lopt { display: flex; align-items: center; gap: 12px; background: var(--ink2); border: 1px solid var(--line); padding: clamp(5px, 1.1svh, 8px) 12px; font-size: 16px; text-align: left; cursor: pointer; }
.lopt.static { cursor: default; }
.lopt label { color: var(--dim); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; flex: 0 0 82px; cursor: inherit; }
.lopt span { color: var(--sodium); flex: 1; }
.lopt .lk { margin: 0; color: var(--dim); line-height: 1.3; white-space: nowrap; }
.lopt { white-space: nowrap; min-height: 38px; }
.lobby-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lslot { position: relative; min-height: clamp(220px, 40svh, 300px); background: var(--ink2); border: 1px solid var(--line); border-top: 4px solid rgba(255,255,255,0.1); padding: clamp(12px, 2.4svh, 18px) 18px; display: flex; flex-direction: column; gap: clamp(6px, 1.4svh, 10px); }
.lslot.on { border-top-color: var(--pc); }
.lslot .pn { font-size: clamp(30px, 5.4svh, 40px); font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,0.18); line-height: 1; }
.lslot.on .pn { color: var(--pc); }
.lslot .dev { font-size: 14px; color: var(--fg); letter-spacing: 0.04em; min-height: 18px; }
.lslot .team { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: rgba(255,255,255,0.05); font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; }
.lslot .team.t0 { color: var(--t0); } .lslot .team.t1 { color: var(--t1); }
.lslot .team i { font-style: normal; color: var(--dim); }
.lslot .state { margin-top: auto; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.lslot .state.ready { color: #8be38b; }
.lslot .how { font-size: 13px; color: var(--dim); line-height: 1.7; }
.lslot .how kbd { color: var(--fg); }
.lslot.empty .join { margin: auto 0; text-align: center; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); }
.lslot.empty .join b { display: block; font-weight: 400; animation: blink 1.6s ease-in-out infinite; }
.lslot.empty .join small { display: block; margin-top: clamp(4px, 1svh, 10px); font-size: 12px; letter-spacing: 0.06em; text-transform: none; color: var(--dim); }
.lobby-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
#lStatus { font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sodium); }
#lStatus.go { color: #8be38b; }
.split-entry .val { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }

/* splash loading bar: shown until every asset has loaded or fallen back */
#loadbar { width: min(360px, 70vw); display: flex; flex-direction: column; align-items: center; gap: 8px; }
#loadbar::before { content: ''; display: block; width: 100%; height: 3px; background: rgba(255,255,255,0.12); }
#loadbar i { display: block; align-self: flex-start; height: 3px; width: 0; margin-top: -11px; background: var(--sodium, #ffb347); transition: width 0.2s; }
#loadbar span { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim, #9aa); }
body:not(.loaded) #splash .press { visibility: hidden; }
body.loaded #loadbar { display: none; }

/* browser phones (games/lib/mimic-link.js): a scan-to-join QR in the first empty slot */
.lslot .ljoin { margin-top: auto; display: flex; justify-content: center; color: var(--dim); }

/* single view on a short laptop screen: a smaller radar and a tighter key guide keep clear of the cash and vitals */
@media (max-height: 700px) {
  .vhud:not(.split) .radar { width: 150px; height: 150px; }
  .vhud:not(.split) .keys { top: 174px; }
  .vhud:not(.split) .keys .kg-rows div { padding: 0; }
}