/* Arcade cabinet chrome — widescreen landscape layout */
:root {
  --wood: #3d2415;
  --wood-hi: #5c3820;
  --metal: #2a2e35;
  --neon: #f0c14b;
  --neon-dim: #c49a3c;
  --crt-bg: #0a0e14;
  --glow: rgba(240, 193, 75, 0.35);
  --panel: rgba(8, 12, 18, 0.82);
  /* Title layout prefers ≥ this width; below = soft warning */
  --min-play-width: 900px;
}

html,
body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #080604;
  font-family: "Segoe UI", system-ui, sans-serif;
}

/* Small / portrait viewport notice (also toggled via matchMedia in app.js) */
.viewport-warn {
  display: none;
  position: fixed;
  z-index: 200;
  left: 0;
  right: 0;
  top: 0;
  padding: 0.55rem 1rem;
  background: linear-gradient(180deg, #3a2810, #241808);
  border-bottom: 2px solid var(--neon-dim);
  color: #f5e6c8;
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.viewport-warn p {
  margin: 0;
  max-width: 42rem;
  margin-inline: auto;
}

.viewport-warn strong {
  color: var(--neon);
}

body.viewport-small .viewport-warn {
  display: block;
}

body.viewport-small .cabinet {
  /* leave room for the warning bar */
  height: calc(100dvh - 3.25rem);
  margin-top: 3.25rem;
}

.cabinet {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(1600px, 100%);
  margin: 0 auto;
  background: linear-gradient(180deg, var(--wood-hi), var(--wood) 40%, #2a180e);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.5);
  padding: 0.35rem 0.75rem 0.4rem;
  box-sizing: border-box;
}

/*
 * Full-viewport play (operator 2026-07-29): when in active game / shop stage,
 * drop the cabinet max-width and tight wood padding so the sim uses the whole
 * browser viewport — same roomy feel as the market stage.
 */
.cabinet.on-play,
body.shop-stage-open .cabinet {
  max-width: none;
  width: 100%;
  padding: 0;
  background: #0c0a08;
  box-shadow: none;
}
.cabinet.on-play .bezel,
body.shop-stage-open .cabinet .bezel {
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #0c0a08;
}
.cabinet.on-play .crt,
body.shop-stage-open .cabinet .crt {
  border-radius: 0;
  box-shadow: none;
}
.cabinet.on-play .cabinet-base,
body.shop-stage-open .cabinet .cabinet-base {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.marquee {
  flex: 0 0 auto;
  padding: 0.35rem 0;
  background: #0c0c0c;
  border: 2px solid var(--neon-dim);
  border-radius: 4px;
  box-shadow: 0 0 12px var(--glow);
  margin-bottom: 0.35rem;
  overflow: hidden;
  white-space: nowrap;
  min-height: 1.55rem;
  width: 100%;
  box-sizing: border-box;
}

/* Two equal halves; scroll -50% = seamless loop. JS fills each half ≥ bar width. */
.marquee-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
}

/* Animate whenever track has content (static seed has is-ready; JS re-adds after fill) */
.marquee-track.is-ready {
  animation: marquee-scroll 36s linear infinite;
}

.marquee-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

.marquee-text {
  color: var(--neon);
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: clamp(0.72rem, 1.4vw, 0.95rem);
  text-shadow: 0 0 8px var(--glow);
  white-space: nowrap;
  flex: 0 0 auto;
  /* Clear gap between “…DAYS” and the next unit’s ★ */
  padding-right: 0.55em;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.bezel {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--metal);
  border-radius: 10px;
  padding: 0.45rem;
  border: 3px solid #1a1c20;
  box-shadow: inset 0 0 20px #000;
}

.crt {
  position: relative;
  height: 100%;
  background: var(--crt-bg);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.85);
}

.crt::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 3px
  );
  z-index: 50;
}

.cabinet-base {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  color: #c4a574;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.footer-slot {
  min-height: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
  min-width: 0;
}

.footer-left {
  justify-content: flex-start;
}

.footer-right {
  justify-content: flex-end;
}

/* S25: L/R footer links (community + legal) */
.footer-link {
  appearance: none;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #c4a574;
  background: none;
  border: none;
  padding: 0.15rem 0.25rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 2px;
}

.footer-link:hover {
  color: var(--neon, #f0c14b);
  text-shadow: 0 0 8px var(--glow, rgba(240, 193, 75, 0.45));
}

a.footer-link:visited {
  color: #c4a574;
}

.footer-sep {
  color: #6a5438;
  font-size: 0.65rem;
  user-select: none;
}

/* Dim community links during active play (Main Menu centered) */
.cabinet.on-play .footer-left,
.cabinet.on-play .footer-right {
  opacity: 0.55;
}

.cabinet.on-play .footer-left:hover,
.cabinet.on-play .footer-right:hover {
  opacity: 1;
}

.plaque {
  border: 1px solid #6a5438;
  padding: 0.25rem 0.85rem;
  border-radius: 3px;
  background: #2a1c10;
  justify-self: center;
  text-align: center;
}

.plaque.hidden {
  display: none;
}

.plaque-btn {
  appearance: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--neon);
  cursor: pointer;
  border-color: var(--neon-dim);
}

.plaque-btn:hover {
  box-shadow: 0 0 10px var(--glow);
  border-color: var(--neon);
}

/* Marquee only on landing */
.cabinet:not(.on-landing) .marquee {
  display: none;
}

.screen {
  position: absolute;
  inset: 0;
  overflow: auto;
  color: #e8ecf2;
  z-index: 1;
}

.screen.hidden {
  display: none;
}

.screen.game-screen {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.screen.game-screen.hidden {
  display: none;
}

/* —— Landing: horizontal title (art | menu) —— */
.landing-stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.35fr minmax(17rem, 24rem);
  min-height: 100%;
  overflow: hidden;
}

.landing-art {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 55%, rgba(6, 10, 16, 0.55) 100%),
    url("/static/art/title-bg.jpg") center / cover no-repeat;
}

.landing-art-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(4, 8, 12, 0.15) 0%,
    transparent 35%,
    rgba(6, 10, 16, 0.75) 88%,
    rgba(6, 10, 16, 0.95) 100%
  );
  pointer-events: none;
}

/*
 * Landing crawl — Star Wars–style pitch over title art.
 * Starts just below the fold (not mid-stage) so JS restart never flashes a
 * frozen frame of text before the scroll begins.
 *
 * Smoothness (same column size as the good version):
 *  - no mask on the moving layer (static top fade overlay instead)
 *  - hard/cheap text outline instead of multi-blur shadows
 *  - animate transform only (no opacity keyframes mid-flight)
 *  - translate3d + backface-visibility for a stable compositor layer
 *  - shorter cycle + less overshoot = less empty gap between loops
 */
