/* ========== GETABOUTIT shared core ========== */
:root {
  --c-pink: #ff006e;
  --c-magenta: #d100d1;
  --c-purple: #8338ec;
  --c-deeppurple: #3a0ca3;
  --c-blue: #4361ee;
  --c-cyan: #00f5ff;
  --c-teal: #06ffa5;
  --c-yellow: #ffd60a;
  --c-orange: #ff9500;
  --c-red: #ef233c;
  --c-bg: #0a0a1e;
  --c-bg-deep: #05050f;
  --font-arcade: 'Press Start 2P', 'Courier New', monospace;
  --font-body: ui-monospace, 'SFMono-Regular', Menlo, Consolas,
               'Liberation Mono', 'DejaVu Sans Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--c-bg);
  color: #fff;
  font-family: var(--font-arcade);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
/* Game-page lockdown: fixed viewport, no scroll, contained overscroll.
   Pages without body.game (home, /stats, /settings) scroll normally. */
html:has(body.game), body.game {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: manipulation;
}
/* Fallback for browsers without :has() — game pages opt-in via body class */
body.game { overflow: hidden; overscroll-behavior: contain; touch-action: manipulation; }
/* Allow text selection where it matters (search input, type race input) */
input, textarea { -webkit-user-select: text; user-select: text; touch-action: auto; }
button, input, textarea { font-family: inherit; }
button { cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ========== CRT atmosphere ========== */
#scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}
#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 91;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 100%);
}

/* ========== chromatic aberration ========== */
.chrom {
  display: inline-block;
  color: #fff;
  text-shadow:
    2px 0 0 var(--c-pink),
    -2px 0 0 var(--c-cyan),
    0 0 6px rgba(255,255,255,0.25);
}
/* 8s loop: four 0.5Hz "breaths" (very subtle ±0.3 → ±0.8px) plus one
   brief 200ms "pulse" near the end where the wordmark intensifies and
   immediately settles. Calmer than the prior 3.3s stepwise jitter. */
.chrom-jitter { animation: chromBreathe 8s ease-in-out infinite; }
@keyframes chromBreathe {
  /* breathing — gentle ±0.3px ↔ ±0.8px, 0.5Hz (one full cycle per 2s) */
  0%     { text-shadow: 0.3px 0 0 var(--c-pink), -0.3px 0 0 var(--c-cyan), 0 0 6px rgba(255,255,255,0.22); }
  12.5%  { text-shadow: 0.8px 0 0 var(--c-pink), -0.8px 0 0 var(--c-cyan), 0 0 6px rgba(255,255,255,0.25); }
  25%    { text-shadow: 0.3px 0 0 var(--c-pink), -0.3px 0 0 var(--c-cyan), 0 0 6px rgba(255,255,255,0.22); }
  37.5%  { text-shadow: 0.8px 0 0 var(--c-pink), -0.8px 0 0 var(--c-cyan), 0 0 6px rgba(255,255,255,0.25); }
  50%    { text-shadow: 0.3px 0 0 var(--c-pink), -0.3px 0 0 var(--c-cyan), 0 0 6px rgba(255,255,255,0.22); }
  62.5%  { text-shadow: 0.8px 0 0 var(--c-pink), -0.8px 0 0 var(--c-cyan), 0 0 6px rgba(255,255,255,0.25); }
  75%    { text-shadow: 0.3px 0 0 var(--c-pink), -0.3px 0 0 var(--c-cyan), 0 0 6px rgba(255,255,255,0.22); }
  /* pulse — 200ms (≈2.5% of 8s): briefly intensify then settle */
  85%    { text-shadow: 3px   0 0 var(--c-pink),   -3px 0 0 var(--c-cyan), 0 0 10px rgba(255,255,255,0.45); }
  87.5%  { text-shadow: 0.5px 0 0 var(--c-pink), -0.5px 0 0 var(--c-cyan), 0 0 6px  rgba(255,255,255,0.25); }
  100%   { text-shadow: 0.3px 0 0 var(--c-pink), -0.3px 0 0 var(--c-cyan), 0 0 6px  rgba(255,255,255,0.22); }
}

/* ========== screens (splash, gameover, etc) ========== */
.screen {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding:
    calc(28px + env(safe-area-inset-top))
    calc(24px + env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));
  gap: 22px;
  pointer-events: none;
}
.screen * { pointer-events: auto; }
/* Default splash/over text to white so a near-black per-game stage
   bg can't render an invisible splash. Per-game CSS still overrides
   individual elements (.tap, .sub, etc.). */
