/* ============================================================
   Arcade polish layer — key art, marquee, neon framing.
   Loaded after styles.css so these rules win where they overlap.
   ============================================================ */

/* --- Roguelike run stat bar (DOM HUD above the gameplay canvas) ----------- */
.roguelike-stat-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 6px 0 8px;
  padding: 8px 12px;
  border: 1px solid rgba(25, 247, 255, 0.28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(6, 12, 28, 0.82), rgba(22, 10, 46, 0.7));
  box-shadow: inset 0 0 18px rgba(25, 247, 255, 0.06);
}
.roguelike-stat-bar .stat-hero {
  font: 800 0.82rem/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #45ff8a;
  text-shadow: 0 0 10px rgba(69, 255, 138, 0.45);
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.roguelike-stat-bar .stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  flex: 1 1 auto;
}
.roguelike-stat-bar .stat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(2, 6, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
}
.roguelike-stat-bar .stat-chip[data-stat="obj"][data-directional="true"] {
  flex: 1 1 260px;
  min-width: min(100%, 230px);
  border-color: rgba(25, 247, 255, 0.34);
  background: linear-gradient(90deg, rgba(25, 247, 255, 0.1), rgba(2, 6, 16, 0.55));
}
.roguelike-stat-bar .stat-chip[data-stat="obj"][data-directional="true"] strong {
  white-space: normal;
  line-height: 1.18;
}
.roguelike-stat-bar .stat-chip span {
  font: 700 0.6rem/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.1em;
  color: rgba(214, 228, 255, 0.6);
}
.roguelike-stat-bar .stat-chip strong {
  font: 800 0.86rem/1 "Segoe UI", system-ui, sans-serif;
  color: #eaf2ff;
}
.roguelike-stat-bar .stat-chip[data-tone="cyan"] strong { color: #19f7ff; }
.roguelike-stat-bar .stat-chip[data-tone="red"] strong { color: #ff5d6c; }
.roguelike-stat-bar .stat-chip[data-tone="gold"] strong { color: #ffe84d; }
.roguelike-stat-bar .stat-chip[data-tone="green"] strong { color: #45ff8a; }
.roguelike-stat-bar .stat-chip[data-tone="orange"] strong { color: #ff7b2f; }
.roguelike-stat-bar .stat-xp {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 180px;
}
.roguelike-stat-bar .stat-xp span {
  font: 700 0.62rem/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: rgba(69, 255, 138, 0.85);
  white-space: nowrap;
}
.roguelike-stat-bar .stat-xp-track {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(69, 255, 138, 0.4);
  overflow: hidden;
}
.roguelike-stat-bar .stat-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(69, 255, 138, 0.7), rgba(25, 247, 255, 0.95));
  transition: width 200ms ease;
}
.roguelike-stat-bar .stat-fx {
  display: flex;
  gap: 6px;
}
.roguelike-stat-bar .stat-fx span {
  font: 800 0.6rem/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 8px;
  color: #04121f;
  background: linear-gradient(135deg, #19f7ff, #45ff8a);
}
@media (max-width: 720px) {
  .roguelike-stat-bar { gap: 5px 7px; padding: 6px 8px; }
  .roguelike-stat-bar .stat-chip { padding: 2px 6px; }
  .roguelike-stat-bar .stat-chip strong { font-size: 0.78rem; }
  .roguelike-stat-bar .stat-chip[data-stat="obj"][data-directional="true"] {
    flex-basis: 100%;
    order: -1;
  }
  /* Phone: keep only the vitals readable at a glance — hide secondary chips so
     the bar stays ONE row and the game window keeps maximum height. */
  .roguelike-stat-bar .stat-hero { display: none; }
  .roguelike-stat-bar .stat-chip[data-stat="level"],
  .roguelike-stat-bar .stat-chip[data-stat="wpn"],
  .roguelike-stat-bar .stat-chip[data-stat="aug"] { display: none; }
  .roguelike-stat-bar .stat-xp { flex-basis: 100%; min-width: 0; }
}

/* Fullscreen: the stat bar is reparented INTO the combat mount — float it over
   the top edge of the canvas as a translucent HUD strip. */
.official-combat-mount:fullscreen .roguelike-stat-bar,
.official-combat-mount[data-viewport="fullscreen"] .roguelike-stat-bar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100vw - 32px));
  z-index: 6;
  margin: 0;
  background: linear-gradient(135deg, rgba(6, 12, 28, 0.66), rgba(22, 10, 46, 0.56));
  backdrop-filter: blur(3px);
  pointer-events: none;
}


/* Splash marquee key-art banner replaces the plain H1. */
.splash-marquee {
  position: relative;
  margin: 0 0 18px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(25, 247, 255, 0.25),
    0 18px 60px rgba(0, 0, 0, 0.65),
    0 0 70px rgba(255, 61, 242, 0.18);
  animation: marquee-glow 4.5s ease-in-out infinite;
}
.splash-marquee-art {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}
@keyframes marquee-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(25,247,255,0.25), 0 18px 60px rgba(0,0,0,0.65), 0 0 60px rgba(255,61,242,0.16); }
  50%      { box-shadow: 0 0 0 1px rgba(25,247,255,0.45), 0 18px 60px rgba(0,0,0,0.65), 0 0 95px rgba(25,247,255,0.30); }
}

/* Featured cabinet shows the original 3D rotating cabinet sprite (no static banner). */
.splash-featured-cabinet-art { position: relative; }

/* Neon arcade border frame around the whole official app shell. */
.official-app::after {
  content: "";
  position: fixed;
  inset: 6px;
  border-radius: 18px;
  pointer-events: none;
  z-index: 40;
  border: 2px solid rgba(25, 247, 255, 0.16);
  box-shadow:
    inset 0 0 60px rgba(25, 247, 255, 0.06),
    inset 0 0 120px rgba(255, 61, 242, 0.05);
}

/* Cabinet grid tiles: tighten into glowing arcade machines. */
.official-cabinet-grid .neon-cabinet,
.official-cabinet-grid > * {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.official-cabinet-grid .neon-cabinet:hover,
.official-cabinet-grid > *:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 32px rgba(25, 247, 255, 0.35);
}

/* HMH key art used as the game-menu / boot backdrop. */
.game-intro-shell {
  position: relative;
}
.game-intro-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,7,15,0.78), rgba(5,7,15,0.92)),
    url("./assets/hmh-art/banners/hmh-extra4-960.webp") 72% 35%/cover no-repeat;
  border-radius: 16px;
  opacity: 0.45;
  z-index: 0;
}
.game-intro-shell > * { position: relative; z-index: 1; }

.arcade-floor-view .official-cabinet-grid,
.mode-select-view .official-mode-grid,
.arcade-floor-view .arcade-walk-in,
.mode-select-view > div,
.mode-select-view .ranked-tooltip {
  background: rgba(5, 7, 15, 0.52);
  border: 1px solid rgba(25, 247, 255, 0.16);
  backdrop-filter: blur(10px);
}

.arcade-floor-view .arcade-walk-in,
.mode-select-view > div,
.mode-select-view .ranked-tooltip {
  border-radius: 18px;
  padding: 16px 18px;
}

.hmh-challenge-panel {
  min-width: 0;
  margin: 16px 0;
  padding: 16px 18px;
  border: 1px solid rgba(25, 247, 255, 0.25);
  border-radius: 18px;
  background: rgba(5, 7, 15, 0.88);
}
.hmh-challenge-panel[hidden] { display: none; }
.hmh-challenge-panel legend { padding: 0 8px; font-weight: 700; }
.hmh-challenge-panel label { display: block; margin: 6px 0; }
.hmh-challenge-panel select,
.hmh-challenge-panel input,
.hmh-challenge-panel button {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: #e8f6ff;
  background: #090f20;
  border: 1px solid rgba(25, 247, 255, 0.4);
  border-radius: 8px;
  font: inherit;
}
.hmh-challenge-panel select,
.hmh-challenge-panel input { width: 100%; }
.hmh-challenge-panel button { margin-top: 8px; cursor: pointer; }
.hmh-challenge-panel :disabled { opacity: 0.55; cursor: default; }
.hmh-challenge-panel :focus-visible { outline: 2px solid #19f7ff; outline-offset: 3px; }
.hmh-challenge-panel .tiny-note { overflow-wrap: anywhere; }

/* New Frontier (preview): the second Free start on the HMH mode select. */
.hmh-frontier-preview {
  min-width: 0;
  margin: 16px 0;
  padding: 14px 18px;
  border: 1px dashed rgba(255, 200, 87, 0.55);
  border-radius: 18px;
  background: rgba(5, 7, 15, 0.88);
}
.hmh-frontier-preview[hidden] { display: none; }
.hmh-frontier-preview button {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  color: #ffe3ad;
  background: #171106;
  border: 1px solid rgba(255, 200, 87, 0.6);
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}
.hmh-frontier-preview button:focus-visible { outline: 2px solid #ffc857; outline-offset: 3px; }
.hmh-frontier-preview .tiny-note { margin: 8px 0 0; overflow-wrap: anywhere; }

.arcade-floor-view .official-cabinet-grid,
.mode-select-view .official-mode-grid {
  padding: 18px;
  border-radius: 24px;
}

@media (max-width: 800px) {
  .splash-marquee { margin-bottom: 12px; }
  .official-app::after { inset: 3px; }
}

/* --- Splash layout balance fix --- */
/* Center the left column content vertically so the marquee + CTA form a true
   hero block instead of being bottom-anchored against the tall key art. */
.wallet-splash-view .splash-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 14px;
  align-self: center;
  max-width: 720px;
  margin: 0 auto;
}
.wallet-splash-view .splash-copy .big-action {
  margin: 4px auto 0;
}
/* Guest-first CTA row: primary "Play Free" + secondary "Connect Wallet". */
.wallet-splash-view .splash-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 4px auto 0;
  position: relative;
  z-index: 20;
}
.wallet-splash-view .splash-cta-row .big-action {
  margin: 0;
}
/* Ranked card flags that it needs a wallet for guests (still clickable). */
.mode-card.ranked-card[data-needs-wallet="true"]::after {
  content: "Wallet required";
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(10, 14, 26, 0.82);
  color: #d6e4ff;
  border: 1px solid rgba(120, 160, 240, 0.55);
}
/* Keep the centered hero compact so the CTA stays above the fold. */
.wallet-splash-view .splash-marquee {
  max-width: 560px;
  margin: 0 auto;
}
.wallet-splash-view .splash-marquee .splash-marquee-art {
  max-height: 26vh;
  width: auto;
  margin: 0 auto;
}
/* Compact featured-cabinet card under the centered hero CTA. */
.splash-featured-cabinet-mini {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  width: min(100%, 420px);
  margin: 6px auto 0;
  padding: 8px 14px;
  text-align: left;
  border: 1px solid rgba(69, 255, 138, 0.32);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(7, 5, 18, 0.92), rgba(19, 49, 78, 0.5));
  box-shadow: 0 0 22px rgba(69, 255, 138, 0.14);
}
.splash-featured-cabinet-mini .splash-featured-cabinet-art {
  min-height: 72px;
  width: 72px;
  place-items: center;
}
.splash-featured-cabinet-mini .splash-featured-cabinet-copy { gap: 1px; }
.splash-featured-cabinet-mini .splash-featured-cabinet-copy strong { font-size: 0.95rem; }
.splash-featured-cabinet-mini .splash-featured-cabinet-copy small { font-size: 0.72rem; }
/* On short viewports, hide the featured card so the CTA clears the bottom ad. */
@media (max-height: 720px) {
  .splash-featured-cabinet-mini { display: none; }
}
/* Make the locked cabinets read as intentional 'coming soon' tiles, not dead boxes. */
.splash-cabinet-stack .neon-cabinet.cabinet-locked {
  position: relative;
  opacity: 0.72;
  border: 1px solid rgba(25, 247, 255, 0.18);
  background: linear-gradient(140deg, rgba(20,28,52,0.9), rgba(12,10,28,0.9));
}
.splash-cabinet-stack .neon-cabinet.cabinet-locked::after {
  content: "COMING SOON";
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: rgba(255, 232, 77, 0.85);
}

