/* ============================================
   RAINBOT NETWORK — stylesheet
   ============================================ */

:root {
  --bg: #080810;
  --bg-soft: #111124;
  --panel: #19182d;
  --panel-2: #292846;
  --ink: #fbfaf4;
  --ink-dim: #b6b3c9;
  --accent: #ff2e88;
  --accent-2: #2ee0ff;
  --accent-3: #ffd43b;
  --good: #6bff7d;
  --bad: #ff5c5c;
  --shadow: 0 6px 0 rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.3);
  --font-display: "Bungee", "Impact", "Arial Black", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
  --r: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  min-height: 100vh;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ===== Skip to content (keyboard a11y) ===== */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--accent-2);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  transform: translateY(-160%);
  transition: transform 0.16s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
  text-decoration: none;
}

/* ===== Animated background grid ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(255, 46, 136, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 224, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: -1;
  animation: gridDrift 30s linear infinite;
}
@keyframes gridDrift {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* ===== Nav ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 20, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--accent);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav:has(.nav__search.is-open),
.nav:has(.nav__search-results:not([hidden])) {
  z-index: 10120;
}
.nav__brand {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__brand:hover { text-decoration: none; }
.nav__brand-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
}
.nav__brand-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--accent-2);
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.85;
}
.nav__brand-accent {
  color: var(--accent-2);
  position: relative;
}
.nav__brand-accent::after {
  content: "▚▞";
  position: absolute;
  right: -16px;
  top: 0;
  font-size: 10px;
  color: var(--accent);
  opacity: 0.7;
  animation: glitchFlicker 2.6s steps(2, end) infinite;
}
@keyframes glitchFlicker {
  0%, 92%, 100% { opacity: 0.7; transform: translate(0, 0); }
  93% { opacity: 1; transform: translate(-1px, 0); }
  94% { opacity: 0.3; transform: translate(1px, 1px); }
  95% { opacity: 1; transform: translate(-1px, -1px); }
  96% { opacity: 0.5; }
}

/* Glitchy bot-face mark — pink→cyan gradient, "thinking" eyes, scanline */
.nav__brand-mark {
  display: inline-block;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent) 0%, #b51b66 50%, var(--accent-2) 100%);
  border-radius: 9px;
  position: relative;
  box-shadow: var(--shadow);
  overflow: hidden;
  flex-shrink: 0;
  animation: brandPulse 2.4s ease-in-out infinite;
}
.nav__brand-mark__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 2;
}
.nav__brand-mark__eye {
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  animation: botBlink 3.7s steps(1) infinite;
}
.nav__brand-mark__eye:nth-child(2) {
  animation-delay: 0.15s;
}
@keyframes botBlink {
  0%, 92%, 96%, 100% { transform: scaleY(1); }
  93%, 95% { transform: scaleY(0.1); }
}
.nav__brand-mark__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  z-index: 3;
  pointer-events: none;
}
.nav__brand-mark__glitch {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      transparent 0%,
      transparent 40%,
      rgba(255, 255, 255, 0.35) 50%,
      transparent 60%,
      transparent 100%);
  transform: translateX(-100%);
  animation: glitchSweep 3.2s ease-in-out infinite;
}
@keyframes glitchSweep {
  0%, 88%, 100% { transform: translateX(-100%); }
  92% { transform: translateX(100%); }
}
@keyframes brandPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.06) rotate(-4deg); }
}
.nav__links {
  display: flex; gap: 18px; align-items: center;
  font-size: 14px; font-weight: 600;
}
.nav__links a { color: var(--ink); }
.nav__cta {
  background: var(--accent);
  color: var(--bg) !important;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 800;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease;
}
.nav__cta:hover { transform: translateY(-2px); text-decoration: none; }
.nav__cta--ghost {
  background: transparent;
  color: var(--ink) !important;
  border: 2px solid var(--ink);
  box-shadow: none;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 100px 24px 70px;
  text-align: center;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 46, 136, 0.20), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(46, 224, 255, 0.15), transparent 50%),
    var(--bg);
  border-bottom: 2px solid var(--panel);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 120%;
  height: 140%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 46, 136, 0.08), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(46, 224, 255, 0.06), transparent 30%);
  animation: heroDrift 18s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -20px); }
}
.hero > * { position: relative; z-index: 1; }
.hero__pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--panel);
  border: 1px solid var(--ink-dim);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 28px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: 76px;
  line-height: 0.98;
  margin: 0 0 24px;
  letter-spacing: 1px;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.hero__title .word {
  display: inline-block;
  animation: wordFloat 3.6s ease-in-out infinite;
  margin: 0 6px;
}
.hero__title .w1 { color: var(--accent); }
.hero__title .w2 { color: var(--accent-2); }
.hero__title .w3 { color: var(--accent-3); }
.hero__title .w1 { animation-delay: 0s; }
.hero__title .w2 { animation-delay: 0.3s; }
.hero__title .w3 { animation-delay: 0.6s; }
@keyframes wordFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

.hero__sub {
  font-size: 18px;
  color: var(--ink-dim);
  max-width: 680px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.hero__sub-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--accent);
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
  margin-top: 8px;
  letter-spacing: 1px;
  animation: sorryShake 4.2s ease-in-out infinite;
}
@keyframes sorryShake {
  0%, 88%, 100% { transform: rotate(-2deg); }
  92% { transform: rotate(3deg) translateX(4px); }
  94% { transform: rotate(-3deg) translateX(-4px); }
  96% { transform: rotate(2deg); }
}
.hero__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1.2px;
  padding: 14px 22px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, background 0.1s ease;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.5); }
.btn--primary { background: var(--accent); color: var(--bg); }
.btn--primary:hover { background: #ff4a9a; }
.btn--secondary { background: var(--accent-2); color: var(--bg); }
.btn--secondary:hover { background: #5ce8ff; }
.btn--yellow { background: var(--accent-3); color: var(--bg); }
.btn--yellow:hover { background: #ffe04a; }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); box-shadow: none;
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.rb-save-continue {
  margin-bottom: 12px;
}
.rb-save-continue[hidden] {
  display: none;
}

/* ===== Sections ===== */
section { padding: 80px 24px; max-width: 1200px; margin: 0 auto; }
.section__title {
  font-family: var(--font-display);
  font-size: 44px;
  margin: 0 0 12px;
  text-align: center;
  letter-spacing: 0.5px;
}
.section__sub {
  text-align: center;
  color: var(--ink-dim);
  margin: 0 auto 40px;
  max-width: 560px;
  line-height: 1.5;
}

/* ===== Game grid ===== */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.game-card {
  background: var(--panel);
  border: 2px solid var(--panel);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  display: flex; flex-direction: column;
  position: relative;
}
.game-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(255, 46, 136, 0.25);
  text-decoration: none;
}
.game-card__art {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
}
.game-card__art--hormuz {
  background:
    linear-gradient(180deg, #0a3a5a 0%, #1a5a8a 40%, #1a4a7a 70%, #c2956a 100%);
}
.game-card__art--hormuz::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 12px, rgba(255,255,255,0.1) 12px, rgba(255,255,255,0.1) 14px);
  animation: wave 2s linear infinite;
}
@keyframes wave {
  to { background-position: 24px 0; }
}
.game-card__art--monopoly {
  background: linear-gradient(135deg, #1a4d3a 0%, #2d7a5e 50%, #1a4d3a 100%);
}
.game-card__art--apop {
  background:
    radial-gradient(circle at 30% 30%, #ff2e88 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, #f7d716 0%, transparent 40%),
    linear-gradient(135deg, #4a1a5a 0%, #2a0a3a 100%);
}
.game-card__art--gym {
  background:
    radial-gradient(circle at 50% 35%, #ffd1dc 0%, transparent 30%),
    linear-gradient(180deg, #2a2a3a 0%, #1a1a24 60%, #3a2a2a 100%);
  position: relative;
}
.game-card__art--gym::after {
  content: "";
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, #ff2e88 0, #ff2e88 8px, transparent 8px, transparent 14px);
  opacity: 0.6;
}
.game-card__art--soon {
  background:
    repeating-linear-gradient(45deg, #1a1a2e 0, #1a1a2e 10px, #252540 10px, #252540 20px);
}
.game-card__art-text {
  font-family: var(--font-display);
  font-size: 22px;
  text-align: center;
  padding: 12px;
  text-shadow: 3px 3px 0 #000;
  z-index: 2;
  position: relative;
  line-height: 1.1;
}
.game-card__tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(0,0,0,0.8);
  padding: 5px 10px; border-radius: 4px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  z-index: 3;
  font-weight: 700;
}
.game-card__tag--new { background: var(--accent); color: var(--bg); }
.game-card__tag--soon { background: var(--ink-dim); color: var(--bg); }
.game-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.game-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 8px;
  letter-spacing: 0.5px;
}
.game-card__desc {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.5;
  flex: 1;
}
.game-card__cta {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-2);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ===== Features ===== */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.feature {
  background: var(--panel);
  border-radius: var(--r);
  padding: 28px;
  border: 2px solid transparent;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.feature:hover { border-color: var(--accent-2); transform: translateY(-3px); }
.feature__icon { font-size: 36px; margin-bottom: 14px; }
.feature__title {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 10px;
  letter-spacing: 0.5px;
}
.feature__body { color: var(--ink-dim); font-size: 14px; line-height: 1.5; }

/* ===== Pricing ===== */
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}
.plan {
  background: var(--panel);
  border-radius: var(--r);
  padding: 32px;
  border: 2px solid var(--panel);
  text-align: center;
  transition: transform 0.15s ease;
}
.plan:hover { transform: translateY(-4px); }
.plan--pro { border-color: var(--accent); position: relative; }
.plan--pro::before {
  content: "MOST POPULAR";
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px; padding: 4px 12px; border-radius: 999px;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.plan__name {
  font-family: var(--font-display);
  font-size: 24px; margin: 0 0 4px;
}
.plan__price { font-size: 40px; font-weight: 800; margin: 12px 0; letter-spacing: 0; }
.plan__price small { font-size: 14px; color: var(--ink-dim); font-weight: 400; }
.plan__list { list-style: none; padding: 0; margin: 20px 0; text-align: left; }
.plan__list li {
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--ink-dim); font-size: 14px;
}
.plan__list li::before { content: "✓ "; color: var(--good); font-weight: 800; }

/* ===== Footer ===== */
.footer {
  background: var(--bg-soft);
  padding: 18px 24px;
  border-top: 2px solid var(--panel);
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
  flex-shrink: 0;
}
.footer__links { display: flex; gap: 18px; justify-content: center; margin-bottom: 6px; flex-wrap: wrap; }
.footer__small { font-size: 11px; opacity: 0.7; margin-top: 6px; }

/* ===== Ad slot (disabled) ===== */
.ad-slot,
.ad-slot--leaderboard,
.ad-slot--rectangle,
.ad-slot--mobile,
.games-ad-slot {
  display: none !important;
}

/* ===== Game page ===== */
.game-page {
  --game-shell-gap: 14px;
  --game-side-width: clamp(292px, 25vw, 360px);
  --game-viewport-reserve: clamp(158px, 22dvh, 220px);
  padding: 10px clamp(10px, 2vw, 18px) 14px;
  width: min(100%, 1560px);
  max-width: 1560px;
  margin: 0 auto;
  min-height: calc(100dvh - 170px);
  display: flex;
  flex-direction: column;
  overflow: visible;
  box-sizing: border-box;
}
.game-page__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  margin-bottom: 8px;
  gap: 10px 14px;
  flex-shrink: 0;
}
.game-page__header > div { min-width: 0; }
.game-page__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.35vw, 24px); margin: 0; letter-spacing: 0;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.game-page__sub {
  color: var(--ink-dim);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 3px;
  max-width: 98ch;
}
.game-page__header .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
}

/* Two-column layout: canvas (left) + side panel (right).
   Collapses to single column on narrow screens.
   The game-layout flex-grows to fill the remaining viewport. */
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, var(--game-side-width));
  gap: var(--game-shell-gap);
  align-items: start;
  flex: 1;
  min-height: 0;
}
@media (max-width: 900px) {
  .game-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Right-column side panel: controls, power-ups, instructions, ads. */
.game-side {
  display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 88px;
  max-height: calc(100dvh - 136px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-3) 65%, transparent) color-mix(in srgb, var(--panel-2) 70%, transparent);
}
.game-side > * {
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .game-side { position: static; max-height: none; }
}
.game-side::-webkit-scrollbar,
.game-side__howto::-webkit-scrollbar {
  width: 8px;
}
.game-side::-webkit-scrollbar-track,
.game-side__howto::-webkit-scrollbar-track {
  background: rgba(8, 12, 22, 0.8);
  border-radius: 999px;
}
.game-side::-webkit-scrollbar-thumb,
.game-side__howto::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-3) 80%, transparent),
    color-mix(in srgb, var(--accent) 70%, transparent)
  );
  border-radius: 999px;
  border: 2px solid rgba(8, 12, 22, 0.8);
}
.game-side::-webkit-scrollbar-thumb:hover,
.game-side__howto::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 86%, transparent),
    color-mix(in srgb, var(--accent-3) 78%, transparent)
  );
}
.game-side::-webkit-scrollbar-corner,
.game-side__howto::-webkit-scrollbar-corner {
  background: transparent;
}
.game-side__panel {
  background: linear-gradient(180deg, rgba(31, 30, 54, 0.96), rgba(16, 16, 31, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 11px 12px;
  min-width: 0;
}
.game-side__panel--controls { order: 1; }
.game-side__panel--tour-pass { order: 2; }
.game-side__panel--powerups { order: 3; }
.game-side__panel--deals { order: 4; }
@media (max-width: 900px) {
  .game-side__panel--powerups { order: 2; }
  .game-side__panel--deals { order: 3; }
  .game-side__panel--tour-pass { order: 4; }
}
.game-side__poster {
  aspect-ratio: 1200 / 827;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  display: block;
  object-fit: cover;
  width: 100%;
  max-height: clamp(120px, 18dvh, 175px);
}
.game-side__poster--wide {
  aspect-ratio: 1116 / 488;
}
.game-side__title {
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: 1px;
  color: var(--accent-3);
  margin: 0 0 8px;
}
.game-side__howto {
  order: 7;
  background: linear-gradient(180deg, rgba(31, 30, 54, 0.96), rgba(16, 16, 31, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink-dim);
  max-height: none;
  overflow: visible;
  padding: 14px 15px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-3) 65%, transparent) color-mix(in srgb, var(--panel-2) 70%, transparent);
}
.game-side__howto summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: 1px;
  color: var(--accent-3);
  list-style: none;
  min-height: 32px;
  padding: 4px 0;
  user-select: none;
}
.game-side__howto summary::-webkit-details-marker { display: none; }
.game-side__howto summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s;
}
.game-side__howto[open] summary::before { transform: rotate(90deg); }
.game-side__howto ul { padding-left: 20px; margin: 10px 0 0; }
.game-side__howto li { margin-bottom: 7px; }
.game-side__howto p {
  font-size: 12.5px !important;
  line-height: 1.45;
}
.game-side > .rb-leaderboard {
  margin: 0;
  max-width: none;
  order: 6;
  width: 100%;
}
.game-side > #ad-leaderboard,
.game-side > #ad-rectangle,
.game-side > .ad-slot {
  order: 20;
}
.game-side #ad-leaderboard {
  margin-top: 2px;
}

.game-stage {
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--panel) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r);
  padding: clamp(8px, 1vw, 12px);
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: var(--shadow-soft);
  min-height: 0;
  min-width: 0;
  overflow: visible;
}

/* Shared playfield action rail: sits under the minimized screen. */
.rb-game-chrome {
  --rb-chrome-width: 100%;
  align-self: center;
  background:
    linear-gradient(180deg, rgba(18, 17, 32, 0.98), rgba(10, 10, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: grid;
  flex: 0 0 auto;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 100%;
  padding: 6px;
  width: min(100%, var(--rb-chrome-width));
  z-index: 4;
}
.rb-game-chrome[hidden] {
  display: none !important;
}
.rb-game-chrome__btn {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  gap: 3px;
  justify-content: center;
  min-height: 44px;
  padding: 6px 4px 5px;
  touch-action: manipulation;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.rb-game-chrome__btn:hover,
.rb-game-chrome__btn:focus-visible {
  background: rgba(46, 224, 255, 0.1);
  border-color: rgba(46, 224, 255, 0.42);
  outline: none;
}
.rb-game-chrome__btn:active {
  transform: scale(0.97);
}
.rb-game-chrome__btn.is-active,
.rb-game-chrome__btn[aria-pressed="true"] {
  background: rgba(255, 212, 59, 0.1);
  border-color: rgba(255, 212, 59, 0.4);
  color: var(--accent-3);
}
.rb-game-chrome__btn[data-rb-game-chrome="favorite"][aria-pressed="true"] {
  background: rgba(255, 46, 136, 0.12);
  border-color: rgba(255, 46, 136, 0.46);
  color: #ff7ab3;
}
.rb-game-chrome__btn[data-rb-game-chrome="favorite"][aria-pressed="true"] .rb-game-chrome__icon svg {
  fill: currentColor;
}
.rb-game-chrome__icon {
  display: grid;
  flex: 0 0 auto;
  height: 18px;
  place-items: center;
  width: 18px;
}
.rb-game-chrome__icon svg {
  display: block;
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 18px;
}
.rb-game-chrome__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
body.rb-game-maxed .rb-game-chrome,
html.sf-maximised .rb-game-chrome,
.game-stage.is-maxed .rb-game-chrome {
  display: none !important;
}
html:not(.sf-maximised) body:not(.rb-game-maxed) .game-stage:has(.rb-game-chrome) .fs-btn:not([role="dialog"] *),
html:not(.sf-maximised) body:not(.rb-game-maxed) .game-stage:has(.rb-game-chrome) .fullscreen-btn:not([role="dialog"] *) {
  display: none !important;
}
.hud {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg);
  padding: 7px 10px; border-radius: 8px;
  width: 100%; max-width: 100%; justify-content: space-between;
  border: 1px solid var(--panel-2);
  flex-shrink: 0;
}
.hud__item { display: flex; gap: 6px; align-items: center; }
.hud__label { color: var(--ink-dim); font-size: 11px; letter-spacing: 1.5px; }
.hud__value { color: var(--accent-3); font-weight: 700; font-size: 15px; }

.canvas-wrap {
  position: relative;
  display: flex;
  align-items: center; justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  flex: 0 1 auto;
  min-height: 0;
  max-width: 100%;
  align-self: center;
  /* Default to square canvas; specific games override with .canvas-wrap--ar-* */
  --game-max-width: 820px;
  --game-aspect: 1;
  --game-aspect-ratio: 1 / 1;
  width: min(100%, var(--game-fit-width, var(--game-max-width)));
  max-height: min(var(--game-fit-max-height, calc(100dvh - var(--game-viewport-reserve))), 720px);
  aspect-ratio: var(--game-aspect-ratio);
  background: #001a33;
}
/* Per-game aspect ratios (canvas natural size) */
.canvas-wrap--ar-585-720  { --game-aspect: 0.8125; --game-aspect-ratio: 585 / 720; --game-max-width: 680px; }   /* strait-of-hormuz */
.canvas-wrap--ar-700-480  { --game-aspect: 1.4583; --game-aspect-ratio: 700 / 480; --game-max-width: 1120px; }  /* mr-feast */
.canvas-wrap--ar-750-500  { --game-aspect: 1.5; --game-aspect-ratio: 750 / 500; --game-max-width: 1160px; }  /* a-pop */
.canvas-wrap--ar-500-640  { --game-aspect: 0.78125; --game-aspect-ratio: 500 / 640; --game-max-width: 650px; }   /* looksmaxxing */
.canvas-wrap--ar-640-640  { --game-aspect: 1; --game-aspect-ratio: 1 / 1; --game-max-width: 820px; }       /* gym girl (default) */
.canvas-wrap--ar-800-520  { --game-aspect: 1.5385; --game-aspect-ratio: 800 / 520; --game-max-width: 1180px; }  /* skibidi toilet tower defense */
.canvas-wrap--ar-832-512  { --game-aspect: 1.625; --game-aspect-ratio: 832 / 512; --game-max-width: 1200px; }  /* rizz-craft */
.canvas-wrap--ar-760-620  { --game-aspect: 1.2258; --game-aspect-ratio: 760 / 620; --game-max-width: 900px; }   /* billionaire space race */
.canvas-wrap--ar-700-700  { --game-aspect: 1; --game-aspect-ratio: 1 / 1; --game-max-width: 760px; }       /* smooth brain snacker */
.canvas-wrap--ar-900-600  { --game-aspect: 1.5; --game-aspect-ratio: 3 / 2; --game-max-width: 1100px; }      /* drone hunter */
.canvas-wrap--ar-960-600  { --game-aspect: 1.6; --game-aspect-ratio: 8 / 5; --game-max-width: 1120px; }      /* super slop brothers (legacy) */
.canvas-wrap--ar-1280-720 { --game-aspect: 1.7778; --game-aspect-ratio: 16 / 9; --game-max-width: 1520px; }      /* super slop brothers */
#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #001a33;
  border: 2px solid var(--panel-2);
  border-radius: 10px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  body:not(.rb-game-maxed) .game-page .game-stage,
  body:not(.rb-game-maxed) .game-page .canvas-wrap,
  body:not(.rb-game-maxed) .game-page #gameCanvas {
    touch-action: pan-y;
  }

  body.rb-game-maxed .canvas-wrap,
  body.rb-game-maxed .canvas-wrap #gameCanvas,
  .canvas-wrap.is-maxed,
  .canvas-wrap.is-maxed #gameCanvas {
    touch-action: none;
  }
}

.controls-row {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 4px;
}
.controls-row .btn { font-size: 14px; padding: 10px 16px; }

/* ===== Power-up buttons ===== */
.powerups {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 4px;
}
.powerup {
  background: var(--bg);
  border: 2px solid var(--panel-2);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  cursor: pointer;
  transition: all 0.12s ease;
  display: flex; gap: 8px; align-items: center;
  min-width: 130px;
  justify-content: space-between;
}
.powerup:hover {
  border-color: var(--accent-3);
  color: var(--ink);
  transform: translateY(-2px);
}
.powerup__icon { font-size: 20px; }
.powerup__label { flex: 1; text-align: left; font-weight: 700; }
.powerup__cost {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-3);
  color: var(--bg);
  font-size: 10px;
  letter-spacing: 1.5px;
}
.powerup--locked .powerup__cost { background: var(--panel-2); color: var(--ink-dim); }
.powerup--locked:hover { border-color: var(--accent); }

