/* BREACHPOINT design system — one palette, one type system, no browser-default widgets. */
@font-face {
  font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/rajdhani-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/rajdhani-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}
:root {
  --bg: #0d0f12;
  --bg2: #12151b;
  --panel: #161a20;
  --panel2: #1c2129;
  --line: #2a313c;
  --text: #e8e6e0;
  --text-dim: #9aa3ad;
  --accent: #ffb454;
  --accent2: #ff8a3c;
  --team-a: #57c7b8;
  --team-b: #e0684e;
  --danger: #e84e4e;
  --ok: #7dd87d;
  --font: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --display: "Rajdhani", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; }
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button, input, select { font-family: var(--font); }

/* ---------- wordmark ---------- */
.wordmark {
  font-family: var(--display); font-size: 64px; letter-spacing: 0.16em; font-weight: 700;
  color: var(--text); text-transform: uppercase;
}
.wordmark::first-letter { color: var(--accent); }
.wordmark.small { font-size: 30px; }
.wordmark.mid { font-size: 40px; letter-spacing: .2em; }

/* ---------- desktop card ---------- */
#desktop-card { display: none; }
@media (max-width: 899px) {
  #desktop-card {
    display: flex; position: fixed; inset: 0; z-index: 1000;
    background: radial-gradient(120% 100% at 50% 0%, #1a1f27 0%, var(--bg) 70%);
    align-items: center; justify-content: center; text-align: center; padding: 24px;
  }
  #desktop-card h1 { font-family: var(--display); letter-spacing: .08em; margin: 18px 0 10px; color: var(--accent); }
  #desktop-card p { color: var(--text-dim); max-width: 420px; line-height: 1.5; }
  #hud, #screens { display: none !important; }
}

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#minimap {
  position: absolute; top: 18px; left: 18px; border: 1px solid var(--line);
  background: rgba(13,15,18,.72); border-radius: 4px;
}
#compass-wrap { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); }
#compass { opacity: .92; }
#match-status {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; align-items: center;
}
#match-status .score { font-family: var(--display); font-size: 26px; min-width: 44px; text-align: center; }
#match-status .team-a { color: var(--team-a); } #match-status .team-b { color: var(--team-b); }
#match-clock { font-size: 15px; color: var(--text-dim); letter-spacing: .1em; }
#zone-strip { position: absolute; top: 86px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.zone-pip {
  width: 34px; height: 26px; border: 1px solid var(--line); border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 15px; background: rgba(13,15,18,.7); color: var(--text-dim);
  transition: all .25s;
}
.zone-pip.own-a { background: rgba(87,199,184,.25); border-color: var(--team-a); color: var(--team-a); }
.zone-pip.own-b { background: rgba(224,104,78,.25); border-color: var(--team-b); color: var(--team-b); }
.zone-pip.contested { animation: pulse .6s infinite alternate; }
@keyframes pulse { from { filter: brightness(.8);} to { filter: brightness(1.4);} }

#killfeed { position: absolute; top: 18px; right: 18px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.kf-row {
  background: rgba(13,15,18,.72); border: 1px solid var(--line); border-radius: 3px;
  padding: 4px 10px; font-size: 12.5px; letter-spacing: .02em; animation: kf-in .18s ease-out;
}
.kf-row .k-a { color: var(--team-a); } .kf-row .k-b { color: var(--team-b); }
.kf-row .k-w { color: var(--text-dim); margin: 0 7px; font-size: 11px; }
.kf-row .k-me { color: var(--accent); font-weight: 600; }
.kf-row .k-hs { color: var(--danger); margin-left: 6px; }
@keyframes kf-in { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Centre column, top to bottom: compass, scoreline, announcer call-out, medal
   toasts. The announcer line used to sit inside the toast column's run, so a
   call-out printed straight through an earned medal. */
#medal-toasts { position: absolute; top: 142px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.medal-toast {
  display: flex; align-items: center; gap: 9px; background: rgba(13,15,18,.8);
  border: 1px solid var(--accent); border-radius: 3px; padding: 6px 16px;
  animation: toast .3s cubic-bezier(.2,1.4,.4,1);
}
.medal-toast .m-icon { width: 18px; height: 18px; color: var(--accent); flex: none; }
.medal-toast .m-icon svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 3px rgba(255,180,84,.45)); }
.medal-toast .m-name { font-family: var(--display); letter-spacing: .12em; font-size: 16px; color: var(--accent); }
@keyframes toast { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#crosshair { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ch-dot { position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 50%; left: -1.5px; top: -1.5px; box-shadow: 0 0 2px #000; }
.ch-l { position: absolute; background: #fff; box-shadow: 0 0 2px #000; transition: transform .08s; }
.ch-t { width: 2px; height: 7px; left: -1px; top: calc(-9px - var(--sp, 4px)); }
.ch-b { width: 2px; height: 7px; left: -1px; top: calc(3px + var(--sp, 4px)); }
.ch-lft { width: 7px; height: 2px; top: -1px; left: calc(-9px - var(--sp, 4px)); }
.ch-rgt { width: 7px; height: 2px; top: -1px; left: calc(3px + var(--sp, 4px)); }
#crosshair.ads .ch-l { opacity: 0; }

#hitmarker { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%,-50%) rotate(45deg); opacity: 0; }
#hitmarker::before, #hitmarker::after { content: ""; position: absolute; background: #fff; }
#hitmarker::before { left: 12px; top: 0; width: 2px; height: 26px; }
#hitmarker::after { top: 12px; left: 0; height: 2px; width: 26px; }
#hitmarker.show { animation: hm .18s ease-out; }
#hitmarker.kill::before, #hitmarker.kill::after { background: var(--danger); }
#hitmarker.kill { transform: translate(-50%,-50%) rotate(45deg) scale(1.35); }
@keyframes hm { 0% { opacity: 1; } 100% { opacity: 0; } }

#damage-dir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.dmg-arc {
  position: absolute; width: 120px; height: 120px; left: -60px; top: -60px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--danger); opacity: 0;
  animation: dmgarc 1.1s ease-out forwards;
}
@keyframes dmgarc { 0% { opacity: .95; } 100% { opacity: 0; } }

