/* ==========================================================
   Crispy Arcade — AAA Experience system
   New Snack City after dark. One night, thirteen lights, one frame.

   Spec: docs/aaa-experience/02-CREATIVE-DIRECTION.md
         docs/aaa-experience/04-MOTION-SYSTEM.md
         docs/aaa-experience/05-QUALITY-TIERS.md

   Rules this file obeys:
     - Everything is namespaced `aaa-`. Never reuse a bare state name
       (progress / card / panel / btn) — globals.css owns those.
     - Districts never name a colour. They set --aaa-light; components read it.
     - The DEFAULT presentation is Lite. Standard and Enhanced are additive,
       so if aaa-motion.js never loads, every page is still complete.
     - Only compositor properties animate. Nothing animates while hidden.
   ========================================================== */

/* ══════════════════════════════════════════════════════════
   1. Tokens — the Night, the type scale, the timing
   ══════════════════════════════════════════════════════════ */

:root {
  /* --- The Night: one shared ground under every district --- */
  --aaa-night-0: hsl(258 30% 4%);
  --aaa-night-1: hsl(252 26% 7%);
  --aaa-night-2: hsl(250 22% 10%);
  --aaa-night-3: hsl(250 20% 14%);
  --aaa-haze:    hsl(268 40% 18%);

  --aaa-hairline: hsl(250 20% 18%);
  --aaa-ink-1: hsl(180 60% 96%);
  --aaa-ink-2: hsl(220 14% 64%);
  --aaa-ink-3: hsl(220 12% 46%);

  /* --- Functional colours: these NEVER change meaning anywhere --- */
  --aaa-cc:     var(--clr-cc);             /* Crispy Cash, earned   — gold */
  --aaa-ac:     var(--clr-neon-cyan);      /* Arcade Credits, premium — cyan */
  --aaa-danger: hsl(2 72% 58%);
  --aaa-good:   hsl(158 100% 52%);

  /* --- The Light: districts override this one property --- */
  --aaa-light:      hsl(41 96% 58%);       /* default = Concourse Gold */
  --aaa-light-ink:  hsl(41 96% 78%);       /* readable text in the light  */
  --aaa-light-deep: hsl(41 70% 26%);       /* the light in shadow         */
  --aaa-light-on:   hsl(38 90% 8%);        /* ink that sits ON the light  */

  /* --- Timing (04-MOTION-SYSTEM.md) --- */
  --aaa-t-tap:   90ms;
  --aaa-t-quick: 180ms;
  --aaa-t-move:  280ms;
  --aaa-t-open:  420ms;
  --aaa-t-enter: 560ms;
  --aaa-t-cine:  1400ms;
  --aaa-e-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --aaa-e-door:   cubic-bezier(0.32, 0.72, 0, 1);
  --aaa-e-punch:  cubic-bezier(0.2, 1.35, 0.4, 1);
  --aaa-e-lin:    linear;

  /* --- Layout --- */
  --aaa-shell: 1220px;
  --aaa-gutter: clamp(0.95rem, 3.2vw, 2rem);
  --aaa-gap: clamp(0.85rem, 2.4vw, 1.4rem);
  --aaa-radius: 14px;
  --aaa-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* --- Runtime values written by aaa-motion.js --- */
  --aaa-pan-far: 0px;
  --aaa-pan-mid: 0px;
  --aaa-pan-near: 0px;
  --aaa-px: 0;      /* pointer x, -1..1 */
  --aaa-py: 0;      /* pointer y, -1..1 */
}

