/* ==========================================================
   District 1 — New Snack City Grand Concourse
   Art direction: docs/aaa-experience/03-ART-DIRECTION.md §1

   The concourse of an entertainment capital at night. The skyline is
   geometry, not bitmaps: three inline-SVG layers that cost zero bytes of
   image transfer and cannot regress the performance streak.
   ========================================================== */

/* ── The city ───────────────────────────────────────────────────────── */

.lob-sky-far  { color: hsl(258 30% 10%); }
.lob-sky-mid  { color: hsl(256 28% 13%); }
.lob-sky-near { color: hsl(252 30% 6%); }

.aaa-env-layer svg { display: block; width: 100%; height: auto; }

/* Window lights are static. A twinkling skyline is "floating blobs" wearing
   a different costume — see the banned list in 04-MOTION-SYSTEM.md. */
.lob-win { fill: currentColor; opacity: 0.5; }
.lob-sign { fill: var(--aaa-light); opacity: 0.32; }

/* The concourse floor light: a directional wash pointing at Quick Play. */
.lob-floor {
  position: absolute;
  inset: auto 0 0 0;
  height: 34vh;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--aaa-light) 9%, transparent) 0%,
    transparent 74%);
  pointer-events: none;
}
.aaa-q-lite .lob-floor { display: none; }

/* ── Concourse header ───────────────────────────────────────────────── */

.lob-head {
  padding: clamp(0.5rem, 2vw, 1rem) 0 0;
  text-align: left;
}
.lob-head .aaa-marquee { max-width: 18ch; }
/* Two lines, so the Quick Play portal and its Enter control clear the fold on
   a 768px-tall laptop without the header feeling cramped. */
.lob-head .aaa-lede { max-width: 74ch; margin-top: 0.5rem; }

/* The engraved brass strip of real city numbers. */
.lob-city {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1rem, 4vw, 2.4rem);
  align-items: baseline;
  margin-top: clamp(0.75rem, 2.4vw, 1.2rem);
  padding: 0.85rem clamp(0.9rem, 3vw, 1.4rem);
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--aaa-light) 20%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--aaa-light) 5%, var(--aaa-night-2)), var(--aaa-night-1));
}
.lob-city-item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.2rem 0; }
.lob-city-v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 3.2vw, 1.3rem);
  color: var(--aaa-light-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.lob-city-k {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aaa-ink-3);
}

/* ── The main concourse grid ────────────────────────────────────────── */

.lob-main {
  display: grid;
  gap: var(--aaa-gap);
  margin-top: clamp(1.2rem, 4vw, 2rem);
}
@media (min-width: 900px) {
  .lob-main { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
}

/* ── Player illumination band — the light the city casts on you ─────── */

/* The band and the entrance invitation share one slot. Reserving it means the
   auth round-trip resolving cannot shift anything below: CLS stays 0. */
#lob-band-slot { min-height: 118px; }
@media (max-width: 640px) { #lob-band-slot { min-height: 158px; } }

.lob-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem 0.9rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border-radius: var(--aaa-radius);
  border: 1px solid color-mix(in srgb, var(--aaa-light) 22%, transparent);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--aaa-light) 12%, transparent), transparent 58%),
    var(--aaa-night-2);
}
.lob-band-av {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--aaa-night-1);
  border: 1px solid color-mix(in srgb, var(--aaa-light) 30%, transparent);
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--aaa-light-ink);
}
.lob-band-av img, .lob-band-av canvas, .lob-band-av svg { width: 100%; height: 100%; object-fit: cover; }
.lob-band-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem; }
.lob-band-name { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; }
.lob-band-title { font-size: 0.76rem; color: var(--aaa-light-ink); }
.lob-band-xp {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 3px;
  background: var(--aaa-night-0);
  border: 1px solid var(--aaa-hairline);
  overflow: hidden;
}
.lob-band-xp > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--aaa-light-deep), var(--aaa-light));
  transition: width var(--aaa-t-open) var(--aaa-e-settle);
}
.lob-band-purse { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.lob-band-meta { grid-column: 1 / -1; font-family: var(--aaa-mono); font-size: 0.72rem; color: var(--aaa-ink-3); }

/* Logged-out entrance invitation — the same slot, different content. */
.lob-invite { text-align: left; }
.lob-invite p { margin: 0 0 0.7rem; }

/* ── Venue row: the street ──────────────────────────────────────────── */

.aaa-venue-row {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
/* Each venue burns in its own district light, so the street is colour-coded. */
.lob-v-arcade { --aaa-light: hsl(158 100% 52%); --aaa-light-ink: hsl(158 90% 78%); }
.lob-v-casino { --aaa-light: hsl(158 64% 44%);  --aaa-light-ink: hsl(150 30% 88%); }
.lob-v-arena  { --aaa-light: hsl(14 92% 56%);   --aaa-light-ink: hsl(18 95% 78%); }
.lob-v-vault  { --aaa-light: hsl(275 78% 62%);  --aaa-light-ink: hsl(280 85% 84%); }
.lob-v-hall   { --aaa-light: hsl(45 90% 60%);   --aaa-light-ink: hsl(45 90% 82%); }

/* ── Events strip ───────────────────────────────────────────────────── */

.lob-events { display: grid; gap: 0.6rem; }
.lob-event {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--aaa-hairline);
  background: var(--aaa-night-2);
  text-decoration: none;
  color: inherit;
}
.lob-event:hover { border-color: color-mix(in srgb, var(--aaa-light) 40%, transparent); }
.lob-event:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 2px; }
.lob-event-ic {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--aaa-night-1);
  border: 1px solid var(--aaa-hairline);
  font-size: 1.05rem;
}
.lob-event-k { font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aaa-ink-3); margin: 0; }
.lob-event-v { font-size: 0.9rem; font-weight: 600; margin: 0.1rem 0 0; line-height: 1.3; }
.lob-event-v small { display: block; font-weight: 400; color: var(--aaa-ink-3); font-size: 0.76rem; margin-top: 0.1rem; }

/* ── Missions ───────────────────────────────────────────────────────── */

/* Same reservation discipline: every async panel holds its own height so late
   data never pushes the page around. */
#lob-events   { min-height: 128px; }
#lob-missions { min-height: 152px; }
#lob-ledger   { min-height: 130px; }
#lob-stand    { min-height: 140px; }

.lob-mission {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr) auto;
  gap: 0.55rem 0.7rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--aaa-hairline);
}
.lob-mission:last-child { border-bottom: 0; }
.lob-mission-ic { width: 1.9rem; height: 1.9rem; border-radius: 8px; display: grid; place-items: center; background: var(--aaa-night-1); border: 1px solid var(--aaa-hairline); font-size: 0.9rem; }
.lob-mission-t { font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.lob-mission-t small { display: block; font-weight: 400; color: var(--aaa-ink-3); font-size: 0.76rem; }
.lob-mission-bar {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}
.lob-mission-track { height: 5px; border-radius: 3px; background: var(--aaa-night-0); border: 1px solid var(--aaa-hairline); overflow: hidden; }
.lob-mission-track > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--aaa-light-deep), var(--aaa-light)); transition: width var(--aaa-t-open) var(--aaa-e-settle); }
.lob-mission-c { font-family: var(--aaa-mono); font-size: 0.7rem; color: var(--aaa-ink-3); font-variant-numeric: tabular-nums; }
.lob-mission.is-done .lob-mission-t { color: var(--aaa-good); }
.lob-mission-claim {
  grid-column: 1 / -1;
  justify-self: start;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  min-height: 38px;
  cursor: pointer;
  background: var(--aaa-light);
  color: var(--aaa-light-on);
}
.lob-mission-claim:disabled { opacity: 0.45; cursor: not-allowed; }
.lob-mission-claim:focus-visible { outline: 2px solid var(--aaa-ink-1); outline-offset: 2px; }

/* ── The city ledger: real activity ─────────────────────────────────── */

.lob-ledger { display: flex; flex-direction: column; }
.lob-ledger-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--aaa-hairline);
  font-size: 0.84rem;
}
.lob-ledger-row:last-child { border-bottom: 0; }
.lob-ledger-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--aaa-ink-2); }
.lob-ledger-txt b { color: var(--aaa-ink-1); font-weight: 600; }
.lob-ledger-cc { color: var(--aaa-cc); font-weight: 700; }
.lob-ledger-t { font-family: var(--aaa-mono); font-size: 0.68rem; color: var(--aaa-ink-3); font-variant-numeric: tabular-nums; }

