/* ============================================================================
   ILLUMINATED ASCENT — shared component layer for the mockup-driven redesign.
   Source of truth: design-assets/arcade-page-mockups (owner-approved 2026-07-21)
   in the Clever workspace; build contract: docs/design/ILLUMINATED_ASCENT_SPEC.md.
   Light theme is primary (mockups); dark theme maps to the celestial stage.
   ========================================================================= */

:root {
  /* Inks & grounds */
  --ia-ink: #1A1A2E;
  --ia-stage: #10142B;
  --ia-canvas: #F5EFE2;
  --ia-parchment: #EDE3CE;
  --ia-paper: #FFFDF8;

  /* Golds */
  --ia-gold-hi: #F7DE9C;
  --ia-gold-action-1: #E8C66D;
  --ia-gold-action-2: #C9A032;
  --ia-gold-line: #B8922A;
  --ia-gold-wash: #F4E7C3;
  --ia-gold-ink: #725811;

  /* Jewel quartet */
  --ia-garnet: #9E2B25;
  --ia-sapphire: #24406E;
  --ia-emerald: #2F5D46;
  --ia-bronze: #8A6B3F;

  /* Engraving */
  --ia-etch: rgba(138, 107, 69, 0.55);
  --ia-etch-soft: rgba(138, 107, 69, 0.32);

  --ia-shadow-tight: 0 1px 2px rgba(26, 26, 46, 0.08);
  --ia-shadow-soft: 0 18px 44px rgba(26, 26, 46, 0.10);
  --ia-radius-card: 12px;
  --ia-radius-plate: 10px;
}

html[data-theme="dark"], body.public-arcade-theme--dark {
  --ia-canvas: #10142B;
  --ia-parchment: #171C38;
  --ia-paper: #1C2240;
  --ia-ink: #F5EFE2;
  --ia-etch: rgba(198, 168, 138, 0.5);
  --ia-etch-soft: rgba(198, 168, 138, 0.3);
  --ia-shadow-tight: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ia-shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* --- 1. Section eyebrow: letterspaced small caps flanked by gold sparks --- */
.ia-eyebrow {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .8rem;
  color: var(--ia-gold-ink);
  font: 700 .72rem/1.4 "JetBrains Mono", monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.ia-eyebrow::before, .ia-eyebrow::after {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ia-gold-line));
}
.ia-eyebrow::after { background: linear-gradient(90deg, var(--ia-gold-line), transparent); }
.ia-eyebrow--spark::before { content: "✦"; width: auto; height: auto; background: none; font-size: .6rem; }
.ia-eyebrow--spark::after { content: "✦"; width: auto; height: auto; background: none; font-size: .6rem; }

/* --- 2. Torn parchment edge (deckle) between section grounds --- */
.ia-deckle {
  position: relative;
  height: 26px;
  background: inherit;
}
.ia-deckle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L28 8 L57 15 L91 6 L128 14 L166 9 L204 16 L241 7 L279 13 L318 5 L356 15 L397 8 L438 14 L480 6 L523 12 L568 7 L611 15 L655 9 L698 14 L742 6 L787 13 L830 8 L874 15 L917 7 L959 12 L1002 6 L1045 14 L1088 8 L1131 13 L1170 9 L1200 12 L1200 26 L0 26 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L28 8 L57 15 L91 6 L128 14 L166 9 L204 16 L241 7 L279 13 L318 5 L356 15 L397 8 L438 14 L480 6 L523 12 L568 7 L611 15 L655 9 L698 14 L742 6 L787 13 L830 8 L874 15 L917 7 L959 12 L1002 6 L1045 14 L1088 8 L1131 13 L1170 9 L1200 12 L1200 26 L0 26 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* --- 3. Ornate navy panel with double gold border + corner flourishes --- */
.ia-panel {
  position: relative;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 70%, transparent);
  border-radius: var(--ia-radius-card);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232, 198, 109, 0.06), transparent 55%),
    var(--ia-stage);
  color: #F5EFE2;
  box-shadow: inset 0 0 0 1px rgba(232, 198, 109, 0.18), inset 0 0 0 6px rgba(232, 198, 109, 0.05), var(--ia-shadow-soft);
}
.ia-panel__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: 0 0 .35rem;
  color: var(--ia-gold-action-1);
  font: 700 clamp(1.15rem, 2vw, 1.5rem)/1.2 "Fraunces", serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}
.ia-panel__title::before { content: "–✦–"; color: var(--ia-gold-line); font-size: .7em; }
.ia-panel__title::after { content: "–✦–"; color: var(--ia-gold-line); font-size: .7em; }
.ia-panel__sub {
  margin: 0 0 1.1rem;
  color: color-mix(in srgb, #F5EFE2 72%, var(--ia-gold-action-1));
  font: 600 .68rem/1.5 "JetBrains Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
}

/* --- 4. Gold action button (foil) + quiet outline sibling --- */
.ia-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.6rem;
  border: 1px solid #8F6E1C;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--ia-gold-action-1) 0%, var(--ia-gold-action-2) 100%);
  color: #1A1A2E !important;
  font: 700 1rem/1 "Fraunces", serif;
  letter-spacing: .01em;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #FFF3CF, inset 0 -2px 0 rgba(122, 87, 17, .35), 0 10px 24px rgba(184, 146, 42, 0.30);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.ia-btn-gold:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 #FFF3CF, inset 0 -2px 0 rgba(122, 87, 17, .35), 0 14px 30px rgba(184, 146, 42, 0.38); }
.ia-btn-gold:active { transform: translateY(1px); }
.ia-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.5rem;
  border: 1.5px solid var(--ia-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ia-ink) !important;
  font: 600 1rem/1 "Inter", sans-serif;
  text-decoration: none !important;
  cursor: pointer;
}
.ia-btn-outline:hover { background: color-mix(in srgb, var(--ia-ink) 7%, transparent); }

/* --- 5. Medallion: engraved circular icon chip with gold ring --- */
.ia-medallion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 1.5px solid var(--ia-gold-line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #FFFDF8 0%, #F1E7D0 70%, #E3D3B2 100%);
  color: var(--ia-bronze);
  box-shadow: inset 0 0 0 3px rgba(184, 146, 42, 0.16), var(--ia-shadow-tight);
  font-size: 1.35rem;
}
.ia-medallion--navy {
  background: radial-gradient(circle at 32% 28%, #2A3560 0%, var(--ia-stage) 75%);
  color: var(--ia-gold-action-1);
}

/* --- 6. Catalog card: subject rib + medallion + meta chips + actions --- */
.ia-card {
  --ia-rib: var(--ia-sapphire);
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 45%, transparent);
  border-radius: var(--ia-radius-card);
  background: var(--ia-paper);
  box-shadow: var(--ia-shadow-tight), var(--ia-shadow-soft);
  overflow: visible;
}
.ia-card__rib {
  height: 2.4rem;
  border-radius: var(--ia-radius-card) var(--ia-radius-card) 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 5px),
    var(--ia-rib);
  box-shadow: inset 0 -1px 0 var(--ia-gold-line);
}
.ia-card__medallion {
  margin: -1.7rem auto 0;
  background: radial-gradient(circle at 32% 28%, #FFFDF8 0%, #F1E7D0 70%, #E3D3B2 100%);
}
.ia-card__body { display: flex; flex-direction: column; flex: 1; gap: .55rem; padding: .9rem 1.15rem 1.15rem; text-align: center; }
.ia-card__title { margin: 0; color: var(--ia-ink); font: 700 1.22rem/1.2 "Fraunces", serif; }
.ia-card__desc { margin: 0; color: color-mix(in srgb, var(--ia-ink) 72%, transparent); font: 400 .86rem/1.5 "Inter", sans-serif; }
.ia-card__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.ia-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .6rem;
  border: 1px solid color-mix(in srgb, var(--ia-ink) 26%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--ia-ink) 82%, transparent);
  font: 600 .62rem/1.4 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ia-card__actions { display: grid; gap: .5rem; margin-top: auto; padding-top: .4rem; }
.ia-card__actions .ia-btn-gold { min-height: 42px; font-size: .92rem; }
.ia-card__actions .ia-btn-outline { min-height: 40px; border-radius: 10px; font-size: .88rem; }

/* --- 7. Gold ticket with perforation + octagon code slots --- */
.ia-ticket {
  position: relative;
  padding: 1.4rem 3.2rem 1.4rem 1.6rem;
  border: 3px solid var(--ia-gold-line);
  border-radius: 14px;
  background:
    radial-gradient(140% 120% at 20% 0%, #FFFDF8 0%, #F4EAD2 100%);
  box-shadow: 0 0 0 1px #8F6E1C, 0 16px 38px rgba(26, 26, 46, 0.25), inset 0 0 0 1px rgba(184, 146, 42, 0.4);
}
.ia-ticket::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 2.2rem;
  width: 0;
  border-right: 3px dotted color-mix(in srgb, var(--ia-gold-line) 60%, transparent);
}
.ia-ticket__label {
  margin: 0 0 .9rem;
  color: var(--ia-ink);
  font: 700 .8rem/1.4 "JetBrains Mono", monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
}
.ia-codeslots { display: flex; justify-content: center; gap: .55rem; }
.ia-codeslot {
  width: clamp(2.6rem, 4.5vw, 3.6rem);
  height: clamp(3.1rem, 5.4vw, 4.2rem);
  border: 2px solid var(--ia-gold-line);
  background: var(--ia-paper);
  clip-path: polygon(18% 0, 82% 0, 100% 14%, 100% 86%, 82% 100%, 18% 100%, 0 86%, 0 14%);
  color: var(--ia-ink);
  font: 700 1.6rem/1 "Fraunces", serif;
  text-align: center;
  text-transform: uppercase;
}
.ia-codeslot:focus { outline: 3px solid var(--ia-gold-action-1); outline-offset: 2px; }

/* --- 8. Wax seal + rank shield --- */
.ia-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 .55rem;
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 52%;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--ia-seal-tone, var(--ia-garnet)) 78%, #fff) 0%, var(--ia-seal-tone, var(--ia-garnet)) 62%);
  color: #FFF6E8;
  font: 700 .62rem/1 "JetBrains Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 232, 0.28), 0 2px 5px rgba(26, 26, 46, 0.3);
}
.ia-seal--active { --ia-seal-tone: var(--ia-emerald); }
.ia-seal--draft { --ia-seal-tone: var(--ia-bronze); }
.ia-seal--archived { --ia-seal-tone: #52607A; }
.ia-shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 2rem;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
  color: #1A1A2E;
  font: 800 .8rem/1 "Inter", sans-serif;
}
.ia-shield--1 { background: linear-gradient(180deg, #F7DE9C, #C9A032); }
.ia-shield--2 { background: linear-gradient(180deg, #E8EAF0, #9AA3B5); }
.ia-shield--3 { background: linear-gradient(180deg, #D9A268, #8A5A2B); }
.ia-shield--n { background: transparent; border: 1px solid var(--ia-etch); clip-path: none; border-radius: 6px; color: inherit; }

/* --- 9. Climb stepper (vertical path with gold roundels + summit flag) --- */
.ia-stepper { position: relative; display: grid; gap: 1.4rem; padding-left: 3rem; }
.ia-stepper::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: .8rem;
  bottom: .8rem;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--ia-gold-line) 0 6px, transparent 6px 12px);
}
.ia-step { position: relative; }
.ia-step::before {
  content: attr(data-step);
  position: absolute;
  left: -3rem;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 2px solid var(--ia-gold-line);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFFDF8, #F1E2BC);
  color: var(--ia-ink);
  font: 700 .95rem/1 "Fraunces", serif;
  box-shadow: var(--ia-shadow-tight);
}
.ia-step--done::before { background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)); content: "✓"; }
.ia-step--current::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ia-gold-action-1) 40%, transparent); }

/* --- 10. Console shell (teacher pages) --- */
.ia-console { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 70vh; }
.ia-console__side {
  padding: 1.4rem .9rem;
  border-right: 1px solid color-mix(in srgb, var(--ia-gold-line) 40%, transparent);
  background: var(--ia-stage);
}
.ia-console__side a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  border-radius: 9px;
  color: color-mix(in srgb, #F5EFE2 78%, var(--ia-gold-action-1));
  font: 600 .92rem/1.3 "Inter", sans-serif;
  text-decoration: none;
}
.ia-console__side a[aria-current="page"], .ia-console__side a.is-active {
  background: linear-gradient(180deg, rgba(232, 198, 109, .22), rgba(201, 160, 50, .16));
  color: var(--ia-gold-hi);
  box-shadow: inset 0 0 0 1px rgba(232, 198, 109, .35);
}
.ia-console__main { padding: clamp(1.2rem, 3vw, 2.4rem); background: var(--ia-canvas); }
.ia-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .9rem; margin: 0 0 1.4rem; }
.ia-kpi {
  display: grid;
  justify-items: center;
  gap: .3rem;
  padding: 1rem .8rem;
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 45%, transparent);
  border-radius: var(--ia-radius-card);
  background: var(--ia-paper);
  box-shadow: var(--ia-shadow-tight);
  text-align: center;
}
.ia-kpi__value { color: var(--ia-ink); font: 700 1.7rem/1 "Fraunces", serif; }
.ia-kpi__label { color: color-mix(in srgb, var(--ia-ink) 62%, transparent); font: 600 .64rem/1.4 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }

/* --- 11. Legal scroll header + TOC --- */
.ia-scrollhead {
  position: relative;
  padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.2rem, 4vw, 3rem);
  border: 1px solid var(--ia-etch-soft);
  border-radius: 8px;
  background:
    radial-gradient(150% 110% at 50% 0%, #FFFDF8 0%, #EFE3C8 88%);
  box-shadow: var(--ia-shadow-soft);
  text-align: center;
}
.ia-scrollhead h1 { margin: 0; color: var(--ia-ink); font: 640 clamp(1.9rem, 4vw, 2.8rem)/1.1 "Fraunces", serif; }
.ia-scrollhead .ia-effective { margin-top: .5rem; color: var(--ia-bronze); font: 600 .7rem/1.4 "JetBrains Mono", monospace; letter-spacing: .18em; text-transform: uppercase; }
.ia-toc {
  position: sticky;
  top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 40%, transparent);
  border-radius: var(--ia-radius-card);
  background: var(--ia-paper);
  box-shadow: var(--ia-shadow-tight);
}
.ia-toc a { display: block; padding: .38rem .4rem; color: var(--ia-ink); font: 500 .88rem/1.4 "Inter", sans-serif; text-decoration: none; border-radius: 7px; }
.ia-toc a:hover { background: var(--ia-gold-wash); }

/* --- 12. Engraved scene hooks (per-page art applied via these slots) --- */
.ia-scene { position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; }
.ia-scene--mountain { background-position: right 3% bottom; background-size: min(56%, 640px); }
.ia-scene--celestial { background-position: center; background-size: cover; opacity: .9; }

/* Reduced motion: static everything */
@media (prefers-reduced-motion: reduce) {
  .ia-btn-gold, .ia-btn-outline { transition: none; }
}

/* Mobile collapses */
@media (max-width: 900px) {
  .ia-console { grid-template-columns: 1fr; }
  .ia-console__side { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--ia-gold-line) 40%, transparent); }
  .ia-ticket { padding-right: 1.6rem; }
  .ia-ticket::after { display: none; }
}

