/* ==========================================================
   District 2/3 — The Infinite Cabinet Gallery + The Premiere Wing
   Art direction: docs/aaa-experience/03-ART-DIRECTION.md §2, §3

   A long gallery of cabinets under blacklight. The screens are the only
   bright things in the room. Browsing does not replace the room —
   filtering and searching change the lighting in it.
   ========================================================== */

/* ── The gallery environment: a far wall, not a skyline ─────────────── */

.arc-wall {
  position: absolute;
  inset: auto 0 0 0;
  height: 62vh;
  background:
    /* pooled light from the cabinets along the wall */
    radial-gradient(60% 40% at 16% 100%, color-mix(in srgb, var(--aaa-light) 12%, transparent), transparent 70%),
    radial-gradient(60% 40% at 52% 100%, color-mix(in srgb, var(--aaa-light) 9%, transparent), transparent 70%),
    radial-gradient(60% 40% at 86% 100%, color-mix(in srgb, var(--aaa-light) 12%, transparent), transparent 70%),
    linear-gradient(0deg, hsl(250 30% 5%), transparent 74%);
}
/* Floor rule: where the wall meets the concourse floor. */
.arc-wall::after {
  content: "";
  position: absolute;
  inset: auto 0 22% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--aaa-light) 26%, transparent), transparent);
}
.aaa-q-lite .arc-wall { background: linear-gradient(0deg, hsl(250 30% 5%), transparent 74%); }

/* ── Header ─────────────────────────────────────────────────────────── */

.arc-head { padding: clamp(0.5rem, 2vw, 1rem) 0 0; }
.arc-head .aaa-lede { max-width: 68ch; }

/* ── The cabinet wall ───────────────────────────────────────────────── */

.arc-wallgrid {
  display: grid;
  gap: var(--aaa-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  min-height: 240px;
}

/* Searching does not replace the room: the wall dims and the matches stay
   lit. This is the difference between "filtering a list" and "looking for
   something in a gallery". */
.arc-wallgrid.is-searching .aaa-cab { transition: opacity var(--aaa-t-move) var(--aaa-e-settle), filter var(--aaa-t-move) var(--aaa-e-settle); }
.aaa-cab.is-dim { opacity: 0.16; filter: grayscale(1); pointer-events: none; }
.aaa-q-lite .aaa-cab.is-dim { display: none; }
@media (prefers-reduced-motion: reduce) {
  .arc-wallgrid.is-searching .aaa-cab { transition: none; }
}

/* A cabinet is a button into its own detail, so it needs button reset. */
button.aaa-cab {
  border: 1px solid var(--aaa-hairline);
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  width: 100%;
}

/* Device support: an honest badge, never a broken Play. */
.arc-dev {
  position: absolute;
  right: 0.45rem;
  top: 0.45rem;
  z-index: 1;
  font-size: 0.58rem;
  padding: 0.2rem 0.45rem;
}

/* ── Detail sheet ───────────────────────────────────────────────────── */

.arc-detail-art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--aaa-night-0);
  border-radius: var(--aaa-radius) var(--aaa-radius) 0 0;
}
.arc-detail-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arc-detail-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, hsla(258,32%,4%,0.92) 100%);
}
.arc-detail-name {
  position: absolute;
  left: clamp(0.9rem, 3vw, 1.4rem);
  right: clamp(0.9rem, 3vw, 1.4rem);
  bottom: 0.8rem;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 3.6vw, 1.5rem);
  line-height: 1.12;
  margin: 0;
  color: var(--aaa-ink-1);
  text-shadow: 0 2px 14px rgba(0,0,0,0.9);
}
.arc-detail-desc { color: var(--aaa-ink-2); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.arc-rows { display: flex; flex-direction: column; }
.arc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.62rem 0.1rem;
  border-bottom: 1px solid var(--aaa-hairline);
  font-size: 0.9rem;
}
.arc-row:last-child { border-bottom: 0; }
.arc-row .k { color: var(--aaa-ink-2); }
.arc-row .v { font-weight: 700; text-align: right; font-family: var(--aaa-mono); font-variant-numeric: tabular-nums; }

/* The leaderboard, in the cabinet's own detail — a real reason to care. */
.arc-board { display: grid; gap: 0.2rem; }
.arc-board-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.4rem 0.3rem;
  border-radius: 8px;
  font-size: 0.86rem;
  text-decoration: none;
  color: inherit;
}
.arc-board-row:hover { background: color-mix(in srgb, var(--aaa-light) 8%, transparent); }
.arc-board-row .n { font-family: var(--font-display); font-weight: 800; font-size: 0.68rem; color: var(--aaa-ink-3); }
.arc-board-row:first-child .n { color: var(--aaa-light); }
.arc-board-row .w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-board-row .s { font-family: var(--aaa-mono); font-size: 0.78rem; color: var(--aaa-ink-2); font-variant-numeric: tabular-nums; }

.arc-detail-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.arc-play {
  flex: 1 1 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--aaa-light-on);
  background: var(--aaa-light);
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.4rem;
  min-height: 48px;
  cursor: pointer;
}
.arc-play:hover { color: var(--aaa-light-on); box-shadow: 0 0 22px color-mix(in srgb, var(--aaa-light) 50%, transparent); }
.arc-play:focus-visible { outline: 2px solid var(--aaa-ink-1); outline-offset: 3px; }
.arc-play.is-off { background: var(--aaa-night-3); color: var(--aaa-ink-2); border: 1px solid var(--aaa-hairline); }


/* ══════════════════════════════════════════════════════════════════════
   THE ARCADE — the marquee and the browse engine.
   Built for a floor that holds thousands: the vocabulary scales with the
   catalogue, the controls stay one row, and the DOM never carries more
   than a page of cards.
   ══════════════════════════════════════════════════════════════════════ */