/* ── District lights ─────────────────────────────────────── */
.aaa-d-lobby    { --aaa-light: hsl(41 96% 58%);  --aaa-light-ink: hsl(41 96% 80%);  --aaa-light-deep: hsl(41 70% 24%); --aaa-light-on: hsl(38 90% 8%); }
.aaa-d-arcade   { --aaa-light: hsl(158 100% 52%);--aaa-light-ink: hsl(158 90% 78%); --aaa-light-deep: hsl(158 70% 20%);--aaa-light-on: hsl(160 90% 6%); }
.aaa-d-premiere { --aaa-light: hsl(48 100% 88%); --aaa-light-ink: hsl(48 100% 92%); --aaa-light-deep: hsl(44 40% 30%); --aaa-light-on: hsl(44 60% 8%); }
.aaa-d-casino   { --aaa-light: hsl(275 78% 62%); --aaa-light-ink: hsl(280 85% 84%); --aaa-light-deep: hsl(275 60% 22%);--aaa-light-on: hsl(278 80% 8%); }
.aaa-d-arena    { --aaa-light: hsl(14 92% 56%);  --aaa-light-ink: hsl(18 95% 78%);  --aaa-light-deep: hsl(12 70% 22%); --aaa-light-on: hsl(12 90% 7%); }
.aaa-d-hall     { --aaa-light: hsl(45 90% 60%);  --aaa-light-ink: hsl(45 90% 82%);  --aaa-light-deep: hsl(45 50% 24%); --aaa-light-on: hsl(42 90% 8%); }
.aaa-d-vault    { --aaa-light: hsl(275 78% 62%); --aaa-light-ink: hsl(280 85% 84%); --aaa-light-deep: hsl(275 60% 24%);--aaa-light-on: hsl(278 80% 8%); }
.aaa-d-vip      { --aaa-light: hsl(275 78% 60%); --aaa-light-ink: hsl(280 85% 84%); --aaa-light-deep: hsl(275 60% 22%);--aaa-light-on: hsl(278 80% 8%); }
.aaa-d-season   { --aaa-light: hsl(186 84% 52%); --aaa-light-ink: hsl(186 84% 80%); --aaa-light-deep: hsl(186 60% 20%);--aaa-light-on: hsl(190 90% 6%); }
.aaa-d-hq       { --aaa-light: hsl(200 100% 62%);--aaa-light-ink: hsl(200 100% 82%);--aaa-light-deep: hsl(200 60% 22%);--aaa-light-on: hsl(205 90% 7%); }
.aaa-d-lounge   { --aaa-light: hsl(32 92% 62%);  --aaa-light-ink: hsl(32 92% 82%);  --aaa-light-deep: hsl(32 60% 24%); --aaa-light-on: hsl(30 90% 8%); }
.aaa-d-entrance { --aaa-light: hsl(38 100% 66%); --aaa-light-ink: hsl(38 100% 84%); --aaa-light-deep: hsl(38 60% 26%); --aaa-light-on: hsl(36 90% 8%); }
.aaa-d-closed   { --aaa-light: hsl(2 72% 52%);   --aaa-light-ink: hsl(2 80% 80%);   --aaa-light-deep: hsl(2 50% 22%);  --aaa-light-on: hsl(2 70% 8%); }
/* Social is the one district in pink. Every other light sits in amber, gold,
   green, purple or orange, so this is the only hue left that cannot be mistaken
   for the casino or the arena at a glance. */
.aaa-d-social   { --aaa-light: hsl(322 85% 62%); --aaa-light-ink: hsl(322 90% 84%); --aaa-light-deep: hsl(322 55% 22%);--aaa-light-on: hsl(322 90% 7%); }

/* ══════════════════════════════════════════════════════════
   2. The Concourse Frame — the platform's signature
   ══════════════════════════════════════════════════════════ */

.aaa-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  contain: strict;
}

/* Hairline proscenium, inset from the viewport edge. */
.aaa-frame-edge {
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in srgb, var(--aaa-light) 22%, transparent);
  border-radius: 4px;
}

/* Brass corner brackets — the only heavy decoration on the page. */
.aaa-frame-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid color-mix(in srgb, var(--aaa-light) 45%, transparent);
  opacity: 0.75;
}
.aaa-frame-corner.tl { top: 10px;    left: 10px;  border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.aaa-frame-corner.tr { top: 10px;    right: 10px; border-left: 0;  border-bottom: 0; border-radius: 0 4px 0 0; }
.aaa-frame-corner.bl { bottom: 10px; left: 10px;  border-right: 0; border-top: 0;    border-radius: 0 0 0 4px; }
.aaa-frame-corner.br { bottom: 10px; right: 10px; border-left: 0;  border-top: 0;    border-radius: 0 0 4px 0; }

/* The bulb run: marquee bulbs along the top edge. */
.aaa-frame-bulbs {
  position: absolute;
  top: 10px;
  left: 46px;
  right: 46px;
  height: 2px;
  background-image: radial-gradient(circle, var(--aaa-light) 45%, transparent 46%);
  background-size: 14px 2px;
  background-repeat: repeat-x;
  opacity: 0.28;
}

@media (max-width: 640px) {
  .aaa-frame-edge   { inset: 6px; }
  .aaa-frame-corner { width: 18px; height: 18px; }
  .aaa-frame-corner.tl, .aaa-frame-corner.tr { top: 6px; }
  .aaa-frame-corner.bl, .aaa-frame-corner.br { bottom: 6px; }
  .aaa-frame-corner.tl, .aaa-frame-corner.bl { left: 6px; }
  .aaa-frame-corner.tr, .aaa-frame-corner.br { right: 6px; }
  .aaa-frame-bulbs  { top: 6px; left: 30px; right: 30px; }
}

/* Lite: hairline only. No bulbs, no brackets, no wake. */
.aaa-q-lite .aaa-frame-bulbs,
.aaa-q-lite .aaa-frame-corner { display: none; }

/* Standard/Enhanced: the marquee wake travels once on district entry. */
.aaa-q-standard .aaa-frame-bulbs,
.aaa-q-enhanced .aaa-frame-bulbs {
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.aaa-enter .aaa-frame-bulbs::after {
  content: "";
  position: absolute;
  inset: -3px 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--aaa-light) 90%, transparent), transparent);
  background-size: 34% 100%;
  background-repeat: no-repeat;
  animation: aaa-wake var(--aaa-t-enter) var(--aaa-e-lin) 1 both;
}
@keyframes aaa-wake {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}
.aaa-q-enhanced .aaa-frame-corner { opacity: 0.95; box-shadow: 0 0 10px color-mix(in srgb, var(--aaa-light) 30%, transparent); }