#health-wrap { position: absolute; left: 22px; bottom: 22px; width: 210px; }
#health-bar { height: 5px; background: var(--accent); width: 100%; transition: width .15s; box-shadow: 0 0 8px rgba(255,180,84,.4); }
#health-wrap::before { content: ""; display: block; height: 5px; background: var(--line); margin-bottom: -5px; }
#health-num { font-family: var(--display); font-size: 30px; margin-top: 5px; color: var(--text); }

#streak-meter { position: absolute; left: 22px; bottom: 84px; display: flex; gap: 7px; }
.streak-pip {
  width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 3px; background: rgba(13,15,18,.7);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: var(--text-dim);
}
.streak-pip .sp-icon { width: 17px; height: 17px; margin: 0 auto 2px; color: var(--text-dim); }
.streak-pip .sp-icon svg { width: 100%; height: 100%; display: block; }
.streak-pip.ready .sp-icon { color: var(--accent); }
.streak-pip .sp-k { font-family: var(--display); font-size: 15px; color: var(--text); }
.streak-pip.ready { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px rgba(255,180,84,.35); }
.streak-pip.ready .sp-k { color: var(--accent); }

#ammo-wrap { position: absolute; right: 26px; bottom: 22px; text-align: right; }
#ammo-mag { font-family: var(--display); font-size: 44px; line-height: 1; color: var(--text); }
#ammo-mag.low { color: var(--danger); }
#ammo-reserve { font-size: 15px; color: var(--text-dim); }
#ammo-name { font-size: 11px; letter-spacing: .14em; color: var(--text-dim); text-transform: uppercase; margin-top: 4px; }
#equip-row { position: absolute; right: 26px; bottom: 108px; display: flex; gap: 7px; }
.equip-chip { border: 1px solid var(--line); background: rgba(13,15,18,.7); border-radius: 3px; padding: 3px 9px; font-size: 11px; color: var(--text-dim); }
.equip-chip b { color: var(--text); }

#hint-bar {
  position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%);
  font-size: 12.5px; color: var(--text-dim); letter-spacing: .06em; text-align: center;
  text-shadow: 0 1px 3px #000;
}
#announcer-line {
  position: absolute; top: 104px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: 19px; letter-spacing: .18em; color: var(--accent);
  text-transform: uppercase; opacity: 0; transition: opacity .3s; text-shadow: 0 1px 4px #000;
}
#announcer-line.show { opacity: 1; }

#respawn-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(80% 60% at 50% 50%, rgba(120,10,10,.25), rgba(10,10,12,.72));
}
.rs-title { font-family: var(--display); font-size: 60px; letter-spacing: .3em; color: var(--danger); }
.rs-count { font-family: var(--display); font-size: 34px; margin-top: 8px; }
.rs-tip { color: var(--text-dim); margin-top: 10px; font-size: 13px; }

#killcam-overlay { position: absolute; inset: 0; pointer-events: none; }
/* cinema mode: everything that could collide with the killcam frame steps out */
#hud.kc-cinema #match-status, #hud.kc-cinema #compass-wrap, #hud.kc-cinema #minimap,
#hud.kc-cinema #zone-strip, #hud.kc-cinema #killfeed, #hud.kc-cinema #medal-toasts,
#hud.kc-cinema #crosshair, #hud.kc-cinema #hitmarker, #hud.kc-cinema #damage-dir,
#hud.kc-cinema #health-wrap, #hud.kc-cinema #streak-meter, #hud.kc-cinema #ammo-wrap,
#hud.kc-cinema #equip-row, #hud.kc-cinema #hint-bar, #hud.kc-cinema #announcer-line,
#hud.kc-cinema #scoreboard { display: none; }
.kc-tag {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: 30px; letter-spacing: .5em; color: var(--danger);
  border-top: 2px solid var(--danger); border-bottom: 2px solid var(--danger); padding: 3px 22px;
}
/* The killcam is the share moment, and its subject is the player who died.
   At 20-30 m a body is a few dozen pixels of a dusk lane, so the replay marks
   it: corner brackets sized by distance, the victim's name and range under
   them, and an ELIMINATED stamp on the fatal frame. Offscreen (the killer
   panned off after the shot) the marker clamps to the frame edge and points. */