/* ── The marquee: one game, full art, one action ────────────────────── */
.arc-marquee {
  position: relative;
  display: grid;
  overflow: hidden;
  margin-top: var(--aaa-gap);
  border-radius: 16px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--aaa-night-2), var(--aaa-night-0)) padding-box,
    linear-gradient(100deg, color-mix(in srgb, var(--aaa-light) 55%, transparent),
      hsl(250 20% 24% / 0.6) 42%, hsl(280 80% 60% / 0.5)) border-box;
  aspect-ratio: 21 / 8;
  max-height: 420px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
}
.arc-marquee-skel { position: absolute; inset: 0; border-radius: inherit; }
.arc-marquee-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 40%;
}
.arc-marquee-veil {
  position: absolute; inset: 0;
  background: linear-gradient(92deg, hsl(258 32% 4% / 0.94) 0%, hsl(258 32% 4% / 0.62) 38%, transparent 66%);
}
.arc-marquee-body {
  position: relative;
  align-self: end;
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  padding: clamp(1.1rem, 3.6vw, 2.1rem);
  max-width: 62ch;
}
.arc-marquee-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4.8vw, 2.7rem);
  line-height: 1.04;
  margin: 0;
  color: var(--aaa-ink-1);
  text-shadow: 0 3px 22px rgba(0,0,0,0.9);
  text-wrap: balance;
}
.arc-marquee-desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--aaa-ink-2);
  max-width: 52ch;
}
.arc-marquee-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.arc-marquee-play {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 0.4rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  color: var(--aaa-light-on);
  background: var(--aaa-light);
  border: 0; border-radius: 999px;
  padding: 0.85rem 1.6rem; min-height: 48px;
  cursor: pointer;
  transition: box-shadow var(--aaa-t-quick) var(--aaa-e-settle);
}
.arc-marquee-play:hover { color: var(--aaa-light-on); box-shadow: 0 0 28px color-mix(in srgb, var(--aaa-light) 55%, transparent); }
.arc-marquee-play:focus-visible { outline: 2px solid var(--aaa-ink-1); outline-offset: 3px; }
.arc-marquee-access { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--aaa-ink-3); }

/* ── The browse bar ─────────────────────────────────────────────────── */
.arc-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: clamp(1.2rem, 3.5vw, 1.8rem) 0 0.7rem;
}
.arc-search-wrap { position: relative; flex: 1 1 260px; min-width: 0; display: flex; align-items: center; }
.arc-search-ic { position: absolute; left: 1rem; font-size: 1.05rem; color: var(--aaa-ink-3); pointer-events: none; }
.arc-search {
  width: 100%;
  background: var(--aaa-night-1);
  border: 1px solid var(--aaa-hairline);
  border-radius: 999px;
  color: var(--aaa-ink-1);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.75rem 3rem 0.75rem 2.5rem;
  min-height: 48px;
}
.arc-search:focus, .arc-search:focus-visible {
  outline: 2px solid var(--aaa-light); outline-offset: 1px;
  border-color: transparent; box-shadow: none;
}
.arc-kbd {
  position: absolute; right: 0.9rem;
  font-family: var(--aaa-mono); font-size: 0.68rem;
  color: var(--aaa-ink-3);
  border: 1px solid var(--aaa-hairline);
  border-radius: 5px;
  padding: 0.1rem 0.4rem;
  pointer-events: none;
}
.arc-bar-right { display: flex; gap: 0.5rem; align-items: center; flex: 0 0 auto; }
.arc-sort {
  width: auto;
  background: var(--aaa-night-1);
  border: 1px solid var(--aaa-hairline);
  border-radius: 999px;
  color: var(--aaa-ink-1);
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 0.7rem 1rem;
  min-height: 48px;
}
.arc-sort:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 1px; }
.arc-chip-toggle {
  border: 1px solid var(--aaa-hairline);
  background: var(--aaa-night-1);
  color: var(--aaa-ink-2);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.7rem 1.05rem; min-height: 48px;
  cursor: pointer;
  white-space: nowrap;
}
.arc-chip-toggle.is-on { background: var(--aaa-light); border-color: transparent; color: var(--aaa-light-on); }
.arc-chip-toggle:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 2px; }

/* ── The tag taxonomy ───────────────────────────────────────────────── */
.arc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; min-height: 38px; }
.arc-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--aaa-hairline);
  background: var(--aaa-night-1);
  color: var(--aaa-ink-2);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.5rem 0.85rem; min-height: 38px;
  cursor: pointer;
  transition: border-color var(--aaa-t-quick) var(--aaa-e-settle),
              color var(--aaa-t-quick) var(--aaa-e-settle);
}
.arc-tag:hover { border-color: color-mix(in srgb, var(--aaa-light) 50%, transparent); color: var(--aaa-ink-1); }
.arc-tag[aria-pressed="true"] {
  background: var(--aaa-light); border-color: transparent; color: var(--aaa-light-on);
  box-shadow: 0 0 16px color-mix(in srgb, var(--aaa-light) 35%, transparent);
}
.arc-tag:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 2px; }
.arc-tag .n { font-family: var(--aaa-mono); font-size: 0.6rem; opacity: 0.65; font-variant-numeric: tabular-nums; }

/* ── Status + paging ────────────────────────────────────────────────── */
.arc-status { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: var(--aaa-gap); min-height: 24px; }
.arc-count { font-family: var(--aaa-mono); font-size: 0.78rem; color: var(--aaa-ink-3); font-variant-numeric: tabular-nums; }
.arc-clear {
  border: 1px solid color-mix(in srgb, var(--aaa-light) 40%, transparent);
  background: transparent;
  color: var(--aaa-light-ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4rem 0.85rem; min-height: 34px;
  cursor: pointer;
}
.arc-clear:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 2px; }

.arc-more-wrap { display: flex; justify-content: center; margin-top: clamp(1.2rem, 3vw, 1.8rem); }
.arc-more {
  border: 1px solid color-mix(in srgb, var(--aaa-light) 45%, transparent);
  background: var(--aaa-night-1);
  color: var(--aaa-light-ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.85rem 1.8rem; min-height: 48px;
  cursor: pointer;
  transition: box-shadow var(--aaa-t-quick) var(--aaa-e-settle);
}
.arc-more:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--aaa-light) 30%, transparent); }
.arc-more:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 3px; }