/* ==================== HUB (mockup 01) ==================== */
/* Floating game plates on the engraved mountain (light theme scene). */
.ia-float-plate {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: .15rem;
  width: 7.4rem;
  padding: .8rem .5rem .6rem;
  border: 2px solid var(--ia-gold-line);
  border-radius: 10px;
  background: linear-gradient(180deg, #232B4E 0%, var(--ia-stage) 100%);
  box-shadow: inset 0 0 0 1px rgba(232,198,109,.35), 0 14px 30px rgba(26,26,46,.28);
  color: #F5EFE2;
  text-align: center;
  transform: rotate(var(--ia-tilt, -4deg));
}
.ia-float-plate strong { font: 700 .82rem/1.15 "Fraunces", serif; }
.ia-float-plate em {
  padding: .1rem .55rem;
  border: 1px solid var(--ia-gold-line);
  border-radius: 999px;
  background: #FFFDF8;
  color: var(--ia-ink);
  font: 700 .5rem/1.4 "JetBrains Mono", monospace;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ia-float-plate__medal {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1.5px solid var(--ia-gold-line);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3A466F, #1A2140);
  font-size: 1.1rem;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--1,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--1 { right: 44%; top: 6%; --ia-tilt: -6deg; }
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--2,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--2 { right: 30%; top: 30%; --ia-tilt: 3deg; }
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--3,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--3 { right: 12%; top: 44%; --ia-tilt: -3deg; }
.ia-float-plate { display: none; }
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate { display: grid; pointer-events: none; }

/* Hero CTAs adopt the illuminated buttons in light. */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__primary-action,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__primary-action {
  border-radius: 10px !important;
  font-family: "Fraunces", serif !important;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__secondary-action,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__secondary-action {
  border: 1.5px solid var(--ia-ink) !important;
  border-radius: 999px !important;
  background: #FFFDF8 !important;
  color: var(--ia-ink) !important;
}

/* "Host a live game" — parchment band + engraved-rule heading. */
html[data-theme="light"] body[data-arcade-surface] #public-games,
body.public-arcade-theme--light[data-arcade-surface] #public-games {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding: 2.2rem calc(50vw - 50%) 2.6rem;
  background:
    radial-gradient(120rem 30rem at 50% -30%, rgba(184,146,42,.06), transparent 70%),
    var(--ia-parchment);
  box-shadow: inset 0 1px 0 rgba(184,146,42,.25), inset 0 -1px 0 rgba(184,146,42,.25);
}
html[data-theme="light"] body[data-arcade-surface] #public-games .public-arcade-catalog-heading,
body.public-arcade-theme--light[data-arcade-surface] #public-games .public-arcade-catalog-heading {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.3rem;
  color: var(--ia-ink);
  font: 700 .85rem/1.4 "JetBrains Mono", monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
}
html[data-theme="light"] body[data-arcade-surface] #public-games .public-arcade-catalog-heading::after,
body.public-arcade-theme--light[data-arcade-surface] #public-games .public-arcade-catalog-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ia-gold-line), transparent);
}

/* Illuminated game cards: gold frame, navy title band above art, chip badge. */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-game-card,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-game-card {
  display: flex !important;
  flex-direction: column;
  border: 2px solid var(--ia-gold-line) !important;
  border-radius: 12px !important;
  background: var(--ia-paper) !important;
  box-shadow: inset 0 0 0 1px rgba(184,146,42,.3), var(--ia-shadow-tight), var(--ia-shadow-soft) !important;
  overflow: hidden;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-game-card__title,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-game-card__title {
  order: -1;
  padding: .6rem .8rem !important;
  background: var(--ia-stage) !important;
  color: #F5EFE2 !important;
  font: 700 1.05rem/1.2 "Fraunces", serif !important;
  text-align: center;
  letter-spacing: .01em;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-game-card__badge,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-game-card__badge {
  align-self: center;
  margin: .55rem 0 .8rem !important;
  padding: .18rem .7rem !important;
  border: 1px solid color-mix(in srgb, var(--ia-ink) 30%, transparent) !important;
  border-radius: 999px !important;
  background: #FFFDF8 !important;
  color: var(--ia-ink) !important;
  font: 700 .58rem/1.4 "JetBrains Mono", monospace !important;
  letter-spacing: .12em !important;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-game-card:hover,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-game-card:hover {
  border-color: #8F6E1C !important;
  box-shadow: inset 0 0 0 1px rgba(184,146,42,.45), 0 1px 2px rgba(26,26,46,.08), 0 20px 44px rgba(184,146,42,.22) !important;
  transform: translateY(-3px);
}

/* Twin banner panels (launchpad actions) — engraved cream banners. */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__action,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__action {
  border: 1.5px solid var(--ia-gold-line) !important;
  border-radius: 6px !important;
  background:
    radial-gradient(130% 120% at 12% 20%, #FFFDF8 0%, #F3EAD4 100%) !important;
  box-shadow: inset 0 0 0 4px rgba(255,253,248,.8), inset 0 0 0 5px rgba(184,146,42,.28), var(--ia-shadow-soft) !important;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__action strong,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__action strong {
  font: 700 1.25rem/1.2 "Fraunces", serif !important;
  color: var(--ia-ink) !important;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__action-arrow,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__action-arrow { color: var(--ia-gold-line) !important; }

/* Hub stacking per mockup 01: hero → parchment band → twin banners. */
html[data-theme="light"] body[data-arcade-surface] main:has(> .public-arcade-launchpad),
body.public-arcade-theme--light[data-arcade-surface] main:has(> .public-arcade-launchpad),
html[data-theme="light"] body[data-arcade-surface] main:has(.public-arcade-launchpad),
body.public-arcade-theme--light[data-arcade-surface] main:has(.public-arcade-launchpad) {
  display: flex;
  flex-direction: column;
}
html[data-theme="light"] body[data-arcade-surface] main .public-arcade-launchpad,
body.public-arcade-theme--light[data-arcade-surface] main .public-arcade-launchpad { order: 0; }
html[data-theme="light"] body[data-arcade-surface] main #public-games,
body.public-arcade-theme--light[data-arcade-surface] main #public-games { order: 1; }
html[data-theme="light"] body[data-arcade-surface] main .ia-banners,
body.public-arcade-theme--light[data-arcade-surface] main .ia-banners { order: 2; margin-top: 1.6rem; }
html[data-theme="light"] body[data-arcade-surface] main > *:not(.public-arcade-launchpad):not(#public-games):not(.ia-banners),
body.public-arcade-theme--light[data-arcade-surface] main > *:not(.public-arcade-launchpad):not(#public-games):not(.ia-banners) { order: 3; }

/* Larger scene presence on wide screens now that banners left the hero. */
@media (min-width: 1100px) {
  html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate,
  body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate { width: 8.6rem; }
  html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--1,
  body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--1 { right: 40%; top: 4%; }
  html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--2,
  body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--2 { right: 24%; top: 26%; }
  html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--3,
  body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--3 { right: 7%; top: 42%; }
}

/* ==================== ROOMS (mockup 02) ==================== */
/* Hero: torn parchment left, celestial navy right carrying the gold ticket. */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-host-hero,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-host-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  background:
    linear-gradient(105deg, #F6EEDB 0 52%, transparent 52.5%),
    radial-gradient(90rem 50rem at 85% 20%, #1B2350 0%, var(--ia-stage) 70%) !important;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-host-hero::after,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-host-hero::after { opacity: 1; }
/* Celestial star field on the navy half. */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-host-hero .public-arcade-host-hero__constellation,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-host-hero .public-arcade-host-hero__constellation {
  display: block !important;
  left: 50%;
  width: 50%;
  opacity: .8;
}
/* The signal board becomes the gold ticket. */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-host-hero .signal-board,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-host-hero .signal-board {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  margin: 1.4rem;
  padding: 1.3rem 3rem 1.3rem 1.5rem;
  border: 3px solid var(--ia-gold-line) !important;
  border-radius: 14px !important;
  background: radial-gradient(140% 120% at 20% 0%, #FFFDF8 0%, #F4EAD2 100%) !important;
  box-shadow: 0 0 0 1px #8F6E1C, 0 18px 40px rgba(0,0,0,.4), inset 0 0 0 1px rgba(184,146,42,.4) !important;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-host-hero .signal-board::after,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-host-hero .signal-board::after {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; right: 2rem;
  border-right: 3px dotted color-mix(in srgb, var(--ia-gold-line) 60%, transparent);
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-host-hero .signal-board > span,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-host-hero .signal-board > span,
html[data-theme="light"] body[data-arcade-surface] .public-arcade-host-hero .signal-board small,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-host-hero .signal-board small {
  color: var(--ia-ink) !important;
  font: 700 .72rem/1.4 "JetBrains Mono", monospace !important;
  letter-spacing: .18em;
  text-transform: uppercase;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-host-hero .signal-board div i,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-host-hero .signal-board div i {
  width: 2.6rem; height: 3.1rem;
  border: 2px solid var(--ia-gold-line) !important;
  background: var(--ia-paper) !important;
  clip-path: polygon(18% 0, 82% 0, 100% 14%, 100% 86%, 82% 100%, 18% 100%, 0 86%, 0 14%);
  box-shadow: none !important;
}
/* Hero copy: gold italic second line on the parchment side. The column owns
   its parchment ground (cream-on-cream, visually invisible) so the ink never
   depends on where the celestial half's radial happens to fall. */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-host-hero .hero__copy,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-host-hero .hero__copy {
  position: relative;
  z-index: 1;
  background: #F6EEDB;
  border-radius: 14px;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-host-hero h1 em,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-host-hero h1 em {
  /* !important: mathematical-vision pins bronze on this em, which fails AA on
     the parchment side. */
  color: var(--ia-gold-ink) !important;
  font-style: italic;
}

/* HOST / JOIN as ornate navy panels on a full navy field. */
html[data-theme="light"] body[data-arcade-surface] .entry-grid,
body.public-arcade-theme--light[data-arcade-surface] .entry-grid {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding: 2.4rem calc(50vw - 50%) 3rem;
  background:
    radial-gradient(100rem 40rem at 50% 0%, #1B2350 0%, var(--ia-stage) 75%);
}
html[data-theme="light"] body[data-arcade-surface] .entry-card,
body.public-arcade-theme--light[data-arcade-surface] .entry-card {
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 70%, transparent) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,198,109,.06), transparent 55%),
    color-mix(in srgb, var(--ia-stage) 92%, #000) !important;
  box-shadow: inset 0 0 0 1px rgba(232,198,109,.18), inset 0 0 0 6px rgba(232,198,109,.05), var(--ia-shadow-soft) !important;
  color: #F5EFE2 !important;
}
html[data-theme="light"] body[data-arcade-surface] .entry-card .eyebrow,
body.public-arcade-theme--light[data-arcade-surface] .entry-card .eyebrow {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  color: var(--ia-gold-action-1) !important;
  font: 700 .7rem/1.4 "JetBrains Mono", monospace !important;
  letter-spacing: .22em; text-transform: uppercase;
}
html[data-theme="light"] body[data-arcade-surface] .entry-card .eyebrow::before,
body.public-arcade-theme--light[data-arcade-surface] .entry-card .eyebrow::before { content: "–✦–"; color: var(--ia-gold-line); }
html[data-theme="light"] body[data-arcade-surface] .entry-card .eyebrow::after,
body.public-arcade-theme--light[data-arcade-surface] .entry-card .eyebrow::after { content: "–✦–"; color: var(--ia-gold-line); }
html[data-theme="light"] body[data-arcade-surface] .entry-card h2,
body.public-arcade-theme--light[data-arcade-surface] .entry-card h2 {
  color: #F5EFE2 !important;
  font-family: "Fraunces", serif !important;
  text-align: center;
}
html[data-theme="light"] body[data-arcade-surface] .entry-card .entry-card__heading > p:last-child,
body.public-arcade-theme--light[data-arcade-surface] .entry-card .entry-card__heading > p:last-child {
  color: color-mix(in srgb, #F5EFE2 70%, var(--ia-gold-action-1)) !important;
  text-align: center;
}
/* Ghost HOST/JOIN watermarks become faint gold engravings on navy. */
html[data-theme="light"] body[data-arcade-surface] .entry-card__number,
body.public-arcade-theme--light[data-arcade-surface] .entry-card__number {
  color: color-mix(in srgb, var(--ia-gold-action-1) 14%, transparent) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--ia-gold-action-1) 14%, transparent);
}
/* Primary actions inside panels: gold foil. */
html[data-theme="light"] body[data-arcade-surface] .entry-card .button--primary,
body.public-arcade-theme--light[data-arcade-surface] .entry-card .button--primary,
html[data-theme="light"] body[data-arcade-surface] .entry-card button[type="submit"],
body.public-arcade-theme--light[data-arcade-surface] .entry-card button[type="submit"] {
  border: 1px solid #8F6E1C !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)) !important;
  color: #1A1A2E !important;
  font: 700 1.02rem/1 "Fraunces", serif !important;
  box-shadow: inset 0 1px 0 #FFF3CF, inset 0 -2px 0 rgba(122,87,17,.35), 0 10px 24px rgba(184,146,42,.3) !important;
}
/* Join code boxes echo the ticket slots. */
html[data-theme="light"] body[data-arcade-surface] .entry-card--join input#joinCode,
body.public-arcade-theme--light[data-arcade-surface] .entry-card--join input#joinCode,
html[data-theme="light"] body[data-arcade-surface] .entry-card--join .code-field input,
body.public-arcade-theme--light[data-arcade-surface] .entry-card--join .code-field input {
  border: 2px solid var(--ia-gold-line) !important;
  background: color-mix(in srgb, var(--ia-stage) 80%, #000) !important;
  color: var(--ia-gold-hi) !important;
  font: 700 1.3rem/1.3 "Fraunces", serif !important;
  letter-spacing: .35em;
  text-transform: uppercase;
  text-align: center;
}

/* Rooms: labels and helper ink on the navy panels read cream. */
html[data-theme="light"] body[data-arcade-surface] .entry-card :where(.field > span, .code-field > span, label, legend, #codeHelp, .field small),
body.public-arcade-theme--light[data-arcade-surface] .entry-card :where(.field > span, .code-field > span, label, legend, #codeHelp, .field small) {
  color: color-mix(in srgb, #F5EFE2 82%, var(--ia-gold-action-1)) !important;
}
html[data-theme="light"] body[data-arcade-surface] .entry-card :where(h3, strong):not(.selection-card *):not(.player-access-card *):not(.game-choice *):not(.admission-state *),
body.public-arcade-theme--light[data-arcade-surface] .entry-card :where(h3, strong):not(.selection-card *):not(.player-access-card *):not(.game-choice *):not(.admission-state *) {
  color: #F5EFE2 !important;
}

/* ==================== LIBRARY (mockup 03) ==================== */
/* Bank cards: subject-colored ribbed top band + centered engraved medallion. */
html[data-theme="light"] body[data-arcade-surface] .bank-card,
body.public-arcade-theme--light[data-arcade-surface] .bank-card {
  --ia-rib: var(--ia-sapphire);
  position: relative;
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 45%, transparent) !important;
  border-radius: 12px !important;
  background: var(--ia-paper) !important;
  box-shadow: var(--ia-shadow-tight), var(--ia-shadow-soft) !important;
  overflow: visible !important;
  padding-top: 0 !important;
}
html[data-theme="light"] body[data-arcade-surface] .bank-card::before,
body.public-arcade-theme--light[data-arcade-surface] .bank-card::before {
  content: "";
  display: block;
  height: 2.2rem;
  border-radius: 12px 12px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 5px),
    var(--ia-rib);
  box-shadow: inset 0 -1px 0 var(--ia-gold-line);
}
html[data-theme="light"] body[data-arcade-surface] .bank-card[data-subject="mathematics"],
body.public-arcade-theme--light[data-arcade-surface] .bank-card[data-subject="mathematics"] { --ia-rib: var(--ia-sapphire); }
html[data-theme="light"] body[data-arcade-surface] .bank-card[data-subject="science"],
body.public-arcade-theme--light[data-arcade-surface] .bank-card[data-subject="science"] { --ia-rib: var(--ia-garnet); }
html[data-theme="light"] body[data-arcade-surface] .bank-card[data-subject="english-language-arts"],
body.public-arcade-theme--light[data-arcade-surface] .bank-card[data-subject="english-language-arts"] { --ia-rib: var(--ia-emerald); }
html[data-theme="light"] body[data-arcade-surface] .bank-card[data-subject="social-studies"],
body.public-arcade-theme--light[data-arcade-surface] .bank-card[data-subject="social-studies"] { --ia-rib: var(--ia-bronze); }
html[data-theme="light"] body[data-arcade-surface] .bank-card .bank-card__subject,
body.public-arcade-theme--light[data-arcade-surface] .bank-card .bank-card__subject {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 1.1rem auto .6rem;
  width: max-content;
  padding: .3rem .9rem;
  border: 1.5px solid var(--ia-gold-line) !important;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, #FFFDF8 0%, #F1E7D0 80%) !important;
  color: var(--ia-bronze) !important;
  font: 700 .62rem/1.3 "JetBrains Mono", monospace !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 3px rgba(184,146,42,.14), var(--ia-shadow-tight);
}
html[data-theme="light"] body[data-arcade-surface] .bank-card h3,
body.public-arcade-theme--light[data-arcade-surface] .bank-card h3 {
  font-family: "Fraunces", serif !important;
  text-align: center;
}
html[data-theme="light"] body[data-arcade-surface] .bank-card__description,
body.public-arcade-theme--light[data-arcade-surface] .bank-card__description { text-align: center; }
html[data-theme="light"] body[data-arcade-surface] .bank-card__meta,
body.public-arcade-theme--light[data-arcade-surface] .bank-card__meta { justify-content: center; }

/* Search console: white card, labeled controls, gold search. */
html[data-theme="light"] body[data-arcade-surface="product"] .search-deck,
body.public-arcade-theme--light[data-arcade-surface="product"] .search-deck {
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 40%, transparent) !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  box-shadow: var(--ia-shadow-tight), var(--ia-shadow-soft) !important;
}
html[data-theme="light"] body[data-arcade-surface] .search-deck button[type="submit"],
body.public-arcade-theme--light[data-arcade-surface] .search-deck button[type="submit"] {
  border: 1px solid #8F6E1C !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)) !important;
  color: #1A1A2E !important;
  font: 700 .95rem/1 "Fraunces", serif !important;
  box-shadow: inset 0 1px 0 #FFF3CF, 0 8px 20px rgba(184,146,42,.26) !important;
}

/* Section heading: engraved rule with gold flourish. */
html[data-theme="light"] body[data-arcade-surface] .library h2,
body.public-arcade-theme--light[data-arcade-surface] .library h2 {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: "Fraunces", serif !important;
}
html[data-theme="light"] body[data-arcade-surface] .library h2::before,
body.public-arcade-theme--light[data-arcade-surface] .library h2::before { content: "❧"; color: var(--ia-gold-line); font-size: .8em; }
html[data-theme="light"] body[data-arcade-surface] .library h2::after,
body.public-arcade-theme--light[data-arcade-surface] .library h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ia-gold-line), transparent);
}

/* Rooms panels: every text node on navy reads cream unless inside a light inner card. */
html[data-theme="light"] body[data-arcade-surface] .entry-card :where(p, li, span, small, dt, dd):not(:where(.selection-card, .player-access-card, .game-choice > span, .admission-state, input, select, textarea) *):not(.entry-card__number),
body.public-arcade-theme--light[data-arcade-surface] .entry-card :where(p, li, span, small, dt, dd):not(:where(.selection-card, .player-access-card, .game-choice > span, .admission-state, input, select, textarea) *):not(.entry-card__number) {
  color: color-mix(in srgb, #F5EFE2 84%, var(--ia-gold-action-1)) !important;
}

/* ==================== AVATAR LAB (mockup 04) ==================== */
/* Split studio: navy pedestal spotlight left, options rail right. */
html[data-theme="light"] body[data-arcade-surface] .pae-avatar-studio,
body.public-arcade-theme--light[data-arcade-surface] .pae-avatar-studio {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 1.4rem;
  align-items: start;
}
html[data-theme="light"] body[data-arcade-surface] .pae-atelier,
body.public-arcade-theme--light[data-arcade-surface] .pae-atelier {
  position: sticky;
  top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  padding: 0;
}
html[data-theme="light"] body[data-arcade-surface] .pae-atelier__journey,
body.public-arcade-theme--light[data-arcade-surface] .pae-atelier__journey {
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 42%, transparent) !important;
  background: var(--ia-paper) !important;
  box-shadow: var(--ia-shadow-tight) !important;
}
html[data-theme="light"] body[data-arcade-surface] .pae-avatar-studio__badges span,
body.public-arcade-theme--light[data-arcade-surface] .pae-avatar-studio__badges span {
  border: 1px solid var(--ia-gold-line) !important;
  border-radius: 999px !important;
  background: rgba(232,198,109,.12) !important;
  color: var(--ia-gold-hi) !important;
  font: 700 .6rem/1.5 "JetBrains Mono", monospace !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .2rem .6rem !important;
}
/* Option rail: parchment cards with gold-selected tiles. Headers are div-based
   (no <legend>), so the title sits fully inside the card padding. */
html[data-theme="light"] body[data-arcade-surface] .pae-option-group,
body.public-arcade-theme--light[data-arcade-surface] .pae-option-group {
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 42%, transparent) !important;
  border-radius: 14px !important;
  background: var(--ia-paper) !important;
  box-shadow: var(--ia-shadow-tight) !important;
}
html[data-theme="light"] body[data-arcade-surface] .pae-option-group__title,
body.public-arcade-theme--light[data-arcade-surface] .pae-option-group__title {
  color: var(--ia-ink) !important;
  font: 700 clamp(1.35rem, 2.4vw, 1.75rem)/1.1 "Fraunces", serif !important;
  letter-spacing: -.02em;
}
html[data-theme="light"] body[data-arcade-surface] .pae-option-group__hint,
body.public-arcade-theme--light[data-arcade-surface] .pae-option-group__hint {
  color: color-mix(in srgb, var(--ia-ink) 64%, transparent) !important;
}
html[data-theme="light"] body[data-arcade-surface] .pae-option-group__detail,
body.public-arcade-theme--light[data-arcade-surface] .pae-option-group__detail {
  border-color: color-mix(in srgb, var(--ia-gold-line) 45%, transparent) !important;
  background: color-mix(in srgb, var(--ia-gold-action-1) 12%, var(--ia-paper)) !important;
  color: var(--ia-ink) !important;
}
html[data-theme="light"] body[data-arcade-surface] .pae-option-grid [aria-pressed="true"],
body.public-arcade-theme--light[data-arcade-surface] .pae-option-grid [aria-pressed="true"],
html[data-theme="light"] body[data-arcade-surface] .pae-option-grid [aria-checked="true"],
body.public-arcade-theme--light[data-arcade-surface] .pae-option-grid [aria-checked="true"] {
  border: 2px solid #8F6E1C !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ia-gold-action-1) 45%, transparent), var(--ia-shadow-tight) !important;
  background: linear-gradient(180deg, #FFF8E4, #F7E9C4) !important;
}
/* Fixed save bar: navy plate keeps cream state text, foil primary, and quiet
   ghost button over the broad ink cascade + generic .pae-button rules. */
body[data-arcade-surface] .pae-savebar__state {
  color: #C7D0E4 !important;
}
body[data-arcade-surface] .pae-savebar .pae-button--primary {
  border: 1px solid #8F6E1C !important;
  background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)) !important;
  color: #1A1A2E !important;
  box-shadow: inset 0 1px 0 #FFF3CF, 0 8px 20px rgba(184, 146, 42, .28) !important;
}
body[data-arcade-surface] .pae-savebar .pae-button--primary:disabled {
  background: color-mix(in srgb, var(--ia-gold-action-1) 42%, #10142B) !important;
  color: color-mix(in srgb, #1A1A2E 70%, #F5EFE2) !important;
}
body[data-arcade-surface] .pae-savebar .pae-button--quiet {
  border-color: color-mix(in srgb, #F5EFE2 40%, transparent) !important;
  background: transparent !important;
  color: #F5EFE2 !important;
}
@media (max-width: 900px) {
  html[data-theme="light"] body[data-arcade-surface] .pae-avatar-studio,
  body.public-arcade-theme--light[data-arcade-surface] .pae-avatar-studio { grid-template-columns: 1fr; }
  html[data-theme="light"] body[data-arcade-surface] .pae-atelier,
  body.public-arcade-theme--light[data-arcade-surface] .pae-atelier { position: static; }
}

/* ==================== VIP STATUS (mockup 05) ==================== */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-vip-hero,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-vip-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
}
html[data-theme="light"] body[data-arcade-surface] .pae-page__preview .pae-avatar,
body.public-arcade-theme--light[data-arcade-surface] .pae-page__preview .pae-avatar {
  border: 2px solid var(--ia-gold-line);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(232,198,109,.25), transparent 60%), #131A36;
  box-shadow: inset 0 0 0 6px rgba(232,198,109,.08), 0 18px 40px rgba(26,26,46,.25);
  padding: 1.2rem;
}
html[data-theme="light"] body[data-arcade-surface] .ia-stepper li strong,
body.public-arcade-theme--light[data-arcade-surface] .ia-stepper li strong {
  display: block;
  color: var(--ia-ink);
  font: 700 1.02rem/1.3 "Fraunces", serif;
}
html[data-theme="light"] body[data-arcade-surface] .ia-stepper li,
body.public-arcade-theme--light[data-arcade-surface] .ia-stepper li {
  color: color-mix(in srgb, var(--ia-ink) 72%, transparent);
  font: 400 .9rem/1.5 "Inter", sans-serif;
  list-style: none;
}

/* ==================== CONSOLE / RECORDS FAMILY (mockups 07-13, 19, 20) ==================== */
/* Generic teacher-tool cards -> illuminated paper cards with gold framing. */
html[data-theme="light"] body[data-arcade-surface="product"] :where(.card, .action-card, .setup-card, .lifecycle-card, .plan-card, .recent-report, .content-card, .report-card),
body.public-arcade-theme--light[data-arcade-surface="product"] :where(.card, .action-card, .setup-card, .lifecycle-card, .plan-card, .recent-report, .content-card, .report-card) {
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 42%, transparent) !important;
  border-radius: 12px !important;
  background: var(--ia-paper) !important;
  box-shadow: var(--ia-shadow-tight), var(--ia-shadow-soft) !important;
}
/* Page H1/H2 across the family adopt Fraunces. */
html[data-theme="light"] body[data-arcade-surface="product"] :where(main h1, main h2):not(.entry-card *):not(.public-arcade-launchpad *),
body.public-arcade-theme--light[data-arcade-surface="product"] :where(main h1, main h2):not(.entry-card *):not(.public-arcade-launchpad *) {
  font-family: "Fraunces", serif !important;
  letter-spacing: -.01em;
}
/* Primary buttons: gold foil; danger: garnet seal. */
html[data-theme="light"] body[data-arcade-surface="product"] .button--primary,
body.public-arcade-theme--light[data-arcade-surface="product"] .button--primary {
  border: 1px solid #8F6E1C !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)) !important;
  color: #1A1A2E !important;
  font-family: "Fraunces", serif !important;
  box-shadow: inset 0 1px 0 #FFF3CF, 0 8px 20px rgba(184,146,42,.26) !important;
}
html[data-theme="light"] body[data-arcade-surface="product"] .button--danger,
body.public-arcade-theme--light[data-arcade-surface="product"] .button--danger {
  border: 1px solid color-mix(in srgb, var(--ia-garnet) 70%, #000) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #B5433C, var(--ia-garnet)) !important;
  color: #FFF6E8 !important;
}
/* Status badges become wax seals. */
html[data-theme="light"] body[data-arcade-surface="product"] :where(.badge, .badge--status, .status-chip),
body.public-arcade-theme--light[data-arcade-surface="product"] :where(.badge, .badge--status, .status-chip) {
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 52% !important;
  border: 0 !important;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--ia-bronze) 78%, #fff) 0%, var(--ia-bronze) 62%) !important;
  color: #FFF6E8 !important;
  font: 700 .6rem/1.5 "JetBrains Mono", monospace !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .7rem !important;
  box-shadow: inset 0 0 0 2px rgba(255,246,232,.28), 0 2px 5px rgba(26,26,46,.3) !important;
}
/* Tables: parchment header band + zebra. */
html[data-theme="light"] body[data-arcade-surface="product"] table thead th,
body.public-arcade-theme--light[data-arcade-surface="product"] table thead th {
  background: var(--ia-parchment) !important;
  color: var(--ia-bronze) !important;
  font: 700 .66rem/1.5 "JetBrains Mono", monospace !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ia-gold-line) !important;
}
html[data-theme="light"] body[data-arcade-surface="product"] table tbody tr:nth-child(even) td,
body.public-arcade-theme--light[data-arcade-surface="product"] table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--ia-parchment) 45%, transparent) !important;
}
/* Eyebrows across family. */
html[data-theme="light"] body[data-arcade-surface="product"] .eyebrow,
body.public-arcade-theme--light[data-arcade-surface="product"] .eyebrow {
  color: var(--ia-gold-ink) !important;
  font: 700 .68rem/1.4 "JetBrains Mono", monospace !important;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ==================== LEGAL SCROLLS (mockups 14-17) ==================== */
html[data-theme="light"] body[data-arcade-surface="legal"] :where(.legal-shell, article) h1,
body.public-arcade-theme--light[data-arcade-surface="legal"] :where(.legal-shell, article) h1 {
  font: 640 clamp(1.9rem, 4vw, 2.7rem)/1.12 "Fraunces", serif !important;
}
html[data-theme="light"] body[data-arcade-surface="legal"] :where(.legal-shell, article, .legal-rail),
body.public-arcade-theme--light[data-arcade-surface="legal"] :where(.legal-shell, article, .legal-rail) {
  border-color: color-mix(in srgb, var(--ia-gold-line) 40%, transparent) !important;
}
html[data-theme="light"] body[data-arcade-surface="legal"] article,
body.public-arcade-theme--light[data-arcade-surface="legal"] article {
  background:
    radial-gradient(150% 20% at 50% 0%, #FFFDF8 0%, transparent 100%),
    var(--ia-paper) !important;
  border: 1px solid var(--ia-etch-soft) !important;
  border-radius: 10px !important;
  box-shadow: var(--ia-shadow-soft) !important;
}
html[data-theme="light"] body[data-arcade-surface="legal"] :where(h2, h3),
body.public-arcade-theme--light[data-arcade-surface="legal"] :where(h2, h3) {
  font-family: "Fraunces", serif !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ia-gold-line) 35%, transparent);
  padding-bottom: .3rem;
}

/* ==================== PROSCENIUM GAME CHROME (mockup 18) ==================== */
/* Cream carved frame around the celestial stage; skins only — zero DOM change. */
@media (max-width: 900px) {
  html[data-theme="light"] body[data-arcade-surface="game"] #main-content.site-main,
  body.public-arcade-theme--light[data-arcade-surface="game"] #main-content.site-main {
    border: 0 !important;
    box-shadow: none !important;
  }
}
html[data-theme="light"] body[data-arcade-surface="game"] #main-content.site-main:not(:has(.public-arcade-launchpad)),
body.public-arcade-theme--light[data-arcade-surface="game"] #main-content.site-main:not(:has(.public-arcade-launchpad)) {
  position: relative;
  border: 14px solid transparent;
  border-image: linear-gradient(180deg, #F6EEDB, #EDE0C2) 1;
  box-shadow:
    inset 0 0 0 2px var(--ia-gold-line),
    inset 0 0 0 8px #F6EEDB,
    inset 0 0 0 9px rgba(184,146,42,.35);
  border-radius: 4px;
}
/* Jewel answer plates: map the quartet onto the shared answer control family. */
html[data-theme="light"] body[data-arcade-surface="game"] :where([data-public-arcade-control], .answer-option, .quiz-option):nth-of-type(4n+1),
body.public-arcade-theme--light[data-arcade-surface="game"] :where([data-public-arcade-control], .answer-option, .quiz-option):nth-of-type(4n+1) { --ia-plate: var(--ia-ink); }
html[data-theme="light"] body[data-arcade-surface="game"] :where([data-public-arcade-control], .answer-option, .quiz-option):nth-of-type(4n+2),
body.public-arcade-theme--light[data-arcade-surface="game"] :where([data-public-arcade-control], .answer-option, .quiz-option):nth-of-type(4n+2) { --ia-plate: var(--ia-garnet); }
html[data-theme="light"] body[data-arcade-surface="game"] :where([data-public-arcade-control], .answer-option, .quiz-option):nth-of-type(4n+3),
body.public-arcade-theme--light[data-arcade-surface="game"] :where([data-public-arcade-control], .answer-option, .quiz-option):nth-of-type(4n+3) { --ia-plate: var(--ia-sapphire); }
html[data-theme="light"] body[data-arcade-surface="game"] :where([data-public-arcade-control], .answer-option, .quiz-option):nth-of-type(4n+4),
body.public-arcade-theme--light[data-arcade-surface="game"] :where([data-public-arcade-control], .answer-option, .quiz-option):nth-of-type(4n+4) { --ia-plate: var(--ia-bronze); }
html[data-theme="light"] body[data-arcade-surface="game"] :where([data-public-arcade-control], .answer-option, .quiz-option),
body.public-arcade-theme--light[data-arcade-surface="game"] :where([data-public-arcade-control], .answer-option, .quiz-option) {
  border: 1.5px solid var(--ia-gold-line) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ia-plate, var(--ia-sapphire)) 88%, #fff) 0%, var(--ia-plate, var(--ia-sapphire)) 100%) !important;
  color: #FFF6E8 !important;
  box-shadow: inset 0 0 0 1px rgba(232,198,109,.3), 0 6px 16px rgba(16,20,43,.35) !important;
}
/* VIP Lounge bar reskin: gold rail + crowned portrait rings. */
html[data-theme="light"] body[data-arcade-surface="game"] [data-pavb-stage],
body.public-arcade-theme--light[data-arcade-surface="game"] [data-pavb-stage],
html[data-theme="dark"] body[data-arcade-surface="game"] [data-pavb-stage],
body.public-arcade-theme--dark[data-arcade-surface="game"] [data-pavb-stage] {
  border: 1.5px solid var(--ia-gold-line) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(232,198,109,.10), rgba(232,198,109,.03)),
    color-mix(in srgb, var(--ia-stage) 88%, #000) !important;
  box-shadow: inset 0 0 0 1px rgba(232,198,109,.22) !important;
}
[data-pavb-stage] .pavb-portrait, [data-pavb-stage] [data-pavb-player] {
  border: 2px solid var(--ia-gold-line) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px rgba(232,198,109,.25), 0 4px 10px rgba(0,0,0,.4) !important;
}

/* ==================== WIDE-VIEWPORT RECOMPOSITION (owner audit 3) ==================== */
/* The band is viewport-wide; its CONTENT gets a centered measure that fills. */
html[data-theme="light"] body[data-arcade-surface] #public-games > *,
body.public-arcade-theme--light[data-arcade-surface] #public-games > * {
  width: min(1400px, 100%);
  margin-inline: auto;
}
html[data-theme="light"] body[data-arcade-surface] #public-games .public-arcade-game-grid,
body.public-arcade-theme--light[data-arcade-surface] #public-games .public-arcade-game-grid {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
/* Kill the white corner notches: the card owns no top padding; the title band
   is the true first row and carries the card's top radius. */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-game-card,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-game-card {
  padding: 0 !important;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-game-card__title,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-game-card__title {
  margin: 0 !important;
  border-radius: 10px 10px 0 0;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-game-card > :not(.public-arcade-game-card__title),
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-game-card > :not(.public-arcade-game-card__title) {
  margin-inline: .8rem;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-game-card .public-arcade-game-art,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-game-card .public-arcade-game-art {
  margin-inline: 0 !important;
}
/* Banners: centered two-up measure, never a cramped strip. */
html[data-theme="light"] body[data-arcade-surface] .ia-banners,
body.public-arcade-theme--light[data-arcade-surface] .ia-banners {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.2rem;
  width: min(1400px, calc(100% - 3rem));
  margin-inline: auto !important;
}

/* Avatar Lab wide: preview column keeps a sane measure; tiles fill their rail. */
html[data-theme="light"] body[data-arcade-surface] .pae-avatar-studio,
body.public-arcade-theme--light[data-arcade-surface] .pae-avatar-studio {
  width: min(1400px, 100%);
  margin-inline: auto;
  grid-template-columns: minmax(320px, 480px) minmax(0, 1fr);
}
html[data-theme="light"] body[data-arcade-surface] .pae-option-grid,
body.public-arcade-theme--light[data-arcade-surface] .pae-option-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .6rem;
}
/* Preview summary line must read on navy. */
html[data-theme="light"] body[data-arcade-surface] .pae-avatar-studio__summary,
body.public-arcade-theme--light[data-arcade-surface] .pae-avatar-studio__summary,
html[data-theme="light"] body[data-arcade-surface] .pae-avatar-studio__summary *,
body.public-arcade-theme--light[data-arcade-surface] .pae-avatar-studio__summary * {
  color: color-mix(in srgb, #F5EFE2 86%, var(--ia-gold-action-1)) !important;
}

/* Library action rows: two-column footer that never overflows the card. */
html[data-theme="light"] body[data-arcade-surface] .bank-card__actions,
body.public-arcade-theme--light[data-arcade-surface] .bank-card__actions {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin: auto 1.3rem 1.3rem !important;
}
/* Owner feedback 2026-07-22: cards need interior breathing room — the subject
   pill must never kiss the rib band and the text column gets a real gutter. */
html[data-theme="light"] body[data-arcade-surface] .bank-card__body,
body.public-arcade-theme--light[data-arcade-surface] .bank-card__body {
  padding: 0 1.4rem .9rem !important;
}
html[data-theme="light"] body[data-arcade-surface] .bank-card h3,
body.public-arcade-theme--light[data-arcade-surface] .bank-card h3 {
  margin: .15rem 0 .5rem !important;
}
html[data-theme="light"] body[data-arcade-surface] .bank-card__description,
body.public-arcade-theme--light[data-arcade-surface] .bank-card__description {
  margin: 0 0 .9rem !important;
}
html[data-theme="light"] body[data-arcade-surface] .bank-card__meta,
body.public-arcade-theme--light[data-arcade-surface] .bank-card__meta {
  gap: .45rem;
  margin-bottom: 1rem !important;
}
html[data-theme="light"] body[data-arcade-surface] .bank-card__actions > *,
body.public-arcade-theme--light[data-arcade-surface] .bank-card__actions > * {
  width: 100% !important;
  margin: 0 !important;
  justify-content: center;
}
html[data-theme="light"] body[data-arcade-surface] .bank-card__actions .button--primary,
body.public-arcade-theme--light[data-arcade-surface] .bank-card__actions .button--primary { order: -1; }

/* Arcade Break dialog: readable stage in both themes, gold pipes on deep navy,
   crisp mode chips, no muddy highlight on helper copy. */
.pae-dialog--flappy {
  background: linear-gradient(180deg, #1B2350, var(--ia-stage)) !important;
  border: 1.5px solid var(--ia-gold-line) !important;
}
.pae-dialog--flappy canvas {
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(232,198,109,.25);
}
.pae-dialog--flappy .pae-flappy__variants button {
  border: 1.5px solid var(--ia-gold-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--ia-stage) 80%, #000) !important;
  color: #F5EFE2 !important;
}
.pae-dialog--flappy .pae-flappy__variants button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)) !important;
  color: #1A1A2E !important;
}
.pae-dialog--flappy :where(p, small, [id*="help"]) {
  background: none !important;
  color: color-mix(in srgb, #F5EFE2 80%, var(--ia-gold-action-1)) !important;
}

/* Hub polish round 2 (interpreting Codex captures at 1600w). */
/* NEW sticker: gold-sealed, moved onto the art so titles never truncate. */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-game-card .new-badge,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-game-card .new-badge {
  top: 2.6rem !important;
  right: .5rem !important;
  background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)) !important;
  color: #1A1A2E !important;
  border: 1px solid #8F6E1C !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 #FFF3CF, 0 2px 8px rgba(184,146,42,.4) !important;
  animation: none !important;
}
html[data-theme="light"] body[data-arcade-surface] .public-arcade-game-card__title,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-game-card__title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* Banners: full base styles (they left the launchpad scope and lost them). */
html[data-theme="light"] body[data-arcade-surface] .ia-banners .public-arcade-launchpad__action[hidden],
body.public-arcade-theme--light[data-arcade-surface] .ia-banners .public-arcade-launchpad__action[hidden] {
  display: none !important;
}
html[data-theme="light"] body[data-arcade-surface] .ia-banners .public-arcade-launchpad__action,
body.public-arcade-theme--light[data-arcade-surface] .ia-banners .public-arcade-launchpad__action {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow arrow" "title arrow" "desc arrow";
  align-items: center;
  column-gap: 1rem;
  min-height: 8.5rem;
  padding: 1.4rem 1.6rem !important;
  text-decoration: none !important;
}
html[data-theme="light"] body[data-arcade-surface] .ia-banners .public-arcade-launchpad__action-eyebrow,
body.public-arcade-theme--light[data-arcade-surface] .ia-banners .public-arcade-launchpad__action-eyebrow {
  grid-area: eyebrow;
  color: var(--ia-gold-ink) !important;
  font: 700 .64rem/1.4 "JetBrains Mono", monospace !important;
  letter-spacing: .2em;
  text-transform: uppercase;
}
html[data-theme="light"] body[data-arcade-surface] .ia-banners .public-arcade-launchpad__action strong,
body.public-arcade-theme--light[data-arcade-surface] .ia-banners .public-arcade-launchpad__action strong { grid-area: title; }
html[data-theme="light"] body[data-arcade-surface] .ia-banners .public-arcade-launchpad__action > span:not(.public-arcade-launchpad__action-eyebrow):not(.public-arcade-launchpad__action-arrow),
body.public-arcade-theme--light[data-arcade-surface] .ia-banners .public-arcade-launchpad__action > span:not(.public-arcade-launchpad__action-eyebrow):not(.public-arcade-launchpad__action-arrow) {
  grid-area: desc;
  color: color-mix(in srgb, var(--ia-ink) 70%, transparent) !important;
  font: 400 .92rem/1.5 "Inter", sans-serif !important;
}
html[data-theme="light"] body[data-arcade-surface] .ia-banners .public-arcade-launchpad__action-arrow,
body.public-arcade-theme--light[data-arcade-surface] .ia-banners .public-arcade-launchpad__action-arrow {
  grid-area: arrow;
  font-size: 1.6rem;
}
/* Hero: no dead void at wide widths. */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad {
  align-content: center;
}
@media (min-width: 1200px) {
  html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad,
  body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad {
    min-height: 0 !important;
    padding-block: 2.4rem 2.8rem !important;
  }
}

/* The Lab reserves scroll space for the fixed save bar (styled in
   public-arcade-experience.css); no per-theme save-bar geometry needed here. */

/* ==================== PRODUCTION ART PACK (owner asset drop 2026-07-22) ====================
   Raster art from design-assets/arcade-production-assets (web/ optimized WebP).
   Art is decorative only: live text, controls, aliases, and data stay code-native. */

/* 1) Cream paper texture across the light canvas: layered into the press-layer
   body rule in public-arcade-mathematical-vision.css (that rule is !important). */

/* 2) Hub hero: engraved mountain panorama anchors the right half of the scene;
   the float plates ride the ridge line (scene is now their containing block). */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(58%, 780px);
  margin: 0;
  background: url("/assets/images/art/mountain-climb-panorama.webp") right bottom / contain no-repeat;
  pointer-events: none;
}
@media (min-width: 1200px) {
  html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad,
  body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad {
    min-height: clamp(300px, 26vw, 430px) !important;
  }
}
/* Plate coordinates re-based to the scene (mockup 01: left ridge, saddle, summit-right).
   The mountain fills the scene's lower band, so plates ride the ridge line. */
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate { width: 9.4rem; }
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--1,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--1 { left: 9%; right: auto; top: auto; bottom: 42%; }
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--2,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--2 { left: 39%; right: auto; top: auto; bottom: 26%; }
html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--3,
body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate--3 { right: 3%; top: auto; bottom: 44%; }

