/* Hero Section */
.hero {
  padding: 72px 20px 48px;
}

.hero-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
  gap: 28px;
  align-items: stretch;
}

.hero-copy {
  position: relative;
  padding: 38px 8px 28px 0;
  z-index: 1;
}

.hero-copy::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(71, 215, 255, 0.2), transparent 68%);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(126, 166, 207, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.hero h1 {
  max-width: 11ch;
  font-size: clamp(3.4rem, 9vw, 6.8rem);
  /* max-width: 11ch guarantees this wraps, so a line box shorter than the
     glyphs guarantees the lines collide. 1.02 keeps the tight display look
     and leaves the descenders somewhere to go. */
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.06em;
  /* letter-spacing is applied after every character INCLUDING the space, so
     negative tracking shrinks the word gap as well as the letter fit. This
     restores exactly what the tracking removed from the space, leaving the
     letterforms as tight as designed. */
  word-spacing: 0.06em;
  margin-bottom: 18px;
}

.hero .subtitle {
  max-width: 640px;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: var(--text-soft);
  margin-bottom: 30px;
}

.hero .cta-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.hero-ticker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}

.hero-ticker span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(126, 166, 207, 0.12);
  color: var(--text-muted);
  font-size: 0.83rem;
  animation: hero-chip-float 4.8s ease-in-out infinite;
}

.hero-ticker span:nth-child(2) { animation-delay: 0.6s; }
.hero-ticker span:nth-child(3) { animation-delay: 1.2s; }
.hero-ticker span:nth-child(4) { animation-delay: 1.8s; }

.hero-spotlight {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
}

.hero-spotlight-head h2 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  /* letter-spacing is applied after every character INCLUDING the space, so
     negative tracking shrinks the word gap as well as the letter fit. This
     restores exactly what the tracking removed from the space, leaving the
     letterforms as tight as designed. */
  word-spacing: 0.04em;
}

.hero-spotlight-kicker {
  color: var(--accent-blue);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hero-spotlight-panel {
  display: grid;
  gap: 14px;
}

.spotlight-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(126, 166, 207, 0.12);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.spotlight-row:hover {
  transform: translateX(4px);
  border-color: rgba(71, 215, 255, 0.18);
  background: rgba(255, 255, 255, 0.055);
}

.spotlight-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spotlight-value {
  color: var(--text-primary);
  font-weight: 600;
}

.hero-feature-list {
  display: grid;
  gap: 10px;
  padding-left: 0;
  list-style: none;
}

.hero-feature-list li {
  padding-left: 24px;
  position: relative;
  color: var(--text-soft);
}

.hero-feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-gold));
  box-shadow: 0 0 12px rgba(71, 215, 255, 0.4);
}

/* Arena Viewer */
.arena-section {
  position: relative;
  padding: 10px 20px 80px;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 2;
}

.arena-section::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(71, 215, 255, 0.08), transparent 40%),
    rgba(4, 8, 14, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 90;
}

.arena-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 22px;
  padding: 26px;
  border-radius: 32px;
  border: 1px solid rgba(126, 166, 207, 0.14);
  background:
    radial-gradient(circle at top right, rgba(71, 215, 255, 0.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(255, 206, 84, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(9, 18, 30, 0.9), rgba(5, 11, 19, 0.92));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
  /* arena-surface-drift removed: it animated box-shadow (a paint property)
     on a ~1400px shell every frame, re-rasterizing a large soft-shadow
     region in the same frame budget the WebGL canvas needs. */
  transition: padding 0.28s ease, border-radius 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

/* Combat-reactive overlay: pre-rasterized, opacity-only one-shot flashes
   driven by app.js (combat-flash on kills, round-sweep on round start).
   Composites on the GPU; costs nothing between events. */
.arena-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 40%, rgba(255, 95, 87, 0.2), transparent 65%);
  box-shadow: inset 0 0 0 2px rgba(255, 95, 87, 0.4);
}

.arena-shell.combat-flash::after {
  animation: shell-flash 0.7s ease-out;
}

.arena-shell.round-sweep::after {
  background: radial-gradient(circle at 50% 40%, rgba(71, 215, 255, 0.18), transparent 65%);
  box-shadow: inset 0 0 0 2px rgba(71, 215, 255, 0.4);
  animation: shell-flash 0.9s ease-out;
}

@keyframes shell-flash {
  0% { opacity: 0; }
  25% { opacity: 0.85; }
  100% { opacity: 0; }
}

.arena-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 35%, transparent 65%, rgba(71, 215, 255, 0.04));
  pointer-events: none;
  z-index: 0;
}

.arena-shell > * {
  position: relative;
  z-index: 1;
}

.arena-shell-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.arena-shell-copy {
  max-width: 62ch;
}

.arena-shell-kicker,
.arena-sidebar-kicker {
  color: var(--accent-blue);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.arena-shell-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  /* letter-spacing is applied after every character INCLUDING the space, so
     negative tracking shrinks the word gap as well as the letter fit. This
     restores exactly what the tracking removed from the space, leaving the
     letterforms as tight as designed. */
  word-spacing: 0.05em;
  margin-bottom: 10px;
}

.arena-shell-status {
  display: flex;
  justify-content: flex-end;
}

.arena-shell-pill {
  display: grid;
  gap: 8px;
  min-width: 220px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(126, 166, 207, 0.14);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.arena-shell-pill-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.arena-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  height: clamp(560px, 72vh, 860px);
  min-height: 620px;
  align-items: stretch;
  transition: gap 0.28s ease, height 0.28s ease;
}

.arena-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px;
  height: 100%;
  min-height: 0;
}