/* ── Standing (leaderboard teaser) ──────────────────────────────────── */

.lob-stand { display: grid; gap: 0.3rem; }
.lob-stand-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.42rem 0.4rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  font-size: 0.86rem;
}
.lob-stand-row:hover { background: color-mix(in srgb, var(--aaa-light) 7%, transparent); }
.lob-stand-row:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 1px; }
.lob-stand-n { font-family: var(--font-display); font-weight: 800; font-size: 0.7rem; color: var(--aaa-ink-3); }
.lob-stand-row:nth-child(1) .lob-stand-n { color: var(--aaa-light); }
.lob-stand-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lob-stand-s { font-family: var(--aaa-mono); font-size: 0.78rem; color: var(--aaa-ink-2); font-variant-numeric: tabular-nums; }

/* ── Footer ─────────────────────────────────────────────────────────── */

.lob-foot {
  margin-top: clamp(2rem, 6vw, 3.4rem);
  padding: clamp(1.2rem, 4vw, 2rem) 0 clamp(1.4rem, 5vw, 2.4rem);
  border-top: 1px solid var(--aaa-hairline);
  text-align: center;
}
.lob-foot p { margin: 0.3rem 0; font-size: 0.82rem; color: var(--aaa-ink-3); }
.lob-foot-mark {
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aaa-light-ink);
}

/* ── Phones: the city strip reads as a 2x2 plate, not a ragged wrap ──── */
@media (max-width: 640px) {
  .lob-city { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; }
}

/* ── Landscape phones: keep the portal reachable ────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {
  .aaa-portal-arch { aspect-ratio: 21 / 8; max-height: 210px; }
  .lob-head { padding-top: 0.6rem; }
  .lob-city { margin-top: 0.7rem; padding: 0.55rem 0.9rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   R1–R5 remediation layer (08-FABLE-CRITIQUE.md)
   The lobby's light IS the brand's light. Art and cast lead; the night
   and the frame stay underneath.
   ══════════════════════════════════════════════════════════════════════ */

/* R1 — the lobby burns brand green, not gold. Gold goes back to meaning
   exactly one thing on this platform: Crispy Cash. */
.aaa-d-lobby {
  --aaa-light: hsl(160 100% 50%);
  --aaa-light-ink: hsl(160 90% 76%);
  --aaa-light-deep: hsl(160 70% 20%);
  --aaa-light-on: hsl(160 90% 6%);
}

/* The mark, glowing over the concourse. One entrance, one gentle ambient
   float at Standard+ — ambient environmental motion, not pulsing. */
.lob-head { text-align: center; }
.lob-head .aaa-plate { margin-inline: auto; }
.lob-head .aaa-lede { margin-inline: auto; }
.lob-brand {
  display: block;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  filter: drop-shadow(0 0 22px hsla(200,90%,55%,0.4));
  will-change: transform;
}
.aaa-q-standard .lob-brand,
.aaa-q-enhanced .lob-brand { animation: lob-hover 6s ease-in-out infinite; }
@keyframes lob-hover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) { .lob-brand { animation: none !important; } }

/* The identity: CRISPY green, ARCADE purple, both truly glowing. */
.lob-marquee { max-width: none !important; }
.lob-t-green, .lob-t-purple {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lob-t-green {
  background-image: linear-gradient(180deg, hsl(160 100% 72%), hsl(160 100% 44%));
  filter: drop-shadow(0 0 22px hsla(160,100%,50%,0.4));
}
.lob-t-purple {
  background-image: linear-gradient(180deg, hsl(280 90% 78%), hsl(280 80% 52%));
  filter: drop-shadow(0 0 22px hsla(280,80%,55%,0.4));
}

/* The city strip becomes a centred counter row, live-site style. */
.lob-city { justify-content: center; text-align: center; border-inline: 0; }
.lob-city-item { align-items: center; }

/* R4 — three columns of a busy venue on wide screens. */
.lob-rail-l { display: none; }
@media (min-width: 1200px) {
  .lob-main { grid-template-columns: 248px minmax(0, 1fr) 300px; }
  .lob-rail-l { display: block; }
}
/* Below 1200px the left rail folds away; standings stay reachable via the
   Hall link in the street. The rail is progressive density, not structure. */

/* R5 — the cast on the street. Characters overflow their venue fronts the
   way figures stand in front of a building, art at full alpha. */
.aaa-venue { min-height: 172px; }
.aaa-venue-cast {
  position: absolute;
  right: -8px;
  bottom: -6px;
  width: 108px;
  height: 108px;
  object-fit: contain;
  z-index: 0;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.65))
          drop-shadow(0 0 18px color-mix(in srgb, var(--aaa-light) 30%, transparent));
  transition: transform var(--aaa-t-move) var(--aaa-e-settle);
}
.aaa-q-standard .aaa-venue:hover .aaa-venue-cast,
.aaa-q-enhanced .aaa-venue:hover .aaa-venue-cast { transform: translateY(-4px) scale(1.05); }
@media (prefers-reduced-motion: reduce) { .aaa-venue-cast { transition: none; } .aaa-venue:hover .aaa-venue-cast { transform: none; } }
.aaa-venue-name, .aaa-venue-sub { position: relative; z-index: 1; max-width: calc(100% - 84px); }

/* ══════════════════════════════════════════════════════════════════════
   10x layer — the flagship gets the cinema budget.
   Everything here is Standard/Enhanced only, compositor-friendly, paused
   when hidden, and dead under Lite or reduced motion.
   ══════════════════════════════════════════════════════════════════════ */

/* The concourse uses the full stage. */
.aaa-d-lobby .aaa-shell { max-width: 1560px; }

/* Atmosphere canvas: embers off the concourse floor + light streaks over
   the skyline. One canvas, one rAF, ~70 motes, additive blend. */
#lob-atmo { position: absolute; inset: 0; width: 100%; height: 100%; }
.aaa-q-lite #lob-atmo { display: none; }

/* The signage buzzes like real neon — sputter, catch, hold. */
.aaa-q-standard .lob-sign rect,
.aaa-q-enhanced .lob-sign rect { animation: lob-buzz 9s var(--aaa-e-lin) infinite; }
.lob-sign rect:nth-child(2n) { animation-delay: 2.7s; }
.lob-sign rect:nth-child(3n) { animation-delay: 5.2s; }
@keyframes lob-buzz {
  0%, 86%, 100% { opacity: 0.32; }
  88%           { opacity: 0.62; }
  90%           { opacity: 0.24; }
  93%           { opacity: 0.66; }
}

/* The identity is live ink: the gradient itself moves through the letters. */
.lob-t-green {
  background-image: linear-gradient(100deg,
    hsl(160 100% 72%), hsl(160 100% 44%), hsl(185 100% 62%), hsl(160 100% 72%));
  background-size: 230% 100%;
}
.lob-t-purple {
  background-image: linear-gradient(100deg,
    hsl(280 90% 78%), hsl(280 80% 52%), hsl(310 95% 68%), hsl(280 90% 78%));
  background-size: 230% 100%;
}
.aaa-q-standard .lob-t-green, .aaa-q-enhanced .lob-t-green,
.aaa-q-standard .lob-t-purple, .aaa-q-enhanced .lob-t-purple {
  /* Ping-pong with easing: the gradient sweeps through the letters, slows,
     and breathes back — no loop seam exists at any frame. */
  animation: lob-ink 12s ease-in-out infinite alternate;
}
@keyframes lob-ink {
  from { background-position: 0% 0; }
  to   { background-position: 130% 0; }
}

/* The portal wears a slow halo — a ring of the city's light circling the
   arch. Enhanced only; it is the flagship's one indulgence. */
.aaa-q-enhanced .aaa-portal-arch::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 2;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from 0deg,
    transparent 12%, hsl(160 100% 55%) 26%, transparent 40%,
    transparent 60%, hsl(280 85% 62%) 76%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: lob-halo 36s var(--aaa-e-lin) infinite;
  pointer-events: none;
}
@keyframes lob-halo { to { transform: rotate(1turn); } }

/* A bigger doorway on a bigger stage. */
.aaa-portal-arch { max-height: 440px; }
@media (min-width: 1200px) { .aaa-portal-arch { aspect-ratio: 16 / 7.6; } }