/* 3) Float-plate medallions carry the real engraved game art (center-square crop).
   Plate title stays cream on navy — the press layer's generic ink rules repaint
   bare `strong`, so the anchored prefix must outrank them. */
html[data-theme="light"] body[data-arcade-surface] .ia-float-plate strong,
body.public-arcade-theme--light[data-arcade-surface] .ia-float-plate strong,
.ia-float-plate strong { color: #F5EFE2 !important; }
.ia-float-plate__medal {
  width: 3.4rem;
  height: 3.4rem;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #FFFDF8, #EFE6CF);
}
.ia-float-plate__medal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 4) Hub catalog band: real torn-edge parchment plate behind the game grid.
   width:auto restores the full-bleed math (mv layer caps width to 100rem). */
html[data-theme="light"] body[data-arcade-surface] #public-games,
body.public-arcade-theme--light[data-arcade-surface] #public-games {
  width: auto;
  background:
    radial-gradient(120rem 30rem at 50% -30%, rgba(184,146,42,.05), transparent 70%),
    url("/assets/images/art/parchment-section-band.webp") center / 100% 100% no-repeat,
    var(--ia-parchment);
  box-shadow: none;
}

/* 4a) Dark theme: the detached banner rail needs the same engraved layout the
   light theme carries (it left the launchpad scope in v9.33 for both themes). */
html[data-theme="dark"] body[data-arcade-surface] .ia-banners,
body.public-arcade-theme--dark[data-arcade-surface] .ia-banners {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.2rem;
  width: min(1400px, calc(100% - 3rem));
  margin-inline: auto !important;
}
html[data-theme="dark"] body[data-arcade-surface] .ia-banners .public-arcade-launchpad__action[hidden],
body.public-arcade-theme--dark[data-arcade-surface] .ia-banners .public-arcade-launchpad__action[hidden] {
  display: none !important;
}
html[data-theme="dark"] body[data-arcade-surface] .ia-banners .public-arcade-launchpad__action,
body.public-arcade-theme--dark[data-arcade-surface] .ia-banners .public-arcade-launchpad__action {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow arrow" "title arrow" "desc arrow";
  align-items: center;
  column-gap: 1rem;
  min-height: 8.5rem;
  padding: 1.4rem 1.6rem !important;
  border: 1.5px solid color-mix(in srgb, var(--ia-gold-line) 60%, transparent) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,198,109,.08), transparent 55%),
    var(--ia-stage) !important;
  box-shadow: inset 0 0 0 1px rgba(232,198,109,.16), var(--ia-shadow-soft) !important;
  text-decoration: none !important;
}
html[data-theme="dark"] body[data-arcade-surface] .ia-banners .public-arcade-launchpad__action-eyebrow,
body.public-arcade-theme--dark[data-arcade-surface] .ia-banners .public-arcade-launchpad__action-eyebrow {
  grid-area: eyebrow;
  color: var(--ia-gold-action-1) !important;
  font: 700 .64rem/1.4 "JetBrains Mono", monospace !important;
  letter-spacing: .2em;
  text-transform: uppercase;
}
html[data-theme="dark"] body[data-arcade-surface] .ia-banners .public-arcade-launchpad__action strong,
body.public-arcade-theme--dark[data-arcade-surface] .ia-banners .public-arcade-launchpad__action strong {
  grid-area: title;
  color: #F5EFE2 !important;
  font: 700 1.25rem/1.2 "Fraunces", serif !important;
}
html[data-theme="dark"] body[data-arcade-surface] .ia-banners .public-arcade-launchpad__action > span:not(.public-arcade-launchpad__action-eyebrow):not(.public-arcade-launchpad__action-arrow),
body.public-arcade-theme--dark[data-arcade-surface] .ia-banners .public-arcade-launchpad__action > span:not(.public-arcade-launchpad__action-eyebrow):not(.public-arcade-launchpad__action-arrow) {
  grid-area: desc;
  color: color-mix(in srgb, #F5EFE2 72%, transparent) !important;
  font: 400 .92rem/1.5 "Inter", sans-serif !important;
}
html[data-theme="dark"] body[data-arcade-surface] .ia-banners .public-arcade-launchpad__action-arrow,
body.public-arcade-theme--dark[data-arcade-surface] .ia-banners .public-arcade-launchpad__action-arrow {
  grid-area: arrow;
  color: var(--ia-gold-action-1) !important;
  font-size: 1.6rem;
}

/* 4b) Catalog card rib accents: retire the mv violet cycle for the jewel quartet. */
#public-games .public-arcade-game-card:nth-of-type(4n + 1) { --public-card-accent: var(--ia-sapphire) !important; }
#public-games .public-arcade-game-card:nth-of-type(4n + 2) { --public-card-accent: var(--ia-garnet) !important; }
#public-games .public-arcade-game-card:nth-of-type(4n + 3) { --public-card-accent: var(--ia-emerald) !important; }
#public-games .public-arcade-game-card:nth-of-type(4n + 4) { --public-card-accent: var(--ia-bronze) !important; }

/* 5) Rooms: the HOST/JOIN field sits on the celestial stage art in both themes. */
html[data-theme="light"] body[data-arcade-surface] .entry-grid,
body.public-arcade-theme--light[data-arcade-surface] .entry-grid,
html[data-theme="dark"] body[data-arcade-surface] .entry-grid,
body.public-arcade-theme--dark[data-arcade-surface] .entry-grid {
  background:
    linear-gradient(180deg, rgba(16,20,43,.5), rgba(16,20,43,.74)),
    url("/assets/images/art/cosmic-game-stage.webp") center / cover no-repeat,
    var(--ia-stage);
}

/* 6) Game theater: cosmic stage behind the live game UI, inside the proscenium.
   Game pages carry #main-content on the BODY; the hub's #main-content is a
   <main> inside its body, so this cannot leak onto the hub. */
body#main-content[data-arcade-surface="game"] {
  border: 14px solid transparent;
  border-image: linear-gradient(180deg, #F6EEDB, #EDE0C2) 1;
  background:
    linear-gradient(180deg, rgba(16,20,43,.42), rgba(16,20,43,.6)),
    url("/assets/images/art/cosmic-game-stage.webp") center / cover no-repeat fixed,
    var(--ia-stage) !important;
  box-shadow:
    inset 0 0 0 2px var(--ia-gold-line),
    inset 0 0 0 8px #F6EEDB,
    inset 0 0 0 9px rgba(184,146,42,.35);
  /* Legacy game ink vars must read cream on the celestial stage in BOTH themes
     (this also cures the light-theme dark-on-dark lobby labels). */
  --ink: #F5EFE2;
  --muted: rgba(245, 239, 226, 0.72);
  --accent: var(--ia-gold-action-1);
}

/* 7) Avatar Lab: the pedestal spotlight opens onto the same celestial stage. */
html[data-theme="light"] body[data-arcade-surface] .pae-avatar-studio__preview,
body.public-arcade-theme--light[data-arcade-surface] .pae-avatar-studio__preview {
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(232,198,109,.16), transparent 60%),
    linear-gradient(180deg, rgba(16,20,43,.52), rgba(16,20,43,.78)),
    url("/assets/images/art/cosmic-game-stage.webp") center / cover no-repeat,
    var(--ia-stage) !important;
}