.landing-crawl {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
  container-name: landing-art-crawl;
  isolation: isolate;
  transform: translateZ(0);
  /* S25: deeper stage + balanced vignette so text reads on town art */
  background: linear-gradient(
    180deg,
    rgba(4, 8, 14, 0.48) 0%,
    rgba(4, 8, 14, 0.14) 38%,
    rgba(4, 8, 14, 0.22) 62%,
    rgba(4, 8, 14, 0.55) 100%
  );
  perspective: min(72vh, 620px);
  perspective-origin: 50% 28%;
}

/* Static fades — never mask-image on the animated content (S25: top + bottom) */
.landing-crawl::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(4, 8, 14, 0.88) 0%,
    rgba(4, 8, 14, 0.35) 55%,
    transparent 100%
  );
}

.landing-crawl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 32%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(4, 8, 14, 0.92) 0%,
    rgba(4, 8, 14, 0.5) 42%,
    transparent 100%
  );
}

.landing-crawl-scroller {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  overflow: visible;
}

.landing-crawl-text {
  position: absolute;
  left: 50%;
  top: 0;
  /* Same column as the preferred look — do not shrink */
  width: min(68%, 26rem);
  margin: 0;
  padding: 0 0.75rem 10vh;
  box-sizing: border-box;
  text-align: center;
  color: #ffe081;
  font-family: Cinzel, "Times New Roman", serif;
  font-size: clamp(1.02rem, 1.75vw, 1.4rem);
  font-weight: 600;
  line-height: 1.52;
  letter-spacing: 0.03em;
  /* Hard shadow only — blur shadows re-raster every animated frame */
  text-shadow:
    0 1px 0 #000,
    0 2px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000;
  -webkit-font-smoothing: antialiased;
  transform-origin: 50% 0%;
  /* Park just below the fold until .is-playing (no mid-stage flash) */
  transform: translate3d(-50%, 0, 0) rotateX(26deg) translate3d(0, 108cqh, 0);
  animation: none;
  visibility: hidden;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Running crawl — only after JS arms it (or reduced-motion override) */
.landing-crawl-text.is-playing {
  visibility: visible;
  animation: landing-crawl-rise 52s linear infinite;
}

.landing-crawl-text p {
  margin: 0 0 0.85em;
}

.landing-crawl-epigraph {
  font-family: Cinzel, serif;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffe9a0;
  margin-bottom: 0.5em !important;
}

.landing-crawl-title {
  margin: 0 0 0.85em;
  font-family: "Cinzel Decorative", Cinzel, serif;
  font-size: 1.22em;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 0 0.2em;
  color: #ffe081;
  white-space: nowrap;
  overflow: visible;
  text-shadow:
    0 1px 0 #000,
    0 2px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000,
    0 0 12px rgba(240, 193, 75, 0.35);
}

.landing-crawl-close {
  font-size: 1.06em;
  letter-spacing: 0.12em;
  padding: 0 0.12em;
  margin-top: 0.2em !important;
  color: #fff0b8;
}

/* Transform only — no opacity keyframes (opacity invalidates the layer) */
@keyframes landing-crawl-rise {
  0% {
    /* Enter from just below the fold */
    transform: translate3d(-50%, 0, 0) rotateX(26deg) translate3d(0, 108cqh, 0);
  }
  100% {
    /* Exit top with less overshoot so the loop gap is short */
    transform: translate3d(-50%, 0, 0) rotateX(26deg) translate3d(0, -118cqh, 0);
  }
}

@supports not (width: 1cqh) {
  .landing-crawl-text {
    transform: translate3d(-50%, 0, 0) rotateX(26deg) translate3d(0, 95vh, 0);
  }

  .landing-crawl-text.is-playing {
    animation-name: landing-crawl-rise-fallback;
  }

  @keyframes landing-crawl-rise-fallback {
    0% {
      transform: translate3d(-50%, 0, 0) rotateX(26deg) translate3d(0, 95vh, 0);
    }
    100% {
      transform: translate3d(-50%, 0, 0) rotateX(26deg) translate3d(0, -110vh, 0);
    }
  }
}

/* Restart: hold off-screen and hidden so the freeze frame is never seen */
.landing-crawl-text.is-restarting {
  animation: none !important;
  visibility: hidden !important;
  transform: translate3d(-50%, 0, 0) rotateX(26deg) translate3d(0, 108cqh, 0);
}

@media (prefers-reduced-motion: reduce) {
  .landing-crawl {
    perspective: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 8, 14, 0.62);
  }

  .landing-crawl::after {
    display: none;
  }

  .landing-crawl-scroller {
    position: relative;
    inset: auto;
    transform: none;
    height: auto;
    max-height: 90%;
    overflow: auto;
    padding: 0.75rem;
  }

  .landing-crawl-text,
  .landing-crawl-text.is-playing,
  .landing-crawl-text.is-restarting {
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
    animation: none !important;
    visibility: visible !important;
    width: 92%;
    padding: 0.5rem 0.25rem;
    font-size: clamp(0.95rem, 2.8vw, 1.15rem);
    text-align: center;
  }
}

.landing-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* Top-align brand stack; empty space falls below the menu */
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.45rem;
  padding: clamp(1.1rem, 2.8vh, 1.75rem) clamp(1.15rem, 2.5vw, 2rem)
    clamp(1rem, 2.5vh, 1.5rem);
  overflow: auto;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.92), rgba(8, 10, 14, 0.96));
  border-left: 1px solid rgba(240, 193, 75, 0.22);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
  text-align: left;
  box-sizing: border-box;
  min-width: 0;
}

/* —— Crest medallion (knight vs dragon metalwork) + wordmark —— */
.landing-crest {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 0 0 auto;
  margin: 0 0 0.15rem;
}

.landing-crest-img {
  display: block;
  /* Fill nearly the full sidebar width */
  width: 100%;
  max-width: min(100%, 17.5rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  box-shadow:
    0 0 0 1px rgba(240, 193, 75, 0.4),
    0 0 0 4px rgba(40, 18, 10, 0.9),
    0 8px 24px rgba(0, 0, 0, 0.6),
    0 0 36px rgba(240, 193, 75, 0.22);
  background: #0a0806;
}

.landing-wordmark {
  margin: 0 0 0.1rem;
  padding: 0;
  width: 100%;
  max-width: 100%;
  line-height: 0;
}

.landing-wordmark-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
}

.landing-kicker {
  margin: 0.45rem 0 0;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9aa6b8;
}

/* Legacy .logo kept for other screens if any */
.landing-panel .logo {
  margin: 0.15rem 0 0.2rem;
  font-family: "Cinzel Decorative", Cinzel, Georgia, serif;
  font-size: clamp(1.75rem, 3.4vw, 2.85rem);
  letter-spacing: 0.08em;
  padding-right: 0.1em;
  box-sizing: content-box;
  max-width: 100%;
  overflow: visible;
  color: var(--neon);
  text-shadow: 0 0 22px var(--glow), 0 0 48px rgba(240, 193, 75, 0.22);
  line-height: 1.15;
}