/* ══════════════════════════════════════════════════════════
   3. District plate, marquee type, section rules
   ══════════════════════════════════════════════════════════ */

.aaa-plate {
  display: inline-flex;
  align-items: center;
  gap: 0.62em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--aaa-light-ink);
  background: color-mix(in srgb, var(--aaa-light) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--aaa-light) 26%, transparent);
  border-radius: 3px;
  padding: 0.42rem 0.85rem;
  margin: 0 0 0.9rem;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aaa-plate::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aaa-light);
  box-shadow: 0 0 6px var(--aaa-light);
}

.aaa-marquee {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 5.2vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
  color: var(--aaa-ink-1);
}
.aaa-marquee em {
  font-style: normal;
  color: var(--aaa-light);
}

.aaa-lede {
  color: var(--aaa-ink-2);
  font-family: var(--font-body);
  font-size: clamp(0.94rem, 2.2vw, 1.02rem);
  line-height: 1.55;
  max-width: 62ch;
  margin: 0.7rem 0 0;
}

/* Section rule — a signage strip, not a heading. */
.aaa-rule {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: clamp(1.6rem, 5vw, 2.6rem) 0 var(--aaa-gap);
}
.aaa-rule > h2, .aaa-rule > h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aaa-ink-1);
  margin: 0;
  white-space: nowrap;
}
.aaa-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--aaa-light) 45%, transparent), transparent);
}
.aaa-rule .aaa-rule-aside {
  flex: 0 0 auto;
  font-family: var(--aaa-mono);
  font-size: 0.72rem;
  color: var(--aaa-ink-3);
  font-variant-numeric: tabular-nums;
}

