/* Static game information uses the shared type and color tokens. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); }
.game-about { width: min(100%, 880px); margin: 0 auto; padding: 24px clamp(18px, 4vw, 40px) 40px; }
.game-about header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.game-about a { color: var(--gold); text-underline-offset: 4px; }
.about-brand { font-size: var(--text-heading-sm); text-decoration: none; }
.game-about h1 { font-size: clamp(24px, 5vw, 32px); line-height: 1.3; margin: 0 0 18px; }
.game-about h2 { color: var(--gold); font-size: var(--text-subheading); margin: 0 0 16px; }
.game-about p { margin: 0 0 20px; }
.game-about section { padding: 24px 0; border-top: 1px solid var(--divider); }
.game-about dl { margin: 0; }
.game-about dl>div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.game-about dt { color: var(--teal); }
.game-about dd { margin: 0; }
.game-about section p:last-child { margin-bottom: 0; }
.game-about .play-link { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 16px; border: 2px solid var(--action-edge); background: var(--action); color: var(--ink); text-decoration: none; font-size: var(--text-label); }
.game-about .play-link:hover { background: var(--action-hover); }
.game-about a:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
@media(max-width: 600px) { .game-about dl>div { grid-template-columns: 1fr; gap: 4px; } .about-brand { font-size: var(--text-body); } }

.game-about ol, .game-about ul { margin: 0; padding-left: 1.5em; }
.game-about li { margin-bottom: 12px; padding-left: 4px; }
.game-about section ul+p { margin-top: 20px; }
.game-about footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.game-shot { margin: 24px 0; }
.game-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--divider); image-rendering: pixelated; }
.game-shot figcaption { margin-top: 8px; color: var(--muted); font-size: var(--text-caption); }

.game-about .about-brand { display: inline-flex; flex-direction: column; align-items: center; flex-shrink: 0; color: var(--paper); }
.about-wordmark { display: flex; gap: 8px; font: 28px/1 var(--pixel); letter-spacing: -1px; transform: skewX(-8deg); text-shadow: 0 2px #c4b487, 0 4px #795735, 2px 6px var(--shadow); }
.about-wordmark b { font-weight: 400; color: var(--gold); text-shadow: 0 2px var(--action), 0 4px var(--action-shadow), 2px 6px var(--shadow); }
.about-stripes { display: block; height: 3px; width: 90%; margin-top: 10px; background: linear-gradient(90deg,var(--action) 0 30%,var(--gold) 30% 70%,var(--teal) 70%); transform: skewX(-25deg); }
.about-banner { margin: 22px 0; border: 1px solid var(--divider); }
.about-banner img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
@media(max-width: 600px) { .about-wordmark { font-size: 22px; gap: 5px; } .game-about header { gap: 12px; } .game-about header .play-link { padding: 8px 10px; font-size: var(--text-caption); } }