/*
 * /lobby — the Midnight Volt storefront (ADR-061, T-165).
 *
 * One file, no build step. The layout is the reference language distilled in
 * the design reference notes and mocked in
 * design/mockups/midnight-volt/web-lobby.html:
 *
 *   - a 60px BLACK top bar: wordmark in the accent, icon-labelled nav,
 *     search, grey Log in beside the volt Sign up;
 *   - a full-width hero bonus banner (the promo carousel restyled — every
 *     slide advertises a REAL programme, no invented figure);
 *   - a circular quick-nav row;
 *   - dense category GRIDS (TOP Games two rows deep, then the category
 *     rails), every tile REAL art with a dark title-bar strip BENEATH it —
 *     never text over art;
 *   - the honest live-wins ticker, and the trust footer (LP-8: a bare
 *     copyright line stands in for licence/company info until it exists —
 *     never invented).
 *
 * Two rules govern every line:
 *
 *  1. No raw colour, size, radius or duration — every value is a token from
 *     tokens.css. The only literals are the recorded breakpoints (720 / 960 /
 *     1280 — a media query cannot read a custom property) and structural
 *     constants with no design meaning (0, 1fr, 100%, 50%). Game art arrives
 *     from web/art/ carrying its own colour; that is the one place on the
 *     page that is not the palette.
 *
 *  2. Mobile first. 390px is the default path; min-width blocks add what a
 *     larger viewport can afford. Under 720px the bottom nav carries the
 *     sections; from 720px the top bar does.
 *
 * The classes lobby.js GENERATES (g-tile, g-badge, block, grid, pill, wchip,
 * wrow, wthumb, hchip, carousel__dot) are all styled here — renaming any of
 * them is a cross-file change with lobby.js.
 */

/* ========================================================== reset & base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--surface-base);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* room for the phone bottom nav */
  padding-bottom: var(--bnav-h);
}

@media (min-width: 720px) {
  body {
    padding-bottom: 0;
  }
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a {
  color: inherit;
  text-decoration: none;
}

img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: var(--border-thick) solid var(--focus-ring);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--accent-subtle);
  color: var(--text-primary);
}

.skip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  transform: translateY(-200%);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 700;
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius-md) 0;
}
.skip:focus {
  transform: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Inline SVG icons inherit currentColor; sized here so markup carries no
 * width/height styling of its own. */
.topnav__item svg,
.qchip svg,
.bnav__item svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ================================================================ button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-settle),
    color var(--dur-fast) var(--ease-settle),
    transform var(--dur-spring) var(--ease-spring);
}

.btn:active {
  transform: scale(var(--press-scale));
}

.btn svg {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* The volt face — the accent's ONE job. */
.btn--accent {
  background: var(--accent);
  color: var(--text-on-accent);
}
.btn--accent:hover { background: var(--accent-hover); }
.btn--accent:active { background: var(--accent-pressed); }

/* The quiet grey control beside the loud volt one (Log in, steppers). */
.btn--ghost {
  background: var(--control-secondary);
  color: var(--text-primary);
}
.btn--ghost:hover { background: var(--surface-hover); }

/* --gold was a second CTA hue; it is the SAME grey face now — one accent. */
.btn--gold {
  background: var(--control-secondary);
  color: var(--text-primary);
}
.btn--gold:hover { background: var(--surface-hover); }

.btn--lg {
  min-height: var(--tap-hero);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-body);
  border-radius: var(--radius-pill);
}

.btn--block {
  width: 100%;
}

/* Legacy wrapper from the slash era — renders as plain text now. */
.btn--slash { position: relative; }
.btn__t { position: relative; }

/* ================================================================ topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topbar-h);
  background: var(--surface-sunken);
  border-bottom: var(--border-hairline) solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
}

@media (min-width: 720px) {
  .topbar {
    padding: 0 var(--space-5);
  }
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-3);
  flex: none;
}

/* The wordmark: plain text, heavy caps, the accent. No drawn logo. */
.wordmark {
  font-weight: var(--weight-display);
  font-size: var(--text-heading);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* Category nav — desktop only, icon-labelled per the reference. */
.topnav {
  display: none;
}

@media (min-width: 960px) {
  .topnav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
}

.topnav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-settle),
    color var(--dur-fast) var(--ease-settle);
}