#kc-subject { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#kc-subject.hidden { display: none; }
.kcs-bracket {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--kcs-size, 60px); height: calc(var(--kcs-size, 60px) * 1.6);
  opacity: var(--kcs-op, .9);
  background:
    linear-gradient(var(--danger), var(--danger)) 0 0 / 30% 2px no-repeat,
    linear-gradient(var(--danger), var(--danger)) 0 0 / 2px 22% no-repeat,
    linear-gradient(var(--danger), var(--danger)) 100% 0 / 30% 2px no-repeat,
    linear-gradient(var(--danger), var(--danger)) 100% 0 / 2px 22% no-repeat,
    linear-gradient(var(--danger), var(--danger)) 0 100% / 30% 2px no-repeat,
    linear-gradient(var(--danger), var(--danger)) 0 100% / 2px 22% no-repeat,
    linear-gradient(var(--danger), var(--danger)) 100% 100% / 30% 2px no-repeat,
    linear-gradient(var(--danger), var(--danger)) 100% 100% / 2px 22% no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.85)) drop-shadow(0 0 6px rgba(0,0,0,.6));
}
#kc-subject.dead .kcs-bracket { --kcs-op: .55; transform: translate(-50%, -50%) scale(1.12); }
.kcs-label {
  position: absolute; left: 50%; top: calc(50% + var(--kcs-size, 60px) * 0.86 + 8px);
  transform: translateX(calc(-50% + var(--kcs-shift, 0px)));
  display: flex; gap: 8px; align-items: baseline; white-space: nowrap;
  font-family: var(--display); font-size: 12px; letter-spacing: .18em;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.8);
}
.kcs-name { color: var(--text); }
#kc-subject.dead .kcs-name::after { content: " \2014 ELIMINATED"; color: var(--danger); }
#kc-subject.offscreen .kcs-bracket { --kcs-size: 26px; }
/* the body is behind cover in the recorded view: mark the position, don't
   claim a subject the frame cannot show */
#kc-subject.occluded .kcs-bracket { --kcs-op: .3; }
#kc-subject.occluded .kcs-label { opacity: .45; }

/* Both lines ride above the letterbox, which closes on the fatal beat: at
   11vh a caption pinned 60 px from the bottom was printed behind the bar. */
.kc-killer { position: absolute; bottom: calc(var(--kc-bar, 7vh) + 26px); left: 50%; transform: translateX(-50%); font-size: 15px; color: var(--text); text-shadow: 0 1px 3px #000; transition: bottom .3s ease-out; }
.kc-victim { color: var(--danger); font-family: var(--display); letter-spacing: .12em; }
.kc-skip { position: absolute; bottom: calc(var(--kc-bar, 7vh) + 6px); left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--text-dim); transition: bottom .3s ease-out; }
/* Cinematic grade: the replay is composed on its subject, so the frame falls
   off away from the marked body (--kcx/--kcy track it) and warms slightly at
   the centre. On the fatal beat the bars close and the falloff deepens — the
   winning moment is held, not just played. */
.kc-grade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse var(--kc-focus, 46%) var(--kc-focus-y, 52%) at var(--kcx, 50%) var(--kcy, 50%),
      rgba(255, 236, 210, .05) 0%, rgba(4, 6, 9, 0) 42%, rgba(4, 6, 9, .34) 78%, rgba(3, 4, 6, .62) 100%);
  transition: background .35s ease-out;
}
#killcam-overlay::before, #killcam-overlay::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--kc-bar, 7vh); background: #000;
  transition: height .3s ease-out;
}
#killcam-overlay::before { top: 0; } #killcam-overlay::after { bottom: 0; }
#killcam-overlay.impact { --kc-bar: 11vh; --kc-focus: 30%; --kc-focus-y: 34%; }
#killcam-overlay.impact .kcs-bracket { --kcs-op: .95; }

/* A replay is not shot through anyone's eyepiece: killcam playback keeps the
   optic's zoom and reticle (the recorded sight picture) but drops the tube,
   whose opaque surround otherwise ate half the winning frame. */
#scope-overlay.kc-replay .sc-tube, #scope-overlay.kc-replay .sc-glass { display: none; }

#countdown-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(10,11,14,.55); }
.cd-num { font-family: var(--display); font-size: 120px; color: var(--accent); text-shadow: 0 0 40px rgba(255,180,84,.5); }
.cd-label { letter-spacing: .4em; color: var(--text-dim); font-size: 15px; }

/* scoped: the world-reading furniture leaves the glass (see hud.scopeOverlay) */
#hud.sc-scoped #compass-wrap, #hud.sc-scoped #minimap, #hud.sc-scoped #zone-strip,
#hud.sc-scoped #match-status, #hud.sc-scoped #equip-row, #hud.sc-scoped #hint-bar { display: none; }

#scope-overlay { position: absolute; inset: 0; pointer-events: none; }
#scope-overlay svg { width: 100%; height: 100%; }
/* The reticle is drawn from one `<use>`d picture, so its type and its two
   colours have to arrive by inheritance: selectors do not reach into a use
   shadow tree, inherited properties do. */
#sc-reticle { font-family: var(--display); font-size: 1.5px; font-weight: 700; }
#sc-reticle .sc-edge { color: #e9eff6; opacity: .40; }
#sc-reticle .sc-core { color: #0a0d10; opacity: .92; }
/* the etched reticle rides the shooter's breathing, so a scoped hold is a
   held picture rather than a frozen decal */