.arena-container {
  position: relative;
  min-width: 0;
  min-height: 560px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(126, 166, 207, 0.12);
  background:
    radial-gradient(circle at top, rgba(71, 215, 255, 0.1), transparent 32%),
    linear-gradient(180deg, #040912, #06111c 58%, #03060a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-radius 0.28s ease, min-height 0.28s ease, box-shadow 0.28s ease;
}

.arena-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(71, 215, 255, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 0;
}

.arena-container canvas#arena-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.arena-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  height: 100%;
  min-height: 0;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(126, 166, 207, 0.12);
  background:
    linear-gradient(180deg, rgba(11, 20, 32, 0.96), rgba(7, 13, 22, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  /* Same list and timing as the Spectator HUD card (.hud-round), so the
     Hide/Show-feed collapse morphs identically instead of popping. */
  transition: width 0.18s ease, padding 0.18s ease, border-radius 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

/* Applied for one frame when the persisted collapsed state is restored on
   page load, so the pill doesn't animate shut in front of the visitor. */
.arena-sidebar.no-transition {
  transition: none;
}

.arena-sidebar-intro h3 {
  font-size: 1.3rem;
  line-height: 1.02;
  letter-spacing: -0.04em;
  /* letter-spacing is applied after every character INCLUDING the space, so
     negative tracking shrinks the word gap as well as the letter fit. This
     restores exactly what the tracking removed from the space, leaving the
     letterforms as tight as designed. */
  word-spacing: 0.04em;
  margin-bottom: 8px;
}

.arena-sidebar-intro p:last-child {
  color: var(--text-soft);
  font-size: 0.92rem;
}

body.arena-fullscreen {
  overflow: hidden;
  padding-right: var(--arena-scrollbar-comp, 0px);
}

.arena-section.is-floating::before {
  opacity: 1;
}

.arena-shell.is-floating {
  position: fixed;
  margin: 0;
  z-index: 120;
  max-width: none;
  animation: none;
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.42);
  transition:
    top 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.36s ease;
  will-change: top, left, width, height;
}

.arena-shell.is-floating .arena-layout {
  height: 100%;
  min-height: 0;
}

.arena-shell.is-floating .arena-stage,
.arena-shell.is-floating .arena-sidebar,
.arena-shell.is-floating .arena-container,
.arena-shell.is-floating .arena-tab-content,
.arena-shell.is-floating .arena-tab-panel {
  min-height: 0;
  height: 100%;
}

.arena-tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(126, 166, 207, 0.08);
}

.arena-tab {
  flex: 1;
  padding: 11px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  text-align: center;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.arena-tab:hover {
  color: var(--text-primary);
  transform: translateY(-1px);
}

.arena-tab.active {
  color: var(--text-primary);
  border-color: rgba(71, 215, 255, 0.34);
  background: linear-gradient(135deg, rgba(71, 215, 255, 0.14), rgba(255, 206, 84, 0.1));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14), inset 0 0 14px rgba(71, 215, 255, 0.08);
  text-shadow: 0 0 10px rgba(71, 215, 255, 0.35);
}

.arena-tab-content {
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(71, 215, 255, 0.1);
  background: rgba(4, 10, 18, 0.46);
}

.arena-tab-panel {
  display: none;
  padding: 14px;
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.arena-tab-panel.active { display: block; }

.hud-killfeed {
  display: grid;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  min-height: 28px;
}

.hud-killfeed:empty::after {
  content: 'No recent kills';
  color: var(--text-muted);
  font-style: italic;
}

.killfeed-entry {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(126, 166, 207, 0.08);
  background: linear-gradient(180deg, rgba(14, 24, 38, 0.82), rgba(8, 14, 24, 0.78));
}

/* One-shot red glow flash behind a fresh kill entry (opacity-only). */
.killfeed-entry::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 95, 87, 0.16);
  opacity: 0;
  pointer-events: none;
}

.killfeed-entry.killfeed-new::before {
  animation: killfeed-flash 0.6s ease-out;
}

.killfeed-entry.killfeed-new {
  animation: killfeed-in 0.3s ease-out;
}

.killfeed-entry.killfeed-out {
  animation: killfeed-fade 0.5s ease-out forwards;
}