.topnav__item:hover {
  color: var(--text-primary);
  background: var(--surface-raised);
}

.topnav__item.is-active,
.topnav__item[aria-current='page'] {
  color: var(--accent);
}

/* The gold modifier is retired — promotions read like every other item. */
.topnav__item--gold { color: var(--text-secondary); }
.topnav__item--gold:hover { color: var(--text-primary); }

.search {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  width: var(--search-w);
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

@media (min-width: 720px) {
  .search { display: flex; }
}

.search:focus-within {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.search svg {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  flex: none;
}

.search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-label);
}

.search input::placeholder {
  color: var(--text-secondary);
}

.topbar__auth {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

@media (min-width: 720px) {
  .topbar__auth { margin-left: var(--space-2); }
}

/* The language toggle is the quietest thing on the bar. */
.topbar__lang {
  background: none;
  color: var(--text-secondary);
  font-weight: 700;
}
.topbar__lang:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
}

/* On the phone the bar carries brand + auth only; hide the language toggle
 * below 720 to keep Log in / Sign up comfortable. */
@media (max-width: 719.98px) {
  .topbar__lang { display: none; }
}

/* ========================================================== wins ticker */

.wins-ticker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--ticker-h);
  padding: 0 var(--space-4);
  background: var(--wins-ground);
  border-bottom: var(--border-hairline) solid var(--border-subtle);
  overflow: hidden;
}

.wins-ticker__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  font-size: var(--text-caption);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}

.wins-ticker__dot {
  width: var(--badge-dot);
  height: var(--badge-dot);
  border-radius: var(--radius-pill);
  background: var(--live);
  animation: live-pulse var(--dur-live) var(--ease-in-out) infinite;
}

.wins-ticker__dot.is-dead {
  background: var(--text-muted);
  animation: none;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .wins-ticker__dot { animation: none; }
}

.wins-ticker__viewport {
  flex: 1;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.wins-ticker__track {
  display: flex;
  animation: ticker-run var(--dur-ticker) linear infinite;
  will-change: transform;
}

.wins-ticker__track:hover {
  animation-play-state: paused;
}

@keyframes ticker-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .wins-ticker__track { animation: none; }
}

.wins-ticker__group {
  display: flex;
  gap: var(--win-gap);
  padding-right: var(--win-gap);
}

/* The honest empty state — one calm line, nothing invented. min-width: 0
 * matters: a nowrap flex child that cannot shrink forces the whole bar (and
 * the page) wider than a 390px viewport. */
.wins-ticker__empty {
  flex: 1;
  min-width: 0;
  font-size: var(--text-label);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wins-ticker.is-quiet .wins-ticker__viewport { display: none; }
.wins-ticker:not(.is-quiet) .wins-ticker__empty[hidden] { display: none; }

/* A ticker chip: thumb · masked name · game · multiplier · payout. */
.wchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  background: var(--win-row-bg);
  border-radius: var(--radius-pill);
}

.wthumb {
  width: var(--win-thumb);
  height: var(--win-thumb);
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex: none;
  display: grid;
  place-items: center;
}

.wthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wthumb--fallback {
  background: hsl(var(--tile-hue, 0) var(--fallback-sat) var(--fallback-l-mid));
}

.wthumb__letter {
  font-size: var(--text-caption);
  font-weight: 800;
  color: hsl(var(--tile-hue, 0) var(--fallback-ink-sat) var(--fallback-ink-l));
}

.wchip__body { display: flex; flex-direction: column; }
.wchip__top,
.wchip__sub { display: flex; align-items: baseline; gap: var(--space-2); }

