:root {
  --bg: #05010f;
  --bg2: #0d0724;
  --ink: #e8e8ff;
  --muted: #8f8fc0;
  --accent: #ff2b2b;
  --neon: #39ff14;

  /* The single rhythm between major page blocks. Every section separator uses
     this and nothing else, so the page reads evenly from top to bottom.

     Applied as a TOP margin only, with bottoms left at zero. Margins collapse
     in normal flow but not inside flex or grid containers, and this site uses
     both — giving blocks a margin on each side made two stacked blocks 48px
     apart in one place and 96px in another. One side can never double. */
  --block-gap: 48px;

  font-family: "Courier New", ui-monospace, monospace;
}

@media (max-width: 760px) {
  :root { --block-gap: 32px; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(circle at 50% -10%, var(--bg2), var(--bg) 60%);
  color: var(--ink);
}

body { position: relative; }

/* Every primary-menu landing page uses the homepage hero card footprint.
   Page-specific artwork and colour treatments remain inside this shared frame. */
.menu-page-hero.menu-page-hero {
  position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: none;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: center; gap: clamp(24px, 4vw, 52px);
  min-height: 450px; margin: 0; padding: 22px clamp(30px, 5vw, 60px);
  border: 1px solid #36375e; border-radius: 26px;
  background-color: #080318;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 5px,
    radial-gradient(circle at 76% 45%, rgba(200,107,255,.17), transparent 34%),
    linear-gradient(135deg, rgba(17,9,47,.97), rgba(5,1,15,.98));
  box-shadow: 0 28px 90px rgba(0,0,0,.45), inset 0 0 80px rgba(0,0,0,.28);
}
.menu-page-hero .menu-page-hero-copy {
  position: relative; z-index: 3; min-width: 0; max-width: 625px; transform: translateY(-10px);
}
.menu-page-hero .menu-page-hero-title {
  max-width: 620px; margin: 10px 0 14px; color: #fff;
  font-size: clamp(38px, 4.4vw, 50px); line-height: .95; letter-spacing: -2.7px;
  text-wrap: balance; text-shadow: 0 0 18px rgba(88,221,255,.28);
}
.menu-page-hero .menu-page-hero-lead {
  max-width: 625px; margin: 0; color: #c3c3df; font-size: 13px; line-height: 1.62;
}
.menu-page-hero .membership-landing-copy { min-height: 0; padding: 0; }
.menu-page-hero .menu-page-hero-visual {
  position: relative; width: 100%; height: 350px; min-height: 350px; max-height: 350px; margin: 0;
}
/* Boundless: no frame, fill or drop shadow, so the artwork sits directly on the
   hero. overflow:hidden stays purely to contain the hover zoom below. */
.menu-page-hero .menu-page-hero-image {
  overflow: hidden; border: 0; border-radius: 18px; background: none; box-shadow: none;
  transform: none;
}
.menu-page-hero .menu-page-hero-image > img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
}
.menu-page-hero .scores-rank-art > img { height: 270px; }
.preview-games-hero.menu-page-hero { align-items: center; }
/* align-content must stay stretch: centring it sizes the grid rows to their content,
   which stopped the artwork filling the hero's full height the way it does elsewhere. */
.news-hero.menu-page-hero { align-content: stretch; align-items: center; text-align: left; }
.membership-landing-hero.menu-page-hero::after { display: none; }
.membership-landing-hero.menu-page-hero .membership-landing-copy { grid-column: 1; grid-row: 1; }
.membership-landing-hero.menu-page-hero .membership-hero-art { grid-column: 2; grid-row: 1; }
/* The games hero wraps its artwork in an extra div, so the art is not a direct grid
   child and never received the stretch the other heroes get. Pass it through. */
.preview-games-hero-side { display: grid; align-self: stretch; min-width: 0; }
/* Now a single full-bleed image like every other hero, so the old three-cabinet
   grid framing is gone. Only the count badge still floats over it. */
.preview-games-hero-art { position: relative; }
.preview-games-hero-art .preview-games-count {
  position: absolute; z-index: 3; right: 12px; bottom: 12px; width: max-content; max-width: calc(100% - 24px);
  margin: 0; backdrop-filter: blur(10px);
}
.news-hero-copy { min-width: 0; }
.news-hero-art {
  position: relative; overflow: hidden; width: 100%; margin: 0;
  border: 1px solid rgba(88,221,255,.34); border-radius: 18px; background: #030108;
  box-shadow: 0 18px 42px rgba(0,0,0,.36), 0 0 25px rgba(88,221,255,.09);
}
.news-hero-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.news-hero-art figcaption {
  position: absolute; right: 12px; bottom: 12px; left: 12px; overflow: hidden;
  padding: 9px 11px; color: #fff; border: 1px solid rgba(88,221,255,.32);
  border-radius: 7px; background: rgba(3,1,12,.84); font-size: 9px; font-weight: 900;
  letter-spacing: .7px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;
}

@media (min-width: 901px) {
  .menu-page-hero.menu-page-hero { height: 450px; max-height: 450px; }
}

@media (max-width: 900px) {
  .menu-page-hero.menu-page-hero { grid-template-columns: 1fr; height: auto; max-height: none; }
  .membership-landing-hero.menu-page-hero .membership-landing-copy { grid-column: 1; grid-row: 1; }
  .membership-landing-hero.menu-page-hero .membership-hero-art { grid-column: 1; grid-row: 2; }
  .preview-games-hero-side,
  .menu-page-hero .menu-page-hero-visual { width: min(520px, 100%); height: 340px; min-height: 340px; max-height: 340px; margin-inline: auto; }
}

@media (max-width: 760px) {
  .menu-page-hero.menu-page-hero,
  .menu-page-hero .membership-landing-copy { height: auto; min-height: 0; max-height: none; }
  .menu-page-hero.menu-page-hero { padding: 31px 21px; border-radius: 18px; }
  .menu-page-hero .menu-page-hero-copy { transform: none; }
  .menu-page-hero .menu-page-hero-title { font-size: clamp(34px, 11vw, 48px); letter-spacing: -2px; }
  .menu-page-hero .menu-page-hero-visual { height: 300px; min-height: 300px; max-height: 300px; }
}

/* Shared scrolling arcade cast. Decorative art stays silent; each sprite can
   present a compact membership card in roomy desktop margins. */
.site-mascots {
  position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none;
}
.site-mascot-presenter {
  position: absolute; display: flex; width: clamp(68px, 7.5vw, 112px);
  flex-direction: column; align-items: center; will-change: transform;
  filter: drop-shadow(0 0 14px rgba(255,43,107,.28));
  animation: site-mascot-swing 3.4s ease-in-out infinite;
}
.site-mascot {
  position: absolute; display: block; width: clamp(68px, 7.5vw, 112px); height: auto;
  opacity: .9; filter: drop-shadow(0 0 14px rgba(255,43,107,.28));
  will-change: transform; animation: site-mascot-swing 3.4s ease-in-out infinite;
}
.site-mascot-presenter .site-mascot {
  position: static; width: 100%; filter: none; animation: none;
}
.site-mascot-cta {
  display: none; width: 126px; margin-top: 8px; padding: 8px 7px 7px;
  color: #fff; border: 1px solid rgba(57,255,20,.72); border-radius: 7px;
  background: linear-gradient(145deg, rgba(24,8,51,.96), rgba(4,2,15,.97));
  box-shadow: 0 0 15px rgba(57,255,20,.18), inset 0 0 12px rgba(88,221,255,.06);
  font-size: 9px; line-height: 1.25; letter-spacing: .8px; text-align: center;
  pointer-events: auto; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.site-mascot-cta::before {
  content: "▲"; display: block; margin: -14px 0 4px; color: var(--neon);
  font-size: 9px; text-shadow: 0 0 7px rgba(57,255,20,.75);
}
.site-mascot-cta strong, .site-mascot-cta small { display: block; white-space: nowrap; }
.site-mascot-cta strong { color: var(--neon); font-size: 9px; }
.site-mascot-cta small { margin-top: 3px; color: #bceeff; font-size: 8px; letter-spacing: .55px; }
.site-mascot-cta:hover, .site-mascot-cta:focus-visible {
  border-color: #58ddff; box-shadow: 0 0 19px rgba(88,221,255,.32); transform: translateY(-2px);
}
.site-mascot-cta:focus-visible { outline: 2px solid #58ddff; outline-offset: 3px; }
@media (min-width: 1401px) {
  .site-mascot-cta { display: block; }
  .membership-landing-page .site-mascot-cta,
  .account-body .site-mascot-cta,
  .play-body .site-mascot-cta { display: none; }
}
.site-mascot-mario { top: 240px; left: max(6px, calc((100vw - 1180px) / 2 - 118px)); }
.site-mascot-invader {
  top: 300px; right: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(88,221,255,.34)); animation-delay: -1.7s;
}
.site-mascot-pacman {
  top: 1080px; right: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(255,216,61,.3)); animation-delay: -.8s;
}
.site-mascot-moon-cresta {
  top: 1640px; left: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(88,221,255,.32)); animation-delay: -2.5s;
}
.site-mascot-asteroid {
  top: 2200px; right: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 14px rgba(203,213,225,.25)); animation-delay: -1.2s;
}
.site-mascot-frogger {
  top: 2760px; left: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(57,211,83,.3)); animation-delay: -2.9s;
}
/* The cast continues on the same 560px cadence, alternating sides, so a long
   page keeps meeting a new face instead of running out at frogger or looping
   back to the first one. Sixteen distinct sprites reach roughly 8400px, past
   the foot of the longest article. Each glow is tinted to its own sprite, and
   the delays are staggered so neighbours do not swing in unison. */
.site-mascot-ghost {
  top: 3320px; right: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(255,70,111,.3)); animation-delay: -.4s;
}
.site-mascot-coin {
  top: 3880px; left: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(255,216,61,.32)); animation-delay: -2.1s;
}
.site-mascot-crab {
  top: 4440px; right: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(57,255,20,.3)); animation-delay: -1.4s;
}
.site-mascot-joystick {
  top: 5000px; left: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 14px rgba(255,70,111,.28)); animation-delay: -3.1s;
}
.site-mascot-saucer {
  top: 5560px; right: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(88,221,255,.32)); animation-delay: -.9s;
}
.site-mascot-barrel {
  top: 6120px; left: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 14px rgba(255,176,46,.3)); animation-delay: -2.6s;
}
.site-mascot-cannon {
  top: 6680px; right: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(57,211,83,.3)); animation-delay: -1.8s;
}
.site-mascot-mushroom {
  top: 7240px; left: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 14px rgba(255,70,111,.28)); animation-delay: -.6s;
}
.site-mascot-heart {
  top: 7800px; right: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(255,70,111,.32)); animation-delay: -2.3s;
}
.site-mascot-cabinet {
  top: 8360px; left: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(141,92,255,.32)); animation-delay: -1.1s;
}
/* Second time around, same cadence, for the tail of a very long article. */
.site-mascot-saucer-2 {
  top: 8920px; right: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(88,221,255,.32)); animation-delay: -2.2s;
}
.site-mascot-ghost-2 {
  top: 9480px; left: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(255,70,111,.3)); animation-delay: -1.5s;
}
.site-mascot-cannon-2 {
  top: 10040px; right: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(57,211,83,.3)); animation-delay: -3.0s;
}
.site-mascot-coin-2 {
  top: 10600px; left: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(255,216,61,.32)); animation-delay: -.7s;
}
.site-mascot-crab-2 {
  top: 11160px; right: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(57,255,20,.3)); animation-delay: -2.7s;
}
.site-mascot-cabinet-2 {
  top: 11720px; left: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(141,92,255,.32)); animation-delay: -1.9s;
}
.site-mascot-heart-2 {
  top: 12280px; right: max(6px, calc((100vw - 1180px) / 2 - 118px));
  filter: drop-shadow(0 0 15px rgba(255,70,111,.32)); animation-delay: -.3s;
}
@keyframes site-mascot-swing {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-15px) rotate(1.5deg); }
}
@media (max-width: 1400px) {
  .site-mascot-presenter { width: 52px; }
  .site-mascot { width: 52px; opacity: .62; }
}

a { color: inherit; text-decoration: none; }
code { color: var(--neon); }

/* ---------------- Gallery ---------------- */
.arcade { max-width: 1080px; margin: 0 auto; padding: 32px 20px 60px; }
.logo {
  font-size: clamp(38px, 8vw, 74px);
  letter-spacing: 6px; margin: 0; font-weight: 800; color: #fff;
  text-shadow: 0 0 8px var(--accent), 0 0 22px var(--accent);
}
.logo span { color: var(--neon); text-shadow: 0 0 8px var(--neon), 0 0 22px var(--neon); }