.landing-panel .tagline {
  color: #a8b4c4;
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.4;
}

.landing-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

.landing-menu .btn-arcade {
  width: 100%;
  min-width: 0;
}

/* Landing Load Game — phrase first, optional file backup */
.landing-load-panel {
  margin-top: 0.35rem;
  padding: 0.75rem 0.7rem 0.85rem;
  border: 1px solid rgba(180, 140, 70, 0.4);
  border-radius: 6px;
  background: rgba(8, 12, 18, 0.72);
  text-align: left;
}
.landing-load-panel.hidden {
  display: none;
}
.landing-load-lead {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #a8b0b8;
}
.landing-load-label {
  display: block;
  font-size: 0.78rem;
  color: #9aa6b8;
  margin-bottom: 0.25rem;
}
.landing-load-phrase {
  margin: 0 0 0.55rem;
  min-height: 4.2rem;
}
.landing-load-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}
.landing-load-or {
  margin: 0.15rem 0 0.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a7585;
}
#btn-landing-upload-backup {
  font-size: 0.85rem;
  color: #c9b878;
  text-align: left;
  padding: 0.2rem 0;
}

.landing-links {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.35rem;
}

.btn-menu {
  appearance: none;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: #c5d0dc;
  text-align: left;
  padding: 0.4rem 0.55rem;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-decoration: none;
  display: block;
  font: inherit;
}
a.btn-menu {
  display: block;
}

.btn-menu:hover,
.btn-menu:focus-visible {
  color: var(--neon);
  border-left-color: var(--neon);
  background: rgba(240, 193, 75, 0.06);
  outline: none;
}

.landing-foot {
  margin: 1.1rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #6a7888;
}
.landing-foot a {
  color: #9aa8b8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.landing-foot a:hover {
  color: var(--neon, #f0c14b);
}
.pay-legal {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.78rem;
  color: #8a9098;
  max-width: 22rem;
  line-height: 1.4;
}
.pay-legal a {
  color: #c9a227;
}

/* Soft-launch: do not buy yet */
.pay-not-ready {
  width: min(100%, 28rem);
  margin: 0 0 1.1rem;
  padding: 1rem 1.1rem 1.15rem;
  box-sizing: border-box;
  text-align: center;
  border: 2px solid #e8a020;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(90, 40, 12, 0.92), rgba(28, 14, 10, 0.96));
  box-shadow:
    0 0 0 1px rgba(255, 200, 80, 0.25),
    0 0 28px rgba(232, 160, 32, 0.35);
}
.pay-not-ready-kicker {
  margin: 0 0 0.35rem;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f0c14b;
}
.pay-not-ready-title {
  margin: 0 0 0.55rem;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.15rem, 3.5vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff4d6;
  text-shadow: 0 0 12px rgba(240, 193, 75, 0.45);
}
.pay-not-ready-body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #f0e6d0;
}
.pay-not-ready-body strong {
  color: #ffb84d;
}

/* Other centered screens (pay, hub, wallet identity, load/import lists) */
.pay-inner,
.hub-inner,
.wallet-inner,
.save-list-inner,
.modal-inner {
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  text-align: center;
  box-sizing: border-box;
  margin-inline: auto;
}

/* —— About: renaissance manuscript marketing folio —— */
.about-screen {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(80, 40, 20, 0.35), transparent 55%),
    linear-gradient(180deg, #1a100c 0%, #0c0a08 100%);
}

.ms-folio {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  padding: 0.55rem clamp(0.55rem, 1.5vw, 1.1rem) 0.65rem;
}

.ms-header {
  flex: 0 0 auto;
  text-align: center;
  padding: 0.45rem 0.75rem 0.55rem;
  border: 1px solid rgba(180, 130, 60, 0.45);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(180deg, rgba(62, 38, 22, 0.95), rgba(36, 22, 14, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 220, 140, 0.12);
}

.ms-rubric {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #c4a060;
}

.ms-title {
  margin: 0.15rem 0 0.25rem;
  font-family: "Cinzel Decorative", Cinzel, serif;
  font-size: clamp(1.65rem, 4.5vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #f0c14b;
  text-shadow:
    0 0 18px rgba(240, 193, 75, 0.35),
    0 2px 0 #3a1808;
}

.ms-subtitle {
  margin: 0 auto;
  max-width: 38rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.82rem, 1.4vw, 0.95rem);
  font-style: italic;
  line-height: 1.45;
  color: #d8c8a8;
}

.ms-ornament {
  margin-top: 0.35rem;
  color: #a07830;
  letter-spacing: 0.55em;
  font-size: 0.75rem;
  opacity: 0.9;
}

.ms-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(180, 130, 60, 0.45);
  border-radius: 0 0 6px 6px;
  background:
    /* parchment grain */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(90, 50, 20, 0.03) 2px,
      rgba(90, 50, 20, 0.03) 3px
    ),
    linear-gradient(165deg, #f3e6c8 0%, #e8d4a8 42%, #dcc8a0 100%);
  box-shadow:
    inset 0 0 60px rgba(80, 40, 10, 0.12),
    inset 0 0 0 1px rgba(255, 245, 220, 0.35);
  color: #2a1810;
  scrollbar-color: #8a6030 #e0d0a8;
}

.ms-page {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(1.15rem, 2.8vw, 2rem) clamp(2.4rem, 5.5vw, 3.75rem)
    clamp(1.35rem, 3vh, 2.25rem);
  /* aged paper + hand-ink double rule */
  background:
    radial-gradient(ellipse at 12% 8%, rgba(160, 90, 40, 0.07), transparent 42%),
    radial-gradient(ellipse at 88% 92%, rgba(100, 50, 20, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(255, 248, 230, 0.35), transparent 30%);
  box-shadow:
    inset 0 0 0 1px rgba(120, 70, 30, 0.32),
    inset 0 0 0 3px rgba(240, 220, 170, 0.55),
    inset 0 0 0 6px rgba(120, 70, 30, 0.2),
    inset 0 0 0 8px rgba(200, 160, 90, 0.18);
}

/* Side vine / motif columns — handwritten-book margins */
.ms-margin {
  position: absolute;
  top: 2.5rem;
  bottom: 2.5rem;
  width: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  color: #8b1e18;
  opacity: 0.55;
  font-size: 0.85rem;
  line-height: 1;
  user-select: none;
}

.ms-margin-left {
  left: 0.45rem;
}

.ms-margin-right {
  right: 0.45rem;
}

.ms-vine {
  display: block;
  transform: rotate(-6deg);
  text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
}

.ms-margin-right .ms-vine {
  transform: rotate(6deg);
}

.ms-margin .ms-vine:nth-child(even) {
  color: #a07830;
  font-size: 0.72rem;
  opacity: 0.9;
}

.ms-margin .ms-vine:nth-child(3n) {
  transform: rotate(8deg);
  color: #5a140e;
}

/* Corner flourishes — like inked book corners */
.ms-corner {
  position: absolute;
  width: 2.1rem;
  height: 2.1rem;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}

.ms-corner::before,
.ms-corner::after {
  content: "";
  position: absolute;
  background: #8b1e18;
  border-radius: 1px;
}

.ms-corner::before {
  width: 100%;
  height: 2px;
  box-shadow: 0 4px 0 rgba(160, 100, 40, 0.45);
}

.ms-corner::after {
  width: 2px;
  height: 100%;
  box-shadow: 4px 0 0 rgba(160, 100, 40, 0.45);
}

.ms-corner-tl {
  top: 0.55rem;
  left: 0.55rem;
}
.ms-corner-tl::before {
  top: 0;
  left: 0;
}
.ms-corner-tl::after {
  top: 0;
  left: 0;
}

.ms-corner-tr {
  top: 0.55rem;
  right: 0.55rem;
  transform: scaleX(-1);
}

.ms-corner-bl {
  bottom: 0.55rem;
  left: 0.55rem;
  transform: scaleY(-1);
}

.ms-corner-br {
  bottom: 0.55rem;
  right: 0.55rem;
  transform: scale(-1);
}

/* Faint vertical “stitch / ruling” near the margins */
.ms-page::before,
.ms-page::after {
  content: "";
  position: absolute;
  top: 1.75rem;
  bottom: 1.75rem;
  width: 1px;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(120, 60, 30, 0.22) 0,
    rgba(120, 60, 30, 0.22) 6px,
    transparent 6px,
    transparent 11px
  );
  opacity: 0.55;
}

