/* Boltline: full-window WebGL arena, glass HUD, lobby and overlays. No inline styles anywhere (CSP). */
/* the site's font files are variable fonts (one file per family holds every weight), so one face each: four
   single-weight faces downloaded the same two files twice */
@font-face { font-family: "Unbounded"; font-weight: 500 800; font-display: swap; src: url("/assets/fonts/unbounded-800.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/sora-500.woff2") format("woff2"); }

:root { --spawn: #31e981; --ink-on-spawn: #0b1a12; --font-display: "Unbounded", system-ui, sans-serif; --font-body: "Sora", system-ui, sans-serif; --fg: #f4f1ea; --fg-2: rgba(244, 241, 234, 0.72); --line: rgba(255, 255, 255, 0.16); --glass: rgba(8, 10, 22, 0.62); --glass-2: rgba(255, 255, 255, 0.08); --amber: #ffa23a; --cobalt: #3a9bff; --bad: #ff4d5a; --ch: #7dffb3; --ch-gap: 6px; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #0a0c14; color: var(--fg); font-family: var(--font-body); font-weight: 500; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-font-smoothing: antialiased; touch-action: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; }
kbd { font: 700 0.78em var(--font-body); background: rgba(255,255,255,0.12); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
#game { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; outline: 0; cursor: crosshair; }
.nogl { position: fixed; inset: 40% 16px auto; text-align: center; font-weight: 700; }
.nogl[hidden] { display: none; }
#tags, #dmg { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; transform: translate(-9999px, -9999px); margin-left: -70px; width: 140px; text-align: center; font-size: 0.72rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.9); white-space: nowrap; }
.tag .bar { display: block; height: 3px; width: 54px; margin: 2px auto 0; background: rgba(0,0,0,0.5); border-radius: 2px; overflow: hidden; }
.tag .bar i { display: block; height: 100%; width: 100%; background: var(--cobalt); }
.tag.enemy { color: #ffb3b3; } .tag.enemy .bar i { background: var(--bad); }
.tag.ally { color: #bfe3ff; }
.tag[hidden] { display: none; }
.dn { position: absolute; left: 0; top: 0; transform: translate(-9999px, -9999px); font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 10px rgba(255,220,120,.5); white-space: nowrap; }
.dn.head { color: #ffe36f; font-size: 1.15rem; }
.dn.kill { color: #ff7a6b; }

/* ---------------------------------------------------------------- HUD */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; font-size: 0.9rem; }
.hud[hidden] { display: none; }
.hud-top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: max(10px, env(safe-area-inset-top)) 14px 0; gap: 10px; }
.match { display: flex; align-items: center; gap: 10px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.mode { font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--spawn); }
.timer { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.teambar { display: flex; align-items: center; gap: 6px; }
.teambar[hidden] { display: none; }
/* team scores (not .tb: that class is the touch buttons, whose absolute layout stacked these on top of each other) */
.tscore { min-width: 34px; text-align: center; font-weight: 800; border-radius: 8px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.tscore-a { background: rgba(255,162,58,0.25); color: #ffd09a; } .tscore-b { background: rgba(58,155,255,0.25); color: #bfe0ff; }
.tscore-vs { font-size: 0.7rem; color: var(--fg-2); }
.ffa-score { font-size: 0.8rem; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ffa-score[hidden] { display: none; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; max-width: 42vw; }
.feed li { background: rgba(8, 10, 22, 0.55); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 0.78rem; white-space: nowrap; animation: slidein 0.2s; }
.feed li.me { border-color: var(--spawn); }
.feed li .k { font-weight: 800; } .feed li .w { color: var(--fg-2); margin: 0 6px; } .feed li .hs { color: #ffe36f; }
@keyframes slidein { from { transform: translateY(-6px); opacity: 0; } }
.hud-tr { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.chip { background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip[hidden] { display: none; }
#minimap { width: 168px; height: 168px; border-radius: 50%; border: 2px solid var(--line); background: rgba(8, 10, 22, 0.6); }
.announce { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 3.2vw, 2.2rem); letter-spacing: 0.04em; text-align: center; text-shadow: 0 2px 20px rgba(0,0,0,.8); animation: pop 0.3s; white-space: nowrap; }
.announce small { display: block; font: 700 0.42em var(--font-body); color: var(--fg-2); letter-spacing: 0.08em; margin-top: 4px; }
.announce[hidden] { display: none; }
.announce.bad { color: #ffb3b3; } .announce.good { color: #b3ffd0; } .announce.gold { color: #ffe36f; }
.objective { position: absolute; left: 0; top: 0; transform: translate(-9999px, -9999px); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.72rem; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.objective[hidden] { display: none; }
.obj-ic { width: 26px; height: 26px; border-radius: 6px; border: 2px solid #fff; background: rgba(255,255,255,0.2); transform: rotate(45deg); box-shadow: 0 0 12px rgba(255,255,255,0.5); }
.objective.a .obj-ic { border-color: var(--amber); } .objective.b .obj-ic { border-color: var(--cobalt); } .objective.hot .obj-ic { border-color: var(--bad); animation: blink 0.4s infinite alternate; }
.hill-bar { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); width: 220px; height: 22px; border-radius: 999px; background: rgba(8,10,22,0.6); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; }
.hill-bar[hidden] { display: none; }
.hill-fill { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,0.25); }
.hill-bar span { position: relative; }
@keyframes blink { to { opacity: 0.4; } }
.crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.crosshair i { position: absolute; background: var(--ch); box-shadow: 0 0 2px rgba(0,0,0,0.9); border-radius: 1px; }
.ch-t, .ch-b { width: 2px; height: 8px; left: -1px; } .ch-l, .ch-r { width: 8px; height: 2px; top: -1px; }
.ch-t { bottom: var(--ch-gap); } .ch-b { top: var(--ch-gap); } .ch-l { right: var(--ch-gap); } .ch-r { left: var(--ch-gap); }
.ch-dot { width: 3px; height: 3px; left: -1.5px; top: -1.5px; border-radius: 50%; }
.ch-ring { width: calc(var(--ch-gap) * 2 + 8px); height: calc(var(--ch-gap) * 2 + 8px); left: calc(-1 * var(--ch-gap) - 4px); top: calc(-1 * var(--ch-gap) - 4px); border-radius: 50%; background: none; border: 1.5px solid var(--ch); display: none; }
.crosshair.dot .ch { display: none; } .crosshair.circle .ch { display: none; } .crosshair.circle .ch-ring { display: block; }
.crosshair.tri .ch-t, .crosshair.tri .ch-dot { display: none; } .crosshair.tri .ch-l, .crosshair.tri .ch-r { transform: rotate(0deg); }
.crosshair.cross .ch-dot { display: none; }
.crosshair[hidden] { display: none; }
/* aiming through a sight: the cross gives way to one bright dot in the middle of the lens */
.crosshair.aim .ch, .crosshair.aim .ch-ring { display: none; }
.crosshair.aim .ch-dot { display: block; width: 5px; height: 5px; left: -2.5px; top: -2.5px; box-shadow: 0 0 7px var(--ch), 0 0 2px rgba(0,0,0,0.9); }
/* the scope picture (sniper, marksman rifle): black outside a round lens, a reticle inside, nothing of the gun.
   --sk runs 0..1 as the scope comes up (set from the game loop): the picture fades in and closes onto the eye */
.scope { --sk: 1; --sr: 39vmin; position: absolute; inset: 0; opacity: var(--sk); transform: scale(calc(1.3 - 0.3 * var(--sk))); background: radial-gradient(circle at center, transparent calc(var(--sr) - 1px), #020305 var(--sr)); }
.scope-lens { position: absolute; left: 50%; top: 50%; width: calc(var(--sr) * 2); height: calc(var(--sr) * 2); margin: calc(var(--sr) * -1) 0 0 calc(var(--sr) * -1); border-radius: 50%; box-shadow: inset 0 0 0 3px #020305, inset 0 0 0 4px rgba(255,255,255,0.07), inset 0 0 9vmin rgba(0,0,0,0.62); background: radial-gradient(circle at 34% 28%, rgba(170,205,255,0.06), transparent 46%); }
.reticle { position: absolute; inset: 0; width: 100%; height: 100%; display: none; filter: drop-shadow(0 0 1px rgba(255,255,255,0.45)); }
.scope-arbalest .ret-sniper, .scope-warden .ret-dmr { display: block; }
.scope-warden { --sr: 42vmin; }
.scope[hidden] { display: none; }
.hitmarker { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
.hitmarker i { position: absolute; width: 2px; height: 9px; background: #fff; left: -1px; top: -1px; box-shadow: 0 0 3px rgba(0,0,0,.9); }
.hitmarker i:nth-child(1) { transform: translate(-7px, -11px) rotate(-45deg); } .hitmarker i:nth-child(2) { transform: translate(7px, -11px) rotate(45deg); }
.hitmarker i:nth-child(3) { transform: translate(-7px, 3px) rotate(45deg); } .hitmarker i:nth-child(4) { transform: translate(7px, 3px) rotate(-45deg); }
.hitmarker.show { opacity: 1; transition: none; } .hitmarker.fade { opacity: 0; transition: opacity 0.25s; }
.hitmarker.head i { background: #ffe36f; } .hitmarker.kill i { background: #ff5a4a; height: 12px; }
.dmgdir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.dmgdir i { position: absolute; left: -40px; top: -4px; width: 80px; height: 8px; transform-origin: 40px 4px; background: radial-gradient(ellipse at center, rgba(255,70,70,0.9), rgba(255,70,70,0)); opacity: 0; transition: opacity 0.6s; }
.hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 14px max(12px, env(safe-area-inset-bottom)); gap: 10px; }
.hud-bl { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.chat { pointer-events: auto; max-width: min(380px, 46vw); }
#chat-log { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
#chat-log li { font-size: 0.78rem; text-shadow: 0 1px 3px rgba(0,0,0,.9); word-break: break-word; }
#chat-log li b { color: #bfe0ff; } #chat-log li.a b { color: #ffd09a; } #chat-log li.sys { color: var(--fg-2); font-style: italic; }
.chat-in input { width: min(380px, 46vw); background: rgba(8,10,22,0.8); border: 1px solid var(--spawn); border-radius: 10px; color: var(--fg); padding: 8px 10px; font: inherit; }
.chat-in[hidden], .quick[hidden] { display: none; }
.quick { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.quick button { background: rgba(8,10,22,0.8); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 0.74rem; cursor: pointer; }
.quick button b { color: var(--spawn); margin-right: 4px; }
.vitals { display: flex; align-items: center; gap: 10px; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 16px; padding: 8px 14px 8px 8px; }
.class-badge { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #0b0d14; background: var(--spawn); }
.hp { display: flex; align-items: center; gap: 10px; }
.hp-bar { position: relative; width: 170px; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #31e981, #7dffb3); transition: width 0.15s; }
.hp-fill.low { background: linear-gradient(90deg, #ff4d5a, #ff9a6b); }
.hp-prot { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.35) 0 6px, transparent 6px 12px); animation: slideprot 0.6s linear infinite; }
.hp-prot[hidden] { display: none; }
@keyframes slideprot { to { background-position: 17px 0; } }
.hp-num { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; min-width: 46px; font-variant-numeric: tabular-nums; }
.streak { font-size: 0.72rem; font-weight: 800; color: #ffe36f; letter-spacing: 0.06em; }
.streak[hidden] { display: none; }
.weapon { display: flex; align-items: baseline; gap: 12px; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 16px; padding: 10px 16px; }
.w-name { font-size: 0.78rem; font-weight: 700; color: var(--fg-2); }
.w-ammo b { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.w-ammo b.low { color: #ff9a6b; } .w-ammo b.empty { color: var(--bad); }
.w-ammo small { color: var(--fg-2); font-size: 0.85rem; margin-left: 4px; }
.w-gadget { font-size: 0.85rem; color: #ffe36f; letter-spacing: 0.15em; }
.w-gadget.none { color: rgba(255,255,255,0.25); }
.weapon.reloading .w-ammo b { animation: reloading 0.7s ease-in-out infinite alternate; }
@keyframes reloading { from { opacity: 1; } to { opacity: 0.35; } }
.respawn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; background: rgba(8,10,22,0.78); border: 1px solid var(--line); border-radius: 22px; padding: 18px 24px; pointer-events: auto; width: min(520px, 92vw); }
.respawn[hidden] { display: none; }
.respawn h2 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.rs-timer { margin: 0; color: var(--fg-2); } .rs-timer b { color: #fff; font-family: var(--font-display); font-size: 1.4rem; }
.rs-classes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 12px 0 6px; }
.rs-classes button { background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-radius: 12px; padding: 8px 4px; font-size: 0.7rem; font-weight: 700; cursor: pointer; }
.rs-classes button.on { border-color: var(--spawn); background: rgba(49,233,129,0.15); }
.rs-classes button i { display: block; width: 24px; height: 24px; border-radius: 8px; margin: 0 auto 4px; }
/* scoreboard, settings, leave: in the column under the radar (at a fixed height they ended up on top of the radar
   whenever the FPS chip above it was showing, which is the default) */
.hud-tools { display: flex; gap: 6px; pointer-events: auto; }
.tool { background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer; color: var(--fg); }
.lock-hint { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); margin: 0; font-size: 0.8rem; color: var(--fg-2); background: rgba(8,10,22,0.7); padding: 8px 14px; border-radius: 999px; }
.lock-hint[hidden] { display: none; }

.tool-ic { display: inline-grid; place-items: center; padding: 6px 10px; }
.tool-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* touch: a floating stick on the left; on the right, buttons the game hit-tests itself (pointer-events: none, the
   canvas gets every touch), so a thumb that lands on a button can keep dragging to turn the view. Each button is
   placed by its centre, measured from the bottom right corner (--x, --y), and its size (--s). */
.touch { position: absolute; inset: 0; pointer-events: none; }
.touch[hidden], .hud.dead .touch { display: none; }
.stick { position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: max(26px, env(safe-area-inset-bottom)); width: 128px; height: 128px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.22); transition: border-color 0.15s, box-shadow 0.15s; }
.stick-nub { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,0.32); border: 1.5px solid rgba(255,255,255,0.55); }
.stick.sprint { border-color: var(--spawn); box-shadow: 0 0 0 3px rgba(49,233,129,0.18), inset 0 0 22px rgba(49,233,129,0.2); }
.stick.sprint .stick-nub { background: rgba(49,233,129,0.55); border-color: var(--spawn); }
.tbtns { position: absolute; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); width: 0; height: 0; }
.tb { --x: 0px; --y: 0px; --s: 50px; position: absolute; right: calc(var(--x) - var(--s) / 2); bottom: calc(var(--y) - var(--s) / 2); width: var(--s); height: var(--s); display: grid; place-items: center; align-content: center; gap: 1px; pointer-events: none; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); background: rgba(8,10,22,0.46); color: rgba(255,255,255,0.94); transition: transform 0.06s, background 0.08s; }
.tb svg { width: calc(var(--s) * 0.42); height: calc(var(--s) * 0.42); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb span { font-size: 0.5rem; font-weight: 800; letter-spacing: 0.09em; line-height: 1; opacity: 0.85; margin-top: -1px; }
.tb-ads svg, .tb-jump svg, .tb-crouch svg { width: calc(var(--s) * 0.36); height: calc(var(--s) * 0.36); }
.tb.on { background: rgba(49,233,129,0.42); border-color: var(--spawn); transform: scale(0.93); }
.tb-fire { --x: 68px; --y: 78px; --s: 98px; background: rgba(255,77,90,0.4); border-color: rgba(255,140,148,0.95); border-width: 2px; }
.tb-fire svg { width: calc(var(--s) * 0.4); height: calc(var(--s) * 0.4); fill: rgba(255,255,255,0.16); }
.tb-fire.on { background: rgba(255,77,90,0.78); border-color: #fff; }
.tb-ads { --x: 152px; --y: 134px; --s: 64px; }
.tb-ads.active { background: rgba(49,233,129,0.32); border-color: var(--spawn); box-shadow: 0 0 0 3px rgba(49,233,129,0.22); color: #d9ffe9; }
.tb-jump { --x: 166px; --y: 50px; --s: 64px; }
.tb-crouch { --x: 244px; --y: 44px; --s: 56px; }
.tb-reload { --x: 60px; --y: 172px; --s: 50px; }
.tb-switch { --x: 122px; --y: 208px; --s: 48px; }
.tb-gadget { --x: 232px; --y: 116px; --s: 50px; }
.tb-gadget svg { display: none; }
.tb-gadget.g-frag .i-frag, .tb-gadget.g-smoke .i-smoke, .tb-gadget.g-barrier .i-barrier { display: block; }
.tb-gadget b { position: absolute; right: -3px; top: -3px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 10px; display: grid; place-items: center; background: #ffe36f; color: #1c1600; font-size: 0.66rem; font-weight: 800; }
.tb-gadget.none { opacity: 0.38; } .tb-gadget.none b { background: rgba(255,255,255,0.5); }
.tb-melee { --x: 206px; --y: 190px; --s: 46px; }
.tb-reload.busy { border-color: #ffe36f; color: #ffe36f; } .tb-reload.busy svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- overlays */
.overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(3, 4, 12, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: auto; }
.overlay[hidden] { display: none; }
.card { width: 100%; max-width: 520px; color: var(--fg); background: linear-gradient(180deg, rgba(20, 24, 46, 0.97), rgba(8, 10, 24, 0.99)); border: 1px solid var(--line); border-radius: 26px; padding: 26px 24px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); animation: pop 0.28s cubic-bezier(.2,.9,.2,1.2); max-height: calc(100dvh - 32px); overflow: auto; }
.card-wide { max-width: 760px; } .card-lobby { max-width: 720px; } .card-settings { max-width: 560px; }
@keyframes pop { from { transform: scale(0.94) translateY(10px); opacity: 0; } }
.kicker { margin: 0 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--spawn); }
.card h1, .card h2 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.card h1 { font-size: 2.2rem; } .card h2 { font-size: 1.45rem; }
.card h3 { margin: 16px 0 8px; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.muted { color: var(--fg-2); margin: 0; line-height: 1.55; font-size: 0.95rem; }
.muted.small, .small { font-size: 0.8rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 11px 20px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); background: var(--glass-2); color: var(--fg); text-decoration: none; }
.btn-primary { background: var(--spawn); color: var(--ink-on-spawn); border-color: var(--spawn); }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn[hidden] { display: none; }
/* the scoreboard while Tab is held: a look, not a menu (the mouse stays on the aim, so no buttons) */
#ov-board.peek { background: rgba(3, 4, 12, 0.3); backdrop-filter: none; -webkit-backdrop-filter: none; }
#ov-board.peek .card { animation: none; background: linear-gradient(180deg, rgba(20, 24, 46, 0.9), rgba(8, 10, 24, 0.92)); }
#ov-board.peek .card-actions { display: none; }
.link { background: none; border: 0; padding: 0; color: var(--spawn); text-decoration: underline; cursor: pointer; font-weight: 700; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; margin-bottom: 10px; }
.brand svg { width: 26px; height: 26px; } .brand b { color: var(--spawn); }
.lobby-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.profile { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 120px; text-align: right; }
.lvl { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.xpbar { width: 120px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; } .xp-fill { display: block; height: 100%; width: 0; background: var(--spawn); }
.title { font-size: 0.74rem; color: var(--fg-2); }
.who { margin: 10px 0 0; color: var(--fg-2); font-size: 0.9rem; }
.classes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.cls { background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px 8px; text-align: center; cursor: pointer; position: relative; overflow: hidden; }
.cls i { display: block; width: 34px; height: 34px; border-radius: 10px; margin: 0 auto 6px; }
.cls b { display: block; font-size: 0.78rem; } .cls span { display: block; font-size: 0.66rem; color: var(--fg-2); margin-top: 2px; }
.cls.on { border-color: var(--spawn); background: rgba(49,233,129,0.14); }
.cls-desc { margin: 8px 0 0; font-size: 0.8rem; color: var(--fg-2); min-height: 2.4em; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modes, .maps { display: flex; flex-wrap: wrap; gap: 6px; }
.modes button, .maps button { background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.modes button.on, .maps button.on { border-color: var(--spawn); background: rgba(49,233,129,0.14); }
.maps button i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.lobby-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.join-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; }
.join-row form { display: flex; gap: 8px; }
.join-row input { width: 130px; background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; color: var(--fg); font: inherit; text-transform: uppercase; letter-spacing: 0.12em; }
.opt { font-size: 0.8rem; color: var(--fg-2); display: inline-flex; gap: 6px; align-items: center; }
.opt select, .set-grid select { background: rgba(255,255,255,0.08); border: 1px solid var(--line); border-radius: 8px; color: var(--fg); padding: 6px 8px; font: inherit; }
.status { margin: 10px 0 0; min-height: 1.2em; color: #ffd09a; font-size: 0.85rem; }
.lobby-foot { margin-top: 14px; font-size: 0.85rem; color: var(--fg-2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.lobby-foot a { color: var(--fg-2); }
.how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.how li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; font-size: 0.92rem; }
.how-ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #0b0d14; }
.ic-a { background: var(--spawn); } .ic-b { background: #ffe36f; } .ic-c { background: #7dc8ff; }
.keys { margin: 14px 0 0; font-size: 0.82rem; color: var(--fg-2); line-height: 1.7; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.set-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; color: var(--fg-2); position: relative; }
.set-grid label .val { position: absolute; right: 0; top: 0; color: var(--fg); font-weight: 700; }
.set-grid input[type=range] { width: 100%; accent-color: var(--spawn); }
.set-grid input[type=color] { width: 60px; height: 30px; border: 0; background: none; padding: 0; }
.set-grid .check { flex-direction: row; align-items: center; gap: 8px; }
#netgraph { display: block; width: 260px; height: 56px; margin: 14px 0 0; background: rgba(0,0,0,0.3); border-radius: 8px; }
#netgraph[hidden] { display: none; }
.board { display: grid; gap: 14px; }
.board.teams { grid-template-columns: 1fr 1fr; }
.board table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.board th { text-align: left; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); padding: 4px 6px; }
.board td { padding: 6px; border-top: 1px solid rgba(255,255,255,0.08); font-variant-numeric: tabular-nums; }
.board tr.me td { background: rgba(49,233,129,0.12); }
.board tr.dead td:nth-child(2) { color: var(--fg-2); }
.board td .bot { font-size: 0.64rem; color: var(--fg-2); margin-left: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
.board td .ci { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.board h4 { margin: 0 0 6px; font-family: var(--font-display); font-size: 0.95rem; }
.board h4.a { color: #ffd09a; } .board h4.b { color: #bfe0ff; }
.end-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 0; }
.end-stats div { background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.end-stats b { display: block; font-family: var(--font-display); font-size: 1.3rem; } .end-stats span { font-size: 0.7rem; color: var(--fg-2); letter-spacing: 0.08em; text-transform: uppercase; }
.xp-line { margin: 12px 0 0; color: #ffe36f; font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%) translateY(10px); z-index: 40; background: rgba(20, 20, 28, 0.92); border: 1px solid var(--line); color: var(--fg); padding: 10px 16px; border-radius: 999px; font-size: 0.88rem; font-weight: 700; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast[hidden] { display: none; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 900px) {
  .classes { grid-template-columns: repeat(3, 1fr); }
  .row2 { grid-template-columns: 1fr; gap: 6px; }
  .set-grid { grid-template-columns: 1fr; }
  .board.teams { grid-template-columns: 1fr; }
  .end-stats { grid-template-columns: repeat(2, 1fr); }
  .card h1 { font-size: 1.7rem; }
  .lobby-head { flex-direction: column; } .profile { align-items: flex-start; text-align: left; }
}
@media (max-height: 520px) {
  .hud { font-size: 0.8rem; }
  .hud-top { padding-top: 6px; }
  .match { padding: 5px 10px; gap: 8px; } .timer { font-size: 0.95rem; }
  #minimap { width: 96px; height: 96px; }
  /* short screens: the FPS chip goes beside the radar, not above it, so the tools stay clear of the buttons below */
  .hud-tr { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: start; gap: 6px; }
  .hud-tr .chip-net { grid-column: 1; grid-row: 1; } .hud-tr #minimap { grid-column: 2; grid-row: 1; } .hud-tr .hud-tools { grid-column: 1 / 3; grid-row: 2; justify-self: end; }
  .feed { max-width: 36vw; } .feed li { font-size: 0.7rem; padding: 3px 9px; }
  .vitals { padding: 5px 10px 5px 5px; gap: 8px; } .class-badge { width: 32px; height: 32px; font-size: 0.85rem; } .hp-bar { width: 110px; height: 9px; } .hp-num { font-size: 1rem; min-width: 36px; }
  .weapon { padding: 6px 12px; } .w-ammo b { font-size: 1.15rem; }
  .hud-bottom { padding-bottom: 8px; }
  .chat { max-width: 40vw; } #chat-log li { font-size: 0.7rem; }
  .stick { width: 108px; height: 108px; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); } .stick-nub { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .tb-fire { --x: 58px; --y: 66px; --s: 84px; } .tb-ads { --x: 130px; --y: 114px; --s: 56px; } .tb-jump { --x: 142px; --y: 42px; --s: 56px; }
  .tb-crouch { --x: 210px; --y: 38px; --s: 50px; } .tb-reload { --x: 52px; --y: 146px; --s: 44px; } .tb-switch { --x: 106px; --y: 176px; --s: 42px; }
  .tb-gadget { --x: 198px; --y: 100px; --s: 44px; } .tb-melee { --x: 178px; --y: 160px; --s: 40px; }
  .tb span { font-size: 0.44rem; }
  .respawn { padding: 10px 14px; } .respawn h2 { font-size: 1rem; } .rs-classes { margin: 6px 0 4px; } .rs-classes button { padding: 5px 2px; font-size: 0.6rem; } .rs-classes button i { width: 16px; height: 16px; } .respawn .small { display: none; }
  .hill-bar { top: 44px; width: 160px; height: 18px; font-size: 0.64rem; }
  .card { padding: 16px 16px 14px; }
}
/* narrow screens (a phone held upright, for those who play it that way): a compact top row and dock */
@media (max-width: 560px) {
  #minimap { width: 92px; height: 92px; }
  .chip-net { display: none; }
  .hud-top { padding-left: 8px; padding-right: 8px; }
  .match { padding: 5px 9px; gap: 6px; } .timer { font-size: 0.95rem; } .ffa-score { display: none; }
  .hill-bar { top: 46px; width: 140px; height: 18px; font-size: 0.62rem; }
  .hud-bottom { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 10px; }
  .hud-br { align-self: flex-start; }
  .weapon { padding: 5px 10px; gap: 8px; } .w-name { display: none; } .w-ammo b { font-size: 1.1rem; }
  .vitals { padding: 5px 10px 5px 5px; } .hp-bar { width: 90px; }
}
@media (max-height: 520px) and (min-width: 620px) {
  .overlay { padding: 8px; }
  .card { max-height: calc(100dvh - 16px); }
  .card-lobby { max-width: 860px; padding: 12px 18px 10px; }
  .card-lobby .brand { position: absolute; right: 18px; top: 12px; margin: 0; font-size: 0.74rem; } .card-lobby .brand svg { width: 18px; height: 18px; }
  .card-lobby { position: relative; }
  .lobby-head { flex-direction: row; align-items: center; gap: 12px; padding-right: 110px; } .lobby-head .kicker, .lobby-head .muted { display: none; }
  .card-lobby h1 { font-size: 1.25rem; margin: 0; }
  .profile { flex-direction: row; align-items: center; min-width: 0; gap: 8px; } .xpbar { width: 70px; } .lvl { font-size: 0.85rem; }
  .who { margin: 2px 0 0; font-size: 0.78rem; }
  .card-lobby h3 { margin: 8px 0 5px; font-size: 0.66rem; }
  .classes { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .cls { padding: 6px 4px 5px; border-radius: 12px; } .cls i { width: 20px; height: 20px; border-radius: 7px; margin-bottom: 3px; } .cls b { font-size: 0.72rem; } .cls span { font-size: 0.58rem; margin-top: 0; }
  .cls-desc { margin: 5px 0 0; font-size: 0.72rem; min-height: 0; }
  .row2 { grid-template-columns: 1fr 1.25fr; gap: 14px; }
  .modes button, .maps button { padding: 5px 10px; font-size: 0.72rem; }
  .lobby-actions { margin-top: 10px; gap: 8px; } .lobby-actions .btn { padding: 8px 14px; font-size: 0.86rem; } .lobby-actions .btn-lg { padding: 9px 20px; font-size: 0.95rem; }
  .join-row { margin-top: 8px; gap: 8px; } .join-row input { width: 112px; padding: 6px 12px; } .join-row .btn { padding: 6px 14px; }
  .status { margin: 4px 0 0; min-height: 0; font-size: 0.78rem; }
  .lobby-foot { margin-top: 6px; font-size: 0.78rem; }
  .how li { font-size: 0.82rem; line-height: 1.4; } .how { gap: 8px; } .how-ic { flex-basis: 24px; width: 24px; height: 24px; border-radius: 8px; }
  .card h2 { font-size: 1.15rem; margin-bottom: 6px; }
  .card-actions { margin-top: 10px; }
  .set-grid { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .end-stats { grid-template-columns: repeat(4, 1fr); margin-top: 8px; } .end-stats div { padding: 6px; } .end-stats b { font-size: 1.05rem; }
  .board.teams { grid-template-columns: 1fr 1fr; } .board td { padding: 3px 6px; } .board table { font-size: 0.78rem; } .board td .bot { display: none; }
}
@media (max-height: 400px) and (min-width: 620px) {
  .card-lobby { padding: 9px 16px 8px; } .card-lobby h3 { margin: 6px 0 4px; } .cls { padding: 5px 4px 4px; } .lobby-actions { margin-top: 8px; } .join-row { margin-top: 6px; } .lobby-foot { margin-top: 4px; }
  .how li { font-size: 0.78rem; line-height: 1.34; } .how { gap: 6px; } .card h2 { font-size: 1.05rem; } .card { padding: 12px 16px 10px; }
}
.card-rotate { text-align: center; max-width: 360px; }
.card-rotate .card-actions { justify-content: center; }
.rotate-ic { width: 46px; height: 76px; margin: 2px auto 14px; border: 3px solid var(--spawn); border-radius: 10px; animation: tilt 1.8s ease-in-out infinite; }
@keyframes tilt { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }

.set-grid .touch-only { display: none; }
.how-touch { display: none; }
/* touch screens: no mouse hint; health and ammo sit side by side at the bottom centre, clear of the stick on the left
   and the buttons on the right (they used to lie under both); chat lines move up under the match chip */
@media (pointer: coarse) {
  .lock-hint { display: none; } #game { cursor: default; }
  .set-grid .touch-only { display: flex; }
  .how-keys, .keys { display: none; } .how-touch { display: flex; }      /* the help card speaks thumbs, not keys */
  .hud-bottom { left: 190px; right: 300px; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: 6px 8px; padding: 0 0 max(6px, env(safe-area-inset-bottom)); }
  .hud-bl { flex-direction: row; align-items: flex-end; gap: 8px; }
  .chat { position: fixed; left: max(14px, env(safe-area-inset-left)); top: 56px; max-width: 38vw; pointer-events: none; }
  .vitals { padding: 5px 10px 5px 5px; gap: 8px; border-radius: 12px; } .class-badge { width: 28px; height: 28px; font-size: 0.8rem; border-radius: 9px; }
  .hp { gap: 8px; } .hp-bar { width: 96px; height: 8px; } .hp-num { font-size: 0.95rem; min-width: 32px; }
  .weapon { padding: 5px 12px; gap: 8px; border-radius: 12px; } .w-name, .w-gadget { display: none; } .w-ammo b { font-size: 1.05rem; } .w-ammo small { font-size: 0.74rem; }
  .toast { bottom: 64px; }
}
@media (pointer: coarse) and (max-height: 520px) {
  .hud-bottom { left: 150px; right: 256px; }
  /* taken out on a phone: the controls are hidden, so the class picker sits at the bottom, clear of the tools under
     the radar and of the view of whoever got you */
  .respawn { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
  .hud.dead .hud-bottom { visibility: hidden; }
}
/* a phone held upright: the dock is one centred row, the stick and the buttons sit above it */
@media (pointer: coarse) and (max-width: 560px) {
  .hud-bottom { left: 0; right: 0; flex-direction: row; align-items: flex-end; }
  .hud-br { align-self: auto; }
  .touch .stick { bottom: 64px; } .tbtns { bottom: 64px; }
}
@media (max-width: 560px) { .rs-classes { grid-template-columns: repeat(3, 1fr); } }