.aaa-ledger {
  font-family: var(--aaa-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════
   4. Page shell + environment layers
   ══════════════════════════════════════════════════════════ */

.aaa-shell {
  width: 100%;
  max-width: var(--aaa-shell);
  margin: 0 auto;
  padding: 0 var(--aaa-gutter);
  position: relative;
  z-index: 2;
}
.aaa-shell * { min-width: 0; }

/* A district owns its own entrance. globals.css's generic page-enter fade
   would play underneath the band stagger and read as a double animation. */
body[class*="aaa-d-"] .page-content { animation: none; }
body[class*="aaa-d-"] { background: var(--aaa-night-1); }

/* The environment sits behind everything, is never load-bearing, and is
   removed entirely in Lite. */
.aaa-env {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.aaa-env-layer {
  position: absolute;
  left: 50%;
  width: min(2560px, 190vw);
  transform: translateX(-50%);
  will-change: auto;
  /* The tops of the buildings dissolve into the night rather than ending on a
     hard edge. This is what turns a row of rectangles into distance. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 62%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 62%);
}
.aaa-q-standard .aaa-env-layer,
.aaa-q-enhanced .aaa-env-layer { will-change: transform; }

/* The horizon sits low. You are on the concourse looking out, not flying. */
.aaa-env-far  { bottom: 27vh; transform: translate3d(calc(-50% + var(--aaa-pan-far)),  0, 0); opacity: 0.34; }
.aaa-env-mid  { bottom: 15vh; transform: translate3d(calc(-50% + var(--aaa-pan-mid)),  0, 0); opacity: 0.44; }
.aaa-env-near { bottom: 0;    transform: translate3d(calc(-50% + var(--aaa-pan-near)), 0, 0); opacity: 0.6; }

/* Atmospheric wash — a gradient, not a particle system. */
.aaa-env-haze {
  position: absolute;
  inset: auto 0 0 0;
  height: 74vh;
  background:
    radial-gradient(120% 80% at 50% 104%, color-mix(in srgb, var(--aaa-light) 15%, transparent), transparent 60%),
    linear-gradient(0deg, var(--aaa-haze) -46%, transparent 56%);
  opacity: 0.5;
}

.aaa-q-lite .aaa-env-far,
.aaa-q-lite .aaa-env-mid { display: none; }
.aaa-q-lite .aaa-env-haze { opacity: 0.35; }

/* ══════════════════════════════════════════════════════════
   5. District entrance — staggered bands
   ══════════════════════════════════════════════════════════ */

/* Bands are ALWAYS visible by default. The entrance is an animation applied
   on top, never a reason for content to be missing. */
[data-aaa-band] { opacity: 1; }

.aaa-enter [data-aaa-band] {
  animation: aaa-band-in var(--aaa-t-enter) var(--aaa-e-settle) both;
  animation-delay: calc(var(--aaa-band-i, 0) * 40ms);
}
@keyframes aaa-band-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Long-form Lobby entrance: the block wakes up. Lobby only, first visit only. */
.aaa-enter-cine .aaa-env-far  { animation: aaa-rise-far  var(--aaa-t-cine) var(--aaa-e-settle) both; }
.aaa-enter-cine .aaa-env-mid  { animation: aaa-rise-mid  var(--aaa-t-cine) var(--aaa-e-settle) both; }
.aaa-enter-cine .aaa-env-near { animation: aaa-rise-near var(--aaa-t-cine) var(--aaa-e-settle) both; }
@keyframes aaa-rise-far  { from { opacity: 0; transform: translate3d(calc(-50% + var(--aaa-pan-far)),  26px, 0); } to { opacity: 0.5;  transform: translate3d(calc(-50% + var(--aaa-pan-far)),  0, 0); } }
@keyframes aaa-rise-mid  { from { opacity: 0; transform: translate3d(calc(-50% + var(--aaa-pan-mid)),  40px, 0); } to { opacity: 0.72; transform: translate3d(calc(-50% + var(--aaa-pan-mid)),  0, 0); } }
@keyframes aaa-rise-near { from { opacity: 0; transform: translate3d(calc(-50% + var(--aaa-pan-near)), 56px, 0); } to { opacity: 0.9;  transform: translate3d(calc(-50% + var(--aaa-pan-near)), 0, 0); } }

/* District exit — replaces the generic page-exit fade. */
body.aaa-exit .page-content,
body.aaa-exit .aaa-shell { animation: aaa-exit var(--aaa-t-move) var(--aaa-e-door) forwards; }
body.aaa-exit .aaa-frame-edge { transition: border-color var(--aaa-t-move) linear; border-color: transparent; }
@keyframes aaa-exit { to { opacity: 0; transform: translate3d(0, -8px, 0); } }

/* ══════════════════════════════════════════════════════════
   6. Surfaces — venue, portal, panel, chip
   ══════════════════════════════════════════════════════════ */

.aaa-panel {
  position: relative;
  background: linear-gradient(180deg, var(--aaa-night-3), var(--aaa-night-2));
  border: 1px solid var(--aaa-hairline);
  border-radius: var(--aaa-radius);
  padding: clamp(1rem, 3vw, 1.6rem);
  box-shadow: 0 4px 26px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.03);
}
.aaa-panel-lit { border-color: color-mix(in srgb, var(--aaa-light) 34%, transparent); }
.aaa-panel-lit::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  border-radius: var(--aaa-radius) var(--aaa-radius) 0 0;
  background: linear-gradient(90deg, var(--aaa-light), transparent 72%);
  opacity: 0.9;
}

/* --- The venue front: a district as a building on the street --- */
.aaa-venue {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.3rem;
  min-height: 168px;
  padding: 1rem;
  border-radius: var(--aaa-radius);
  border: 1px solid color-mix(in srgb, var(--aaa-light) 22%, transparent);
  background:
    radial-gradient(120% 100% at 50% 118%, color-mix(in srgb, var(--aaa-light) 26%, transparent), transparent 62%),
    linear-gradient(180deg, var(--aaa-night-2), var(--aaa-night-0));
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
/* The venue's sign: a lit bar above the name. */
.aaa-venue::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--aaa-light);
  opacity: 0.55;
  transition: opacity var(--aaa-t-quick) var(--aaa-e-settle),
              box-shadow var(--aaa-t-quick) var(--aaa-e-settle);
}
.aaa-venue-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aaa-ink-1);
  margin: 0;
}
.aaa-venue-sub {
  font-size: 0.8rem;
  color: var(--aaa-ink-2);
  margin: 0;
  line-height: 1.4;
}
.aaa-venue-mark {
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  font-size: 1.35rem;
  opacity: 0.55;
  z-index: -1;
}
.aaa-venue:hover::before,
.aaa-venue:focus-visible::before { opacity: 1; box-shadow: 0 0 16px var(--aaa-light); }
.aaa-venue:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 3px; }

/* Proximity light: siblings dim, the hovered venue stays full (Standard+). */
.aaa-q-standard .aaa-venue-row:hover .aaa-venue:not(:hover),
.aaa-q-enhanced .aaa-venue-row:hover .aaa-venue:not(:hover) {
  opacity: 0.72;
  transition: opacity var(--aaa-t-quick) var(--aaa-e-settle);
}

/* --- The Quick Play portal: a doorway, not a button --- */
.aaa-portal {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  /* An arch, not a dome: the curve is proportional so it reads as architecture
     at 390px and at 2560px alike. */
  border-radius: 26% 26% var(--aaa-radius) var(--aaa-radius) / 34% 34% var(--aaa-radius) var(--aaa-radius);
}
.aaa-portal:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 4px; }
.aaa-portal-arch {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--aaa-light) 38%, transparent);
  background: linear-gradient(180deg, var(--aaa-night-2), var(--aaa-night-0));
  aspect-ratio: 16 / 8.4;
  max-height: 320px;
}
.aaa-portal-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.68;
  transition: transform var(--aaa-t-open) var(--aaa-e-settle),
              opacity var(--aaa-t-open) var(--aaa-e-settle);
}
/* The key art is busy by design, so the veil has to be strong enough that the
   destination name is readable over any frame of any game's art. */
