/* Game showcase pages (dist/games/<slug>/, built by tools/build-game-pages.cjs). Loads after home.css
   and leans on its header, footer, eyebrow, primary-link, mode-tag and faq-list rules. Each page sets
   --game-color on <main> so the Play button, tags and accents take the game's colour from the home page card. */
.game-page{padding:26px 0 64px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs>span[aria-hidden]{margin:0 9px;color:#58647b}

/* Hero: name, pitch line and the Play button beside a rotated screenshot, like the home page's video. */
.game-hero{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;padding:36px 0 44px}
.game-hero h1{display:flex;align-items:center;gap:16px;font-size:clamp(38px,5vw,64px);letter-spacing:-2.2px}
.game-page-icon{color:inherit;font-size:.8em;line-height:1}
.game-tagline{max-width:480px;margin-top:18px;font-size:18px;line-height:1.6;color:var(--muted)}
.game-hero .mode-tags{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;min-height:0;margin:20px 0 0}
.play-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.play-button{padding:15px 24px;background:var(--game-color);font-size:17px}
.play-button:hover{background:var(--game-color);filter:brightness(1.1)}
.secondary-link{display:inline-flex;align-items:center;gap:12px;padding:13px 18px;border:1px solid var(--line);border-radius:6px;color:var(--text);font-weight:700;text-decoration:none}
.secondary-link:hover{border-color:var(--game-color);color:var(--game-color)}
.game-hero .device-note{margin-top:16px}
.live-players{margin-top:14px;font-size:14px;font-weight:600;color:var(--text)}
.live-players::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:#7bf29a;box-shadow:0 0 8px #7bf29a;vertical-align:1px}
.game-hero-art{margin:0;border:1px solid #453755;border-radius:10px;overflow:hidden;background:#000;box-shadow:12px 12px 0 #181525;transform:rotate(1deg)}
.game-hero-art img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* The sections below the hero share one rhythm. */
.game-section{padding:44px 0;border-top:1px solid var(--line)}
.game-section .eyebrow{margin-bottom:10px}
.game-section h2{font-size:30px;letter-spacing:-.8px}
.game-pitch{display:grid;grid-template-columns:1fr 2fr;gap:48px}
.game-pitch p{font-size:17px;line-height:1.75;color:var(--muted)}
.game-pitch p+p{margin-top:16px}
.game-pitch strong{color:var(--text)}
.game-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
.game-gallery figure{margin:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel)}
.game-gallery img{width:100%;aspect-ratio:16/9;object-fit:cover}
.game-gallery figcaption{padding:12px 16px;font-size:14px;color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
.feature{padding:22px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.feature-icon{display:block;font-size:28px;line-height:1}
.feature h3{margin-top:14px;font-size:17px;letter-spacing:-.3px}
.feature p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--muted)}
.game-howto{display:grid;grid-template-columns:1fr 2fr;gap:48px}
.game-howto ol{display:grid;gap:14px;margin:0;padding:22px 24px 22px 44px;border-left:2px solid var(--game-color);background:linear-gradient(100deg,#191e23,transparent);color:var(--muted);font-size:15px;line-height:1.7}
.game-howto li{padding-left:6px}
.game-howto li::marker{color:var(--game-color);font-weight:750}
.game-howto strong{color:var(--text)}
.controls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:26px}
.controls table{width:100%;border-collapse:collapse}
.controls caption{padding:0 0 12px;text-align:left;font-size:18px;font-weight:750;letter-spacing:-.3px;color:var(--game-color)}
.controls th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.controls td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px;color:#d3d8e2}
.controls td:first-child{width:42%;white-space:nowrap}
kbd{display:inline-block;min-width:26px;padding:2px 7px;white-space:nowrap;border:1px solid #58647b;border-bottom-width:3px;border-radius:5px;background:#202b3d;color:var(--text);font:600 12px/1.5 "SFMono-Regular",Consolas,"Liberation Mono",monospace;text-align:center}
.game-faq .faq-list{max-width:760px;margin-top:22px}
.game-faq .faq-list a{color:var(--game-color)}
.changelog{display:grid;gap:14px;max-width:760px;margin:22px 0 0;padding:0;list-style:none}
.changelog li{display:grid;grid-template-columns:120px 1fr;gap:16px;color:var(--muted);line-height:1.65}
.changelog time{padding-top:4px;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:12px;letter-spacing:1px;color:var(--game-color)}
.more-games{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.more-game{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--panel);text-decoration:none}
.more-game:hover{border-color:var(--game-color)}
.more-game-icon{flex-shrink:0;font-size:26px;line-height:1}
.more-game strong{display:block;font-size:14px}
.more-game strong+span{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.more-game-arrow{margin-left:auto;color:var(--game-color)}

@media(max-width:999px){
  .game-hero{grid-template-columns:1fr;gap:30px;padding:30px 0 36px}
  .game-hero-art{max-width:640px;box-shadow:7px 7px 0 #181525}
  .game-pitch,.game-howto{grid-template-columns:1fr;gap:20px}
  .feature-grid,.more-games{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .game-page{padding-top:18px}
  .game-hero h1{font-size:clamp(34px,9vw,46px);letter-spacing:-1.5px;gap:12px}
  .game-hero-art{transform:none;box-shadow:none}
  .game-section{padding:32px 0}
  .game-section h2{font-size:26px}
  .game-gallery,.feature-grid,.controls-grid{grid-template-columns:1fr}
  .game-howto ol{padding:18px 18px 18px 36px}
  .controls td:first-child{width:auto;white-space:normal}
  .changelog li{grid-template-columns:1fr;gap:4px}
  .play-row .primary-link,.play-row .secondary-link{width:100%;justify-content:center}
}
@media(max-width:480px){.more-games{grid-template-columns:1fr}}