/* ===== APOP record deals ===== */
.apop-deals {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.apop-deals__empty,
.apop-deals__chip {
  border: 1px solid var(--panel-2);
  border-radius: 8px;
  background: rgba(10,10,20,0.62);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  padding: 9px 10px;
}
.apop-deals__chip {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: start;
  color: var(--ink);
}
.apop-deals__chip strong {
  display: block;
  color: var(--accent-3);
  font-size: 12px;
}
.apop-deals__chip span:last-child {
  color: var(--ink-dim);
}
.apop-record-deal {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 18%, rgba(236,26,94,0.22), transparent 28%),
    radial-gradient(circle at 82% 16%, rgba(46,224,255,0.16), transparent 26%),
    rgba(4,4,12,0.88);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.apop-record-deal[hidden] {
  display: none;
}
.apop-record-deal__panel {
  width: min(680px, 100%);
  border: 2px solid rgba(247,215,22,0.72);
  border-radius: 8px;
  background: rgba(10,10,20,0.94);
  box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 30px rgba(236,26,94,0.2);
  padding: 18px;
}
.apop-record-deal__kicker {
  margin: 0 0 4px;
  color: var(--accent-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.apop-record-deal__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1.05;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.45);
}
.apop-record-deal__sub {
  margin: 8px 0 14px;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.45;
}
.apop-record-deal__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.apop-record-deal__choice {
  min-height: 138px;
  border: 2px solid var(--panel-2);
  border-radius: 8px;
  background: rgba(18,18,32,0.94);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 7px;
  padding: 12px;
  text-align: left;
  transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
.apop-record-deal__choice:hover,
.apop-record-deal__choice:focus-visible {
  border-color: var(--accent-3);
  box-shadow: 0 0 0 2px rgba(247,215,22,0.18);
  transform: translateY(-2px);
  outline: none;
}
.apop-record-deal__icon {
  font-size: 24px;
  line-height: 1;
}
.apop-record-deal__name {
  color: var(--accent-3);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.05;
}
.apop-record-deal__desc {
  color: var(--ink-dim);
  font-size: 12px;
  line-height: 1.35;
}
.apop-tour-pass {
  display: grid;
  gap: 10px;
}
.apop-tour-pass__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(247,215,22,0.45);
  border-radius: 8px;
  background: rgba(10,10,20,0.68);
  padding: 9px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}
.apop-tour-pass__summary strong {
  color: var(--accent-3);
  font-family: var(--font-display);
  font-size: 15px;
}
.apop-tour-pass__badges {
  display: grid;
  gap: 8px;
}
.apop-tour-pass__badge {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 8px;
  border: 1px solid var(--panel-2);
  border-radius: 8px;
  background: rgba(10,10,20,0.58);
  color: var(--ink-dim);
  padding: 8px 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.3;
}
.apop-tour-pass__badge strong {
  display: block;
  color: var(--ink);
  font-size: 11.5px;
}
.apop-tour-pass__badge--unlocked {
  border-color: rgba(247,215,22,0.78);
  background: linear-gradient(90deg, rgba(247,215,22,0.14), rgba(46,224,255,0.07));
  color: var(--ink);
}
.apop-tour-pass__icon {
  font-size: 18px;
}
.apop-tour-pass__state {
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--ink-dim);
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 6px;
}
.apop-tour-pass__badge--unlocked .apop-tour-pass__state {
  background: var(--accent-3);
  color: var(--bg);
}
.apop-tour-pass__cosmetics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.apop-tour-pass__fit {
  border: 1px solid var(--panel-2);
  border-radius: 8px;
  background: rgba(10,10,20,0.62);
  color: var(--ink-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  padding: 9px 8px;
  transition: border-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
.apop-tour-pass__fit:not(:disabled):hover,
.apop-tour-pass__fit:not(:disabled):focus-visible {
  border-color: var(--accent-3);
  color: var(--ink);
  outline: none;
  transform: translateY(-1px);
}
.apop-tour-pass__fit--active {
  border-color: var(--accent-3);
  color: var(--accent-3);
  box-shadow: inset 0 0 0 1px rgba(247,215,22,0.3);
}
.apop-tour-pass__fit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ===== D-pad (mobile) ===== */
.dpad {
  display: none;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px;
  gap: 6px;
  margin-top: 6px;
}
.dpad button {
  background: var(--panel);
  border: 2px solid var(--panel-2);
  border-radius: 8px;
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.1s ease;
  font-family: var(--font-body);
}
.dpad button:active {
  background: var(--accent);
  color: var(--bg);
  transform: scale(0.95);
}
.dpad button[data-dir="up"]    { grid-column: 2; grid-row: 1; }
.dpad button[data-dir="left"]  { grid-column: 1; grid-row: 2; }
.dpad button[data-dir="down"]  { grid-column: 2; grid-row: 2; }
.dpad button[data-dir="right"] { grid-column: 3; grid-row: 2; }
@media (max-width: 768px) {
  .dpad { display: grid; }
}

/* ===== Modal (rewarded ad) ===== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: none; align-items: center; justify-content: center;
  z-index: 200;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}
.modal-backdrop--open { display: flex; }
.modal {
  background: var(--bg-soft);
  border: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 28px;
  max-width: 460px; width: 100%;
  text-align: center;
  box-shadow: 0 0 60px rgba(255, 46, 136, 0.4);
  animation: modalPop 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.modal__title { font-family: var(--font-display); font-size: 24px; margin: 0 0 8px; }
.modal__body { color: var(--ink-dim); margin: 0 0 20px; line-height: 1.5; }
.modal__countdown {
  font-family: var(--font-mono);
  font-size: 56px;
  color: var(--accent-3);
  margin: 16px 0;
  text-shadow: 0 0 20px rgba(247, 215, 22, 0.4);
}
.modal__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--panel);
  border: 2px solid var(--accent-2);
  padding: 12px 20px; border-radius: 8px;
  font-size: 14px; z-index: 150;
  transition: transform 0.25s ease, opacity 0.25s ease;
  max-width: 90vw;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}
.toast--show { transform: translateX(-50%) translateY(0); }
.toast--good { border-color: var(--good); }
.toast--bad { border-color: var(--bad); }

/* ===== Overlay (start / game over) ===== */
.overlay {
  position: absolute; inset: 0;
  background: rgba(10, 10, 20, 0.92);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  border-radius: 10px;
  z-index: 10;
  padding: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.overlay--show { display: flex; }
.overlay__title { font-family: var(--font-display); font-size: 32px; margin: 0 0 8px; text-shadow: 3px 3px 0 rgba(0,0,0,0.5); }
.overlay__sub { color: var(--ink-dim); margin: 0 0 20px; max-width: 320px; line-height: 1.5; }
.overlay__score { font-family: var(--font-mono); font-size: 14px; margin-bottom: 20px; color: var(--ink-dim); }
.overlay__score strong { color: var(--accent-3); }

/* ===== Coming soon page ===== */
.soon {
  max-width: 600px; margin: 0 auto; text-align: center; padding: 60px 16px;
}
.soon__emoji { font-size: 80px; margin-bottom: 20px; animation: bounce 2s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.soon__title { font-family: var(--font-display); font-size: 40px; margin: 0 0 12px; }
.soon__body { color: var(--ink-dim); line-height: 1.6; margin-bottom: 24px; }
.soon__notify { display: flex; gap: 8px; justify-content: center; max-width: 400px; margin: 0 auto; }
.soon__notify input {
  flex: 1; padding: 12px; border-radius: 6px; border: 2px solid var(--panel-2);
  background: var(--bg-soft); color: var(--ink); font-family: var(--font-body);
}
.soon__notify input:focus { outline: none; border-color: var(--accent); }

/* ===== Subscribe modal extras ===== */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--ink-dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .nav { padding: 12px 16px; }
  .nav__links { gap: 12px; font-size: 13px; }
  .nav__links a:not(.nav__cta) { display: none; }
  .hero { padding: 60px 16px 40px; }
  section { padding: 60px 16px; }
  .game-page__title { font-size: 26px; }
  .game-stage { padding: 14px; }
  .hud { font-size: 12px; padding: 8px 12px; }
  .hud__value { font-size: 16px; }
}

.mobile-controls {
  display: none;
}

.mobile-controls__grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-controls__dpad {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(3, 52px);
  justify-content: center;
}

.mobile-controls button {
  min-height: 48px;
  touch-action: none;
}

.mobile-controls__dpad button[data-mobile-dir="up"],
.mobile-controls__dpad button[data-gym-dir="up"] { grid-column: 2; grid-row: 1; }
.mobile-controls__dpad button[data-mobile-dir="left"],
.mobile-controls__dpad button[data-gym-dir="left"] { grid-column: 1; grid-row: 2; }
.mobile-controls__dpad button[data-mobile-dir="right"],
.mobile-controls__dpad button[data-gym-dir="right"] { grid-column: 3; grid-row: 2; }
.mobile-controls__dpad button[data-mobile-dir="down"],
.mobile-controls__dpad button[data-gym-dir="down"] { grid-column: 2; grid-row: 3; }
.mobile-controls__dpad button[data-gym-hold="eyes"] { grid-column: 2; grid-row: 2; }

/* ===== On-screen touch pad (canvas overlay) ===== */
.touch-pad {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  padding: 6px 10px 10px;
  pointer-events: none;
  z-index: 9;
}

.touch-pad__side {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
}

.touch-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.48);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  font-family: var(--font-body);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.08s, transform 0.08s;
}

.touch-btn:active {
  filter: brightness(1.5);
  transform: scale(0.93);
}

.touch-btn--jump {
  background: rgba(46, 224, 255, 0.35);
  border-color: rgba(46, 224, 255, 0.65);
}

.touch-btn--beam {
  background: rgba(236, 26, 94, 0.5);
  border-color: rgba(236, 26, 94, 0.85);
  width: 64px;
  height: 64px;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.touch-btn--aura {
  background: rgba(247, 215, 22, 0.4);
  border-color: rgba(247, 215, 22, 0.75);
  color: rgba(0, 0, 0, 0.8);
  font-size: 22px;
}

/* Invisible joystick — left thumb: push to run, up to aim up, down to crouch */
.touch-pad__side--move {
  gap: 0;
  align-items: flex-end;
}
.joystick {
  width: 150px;
  height: 160px;
  max-height: 60vh;
  background: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Max-screen (fullscreen) toggle */
.fs-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 11;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, transform 0.08s;
}
.fs-btn:hover { background: rgba(0, 0, 0, 0.72); }
.fs-btn:active { transform: scale(0.92); }

.rb-escape-host {
  position: relative;
}

.rb-escape-btn {
  align-items: center;
  background: rgba(0, 0, 0, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: var(--font-display);
  font-size: 18px;
  height: 38px;
  justify-content: center;
  left: 8px;
  line-height: 1;
  padding: 0;
  position: absolute;
  top: 8px;
  touch-action: manipulation;
  transition: background 0.12s, transform 0.08s;
  width: 38px;
  z-index: 12;
  -webkit-tap-highlight-color: transparent;
}
.rb-escape-btn:hover { background: rgba(0, 0, 0, 0.74); }
.rb-escape-btn:active { transform: scale(0.92); }

.rb-escape-menu {
  align-items: center;
  background: rgba(5, 5, 12, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: absolute;
  z-index: 10050;
}
.rb-escape-menu[hidden] { display: none; }
.rb-escape-menu__panel {
  background:
    linear-gradient(180deg, rgba(46, 224, 255, 0.10), transparent 42%),
    var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.56);
  max-width: 100%;
  padding: 22px;
  width: min(360px, 100%);
}
.rb-escape-menu__eyebrow {
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.rb-escape-menu__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  margin: 0 0 8px;
}
.rb-escape-menu__body {
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 18px;
}
.rb-escape-menu__panel--extras {
  width: min(420px, 100%);
}
.rb-escape-menu__extras {
  margin: 0 0 16px;
}
.rb-escape-menu__extras[hidden] {
  display: none;
}
.rb-escape-levels {
  display: grid;
  gap: 8px;
}
.rb-escape-levels__label {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.rb-escape-levels__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rb-escape-levels__btn {
  min-width: 72px;
  min-height: 42px;
  display: inline-grid;
  gap: 2px;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(107, 255, 125, 0.34);
  border-radius: 10px;
  background: rgba(3, 14, 18, 0.82);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.05;
  padding: 7px 9px;
}
.rb-escape-levels__btn small {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.rb-escape-levels__btn:hover:not(:disabled) {
  border-color: rgba(107, 255, 125, 0.72);
  background: rgba(8, 34, 40, 0.95);
}
.rb-escape-levels__btn.is-current {
  border-color: rgba(255, 212, 59, 0.78);
  background: rgba(42, 34, 8, 0.9);
}
.rb-escape-levels__btn:disabled {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(247, 251, 255, 0.34);
  cursor: not-allowed;
  opacity: 0.72;
}
.rb-escape-menu__actions {
  display: grid;
  gap: 10px;
}
.rb-escape-menu__actions .btn {
  justify-content: center;
  min-height: 44px;
}
.rb-escape-menu__actions .btn[hidden] {
  display: none;
}

/* Maximized canvas (pseudo-fullscreen; pairs with native Fullscreen API when available) */
.canvas-wrap.is-maxed,
.merge-board.is-maxed,
.rb-max-surface.is-maxed,
.game-stage.is-maxed {
  position: fixed;
  inset: 0;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none;
  aspect-ratio: auto;
  border: 0 !important;
  border-radius: 0;
  background: #05010a;
  box-shadow: none !important;
  outline: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.game-stage.is-maxed {
  flex-direction: column;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  overflow: auto;
}

.canvas-wrap.is-maxed:focus,
.canvas-wrap.is-maxed:focus-visible,
.canvas-wrap:fullscreen,
.canvas-wrap:-webkit-full-screen,
.canvas-wrap.is-maxed #gameCanvas:focus,
.canvas-wrap.is-maxed #gameCanvas:focus-visible {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body.rb-game-maxed {
  overflow: hidden;
}

body.rb-game-maxed .game-stage,
body.rb-game-maxed .clowder-stage {
  border-color: transparent !important;
  box-shadow: none !important;
  background: #05010a !important;
}

.canvas-wrap.is-maxed #gameCanvas {
  width: min(100dvw, calc(100dvh * var(--game-aspect, 1.5)));
  height: min(100dvh, calc(100dvw / var(--game-aspect, 1.5)));
  max-width: 100dvw;
  max-height: 100dvh;
  aspect-ratio: var(--game-aspect-ratio, 16 / 9);
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  outline: 0 !important;
}

.canvas-wrap:fullscreen,
.canvas-wrap:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #05010a !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.canvas-wrap:fullscreen #gameCanvas,
.canvas-wrap:-webkit-full-screen #gameCanvas,
#gameCanvas:focus,
#gameCanvas:focus-visible {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.canvas-wrap:fullscreen::backdrop,
.canvas-wrap:-webkit-full-screen::backdrop {
  background: #05010a;
}

html:has(body.rb-standalone-shell) {
  height: auto !important;
  overflow: auto !important;
}

body.rb-standalone-shell {
  background: var(--bg) !important;
  height: auto !important;
  min-height: 100dvh;
  overflow: auto !important;
  touch-action: auto !important;
}

.rb-standalone-stage {
  background: #05010a;
  border-color: rgba(216, 210, 198, 0.16);
  padding: 10px;
}

.rb-standalone-surface {
  --game-aspect: 1.7778;
  --game-aspect-ratio: 16 / 9;
  --game-max-width: 1180px;
  aspect-ratio: var(--game-aspect-ratio);
  background: #000;
  border: 1px solid rgba(216, 210, 198, 0.16);
  isolation: isolate;
  min-height: clamp(360px, 68dvh, 620px);
}

.rb-standalone-surface > :is(#app, #stage, #game, #hud, #jump, #touch, #touch-layer, .fx, .scr),
.rb-standalone-surface #app canvas {
  height: 100% !important;
  inset: 0 !important;
  position: absolute !important;
  width: 100% !important;
}

.rb-standalone-surface > :is(
  #fx-sub,
  #fx-title,
  #fx-hint,
  #fx-hint-paralysis,
  #fx-hint-astral,
  #obe-hud,
  #btn-touch-pause,
  #fx-rec,
  #fx-timecode,
  #fx-battlow,
  #joy-base,
  #joy-thumb,
  #btn-blink,
  #btn-pause
) {
  position: absolute !important;
}

.rb-standalone-surface #stage canvas,
.rb-standalone-surface #game canvas {
  max-width: none;
}

.rb-standalone-surface > .fs-btn {
  z-index: 43;
}

.rb-standalone-surface.is-maxed {
  min-height: 100dvh;
}

.rb-standalone-shell .game-side__panel--afterdark {
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
}

.rb-standalone-shell .game-side__panel--afterdark p {
  margin: 0;
}

.rb-standalone-shell .game-side__panel--afterdark p + p {
  margin-top: 8px;
}
.canvas-wrap.is-maxed .joystick { width: 40vw; max-width: 300px; height: 52vh; }
.canvas-wrap.is-maxed .touch-btn { width: 76px; height: 76px; }
.canvas-wrap.is-maxed .touch-btn--beam { width: 88px; height: 88px; }
.canvas-wrap.is-maxed .rb-escape-btn {
  left: max(10px, env(safe-area-inset-left));
  top: max(10px, env(safe-area-inset-top));
}

.rb-touch-layer {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  z-index: 9;
}

.canvas-wrap.is-maxed .rb-touch-layer {
  display: block;
}

.rb-touch-cluster {
  position: absolute;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.rb-touch-cluster--left {
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
}

.rb-touch-cluster--right {
  bottom: max(10px, env(safe-area-inset-bottom));
  right: max(10px, env(safe-area-inset-right));
}

.rb-touch-cluster--stack {
  align-items: flex-end;
  flex-direction: column;
}

.rb-touch-btn {
  align-items: center;
  background: rgba(5, 7, 15, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 13px;
  height: 54px;
  justify-content: center;
  letter-spacing: 0;
  min-width: 54px;
  padding: 0 13px;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
}

.rb-touch-btn--wide {
  min-width: 78px;
}

.rb-touch-btn--accent {
  background: rgba(46, 224, 255, 0.30);
  border-color: rgba(46, 224, 255, 0.52);
}

.rb-touch-btn--primary {
  background: rgba(255, 46, 136, 0.34);
  border-color: rgba(255, 46, 136, 0.58);
}

.rb-touch-btn--yellow {
  background: rgba(255, 212, 59, 0.32);
  border-color: rgba(255, 212, 59, 0.58);
  color: rgba(8, 8, 16, 0.86);
}

.rb-touch-btn:active,
.rb-touch-btn.is-held,
.rb-touch-btn.is-active {
  filter: brightness(1.28);
  transform: scale(0.94);
}

.rb-touch-zone {
  position: absolute;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: max(8px, env(safe-area-inset-left));
  width: min(42%, 170px);
  height: min(42%, 170px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(46, 224, 255, 0.045);
  pointer-events: auto;
  touch-action: none;
}

.rb-touch-zone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  transform: translate(-50%, -50%);
}

.rb-touch-zone.is-held {
  background: rgba(46, 224, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.18);
}

.rb-touch-dpad {
  position: absolute;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(3, 50px);
  gap: 5px;
  pointer-events: auto;
}

.rb-touch-dpad .rb-touch-btn {
  height: 50px;
  min-width: 50px;
  padding: 0;
}

.rb-touch-dpad [data-ctrl="thrust"] { grid-column: 2; grid-row: 1; }
.rb-touch-dpad [data-ctrl="left"] { grid-column: 1; grid-row: 2; }
.rb-touch-dpad [data-ctrl="horn"] { grid-column: 2; grid-row: 2; font-size: 10px; }
.rb-touch-dpad [data-ctrl="right"] { grid-column: 3; grid-row: 2; }
.rb-touch-dpad [data-ctrl="brake"] { grid-column: 2; grid-row: 3; }

.rb-touch-layer--unhinged .rb-touch-zone {
  width: 96px;
  height: 96px;
}

.rb-touch-layer--unhinged .rb-touch-cluster--right {
  flex-direction: row;
}

.rb-touch-layer--unhinged .rb-touch-btn {
  font-size: 11px;
  height: 44px;
  min-width: 58px;
  opacity: 0.82;
  padding: 0 9px;
}

@media (hover: none) and (pointer: coarse) {
  .rb-touch-layer {
    display: block;
  }
}

@media (max-width: 900px) {
  .rb-touch-layer {
    display: block;
  }
}

@media (max-width: 480px) {
  .rb-touch-btn {
    height: 48px;
    min-width: 48px;
    padding: 0 11px;
  }

  .rb-touch-btn--wide {
    min-width: 70px;
  }

  .rb-touch-dpad {
    grid-template-columns: repeat(3, 46px);
    grid-template-rows: repeat(3, 46px);
  }

  .rb-touch-dpad .rb-touch-btn {
    height: 46px;
    min-width: 46px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .touch-pad {
    display: flex;
  }
}

@media (max-width: 900px) {
  .game-page,
  .tower-defense-page .game-page {
    --game-shell-gap: 10px;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .game-stage,
  .tower-defense-page .game-stage {
    max-height: none;
    overflow: visible;
  }

  .canvas-wrap,
  .tower-defense-page .canvas-wrap--ar-800-520 {
    width: 100%;
    max-height: none;
  }

  .game-page {
    padding: 8px max(8px, env(safe-area-inset-left)) 12px max(8px, env(safe-area-inset-right));
  }

  .game-page__header {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
  }

  .game-page__header .btn {
    justify-self: start;
    min-height: 36px;
    padding: 7px 10px !important;
    width: auto;
  }

  .game-page__title {
    font-size: clamp(19px, 5.6vw, 26px);
  }

  .game-page__sub {
    font-size: 11px;
    line-height: 1.3;
  }

  .game-layout {
    gap: 10px;
  }

  .game-stage {
    gap: 7px;
    padding: 7px;
  }

  .rb-game-chrome {
    gap: 5px;
    padding: 5px;
  }
  .rb-game-chrome__btn {
    min-height: 44px;
    padding: 6px 2px 5px;
  }
  .rb-game-chrome__label {
    font-size: 8px;
    letter-spacing: 0.06em;
  }

  .hud {
    gap: 6px;
    justify-content: center;
  }

  .hud__item {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    flex: 1 1 92px;
    justify-content: center;
    min-width: 0;
    padding: 3px 6px;
  }

  .game-side {
    gap: 8px;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    padding-right: 0;
  }

  .game-side__panel {
    padding: 10px;
  }

  .game-side__poster {
    max-height: clamp(118px, 25dvh, 160px);
  }

  .game-side__howto {
    max-height: none;
    padding: 10px;
  }

  .controls-row .btn {
    flex: 1 1 120px;
    min-height: 44px;
  }

  .mobile-controls {
    display: grid;
    gap: 10px;
    margin-top: 10px;
  }

  .powerups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    width: 100%;
  }

  .powerup {
    min-width: 0;
    width: 100%;
  }

  .game-side #ad-rectangle,
  .game-side .ad-slot--rectangle {
    display: none !important;
  }

  .game-side .ad-slot--leaderboard {
    min-height: 72px;
  }
}
@media (max-width: 600px) {
  .rb-standalone-surface:not(.is-maxed) {
    aspect-ratio: auto;
    height: clamp(460px, 62dvh, 540px);
    min-height: 0;
  }

  .rb-standalone-surface:not(.is-maxed) .scr {
    padding: 18px 14px !important;
  }

  .rb-standalone-surface:not(.is-maxed) .scr__kicker {
    font-size: 10px !important;
    letter-spacing: 0.28em !important;
    margin-bottom: 14px !important;
  }

  .rb-standalone-surface:not(.is-maxed) .scr__title {
    font-size: clamp(32px, 10.5vw, 38px) !important;
    line-height: 1.02 !important;
    margin-bottom: 14px !important;
  }

  .rb-standalone-surface:not(.is-maxed) .scr__sub {
    font-size: clamp(15px, 4.5vw, 18px) !important;
    line-height: 1.5 !important;
    margin-bottom: 18px !important;
  }

  .rb-standalone-surface:not(.is-maxed) .ebtn {
    font-size: 12px !important;
    padding: 12px 24px !important;
  }

  .rb-standalone-surface:not(.is-maxed) #loadbar-wrap {
    margin-top: 14px !important;
  }

  .rb-standalone-surface:not(.is-maxed) .scr__warn {
    font-size: 9px !important;
    line-height: 1.6 !important;
    margin-top: 16px !important;
  }
}
@media (max-width: 480px) {
  .hero { padding: 40px 14px 30px; }
  .hero__pill { font-size: 10px; padding: 5px 10px; }
  .game-page__header .btn {
    width: 100%;
  }
  .game-page__sub {
    display: none;
  }
  .powerup { min-width: 100px; padding: 8px 10px; font-size: 11px; }
  .powerup__icon { font-size: 16px; }
  .overlay {
    padding: 14px;
  }
  .overlay__title {
    font-size: 24px;
  }
  .overlay__sub {
    font-size: 13px;
    max-width: 92%;
  }
  .overlay--apop {
    gap: 8px;
    padding: 34px 12px 12px;
  }
  .overlay--apop .overlay__title {
    font-size: 20px;
    line-height: 1;
    margin: 0;
  }
  .overlay--apop .overlay__sub {
    font-size: 11px;
    line-height: 1.28;
    margin: 0;
    max-width: 96%;
  }
  .overlay--apop .overlay__sub br {
    display: none;
  }
  .overlay--apop .overlay__score {
    font-size: 11px;
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .overlay--apop .btn {
    min-height: 42px;
    padding: 10px 12px;
    width: min(100%, 272px);
  }
  .apop-record-deal {
    position: fixed;
    inset: 0;
    z-index: 220;
    border-radius: 0;
    padding: 14px;
  }
  .apop-record-deal__panel {
    width: min(100%, 360px);
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    padding: 12px;
  }
  .apop-record-deal__choices {
    grid-template-columns: 1fr;
  }
  .apop-record-deal__choice {
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
    gap: 5px;
    padding: 10px;
  }
  .apop-record-deal__icon {
    grid-row: 1 / span 2;
    font-size: 21px;
  }
  .apop-record-deal__name {
    font-size: 14px;
  }
  .mobile-controls__dpad {
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(3, 48px);
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .game-side__poster {
    max-height: 118px;
  }

  .game-side__panel {
    padding-block: 9px;
  }

  .game-side__howto {
    max-height: none;
    overflow: visible;
  }
}

/* ===== AFTER DARK — the horror shelf ===== */
.game-card--horror { border-color: #15100e; background: #0c0908; }
.game-card--horror:hover {
  border-color: #7a1f1f;
  box-shadow: 0 16px 48px rgba(122, 31, 31, 0.35);
}
.game-card__art--hallway {
  background: radial-gradient(130% 100% at 50% 115%, #2b1812 0%, #150d0e 45%, #060507 100%);
}
.game-card__art--hallway::before {
  content: "";
  position: absolute; left: 50%; top: 16%;
  transform: translateX(-50%);
  width: 30px; height: 66%;
  background: linear-gradient(180deg, rgba(255,212,164,0.30), rgba(255,212,164,0.04));
  box-shadow: 0 0 34px 8px rgba(255,190,130,0.16);
  animation: doorglow 5s ease-in-out infinite;
}
@keyframes doorglow { 50% { opacity: 0.55; } }
.game-card__art--hallway::after {
  content: "";
  position: absolute; left: 50%; bottom: 17%;
  transform: translateX(-50%);
  width: 12px; height: 34px;
  background: #050505;
  border-radius: 5px 5px 0 0;
  opacity: 0;
  animation: herblink 7s steps(1) infinite;
}
@keyframes herblink { 0%, 87% { opacity: 0; } 88%, 93% { opacity: 0.9; } 94%, 100% { opacity: 0; } }
.game-card__art-text--serif {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: #d8d2c6;
  text-shadow: 0 2px 22px rgba(0,0,0,0.9);
}
.game-card--horror .game-card__title { color: #d8d2c6; }
.game-card--horror .game-card__cta { color: #b85c5c; }
.game-card__tag--horror { background: #7a1f1f; color: #f3e4e4; }

/* ===== Rainbot site refresh ===== */
#nav-slot {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

body {
  background:
    linear-gradient(180deg, #080810 0%, #0d0c18 48%, #080810 100%);
}

body::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 5px),
    linear-gradient(rgba(255, 46, 136, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 224, 255, 0.045) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  animation: gridDrift 36s linear infinite;
}

.nav {
  padding: 12px 24px;
  border-bottom: 1px solid rgba(46, 224, 255, 0.22);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.nav__brand {
  font-size: 19px;
  letter-spacing: 0;
}

.nav__brand-sub {
  color: var(--accent-3);
  letter-spacing: 1.4px;
}

.nav__brand-accent::after {
  display: none;
}

.nav__brand-mark {
  border-radius: 8px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.62), 0 0 22px rgba(255, 46, 136, 0.28);
}

.nav__links {
  gap: 16px;
}

.nav__links a {
  text-decoration: none;
}

.nav__cta,
.btn {
  border-radius: 8px;
}

.nav__cta {
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.55);
}

.hero {
  text-align: left;
  padding: 74px 24px 54px;
  background:
    linear-gradient(135deg, rgba(255, 46, 136, 0.16) 0%, transparent 32%),
    linear-gradient(315deg, rgba(46, 224, 255, 0.13) 0%, transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.026) 0, rgba(255, 255, 255, 0.026) 1px, transparent 1px, transparent 78px),
    var(--bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero::before {
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0%, transparent 52%, rgba(255, 212, 59, 0.09) 52%, rgba(255, 212, 59, 0.09) 54%, transparent 54%),
    repeating-linear-gradient(-8deg, transparent 0, transparent 18px, rgba(255, 255, 255, 0.02) 18px, rgba(255, 255, 255, 0.02) 19px);
  animation: none;
}

.hero__inner {
  width: min(100%, 1200px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 44px;
  align-items: center;
}

.hero__copy {
  max-width: 560px;
}

.hero__title {
  font-size: 76px;
  line-height: 0.92;
  letter-spacing: 0;
  margin: 0 0 24px;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
}

.home-page .hero__title .word {
  display: block;
  margin: 0;
  animation: none;
}

.hero__sub {
  font-size: 18px;
  max-width: 520px;
  margin: 0 0 28px;
  color: #d5d2e3;
}

.hero__ctas {
  justify-content: flex-start;
}

.hero__media {
  position: relative;
  min-width: 0;
}

.hero__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(46, 224, 255, 0.24);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 0 36px rgba(255, 46, 136, 0.14);
}

.hero__media-strip {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.hero__media-strip span {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 7px 8px;
  background: rgba(8, 8, 16, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn {
  font-size: 15px;
  letter-spacing: 0.6px;
  padding: 13px 18px;
}

.btn--primary {
  background: linear-gradient(180deg, #ff4b9e, var(--accent));
  color: #07070e;
}

.btn--primary:hover {
  background: linear-gradient(180deg, #ff68ae, #ff2e88);
}

.btn--ghost {
  border-color: rgba(251, 250, 244, 0.74);
}

section {
  max-width: 1200px;
  padding: 72px 24px;
}

.section__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}

.section__title {
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  text-align: left;
}

.section__title--small {
  font-size: 30px;
  color: var(--ink-dim);
}

.section__sub {
  text-align: left;
  margin: 0;
  max-width: 520px;
  color: var(--ink-dim);
}

.game-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.game-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.game-grid--single {
  max-width: 520px;
}

.game-card {
  background: linear-gradient(180deg, rgba(31, 30, 54, 0.98), rgba(18, 18, 34, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
}

.game-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 46, 136, 0.82);
  box-shadow: 0 18px 44px rgba(255, 46, 136, 0.18), 0 8px 0 rgba(0, 0, 0, 0.45);
}

.game-card--dimmed {
  opacity: 0.72;
}

.game-card__art {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.game-card:not(.game-card--horror) .game-card__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 5px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 36%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

.game-card__art--apop {
  background:
    linear-gradient(135deg, rgba(255, 46, 136, 0.82) 0%, transparent 44%),
    linear-gradient(315deg, rgba(255, 212, 59, 0.82) 0%, transparent 42%),
    linear-gradient(135deg, #4a1a5a 0%, #1a0826 100%);
}

.game-card__art-text {
  font-size: 21px;
  letter-spacing: 0;
}

.game-card__tag {
  border-radius: 5px;
}

.game-card__body {
  padding: 18px;
}

.game-card__title {
  font-size: 20px;
  letter-spacing: 0;
}

.game-card__desc {
  color: #c3c0d4;
}

.section--after-dark {
  max-width: none;
  background:
    linear-gradient(180deg, rgba(10, 6, 7, 0.72), rgba(21, 10, 12, 0.92)),
    repeating-linear-gradient(90deg, rgba(122, 31, 31, 0.12) 0, rgba(122, 31, 31, 0.12) 1px, transparent 1px, transparent 80px);
  border-top: 1px solid rgba(122, 31, 31, 0.5);
  border-bottom: 1px solid rgba(122, 31, 31, 0.5);
}

.section--after-dark .section__header,
.section--after-dark .game-grid {
  width: min(100%, 1200px);
  margin-left: auto;
  margin-right: auto;
}

.section--after-dark .section__title {
  color: #d8d2c6;
}

.features {
  gap: 16px;
  margin-top: 0;
}

.feature,
.plan {
  background: linear-gradient(180deg, rgba(31, 30, 54, 0.96), rgba(18, 18, 34, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.feature {
  padding: 24px;
}

.feature__title,
.plan__name {
  letter-spacing: 0;
}

.pricing {
  margin-top: 0;
  gap: 18px;
}

.plan--pro {
  border-color: rgba(255, 46, 136, 0.88);
  box-shadow: 0 0 36px rgba(255, 46, 136, 0.12);
}

.ad-slot {
  border: 1px dashed rgba(46, 224, 255, 0.32);
  background: rgba(25, 24, 45, 0.72);
}

.footer {
  background: #0b0b16;
  border-top: 1px solid rgba(46, 224, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero__copy {
    max-width: 720px;
  }

  .hero__title {
    font-size: 58px;
  }

  .hero__sub {
    max-width: 620px;
  }

  .section__header {
    display: block;
  }

  .section__sub {
    margin-top: 12px;
  }
}

@media (max-width: 768px) {
  #nav-slot {
    gap: 12px;
  }

  .nav {
    padding: 10px 14px;
  }

  .nav__brand {
    font-size: 16px;
  }

  .hero {
    padding: 36px 16px 26px;
  }

  .hero__title {
    font-size: 44px;
  }

  .hero__sub {
    font-size: 15px;
  }

  .hero__media-strip {
    position: static;
    margin-top: 8px;
  }

  section {
    padding: 56px 16px;
  }

  .section__title {
    font-size: 36px;
  }
}

@media (max-width: 560px) {
  .hero__title {
    font-size: 40px;
  }

  .hero__ctas,
  .controls-row,
  .modal__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  .hero__media-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero__media img {
    aspect-ratio: 16 / 9;
  }

  .hero__media-strip span {
    min-height: 30px;
    padding: 5px 4px;
    font-size: 9px;
    letter-spacing: 0;
  }

  .game-grid {
    grid-template-columns: 1fr;
  }

  .section__title {
    font-size: 32px;
  }
}

/* ============================================
   RAINBOT GAMING - arcade portal redesign
   ============================================ */

:root {
  --arcade-bg: #05070d;
  --arcade-bg-2: #080b12;
  --arcade-panel: #080b13;
  --arcade-line: #2b3544;
  --arcade-line-bright: #19e7ff;
  --arcade-pink: #ff1490;
  --arcade-pink-2: #ff3ba7;
  --arcade-cyan: #23dff2;
  --arcade-yellow: #f7d924;
  --arcade-green: #48f35a;
  --arcade-white: #f9fbff;
  --arcade-muted: #aeb7c3;
  --arcade-font: "Press Start 2P", "JetBrains Mono", monospace;
}

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

body.arcade-home,
body:not(.home-page) {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 20, 144, 0.12), transparent 27rem),
    radial-gradient(circle at 88% 8%, rgba(35, 223, 242, 0.11), transparent 30rem),
    linear-gradient(180deg, #05070d 0%, #060711 48%, #05070d 100%);
}

body.arcade-home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.arcade-home > .arcade-shell {
  flex: 1 0 auto;
}

body.arcade-home::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 4px),
    linear-gradient(rgba(255, 20, 144, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 223, 242, 0.05) 1px, transparent 1px);
  background-size: auto, 54px 54px, 54px 54px;
  animation: none;
  z-index: 0;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 84px;
  padding: 0 22px;
  background: rgba(3, 5, 10, 0.96);
  border: 1px solid rgba(151, 171, 194, 0.3);
  border-left-color: rgba(35, 223, 242, 0.22);
  border-right-color: rgba(255, 20, 144, 0.22);
  border-bottom-color: rgba(64, 79, 99, 0.9);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.nav:has(.nav__search.is-open),
.nav:has(.nav__search-results:not([hidden])) {
  z-index: 10120;
}

#nav-slot {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto;
  grid-template-areas: "brand links cluster";
  align-items: center;
  gap: 14px;
}

.nav__brand {
  grid-area: brand;
  align-items: center;
  display: flex;
  height: 82px;
  min-width: 0;
}

.nav__brand img {
  width: 260px;
  max-width: 100%;
  image-rendering: pixelated;
}

.nav__links {
  grid-area: links;
  display: flex;
  justify-content: flex-start;
  gap: clamp(14px, 2vw, 34px);
  min-width: 0;
}

.nav__links a {
  position: relative;
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}

.nav__links a:hover,
.nav__links a.is-active {
  color: var(--arcade-pink);
  text-decoration: none;
}

.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 2px;
  background: var(--arcade-pink);
  box-shadow: 0 0 10px rgba(255, 20, 144, 0.95);
}

.nav__cluster {
  grid-area: cluster;
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
}

.nav__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(151, 171, 194, 0.42);
  border-radius: 4px;
  background: #05070d;
  color: var(--arcade-white);
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.nav__menu-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 140ms ease, opacity 140ms ease;
}

.nav__menu-toggle.is-open .nav__menu-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__menu-toggle.is-open .nav__menu-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__menu-toggle.is-open .nav__menu-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav__drawer {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px 14px;
  background: rgba(3, 5, 10, 0.98);
  border-top: 1px solid rgba(64, 79, 99, 0.9);
}

.nav__drawer:not([hidden]) {
  display: flex;
}

.nav__drawer a {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 11px;
  line-height: 1.2;
  padding: 10px 12px;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid rgba(151, 171, 194, 0.22);
  border-radius: 4px;
  background: rgba(5, 7, 13, 0.84);
}

.nav__drawer a:hover,
.nav__drawer a.is-active {
  border-color: var(--arcade-pink);
  color: var(--arcade-pink);
  text-decoration: none;
}

.nav__search-wrap {
  position: relative;
  touch-action: manipulation;
  width: 42px;
  z-index: 2;
  flex-shrink: 0;
}

.nav__search-wrap:has(.nav__search.is-open) {
  width: min(290px, 100%);
}

.nav__search {
  display: grid;
  grid-template-columns: 0 minmax(42px, auto);
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 42px;
  background: #05070d;
  border: 1px solid rgba(151, 171, 194, 0.42);
  border-radius: 4px;
  overflow: hidden;
}

.nav__search.is-open {
  grid-template-columns: minmax(0, 1fr) 42px;
}

.nav__search input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--arcade-white);
  font: 500 15px/1 var(--font-body);
  padding: 0;
  opacity: 0;
  outline: none;
  pointer-events: none;
  transition: opacity 140ms ease, padding 140ms ease;
}

.nav__search.is-open input {
  opacity: 1;
  padding: 0 14px;
  pointer-events: auto;
}

.nav__search input::placeholder {
  color: #9aa4b4;
}

.nav__search-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--arcade-white);
  cursor: pointer;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.nav__search.is-open .nav__search-toggle {
  border-left: 1px solid rgba(151, 171, 194, 0.2);
}

.nav__search-icon {
  display: block;
  flex: 0 0 auto;
}

.nav__search-results {
  background: #05070d;
  border: 1px solid rgba(151, 171, 194, 0.42);
  border-radius: 4px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  left: 0;
  margin-top: 6px;
  max-height: min(360px, 58vh);
  overflow: auto;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 12;
}

.nav__search-result {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--arcade-white);
  cursor: pointer;
  display: grid;
  gap: 2px 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.nav__search-result + .nav__search-result {
  border-top: 1px solid rgba(151, 171, 194, 0.16);
}

.nav__search-result:hover,
.nav__search-result.is-active {
  background: rgba(46, 224, 255, 0.08);
}

.nav__search-result-type {
  color: var(--arcade-cyan);
  font-family: var(--arcade-font);
  font-size: 8px;
  grid-row: 1 / span 2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav__search-result-label {
  font: 600 13px/1.25 var(--font-body);
}

.nav__search-result-meta {
  color: #9aa4b4;
  font: 500 11px/1.2 var(--font-body);
  grid-column: 2;
}

.nav__search-viewall {
  align-items: center;
  background: rgba(35, 223, 242, 0.08);
  border-top: 1px solid rgba(151, 171, 194, 0.16);
  color: var(--arcade-cyan);
  display: flex;
  font-family: var(--arcade-font);
  font-size: 8px;
  justify-content: center;
  letter-spacing: 0.04em;
  min-height: 36px;
  padding: 10px 12px;
  text-decoration: none;
  text-transform: uppercase;
}

.nav__search-viewall:hover {
  background: rgba(35, 223, 242, 0.14);
  text-decoration: none;
}

.search-directory {
  max-width: 1480px;
  padding-top: 12px;
  padding-bottom: 24px;
}

.search-panel {
  padding-bottom: 16px;
}

.search-panel .search-toolbar {
  padding: 14px 18px 0;
}

.search-panel [data-search-page-results],
.search-panel [data-search-page-browse] {
  padding: 14px 18px 18px;
}

.search-panel .search-panel__empty {
  margin-inline: 18px;
}

.search-hero {
  display: grid;
  gap: 18px;
  margin-bottom: 10px;
  padding: 34px;
  background:
    radial-gradient(circle at 82% 18%, rgba(35, 223, 242, 0.18), transparent 34%),
    linear-gradient(95deg, rgba(255, 20, 144, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(9, 15, 28, 0.96), rgba(3, 6, 11, 0.99));
}

.search-hero__eyebrow {
  color: var(--arcade-cyan);
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.search-hero h1 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 0.95;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.search-hero__copy p {
  color: #e6eef6;
  font: 500 15px/1.5 var(--font-body);
  margin: 0;
  max-width: 720px;
}

.search-hero__form {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: 760px;
}

.search-hero__form input {
  background: #05070d;
  border: 1px solid rgba(151, 171, 194, 0.42);
  border-radius: 4px;
  color: var(--arcade-white);
  font: 500 16px/1 var(--font-body);
  min-height: 52px;
  padding: 0 16px;
}

.search-hero__form input:focus-visible {
  border-color: var(--arcade-cyan);
  outline: 2px solid rgba(35, 223, 242, 0.28);
  outline-offset: 2px;
}

.search-hero__stats {
  color: var(--arcade-muted);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  gap: 14px;
  text-transform: uppercase;
}

.search-hero__stats b {
  color: var(--arcade-yellow);
}

.search-panel__count {
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.search-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.search-typebar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-typebar button {
  background: rgba(5, 7, 13, 0.84);
  border: 1px solid rgba(151, 171, 194, 0.28);
  border-radius: 4px;
  color: var(--arcade-white);
  cursor: pointer;
  font-family: var(--arcade-font);
  font-size: 9px;
  min-height: 34px;
  padding: 8px 12px;
  text-transform: uppercase;
}

.search-typebar button.is-active,
.search-typebar button[aria-pressed="true"] {
  border-color: var(--arcade-pink);
  color: var(--arcade-pink);
}

.search-toolbar__sort {
  align-items: center;
  color: var(--arcade-muted);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  gap: 8px;
  text-transform: uppercase;
}

.search-toolbar__sort select {
  background: #05070d;
  border: 1px solid rgba(151, 171, 194, 0.42);
  border-radius: 4px;
  color: var(--arcade-white);
  font: 600 12px/1 var(--font-body);
  min-height: 34px;
  padding: 0 10px;
}

.search-panel__empty {
  border: 1px dashed rgba(151, 171, 194, 0.28);
  border-radius: 4px;
  color: var(--arcade-muted);
  font: 600 14px/1.45 var(--font-body);
  margin: 0 0 18px;
  padding: 18px;
}

.search-results-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.search-results-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.search-result-card {
  background: rgba(5, 7, 13, 0.84);
  border: 1px solid rgba(151, 171, 194, 0.24);
  border-radius: 4px;
  color: var(--arcade-white);
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
}

.search-result-card:hover {
  border-color: var(--arcade-cyan);
  text-decoration: none;
  transform: translateY(-1px);
}

.search-result-card__type {
  color: var(--arcade-cyan);
  font-family: var(--arcade-font);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.search-result-card__title {
  font: 800 16px/1.25 var(--font-body);
}

.search-result-card__meta {
  color: var(--arcade-yellow);
  font: 700 11px/1.2 var(--font-mono);
  text-transform: uppercase;
}

.search-result-card__snippet {
  color: #9aa4b4;
  font: 500 13px/1.45 var(--font-body);
  margin: 0;
}

.search-result-card__snippet mark {
  background: rgba(255, 20, 144, 0.18);
  color: var(--arcade-pink);
  padding: 0 2px;
}

.search-browse-group + .search-browse-group {
  margin-top: 24px;
}

.search-browse-group__header {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.search-browse-group__header h3 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 14px;
  margin: 0;
  text-transform: uppercase;
}

.search-browse-group__header a {
  color: var(--arcade-cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .search-hero__form {
    grid-template-columns: 1fr;
  }

  .search-results-grid,
  .search-results-grid--compact {
    grid-template-columns: 1fr;
  }
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

.nav__cta {
  align-items: center;
  background: transparent;
  border-radius: 3px;
  box-shadow: none;
  color: var(--arcade-white) !important;
  display: inline-flex;
  font-family: var(--arcade-font);
  font-size: 10px;
  height: 38px;
  justify-content: center;
  letter-spacing: 0;
  min-width: 114px;
  padding: 0 16px;
  text-decoration: none;
  text-transform: uppercase;
}

.nav__cta:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.nav__cta--pro {
  border: 2px solid var(--arcade-yellow);
  color: var(--arcade-yellow) !important;
}

.nav__cta--login {
  border: 2px solid var(--arcade-cyan);
  color: var(--arcade-cyan) !important;
}

.nav__pro-state {
  border: 1px solid var(--arcade-yellow);
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 8px;
  padding: 5px 7px;
}

@media (max-width: 1600px) and (min-width: 1341px) {
  .nav__links {
    flex-wrap: wrap;
    gap: 8px clamp(12px, 1.45vw, 22px);
    line-height: 1.25;
  }

  .nav__links a.is-active::after {
    bottom: -8px;
  }

  .nav__cluster .nav__search-wrap:has(.nav__search.is-open) {
    width: min(280px, 34vw);
  }
}

.arcade-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1536px);
  margin: 0 auto;
  padding: 0 12px 8px;
}

.arcade-shell > section {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

.portal-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(690px, 0.97fr) minmax(560px, 1fr);
  height: 360px;
  min-height: 0;
  padding: 28px 36px 24px 110px;
  overflow: hidden;
  border-bottom: 1px solid rgba(45, 58, 78, 0.8);
  background:
    linear-gradient(90deg, rgba(255, 20, 144, 0.12), transparent 14%),
    radial-gradient(circle at 78% 36%, rgba(35, 223, 242, 0.2), transparent 32%),
    linear-gradient(180deg, rgba(9, 15, 28, 0.66), rgba(5, 7, 13, 0.94));
}

.portal-hero::before,
.portal-hero::after {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 22px;
  width: 24px;
  border-top: 2px solid var(--arcade-pink);
  border-bottom: 2px solid var(--arcade-pink);
  opacity: 0.8;
}

.portal-hero::before {
  left: 58px;
  border-left: 2px solid var(--arcade-pink);
  box-shadow: inset 8px 0 0 rgba(255, 20, 144, 0.08);
}

.portal-hero::after {
  right: 44px;
  border-right: 2px solid var(--arcade-pink);
  border-color: var(--arcade-pink);
}

.portal-hero__scan {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent 0, rgba(35, 223, 242, 0.12) 50%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.25;
  pointer-events: none;
}

.portal-hero__copy,
.portal-hero__media {
  position: relative;
  z-index: 1;
}

.portal-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  z-index: 2;
}

.portal-hero__title {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(31px, 2.42vw, 37px);
  line-height: 1.12;
  margin: 0 0 18px;
  text-transform: uppercase;
  transform: scaleX(0.74);
  transform-origin: left top;
  text-shadow: 3px 0 0 rgba(255, 20, 144, 0.22), -2px 0 0 rgba(35, 223, 242, 0.18);
  width: 150%;
}

.portal-hero__title-line,
.portal-hero__tagline {
  display: block;
  width: max-content;
}

.portal-hero__title-line + .portal-hero__title-line {
  margin-top: 3px;
}

.portal-hero__tagline {
  color: var(--arcade-pink);
  margin-top: 12px;
}

.portal-hero__title::after {
  content: "";
  display: block;
  width: min(560px, 78%);
  height: 4px;
  margin-top: 10px;
  background: repeating-linear-gradient(90deg, var(--arcade-cyan) 0 7px, transparent 7px 10px);
  opacity: 0.9;
}

.portal-hero__sub {
  color: #edf2f6;
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.28;
  max-width: 540px;
  margin: 0 0 18px;
}

.portal-hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.arcade-btn {
  align-items: center;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--arcade-font);
  font-size: 13px;
  gap: 12px;
  justify-content: center;
  min-height: 58px;
  padding: 0 30px;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  white-space: nowrap;
}

.arcade-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.arcade-btn--primary {
  background: linear-gradient(180deg, #ff2ba0, #e01385);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24) inset, 0 0 18px rgba(255, 20, 144, 0.78);
  color: white;
  min-width: 278px;
}

.arcade-btn__mark {
  color: white;
  font-size: 10px;
}

.arcade-btn__mark::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 6px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 17px solid currentColor;
  vertical-align: -5px;
}

.arcade-btn--outline {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--arcade-cyan);
  color: var(--arcade-cyan);
  min-width: 274px;
}

.arcade-btn__bolt {
  color: var(--arcade-cyan);
  font-size: 10px;
}

.arcade-btn--cyan,
.arcade-btn--yellow {
  width: 100%;
  min-height: 32px;
  padding: 0 14px;
  font-size: 10px;
  color: #001017;
}

.arcade-btn--cyan {
  background: linear-gradient(180deg, #2ee0ff, #20c7d7);
}

.arcade-btn--yellow {
  background: linear-gradient(180deg, #ffdf32, #f2c600);
}

.portal-hero__status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  color: var(--arcade-white);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.portal-hero__status span {
  align-items: center;
  display: inline-flex;
  min-height: 20px;
}

.portal-hero__status span + span::before {
  color: var(--arcade-cyan);
  content: "|";
  margin: 0 18px;
}

.portal-hero__status i {
  width: 11px;
  height: 11px;
  margin-right: 8px;
  background: var(--arcade-green);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(72, 243, 90, 0.85);
}

.portal-hero__media {
  bottom: 0;
  display: block;
  min-width: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: min(58vw, 860px);
  z-index: 1;
}

.portal-hero__media img {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 28px rgba(35, 223, 242, 0.16));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 100%);
}

.arcade-panel {
  background: rgba(5, 8, 15, 0.94);
  border: 1px solid rgba(113, 132, 156, 0.48);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 20, 144, 0.04) inset;
}

.arcade-panel__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 18px;
}

.arcade-panel__header h2 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 14px;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.arcade-panel__header a {
  color: var(--arcade-cyan);
  font-family: var(--arcade-font);
  font-size: 9px;
  text-transform: uppercase;
  text-decoration: none;
}

.arcade-panel__header a::after {
  content: ">";
  margin-left: 10px;
}

.arcade-panel__header--pink h2,
.arcade-panel__header--pink a {
  color: var(--arcade-pink);
}

.panel-glyph {
  color: var(--arcade-yellow);
  margin-right: 12px;
}

.home-recent-panel,
.home-progress-panel,
.home-community-panel,
.latest-release-panel,
.featured-panel {
  margin-top: 0;
  padding-bottom: 6px;
}

.home-recent-panel,
.home-progress-panel,
.home-community-panel,
.latest-release-panel,
.featured-panel,
.home-media-panel {
  margin-top: 10px;
}

.home-profile-button {
  border: 0;
  background: transparent;
  color: var(--arcade-cyan);
  cursor: pointer;
  font-family: var(--arcade-font);
  font-size: 9px;
  padding: 0;
  text-transform: uppercase;
}

.home-profile-button::after {
  content: ">";
  margin-left: 10px;
}

.home-profile-button:hover,
.home-profile-button:focus-visible {
  color: var(--arcade-yellow);
}

.home-recent-shell {
  padding: 0 8px 8px;
}

.home-recent-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) repeat(2, minmax(0, 0.91fr));
  gap: 12px;
}

.home-recent-card,
.home-recent-empty,
.home-daily-card,
.home-achievements-card,
.latest-release-hero,
.latest-release-slat {
  border: 1px solid rgba(113, 132, 156, 0.62);
  background:
    radial-gradient(circle at 82% 16%, rgba(35, 223, 242, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(7, 11, 19, 0.98), rgba(3, 6, 11, 0.99));
  color: var(--arcade-white);
  overflow: hidden;
  text-decoration: none;
}

.home-recent-card:hover,
.home-daily-card:hover,
.latest-release-hero:hover,
.latest-release-slat:hover {
  border-color: var(--arcade-cyan);
  box-shadow: 0 0 24px rgba(35, 223, 242, 0.18), 0 0 18px rgba(255, 20, 144, 0.12);
  text-decoration: none;
  transform: translateY(-2px);
}

.home-recent-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(128px, 1fr) minmax(94px, auto) 34px;
  min-height: 262px;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.home-recent-card__poster,
.latest-release-hero__poster {
  position: relative;
  display: block;
  min-height: 0;
  background: #02050a;
  overflow: hidden;
}

.home-recent-card__poster img,
.latest-release-hero__poster img,
.latest-release-slat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #02050a;
}

.home-recent-card__poster::after,
.latest-release-hero__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.62)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px);
  pointer-events: none;
}

.home-recent-card__poster em,
.latest-release-hero__poster span {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  background: var(--arcade-yellow);
  color: #130c00;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  padding: 6px 8px;
  text-transform: uppercase;
}

.home-recent-card__body,
.latest-release-hero__body,
.latest-release-slat span {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 16px;
}

.home-recent-card__body small,
.home-recent-card__body span,
.home-recent-card__play,
.home-recent-empty small,
.home-recent-empty em,
.home-recent-empty a,
.home-recent-empty button,
.latest-release-hero__body small,
.latest-release-hero__body span,
.latest-release-hero__meta,
.latest-release-slat small,
.latest-release-slat em {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.home-recent-card__body small,
.latest-release-hero__body small,
.latest-release-slat small {
  color: var(--arcade-cyan);
  font-size: 10px;
  font-weight: 900;
}

.home-recent-card__body strong,
.home-recent-empty strong,
.latest-release-hero__body strong,
.latest-release-slat strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 18px;
  line-height: 1.05;
  text-transform: uppercase;
}

.home-recent-card--primary .home-recent-card__body strong {
  font-size: clamp(21px, 2vw, 29px);
}

.home-recent-card__body span,
.home-recent-empty em,
.latest-release-hero__body span,
.latest-release-slat em {
  color: #c7d5e2;
  font-size: 12px;
  font-style: normal;
  line-height: 1.38;
}

.home-recent-card__play {
  align-items: center;
  display: flex;
  border-top: 1px solid rgba(113, 132, 156, 0.42);
  color: var(--arcade-pink);
  font-size: 10px;
  font-weight: 900;
  padding: 0 12px;
}

.home-recent-card__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-right: 8px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
}

.home-recent-empty {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  min-height: 92px;
  padding: 18px;
}

.home-recent-empty span {
  display: grid;
  gap: 6px;
}

.home-recent-empty small {
  color: var(--arcade-cyan);
  font-size: 10px;
  font-weight: 900;
}

.home-recent-empty a,
.home-recent-empty button {
  align-items: center;
  border: 1px solid var(--arcade-cyan);
  border-radius: 4px;
  background: rgba(35, 223, 242, 0.1);
  color: var(--arcade-white);
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  justify-content: center;
  min-height: 40px;
  min-width: 118px;
  padding: 0 14px;
  text-decoration: none;
}

.home-recent-empty button {
  border-color: var(--arcade-pink);
  background: rgba(255, 20, 144, 0.12);
}

.home-progress-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  padding: 0 8px 8px;
}

.home-progress-placeholder {
  border: 1px solid rgba(113, 132, 156, 0.42);
  color: var(--arcade-muted);
  font: 900 11px/1 var(--font-mono);
  min-height: 180px;
  padding: 18px;
  text-transform: uppercase;
}

.home-daily-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1fr) 54px;
  min-height: 280px;
  position: relative;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.home-daily-card__poster {
  background: #02050a;
  display: block;
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.home-daily-card__poster img {
  background: #02050a;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.home-daily-card__poster::after {
  background:
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.68)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 5px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.home-daily-card__poster em {
  background: var(--arcade-pink);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--arcade-white);
  font: 900 9px/1 var(--font-mono);
  font-style: normal;
  left: 12px;
  padding: 7px 9px;
  position: absolute;
  text-transform: uppercase;
  top: 12px;
  z-index: 1;
}

.home-daily-card.is-complete .home-daily-card__poster em {
  background: var(--arcade-green);
  color: #031307;
}

.home-daily-card__body {
  align-content: center;
  display: grid;
  gap: 12px;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 22px;
}

.home-daily-card__body small,
.home-daily-card__body span,
.home-daily-card__body b,
.home-daily-card__play,
.home-achievements-card small,
.home-achievements-card button,
.home-achievement-badge em {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.home-daily-card__body small,
.home-achievements-card small {
  color: var(--arcade-cyan);
  font-size: 10px;
  font-weight: 900;
}

.home-daily-card__body strong,
.home-achievements-card__header strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 28px;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.home-daily-card__body span {
  color: #c7d5e2;
  font-size: 12px;
  line-height: 1.45;
}

.home-daily-card__body b {
  color: var(--arcade-yellow);
  font-size: 10px;
  font-weight: 900;
}

.home-progress-bar {
  --progress: 0%;
  background: rgba(151, 171, 194, 0.18);
  border: 1px solid rgba(151, 171, 194, 0.34);
  display: block;
  height: 14px;
  overflow: hidden;
  padding: 2px;
}

.home-progress-bar i {
  background: linear-gradient(90deg, var(--arcade-pink), var(--arcade-yellow), var(--arcade-cyan));
  display: block;
  height: 100%;
  width: var(--progress);
}

.home-daily-card__play {
  align-items: center;
  border-left: 1px solid rgba(113, 132, 156, 0.38);
  color: var(--arcade-pink);
  display: flex;
  font-size: 10px;
  font-weight: 900;
  grid-column: 3;
  grid-row: 1;
  justify-content: center;
  min-width: 54px;
  padding: 0 14px;
  writing-mode: vertical-rl;
}

.home-achievements-card {
  display: grid;
  gap: 14px;
  min-height: 280px;
  padding: 18px;
}

.home-level-card {
  align-items: center;
  border: 1px solid rgba(247, 217, 36, 0.48);
  background:
    radial-gradient(circle at 12% 22%, rgba(247, 217, 36, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(35, 223, 242, 0.1), rgba(255, 20, 144, 0.1)),
    rgba(5, 7, 13, 0.78);
  display: grid;
  gap: 14px;
  grid-template-columns: 82px minmax(0, 1fr);
  min-width: 0;
  padding: 12px;
}

.home-level-card__badge {
  align-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--arcade-yellow);
  background:
    radial-gradient(circle, rgba(247, 217, 36, 0.2), transparent 58%),
    #080b13;
  box-shadow: 0 0 20px rgba(247, 217, 36, 0.18);
  color: var(--arcade-yellow);
  display: grid;
  justify-items: center;
  padding: 8px;
}

.home-level-card__badge b {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 30px;
  line-height: 1;
}

.home-level-card__badge em,
.home-level-card__body em {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.home-level-card__badge em {
  color: var(--arcade-yellow);
  font-size: 9px;
}

.home-level-card__body {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.home-level-card__body strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 22px;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.home-level-card__body em {
  color: #c7d5e2;
  font-size: 9px;
  line-height: 1.35;
}

.home-achievements-card__header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.home-achievements-card__header span {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.home-achievements-card__header strong {
  font-size: 22px;
}

.home-achievements-card button {
  border: 1px solid var(--arcade-cyan);
  background: rgba(35, 223, 242, 0.1);
  color: var(--arcade-white);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 900;
  min-height: 38px;
  padding: 0 12px;
}

.home-achievement-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-achievement-badge {
  align-items: center;
  border: 1px solid rgba(151, 171, 194, 0.28);
  background: rgba(5, 7, 13, 0.74);
  display: grid;
  gap: 10px;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 86px;
  min-width: 0;
  padding: 10px;
}

.home-achievement-badge__art,
.rb-achievement-badge__art {
  aspect-ratio: 1;
  border: 1px solid rgba(249, 251, 255, 0.14);
  background: #02050a;
  box-shadow: 0 0 14px rgba(35, 223, 242, 0.1);
  display: block;
  min-width: 0;
  overflow: hidden;
}

.home-achievement-badge__art img,
.rb-achievement-badge__art img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.home-achievement-badge__copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.home-achievement-badge b {
  color: var(--arcade-white);
  font-size: 12px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.home-achievement-badge em {
  color: var(--arcade-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.35;
}

.home-achievement-badge.is-unlocked {
  border-color: rgba(247, 217, 36, 0.72);
  box-shadow: inset 0 0 0 1px rgba(247, 217, 36, 0.12);
}

.home-achievement-badge.is-unlocked em {
  color: var(--arcade-yellow);
}

.home-achievement-badge.is-locked .home-achievement-badge__art,
.rb-achievement-badge.is-locked .rb-achievement-badge__art {
  filter: grayscale(0.84) saturate(0.42);
  opacity: 0.66;
}

.home-community-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.05fr) repeat(2, minmax(0, 0.975fr));
  padding: 0 8px 8px;
}

.home-community-card {
  border: 1px solid rgba(113, 132, 156, 0.62);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 20, 144, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(7, 11, 19, 0.98), rgba(3, 6, 11, 0.99));
  color: var(--arcade-white);
  display: grid;
  gap: 14px;
  min-height: 258px;
  padding: 16px;
}

.home-community-card--leaderboard {
  background:
    radial-gradient(circle at 12% 20%, rgba(247, 217, 36, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(7, 11, 19, 0.98), rgba(3, 6, 11, 0.99));
}

.home-community-card__header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.home-community-card__header span {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.home-community-card__header small,
.home-community-card__header a,
.home-community-row em,
.home-community-row b,
.home-community-empty {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.home-community-card__header small {
  color: var(--arcade-cyan);
  font-size: 10px;
  font-weight: 900;
}

.home-community-card__header strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 20px;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.home-community-card__header a {
  border: 1px solid rgba(35, 223, 242, 0.64);
  color: var(--arcade-white);
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 900;
  padding: 8px 10px;
  text-decoration: none;
}

.home-community-card__header a:hover,
.home-community-card__header a:focus-visible,
.home-community-row:hover,
.home-community-row:focus-visible {
  border-color: var(--arcade-cyan);
  box-shadow: 0 0 18px rgba(35, 223, 242, 0.12);
  text-decoration: none;
}

.home-community-list {
  display: grid;
  gap: 9px;
}

.home-community-row {
  border: 1px solid rgba(151, 171, 194, 0.24);
  background: rgba(5, 7, 13, 0.68);
  color: var(--arcade-white);
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  text-decoration: none;
}

.home-community-row--score {
  align-items: center;
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.home-community-avatar {
  aspect-ratio: 1;
  border: 1px solid var(--profile-accent);
  background: #05070d;
  display: block;
  overflow: hidden;
  width: 40px;
}

.home-community-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.home-community-row span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.home-community-row strong {
  color: var(--arcade-white);
  font-size: 13px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.home-community-row em {
  color: var(--arcade-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.35;
}

.home-community-row b {
  color: var(--arcade-yellow);
  font-size: 12px;
  font-weight: 900;
}

.home-community-row p {
  color: #c7d5e2;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  overflow-wrap: anywhere;
}

.home-community-empty {
  border: 1px dashed rgba(151, 171, 194, 0.32);
  color: var(--arcade-muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.45;
  min-height: 92px;
  padding: 14px;
}

.latest-release-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.78fr);
  gap: 12px;
  padding: 0 8px 8px;
}

.latest-release-hero {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 34px;
  min-height: 276px;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.latest-release-hero__poster {
  grid-row: 1 / -1;
}

.latest-release-hero__body {
  align-content: center;
  padding: 28px;
}

.latest-release-hero__body strong {
  color: var(--arcade-yellow);
  font-size: clamp(28px, 3.2vw, 48px);
  text-shadow: 3px 0 0 rgba(255, 20, 144, 0.28), -2px 0 0 rgba(35, 223, 242, 0.18);
}

.latest-release-hero__body span {
  font-size: 13px;
}

.latest-release-hero__meta {
  align-items: center;
  background: rgba(3, 6, 11, 0.98);
  border-top: 1px solid rgba(113, 132, 156, 0.42);
  color: #dbe6f3;
  display: flex;
  gap: 18px;
  grid-column: 2;
  height: 34px;
  padding: 0 12px;
  font-size: 10px;
}

.latest-release-hero__meta b,
.latest-release-hero__meta em {
  font-style: normal;
  font-weight: 800;
}

.latest-release-stack {
  display: grid;
  gap: 12px;
}

.latest-release-slat {
  align-items: stretch;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  min-height: 132px;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.latest-release-slat img {
  min-height: 132px;
}

.latest-release-slat span {
  align-content: center;
}

.latest-release-slat strong {
  font-size: 17px;
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 0 8px;
}

.poster-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(132px, 1fr) 34px;
  min-height: 196px;
  overflow: hidden;
  border: 1px solid rgba(113, 132, 156, 0.62);
  background: #02050a;
  color: var(--arcade-white);
  text-decoration: none;
}

.poster-card:hover {
  border-color: var(--arcade-pink);
  box-shadow: 0 0 22px rgba(255, 20, 144, 0.28);
  text-decoration: none;
}

.poster-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #02050a;
}

.poster-card--escape img {
  object-fit: cover;
  image-rendering: pixelated;
}

.poster-card--slop img,
.directory-card__poster--slop img {
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.05);
}

.directory-card__poster--again img,
.poster-card--weight img,
.directory-card__poster--weight img,
.poster-card--feast img,
.directory-card__poster--feast img,
.poster-card--looksmaxxing img,
.directory-card__poster--looksmaxxing img,
.poster-card--doorcrash img,
.directory-card__poster--doorcrash img,
.poster-card--tardigrade img,
.directory-card__poster--tardigrade img,
.poster-card--pizza img,
.directory-card__poster--pizza img,
.poster-card--unhinged img,
.directory-card__poster--unhinged img,
.poster-card--apop img,
.directory-card__poster--apop img,
.poster-card--bsr img,
.directory-card__poster--bsr img,
.poster-card--ssb img,
.directory-card__poster--ssb img,
.directory-card__poster--genz img {
  object-fit: cover;
  filter: saturate(1.12) contrast(1.05);
}

.poster-card--feast img,
.directory-card__poster--feast img,
.poster-card--looksmaxxing img,
.directory-card__poster--looksmaxxing img {
  object-position: left center;
}

.poster-card--escape::before {
  content: "";
  position: absolute;
  inset: 0 0 34px;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.22) 62%, transparent);
  pointer-events: none;
}

.poster-card--stonks img,
.directory-card__poster--stonks img {
  object-fit: cover;
  object-position: center;
}

.poster-card--stonks::before {
  content: "";
  position: absolute;
  inset: 0 0 34px;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.18) 58%, transparent),
    linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

.poster-card--slop::before {
  content: "";
  position: absolute;
  inset: 0 0 34px;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.22) 54%, transparent),
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.48));
  pointer-events: none;
}

.poster-card--weight::before,
.poster-card--doorcrash::before,
.poster-card--tardigrade::before,
.poster-card--pizza::before,
.poster-card--unhinged::before,
.poster-card--apop::before,
.poster-card--bsr::before {
  content: "";
  position: absolute;
  inset: 0 0 34px;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.28) 52%, transparent),
    linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

/* Directory cards use a dedicated 16:9 poster — shade the full frame, not a meta strip. */
.directory-card__poster--stonks::before,
.directory-card__poster--slop::before,
.directory-card__poster--again::before,
.directory-card__poster--weight::before,
.directory-card__poster--doorcrash::before,
.directory-card__poster--tardigrade::before,
.directory-card__poster--pizza::before,
.directory-card__poster--unhinged::before,
.directory-card__poster--apop::before,
.directory-card__poster--bsr::before,
.directory-card__poster--genz::before,
.directory-card__poster--clowder::before,
.directory-card__poster--karen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.28) 52%, transparent),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 34%, rgba(0, 0, 0, 0.36) 100%);
  pointer-events: none;
}