.wchip__name {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.wchip__mult {
  font-size: var(--text-caption);
  font-weight: 700;
  font-variant-numeric: var(--numeric);
  color: var(--text-primary);
}

.wchip__pay {
  font-size: var(--text-caption);
  font-weight: 800;
  font-variant-numeric: var(--numeric);
  color: var(--win);
  white-space: nowrap;
}

.wchip__game {
  font-size: var(--text-caption);
  color: var(--text-muted);
  white-space: nowrap;
}

/* The desktop wins side-rail is retired with the sidebar; the classes remain
 * styled minimally in case a cached page still carries the markup. */
.live-rail { display: none; }

.wrow { display: none; }

/* ================================================================ frame */

.content {
  max-width: var(--lobby-max);
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-7);
}

@media (min-width: 720px) {
  .content { padding: 0 var(--space-5) var(--space-8); }
}

/* ========================================================== hero banner
 * The promo carousel restyled as the reference's full-width bonus banner:
 * flat near-black card, art-placeholder wash right, scrim left, headline +
 * volt pill CTA. Every slide is a REAL programme. */

.carousel {
  position: relative;
  margin-top: var(--space-4);
}

.carousel__track {
  position: relative;
  min-height: var(--promo-h);
}

.promo-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--surface-raised);
  /* hero-art placeholder pools + floor — stand-ins for real key art */
  background-image: var(--wash-promo-accent), var(--wash-promo-gold), var(--wash-promo-floor);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-xfade) var(--ease-settle),
    visibility 0s var(--dur-xfade);
}

.promo-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* The legibility scrim over the art side. */
.promo-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim-promo);
  pointer-events: none;
}

.promo-slide__copy {
  position: relative;
  z-index: 1;
  max-width: var(--measure-tight);
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

@media (min-width: 720px) {
  .promo-slide__copy { padding: var(--space-6) var(--space-6); }
}

.promo-slide__kicker {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.promo-slide__title {
  font-size: var(--text-promo);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

.promo-slide__line {
  font-size: var(--text-label);
  color: var(--text-secondary);
  max-width: var(--measure-tight);
}

.promo-slide__line strong {
  color: var(--text-primary);
}

.promo-slide__copy .btn {
  margin-top: var(--space-2);
}

/* The art fan on the slides that carry real game art. */
.promo-slide__fan {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  gap: var(--space-2);
  padding-right: var(--space-5);
}

@media (min-width: 720px) {
  .promo-slide__fan { display: flex; }
}

.promo-slide__fan img {
  width: var(--row-tile-w);
  border-radius: var(--radius-md);
  border: var(--border-hairline) solid var(--border-subtle);
}

.carousel__dots {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-3);
  z-index: 2;
  display: flex;
  gap: var(--space-2);
}

.carousel__dot {
  width: var(--promo-dot);
  height: var(--promo-dot);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--border-default);
  cursor: pointer;
}

.carousel__dot.is-active {
  background: var(--accent);
}

/* ============================================================ quick nav */

.quicknav {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  padding: var(--space-5) var(--space-1) var(--space-2);
  scrollbar-width: none;
}

.quicknav::-webkit-scrollbar { display: none; }

.qchip {
  flex: none;
  width: var(--qchip-w);
  text-align: center;
  cursor: pointer;
}

.qchip__disc {
  width: var(--qdisc);
  height: var(--qdisc);
  margin: 0 auto var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--border-subtle);
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-settle),
    color var(--dur-fast) var(--ease-settle);
}

.qchip:hover .qchip__disc {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.qchip span {
  display: block;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.qchip:hover span { color: var(--text-primary); }

/* ======================================================= live crash bar
 * The one live thing on the page — an honest spectator on the real round.
 * A slim flat banner now: badge + readout + history chips + the volt CTA. */

.hero {
  display: flex;
  align-items: center;
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--border-subtle);
}

.hero__body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
}

.hero__live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
  flex: none;
}

.hero__dot {
  width: var(--badge-dot);
  height: var(--badge-dot);
  border-radius: var(--radius-pill);
  background: var(--accent);
  animation: live-pulse var(--dur-live) var(--ease-in-out) infinite;
}