.aaa-portal-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,6,14,0.5) 0%, rgba(8,6,14,0.1) 30%, rgba(8,6,14,0.72) 68%, rgba(8,6,14,0.95) 100%);
}
.aaa-portal-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem 1.1rem 1.15rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
}
.aaa-portal-body > span:first-child { display: block; }
.aaa-portal-k {
  display: block;
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--aaa-light-ink);
  margin: 0 0 0.25rem;
}
.aaa-portal-n {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 3.6vw, 1.7rem);
  line-height: 1.12;
  margin: 0;
  color: var(--aaa-ink-1);
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
}
.aaa-portal-sub { display: block; font-size: 0.82rem; color: var(--aaa-ink-2); margin: 0.3rem 0 0; }
.aaa-portal-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aaa-light-on);
  background: var(--aaa-light);
  border-radius: 999px;
  padding: 0.72rem 1.2rem;
  min-height: 44px;
  transition: box-shadow var(--aaa-t-quick) var(--aaa-e-settle),
              transform var(--aaa-t-quick) var(--aaa-e-settle);
}
.aaa-portal:hover .aaa-portal-go { box-shadow: 0 0 22px color-mix(in srgb, var(--aaa-light) 55%, transparent); }

/* The doors. Two panels that part when the portal opens. */
.aaa-portal-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(180deg, var(--aaa-night-1), var(--aaa-night-0));
  border-inline: 1px solid color-mix(in srgb, var(--aaa-light) 18%, transparent);
  z-index: 1;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}
.aaa-portal-door.l { left: 0; }
.aaa-portal-door.r { right: 0; }
/* Doors only exist while opening — they are inserted closed and animate away. */
.aaa-portal:not(.is-opening) .aaa-portal-door { display: none; }
.aaa-portal.is-opening .aaa-portal-door.l { animation: aaa-door-l var(--aaa-t-open) var(--aaa-e-door) both; }
.aaa-portal.is-opening .aaa-portal-door.r { animation: aaa-door-r var(--aaa-t-open) var(--aaa-e-door) both; }
@keyframes aaa-door-l { to { transform: translate3d(-100%, 0, 0); } }
@keyframes aaa-door-r { to { transform: translate3d(100%, 0, 0); } }

/* Standard+: the art pushes back in Z on hover. */
.aaa-q-standard .aaa-portal:hover .aaa-portal-art,
.aaa-q-enhanced .aaa-portal:hover .aaa-portal-art { transform: scale(1.04); opacity: 0.75; }

/* --- Chips --- */
.aaa-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid var(--aaa-hairline);
  background: var(--aaa-night-2);
  color: var(--aaa-ink-2);
  white-space: nowrap;
}
.aaa-chip-lit  { color: var(--aaa-light-ink); border-color: color-mix(in srgb, var(--aaa-light) 42%, transparent); background: color-mix(in srgb, var(--aaa-light) 9%, transparent); }
.aaa-chip-cc   { color: var(--aaa-cc); border-color: color-mix(in srgb, var(--aaa-cc) 38%, transparent); }
.aaa-chip-ac   { color: var(--aaa-ac); border-color: color-mix(in srgb, var(--aaa-ac) 38%, transparent); }
.aaa-chip-good { color: var(--aaa-good); border-color: color-mix(in srgb, var(--aaa-good) 38%, transparent); }
.aaa-chip-bad  { color: var(--aaa-danger); border-color: color-mix(in srgb, var(--aaa-danger) 42%, transparent); }
.aaa-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════
   6b. The cabinet — shared between the Lobby rail and the Gallery
   ══════════════════════════════════════════════════════════ */

/* A horizontal rail that scrolls, snaps, and says so on touch. */
.aaa-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 244px);
  gap: 0.85rem;
  overflow-x: auto;
  padding: 0.15rem 0 0.75rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.aaa-rail::-webkit-scrollbar { display: none; }
.aaa-rail > * { scroll-snap-align: start; }
/* A rail reserves a cabinet's height so swapping skeletons for real cabinets
   cannot shift the page. */
.aaa-rail { min-height: 214px; }
.aaa-rail-wrap { position: relative; }
/* Static edge fade — "there is more this way". Not animated. */
.aaa-rail-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0.75rem;
  width: 44px;
  background: linear-gradient(90deg, transparent, var(--aaa-night-1));
  pointer-events: none;
}
.aaa-rail-cue { display: none; color: var(--aaa-light-ink); font-size: 0.72rem; }
@media (max-width: 640px) {
  .aaa-rail { grid-auto-columns: minmax(168px, 74vw); }
  .aaa-rail-cue { display: inline; }
}