#splash, .splash, #over, #gameover { color: #ffffff; }
.hidden { display: none !important; }

/* ========== #splash: 200ms fade on show/hide.
   Override the global .hidden { display: none !important } via id-scoped
   `display: flex !important` so the opacity transition can run. The
   visibility transition is delayed on hide so the element stays
   interactive-blocking until the fade completes. */
#splash {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 0s linear 0s;
}
#splash.hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
@media (prefers-reduced-motion: reduce) {
  #splash, #splash.hidden { transition: none; }
}

/* ========== #over + .gai-over-overlay: game-over scrim fade-in (200ms)
   + content slide-up. 150ms on hide. Games use `<div id="over" class="screen hidden">`
   and toggle .hidden directly; GAI.ui.gameOver() adds .gai-over-overlay
   to its created element. We animate `> *` children so any direct-child
   content slides up without requiring a wrapper panel. */
#over, .gai-over-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 0s linear 0s;
}
#over.hidden, .gai-over-overlay.hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, visibility 0s linear 150ms;
}
#over > *, .gai-over-overlay > * {
  transform: translateY(0);
  opacity: 1;
  transition: transform 200ms ease, opacity 200ms ease;
}
#over.hidden > *, .gai-over-overlay.hidden > * {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 150ms ease, opacity 150ms ease;
}
@media (prefers-reduced-motion: reduce) {
  #over, #over > *,
  .gai-over-overlay, .gai-over-overlay > * { transition: none; }
}

/* ========== arcade button ========== */
.arcade {
  display: inline-block;
  background: var(--c-pink);
  color: #fff;
  padding: 14px 22px;
  font-size: clamp(10px, 2vw, 13px);
  letter-spacing: 0.12em;
  border-radius: 0;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.4),
    inset 0 4px 0 rgba(255,255,255,0.2),
    0 0 0 3px var(--c-bg),
    0 0 0 5px var(--c-pink),
    0 0 18px rgba(255,0,110,0.6);
  transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.12s ease;
}
.arcade:active { transform: translateY(2px); }
.arcade:focus-visible { outline: 2px dashed #fff; outline-offset: 6px; }
.arcade.cyan {
  background: var(--c-cyan); color: var(--c-bg);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.35),
    inset 0 4px 0 rgba(255,255,255,0.35),
    0 0 0 3px var(--c-bg),
    0 0 0 5px var(--c-cyan),
    0 0 18px rgba(0,245,255,0.6);
}
.arcade.green {
  background: var(--c-teal); color: var(--c-bg);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.35),
    inset 0 4px 0 rgba(255,255,255,0.35),
    0 0 0 3px var(--c-bg),
    0 0 0 5px var(--c-teal),
    0 0 18px rgba(6,255,165,0.55);
}
.arcade.yellow {
  background: var(--c-yellow); color: var(--c-bg);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.35),
    inset 0 4px 0 rgba(255,255,255,0.35),
    0 0 0 3px var(--c-bg),
    0 0 0 5px var(--c-yellow),
    0 0 18px rgba(255,214,10,0.55);
}
.arcade.copied { background: var(--c-teal); color: var(--c-bg); }