@media (max-width: 720px) {
  .arc-marquee { aspect-ratio: 4 / 3; max-height: none; }
  .arc-marquee-veil { background: linear-gradient(180deg, hsl(258 32% 4% / 0.35) 0%, hsl(258 32% 4% / 0.86) 52%, hsl(258 32% 4% / 0.97) 100%); }
  .arc-bar-right { width: 100%; }
  .arc-sort { flex: 1 1 auto; }
  .arc-kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-tag, .arc-more, .arc-marquee-play { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   100x: the room, the turn, and the cards.
   ══════════════════════════════════════════════════════════════════════ */

/* The arcade's own aurora — phosphor green and violet, the colours of a
   room full of screens. Slow, compositor-only, Standard+ only. */
.aaa-d-arcade {
  background:
    radial-gradient(80% 55% at 88% -6%, hsl(160 100% 45% / 0.09), transparent 58%),
    radial-gradient(90% 60% at 8% 100%, hsl(280 80% 55% / 0.09), transparent 60%),
    linear-gradient(180deg, hsl(258 32% 6%) 0%, hsl(252 30% 4%) 50%, hsl(160 22% 4%) 100%);
}
.aaa-d-arcade .aaa-env::before,
.aaa-d-arcade .aaa-env::after {
  content: "";
  position: absolute;
  width: 78vw; height: 78vw;
  border-radius: 50%;
  opacity: 0.17;
  pointer-events: none;
  will-change: transform;
}
.aaa-d-arcade .aaa-env::before {
  right: -22vw; top: -30vw;
  background: radial-gradient(circle, hsl(160 100% 48% / 0.85) 0%, hsl(160 100% 45% / 0.35) 28%, transparent 68%);
}
.aaa-d-arcade .aaa-env::after {
  left: -20vw; bottom: -32vw;
  background: radial-gradient(circle, hsl(280 85% 55% / 0.85) 0%, hsl(280 85% 55% / 0.35) 28%, transparent 68%);
}
.aaa-q-standard .aaa-d-arcade .aaa-env::before,
.aaa-q-enhanced .aaa-d-arcade .aaa-env::before { animation: arc-aur-a 58s ease-in-out infinite alternate; }
.aaa-q-standard .aaa-d-arcade .aaa-env::after,
.aaa-q-enhanced .aaa-d-arcade .aaa-env::after { animation: arc-aur-b 74s ease-in-out infinite alternate; }
@keyframes arc-aur-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(-13vw, 9vw, 0); } }
@keyframes arc-aur-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(11vw, -8vw, 0); } }
.aaa-q-lite .aaa-d-arcade .aaa-env::before,
.aaa-q-lite .aaa-d-arcade .aaa-env::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .aaa-d-arcade .aaa-env::before, .aaa-d-arcade .aaa-env::after { animation: none !important; }
}

/* The marquee turns: the old headline fades out, the new one resolves. */
.arc-marquee.is-turning .arc-marquee-art,
.arc-marquee.is-turning .arc-marquee-body { opacity: 0; }
.arc-marquee-art, .arc-marquee-body { transition: opacity 700ms ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .arc-marquee-art, .arc-marquee-body { transition: none; }
}

/* Cards: a lit frame on hover, and the title takes the room's light. */
.aaa-cab { border-radius: 13px; }
.aaa-q-standard .aaa-cab:hover .aaa-cab-title,
.aaa-q-enhanced .aaa-cab:hover .aaa-cab-title { color: var(--aaa-light-ink); }
.aaa-cab:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 3px; }
/* The screen edge glows like glass catching the room. */
.aaa-cab-screen::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.06);
  pointer-events: none;
}
.aaa-q-standard .aaa-cab:hover .aaa-cab-screen::after,
.aaa-q-enhanced .aaa-cab:hover .aaa-cab-screen::after {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aaa-light) 45%, transparent),
              inset 0 0 26px color-mix(in srgb, var(--aaa-light) 16%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   Phones: the marquee is a poster with the copy under it, and the tag
   taxonomy is a single swipeable rail instead of a wall that buries the
   games. The floor is what people came for — it stays close to the top.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* The headline becomes art + copy stacked; nothing clips. */
  .arc-marquee { aspect-ratio: auto; display: block; }
  .arc-marquee-art {
    position: relative;
    width: 100%; height: auto;
    aspect-ratio: 16 / 9;
    object-position: center 38%;
  }
  .arc-marquee-veil {
    inset: auto 0 0 0;
    height: 62%;
    background: linear-gradient(180deg, transparent, hsl(258 32% 4% / 0.72) 42%, hsl(258 32% 4%) 88%);
  }
  .arc-marquee-body {
    padding: 0.9rem 1rem 1.15rem;
    max-width: none;
    margin-top: -2.6rem;              /* the copy lifts onto the veil */
  }
  .arc-marquee-title { font-size: clamp(1.35rem, 6.6vw, 1.8rem); }
  .arc-marquee-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .arc-marquee-play { width: 100%; justify-content: center; font-size: 0.76rem; padding-inline: 1rem; }

  /* One rail, swipeable, with a fade telling you there is more. */
  .arc-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.2rem;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
            mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .arc-tags::-webkit-scrollbar { display: none; }
  .arc-tag { flex: 0 0 auto; }

  /* Two games per row on a phone — a floor, not a list. */
  .arc-wallgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .aaa-cab-title { font-size: 0.72rem; }
  .aaa-cab-plinth { font-size: 0.62rem; padding-inline: 0.55rem; }
}

/* The stacked marquee must reserve its own height, or the page jumps when
   the headliner resolves. Art (16:9 of the shell) + the copy block. */
@media (max-width: 720px) {
  .arc-marquee { min-height: calc((100vw - 2 * var(--aaa-gutter)) * 0.5625 + 210px); }
  .arc-marquee-skel { position: absolute; inset: 0; }
}


/* ══════════════════════════════════════════════════════════════════════
   100x — the player strip, the uses pips, the Game Pass floor.
   ══════════════════════════════════════════════════════════════════════ */

/* ── The player strip: your ID card + your Pass, side by side ── */
.arc-me {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--aaa-gap);
  margin-top: var(--aaa-gap);
  min-height: 118px;
}
.arc-me-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.4rem 1.1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  border: 1px solid transparent;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--aaa-light) 12%, 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);
}
.arc-me-card:not(.is-in) .lob-band-ring { background: conic-gradient(hsl(250 20% 16%) 0 100%); box-shadow: none; }
.arc-me-card:not(.is-in) .lob-band-lvl { display: none; }
.arc-me-card:not(.is-in) .lob-band-av::before { content: "?"; }
.arc-me-who { display: grid; gap: 0.2rem; align-content: center; }
.arc-me-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--aaa-ink-1);
  text-shadow: 0 0 18px hsla(160,100%,60%,0.3);
}
.arc-me-card:not(.is-in) .arc-me-name { text-transform: none; font-size: 1rem; }
.arc-me-meta { font-size: 0.78rem; color: var(--clr-neon-purple); text-shadow: 0 0 10px hsla(280,80%,55%,0.5); }
.arc-me-card:not(.is-in) .arc-me-meta { color: var(--aaa-ink-2); text-shadow: none; font-family: var(--font-body); font-size: 0.86rem; }
.arc-me-card .lob-band-xp { grid-column: 2 / -1; height: 10px; }
.arc-me-purse { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }

/* The Pass card: active burns member violet; not-a-member offers the door. */
.arc-pass {
  display: grid;
  gap: 0.2rem;
  align-content: center;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  background:
    linear-gradient(120deg, hsl(275 30% 10%), hsl(255 28% 6%) 60%) padding-box,
    linear-gradient(120deg, hsl(275 78% 60% / 0.65), hsl(250 20% 24% / 0.7) 45%, hsl(45 100% 55% / 0.55)) border-box;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
  transition: transform var(--aaa-t-move) var(--aaa-e-settle), box-shadow var(--aaa-t-move) var(--aaa-e-settle);
}
.aaa-q-standard .arc-pass:hover, .aaa-q-enhanced .arc-pass:hover {
  transform: translate3d(0,-3px,0);
  box-shadow: 0 14px 40px rgba(0,0,0,0.6), 0 0 30px hsl(275 78% 60% / 0.25);
}
.arc-pass:focus-visible { outline: 2px solid hsl(275 78% 62%); outline-offset: 3px; }
.arc-pass-k { font-family: var(--font-display); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: hsl(280 85% 78%); }
.arc-pass-v { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--aaa-ink-1); }
.arc-pass.is-active .arc-pass-v { color: hsl(275 90% 78%); text-shadow: 0 0 16px hsl(275 78% 60% / 0.5); }
.arc-pass-sub { font-size: 0.8rem; line-height: 1.4; color: var(--aaa-ink-2); }
.arc-pass-cta {
  justify-self: start; margin-top: 0.4rem;
  font-family: var(--font-display); font-weight: 800; font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: hsl(278 80% 8%);
  background: linear-gradient(100deg, hsl(275 78% 62%), hsl(45 100% 60%));
  border-radius: 999px; padding: 0.5rem 1rem; min-height: 36px;
  display: inline-flex; align-items: center;
  box-shadow: 0 0 16px hsl(275 78% 60% / 0.3);
}
.arc-pass.is-active .arc-pass-cta { background: var(--aaa-night-2); color: var(--aaa-ink-1); border: 1px solid hsl(275 78% 60% / 0.5); box-shadow: none; }

/* ── The uses pips: today's plays, on every card ── */
.aaa-cab { position: relative; }
.arc-uses {
  position: absolute; left: 0.5rem; bottom: 2.85rem;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: hsl(258 30% 5% / 0.82);
  border: 1px solid hsl(160 100% 50% / 0.35);
  font-family: var(--aaa-mono); font-size: 0.62rem; font-weight: 700;
  color: var(--aaa-ink-2);
}
.arc-uses i { width: 6px; height: 6px; border-radius: 50%; background: hsl(250 20% 22%); }
.arc-uses i.on, .arc-uses.is-guest i { background: hsl(160 100% 55%); box-shadow: 0 0 6px hsl(160 100% 55%); }
.arc-uses.is-pass i.on { background: hsl(275 90% 68%); box-shadow: 0 0 6px hsl(275 90% 68%); }
.arc-uses.is-pass { border-color: hsl(275 78% 60% / 0.5); }
.arc-uses b { margin-left: 3px; color: var(--aaa-ink-1); }
.arc-uses.is-guest b { color: var(--aaa-ink-2); }
.arc-uses.is-ac { border-color: hsl(185 100% 55% / 0.5); color: var(--aaa-ac); }
.arc-uses.is-ac b { color: var(--aaa-ac); }
.arc-uses.is-out { border-color: var(--aaa-hairline); color: var(--aaa-ink-3); }
.arc-uses.is-out b { color: var(--aaa-ink-3); }
.arc-uses.is-loading i { animation: arc-pip 1.1s ease-in-out infinite alternate; }
@keyframes arc-pip { from { opacity: 0.25; } to { opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) { .arc-uses.is-loading i { animation: none; } }

/* ── The Game Pass floor rail ── */
.arc-prem-rail { grid-auto-columns: minmax(230px, 262px); }
.arc-prem-card {
  border-color: hsl(275 78% 60% / 0.4) !important;
  background: linear-gradient(180deg, hsl(275 30% 12%), hsl(255 28% 6%)) !important;
}
.arc-prem-flag { background: linear-gradient(100deg, hsl(275 78% 62%), hsl(45 100% 60%)) !important; color: hsl(278 80% 8%) !important; border-color: transparent !important; }
.arc-prem-facts { display: grid; gap: 0.15rem; padding: 0.1rem 0.7rem 0.65rem; font-family: var(--aaa-mono); font-size: 0.68rem; color: var(--aaa-ink-2); }
.arc-prem-facts b { color: hsl(275 90% 78%); }
.arc-prem-card .arc-uses { display: none; }

@media (max-width: 900px) { .arc-me { grid-template-columns: 1fr; min-height: 0; } }
@media (max-width: 640px) {
  .arc-me-card { grid-template-columns: auto minmax(0, 1fr); }
  .arc-me-purse { grid-column: 1 / -1; justify-content: flex-start; }
  .arc-uses { bottom: 2.6rem; font-size: 0.56rem; padding: 0.22rem 0.45rem; }
}
.arc-uses.is-open { border-color: hsl(160 100% 50% / 0.35); }
.arc-uses.is-open b { color: hsl(160 100% 70%); }

/* The strip's charge bar spans the whole card under everything. */
.arc-me-card { grid-template-rows: auto auto; }
.arc-me-card .lob-band-xp { grid-column: 1 / -1; margin-top: 0.4rem; }




/* ══════════════════════════════════════════════════════════════════════
   10x — Your floor: jump back in, your boards, today's board.
   Three holo cards under the marquee that make the arcade YOURS.
   ══════════════════════════════════════════════════════════════════════ */
.arc-you { margin-top: var(--aaa-gap); }
.arc-you-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--aaa-gap);
  min-height: 190px;
}
.arc-you-card {
  position: relative;
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(180deg, hsl(252 26% 9%), hsl(255 28% 6%)) padding-box,
    linear-gradient(150deg, hsla(160,100%,50%,0.5), hsla(250,20%,22%,0.6) 40%,
      hsla(250,20%,22%,0.6) 60%, 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);
  min-height: 190px;
}
.arc-you-k {
  font-family: var(--font-display); font-size: 0.55rem; font-weight: 800;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--aaa-light-ink);
  text-shadow: 0 0 12px color-mix(in srgb, var(--aaa-light) 50%, transparent);
}