/* The cabinet: marquee strip · bezel · screen · control plinth. */
.aaa-cab {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 12px 12px 10px 10px;
  border: 1px solid var(--aaa-hairline);
  background: linear-gradient(180deg, var(--aaa-night-3), var(--aaa-night-1));
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--aaa-t-quick) var(--aaa-e-settle),
              transform var(--aaa-t-move) var(--aaa-e-settle),
              box-shadow var(--aaa-t-move) var(--aaa-e-settle);
}
.aaa-cab:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 3px; }

/* The name strip UNDER the art. Art leads; type follows.
   (The marquee-above-the-screen layout taxed every card with chrome and
   shrank the platform's best asset — 08-FABLE-CRITIQUE.md cause 1.) */
.aaa-cab-marquee {
  position: relative;
  padding: 0.55rem 0.7rem 0.15rem;
}
.aaa-cab-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--aaa-ink-1);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The screen — the real key art, edge to edge, 100% saturation. */
.aaa-cab-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--aaa-night-0);
  overflow: hidden;
}
.aaa-cab-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--aaa-t-open) var(--aaa-e-settle),
              filter var(--aaa-t-open) var(--aaa-e-settle);
}
.aaa-cab-screen .aaa-cab-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  opacity: 0.6;
}
.aaa-q-standard .aaa-cab:hover .aaa-cab-screen img,
.aaa-q-enhanced .aaa-cab:hover .aaa-cab-screen img { filter: saturate(1.12) brightness(1.06); }
.aaa-cab-flag {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 1;
  font-size: 0.6rem;
  padding: 0.2rem 0.5rem;
}

/* The plinth: one quiet line of facts + the action, under the name. */
.aaa-cab-plinth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.1rem 0.7rem 0.6rem;
  font-family: var(--aaa-mono);
  font-size: 0.7rem;
  color: var(--aaa-ink-3);
  font-variant-numeric: tabular-nums;
}
.aaa-cab-go {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--aaa-good);
}

.aaa-q-standard .aaa-cab:hover,
.aaa-q-enhanced .aaa-cab:hover {
  border-color: color-mix(in srgb, var(--aaa-light) 50%, transparent);
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.aaa-q-standard .aaa-cab:hover .aaa-cab-screen img,
.aaa-q-enhanced .aaa-cab:hover .aaa-cab-screen img { transform: scale(1.03); }

/* Premiere: a featured game gets a wider cabinet under a followspot. */
.aaa-cab-premiere { grid-column: span 2; }
.aaa-cab-premiere .aaa-cab-title { font-size: 0.95rem; -webkit-line-clamp: 1; min-height: 0; }
.aaa-cab-premiere .aaa-cab-marquee::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 200% at 50% -60%, color-mix(in srgb, var(--aaa-light) 30%, transparent), transparent 70%);
  pointer-events: none;
}
@media (max-width: 640px) { .aaa-cab-premiere { grid-column: span 1; } }

@media (prefers-reduced-motion: reduce) {
  .aaa-cab, .aaa-cab-screen img { transition: none; }
  .aaa-q-standard .aaa-cab:hover, .aaa-q-enhanced .aaa-cab:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   7. Authored states — closed district, empty locker, dark line
   ══════════════════════════════════════════════════════════ */

.aaa-state {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: clamp(2rem, 8vw, 3.4rem) 1.2rem;
  border: 1px dashed var(--aaa-hairline);
  border-radius: var(--aaa-radius);
  background: linear-gradient(180deg, var(--aaa-night-2), transparent);
}
.aaa-state-prop {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--aaa-light) 26%, transparent);
  background: var(--aaa-night-1);
  color: var(--aaa-light);
}
.aaa-state-prop svg { width: 34px; height: 34px; }
.aaa-state h3 {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aaa-ink-1);
  margin: 0.3rem 0 0;
}
.aaa-state p { margin: 0; max-width: 48ch; font-size: 0.9rem; color: var(--aaa-ink-2); }
.aaa-state-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.5rem; }

/* Closed-district shutter: a real roller shutter, drawn in CSS. */
.aaa-state-shutter .aaa-state-prop {
  background-image: repeating-linear-gradient(180deg,
    hsl(2 20% 14%) 0 3px,
    hsl(2 16% 10%) 3px 6px);
  border-color: color-mix(in srgb, var(--aaa-danger) 40%, transparent);
  color: var(--aaa-danger);
}

/* Skeletons — a loading state that reserves its own space (CLS 0). */
.aaa-skel {
  position: relative;
  overflow: hidden;
  background: var(--aaa-night-2);
  border-radius: 8px;
}
.aaa-q-standard .aaa-skel::after,
.aaa-q-enhanced .aaa-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, hsla(220,20%,44%,0.13), transparent);
  animation: aaa-shim 1.3s var(--aaa-e-lin) infinite;
}
@keyframes aaa-shim { to { transform: translateX(100%); } }

