/*
 * Tinwar wears a field kit: matte gunmetal panels with clipped corners, bone-white condensed type in the manner of
 * stencilled gear, and one signal orange for whatever you can act on or have chosen. The world stays light concrete, so
 * the dark kit reads over it without shouting. Gold is kept for score and bounty; red for harm and death.
 */
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-800-italic.woff2) format("woff2"); font-weight: 800 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/barlow-latin-500-normal.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/barlow-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/barlow-latin-700-normal.woff2) format("woff2"); font-weight: 700 900; font-display: swap; }

:root {
  --bg: #121419;
  --panel: rgba(19, 21, 25, 0.92);
  --panel-solid: #15171b;
  --panel-2: #1e2127;
  --panel-3: #282c33;
  --well: #0d0e11;
  --line: rgba(236, 230, 214, 0.15);
  --line-strong: rgba(236, 230, 214, 0.24);
  --ink: #ece6d6;
  --muted: #9a9ea6;
  --faint: #6c7079;
  --accent: #ff5a1f;
  --accent-hot: #ff7b47;
  --accent-wash: rgba(255, 90, 31, 0.12);
  --accent-ink: #160a04;
  --gold: #ffc94a;
  --danger: #ff4d5e;
  --ok: #5ee0a0;
  --cut: 10px;
  --cut-sm: 6px;
  --radius: 2px;
  --radius-sm: 2px;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --text: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-micro: 12px;
  --t-label: 13px;
  --t-body: 15px;
  --t-title: 22px;
  --t-display: 28px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --lift: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  /* Notch and home-bar insets (viewport-fit=cover lets the page run under them), so panels and buttons sit inside. */
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
  font-family: var(--text);
  font-size: var(--t-body);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: var(--bg);
  color: var(--ink);
}

#game {
  touch-action: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
}
#game.aiming { cursor: none; }

h1, h2, p { margin: 0; }
/* Section labels read like stencilled kit markings: a short orange bar, then tracked capitals. */
h2 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font: 700 var(--t-label)/1 var(--display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--s5) 0 var(--s3);
}
h2::before { content: ""; width: 14px; height: 2px; background: var(--accent); }

button, input { font: inherit; color: inherit; }

/* Clipped corners in place of rounded ones: top right and bottom left, like a stamped plate. */
.cut, .panel, button.primary, .tile, .death-card, .banner, .perk-panel, .reconnect, .objective {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

button {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3);
  font: 600 var(--t-body)/1.15 var(--display);
  letter-spacing: 0.04em;
  transition: border-color 0.12s, background 0.12s, color 0.12s, transform 0.06s;
}
/* Hover looks only where a pointer can hover: a touch screen would keep them stuck on after a tap. */
@media (hover: hover) { button:hover:not(:disabled) { border-color: var(--line-strong); background: var(--panel-3); } }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: default; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }

button.primary {
  position: relative;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  font: 800 22px/1 var(--display);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  padding: 16px var(--s5);
  width: 100%;
  margin-top: var(--s3);
  --cut: 14px;
}
/* Chevrons run toward the fight while you hover. */
button.primary::after {
  content: "\203A\203A\203A";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-52%);
  letter-spacing: -0.05em;
  opacity: 0.45;
  transition: right 0.18s, opacity 0.18s;
}
@media (hover: hover) { button.primary:hover:not(:disabled) { background: var(--accent-hot); } }
/* A glint crosses the Deploy plate every few seconds; pressing it sinks the plate and flashes it. */
button.primary { isolation: isolate; }
button.primary::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 28%; pointer-events: none; z-index: -1; /* under the label, so the glint never washes out the letters */
  background: linear-gradient(90deg, transparent, rgba(255, 233, 176, 0.6), transparent); transform: skewX(-20deg);
  animation: deploy-glint 4.5s ease-in-out 1s infinite;
}
button.primary:disabled::before { display: none; }
button.primary { transition: transform 0.08s, background 0.12s, filter 0.12s; }
button.primary:active:not(:disabled) { transform: translateY(2px) scale(0.985); filter: brightness(1.1); }
@keyframes deploy-glint { 0% { left: -40%; } 24%, 100% { left: 125%; } }
@media (hover: hover) { button.primary:hover:not(:disabled)::after { right: 14px; opacity: 0.9; } }
button.secondary { background: transparent; }
button.link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font: inherit; letter-spacing: 0; }

input {
  width: 100%;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px var(--s3);
  font: 600 var(--t-body) var(--text);
}
input:focus { border-color: var(--accent); outline: none; }
input::placeholder { color: var(--faint); }

kbd {
  display: inline-block;
  min-width: 24px;
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 3px;
  border-radius: 3px;
  background: var(--panel-2);
  font: 700 var(--t-label)/1.3 var(--display);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--ink);
}

.muted { color: var(--muted); }
.status { min-height: 1.3em; margin-top: 10px; font-size: var(--t-label); color: var(--muted); }
.status.error { color: var(--danger); }

/* Menu */
.menu {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  padding: calc(28px + var(--st)) calc(16px + var(--sr)) calc(28px + var(--sb)) calc(16px + var(--sl));
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 90, 31, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(12, 13, 16, 0.55), rgba(12, 13, 16, 0.86) 45%, rgba(12, 13, 16, 0.94));
}
/*
 * --ui is the client's one UI scale (src/client/uiscale.ts): 1 up to a 900px short side, then in step with it to 2.4 at 2160p.
 * The menu card and the in-game overlays zoom by it, so on a 1440p or 4K screen they keep the proportions they have at 900px
 * and grow with the canvas HUD, which draws at the same scale.
 */
.menu-card { max-width: 1000px; margin: 0 auto; zoom: var(--ui, 1); }
.brand { display: grid; justify-items: center; margin: 0 0 var(--s5); }
.wordmark { display: flex; align-items: center; gap: clamp(10px, 2vw, 18px); }
.emblem { width: clamp(42px, 7vw, 64px); height: auto; }
.logo {
  font: italic 900 clamp(46px, 9vw, 92px)/0.9 var(--display);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}