/* Nothing on the flagship is ever cut off: on desktop the rails unroll into
   full walls. The rail stays a rail only where fingers swipe it. */
@media (min-width: 900px) {
  .lob-main .aaa-rail {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
    overflow: visible;
  }
  .lob-main .aaa-rail-wrap::after { display: none; }
  .lob-main .aaa-rail-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lob-sign rect, .lob-t-green, .lob-t-purple, .aaa-portal-arch::before {
    animation: none !important;
  }
  #lob-atmo { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   The rails join the cinema. Every side panel is a holo-card: gradient
   light border, inner glow, lit headers — and the boards inside them read
   as arcade boards, not admin tables.
   ══════════════════════════════════════════════════════════════════════ */

.lob-rail-l .aaa-panel,
.lob-main > div:last-child .aaa-panel {
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(180deg, hsl(252 26% 9%), hsl(255 28% 6%)) padding-box,
    linear-gradient(150deg, hsla(160,100%,50%,0.55), hsla(250,20%,22%,0.6) 38%,
      hsla(250,20%,22%,0.6) 62%, hsla(280,80%,60%,0.55)) border-box;
  box-shadow:
    0 10px 34px rgba(0,0,0,0.55),
    inset 0 1px 0 hsla(160,100%,70%,0.08);
}
/* Lit section labels over each card. */
.lob-rail-l .aaa-rule > h2,
.lob-main > div:last-child .aaa-rule > h2 {
  color: var(--aaa-light-ink);
  text-shadow: 0 0 14px color-mix(in srgb, var(--aaa-light) 55%, transparent);
}

/* ── Standing: a podium board ─────────────────────────────── */
.lob-stand-row { padding: 0.5rem 0.5rem; border-radius: 10px; }
.lob-stand-av {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); font-weight: 800; font-size: 0.66rem;
  background: var(--aaa-night-0); border: 1px solid var(--aaa-hairline);
}
.lob-stand-row { grid-template-columns: 1.9rem 26px minmax(0,1fr) auto; }
.lob-stand-n { font-size: 0.72rem; }
.lob-stand-row:nth-child(1) .lob-stand-n { color: hsl(45 100% 60%); text-shadow: 0 0 10px hsla(45,100%,55%,0.6); }
.lob-stand-row:nth-child(2) .lob-stand-n { color: hsl(210 16% 78%); }
.lob-stand-row:nth-child(3) .lob-stand-n { color: hsl(28 60% 62%); }
.lob-stand-row:nth-child(1) { background: linear-gradient(90deg, hsla(45,100%,55%,0.1), transparent 70%); }
.lob-stand-row:nth-child(1) .lob-stand-av { border-color: hsla(45,100%,55%,0.5); box-shadow: 0 0 12px hsla(45,100%,55%,0.25); }
.lob-stand-s { color: var(--aaa-light-ink); }

/* ── Tonight in the city: lit event tiles ─────────────────── */
.lob-event { border-radius: 12px; }
.lob-event-ic {
  border-color: hsla(45,100%,55%,0.4);
  background: radial-gradient(120% 120% at 30% 20%, hsla(45,100%,55%,0.18), var(--aaa-night-1));
  box-shadow: 0 0 14px hsla(45,100%,55%,0.15);
}
.lob-event:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.45); }

/* ── Today's board: charged missions ──────────────────────── */
.lob-mission-ic {
  border-color: color-mix(in srgb, var(--aaa-light) 40%, transparent);
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--aaa-light) 16%, transparent), var(--aaa-night-1));
}
.lob-mission-track { height: 7px; }
.lob-mission-track > i {
  box-shadow: 0 0 12px color-mix(in srgb, var(--aaa-light) 60%, transparent);
}
.lob-mission .aaa-chip-cc {
  background: linear-gradient(180deg, hsla(45,100%,55%,0.16), hsla(45,100%,45%,0.05));
  box-shadow: 0 0 10px hsla(45,100%,55%,0.12);
}

/* ── City ledger: the feed glows green where CC lands ─────── */
.lob-ledger-row { border-radius: 8px; padding-inline: 0.3rem; }
.lob-ledger-row:hover { background: hsla(160,100%,50%,0.06); }
.lob-ledger-cc { text-shadow: 0 0 10px hsla(45,100%,55%,0.5); }

/* ── The player band: a holo ID card ──────────────────────── */
.lob-band {
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--aaa-light) 13%, hsl(252 26% 9%)), hsl(255 28% 6%) 58%) padding-box,
    linear-gradient(120deg, hsla(160,100%,50%,0.6), hsla(250,20%,24%,0.7) 45%, hsla(280,80%,60%,0.6)) border-box;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5), inset 0 1px 0 hsla(160,100%,70%,0.1);
}
.lob-band-av {
  border-color: color-mix(in srgb, var(--aaa-light) 55%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--aaa-light) 30%, transparent);
}
.lob-invite {
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(180deg, hsl(252 26% 9%), hsl(255 28% 6%)) padding-box,
    linear-gradient(120deg, hsla(160,100%,50%,0.5), hsla(250,20%,24%,0.7) 45%, hsla(280,80%,60%,0.5)) border-box;
}

/* ══════════════════════════════════════════════════════════════════════
   The player card, done properly: a level ring around the avatar, a badge
   that means something, a charged XP bar with tick marks and a moving
   shine. This is the player's identity on the flagship — it earns weight.
   ══════════════════════════════════════════════════════════════════════ */

.lob-band {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.4rem 1.1rem;
  padding: 1.05rem 1.2rem;
  align-items: center;
}

/* The ring IS the XP: a conic fill around the avatar. */
.lob-band-ring {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    conic-gradient(from 220deg,
      hsl(160 100% 52%), hsl(185 100% 60%) var(--xp, 0%),
      hsl(250 20% 16%) var(--xp, 0%));
  box-shadow: 0 0 22px hsla(160,100%,50%,0.3);
}
.lob-band-av {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 3px solid hsl(255 28% 6%);
  font-size: 1.3rem;
  box-shadow: none;
}
.lob-band-lvl {
  position: absolute;
  right: -6px; bottom: -4px;
  min-width: 26px; height: 26px;
  padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 9px;
  font-family: var(--font-display); font-weight: 800; font-size: 0.72rem;
  color: var(--aaa-light-on);
  background: linear-gradient(160deg, hsl(160 100% 62%), hsl(160 100% 40%));
  border: 2px solid hsl(255 28% 6%);
  box-shadow: 0 0 14px hsla(160,100%,50%,0.5);
}

.lob-band-who { display: grid; gap: 0.15rem; align-content: center; }
.lob-band-name {
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 0 18px hsla(160,100%,60%,0.35);
}
.lob-band-title {
  justify-self: start;
  font-family: var(--font-display); font-size: 0.58rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--aaa-light-ink);
  padding: 0.22rem 0.6rem; border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--aaa-light) 40%, transparent);
  background: color-mix(in srgb, var(--aaa-light) 9%, transparent);
}
.lob-chip-streak {
  color: hsl(28 100% 72%);
  border-color: hsla(28,100%,60%,0.45);
  background: linear-gradient(180deg, hsla(28,100%,55%,0.14), transparent);
}

/* The charge bar: thick, segmented, and it shines. */
.lob-band-xp {
  grid-column: 1 / -1;
  height: 14px;
  border-radius: 7px;
  border-color: color-mix(in srgb, var(--aaa-light) 25%, transparent);
  position: relative;
  overflow: hidden;
}
.lob-band-xp > i {
  position: relative;
  border-radius: 7px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--aaa-light) 65%, transparent);
}
/* Tick marks every 10%: a gauge, not a sliver. */
.lob-band-xp::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(10% - 1px), hsl(255 28% 6% / 0.85) calc(10% - 1px) 10%);
  pointer-events: none;
}
/* The shine sweeps the filled portion only — Standard+ and never reduced. */
.aaa-q-standard .lob-band-xp > i::after,
.aaa-q-enhanced .lob-band-xp > i::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, hsla(0,0%,100%,0.35) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: lob-charge 3.2s var(--aaa-e-lin) infinite;
}
@keyframes lob-charge { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .lob-band-xp > i::after { animation: none !important; } }