/* Back-navigation buttons on mode-select / level-intro screens */
.back-nav-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 8px 16px;
  background: rgba(8, 14, 32, 0.72);
  border: 1px solid rgba(25, 247, 255, 0.35);
  border-radius: 10px;
  color: #9fe9ff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.back-nav-button:hover {
  transform: translateX(-3px);
  background: rgba(25, 247, 255, 0.16);
  border-color: rgba(25, 247, 255, 0.7);
  color: #d6f6ff;
}
.back-nav-button:active { transform: translateX(-1px) scale(0.98); }

/* ---- Character-select roster ---- */
.character-select-view { display: flex; flex-direction: column; gap: 22px; padding: 8px 0; }
.char-select-head h2 { margin: 4px 0 8px; }
.character-roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}
.hero-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  text-align: left;
  background: linear-gradient(180deg, rgba(12, 20, 44, 0.88), rgba(8, 14, 32, 0.82));
  border: 1px solid rgba(25, 247, 255, 0.22);
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.hero-card.active:hover {
  transform: translateY(-4px);
  border-color: rgba(25, 247, 255, 0.85);
  box-shadow: 0 12px 34px rgba(25, 247, 255, 0.28), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-card.active {
  border-color: rgba(25, 247, 255, 0.55);
}
.hero-card.locked { opacity: 0.62; cursor: not-allowed; filter: grayscale(0.85); }
.hero-card-stage {
  position: relative;
  height: 210px;
  display: flex;
  /* Anchor the sprite to the floor line (where the ::after floor ellipse sits)
     instead of centering — center-alignment left a dead band of empty space
     above shorter sprites, which read as broken on mobile. */
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 22px;
  background:
    radial-gradient(ellipse 70% 45% at 50% 85%, rgba(25,247,255,0.12), transparent 70%),
    radial-gradient(circle at 50% 55%, rgba(25,247,255,0.16), rgba(6,10,28,0) 72%);
  border-radius: 14px;
  border: 1px solid rgba(25, 247, 255, 0.08);
}
.hero-card-stage::after {
  /* subtle "floor" ellipse beneath the sprite */
  content: '';
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.45), transparent 70%);
  pointer-events: none;
}
.hero-card-stage .hmh-cabinet-rotator { width: 180px; height: 180px; position: relative; z-index: 1; }
.hero-card-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}
.hero-locked-badge {
  position: absolute;
  bottom: 12px;
  padding: 5px 16px;
  background: rgba(255, 71, 111, 0.92);
  color: #fff;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(255, 71, 111, 0.45);
}
.hero-name {
  font-size: 1.5rem;
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 1.15;
  font-weight: 800;
  text-shadow: 0 1px 8px rgba(25, 247, 255, 0.22);
}
.hero-tagline {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0;
  padding: 4px 12px;
  color: #061022;
  background: linear-gradient(90deg, #19f7ff, #45ff8a);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(25, 247, 255, 0.32);
}
.hero-bio {
  color: rgba(214, 228, 255, 0.88);
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 4px 0 2px;
}
.hero-loadout {
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid rgba(25, 247, 255, 0.18);
  border-radius: 7px;
  background: rgba(4, 13, 31, 0.72);
  text-align: left;
}
.hero-loadout-weapon {
  color: #ffe84d;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.hero-loadout-passive {
  color: rgba(214, 228, 255, 0.88);
  font-size: 0.76rem;
  line-height: 1.4;
}
.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(25, 247, 255, 0.12);
}
.hero-stat-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; }
.hero-stat-label { display: inline-flex; align-items: center; gap: 7px; font-size: 0.74rem; color: #9fe9ff; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-stat-icon { width: 18px; height: 18px; display: grid; place-items: center; color: #19f7ff; line-height: 1; filter: drop-shadow(0 0 4px rgba(25,247,255,0.4)); }
.hero-stat-icon .arcade-icon { width: 16px; height: 16px; }
.hero-stat-name { font-weight: 700; }
.hero-stat-track { height: 10px; background: rgba(255,255,255,0.08); border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 4px rgba(0,0,0,0.5); border: 1px solid rgba(25,247,255,0.08); }
.hero-stat-fill { height: 100%; background: linear-gradient(90deg, #19f7ff, #45ff8a); border-radius: 5px; box-shadow: 0 0 10px rgba(25,247,255,0.55); transition: width 0.4s cubic-bezier(.3,1.4,.5,1); }
/* Side-by-side stat comparison chips (Cycle 074, U-6). */
.hero-compare-label { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: #7fa6bf; }
.hero-card[data-compare-role="reference"] .hero-compare-label { color: #ffe84d; }
.hero-stat-row.has-delta { grid-template-columns: 96px 1fr 50px; }
.hero-stat-delta {
  justify-self: end;
  min-width: 44px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #9fb4c9;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-stat-delta[data-trend="up"] { color: #45ff8a; border-color: rgba(69, 255, 138, 0.38); background: rgba(69, 255, 138, 0.09); }
.hero-stat-delta[data-trend="down"] { color: #ff9f6e; border-color: rgba(255, 159, 110, 0.38); background: rgba(255, 159, 110, 0.09); }
.hero-stat-delta[data-best="true"] { box-shadow: 0 0 0 1px rgba(255, 232, 77, 0.6), 0 0 10px rgba(255, 232, 77, 0.28); }
.hero-stat-delta[data-best="true"]::after { content: '\2605'; margin-left: 3px; color: #ffe84d; }
.hero-card:focus-visible { outline: 2px solid #ffe84d; outline-offset: 4px; }
.hero-carousel-dots { display: none; }
.hero-unlock-progress {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 232, 77, 0.22);
  border-radius: 12px;
  background: rgba(255, 232, 77, 0.06);
}
.hero-unlock-progress-label {
  color: #ffe84d;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.hero-unlock-progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,232,77,0.18);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.48);
}
.hero-unlock-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffe84d, #ff8a45);
  box-shadow: 0 0 12px rgba(255,232,77,0.45);
}
.hero-unlock-progress-note {
  color: rgba(214,228,255,0.72);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.hero-cta {
  margin-top: 14px;
  padding: 10px 14px;
  text-align: center;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: #061022;
  background: linear-gradient(90deg, #ffe84d, #ffb84d);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(255, 232, 77, 0.35);
  text-transform: uppercase;
}
.hero-card.locked .hero-cta { color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); box-shadow: none; }

/* ---- Nav account: avatar chip + sign out ---- */
.official-nav-account { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; }
.nav-avatar-button { padding: 0; background: none; border: none; cursor: pointer; line-height: 0; }
.avatar-chip-img, .avatar-chip-initial {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(25, 247, 255, 0.6);
  color: #fff; font-weight: 800;
}
.avatar-chip-initial { font-family: system-ui, sans-serif; }
.nav-avatar { width: 34px; height: 34px; font-size: 0.95rem; }
.nav-avatar-button:hover .avatar-chip-img,
.nav-avatar-button:hover .avatar-chip-initial { border-color: rgba(25, 247, 255, 1); box-shadow: 0 0 10px rgba(25,247,255,0.5); }
.nav-signout-button {
  padding: 6px 12px; background: rgba(255, 71, 111, 0.16);
  border: 1px solid rgba(255, 71, 111, 0.5); border-radius: 8px;
  color: #ff9bb2; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer; transition: background 0.12s ease;
}
.nav-signout-button:hover { background: rgba(255, 71, 111, 0.3); color: #fff; }

/* ---- Avatar editor on profile ---- */
.avatar-editor-row { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.profile-avatar { width: 72px; height: 72px; font-size: 1.8rem; }
.avatar-preview-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(8,14,32,0.78);
}
.avatar-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.avatar-preview-hint {
  position: absolute;
  inset: auto 6px 6px 6px;
  margin: 0;
  padding: 3px 6px;
  background: rgba(3,10,24,0.72);
  border-radius: 999px;
  font-size: 0.6rem;
  text-align: center;
}
.avatar-editor-controls { display: flex; flex-direction: column; gap: 6px; }
.avatar-file-input { display: none; }
.avatar-feedback[data-state="ok"] { color: #45ff8a; }
.avatar-feedback[data-state="error"] { color: #ff6f8f; }
.avatar-saved-flash {
  animation: avatarSavedFlash 0.8s ease;
  box-shadow: 0 0 0 2px rgba(69,255,138,0.6), 0 0 22px rgba(69,255,138,0.45);
}
.username-saved-flash {
  animation: avatarSavedFlash 0.8s ease;
  box-shadow: 0 0 0 2px rgba(69,255,138,0.6), 0 0 22px rgba(69,255,138,0.45);
}
@keyframes avatarSavedFlash {
  0% { box-shadow: 0 0 0 0 rgba(69,255,138,0.0); }
  30% { box-shadow: 0 0 0 3px rgba(69,255,138,0.85), 0 0 30px rgba(69,255,138,0.6); }
  100% { box-shadow: 0 0 0 2px rgba(69,255,138,0.45), 0 0 18px rgba(69,255,138,0.35); }
}

/* ---- Profile hero card (wallet profile parent account) ---- */
.profile-hero-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 22px;
  min-height: auto;
}
.profile-hero-topline {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-hero-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid rgba(25, 247, 255, 0.5);
  box-shadow: 0 0 20px rgba(25, 247, 255, 0.25);
  flex: 0 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 32, 0.6);
}
.profile-hero-avatar .avatar-chip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profile-hero-identity {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.profile-hero-name {
  font-size: 1.4rem;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-shadow: 0 1px 6px rgba(25, 247, 255, 0.2);
  word-break: break-word;
}
.profile-hero-identity small {
  font-size: 0.78rem;
  color: rgba(159, 233, 255, 0.82);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: normal;
}
.profile-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(25, 247, 255, 0.14);
}
.profile-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(8, 14, 32, 0.55);
  border: 1px solid rgba(25, 247, 255, 0.1);
  border-radius: 10px;
}
.profile-hero-stat span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(159, 233, 255, 0.75);
}
.profile-hero-stat strong {
  font-size: 1.05rem;
  color: #45ff8a;
  letter-spacing: 0.01em;
  text-shadow: 0 0 8px rgba(69,255,138,0.25);
}
.profile-quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
}
.profile-action-primary {
  background: linear-gradient(90deg, #ffe84d, #ffb84d);
  color: #061022;
  border-color: rgba(255, 232, 77, 0.5);
  box-shadow: 0 4px 14px rgba(255, 232, 77, 0.3);
}
.profile-action-primary:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* Wallet-rail + achievements + recent runs sub-cards on the profile view */
.profile-command-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 980px) {
  .profile-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-hero-card {
    grid-column: span 2;
  }
}
.profile-wallet-rail-card {
  background: linear-gradient(180deg, rgba(12, 20, 44, 0.85), rgba(6, 10, 28, 0.8));
}
.profile-wallet-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.profile-achievements-card .achievement-list,
.profile-recent-runs-card .recent-runs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.profile-achievements-card .achievement-row,
.profile-recent-runs-card .recent-runs-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(8, 14, 32, 0.5);
  border: 1px solid rgba(25, 247, 255, 0.08);
}
.profile-achievements-card .achievement-row.unlocked {
  border-color: rgba(69, 255, 138, 0.4);
  background: rgba(69, 255, 138, 0.06);
}

/* ---- Leaderboard avatar ---- */
.leaderboard-row-avatar { width: 26px; height: 26px; font-size: 0.7rem; flex: 0 0 auto; }

/* ---- Redesigned leaderboard ---- */
.leaderboard-header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.leaderboard-title { margin: 0; font-size: 1.2rem; letter-spacing: 0.08em; color: #ffe84d; text-shadow: 0 0 12px rgba(255,232,77,0.4); }
.leaderboard-podium {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end;
  margin: 8px 0 18px; padding: 12px 6px 0;
}
.podium-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.podium-medal { font-size: 1.6rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(255,232,77,0.5)); }
.podium-avatar { width: 52px; height: 52px; font-size: 1.3rem; }
.podium-rank-1 .podium-avatar { width: 64px; height: 64px; border-color: #ffd54a; box-shadow: 0 0 18px rgba(255,213,74,0.6); }
.podium-rank-2 .podium-avatar { border-color: #c7d0dc; }
.podium-rank-3 .podium-avatar { border-color: #d8995a; }
.podium-name { font-size: 0.8rem; color: #d6f6ff; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-score { font-size: 0.82rem; font-weight: 800; color: #45ff8a; }
.podium-stand {
  margin-top: 6px; width: 100%; display: flex; align-items: flex-start; justify-content: center;
  border-radius: 8px 8px 0 0; background: linear-gradient(180deg, rgba(25,247,255,0.22), rgba(25,247,255,0.04));
  border: 1px solid rgba(25,247,255,0.3); border-bottom: none;
}
.podium-rank-1 .podium-stand { height: 64px; background: linear-gradient(180deg, rgba(255,213,74,0.3), rgba(255,213,74,0.05)); border-color: rgba(255,213,74,0.5); }
.podium-rank-2 .podium-stand { height: 46px; }
.podium-rank-3 .podium-stand { height: 32px; }
.podium-stand-rank { padding-top: 6px; font-weight: 800; color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.leaderboard-list { display: flex; flex-direction: column; gap: 6px; }
.leaderboard-rank { font-weight: 800; color: #9fe9ff; font-size: 0.82rem; }
.leaderboard-name { color: #d6f6ff; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-settled { color: #45ff8a; font-weight: 800; }
.leaderboard-score { font-weight: 800; color: #45ff8a; font-size: 0.9rem; }
.leaderboard-you-card {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px;
  background: linear-gradient(90deg, rgba(255,232,77,0.14), rgba(25,247,255,0.06));
  border: 1px solid rgba(255,232,77,0.5); border-radius: 12px;
}
.leaderboard-you-rank { font-weight: 800; letter-spacing: 0.08em; color: #ffe84d; }
.leaderboard-you-score { margin-left: auto; font-weight: 800; color: #45ff8a; }

/* ---- Leaderboard search + sortable Top-50 table ---- */
.leaderboard-controls { display: flex; gap: 8px; margin: 4px 0 10px; }
.leaderboard-search {
  flex: 1 1 auto; min-width: 0; padding: 8px 12px; border-radius: 10px;
  background: rgba(6,12,28,0.7); border: 1px solid rgba(25,247,255,0.28);
  color: #e7f6ff; font-size: 0.85rem; outline: none;
}
.leaderboard-search:focus { border-color: rgba(25,247,255,0.6); box-shadow: 0 0 0 2px rgba(25,247,255,0.18); }
.leaderboard-search::placeholder { color: rgba(159,233,255,0.5); }
.leaderboard-table { display: flex; flex-direction: column; gap: 4px; }
/* Shared column template across head + rows so columns line up exactly. */
.leaderboard-table-head, .leaderboard-trow {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 72px 52px 72px 44px 70px;
  align-items: center; gap: 8px;
}
.leaderboard-table-head { padding: 4px 12px; border-bottom: 1px solid rgba(25,247,255,0.18); margin-bottom: 2px; }
.leaderboard-th {
  background: none; border: none; padding: 2px 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em;
  color: #7f93b8; text-transform: uppercase; transition: color 0.12s ease;
}
.leaderboard-th:hover { color: #9fe9ff; }
.leaderboard-th.is-sorted { color: #19f7ff; }
.leaderboard-th.th-score, .leaderboard-th.th-kills, .leaderboard-th.th-survive, .leaderboard-th.th-level, .leaderboard-th.th-date { text-align: right; }
.leaderboard-trow {
  padding: 7px 12px; background: rgba(8,14,32,0.55); border: 1px solid rgba(25,247,255,0.1);
  border-radius: 9px; transition: border-color 0.12s ease, transform 0.12s ease;
}
.leaderboard-trow:hover { border-color: rgba(25,247,255,0.36); transform: translateX(2px); }
.leaderboard-trow.is-current-player { border-color: rgba(255,232,77,0.7); background: rgba(255,232,77,0.08); }
.lt-rank { font-weight: 800; color: #9fe9ff; font-size: 0.8rem; }
.lt-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lt-name-text { color: #d6f6ff; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-settled { flex: 0 0 auto; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; color: #45ff8a; opacity: 0.85; }
.lt-score { text-align: right; font-weight: 800; color: #45ff8a; font-size: 0.86rem; }
.lt-kills, .lt-survive, .lt-level, .lt-date { text-align: right; font-size: 0.76rem; color: #aebdd4; }
.lt-date { color: #8b9bc0; }
.leaderboard-empty { padding: 18px 12px; text-align: center; color: #8b9bc0; font-size: 0.85rem; }
/* On narrow screens, hide the lower-priority highlight columns to keep it readable. */
@media (max-width: 560px) {
  .leaderboard-table-head, .leaderboard-trow { grid-template-columns: 36px minmax(0,1fr) 64px 60px; }
  .leaderboard-th.th-kills, .leaderboard-th.th-level,
  .lt-kills, .lt-level { display: none; }
}

/* ---- Achievements grid ---- */
/* The achievements card is a column flexbox; force its children to span the
   full card width so the grid lays out HORIZONTALLY (multi-column) instead of
   collapsing to a single content-width column. */
.achievements-module { grid-column: 1 / -1; }
.achievements-card { align-items: stretch; }
.achievements-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; width: 100%; }
.achievements-count { color: #45ff8a; font-size: 0.9rem; white-space: nowrap; }
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 12px;
  width: 100%;
}
.achievement-badge {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px; border-radius: 12px; text-align: center;
  background: rgba(8,14,32,0.6); border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.achievement-badge:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.achievement-badge.unlocked:hover { transform: translateY(-3px); }
.achievement-badge.locked { opacity: 0.42; filter: grayscale(0.9); }
.achievement-badge.unlocked.tier-bronze { border-color: #cd7f32; box-shadow: 0 0 10px rgba(205,127,50,0.3); }
.achievement-badge.unlocked.tier-silver { border-color: #c7d0dc; box-shadow: 0 0 10px rgba(199,208,220,0.3); }
.achievement-badge.unlocked.tier-gold { border-color: #ffd54a; box-shadow: 0 0 12px rgba(255,213,74,0.45); }
.achievement-badge.unlocked.tier-platinum { border-color: #7bf6ff; box-shadow: 0 0 14px rgba(123,246,255,0.5); }
.achievement-icon { font-size: 1.6rem; line-height: 1; }
.achievement-icon-image {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px rgba(25,247,255,0.25));
}
.achievement-badge.locked .achievement-icon-image { filter: grayscale(0.8) drop-shadow(0 0 5px rgba(255,255,255,0.12)); opacity: 0.85; }
.achievement-name { font-size: 0.64rem; color: #d6f6ff; line-height: 1.2; }
.achievement-badge.locked .achievement-name { color: rgba(214,228,255,0.6); }
.achievement-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 3;
  min-width: 180px;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(3,10,24,0.96);
  border: 1px solid rgba(25,247,255,0.35);
  color: #d6f6ff;
  font-size: 0.68rem;
  line-height: 1.35;
  box-shadow: 0 0 16px rgba(25,247,255,0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}
.achievement-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(25,247,255,0.35);
}
.achievement-badge:hover .achievement-tooltip,
.achievement-badge:focus-visible .achievement-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

/* Parent profile: touch/keyboard disclosures, readable locked records. */
.profile-achievement-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.profile-achievement-card { min-width: 0; }
.profile-achievement-card.locked { opacity: 1; filter: none; }
.profile-achievement-card.unlocked:hover { transform: none; }
.profile-achievement-card.locked .achievement-name { color: #d6f6ff; }
.achievement-disclosure { width: 100%; overflow-wrap: anywhere; }
.achievement-disclosure summary { min-height: 44px; padding: 6px; cursor: pointer; }
.achievement-disclosure summary:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; border-radius: 6px; }
.achievement-disclosure .achievement-name,
.achievement-record-status { display: block; margin-top: 5px; }
.achievement-requirement { margin: 8px 0 0; color: #d6f6ff; font-size: 0.75rem; line-height: 1.5; }
.achievement-record-date, .achievement-progress-label { color: #c7d0dc; font-size: 0.7rem; line-height: 1.4; overflow-wrap: anywhere; }
.profile-achievement-card progress { width: 100%; height: 10px; accent-color: var(--neon-cyan); }

/* ---- Ranked entry-fee / signature modal ---- */
.ranked-entry-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 7, 17, 0.82); backdrop-filter: blur(4px);
}
.ranked-entry-card {
  width: min(440px, 92vw); padding: 26px;
  background: linear-gradient(160deg, rgba(14,22,46,0.98), rgba(8,12,28,0.98));
  border: 1px solid rgba(25,247,255,0.4); border-radius: 18px;
  box-shadow: 0 0 40px rgba(25,247,255,0.25);
}
.ranked-entry-card h2 { margin: 2px 0 8px; color: #ffe84d; }
.ranked-entry-copy { color: rgba(214,228,255,0.85); font-size: 0.85rem; line-height: 1.5; }
.ranked-entry-rows { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.ranked-entry-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: rgba(8,14,32,0.6); border-radius: 8px;
  border: 1px solid rgba(25,247,255,0.12);
}
.ranked-entry-row span { color: #9fe9ff; font-size: 0.8rem; }
.ranked-entry-row strong { color: #d6f6ff; font-size: 0.85rem; }
.ranked-entry-chainguard {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding: 12px;
  background: rgba(255,71,111,0.12); border: 1px solid rgba(255,71,111,0.5); border-radius: 10px;
}
.ranked-entry-chainguard strong { color: #ff9bb2; }
.ranked-entry-chainguard span { color: rgba(255,214,224,0.85); font-size: 0.8rem; }
.ranked-entry-status { min-height: 20px; font-size: 0.82rem; margin: 6px 0; }
.ranked-entry-status[data-state="pending"] { color: #ffe84d; }
.ranked-entry-status[data-state="ok"] { color: #45ff8a; }
.ranked-entry-status[data-state="error"] { color: #ff6f8f; }
.ranked-entry-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.ranked-entry-actions .big-action { flex: 1; }
.ranked-entry-actions .back-nav-button { margin-bottom: 0; }

/* --- Animated splash loop video (replaces the static marquee PNG) --------- */
.splash-loop-video {
  border-radius: 12px;
  object-fit: cover;
  background: #05070f;
  box-shadow: 0 0 0 1px rgba(25,247,255,0.30), 0 18px 60px rgba(0,0,0,0.65), 0 0 70px rgba(255,61,242,0.16);
}

/* --- Partner ad space (horizontal + vertical) ----------------------------- */
.ad-banner {
  display: block;
  position: relative;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  background-color: #0a1024;
  background-size: cover;
  background-position: center top;   /* the calm dark ceiling strip sits up top */
  background-repeat: no-repeat;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  box-shadow: 0 0 0 1px rgba(25,247,255,0.20), 0 10px 34px rgba(0,0,0,0.55);
}
/* Real reflowing text overlay (replaces the old baked-text SVG so the contact
   email is live text that wraps/shrinks to the device width and never crops). */
.ad-banner-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 8px 14px;
  text-align: center;
  /* Dark scrim so text stays readable over the busy arcade art. */
  background: linear-gradient(90deg, rgba(6,10,22,0.82), rgba(6,10,22,0.5) 45%, rgba(6,10,22,0.82));
}
.ad-banner-title {
  font: 800 clamp(13px, 3.4vw, 18px)/1.05 "Trebuchet MS", Verdana, sans-serif;
  letter-spacing: 0.04em;
  color: #ffe84d;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  text-transform: uppercase;
}
.ad-banner-copy {
  font: 600 clamp(9px, 2.2vw, 12px)/1.2 "Trebuchet MS", Verdana, sans-serif;
  color: #cdd8f5;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.ad-banner-email {
  font: 700 clamp(9px, 2.4vw, 12.5px)/1.2 "Trebuchet MS", Verdana, sans-serif;
  color: #19f7ff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  /* Always fit the full address: wrap if needed rather than crop. */
  word-break: break-all;
  overflow-wrap: anywhere;
}
.ad-banner::after {
  content: "AD";
  position: absolute;
  top: 6px; right: 8px;
  font: 700 9px/1 "Trebuchet MS", Verdana, sans-serif;
  letter-spacing: 1.5px;
  color: rgba(154,167,199,0.85);
  background: rgba(6,10,22,0.6);
  padding: 2px 5px;
  border-radius: 4px;
  pointer-events: none;
}
.ad-banner:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(25,247,255,0.45), 0 14px 40px rgba(0,0,0,0.6), 0 0 40px rgba(25,247,255,0.25);
}
.ad-banner-horizontal {
  position: relative;
  flex-shrink: 0;
  width: min(728px, 100%);
  /* Auto-height so wrapped text is never clipped; min keeps the art readable. */
  min-height: 64px;
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url('./assets/ads/ad-horizontal-bg.jpg');
  z-index: 5;
  margin: 12px auto 0;
  pointer-events: auto;
}
.ad-banner-horizontal .ad-banner-overlay {
  pointer-events: none;
}
.ad-banner-horizontal:hover { transform: translateY(-2px); }
.ad-banner-vertical {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  /* Sit above the music player: player is ~116px tall at bottom ~24px. */
  bottom: clamp(150px, 4vw + 140px, 168px);
  width: clamp(150px, 14vw, 200px);
  min-height: 300px;
  background-image: url('./assets/ads/ad-vertical-bg.jpg');
  z-index: 5;
  margin: 0;
  /* Let clicks pass through to elements behind the banner (Connect Wallet,
     Enter Arcade buttons on the splash screen). The <a> tag itself still
     receives clicks on its visible area via pointer-events: auto below. */
  pointer-events: none;
}
.ad-banner-vertical .ad-banner-overlay {
  justify-content: flex-end;
  padding-bottom: 16px;
  pointer-events: none;
}
/* Ad banners only belong on the wallet-splash landing, not inside gameplay/menus. */
#officialApp:not([data-step="wallet-splash"]) .ad-banner-horizontal,
#officialApp:not([data-step="wallet-splash"]) .ad-banner-vertical {
  display: none;
}
/* Remove the tall rail ad on narrow screens (portrait mobile). */
@media (max-width: 720px) {
  .ad-banner-vertical { display: none !important; }
  .ad-banner-horizontal { width: 100%; }
}
/* Remove the vertical rail ad on landscape mobile too — short viewport heights
   (phones held sideways) where the tall ad blocks too much of the screen. */
@media (orientation: landscape) and (max-height: 560px) {
  .ad-banner-vertical { display: none !important; }
}

/* Keep the fixed jukebox out of the Free/Ranked cards. Wide screens place it
   in the backdrop's reserved upper-right negative space; medium screens move it
   into flow. The existing <=720px rule below already handles mobile. */
@media (min-width: 1360px) {
  #officialApp[data-step="mode-select"] .arcade-music-player {
    top: 110px;
    bottom: auto;
  }
}

@media (min-width: 721px) and (max-width: 1359px) {
  #officialApp[data-step="mode-select"] .arcade-music-player {
    position: static;
    align-self: flex-end;
    width: min(360px, 100%);
    margin: 10px 0 14px;
  }
}

@media (max-width: 720px) {
  .official-app {
    padding: 10px;
  }

  .official-nav {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }

  .official-nav > strong {
    flex: 1 1 100%;
    margin-right: 0;
    font-size: 0.92rem;
  }

  .official-nav-tabs {
    width: 100%;
    gap: 6px;
  }

  .official-nav-tabs > * {
    flex: 1 1 auto;
    min-height: 42px;
  }

  .arcade-music-player {
    position: static;
    width: 100%;
    max-width: none;
    margin: 10px 0 14px;
  }

  .official-view {
    padding-inline: 0;
  }

  .official-cabinet-grid,
  .official-mode-grid,
  .character-roster {
    grid-template-columns: 1fr;
  }

  .official-cabinet-grid > *,
  .official-mode-grid > *,
  .character-roster > * {
    min-width: 0;
  }

  .mode-card,
  .hero-card {
    min-height: 44px;
  }

  .gameplay-topbar,
  .gameplay-control-bar {
    gap: 8px;
  }

  .gameplay-control-bar {
    flex-wrap: wrap;
  }

  .gameplay-control-bar button,
  .gameplay-control-strip button,
  .back-nav-button,
  .primary-button,
  .secondary-button,
  .mode-card,
  .hero-card {
    min-height: 44px;
  }

  .gameplay-control-bar .secondary-button {
    flex: 1 1 46%;
  }

  .combat-hud-overlay {
    max-width: 100%;
  }

  .official-combat-mount {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .official-combat-mount canvas {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
  }

  .official-footer {
    gap: 6px 10px;
    text-align: center;
    padding-bottom: 10px;
  }
}

@media (max-width: 420px) {
  .official-nav-tabs > * {
    flex: 1 1 100%;
  }

  .official-footer {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
  }

  .hero-card-stage {
    height: 132px;
    padding-bottom: 16px;
  }

  .hero-card-stage::after {
    bottom: 12px;
  }

  .hero-card-stage .hmh-cabinet-rotator {
    width: 108px;
    height: 108px;
  }

  /* Tighten the achievements grid on phones so badges stay tappable but still
     read as a horizontal grid (not a single stretched column). */
  .achievements-grid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
  }
  .achievement-name { font-size: 0.58rem; }
}

/* ---- Coming-soon cabinet key-art banners (MWEB Invaders, LitVM Legends) ---- */
/* Key art sits behind the COMING SOON headline + title/desc, cropped to fill the
   card width with a dark overlay so the neon copy stays readable. */
.official-cabinet-card.banner-cabinet-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  justify-content: flex-end;
  filter: none; /* override the generic .locked greyscale so art reads in color */
}
.official-cabinet-card.banner-cabinet-card.locked {
  filter: none;
}
.cabinet-card-banner {
  position: absolute;
  inset: 0;
  background-size: cover;          /* fit width, crop to fill */
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
  transition: transform .4s ease;
}
.official-cabinet-card.banner-cabinet-card::after {
  /* Dark gradient overlay: darker at the bottom where the copy lives. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 11, 26, 0.55) 0%,
    rgba(4, 11, 26, 0.35) 38%,
    rgba(4, 11, 26, 0.82) 78%,
    rgba(4, 11, 26, 0.94) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.official-cabinet-card.banner-cabinet-card .cabinet-card-copy {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.official-cabinet-card.banner-cabinet-card .cabinet-status-label {
  color: #ffe84d;
  letter-spacing: 0.14em;
}
.official-cabinet-card.banner-cabinet-card:hover:not(:disabled) .cabinet-card-banner {
  transform: scale(1.05);
}

/* ---- Free Mode / Play Ranked banner mode buttons ---- */
/* Key art fills each button (cover/crop), darkened by an inline gradient overlay
   baked into the background-image stack, with the title + description on top. */
.mode-row-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mode-banner-button {
  position: relative;
  min-height: 116px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  text-align: left;
  border: 1px solid rgba(25, 247, 255, 0.3);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-size .35s ease;
}
.mode-banner-button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(255, 232, 77, 0.6);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 28px rgba(25, 247, 255, 0.18);
}
.mode-banner-button.primary-button:hover:not(:disabled) {
  border-color: rgba(69, 255, 138, 0.7);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 28px rgba(69, 255, 138, 0.22);
}
.mode-banner-button:disabled {
  filter: grayscale(0.6) brightness(0.7);
  cursor: not-allowed;
}
.mode-banner-copy {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  width: 100%;
}
.mode-banner-title {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f4faff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.95);
  line-height: 1.05;
}
.mode-banner-button.primary-button .mode-banner-title { color: #d9ffe9; }
.mode-banner-button.secondary-button .mode-banner-title { color: #e9f6ff; }
.mode-banner-desc {
  font-size: 0.64rem;
  line-height: 1.25;
  color: rgba(226, 240, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0,0,0,0.95);
}
@media (max-width: 560px) {
  .mode-row-banners { grid-template-columns: 1fr; }
}

/* --- Game switcher tabs (per-game leaderboards + profile stats) ----------- */
.leaderboard-game-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.profile-game-tabs { margin-top: 8px; }
.leaderboard-game-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 8px 16px;
  border-radius: 10px;
  opacity: 0.6;
  border: 1px solid rgba(25,247,255,0.28);
  background: rgba(8,14,32,0.7);
  color: rgba(214, 246, 255, 0.88);
  cursor: pointer;
}
.leaderboard-game-tab.is-active {
  opacity: 1;
  color: #ffe84d;
  border-color: #ffe84d;
  box-shadow: 0 0 10px rgba(255,232,77,0.4);
  background: linear-gradient(135deg, rgba(255,232,77,0.14), rgba(25,247,255,0.1));
}

@media (max-width: 520px) {
  .achievements-head { align-items: flex-start; flex-wrap: wrap; }
  .achievements-count { white-space: normal; }
}
.leaderboard-game-tab.is-locked { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }
.leaderboard-game-tab-title { font-weight: 800; font-size: 0.82rem; letter-spacing: 0.02em; }
.leaderboard-game-tab-badge {
  font-size: 0.54rem; font-weight: 800; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(255,123,47,0.25); color: #ffb454;
}

/* Override cadence tab colors to match the cyan/gold HMH palette */
.leaderboard-cadence-tabs {
  background: rgba(8, 14, 32, 0.4);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(25, 247, 255, 0.1);
  backdrop-filter: blur(2px);
}
.leaderboard-cadence-tab {
  background: transparent;
  border-color: rgba(25, 247, 255, 0.18);
  color: rgba(159, 233, 255, 0.82);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 7px 14px;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.leaderboard-cadence-tab:hover:not(.is-active):not(:disabled) {
  color: #fff;
  border-color: rgba(25, 247, 255, 0.5);
  background: rgba(25, 247, 255, 0.06);
}
.leaderboard-cadence-tab.is-active {
  background: linear-gradient(90deg, rgba(25, 247, 255, 0.24), rgba(69, 255, 138, 0.18));
  border-color: rgba(25, 247, 255, 0.6);
  color: #fff;
  box-shadow: 0 0 10px rgba(25, 247, 255, 0.35), inset 0 0 8px rgba(25, 247, 255, 0.15);
  letter-spacing: 0.15em;
}

/* Leaderboard table polish: tighter rows, stronger rank badges */
.leaderboard-trow.top-3 { border-left: 3px solid transparent; }
.leaderboard-trow.rank-gold    { border-left-color: #ffe84d; }
.leaderboard-trow.rank-silver  { border-left-color: #c0c8cf; }
.leaderboard-trow.rank-bronze  { border-left-color: #cd7f32; }
.leaderboard-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 6px;
  border-radius: 6px;
}
.leaderboard-rank.rank-gold   { background: rgba(255, 232, 77, 0.2); color: #ffe84d; }
.leaderboard-rank.rank-silver { background: rgba(192, 200, 207, 0.18); color: #e5ecf2; }
.leaderboard-rank.rank-bronze { background: rgba(205, 127, 50, 0.2); color: #f4b774; }

/* --- Profile: per-game stats grid + recent run history ------------------- */
.game-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.game-stat-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(8,14,32,0.6);
  border: 1px solid rgba(25,247,255,0.16);
}
.game-stat-value { font-size: 1.05rem; font-weight: 900; color: #19f7ff; }
.game-stat-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; color: #8fa0c8; text-transform: uppercase; }
.game-stats-subhead { display: block; margin-top: 14px; }
.game-history-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.game-history-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; border-radius: 8px;
  background: rgba(4,6,16,0.55); border: 1px solid rgba(52,93,204,0.18);
}
.game-history-score { font-weight: 800; color: #ffe84d; font-size: 0.82rem; }
.game-history-detail { font-size: 0.72rem; color: #c8d4ff; }
@media (max-width: 560px) {
  .game-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Canonical HMH history: parent-owned filters and mobile-first run cards. */
.canonical-run-history-card {
  grid-column: 1 / -1;
  align-items: stretch;
}
.hmh-history-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.hmh-history-filter { display: grid; gap: 5px; }
.hmh-history-filter-label {
  color: #8fa0c8;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hmh-history-select {
  min-width: 0;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(25, 247, 255, 0.28);
  border-radius: 8px;
  background: #070b1b;
  color: #e8f7ff;
  font: inherit;
}
.hmh-history-pb-grid { margin-top: 14px; }
.hmh-history-run-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.hmh-history-run-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(260px, 1.45fr) minmax(190px, 1fr);
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(25, 247, 255, 0.18);
  border-left: 3px solid rgba(25, 247, 255, 0.6);
  border-radius: 10px;
  background: rgba(4, 6, 16, 0.66);
}
.hmh-history-table-header {
  padding-block: 6px;
  border-color: transparent;
  background: transparent;
  color: #7f91ba;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hmh-history-performance,
.hmh-history-build { display: grid; align-content: start; gap: 4px; }
.hmh-history-run-row.provenance-verified-ranked { border-left-color: #45ff8a; }
.hmh-history-run-row.provenance-local-ranked { border-left-color: #ffe84d; }
.hmh-history-run-row.provenance-local-free { border-left-color: #19f7ff; }
.hmh-history-run-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hmh-history-provenance {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: #19f7ff;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.hmh-history-provenance.provenance-verified-ranked { color: #45ff8a; }
.hmh-history-provenance.provenance-local-ranked { color: #ffe84d; }
.hmh-history-build { color: #adbbdf; }
.hmh-history-weapon-grid,
.hmh-history-hero-grid { margin-top: 8px; }
@media (max-width: 820px) {
  .hmh-history-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hmh-history-filter-grid { grid-template-columns: 1fr; }
  .hmh-history-pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hmh-history-run-heading { align-items: flex-start; flex-direction: column; }
  .hmh-history-run-row { grid-template-columns: 1fr; padding: 12px; }
  .hmh-history-table-header { display: none; }
}

/* Expand detailed stats within this run only; no hidden full-history DOM. */
.hmh-history-run-row > * { min-width: 0; overflow-wrap: anywhere; }
.hmh-history-run-heading { flex-wrap: wrap; }
.hmh-history-run-heading > small { flex-basis: 100%; }
.hmh-history-build:has(.hmh-history-details[open]) { grid-column: 1 / -1; }
.hmh-history-details,
.hmh-history-stat-section { min-width: 0; }
.hmh-history-details summary {
  min-height: 44px;
  padding: 10px 4px;
  cursor: pointer;
  color: #e8f7ff;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.hmh-history-details summary:focus-visible {
  outline: 2px solid #19f7ff;
  outline-offset: 2px;
}
.hmh-history-details-toggle { color: #19f7ff !important; }
.hmh-history-session-id { overflow-wrap: anywhere; }
.hmh-history-stat-section { border-top: 1px solid rgba(25, 247, 255, 0.18); }
.hmh-history-stat-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.hmh-history-stat-pair {
  min-width: 0;
  padding: 8px;
  background: rgba(25, 247, 255, 0.04);
  overflow-wrap: anywhere;
}
.hmh-history-stat-pair dt { color: #adbbdf; font-size: 0.72rem; }
.hmh-history-stat-pair dd { margin: 4px 0 0; color: #e8f7ff; font-variant-numeric: tabular-nums; }
.hmh-history-testnet-notice { color: #ffe84d; margin-top: 8px; }
@media (max-width: 1000px) {
  .hmh-history-run-row { grid-template-columns: 1fr; }
  .hmh-history-table-header { display: none; }
}

/* --- Sign out confirmation modal ------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 19, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: modalFadeIn 0.15s ease;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-content {
  background: linear-gradient(145deg, rgba(18, 11, 44, 0.98), rgba(7, 5, 18, 0.98));
  border: 2px solid rgba(25, 247, 255, 0.6);
  border-radius: 16px;
  padding: 24px 28px;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 0 40px rgba(25, 247, 255, 0.2), 0 12px 48px rgba(0, 0, 0, 0.6);
  animation: modalSlideUp 0.2s ease;
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.signout-modal h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  letter-spacing: 0.02em;
}
.signout-modal p {
  margin: 0 0 20px;
  font-size: 0.8rem;
  color: #c8d4ff;
  line-height: 1.5;
  text-align: center;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.modal-actions .btn {
  min-width: 110px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.12s ease;
}
.btn-secondary {
  background: rgba(25, 247, 255, 0.12);
  border-color: rgba(25, 247, 255, 0.4);
  color: #19f7ff;
}
.btn-secondary:hover {
  background: rgba(25, 247, 255, 0.25);
  box-shadow: 0 0 14px rgba(25, 247, 255, 0.4);
}
.btn-danger {
  background: rgba(255, 71, 111, 0.18);
  border-color: rgba(255, 71, 111, 0.5);
  color: #ff9bb2;
}
.btn-danger:hover {
  background: rgba(255, 71, 111, 0.35);
  box-shadow: 0 0 16px rgba(255, 71, 111, 0.5);
  color: #fff;
}

/* --- Leaderboards: filters above one primary board ----------------------- */
.leaderboard-filter-shell {
  grid-column: 1 / -1;
  width: 100%;
}
.leaderboard-command-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: min(1180px, 100%);
  margin-inline: auto;
}
.leaderboard-command-grid > .leaderboard-filter-panel,
.leaderboard-command-grid > .leaderboard-board-card {
  grid-column: 1 / -1;
}
.leaderboard-filter-panel,
.leaderboard-board-card {
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
}
.leaderboard-command-grid > .leaderboard-filter-panel:hover,
.leaderboard-command-grid > .leaderboard-board-card:hover {
  transform: none;
}
.leaderboard-filter-panel {
  padding: clamp(16px, 2vw, 22px);
  border-color: rgba(25, 247, 255, 0.34);
  background:
    radial-gradient(circle at 9% 0%, rgba(255, 232, 77, 0.14), transparent 18rem),
    linear-gradient(135deg, rgba(7, 14, 32, 0.94), rgba(5, 8, 23, 0.9));
}
.leaderboard-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
}
.leaderboard-filter-copy {
  display: grid;
  gap: 6px;
  max-width: 760px;
}
.leaderboard-filter-copy strong {
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.05;
}
.leaderboard-filter-copy small {
  max-width: 68ch;
}
.leaderboard-filter-summary {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 190px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 232, 77, 0.34);
  border-radius: 16px;
  background: rgba(255, 232, 77, 0.08);
  box-shadow: inset 0 0 18px rgba(255, 232, 77, 0.05);
}
.leaderboard-filter-summary-game {
  color: #ffe84d;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.leaderboard-filter-summary strong {
  font-size: 1.15rem;
  color: #fff;
}
.leaderboard-filter-summary small {
  color: #9fe9ff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.leaderboard-filter-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  gap: 14px;
  width: 100%;
  margin-top: 16px;
}
.leaderboard-filter-group {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}
.leaderboard-filter-label {
  color: rgba(159, 233, 255, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.leaderboard-game-tabs.leaderboard-filter-buttons,
.leaderboard-cadence-tabs.leaderboard-filter-buttons {
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.leaderboard-filter-button,
.leaderboard-game-tab.leaderboard-filter-button,
.leaderboard-cadence-tab.leaderboard-filter-button {
  min-height: 0;
  padding: 9px 14px;
  border-radius: 999px;
  opacity: 0.72;
  background: rgba(6, 12, 28, 0.72);
  border: 1px solid rgba(25, 247, 255, 0.26);
  color: rgba(214, 246, 255, 0.88);
  box-shadow: none;
}
.leaderboard-filter-button:hover:not(:disabled) {
  opacity: 1;
  border-color: rgba(25, 247, 255, 0.58);
  transform: translateY(-1px);
}
.leaderboard-filter-button.is-active,
.leaderboard-game-tab.leaderboard-filter-button.is-active,
.leaderboard-cadence-tab.leaderboard-filter-button.is-active {
  opacity: 1;
  color: #05070f;
  border-color: rgba(255, 232, 77, 0.88);
  background: linear-gradient(135deg, #ffe84d, #19f7ff);
  box-shadow: 0 0 18px rgba(25, 247, 255, 0.32), 0 0 16px rgba(255, 232, 77, 0.22);
}
.leaderboard-board-card {
  width: 100%;
  padding: clamp(18px, 2.3vw, 28px);
  border-color: rgba(255, 232, 77, 0.34);
  background:
    radial-gradient(circle at top center, rgba(25, 247, 255, 0.12), transparent 24rem),
    linear-gradient(180deg, rgba(4, 11, 26, 0.94), rgba(2, 5, 16, 0.94));
}
.leaderboard-header-v9 {
  flex-direction: row;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
}
.leaderboard-header-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: 10px;
  min-width: min(420px, 100%);
}
.leaderboard-header-stat {
  padding: 10px 12px;
  border: 1px solid rgba(25, 247, 255, 0.2);
  border-radius: 14px;
  background: rgba(8, 14, 32, 0.72);
  text-align: right;
}
.leaderboard-header-stat span {
  display: block;
  color: rgba(159, 233, 255, 0.7);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.leaderboard-header-stat strong {
  display: block;
  color: #45ff8a;
  font-size: 1.08rem;
}
.leaderboard-table {
  max-height: min(58vh, 560px);
  border-radius: 14px;
  border-color: rgba(25, 247, 255, 0.24);
}
@media (max-width: 760px) {
  .leaderboard-filter-head,
  .leaderboard-header-v9 {
    flex-direction: column;
    align-items: stretch;
  }
  .leaderboard-filter-summary {
    justify-items: start;
    min-width: 0;
  }
  .leaderboard-filter-grid {
    grid-template-columns: 1fr;
  }
  .leaderboard-header-stats {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}
#officialApp[data-step="leaderboards"] .arcade-music-player {
  display: none;
}
.hero-carousel-hint {
  display: none;
}
@media (min-width: 701px) {
  #officialApp[data-step="character-select"] .arcade-music-player {
    display: none;
  }
}

@media (max-width: 700px) {
  .hero-carousel-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 10px;
    color: #9fe9ff;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .hero-carousel-hint span {
    color: #ffe84d;
    font-size: 1.1rem;
  }
  #officialCharacterRoster.character-roster {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(86vw, 340px);
    align-items: stretch;
    gap: 14px;
    margin-inline: -12px;
    /* 8 px below the cards clears the thin scrollbar; the old 18 px was
       another 10 px against the mobile document height. */
    padding: 4px 12px 8px;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 12px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }
  /* Phone card tightening. Cycle 013 wrote these against `.hero-card-inner`
     and `.hero-card-bio`, names the roster renderer never emits, so phones
     kept the desktop 22 px padding / 18 px gap for sixty cycles while the
     document crept up to the 1800 px smoke pin. The rules now target the
     classes official-play-routes.mjs actually renders; the audit in
     tests/hmh-hero-select-ui.test.mjs holds this block to emitted names.
     No bio line clamp: the smoke asserts every bio renders unclipped. */
  #officialCharacterRoster .hero-card {
    min-width: 0;
    padding: 16px;
    gap: 10px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* No stage min-height here: the old 168 px floor was sized for the 1.4x
     transform-scaled turntable and, by ID specificity, beat the <=420 px
     `height: 132px` rule, leaving a 46 px dead band above the unscaled 108 px
     portrait. 421-700 px keeps the 210 px desktop stage; narrow phones get
     the 132 px stage the <=420 block always intended. */
  #officialCharacterRoster .hero-stats {
    gap: 7px;
    margin-top: 8px;
    padding-top: 10px;
  }
  /* Locked cards carry the unlock meter, so they set the carousel row height;
     compact the meter on phones instead of letting it drive every card. */
  #officialCharacterRoster .hero-unlock-progress {
    margin-top: 6px;
    padding: 8px 10px;
    gap: 5px;
  }
  #officialCharacterRoster .hero-cta {
    margin-top: 10px;
  }
  /* Dot indicator for the snap carousel: one dot per hero, driven from the
     roster's real scroll geometry (Cycle 074, U-6). Indicative only. */
  .hero-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    /* The select view is a 22 px grid; the dots sit inside the hint's existing
       margin band instead of adding a row, so the carousel document height stays
       under the 1800 px mobile pin (measured 1806 with a plain row in Cycle 074;
       the phone-card tightening above brought the 390x844 document back to
       ~1769 px after the footer trust links pushed it to 1866). */
    margin: -26px 0 -4px;
  }
  .hero-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(159, 233, 255, 0.28);
    transition: transform 0.16s ease, background-color 0.16s ease;
  }
  .hero-carousel-dot[data-active="true"] {
    background: #ffe84d;
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(255, 232, 77, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card, .hero-card.active:hover { transform: none; transition: none; }
  .hero-stat-fill { transition: none; }
  .hero-carousel-dot { transition: none; }
}

/* =========================================================================
   Scores page v10: game banner switcher, filter toolbar, per-game standing
   (routes/official-leaderboard-route.mjs + src/leaderboard-view.mjs)
   ========================================================================= */
.leaderboard-command-v10 { gap: 14px; }
.leaderboard-command-v10 .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.leaderboard-command-v10 .leaderboard-filter-head { margin-bottom: 0; }
.leaderboard-command-v10 .leaderboard-filter-group { width: 100%; }

/* ---- Game banners -------------------------------------------------------- */
.leaderboard-game-banner-group { margin-top: 2px; }
.leaderboard-game-banners.leaderboard-filter-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  gap: 12px;
  width: 100%;
}
.leaderboard-game-banner.leaderboard-filter-button {
  --lb-accent: #19f7ff;
  --lb-accent-rgb: 25, 247, 255;
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  min-height: 132px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(var(--lb-accent-rgb), 0.34);
  background: rgba(4, 10, 24, 0.9);
  color: #eaf6ff;
  opacity: 1;
  overflow: hidden;
  text-align: left;
  isolation: isolate;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.leaderboard-game-banner[data-game="lester-blaster"] { --lb-accent: #ffe84d; --lb-accent-rgb: 255, 232, 77; }
.leaderboard-game-banner[data-game="chikun"] { --lb-accent: #45ff8a; --lb-accent-rgb: 69, 255, 138; }
.leaderboard-game-banner[data-game="stacked"] { --lb-accent: #b48cff; --lb-accent-rgb: 180, 140, 255; }
.leaderboard-game-banner-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  filter: saturate(0.85) brightness(0.55);
  transition: filter 0.2s ease, transform 0.35s ease;
}
.leaderboard-game-banner-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 7, 20, 0.94) 0%, rgba(3, 7, 20, 0.72) 48%, rgba(3, 7, 20, 0.35) 100%),
    linear-gradient(180deg, transparent 40%, rgba(3, 7, 20, 0.85) 100%);
}
/* The same key art the cabinet browser / mode select already ships (see
   LEADERBOARD_GAME_BANNERS in src/leaderboard-view.mjs). */
.leaderboard-game-banner[data-game="lester-blaster"] .leaderboard-game-banner-art { background-image: url("./assets/hmh-art/banners/hmh-rankedmode-640.webp"); background-position: 68% 30%; }
.leaderboard-game-banner[data-game="chikun"] .leaderboard-game-banner-art { background-image: url("./assets/generated/chikun-mode-select/chikuns-escape-ranked-mode.webp"); background-position: center 35%; }
.leaderboard-game-banner[data-game="stacked"] .leaderboard-game-banner-art { background-image: url("./assets/stacked-mode-select/stacked-mode-bg.svg"); background-size: 200% auto; background-position: 50% 100%; }
.leaderboard-game-banner-cabinet {
  grid-row: 1 / span 2;
  width: 72px;
  height: 84px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
  transition: transform 0.2s ease;
}
.leaderboard-game-banner-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  align-self: end;
}
.leaderboard-game-banner-kicker {
  color: rgba(var(--lb-accent-rgb), 0.9);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.leaderboard-game-banner-title.leaderboard-game-tab-title {
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
  overflow-wrap: anywhere;
}
.leaderboard-game-banner-tagline {
  color: rgba(226, 240, 255, 0.88);
  font-size: 0.7rem;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}
.leaderboard-game-banner-meta {
  margin-top: 4px;
  color: #9fe9ff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}
.leaderboard-game-banner-state {
  grid-column: 2;
  justify-self: start;
  align-self: start;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--lb-accent-rgb), 0.45);
  background: rgba(3, 7, 20, 0.7);
  color: rgba(var(--lb-accent-rgb), 0.95);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.leaderboard-game-banner.leaderboard-filter-button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(var(--lb-accent-rgb), 0.8);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 26px rgba(var(--lb-accent-rgb), 0.18);
}
.leaderboard-game-banner.leaderboard-filter-button:hover .leaderboard-game-banner-art { filter: saturate(1) brightness(0.72); transform: scale(1.04); }
.leaderboard-game-banner.leaderboard-filter-button:hover .leaderboard-game-banner-cabinet { transform: translateY(-2px); }
.leaderboard-game-banner.leaderboard-filter-button.is-active {
  color: #fff;
  background: rgba(4, 10, 24, 0.9);
  border-color: rgba(var(--lb-accent-rgb), 0.95);
  box-shadow: 0 0 0 2px rgba(var(--lb-accent-rgb), 0.35), 0 0 30px rgba(var(--lb-accent-rgb), 0.28), 0 14px 30px rgba(0, 0, 0, 0.55);
}
.leaderboard-game-banner.is-active .leaderboard-game-banner-art { filter: saturate(1) brightness(0.8); }
.leaderboard-game-banner.is-active .leaderboard-game-banner-state {
  color: #05070f;
  background: var(--lb-accent);
  border-color: var(--lb-accent);
}
.leaderboard-game-banner.is-active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--lb-accent);
  box-shadow: 0 0 14px rgba(var(--lb-accent-rgb), 0.9);
}
.leaderboard-game-banner:focus-visible,
.leaderboard-command-v10 .leaderboard-filter-button:focus-visible,
.leaderboard-command-v10 .leaderboard-search:focus-visible,
.leaderboard-command-v10 .leaderboard-sort-select:focus-visible,
.leaderboard-board-v10 button:focus-visible,
.leaderboard-board-v10 a:focus-visible,
.leaderboard-board-v10 .leaderboard-trow:focus-visible {
  outline: 3px solid #ffe84d;
  outline-offset: 3px;
}

/* ---- Filter toolbar -------------------------------------------------------- */
.leaderboard-filter-grid-v10 {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  margin-top: 4px;
}
.leaderboard-filter-grid-v10 .leaderboard-find-filter { grid-column: 1 / -1; }
.leaderboard-command-v10 .leaderboard-filter-button,
.leaderboard-command-v10 .leaderboard-cadence-tab.leaderboard-filter-button,
.leaderboard-command-v10 .leaderboard-source-tab.leaderboard-filter-button {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 0.7rem;
}
.leaderboard-command-v10 .leaderboard-filter-buttons { gap: 8px; }
.leaderboard-controls-v10 {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: stretch;
  margin: 0;
  width: 100%;
}
.leaderboard-search-field,
.leaderboard-sort-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.leaderboard-sort-label {
  flex: 0 0 auto;
  color: rgba(159, 233, 255, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.leaderboard-command-v10 .leaderboard-search,
.leaderboard-sort-select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(25, 247, 255, 0.32);
  background: rgba(6, 12, 28, 0.82);
  color: #e7f6ff;
  font: inherit;
  font-size: 0.86rem;
}
.leaderboard-sort-select { cursor: pointer; }
.leaderboard-sort-select option { background: #060c1c; color: #e7f6ff; }
.leaderboard-command-v10 .leaderboard-search:focus,
.leaderboard-sort-select:focus { border-color: rgba(25, 247, 255, 0.7); box-shadow: 0 0 0 2px rgba(25, 247, 255, 0.18); }
.leaderboard-sort-dir,
.leaderboard-reset-button,
.leaderboard-jump-button,
.leaderboard-show-more,
.leaderboard-show-all,
.leaderboard-show-less,
.leaderboard-empty-action {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(25, 247, 255, 0.34);
  background: rgba(6, 12, 28, 0.82);
  color: #d6f6ff;
  font-size: 0.68rem;
  white-space: nowrap;
  box-shadow: none;
}
.leaderboard-sort-dir:hover:not(:disabled),
.leaderboard-reset-button:hover:not(:disabled),
.leaderboard-jump-button:hover:not(:disabled),
.leaderboard-show-more:hover:not(:disabled),
.leaderboard-show-all:hover:not(:disabled),
.leaderboard-show-less:hover:not(:disabled),
.leaderboard-empty-action:hover:not(:disabled) { border-color: rgba(25, 247, 255, 0.7); color: #fff; }
.leaderboard-jump-button { border-color: rgba(255, 232, 77, 0.6); color: #ffe84d; }
.leaderboard-reset-button:disabled { opacity: 0.45; cursor: not-allowed; }
.leaderboard-filter-summary-v10 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  justify-items: start;
  width: 100%;
  min-width: 0;
  margin: 2px 0 0;
  padding: 10px 14px;
}
.leaderboard-filter-summary-v10 strong { font-size: 0.92rem; }
.leaderboard-filter-summary-v10 small { letter-spacing: 0.06em; }

/* ---- Board card ------------------------------------------------------------ */
.leaderboard-board-v10 { gap: 14px; }
.leaderboard-board-v10 .leaderboard-header-copy { display: grid; gap: 4px; min-width: 0; }
.leaderboard-board-v10 .leaderboard-source-copy { color: rgba(214, 246, 255, 0.72); font-size: 0.74rem; }
.leaderboard-board-v10 .leaderboard-header-stats {
  grid-template-columns: repeat(5, minmax(96px, 1fr));
  min-width: 0;
  width: 100%;
  max-width: 620px;
}
.leaderboard-board-v10 .leaderboard-header-stat strong { font-size: 1rem; white-space: nowrap; }
.leaderboard-board-v10 .podium-name { max-width: min(180px, 28vw); }
.leaderboard-header-stat-you strong { color: #ffe84d; }
.leaderboard-header-stat-warn strong { color: #ff9d5c; }
.leaderboard-header-stat-muted strong { color: rgba(214, 246, 255, 0.72); }
.leaderboard-board-v10 .leaderboard-local-notice {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid rgba(255, 232, 77, 0.7);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 232, 77, 0.06);
  color: rgba(226, 240, 255, 0.9);
  font-size: 0.78rem;
  line-height: 1.4;
}
.leaderboard-you-card-v10 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 232, 77, 0.3);
  background: rgba(255, 232, 77, 0.06);
}
.leaderboard-you-card-v10.is-ranked { border-color: rgba(255, 232, 77, 0.7); background: rgba(255, 232, 77, 0.1); }
.leaderboard-you-copy { display: grid; gap: 2px; flex: 1 1 200px; min-width: 0; }
.leaderboard-you-card-v10 .leaderboard-you-score { margin-left: 0; }
.leaderboard-you-card-v10 .leaderboard-you-detail { color: rgba(214, 246, 255, 0.8); font-size: 0.74rem; }
.leaderboard-jump-button { margin-left: auto; }
.leaderboard-empty-state {
  display: grid;
  gap: 8px;
  justify-items: start;
  width: 100%;
  padding: 22px 18px;
  border: 1px dashed rgba(25, 247, 255, 0.35);
  border-radius: 14px;
  background: rgba(8, 14, 32, 0.55);
}
.leaderboard-empty-title { color: #e7f6ff; font-size: 0.92rem; font-weight: 800; line-height: 1.35; }
.leaderboard-empty-copy { color: rgba(214, 246, 255, 0.72); font-size: 0.78rem; line-height: 1.4; }

/* ---- Standing table -------------------------------------------------------- */
.leaderboard-board-v10 .leaderboard-table-v10 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-table-head,
.leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-trow {
  display: grid;
  grid-template-columns: 52px minmax(160px, 1.9fr) 104px repeat(5, minmax(64px, 0.7fr)) 104px 84px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-table-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-bottom: 2px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(25, 247, 255, 0.28);
  background: rgba(4, 9, 22, 0.96);
}
.leaderboard-th-cell { display: flex; min-width: 0; }
.lb-align-end { justify-content: flex-end; text-align: right; }
.lb-align-start { justify-content: flex-start; text-align: left; }
.leaderboard-board-v10 .leaderboard-th {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 4px;
  border-radius: 8px;
  color: #8ea3c9;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.leaderboard-board-v10 .leaderboard-th.is-static { cursor: default; }
.leaderboard-board-v10 .leaderboard-th:hover:not(.is-static) { color: #9fe9ff; background: rgba(25, 247, 255, 0.08); }
.leaderboard-board-v10 .leaderboard-th.is-sorted { color: #19f7ff; }
.leaderboard-board-v10 .leaderboard-trow {
  font-size: 0.78rem;
  border: 1px solid rgba(25, 247, 255, 0.1);
  border-radius: 10px;
  background: rgba(8, 14, 32, 0.6);
}
.leaderboard-board-v10 .leaderboard-trow:hover { transform: none; border-color: rgba(25, 247, 255, 0.4); }
.leaderboard-board-v10 .leaderboard-trow.is-current-player {
  border-color: rgba(255, 232, 77, 0.85);
  background: rgba(255, 232, 77, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 232, 77, 0.35);
}
.leaderboard-td { display: flex; align-items: center; min-width: 0; }
.leaderboard-board-v10 .lt-cell-label { display: none; }
.leaderboard-board-v10 .lt-name { gap: 9px; min-width: 0; }
.lt-name-stack { display: grid; gap: 2px; min-width: 0; }
.leaderboard-board-v10 .lt-name-text { font-size: 0.86rem; font-weight: 700; color: #eaf6ff; }
.lt-name-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.lt-name-meta > * { font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.lt-you-chip { padding: 1px 6px; border-radius: 999px; background: #ffe84d; color: #05070f; font-weight: 900; }
.leaderboard-board-v10 .lt-house-score { color: #ffb454; font-weight: 800; }
.leaderboard-board-v10 .lt-settled { color: #45ff8a; font-weight: 800; }
.leaderboard-board-v10 .lt-input-device { color: rgba(159, 233, 255, 0.8); }
.leaderboard-board-v10 .lt-session-detail { color: #9fe9ff; text-decoration: underline; text-underline-offset: 2px; }
.leaderboard-board-v10 .lt-score { font-size: 0.95rem; font-weight: 900; color: #45ff8a; font-variant-numeric: tabular-nums; }
.leaderboard-board-v10 .lt-stat { color: #c8d4ff; font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.leaderboard-board-v10 .lt-date { color: #8b9bc0; font-size: 0.74rem; white-space: nowrap; }
.leaderboard-board-v10 .lt-trust {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(159, 233, 255, 0.25);
  color: #c8d4ff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lt-trust-success, .lt-trust-good { border-color: rgba(69, 255, 138, 0.5); color: #45ff8a; }
.lt-trust-warning, .lt-trust-warn { border-color: rgba(255, 180, 84, 0.5); color: #ffb454; }
.lt-trust-danger, .lt-trust-bad { border-color: rgba(255, 95, 162, 0.55); color: #ff8ab8; }
.leaderboard-board-v10 .leaderboard-empty { display: block; padding: 0; }
.leaderboard-empty-cell {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 22px 14px;
  text-align: center;
}
.leaderboard-table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-top: 4px;
}
.leaderboard-table-count { flex: 1 1 200px; color: rgba(214, 246, 255, 0.72); font-size: 0.74rem; }

/* Column priorities: 3 = secondary stats (hide first), 2 = key stats, 1 = always. */
@media (max-width: 1080px) {
  .leaderboard-board-v10 .leaderboard-header-v9 { flex-direction: column; align-items: stretch; }
  .leaderboard-board-v10 .leaderboard-header-stats { max-width: none; }
  .leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-table-head,
  .leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-trow {
    grid-template-columns: 48px minmax(150px, 1.9fr) 96px repeat(3, minmax(60px, 0.7fr)) 80px;
  }
  .leaderboard-board-v10 .lb-priority-3 { display: none; }
}
@media (max-width: 760px) {
  .leaderboard-filter-grid-v10 { grid-template-columns: minmax(0, 1fr); }
  .leaderboard-controls-v10 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .leaderboard-search-field { grid-column: 1 / -1; }
  .leaderboard-board-v10 .leaderboard-header-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .leaderboard-board-v10 .leaderboard-header-stat { padding: 8px 10px; }
  .leaderboard-board-v10 .leaderboard-header-stat strong { font-size: 0.96rem; }
  .leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-table-head,
  .leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-trow {
    grid-template-columns: 44px minmax(0, 1fr) 88px repeat(3, minmax(48px, 0.6fr));
    gap: 8px;
  }
  .leaderboard-board-v10 .lb-priority-2.th-cell-date,
  .leaderboard-board-v10 .lb-priority-2.lt-cell-date { display: none; }
}
/* Phone: rows become stat cards (rank / player / score up top, labelled chips below). */
@media (max-width: 600px) {
  .leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-table-head { display: none; }
  .leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-trow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 10px 12px;
  }
  .leaderboard-board-v10 .leaderboard-td { display: inline-flex; }
  /* Line break after the score so the stat chips always start a new row. */
  .leaderboard-board-v10 .leaderboard-trow::after { content: ""; flex-basis: 100%; height: 0; order: 3; }
  .leaderboard-board-v10 .lt-stat, .leaderboard-board-v10 .lt-date { display: inline; }
  .leaderboard-board-v10 .lt-cell-rank { flex: 0 0 auto; order: 1; }
  .leaderboard-board-v10 .lt-cell-name { flex: 1 1 120px; order: 2; }
  .leaderboard-board-v10 .lt-cell-score { flex: 0 0 auto; order: 3; margin-left: auto; }
  .leaderboard-board-v10 .leaderboard-td:not(.lt-cell-rank):not(.lt-cell-name):not(.lt-cell-score) { flex: 0 0 auto; order: 4; }
  .leaderboard-board-v10 .lb-priority-2, .leaderboard-board-v10 .lb-priority-3 { display: inline-flex; }
  .leaderboard-board-v10 .lt-stat,
  .leaderboard-board-v10 .lt-date {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(25, 247, 255, 0.08);
    color: #d6f6ff;
    font-size: 0.68rem;
  }
  .leaderboard-board-v10 .lt-cell-label {
    display: inline;
    padding: 3px 0 3px 8px;
    border-radius: 999px 0 0 999px;
    background: rgba(25, 247, 255, 0.08);
    color: rgba(159, 233, 255, 0.75);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .leaderboard-board-v10 .lt-cell-label + .lt-stat,
  .leaderboard-board-v10 .lt-cell-label + .lt-date { border-radius: 0 999px 999px 0; padding-left: 5px; }
  .leaderboard-board-v10 .lt-cell-label + .lt-trust { margin-left: 4px; }
  .leaderboard-board-v10 .lt-trust { font-size: 0.56rem; }
  .leaderboard-board-v10 .lt-name-meta > * { font-size: 0.54rem; }
  .leaderboard-podium { gap: 6px; }
  .podium-name { max-width: 84px; }
}
@media (max-width: 420px) {
  .leaderboard-controls-v10 { grid-template-columns: minmax(0, 1fr); }
  .leaderboard-sort-field { flex-direction: column; align-items: stretch; gap: 4px; }
  .leaderboard-board-v10 .leaderboard-header-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leaderboard-game-banner.leaderboard-filter-button { grid-template-columns: 56px minmax(0, 1fr); column-gap: 10px; padding: 12px; }
  .leaderboard-game-banner-cabinet { width: 56px; height: 68px; }
  .leaderboard-jump-button { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .leaderboard-game-banner.leaderboard-filter-button,
  .leaderboard-game-banner-art,
  .leaderboard-game-banner-cabinet { transition: none; }
  .leaderboard-game-banner.leaderboard-filter-button:hover:not(:disabled) { transform: none; }
  .leaderboard-game-banner.leaderboard-filter-button:hover .leaderboard-game-banner-art { transform: none; }
}

/* ---- Live UI audit 2026-09-24 (docs/qa/live-ui-audit-20260924.json) ------ */
/* Generic arcade buttons. A button or link that carries only the
   pixel-button class (Share profile, View Leaderboard, Try again, Sign in,
   Retry, the Ranked entry network and funds guard, the name toast's Not now)
   had no style of its own: the browser's grey fill under the dark global
   button text, 3.8:1, reading as a disabled control. Variant classes
   (leaderboard-*, profile-action-*) keep their own look. */
button[class="pixel-button"],
a[class="pixel-button"],
.pixel-button.profile-share-button,
.pixel-button.profile-session-retry,
.pixel-button.profile-retry-saved,
.pixel-button.profile-state-retry,
.pixel-button.name-claim-later {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(25, 247, 255, 0.55);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(25, 247, 255, 0.16), rgba(25, 247, 255, 0.04)), #07112a;
  color: #e8fbff;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(25, 247, 255, 0.14);
}
button[class="pixel-button"]:hover:not(:disabled),
a[class="pixel-button"]:hover,
.pixel-button.profile-share-button:hover:not(:disabled),
.pixel-button.profile-session-retry:hover:not(:disabled),
.pixel-button.profile-retry-saved:hover:not(:disabled),
.pixel-button.profile-state-retry:hover:not(:disabled),
.pixel-button.name-claim-later:hover {
  border-color: #19f7ff;
  color: #fff;
  box-shadow: 0 0 18px rgba(25, 247, 255, 0.32);
}
button[class="pixel-button"]:focus-visible,
a[class="pixel-button"]:focus-visible,
.pixel-button.profile-share-button:focus-visible,
.pixel-button.profile-session-retry:focus-visible,
.pixel-button.profile-retry-saved:focus-visible,
.pixel-button.profile-state-retry:focus-visible,
.pixel-button.name-claim-later:focus-visible { outline: 2px solid #ffe84d; outline-offset: 3px; }
button[class="pixel-button"]:disabled,
.pixel-button.profile-session-retry:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.pixel-button.profile-avatar-option {
  padding: 4px;
  border: 2px solid rgba(25, 247, 255, 0.3);
  border-radius: 16px;
  background: rgba(7, 17, 42, 0.85);
}
.pixel-button.profile-avatar-option.is-active { border-color: #ffe84d; box-shadow: 0 0 16px rgba(255, 232, 77, 0.4); }
.pixel-button.profile-avatar-option:focus-visible { outline: 2px solid #ffe84d; outline-offset: 2px; }
/* 1.9.3 "Upload your own" under the arcade avatar picker. */
.profile-avatar-upload { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(25, 247, 255, 0.2); }
.profile-avatar-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.profile-avatar-upload-preview { width: 56px; height: 56px; border-radius: 14px; border: 2px solid #ffe84d; object-fit: cover; }
.pixel-button.profile-avatar-choose:focus-visible,
.pixel-button.profile-avatar-save:focus-visible,
.pixel-button.profile-avatar-cancel:focus-visible,
.pixel-button.profile-avatar-remove:focus-visible { outline: 2px solid #ffe84d; outline-offset: 3px; }
.pixel-button.profile-avatar-choose:disabled,
.pixel-button.profile-avatar-save:disabled,
.pixel-button.profile-avatar-remove:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
/* Show more stays focusable while its page loads (aria-disabled, not disabled). */
.leaderboard-show-more[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
/* After the last page loads, focus moves to the row count. */
.leaderboard-table-count:focus-visible { outline: 2px solid #19f7ff; outline-offset: 3px; border-radius: 4px; }

/* The board title's trophy sat raised against the first letter. */
.leaderboard-title { display: flex; align-items: center; gap: 0.45em; }

/* Profile: a wallet shown in place of a display name keeps its hex case
   (the card's strong style uppercased "0x8841…e824" to "0X8841…E824"). */
.profile-hero-name.profile-hero-name-wallet {
  text-transform: none;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: clamp(1rem, 4.6vw, 1.4rem);
  letter-spacing: 0;
  white-space: nowrap;
}

/* The same for a board row's wallet line under its display name. */
.leaderboard-table .lt-name-meta > .lt-wallet-short { text-transform: none; }

/* Recent runs and verified stats start at the top of a card stretched to
   its row; the card default (justify-content: flex-end) left a tall empty
   band above "Recent Ranked runs". */
.profile-command-grid > .profile-recent-sessions-card,
.profile-command-grid > .profile-verified-games-card { justify-content: flex-start; }
.profile-recent-sessions-card .profile-session-list { align-self: stretch; }

/* One run per card on two lines (score and game, then status and links),
   instead of five inline items squeezed into columns: at 390 px
   "⛓ verified" and "Run page" broke into "Run / verifiedpage", and the
   rows overflowed the card at 320 px. */
.game-history-row.profile-session-row {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px 14px;
  padding: 10px 12px;
}
.profile-session-row > .game-history-score { font-size: 0.95rem; white-space: nowrap; }
.profile-session-row > .game-history-detail { flex: 1 1 calc(100% - 9rem); min-width: 0; font-size: 0.78rem; }
.profile-session-row > .game-history-chain {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #b4aed4;
}
.profile-session-row > .game-history-chain.trust-verified { color: #45ff8a; }
.profile-session-row > .game-history-chain.trust-pending,
.profile-session-row > .game-history-chain.trust-retrying { color: #ffb347; }
.profile-session-row > .game-history-chain.trust-failed { color: #ff8fa3; }
.profile-session-row > .game-history-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #19f7ff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.profile-session-row > small { flex-basis: 100%; }

/* Achievement cards: the title leads (it was 10 px, smaller than its game
   and tier line), the tier reads in its colour, and phones get two
   readable columns instead of three 84 px ones. */
.profile-achievement-card .achievement-name { font-size: 0.86rem; font-weight: 800; color: #f4fbff; line-height: 1.25; }
.profile-achievement-card .achievement-record-status { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.profile-achievement-card.tier-bronze .achievement-record-status { color: #e8a867; }
.profile-achievement-card.tier-silver .achievement-record-status { color: #c7d0dc; }
.profile-achievement-card.tier-gold .achievement-record-status { color: #ffd54a; }
.profile-achievement-card.tier-platinum .achievement-record-status { color: #7bf6ff; }
@media (max-width: 560px) {
  .achievements-grid.profile-achievement-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}

/* ---- Game version per score (version-column, 2026-09-25) ----------------- */
/* No testnet season resets: every verified score shows the game version it
   was played on. Hosted Scores boards add a compact Version cell ('v0.5');
   the preview board keeps its ten columns. Every column the board showed
   before stays at every width (Published from 761 px up), stat columns keep
   at least the room they had, and no width runs a row past the card (the
   ten-track grid did at 1081-1113 px):
   - 1200 px and up: a Version column before Proof;
   - 601-1199 px: the version sits under the score, its header under SCORE;
   - phones: a labelled chip with the stats.
   npm run smoke:scores-version measures it in Chromium, headers included. */
.leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-table-head,
.leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-trow {
  grid-template-columns: 48px minmax(130px, 1.9fr) 100px repeat(5, minmax(56px, 0.7fr)) 64px 92px 76px;
  gap: 8px;
}
.leaderboard-board-v10 .lt-version {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 7px;
  border: 1px solid rgba(159, 233, 255, 0.3);
  border-radius: 999px;
  color: #9fe9ff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.leaderboard-board-v10 .lt-version.is-unknown { border-color: transparent; color: #8b9bc0; }
.lb-align-center { justify-content: center; text-align: center; }
@media (max-width: 1199px) {
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-table-head,
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-trow {
    grid-template-columns: 48px minmax(150px, 1.9fr) 100px repeat(5, minmax(60px, 0.7fr)) 92px 76px;
    gap: 2px 8px;
  }
  /* Under the score: every other cell spans both lines of the row. The head
     mirrors it (VERSION under SCORE), so every row has one column header per
     cell for screen readers, and the head keeps its height. */
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-trow > .leaderboard-td { grid-row: 1 / span 2; }
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-trow > .lt-cell-score { grid-row: 1; align-self: end; }
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-trow > .lt-cell-version { grid-row: 2; grid-column: 3; align-self: start; justify-content: flex-end; }
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-head > .leaderboard-th-cell { grid-row: 1 / span 2; }
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-head > .th-cell-score { grid-row: 1; align-self: end; }
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-head > .th-cell-version { grid-row: 2; grid-column: 3; align-self: start; justify-content: flex-end; }
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-head > .th-cell-score > .leaderboard-th,
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-head > .th-cell-version > .leaderboard-th { min-height: 0; padding-top: 2px; padding-bottom: 2px; }
}
@media (max-width: 1080px) {
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-table-head,
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-trow {
    grid-template-columns: 48px minmax(150px, 1.9fr) 96px repeat(3, minmax(60px, 0.7fr)) 80px;
  }
}
@media (max-width: 760px) {
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-table-head,
  .leaderboard-board-hosted.leaderboard-board-v10 .leaderboard-table-v10 .leaderboard-trow {
    grid-template-columns: 44px minmax(0, 1fr) 88px repeat(3, minmax(48px, 0.6fr));
    gap: 2px 8px;
  }
}
@media (max-width: 600px) {
  .leaderboard-board-v10 .lt-version {
    padding: 3px 8px;
    border: 0;
    background: rgba(25, 247, 255, 0.08);
    font-size: 0.68rem;
  }
  .leaderboard-board-v10 .lt-cell-label + .lt-version { border-radius: 0 999px 999px 0; padding-left: 5px; }
}

/* Profile: the version leads each run's status line. */
.profile-session-row > .profile-session-version {
  padding: 2px 8px;
  border: 1px solid rgba(159, 233, 255, 0.3);
  border-radius: 999px;
  color: #9fe9ff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* An unknown version ('HMH v?') is muted, as on the hosted board. */
.profile-session-row > .profile-session-version.is-unknown { border-color: transparent; color: #8b9bc0; }