.directory-card__poster--slop::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.22) 54%, transparent),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 34%, rgba(0, 0, 0, 0.4) 100%);
}

.directory-card__poster--stonks::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.18) 58%, transparent),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 34%, rgba(0, 0, 0, 0.36) 100%);
}

/* Billionaire Space Race — generated image poster fallback */
.poster-card--bsr,
.directory-card__poster--bsr {
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(255, 212, 59, 0.18), transparent 42%),
    radial-gradient(90% 80% at 20% 12%, rgba(46, 224, 255, 0.16), transparent 48%),
    linear-gradient(165deg, #120a2e 0%, #07060f 70%);
}

.poster-card--unhinged,
.directory-card__poster--unhinged {
  background:
    radial-gradient(110% 80% at 78% 16%, rgba(103, 255, 98, 0.18), transparent 44%),
    radial-gradient(90% 75% at 20% 20%, rgba(255, 46, 136, 0.18), transparent 50%),
    linear-gradient(165deg, #17102b 0%, #05070d 76%);
}

.directory-card__poster--again {
  background:
    radial-gradient(110% 80% at 78% 16%, rgba(255, 20, 144, 0.18), transparent 44%),
    radial-gradient(90% 75% at 20% 20%, rgba(35, 223, 242, 0.12), transparent 50%),
    linear-gradient(165deg, #15051a 0%, #030108 76%);
}

.poster-card__label {
  position: absolute;
  left: 13px;
  bottom: 49px;
  z-index: 2;
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(17px, 1.85vw, 27px);
  line-height: 1.04;
  max-width: 74%;
  text-shadow: 3px 0 0 rgba(255, 20, 144, 0.42), -2px 0 0 rgba(35, 223, 242, 0.32), 0 3px 0 #000;
  text-transform: uppercase;
}

.poster-card__meta {
  align-items: center;
  background: rgba(3, 6, 11, 0.98);
  border-top: 1px solid rgba(113, 132, 156, 0.42);
  color: #dbe6f3;
  display: flex;
  gap: 18px;
  height: 34px;
  padding: 0 46px 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.poster-card__meta b,
.poster-card__meta em {
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.poster-card__meta b::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-right: 7px;
  border-radius: 6px 6px 3px 3px;
  border: 2px solid #9eb6cb;
  vertical-align: -1px;
}

.poster-card__meta em::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #9eb6cb;
  box-shadow: 0 6px 0 -2px #9eb6cb;
  vertical-align: 0;
}

.poster-card__play {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 34px;
  overflow: hidden;
  border-left: 1px solid var(--arcade-pink);
  background: rgba(255, 20, 144, 0.13);
  color: transparent;
}

.poster-card__play::before,
.after-card::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid var(--arcade-pink);
}

.poster-card__play::before {
  left: 14px;
  top: 6px;
}

.games-directory {
  padding-top: 12px;
}

.games-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  gap: 24px;
  align-items: stretch;
  min-height: 178px;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 28px 32px;
  background:
    radial-gradient(circle at 76% 18%, rgba(35, 223, 242, 0.18), transparent 31%),
    linear-gradient(90deg, rgba(255, 20, 144, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(9, 15, 28, 0.94), rgba(3, 6, 11, 0.98));
}

.games-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(35, 223, 242, 0.08) 62px 64px);
  opacity: 0.35;
  pointer-events: none;
}

.games-hero__copy,
.games-hero__stats {
  position: relative;
  z-index: 1;
}

.games-hero__eyebrow,
.games-catalog__count,
.directory-card__status,
.directory-card__meta {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.games-hero__eyebrow {
  color: var(--arcade-cyan);
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 12px;
}

.games-hero h1 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(32px, 5.2vw, 62px);
  line-height: 1;
  margin: 0 0 14px;
  text-transform: uppercase;
  text-shadow: 3px 0 0 rgba(255, 20, 144, 0.28), -2px 0 0 rgba(35, 223, 242, 0.2);
}

.games-hero p {
  color: #dce6f0;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.38;
  max-width: 720px;
  margin: 0;
}

.games-hero__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-content: center;
}

.games-hero__stats span {
  border: 1px solid rgba(151, 171, 194, 0.32);
  background: rgba(0, 0, 0, 0.22);
  color: var(--arcade-white);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.games-hero__stats b {
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 13px;
}

.games-catalog {
  padding-bottom: 8px;
}

.games-catalog__count {
  color: var(--arcade-cyan);
  font-size: 10px;
  font-weight: 800;
}

.games-modebar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 8px 14px;
}

.games-modebar button {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 72px;
  overflow: hidden;
  border: 1px solid rgba(113, 132, 156, 0.58);
  background:
    linear-gradient(135deg, rgba(35, 223, 242, 0.1), transparent 44%),
    rgba(3, 6, 11, 0.96);
  color: var(--arcade-white);
  cursor: pointer;
  font: inherit;
  padding: 14px 16px;
  text-align: left;
  text-decoration: none;
}

.games-modebar button::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 13px solid var(--arcade-yellow);
  transform: translateY(-50%);
}

.games-modebar button:hover,
.games-modebar button.is-active,
.games-modebar button[aria-pressed="true"] {
  border-color: var(--arcade-cyan);
  box-shadow: 0 0 22px rgba(35, 223, 242, 0.18);
  text-decoration: none;
}

.games-modebar button.is-active,
.games-modebar button[aria-pressed="true"] {
  background:
    linear-gradient(135deg, rgba(247, 217, 36, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(35, 223, 242, 0.14), rgba(255, 20, 144, 0.08)),
    rgba(3, 6, 11, 0.98);
  border-color: rgba(247, 217, 36, 0.72);
  box-shadow: inset 0 -3px 0 rgba(247, 217, 36, 0.7), 0 0 24px rgba(35, 223, 242, 0.2);
}

.games-modebar button:focus-visible {
  outline: 2px solid var(--arcade-cyan);
  outline-offset: 2px;
}

.games-modebar b,
.games-modebar span {
  display: block;
  padding-right: 26px;
  text-transform: uppercase;
}

.games-modebar b {
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: clamp(16px, 2.1vw, 24px);
  line-height: 1;
}

.games-modebar span {
  color: #9eb6cb;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.games-filterbar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 8px 14px;
}

.games-filterbar__field {
  color: #9eb6cb;
  display: grid;
  flex: 1 1 190px;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.games-filterbar__select {
  position: relative;
}

.games-filterbar__select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--arcade-yellow);
  pointer-events: none;
  transform: translateY(-40%);
}

.games-filterbar select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(113, 132, 156, 0.68);
  border-radius: 4px;
  background: #05070d;
  color: var(--arcade-white);
  font: 800 11px var(--font-mono);
  letter-spacing: 0;
  padding: 0 38px 0 12px;
  text-transform: uppercase;
}