@media (max-width: 640px) {
  .lob-band { grid-template-columns: auto minmax(0, 1fr); }
  .lob-band-purse { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════
   10x: the street, the ledger, tonight, the standings, the controls.
   ══════════════════════════════════════════════════════════════════════ */

/* ── The Block: five marquee fronts in one row, no orphans ── */
.aaa-venue-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 154px), 1fr)); gap: 0.8rem; }
.aaa-venue {
  min-height: 236px;
  border-radius: 14px;
  border-width: 1px;
  background:
    radial-gradient(130% 90% at 50% 118%, color-mix(in srgb, var(--aaa-light) 34%, transparent), transparent 58%),
    linear-gradient(180deg, var(--aaa-night-2), var(--aaa-night-0));
  transition: transform var(--aaa-t-move) var(--aaa-e-settle),
              border-color var(--aaa-t-quick) var(--aaa-e-settle),
              box-shadow var(--aaa-t-move) var(--aaa-e-settle);
}
.aaa-venue::before { height: 4px; opacity: 0.75; box-shadow: 0 0 12px var(--aaa-light); }
.aaa-q-standard .aaa-venue:hover, .aaa-q-enhanced .aaa-venue:hover {
  transform: translate3d(0, -5px, 0);
  border-color: color-mix(in srgb, var(--aaa-light) 70%, transparent);
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 34px color-mix(in srgb, var(--aaa-light) 26%, transparent);
}
.aaa-venue-name {
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  color: var(--aaa-light-ink);
  text-shadow: 0 0 16px color-mix(in srgb, var(--aaa-light) 50%, transparent);
}
.aaa-venue-cast { width: 128px; height: 128px; right: -12px; bottom: -8px; }
.aaa-venue-sub { font-size: 0.78rem; }
/* An ENTER cue surfaces on hover — every front is a door. */
.aaa-venue::after {
  content: "Enter ▸";
  position: absolute; right: 0.85rem; top: 0.7rem;
  font-family: var(--font-display); font-weight: 800; font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--aaa-light-ink);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--aaa-t-quick) var(--aaa-e-settle), transform var(--aaa-t-quick) var(--aaa-e-settle);
}
.aaa-venue:hover::after, .aaa-venue:focus-visible::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .aaa-venue, .aaa-venue::after { transition: none; } }

/* ── City ledger: two-line entries in lit wells — nothing truncates ── */
.lob-ledger-row { grid-template-columns: 2.1rem minmax(0, 1fr) auto; padding: 0.55rem 0.4rem; }
.lob-ledger-row > span:first-child {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border-radius: 8px; font-size: 0.95rem;
  background: radial-gradient(120% 120% at 30% 20%, hsla(160,100%,50%,0.14), var(--aaa-night-1));
  border: 1px solid color-mix(in srgb, var(--aaa-light) 30%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--aaa-light) 12%, transparent);
}
.lob-ledger-txt {
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}

/* ── Tonight in the city: room to breathe ── */
.lob-event { grid-template-columns: 2.6rem minmax(0, 1fr) auto; padding: 0.85rem 0.9rem; gap: 0.8rem; }
.lob-event-ic { width: 2.6rem; height: 2.6rem; border-radius: 10px; font-size: 1.15rem; }
.lob-event-v { font-size: 0.95rem; font-weight: 700; }
.lob-event-v small { margin-top: 0.2rem; line-height: 1.4; }

/* ── Standing: names win the space war ── */
.lob-stand-row { grid-template-columns: 1.6rem 24px minmax(0, 1fr) auto; gap: 0.5rem; }
.lob-stand-av { width: 24px; height: 24px; font-size: 0.6rem; }
.lob-stand-s { font-size: 0.74rem; }
.lob-stand-who { font-size: 0.88rem; }

/* ── Your experience: the segs become clean 2-up grids, not a blob ── */
.lob-rail-l .aaa-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem;
  width: 100%; border-radius: 12px; padding: 0.3rem;
}
.lob-rail-l .aaa-seg button { border-radius: 9px; padding: 0.5rem 0.3rem; min-height: 40px; }
.lob-rail-l .aaa-ctl-row { display: grid; gap: 0.45rem; }
.lob-rail-l .aaa-ctl { gap: 1rem; }

/* The marquee crossfade + a touch more presence on the identity. */
.aaa-portal-art { transition: transform var(--aaa-t-open) var(--aaa-e-settle), opacity 1400ms ease-in-out; }
.lob-marquee { font-size: clamp(2rem, 5.8vw, 3.6rem); }
.lob-city-v { text-shadow: 0 0 14px color-mix(in srgb, var(--aaa-light) 40%, transparent); }

/* ── The city counters: a lit scoreboard, built for big numbers ──
   Residents, circulation, games live, in the arcade now — presented like
   the venue's own scoreboard. The figures are real and the design assumes
   they grow: tabular numerals, room for six digits, no fixed counts. */
.lob-city {
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(180deg, hsl(252 26% 9%), hsl(255 28% 6%)) padding-box,
    linear-gradient(120deg, hsla(160,100%,50%,0.5), hsla(250,20%,24%,0.6) 42%,
      hsla(250,20%,24%,0.6) 58%, hsla(280,80%,60%,0.5)) border-box;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5), inset 0 1px 0 hsla(160,100%,70%,0.08);
  padding: 1.1rem clamp(1rem, 3vw, 2rem);
  gap: 0 clamp(1.4rem, 5vw, 3.4rem);
}
.lob-city-item { position: relative; padding: 0.3rem 0; }
.lob-city-item + .lob-city-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(0.7rem, 2.5vw, 1.7rem));
  top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, hsla(160,100%,50%,0.35), transparent);
}
.lob-city-v {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  background-image: linear-gradient(180deg, hsl(165 100% 78%), hsl(160 100% 46%));
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px hsla(160,100%,50%,0.35));
}
.lob-city-k { color: var(--aaa-ink-2); letter-spacing: 0.22em; margin-top: 0.15rem; }
/* The live one wears the live dot. */
.lob-city-item:last-child .lob-city-k::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 0.45em;
  vertical-align: 1px;
  background: hsl(160 100% 55%);
  box-shadow: 0 0 8px hsl(160 100% 55%);
}
@media (max-width: 640px) {
  .lob-city-item + .lob-city-item::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   The street lines up. Titles all start at the same line, body text runs
   the full card width above a reserved stage for the character, and every
   floor wears the SAME colour it wears in the navbar — one identity per
   destination, everywhere it appears.
   ══════════════════════════════════════════════════════════════════════ */

/* Navbar palette, verbatim (components/navbar/navbar.js NAV_ITEMS). */
.lob-v-arcade { --aaa-light: hsl(160 100% 50%); --aaa-light-ink: hsl(160 100% 75%); }
.lob-v-casino { --aaa-light: hsl(280 80% 60%);  --aaa-light-ink: hsl(280 85% 82%); }
.lob-v-arena  { --aaa-light: hsl(0 85% 60%);    --aaa-light-ink: hsl(0 95% 80%); }
.lob-v-vault  { --aaa-light: hsl(45 100% 55%);  --aaa-light-ink: hsl(45 100% 78%); }
.lob-v-hall   { --aaa-light: hsl(200 100% 65%); --aaa-light-ink: hsl(200 100% 84%); }

/* Symmetry: top-aligned content, a two-line title slot on every card, full-
   width body copy, and the cast on its own reserved stage at the bottom. */
.aaa-venue {
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 1.05rem 0.95rem calc(96px + 0.6rem);
  min-height: 252px;
}
.aaa-venue-name {
  min-height: 2.55em;             /* every title block is two lines tall */
  display: flex;
  align-items: flex-start;
  line-height: 1.25;
  max-width: 100%;
}
.aaa-venue-sub {
  max-width: 100%;                /* body copy runs the full card width */
  line-height: 1.45;
}
.aaa-venue-cast {
  width: 104px;
  height: 104px;
  right: 50%;
  transform: translateX(50%);
  bottom: -4px;
}
.aaa-q-standard .aaa-venue:hover .aaa-venue-cast,
.aaa-q-enhanced .aaa-venue:hover .aaa-venue-cast { transform: translateX(50%) translateY(-4px) scale(1.05); }

/* The level/XP readout burns neon purple — the brand's second colour,
   against the green charge ring and bar. */
.lob-band-meta {
  color: hsl(280 95% 78%);
  text-shadow: 0 0 12px hsla(280,85%,60%,0.55), 0 0 26px hsla(280,85%,55%,0.28);
}

/* The brand's own purple — the one the logo's ARCADE burns in
   (--clr-neon-purple / #a855f7), used verbatim so the XP readout and the
   Casino floor match the wordmark exactly. */
.lob-band-meta {
  color: var(--clr-neon-purple);
  text-shadow: 0 0 10px hsla(280,80%,55%,0.6), 0 0 26px hsla(280,80%,55%,0.3);
}
.lob-v-casino {
  --aaa-light: var(--clr-neon-purple);
  --aaa-light-ink: var(--clr-neon-purple);
}

/* Fight Night burns the navbar's own red — hsl(0 85% 60%), the value in
   NAV_ITEMS — on the title as well as the sign, not a paler tint of it. */
.lob-v-arena {
  --aaa-light: hsl(0 85% 60%);
  --aaa-light-ink: hsl(0 85% 60%);
}

/* ── Featured tonight: a paged carousel, two at a time ──────────────────
   Flanked by its own controls, snapping to whole pages. Never an endless
   horizontal scroll with dead space at the edges. */
.lob-car {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
}
.lob-car-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 0.5rem);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.2rem;
}
.lob-car-track::-webkit-scrollbar { display: none; }
.lob-car-track > * { scroll-snap-align: start; }
/* The page width governs here, not the premiere span. */
.lob-car-track .aaa-cab-premiere { grid-column: auto; }
.lob-car-track .aaa-cab-title { font-size: 0.95rem; }