/* 8) Library hero: the scholarly card-fan plate replaces the mock card trio. */
.hero__catalog-art {
  width: min(100%, 640px);
  height: auto;
  border-radius: 10px;
  box-shadow: var(--ia-shadow-soft);
}

/* 9) VIP Lounge stage (decorative mascot scholars — never live player data). */
.public-arcade-vip-hero .pae-page__preview:has(.ia-vip-stage) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ia-vip-stage {
  position: relative;
  padding: 1.1rem 1.2rem 1.3rem;
  border: 1.5px solid var(--ia-gold-line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(232,198,109,.08), rgba(16,20,43,.35) 45%),
    url("/assets/images/art/cosmic-game-stage.webp") center / cover no-repeat,
    var(--ia-stage);
  box-shadow: inset 0 0 0 1px rgba(232,198,109,.25), var(--ia-shadow-soft);
}
.ia-vip-stage__plaque {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: 0 0 .85rem;
  color: var(--ia-gold-action-1);
  font: 700 .72rem/1.4 "JetBrains Mono", monospace;
  letter-spacing: .28em;
  text-transform: uppercase;
}
/* Generic per-theme paragraph ink rules must never repaint the plaque on navy. */
html[data-theme="light"] body[data-arcade-surface] .ia-vip-stage__plaque,
body.public-arcade-theme--light[data-arcade-surface] .ia-vip-stage__plaque,
html[data-theme="dark"] body[data-arcade-surface] .ia-vip-stage__plaque,
body.public-arcade-theme--dark[data-arcade-surface] .ia-vip-stage__plaque {
  color: var(--ia-gold-action-1) !important;
}
.ia-vip-stage__plaque::before, .ia-vip-stage__plaque::after { content: "✦"; font-size: .65rem; color: var(--ia-gold-line); }
.ia-vip-stage__row { display: flex; gap: clamp(.6rem, 1.6vw, 1rem); justify-content: center; }
.ia-vip-stage__row img {
  width: clamp(3.4rem, 6vw, 5.4rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--ia-gold-line);
  box-shadow: 0 0 0 2px rgba(232,198,109,.25), 0 6px 14px rgba(0,0,0,.4);
}

/* 10) Feedback: the bronze mailbox holds the hero's right column. */
main:has(#feedbackForm) .hero--public {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 300px);
  gap: 1.2rem;
  align-items: center;
}
main:has(#feedbackForm) .hero--public::after {
  content: "";
  display: block;
  aspect-ratio: 3 / 2;
  background: url("/assets/images/art/feedback-mailbox.webp") center / contain no-repeat;
  border-radius: 10px;
}
@media (max-width: 700px) {
  main:has(#feedbackForm) .hero--public { grid-template-columns: 1fr; }
}

/* 11) Changes: the climb panorama grounds the public record hero (own element
   so the page's hero background shorthand cannot swallow it). */
main:has(#changesTimeline) .hero--public::after {
  content: "";
  display: block;
  width: min(100%, 960px);
  aspect-ratio: 3 / 1;
  margin: 1.4rem auto 0;
  background: url("/assets/images/art/mountain-climb-panorama.webp") center bottom / contain no-repeat;
}

/* ==================== AVATAR ART FOUNDATION (owner ruling 2026-07-22) ====================
   The Lab is founded on the illustrated scholar portraits, not glyph tiles. */
.pae-avatar { position: relative; }
.pae-avatar__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.pae-avatar:has(.pae-avatar__art) {
  overflow: visible;
  border-radius: 50%;
  background: #131A36;
  box-shadow:
    0 0 0 2px var(--ia-gold-line),
    0 0 0 5px color-mix(in srgb, var(--pae-avatar-primary, #8A6B3F) 65%, transparent),
    0 6px 16px rgba(16, 20, 43, 0.35);
}
.pae-avatar:has(.pae-avatar__art) .pae-avatar__accessory {
  position: absolute;
  right: -6%;
  bottom: -4%;
  display: grid;
  place-items: center;
  width: 38%;
  height: 38%;
  border: 1.5px solid var(--ia-gold-line);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFDF8, #EFE6CF);
  font-size: calc(var(--pae-avatar-size, 52px) * 0.2);
  box-shadow: var(--ia-shadow-tight);
}
/* Builder portrait tiles: character cards per mockup 04. */
.pae-choice--portrait {
  display: grid !important;
  gap: .5rem;
  justify-items: center;
  align-content: start;
  padding: .8rem .55rem .65rem !important;
}
.pae-choice__portrait {
  width: clamp(3.8rem, 5.5vw, 5.2rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--ia-gold-line);
  box-shadow: 0 0 0 2px rgba(232, 198, 109, 0.22), 0 6px 14px rgba(26, 26, 46, 0.24);
}
.pae-choice--portrait .pae-choice__label { text-align: center; line-height: 1.25; }
/* Locked scholars keep their full-color portraits — the gold level chip
   carries the locked state; a grey wash read as broken art. */
.pae-choice[aria-disabled="true"] .pae-choice__portrait {
  filter: none;
}
.pae-choice[aria-pressed="true"].pae-choice--portrait .pae-choice__portrait {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ia-gold-action-1) 75%, transparent), 0 6px 14px rgba(26, 26, 46, 0.3);
}

/* ==================== ACCOUNT CONSOLE (mockup 12 composition) ==================== */
/* Layout: parchment access rail beside the control deck, engraved page rhythm. */
html[data-theme="light"] body[data-arcade-surface] .access-rail,
body.public-arcade-theme--light[data-arcade-surface] .access-rail {
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 45%, transparent) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(130% 120% at 12% 0%, #FFFDF8 0%, #F3EAD4 100%) #FFFDF8 !important;
  box-shadow: inset 0 0 0 4px rgba(255,253,248,.8), inset 0 0 0 5px rgba(184,146,42,.22), var(--ia-shadow-soft) !important;
  padding: 1.2rem 1.1rem 1.3rem !important;
}
html[data-theme="light"] body[data-arcade-surface] .access-rail__head .eyebrow,
body.public-arcade-theme--light[data-arcade-surface] .access-rail__head .eyebrow,
html[data-theme="light"] body[data-arcade-surface] .access-rail__head strong,
body.public-arcade-theme--light[data-arcade-surface] .access-rail__head strong {
  font-family: "Fraunces", serif !important;
}
/* The ghost-text tip card becomes a readable parchment aside. */
html[data-theme="light"] body[data-arcade-surface] .rail-note,
body.public-arcade-theme--light[data-arcade-surface] .rail-note {
  display: grid;
  gap: .3rem;
  margin-top: 1rem;
  padding: .85rem .95rem !important;
  border: 0 !important;
  border-left: 3px solid var(--ia-gold-line) !important;
  border-radius: 0 8px 8px 0 !important;
  background: color-mix(in srgb, var(--ia-parchment) 70%, #FFFDF8) !important;
}
html[data-theme="light"] body[data-arcade-surface] .rail-note strong,
body.public-arcade-theme--light[data-arcade-surface] .rail-note strong {
  color: var(--ia-gold-ink) !important;
  font: 700 .64rem/1.4 "JetBrains Mono", monospace !important;
  letter-spacing: .16em;
  text-transform: uppercase;
}
html[data-theme="light"] body[data-arcade-surface] .rail-note span,
body.public-arcade-theme--light[data-arcade-surface] .rail-note span {
  color: color-mix(in srgb, var(--ia-ink) 78%, transparent) !important;
  font: 400 .85rem/1.5 "Inter", sans-serif !important;
}
/* Context header: engraved hero with seals. */
html[data-theme="light"] body[data-arcade-surface] .context-header h1,
body.public-arcade-theme--light[data-arcade-surface] .context-header h1,
html[data-theme="light"] body[data-arcade-surface] .context-header h2,
body.public-arcade-theme--light[data-arcade-surface] .context-header h2 {
  font: 640 clamp(2rem, 4vw, 3rem)/1.06 "Fraunces", serif !important;
  letter-spacing: -.01em;
}
/* Section nav: engraved tab rule with gold active state. */
html[data-theme="light"] body[data-arcade-surface] .control-deck nav[aria-label] ,
body.public-arcade-theme--light[data-arcade-surface] .control-deck nav[aria-label] {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ia-gold-line) 40%, transparent);
  margin-bottom: 1.3rem;
}
html[data-theme="light"] body[data-arcade-surface] [data-section-link],
body.public-arcade-theme--light[data-arcade-surface] [data-section-link] {
  padding: .5rem .1rem .55rem !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: none !important;
  color: color-mix(in srgb, var(--ia-ink) 68%, transparent) !important;
  font: 700 .72rem/1.3 "JetBrains Mono", monospace !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none !important;
}
html[data-theme="light"] body[data-arcade-surface] [data-section-link][aria-current],
body.public-arcade-theme--light[data-arcade-surface] [data-section-link][aria-current],
html[data-theme="light"] body[data-arcade-surface] [data-section-link].is-active,
body.public-arcade-theme--light[data-arcade-surface] [data-section-link].is-active {
  color: var(--ia-gold-ink) !important;
  border-bottom-color: var(--ia-gold-action-2) !important;
}
/* Panels: illuminated plates with engraved headings. */
html[data-theme="light"] body[data-arcade-surface] .control-deck .panel,
body.public-arcade-theme--light[data-arcade-surface] .control-deck .panel {
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 42%, transparent) !important;
  border-radius: 12px !important;
  background: var(--ia-paper) !important;
  box-shadow: var(--ia-shadow-tight), var(--ia-shadow-soft) !important;
  padding: 1.4rem 1.5rem 1.5rem !important;
}
html[data-theme="light"] body[data-arcade-surface] .panel__heading h3,
body.public-arcade-theme--light[data-arcade-surface] .panel__heading h3 {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: "Fraunces", serif !important;
}
html[data-theme="light"] body[data-arcade-surface] .panel__heading h3::after,
body.public-arcade-theme--light[data-arcade-surface] .panel__heading h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ia-gold-line), transparent);
}
/* Access at a glance: ticket cells with hairline gold dividers. */
html[data-theme="light"] body[data-arcade-surface] .metric-grid,
body.public-arcade-theme--light[data-arcade-surface] .metric-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 !important;
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 45%, transparent);
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(140% 120% at 20% 0%, #FFFDF8 0%, #F6EFDD 100%) #FFFDF8;
}
html[data-theme="light"] body[data-arcade-surface] .metric-grid > *,
body.public-arcade-theme--light[data-arcade-surface] .metric-grid > * {
  padding: 1.1rem 1.2rem !important;
  border: 0 !important;
  border-left: 1px dotted color-mix(in srgb, var(--ia-gold-line) 55%, transparent) !important;
  background: none !important;
  box-shadow: none !important;
}
html[data-theme="light"] body[data-arcade-surface] .metric-grid > :first-child,
body.public-arcade-theme--light[data-arcade-surface] .metric-grid > :first-child { border-left: 0 !important; }
/* Identity card: gold-framed medallion panel. */
html[data-theme="light"] body[data-arcade-surface] .identity-card,
body.public-arcade-theme--light[data-arcade-surface] .identity-card {
  border: 1.5px solid var(--ia-gold-line) !important;
  border-radius: 12px !important;
  background: radial-gradient(130% 120% at 12% 20%, #FFFDF8 0%, #F3EAD4 100%) #FFFDF8 !important;
  box-shadow: inset 0 0 0 4px rgba(255,253,248,.8), inset 0 0 0 5px rgba(184,146,42,.24), var(--ia-shadow-soft) !important;
}
html[data-theme="light"] body[data-arcade-surface] .identity-card__avatar,
body.public-arcade-theme--light[data-arcade-surface] .identity-card__avatar {
  border: 2px solid var(--ia-gold-line) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 30%, #2A3560, #131A36) !important;
  color: var(--ia-gold-action-1) !important;
  box-shadow: 0 0 0 3px rgba(232,198,109,.2) !important;
  font-family: "Fraunces", serif !important;
}
/* Workspace list entries: engraved selection cards. */
html[data-theme="light"] body[data-arcade-surface] .workspace-list > *,
body.public-arcade-theme--light[data-arcade-surface] .workspace-list > * {
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 35%, transparent) !important;
  border-radius: 10px !important;
  background: var(--ia-paper) !important;
}
html[data-theme="light"] body[data-arcade-surface] .workspace-list > [aria-current="true"],
body.public-arcade-theme--light[data-arcade-surface] .workspace-list > [aria-current="true"],
html[data-theme="light"] body[data-arcade-surface] .workspace-list > .is-active,
body.public-arcade-theme--light[data-arcade-surface] .workspace-list > .is-active {
  border-color: #8F6E1C !important;
  border-left: 4px solid var(--ia-gold-action-2) !important;
  background: linear-gradient(180deg, #FFF8E4, #F7E9C4) !important;
}

/* ==================== CONTENT WORKROOM (mockup 08 composition) ==================== */
/* The teacher content console sits on the celestial navy field; work happens on
   cream plates. Both themes share the navy console (mockup 08). */
html[data-theme="light"] body[data-arcade-surface="product"]:has(.media-library) main,
body.public-arcade-theme--light[data-arcade-surface="product"]:has(.media-library) main,
html[data-theme="dark"] body[data-arcade-surface="product"]:has(.media-library) main,
body.public-arcade-theme--dark[data-arcade-surface="product"]:has(.media-library) main,
body[data-arcade-surface="product"]:has(.media-library) main,
body[data-arcade-surface="product"]:has(.media-library) .site-main {
  position: relative;
  background:
    linear-gradient(180deg, rgba(16,20,43,.62), rgba(16,20,43,.8)),
    url("/assets/images/art/cosmic-game-stage.webp") center / cover no-repeat fixed,
    var(--ia-stage) !important;
  border-radius: 0;
}
/* The hero rides directly on the navy field — its page-local cream panel would
   otherwise swallow the cream ink. */
body[data-arcade-surface="product"]:has(.media-library) .hero {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
body[data-arcade-surface="product"]:has(.media-library) .hero .eyebrow,
body[data-arcade-surface="product"]:has(.media-library) .hero .kicker {
  color: var(--ia-gold-action-1) !important;
}
body[data-arcade-surface="product"]:has(.media-library) .hero h1 {
  color: #F5EFE2 !important;
  font-family: "Fraunces", serif !important;
}
body[data-arcade-surface="product"]:has(.media-library) .hero h1::after {
  content: "–✦–";
  display: block;
  margin-top: .4rem;
  color: var(--ia-gold-line);
  font-size: .45em;
  letter-spacing: .3em;
}
body[data-arcade-surface="product"]:has(.media-library) .hero .lede,
body[data-arcade-surface="product"]:has(.media-library) .hero p {
  color: color-mix(in srgb, #F5EFE2 78%, var(--ia-gold-action-1)) !important;
}
/* Work panels: cream illuminated plates on the navy field. */
body[data-arcade-surface="product"]:has(.media-library) .cards > *,
body[data-arcade-surface="product"]:has(.media-library) .media-editor,
body[data-arcade-surface="product"]:has(.media-library) .media-library {
  border: 1.5px solid var(--ia-gold-line) !important;
  border-radius: 12px !important;
  background: var(--ia-paper) !important;
  box-shadow: inset 0 0 0 1px rgba(184,146,42,.25), 0 18px 44px rgba(0,0,0,.4) !important;
}
/* Upload well: deckle-edged parchment drop zone. */
body[data-arcade-surface="product"]:has(.media-library) .media-list:empty,
body[data-arcade-surface="product"]:has(.media-library) .media-list > .empty,
body[data-arcade-surface="product"]:has(.media-library) .empty {
  border: 2px dashed color-mix(in srgb, var(--ia-gold-line) 55%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--ia-parchment) 60%, #FFFDF8) !important;
}
/* Slide kickers: engraved plate numbers. */
body[data-arcade-surface="product"]:has(.media-library) .kicker {
  color: var(--ia-gold-ink) !important;
  font: 700 .66rem/1.4 "JetBrains Mono", monospace !important;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ==================== WIDE ADAPTIVE MEASURES (owner ruling 2026-07-22) ====================
   Pages breathe to the viewport instead of the legacy 1120–1280px caps. */
body[data-arcade-surface] main.shell,
body[data-arcade-surface] section.shell,
body[data-arcade-surface] .report-shell {
  width: min(1720px, calc(100% - 3rem)) !important;
}
body[data-arcade-surface] .catalog { width: min(1720px, calc(100% - 3rem)) !important; }
body[data-arcade-surface] .search-deck { width: min(1620px, calc(100% - 3rem)) !important; }
body[data-arcade-surface] .legal-shell { width: min(1440px, calc(100% - 3rem)) !important; }
body[data-arcade-surface] .bank-details,
body[data-arcade-surface] .template-review,
body[data-arcade-surface] .question-workbench { width: min(1560px, 100%) !important; }
body[data-arcade-surface] .pae-avatar-lab__intro { max-width: min(1720px, 100%) !important; }
html[data-theme="light"] body[data-arcade-surface] #public-games > *,
body.public-arcade-theme--light[data-arcade-surface] #public-games > * {
  width: min(1680px, 100%);
}
html[data-theme="light"] body[data-arcade-surface] .ia-banners,
body.public-arcade-theme--light[data-arcade-surface] .ia-banners,
html[data-theme="dark"] body[data-arcade-surface] .ia-banners,
body.public-arcade-theme--dark[data-arcade-surface] .ia-banners {
  width: min(1680px, calc(100% - 3rem));
}
html[data-theme="light"] body[data-arcade-surface] .pae-avatar-studio,
body.public-arcade-theme--light[data-arcade-surface] .pae-avatar-studio {
  width: min(1680px, 100%);
}
/* Rooms page main (page-local cap was 1240px). */
body[data-arcade-surface] main#main.rooms-main,
body[data-arcade-surface="product"]:has(.entry-grid) main {
  width: min(1680px, calc(100% - 36px)) !important;
}

/* Legacy per-page top bars: the release shell owns navigation. The old bars
   collapse to a slim, transparent utility strip keeping only sign-in/out. */
body[data-arcade-surface]:not([data-arcade-access="owner"]) header:not(.public-arcade-shell):has(#signOutButton) {
  display: flex;
  justify-content: flex-end;
  padding: .4rem clamp(1rem, 3vw, 2.2rem) 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-arcade-surface]:not([data-arcade-access="owner"]) header:not(.public-arcade-shell):has(#signOutButton) .brand { display: none !important; }
body[data-arcade-surface]:not([data-arcade-access="owner"]) header:not(.public-arcade-shell):has(#signOutButton) .topnav a { display: none !important; }
body[data-arcade-surface]:not([data-arcade-access="owner"]) header:not(.public-arcade-shell):has(#signOutButton) .topnav button {
  min-height: 34px;
  padding: .35rem 1rem !important;
  border: 1.5px solid color-mix(in srgb, var(--ia-gold-line) 60%, transparent) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: inherit !important;
  font: 600 .8rem/1 "Inter", sans-serif !important;
}

/* Violet-era privacy plate becomes an engraved aside (violet BANNED):
   parchment in light, ornate navy in dark — each theme keeps its ground. */
html[data-theme="light"] body[data-arcade-surface] .privacy-plate,
body.public-arcade-theme--light[data-arcade-surface] .privacy-plate {
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 50%, transparent) !important;
  border-radius: 10px !important;
  background: radial-gradient(130% 120% at 12% 20%, #FFFDF8 0%, #F3EAD4 100%) #FFFDF8 !important;
  color: #1A1A2E !important;
}
html[data-theme="dark"] body[data-arcade-surface] .privacy-plate,
body.public-arcade-theme--dark[data-arcade-surface] .privacy-plate {
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 60%, transparent) !important;
  border-radius: 10px !important;
  background: radial-gradient(120% 90% at 50% 0%, rgba(232,198,109,.07), transparent 55%) #10142B !important;
  color: #F5EFE2 !important;
}
body[data-arcade-surface] .privacy-plate::before {
  content: "✦" !important;
  border: 1.5px solid var(--ia-gold-line) !important;
  background: radial-gradient(circle at 35% 30%, #2A3560, #131A36) !important;
  color: var(--ia-gold-action-1) !important;
}
html[data-theme="light"] body[data-arcade-surface] .privacy-plate strong,
body.public-arcade-theme--light[data-arcade-surface] .privacy-plate strong { color: #1A1A2E !important; }
html[data-theme="light"] body[data-arcade-surface] .privacy-plate span,
body.public-arcade-theme--light[data-arcade-surface] .privacy-plate span { color: rgba(26, 26, 46, 0.78) !important; }
html[data-theme="dark"] body[data-arcade-surface] .privacy-plate strong,
body.public-arcade-theme--dark[data-arcade-surface] .privacy-plate strong { color: #F5EFE2 !important; }
html[data-theme="dark"] body[data-arcade-surface] .privacy-plate span,
body.public-arcade-theme--dark[data-arcade-surface] .privacy-plate span { color: rgba(245, 239, 226, 0.78) !important; }

/* Content console: the celestial field is FULL-BLEED on the body; the shell
   stays a centered wide measure on top of it. */
html[data-theme="light"] body[data-arcade-surface="product"]:has(.media-library),
body.public-arcade-theme--light[data-arcade-surface="product"]:has(.media-library),
html[data-theme="dark"] body[data-arcade-surface="product"]:has(.media-library),
body.public-arcade-theme--dark[data-arcade-surface="product"]:has(.media-library) {
  background:
    linear-gradient(180deg, rgba(16,20,43,.62), rgba(16,20,43,.8)),
    url("/assets/images/art/cosmic-game-stage.webp") center / cover no-repeat fixed,
    var(--ia-stage) !important;
}
html[data-theme="light"] body[data-arcade-surface="product"]:has(.media-library) main,
body.public-arcade-theme--light[data-arcade-surface="product"]:has(.media-library) main,
html[data-theme="dark"] body[data-arcade-surface="product"]:has(.media-library) main,
body.public-arcade-theme--dark[data-arcade-surface="product"]:has(.media-library) main,
body[data-arcade-surface="product"]:has(.media-library) main {
  background: none !important;
}
/* Climb rail reads on the navy field. */
body[data-arcade-surface="product"]:has(.media-library) .climb-rail li {
  border-top-color: color-mix(in srgb, var(--ia-gold-line) 50%, transparent) !important;
  color: color-mix(in srgb, #F5EFE2 78%, var(--ia-gold-action-1)) !important;
}
body[data-arcade-surface="product"]:has(.media-library) .climb-rail li::before {
  border-color: var(--ia-stage) !important;
  background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)) !important;
  color: #1A1A2E !important;
}
body[data-arcade-surface="product"]:has(.media-library) .status {
  border-radius: 8px;
}

/* ==================== AVATAR PICKER GRID + SCHOLAR DOSSIER ==================== */
/* Roomy portrait grid — no crammed rows, labels never collide with medallions. */
html[data-theme="light"] body[data-arcade-surface] .pae-option-grid:has(.pae-choice--portrait),
body.public-arcade-theme--light[data-arcade-surface] .pae-option-grid:has(.pae-choice--portrait),
body[data-arcade-surface] .pae-option-grid:has(.pae-choice--portrait) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
  gap: 1rem !important;
  align-items: stretch;
}
body[data-arcade-surface] .pae-choice--portrait {
  min-height: 0 !important;
  height: auto !important;
  grid-template-rows: auto auto auto;
  align-content: start !important;
  place-items: center;
  gap: .6rem !important;
  padding: 1.1rem .8rem 1rem !important;
}
body[data-arcade-surface] .pae-choice--portrait .pae-choice__portrait {
  width: clamp(4.6rem, 6.5vw, 6rem);
}
body[data-arcade-surface] .pae-choice--portrait .pae-choice__label {
  font-size: .88rem;
  line-height: 1.3;
  overflow: visible;
}
/* Dossier chip: opens the scholar card without stealing the select click. */
.pae-choice__inspect {
  position: absolute;
  top: .3rem;
  right: .3rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ia-gold-line);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFDF8, #EFE6CF);
  color: var(--ia-gold-ink);
  font: 700 .95rem/1 "Fraunces", serif;
  cursor: pointer;
}
.pae-choice__inspect:hover { background: linear-gradient(180deg, #FFF8E4, #F7E9C4); }
.pae-option-cell { position: relative; display: grid; }
.pae-option-cell > .pae-choice { height: 100%; }

/* The Scholar Dossier: an illuminated trading card. The stage slot is sized
   for the future motion/video art drop-in (same aspect, same node). */
.ia-dossier {
  width: min(880px, calc(100vw - 2rem));
  max-height: min(92vh, 1040px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  overflow: visible;
}
.ia-dossier::backdrop { background: rgba(10, 14, 32, 0.72); }
.ia-dossier__frame {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  border: 3px solid var(--ia-gold-line);
  border-radius: 18px;
  background: radial-gradient(140% 120% at 20% 0%, #FFFDF8 0%, #F4EAD2 100%);
  box-shadow: 0 0 0 1px #8F6E1C, inset 0 0 0 1px rgba(184,146,42,.4), 0 30px 80px rgba(0,0,0,.5);
  overflow: hidden;
  max-height: inherit;
}
.ia-dossier__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background:
    radial-gradient(70% 55% at 50% 34%, rgba(232,198,109,.18), transparent 60%),
    linear-gradient(180deg, rgba(16,20,43,.35), rgba(16,20,43,.7)),
    url("/assets/images/art/cosmic-game-stage.webp") center / cover no-repeat,
    var(--ia-stage);
}
.ia-dossier__stage img,
.ia-dossier__stage video {
  width: min(78%, 340px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--ia-gold-line);
  box-shadow: 0 0 0 4px rgba(232,198,109,.22), 0 18px 44px rgba(0,0,0,.5);
}
.ia-dossier__level {
  margin-top: 1rem;
  color: var(--ia-gold-action-1);
  font: 700 .68rem/1.4 "JetBrains Mono", monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.ia-dossier__body {
  display: grid;
  align-content: start;
  gap: .85rem;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  overflow-y: auto;
}
.ia-dossier__eyebrow {
  margin: 0;
  color: var(--ia-gold-ink);
  font: 700 .66rem/1.4 "JetBrains Mono", monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.ia-dossier__name { margin: 0; color: var(--ia-ink); font: 640 clamp(1.5rem, 2.6vw, 2.1rem)/1.08 "Fraunces", serif; }
.ia-dossier__motto { margin: 0; color: var(--ia-gold-ink); font: italic 500 .98rem/1.5 "Fraunces", serif; }
.ia-dossier__lore { margin: 0; color: color-mix(in srgb, var(--ia-ink) 78%, transparent); font: 400 .92rem/1.6 "Inter", sans-serif; }
.ia-dossier__stats { display: grid; gap: .45rem; margin: .2rem 0 0; }
.ia-dossier__stat { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: .7rem; }
.ia-dossier__stat dt { color: var(--ia-ink); font: 700 .64rem/1.3 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.ia-dossier__meter { height: 7px; border: 1px solid color-mix(in srgb, var(--ia-gold-line) 55%, transparent); border-radius: 999px; background: #F1E7D0; overflow: hidden; }
.ia-dossier__meter i { display: block; height: 100%; width: var(--fill, 50%); background: linear-gradient(90deg, var(--ia-gold-action-1), var(--ia-gold-action-2)); }
.ia-dossier__stat dd { margin: 0; color: var(--ia-gold-ink); font: 700 .78rem/1 "Fraunces", serif; }
.ia-dossier__section h3 {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .3rem 0 .35rem;
  color: var(--ia-ink);
  font: 700 .74rem/1.3 "JetBrains Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ia-dossier__section h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ia-gold-line), transparent); }
.ia-dossier__section ul { margin: 0; padding: 0 0 0 1.1rem; color: color-mix(in srgb, var(--ia-ink) 80%, transparent); font: 400 .88rem/1.55 "Inter", sans-serif; }
.ia-dossier__section li::marker { content: "✦  "; color: var(--ia-gold-line); font-size: .7em; }
.ia-dossier__powerup {
  padding: .7rem .9rem;
  border: 1.5px solid var(--ia-gold-line);
  border-radius: 10px;
  background: linear-gradient(180deg, #FFF8E4, #F7E9C4);
  color: var(--ia-ink);
  font: 500 .88rem/1.5 "Inter", sans-serif;
}
.ia-dossier__powerup strong { font-family: "Fraunces", serif; }
.ia-dossier__close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ia-gold-line);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFDF8, #EFE6CF);
  color: var(--ia-ink);
  font: 700 1rem/1 "Inter", sans-serif;
  cursor: pointer;
}
@media (max-width: 760px) {
  .ia-dossier__frame { grid-template-columns: 1fr; }
  .ia-dossier__stage { padding: 1.2rem; }
  .ia-dossier__stage img, .ia-dossier__stage video { width: min(60%, 240px); }
}

/* 12) Legal rail: the records desk sits above the table of contents (light). */
html[data-theme="light"] body[data-arcade-surface="legal"] .legal-rail::before,
body.public-arcade-theme--light[data-arcade-surface="legal"] .legal-rail::before {
  content: "";
  display: block;
  aspect-ratio: 3 / 2;
  margin-bottom: .9rem;
  border-radius: 8px;
  background: url("/assets/images/art/report-document-stack.webp") center / cover no-repeat;
  box-shadow: var(--ia-shadow-tight);
}

/* ==================== ARC-SPACING-01: PER-PAGE WIDE-MEASURE TUNING ====================
   Keep immersive frames wide while giving prose, consoles, card collections, and
   HOST/JOIN panels presentation measures suited to their actual content. */
body[data-arcade-surface] {
  --arc-spacing-gutter: clamp(1rem, 3vw, 3rem);
  --arc-spacing-console: 1680px;
}

/* Form and console frames retain the wide pass, with one consistent viewport gutter. */
body[data-arcade-surface] main.shell,
body[data-arcade-surface] section.shell,
body[data-arcade-surface] .report-shell {
  width: min(var(--arc-spacing-console), calc(100% - var(--arc-spacing-gutter) - var(--arc-spacing-gutter))) !important;
  margin-inline: auto;
}
body[data-arcade-surface="product"] .studio {
  width: min(1720px, calc(100% - var(--arc-spacing-gutter) - var(--arc-spacing-gutter))) !important;
  margin-inline: auto;
}
body[data-arcade-surface] .catalog,
body[data-arcade-surface] .search-deck {
  width: min(var(--arc-spacing-console), calc(100% - var(--arc-spacing-gutter) - var(--arc-spacing-gutter))) !important;
}
body[data-arcade-surface] .pae-avatar-studio {
  width: min(var(--arc-spacing-console), 100%) !important;
  margin-inline: auto;
}
body[data-arcade-surface] #public-games {
  width: 100% !important;
  max-width: none !important;
}
body[data-arcade-surface] #public-games > * {
  width: min(var(--arc-spacing-console), calc(100% - var(--arc-spacing-gutter) - var(--arc-spacing-gutter))) !important;
  margin-inline: auto;
}

/* Reading surfaces: wide page furniture, bounded prose. Tables and control rows
   may use the remaining frame without forcing paragraphs into long scan lines. */
body[data-arcade-surface="legal"] .legal-shell {
  width: min(1440px, calc(100% - var(--arc-spacing-gutter) - var(--arc-spacing-gutter))) !important;
}
body[data-arcade-surface="legal"] .legal-hero > :first-child,
body[data-arcade-surface="legal"] .legal-section > :where(p, ul, ol) {
  max-width: 80ch;
}
body[data-arcade-surface="product"]:has(#feedbackForm) .shell--narrow,
body[data-arcade-surface="product"]:has(#changesTimeline) .shell--narrow {
  width: min(1440px, calc(100% - var(--arc-spacing-gutter) - var(--arc-spacing-gutter))) !important;
}
body[data-arcade-surface="product"] main:has(#feedbackForm) .hero--public {
  width: min(1100px, 100%);
  max-width: none;
  margin-inline: auto;
}
body[data-arcade-surface="product"] main:has(#feedbackForm) .hero--public > :first-child {
  max-width: 70ch;
}
body[data-arcade-surface="product"] main:has(#feedbackForm) > :where(.notice, .card, section:not(.hero)),
body[data-arcade-surface="product"] main:has(#changesTimeline) > :where(.toolbar, .notice, .timeline, .text-center) {
  width: min(90ch, 100%);
  margin-inline: auto;
}
body[data-arcade-surface="product"] main:has(#changesTimeline) .hero--public {
  width: min(90ch, 100%);
  max-width: none;
  margin-inline: auto;
}
.ia-dossier__lore,
.ia-dossier__section,
.ia-dossier__powerup {
  max-width: 72ch;
}

/* Card collections gain columns instead of inflating individual cards. */
body[data-arcade-surface] .bank-grid,
body[data-arcade-surface] .public-arcade-game-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)) !important;
  justify-content: center;
}
body[data-arcade-surface] .bank-grid > .bank-card,
body[data-arcade-surface] .public-arcade-game-grid > .public-arcade-game-card {
  width: 100%;
  max-width: 26.25rem !important;
  justify-self: center;
}
body[data-arcade-surface] .pae-option-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)) !important;
  justify-content: start;
}
body[data-arcade-surface] .pae-option-grid:has(.pae-choice--portrait) {
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)) !important;
}
body[data-arcade-surface] .pae-option-grid > * {
  width: 100%;
  max-width: 13rem;
  justify-self: start;
}
body[data-arcade-surface] .pae-option-grid:has(.pae-choice--portrait) > * {
  max-width: 14rem;
}

/* Rooms: two centered, bounded consoles. Removing the viewport-bleed padding
   keeps JOIN useful at 2000px instead of turning it into a mostly empty slab. */
body[data-arcade-surface="product"]:has(.entry-grid) main {
  width: min(var(--arc-spacing-console), calc(100% - var(--arc-spacing-gutter) - var(--arc-spacing-gutter))) !important;
  margin-inline: auto;
}
body[data-arcade-surface="product"] .entry-grid {
  width: min(1568px, calc(100% - var(--arc-spacing-gutter) - var(--arc-spacing-gutter))) !important;
  margin-inline: auto !important;
  padding: var(--arc-spacing-gutter) !important;
  box-sizing: border-box;
}
body[data-arcade-surface="product"] .entry-card {
  width: 100%;
  max-width: 720px;
  min-width: 0;
  height: auto;
  justify-self: center;
}

/* Existing wrappers already expose natural two-column account, content, Studio,
   and progress layouts. Assignments needs its two sibling panels composed. */
@media (min-width: 1401px) {
  body[data-arcade-surface="product"] main.shell:has(#assignmentList) {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    column-gap: var(--arc-spacing-gutter);
    align-items: start;
  }
  body[data-arcade-surface="product"] main.shell:has(#assignmentList) > :where(.hero, .climb-rail, #pageStatus, section:has(#assignmentList)) {
    grid-column: 1 / -1;
  }
  body[data-arcade-surface="product"] main.shell:has(#assignmentList) > :where(section:has(#redeemForm), #createPanel) {
    min-width: 0;
  }
  body[data-arcade-surface="product"] .entry-grid:not(.entry-grid--admission) {
    grid-template-columns: repeat(2, minmax(0, 720px)) !important;
    justify-content: center;
    gap: clamp(1rem, 2vw, 2rem);
    align-items: start;
  }
}

@media (max-width: 1400px) and (min-width: 901px) {
  body[data-arcade-surface="product"] .entry-grid:not(.entry-grid--admission) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 2vw, 2rem);
    align-items: start;
  }
}

@media (max-width: 900px) {
  body[data-arcade-surface="product"] .entry-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .ia-dossier__stat {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ia-dossier__stat dt {
    grid-column: 1 / -1;
  }
}

/* ARC-SPACING-01 addendum: option tiles never compress below the 44px
   accessibility floor at any viewport (mobile palette tiles regressed). */
body[data-arcade-surface] .pae-option-grid .pae-choice {
  min-height: 64px !important;
  min-width: 64px !important;
}

/* ========================================================================
   ARC-IA-01 — Game Play field guide and The Scholar's Ascent brand story.
   These pages share one climb language: parchment ground, navy stages,
   engraved gold rules, and the garnet/sapphire/emerald/bronze jewel cycle.
   ======================================================================== */
.ia-guide-page,
.ia-about-page {
  background: var(--ia-canvas);
  color: var(--ia-ink);
}
.ia-guide,
.ia-about {
  box-sizing: border-box;
  width: min(1680px, 100%);
  margin-inline: auto;
  padding: clamp(1rem, 2.6vw, 2.75rem) clamp(1rem, 3.2vw, 3.5rem) clamp(4rem, 8vw, 7rem);
  overflow: clip;
}
.ia-guide *,
.ia-about * {
  box-sizing: border-box;
}
.ia-guide h1,
.ia-guide h2,
.ia-guide h3,
.ia-about h1,
.ia-about h2,
.ia-about h3 {
  text-wrap: balance;
}
.ia-guide p,
.ia-about p {
  text-wrap: pretty;
}

/* Game Play hero: broad parchment proscenium with one engraved count crest. */
.ia-guide-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(28rem, 58vw, 42rem);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(18rem, .55fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  padding: clamp(2rem, 7vw, 7rem);
  border: 1px solid var(--ia-etch);
  border-radius: 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ia-paper) 96%, transparent) 0 49%, color-mix(in srgb, var(--ia-paper) 68%, transparent) 70%, transparent),
    url('/assets/images/art/mountain-climb-panorama.webp') right center / cover no-repeat,
    var(--ia-parchment);
  box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--ia-gold-line) 8%, transparent), var(--ia-shadow-soft);
}
.ia-guide-hero::before,
.ia-about-hero::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 38%, transparent);
  border-radius: 11px;
  pointer-events: none;
}
.ia-guide-hero__copy { max-width: 53rem; }
.ia-guide-hero h1,
.ia-about-hero h1 {
  margin: 0;
  color: var(--ia-ink);
  font: 700 clamp(3rem, 7vw, 6.8rem)/.93 "Fraunces", serif;
  letter-spacing: -.045em;
}
.ia-guide-hero h1 em,
.ia-about-hero h1 em {
  color: var(--ia-garnet);
  font-weight: 600;
}
.ia-guide-hero__copy > p:not(.ia-eyebrow),
.ia-about-hero__copy > p:not(.ia-eyebrow) {
  max-width: 62ch;
  margin: 1.5rem 0 0;
  color: color-mix(in srgb, var(--ia-ink) 78%, transparent);
  font: 500 clamp(1rem, 1.6vw, 1.25rem)/1.7 "Inter", sans-serif;
}
.ia-guide-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}
.ia-guide-hero__crest {
  justify-self: center;
  display: grid;
  place-items: center;
  align-content: center;
  width: clamp(11rem, 18vw, 16rem);
  aspect-ratio: 1;
  border: 2px solid var(--ia-gold-line);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ia-stage) 88%, var(--ia-sapphire)) 0 62%, var(--ia-stage) 63%);
  color: var(--ia-gold-action-1);
  box-shadow: inset 0 0 0 7px rgba(232, 198, 109, .10), 0 20px 48px rgba(26, 26, 46, .26);
}
.ia-guide-hero__crest span { font: 700 clamp(4rem, 8vw, 7rem)/.8 "Fraunces", serif; }
.ia-guide-hero__crest small { margin-top: .75rem; font: 700 .65rem/1.4 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase; }