#sc-reticle { transform-box: view-box; transform-origin: 50px 50px; animation: sc-breathe 5.4s ease-in-out infinite; }
@keyframes sc-breathe {
  0%, 100% { transform: translate(0.10px, -0.09px); }
  34% { transform: translate(-0.09px, 0.12px); }
  67% { transform: translate(0.05px, 0.07px); }
}

#flash-overlay { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .12s; }
#vignette { position: absolute; inset: 0; box-shadow: inset 0 0 170px rgba(0,0,0,.42); }
#vignette.hurt { box-shadow: inset 0 0 180px rgba(180,20,20,.75); }

/* ---------- screens / menus ---------- */
#screens { position: absolute; inset: 0; z-index: 20; }
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  background:
    radial-gradient(90% 60% at 78% -6%, rgba(224,138,60,.10) 0%, rgba(224,138,60,0) 60%),
    radial-gradient(130% 100% at 50% 0%, rgba(26,31,39,.96) 0%, rgba(13,15,18,.97) 75%);
  overflow-y: auto; padding: 4vh 24px;
  animation: screen-in .38s cubic-bezier(.2,.8,.2,1);
}
/* faint tactical grid + contour lines behind the panels: the menu has atmosphere,
   not a flat void */
.screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(150,165,180,.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(150,165,180,.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(23deg, rgba(150,165,180,.03) 0 1px, transparent 1px 130px);
  mask-image: radial-gradient(120% 90% at 50% 20%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.25) 100%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.25) 100%);
}
.screen > * { position: relative; }
@keyframes screen-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.screen.transparent { background: rgba(13,15,18,.82); }

.menu-top { display: flex; flex-direction: column; align-items: center; margin-bottom: 3vh; }
.tagline { color: var(--text-dim); letter-spacing: .3em; font-size: 12px; text-transform: uppercase; margin-top: 6px; }

.menu-row { display: flex; gap: 14px; margin: 1.4vh 0; flex-wrap: wrap; justify-content: center; }
.btn {
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel2) 100%);
  border: 1px solid var(--line); color: var(--text); border-radius: 4px;
  padding: 12px 26px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: all .12s; text-decoration: none; display: inline-block; text-align: center;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: scale(.96); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: linear-gradient(160deg, #2a2013 0%, #1c1810 100%); border-color: var(--accent); color: var(--accent); }
.btn.primary:hover { background: var(--accent); color: #111; }
.btn.small { padding: 7px 14px; font-size: 11px; }
.btn:disabled { opacity: .4; cursor: default; }

.panel {
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel2) 100%);
  border: 1px solid var(--line); border-radius: 6px; padding: 22px;
}
.panel h2 { font-family: var(--display); letter-spacing: .12em; font-size: 20px; margin-bottom: 14px; color: var(--text); }

.xpbar { width: 220px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.xpbar > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .8s cubic-bezier(.2,.8,.2,1); }

/* party */
.party-code { font-family: var(--display); font-size: 44px; letter-spacing: .5em; color: var(--accent); padding: 10px 0 10px 12px; }

/* lobby */
.seat-grid { display: grid; grid-template-columns: repeat(6, 130px); gap: 10px; margin: 2vh 0; }
.seat { border: 1px solid var(--line); border-radius: 4px; padding: 10px; text-align: center; font-size: 12px; min-height: 52px; background: var(--panel); }
.seat.empty { border-style: dashed; color: var(--text-dim); }
.seat.bot { color: var(--text-dim); font-style: italic; }
.seat.me { border-color: var(--accent); }
.lobby-count { font-family: var(--display); font-size: 22px; color: var(--accent); letter-spacing: .2em; }

/* loadout / gunsmith */
/* The page fits the viewport whole: every armoury row, attachment, perk and
   stat is on screen at once, so nothing is scrolled out of a panel and cut by
   its edge. The armoury lists pair their rows into two columns and the perks
   take a full-width row of their own under the three columns. */
.lo-layout {
  display: grid; grid-template-columns: 350px minmax(0, 1fr) 292px; grid-template-rows: auto auto;
  gap: 14px 16px; width: min(1300px, 96vw); flex: 0 0 auto;
}
.lo-perks { grid-column: 1 / -1; }
.screen.loadout .menu-row { flex: 0 0 auto; margin: 18px 0 0; }
/* the three columns end on one line: the last panel in each takes the slack so
   the page reads as one composed block rather than three ragged stacks */