.lob-car-nav {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--aaa-light) 35%, transparent);
  background: var(--aaa-night-2);
  color: var(--aaa-light-ink);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  transition: border-color var(--aaa-t-quick) var(--aaa-e-settle),
              box-shadow var(--aaa-t-quick) var(--aaa-e-settle);
}
.lob-car-nav:hover {
  border-color: var(--aaa-light);
  box-shadow: 0 0 18px color-mix(in srgb, var(--aaa-light) 35%, transparent);
}
.lob-car-nav:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 2px; }

.lob-car-dots {
  display: flex; justify-content: center; gap: 0.45rem;
  margin-top: 0.8rem; min-height: 8px;
}
.lob-car-dot {
  width: 8px; height: 8px;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--aaa-hairline);
  cursor: pointer;
  transition: width var(--aaa-t-move) var(--aaa-e-settle),
              background var(--aaa-t-move) var(--aaa-e-settle);
}
.lob-car-dot[aria-selected="true"] {
  width: 24px; border-radius: 4px;
  background: var(--aaa-light);
  box-shadow: 0 0 12px color-mix(in srgb, var(--aaa-light) 55%, transparent);
}
.lob-car-dot:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 3px; }

@media (max-width: 720px) {
  .lob-car-track { grid-auto-columns: 100%; }
  .lob-car-nav { display: none; }     /* the thumb is the control here */
}
@media (prefers-reduced-motion: reduce) {
  .lob-car-track { scroll-behavior: auto; }
  .lob-car-dot { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   The night, upgraded. A deep two-tone sky with the city's aurora in it —
   two vast pools of brand light drifting very slowly behind the skyline.
   Compositor-only (transform), Standard+ only, gone under reduced motion.
   ══════════════════════════════════════════════════════════════════════ */

.aaa-d-lobby { 
  background:
    radial-gradient(90% 60% at 12% 100%, hsla(160,100%,50%,0.07), transparent 60%),
    radial-gradient(80% 55% at 88% -6%, hsla(280,80%,55%,0.1), transparent 58%),
    linear-gradient(180deg, hsl(262 34% 7%) 0%, hsl(256 30% 5%) 44%, hsl(160 24% 4%) 100%);
}

/* The aurora: two immense soft light fields behind everything. */
.aaa-d-lobby .aaa-env::before,
.aaa-d-lobby .aaa-env::after {
  content: "";
  position: absolute;
  width: 84vw; height: 84vw;
  border-radius: 50%;
  /* No blur filter: the gradient itself is the softness. blur(90px) on a
     viewport-scale layer re-rasterised on every drift step and cost
     100-180ms stalls at idle. */
  opacity: 0.2;
  pointer-events: none;
  will-change: transform;
}
.aaa-d-lobby .aaa-env::before {
  left: -18vw; top: -26vw;
  background: radial-gradient(circle, hsl(280 85% 55% / 0.9) 0%, hsl(280 85% 55% / 0.4) 26%, hsl(280 85% 55% / 0.12) 48%, transparent 70%);
}
.aaa-d-lobby .aaa-env::after {
  right: -20vw; bottom: -30vw;
  background: radial-gradient(circle, hsl(160 100% 45% / 0.9) 0%, hsl(160 100% 45% / 0.4) 26%, hsl(160 100% 45% / 0.12) 48%, transparent 70%);
}
.aaa-q-standard .aaa-env::before,
.aaa-q-enhanced .aaa-env::before { animation: lob-aur-a 64s ease-in-out infinite alternate; }
.aaa-q-standard .aaa-env::after,
.aaa-q-enhanced .aaa-env::after  { animation: lob-aur-b 80s ease-in-out infinite alternate; }
@keyframes lob-aur-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(14vw, 8vw, 0); } }
@keyframes lob-aur-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(-12vw, -9vw, 0); } }
.aaa-q-lite .aaa-env::before, .aaa-q-lite .aaa-env::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .aaa-env::before, .aaa-env::after { animation: none !important; }
}

/* The skyline steps forward out of the murk. */
.aaa-d-lobby .aaa-env-far  { opacity: 0.52; }
.aaa-d-lobby .aaa-env-mid  { opacity: 0.66; }
.aaa-d-lobby .aaa-env-near { opacity: 0.85; }
.aaa-d-lobby .lob-sign { opacity: 0.5; }
.aaa-d-lobby .aaa-env-haze { opacity: 0.62; }

/* ══════════════════════════════════════════════════════════════════════
   The drawn skyline is retired. Geometry could not stand next to painted
   key art and it never will — the night itself is the environment now:
   the two-tone sky, the drifting aurora, the haze pooling at the horizon,
   the floor light and the embers. If a skyline returns, it returns as
   real painted art (manifest slot P1-01), not as rectangles.
   ══════════════════════════════════════════════════════════════════════ */
.aaa-d-lobby .aaa-env-far,
.aaa-d-lobby .aaa-env-mid,
.aaa-d-lobby .aaa-env-near { display: none; }

/* With the buildings gone the atmosphere carries the depth. */
.aaa-d-lobby .aaa-env-haze { opacity: 0.75; height: 80vh; }
.aaa-d-lobby .aaa-env::before { opacity: 0.2; }
.aaa-d-lobby .aaa-env::after  { opacity: 0.2; }
.aaa-d-lobby .lob-floor { height: 40vh; }

/* ══════════════════════════════════════════════════════════════════════
   Tonight in the city, 10x: every event is a marquee banner in its own
   light — VIP violet-gold for Game Pass, season pink-teal for the
   campaign, broadcast red when a fight is live. No emoji in boxes.
   ══════════════════════════════════════════════════════════════════════ */
.lob-ev {
  --ev: hsl(275 78% 60%);
  --ev-2: hsl(45 100% 55%);
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1.05rem 1.05rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ev) 38%, transparent);
  background:
    radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--ev-2) 13%, transparent), transparent 52%),
    radial-gradient(130% 130% at 0% 100%, color-mix(in srgb, var(--ev) 18%, transparent), transparent 56%),
    linear-gradient(180deg, var(--aaa-night-2), var(--aaa-night-0));
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--aaa-t-move) var(--aaa-e-settle),
              box-shadow var(--aaa-t-move) var(--aaa-e-settle),
              border-color var(--aaa-t-quick) var(--aaa-e-settle);
}
.lob-ev::before {                    /* the banner's lit top rule */
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--ev), var(--ev-2), transparent 85%);
  opacity: 0.85;
}
.aaa-q-standard .lob-ev:hover, .aaa-q-enhanced .lob-ev:hover {
  transform: translate3d(0, -3px, 0);
  border-color: color-mix(in srgb, var(--ev) 70%, transparent);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 26px color-mix(in srgb, var(--ev) 24%, transparent);
}
.lob-ev.is-vip    { --ev: hsl(275 78% 60%); --ev-2: hsl(45 100% 55%); }
.lob-ev.is-season { --ev: hsl(320 85% 60%); --ev-2: hsl(186 84% 52%); }
.lob-ev.is-live   { --ev: hsl(0 85% 60%);   --ev-2: hsl(28 100% 55%); }