.killfeed-entry .killer { color: var(--accent-blue); }
.killfeed-entry .victim { color: var(--accent-red); }
.killfeed-entry .weapon {
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Bot taunts share the kill feed panel but read as banter, not combat. */
.killfeed-entry.killfeed-taunt .taunt-text {
  color: var(--accent-gold);
  font-style: italic;
}

@keyframes killfeed-in {
  from { transform: translateX(-16px) scale(0.96); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes killfeed-fade {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(6px) scale(0.98); }
}

@keyframes killfeed-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.hud-players,
.hud-lobby {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.hud-players:empty::after {
  content: 'No players connected';
  color: var(--text-muted);
  font-style: italic;
}

.hud-lobby:empty::after {
  content: 'No bots in lobby';
  color: var(--text-muted);
  font-style: italic;
}

.player-entry {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(126, 166, 207, 0.08);
  background: linear-gradient(180deg, rgba(13, 23, 36, 0.78), rgba(8, 14, 24, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}

.player-entry.selectable {
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.player-entry.selectable:hover {
  background: linear-gradient(180deg, rgba(16, 29, 46, 0.92), rgba(10, 18, 29, 0.84));
  border-color: rgba(71, 215, 255, 0.18);
  transform: translateX(2px);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.16);
}

.player-entry.selectable.selected {
  background: linear-gradient(180deg, rgba(31, 30, 23, 0.92), rgba(17, 15, 10, 0.82));
  border-color: rgba(255, 215, 0, 0.24);
}

.player-entry.dead { opacity: 0.42; }

.player-entry-main,
.player-entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-entry-main {
  justify-content: space-between;
}

.player-entry-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.player-entry-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-entry-status {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.player-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(126, 166, 207, 0.08);
  color: var(--text-soft);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.hud-round {
  position: absolute;
  top: 14px;
  left: 14px;
  width: min(244px, calc(100% - 28px));
  padding: 12px;
  background:
    radial-gradient(circle at top right, rgba(71, 215, 255, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(8, 15, 24, 0.88), rgba(6, 11, 18, 0.92));
  border-radius: 18px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  z-index: 10;
  border: 1px solid rgba(71, 215, 255, 0.26);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28), 0 0 18px rgba(71, 215, 255, 0.1);
  overflow: hidden;
  transition: width 0.18s ease, padding 0.18s ease, border-radius 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.hud-round::after {
  content: '';
  position: absolute;
  inset: auto -18px -18px auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid rgba(71, 215, 255, 0.12);
  opacity: 0.4;
}

.hud-round.is-collapsed {
  width: auto;
  min-width: 0;
  padding: 0;
  overflow: visible;
}

.hud-round.is-collapsed::after {
  display: none;
}

/* ---- Intermission show overlays (issue #189) --------------------------- */
/* Full-canvas, pointer-transparent layer inside .arena-container hosting  */
/* the winner banner (phase A) and the round title card (phase C). Both    */
/* fade with opacity/transform only, so they read fine under               */
/* prefers-reduced-motion (fades are kept by design).                      */

.intermission-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 12;
  overflow: hidden;
}

.intermission-banner,
.intermission-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 30px;
  background:
    radial-gradient(circle at top, rgba(255, 206, 84, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(8, 15, 24, 0.9), rgba(6, 11, 18, 0.94));
  border: 1px solid rgba(255, 206, 84, 0.28);
  border-radius: 18px;
  font-family: var(--font-mono);
  text-align: center;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3), 0 0 18px rgba(255, 206, 84, 0.1);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.intermission-banner {
  margin-top: clamp(48px, 14%, 120px);
}

.intermission-banner.visible,
.intermission-title.visible {
  opacity: 1;
  transform: translateY(0);
}

.intermission-banner-kicker {
  color: var(--accent-gold);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 206, 84, 0.4);
}

.intermission-banner-name {
  color: var(--text-primary, #fff);
  font-size: clamp(1.3rem, 3.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.22);
}

.intermission-title {
  margin-top: auto;
  margin-bottom: clamp(40px, 12%, 96px);
  border-color: rgba(71, 215, 255, 0.26);
  background:
    radial-gradient(circle at top, rgba(71, 215, 255, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(8, 15, 24, 0.9), rgba(6, 11, 18, 0.94));
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3), 0 0 18px rgba(71, 215, 255, 0.1);
}

.intermission-title-round {
  color: var(--accent-blue);
  font-size: clamp(1.05rem, 2.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-shadow: 0 0 12px rgba(71, 215, 255, 0.4);
}

.intermission-title-shape {
  color: var(--text-soft, #b8c8dd);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hud-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.hud-overline {
  color: var(--accent-blue);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
  text-shadow: 0 0 10px rgba(71, 215, 255, 0.45);
}

.hud-topline .hud-overline,
.hud-compact-toggle .hud-overline {
  margin-bottom: 0;
}

.hud-collapse-btn,
.hud-compact-toggle {
  appearance: none;
  border: 1px solid rgba(126, 166, 207, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
}

.hud-collapse-btn {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.hud-collapse-btn:hover,
.hud-compact-toggle:hover {
  background: rgba(71, 215, 255, 0.08);
  border-color: rgba(71, 215, 255, 0.26);
  color: var(--text-primary);
}

.hud-compact-toggle {
  display: grid;
  gap: 4px;
  width: auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 16px;
  text-align: left;
}

.hud-compact-title {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  /* letter-spacing is applied after every character INCLUDING the space, so
     negative tracking shrinks the word gap as well as the letter fit. This
     restores exactly what the tracking removed from the space, leaving the
     letterforms as tight as designed. */
  word-spacing: 0.03em;
}

.hud-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.hud-title {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  /* Display type elsewhere on the site sets line-height below 1 deliberately,
     which is fine for a single-line masthead. This label is small AND it wraps
     every round the map has a shape ("Round 77 . diamond"), and a line box
     shorter than the glyphs makes the two lines sit on top of each other.
     1.12 keeps it tight without letting wrapped lines collide. */
  line-height: 1.12;
  /* -0.04em was pulling glyphs together at ~16px, where there is no display
     size to carry it. */
  letter-spacing: -0.02em;
  /* letter-spacing is applied after every character INCLUDING the space, so
     negative tracking shrinks the word gap as well as the letter fit. This
     restores exactly what the tracking removed from the space, leaving the
     letterforms as tight as designed. */
  word-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(71, 215, 255, 0.22);
  /* A flex item defaults to min-width:auto, so this refused to shrink and
     instead forced its own early wrap next to the phase chip. */
  min-width: 0;
  text-wrap: balance;
}

.hud-phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* The chip is short and fixed; let the title take the remaining width
     instead of both of them competing and the title wrapping early. */
  flex-shrink: 0;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(126, 166, 207, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-soft);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hud-phase::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 14px rgba(255, 206, 84, 0.4);
}

/* Sudden death: the phase chip becomes a pulsing red warning; stall (nobody
   fighting, everyone taking ramping damage) pulses harder and faster. */
.hud-phase.is-sudden-death {
  color: #ff8391;
  border-color: rgba(255, 70, 92, 0.55);
  background: rgba(255, 51, 85, 0.14);
  animation: hud-sudden-death-pulse 1.4s ease-in-out infinite;
}

.hud-phase.is-sudden-death::before {
  background: #ff3355;
  box-shadow: 0 0 14px rgba(255, 51, 85, 0.65);
}

.hud-phase.is-sudden-death.is-stall {
  animation-duration: 0.6s;
  background: rgba(255, 51, 85, 0.24);
}

@keyframes hud-sudden-death-pulse {
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .hud-phase.is-sudden-death {
    animation: none;
  }
}

.hud-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hud-metric {
  padding: 8px 9px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(71, 215, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(71, 215, 255, 0.1);
}

.hud-metric-label {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hud-metric-value {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  /* letter-spacing is applied after every character INCLUDING the space, so
     negative tracking shrinks the word gap as well as the letter fit. This
     restores exactly what the tracking removed from the space, leaving the
     letterforms as tight as designed. */
  word-spacing: 0.03em;
}

.arena-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  flex-wrap: wrap;
  border-radius: 24px;
  border: 1px solid rgba(126, 166, 207, 0.12);
  background: rgba(7, 14, 23, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.arena-controls label {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.arena-controls input[type="range"] {
  width: 136px;
  accent-color: var(--accent-blue);
}

.arena-controls select {
  min-width: 132px;
  padding: 10px 12px;
  background: rgba(8, 15, 24, 0.82);
  color: var(--text-primary);
  border: 1px solid rgba(126, 166, 207, 0.12);
  border-radius: 12px;
  font-size: 0.85rem;
}

.arena-controls .control-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(126, 166, 207, 0.1);
}

.control-group-actions {
  margin-left: auto;
}

.arena-control-btn {
  padding: 10px 14px;
  font-size: 0.78rem;
}

.arena-control-btn.active {
  border-color: rgba(71, 215, 255, 0.24);
  background: rgba(71, 215, 255, 0.12);
  color: var(--text-primary);
}

.arena-control-btn#fullscreen-btn.active {
  border-color: rgba(255, 206, 84, 0.3);
  background: rgba(255, 206, 84, 0.12);
}

.zoom-readout {
  min-width: 2.2rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-soft);
}

.ws-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-soft);
  font-family: var(--font-mono);
}

.ws-status .dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-orange);
  box-shadow: 0 0 12px rgba(255, 138, 61, 0.45);
}

.ws-status.connected .dot {
  background: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
  animation: live-dot-pulse 1.6s ease-in-out infinite;
}

/* Halo breathes via opacity on a pseudo (never animate box-shadow). */
.ws-status.connected .dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 14px 4px rgba(34, 197, 94, 0.5);
  animation: live-dot-halo 1.6s ease-in-out infinite;
}

@keyframes live-dot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

@keyframes live-dot-halo {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0; }
}

/* Leaderboard */
.leaderboard-mode-tabs {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.55);
}

.leaderboard-mode-tabs button {
  padding: 9px 16px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, transform 0.2s;
}

.leaderboard-mode-tabs button.active {
  background: linear-gradient(135deg, rgba(71, 215, 255, 0.18), rgba(255, 206, 84, 0.16));
  color: var(--text-primary);
  animation: pulse-outline 2.8s ease-in-out infinite;
}

.leaderboard-panels {
  position: relative;
  min-height: 560px;
  overflow: hidden;
}

.leaderboard-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(24px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.leaderboard-panel.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.leaderboard-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 16px;
  padding: 0 4px 6px;
  border-bottom: 1px solid rgba(126, 166, 207, 0.14);
  border-radius: 16px;
  background: rgba(6, 11, 18, 0.28);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.leaderboard-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.podium-card {
  position: relative;
  padding: 16px 16px 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 35%),
    linear-gradient(180deg, rgba(15, 24, 38, 0.9), rgba(8, 15, 24, 0.82));
  border: 1px solid rgba(126, 166, 207, 0.12);
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.podium-card::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--podium-accent), transparent);
  opacity: 0.9;
}

.podium-card:hover {
  transform: translateY(-3px);
  border-color: rgba(126, 166, 207, 0.22);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.24);
}