.ms-page::before {
  left: 1.85rem;
}

.ms-page::after {
  right: 1.85rem;
}

.ms-section {
  margin: 0 0 1.35rem;
}

.ms-section:last-of-type {
  margin-bottom: 0.75rem;
}

.ms-h {
  margin: 0 0 0.55rem;
  font-family: "Cinzel Decorative", Cinzel, serif;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b1c14;
  text-align: center;
  border-bottom: 1px solid rgba(120, 50, 30, 0.28);
  padding-bottom: 0.35rem;
}

.ms-h::before,
.ms-h::after {
  content: " · ";
  color: #a07830;
  font-weight: 400;
}

.ms-lead,
.ms-page p,
.ms-deck {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.92rem, 1.35vw, 1.05rem);
  line-height: 1.62;
  color: #2c1a12;
  margin: 0 0 0.75rem;
  text-align: justify;
  hyphens: auto;
}

.ms-deck {
  text-align: center;
  font-style: italic;
  color: #4a3020;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.ms-drop {
  float: left;
  font-family: "Cinzel Decorative", Cinzel, serif;
  font-size: 3.1rem;
  line-height: 0.85;
  padding: 0.08em 0.12em 0 0;
  color: #8b1e18;
  text-shadow: 1px 1px 0 rgba(200, 150, 60, 0.45);
}

.ms-features {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.ms-features li {
  position: relative;
  padding: 0.55rem 0.75rem 0.55rem 1.65rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.88rem, 1.25vw, 0.98rem);
  line-height: 1.5;
  color: #2a1810;
  background: rgba(255, 248, 230, 0.55);
  border: 1px solid rgba(140, 90, 40, 0.22);
  border-radius: 3px;
}

.ms-features li::before {
  content: "❧";
  position: absolute;
  left: 0.45rem;
  top: 0.5rem;
  color: #8b1e18;
  font-size: 0.95rem;
}

.ms-features strong {
  color: #5a140e;
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ms-gallery {
  display: grid;
  gap: 0.75rem;
  margin: 0.9rem 0 0.35rem;
  justify-items: center;
}

.ms-gallery-races {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.ms-gallery-classes {
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}

.ms-card {
  margin: 0;
  width: 100%;
  max-width: 11rem;
  text-align: center;
  background: linear-gradient(180deg, #fff8e8, #efe0c0);
  border: 1px solid rgba(120, 70, 30, 0.45);
  border-radius: 5px;
  box-shadow:
    0 3px 0 rgba(80, 40, 10, 0.14),
    inset 0 0 0 1px rgba(255, 250, 230, 0.75),
    inset 0 0 0 3px rgba(180, 120, 50, 0.12);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ms-card:hover {
  border-color: rgba(160, 90, 30, 0.7);
  box-shadow: 0 0 0 1px rgba(200, 140, 50, 0.4), 0 6px 16px rgba(60, 30, 10, 0.18);
}

.ms-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #2a1c10;
  border-bottom: 1px solid rgba(120, 70, 30, 0.35);
}

.ms-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.45rem 0.4rem 0.5rem;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #3a2010;
}

.ms-card-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: #5a140e;
}

.ms-card-tag {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0;
  color: #6a5030;
}

.ms-section-cta {
  text-align: center;
  padding: 0.85rem 0.75rem 0.5rem;
  margin-top: 0.5rem;
  background: rgba(255, 248, 230, 0.45);
  border: 1px solid rgba(140, 90, 40, 0.28);
  border-radius: 4px;
}

.ms-section-cta p {
  text-align: center;
}

.ms-close {
  font-size: 1.05rem !important;
  color: #5a140e !important;
}

.ms-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 0.85rem;
}

.ms-cta-row .btn-arcade {
  min-width: 10rem;
}

/* Parchment buttons on the folio */
.about-screen .btn-arcade:not(.primary) {
  background: linear-gradient(180deg, #3a2818, #241810);
  border-color: #8a6030;
  color: #f0d8a0;
}

.about-screen .btn-arcade.primary {
  box-shadow: 0 0 16px rgba(240, 193, 75, 0.35);
}

.ms-colophon {
  margin-top: 1.25rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(120, 70, 30, 0.28);
  text-align: center;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6a5030;
}

.ms-colophon-mark {
  color: #8b1e18;
  margin: 0 0.35rem;
}

@media (max-width: 720px) {
  .ms-page {
    padding: 1rem 1.15rem 1.25rem;
  }

  .ms-margin,
  .ms-corner,
  .ms-page::before,
  .ms-page::after {
    display: none;
  }

  .ms-lead,
  .ms-page p {
    text-align: left;
    hyphens: none;
  }

  .ms-gallery-races {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  }

  .ms-gallery-classes {
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  }

  .ms-card {
    max-width: 9.5rem;
  }
}

/* —— Credits: static full-viewport studio list (in-world NPCs) —— */
.credits-screen {
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, #182030 0%, #06080c 65%);
}

.cr-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Use almost the entire CRT; user scrolls */
.cr-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  scrollbar-color: #8a7040 #121820;
  -webkit-overflow-scrolling: touch;
}

.cr-fade {
  display: none;
}

.cr-roll {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
  padding: clamp(1.1rem, 2.5vh, 1.75rem) clamp(1.25rem, 4vw, 3rem)
    clamp(1.5rem, 3vh, 2.25rem);
  transform: none;
  animation: none;
}