.games-filterbar select:focus-visible,
.games-filterbar__favorites:focus-visible,
.games-filterbar__reset:focus-visible {
  outline: 2px solid var(--arcade-cyan);
  outline-offset: 2px;
}

.games-filterbar__favorites {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-height: 44px;
  border: 1px solid rgba(255, 125, 188, 0.52);
  border-radius: 4px;
  background: rgba(255, 20, 144, 0.08);
  color: #ffd5e9;
  cursor: pointer;
  font-family: var(--font-mono);
  padding: 0 12px;
  text-transform: uppercase;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.games-filterbar__favorites > span {
  color: #ff7dbc;
  font-size: 19px;
  line-height: 1;
}

.games-filterbar__favorites strong {
  font-size: 10px;
  letter-spacing: 0;
}

.games-filterbar__favorites em {
  display: grid;
  min-width: 22px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--arcade-white);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.games-filterbar__favorites:hover,
.games-filterbar__favorites.is-active {
  border-color: var(--arcade-pink);
  background: rgba(255, 20, 144, 0.2);
  box-shadow: 0 0 20px rgba(255, 20, 144, 0.16);
}

.games-filterbar__reset {
  min-height: 44px;
  border: 1px solid rgba(255, 20, 144, 0.62);
  border-radius: 4px;
  background: rgba(255, 20, 144, 0.12);
  color: var(--arcade-white);
  cursor: pointer;
  font: 800 10px var(--font-mono);
  letter-spacing: 0;
  padding: 0 16px;
  text-transform: uppercase;
}

.games-filterbar__reset:hover {
  border-color: var(--arcade-pink);
  background: rgba(255, 20, 144, 0.2);
}

.games-catalog__empty {
  margin: 0 8px 18px;
  border: 1px dashed rgba(113, 132, 156, 0.72);
  color: #bfccd9;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 18px;
  text-align: center;
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 420px));
  justify-content: center;
  gap: 12px;
  padding: 0 8px 8px;
}

.directory-grid.games-section-stack {
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.games-section__grid {
  padding-inline: 0;
}

/* Card grid inside each games.html section. A fixed max track (420px) makes
   auto-fill undercount columns at laptop widths (1223px inner fits only 2x420),
   so cards flex with 1fr to fill 3-up from ~1000px while staying single-column
   on mobile via the min(100%, ...) floor. Specificity beats the shared
   .directory-grid media-query rules without touching homepage grids. */
.directory-grid.games-section__grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
}

.games-section {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  scroll-margin-top: 96px;
}

.games-section__header {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  border: 1px solid rgba(113, 132, 156, 0.48);
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 212, 59, 0.16), transparent 28%),
    linear-gradient(90deg, rgba(255, 20, 144, 0.14), transparent 42%),
    rgba(3, 6, 11, 0.96);
  padding: 18px 20px;
}

.games-section__header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(35, 223, 242, 0.06) 58px 60px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 5px);
  pointer-events: none;
}

.games-section__header > * {
  position: relative;
  z-index: 1;
}

.games-section__eyebrow,
.games-section__count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.games-section__eyebrow {
  color: var(--arcade-cyan);
  display: inline-block;
  margin-bottom: 8px;
}

.games-section h3 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 3px 0 0 rgba(255, 20, 144, 0.28), -2px 0 0 rgba(35, 223, 242, 0.2);
}

.games-section p {
  color: #bfccd9;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  max-width: 720px;
  margin: 10px 0 0;
  text-transform: uppercase;
}

.games-section__count {
  flex: 0 0 auto;
  border: 1px solid rgba(247, 217, 36, 0.44);
  background: rgba(247, 217, 36, 0.1);
  color: var(--arcade-yellow);
  padding: 9px 11px;
}

.games-section--agent .games-section__header {
  border-color: rgba(35, 223, 242, 0.46);
  background:
    radial-gradient(circle at 86% 18%, rgba(35, 223, 242, 0.18), transparent 30%),
    linear-gradient(90deg, rgba(35, 223, 242, 0.12), transparent 42%),
    rgba(2, 5, 10, 0.98);
}

.games-section--multiplayer .games-section__header {
  border-color: rgba(247, 217, 36, 0.56);
  background:
    radial-gradient(circle at 86% 18%, rgba(247, 217, 36, 0.24), transparent 30%),
    linear-gradient(90deg, rgba(35, 223, 242, 0.14), transparent 42%),
    rgba(6, 8, 8, 0.98);
}

.games-section--after-dark .games-section__header {
  border-color: rgba(162, 29, 45, 0.62);
  background:
    radial-gradient(circle at 82% 18%, rgba(162, 29, 45, 0.28), transparent 32%),
    linear-gradient(90deg, rgba(255, 20, 144, 0.12), transparent 38%),
    rgba(12, 4, 6, 0.98);
}

.directory-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(122px, 1fr) 34px;
  min-height: 374px;
  overflow: hidden;
  border: 1px solid rgba(113, 132, 156, 0.62);
  background: rgba(3, 6, 11, 0.96);
  color: var(--arcade-white);
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.directory-card:hover {
  border-color: var(--arcade-pink);
  box-shadow: 0 0 24px rgba(255, 20, 144, 0.26);
  text-decoration: none;
  transform: translateY(-2px);
}

.directory-card__poster {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #02050a;
  border-bottom: 1px solid rgba(113, 132, 156, 0.42);
}

.directory-card__poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #02050a;
  object-position: center;
}

/* Big Baby Bum uses a dedicated 16:9 crop so the art fills the shared card frame cleanly. */
.poster-card--bbb img,
.directory-card__poster--bbb img {
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.03);
}

/* Apop art is a wide banner — crop/zoom to fill the standard 16:9 poster. */
.directory-card__poster--apop img,
.poster-card--apop img {
  object-fit: cover;
  object-position: center;
  background: #02050a;
}

/* Rizz-Craft poster is slightly taller than 16:9 — zoom to fill width. */
.directory-card__poster--rizzcraft img,
.poster-card--rizzcraft img {
  object-fit: cover;
  object-position: center;
  background: #02050a;
}

.directory-card__poster--again img {
  object-position: left center;
}

.directory-card__poster--escape img {
  object-fit: cover;
  filter: saturate(1.1) contrast(1.05);
  image-rendering: pixelated;
}

.directory-card__poster--feast img,
.directory-card__poster--looksmaxxing img {
  object-fit: cover;
  object-position: left center;
}

.directory-card__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 32%, rgba(0, 0, 0, 0.28) 100%);
  pointer-events: none;
}

.directory-card__poster--escape::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.34) 56%, transparent),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.2));
}

.directory-card__poster-title {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.05;
  max-width: 72%;
  text-shadow: 3px 0 0 rgba(255, 20, 144, 0.4), -2px 0 0 rgba(35, 223, 242, 0.32), 0 3px 0 #000;
  text-transform: uppercase;
}

.directory-card__status {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  background: var(--arcade-pink);
  color: var(--arcade-white);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 5px 8px;
}

.directory-card__status--danger {
  background: #a21d2d;
}

.directory-card__status--soon {
  background: var(--arcade-yellow);
  color: #130c00;
}

.directory-card__body {
  padding: 16px 16px 14px;
}

.directory-card__body p {
  color: #bfccd9;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.directory-card__meta {
  align-items: center;
  background: rgba(3, 6, 11, 0.98);
  border-top: 1px solid rgba(113, 132, 156, 0.42);
  color: #dbe6f3;
  display: flex;
  gap: 16px;
  height: 34px;
  min-width: 0;
  padding: 0 46px 0 10px;
  font-size: 10px;
}

.directory-card__meta b,
.directory-card__meta em {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.directory-card__meta b::before,
.directory-card__meta em::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  margin-right: 7px;
}

.directory-card__meta b::before {
  width: 12px;
  height: 8px;
  border-radius: 6px 6px 3px 3px;
  border: 2px solid #9eb6cb;
}

.directory-card__meta em::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9eb6cb;
  box-shadow: 0 6px 0 -2px #9eb6cb;
}

.directory-card__play {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 34px;
  overflow: hidden;
  border-left: 1px solid var(--arcade-pink);
  background: rgba(255, 20, 144, 0.13);
  color: transparent;
}

.directory-card__play::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 6px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid var(--arcade-pink);
}

.games-ad-slot {
  max-width: 980px;
  margin: 18px auto 24px;
}

.arcade-row {
  display: grid;
  grid-template-columns: minmax(0, 2.18fr) minmax(340px, 1fr);
  gap: 14px;
  margin-top: 10px;
}

.after-panel,
.soon-panel {
  min-height: 174px;
}

.after-card {
  position: relative;
  display: block;
  height: 136px;
  margin: 0 8px 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 20, 144, 0.62);
  color: var(--arcade-white);
}

.after-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #02050a;
}

.after-card::after {
  right: 23px;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 10px rgba(255, 20, 144, 0.8));
}

.after-dark-directory {
  max-width: 1480px;
  padding-top: 12px;
}

.after-dark-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(280px, 0.35fr);
  gap: 24px;
  align-items: end;
  min-height: 560px;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 38px 34px;
  background-color: #030303;
  background-image:
    linear-gradient(90deg, rgba(1, 3, 5, 0.96) 0%, rgba(1, 3, 5, 0.72) 42%, rgba(1, 3, 5, 0.12) 100%),
    url("../img/after-dark/rainbot-after-dark-hero.jpg?v=20260712-jpg");
  background-position:
    center,
    center 54%;
  background-repeat: no-repeat;
  background-size:
    cover,
    cover;
  border-color: rgba(255, 20, 144, 0.38);
}

.after-dark-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 78% 40%, rgba(255, 20, 144, 0.16), transparent 32%);
  pointer-events: none;
}

.after-dark-hero__copy,
.after-dark-hero__ticker {
  position: relative;
  z-index: 1;
}

.after-dark-hero h1 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 88px;
  line-height: 0.94;
  margin: 0 0 16px;
  max-width: 720px;
  text-transform: uppercase;
  text-shadow:
    4px 0 0 rgba(255, 20, 144, 0.36),
    -3px 0 0 rgba(35, 223, 242, 0.22),
    0 5px 0 #000;
}

.after-dark-hero p {
  color: #f1e9dd;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.45;
  margin: 0;
  max-width: 760px;
  text-transform: uppercase;
}

.after-dark-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.after-dark-hero__ticker {
  display: grid;
  gap: 10px;
  align-content: end;
}

.after-dark-hero__ticker span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border: 1px solid rgba(255, 20, 144, 0.34);
  background: rgba(0, 0, 0, 0.4);
  color: #f2dfed;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 11px 12px;
  text-transform: uppercase;
}

.after-dark-hero__ticker b {
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 13px;
}

.after-dark-vault {
  padding-bottom: 8px;
}

.after-dark-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 8px 8px;
}

.after-dark-game {
  position: relative;
  display: grid;
  grid-template-rows: minmax(280px, 0.95fr) auto auto;
  overflow: hidden;
  min-height: 570px;
  border: 1px solid rgba(255, 20, 144, 0.5);
  background:
    radial-gradient(circle at 72% 20%, rgba(255, 20, 144, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(12, 7, 10, 0.98), rgba(3, 3, 5, 0.99));
  color: var(--arcade-white);
  text-decoration: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.after-dark-game:hover {
  border-color: var(--arcade-yellow);
  box-shadow: 0 0 28px rgba(255, 20, 144, 0.24);
  text-decoration: none;
  transform: translateY(-2px);
}

.after-dark-game__poster {
  position: relative;
  overflow: hidden;
  background: #030303;
}

.after-dark-game__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 44%, rgba(0, 0, 0, 0.7)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px);
  pointer-events: none;
}

.after-dark-game__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.06);
}

.after-dark-game--feast .after-dark-game__poster img {
  object-fit: cover;
  object-position: left center;
  image-rendering: auto;
}

.after-dark-game__label {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--arcade-yellow);
  color: #130c00;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  padding: 7px 9px;
  text-transform: uppercase;
}

.after-dark-game__body {
  display: grid;
  gap: 14px;
  padding: 24px 24px 8px;
}

.after-dark-game__body strong {
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
}

.after-dark-game__body span {
  color: #d7cbd2;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  text-transform: uppercase;
}

.after-dark-game__play {
  align-self: end;
  border-top: 1px solid rgba(255, 20, 144, 0.35);
  color: var(--arcade-pink);
  font-family: var(--arcade-font);
  font-size: 10px;
  padding: 14px 24px 18px;
  text-transform: uppercase;
}

.after-dark-marquee {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  padding: 18px;
}

.after-dark-marquee span {
  border-left: 3px solid var(--arcade-pink);
  color: #f3e8ef;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  padding-left: 12px;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .after-dark-hero,
  .after-dark-grid,
  .after-dark-marquee {
    grid-template-columns: 1fr;
  }

  .after-dark-hero {
    align-items: end;
    min-height: 620px;
    background-position:
      center,
      58% center;
  }

  .after-dark-hero__ticker {
    max-width: 520px;
  }

  .after-dark-hero h1 {
    font-size: 62px;
  }

  .after-dark-game__body strong {
    font-size: 32px;
  }

  .after-dark-game {
    min-height: 0;
    grid-template-rows: minmax(250px, 48vw) auto auto;
  }
}

@media (max-width: 560px) {
  .after-dark-hero {
    min-height: 680px;
    padding: 26px 18px;
    background-image:
      linear-gradient(180deg, rgba(1, 3, 5, 0.98) 0%, rgba(1, 3, 5, 0.82) 42%, rgba(1, 3, 5, 0.18) 100%),
      url("../img/after-dark/rainbot-after-dark-hero.jpg?v=20260712-jpg");
    background-position:
      center,
      60% bottom;
    background-size:
      cover,
      auto 100%;
  }

  .after-dark-hero__actions {
    display: grid;
  }

  .after-dark-hero h1 {
    font-size: 42px;
  }

  .after-dark-hero p {
    font-size: 13px;
  }

  .after-dark-game__body strong {
    font-size: 26px;
  }

  .after-dark-hero__ticker span {
    align-items: center;
    font-size: 10px;
  }

  .after-dark-game {
    grid-template-rows: minmax(230px, 62vw) auto auto;
  }

  .after-dark-game__body {
    padding: 20px 18px 8px;
  }

  .after-dark-game__play {
    padding: 14px 18px 18px;
  }
}

.soon-list {
  padding: 0 14px 8px;
}

.soon-item {
  align-items: center;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 45px;
  border-top: 1px dashed rgba(151, 171, 194, 0.26);
}

.soon-item:first-child {
  border-top: 0;
}

.soon-item img {
  width: 56px;
  height: 35px;
  object-fit: cover;
  border: 1px solid rgba(35, 223, 242, 0.12);
}

.soon-item strong,
.soon-item span,
.soon-item em {
  display: block;
  font-family: var(--font-mono);
  line-height: 1.1;
  text-transform: uppercase;
}

.soon-item strong {
  color: var(--arcade-white);
  font-size: 13px;
}

.soon-item span {
  color: #9ba8b6;
  font-size: 10px;
  letter-spacing: 1px;
  margin-top: 3px;
}

.soon-item em {
  color: var(--arcade-cyan);
  font-size: 10px;
  font-style: normal;
}

.pro-strip {
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(240px, 0.75fr) minmax(220px, 0.72fr) minmax(220px, 0.72fr) minmax(210px, 0.7fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 10px;
  min-height: 130px;
  padding: 0;
}

.pro-strip__intro {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 16px 10px 24px;
  border-right: 1px solid rgba(35, 223, 242, 0.62);
}

.pro-strip__intro img {
  width: 98px;
  image-rendering: pixelated;
}

.pro-strip__intro h2 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 18px;
  line-height: 1.35;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.pro-strip__intro h2 span {
  color: var(--arcade-pink);
}

.pro-strip__intro p {
  color: #cfd6df;
  font-size: 13px;
  line-height: 1.42;
  margin: 0;
}

.pro-strip__perks {
  align-self: center;
  list-style: none;
  margin: 0;
  padding: 14px 0;
}

.pro-strip__perks li {
  color: var(--arcade-white);
  font-size: 14px;
  line-height: 1.3;
  margin: 0 0 10px;
  padding-left: 28px;
  position: relative;
}

.pro-strip__perks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--arcade-pink);
  border-radius: 50%;
}

.pro-strip__perks li:nth-child(2)::before {
  border-radius: 2px;
  border-color: var(--arcade-yellow);
}

.pro-strip__perks li:nth-child(3)::before {
  border-color: var(--arcade-green);
  transform: rotate(45deg);
}

.pro-strip__perks li:nth-child(4)::before {
  background: var(--arcade-pink);
  border-color: var(--arcade-pink);
  transform: rotate(45deg);
}

.pro-plan {
  position: relative;
  margin: 10px 6px;
  padding: 12px 16px 16px;
  border: 2px solid var(--arcade-cyan);
  background: rgba(1, 8, 14, 0.86);
}

.pro-plan--yearly {
  border-color: var(--arcade-yellow);
}

.pro-plan em {
  position: absolute;
  right: -1px;
  top: -10px;
  background: var(--arcade-pink);
  color: var(--arcade-white);
  border-radius: 3px 3px 0 0;
  font-family: var(--arcade-font);
  font-size: 6px;
  font-style: normal;
  padding: 5px 9px;
  text-transform: uppercase;
}

.pro-plan small {
  color: var(--arcade-cyan);
  display: block;
  font-family: var(--arcade-font);
  font-size: 10px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.pro-plan--yearly small {
  color: var(--arcade-yellow);
}

.pro-plan strong {
  color: var(--arcade-white);
  display: block;
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 14px;
}

.pro-plan strong span {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.pro-strip__bot {
  align-self: end;
  width: 100%;
  height: 126px;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
}

.site-footer {
  position: relative;
  z-index: 1;
  align-items: center;
  background: #05070d;
  border-top: 1px solid rgba(43, 53, 68, 0.9);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 230px 1fr auto;
  gap: 24px;
  flex-shrink: 0;
  margin-top: auto;
  min-height: 54px;
  padding-inline: max(12px, calc((100% - 1536px) / 2 + 12px));
  width: 100%;
}

.site-footer__brand img {
  width: 186px;
  image-rendering: pixelated;
}

.site-footer__links,
.site-footer__social {
  align-items: center;
  display: flex;
  gap: clamp(18px, 3vw, 44px);
  flex-wrap: wrap;
}

.site-footer__links a,
.site-footer__social a {
  color: var(--arcade-white);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
}

.site-footer__social {
  gap: 14px;
}

.site-footer__social a {
  align-items: center;
  border: 1px solid transparent;
  color: #d9e0e8;
  display: inline-flex;
  font-size: 11px;
  height: 28px;
  justify-content: center;
  min-width: 28px;
}

.site-footer__social a:hover {
  border-color: rgba(35, 223, 242, 0.4);
  color: var(--arcade-cyan);
}

.modal-backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.modal {
  background: #060a12;
  border: 2px solid var(--arcade-cyan);
  border-radius: 6px;
  box-shadow: 0 0 36px rgba(35, 223, 242, 0.24);
}

.modal__title {
  color: var(--arcade-pink);
  font-family: var(--arcade-font);
  font-size: 18px;
  line-height: 1.35;
  text-transform: uppercase;
}

.modal__body {
  color: #d8e1eb;
}

.toast {
  border: 1px solid var(--arcade-cyan);
  border-radius: 4px;
  background: #05070d;
  color: var(--arcade-white);
  font-family: var(--font-mono);
}

[hidden] {
  display: none !important;
}

@media (max-width: 1340px) {
  #nav-slot {
    grid-template-columns: minmax(160px, 230px) minmax(0, 1fr) auto;
  }

  .nav__cluster .nav__search-wrap:has(.nav__search.is-open) {
    width: min(240px, 42vw);
  }

  .portal-hero {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.88fr);
    padding-left: 58px;
  }

  .portal-hero::before {
    left: 20px;
  }

  .poster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-recent-grid,
  .home-progress-grid,
  .home-community-grid,
  .latest-release-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .latest-release-hero {
    grid-column: 1 / -1;
  }

  .directory-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 420px));
  }

  .pro-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pro-strip__intro {
    border-right: 0;
  }

  .pro-strip__bot {
    display: none;
  }
}

@media (max-width: 920px) {
  .nav {
    min-height: 74px;
    padding: 0 14px;
  }

  #nav-slot {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "brand cluster menu"
      "drawer drawer drawer";
    row-gap: 0;
  }

  .nav__brand {
    height: 72px;
  }

  .nav__brand img {
    width: 210px;
  }

  .nav__links {
    display: none;
  }

  .nav__menu-toggle {
    grid-area: menu;
    display: inline-flex;
  }

  .nav__drawer {
    grid-area: drawer;
  }

  .nav__cluster .nav__search-wrap:has(.nav__search.is-open) {
    width: min(220px, 46vw);
  }

  .nav__cta {
    min-width: 88px;
    padding: 0 10px;
  }

  .portal-hero {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
    padding: 34px 20px 18px;
  }

  .portal-hero::before,
  .portal-hero::after {
    display: none;
  }

  .portal-hero__media {
    bottom: auto;
    justify-content: center;
    margin-inline: -20px;
    order: -1;
    pointer-events: none;
    position: relative;
    right: auto;
    top: auto;
    width: calc(100% + 40px);
    display: flex;
  }

  .portal-hero__media img {
    top: 0;
    height: auto;
    max-height: 260px;
    object-position: center;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .games-hero {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .games-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .arcade-row {
    grid-template-columns: 1fr;
  }

  .home-recent-grid,
  .home-progress-grid,
  .home-community-grid,
  .latest-release-grid,
  .latest-release-hero {
    grid-template-columns: 1fr;
  }

  .home-daily-card {
    grid-template-columns: 1fr;
  }

  .home-daily-card__poster {
    aspect-ratio: 16 / 9;
  }

  .home-daily-card__play {
    border-left: 0;
    border-top: 1px solid rgba(113, 132, 156, 0.38);
    grid-column: 1;
    grid-row: auto;
    min-height: 42px;
    min-width: 0;
    writing-mode: horizontal-tb;
  }

  .home-achievements-card__header {
    align-items: stretch;
    flex-direction: column;
  }

  .home-achievements-card button {
    width: 100%;
  }

  .latest-release-hero__poster {
    aspect-ratio: 16 / 9;
    grid-row: auto;
  }

  .latest-release-hero__meta {
    grid-column: auto;
  }

  .home-recent-empty {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .home-recent-empty a,
  .home-recent-empty button {
    width: 100%;
  }

  .site-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 14px 20px;
  }
}

@media (max-width: 640px) {
  .arcade-shell {
    padding-inline: 8px;
  }

  .nav__actions {
    gap: 7px;
  }

  .nav__cta {
    font-size: 8px;
    height: 34px;
    min-width: 66px;
  }

  .nav__pro-state {
    display: none;
  }

  .portal-hero__title {
    font-size: 23px;
    transform: none;
    width: 100%;
  }

  .portal-hero__title-line,
  .portal-hero__tagline {
    max-width: 100%;
    width: auto;
  }

  .portal-hero__tagline {
    overflow-wrap: anywhere;
  }

  .portal-hero__sub {
    font-size: 14px;
  }

  .arcade-btn {
    font-size: 12px;
    min-width: 0;
    padding-inline: 18px;
    width: 100%;
    min-height: 50px;
  }

  .portal-hero__status {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .portal-hero__status span + span::before {
    display: none;
  }

  .poster-grid {
    grid-template-columns: 1fr;
  }

  .poster-card {
    min-height: 190px;
  }

  .home-recent-card {
    min-height: 232px;
  }

  .home-daily-card,
  .home-achievements-card {
    min-height: 0;
  }

  .home-daily-card__body {
    padding: 18px;
  }

  .home-daily-card__body strong {
    font-size: 24px;
  }

  .home-level-card {
    grid-template-columns: 66px minmax(0, 1fr);
    padding: 10px;
  }

  .home-level-card__badge b {
    font-size: 24px;
  }

  .home-level-card__body strong {
    font-size: 18px;
  }

  .home-achievement-grid,
  .rb-achievement-list {
    grid-template-columns: 1fr;
  }

  .latest-release-hero__body {
    padding: 22px 18px;
  }

  .latest-release-hero__body strong {
    font-size: 28px;
  }

  .latest-release-slat {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .latest-release-slat img {
    min-height: 118px;
  }

  .latest-release-slat strong {
    font-size: 14px;
  }

  .directory-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 420px));
  }

  .games-modebar {
    grid-template-columns: 1fr;
  }

  .games-section__header {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }

  .games-section__count {
    width: fit-content;
  }

  .games-filterbar {
    align-items: stretch;
    flex-direction: column;
  }

  .games-filterbar__field {
    flex-basis: auto;
  }

  .games-filterbar__reset {
    width: 100%;
  }

  .games-filterbar__favorites {
    justify-content: center;
    width: 100%;
  }

  .directory-card {
    min-height: 0;
  }



  .games-hero__stats {
    grid-template-columns: 1fr;
  }

  .directory-card__meta {
    gap: 12px;
    font-size: 9px;
  }

  .arcade-panel__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .pro-strip {
    grid-template-columns: 1fr;
  }

  .pro-strip__intro {
    grid-template-columns: 86px 1fr;
    padding: 14px;
  }

  .pro-strip__intro img {
    width: 78px;
  }

  .soon-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .soon-item em {
    grid-column: 2;
  }
}

/* ===== Brainrot 2048 (slide-to-merge) ===== */
.merge-board {
  position: relative;
  --game-aspect: 1;
  --game-aspect-ratio: 1 / 1;
  --game-max-width: 540px;
  width: min(100%, var(--game-fit-width, var(--game-max-width)), 58dvh);
  aspect-ratio: 1 / 1;
  background: #100f1f;
  border: 2px solid var(--panel-2);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  align-self: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 901px) {
  .merge-board {
    width: min(100%, var(--game-fit-width, var(--game-max-width)), calc(100dvh - 250px));
  }
}
.merge-field {
  position: absolute;
  inset: 3.4%;
  container-type: size;
}
.merge-cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2%;
}
.merge-cell {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}
.merge-tiles {
  position: absolute;
  inset: 0;
}
.merge-tile {
  position: absolute;
  top: 0;
  left: 0;
  width: 23.5%;
  height: 23.5%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  padding: 4px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0;
  overflow: hidden;
  transform: translate(calc(var(--c, 0) * 108.5106%), calc(var(--r, 0) * 108.5106%));
  transition: transform 0.12s ease-in-out;
  will-change: transform;
}

.merge-tile__art {
  position: absolute;
  inset: 0;
  background-image: var(--tile-image);
  background-position: center;
  background-size: cover;
  z-index: 0;
}

.merge-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.16) 26%, rgba(0, 0, 0, 0.06) 58%, rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.08));
  pointer-events: none;
  z-index: 1;
}

.merge-tile__n {
  display: none;
}

.merge-tile__name {
  position: absolute;
  right: 4px;
  left: 4px;
  top: 5px;
  z-index: 2;
  color: #ffffff;
  font-size: clamp(8px, 2.9cqw, 16px);
  line-height: 0.98;
  overflow-wrap: anywhere;
  text-shadow:
    -1px -1px 0 #05050b,
    1px -1px 0 #05050b,
    -1px 1px 0 #05050b,
    1px 1px 0 #05050b,
    0 0 7px rgba(46, 224, 255, 0.82);
}
.merge-tile--pop {
  animation: mergePop 0.2s ease;
}
.merge-tile--new {
  animation: mergeNew 0.14s ease;
}
.merge-tile--boss {
  box-shadow: 0 0 0 2px #2ee0ff, 0 0 16px rgba(255, 46, 136, 0.75);
  animation: mergeBoss 1.3s ease-in-out infinite;
}
@keyframes mergePop {
  0%   { transform: translate(calc(var(--c,0) * 108.5106%), calc(var(--r,0) * 108.5106%)) scale(1); }
  55%  { transform: translate(calc(var(--c,0) * 108.5106%), calc(var(--r,0) * 108.5106%)) scale(1.16); }
  100% { transform: translate(calc(var(--c,0) * 108.5106%), calc(var(--r,0) * 108.5106%)) scale(1); }
}
@keyframes mergeNew {
  0%   { opacity: 0; transform: translate(calc(var(--c,0) * 108.5106%), calc(var(--r,0) * 108.5106%)) scale(0.3); }
  100% { opacity: 1; transform: translate(calc(var(--c,0) * 108.5106%), calc(var(--r,0) * 108.5106%)) scale(1); }
}
@keyframes mergeBoss {
  0%, 100% { box-shadow: 0 0 0 2px #2ee0ff, 0 0 14px rgba(255, 46, 136, 0.7); }
  50%      { box-shadow: 0 0 0 2px #ffd43b, 0 0 26px rgba(46, 224, 255, 0.9); }
}
.merge-hint {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  text-align: center;
  margin: 0;
}
.merge-hint kbd {
  font-family: var(--font-mono);
  background: var(--panel-2);
  color: var(--ink);
  border-radius: 4px;
  padding: 1px 5px;
  margin: 0 1px;
  font-size: 11px;
}
.merge-ladder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.merge-ladder li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
  gap: 7px;
  border-radius: 7px;
  padding: 4px 6px;
  overflow: hidden;
}

.merge-ladder img {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
}

.merge-ladder span {
  min-width: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 9px;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.86);
}

/* Brainrot 2048 card poster fills both card layouts.
   object-position keeps the title framed when the 16:9 directory card crops top/bottom. */
.poster-card--merge img,
.directory-card__poster--merge img {
  object-fit: cover;
  object-position: center top;
}

.poster-card--snake img,
.directory-card__poster--snake img {
  object-fit: cover;
  object-position: center;
}

/* Storm Area 51 generated poster fills both card layouts. */
.poster-card--storm img,
.directory-card__poster--storm img {
  object-fit: cover;
  object-position: center;
}

/* Drone Hunter generated poster fills both card layouts. */
.poster-card--drone img,
.directory-card__poster--drone img {
  object-fit: cover;
  object-position: center;
}

/* Don't F*ck with Cats generated poster stays 16:9 across preview surfaces. */
.poster-card--clowder img,
.directory-card__poster--clowder img,
.clowder-page .game-side__poster {
  object-fit: cover;
  object-position: center;
}

.poster-card--karen img,
.directory-card__poster--karen img {
  object-fit: cover;
  object-position: center;
}

.clowder-page .game-side__poster--wide {
  aspect-ratio: 16 / 9;
}

.poster-card--weight img,
.directory-card__poster--weight img {
  object-fit: cover;
  object-position: center;
}

/* ===== Agent Games section and protocol game ===== */
.agent-games-panel {
  margin-top: 10px;
  overflow: hidden;
}

.agent-games-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 8px 8px;
}

.agent-feature-card,
.agent-vault-card {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(35, 223, 242, 0.48);
  background: #02050a;
  color: var(--arcade-white);
  text-decoration: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.agent-feature-card:hover,
.agent-vault-card:hover {
  border-color: var(--arcade-yellow);
  box-shadow: 0 0 26px rgba(35, 223, 242, 0.22), 0 0 34px rgba(255, 20, 144, 0.16);
  text-decoration: none;
  transform: translateY(-2px);
}

.agent-feature-card {
  grid-template-columns: minmax(280px, 0.92fr) minmax(260px, 1fr) 42px;
  min-height: 216px;
}

.agent-feature-card__art,
.agent-vault-card__poster {
  position: relative;
  min-height: 214px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 28%, rgba(46, 224, 255, 0.18), transparent 32%),
    linear-gradient(145deg, #030712, #05070d);
}

.agent-feature-card__art img,
.agent-vault-card__poster img,
.directory-card__poster--agent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.05);
}

.agent-feature-card__art::after,
.agent-vault-card__poster::after,
.directory-card__poster--agent::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.32) 52%, transparent),
    linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, 0.48)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 5px);
  pointer-events: none;
  z-index: 1;
}

.agent-feature-card__title,
.agent-vault-card__title {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  /* Capped at 22px: Press Start 2P renders "RECURSIVE" (the longest single
     word) at ~218px, which is the 82% cap of the 280px-min art column. Larger
     sizes clipped the word mid-glyph inside the art's overflow:hidden box. */
  font-size: clamp(20px, 2.8vw, 22px);
  line-height: 0.98;
  max-width: 82%;
  text-shadow: 3px 0 0 rgba(255, 20, 144, 0.42), -2px 0 0 rgba(35, 223, 242, 0.34), 0 3px 0 #000;
  text-transform: uppercase;
}

.agent-feature-card__body {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 22px 24px;
}

.agent-feature-card__body strong,
.agent-vault-card__body strong {
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: clamp(18px, 2.1vw, 28px);
  line-height: 1.05;
  text-transform: uppercase;
}

.agent-feature-card__body span,
.agent-vault-card__body span {
  color: #c7d5e2;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  text-transform: uppercase;
}