.podium-rank {
  color: var(--podium-accent);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.podium-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.podium-name-row strong {
  font-size: 1rem;
  line-height: 1.1;
}

.podium-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}

.podium-metric {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
}

.podium-metric-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.podium-metric-value {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  /* letter-spacing is applied after every character INCLUDING the space, so
     negative tracking shrinks the word gap as well as the letter fit. This
     restores exactly what the tracking removed from the space, leaving the
     letterforms as tight as designed. */
  word-spacing: 0.04em;
}

.podium-substats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-family: var(--font-mono);
}

.leaderboard-tabs button {
  padding: 10px 18px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}

.leaderboard-tabs button.active {
  color: var(--accent-blue);
  border-bottom-color: var(--accent-blue);
}

.leaderboard-scroll {
  max-height: 480px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(126, 166, 207, 0.08);
  background: rgba(6, 11, 18, 0.42);
}

.leaderboard-scroll-inner {
  max-height: inherit;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.leaderboard-table thead {
  position: sticky;
  top: 0;
  background: rgba(12, 20, 32, 0.96);
  z-index: 1;
}

.leaderboard-table th {
  text-align: left;
  padding: 12px 14px;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(126, 166, 207, 0.1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.leaderboard-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(30, 41, 59, 0.3);
}

.leaderboard-table tr:hover { background: rgba(71, 215, 255, 0.03); }
.leaderboard-widget-overlay {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.leaderboard-widget-overlay .leaderboard-panels {
  min-height: clamp(560px, 70vh, 940px);
  height: 100%;
  flex: 1;
}

.leaderboard-widget-overlay .leaderboard-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.leaderboard-widget-overlay .leaderboard-scroll {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.leaderboard-widget-overlay .leaderboard-podium { margin-top: 4px; }
#standings-boards .leaderboard-panel[data-board="leaderboard"] {
  gap: 12px;
}

#standings-boards .leaderboard-panel[data-board="leaderboard"] .leaderboard-podium {
  gap: 10px;
  margin-bottom: 10px;
}

#standings-boards .leaderboard-panel[data-board="leaderboard"] .podium-card {
  padding: 12px 14px 11px;
}

#standings-boards .leaderboard-panel[data-board="leaderboard"] .podium-rank {
  margin-bottom: 8px;
}

#standings-boards .leaderboard-panel[data-board="leaderboard"] .podium-name-row {
  margin-bottom: 10px;
}

#standings-boards .leaderboard-panel[data-board="leaderboard"] .podium-metric {
  margin-bottom: 8px;
}

#standings-boards .leaderboard-panel[data-board="leaderboard"] .podium-metric-value {
  font-size: 1.22rem;
}

#standings-boards .leaderboard-panel[data-board="leaderboard"] .podium-substats {
  gap: 8px;
  font-size: 0.76rem;
}

#standings-boards .leaderboard-panel[data-board="leaderboard"] .leaderboard-tabs {
  margin-bottom: 12px;
}

#standings-boards .leaderboard-panel[data-board="leaderboard"] .leaderboard-tabs button {
  padding: 8px 16px;
}

#standings-boards .leaderboard-panel[data-board="leaderboard"] .leaderboard-table th,
#standings-boards .leaderboard-panel[data-board="leaderboard"] .leaderboard-table td {
  padding: 10px 12px;
}
.rank-1 td:first-child { color: var(--accent-gold); font-weight: 700; }
.rank-2 td:first-child { color: #d7dde6; font-weight: 700; }
.rank-3 td:first-child { color: #ffb57a; font-weight: 700; }

.bounty-board-intro {
  margin-bottom: 14px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.bounty-bot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bounty-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}

.bounty-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  background: rgba(255, 215, 0, 0.12);
  color: var(--accent-gold);
  border: 1px solid rgba(255, 215, 0, 0.18);
}

.bounty-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.bounty-status.live {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.24);
}

