/* Troll Forces — arena shooter UI */

/* Several UI blocks below set `display: flex`, which beats the `hidden`
   attribute's default styling and leaves "hidden" panels on screen. */
[hidden] { display: none !important; }

/* The page is only ever the game, so the shell adds no chrome of its own. */
html, body { margin: 0; padding: 0; background: #05070a; }

/* Nothing on the page selects, highlights or drags (user, 2026-09-30): no
   blue text-selection or tap flash on phones, no long-press callout, no
   dragging images out to copy them. Typing fields still select. */
html, body, body * {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
img, svg, canvas, a { -webkit-user-drag: none; }
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}
.arcade-shell { width: 100%; margin: 0; padding: 0; }

.to-cabinet {
  position: relative;
  width: 100%;
  /* Sized to the viewport itself rather than a 16/9 box: on a wide desktop the
     16/9 cabinet was clamped by max-height and left the screen letterboxed. */
  height: 100vh;
  height: 100dvh;
  /* The menu has to compact against the CABINET's height, not the viewport's:
     on a portrait phone the viewport is tall while the cabinet is ~210px. */
  container-type: size;
  container-name: cab;
  margin: 0 auto;
  background: #05070a;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: "DM Sans", sans-serif;
  color: #eef2ea;
  user-select: none;
}

.to-cabinet canvas { display: block; width: 100%; height: 100%; }

.to-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 20;
}
.to-screen[hidden] { display: none; }

/* Auto margins centre a panel when it fits and collapse when it doesn't.
   `align-items: center` alone overflows equally at both ends inside the
   cabinet's `overflow: hidden`, which put Drop In off-screen and unclickable
   on anything shorter than a 900px viewport. */
.to-pause-inner,
.to-gameover-inner { margin: auto; }

/* ---------- Title / loadout ---------- */

/* Translucent: the orbiting arena behind the menu is the backdrop, and the
   panels carry their own contrast. */
.to-title { background: radial-gradient(120% 120% at 50% 0%, rgba(14,22,14,.3) 0%, rgba(5,7,10,.66) 75%); }

.to-title-bg {
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 100%, rgba(90,200,90,.12), transparent 70%);
  pointer-events: none;
}