.hero__dot.is-dead {
  background: var(--text-muted);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__dot { animation: none; }
}

.hero__readout {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.hero__mult {
  font-family: var(--font-numeric);
  font-variant-numeric: var(--numeric);
  font-size: var(--text-mult-compact);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.hero__mult.is-hot { color: var(--accent); }
.hero__mult.is-crashed { color: var(--loss); }
.hero__mult.is-idle { color: var(--text-secondary); }

.hero__x { font-size: var(--text-heading); }

.hero__state {
  font-size: var(--text-label);
  color: var(--text-secondary);
}

.hero__state.is-lead {
  font-size: var(--text-wait);
  font-weight: 700;
  color: var(--text-primary);
}

.hero__history {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.hchip {
  display: inline-flex;
  align-items: center;
  height: var(--chip-h);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-overlay);
  font-size: var(--text-caption);
  font-weight: 700;
  font-variant-numeric: var(--numeric);
}

.hchip--low { color: var(--loss); }
.hchip--mid { color: var(--text-primary); }
.hchip--high { color: var(--win); }
.hchip--new { border: var(--border-hairline) solid var(--border-default); }

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.hero__round {
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-variant-numeric: var(--numeric);
}

/* ============================================================== sections */

.rails { display: block; }

.block {
  margin-top: var(--space-6);
}

.block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.block__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.block__title svg {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
}

.block__title--muted { color: var(--text-secondary); }

.block__title--skel {
  display: block;
  width: var(--vip-tier-min);
  height: var(--text-body);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  animation: skeleton-pulse var(--dur-shimmer) var(--ease-in-out) infinite;
}

.block__count {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-secondary);
}

/* A live section marker (the volt dot beside "Live"). */
.block__title .live-dot {
  width: var(--badge-dot);
  height: var(--badge-dot);
  border-radius: var(--radius-pill);
  background: var(--accent);
}

/* ================================================================ grids */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--lobby-tile-min), 1fr));
  gap: var(--space-3);
}

/* Legacy horizontal rows (the hi mirror rendered these once) — same grid. */
.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--lobby-tile-min), 1fr));
  gap: var(--space-3);
}

.g-skel {
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  aspect-ratio: var(--art-ratio);
  animation: skeleton-pulse var(--dur-shimmer) var(--ease-in-out) infinite;
}

/* ================================================================= tile
 * REAL art on top, dark title-bar strip BENEATH — never text over art. */

/* A flex column, not a block: the art keeps its ratio and the title bar
 * takes whatever height the row needs, so every tile in a grid row wears
 * the same-height bar even when one name in the row wraps (T-185 D7). */
.g-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  transition: transform var(--dur-fast) var(--ease-out);
}

.g-tile:hover {
  transform: translateY(var(--lift-tile));
}

.g-tile__art {
  position: relative;
  display: block;
  flex: none;
  aspect-ratio: var(--art-ratio);
  overflow: hidden;
}

.g-tile__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A game without art: the hue-rotated designed ground (data from lobby.js). */
.g-tile__art--fallback {
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      hsl(var(--tile-hue, 0) var(--fallback-sat) var(--fallback-l-hi)) 0%,
      hsl(var(--tile-hue, 0) var(--fallback-sat) var(--fallback-l-mid)) 55%,
      hsl(var(--tile-hue, 0) var(--fallback-sat) var(--fallback-l-lo)) 100%
    );
}

.g-tile__letter {
  font-size: var(--text-numeral);
  font-weight: var(--weight-display);
  color: hsl(var(--tile-hue, 0) var(--fallback-ink-sat) var(--fallback-ink-l));
  opacity: var(--letter-alpha);
}

/* The play disc that surfaces on hover/focus — the volt, a thing you press. */
.g-tile__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--surface-scrim);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-settle);
}

/* The volt disc… */
.g-tile__play::after {
  content: '';
  width: var(--play-badge);
  height: var(--play-badge);
  border-radius: var(--radius-pill);
  background: var(--accent);
}