/* ══════════════════════════════════════════════════════════
   7b. Sheet — the detail surface a card expands into
   ══════════════════════════════════════════════════════════ */

.aaa-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: hsla(258,30%,3%,0.74);
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.aaa-sheet-overlay.open { display: flex; }
.aaa-q-standard .aaa-sheet-overlay,
.aaa-q-enhanced .aaa-sheet-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.aaa-sheet {
  width: 100%;
  max-width: 620px;
  max-height: 86vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, var(--aaa-night-3), var(--aaa-night-1));
  border: 1px solid color-mix(in srgb, var(--aaa-light) 28%, var(--aaa-hairline));
  border-bottom: 0;
  border-radius: var(--aaa-radius) var(--aaa-radius) 0 0;
  padding: 0 0 calc(1rem + env(safe-area-inset-bottom));
  animation: aaa-sheet-up var(--aaa-t-open) var(--aaa-e-settle) both;
}
@keyframes aaa-sheet-up { from { transform: translate3d(0, 20px, 0); opacity: 0; } to { transform: none; opacity: 1; } }

.aaa-sheet-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--aaa-hairline);
  background: hsla(258,30%,4%,0.8);
  color: var(--aaa-ink-1);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.aaa-sheet-close:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 2px; }
.aaa-sheet-body { padding: clamp(0.9rem, 3vw, 1.4rem); display: grid; gap: 0.85rem; }

@media (min-width: 641px) {
  .aaa-sheet-overlay { align-items: center; }
  .aaa-sheet { border-radius: var(--aaa-radius); border-bottom: 1px solid color-mix(in srgb, var(--aaa-light) 28%, var(--aaa-hairline)); }
}
@media (prefers-reduced-motion: reduce) { .aaa-sheet { animation: none; } }

/* ══════════════════════════════════════════════════════════
   8. Reveal — the only exuberant motion. Server-confirmed only.
   ══════════════════════════════════════════════════════════ */

.aaa-reveal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 6);
  display: grid;
  place-items: center;
  background: hsla(258,30%,3%,0.7);
  cursor: pointer;
}
.aaa-reveal-card {
  position: relative;
  text-align: center;
  padding: clamp(1.6rem, 6vw, 2.4rem) clamp(1.8rem, 8vw, 3rem);
  max-width: min(92vw, 420px);
  border-radius: var(--aaa-radius);
  border: 1px solid color-mix(in srgb, var(--aaa-mag, var(--aaa-light)) 55%, transparent);
  background: linear-gradient(180deg, var(--aaa-night-3), var(--aaa-night-1));
  box-shadow: 0 14px 60px rgba(0,0,0,0.62),
              0 0 44px color-mix(in srgb, var(--aaa-mag, var(--aaa-light)) 22%, transparent);
  animation: aaa-reveal-pop var(--aaa-t-open) var(--aaa-e-punch) both;
}
@keyframes aaa-reveal-pop { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } }
.aaa-reveal-k {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--aaa-ink-3);
  margin: 0 0 0.5rem;
}
.aaa-reveal-n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 4.4vw, 1.45rem);
  line-height: 1.15;
  margin: 0;
  color: var(--aaa-ink-1);
}
.aaa-reveal-t {
  color: var(--aaa-mag, var(--aaa-light));
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0.35rem 0 0;
}
.aaa-reveal-s { color: var(--aaa-ink-2); font-size: 0.86rem; margin: 0.8rem 0 0; }
/* Staged light bloom behind the card — Enhanced only. */
.aaa-q-enhanced .aaa-reveal-card::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--aaa-mag, var(--aaa-light)) 26%, transparent), transparent 62%);
  animation: aaa-bloom 900ms var(--aaa-e-settle) both;
}
@keyframes aaa-bloom { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
/* Magnitude scales the reveal, so a legendary reads bigger than a common. */
.aaa-mag-1 { --aaa-mag: var(--clr-common); }
.aaa-mag-2 { --aaa-mag: var(--clr-rare); }
.aaa-mag-3 { --aaa-mag: var(--clr-epic); }
.aaa-mag-4 { --aaa-mag: var(--clr-legendary); }

/* Refusal — an action was rejected. */
.aaa-refuse { animation: aaa-refuse var(--aaa-t-tap) var(--aaa-e-lin) 2; }
@keyframes aaa-refuse {
  0%, 100% { transform: translate3d(0,0,0); }
  25%      { transform: translate3d(-4px,0,0); }
  75%      { transform: translate3d(4px,0,0); }
}

/* Arrival — something real entered the page from outside. */
.aaa-arrive { animation: aaa-arrive 240ms var(--aaa-e-settle) both; }
@keyframes aaa-arrive { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }

/* ══════════════════════════════════════════════════════════
   9. Experience controls
   ══════════════════════════════════════════════════════════ */

.aaa-ctl { display: grid; gap: 0.75rem; }
.aaa-ctl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.aaa-ctl-lbl {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aaa-ink-2);
}
.aaa-ctl-lbl small { display: block; font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0; text-transform: none; color: var(--aaa-ink-3); margin-top: 0.15rem; }
.aaa-seg { display: inline-flex; gap: 0.2rem; background: var(--aaa-night-1); border: 1px solid var(--aaa-hairline); border-radius: 999px; padding: 0.22rem; }
.aaa-seg button {
  border: 0;
  background: transparent;
  color: var(--aaa-ink-2);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.7rem;
  min-height: 38px;
  border-radius: 999px;
}
.aaa-seg button[aria-pressed="true"] { background: var(--aaa-light); color: var(--aaa-light-on); }
.aaa-seg button:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 2px; }
.aaa-seg button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════
   10. Accessibility + tier discipline
   ══════════════════════════════════════════════════════════ */