.logo em { font-style: inherit; color: var(--accent); }
/* A slow shine crosses the wordmark now and then; the plain colours show through whenever it is not passing. */
.logo, .logo em {
  background: linear-gradient(105deg, var(--base) 42%, var(--glint) 50%, var(--base) 58%) 0 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none;
  animation: logo-shine 7s ease-in-out 1.2s infinite;
}
.logo { --base: var(--ink); --glint: #fff6dc; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); }
.logo em { --base: var(--accent); --glint: #ffd9a0; }
@keyframes logo-shine { 0% { background-position: 0 0; } 22%, 100% { background-position: 100% 0; } }
.tagline {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
  color: var(--muted);
  font: 700 var(--t-label)/1 var(--display);
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.tagline::before, .tagline::after { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.tagline::after { transform: scaleX(-1); }

.menu-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.side { display: grid; gap: var(--s4); }
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5) var(--s5) var(--s4);
  box-shadow: var(--lift);
  backdrop-filter: blur(6px);
}
/* A bracket in the top left corner marks every panel as one piece of kit. */
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  pointer-events: none;
}
.panel > h2:first-child { margin-top: 0; }

.play-actions {
  position: sticky;
  bottom: -28px;
  margin: var(--s5) calc(-1 * var(--s5)) calc(-1 * var(--s4));
  padding: 1px var(--s5) var(--s5);
  background: var(--panel-solid);
  border-top: 1px solid var(--line);
}
.play-actions .status:empty { display: none; }

.field { display: grid; gap: var(--s2); }
.field span { display: flex; justify-content: space-between; font: 700 var(--t-label)/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.field-link { color: var(--accent); text-decoration: none; letter-spacing: 0.08em; }
.field-link:hover { text-decoration: underline; }

.weapons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.tile { display: grid; gap: var(--s1); justify-items: center; text-align: center; padding: 12px var(--s2) 10px; --cut: var(--cut-sm); }
.tile b { font: 700 18px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.tile small { color: var(--muted); font: 500 var(--t-micro)/1.2 var(--text); letter-spacing: 0.02em; }
.tile[aria-pressed="true"] b { color: var(--accent); }
.weapon { background: var(--panel-2); transition: transform 0.16s cubic-bezier(.2, 1.4, .4, 1), background 0.12s, box-shadow 0.16s, border-color 0.12s; }
/* Cards lift toward you and take a warm light from the top edge; a chosen one keeps its glow. */
@media (hover: hover) { .tile:hover:not(:disabled) { transform: translateY(-3px); box-shadow: inset 0 2px 0 rgba(255, 179, 71, 0.55), inset 0 18px 24px -14px rgba(255, 90, 31, 0.3); } }
.tile:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.tile[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--accent), inset 0 16px 26px -14px rgba(255, 90, 31, 0.4); }
.tile[aria-pressed="true"]:not(:hover) { animation: tile-settle 0.3s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes tile-settle { 0% { transform: scale(0.95); } 100% { transform: none; } }
.gun-art { width: 100%; max-width: 150px; height: auto; aspect-ratio: 150 / 56; }
/* Each class gun's kit card: power, rate, reach and mobility as short bars against the other classes. */
.gun-stats { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; width: 100%; margin-top: 6px; align-items: center; }
.gun-stats span { font: 700 11px/1 var(--display); letter-spacing: 0.14em; color: var(--faint); text-align: left; }
.gun-stats i { display: block; height: 4px; background: linear-gradient(90deg, var(--ink) var(--v), rgba(236, 230, 214, 0.1) var(--v)); }
.weapon[aria-pressed="true"] .gun-stats i { background: linear-gradient(90deg, var(--accent) var(--v), rgba(255, 90, 31, 0.15) var(--v)); }

.swatches { display: flex; gap: var(--s3); flex-wrap: wrap; }
.swatch {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--swatch);
  border: 3px solid var(--panel-solid);
  box-shadow: 0 0 0 1px var(--line-strong);
}
@media (hover: hover) { .swatch:hover:not(:disabled) { background: var(--swatch); box-shadow: 0 0 0 1px var(--ink); } }
.swatch[aria-pressed="true"] { background: var(--swatch); border-color: var(--panel-solid); box-shadow: 0 0 0 2px var(--accent); }

.armors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
/* Plates as segments: one per tier of protection. */
.meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; height: 6px; margin: 2px 0; }
.meter i { background: rgba(236, 230, 214, 0.12); }
.meter i.on { background: var(--ink); }
.armor[aria-pressed="true"] .meter i.on { background: var(--accent); }

.servers { display: grid; gap: 6px; }
.server { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 10px var(--s3); font: 600 var(--t-body) var(--text); letter-spacing: 0; }
.server-name { font: 700 17px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.server .count { color: var(--muted); font: 500 var(--t-label) var(--text); }
.server .count small { font-size: 12px; }
.mode { font: 800 var(--t-label)/1 var(--display); padding: 4px 8px; letter-spacing: 0.14em; border: 1px solid currentColor; }
.mode-ffa { color: #ffb48a; background: rgba(255, 120, 60, 0.1); }
.mode-tdm { color: #ff8f9c; background: rgba(255, 77, 94, 0.1); }
.mode-dom { color: #9fb8ff; background: rgba(110, 145, 255, 0.1); }
.mode-zom { color: #b6e07c; background: rgba(150, 210, 90, 0.1); }
.mode-br { color: #d9b4f0; background: rgba(180, 120, 230, 0.1); }

.squad { display: grid; gap: var(--s2); }
.squad-pitch { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center; font-size: var(--t-label); color: var(--muted); }
.invite { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); }
.invite input { font-size: var(--t-label); padding: 8px var(--s3); }
.squad-chip { position: absolute; top: 150px; left: 16px; display: flex; align-items: center; gap: var(--s2); padding: 6px 6px 6px 12px; background: var(--panel); border: 1px solid var(--line); font: 700 var(--t-label) var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.squad-chip button { padding: 4px 10px; font-size: var(--t-label); }

.auth { display: grid; gap: 8px; margin-top: 12px; }
.auth .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* The signed-in account's optional reset email (menu.ts emailSection), folded under its one-line summary. */
.acct-email { margin-top: 14px; }
.acct-email summary { cursor: pointer; overflow-wrap: anywhere; }
.acct-email > p { margin: 8px 0 0; font-size: var(--t-label); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 0; }
.stats div { background: var(--well); border: 1px solid var(--line); padding: var(--s2); text-align: center; }
.stats dt { font: 700 var(--t-micro) var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; }
.stats dd { margin: 2px 0 0; font: 800 26px/1.1 var(--display); font-variant-numeric: tabular-nums; }

.controls { display: grid; grid-template-columns: auto 1fr; gap: 7px var(--s3); margin: 0; align-items: center; font-size: var(--t-label); }
.controls dd { margin: 0; color: var(--muted); }

.menu-footer { margin-top: var(--s4); text-align: center; font: 600 var(--t-label) var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.menu-footer a { color: var(--faint); text-decoration: none; }
.menu-footer a:hover { color: var(--accent); }

.doc-card { max-width: 720px; }
a.wordmark { text-decoration: none; }
.draft-note {
  margin-bottom: var(--s4);
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  color: var(--ink);
}
.doc { line-height: 1.6; }
.doc .lede { font-size: 18px; line-height: 1.5; }
.doc h2 { margin-top: var(--s5); }
.doc p + p, .doc ul + p, .doc p + ul { margin-top: var(--s2); }
.doc ul { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s1); }
.doc code { font: 600 0.92em ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--well); border: 1px solid var(--line); padding: 0 4px; overflow-wrap: anywhere; }

.muted-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-label); }
.muted-list li { display: flex; justify-content: space-between; gap: var(--s3); }

/* In-game overlays */
.hud { position: fixed; inset: 0; pointer-events: none; zoom: var(--ui, 1); }
.hud > * { pointer-events: auto; }

/* Docked at the bottom between the chat (left) and the minimap (right, 192px wide), clear of the aim area. */
.perk-panel {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: 210px;
  right: 210px;
  width: fit-content;
  max-width: calc(100vw - 420px);
  margin-inline: auto;
  background: var(--panel);
  border-top: 2px solid var(--accent);
  padding: 8px;
  --cut: 8px;
  animation: dock-in 0.3s cubic-bezier(.2, 1.2, .4, 1) both;
}
@keyframes dock-in { from { transform: translateY(24px); opacity: 0; } }
/* A zombies run draws its key hints along the bottom (drawSiege in hud.ts), so the dock sits above them. */
.perk-panel.siege { bottom: 52px; }
.perk-panel h2 { margin: 0 2px 6px; font-size: var(--t-label); color: var(--ink); letter-spacing: 0.18em; }
.perk-panel h2::before { display: none; }
.perk-panel h2 span { color: var(--muted); font-weight: 600; letter-spacing: 0.04em; }
.perk-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.perk {
  position: relative;
  width: 62px;
  height: 62px;
  padding: 3px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  background: var(--panel-2);
}
.perk { animation: perk-in 0.34s cubic-bezier(.2, 1.5, .4, 1) calc(0.12s + var(--i, 0) * 60ms) both; overflow: hidden; }
.perk::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 176, 0.35), transparent); transform: skewX(-20deg);
  animation: perk-shimmer 0.7s ease-out calc(0.4s + var(--i, 0) * 60ms) both;
}
@keyframes perk-in { from { transform: translateY(18px) scale(0.85); opacity: 0; } }
@keyframes perk-shimmer { from { left: -60%; } to { left: 130%; } }
@media (hover: hover) { .perk:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-wash); } }
.perk kbd { justify-self: start; min-width: 0; padding: 0 4px; font-size: 11px; border-bottom-width: 2px; }
.perk-icon { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .perk:hover:not(:disabled) .perk-icon { stroke: var(--accent); } }
.perk b { max-width: 100%; font: 700 12px/1.1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perk-desc { margin: 0 2px 6px; min-height: 1.3em; font-size: 13px; color: var(--muted); }
.perk-desc strong { color: var(--accent); }
.perk-line { display: none; }
.perk.evolve { width: 160px; height: auto; grid-template-rows: auto auto auto auto; gap: 2px; padding: 4px 6px 6px; }
.perk.evolve canvas { width: 108px; height: 34px; }
.perk.evolve b { font-size: 15px; }
.perk.evolve small { font-size: 11px; line-height: 1.25; color: var(--muted); text-align: center; }
.perk.evolve .traits { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 2px; }
.perk.evolve .trait { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 2px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.perk.evolve .trait i { font: 600 9px/1 var(--display); font-style: normal; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.perk.evolve .trait-icon { width: 12px; height: 12px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.chat {
  position: absolute;
  left: calc(16px + var(--sl));
  /* Above the health cross the canvas HUD draws in the bottom-left corner (hud.ts, HEALTH.size + 16 + a gap). */
  bottom: calc(132px + var(--sb));
  width: min(380px, calc(100vw - 24px));
  pointer-events: none;
}
.chat-log { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 3px; font-size: 15px; }
.chat-log li {
  background: rgba(19, 21, 25, 0.78);
  border-left: 2px solid var(--line-strong);
  padding: 3px 9px;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.chat-log li.system { color: var(--gold); border-left-color: var(--gold); }
.chat-name {
  pointer-events: auto;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  font: 700 14px var(--text);
  letter-spacing: 0;
}
.chat-name:hover:not(:disabled) { background: none; text-decoration: underline; }
.chat-log li.muted-line { color: var(--muted); }
.muted-tag { margin-left: 6px; padding: 0 5px; border: 1px solid var(--line-strong); font: 700 var(--t-micro) var(--display); text-transform: uppercase; letter-spacing: 0.12em; }
.chat-input { pointer-events: auto; background: var(--panel); }

.banner {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: var(--panel);
  border-top: 2px solid var(--accent);
  padding: 18px 30px;
  pointer-events: none;
  --cut: 14px;
}
.banner h2 { margin: 0 0 6px; font: italic 900 var(--t-display)/1 var(--display); color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; justify-content: center; }
.banner h2::before, .death-body > h2:first-child::before { display: none; }
.podium { margin: 12px 0 12px; padding: 0; list-style: none; counter-reset: podium; min-width: 240px; }
.podium li { display: flex; gap: 16px; align-items: baseline; padding: 5px 0; font: 600 18px var(--display); letter-spacing: 0.04em; counter-increment: podium; border-top: 1px solid var(--line); }
.podium li::before { content: counter(podium); color: var(--accent); min-width: 1.2em; text-align: left; font-weight: 800; }
.podium li span { flex: 1; text-align: left; overflow-wrap: anywhere; }
.podium li b { font-variant-numeric: tabular-nums; }
.report { border-top-color: var(--danger); min-width: min(440px, calc(100vw - 32px)); }
.report h2 { color: var(--danger); }
.report.won { border-top-color: var(--gold); }
.report.won h2 { color: var(--gold); }
.report table { width: 100%; margin: 12px 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.report th { font: 700 var(--t-micro) var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; padding: 4px 8px; text-align: right; }
.report td { padding: 5px 8px; text-align: right; font: 600 17px var(--display); border-top: 1px solid var(--line); }
.report th:first-child, .report td:first-child { text-align: left; }
.report tr.you td { color: var(--accent); font-weight: 800; }

.objective {
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 24px);
  padding: 9px 20px;
  background: var(--panel);
  border-bottom: 2px solid var(--accent);
  font: 700 17px var(--display);
  letter-spacing: 0.06em;
  text-align: center;
  pointer-events: none;
  animation: objective ease-out forwards;
  --cut: 8px;
}
.objective.siege { top: 104px; }
@keyframes objective {
  0% { opacity: 0; transform: translate(-50%, -8px); }
  8%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; }
}

.reconnect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 16px 26px;
  border-top: 2px solid var(--accent);
  background: var(--panel);
  box-shadow: 0 0 0 100vmax rgba(10, 11, 14, 0.45);
  font: 700 var(--t-title) var(--display);
  letter-spacing: 0.06em;
  text-align: center;
}

/* Docked top left, where the vitals sit while alive, so the killer, usually near the screen center, stays in view. */
.death {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding: 16px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 13, 16, 0.5), transparent 560px);
}
/*
 * The card is a column no taller than the screen: its body scrolls inside the card (which takes touches, so iOS scrolls it;
 * a scroller with pointer-events: none does not) and the button row under it never scrolls away.
 */
.death-card {
  position: relative;
  pointer-events: auto;
  transition: opacity 150ms;
  width: min(420px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel-solid);
  box-shadow: var(--lift);
  --cut: 14px;
  animation: card-slam 0.45s cubic-bezier(.2, 1.1, .4, 1) both;
}
.death-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 22px 20px 4px; }
.death-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); padding: 12px 20px 20px; }
.death-foot #respawn { flex: 1 1 auto; }
.death-back { flex: none; }
.death-back::before { content: "\2039\00a0"; }
.death-more-toggle { flex: none; margin-right: auto; min-height: 40px; padding: 0 var(--s2); font: 700 var(--t-label) var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.death-more-toggle:is(:hover, :active, :focus):not(:disabled) { background: none; box-shadow: none; transform: none; }
.death-gist { margin-top: 6px; font: 700 var(--t-label) var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
/* The card drops in oversized and lands with a jolt. */
@keyframes card-slam {
  0% { transform: scale(1.14) translateY(-10px); opacity: 0; }
  50% { transform: scale(0.985); opacity: 1; }
  66% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } 100% { transform: none; }
}
.death-body > h2:first-child { animation: stamp-title 0.4s cubic-bezier(.2, 1.5, .4, 1) 0.18s both; }
@keyframes stamp-title { from { transform: scale(1.6) rotate(-3deg); opacity: 0; } }
/* Hazard tape along the top edge. */
.death-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: repeating-linear-gradient(-45deg, var(--danger) 0 9px, #2a1015 9px 18px);
}
.death[inert] .death-card { opacity: 0.72; }
.death-cause { font: 600 var(--t-body) var(--text); color: var(--muted); margin-top: 2px; }
.death-lost { margin-top: 4px; color: var(--gold); font: 700 var(--t-label) var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.death-card .loadout h2 { margin: var(--s4) 0 var(--s2); }
.death-card #death-sub { margin-top: var(--s3); }
.death-card .weapons, .death-card .armors { gap: 6px; }
.death-card .tile { padding: 6px 4px; }
.death-card .gun-art { max-width: 100px; }
.death-card .gun-stats { display: none; }
.death-card .swatch { width: 30px; height: 30px; }
.death-body > h2:first-child { margin: 0 0 var(--s1); font: italic 900 30px/1 var(--display); color: var(--ink); text-transform: uppercase; letter-spacing: 0.02em; }

/* The life just lost, as four stamped stats; a record gets an orange plate and a tag. */
.recap { margin-top: var(--s4); }
.recap-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.recap-stat { animation: recap-stamp 0.32s cubic-bezier(.2, 1.5, .4, 1) calc(0.35s + var(--i, 0) * 90ms) both; position: relative; display: grid; gap: 2px; padding: 9px 6px 8px; background: var(--well); border: 1px solid var(--line); text-align: center; }
.recap-stat b { font: 800 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.recap-stat span { font: 700 11px/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.recap-stat.best { border-color: var(--accent); background: var(--accent-wash); }
.recap-stat.best b { color: var(--accent); }
.recap-stat i {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  padding: 2px 6px; background: var(--accent); color: var(--accent-ink);
  font: italic 900 11px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  animation: stamp 0.35s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes recap-stamp { from { transform: scale(1.5); opacity: 0; } }
@keyframes stamp { from { transform: translateX(-50%) rotate(-12deg) scale(2.2); opacity: 0; } }
.recap-bests { margin-top: var(--s2); font: 600 var(--t-label) var(--display); letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }
.recap-nemesis { margin-top: var(--s2); padding: 7px 10px; border-left: 3px solid var(--danger); background: rgba(255, 77, 94, 0.1); font: 600 var(--t-label) var(--text); }

@media (min-width: 1700px) {
  .perk:not(.evolve) { width: 108px; height: auto; min-height: 62px; gap: 2px; padding: 3px 5px 5px; }
  .perk-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    color: var(--muted);
    text-align: center;
  }
}
@media (max-width: 900px) {
  .perk-panel, .perk-panel.siege { left: 12px; right: 12px; bottom: 136px; max-width: calc(100vw - 24px); }
  .chat { bottom: 136px; }
}
@media (max-width: 639px) {
  .perk-panel.siege { bottom: 172px; }
}
@media (max-width: 760px), (max-height: 720px) {
  .death { padding-top: 16px; justify-content: center; }
}
@media (max-width: 760px) {
  .menu-grid { grid-template-columns: minmax(0, 1fr); }
  .armors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .weapons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .recap-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.touch-buttons { display: none; }
/*
 * As in mobile shooters, the right thumb rests on the aim stick 150px in from the bottom-right corner (STICK_GUIDE in hud.ts),
 * and the buttons arc above it: reload up and to the left, the ability up and to the right. The thumb reaches for them on
 * purpose and never lands on them while it aims. The minimap moves to the top left on touch screens, out of the thumb's way.
 */
@media (pointer: coarse) {
  .touch-buttons { display: block; position: fixed; inset: 0; pointer-events: none; }
  .touch-buttons button {
    position: absolute; pointer-events: auto; width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(236, 230, 214, 0.45);
    background: rgba(19, 21, 25, 0.62); color: var(--ink); font: 700 20px var(--display); touch-action: none;
  }
  .touch-buttons button:active { background: rgba(255, 90, 31, 0.7); }
  #touch-reload { right: calc(178px + var(--sr)); bottom: calc(142px + var(--sb)); }
  #touch-ability { right: calc(62px + var(--sr)); bottom: calc(154px + var(--sb)); width: 60px; height: 60px; font-size: 24px; }
  /* Icons instead of letters; --sweep (0..1, touchbuttons.ts) fills a dark wedge round the button as a reload or cooldown runs. */
  .touch-buttons button { display: grid; place-items: center; padding: 0; overflow: hidden; }
  .touch-buttons button::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: conic-gradient(rgba(6, 7, 9, 0.6) calc((1 - var(--sweep, 0)) * 360deg), transparent 0);
    opacity: 0;
  }
  .touch-buttons button.busy::before { opacity: 1; }
  .touch-icon { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; position: relative; }
  #touch-ability .touch-icon { width: 30px; height: 30px; }
  #touch-ability > span { grid-area: 1 / 1; display: grid; place-items: center; }
  .touch-count {
    position: relative; font: 800 26px var(--display); color: #fff;
    text-shadow: 0 0 3px #000, 0 0 6px #000;
  }
  #touch-ability.busy .touch-icon { opacity: .35; }
  #touch-ability.ready { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.3); }
  #touch-ability.locked { opacity: .85; }
  #touch-ability.locked .touch-count { font-size: 15px; align-self: end; margin-bottom: 5px; }
  #touch-ability.locked .touch-icon { opacity: 1; width: 22px; height: 22px; align-self: start; margin-top: 8px; }
  #touch-reload.empty { border-color: var(--danger); color: #ffd5d9; animation: reload-nag .8s ease-in-out infinite; }
  @keyframes reload-nag { 50% { box-shadow: 0 0 0 4px rgba(255, 77, 94, 0.45); } }
  .chat { bottom: 170px; }
  .chat-name { pointer-events: none; }
  /* The minimap sits under the vitals on a touch screen, so the squad chip goes beside it. */
  .squad-chip { left: 156px; }
}
/* A phone on its side. */
@media (pointer: coarse) and (max-height: 519px) {
  .chat { top: 58px; bottom: auto; left: 50%; transform: translateX(-50%); width: min(360px, 44vw); }
  .perk-panel, .perk-panel.siege { left: 50%; right: auto; bottom: 8px; transform: translateX(-50%); max-width: min(62vw, 520px); padding: 4px; }
  .perk { width: 50px; height: 50px; }
  .perk.evolve { width: 150px; height: auto; }
  .brand { margin-bottom: var(--s3); }
  .logo { font-size: 44px; }
  .emblem { width: 36px; }
  .brand .tagline { display: none; }
  .gun-stats { display: none; }
  .perk-panel.collapsed h2 { font-size: 12px; letter-spacing: 0.1em; }
  .perk-panel .perk-desc { display: none; }
}

/* Turning the phone upright mid-game covers the field with a hint, since the arena is drawn for a wide screen. */
.rotate-hint { display: none; }
@media (pointer: coarse) and (orientation: portrait) {
  .rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 60; flex-direction: column; gap: 14px; align-items: center; justify-content: center;
    background: rgba(12, 13, 16, .95); color: var(--ink); font: 800 24px var(--display); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 24px;
  }
  .rotate-hint span { font-size: 56px; line-height: 1; color: var(--accent); }
}

/* The round-start banner on a phone sits between the vitals and the leaderboard, below the kill feed, and wraps instead of spanning them. */
@media (pointer: coarse) and (max-height: 519px) {
  .objective, .objective.siege { top: 98px; max-width: calc(100vw - 2 * 244px); min-width: 220px; padding: 7px 14px; font-size: 15px; }
}

/* The level-up dock collapses to a pulsing pill; tapping it or its toggle opens the choices again. */
.perk-toggle {
  margin-left: 8px; padding: 1px 7px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font: 700 12px var(--display); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; vertical-align: middle;
}
.perk-toggle::after { content: 'Hide \25BE'; }
.perk-panel.collapsed { padding: 6px 12px; cursor: pointer; animation: perk-pulse 1.4s ease-in-out infinite; }
.perk-panel.collapsed h2 { margin: 0; color: var(--accent); }
.perk-panel.collapsed h2 span, .perk-panel.collapsed .perk-desc, .perk-panel.collapsed .perk-list { display: none; }
.perk-panel.collapsed .perk-toggle::after { content: 'Pick \25B4'; }
@keyframes perk-pulse { 50% { background: rgba(255, 90, 31, 0.28); } }

/*
 * Medal toasts (medaltoasts.ts): a medal slams in large and settles, its metal flashes, a shine sweeps across it, and after
 * its moment it lifts away. Medals earned together stand side by side above the centre of the screen.
 */
.medals {
  position: absolute; left: 50%; top: 13%; transform: translateX(-50%);
  display: flex; gap: 14px; align-items: flex-start; pointer-events: none; z-index: 3;
}
.medal-toast {
  display: grid; justify-items: center; gap: 3px; width: 140px;
  --pow: 1;
  --ray: 255, 211, 77;
  position: relative;
  animation: medal-in 0.42s cubic-bezier(.18, 1.6, .4, 1) both, medal-shake 0.4s linear 0.24s both, medal-out 0.4s ease-in calc(var(--life) - 0.4s) both;
}
.tier-silver { --ray: 236, 230, 214; }
.tier-bronze { --ray: 255, 179, 71; }
.tier-platinum { --ray: 236, 244, 255; }
/* Light rays turn slowly behind the medal, fading with its life; a platinum one throws the widest, brightest fan. */
.medal-rays {
  position: absolute; left: 50%; top: 50%; width: calc(250px * (0.7 + var(--pow) * 0.3)); aspect-ratio: 1; margin: calc(-125px * (0.7 + var(--pow) * 0.3)) 0 0 calc(-125px * (0.7 + var(--pow) * 0.3));
  border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(var(--ray), 0.62) 0 7deg, transparent 7deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 14%, transparent 70%); mask: radial-gradient(circle, #000 14%, transparent 70%);
  opacity: 0;
  animation: medal-spin 7s linear both, medal-rays 1.6s ease-out both;
}
/* A shockwave ring leaves the medal as it lands. */
.medal-ring {
  position: absolute; inset: 4px; border-radius: 50%; pointer-events: none; border: calc(2px + var(--pow) * 2px) solid rgba(var(--ray), 0.9);
  opacity: 0; animation: medal-ring 0.55s ease-out 0.26s both;
}
.medal-spark {
  position: absolute; left: 50%; top: 50%; width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2); pointer-events: none;
  background: #ffe9b0; filter: drop-shadow(0 0 4px rgba(var(--ray), 1));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0; animation: medal-spark var(--sd) cubic-bezier(.1, .7, .3, 1) var(--dl) both;
}
.medal-art { position: relative; width: 108px; height: 108px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
.medal-art svg { display: block; position: relative; }
.medal-art::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 65%);
  animation: medal-flash 0.5s ease-out 0.08s both;
}
.medal-shine {
  position: absolute; inset: 0; overflow: hidden; -webkit-mask: radial-gradient(circle, #000 55%, transparent 56%); mask: radial-gradient(circle, #000 55%, transparent 56%);
}
.medal-shine::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 30%; left: -50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-20deg);
  animation: medal-sweep 2.4s ease-in-out 0.3s infinite;
}
.medal-name {
  font: italic 900 24px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
  text-shadow: 0 2px 0 #0b0c0f, 0 0 10px rgba(0, 0, 0, 0.8); white-space: nowrap;
}
.medal-toast.career { width: 200px; }
.medal-toast.career .medal-art { width: 140px; height: 140px; }
.medal-toast.career .medal-name { font-size: 28px; }
.medal-banner { font: 800 13px/1 var(--display); letter-spacing: 0.3em; text-transform: uppercase; color: #0d0e11; background: var(--gold); padding: 4px 10px; }
.medal-score { font: 800 18px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--gold); text-shadow: 0 2px 0 #0b0c0f, 0 0 8px rgba(0, 0, 0, 0.8); animation: medal-pop 0.4s cubic-bezier(.2, 1.7, .4, 1) 0.34s both; }
.medal-name { animation: medal-pop 0.4s cubic-bezier(.2, 1.7, .4, 1) 0.2s both; }
.tier-platinum .medal-name { background: linear-gradient(100deg, #bfe6ff 30%, #ffffff 50%, #bfe6ff 70%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 #0b0c0f); animation: medal-pop 0.4s cubic-bezier(.2, 1.7, .4, 1) 0.2s both, name-foil 2.2s linear 0.6s infinite; }
.tier-bronze .medal-name { color: #f2c08a; }
.tier-silver .medal-name { color: #eef2f7; }
.tier-gold .medal-name { color: #ffd95a; }
.tier-platinum .medal-name { color: #bfe6ff; }
.tier-platinum .medal-art, .tier-gold .medal-art { animation: medal-glow 1.2s ease-in-out 0.4s 3; }
@keyframes medal-in { from { transform: scale(2.6) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes medal-out { to { transform: translateY(-26px) scale(0.85); opacity: 0; } }
@keyframes medal-flash { from { opacity: 1; transform: scale(0.6); } to { opacity: 0; transform: scale(1.5); } }
@keyframes medal-sweep { 0% { left: -50%; } 32%, 100% { left: 120%; } }
@keyframes medal-spin { to { rotate: 360deg; } }
@keyframes medal-rays { 0% { opacity: 0; scale: 0.3; } 18% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes medal-ring { from { opacity: 0.95; transform: scale(0.9); } to { opacity: 0; transform: scale(calc(1.6 + var(--pow) * 0.5)); } }
@keyframes medal-spark { 0% { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(0); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); } }
@keyframes medal-pop { from { opacity: 0; transform: translateY(8px) scale(0.5); } }
@keyframes name-foil { to { background-position: -250% 0; } }
/* The stamp's impact: the whole toast jolts, harder for a higher tier. */
@keyframes medal-shake {
  0% { translate: 0 0; } 14% { translate: calc(var(--pow) * -7px) calc(var(--pow) * 4px); } 30% { translate: calc(var(--pow) * 6px) calc(var(--pow) * -5px); }
  48% { translate: calc(var(--pow) * -4px) calc(var(--pow) * 2px); } 68% { translate: calc(var(--pow) * 2px) calc(var(--pow) * -1px); } 100% { translate: 0 0; }
}
@keyframes medal-glow { 50% { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(var(--ray), 0.95)); } }
@media (pointer: coarse) and (max-height: 519px) {
  .medals { top: 18%; gap: 6px; }
  .medal-toast { width: 92px; }
  .medal-art { width: 64px; height: 64px; }
  .medal-art svg { width: 64px; height: 64px; }
  .medal-name { font-size: 15px; }
  .medal-rays { width: 150px; margin: -75px 0 0 -75px; }
}

/* The profile page (profile.html): a service record of career numbers, lifetime medals and match medals. */
.page .menu { overflow-y: auto; }
.profile-card { max-width: 980px; }
.profile-search { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); max-width: 420px; margin: 0 auto var(--s3); }
.profile-body > .panel, #profile-body > .panel { margin-bottom: var(--s4); }
.profile-head { display: flex; align-items: center; gap: var(--s5); }
.profile-worn:empty { display: none; }
.profile-name { font: italic 900 52px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.profile-sub { margin-top: 6px; font: 700 var(--t-label) var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.profile-stats { grid-template-columns: repeat(6, 1fr); margin-top: var(--s4); }
.career-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
.career-card, .medal-card { display: grid; justify-items: center; gap: 4px; padding: var(--s3) var(--s2); background: var(--well); border: 1px solid var(--line); text-align: center; }
.career-card b, .medal-card b { font: 800 16px/1.1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.career-line { font-size: 12px; color: var(--muted); }
.career-bar { display: block; width: 100%; height: 5px; background: linear-gradient(90deg, var(--accent) var(--v), rgba(236, 230, 214, 0.1) var(--v)); }
.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--s2); }
.medal-count { font: 800 18px/1 var(--display); color: var(--gold); }
.locked svg { filter: grayscale(1) brightness(0.45); opacity: 0.7; }
.locked b { color: var(--faint); }
@media (max-width: 760px) {
  .profile-stats { grid-template-columns: repeat(3, 1fr); }
  .profile-name { font-size: 36px; }
  .profile-head { gap: var(--s3); }
}

/* Reduced motion keeps every state and drops the movement: no shake, shine, glint, sparkle or slide. */
@media (prefers-reduced-motion: reduce) {
  .logo, .logo em { animation: none; background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
  .logo em { color: var(--accent); }
  button.primary::before, .perk::after, .medal-rays, .medal-ring, .medal-spark { display: none; }
  .tile:hover:not(:disabled) { transform: none; }
  .medal-toast, .medal-toast .medal-art, .medal-shine::before, .medal-name, .medal-score, .death-card, .death-body > h2:first-child,
  .recap-stat, .perk, .perk-panel, .tile { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .medal-toast { animation: medal-out 0.4s ease-in calc(var(--life) - 0.4s) both !important; }
  .perk-panel.collapsed { animation: none; }
}

/*
 * Account progression: the level card, the armory (the locker), challenges, the XP card and the reveal of a new cosmetic. Rarity
 * rides as --rc on common (bone), rare (sky), epic (lilac) and legendary (gold); gold otherwise stays for reward, as everywhere.
 */
.r-common { --rc: #b9b3a2; }
.r-rare { --rc: #7cc4ff; }
.r-epic { --rc: #c3a6ff; }
.r-legendary { --rc: #ffd34d; }
.rarity { display: inline-block; padding: 2px 7px; border: 1px solid var(--rc); color: var(--rc); font: 800 11px/1.2 var(--display); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.cos-art { display: block; width: 100%; height: 64px; }

.menu-tabs { display: flex; justify-content: center; gap: var(--s2); margin: 0 0 var(--s4); }
.menu-tabs button {
  position: relative; padding: 10px 22px; background: var(--panel); border-color: var(--line); border-radius: 0;
  font: 800 17px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.menu-tabs button[aria-selected="true"] { color: var(--ink); background: var(--panel-3); box-shadow: inset 0 -3px 0 var(--accent); border-color: var(--line-strong); }
.tab-badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 2px 5px; background: var(--accent); color: var(--accent-ink); font: 900 12px/1 var(--display); letter-spacing: 0; text-align: center; font-style: normal; }

/* The level card under the name field: a level chip, prestige stars, a gold XP bar, and what the next level earns. */
.level-card { margin: var(--s3) 0 0; padding: 10px 12px 9px; background: var(--well); border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.lv-top { display: flex; align-items: center; gap: var(--s2); }
.lv-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 9px 2px 7px; background: #26292f; border: 1px solid var(--line-strong); clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
.lv-chip small { font: 800 11px/1 var(--display); letter-spacing: 0.2em; color: var(--muted); }
.lv-chip b { font: 900 24px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.lv-stars { display: inline-flex; align-items: center; gap: 1px; }
.lv-star { width: 15px; height: 15px; fill: var(--gold); stroke: #1c1f26; stroke-width: 1.4; stroke-linejoin: round; }
.lv-x { font: 800 14px var(--display); color: var(--gold); margin-left: 2px; }
.lv-label { margin-left: auto; font: 700 12px/1 var(--display); letter-spacing: 0.1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.xp-bar { height: 9px; margin-top: 7px; background: #0a0b0e; border: 1px solid var(--line-strong); overflow: hidden; }
.xp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #ffe08a 0 45%, var(--gold) 45% 100%); }
.xp-bar.big { height: 13px; margin-top: 0; }
.lv-next { margin-top: 7px; font: 600 12px/1.3 var(--text); color: var(--faint); }
.lv-next b { font-weight: 700; }

/* The armory. */
.armory { display: grid; grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.armory-stage { position: relative; aspect-ratio: 320 / 250; background: #1a1d23; border: 1px solid var(--line-strong); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); overflow: hidden; }
.armory-floor { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 46% 64%, #e9e3d2 0 55%, #d8d1bc 56% 100%); }
.armory-floor::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 12%; height: 9%; background: rgba(20, 24, 32, 0.22); border-radius: 50%; }
.armory-view, .armory-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.armory-fx { pointer-events: none; }
.armory-info { margin-top: var(--s3); display: grid; gap: 6px; }
.armory-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.armory-name { margin: 0; font: italic 900 28px/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.armory-desc { color: var(--muted); font: 500 14px/1.35 var(--text); }
.armory-status { font: 800 13px/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.armory-status.own { color: var(--ok); }
.armory-status.lock { color: var(--gold); }
.armory-equip { margin-top: var(--s1); padding: 12px var(--s4); font-size: 18px; letter-spacing: 0.24em; }
.armory-tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.armory-tab { border: 0; border-radius: 0; background: transparent; padding: 9px 12px 10px; font: 800 14px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); box-shadow: inset 0 -3px 0 transparent; }
.armory-tab[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); background: var(--accent-wash); }
.armory-count { margin-left: auto; font: 700 13px var(--display); letter-spacing: 0.12em; color: var(--faint); }
.armory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--s2); max-height: 62vh; overflow-y: auto; padding: 2px 4px 4px 2px; }
.cos-card {
  position: relative; display: grid; gap: 2px; justify-items: stretch; align-content: start; padding: 8px 8px 8px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); border-top: 3px solid var(--rc, var(--line)); border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
@media (hover: hover) { .cos-card:hover:not(:disabled) { background: var(--panel-3); border-color: var(--line-strong); border-top-color: var(--rc); } }
.cos-card b { font: 700 15px/1.1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-card small { font: 700 11px/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rc); }
.cos-card.worn { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); border-top-color: var(--accent); }
.cos-card.locked .cos-art { filter: grayscale(1) brightness(0.55); opacity: 0.75; }
.cos-card.locked b { color: var(--faint); }
.cos-card.locked small { color: var(--muted); }
.cos-tag { position: absolute; top: 7px; left: 0; padding: 1px 6px 1px 5px; background: var(--accent); color: var(--accent-ink); font: 900 10px/1.3 var(--display); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; }
/* A small padlock, drawn with borders. */
.cos-lock { position: absolute; top: 9px; right: 9px; width: 11px; height: 8px; background: var(--muted); border-radius: 1px; }
.cos-lock::before { content: ""; position: absolute; left: 1.5px; top: -5px; width: 5px; height: 5px; border: 2px solid var(--muted); border-bottom: 0; border-radius: 4px 4px 0 0; }
.armory-notice { margin-top: var(--s2); color: var(--danger); font: 600 13px var(--text); }

/* Challenges. */
.challenges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.chal-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.chal-head h2 { margin-top: 0; }
.chal-reset { font: 700 12px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.chal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.chal { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 12px; background: var(--well); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); }
.chal-text { font: 600 15px/1.2 var(--text); }
.chal-xp { font: 800 16px/1.2 var(--display); color: var(--gold); letter-spacing: 0.04em; }
.chal-bar { grid-column: 1 / -1; height: 7px; background: #0a0b0e; border: 1px solid var(--line); overflow: hidden; }
.chal-bar i { display: block; height: 100%; background: var(--accent); }
.chal-count { grid-column: 1 / 2; grid-row: 3; font: 700 12px var(--display); letter-spacing: 0.1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.chal-gift { grid-column: 2; justify-self: end; font: 800 10px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-style: normal; grid-row: 3; }
.chal.done { border-left-color: var(--ok); }
.chal.done .chal-bar i { background: var(--ok); }
.chal.done .chal-text { color: var(--muted); }
.chal.done .chal-count { color: var(--ok); }
.chal-reward { grid-column: 1 / -1; display: grid; grid-template-columns: 140px 1fr; gap: var(--s3); align-items: center; padding: 10px 14px; background: var(--well); border: 1px solid var(--line); border-top: 3px solid var(--rc); }
.chal-reward-info { display: grid; gap: 4px; justify-items: start; }
.chal-reward-progress { justify-self: stretch; display: grid; gap: 3px; margin-top: 2px; }
.chal-reward-progress .chal-bar, .chal-reward-progress .chal-count { grid-column: auto; grid-row: auto; }
.chal-reward-progress.done .chal-bar i { background: var(--ok); }
.chal-reward-progress.done .chal-count { color: var(--ok); }
.chal-reward-info b { font: italic 900 22px/1 var(--display); text-transform: uppercase; }
.chal-reward-info small { font: 600 12px var(--text); color: var(--muted); letter-spacing: 0; text-transform: none; }
.chal-reward.got { opacity: 0.8; }

/* The XP card, docked at the side where the death card and medals are not. */
.xp-card {
  position: absolute; z-index: 4; right: 16px; top: 214px; width: 300px; max-height: calc(100vh - 214px - 12px); min-height: 120px; overflow-y: auto;
  background: var(--panel-solid); border-top: 2px solid var(--gold); padding: 12px 14px 14px; box-shadow: var(--lift);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.xp-card.in { animation: xp-in 0.38s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes xp-in { from { transform: translateX(40px); opacity: 0; } }
.xp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.xp-head b { font: italic 900 22px/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.xp-close { padding: 0 8px; border: 0; background: transparent; font: 700 22px/1 var(--display); color: var(--muted); }
.xp-lines { list-style: none; margin: 0; padding: 0; }
.xp-lines li { display: flex; justify-content: space-between; gap: var(--s3); padding: 3px 0; border-top: 1px solid var(--line); font: 600 15px/1.2 var(--display); letter-spacing: 0.04em; animation: recap-stamp 0.3s cubic-bezier(.2, 1.5, .4, 1) calc(0.1s + var(--i, 0) * 140ms) both; }
.xp-lines li b { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.xp-lines li.chal span { color: var(--ok); }
.xp-total { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0 8px; border-top: 2px solid var(--line-strong); font: 700 14px var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.xp-total b { font: 900 28px/1 var(--display); letter-spacing: 0.02em; color: var(--gold); font-variant-numeric: tabular-nums; }
.xp-level { position: relative; display: grid; grid-template-columns: auto auto 1fr; gap: 4px 8px; align-items: center; }
.xp-level .xp-bar { grid-column: 1 / -1; }
.xp-level .lv-label { grid-column: 1 / -1; margin-left: 0; text-align: right; }
.xp-stamp {
  position: absolute; right: 0; top: -4px; padding: 3px 10px; background: var(--gold); color: #1c1f26; font: italic 900 22px/1 var(--display); letter-spacing: 0.1em;
  text-transform: uppercase; transform: rotate(-4deg) scale(0); transform-origin: 85% 50%; white-space: nowrap; pointer-events: none;
  box-shadow: 0 0 0 2px #1c1f26, 4px 4px 0 2px #1c1f26;
}
.xp-stamp.hit { animation: xp-stamp 0.55s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes xp-stamp { 0% { transform: rotate(-14deg) scale(2.8); opacity: 0; } 45% { opacity: 1; transform: rotate(-4deg) scale(0.95); } 100% { transform: rotate(-4deg) scale(1); opacity: 1; } }
.xp-reveal { margin-top: var(--s3); border-top: 2px solid var(--rc, var(--gold)); padding-top: var(--s3); animation: recap-stamp 0.4s cubic-bezier(.2, 1.4, .4, 1) both; }
.xp-reveal-main { --r: var(--rc); position: relative; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 10px 8px 6px; overflow: hidden; }
.xp-reveal-main::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--r) 38%, transparent), transparent 62%); pointer-events: none; }
.reveal-rays { position: absolute; left: 50%; top: 28%; width: 260px; aspect-ratio: 1; margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none; opacity: 0.5;
  background: repeating-conic-gradient(color-mix(in srgb, var(--r) 55%, transparent) 0 7deg, transparent 7deg 22.5deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 68%); mask: radial-gradient(circle, #000 10%, transparent 68%); animation: medal-spin 14s linear infinite; }
.xp-reveal-main .cos-art { width: 132px; height: 88px; position: relative; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--r) 70%, transparent)); }
.xp-reveal-info { position: relative; display: grid; gap: 5px; justify-items: center; }
.xp-new { font: 800 11px var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.xp-reveal-name { font: italic 900 26px/1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; text-shadow: 0 2px 0 #0b0c0f; }
.xp-reveal-info p { font: 500 13px/1.3 var(--text); color: var(--muted); }
.xp-actions { display: grid; justify-items: center; gap: 4px; width: 100%; }
.xp-equip { margin-top: 4px; padding: 10px var(--s3); font-size: 18px; letter-spacing: 0.24em; }
.xp-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 4px; }
.xp-chip { padding: 3px 8px; font: 700 12px var(--display); letter-spacing: 0.08em; border-color: var(--rc); color: var(--rc); border-radius: 0; background: transparent; }
.xp-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--rc) 18%, transparent); box-shadow: none; }

.challenge-toast { width: 210px; }
.challenge-toast .medal-name { font-size: 17px; white-space: normal; text-align: center; line-height: 1.05; }
.challenge-toast .medal-banner { background: var(--ok); }

/* The profile page's level, equipped preview and collection. */
.profile-level { display: grid; gap: 4px; min-width: 220px; }
.profile-wear { display: grid; grid-template-columns: 260px 1fr; gap: var(--s4); align-items: center; }
.profile-preview { position: relative; aspect-ratio: 320 / 250; background: radial-gradient(ellipse 70% 55% at 50% 64%, #e9e3d2 0 55%, #d8d1bc 56% 100%); border: 1px solid var(--line-strong); }
.profile-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wear-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wear-list li { display: grid; gap: 1px; padding: 6px 10px; background: var(--well); border: 1px solid var(--line); border-left: 3px solid var(--rc, var(--line)); }
.wear-list small { font: 700 11px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.wear-list b { font: 700 16px/1.1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.collection { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s2); }
.collection div { display: grid; gap: 6px; padding: 10px 12px; background: var(--well); border: 1px solid var(--line); }
.collection b { font: 700 14px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.collection span { font: 800 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.collection span small { font-size: 14px; color: var(--faint); }

@media (max-width: 760px) {
  .armory, .challenges { grid-template-columns: minmax(0, 1fr); }
  .armory-grid { max-height: none; }
  .profile-wear { grid-template-columns: minmax(0, 1fr); }
  .menu-tabs button { padding: 9px 12px; font-size: 14px; letter-spacing: 0.12em; }
}
/* A phone on its side: the card shrinks and sits at the right edge, clear of the death card and the sticks. */
@media (max-height: 519px) {
  .xp-card { width: 236px; right: 8px; top: 8px; padding: 8px 10px 10px; max-height: calc(100vh - 16px); }
  .xp-lines li { font-size: 14px; padding: 3px 0; }
  .xp-total b { font-size: 22px; }
  .xp-reveal-main .cos-art { width: 100px; height: 64px; }
  .xp-reveal-name { font-size: 20px; }
  .xp-reveal-info p { display: none; }
  .challenge-toast { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-card.in, .xp-lines li, .xp-reveal, .xp-stamp.hit { animation-duration: 0.01ms !important; animation-delay: 0s !important; }
  .xp-stamp.hit { transform: rotate(-4deg) scale(1); opacity: 1; }
  .reveal-rays { animation: none; }
}

#profile-level { margin-bottom: var(--s2); }
.xp-lines.folded { display: none; }
/*
 * The full-screen tip, top of the menu wherever the page cannot go fullscreen itself (an iPhone in Safari, viewport.ts): only the
 * home-screen app loses Safari's bars there. It stays until dismissed, so it is there each time a player comes back from a match.
 */
.a2hs {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3);
  margin: 0 0 var(--s3); padding: 8px 10px 8px 12px;
  background: var(--panel-3); border: 2px solid #1c1f26; border-left: 4px solid var(--accent); border-radius: 6px;
  box-shadow: 3px 4px 0 rgba(5, 6, 9, 0.55); color: var(--ink); font: 600 var(--t-label)/1.3 var(--text);
}
.a2hs[hidden] { display: none; }
.a2hs-icon { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.a2hs p { margin: 0; }
.a2hs b { display: block; font: 800 16px/1.1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.a2hs-key { padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 4px; font-weight: 700; white-space: nowrap; }
.a2hs small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.a2hs button { min-height: 44px; padding: 0 var(--s4); }

/*
 * A phone on its side (phonehud.ts places the buttons, the cog and the chat from phonelayout.ts; hud.ts draws the rest): the
 * objective banner folds into the canvas's slim top line, the squad chip's invite link waits in the pause menu, the chat keeps
 * its last line or two in a slim strip between the sticks, and the reload button carries the rounds left in the mag.
 */
body.phone-hud #objective, body.phone-hud #squad-chip { display: none !important; }
body.phone-hud .chat-log { margin: 0; gap: 2px; font-size: 13px; justify-items: center; }
body.phone-hud .chat-log li { padding: 1px 7px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
body.phone-hud .chat-log li:not(:nth-last-child(-n + 2)), body.phone-hud .chat[data-lines="1"] .chat-log li:not(:last-child) { display: none; }
.touch-ammo { display: none; }
body.phone-hud #touch-reload .touch-icon { grid-area: 1 / 1; width: 19px; height: 19px; align-self: start; margin-top: 7px; opacity: 0.8; }
body.phone-hud .touch-ammo {
  display: block; grid-area: 1 / 1; align-self: end; margin-bottom: 6px; position: relative;
  font: 800 19px/1 var(--display); font-variant-numeric: tabular-nums; color: #f0dfa8;
}
body.phone-hud #touch-reload.low .touch-ammo { color: var(--accent-hot); }
body.phone-hud #touch-reload.empty .touch-ammo { color: #ffd5d9; }
body.phone-hud #touch-reload.busy .touch-icon { width: 26px; height: 26px; align-self: center; margin: 0; opacity: 1; }
body.phone-hud .touch-emote { font-size: 14px !important; }
/* The range's readout stands low between the sticks on a phone: the last hit and DPS, and accuracy and time to kill where it is wide enough. */
body.phone-hud .rs-body { gap: 10px; padding: 3px 10px; }
body.phone-hud .rs span { white-space: nowrap; }
body.phone-hud .rs b { font-size: 17px; }
@media (max-width: 899px) { body.phone-hud .rs:nth-child(n + 3) { display: none; } body.phone-hud .rs-grid { grid-template-columns: repeat(2, auto); } }

/*
 * What a phone shows when (phonefocus.ts; phonehud.ts flags the page): the chat folds to a pip while there is something to read
 * and a tap shows its lines; the emote (GG) button comes up only as a round nears its end; the range's readout keeps its last
 * hit until tapped open; medals land as a small chip beside the minimap for a moment.
 */
.chat-pip { display: none; }
body.phone-hud:not(.phone-chat-open) .chat { visibility: hidden; }
body.phone-hud:is(.phone-chat-pip, .phone-chat-open) .chat-pip {
  position: absolute; z-index: 12; display: grid; place-items: center; padding: 0; min-height: 0;
  background: rgba(19, 21, 25, 0.72); border: 2px solid rgba(236, 230, 214, 0.35); border-radius: 50%; touch-action: none;
}
body.phone-hud .chat-pip svg { width: 18px; height: 18px; fill: var(--ink); }
body.phone-hud .chat-pip b {
  position: absolute; top: -3px; right: -3px; min-width: 16px; padding: 1px 4px; border-radius: 8px;
  background: var(--accent); color: #1c1f26; font: 800 12px/14px var(--display); text-align: center;
}
body.phone-hud .chat-pip b:empty, body.phone-hud.phone-chat-open .chat-pip b { display: none; }
body.phone-hud.phone-chat-open .chat-pip { border-color: var(--accent); }
body.phone-hud:not(.phone-gg) .touch-emote { display: none !important; }
body.phone-hud:not(.phone-range-full) :is(.rs-head, .rs:nth-child(n + 2)) { display: none; }
body.phone-hud .rs-grid { cursor: pointer; }
body.phone-hud .medals { transform: none; flex-direction: column; align-items: flex-start; gap: 6px; }
body.phone-hud .medal-toast {
  display: flex; align-items: center; gap: 6px; width: auto; max-width: 100%; height: 30px; padding: 0 10px 0 3px;
  background: var(--panel-3); border: 2px solid #1c1f26; border-left: 3px solid var(--gold); border-radius: 6px; box-shadow: 3px 4px 0 rgba(5, 6, 9, 0.55);
  animation: medal-chip-in 0.18s cubic-bezier(.2, 1.5, .4, 1) both, medal-out 0.3s ease-in 1.5s both;
}
body.phone-hud .medal-toast.career { width: auto; }
body.phone-hud .medal-art, body.phone-hud .medal-toast.career .medal-art { flex: none; width: 26px; height: 26px; filter: none; animation: none; }
body.phone-hud .medal-art svg { width: 26px; height: 26px; }
body.phone-hud :is(.medal-rays, .medal-ring, .medal-spark, .medal-shine, .medal-banner) { display: none; }
body.phone-hud .medal-art::after { display: none; }
body.phone-hud .medal-name, body.phone-hud .medal-toast.career .medal-name { min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: none; }
body.phone-hud .medal-score { font-size: 14px; animation: none; }
@keyframes medal-chip-in { from { transform: translateX(-12px) scale(0.9); opacity: 0; } }

/*
 * The death card on a phone on its side (deathflow.ts): phonehud.ts sizes #death to the visible screen inside the insets and
 * clear of the cog, and the card shows one step at a time with only what matters. Stats is the killer, the gun, one gold line
 * and Try again (More opens the tiles, records and nemesis); Loadout is weapon, color and armor as three labelled rows of
 * touch-sized chips, with Respawn always in view under them. The touch controls fold away while you are dead.
 */
.hud.no-touch-controls :is(.touch-buttons, .touch-emote, .touch-radio, .chat-pip) { display: none !important; }
.death.compact { padding: 0; align-items: center; justify-content: center; background: rgba(12, 13, 16, 0.55); box-shadow: 0 0 0 100vmax rgba(12, 13, 16, 0.55); }
.death.compact .death-card { width: 100%; --cut: 10px; }
.death.compact .death-body { padding: 14px 16px 2px; }
.death.compact .death-foot { padding: 8px 10px 10px; gap: var(--s2); min-height: 52px; }
.death.compact .death-foot button { min-height: 44px; }
.death.compact .death-foot #respawn { flex: 0 1 260px; margin: 0 0 0 auto; font-size: 20px; }
.death.compact .death-body > h2:first-child { font-size: 24px; line-height: 1.05; overflow-wrap: anywhere; }
/* Stats is three short lines: the buttons sit right under them, with no strip between. */
.death.compact[data-step="stats"] .death-body { flex: 0 1 auto; padding-bottom: 0; }
.death.compact[data-step="stats"] .death-foot { padding-top: 4px; min-height: 0; }
.death.compact .death-cause { font-size: 15px; }
.death.compact .death-gist { font-size: 14px; }
.death.compact .recap { margin-top: var(--s3); }
.death.compact .recap-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.death.compact .recap-stat { padding: 8px 4px 5px; animation-delay: calc(var(--i, 0) * 50ms); }
.death.compact .recap-stat b { font-size: 20px; }
.death.compact .recap-stat span { font-size: 10px; letter-spacing: 0.12em; }
.death.compact .recap-stat i { font-size: 9px; top: -7px; padding: 1px 4px; }
.death.compact .recap-bests, .death.compact .recap-nemesis { font-size: 13px; margin-top: 6px; }
.death.compact .recap-nemesis { padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.death.compact .death-lost { margin-top: 6px; }
.death.compact .death-enlist { margin-top: 6px; font-size: 13px; }
/* The XP card folds into More here (deathflow.ts `xpInMore`): a plate in the column, as wide as the body, never over the card's edge. */
.death-more > .xp-card {
  position: static; width: auto; max-width: 100%; min-height: 0; max-height: none; overflow: visible; margin-top: var(--s3);
  padding: 8px 12px 10px; background: var(--well); box-shadow: none; animation: none;
}
.death-more > .xp-card .xp-close { display: none; }
/* With an unlock, the report and the reveal sit side by side, so More stays one short scroll. */
.death-more > .xp-card:has(.xp-reveal) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; align-items: start; }
.death-more > .xp-card > :not(.xp-reveal) { grid-column: 1; }
.death-more > .xp-card > .xp-reveal { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; padding-top: 0; border-top: 0; }
.death-more > .xp-card .xp-head b { font-size: 18px; }
/* While it waits behind More, a gold diamond on the toggle says there is a report to read. */
.death-more-toggle.has-xp::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; vertical-align: 2px; background: var(--gold); transform: rotate(45deg);
}
/* Loadout: a narrow label column, then the chips. */
.death.compact[data-step="loadout"] .death-body { padding-top: 10px; }
.death.compact #loadout-death { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px 8px; align-items: center; }
.death.compact #loadout-death h2 { margin: 0; font-size: 12px; letter-spacing: 0.12em; }
.death.compact #loadout-death h2::before { display: none; }
.death.compact .weapons { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.death.compact .weapon { padding: 4px 2px 5px; gap: 2px; min-height: 44px; }
.death.compact .weapon .gun-art { max-width: 100%; }
.death.compact .weapon b { font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; }
.death.compact .weapon small, .death.compact .armor small { display: none; }
.death.compact .armors { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.death.compact .armor { padding: 6px 6px 7px; min-height: 44px; align-content: center; }
.death.compact .armor b { font-size: 14px; }
.death.compact .swatches { gap: 8px; }
.death.compact .swatch { width: 40px; height: 40px; }