.cr-head {
  margin: 0 auto 1.25rem;
  max-width: 48rem;
}

.cr-studio {
  margin: 0 0 0.4rem;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8a9aab;
}

.cr-title {
  margin: 0 0 0.4rem;
  font-family: "Cinzel Decorative", Cinzel, serif;
  font-size: clamp(2.4rem, 6.5vw, 3.6rem);
  letter-spacing: 0.14em;
  color: #f0c14b;
  text-shadow: 0 0 28px rgba(240, 193, 75, 0.4);
  line-height: 1.1;
}

.cr-tag {
  margin: 0;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: #b8c4d4;
  line-height: 1.4;
}

.cr-rule {
  margin: 1.1rem auto 0.35rem;
  color: #c4a060;
  letter-spacing: 0.45em;
  font-size: 1.1rem;
  opacity: 0.9;
}

/* Wide grid of departments — fills the viewing area */
.cr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.5vw, 2rem);
  align-items: start;
  text-align: left;
  margin: 1.25rem auto 0;
  max-width: 72rem;
}

.cr-block {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  background: rgba(12, 16, 24, 0.55);
  border: 1px solid rgba(240, 193, 75, 0.14);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.cr-block-wide {
  grid-column: 1 / -1;
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  width: 100%;
}

.cr-role {
  margin: 0 0 0.65rem;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.78rem, 1.3vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a8b8c8;
  border-bottom: 1px solid rgba(240, 193, 75, 0.18);
  padding-bottom: 0.4rem;
}

.cr-name {
  margin: 0.45rem 0 0;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #f4ecdc;
  line-height: 1.25;
}

.cr-note {
  margin: 0.15rem 0 0.45rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  font-style: italic;
  color: #8a9aab;
  line-height: 1.4;
}

.cr-endcard {
  margin: 1.75rem auto 0;
  max-width: 44rem;
  padding: 1.25rem 1rem 0.5rem;
  text-align: center;
}

.cr-end-line {
  margin: 0.55rem 0;
  font-family: Georgia, serif;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-style: italic;
  color: #a8b4c4;
  line-height: 1.5;
}

.cr-end-brand {
  margin: 1.35rem 0 0.3rem;
  font-family: "Cinzel Decorative", Cinzel, serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: 0.16em;
  color: #f0c14b;
}

.cr-end-sub {
  margin: 0;
  font-family: Cinzel, serif;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a98a8;
}

.cr-legal {
  margin: 1.15rem 0 0;
  font-size: clamp(0.8rem, 1.3vw, 0.95rem);
  letter-spacing: 0.06em;
  color: #6a7888;
  line-height: 1.4;
}

.cr-tail {
  display: none;
}

.cr-dock {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 0.65rem 0.75rem 0.8rem;
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.4), rgba(6, 8, 12, 0.98));
  border-top: 1px solid rgba(240, 193, 75, 0.2);
  z-index: 4;
}

.cr-dock .btn-arcade {
  min-width: 12rem;
  font-size: 1rem;
  padding: 0.55rem 1.25rem;
}

@media (max-width: 720px) {
  .cr-grid {
    grid-template-columns: 1fr;
  }

  .cr-block {
    text-align: center;
  }
}

.logo {
  margin: 0;
  font-size: clamp(2.4rem, 10vw, 4rem);
  letter-spacing: 0.2em;
  color: var(--neon);
  text-shadow: 0 0 20px var(--glow), 0 0 40px rgba(240, 193, 75, 0.2);
}

.tagline {
  color: #9aa6b8;
  margin: 0.4rem 0 1.2rem;
  font-size: 0.95rem;
}

/* Stack landing only when very narrow (still show art as header strip) */
@media (max-width: 720px) {
  .landing-stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(28vh, 38vh) 1fr;
  }

  .landing-art-fade {
    background: linear-gradient(
      180deg,
      transparent 40%,
      rgba(6, 10, 16, 0.85) 85%,
      rgba(6, 10, 16, 0.98) 100%
    );
  }

  .landing-crawl {
    perspective: min(58vh, 500px);
  }

  .landing-crawl-text {
    width: min(78%, 22rem);
    font-size: clamp(0.95rem, 2.9vw, 1.2rem);
    animation-duration: 76s;
    transform: translate3d(-50%, 0, 0) rotateX(24deg) translate3d(0, 62cqh, 0);
  }

  .landing-panel {
    border-left: none;
    border-top: 1px solid rgba(240, 193, 75, 0.2);
    box-shadow: none;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
  }

  .landing-crest-img {
    width: min(72%, 11rem);
    max-width: 11rem;
  }

  .landing-wordmark {
    max-width: min(18rem, 100%);
  }

  .landing-menu,
  .landing-links {
    width: min(18rem, 100%);
    align-items: stretch;
  }

  .btn-menu {
    text-align: center;
    border-left: none;
    border-bottom: 1px solid transparent;
  }

  .btn-menu:hover,
  .btn-menu:focus-visible {
    border-left-color: transparent;
    border-bottom-color: var(--neon);
  }
}

.btn-arcade {
  appearance: none;
  border: 2px solid var(--neon-dim);
  background: linear-gradient(180deg, #3a3420, #1e1a10);
  color: var(--neon);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.75rem 1.4rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  text-shadow: 0 0 6px var(--glow);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  min-width: 12rem;
}

.btn-arcade:hover {
  border-color: var(--neon);
  box-shadow: 0 0 16px var(--glow);
}

.btn-arcade:disabled,
.btn-arcade:disabled:hover {
  opacity: 0.55;
  cursor: wait;
  border-color: var(--neon-dim);
  box-shadow: none;
  filter: grayscale(0.25);
}

.btn-arcade.primary {
  background: linear-gradient(180deg, #5a4820, #2a2008);
  font-size: 1.05rem;
}

/* Hub busy: New Game loading — status line, not an error */
#screen-hub.is-busy .hub-actions {
  pointer-events: none;
}
#hub-error.is-status {
  color: #a8c0d8;
  text-shadow: 0 0 8px rgba(120, 160, 200, 0.35);
}

.btn-arcade.dev-grant {
  margin-top: 0.75rem;
  border-color: #5a8;
  color: #8f8;
  min-width: auto;
  font-size: 0.8rem;
}

.btn-link {
  background: none;
  border: none;
  color: #8a9bb0;
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.85rem;
  margin: 0.35rem;
}

.pass-status {
  color: #7dcea0;
  font-size: 0.85rem;
  min-height: 1.2em;
  margin: 0.5rem 0;
}

.pass-status.inactive {
  color: #c08080;
}

/* Pay */
.pay-sub {
  max-width: 28rem;
  color: #b0b8c4;
  font-size: 0.9rem;
  line-height: 1.4;
}

.pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  max-width: 22rem;
  width: 100%;
  margin: 0.75rem 0;
}