/* ========== shell back + mute ========== */
.shell-btn {
  position: fixed; z-index: 95;
  background: rgba(10,10,30,0.7);
  border: 2px solid rgba(255,255,255,0.25);
  color: #fff;
  width: 38px; height: 38px;
  font-size: 14px;
  display: grid; place-items: center;
  border-radius: 6px;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  letter-spacing: 0;
}
.shell-btn:hover { border-color: rgba(255,255,255,0.5); }
.shell-btn:focus-visible { outline: 2px dashed #fff; outline-offset: 3px; }
.shell-back {
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  width: auto; padding: 0 10px;
}
.shell-mute {
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
}

/* ========== page-glitch transition ========== */
.page-glitch {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,0,110,0.18), rgba(0,245,255,0.18));
  mix-blend-mode: screen;
  animation: pageGlitch 0.22s steps(4, end) forwards;
}
@keyframes pageGlitch {
  0%   { opacity: 0; transform: translate(0,0); filter: hue-rotate(0); }
  25%  { opacity: 1; transform: translate(-6px,2px); filter: hue-rotate(40deg); }
  50%  { opacity: 1; transform: translate(6px,-2px); filter: hue-rotate(-30deg); }
  75%  { opacity: 1; transform: translate(-2px,1px); filter: hue-rotate(15deg); }
  100% { opacity: 0; transform: translate(0,0); filter: hue-rotate(0); }
}

/* ========== shared keyframes ========== */
@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.06); }
}
@keyframes glitch {
  0%   { transform: translate(0,0); filter: hue-rotate(0); }
  20%  { transform: translate(-3px,2px); filter: hue-rotate(20deg); }
  40%  { transform: translate(3px,-2px); filter: hue-rotate(-15deg); }
  60%  { transform: translate(-2px,-1px); filter: hue-rotate(10deg); }
  80%  { transform: translate(2px,1px); filter: hue-rotate(-5deg); }
  100% { transform: translate(0,0); filter: hue-rotate(0); }
}
@keyframes flameFlicker {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}

.glitch { animation: glitch 0.4s steps(4, end) 1; }
.pulse  { animation: pulse 1.1s ease-in-out infinite; }