/* Jump back in: your last game as a poster you can tap. */
.arc-you-resume { padding: 0; overflow: hidden; isolation: isolate; }
.arc-you-resume .arc-you-k { position: absolute; top: 0.85rem; left: 1rem; z-index: 2; }
.arc-you-art { position: absolute; inset: 0; z-index: 0; }
.arc-you-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--aaa-t-open) var(--aaa-e-settle); }
.arc-you-resume::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, hsl(258 32% 4% / 0.55) 0%, transparent 32%, hsl(258 32% 4% / 0.9) 100%);
}
.arc-you-resume .arc-you-v,
.arc-you-resume .arc-you-sub,
.arc-you-resume .arc-you-cta { position: relative; z-index: 2; margin-left: 1rem; }
.arc-you-resume .arc-you-v {
  margin-top: auto;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; line-height: 1.1;
  color: var(--aaa-ink-1); text-shadow: 0 2px 14px rgba(0,0,0,0.9);
}
.arc-you-resume .arc-you-sub { font-family: var(--aaa-mono); font-size: 0.7rem; color: var(--aaa-ink-2); }
.arc-you-resume .arc-you-cta {
  justify-self: start; margin: 0.35rem 0 1rem 1rem;
  font-family: var(--font-display); font-weight: 800; font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--aaa-light-on); background: var(--aaa-light);
  border-radius: 999px; padding: 0.5rem 1rem; min-height: 36px;
  display: inline-flex; align-items: center;
  box-shadow: 0 0 18px color-mix(in srgb, var(--aaa-light) 40%, transparent);
}
.aaa-q-standard .arc-you-resume:hover .arc-you-art img,
.aaa-q-enhanced .arc-you-resume:hover .arc-you-art img { transform: scale(1.05); }
.arc-you-resume:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 3px; }

/* Rows: boards and missions. */
.arc-you-rows { display: grid; gap: 0.3rem; }
.arc-you-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0.55rem;
  border-radius: 9px;
  border: 1px solid transparent;
  background: hsl(250 22% 10% / 0.6);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.arc-you-row.is-mission { cursor: default; grid-template-rows: auto auto; }
button.arc-you-row:hover { border-color: color-mix(in srgb, var(--aaa-light) 45%, transparent); background: color-mix(in srgb, var(--aaa-light) 7%, transparent); }
.arc-you-row:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 2px; }
.arc-you-row .w { font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-you-row .s { font-family: var(--aaa-mono); font-size: 0.74rem; color: var(--aaa-cc); font-variant-numeric: tabular-nums; }
.arc-you-row .r {
  font-family: var(--font-display); font-weight: 800; font-size: 0.62rem;
  color: var(--aaa-ink-3); min-width: 2.2rem; text-align: right;
}
.arc-you-row .r.is-top { color: hsl(45 100% 62%); text-shadow: 0 0 8px hsla(45,100%,55%,0.5); }
.arc-you-row.is-done .r { color: var(--aaa-good); }
.arc-you-bar {
  grid-column: 1 / -1;
  height: 4px; border-radius: 2px;
  background: var(--aaa-night-0);
  overflow: hidden;
}
.arc-you-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);
}
.arc-you-empty { margin: 0; font-size: 0.82rem; color: var(--aaa-ink-3); line-height: 1.45; }

@media (max-width: 900px) {
  .arc-you-grid { grid-template-columns: 1fr 1fr; }
  .arc-you-resume { grid-column: 1 / -1; min-height: 210px; }
}
@media (max-width: 560px) {
  .arc-you-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .arc-you-art img { transition: none; } }


/* Resume poster polish: copy owns the bottom on a real veil, the action is
   a pill (not a bar), and the kicker sits in the top-left corner. */
.arc-you-resume { padding: 0 1rem 1rem; }
.arc-you-resume::after {
  background: linear-gradient(180deg, hsl(258 32% 4% / 0.45) 0%, hsl(258 32% 4% / 0.05) 28%,
    hsl(258 32% 4% / 0.78) 62%, hsl(258 32% 4% / 0.96) 100%);
}
.arc-you-resume .arc-you-v,
.arc-you-resume .arc-you-sub,
.arc-you-resume .arc-you-cta { margin-left: 0; }
.arc-you-resume .arc-you-cta { align-self: flex-start; margin: 0.45rem 0 0; }
.arc-you-resume .arc-you-sub { margin-top: 0.15rem; }








/* ══════════════════════════════════════════════════════════════════════
   GEOMETRY — one place, measured, authoritative.
   Every async region owns its final size from the first frame so nothing
   below it moves when the data lands. Numbers are the measured signed-in
   render at desktop; narrow layouts stack and re-reserve.
   ══════════════════════════════════════════════════════════════════════ */

/* The player strip: card + pass, both 128px on desktop, side by side. */
.arc-me { min-height: 128px; }
.arc-me-card {
  height: 128px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
}
.arc-me-card:not(.is-in) { grid-template-rows: auto; }
.arc-me-card > .lob-band-xp { grid-row: 2; grid-column: 1 / -1; margin-top: 0.55rem; }
.arc-me-card:not(.is-in) > .lob-band-xp { display: none; }
.arc-me-card .lob-band-ring { width: 72px; height: 72px; flex: 0 0 72px; }
.arc-me-who { min-height: 0; align-content: center; }
.arc-me-meta { min-height: 0; line-height: 1.3; }
.arc-me-purse { min-height: 44px; align-items: center; }
.arc-pass { height: 128px; }

/* Your floor: three 240px cards; reserved for everyone until auth says
   guest, then collapses once, knowingly, above the fold. */
.arc-you { min-height: 240px; }
.arc-you.is-pending { visibility: hidden; }
.arc-you.is-pending .arc-you-grid { display: none; }
.arc-you-grid { height: 240px; }
.arc-you-card { height: 240px; overflow: hidden; }
.arc-you-rows { max-height: 168px; overflow: hidden; }
.arc-you-resume { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 1rem 1rem; }
.arc-you-resume .arc-you-v { margin: 0; }
.arc-you-resume .arc-you-sub { margin: 0.15rem 0 0; }
.arc-you-resume .arc-you-cta { align-self: flex-start; margin: 0.45rem 0 0; }
.arc-you-resume::after {
  background: linear-gradient(180deg, hsl(258 32% 4% / 0.45) 0%, hsl(258 32% 4% / 0.05) 28%,
    hsl(258 32% 4% / 0.78) 62%, hsl(258 32% 4% / 0.96) 100%);
}