/* …and the play triangle centred over it, in the on-accent ink. */
.g-tile__play::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
  width: 0;
  height: 0;
  border-top: calc(var(--play-tri) / 2) solid var(--transparent);
  border-bottom: calc(var(--play-tri) / 2) solid var(--transparent);
  border-left: var(--play-tri) solid var(--text-on-accent);
  transform: translateX(calc(var(--play-tri) / 4));
}

.g-tile:hover .g-tile__play,
.g-tile:focus-visible .g-tile__play {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .g-tile__play { transition: none; }
}

/* The title bar: name left, kind chip right, on the overlay step. flex: 1
 * fills the tile column, so bars stay flush and uniform across a row. */
.g-tile__meta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tbar-h);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-overlay);
  transition: background-color var(--dur-fast) var(--ease-settle);
}

.g-tile:hover .g-tile__meta {
  background: var(--surface-hover);
}

/* The full name always renders — a clipped "Bacca…" is a defect, not a
 * style (T-170 D7). A name too wide for one line wraps to a second; the
 * bar grows and the row's tiles grow with it. Never an ellipsis. */
.g-tile__name {
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--text-primary);
  min-width: 0;
}

.g-tile__kind {
  font-size: var(--text-caption);
  color: var(--text-muted);
  white-space: nowrap;
  flex: none;
}

/* Truthful corner badges. */
.g-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--badge-h);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
}

.g-badge--live { background: var(--badge-live-bg); color: var(--badge-live-ink); }
.g-badge--new  { background: var(--badge-new-bg);  color: var(--badge-new-ink); }
.g-badge--hot  { background: var(--badge-hot-bg);  color: var(--badge-hot-ink); }

.g-badge__dot {
  width: var(--badge-dot);
  height: var(--badge-dot);
  border-radius: var(--radius-pill);
  background: var(--badge-live-ink);
}

/* ================================================================ pills */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  background: var(--surface-raised);
  border: var(--chip-ring);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-settle),
    color var(--dur-fast) var(--ease-settle);
}

.pill:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.pill.is-active {
  background: var(--accent);
  border: var(--chip-ring-active);
  color: var(--text-on-accent);
}

.pill__count {
  font-weight: 600;
  opacity: var(--opacity-pressed);
}

.grid__empty,
.grid__error {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-label);
}

/* ========================================================== offers band */

.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--offer-min), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.offer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--band-radius);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--border-subtle);
  transition: background-color var(--dur-fast) var(--ease-settle);
}

.offer:hover { background: var(--surface-hover); }

.offer__ico {
  width: var(--offer-ico);
  height: var(--offer-ico);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--surface-overlay);
  color: var(--text-secondary);
}

.offer__ico svg {
  width: var(--why-ico);
  height: var(--why-ico);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.offer__body { display: flex; flex-direction: column; gap: var(--space-1); }

.offer__title {
  font-size: var(--text-label);
  font-weight: 800;
}

.offer__line {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.offer__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--text-primary);
}

.offer__arw { color: var(--accent); }

/* ============================================================ VIP ladder */

.vip {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--band-radius);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--border-subtle);
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 960px) {
  .vip {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.vip__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.vip__kicker {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}

.vip__title {
  font-size: var(--text-title);
  font-weight: var(--weight-display);
}

.vip__lead {
  font-size: var(--text-label);
  color: var(--text-secondary);
  max-width: var(--measure-tight);
}

.vip__ladder {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--vip-tier-min), 1fr));
  gap: var(--space-2);
}

.vip__tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  text-align: center;
}

.vip__pct {
  font-size: var(--text-heading);
  font-weight: 800;
  font-variant-numeric: var(--numeric);
}

.vip__tier--top .vip__pct { color: var(--accent); }

.vip__bar {
  height: var(--vip-bar-h);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.vip__fill {
  display: block;
  height: 100%;
  background: var(--text-secondary);
}

.vip__tier--t0 .vip__fill { width: 2%; }
.vip__tier--t1 .vip__fill { width: 20%; }
.vip__tier--t2 .vip__fill { width: 40%; }
.vip__tier--t3 .vip__fill { width: 60%; }
.vip__tier--t4 .vip__fill { width: 80%; }
.vip__tier--top .vip__fill { width: 100%; background: var(--accent); }

.vip__name {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-secondary);
}