.pay-friend {
  width: 100%;
  max-width: 22rem;
  margin: 0.85rem 0 0.35rem;
  text-align: left;
}
.pay-friend-label {
  margin: 0 0 0.35rem;
}
.pay-friend-row {
  display: flex;
  gap: 0.45rem;
  align-items: stretch;
}
.pay-friend-input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(201, 162, 39, 0.4);
  background: rgba(0, 0, 0, 0.45);
  color: #f0e6d0;
  font: 0.9rem/1.3 ui-monospace, monospace;
}
.pay-friend-input:focus {
  outline: none;
  border-color: rgba(240, 210, 120, 0.75);
}
.pay-friend .btn-arcade {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Stripe Embedded Checkout (in-page, Backlinker-style) */
.stripe-embed {
  width: 100%;
  min-height: 420px;
  margin: 0.75rem 0 0.5rem;
  border-radius: 10px;
  overflow: hidden;
  background: #0d0b08;
  border: 1px solid rgba(201, 162, 39, 0.35);
}
.stripe-embed iframe {
  width: 100% !important;
}

.pay-tile.disabled,
.pay-tile:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.pay-tile.disabled:hover,
.pay-tile:disabled:hover {
  transform: none;
  border-color: inherit;
}

.pay-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.9rem 0.5rem;
  background: #141a22;
  border: 2px solid #3a4558;
  border-radius: 10px;
  color: #e8ecf2;
  cursor: pointer;
  font-weight: 600;
}

.pay-tile:hover,
.pay-tile.active {
  border-color: var(--neon);
  box-shadow: 0 0 12px var(--glow);
}

.pay-icon {
  font-size: 1.5rem;
}

.pay-panel {
  max-width: 26rem;
  width: 100%;
  background: #121820;
  border: 1px solid #334;
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.5rem;
  text-align: left;
}

.pay-panel.hidden,
.dev-grant.hidden,
.pay-qr.hidden,
.pay-uri.hidden,
.pay-copy.hidden,
.pay-network-wrap.hidden,
.pay-watch-status.hidden,
.stripe-embed.hidden,
#stripe-embed.hidden,
#pay-redirect.hidden,
#btn-confirm-pay.hidden,
/* legacy */
#btn-ive-paid.hidden {
  display: none;
}

.pay-network-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.65rem;
}

.pay-network-label {
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c4a060;
}

.pay-network {
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  border: 1px solid #4a5a6a;
  background: #0c1218;
  color: #e8eef4;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.pay-network:focus {
  outline: none;
  border-color: var(--neon-dim, #c49a3c);
  box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.35);
}

.pay-network-hint {
  font-size: 0.75rem;
  color: #8a98a8;
  line-height: 1.35;
}

.pay-panel pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8rem;
  color: #c5d0e0;
  margin: 0 0 0.5rem;
}

.pay-qr {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0.65rem auto 0.4rem;
  background: #fff;
  border-radius: 8px;
  image-rendering: pixelated;
  box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.25);
}

.pay-uri {
  margin: 0.35rem 0 0.15rem;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.72rem;
  line-height: 1.35;
  word-break: break-all;
  text-align: center;
  color: #c8d4e4;
}

.pay-copy {
  display: block;
  margin: 0.15rem auto 0.55rem;
  text-align: center;
  font-size: 0.82rem;
}

.pay-watch-status {
  margin: 0.45rem 0 0.35rem;
  font-size: 0.85rem;
  color: #9ab0c8;
  text-align: center;
  min-height: 1.2em;
}

.pay-watch-status.hidden {
  display: none;
}

.pay-watch-status.is-paid {
  color: #7dcea0;
}

.error {
  color: #f08888;
  font-size: 0.85rem;
  min-height: 1.2em;
}

.hub-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: min(18rem, 100%);
}

/* Options (hub sibling) */
.options-inner {
  max-width: 26rem;
  width: 100%;
}
.options-lead {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  line-height: 1.4;
  max-width: 22rem;
  color: #8090a0;
}
.options-form {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  width: min(22rem, 100%);
  text-align: left;
  margin-bottom: 1.25rem;
}
.options-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  cursor: pointer;
}
.options-label {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--neon);
  font-size: 0.92rem;
}
.options-desc {
  font-size: 0.75rem;
  color: #8090a0;
  margin-bottom: 0.2rem;
}
.options-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.options-slider-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--neon, #c9a227);
  height: 0.45rem;
  cursor: pointer;
}
.options-slider-row output {
  min-width: 3.2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  color: #d8e0e8;
  font-weight: 600;
}
.options-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: #c8d0d8;
  cursor: pointer;
  user-select: none;
}
.options-check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--neon, #c9a227);
  cursor: pointer;
}
.options-actions {
  margin-top: 0.25rem;
}

.hint-sm {
  color: #8090a0;
  font-size: 0.78rem;
  max-width: 24rem;
  margin-top: 0.85rem;
}

/* Character create — stepped race/class carousels */
.char-inner {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0.65rem 1rem 1.25rem;
  overflow-y: auto;
  max-height: 100%;
  text-align: left;
  box-sizing: border-box;
}

.char-inner h2 {
  text-align: center;
  margin: 0 0 0.15rem;
  letter-spacing: 0.12em;
  color: var(--neon);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}

.char-steps {
  text-align: center;
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a98a8;
}

.char-inner h3 {
  font-size: 0.95rem;
  margin: 0.35rem 0 0.5rem;
  color: #c8d4e0;
  text-align: center;
}

.char-step.hidden {
  display: none;
}

/* —— Globe continent step (wow / orientation) —— */
#screen-char {
  display: flex;
  flex-direction: column;
}

#screen-char.hidden {
  display: none;
}

.char-inner.char-globe-mode {
  max-width: none;
  width: 100%;
  height: 100%;
  flex: 1;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.char-inner.char-globe-mode > h2,
.char-inner.char-globe-mode > .char-steps,
.char-inner.char-globe-mode > .char-field {
  display: none;
}

.char-step-globe {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.char-step-globe.hidden {
  display: none;
}

.globe-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr minmax(16rem, 22rem);
  gap: 0;
  height: 100%;
}

.globe-stage {
  position: relative;
  min-height: 0;
  background: radial-gradient(ellipse at 40% 40%, #0a1830 0%, #02060e 70%);
  overflow: hidden;
}

#globe-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

#globe-canvas:active {
  cursor: grabbing;
}

.globe-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.75rem;
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 200, 220, 0.55);
  pointer-events: none;
  text-shadow: 0 1px 4px #000;
}