.lob-ev-k {
  font-family: var(--font-display);
  font-size: 0.55rem; font-weight: 800;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ev) 70%, white 20%);
}
.lob-ev-v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--aaa-ink-1);
  text-shadow: 0 0 16px color-mix(in srgb, var(--ev) 40%, transparent);
}
.lob-ev-sub { font-size: 0.8rem; line-height: 1.45; color: var(--aaa-ink-2); }
.lob-ev-cta {
  justify-self: start;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 800; font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--aaa-night-0);
  background: linear-gradient(100deg, var(--ev), var(--ev-2));
  border-radius: 999px;
  padding: 0.5rem 1rem;
  min-height: 36px;
  display: inline-flex; align-items: center;
  box-shadow: 0 0 16px color-mix(in srgb, var(--ev) 30%, transparent);
}
@media (prefers-reduced-motion: reduce) { .lob-ev { transition: none; } .lob-ev:hover { transform: none; } }

/* Ledger tiles are the PLAYER's, like the Standing board — an initial in a
   lit well until /stats/activity ships an avatar field, then the same slot
   mounts the real pfp with no layout change. */
.lob-ledger-av {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  color: var(--aaa-light-ink);
}

/* ══════════════════════════════════════════════════════════════════════
   Standing, 10x: a podium board with medals, power bars and you on it.
   Every row carries a bar of the leader's score — the race is visible,
   not implied. Real scores only.
   ══════════════════════════════════════════════════════════════════════ */
.lob-stand-row {
  grid-template-columns: 24px 26px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0.3rem 0.55rem;
  align-items: center;
  padding: 0.55rem 0.55rem 0.6rem;
  border-radius: 11px;
}
/* Medals, not hash-numbers: gold, silver, bronze coins for the podium. */
.lob-stand-n {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 0.66rem;
  color: var(--aaa-ink-3);
  border: 1px solid var(--aaa-hairline);
  background: var(--aaa-night-1);
  text-shadow: none;
}
.lob-stand-row.r1 .lob-stand-n {
  color: hsl(42 90% 15%);
  background: linear-gradient(160deg, hsl(45 100% 68%), hsl(40 90% 45%));
  border-color: transparent;
  box-shadow: 0 0 12px hsla(45,100%,55%,0.5);
}
.lob-stand-row.r2 .lob-stand-n {
  color: hsl(210 20% 16%);
  background: linear-gradient(160deg, hsl(210 16% 86%), hsl(210 12% 58%));
  border-color: transparent;
}
.lob-stand-row.r3 .lob-stand-n {
  color: hsl(24 60% 14%);
  background: linear-gradient(160deg, hsl(28 70% 66%), hsl(24 55% 42%));
  border-color: transparent;
}
/* The race, visible: every row carries its share of the leader's score. */
.lob-stand-bar {
  grid-column: 2 / -1;
  height: 4px;
  border-radius: 2px;
  background: var(--aaa-night-0);
  overflow: hidden;
}
.lob-stand-bar > i {
  display: block; height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aaa-light-deep), var(--aaa-light));
  box-shadow: 0 0 8px color-mix(in srgb, var(--aaa-light) 45%, transparent);
}
.lob-stand-row.r1 .lob-stand-bar > i {
  background: linear-gradient(90deg, hsl(40 90% 45%), hsl(45 100% 62%));
  box-shadow: 0 0 10px hsla(45,100%,55%,0.5);
}
.lob-stand-row.r1 { background: linear-gradient(90deg, hsla(45,100%,55%,0.12), transparent 75%); }
.lob-stand-row.r1 .lob-stand-who { color: hsl(45 100% 80%); font-weight: 700; }
.lob-stand-row.r1 .lob-stand-s { color: hsl(45 100% 70%); text-shadow: 0 0 10px hsla(45,100%,55%,0.5); }
/* You, on the board — the same treatment the Hall gives you. */
.lob-stand-row.is-me {
  border: 1px solid color-mix(in srgb, var(--aaa-light) 50%, transparent);
  background: color-mix(in srgb, var(--aaa-light) 10%, transparent);
}
.lob-stand-row.is-me .lob-stand-who::after {
  content: "YOU";
  font-family: var(--font-display);
  font-size: 0.5rem; font-weight: 800; letter-spacing: 0.14em;
  color: var(--aaa-light-on);
  background: var(--aaa-light);
  border-radius: 3px;
  padding: 0.1rem 0.3rem;
  margin-left: 0.45rem;
  vertical-align: 1px;
}

/* Mounted pfps fill their tile edge to edge. */
.lob-stand-av { overflow: hidden; }
.lob-stand-av img, .lob-stand-av canvas, .lob-stand-av svg {
  width: 100%; height: 100%; object-fit: cover; display: block;
}



/* ══════════════════════════════════════════════════════════════════════
   NEW SNACK CITY ONLINE · DISTRICT 01 — the expansion announcement.
   A cinematic gateway: copy on the left, an architectural impression of
   the district entrance on the right. One-shot entrance choreography at
   Standard+; the finished composition is the DEFAULT state, so Lite,
   reduced motion and no-JS all see the complete scene immediately.
   ══════════════════════════════════════════════════════════════════════ */
.lob-gate { margin-top: var(--aaa-gap); }
.lob-gate-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 320px;               /* reserved: the announcement never shifts the page */
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(120deg, hsl(258 32% 8%), hsl(250 30% 5%) 55%) padding-box,
    linear-gradient(100deg, hsl(185 100% 55% / 0.55), hsl(250 20% 24% / 0.6) 38%,
      hsl(250 20% 24% / 0.6) 62%, hsl(280 80% 60% / 0.55)) border-box;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
}
/* District edge lighting along the top — wakes left to right on entry. */
.lob-gate-scene::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, hsl(185 100% 55%), hsl(280 80% 60%), hsl(42 80% 55%) 92%);
  transform-origin: left center;
  z-index: 2;
}

/* ── Left: the announcement ── */
.lob-gate-copy {
  display: grid;
  gap: 0.45rem;
  align-content: center;
  justify-items: start;
  padding: clamp(1.2rem, 3.5vw, 2.2rem);
  position: relative;
  z-index: 1;
}
.lob-gate-plate {
  font-family: var(--font-display);
  font-size: 0.55rem; font-weight: 800;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: hsl(185 90% 75%);
  border: 1px solid hsl(185 100% 55% / 0.35);
  background: hsl(185 100% 55% / 0.07);
  border-radius: 3px;
  padding: 0.4rem 0.8rem;
}
.lob-gate-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0.2rem 0 0;
  color: var(--aaa-ink-1);
}
.lob-gate-title em {
  font-style: normal;
  background-image: linear-gradient(180deg, hsl(185 100% 74%), hsl(280 85% 62%));
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px hsl(185 100% 55% / 0.4));
}
.lob-gate-campaign {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.86rem, 2vw, 1.02rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(45 95% 68%);
  margin: 0.15rem 0 0;
}
.lob-gate-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--aaa-ink-2);
  margin: 0.1rem 0 0;
  max-width: 44ch;
}
.lob-gate-actions { display:flex; flex-wrap:wrap; gap:0.55rem; margin-top:0.65rem; align-items:center; }
.lob-gate-enter, .lob-gate-builder {
  display:inline-flex; align-items:center; justify-content:center; gap:0.55rem;
  min-height:44px; border-radius:10px; padding:0.65rem 1rem;
  font-family:var(--font-display); font-weight:850; text-transform:uppercase;
  letter-spacing:0.09em; text-decoration:none;
}
.lob-gate-enter { color:#071018; background:linear-gradient(135deg,hsl(45 100% 68%),hsl(160 92% 60%)); box-shadow:0 0 24px hsl(160 80% 52% / 0.22); }
.lob-gate-builder { color:var(--aaa-ink-2); border:1px solid hsl(270 76% 66% / 0.48); background:hsl(270 65% 45% / 0.1); }
.lob-gate-enter:hover, .lob-gate-builder:hover { transform:translateY(-1px); }
.lob-gate-enter:focus-visible, .lob-gate-builder:focus-visible { outline:2px solid hsl(160 90% 65%); outline-offset:3px; }
.lob-gate-enter[hidden], .lob-gate-builder[hidden] { display:none; }
/* The status control: a locked plate, not a fake CTA. It opens the sheet. */
.lob-gate-status {
  display: grid;
  gap: 0.1rem;
  justify-items: start;
  text-align: left;
  margin-top: 0.7rem;
  padding: 0.6rem 1.05rem;
  min-height: 48px;
  border-radius: 10px;
  cursor: pointer;
  color: inherit;
  border: 1px solid hsl(42 70% 50% / 0.55);
  background: linear-gradient(180deg, hsl(42 60% 50% / 0.13), hsl(42 60% 40% / 0.04));
}
.lob-gate-status .k {
  font-family: var(--font-display);
  font-size: 0.5rem; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: hsl(42 70% 62%);
}
.lob-gate-status .v {
  font-family: var(--font-display);
  font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: hsl(45 95% 74%);
  text-shadow: 0 0 14px hsl(45 90% 55% / 0.4);
}
.lob-gate-status:hover { border-color: hsl(42 80% 58% / 0.8); }
.lob-gate-status:focus-visible { outline: 2px solid hsl(45 95% 62%); outline-offset: 3px; }
.lob-gate-note {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aaa-ink-3);
  margin-top: 0.3rem;
}