.lo-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.lo-col > .panel:last-child { flex: 1 1 auto; }
.weapon-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.weapon-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: 4px; padding: 8px 11px; cursor: pointer; background: var(--panel); transition: border-color .1s;
}
.weapon-row:hover { border-color: var(--text-dim); }
.weapon-row.sel { border-color: var(--accent); background: #1d1a13; }
.weapon-row .wr-class { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .12em; }
.weapon-row .wr-name { font-size: 13.5px; white-space: nowrap; }
.weapon-row .wr-lvl { font-size: 10px; color: var(--accent); white-space: nowrap; }
/* The armoury carries more rows than any other page, so it runs on its own
   tighter vertical rhythm: the whole loadout fits a 1280x800 desktop without a
   scrolled panel edge cutting a row or the action buttons. */
.screen.loadout { padding: 2.2vh 24px 14px; }
.screen.loadout .panel { padding: 15px 18px; }
.screen.loadout .panel h2 { font-size: 18px; margin-bottom: 10px; }
.screen.loadout .att-slots { gap: 10px; }
.screen.loadout .menu-top { margin-bottom: 1.6vh; }
.lo-pending {
  margin-top: 6px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(224,138,60,.4); border-radius: 3px; padding: 4px 12px;
}
@media (max-height: 840px) {
  .screen.loadout .weapon-row { padding: 6px 11px; }
  .screen.loadout .perk-card { padding: 8px; }
  .screen.loadout .perk-card .pk-desc { font-size: 10.5px; }
  .screen.loadout .gs-progress { padding-top: 12px; }
}
.stat-panel { display: flex; flex-direction: column; gap: 9px; }
.stat-line { display: grid; grid-template-columns: 92px 1fr 64px; gap: 10px; align-items: center; font-size: 12px; }
.stat-line .sl-label { color: var(--text-dim); letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.stat-line .sl-bar { height: 5px; background: var(--line); border-radius: 3px; position: relative; overflow: hidden; }
.stat-line .sl-bar > div { position: absolute; inset: 0; width: 50%; background: var(--accent); border-radius: 3px; transition: width .3s; }
.stat-line .sl-val { text-align: right; font-family: var(--display); font-size: 15px; }
.stat-line .sl-val.better { color: var(--ok); } .stat-line .sl-val.worse { color: var(--danger); }
.att-slots { display: flex; flex-direction: column; gap: 12px; }
/* the gunsmith closes on the weapon's own progress, so the panel's foot carries
   the level and the next unlock instead of empty page */
#gunsmith-panel { display: flex; flex-direction: column; }
.gs-progress { margin-top: auto; padding-top: 18px; }
.gs-prog-head {
  display: flex; justify-content: space-between; gap: 16px; margin-bottom: 7px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
}
.gs-prog-head span:last-child { color: var(--accent); }
.gs-progress .xpbar { width: 100%; }
.att-slot h4 { font-size: 11px; letter-spacing: .16em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 7px; }
.att-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.att-opt {
  border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; cursor: pointer;
  font-size: 12px; background: var(--panel); min-width: 120px; transition: border-color .1s; position: relative;
}
.att-opt:hover { border-color: var(--text-dim); }
.att-opt.sel { border-color: var(--accent); background: #1d1a13; }
.att-opt.locked { opacity: .45; cursor: default; }
.att-opt .ao-name { font-size: 12.5px; margin-bottom: 3px; }
.att-opt .ao-eff { font-size: 10.5px; line-height: 1.4; }
.att-opt .ao-eff .up { color: var(--ok); } .att-opt .ao-eff .down { color: var(--danger); }
.att-opt .ao-lock { font-size: 10px; color: var(--accent); }
.perk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.perk-card { border: 1px solid var(--line); border-radius: 4px; padding: 10px; cursor: pointer; background: var(--panel); }
.perk-card.sel { border-color: var(--accent); background: #1d1a13; }
.perk-card .pk-name { font-size: 13px; margin-bottom: 4px; }
.perk-card .pk-desc { font-size: 11px; color: var(--text-dim); line-height: 1.4; }

/* results */
/* the match's own final frame as key art: scaled past the edges, defocused and
   graded to the palette so it reads as art direction behind the page, never as
   a competing screenshot */
.res-screen { background: radial-gradient(120% 90% at 50% 0%, rgba(18,21,27,.72) 0%, rgba(13,15,18,.92) 70%); }
/* inset and unscaled: a transform or negative inset here overflows the
   scrollable screen and raises a scrollbar across the composed page */
.res-art {
  position: absolute; inset: 0; background-size: cover; background-position: center 42%;
  filter: blur(9px) saturate(.72) contrast(1.06) brightness(.5);
  animation: res-art-in 1.6s cubic-bezier(.2,.8,.2,1) both;
}
.res-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,138,60,.10) 0%, rgba(13,15,18,0) 38%),
    radial-gradient(85% 70% at 50% 40%, rgba(13,15,18,.25) 0%, rgba(13,15,18,.9) 100%);
}
@keyframes res-art-in {
  from { opacity: 0; filter: blur(22px) saturate(.72) contrast(1.06) brightness(.5); }
  to { opacity: 1; filter: blur(9px) saturate(.72) contrast(1.06) brightness(.5); }
}
.results-layout { width: min(880px, 94vw); display: flex; flex-direction: column; gap: 18px; }
.rb-score { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px auto 8px; width: min(420px, 80%); }
.rb-score span.rs-a, .rb-score span.rs-b { font-family: var(--display); font-size: 30px; min-width: 52px; }
.rb-score .rs-a { color: var(--team-a); text-align: right; } .rb-score .rs-b { color: var(--team-b); text-align: left; }
.rb-score .won { text-shadow: 0 0 18px currentColor; }
.rb-score .rs-bar { flex: 1; height: 4px; background: var(--team-b); border-radius: 2px; overflow: hidden; min-width: 0; }
.rb-score .rs-bar i { display: block; height: 100%; background: var(--team-a); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.res-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.res-stat {
  border: 1px solid var(--line); border-top: 2px solid rgba(255,180,84,.5); border-radius: 3px;
  background: linear-gradient(170deg, rgba(28,33,41,.86) 0%, rgba(18,21,27,.86) 100%);
  padding: 10px 6px; text-align: center;
  animation: res-rise .5s cubic-bezier(.2,.8,.2,1) .18s backwards;
}
.res-stat .rs-v { font-family: var(--display); font-size: 26px; line-height: 1; }
.res-stat .rs-l { color: var(--text-dim); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; margin-top: 5px; }
/* panels sit on the key art, so they carry their own depth instead of blocking it */
.res-screen .panel {
  background: linear-gradient(160deg, rgba(22,26,32,.90) 0%, rgba(28,33,41,.86) 100%);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  padding: 16px 18px;
}
/* the whole sequence — outcome, scoreline, stats, tally, medals, unlocks and
   both buttons — has to sit inside an 800px-tall desktop viewport without a
   scrollbar, so the page reads as one composed screen */
/* On a taller viewport this stack left a third of the page empty under the
   buttons while the banner crowded the top edge. Centring through auto margins
   uses whatever height there is and still collapses to top-aligned when the
   content is taller than the viewport, so nothing is clipped above the fold. */
.res-screen { padding-top: 2vh; }
.res-screen > .results-layout { margin: auto 0; }
.res-screen .results-layout { gap: 12px; }
.res-screen .res-banner { padding: 6px 0 2px; }
.res-screen .rb-outcome { font-size: 44px; }
.res-screen .panel h2 { font-size: 17px; margin-bottom: 9px; }
.res-screen .xp-tally { font-size: 38px; }
.res-screen .res-board td, .res-screen .res-board th { padding: 4px 8px; }
/* A good match earns a lot of medals, and each chip carried a description
   line: past four of them the right column grew taller than the viewport and
   pushed the unlock reveal — the payoff of the whole sequence — below the
   fold. Past four chips they compact to icon and name, which is also the
   denser, more readable composition. */
.res-medals:has(> :nth-child(5)) .rm-desc { display: none; }
.res-medals:has(> :nth-child(5)) .res-medal { padding: 5px 10px; }
.res-banner { text-align: center; padding: 20px 0 6px; animation: res-rise .45s cubic-bezier(.2,.8,.2,1) backwards; }
.res-cols > * { animation: res-rise .5s cubic-bezier(.2,.8,.2,1) .12s backwards; }
.results-layout > .menu-row { animation: res-rise .5s cubic-bezier(.2,.8,.2,1) .24s backwards; }
@keyframes res-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.res-banner .rb-outcome { font-family: var(--display); font-size: 54px; letter-spacing: .3em; }
.res-banner .rb-outcome.win { color: var(--accent); } .res-banner .rb-outcome.loss { color: var(--danger); }
.res-banner .rb-sub { color: var(--text-dim); letter-spacing: .14em; font-size: 12px; text-transform: uppercase; }
.res-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.res-board { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.res-board th { text-align: left; color: var(--text-dim); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.res-board td { padding: 6px 8px; border-bottom: 1px solid rgba(42,49,60,.5); }
.res-board tr.me td { color: var(--accent); }
.res-board .ta { color: var(--team-a); } .res-board .tb { color: var(--team-b); }
.xp-tally { font-family: var(--display); font-size: 46px; color: var(--accent); text-align: center; }
.res-medals { display: flex; flex-wrap: wrap; gap: 8px; }
.res-medal { border: 1px solid var(--accent); border-radius: 3px; padding: 6px 12px; animation: toast .3s; display: flex; align-items: center; gap: 9px; }
.res-medal .rm-icon { width: 22px; height: 22px; color: var(--accent); flex: none; }
.res-medal .rm-icon svg { width: 100%; height: 100%; display: block; }
.res-medal .rm-name { font-size: 12.5px; color: var(--accent); font-weight: 600; letter-spacing: .04em; }
.res-medal .rm-desc { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.wpn-prog { margin: 8px 0; }
.wpn-prog .wp-name { font-size: 12px; display: flex; justify-content: space-between; }
.wpn-prog .xpbar { width: 100%; margin-top: 4px; }
.unlock-reveal {
  border: 1px solid var(--accent); background: linear-gradient(160deg, #241c0e, #171310);
  border-radius: 4px; padding: 12px 18px; margin-top: 10px; animation: toast .4s;
}
.unlock-reveal .ur-icon { width: 30px; height: 30px; color: var(--accent); margin-bottom: 6px; }
.unlock-reveal .ur-icon svg { width: 100%; height: 100%; display: block; }
.unlock-reveal .ur-k { font-size: 10px; letter-spacing: .2em; color: var(--text-dim); text-transform: uppercase; }
.unlock-reveal .ur-n { font-family: var(--display); font-size: 20px; color: var(--accent); letter-spacing: .08em; }
.unlock-reveal .ur-eff { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.unlock-reveal .ur-e { font-size: 11px; letter-spacing: .03em; }
.unlock-reveal .ur-e.up { color: #7fd6a2; } .unlock-reveal .ur-e.down { color: #e08a7a; }

/* settings */
.set-row { display: grid; grid-template-columns: 160px 1fr 60px; gap: 12px; align-items: center; margin: 12px 0; font-size: 13px; }
input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; background: var(--line); border-radius: 2px; outline: none; }
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
  display: inline-grid; place-content: center; transition: background .12s, border-color .12s;
}
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after {
  content: ""; width: 9px; height: 5px; margin-bottom: 2px;
  border-left: 2px solid #101215; border-bottom: 2px solid #101215; transform: rotate(-45deg);
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--panel); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: none;
}
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; }
.set-toggle { display: flex; align-items: center; gap: 10px; }

/* leaderboard */
.lb-table { width: min(560px, 92vw); border-collapse: collapse; }
.lb-table th { text-align: left; color: var(--text-dim); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.lb-table td { padding: 7px 10px; border-bottom: 1px solid rgba(42,49,60,.5); font-size: 13.5px; }
.lb-table tr:first-child td { color: var(--accent); }

/* footer note */
/* ---------- composed lobby ---------- */
.lobby-screen { padding: 0; overflow: hidden; background: var(--bg); }
.lobby-screen::before { display: none; }               /* the key art is the backdrop, not the grid */
.ka-layer { position: absolute; inset: 0; overflow: hidden; }
.ka-img {
  position: absolute; inset: -3%; background-size: cover; background-position: 50% 42%;
  filter: saturate(1.04) contrast(1.06);
  animation: ka-in 1.1s ease-out, ka-drift 46s ease-in-out infinite alternate;
}
@keyframes ka-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ka-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.4%, -1%, 0); }
}
/* graded scrim: the art stays legible as art, the type stays legible as type */
.ka-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(9,11,14,.95) 0%, rgba(9,11,14,.80) 34%, rgba(9,11,14,.30) 62%, rgba(9,11,14,.55) 100%),
    linear-gradient(0deg, rgba(9,11,14,.92) 0%, rgba(9,11,14,.18) 26%, rgba(9,11,14,0) 46%),
    linear-gradient(180deg, rgba(9,11,14,.86) 0%, rgba(9,11,14,0) 22%);
  box-shadow: inset 0 0 220px rgba(0,0,0,.62);
}
.menu-shell {
  position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto;
  height: 100%; width: 100%; padding: 26px clamp(24px, 4vw, 64px) 18px;
}
.menu-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.mb-brand .tagline { margin-top: 2px; }
.mb-brand::after {
  content: ""; display: block; width: 96px; height: 2px; margin-top: 12px;
  background: linear-gradient(90deg, var(--accent), rgba(255,180,84,0));
}
.id-plate {
  display: flex; gap: 16px; align-items: center; padding: 12px 18px;
  background: linear-gradient(160deg, rgba(22,26,32,.88), rgba(13,15,18,.82));
  border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 4px;
  backdrop-filter: blur(6px);
}
.idp-lvl { text-align: center; line-height: 1; }
.idp-lvl span { font-family: var(--display); font-size: 40px; color: var(--accent); display: block; }
.idp-lvl small { font-size: 9px; letter-spacing: .22em; color: var(--text-dim); }
.idp-row { display: flex; gap: 8px; align-items: center; }
.idp-row input {
  background: rgba(9,11,14,.72); border: 1px solid var(--line); color: var(--text);
  padding: 8px 12px; font-size: 13.5px; border-radius: 3px; width: 190px; letter-spacing: .04em; outline: none;
}
.idp-row input:focus { border-color: var(--accent); }
.id-plate .xpbar { width: 100%; margin: 9px 0 5px; }
.idp-xp { font-size: 10.5px; letter-spacing: .12em; color: var(--text-dim); text-transform: uppercase; }