.ia-guide-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3.5rem);
  align-items: start;
  margin-top: clamp(2rem, 5vw, 5rem);
}
.ia-guide-ledger { min-width: 0; }
.ia-guide .ia-toc {
  top: 7rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding: 1.15rem;
  border-top: 4px solid var(--ia-gold-line);
}
.ia-guide .ia-toc strong {
  display: block;
  margin: 0 0 .65rem;
  color: var(--ia-bronze);
  font: 700 .65rem/1.4 "JetBrains Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ia-guide .ia-toc a { min-height: 40px; display: flex; align-items: center; border-bottom: 1px solid var(--ia-etch-soft); }
.ia-guide .ia-toc a:last-child { border-bottom: 0; }
.ia-guide .ia-toc a:focus-visible { outline: 3px solid var(--ia-gold-action-1); outline-offset: 1px; }
.ia-guide-chapters { display: grid; gap: clamp(2rem, 5vw, 5rem); min-width: 0; }

.ia-game-chapter {
  --ia-chapter-jewel: var(--ia-garnet);
  scroll-margin-top: 7rem;
  border: 1px solid color-mix(in srgb, var(--ia-gold-line) 52%, transparent);
  border-radius: 16px;
  background-color: var(--ia-paper);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ia-paper) 96%, transparent), color-mix(in srgb, var(--ia-parchment) 76%, var(--ia-paper))),
    url('/assets/images/art/cream-paper-texture.webp') center / 34rem auto repeat;
  box-shadow: var(--ia-shadow-tight), var(--ia-shadow-soft);
  overflow: hidden;
}
.ia-game-chapter--sapphire { --ia-chapter-jewel: var(--ia-sapphire); }
.ia-game-chapter--emerald { --ia-chapter-jewel: var(--ia-emerald); }
.ia-game-chapter--bronze { --ia-chapter-jewel: var(--ia-bronze); }
.ia-title-band {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .25rem;
  padding: 1.1rem clamp(1rem, 3vw, 2rem) 1.2rem;
  border-bottom: 1px solid var(--ia-gold-line);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 2px, transparent 2px 6px),
    linear-gradient(90deg, var(--ia-stage), color-mix(in srgb, var(--ia-stage) 74%, var(--ia-chapter-jewel)), var(--ia-stage));
  color: #F5EFE2;
  text-align: center;
}
.ia-title-band::before,
.ia-title-band::after { content: ""; position: absolute; top: 50%; width: min(14%, 7rem); height: 1px; background: linear-gradient(90deg, transparent, var(--ia-gold-action-1)); }
.ia-title-band::before { left: 2%; }
.ia-title-band::after { right: 2%; transform: rotate(180deg); }
.ia-title-band span { color: var(--ia-gold-action-1); font: 700 .62rem/1.3 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase; }
.ia-title-band h2 { margin: 0; color: #FFFDF8; font: 700 clamp(1.65rem, 3vw, 2.6rem)/1 "Fraunces", serif; }
.ia-title-band p { margin: .15rem 0 0; color: color-mix(in srgb, #F5EFE2 76%, var(--ia-gold-action-1)); font: 500 .82rem/1.4 "Inter", sans-serif; }
.ia-game-chapter__grid {
  display: grid;
  grid-template-columns: minmax(18rem, .85fr) minmax(24rem, 1.15fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 3rem);
}
.ia-game-chapter:nth-child(even) .ia-game-plate { order: 2; }
.ia-game-plate {
  position: relative;
  margin: 0;
  border: 1px solid var(--ia-gold-line);
  border-radius: 13px;
  background: var(--ia-stage);
  box-shadow: inset 0 0 0 5px rgba(232, 198, 109, .1), 0 18px 42px rgba(26, 26, 46, .24);
  overflow: hidden;
  transform: perspective(900px) rotateX(0) rotateY(0);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.ia-game-plate::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(232,198,109,.42); border-radius: 8px; pointer-events: none; }
.ia-game-plate:hover { transform: perspective(900px) rotateX(1.6deg) rotateY(-2deg) translateY(-5px); box-shadow: inset 0 0 0 5px rgba(232, 198, 109, .12), 0 26px 56px rgba(26, 26, 46, .30); }
.ia-game-chapter:nth-child(even) .ia-game-plate:hover { transform: perspective(900px) rotateX(1.6deg) rotateY(2deg) translateY(-5px); }
.ia-game-plate img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ia-game-plate figcaption { position: relative; z-index: 1; padding: .75rem 1rem; color: color-mix(in srgb, #F5EFE2 80%, var(--ia-gold-action-1)); font: 500 .72rem/1.5 "Inter", sans-serif; text-align: center; }
.ia-game-chapter__content { min-width: 0; }
.ia-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem; }
.ia-game-chapter .ia-chip { border-color: color-mix(in srgb, var(--ia-chapter-jewel) 60%, var(--ia-gold-line)); background: color-mix(in srgb, var(--ia-chapter-jewel) 8%, var(--ia-paper)); }
.ia-game-chapter .ia-stepper { gap: 1rem; }
.ia-game-chapter .ia-step h3 { margin: 0; color: var(--ia-ink); font: 700 1rem/1.25 "Fraunces", serif; }
.ia-game-chapter .ia-step p { max-width: 62ch; margin: .25rem 0 0; color: color-mix(in srgb, var(--ia-ink) 72%, transparent); font: 400 .86rem/1.55 "Inter", sans-serif; }
.ia-special {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--ia-chapter-jewel);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--ia-chapter-jewel) 7%, var(--ia-paper));
}
.ia-special strong { color: var(--ia-chapter-jewel); font: 700 .66rem/1.4 "JetBrains Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.ia-special p { margin: .35rem 0 0; color: var(--ia-ink); font: 500 .88rem/1.55 "Inter", sans-serif; }
.ia-chapter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.15rem; margin-top: 1.4rem; }
.ia-chapter-actions > a:not(.ia-btn-gold) { min-height: 44px; display: inline-flex; align-items: center; color: var(--ia-ink); font: 700 .84rem/1.3 "Inter", sans-serif; text-underline-offset: .25em; }
.ia-guide-finale { display: grid; justify-items: center; gap: 1rem; margin-top: clamp(2.5rem, 7vw, 7rem); text-align: center; }
.ia-guide-finale h2 { max-width: 22ch; margin: 0; color: #FFFDF8; font: 700 clamp(1.8rem, 4vw, 3.4rem)/1.05 "Fraunces", serif; }
.ia-guide-finale > p:not(.ia-eyebrow) { max-width: 58ch; margin: 0; color: color-mix(in srgb, #F5EFE2 80%, var(--ia-gold-action-1)); }
.ia-guide-finale > div { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.ia-guide-finale .ia-btn-outline { border-color: #F5EFE2; color: #F5EFE2 !important; }

/* About: one broad engraved story, then a literal two-summit relationship. */
.ia-about-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(31rem, 62vw, 48rem);
  display: grid;
  align-items: center;
  padding: clamp(2rem, 7vw, 7rem);
  border: 1px solid var(--ia-etch);
  border-radius: 18px;
  background: linear-gradient(90deg, var(--ia-paper) 0 46%, color-mix(in srgb, var(--ia-paper) 70%, transparent) 66%, transparent), var(--ia-parchment);
  box-shadow: var(--ia-shadow-soft);
  overflow: hidden;
}
.ia-about-hero__copy { position: relative; z-index: 2; max-width: 58rem; }
.ia-about-hero__mountain { position: absolute; inset: 0 0 0 34%; z-index: -1; background: url('/assets/images/art/mountain-climb-panorama.webp') right center / cover no-repeat; }
.ia-about-mission { width: min(78rem, calc(100% - 2rem)); margin: clamp(-3.5rem, -5vw, -2rem) auto 0; z-index: 2; text-align: center; }
.ia-about-mission .ia-eyebrow { justify-content: center; color: var(--ia-gold-action-1); }
.ia-about-mission .ia-panel__title { font-size: clamp(1.7rem, 3.5vw, 3rem); letter-spacing: 0; text-transform: none; }
.ia-about-mission > p:last-child { max-width: 70ch; margin: .8rem auto 0; color: color-mix(in srgb, #F5EFE2 82%, var(--ia-gold-action-1)); font: 500 clamp(.98rem, 1.5vw, 1.15rem)/1.7 "Inter", sans-serif; }
.ia-section-heading { max-width: 72ch; margin: 0 auto clamp(1.5rem, 4vw, 3rem); text-align: center; }
.ia-section-heading .ia-eyebrow { justify-content: center; }
.ia-section-heading h2 { margin: 0; color: var(--ia-ink); font: 700 clamp(2rem, 4vw, 3.8rem)/1 "Fraunces", serif; }
.ia-section-heading > p:last-child { margin: .8rem auto 0; color: color-mix(in srgb, var(--ia-ink) 72%, transparent); font: 500 1rem/1.65 "Inter", sans-serif; }
.ia-about-offer,
.ia-two-summits,
.ia-about-difference { margin-top: clamp(4rem, 9vw, 9rem); }
.ia-about-offer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.85rem, 2vw, 1.5rem); }
.ia-about-card { --ia-rib: var(--ia-garnet); min-height: 15rem; }
.ia-about-card--sapphire { --ia-rib: var(--ia-sapphire); }
.ia-about-card--emerald { --ia-rib: var(--ia-emerald); }
.ia-about-card--bronze { --ia-rib: var(--ia-bronze); }
.ia-about-card .ia-card__body { justify-content: center; padding: 1.5rem; }
.ia-about-card .ia-card__title { font-size: clamp(1.25rem, 2vw, 1.65rem); }
.ia-about-card .ia-card__desc { font-size: .93rem; }

.ia-summit-map {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, .62fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(.8rem, 2vw, 2rem);
  padding: clamp(1.25rem, 3vw, 3rem);
  border: 1px solid var(--ia-gold-line);
  border-radius: 18px;
  background:
    linear-gradient(rgba(16, 20, 43, .82), rgba(16, 20, 43, .94)),
    url('/assets/images/art/mountain-climb-panorama.webp') center / cover no-repeat;
  box-shadow: inset 0 0 0 6px rgba(232,198,109,.06), var(--ia-shadow-soft);
}
.ia-summit {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.3rem, 3vw, 2.4rem);
  border: 1px solid rgba(232,198,109,.48);
  border-radius: 13px;
  background: rgba(16,20,43,.84);
  color: #F5EFE2;
}
.ia-summit__number { align-self: flex-end; color: rgba(232,198,109,.35); font: 700 clamp(2.5rem, 5vw, 4.5rem)/1 "Fraunces", serif; }
.ia-summit .ia-eyebrow { color: var(--ia-gold-action-1); }
.ia-summit h3 { margin: 0; color: #FFFDF8; font: 700 clamp(1.7rem, 3vw, 2.6rem)/1.05 "Fraunces", serif; }
.ia-summit > p:not(.ia-eyebrow) { margin: .8rem 0 1.5rem; color: color-mix(in srgb, #F5EFE2 78%, var(--ia-gold-action-1)); font: 500 .93rem/1.65 "Inter", sans-serif; }
.ia-summit > a { margin-top: auto; color: var(--ia-gold-action-1); font: 700 .86rem/1.4 "Inter", sans-serif; text-underline-offset: .3em; }
.ia-bridge { display: grid; place-items: center; align-content: center; gap: .9rem; color: var(--ia-gold-action-1); text-align: center; }
.ia-bridge span { font: 700 .62rem/1.4 "JetBrains Mono", monospace; letter-spacing: .15em; text-transform: uppercase; }
.ia-bridge i { position: relative; display: block; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--ia-gold-action-1) 0 8px, transparent 8px 14px); }
.ia-bridge i::before,
.ia-bridge i::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; border: 2px solid var(--ia-gold-action-1); border-radius: 50%; background: var(--ia-stage); transform: translateY(-50%); }
.ia-bridge i::before { left: 0; }
.ia-bridge i::after { right: 0; }
.ia-bridge p { max-width: 20ch; margin: 0; color: color-mix(in srgb, #F5EFE2 72%, var(--ia-gold-action-1)); font: 500 .78rem/1.5 "Inter", sans-serif; }
.ia-bridge-note { width: min(80rem, calc(100% - 2rem)); margin: 1rem auto 0; padding: 1rem 1.25rem; border: 1px solid var(--ia-etch); border-radius: 0 0 12px 12px; background: var(--ia-parchment); text-align: center; }
.ia-bridge-note strong { color: var(--ia-bronze); font: 700 .68rem/1.4 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.ia-bridge-note p { max-width: 90ch; margin: .4rem auto 0; color: color-mix(in srgb, var(--ia-ink) 76%, transparent); font: 500 .86rem/1.6 "Inter", sans-serif; }
.ia-about-difference__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.85rem, 2vw, 1.5rem); }
.ia-difference-card { position: relative; min-height: 14rem; padding: clamp(1.3rem, 2.5vw, 2rem); border: 1px solid var(--ia-etch); border-top: 4px solid var(--ia-gold-line); border-radius: 12px; background: var(--ia-paper); box-shadow: var(--ia-shadow-tight); overflow: hidden; }
.ia-difference-card > span { position: absolute; top: .7rem; right: 1rem; color: color-mix(in srgb, var(--ia-gold-line) 18%, transparent); font: 700 4rem/1 "Fraunces", serif; }
.ia-difference-card h3 { position: relative; max-width: 16ch; margin: 1.5rem 0 .7rem; color: var(--ia-ink); font: 700 1.35rem/1.15 "Fraunces", serif; }
.ia-difference-card p { position: relative; margin: 0; color: color-mix(in srgb, var(--ia-ink) 72%, transparent); font: 500 .9rem/1.6 "Inter", sans-serif; }
.ia-about-closing { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; margin-top: clamp(4rem, 9vw, 9rem); padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--ia-gold-line); border-radius: 16px; background: linear-gradient(120deg, var(--ia-stage), color-mix(in srgb, var(--ia-stage) 78%, var(--ia-sapphire))); color: #F5EFE2; box-shadow: var(--ia-shadow-soft); }
.ia-about-closing .ia-eyebrow { color: var(--ia-gold-action-1); }
.ia-about-closing h2 { margin: 0; color: #FFFDF8; font: 700 clamp(2rem, 4vw, 3.4rem)/1 "Fraunces", serif; }
.ia-about-closing p:not(.ia-eyebrow) { max-width: 62ch; color: color-mix(in srgb, #F5EFE2 78%, var(--ia-gold-action-1)); }
.ia-about-closing__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .8rem; }
.ia-about-closing .ia-btn-outline { border-color: #F5EFE2; color: #F5EFE2 !important; }

html[data-theme="dark"] .ia-guide-hero,
body.public-arcade-theme--dark .ia-guide-hero,
html[data-theme="dark"] .ia-about-hero,
body.public-arcade-theme--dark .ia-about-hero {
  background: linear-gradient(90deg, rgba(16,20,43,.98) 0 48%, rgba(16,20,43,.72) 70%, transparent), url('/assets/images/art/mountain-climb-panorama.webp') right center / cover no-repeat, var(--ia-stage);
}
html[data-theme="dark"] .ia-game-chapter,
body.public-arcade-theme--dark .ia-game-chapter { background: var(--ia-paper); }
html[data-theme="dark"] .ia-game-chapter .ia-step::before,
body.public-arcade-theme--dark .ia-game-chapter .ia-step::before { background: var(--ia-stage); color: #F5EFE2; }
html[data-theme="dark"] .ia-about-card .ia-card__medallion,
body.public-arcade-theme--dark .ia-about-card .ia-card__medallion { background: var(--ia-stage); }

@media (max-width: 1100px) {
  .ia-guide-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .ia-guide-layout { grid-template-columns: 1fr; }
  .ia-guide .ia-toc { position: static; display: flex; gap: .35rem; max-height: none; overflow-x: auto; padding: .75rem; }
  .ia-guide .ia-toc strong { flex: 0 0 100%; display: none; }
  .ia-guide .ia-toc a { flex: 0 0 auto; min-height: 44px; padding-inline: .8rem; border: 1px solid var(--ia-etch-soft); }
  .ia-about-offer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-summit-map { grid-template-columns: 1fr 8rem 1fr; }
}

@media (max-width: 820px) {
  .ia-guide,
  .ia-about { padding-inline: .75rem; }
  .ia-guide-hero,
  .ia-about-hero { min-height: 34rem; grid-template-columns: 1fr; padding: 2rem 1.4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--ia-paper) 96%, transparent) 0 62%, color-mix(in srgb, var(--ia-paper) 35%, transparent)), url('/assets/images/art/mountain-climb-panorama.webp') center bottom / cover no-repeat, var(--ia-parchment); }
  .ia-guide-hero__crest { position: absolute; right: 1.4rem; bottom: 1.4rem; width: 7rem; }
  .ia-guide-hero__crest span { font-size: 3rem; }
  .ia-guide-hero__crest small { font-size: .5rem; }
  .ia-game-chapter__grid { grid-template-columns: 1fr; }
  .ia-game-chapter:nth-child(even) .ia-game-plate { order: 0; }
  .ia-title-band::before,
  .ia-title-band::after { display: none; }
  .ia-summit-map { grid-template-columns: 1fr; }
  .ia-bridge { padding: .4rem 2rem; }
  .ia-bridge i { width: 2px; height: 4rem; background: repeating-linear-gradient(180deg, var(--ia-gold-action-1) 0 8px, transparent 8px 14px); }
  .ia-bridge i::before { top: 0; left: 50%; transform: translate(-50%, -50%); }
  .ia-bridge i::after { top: auto; right: auto; bottom: 0; left: 50%; transform: translate(-50%, 50%); }
  .ia-about-difference__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-about-closing { grid-template-columns: 1fr; }
  .ia-about-closing__actions { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .ia-guide-hero h1,
  .ia-about-hero h1 { font-size: clamp(2.6rem, 14vw, 4rem); }
  .ia-guide-hero__actions,
  .ia-chapter-actions,
  .ia-guide-finale > div,
  .ia-about-closing__actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .ia-guide-hero__actions > *,
  .ia-chapter-actions > *,
  .ia-guide-finale > div > *,
  .ia-about-closing__actions > * { width: 100%; justify-content: center; }
  .ia-about-offer__grid,
  .ia-about-difference__grid { grid-template-columns: 1fr; }
  .ia-about-mission { width: calc(100% - 1rem); }
  .ia-game-chapter__grid { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ia-game-plate,
  .ia-game-plate:hover,
  .ia-game-chapter:nth-child(even) .ia-game-plate:hover {
    transform: none;
    transition: none;
  }
}

/* ARC-IA-01 ink protection: text riding the navy summit/mission bands must
   never be repainted by the press layer's generic paragraph inks. */
html[data-theme="light"] body[data-arcade-surface] .ia-about-mission .ia-eyebrow,
body.public-arcade-theme--light[data-arcade-surface] .ia-about-mission .ia-eyebrow,
html[data-theme="light"] body[data-arcade-surface] .ia-summit .ia-eyebrow,
body.public-arcade-theme--light[data-arcade-surface] .ia-summit .ia-eyebrow {
  color: var(--ia-gold-action-1) !important;
}
html[data-theme="light"] body[data-arcade-surface] .ia-about-mission p:not(.ia-eyebrow),
body.public-arcade-theme--light[data-arcade-surface] .ia-about-mission p:not(.ia-eyebrow),
html[data-theme="light"] body[data-arcade-surface] .ia-summit p:not(.ia-eyebrow),
body.public-arcade-theme--light[data-arcade-surface] .ia-summit p:not(.ia-eyebrow),
html[data-theme="light"] body[data-arcade-surface] .ia-summit li,
body.public-arcade-theme--light[data-arcade-surface] .ia-summit li {
  color: color-mix(in srgb, #F5EFE2 84%, var(--ia-gold-action-1)) !important;
}
html[data-theme="light"] body[data-arcade-surface] .ia-about-mission :is(h1, h2, h3),
body.public-arcade-theme--light[data-arcade-surface] .ia-about-mission :is(h1, h2, h3),
html[data-theme="light"] body[data-arcade-surface] .ia-summit :is(h1, h2, h3),
body.public-arcade-theme--light[data-arcade-surface] .ia-summit :is(h1, h2, h3) {
  color: #F5EFE2 !important;
}

/* ARC-QA-01: structural fixes from owner dark-theme audit (2026-07-22).
   1) Legal pages carry their own in-page brand header UNDER the shell —
   collapse it: the release shell owns brand + navigation everywhere. */
body[data-arcade-surface="legal"] .legal-brand {
  display: none !important;
}
body[data-arcade-surface="legal"] .legal-nav {
  justify-content: flex-end;
  padding-block: .4rem !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ia-gold-line) 35%, transparent);
  background: transparent !important;
}
/* 2) Cream art plates must not sit raw on the dark stage: in dark theme the
   editorial plates get a navy mount with a gold hairline (framed print). */
html[data-theme="dark"] body[data-arcade-surface] main:has(#feedbackForm) .hero--public::after,
body.public-arcade-theme--dark[data-arcade-surface] main:has(#feedbackForm) .hero--public::after,
html[data-theme="dark"] body[data-arcade-surface] main:has(#changesTimeline) .hero--public::after,
body.public-arcade-theme--dark[data-arcade-surface] main:has(#changesTimeline) .hero--public::after {
  border: 1.5px solid color-mix(in srgb, var(--ia-gold-line) 55%, transparent);
  border-radius: 12px;
  box-shadow: 0 0 0 6px rgba(16, 20, 43, 0.6), 0 18px 44px rgba(0, 0, 0, 0.45);
  opacity: .94;
}
html[data-theme="dark"] body[data-arcade-surface] .hero__catalog-art,
body.public-arcade-theme--dark[data-arcade-surface] .hero__catalog-art {
  border: 1.5px solid color-mix(in srgb, var(--ia-gold-line) 55%, transparent);
  box-shadow: 0 0 0 6px rgba(16, 20, 43, 0.6), var(--ia-shadow-soft);
}

/* Footer: the brand anchors the left, three nav columns to the right —
   an engraved masthead, not an empty band (owner ruling 2026-07-23). */
body[data-arcade-surface] .public-arcade-footer__inner {
  grid-template-columns: minmax(14rem, 1.3fr) repeat(3, minmax(8rem, .7fr));
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
body[data-arcade-surface] .public-arcade-footer__brand {
  display: inline-flex !important;
  align-items: center;
  gap: .9rem;
  max-width: 20rem;
  text-decoration: none;
}
body[data-arcade-surface] .public-arcade-footer__brand img {
  width: 60px;
  height: 60px;
  border: 1.5px solid color-mix(in srgb, var(--ia-gold-line, #B8922A) 55%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ia-gold-action-1, #E8C66D) 8%, transparent);
  padding: 5px;
  object-fit: contain;
}
body[data-arcade-surface] .public-arcade-footer__brand span {
  display: grid;
  gap: .3rem;
}
body[data-arcade-surface] .public-arcade-footer__brand strong {
  color: var(--aa-text) !important;
  font: 700 1.1rem/1.15 "Fraunces", Georgia, serif !important;
  letter-spacing: -.01em;
}
body[data-arcade-surface] .public-arcade-footer__brand small {
  color: var(--aa-muted) !important;
  font: 500 .82rem/1.4 "Inter", system-ui, sans-serif !important;
}

/* Chapter 1, 2, and 6 still carry legacy scroll-reveal wrappers. Their public
   build replaces the fixed legacy nav with an in-flow shell, so above-fold
   content must not wait for a private-site observer before becoming visible. */
body[data-arcade-surface="game"] #main-content.public-arcade-chapter-hub--legacy > .container > .reveal {
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 700px) {
  body[data-arcade-surface="game"] #main-content.public-arcade-chapter-hub--legacy {
    padding-top: 1rem !important;
  }
  body[data-arcade-surface="game"] #main-content.public-arcade-chapter-hub--legacy > .container > .page-hero {
    padding-block: .75rem 1rem;
  }
  body[data-arcade-surface="game"] #main-content.public-arcade-chapter-hub--legacy > .container > .reveal {
    margin-bottom: 1rem !important;
  }
  body[data-arcade-surface="game"] #main-content.public-arcade-chapter-hub--legacy > .container > .reveal > .glass-card-static > div {
    padding: 1rem !important;
  }
}
.public-arcade-auth-gate h2 {
  margin: 0;
  color: var(--aa-text);
  font: 900 clamp(2rem, 5vw, 3.4rem)/1 "Avenir Next", system-ui, sans-serif;
}

/* Shared target floor catches inherited and imported controls. Associated
   checkbox/radio labels remain the measured hit target in the browser gate. */
body[data-arcade-surface] :where(button, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, summary, [role="button"], [role="link"], [role="tab"], a[href]) {
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  box-sizing: border-box;
}
body[data-arcade-surface] :where(button, [role="button"], [role="tab"]) {
  white-space: normal;
  overflow-wrap: anywhere;
}
body[data-arcade-surface] label:has(input:is([type="checkbox"], [type="radio"])) {
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
}
body[data-arcade-surface] :where(.public-arcade-shell__nav, .public-arcade-footer__group, .topnav, .legal-nav__links, .legal-rail, .ia-toc, .ia-summit, p, li, dd) > a[href] {
  display: inline-flex;
  align-items: center;
}
.ia-guide .ia-toc a,
.ia-summit > a { min-height: 44px; }

/* Faint labels remain real text. Preserve engraving hierarchy at AA contrast. */
html[data-theme="light"] body[data-arcade-surface] .entry-card__number,
body.public-arcade-theme--light[data-arcade-surface] .entry-card__number {
  color: color-mix(in srgb, var(--ia-gold-action-1) 50%, transparent) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--ia-gold-action-1) 50%, transparent);
}
.ia-summit__number { color: rgba(232, 198, 109, .68); }
.ia-difference-card > span { color: var(--ia-gold-ink); }
html[data-theme="dark"] :where(.ia-eyebrow, .ia-guide .ia-toc strong),
body.public-arcade-theme--dark :where(.ia-eyebrow, .ia-guide .ia-toc strong) {
  color: var(--ia-gold-action-1);
}
html[data-theme="dark"] :where(.ia-guide-hero h1 em, .ia-about-hero h1 em, .ia-special strong),
body.public-arcade-theme--dark :where(.ia-guide-hero h1 em, .ia-about-hero h1 em, .ia-special strong) {
  color: #E7A09A;
}

/* Mathematical and imported arcade purple aliases resolve to approved jewel
   colors at final cascade. Direct visible legacy utilities follow. */
body[data-arcade-surface] {
  --c-alg2: var(--ia-sapphire);
  --c-alg2-tint: color-mix(in srgb, var(--ia-sapphire) 12%, transparent);
  --neon-purple: var(--ia-emerald);
  --purple: var(--ia-emerald);
  --purple-glow: color-mix(in srgb, var(--ia-emerald) 40%, transparent);
  --violet: var(--ia-emerald);
  --violet-light: color-mix(in srgb, var(--ia-emerald) 12%, var(--ia-paper));
  --violet-pale: color-mix(in srgb, var(--ia-emerald) 12%, var(--ia-paper));
  --ah-accent: var(--ia-emerald);
  --ah-glow-soft: 0 0 28px color-mix(in srgb, var(--ia-emerald) 22%, transparent);
  --glass-hover-border: color-mix(in srgb, var(--ia-emerald) 45%, transparent);
  --glass-hover-shadow: color-mix(in srgb, var(--ia-emerald) 18%, transparent);
  --detritivore: var(--ia-emerald);
}
body.public-arcade-theme--light .course-alg2 { --accent-bright: var(--ia-sapphire); }
body[data-arcade-surface] :where(.neon-purple, .text-purple-300, .text-purple-400, .text-purple-500, .diff-boss) {
  color: var(--ia-emerald) !important;
  border-color: color-mix(in srgb, var(--ia-emerald) 55%, transparent) !important;
}
html[data-theme="dark"] body[data-arcade-surface] :where(.neon-purple, .text-purple-300, .text-purple-400, .text-purple-500, .diff-boss),
body.public-arcade-theme--dark[data-arcade-surface] :where(.neon-purple, .text-purple-300, .text-purple-400, .text-purple-500, .diff-boss),
body[data-arcade-surface="game"] :where(.neon-purple, .text-purple-300, .text-purple-400, .text-purple-500, .diff-boss) {
  color: #86D4AE !important;
}
body[data-arcade-surface] :where([class*="from-purple"], [class*="to-purple"], [class*="bg-purple"]) {
  background-image: linear-gradient(135deg, var(--ia-emerald), #173F32) !important;
  background-color: var(--ia-emerald) !important;
}
body[data-arcade-surface] :where([class*="border-purple"]) {
  border-color: var(--ia-emerald) !important;
}
body[data-arcade-surface] :where(
  [style*="#a855f7" i], [style*="#7c3aed" i], [style*="#a78bfa" i],
  [style*="#c4b5fd" i], [style*="#c084fc" i], [style*="#d8b4fe" i],
  [style*="#e9d5ff" i], [style*="#f5d0fe" i], [style*="#8b5cf6" i],
  [style*="#6d28d9" i], [style*="#5b21b6" i], [style*="#9333ea" i],
  [style*="#7e22ce" i], [style*="#9b59b6" i], [style*="#764ba2" i],
  [style*="#bb86fc" i], [style*="#5d458b" i], [style*="168,85,247" i],
  [style*="192,132,252" i], [style*="124,58,237" i], [style*="93, 69, 139" i]
) {
  color: var(--ia-emerald) !important;
  border-color: var(--ia-emerald) !important;
  outline-color: var(--ia-emerald) !important;
  accent-color: var(--ia-emerald) !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}
body[data-arcade-surface] :where(
  [class*="bg-purple" i], [class*="flask-purple" i],
  [style*="background" i][style*="#a855f7" i], [style*="background" i][style*="#7c3aed" i],
  [style*="background" i][style*="#a78bfa" i], [style*="background" i][style*="#8b5cf6" i],
  [style*="background" i][style*="#6d28d9" i], [style*="background" i][style*="#c084fc" i],
  [style*="background" i][style*="#d8b4fe" i], [style*="background" i][style*="#5b21b6" i],
  [style*="background" i][style*="#9333ea" i], [style*="background" i][style*="#7e22ce" i],
  [style*="background" i][style*="#9b59b6" i], [style*="background" i][style*="#764ba2" i],
  [style*="background" i][style*="#bb86fc" i], [style*="background" i][style*="168,85,247" i],
  [style*="background" i][style*="192,132,252" i], [style*="background" i][style*="124,58,237" i]
) {
  background-color: color-mix(in srgb, var(--ia-emerald) 14%, var(--ia-stage)) !important;
  background-image: linear-gradient(135deg, var(--ia-emerald), #173F32) !important;
  color: #F5EFE2 !important;
  -webkit-text-fill-color: #F5EFE2 !important;
}
body[data-arcade-surface] :where(
  [style*="box-shadow" i][style*="168,85,247" i],
  [style*="filter" i][style*="168,85,247" i]
) {
  box-shadow: 0 0 18px color-mix(in srgb, var(--ia-emerald) 34%, transparent) !important;
  filter: none !important;
}
body[data-arcade-surface="game"] :where(
  [style*="#a855f7" i], [style*="#7c3aed" i], [style*="#a78bfa" i],
  [style*="#c4b5fd" i], [style*="#c084fc" i], [style*="#d8b4fe" i],
  [style*="#e9d5ff" i], [style*="#f5d0fe" i], [style*="#8b5cf6" i],
  [style*="#6d28d9" i], [style*="#5b21b6" i], [style*="#9333ea" i],
  [style*="#7e22ce" i], [style*="#9b59b6" i], [style*="#764ba2" i],
  [style*="#bb86fc" i], [style*="#5d458b" i], [style*="168,85,247" i],
  [style*="192,132,252" i], [style*="124,58,237" i], [style*="93, 69, 139" i]
) {
  color: #86D4AE !important;
  -webkit-text-fill-color: #86D4AE !important;
}
body[data-arcade-surface="game"] :where(
  [class*="bg-purple" i], [class*="from-purple" i], [class*="to-purple" i], [class*="flask-purple" i],
  [style*="background" i][style*="#a855f7" i], [style*="background" i][style*="#7c3aed" i],
  [style*="background" i][style*="#a78bfa" i], [style*="background" i][style*="#8b5cf6" i],
  [style*="background" i][style*="#6d28d9" i], [style*="background" i][style*="#c084fc" i],
  [style*="background" i][style*="#d8b4fe" i], [style*="background" i][style*="#5b21b6" i],
  [style*="background" i][style*="#9333ea" i], [style*="background" i][style*="#7e22ce" i],
  [style*="background" i][style*="#9b59b6" i], [style*="background" i][style*="#764ba2" i],
  [style*="background" i][style*="#bb86fc" i], [style*="background" i][style*="168,85,247" i],
  [style*="background" i][style*="192,132,252" i], [style*="background" i][style*="124,58,237" i]
) {
  color: #F5EFE2 !important;
  -webkit-text-fill-color: #F5EFE2 !important;
}
body[data-arcade-surface] #game-nexus .nx-title {
  color: #86D4AE !important;
  /* The deep-emerald stop sinks below AA on the stage: lightened end stop. */
  background: linear-gradient(135deg, #86D4AE, #57A67F) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Stateful game screens keep their mechanics and hierarchy, but legacy purple
   declarations (including hidden screens that later become active) resolve to
   the approved Emerald/navy system. */
body[data-arcade-surface="game"] :where(.ah-pill, .badge-purple, .btn-detritivore, .diff-boss),
body[data-arcade-surface="game"] :where(.qr-drag-item, .qr-drag-num, .qr-submit-btn, .qr-match-item-right),
body[data-arcade-surface="game"] :where(.ts-prediction-scenario, #mars-rover-game, .stat-card) {
  border-color: color-mix(in srgb, var(--ia-emerald) 48%, transparent) !important;
  background-color: color-mix(in srgb, var(--ia-emerald) 13%, var(--ia-stage)) !important;
  background-image: none !important;
  box-shadow: none !important;
}
body[data-arcade-surface="game"] :where(.ah-pill, .badge-purple, .btn-detritivore, .diff-boss, .qr-drag-num, .qr-submit-btn) {
  color: #86D4AE !important;
}
body[data-arcade-surface="game"] :where(.atom-nucleus, .atom-orbit) {
  border-color: color-mix(in srgb, var(--ia-emerald) 48%, transparent) !important;
  box-shadow: none !important;
}
body[data-arcade-surface="game"] .atom-nucleus { background: var(--ia-emerald) !important; }
body[data-arcade-surface="game"] .nav-divider {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ia-emerald) 48%, transparent), transparent) !important;
}
body[data-arcade-surface="game"] #game-equation-auction {
  background:
    radial-gradient(circle at 80% 8%, rgba(232,198,109,.21), transparent 28%),
    linear-gradient(145deg, var(--ia-stage), color-mix(in srgb, var(--ia-stage) 82%, var(--ia-garnet))) !important;
}
body[data-arcade-surface="game"] #game-equation-auction :where(.ea-stage, .ea-panel) {
  box-shadow: 0 24px 72px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.04) !important;
}
body[data-arcade-surface="game"] #game-equation-auction .ea-mode {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ia-stage) 84%, var(--ia-garnet)), var(--ia-stage)) !important;
}

body[data-arcade-surface="game"] #game-nexus :where(
  .nx-nebula, .nx-panel, .nx-role-card, .nx-avatar-opt, .nx-map-wrap, .nx-hud,
  .nx-q-panel, .nx-action-banner, .nx-leaderboard, .nx-lb-row.nx-lb-me,
  .nx-class-card, .nx-era-rules, .nx-event-card, .nx-award, .nx-tech-card,
  .nx-vip-lounge, .nx-vip-floor, .nx-ch-card.nx-sel, .nx-tut-card
) {
  border-color: color-mix(in srgb, var(--ia-emerald) 46%, transparent) !important;
  background-color: color-mix(in srgb, var(--ia-emerald) 10%, var(--ia-stage)) !important;
  background-image: none !important;
  box-shadow: none !important;
}
body[data-arcade-surface="game"] #game-nexus :where(
  .nx-btn-primary, .nx-q-progress-fill, .nx-era-pip.nx-pip-done,
  .nx-era-pip.nx-pip-current, .nx-qe-fill
) {
  border-color: var(--ia-emerald) !important;
  background: linear-gradient(135deg, #86D4AE, var(--ia-emerald)) !important;
  box-shadow: none !important;
}
body[data-arcade-surface="game"] #game-nexus :where(
  .nx-role-icon, .nx-class-icon, .nx-room-code, .nx-q-display,
  .nx-era-title, .nx-tut-title
) {
  color: #86D4AE !important;
  background: none !important;
  border-color: var(--ia-emerald) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}