/* The wall never collapses below one row while it re-renders. */
.arc-wallgrid { min-height: 300px; }

/* Stacked layouts. */
@media (max-width: 900px) {
  .arc-me { min-height: calc(190px + var(--aaa-gap) + 165px); align-content: start; }
  .arc-me-card { height: auto; min-height: 190px; }
  .arc-pass { height: auto; min-height: 165px; }
  .arc-you, .arc-you.is-pending { min-height: calc(210px + 2 * var(--aaa-gap) + 2 * 240px); }
  .arc-you-grid, .arc-you-card { height: auto; }
  .arc-you-resume { min-height: 210px; }
}
@media (max-width: 720px) {
  .arc-marquee { min-height: calc((100vw - 2 * var(--aaa-gutter)) * 0.5625 + 330px); }
}


/* ══════════════════════════════════════════════════════════════════════
   The six: Load AC, Redemption door, pfp on the ring, cards that pop,
   uses that pop, the District 01 door.
   ══════════════════════════════════════════════════════════════════════ */

/* 1+2. Action row on the player card — real doors, not chips. */
.arc-me-card { grid-template-rows: auto auto auto; height: auto; min-height: 150px; }
.arc-me-acts { grid-row: 3; grid-column: 1 / -1; display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.55rem; }
.arc-me-card:not(.is-in) { min-height: 128px; }
.arc-act {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-display); font-weight: 800; font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 999px; padding: 0.55rem 1rem; min-height: 40px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: box-shadow var(--aaa-t-quick) var(--aaa-e-settle), transform var(--aaa-t-quick) var(--aaa-e-settle);
}
.arc-act:focus-visible { outline: 2px solid var(--aaa-ink-1); outline-offset: 2px; }
.arc-act-ac {
  color: hsl(190 90% 8%);
  background: linear-gradient(100deg, hsl(185 100% 62%), hsl(200 100% 55%));
  box-shadow: 0 0 18px hsl(185 100% 55% / 0.35);
}
.arc-act-redeem {
  color: hsl(45 90% 12%);
  background: linear-gradient(100deg, hsl(45 100% 62%), hsl(38 100% 52%));
  box-shadow: 0 0 18px hsl(45 100% 55% / 0.35);
}
.aaa-q-standard .arc-act:hover, .aaa-q-enhanced .arc-act:hover { transform: translate3d(0,-2px,0); }
.arc-act-ac:hover { box-shadow: 0 0 28px hsl(185 100% 55% / 0.55); }
.arc-act-redeem:hover { box-shadow: 0 0 28px hsl(45 100% 55% / 0.55); }
.arc-me { min-height: 150px; }
.arc-pass { height: auto; min-height: 150px; }

/* 3. The pfp on the ring — mounted avatars fill it edge to edge. */
.arc-me-card .lob-band-av { overflow: hidden; }
.arc-me-card .lob-band-av img, .arc-me-card .lob-band-av canvas, .arc-me-card .lob-band-av svg {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
}

/* 4. Cards that pop: a real hover lift, the art brightens and grows, the
   title takes the light, and a play-glyph rises out of the poster. */
.aaa-cab { 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); }
.aaa-q-standard .aaa-cab:hover, .aaa-q-enhanced .aaa-cab:hover {
  transform: translate3d(0, -6px, 0) scale(1.015);
  box-shadow: 0 18px 44px rgba(0,0,0,0.6), 0 0 34px color-mix(in srgb, var(--aaa-light) 30%, transparent);
  border-color: color-mix(in srgb, var(--aaa-light) 65%, transparent);
}
.aaa-q-standard .aaa-cab:hover .aaa-cab-screen img,
.aaa-q-enhanced .aaa-cab:hover .aaa-cab-screen img { transform: scale(1.06); filter: saturate(1.18) brightness(1.08); }
.aaa-cab-screen::before {
  content: "▶";
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -40%) scale(0.85);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.1rem; padding-left: 4px;
  color: var(--aaa-light-on); background: var(--aaa-light);
  box-shadow: 0 0 26px color-mix(in srgb, var(--aaa-light) 70%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity var(--aaa-t-quick) var(--aaa-e-settle), transform var(--aaa-t-move) var(--aaa-e-settle);
}
.aaa-q-standard .aaa-cab:hover .aaa-cab-screen::before,
.aaa-q-enhanced .aaa-cab:hover .aaa-cab-screen::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.aaa-cab-go { transition: color var(--aaa-t-quick) var(--aaa-e-settle), text-shadow var(--aaa-t-quick) var(--aaa-e-settle); }
.aaa-q-standard .aaa-cab:hover .aaa-cab-go, .aaa-q-enhanced .aaa-cab:hover .aaa-cab-go { text-shadow: 0 0 10px var(--aaa-good); }

/* 5. Uses that pop: bigger pips with real glow, a bolder count, and the
   pill sits ON the art in the poster's lower-left as a real HUD element. */