/* ============================================================== why band */

.why { margin-top: var(--space-6); }

.why__title {
  font-size: var(--text-body);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.why__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--why-min), 1fr));
  gap: var(--space-3);
}

.why__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--border-subtle);
}

.why__cell svg {
  width: var(--why-ico);
  height: var(--why-ico);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-secondary);
}

.why__h {
  font-size: var(--text-label);
  font-weight: 800;
}

.why__p {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* ============================================================== app CTA */

.appcta {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--band-radius);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.appcta__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  flex: 1;
}

.appcta__kicker {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}

.appcta__title {
  font-size: var(--text-title);
  font-weight: var(--weight-display);
}

.appcta__line {
  font-size: var(--text-label);
  color: var(--text-secondary);
  max-width: var(--measure-tight);
}

.appcta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.appcta__mark {
  display: none;
  color: var(--text-muted);
}

@media (min-width: 720px) {
  .appcta__mark { display: block; }
}

.appcta__mark svg {
  width: var(--space-8);
  height: var(--space-8);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
}

/* ================================================================ footer */

.foot {
  margin-top: var(--space-7);
  background: var(--surface-sunken);
  border-top: var(--border-hairline) solid var(--border-subtle);
}

.foot__strip {
  max-width: var(--lobby-max);
  margin: 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--border-subtle);
}

@media (min-width: 720px) {
  .foot__strip { padding: var(--space-4) var(--space-5); }
}

.foot__trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-label);
  color: var(--text-secondary);
  min-width: 0;
}

.foot__trust strong { color: var(--text-primary); }

.foot__trust svg {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.paymarks {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.paymark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--paymark-h);
  padding: 0 var(--space-2);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}

.paymark svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
}

.paymark a { color: var(--text-primary); }

.rail__age-badge {
  display: inline-grid;
  place-items: center;
  min-width: var(--icon-xl);
  height: var(--icon-xl);
  padding: 0 var(--space-1);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: 800;
  color: var(--text-secondary);
  flex: none;
}

.foot__cols {
  max-width: var(--lobby-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--foot-col-min), 1fr));
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .foot__cols { padding: var(--space-6) var(--space-5); }
}

.foot__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  grid-column: 1 / -1;
}

@media (min-width: 960px) {
  .foot__brand { grid-column: auto; }
}

.foot__logo { display: inline-flex; }

.foot__tagline {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  max-width: var(--measure-tight);
}

.foot__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.foot__col-title {
  font-size: var(--text-caption);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.foot__col a {
  font-size: var(--text-label);
  color: var(--text-secondary);
  padding: var(--space-1) 0;
}

.foot__col a:hover { color: var(--text-primary); }

.foot__legal .foot__ph {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* The owner-blocked placeholders stay visible and unmistakable. */
.foot__todo {
  display: inline-block;
  border: var(--border-hairline) dashed var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
  color: var(--text-muted);
  font-weight: 700;
}

.foot__law {
  max-width: var(--lobby-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-caption);
  color: var(--text-muted);
  border-top: var(--border-hairline) solid var(--border-subtle);
}

@media (min-width: 720px) {
  .foot__law { padding: var(--space-4) var(--space-5) var(--space-6); }
}

.foot__law a {
  color: var(--text-secondary);
}

.foot__law a:hover { color: var(--text-primary); }

/* ============================================================ bottom nav */

.bnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  height: var(--bnav-h);
  background: var(--surface-sunken);
  border-top: var(--border-hairline) solid var(--border-subtle);
  display: flex;
}

@media (min-width: 720px) {
  .bnav { display: none; }
}

.bnav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-secondary);
}

.bnav__item.is-active,
.bnav__item[aria-current='page'] {
  color: var(--accent);
}