/* =========================================================================
   LIBERTY ARCADE — Hub-only styling (arcade cabinet menu)
   Owns: lit marquee, lit arcade-cabinet cards, title-plate fallback,
         HIGH SCORES wall, Discovered-Cheats wall.
   Builds on shared/design.css tokens. Hub-only — never loaded by games.

   SAFETY: no full-frame strobe. All "lit/glow" effects are LOCALIZED to a
   card or a small element, low-frequency (>3s cycles), and fully disabled
   under prefers-reduced-motion.
   ========================================================================= */

/* ---- No horizontal scroll on the hub -------------------------------------
   Shared fixed-position widgets (audio bar, cheats touch-corner at right:0,
   the full-bleed flag video) can nudge the layout past the viewport on
   mobile. Clip horizontal overflow at the page root — fixed/invisible
   widgets keep working; the page just can't scroll sideways. Hub-only. */
html, body { overflow-x: clip; max-width: 100%; }

/* ---- Lit marquee header --------------------------------------------------
   A localized glow on the LIBERTY ARCADE wordmark only (not the frame). */
.la-marquee {
  position: relative;
  text-align: center;
  padding: var(--s-5) var(--s-4) var(--s-4);
}
.la-marquee__tube {
  display: inline-block;
  padding: 0.35em 0.9em;
  border-radius: var(--r-md);
  border: 2px solid var(--c-gold);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(201,162,39,0.18), transparent 70%),
    var(--c-navy-deep);
  box-shadow:
    0 0 0 1px rgba(201,162,39,0.35) inset,
    0 6px 22px rgba(0,0,0,0.5);
}
.la-marquee__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: clamp(1.6rem, 6vw, var(--t-3xl));
  line-height: 1;
  color: var(--c-cream);
  text-shadow:
    0 0 6px rgba(228,201,91,0.55),
    0 0 18px rgba(201,162,39,0.35);
  /* Localized, slow, low-frequency pulse — affects only this text glow. */
  animation: la-tube-glow 4.5s ease-in-out infinite;
}
.la-marquee__sub {
  margin: var(--s-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-transform: uppercase;
}
@keyframes la-tube-glow {
  0%, 100% { text-shadow: 0 0 6px rgba(228,201,91,0.45), 0 0 16px rgba(201,162,39,0.28); }
  50%      { text-shadow: 0 0 9px rgba(228,201,91,0.70), 0 0 26px rgba(201,162,39,0.45); }
}

/* ---- Cabinet grid -------------------------------------------------------- */
/* Centered flex-wrap (not grid) so a partial LAST row is centered instead of
   left-tucked: 3 on the last row -> middle dead-center + one each side; 1 ->
   dead-center on its own row. Full rows still fill edge-to-edge because the
   basis = (100% - inter-gaps)/N exactly tiles N per row; cards don't grow
   (flex-grow 0) so orphans stay card-sized, never stretched. The 0.1% slack
   absorbs subpixel rounding so a full row never wraps early. */
.la-cabgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
  margin: 0 0 var(--s-6);
}
.la-cabgrid > .la-cab {            /* desktop: 4 per row */
  flex: 0 1 calc((99.9% - 3 * var(--s-5)) / 4);
}
@media (max-width: 1000px) {       /* tablet: 3 per row */
  .la-cabgrid > .la-cab { flex-basis: calc((99.9% - 2 * var(--s-5)) / 3); }
}
@media (max-width: 680px) {        /* phone: 2 per row */
  .la-cabgrid { gap: var(--s-4); }
  .la-cabgrid > .la-cab { flex-basis: calc((99.9% - 1 * var(--s-4)) / 2); }
}

/* ---- Lit arcade-cabinet card --------------------------------------------- */
.la-cab {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 44px;                 /* tap-target floor handled by full card */
  text-decoration: none;
  color: var(--text);
  border-radius: var(--r-lg);
  /* Cabinet body — brushed liberty-steel look */
  background:
    linear-gradient(180deg, var(--c-navy-soft) 0%, var(--c-navy-deep) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-glow);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.la-cab:hover,
.la-cab:focus-visible {
  transform: translateY(-3px);
  border-color: var(--c-gold);
  box-shadow:
    0 0 0 1px var(--c-gold) inset,
    0 0 22px rgba(201,162,39,0.40),   /* localized lit glow on this card only */
    0 14px 34px rgba(0,0,0,0.5);
  outline: none;
}
.la-cab:focus-visible { outline: 3px solid var(--c-gold-light); outline-offset: 2px; }

/* Marquee strip at the top of the cabinet — holds the logo art / title plate */
.la-cab__marquee {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(61,90,254,0.16), transparent 65%),
    var(--c-navy-deep);
  border-bottom: 1px solid var(--line);
}
/* Deterministic sizing: the image exactly fills the box and is contained
   inside it, so the square medallion is centered and can NEVER overflow /
   clip on the right (the old max-width/max-height resolved inconsistently in
   mobile Safari). object-fit:contain keeps the whole medallion visible. */