.to-lo-rank-bar {
  flex: 1; height: 4px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.1);
}
.to-lo-rank-bar b { display: block; height: 100%; background: #7fe066; border-radius: 3px; }

/* mode toggle + PvP room row */
.to-lo-mode { display: flex; flex-wrap: wrap; gap: 5px; }
.to-lo-modeblurb {
  margin: -5px 0 0; font-size: 10.5px; color: #7c8778;
  font-family: "DM Mono", monospace; font-style: italic;
}
.to-lo-modebtn {
  flex: 1; font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .04em;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #9aa596; transition: background .14s, border-color .14s, color .14s;
}
.to-lo-modebtn:hover { border-color: rgba(127,224,102,.4); color: #cfe0c4; }
.to-lo-modebtn.is-active { background: rgba(127,224,102,.14); border-color: #7fe066; color: #eaf5e4; }

.to-lo-pvp { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.to-lo-pvp label {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #7c8778; font-family: "DM Mono", monospace;
}
.to-room-input {
  width: 92px; padding: 5px 8px; border-radius: 7px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14);
  color: #eaf5e4; font-family: "DM Mono", monospace; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; text-align: center;
}
.to-room-input:focus { outline: none; border-color: #7fe066; }
.to-room-new {
  font-size: 10px; padding: 5px 9px; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #9aa596;
}
.to-room-new:hover { border-color: rgba(127,224,102,.4); color: #cfe0c4; }
.to-net-status {
  font-size: 10.5px; color: #7c8778; font-family: "DM Mono", monospace; font-style: italic;
}
.to-net-status.is-live { color: #7fe066; font-style: normal; }
.to-net-status.is-bad { color: #ff8a5a; font-style: normal; }
.to-lo-nobots {
  flex-basis: 100%; display: flex; align-items: flex-start; gap: 7px;
  font-size: 10.5px; line-height: 1.4; color: #9aa596; cursor: pointer;
  text-transform: none; letter-spacing: normal; font-family: "DM Mono", monospace;
}
.to-lo-nobots input { margin-top: 2px; accent-color: #7fe066; cursor: pointer; }

/* in-match team score + scoreboard */
.to-hud-teams {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-family: "Oswald", sans-serif; font-size: 13px; letter-spacing: .06em;
}
.to-team { color: #cfd8c8; }
.to-team b { font-size: 17px; }
.to-team-phantom b { color: #a98cf0; }
.to-team-ghost b { color: #e8bf76; }
.to-team-sep { color: #6f7a68; }
.to-hud-matchclock {
  color: #cfd8c8; font-size: 13px; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; opacity: .85;
}

/* Search & Destroy: side reminder, and the bomb clock once it's live. */
.to-bomb-status {
  position: absolute; top: 68px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-family: "Oswald", sans-serif; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #cfd8c8;
}
/* The round clock is calm; only a live bomb turns red and pulses. */
.to-bomb-timer {
  font-family: "DM Mono", monospace; font-weight: 700; font-size: 14px;
  color: #eef2ea;
}
.to-bomb-timer.is-planted { color: #ff5a3d; animation: to-bomb-pulse .6s ease-in-out infinite; }
@keyframes to-bomb-pulse { 50% { opacity: .55; } }

/* Troll Royale: zone phase, countdown and trolls left, top centre. */
.to-royale {
  position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px; border-radius: 9px;
  background: rgba(6,9,7,.55); border: 1px solid rgba(255,255,255,.12);
  font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: #cfd8c8; z-index: 12;
}
.to-royale-timer { font-family: "DM Mono", monospace; font-weight: 700; font-size: 14px; color: #eef2ea; }
.to-royale.is-closing .to-royale-timer { color: #9dff6a; }
.to-royale-alive { color: #f2f5ee; }
/* Standing in the Cringe: a green haze closing in from the edges. */
.to-cringe {
  position: absolute; inset: 0; z-index: 15; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(125,255,74,0) 30%, rgba(96,210,48,.5) 100%);
  transition: opacity .35s linear;
}
.to-cringe.is-on { opacity: 1; animation: to-cringe-pulse 1.2s ease-in-out infinite; }
@keyframes to-cringe-pulse { 50% { opacity: .72; } }
/* Plating / healing: what you're doing and how far along. */
.to-royale-act {
  position: absolute; left: 50%; top: 64%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px; z-index: 13; pointer-events: none;
  font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #eef2ea;
}
.to-royale-act i { display: block; width: 120px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.to-royale-act b { display: block; height: 100%; width: 0; background: #7fb2ff; }
/* Armour: three plate segments over the health bar. */
.to-hud-health { position: relative; }
.to-armor { position: absolute; left: 0; bottom: 14px; width: 130px; display: flex; gap: 3px; }
.to-armor i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; position: relative; }
.to-armor i::after { content: ""; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #4f86d8, #8fc2ff); }
button.to-gear-chip { cursor: pointer; }

/* Hold-E plant/defuse prompt, dead centre-low like the cook meter. */
.to-bomb-prompt {
  position: absolute; left: 50%; top: 62%; transform: translateX(-50%);
  text-align: center; z-index: 13; pointer-events: none;
  font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: #eef2ea; text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
/* Troll Royale loot: the one prompt that names its key, loud (a keycap that
   pulses until you're holding it, a bigger line and bar). */
.to-bomb-prompt.is-royale { font-size: 15px; }
.to-bomb-prompt.is-royale .to-bomb-bar { width: 190px; height: 6px; margin: 7px auto 0; }
.to-hold-key { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 7px; }
.to-hold-key kbd {
  min-width: 34px; height: 34px; padding: 0 9px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: #f4f6f0; color: #111;
  font: 700 17px/1 "Oswald", sans-serif; letter-spacing: 0;
  box-shadow: 0 3px 0 #9aa391, 0 0 0 2px rgba(125,255,74,.0), 0 4px 14px rgba(0,0,0,.55);
  text-shadow: none; animation: to-key-pulse 1.1s ease-in-out infinite;
}
.to-hold-key[hidden] { display: none; }
.to-hold-key em { font-style: normal; font-weight: 600; font-size: 13px; color: #7dff4a; letter-spacing: .14em; }
.to-hold-key.is-held kbd {
  animation: none; transform: translateY(2px);
  box-shadow: 0 1px 0 #9aa391, 0 0 0 3px rgba(125,255,74,.85), 0 2px 10px rgba(0,0,0,.5);
}
@keyframes to-key-pulse {
  0%, 100% { box-shadow: 0 3px 0 #9aa391, 0 0 0 2px rgba(125,255,74,0), 0 4px 14px rgba(0,0,0,.55); }
  50% { box-shadow: 0 3px 0 #9aa391, 0 0 0 5px rgba(125,255,74,.55), 0 4px 14px rgba(0,0,0,.55); }
}
@media (prefers-reduced-motion: reduce) { .to-hold-key kbd { animation: none; } }
.to-bomb-bar {
  margin-top: 5px; width: 140px; height: 4px; border-radius: 3px;
  background: rgba(0,0,0,.45); overflow: hidden;
}
.to-bomb-bar b {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #ff8a5a, #ff5a3d); transition: width .05s linear;
}

/* `.to-cabinet canvas` above stretches the WebGL canvas to fill the cabinet
   and out-specifies a lone class, so this selector has to match it or the
   minimap is drawn across the whole screen. */
.to-cabinet canvas.to-minimap {
  position: absolute; left: 18px; top: 96px;
  width: 132px; height: 132px;
  border-radius: 10px;
  background: rgba(6,9,7,.55);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

.to-scoreboard {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  min-width: 340px; max-width: 88%; padding: 14px 16px; border-radius: 12px;
  background: rgba(6,9,7,.9); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px); z-index: 14;
  font-family: "DM Mono", monospace; font-size: 12px; color: #dfe6da;
}
.to-sb-team { margin-bottom: 10px; }
.to-sb-head, .to-sb-row {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 2.4em) 3.4em;
  column-gap: 6px; align-items: baseline;
}
.to-sb-head > span:not(:first-child), .to-sb-row > span:not(:first-child) { text-align: right; }
.to-sb-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-sb-head {
  font-family: "Oswald", sans-serif; font-size: 13px; letter-spacing: .08em;
  padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.to-sb-head > span:not(:first-child) { color: #9aa596; font-family: "DM Mono", monospace; font-size: 11px; }
.to-sb-row { padding: 2px 0; }
.to-sb-row b { color: #9aa596; font-weight: 400; }
.to-sb-row.is-you { color: #7fe066; }
.to-sb-row span:last-child { color: #9aa596; }

.to-respawn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: "Oswald", sans-serif; font-size: 20px; letter-spacing: .08em;
  color: #ff8a5a; text-align: center; z-index: 13;
}

/* Troll Royale spectating: bottom-centre, out of the way of the view. */
.to-spectate {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 14; text-align: center; font-family: "Oswald", sans-serif;
  color: #eef2ea; text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.to-spectate[hidden] { display: none; }
.to-spectate-out {
  display: inline-block; margin: 0 0 8px; padding: 3px 12px; border-radius: 999px;
  background: rgba(6,9,7,.62); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #ff8a5a;
}
.to-spectate-row { display: flex; align-items: center; gap: 10px; }
.to-spectate-who {
  display: flex; flex-direction: column; align-items: center; min-width: 190px;
  padding: 7px 16px; border-radius: 12px; background: rgba(6,9,7,.62);
  border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(4px);
}
.to-spectate-l { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #9aa391; }
.to-spectate-name { font-size: 19px; font-weight: 600; letter-spacing: .03em; color: #fff; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-spectate-n { font-family: "DM Mono", monospace; font-size: 11px; color: #7dff4a; }
.to-spectate-btn {
  pointer-events: auto;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); background: rgba(6,9,7,.62); color: #fff;
  font: 600 24px/1 "Oswald", sans-serif; display: inline-flex; align-items: center; justify-content: center;
}
.to-spectate-btn:hover, .to-spectate-btn:focus-visible { background: rgba(125,255,74,.22); border-color: #7dff4a; outline: none; }
/* Spectating: our own crosshair and gun readouts aren't ours to use. */
.to-spectating #to-crosshair, .to-spectating #hud-ammo { display: none; }

/* Pre-match staging. Deliberately the loudest thing on screen — it's the only
   moment the player is meant to be looking at the HUD rather than the map. */
.to-staging {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; z-index: 14; pointer-events: none;
  font-family: "Oswald", sans-serif; text-shadow: 0 2px 14px rgba(0,0,0,.8);
}
.to-staging-mode {
  margin: 0; font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: #9fe7ff;
}
.to-staging-clock {
  display: block; font-size: 88px; line-height: 1; font-weight: 700;
  color: #f4f7f2; margin: 2px 0 0;
}
/* Each new second re-triggers the pop, so the number feels like a clock
   rather than static text. */
.to-staging-clock.is-tick { animation: to-stage-tick .42s ease-out; }
@keyframes to-stage-tick {
  0% { transform: scale(1.28); color: #7fe066; }
  100% { transform: scale(1); color: #f4f7f2; }
}
.to-staging-sub {
  margin: 4px 0 0; font-size: 15px; letter-spacing: .14em;
  text-transform: uppercase; color: #d7ded2;
}
.to-staging-roster {
  margin: 7px 0 0; font-size: 11.5px; letter-spacing: .08em; color: #9aa694;
  font-family: "DM Mono", ui-monospace, monospace;
}
/* Dim the world slightly so the countdown reads over any map palette. */
.to-staging-on #to-hud::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 38%, rgba(4,10,8,.5), rgba(4,10,8,.72));
}

/* Spawn protection — a visible promise, so the player knows why nothing is
   hurting them and that shooting gives it up. */
.to-spawnguard {
  position: absolute; left: 50%; bottom: 21%; transform: translateX(-50%);
  font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
  color: #9fe7ff; background: rgba(12,26,32,.62);
  border: 1px solid rgba(127,209,224,.4); border-radius: 999px;
  padding: 5px 13px; z-index: 13; pointer-events: none;
  animation: to-guard-pulse 1.1s ease-in-out infinite;
}
@keyframes to-guard-pulse { 50% { opacity: .55; } }
/* A cool rim on the frame reinforces it without hiding the fight. */
.to-spawn-guarded #to-hud::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 54px rgba(127,209,224,.34);
}
@media (prefers-reduced-motion: reduce) {
  .to-spawnguard { animation: none; }
}

/* map picker */
.to-lo-maps { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.to-lo-map {
  font-family: "Oswald", sans-serif; font-size: 11px; letter-spacing: .04em;
  padding: 5px 9px; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #9aa596; transition: background .14s, border-color .14s, color .14s;
}
.to-lo-map:hover { border-color: rgba(127,209,224,.45); color: #cfe0e4; }
.to-lo-map.is-active { background: rgba(127,209,224,.14); border-color: #7fd1e0; color: #e4f2f5; }
.to-lo-map-blurb {
  font-size: 10.5px; color: #7c8778; font-family: "DM Mono", monospace;
  font-style: italic; margin-left: 2px;
}

/* primary/secondary slot toggle, sits above the class tabs */
.to-lo-slot-toggle { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }

/* class tabs */
.to-lo-classes { display: flex; flex-wrap: wrap; gap: 5px; }
.to-lo-class {
  font-family: "Oswald", sans-serif; font-size: 11px; letter-spacing: .04em;
  padding: 6px 10px; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: #9aa596; transition: background .14s, border-color .14s, color .14s;
}
.to-lo-class:hover { border-color: rgba(127,224,102,.4); color: #cfe0c4; }
.to-lo-class.is-active { background: rgba(127,224,102,.14); border-color: #7fe066; color: #eaf5e4; }

/* list + detail */
.to-lo-body { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 12px; }
.to-lo-list { display: flex; flex-direction: column; gap: 5px; max-height: 232px; overflow-y: auto; padding-right: 3px; }
.to-lo-weapon {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  color: #eef2ea; transition: border-color .14s, background .14s;
}
.to-lo-weapon:hover:not(:disabled) { border-color: rgba(127,224,102,.4); }
.to-lo-weapon strong { font-size: 12.5px; font-weight: 700; }
.to-lo-weapon span { font-size: 10px; color: #8b9686; font-family: "DM Mono", monospace; }
.to-lo-weapon.is-active { border-color: #7fe066; background: rgba(127,224,102,.12); }
.to-lo-weapon.is-locked { opacity: .45; cursor: not-allowed; }

.to-lo-detail {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: 11px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
}
.to-lo-name { margin: 0; font-family: "Oswald", sans-serif; font-size: 19px; letter-spacing: .02em; }
.to-lo-blurb { margin: -4px 0 2px; font-size: 11.5px; color: #9aa596; font-style: italic; }

.to-lo-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.to-lo-stat { display: flex; align-items: center; gap: 7px; }
.to-lo-stat span {
  flex: 0 0 62px; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: #7c8778; font-family: "DM Mono", monospace;
}
.to-lo-stat i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.09); overflow: hidden; }
.to-lo-stat i b { display: block; height: 100%; background: linear-gradient(90deg, #5c9e48, #7fe066); }

.to-lo-slot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.to-lo-slot-label {
  flex: 0 0 62px; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: #7c8778; font-family: "DM Mono", monospace;
}
.to-lo-slot-opts { display: flex; flex-wrap: wrap; gap: 4px; }

/* Attachment cards. Icon on the left, name + what-it-does stacked beside it,
   stat deltas underneath — sized so a row of five optics still fits the
   panel without wrapping on a normal cabinet. */
.to-lo-att {
  flex: 1 1 128px; min-width: 0; max-width: 190px;
  display: grid; grid-template-columns: auto 1fr; gap: 1px 7px;
  align-items: center; text-align: left;
  padding: 5px 7px; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #9aa596;
  transition: border-color .14s, color .14s, background .14s, transform .14s;
}
.to-lo-att:hover {
  border-color: rgba(127,224,102,.45); color: #cfe0c4;
  background: rgba(127,224,102,.06); transform: translateY(-1px);
}
.to-lo-att:focus-visible { outline: 2px solid #7fe066; outline-offset: 1px; }
.to-lo-att.is-active {
  background: rgba(127,224,102,.14); border-color: #7fe066; color: #eaf5e4;
}

/* The icon sits in its own tinted well so the part reads as a part. */
.to-att-icon {
  grid-row: 1 / span 2;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 21px; border-radius: 4px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.07);
  color: #8fa287;
}
.to-lo-att:hover .to-att-icon, .to-lo-att.is-active .to-att-icon { color: #9fe88a; }
.to-lo-att.is-active .to-att-icon {
  background: rgba(127,224,102,.12); border-color: rgba(127,224,102,.32);
}
/* The icons are drawn in a 40×24 box; matching that ratio here keeps the
   muzzle devices' collars and the scope's turrets from being clipped off. */
.to-att-icon svg { width: 30px; height: 18px; display: block; overflow: visible; }

.to-att-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.to-att-text strong {
  font-family: "Oswald", sans-serif; font-size: 11.5px; letter-spacing: .02em;
  color: inherit; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.to-att-text small {
  font-size: 9px; line-height: 1.25; color: #7c8778;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.to-lo-att.is-active .to-att-text small { color: #93a889; }

/* Delta chips: green when the change helps, red when it costs you, neutral
   for the optic's magnification (which is neither good nor bad, just a fact). */
/* Reserved a fixed chip-row height so cards in the same slot stay level
   whether they carry two deltas, one, or just the "Equipped" marker —
   otherwise a row of parts sits at three different heights. */
.to-att-delta {
  grid-column: 2; display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px;
  /* Two chip rows' worth, always reserved: a narrow optic card wraps its
     second chip onto a new line while a wide barrel card keeps both on one,
     and reserving the space regardless keeps every card in a row level. */
  min-height: 29px; align-content: flex-start;
}
/* An unselected card with no stat change has nothing to say; the selected
   card's row is empty by definition (it's compared against itself) but still
   carries the "Equipped" marker below, so only the former collapses. */
.to-lo-att:not(.is-active) .to-att-delta:empty { display: none; }
.to-att-delta b {
  font-family: "DM Mono", monospace; font-size: 8.5px; font-weight: 500;
  padding: 1px 4px; border-radius: 3px; white-space: nowrap;
}
.to-att-delta b.is-up { background: rgba(127,224,102,.14); color: #8fdc72; }
.to-att-delta b.is-down { background: rgba(255,92,92,.13); color: #f08a7d; }
.to-att-delta b.is-info { background: rgba(127,178,224,.14); color: #8fbde0; }
/* The equipped card's own deltas are all zero-change against itself, so they
   collapse to nothing — say so rather than leaving a ragged empty card. */
.to-lo-att.is-active .to-att-delta::after {
  content: "Equipped";
  font-family: "DM Mono", monospace; font-size: 8.5px;
  padding: 1px 4px; border-radius: 3px;
  background: rgba(127,224,102,.18); color: #b6f0a2;
}

/* Skin picker: a strip of preview cards, scrolled sideways so sixteen skins
   don't turn Customize into a wall. The preview is the baked side view of
   the gun wearing it. */
.to-lo-skinrow[hidden] { display: none !important; }
.to-lo-skins {
  flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: rgba(127,224,102,.35) transparent;
}
.to-lo-skin {
  flex: 0 0 104px; display: flex; flex-direction: column; gap: 3px; align-items: stretch;
  padding: 4px; border-radius: 7px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #9aa596;
  transition: border-color .14s, color .14s, background .14s, transform .14s;
}
.to-lo-skin img {
  display: block; width: 100%; aspect-ratio: 360 / 128; object-fit: cover;
  border-radius: 4px; background: #0e1216;
}
.to-lo-skin strong {
  font-family: "Oswald", sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.to-lo-skin:hover { border-color: rgba(127,224,102,.45); color: #cfe0c4; background: rgba(127,224,102,.06); transform: translateY(-1px); }
.to-lo-skin:focus-visible { outline: 2px solid #7fe066; outline-offset: 1px; }
.to-lo-skin.is-active { background: rgba(127,224,102,.14); border-color: #7fe066; color: #eaf5e4; }
.to-lo-skin.is-active strong::before { content: "\2713  "; color: #9fe88a; }

.to-go-xp {
  margin: 0; font-family: "Oswald", sans-serif; font-size: 15px;
  letter-spacing: .05em; color: #7fe066;
}
/* Between-match map vote. The room stays connected through this, so it reads
   as a countdown to the next match rather than a menu you have to act on. */
.to-intermission {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 14px 18px; border-radius: 12px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09);
}
.to-vote-head {
  margin: 0; font-family: "Oswald", sans-serif; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: #9aa596;
}
.to-vote-head span { color: #7fd1e0; }
.to-vote-list { display: flex; justify-content: center; gap: 8px; }
/* A card per map: its preview shot, then name + votes. */
.to-vote-opt {
  flex: 1 1 0; min-width: 0; max-width: 200px;
  display: flex; flex-direction: column; gap: 5px; cursor: pointer;
  font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .05em;
  padding: 4px 4px 6px; border-radius: 9px; color: #cfe0e4;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  transition: background .14s, border-color .14s, color .14s, transform .14s;
}
.to-vote-img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 6px; background: #0b0f14; pointer-events: none;
}
.to-vote-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 0 4px; }
.to-vote-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-vote-opt:hover { border-color: rgba(127,209,224,.45); }
.to-vote-opt.is-mine { border-color: #7fd1e0; color: #eaf7fa; background: rgba(127,209,224,.14); transform: translateY(-2px); }
.to-vote-opt:focus-visible { outline: 2px solid #7fd1e0; outline-offset: 2px; }
.to-vote-n { font-size: 11px; color: #7fe066; white-space: nowrap; }

.to-go-rank {
  margin: -6px 0 0; font-family: "Oswald", sans-serif; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: #ffd166;
}

/* After-action medal list (BO2 style): badge, name, count. */
.to-go-medals { width: min(520px, 100%); }
.to-go-medals h3 {
  margin: 0 0 7px; font-family: "Oswald", sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: #93a08c; text-align: center;
}
.to-go-medals ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px;
  max-height: 176px; overflow-y: auto; text-align: left;
}
.to-go-medal {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 4px 10px 4px 6px; border-radius: 7px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(207,214,209,.14);
  font-family: "Oswald", sans-serif; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: #f3ead2;
}
.to-go-medal-icon svg, .to-go-medal-icon img { display: block; width: 30px; height: 30px; object-fit: contain; }
.to-go-medal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-go-medal b { font-weight: 700; color: #f5b82e; font-size: 15px; font-variant-numeric: tabular-nums; }
.to-go-medal-bonus {
  margin: 6px 0 0; text-align: center; font-family: "Oswald", sans-serif; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: #f5b82e;
}

.to-btn {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .03em;
  padding: 12px 30px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform .12s, filter .12s, opacity .12s;
}
.to-btn:active { transform: scale(.97); }
.to-btn-primary {
  background: linear-gradient(180deg, #8ef06f, #5cbf46);
  color: #0c1408;
  box-shadow: 0 8px 22px rgba(94,191,70,.35);
}
.to-btn-primary:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.4); }
.to-btn-primary:not(:disabled):hover { filter: brightness(1.08); }
.to-btn-ghost {
  background: rgba(255,255,255,.08);
  color: #eef2ea;
  border: 1px solid rgba(255,255,255,.16);
}
.to-btn-ghost:hover { background: rgba(255,255,255,.14); }

.to-hint { margin: 0; font-size: 11.5px; color: #7c8778; font-family: "DM Mono", monospace; }
.to-hint-mobile { display: none; }

.to-back-link { margin-top: 4px; font-size: 12px; color: #8fa088; text-decoration: none; }
.to-back-link:hover { text-decoration: underline; }

/* ---------- Pause / gameover ---------- */

.to-pause, .to-gameover { background: rgba(4,6,4,.82); backdrop-filter: blur(6px); }

/* ---------- Escape menu ---------- */

.to-pause-inner {
  width: min(560px, 92%);
  padding: 16px 18px !important;
  gap: 12px !important;
  align-items: stretch !important;
  text-align: left;
}
.to-menu-head { display: flex; align-items: baseline; justify-content: space-between; }
.to-menu-head h2 { margin: 0; font-family: "Oswald", sans-serif; font-size: 22px; letter-spacing: .06em; }
.to-menu-esc { font-family: "DM Mono", monospace; font-size: 10.5px; color: #7c8778; }

.to-menu-tabs { display: flex; gap: 5px; }
.to-menu-tab {
  flex: 1; font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .05em;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #9aa596;
  transition: background .14s, border-color .14s, color .14s;
}
.to-menu-tab:hover { border-color: rgba(127,224,102,.4); color: #cfe0c4; }
.to-menu-tab.is-active { background: rgba(127,224,102,.14); border-color: #7fe066; color: #eaf5e4; }

.to-menu-panel {
  min-height: 168px; max-height: 230px; overflow-y: auto;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
}

.to-set-row {
  display: grid; grid-template-columns: 1fr 150px 38px;
  align-items: center; gap: 10px; padding: 7px 0;
  font-size: 12.5px; color: #dfe6da;
}
.to-set-row + .to-set-row { border-top: 1px solid rgba(255,255,255,.06); }
/* the shared `.to-pause-inner` rule below re-centres text, so state it here */
.to-set-row > span, .to-key-list, .to-menu-roster { text-align: left; }
.to-set-row output { font-family: "DM Mono", monospace; font-size: 11px; color: #9aa596; text-align: right; }
.to-set-check { grid-template-columns: 1fr auto; }
.to-set-row input[type="range"] { width: 100%; accent-color: #7fe066; }
.to-set-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #7fe066; }
.to-set-row select {
  width: 100%; padding: 4px 6px; border-radius: 6px;
  background: #1b2019; color: #dfe6da; border: 1px solid rgba(255,255,255,.14);
  font: inherit; font-size: 12px;
}

.to-key-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.to-key-list div { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #b9c4b2; }
.to-key-list kbd {
  flex: 0 0 auto; min-width: 46px; text-align: center;
  font-family: "DM Mono", monospace; font-size: 10px;
  padding: 3px 6px; border-radius: 5px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #eaf5e4;
}

.to-menu-roster { font-family: "DM Mono", monospace; font-size: 12px; color: #9aa596; }

.to-menu-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.to-menu-range { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.to-menu-range[hidden] { display: none; }
.to-menu-range .to-btn { flex: 1; min-width: 120px; text-align: center; font-size: 13px; padding: 9px 16px; }
.to-menu-range .to-btn:disabled { opacity: .45; cursor: default; }
.to-menu-actions .to-btn { flex: 1; min-width: 120px; text-align: center; }
/* Owner's Invincible toggle: a full-width line between Resume and the rest. */
.to-menu-actions .to-menu-god { flex: 1 0 100%; box-sizing: border-box; margin: 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; }
.to-menu-actions .to-menu-god[hidden] { display: none; }
/* Owner's room-mode switch (Socialize rooms): label, mode list, Start. */
.to-menu-actions .to-menu-roommode { grid-template-columns: 1fr 160px auto; }

/* Socialize: no guns, so none of the combat HUD or touch buttons. The
   killfeed (joins and leaves), chat, minimap and emote button stay, and
   the swap button, which is hold X (the saloon bar, duo emotes). Fire
   comes back while you hold a drink: it sips. The owner keeps the lot
   (.to-social-armed, game.js socialUnarmed). */
body.to-social:not(.to-social-armed) #to-hud-teams,
body.to-social:not(.to-social-armed) #to-ss-hud,
body.to-social:not(.to-social-armed) #to-crosshair,
body.to-social:not(.to-social-armed) #to-charge,
body.to-social:not(.to-social-armed) #to-saber-meter,
body.to-social:not(.to-social-armed) #to-spawnguard,
body.to-social:not(.to-social-armed) .to-hud-bottom,
body.to-social:not(.to-social-armed) #to-hud-gear,
body.to-social:not(.to-social-armed) #to-cook,
body.to-social:not(.to-social-drink):not(.to-social-armed) #to-touch-fire,
body.to-social:not(.to-social-armed) #to-touch-fire-l,
body.to-social:not(.to-social-armed) #to-touch-ads,
body.to-social:not(.to-social-armed) #to-touch-tac,
body.to-social:not(.to-social-armed) #to-touch-reload,
body.to-social:not(.to-social-armed) #to-touch-melee,
body.to-social:not(.to-social-armed) #to-touch-nade,
body.to-social:not(.to-social-armed) #to-touch-admire,
body.to-social:not(.to-social-armed) #to-touch-streak,
body.to-social:not(.to-social-armed) #to-touch-endstreak,
body.to-social:not(.to-social-armed) #to-touch-interact { display: none !important; }
@media (max-width: 760px) {
  .to-menu-actions .to-menu-roommode { grid-template-columns: 1fr auto; }
  .to-menu-actions .to-menu-roommode > span { grid-column: 1 / -1; }
}

.to-btn-danger {
  background: rgba(214,74,58,.16);
  border: 1px solid rgba(255,110,90,.5);
  color: #ff9f8c;
}
.to-btn-danger:hover { background: rgba(214,74,58,.28); }
.to-btn-sm { padding: 7px 16px !important; font-size: 12px !important; }

/* in-match menu button, for touch where there is no Esc key */
.to-gear {
  /* clear of the top-right readout, which runs to about 100px */
  position: absolute; right: 16px; top: 104px;
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(6,9,7,.5); border: 1px solid rgba(255,255,255,.16);
  color: #dfe6da; font-size: 15px; line-height: 1;
  cursor: pointer; pointer-events: auto;
}
.to-gear:hover { border-color: rgba(127,224,102,.45); }
.to-pause-inner, .to-gameover-inner {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 30px; text-align: center;
}
.to-pause-inner h2, .to-gameover-inner h2 {
  margin: 0; font-family: "Oswald", sans-serif; font-size: 26px; color: #f2f5ee;
}

.to-go-stats {
  display: flex; gap: 26px; margin: 4px 0 10px;
}
.to-go-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.to-go-stats strong { font-size: 26px; font-family: "Oswald", sans-serif; color: #7fe066; }
.to-go-stats span { font-size: 10.5px; color: #93a08c; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- HUD ---------- */

/* The shadow is load-bearing, not decoration: on the bright maps the HUD sits
   against pale sand and sunset sky and is otherwise unreadable. */
.to-hud {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  font-family: "DM Sans", sans-serif;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.5);
}

.to-hud-top {
  position: absolute; top: 14px; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0 18px;
}
.to-hud-wave, .to-hud-hostiles, .to-hud-score { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.to-hud-label { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #c3cfbb; }
/* Numbers you glance at rather than read every second sit a notch smaller and
   dimmer than the fight-critical readouts (health/ammo, bottom-of-screen) —
   BO2's HUD keeps exactly one visual "loudest" tier and this wasn't it. */
.to-hud-wave strong, .to-hud-hostiles strong, .to-hud-score strong {
  font-family: "Oswald", sans-serif; font-size: 19px; color: #dfe6da;
  text-shadow: 0 2px 6px rgba(0,0,0,.6); opacity: .82;
}

.to-hud-timer {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 20px;
  color: #ffdf6b; text-shadow: 0 2px 10px rgba(0,0,0,.7);
  opacity: 0; transition: opacity .3s;
}
.to-hud-timer.is-visible { opacity: 1; }

/* BO2's spawn card: the class you're carrying and its perks, 3 s on each
   spawn (combat/perk-carry.js). */
.to-perk-card {
  position: absolute; top: 18%; left: 50%; transform: translate(-50%, -6px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; opacity: 0; transition: opacity .35s, transform .35s;
  font-family: "Oswald", sans-serif; text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.to-perk-card.is-visible { opacity: 1; transform: translate(-50%, 0); }
.to-perk-card b { font-size: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #f3f1e6; }
.to-perk-card div { display: flex; gap: 14px; }
.to-perk-card span {
  display: flex; align-items: center; gap: 6px; font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; color: #e6e4d8;
}
.to-perk-card svg {
  width: 26px; height: 26px; padding: 4px; border-radius: 6px; color: #0d1410;
  background: var(--perk); box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
/* Engineer (view/engineer-marks.js): enemy streaks through walls. */
.to-engineer-marks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.to-engineer-marks[hidden] { display: none; }
.to-engineer-marks i {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px;
  border: 2px solid #e5b234; background: rgba(229,178,52,.25); box-shadow: 0 0 6px rgba(0,0,0,.6);
}
.to-engineer-marks i[hidden] { display: none; }
@media (max-width: 760px) { .to-perk-card { top: 14%; } .to-perk-card div { gap: 8px; } .to-perk-card span { font-size: 12px; } }

.to-crosshair {
  position: absolute; top: 50%; left: 50%; width: 26px; height: 26px;
  transform: translate(-50%,-50%);
  transition: transform .08s;
}
.to-crosshair.is-ads { opacity: 0; }
/* Third person aiming in: no sight picture, so the crosshair stays, pulled
   in tight (game.js is-ads-tp). */
.to-crosshair.is-ads-tp { transform: translate(-50%,-50%) scale(.62); }
/* Green Candles charge ring: a thin arc that fills clockwise (--p 0..1),
   brighter and pulsing once full. Shows while aiming too. */
.to-charge {
  --p: 0;
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: conic-gradient(#6dff3a calc(var(--p) * 360deg), rgba(255,255,255,.14) 0);
  -webkit-mask: radial-gradient(circle, transparent 19px, #000 20px);
          mask: radial-gradient(circle, transparent 19px, #000 20px);
  filter: drop-shadow(0 0 4px rgba(109,255,58,.55));
  pointer-events: none;
}
.to-charge.is-full { animation: to-charge-full .28s ease-in-out infinite alternate; }
@keyframes to-charge-full { from { opacity: .75; } to { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }
.to-charge-cells {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  font: 600 11px/1 "Oswald", sans-serif; letter-spacing: .08em; color: #b9ff9a;
  text-shadow: 0 1px 4px rgba(0,0,0,.8); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .to-charge.is-full { animation: none; } }
/* Trollsaber block meter: a red arc low-left of the crosshair. Brightens
   while the guard is up; blinks while broken (not colour alone). */
.to-saber-meter {
  --p: 1;
  position: absolute; top: 50%; left: 50%; width: 60px; height: 60px;
  transform: translate(-50%,-50%) rotate(200deg);
  border-radius: 50%;
  background: conic-gradient(#ff3b2a calc(var(--p) * 140deg), rgba(255,255,255,.16) calc(var(--p) * 140deg) 140deg, transparent 140deg);
  -webkit-mask: radial-gradient(circle, transparent 26px, #000 27px);
          mask: radial-gradient(circle, transparent 26px, #000 27px);
  filter: drop-shadow(0 0 4px rgba(255,59,42,.6));
  opacity: .5; pointer-events: none; transition: opacity .12s;
}
.to-saber-meter.is-on { opacity: 1; }
.to-saber-meter.is-broken { opacity: .9; animation: to-saber-broken .2s steps(2) infinite; }
@keyframes to-saber-broken { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .to-saber-meter.is-broken { animation: none; } }
.to-ch-dot {
  position: absolute; top: 50%; left: 50%; width: 3px; height: 3px;
  background: #fff; border-radius: 50%; transform: translate(-50%,-50%);
  box-shadow: 0 0 4px rgba(0,0,0,.8);
}
.to-ch-line { position: absolute; background: #fff; box-shadow: 0 0 3px rgba(0,0,0,.8); }
.to-ch-t, .to-ch-b { left: 50%; width: 2px; height: 8px; transform: translateX(-50%); }
.to-ch-t { top: 0; }
.to-ch-b { bottom: 0; }
.to-ch-l, .to-ch-r { top: 50%; height: 2px; width: 8px; transform: translateY(-50%); }
.to-ch-l { left: 0; }
.to-ch-r { right: 0; }

.to-hitmarker {
  position: absolute; top: 50%; left: 50%; width: 28px; height: 28px;
  transform: translate(-50%,-50%) scale(.6); opacity: 0;
  pointer-events: none;
}
.to-hitmarker::before, .to-hitmarker::after {
  content: ""; position: absolute; background: #ff3b30; width: 3px; height: 12px; top: 50%; left: 50%;
}
.to-hitmarker::before { transform: translate(-50%,-50%) rotate(45deg); }
.to-hitmarker::after { transform: translate(-50%,-50%) rotate(-45deg); }
.to-hitmarker.is-crit::before, .to-hitmarker.is-crit::after { background: #ffd60a; height: 16px; width: 3.5px; }
/* Kill confirmed: same X, but it holds a beat longer and burns brighter —
   the extra hang time is what reads as "that one ended them" rather than
   just another hit, even at a glance. */
.to-hitmarker.is-kill::before, .to-hitmarker.is-kill::after {
  background: #ff3b30; width: 4px; box-shadow: 0 0 6px rgba(255,59,48,.85);
}
.to-hitmarker.is-kill.is-crit::before, .to-hitmarker.is-kill.is-crit::after {
  background: #ffd60a; box-shadow: 0 0 7px rgba(255,214,10,.9);
}
.to-hitmarker.pop { animation: to-hitpop .18s ease-out; }
.to-hitmarker.is-kill.pop { animation: to-hitpop-kill .32s ease-out; }
@keyframes to-hitpop {
  0% { transform: translate(-50%,-50%) scale(.5); opacity: 1; }
  60% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}
@keyframes to-hitpop-kill {
  0% { transform: translate(-50%,-50%) scale(.5); opacity: 1; }
  35% { transform: translate(-50%,-50%) scale(1.3); opacity: 1; }
  75% { transform: translate(-50%,-50%) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

.to-hitflash {
  position: absolute; inset: 0; background: rgba(255,30,20,0);
  transition: background .08s;
}
.to-hitflash.is-hit { background: rgba(255,30,20,.28); }

/* Hit direction: a red arc round the crosshair per attacker, turned toward
   where the hit came from. game.js sets the rotation and fade every frame. */
.to-hitdir {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  pointer-events: none; z-index: 12;
}
.to-hitdir-mark {
  position: absolute; left: -105px; top: -105px; width: 210px; height: 210px;
  opacity: 0; will-change: transform, opacity;
}
.to-hitdir-mark::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 9px solid transparent; border-top-color: rgba(255,45,30,.9);
  -webkit-mask-image: conic-gradient(from -28deg, #000 0 56deg, transparent 56deg);
          mask-image: conic-gradient(from -28deg, #000 0 56deg, transparent 56deg);
  filter: drop-shadow(0 0 6px rgba(255,30,20,.7));
}
@media (max-width: 640px) {
  .to-hitdir-mark { left: -80px; top: -80px; width: 160px; height: 160px; }
  .to-hitdir-mark::before { border-width: 7px; }
}

.to-lowhp {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 120px 30px rgba(180,10,10,0);
  transition: box-shadow .4s;
}
.to-lowhp.is-low { box-shadow: inset 0 0 140px 40px rgba(180,10,10,.55); animation: to-lowhp-pulse 1.2s ease-in-out infinite; }

/* Death fade — a slower, longer-held cousin of .to-hitflash. That one decays
   in ~0.25s so it reads as "you got hit"; this one holds through the whole
   respawn countdown so dying reads as a beat, not a blink. */
.to-deathfade {
  position: absolute; inset: 0; z-index: 13; pointer-events: none;
  background: #0a0705; opacity: 0;
  transition: opacity .5s ease-in;
}
.to-deathfade.is-dead { opacity: .62; transition: opacity .35s ease-out; }
@keyframes to-lowhp-pulse {
  0%, 100% { box-shadow: inset 0 0 140px 40px rgba(180,10,10,.4); }
  50% { box-shadow: inset 0 0 160px 55px rgba(180,10,10,.65); }
}

.to-hud-bottom {
  position: absolute; bottom: 16px; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 18px;
}

.to-hud-health { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.to-hp-bar {
  width: 130px; height: 10px; border-radius: 6px; background: rgba(255,255,255,.12);
  overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}
.to-hp-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #5cbf46, #8ef06f);
  transition: width .2s, background .2s;
}
.to-hp-fill.is-low { background: linear-gradient(90deg, #d92b1c, #ff5a3d); }
#hud-hp-text { font-family: "DM Mono", monospace; font-size: 13px; color: #dfe6da; }

.to-hud-ammo {
  display: flex; align-items: baseline; gap: 4px;
  font-family: "Oswald", sans-serif;
}
#hud-ammo-cur { font-size: 30px; color: #f2f5ee; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
#hud-ammo-sep { font-size: 16px; color: #7c8778; }
#hud-ammo-res { font-size: 16px; color: #9aa596; }
.to-hud-reload {
  margin-left: 8px; font-family: "DM Mono", monospace; font-size: 10px;
  color: #ffdf6b; letter-spacing: .08em;
  animation: to-blink 1s steps(2) infinite;
}
@keyframes to-blink { 50% { opacity: .25; } }

/* ---------- Test range readout ---------- */

.to-range {
  position: absolute; right: 16px; bottom: 96px; z-index: 12;
  width: 232px; border-radius: 10px; overflow: hidden;
  background: rgba(6,9,7,.62); border: 1px solid rgba(255,255,255,.12);
  font-family: "DM Mono", monospace; font-size: 10.5px; color: #cfd8c8;
}
.to-range-bar {
  padding: 5px 10px; background: rgba(127,224,102,.16);
  font-family: "Oswald", sans-serif; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: #eaf5e4;
}
.to-range-shot {
  padding: 8px 10px; font-family: "Oswald", sans-serif; font-size: 16px;
  letter-spacing: .04em; color: #f2f5ee;
}
.to-range-shot.is-new { animation: to-range-pop .22s ease-out; }
@keyframes to-range-pop {
  from { transform: scale(1.12); color: #7fe066; }
  to { transform: none; }
}
.to-range-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 10px;
}
.to-range-row b { color: #7fe066; }
.to-range-row kbd {
  display: inline-block; padding: 0 3px; margin-right: 2px; border-radius: 3px;
  background: rgba(255,255,255,.12); color: #eef2ea; font-size: 9.5px;
}
.to-range-note {
  margin: 4px 0 0; padding: 6px 10px; font-size: 9.5px; color: #8b9686;
  border-top: 1px solid rgba(255,255,255,.08);
}
.to-range-spawnbot {
  display: block; width: calc(100% - 20px); margin: 6px 10px 0;
  padding: 6px 0; border: 1px solid rgba(127,224,102,.4); border-radius: 6px;
  background: rgba(127,224,102,.14); color: #eaf5e4;
  font-family: "DM Mono", monospace; font-size: 10.5px; letter-spacing: .04em;
  cursor: pointer;
}
.to-range-spawnbot kbd {
  display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 3px;
  background: rgba(255,255,255,.12); color: #eef2ea; font-size: 9.5px;
}
.to-range-spawnbot:hover { background: rgba(127,224,102,.24); }
.to-range-spawnbot:active { transform: translateY(1px); }

/* ---------- Gear: lobby picker, HUD strip, cook meter, flashbang ---------- */

.to-lo-gearlist { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.to-lo-gearrow { display: flex; align-items: flex-start; gap: 10px; }
.to-lo-gearopts { display: flex; flex-wrap: wrap; gap: 6px; }
.to-lo-gear {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  min-width: 116px; padding: 7px 10px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #9aa596; transition: border-color .14s, color .14s, background .14s;
}
.to-lo-gear:hover:not(:disabled) { border-color: rgba(127,224,102,.4); color: #cfe0c4; }
.to-lo-gear strong { font-size: 12.5px; font-weight: 700; color: #eef2ea; }
.to-lo-gear span { font-size: 10px; font-family: "DM Mono", monospace; }
.to-lo-gear.is-active { background: rgba(127,224,102,.12); border-color: #7fe066; }
.to-lo-gear.is-locked { opacity: .55; cursor: not-allowed; }
.to-lo-gear.is-locked strong { color: #9aa596; }

/* Sits above the health bar in the bottom-left corner, out of the ammo's way. */
.to-hud-gear {
  position: absolute; left: 18px; bottom: 44px; z-index: 12;
  display: flex; gap: 6px;
}
.to-gear-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 7px;
  background: rgba(6,9,7,.5); border: 1px solid rgba(255,255,255,.12);
  font-family: "DM Mono", monospace; font-size: 10.5px; color: #cfd8c8;
  opacity: .78; transition: opacity .15s;
}
.to-gear-chip:hover, .to-gear-chip.is-active { opacity: 1; }
.to-gear-chip b {
  font-size: 9px; letter-spacing: .06em; color: #0d1210;
  background: #9aa596; border-radius: 3px; padding: 1px 4px;
}
.to-gear-chip i { font-style: normal; color: #7fe066; font-weight: 700; }
.to-gear-chip.is-empty { opacity: .4; }
.to-gear-chip.is-active { border-color: #7fe066; background: rgba(127,224,102,.16); }

/* Cook meter: how much fuse is left while a grenade is still in your hand. */
.to-cook {
  position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  width: 120px; height: 4px; border-radius: 3px; z-index: 13;
  background: rgba(0,0,0,.45); overflow: hidden;
}
.to-cook i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffdf6b, #ff5a3d); }

/* Flashbang whiteout — a full-cabinet wash that fades back over a few seconds. */
.to-blind {
  position: absolute; inset: 0; z-index: 18; pointer-events: none;
  background: #fff; opacity: 0;
}

/* Damage numbers. Positioned by script from the world point the round hit,
   so the container is a full-bleed layer and each number is placed by
   transform — top/left would fight the transform used for the drift. */
.to-dmg-nums { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
.to-dmg-num {
  position: absolute; top: 0; left: 0; will-change: transform, opacity;
  font-family: "DM Mono", monospace; font-size: 15px; font-weight: 500;
  color: #f2f5ee; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5);
  transform-origin: 0 0; white-space: nowrap;
}
.to-dmg-num.is-crit { color: #ffe27a; font-size: 19px; font-weight: 600; }
.to-dmg-num.is-word { color: #ff6a4a; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
/* U Mad Bro? comic words: chunky yellow with a black outline and a red
   drop, like a comic panel's sound effect. */
.to-dmg-num.is-comic {
  font-family: "Impact", "Arial Black", sans-serif; font-size: 34px; font-weight: 900;
  letter-spacing: .04em; color: #ffe14a; -webkit-text-stroke: 2px #111;
  text-shadow: 3px 3px 0 #e8323c, 0 0 10px rgba(0,0,0,.4);
}

/* Standing inside smoke. Grey wash plus a soft vignette so the edges of the
   screen close in — you can still see your gun, just not the room. */
.to-smoke {
  position: absolute; inset: 0; z-index: 16; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(158,164,172,.42) 0%, rgba(132,138,146,.82) 78%);
  transition: opacity .18s linear;
}

/* EMP scramble: cold blue static, a scanline crawl, and the HUD dropping out
   from under it (that part is done by .to-emp-down on the HUD itself). */
.to-emp {
  position: absolute; inset: 0; z-index: 17; pointer-events: none; opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(79,214,255,.22) 0px, rgba(79,214,255,.22) 1px, transparent 1px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(8,26,36,.18) 0%, rgba(4,14,20,.78) 100%);
}
.to-emp.is-on { opacity: 1; animation: to-emp-flicker .16s steps(2) infinite; }
@keyframes to-emp-flicker { 0% { opacity: .82; } 50% { opacity: 1; } 100% { opacity: .88; } }

/* What the EMP actually takes from you: the readouts. Everything in the HUD
   drops out except the overlays that aren't instruments — the whiteout, the
   smoke wash, the EMP layer itself, and anything the round still needs to
   tell you (respawn timer, scoreboard). */
.to-emp-down > *:not(.to-blind):not(.to-smoke):not(.to-emp):not(.to-respawn):not(.to-scoreboard):not(.to-hitflash) {
  opacity: .06; filter: blur(1.5px) saturate(0); transition: opacity .12s linear;
}

@media (prefers-reduced-motion: reduce) {
  .to-emp.is-on { animation: none; }
}

/* Killcam letterbox — bars slide in from off-screen rather than appearing,
   so the cut to the orbit shot reads as deliberate instead of a HUD glitch. */
.to-killcam-bars {
  position: absolute; inset: 0; z-index: 19; pointer-events: none;
}
.to-killcam-bar {
  position: absolute; left: 0; right: 0; height: 9%;
  background: #000; transform: translateY(-100%);
  transition: transform .22s ease-out;
}
.to-killcam-bar-t { top: 0; }
.to-killcam-bar-b { bottom: 0; transform: translateY(100%); }
.to-killcam-bars.is-on .to-killcam-bar-t { transform: translateY(0); }
.to-killcam-bars.is-on .to-killcam-bar-b { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .to-killcam-bar { transition: none; }
}

.to-killfeed {
  position: absolute; top: 60px; right: 16px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  /* Entries are nowrap flex rows, so the cap has to follow the viewport or a
     long "name — weapon HS → name" line runs off the right edge on a phone. */
  max-width: min(260px, calc(100vw - 32px));
}
.to-kf-item {
  font-family: "DM Mono", monospace; font-size: 11px; color: #dfe6da;
  background: rgba(0,0,0,.35); padding: 3px 8px; border-radius: 6px;
  animation: to-kf-in .2s ease-out, to-kf-out .3s ease-in 2.4s forwards;
}
@keyframes to-kf-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes to-kf-out { to { opacity: 0; } }

/* A kill reads "killer — weapon HS → victim". Names take their team colour,
   and anything we were part of gets a rail so it stands out of the traffic. */
.to-kf-item {
  display: flex; align-items: center; gap: 5px;
  max-width: 100%; box-sizing: border-box; overflow: hidden;
}
.to-kf-item.is-mine {
  border-left: 2px solid #7fe066; background: rgba(0,0,0,.5);
}
/* Names give way before the weapon and the arrow do — losing a few
   characters of a name still leaves the line readable. */
.to-kf-name {
  font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.to-kf-weapon { color: #9aa596; font-size: 10px; white-space: nowrap; flex: 0 1 auto; overflow: hidden; }
/* U Mad Bro?: the verb that replaced the weapon ("yeeted", "ratio'd"). */
.to-kf-weapon.is-joke { color: #b6ff3c; font-style: italic; font-weight: 600; }
.to-kf-arrow, .to-kf-head, .to-kf-tag { flex: none; }
.to-kf-arrow { color: #6f7a6a; }
.to-kf-head {
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  color: #0d1410; background: #ffd166; border-radius: 3px; padding: 1px 3px;
}
.to-kf-tag {
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  color: #7fd1e0; border: 1px solid rgba(127,209,224,.5);
  border-radius: 3px; padding: 0 3px;
}
/* Every match is bot-filled, so telling a human kill/death apart from a bot
   one at a glance is the BO2-lobby-style read this feed was missing. */
.to-kf-bot {
  flex: none; font-size: 8px; letter-spacing: .05em;
  color: #7c8778; border: 1px solid rgba(154,165,150,.4);
  border-radius: 3px; padding: 0 3px; margin-left: 3px;
}

/* XP earned mid-match, floating up near the crosshair. The per-kill feedback
   is most of what makes the unlock grind read as progress. */
.to-xp-pops {
  position: absolute; left: 50%; top: 41%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none; z-index: 13;
}
.to-xp-pop {
  font-family: "Oswald", sans-serif; font-size: 13px; letter-spacing: .06em;
  color: #7fe066; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  animation: to-xp-float 1.4s ease-out forwards;
}
@keyframes to-xp-float {
  0% { opacity: 0; transform: translateY(6px); }
  15% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* BO2 medal splash: badge, condensed caps title, gold +points, stacked
   under the crosshair. The newest is on top; older ones shrink and fade.
   Opaque by default and animated from there: if the animation never runs
   (reduced motion, a throttled or headless tab) the medal still shows. */
.to-ks-badges {
  position: absolute; left: 50%; top: 60%; transform: translateX(-50%);
  width: min(70vw, 440px);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none; z-index: 14;
}
.to-medal-pop {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  animation: to-medal-in .34s cubic-bezier(.2, 1.6, .4, 1);
  transition: opacity .3s, transform .3s;
}
.to-medal-icon { width: clamp(44px, 6.4vh, 66px); aspect-ratio: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.to-medal-icon svg, .to-medal-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.to-medal-name {
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: clamp(18px, 2.9vh, 28px);
  letter-spacing: .04em; line-height: 1.05; text-transform: uppercase; white-space: nowrap;
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 16px rgba(0,0,0,.55);
}
.to-medal-pop.metal-gold .to-medal-name { color: #ffe7a8; }
.to-medal-pop.metal-red .to-medal-name { color: #ffb2a6; }
.to-medal-pts {
  font-family: "Oswald", sans-serif; font-weight: 500; font-size: clamp(14px, 2vh, 19px);
  letter-spacing: .04em; line-height: 1.1; color: #f5b82e; text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.to-medal-pop.is-old { opacity: .5; transform: scale(.72); margin-top: -6px; }
.to-medal-pop.is-old .to-medal-icon { display: none; }
@keyframes to-medal-in {
  from { transform: scale(1.9); }
  to { transform: scale(1); }
}

/* Streak ready / match-wide callouts: a bar across the top third, BO2's
   "UAV READY" splash. Never higher than 100px: above that it sat on the team
   score and the S&D / Royale status (seen during a VTOL Warship ride). */
.to-ks-banner {
  position: absolute; left: 50%; top: max(12.5%, 100px); transform: translateX(-50%);
  pointer-events: none; z-index: 14;
}
.to-ks-ready {
  display: flex; align-items: center; gap: 12px; padding: 7px 26px 7px 14px; white-space: nowrap;
  background: linear-gradient(90deg, transparent, rgba(12,14,13,.82) 14%, rgba(12,14,13,.82) 86%, transparent);
  border-top: 1px solid rgba(245,184,46,.5); border-bottom: 1px solid rgba(245,184,46,.5);
  animation: to-ks-ready-in .45s ease-out;
}
.to-ks-ready.tone-red { border-color: rgba(255,107,90,.6); }
.to-ks-ready-icon { width: clamp(34px, 5vh, 48px); aspect-ratio: 1; flex: none; }
.to-ks-ready-icon svg, .to-ks-ready-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.to-ks-ready-t1 {
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: clamp(17px, 2.6vh, 26px);
  letter-spacing: .05em; line-height: 1; text-transform: uppercase; color: #fff;
}
.to-ks-ready-t2 {
  font-family: "Oswald", sans-serif; font-weight: 500; font-size: clamp(11px, 1.5vh, 14px);
  letter-spacing: .12em; text-transform: uppercase; color: #f5b82e; margin-top: 2px;
}
.to-ks-ready.tone-red .to-ks-ready-t2 { color: #ff8a78; }
@keyframes to-ks-ready-in {
  from { transform: translateY(-12px); }
  to { transform: none; }
}

/* Nuclear-only screen accent: a brief warm vignette, not a full flash — it
   has to read as "everyone just heard that" without blinding the player who
   earned it and still has a match to finish. */
.to-screen-pulse {
  position: absolute; inset: 0; z-index: 14; pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(255,107,90,0);
}
.to-screen-pulse.is-pulsing { animation: to-screen-pulse .9s ease-out; }
@keyframes to-screen-pulse {
  0% { box-shadow: inset 0 0 140px 40px rgba(255,107,90,.5); }
  100% { box-shadow: inset 0 0 140px 40px rgba(255,107,90,0); }
}
@media (prefers-reduced-motion: reduce) {
  .to-screen-pulse.is-pulsing { animation: none; }
}

/* In-match scorestreak strip: progress toward the next one, then a slot per
   selected streak that lights up once it's callable. */
.to-ss-hud {
  position: absolute; left: 16px; bottom: 96px;
  display: flex; flex-direction: column; gap: 5px;
  pointer-events: none; z-index: 13; width: max-content;
}
.to-ss-meter {
  height: 3px; background: rgba(0,0,0,.5); border-radius: 2px; overflow: hidden;
}
.to-ss-meter > b {
  display: block; height: 100%; width: 0;
  background: #7fe066; transition: width .18s linear;
}
/* One picture per streak (rendered from its model), side by side. */
.to-ss-slots { display: flex; flex-direction: row; gap: 6px; }
.to-ss-slot {
  position: relative; width: 80px; height: 80px; padding: 4px; box-sizing: border-box;
  background: rgba(0,0,0,.42); border-radius: 9px;
  border: 2px solid rgba(255,255,255,.08);
  transition: border-color .15s, box-shadow .15s;
}
.to-ss-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1) brightness(.55); opacity: .7; transition: filter .15s, opacity .15s;
}
.to-ss-slot.is-ready .to-ss-img { filter: none; opacity: 1; }
/* One line per streak: "Helicopter Gunship" is wider than the strip, and
   letting it wrap makes the rows different heights. */
.to-ss-label {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.to-ss-slot .to-ss-icon { width: 14px; height: 14px; color: #9aa596; opacity: .8; flex-shrink: 0; }
.to-ss-slot.is-ready .to-ss-icon { color: #7fe066; opacity: 1; }
/* Ready to call — the key hint only appears when pressing it does something. */
.to-ss-slot.is-ready {
  background: rgba(10,22,8,.6); border-color: #7fe066;
  box-shadow: 0 0 12px rgba(127,224,102,.55);
}
.to-ss-slot.is-ready .to-ss-key { opacity: 1; }
/* Controller only: which ready streak d-pad right currently fires. A
   brighter rail than the plain-ready state, since "ready" and "the one
   that's actually armed right now" are different facts on a pad. */
.to-ss-slot.is-selected {
  border-color: #ffd166; background: rgba(40,32,10,.6); box-shadow: 0 0 12px rgba(255,209,102,.5);
}
/* The streak you're lining up right now. */
.to-ss-slot.is-marking { border-color: #ffd166; box-shadow: 0 0 12px rgba(255,209,102,.5); }
.to-ss-slot.is-marking .to-ss-img { filter: none; opacity: 1; }
/* Touch: ready rows are tap targets (the strip itself stays click-through). */
.to-ss-slot[role="button"] { pointer-events: auto; }
.to-ss-key {
  opacity: 0; font-size: 9px; letter-spacing: .06em;
  color: #0d1410; background: #7fe066; border-radius: 2px; padding: 0 3px;
}
.to-ss-cost { font-size: 9px; color: #6f7a6a; }

/* Marking mode: "look somewhere and press 4 again", for the care package and
   the airstrike. Sits above the crosshair so it doesn't fight the pickup and
   bomb prompts below it. */
.to-streak-mark {
  position: absolute; left: 50%; top: 40%; transform: translateX(-50%);
  z-index: 14; pointer-events: none; white-space: nowrap;
  font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: #9aa596;
  background: rgba(0,0,0,.45); border: 1px solid rgba(154,165,150,.35);
  border-radius: 4px; padding: 3px 10px;
}
/* Green once there's actually a point under the crosshair to commit to. */
.to-streak-mark.is-ready {
  color: #eaf5e4; border-color: rgba(127,224,102,.6);
  background: rgba(10,20,10,.6);
}

/* Hunter-killer lock: a red bracket riding the target, so the homing is
   something you can see. Tightens and pulses in the last few metres. */
.to-hk-lock {
  position: absolute; z-index: 13; pointer-events: none;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  transition: width .25s ease, height .25s ease;
}
.to-hk-lock[hidden] { display: none; }
.to-hk-lock > i {
  position: absolute; inset: 0; border: 2px solid #ff4a3a; border-radius: 3px;
  clip-path: polygon(0 0, 30% 0, 30% 8%, 8% 8%, 8% 30%, 0 30%, 0 70%, 8% 70%, 8% 92%, 30% 92%, 30% 100%,
    70% 100%, 70% 92%, 92% 92%, 92% 70%, 100% 70%, 100% 30%, 92% 30%, 92% 8%, 70% 8%, 70% 0);
  animation: to-hk-spin 2.4s linear infinite;
}
.to-hk-lock > span {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 3px;
  font-family: "Oswald", sans-serif; font-size: 10px; letter-spacing: .14em;
  color: #ff6a5a; text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.to-hk-lock.is-close { width: 30px; height: 30px; }
/* The FHJ-18's lock (combat/launcher.js): amber and wide while it locks,
   closing in (its size set from the lock), red at LOCKED. */
.to-aa-lock { transition: none; }
.to-aa-lock.is-locking > i { border-color: #ffc23a; }
.to-aa-lock.is-locking > span { color: #ffd36a; }
.to-hk-lock.is-close > i { animation: to-hk-pulse .3s ease-in-out infinite alternate; }
@keyframes to-hk-spin { to { transform: rotate(90deg); } }
@keyframes to-hk-pulse { from { opacity: 1; } to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .to-hk-lock > i { animation: none; }
}

/* VTOL Warship gunner feed (game.js warshipHudEl): thermal filter on the
   world canvas, a reticle, the gun readout, and boxes on every troll. */
.to-ws { position: absolute; inset: 0; z-index: 14; pointer-events: none; color: #e9f2e4;
  font-family: "Oswald", sans-serif; letter-spacing: .12em; }
.to-ws[hidden] { display: none; }
/* Up in the gunner seat the soldier's HUD has nothing to say. */
body.to-in-warship #to-ss-hud, body.to-in-warship #to-crosshair, body.to-in-warship #hud-ammo,
body.to-in-warship #to-hud-gear, body.to-in-warship #to-spawnguard, body.to-in-warship .to-hud-weapon { visibility: hidden; }
.to-ws-scan { position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
.to-ws-reticle { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%); }
.to-ws-reticle > i { position: absolute; background: rgba(233,242,228,.9); box-shadow: 0 0 2px #000; }
.to-ws-reticle > i:nth-child(1) { left: 0; top: 50%; width: 42px; height: 2px; margin-top: -1px; }
.to-ws-reticle > i:nth-child(2) { right: 0; top: 50%; width: 42px; height: 2px; margin-top: -1px; }
.to-ws-reticle > i:nth-child(3) { top: 0; left: 50%; height: 42px; width: 2px; margin-left: -1px; }
.to-ws-reticle > i:nth-child(4) { bottom: 0; left: 50%; height: 42px; width: 2px; margin-left: -1px; }
.to-ws-reticle > b { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);
  border: 2px solid rgba(233,242,228,.9); }
.to-ws.is-cannon .to-ws-reticle { width: 190px; height: 190px; }
.to-ws.is-cannon .to-ws-reticle > b { width: 64px; height: 64px; border-radius: 50%; }
.to-ws-top { position: absolute; bottom: 128px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px;
  font-size: 15px; text-shadow: 0 1px 3px #000; }
.to-ws-top strong { font-weight: 600; }
/* Streak titles (here and .to-df-top) sit at the bottom with their own gun /
   HP readouts: the top centre belongs to the score band (team score 46px,
   10px on touch; S&D / Royale status down to ~84px) and the callout banner. */
.to-ws-guns { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; gap: 10px;
  align-items: center; font-size: 15px; }
.to-ws-guns span { padding: 3px 10px; border: 1px solid rgba(233,242,228,.35); opacity: .55; }
.to-ws-guns span.is-on { opacity: 1; border-color: #e9f2e4; background: rgba(233,242,228,.14); }
/* tappable on touch (the HUD layer itself lets touches through) */
body.to-touch-play .to-ws-guns span { pointer-events: auto; cursor: pointer; padding: 8px 14px; }
.to-ws-guns em { font-style: normal; font-size: 11px; opacity: .7; margin-left: 6px; }
.to-ws-reload { position: absolute; left: 50%; bottom: 84px; width: 160px; height: 3px; transform: translateX(-50%);
  background: rgba(233,242,228,.2); }
.to-ws-reload i { display: block; height: 100%; background: #e9f2e4; }
.to-ws-marks > i { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid #ff3b30; box-shadow: 0 0 4px rgba(0,0,0,.8); }
.to-ws-marks > i[hidden] { display: none; }
.to-ws-marks > i.is-dog { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.to-ws-marks > i.is-friend { border-color: #3fa9ff; border-radius: 50%; }
.to-ws-marks > i.is-you { border-color: #7dff5a; border-radius: 50%; }
.to-ws-marks > i.is-you::after { content: "YOU"; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: #7dff5a; margin-top: 2px; }
@media (max-width: 760px) {
  .to-ws-guns { bottom: 150px; font-size: 13px; }
  .to-ws-top { bottom: 180px; font-size: 13px; }
  .to-ws-reload { bottom: 138px; }
  .to-ws-guns em { display: none; }
}

/* Lightning Strike tablet (streak-tablet.js): a rugged tablet raised into
   the hands, overhead map on the screen. Slides up tilted and settles flat;
   lowers the same way. */
.to-tablet {
  position: absolute; inset: 0; z-index: 16; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center;
  perspective: 900px;
}
.to-tablet[hidden] { display: none; }
.to-tablet-body {
  pointer-events: auto;
  width: min(88vh, 92vw); margin-bottom: 2vh;
  padding: 14px 18px 12px; border-radius: 22px;
  background: linear-gradient(160deg, #3b3f37, #22251f 55%, #1a1c18);
  border: 2px solid #11130f;
  box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 6px #262922;
  transform: translateY(105%) rotateX(38deg); transform-origin: 50% 100%;
  transition: transform .42s cubic-bezier(.2,.8,.25,1);
}
.to-tablet.is-up .to-tablet-body { transform: translateY(0) rotateX(6deg); }
.to-tablet.is-down .to-tablet-body { transform: translateY(105%) rotateX(38deg); transition-duration: .34s; transition-timing-function: cubic-bezier(.5,0,.8,.4); }
.to-tablet-head, .to-tablet-foot {
  display: flex; align-items: center; gap: 10px;
  font-family: "Oswald", sans-serif; letter-spacing: .14em; color: #c9d4c2;
}
.to-tablet-head { padding: 0 4px 8px; font-size: 15px; }
.to-tablet-title { color: #ff6a50; }
.to-tablet-slots { margin-left: auto; display: flex; gap: 6px; }
.to-tablet-slots > i {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 12px; color: #7d8676; border: 1.5px solid #59614f;
}
.to-tablet-slots > i.is-set { color: #fff; background: #d8412e; border-color: #ff6a50; }
.to-tablet-screen {
  position: relative; border-radius: 6px; overflow: hidden;
  border: 3px solid #0c0e0b; background: #0c120d;
  aspect-ratio: 1 / 1; max-height: 66vh; margin: 0 auto;
}
.to-tablet-screen canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.to-tablet-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45));
  mix-blend-mode: multiply;
}
.to-tablet-foot { padding: 8px 4px 0; font-size: 11px; color: #8f9a88; }
.to-tablet-hint { margin-right: auto; }
.to-tablet-foot button {
  font: inherit; letter-spacing: .12em; color: #c9d4c2; cursor: pointer;
  background: #2c3028; border: 1px solid #4a5143; border-radius: 6px; padding: 5px 12px;
}
.to-tablet-foot button:focus-visible { outline: 2px solid #ff6a50; outline-offset: 2px; }
.to-tablet.is-confirmed .to-tablet-title { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .to-tablet-body, .to-tablet.is-down .to-tablet-body { transition: none; }
}

/* Lobby picker: pick three. */
.to-ss-count { float: right; font-size: 10px; color: #9aa596; letter-spacing: .06em; }
.to-ss-picker { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; }
.to-ss-card {
  position: relative; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 28px 1fr auto; gap: 2px 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(190,215,180,.14);
  border-radius: 8px; padding: 8px 10px; color: #dfe6da;
  font: inherit; transition: border-color .12s, background .12s;
}
.to-ss-card > .to-ss-icon { grid-row: 1 / 3; align-self: center; }
.to-ss-card > strong { font-size: 13px; }
.to-ss-card > span {
  font-family: "DM Mono", monospace; font-size: 10px; color: #9aa596;
  grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap;
}
.to-ss-card > em {
  grid-column: 2 / -1; font-style: normal; font-size: 11px; color: #9aa596;
}
.to-ss-icon {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; color: #7fe066; opacity: .85; flex-shrink: 0;
}
.to-ss-icon svg { width: 100%; height: 100%; }
.to-ss-card.is-locked .to-ss-icon { color: #9aa596; }
.to-ss-card:hover:not(.is-locked) { border-color: rgba(127,224,102,.4); }
.to-ss-card.is-active {
  border-color: #7fe066; background: rgba(127,224,102,.09);
}
/* Which of the three slots it landed in, so the order is visible. */
.to-ss-card.is-active::after {
  content: attr(data-slot);
  position: absolute; top: -6px; left: -6px;
  width: 16px; height: 16px; border-radius: 50%;
  font-family: "DM Mono", monospace; font-size: 9px; line-height: 16px;
  text-align: center; color: #0d1410; background: #7fe066;
}
.to-ss-card.is-locked { opacity: .45; cursor: not-allowed; }

/* Death card — who got you, with what, and how close you came. */
.to-deathby {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 10px;
}
.to-deathby-l {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #9aa596;
}
.to-deathby-name { font-size: 17px; color: #f2f5ee; }
.to-deathby-meta { font-family: "DM Mono", monospace; font-size: 11px; color: #9aa596; }

@media (prefers-reduced-motion: reduce) {
  .to-xp-pop { animation-duration: .01s; animation-fill-mode: forwards; }
  .to-medal-pop, .to-ks-ready { animation: none; }
}

/* ---------- Touch controls ---------- */

.to-touch { position: absolute; inset: 0; z-index: 15; }
.to-touch-stick {
  position: absolute; left: 22px; bottom: 22px; width: 100px; height: 100px;
  border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  pointer-events: auto; touch-action: none;
}
.to-touch-stick-nub {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
  transform: translate(-50%,-50%);
  border-radius: 50%; background: rgba(255,255,255,.22);
}
.to-touch-look {
  position: absolute; right: 0; top: 0; bottom: 120px; width: 55%;
  pointer-events: auto; touch-action: none;
}
.to-touch-btn {
  position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1); color: #eef2ea; font-family: "Oswald", sans-serif;
  font-weight: 600; pointer-events: auto; touch-action: none;
}
.to-touch-fire { right: 22px; bottom: 30px; width: 76px; height: 76px; font-size: 13px; background: rgba(255,60,50,.22); }
.to-touch-ads { right: 108px; bottom: 100px; width: 58px; height: 58px; font-size: 11px; }
.to-touch-jump { right: 20px; bottom: 130px; width: 50px; height: 50px; font-size: 16px; }
.to-touch-reload { right: 130px; bottom: 30px; width: 50px; height: 50px; font-size: 12px; }
.to-touch-slide { left: 134px; bottom: 30px; width: 56px; height: 56px; font-size: 10px; }
.to-touch-melee { right: 130px; bottom: 96px; width: 50px; height: 50px; font-size: 9px; }
.to-touch-nade { right: 66px; bottom: 148px; width: 50px; height: 50px; font-size: 9px; }
.to-touch-interact { left: 134px; bottom: 96px; width: 50px; height: 50px; font-size: 14px; background: rgba(255,138,90,.22); }
.to-touch-swap { left: 22px; bottom: 136px; width: 52px; height: 52px; font-size: 14px; }
/* Only rendered while something is actually callable, so it can sit in the
   clear space above the swap button without crowding anything. */
.to-touch-streak {
  left: 22px; bottom: 198px; width: 52px; height: 52px; font-size: 8px;
  background: rgba(127,224,102,.24); border-color: rgba(127,224,102,.5);
}
.to-touch-emote { left: 22px; top: 96px; width: 52px; height: 32px; font-size: 9px; border-radius: 9px; }
.to-touch-emote[aria-expanded="true"] { background: rgba(127,224,102,.3); border-color: rgba(127,224,102,.65); }
.to-touch-btn.is-held { background: rgba(255,255,255,.26); }

@media (max-width: 760px), (pointer: coarse) {
  .to-hint { display: none; }
  .to-hint-mobile { display: block; }
  .to-lo-body { grid-template-columns: 1fr; }
  .to-lo-list { max-height: 132px; }
  .to-lo-stats { grid-template-columns: 1fr; }
}

/* Shed the decorative rows first, then tighten, so the loadout itself stays
   usable as the cabinet gets shorter. */
@container cab (max-height: 780px) {
  .to-lo-list { max-height: 190px; }
}

@container cab (max-height: 640px) {
  .to-lo-list { max-height: 148px; }
  .to-lo-detail { padding: 9px; gap: 6px; }
  .to-lo-name { font-size: 16px; }
  .to-lo-blurb { display: none; }
  .to-btn { padding: 9px 24px; font-size: 14px; }
  .to-menu-panel { min-height: 120px; max-height: 150px; }
}

@container cab (max-height: 500px) {
  .to-lo-list { max-height: 104px; }
  .to-lo-stats { display: none; }
  .to-lo-modeblurb { display: none; }
  .to-menu-panel { min-height: 92px; max-height: 116px; }
}

@container cab (max-height: 320px) {
  .to-lo-atts { display: none; }
  .to-lo-list { max-height: 84px; }
}

/* ---------- Loading ---------- */

.to-loading {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: #05070a;
}
.to-loading[hidden] { display: none; }
.to-loading-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #9aa596; font-family: "DM Mono", monospace; font-size: 12px; }
.to-loading-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(127,224,102,.2); border-top-color: #7fe066;
  animation: to-spin .8s linear infinite;
}
@keyframes to-spin { to { transform: rotate(360deg); } }

/* ---------- Radio ---------- */
/* Floats above every screen (title, HUD, pause, gameover) so it keeps
   playing and stays reachable no matter what's on top of it. */

.to-radio {
  position: absolute; left: 16px; bottom: 16px; z-index: 40;
  font-family: "DM Mono", monospace;
}
.to-radio-toggle {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(6,9,7,.6); border: 1px solid rgba(255,255,255,.16);
  color: #dfe6da; font-size: 15px; line-height: 1;
  cursor: pointer; pointer-events: auto;
}
.to-radio-toggle:hover { border-color: rgba(127,224,102,.45); }
.to-radio-toggle[aria-expanded="true"] { border-color: #7fe066; color: #7fe066; }

/* Grinspace: the radio panel, skinned after the old Media Player
   "Headspace" skin. A lime-green CRT with a head underneath (ours is the
   trollface), EQ on the left wing, playlist on the right, speaker pods on
   both ends that kick with the bass. Fixed 680x368 design, zoomed down on
   small cabinets. */
.to-radio-panel.gs {
  --gs-hi: #c9f75a; --gs-mid: #74c81c; --gs-lo: #2f7a06; --gs-ink: #0c2a03;
  --gs-lcd: #0d3306; --gs-lcd-txt: #b9ff7a;
  --gs-body: radial-gradient(120% 90% at 35% 18%, var(--gs-hi) 0%, var(--gs-mid) 42%, var(--gs-lo) 100%);
  position: absolute; left: 0; bottom: 42px;
  width: 680px; height: 368px; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  backdrop-filter: none;
  display: block;
  font-family: Tahoma, Verdana, "DM Sans", sans-serif;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.55));
  user-select: none;
}
.to-radio-panel.gs[hidden] { display: none; }
.gs button { font-family: inherit; }
.gs :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- wings ---- */
.gs-wing { position: absolute; top: 64px; width: 262px; height: 150px; }
.gs-wing-l { left: 0; }
.gs-wing-r { right: 0; }
.gs-wing::before {
  content: ""; position: absolute; top: 12px; bottom: 12px; left: 34px; right: 0;
  background: var(--gs-body); border-radius: 20px;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.35), 0 0 0 1px var(--gs-ink);
}
.gs-wing-r::before { left: 0; right: 34px; }

.gs-pods {
  position: absolute; top: 0; width: 64px; height: 150px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  background: var(--gs-body); border-radius: 32px;
  box-shadow: inset 0 3px 2px rgba(255,255,255,.6), inset 0 -4px 8px rgba(0,0,0,.4), 0 0 0 1px var(--gs-ink);
}
.gs-wing-l .gs-pods { left: 0; }
.gs-wing-r .gs-pods { right: 0; }
.gs-pods i {
  width: 40px; height: 40px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #222 0 14%, #8d9196 15% 24%, #3a3d40 25% 30%, #c7cbd0 31% 52%, #6e7378 53% 62%, #e3e6e9 63% 76%, #4a4e52 77% 100%);
  box-shadow: 0 0 0 2px var(--gs-ink), inset 0 0 4px rgba(0,0,0,.6);
  transform: scale(calc(1 + var(--kick, 0) * .14));
  transition: transform 60ms linear;
}

.gs-inset {
  position: absolute; top: 22px; height: 106px; width: 160px; z-index: 1;
  background: linear-gradient(180deg, #1a4d0b, var(--gs-lcd) 70%);
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.45);
  color: var(--gs-lcd-txt); font-size: 9px;
}
.gs-wing-l .gs-inset { left: 68px; }
.gs-wing-r .gs-inset { right: 68px; }

/* EQ */
.gs-eq { padding: 6px 8px 0; box-sizing: border-box; }
.gs-sliders { display: flex; gap: 10px; }
.gs-sliders label { flex: 1; display: flex; flex-direction: column-reverse; align-items: center; gap: 1px; }
.gs-sliders span { font-size: 8.5px; letter-spacing: .02em; opacity: .9; }
.gs-bands { display: flex; justify-content: space-between; margin-top: 5px; height: 58px; }
.gs-bands label { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 13px; }
.gs-bands span { font-size: 6.5px; opacity: .85; white-space: nowrap; }
.gs-reset {
  position: absolute; right: 7px; bottom: 3px; padding: 0; border: 0; background: none;
  color: var(--gs-lcd-txt); font-size: 8.5px; text-decoration: underline; cursor: pointer;
}

.gs input[type="range"] {
  -webkit-appearance: none; appearance: none; margin: 0; background: none; cursor: pointer;
}
.gs input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: #061a02; box-shadow: 0 1px 0 rgba(185,255,122,.25); }
.gs input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: #061a02; }
.gs input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 7px; margin-top: -2px; border-radius: 2px;
  background: linear-gradient(#f4f6f2, #9da59a); border: 1px solid #0c2a03;
}
.gs input[type="range"]::-moz-range-thumb { width: 12px; height: 7px; border-radius: 2px; background: linear-gradient(#f4f6f2, #9da59a); border: 1px solid #0c2a03; }
.gs-sliders input[type="range"] { width: 100%; height: 10px; }
.gs-bands input[type="range"] { writing-mode: vertical-lr; direction: rtl; width: 10px; height: 46px; }
.gs-bands input[type="range"]::-webkit-slider-runnable-track { width: 3px; height: auto; }
.gs-bands input[type="range"]::-moz-range-track { width: 3px; height: auto; }
.gs-bands input[type="range"]::-webkit-slider-thumb { width: 10px; height: 6px; margin-top: 0; margin-left: -3.5px; }

/* Playlist */
.gs-list { display: flex; flex-direction: column; padding: 5px 5px 4px; box-sizing: border-box; }
.gs-list-head {
  display: flex; align-items: center; gap: 5px; height: 15px; padding: 0 4px; margin-bottom: 3px;
  background: #e9f5df; color: #0c2a03; border-radius: 3px; font-size: 9.5px; font-weight: 700;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.gs-disc { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #0c2a03 0 18%, #b9c0c6 20% 60%, #6f777d 62%); }
.gs-list ol { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #74c81c transparent; }
.gs-list button {
  display: flex; width: 100%; align-items: baseline; gap: 4px; padding: 2px 4px;
  background: none; border: 0; border-radius: 2px; color: var(--gs-lcd-txt);
  font-size: 10px; text-align: left; cursor: pointer;
}
.gs-list button span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-list button small { max-width: 52px; font-size: 8px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-list button:hover { background: rgba(185,255,122,.12); }
.gs-list button[aria-current="true"] { background: #3e9a12; color: #fff; }
.gs-list button[aria-current="true"] span::before { content: "\25B8  "; }

/* ---- core: the CRT + the head ---- */
.gs-core { position: absolute; left: 228px; top: 0; width: 224px; height: 368px; z-index: 2; }
.gs-core::before {
  content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 200px; z-index: 1;
  background: var(--gs-body); border-radius: 54px 54px 40px 40px / 50px 50px 44px 44px;
  box-shadow: inset 0 4px 3px rgba(255,255,255,.6), inset 0 -6px 10px rgba(0,0,0,.4), 0 0 0 1px var(--gs-ink);
}
.gs-head {
  position: absolute; left: -10px; top: 170px; width: 244px; height: auto; z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)) saturate(1.25) brightness(1.08);
}
.gs-crown {
  position: absolute; left: 50%; top: 0; z-index: 2; transform: translateX(-50%);
  width: 52px; height: 24px; border-radius: 12px 12px 0 0;
  background: var(--gs-body); box-shadow: inset 0 2px 1px rgba(255,255,255,.6), 0 0 0 1px var(--gs-ink);
  display: flex; justify-content: center; align-items: flex-start; padding-top: 3px; box-sizing: border-box;
}
.gs-x {
  width: 18px; height: 14px; padding: 0; border-radius: 3px; border: 1px solid var(--gs-ink);
  background: linear-gradient(#e7fbd2, #8bd24a); color: var(--gs-ink);
  font: 700 12px/11px Tahoma, Verdana, sans-serif; cursor: pointer;
}
.gs-x:hover { background: linear-gradient(#fff, #b4ef78); }

.gs-transport {
  position: absolute; left: 0; right: 0; top: 30px; z-index: 2;
  display: flex; justify-content: center; align-items: center; gap: 12px;
}
.gs-pill {
  display: flex; gap: 3px; padding: 3px 5px; border-radius: 14px;
  background: linear-gradient(#2f7a06, #5ead19); box-shadow: inset 0 1px 3px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.5);
}
.gs-btn {
  width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid #2b0f4a; color: #1d0838;
  background: radial-gradient(circle at 38% 30%, #f6ecff 0 10%, #c49af0 32%, #8550c4 70%, #4d2386 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.gs-btn svg { width: 11px; height: 11px; fill: currentColor; }
.gs-btn:hover { filter: brightness(1.12); }
.gs-btn:active { transform: translateY(1px); }
.gs-btn:disabled { opacity: .4; cursor: default; }
.gs .gs-ico-pause, .gs.is-playing .gs-ico-play { display: none; }
.gs.is-playing .gs-ico-pause { display: inline; }
.gs-shuffle {
  width: 22px; height: 22px;
  background: radial-gradient(circle at 38% 30%, #fffbe0 0 10%, #ffd84a 40%, #d08a00 100%);
  border-color: #5a3a00; color: #4a2a00;
}
.gs-shuffle.is-active { box-shadow: 0 0 0 2px #fff, 0 0 10px #ffd84a; }

.gs-screen {
  position: absolute; left: 20px; top: 62px; width: 184px; height: 116px; z-index: 2;
  border-radius: 20px / 18px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 3px #1c4a05, 0 0 0 4px rgba(255,255,255,.4), inset 0 0 18px rgba(0,0,0,.9);
}
.gs-screen canvas { display: block; width: 100%; height: 100%; }
.gs-screen::after { /* glass glare */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 70% at 30% 0%, rgba(255,255,255,.14), transparent 55%);
}
.gs-readout {
  position: absolute; left: 10px; right: 10px; bottom: 6px;
  display: flex; align-items: center; gap: 6px;
  font: 9.5px "DM Mono", ui-monospace, monospace; color: #b9ff7a; text-shadow: 0 0 4px rgba(127,224,102,.7);
}
.gs-marquee { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.gs-marquee span { display: inline-block; padding-left: 100%; animation: gs-marquee 11s linear infinite; }
.gs-marquee b { font-weight: 600; }
.gs-marquee em { font-style: normal; opacity: .75; }
.gs:not(.is-playing) .gs-marquee span { animation: none; padding-left: 0; }
@keyframes gs-marquee { to { transform: translateX(-100%); } }
.gs-time { flex: none; opacity: .85; }

.gs-seek {
  position: absolute; left: 22px; right: 22px; top: 186px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
}
.gs-mini { width: 12px; height: 12px; fill: var(--gs-ink); opacity: .75; flex: none; }
.gs-seek input[type="range"] {
  flex: 1; height: 12px; border-radius: 6px;
  background: linear-gradient(#1c4a05, #3e8a0e); box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
  padding: 0 3px; box-sizing: border-box;
}
.gs-seek input[type="range"]::-webkit-slider-runnable-track { background: none; box-shadow: none; }
.gs-seek input[type="range"]::-moz-range-track { background: none; }
.gs-seek input[type="range"]::-webkit-slider-thumb {
  width: 22px; height: 10px; margin-top: -3.5px; border-radius: 5px;
  background: radial-gradient(circle at 40% 30%, #f6ecff, #8550c4 70%); border-color: #2b0f4a;
}
.gs-seek input[type="range"]::-moz-range-thumb { width: 22px; height: 10px; border-radius: 5px; background: radial-gradient(circle at 40% 30%, #f6ecff, #8550c4 70%); border-color: #2b0f4a; }

/* Smaller cabinets: same skin, zoomed down. */
@container cab (max-width: 900px) { .to-radio-panel.gs { zoom: .78; } }
@container cab (max-width: 700px) { .to-radio-panel.gs { zoom: .56; } }
@container cab (max-height: 620px) { .to-radio-panel.gs { zoom: .7; } }
@container cab (max-height: 460px) { .to-radio-panel.gs { zoom: .55; } }

/* X/Twitter link — sits right next to the radio toggle, main menu only
   (the radio itself stays up through the match; this doesn't need to). */
.to-x-link {
  position: absolute; left: 58px; bottom: 16px; z-index: 40;
  box-sizing: border-box;
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,9,7,.6); border: 1px solid rgba(255,255,255,.16);
  color: #dfe6da;
  pointer-events: auto;
}
.to-x-link:hover { border-color: rgba(127,224,102,.45); color: #7fe066; }
#to-title[hidden] ~ .to-x-link { display: none; }

/* Buy $TRUTHS: the terminal's bracketed CTA, in the terminal's green, sat
   beside the X link. */
.to-truths-link {
  position: absolute; left: 100px; bottom: 16px; z-index: 40;
  box-sizing: border-box; height: 34px; padding: 0 11px;
  display: flex; align-items: center;
  border-radius: 9px; background: rgba(6,9,7,.6); border: 1px solid rgba(127,224,102,.5);
  color: #7fe066; font: 600 12px/1 "DM Mono", ui-monospace, monospace; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; pointer-events: auto;
  transition: background .14s, color .14s;
}
.to-truths-link:hover, .to-truths-link:focus-visible { background: #7fe066; color: #0b1009; }
.to-truths-link:focus-visible { outline: 2px solid #7fe066; outline-offset: 2px; }
#to-title[hidden] ~ .to-truths-link { display: none; }

@media (max-width: 760px) {
  .to-x-link { left: 52px; bottom: 10px; }
  .to-truths-link { left: 92px; bottom: 10px; height: 30px; padding: 0 9px; font-size: 11px; }
}

@media (max-width: 760px) {
  .to-radio { left: 10px; bottom: 10px; }
}


/* ================= Main menu v2 =================
   Designed in the "Troll Ops main menu" canvas (see HANDOFF.md), which the
   owner keeps editing; this block follows its Main board. Tab bar across the
   top, mode list down the left, loadout card on the right, map card and
   Deploy along the bottom, the operator standing in the middle. The other
   tabs open one panel down the left with the gun (or operator) beside it. */

.to-pf {
  --pf-ink: #0b0f0d;
  --pf-sheet: #0e1310;
  --pf-panel: rgba(8, 11, 9, .8);
  --pf-panel-soft: rgba(8, 11, 9, .72);
  --pf-line: rgba(234, 243, 228, .12);
  --pf-text: #eef3ea;
  --pf-body: #c9d3c4;
  --pf-dim: #a9b6a3;
  --pf-ok: #7fe066;
  --pf-ok-ink: #0b140a;
  --pf-ok-fill: rgba(34, 52, 30, .92);
  --pf-xp: #ffb020;
  --pf-pad: 48px;

  position: absolute;
  inset: 0;
  font-family: "DM Sans", sans-serif;
  color: var(--pf-text);
  /* Empty space is a window onto the arena and the operator, so the layer
     itself lets clicks through; each block turns them back on. */
  pointer-events: none;
}
.to-pf > *, .to-pf-play > * { pointer-events: auto; }
:where(.to-pf) button { font: inherit; color: inherit; }
.to-pf :focus-visible { outline: 2px solid var(--pf-ok); outline-offset: 2px; }

.to-pf-label {
  font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pf-dim);
}
.to-pf-dim { font-size: 12px; color: var(--pf-dim); }

/* ---- top bar ---- */
.to-pf-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  height: 72px; box-sizing: border-box; padding: 0 var(--pf-pad);
  display: flex; align-items: center; gap: 48px;
  background: rgba(8, 11, 9, .82);
  border-bottom: 1px solid var(--pf-line);
}
.to-pf-logo {
  flex: none;
  font-family: "Oswald", sans-serif; font-weight: 700;
  font-size: 28px; letter-spacing: .04em; line-height: 1; color: var(--pf-text);
}
.to-pf-logo b { color: var(--pf-ok); font-weight: 700; }

/* Back to arcade: a pill left of the logo, on every screen size (it used
   to be loose text in a corner, and hidden in Servers on phones). */
.to-pf-brand { flex: none; display: flex; align-items: center; gap: 16px; }
.to-pf-arcade {
  flex: none; display: flex; align-items: center; gap: 4px;
  height: 38px; box-sizing: border-box; padding: 0 14px 0 8px;
  border-radius: 999px; border: 1px solid var(--pf-line);
  background: rgba(255, 255, 255, .05); color: var(--pf-text); text-decoration: none;
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.to-pf-arcade svg { flex: none; transition: transform .15s; }
.to-pf-arcade:hover, .to-pf-arcade:focus-visible {
  border-color: var(--pf-ok); color: var(--pf-ok); background: rgba(109, 255, 58, .08); outline: none;
}
.to-pf-arcade:hover svg { transform: translateX(-2px); }
.to-pf-arcade:active { transform: scale(.96); }

.to-pf-tabs {
  flex: 1; min-width: 0; height: 100%;
  display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.to-pf-tabs::-webkit-scrollbar { display: none; }
.to-pf-tab {
  flex: none; height: 100%; padding: 0 18px;
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; border-bottom: 3px solid transparent;
  font-family: "Oswald", sans-serif !important; font-weight: 500; font-size: 16px;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--pf-dim) !important;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.to-pf-tab svg { display: none; }
.to-pf-tab-short { display: none; }
.to-pf-tab:hover { color: var(--pf-text) !important; }
.to-pf-tab.is-active { color: var(--pf-text) !important; font-weight: 600; border-bottom-color: var(--pf-ok); }
.to-pf-tab:focus-visible { outline-offset: -4px; }

.to-pf-rank {
  flex: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .06em;
}
.to-pf-rank-line { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.to-pf-rank-line span { color: var(--pf-xp); text-transform: uppercase; }
.to-pf-rank-line b { color: var(--pf-dim); font-weight: 500; }
.to-pf-rank .to-lo-rank-bar { flex: none; width: 180px; height: 4px; background: rgba(234, 243, 228, .14); }
.to-pf-rank .to-lo-rank-bar b { background: var(--pf-xp); }
/* Kept for screen readers; the bar says the rest. */
.to-pf-next {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Play: mode list ---- */
.to-pf-play { display: contents; }
.to-pf-modes {
  position: absolute; left: var(--pf-pad); top: 112px; width: 380px; z-index: 1;
  display: flex; flex-direction: column;
  /* Stops above the map card (its bottom + height + a gap) so a long mode
     list can never slide underneath it. Sized to fit without scrolling; the
     hidden overflow is only a last-resort guard, never a visible scrollbar. */
  bottom: var(--pf-modes-bottom, 208px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
.to-pf-modes::-webkit-scrollbar { display: none; }
.to-pf .to-lo-modeblurb[hidden] { display: none; }
.to-pf .to-lo-mode { display: flex; flex-direction: column; gap: 6px; }
.to-lo-modegroup {
  padding: 0 4px 0;
  font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pf-dim);
}
.to-lo-modegroup:not(:first-child) { padding-top: 14px; }
.to-pf .to-lo-modebtn {
  flex: none; height: 48px; box-sizing: border-box; padding: 0 16px;
  display: flex; align-items: center; gap: 12px;
  text-align: left; border-radius: 10px;
  background: var(--pf-panel-soft);
  border: 1px solid var(--pf-line);
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: .04em;
  color: var(--pf-text);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.to-pf .to-lo-modebtn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-pf .to-lo-modebtn svg { flex: none; color: var(--pf-ok); visibility: hidden; }
.to-pf .to-lo-modebtn:hover { border-color: rgba(127, 224, 102, .45); }
.to-pf .to-lo-modebtn.is-active { background: var(--pf-ok-fill); border-color: var(--pf-ok); }
.to-pf .to-lo-modebtn.is-active svg { visibility: visible; }
.to-pf .to-lo-modebtn.is-locked { opacity: .5; cursor: not-allowed; }
.to-pf .to-lo-modebtn.is-locked::after { content: attr(data-lock); flex: none; font-size: 12px; color: var(--pf-body); }
.to-pf .to-lo-modeblurb {
  margin: 12px 4px 0; padding: 12px 14px;
  font-family: "DM Sans", sans-serif; font-style: normal; font-size: 14px; line-height: 1.5;
  color: var(--pf-body);
  background: var(--pf-panel-soft); border-radius: 10px;
}

/* ---- Play: map card ---- */
.to-pf-mapcard {
  position: absolute; left: var(--pf-pad); bottom: 72px; z-index: 1;
  width: 460px; box-sizing: border-box; padding: 14px;
  display: flex; align-items: center; gap: 16px;
  background: var(--pf-panel);
  border: 1px solid var(--pf-line); border-radius: 14px;
}
.to-pf-mapcard-thumb {
  flex: none; width: 84px !important; height: 84px !important;
  border-radius: 8px; background: #0d1116;
}
.to-pf-mapcard-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.to-pf-mapcard-name {
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 22px;
  letter-spacing: .03em; line-height: 1.1;
}
.to-pf-mapcard-blurb { font-size: 13px; line-height: 1.4; color: var(--pf-body); }
.to-pf-ghost {
  flex: none; height: 44px; padding: 0 16px;
  border-radius: 10px; border: 1px solid rgba(234, 243, 228, .28);
  background: none; font-weight: 700; font-size: 14px;
  cursor: pointer;
}
.to-pf-ghost:hover { border-color: var(--pf-ok); }

/* ---- Play: Deploy ---- */
.to-pf-deploy {
  position: absolute; right: var(--pf-pad); bottom: 72px; z-index: 1;
  width: 340px; height: 76px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  border: none; border-radius: 14px;
  background: var(--pf-ok); color: var(--pf-ok-ink) !important;
  font-family: "Oswald", sans-serif !important; font-weight: 700; font-size: 32px;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: filter .12s, transform .12s;
}
.to-pf-deploy:hover { filter: brightness(1.08); }
.to-pf-deploy:active { transform: translateY(1px); }
.to-pf-deploy:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.5); }

/* ---- Play: loadout card ---- */
.to-pf-right {
  position: absolute; right: var(--pf-pad); top: 112px; z-index: 1;
  width: 340px; box-sizing: border-box; padding: 20px;
  display: none; flex-direction: column; gap: 16px;
  background: var(--pf-panel);
  border: 1px solid var(--pf-line); border-radius: 14px;
}
.to-pf[data-panel="deploy"] .to-pf-right { display: flex; }
.to-pf-sumgun {
  height: clamp(80px, 17cqh, 150px); margin: -4px 0 -6px;
  border-radius: 10px; overflow: hidden;
  background: radial-gradient(70% 70% at 50% 50%, rgba(126,164,126,.16), rgba(8,12,10,.5));
}
.to-pf-sumgun canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.to-pf-card-head { display: flex; align-items: center; justify-content: space-between; }
.to-pf-link {
  background: none; border: none; padding: 4px 0;
  color: var(--pf-ok) !important; font-weight: 700; font-size: 14px;
  cursor: pointer;
}
.to-pf-link:hover { color: #a6f090 !important; }
.to-pf-primary { display: flex; flex-direction: column; gap: 8px; }
.to-pf-primary b {
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 24px;
  letter-spacing: .02em; line-height: 1;
}
.to-pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.to-pf-chip { font-size: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(234, 243, 228, .1); }
.to-pf-secondary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 14px; border-top: 1px solid rgba(234, 243, 228, .1);
}
.to-pf-secondary b { font-family: "Oswald", sans-serif; font-weight: 500; font-size: 17px; }
.to-pf-gearcells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.to-pf-gearcells > div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px; border-radius: 10px; background: rgba(234, 243, 228, .06);
}
.to-pf-gearcells span { font-size: 11px; }
.to-pf-gearcells b { font-size: 13px; font-weight: 700; line-height: 1.2; }

/* The radio, X and $TRUTHS sit bottom right on the menu (the radio stays
   bottom left in a match, where the HUD expects it). */
#to-title:not([hidden]) ~ .to-radio { left: auto; right: 234px; bottom: 16px; }
#to-title:not([hidden]) ~ .to-radio .to-radio-toggle { width: 40px; height: 40px; border-radius: 10px; }
#to-title:not([hidden]) ~ .to-radio .to-radio-panel { left: auto; right: 0; bottom: 142px; }
/* ^ Opens above the Deploy button (its bottom + height + a gap, minus the
   radio's own 16px inset) rather than on top of it. */
#to-title:not([hidden]) ~ .to-x-link { left: auto; right: 186px; bottom: 16px; width: 40px; height: 40px; border-radius: 10px; }
#to-title:not([hidden]) ~ .to-truths-link {
  left: auto; right: var(--pf-pad, 48px); bottom: 16px;
  width: 130px; height: 40px; justify-content: center; border-radius: 10px;
  font-size: 13px; font-weight: 500;
}

/* The drawer sits over the whole menu, so the footer links step aside. */
#to-title.has-drawer ~ .to-radio,
#to-title.has-drawer ~ .to-x-link,
#to-title.has-drawer ~ .to-truths-link { display: none; }

/* ---- the other tabs: one panel down the left ---- */
.to-pf-center {
  position: absolute; left: var(--pf-pad); top: 96px; bottom: 72px; z-index: 1;
  width: min(620px, calc(100% - var(--pf-pad) * 2));
  display: flex; flex-direction: column;
  pointer-events: none;
}
.to-pf-center > .to-pf-panel { pointer-events: auto; }
.to-pf-panel {
  flex: 0 1 auto; min-height: 0; max-height: 100%;
  display: flex; flex-direction: column;
  background: rgba(8, 11, 9, .88);
  border: 1px solid var(--pf-line); border-radius: 14px;
  overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: 12px;
}
.to-pf-panel-bar {
  position: sticky; top: 0; z-index: 2;
  padding: 18px 20px 12px;
  background: var(--pf-sheet);
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 24px; letter-spacing: .03em;
  color: var(--pf-text);
}
.to-pf-panel-bar span { font-weight: 500; font-size: 17px; color: var(--pf-dim); }
.to-pf-sublabel {
  padding: 14px 20px 6px;
  font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pf-dim);
}
.to-pf-note {
  margin: 0; padding: 8px 20px;
  font-size: 13px; line-height: 1.5; color: var(--pf-dim);
}
.to-pf-seg {
  align-self: flex-start;
  margin: 0 20px 6px; padding: 3px;
  display: inline-flex; gap: 3px;
  border-radius: 10px; background: rgba(234, 243, 228, .06);
}
.to-pf-seg button {
  height: 36px; padding: 0 16px;
  border: none; border-radius: 8px; background: none;
  font-weight: 700; font-size: 13px; color: var(--pf-dim) !important;
  cursor: pointer;
}
.to-pf-seg button[aria-pressed="true"] { background: var(--pf-ok); color: var(--pf-ok-ink) !important; }

/* operators in the room (Servers tab) */
.to-pf-roster { display: flex; flex-direction: column; }
.to-pf-roster-list { padding: 0 20px 6px; }
.to-pf-op {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; font-size: 14px; color: var(--pf-text);
}
.to-pf-op + .to-pf-op { border-top: 1px solid rgba(234, 243, 228, .06); }
.to-pf-op i { width: 8px; height: 8px; flex: none; border-radius: 2px; border: 1px solid rgba(234, 243, 228, .4); }
.to-pf-op.is-you i { background: var(--pf-ok); border-color: var(--pf-ok); }
.to-pf-op span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-pf-op b { font-size: 11px; font-family: "DM Mono", monospace; color: var(--pf-ok); letter-spacing: .06em; }
.to-pf-op.is-idle b { color: var(--pf-dim); }
.to-pf-empty { margin: 0; padding: 6px 0; font-size: 13px; color: var(--pf-dim); }

/* panel internals from the old console, re-spaced to the new margins */
.to-pf .to-lo-slot-toggle { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 20px 0; margin-bottom: 0; }
.to-pf .to-lo-classes { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 20px 0; }
.to-pf .to-lo-body { padding: 10px 20px; }
.to-pf .to-lo-list { max-height: 260px; }
.to-pf .to-lo-atts { padding: 6px 20px 8px; display: flex; flex-direction: column; gap: 10px; }
.to-pf .to-lo-slot {
  display: block; margin-top: 0;
  padding-top: 10px; border-top: 1px solid rgba(234, 243, 228, .07);
}
.to-pf .to-lo-slot:first-child { padding-top: 0; border-top: none; }
.to-pf .to-lo-slot-label { display: block; flex: none; margin-bottom: 6px; }
.to-pf .to-lo-slot-opts { gap: 6px; align-items: stretch; }
.to-pf .to-lo-gearlist { padding: 6px 20px; gap: 12px; }
/* One label column so every row's tiles start on the same line, and
   equal-width tiles so the rows read as a grid. */
.to-pf .to-lo-gearrow { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; }
.to-pf .to-lo-gearrow .to-lo-slot-label { margin: 0; }
.to-pf .to-lo-gearopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.to-pf .to-lo-gear { min-width: 0; padding: 10px 12px; border-radius: 10px; }
.to-pf .to-lo-gear strong { font-size: 13.5px; }
.to-pf .to-ss-picker { padding: 6px 20px; }
.to-pf .to-lo-pvp { padding: 6px 20px; }
.to-pf .to-key-list-lobby { padding: 6px 20px; }
.to-pf .to-set-row { margin-left: 20px; margin-right: 20px; }

/* ---- map picker drawer ---- */
.to-pf-scrim {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(5, 8, 6, .6);
}
.to-pf-drawer {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 6;
  width: min(540px, 100%); box-sizing: border-box;
  padding: 32px 32px 28px;
  display: flex; flex-direction: column; gap: 20px;
  background: var(--pf-sheet);
  border-left: 1px solid rgba(234, 243, 228, .14);
  animation: to-pf-drawer-in .22s ease-out;
}
@keyframes to-pf-drawer-in { from { transform: translateX(40px); opacity: 0; } }
.to-pf-drawer-head { display: flex; align-items: center; gap: 12px; }
.to-pf-drawer-head > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.to-pf-drawer-head h2 {
  margin: 0; font-family: "Oswald", sans-serif; font-weight: 600; font-size: 30px; letter-spacing: .03em;
}
.to-pf-icon-btn {
  flex: none; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid rgba(234, 243, 228, .2); background: none;
  cursor: pointer;
}
.to-pf-icon-btn:hover { border-color: var(--pf-ok); }
.to-pf .to-lo-maps {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  flex-wrap: nowrap; align-items: stretch;
  padding: 0;
}
.to-pf .to-lo-map {
  flex: none; width: 100%; margin: 0; min-height: 100px; box-sizing: border-box; padding: 12px;
  display: grid; grid-template-columns: 76px minmax(0, 1fr) 20px;
  grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: center;
  text-align: left; color: var(--pf-text);
  background: rgba(234, 243, 228, .05);
  border: 1px solid rgba(234, 243, 228, .1); border-radius: 12px;
  cursor: pointer;
}
.to-pf .to-lo-map:hover { border-color: rgba(127, 224, 102, .45); }
.to-pf .to-lo-map.is-active { background: var(--pf-ok-fill); border-color: var(--pf-ok); box-shadow: none; }
.to-pf .to-map-thumb {
  grid-row: 1 / 3; width: 76px; height: 76px; aspect-ratio: auto;
  border: none; border-radius: 8px;
}
.to-pf .to-map-name {
  align-self: end; padding: 0;
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 20px; letter-spacing: .03em;
  color: var(--pf-text);
}
.to-pf .to-map-tag {
  grid-column: 2; align-self: start; padding: 0;
  font-family: "DM Sans", sans-serif; font-size: 13px; line-height: 1.4;
  letter-spacing: 0; text-transform: none; color: var(--pf-body);
}
.to-pf .to-lo-map.is-active .to-map-tag { color: var(--pf-body); }
.to-pf .to-lo-map::after {
  content: ""; grid-column: 3; grid-row: 1 / 3; width: 20px; height: 20px;
}
.to-pf .to-lo-map.is-active::after {
  background: var(--pf-ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.to-pf-drawer-done {
  flex: none; height: 56px;
  border: none; border-radius: 12px;
  background: var(--pf-ok); color: var(--pf-ok-ink) !important;
  font-family: "Oswald", sans-serif !important; font-weight: 700; font-size: 20px;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
}

/* ---- 3D weapon inspector ----
   Two homes for the same canvas (see mountGunView in game.js): boxed in
   the Weapons view's detail card, or free-floating beside the panel for
   Customize and Gear. */
.to-gun-mount { display: flex; }
.to-gun-view {
  position: relative;
  flex: 1;
  height: clamp(120px, 27cqh, 260px);
  border: 1px solid var(--pf-line, rgba(255,255,255,.13));
  border-radius: 10px;
  background:
    radial-gradient(65% 65% at 50% 42%, rgba(126,164,126,.16), rgba(8,12,10,.72)),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 26px);
  overflow: hidden;
}
.to-pf > .to-gun-view { display: none; }
.to-gun-view canvas {
  display: block; width: 100%; height: 100%;
  touch-action: none; cursor: grab;
}
.to-gun-view canvas:active { cursor: grabbing; }
.to-gun-hint {
  position: absolute; right: 8px; bottom: 6px;
  font-family: "DM Mono", monospace; font-size: 10px; color: #93a4ae;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
  pointer-events: none;
}
/* The preview stage to the right of the Loadout / Customize / Gear panel:
   the same card chrome as the panel beside it, lined up with its top and
   bottom, with the weapon turning in it. */
.to-pf > .to-gun-view.is-hero {
  display: block;
  position: absolute;
  left: calc(var(--pf-pad) + min(620px, 100% - var(--pf-pad) * 2) + 20px);
  right: var(--pf-pad); top: var(--pf-stage-top, 96px); bottom: var(--pf-stage-bottom, 72px);
  height: auto;
  border: 1px solid var(--pf-line); border-radius: 14px;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(40,52,42,.94), rgba(10,14,12,.96)),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 26px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 1;
}
.to-gun-view.is-hero .to-gun-hint { right: 14px; bottom: 12px; font-size: 11px; }

/* ---- 3D operator, standing in the middle of the Play tab ---- */
.to-char-view {
  position: absolute;
  left: 0; right: 0; top: 72px; bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.to-char-view canvas {
  display: block; width: 100%; height: 100%;
  touch-action: none; cursor: grab;
  pointer-events: auto;
}
.to-char-view canvas:active { cursor: grabbing; }
/* Emote on the menu's operator: a pill under its feet. */
.to-char-emote {
  position: absolute; left: calc(50% + var(--char-shift, 0) * 100%);   /* under the operator's feet (see --char-shift) */
  bottom: 22px; transform: translateX(-50%);
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  font-family: "Oswald", sans-serif; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: #eef2ea; background: rgba(10,14,11,.62); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.to-char-emote svg { width: 20px; height: 20px; }
.to-char-emote:hover, .to-char-emote[aria-expanded="true"] { border-color: #7fe066; color: #fff; }
.to-char-emote:focus-visible { outline: 2px solid #7fe066; outline-offset: 2px; }
.to-emote-wheel.is-menu .to-emote-hub span { display: none; }

@media (prefers-reduced-motion: reduce) {
  .to-pf-drawer { animation: none; }
  .to-pf-tab, .to-pf .to-lo-modebtn, .to-pf-deploy { transition: none; }
}

/* ---- narrower desktops ---- */
@container cab (max-width: 1240px) {
  .to-pf { --pf-pad: 28px; }
  .to-pf-top { gap: 24px; }
  .to-pf-tab { padding: 0 11px; font-size: 14px; letter-spacing: .1em; }
  .to-pf-modes { width: 320px; }
  .to-pf-right { width: 300px; }
  .to-pf-mapcard { width: 420px; }
  .to-pf-deploy { width: 300px; }
  .to-pf-rank .to-lo-rank-bar { width: 140px; }
  #to-title:not([hidden]) ~ .to-truths-link { right: 28px; }
  #to-title:not([hidden]) ~ .to-x-link { right: 166px; }
  #to-title:not([hidden]) ~ .to-radio { right: 214px; }
}

/* ---- shorter desktops (laptops) ---- */
@container cab (max-height: 860px) {
  .to-pf-modes, .to-pf-right { top: 96px; }
  .to-pf { --pf-modes-bottom: 178px; }
  #to-title:not([hidden]) ~ .to-radio .to-radio-panel { bottom: 126px; }
  .to-pf .to-lo-modebtn { height: 40px; font-size: 17px; }
  .to-pf .to-lo-mode { gap: 5px; }
  .to-lo-modegroup:not(:first-child) { padding-top: 10px; }
  .to-pf .to-lo-modeblurb { margin-top: 10px; padding: 10px 12px; font-size: 13px; }
  .to-pf-mapcard { bottom: 64px; padding: 10px; }
  .to-pf-mapcard-thumb { width: 68px !important; height: 68px !important; }
  .to-pf-deploy { bottom: 64px; height: 68px; font-size: 28px; }
  .to-pf-right { gap: 12px; padding: 16px; }
}
@container cab (max-height: 740px) {
  .to-pf .to-lo-modebtn { height: 33px; font-size: 15px; }
  .to-pf .to-lo-mode { gap: 3px; }
  .to-lo-modegroup:not(:first-child) { padding-top: 5px; }
  .to-pf { --pf-modes-bottom: 164px; }
  .to-pf-sumgun { height: 70px; }
  .to-pf .to-lo-modeblurb, .to-pf-mapcard-blurb, .to-pf-gearcells { display: none; }
  .to-pf-center { top: 84px; bottom: 64px; }
  .to-pf { --pf-stage-top: 84px; --pf-stage-bottom: 64px; }
}

/* ---- phones and narrow windows: top bar, bottom sheet, bottom tab bar ---- */
@container cab (max-width: 760px) {
  .to-pf { --pf-pad: 16px; }
  .to-pf::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 56px;
    background: rgba(8, 11, 9, .86); z-index: 2;
  }
  .to-pf-top, .to-pf-brand { display: contents; }
  .to-pf-logo { position: absolute; left: 60px; top: 17px; z-index: 3; font-size: 22px; }
  .to-pf-arcade { position: absolute; left: 12px; top: 9px; z-index: 3; width: 38px; padding: 0; justify-content: center; }
  .to-pf-arcade span { display: none; }
  .to-pf-rank { position: absolute; right: 16px; top: 14px; z-index: 3; gap: 5px; font-size: 11px; }
  .to-pf-rank .to-lo-rank-bar { width: 110px; }

  .to-pf-tabs {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    height: 64px; padding: 0 4px; gap: 0;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    background: var(--pf-ink);
    border-top: 1px solid rgba(234, 243, 228, .1);
    overflow: hidden;
  }
  .to-pf-tab {
    height: 64px; padding: 0 2px; min-width: 0;
    flex-direction: column; justify-content: center; gap: 4px;
    border-bottom: none;
    font-family: "DM Sans", sans-serif !important; font-weight: 700; font-size: 11px;
    letter-spacing: 0; text-transform: none;
  }
  .to-pf-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .to-pf-tab svg { display: block; }
  .to-pf-tab-long { display: none; }
  .to-pf-tab-short { display: inline !important; }
  .to-pf-tab.is-active { color: var(--pf-ok) !important; }

  .to-pf-play {
    position: absolute; left: 0; right: 0; bottom: 64px; z-index: 3;
    display: flex; flex-direction: column; gap: 14px;
    box-sizing: border-box; padding: 18px 16px 16px;
    background: var(--pf-sheet);
    border-top: 1px solid rgba(234, 243, 228, .14);
    border-radius: 20px 20px 0 0;
    pointer-events: auto;
  }
  .to-pf-play[hidden] { display: none; }
  .to-pf-modes, .to-pf-mapcard, .to-pf-deploy { position: static; width: auto; }
  .to-pf-modes::before {
    content: "Mode"; margin-bottom: 14px;
    font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pf-dim);
  }
  .to-pf .to-lo-mode {
    flex-direction: row; flex-wrap: nowrap; gap: 8px;
    margin: 0 -16px; padding: 0 16px;
    overflow-x: auto; scrollbar-width: none;
  }
  .to-pf .to-lo-mode::-webkit-scrollbar { display: none; }
  .to-lo-modegroup { display: none; }
  .to-pf .to-lo-modebtn {
    flex: none; height: 44px; padding: 0 16px; border-radius: 999px;
    font-size: 15px; background: rgba(234, 243, 228, .06);
  }
  .to-pf .to-lo-modebtn span { overflow: visible; }
  .to-pf .to-lo-modebtn svg { display: none; }
  .to-pf .to-lo-modebtn.is-active { background: var(--pf-ok); border-color: var(--pf-ok); color: var(--pf-ok-ink); }
  .to-pf .to-lo-modeblurb { display: block; margin: 14px 0 0; padding: 0; background: none; font-size: 13px; line-height: 1.45; }
  .to-pf-mapcard { padding: 10px; gap: 12px; border-radius: 12px; background: rgba(234, 243, 228, .05); }
  .to-pf-mapcard .to-pf-label { font-size: 11px; }
  .to-pf-mapcard-thumb { width: 52px !important; height: 52px !important; }
  .to-pf-mapcard-name { font-size: 18px; }
  .to-pf-mapcard-blurb { display: none; }
  .to-pf-deploy { height: 64px; font-size: 26px; gap: 12px; }
  .to-pf[data-panel="deploy"] .to-pf-right { display: none; }

  .to-pf-center { left: 8px; right: 8px; width: auto; top: 64px; bottom: 72px; }
  .to-pf-panel-bar { padding: 14px 16px 10px; font-size: 20px; }
  .to-pf > .to-gun-view.is-hero { display: none; }
  .to-char-view { top: 56px; bottom: 380px; }
  .to-pf-drawer { padding: 20px 16px; gap: 16px; }
  .to-pf-drawer-head h2 { font-size: 24px; }
  .to-pf .to-lo-map { min-height: 84px; padding: 10px; grid-template-columns: 60px minmax(0, 1fr) 20px; column-gap: 12px; }
  .to-pf .to-map-thumb { width: 60px; height: 60px; }

  #to-title:not([hidden]) ~ .to-radio { right: 196px; left: auto; top: 64px; bottom: auto; }
  #to-title:not([hidden]) ~ .to-radio .to-radio-panel { top: 48px; bottom: auto; }
  #to-title:not([hidden]) ~ .to-x-link { right: 150px; left: auto; top: 64px; bottom: auto; }
  #to-title:not([hidden]) ~ .to-truths-link { right: 12px; left: auto; top: 64px; bottom: auto; }
  /* Profile joins that row (the top bar has no room for it here). */
  .to-pf-profile { position: absolute; right: 242px; top: 64px; z-index: 3; width: 40px; height: 40px; border-radius: 10px; }
  .to-pf:not([data-panel="deploy"]) .to-pf-profile { display: none; }
  /* Up there they would sit on the other tabs panel headers. */
  #to-title:not([data-panel="deploy"]) ~ .to-radio,
  #to-title:not([data-panel="deploy"]) ~ .to-x-link,
  #to-title:not([data-panel="deploy"]) ~ .to-truths-link { display: none; }
}

/* ---- landscape phones: everything shrinks to fit ~400px of height ---- */
@container cab (min-width: 761px) and (max-height: 520px) {
  .to-pf { --pf-pad: 20px; }
  .to-pf-top { height: 48px; gap: 16px; }
  .to-pf-brand { gap: 10px; }
  .to-pf-arcade { height: 32px; width: 32px; padding: 0; justify-content: center; }
  .to-pf-arcade span { display: none; }
  /* Radio, X and $TRUTHS go top right (the mode list runs to the bottom
     left, where they used to cover Test Range). */
  #to-title:not([hidden]) ~ .to-radio { left: auto; right: 196px; top: 58px; bottom: auto; }
  #to-title:not([hidden]) ~ .to-radio .to-radio-panel { top: 48px; bottom: auto; }
  #to-title:not([hidden]) ~ .to-x-link { left: auto; right: 150px; top: 58px; bottom: auto; }
  #to-title:not([hidden]) ~ .to-truths-link { left: auto; right: 20px; top: 58px; bottom: auto; }
  .to-pf-logo { font-size: 20px; }
  .to-pf-tab { padding: 0 9px; font-size: 13px; letter-spacing: .06em; }
  .to-pf-tab-long { display: none; }
  .to-pf-tab-short { display: inline !important; }
  .to-pf-rank-line { font-size: 11px; }
  .to-pf-rank .to-lo-rank-bar { width: 110px; }
  .to-pf-modes { top: 58px; bottom: 12px; width: 250px; }
  .to-lo-modegroup { display: none; }
  .to-pf .to-lo-mode { gap: 3px; }
  .to-pf .to-lo-modebtn { height: 30px; font-size: 14px; border-radius: 8px; padding: 0 12px; }
  .to-pf .to-lo-modeblurb, .to-pf-mapcard-blurb { display: none; }
  .to-pf-mapcard { left: 290px; bottom: 12px; width: auto; right: 260px; padding: 8px; gap: 10px; }
  .to-pf-mapcard-thumb { width: 44px !important; height: 44px !important; }
  .to-pf-mapcard-name { font-size: 17px; }
  .to-pf-deploy { right: 20px; bottom: 12px; width: 220px; height: 56px; font-size: 22px; }
  /* On the other tabs the panel runs to the bottom: the radio, X and
     $TRUTHS chips would sit on its last rows. */
  #to-title:not([data-panel="deploy"]) ~ .to-radio,
  #to-title:not([data-panel="deploy"]) ~ .to-x-link,
  #to-title:not([data-panel="deploy"]) ~ .to-truths-link { display: none; }
  .to-pf[data-panel="deploy"] .to-pf-right { display: none; }
  .to-pf-center { top: 56px; bottom: 12px; }
  .to-char-view { top: 48px; }
  .to-pf-drawer { padding: 16px 20px; gap: 12px; }
  .to-pf .to-lo-map { min-height: 68px; padding: 8px; grid-template-columns: 52px minmax(0, 1fr) 20px; }
  .to-pf .to-map-thumb { width: 52px; height: 52px; }
  .to-pf-drawer-done { height: 44px; font-size: 16px; }
}

/* ================= Touch play: CoD Mobile-style landscape HUD =================

   Only while a match is live on a touch screen (body.to-touch-play, set by
   setTouchControls). Left: a floating move stick anywhere in the lower-left,
   a spare FIRE for the left thumb, minimap and streaks up top. Right: the
   look pad everywhere, with the action cluster fanned round a big FIRE in the
   corner, thumb-reachable without crossing the aim. Everything scales with
   --k from the screen's height (a 375px phone to a 1024px iPad), and keeps
   clear of the notch through the safe-area insets. */
body.to-touch-play {
  --k: 1;
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
}
@media (max-height: 340px) { body.to-touch-play { --k: .84; } }
@media (min-height: 481px) { body.to-touch-play { --k: 1.18; } }
@media (min-height: 700px) { body.to-touch-play { --k: 1.36; } }

/* Zones under the buttons; buttons on top. The look pad used to stop 120px
   short of the bottom so it wouldn't swallow the buttons painted under it. */
body.to-touch-play .to-touch-look { left: 42%; right: 0; top: 0; bottom: 0; width: auto; z-index: 1; }
body.to-touch-play .to-touch-movezone {
  position: absolute; left: 0; bottom: 0; width: 42%; height: 72%;
  pointer-events: auto; touch-action: none; z-index: 1;
}
body.to-touch-play .to-touch-btn,
body.to-touch-play .to-touch-stick { z-index: 2; }

body.to-touch-play .to-touch-stick {
  left: calc(var(--sl) + 34px * var(--k)); bottom: calc(var(--sb) + 26px * var(--k));
  width: calc(112px * var(--k)); height: calc(112px * var(--k));
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2);
  transition: opacity .15s;
  opacity: .75;
}
body.to-touch-play .to-touch-stick.is-active { opacity: 1; }
body.to-touch-play .to-touch-stick-nub { width: calc(48px * var(--k)); height: calc(48px * var(--k)); }

body.to-touch-play .to-touch-btn {
  width: calc(50px * var(--k)); height: calc(50px * var(--k));
  font-size: calc(10px * var(--k)); letter-spacing: .04em;
  background: rgba(10,14,11,.34); border-color: rgba(255,255,255,.26);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
/* Icons, not words, on every touch button (user, 2026-09-28). */
.to-touch-btn svg { width: 50%; height: 50%; pointer-events: none; display: block; }
body.to-touch-play .to-touch-fire svg { width: 42%; height: 42%; }
body.to-touch-play .to-touch-btn.is-held { background: rgba(255,255,255,.3); transform: scale(.94); }
body.to-touch-play .to-touch-btn.is-empty { opacity: .4; }
/* AIM: a scope ring behind the label, lit green while toggled on. */
.to-touch-ads { position: absolute; }
.to-touch-ads-ring {
  position: absolute; inset: 12%; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.3); pointer-events: none;
}
body.to-touch-play .to-touch-ads.is-on {
  background: rgba(127,224,102,.34); border: 2px solid #7fe066; color: #fff;
}
.to-touch-ads.is-on .to-touch-ads-ring { border: 1.5px solid #7fe066; }
body.to-touch-play .to-menu-esc { display: none; }

/* The right-hand cluster, measured from the corner. */
body.to-touch-play .to-touch-fire {
  right: calc(var(--sr) + 28px * var(--k)); bottom: calc(var(--sb) + 30px * var(--k));
  width: calc(84px * var(--k)); height: calc(84px * var(--k));
  font-size: calc(14px * var(--k));
  background: rgba(255,60,50,.3); border: 2px solid rgba(255,120,110,.55);
}
body.to-touch-play .to-touch-ads {
  right: calc(var(--sr) + 122px * var(--k)); bottom: calc(var(--sb) + 78px * var(--k));
  width: calc(58px * var(--k)); height: calc(58px * var(--k));
}
body.to-touch-play .to-touch-jump {
  right: calc(var(--sr) + 24px * var(--k)); bottom: calc(var(--sb) + 128px * var(--k));
  font-size: calc(18px * var(--k));
}
body.to-touch-play .to-touch-slide {
  left: auto; right: calc(var(--sr) + 126px * var(--k)); bottom: calc(var(--sb) + 14px * var(--k));
}
body.to-touch-play .to-touch-reload {
  right: calc(var(--sr) + 192px * var(--k)); bottom: calc(var(--sb) + 40px * var(--k));
  width: calc(44px * var(--k)); height: calc(44px * var(--k)); font-size: calc(13px * var(--k));
}
body.to-touch-play .to-touch-swap {
  left: auto; right: calc(var(--sr) + 196px * var(--k)); bottom: calc(var(--sb) + 96px * var(--k));
  width: calc(44px * var(--k)); height: calc(44px * var(--k)); font-size: calc(14px * var(--k));
}
body.to-touch-play .to-touch-melee {
  right: calc(var(--sr) + 24px * var(--k)); bottom: calc(var(--sb) + 190px * var(--k));
  font-size: calc(9px * var(--k));
}
body.to-touch-play .to-touch-nade {
  right: calc(var(--sr) + 88px * var(--k)); bottom: calc(var(--sb) + 196px * var(--k));
  width: calc(46px * var(--k)); height: calc(46px * var(--k));
}
body.to-touch-play .to-touch-tac {
  right: calc(var(--sr) + 146px * var(--k)); bottom: calc(var(--sb) + 168px * var(--k));
  width: calc(46px * var(--k)); height: calc(46px * var(--k));
}
/* Grenade counts ride on their buttons, since the chips are hidden. */
body.to-touch-play .to-touch-nade::after,
body.to-touch-play .to-touch-tac::after {
  content: attr(data-n);
  position: absolute; right: -2px; top: -2px;
  min-width: calc(15px * var(--k)); height: calc(15px * var(--k)); border-radius: 99px;
  background: #7fe066; color: #0d1410;
  font: 700 calc(9px * var(--k))/calc(15px * var(--k)) "DM Mono", monospace;
}
body.to-touch-play .to-touch-interact {
  left: auto; right: calc(var(--sr) + 204px * var(--k)); bottom: calc(var(--sb) + 152px * var(--k));
}
body.to-touch-play .to-touch-streak {
  left: auto; right: calc(var(--sr) + 262px * var(--k)); bottom: calc(var(--sb) + 150px * var(--k));
  width: calc(66px * var(--k)); height: calc(66px * var(--k)); font-size: calc(10px * var(--k));
  background: rgba(127,224,102,.3); border: 2px solid rgba(127,224,102,.65);
}
/* The left thumb's own trigger, up and right of the stick's rest spot. */
body.to-touch-play .to-touch-fire-l {
  left: calc(var(--sl) + 158px * var(--k)); bottom: calc(var(--sb) + 112px * var(--k));
  width: calc(56px * var(--k)); height: calc(56px * var(--k));
  font-size: calc(10px * var(--k));
  background: rgba(255,60,50,.24); border-color: rgba(255,120,110,.45);
}
.to-touch-fire-l, .to-touch-tac { display: none; }
body.to-touch-play .to-touch-fire-l, body.to-touch-play .to-touch-tac { display: flex; }
.to-touch-fire-l[hidden], .to-touch-tac[hidden] { display: none !important; }

/* HUD rearranged round the controls. */
body.to-touch-play .to-cabinet canvas.to-minimap {
  left: calc(var(--sl) + 10px); top: 8px;
  width: calc(96px * var(--k)); height: calc(96px * var(--k));
}
body.to-touch-play .to-ss-hud {
  left: calc(var(--sl) + 10px); top: calc(14px + 96px * var(--k)); bottom: auto;
  width: max-content; z-index: 16;
}
body.to-touch-play .to-ss-slot { width: calc(64px * var(--k)); height: calc(64px * var(--k)); }
body.to-touch-play .to-hud-top { padding-left: calc(var(--sl) + 20px + 96px * var(--k)); padding-right: calc(var(--sr) + 76px); top: 8px; }
body.to-touch-play .to-hud-teams { top: 10px; }
body.to-touch-play .to-royale { top: 40px; }
/* The HUD's own tappables (menu button, streak rows, strike tablet) sat
   UNDER the touch layer, so the look pad and move zone swallowed every tap
   meant for them. Lift the HUD over it; it's pointer-events: none, so only
   those controls catch touches and everything else still reaches the pads. */
body.to-touch-play .to-hud { z-index: 16; }
body.to-touch-play .to-gear {
  top: 8px; right: calc(var(--sr) + 10px); width: 44px; height: 44px;
  font-size: 20px; touch-action: manipulation;
}
body.to-touch-play .to-killfeed { top: 56px; right: calc(var(--sr) + 12px); max-width: min(230px, 34vw); }
body.to-touch-play .to-hud-gear { display: none; }
body.to-touch-play .to-radio { display: none; }
body.to-touch-play .to-hud-bottom {
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: calc(var(--sb) + 6px); padding: 0; gap: 14px; align-items: center;
}
body.to-touch-play .to-hp-bar { width: calc(110px * var(--k)); }
body.to-touch-play #hud-ammo-cur { font-size: calc(24px * var(--k)); }
body.to-touch-play .to-spawnguard { bottom: auto; top: 26%; }

/* ---- upright phone or tablet mid-match: ask for landscape ---- */
.to-rotate { display: none; }
@media (orientation: portrait) {
  body.to-touch-play .to-rotate {
    position: absolute; inset: 0; z-index: 60;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(5,7,10,.92); color: #eef2ea; text-align: center; padding: 24px;
    font-family: "DM Sans", sans-serif;
  }
  body.to-touch-play .to-rotate strong { font-family: "Oswald", sans-serif; font-size: 22px; letter-spacing: .04em; }
  body.to-touch-play .to-rotate span { font-size: 14px; color: #9aa596; }
}
.to-rotate-phone {
  width: 46px; height: 78px; border: 3px solid #7fe066; border-radius: 9px; margin-bottom: 8px;
  animation: to-rotate-turn 1.8s ease-in-out infinite;
}
@keyframes to-rotate-turn {
  0%, 25% { transform: rotate(0deg); }
  55%, 100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) { .to-rotate-phone { animation: none; transform: rotate(-90deg); } }

/* ---- Emote wheel (hold H in a match, see emote-wheel.js) ---- */
.to-emote-wheel {
  position: absolute; left: 50%; top: 50%; z-index: 30;
  width: 460px; height: 460px; margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,14,12,.55) 0 22%, rgba(10,14,12,.8) 23% 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  pointer-events: auto;
}
.to-emote-wheel[hidden] { display: none; }
.is-emoting .to-crosshair { display: none; }
/* Placed round the ring by emote-wheel.js (inline left/top). */
.to-emote-slice {
  position: absolute; width: 62px; height: 46px; margin: -23px 0 0 -31px; padding: 2px 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: #dfe6da;
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 11.5px; line-height: 1.05; letter-spacing: .02em;
  cursor: pointer; transition: background .1s, border-color .1s, transform .1s, opacity .1s;
}
.to-emote-slice i { font-style: normal; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .08em; }
.to-emote-slice.is-tp i { color: #7cc8ff; }
.to-emote-slice.is-fp i { color: #ffd84d; }
.to-emote-slice.is-duo i { color: #8fe36a; }
/* Duo emotes need a teammate in the match. */
.to-emote-slice.is-disabled { opacity: .3; filter: grayscale(1); cursor: not-allowed; }
.to-emote-slice:hover, .to-emote-slice.is-picked {
  background: rgba(127,224,102,.22); border-color: #7fe066; color: #fff; transform: scale(1.06);
}
.to-emote-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none; text-align: center;
}
.to-emote-hub b { font-family: "Oswald", sans-serif; font-size: 18px; color: #eaf5e4; letter-spacing: .06em; text-transform: uppercase; }
.to-emote-hub span { font-family: "DM Mono", monospace; font-size: 10px; color: #9aa596; }
@media (prefers-reduced-motion: reduce) { .to-emote-slice { transition: none; } }

/* BO2-style killcam overlay (game.js startKillcamPresentation). KILLCAM
   across the top between the letterbox bars, the killer plate bottom-left,
   the skip hint bottom-right. Sits above the bars (z 19). */
.to-kc {
  position: absolute; inset: 0; z-index: 20; pointer-events: none;
  font-family: "Oswald", sans-serif; text-transform: uppercase; color: #fff;
}
.to-kc[hidden] { display: none; }
.to-kc-top {
  position: absolute; top: 1.2%; left: 0; right: 0; text-align: center;
}
.to-kc-title {
  display: inline-block; font-size: clamp(22px, 3.6vw, 40px); font-weight: 700;
  letter-spacing: .3em; padding-left: .3em;
  text-shadow: 0 0 18px rgba(255,255,255,.25), 0 2px 0 rgba(0,0,0,.6);
  animation: to-kc-in .35s ease-out both;
}
.to-kc-top::after {
  content: ""; display: block; width: 120px; height: 2px; margin: 4px auto 0;
  background: linear-gradient(90deg, transparent, #ff9a2e, transparent);
}
.to-kc-plate {
  position: absolute; left: 3%; bottom: calc(9% + 18px);
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 22px 10px 14px; border-left: 3px solid #ff9a2e;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.35) 75%, transparent);
  animation: to-kc-slide .4s ease-out both;
}
.to-kc-by { font-size: 12px; letter-spacing: .24em; color: #ff9a2e; font-weight: 600; }
.to-kc-name { font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; letter-spacing: .06em; line-height: 1.1; }
.to-kc-weapon { font-size: 13px; letter-spacing: .14em; color: #cfd6cc; font-weight: 500; }
.to-kc-skip {
  position: absolute; right: 3%; bottom: calc(9% + 22px); pointer-events: auto;
  font: 500 13px/1 "Oswald", sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: #e8ece6; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px; padding: 8px 12px; cursor: pointer;
}
.to-kc-skip b { color: #ff9a2e; font-weight: 700; }
.to-kc-skip:focus-visible { outline: 2px solid #ff9a2e; outline-offset: 2px; }
/* The kill itself: a brief white flare while the replay slows. */
.to-kc.is-kill::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.14), transparent 65%);
  animation: to-kc-flare .5s ease-out both;
}
@keyframes to-kc-in { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; } }
@keyframes to-kc-slide { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes to-kc-flare { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .to-kc-title, .to-kc-plate, .to-kc.is-kill::before { animation: none; }
}
/* While the killcam plays, it's the whole screen: the live HUD (crosshair,
   minimap, gear, ammo, hit arcs) goes; the killfeed and scoreboard stay. */
.to-kc-on > *:not(.to-kc):not(.to-killcam-bars):not(.to-killfeed):not(.to-scoreboard):not(.to-respawn) { visibility: hidden !important; }

/* ---- Your profile, in the lobby header (troll-accounts.js profile modal) ---- */
/* A round avatar button; the name only shows where the tab bar has room. */
.to-pf-profile {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 38px; height: 38px; box-sizing: border-box;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--pf-line); border-radius: 999px;
  padding: 4px; color: var(--pf-text); cursor: pointer;
  font-family: "Oswald", sans-serif; font-size: 13px; letter-spacing: .06em;
}
.to-pf-profile img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.to-pf-profile img[hidden] { display: none; }
.to-pf-profile span { display: none; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1560px) {
  .to-pf-profile { padding-right: 14px; }
  .to-pf-profile span { display: inline; }
}
.to-pf-profile:hover, .to-pf-profile:focus-visible { border-color: var(--pf-ok); }

/* Operator names that open a profile card: the paused roster (a copy of the
   scoreboard) and the lobby's "In the room" list. */
.to-sb-name, .to-pf-op-name {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  text-decoration: underline dotted rgba(255, 255, 255, .45); text-underline-offset: 3px;
}
.to-sb-name:hover, .to-sb-name:focus-visible, .to-pf-op-name:hover, .to-pf-op-name:focus-visible { color: var(--pf-xp, #ffb020); }

/* ---- Match chat (chat.js). Bottom-left, above the gear chips. ---- */
.to-chat {
  position: absolute; left: 18px; bottom: 96px; z-index: 13;
  width: min(380px, calc(100% - 36px));
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: none;
  font-family: "DM Mono", monospace; font-size: 12.5px; color: #eaf5e4;
}
.to-chat[hidden] { display: none; }
.to-chat-log {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  max-height: 38vh; overflow: hidden;
}
.to-chat.is-open .to-chat-log { overflow-y: auto; background: rgba(8, 12, 10, .6); border-radius: 8px; padding: 6px 8px; }
.to-chat-line { line-height: 1.35; overflow-wrap: anywhere; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.to-chat:not(.is-open) .to-chat-line { align-self: flex-start; background: rgba(8, 12, 10, .4); border-radius: 4px; padding: 1px 6px; }
.to-chat-tag { color: #8fe36a; margin-right: 4px; font-size: 11px; }
.to-chat-name { font: inherit; font-weight: 700; color: #ffd84d; background: none; border: 0; padding: 0; }
.to-chat.is-open, .to-chat.is-interactive { pointer-events: auto; }
.to-chat.is-interactive button.to-chat-name { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.to-chat-form {
  display: flex; align-items: center; gap: 8px;
  background: rgba(8, 12, 10, .85); border: 1px solid rgba(143, 227, 106, .55); border-radius: 8px; padding: 6px 8px;
}
.to-chat-form[hidden] { display: none; }
.to-chat-chan {
  flex: none; font-family: "Oswald", sans-serif; font-size: 11px; letter-spacing: .08em;
  color: #0b0f0c; background: #ffd84d; border-radius: 4px; padding: 1px 6px;
}
.to-chat-chan.is-team { background: #8fe36a; }
.to-chat-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font: inherit; }

/* Duo emote request (game.js updateDuo): "<name> wants to Dap up: hold X" with
   its 30 s countdown, or "Hold X: Dap up with <name>" to send one,
   with a ring that fills while X is held. Outgoing: "waiting for <name>". */
.to-duo-prompt {
  position: absolute; left: 50%; top: 64%; transform: translateX(-50%); z-index: 14;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 10px; border-radius: 999px;
  background: rgba(8, 12, 10, .8); border: 1px solid rgba(255, 255, 255, .16);
  font-family: "Oswald", sans-serif; font-size: 15px; letter-spacing: .04em; color: #eaf5e4;
  white-space: nowrap; pointer-events: none;
}
.to-duo-prompt[hidden] { display: none; }
.to-duo-prompt.is-incoming { border-color: #8fe36a; }
.to-duo-prompt.is-armed { border-color: rgba(143, 227, 106, .5); }
/* The request's 30-second countdown. */
.to-duo-clock {
  font-family: "DM Mono", monospace; font-weight: 400; font-size: 12px; color: #0b100a;
  background: #8fe36a; border-radius: 999px; padding: 1px 7px; min-width: 2.6em; text-align: center;
}
.to-duo-prompt.is-waiting .to-duo-clock { background: rgba(255, 255, 255, .16); color: #eaf5e4; }
.to-duo-ring {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: conic-gradient(#8fe36a calc(var(--fill, 0) * 360deg), rgba(255, 255, 255, .15) 0);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px);
          mask: radial-gradient(circle, transparent 5px, #000 6px);
}
.to-duo-prompt:not(.is-incoming) .to-duo-ring { animation: to-duo-wait 1s linear infinite; background: conic-gradient(#8fe36a 90deg, rgba(255,255,255,.15) 0); }
@keyframes to-duo-wait { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .to-duo-prompt .to-duo-ring { animation: none; } }

/* Emotes on touch: the wheel shrinks to fit a landscape phone's height. */
body.to-touch-play .to-emote-wheel { transform: scale(calc(var(--k) * .7)); }
body.to-touch-play .to-touch-emote {
  left: auto; right: calc(var(--sr) + 24px * var(--k)); bottom: auto; top: calc(var(--st, 0px) + 64px * var(--k));
  width: calc(56px * var(--k)); height: calc(30px * var(--k)); font-size: calc(9px * var(--k));
}

/* Test Range on touch: the desktop panel sat over the right-thumb buttons.
   A slim strip at the top centre instead, with only what a thumb can use
   (the key hints and sens/fov rows are keyboard-only). */
body.to-touch-play .to-range {
  right: auto; left: 50%; bottom: auto; top: calc(8px * var(--k)); transform: translateX(-50%);
  width: auto; display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 0;
}
body.to-touch-play .to-range-row,
body.to-touch-play .to-range-note { display: none; }
body.to-touch-play .to-range-bar { padding: 5px 8px; }
body.to-touch-play .to-range-shot { padding: 0; font-size: 12px; white-space: nowrap; }
body.to-touch-play .to-range-spawnbot { width: auto; margin: 0; padding: 5px 10px; }
body.to-touch-play .to-range-spawnbot kbd { display: none; }

/* Fresh from a care package: the slot pulses with a READY tag for a few
   seconds so it's obvious the streak is banked and waiting to be called. */
.to-ss-slot.is-fresh { animation: to-ss-fresh 0.8s ease-in-out infinite alternate; }
.to-ss-slot.is-fresh::after {
  content: "READY"; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  padding: 1px 6px; border-radius: 6px; background: #7fe066; color: #0b1408;
  font: 700 10px/1.3 "Oswald", sans-serif; letter-spacing: .08em;
}
@keyframes to-ss-fresh { to { box-shadow: 0 0 22px rgba(127,224,102,.95); transform: scale(1.06); } }

/* Touch: while there's a package or a gun to take, the swap button becomes
   a labelled pill (CAPTURE / PICK UP). */
.to-touch-swap .to-touch-ctx { display: none; }
body.to-touch-play .to-touch-swap.is-context {
  width: auto; min-width: calc(96px * var(--k)); padding: 0 calc(14px * var(--k));
  border-radius: 999px; background: rgba(60,170,70,.55); border-color: #9dff7a;
  box-shadow: 0 0 14px rgba(127,224,102,.6); animation: to-ss-fresh 0.8s ease-in-out infinite alternate;
}
body.to-touch-play .to-touch-swap.is-context svg { display: none; }
/* A Socialize action with its own icon (view/touch-icons.js): the icon over the word. */
body.to-touch-play .to-touch-swap.is-context.has-icon { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: calc(2px * var(--k)); padding-top: calc(4px * var(--k)); padding-bottom: calc(4px * var(--k)); }
body.to-touch-play .to-touch-swap.is-context.has-icon svg { display: block; width: calc(24px * var(--k)); height: calc(24px * var(--k)); }
body.to-touch-play .to-touch-swap.is-context.has-icon .to-touch-ctx { font-size: calc(11px * var(--k)); }
body.to-touch-play .to-touch-swap.is-context .to-touch-ctx {
  display: block; font: 700 calc(13px * var(--k))/1 "Oswald", sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}

/* One throwable slot: the kind you didn't bring isn't shown at all. */
.to-gear-chip.is-uncarried, .to-touch-btn.is-uncarried { display: none !important; }

/* Settings > HUD layout editor (hud-layout.js). */
.to-set-btn {
  justify-self: end; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(157,255,122,.5); background: rgba(127,224,102,.14); color: #dff5d6;
  font: 600 12px "DM Sans", sans-serif;
}
.to-set-btn:hover, .to-set-btn:focus-visible { background: rgba(127,224,102,.28); outline: none; }
.to-set-hint { display: block; font-size: 10.5px; color: #8f9a8b; margin-top: 2px; }
.to-set-note { margin: -4px 0 6px; padding: 0 2px; }
body.to-layout-edit .to-hud, body.to-layout-edit .to-touch { background: rgba(6,10,8,.35); }
body.to-layout-edit .to-layout-item {
  pointer-events: auto !important; cursor: grab; touch-action: none;
  outline: 2px dashed rgba(157,255,122,.85); outline-offset: 3px;
  min-width: 56px; min-height: 26px;
}
body.to-layout-edit .to-layout-item.is-dragging { cursor: grabbing; outline-style: solid; outline-color: #fff; z-index: 40; }
body.to-layout-edit .to-layout-item::before {
  content: attr(data-layout-label); position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
  padding: 1px 6px; border-radius: 5px; background: rgba(10,16,10,.85); color: #bdf5a8;
  font: 600 10px/1.4 "DM Sans", sans-serif; white-space: nowrap; pointer-events: none; text-shadow: none;
}
/* Health and ammo sit in a flex row: they need a box for their label. */
body.to-layout-edit #hud-health.to-layout-item, body.to-layout-edit #hud-ammo.to-layout-item { position: relative; }
.to-layout-bar {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1000;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px;
  background: rgba(20,24,20,.94); border: 0.5px solid rgba(255,255,255,.18); border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); color: #e6ede2; font: 500 13px "DM Sans", sans-serif;
}
.to-layout-bar button {
  padding: 7px 14px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #e6ede2; font: 600 12.5px "DM Sans", sans-serif; cursor: pointer;
}
.to-layout-bar button.is-primary { background: #7fe066; border-color: #7fe066; color: #0b1408; }

/* Admire (inspect) your weapon: a sparkle under Emote. */
.to-touch-admire { left: 22px; top: 136px; width: 52px; height: 32px; border-radius: 9px; }
.to-touch-admire svg { width: 16px; height: 16px; }
body.to-touch-play .to-touch-admire {
  left: auto; right: calc(var(--sr) + 24px * var(--k)); bottom: auto; top: calc(var(--st, 0px) + 100px * var(--k));
  width: calc(56px * var(--k)); height: calc(30px * var(--k));
}
body.to-touch-play .to-touch-admire svg { width: calc(20px * var(--k)); height: calc(20px * var(--k)); }

/* Scorestreak slots, BO2 style: the picture with the streak's tier badge on
   its corner, its name under it, then the cost (or READY and the key). */
.to-ss-slot { width: 92px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 4px 5px; }
.to-ss-slot .to-ss-img { width: 70px; height: 62px; }
.to-ss-badge { position: absolute; left: -7px; top: -7px; width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.to-ss-badge svg { width: 100%; height: 100%; display: block; }
.to-ss-badge svg.is-dim { filter: grayscale(.85) brightness(.7); }
.to-ss-cap { display: flex; flex-direction: column; align-items: center; min-width: 0; width: 100%; line-height: 1.15; text-align: center; }
.to-ss-cap b { font: 700 10.5px/1.2 "Oswald", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #e8eee4;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-ss-cap span { font: 500 9.5px/1.2 "DM Mono", monospace; color: #9aa596; }
.to-ss-slot.is-ready .to-ss-cap span { color: #9dff7a; }
.to-ss-slot:not(.is-ready) .to-ss-cap b { color: #b7bfb2; }
/* Earned but locked out: the gunship cooldown, or a UAV an enemy
   Counter-UAV shot down. Amber rim and a countdown under the name. */
.to-ss-slot.is-locked { border-color: rgba(255,176,58,.6); }
.to-ss-slot.is-locked .to-ss-cap span { color: #ffb03a; }
/* The READY tag of a fresh care-package streak sits over the picture now. */
.to-ss-slot.is-fresh::after { bottom: auto; top: 44px; }
body.to-touch-play .to-ss-slot { width: calc(70px * var(--k)); height: auto; padding: calc(3px * var(--k)); }
body.to-touch-play .to-ss-slot .to-ss-img { width: calc(52px * var(--k)); height: calc(44px * var(--k)); }
body.to-touch-play .to-ss-badge { width: calc(22px * var(--k)); height: calc(22px * var(--k)); left: -5px; top: -5px; }
body.to-touch-play .to-ss-cap b { font-size: calc(8.5px * var(--k)); }
body.to-touch-play .to-ss-cap span { font-size: calc(8px * var(--k)); }
/* Lobby picker: the badge in place of the plain symbol. */
.to-ss-icon.to-ss-badgeicon { width: 34px; height: 34px; color: inherit; }
/* Long BO2 names ("Lightning Strike") wrap to two lines rather than cut off. */
.to-ss-cap b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; }
body.to-touch-play .to-ss-slot { width: calc(64px * var(--k)); }
body.to-touch-play .to-ss-slot .to-ss-img { width: calc(46px * var(--k)); height: calc(38px * var(--k)); }

/* -------------------- controller layout card (controller-layout.js) -------------------- */
.to-controls-wrap { display: flex; flex-direction: column; }
body.to-has-pad .to-controls-pad { order: -1; }   /* a pad is plugged in: its layout first */
.to-pad-host { padding: 4px 20px 10px; }
.to-menu-panel .to-pad-host { padding: 4px 0 8px; }
.to-pad-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.to-pad-name { font-weight: 600; font-size: 13px; color: #eaf5e4; }
.to-pad-status { font-family: "DM Mono", monospace; font-size: 10.5px; color: #8f9a8b; }
.to-pad-status.is-live { color: #7fe066; }
.to-pad-picker { display: inline-flex; margin-left: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; overflow: hidden; }
.to-pad-picker button {
  font: inherit; font-size: 11px; padding: 4px 9px; border: 0; cursor: pointer;
  background: transparent; color: #b9c4b2;
}
.to-pad-picker button + button { border-left: 1px solid rgba(255,255,255,.14); }
.to-pad-picker button[aria-pressed="true"] { background: rgba(127,224,102,.2); color: #eaf5e4; }
.to-pad-picker button:focus-visible { outline: 2px solid #7fe066; outline-offset: -2px; }
/* Blueprint: navy sheet, a faint grid, the pad in white line work. */
.to-pad-svg { display: block; width: 100%; height: auto; max-height: 340px; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 40%, #174a86 0%, #0f3767 70%, #0b2b52 100%); }
.to-pad-svg .pad-grid line { stroke: rgba(170,210,255,.12); stroke-width: 0.6; }
.to-pad-svg .pad-shell { fill: rgba(200,228,255,.05); stroke: #e3f1ff; stroke-width: 1.8; }
.to-pad-svg .pad-panel { fill: none; stroke: rgba(227,241,255,.55); stroke-width: 1; stroke-dasharray: 5 4; }
.to-pad-svg .pad-dim { fill: none; stroke: rgba(227,241,255,.5); stroke-width: 1; }
.to-pad-svg .pad-dimtext { font: 600 8px "DM Mono", monospace; fill: rgba(227,241,255,.6); letter-spacing: .12em; }
.to-pad-svg .pad-well { fill: none; stroke: rgba(227,241,255,.45); stroke-width: 1; }
.to-pad-svg .pad-knurl { fill: none; stroke: rgba(227,241,255,.35); stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
.to-pad-svg .pad-dcore { fill: rgba(200,228,255,.1); stroke: rgba(227,241,255,.6); }
.to-pad-svg .pad-led { fill: rgba(227,241,255,.7); }
.to-pad-svg .pad-btn { fill: rgba(200,228,255,.1); stroke: #e3f1ff; stroke-width: 1.2; transition: fill .08s; }
.to-pad-svg .pad-face { stroke-width: 1.6; }
.to-pad-svg .pad-btn.is-on { fill: #7fe066; stroke: #d4ffc6; }
.to-pad-svg .pad-glyph { font: 600 13px "DM Sans", sans-serif; fill: #e3f1ff; pointer-events: none; }
.to-pad-svg .pad-glyph-sm { font-size: 9px; font-weight: 700; }
.to-pad-svg .pad-glyph-xs { font-size: 5.5px; letter-spacing: .02em; }
.to-pad-svg .pad-lead { fill: none; stroke: rgba(227,241,255,.3); stroke-width: 1; }
.to-pad-svg .pad-call { font: 12px "DM Sans", sans-serif; fill: #c4dcf5; }
.to-pad-svg .pad-call-key { font: 600 11px "DM Mono", monospace; fill: #ffffff; }
.to-pad-svg .pad-callout.is-on .pad-lead { stroke: #7fe066; stroke-width: 1.6; }
.to-pad-svg .pad-callout.is-on .pad-call { fill: #ffffff; }
.to-pad-svg .pad-callout.is-on .pad-call-key { fill: #7fe066; }
.to-pad-bind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: #b9c4b2; }
.to-pad-bind span { flex: 1 1 180px; }
.to-pad-bind .to-set-btn[disabled] { opacity: .5; cursor: default; }
/* The list says the same thing in text; on a wide card the drawing carries
   it, on a narrow one (controller-layout.js .is-narrow) the pad is drawn
   alone and the list sits under it. */
.to-pad-list { display: none; margin-top: 8px; }
.to-pad-host.is-narrow .pad-callout { display: none; }
.to-pad-host.is-narrow .to-pad-svg { max-height: 220px; }
.to-pad-host.is-narrow .to-pad-list { display: grid; }
.to-pad-list kbd { min-width: 64px; }
.to-pad-list kbd.is-on { background: #7fe066; color: #0d1410; border-color: #c9ffb8; }

/* -------------------- Dragonfire pilot feed (game.js dragonfireHudEl) -------------------- */
.to-df { position: absolute; inset: 0; z-index: 14; pointer-events: none; color: #dff6ff;
  font-family: "Oswald", sans-serif; letter-spacing: .12em; }
.to-df[hidden] { display: none; }
body.to-in-dragonfire #to-ss-hud, body.to-in-dragonfire #to-crosshair, body.to-in-dragonfire #hud-ammo,
body.to-in-dragonfire #to-hud-gear, body.to-in-dragonfire #to-spawnguard, body.to-in-dragonfire .to-hud-weapon { visibility: hidden; }
.to-df-scan { position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(160,220,255,.04) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,10,20,.6) 100%); }
.to-df-frame { position: absolute; inset: 9% 12%; }
.to-df-frame i { position: absolute; width: 38px; height: 38px; border: 2px solid rgba(223,246,255,.75); }
.to-df-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.to-df-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.to-df-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.to-df-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.to-df-reticle { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%);
  border: 2px solid rgba(223,246,255,.85); border-radius: 50%; box-shadow: 0 0 3px #000; }
.to-df-reticle b { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #ff5a3a; border-radius: 50%; }
.to-df-top { position: absolute; bottom: 116px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px;
  font-size: 15px; text-shadow: 0 1px 3px #000; }
.to-df-hp { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; font-size: 12px; }
.to-df-hp div { width: 180px; height: 5px; background: rgba(223,246,255,.2); }
.to-df-hp i { display: block; height: 100%; background: #dff6ff; transition: width .15s; }
.to-df-alt { position: absolute; right: 14%; top: 50%; transform: translateY(-50%); font-size: 13px; text-shadow: 0 1px 3px #000; }
.to-df-keys { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); font-size: 12px; letter-spacing: 0.12em;
  white-space: nowrap; opacity: 0.85; text-shadow: 0 1px 3px #000; }
.to-df.is-low .to-df-time, .to-df.is-low .to-df-hp i { color: #ff5a3a; background-color: #ff5a3a; }
@media (max-width: 760px) {
  .to-df-top { bottom: 180px; font-size: 13px; }
  .to-df-hp { bottom: 150px; }
}
.to-df.is-low .to-df-time { background: none; }

/* -------------------- Cosmetics panel (cosmetics.js) -------------------- */
.to-cos-hint { margin: -2px 20px 8px; font-size: 11.5px; color: #8f9a8b; }
.to-cos-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 0 20px 8px; }
.to-cos-face {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px 10px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  color: #dfe8da; font: 600 13px "DM Sans", sans-serif; cursor: pointer;
}
.to-cos-face:hover { background: rgba(255,255,255,.08); }
.to-cos-face.is-on { border-color: #7fe066; background: rgba(127,224,102,.14); box-shadow: 0 0 0 1px #7fe066 inset; }
.to-cos-face:focus-visible { outline: 2px solid #7fe066; outline-offset: 2px; }
.to-cos-thumb { position: relative; width: 100px; height: 76px; }
/* The art's white skin, under the art itself (its PNG is see-through). */
.to-cos-thumb::before {
  content: ""; position: absolute; inset: 0; background: #fff;
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat;
}
.to-cos-thumb img { position: relative; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* The operator steps right while the Cosmetics panel is open on the left. */
.to-title[data-panel="cosmetics"] .to-char-view { left: 46%; }
.to-title[data-panel="cosmetics"] .to-char-emote { display: none; }
@media (max-width: 760px) {
  .to-title[data-panel="cosmetics"] .to-char-view { left: 0; top: 56px; bottom: 58%; }
}
@media (max-width: 760px) {
  .to-pf[data-panel="cosmetics"] .to-pf-center { top: 44%; }
}

/* Tablet dive (game.js startTabletDive): the cut into the tablet's screen. */
.to-tablet-dive { position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(109,255,74,.22) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse at center, rgba(160,255,130,.9) 0%, rgba(40,120,30,.85) 45%, rgba(3,12,4,.95) 100%); }
.to-tablet-dive.is-on { animation: to-tablet-dive .42s ease-out forwards; }
@keyframes to-tablet-dive {
  0% { opacity: 1; transform: scale(1.04); filter: brightness(1.6); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: scale(1); filter: brightness(1); }
}

/* ---- In a streak: hold to end it (game.js updateStreakControl) ---- */
.to-ss-endhold {
  position: fixed; left: 50%; bottom: 22%; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; border-radius: 8px;
  background: rgba(10,14,10,.62); border: 1px solid rgba(255,255,255,.14);
  font: 600 12px/1.2 "Oswald", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #e8eee4;
  pointer-events: none; overflow: hidden;
}
.to-ss-endhold[hidden] { display: none; }
.to-ss-endhold-k {
  min-width: 22px; height: 22px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 5px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); font: 700 12px/1 "DM Mono", monospace;
}
.to-ss-endhold-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); }
.to-ss-endhold-bar b { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: #ff6a4a; }
.to-ss-endhold.is-holding { border-color: rgba(255,106,74,.7); }
/* Touch: the END button, its own hold filling it. */
.to-touch-endstreak {
  left: 22px; bottom: 260px; width: 52px; height: 52px; font-size: 11px; font-weight: 700;
  background: linear-gradient(to top, rgba(255,106,74,.55) calc(var(--p, 0) * 100%), rgba(255,106,74,.16) 0);
  border-color: rgba(255,106,74,.6);
}
body.to-touch-play .to-touch-endstreak {
  left: auto; right: calc(var(--sr) + 262px * var(--k)); bottom: calc(var(--sb) + 230px * var(--k));
  width: calc(62px * var(--k)); height: calc(62px * var(--k)); font-size: calc(12px * var(--k));
}
/* A streak is busy: the throwables are off (startCook refuses). */
body.to-streak-busy .to-touch-nade, body.to-streak-busy .to-touch-tac { opacity: .3; pointer-events: none; }
body.to-streak-busy #to-gear-lethal, body.to-streak-busy #to-gear-tactical { opacity: .4; }
/* A ready Dragonfire somewhere it can't launch: red rim, a crossed-out
   house over the picture, and the reason under its name. */
.to-ss-slot.is-blocked { border-color: rgba(255,106,74,.7); box-shadow: none; }
.to-ss-slot.is-blocked .to-ss-img { filter: grayscale(.7) brightness(.7); }
.to-ss-slot.is-blocked .to-ss-cap span { color: #ff8a6a; }
.to-ss-sky {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 30px; height: 30px; padding: 4px;
  border-radius: 50%; background: rgba(40,10,6,.78); color: #ff8a6a; box-sizing: border-box;
}
.to-ss-sky svg { width: 100%; height: 100%; display: block; }
body.to-touch-play .to-ss-sky { width: calc(24px * var(--k)); height: calc(24px * var(--k)); top: calc(12px * var(--k)); }
/* Dragonfire gun heat (dragonfire.js DF_HEAT_*): fills while you fire,
   goes red near the top, locks with OVERHEATED until it cools. */
.to-df-heat { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; font-size: 12px; }
.to-df-heat div { width: 180px; height: 5px; background: rgba(223,246,255,.2); }
.to-df-heat i { display: block; height: 100%; width: 0; background: #ffd28a; }
.to-df-heat em { position: absolute; left: 100%; margin-left: 10px; font-style: normal; font-weight: 700; color: #ff5a3a; letter-spacing: .08em; display: none; white-space: nowrap; }
.to-df.is-hot .to-df-heat i { background: #ff8a4a; }
.to-df.is-overheated .to-df-heat i { background: #ff5a3a; animation: to-df-hot .4s ease-in-out infinite alternate; }
.to-df.is-overheated .to-df-heat em { display: block; }
.to-df.is-overheated .to-df-reticle { opacity: .35; }
@keyframes to-df-hot { from { opacity: 1; } to { opacity: .45; } }

/* =====================================================================
   Main menu v3: Black Ops 2 Zombies style (menu-bo2.js). A plain stacked
   text list (assets/js/bo2-menu.js) over the molten troll-map planet
   (assets/js/menu-globe.js), the same look as the trollrunner.net home.
   The old menu's lists still exist (game.js builds them, menu-bo2.js
   drives them); here they're hidden, and the old panel container sits in
   the right-hand detail pane for what isn't a list (stats, room, keys).
   ===================================================================== */
#to-title.is-bo2 { background: #030101; }
#to-title.is-bo2 .to-title-bg,
#to-title.is-bo2 .to-pf-top,
#to-title.is-bo2 .to-pf-play,
#to-title.is-bo2 .to-pf-right,
#to-title.is-bo2 #to-map-drawer,
#to-title.is-bo2 #to-map-scrim { display: none !important; }
.to-bo2 {
  --bo2-ink: #f3ece4; --bo2-dim: #c9b8a6; --bo2-soft: #e2d6c8; --bo2-hot: #ff8a1f; --bo2-gold: #ffd27a;
  --bo2-col: max(560px, 44%);   /* also set on .to-pf below, for the gun view */
  position: absolute; inset: 0; color: var(--bo2-ink); pointer-events: none;
  font-family: "DM Sans", system-ui, sans-serif;
}
.to-bo2 > :not(.to-bo2-bg) { pointer-events: auto; }
.to-bo2-bg { position: absolute; inset: 0; z-index: 0; }
.to-bo2-brand {
  position: absolute; left: 72px; top: 40px; z-index: 3;
  font: 700 22px/1 Oswald, "Arial Narrow", sans-serif; letter-spacing: .08em;
  color: var(--bo2-ink); text-decoration: none; text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
.to-bo2-brand em { font-style: normal; color: var(--bo2-hot); }
/* Never reaches the footer: --foot-h is its live height (menu-bo2.js), so
   a long list or description scrolls here instead of running over "N Online". */
.to-bo2-menu { position: absolute; left: 96px; top: 100px; width: 440px; max-height: calc(100% - 100px - 30px - var(--foot-h, 60px) - 20px); overflow: hidden; z-index: 3; }
.to-bo2-party { position: absolute; left: var(--bo2-col); top: 140px; width: min(380px, calc(100% - var(--bo2-col) - 48px)); z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.to-bo2.has-detail .to-bo2-party, body.is-map .to-bo2-party { visibility: hidden; }
.to-bo2-party-lbl { font: 500 17px Oswald, sans-serif; letter-spacing: .04em; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.to-bo2-party-lbl span { color: var(--bo2-dim); }
.to-bo2-party-row {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px;
  border: 0; border-bottom: 1px solid rgba(255,176,32,.55);
  background: linear-gradient(90deg, rgba(10,4,2,.8), rgba(10,4,2,.2));
  color: inherit; text-align: left; cursor: pointer;
}
.to-bo2-party-row:focus-visible { outline: 2px solid var(--bo2-hot); outline-offset: 2px; }
.to-bo2-party-row b { font: 500 18px Oswald, sans-serif; letter-spacing: .03em; color: var(--bo2-gold); }
.to-bo2-lv { font: normal 12px "DM Mono", monospace; color: var(--bo2-hot); }
.to-bo2-xp { font: 12px "DM Mono", monospace; color: var(--bo2-dim); text-shadow: 0 1px 4px rgba(0,0,0,.9); }

/* The detail pane: the old panels (minus their lists), a map shot, the board. */
.to-bo2-detail, .to-bo2-panel {
  position: absolute; left: var(--bo2-col); right: 48px; top: 100px; bottom: 96px; z-index: 3;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 20px; box-sizing: border-box;
  background: rgba(10,4,2,.82); border: 1px solid rgba(243,236,228,.14); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.to-bo2-panel, .to-bo2-detail { bottom: auto; max-height: calc(100% - 196px); }
#to-title.is-bo2 .to-pf { --bo2-col: max(560px, 44%); }
.to-bo2.has-gun .to-bo2-detail { max-height: calc(100% - 210px - 40cqh); }
.to-bo2:not(.has-detail) .to-bo2-detail { display: none; }
.to-bo2.has-gun .to-bo2-detail { top: calc(100px + 40cqh + 14px); }
#to-title.is-bo2 .to-pf > .to-gun-view.is-hero {
  left: var(--bo2-col); right: 48px; top: 100px; bottom: auto; height: 40cqh; z-index: 3;
  border-color: rgba(243,236,228,.14);
  background: radial-gradient(60% 60% at 50% 45%, rgba(60,34,18,.92), rgba(10,4,2,.95));
}
#to-title.is-bo2 .to-bo2-detail #to-pf-center {
  position: static; width: auto; inset: auto; display: block; pointer-events: auto;
}
#to-title.is-bo2 .to-bo2-detail .to-pf-panel { background: none; border: 0; max-height: none; overflow: visible; padding: 0; }
#to-title.is-bo2 .to-bo2-detail :is(.to-pf-panel-bar, .to-pf-seg, #to-lo-slot-toggle, #to-lo-classes, #to-lo-list, #to-lo-atts, #to-lo-gear, #to-ss-picker, #to-cos-body) { display: none !important; }
#to-title.is-bo2 .to-bo2-detail .to-lo-body { display: block; }
#to-title.is-bo2 .to-bo2-detail #to-pfp-controls > :not(.to-controls-wrap) { display: none; }
.to-bo2.has-lb #to-pf-center, .to-bo2[data-screen="maps"] #to-pf-center { display: none !important; }
.to-bo2-mapshot { margin: 0; }
.to-bo2-mapshot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.to-bo2-mapshot figcaption { margin-top: 10px; color: var(--bo2-soft); font-size: 15px; }
/* The operator stands in the right half, beside the list. */
/* (to the screen's edges below and to the right: a smaller box cut the
   operator off mid-screen when zoomed; the menu and roster sit above it) */
#to-title.is-bo2 .to-char-view { left: 40%; top: 0; bottom: 0; z-index: 1; --char-shift: 0.1; }
.to-bo2.has-detail ~ .to-char-view, body.is-map #to-title.is-bo2 .to-char-view { visibility: hidden; }

.to-bo2-foot { position: absolute; left: 96px; right: 48px; bottom: 30px; z-index: 3; display: flex; align-items: flex-end; gap: 26px; color: var(--bo2-dim); font-size: 15px; pointer-events: none; }
.to-bo2-foot > * { pointer-events: auto; }
.to-bo2-online { font: 600 38px/1 Oswald, sans-serif; letter-spacing: .02em; color: var(--bo2-ink); text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.to-bo2-status { display: block; margin-top: 8px; font: 13px "DM Mono", monospace; color: var(--bo2-soft); }
.to-bo2-status:empty { display: none; }
/* Map downloads (map-preload.js): a thin bar and a line of mono text under
   the online count, only while something is loading (and briefly after). */
.to-bo2-dl { display: none; margin-top: 8px; font: 12px "DM Mono", monospace; color: var(--bo2-soft); text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.to-bo2-dl.is-on { display: block; }
.to-bo2-dl i { display: block; width: 220px; max-width: 60vw; height: 3px; margin-bottom: 6px; border-radius: 2px; background: linear-gradient(90deg, var(--bo2-hot) calc(var(--p, 0) * 100%), rgba(243,236,228,.18) 0); }
.to-bo2-dl.is-done i { background: linear-gradient(90deg, var(--bo2-gold) calc(var(--p, 0) * 100%), rgba(243,236,228,.18) 0); }
.to-bo2-back { display: none; align-items: center; gap: 8px; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--bo2-soft); font: 15px "DM Sans", sans-serif; cursor: pointer; }
.to-bo2-back.is-on { display: flex; }
/* Animations switch (menu-bo2.js), where the key hints used to be. */
.to-bo2-anim { margin-left: auto; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid rgba(243,236,228,.35); border-radius: 10px; background: rgba(3,1,1,.45); color: var(--bo2-soft); font: 15px "DM Sans", sans-serif; cursor: pointer; }
.to-bo2-anim b { font: 600 13px "DM Mono", monospace; color: var(--bo2-ink); }
.to-bo2-anim[aria-checked="false"] b { color: var(--bo2-hot); }
.to-bo2-anim:hover, .to-bo2-anim:focus-visible { color: var(--bo2-ink); border-color: var(--bo2-ink); outline: none; }
/* Off: nothing in the menu or the countdown card moves. */
body.tf-anim-off #to-title *, body.tf-anim-off #to-title *::before, body.tf-anim-off #to-title *::after,
body.tf-anim-off #to-staging, body.tf-anim-off #to-staging * { animation: none !important; transition: none !important; }
.to-bo2 kbd { font: 12px "DM Mono", monospace; padding: 3px 7px; border-radius: 5px; border: 1px solid rgba(243,236,228,.35); color: var(--bo2-ink); background: none; }
body.is-map .to-bo2-anim { visibility: hidden; }
/* trollrunner.net's home carries the socials now; keep the menu clean.
   The radio moves to the top right, clear of the animations switch. */
#to-title.is-bo2:not([hidden]) ~ .to-x-link,
#to-title.is-bo2:not([hidden]) ~ .to-truths-link { display: none; }
#to-title.is-bo2:not([hidden]) ~ .to-radio { right: 48px; bottom: auto; top: 30px; }
#to-title.is-bo2:not([hidden]) ~ .to-radio .to-radio-panel { bottom: auto; top: 48px; }

/* Tablet widths: the 560px detail column left the panel ~160px wide at
   768, wrapping its text a word a line. Pull the list in and give the
   detail pane the rest. */
@container cab (min-width: 761px) and (max-width: 980px) {
  .to-bo2, #to-title.is-bo2 .to-pf { --bo2-col: 404px; }
  .to-bo2-brand { left: 40px; }
  .to-bo2-menu { left: 40px; width: 340px; }
  .to-bo2-menu .tr-menu-title { font-size: 36px; }
  .to-bo2-detail, .to-bo2-panel, #to-title.is-bo2 .to-pf > .to-gun-view.is-hero { right: 24px; }
  .to-bo2-foot { left: 40px; right: 24px; }
}

/* Phones look like the desktop (user, 2026-10-07). Sideways (short and
   wide) or a narrow window: the desktop layout itself, sized down. Upright:
   the desktop's pieces in the desktop's order, stacked: the list first with
   the operator standing beside it, the party row under it; a detail pane
   (Barracks, a class, the board) takes the room under the list. Rows stay
   desktop size. --menu-h is the list's live height (menu-bo2.js). */
@container cab (min-aspect-ratio: 9/10) and ((max-height: 520px) or (max-width: 760px)) {
  .to-bo2, #to-title.is-bo2 .to-pf { --bo2-col: 50%; }
  .to-bo2-brand { left: max(28px, env(safe-area-inset-left)); top: 12px; font-size: 16px; }
  .to-bo2-menu { left: max(30px, calc(env(safe-area-inset-left) + 2px)); top: 40px; width: min(380px, 44%); max-height: calc(100% - 40px - var(--foot-h, 36px) - 16px); }
  .to-bo2-menu .tr-menu-title { font-size: 24px; margin-bottom: 2px; }
  .to-bo2-menu .tr-menu-item { min-height: 24px; line-height: 24px; font-size: 16px; }
  .to-bo2-menu .tr-menu-group { padding-bottom: 4px; }
  .to-bo2-menu .tr-menu-desc { font-size: 13px; min-height: 0; margin-top: 6px; }
  /* A row scrolled half out of the list fades away whole: the 24px rows left
     a sliver of capitals showing right on top of the description. */
  .to-bo2-menu .tr-menu-groups.fade-b { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent calc(100% - 8px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent calc(100% - 8px)); }
  .to-bo2-menu .tr-menu-groups.fade-t.fade-b { -webkit-mask-image: linear-gradient(transparent 8px, #000 34px, #000 calc(100% - 34px), transparent calc(100% - 8px)); mask-image: linear-gradient(transparent 8px, #000 34px, #000 calc(100% - 34px), transparent calc(100% - 8px)); }
  .to-bo2-menu .tr-menu-groups.fade-t { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 34px), transparent calc(100% - 8px)); mask-image: linear-gradient(to top, #000 calc(100% - 34px), transparent calc(100% - 8px)); }
  .to-bo2-party { top: 44px; width: min(320px, calc(50% - 24px)); gap: 4px; }
  .to-bo2-party-lbl { font-size: 14px; }
  .to-bo2-party-row { min-height: 30px; }
  .to-bo2-party-row b { font-size: 16px; }
  .to-bo2-detail, .to-bo2-panel { right: max(20px, env(safe-area-inset-right)); top: 54px; max-height: calc(100% - 54px - var(--foot-h, 36px) - 20px); padding: 12px 14px; }
  .to-bo2.has-gun .to-bo2-detail { top: 54px; }
  #to-title.is-bo2 .to-pf > .to-gun-view.is-hero { display: none; }
  /* below the party box: at 96px a narrow phone stood the head on "Log in to keep your XP" */
  #to-title.is-bo2 .to-char-view { left: 50%; top: 124px; bottom: 16px; --char-shift: 0; }
  /* no room under its feet in this short box: the pill stands to its left */
  #to-title.is-bo2 .to-char-emote { left: 18%; }
  .to-bo2-foot { left: max(44px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); bottom: 8px; gap: 14px; align-items: center; }
  .to-bo2-online { font-size: 22px; }
  .to-bo2-anim { min-height: 30px; font-size: 13px; padding: 0 10px; }
}
/* sideways: the radio up in the corner, above the detail pane */
@media (max-height: 520px) and (min-aspect-ratio: 9/10) {
  #to-title.is-bo2:not([hidden]) ~ .to-radio { top: 8px; right: max(20px, env(safe-area-inset-right)); }
  #to-title.is-bo2:not([hidden]) ~ .to-radio .to-radio-panel { top: 44px; }
}
@container cab (max-aspect-ratio: 9/10) {
  .to-bo2, #to-title.is-bo2 .to-pf { --bo2-col: 12px; }
  .to-bo2-brand { left: 20px; top: calc(16px + env(safe-area-inset-top)); font-size: 18px; }
  .to-bo2-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(3,1,1,.3); }
  body.is-map .to-bo2-bg::after { display: none; }
  .to-bo2-menu { left: 20px; right: 20px; width: auto; top: calc(56px + env(safe-area-inset-top));
    max-height: calc(100% - 56px - 86px - var(--foot-h, 42px) - 40px - env(safe-area-inset-top)); }
  .to-bo2-menu .tr-menu-title { font-size: 32px; margin-bottom: 2px; }
  .to-bo2-menu .tr-menu-item { min-height: 29px; line-height: 29px; font-size: 19px; }
  .to-bo2-menu .tr-menu-group { padding-bottom: 6px; }
  .to-bo2-menu .tr-menu-desc { font-size: 14px; min-height: 40px; }
  /* with a detail pane open, the list keeps to the top part and scrolls */
  .to-bo2.has-detail .to-bo2-menu { max-height: 40%; }
  .to-bo2-party { left: 20px; right: 20px; width: auto; top: calc(56px + env(safe-area-inset-top) + var(--menu-h, 300px) + 8px); }
  .to-bo2-detail, .to-bo2-panel { left: 12px; right: 12px; top: calc(56px + env(safe-area-inset-top) + var(--menu-h, 300px) + 8px); bottom: auto; max-height: calc(100% - 56px - env(safe-area-inset-top) - var(--menu-h, 300px) - 8px - var(--foot-h, 42px) - 30px); padding: 12px; }
  #to-title.is-bo2 .to-bo2-detail .to-lo-detail { background: none; border: 0; padding: 0; box-shadow: none; }
  .to-bo2-panel { bottom: auto; }
  .to-bo2.has-gun .to-bo2-detail { top: calc(56px + env(safe-area-inset-top) + var(--menu-h, 300px) + 8px); }
  #to-title.is-bo2 .to-pf > .to-gun-view.is-hero { display: none; }
  /* the operator stands to the right of the list, as on the desktop */
  #to-title.is-bo2 .to-char-view { left: 46%; top: calc(80px + env(safe-area-inset-top)); bottom: calc(100% - 56px - env(safe-area-inset-top) - var(--menu-h, 300px) + 90px); --char-shift: 0; --char-dist: 1.2; }
  .to-bo2-foot { left: 20px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); align-items: center; }
  .to-bo2-online { font-size: 26px; }
  .to-bo2-anim { min-height: 40px; font-size: 13px; padding: 0 10px; }
}
@media (hover: none) { .to-bo2-back kbd { display: none; } .to-bo2-back { min-height: 44px; font: 600 16px Oswald, sans-serif; letter-spacing: .06em; text-transform: uppercase; } }

/* Owner badge (troll_runner): stands where a level would. The crowned troll
   from the site's PFP icon, gold OWNER lettering, a slow shine across it. */
.is-owner {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 2px; border-radius: 999px;
  background: linear-gradient(135deg, #3b2700, #150c00);
  border: 1px solid #ffcf4d;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 14px rgba(255,190,40,.35);
  font: 700 12px/1 Oswald, "Arial Narrow", sans-serif; font-style: normal;
  letter-spacing: .16em; text-transform: uppercase;
  color: #ffd76a; text-shadow: 0 1px 0 #5a3a00, 0 0 8px rgba(255,200,60,.45);
  vertical-align: middle;
}
.is-owner::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: #2a1a4a url("../../images/icons/pfp.png") 50% 28% / 190% no-repeat;
  box-shadow: 0 0 0 1px #ffcf4d;
}
.is-owner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,240,190,.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: to-owner-shine 3.6s ease-in-out infinite;
}
@keyframes to-owner-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .is-owner::after { animation: none; display: none; } }

/* Rank in front of a scoreboard name (prestige phase 2, rank-icons.js). */
.to-sb-rank { display: inline-flex; align-items: center; gap: 3px; margin-right: 7px; vertical-align: middle; }
.to-sb-rank > svg { flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.to-sb-rank > b { font: 600 11px "DM Mono", monospace; color: #ffd27a; min-width: 1.4em; }
.to-sb-owner { padding: 1px 7px 1px 1px; gap: 4px; font-size: 9.5px; letter-spacing: .12em; }
.to-sb-owner::before { width: 14px; height: 14px; }
/* Your own rank: icon in front of the level (loadout strip, BO2 party row). */
.has-rank-icon { display: inline-flex; align-items: center; gap: 5px; }
.has-rank-icon > svg { flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }

/* U Mad Bro? hero ability chip (game.js heroHud): key, ability name,
   cooldown/meter, and a fill bar along the bottom. Bright when ready. */
.to-gear-chip.to-hero-chip { position: relative; overflow: hidden; pointer-events: auto; cursor: pointer; }
.to-hero-chip kbd { font-family: "DM Mono", monospace; font-size: 9px; color: #0d1210; background: #b6ff3c; border-radius: 3px; padding: 0 4px; }
.to-hero-chip kbd:empty { display: none; }
.to-gear-chip.to-hero-chip b {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; padding: 0; border-radius: 0;
  background: #b6ff3c; transform-origin: 0 50%;
}
.to-gear-chip.to-hero-chip.is-ready { opacity: 1; border-color: #b6ff3c; background: rgba(182,255,60,.16); }
.to-gear-chip.to-hero-chip.is-ready i { color: #b6ff3c; }
.to-touch-streak.is-hero-ready { box-shadow: 0 0 0 2px #b6ff3c; }

/* Profile card (prestige phase 4, profile-card.js): BO2's calling card.
   Emblem (the account PFP) | calling card with [CLAN] name | rank + level,
   then the headline six. The emblem is square and the card 3:1, so one
   height (--h) sizes the whole top row from the card's own width. */
.tf-card { container-type: inline-size; color: #f3ece4; font-family: "DM Sans", system-ui, sans-serif; }
.tf-card-top {
  --rank-w: 100px; --gap: 6px;
  --h: calc((100cqw - var(--rank-w) - 2 * var(--gap)) / 4);
  display: grid; grid-template-columns: var(--h) calc(var(--h) * 3) var(--rank-w); gap: var(--gap); height: var(--h);
}
.tf-card-emblem, .tf-card-banner, .tf-card-rank {
  border: 1px solid rgba(255,176,32,.45); border-radius: 6px; overflow: hidden;
  background: #120806; box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.tf-card-emblem img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tf-card-banner { position: relative; background-size: cover; background-position: center; }
.tf-card-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 48%);
}
.tf-card-id {
  position: absolute; left: 10px; right: 10px; bottom: 6px; z-index: 1;
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  font: 600 clamp(14px, 5cqw, 26px)/1.1 Oswald, "Arial Narrow", sans-serif; letter-spacing: .04em;
  text-shadow: 0 2px 6px rgba(0,0,0,.95);
}
.tf-card-clan { color: #ffd27a; flex: none; }
.tf-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-card-rank {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(180deg, #2a1608, #0d0603); text-align: center; padding: 4px;
}
.tf-card-rank > svg { flex: none; width: min(64px, 78%); height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.tf-card-rank > b { font: 600 15px "DM Mono", monospace; color: #ffd27a; }
.tf-card-rank > small { font: 10px "DM Mono", monospace; color: #c9b8a6; line-height: 1.1; }
.tf-card-rank > .is-owner { font-size: 10px; padding-right: 8px; }
.tf-card-stats {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0;
}
.tf-card-stats > div {
  padding: 8px 6px; border-radius: 6px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(243,236,228,.1); text-align: center; min-width: 0;
}
.tf-card-stats dt { font: 10px "DM Mono", monospace; color: #c9b8a6; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-card-sub { margin: 12px 0 6px; font: 600 11px "DM Mono", monospace; color: #c9b8a6; text-transform: uppercase; letter-spacing: .08em; }
.tf-card-stats dd { margin: 3px 0 0; font: 600 18px Oswald, sans-serif; color: #f3ece4; }
.tf-card-note { margin: 10px 0 0; font: 13px "DM Mono", monospace; color: #c9b8a6; }
@container (max-width: 520px) {
  .tf-card-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 420px) {
  .tf-card-top { --rank-w: 64px; --gap: 4px; }
  .tf-card-rank > b { font-size: 12px; }
  .tf-card-rank > small { display: none; }
  .tf-card-id { left: 6px; bottom: 4px; }
}

/* The card as a pop-up over anything (menus, the paused scoreboard, chat). */
.tf-card-overlay {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
  padding: 16px; box-sizing: border-box; background: rgba(3,1,1,.72); backdrop-filter: blur(3px);
}
.tf-card-overlay[hidden] { display: none; }
.tf-card-dialog {
  width: min(760px, 100%); padding: 16px; box-sizing: border-box; border-radius: 12px;
  background: rgba(10,4,2,.94); border: 1px solid rgba(243,236,228,.16); box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.tf-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tf-card-actions button {
  min-height: 36px; padding: 0 16px; border-radius: 6px; cursor: pointer;
  font: 600 13px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #f3ece4; background: rgba(255,255,255,.06); border: 1px solid rgba(243,236,228,.2);
}
.tf-card-actions button:hover, .tf-card-actions button:focus-visible { color: #ff8a1f; border-color: #ff8a1f; outline: none; }
.tf-card-actions button[hidden] { display: none; }

/* Barracks (menu-bo2.js): your card up top, then the calling cards or the
   clan tag box under it. */
.to-bo2.has-card #to-pf-center { display: none !important; }
/* A perk tier (menu-bo2.js perkScreen): the perk, big, in BO2's tier colour. */
.to-bo2.has-perk #to-pf-center { display: none !important; }
.to-bo2-perk[hidden] { display: none; }
.to-bo2-perk { display: flex; align-items: center; gap: 18px; }
.to-bo2-perk-icon {
  flex: none; width: 86px; height: 86px; padding: 14px; box-sizing: border-box; border-radius: 14px;
  color: #0d1410; background: var(--perk);
  box-shadow: 0 8px 24px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.25);
}
.to-bo2-perk-icon.is-empty { background: rgba(255,255,255,.06); border: 1px dashed rgba(243,236,228,.3); }
.to-bo2-perk-icon svg { width: 100%; height: 100%; display: block; }
.to-bo2-perk small { display: block; font: 12px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--perk); }
.to-bo2-perk b { display: block; font: 600 26px Oswald, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #f3ece4; }
.to-bo2-perk p { margin: 4px 0 0; font: 14px "DM Sans", sans-serif; color: #d8cbbd; line-height: 1.4; }
.to-bo2-perk em { display: block; margin-top: 6px; font: normal 12px "DM Mono", monospace; color: #ff8a1f; }
@media (max-width: 760px) { .to-bo2-perk-icon { width: 64px; height: 64px; padding: 10px; } .to-bo2-perk b { font-size: 21px; } }
.to-bo2-card[hidden], .to-bo2-clan[hidden], .to-bo2-card-share[hidden] { display: none; }
/* Under your card: Share on X, Save as photo (menu/card-share.js). */
.to-bo2-card-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.to-bo2-card-share button {
  min-height: 36px; padding: 0 16px; border-radius: 6px; cursor: pointer;
  font: 600 13px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #f3ece4; background: rgba(255,255,255,.06); border: 1px solid rgba(243,236,228,.2);
}
.to-bo2-card-share button:hover, .to-bo2-card-share button:focus-visible { color: #ff8a1f; border-color: #ff8a1f; outline: none; }
.to-bo2-cardnote { margin: 12px 0 0; font-size: 14px; color: var(--bo2-soft); }
.to-bo2-clan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.to-bo2-clan label { font: 500 15px Oswald, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--bo2-soft); }
.to-bo2-clan input {
  width: 6.5em; min-height: 36px; padding: 0 10px; border-radius: 6px; box-sizing: border-box;
  font: 600 18px "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
  color: #ffd27a; background: rgba(0,0,0,.5); border: 1px solid rgba(255,176,32,.55);
}
.to-bo2-clan input:focus { outline: 2px solid var(--bo2-hot); outline-offset: 1px; }
.to-bo2-clan button {
  min-height: 36px; padding: 0 14px; border-radius: 6px; cursor: pointer;
  font: 600 13px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bo2-ink); background: rgba(255,138,31,.2); border: 1px solid var(--bo2-hot);
}
.to-bo2-clan small { flex-basis: 100%; color: var(--bo2-dim); font: 12px "DM Mono", monospace; }

/* ---- Match intro cinematic (match-intro.js): TDM + S&D openers ----
   Everything else on the HUD steps aside while it plays; the overlay is
   letterbox bars, a per-shot colour grade, team plates and callouts. */
.to-intro-on #to-hud > *:not(.to-intro) { visibility: hidden !important; }
.to-intro-on #to-hud::before { display: none; }
.to-intro-on #to-touch { visibility: hidden; }
.to-intro {
  position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden;
  font-family: "Oswald", sans-serif; color: #f4f7f2;
}
.to-intro-bar {
  position: absolute; left: 0; right: 0; height: 11.5%; background: #000; z-index: 3;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.to-intro-bar-t { top: 0; transform: translateY(-100%); }
.to-intro-bar-b { bottom: 0; transform: translateY(100%); }
.to-intro.is-on .to-intro-bar { transform: translateY(0); }
.to-intro.is-on.is-opening .to-intro-bar-t { transform: translateY(-100%); }
.to-intro.is-on.is-opening .to-intro-bar-b { transform: translateY(100%); }

/* Colour grade per shot: cold steel for the establishing shot, blood for
   the enemy, warm gold for your squad. */
.to-intro-grade {
  position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.55));
}
.to-intro.is-on .to-intro-grade { opacity: 1; }
.to-intro[data-shot="title"] .to-intro-grade { background: radial-gradient(ellipse at 50% 50%, rgba(40,70,110,.12) 30%, rgba(4,8,18,.66)); }
.to-intro[data-shot="enemy"] .to-intro-grade { background: radial-gradient(ellipse at 50% 45%, rgba(255,40,30,.10) 25%, rgba(60,0,0,.7)); }
.to-intro[data-shot="squad"] .to-intro-grade { background: radial-gradient(ellipse at 50% 60%, rgba(255,200,90,.10) 30%, rgba(30,18,0,.6)); }
.to-intro[data-shot="hero"] .to-intro-grade { background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,.45)); }
.to-intro.is-opening .to-intro-grade { opacity: 0; }

/* Whip pan: speed streaks and a white pop on the cut. */
.to-intro-streaks {
  position: absolute; inset: -10% -50%; z-index: 2; opacity: 0;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.22) 7px 8px, transparent 8px 19px, rgba(255,255,255,.1) 19px 20px);
}
.to-intro[data-shot="whip"] .to-intro-streaks { animation: to-intro-streak var(--intro-whip, .5s) linear; }
@keyframes to-intro-streak {
  0% { opacity: 0; transform: translateX(30%) scaleY(1); }
  40%, 60% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-30%) scaleY(1.6); }
}
.to-intro-flash { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; }
.to-intro[data-shot="whip"] .to-intro-flash { animation: to-intro-flash var(--intro-whip, .5s) ease-out; }
@keyframes to-intro-flash { 0%, 38% { opacity: 0; } 50% { opacity: .85; } 100% { opacity: 0; } }

.to-intro-vs {
  position: absolute; left: 50%; top: 50%; z-index: 7; opacity: 0;
  transform: translate(-50%, -50%) scale(3);
  font-size: clamp(90px, 18vw, 220px); font-weight: 700; font-style: italic; letter-spacing: -.04em;
  color: #fff; -webkit-text-stroke: 3px #000;
  text-shadow: 6px 6px 0 #ff4d3d, -6px -6px 0 #a98cf0, 0 0 40px rgba(0,0,0,.6);
}
.to-intro[data-shot="whip"] .to-intro-vs,
.to-intro[data-shot="squad"]:not(.is-short) .to-intro-vs { animation: to-intro-vs .9s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes to-intro-vs {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(3) rotate(-8deg); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(-4deg); }
}

/* Establishing title. */
.to-intro-title {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 4; text-align: center;
  transform: translateY(-50%); opacity: 0; text-shadow: 0 3px 22px rgba(0,0,0,.9);
}
.to-intro-title.is-on { animation: to-intro-title 1.2s ease-out forwards; }
@keyframes to-intro-title {
  0% { opacity: 0; letter-spacing: .6em; }
  25% { opacity: 1; }
  100% { opacity: 1; letter-spacing: .14em; }
}
.to-intro-kicker { margin: 0; font-size: 14px; letter-spacing: .4em; text-transform: uppercase; color: #9fe7ff; }
.to-intro-head {
  margin: 6px 0; font-size: clamp(40px, 8vw, 92px); line-height: 1; font-weight: 700;
  text-transform: uppercase; letter-spacing: inherit;
}
.to-intro-sub { margin: 0; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: #d7ded2; }

/* Team plate, lower left: kicker, a huge team name, the headcount. */
.to-intro-plate {
  --intro-accent: #fff;
  position: absolute; left: 6%; bottom: 15%; z-index: 4;
  display: flex; flex-direction: column; padding-left: 14px;
  border-left: 5px solid var(--intro-accent);
  opacity: 0; transform: translateX(-30px);
  text-shadow: 0 2px 16px rgba(0,0,0,.85);
}
.to-intro-plate.is-on { animation: to-intro-plate .5s cubic-bezier(.2,.9,.3,1.1) forwards; }
@keyframes to-intro-plate { to { opacity: 1; transform: translateX(0); } }
.to-intro-plate-kicker { font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--intro-accent); }
.to-intro-plate-name {
  font-size: clamp(38px, 7vw, 84px); line-height: .95; font-weight: 700; text-transform: uppercase; font-style: italic;
}
.to-intro-plate-sub { margin-top: 4px; font: 500 12px/1.2 "DM Mono", ui-monospace, monospace; letter-spacing: .1em; color: #d7ded2; }

/* Callouts over each troll: a bracket, the name, a cheap shot. */
.to-intro-tags { position: absolute; inset: 0; z-index: 4; }
.to-intro-tag {
  position: absolute; left: 0; top: 0; margin: -46px 0 0 -2px;
  display: flex; flex-direction: column; padding: 3px 8px 4px 10px;
  border-left: 2px solid #fff; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,0));
  white-space: nowrap; animation: to-intro-tag .32s cubic-bezier(.2,1.3,.4,1);
  will-change: transform;
}
.to-intro-tag::before {
  content: ""; position: absolute; left: -2px; bottom: -14px; width: 2px; height: 14px; background: #fff;
}
.to-intro-tag strong { font-size: 17px; line-height: 1.1; font-weight: 600; letter-spacing: .03em; }
.to-intro-tag span { font: 500 10.5px/1.3 "DM Mono", ui-monospace, monospace; color: #d7ded2; }
.to-intro-tag.is-enemy { border-left-color: #ff4d3d; }
.to-intro-tag.is-enemy::before { background: #ff4d3d; }
.to-intro-tag.is-enemy strong { color: #ff8a7d; }
.to-intro-tag.is-self strong { color: #ffd76a; }
@keyframes to-intro-tag {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

.to-intro-clock {
  position: absolute; right: 5%; top: 13.5%; z-index: 5; margin: 0;
  font: 500 12px/1 "DM Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase;
  color: #d7ded2; text-shadow: 0 1px 8px #000;
}
.to-intro-skip {
  position: absolute; right: 5%; bottom: 13.5%; z-index: 5; pointer-events: auto;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.45); color: #f4f7f2;
  font: 500 12px/1 "Oswald", sans-serif; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 10px; border-radius: 6px; cursor: pointer;
}
.to-intro-skip kbd { font: inherit; opacity: .7; margin-left: 4px; }
.to-intro-skip:hover, .to-intro-skip:focus-visible { background: rgba(255,255,255,.14); outline: none; border-color: #fff; }

@media (max-width: 760px) {
  .to-intro-plate { bottom: 14%; left: 5%; }
  .to-intro-tag strong { font-size: 14px; }
  .to-intro-tag span { display: none; }
  .to-intro-skip kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .to-intro *, .to-intro { animation-duration: .01s !important; transition: none !important; }
}
.to-intro.is-cut .to-intro-flash { animation: to-intro-cut .16s ease-out; }
@keyframes to-intro-cut { 0% { opacity: .55; } 100% { opacity: 0; } }

/* ---- Zombies run HUD (view/zombies-hud.js), after Roblox's Zombie Rush
   Survival: chunky outlined type, bright cards, cash bottom-left. ---- */
body.to-zombies .to-hud-top > .to-hud-wave,
body.to-zombies .to-hud-top > .to-hud-hostiles,
body.to-zombies .to-hud-top > .to-hud-score { visibility: hidden; }
body.to-zombies .to-dmg-num.is-word { color: #7dff4f; font-size: 17px; font-weight: 800; letter-spacing: .02em; -webkit-text-stroke: 1px #0d2a06; }
.zh { position: absolute; inset: 0; pointer-events: none; font-family: "Oswald", sans-serif; color: #fff; }
.zh[hidden] { display: none; }
.zh b, .zh strong { font-weight: 700; }
.zh-top {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 22px; white-space: nowrap;
  font-size: 30px; letter-spacing: .01em; -webkit-text-stroke: 1.2px #10141a; paint-order: stroke fill;
}
.zh-left { font-size: 26px; }
.zh-left b { color: #ffe23a; }
.zh-wave { font-size: 32px; }
.zh-skip {
  position: absolute; top: 10px; right: 18px; pointer-events: auto; cursor: pointer;
  display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center;
  padding: 7px 14px 7px 16px; border-radius: 6px; border: 2px solid #4b0a0a;
  background: linear-gradient(#ef2b2b, #b70f14); color: #fff;
  font: 700 21px/1.1 "Oswald", sans-serif; letter-spacing: .02em;
  box-shadow: 0 3px 0 #4b0a0a, 0 6px 14px rgba(0,0,0,.35);
}
.zh-skip[hidden] { display: none; }
.zh-skip { row-gap: 2px; }
.zh-skip .zh-key { grid-row: span 2; }
.zh-skip-s { grid-column: 1; font: 600 12px/1.1 "DM Sans", sans-serif; opacity: .9; }
.zh-skip:active { transform: translateY(2px); box-shadow: 0 1px 0 #4b0a0a; }
.zh-col { position: absolute; top: 240px; display: flex; flex-direction: column; gap: 9px; pointer-events: none; }
.zh-up { left: 18px; }
.zh-col-h { text-align: center; font-size: 21px; -webkit-text-stroke: 1px #10141a; paint-order: stroke fill; }
.zh-card {
  position: relative; width: 96px; height: 100px; padding: 3px 4px 4px; pointer-events: auto; cursor: pointer;
  border-radius: 8px; border: 2px solid rgba(255,255,255,.85); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-family: "Oswald", sans-serif; color: #fff; text-align: center;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.3);
  background-image:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.28), transparent 62%),
    repeating-linear-gradient(60deg, rgba(255,255,255,.07) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.07) 0 2px, transparent 2px 13px);
  transition: transform .08s, filter .15s;
}
.zh-card-hp { background-color: #24b53c; }
.zh-card-gun { background-color: #1f5fd6; }
.zh-card-melee { background-color: #7b8189; }
.zh-card:active { transform: scale(.96); }
.zh-card.is-poor { filter: saturate(.35) brightness(.72); }
.zh-card.is-max { filter: saturate(.6) brightness(.85); }
.zh-card.is-max .zh-price { color: #ffe23a; }
.zh-card.is-no { animation: zh-no .32s; }
.zh-card.is-bought { animation: zh-bought .45s; }
@keyframes zh-no { 0%, 100% { translate: 0; } 25% { translate: -5px; } 75% { translate: 5px; } }
@keyframes zh-bought { 0% { box-shadow: 0 0 0 0 rgba(255,226,58,.95); } 100% { box-shadow: 0 0 0 16px rgba(255,226,58,0); } }
/* Price, icon, tier line, name: all in flow, top to bottom, so none of
   them can land on another; the icon takes whatever height is left. */
.zh-price {
  flex: none; align-self: flex-end; line-height: 1; font-size: 18px; color: #7dff4f;
  -webkit-text-stroke: 1.1px #0b2a05; paint-order: stroke fill;
}
.zh-icon { flex: 1 1 0; min-height: 0; width: 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.zh-icon svg { display: block; height: 100%; width: auto; margin: 0 auto; }
.zh-sub, .zh-title { flex: none; position: relative; width: 100%; padding: 0 1px; line-height: 1; -webkit-text-stroke: 1px #10141a; paint-order: stroke fill; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; white-space: nowrap; }
.zh-title { margin-bottom: .18em; }
.zh-title.is-wrap { white-space: normal; text-overflow: clip; line-height: 1.02; }
.zh-sub { font-size: 13px; }
.zh-title { font-size: 16px; }
.zh-key {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px;
  background: rgba(0,0,0,.55); color: #fff; font: 700 11px/1 "DM Mono", monospace; -webkit-text-stroke: 0;
}
.zh-card .zh-key { position: absolute; top: 5px; left: 5px; }
.zh-cash {
  position: absolute; left: 18px; bottom: 74px; display: flex; align-items: baseline; gap: 8px;
  -webkit-text-stroke: 1.4px #0b2a05; paint-order: stroke fill;
}
.zh-cash-n { order: -1; font-size: 40px; line-height: 1; color: #7dff4f; }
.zh-gain { font-size: 22px; color: #7dff4f; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.zh-gain.is-on { opacity: 1; transform: none; }
.zh-feed {
  position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 19px; letter-spacing: .02em; -webkit-text-stroke: 1.1px #10141a; paint-order: stroke fill; white-space: nowrap;
}
.zh-feed-l { animation: zh-feed-in .18s ease-out; transition: opacity .45s; }
.zh-feed-l b { color: #7dff4f; }
.zh-feed-l.is-out { opacity: 0; }
@keyframes zh-feed-in { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.zh-banner {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font-size: 54px; color: #ffe23a; -webkit-text-stroke: 2px #2a1c00; paint-order: stroke fill;
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.zh-banner.is-final { color: #ff4b3a; -webkit-text-stroke-color: #2a0400; }
.zh-banner.is-on { animation: zh-banner 2.4s ease-out forwards; }
@keyframes zh-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(.96); }
  20% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}
.zh.is-downed::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(150,0,0,.55) 100%);
  animation: zh-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes zh-pulse { from { opacity: .65; } to { opacity: 1; } }
.zh-down { position: absolute; left: 50%; top: 15%; transform: translateX(-50%); text-align: center; width: min(320px, 70vw); }
.zh-down[hidden] { display: none; }
.zh.is-downed .zh-banner { visibility: hidden; }
.zh-down-t { font-size: 30px; color: #ff4b3a; -webkit-text-stroke: 1.4px #2a0400; paint-order: stroke fill; text-transform: uppercase; }
.zh-down-bar { height: 10px; margin: 6px 0; border-radius: 5px; background: rgba(0,0,0,.55); border: 1.5px solid rgba(255,255,255,.6); overflow: hidden; }
.zh-down-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff2b2b, #ff8a3a); transform-origin: left; }
.zh-down-k { font-size: 18px; -webkit-text-stroke: 1px #10141a; paint-order: stroke fill; }
@media (max-width: 900px), (max-height: 520px) {
  .zh-top { font-size: 22px; gap: 14px; top: 6px; }
  .zh-left { font-size: 19px; }
  .zh-wave { font-size: 24px; }
  .zh-col { top: 238px; gap: 6px; }
  .zh-col-h { font-size: 15px; }
  .zh-card { width: 78px; height: 80px; padding: 2px 3px 3px; }
  .zh-price { font-size: 14px; }
  .zh-sub { font-size: 11px; }
  .zh-title { font-size: 13px; }
  .zh-card .zh-key { display: none; }
  .zh-cash { bottom: 64px; left: 12px; }
  .zh-cash-n { font-size: 30px; }
  .zh-gain { font-size: 17px; }
  .zh-feed { font-size: 15px; bottom: 96px; }
  .zh-banner { font-size: 40px; }
  .zh-down-t { font-size: 22px; }
  .zh-down-k { font-size: 14px; }
  .zh-skip { font-size: 16px; top: 6px; right: 10px; padding: 5px 10px; }
  .zh-skip .zh-key { display: none; }
}
/* The touch layout: the minimap shrinks into the top-left and the move stick
   owns the bottom-left, so the cards go in a row under the minimap with the
   cash under them, all above the stick and the left trigger. */
body.to-touch-play .zh-up {
  left: calc(var(--sl) + 10px); top: calc(12px + 96px * var(--k));
  display: grid; grid-template-columns: repeat(3, auto); gap: 0 calc(6px * var(--k));
}
body.to-touch-play .zh-col-h { grid-column: 1 / -1; text-align: left; font-size: calc(13px * var(--k)); line-height: 1.3; }
body.to-touch-play .zh-card { width: calc(70px * var(--k)); height: calc(70px * var(--k)); border-radius: 6px; padding: 2px 3px 3px; }
body.to-touch-play .zh-card .zh-key { display: none; }
body.to-touch-play .zh-price { font-size: calc(12px * var(--k)); }
body.to-touch-play .zh-sub { font-size: calc(9px * var(--k)); }
body.to-touch-play .zh-title { font-size: calc(11px * var(--k)); }
body.to-touch-play .zh-cash {
  left: calc(var(--sl) + 12px); top: calc(18px + 183px * var(--k)); bottom: auto;
}
body.to-touch-play .zh-skip { right: calc(var(--sr) + 64px); top: 8px; }
body.to-touch-play .zh-cash-n { font-size: calc(28px * var(--k)); }
body.to-touch-play .zh-gain { font-size: calc(16px * var(--k)); }
@media (prefers-reduced-motion: reduce) {
  .zh-banner.is-on, .zh-feed-l, .zh-card.is-no, .zh-card.is-bought, .zh.is-downed::before { animation: none; }
  .zh-banner.is-on { opacity: 1; }
}

/* Zombies P2: the Deployables column (right), the placing chip, and the
   health bars in the world (view/zombies-bars.js). */
.zh-dep { right: 18px; align-items: center; }
.zh-col-hrow { display: flex; flex-direction: column; align-items: center; }
.zh-col-s { font-size: 12px; line-height: 1.2; color: #e8eaee; opacity: .85; -webkit-text-stroke: .6px #10141a; paint-order: stroke fill; }
.zh-card-turret { background-color: #1aa3c9; }
.zh-card-barricade { background-color: #d9a514; }
.zh-card-barrel { background-color: #b23ad0; }
.zh-card.is-placing { border-color: #ffe23a; box-shadow: 0 0 0 3px rgba(255,226,58,.85), 0 3px 0 rgba(0,0,0,.45); }
/* a controller: d-pad prompts instead of the number keys (view/zombies-hud.js) */
.zh-padhint { display: none; }
.zh.is-pad .zh-padhint { display: block; position: absolute; left: 100%; top: 8px; margin-left: 10px; white-space: nowrap; }   /* beside the header: in the flow it pushed the cards into the cash */
.zh-key:empty { display: none; }
.zh.is-pad .zh-card.is-sel { border-color: #ffe23a; box-shadow: 0 0 0 3px rgba(255,226,58,.7), 0 3px 0 rgba(0,0,0,.45); }
.zh.is-pad .zh-card.is-sel .zh-key { display: inline-grid; background: #ffe23a; color: #1a1400; }
.zh-chip {
  position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; pointer-events: auto;
  border-radius: 8px; background: rgba(12,16,22,.72); border: 1.5px solid rgba(61,255,106,.7);
  font-size: 17px; white-space: nowrap; -webkit-text-stroke: .8px #10141a; paint-order: stroke fill;
}
.zh-chip[hidden] { display: none; }
.zh-chip.is-bad { border-color: rgba(255,59,59,.8); }
.zh-chip-s { font: 600 12px/1 "DM Sans", sans-serif; -webkit-text-stroke: 0; color: #9fffb4; }
.zh-chip.is-bad .zh-chip-s { color: #ff9a9a; }
.zh-chip-s:empty { display: none; }
.zh-chip-b {
  font: 700 14px/1 "Oswald", sans-serif; color: #fff; cursor: pointer; padding: 5px 10px; border-radius: 5px;
  border: 1.5px solid rgba(0,0,0,.5); background: #2a7d3a; box-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.zh-chip-b.is-cancel { background: #8c1d1d; }
.zh-chip-b:active { transform: translateY(1px); }
/* with a mouse locked to the game a click places: the Place button is for touch */
body:not(.to-touch-play) .zh-chip-b.is-place { display: none; }
.zh-bars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.zh-wbar { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; will-change: transform; }
.zh-wbar-track { width: 52px; height: 6px; border-radius: 3px; background: rgba(20,20,20,.7); border: 1px solid rgba(0,0,0,.6); overflow: hidden; }
.zh-wbar-track i { display: block; height: 100%; background: #ff8a1f; transform-origin: left; }
.zh-wbar.is-deploy .zh-wbar-track { width: 60px; }
.zh-wbar.is-deploy .zh-wbar-track i { background: #3dff6a; }
.zh-wtag { font-size: 14px; line-height: 1; color: #ffe23a; -webkit-text-stroke: 1px #10141a; paint-order: stroke fill; }
@media (max-width: 900px), (max-height: 520px) {
  .zh-col-s { font-size: 10px; }
  .zh-chip { top: 48px; font-size: 14px; }
}
/* touch: the deployables go in a second row of cards beside the upgrades */
body.to-touch-play .zh-dep {
  right: auto; left: calc(var(--sl) + 26px + 3 * 70px * var(--k) + 2 * 6px * var(--k));
  top: calc(12px + 96px * var(--k));
  display: grid; grid-template-columns: repeat(3, auto); gap: 0 calc(6px * var(--k)); align-items: start;
}
body.to-touch-play .zh-col-hrow { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 6px; }
body.to-touch-play .zh-col-s { font-size: calc(9px * var(--k)); }
body.to-touch-play .zh-chip { top: auto; bottom: calc(var(--sb) + 54px); }
/* touch: the card rows fill the middle band, so the big wave call goes up
   between the wave count and the rows */
body.to-touch-play .zh-banner { top: calc(46px + 25px * var(--k)); font-size: calc(36px * var(--k)); }
/* touch, down: nothing to buy or put down, and the bleed-out needs the room */
body.to-touch-play .zh.is-downed .zh-col { visibility: hidden; }

/* Zombies P3: a boss's bar, in the top line where "in N waves" was. */
.zh-boss { display: inline-flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 220px; align-self: center; }
.zh-boss[hidden], .zh-left[hidden] { display: none; }
.zh-boss-n { font-size: 17px; line-height: 1; color: #ff6b5a; text-align: left; -webkit-text-stroke: 1px #2a0400; paint-order: stroke fill; }
.zh-boss.is-final .zh-boss-n { color: #ff3b2b; }
.zh-boss-bar { display: block; height: 11px; border-radius: 6px; background: rgba(0,0,0,.6); border: 1.5px solid rgba(255,255,255,.7); overflow: hidden; }
.zh-boss-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b3121b, #ff4b2b); transform-origin: left; transition: transform .12s; }
@media (max-width: 900px), (max-height: 520px) {
  .zh-boss { min-width: 150px; }
  .zh-boss-n { font-size: 13px; }
  .zh-boss-bar { height: 8px; }
}

/* Zombies co-op: the room code box without the bot options. */
.to-lo-pvp.is-zombies .to-lo-nobots { display: none; }

/* Zombies co-op: the skip vote, and holding X by a downed teammate. */
.zh-skip.is-voted { filter: saturate(.55) brightness(.9); }
.zh-revive { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); text-align: center; width: min(300px, 70vw); }
.zh-revive[hidden] { display: none; }
.zh-revive-t { font-size: 20px; -webkit-text-stroke: 1px #10141a; paint-order: stroke fill; }
.zh-revive .zh-down-bar i { background: linear-gradient(90deg, #39d353, #a6f05a); }
@media (max-width: 900px), (max-height: 520px) {
  .zh-revive-t { font-size: 15px; }
}

/* A TROLLS body on: its own head, so the face and covering cards are locked. */
.to-cos-faces.is-locked .to-cos-face { opacity: .4; cursor: not-allowed; }
.to-cos-faces.is-locked .to-cos-face:hover { background: rgba(255,255,255,.04); }

/* Settings > Show FPS (core/fps-meter.js): top centre, above everything (the
   corners hold the brand, the music button and the minimap). */
.to-fps {
  position: fixed; z-index: 9999; pointer-events: none;
  top: max(3px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.55);
  font: 600 11px/1.35 "DM Mono", ui-monospace, monospace; letter-spacing: .02em; color: #e8e8e8; white-space: nowrap;
}
.to-fps[hidden] { display: none; }
.to-fps[data-band="good"] { color: #7fe066; }
.to-fps[data-band="ok"] { color: #ffc94d; }
.to-fps[data-band="bad"] { color: #ff6b5e; }

/* ── Zombies hub (modes/zombies/hub.js): the chips down the left like Zombie
   Rush's Credits / Invite Friends, the pad panel over the bottom centre. ── */
.to-lo-modebtn[data-mode="zhub"], .to-lo-modegroup:has(+ [data-mode="zhub"]) { display: none; }
.zhb { position: absolute; inset: 0; pointer-events: none; font-family: "Oswald", sans-serif; color: #fff; }
.zhb[hidden], .zhb [hidden] { display: none !important; }
.zhb-chips { position: absolute; left: 18px; top: 46%; display: flex; flex-direction: column; gap: 10px; }
.zhb-chip {
  display: flex; align-items: center; gap: 8px; min-width: 190px; padding: 8px 16px;
  border-radius: 10px; border: 2px solid #3b1f05; font: 700 21px/1.1 "Oswald", sans-serif; letter-spacing: .01em;
  color: #fff; -webkit-text-stroke: 1px #3b1f05; paint-order: stroke fill;
  box-shadow: 0 3px 0 #3b1f05, 0 8px 18px rgba(0,0,0,.3);
}
.zhb-online { background: linear-gradient(#2a3a5c, #18233c); border-color: #0b1224; -webkit-text-stroke-color: #0b1224; box-shadow: 0 3px 0 #0b1224, 0 8px 18px rgba(0,0,0,.3); }
.zhb-online-n { color: #7dff4f; }
.zhb-dot { width: 10px; height: 10px; border-radius: 50%; background: #7dff4f; box-shadow: 0 0 8px #7dff4f; }
.zhb-invite { pointer-events: auto; cursor: pointer; background: linear-gradient(#ffb02e, #f07a12); }
.zhb-invite:active { transform: translateY(2px); box-shadow: 0 1px 0 #3b1f05; }
.zhb-invite:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.zhb-pad {
  position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); min-width: 320px; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 22px 12px; border-radius: 12px; text-align: center;
  background: linear-gradient(rgba(27,47,110,.92), rgba(15,26,62,.92)); border: 2px solid #7fa8ff;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.zhb-pad-h { font-size: 28px; line-height: 1.1; color: #ffd84a; -webkit-text-stroke: 1px #060b1c; paint-order: stroke fill; }
.zhb-pad-s { margin-top: 4px; font: 600 15px/1.3 "DM Sans", sans-serif; color: #dfe8ff; }
.zhb-hold { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; font-size: 18px; }
.zhb-key {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 5px;
  background: #fff; color: #0f1a3e; font: 700 14px/1 "DM Mono", monospace;
}
.zhb-bar { position: relative; display: block; width: 90px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; }
.zhb-bar > i { position: absolute; inset: 0 auto 0 0; width: 0; background: #7dff4f; }
.zhb-toast {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 10px 18px; border-radius: 10px; background: rgba(10,16,34,.9); border: 1px solid rgba(255,255,255,.25);
  font: 600 16px/1.35 "DM Sans", sans-serif; text-align: center; overflow-wrap: anywhere;
}
@media (max-width: 900px), (max-height: 520px) {
  .zhb-chips { top: 30%; left: 12px; gap: 7px; }
  .zhb-chip { min-width: 0; padding: 5px 11px; font-size: 16px; }
  .zhb-pad { bottom: 108px; padding: 7px 14px 9px; min-width: 0; }
  .zhb-pad-h { font-size: 21px; }
  .zhb-pad-s { font-size: 13px; }
}
/* Zombies hub: the Credits chip and the kiosk screens (view/zombies-kiosk.js),
   Zombie Rush's look: a navy panel, chunky cards, a gold coin. */
.zhb-credits { background: linear-gradient(#2b2f3a, #16181f); border-color: #0b0c10; -webkit-text-stroke-color: #0b0c10; box-shadow: 0 3px 0 #0b0c10, 0 8px 18px rgba(0,0,0,.3); }
.zhb-credits-n { color: #ffd84a; }
.zhb-coin, .zk-coin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff3a8, #f2b71c 55%, #a8700a); border: 2px solid #5a3a04; }
.zk { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(5,9,22,.6); font-family: "Oswald", sans-serif; color: #fff; }
.zk[hidden] { display: none; }
.zk-panel { width: min(1060px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 16px 18px 14px; border-radius: 16px;
  background: linear-gradient(#1b2f6e, #0f1a3e); border: 3px solid #7fa8ff; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.zk-head { display: flex; align-items: center; gap: 14px; }
.zk-title { margin: 0; flex: 1; font: 700 34px/1 "Oswald", sans-serif; -webkit-text-stroke: 1.2px #060b1c; paint-order: stroke fill; }
.zk-credits { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 10px; background: rgba(0,0,0,.35); font-size: 20px; white-space: nowrap; }
.zk-credits b { color: #ffd84a; }
.zk-close { width: 40px; height: 40px; flex: none; border-radius: 10px; border: 2px solid #4b0a0a; background: linear-gradient(#ef2b2b, #b70f14); color: #fff; font-size: 20px; cursor: pointer; }
.zk button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.zk .zk-coin { width: 18px; height: 18px; vertical-align: -3px; margin-right: 5px; }
.zk-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; opacity: 0; transition: opacity .2s; }
.zk-thumb.is-in { opacity: 1; }
/* rarity colours, Common to Mythic */
.zk .r1 { --zr: #8a8f99; --zr2: #5d626b; } .zk .r2 { --zr: #5fbf3a; --zr2: #3a8a22; } .zk .r3 { --zr: #2f6bff; --zr2: #1d44b3; }
.zk .r4 { --zr: #9b4dff; --zr2: #6a26c4; } .zk .r5 { --zr: #ffa21a; --zr2: #d06a00; } .zk .r6 { --zr: #ff3434; --zr2: #b01212; }
.zk-tiers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px; }
.zk-tier { display: flex; flex-direction: column; align-items: stretch; padding: 6px 6px 0; border-radius: 10px; border: 2px solid rgba(255,255,255,.25); cursor: pointer; overflow: hidden;
  background: linear-gradient(var(--zr), var(--zr2)); color: #fff; font: 600 16px "Oswald", sans-serif; }
.zk-tier.is-on { border-color: #fff; box-shadow: 0 0 0 2px #fff inset; }
.zk-tier.is-locked { filter: grayscale(.85) brightness(.6); }
.zk-tier-n { font-size: 20px; line-height: 1; -webkit-text-stroke: 1px #060b1c; paint-order: stroke fill; }
.zk-tier .zk-thumb { margin: 2px 0; aspect-ratio: 2.3 / 1; }
.zk-gun .zk-thumb { aspect-ratio: 2.3 / 1; }
/* opened from the menu: the kiosk is the screen (the menu's text isn't left showing round it) */
body.zk-open #to-pf { visibility: hidden; }
body.zk-open .zhb { display: none; }   /* the hub HUD under a kiosk */
.zk-tier-r { margin: 0 -6px; padding: 3px 0; background: rgba(0,0,0,.35); font-size: 14px; }
.zk-split { display: grid; grid-template-columns: minmax(250px, 340px) 1fr; gap: 12px; margin-top: 12px; }
.zk-sel, .zk-list, .zk-kitbox { padding: 10px 12px 12px; border-radius: 12px; background: rgba(4,10,30,.45); border: 2px solid #2d4f9e; }
.zk-sel h3 { margin: 0 0 8px; text-align: center; font: 600 20px "Oswald", sans-serif; }
.zk-sel-pic { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: linear-gradient(var(--zr), var(--zr2)); }
.zk-sel-pic b { display: block; font-size: 21px; line-height: 1.1; -webkit-text-stroke: 1px #060b1c; paint-order: stroke fill; }
.zk-sel-pic span { font: 500 13px "DM Sans", sans-serif; }
.zk-stats { margin-top: 8px; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.3); }
.zk-stat { display: flex; justify-content: space-between; gap: 10px; padding: 4px 10px; font-size: 16px; }
.zk-stat.is-h { background: #1d44b3; font-weight: 600; }
.zk-up { color: #4dff6a; font-weight: 700; }
.zk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.zk-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 4px 8px; border-radius: 10px; border: 2px solid rgba(0,0,0,.45);
  font: 700 19px/1.1 "Oswald", sans-serif; color: #fff; cursor: pointer; -webkit-text-stroke: .8px #060b1c; paint-order: stroke fill; }
.zk-btn.is-buy, .zk-btn.is-up { background: linear-gradient(#ffe14a, #f1a90c); }
.zk-btn.is-equip { background: linear-gradient(#4dd65a, #1f9a3a); }
.zk-btn.is-off, .zk-btn:disabled { background: linear-gradient(#59606e, #3b404b); cursor: default; }
.zk-price { font-size: 17px; }
.zk-btns .zk-btn:only-child { grid-column: 1 / -1; }
.zk-list h4 { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; font: 700 20px "Oswald", sans-serif; }
.zk-list h4::before, .zk-list h4::after { content: ""; flex: 1; height: 3px; border-radius: 2px; background: #2f6bff; }
.zk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; margin-bottom: 10px; }
.zk-gun { position: relative; display: flex; flex-direction: column; padding: 4px 4px 0; border-radius: 10px; border: 2px solid rgba(255,255,255,.3); overflow: hidden; cursor: pointer;
  background: linear-gradient(var(--zr), var(--zr2)); color: #fff; font: 600 15px "Oswald", sans-serif; }
.zk-gun.is-on { border-color: #fff; box-shadow: 0 0 0 2px #fff inset; }
.zk-gun-name { font-size: 16px; line-height: 1.1; text-align: left; -webkit-text-stroke: .8px #060b1c; paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-gun-foot { margin: 0 -4px; padding: 3px 0; background: rgba(0,0,0,.45); font-size: 15px; }
.zk-ok { color: #4dff6a; }
.zk-none { grid-column: 1 / -1; margin: 6px 0 10px; font: 500 14px "DM Sans", sans-serif; color: #b9c6e8; text-align: center; }
.zk-split.is-classes { grid-template-columns: minmax(180px, 250px) 1fr; }
.zk-kits { display: flex; flex-direction: column; gap: 8px; }
.zk-kit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border-radius: 10px; border: 2px solid rgba(255,255,255,.3); text-align: left;
  background: linear-gradient(#ffa21a, #c25c00); color: #fff; font: 500 14px "DM Sans", sans-serif; }
.zk-kit.is-on { border-color: #fff; }
.zk-kit.is-soon { background: linear-gradient(#3a4256, #262c3b); color: #b9c6e8; }
.zk-kit-n { font: 700 21px "Oswald", sans-serif; color: #fff; -webkit-text-stroke: .8px #060b1c; paint-order: stroke fill; }
.zk-kit-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-bottom: 8px; }
.zk-kit-head b { display: block; font-size: 28px; line-height: 1; color: #ffb43a; -webkit-text-stroke: 1px #060b1c; paint-order: stroke fill; }
.zk-kit-head p { margin: 0; font: 500 15px/1.35 "DM Sans", sans-serif; }
.zk-dep { display: grid; grid-template-columns: 120px minmax(120px, 170px) 1fr; gap: 10px; align-items: center; padding: 8px; margin-top: 8px; border-radius: 10px; background: rgba(0,0,0,.28); border: 2px solid #2d4f9e; }
.zk-dep-pic { position: relative; border-radius: 8px; background: linear-gradient(#36b8e8, #1a6f9e); }
.zk-dep:nth-of-type(2) .zk-dep-pic { background: linear-gradient(#f0c419, #b8860b); }
.zk-dep:nth-of-type(3) .zk-dep-pic { background: linear-gradient(#e04ae8, #8a1fa0); }
.zk-dep-cash { position: absolute; left: 6px; bottom: 2px; font: 700 15px "Oswald", sans-serif; color: #4dff6a; -webkit-text-stroke: .8px #060b1c; paint-order: stroke fill; }
.zk-dep-mid { display: flex; flex-direction: column; gap: 4px; }
.zk-dep-mid b { font-size: 19px; line-height: 1.1; }
.zk-lv { font: 500 13px "DM Sans", sans-serif; color: #cfd8f0; }
.zk-dep .zk-stats { margin-top: 0; }
.zk-foot { margin: 12px 0 0; font: 500 14px/1.4 "DM Sans", sans-serif; color: #b9c6e8; }
@media (max-width: 900px), (max-height: 560px) {
  .zk { padding: 8px; }
  .zk-panel { padding: 10px 12px; max-height: calc(100vh - 16px); }
  .zk-title { font-size: 24px; }
  .zk-credits { font-size: 16px; padding: 4px 10px; }
  .zk-tiers { gap: 5px; margin-top: 8px; }
  .zk-tier-n { font-size: 15px; }
  .zk-tier-r { font-size: 11px; }
  .zk-split, .zk-split.is-classes { grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 8px; }
  .zk-stat { font-size: 14px; padding: 3px 8px; }
  .zk-btn { min-height: 44px; font-size: 16px; }
  .zk-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
  .zk-gun-name { font-size: 13px; }
  .zk-dep { grid-template-columns: 80px 1fr; }
  .zk-dep .zk-stats { grid-column: 1 / -1; }
  .zk-kits { gap: 5px; }
  .zk-kit { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 8px; padding: 5px 10px; font-size: 12px; }
  .zk-kit-n { font-size: 16px; }
  .zk-kit-head b { font-size: 22px; }
  .zk-kit-head p { font-size: 13px; }
}
@media (max-width: 560px) {
  .zk-split, .zk-split.is-classes { grid-template-columns: 1fr; }
  .zk-tiers { grid-template-columns: repeat(3, 1fr); }
}