/* ── Online-world + builder entry surfaces ──────────────────────────────────
 * Revealed by home.js when the district / builder is open. The player portal
 * stays visually dominant; Builder is a quieter creator backstage path. */
.lob-gate-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.7rem;
  width: 100%;
  max-width: 400px;
}
.lob-gate-portal,
.lob-gate-about,
.lob-gate-builder {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.7rem 1.1rem;
  border-radius: 11px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.lob-gate-portal:active,
.lob-gate-about:active,
.lob-gate-builder:active { transform: scale(0.99); }
.lgb-ic { font-size: 1.15rem; line-height: 1; }
.lgb-tx { display: grid; gap: 0.05rem; text-align: left; }
.lob-gate-portal .k,
.lob-gate-about .k,
.lob-gate-builder .k {
  font-family: var(--font-display);
  font-size: 0.5rem; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.lob-gate-portal .v,
.lob-gate-about .v,
.lob-gate-builder .v {
  font-family: var(--font-display);
  font-size: 0.92rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* Primary — Enter Arcade District: the dominant cyan portal. */
.lob-gate-portal {
  color: #04121a;
  background: linear-gradient(180deg, hsl(185 100% 66%), hsl(190 95% 52%));
  border-color: hsl(185 100% 70% / 0.9);
  box-shadow: 0 0 26px -4px hsl(185 100% 55% / 0.55);
}
.lob-gate-portal .k { color: hsl(200 80% 22%); }
.lob-gate-portal .v { color: #041016; }
.lob-gate-portal:hover { box-shadow: 0 0 32px -2px hsl(185 100% 60% / 0.7); }
.lob-gate-portal:focus-visible { outline: 2px solid hsl(185 95% 70%); outline-offset: 3px; }
/* Secondary — About the District: a quiet ghost that opens the info sheet. */
.lob-gate-about {
  color: var(--aaa-ink-2);
  border-color: hsl(280 30% 40% / 0.5);
  background: hsl(280 30% 40% / 0.08);
}
.lob-gate-about .k { color: var(--aaa-ink-3); }
.lob-gate-about .v { color: var(--aaa-ink-1); font-weight: 700; }
.lob-gate-about:hover { border-color: hsl(280 40% 55% / 0.7); }
.lob-gate-about:focus-visible { outline: 2px solid hsl(280 70% 68%); outline-offset: 3px; }
/* Creator backstage — visually quieter than the player portal. */
.lob-gate-backstage {
  width: 100%;
  max-width: 400px;
  margin-top: 0.7rem;
  border-top: 1px dashed hsl(280 30% 30% / 0.6);
  padding-top: 0.7rem;
}
.lob-gate-backstage-tag {
  display: block;
  font-family: var(--font-display);
  font-size: 0.5rem; font-weight: 800;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: hsl(280 55% 72%);
  margin: 0 0 0.45rem;
}
.lob-gate-builder {
  color: var(--aaa-ink-1);
  border-color: hsl(280 60% 55% / 0.5);
  background: linear-gradient(180deg, hsl(280 60% 50% / 0.14), hsl(280 60% 40% / 0.04));
}
.lob-gate-builder .k { color: hsl(280 55% 72%); }
.lob-gate-builder .v { color: hsl(285 70% 84%); }
.lob-gate-builder:hover { border-color: hsl(280 70% 62% / 0.8); }
.lob-gate-builder:focus-visible { outline: 2px solid hsl(280 75% 70%); outline-offset: 3px; }

/* ── Right: the district, seen from the forecourt ── */
.lob-gate-preview { position: relative; min-height: 240px; }
.lob-gate-preview svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The civic seal — New Snack City's own authority, not caution tape. */
.lob-gate-seal {
  position: absolute;
  right: 12px; bottom: 12px;
  display: grid;
  gap: 0.05rem;
  text-align: right;
  transform: rotate(-4deg);
  padding: 0.45rem 0.7rem;
  border: 1.5px solid hsl(42 70% 52% / 0.75);
  outline: 1px solid hsl(42 70% 52% / 0.3);
  outline-offset: 2.5px;
  border-radius: 4px;
  background: hsl(250 30% 6% / 0.72);
}
.lob-gate-seal b {
  font-family: var(--font-display);
  font-size: 0.48rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: hsl(42 85% 66%);
}
.lob-gate-seal i {
  font-style: normal;
  font-family: var(--aaa-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--aaa-ink-3);
}

/* ── One-shot entrance choreography (Standard+; never under reduced) ──
   1 darkness → 2 edge light wakes → 3 doors part → 4 light spills →
   5 title resolves → 6 far screens activate → 7 status plate stamps.
   Every animation fills both and RUNS ONCE. */
.aaa-q-standard .lob-gate-scene::before,
.aaa-q-enhanced .lob-gate-scene::before { animation: dg-edge 700ms var(--aaa-e-lin) both; }
@keyframes dg-edge { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.aaa-q-standard .dg-door-l, .aaa-q-enhanced .dg-door-l,
.aaa-q-standard .dg-door-r, .aaa-q-enhanced .dg-door-r { animation: dg-doors 900ms var(--aaa-e-door) 500ms both; }
.dg-door-l, .dg-door-r { transform-box: fill-box; }
.aaa-q-standard .dg-door-l, .aaa-q-enhanced .dg-door-l { transform-origin: left center; }
.aaa-q-standard .dg-door-r, .aaa-q-enhanced .dg-door-r { transform-origin: right center; }
@keyframes dg-doors { from { transform: scaleX(1.55); } to { transform: scaleX(1); } }

.aaa-q-standard .dg-spill, .aaa-q-enhanced .dg-spill { animation: dg-spill 800ms var(--aaa-e-settle) 900ms both; }
@keyframes dg-spill { from { opacity: 0; } to { opacity: 1; } }

.aaa-q-standard .lob-gate-copy > *, .aaa-q-enhanced .lob-gate-copy > * {
  animation: dg-copy 520ms var(--aaa-e-settle) both;
}
.aaa-q-standard .lob-gate-copy > :nth-child(1), .aaa-q-enhanced .lob-gate-copy > :nth-child(1) { animation-delay: 950ms; }
.aaa-q-standard .lob-gate-copy > :nth-child(2), .aaa-q-enhanced .lob-gate-copy > :nth-child(2) { animation-delay: 1050ms; }
.aaa-q-standard .lob-gate-copy > :nth-child(3), .aaa-q-enhanced .lob-gate-copy > :nth-child(3) { animation-delay: 1200ms; }
.aaa-q-standard .lob-gate-copy > :nth-child(4), .aaa-q-enhanced .lob-gate-copy > :nth-child(4) { animation-delay: 1300ms; }
.aaa-q-standard .lob-gate-copy > :nth-child(6), .aaa-q-enhanced .lob-gate-copy > :nth-child(6) { animation-delay: 1750ms; }
@keyframes dg-copy { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }

.aaa-q-standard .dg-scr rect, .aaa-q-enhanced .dg-scr rect,
.aaa-q-standard rect.dg-scr, .aaa-q-enhanced rect.dg-scr { animation: dg-scr 320ms var(--aaa-e-lin) both; }
.aaa-q-standard .s1, .aaa-q-enhanced .s1 { animation-delay: 1350ms; }
.aaa-q-standard .s2, .aaa-q-enhanced .s2 { animation-delay: 1450ms; }
.aaa-q-standard .s3, .aaa-q-enhanced .s3 { animation-delay: 1520ms; }
.aaa-q-standard .s4, .aaa-q-enhanced .s4 { animation-delay: 1620ms; }
.aaa-q-standard .s5, .aaa-q-enhanced .s5 { animation-delay: 1700ms; }
@keyframes dg-scr { from { opacity: 0; } to { opacity: 1; } }

.aaa-q-standard .lob-gate-copy > .lob-gate-status,
.aaa-q-enhanced .lob-gate-copy > .lob-gate-status { animation: dg-stamp 420ms var(--aaa-e-punch) 1550ms both; }
@keyframes dg-stamp { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: scale(1); } }

/* Kill switches: reduced motion and Lite see the finished composition. */
html.aaa-reduced .lob-gate-scene::before,
html.aaa-reduced .dg-door-l, html.aaa-reduced .dg-door-r,
html.aaa-reduced .dg-spill, html.aaa-reduced .lob-gate-copy > *,
html.aaa-reduced .dg-scr rect, html.aaa-reduced rect.dg-scr,
html.aaa-reduced .lob-gate-status { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lob-gate-scene::before, .dg-door-l, .dg-door-r, .dg-spill,
  .lob-gate-copy > *, .dg-scr rect, rect.dg-scr, .lob-gate-status { animation: none !important; }
}

/* Forced colours: the copy is real DOM text; keep the plates legible. */
@media (forced-colors: active) {
  .lob-gate-scene, .lob-gate-status, .lob-gate-seal { border: 1px solid CanvasText; background: Canvas; }
}

/* ── Responsive ── */
@media (max-width: 960px) {           /* tablet: keep the gateway, fewer layers */
  .lob-gate-scene { grid-template-columns: 1.15fr 1fr; min-height: 280px; }
  .dg-sign { display: none; }
}
@media (max-width: 720px) {           /* portrait phone: stacked, doorway crop */
  .lob-gate-scene { grid-template-columns: 1fr; min-height: 0; }
  .lob-gate-copy { padding: 1.1rem 1.1rem 0.4rem; }
  .lob-gate-title { font-size: clamp(1.5rem, 7.4vw, 1.9rem); }
  .lob-gate-preview { min-height: 200px; order: 2; margin-top: 0.6rem; }
  .lob-gate-preview svg { transform: scale(1.35); transform-origin: 50% 100%; }
  .lob-gate-seal { right: 8px; bottom: 8px; transform: rotate(0deg); }
}
@media (max-height: 480px) and (orientation: landscape) {
  .lob-gate-scene { min-height: 230px; }
  .lob-gate-copy { padding: 0.9rem 1rem; gap: 0.3rem; }
  .lob-gate-desc { display: none; }   /* compact split; entrance stays visible */
}

/* ══════════════════════════════════════════════════════════════════════
   P1-05 delivered: the gate wears the painted monument. The art runs the
   full scene edge to edge; the copy owns the dark left the painting
   provides. The SVG impression it replaces is retired.
   ══════════════════════════════════════════════════════════════════════ */
.lob-gate-scene { min-height: 380px; }
.lob-gate-preview { position: static; min-height: 0; }
.lob-gate-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 34%;
  z-index: 0;
}
/* A safety scrim under the copy — the painting is dark left already; this
   guarantees contrast at every width and in Lite. */
.lob-gate-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(94deg, hsl(258 32% 5% / 0.88) 0%, hsl(258 32% 5% / 0.55) 34%, transparent 58%);
  pointer-events: none;
}
.lob-gate-copy { z-index: 1; }
.lob-gate-seal { z-index: 1; }
/* The one-shot wake: the monument comes up out of darkness. */
.aaa-q-standard .lob-gate-art, .aaa-q-enhanced .lob-gate-art {
  animation: dg-art 1200ms var(--aaa-e-settle) 300ms both;
}
@keyframes dg-art { from { opacity: 0; filter: brightness(0.35); } to { opacity: 1; filter: brightness(1); } }
html.aaa-reduced .lob-gate-art { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .lob-gate-art { animation: none !important; } }

@media (max-width: 720px) {
  /* Portrait: the doorway crop, copy above it on the scrim. */
  .lob-gate-scene { min-height: 0; }
  .lob-gate-art { position: absolute; object-position: 74% 30%; }
  .lob-gate-scene::after {
    background: linear-gradient(180deg, hsl(258 32% 5% / 0.9) 0%, hsl(258 32% 5% / 0.62) 55%, transparent 85%);
  }
  .lob-gate-copy { padding-bottom: 8.5rem; }   /* the doorway stays visible below the copy */
  .lob-gate-preview svg { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   The WHOLE gate. No crop: the painting fits complete — crest, columns,
   doors, forecourt, and the crew walking in — anchored right, and its own
   painted darkness merges into the scene's ground on the left.
   ══════════════════════════════════════════════════════════════════════ */
.lob-gate-scene {
  min-height: 0;
  aspect-ratio: 1735 / 760;          /* full art height at shell width, capped */
  max-height: 560px;
  background:
    linear-gradient(120deg, hsl(258 32% 6%), hsl(256 30% 4%) 55%) padding-box,
    linear-gradient(100deg, hsl(185 100% 55% / 0.55), hsl(250 20% 24% / 0.6) 38%,
      hsl(250 20% 24% / 0.6) 62%, hsl(280 80% 60% / 0.55)) border-box;
}
.lob-gate-art {
  object-fit: contain;
  object-position: 100% 100%;        /* the monument stands on the frame's floor */
}
/* The scrim only needs to guard the copy's corner now. */
.lob-gate-scene::after {
  background: linear-gradient(94deg, hsl(258 32% 5% / 0.8) 0%, hsl(258 32% 5% / 0.35) 30%, transparent 52%);
}

@media (max-width: 720px) {
  /* Portrait: copy first, then the complete gate — nothing cropped. */
  .lob-gate-scene { aspect-ratio: auto; max-height: none; }
  .lob-gate-art {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .lob-gate-preview { position: relative; }
  .lob-gate-copy { padding-bottom: 0.4rem; }
  .lob-gate-scene::after { display: none; }   /* copy no longer sits over art */
}

/* ══════════════════════════════════════════════════════════════════════
   NEW SNACK CITY ONLINE leads. It is the name of the open world — the
   district is the first street in it, and the hierarchy now says so.
   Plus the cinematic crop: crest to forecourt, tight frame.
   ══════════════════════════════════════════════════════════════════════ */
.lob-gate-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.2vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background-image: linear-gradient(97deg,
    hsl(185 100% 76%) 0%, hsl(190 100% 60%) 30%, hsl(255 90% 76%) 62%, hsl(280 90% 64%) 100%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px hsl(190 100% 55% / 0.5)) drop-shadow(0 2px 8px rgba(0,0,0,0.8));
}
.lob-gate-brand em { font-style: normal; }
/* The New Snack City Online wordmark, in the slot the text brand held. Its own
   glow already reads on the dark gate; a gentle lift on hover, nothing more. */
.lob-gate-logo {
  display: block;
  width: clamp(200px, 34vw, 320px);
  height: auto;
  margin: 0 0 0.15rem;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6));
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lob-gate:hover .lob-gate-logo { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .lob-gate-logo { transition: none; }
  .lob-gate:hover .lob-gate-logo { transform: none; }
}
.lob-gate-plate { margin-top: 0.1rem; }
/* The district title steps down — it names the street, not the world. */
.lob-gate-title { font-size: clamp(1.15rem, 2.9vw, 1.7rem); letter-spacing: 0.05em; }

/* The crop: crest at the top, forecourt at the base, nothing floating. */
.lob-gate-scene { aspect-ratio: 1735 / 640; max-height: 500px; }
.lob-gate-art { object-fit: cover; object-position: 100% 78%; }
@media (max-width: 720px) {
  .lob-gate-scene { aspect-ratio: auto; max-height: none; }
  .lob-gate-art { object-fit: contain; object-position: center bottom; }
}