.bounty-status.dormant {
  background: rgba(71, 215, 255, 0.08);
  color: var(--accent-blue);
  border: 1px solid rgba(71, 215, 255, 0.18);
}

.weapon-stats-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.weapon-stats-updated {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.weapon-stats-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.weapon-podium-card strong {
  font-size: 1.08rem;
}

.weapon-stats-scroll {
  max-height: clamp(340px, 42vh, 560px);
}

.weapon-stats-table td {
  vertical-align: middle;
}

.weapon-name-cell {
  display: grid;
  gap: 2px;
}

.weapon-name-cell strong {
  font-size: 0.92rem;
}

.weapon-name-cell span {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-family: var(--font-mono);
}

.weapon-stat-value {
  display: inline-grid;
  gap: 3px;
  position: relative;
}

.weapon-stat-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.weapon-stat-main {
  font-weight: 600;
}

.weapon-stat-trend {
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.weapon-stat-delta {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.weapon-stat-base {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.1;
}

.weapon-stat-value.buffed .weapon-stat-trend {
  color: #58e58f;
}

.weapon-stat-value.nerfed .weapon-stat-trend {
  color: #ff7b72;
}

.weapon-stat-value.flat .weapon-stat-trend {
  color: var(--text-muted);
}

.weapon-balance-signal {
  display: inline-grid;
  gap: 3px;
  min-width: 96px;
  position: relative;
}

.weapon-balance-label {
  font-size: 0.78rem;
  font-weight: 600;
}

.weapon-balance-delta,
.weapon-balance-rounds {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.weapon-balance-signal.buffed .weapon-balance-label {
  color: #58e58f;
}

.weapon-balance-signal.nerfed .weapon-balance-label {
  color: #ff7b72;
}

.weapon-balance-signal.flat .weapon-balance-label {
  color: var(--text-muted);
}

.weapon-history-tooltip {
  position: absolute;
  top: 50%;
  width: 240px;
  max-width: min(240px, calc(100vw - 48px));
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(71, 215, 255, 0.18);
  background: rgba(4, 12, 24, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 20;
}

.weapon-stat-value.tooltip-right .weapon-history-tooltip,
.weapon-balance-signal.tooltip-right .weapon-history-tooltip {
  left: calc(100% + 14px);
  transform: translateY(-50%) translateX(-8px);
}

.weapon-stat-value.tooltip-left .weapon-history-tooltip,
.weapon-balance-signal.tooltip-left .weapon-history-tooltip {
  right: calc(100% + 14px);
  transform: translateY(-50%) translateX(8px);
}

.weapon-stat-value:hover .weapon-history-tooltip,
.weapon-balance-signal:hover .weapon-history-tooltip {
  opacity: 1;
}

.weapon-stat-value.tooltip-right:hover .weapon-history-tooltip,
.weapon-balance-signal.tooltip-right:hover .weapon-history-tooltip {
  transform: translateY(-50%) translateX(0);
}

.weapon-stat-value.tooltip-left:hover .weapon-history-tooltip,
.weapon-balance-signal.tooltip-left:hover .weapon-history-tooltip {
  transform: translateY(-50%) translateX(0);
}

.weapon-history-title {
  display: block;
  margin-bottom: 10px;
  color: var(--text-primary);
  font-size: 0.74rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.weapon-history-chart {
  display: block;
  width: 100%;
  height: 72px;
  margin-bottom: 8px;
  overflow: visible;
}

.weapon-history-baseline {
  stroke: rgba(145, 166, 189, 0.22);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.weapon-history-area {
  fill: rgba(71, 215, 255, 0.16);
}

.weapon-history-chart polyline {
  fill: none;
  stroke: var(--accent-blue);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(71, 215, 255, 0.32));
}

.weapon-history-point {
  fill: var(--accent-gold);
  stroke: rgba(4, 12, 24, 0.96);
  stroke-width: 1.5;
}

.weapon-history-meta {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.weapon-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
}

.weapon-tier.tier-S {
  background: rgba(255, 206, 84, 0.16);
  color: var(--accent-gold);
  border-color: rgba(255, 206, 84, 0.28);
}

.weapon-tier.tier-A {
  background: rgba(71, 215, 255, 0.12);
  color: var(--accent-blue);
  border-color: rgba(71, 215, 255, 0.24);
}

.weapon-tier.tier-B {
  background: rgba(126, 166, 207, 0.12);
  color: #d7dde6;
  border-color: rgba(126, 166, 207, 0.22);
}

.weapon-tier.tier-C {
  background: rgba(255, 138, 61, 0.12);
  color: #ffb57a;
  border-color: rgba(255, 138, 61, 0.22);
}

/* Key Generator */
.keygen-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: 26px;
  align-items: stretch;
}

.keygen-brief {
  padding: 16px 6px 0 0;
}

.keygen-kicker,
.keygen-panel-kicker {
  color: var(--accent-blue);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.keygen-brief .subtitle {
  color: var(--text-soft);
  max-width: 56ch;
  margin-bottom: 24px;
}

.keygen-traits {
  display: grid;
  gap: 12px;
}

.keygen-trait {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(126, 166, 207, 0.12);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.keygen-trait:hover {
  transform: translateX(4px);
  border-color: rgba(255, 206, 84, 0.18);
  background: rgba(255, 255, 255, 0.055);
}

.keygen-trait-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}

.keygen-panel {
  position: relative;
  min-height: 100%;
}

.keygen-panel-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}

.keygen-panel h3 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  /* letter-spacing is applied after every character INCLUDING the space, so
     negative tracking shrinks the word gap as well as the letter fit. This
     restores exactly what the tracking removed from the space, leaving the
     letterforms as tight as designed. */
  word-spacing: 0.04em;
}

.keygen-panel-copy {
  color: var(--text-soft);
  max-width: 38ch;
  margin-bottom: 6px;
}

.keygen-panel .keygen-btn {
  align-self: flex-start;
}

.keygen-orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(71, 215, 255, 0.12);
  pointer-events: none;
}

.keygen-orbit-a {
  width: 220px;
  height: 220px;
  top: -70px;
  right: -40px;
  animation: slow-spin 16s linear infinite;
}

.keygen-orbit-b {
  width: 140px;
  height: 140px;
  bottom: -30px;
  left: -24px;
  border-color: rgba(255, 206, 84, 0.12);
  animation: slow-spin-reverse 12s linear infinite;
}

.keygen-result {
  margin-top: auto;
  min-height: 176px;
}

.keygen-result:empty::before {
  content: '';
  display: block;
  min-height: 176px;
}

.keygen-result-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.keygen-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(71, 215, 255, 0.08);
  border: 1px solid rgba(71, 215, 255, 0.18);
  color: var(--accent-blue);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.keygen-copy-field {
  margin-top: 0;
}

.keygen-copy-field input {
  box-shadow: inset 0 0 0 1px rgba(71, 215, 255, 0.04);
}

.keygen-meta {
  margin-top: 0;
  display: grid;
  gap: 8px;
}

.keygen-warning {
  color: var(--accent-gold);
  font-size: 0.85rem;
  font-family: var(--font-mono);
}

.keygen-bot-id {
  color: var(--text-soft);
  font-size: 0.92rem;
}

.keygen-bot-id code {
  color: var(--accent-blue);
}

.keygen-next-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 600;
}

.keygen-next-link:hover {
  color: var(--text-primary);
}

.keygen-error {
  color: var(--accent-red);
  margin-top: 12px;
}

.keygen-success {
  margin-top: 0;
  display: grid;
  gap: 12px;
}

/* Getting Started */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
}

.steps li {
  counter-increment: step;
  padding: 12px 0 12px 48px;
  position: relative;
  border-left: 2px solid rgba(126, 166, 207, 0.12);
  margin-left: 16px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: -15px;
  top: 10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--accent-blue), #8fe7ff);
  color: #04111c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

pre.code-block {
  background: rgba(4, 9, 16, 0.72);
  border: 1px solid rgba(126, 166, 207, 0.12);
  border-radius: 18px;
  padding: 16px;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  max-height: 400px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  color: #a5f3fc;
  margin-top: 16px;
  white-space: pre;
}

/* Collapsible sections */
.section-collapsible {
  border: none;
  margin: 0;
}

.section:has(.section-collapsible:not([open])) {
  padding: 12px 20px;
}

.section-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.section-collapsible > summary::-webkit-details-marker { display: none; }

.section-collapsible > summary::before {
  content: '\25B6';
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.section-collapsible[open] > summary::before {
  transform: rotate(90deg);
}

.section-collapsible > summary .section-title {
  margin: 0;
  cursor: pointer;
}

/* API Reference */
.api-card { margin-bottom: 16px; }
.api-card:last-child { margin-bottom: 0; }

.api-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.api-group > summary::-webkit-details-marker { display: none; }

.api-group > summary::before {
  content: '\25B6';
  font-size: 0.6rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.api-group[open] > summary::before { transform: rotate(90deg); }
.api-group:not([open]) { padding-bottom: 0; }

.api-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--accent-blue);
  font-family: var(--font-sans);
  cursor: pointer;
}

.api-details {
  border: 1px solid rgba(126, 166, 207, 0.12);
  border-radius: 18px;
  margin-bottom: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.api-details summary {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  user-select: none;
}

.api-details summary:hover { background: rgba(71, 215, 255, 0.05); }
.api-details[open] summary { border-bottom: 1px solid rgba(126, 166, 207, 0.1); }

.api-details summary code {
  color: var(--accent-blue);
  font-size: 0.85rem;
}

.api-body {
  padding: 16px;
  font-size: 0.85rem;
  line-height: 1.6;
}

.api-body h4 {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 14px 0 6px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.api-body h4:first-child { margin-top: 0; }
.api-body p { margin: 0 0 10px; color: var(--text-muted); }
.api-body .code-block { margin: 8px 0; font-size: 0.75rem; }

.api-label {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.8rem;
}

.api-method {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono);
  min-width: 52px;
  text-align: center;
  flex-shrink: 0;
}

.api-method.get { background: #22c55e22; color: #60f0a2; border: 1px solid #22c55e44; }
.api-method.post { background: #3b82f622; color: #77b6ff; border: 1px solid #3b82f644; }
.api-method.put { background: #f59e0b22; color: #f8c86c; border: 1px solid #f59e0b44; }
.api-method.delete { background: #ef444422; color: #ff9d97; border: 1px solid #ef444444; }
.api-method.ws { background: #14b8a622; color: #5eead4; border: 1px solid #14b8a644; }

.api-msg,
.api-msg-send {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.api-msg { background: #22c55e18; color: #60f0a2; border: 1px solid #22c55e33; }
.api-msg-send { background: #3b82f618; color: #77b6ff; border: 1px solid #3b82f633; }

.api-flow {
  padding-left: 20px;
  margin: 8px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.api-flow li { padding: 3px 0; }
.api-flow code { color: var(--accent-blue); }

.api-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin: 8px 0;
}

.api-table td,
.api-table th {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(30, 41, 59, 0.3);
}

.api-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.api-table code { color: var(--accent-blue); }
.api-table-full { margin: 0; }

/* Footer */
.footer {
  padding: 10px 20px 36px;
}

.footer-shell {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
  border-radius: 24px;
  border: 1px solid rgba(126, 166, 207, 0.1);
  background:
    radial-gradient(circle at top right, rgba(71, 215, 255, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(8, 15, 24, 0.78), rgba(5, 10, 17, 0.86));
  box-shadow: var(--shadow-md);
}

.footer-branding {
  min-width: 0;
}

.footer-kicker {
  color: var(--accent-blue);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.footer-title {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  /* letter-spacing is applied after every character INCLUDING the space, so
     negative tracking shrinks the word gap as well as the letter fit. This
     restores exactly what the tracking removed from the space, leaving the
     letterforms as tight as designed. */
  word-spacing: 0.03em;
}

.footer a {
  color: var(--accent-blue);
  text-decoration: none;
}

.footer a:hover { text-decoration: underline; }

.footer-contact {
  text-align: right;
}

.footer-links {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: nowrap;
}

.footer-sep {
  color: var(--text-muted);
  margin: 0 6px;
}

.footer-stats {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
}

@keyframes hero-chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes slow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes slow-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Rank-change motion for the standings refresh (classes applied by
   leaderboard.js only when a row's rank actually changed, so steady-state
   refreshes stay motionless). */
@keyframes rank-flash-up {
  0% { background-color: rgba(51, 209, 122, 0.18); transform: translateY(6px); }
  100% { background-color: transparent; transform: translateY(0); }
}

@keyframes rank-flash-down {
  0% { background-color: rgba(255, 95, 87, 0.16); transform: translateY(-6px); }
  100% { background-color: transparent; transform: translateY(0); }
}

tr.rank-up { animation: rank-flash-up 1.2s ease-out; }
tr.rank-down { animation: rank-flash-down 1.2s ease-out; }
tr.rank-new { animation: killfeed-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

/* Responsive */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding-right: 0;
  }

  .keygen-shell {
    grid-template-columns: 1fr;
  }

  .arena-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .arena-shell-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .arena-shell-status {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 44px 16px 32px;
  }

  .hero h1 {
    max-width: none;
    font-size: 2.8rem;
  }

  .hero .subtitle { font-size: 1rem; }

  .arena-section {
    padding-inline: 16px;
  }

  .arena-shell {
    padding: 18px;
    border-radius: 26px;
  }

  .arena-shell-title {
    font-size: 2rem;
  }

  .arena-tab-panel {
    max-height: 180px;
    height: auto;
  }

  .arena-layout {
    min-height: 0;
  }

  .arena-container {
    min-height: 360px;
    border-radius: 22px;
  }

  /* (phone-width .hud-round sizing lives in site-shell.css, which loads
     last and owns the mobile HUD; a duplicate full-width rule here was a
     stylesheet-order trap and was removed) */
  .hud-killfeed { font-size: 0.7rem; }
  .arena-controls {
    padding: 14px;
  }
  .arena-controls .control-group,
  .control-group-actions {
    width: 100%;
  }
  .control-group-actions {
    margin-left: 0;
    justify-content: stretch;
  }
  .control-group-actions .arena-control-btn {
    flex: 1;
  }
  .leaderboard-podium { grid-template-columns: 1fr; }
  .weapon-stats-podium { grid-template-columns: 1fr; }
  .leaderboard-tabs button { padding: 8px 12px; font-size: 0.8rem; }
  .leaderboard-panels { min-height: 620px; }
  .footer-shell {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .footer-contact {
    text-align: left;
  }

  .footer-stats {
    white-space: normal;
  }

  .weapon-stats-header {
    flex-direction: column;
  }

  .weapon-stats-updated {
    white-space: normal;
  }
}

/* Reduced motion: zero out infinite ambient loops and one-shot flashes;
   content is never motion-gated. */
@media (prefers-reduced-motion: reduce) {
  .hero-ticker span,
  .keygen-orbit-a,
  .keygen-orbit-b,
  .leaderboard-mode-tabs button.active,
  .ws-status.connected .dot,
  .ws-status.connected .dot::after,
  .arena-shell.combat-flash::after,
  .arena-shell.round-sweep::after,
  .killfeed-entry.killfeed-new,
  .killfeed-entry.killfeed-new::before,
  .killfeed-entry.killfeed-out,
  tr.rank-up,
  tr.rank-down,
  tr.rank-new {
    animation: none;
  }
}

/* Settings-panel equivalents of the block above, toggled individually via a
   body class from settings.js (frontend/js/app.js syncCssOnlyEffectClasses)
   instead of all-or-nothing at the OS level. Only effects with no JS trigger
   point to gate directly need this - combat-flash/round-sweep/rank-change
   are gated at their call site in app.js/leaderboard.js instead. */
body.no-fx-heroChipFloat .hero-ticker span {
  animation: none;
}

body.no-fx-orbitSpins .keygen-orbit-a,
body.no-fx-orbitSpins .keygen-orbit-b {
  animation: none;
}

body.no-fx-liveHeartbeat .ws-status.connected .dot,
body.no-fx-liveHeartbeat .ws-status.connected .dot::after {
  animation: none;
}

/* killfeed-new also drives the entry's slide-in appearance, which isn't
   part of the "kill feed glow" toggle - only silence the ::before glow. */
body.no-fx-killFeedGlow .killfeed-entry.killfeed-new::before {
  animation: none;
}

/* ---------- Settings panel ---------- */

/* A plain flex child of .onboarding-rail-stack (see arena.css) - no fixed
   positioning of its own, so it always sits correctly above/beside the rail
   regardless of how many rail buttons exist or how tall the stack is. */
.settings-gear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(126, 166, 207, 0.2);
  background: rgba(8, 15, 24, 0.72);
  backdrop-filter: blur(18px);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.28);
  transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease, color 0.24s ease;
}

.settings-gear-btn:hover {
  transform: rotate(24deg);
  border-color: rgba(71, 215, 255, 0.28);
  background: rgba(10, 20, 32, 0.88);
  color: var(--accent-blue);
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.settings-toggle-row input[type='checkbox'] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  accent-color: var(--accent-blue);
  cursor: pointer;
}

.settings-master-card .settings-toggle-master {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
  font-weight: 600;
}

#settings-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.settings-section {
  padding: 18px 20px;
}

.settings-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.settings-section-summary::-webkit-details-marker {
  display: none;
}

.settings-section-summary::before {
  content: '▸';
  color: var(--accent-blue);
  font-size: 0.85rem;
  margin-right: 10px;
  transition: transform 0.2s ease;
}

.settings-section[open] .settings-section-summary::before {
  transform: rotate(90deg);
}

.settings-section-title {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  flex: 1;
}

.settings-master-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-blue);
  cursor: pointer;
}

.settings-section-desc {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: rgba(236, 244, 255, 0.6);
}

.settings-section-effects {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.settings-toggle-effect {
  font-size: 0.88rem;
  color: rgba(236, 244, 255, 0.85);
}

.settings-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

/* --- About drawer ------------------------------------------------------- */

.about-meta {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.about-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border: 1px solid rgba(138, 223, 255, 0.14);
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.55);
}

.about-meta-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text2, #8aa0b8);
  white-space: nowrap;
}

.about-meta-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  text-align: right;
  word-break: break-all;
}

.about-meta-value a {
  color: var(--accent-blue, #4fc3f7);
  text-decoration: none;
}

.about-meta-value a:hover {
  text-decoration: underline;
}

.about-meta-value code {
  background: rgba(79, 195, 247, 0.12);
  border-radius: 6px;
  padding: 2px 8px;
}

.keygen-clear {
  margin-left: auto;
  padding: 6px 10px;
  font-size: 0.74rem;
}

/* --- Bot cosmetics ----------------------------------------------------- */

.cosmetics-shell {
  display: grid;
  gap: 18px;
}

.cosmetics-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.cosmetics-intro p {
  color: var(--text-soft);
  max-width: 68ch;
}

.cosmetics-catalog-state {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 206, 84, 0.25);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--accent-gold);
  font: 0.72rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cosmetics-auth {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.cosmetics-account-cta {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cosmetics-account-cta > div {
  display: grid;
  gap: 3px;
}

.cosmetics-account-cta strong { color: var(--text-primary); }
.cosmetics-account-cta span { color: var(--text-soft); font-size: 0.84rem; }

.cosmetics-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cosmetics-account-register {
  color: var(--text-soft);
  font-size: 0.84rem;
}

.cosmetics-account-register a { color: var(--accent-blue); }

.cosmetics-auth input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(126, 166, 207, 0.24);
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.72);
  color: var(--text-primary);
  padding: 11px 13px;
  font-family: var(--font-mono);
}

.cosmetics-status {
  min-height: 1.4em;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.cosmetics-status[data-state="success"] { color: #8ce6b0; }
.cosmetics-status[data-state="error"] { color: #ff9b91; }

.cosmetics-browser {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(190px, 0.6fr);
  gap: 12px;
}

.cosmetics-browser label {
  display: grid;
  gap: 7px;
  color: var(--text-primary);
  font: 600 0.72rem/1.2 var(--font-mono);
  letter-spacing: 0.06em;
}

.cosmetics-browser :is(input, select) {
  min-height: 44px;
  width: 100%;
  border: 1px solid rgba(126, 166, 207, 0.24);
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.72);
  color: var(--text-primary);
  padding: 10px 12px;
  font: 1rem var(--font-mono);
}

.cosmetics-browser :is(input, select):focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
}

.cosmetics-results-summary {
  min-height: 1.2em;
  color: var(--text-muted);
  font: 0.72rem var(--font-mono);
}

.cosmetics-catalog,
.cosmetic-slot {
  display: grid;
  gap: 12px;
}

.cosmetics-catalog { gap: 20px; }

.cosmetic-pack-list {
  display: grid;
  gap: 10px;
}

.cosmetic-pack {
  display: grid;
  grid-template-columns: 92px minmax(0, 1.35fr) minmax(190px, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-inline-start: 3px solid var(--accent-gold);
  border-radius: 10px;
  background: var(--bg-card-strong);
}

.cosmetic-pack-swatch {
  width: 92px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card));
  box-shadow: inset 0 0 0 5px rgba(4, 9, 15, 0.28);
}

.cosmetic-pack-summary {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cosmetic-pack-summary strong {
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.cosmetic-pack-summary p {
  color: var(--text-soft);
  font-size: 0.84rem;
  line-height: 1.5;
}

.cosmetic-pack-contents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  min-width: 0;
}

.cosmetic-pack-contents span {
  min-width: 0;
  padding-inline-start: 9px;
  border-inline-start: 1px solid var(--border-strong);
  color: var(--text-muted);
  font: 0.72rem/1.35 var(--font-mono);
  overflow-wrap: anywhere;
}

.cosmetic-pack-offer {
  display: grid;
  gap: 5px;
  justify-items: end;
  min-width: max-content;
}

.cosmetics-show-more,
.cosmetics-empty-state button {
  min-height: 44px;
}

.cosmetics-show-more {
  justify-self: center;
  min-width: 190px;
}

.cosmetics-empty-state {
  display: grid;
  justify-items: start;
  gap: 7px;
  padding: 22px;
  border: 1px dashed rgba(126, 166, 207, 0.24);
  border-radius: 12px;
  background: rgba(8, 12, 20, 0.42);
}

.cosmetics-empty-state strong { color: var(--text-primary); }
.cosmetics-empty-state p { color: var(--text-soft); font-size: 0.84rem; }
.cosmetics-error-state { border-color: rgba(255, 123, 114, 0.3); }

.cosmetic-pack-price {
  color: var(--accent-gold);
  font: 700 0.82rem var(--font-mono);
  white-space: nowrap;
}

.cosmetic-slot h4 {
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cosmetic-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.cosmetic-item {
  display: grid;
  gap: 10px;
  min-height: 158px;
  padding: 15px;
  border: 1px solid rgba(126, 166, 207, 0.16);
  border-radius: 14px;
  background: rgba(8, 12, 20, 0.56);
}

.cosmetic-item.rarity-rare { border-color: rgba(71, 215, 255, 0.24); }
.cosmetic-item.rarity-epic { border-color: rgba(190, 126, 255, 0.28); }

.cosmetic-item-header,
.cosmetic-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cosmetic-item-header strong { color: var(--text-primary); }

.cosmetic-price,
.cosmetic-state {
  color: var(--accent-gold);
  font: 0.72rem var(--font-mono);
  white-space: nowrap;
}

.cosmetic-item p {
  color: var(--text-soft);
  font-size: 0.84rem;
  line-height: 1.5;
}

.cosmetic-item-footer { margin-top: auto; }

.cosmetic-equip:disabled {
  cursor: default;
  opacity: 0.58;
}

@media (max-width: 720px) {
  .cosmetics-intro { flex-direction: column; }
  .cosmetics-auth { grid-template-columns: 1fr; }
  .cosmetics-auth .btn { width: 100%; }
  .cosmetics-account-actions .btn { width: 100%; }
  .cosmetics-browser { grid-template-columns: 1fr; }
  .cosmetic-pack { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
  .cosmetic-pack-swatch { width: 68px; }
  .cosmetic-pack-contents,
  .cosmetic-pack-offer { grid-column: 1 / -1; }
  .cosmetic-pack-offer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    min-width: 0;
  }
  .cosmetic-pack-offer .cosmetic-state { justify-self: end; }
}

@media (max-width: 420px) {
  .cosmetic-pack-contents { grid-template-columns: 1fr; }
}