.arcade-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 0 26px; padding: clamp(18px, 3vw, 28px) clamp(20px, 6vw, 64px);
  text-align: center; border: 2px solid #2a2f52; border-radius: 14px;
  background:
    linear-gradient(rgba(57,255,20,0.035) 1px, transparent 1px) 0 0 / 100% 5px,
    radial-gradient(circle at 50% 0%, rgba(255,43,107,0.22), transparent 55%),
    linear-gradient(135deg, rgba(13,7,36,0.96), rgba(5,1,15,0.96));
  box-shadow: 0 0 30px rgba(255,43,107,0.1), inset 0 0 50px rgba(0,0,0,0.35);
}
.arcade-hero::after {
  content: ""; position: absolute; z-index: -1; width: 180px; height: 180px;
  right: -90px; bottom: -110px; border: 2px solid rgba(57,255,20,0.18);
  border-radius: 50%; box-shadow: 0 0 40px rgba(57,255,20,0.12);
}
.hero-logo {
  display: block; width: min(440px, 82%); height: auto; margin: 0 auto 8px;
  filter: drop-shadow(0 0 16px rgba(255,43,107,0.42));
}
.hero-kicker {
  margin: 16px 0 0; color: var(--neon); font-size: 12px; font-weight: 800;
  letter-spacing: 4px; text-shadow: 0 0 9px rgba(57,255,20,0.7);
}
.hero-stats {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  gap: 10px; margin-top: 14px;
}
.player-presence {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 6px 12px; color: #fff; background: rgba(0,0,0,0.35);
  border: 1px solid rgba(57,255,20,0.35); border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
}
.presence-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--neon);
  box-shadow: 0 0 8px var(--neon); animation: presence-pulse 1.8s ease-in-out infinite;
}
.visitor-total {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 6px 12px; color: #fff; background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,43,107,0.55); border-radius: 999px;
  box-shadow: 0 0 14px rgba(255,43,107,0.1);
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
}
.visitor-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ff2b6b;
  box-shadow: 0 0 8px #ff2b6b;
}
#visitor-total-value { color: #ff7aa8; text-shadow: 0 0 7px rgba(255,43,107,0.8); }
.hero-faq {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 12px 6px 7px; color: #dffaff; background: rgba(0,0,0,0.35);
  border: 1px solid rgba(44,214,255,0.55); border-radius: 999px;
  box-shadow: 0 0 14px rgba(44,214,255,0.1);
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hero-faq strong { color: #58ddff; text-shadow: 0 0 7px rgba(44,214,255,0.7); }
.hero-faq-icon {
  display: grid; width: 17px; height: 17px; place-items: center; color: #001018;
  background: #58ddff; border-radius: 50%; font-size: 11px; font-weight: 900;
  box-shadow: 0 0 8px rgba(44,214,255,0.65);
}
.hero-faq:hover, .hero-faq:focus-visible {
  border-color: #58ddff; box-shadow: 0 0 17px rgba(44,214,255,0.25); transform: translateY(-1px);
}
.hero-faq:focus-visible { outline: 2px solid #58ddff; outline-offset: 3px; }
.hero-history {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 12px 6px 7px; color: #f3eaff; background: rgba(0,0,0,0.35);
  border: 1px solid rgba(200,107,255,0.6); border-radius: 999px;
  box-shadow: 0 0 14px rgba(200,107,255,0.1); font-size: 11px; font-weight: 700;
  letter-spacing: 1px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hero-history strong { color: #d99aff; text-shadow: 0 0 7px rgba(200,107,255,0.7); }
.hero-history-icon {
  display: grid; width: 17px; height: 17px; place-items: center; color: #12001d;
  background: #d99aff; border-radius: 50%; font-size: 9px; box-shadow: 0 0 8px rgba(200,107,255,0.65);
}
.hero-history:hover, .hero-history:focus-visible {
  border-color: #d99aff; box-shadow: 0 0 17px rgba(200,107,255,0.28); transform: translateY(-1px);
}
.hero-history:focus-visible { outline: 2px solid #d99aff; outline-offset: 3px; }
.hero-technology {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 12px 6px 7px; color: #fff5d6; background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,207,63,.62); border-radius: 999px;
  box-shadow: 0 0 14px rgba(255,207,63,.1); font-size: 11px; font-weight: 700;
  letter-spacing: 1px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hero-technology strong { color: #ffcf3f; text-shadow: 0 0 7px rgba(255,207,63,.65); }
.hero-technology-icon {
  display: grid; width: 17px; height: 17px; place-items: center; color: #211600;
  background: #ffcf3f; border-radius: 50%; font-size: 10px; box-shadow: 0 0 8px rgba(255,207,63,.6);
}
.hero-technology:hover, .hero-technology:focus-visible {
  border-color: #ffe270; box-shadow: 0 0 17px rgba(255,207,63,.28); transform: translateY(-1px);
}
.hero-technology:focus-visible { outline: 2px solid #ffcf3f; outline-offset: 3px; }
.fundraiser-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 14px;
  padding: 7px 11px 7px 8px; color: #f4fff8;
  border: 1px solid rgba(57,255,20,0.5); border-radius: 9px;
  background: linear-gradient(135deg, rgba(2,169,92,0.24), rgba(0,0,0,0.38));
  box-shadow: 0 0 18px rgba(2,169,92,0.12);
  text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fundraiser-mark {
  display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center;
  color: #fff; background: #02a95c; border-radius: 7px;
  box-shadow: 0 0 10px rgba(2,169,92,0.35);
}
.fundraiser-copy { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
.fundraiser-copy strong { color: #fff; font-size: 10px; letter-spacing: 1.3px; white-space: nowrap; }
.fundraiser-copy small { color: #a8d9bc; font-size: 10px; }
.fundraiser-arrow { color: var(--neon); font-size: 14px; font-weight: 800; }
.fundraiser-link:hover,
.fundraiser-link:focus-visible {
  border-color: var(--neon); box-shadow: 0 0 18px rgba(57,255,20,0.22); transform: translateY(-1px);
}
.fundraiser-link:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.fundraiser-widget {
  position: fixed; z-index: 1000; right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: stretch;
  width: min(270px, calc(100vw - 20px)); padding: 5px;
  border: 1px solid rgba(57,255,20,0.55); border-radius: 14px;
  background: rgba(5,1,15,0.94); box-shadow: 0 5px 28px rgba(0,0,0,0.62), 0 0 18px rgba(57,255,20,0.15);
  backdrop-filter: blur(8px); animation: fundraiser-arrive .35s ease-out both;
}
.fundraiser-widget[hidden] { display: none; }
.fundraiser-widget.is-dragging { opacity: .9; box-shadow: 0 8px 34px rgba(0,0,0,.75), 0 0 24px rgba(57,255,20,.25); }
.fundraiser-widget .fundraiser-link {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 6px 8px; border: 0; background: transparent; box-shadow: none;
}
.fundraiser-widget .fundraiser-link:hover, .fundraiser-widget .fundraiser-link:focus-visible {
  transform: none; background: rgba(2,169,92,0.12); box-shadow: none;
}
.fundraiser-widget-tools {
  display: flex; flex: 0 0 27px; flex-direction: column; align-items: center;
  justify-content: space-between; border-right: 1px solid rgba(57,255,20,0.18);
}
.fundraiser-drag, .fundraiser-dismiss {
  display: grid; width: 24px; height: 24px; padding: 0; place-items: center;
  color: var(--muted); background: transparent; border: 0; border-radius: 6px;
  font-family: inherit; cursor: pointer;
}
.fundraiser-drag { color: var(--neon); font-size: 17px; line-height: 1; cursor: grab; touch-action: none; }
.fundraiser-widget.is-dragging .fundraiser-drag { cursor: grabbing; }
.fundraiser-dismiss { font-size: 19px; line-height: 1; }
.fundraiser-drag:hover, .fundraiser-drag:focus-visible { color: #001; background: var(--neon); outline: none; }
.fundraiser-dismiss:hover, .fundraiser-dismiss:focus-visible { color: #fff; background: #d62956; outline: none; }
.paypal-widget {
  right: auto; left: max(18px, env(safe-area-inset-left));
  border-color: rgba(77,160,255,0.7);
  box-shadow: 0 5px 28px rgba(0,0,0,0.62), 0 0 18px rgba(77,160,255,0.2);
}
.paypal-widget.is-dragging { box-shadow: 0 8px 34px rgba(0,0,0,.75), 0 0 24px rgba(77,160,255,.3); }
.paypal-widget .fundraiser-widget-tools { border-right-color: rgba(77,160,255,0.24); }
.paypal-widget .fundraiser-drag { color: #66b5ff; }
.paypal-widget .fundraiser-drag:hover, .paypal-widget .fundraiser-drag:focus-visible {
  color: #001329; background: #66b5ff;
}
.paypal-widget .paypal-mark { color: #073087; background: #ffc439; font-size: 21px; font-weight: 900; }
.paypal-widget .fundraiser-copy strong { color: #73bdff; text-shadow: 0 0 7px rgba(77,160,255,.65); }
.paypal-widget .fundraiser-copy small { color: #ffd76c; }
.paypal-widget .fundraiser-arrow { color: #ffc439; }
.paypal-widget .paypal-donate-link:hover, .paypal-widget .paypal-donate-link:focus-visible {
  background: rgba(77,160,255,0.12);
}
@keyframes fundraiser-arrive {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
}
@keyframes presence-pulse {
  50% { opacity: 0.45; transform: scale(0.8); }
}
.arcade-hero h1 {
  max-width: 850px; margin: 0 auto; color: #fff;
  font-size: clamp(22px, 3.8vw, 38px); line-height: 1.18; letter-spacing: -1px;
  text-wrap: balance; text-shadow: 0 0 18px rgba(255,43,107,0.32);
}
/* ---------------- Library controls (search / filter / sort) ---------------- */
.library-controls {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: center; margin-bottom: 14px;
}
.lib-search {
  flex: 1 1 260px; max-width: 440px; padding: 10px 14px;
  background: rgba(0,0,0,0.35); color: var(--ink);
  border: 2px solid #2a2f52; border-radius: 8px;
  font-family: inherit; font-size: 14px; letter-spacing: 1px;
}
.lib-search::placeholder { color: var(--muted); }
.lib-search:focus, .lib-filter:focus, .lib-sort:focus {
  outline: none; border-color: var(--neon); box-shadow: 0 0 12px -2px var(--neon);
}
.lib-filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  min-width: 0; max-width: 100%;
}
.lib-search-row {
  display: flex; width: min(100%, 540px); flex: 1 1 100%; align-items: stretch;
  justify-content: center; gap: 8px;
}
.lib-search-row .lib-search { width: 100%; max-width: none; min-width: 0; }
.lib-search-row .lib-reset { min-height: 0; margin: 0; padding-inline: 15px; }
.lib-filter, .lib-sort {
  padding: 9px 12px; background: rgba(0,0,0,0.35); color: var(--ink);
  border: 2px solid #2a2f52; border-radius: 8px;
  min-width: 0; max-width: 100%;
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.lib-filter option, .lib-sort option { background: var(--bg2); color: var(--ink); }
.lib-tier-filter {
  display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px;
  min-width: 0; margin: 0; padding: 2px 0 0; border: 0;
}
.lib-tier-filter legend {
  float: left; margin: 0 3px 0 0; padding: 0; color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
.lib-tier-option { position: relative; display: inline-flex; cursor: pointer; }
.lib-tier-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lib-tier-option span {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px;
  color: #aaaaca; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid #34395f; border-radius: 999px; background: rgba(0,0,0,.35);
  transition: color .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.lib-tier-option:hover span { color: #fff; border-color: #737aa8; }
.lib-tier-option input:focus-visible + span { outline: 2px solid var(--neon); outline-offset: 2px; }
.lib-tier-option.all input:checked + span { color: #031000; border-color: #9dff8c; background: var(--neon); box-shadow: 0 0 10px rgba(57,255,20,.3); }
.lib-tier-option.visitor input:checked + span { color: #031000; border-color: #9dff8c; background: #75ff5a; box-shadow: 0 0 10px rgba(117,255,90,.3); }
.lib-tier-option.member input:checked + span { color: #06151a; border-color: #9cecff; background: #58ddff; box-shadow: 0 0 10px rgba(88,221,255,.3); }
.lib-tier-option.supporter input:checked + span { color: #1b0e00; border-color: #ffe09a; background: #ffc64d; box-shadow: 0 0 10px rgba(255,198,77,.32); }
.lib-count { text-align: center; color: var(--muted); font-size: 12px; letter-spacing: 1px; margin: 0 0 18px; }
.lib-empty { text-align: center; color: var(--muted); margin: 40px 0; }
.lib-reset {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: #001; background: var(--neon); border: none; border-radius: 6px;
  padding: 5px 12px; margin-left: 6px; cursor: pointer; text-decoration: none;
}
.lib-reset:hover { box-shadow: 0 0 10px -1px var(--neon); }
/* Cards filtered out are removed from flow (beats .cabinet's display:flex). */
.cabinet[hidden] { display: none; }

.lib-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin: 30px 0 4px;
}
.lib-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: 1px;
  color: var(--ink); background: rgba(0,0,0,0.35);
  border: 2px solid #2a2f52; border-radius: 8px; cursor: pointer;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.lib-page-btn:hover:not(:disabled) { border-color: var(--neon); color: #fff; box-shadow: 0 0 10px -2px var(--neon); }
.lib-page-btn:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.lib-page-btn.is-current {
  color: #ff6b6b; background: rgba(255,43,43,0.10); border-color: var(--accent);
  box-shadow: 0 0 12px -2px var(--accent), inset 0 0 12px -5px var(--accent);
  text-shadow: 0 0 8px rgba(255,43,43,0.6); cursor: default;
}
.lib-page-btn:disabled { opacity: .35; cursor: default; }
.lib-page-nav { color: var(--neon); }
.lib-page-btn.is-disabled { opacity: .35; cursor: default; pointer-events: none; }
.lib-page-gap { color: var(--muted); padding: 0 2px; font-weight: 800; letter-spacing: 2px; }

.site-pager {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px;
}
.site-pager .lib-page-btn { flex: 0 0 42px; width: 42px; min-width: 42px; padding: 0; }
.site-pager-label { min-width: 86px; color: #aaaac5; font-size: 10px; font-weight: 900; text-align: center; white-space: nowrap; }

@media (max-width: 520px) {
  .library-controls { align-items: stretch; }
  .lib-search, .lib-filters { width: 100%; max-width: 100%; }
  .lib-search-row { width: 100%; }
  .lib-filters { flex: 1 1 100%; }
  .lib-filter, .lib-sort { width: 100%; }
  .lib-pager { gap: 6px; }
  .lib-page-btn { min-width: 40px; height: 40px; padding: 0 9px; font-size: 13px; }
}

.cabinet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.cabinet {
  position: relative; display: flex; flex-direction: column;
  border: 2px solid var(--accent); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.3));
  box-shadow: 0 0 18px -6px var(--accent);
  overflow: hidden; transition: transform .12s ease, box-shadow .12s ease;
}
.cabinet:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 0 26px -4px var(--accent); }
.cabinet-screen {
  display: flex; align-items: center; gap: 13px; min-height: 86px;
  padding: 16px; background: #000; border-bottom: 2px solid var(--accent);
}
.cabinet-thumbnail-frame {
  display: grid; flex: 0 0 74px; width: 74px; height: 56px; place-items: center;
  overflow: hidden; background: #000; border: 1px solid color-mix(in srgb, var(--accent) 65%, #2a2f52);
  border-radius: 5px; box-shadow: 0 0 10px -3px var(--accent);
}
.cabinet-thumbnail {
  display: block; width: 72px; height: 54px; object-fit: contain;
  image-rendering: pixelated;
}
.cabinet-title { min-width: 0; font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 0 10px var(--accent); }
.cabinet-credit { display: flex; flex: 0 1 48%; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.cabinet-manufacturer { color: var(--ink); font-size: 11px; line-height: 1.25; }
.cabinet-author { color: var(--accent); font-size: 10px; line-height: 1.25; }
.cabinet-year { color: var(--muted); font-size: 12px; }
.cabinet-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cabinet-desc { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cabinet-info { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.cabinet-info .info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 4px; border-bottom: 1px dotted #2a2f52; }
.cabinet-info dt { color: var(--muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.cabinet-info dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; text-align: right; }
.cabinet-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.cabinet-play { color: var(--accent); font-weight: 800; letter-spacing: 2px; }
.badge { font-size: 11px; padding: 2px 7px; border-radius: 999px; font-weight: 700; }
.badge.ready { color: #001; background: var(--neon); }
.badge.missing { color: #fff; background: #772; border: 1px solid #cc4; }
.badge.premium, .badge.supporter { color: #1b0e00; background: #ffc64d; border: 1px solid #ffe09a; }
.badge.member { color: #06151a; background: #58ddff; border: 1px solid #9cecff; }
.badge.visitor { color: #041000; background: var(--neon); border: 1px solid #a2ff8f; }
.badge.keyboard { color: #ffd23f; background: rgba(120, 90, 20, 0.28); border: 1px solid rgba(255, 210, 63, 0.5); }
.arcade-footer {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  margin-top: var(--block-gap); text-align: center; color: var(--muted); font-size: 12px;
}
.wow-promo {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; width: 100%; flex-direction: column; align-items: center;
  gap: 8px; margin-bottom: var(--block-gap); padding: 20px clamp(12px, 3vw, 28px) 17px;
  border: 1px solid #304c70; border-radius: 12px;
  background:
    radial-gradient(circle at 20% 0%, rgba(43,145,205,0.2), transparent 45%),
    linear-gradient(145deg, rgba(7,20,39,0.97), rgba(4,7,18,0.98));
  box-shadow: 0 0 28px rgba(41,125,184,0.12), inset 0 0 35px rgba(0,0,0,0.28);
}
.wow-promo::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,126,32,0.05), transparent);
  pointer-events: none;
}
.wow-promo-kicker {
  color: #ff9a3d; font-size: 10px; font-weight: 800; letter-spacing: 3px;
  text-shadow: 0 0 9px rgba(255,126,32,0.5);
}
.wow-promo-title {
  color: #f4f8ff; font-size: clamp(16px, 2.3vw, 22px); line-height: 1.25;
  text-wrap: balance; text-shadow: 0 0 12px rgba(76,167,225,0.35);
}
.wow-promo-copy {
  max-width: 680px; margin-bottom: 5px; color: #a9bad1; font-size: 12px; line-height: 1.5;
}
.wow-promo-link { display: flex; max-width: 468px; width: 100%; flex-direction: column; align-items: center; gap: 9px; }
.wow-promo-link picture { display: block; width: 100%; }
.wow-promo-link img {
  display: block; width: 100%; height: auto; border: 1px solid #466b91;
  border-radius: 5px; box-shadow: 0 0 16px rgba(73,160,219,0.2);
}
.wow-promo-cta {
  color: #ff9a3d; font-size: 11px; font-weight: 800; letter-spacing: 2px;
  transition: color .15s ease, text-shadow .15s ease;
}
.wow-promo-link:hover .wow-promo-cta,
.wow-promo-link:focus-visible .wow-promo-cta {
  color: #ffd09f; text-shadow: 0 0 9px rgba(255,126,32,0.75);
}
.wow-promo-link:focus-visible { outline: 2px solid #ff9a3d; outline-offset: 5px; border-radius: 5px; }
.footer-copyright { letter-spacing: 1px; }
.footer-copyright a { color: var(--neon); font-weight: 700; }
.footer-copyright a:hover { text-shadow: 0 0 8px var(--neon); }
/* The footer's own flex gap is 0 so the big blocks above own their spacing
   outright; these two lines keep the small separation they used to get. */
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 7px; letter-spacing: 1px; }
.footer-nav a { color: var(--ink); font-weight: 700; transition: color .15s ease, text-shadow .15s ease; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--neon); text-shadow: 0 0 8px rgba(57,255,20,.55); }
.footer-nav a:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.footer-nav span { color: #ff5b92; font-size: 7px; text-shadow: 0 0 6px rgba(255,43,107,.65); }

/* Arcade Allies ---------------------------------------------------------- */
.allies-page { max-width: 1180px; padding: 30px 24px 64px; }
.allies-hero {
  min-height: 390px;
  background:
    radial-gradient(circle at 78% 36%, rgba(57,255,20,.18), transparent 25%),
    linear-gradient(135deg, rgba(255,43,107,.12), rgba(8,5,28,.96) 48%, rgba(43,212,255,.13));
}
.allies-eyebrow, .allies-kicker {
  color: var(--neon);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.allies-hero-mark {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
  justify-content: center;
  min-height: 260px;
}
.allies-hero-mark span {
  background: #09051b;
  border: 2px solid var(--neon);
  box-shadow: 0 0 22px rgba(57,255,20,.25), inset 0 0 20px rgba(57,255,20,.08);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: .12em;
  padding: 18px 28px;
}
.allies-hero-mark b { color: #ff5b92; font-size: 2rem; text-shadow: 0 0 12px rgba(255,43,107,.8); }
.allies-intro, .allies-banners, .allies-criteria, .allies-apply {
  background: rgba(9,5,27,.9);
  border: 1px solid rgba(136,153,255,.27);
  border-radius: 16px;
  margin-top: 28px;
  padding: clamp(24px, 4vw, 46px);
}
.allies-intro h2, .allies-section-heading h2, .allies-criteria h2, .allies-apply h2 {
  color: #fff;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  margin: 7px 0 13px;
}
.allies-intro p:last-child, .allies-apply > p:not(.allies-kicker) { color: #d5d1e9; line-height: 1.75; max-width: 820px; }
.allies-banners { display: grid; gap: 22px; }
.allies-section-heading { margin-bottom: 2px; }
.ally-banner-card {
  align-items: center;
  background: rgba(20,14,48,.82);
  border: 1px solid rgba(57,255,20,.2);
  border-radius: 12px;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(210px, 468px) 1fr;
  padding: 22px;
}
.ally-banner-preview {
  align-items: center;
  background-image: linear-gradient(45deg, #18122c 25%, transparent 25%), linear-gradient(-45deg, #18122c 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #18122c 75%), linear-gradient(-45deg, transparent 75%, #18122c 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  min-height: 100px;
  overflow: auto;
  padding: 16px;
}
.ally-banner-preview img { flex: none; max-width: none; }
.ally-banner-preview-small img { image-rendering: pixelated; }
.ally-banner-card h3 { color: #fff; margin: 0 0 6px; }
.ally-banner-card p { color: #aaa5c6; line-height: 1.55; margin: 0 0 12px; }
.ally-banner-card textarea {
  background: #05030f;
  border: 1px solid #3c3563;
  border-radius: 6px;
  color: #bfffb3;
  font: .72rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  min-height: 82px;
  padding: 10px;
  resize: vertical;
  width: 100%;
}
.allies-criteria { display: grid; gap: 30px; grid-template-columns: minmax(220px, .75fr) 1.25fr; }
.allies-criteria ul { color: #d5d1e9; line-height: 1.65; margin: 0; padding-left: 20px; }
.allies-criteria li + li { margin-top: 9px; }
.allies-email {
  background: var(--neon);
  border-radius: 5px;
  box-shadow: 0 0 18px rgba(57,255,20,.25);
  color: #071009;
  display: inline-block;
  font-weight: 950;
  letter-spacing: .08em;
  margin-top: 12px;
  padding: 14px 18px;
}
.allies-email:hover, .allies-email:focus-visible { background: #fff; color: #17102f; }

@media (max-width: 820px) {
  .ally-banner-card, .allies-criteria { grid-template-columns: 1fr; }
  .allies-hero-mark { min-height: 190px; }
}

@media (max-width: 540px) {
  .allies-page { padding-left: 13px; padding-right: 13px; }
  .ally-banner-card { padding: 13px; }
  .ally-banner-preview { justify-content: flex-start; }
}
.footer-support a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.footer-support a:hover { color: var(--neon); }
.empty { text-align: center; color: var(--muted); margin: 48px 0; }
.cabinet-locked { opacity: 0.5; filter: saturate(0.5); }
.cabinet-locked:hover { opacity: 0.8; }
.cabinet-access-locked { --lock-color: #ffc64d; opacity: 1; filter: none; cursor: pointer; }
.cabinet-access-locked.cabinet-member { --lock-color: #58ddff; }
/* Dims the body's children rather than the body itself: opacity and filter each
   create a stacking context, and one on .cabinet-body would trap the vote
   buttons' z-index beneath the card's full-size link overlay. The vote control
   is deliberately left undimmed — a locked game can still be rated. */
.cabinet-access-locked .cabinet-screen,
.cabinet-access-locked .cabinet-body > :not(.cabinet-votes) { opacity: .46; filter: saturate(.45) grayscale(.45); transition: opacity .15s ease; }
.cabinet-access-locked:hover,
.cabinet-access-locked:focus-visible { opacity: 1; filter: none; transform: none; box-shadow: 0 0 22px -4px var(--lock-color); }
.cabinet-access-locked:hover .cabinet-screen,
.cabinet-access-locked:hover .cabinet-body > :not(.cabinet-votes),
.cabinet-access-locked:focus-visible .cabinet-screen,
.cabinet-access-locked:focus-visible .cabinet-body > :not(.cabinet-votes) { opacity: .62; }
.cabinet-access-locked:focus-visible { outline: 3px solid var(--lock-color); outline-offset: 3px; }
.cabinet-lock {
  position: absolute; z-index: 4; top: 12px; right: 12px;
  display: grid; width: 44px; height: 44px; place-items: center;
  color: var(--lock-color); border: 2px solid currentColor; border-radius: 11px;
  background: rgba(3,2,12,.92); box-shadow: 0 0 16px color-mix(in srgb, var(--lock-color) 70%, transparent);
}
.cabinet-lock svg { width: 25px; height: 25px; fill: currentColor; filter: drop-shadow(0 0 4px currentColor); }
.cabinet-unlock-tooltip {
  position: absolute; z-index: 5; top: 64px; right: 10px; left: 10px;
  padding: 11px 13px; color: #f8f6ff; font-size: 12px; line-height: 1.45;
  border: 1px solid var(--lock-color); border-radius: 8px;
  background: rgba(7,4,19,.97); box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 13px color-mix(in srgb, var(--lock-color) 30%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(-5px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.cabinet-unlock-tooltip strong { display: block; margin-bottom: 3px; color: var(--lock-color); letter-spacing: 1px; text-transform: uppercase; }
.cabinet-access-locked:hover .cabinet-unlock-tooltip,
.cabinet-access-locked:focus-visible .cabinet-unlock-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
.not-found { text-align: center; }
.not-found h1 { font-size: 72px; color: var(--accent); margin: 48px 0 8px; text-shadow: 0 0 16px var(--accent); }

/* ---------------- Error cabinet ---------------- */
.error-body { min-height: 100vh; min-height: 100dvh; }
.error-page {
  position: relative; z-index: 1; display: grid; min-height: calc(100vh - 86px);
  min-height: calc(100dvh - 86px); padding: clamp(28px, 6vw, 72px) 20px 64px; place-items: center;
}
.error-cabinet {
  width: min(760px, 100%); overflow: hidden; border: 2px solid #ff2b6b; border-radius: 22px 22px 34px 34px;
  background: linear-gradient(145deg, #25103c, #0b061d 48%, #210a31);
  box-shadow: 0 12px 0 #030108, 0 28px 65px rgba(0,0,0,.55), 0 0 38px rgba(255,43,107,.2);
}
.error-marquee {
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 25px); padding: 17px 20px 14px;
  color: #fff; border-bottom: 2px solid #ff2b6b; background: linear-gradient(90deg, #280a37, #551136 50%, #280a37);
  font-size: clamp(15px, 3vw, 25px); font-weight: 900; letter-spacing: clamp(3px, 1vw, 9px); text-shadow: 0 0 8px #ff2b6b, 0 0 18px #ff2b6b;
}
.error-marquee i { color: #ffcf3f; font-style: normal; text-shadow: 0 0 10px #ffcf3f; }
.error-screen {
  position: relative; isolation: isolate; overflow: hidden; margin: clamp(16px, 4vw, 32px); padding: clamp(30px, 6vw, 58px) clamp(18px, 6vw, 58px) 30px;
  border: 3px solid #32385d; border-radius: 28px; background: radial-gradient(circle at 50% 34%, rgba(69,28,104,.45), transparent 42%), #020208;
  box-shadow: inset 0 0 60px #000, 0 0 0 7px #080514, 0 0 25px rgba(88,221,255,.16); text-align: center;
}
.error-scanlines { position: absolute; z-index: -1; inset: 0; opacity: .24; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(88,221,255,.16) 4px); pointer-events: none; }
.error-eyebrow { margin: 0 0 10px; color: #ffcf3f; font-size: 10px; font-weight: 900; letter-spacing: 3px; text-shadow: 0 0 8px rgba(255,207,63,.7); }
.error-code {
  position: relative; width: max-content; margin: 0 auto; color: #ff2b6b; font-size: clamp(88px, 23vw, 170px); font-weight: 900; line-height: .8;
  letter-spacing: -10px; text-shadow: 4px 0 #58ddff, -4px 0 #ffcf3f, 0 0 26px rgba(255,43,107,.75); animation: error-flicker 4s steps(1) infinite;
}
.error-code span { position: absolute; inset: 0; color: transparent; text-shadow: 8px 2px rgba(88,221,255,.18); clip-path: inset(42% 0 39%); transform: translateX(-5px); }
.error-screen h1 { max-width: 620px; margin: 25px auto 10px; color: #fff; font-size: clamp(23px, 5vw, 40px); line-height: 1.05; letter-spacing: -1.5px; text-wrap: balance; }
.error-message { max-width: 600px; margin: 0 auto; color: #b8b8d2; font-size: clamp(12px, 2vw, 15px); line-height: 1.7; text-wrap: balance; }
.error-path { max-width: 100%; margin: 20px auto 0; color: #777795; font-size: 10px; letter-spacing: 1px; }
.error-path span { color: #58ddff; font-weight: 900; }
.error-path code { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: bottom; text-overflow: ellipsis; white-space: nowrap; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 27px; }
.error-button {
  padding: 11px 14px 9px; color: #dcdcf0; border: 1px solid #3d4265; border-bottom-width: 3px; border-radius: 6px; background: #111127;
  font-size: 10px; font-weight: 900; letter-spacing: 1px; transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.error-button:hover, .error-button:focus-visible { color: #fff; border-color: #58ddff; box-shadow: 0 0 15px rgba(88,221,255,.3); transform: translateY(-2px); }
.error-button:focus-visible { outline: 2px solid #58ddff; outline-offset: 3px; }
.error-button-primary { color: #061000; border-color: #8aff75; background: var(--neon); box-shadow: 0 0 13px rgba(57,255,20,.32); }
.error-button-primary:hover, .error-button-primary:focus-visible { color: #061000; border-color: #c0ffb5; box-shadow: 0 0 20px rgba(57,255,20,.5); }
.error-continue { margin: 25px 0 0; color: #ff5b92; font-size: 9px; font-weight: 900; letter-spacing: 2px; animation: error-blink 1.25s steps(1) infinite; }
.error-controls { display: flex; min-height: 96px; align-items: center; justify-content: space-between; padding: 9px clamp(42px, 11vw, 105px) 18px; border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(#180925, #0b0412); }
.error-stick { position: relative; display: block; width: 13px; height: 45px; margin-left: 25px; border-radius: 8px; background: #55556e; box-shadow: 0 5px 0 #111; transform: rotate(-7deg); }
.error-stick::before { position: absolute; width: 50px; height: 13px; left: -19px; bottom: -7px; content: ""; border-radius: 50%; background: #11111d; box-shadow: 0 3px 0 #030307; }
.error-stick i { position: absolute; width: 31px; height: 31px; left: -9px; top: -14px; border-radius: 50%; background: #ff2b6b; box-shadow: inset -5px -5px 0 rgba(80,0,25,.5), 0 0 12px rgba(255,43,107,.35); }
.error-button-cluster { display: flex; gap: 13px; transform: rotate(-8deg); }
.error-button-cluster i { width: 28px; height: 28px; border: 3px solid #080811; border-radius: 50%; background: #ffcf3f; box-shadow: inset -4px -4px 0 #bd7d00, 0 4px 0 #030307; }
.error-button-cluster i:nth-child(2) { background: #58ddff; box-shadow: inset -4px -4px 0 #18738a, 0 4px 0 #030307; }
.error-button-cluster i:nth-child(3) { background: var(--neon); box-shadow: inset -4px -4px 0 #178500, 0 4px 0 #030307; }
@keyframes error-blink { 50% { opacity: .32; } }
@keyframes error-flicker { 0%, 91%, 95%, 100% { transform: translateX(0); } 92% { transform: translateX(-3px); } 94% { transform: translateX(3px); } }
@media (max-width: 540px) {
  .error-page { padding: 20px 10px 46px; }
  .error-cabinet { border-radius: 15px 15px 25px 25px; }
  .error-screen { margin: 12px; border-radius: 20px; }
  .error-code { letter-spacing: -7px; }
  .error-actions { align-items: stretch; flex-direction: column; }
  .error-controls { min-height: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .error-code, .error-continue { animation: none; }
}

/* ---------------- Player ---------------- */
.play-body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.play-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px; border-bottom: 1px solid #22284a;
}
.back-link { flex: 1 1 0; min-width: 0; color: var(--neon); font-weight: 700; letter-spacing: 1px; }
.back-link:hover { text-shadow: 0 0 8px var(--neon); }
.play-name { font-weight: 800; letter-spacing: 2px; color: var(--accent); text-shadow: 0 0 10px currentColor; }
.play-hint { color: var(--muted); font-size: 12px; }
.touch-hint { display: none; color: var(--neon); font-size: 11px; text-align: right; }
.play-help { display: flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: flex-end; gap: 12px; }
.play-help .play-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-help > a {
  flex: 0 0 auto; padding: 3px 7px; color: var(--neon); font-size: 11px; font-weight: 800;
  border: 1px solid rgba(57,255,20,0.45); border-radius: 5px;
}
.play-help > a:hover, .play-help > a:focus-visible { border-color: var(--neon); box-shadow: 0 0 8px rgba(57,255,20,0.25); }
.play-maximise {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 3px 7px;
  color: var(--neon); border: 1px solid rgba(57,255,20,.45); border-radius: 5px;
  background: rgba(57,255,20,.06); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer;
}
.play-maximise:hover, .play-maximise:focus-visible {
  border-color: var(--neon); background: rgba(57,255,20,.12); box-shadow: 0 0 8px rgba(57,255,20,.25);
}
.play-maximise:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.play-maximise span[aria-hidden] { font-size: 15px; line-height: .7; }

.play-game-area { position: relative; flex: 1 1 auto; min-height: 0; }
.emu-stage {
  height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 8px 12px; width: 100%;
}
#game { width: min(96vw, 900px); height: 100%; min-height: 0; }
.emu-stage:fullscreen { width: 100%; height: 100%; padding: 0; background: #000; }
.emu-stage:fullscreen #game { width: 100%; height: 100%; }
.emu-stage:-webkit-full-screen { width: 100%; height: 100%; padding: 0; background: #000; }
.emu-stage:-webkit-full-screen #game { width: 100%; height: 100%; }

/* The play placement lives in the otherwise empty left rail. Keeping it out of
   normal flow means advertising never takes height away from the emulator. */
.play-game-area > .affiliate-slot-play-below {
  position: absolute; z-index: 2; top: 50%; left: max(18px, calc(50% - 714px));
  display: none; width: 240px; max-height: calc(100% - 32px); margin: 0; padding: 14px;
  gap: 10px; overflow-y: auto; transform: translateY(-50%); border-radius: 13px;
}
.play-game-area > .affiliate-slot-play-below .affiliate-slot-head { align-items: center; gap: 7px; }
.play-game-area > .affiliate-slot-play-below .affiliate-kicker { padding: 2px 7px; font-size: 8px; letter-spacing: 1.5px; }
.play-game-area > .affiliate-slot-play-below .affiliate-slot-head h2 { font-size: 14px; }
.play-game-area > .affiliate-slot-play-below .affiliate-card {
  grid-template-columns: 1fr; grid-template-rows: auto auto auto;
  grid-template-areas: "art" "copy" "cta"; gap: 9px; padding: 10px;
}
.play-game-area > .affiliate-slot-play-below .affiliate-card-art { justify-self: center; }
.play-game-area > .affiliate-slot-play-below .affiliate-card-art img { width: 104px; height: 104px; }
.play-game-area > .affiliate-slot-play-below .affiliate-card-copy { text-align: center; }
.play-game-area > .affiliate-slot-play-below .affiliate-card-copy strong { font-size: 12px; white-space: normal; }
.play-game-area > .affiliate-slot-play-below .affiliate-card-copy small { font-size: 10px; -webkit-line-clamp: 2; line-clamp: 2; }
.play-game-area > .affiliate-slot-play-below .affiliate-card-cta {
  justify-self: stretch; padding: 8px 10px; font-size: 10px;
}
.play-game-area > .affiliate-slot-play-below .affiliate-disclosure { font-size: 8px; line-height: 1.35; text-align: center; }
.play-game-card {
  position: absolute; z-index: 2; top: 50%; right: max(18px, calc(50% - 714px));
  display: none; width: 240px; max-height: calc(100% - 32px);
  transform: translateY(-50%); box-shadow: 0 10px 30px rgba(0,0,0,.58), 0 0 20px -6px var(--accent);
}
.play-game-card:hover { transform: translateY(-50%); box-shadow: 0 10px 30px rgba(0,0,0,.58), 0 0 20px -6px var(--accent); }
.play-game-card .cabinet-screen { min-height: 78px; padding: 12px; gap: 10px; }
.play-game-card .cabinet-title { font-size: 17px; overflow-wrap: anywhere; }
.play-game-card .cabinet-body { min-height: 0; padding: 12px 13px 14px; gap: 10px; }
.play-game-card .cabinet-desc {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
  font-size: 11px; line-height: 1.45;
}
.play-game-card .cabinet-info dt { font-size: 8px; }
.play-game-card .cabinet-info dd { font-size: 11px; overflow-wrap: anywhere; }
.play-game-card .cabinet-play { font-size: 10px; letter-spacing: 1.5px; }
.play-game-card .badge { font-size: 9px; }

@media (min-width: 1440px) and (min-height: 680px) {
  .play-game-card, .play-game-area > .affiliate-slot-play-below { display: flex; }
}

.touch-player { overscroll-behavior: none; }
/* The keyboard walkthrough is meaningless without a keyboard, so it goes. The
   legend stays: it is the only place that says what a coin, a start and each
   button are, which a touch player needs as much as anyone — and since the keys
   became per-game it is the only place they are written down at all. */
.touch-player .play-hint { display: none; }
.touch-player .touch-hint { display: inline; }
.touch-player .emu-stage { padding: 3px; }
.touch-player #game { width: 100%; touch-action: none; }
.touch-player #game .ejs_virtualGamepad_button {
  color: #fff; background: rgba(5, 1, 15, 0.72);
  border: 2px solid var(--accent); box-shadow: 0 0 10px rgba(0,0,0,0.65);
}
.touch-player #game .ejs_virtualGamepad_button_down {
  color: #001; background: var(--accent);
}
.touch-player #game .ejs_dpad_main {
  filter: drop-shadow(0 0 7px var(--accent));
  opacity: 0.88;
}

.controls-legend {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex: 0 0 auto; padding: 6px 16px 10px; text-align: center; color: var(--ink);
}
/* Deliberately outside .controls-legend: this warning has to survive whatever
   happens to the legend's layout, because it is precisely what a phone player
   needs to see. */
.controls-warning {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 0 0 auto; max-width: 720px; margin: 6px auto 0; padding: 8px 16px;
  text-align: center; font-size: 12px; color: #ffd23f;
  border: 1px solid rgba(255, 210, 63, 0.45); border-radius: 8px;
  background: rgba(120, 90, 20, 0.16);
}
.controls-warning b { font-size: 13px; letter-spacing: 0.5px; }
.controls-warning span { color: var(--muted); }
.controls-legend .step { font-size: 15px; letter-spacing: 0.5px; }
.controls-legend .step b { color: var(--neon); }
.controls-legend .row { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; }
.controls-legend .ctrl { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.controls-legend .note { color: var(--muted); font-size: 12px; margin-top: 2px; }
.controls-legend .note b { color: var(--ink); }
.controls-legend .controls-title { font-size: 12px; letter-spacing: 4px; color: var(--neon); font-weight: 700; }
.controls-grid { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }
.controls-legend .keys { display: inline-flex; gap: 3px; }
kbd {
  display: inline-block; min-width: 1.1em; padding: 2px 7px; text-align: center;
  font-family: inherit; font-size: 12px; font-weight: 700; color: #fff;
  background: #1a1f3a; border: 1px solid #3a4270;
  border-bottom-width: 3px; border-radius: 5px; line-height: 1.2;
}

@media (max-height: 600px), (max-width: 640px) {
  .arcade { padding: 22px 14px 44px; }
  .arcade-hero { margin-bottom: 22px; padding: 17px 16px; }
  .hero-logo { width: min(370px, 88%); margin-bottom: 8px; }
  .hero-kicker { font-size: 10px; letter-spacing: 2.5px; }
  .arcade-hero h1 { letter-spacing: -0.5px; }
  .fundraiser-link { margin-top: 12px; }
  .play-bar { padding: 5px 10px; }
  .play-hint { display: none; }
  .play-maximise-label { display: none; }
  .emu-stage { padding: 4px 8px; }
  .controls-legend { gap: 4px; padding: 4px 8px 6px; }
  .controls-grid { gap: 5px 12px; }
  .controls-legend .ctrl, .controls-legend .note { font-size: 11px; }
  kbd { padding: 1px 5px; font-size: 11px; border-bottom-width: 2px; }
  .wow-promo { padding: 17px 10px 15px; }
  .wow-promo-copy { padding: 0 5px; font-size: 11px; }
}

@media (max-width: 640px) {
  .wow-promo-link { max-width: 320px; }
  .paypal-widget { bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px)); }
}

.rom-missing {
  max-width: 560px; margin: 8vh auto; padding: 28px; text-align: center;
  border: 2px solid #cc4; border-radius: 10px; background: rgba(120,120,40,0.12);
}
.rom-missing h2 { color: #ffd23f; margin-top: 0; }
.rom-missing code { color: var(--neon); word-break: break-all; }

/* ---------------- Player FAQ ---------------- */
.explore-page-hero-image {
  position: relative; z-index: 2; overflow: hidden; min-width: 0; aspect-ratio: 16 / 10;
  border: 1px solid #3a4270; border-radius: 11px; background: #030108;
  box-shadow: 0 16px 34px rgba(0,0,0,.42), 0 0 22px rgba(88,221,255,.1);
}
.explore-page-hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.faq-page { max-width: 1180px; padding: 30px 24px 64px; }
.faq-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-bottom: 22px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 2px;
}
.faq-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(22px, 4vw, 38px);
  align-items: center; padding: clamp(28px, 5vw, 48px); border: 2px solid #2a2f52; border-radius: 14px 14px 0 0;
  background:
    linear-gradient(rgba(57,255,20,0.035) 1px, transparent 1px) 0 0 / 100% 5px,
    radial-gradient(circle at 50% 0%, rgba(255,43,107,0.22), transparent 58%),
    linear-gradient(135deg, rgba(13,7,36,0.98), rgba(5,1,15,0.98));
}
.faq-hero::after {
  content: "?"; position: absolute; right: 4%; top: -54px; color: rgba(57,255,20,0.045);
  font: 800 220px/1 Arial, sans-serif; transform: rotate(8deg); pointer-events: none;
}
.faq-eyebrow { color: var(--neon); font-size: 11px; font-weight: 800; letter-spacing: 4px; }
.faq-hero-copy { position: relative; z-index: 2; min-width: 0; }
.faq-hero h1 {
  position: relative; margin: 10px 0 8px; color: #fff; font-size: clamp(34px, 7vw, 60px);
  line-height: 1; letter-spacing: -2px; text-shadow: 0 0 20px rgba(255,43,107,0.45);
}
.faq-hero p { position: relative; max-width: 650px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.faq-hero-image { box-shadow: 0 16px 34px rgba(0,0,0,.42), 0 0 24px rgba(88,221,255,.18); }
.faq-quick-start {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border: 2px solid #2a2f52;
  border-radius: 14px; background: rgba(0,0,0,0.28);
}
.faq-quick-start > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 18px; }
.faq-quick-start > div + div { border-left: 1px solid #2a2f52; }
.faq-step-number { grid-row: 1 / 3; color: #ff2b6b; font-size: 23px; font-weight: 800; text-shadow: 0 0 9px rgba(255,43,107,0.45); }
.faq-quick-start strong { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.faq-quick-start div > span:last-child { color: var(--muted); font-size: 11px; line-height: 1.45; }
.faq-sections { display: flex; flex-direction: column; gap: var(--block-gap); margin-top: var(--block-gap); }
.faq-section-heading { display: flex; align-items: center; gap: 14px; margin: 0 0 13px; }
.faq-section-heading > span {
  display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center;
  color: #001; background: var(--neon); border-radius: 8px; font-size: 18px; font-weight: 800;
  box-shadow: 0 0 15px rgba(57,255,20,0.3);
}
.faq-section-heading p { margin: 0 0 3px; color: #ff5b92; font-size: 9px; font-weight: 800; letter-spacing: 3px; }
.faq-section-heading h2 { margin: 0; color: #fff; font-size: clamp(18px, 4vw, 24px); letter-spacing: -.5px; }
.faq-item { border: 1px solid #2a2f52; background: rgba(13,7,36,0.62); }
.faq-item + .faq-item { border-top: 0; }
.faq-item:first-of-type { border-radius: 9px 9px 0 0; }
.faq-item:last-child { border-radius: 0 0 9px 9px; }
.faq-item:only-of-type { border-radius: 9px; }
.faq-item[open] { border-color: rgba(255,43,107,0.6); background: rgba(255,43,107,0.055); }
.faq-item summary {
  display: flex; align-items: center; gap: 13px; min-height: 58px; padding: 13px 46px 13px 15px;
  position: relative; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 800; line-height: 1.4;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > span { color: #ff5b92; font-size: 11px; letter-spacing: 1px; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; color: var(--neon);
  font-size: 22px; font-weight: 400; transform: translateY(-50%);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: #fff; }
.faq-item summary:focus-visible { outline: 2px solid var(--neon); outline-offset: -3px; }
.faq-answer { margin: 0 16px 0 49px; padding: 0 30px 16px 0; border-top: 1px dotted #343a62; }
.faq-answer p { margin: 13px 0 0; color: #b3b3d4; font-size: 12px; line-height: 1.7; }
.faq-answer b { color: var(--ink); }
.faq-contact {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  margin-top: var(--block-gap); padding: 21px; border: 1px solid rgba(57,255,20,0.45); border-radius: 10px;
  background: linear-gradient(135deg, rgba(57,255,20,0.07), rgba(0,0,0,0.28));
}
.faq-contact-icon {
  display: grid; width: 42px; height: 42px; place-items: center; color: #001;
  background: var(--neon); border-radius: 50%; font-size: 24px; font-weight: 800;
}
.faq-contact h2 { margin: 0 0 4px; color: #fff; font-size: 17px; }
.faq-contact p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.faq-contact a {
  padding: 9px 12px; color: #001; background: var(--neon); border-radius: 6px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; white-space: nowrap;
}
.faq-contact a:hover, .faq-contact a:focus-visible { box-shadow: 0 0 14px rgba(57,255,20,0.45); }

@media (max-width: 640px) {
  .faq-nav { margin-bottom: 16px; }
  .faq-hero { grid-template-columns: 1fr; gap: 22px; padding: 27px 20px 22px; text-align: center; }
  .faq-hero p { margin-inline: auto; }
  .faq-hero-image { width: 100%; max-height: 190px; }
  .faq-quick-start { grid-template-columns: 1fr; }
  .faq-quick-start > div + div { border-top: 1px solid #2a2f52; border-left: 0; }
  .faq-quick-start > div { padding: 14px 16px; }
  .faq-sections { gap: 32px; margin-top: 38px; }
  .faq-answer { margin-left: 42px; padding-right: 8px; }
  .faq-contact { grid-template-columns: auto 1fr; }
  .faq-contact a { grid-column: 1 / -1; text-align: center; }
}

/* ---------------- Legal pages ---------------- */
.legal-page { max-width: 920px; }
.legal-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-bottom: 22px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 2px;
}
.legal-nav .back-link, .faq-nav .back-link { transition: color .15s ease, text-shadow .15s ease; }
.legal-nav .back-link:hover, .legal-nav .back-link:focus-visible,
.faq-nav .back-link:hover, .faq-nav .back-link:focus-visible {
  color: var(--neon); text-shadow: 0 0 8px rgba(57,255,20,0.55);
}
.legal-nav .back-link:focus-visible, .faq-nav .back-link:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; }
.legal-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(22px, 4vw, 38px); align-items: center; padding: clamp(28px, 5vw, 46px);
  border: 2px solid #2a2f52; border-radius: 14px 14px 0 0;
  background:
    linear-gradient(rgba(57,255,20,0.035) 1px, transparent 1px) 0 0 / 100% 5px,
    radial-gradient(circle at 50% 0%, rgba(255,43,107,0.22), transparent 58%),
    linear-gradient(135deg, rgba(13,7,36,0.98), rgba(5,1,15,0.98));
}
.legal-hero::after {
  content: "!"; position: absolute; z-index: -1; right: 5%; top: -54px; color: rgba(57,255,20,0.045);
  font: 800 220px/1 Arial, sans-serif; transform: rotate(8deg); pointer-events: none;
}
.legal-eyebrow { color: var(--neon); font-size: 11px; font-weight: 800; letter-spacing: 4px; }
.legal-hero-copy { position: relative; z-index: 2; min-width: 0; }
.legal-hero h1 {
  margin: 10px 0 8px; color: #fff; font-size: clamp(34px, 7vw, 60px); line-height: 1;
  letter-spacing: -2px; text-shadow: 0 0 20px rgba(255,43,107,0.45);
}
.legal-hero p { max-width: 680px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.legal-hero-image { box-shadow: 0 16px 34px rgba(0,0,0,.42), 0 0 24px rgba(88,221,255,.16); }
.legal-hero-image-disclaimer { box-shadow: 0 16px 34px rgba(0,0,0,.42), 0 0 24px rgba(255,176,32,.16); }
.legal-content {
  padding: clamp(22px, 5vw, 42px); border: 2px solid #2a2f52;
  border-radius: 14px; background: rgba(0,0,0,0.28);
}
.legal-updated { margin: 0 0 28px; color: #ff5b92; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.legal-section { display: grid; grid-template-columns: 42px 1fr; gap: 16px; }
.legal-section + .legal-section { margin-top: 28px; padding-top: 28px; border-top: 1px dotted #343a62; }
.legal-section-number {
  display: grid; width: 42px; height: 42px; place-items: center; color: #001;
  background: var(--neon); border-radius: 8px; font-size: 12px; font-weight: 800;
  box-shadow: 0 0 15px rgba(57,255,20,0.3);
}
.legal-section h2 { margin: 1px 0 9px; color: #fff; font-size: clamp(17px, 4vw, 22px); letter-spacing: -.4px; }
.legal-section p { margin: 0; color: #b3b3d4; font-size: 12px; line-height: 1.75; }
.legal-section p + p { margin-top: 10px; }
.legal-section ul { margin: 10px 0 0; padding-left: 20px; color: #b3b3d4; font-size: 12px; line-height: 1.75; }
.legal-section li + li { margin-top: 5px; }
.legal-section a { color: #58ddff; text-decoration: underline; text-underline-offset: 3px; }
.legal-section a:hover, .legal-section a:focus-visible { color: var(--neon); }

@media (max-width: 640px) {
  .legal-nav { margin-bottom: 16px; }
  .legal-hero { grid-template-columns: 1fr; gap: 22px; padding: 27px 20px 22px; text-align: center; }
  .legal-hero p { margin-inline: auto; }
  .legal-hero-image { width: 100%; max-height: 195px; }
  .legal-content { padding: 22px 16px; }
  .legal-section { grid-template-columns: 34px 1fr; gap: 12px; }
  .legal-section-number { width: 34px; height: 34px; }
}

/* ---------------- Arcade history ---------------- */
.history-page { max-width: 1180px; padding: 30px 24px 64px; }
.history-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-bottom: 22px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 2px;
}
.history-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(26px, 5vw, 52px); align-items: center; min-height: 470px; padding: clamp(36px, 7vw, 72px);
  border: 2px solid #2a2f52; border-radius: 14px; background:
    linear-gradient(rgba(57,255,20,.045) 1px, transparent 1px) 0 0 / 100% 6px,
    radial-gradient(circle at 72% 32%, rgba(200,107,255,.25), transparent 32%),
    linear-gradient(130deg, rgba(13,7,36,.98), rgba(5,1,15,.98));
  box-shadow: 0 0 34px rgba(255,43,107,.13), inset 0 0 70px rgba(0,0,0,.42);
}
.history-hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0; opacity: .2;
  background: repeating-linear-gradient(90deg, transparent 0 47px, rgba(88,221,255,.1) 48px 49px);
}
.history-hero-copy { position: relative; z-index: 2; min-width: 0; }
.history-eyebrow, .history-kicker { color: var(--neon); font-size: 10px; font-weight: 800; letter-spacing: 3px; }
.history-hero h1 {
  margin: 13px 0 18px; color: #fff; font-size: clamp(42px, 8vw, 76px); line-height: .96;
  letter-spacing: -4px; text-shadow: 0 0 18px rgba(255,43,107,.7), 4px 4px 0 rgba(88,221,255,.12);
}
.history-hero-copy p { margin: 0; color: #c3c3df; font-size: 14px; line-height: 1.75; }
.history-hero-image { box-shadow: 0 16px 34px rgba(0,0,0,.42), 0 0 25px rgba(200,107,255,.18); }
.history-scroll-cue {
  position: absolute; left: clamp(36px, 7vw, 72px); bottom: 24px; margin: 0; color: #ff5b92;
  font-size: 9px; font-weight: 800; letter-spacing: 3px;
}
.history-intro {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
  margin: var(--block-gap) 0 0; padding: 26px 30px; border: 1px solid rgba(255,43,107,.5); border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,43,107,.09), rgba(0,0,0,.25));
}
.history-coin {
  display: grid; width: 66px; height: 66px; place-items: center; color: #211600; border: 4px double #775c00;
  border-radius: 50%; background: #ffcf3f; box-shadow: 0 0 18px rgba(255,207,63,.35); font-size: 16px; font-weight: 900;
}
.history-intro h2 { margin: 0 0 8px; color: #fff; font-size: 22px; }
.history-intro p { margin: 0; color: #b3b3d4; font-size: 12px; line-height: 1.75; }
.history-timeline { position: relative; display: flex; flex-direction: column; gap: var(--block-gap); margin-top: var(--block-gap); }
.history-timeline::before {
  content: ""; position: absolute; left: 50%; top: 12px; bottom: 15px; width: 2px;
  background: linear-gradient(var(--neon), #ff2b6b 42%, #c86bff 78%, transparent); box-shadow: 0 0 8px rgba(57,255,20,.35);
}
.history-chapter { position: relative; width: calc(50% - 28px); }
.history-chapter-right { align-self: flex-end; }
.history-date { position: absolute; left: calc(100% + 28px); top: 0; width: 145px; padding-left: 21px; }
.history-chapter-right .history-date { right: calc(100% + 28px); left: auto; padding: 0 21px 0 0; text-align: right; }
.history-date::before {
  content: ""; position: absolute; left: -6px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 12px var(--neon);
}
.history-chapter-right .history-date::before { right: -6px; left: auto; }
.history-date span { display: block; color: #fff; font-size: 15px; font-weight: 900; white-space: nowrap; }
.history-date b { color: #ff5b92; font-size: 8px; letter-spacing: 2px; white-space: nowrap; }
.history-card {
  overflow: hidden; border: 1px solid #2a2f52; border-radius: 10px; background: rgba(13,7,36,.72);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.history-card-copy { padding: 25px; }
.history-card h2 { margin: 7px 0 13px; color: #fff; font-size: clamp(20px, 3vw, 28px); line-height: 1.15; letter-spacing: -.7px; }
.history-card p { margin: 0; color: #b3b3d4; font-size: 12px; line-height: 1.75; }
.history-card p + p { margin-top: 12px; }
.history-card figure { margin: 0; padding: 14px 14px 0; background: #030108; }
.history-card figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.history-card figcaption, .history-gallery figcaption {
  padding: 9px 4px 11px; color: #ff5b92; font-size: 8px; font-weight: 800; letter-spacing: 1.5px; text-align: center;
}
.history-memory-note { display: flex; flex-direction: column; gap: 5px; padding: 16px 25px; border-top: 1px dotted #343a62; background: rgba(57,255,20,.045); }
.history-memory-note strong { color: var(--neon); font-size: 9px; letter-spacing: 2px; }
.history-memory-note span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.history-gallery {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  width: 100%; padding: 20px; border: 1px solid #343a62; border-radius: 12px; background: rgba(5,1,15,.96);
  box-shadow: 0 0 30px rgba(200,107,255,.12);
}
.history-gallery-heading { grid-column: 1 / -1; margin-bottom: 4px; text-align: center; }
.history-gallery-heading span { color: #c86bff; font-size: 9px; font-weight: 800; letter-spacing: 3px; }
.history-gallery-heading h2 { margin: 4px 0 8px; color: #fff; font-size: 22px; }
.history-gallery figure { margin: 0; overflow: hidden; border: 1px solid #2a2f52; border-radius: 7px; background: #000; }
.history-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.history-legacy {
  display: grid; grid-template-columns: auto 1fr; gap: 24px; margin-top: var(--block-gap); padding: clamp(26px, 5vw, 44px);
  border: 2px solid rgba(57,255,20,.45); border-radius: 14px; background:
    linear-gradient(rgba(57,255,20,.035) 1px, transparent 1px) 0 0 / 100% 5px,
    linear-gradient(135deg, rgba(57,255,20,.08), rgba(0,0,0,.35));
}
.history-legacy-icon {
  display: grid; width: 58px; height: 58px; place-items: center; color: #001; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 18px rgba(57,255,20,.4); font-size: 25px;
}
.history-legacy h2 { margin: 7px 0 10px; color: #fff; font-size: clamp(24px, 5vw, 36px); }
.history-legacy p { margin: 0; color: #b3b3d4; font-size: 12px; line-height: 1.75; }
.history-legacy a { display: inline-block; margin-top: 18px; color: var(--neon); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }
.history-legacy a:hover, .history-legacy a:focus-visible { text-shadow: 0 0 8px var(--neon); }
.history-sources { margin: var(--block-gap) auto 0; max-width: 760px; text-align: center; }
.history-sources h2 { margin: 0 0 6px; color: var(--muted); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.history-sources p { margin: 0; color: #696994; font-size: 10px; line-height: 1.7; }
.history-sources a { color: #8f8fc0; text-decoration: underline; text-underline-offset: 2px; }
.history-sources a:hover, .history-sources a:focus-visible { color: #58ddff; }

@media (min-width: 761px) {
  .history-card-with-image figure { max-height: 255px; }
  .history-card-with-image figure img { height: 210px; }
}

@media (max-width: 760px) {
  .history-nav { margin-bottom: 16px; }
  .history-hero { grid-template-columns: 1fr; gap: 26px; min-height: 0; padding: 34px 24px 62px; }
  .history-hero h1 { letter-spacing: -2px; }
  .history-hero-image { width: 100%; max-height: 240px; }
  .history-scroll-cue { left: 24px; bottom: 20px; }
  .history-intro { grid-template-columns: 1fr; padding: 22px; }
  .history-coin { width: 54px; height: 54px; }
  .history-timeline { gap: 42px; padding-left: 23px; }
  .history-timeline::before { left: 6px; }
  .history-chapter, .history-chapter-right { width: 100%; align-self: auto; }
  .history-date, .history-chapter-right .history-date {
    position: relative; right: auto; left: auto; top: auto; width: auto; margin-bottom: 10px; padding: 0; text-align: left;
  }
  .history-date::before, .history-chapter-right .history-date::before { right: auto; left: -22px; top: 4px; }
  .history-gallery { grid-template-columns: repeat(2, 1fr); padding: 14px; }
  .history-legacy { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .history-gallery { grid-template-columns: 1fr; }
}

/* ---------------- Technology & architecture ---------------- */
.technology-page { max-width: 1180px; padding: 30px 24px 64px; }
.technology-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-bottom: 22px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 2px;
}
.technology-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr;
  align-items: center; min-height: 480px; padding: clamp(34px, 7vw, 74px); border: 2px solid #2a2f52;
  border-radius: 14px; background:
    linear-gradient(rgba(57,255,20,.035) 1px, transparent 1px) 0 0 / 100% 6px,
    radial-gradient(circle at 82% 30%, rgba(44,214,255,.21), transparent 33%),
    radial-gradient(circle at 20% 0%, rgba(255,43,107,.17), transparent 42%),
    linear-gradient(135deg, rgba(13,7,36,.98), rgba(5,1,15,.98));
  box-shadow: 0 0 34px rgba(44,214,255,.1), inset 0 0 70px rgba(0,0,0,.38);
}
.technology-hero::after {
  content: "01011010 00110001 11001010 01010101"; position: absolute; z-index: -1; left: 3%; bottom: 12px;
  color: rgba(57,255,20,.08); font-size: 10px; letter-spacing: 5px; white-space: nowrap;
}
.technology-hero-copy { position: relative; z-index: 2; max-width: 610px; }
.technology-eyebrow, .technology-kicker { color: var(--neon); font-size: 11px; font-weight: 800; letter-spacing: 2.6px; }
.technology-hero h1 {
  margin: 13px 0 18px; color: #fff; font-size: clamp(44px, 8vw, 78px); line-height: .94;
  letter-spacing: -4px; text-shadow: 0 0 18px rgba(44,214,255,.5), 4px 4px 0 rgba(255,43,107,.12);
}
.technology-hero-copy > p { max-width: 590px; margin: 0; color: #c3c3df; font-size: 14px; line-height: 1.75; }
.technology-status {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; padding: 7px 11px;
  color: #caffc0; border: 1px solid rgba(57,255,20,.4); border-radius: 5px; background: rgba(0,0,0,.35);
  font-size: 11px; font-weight: 800; letter-spacing: 1.7px;
}
.technology-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 9px var(--neon); animation: presence-pulse 1.8s infinite; }
.technology-hero-readouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 15px; }
.technology-hero-readouts span { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 9px 10px; border: 1px solid #30365d; border-left: 2px solid #58ddff; border-radius: 5px; background: rgba(4,1,13,.58); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.technology-hero-readouts span:nth-child(2) { border-left-color: var(--neon); }
.technology-hero-readouts span:nth-child(3) { border-left-color: #ffcf3f; }
.technology-hero-readouts small { color: #aaaac8; font-size: 8px; font-weight: 900; letter-spacing: .9px; }
.technology-hero-readouts b { overflow: hidden; color: #fff; font-size: 10px; letter-spacing: .3px; text-overflow: ellipsis; white-space: nowrap; }
.technology-hero-image { position: relative; overflow: visible; border-color: rgba(88,221,255,.6); box-shadow: 0 8px 0 #06020e, 0 22px 42px rgba(0,0,0,.48), 0 0 30px rgba(44,214,255,.2); transform: perspective(900px) rotateY(-3deg); }
.technology-hero-image::before { content: "CABINET SIGNAL MAP"; position: absolute; z-index: 3; left: 14px; top: 12px; padding: 6px 8px; color: #d9f8ff; border: 1px solid rgba(88,221,255,.45); border-radius: 3px; background: rgba(3,1,12,.82); font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.technology-hero-schematic { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 13px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; padding: 8px; border: 1px solid rgba(88,221,255,.42); border-radius: 6px; background: rgba(3,1,12,.88); box-shadow: 0 8px 20px rgba(0,0,0,.4), inset 0 0 18px rgba(44,214,255,.05); backdrop-filter: blur(5px); }
.technology-hero-schematic span { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 2px; }
.technology-hero-schematic i { color: #58ddff; font-size: 8px; font-style: normal; }
.technology-hero-schematic b { color: #fff; font-size: 9px; letter-spacing: .4px; }
.technology-hero-schematic em { color: var(--neon); font-size: 15px; font-style: normal; text-shadow: 0 0 7px var(--neon); }
.technology-signal-strip {
  display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch;
  margin-top: 18px; padding: 10px; border: 1px solid #30365d; border-radius: 11px;
  background: linear-gradient(180deg, rgba(18,13,43,.95), rgba(7,3,20,.95));
  box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035);
}
.technology-signal-label { display: flex; align-items: center; gap: 8px; padding: 0 15px 0 8px; color: #b4b4ce; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; white-space: nowrap; }
.technology-signal-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 9px var(--neon); }
.technology-signal-strip > a { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid transparent; border-radius: 7px; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.technology-signal-strip > a b { color: #58ddff; font-size: 10px; text-shadow: 0 0 8px rgba(88,221,255,.5); }
.technology-signal-strip > a span { overflow: hidden; color: #f0f0f8; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.technology-signal-strip > a:hover, .technology-signal-strip > a:focus-visible { border-color: rgba(88,221,255,.4); background: rgba(88,221,255,.07); box-shadow: 0 0 15px rgba(88,221,255,.1); transform: translateY(-1px); }
.technology-signal-strip > a:focus-visible { outline: 2px solid #58ddff; outline-offset: 2px; }
.technology-signal-strip > i { align-self: center; color: #5d5d88; font-size: 16px; font-style: normal; }
.technology-cabinet { position: relative; width: min(250px, 100%); margin-left: auto; filter: drop-shadow(0 18px 23px #000); transform: perspective(800px) rotateY(-6deg); }
.technology-cabinet-marquee {
  padding: 13px 7px; color: #fff; border: 3px solid #362855; border-radius: 12px 12px 4px 4px;
  background: #160823; font-size: 16px; font-weight: 900; letter-spacing: 1px; text-align: center;
  text-shadow: 0 0 7px #ff2b6b;
}
.technology-cabinet-marquee span { color: var(--neon); }
.technology-cabinet-screen { position: relative; padding: 18px 17px 20px; border: 3px solid #362855; border-top: 0; background: #06020d; }
.technology-cabinet-screen img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: contain; border: 5px solid #000; }
.technology-scanlines { position: absolute; inset: 18px 17px 20px; background: repeating-linear-gradient(transparent 0 3px, rgba(0,0,0,.25) 4px); pointer-events: none; }
.technology-cabinet-controls { display: flex; align-items: center; gap: 22px; padding: 14px 25px; border: 3px solid #362855; background: #28153c; transform: perspective(90px) rotateX(7deg); }
.technology-cabinet-controls i { width: 11px; height: 31px; margin-top: -17px; border-radius: 5px; background: #ff2b6b; box-shadow: 0 0 8px #ff2b6b; }
.technology-cabinet-controls b { width: 20px; height: 20px; border-radius: 50%; background: #ffcf3f; box-shadow: 0 0 7px rgba(255,207,63,.7); }
.technology-cabinet-controls b:last-child { background: #58ddff; box-shadow: 0 0 7px rgba(88,221,255,.7); }
.technology-cabinet-base { height: 92px; padding-top: 28px; border: 3px solid #362855; border-top: 0; border-radius: 0 0 9px 9px; background: linear-gradient(100deg, #12081e, #241035, #0b0512); text-align: center; }
.technology-cabinet-base span { padding: 3px 9px; color: #ffcf3f; border: 1px solid #735f21; font-size: 8px; letter-spacing: 2px; }
.technology-stack, .technology-architecture, .technology-play-flow, .technology-data, .technology-deployment { margin-top: 65px; }
.technology-section-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.technology-section-heading > div > p { margin: 0 0 5px; color: #ff79a8; font-size: 11px; font-weight: 800; letter-spacing: 2.4px; }
.technology-section-heading h2 { margin: 0; color: #fff; font-size: clamp(22px, 4vw, 31px); letter-spacing: -.8px; }
.technology-heading-icon {
  display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; color: #001;
  border-radius: 9px; background: var(--neon); box-shadow: 0 0 15px rgba(57,255,20,.3); font-size: 20px; font-weight: 900;
}
.technology-heading-pink { background: #ff5b92; box-shadow: 0 0 15px rgba(255,43,107,.3); }
.technology-heading-blue { background: #58ddff; box-shadow: 0 0 15px rgba(44,214,255,.3); }
.technology-heading-purple { background: #d99aff; box-shadow: 0 0 15px rgba(200,107,255,.3); }
.technology-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.technology-chips span {
  display: flex; flex: 1 1 150px; flex-direction: column; gap: 3px; padding: 14px 15px;
  border: 1px solid #2a2f52; border-radius: 8px; background: rgba(13,7,36,.65);
}
.technology-chips b { color: #fff; font-size: 14px; }
.technology-chips small { color: #b5b5cf; font-size: 11px; line-height: 1.45; }
.technology-chips span:nth-child(3n+1) { border-top-color: var(--neon); }
.technology-chips span:nth-child(3n+2) { border-top-color: #58ddff; }
.technology-chips span:nth-child(3n) { border-top-color: #ff5b92; }
.architecture-legend { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: -7px 0 12px; padding-left: 3px; }
.architecture-legend span { display: inline-flex; align-items: center; gap: 7px; color: #a4a4c5; font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.architecture-legend i { width: 18px; height: 3px; border-radius: 4px; background: #58ddff; box-shadow: 0 0 7px rgba(88,221,255,.45); }
.architecture-legend .legend-service { background: #d99aff; box-shadow: 0 0 7px rgba(217,154,255,.45); }
.architecture-legend .legend-runtime { background: #ffcf3f; box-shadow: 0 0 7px rgba(255,207,63,.45); }
.architecture-map {
  overflow: hidden; padding: 28px; border: 1px solid #343a62; border-radius: 13px;
  background:
    linear-gradient(rgba(88,221,255,.035) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(88,221,255,.025) 1px, transparent 1px) 0 0 / 22px 100%,
    rgba(4,1,13,.87); box-shadow: inset 0 0 36px rgba(0,0,0,.4);
}
.architecture-lane-label { display: block; margin: 0 0 14px; color: #58ddff; font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-align: center; }
.architecture-lane-label-services { margin: -33px 0 11px; color: #d99aff; }
.architecture-lane { display: flex; align-items: stretch; justify-content: center; gap: 12px; }
.architecture-node {
  position: relative;
  display: flex; min-width: 145px; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center;
  min-height: 112px; padding: 13px; border: 1px solid #3a4270; border-radius: 9px; background: rgba(13,7,36,.95); text-align: center;
  box-shadow: 0 4px 0 #080414, 0 13px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.architecture-node:hover { z-index: 2; transform: translateY(-3px); border-color: #58ddff; box-shadow: 0 7px 0 #080414, 0 18px 30px rgba(0,0,0,.38), 0 0 18px rgba(88,221,255,.11); }
.architecture-node-icon { display: block; margin-bottom: 7px; color: #58ddff; font-size: 24px; font-weight: 900; text-shadow: 0 0 8px rgba(88,221,255,.6); }
.architecture-node strong { color: #fff; font-size: 10px; letter-spacing: 1px; }
.architecture-node small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.architecture-node em { margin-top: 7px; padding: 3px 6px; color: var(--neon); border: 1px solid rgba(57,255,20,.25); border-radius: 3px; font-size: 7px; font-style: normal; }
.architecture-player { border-color: rgba(57,255,20,.5); }
.architecture-player .architecture-node-icon { color: var(--neon); }
.architecture-edge { border-color: rgba(255,154,61,.55); }
.architecture-edge .architecture-node-icon { color: #ff9a3d; }
.architecture-app { border-color: rgba(255,43,107,.6); }
.architecture-app .architecture-node-icon { color: #ff5b92; }
.architecture-arrow { display: flex; width: 48px; flex: 0 0 48px; flex-direction: column; align-items: center; justify-content: center; color: #58ddff; font-size: 18px; }
.architecture-arrow i { margin-bottom: 4px; color: #7272a5; font-size: 7px; font-style: normal; letter-spacing: 1px; }
.architecture-branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: calc(100% - 18px); margin: 0 auto; }
.architecture-branches span { height: 44px; border-right: 1px solid #3a4270; }
.architecture-lane-data { gap: 12px; }
.architecture-lane-data .architecture-node { min-height: 92px; }
.architecture-lane-data .architecture-node-icon { color: #d99aff; font-size: 18px; }
.architecture-cdn { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding-top: 22px; border-top: 1px dotted #343a62; }
.architecture-cdn .architecture-node { max-width: 220px; min-height: 78px; flex: 0 0 220px; border-color: rgba(255,207,63,.45); }
.architecture-cdn .architecture-node-icon { margin: 0 0 4px; color: #ffcf3f; font-size: 10px; }
.architecture-cdn > span { flex: 1; color: #ffcf3f; font-size: 8px; letter-spacing: 1px; text-align: center; }
.architecture-map-vertical { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(220px, .7fr); gap: 30px 34px; padding: 32px; }
.architecture-route { min-width: 0; }
.architecture-stage {
  --stage-accent: #58ddff; position: relative; display: grid; grid-template-columns: 34px 48px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; min-height: 116px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--stage-accent) 55%, #30365d);
  border-left: 3px solid var(--stage-accent); border-radius: 10px; background: linear-gradient(110deg, color-mix(in srgb, var(--stage-accent) 7%, #0d0724), rgba(5,2,16,.97));
  box-shadow: 0 6px 0 #05020e, 0 18px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
}
.architecture-stage.architecture-player { --stage-accent: var(--neon); }
.architecture-stage.architecture-edge { --stage-accent: #ff9a3d; }
.architecture-stage.architecture-proxy { --stage-accent: #58ddff; }
.architecture-stage.architecture-app { --stage-accent: #ff5b92; }
.architecture-stage-number { color: var(--stage-accent); font-size: 14px; font-weight: 900; text-shadow: 0 0 8px var(--stage-accent); }
.architecture-stage .architecture-node-icon { margin: 0; color: var(--stage-accent); font-size: 27px; text-shadow: 0 0 10px color-mix(in srgb, var(--stage-accent) 65%, transparent); }
.architecture-stage > div { min-width: 0; }
.architecture-stage strong { display: block; color: #fff; font-size: 16px; letter-spacing: .6px; }
.architecture-stage small { display: block; margin-top: 7px; color: #d0d0e3; font-size: 12px; line-height: 1.62; }
.architecture-stage ul { display: flex; max-width: 170px; flex-wrap: wrap; justify-content: flex-end; gap: 5px; margin: 0; padding: 0; list-style: none; }
.architecture-stage li { padding: 5px 7px; color: var(--stage-accent); border: 1px solid color-mix(in srgb, var(--stage-accent) 42%, transparent); border-radius: 3px; background: rgba(0,0,0,.34); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.architecture-connector { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; min-height: 68px; color: #58ddff; }
.architecture-connector::before, .architecture-connector::after { content: ""; height: 1px; background: linear-gradient(90deg, transparent, rgba(88,221,255,.35)); }
.architecture-connector::after { background: linear-gradient(90deg, rgba(88,221,255,.35), transparent); }
.architecture-connector i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 25px; font-style: normal; text-align: center; text-shadow: 0 0 10px #58ddff; }
.architecture-connector span, .architecture-connector small { position: absolute; left: 50%; padding: 0 8px; background: #070318; transform: translateX(-50%); white-space: nowrap; }
.architecture-connector span { margin-top: -30px; color: #ededf6; font-size: 11px; font-weight: 900; letter-spacing: .9px; }
.architecture-connector small { margin-top: 31px; color: #bdbdd5; font-size: 10px; }
.architecture-runtime-rail { position: relative; display: flex; min-height: 100%; flex-direction: column; align-items: center; padding: 45px 20px 24px; border: 1px dashed rgba(255,207,63,.3); border-radius: 11px; background: linear-gradient(180deg, rgba(255,207,63,.035), rgba(5,2,16,.7)); }
.architecture-runtime-rail > span { color: #ffcf3f; font-size: 10px; font-weight: 900; letter-spacing: 1.3px; text-align: center; }
.architecture-runtime-beam { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; color: #ffcf3f; }
.architecture-runtime-beam::before { content: ""; width: 1px; height: 100px; background: repeating-linear-gradient(to bottom, #ffcf3f 0 3px, transparent 3px 8px); box-shadow: 0 0 8px rgba(255,207,63,.35); }
.architecture-runtime-beam i { order: -1; font-size: 25px; font-style: normal; text-shadow: 0 0 9px #ffcf3f; }
.architecture-runtime-beam small { margin-top: 10px; color: #f0cb58; font-size: 11px; font-weight: 800; text-align: center; }
.architecture-runtime-node { width: 100%; min-width: 0; flex: none; border-color: rgba(255,207,63,.55); }
.architecture-runtime-node .architecture-node-icon { color: #ffcf3f; font-size: 16px; }
.architecture-runtime-node small { max-width: 190px; }
.architecture-service-bus { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 2px 6% -18px; }
.architecture-service-bus span { height: 18px; border-top: 1px solid rgba(217,154,255,.48); border-right: 1px solid rgba(217,154,255,.48); }
.architecture-service-bus span:last-child { border-right: 0; border-left: 1px solid rgba(217,154,255,.48); }
.architecture-service-bus b { color: #d99aff; font-size: 10px; letter-spacing: 1.2px; }
.architecture-service-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.architecture-service-grid .architecture-node { min-width: 0; min-height: 150px; }
.architecture-service-grid .architecture-node-icon { color: #d99aff; font-size: 20px; }
.architecture-service-grid .architecture-node small { max-width: 190px; }
.architecture-map-vertical .architecture-node strong { font-size: 14px; }
.architecture-map-vertical .architecture-node small { margin-top: 7px; color: #d0d0e2; font-size: 11px; line-height: 1.6; }
.architecture-map-vertical .architecture-node em { font-size: 10px; }
.technology-flow-intro { max-width: 760px; margin: -7px 0 17px 54px; color: #aaaac8; font-size: 11px; line-height: 1.65; }
.play-flow-diagram { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 14px 0; margin: 0; padding: 26px; list-style: none; border: 1px solid #2a2f52; border-radius: 12px; overflow: hidden; background: linear-gradient(145deg, rgba(15,8,40,.82), rgba(4,1,13,.88)); box-shadow: inset 0 0 35px rgba(0,0,0,.35); }
.play-flow-diagram::before { content: ""; position: absolute; left: 50%; top: 38px; bottom: 38px; width: 2px; background: linear-gradient(#ff5b92, #58ddff 28%, #ffcf3f 52%, #58ddff 76%, #ff5b92); box-shadow: 0 0 12px rgba(88,221,255,.35); transform: translateX(-50%); }
.play-flow-diagram li { --flow-accent: #ff5b92; position: relative; z-index: 1; display: flex; gap: 13px; min-height: 126px; padding: 20px; border: 1px solid #343a62; border-top: 2px solid var(--flow-accent); border-radius: 9px; background: linear-gradient(145deg, rgba(19,10,49,.98), rgba(9,4,25,.98)); box-shadow: 0 4px 0 #05020e, 0 13px 22px rgba(0,0,0,.3); }
.play-flow-diagram li:nth-child(2), .play-flow-diagram li:nth-child(5) { --flow-accent: #58ddff; }
.play-flow-diagram li:nth-child(3), .play-flow-diagram li:nth-child(4) { --flow-accent: #ffcf3f; }
.play-flow-diagram li:nth-child(odd) { grid-column: 1; }
.play-flow-diagram li:nth-child(even) { grid-column: 3; }
.play-flow-diagram li:nth-child(1) { grid-row: 1; }.play-flow-diagram li:nth-child(2) { grid-row: 2; }
.play-flow-diagram li:nth-child(3) { grid-row: 3; }.play-flow-diagram li:nth-child(4) { grid-row: 4; }
.play-flow-diagram li:nth-child(5) { grid-row: 5; }.play-flow-diagram li:nth-child(6) { grid-row: 6; }
.play-flow-diagram li::before { content: ""; position: absolute; top: 50%; width: 33px; height: 1px; background: var(--flow-accent); box-shadow: 0 0 7px var(--flow-accent); }
.play-flow-diagram li::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; border: 2px solid #070318; border-radius: 50%; background: var(--flow-accent); box-shadow: 0 0 10px var(--flow-accent); transform: translateY(-50%); }
.play-flow-diagram li:nth-child(odd)::before { right: -33px; }.play-flow-diagram li:nth-child(odd)::after { right: -39px; }
.play-flow-diagram li:nth-child(even)::before { left: -33px; }.play-flow-diagram li:nth-child(even)::after { left: -39px; }
.play-flow-diagram li > span { color: #ff5b92; font-size: 22px; font-weight: 900; text-shadow: 0 0 9px rgba(255,43,107,.4); }
.play-flow-diagram li > span { color: var(--flow-accent); text-shadow: 0 0 9px color-mix(in srgb, var(--flow-accent) 55%, transparent); }
.play-flow-diagram strong { display: block; margin: 3px 0 8px; color: #fff; font-size: 15px; text-transform: uppercase; }
.play-flow-diagram p { margin: 0; color: #d0d0e2; font-size: 12px; line-height: 1.72; }
.play-flow-diagram code { font-size: 11px; }
.technology-runtime {
  display: grid; grid-template-columns: 1fr 1.08fr; gap: 34px; align-items: center;
  margin-top: 65px; padding: clamp(25px, 5vw, 44px); border: 1px solid rgba(88,221,255,.42);
  border-radius: 13px; background: linear-gradient(135deg, rgba(44,214,255,.07), rgba(0,0,0,.3));
}
.technology-runtime h2, .technology-security h2, .technology-closing h2 { margin: 8px 0 13px; color: #fff; font-size: clamp(25px, 4vw, 36px); line-height: 1.1; }
.technology-runtime-copy > p, .technology-security-copy > p, .technology-closing p { margin: 0; color: #d0d0e2; font-size: 13px; line-height: 1.75; }
.technology-runtime-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 20px; }
.technology-runtime-stats span { display: flex; flex-direction: column; padding: 10px; border-left: 2px solid #58ddff; background: rgba(0,0,0,.25); }
.technology-runtime-stats b { color: #fff; font-size: 17px; }
.technology-runtime-stats small { color: #b4b4ce; font-size: 10px; line-height: 1.4; }
.runtime-illustration { overflow: hidden; border: 2px solid #3a4270; border-radius: 10px; background: #030108; box-shadow: 0 15px 30px rgba(0,0,0,.35); }
.runtime-browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 11px; background: #18152b; }
.runtime-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff5b92; }
.runtime-browser-bar i:nth-child(2) { background: #ffcf3f; }
.runtime-browser-bar i:nth-child(3) { background: var(--neon); }
.runtime-browser-bar span { margin-left: 6px; color: #aaaac5; font-size: 9px; }
.runtime-screen { display: grid; grid-template-columns: 1fr auto 1.25fr auto 1fr; align-items: center; min-height: 235px; padding: 20px; }
.runtime-input, .runtime-output { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.runtime-input b, .runtime-output b { width: 100%; color: #b8b8d0; font-size: 10px; letter-spacing: .8px; text-align: center; }
.runtime-input span, .runtime-output span { display: grid; width: 35px; height: 35px; place-items: center; color: #fff; border: 1px solid #343a62; border-radius: 5px; background: #131027; }
.runtime-core { display: flex; flex-direction: column; align-items: center; padding: 20px 9px; border: 1px solid rgba(57,255,20,.5); border-radius: 8px; background: rgba(57,255,20,.06); box-shadow: 0 0 17px rgba(57,255,20,.08); }
.runtime-core small { color: var(--neon); font-size: 9px; letter-spacing: .8px; }
.runtime-core b { margin: 7px 0 3px; color: #fff; font-size: 17px; }
.runtime-core em { color: #b6b6ce; font-size: 10px; font-style: normal; }
.runtime-chevron { color: #58ddff; font-size: 28px; }
.technology-memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.technology-memory-grid article { padding: 24px; border: 1px solid #2a2f52; border-radius: 10px; background: rgba(13,7,36,.68); }
.memory-symbol { display: grid; width: 40px; height: 40px; place-items: center; color: #001; border-radius: 8px; background: var(--neon); box-shadow: 0 0 12px rgba(57,255,20,.3); font-weight: 900; }
.memory-symbol-pink { background: #ff5b92; box-shadow: 0 0 12px rgba(255,43,107,.3); }
.memory-symbol-purple { background: #d99aff; box-shadow: 0 0 12px rgba(200,107,255,.3); }
.technology-memory-grid h3 { margin: 14px 0 9px; color: #fff; font-size: 18px; }
.technology-memory-grid p { min-height: 92px; margin: 0; color: #cdcdde; font-size: 12px; line-height: 1.7; }
.technology-memory-grid article > div { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 16px; padding-top: 13px; border-top: 1px dotted #343a62; }
.technology-memory-grid article > div b { color: #ededf6; font-size: 10px; text-transform: uppercase; }
.technology-memory-grid article > div i { color: #58ddff; font-style: normal; }
.technology-security {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 38px; align-items: start; margin-top: 65px;
  padding: clamp(26px, 5vw, 46px); border: 1px solid rgba(255,43,107,.45); border-radius: 13px;
  background: linear-gradient(135deg, rgba(255,43,107,.07), rgba(0,0,0,.32));
}
.security-layers { display: flex; flex-direction: column; gap: 7px; perspective: 800px; }
.security-layers > div { display: grid; grid-template-columns: 38px 160px 1fr; align-items: center; gap: 12px; padding: 14px 15px; border: 1px solid #343a62; border-left: 2px solid rgba(255,91,146,.6); border-radius: 7px; background: linear-gradient(90deg, rgba(255,43,107,.065), rgba(13,7,36,.75)); box-shadow: 0 4px 0 rgba(4,1,13,.75), 0 9px 16px rgba(0,0,0,.18); }
.security-layers > div:nth-child(2), .security-layers > div:nth-child(5) { transform: translateX(7px); }
.security-layers > div:nth-child(3), .security-layers > div:nth-child(4) { transform: translateX(14px); }
.security-layers span { color: #ff6e9f; font-size: 12px; font-weight: 800; }
.security-layers b { color: #fff; font-size: 12px; line-height: 1.45; text-transform: uppercase; }
.security-layers small { color: #c8c8dc; font-size: 11px; line-height: 1.6; }
.deployment-track { display: flex; align-items: stretch; gap: 7px; overflow-x: auto; padding: 2px 2px 12px; }
.deployment-track > div { position: relative; display: flex; min-width: 104px; flex: 1 0 104px; flex-direction: column; padding: 15px 12px; border: 1px solid #343a62; border-top: 2px solid #d99aff; border-radius: 8px; background: linear-gradient(145deg, rgba(22,12,49,.9), rgba(9,4,24,.92)); box-shadow: 0 4px 0 #05020e, 0 10px 18px rgba(0,0,0,.24); }
.deployment-track > div > span { color: #d99aff; font-size: 11px; font-weight: 800; }
.deployment-track b { margin: 7px 0 4px; color: #fff; font-size: 13px; }
.deployment-track small { color: #bdbdd3; font-size: 10px; line-height: 1.45; }
.deployment-track > i { align-self: center; color: #d99aff; font-size: 11px; font-style: normal; }
.deployment-track .deployment-live { border-color: rgba(57,255,20,.6); background: rgba(57,255,20,.07); box-shadow: 0 0 12px rgba(57,255,20,.1); }
.deployment-track .deployment-live > span, .deployment-track .deployment-live b { color: var(--neon); }
.deployment-note { margin: 14px auto 0; max-width: 850px; color: #b9b9d0; font-size: 11px; line-height: 1.7; text-align: center; }
.technology-closing {
  display: grid; grid-template-columns: auto 1fr; gap: 27px; align-items: center; margin-top: 65px;
  padding: clamp(28px, 5vw, 50px); border: 2px solid rgba(57,255,20,.42); border-radius: 14px;
  background:
    linear-gradient(rgba(57,255,20,.035) 1px, transparent 1px) 0 0 / 100% 5px,
    linear-gradient(135deg, rgba(57,255,20,.07), rgba(0,0,0,.36));
}
.technology-closing-logo { position: relative; display: grid; width: 82px; height: 82px; place-items: center; border: 3px solid var(--neon); border-radius: 18px; box-shadow: 0 0 20px rgba(57,255,20,.25); transform: rotate(-4deg); }
.technology-closing-logo span { color: #fff; font-size: 42px; font-weight: 900; text-shadow: 3px 3px 0 #ff2b6b; }
.technology-closing-logo i { position: absolute; right: 8px; bottom: 8px; width: 9px; height: 9px; border-radius: 50%; background: #ffcf3f; box-shadow: 0 0 8px #ffcf3f; }
.technology-closing a { display: inline-block; margin-top: 18px; color: var(--neon); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; }
.technology-closing a:hover, .technology-closing a:focus-visible { text-shadow: 0 0 8px var(--neon); }

@media (max-width: 1180px) {
  .technology-memory-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  .technology-signal-strip { grid-template-columns: repeat(4, 1fr); }
  .technology-signal-label { grid-column: 1 / -1; padding: 4px 8px 9px; }
  .technology-signal-strip > i { display: none; }
  .technology-hero { grid-template-columns: 1fr; gap: 28px; min-height: 0; align-content: start; }
  .technology-hero-image { width: 100%; max-height: 260px; transform: none; }
  .technology-cabinet { width: 205px; margin: 35px auto 0; }
  .technology-cabinet-base { height: 65px; padding-top: 18px; }
  .architecture-lane-request { display: grid; grid-template-columns: 1fr; }
  .architecture-arrow { width: auto; height: 32px; flex: none; transform: rotate(90deg); }
  .architecture-branches { display: none; }
  .architecture-lane-data { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 23px; }
  .architecture-cdn { flex-direction: column; }
  .architecture-cdn .architecture-node { width: 100%; max-width: none; flex-basis: auto; }
  .architecture-map-vertical { grid-template-columns: 1fr; gap: 26px; }
  .architecture-runtime-rail { min-height: 310px; }
  .architecture-service-grid { grid-template-columns: repeat(2, 1fr); }
  .play-flow-diagram { grid-template-columns: 42px minmax(0, 1fr); gap: 12px 0; }
  .play-flow-diagram::before { left: 45px; }
  .play-flow-diagram li:nth-child(n) { grid-column: 2; grid-row: auto; }
  .play-flow-diagram li:nth-child(n)::before { left: -24px; right: auto; width: 24px; }
  .play-flow-diagram li:nth-child(n)::after { content: ""; left: -30px; right: auto; }
  .technology-runtime, .technology-security { grid-template-columns: 1fr; }
  .technology-memory-grid { grid-template-columns: 1fr; }
  .technology-memory-grid p { min-height: 0; }
  .security-layers > div:nth-child(n) { transform: none; }
}

@media (max-width: 520px) {
  .technology-signal-strip { grid-template-columns: repeat(2, 1fr); }
  .technology-signal-strip > a { padding: 10px 8px; }
  .technology-nav { margin-bottom: 16px; }
  .technology-hero { min-height: 0; padding: 32px 22px; }
  .technology-hero h1 { letter-spacing: -2px; }
  .technology-hero-readouts { grid-template-columns: 1fr; }
  .technology-hero-image { overflow: hidden; }
  .technology-cabinet { width: 180px; margin-top: 25px; }
  .technology-cabinet-screen { padding: 12px 13px 14px; }
  .technology-scanlines { inset: 12px 13px 14px; }
  .technology-cabinet-base { height: 55px; padding-top: 13px; }
  .architecture-map { padding: 17px; }
  .architecture-map-vertical { gap: 22px; }
  .architecture-stage { grid-template-columns: 27px 37px minmax(0, 1fr); gap: 9px; padding: 16px 13px; }
  .architecture-stage ul { grid-column: 2 / -1; max-width: none; justify-content: flex-start; }
  .architecture-connector { min-height: 61px; }
  .architecture-runtime-rail { min-height: 280px; padding: 30px 14px 18px; }
  .architecture-service-grid { grid-template-columns: 1fr; }
  .architecture-service-grid .architecture-node { min-height: 125px; }
  .architecture-service-bus { margin-right: 0; margin-left: 0; }
  .architecture-lane-data { grid-template-columns: 1fr; }
  .technology-flow-intro { margin-left: 0; }
  .play-flow-diagram { grid-template-columns: 30px minmax(0, 1fr); padding: 14px 12px; }
  .play-flow-diagram::before { left: 27px; top: 27px; bottom: 27px; }
  .play-flow-diagram li:nth-child(n)::before { left: -18px; width: 18px; }
  .play-flow-diagram li:nth-child(n)::after { left: -24px; }
  .play-flow-diagram li { min-height: 0; }
  .technology-runtime { padding: 24px 18px; }
  .runtime-screen { grid-template-columns: 1fr; gap: 8px; min-height: 430px; }
  .runtime-chevron { transform: rotate(90deg); text-align: center; }
  .technology-runtime-stats { grid-template-columns: 1fr; }
  .technology-security { padding: 25px 19px; }
  .security-layers > div { grid-template-columns: 28px 1fr; }
  .security-layers small { grid-column: 2; }
  .technology-closing { grid-template-columns: 1fr; }
  .technology-closing-logo { width: 68px; height: 68px; }
}

/* ---------------- Statistics ---------------- */
.stats-page { max-width: 1180px; padding: 30px 24px 64px; }
.stats-hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(22px, 4vw, 38px); align-items: center;
  margin-bottom: 26px; padding: clamp(24px, 5vw, 44px);
  border: 2px solid #2a2f52; border-radius: 14px; background:
    linear-gradient(rgba(57,255,20,.04) 1px, transparent 1px) 0 0 / 100% 6px,
    radial-gradient(circle at 50% 0%, rgba(88,221,255,.2), transparent 55%),
    linear-gradient(130deg, rgba(13,7,36,.98), rgba(5,1,15,.98));
  box-shadow: 0 0 30px rgba(88,221,255,.1), inset 0 0 60px rgba(0,0,0,.4);
}
.stats-hero h1 {
  margin: 12px 0 14px; color: #fff; font-size: clamp(34px, 7vw, 62px); line-height: 1;
  letter-spacing: -2px; text-shadow: 0 0 16px rgba(88,221,255,.6);
}
.stats-hero-copy { min-width: 0; }
.stats-hero p { max-width: 620px; margin: 0; color: #c3c3df; font-size: 14px; line-height: 1.7; }
.stats-hero-image { box-shadow: 0 16px 34px rgba(0,0,0,.42), 0 0 25px rgba(57,255,20,.16); }

.stats-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px;
}
.stat-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px; border: 1px solid #2a2f52; border-radius: 12px;
  background: rgba(0,0,0,.3); border-left: 3px solid #58ddff;
}
.stat-kpi-live { border-left-color: var(--neon); }
.stat-kpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: #58ddff; font-size: 18px; line-height: 1;
}
.stat-kpi b { color: #fff; font-size: clamp(26px, 5vw, 38px); font-weight: 800; letter-spacing: -1px; }
.stat-kpi small { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

.stats-panel {
  margin-bottom: 22px; padding: 22px; border: 2px solid #2a2f52; border-radius: 14px;
  background: linear-gradient(135deg, rgba(13,7,36,.9), rgba(5,1,15,.9));
}
.stats-panel-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.stats-panel-heading .stat-kpi-icon { font-size: 22px; }
.stats-panel-heading p { margin: 0; color: var(--neon); font-size: 9px; font-weight: 800; letter-spacing: 3px; }
.stats-panel-heading h2 { margin: 2px 0 0; color: #fff; font-size: 20px; letter-spacing: -.5px; }
.stat-kpi-icon-live { color: var(--neon); }

.stats-leaderboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: rank; }
.stats-leaderboard li { counter-increment: rank; }
.stats-leaderboard a {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.28);
  border: 1px solid #24284a; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.stats-leaderboard a:hover {
  transform: translateX(3px); border-color: var(--accent);
  box-shadow: 0 0 18px -8px var(--accent);
}
.stats-rank::before {
  content: counter(rank); display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #100;
  font-size: 12px; font-weight: 800; box-shadow: 0 0 10px -2px var(--accent);
}
.stats-game-name { color: #fff; font-weight: 700; font-size: 14px; }
.stats-players { color: var(--ink); font-size: 11px; font-weight: 700; white-space: nowrap; }
.stats-players strong { color: var(--neon); font-size: 15px; }

.stats-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.stats-columns .stats-panel { margin-bottom: 0; }

.stats-breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stats-breakdown li { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; }
.stats-breakdown-label { color: var(--ink); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-breakdown-value { color: #fff; font-size: 13px; font-weight: 800; min-width: 20px; text-align: right; }
.stats-bar {
  position: relative; height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid #24284a;
}
.stats-bar > span {
  display: block; height: 100%; border-radius: 999px; min-width: 3px;
  background: linear-gradient(90deg, #58ddff, var(--accent));
  box-shadow: 0 0 10px -2px var(--accent);
}
.stats-leaderboard .stats-bar > span { background: linear-gradient(90deg, var(--accent), #58ddff); }

.stats-pagination { margin-top: 20px; padding-top: 16px; border-top: 1px solid #24284a; }
.stats-pagination .site-pager-label { color: #fff; }

.stats-facts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; }
.stats-facts-grid div {
  padding: 12px 14px; border-left: 2px solid #58ddff; background: rgba(0,0,0,.25); border-radius: 6px;
}
.stats-facts-grid dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.stats-facts-grid dd { margin: 4px 0 0; color: #fff; font-size: 18px; font-weight: 800; }
.stats-note { margin: 16px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.stats-empty { margin: 0; color: var(--muted); font-size: 13px; }
.stats-empty a { color: var(--neon); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .stats-hero { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .stats-hero p { margin-inline: auto; }
  .stats-hero-image { width: 100%; max-height: 210px; }
  .stats-kpis { grid-template-columns: repeat(2, 1fr); }
  .stats-columns { grid-template-columns: 1fr; }
  .stats-facts-grid { grid-template-columns: 1fr; }
}

/* ---------------- Local admin ---------------- */
.admin-page { max-width: 860px; }
/* Analytics reuses the library pager and membership grid; align them to the
   admin column and give even vertical rhythm between the sections. */
.admin-page .lib-pager { justify-content: flex-start; margin: 4px 0 22px; }
.admin-page .membership-benefit-grid { margin: 0 0 22px; }
.admin-hero {
  margin-bottom: 22px; padding: clamp(22px, 4vw, 36px);
  border: 2px solid #2a2f52; border-radius: 14px; background:
    linear-gradient(rgba(57,255,20,.04) 1px, transparent 1px) 0 0 / 100% 6px,
    linear-gradient(130deg, rgba(13,7,36,.98), rgba(5,1,15,.98));
}
.admin-hero h1 { margin: 10px 0 12px; color: #fff; font-size: clamp(30px, 6vw, 48px); letter-spacing: -1px; }
.admin-hero p { max-width: 640px; margin: 0; color: #c3c3df; font-size: 13px; line-height: 1.7; }
.admin-restart-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,176,32,.16); color: #ffb020; border: 1px solid rgba(255,176,32,.5);
  font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; vertical-align: middle;
}
.admin-flash {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 700;
  border: 1px solid;
}
.admin-flash-ok { color: #b6ffb0; background: rgba(57,255,20,.08); border-color: rgba(57,255,20,.5); }
.admin-flash-error { color: #ffb0c2; background: rgba(255,43,107,.1); border-color: rgba(255,43,107,.55); }
.admin-group {
  margin-bottom: 18px; padding: 20px; border: 2px solid #2a2f52; border-radius: 14px;
  background: linear-gradient(135deg, rgba(13,7,36,.9), rgba(5,1,15,.9));
}
.admin-group h2 {
  margin: 0 0 14px; color: var(--neon); font-size: 12px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase;
}
.admin-field {
  display: grid; grid-template-columns: 1fr minmax(200px, 260px); gap: 16px; align-items: center;
  padding: 12px 0; border-top: 1px solid #24284a;
}
.admin-group .admin-field:first-of-type { border-top: none; }
.admin-field-label label { color: #fff; font-size: 14px; font-weight: 700; }
.admin-field-label small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.admin-field-input { display: flex; align-items: center; gap: 10px; }
.admin-field-input input[type="number"],
.admin-field-input input[type="text"],
.admin-field-input input[type="password"] {
  flex: 1; min-width: 0; padding: 9px 12px; font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink); background: rgba(0,0,0,.35); border: 2px solid #2a2f52; border-radius: 8px;
}
.admin-field-input input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 10px -3px var(--neon); }
.admin-unit { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.admin-switch { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.admin-switch input { width: 18px; height: 18px; accent-color: var(--neon); }
.admin-actions { position: sticky; bottom: 0; padding: 16px 0; }
.admin-save {
  font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: 1px;
  color: #100; background: var(--neon); border: none; border-radius: 8px; padding: 12px 26px; cursor: pointer;
  box-shadow: 0 0 18px -4px var(--neon);
}
.admin-save:hover { box-shadow: 0 0 26px -4px var(--neon); }
.admin-save:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

.admin-danger {
  margin-top: 24px; padding: 20px; border: 2px solid rgba(255,43,107,.55); border-radius: 14px;
  background: linear-gradient(135deg, rgba(40,7,20,.75), rgba(5,1,15,.9));
}
.admin-danger h2 {
  margin: 0 0 10px; color: #ff5c8a; font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
}
.admin-danger p { margin: 0 0 14px; color: #c3c3df; font-size: 12px; line-height: 1.6; }
.admin-restart-btn {
  font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: 1px;
  color: #fff; background: rgba(255,43,107,.18); border: 2px solid #ff2b6b; border-radius: 8px;
  padding: 11px 22px; cursor: pointer; transition: box-shadow .15s ease, background .15s ease;
}
.admin-restart-btn:hover { background: rgba(255,43,107,.3); box-shadow: 0 0 18px -4px #ff2b6b; }

@media (max-width: 640px) {
  .admin-field { grid-template-columns: 1fr; gap: 8px; }
}
.admin-field-input select {
  width: 100%; min-width: 0; padding: 9px 12px; color: var(--ink); border: 2px solid #2a2f52;
  border-radius: 8px; background: #09051d; font: 700 14px inherit;
}
.admin-field-input select:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 10px -3px var(--neon); }

/* ---------------- Player accounts ---------------- */
.site-nav-account { position: relative; display: flex; align-items: center; gap: 5px; }
.site-nav-account > a, .site-account-trigger {
  display: inline-flex; min-height: 32px; align-items: center; padding: 6px 9px;
  color: #58ddff; border: 1px solid rgba(88,221,255,.38); border-radius: 7px;
  background: rgba(88,221,255,.06); font: 800 10px/1 "Courier New", monospace;
  letter-spacing: .8px; cursor: pointer; list-style: none; text-transform: uppercase;
}
.site-account-trigger::-webkit-details-marker { display: none; }
.site-nav-account > a:hover, .site-nav-account > a:focus-visible,
.site-account-trigger:hover, .site-account-trigger:focus-visible {
  color: #fff; border-color: #58ddff; box-shadow: 0 0 15px rgba(88,221,255,.22); outline: none;
}
.site-account-trigger.is-active { color: var(--neon); border-color: rgba(57,255,20,.5); }
.site-account-chevron { margin-left: 7px; transition: transform .15s ease; }
.site-account-menu[open] .site-account-chevron { transform: rotate(180deg); }
.site-account-dropdown { position: absolute; z-index: 80; top: calc(100% + 7px); right: 0; width: 150px; overflow: hidden; padding: 5px; border: 1px solid #39406c; border-radius: 9px; background: rgba(6,2,20,.99); box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 18px rgba(88,221,255,.1); }
.site-account-dropdown a, .site-account-dropdown button { display: flex; width: 100%; min-height: 34px; align-items: center; padding: 8px 10px; color: #dcecff; border: 0; border-radius: 6px; background: transparent; font: 800 10px/1 "Courier New", monospace; letter-spacing: .8px; text-align: left; text-transform: uppercase; cursor: pointer; }
.site-account-dropdown a:hover, .site-account-dropdown a:focus-visible { color: #07130a; background: var(--neon); outline: none; }
.site-account-dropdown a.is-active { color: var(--neon); }
.site-account-dropdown a.is-active:hover, .site-account-dropdown a.is-active:focus-visible { color: #07130a; }
.site-account-dropdown form { margin: 2px 0 0; padding-top: 2px; border-top: 1px solid #292e51; }
.site-account-dropdown button { color: #ff9fbb; }
.site-account-dropdown button:hover, .site-account-dropdown button:focus-visible { color: #fff; background: rgba(255,43,107,.2); outline: none; }

.account-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 32%, rgba(255,43,107,.08), transparent 23%),
    radial-gradient(circle at 88% 38%, rgba(88,221,255,.08), transparent 24%),
    #05010f;
}
.account-body .fundraiser-widget { display: none; }
.account-body > .arcade-footer {
  width: min(820px, calc(100% - 32px)); margin: 0 auto 38px;
}
/* Matches .menu-page-shell exactly, so the footer lines up with the page above
   it rather than sitting in a narrower column of its own. */
.site-footer > .arcade-footer {
  width: min(1180px, 100%); margin: 0 auto 38px; padding: 0 24px 0;
}
.account-shell { position: relative; isolation: isolate; width: min(1040px, calc(100% - 32px)); margin: 0 auto; padding: 54px 0 80px; }
.account-shell > * { position: relative; z-index: 1; }
.account-shell-narrow { width: min(620px, calc(100% - 32px)); }
.account-hero { margin-bottom: 20px; text-align: center; }
.account-hero h1, .account-dashboard-hero h1, .account-result h1 {
  margin: 6px 0 12px; color: #fff; font-size: clamp(34px, 7vw, 58px); line-height: 1;
  letter-spacing: -3px; text-shadow: 0 0 18px rgba(255,43,107,.24);
}
.account-hero > p:not(.account-kicker), .account-dashboard-hero > div > p:last-child, .account-result > p {
  max-width: 690px; margin: 0 auto; color: #d6d6e8; font-size: 15px; line-height: 1.7;
}
.account-kicker { margin: 0; color: var(--neon); font-size: 12px; font-weight: 900; letter-spacing: 2.5px; text-shadow: 0 0 10px rgba(57,255,20,.28); }
.account-benefits {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 17px 0 0; padding: 0;
  color: #f2f2fb; font-size: 12px; font-weight: 800; list-style: none;
}
.account-benefits li { padding: 7px 10px; border: 1px solid rgba(88,221,255,.25); border-radius: 999px; background: rgba(88,221,255,.07); }
.account-benefits span { margin-right: 4px; color: #58ddff; }
.account-panel {
  position: relative; overflow: hidden;
  border: 1px solid #30345c; border-radius: 14px;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 100% 4px,
    linear-gradient(145deg, rgba(18,10,47,.98), rgba(7,3,23,.98));
  box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.025);
}
.account-panel::after { position: absolute; top: 0; left: 0; width: 72px; height: 3px; content: ""; background: var(--neon); box-shadow: 0 0 12px var(--neon); }
.account-form { display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 5vw, 34px); }
.account-form label:not(.account-check) { margin-top: 8px; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }
.account-form input[type="text"], .account-form input[type="email"], .account-form input[type="password"] {
  width: 100%; padding: 12px 13px; color: #fff; border: 1px solid #3b406d; border-radius: 7px;
  background: rgba(2,1,12,.78); font: 700 14px/1.2 "Courier New", monospace;
}
.account-form input:focus { outline: none; border-color: #58ddff; box-shadow: 0 0 0 2px rgba(88,221,255,.09), 0 0 18px rgba(88,221,255,.12); }
.account-form > span, .account-form div > span { color: #ff9cba; font-size: 12px; line-height: 1.5; }
.account-form small { color: #b3b3cd; font-size: 11px; line-height: 1.55; }
.account-form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-form-columns > div { display: flex; flex-direction: column; gap: 8px; }
.account-check { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; color: #e0e0ee; font-size: 13px; line-height: 1.55; cursor: pointer; }
.account-check input { width: 17px; height: 17px; flex: 0 0 17px; margin: 0; accent-color: var(--neon); }
.account-button {
  display: inline-flex; min-height: 42px; align-items: center; justify-content: center; margin-top: 13px; padding: 10px 17px;
  color: #fff; border: 1px solid #58ddff; border-radius: 7px; background: rgba(88,221,255,.09);
  font: 900 13px/1 "Courier New", monospace; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer;
}
.account-button:hover, .account-button:focus-visible { box-shadow: 0 0 21px rgba(88,221,255,.26); transform: translateY(-1px); }
.account-button-primary { color: #061000; border-color: var(--neon); background: var(--neon); box-shadow: 0 0 20px rgba(57,255,20,.18); }
.account-switch { margin: 12px 0 0; color: #c1c1d8; font-size: 12px; text-align: center; }
.account-switch a { color: #58ddff; font-weight: 900; }
.account-help-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 15px; margin-top: 12px; }
.account-help-links a { color: #69e3ff; font-size: 11px; font-weight: 900; letter-spacing: .4px; }
.account-help-links a:hover, .account-help-links a:focus-visible { color: #fff; text-shadow: 0 0 8px rgba(88,221,255,.55); }
.account-alert { margin: 0 0 14px; padding: 11px 13px; border: 1px solid; border-radius: 7px; font-size: 13px; line-height: 1.55; }
.account-alert:empty { display: none; }
.account-alert-error { color: #ffd5e1; border-color: rgba(255,91,146,.5); background: rgba(255,43,107,.08); }
.account-alert-success { color: #ddffd7; border-color: rgba(57,255,20,.45); background: rgba(57,255,20,.07); }
.account-result { padding: clamp(34px, 8vw, 64px); text-align: center; }
.account-result-icon { display: grid; width: 68px; height: 68px; margin: 0 auto 24px; place-items: center; color: #061000; border-radius: 15px; background: var(--neon); box-shadow: 0 0 26px rgba(57,255,20,.3); font-size: 32px; font-weight: 900; }
.account-result .account-button { margin-top: 26px; }
.account-dashboard-hero { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-bottom: 22px; }
.account-dashboard-copy { min-width: 0; }
.account-dashboard-hero h1 { margin-bottom: 8px; }
.account-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.account-title-row h1 { margin-right: 2px; }
.account-title-row form { margin: 0; }
.account-title-row button { padding: 7px 10px; color: #ffd5e1; border: 1px solid rgba(255,91,146,.48); border-radius: 7px; background: rgba(255,43,107,.09); font: 900 10px/1 "Courier New", monospace; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.account-title-row button:hover, .account-title-row button:focus-visible { color: #fff; border-color: #ff5c8a; box-shadow: 0 0 16px rgba(255,91,146,.22); outline: none; }
.account-tier { min-width: 190px; padding: 17px; border: 1px solid #3f4776; border-radius: 12px; background: rgba(8,4,27,.82); box-shadow: 0 8px 25px rgba(0,0,0,.3); }
.account-tier small, .account-summary small { display: block; margin-bottom: 7px; color: #b1b1ca; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; }
.account-tier strong { display: block; color: #58ddff; font-size: 19px; text-transform: uppercase; }
.account-tier span { display: block; margin-top: 4px; color: #c2c2d7; font-size: 11px; }
.account-tier-premium { border-color: rgba(255,207,63,.55); box-shadow: 0 0 24px rgba(255,207,63,.1); }
.account-tier-premium strong { color: #ffcf3f; text-shadow: 0 0 9px rgba(255,207,63,.4); }

.play-limit-page { width: 100%; max-width: 100vw; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 32px; overflow-x: hidden; }
.play-limit-page > * { min-width: 0; }
.play-limit-card { width: min(680px, calc(100% - 32px)); margin: 48px auto; padding: 48px 42px; text-align: center; border: 1px solid rgba(255,43,43,.55); border-radius: 12px; background: radial-gradient(circle at top, rgba(255,43,43,.12), rgba(10,10,24,.97) 58%); box-shadow: 0 0 40px rgba(255,43,43,.12), inset 0 0 28px rgba(255,43,43,.05); }
.play-limit-clock { margin: 20px 0 10px; color: #ff4242; font: 800 clamp(44px, 11vw, 82px)/1 monospace; letter-spacing: .04em; text-shadow: 0 0 18px rgba(255,43,43,.6); }
.play-limit-card h1 { margin: 0 0 24px; color: #fff; text-transform: uppercase; }
.play-limit-card p { max-width: 530px; margin: 10px auto; color: #c9c9dc; }
.play-limit-card strong { color: #fff; }
.play-limit-card .play-limit-reset { margin-top: 24px; color: #8f90aa; font-size: .9em; }
.play-limit-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.play-limit-actions a { padding: 11px 16px; color: #c9c9dc; border: 1px solid #383952; border-radius: 6px; text-decoration: none; }
.play-limit-actions a.primary { color: #fff; border-color: #ff4242; background: rgba(255,43,43,.13); }
.play-limit-actions a.supporter { color: #1b0e00; border-color: #ffcf3f; background: #ffcf3f; }
.account-summary { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 18px; padding: 20px; }
.account-summary > div { min-width: 0; padding: 6px 16px; border-right: 1px solid #2b2e50; }
.account-summary > div:last-child { border: 0; }
.account-summary strong { display: block; overflow: hidden; color: #eeeefa; font-size: 13px; text-overflow: ellipsis; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.account-play-history { margin-bottom: 18px; padding: 20px; }
.account-play-list { display: grid; min-height: 308px; align-content: start; gap: 7px; margin-top: 13px; transition: opacity .12s ease; }
.account-play-history.is-paging .account-play-list { opacity: .5; }
.account-play-list a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 13px; color: #f1f1fa; border: 1px solid #2d3156; border-radius: 8px; background: rgba(3,2,15,.5); }
.account-play-list a:hover, .account-play-list a:focus-visible { border-color: #58ddff; box-shadow: 0 0 14px rgba(88,221,255,.12); outline: none; }
.account-play-list span, .account-play-list strong, .account-play-list small { display: block; }
.account-play-list small { margin-top: 4px; color: #aaaac5; font-size: 10px; }
.account-play-list b { flex: 0 0 auto; color: var(--neon); font-size: 13px; }
.account-preferences { grid-column: 1 / -1; }
.account-danger-zone { margin-top: 18px; padding: clamp(22px, 5vw, 34px); border-color: rgba(255,91,146,.55); scroll-margin-top: 80px; }
.account-danger-zone::after { background: #ff5c8a; box-shadow: 0 0 12px #ff5c8a; }
.account-danger-zone > p { margin: 8px 0 0; color: #d4cad4; font-size: 12px; line-height: 1.7; }
.account-danger-zone > p strong { color: #ffd5e1; }
.account-danger-zone a { color: #71e6ff; font-weight: 900; }
.account-danger-zone form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 10px 12px; margin-top: 20px; }
.account-danger-field { display: grid; gap: 8px; min-width: 0; }
.account-danger-zone label { color: #fff; font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.account-danger-zone input { min-width: 0; padding: 11px 12px; color: #fff; border: 1px solid #704052; border-radius: 7px; background: rgba(2,1,12,.78); font: 700 13px/1.2 "Courier New", monospace; }
.account-danger-zone input:focus { outline: none; border-color: #ff5c8a; box-shadow: 0 0 15px rgba(255,91,146,.18); }

/* ---------------- Community comments ---------------- */
.preview-community { margin: var(--block-gap) 0 0; padding: clamp(24px,4vw,38px); border: 1px solid #34345d; border-radius: 17px; background: linear-gradient(145deg,rgba(15,7,37,.96),rgba(5,2,16,.98)); box-shadow: 0 20px 50px rgba(0,0,0,.28); font-family: Arial,Helvetica,sans-serif; }
.preview-community > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.preview-community h2 { margin: 6px 0 0; color: #fff; font-family: Arial,Helvetica,sans-serif; font-size: clamp(30px,4vw,44px); letter-spacing: -1px; }
.preview-community > header > a { color: #58ddff; font-size: 13px; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.preview-community-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 24px; }
.preview-community-grid article, .community-comment { display: grid; grid-template-columns: 58px 1fr; gap: 13px; min-width: 0; padding: 15px; border: 1px solid #303052; border-radius: 10px; background: rgba(2,1,11,.72); }
.preview-community-grid img, .community-comment img { width: 58px; height: 58px; border: 1px solid #3c3c62; border-radius: 7px; background: #070210; object-fit: cover; }
.preview-community-grid img.avatar-site-character, .community-comment img.avatar-site-character { object-fit: contain; padding: 8px; }
.preview-community-grid strong, .community-comment strong { color: #58ddff; font-size: 15px; }
.preview-community-grid p, .community-comment p { margin: 8px 0 0; color: #e2e2ed; font-size: 14px; line-height: 1.55; }
.preview-community-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 17px 19px; border: 1px dashed rgba(57,255,20,.38); border-radius: 9px; background: rgba(57,255,20,.035); }
.preview-community-action > div { display: grid; gap: 5px; }
.preview-community-action strong { color: #fff; font-size: 18px; }
.preview-community-action span { color: #b8b8ca; font-size: 13px; }
.preview-community .preview-button { font-family: Arial,Helvetica,sans-serif; font-size: 13px; }
.community-page { width: min(1040px,calc(100% - 32px)); margin: 0 auto; padding: 62px 0 80px; font-family: Arial,Helvetica,sans-serif; }
.community-hero { margin-bottom: 24px; text-align: center; }
.community-hero h1 { margin: 7px 0 12px; color: #fff; font-family: Arial,Helvetica,sans-serif; font-size: clamp(40px,7vw,68px); letter-spacing: -2px; }
.community-hero > p:last-child { color: #c9c9d8; font-size: 17px; }
.community-wall { padding: clamp(20px,4vw,34px); border: 1px solid #34345d; border-radius: 16px; background: linear-gradient(145deg,rgba(15,7,37,.96),rgba(5,2,16,.98)); }
.community-comment-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.community-comment.is-pending { border-color: rgba(255,207,63,.45); }
.community-comment header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.community-comment header span { color: #ffdf74; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.community-leave-comment { margin-top: 28px; padding-top: 26px; border-top: 1px solid #2b2b4d; }
.community-leave-comment h2 { margin: 5px 0 14px; color: #fff; font-family: Arial,Helvetica,sans-serif; font-size: 32px; }
.community-leave-comment label { display: block; margin-bottom: 8px; color: #d0d0dc; font-size: 14px; }
.community-leave-comment textarea { box-sizing: border-box; width: 100%; padding: 14px; color: #fff; border: 1px solid #3b3b61; border-radius: 8px; background: #06020f; font: 16px/1.55 Arial,Helvetica,sans-serif; resize: vertical; }
.community-leave-comment form > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 11px; }
.community-leave-comment small { color: #b3b3c4; font-size: 13px; }
.community-leave-comment form button { padding: 12px 16px; color: #05010f; border: 0; border-radius: 6px; background: linear-gradient(90deg,var(--neon),#58ddff); font: 800 13px/1 Arial,Helvetica,sans-serif; text-transform: uppercase; cursor: pointer; }
.comments-bubble-wrap { position: fixed; z-index: 70; right: 20px; bottom: 20px; width: auto; height: auto; }
.comments-bubble-wrap[hidden] { display: none; }
/* A labelled pill rather than a bare icon: the icon alone gave no clue what it
   opened, and a 40px square was a small target on touch. */
.comments-bubble {
  position: relative; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 9px;
  box-sizing: border-box; min-height: 44px; padding: 8px 14px 8px 11px; overflow: hidden;
  color: #fff; border: 2px solid #ff4fa8; border-radius: 10px;
  background: repeating-conic-gradient(from 45deg,#16052e 0 25%,#251052 0 50%) 0 0/10px 10px;
  box-shadow: 3px 3px 0 #ffcf3f, 5px 5px 0 #070210, 0 0 17px rgba(255,79,168,.45);
  text-decoration: none; transform: rotate(2deg);
  transition: transform .14s, box-shadow .14s, border-color .14s;
  touch-action: none; user-select: none; cursor: grab;
}
.comments-bubble::before, .comments-bubble::after { display: none; }
.comments-bubble span {
  display: block; font-size: 10px; font-weight: 800; line-height: 1.25;
  letter-spacing: 2px; text-shadow: 2px 2px 0 #05010f;
}
.comments-bubble svg { position: relative; z-index: 1; flex: 0 0 26px; width: 26px; height: 26px; margin: 0; shape-rendering: crispEdges; filter: drop-shadow(2px 2px 0 #05010f); }
.comments-bubble-shadow { fill: #ffcf3f; }
.comments-bubble-face { fill: #58ddff; }
.comments-bubble-screen { fill: #09021a; }
.comments-bubble-dot { fill: #39ff14; }
.comments-bubble:hover,.comments-bubble:focus-visible { transform: rotate(0) translateY(-3px); box-shadow: 3px 6px 0 #ffcf3f,5px 8px 0 #070210,0 0 22px rgba(88,221,255,.55); outline: 2px solid #fff; outline-offset: 3px; }
.comments-bubble-wrap.is-dragging .comments-bubble { transform: rotate(-2deg) scale(1.04); }
.comments-bubble-dismiss { position: absolute; z-index: 3; top: -7px; left: -7px; display: grid; width: 21px; height: 21px; place-items: center; padding: 0; color: #fff; border: 2px solid #ffcf3f; border-radius: 4px; background: #c51d67; box-shadow: 2px 2px 0 #05010f; font: 900 15px/1 Arial,Helvetica,sans-serif; cursor: pointer; }
.comments-bubble-dismiss:hover,.comments-bubble-dismiss:focus-visible { color: #05010f; background: #ffcf3f; outline: 2px solid #fff; outline-offset: 2px; }
.account-button-danger { margin-top: 0; color: #fff; border-color: #ff5c8a; background: rgba(255,43,107,.2); }
.account-button-danger:hover, .account-button-danger:focus-visible { background: rgba(255,43,107,.32); box-shadow: 0 0 21px rgba(255,43,107,.28); }
.account-card-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.account-card-heading > span { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(88,221,255,.35); border-radius: 8px; background: rgba(88,221,255,.07); font-size: 17px; }
.account-card-heading p { margin: 0 0 2px; color: #58ddff; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; }
.account-card-heading h2 { margin: 0; color: #fff; font-size: 17px; }
.account-note { margin: 0 0 5px; color: #c4c4d9; font-size: 12px; line-height: 1.6; }
.account-membership { margin-bottom: 18px; padding: clamp(20px, 4vw, 30px); scroll-margin-top: 80px; }
.membership-access-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 18px 0; border: 1px solid #34395f; border-radius: 10px; background: #34395f; }
.membership-access-status > div { min-width: 0; padding: 13px 15px; background: rgba(7,4,24,.96); }
.membership-access-status small, .membership-access-status strong, .membership-access-status span { display: block; }
.membership-access-status small { margin-bottom: 5px; color: #8f8fb5; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.membership-access-status strong { color: #b8bacb; font-size: 13px; }
.membership-access-status span { margin-top: 4px; color: #aaaac5; font-size: 9px; }
.membership-access-status.is-active { border-color: rgba(57,255,20,.42); background: rgba(57,255,20,.42); }
.membership-access-status.is-active strong { color: #baffb2; }
.account-billing-mode { display: inline-flex; margin: 12px 0 0; padding: 5px 9px; color: #ffd982; border: 1px solid rgba(255,198,77,.4); border-radius: 999px; background: rgba(255,198,77,.07); font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.membership-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.membership-product { display: flex; min-width: 0; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid #34395e; border-radius: 12px; background: linear-gradient(155deg, rgba(13,8,37,.96), rgba(4,3,15,.96)); }
.membership-product-membership { border-color: rgba(255,198,77,.65); box-shadow: 0 0 24px rgba(255,198,77,.08); }
.membership-product.is-selected { border-color: var(--neon); box-shadow: 0 0 0 2px rgba(57,255,20,.18), 0 0 28px rgba(57,255,20,.14); }
.membership-product small { color: #58ddff; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.membership-product-membership > div > small, .membership-product-membership .membership-price { color: #ffc64d; }
.membership-product h3 { margin: 5px 0 7px; color: #fff; font-size: 17px; }
.membership-product p { margin: 0; color: #aaaac5; font-size: 11px; line-height: 1.55; }
.membership-price { margin-top: auto; color: #58ddff; font-size: 23px; }
.membership-price span { color: #aaaac5; font-size: 10px; font-weight: 500; }
.membership-pay-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.membership-pay-buttons form, .membership-pay-buttons button { width: 100%; }
.membership-pay-buttons button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 7px; padding: 7px; border: 1px solid; border-radius: 7px; font: 800 10px inherit; cursor: pointer; }
.membership-paypal { color: #071b49; border-color: #ffc439; background: #ffc439; }
.membership-stripe { color: #fff; border-color: #8b78ff; background: #635bff; }
.payment-brand-icon { display: inline-grid; width: 17px; height: 17px; flex: 0 0 17px; place-items: center; border-radius: 4px; }
.payment-brand-icon svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.payment-brand-paypal { color: #0877bf; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,48,135,.12); }
.payment-brand-stripe { color: #635bff; background: #fff; }
.membership-pay-buttons button:hover:not(:disabled), .membership-pay-buttons button:focus-visible:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.membership-pay-buttons button:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .38; }
.membership-provider-note { color: #c4a9b3 !important; line-height: 1.45; letter-spacing: 0 !important; }
.membership-billing-identity { margin: 16px 0 0; padding: 11px 13px; color: #b9b9d1; border-left: 3px solid #58ddff; background: rgba(88,221,255,.05); font-size: 10px; line-height: 1.65; }
.membership-billing-identity strong { color: #fff; }
.membership-history { margin-top: 22px; padding-top: 18px; border-top: 1px solid #2d3156; }
.membership-history h3 { margin: 0 0 10px; color: #fff; font-size: 14px; }
.membership-history > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px; border-bottom: 1px dotted #303458; color: #eeeefa; }
.membership-history span, .membership-history strong, .membership-history small { display: block; }
.membership-history small { margin-top: 3px; color: #aaaac5; font-size: 9px; }
.membership-history b { color: #ffcf3f; font-size: 11px; }
.membership-history form { margin-top: 5px; text-align: right; }
.membership-history button { padding: 4px 7px; color: #ffd5e1; border: 1px solid rgba(255,91,146,.45); border-radius: 5px; background: rgba(255,43,107,.08); font: 700 9px inherit; cursor: pointer; }

.admin-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.admin-section-heading p { color: var(--muted); font-size: 11px; }
.admin-provider-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-provider-actions .admin-save { padding: 9px 12px; font-size: 10px; }
.admin-provider-actions .admin-save:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .35; }
.admin-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.admin-products-grid article { padding: 15px; border: 1px solid #34395e; border-radius: 9px; background: rgba(3,2,15,.5); }
.admin-products-grid small, .admin-products-grid h3, .admin-products-grid strong { display: block; }
.admin-products-grid small { color: #58ddff; font-size: 9px; text-transform: uppercase; }
.admin-products-grid h3 { margin: 5px 0; color: #fff; }
.admin-products-grid strong { color: #ffcf3f; }
.admin-products-grid dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; margin: 12px 0 0; font-size: 9px; }
.admin-products-grid dt { color: #aaaac5; }.admin-products-grid dd { overflow: hidden; margin: 0; color: #eeeefa; text-overflow: ellipsis; }
.admin-products-grid p { color: #ffc0d2; font-size: 9px; line-height: 1.5; }
.admin-payment-hero { border-color: rgba(88,221,255,.42); }
.admin-payment-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.admin-payment-summary span { padding: 5px 9px; border: 1px solid; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.admin-payment-summary .sandbox { color: #ffd982; border-color: rgba(255,198,77,.45); background: rgba(255,198,77,.08); }
.admin-payment-summary .live, .admin-payment-summary .ready { color: #baffb2; border-color: rgba(57,255,20,.45); background: rgba(57,255,20,.08); }
.admin-payment-summary .off { color: #b5b5ca; border-color: #454967; background: rgba(255,255,255,.035); }
.admin-payment-providers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-provider-card { min-width: 0; }
.admin-provider-card > header { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid #282c4d; }
.admin-provider-card > header h2 { margin: 0 0 4px; color: #fff; letter-spacing: 1px; }
.admin-provider-card > header p { margin: 0; color: #aaaac5; font-size: 10px; line-height: 1.45; }
.admin-provider-mark { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 10px; font-size: 21px; font-weight: 900; }
.admin-provider-paypal .admin-provider-mark { color: #082454; background: #ffc439; }
.admin-provider-stripe .admin-provider-mark { color: #fff; background: #635bff; }
.admin-provider-card .admin-field { grid-template-columns: 1fr; gap: 7px; }
.admin-webhook-box { padding: 11px; border: 1px dashed #393e66; border-radius: 8px; background: rgba(0,0,0,.2); }
.admin-webhook-box span, .admin-webhook-box code { display: block; }
.admin-webhook-box span { margin-bottom: 5px; color: #aaaac5; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.admin-webhook-box code { overflow-wrap: anywhere; color: #58ddff; font-size: 9px; }
.admin-payment-actions { display: flex; align-items: center; gap: 18px; }
.admin-payment-actions a { color: #58ddff; font-size: 10px; font-weight: 900; }
.admin-payment-catalog-preview { margin-top: 8px; }
.admin-membership-search { display: flex; align-items: end; gap: 9px; margin: 20px 0; padding: 16px; border: 1px solid #2e3358; border-radius: 10px; background: rgba(5,3,18,.7); }
.admin-membership-search label { flex: 1; color: #fff; font-size: 11px; font-weight: 800; }
.admin-membership-search input { display: block; width: 100%; margin-top: 6px; padding: 9px; color: #fff; border: 1px solid #40466f; border-radius: 6px; background: #070519; font: inherit; }
.admin-membership-search a { padding: 9px; color: #58ddff; font-size: 11px; }
.admin-membership-results { display: grid; gap: 14px; }
.admin-member-card { padding: 18px; border: 1px solid #353a62; border-radius: 12px; background: rgba(7,4,24,.85); }
.admin-member-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.admin-member-card h2 { margin: 3px 0; color: #fff; }.admin-member-card header p { margin: 0; color: #aaaac5; font-size: 10px; }
.admin-member-state { padding: 6px 9px; border-radius: 999px; font-size: 9px; font-weight: 900; }
.admin-member-state.active { color: #1b0e00; background: #ffc64d; }.admin-member-state.inactive { color: #06151a; background: #58ddff; }
.admin-member-until { color: #ddddea; font-size: 11px; }
.admin-time-adjust { display: flex; align-items: end; gap: 8px; margin: 12px 0; }
.admin-time-adjust label { flex: 1; color: #aaaac5; font-size: 9px; }.admin-time-adjust input { display: block; width: 100%; margin-top: 5px; padding: 7px; color: #fff; border: 1px solid #3b416c; background: #070519; }
.admin-time-adjust button, .admin-entitlements button { padding: 8px 10px; color: #fff; border: 1px solid #58ddff; border-radius: 6px; background: rgba(88,221,255,.08); font: 800 9px inherit; cursor: pointer; }
.admin-entitlements { display: grid; gap: 5px; }.admin-entitlements > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 11px; border: 1px solid #292e51; border-radius: 7px; }
.admin-entitlements strong, .admin-entitlements small { display: block; }.admin-entitlements strong { color: #fff; font-size: 11px; }.admin-entitlements small { margin-top: 3px; color: #aaaac5; font-size: 8px; }

@media (max-width: 820px) {
  .site-nav-account { margin-left: auto; }
  .site-nav-account + .site-nav-sound-toggle { margin-left: 0; }
  .account-dashboard-hero { display: block; }
  .account-tier { margin-top: 20px; }
  .account-summary { grid-template-columns: 1fr 1fr; }
  .account-summary > div:nth-child(2) { border-right: 0; }
  .account-summary > div:nth-child(-n+2) { border-bottom: 1px solid #2b2e50; }
  .account-grid { grid-template-columns: 1fr; }
  .membership-products, .admin-products-grid, .admin-payment-providers { grid-template-columns: 1fr; }
  .account-preferences { grid-column: auto; }
  .account-danger-zone form { grid-template-columns: 1fr; }
  .site-mascot-presenter { width: 46px; }
  .site-mascot { width: 46px; opacity: .5; }
}
@media (max-width: 540px) {
  .account-shell { width: min(100% - 24px, 1040px); padding-top: 35px; }
  .account-form-columns, .account-summary { grid-template-columns: 1fr; }
  .membership-access-status { grid-template-columns: 1fr; }
  .account-summary > div { border-right: 0; border-bottom: 1px solid #2b2e50; }
  .account-summary > div:last-child { border-bottom: 0; }
  .site-mascot-presenter { width: 36px; }
  .site-mascot { width: 36px; opacity: .36; }
  .site-mascot-mario { top: 180px; left: 4px; }
  .site-mascot-invader { top: 450px; right: 4px; }
  .site-mascot-pacman { top: 980px; right: 4px; }
  .site-mascot-moon-cresta { top: 1480px; left: 4px; }
  .site-mascot-asteroid { top: 1980px; right: 4px; }
  .site-mascot-frogger { top: 2480px; left: 4px; }
  /* A phone stacks the same content far taller, so the cadence tightens to
     500px to keep the gaps between sprites feeling the same as on desktop. */
  .site-mascot-ghost { top: 2980px; right: 4px; }
  .site-mascot-coin { top: 3480px; left: 4px; }
  .site-mascot-crab { top: 3980px; right: 4px; }
  .site-mascot-joystick { top: 4480px; left: 4px; }
  .site-mascot-saucer { top: 4980px; right: 4px; }
  .site-mascot-barrel { top: 5480px; left: 4px; }
  .site-mascot-cannon { top: 5980px; right: 4px; }
  .site-mascot-mushroom { top: 6480px; left: 4px; }
  .site-mascot-heart { top: 6980px; right: 4px; }
  .site-mascot-cabinet { top: 7480px; left: 4px; }
  .site-mascot-saucer-2 { top: 7980px; right: 4px; }
  .site-mascot-ghost-2 { top: 8480px; left: 4px; }
  .site-mascot-cannon-2 { top: 8980px; right: 4px; }
  .site-mascot-coin-2 { top: 9480px; left: 4px; }
  .site-mascot-crab-2 { top: 9980px; right: 4px; }
  .site-mascot-cabinet-2 { top: 10480px; left: 4px; }
  .site-mascot-heart-2 { top: 10980px; right: 4px; }
  .account-hero h1 { letter-spacing: -2px; }
  .account-benefits { gap: 6px; }
  .account-benefits li { padding: 6px 8px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-mascot, .site-mascot-presenter { animation: none; }
}

/* ---------------- Homepage landing page ---------------- */
.preview-page {
  background:
    radial-gradient(circle at 12% 18%, rgba(200,107,255,.1), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(44,214,255,.09), transparent 25%),
    radial-gradient(circle at 50% 72%, rgba(255,43,107,.06), transparent 38%),
    linear-gradient(180deg, #05010f, #08031a 48%, #05010f);
}
.preview-shell { width: min(1180px, 100%); margin: 0 auto; padding: 30px 24px 64px; }
.preview-hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: 450px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(350px, .85fr);
  align-items: center; gap: clamp(18px, 3vw, 42px); padding: 22px clamp(30px, 5vw, 60px);
  border: 1px solid #36375e; border-radius: 26px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 5px,
    radial-gradient(circle at 76% 45%, rgba(200,107,255,.17), transparent 34%),
    linear-gradient(135deg, rgba(17,9,47,.97), rgba(5,1,15,.98));
  box-shadow: 0 28px 90px rgba(0,0,0,.45), inset 0 0 80px rgba(0,0,0,.28);
}
.preview-hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(112deg, transparent 48%, rgba(57,255,20,.035) 48%, rgba(57,255,20,.035) 48.5%, transparent 48.5%);
}
.preview-hero-copy { position: relative; z-index: 3; transform: translateY(-10px); }
.preview-section-kicker {
  margin: 0 0 14px; color: #58ddff; font-size: 10px; font-weight: 900;
  letter-spacing: 2.5px; text-transform: uppercase; text-shadow: 0 0 10px rgba(44,214,255,.5);
}
.preview-logo { display: block; width: min(380px, 88%); height: auto; margin: 0 0 10px; filter: drop-shadow(0 0 18px rgba(255,43,107,.45)); }
.preview-hero h1 {
  max-width: 620px; margin: 0; color: #fff; font-size: clamp(32px, 4vw, 50px);
  line-height: .95; letter-spacing: -2.7px; text-wrap: balance;
}
.preview-lead { max-width: 625px; margin: 14px 0 0; color: #c3c3df; font-size: 13px; line-height: 1.62; }
.preview-hero-bubbles { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; margin-top: 15px; }
.preview-hero-bubbles > a { gap: 6px; padding: 5px 8px 5px 5px; font-size: 9px; letter-spacing: .55px; white-space: nowrap; }
.preview-hero-bubbles .hero-history-icon,
.preview-hero-bubbles .hero-technology-icon,
.preview-hero-bubbles .hero-faq-icon { width: 15px; height: 15px; font-size: 8px; }
.preview-button {
  display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 18px; border: 1px solid #44476f; border-radius: 9px; color: #fff;
  font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.preview-button:hover, .preview-button:focus-visible { transform: translateY(-2px); }
.preview-button-primary { color: #051000; border-color: var(--neon); background: var(--neon); box-shadow: 0 0 22px rgba(57,255,20,.25); }
.preview-button-primary:hover, .preview-button-primary:focus-visible { box-shadow: 0 0 30px rgba(57,255,20,.45); }
.preview-button-secondary { background: rgba(255,255,255,.045); }
.preview-button-secondary:hover, .preview-button-secondary:focus-visible { border-color: #d99aff; box-shadow: 0 0 20px rgba(200,107,255,.22); }
.preview-coming-soon { max-width: 590px; margin: 10px 0 0; color: #9292b7; font-size: 9px; line-height: 1.55; }
.preview-coming-soon strong { color: #ffcf3f; text-shadow: 0 0 8px rgba(255,207,63,.4); }
.preview-hero-art { position: relative; top: -8px; min-height: 350px; }
.preview-orbit {
  position: absolute; width: 350px; height: 350px; left: 50%; top: 50%;
  border: 1px solid rgba(88,221,255,.2); border-radius: 50%; transform: translate(-50%,-50%);
  box-shadow: 0 0 80px rgba(44,214,255,.08), inset 0 0 80px rgba(200,107,255,.07);
}
.preview-orbit::before, .preview-orbit::after { content: ""; position: absolute; border: 1px dashed rgba(255,207,63,.18); border-radius: 50%; }
.preview-orbit::before { inset: 38px; }.preview-orbit::after { inset: 94px; border-color: rgba(57,255,20,.16); }
.preview-art-card {
  position: absolute; z-index: 2; overflow: hidden; width: 166px; padding: 6px 6px 9px;
  border: 1px solid var(--pick-accent); border-radius: 14px; background: #09041a;
  box-shadow: 0 0 30px color-mix(in srgb, var(--pick-accent) 34%, transparent), 0 18px 35px rgba(0,0,0,.48);
  transition: transform .2s ease, box-shadow .2s ease;
}
.preview-art-card:hover, .preview-art-card:focus-visible { z-index: 4; box-shadow: 0 0 42px color-mix(in srgb, var(--pick-accent) 50%, transparent), 0 20px 40px rgba(0,0,0,.55); }
.preview-art-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; image-rendering: pixelated; }
.preview-art-card span { display: block; overflow: hidden; margin-top: 9px; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: 1px; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.preview-art-card-1 { left: 8%; top: 13%; transform: rotate(-8deg); }
.preview-art-card-1:hover { transform: rotate(-5deg) translateY(-5px); }
.preview-art-card-2 { right: 3%; top: 27%; transform: rotate(8deg); }
.preview-art-card-2:hover { transform: rotate(5deg) translateY(-5px); }
.preview-art-card-3 { left: 28%; bottom: 3%; transform: rotate(-1deg); }
.preview-art-card-3:hover { transform: translateY(-5px); }
.preview-insert-coin {
  position: absolute; z-index: 3; right: 9%; top: 12%; padding: 7px 10px; color: #211600;
  border-radius: 5px; background: #ffcf3f; box-shadow: 0 0 18px rgba(255,207,63,.5);
  font-size: 8px; font-weight: 900; letter-spacing: 1px; transform: rotate(5deg);
}
.preview-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: end; padding: 64px 0 48px; }
.preview-intro h2, .preview-section-head h2, .preview-final-cta h2 {
  margin: 0; color: #fff; font-size: clamp(30px, 4.5vw, 52px); line-height: 1.05; letter-spacing: -2px;
}
.preview-intro > p { margin: 0; color: #b9b9d4; font-size: 14px; line-height: 1.8; }
.preview-membership {
  position: relative; display: grid; min-height: 390px; grid-template-columns: .95fr 1.05fr; overflow: hidden;
  margin: var(--block-gap) 0 0; border: 1px solid rgba(255,207,63,.55); border-radius: 20px;
  background: #080318; box-shadow: 0 22px 70px rgba(0,0,0,.38), 0 0 35px rgba(255,207,63,.08);
}
.preview-membership::after { position: absolute; inset: 0; pointer-events: none; content: ""; box-shadow: inset 0 0 55px rgba(255,207,63,.05); }
/* Matches the news artwork: same dimmed base, same slow zoom and lift on hover. */
.preview-membership > img { grid-column: 2; width: 100%; height: 100%; min-height: 390px; object-fit: cover; object-position: 68% center; filter: saturate(.9) brightness(.75); transition: transform .25s ease, filter .25s ease; }
.preview-membership:hover > img, .preview-membership:focus-within > img { transform: scale(1.04); filter: saturate(1.1) brightness(.9); }
@media (prefers-reduced-motion: reduce) {
  .preview-membership > img { transition: none; }
  .preview-membership:hover > img { transform: none; }
}
.preview-membership > div { position: relative; z-index: 1; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(30px, 5vw, 62px); background: linear-gradient(90deg, #080318 0%, rgba(8,3,24,.97) 70%, rgba(8,3,24,.55) 100%); }
.preview-membership h2 { margin: 7px 0 13px; color: #fff; font-size: clamp(34px, 5vw, 58px); line-height: .95; letter-spacing: -2px; }
.preview-membership > div > p:not(.preview-section-kicker) { margin: 0; color: #c4c4dd; font-size: 12px; line-height: 1.75; }
.preview-membership ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 22px; padding: 0; list-style: none; }
.preview-membership li { padding: 6px 9px; color: #ffe89b; border: 1px solid rgba(255,207,63,.3); border-radius: 999px; background: rgba(255,207,63,.07); font-size: 8px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.preview-news {
  display: grid; min-height: 260px; grid-template-columns: 1.15fr .85fr; overflow: hidden;
  margin: 0; border: 1px solid rgba(88,221,255,.42); border-radius: 20px;
  background: radial-gradient(circle at 12% 50%, rgba(88,221,255,.1), transparent 38%), #080318;
  box-shadow: 0 22px 70px rgba(0,0,0,.3), 0 0 35px rgba(88,221,255,.06);
}
.site-account-avatar { width: 24px; height: 24px; margin: -3px 7px -3px -4px; border: 1px solid rgba(88,221,255,.35); border-radius: 4px; background: #070210; object-fit: cover; }
.site-account-avatar.avatar-site-character { object-fit: contain; padding: 3px; }
.preview-news-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(28px, 5vw, 52px); }
.preview-news h2 { margin: 7px 0 13px; color: #fff; font-size: clamp(31px, 4.5vw, 50px); line-height: .98; letter-spacing: -2px; }
.preview-news-copy > p:not(.preview-section-kicker) { max-width: 560px; margin: 0 0 22px; color: #b8b8d1; font-size: 12px; line-height: 1.75; }
.preview-news-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.preview-news-links .preview-text-link { margin: 0; }
.preview-news-art { position: relative; display: block; overflow: hidden; min-height: 260px; }
.preview-news-art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, #080318, transparent 45%), linear-gradient(0deg, rgba(5,1,15,.42), transparent 60%); }
.preview-news-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.75); transition: transform .25s ease, filter .25s ease; }
.preview-news-art span { position: absolute; z-index: 1; right: 24px; bottom: 22px; color: #fff; font-size: 23px; font-weight: 900; line-height: .85; letter-spacing: -1px; text-align: right; text-shadow: 0 0 14px rgba(88,221,255,.75); }
.preview-news-art:hover img, .preview-news-art:focus-visible img { transform: scale(1.04); filter: saturate(1.1) brightness(.9); }
.preview-picks, .preview-world { padding: 46px 0; border-top: 1px solid #292b4d; }
.preview-section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.preview-section-head > p { max-width: 390px; margin: 0; color: #7777a0; font-size: 9px; line-height: 1.6; text-align: right; text-transform: uppercase; }
.preview-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.preview-pick { overflow: hidden; border: 1px solid #34365e; border-radius: 15px; background: rgba(13,7,36,.88); box-shadow: 0 15px 40px rgba(0,0,0,.25); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.preview-pick:hover { transform: translateY(-5px); border-color: var(--pick-accent); box-shadow: 0 0 28px color-mix(in srgb, var(--pick-accent) 26%, transparent), 0 20px 45px rgba(0,0,0,.38); }
.preview-pick-image { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #020106; }
.preview-pick-image::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(5,1,15,.88)); }
.preview-pick-image img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .25s ease, filter .25s ease; }
.preview-pick:hover img { transform: scale(1.035); filter: saturate(1.15); }
.preview-pick-number { position: absolute; z-index: 2; left: 13px; top: 12px; color: #fff; font-size: 11px; font-weight: 900; text-shadow: 0 0 9px var(--pick-accent); }
.preview-pick-play { position: absolute; z-index: 2; right: 14px; bottom: 12px; color: var(--pick-accent); font-size: 10px; font-weight: 900; letter-spacing: 1px; text-shadow: 0 0 8px var(--pick-accent); }
.preview-pick-copy { padding: 19px 19px 22px; }
.preview-pick-copy > p:first-child { display: flex; justify-content: space-between; margin: 0 0 8px; color: var(--pick-accent); font-size: 8px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.preview-pick-copy h3 { margin: 0; color: #fff; font-size: 19px; letter-spacing: -.5px; }
.preview-pick-copy > p:last-child { margin: 11px 0 0; color: #9999bd; font-size: 10px; line-height: 1.65; }
.preview-text-link { display: inline-block; margin-top: 28px; color: var(--neon); font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 0 8px rgba(57,255,20,.42); }
.preview-text-link:hover, .preview-text-link:focus-visible { color: #fff; }
.preview-ranked {
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 50px;
  overflow: hidden; margin: var(--block-gap) 0 0; padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(255,207,63,.48); border-radius: 18px;
  background: radial-gradient(circle at 82% 30%, rgba(255,207,63,.11), transparent 32%), linear-gradient(145deg, rgba(15,7,38,.98), rgba(4,2,15,.98));
  box-shadow: 0 20px 55px rgba(0,0,0,.35), 0 0 30px rgba(255,207,63,.06);
}
.preview-ranked h2 { max-width: 650px; margin: 8px 0 16px; color: #fff; font-size: clamp(31px, 4.5vw, 52px); line-height: 1; letter-spacing: -2px; }
.preview-ranked-copy > p:not(.preview-section-kicker) { max-width: 670px; margin: 0; color: #b8b8d1; font-size: 12px; line-height: 1.75; }
.preview-ranked-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.preview-ranked-points span { padding: 7px 9px; color: #d9d9e8; border: 1px solid #363a60; border-radius: 6px; background: rgba(0,0,0,.24); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.preview-ranked-points b { margin-right: 5px; color: #ffcf3f; }
.preview-ranked-board { padding: 24px; border: 2px solid #ffcf3f; border-radius: 12px; background: #020106; box-shadow: 0 0 25px rgba(255,207,63,.14), inset 0 0 35px rgba(255,207,63,.035); transform: rotate(1.5deg); }
.preview-ranked-board small, .preview-ranked-board > strong, .preview-ranked-board > i { display: block; text-align: center; }
.preview-ranked-board small { color: #58ddff; font-size: 8px; letter-spacing: 2px; }
.preview-ranked-board > strong { margin: 9px 0 18px; color: #ffcf3f; font-size: 26px; text-shadow: 0 0 12px rgba(255,207,63,.45); }
.preview-ranked-board ol { margin: 0; padding: 0; list-style: none; }
.preview-ranked-board li { display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px dotted #34375b; font-size: 9px; }
.preview-ranked-board li b { color: #ff5b92; }.preview-ranked-board li span { color: #fff; }.preview-ranked-board li em { color: var(--neon); font-style: normal; }
.preview-ranked-board > i { margin-top: 18px; color: var(--neon); font-size: 8px; font-style: normal; letter-spacing: 2px; }
.preview-world-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.preview-world-card {
  --world-accent: #d99aff; position: relative; overflow: hidden; min-height: 260px; padding: 28px 45% 28px 28px;
  border: 1px solid #35375d; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--world-accent) 10%, #0d0724), #080316);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.preview-world-card:hover, .preview-world-card:focus-visible { transform: translateY(-3px); border-color: var(--world-accent); box-shadow: 0 0 25px color-mix(in srgb, var(--world-accent) 20%, transparent); }
.preview-world-tech { --world-accent: #ffcf3f; }.preview-world-stats { --world-accent: var(--neon); }.preview-world-help { --world-accent: #58ddff; }
.preview-world-image { position: absolute; z-index: 0; inset: 0 0 0 auto; display: block; width: 42%; overflow: hidden; }
.preview-world-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0b061e, transparent 48%), linear-gradient(0deg, rgba(5,1,15,.35), transparent 55%); }
.preview-world-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.8); transition: transform .25s ease, filter .25s ease; }
.preview-world-card:hover .preview-world-image img, .preview-world-card:focus-visible .preview-world-image img { transform: scale(1.045); filter: saturate(1.12) brightness(.95); }
.preview-world-icon { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 22px; color: #05010f; border-radius: 50%; background: var(--world-accent); box-shadow: 0 0 16px color-mix(in srgb, var(--world-accent) 55%, transparent); font-weight: 900; }
.preview-world-card > :not(.preview-world-image) { position: relative; z-index: 1; }
.preview-world-card small { color: var(--world-accent); font-size: 8px; font-weight: 900; letter-spacing: 1.5px; }
.preview-world-card h3 { margin: 7px 0 11px; color: #fff; font-size: 22px; }
.preview-world-card p { max-width: 490px; margin: 0; color: #9999bd; font-size: 10px; line-height: 1.7; }
.preview-world-card b { display: block; margin-top: 22px; color: var(--world-accent); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.preview-world { padding-bottom: 14px; }
.preview-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin: 14px 0 0; padding: 24px 32px; border: 1px solid rgba(57,255,20,.35); border-radius: 14px; background: radial-gradient(circle at 85% 50%, rgba(57,255,20,.12), transparent 32%), rgba(13,7,36,.85); box-shadow: 0 0 35px rgba(57,255,20,.06); }
.preview-final-cta h2 { font-size: clamp(27px, 3.7vw, 43px); }
.preview-final-cta .preview-section-kicker { margin-bottom: 8px; }
.preview-final-cta .preview-button { padding: 12px 18px; }
.preview-shell > .arcade-footer { margin-top: var(--block-gap); }
.preview-final-cta + .preview-membership { margin-top: var(--block-gap); }

/* ---------------- Membership landing ---------------- */
.membership-landing-page { background: radial-gradient(circle at 75% 8%, rgba(255,177,0,.11), transparent 30%), radial-gradient(circle at 15% 45%, rgba(88,221,255,.07), transparent 28%), #05010f; }
.membership-landing-shell { width: min(1180px, 100%); margin: 0 auto; padding: 30px 24px 64px; }
.membership-landing-hero { position: relative; min-height: 610px; overflow: hidden; border: 1px solid rgba(255,207,63,.52); border-radius: 24px; background: #05010f; box-shadow: 0 28px 80px rgba(0,0,0,.5), 0 0 50px rgba(255,207,63,.09); }
.membership-landing-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(5,1,15,.99) 0%, rgba(5,1,15,.9) 39%, rgba(5,1,15,.18) 78%), linear-gradient(0deg, rgba(5,1,15,.6), transparent 45%); }
.membership-landing-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.membership-landing-copy { position: relative; z-index: 1; display: flex; min-height: 610px; max-width: 610px; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(32px, 7vw, 82px); }
.membership-landing-copy h1 { margin: 10px 0 22px; color: #fff; font-size: clamp(54px, 8vw, 94px); line-height: .82; letter-spacing: -6px; text-shadow: 0 8px 30px rgba(0,0,0,.75); }
.membership-landing-copy h1 span { display: block; color: #ffcf3f; text-shadow: 0 0 24px rgba(255,207,63,.38); }
.membership-landing-lead { max-width: 540px; margin: 0; color: #dedeee; font-size: 15px; line-height: 1.75; }
.membership-landing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
/* Same section rhythm as the homepage: 46px of breathing room and a hairline rule
   between sections. The first section after the hero carries no rule, exactly as
   .preview-intro doesn't. */
.membership-benefits, .membership-plans { padding: 46px 0; }
.membership-plans { border-top: 1px solid #292b4d; }
.membership-benefits > header, .membership-plans > header { max-width: 760px; margin-bottom: 30px; }
.membership-benefits h2, .membership-plans h2, .membership-final-cta h2 { margin: 7px 0 12px; color: #fff; font-size: clamp(31px, 4.7vw, 52px); line-height: 1; letter-spacing: -2px; }
.membership-benefits header > p:last-child, .membership-plans header > p:last-child, .membership-final-cta p { color: #aaaac7; font-size: 12px; line-height: 1.7; }
.membership-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.membership-benefit-grid article { padding: 24px; border: 1px solid #33375d; border-radius: 14px; background: linear-gradient(145deg, rgba(17,9,44,.95), rgba(5,2,17,.95)); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.membership-benefit-grid article:hover { transform: translateY(-4px); border-color: rgba(88,221,255,.55); box-shadow: 0 16px 35px rgba(0,0,0,.3), 0 0 22px rgba(88,221,255,.08); }
.membership-benefit-grid article > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(88,221,255,.28); border-radius: 11px; background: rgba(88,221,255,.07); font-size: 20px; }
.membership-benefit-grid h3 { margin: 17px 0 8px; color: #fff; font-size: 16px; }
.membership-benefit-grid p { margin: 0; color: #9f9fbd; font-size: 10px; line-height: 1.7; }
.membership-landing-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.membership-landing-products article { display: flex; min-height: 290px; flex-direction: column; padding: 25px; border: 1px solid #353960; border-radius: 15px; background: rgba(9,5,28,.9); }
.membership-landing-products article.featured { border-color: rgba(255,207,63,.7); background: radial-gradient(circle at 80% 0, rgba(255,207,63,.13), transparent 35%), rgba(9,5,28,.94); box-shadow: 0 0 28px rgba(255,207,63,.08); }
.membership-landing-products small { color: #58ddff; font-size: 8px; font-weight: 900; letter-spacing: 1.5px; }
.membership-landing-products .featured small, .membership-landing-products .featured strong { color: #ffcf3f; }
.membership-landing-products h3 { margin: 10px 0 9px; color: #fff; font-size: 19px; }
.membership-landing-products p { margin: 0; color: #aaaac5; font-size: 10px; line-height: 1.65; }
.membership-landing-products strong { margin-top: auto; padding-top: 24px; color: #58ddff; font-size: 27px; }
.membership-landing-products strong span { color: #aaaac5; font-size: 9px; }
.membership-landing-products a { margin-top: 17px; padding: 11px; color: #07100a; border-radius: 7px; background: var(--neon); font-size: 9px; font-weight: 900; letter-spacing: .7px; text-align: center; text-transform: uppercase; }
.membership-plans > .membership-billing-identity { max-width: 820px; margin-top: 20px; }
.membership-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: 14px 0 0; padding: 35px; border: 1px solid rgba(57,255,20,.36); border-radius: 18px; background: radial-gradient(circle at 82% 50%, rgba(57,255,20,.13), transparent 36%), rgba(12,6,34,.94); }
.membership-final-cta h2, .membership-final-cta p { margin-top: 6px; margin-bottom: 0; }
.membership-landing-shell > .arcade-footer { margin-top: var(--block-gap); }
.preview-games-shell { width: min(1180px, 100%); padding: 30px 24px 64px; }
.preview-games-hero { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding: 20px 0 40px; }
.preview-games-hero > div:first-child { max-width: 720px; }
.preview-games-hero h1 { margin: 0; color: #fff; font-size: clamp(48px, 8vw, 86px); line-height: .9; letter-spacing: -5px; }
.preview-games-hero > div:first-child > p:not(.preview-section-kicker):not(.preview-games-coming-soon) { max-width: 650px; margin: 22px 0 0; color: #aaaaca; font-size: 13px; line-height: 1.75; }
.preview-games-coming-soon { margin-top: 14px; }
.preview-games-count { display: flex; align-items: center; gap: 13px; padding: 16px 19px; border: 1px solid rgba(57,255,20,.38); border-radius: 12px; background: rgba(57,255,20,.055); box-shadow: 0 0 20px rgba(57,255,20,.08); }
.preview-games-count strong { color: var(--neon); font-size: 28px; text-shadow: 0 0 10px rgba(57,255,20,.55); }
.preview-games-count span { color: #aaaaca; font-size: 8px; line-height: 1.5; letter-spacing: 1px; text-transform: uppercase; }
.preview-library-controls { position: sticky; top: 65px; z-index: 20; margin: 0 0 16px; backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }

@media (max-width: 900px) {
  .preview-hero { grid-template-columns: 1fr; }
  .preview-hero-art { width: min(480px, 100%); min-height: 340px; margin: -10px auto 0; }
  .preview-pick-grid { grid-template-columns: 1fr; }
  .preview-pick { display: grid; grid-template-columns: minmax(220px, .85fr) 1.15fr; }
  .preview-pick-image { height: 100%; aspect-ratio: auto; }
  .preview-membership { grid-template-columns: 1fr; }
  .preview-membership > img { grid-column: 1; grid-row: 1; min-height: 270px; max-height: 340px; }
  .preview-membership > div { grid-column: 1; grid-row: 2; margin-top: -90px; padding-top: 120px; background: linear-gradient(0deg, #080318 75%, transparent); }
  .preview-news { grid-template-columns: 1fr 1fr; }
  .preview-ranked { grid-template-columns: 1fr; }
  .preview-ranked-board { width: min(430px, 100%); transform: none; }
  .membership-benefit-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .preview-shell { padding: 18px 13px 45px; }
  .preview-hero { min-height: 0; padding: 31px 21px; border-radius: 18px; }
  .preview-hero h1 { letter-spacing: -2px; }
  .preview-lead { font-size: 12px; }
  .preview-hero-bubbles { flex-wrap: wrap; }
  .preview-hero-art { min-height: 345px; transform: scale(.9); margin: -20px -5% -18px; width: 110%; }
  .preview-art-card { width: 165px; }
  .preview-orbit { width: 340px; height: 340px; }
  .preview-intro { grid-template-columns: 1fr; gap: 24px; padding: 48px 0 38px; }
  .preview-picks, .preview-world { padding: 40px 0; }
  .preview-world { padding-bottom: 14px; }
  .preview-section-head { display: block; }
  .preview-section-head > p { margin-top: 14px; text-align: left; }
  .preview-pick { display: grid; grid-template-columns: 118px minmax(0, 1fr); min-height: 178px; }
  .preview-pick-image { height: 100%; min-height: 178px; aspect-ratio: auto; }
  .preview-pick-image::after { inset: 55% 0 0; }
  .preview-pick-image img { object-fit: contain; padding: 6px; }
  .preview-pick:hover img { transform: none; }
  .preview-pick-copy { padding: 16px 15px 17px; }
  .preview-pick-copy h3 { font-size: 16px; }
  .preview-pick-copy > p:last-child { margin-top: 8px; font-size: 9px; line-height: 1.55; }
  .preview-pick-number { left: 9px; top: 9px; }
  .preview-pick-play { right: 8px; bottom: 9px; font-size: 8px; }
  .preview-world-grid { grid-template-columns: 1fr; }
  .preview-world-card { min-height: 0; padding: 0 23px 27px; }
  .preview-world-image { position: relative; inset: auto; width: calc(100% + 46px); height: 160px; margin: 0 -23px 24px; border-bottom: 1px solid color-mix(in srgb, var(--world-accent) 45%, #35375d); }
  .preview-world-image::after { background: linear-gradient(0deg, #0b061e, transparent 62%); }
  .preview-world-icon { margin-top: -42px; }
  .preview-final-cta { display: block; margin: 14px 0 0; padding: 22px 20px; }
  .preview-final-cta .preview-button { margin-top: 18px; }
  .preview-news { grid-template-columns: 1fr; margin-right: 4%; margin-left: 4%; }
  .preview-news-copy { grid-row: 2; }
  .preview-news-art { grid-row: 1; min-height: 190px; }
  .preview-news-art::after { background: linear-gradient(0deg, #080318, transparent 55%); }
  .preview-games-shell { padding-right: 20px; padding-left: 20px; }
  .preview-games-hero { display: block; padding: 18px 0 30px; }
  .preview-games-hero h1 { letter-spacing: -3px; }
  .preview-games-count { width: max-content; margin-top: 25px; }
  .preview-library-controls { top: 62px; }
}
@media (max-width: 430px) {
  .preview-hero-art { min-height: 310px; }
  .preview-art-card { width: 140px; }
  .preview-art-card-1 { left: 0; }.preview-art-card-2 { right: -2%; }.preview-art-card-3 { left: 22%; }
  .preview-orbit { width: 280px; height: 280px; }
  .preview-pick { grid-template-columns: 106px minmax(0, 1fr); }
  .membership-landing-shell { padding: 16px 12px 42px; }
  .membership-landing-hero, .membership-landing-copy { min-height: 570px; }
  .membership-landing-hero::after { background: linear-gradient(0deg, rgba(5,1,15,.99) 15%, rgba(5,1,15,.8) 68%, rgba(5,1,15,.24)); }
  .membership-landing-hero > img { object-position: 68% center; }
  .membership-landing-copy { justify-content: flex-end; padding: 30px 24px 44px; }
  .membership-landing-copy h1 { font-size: 55px; letter-spacing: -4px; }
  .membership-landing-lead { font-size: 12px; }
  .membership-benefits, .membership-plans { padding: 40px 0; }
  .membership-benefit-grid, .membership-landing-products { grid-template-columns: 1fr; }
  .membership-final-cta { display: block; margin: 14px 0 0; padding: 25px 21px; }
  .membership-final-cta .preview-button { margin-top: 20px; }
}

/* ---------------- Primary site navigation ---------------- */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(5,1,15,.98), rgba(13,7,36,.9));
  border-bottom: 2px solid #2a2f52; box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.site-nav-inner {
  position: relative; max-width: 1280px; margin: 0 auto; padding: 9px 20px;
  display: flex; align-items: center; gap: 16px;
}
.site-nav-brand { display: inline-flex; align-items: center; }
.site-nav-brand img {
  height: 30px; width: auto; display: block;
  filter: drop-shadow(0 0 8px rgba(255,43,107,.5));
}
.site-nav-check { position: absolute; opacity: 0; pointer-events: none; }
.site-nav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav-links a {
  --menu-accent: var(--neon); --menu-bg: rgba(57,255,20,.08);
  --menu-glow: rgba(57,255,20,.28); --menu-edge: rgba(57,255,20,.45);
  --menu-text-glow: rgba(57,255,20,.7);
  padding: 8px 13px; border-radius: 8px; color: var(--ink);
  font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease,
    text-shadow .15s ease, transform .15s ease;
}
.site-nav-links a[href="/"] {
  --menu-accent: #ff5b92; --menu-bg: rgba(255,43,107,.09);
  --menu-glow: rgba(255,43,107,.3); --menu-edge: rgba(255,43,107,.48);
  --menu-text-glow: rgba(255,43,107,.72);
}
.site-nav-links a[href="/history"] {
  --menu-accent: #d99aff; --menu-bg: rgba(200,107,255,.09);
  --menu-glow: rgba(200,107,255,.3); --menu-edge: rgba(200,107,255,.48);
  --menu-text-glow: rgba(200,107,255,.72);
}
.site-nav-links a[href="/technology"] {
  --menu-accent: #ffcf3f; --menu-bg: rgba(255,207,63,.09);
  --menu-glow: rgba(255,207,63,.3); --menu-edge: rgba(255,207,63,.48);
  --menu-text-glow: rgba(255,207,63,.7);
}
.site-nav-links a[href="/statistics"],
.site-nav-links a[href="/games"] {
  --menu-accent: var(--neon); --menu-bg: rgba(57,255,20,.08);
  --menu-glow: rgba(57,255,20,.28); --menu-edge: rgba(57,255,20,.45);
  --menu-text-glow: rgba(57,255,20,.7);
}
.site-nav-links a[href="/faq"] {
  --menu-accent: #58ddff; --menu-bg: rgba(44,214,255,.09);
  --menu-glow: rgba(44,214,255,.3); --menu-edge: rgba(44,214,255,.48);
  --menu-text-glow: rgba(44,214,255,.72);
}
.site-nav-links a.is-active { color: var(--menu-accent); box-shadow: inset 0 -2px 0 var(--menu-accent); }
.site-nav-links a:hover,
.site-nav-links a:focus-visible {
  color: #fff; background: var(--menu-bg);
  box-shadow: 0 0 17px var(--menu-glow), inset 0 0 0 1px var(--menu-edge);
  text-shadow: 0 0 7px var(--menu-text-glow); transform: translateY(-1px);
}
.site-nav-links a.is-active:hover,
.site-nav-links a.is-active:focus-visible {
  box-shadow: 0 0 17px var(--menu-glow), inset 0 -2px 0 var(--menu-accent),
    inset 0 0 0 1px var(--menu-edge);
}
.site-nav-links a:focus-visible { outline: 2px solid var(--menu-accent); outline-offset: 3px; }
.site-nav-links .site-nav-membership-cta { --menu-accent: #ffcf3f; --menu-bg: rgba(255,207,63,.12); --menu-glow: rgba(255,207,63,.36); --menu-edge: rgba(255,207,63,.7); --menu-text-glow: rgba(255,207,63,.78); color: #ffcf3f; border: 1px solid rgba(255,207,63,.55); background: rgba(255,207,63,.07); font-size: 9px; letter-spacing: .55px; white-space: nowrap; }
.membership-cta-float {
  position: fixed; z-index: 55; left: 50%; bottom: 18px;
  width: min(435px, calc(100vw - 72px)); transform: translateX(-50%);
  cursor: grab; touch-action: none; user-select: none;
}
.mobile-membership-cta {
  display: block; width: 100%; padding: 14px 20px;
  color: #09030e; border: 1px solid #ffdf72; border-radius: 9px;
  background: linear-gradient(90deg, #ffcf3f, #39ff14);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 22px rgba(57,255,20,.25);
  font-size: 11px; font-weight: 900; letter-spacing: .8px; text-align: center;
  text-transform: uppercase;
  transition: box-shadow .15s ease, filter .15s ease, transform .15s ease;
}
.mobile-membership-cta:hover,
.mobile-membership-cta:focus-visible {
  color: #09030e; filter: brightness(1.08);
  box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 30px rgba(57,255,20,.36);
  transform: translateY(-2px);
}
.mobile-membership-cta:focus-visible { outline: 3px solid #58ddff; outline-offset: 3px; }
.membership-cta-float.is-dragging { cursor: grabbing; }
.membership-cta-float.is-dragging .mobile-membership-cta {
  filter: brightness(1.06); box-shadow: 0 14px 38px rgba(0,0,0,.58), 0 0 30px rgba(57,255,20,.34);
}
.membership-landing-page .membership-cta-float,
.account-body .membership-cta-float,
.play-body .membership-cta-float { display: none; }
.site-nav-sound-toggle {
  display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; padding: 0;
  color: #58ddff; border: 1px solid rgba(88,221,255,.48); border-radius: 8px; background: rgba(4,1,13,.72);
  box-shadow: 0 0 12px rgba(88,221,255,.12); cursor: pointer; font: 15px/1 sans-serif;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.site-nav-sound-toggle:hover, .site-nav-sound-toggle:focus-visible { color: #fff; border-color: #58ddff; box-shadow: 0 0 16px rgba(88,221,255,.34); transform: translateY(-1px); }
.site-nav-sound-toggle:focus-visible { outline: 2px solid #58ddff; outline-offset: 3px; }
.site-nav-sound-toggle[aria-pressed="true"] { color: #ff5b92; border-color: rgba(255,91,146,.55); box-shadow: 0 0 12px rgba(255,43,107,.18); }

/* Hamburger — hidden on desktop */
.site-nav-burger {
  display: none; margin-left: auto; width: 44px; height: 40px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  border: 2px solid #2a2f52; border-radius: 8px; cursor: pointer; background: rgba(0,0,0,.3);
}
.site-nav-burger span {
  display: block; width: 20px; height: 2px; background: var(--neon); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

@media (max-width: 720px) {
  .site-nav-sound-toggle { margin-left: auto; width: 38px; height: 38px; flex-basis: 38px; }
  .site-nav-burger { display: inline-flex; margin-left: 0; }
  .site-nav-links {
    position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(5,1,15,.99); border-bottom: 2px solid #2a2f52;
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
  }
  .site-nav-check:checked ~ .site-nav-links { max-height: 75vh; }
  .site-nav-links a { padding: 15px 20px; border-top: 1px solid #24284a; border-radius: 0; }
  .site-nav-links a.is-active { box-shadow: inset 3px 0 0 var(--menu-accent); }
  .site-nav-links .site-nav-membership-cta { font-size: 10px; text-align: center; }
  .membership-cta-float {
    right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px;
    width: auto; transform: none; cursor: auto; touch-action: auto; user-select: auto;
  }
  .mobile-membership-cta { padding: 13px 16px; font-size: 10px; letter-spacing: .65px; transform: none; }
  .mobile-membership-cta:hover, .mobile-membership-cta:focus-visible { transform: translateY(-2px); }
  body:not(.membership-landing-page):not(.account-body):not(.play-body) .comments-bubble-wrap { bottom: max(72px, calc(env(safe-area-inset-bottom) + 72px)); }
  .site-nav-check:checked ~ .site-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav-check:checked ~ .site-nav-burger span:nth-child(2) { opacity: 0; }
  .site-nav-check:checked ~ .site-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
.site-nav-links a[href="/scores"] {
  --menu-accent: #ffcf3f; --menu-bg: rgba(255,207,63,.09);
  --menu-glow: rgba(255,207,63,.3); --menu-edge: rgba(255,207,63,.48);
  --menu-text-glow: rgba(255,207,63,.7);
}

/* ---------------- Pac-Man high scores ---------------- */
.scores-preview-shell { width: min(1180px, 100%); padding: 30px 24px 64px; }
.scores-preview-hero { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: center; gap: 60px; padding: 34px 0 38px; }
.scores-preview-copy h1 { margin: 0; color: #fff; font-size: clamp(56px, 9vw, 102px); line-height: .82; letter-spacing: -6px; }
.scores-preview-copy h1 span { display: block; color: #ffcf3f; text-shadow: 0 0 24px rgba(255,207,63,.35); }
.scores-preview-copy > p:not(.preview-section-kicker) { max-width: 650px; margin: 25px 0; color: #aaaaca; font-size: 13px; line-height: 1.8; }
.scores-preview-status { display: flex; flex-wrap: wrap; gap: 8px; }
.scores-preview-status span, .scores-preview-badge { padding: 7px 10px; color: #aaaaca; border: 1px solid #35395f; border-radius: 999px; background: rgba(0,0,0,.28); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.scores-preview-status span:first-child { color: #ffcf3f; border-color: rgba(255,207,63,.45); }
.scores-preview-status i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #ffcf3f; box-shadow: 0 0 8px #ffcf3f; }
.scores-preview-copy p.scores-ranked-note { max-width: 620px; margin: 0 0 24px; color: #ffcf3f; font-size: 11px; line-height: 1.7; letter-spacing: .3px; }
.ranked-play-status { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 38px; padding: 7px 18px; color: #aaaaca; border-bottom: 1px solid rgba(57,255,20,.25); background: rgba(7,20,5,.88); font-size: 9px; letter-spacing: .7px; text-transform: uppercase; }
.ranked-play-status > span:first-child { color: var(--neon); font-weight: 900; }
.ranked-play-status i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 9px var(--neon); }
.ranked-play-status b { color: #ffcf3f; font-size: 12px; }
.ranked-play-status a { color: var(--neon); }
@media (max-width: 1050px) {
  .ranked-play-status { flex-wrap: wrap; gap: 7px 14px; padding: 8px; }
}
.scores-rank-art { overflow: hidden; margin: 0; border: 1px solid rgba(88,221,255,.3); border-radius: 18px; background: radial-gradient(130% 120% at 50% 0, rgba(88,221,255,.12), rgba(6,2,16,.97) 62%); box-shadow: 0 28px 70px rgba(0,0,0,.45), 0 0 34px rgba(57,255,20,.07); transform: rotate(-1.5deg); }
.scores-rank-art img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.scores-rank-art figcaption { display: flex; flex-direction: column; padding: 6px 21px 22px; }
.scores-rank-art small, .scores-rank-art span { color: #8f8fac; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }
.scores-rank-art strong { margin: 6px 0; color: #ffcf3f; font-size: 25px; }
/* Small cabinet image sitting directly above each board's "Play ranked" badge. */
.scores-preview-play { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.scores-preview-play img { width: 68px; height: 51px; object-fit: cover; border: 1px solid #30345a; border-radius: 6px; image-rendering: pixelated; }
.scores-preview-play:hover img, .scores-preview-play:focus-visible img { border-color: rgba(57,255,20,.35); }
.scores-tabs-title { margin: 0 0 14px; color: #fff; font-size: clamp(27px, 4vw, 42px); letter-spacing: -2px; }
.scores-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.scores-tab {
  padding: 9px 15px; color: #aaaaca; border: 1px solid #30345a; border-radius: 999px;
  background: rgba(7,3,22,.8); font-size: 10px; font-weight: 800; letter-spacing: .6px;
  text-decoration: none; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.scores-tab:hover, .scores-tab:focus-visible { color: #fff; border-color: #58ddff; outline: none; }
.scores-tab.is-active { color: #ffcf3f; border-color: #ffcf3f; background: rgba(255,207,63,.08); box-shadow: 0 0 18px rgba(255,207,63,.12); }
/* Without JS every board is shown (stacked, spaced). JS reveals the tabs and
   hides all but the active board so only one is visible at a time. */
.scores-preview-board + .scores-preview-board { margin-top: 22px; }
.scores-js .scores-preview-board { display: none; }
.scores-js .scores-preview-board.is-active { display: block; }
.scores-js .scores-preview-board + .scores-preview-board { margin-top: 0; }
.scores-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.scores-pager-btn {
  min-width: 74px; padding: 8px 14px; color: #d9d9ec; border: 1px solid #34395f; border-radius: 7px;
  background: rgba(0,0,0,.28); font: 900 9px/1 "Courier New", monospace; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer; transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.scores-pager-btn:hover:not(:disabled), .scores-pager-btn:focus-visible:not(:disabled) { color: #fff; border-color: #58ddff; outline: none; box-shadow: 0 0 14px rgba(88,221,255,.15); }
.scores-pager-btn:disabled { opacity: .4; cursor: default; }
.scores-pager-status { color: #82829d; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.scores-preview-board { padding: 30px; border: 1px solid #30345a; border-radius: 18px; background: linear-gradient(145deg, rgba(16,8,40,.96), rgba(4,1,14,.96)); }
.scores-preview-board > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 25px; border-bottom: 1px solid #2a2e50; }
.scores-preview-board h2, .scores-preview-rules h2 { margin: 6px 0 0; color: #fff; font-size: clamp(27px, 4vw, 42px); letter-spacing: -2px; }
.scores-preview-badge { color: var(--neon); border-color: rgba(57,255,20,.35); }
.scores-preview-empty { padding: 65px 20px; text-align: center; }
.scores-preview-empty > span { font-size: 42px; filter: drop-shadow(0 0 14px rgba(255,207,63,.3)); }
.scores-preview-empty h3 { margin: 18px 0 8px; color: #fff; font-size: 17px; }
.scores-preview-empty p { max-width: 560px; margin: auto; color: #9292ae; font-size: 10px; line-height: 1.7; }
.scores-preview-table { width: 100%; margin-top: 20px; border-collapse: collapse; }
.scores-preview-table th, .scores-preview-table td { padding: 13px; text-align: left; border-bottom: 1px solid #252947; }
.scores-preview-table th { color: #82829d; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }
.scores-preview-table td:nth-child(1) { width: 70px; color: #ffcf3f; font-weight: 900; }
.scores-preview-table td:nth-child(3) { color: #fff; font-size: 15px; font-weight: 900; }
.scores-preview-table td:last-child { color: var(--neon); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.score-player { display: inline-flex; align-items: center; gap: 10px; color: #e8e8f4; }
.score-presence { width: 9px; height: 9px; flex: 0 0 9px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.score-presence-playing { background: #45ff54; box-shadow: 0 0 9px rgba(69,255,84,.8); animation: presence-pulse 1.8s ease-in-out infinite; }
.score-presence-online { background: #ffd43b; box-shadow: 0 0 8px rgba(255,212,59,.65); }
.score-presence-offline { background: #ff405d; box-shadow: 0 0 7px rgba(255,64,93,.45); }
.score-player-avatar { box-sizing: border-box; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #3a3e67; border-radius: 6px; background: #070210; object-fit: cover; box-shadow: 0 3px 0 #030108; }
.score-player-avatar.avatar-site-character { object-fit: contain; padding: 6px; }
.score-player strong { font-size: 12px; overflow-wrap: anywhere; }
.scores-preview-table time { white-space: nowrap; }
.scores-preview-table time span { margin-left: 5px; color: #a9a9c3; font-size: 10px; }
.scores-preview-table tbody tr:first-child { background: linear-gradient(90deg, rgba(255,207,63,.08), transparent 70%); }
.scores-preview-table tbody tr:hover { background-color: rgba(88,221,255,.035); }
.scores-preview-rules { padding: 65px 0 0; }
.scores-preview-rules > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.scores-preview-rules article { padding: 22px; border: 1px solid #30345a; border-radius: 13px; background: rgba(9,4,25,.78); }
.scores-preview-rules article b { color: #ffcf3f; font-size: 10px; }
.scores-preview-rules article h3 { margin: 14px 0 8px; color: #fff; font-size: 14px; }
.scores-preview-rules article p { margin: 0; color: #9292ae; font-size: 9px; line-height: 1.7; }
@media (max-width: 760px) {
  .scores-preview-hero { grid-template-columns: 1fr; gap: 35px; }
  .scores-preview-copy h1 { letter-spacing: -4px; }
  .scores-rank-art { width: min(340px, 100%); transform: none; }
  .scores-preview-board > header { display: block; }
  .scores-preview-play { display: inline-flex; margin-top: 15px; }
  .scores-preview-table-wrap { overflow-x: auto; margin-inline: -12px; padding-inline: 12px; }
  .scores-preview-table { min-width: 620px; }
  .scores-preview-rules > div { grid-template-columns: 1fr 1fr; }
}

.play-mode-switch {
  display: flex; align-items: stretch; justify-content: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid #272c4e; background: rgba(5,2,17,.96);
}
.play-mode-switch a {
  display: grid; min-width: 210px; grid-template-columns: 30px 1fr; grid-template-rows: auto auto;
  align-items: center; column-gap: 9px; padding: 8px 12px; color: #aaaac4;
  border: 1px solid #34395f; border-radius: 8px; background: rgba(0,0,0,.28);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.play-mode-switch a > span { grid-row: 1 / 3; color: #737798; text-align: center; }
.play-mode-switch strong { color: #e8e8f4; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.play-mode-switch small { margin-top: 3px; color: #777795; font-size: 7px; letter-spacing: .7px; text-transform: uppercase; }
.play-mode-switch a:hover, .play-mode-switch a:focus-visible { border-color: #58ddff; outline: none; }
.play-mode-switch a.is-active { border-color: var(--neon); background: rgba(57,255,20,.07); box-shadow: 0 0 16px rgba(57,255,20,.1); }
.play-mode-switch a.is-active > span, .play-mode-switch a.is-active strong { color: var(--neon); }
@media (max-width: 560px) {
  .play-mode-switch { align-items: stretch; flex-direction: column; }
  .play-mode-switch a { min-width: 0; }
}
@media (max-width: 460px) {
  .scores-preview-rules > div { grid-template-columns: 1fr; }
}

/* ---------------- Shared arcade action buttons ---------------- */
.preview-button,
.account-button,
.admin-save,
.admin-restart-btn,
.lib-reset,
.admin-time-adjust button,
.admin-entitlements button,
.membership-history button,
.account-title-row button {
  display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 16px; border-width: 1px; border-style: solid; border-radius: 7px;
  font: 900 10px/1 "Courier New", monospace; letter-spacing: 1px; text-align: center;
  text-decoration: none; text-transform: uppercase; cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
.preview-button:hover,
.preview-button:focus-visible,
.account-button:hover,
.account-button:focus-visible,
.admin-save:hover,
.admin-save:focus-visible,
.admin-restart-btn:hover,
.admin-restart-btn:focus-visible,
.lib-reset:hover,
.lib-reset:focus-visible,
.admin-time-adjust button:hover,
.admin-time-adjust button:focus-visible,
.admin-entitlements button:hover,
.admin-entitlements button:focus-visible,
.membership-history button:hover,
.membership-history button:focus-visible,
.account-title-row button:hover,
.account-title-row button:focus-visible {
  transform: translateY(-2px); outline: none;
}
.preview-button-primary,
.account-button-primary,
.admin-save,
.lib-reset {
  color: var(--neon); border-color: rgba(57,255,20,.62);
  background: linear-gradient(180deg, rgba(57,255,20,.09), rgba(57,255,20,.025)), #070413;
  box-shadow: inset 0 0 16px rgba(57,255,20,.035), 0 0 15px rgba(57,255,20,.11);
}
.preview-button-primary:hover,
.preview-button-primary:focus-visible,
.account-button-primary:hover,
.account-button-primary:focus-visible,
.admin-save:hover,
.admin-save:focus-visible,
.lib-reset:hover,
.lib-reset:focus-visible {
  color: #061000; border-color: #a8ff98; background: var(--neon);
  box-shadow: 0 0 27px rgba(57,255,20,.38);
}
.preview-button-secondary,
.account-button,
.admin-time-adjust button,
.admin-entitlements button {
  color: #e8fbff; border-color: rgba(88,221,255,.58); background: rgba(88,221,255,.08);
  box-shadow: inset 0 0 14px rgba(88,221,255,.035);
}
.preview-button-secondary:hover,
.preview-button-secondary:focus-visible,
.account-button:hover,
.account-button:focus-visible,
.admin-time-adjust button:hover,
.admin-time-adjust button:focus-visible,
.admin-entitlements button:hover,
.admin-entitlements button:focus-visible {
  color: #fff; border-color: #58ddff; background: rgba(88,221,255,.14);
  box-shadow: 0 0 20px rgba(88,221,255,.24);
}
.account-button-danger,
.admin-restart-btn,
.membership-history button,
.account-title-row button {
  color: #ffe3ec; border-color: rgba(255,91,146,.7); background: rgba(255,43,107,.1);
  box-shadow: inset 0 0 14px rgba(255,43,107,.035);
}
.account-button-danger:hover,
.account-button-danger:focus-visible,
.admin-restart-btn:hover,
.admin-restart-btn:focus-visible,
.membership-history button:hover,
.membership-history button:focus-visible,
.account-title-row button:hover,
.account-title-row button:focus-visible {
  color: #fff; border-color: #ff5c8a; background: rgba(255,43,107,.2);
  box-shadow: 0 0 20px rgba(255,91,146,.24);
}
.account-button-primary {
  color: var(--neon); border-color: rgba(57,255,20,.62);
  background: linear-gradient(180deg, rgba(57,255,20,.09), rgba(57,255,20,.025)), #070413;
  box-shadow: inset 0 0 16px rgba(57,255,20,.035), 0 0 15px rgba(57,255,20,.11);
}
.account-button-primary:hover,
.account-button-primary:focus-visible {
  color: #061000; border-color: #a8ff98; background: var(--neon);
  box-shadow: 0 0 27px rgba(57,255,20,.38);
}
.membership-landing-products a {
  display: inline-flex; min-height: 42px; align-items: center; justify-content: center;
  padding: 10px 16px; color: var(--neon); border: 1px solid rgba(57,255,20,.62);
  border-radius: 7px; background: linear-gradient(180deg, rgba(57,255,20,.09), rgba(57,255,20,.025)), #070413;
  box-shadow: inset 0 0 16px rgba(57,255,20,.035), 0 0 15px rgba(57,255,20,.11);
  font: 900 10px/1 "Courier New", monospace; letter-spacing: 1px; text-transform: uppercase;
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.membership-landing-products a:hover, .membership-landing-products a:focus-visible {
  color: #061000; border-color: #a8ff98; background: var(--neon);
  box-shadow: 0 0 27px rgba(57,255,20,.38); transform: translateY(-2px); outline: none;
}
.membership-pay-buttons button {
  min-height: 42px; border-radius: 7px; font: 900 10px/1 "Courier New", monospace;
  letter-spacing: .7px; text-transform: uppercase;
  transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
.admin-save:disabled,
.membership-pay-buttons button:disabled {
  transform: none; box-shadow: none;
}

/* ============================================================
   NEWS — public newsstand (list + article) and admin console
   ============================================================ */
/* Same box as .menu-page-shell so an article lines up with every other page. */
.news-page, .news-article-page {
  position: relative; z-index: 1;
  width: min(1180px, 100%); max-width: 1180px; margin: 0 auto; padding: 30px 24px 64px;
}
.news-hero {
  text-align: center; margin: 0 auto; max-width: 760px;
}
.news-hero h1 {
  margin: 6px 0 12px; font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: 1px;
  color: var(--ink); text-shadow: 0 0 22px rgba(43,214,255,.35);
}
.news-hero p { color: var(--muted); line-height: 1.7; margin: 0; }

/* --- meta line, chips, dates --- */
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.news-chip {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font: 900 .68rem/1 "Courier New", monospace; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.16); color: #05010f; white-space: nowrap;
}
.news-chip-mini { padding: 3px 9px; font-size: .6rem; }
.news-chip-update  { background: linear-gradient(90deg,#39ff14,#2bd6ff); box-shadow: 0 0 14px rgba(57,255,20,.35); }
.news-chip-game    { background: linear-gradient(90deg,#ffd83d,#ff8a3d); box-shadow: 0 0 14px rgba(255,138,61,.35); }
.news-chip-feature { background: linear-gradient(90deg,#2bd6ff,#7a5cff); box-shadow: 0 0 14px rgba(122,92,255,.35); color: #fff; }
.news-chip-event   { background: linear-gradient(90deg,#ff2b6b,#ff8a3d); box-shadow: 0 0 14px rgba(255,43,107,.35); color: #fff; }
.news-date, .news-readtime {
  font: 700 .74rem/1 "Courier New", monospace; letter-spacing: .5px; color: var(--muted);
}
.news-readtime::before { content: "· "; }
.news-readmore {
  display: inline-block; margin-top: auto; font-weight: 900; letter-spacing: .6px;
  color: var(--neon); text-transform: uppercase; font-size: .78rem;
  transition: transform .15s ease, filter .15s ease;
}

/* --- featured card --- */
.news-featured { margin-bottom: 30px; }
.news-featured-card {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
  border: 1px solid rgba(43,214,255,.28); border-radius: 20px; overflow: hidden;
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 44px rgba(0,0,0,.45); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.news-featured-card:hover {
  transform: translateY(-4px); border-color: rgba(57,255,20,.5);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 30px rgba(43,214,255,.22);
}
.news-featured-media {
  position: relative; min-height: 280px;
  background-color: #0d0724; background-size: cover; background-position: center;
  background-image: radial-gradient(circle at 30% 20%, rgba(43,214,255,.22), transparent 60%),
                    radial-gradient(circle at 80% 80%, rgba(57,255,20,.16), transparent 55%);
}
.news-featured-flag, .news-card-cat, .news-featured-media .news-featured-flag {
  position: absolute; top: 14px; left: 14px;
}
.news-featured-flag {
  padding: 5px 12px; border-radius: 999px; background: var(--bg); color: var(--neon);
  border: 1px solid rgba(57,255,20,.5); font: 900 .66rem/1 "Courier New", monospace;
  letter-spacing: 1.5px; box-shadow: 0 0 16px rgba(57,255,20,.4);
}
.news-featured-body {
  display: flex; flex-direction: column; padding: 30px 32px; gap: 6px;
}
.news-featured-body h2 {
  margin: 4px 0 8px; font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.2; color: var(--ink);
}
.news-featured-body p { color: var(--muted); line-height: 1.7; margin: 0 0 18px; }

/* --- card grid --- */
.news-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
  margin-bottom: 0;
}
.news-card {
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.09); border-radius: 16px; overflow: hidden;
  background: rgba(255,255,255,.03); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.news-card:hover {
  transform: translateY(-4px); border-color: rgba(43,214,255,.45);
  box-shadow: 0 16px 38px rgba(0,0,0,.5), 0 0 22px rgba(43,214,255,.18);
}
.news-card:hover .news-readmore { transform: translateX(3px); filter: brightness(1.15); }
.news-card-media {
  position: relative; height: 150px;
  background-color: #0d0724; background-size: cover; background-position: center;
  background-image: radial-gradient(circle at 25% 25%, rgba(122,92,255,.22), transparent 60%),
                    radial-gradient(circle at 80% 70%, rgba(43,214,255,.18), transparent 55%);
}
.news-card-cat {
  padding: 4px 10px; border-radius: 999px;
  font: 900 .62rem/1 "Courier New", monospace; letter-spacing: 1px; text-transform: uppercase;
  color: #05010f; border: 1px solid rgba(255,255,255,.16);
}
.news-card-cat.news-chip-feature, .news-card-cat.news-chip-event { color: #fff; }
.news-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.news-card-body h3 { margin: 2px 0 0; font-size: 1.12rem; line-height: 1.25; color: var(--ink); }
.news-card-body p {
  margin: 0 0 12px; color: var(--muted); line-height: 1.6; font-size: .92rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- load more + archive --- */
.news-loadmore { text-align: center; margin: 4px 0 20px; }
.news-loadmore-btn, .news-archive-list a, .news-share-buttons a {
  font-family: "Courier New", monospace;
}
.news-loadmore-btn {
  display: inline-block; padding: 12px 26px; border-radius: 999px;
  border: 1px solid rgba(43,214,255,.4); color: var(--ink); font-weight: 900; letter-spacing: 1px;
  text-transform: uppercase; font-size: .8rem; transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.news-loadmore-btn:hover {
  background: rgba(43,214,255,.12); box-shadow: 0 0 20px rgba(43,214,255,.28); transform: translateY(-2px);
}
/* The archive shows newer / older side by side once it runs past one page. */
.news-loadmore-btn + .news-loadmore-btn { margin-left: 10px; }
.news-archive { margin: 8px 0 20px; }
.news-archive-title, .news-related-title {
  font-size: 1.35rem; letter-spacing: 1px; color: var(--ink); margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.news-archive-list { list-style: none; margin: 0; padding: 0; }
.news-archive-list li { border-bottom: 1px solid rgba(255,255,255,.07); }
.news-archive-list a {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 13px 6px;
  transition: background .12s ease, padding-left .12s ease;
}
.news-archive-list a:hover { background: rgba(255,255,255,.03); padding-left: 12px; }
.news-archive-date { color: var(--muted); font-size: .76rem; font-weight: 700; min-width: 96px; }
.news-archive-headline { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }

/* --- empty state --- */
.news-empty {
  text-align: center; max-width: 520px; margin: 40px auto; padding: 40px 28px;
  border: 1px dashed rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.02);
}
.news-empty-icon { font-size: 3rem; display: block; margin-bottom: 10px; }
.news-empty h2 { margin: 0 0 8px; color: var(--ink); }
.news-empty p { color: var(--muted); margin: 0; }

/* --- article (detail) page --- */
/* Full page width, matching .menu-page-shell, rather than the old 760px column. */
.news-article { max-width: none; margin: 0; }
.news-draft-banner {
  max-width: 760px; margin: 0 auto 18px; padding: 12px 18px; border-radius: 12px;
  background: rgba(255,216,61,.12); border: 1px solid rgba(255,216,61,.5); color: #ffe487;
  font-family: "Courier New", monospace; letter-spacing: .4px;
}
/* The article hero. .menu-page-hero supplies the two-column frame every other
   page uses; the artwork sits beside the copy instead of running full-bleed
   above it, and the meta, rating and share links live inside the hero. */
/* .menu-page-hero supplies the column template but not the display mode — each
   page sets that itself — so the grid is declared here. */
.news-article-hero { display: grid; margin: 0 0 var(--block-gap); }
/* The hero is a card, so the story needs clear air beneath it before it starts. */
.news-article-hero + .news-article-content { margin-top: var(--block-gap); }
.news-article-hero h1 {
  margin: 4px 0 14px; font-size: clamp(1.9rem, 4.4vw, 2.8rem); line-height: 1.15; color: var(--ink);
  text-shadow: 0 0 22px rgba(43,214,255,.28);
}
/* Without artwork the copy takes the whole hero rather than leaving a gap. */
.news-article-hero-plain.menu-page-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.news-article-lead { font-size: 1.18rem; line-height: 1.6; color: #c8c8ee; margin: 0 0 12px; }
.news-byline { color: var(--muted); font: 700 .82rem/1 "Courier New", monospace; letter-spacing: .5px; margin: 0; }

/* In-body artwork sits inside the prose with the text running alongside it,
   sides alternating down the page: first figure left, next right, and so on.
   `clear: both` is what makes them alternate rather than pair up — without it
   two consecutive figures sit side by side and squeeze the text into a column
   between them. Every figure floats, wide ones included, so no image leaves a
   band of empty page beside it. */
.news-article-content figure {
  float: left; clear: both;
  width: min(360px, 40%); max-width: 40%;
  margin: 8px 28px 22px 0;
}
.news-article-content figure:nth-of-type(even) {
  float: right; margin: 8px 0 22px 28px;
}
.news-article-content figure img {
  display: block; width: 100%; height: auto; max-height: none;
  object-fit: contain; border-radius: 10px;
}
/* Overrides the standalone sizing this figure carries for the unfloated case. */
.news-article-content .news-inline-figure { width: min(360px, 40%); margin: 8px 28px 22px 0; }
.news-article-content .news-inline-figure:nth-of-type(even) { margin: 8px 0 22px 28px; }

/* A gallery pair has no prose between its two images, so floating them can only
   end badly: side by side they squeeze the text into a gutter, and cleared they
   leave a page-tall hole beside the second one. Laid out as a plain two-up in
   the flow instead, with the text running above and below rather than around. */
/* display:contents dissolves the pair's container so each photograph floats into
   the article's own text flow rather than into a box of its own. The first goes
   left with the prose running down its right; the second clears it and goes
   right, so it lands further down the page with the prose on its left. */
.news-article-content .news-inline-gallery-wrap { display: contents; }
.news-article-content .news-inline-gallery-wrap > figure:first-child {
  float: left; clear: both; width: min(240px, 32%); max-width: 240px;
  margin: 8px 28px 22px 0;
}
/* Offset rather than cleared. A section carries roughly one image's worth of
   prose, so clearing would drop this past the last line and leave a hole; the
   top margin staggers it down the page while text still runs along its left.
   `clear: right` keeps it off any other right float without clearing the left
   one it is meant to sit below. */
.news-article-content .news-inline-gallery-wrap > figure:nth-child(2) {
  float: right; clear: right; width: min(240px, 32%); max-width: 240px;
  margin: 200px 0 22px 28px;
}
.news-article-content figure figcaption {
  margin-top: 7px; color: var(--muted); font-size: .82rem; line-height: 1.5;
}
/* Contains the floats so the share footer cannot ride up beside an image. */
.news-article-content::after { content: ""; display: block; clear: both; }

@media (max-width: 720px) {
  /* Too narrow to read alongside; the image goes back in the flow. */
  .news-article-content figure,
  .news-article-content figure:nth-of-type(even),
  .news-article-content .news-inline-figure,
  .news-article-content .news-inline-figure:nth-of-type(even) {
    float: none; width: 100%; max-width: none; margin: 22px 0;
  }
  /* One under the other, each on its own line, rather than floated. */
  .news-article-content .news-inline-gallery-wrap > figure:first-child,
  .news-article-content .news-inline-gallery-wrap > figure:nth-child(2) {
    float: none; width: 100%; max-width: none; margin: 22px 0;
  }
}

/* The repeat of the rating at the foot of the story, clear of the floats above. */
.news-article-footer-votes { clear: both; margin-top: var(--block-gap); }
.news-article-footer-votes .news-hero-votes { margin-top: 0; }

.news-hero-votes, .news-hero-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px;
}
.news-hero-votes .game-vote-form { margin: 0; }
.news-hero-votes .game-vote-button { padding: 9px 15px; font-size: 12px; }
.news-hero-votes-label, .news-hero-share-label {
  color: var(--muted); font: 900 .74rem/1 "Courier New", monospace;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.news-article-figure {
  margin: 0 0 26px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.1);
}
.news-article-figure img { display: block; width: 100%; height: auto; }

/* article typography */
.news-article-content { color: #d7d7f0; font-size: 1.06rem; line-height: 1.8; }
.news-article-content p { margin: 0 0 18px; }
.news-article-content h2, .news-article-content h3 {
  color: var(--ink); line-height: 1.25; margin: 30px 0 12px; position: relative; padding-left: 16px;
}
.news-article-content h2 { font-size: 1.55rem; }
.news-article-content h3 { font-size: 1.25rem; }
.news-article-content h2::before, .news-article-content h3::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, var(--neon), #2bd6ff); box-shadow: 0 0 10px rgba(57,255,20,.4);
}
/* flow-root keeps these beside an in-body figure rather than beneath it. A
   plain block box ignores a float and only shortens its line boxes, which puts
   the box's own decoration — a list's ▶ markers, a quote's bar and tinted
   background — underneath the image while the text steps politely around it.
   Given a block formatting context they sit alongside the float instead, so
   the decoration stays with the words it belongs to. */
.news-article-content h2, .news-article-content h3, .news-article-content h4,
.news-article-content ul, .news-article-content ol,
.news-article-content blockquote, .news-article-content pre { display: flow-root; }
.news-article-content ul, .news-article-content ol { margin: 0 0 18px; padding-left: 4px; list-style: none; }
.news-article-content ul li, .news-article-content ol li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
}
.news-article-content ul li::before {
  content: "▶"; position: absolute; left: 2px; top: .1em; color: var(--neon); font-size: .72em;
}
.news-article-content ol { counter-reset: news-ol; }
.news-article-content ol li { counter-increment: news-ol; }
.news-article-content ol li::before {
  content: counter(news-ol); position: absolute; left: 0; top: 0; color: #2bd6ff; font-weight: 900;
}
.news-article-content a { color: #2bd6ff; text-decoration: underline; text-underline-offset: 3px; }
.news-article-content a:hover { color: var(--neon); }
.news-article-content blockquote {
  margin: 22px 0; padding: 16px 20px; border-left: 4px solid var(--neon);
  background: rgba(57,255,20,.06); border-radius: 0 12px 12px 0; color: #cfe9c8; font-style: italic;
}
.news-article-content code {
  background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 5px;
  font-family: "Courier New", monospace; font-size: .92em;
}
.news-article-content pre {
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  padding: 14px 16px; overflow-x: auto;
}
.news-article-content img { max-width: 100%; height: auto; border-radius: 10px; }
.news-inline-figure { width: 88%; max-width: 680px; margin: 26px auto; }
.news-inline-figure img { display: block; width: 100%; max-height: 520px; object-fit: cover; border: 1px solid rgba(255,255,255,.1); }
.news-inline-figure figcaption, .news-inline-gallery figcaption { margin-top: 9px; color: #8585a5; font-size: .72rem; line-height: 1.55; }
.news-inline-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.news-inline-gallery figure { display: flex; min-width: 0; flex-direction: column; margin: 0; }
.news-inline-gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid rgba(255,255,255,.1); }
.news-inline-gallery a { overflow-wrap: anywhere; }
.news-inline-gallery-wrap { display: block; margin: 8px 0 0; }
.news-inline-gallery-wrap figure { width: 30%; max-width: 210px; }
.news-inline-gallery-wrap figure:first-child { float: right; margin: 8px 0 18px 28px; }
.news-inline-gallery-wrap figure:nth-child(2) { float: left; margin: 210px 28px 18px 0; }
.news-inline-gallery-wrap img { border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.34); }
.news-clear-floats { clear: both; }

/* share + related */
.news-article-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 30px 0 8px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1);
}
.news-article-share > span { color: var(--muted); font: 900 .78rem/1 "Courier New", monospace; letter-spacing: 1px; text-transform: uppercase; }
.news-share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.news-share-buttons a {
  padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16);
  color: var(--ink); font-weight: 700; font-size: .82rem; letter-spacing: .4px;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.news-share-buttons a:hover {
  background: rgba(43,214,255,.12); border-color: rgba(43,214,255,.45); transform: translateY(-2px);
}
.news-related { max-width: 1180px; margin: var(--block-gap) auto 0; }

@media (max-width: 760px) {
  .news-featured-card { grid-template-columns: 1fr; }
  .news-featured-media { min-height: 190px; }
  .news-archive-date { min-width: auto; }
  .news-inline-gallery { grid-template-columns: 1fr; }
  .news-inline-gallery img { max-height: 560px; object-fit: contain; background: rgba(0,0,0,.25); }
  .news-inline-gallery-wrap { display: grid; margin: 22px 0; }
  .news-inline-figure { width: 100%; }
  .news-inline-gallery-wrap figure,
  .news-inline-gallery-wrap figure:first-child,
  .news-inline-gallery-wrap figure:nth-child(2) { float: none; width: min(100%, 320px); max-width: none; margin: 0 auto; }
}

/* ---------------- admin newsstand ---------------- */
.admin-news-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.admin-news-new { text-decoration: none; }
.admin-news-count { color: var(--muted); font: 700 .82rem/1 "Courier New", monospace; letter-spacing: .5px; }
.admin-news-table { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; }
.admin-news-row {
  display: grid; grid-template-columns: minmax(0,2.4fr) .9fr .8fr 1.1fr 1.5fr; gap: 14px;
  align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-news-row:last-child { border-bottom: none; }
.admin-news-head { background: rgba(255,255,255,.04); font: 900 .7rem/1 "Courier New", monospace; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.admin-news-cell-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-news-cell-title strong { color: var(--ink); }
.admin-news-cell-title small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-news-cell-title code { color: #7fd7ff; font-size: .74rem; }
.admin-news-cat { display: inline-block; padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,.06); color: #c3c3df; font-size: .74rem; font-weight: 700; }
.admin-news-status { display: inline-block; padding: 4px 11px; border-radius: 999px; font: 900 .68rem/1 "Courier New", monospace; letter-spacing: .8px; text-transform: uppercase; }
.admin-news-status.is-published { background: rgba(57,255,20,.14); color: #8dff7a; border: 1px solid rgba(57,255,20,.4); }
.admin-news-status.is-draft { background: rgba(255,255,255,.06); color: #b9b9d8; border: 1px solid rgba(255,255,255,.16); }
.admin-news-date { color: var(--muted); font-size: .78rem; }
.admin-news-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-news-actions form { margin: 0; }
.admin-news-btn {
  display: inline-block; padding: 6px 12px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #dcdcf5;
  font: 700 .76rem/1 "Courier New", monospace; letter-spacing: .4px; text-decoration: none;
  transition: background .13s ease, border-color .13s ease, color .13s ease, transform .13s ease;
}
.admin-news-btn:hover { background: rgba(255,255,255,.09); transform: translateY(-1px); }
.admin-news-btn-go { color: #05010f; background: linear-gradient(90deg,#39ff14,#2bd6ff); border-color: transparent; font-weight: 900; }
.admin-news-btn-facebook { color: #8fb9ff; border-color: rgba(57,130,255,.48); white-space: nowrap; }
.admin-news-btn-facebook:hover { color: #c7dcff; background: rgba(8,102,255,.13); border-color: rgba(57,130,255,.72); }
.admin-news-facebook-state { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border: 1px solid; border-radius: 7px; font: 800 .7rem/1.2 "Courier New", monospace; white-space: nowrap; }
.admin-news-facebook-state.is-complete { color: #8dff7a; background: rgba(57,255,20,.08); border-color: rgba(57,255,20,.35); }
.admin-news-facebook-state.is-pending { color: #ffdf7a; background: rgba(255,216,61,.08); border-color: rgba(255,216,61,.35); }
.admin-news-btn-warn { color: #ffdf7a; border-color: rgba(255,216,61,.4); }
.admin-news-btn-danger { color: #ff9aa7; border-color: rgba(255,43,107,.4); }
.admin-news-btn-danger:hover { background: rgba(255,43,107,.15); }

/* admin edit form */
.admin-news-form { display: flex; flex-direction: column; gap: 22px; }
.admin-news-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.admin-news-field > span { color: #c3c3df; font: 700 .82rem/1 "Courier New", monospace; letter-spacing: .5px; }
.admin-news-field > span small { color: var(--muted); font-weight: 400; letter-spacing: 0; }
.admin-news-field input, .admin-news-field textarea {
  width: 100%; padding: 11px 13px; border-radius: 10px; background: rgba(5,1,15,.55);
  border: 1px solid rgba(255,255,255,.14); color: var(--ink); font-family: "Courier New", monospace; font-size: .95rem;
}
.admin-news-field input:focus, .admin-news-field textarea:focus {
  outline: none; border-color: rgba(43,214,255,.6); box-shadow: 0 0 0 3px rgba(43,214,255,.15);
}
.admin-news-body { line-height: 1.6; resize: vertical; }
.admin-news-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; color: #c3c3df; font-size: .9rem; }
.admin-news-check input { margin-top: 3px; }
.admin-news-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.admin-news-hint { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.admin-news-file { padding: 9px 11px !important; cursor: pointer; }
.admin-news-file::file-selector-button {
  margin-right: 11px; padding: 6px 12px; border: 1px solid rgba(43,214,255,.4); border-radius: 8px;
  background: rgba(43,214,255,.12); color: #9fe9ff; font: 700 .78rem/1 "Courier New", monospace;
  letter-spacing: .5px; text-transform: uppercase; cursor: pointer;
}
.admin-news-file::file-selector-button:hover { background: rgba(43,214,255,.22); }
/* The hero block is one control now: a heading, the current picture, and the
   file picker that replaces it. Matches .admin-news-field > span so the
   heading sits level with every other label on the form. */
.admin-news-field-label { display: block; margin: 0 0 8px; color: #c3c3df; font: 700 .82rem/1 "Courier New", monospace; letter-spacing: .5px; }
.admin-news-hero-preview figcaption code { color: var(--muted); font-size: .74rem; word-break: break-all; }
.admin-news-hero-preview { margin: 14px 0 0; }
.admin-news-hero-preview img {
  display: block; width: 100%; max-width: 320px; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(5,1,15,.55);
}
.admin-news-hero-preview figcaption {
  margin-top: 6px; color: var(--muted); font: 400 .78rem/1 "Courier New", monospace;
}

@media (max-width: 820px) {
  .admin-news-row { grid-template-columns: 1fr; gap: 8px; }
  .admin-news-head { display: none; }
  .admin-news-row { border-bottom: 1px solid rgba(255,255,255,.1); }
}
/* ---------------- Player avatars and news comments ---------------- */
.pixel-avatar { image-rendering: pixelated; image-rendering: crisp-edges; }
.account-avatar-trigger { position: relative; width: 104px; height: 104px; padding: 0; border: 0; border-radius: 11px; background: transparent; cursor: pointer; }
.account-profile-avatar { display: block; box-sizing: border-box; width: 104px; height: 104px; border: 2px solid #39395f; border-radius: 10px; background: #070210; box-shadow: 0 0 22px rgba(88,221,255,.16), 0 7px 0 #030108; object-fit: cover; }
.account-profile-avatar.avatar-site-character { object-fit: contain; padding: 15px; }
.account-avatar-camera { position: absolute; right: -5px; bottom: -5px; display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid #05010f; border-radius: 8px; background: #58ddff; box-shadow: 0 0 13px rgba(88,221,255,.45); }
.account-avatar-camera svg { width: 18px; height: 18px; fill: #07101a; }
.account-avatar-tooltip { position: absolute; z-index: 5; left: 50%; bottom: -43px; width: max-content; max-width: 220px; padding: 8px 10px; color: #07101a; border-radius: 6px; background: #58ddff; box-shadow: 0 7px 18px rgba(0,0,0,.45); font: 700 12px/1.25 Arial, Helvetica, sans-serif; opacity: 0; pointer-events: none; transform: translate(-50%, -4px); transition: opacity .14s, transform .14s; }
.account-avatar-trigger:hover .account-avatar-tooltip, .account-avatar-trigger:focus-visible .account-avatar-tooltip { opacity: 1; transform: translate(-50%, 0); }
.account-avatar-trigger:hover .account-profile-avatar, .account-avatar-trigger:focus-visible .account-profile-avatar { border-color: #58ddff; box-shadow: 0 0 24px rgba(88,221,255,.32), 0 7px 0 #030108; }
.account-avatar-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.avatar-dialog { width: min(920px, calc(100% - 28px)); max-height: min(760px, calc(100vh - 28px)); padding: 22px; color: var(--ink); border: 2px solid #3b4778; border-radius: 12px; background: linear-gradient(145deg, #100724, #05010f); box-shadow: 0 0 45px rgba(88,221,255,.18), 0 24px 70px rgba(0,0,0,.72); }
.avatar-dialog::backdrop { background: rgba(2,0,9,.82); backdrop-filter: blur(3px); }
.avatar-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.avatar-dialog-heading p { margin: 0 0 3px; color: #58ddff; font-size: 9px; font-weight: 900; letter-spacing: 1.8px; }
.avatar-dialog-heading h3 { margin: 0; color: #fff; font-size: 22px; }
.avatar-dialog-close { width: 34px; height: 34px; padding: 0; color: #ff91b3; border: 1px solid rgba(255,43,107,.45); border-radius: 6px; background: rgba(255,43,107,.08); font: 24px/1 "Courier New", monospace; cursor: pointer; }
.avatar-picker { display: grid; grid-template-columns: repeat(10, minmax(48px, 1fr)); gap: 9px; max-height: 490px; margin: 18px 0; overflow-y: auto; padding: 3px 5px 7px 3px; }
.avatar-choice { position: relative; display: block; cursor: pointer; }
.avatar-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-choice img { display: block; width: 100%; aspect-ratio: 1; border: 2px solid #272746; border-radius: 8px; background: #070210; box-shadow: 0 4px 0 #030108; object-fit: cover; transition: border-color .15s, transform .15s, box-shadow .15s; }
.avatar-choice img.avatar-site-character { object-fit: contain; padding: 14%; }
.avatar-choice:hover img { border-color: #66669b; transform: translateY(-2px); }
.avatar-choice input:checked + img { border-color: var(--neon); box-shadow: 0 0 15px rgba(57,255,20,.42), 0 4px 0 #030108; transform: translateY(-2px); }
.avatar-choice input:focus-visible + img { outline: 2px solid #58ddff; outline-offset: 3px; }
.avatar-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.avatar-dialog-actions > button:not(.account-button) { padding: 10px 14px; color: #b9b9d1; border: 1px solid #393959; border-radius: 6px; background: transparent; font: 800 10px/1 "Courier New", monospace; cursor: pointer; }

.news-comments { max-width: none; margin: var(--block-gap) 0 0; padding: clamp(20px, 4vw, 34px); border: 1px solid #303052; border-radius: 13px; background: linear-gradient(145deg, rgba(14,5,30,.94), rgba(4,2,14,.98)); box-shadow: 0 14px 38px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035); scroll-margin-top: 22px; font-family: Arial,Helvetica,sans-serif; }
.news-comments-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.news-comments-kicker { color: #58ddff; font-size: 9px; font-weight: 900; letter-spacing: 2px; }
.news-comments h2 { margin: 5px 0 0; color: #fff; font-size: clamp(24px, 4vw, 36px); letter-spacing: -.8px; }
.news-comment-count { padding: 6px 9px; color: #a8a8c8; border: 1px solid #353559; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .8px; white-space: nowrap; }
.news-comments-empty { padding: 25px; color: #aaaac8; border: 1px dashed #343457; border-radius: 9px; text-align: center; }
.news-comment-list { display: grid; gap: 12px; }
.news-comment { display: grid; grid-template-columns: 68px 1fr; gap: 15px; padding: 15px; border: 1px solid #29294a; border-radius: 10px; background: rgba(2,1,11,.68); }
.news-comment.is-pending { border-color: rgba(255,207,63,.45); background: rgba(255,207,63,.04); }
.news-comment-avatar { width: 68px; height: 68px; border: 1px solid #3c3c62; border-radius: 7px; background: #070210; object-fit: cover; }
.news-comment-avatar.avatar-site-character { object-fit: contain; padding: 10px; }
.news-comment-body { min-width: 0; }
.news-comment-body header { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 11px; }
.news-comment-body strong { color: #58ddff; font-size: 15px; }
.news-comment-body time { color: #aaaac0; font-size: 12px; }
.news-comment-body p { margin: 9px 0 0; color: #e2e2ed; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.comment-pending-badge { padding: 3px 6px; color: #ffdf74; border: 1px solid rgba(255,207,63,.45); border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.leave-comment { margin-top: 24px; padding-top: 24px; border-top: 1px solid #282849; }
.leave-comment h3 { margin: 0 0 8px; color: #fff; font-size: 20px; }
.leave-comment > p, .leave-comment label { color: #c7c7d7; font-size: 14px; line-height: 1.6; }
.leave-comment label { display: block; margin-bottom: 8px; }
.leave-comment textarea { display: block; box-sizing: border-box; width: 100%; resize: vertical; padding: 13px; color: #f1f1fa; border: 1px solid #3b3b61; border-radius: 8px; background: #06020f; font: 16px/1.6 Arial,Helvetica,sans-serif; }
.leave-comment textarea:focus { outline: none; border-color: #58ddff; box-shadow: 0 0 15px rgba(88,221,255,.15); }
.comment-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 11px; }
.comment-form-footer small { max-width: 580px; color: #aaaac0; font-size: 13px; line-height: 1.5; }
.comment-form-footer button, .comment-sign-in { display: inline-block; padding: 10px 14px; color: #05010f; border: 0; border-radius: 6px; background: linear-gradient(90deg, var(--neon), #58ddff); font-size: 10px; font-weight: 900; letter-spacing: .7px; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.comment-alert { padding: 10px 12px; border: 1px solid; border-radius: 7px; font-size: 11px; }
.comment-alert-ok { color: #baffb2; border-color: rgba(57,255,20,.42); background: rgba(57,255,20,.07); }
.comment-alert-error { color: #ffc0d2; border-color: rgba(255,43,107,.48); background: rgba(255,43,107,.08); }

.admin-comment-list { display: grid; gap: 12px; font-family: Arial,Helvetica,sans-serif; font-size: 14px; }
.admin-comment { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 17px; border: 1px solid #343458; border-left: 3px solid #ffcf3f; border-radius: 9px; background: rgba(4,2,15,.72); }
.admin-comment-approved { border-left-color: var(--neon); }
.admin-comment-rejected { border-left-color: #ff2b6b; opacity: .78; }
.admin-comment-avatar { width: 76px; height: 76px; border: 1px solid #3d3d62; border-radius: 7px; object-fit: cover; }
.admin-comment-avatar.avatar-site-character { object-fit: contain; padding: 11px; }
.admin-comment header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.admin-comment header strong { color: #fff; }
.admin-comment time { color: #77779a; font-size: 9px; }
.admin-comment-status { padding: 3px 6px; color: #ffdf74; border: 1px solid currentColor; border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.admin-comment-approved .admin-comment-status { color: #9cff91; }
.admin-comment-rejected .admin-comment-status { color: #ff9bb5; }
.admin-comment p { margin: 10px 0; color: #d8d8e8; line-height: 1.6; white-space: pre-wrap; }
.admin-comment a { color: #58ddff; font-size: 10px; }
.admin-comment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.admin-comment-actions form { margin: 0; }
.admin-comment-actions button { padding: 8px 11px; }
.admin-comment-reject { color: #ffd26e; border: 1px solid rgba(255,207,63,.5); border-radius: 5px; background: rgba(255,207,63,.08); font-size: 10px; font-weight: 900; cursor: pointer; }

@media (max-width: 760px) {
  .avatar-picker { grid-template-columns: repeat(5, 1fr); }
  .account-dashboard-hero { grid-template-columns: 82px minmax(0, 1fr); align-items: center; }
  .account-avatar-trigger, .account-profile-avatar { width: 82px; height: 82px; }
  .account-profile-avatar.avatar-site-character { padding: 12px; }
  .account-tier { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
  .preview-community-grid, .community-comment-grid { grid-template-columns: 1fr; }
  .preview-community > header, .preview-community-action { align-items: flex-start; flex-direction: column; }
  .comments-bubble-wrap { right: 13px; bottom: 13px; transform: scale(.9); transform-origin: right bottom; }
  .comment-form-footer { align-items: stretch; flex-direction: column; }
  .comment-form-footer button { width: 100%; }
}
@media (max-width: 480px) {
  .avatar-picker { grid-template-columns: repeat(4, 1fr); }
  .news-comment, .admin-comment { grid-template-columns: 50px 1fr; gap: 10px; padding: 11px; }
  .news-comment-avatar, .admin-comment-avatar { width: 50px; height: 50px; }
  .news-comments-heading { align-items: flex-start; flex-direction: column; }
}

/* Final menu-page normalization. Keeping these rules together and last in the
   cascade prevents individual landing-page themes from changing the shared
   hero's footprint, typography, alignment, or media treatment. */
.menu-page-shell.menu-page-shell {
  width: min(1180px, 100%); max-width: 1180px; margin: 0 auto; padding: 30px 24px 64px;
}
.menu-page-hero.menu-page-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: center; gap: clamp(24px, 4vw, 52px); min-height: 450px;
  margin: 0; padding: 22px clamp(30px, 5vw, 60px);
  border: 1px solid #36375e; border-radius: 26px;
}
.menu-page-hero.menu-page-hero .menu-page-hero-copy {
  position: relative; z-index: 3; min-width: 0; max-width: 625px; transform: translateY(-10px);
}
.menu-page-hero.menu-page-hero .menu-page-hero-title {
  max-width: 620px; margin: 10px 0 14px; color: #fff;
  font-size: clamp(38px, 4.4vw, 50px); line-height: .95; letter-spacing: -2.7px;
  text-wrap: balance; text-shadow: 0 0 18px rgba(88,221,255,.28);
}
.menu-page-hero.menu-page-hero .menu-page-hero-lead {
  max-width: 625px; margin: 0; color: #c3c3df; font-size: 13px; line-height: 1.62;
}
.menu-page-hero.menu-page-hero .menu-page-hero-visual {
  width: 100%; height: 350px; min-height: 350px; max-height: 350px; margin: 0; transform: none;
}
.menu-page-hero.menu-page-hero .menu-page-hero-image {
  border: 0; border-radius: 0; box-shadow: none; transform: none;
  /* No backdrop of its own — the character lives in the hero card behind it. */
  background: none;
  /* Shapeless: every edge feathers out over the outer ~14%, so the artwork simply
     stops being there. Two axis gradients intersected — deliberately not a radial,
     which would impose an oval instead of removing the rectangle. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
/* Same lift the homepage world cards use: a slow zoom with a touch more colour. */
.menu-page-hero.menu-page-hero .menu-page-hero-image > img {
  transition: transform .25s ease, filter .25s ease;
}
.menu-page-hero.menu-page-hero .menu-page-hero-image:hover > img,
.menu-page-hero.menu-page-hero .menu-page-hero-image:focus-visible > img {
  transform: scale(1.045); filter: saturate(1.12) brightness(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .menu-page-hero.menu-page-hero .menu-page-hero-image > img { transition: none; }
  .menu-page-hero.menu-page-hero .menu-page-hero-image:hover > img { transform: none; }
}
/* The block directly beneath the hero contributes no top spacing of its own, so the
   hero's 34px bottom margin is the entire gap on every primary-menu page, the way the
   games library already sits. Without this the homepage and membership pages stacked
   their own section padding on top of that margin, and the scores game selector
   pulled up into it with a negative margin. */
.menu-page-hero + .preview-intro,
.menu-page-hero + .membership-benefits { padding-top: 0; }
/* .legal-content and .community-wall are bordered cards in their own right, so
   they need no extra divider — .legal-content just needed the top edge it used to
   omit when it sat flush beneath the old hero box. */

/* Every hero except the homepage runs 10% shorter (450px -> 405px). The homepage
   hero keeps its original footprint. */
.menu-page-hero.menu-page-hero:not(.preview-hero) { min-height: 405px; }

/* Titles must start at the same height on every page. Centring the copy made that
   impossible: pages carrying extra content below the title (status strips, action
   buttons, notes) pushed it up, so the range was 76px to 152px. Anchor the copy to
   the top instead and the title lands in the same place regardless of what follows. */
.menu-page-hero.menu-page-hero:not(.preview-hero) .menu-page-hero-copy {
  align-self: start; padding-top: 14px; transform: none;
}
/* One eyebrow treatment for all of them. Pages use four different classes here
   (preview-section-kicker, history-eyebrow, faq-eyebrow, technology-eyebrow) whose
   differing sizes and margins were themselves shifting the title. */
.menu-page-hero.menu-page-hero:not(.preview-hero) .menu-page-hero-copy > :first-child {
  display: block; min-height: 0; margin: 0 0 12px; padding: 0;
  color: #58ddff; font-size: 9px; font-weight: 900; line-height: 1.4;
  letter-spacing: 2px; text-transform: uppercase;
}
.menu-page-hero.menu-page-hero:not(.preview-hero) .menu-page-hero-title { margin: 0 0 14px; }

/* Status bubbles, the pattern the scores hero already used. Each page sets its own
   --bubble-accent so the row picks up that hero's colour instead of every page
   looking the same. The first bubble carries a lit dot. */
.menu-page-hero-bubbles {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none;
}
.menu-page-hero-bubbles > * {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px;
  color: var(--bubble-accent, #aaaaca);
  border: 1px solid color-mix(in srgb, var(--bubble-accent, #35395f) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bubble-accent, #35395f) 10%, rgba(0,0,0,.3));
  font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.menu-page-hero-bubbles > :first-child::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bubble-accent, #aaaaca);
  box-shadow: 0 0 8px var(--bubble-accent, #aaaaca);
}
.preview-games-hero { --bubble-accent: #d658ff; }
.faq-hero          { --bubble-accent: #ff4ac8; }
.history-hero      { --bubble-accent: #ff5b92; }
.stats-hero        { --bubble-accent: #39ff14; }
.technology-hero   { --bubble-accent: #58ddff; }
.membership-landing-hero { --bubble-accent: #ffcf3f; }
.news-hero         { --bubble-accent: #58ddff; }
.scores-preview-hero { --bubble-accent: #ffcf3f; }
.community-hero    { --bubble-accent: #c86bff; }
.legal-hero        { --bubble-accent: #58ddff; }

/* Legal pages were capped narrower than their hero; the shared shell governs now. */
.legal-page.menu-page-shell { max-width: 1180px; }
.legal-hero.menu-page-hero { align-content: stretch; align-items: center; }
.privacy-page .legal-hero.menu-page-hero,
.legal-hero.menu-page-hero {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 9px),
    radial-gradient(ellipse at 74% 40%, rgba(88,221,255,.16), transparent 42%),
    linear-gradient(124deg, rgba(10,12,44,.96), rgba(4,1,14,.98));
}

/* Comments hero: violet base with a message-bubble glow on the right and a warm
   coin shimmer low left, matching the artwork. */
.community-hero.menu-page-hero {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 8px),
    radial-gradient(ellipse at 72% 40%, rgba(200,107,255,.18), transparent 42%),
    radial-gradient(circle at 22% 82%, rgba(255,207,63,.11), transparent 38%),
    linear-gradient(128deg, rgba(22,10,48,.96), rgba(5,1,15,.98));
}

/* Artwork fills the right-hand side edge to edge and dissolves leftward into the
   copy. Bleeding past the hero's own padding is what makes it read as part of the
   card rather than a picture placed on it; the hero clips the overflow. The games
   hero is excluded — its visual is a three-cabinet grid, not a single image. */
.menu-page-hero.menu-page-hero:not(.preview-hero) .menu-page-hero-image {
  align-self: stretch;
  /* Anchored to the card's right edge, growing leftward under the fade. Anchoring
     left instead pushed the box past the right edge, where the hero clipped it —
     and the subject of every one of these images lives on the right, so that was
     cutting the artwork rather than the empty space it was designed with.
     16:9 also crops far less than 16:10 for 1408x768 sources. */
  justify-self: end;
  aspect-ratio: 16 / 9;
  width: auto; height: auto; min-height: 0; max-height: none;
  margin: -22px calc(clamp(30px, 5vw, 60px) * -1) -22px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.55) 11%, #000 28%);
  -webkit-mask-composite: source-over;
  mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.55) 11%, #000 28%);
  mask-composite: add;
}
.menu-page-hero.menu-page-hero:not(.preview-hero) .menu-page-hero-image > img {
  /* Right-anchored too: whatever cover has to crop comes off the empty left side
     of the artwork, which the fade covers anyway. */
  width: 100%; height: 100%; object-fit: cover; object-position: right center;
}

/* Each page gets the homepage recipe — a pattern, an accent bloom and a dark wash —
   but with its own pattern geometry and its own bloom position and colour, so the
   family reads as one system without every page looking identical. */
/* Tuned to the arcade-hall artwork: violet base, magenta bloom on the right where
   the icon burst sits, cyan low-left for the cabinet glow, and a floor-like
   perspective wash along the bottom. */
.preview-games-hero.menu-page-hero {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    radial-gradient(ellipse at 74% 34%, rgba(214,88,255,.20), transparent 44%),
    radial-gradient(circle at 14% 76%, rgba(88,221,255,.14), transparent 40%),
    linear-gradient(0deg, rgba(150,80,255,.10), transparent 42%),
    linear-gradient(135deg, rgba(22,8,52,.97), rgba(5,1,16,.98));
  background-size: 7px 100%, auto, auto, auto, auto;
}
.scores-preview-hero.menu-page-hero {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.026) 0 1px, transparent 1px 9px),
    radial-gradient(ellipse at 82% 62%, rgba(255,207,63,.15), transparent 42%),
    linear-gradient(120deg, rgba(30,20,6,.95), rgba(5,2,14,.98));
}
.membership-landing-hero.menu-page-hero {
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(circle at 70% 22%, rgba(255,207,63,.17), transparent 40%),
    linear-gradient(150deg, rgba(28,17,5,.95), rgba(5,1,15,.98));
  background-size: 14px 14px, auto, auto;
}
.news-hero.menu-page-hero {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 26% 74%, rgba(88,221,255,.15), transparent 40%),
    linear-gradient(200deg, rgba(8,16,42,.96), rgba(4,1,13,.98));
}
.technology-hero.menu-page-hero {
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
    radial-gradient(circle at 88% 34%, rgba(88,221,255,.15), transparent 36%),
    linear-gradient(135deg, rgba(7,18,40,.96), rgba(4,1,13,.98));
  background-size: 22px 22px, 22px 22px, auto, auto;
}
.history-hero.menu-page-hero {
  background-image:
    repeating-linear-gradient(-38deg, rgba(255,255,255,.025) 0 1px, transparent 1px 12px),
    radial-gradient(ellipse at 12% 30%, rgba(255,91,146,.15), transparent 40%),
    linear-gradient(160deg, rgba(30,8,30,.95), rgba(5,1,14,.98));
}
.stats-hero.menu-page-hero {
  background-image:
    repeating-linear-gradient(90deg, rgba(57,255,20,.035) 0 1px, transparent 1px 16px),
    radial-gradient(circle at 62% 78%, rgba(57,255,20,.13), transparent 38%),
    linear-gradient(140deg, rgba(6,26,12,.95), rgba(4,1,13,.98));
}
/* Tuned to the help-kiosk artwork: navy-violet hall, hot pink kiosk neon on the
   right, cyan for the "?" badge above it, a warm amber flicker low down. */
.faq-hero.menu-page-hero {
  background-image:
    radial-gradient(rgba(88,221,255,.05) 1px, transparent 1px),
    radial-gradient(ellipse at 70% 62%, rgba(255,74,200,.17), transparent 42%),
    radial-gradient(circle at 78% 20%, rgba(88,221,255,.16), transparent 36%),
    radial-gradient(ellipse at 30% 88%, rgba(255,176,64,.09), transparent 46%),
    linear-gradient(118deg, rgba(12,9,44,.96), rgba(4,1,14,.98));
  background-size: 16px 16px, auto, auto, auto, auto;
}

@media (min-width: 901px) {
  .menu-page-hero.menu-page-hero { height: 450px; max-height: 450px; }
  .menu-page-hero.menu-page-hero:not(.preview-hero) { height: 405px; max-height: 405px; }
}

@media (max-width: 900px) {
  .menu-page-hero.menu-page-hero {
    grid-template-columns: 1fr; height: auto; min-height: 450px; max-height: none;
  }
  /* Stacked to one column, the 405px floor left the copy row taller than its
     content and pushed the eyebrow far down the card. Size to content instead and
     trim the top padding that only earns its place on a two-column desktop hero. */
  .menu-page-hero.menu-page-hero:not(.preview-hero) { min-height: 0; }
  .menu-page-hero.menu-page-hero:not(.preview-hero) .menu-page-hero-copy { padding-top: 0; }
  .menu-page-hero.menu-page-hero .menu-page-hero-visual {
    width: min(520px, 100%); height: 340px; min-height: 340px; max-height: 340px; margin-inline: auto;
  }
}

@media (max-width: 760px) {
  .menu-page-shell.menu-page-shell { padding: 18px 13px 45px; }
  .menu-page-hero.menu-page-hero {
    height: auto; min-height: 0; max-height: none; padding: 31px 21px; border-radius: 18px;
  }
  .menu-page-hero.menu-page-hero .menu-page-hero-copy { transform: none; }
  .menu-page-hero.menu-page-hero .menu-page-hero-title {
    font-size: clamp(34px, 11vw, 48px); letter-spacing: -2px;
  }
  .menu-page-hero.menu-page-hero .menu-page-hero-visual {
    height: 300px; min-height: 300px; max-height: 300px;
  }
}

/* --- Affiliate placements -------------------------------------------------
   A horizontally scrolling strip of product cards. Full-bleed within the
   page's own column, so a placement reads as a deliberate part of the layout
   rather than a boxed-off advert. Honest about being sponsored, but confident
   enough to be noticed. */
.affiliate-slot {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; margin: var(--block-gap) 0 0; padding: 22px clamp(12px, 2.5vw, 24px) 18px;
  border: 1px solid rgba(57, 255, 20, 0.3); border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(57, 255, 20, 0.12), transparent 52%),
    radial-gradient(circle at 92% 100%, rgba(43, 214, 255, 0.1), transparent 55%),
    linear-gradient(150deg, rgba(9, 18, 34, 0.97), rgba(4, 7, 18, 0.98));
  box-shadow: 0 0 34px rgba(57, 255, 20, 0.1), inset 0 0 40px rgba(0, 0, 0, 0.32);
}
.affiliate-slot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, #39ff14, #2bd6ff, transparent);
  opacity: .8;
}
.affiliate-slot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.affiliate-kicker {
  padding: 3px 9px; border: 1px solid rgba(57, 255, 20, 0.4); border-radius: 999px;
  background: rgba(57, 255, 20, 0.1); color: #7dff5e;
  font-family: "Courier New", monospace; font-size: 10px; font-weight: 800; letter-spacing: 2.4px;
}
.affiliate-slot-head h2 {
  margin: 0; color: #f2f6ff; font-size: clamp(17px, 2.4vw, 23px); line-height: 1.2;
  text-shadow: 0 0 14px rgba(57, 255, 20, 0.22);
}

/* Carousel ---------------------------------------------------------------- */
.affiliate-carousel { position: relative; display: flex; align-items: center; }
/* Fill the block rather than shrink-wrapping the cards: without this a lone
   card is only as wide as its own text. min-width:0 lets it scroll instead of
   forcing the flex parent wider when there are many. */
.affiliate-carousel > .affiliate-cards { flex: 1 1 auto; min-width: 0; }
.affiliate-cards {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; scroll-snap-type: x mandatory;
  padding: 2px 2px 10px; scrollbar-width: thin;
  scrollbar-color: rgba(57, 255, 20, .45) transparent;
}
.affiliate-cards::-webkit-scrollbar { height: 6px; }
.affiliate-cards::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); border-radius: 99px; }
.affiliate-cards::-webkit-scrollbar-thumb { background: rgba(57, 255, 20, .4); border-radius: 99px; }
.affiliate-cards:focus-visible { outline: 2px solid #39ff14; outline-offset: 3px; border-radius: 12px; }

/* Cards are a fixed width so the strip scrolls predictably and every card is
   the same shape whatever the product is called. */
.affiliate-card {
  flex: 0 0 200px; scroll-snap-align: start;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px;
  padding: 13px 13px 14px;
  border: 1px solid rgba(140, 175, 215, 0.24); border-radius: 13px;
  background: rgba(255, 255, 255, 0.035); color: inherit; text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.affiliate-card:hover, .affiliate-card:focus-visible {
  border-color: rgba(57, 255, 20, 0.6); background: rgba(57, 255, 20, 0.07);
  transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38), 0 0 20px rgba(57, 255, 20, 0.18);
}
.affiliate-card:focus-visible { outline: 2px solid #39ff14; outline-offset: 3px; }
.affiliate-card-art { display: block; }
.affiliate-card-art img {
  display: block; width: 100%; height: 132px; object-fit: contain;
  padding: 8px; border-radius: 10px; background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.affiliate-card-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Titles stay on one line and descriptions clamp to two, so every card is the
   same height. Both carry a title attribute, so anything trimmed is still
   readable on hover. */
.affiliate-card-copy strong {
  overflow: hidden; color: #f6f9ff; font-size: 14px; line-height: 1.3;
  white-space: nowrap; text-overflow: ellipsis;
}
.affiliate-card-copy small {
  display: -webkit-box; overflow: hidden; color: #a8b8cf; font-size: 12px; line-height: 1.45;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.affiliate-card-cta {
  align-self: end; padding: 9px 12px; border-radius: 8px;
  background: linear-gradient(90deg, #39ff14, #2bd6ff); color: #05010f;
  font-family: "Courier New", monospace; font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  text-align: center; box-shadow: 0 0 14px rgba(57, 255, 20, 0.26);
  transition: box-shadow .18s ease, transform .18s ease;
}
.affiliate-card:hover .affiliate-card-cta {
  transform: scale(1.03); box-shadow: 0 0 22px rgba(57, 255, 20, 0.5);
}
.affiliate-card-textonly { grid-template-rows: auto 1fr auto; }

/* Arrows sit over the ends of the strip. Hidden by script when there is
   nothing further to scroll to, and never the only way to move: the strip is
   swipeable, focusable, and keyboard scrollable on its own. */
.affiliate-nav {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(57, 255, 20, .4); border-radius: 50%;
  background: rgba(6, 12, 24, .92); color: #7dff5e;
  font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  transition: background .15s ease, color .15s ease;
}
.affiliate-nav:hover { background: rgba(57, 255, 20, .16); color: #d6ffcb; }
.affiliate-nav:focus-visible { outline: 2px solid #39ff14; outline-offset: 2px; }
.affiliate-nav[hidden] { display: none; }
.affiliate-nav-prev { left: -4px; }
.affiliate-nav-next { right: -4px; }

/* A single pinned advert is not a carousel: it gets one wide card rather than
   a lone 200px card marooned in a full-width strip. */
.affiliate-slot-single .affiliate-cards {
  overflow: visible; padding-bottom: 0; scroll-snap-type: none;
}
.affiliate-slot-single .affiliate-nav { display: none; }
/* One row across the whole block: image, then copy taking all the slack, then
   the button held at the far right. A single card spanning the full width with
   its content bunched on the left just looks unfinished. */
.affiliate-slot-single .affiliate-card {
  flex: 1 1 auto; scroll-snap-align: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  grid-template-areas: "art copy cta";
  align-items: center; gap: 18px; padding: 16px 20px;
}
.affiliate-slot-single .affiliate-card-art { grid-area: art; }
.affiliate-slot-single .affiliate-card-art img { width: 128px; height: 128px; }
.affiliate-slot-single .affiliate-card-copy { grid-area: copy; gap: 7px; }
.affiliate-slot-single .affiliate-card-copy strong { font-size: 17px; }
.affiliate-slot-single .affiliate-card-copy small { font-size: 13.5px; }
.affiliate-slot-single .affiliate-card-cta {
  grid-area: cta; align-self: center; padding: 12px 24px; font-size: 12px;
}
.affiliate-slot-single .affiliate-card-textonly {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy cta";
}

.affiliate-disclosure { margin: 0; color: #7b8ba3; font-size: 11px; line-height: 1.55; }
.arcade-footer .affiliate-slot { margin: 0 0 var(--block-gap); text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .affiliate-cards { scroll-behavior: auto; }
  .affiliate-card, .affiliate-card-cta { transition: none; }
  .affiliate-card:hover, .affiliate-card:focus-visible { transform: none; }
  .affiliate-card:hover .affiliate-card-cta { transform: none; }
}

@media (max-width: 760px) {
  .affiliate-slot { padding: 17px 12px 14px; gap: 11px; }
  /* Touch devices swipe; an arrow would only cover a card. */
  .affiliate-nav { display: none; }
  .affiliate-card { flex-basis: 168px; padding: 11px 11px 12px; }
  .affiliate-card-art img { height: 108px; }
  .affiliate-card-copy strong { font-size: 13.5px; }
  .affiliate-card-copy small { font-size: 11.5px; }

  /* No room for a third column on a phone: the image keeps its place beside
     the copy and the button drops to a full-width row underneath. */
  .affiliate-slot-single .affiliate-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "art copy"
      "cta cta";
    padding: 13px 14px; gap: 11px 13px;
  }
  .affiliate-slot-single .affiliate-card-textonly {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "cta";
  }
  .affiliate-slot-single .affiliate-card-art img { width: 96px; height: 96px; }
  .affiliate-slot-single .affiliate-card-copy strong { font-size: 14.5px; }
  .affiliate-slot-single .affiliate-card-copy small { font-size: 12.5px; }
  .affiliate-slot-single .affiliate-card-cta { justify-self: stretch; text-align: center; }
}

/* Admin affiliates page */
.admin-affiliates .affiliate-total { color: #8b9ab4; font-size: 12px; font-weight: 500; }
.affiliate-slot-group { margin-bottom: 22px; }
.affiliate-slot-heading { margin-bottom: 9px; }
.affiliate-slot-heading h3 { margin: 0; color: #e4ecfb; font-size: 15px; }
.affiliate-slot-heading small { color: #8b9ab4; font-size: 11.5px; }
.affiliate-row {
  margin-bottom: 8px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 11px;
  background: rgba(255, 255, 255, 0.02);
}
.affiliate-row > summary {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 11px 14px; cursor: pointer;
}
.affiliate-row-state {
  padding: 3px 0; border-radius: 5px; background: rgba(255, 255, 255, 0.07);
  color: #9fb0c9; font-family: "Courier New", monospace; font-size: 10px;
  font-weight: 800; letter-spacing: 1px; text-align: center;
}
.affiliate-row.is-live .affiliate-row-state { background: rgba(57, 255, 20, 0.16); color: #7dff5e; }
.affiliate-row-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.affiliate-row-title strong { color: #eef3ff; font-size: 13.5px; }
.affiliate-row-title small { overflow: hidden; color: #7f8ea6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.affiliate-row-market {
  padding: 3px 9px; border: 1px solid rgba(140, 175, 215, 0.3); border-radius: 999px;
  color: #a8b8cf; font-size: 11px; white-space: nowrap;
}
.affiliate-row-clicks { color: #8b9ab4; font-size: 11.5px; white-space: nowrap; }
.affiliate-form { padding: 0 14px; }
.affiliate-row-buttons { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 14px; }
.affiliate-form select {
  width: 100%; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px; background: #0b1120; color: #e8ecf7; font-size: 13px;
}

@media (max-width: 640px) {
  .affiliate-row > summary { grid-template-columns: 48px minmax(0, 1fr); }
  .affiliate-row-market, .affiliate-row-clicks { grid-column: 2; }
}

/* ---------------- Game landing page (/games/{id}) ----------------
   The public, crawlable document for one cabinet. The emulator lives at
   /play/{id}; this page is what a search engine and a first-time visitor see. */
.game-page { max-width: 1180px; padding: 30px 24px 64px; }
.game-breadcrumb { justify-content: flex-start; }
.game-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.game-breadcrumb li { display: flex; gap: 8px; align-items: center; }
.game-breadcrumb li + li::before { content: "›"; color: #4a4a72; }
.game-breadcrumb a { color: var(--neon); }
.game-breadcrumb a:hover { text-shadow: 0 0 8px var(--neon); }
.game-breadcrumb [aria-current="page"] { color: var(--ink); }

.game-hero {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px); align-items: start; padding: clamp(24px, 4vw, 40px);
  border: 2px solid #2a2f52; border-radius: 14px;
  background: linear-gradient(130deg, rgba(13, 7, 36, .98), rgba(5, 1, 15, .98));
  box-shadow: 0 0 34px rgba(255, 43, 107, .13), inset 0 0 70px rgba(0, 0, 0, .42);
}
.game-hero-art { display: flex; justify-content: center; }
.game-hero-art img {
  width: 100%; max-width: 224px; height: auto; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12); image-rendering: pixelated;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .42);
}
.game-hero-copy { min-width: 0; }
.game-hero-copy h1 {
  margin: 12px 0 14px; color: #fff; font-size: clamp(30px, 5vw, 48px);
  line-height: 1.02; letter-spacing: -2px; text-shadow: 0 0 18px rgba(255, 43, 107, .7);
}
.game-hero-copy .menu-page-hero-lead { margin: 0 0 20px; color: #c3c3df; font-size: 14px; line-height: 1.75; }
.game-facts { margin: 0 0 22px; }

.game-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.game-play-button {
  display: inline-block; padding: 13px 26px; border-radius: 10px; border: 2px solid var(--accent);
  background: rgba(255, 43, 43, .12); color: #fff; font-size: 14px; font-weight: 800;
  letter-spacing: 2px; box-shadow: 0 0 18px rgba(255, 43, 107, .25);
}
.game-play-button:hover { background: var(--accent); box-shadow: 0 0 26px var(--accent); }
.game-ranked-link { color: var(--neon); font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.game-ranked-link:hover { text-shadow: 0 0 8px var(--neon); }
.game-membership-link { padding: 12px 16px; color: var(--neon); border: 1px solid rgba(57,255,20,.5); border-radius: 8px; font-size: 12px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.game-membership-link:hover, .game-membership-link:focus-visible { color: #fff; border-color: var(--neon); box-shadow: 0 0 18px rgba(57,255,20,.2); }
.game-cta-note { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: 12px; }
.game-cta-note a { color: var(--neon); }
.post-play-upgrade { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; margin-top: 28px; padding: clamp(22px, 4vw, 34px); border: 1px solid rgba(57,255,20,.45); border-radius: 16px; background: radial-gradient(circle at 88% 20%, rgba(57,255,20,.13), transparent 34%), rgba(9,5,28,.95); box-shadow: 0 18px 45px rgba(0,0,0,.28), 0 0 24px rgba(57,255,20,.08); }
.post-play-upgrade h2 { margin: 8px 0 10px; color: #fff; font-size: clamp(25px, 4vw, 38px); line-height: 1; }
.post-play-upgrade-copy > p:last-child { max-width: 660px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.post-play-upgrade-actions { display: flex; min-width: min(420px, 100%); flex-direction: column; align-items: stretch; gap: 10px; }
.post-play-upgrade-actions a { text-align: center; }
@media (max-width: 820px) {
  .post-play-upgrade { grid-template-columns: 1fr; }
  .post-play-upgrade-actions { min-width: 0; }
}

.game-controls { align-items: flex-start; text-align: left; padding: 0; }
.game-controls .controls-grid { justify-content: flex-start; }
.game-controls .controls-title { margin: 0; }
.game-controls .note { text-align: left; }
.game-controls .note a { color: var(--neon); }

.game-votes h2 { margin: 0 0 14px; color: #fff; font-size: 20px; letter-spacing: -0.5px; }
.game-vote-form { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 10px; }
/* Hover borrows the nav's mechanism exactly: each button sets the same
   --menu-* variables the links use, and one shared rule paints them. Up is the
   nav's green, down the arcade red. */
.game-vote-button {
  --menu-accent: var(--neon); --menu-bg: rgba(57,255,20,.08);
  --menu-glow: rgba(57,255,20,.28); --menu-edge: rgba(57,255,20,.45);
  --menu-text-glow: rgba(57,255,20,.7);
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px;
  border: 1px solid #2a2f52; border-radius: 10px; background: rgba(13, 7, 36, .7);
  color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: 1px; cursor: pointer;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease,
    border-color .15s ease, text-shadow .15s ease, transform .15s ease;
}
.game-vote-down {
  --menu-accent: #ff5b6e; --menu-bg: rgba(255,43,43,.09);
  --menu-glow: rgba(255,43,43,.3); --menu-edge: rgba(255,43,43,.48);
  --menu-text-glow: rgba(255,43,43,.72);
}
.game-vote-button:hover,
.game-vote-button:focus-visible {
  color: #fff; background: var(--menu-bg); border-color: transparent;
  box-shadow: 0 0 17px var(--menu-glow), inset 0 0 0 1px var(--menu-edge);
  text-shadow: 0 0 7px var(--menu-text-glow); transform: translateY(-1px);
}
.game-vote-button:hover .game-vote-count,
.game-vote-button:focus-visible .game-vote-count { color: #fff; }
.game-vote-button:focus-visible { outline: 2px solid var(--menu-accent); outline-offset: 3px; }
.game-vote-button.is-active { color: var(--menu-accent); border-color: var(--menu-accent); }
.game-vote-button.is-active .game-vote-count { color: var(--menu-accent); }
.game-vote-count { color: var(--ink); font-size: 14px; }
.game-vote-note { margin: 0; color: var(--muted); font-size: 12px; }

/* The same control, small, on a library card. The card is an <article>, so the
   title anchor is stretched over it to keep the whole card clickable; the vote
   buttons sit above that overlay so they receive their own clicks. */
/* Covers the whole card so it stays clickable, while its text (the game title)
   remains real anchor text for search engines and screen readers. */
.cabinet-hit {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  text-indent: -9999px; white-space: nowrap;
}
.cabinet-votes {
  position: relative; z-index: 2; display: flex; gap: 8px; margin-top: 10px;
}
.cabinet-vote {
  --menu-accent: var(--neon); --menu-bg: rgba(57,255,20,.08);
  --menu-glow: rgba(57,255,20,.28); --menu-edge: rgba(57,255,20,.45);
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border: 1px solid #2a2f52; border-radius: 7px; background: rgba(5, 1, 15, .55);
  color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; line-height: 1.4; cursor: pointer;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease,
    border-color .15s ease, transform .15s ease;
}
.cabinet-vote-down {
  --menu-accent: #ff5b6e; --menu-bg: rgba(255,43,43,.09);
  --menu-glow: rgba(255,43,43,.3); --menu-edge: rgba(255,43,43,.48);
}
.cabinet-vote:hover,
.cabinet-vote:focus-visible {
  color: #fff; background: var(--menu-bg); border-color: transparent;
  box-shadow: 0 0 12px var(--menu-glow), inset 0 0 0 1px var(--menu-edge);
  transform: translateY(-1px);
}
.cabinet-vote:focus-visible { outline: 2px solid var(--menu-accent); outline-offset: 2px; }
.cabinet-vote.is-active { color: var(--menu-accent); border-color: var(--menu-accent); }

/* Whether a cabinet suits a phone or wants a keyboard is the thing players most
   often need before pressing play, so it gets a card of its own rather than
   another grey line of small print. */
.device-note {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  margin-top: 6px; padding: 14px 16px; text-align: left;
  border: 1px solid #2a2f52; border-left: 3px solid var(--device-accent, var(--neon));
  border-radius: 10px; background: rgba(13, 7, 36, .72);
}
.device-note-phone { --device-accent: var(--neon); }
.device-note-keyboard { --device-accent: #58ddff; }
.device-note-icon {
  display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center;
  border-radius: 8px; background: rgba(255, 255, 255, .05);
}
.device-note-icon svg { width: 24px; height: 24px; fill: var(--device-accent); }
.device-note-copy { min-width: 0; }
.device-note-copy strong {
  display: block; margin-bottom: 4px; color: var(--device-accent);
  font-size: 13px; letter-spacing: 1px;
}
.device-note-copy p { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.65; }
.device-note-hint { margin-top: 6px !important; color: var(--muted) !important; }
.device-note-hint b { color: var(--ink); }
.device-note-hint a { color: var(--neon); }

.game-related h2 { margin: 0 0 18px; color: #fff; font-size: 20px; letter-spacing: -0.5px; }
.game-related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px; margin: 0; padding: 0; list-style: none;
}
.game-related-grid a {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 12px; align-items: center;
  height: 100%; padding: 10px 12px; border: 1px solid #2a2f52; border-radius: 10px;
  background: rgba(13, 7, 36, .7);
}
.game-related-grid a:hover { border-color: var(--accent); box-shadow: 0 0 16px rgba(255, 43, 107, .22); }
.game-related-grid img { grid-row: span 2; width: 72px; height: 54px; object-fit: contain; image-rendering: pixelated; }
.game-related-title { align-self: end; color: var(--ink); font-size: 13px; font-weight: 700; }
.game-related-meta { align-self: start; color: var(--muted); font-size: 11px; }
.game-related-more { margin: 18px 0 0; }
.game-related-more a { color: var(--neon); font-size: 13px; font-weight: 700; letter-spacing: 1px; }

@media (max-width: 760px) {
  .game-hero { grid-template-columns: minmax(0, 1fr); }
  .game-hero-art img { max-width: 180px; }
}

/* Elsewhere the hero artwork deliberately bleeds out of its column — it is set to
   `width: auto` with a 16/9 ratio and negative margins, so its height drives a
   width wider than the track. On an article that would run the picture over the
   headline, so here it is kept inside its column. Declared after the bleed rule
   so equal specificity resolves this way. */
.news-article-hero.menu-page-hero:not(.preview-hero) .menu-page-hero-image {
  place-self: center end; aspect-ratio: auto;
  width: 100%; height: 100%; max-height: 350px; margin: 0;
}
.news-article-hero .menu-page-hero-image > img { object-fit: contain; }

/* ---------------- Comment threads: votes and replies ----------------
   Shared by the community wall and by a news article's thread, which render from
   the same partial. Vote buttons borrow the nav's --menu-* hover mechanism, green
   for up and red for down, exactly as the game controls do. */
.comment-main { min-width: 0; }
.comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.comment-votes { display: flex; gap: 8px; margin: 0; }
.comment-vote {
  --menu-accent: var(--neon); --menu-bg: rgba(57,255,20,.08);
  --menu-glow: rgba(57,255,20,.28); --menu-edge: rgba(57,255,20,.45);
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border: 1px solid #2a2f52; border-radius: 7px; background: rgba(5, 1, 15, .5);
  color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; line-height: 1.4; cursor: pointer;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease,
    border-color .15s ease, transform .15s ease;
}
.comment-vote-down {
  --menu-accent: #ff5b6e; --menu-bg: rgba(255,43,43,.09);
  --menu-glow: rgba(255,43,43,.3); --menu-edge: rgba(255,43,43,.48);
}
.comment-vote:hover, .comment-vote:focus-visible {
  color: #fff; background: var(--menu-bg); border-color: transparent;
  box-shadow: 0 0 12px var(--menu-glow), inset 0 0 0 1px var(--menu-edge);
  transform: translateY(-1px);
}
.comment-vote:focus-visible { outline: 2px solid var(--menu-accent); outline-offset: 2px; }
.comment-vote.is-active { color: var(--menu-accent); border-color: var(--menu-accent); }

.comment-reply-toggle, .comment-reply-login {
  padding: 4px 10px; border: 1px solid #2a2f52; border-radius: 7px;
  background: rgba(5, 1, 15, .5); color: var(--muted);
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  line-height: 1.4; cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.comment-reply-toggle:hover, .comment-reply-toggle:focus-visible,
.comment-reply-login:hover, .comment-reply-login:focus-visible { color: #58ddff; border-color: #58ddff; }

.comment-reply-form { margin-top: 12px; }
.comment-reply-form[hidden] { display: none; }
.comment-reply-form label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.comment-reply-form textarea {
  box-sizing: border-box; width: 100%; padding: 10px; color: #fff;
  border: 1px solid #3b3b61; border-radius: 8px; background: #06020f;
  font: 14px/1.55 Arial, Helvetica, sans-serif; resize: vertical;
}
.comment-reply-form > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.comment-reply-form small { color: var(--muted); font-size: 11px; }
.comment-reply-form button {
  padding: 8px 16px; border: 1px solid var(--neon); border-radius: 8px;
  background: rgba(57,255,20,.1); color: #fff; font-family: inherit;
  font-size: 12px; font-weight: 800; letter-spacing: 1px; cursor: pointer;
}
.comment-reply-form button:hover { background: rgba(57,255,20,.22); box-shadow: 0 0 14px rgba(57,255,20,.3); }

/* Replies sit indented under their parent, with a rail marking the thread. */
.comment-replies { margin-top: 14px; padding-left: 16px; border-left: 2px solid #2a2f52; display: grid; gap: 12px; }
.community-comment.is-reply { padding: 0; border: 0; background: none; box-shadow: none; }
.community-comment .comment-main > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.community-comment .comment-main > header time { color: var(--muted); font-size: 11px; }

.article-votes h2 { margin: 0 0 14px; color: #fff; font-size: 20px; letter-spacing: -0.5px; }

/* --- Page rhythm ----------------------------------------------------------
   The top-level blocks of every page shell are spaced by one value. Set on the
   sibling (* + *) so the first block still sits flush against the shell's own
   padding, and as a top margin so it cannot combine with a bottom margin into
   a double gap. A section added later inherits this instead of inventing
   another number — which is how the page ended up with 28, 30, 34, 38, 42, 44,
   46, 48, 52, 58, 62 and 65px all doing the same job. */
.menu-page-shell > * + *,
.preview-shell > * + *,
.arcade > * + * { margin-top: var(--block-gap); }
/* Editorial guides: readable cards, diagrams, and semantic tables. */
.preview-guides { margin: 3rem 0; }
.preview-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.preview-guide-card { min-width: 0; overflow: hidden; border: 1px solid #394461; border-radius: 16px; background: #11172a; }
.preview-guide-card > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.preview-guide-card > div { padding: 1.35rem; }
.preview-guide-card h3 { font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.4; margin: .6rem 0; }
.preview-guide-card h3 a { color: #f1f4ff; text-decoration: none; }
.preview-guide-card h3 a:hover, .preview-guide-card h3 a:focus-visible { color: #8deef0; text-decoration: underline; }
.preview-guide-card p { line-height: 1.7; color: #c7d1e4; }
.library-access-guide { max-width: 65ch; line-height: 1.8; color: #c7d1e4; }
.news-article-content table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; table-layout: fixed; font-size: .95em; }
.news-article-content caption { text-align: left; font-weight: 700; padding: .6rem 0; color: #f1f4ff; }
.news-article-content th, .news-article-content td { padding: .85rem; border: 1px solid #3d4d69; text-align: left; vertical-align: top; overflow-wrap: anywhere; line-height: 1.65; }
.news-article-content thead th { background: #202e46; color: #b7f1f0; }
.news-article-content tbody th { color: #edf2fa; }
.news-article-content figure img { display: block; width: 100%; height: auto; }
.news-article-content figcaption { font-size: .9em; line-height: 1.6; color: #b6c4d8; margin-top: .6rem; }
.news-article-content figure.guide-diagram,
.news-article-content figure.guide-diagram:nth-of-type(even) {
    float: none; clear: both; width: 100%; max-width: 960px; margin: 2rem auto;
}
.news-article-hero.menu-page-hero .menu-page-hero-image.guide-hero-diagram {
    -webkit-mask-image: none; mask-image: none; aspect-ratio: 16 / 9; height: auto;
}
.news-article-hero.menu-page-hero .menu-page-hero-image.guide-hero-diagram > img {
    object-fit: contain; object-position: center; transform: none;
}
.news-article-hero.menu-page-hero:not(.preview-hero) .menu-page-hero-copy > .news-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .65rem .9rem;
    margin: 0 0 1.35rem; padding: 0; line-height: 1.6;
    font-size: .8rem; font-weight: 500; letter-spacing: .5px; text-transform: none;
}
.news-article-hero .news-date { white-space: nowrap; }
.news-article-hero .news-date, .news-article-hero .news-readtime, .news-article-hero .news-byline { line-height: 1.6; }
.news-article-hero .news-readtime::before { content: none; }
/* Category labels have their own space beneath the artwork, including on
   already-running builds whose markup still nests the label in the media box. */
.news-card-media { height: auto; aspect-ratio: 16 / 9; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; }
.news-card-media > .news-card-cat { top: calc(100% + 16px); left: 18px; line-height: 1.3; }
.news-card-body { padding-top: 52px; }
.news-card-body-with-meta { padding-top: 16px; }
.news-card-body-with-meta > .news-meta { margin-bottom: 0; line-height: 1.6; }
.news-page-count { color: var(--muted); font-size: .8rem; }
.news-pagination { flex-wrap: wrap; margin: 24px 0; }
.news-featured-media { background-size: contain; background-repeat: no-repeat; }
.news-featured-media > .news-featured-flag { display: none; }
@media (max-width: 760px) {
    .preview-guide-grid { grid-template-columns: 1fr; }
    .preview-guide-card > div { padding: 1.1rem; }
    .news-article-content th, .news-article-content td { padding: .5rem; font-size: .88em; }
}