body[data-arcade-surface="game"] #game-nexus .nx-vip-vip-badge { color: var(--ia-stage) !important; }
body[data-arcade-surface="game"] #game-nexus :where(
  .nx-input:focus, .nx-select:focus, .nx-choice:hover:not(:disabled),
  .nx-role-card:hover, .nx-class-card:hover, .nx-class-card.nx-sel,
  .nx-tech-card:hover, .nx-ch-card:hover, .nx-ch-card.nx-sel
) {
  border-color: var(--ia-emerald) !important;
  box-shadow: none !important;
}
body[data-arcade-surface="game"] #game-nexus .nx-class-card::before {
  background: color-mix(in srgb, var(--ia-emerald) 12%, transparent) !important;
}
body[data-arcade-surface="game"] #game-nexus .nx-stars {
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 70% 30%, rgba(134,212,174,.7), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 20% 90%, rgba(232,198,109,.5), transparent) !important;
}

body[data-arcade-surface="game"] #game-lab-meltdown :where(
  .lm-flask-purple, .lm-mg-bubble, .lm-vip-lounge, .lm-vip-floor,
  .lm-vip-avatar-wrap, .lm-tut-card
),
body[data-arcade-surface="game"] :where(.lm-avatar-chip, .lm-avatar-picker-lab) {
  border-color: color-mix(in srgb, var(--ia-emerald) 48%, transparent) !important;
  background-color: color-mix(in srgb, var(--ia-emerald) 12%, var(--ia-stage)) !important;
  background-image: none !important;
  box-shadow: none !important;
}
body[data-arcade-surface="game"] #game-lab-meltdown .lm-vip-title,
body[data-arcade-surface="game"] .lm-avatar-picker-eyebrow {
  color: #86D4AE !important;
  background: none !important;
  filter: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}