.arc-uses {
  left: 0.6rem; bottom: 3.05rem;
  gap: 4px; padding: 0.36rem 0.7rem;
  background: hsl(258 30% 5% / 0.88);
  border-width: 1.5px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 14px color-mix(in srgb, var(--aaa-light) 20%, transparent);
  font-size: 0.68rem;
}
.arc-uses i { width: 8px; height: 8px; }
.arc-uses i.on, .arc-uses.is-guest i { box-shadow: 0 0 8px hsl(160 100% 55%), 0 0 2px #fff inset; }
.arc-uses.is-pass i.on { box-shadow: 0 0 8px hsl(275 90% 68%), 0 0 2px #fff inset; }
.arc-uses.is-pass { box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 16px hsl(275 78% 60% / 0.35); }
.arc-uses.is-ac { box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 16px hsl(185 100% 55% / 0.35); }
.arc-uses.is-open b { text-shadow: 0 0 10px hsl(160 100% 55% / 0.6); }
.arc-uses b { font-size: 0.7rem; letter-spacing: 0.02em; }

/* 6. The District 01 door, compact. */
.arc-gate { margin-top: var(--aaa-gap); }
.arc-gate-scene {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 250px; border-radius: 16px; overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(120deg, hsl(258 32% 7%), hsl(256 30% 4%) 55%) padding-box,
    linear-gradient(100deg, hsl(185 100% 55% / 0.55), hsl(250 20% 24% / 0.6) 40%, hsl(280 80% 60% / 0.55)) border-box;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
}
.arc-gate-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 78%; z-index: 0; }
.arc-gate-scene::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(94deg, hsl(258 32% 5% / 0.9) 0%, hsl(258 32% 5% / 0.6) 34%, transparent 58%);
}
.arc-gate-copy { position: relative; z-index: 1; display: grid; gap: 0.35rem; align-content: center; justify-items: start; padding: clamp(1rem, 3vw, 1.6rem); }
/* The New Snack City Online wordmark, in the slot the text brand held. */
.arc-gate-copy .lob-gate-logo { display: block; width: clamp(150px, 26vw, 200px); height: auto; margin: 0 0 0.1rem; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6)); }
.arc-gate-t { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.82rem, 1.8vw, 0.96rem); letter-spacing: 0.08em; text-transform: uppercase; color: hsl(45 95% 68%); margin: 0.2rem 0 0; }
.arc-gate-sub { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--aaa-ink-2); max-width: 40ch; }
.arc-gate .lob-gate-status { margin-top: 0.5rem; }
@media (max-width: 720px) {
  .arc-gate-scene { grid-template-columns: 1fr; min-height: 0; }
  .arc-gate-art { position: relative; height: auto; aspect-ratio: 820 / 428; object-position: 74% 30%; }
  .arc-gate-scene::after { display: none; }
  .arc-gate-copy { order: -1; }
  .arc-me-acts .arc-act { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .aaa-cab, .aaa-cab-screen::before, .arc-act { transition: none; }
  .aaa-cab:hover { transform: none; }
}

/* Stacked reservations re-measured with the action row in place:
   card 285 · pass 165 · you 717 · gate 411 (portrait phone). */
@media (max-width: 900px) {
  .arc-me { min-height: calc(285px + var(--aaa-gap) + 165px); }
  .arc-me-card { min-height: 285px; }
  .arc-me-card:not(.is-in) { min-height: 285px; }
  .arc-you, .arc-you.is-pending { min-height: 717px; }
  .arc-gate-scene { min-height: 411px; }
}

/* Desktop reservations, measured with the action row: strip 186, gate 253,
   Your floor cards 342 (three rows + header at their real line-height —
   forcing 240 was clipping content). Reserve to what actually renders. */
@media (min-width: 901px) {
  .arc-me, .arc-me-card, .arc-pass { min-height: 186px; height: 186px; }
  .arc-me-card:not(.is-in) { height: 186px; }
  .arc-you, .arc-you.is-pending, .arc-you-grid, .arc-you-card { min-height: 342px; height: 342px; }
  .arc-you-rows { max-height: none; }
  .arc-gate-scene { min-height: 253px; }
}

/* Stop the height ratchet: Your-floor cards size to content; only the
   SECTION reserves. The skeleton is now the exact shape of three rows, so
   the swap inside the card moves nothing. */
@media (min-width: 901px) {
  .arc-you-card { height: auto; min-height: 0; }
  .arc-you-grid { height: auto; min-height: 0; }
  .arc-you, .arc-you.is-pending { min-height: 236px; height: auto; }
}
.arc-you-rows > .aaa-skel + .aaa-skel { margin-top: 0.3rem; }


/* ══════════════════════════════════════════════════════════════════════
   PLAYS — the player can always see what they have, what they used, and
   what the real path to more is. Every figure is the server's own
   session/status snapshot; nothing here is inferred.
   ══════════════════════════════════════════════════════════════════════ */

/* The floor-wide count, on the player card. */
.arc-plays {
  grid-row: 3; grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 0.55rem; padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--aaa-good) 32%, transparent);
  background: linear-gradient(100deg, hsl(160 90% 45% / 0.14), transparent 70%);
}
.arc-plays > b {
  font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1;
  color: var(--aaa-good); text-shadow: 0 0 16px hsl(160 100% 55% / 0.55);
  font-variant-numeric: tabular-nums;
}
.arc-plays-w { display: grid; line-height: 1.25; }
.arc-plays-t {
  font-family: var(--font-display); font-weight: 800; font-size: 0.56rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--aaa-ink-2);
}
.arc-plays-s { font-family: var(--aaa-mono); font-size: 0.68rem; color: var(--aaa-ink-3); }
.arc-plays.is-empty { border-color: var(--aaa-hairline); background: hsl(250 22% 10% / 0.6); }
.arc-plays.is-empty > b { color: var(--aaa-ink-3); text-shadow: none; }

/* With the count present the card carries four rows. */
.arc-me-acts { grid-row: 4; }

