/* About + Game page touches for SITE-UPGRADE phase 1 (loaded after motion.css on those two pages only). */

/* ---- About additions ---- */
.about-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 6px 0 0; padding: 0; list-style: none; }
.about-facts li { display: flex; align-items: baseline; gap: 8px; color: var(--ink-secondary); font-size: 14px; }
.about-facts b { color: var(--ink); font: 600 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.about-brand .about-copy > p:first-child { color: var(--ink); font-size: clamp(19px, 2vw, 24px); line-height: 1.45; }

/* ---- Game page refresh: blue spotlight, kinetic title, the district beat of the trailer, a day-look gameplay still ---- */
.game-page .game-landing { overflow: hidden; isolation: isolate; }
.game-page .game-landing > picture { position: absolute; inset: 0; z-index: -2; }
.game-page .game-landing > picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(.45) saturate(1.1); }
.game-landing .game-spot { position: absolute; z-index: -1; left: 50%; top: -12%; width: min(90vw, 900px); height: 120%; translate: -50% 0; pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 0deg 156deg, rgba(255, 255, 255, 0.03) 164deg, rgba(255, 255, 255, 0.09) 173deg, rgba(255, 255, 255, 0.12) 180deg, rgba(255, 255, 255, 0.09) 187deg, rgba(255, 255, 255, 0.03) 196deg, transparent 204deg); transform-origin: 50% 0; }
.game-page .game-landing h1 { font-family: var(--display); font-weight: 600; font-size: clamp(64px, 11vw, 150px); line-height: .9; letter-spacing: .005em; }
.game-page .game-landing h1 > span { display: block; overflow: hidden; padding-bottom: .03em; }
.game-page .game-landing h1 > span > span { display: inline-block; }
.game-page .game-landing .chips { justify-content: center; margin: 0 0 22px; }
@media (min-width: 861px) {
  .game-page .game-landing { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; place-items: center start; text-align: left; padding: 0 max(var(--gutter), calc((100vw - 1240px) / 2)); }
  .game-page .game-landing > div { grid-column: 1; grid-row: 1; padding: 150px 0 90px; }
  .game-page .game-landing > picture { position: relative; inset: auto; z-index: 0; grid-column: 2; grid-row: 1; justify-self: center; width: min(100%, 340px); aspect-ratio: 9 / 16; border: 1px solid var(--game-accent-line); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(255, 255, 255, 0.13); }
  .game-page .game-landing > picture img { filter: none; }
  .game-page .game-landing .chips, .game-page .game-landing .game-jump { justify-content: flex-start; }
  .game-landing .game-spot { left: auto; right: 6%; translate: none; width: min(56vw, 760px); }
}
@keyframes asm-line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes asm-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
html.motion-ok .game-page .game-landing h1 > span > span { animation: asm-line-up .9s var(--ease-out) both; }
html.motion-ok .game-page .game-landing h1 > span + span > span { animation-delay: .12s; }
@media (min-width: 861px) { html.motion-ok .game-landing .game-spot { animation: asm-sway 9s ease-in-out infinite alternate; } }
.game-district { margin: 28px 0 0; border: 1px solid var(--game-accent-line); border-radius: 18px; overflow: hidden; background: #121315; }
.game-district img { width: 100%; height: auto; aspect-ratio: 1920 / 456; object-fit: cover; }
.game-district figcaption { padding: 12px 16px; color: var(--ink-secondary); font-size: 13px; }
.game-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.game-features li { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--news-card, #111214); }
.game-features b { display: block; margin-bottom: 6px; color: var(--ink); font-size: 17px; }
.game-features p { color: var(--ink-secondary); font-size: 14px; line-height: 1.5; }
html.motion-ok .game-page kbd { transition: transform .2s var(--ease-out); }
html.motion-ok .game-page .game-control-list li:hover kbd { transform: translateY(2px); }

@media (min-width: 861px) {
  .game-page .game-landing > div { align-self: start; }
  .game-page .game-landing .game-jump { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-page .game-landing .game-jump a { justify-content: center; text-align: center; }
}

/* The centre line (2026-10-13): the Game hero is one centred column on every screen; the phone-frame still follows the
   copy. The About sections keep their long-form text left inside a centred column. */
@media (min-width: 861px) {
  .game-page .game-landing { grid-template-columns: minmax(0, 1fr); place-items: center; text-align: center; padding: 0 var(--gutter); }
  .game-page .game-landing > div { grid-column: 1; grid-row: 1; padding: 150px 0 40px; max-width: 860px; }
  .game-page .game-landing > picture { grid-column: 1; grid-row: 2; margin: 0 0 90px; }
  .game-page .game-landing .chips, .game-page .game-landing .game-jump { justify-content: center; }
  .game-landing .game-spot { left: 50%; right: auto; translate: -50% 0; }
}