.agent-feature-card__meta {
  position: absolute;
  left: calc(min(100%, 41%) + 0px);
  right: 42px;
  bottom: 0;
  align-items: center;
  background: rgba(3, 6, 11, 0.98);
  border-top: 1px solid rgba(113, 132, 156, 0.42);
  color: #dbe6f3;
  display: flex;
  gap: 16px;
  height: 34px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.agent-feature-card__meta b,
.agent-feature-card__meta em {
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.agent-feature-card__play {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 34px;
  overflow: hidden;
  border-left: 1px solid var(--arcade-yellow);
  background: rgba(255, 212, 59, 0.15);
  color: transparent;
}

.agent-feature-card__play::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 6px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid var(--arcade-yellow);
}

.agent-games-brief {
  display: grid;
  grid-column: 1 / -1;
  align-content: center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 112px;
  border: 1px solid rgba(113, 132, 156, 0.46);
  background:
    radial-gradient(circle at 84% 18%, rgba(46, 224, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(9, 15, 28, 0.94), rgba(3, 6, 11, 0.98));
  padding: 18px;
}

.agent-games-brief span {
  display: grid;
  gap: 5px;
  border-left: 3px solid rgba(35, 223, 242, 0.72);
  color: #d9e6ef;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  padding-left: 12px;
  text-transform: uppercase;
}

.agent-games-brief b {
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 12px;
}

.agent-games-directory {
  padding-top: 12px;
}

.agent-games-hero {
  min-height: 520px;
  background-color: #02050a;
  background-image:
    linear-gradient(90deg, rgba(2, 5, 10, 0.94) 0%, rgba(2, 5, 10, 0.74) 42%, rgba(2, 5, 10, 0.18) 100%),
    url("../img/agent-games/rainbot-bot-homies.jpg?v=20260712-jpg");
  background-position:
    center,
    center 58%;
  background-repeat: no-repeat;
  background-size:
    cover,
    100% auto;
}

.agent-vault {
  padding-bottom: 8px;
}

.agent-vault__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 8px 8px;
}

.agent-vault-card {
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.8fr);
  min-height: 430px;
}

.agent-vault-card__poster {
  min-height: 430px;
}

.agent-vault-card__status {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  background: var(--arcade-yellow);
  color: #130c00;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 6px 8px;
  text-transform: uppercase;
}

.agent-vault-card__body {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 26px;
}

.agent-vault-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agent-vault-card__meta b {
  border: 1px solid rgba(35, 223, 242, 0.36);
  background: rgba(35, 223, 242, 0.08);
  color: var(--arcade-cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  padding: 8px 9px;
  text-transform: uppercase;
}

.directory-card__poster--agent {
  background:
    radial-gradient(circle at 74% 22%, rgba(35, 223, 242, 0.18), transparent 32%),
    linear-gradient(165deg, #071221 0%, #02050a 76%);
}

.directory-card--agent .directory-card__meta {
  gap: 12px;
}

/* ===== The Slopwire media ===== */
.content-directory {
  max-width: 1480px;
  padding-top: 12px;
}

.media-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.62fr) minmax(260px, 0.32fr);
  gap: 24px;
  align-items: center;
  min-height: 410px;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 34px;
  background:
    radial-gradient(circle at 72% 18%, rgba(35, 223, 242, 0.2), transparent 32%),
    linear-gradient(95deg, rgba(255, 20, 144, 0.13), transparent 40%),
    linear-gradient(180deg, rgba(9, 15, 28, 0.96), rgba(3, 6, 11, 0.99));
}

.media-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(35, 223, 242, 0.07) 78px 80px);
  opacity: 0.44;
  pointer-events: none;
}

.media-hero--slopwire {
  border-color: rgba(255, 212, 59, 0.42);
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.34fr);
  isolation: isolate;
}

.media-hero--slopwire .media-hero__visual {
  position: absolute;
  inset: 0;
  min-height: 0;
  border: 0;
  box-shadow: none;
  z-index: -1;
}

.media-hero--slopwire::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(3, 6, 11, 0.96) 0%, rgba(3, 6, 11, 0.88) 28%, rgba(3, 6, 11, 0.48) 55%, rgba(3, 6, 11, 0.18) 100%),
    linear-gradient(180deg, rgba(3, 6, 11, 0.16) 0%, rgba(3, 6, 11, 0.62) 100%);
  pointer-events: none;
}

.media-hero--tv {
  border-color: rgba(35, 223, 242, 0.44);
}

.media-hero__copy,
.media-hero__visual,
.media-hero__ticker {
  position: relative;
  z-index: 1;
}

.media-hero h1 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(42px, 4.35vw, 62px);
  line-height: 0.95;
  margin: 0 0 16px;
  text-transform: uppercase;
  text-shadow: 4px 0 0 rgba(255, 20, 144, 0.34), -3px 0 0 rgba(35, 223, 242, 0.22), 0 5px 0 #000;
}

.media-hero p {
  color: #e6eef6;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.28vw, 17px);
  line-height: 1.45;
  margin: 0;
  max-width: 720px;
  text-transform: uppercase;
}

.media-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.media-hero__visual {
  min-height: 250px;
  overflow: hidden;
}

.media-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.05) drop-shadow(0 0 24px rgba(35, 223, 242, 0.16));
}

.media-hero--slopwire .media-hero__visual img {
  object-fit: cover;
  object-position: center right;
  image-rendering: pixelated;
  transform: none;
}

.media-hero__visual--screen {
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(35, 223, 242, 0.42);
  background: #02050a;
  box-shadow: 0 0 24px rgba(35, 223, 242, 0.16);
}

.media-hero__ticker {
  display: grid;
  gap: 10px;
}

.media-hero__ticker span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  border: 1px solid rgba(151, 171, 194, 0.34);
  background: rgba(0, 0, 0, 0.28);
  color: #edf3f7;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 11px 12px;
  text-transform: uppercase;
}

.media-hero__ticker b {
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 12px;
}

.content-feed,
.tv-feed {
  padding-bottom: 8px;
}

.home-media-panel {
  margin-top: 10px;
  padding-bottom: 8px;
}

.home-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 8px 8px;
}

.home-media-grid .slopwire-card {
  min-height: 0;
}

.home-media-grid .slopwire-card__body strong {
  font-size: clamp(17px, 1.6vw, 19px);
}

.slopwire-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 8px 8px;
}

.slopwire-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 34px;
  overflow: hidden;
  min-height: 0;
  border: 1px solid rgba(113, 132, 156, 0.62);
  background:
    radial-gradient(circle at 80% 12%, rgba(255, 212, 59, 0.13), transparent 30%),
    linear-gradient(180deg, rgba(7, 10, 18, 0.98), rgba(3, 6, 11, 0.99));
  color: var(--arcade-white);
  text-decoration: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.slopwire-card:hover {
  border-color: var(--arcade-yellow);
  box-shadow: 0 0 24px rgba(255, 212, 59, 0.18), 0 0 24px rgba(255, 20, 144, 0.12);
  text-decoration: none;
  transform: translateY(-2px);
}

.slopwire-card--lead {
  grid-column: span 2;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  grid-template-rows: auto 34px;
}

.slopwire-card__poster {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  aspect-ratio: 5 / 4;
  min-height: 0;
  overflow: hidden;
  background: #02050a;
}

.slopwire-card--lead .slopwire-card__poster {
  align-self: start;
  grid-row: 1;
}

.slopwire-card--lead .slopwire-card__meta {
  grid-column: 2;
}

.slopwire-card__poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(1.08) contrast(1.05);
}

.slopwire-card__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 5px);
  pointer-events: none;
}

.slopwire-card--tv .slopwire-card__poster {
  aspect-ratio: 16 / 9;
}

.slopwire-card--tv .slopwire-card__poster img {
  object-fit: cover;
}

.slopwire-card--tv .slopwire-card__poster::after {
  background:
    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.52)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px);
}

.slopwire-card__poster span {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  background: var(--arcade-yellow);
  color: #130c00;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  padding: 6px 8px;
  text-transform: uppercase;
}

.slopwire-card__body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px 20px 14px;
}

.slopwire-card--lead .slopwire-card__body {
  align-content: center;
  padding: 30px 28px;
}

.slopwire-card__body small,
.slopwire-card__meta,
.slopwire-marquee span,
.related-slat__grid a span,
.tv-stage__copy span,
.tv-card__body em {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.slopwire-card__body small {
  color: var(--arcade-cyan);
  font-size: 11px;
  font-weight: 900;
}

.slopwire-card__body strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  /* Press Start 2P is a blocky pixel face; long satirical headlines in a ~320px
     column stacked one word per line and became unreadable at the old 33-40px.
     Capped so the lead headline reads in a few scannable lines. */
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 3px 0 0 rgba(255, 20, 144, 0.28), -2px 0 0 rgba(35, 223, 242, 0.18);
}

.slopwire-card:not(.slopwire-card--lead) .slopwire-card__body strong {
  font-size: 18px;
}

.slopwire-card__body span {
  color: #c7d5e2;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.48;
  text-transform: uppercase;
}

.slopwire-card__meta {
  align-items: center;
  background: rgba(3, 6, 11, 0.98);
  border-top: 1px solid rgba(113, 132, 156, 0.42);
  color: #dbe6f3;
  display: flex;
  gap: 16px;
  min-width: 0;
  padding: 0 10px;
  font-size: 11px;
}

.slopwire-card__meta b,
.slopwire-card__meta em {
  font-style: normal;
  font-weight: 800;
}

.slopwire-marquee {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  padding: 18px;
}

.slopwire-marquee span {
  border-left: 3px solid var(--arcade-yellow);
  color: #e8eef5;
  font-size: 12px;
  line-height: 1.35;
  padding-left: 12px;
}

.article-shell {
  display: grid;
  gap: 12px;
  max-width: 1120px;
  padding-top: 12px;
}

.slopwire-article {
  overflow: hidden;
}

.slopwire-article__header {
  padding: 34px 34px 24px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 212, 59, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(9, 15, 28, 0.98), rgba(3, 6, 11, 0.98));
}

.slopwire-article__back {
  color: var(--arcade-cyan);
  display: inline-block;
  font-family: var(--arcade-font);
  font-size: 10px;
  margin-bottom: 16px;
  text-transform: uppercase;
  text-decoration: none;
}

.slopwire-article__back::before {
  content: "<";
  color: var(--arcade-yellow);
  margin-right: 8px;
}

.slopwire-article h1 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(34px, 6vw, 68px);
  line-height: 0.98;
  margin: 0 0 16px;
  text-transform: uppercase;
  text-shadow: 4px 0 0 rgba(255, 20, 144, 0.3), -3px 0 0 rgba(35, 223, 242, 0.2), 0 5px 0 #000;
}

.slopwire-article__header p {
  color: #dfeaf4;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  max-width: 860px;
  text-transform: uppercase;
}

.slopwire-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.slopwire-article__meta span {
  border: 1px solid rgba(151, 171, 194, 0.32);
  color: #cbd8e4;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 7px 9px;
  text-transform: uppercase;
}

.slopwire-article__image {
  margin: 0;
  overflow: hidden;
  background: #02050a;
}

.slopwire-article__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: saturate(1.08) contrast(1.05);
}

.slopwire-article__body {
  max-width: 760px;
  padding: 34px;
}

.slopwire-article__body p {
  color: #d5dee8;
  font-size: 18px;
  line-height: 1.72;
  margin: 0 0 20px;
}

.related-slat {
  padding-bottom: 8px;
}

.related-slat__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 8px 8px;
}

.related-slat__grid a {
  border: 1px solid rgba(113, 132, 156, 0.56);
  background: rgba(3, 6, 11, 0.98);
  color: var(--arcade-white);
  display: grid;
  gap: 8px;
  min-height: 104px;
  padding: 16px;
  text-decoration: none;
}

.related-slat__grid a:hover {
  border-color: var(--arcade-yellow);
  text-decoration: none;
}

.related-slat__grid a strong {
  font-family: var(--arcade-font);
  font-size: 18px;
  line-height: 1.08;
  text-transform: uppercase;
}

.related-slat__grid a span {
  color: var(--arcade-cyan);
  font-size: 10px;
  font-weight: 900;
}

.tv-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr);
  gap: 22px;
  margin-bottom: 10px;
  padding: 20px;
}

.tv-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(35, 223, 242, 0.52);
  background: #02050a;
  box-shadow: 0 0 24px rgba(35, 223, 242, 0.18);
}

.tv-screen img,
.tv-screen video {
  display: block;
  width: 100%;
  height: 100%;
  background: #02050a;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.1) contrast(1.06);
}

.tv-screen img[hidden],
.tv-screen video[hidden] {
  display: none;
}

.tv-screen__scan {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.45)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 5px);
  pointer-events: none;
}

.tv-screen__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 82px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.tv-screen[data-tv-mode="video"] .tv-screen__play {
  display: none;
}

.tv-screen__play::before {
  content: "";
  position: absolute;
  left: 33px;
  top: 23px;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 27px solid var(--arcade-yellow);
}

.tv-screen__bug {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  background: rgba(3, 6, 11, 0.82);
  border: 1px solid rgba(35, 223, 242, 0.46);
  color: var(--arcade-cyan);
  font-family: var(--arcade-font);
  font-size: 11px;
  padding: 7px 8px;
}

.tv-stage__copy {
  align-content: center;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.tv-stage__copy > span {
  color: var(--arcade-cyan);
  font-size: 10px;
  font-weight: 900;
}

.tv-stage__copy h2 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(28px, 3.35vw, 46px);
  line-height: 0.98;
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  text-shadow: 3px 0 0 rgba(255, 20, 144, 0.34), -2px 0 0 rgba(35, 223, 242, 0.2);
}

.tv-stage__copy p {
  color: #cfdce8;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  min-width: 0;
  text-transform: uppercase;
}

.tv-stage__rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.tv-stage__rail span {
  border: 1px solid rgba(255, 20, 144, 0.4);
  color: #f2e9ef;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  padding: 8px 9px;
  text-transform: uppercase;
}

.tv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 8px 8px;
}

.tv-card {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(113, 132, 156, 0.62);
  background:
    radial-gradient(circle at 80% 10%, rgba(35, 223, 242, 0.13), transparent 30%),
    #02050a;
  color: var(--arcade-white);
  cursor: pointer;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 312px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.tv-card:hover,
.tv-card[aria-pressed="true"] {
  border-color: var(--arcade-cyan);
  box-shadow: 0 0 22px rgba(35, 223, 242, 0.22);
  transform: translateY(-2px);
}

.tv-card:focus-visible {
  outline: 2px solid var(--arcade-yellow);
  outline-offset: 2px;
}

.tv-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.tv-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.05);
}

.tv-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.58)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px);
  pointer-events: none;
}

.tv-card__thumb span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  background: rgba(3, 6, 11, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: var(--arcade-yellow);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  padding: 5px 7px;
}

.tv-card__body {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.tv-card__body strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 21px;
  line-height: 1.08;
  text-transform: uppercase;
}

.tv-card__body em {
  color: var(--arcade-cyan);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .media-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  }

  .media-hero__ticker {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .slopwire-grid,
  .home-media-grid,
  .tv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .slopwire-card--lead {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .media-hero,
  .tv-stage,
  .slopwire-card--lead,
  .related-slat__grid {
    grid-template-columns: 1fr;
  }

  .media-hero {
    padding: 26px 20px;
  }

  .media-hero__visual {
    order: -1;
    min-height: 170px;
  }

  .media-hero__visual--screen {
    min-height: 0;
  }

  .media-hero__ticker,
  .slopwire-marquee {
    grid-template-columns: 1fr;
  }

  .slopwire-card--lead {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) 34px;
  }

  .slopwire-card--lead .slopwire-card__poster {
    grid-row: auto;
  }

  .slopwire-card--lead .slopwire-card__meta {
    grid-column: auto;
  }

  .slopwire-card {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .media-hero h1 {
    font-size: 42px;
  }

  .media-hero p,
  .tv-stage__copy p,
  .slopwire-card__body span {
    font-size: 12px;
  }

  .slopwire-grid,
  .home-media-grid,
  .tv-grid {
    grid-template-columns: 1fr;
  }

  .slopwire-card__body,
  .slopwire-card--lead .slopwire-card__body,
  .slopwire-article__header,
  .slopwire-article__body {
    padding: 22px 18px;
  }

  .slopwire-article__body p {
    font-size: 16px;
  }

  .tv-stage {
    padding: 12px;
  }

  .tv-card {
    min-height: 0;
  }
}

.recursive-page {
  max-width: 1820px;
  width: min(100%, 1820px);
}

.agent-game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 16px;
  align-items: start;
  flex: 1;
  min-height: 0;
}

.recursive-stage {
  position: relative;
  align-items: stretch;
  border-color: rgba(35, 223, 242, 0.34);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 20, 144, 0.18), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(35, 223, 242, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(7, 12, 24, 0.98), rgba(2, 5, 10, 0.99));
  overflow: hidden;
}

.recursive-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(35, 223, 242, 0.06) 64px 66px);
  opacity: 0.58;
  pointer-events: none;
}

.recursive-hud,
.recursive-console {
  position: relative;
  z-index: 1;
}

.recursive-hud {
  display: grid;
  grid-template-columns: repeat(7, minmax(88px, 1fr));
  gap: 8px;
  width: 100%;
}

.recursive-hud span {
  display: grid;
  gap: 4px;
  min-height: 54px;
  border: 1px solid rgba(113, 132, 156, 0.36);
  background: rgba(2, 5, 10, 0.72);
  padding: 8px 10px;
}

.recursive-hud b {
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 14px;
  line-height: 1;
}

.recursive-hud em {
  color: #9fb4c6;
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.recursive-console {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
  gap: 12px;
  height: clamp(440px, calc(100dvh - 320px), 720px);
  min-height: 0;
}

.recursive-graph-panel,
.recursive-protocol {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(113, 132, 156, 0.42);
  background: rgba(2, 5, 10, 0.72);
  overflow: hidden;
}

.recursive-graph-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.recursive-protocol {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto minmax(112px, 0.34fr) auto minmax(106px, 0.36fr);
}

.recursive-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  border-bottom: 1px solid rgba(113, 132, 156, 0.34);
  padding: 12px 14px;
}

.recursive-panel-head b {
  display: block;
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}

.recursive-panel-head span {
  display: block;
  color: #9fb4c6;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
  margin-top: 5px;
  text-transform: uppercase;
}

.recursive-panel-head code {
  color: var(--arcade-cyan);
  font: inherit;
  text-transform: none;
}

.recursive-mini-btn {
  min-height: 32px;
  border: 1px solid rgba(35, 223, 242, 0.42);
  background: rgba(35, 223, 242, 0.08);
  color: var(--arcade-cyan);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  padding: 8px 10px;
  text-transform: uppercase;
}

.recursive-mini-btn:hover {
  border-color: var(--arcade-yellow);
  color: var(--arcade-yellow);
}

.recursive-graph {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 50%, rgba(35, 223, 242, 0.12), transparent 26%),
    radial-gradient(circle at 76% 22%, rgba(255, 20, 144, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(7, 14, 26, 0.92), rgba(2, 5, 10, 0.98));
}

.recursive-edge-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.recursive-edge {
  stroke: rgba(35, 223, 242, 0.32);
  stroke-width: 0.24;
  stroke-dasharray: 1.2 0.7;
  vector-effect: non-scaling-stroke;
}

.recursive-edge.is-active {
  stroke: rgba(255, 212, 59, 0.8);
  stroke-width: 0.42;
}

.recursive-node {
  position: absolute;
  z-index: 2;
  width: clamp(42px, 4.8vw, 64px);
  height: clamp(30px, 3.4vw, 44px);
  transform: translate(-50%, -50%);
  border: 2px solid rgba(35, 223, 242, 0.72);
  border-radius: 4px;
  background: rgba(2, 5, 10, 0.88);
  color: var(--arcade-white);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.4px;
  box-shadow: 0 0 18px rgba(35, 223, 242, 0.12);
}

.recursive-node::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid currentColor;
  opacity: 0.34;
}

.recursive-node span {
  position: relative;
  z-index: 1;
}

.recursive-node--logic { border-color: #2ee0ff; color: #8af4ff; }
.recursive-node--memory { border-color: #ff2e88; color: #ff9bcc; }
.recursive-node--risk { border-color: #6bff7d; color: #b7ffbf; }
.recursive-node--gate { border-color: #ffd43b; color: #ffe88a; }
.recursive-node--mirror { border-color: #c58cff; color: #dfc8ff; }
.recursive-node--entropy { border-color: #ff5c5c; color: #ffb1b1; }
.recursive-node--terminal { border-color: #ffffff; color: #ffffff; }

.recursive-node.is-current {
  background: rgba(255, 212, 59, 0.16);
  box-shadow: 0 0 0 2px rgba(255, 212, 59, 0.26), 0 0 24px rgba(255, 212, 59, 0.38);
}

.recursive-node.has-shard::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--arcade-yellow);
  box-shadow: 0 0 16px rgba(255, 212, 59, 0.85);
}

.recursive-node.is-locked {
  opacity: 0.55;
  filter: grayscale(0.35);
}

.recursive-observation,
.recursive-log,
#rrlCommands {
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.32);
  color: #dcecff;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.42;
  margin: 0;
  overflow: auto;
  padding: 12px 14px;
  white-space: pre-wrap;
}

.recursive-observation {
  color: #b8ffde;
}

.recursive-command-label {
  align-items: center;
  display: flex;
  min-height: 34px;
  border-top: 1px solid rgba(113, 132, 156, 0.34);
  border-bottom: 1px solid rgba(113, 132, 156, 0.34);
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 10px;
  padding: 0 14px;
  text-transform: uppercase;
}

#rrlCommands {
  color: var(--arcade-white);
  resize: vertical;
  outline: none;
}

#rrlCommands:focus {
  box-shadow: inset 0 0 0 2px rgba(35, 223, 242, 0.42);
}

.recursive-command-row {
  align-items: center;
  border-top: 1px solid rgba(113, 132, 156, 0.34);
  border-bottom: 1px solid rgba(113, 132, 156, 0.34);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 64px;
  padding: 10px 12px;
}

.recursive-command-row .arcade-btn {
  min-height: 40px;
  min-width: 116px;
  padding: 0 12px;
}

.recursive-log {
  color: #f2d18d;
}

.recursive-api-card {
  display: grid;
  gap: 8px;
}

.recursive-api-card code {
  display: block;
  overflow: auto;
  border: 1px solid rgba(35, 223, 242, 0.24);
  background: rgba(0, 0, 0, 0.24);
  color: #b8ffde;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  padding: 8px;
  white-space: pre;
}

.consensus-page {
  max-width: 1820px;
  width: min(100%, 1820px);
}

.consensus-stage {
  position: relative;
  align-items: stretch;
  border-color: rgba(255, 46, 136, 0.34);
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 46, 136, 0.2), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(107, 255, 125, 0.13), transparent 28%),
    linear-gradient(180deg, rgba(7, 10, 20, 0.98), rgba(2, 5, 10, 0.99));
  overflow: hidden;
}

.consensus-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(255, 46, 136, 0.055) 64px 66px);
  opacity: 0.58;
  pointer-events: none;
}

.consensus-hud,
.consensus-console {
  position: relative;
  z-index: 1;
}

.consensus-hud {
  display: grid;
  grid-template-columns: repeat(7, minmax(88px, 1fr));
  gap: 8px;
  width: 100%;
}

.consensus-hud span {
  display: grid;
  gap: 4px;
  min-height: 54px;
  border: 1px solid rgba(113, 132, 156, 0.36);
  background: rgba(2, 5, 10, 0.72);
  padding: 8px 10px;
}

.consensus-hud b {
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 14px;
  line-height: 1;
}

.consensus-hud em {
  color: #9fb4c6;
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.consensus-console {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  gap: 12px;
  height: clamp(440px, calc(100dvh - 320px), 720px);
  min-height: 0;
}

.consensus-council-panel,
.consensus-protocol {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(113, 132, 156, 0.42);
  background: rgba(2, 5, 10, 0.72);
  overflow: hidden;
}

.consensus-council-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.consensus-protocol {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto minmax(112px, 0.32fr) auto minmax(110px, 0.34fr);
}

.consensus-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  border-bottom: 1px solid rgba(113, 132, 156, 0.34);
  padding: 12px 14px;
}

.consensus-panel-head b {
  display: block;
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}

.consensus-panel-head span {
  display: block;
  color: #9fb4c6;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
  margin-top: 5px;
  text-transform: uppercase;
}

.consensus-panel-head code {
  color: var(--arcade-cyan);
  font: inherit;
  text-transform: none;
}

.consensus-mini-btn {
  min-height: 32px;
  border: 1px solid rgba(255, 46, 136, 0.42);
  background: rgba(255, 46, 136, 0.08);
  color: #ff9bcc;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  padding: 8px 10px;
  text-transform: uppercase;
}

.consensus-mini-btn:hover {
  border-color: var(--arcade-yellow);
  color: var(--arcade-yellow);
}

.consensus-board {
  display: grid;
  grid-template-rows: minmax(330px, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 48%, rgba(255, 46, 136, 0.16), transparent 23%),
    radial-gradient(circle at 22% 30%, rgba(46, 224, 255, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(7, 14, 26, 0.92), rgba(2, 5, 10, 0.98));
}

.consensus-ring {
  position: relative;
  min-height: 330px;
  overflow: hidden;
}

.consensus-ring::before,
.consensus-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.consensus-ring::before {
  width: min(56%, 340px);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 46, 136, 0.45);
  box-shadow: 0 0 28px rgba(255, 46, 136, 0.18), inset 0 0 44px rgba(46, 224, 255, 0.06);
}

.consensus-ring::after {
  width: min(32%, 200px);
  aspect-ratio: 1;
  border: 2px dashed rgba(255, 212, 59, 0.42);
}

.consensus-faction {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 3px;
  width: clamp(94px, 12vw, 132px);
  min-height: 72px;
  border: 2px solid var(--faction-color);
  background: rgba(2, 5, 10, 0.88);
  color: var(--arcade-white);
  cursor: pointer;
  padding: 8px;
  text-align: left;
  box-shadow: 0 0 20px color-mix(in srgb, var(--faction-color), transparent 72%);
}

.consensus-faction:nth-child(1) { left: 50%; top: 16%; }
.consensus-faction:nth-child(2) { left: 78%; top: 32%; }
.consensus-faction:nth-child(3) { left: 78%; top: 68%; }
.consensus-faction:nth-child(4) { left: 50%; top: 84%; }
.consensus-faction:nth-child(5) { left: 22%; top: 68%; }
.consensus-faction:nth-child(6) { left: 22%; top: 32%; }

.consensus-faction b,
.consensus-faction em {
  color: var(--faction-color);
  font-family: var(--arcade-font);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
}

.consensus-faction span {
  color: #d9e6ef;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.consensus-faction.is-blocking {
  filter: saturate(0.8);
  opacity: 0.72;
}

.consensus-faction.is-supporting {
  background: rgba(13, 35, 26, 0.88);
}

.consensus-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid rgba(113, 132, 156, 0.34);
  padding: 10px;
}

.consensus-issue {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 64px;
  overflow: hidden;
  border: 1px solid rgba(35, 223, 242, 0.24);
  background: rgba(0, 0, 0, 0.28);
  color: var(--arcade-white);
  cursor: pointer;
  padding: 9px 10px;
  text-align: left;
}

.consensus-issue span,
.consensus-issue em {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.consensus-issue b {
  position: relative;
  z-index: 1;
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 17px;
  line-height: 1;
}

.consensus-issue em {
  color: #9fb4c6;
}

.consensus-issue i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--arcade-cyan), var(--arcade-pink));
  opacity: 0.8;
}

.consensus-observation,
.consensus-log,
#ccCommands {
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.32);
  color: #dcecff;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.42;
  margin: 0;
  overflow: auto;
  padding: 12px 14px;
  white-space: pre-wrap;
}

.consensus-observation {
  color: #b8ffde;
}

.consensus-command-label {
  align-items: center;
  display: flex;
  min-height: 34px;
  border-top: 1px solid rgba(113, 132, 156, 0.34);
  border-bottom: 1px solid rgba(113, 132, 156, 0.34);
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 10px;
  padding: 0 14px;
  text-transform: uppercase;
}

#ccCommands {
  color: var(--arcade-white);
  resize: vertical;
  outline: none;
}

#ccCommands:focus {
  box-shadow: inset 0 0 0 2px rgba(255, 46, 136, 0.42);
}

.consensus-command-row {
  align-items: center;
  border-top: 1px solid rgba(113, 132, 156, 0.34);
  border-bottom: 1px solid rgba(113, 132, 156, 0.34);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 64px;
  padding: 10px 12px;
}

.consensus-command-row .arcade-btn {
  min-height: 40px;
  min-width: 116px;
  padding: 0 12px;
}

.consensus-log {
  color: #f2d18d;
}

.consensus-api-card {
  display: grid;
  gap: 8px;
}

.consensus-api-card code {
  display: block;
  overflow: auto;
  border: 1px solid rgba(255, 46, 136, 0.26);
  background: rgba(0, 0, 0, 0.24);
  color: #b8ffde;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  padding: 8px;
  white-space: pre;
}

@media (max-width: 1260px) {
  .agent-games-strip,
  .agent-vault__grid,
  .agent-game-layout {
    grid-template-columns: 1fr;
  }

  .agent-feature-card,
  .agent-vault-card {
    grid-template-columns: 1fr;
  }

  .agent-feature-card__meta {
    left: 0;
  }

  .agent-vault-card__poster {
    min-height: 300px;
  }

  .recursive-console {
    grid-template-columns: 1fr;
    height: auto;
  }

  .consensus-console {
    grid-template-columns: 1fr;
    height: auto;
  }

  .recursive-graph-panel {
    min-height: 560px;
  }

  .consensus-council-panel {
    min-height: 620px;
  }

  .recursive-protocol {
    height: 680px;
  }

  .consensus-protocol {
    height: 700px;
  }

  .agent-game-side {
    position: static;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .agent-games-hero {
    min-height: 620px;
    background-position:
      center,
      56% bottom;
    background-size:
      cover,
      135% auto;
  }

  .agent-feature-card__art,
  .agent-vault-card__poster,
  .agent-games-brief {
    min-height: 230px;
  }

  .agent-feature-card__body,
  .agent-vault-card__body {
    padding: 18px;
  }

  .agent-feature-card__meta {
    font-size: 9px;
    gap: 10px;
  }

  .agent-games-brief {
    grid-template-columns: 1fr;
  }

  .recursive-hud,
  .consensus-hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recursive-console,
  .consensus-console {
    height: auto;
    min-height: 0;
  }

  .recursive-graph-panel {
    grid-template-rows: auto minmax(320px, 40dvh);
    min-height: 0;
  }

  .recursive-graph {
    min-height: 320px;
  }

  .recursive-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .consensus-council-panel {
    min-height: 580px;
  }

  .consensus-board {
    grid-template-rows: minmax(320px, 42dvh) auto;
  }

  .consensus-ring {
    min-height: 320px;
  }

  .consensus-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .consensus-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .consensus-protocol .consensus-panel-head {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .consensus-protocol .consensus-panel-head > div {
    flex: 1 1 220px;
  }

  .consensus-protocol .consensus-panel-head .consensus-mini-btn {
    flex: 0 0 auto;
  }

  .recursive-protocol {
    height: 720px;
    grid-template-rows: auto minmax(220px, 1fr) auto minmax(132px, 0.38fr) auto minmax(118px, 0.4fr);
  }

  .consensus-protocol {
    height: 730px;
    grid-template-rows: auto minmax(220px, 1fr) auto minmax(132px, 0.38fr) auto minmax(118px, 0.4fr);
  }
}

@media (max-width: 480px) {
  .agent-feature-card__meta {
    position: relative;
    right: auto;
    bottom: auto;
    height: auto;
    min-height: 34px;
    padding-right: 48px;
  }

  .agent-feature-card__play {
    bottom: 0;
  }

  .agent-vault-card__title,
  .agent-feature-card__title {
    font-size: 22px;
  }

  .recursive-hud b,
  .consensus-hud b {
    font-size: 12px;
  }

  .recursive-node {
    width: 44px;
    height: 32px;
    font-size: 9px;
  }

  .recursive-command-row .arcade-btn,
  .recursive-command-row .recursive-mini-btn,
  .consensus-command-row .arcade-btn,
  .consensus-command-row .consensus-mini-btn {
    width: 100%;
  }

  .consensus-faction {
    width: 98px;
    min-height: 64px;
  }

  .consensus-faction span {
    font-size: 8px;
  }
}

/* ===== Rainbot accounts and forum ===== */
.nav__pro-state--sync {
  border-color: var(--arcade-cyan);
  color: var(--arcade-cyan);
}

.rb-account-modal {
  max-width: 540px;
  text-align: left;
}

.rb-auth-modal {
  max-height: calc(100dvh - 32px);
  max-width: 560px;
  overflow-y: auto;
  padding: 0;
  border: 1px solid rgba(35, 223, 242, 0.52);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(35, 223, 242, 0.14), transparent 34%),
    radial-gradient(circle at 100% 22%, rgba(255, 20, 144, 0.1), transparent 35%),
    linear-gradient(160deg, #0a101a 0%, #05080f 66%, #080712 100%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72), 0 0 42px rgba(35, 223, 242, 0.12);
}

.rb-auth-topbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 22px 28px 6px;
}

.rb-auth-brand {
  align-items: center;
  display: inline-flex;
  gap: 11px;
}

.rb-auth-brand > span {
  align-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(35, 223, 242, 0.72);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(35, 223, 242, 0.2), rgba(255, 20, 144, 0.16));
  box-shadow: inset 0 0 16px rgba(35, 223, 242, 0.08);
  color: var(--arcade-cyan);
  display: inline-flex;
  font: 900 10px/1 var(--arcade-font);
  justify-content: center;
}