/* An author `display` rule beats the UA's [hidden] rule, so every AAA
   component that sets display must honour the attribute explicitly. */
[hidden] { display: none !important; }

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

/* Skip control for any entrance sequence. Keyboard-reachable, mouse-invisible. */
.aaa-skip {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translate(-50%, -220%);
  z-index: calc(var(--z-modal) + 10);
  background: var(--aaa-light);
  color: var(--aaa-light-on);
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  min-height: 40px;
  cursor: pointer;
}
.aaa-skip:focus-visible { transform: translate(-50%, 0); outline: 2px solid var(--aaa-ink-1); outline-offset: 2px; }

/* Reduced motion: no travel, no stagger, no bloom. State changes still read,
   they just arrive in one step. */
@media (prefers-reduced-motion: reduce) {
  .aaa-enter [data-aaa-band],
  .aaa-enter-cine .aaa-env-far,
  .aaa-enter-cine .aaa-env-mid,
  .aaa-enter-cine .aaa-env-near,
  .aaa-enter .aaa-frame-bulbs::after,
  .aaa-reveal-card,
  .aaa-q-enhanced .aaa-reveal-card::after,
  .aaa-arrive,
  .aaa-refuse,
  .aaa-portal.is-opening .aaa-portal-door.l,
  .aaa-portal.is-opening .aaa-portal-door.r,
  .aaa-q-standard .aaa-skel::after,
  .aaa-q-enhanced .aaa-skel::after {
    animation: none !important;
  }
  .aaa-portal.is-opening .aaa-portal-door { display: none; }
  .aaa-frame-bulbs { opacity: 0.5; }
  body.aaa-exit .page-content,
  body.aaa-exit .aaa-shell { animation: none; opacity: 1; }
  .aaa-portal-art,
  .aaa-portal-go,
  .aaa-venue::before { transition: none; }
}

/* Nothing animates while the tab is hidden. aaa-motion.js sets this class on
   visibilitychange so even CSS-only loops stop costing frames. */
.aaa-hidden-pause *,
.aaa-hidden-pause *::before,
.aaa-hidden-pause *::after { animation-play-state: paused !important; }

/* Segmented controls wrap inside narrow rails instead of clipping. */
.aaa-seg { flex-wrap: wrap; }
.aaa-ctl-row { align-items: start; }


/* ══════════════════════════════════════════════════════════════════════
   The player identity card — shared by every district (lifted from the
   Lobby so the Arcade, Casino and Hall carry the same ID language).
   ══════════════════════════════════════════════════════════════════════ */
/* 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; } }


/* The charge bar's BASE — the shared lift carried the enhancement layer
   (ticks, glow, shine) but not the fill itself. Every district's bar needs
   this, not just the Lobby's. */
.lob-band-xp {
  background: var(--aaa-night-0);
  border: 1px solid var(--aaa-hairline);
  border-color: color-mix(in srgb, var(--aaa-light) 25%, transparent);
}
.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);
}
@media (prefers-reduced-motion: reduce) { .lob-band-xp > i { transition: none; } }


/* ══════════════════════════════════════════════════════════════════════
   District 01 gate vocabulary — shared. Lifted from the Lobby sheet so the
   Arcade's compact gate speaks the same language.
   ══════════════════════════════════════════════════════════════════════ */
.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; }
.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; }
}
.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-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; }


/* The Game Pass marquee on the lobby wears the pass itself: the podium
   painting behind the copy, the plaque card standing on the right. */
.lob-ev.is-vip {
  background:
    linear-gradient(100deg, hsl(280 60% 9% / .94) 0%, hsl(280 60% 9% / .7) 50%, hsl(280 60% 9% / .3) 100%),
    url('/assets/images/passes/gamepass-banner-1024.webp') right center / cover no-repeat,
    hsl(280 60% 8%) !important;
  border-color: hsl(280 85% 66% / .5) !important;
  position: relative; overflow: hidden;
}
.lob-ev.is-vip::after {
  content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(4deg);
  width: 92px; height: 62px; pointer-events: none;
  background: url('/assets/images/passes/gamepass-card-512.webp') center / contain no-repeat;
  filter: drop-shadow(0 0 14px hsl(280 85% 66% / .7));
}