body[data-arcade-surface="game"] .lm-avatar-picker-modal {
  border-color: color-mix(in srgb, var(--ia-emerald) 48%, transparent) !important;
  box-shadow: none !important;
}
body[data-arcade-surface="game"] .lm-lab-damaged .lm-wires::before {
  background: linear-gradient(90deg, transparent 20%, #86D4AE 50%, transparent 80%) !important;
}

body[data-arcade-surface="game"] :where(
  .tb-bg, .tb-input, .tb-role-card-host, .tb-room-code, .tb-player-chip,
  .tb-q-box, .tb-scholar-hud, .tb-timer-bar, .tb-time-btn, .tb-dur-btn,
  .tb-tut-card, .tb-tut-section
) {
  border-color: color-mix(in srgb, var(--ia-emerald) 46%, transparent) !important;
  background-color: color-mix(in srgb, var(--ia-emerald) 10%, var(--ia-stage)) !important;
  background-image: none !important;
  box-shadow: none !important;
}
body[data-arcade-surface="game"] :where(.tb-btn-purple, .tb-timer-bar-fill, .tb-question-bar .tb-timer-bar-fill) {
  border-color: var(--ia-emerald) !important;
  background: linear-gradient(135deg, #86D4AE, var(--ia-emerald)) !important;
  box-shadow: none !important;
}
body[data-arcade-surface="game"] :where(
  .tb-input, .tb-role-title, .tb-role-card-host, .tb-room-code,
  .tb-game-timer, .tb-hud-stat span, .tb-question-clock, .tb-tut-title
) {
  color: #86D4AE !important;
  text-shadow: none !important;
}
body[data-arcade-surface="game"] :where(.tb-time-btn.tb-time-active, .tb-dur-btn.tb-dur-active) {
  color: #86D4AE !important;
  border-color: var(--ia-emerald) !important;
  background: color-mix(in srgb, var(--ia-emerald) 14%, var(--ia-stage)) !important;
  box-shadow: none !important;
}
body[data-arcade-surface="game"] .tb-bg::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ia-emerald) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ia-emerald) 4%, transparent) 1px, transparent 1px) !important;
}

/* Mounted parent already owns About panorama; remove duplicate raw child in
   dark. Keep decorative launch plates inside narrow phone viewport. */
html[data-theme="dark"] .ia-about-hero__mountain,
body.public-arcade-theme--dark .ia-about-hero__mountain { background: none; }
@media (max-width: 700px) {
  html[data-theme="light"] body[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate,
  body.public-arcade-theme--light[data-arcade-surface] .public-arcade-launchpad__scene .ia-float-plate { display: none !important; }
}
@media (max-width: 900px) {
  html[data-theme="light"] body[data-arcade-surface] .public-arcade-footer,
  body.public-arcade-theme--light[data-arcade-surface] .public-arcade-footer {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }
}
@media (max-width: 768px) {
  body[data-arcade-surface] .public-arcade-footer__inner { grid-template-columns: 1fr 1fr; }
  body[data-arcade-surface] .public-arcade-footer__brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 480px) {
  body[data-arcade-surface] .public-arcade-footer__inner { grid-template-columns: 1fr; }
}

/* ARC-LINT-ZERO-01: measured AA/target corrections. Legacy chapter hubs keep
   their authored celestial composition in both themes; only ink, badges, and
   hit areas change. */
/* Every chapter listing joins the stage doctrine regardless of its markup
   generation: game-surface bodies that are neither the /games/ discovery hub
   (identified by its .public-arcade-launchpad) nor a playable theater (body#main-content). Old chapter shells reuse main#main-content, so the hub must be excluded by its unique component. */
html[data-theme="light"] body[data-arcade-surface="game"]:not(#main-content):not(:has(.public-arcade-launchpad)),
body.public-arcade-theme--light[data-arcade-surface="game"]:not(#main-content):not(:has(.public-arcade-launchpad)) {
  background-color: var(--ia-stage) !important;
  color: #F5EFE2 !important;
}
body[data-arcade-surface="game"]:has(.mode-grid) :where(.text-slate-400, .text-slate-500),
body[data-arcade-surface="game"]:has(.intro-card) :where(.text-slate-400, .text-slate-500, .muted) {
  color: #D6DCEC !important;
  -webkit-text-fill-color: #D6DCEC !important;
}
body[data-arcade-surface="game"]:has(.mode-grid) div.mt-4.inline-flex.items-center {
  border-color: #86D4AE !important;
  background: #173F32 !important;
  color: #F5EFE2 !important;
  -webkit-text-fill-color: #F5EFE2 !important;
}
body[data-arcade-surface="game"]:has(.mode-grid) .new-badge {
  color: #10142B !important;
  -webkit-text-fill-color: #10142B !important;
}
body[data-arcade-surface="game"]:has(.mode-grid) a.text-slate-500.transition,
body[data-arcade-surface="game"]:has(.mode-grid) a.text-slate-400.transition {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: .75rem;
  color: #D6DCEC !important;
}

/* About's navy bands retain gold/cream inks under the generic theme cascade. */
body[data-arcade-surface] .ia-summit > a,
body[data-arcade-surface] .ia-bridge > span {
  color: #E8C66D !important;
  -webkit-text-fill-color: #E8C66D !important;
}
body[data-arcade-surface] .ia-about-closing h2 {
  color: #FFFDF8 !important;
  -webkit-text-fill-color: #FFFDF8 !important;
}
body[data-arcade-surface] .ia-about-closing p:not(.ia-eyebrow) {
  color: #E9E1D2 !important;
  -webkit-text-fill-color: #E9E1D2 !important;
}
body[data-arcade-surface] .ia-btn-gold {
  color: #10142B !important;
  -webkit-text-fill-color: #10142B !important;
}
html[data-theme="dark"] body[data-arcade-surface] #about-title em,
body.public-arcade-theme--dark[data-arcade-surface] #about-title em {
  color: #E7A09A !important;
  -webkit-text-fill-color: #E7A09A !important;
}
html[data-theme="dark"] body[data-arcade-surface] .ia-difference-card > span,
body.public-arcade-theme--dark[data-arcade-surface] .ia-difference-card > span {
  color: #E8C66D !important;
  -webkit-text-fill-color: #E8C66D !important;
}

/* Operator labels remain subordinate but cross AA on slate cards. Errors use
   explicit garnet grounds so coral never mixes into a violet computed color. */
html[data-theme="dark"] body[data-arcade-surface="product"] :where(.toolbar, .card) :where(.field > span, #messageCounter, .empty),
body.public-arcade-theme--dark[data-arcade-surface="product"] :where(.toolbar, .card) :where(.field > span, #messageCounter, .empty) {
  color: #B9C3DF !important;
  -webkit-text-fill-color: #B9C3DF !important;
}
body[data-arcade-surface] .notice.notice--error,
body[data-arcade-surface] :where(#changesError, #feedbackError, #statusError) {
  border-color: #9E2B25 !important;
  background: #F7E3DE !important;
  color: #6F1F1A !important;
  -webkit-text-fill-color: #6F1F1A !important;
}
html[data-theme="dark"] body[data-arcade-surface] .notice.notice--error,
body.public-arcade-theme--dark[data-arcade-surface] .notice.notice--error,
html[data-theme="dark"] body[data-arcade-surface] :where(#changesError, #feedbackError, #statusError),
body.public-arcade-theme--dark[data-arcade-surface] :where(#changesError, #feedbackError, #statusError) {
  border-color: #D9867D !important;
  background: #422522 !important;
  color: #FFD5CD !important;
  -webkit-text-fill-color: #FFD5CD !important;
}

/* Mobile GPUs avoid the fixed full-bleed cosmic texture. Composition and crop
   stay identical; only the attachment mode changes. */
@media (max-width: 900px) {
  body#main-content[data-arcade-surface="game"] {
    background-attachment: scroll, scroll !important;
  }
}

/* ==================== ARC-QA-02 — sole-owner remediation (2026-07-23) ====================
   Ground-truth lint sweep: every cluster fixed at source. */

/* /how-to chapter title bands are always-dark jewel gradients — their ink is
   cream with a gold chapter numeral, in both themes. */
.ia-title-band h2,
.ia-title-band > p {
  color: #F5EFE2 !important;
}
.ia-title-band > span:first-of-type {
  color: var(--ia-gold-action-1) !important;
}

/* /about: bridge band ink and closing eyebrow. */
html[data-theme="light"] body[data-arcade-surface] .ia-bridge p,
body.public-arcade-theme--light[data-arcade-surface] .ia-bridge p,
html[data-theme="dark"] body[data-arcade-surface] .ia-bridge p,
body.public-arcade-theme--dark[data-arcade-surface] .ia-bridge p {
  color: color-mix(in srgb, #F5EFE2 86%, var(--ia-gold-action-1)) !important;
}
html[data-theme="light"] body[data-arcade-surface] .ia-about .ia-eyebrow--spark:not(.ia-about-mission *):not(.ia-summit *),
body.public-arcade-theme--light[data-arcade-surface] .ia-about .ia-eyebrow--spark:not(.ia-about-mission *):not(.ia-summit *) {
  color: var(--ia-gold-ink) !important;
}

/* Chapter stage families: legacy headline/subtitle/selector inks read cream on
   the celestial stage; "NEW"/tag chips become gold foil chips. */
body[data-arcade-surface="game"] :where(.gs-title, .gs-subtitle, .game-selector-title, h2.game-selector-title, .cb-role-subtitle) {
  color: #F5EFE2 !important;
  -webkit-text-fill-color: #F5EFE2 !important;
}
body[data-arcade-surface="game"] :where(.gs-badge-new, .wg-card-tag, .mode-card > div:first-child) {
  border: 1px solid #8F6E1C !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)) !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
}
/* Battle Arena live-join labels and host CTA on their navy panels. */
body[data-arcade-surface="game"] :where(.ba-live-join-section label, .ba-subtitle) {
  color: #D6DCEC !important;
  -webkit-text-fill-color: #D6DCEC !important;
}
/* Team-mode chips are bright cyan plates: they keep their own navy ink at
   full strength — the page dims spans to 60%, which sinks below AA. */
body[data-arcade-surface="game"] .ba-tm-btn span {
  color: #0A0A23 !important;
  -webkit-text-fill-color: #0A0A23 !important;
  opacity: 1 !important;
}
body[data-arcade-surface="game"] #baPublicLiveHostBtn {
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)) !important;
  border: 1px solid #8F6E1C !important;
}