.rb-auth-brand strong {
  color: var(--arcade-white);
  font: 900 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rb-auth-close {
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(151, 171, 194, 0.24);
  border-radius: 50%;
  background: rgba(5, 8, 15, 0.72);
  color: #b9c6d4;
  cursor: pointer;
  display: inline-flex;
  font: 400 24px/1 var(--font-body);
  justify-content: center;
  padding: 0 0 2px;
}

.rb-auth-close:hover,
.rb-auth-close:focus-visible {
  border-color: var(--arcade-cyan);
  color: var(--arcade-white);
  outline: none;
}

.rb-auth-heading {
  padding: 20px 32px 0;
}

.rb-auth-kicker {
  color: var(--arcade-pink);
  display: block;
  font: 900 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.rb-auth-heading h2 {
  color: var(--arcade-white);
  font: 900 clamp(25px, 5vw, 34px)/1.05 var(--font-body);
  letter-spacing: -0.035em;
  margin: 0;
  text-transform: none;
}

.rb-auth-heading p {
  color: #aebdca;
  font: 500 14px/1.55 var(--font-body);
  margin: 10px 0 0;
  max-width: 430px;
}

.rb-auth-form {
  display: grid;
  gap: 14px;
  margin: 18px 0;
}

.rb-auth-modal .rb-auth-form {
  gap: 16px;
  margin: 20px 32px 0;
}

.rb-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 22px 32px 0;
  padding: 4px;
  border: 1px solid rgba(151, 171, 194, 0.2);
  border-radius: 12px;
  background: rgba(2, 5, 10, 0.7);
}

.rb-auth-tab {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8fa1b2;
  cursor: pointer;
  font: 800 13px/1 var(--font-body);
  padding: 12px 10px;
}

.rb-auth-tab.is-active {
  background: linear-gradient(180deg, rgba(35, 223, 242, 0.19), rgba(35, 223, 242, 0.09));
  box-shadow: inset 0 0 0 1px rgba(35, 223, 242, 0.28);
  color: var(--arcade-white);
}

.rb-auth-tab:focus-visible {
  outline: 2px solid var(--arcade-cyan);
  outline-offset: 2px;
}

.rb-auth-panel[hidden] {
  display: none;
}

.rb-auth-modal .rb-form-field {
  color: #c2ceda;
  font-size: 10px;
  gap: 8px;
  letter-spacing: 0.08em;
}

.rb-auth-modal .rb-form-field input {
  min-height: 50px;
  border-color: rgba(151, 171, 194, 0.32);
  border-radius: 10px;
  background: rgba(2, 5, 10, 0.82);
  font-size: 15px;
  padding: 13px 14px;
}

.rb-auth-modal .rb-form-field input::placeholder {
  color: #617181;
}

.rb-auth-modal .rb-form-field small {
  color: #788999;
  font: 500 11px/1.4 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

.rb-auth-password-label {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.rb-auth-password-label button {
  border: 0;
  background: transparent;
  color: var(--arcade-cyan);
  cursor: pointer;
  font: 700 11px/1 var(--font-body);
  padding: 2px 0;
  text-transform: none;
}

.rb-auth-password-label button:hover,
.rb-auth-password-label button:focus-visible {
  color: var(--arcade-white);
  text-decoration: underline;
}

.rb-auth-submit {
  width: 100%;
  min-height: 50px;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(255, 20, 144, 0.18);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.rb-auth-divider {
  align-items: center;
  color: #6f8191;
  display: grid;
  font: 700 11px/1 var(--font-body);
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  letter-spacing: 0;
  margin: 22px 32px;
}

.rb-auth-divider::before,
.rb-auth-divider::after {
  background: rgba(151, 171, 194, 0.2);
  content: "";
  height: 1px;
}

.rb-google-button {
  align-items: center;
  width: calc(100% - 64px);
  min-height: 50px;
  border: 1px solid #d7dce1;
  border-radius: 10px;
  background: #ffffff;
  color: #202124;
  cursor: pointer;
  display: flex;
  font: 700 14px/1 var(--font-body);
  gap: 12px;
  justify-content: center;
  margin: 0 32px;
  padding: 12px 18px;
}

.rb-google-button:hover,
.rb-google-button:focus-visible {
  background: #f7f9fb;
  border-color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  outline: none;
}

.rb-google-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.rb-google-button img {
  flex: 0 0 20px;
  object-fit: contain;
}

.rb-auth-modal .rb-modal-note {
  color: #7f909f;
  font: 500 12px/1.5 var(--font-body);
  margin: 16px 32px 0;
  text-align: center;
}

.rb-auth-modal .rb-modal-status {
  margin: 10px 32px 0;
  min-height: 42px;
  padding: 0 0 20px;
}

.rb-auth-unavailable {
  display: grid;
  gap: 8px;
  padding: 42px 32px 48px;
  text-align: center;
}

.rb-auth-unavailable strong {
  color: var(--arcade-white);
  font: 900 22px/1.2 var(--font-body);
}

.rb-auth-unavailable span {
  color: #95a7b7;
  font: 500 14px/1.5 var(--font-body);
}

.rb-form-field {
  display: grid;
  gap: 7px;
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: left;
  text-transform: uppercase;
}

.rb-form-field input,
.rb-form-field select,
.rb-form-field textarea {
  width: 100%;
  border: 1px solid rgba(151, 171, 194, 0.45);
  border-radius: 4px;
  background: #05070d;
  color: var(--arcade-white);
  font: 600 14px/1.35 var(--font-body);
  outline: none;
  padding: 12px 13px;
}

.rb-form-field textarea {
  min-height: 118px;
  resize: vertical;
}

.rb-form-field input:focus,
.rb-form-field select:focus,
.rb-form-field textarea:focus {
  border-color: var(--arcade-cyan);
  box-shadow: 0 0 0 3px rgba(35, 223, 242, 0.14);
}

.rb-modal-note {
  font-size: 13px;
}

.rb-modal-status {
  min-height: 20px;
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  margin: 12px 0 0;
  text-align: center;
}

.rb-modal-status[data-kind="good"] {
  color: var(--arcade-green);
}

.rb-modal-status[data-kind="bad"] {
  color: #ff6b7b;
}

.rb-profile-actions {
  border-top: 1px solid rgba(151, 171, 194, 0.18);
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
}

.rb-profile-titlebar {
  align-items: end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.rb-profile-titlebar span {
  color: var(--arcade-white);
}

.rb-profile-titlebar small {
  color: var(--arcade-cyan);
  font: 900 11px/1.2 var(--font-mono);
  text-transform: uppercase;
}

.rb-profile-modal {
  max-height: calc(100vh - 32px);
  max-width: min(1080px, calc(100vw - 24px));
  overflow-y: auto;
}

.rb-profile-shell {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.08fr);
  margin: 18px 0 4px;
}

.rb-profile-preview,
.rb-profile-form,
.rb-profile-form-section {
  display: grid;
  gap: 12px;
}

.rb-profile-section-label {
  align-items: center;
  color: var(--arcade-muted);
  display: flex;
  font: 900 10px/1 var(--font-mono);
  gap: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.rb-profile-section-label::after {
  background: linear-gradient(90deg, rgba(151, 171, 194, 0.35), transparent);
  content: "";
  flex: 1 1 auto;
  height: 1px;
}

.rb-profile-card {
  --profile-accent: var(--arcade-cyan);
  --profile-glow: rgba(35, 223, 242, 0.2);
  align-items: start;
  border: 1px solid var(--profile-accent);
  border-radius: 6px;
  background:
    linear-gradient(135deg, var(--profile-glow), rgba(8, 11, 19, 0.94) 56%),
    #070b13;
  box-shadow: inset 0 0 0 1px rgba(249, 251, 255, 0.04), 0 16px 32px rgba(0, 0, 0, 0.26);
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 0;
  padding: 16px;
}

.rb-profile-hero {
  align-items: center;
  grid-template-columns: 88px minmax(0, 1fr) minmax(170px, 0.44fr);
  margin-top: 16px;
  overflow: hidden;
  padding: 18px;
  position: relative;
}

.rb-profile-hero::before {
  background:
    linear-gradient(90deg, transparent, var(--profile-accent), transparent),
    repeating-linear-gradient(90deg, rgba(249, 251, 255, 0.08) 0 1px, transparent 1px 12px);
  content: "";
  height: 2px;
  left: 18px;
  opacity: 0.56;
  position: absolute;
  right: 18px;
  top: 0;
}

.rb-profile-hero .rb-profile-account-line {
  align-self: stretch;
  justify-content: center;
}

.rb-profile-avatar,
.forum-avatar {
  --profile-accent: var(--arcade-cyan);
  --profile-glow: rgba(35, 223, 242, 0.2);
}

.rb-profile-card--cyan,
.rb-profile-avatar--cyan,
.forum-avatar--cyan {
  --profile-accent: var(--arcade-cyan);
  --profile-glow: rgba(35, 223, 242, 0.2);
}

.rb-profile-card--pink,
.rb-profile-avatar--pink,
.forum-avatar--pink {
  --profile-accent: var(--arcade-pink);
  --profile-glow: rgba(255, 20, 144, 0.2);
}

.rb-profile-card--yellow,
.rb-profile-avatar--yellow,
.forum-avatar--yellow {
  --profile-accent: var(--arcade-yellow);
  --profile-glow: rgba(247, 217, 36, 0.2);
}

.rb-profile-card--green,
.rb-profile-avatar--green,
.forum-avatar--green {
  --profile-accent: var(--arcade-green);
  --profile-glow: rgba(72, 243, 90, 0.18);
}

.rb-profile-card--red,
.rb-profile-avatar--red,
.forum-avatar--red {
  --profile-accent: #ff6b7b;
  --profile-glow: rgba(255, 107, 123, 0.2);
}

.rb-profile-card--white,
.rb-profile-avatar--white,
.forum-avatar--white {
  --profile-accent: var(--arcade-white);
  --profile-glow: rgba(249, 251, 255, 0.14);
}

.rb-profile-avatar {
  align-items: center;
  border: 1px solid var(--profile-accent);
  border-radius: 6px;
  background:
    linear-gradient(135deg, var(--profile-glow), rgba(8, 11, 19, 0.88)),
    #05070d;
  color: var(--arcade-white);
  display: inline-flex;
  font-family: var(--arcade-font);
  font-size: 19px;
  height: 82px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
  width: 82px;
}

.rb-profile-avatar--image,
.forum-avatar--image {
  background: #05070d;
  border-color: var(--profile-accent);
  padding: 0;
  transform: none;
}

.rb-profile-avatar--image::before,
.rb-profile-avatar--image::after,
.forum-avatar--image::before,
.forum-avatar--image::after {
  display: none;
}

.rb-profile-avatar img,
.forum-avatar img {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.rb-profile-avatar::after,
.forum-avatar::after {
  background: var(--profile-accent);
  content: "";
  inset: auto 9px 9px;
  height: 2px;
  opacity: 0.8;
  position: absolute;
}

.rb-profile-avatar--glitch,
.forum-avatar--glitch {
  transform: skew(-4deg);
}

.rb-profile-avatar--storm::before,
.forum-avatar--storm::before {
  background: linear-gradient(90deg, transparent, var(--profile-accent), transparent);
  content: "";
  height: 1px;
  left: 6px;
  position: absolute;
  right: 6px;
  top: 16px;
}

.rb-profile-avatar--slime,
.forum-avatar--slime {
  border-radius: 34% 44% 38% 48%;
}

.rb-profile-avatar--crown::before,
.forum-avatar--crown::before {
  border-bottom: 7px solid var(--profile-accent);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
}

.rb-profile-avatar--skull,
.forum-avatar--skull {
  background:
    radial-gradient(circle at 36% 38%, rgba(249, 251, 255, 0.28) 0 4px, transparent 5px),
    radial-gradient(circle at 64% 38%, rgba(249, 251, 255, 0.28) 0 4px, transparent 5px),
    linear-gradient(135deg, var(--profile-glow), rgba(8, 11, 19, 0.94)),
    #05070d;
}

.rb-profile-avatar--image,
.forum-avatar--image {
  border-radius: 6px;
  transform: none;
}

.rb-profile-card__copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.rb-profile-card__copy strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 20px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.rb-profile-card__copy span:not(.rb-profile-kicker),
.rb-profile-card__copy p,
.rb-profile-card__copy em {
  color: #dce6f2;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  overflow-wrap: anywhere;
}

.rb-profile-card__copy p {
  max-width: 62ch;
}

.rb-profile-card__copy em {
  color: var(--profile-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.rb-profile-kicker {
  color: var(--profile-accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.rb-profile-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.rb-profile-stat {
  border: 1px solid rgba(151, 171, 194, 0.26);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(249, 251, 255, 0.035), rgba(249, 251, 255, 0)),
    rgba(8, 11, 19, 0.76);
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 72px;
  padding: 11px;
}

.rb-profile-stat--hero {
  background:
    linear-gradient(135deg, rgba(35, 223, 242, 0.16), rgba(255, 20, 144, 0.08)),
    rgba(8, 11, 19, 0.82);
  border-color: rgba(35, 223, 242, 0.4);
  min-height: 92px;
}

.rb-profile-stat--email {
  grid-column: 1 / -1;
}

.rb-profile-stat span {
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.rb-profile-stat strong {
  color: var(--arcade-white);
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rb-profile-stat--hero strong {
  color: var(--arcade-cyan);
  font-family: var(--arcade-font);
  font-size: 24px;
  text-transform: uppercase;
}

.rb-profile-stat .rb-xp-bar {
  --progress: 0%;
  background: rgba(151, 171, 194, 0.18);
  border: 1px solid rgba(151, 171, 194, 0.34);
  display: block;
  height: 14px;
  overflow: hidden;
  padding: 2px;
  text-transform: none;
}

.rb-profile-stat .rb-xp-bar i {
  background: linear-gradient(90deg, var(--arcade-pink), var(--arcade-yellow), var(--arcade-cyan));
  display: block;
  height: 100%;
  width: var(--progress);
}

.rb-profile-stat small {
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.rb-profile-stat--wide {
  grid-column: 1 / -1;
}

.rb-profile-stat--achievements {
  gap: 10px;
}

.rb-achievement-summary {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

.rb-achievement-summary strong {
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 18px;
}

.rb-achievement-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rb-achievement-badge {
  align-items: center;
  border: 1px solid rgba(151, 171, 194, 0.26);
  border-radius: 5px;
  background: rgba(5, 7, 13, 0.7);
  display: grid;
  gap: 8px;
  grid-template-columns: 48px minmax(0, 1fr);
  min-width: 0;
  padding: 8px;
}

.rb-achievement-badge__copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.rb-achievement-badge b {
  color: var(--arcade-white);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.rb-achievement-badge small,
.rb-achievement-badge em {
  font-family: var(--font-mono);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.35;
  text-transform: uppercase;
}

.rb-achievement-badge small {
  color: var(--arcade-muted);
}

.rb-achievement-badge em {
  color: #c7d5e2;
}

.rb-achievement-badge.is-unlocked {
  border-color: rgba(247, 217, 36, 0.72);
  box-shadow: inset 0 0 0 1px rgba(247, 217, 36, 0.12);
}

.rb-achievement-badge.is-unlocked small {
  color: var(--arcade-yellow);
}

.rb-profile-recent-list {
  display: grid;
  gap: 7px;
}

.rb-profile-recent-list span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rb-profile-recent-list b {
  color: var(--arcade-white);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rb-profile-recent-list em {
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.rb-profile-account-line {
  border: 1px solid rgba(151, 171, 194, 0.22);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(249, 251, 255, 0.07), rgba(249, 251, 255, 0)),
    rgba(5, 7, 13, 0.58);
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
}

.rb-profile-account-line span {
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.rb-profile-account-line strong {
  color: var(--arcade-white);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rb-profile-form {
  margin: 0;
}

.rb-profile-form-section {
  border: 1px solid rgba(151, 171, 194, 0.2);
  border-radius: 6px;
  background: rgba(5, 7, 13, 0.42);
  padding: 12px;
}

.rb-profile-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rb-form-field--wide {
  grid-column: 1 / -1;
}

.rb-profile-form textarea {
  min-height: 96px;
  resize: vertical;
}

.rb-profile-avatar-field,
.rb-profile-accent-field {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.rb-profile-avatar-field legend,
.rb-profile-accent-field legend {
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 8px;
  padding: 0;
  text-transform: uppercase;
}

.rb-avatar-choice-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
}

.rb-avatar-choice {
  cursor: pointer;
  min-width: 0;
  position: relative;
}

.rb-avatar-choice input {
  opacity: 0;
  position: absolute;
}

.rb-avatar-choice__card {
  align-items: center;
  border: 1px solid rgba(151, 171, 194, 0.32);
  border-radius: 6px;
  background: rgba(5, 7, 13, 0.82);
  color: var(--arcade-muted);
  display: grid;
  gap: 6px;
  min-height: 102px;
  padding: 7px;
  pointer-events: none;
  text-align: center;
  transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.rb-avatar-choice__card img {
  aspect-ratio: 1;
  border: 1px solid rgba(249, 251, 255, 0.12);
  border-radius: 5px;
  display: block;
  object-fit: cover;
  width: 100%;
}

.rb-avatar-choice__card span {
  font: 900 8px/1.15 var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.rb-avatar-choice:hover .rb-avatar-choice__card,
.rb-avatar-choice:focus-within .rb-avatar-choice__card {
  border-color: rgba(35, 223, 242, 0.72);
  color: var(--arcade-cyan);
  transform: translateY(-1px);
}

.rb-avatar-choice input:checked + .rb-avatar-choice__card {
  border-color: var(--arcade-yellow);
  box-shadow: 0 0 0 3px rgba(247, 217, 36, 0.12);
  color: var(--arcade-white);
}

.rb-profile-swatches {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.rb-profile-swatch {
  --swatch-color: var(--arcade-cyan);
  cursor: pointer;
  min-width: 0;
  position: relative;
}

.rb-profile-swatch input {
  opacity: 0;
  position: absolute;
}

.rb-profile-swatch span {
  align-items: center;
  border: 1px solid rgba(151, 171, 194, 0.3);
  border-radius: 4px;
  color: var(--arcade-muted);
  display: flex;
  font: 900 10px/1 var(--font-mono);
  gap: 7px;
  justify-content: center;
  min-height: 36px;
  overflow: hidden;
  padding: 8px 5px;
  text-transform: uppercase;
}

.rb-profile-swatch span::before {
  background: var(--swatch-color);
  border-radius: 999px;
  content: "";
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}

.rb-profile-swatch input:checked + span,
.rb-profile-swatch:focus-within span {
  border-color: var(--swatch-color);
  color: var(--arcade-white);
  box-shadow: 0 0 0 3px rgba(35, 223, 242, 0.1);
}

.rb-profile-swatch--cyan { --swatch-color: var(--arcade-cyan); }
.rb-profile-swatch--pink { --swatch-color: var(--arcade-pink); }
.rb-profile-swatch--yellow { --swatch-color: var(--arcade-yellow); }
.rb-profile-swatch--green { --swatch-color: var(--arcade-green); }
.rb-profile-swatch--red { --swatch-color: #ff6b7b; }
.rb-profile-swatch--white { --swatch-color: var(--arcade-white); }

.rb-leaderboard {
  display: grid;
  gap: 12px;
}

.rb-leaderboard__header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.rb-leaderboard__kicker {
  color: var(--arcade-cyan);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.rb-leaderboard__title {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 14px;
  line-height: 1.35;
  margin: 0;
  text-transform: uppercase;
}

.rb-leaderboard__link {
  border: 1px solid rgba(35, 223, 242, 0.46);
  border-radius: 4px;
  color: var(--arcade-cyan);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  padding: 7px 8px;
  text-decoration: none;
  text-transform: uppercase;
}

.rb-leaderboard__link:hover {
  background: rgba(35, 223, 242, 0.08);
  text-decoration: none;
}

.rb-leaderboard__self {
  align-items: center;
  border: 1px solid rgba(247, 217, 36, 0.4);
  border-radius: 5px;
  background: rgba(247, 217, 36, 0.08);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
}

.rb-leaderboard__self span {
  color: var(--arcade-yellow);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.rb-leaderboard__self strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 13px;
}

.rb-leaderboard__rows {
  display: grid;
  gap: 8px;
}

.rb-leaderboard-row {
  align-items: center;
  border: 1px solid rgba(151, 171, 194, 0.24);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(35, 223, 242, 0.08), transparent 34%),
    rgba(5, 7, 13, 0.72);
  display: grid;
  grid-template-columns: 34px 36px minmax(0, 1fr) auto;
  gap: 9px;
  min-height: 56px;
  padding: 8px;
}

.rb-leaderboard-row--local {
  border-color: rgba(247, 217, 36, 0.42);
  background:
    linear-gradient(90deg, rgba(247, 217, 36, 0.1), transparent 36%),
    rgba(5, 7, 13, 0.76);
}

.rb-leaderboard-row__rank {
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 11px;
  text-align: center;
}

.rb-leaderboard-avatar {
  border: 1px solid var(--profile-accent);
  border-radius: 4px;
  display: block;
  height: 34px;
  overflow: hidden;
  width: 34px;
}

.rb-leaderboard-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.rb-leaderboard-row__who {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.rb-leaderboard-row__who strong {
  align-items: center;
  color: var(--arcade-white);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rb-bot-badge {
  border: 1px solid rgba(247, 217, 36, 0.58);
  border-radius: 4px;
  color: var(--arcade-yellow);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  padding: 3px 5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.rb-leaderboard-row__who em {
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.rb-leaderboard-row__score {
  color: var(--arcade-cyan);
  font-family: var(--arcade-font);
  font-size: 13px;
  line-height: 1;
  text-align: right;
}

.rb-leaderboard__note,
.rb-leaderboard-empty {
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.rb-leaderboard-empty {
  border: 1px dashed rgba(151, 171, 194, 0.28);
  border-radius: 5px;
  padding: 12px;
  text-align: center;
  text-transform: uppercase;
}

.community-leaderboard {
  margin: 0;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(247, 217, 36, 0.1), rgba(5, 7, 13, 0.78) 42%),
    radial-gradient(circle at 100% 0, rgba(255, 20, 144, 0.12), transparent 36%);
}

.rb-leaderboard--global .rb-leaderboard__title {
  font-size: clamp(18px, 2.6vw, 28px);
}

.rb-leaderboard--global .rb-leaderboard__rows {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rb-game-hub {
  border: 1px solid rgba(151, 171, 194, 0.26);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255, 20, 144, 0.09), rgba(5, 7, 13, 0.92) 40%),
    radial-gradient(circle at 100% 0, rgba(35, 223, 242, 0.16), transparent 34%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
  display: grid;
  gap: clamp(10px, 1.2vw, 14px);
  margin: clamp(12px, 1.5vw, 18px) auto 0;
  max-width: 1200px;
  padding: clamp(12px, 1.5vw, 16px);
  width: 100%;
}

.game-page > .rb-game-hub {
  grid-column: 1 / -1;
}

.rb-game-hub__header {
  align-items: start;
  border-bottom: 1px solid rgba(151, 171, 194, 0.18);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding-bottom: 14px;
}

.rb-game-hub__header h2 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(16px, 2vw, 23px);
  line-height: 1.35;
  margin: 0;
  text-transform: uppercase;
}

.rb-game-hub__header p {
  color: var(--arcade-muted);
  font: 800 11px/1.5 var(--font-mono);
  margin: 6px 0 0;
  text-transform: uppercase;
}

.rb-game-hub__eyebrow,
.rb-game-hub__panel-title small,
.rb-game-hub-challenge small,
.rb-game-hub-rec small,
.rb-game-hub-stat small {
  color: var(--arcade-cyan);
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.35;
  text-transform: uppercase;
}

.rb-game-hub__eyebrow {
  margin-bottom: 6px;
}

.rb-game-hub__actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.rb-game-hub__actions button {
  border: 1px solid rgba(35, 223, 242, 0.44);
  border-radius: 4px;
  background: rgba(5, 7, 13, 0.76);
  color: var(--arcade-white);
  cursor: pointer;
  font: 900 10px/1 var(--font-mono);
  min-height: 34px;
  padding: 9px 10px;
  text-transform: uppercase;
}

.rb-game-hub__actions button:first-child {
  background: linear-gradient(135deg, var(--arcade-pink), #9b185d);
  border-color: rgba(255, 20, 144, 0.8);
  color: #05070d;
}

.rb-game-hub__actions button:hover,
.rb-game-hub__actions button:focus-visible {
  background: rgba(35, 223, 242, 0.14);
  outline: none;
  text-decoration: none;
}

.rb-game-hub__actions button:first-child:hover,
.rb-game-hub__actions button:first-child:focus-visible {
  background: linear-gradient(135deg, var(--arcade-yellow), var(--arcade-pink));
}

.rb-game-hub__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(250px, 0.95fr) minmax(235px, 0.85fr) minmax(280px, 1.1fr);
}

.rb-game-hub__panel {
  border: 1px solid rgba(151, 171, 194, 0.2);
  border-radius: 5px;
  background: rgba(5, 7, 13, 0.72);
  display: grid;
  gap: 10px;
  margin: 0;
  max-width: none;
  min-width: 0;
  padding: clamp(10px, 1.2vw, 12px);
  width: 100%;
}

.rb-game-hub__panel-title {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.rb-game-hub__panel-title strong {
  color: var(--arcade-white);
  font: 900 12px/1.25 var(--font-mono);
  overflow-wrap: anywhere;
  text-align: right;
  text-transform: uppercase;
}

.rb-game-hub__stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rb-game-hub-stat {
  border: 1px solid rgba(151, 171, 194, 0.2);
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(35, 223, 242, 0.09), transparent 54%),
    rgba(0, 0, 0, 0.2);
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 9px;
}

.rb-game-hub-stat strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.rb-game-hub-stat em,
.rb-game-hub-challenge em {
  color: var(--arcade-muted);
  font: 800 10px/1.35 var(--font-mono);
  font-style: normal;
}

.rb-game-hub-challenge {
  border: 1px solid rgba(247, 217, 36, 0.36);
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(247, 217, 36, 0.1), rgba(0, 0, 0, 0.14)),
    rgba(5, 7, 13, 0.48);
  color: inherit;
  display: grid;
  gap: 10px;
  min-height: 100%;
  padding: 12px;
  text-decoration: none;
}

.rb-game-hub-challenge:hover,
.rb-game-hub-challenge:focus-visible,
.rb-game-hub-rec:hover,
.rb-game-hub-rec:focus-visible {
  border-color: rgba(35, 223, 242, 0.58);
  outline: none;
  text-decoration: none;
}

.rb-game-hub-challenge strong {
  color: var(--arcade-white);
  display: block;
  font-family: var(--arcade-font);
  font-size: 13px;
  line-height: 1.35;
  margin: 4px 0 5px;
  text-transform: uppercase;
}

.rb-game-hub-challenge b {
  color: var(--arcade-yellow);
  font: 900 10px/1.35 var(--font-mono);
  text-transform: uppercase;
}

.rb-game-hub-progress {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.42);
  border-radius: 999px;
  display: block;
  height: 10px;
  overflow: hidden;
}

.rb-game-hub-progress i {
  background: linear-gradient(90deg, var(--arcade-cyan), var(--arcade-yellow), var(--arcade-pink));
  display: block;
  height: 100%;
  width: var(--progress, 0%);
}

.rb-game-hub__recs {
  display: grid;
  gap: 8px;
}

.rb-game-hub-rec {
  align-items: center;
  border: 1px solid rgba(151, 171, 194, 0.2);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  display: grid;
  gap: 10px;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 64px;
  padding: 7px;
  text-decoration: none;
}

.rb-game-hub-rec img {
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 4px;
  height: 50px;
  object-fit: cover;
  width: 50px;
}

.rb-game-hub-rec span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.rb-game-hub-rec strong {
  color: var(--arcade-white);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-standalone-leaderboard-btn {
  border: 1px solid rgba(216, 210, 198, 0.34);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.62);
  color: rgba(249, 251, 255, 0.82);
  cursor: pointer;
  font: 900 10px/1 var(--font-mono);
  left: 16px;
  letter-spacing: 0;
  min-height: 34px;
  padding: 10px 12px;
  position: fixed;
  bottom: 16px;
  text-transform: uppercase;
  z-index: 42;
}

@media (max-width: 1100px) {
  .rb-game-hub__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rb-game-hub__panel--more .rb-game-hub__recs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rb-game-hub-rec {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .rb-game-hub-rec img {
    height: 44px;
    width: 44px;
  }
}

.rb-standalone-leaderboard-btn:hover {
  border-color: rgba(35, 223, 242, 0.72);
  color: var(--arcade-cyan);
}

.rb-standalone-leaderboard {
  border: 1px solid rgba(151, 171, 194, 0.34);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(9, 13, 22, 0.96), rgba(5, 7, 13, 0.92));
  bottom: 62px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.52);
  left: 16px;
  max-height: min(460px, calc(100vh - 96px));
  overflow-y: auto;
  padding: 14px;
  position: fixed;
  width: min(360px, calc(100vw - 32px));
  z-index: 42;
}

.rb-standalone-leaderboard[hidden] {
  display: none;
}

.community-shell {
  display: grid;
  gap: 18px;
  max-width: 1240px;
  padding-bottom: 52px;
}

.forum-hero {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 24px;
  margin-top: 18px;
  min-height: 260px;
  overflow: hidden;
  padding: 30px;
  position: relative;
}

.forum-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 20, 144, 0.22), transparent 38%),
    linear-gradient(24deg, transparent 55%, rgba(35, 223, 242, 0.16)),
    repeating-linear-gradient(90deg, rgba(35, 223, 242, 0.08) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(0deg, rgba(247, 217, 36, 0.05) 0 1px, transparent 1px 18px);
  pointer-events: none;
}

.forum-hero::after {
  content: "";
  position: absolute;
  inset: auto 28px 24px auto;
  width: 180px;
  height: 70px;
  border-right: 2px solid rgba(247, 217, 36, 0.55);
  border-bottom: 2px solid rgba(247, 217, 36, 0.55);
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
  opacity: 0.7;
  pointer-events: none;
}

.forum-hero > * {
  position: relative;
  z-index: 1;
}

.forum-hero__eyebrow {
  color: var(--arcade-cyan);
  display: inline-block;
  font-family: var(--arcade-font);
  font-size: 10px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.forum-hero h1 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(30px, 4.5vw, 54px);
  line-height: 1.08;
  margin: 0 0 16px;
  max-width: 820px;
}

.forum-hero p {
  color: var(--arcade-muted);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  max-width: 680px;
}

.forum-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.forum-hero__chips span {
  border: 1px solid rgba(151, 171, 194, 0.3);
  border-radius: 4px;
  background: rgba(5, 7, 13, 0.72);
  color: var(--arcade-white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 8px 10px;
  text-transform: uppercase;
}

.forum-hero__panel {
  border: 1px solid rgba(151, 171, 194, 0.32);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(8, 11, 19, 0.92), rgba(5, 7, 13, 0.78)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 9px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: grid;
  gap: 10px;
  justify-self: end;
  min-width: 220px;
  padding: 16px;
}

.forum-hero__panel-label {
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.forum-hero__status {
  border: 1px solid rgba(247, 217, 36, 0.8);
  border-radius: 4px;
  background: rgba(247, 217, 36, 0.08);
  color: var(--arcade-yellow);
  font-family: var(--arcade-font);
  font-size: 9px;
  padding: 12px 14px;
  text-transform: uppercase;
  white-space: nowrap;
}

.forum-hero__status[data-kind="good"] {
  border-color: var(--arcade-green);
  color: var(--arcade-green);
}

.forum-hero__status[data-kind="bad"] {
  border-color: #ff6b7b;
  color: #ff6b7b;
}

.forum-hero__status[data-kind="warn"] {
  border-color: var(--arcade-yellow);
  color: var(--arcade-yellow);
}

.forum-layout {
  display: grid;
  grid-template-columns: minmax(240px, 292px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 0;
}

.forum-sidebar,
.forum-main {
  margin: 0;
  min-width: 0;
  padding: 16px;
}

.forum-sidebar {
  align-self: start;
  background:
    linear-gradient(180deg, rgba(8, 11, 19, 0.84), rgba(5, 7, 13, 0.74)),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(151, 171, 194, 0.08) 13px 14px);
  position: sticky;
  top: 108px;
}

.forum-main {
  background:
    linear-gradient(180deg, rgba(8, 11, 19, 0.82), rgba(5, 7, 13, 0.72)),
    radial-gradient(circle at 100% 0, rgba(35, 223, 242, 0.09), transparent 34%);
  display: grid;
  gap: 14px;
}

.forum-sidebar h2,
.forum-form h2,
.forum-card h2 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.forum-category-list,
.forum-topic-list {
  display: grid;
  gap: 9px;
}

.forum-reply-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.forum-category-list {
  scrollbar-width: none;
}

.forum-category-list::-webkit-scrollbar {
  display: none;
}

.forum-category {
  border: 1px solid rgba(151, 171, 194, 0.28);
  border-radius: 4px;
  color: var(--arcade-white);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  min-height: 64px;
  overflow: hidden;
  padding: 10px;
  position: relative;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.forum-category:hover,
.forum-category.is-active {
  background: rgba(35, 223, 242, 0.08);
  border-color: var(--arcade-cyan);
  transform: translateY(-1px);
  text-decoration: none;
}

.forum-category--mod {
  border-color: rgba(247, 217, 36, 0.46);
}

.forum-category--mod:hover,
.forum-category--mod.is-active {
  background: rgba(247, 217, 36, 0.08);
  border-color: var(--arcade-yellow);
}

.forum-category__code {
  align-items: center;
  border: 1px solid rgba(151, 171, 194, 0.28);
  border-radius: 4px;
  background: rgba(8, 11, 19, 0.88);
  color: var(--arcade-cyan);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  justify-content: center;
  min-height: 40px;
}

.forum-category__copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.forum-category strong {
  font-family: var(--arcade-font);
  font-size: 10px;
  line-height: 1.35;
  text-transform: uppercase;
}

.forum-category span {
  color: var(--arcade-muted);
  font-size: 12px;
  line-height: 1.4;
}

.forum-card,
.forum-form,
.forum-topic,
.forum-reply,
.forum-preview-card,
.forum-empty,
.forum-loading {
  border: 1px solid rgba(151, 171, 194, 0.28);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(9, 13, 22, 0.9), rgba(5, 7, 13, 0.78));
  color: var(--arcade-white);
  padding: 16px;
}

.forum-card p,
.forum-preview-card p,
.forum-empty,
.forum-loading {
  color: var(--arcade-muted);
  line-height: 1.6;
}

.forum-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.forum-preview-card h3 {
  color: var(--arcade-cyan);
  font-family: var(--arcade-font);
  font-size: 11px;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.forum-form {
  display: grid;
  gap: 14px;
  margin-bottom: 4px;
}

.forum-form__header,
.forum-form__footer {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.forum-form__header p {
  color: var(--arcade-muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  max-width: 320px;
}

.forum-form__grid {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 12px;
}

.forum-form__footer {
  align-items: center;
}

.forum-form__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.forum-kicker {
  color: var(--arcade-cyan);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.forum-login-card {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 4px;
}

.forum-login-card__copy {
  display: grid;
  gap: 6px;
}

.forum-login-card h2,
.forum-login-card p {
  margin: 0;
}

.forum-topic {
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.forum-topic::before,
.forum-report::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--arcade-cyan), rgba(35, 223, 242, 0.05));
}

.forum-topic--pinned::before {
  background: linear-gradient(180deg, var(--arcade-yellow), rgba(247, 217, 36, 0.05));
}

.forum-topic--hidden::before,
.forum-report--open::before {
  background: linear-gradient(180deg, #ff6b7b, rgba(255, 107, 123, 0.06));
}

.forum-topic__header {
  align-items: center;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px 16px 0 20px;
}

.forum-avatar {
  align-items: center;
  border: 1px solid var(--profile-accent);
  border-radius: 4px;
  background:
    linear-gradient(135deg, var(--profile-glow), rgba(8, 11, 19, 0.9)),
    #05070d;
  color: var(--arcade-white);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--arcade-font);
  font-size: 13px;
  height: 42px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
  width: 42px;
}

.forum-topic__identity {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.forum-topic__content {
  display: grid;
  gap: 8px;
  padding: 0 16px 0 20px;
}

.forum-badges,
.forum-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.forum-badge,
.forum-action {
  align-items: center;
  border: 1px solid rgba(151, 171, 194, 0.36);
  border-radius: 4px;
  background: rgba(8, 11, 19, 0.86);
  color: var(--arcade-muted);
  display: inline-flex;
  font: 800 10px/1 var(--font-mono);
  min-height: 30px;
  padding: 8px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

.forum-badge {
  min-height: 0;
  pointer-events: none;
}

.forum-badge--pinned,
.forum-action--mod,
.forum-action.is-active {
  border-color: rgba(247, 217, 36, 0.72);
  color: var(--arcade-yellow);
}

.forum-badge--locked {
  border-color: rgba(35, 223, 242, 0.7);
  color: var(--arcade-cyan);
}

.forum-badge--hidden,
.forum-action--danger {
  border-color: rgba(255, 107, 123, 0.72);
  color: #ff6b7b;
}

.forum-action {
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.forum-action:hover,
.forum-action--link:hover {
  background: rgba(35, 223, 242, 0.08);
  border-color: var(--arcade-cyan);
  color: var(--arcade-cyan);
  text-decoration: none;
  transform: translateY(-1px);
}

.forum-actions--topic {
  border-top: 1px solid rgba(151, 171, 194, 0.18);
  padding: 12px 16px 14px 20px;
}

.forum-actions--reply {
  justify-content: flex-end;
}

.forum-meta-row {
  align-items: center;
  color: var(--arcade-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
}

.forum-meta-row span {
  min-width: 0;
}

.forum-meta-row span:not(:last-child)::after {
  color: rgba(151, 171, 194, 0.42);
  content: "/";
  margin-left: 7px;
}

.forum-meta-row .forum-meta-chip {
  border: 1px solid rgba(35, 223, 242, 0.48);
  border-radius: 4px;
  color: var(--arcade-cyan);
  padding: 3px 6px;
}

.forum-meta-row .forum-meta-chip--title {
  border-color: rgba(247, 217, 36, 0.52);
  color: var(--arcade-yellow);
}

.forum-meta-row .forum-meta-chip--bot {
  border-color: rgba(252, 91, 245, 0.62);
  color: var(--arcade-pink);
}

.forum-meta-row .forum-meta-chip::after {
  content: "";
  margin: 0;
}

.forum-stat {
  border: 1px solid rgba(151, 171, 194, 0.24);
  border-radius: 4px;
  background: rgba(8, 11, 19, 0.74);
  display: grid;
  gap: 3px;
  min-width: 76px;
  padding: 8px 10px;
  text-align: center;
}

.forum-stat strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 14px;
  line-height: 1;
}

.forum-stat span {
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.forum-mod-header {
  align-items: center;
  border: 1px solid rgba(151, 171, 194, 0.28);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(247, 217, 36, 0.12), rgba(5, 7, 13, 0.78) 38%),
    rgba(5, 7, 13, 0.72);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 16px;
}

.forum-mod-header h2 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 14px;
  margin: 0;
  text-transform: uppercase;
}

.forum-report {
  border: 1px solid rgba(151, 171, 194, 0.28);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(9, 13, 22, 0.92), rgba(5, 7, 13, 0.78));
  color: var(--arcade-white);
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 16px 16px 16px 20px;
  position: relative;
}

.forum-report--reviewing::before {
  background: linear-gradient(180deg, var(--arcade-yellow), rgba(247, 217, 36, 0.06));
}

.forum-report--closed::before {
  background: linear-gradient(180deg, var(--arcade-green), rgba(72, 243, 90, 0.06));
}

.forum-report__target {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}

.forum-topic__meta,
.forum-topic__foot {
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.forum-topic__title,
.forum-topic__heading {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(15px, 1.8vw, 21px);
  line-height: 1.35;
  text-decoration: none;
}

.forum-topic__title:hover {
  color: var(--arcade-cyan);
  text-decoration: none;
}

.forum-topic__body,
.forum-reply__body {
  color: #dce6f2;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.forum-topic--full {
  border-color: rgba(35, 223, 242, 0.42);
  padding: 18px 18px 18px 22px;
  margin-bottom: 12px;
}

.forum-topic--full .forum-stat {
  justify-self: start;
}

.forum-reply {
  align-items: start;
  --reply-indent: min(calc(var(--reply-depth, 0) * 22px), 154px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin-left: var(--reply-indent);
  overflow: visible;
  position: relative;
}

.forum-reply .forum-actions {
  grid-column: 2;
}

.forum-reply--child {
  border-left: 2px solid rgba(151, 171, 194, 0.22);
}

.forum-reply--child::before {
  content: "";
  position: absolute;
  inset: -9px auto auto -2px;
  width: 18px;
  height: 22px;
  border-bottom: 2px solid rgba(151, 171, 194, 0.18);
}

.forum-reply--replying {
  border-color: rgba(35, 223, 242, 0.58);
}

.forum-reply__content {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.forum-form--reply {
  margin-top: 16px;
}

.forum-form--reply-inline {
  border-left: 2px solid rgba(35, 223, 242, 0.42);
  gap: 10px;
  margin: 4px 0 0;
  padding: 12px;
}

.forum-form--reply-inline h2 {
  margin-bottom: 0;
}

.forum-form--reply-inline textarea {
  min-height: 82px;
}

.forum-back-link {
  color: var(--arcade-cyan);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 12px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .rb-profile-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .forum-hero,
  .forum-layout {
    grid-template-columns: 1fr;
  }

  .forum-sidebar {
    position: static;
  }

  .forum-hero__panel {
    justify-self: start;
    width: min(100%, 360px);
  }

  .forum-hero__status {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .forum-hero,
  .forum-sidebar,
  .forum-main {
    padding: 14px;
  }

  .forum-hero {
    min-height: 0;
  }

  .forum-hero h1 {
    font-size: 26px;
  }

  .forum-hero p {
    font-size: 14px;
    line-height: 1.55;
  }

  .forum-hero__chips {
    margin-top: 16px;
  }

  .forum-hero__chips span {
    font-size: 10px;
    padding: 7px 8px;
  }

  .forum-hero__panel {
    min-width: 0;
    padding: 12px;
    width: 100%;
  }

  .forum-category-list {
    display: flex;
    gap: 9px;
    margin: 0 -4px;
    overflow-x: auto;
    padding: 0 4px 6px;
    scroll-snap-type: x mandatory;
  }

  .forum-category {
    min-width: 220px;
    scroll-snap-align: start;
  }

  .forum-preview-grid,
  .forum-login-card,
  .forum-form__grid,
  .forum-form__header,
  .forum-form__footer {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .forum-login-card button {
    width: 100%;
  }

  .forum-topic__header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .forum-topic__header .forum-stat {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .forum-reply {
    grid-template-columns: 1fr;
  }

  .forum-reply .forum-actions {
    grid-column: auto;
    justify-content: flex-start;
  }

  .rb-profile-modal {
    padding: 18px;
  }

  .rb-profile-card,
  .rb-profile-form-grid,
  .rb-profile-summary {
    grid-template-columns: 1fr;
  }

  .rb-profile-card {
    min-height: 0;
  }

  .rb-profile-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rb-leaderboard--global .rb-leaderboard__rows {
    grid-template-columns: 1fr;
  }

  .rb-leaderboard-row {
    grid-template-columns: 30px 34px minmax(0, 1fr);
  }

  .rb-leaderboard-row__score {
    grid-column: 3;
    justify-self: start;
    text-align: left;
  }

  .rb-standalone-leaderboard {
    left: 12px;
    right: 12px;
    width: auto;
  }

  .rb-standalone-leaderboard-btn {
    left: 12px;
  }

  .rb-avatar-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rb-avatar-choice__card {
    min-height: 84px;
    padding: 6px;
  }

  .rb-profile-actions .btn,
  .rb-auth-form .btn {
    width: 100%;
  }

  .rb-auth-modal {
    max-height: calc(100dvh - 20px);
    border-radius: 14px;
  }

  .rb-auth-topbar {
    padding: 18px 20px 4px;
  }

  .rb-auth-heading {
    padding: 16px 20px 0;
  }

  .rb-auth-heading h2 {
    font-size: 27px;
  }

  .rb-auth-tabs,
  .rb-auth-modal .rb-auth-form {
    margin-left: 20px;
    margin-right: 20px;
  }

  .rb-auth-divider {
    margin: 20px;
  }

  .rb-google-button {
    width: calc(100% - 40px);
    margin: 0 20px;
  }

  .rb-auth-modal .rb-modal-note,
  .rb-auth-modal .rb-modal-status {
    margin-left: 20px;
    margin-right: 20px;
  }

  .rb-auth-unavailable {
    padding: 36px 20px 42px;
  }
}

/* ===== Reddit-style community and content comments ===== */
.community-page {
  background: #080a0f;
}

.community-shell {
  gap: 14px;
  max-width: 1180px;
}

.forum-hero {
  min-height: 0;
  padding: 20px;
}

.forum-hero h1 {
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 10px;
}

.forum-hero p {
  max-width: 760px;
}

.forum-layout {
  grid-template-columns: minmax(214px, 248px) minmax(0, 1fr);
}

.forum-sidebar,
.forum-main {
  border-radius: 4px;
  padding: 12px;
}

.forum-main {
  gap: 10px;
}

.forum-category {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 54px;
  padding: 9px;
}

.forum-category__code {
  min-height: 34px;
}

.forum-feed-controls {
  align-items: center;
  border: 1px solid rgba(151, 171, 194, 0.24);
  border-radius: 6px;
  background: rgba(5, 7, 13, 0.74);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}

.forum-feed-controls__title {
  display: grid;
  gap: 2px;
}

.forum-feed-controls h2 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 14px;
  margin: 0;
  text-transform: uppercase;
}

.forum-sort-tabs,
.rb-comments__sort {
  align-items: center;
  border: 1px solid rgba(151, 171, 194, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  display: flex;
  gap: 3px;
  padding: 3px;
}

.forum-sort-tab,
.rb-comments__sort button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--arcade-muted);
  cursor: pointer;
  font: 900 10px/1 var(--font-mono);
  min-height: 30px;
  padding: 8px 10px;
  text-transform: uppercase;
}

.forum-sort-tab:hover,
.forum-sort-tab.is-active,
.rb-comments__sort button:hover,
.rb-comments__sort button.is-active {
  background: rgba(35, 223, 242, 0.13);
  color: var(--arcade-cyan);
}

.forum-topic {
  border-radius: 4px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.forum-topic::before,
.forum-report::before {
  width: 2px;
}

.forum-topic__vote-rail {
  align-items: center;
  align-self: stretch;
  background: rgba(0, 0, 0, 0.18);
  border-right: 1px solid rgba(151, 171, 194, 0.16);
  color: var(--arcade-muted);
  display: grid;
  font-family: var(--font-mono);
  justify-items: center;
  padding: 10px 6px;
}

.forum-topic__vote-rail span {
  color: rgba(151, 171, 194, 0.72);
  font-size: 13px;
  line-height: 1;
}

.forum-topic__vote-rail strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 12px;
  line-height: 1;
}

.forum-topic__content {
  gap: 7px;
  padding: 12px 14px;
}

.forum-topic__header {
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0;
}

.forum-topic__title,
.forum-topic__heading {
  font-size: clamp(16px, 1.65vw, 20px);
}

.forum-actions--topic {
  border-top: 1px solid rgba(151, 171, 194, 0.14);
  grid-column: 2;
  padding: 10px 14px 12px;
}

.forum-topic--full {
  grid-template-columns: 52px minmax(0, 1fr);
  padding: 0;
}

.forum-topic--full .forum-badges,
.forum-topic--full .forum-actions {
  grid-column: 2;
  margin: 0 14px 12px;
}

.forum-reply {
  border-radius: 4px;
}

.rb-comments {
  border-radius: 6px;
  box-sizing: border-box;
  display: grid;
  gap: 14px;
  max-width: 1200px;
  margin-top: 18px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
  width: 100%;
}

.game-page > .rb-comments,
.article-shell > .rb-comments,
.content-directory > .rb-comments {
  grid-column: 1 / -1;
}

.game-page > .rb-comments {
  max-width: 920px;
}

.rb-comments__header {
  align-items: start;
  border-bottom: 1px solid rgba(151, 171, 194, 0.18);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding-bottom: 14px;
}

.rb-comments__kicker {
  color: var(--arcade-cyan);
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.rb-comments h2 {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: clamp(18px, 2.2vw, 24px);
  margin: 0;
  text-transform: uppercase;
}

.rb-comments__header p,
.rb-comments__status,
.rb-comments__prompt,
.rb-comments__empty {
  color: var(--arcade-muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.rb-comments__status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.rb-comments__status[data-kind="bad"] {
  color: #ff6b7b;
}

.rb-comments__prompt {
  align-items: center;
  border: 1px dashed rgba(151, 171, 194, 0.26);
  border-radius: 5px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}

.rb-comment-form {
  display: grid;
  gap: 10px;
}

.rb-comment-form textarea {
  border: 1px solid rgba(151, 171, 194, 0.34);
  border-radius: 5px;
  background: rgba(5, 7, 13, 0.92);
  color: var(--arcade-white);
  font: 600 14px/1.45 var(--font-body);
  min-height: 92px;
  outline: none;
  padding: 12px;
  resize: vertical;
  width: 100%;
}

.rb-comment-form textarea:focus {
  border-color: var(--arcade-cyan);
  box-shadow: 0 0 0 3px rgba(35, 223, 242, 0.13);
}

.rb-comment-form__actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.rb-comment-form__actions span {
  color: var(--arcade-muted);
  flex: 1 1 auto;
  font: 800 10px/1.4 var(--font-mono);
  text-transform: uppercase;
}

.rb-comments__list {
  display: grid;
  gap: 8px;
}

.rb-comments__empty {
  border: 1px dashed rgba(151, 171, 194, 0.25);
  border-radius: 5px;
  padding: 14px;
  text-align: center;
}

.rb-comment {
  --comment-indent: calc(var(--comment-depth, 0) * 18px);
  border: 1px solid rgba(151, 171, 194, 0.22);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(9, 13, 22, 0.86), rgba(5, 7, 13, 0.76));
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  margin-left: var(--comment-indent);
  overflow: hidden;
}

.rb-comment__vote {
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(151, 171, 194, 0.14);
  display: grid;
  justify-items: center;
  padding: 8px 4px;
}

.rb-comment__vote button {
  border: 0;
  background: transparent;
  color: rgba(151, 171, 194, 0.78);
  cursor: pointer;
  font: 900 13px/1 var(--font-mono);
  padding: 4px;
}

.rb-comment__vote button:hover,
.rb-comment__vote button.is-active {
  color: var(--arcade-cyan);
}

.rb-comment__vote strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 11px;
  line-height: 1;
}

.rb-comment__main {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px 12px 12px;
}

.rb-comment__meta {
  align-items: center;
  color: var(--arcade-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font: 800 11px/1.35 var(--font-mono);
  text-transform: uppercase;
}

.rb-comment__meta strong {
  color: var(--arcade-white);
}

.rb-comment-avatar {
  border: 1px solid var(--profile-accent);
  border-radius: 4px;
  display: inline-flex;
  height: 26px;
  overflow: hidden;
  width: 26px;
}

.rb-comment-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.rb-comment__body {
  color: #dce6f2;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.rb-comment__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rb-comment__actions button,
.rb-comment__actions a {
  border: 0;
  background: transparent;
  color: var(--arcade-muted);
  cursor: pointer;
  font: 900 10px/1 var(--font-mono);
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
}

.rb-comment__actions button:hover,
.rb-comment__actions a:hover {
  color: var(--arcade-cyan);
  text-decoration: none;
}

.rb-comment-form--reply {
  border-left: 2px solid rgba(35, 223, 242, 0.34);
  margin-top: 4px;
  padding-left: 10px;
}

.rb-comment-form--reply[hidden] {
  display: none;
}

.rb-comment__children {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 760px) {
  .rb-game-hub {
    padding: 12px;
  }

  .rb-game-hub__header {
    align-items: stretch;
    flex-direction: column;
  }

  .rb-game-hub__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .rb-game-hub__actions button {
    min-height: 36px;
    padding: 8px 9px;
    width: 100%;
  }

  .rb-game-hub__panel-title {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px 8px;
  }

  .rb-game-hub__panel-title strong {
    text-align: left;
  }

  .rb-game-hub__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rb-game-hub__panel--more .rb-game-hub__recs {
    grid-template-columns: minmax(0, 1fr);
  }

  .rb-game-hub-rec strong {
    white-space: normal;
  }

  .forum-feed-controls,
  .rb-comments__header,
  .rb-comments__prompt {
    align-items: stretch;
    flex-direction: column;
  }

  .forum-sort-tabs,
  .rb-comments__sort {
    justify-content: stretch;
    width: 100%;
  }

  .forum-sort-tab,
  .rb-comments__sort button {
    flex: 1 1 0;
  }

  .forum-topic,
  .forum-topic--full {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .forum-topic__vote-rail {
    padding-inline: 4px;
  }

  .forum-reply {
    --reply-indent: min(calc(var(--reply-depth, 0) * 10px), 42px);
    gap: 8px;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 10px;
  }

  .forum-reply .forum-avatar {
    height: 34px;
    width: 34px;
  }

  .forum-reply .forum-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .forum-form__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .forum-form__actions .btn {
    width: 100%;
  }

  .rb-comments {
    padding: 12px;
  }

  .rb-comment {
    --comment-indent: calc(var(--comment-depth, 0) * 10px);
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .rb-comment-form__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .rb-comment-form__actions .btn {
    width: 100%;
  }
}

/* Mobile site navigation and community overflow guardrails */
@media (max-width: 920px) {
  .nav {
    min-height: 0;
    padding: 8px 0 0;
  }

  #nav-slot {
    column-gap: 8px;
    grid-template-areas:
      "brand actions"
      "links links";
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }

  .nav__brand {
    grid-area: brand;
    height: 62px;
    padding-left: 12px;
  }

  .nav__brand img {
    width: min(210px, 54vw);
  }

  .nav__actions {
    grid-area: actions;
    min-width: 0;
    padding-right: 12px;
  }

  .nav__links {
    display: flex;
    gap: 8px;
    grid-area: links;
    justify-content: flex-start;
    margin: 0;
    min-width: 0;
    overflow-x: auto;
    padding: 0 12px 8px;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
    width: 100%;
  }

  .nav__links::-webkit-scrollbar {
    display: none;
  }

  .nav__links a,
  .nav__links a:not(.nav__cta) {
    align-items: center;
    background: rgba(5, 7, 13, 0.84);
    border: 1px solid rgba(151, 171, 194, 0.28);
    border-radius: 4px;
    color: var(--arcade-white);
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 8px 10px;
  }

  .nav__links a.is-active {
    border-color: var(--arcade-pink);
    color: var(--arcade-pink);
  }

  .nav__links a.is-active::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .nav__brand img {
    width: min(180px, 46vw);
  }

  .nav__links a,
  .nav__links a:not(.nav__cta) {
    font-size: 9px;
    padding-inline: 9px;
  }
}

@media (max-width: 980px) {
  .community-page .forum-hero,
  .community-page .forum-layout {
    grid-template-columns: 1fr;
  }

  .community-page .forum-sidebar {
    position: static;
    top: auto;
  }

  .community-page .forum-hero__panel {
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .community-page .community-shell {
    max-width: 100%;
  }

  .community-page .community-leaderboard,
  .community-page .forum-sidebar,
  .community-page .forum-main {
    max-width: 100%;
    overflow: hidden;
  }

  .community-page .forum-hero__status {
    white-space: normal;
  }

  .community-page .forum-hero h1 {
    font-size: clamp(20px, 6.4vw, 26px);
    overflow-wrap: break-word;
  }

  .community-page .forum-category-list {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    margin: 0;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }

  .community-page .forum-category {
    grid-template-columns: 30px minmax(0, 1fr);
    min-width: 0;
    scroll-snap-align: none;
  }

  .community-page .forum-category strong,
  .community-page .forum-category span {
    overflow-wrap: anywhere;
  }

  .community-page .forum-card,
  .community-page .forum-form,
  .community-page .forum-topic,
  .community-page .forum-reply,
  .community-page .forum-preview-card,
  .community-page .forum-empty,
  .community-page .forum-loading {
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .community-page .forum-category-list {
    grid-template-columns: 1fr;
  }
}

/* The Last Signal key art fills both card layouts. */
.poster-card--tls img,
.directory-card__poster--tls img {
  object-fit: cover;
  object-position: center;
}

/* To The Moon key art fills both card layouts. */
.poster-card--tothemoon img,
.directory-card__poster--tothemoon img {
  object-fit: cover;
  object-position: center;
}

/* Echo Loop key art keeps its full title inside the fixed poster frame. */
.poster-card--echoloop img,
.directory-card__poster--echoloop img {
  object-fit: contain;
  object-position: center;
}

/* Echo Loop 3D key art keeps its full title inside the fixed poster frame. */
.poster-card--echoloop3d img,
.directory-card__poster--echoloop3d img {
  object-fit: contain;
  object-position: center;
}

/* The Optimizer key art keeps its full title inside the fixed poster frame. */
.poster-card--optimizer img,
.directory-card__poster--optimizer img {
  object-fit: contain;
  object-position: center;
}

/* Crescendo key art keeps its full title inside the fixed poster frame. */
.poster-card--crescendo img,
.directory-card__poster--crescendo img {
  object-fit: contain;
  object-position: center;
}

/* ===== Incident Commander agent protocol ===== */
.incident-page {
  max-width: 1820px;
  width: min(100%, 1820px);
}

.incident-stage {
  --incident-cyan: #2ee0ff;
  --incident-pink: #ff2e88;
  --incident-yellow: #ffd43b;
  --incident-green: #6bff7d;
  --incident-red: #ff5c5c;
  position: relative;
  align-items: stretch;
  border-color: rgba(46, 224, 255, 0.34);
  background:
    radial-gradient(circle at 18% 4%, rgba(46, 224, 255, 0.16), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(255, 46, 136, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(8, 12, 22, 0.98), rgba(2, 5, 10, 0.99));
  overflow: hidden;
}

.incident-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(46, 224, 255, 0.055) 58px 60px);
  opacity: 0.58;
  pointer-events: none;
}

.incident-hud,
.incident-console {
  position: relative;
  z-index: 1;
}

.incident-hud {
  display: grid;
  grid-template-columns: repeat(8, minmax(78px, 1fr));
  gap: 8px;
  width: 100%;
}

.incident-hud span {
  display: grid;
  gap: 4px;
  min-height: 54px;
  border: 1px solid rgba(113, 132, 156, 0.36);
  background: rgba(2, 5, 10, 0.72);
  padding: 8px 10px;
}

.incident-hud b {
  color: var(--incident-yellow);
  font-family: var(--arcade-font);
  font-size: 13px;
  line-height: 1;
}

.incident-hud em {
  color: #9fb4c6;
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.incident-console {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  gap: 12px;
  height: clamp(500px, calc(100dvh - 320px), 780px);
  min-height: 0;
}

.incident-map-panel,
.incident-protocol {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(113, 132, 156, 0.42);
  background: rgba(2, 5, 10, 0.72);
  overflow: hidden;
}

.incident-map-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.incident-protocol {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto minmax(118px, 0.34fr) auto minmax(112px, 0.34fr);
}

.incident-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  border-bottom: 1px solid rgba(113, 132, 156, 0.34);
  padding: 12px 14px;
}

.incident-panel-head b {
  display: block;
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}

.incident-panel-head span {
  display: block;
  color: #9fb4c6;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
  margin-top: 5px;
  text-transform: uppercase;
}

.incident-panel-head code {
  color: var(--incident-cyan);
  font: inherit;
  text-transform: none;
}

.incident-mini-btn {
  min-height: 32px;
  border: 1px solid rgba(46, 224, 255, 0.42);
  background: rgba(46, 224, 255, 0.08);
  color: var(--incident-cyan);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  padding: 8px 10px;
  text-transform: uppercase;
}

.incident-mini-btn:hover {
  border-color: var(--incident-yellow);
  color: var(--incident-yellow);
}

.incident-map {
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) minmax(132px, 0.34fr);
  min-height: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(46, 224, 255, 0.12), transparent 30%),
    radial-gradient(circle at 78% 22%, rgba(255, 46, 136, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(7, 14, 26, 0.92), rgba(2, 5, 10, 0.98));
}

.incident-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-bottom: 1px solid rgba(113, 132, 156, 0.34);
  padding: 10px;
}

.incident-service {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 72px;
  overflow: hidden;
  border: 1px solid rgba(46, 224, 255, 0.24);
  background: rgba(0, 0, 0, 0.26);
  color: var(--arcade-white);
  cursor: pointer;
  padding: 9px 10px 13px;
  text-align: left;
}

.incident-service span,
.incident-service b,
.incident-service em {
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
}

.incident-service span {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 12px;
  line-height: 1.1;
  text-transform: uppercase;
}

.incident-service b,
.incident-service em {
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.incident-service b {
  color: var(--incident-yellow);
}

.incident-service em {
  color: #9fb4c6;
}

.incident-service i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--incident-cyan), var(--incident-green));
  opacity: 0.84;
}

.incident-service--critical {
  border-color: rgba(255, 92, 92, 0.62);
  background: rgba(71, 12, 20, 0.42);
}

.incident-service--degraded,
.incident-service--noisy {
  border-color: rgba(255, 212, 59, 0.48);
}

.incident-service--patched,
.incident-service--recovered,
.incident-service--throttled {
  border-color: rgba(107, 255, 125, 0.42);
  background: rgba(8, 38, 24, 0.38);
}

.incident-network {
  position: relative;
  min-height: 280px;
  overflow: hidden;
}

.incident-link-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.incident-link {
  stroke: rgba(46, 224, 255, 0.26);
  stroke-width: 0.28;
  stroke-dasharray: 1.4 0.75;
  vector-effect: non-scaling-stroke;
}

.incident-link.is-active {
  stroke: rgba(255, 46, 136, 0.72);
  stroke-width: 0.48;
}

.incident-host {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 4px;
  width: clamp(92px, 10vw, 128px);
  min-height: 58px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(46, 224, 255, 0.58);
  border-radius: 4px;
  background: rgba(2, 5, 10, 0.88);
  color: var(--arcade-white);
  cursor: pointer;
  font-family: var(--font-mono);
  padding: 8px;
  text-align: left;
  box-shadow: 0 0 18px rgba(46, 224, 255, 0.12);
}

.incident-host b,
.incident-host span {
  overflow-wrap: anywhere;
}

.incident-host b {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 11px;
  line-height: 1;
}

.incident-host span {
  color: #9fb4c6;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.incident-host--suspect {
  border-color: rgba(255, 212, 59, 0.68);
}

.incident-host--compromised {
  border-color: rgba(255, 92, 92, 0.82);
  background: rgba(71, 12, 20, 0.82);
}

.incident-host--isolated {
  border-color: rgba(107, 255, 125, 0.74);
  background: rgba(8, 38, 24, 0.82);
}

.incident-host--false-lead {
  filter: saturate(0.7);
  opacity: 0.72;
}

.incident-evidence {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 8px;
  overflow-x: auto;
  border-top: 1px solid rgba(113, 132, 156, 0.34);
  padding: 10px;
}

.incident-evidence-card,
.incident-empty-evidence {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 106px;
  border: 1px solid rgba(255, 212, 59, 0.22);
  background: rgba(0, 0, 0, 0.24);
  padding: 10px;
}

.incident-evidence-card span,
.incident-empty-evidence b {
  color: var(--incident-yellow);
  font-family: var(--arcade-font);
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
}

.incident-evidence-card p,
.incident-empty-evidence span {
  color: #d9e6ef;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}

.incident-evidence-card b {
  align-self: end;
  color: var(--incident-green);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.incident-observation,
.incident-log,
#icCommands {
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.32);
  color: #dcecff;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.42;
  margin: 0;
  overflow: auto;
  padding: 12px 14px;
  white-space: pre-wrap;
}

.incident-observation {
  color: #b8ffde;
}

.incident-command-label {
  align-items: center;
  display: flex;
  min-height: 34px;
  border-top: 1px solid rgba(113, 132, 156, 0.34);
  border-bottom: 1px solid rgba(113, 132, 156, 0.34);
  color: var(--incident-yellow);
  font-family: var(--arcade-font);
  font-size: 10px;
  padding: 0 14px;
  text-transform: uppercase;
}

#icCommands {
  color: var(--arcade-white);
  resize: vertical;
  outline: none;
}

#icCommands:focus {
  box-shadow: inset 0 0 0 2px rgba(46, 224, 255, 0.42);
}

.incident-command-row {
  align-items: stretch;
  border-top: 1px solid rgba(113, 132, 156, 0.34);
  border-bottom: 1px solid rgba(113, 132, 156, 0.34);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 64px;
  padding: 10px 12px;
}

.incident-command-row .arcade-btn,
.incident-command-row .incident-mini-btn {
  justify-content: center;
  min-height: 40px;
  min-width: 0;
  padding: 0 12px;
  width: 100%;
}

.incident-log {
  color: #f2d18d;
}

.incident-api-card {
  display: grid;
  gap: 8px;
}

.incident-api-card code {
  display: block;
  overflow: auto;
  border: 1px solid rgba(46, 224, 255, 0.26);
  background: rgba(0, 0, 0, 0.24);
  color: #b8ffde;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  padding: 8px;
  white-space: pre;
}

@media (max-width: 1260px) {
  .incident-console {
    grid-template-columns: 1fr;
    height: auto;
  }

  .incident-map-panel {
    min-height: 720px;
  }

  .incident-protocol {
    height: 700px;
  }
}

@media (max-width: 760px) {
  .incident-hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .incident-map-panel {
    min-height: 0;
  }

  .incident-map {
    grid-template-rows: auto minmax(360px, 44dvh) minmax(132px, auto);
  }

  .incident-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .incident-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .incident-protocol .incident-panel-head {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .incident-protocol .incident-panel-head > div {
    flex: 1 1 220px;
  }

  .incident-protocol {
    height: 730px;
    grid-template-rows: auto minmax(220px, 1fr) auto minmax(132px, 0.38fr) auto minmax(118px, 0.4fr);
  }

  .incident-host {
    width: 92px;
    min-height: 54px;
  }
}

@media (max-width: 480px) {
  .incident-hud b {
    font-size: 12px;
  }

  .incident-services {
    grid-template-columns: 1fr;
  }

  .incident-host {
    width: 84px;
    min-height: 50px;
    padding: 6px;
  }

  .incident-host b {
    font-size: 9px;
  }

  .incident-host span {
    font-size: 8px;
  }

  .incident-command-row {
    grid-template-columns: 1fr;
  }

  .incident-command-row .arcade-btn,
  .incident-command-row .incident-mini-btn {
    width: 100%;
  }
}

/* Final cascade: keep the site-wide UX pass above legacy responsive rules. */
.home-page .arcade-shell { display: flex; flex-direction: column; }
.home-page .portal-hero { order: 1; }
.home-page .home-discovery { order: 2; }
.home-page .home-recent-panel { order: 3; }
.home-page .latest-release-panel { order: 4; }
.home-page .featured-panel { order: 5; }
.home-page .home-progress-panel { order: 6; }
.home-page .home-media-panel { order: 7; }
.home-page .home-community-panel { order: 8; }
.home-page .agent-games-panel { order: 9; }
.home-page .arcade-row { order: 10; }
.home-page .pro-strip { order: 11; }
.home-page .featured-panel .poster-card:nth-child(n + 7) { display: none; }

/* Signed-out first visit has no recent games, so the panel rendered a "No
   recent games yet" empty state whose Sign in CTA duplicates the nav Profile
   button. Hide the whole panel when empty (main.js toggles .is-empty) so Latest
   Release leads the page; it reappears once a run is recorded. The flex column
   reflows with no gap. The progress panel already sits at order 6 (after
   Featured, order 5), so no demotion is needed there. */
.home-page .home-recent-panel.is-empty { display: none; }

.home-discovery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.home-discovery__item {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 92px;
  overflow: hidden;
  border: 1px solid rgba(113, 132, 156, 0.42);
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(35, 223, 242, 0.08), transparent 52%),
    rgba(4, 7, 13, 0.9);
  color: var(--arcade-white);
  padding: 15px 16px;
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.home-discovery__item::after {
  content: ">";
  position: absolute;
  right: 14px;
  top: 50%;
  color: var(--arcade-yellow);
  font: 900 15px var(--arcade-font);
  transform: translateY(-50%);
}

.home-discovery__item:hover,
.home-discovery__item:focus-visible {
  border-color: var(--arcade-cyan);
  background:
    linear-gradient(135deg, rgba(35, 223, 242, 0.15), transparent 58%),
    rgba(5, 9, 17, 0.98);
  text-decoration: none;
  transform: translateY(-2px);
}

.home-discovery__item small,
.home-discovery__item span {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.home-discovery__item small { color: #8ca0b5; }
.home-discovery__item span { color: var(--arcade-cyan); }
.home-discovery__item strong {
  max-width: calc(100% - 26px);
  font-family: var(--arcade-font);
  font-size: clamp(13px, 1.35vw, 17px);
  line-height: 1.05;
  text-transform: uppercase;
}
.home-discovery__item--multi span { color: var(--arcade-yellow); }
.home-discovery__item--agent span { color: #8bffde; }
.home-discovery__item--dark span { color: #ff708f; }

.home-page .home-progress-panel,
.home-page .home-community-panel,
.home-page .home-media-panel,
.home-page .agent-games-panel {
  border-color: rgba(113, 132, 156, 0.34);
  background: rgba(4, 7, 13, 0.82);
  box-shadow: none;
}

.home-page .arcade-panel__header {
  min-height: 44px;
}

.slopwire-card__body > span,
.agent-feature-card__body > span,
.home-community-row p {
  font-family: var(--font-body);
  line-height: 1.48;
  text-transform: none;
}

.nav__drawer-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 4px;
}

.nav__drawer-actions a {
  border-color: rgba(35, 223, 242, 0.38);
  color: var(--arcade-cyan);
  text-align: center;
}

.games-filterbar__field--search { flex: 1.35 1 260px; }

.games-filterbar input[type="search"] {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(113, 132, 156, 0.68);
  border-radius: 4px;
  background: #05070d;
  color: var(--arcade-white);
  font: 700 13px var(--font-body);
  padding: 0 13px;
}

.games-filterbar input[type="search"]::placeholder { color: #71869a; }
.games-filterbar input[type="search"]:focus-visible {
  border-color: var(--arcade-cyan);
  outline: 2px solid rgba(35, 223, 242, 0.3);
  outline-offset: 2px;
}

.directory-card {
  grid-template-rows: auto minmax(98px, auto) 34px;
  min-height: 0;
}

.directory-card__body {
  align-content: start;
  display: grid;
  gap: 9px;
}

.directory-card__title {
  color: var(--arcade-white);
  display: block;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.15;
}

.directory-card__body p {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.48;
  text-transform: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (max-width: 920px) {
  .nav { min-height: 0; padding: 6px 10px; }
  #nav-slot {
    column-gap: 8px;
    display: grid;
    grid-template-areas:
      "brand cluster menu"
      "drawer drawer drawer";
    grid-template-columns: minmax(104px, 1fr) auto 42px;
    row-gap: 0;
  }
  .nav__brand { grid-area: brand; height: 54px; padding: 0; }
  .nav__brand img { width: min(174px, 42vw); }
  .nav__links { display: none; }
  .nav__cluster { grid-area: cluster; }
  .nav__menu-toggle { display: inline-flex; grid-area: menu; margin: 0; }
  .nav__drawer { grid-area: drawer; margin-inline: -10px; }

  .games-modebar {
    display: flex;
    gap: 8px;
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .games-modebar::-webkit-scrollbar { display: none; }
  .games-modebar button { flex: 0 0 auto; min-height: 42px; padding: 9px 34px 9px 12px; }
  .games-modebar button::after {
    right: 11px;
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 9px;
  }
  .games-modebar b { font-size: 13px; }
  .games-modebar span { display: none; }
  .games-section__header { padding: 13px 14px; }
  .games-section h3 { font-size: 24px; }
  .games-section__header p { display: none; }
}

@media (min-width: 980px) {
  .home-page .poster-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .nav__actions .nav__cta--pro,
  .nav__pro-state { display: none; }
  .nav__cta--login {
    max-width: 78px;
    min-width: 62px;
    overflow: hidden;
    padding-inline: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .portal-hero { padding: 18px 18px 20px; }
  .portal-hero__media { margin-inline: -18px; width: calc(100% + 36px); }
  .portal-hero__media img { max-height: 190px; }
  .home-discovery {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }
  .home-discovery::-webkit-scrollbar { display: none; }
  .home-discovery__item {
    flex: 0 0 156px;
    min-height: 82px;
    padding: 13px 14px;
  }
  .home-discovery__item strong { font-size: 13px; }
  .home-page .featured-panel .poster-card:nth-child(n + 5) { display: none; }
  .home-recent-panel.is-empty .home-recent-empty { gap: 10px; padding: 14px; }
  .home-recent-panel.is-empty .home-recent-empty em { display: none; }
  .home-recent-grid { gap: 8px; }
  .home-recent-card,
  .home-recent-card--primary {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: minmax(76px, auto) 32px;
    min-height: 108px;
  }
  .home-recent-card__poster {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .home-recent-card__poster em {
    font-size: 7px;
    left: 7px;
    padding: 4px 5px;
    top: 7px;
  }
  .home-recent-card__body {
    gap: 5px;
    padding: 10px 10px 7px;
  }
  .home-recent-card__body small { font-size: 8px; }
  .home-recent-card__body strong,
  .home-recent-card--primary .home-recent-card__body strong { font-size: 13px; }
  .home-recent-card__body span { display: none; }
  .home-recent-card__play {
    grid-column: 2;
    grid-row: 2;
    font-size: 8px;
    padding-inline: 10px;
  }
  .games-hero { padding: 20px 18px; }
  .games-hero h1 { font-size: clamp(31px, 11vw, 42px); }
  .games-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .games-hero__stats span {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    min-height: 58px;
    padding: 9px;
  }
  .games-filterbar {
    display: grid;
    flex-direction: initial;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .games-filterbar__field--search,
  .games-filterbar__favorites,
  .games-filterbar__reset { grid-column: 1 / -1; }
  .directory-card__body { padding: 13px 14px 12px; }
  .directory-card__title { font-size: 18px; }
  .directory-card__body p { -webkit-line-clamp: 2; }
}

@media (min-width: 641px) {
  .home-recent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Artwork-first game directory: details appear only when a card is explored. */
.directory-card-shell {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  isolation: isolate;
}

.directory-card {
  aspect-ratio: 16 / 9;
  display: block;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  transform-origin: center;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  width: 100%;
  height: 100%;
}

.directory-card:hover,
.directory-card:focus-visible {
  z-index: 5;
  transform: scale(1.045);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.58), 0 0 26px rgba(255, 20, 144, 0.3);
}

.directory-card__poster {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border: 0;
}

.directory-card__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center;
}

.directory-card__poster-title,
.directory-card__status,
.directory-card__meta,
.directory-card__play {
  display: none;
}

.directory-card__body {
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  display: block;
  padding: 42px 15px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(2, 5, 10, 0.9) 38%, rgba(2, 5, 10, 0.98) 100%);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.directory-card:hover .directory-card__body,
.directory-card:focus-visible .directory-card__body,
.directory-card:focus-within .directory-card__body {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  background: linear-gradient(180deg, rgba(2, 5, 10, 0.3) 0%, rgba(2, 5, 10, 0.9) 42%, rgba(2, 5, 10, 0.99) 100%);
  opacity: 1;
  transform: translateY(0);
}

.directory-card__body p {
  display: -webkit-box;
  overflow: hidden;
  color: #f3f7fb;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 2px 8px #000;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: max-height 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.directory-card__title {
  color: var(--arcade-white);
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--arcade-font);
  font-size: clamp(16px, 1.65vw, 24px);
  line-height: 1.12;
  text-shadow: 3px 0 0 rgba(255, 20, 144, 0.48), -2px 0 0 rgba(35, 223, 242, 0.4), 0 3px 8px #000;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.directory-card__badges {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 160ms ease, margin 160ms ease, opacity 160ms ease;
}

.directory-card__category {
  display: inline-flex;
  border: 1px solid rgba(35, 223, 242, 0.72);
  background: rgba(3, 8, 14, 0.86);
  color: var(--arcade-cyan);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.55px;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
}

.directory-card__category--multiplayer {
  border-color: rgba(247, 217, 36, 0.78);
  color: var(--arcade-yellow);
}

.directory-card__activity {
  position: absolute;
  top: 14px;
  right: 62px;
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.directory-card__playtime {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(3, 6, 11, 0.92);
  color: #eaf2fb;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  padding: 7px 8px;
  white-space: nowrap;
}

.directory-card-shell > .directory-card__favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(3, 6, 11, 0.84);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.directory-card-shell > .directory-card__favorite:hover,
.directory-card-shell > .directory-card__favorite:focus-visible,
.directory-card-shell > .directory-card__favorite.is-favorite {
  border-color: var(--arcade-pink);
  background: rgba(39, 5, 24, 0.94);
  color: #ff7dbc;
  outline: none;
}

.directory-card-shell > .directory-card__favorite:hover {
  transform: scale(1.08);
}

.directory-card-shell > .directory-card__favorite:focus-visible {
  outline: 2px solid var(--arcade-cyan);
  outline-offset: 2px;
}

.directory-card-shell > .directory-card__favorite.is-favorite {
  box-shadow: 0 0 0 1px rgba(255, 20, 144, 0.26), 0 0 24px rgba(255, 20, 144, 0.38);
}

.directory-card:hover .directory-card__badges,
.directory-card:focus-visible .directory-card__badges,
.directory-card:focus-within .directory-card__badges {
  max-height: 28px;
  margin-top: 7px;
  opacity: 1;
}

.directory-card:hover .directory-card__activity,
.directory-card:focus-visible .directory-card__activity,
.directory-card:focus-within .directory-card__activity {
  opacity: 1;
  transform: translateY(0);
}

.directory-card:hover .directory-card__body p,
.directory-card:focus-visible .directory-card__body p,
.directory-card:focus-within .directory-card__body p {
  display: block;
  max-height: none;
  margin-top: 10px;
  opacity: 1;
  overflow: visible;
  transform: translateY(0);
  -webkit-line-clamp: unset;
}

@media (hover: none), (pointer: coarse) {
  .directory-card:hover {
    transform: none;
  }

  .directory-card:hover .directory-card__body {
    inset: auto 0 0;
    display: block;
    padding: 42px 15px 14px;
    background: linear-gradient(180deg, transparent 0%, rgba(2, 5, 10, 0.9) 38%, rgba(2, 5, 10, 0.98) 100%);
    opacity: 1;
    transform: translateY(0);
  }

  .directory-card:hover .directory-card__body p {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transform: translateY(8px);
  }

  .directory-card:hover .directory-card__badges,
  .directory-card:hover .directory-card__activity {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .directory-card,
  .directory-card__body {
    transition: none;
  }
}

/* ===== Trust, readability, and accessibility pass ===== */
body.arcade-home :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--arcade-yellow);
  outline-offset: 3px;
}

.media-hero p {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.site-footer__status {
  color: var(--arcade-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-align: right;
  text-transform: uppercase;
}

.home-page .pro-strip {
  grid-template-columns: minmax(320px, 1.25fr) minmax(250px, 0.9fr) minmax(230px, 0.72fr) minmax(180px, 0.55fr);
}

.pro-preview {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 8px;
  margin: 10px 6px;
  border: 1px solid rgba(35, 223, 242, 0.52);
  background: rgba(1, 8, 14, 0.72);
  padding: 14px 16px;
}

.pro-preview small {
  color: var(--arcade-cyan);
  font-family: var(--arcade-font);
  font-size: 8px;
  text-transform: uppercase;
}

.pro-preview strong {
  color: var(--arcade-white);
  font-family: var(--arcade-font);
  font-size: 16px;
  line-height: 1.2;
  text-transform: uppercase;
}

.pro-preview p {
  color: var(--arcade-muted);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 920px) {
  .home-page .pro-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pro-preview {
    margin: 8px;
  }

  .site-footer__status {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .home-page .pro-strip {
    grid-template-columns: 1fr;
  }

  .site-footer__links a {
    align-items: center;
    display: inline-flex;
    min-height: 36px;
  }

  .site-footer__status {
    line-height: 1.4;
    padding-bottom: 8px;
  }
}


/* ---------------------------------------------------------------
   Inkblood — the cover is a 3:2 manga plate, so it needs a cover
   crop to sit in the shared 16:9 card frame without letterboxing.
   No saturation lift here: the art is deliberately monochrome apart
   from the blood, and warming it would break that.
   --------------------------------------------------------------- */
.poster-card--inkblood img,
.directory-card__poster--inkblood img {
  object-fit: cover;
  object-position: center 42%;
  filter: contrast(1.04);
}

/* ---------------------------------------------------------------
   Quiet Quitting card art.
   --------------------------------------------------------------- */
.poster-card--pacman img,
.directory-card__poster--pacman img {
  object-fit: cover;
  object-position: center center;
}

/* ---------------------------------------------------------------
   SAINTFALL card art. The poster is a 3:2 frame grabbed from the
   game itself, so it needs a modest downward bias to keep the road
   and the fallen head off the crop line in the shared 16:9 card.
   A small warmth lift, because the card sits beside neon-bright
   parody art and a desert at golden hour reads cool by comparison.
   --------------------------------------------------------------- */
.poster-card--saintfall img,
.directory-card__poster--saintfall img {
  object-fit: cover;
  object-position: center 58%;
  filter: saturate(1.06) contrast(1.03);
}

/* ===============================================================
   NETWORK POLISH LAYER — premium discovery, feedback, and motion.
   Shared on every route so the arcade feels like one product.
   =============================================================== */

html {
  scrollbar-color: rgba(35, 223, 242, 0.72) #05070d;
  scrollbar-width: thin;
}

body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 20, 144, 0.08), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(35, 223, 242, 0.07), transparent 30%);
  pointer-events: none;
}

.rb-scroll-progress {
  position: fixed;
  z-index: 10020;
  inset: 0 0 auto;
  height: 3px;
  background: rgba(5, 7, 13, 0.55);
  pointer-events: none;
}

.rb-scroll-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--arcade-cyan), var(--arcade-yellow) 55%, var(--arcade-pink));
  box-shadow: 0 0 14px rgba(35, 223, 242, 0.68);
  transform: scaleX(var(--rb-scroll, 0));
  transform-origin: left center;
}

.rb-back-to-top {
  position: fixed;
  z-index: 90;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(35, 223, 242, 0.68);
  border-radius: 8px;
  background: rgba(3, 7, 13, 0.9);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46), 0 0 20px rgba(35, 223, 242, 0.16);
  color: var(--arcade-cyan);
  cursor: pointer;
  font: 900 22px/1 var(--arcade-font);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.rb-back-to-top[hidden] { display: none; }
.rb-back-to-top:hover,
.rb-back-to-top:focus-visible {
  border-color: var(--arcade-yellow);
  color: var(--arcade-yellow);
  transform: translateY(-3px);
}

.nav__search-toggle,
.nav__menu-toggle,
.nav__cta {
  min-width: 44px;
  min-height: 44px;
}

.nav__links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.nav__cta--chaos {
  align-items: center;
  display: inline-flex;
  gap: 7px;
  justify-content: center;
  border-color: rgba(255, 20, 144, 0.68);
  background: linear-gradient(135deg, rgba(255, 20, 144, 0.16), rgba(5, 7, 13, 0.94));
  color: #ff89c4;
  cursor: pointer;
}

.nav__cta--chaos > span:first-child {
  color: var(--arcade-yellow);
  font-size: 17px;
  line-height: 0;
}

.nav__cta--chaos:hover,
.nav__cta--chaos:focus-visible {
  border-color: var(--arcade-yellow);
  background: rgba(247, 217, 36, 0.12);
  color: var(--arcade-yellow);
}

.nav__drawer-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nav__drawer-actions button {
  min-height: 44px;
  border: 1px solid rgba(255, 20, 144, 0.48);
  border-radius: 4px;
  background: rgba(255, 20, 144, 0.08);
  color: #ff89c4;
  cursor: pointer;
  font: 900 10px/1.2 var(--font-mono);
  text-transform: uppercase;
}

body.arcade-home .arcade-panel {
  border-color: rgba(119, 147, 177, 0.38);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 14px 36px rgba(0, 0, 0, 0.18);
}

body.arcade-home .arcade-panel__header {
  background: linear-gradient(90deg, rgba(35, 223, 242, 0.035), transparent 48%, rgba(255, 20, 144, 0.03));
}

.games-modebar {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  scrollbar-color: rgba(247, 217, 36, 0.72) rgba(5, 7, 13, 0.88);
  scrollbar-width: thin;
}

.games-modebar button {
  min-height: 54px;
  padding-right: 50px;
}

.games-modebar__count {
  position: absolute;
  top: 8px;
  right: 10px;
  display: grid;
  min-width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid rgba(247, 217, 36, 0.54);
  border-radius: 999px;
  background: rgba(247, 217, 36, 0.08);
  color: var(--arcade-yellow);
  font: 900 9px/1 var(--font-mono);
  font-style: normal;
}

.games-modebar button::after { right: 15px; top: auto; bottom: 9px; transform: none; }

.games-section--filter-view .games-section__header {
  background:
    linear-gradient(115deg, rgba(247, 217, 36, 0.1), transparent 48%),
    linear-gradient(24deg, transparent 58%, rgba(255, 20, 144, 0.1));
}

.directory-card-shell {
  border-radius: 6px;
}

.directory-card {
  border-radius: inherit;
}

.directory-card__poster::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%, transparent 70%, rgba(0, 0, 0, 0.2)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 4px);
  opacity: 0.5;
}

.directory-card-shell > .directory-card__favorite {
  width: 44px;
  height: 44px;
}

.rb-game-hub__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rb-game-hub__panel {
  min-height: 100%;
}

.rb-game-hub__actions button {
  min-height: 44px;
  padding-inline: 14px;
}

.rb-game-hub__facts {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.rb-game-hub__facts > div {
  min-width: 0;
  border: 1px solid rgba(151, 171, 194, 0.18);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  padding: 9px 10px;
}

.rb-game-hub__facts dt {
  color: var(--arcade-cyan);
  font: 900 8px/1.25 var(--font-mono);
  text-transform: uppercase;
}

.rb-game-hub__facts dd {
  overflow: hidden;
  margin: 5px 0 0;
  color: var(--arcade-white);
  font: 800 11px/1.35 var(--font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-game-hub__vibe {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  border-top: 1px solid rgba(151, 171, 194, 0.16);
  padding-top: 10px;
}

.rb-game-hub__vibe > span {
  display: grid;
  gap: 3px;
}

.rb-game-hub__vibe small {
  color: var(--arcade-yellow);
  font: 900 9px/1 var(--font-mono);
  text-transform: uppercase;
}

.rb-game-hub__vibe em {
  color: var(--arcade-muted);
  font: 700 9px/1.3 var(--font-mono);
  font-style: normal;
}

.rb-game-hub__vibe > div {
  display: flex;
  gap: 6px;
}

.rb-game-hub__vibe button {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  min-height: 44px;
  border: 1px solid rgba(151, 171, 194, 0.28);
  border-radius: 4px;
  background: rgba(5, 7, 13, 0.82);
  color: var(--arcade-muted);
  cursor: pointer;
  padding: 7px 9px;
}

.rb-game-hub__vibe button span { font-size: 17px; }
.rb-game-hub__vibe button b {
  font: 900 8px/1 var(--font-mono);
  text-transform: uppercase;
}

.rb-game-hub__vibe button:hover,
.rb-game-hub__vibe button:focus-visible,
.rb-game-hub__vibe button.is-active {
  border-color: var(--arcade-yellow);
  background: rgba(247, 217, 36, 0.1);
  color: var(--arcade-yellow);
  outline: none;
}

.site-footer__links a,
.site-footer__social a,
.site-footer__status {
  min-height: 40px;
}

@media (min-width: 1180px) {
  .games-section__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1540px) {
  .games-section__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .rb-game-hub__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 920px) {
  .nav__menu-toggle,
  .nav__search-toggle {
    width: 44px;
    min-width: 44px;
  }

  .nav__cta,
  .nav__search-toggle,
  .nav__menu-toggle,
  .nav__drawer a,
  .nav__drawer button,
  .games-modebar button,
  .games-filterbar button,
  .games-filterbar select,
  .games-filterbar input {
    min-height: 44px;
  }

  .games-modebar {
    scrollbar-width: auto;
    padding-bottom: 13px;
  }

  .games-modebar::-webkit-scrollbar { display: block; height: 4px; }
  .games-modebar::-webkit-scrollbar-track { background: rgba(5, 7, 13, 0.86); }
  .games-modebar::-webkit-scrollbar-thumb { background: var(--arcade-yellow); }
}

@media (max-width: 640px) {
  .nav__cta--login { min-width: 70px; min-height: 44px; }
  .nav__cta--chaos { width: 44px; min-width: 44px; padding: 0; }
  .nav__cta--chaos > span:last-child { display: none; }
  .nav__drawer-actions { grid-template-columns: 1fr; }

  .games-section__grid {
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .directory-card__body { padding: 32px 10px 9px; }
  .directory-card__title { font-size: clamp(11px, 3.4vw, 14px); text-shadow: 2px 0 rgba(255, 20, 144, 0.5); }
  .directory-card-shell > .directory-card__favorite { top: 6px; right: 6px; width: 44px; height: 44px; }

  .home-page .poster-grid,
  .home-page .slopwire-grid,
  .home-page .home-community-grid,
  .home-page .agent-games-grid {
    display: flex;
    gap: 10px;
    margin-inline: -1px;
    overflow-x: auto;
    padding: 1px 1px 13px;
    scroll-padding-inline: 1px;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--arcade-cyan) rgba(5, 7, 13, 0.86);
    scrollbar-width: thin;
  }

  .home-page .poster-grid > *,
  .home-page .slopwire-grid > *,
  .home-page .home-community-grid > *,
  .home-page .agent-games-grid > * {
    flex: 0 0 min(82vw, 330px);
    scroll-snap-align: start;
  }

  .home-page .featured-panel .poster-card:nth-child(n + 5) { display: grid; }

  .rb-game-hub__facts { grid-template-columns: minmax(0, 1fr); }
  .rb-game-hub__vibe { align-items: stretch; flex-direction: column; }
  .rb-game-hub__vibe > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rb-game-hub__vibe button { justify-content: center; padding-inline: 6px; }
  .rb-back-to-top { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-scroll-progress i,
  .rb-back-to-top { transition: none !important; }
}

/* Secondary pages get the same deliberate finish as the arcade. */
.network-now,
.community-onramp {
  overflow: hidden;
}

.network-now__grid,
.community-onramp__grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px;
}

.network-now__card,
.community-onramp__grid > a {
  position: relative;
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 210px;
  overflow: hidden;
  border: 1px solid rgba(151, 171, 194, 0.28);
  border-radius: 6px;
  background:
    linear-gradient(155deg, rgba(35, 223, 242, 0.12), transparent 48%),
    rgba(3, 7, 13, 0.92);
  color: inherit;
  padding: clamp(18px, 2vw, 24px);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.network-now__card::before,
.community-onramp__grid > a::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(35, 223, 242, 0.045) 0 1px, transparent 1px 16px),
    linear-gradient(135deg, transparent 60%, rgba(255, 20, 144, 0.12));
  pointer-events: none;
}

.network-now__card > *,
.community-onramp__grid > a > * { position: relative; }

.network-now__card:hover,
.network-now__card:focus-visible,
.community-onramp__grid > a:hover,
.community-onramp__grid > a:focus-visible {
  border-color: var(--arcade-cyan);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35), 0 0 26px rgba(35, 223, 242, 0.12);
  outline: none;
  text-decoration: none;
  transform: translateY(-4px);
}

.network-now__card--read,
.community-onramp__grid > a:nth-child(2) {
  background:
    linear-gradient(155deg, rgba(247, 217, 36, 0.12), transparent 48%),
    rgba(3, 7, 13, 0.92);
}

.network-now__card--pitch,
.community-onramp__grid > a:nth-child(3) {
  background:
    linear-gradient(155deg, rgba(255, 20, 144, 0.14), transparent 48%),
    rgba(3, 7, 13, 0.92);
}

.network-now__card > span,
.community-onramp__grid small {
  color: var(--arcade-cyan);
  font: 900 9px/1.2 var(--font-mono);
  text-transform: uppercase;
}

.network-now__card strong,
.community-onramp__grid strong {
  color: var(--arcade-white);
  font: 900 clamp(17px, 2vw, 24px)/1.18 var(--arcade-font);
  text-transform: uppercase;
}

.network-now__card p,
.community-onramp__grid span {
  color: #b8c5d4;
  font: 600 13px/1.55 var(--font-body);
  margin: 0;
}

.network-now__card b,
.community-onramp__grid b {
  color: var(--arcade-yellow);
  font: 900 10px/1.2 var(--font-mono);
  text-transform: uppercase;
}

.legal-page .legal {
  position: relative;
  max-width: 900px;
  overflow: hidden;
  margin: clamp(18px, 4vw, 48px) auto;
  border: 1px solid rgba(151, 171, 194, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(35, 223, 242, 0.08), transparent 30%),
    linear-gradient(25deg, transparent 72%, rgba(255, 20, 144, 0.08)),
    rgba(5, 7, 13, 0.9);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
  padding: clamp(24px, 5vw, 64px);
}

.legal-page .legal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(35, 223, 242, 0.035) 0 1px, transparent 1px 22px);
  pointer-events: none;
}

.legal-page .legal > * { position: relative; }

.legal__eyebrow {
  color: var(--arcade-cyan);
  font: 900 10px/1.2 var(--font-mono);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.legal-page .legal h1 {
  max-width: 720px;
  margin: 12px 0 10px;
  color: var(--arcade-white);
  font: 900 clamp(34px, 7vw, 68px)/0.98 var(--arcade-font);
  text-shadow: 4px 0 rgba(255, 20, 144, 0.36), -2px 0 rgba(35, 223, 242, 0.34);
  text-transform: uppercase;
}

.legal-page .legal h2 {
  margin: 36px 0 10px;
  border-top: 1px solid rgba(151, 171, 194, 0.2);
  color: var(--arcade-yellow);
  font: 900 clamp(16px, 2.5vw, 22px)/1.2 var(--arcade-font);
  padding-top: 22px;
  text-transform: uppercase;
}

.legal-page .legal p,
.legal-page .legal li {
  color: #c2cedb;
  font: 500 15px/1.75 var(--font-body);
}

.legal-page .legal strong { color: var(--arcade-white); }
.legal-page .legal code {
  border: 1px solid rgba(35, 223, 242, 0.24);
  border-radius: 3px;
  background: rgba(35, 223, 242, 0.06);
  color: var(--arcade-cyan);
  padding: 2px 5px;
}

.legal__updated { color: var(--arcade-muted) !important; font-family: var(--font-mono) !important; font-size: 11px !important; text-transform: uppercase; }

@media (max-width: 760px) {
  .network-now__grid,
  .community-onramp__grid {
    display: flex;
    overflow-x: auto;
    padding-bottom: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--arcade-cyan) rgba(5, 7, 13, 0.86);
  }

  .network-now__card,
  .community-onramp__grid > a {
    flex: 0 0 min(82vw, 330px);
    min-height: 190px;
    scroll-snap-align: start;
  }

  .legal-page .legal { margin-inline: 10px; padding: 26px 20px; }
}

.error-page {
  min-height: 100vh;
}

.error-shell {
  display: grid;
  min-height: calc(100vh - 190px);
  padding: clamp(18px, 5vw, 64px);
  place-items: center;
}

.error-card {
  position: relative;
  display: grid;
  width: min(980px, 100%);
  min-height: min(590px, 70vh);
  align-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 42%, rgba(35, 223, 242, 0.15), transparent 28%),
    linear-gradient(135deg, rgba(255, 20, 144, 0.18), transparent 44%),
    #05070d;
  padding: clamp(28px, 7vw, 82px);
}

.error-card::after {
  content: "404";
  position: absolute;
  right: -0.05em;
  bottom: -0.22em;
  color: rgba(255, 255, 255, 0.035);
  font: 900 clamp(180px, 34vw, 420px)/1 var(--arcade-font);
  pointer-events: none;
}

.error-card > * { position: relative; z-index: 1; }
.error-card__code { color: var(--arcade-cyan); font: 900 10px/1.2 var(--font-mono); text-transform: uppercase; }
.error-card h1 { max-width: 760px; margin: 14px 0; color: var(--arcade-white); font: 900 clamp(44px, 9vw, 96px)/0.92 var(--arcade-font); text-shadow: 5px 0 rgba(255, 20, 144, 0.42), -3px 0 rgba(35, 223, 242, 0.4); text-transform: uppercase; }
.error-card p { max-width: 650px; color: #c2cedb; font: 600 clamp(15px, 2vw, 19px)/1.6 var(--font-body); }
.error-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.error-card__signal { align-items: center; display: flex; gap: 8px; margin-top: 34px; color: var(--arcade-yellow); font: 900 9px/1 var(--font-mono); }
.error-card__signal i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--arcade-pink); box-shadow: 0 0 12px var(--arcade-pink); }
.error-card__signal i:nth-child(3) { opacity: 0.55; }
.error-card__signal i:nth-child(4) { opacity: 0.2; }