.globe-panel {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem 0.9rem 0.75rem;
  background: linear-gradient(180deg, #121a24 0%, #0a1018 100%);
  border-left: 1px solid #2a3a4a;
  /* allow grid to scroll; was overflow:hidden and clipped continent cards (S2) */
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  min-width: 0;
}

.globe-panel-title {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--neon, #c8e060);
  text-align: left;
}

.globe-panel-sub {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  color: #8a98a8;
  line-height: 1.35;
}

.globe-selected {
  padding: 0.65rem 0.7rem;
  border: 1px solid #3a4a3a;
  border-radius: 8px;
  background: linear-gradient(160deg, #1a2818 0%, #101810 100%);
  box-shadow: 0 0 24px rgba(200, 224, 96, 0.08);
}

.globe-sel-emoji {
  font-size: 1.6rem;
  line-height: 1.2;
}

.globe-sel-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f0ece4;
}

.globe-sel-cap {
  font-size: 0.8rem;
  color: #c4a84b;
  margin-top: 0.15rem;
}

.globe-sel-blurb {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: #a8b4c0;
  line-height: 1.4;
  max-height: 5.5rem;
  overflow-y: auto;
}

.globe-sel-climate {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6a8898;
}

.continent-grid-compact {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-height: none;
  margin: 0.35rem 0;
  /* minmax(0,1fr) prevents min-content overflow clipping the 2nd column */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.35rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.continent-grid-compact .continent-card {
  padding: 0.4rem 0.45rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.continent-grid-compact .continent-name,
.continent-grid-compact .continent-cap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.continent-grid-compact .continent-emoji {
  font-size: 1rem;
}

.continent-grid-compact .continent-name {
  font-size: 0.8rem;
}

.continent-grid-compact .continent-cap {
  font-size: 0.65rem;
}

.globe-actions {
  margin-top: auto;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .globe-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(12rem, 45vh) 1fr;
  }
  .globe-panel {
    border-left: none;
    border-top: 1px solid #2a3a4a;
  }
}

/* —— Continent political map —— */
#screen-continent-map {
  display: flex;
  flex-direction: column;
}
#screen-continent-map.hidden {
  display: none;
}
.cmap-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr minmax(15rem, 20rem);
  height: 100%;
}
.cmap-stage {
  position: relative;
  min-height: 0;
  background: #061018;
  overflow: hidden;
}
#continent-map-svg,
#country-map-svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Map loading overlay (continent / country / in-game atlas) */
.cmap-spinner {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: rgba(6, 16, 24, 0.72);
  color: #e8f0d8;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.cmap-spinner.hidden {
  display: none !important;
}
.cmap-spinner-inset {
  border-radius: 0 0 6px 6px;
}
.cmap-spinner-ring {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 3px solid rgba(200, 224, 96, 0.22);
  border-top-color: #c8e060;
  animation: cmap-spin 0.8s linear infinite;
}
.cmap-spinner-label {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  max-width: 85%;
  text-align: center;
}
@keyframes cmap-spin {
  to {
    transform: rotate(360deg);
  }
}
.atlas-stage {
  position: relative;
}
.atlas-country-panel {
  position: relative;
}
.cmap-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem;
  background: linear-gradient(180deg, #121a24, #0a1018);
  border-left: 1px solid #2a3a4a;
  overflow: auto;
}
.cmap-panel h2 {
  margin: 0;
  color: var(--neon, #c8e060);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}
.cmap-sub {
  margin: 0;
  font-size: 0.78rem;
  color: #8a98a8;
  line-height: 1.4;
}
.cmap-selected {
  padding: 0.65rem 0.7rem;
  border: 1px solid #3a4a3a;
  border-radius: 8px;
  background: linear-gradient(160deg, #1a2818, #101810);
}
.cmap-city-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f0ece4;
}
.cmap-city-meta {
  font-size: 0.8rem;
  color: #c4a84b;
  margin-top: 0.15rem;
}
.cmap-city-note {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: #a8b4c0;
  line-height: 1.35;
}
.cmap-legend {
  list-style: none;
  margin: 0.25rem 0;
  padding: 0;
  font-size: 0.75rem;
  color: #8a98a8;
}
.cmap-legend li {
  margin: 0.2rem 0;
}
.cmap-leg-star {
  color: #f0d060;
  margin-right: 0.25rem;
}
.cmap-leg-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #e8e0d0;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.cmap-leg-city,
.cmap-leg-town,
.cmap-leg-vill {
  display: inline-block;
  color: #e8d090;
  margin-right: 0.3rem;
  font-size: 0.85em;
  min-width: 0.9rem;
  text-align: center;
}
.cmap-leg-town {
  color: #e0c8a0;
}
.cmap-leg-vill {
  color: #d4c8b0;
}
.cmap-actions {
  margin-top: auto;
}
@media (max-width: 900px) {
  .cmap-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(14rem, 50vh) 1fr;
  }
  .cmap-panel {
    border-left: none;
    border-top: 1px solid #2a3a4a;
  }
}

/* Continent picker cards */
.continent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.55rem;
  max-width: 42rem;
  margin: 0.6rem auto 0.75rem;
  max-height: min(42vh, 22rem);
  overflow-y: auto;
  padding: 0.15rem;
}