/* Auth gate CTA: the legacy aqua/bronze variable pair fails AA in both themes.
   Explicit brand pairing — navy plate with cream ink on the cream gate, gold
   foil plate with navy ink on the navy gate. */
body[data-arcade-surface] .public-arcade-auth-gate a {
  background: #1A1A2E !important;
  color: #F5EFE2 !important;
  -webkit-text-fill-color: #F5EFE2 !important;
  border: 1px solid rgba(184, 146, 42, 0.5) !important;
}
html[data-theme="dark"] body[data-arcade-surface] .public-arcade-auth-gate a,
body.public-arcade-theme--dark[data-arcade-surface] .public-arcade-auth-gate a {
  background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)) !important;
  color: #17213D !important;
  -webkit-text-fill-color: #17213D !important;
  border: 1px solid #8F6E1C !important;
}

/* Survival Island is a dark mini-site (slate ink, cyan gradients): it mounts
   as a navy stage panel so its native inks hold; parchment inverted them. */
body[data-arcade-surface="game"]:has(.tek-badge) .wrap {
  border: 1.5px solid color-mix(in srgb, var(--ia-gold-line) 45%, transparent);
  border-radius: 14px;
  background: #131A38;
  color: #EEF1FA;
  padding: clamp(1rem, 2.5vw, 2rem);
  box-shadow: inset 0 0 0 1px rgba(184, 146, 42, 0.16), 0 18px 44px rgba(0, 0, 0, 0.4);
}
/* studio-tokens.css forces #222 !important onto p/li — repin the island's
   paragraph inks for the navy panel. */
body[data-arcade-surface="game"]:has(.tek-badge) .wrap :where(p, li) {
  color: #A8B3C9 !important;
}
body[data-arcade-surface="game"]:has(.tek-badge) .wrap :where(p, li) :where(strong, b) {
  color: #E2E8F0 !important;
}
body[data-arcade-surface="game"]:has(.tek-badge) .wrap :where(p, li) em {
  color: #CBD5E1 !important;
}
body[data-arcade-surface="game"]:has(.tek-badge) .tek-badge {
  color: #4ADE80 !important;
}

/* Solo lobby selects must never clip their labels. */
body[data-arcade-surface="game"] select#soloChapterSelect {
  width: 100%;
  max-width: none;
}

/* The bounded HOST/JOIN cosmic console is a framed print on the cream page. */
html[data-theme="light"] body[data-arcade-surface] #entryGrid,
body.public-arcade-theme--light[data-arcade-surface] #entryGrid {
  border: 1.5px solid color-mix(in srgb, var(--ia-gold-line) 55%, transparent);
  border-radius: 14px;
  box-shadow: 0 0 0 6px rgba(16, 20, 43, 0.06), 0 18px 44px rgba(26, 26, 46, 0.25);
}

/* ==================== ARC-QA-03 — ground-truth remediation round 2 (2026-07-23) ====================
   Every rule below traces to a measured lint finding with a probed root cause. */

/* Skip link: every surface ships a broad `a { color: … !important }` recolor
   (e.g. body[data-arcade-surface="legal"] :where(a) → --aa-accent) that turns
   the link gold-on-gold in BOTH themes, beating its own :focus ink. Ironclad
   pairing, rest + focus, both themes. */
body[data-arcade-surface] a.public-arcade-skip-link,
body[data-arcade-surface] a.public-arcade-skip-link:focus,
body[data-arcade-surface] a.public-arcade-skip-link:focus-visible {
  background: #E8C66D !important;
  color: #17213D !important;
  -webkit-text-fill-color: #17213D !important;
}

/* /how-to/ chapter title bands only looked navy because the dark page showed
   through their transparent background. Give the band its own stage ground so
   the cream/gold band ink holds in the light theme too. */
body[data-arcade-surface] .ia-title-band {
  background-color: #10142B !important;
}

/* /how-to/ finale is the closing navy band (mirrors /about/'s closing). */
body[data-arcade-surface] .ia-guide-finale {
  background: #10142B !important;
}
body[data-arcade-surface] .ia-guide-finale :where(h2, p:not(.ia-eyebrow)) {
  color: #F5EFE2 !important;
  -webkit-text-fill-color: #F5EFE2 !important;
}
body[data-arcade-surface] .ia-guide-finale .ia-eyebrow--spark,
body[data-arcade-surface] .ia-about-closing .ia-eyebrow--spark {
  color: var(--ia-gold-action-1) !important;
  -webkit-text-fill-color: var(--ia-gold-action-1) !important;
}
/* Garnet accent in the guide headline needs the rose tint on the dark page. */
html[data-theme="dark"] body[data-arcade-surface] #guide-title em,
body.public-arcade-theme--dark[data-arcade-surface] #guide-title em {
  color: #E7A09A !important;
  -webkit-text-fill-color: #E7A09A !important;
}

/* Theater stage ink: studio-tokens.css forces #222 !important on p/li and the
   light canvas inherits steel/ink onto the always-navy stage. Repin only the
   measured families — gameplay answer plates keep their own theme inks. */
body[data-arcade-surface="game"] :where([id$="HostScopeNote"], .lm-role-subtitle,
  #lmSecureHome > label, .lm-role-cards label, .cc-actions label, #rrPublic_role label,
  label.cb-join-label, .tb-role-subtitle, a.cc-back, a.nx-back) {
  color: #A8B3C9 !important;
  -webkit-text-fill-color: #A8B3C9 !important;
}
body[data-arcade-surface="game"] #ccRoomPill {
  color: #EEF1FA !important;
  -webkit-text-fill-color: #EEF1FA !important;
}
/* Session-required alert: rose ink on the garnet-tinted stage panel. */
body[data-arcade-surface="game"] section[role="alert"] :where(h1, p) {
  color: #FBD5CE !important;
  -webkit-text-fill-color: #FBD5CE !important;
}

/* Lab Meltdown brand orange reads 2.66:1 on the stage — the page-level title
   brightens in both themes; role names sit on cream cards in the light theme
   and keep the deep brand orange there. */
body[data-arcade-surface="game"] h1.lm-role-title {
  color: #E8825A !important;
  -webkit-text-fill-color: #E8825A !important;
}
html[data-theme="dark"] body[data-arcade-surface="game"] span.lm-role-name,
body.public-arcade-theme--dark[data-arcade-surface="game"] span.lm-role-name {
  color: #E8825A !important;
  -webkit-text-fill-color: #E8825A !important;
}
html[data-theme="light"] body[data-arcade-surface="game"] span.lm-role-name,
body.public-arcade-theme--light[data-arcade-surface="game"] span.lm-role-name {
  color: #B5481F !important;
  -webkit-text-fill-color: #B5481F !important;
}

/* NEXUS badge swaps its pink/amber chip for the standard gold foil chip
   (the title gradient is corrected in the #game-nexus rule above). */
body[data-arcade-surface="game"] span.nx-badge-new {
  background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)) !important;
  border: 1px solid #8F6E1C !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
}

/* Reef Rally role buttons: jewel-palette plates replace the sky/amber
   gradients whose mid-stops failed AA under white ink. */
body[data-arcade-surface="game"] #rrPublic_btn-host {
  background: linear-gradient(135deg, #3F6CB0, #24406E) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
body[data-arcade-surface="game"] #rrPublic_btn-solo {
  background: linear-gradient(180deg, var(--ia-gold-action-1), var(--ia-gold-action-2)) !important;
  color: #10142B !important;
  -webkit-text-fill-color: #10142B !important;
}
body[data-arcade-surface="game"] #rrPublic_btn-join {
  background: linear-gradient(135deg, #3E7A5C, #2F5D46) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Signed-in console rails (progress/assignments) in the dark theme: rail ink
   and empty-state guidance were stranded at light-ink values. */
html[data-theme="dark"] body[data-arcade-surface="product"] .climb-rail li,
body.public-arcade-theme--dark[data-arcade-surface="product"] .climb-rail li {
  color: #D6DCEC !important;
  -webkit-text-fill-color: #D6DCEC !important;
}
html[data-theme="dark"] body[data-arcade-surface="product"] #emptyState > span,
body.public-arcade-theme--dark[data-arcade-surface="product"] #emptyState > span {
  color: #B9C3DF !important;
  -webkit-text-fill-color: #B9C3DF !important;
}

/* HOST/JOIN light hero: once the hero stacks (rooms.css stacks at 900px) the
   copy column overlaps the navy celestial half of the split plate. The stacked
   hero keeps the full cream plate with the gold ticket beneath the copy. */
@media (max-width: 900px) {
  html[data-theme="light"] body[data-arcade-surface] .public-arcade-host-hero,
  body.public-arcade-theme--light[data-arcade-surface] .public-arcade-host-hero {
    grid-template-columns: minmax(0, 1fr);
    background: #F6EEDB !important;
  }
  html[data-theme="light"] body[data-arcade-surface] .public-arcade-host-hero .public-arcade-host-hero__constellation,
  body.public-arcade-theme--light[data-arcade-surface] .public-arcade-host-hero .public-arcade-host-hero__constellation {
    display: none !important;
  }
}

/* Chapter hubs: the wg game frame reserves its gameplay height even on the
   menu screen, leaving a >45vh dead band inside the card. Hug the menu; the
   fixed frame returns the moment a gameplay screen activates. */
body[data-arcade-surface="game"] .glass-card-static div:has(> .wg-fullscreen-btn):has(> .wg-screen.active .wg-menu) {
  height: auto !important;
  min-height: 0 !important;
}

/* Solo Mastery signed-out guide panel (injected next to the session alert). */
body[data-arcade-surface="game"] .pa-solo-guide {
  max-width: 620px;
  margin: 1.5rem auto 2.5rem;
  padding: 1.75rem 2rem;
  border: 1px solid rgba(184, 146, 42, 0.35);
  border-radius: 1rem;
  background: #131A38;
  text-align: left;
}
body[data-arcade-surface="game"] .pa-solo-guide h2 {
  margin: 0 0 1rem;
  font: 800 1.05rem/1.3 Orbitron, sans-serif;
  color: #F5EFE2 !important;
  -webkit-text-fill-color: #F5EFE2 !important;
}
body[data-arcade-surface="game"] .pa-solo-guide ol {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  display: grid;
  gap: .6rem;
}
body[data-arcade-surface="game"] .pa-solo-guide li {
  color: #C7D0E4 !important;
  line-height: 1.55;
}
body[data-arcade-surface="game"] .pa-solo-guide li::marker {
  color: var(--ia-gold-action-1);
  font-weight: 800;
}
body[data-arcade-surface="game"] .pa-solo-guide a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-right: 1.25rem;
  color: var(--ia-gold-action-1) !important;
  -webkit-text-fill-color: var(--ia-gold-action-1) !important;
  font-weight: 700;
  text-underline-offset: .25em;
}

/* Solo Mastery static landing: its inline styles read theme tokens, but the
   landing always sits on the celestial stage — pin the token values to stage
   inks so the light theme cannot flip them dark-on-navy. */
body[data-arcade-surface="game"] #solo-landing {
  --ink: #EEF1FA;
  --ink-2: #B9C3DF;
  --surface: rgba(255, 255, 255, 0.05);
  --line: rgba(185, 195, 223, 0.25);
  --line-strong: rgba(185, 195, 223, 0.4);
  --c-sci: #E3B65C;
  color: #EEF1FA;
}

/* The game-choice picker thumbnails are bright raster plates on the navy
   console — mounted with the standard gold hairline and shadow. */
body[data-arcade-surface] label.game-choice > span:first-of-type::before {
  border: 1px solid color-mix(in srgb, var(--ia-gold-line, #B8922A) 55%, transparent);
  box-shadow: 0 6px 18px rgba(5, 8, 24, 0.45);
}

/* The signed-in experience dock floats over the page bottom: the footer keeps
   clearance so the last trust link stays reachable. */
body:has(.public-arcade-experience-dock) .public-arcade-footer {
  padding-bottom: 108px;
}

/* Survival Island hero lives OUTSIDE the .wrap panel: the light canvas gives
   it a cream plate while its inks are the island's dark-design slate/white.
   The hero stays transparent on the celestial stage in both themes, and the
   measured ink families get explicit stage values that outrank the
   studio-tokens/light-canvas overrides. */
html[data-theme="light"] body[data-arcade-surface="game"]:has(.tek-badge) .hero,
body.public-arcade-theme--light[data-arcade-surface="game"]:has(.tek-badge) .hero {
  background: transparent !important;
}
body[data-arcade-surface="game"]:has(.tek-badge) :where(.sub, .desc) {
  color: #A8B3C9 !important;
  -webkit-text-fill-color: #A8B3C9 !important;
}
body[data-arcade-surface="game"]:has(.tek-badge) :where(.sub, .desc) :where(b, strong) {
  color: #E2E8F0 !important;
  -webkit-text-fill-color: #E2E8F0 !important;
}
html body[data-arcade-surface="game"]:has(.tek-badge) .tek-badge {
  color: #4ADE80 !important;
  -webkit-text-fill-color: #4ADE80 !important;
}

/* Teacher gate preview: the sign-in dead end teaches what the workspace
   unlocks. Ink pairs with the gate panel (white card in light, slate in dark). */
body[data-arcade-surface] .public-arcade-auth-gate__preview {
  margin: 1.5rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: .55rem;
  text-align: left;
}
body[data-arcade-surface] .public-arcade-auth-gate__preview li {
  color: #3F4C66 !important;
  -webkit-text-fill-color: #3F4C66 !important;
  line-height: 1.55;
}
body[data-arcade-surface] .public-arcade-auth-gate__preview li::marker {
  color: var(--ia-gold-line, #B8922A);
}
body[data-arcade-surface] .public-arcade-auth-gate__more {
  margin: 1.1rem 0 0;
  color: #3F4C66 !important;
  -webkit-text-fill-color: #3F4C66 !important;
}
body[data-arcade-surface] .public-arcade-auth-gate__more a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--ia-gold-ink, #725811) !important;
  -webkit-text-fill-color: var(--ia-gold-ink, #725811) !important;
  font-weight: 700;
  text-underline-offset: .25em;
}
html[data-theme="dark"] body[data-arcade-surface] .public-arcade-auth-gate__preview li,
body.public-arcade-theme--dark[data-arcade-surface] .public-arcade-auth-gate__preview li,
html[data-theme="dark"] body[data-arcade-surface] .public-arcade-auth-gate__more,
body.public-arcade-theme--dark[data-arcade-surface] .public-arcade-auth-gate__more {
  color: #C7D0E4 !important;
  -webkit-text-fill-color: #C7D0E4 !important;
}
html[data-theme="dark"] body[data-arcade-surface] .public-arcade-auth-gate__more a,
body.public-arcade-theme--dark[data-arcade-surface] .public-arcade-auth-gate__more a {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--ia-gold-action-1, #E8C66D) !important;
  -webkit-text-fill-color: var(--ia-gold-action-1, #E8C66D) !important;
}

/* Scholar Atelier nameplate: cream display name on the navy card. */
body[data-arcade-surface] .pae-atelier__nameplate h2 {
  color: #F5EFE2 !important;
  -webkit-text-fill-color: #F5EFE2 !important;
}
body[data-arcade-surface] .pae-atelier__nameplate #selectionSummary {
  color: #B9C3DF !important;
  -webkit-text-fill-color: #B9C3DF !important;
}
body[data-arcade-surface] .pae-atelier__nameplate .pae-eyebrow {
  color: var(--ia-gold-action-1, #E8C66D) !important;
}

/* ── Joining forces: the avatar + companion union celebration ──────────────
   Fires in the Scholar Atelier the moment a companion is equipped. Lives inside
   .pae-atelier__stage (already position:relative), never intercepts pointer
   events, and collapses to a plain plate for reduced-motion users. The stage is
   navy in both themes, so these colours are fixed rather than theme-branched.
   Text carries -webkit-text-fill-color for the same reason the nameplate rules
   above do: an ancestor sets it for gradient display type. */
body[data-arcade-surface] .pae-union {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
  perspective: 900px;
  background: radial-gradient(62% 62% at 50% 46%, rgba(16, 20, 43, .70), rgba(16, 20, 43, .95));
  animation: pae-union-veil 3.4s ease forwards;
}

body[data-arcade-surface] .pae-union__figure {
  position: absolute;
  top: 50%;
  width: min(34%, 10rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #E8C66D;
  box-shadow: 0 14px 38px rgba(5, 8, 24, .6), 0 0 0 4px rgba(232, 198, 109, .18);
  backface-visibility: hidden;
}

/* Full-body source art puts the face near the top of the frame; bias the circle
   upward so the crop keeps the head rather than the torso. */
body[data-arcade-surface] .pae-union__figure--scholar {
  left: 6%;
  object-position: 50% 14%;
  animation: pae-union-close-left 1.15s cubic-bezier(.22, .85, .3, 1) forwards;
}

body[data-arcade-surface] .pae-union__figure--companion {
  right: 6%;
  object-position: center;
  animation: pae-union-close-right 1.15s cubic-bezier(.22, .85, .3, 1) forwards;
}

@keyframes pae-union-close-left {
  0%   { transform: translate(-150%, -50%) rotateY(-92deg); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translate(30%, -50%) rotateY(0deg); opacity: 1; }
}

@keyframes pae-union-close-right {
  0%   { transform: translate(150%, -50%) rotateY(92deg); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translate(-30%, -50%) rotateY(0deg); opacity: 1; }
}

body[data-arcade-surface] .pae-union__burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(62%, 18rem);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(232, 198, 109, .85) 0%, rgba(232, 198, 109, .26) 44%, transparent 70%);
  animation: pae-union-burst 1.5s ease-out .95s forwards;
}

@keyframes pae-union-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

body[data-arcade-surface] .pae-union__sparks {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

body[data-arcade-surface] .pae-union__sparks i {
  position: absolute;
  width: .5rem;
  height: .5rem;
  margin: -.25rem 0 0 -.25rem;
  border-radius: 2px;
  opacity: 0;
  background: linear-gradient(180deg, #FFF2CE, #C9A032);
  animation: pae-union-spark 1.3s ease-out calc(.95s + var(--pae-spark-delay, 0s)) forwards;
}

@keyframes pae-union-spark {
  0%   { opacity: 0; transform: rotate(var(--pae-spark-angle, 0deg)) translateY(0) scale(.4); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--pae-spark-angle, 0deg)) translateY(calc(-1 * var(--pae-spark-reach, 9rem))) scale(1); }
}

body[data-arcade-surface] .pae-union__plate {
  position: absolute;
  left: 50%;
  bottom: 11%;
  display: grid;
  justify-items: center;
  gap: .28rem;
  max-width: min(88%, 26rem);
  padding: .65rem 1.2rem;
  text-align: center;
  border: 1px solid #8F6E1C;
  border-radius: .85rem;
  opacity: 0;
  background: linear-gradient(180deg, rgba(16, 20, 43, .95), rgba(10, 13, 30, .99));
  animation: pae-union-plate 2.35s ease .95s forwards;
}

@keyframes pae-union-plate {
  0%   { opacity: 0; transform: translate(-50%, .7rem); }
  16%  { opacity: 1; transform: translate(-50%, 0); }
  84%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}

body[data-arcade-surface] .pae-union__crest {
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #E8C66D, #C9A032);
  font: 800 .6rem/1 "JetBrains Mono", ui-monospace, monospace;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body[data-arcade-surface] .pae-union__plate strong {
  color: #E8C66D !important;
  -webkit-text-fill-color: #E8C66D !important;
  font: 800 .98rem/1.2 var(--mv-font-ui, "Space Grotesk", "Outfit", system-ui, sans-serif);
  letter-spacing: .02em;
}

body[data-arcade-surface] .pae-union__plate small {
  color: #E4E9F7 !important;
  -webkit-text-fill-color: #E4E9F7 !important;
  font: 500 .78rem/1.4 var(--mv-font-ui, "Space Grotesk", "Outfit", system-ui, sans-serif);
}

body[data-arcade-surface] .pae-union[data-bonded="true"] .pae-union__plate {
  box-shadow: 0 0 0 2px rgba(232, 198, 109, .34), 0 18px 42px rgba(5, 8, 24, .62);
}

@keyframes pae-union-veil {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Reduced motion: no spin, no burst, no confetti — just the plate stating who
   joined whom. Set both from JS (data-still) and here, so the media query holds
   even if the overlay is built before the preference is read. */
body[data-arcade-surface] .pae-union[data-still="true"] {
  animation: none;
  background: rgba(16, 20, 43, .88);
}

body[data-arcade-surface] .pae-union[data-still="true"] .pae-union__figure,
body[data-arcade-surface] .pae-union[data-still="true"] .pae-union__burst,
body[data-arcade-surface] .pae-union[data-still="true"] .pae-union__sparks {
  display: none;
}

body[data-arcade-surface] .pae-union[data-still="true"] .pae-union__plate {
  position: static;
  opacity: 1;
  animation: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body[data-arcade-surface] .pae-union,
  body[data-arcade-surface] .pae-union__figure,
  body[data-arcade-surface] .pae-union__burst,
  body[data-arcade-surface] .pae-union__sparks i,
  body[data-arcade-surface] .pae-union__plate {
    animation: none !important;
  }

  body[data-arcade-surface] .pae-union__figure,
  body[data-arcade-surface] .pae-union__burst,
  body[data-arcade-surface] .pae-union__sparks {
    display: none !important;
  }

  body[data-arcade-surface] .pae-union__plate {
    position: static;
    opacity: 1;
    transform: none;
  }
}

/* The Atelier stage motion loop layers over the still it animates, inheriting
   .pae-atelier__art geometry exactly so framing never shifts when it starts.
   It sits above the still but below the companion medallion and the union
   overlay, which follow it in DOM order. */
body[data-arcade-surface] .pae-atelier__art--motion {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  body[data-arcade-surface] .pae-atelier__art--motion {
    display: none !important;
  }
}