/* The per-game ledger inside the detail sheet. */
.arc-plays-box {
  display: grid; gap: 0.4rem; justify-items: start;
  padding: 0.85rem 1rem; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--aaa-good) 30%, transparent);
  background: linear-gradient(140deg, hsl(160 90% 45% / 0.1), hsl(250 22% 9% / 0.7) 60%);
}
.arc-plays-box.is-pass { border-color: hsl(275 78% 62% / 0.45); background: linear-gradient(140deg, hsl(275 80% 55% / 0.14), hsl(250 22% 9% / 0.7) 60%); }
.arc-plays-box.is-out { border-color: var(--aaa-hairline); background: hsl(250 22% 9% / 0.7); }
.arc-plays-box.is-gated { border-color: hsl(35 90% 55% / 0.45); background: linear-gradient(140deg, hsl(35 90% 50% / 0.12), hsl(250 22% 9% / 0.7) 60%); }
.arc-plays-k {
  margin: 0; display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 800; font-size: 0.56rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--aaa-ink-2);
}
.arc-plays-k em {
  font-style: normal; font-size: 0.5rem; letter-spacing: 0.14em;
  padding: 0.2rem 0.45rem; border-radius: 999px;
  color: var(--aaa-light-on); background: var(--aaa-light);
}
.arc-plays-box.is-pass .arc-plays-k em { background: hsl(275 80% 62%); color: #fff; }
.arc-plays-big { margin: 0; font-family: var(--font-display); font-size: 0.95rem; color: var(--aaa-ink-1); }
.arc-plays-big b { font-size: 1.5rem; color: var(--aaa-good); text-shadow: 0 0 16px hsl(160 100% 55% / 0.5); }
.arc-plays-box.is-pass .arc-plays-big b { color: hsl(275 85% 72%); text-shadow: 0 0 16px hsl(275 90% 65% / 0.5); }
.arc-plays-box.is-out .arc-plays-big b { color: var(--aaa-ink-3); text-shadow: none; }
.arc-plays-line { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--aaa-ink-2); }
.arc-plays-line b { color: var(--aaa-ink-1); }
.arc-plays-line a { color: var(--aaa-light-ink); }
.arc-plays-fine { margin: 0; font-size: 0.76rem; line-height: 1.45; color: var(--aaa-ink-3); }
.arc-plays-fine b { color: var(--aaa-ac); }
.arc-plays-pips { display: inline-flex; gap: 5px; }
.arc-plays-pips i { width: 10px; height: 10px; border-radius: 50%; background: hsl(250 18% 26%); }
.arc-plays-pips i.on { background: var(--aaa-good); box-shadow: 0 0 9px hsl(160 100% 55%), 0 0 2px #fff inset; }
.arc-plays-box.is-pass .arc-plays-pips i.on { background: hsl(275 85% 66%); box-shadow: 0 0 9px hsl(275 90% 65%), 0 0 2px #fff inset; }
.arc-plays-cta {
  display: inline-flex; align-items: center; min-height: 38px;
  margin-top: 0.15rem; padding: 0.5rem 1rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 800; font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: linear-gradient(100deg, hsl(275 80% 55%), hsl(300 75% 52%));
  box-shadow: 0 0 18px hsl(275 80% 55% / 0.4);
}

/* Spent pips read as spent — hollow, not missing. */
.arc-uses i.off { background: hsl(250 18% 24%); box-shadow: none; }

/* The server grants this game no plays: amber, never green. */
.arc-uses.is-gated {
  border-color: hsl(35 90% 55% / 0.6);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 14px hsl(35 90% 55% / 0.3);
}
.arc-uses.is-gated b { color: hsl(35 95% 66%); }
.arc-uses.is-out b { color: var(--aaa-ink-2); }

/* The plays count adds a row; portrait card re-measured at 340. */
@media (max-width: 900px) {
  .arc-me { min-height: calc(340px + var(--aaa-gap) + 165px); }
  .arc-me-card, .arc-me-card:not(.is-in) { min-height: 340px; }
}

/* A returning player's card holds the plays slot from the first frame, so the
   count arriving never reflows the rows above or below it. Guests never see
   the slot at all — body.arc-known is set synchronously from the restored
   session before first paint. */
.arc-known .arc-plays[hidden],
.arc-known .arc-me-acts[hidden] { display: inline-flex; visibility: hidden; }
.arc-known .arc-plays[hidden] { min-height: 40px; }

/* The guest→signed-in swap was the last portrait shift: the purse turns from
   one Sign-in button into three currency pills and the identity line gains a
   second row. Reserve both at their measured signed-in size for a returning
   player, so auth landing changes content but never geometry. */
@media (max-width: 900px) {
  .arc-known .arc-me-who { min-height: 65px; }
  .arc-known .arc-me-purse { min-height: 44px; }
  .arc-known .arc-me-acts, .arc-known .arc-me-acts[hidden] { min-height: 88px; }
}


/* ══════════════════════════════════════════════════════════════════════
   FLAGSHIP — a full game rather than an arcade round. No free daily plays;
   a Game Pass or Arcade Credits open it. Read as a door, never as a fault.
   ══════════════════════════════════════════════════════════════════════ */
.arc-uses.is-flagship {
  border-color: hsl(275 80% 65% / 0.6);
  background: linear-gradient(100deg, hsl(275 70% 22% / 0.95), hsl(258 30% 6% / 0.92) 70%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 18px hsl(275 85% 60% / 0.4);
}
.arc-uses.is-flagship b { color: hsl(275 95% 82%); }
.arc-uses.is-flagship b + b { color: var(--aaa-ac); }
.arc-uses.is-flagship .ac-icon { margin-left: 2px; }

.arc-plays-box.is-flagship {
  border-color: hsl(275 80% 62% / 0.5);
  background: linear-gradient(140deg, hsl(275 80% 55% / 0.18), hsl(45 90% 55% / 0.06) 45%, hsl(250 22% 9% / 0.75) 75%);
}
.arc-plays-box.is-flagship .arc-plays-k em { background: linear-gradient(100deg, hsl(275 80% 60%), hsl(300 75% 55%)); color: #fff; }

/* The floor's card wears a quiet flagship mark so the tier reads at a glance. */
.aaa-cab.is-flagship-card {
  border-color: color-mix(in srgb, hsl(275 85% 62%) 45%, transparent);
}
.aaa-q-standard .aaa-cab.is-flagship-card:hover,
.aaa-q-enhanced .aaa-cab.is-flagship-card:hover {
  box-shadow: 0 18px 44px rgba(0,0,0,0.6), 0 0 34px hsl(275 85% 62% / 0.45);
  border-color: hsl(275 85% 66% / 0.8);
}

/* Inline sign-in trigger inside prose (the Arcade plays card): looks like the
   link it replaced, but opens the auth modal instead of a page that never
   existed. */
.arc-link-btn { padding: 0; background: none; border: none; cursor: pointer; font: inherit; color: hsl(45 100% 60%); text-decoration: underline; text-underline-offset: 3px; }


/* The Arcade's Game Pass card wears the pass. */
.arc-pass {
  background:
    linear-gradient(100deg, hsl(280 60% 9% / .94) 0%, hsl(280 60% 9% / .72) 55%, hsl(280 60% 9% / .35) 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;
}
.arc-pass::after {
  content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(4deg);
  width: 84px; height: 56px; pointer-events: none;
  background: url('/assets/images/passes/gamepass-card-512.webp') center / contain no-repeat;
  filter: drop-shadow(0 0 12px hsl(280 85% 66% / .7));
}

/* The rule + the plaque on the Legends entry card. */
.lg-member-rule {
  display: flex; align-items: center; gap: .5rem; margin-top: .5rem;
  font-size: .68rem; color: hsl(0 0% 100% / .55);
}
.lg-member-rule img { width: 34px; height: auto; }