.continent-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  text-align: left;
  padding: 0.55rem 0.65rem;
  background: linear-gradient(180deg, #1a2430, #101820);
  border: 1px solid #3a4a5a;
  border-radius: 8px;
  color: #e0e8f0;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.continent-card:hover {
  border-color: var(--neon-dim, #8a9a4a);
}

.continent-card.active {
  border-color: var(--neon, #c8e060);
  box-shadow: 0 0 0 1px rgba(200, 224, 96, 0.35);
  background: linear-gradient(180deg, #243020, #182018);
}

.continent-emoji {
  font-size: 1.35rem;
  line-height: 1.2;
}

.continent-name {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
}

.continent-cap {
  font-size: 0.72rem;
  color: #8a98a8;
  letter-spacing: 0.02em;
}

/* Shared centered column so Name / Alignment line up on the same axis */
.char-field {
  width: min(18rem, 92%);
  margin: 0.55rem auto 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  text-align: left;
  box-sizing: border-box;
}

.char-field-label {
  font-size: 0.85rem;
  color: #a8b4c0;
  letter-spacing: 0.04em;
}

.char-field input[type="text"],
.char-field select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  background: #0c1218;
  border: 1px solid #3a4a5a;
  color: #e8eef4;
  border-radius: 4px;
  font: inherit;
  text-align: left;
}

.char-label {
  display: block;
  font-size: 0.85rem;
  color: #a8b4c0;
  margin: 0.4rem 0;
}

.points-tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.65rem;
  margin: 0.5rem auto 0.75rem;
  padding: 0.55rem 1rem;
  max-width: 22rem;
  background: linear-gradient(180deg, #1a2210, #12180c);
  border: 1px solid var(--neon-dim);
  border-radius: 8px;
  color: #c8d0b0;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

.points-tray strong {
  font-size: 1.35rem;
  color: var(--neon);
  min-width: 1.5rem;
  text-align: center;
  text-shadow: 0 0 8px var(--glow);
}

.points-tray.has-unused strong {
  color: #f0a060;
}

.points-tray-hint {
  flex: 1 1 100%;
  text-align: center;
  font-size: 0.75rem;
  color: #8a9870;
}

/* Carousel */
.carousel {
  display: grid;
  grid-template-columns: 2.25rem 1fr 2.25rem;
  gap: 0.35rem;
  align-items: center;
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
}

.carousel-nav {
  appearance: none;
  height: 3rem;
  border: 1px solid #3a4a5a;
  background: #141c26;
  color: var(--neon);
  font-size: 1.6rem;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
}

.carousel-nav:hover {
  border-color: var(--neon);
  box-shadow: 0 0 10px var(--glow);
}

.carousel-viewport {
  overflow: hidden;
  border-radius: 10px;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

.carousel-track.no-transition {
  transition: none !important;
}

/* GA portrait panel on country map step */
.avatar-panel {
  margin: 0.75rem 0 0.5rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
}
.avatar-panel-head {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9a227;
  margin-bottom: 0.45rem;
}
.avatar-optional {
  letter-spacing: 0;
  text-transform: none;
  color: #8a9098;
  font-size: 0.7rem;
}
.avatar-row {
  display: flex;
  justify-content: center;
  margin-bottom: 0.45rem;
}
.avatar-preview,
.avatar-placeholder {
  width: 112px;
  height: 112px;
  border-radius: 8px;
  border: 1px solid rgba(201, 162, 39, 0.5);
  object-fit: cover;
  background: #1a1510;
}
.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #c9a227;
  font-family: Georgia, serif;
}
.avatar-preview[hidden],
.avatar-placeholder[hidden] {
  display: none !important;
}
.avatar-notes {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.4rem;
  padding: 0.35rem 0.45rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 4px;
  color: #e8e0d0;
  font: inherit;
  font-size: 0.82rem;
}
.avatar-panel .btn-arcade {
  width: 100%;
  font-size: 0.8rem !important;
  padding: 0.4rem 0.5rem !important;
}
.avatar-hint {
  margin: 0.35rem 0 0;
  font-size: 0.68rem;
  color: #8a9098;
  line-height: 1.3;
}

.chargen-card {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 0.35rem;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  color: inherit;
  text-align: center;
  appearance: none;
  font: inherit;
}

.chargen-card.active {
  border-color: var(--neon);
  box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.35), 0 0 22px rgba(240, 193, 75, 0.15);
}

.chargen-card-frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0e14;
  aspect-ratio: 1;
  max-height: min(42vh, 280px);
  margin: 0 auto;
  width: min(100%, 280px);
  border: 1px solid #2a3848;
}

.chargen-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chargen-card-meta {
  margin-top: 0.45rem;
}

.chargen-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f0e6c8;
}

.chargen-card-sub {
  font-size: 0.75rem;
  color: #8a9aab;
  margin-top: 0.15rem;
}

.char-blurb {
  font-size: 0.85rem;
  color: #9aa8b8;
  min-height: 2.6em;
  margin: 0.65rem auto;
  max-width: 32rem;
  text-align: center;
  line-height: 1.4;
}

.char-nav-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.char-nav-row .btn-arcade {
  min-width: 9rem;
  width: auto;
}

.ability-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  max-width: 28rem;
  margin: 0 auto;
}

.ability-cell {
  background: #101820;
  border: 1px solid #2a3848;
  border-radius: 4px;
  padding: 0.35rem;
  text-align: center;
}

.ability-cell .ab-key {
  font-size: 0.72rem;
  color: #7a8a9a;
  text-transform: uppercase;
}

.ability-cell .ab-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e8f0f8;
}

.ability-cell .ab-final {
  font-size: 0.72rem;
  color: #7dcea0;
}

.ability-cell .ab-btns {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.2rem;
}

.ability-cell button {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #3a4a5a;
  background: #1a2430;
  color: #c0c8d0;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
}

.ability-cell button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#btn-char-begin:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.char-summary {
  font-size: 0.85rem;
  color: #b8c8d8;
  margin: 0.35rem 0 0.65rem;
  min-height: 1.2em;
  text-align: center;
}

/* Game screen uses existing style.css layout inside */
.game-screen .top {
  flex: 0 0 auto;
}

.game-screen .layout {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

/* Chargen warm loading (New Game intermediate) */
.chargen-loading-inner {
  max-width: 28rem;
  margin: 12vh auto 0;
  padding: 2rem 1.75rem 2.25rem;
  text-align: center;
  background: linear-gradient(165deg, rgba(28, 22, 16, 0.92), rgba(14, 12, 10, 0.96));
  border: 2px solid #c4a84b;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.chargen-loading-title {
  margin: 0 0 0.75rem;
  font-family: Cinzel, Georgia, serif;
  letter-spacing: 0.18em;
  color: #f0d78c;
  font-size: 1.35rem;
}
.chargen-loading-status {
  margin: 0 0 1.1rem;
  color: #e8dcc4;
  font-size: 0.95rem;
}
.chargen-loading-bar {
  height: 0.55rem;
  border-radius: 4px;
  background: rgba(80, 60, 30, 0.55);
  overflow: hidden;
  border: 1px solid rgba(196, 168, 75, 0.45);
}
.chargen-loading-fill {
  height: 100%;
  width: 12%;
  background: linear-gradient(90deg, #a88830, #e8c86a, #a88830);
  background-size: 200% 100%;
  animation: chargen-load-shimmer 1.2s linear infinite;
  transition: width 0.35s ease;
}
@keyframes chargen-load-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.chargen-loading-hint {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: #a89878;
}

/* Wish Arena in-viewport loader (preloads sand / arcade / crowd) */
.arena-loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(40, 32, 22, 0.72),
    rgba(8, 8, 10, 0.88)
  );
  pointer-events: all;
}
.arena-loading.hidden {
  display: none;
}
.arena-loading-card {
  max-width: 22rem;
  width: min(92vw, 22rem);
  padding: 1.35rem 1.4rem 1.5rem;
  text-align: center;
  background: linear-gradient(165deg, rgba(32, 26, 18, 0.95), rgba(12, 10, 8, 0.97));
  border: 2px solid #c4a84b;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.arena-loading-title {
  margin: 0 0 0.55rem;
  font-family: Cinzel, Georgia, serif;
  letter-spacing: 0.16em;
  color: #f0d78c;
  font-size: 1.15rem;
}
.arena-loading-status {
  margin: 0 0 0.9rem;
  color: #e8dcc4;
  font-size: 0.9rem;
}
.arena-loading-bar {
  height: 0.5rem;
  border-radius: 4px;
  background: rgba(80, 60, 30, 0.55);
  overflow: hidden;
  border: 1px solid rgba(196, 168, 75, 0.45);
}
.arena-loading-fill {
  height: 100%;
  width: 8%;
  background: linear-gradient(90deg, #a88830, #e8c86a, #a88830);
  background-size: 200% 100%;
  animation: chargen-load-shimmer 1.2s linear infinite;
  transition: width 0.25s ease;
}
.arena-loading-hint {
  margin: 0.85rem 0 0;
  font-size: 0.75rem;
  color: #a89878;
}