.la-cab__marquee img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

/* Title-plate fallback (no logo art on disk) */
.la-cab__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(178,34,52,0.22), rgba(10,35,66,0.0)),
    repeating-linear-gradient(135deg, rgba(247,243,232,0.04) 0 8px, transparent 8px 16px);
  border: 1px solid var(--line);
}
.la-cab__plate-text {
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(1.1rem, 3.6vw, var(--t-lg));
  line-height: 1.05;
  color: var(--c-cream);
  text-shadow: 0 0 8px rgba(201,162,39,0.35);
}

/* Cabinet body / control-panel text */
.la-cab__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  flex: 1 1 auto;
}
.la-cab__kicker {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.la-cab__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--c-cream);
}
.la-cab__desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--text-dim);
  flex: 1 1 auto;
}
.la-cab__coin {
  margin-top: var(--s-2);
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-navy);
  background: var(--c-gold);
  border-radius: var(--r-pill);
  padding: 0.3em 0.85em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.la-cab:hover .la-cab__coin,
.la-cab:focus-visible .la-cab__coin {
  background: var(--c-gold-light);
}

/* ---- Section heads ------------------------------------------------------- */
.la-group {
  margin: var(--s-6) 0 var(--s-4);
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--c-cream);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.la-group::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--c-gold);
  box-shadow: 0 0 8px rgba(201,162,39,0.6);
  flex: none;
}

/* ---- HIGH SCORES wall ---------------------------------------------------- */
.la-hiscores {
  margin: var(--s-7) 0;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, var(--c-navy-soft), var(--c-navy-deep));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-glow);
}
.la-hiscores__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}
.la-hiscores__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-gold-light);
  text-shadow: 0 0 10px rgba(201,162,39,0.35);
}
.la-hiscores__note { font-size: var(--t-xs); color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.la-hiscores__list { list-style: none; margin: 0; padding: 0; }
.la-hiscores__row {
  display: grid;
  grid-template-columns: 2.2rem 1.6rem 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: 0.55rem var(--s-2);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-sans);
}
.la-hiscores__row:last-child { border-bottom: none; }
.la-hiscores__row.is-me { background: rgba(201,162,39,0.10); border-radius: var(--r-sm); }
.la-hiscores__rank { font-weight: 800; color: var(--c-gold); font-variant-numeric: tabular-nums; }
.la-hiscores__rank--1 { color: var(--c-gold-light); }
.la-hiscores__rank--2 { color: #cfd8e3; }
.la-hiscores__rank--3 { color: #d39a6a; }
.la-hiscores__av { font-size: 1.15rem; text-align: center; }
.la-hiscores__name { color: var(--c-cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-hiscores__score { font-weight: 800; color: var(--c-cream); font-variant-numeric: tabular-nums; }
.la-hiscores__empty { color: var(--text-dim); font-family: var(--font-sans); font-size: var(--t-sm); padding: var(--s-3) 0; }

/* ---- Discovered-Cheats wall mount --------------------------------------- */
.la-cheatwall { margin: var(--s-7) 0; }

/* ---- Mobile: tighten the gap under the hero stars -----------------------
   On phones the stack between the 5-star row and the first row of game cards
   was ~6rem of dead navy (marquee bottom padding + .usa-section top padding +
   the first .la-group top margin). Pull the cards up close under the stars.
   Phone widths ONLY — desktop spacing is untouched. */
@media (max-width: 600px) {
  /* trim the marquee's own bottom padding under the star row */
  .la-marquee { padding-bottom: var(--s-2); }
  /* kill the big top pad the cabinet floor section adds on mobile */
  .usa-section { padding-top: var(--s-3); }
  /* the FIRST group heading sits right under the stars — no big top margin */
  main.usa-section > .la-group:first-of-type { margin-top: 0; }
}

/* ---- Reduced-motion: kill ALL motion ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .la-marquee__title { animation: none; }
  .la-cab { transition: none; }
  .la-cab:hover, .la-cab:focus-visible { transform: none; }
}