/* ========== wordmark ========== */
.wordmark {
  font-size: clamp(28px, 11vw, 104px);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ========== rainbow mode (konami unlock) ========== */
body.rainbow .chrom {
  animation: rainbowHue 8s linear infinite;
}
@keyframes rainbowHue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ========== a11y media queries ========== */
@media (prefers-reduced-motion: reduce) {
  .pulse, .chrom-jitter, .glitch, body.rainbow .chrom { animation: none !important; }
  .page-glitch { animation: none; opacity: 0; }
  .arcade { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #scanlines, #vignette { display: none; }
  .shell-btn { backdrop-filter: none; background: rgba(10,10,30,0.95); }
}
@media (prefers-contrast: more) {
  .chrom { text-shadow: 2px 0 0 var(--c-pink), -2px 0 0 var(--c-cyan), 0 0 0 #000; }
  .shell-btn { border-color: #fff; }
}

/* ========== shared HUD / typography ========== */
.stage {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, #150525 0%, #0a0a1e 60%, #05050f 100%);
}
.hud {
  position: fixed;
  top: calc(58px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px;
  font-size: clamp(9px, 1.8vw, 12px);
  letter-spacing: 0.14em;
  z-index: 20;
  pointer-events: none;
}
.hud b { color: var(--c-yellow); font-weight: normal; }
.big {
  font-size: clamp(20px, 6vw, 44px);
  letter-spacing: 0.06em;
  line-height: 1;
}
.sub {
  font-size: clamp(9px, 1.8vw, 13px);
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
}
.tap {
  font-size: clamp(10px, 2vw, 13px);
  letter-spacing: 0.18em;
  color: var(--c-cyan);
}
.stats {
  font-size: clamp(9px, 1.6vw, 11px);
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.75);
}
.stats b { color: var(--c-yellow); font-weight: normal; }
.score {
  font-size: clamp(36px, 12vw, 84px);
  letter-spacing: 0.06em;
  line-height: 1;
}

/* ========== shared shake ========== */
@keyframes gaiShake {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3px,2px); }
  40%  { transform: translate(3px,-2px); }
  60%  { transform: translate(-2px,-1px); }
  80%  { transform: translate(2px,1px); }
  100% { transform: translate(0,0); }
}
.shake { animation: gaiShake 0.32s steps(6, end) 1; }
@media (prefers-reduced-motion: reduce) {
  .shake { animation: none !important; }
}

/* ========== toast notifications ========== */
.gai-toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(10,10,30,0.92);
  border: 1px solid var(--c-cyan);
  color: #fff;
  padding: 10px 16px;
  font-size: 10px;
  letter-spacing: 0.18em;
  z-index: 9500;
  box-shadow: 0 0 0 2px rgba(0,245,255,0.2), 0 0 18px rgba(0,245,255,0.3);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.gai-toast.in { opacity: 1; transform: translateX(-50%) translateY(0); }
.gai-toast.out { opacity: 0; transform: translateX(-50%) translateY(-6px); }

/* ========== theme overrides ========== */
body.theme-deepnight #scanlines { opacity: 0.5; }
body.theme-deepnight #vignette { background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.65) 100%); }
body.theme-deepnight {
  --c-pink: #cf0058;
  --c-magenta: #a700a7;
  --c-purple: #6829bd;
  --c-deeppurple: #2e0a82;
  --c-blue: #3650c5;
  --c-cyan: #00c7d1;
  --c-teal: #05cf85;
  --c-yellow: #d1b008;
  --c-orange: #d17a00;
  --c-red: #c11c30;
}
body.theme-highcontrast #scanlines, body.theme-highcontrast #vignette { display: none; }
body.theme-highcontrast .chrom { text-shadow: 3px 0 0 var(--c-pink), -3px 0 0 var(--c-cyan); }
body.theme-highcontrast .tile,
body.theme-highcontrast .shell-btn,
body.theme-highcontrast .arcade { border-width: 2px !important; }
body.theme-highcontrast { font-weight: bold; }

/* ========== category tabs (home) ========== */
.tabs {
  display: flex;
  gap: 12px;
  margin: 22px auto 0;
  padding: 0 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-purple) transparent;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-thumb { background: var(--c-purple); }
.tab {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  font-size: clamp(8px, 1.5vw, 10px);
  letter-spacing: 0.18em;
  padding: 12px 16px;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.tab:hover { color: #fff; border-color: rgba(255,255,255,0.45); }
.tab:focus-visible { outline: 2px dashed #fff; outline-offset: 3px; }
.tab.active {
  color: #fff;
  border-color: var(--c-cyan);
  box-shadow: 0 0 0 1px var(--c-cyan), 0 0 14px rgba(0,245,255,0.35);
  position: relative;
}
.tab.active::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--c-pink), var(--c-cyan));
}

/* tile category badge */
.tile .cat {
  position: absolute;
  bottom: 8px; left: 14px;
  font-size: 7px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.45);
}
.tile .today-badge {
  position: absolute;
  top: 18px; right: 16px;
  font-size: 7px;
  letter-spacing: 0.18em;
  color: var(--c-teal);
}

/* ========== flash overlay helper ========== */
.flash-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.flash-overlay.on { opacity: 1; }

/* ========== achievements modal ========== */
.ach-modal {
  position: fixed; inset: 0;
  background: rgba(5,5,15,0.92);
  z-index: 9700;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding:
    calc(32px + env(safe-area-inset-top))
    20px
    calc(32px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.ach-modal h3 {
  font-size: clamp(14px, 3vw, 22px);
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}
.ach-list {
  width: 100%;
  max-width: 460px;
  display: flex; flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.ach-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(10,10,30,0.7);
}
.ach-item.locked { opacity: 0.4; }
.ach-item .mark { font-size: 14px; color: var(--c-yellow); }
.ach-item .label {
  font-size: 10px;
  letter-spacing: 0.16em;
}
.ach-item .desc {
  font-size: 8px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.14em;
  margin-top: 4px;
}

/* ========== play-next (game-over footer) ========== */
.gai-play-next {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dashed rgba(255,255,255,0.18);
  width: min(440px, 90vw);
}
.gai-play-next .pn-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--c-cyan);
  margin-bottom: 10px;
  text-align: center;
}
.gai-play-next .pn-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.gai-play-next .pn-tile {
  font-size: clamp(8px, 1.4vw, 10px);
  letter-spacing: 0.12em;
  padding: 10px 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(10,10,30,0.5);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.gai-play-next .pn-tile:hover {
  border-color: var(--c-cyan);
  background: rgba(20,15,50,0.7);
}

/* ========== pause overlay ========== */
.gai-pause .gai-pause-inner {
  text-align: center;
  display: flex; flex-direction: column; gap: 18px;
  align-items: center;
}

/* ========== share button row ========== */
.share-row {
  display: flex; gap: 10px;
  justify-content: center;
  margin-top: 16px;
}
.share-row .arcade { padding: 10px 14px; font-size: 10px; }

/* ========== blitz tag ========== */
.blitz-tag {
  display: inline-block;
  font-size: 8px;
  letter-spacing: 0.2em;
  padding: 3px 6px;
  background: var(--c-pink);
  color: #fff;
  margin-left: 6px;
}

/* ========== pinned strip ========== */
.pinned-strip {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 16px;
}
.pinned-tile {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--c-yellow);
  background: rgba(10,10,30,0.6);
  font-size: 10px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.pinned-tile::before { content: "📌 "; }

/* ========== search bar ========== */
.search-row {
  display: flex; gap: 8px;
  align-items: center;
  margin-top: 14px;
}
.search-input {
  flex: 1;
  background: rgba(10,10,30,0.7);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 10px 14px;
  min-height: 44px;
  font-family: var(--font-arcade);
  font-size: 10px;
  letter-spacing: 0.12em;
  outline: none;
  transition: border-color 0.12s ease;
}
.search-input:focus { border-color: var(--c-cyan); }
.search-toggle {
  background: rgba(10,10,30,0.7);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 10px 14px;
  font-size: 12px;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ========== welcome-back toast (uses gai-toast styling) ========== */
@media (prefers-reduced-motion: reduce) {
  .gai-play-next .pn-tile { transition: none; }
  .gai-pause { backdrop-filter: none; }
}

/* ========== about-this-game (per-game SEO content block) ==========
   Sits in DOM order after the game canvas (indexable by crawlers).
   On screen it's a small fixed pill at the bottom-right; opening
   the <details> expands the content as a centred overlay panel
   so it never competes with the game for attention until invited. */
.about-game {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 60;
  font-family: var(--font-arcade);
  font-size: 9px;
  letter-spacing: 0.14em;
  pointer-events: none;
}
.about-game details { pointer-events: auto; }
.about-game summary {
  list-style: none;
  cursor: pointer;
  background: rgba(10,10,30,0.85);
  border: 1px solid rgba(0,245,255,0.35);
  color: #00f5ff;
  padding: 8px 12px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  user-select: none;
}
.about-game summary::-webkit-details-marker { display: none; }
.about-game summary:hover,
.about-game summary:focus-visible { color: #fff; border-color: #00f5ff; outline: none; }
.about-game details[open] {
  position: fixed; inset: 0;
  background: rgba(5,5,15,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  z-index: 100;
}
.about-game details[open] summary {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
}
.about-game details[open] summary::before { content: '× CLOSE '; color: var(--c-pink); }
.about-game .about-content {
  max-width: 520px;
  max-height: 80vh;
  max-height: 80dvh;
  overflow: auto;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.6;
}
.about-game .about-content h2 {
  font-size: 14px; letter-spacing: 0.14em;
  color: #fff; margin-bottom: 14px;
}
.about-game .about-content h3 {
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--c-cyan); margin: 18px 0 8px;
}
.about-game .about-content p,
.about-game .about-content li { font-family: var(--font-arcade); }
.about-game .about-content ul {
  list-style: none; padding-left: 0;
}
.about-game .about-content li {
  padding: 4px 0 4px 16px; position: relative;
}
.about-game .about-content li::before {
  content: '▸'; color: var(--c-pink);
  position: absolute; left: 0;
}
/* "More games" sub-block inside the about overlay — small text tiles. */
.about-game .more-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 6px 0 10px;
}
.about-game .more-tile {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: rgba(10,10,30,0.7);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  padding: 10px 8px;
  font-family: var(--font-arcade);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-decoration: none;
  min-height: 44px;
}
.about-game .more-tile:hover,
.about-game .more-tile:focus-visible { border-color: var(--c-cyan); color: var(--c-cyan); outline: none; }
.about-game .more-all {
  color: var(--c-cyan);
  font-size: 9px; letter-spacing: 0.18em;
  text-decoration: none;
  display: inline-block; margin-top: 4px;
}
.about-game .more-all:hover { color: #fff; }