.menu-body { display: grid; grid-template-columns: minmax(400px, 42%) 1fr; align-items: center; gap: 30px; padding: 2.2vh 0; min-height: 0; }
.ka-plate { align-self: end; }
.eyebrow {
  font-family: var(--display); font-size: 13px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.mode-rail { display: flex; flex-direction: column; gap: 8px; }
.mode-rail .mode-card {
  display: block; width: 100%; text-align: left; padding: 10px 16px; cursor: pointer;
  background: linear-gradient(100deg, rgba(22,26,32,.90) 0%, rgba(18,21,27,.62) 100%);
  border: 1px solid var(--line); border-left: 2px solid var(--line); border-radius: 4px;
  color: var(--text); transition: border-color .14s, transform .14s, background .14s;
}
.mode-rail .mode-card:hover, .mode-rail .mode-card:focus-visible {
  border-color: var(--accent); border-left-color: var(--accent); transform: translateX(4px); outline: none;
}
.mc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mode-rail h3 { font-family: var(--display); font-size: 23px; letter-spacing: .1em; text-transform: uppercase; }
.mc-size { font-size: 10.5px; letter-spacing: .2em; color: var(--text-dim); text-transform: uppercase; }
.mode-rail p { color: var(--text-dim); font-size: 12.5px; line-height: 1.4; margin: 3px 0 6px; max-width: 46ch; min-height: 35px; }
.mc-foot { display: flex; justify-content: space-between; align-items: center; }
.mc-rules { font-size: 11px; letter-spacing: .1em; color: var(--text); opacity: .78; }
.mode-rail .mc-meta { font-size: 10.5px; letter-spacing: .18em; color: var(--accent); }
.deploy-now { margin-top: 14px; }
.btn.big { padding: 14px 28px; font-size: 14px; letter-spacing: .16em; width: 100%; }
.dn-note { font-size: 11px; color: var(--text-dim); letter-spacing: .06em; margin-top: 7px; line-height: 1.5; }

.ka-plate {
  justify-self: end; max-width: 340px; text-align: right;
  padding: 14px 18px 16px; border-right: 2px solid var(--accent);
  background: linear-gradient(270deg, rgba(9,11,14,.86) 0%, rgba(9,11,14,.10) 100%);
}
.kap-label { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); }
.kap-name { font-family: var(--display); font-size: 30px; letter-spacing: .16em; text-transform: uppercase; margin: 4px 0 8px; color: var(--text); text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.kap-fiction { font-size: 12px; line-height: 1.6; color: #c3c9d0; text-shadow: 0 1px 6px rgba(0,0,0,1); }

.menu-utility {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px;
  border-top: 1px solid rgba(42,49,60,.7); padding-top: 12px;
}
.mu-actions { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; }
.lobby-screen .menu-foot { position: static; width: auto; text-align: right; line-height: 1.6; }

.menu-foot { position: absolute; bottom: 14px; width: 100%; text-align: center; color: var(--text-dim); font-size: 11px; letter-spacing: .08em; }
.menu-foot a { color: var(--text-dim); }

/* about page */
.about-body { overflow: auto; }
.about-page { max-width: 640px; margin: 8vh auto; line-height: 1.6; }
.about-page h1 { font-family: var(--display); letter-spacing: .1em; margin: 18px 0 12px; color: var(--accent); }
.about-page p { margin: 12px 0; color: var(--text-dim); }
.about-page .btn { color: var(--accent); margin-top: 12px; }
.fineprint { font-size: 11px; }

/* ---------- TAB scoreboard ---------- */
#scoreboard {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10,12,15,.55); backdrop-filter: blur(3px); z-index: 30;
}
#scoreboard.hidden { display: none; }
.sb-wrap { display: flex; gap: 18px; }
.sb-wrap.sb-one { gap: 0; }
.sb-col {
  min-width: 380px; background: rgba(16,19,24,.92); border: 1px solid var(--line);
  border-radius: 6px; padding: 14px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.sb-team {
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.sb-col.team-a .sb-team { color: var(--team-a); }
.sb-col.team-b .sb-team { color: var(--team-b); }
.sb-col.ffa .sb-team { color: var(--accent); }
.sb-row {
  display: grid; grid-template-columns: 1fr 64px 44px 44px; gap: 6px;
  padding: 4px 8px; font-size: 13px; border-radius: 3px; align-items: center;
}
.sb-row span { text-align: right; font-variant-numeric: tabular-nums; }
.sb-row span.sb-n { text-align: left; }
.sb-row.sb-hdr { color: var(--text-dim); font-size: 10.5px; letter-spacing: .1em; }
.sb-row.me { background: rgba(255,180,84,.12); }
.sb-row.me .sb-n { color: var(--accent); font-weight: 600; }
.sb-bot {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .08em;
  color: var(--text-dim); border: 1px solid var(--line); border-radius: 2px;
  padding: 1px 4px; margin-left: 7px; vertical-align: 1px;
}

.res-empty { color: var(--text-dim); font-size: 13px; padding: 8px 2px; letter-spacing: 0.04em; }

/* ---------- game shell: pause surface ---------- */
.pause-screen {
  background: rgba(9, 11, 14, 0.78);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.pause-panel {
  width: min(460px, 92vw);
  background: linear-gradient(165deg, var(--panel2) 0%, var(--panel) 70%);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 34px 38px 28px; text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,180,84,.06) inset;
}
.pause-title {
  font-family: var(--display); font-size: 44px; font-weight: 700;
  letter-spacing: .34em; margin: 14px 0 6px; color: var(--text);
}
.pause-sub { color: var(--text-dim); font-size: 13px; line-height: 1.5; min-height: 20px; }
.pause-sub b { color: var(--accent); font-weight: 600; letter-spacing: .04em; }
.pause-note {
  margin: 12px auto 0; padding: 8px 14px; max-width: 360px;
  border: 1px solid rgba(255,180,84,.35); border-radius: 4px;
  background: rgba(255,180,84,.08); color: var(--accent);
  font-size: 12px; letter-spacing: .04em;
}
.pause-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.pause-actions .btn { width: 100%; padding: 13px 0; font-size: 13px; letter-spacing: .14em; }
.pause-actions .btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.pause-foot { margin-top: 20px; color: var(--text-dim); font-size: 11px; letter-spacing: .06em; opacity: .8; }
.btn.warn { border-color: var(--accent2); color: var(--accent2); }

/* ---------- settings: bindings + quality segmented control ---------- */
.bind-row { cursor: pointer; }
.bind-row:hover .bind-key { border-color: var(--accent); color: var(--accent); }
.bind-key {
  font-family: var(--display); font-size: 14px; letter-spacing: .12em;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg2);
  padding: 6px 10px; text-align: center; min-width: 110px; color: var(--text);
}
.bind-key.capturing { border-color: var(--accent); color: var(--accent); animation: bindpulse 1s infinite; }
@keyframes bindpulse { 50% { background: rgba(255,180,84,.12); } }
.qseg { display: flex; gap: 6px; flex-wrap: wrap; }
.qseg .btn { flex: 1; white-space: nowrap; }