/* 走進歷史 /games、/games/<代號>（類名 gm-）。遊戲本體的樣式在 /static/game/gkit.js 裡面 */
.gm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; margin: 18px 0 8px; }
.gm-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--dl-hair); background: var(--dl-paper); color: var(--dl-ink); text-decoration: none; min-width: 0; }
.gm-card:hover .gm-card__go, .gm-card:focus-visible .gm-card__go { text-decoration: underline; }
.gm-card__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--dl-paper2); }
.gm-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.gm-card__era { font-size: 12.5px; color: var(--dl-ink3); letter-spacing: .04em; }
.gm-card__t { font-family: var(--dl-serif); font-size: 22px; line-height: 1.3; }
.gm-card__d { font-size: 14.5px; line-height: 1.75; color: var(--dl-ink2); }
.gm-card__m { font-size: 12.5px; color: var(--dl-ink3); }
.gm-card__go { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--dl-warm, #b5372b); }
.gm-crumb { margin: 12px 0 0; font-size: 14px; }
.gm-crumb a { color: var(--dl-ink2); text-decoration: none; }
.gm-hero { display: grid; gap: 18px; margin: 14px 0 6px; }
.gm-hero__cover { width: 100%; height: auto; display: block; border: 1px solid var(--dl-hair); }
.gm-hero__in { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gm-hero__t { margin: 0; font-family: var(--dl-serif); font-size: clamp(26px, 5vw, 36px); line-height: 1.25; }
.gm-hero__lead { margin: 0; font-size: 15.5px; line-height: 1.85; color: var(--dl-ink2); }
.gm-hero__how { margin: 0; font-size: 13px; line-height: 1.7; color: var(--dl-ink3); }
.gm-go { align-self: flex-start; min-height: 52px; padding: 0 26px; border: 0; background: #7a2e1f; color: #fff3e0; font: 900 19px var(--dl-serif); cursor: pointer; box-shadow: 4px 4px 0 var(--dl-ink); }
.gm-go:disabled { opacity: .7; cursor: progress; }
@media (min-width: 900px) { .gm-hero { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); column-gap: 32px; align-items: start; } }
.gm-stages { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.gm-stages li { border-top: 2px solid var(--dl-ink); padding: 8px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.7; color: var(--dl-ink2); }
.gm-stages b { font-family: var(--dl-serif); font-size: 16px; color: var(--dl-ink); }
.gm-facts, .gm-made { margin: 0; padding: 0 0 0 1.2em; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.75; }
.gm-facts li span { color: var(--dl-ink); }
.gm-made li { color: var(--dl-ink2); }
.gm-note { margin: 0 0 8px; font-size: 13px; color: var(--dl-ink3); }
.gm-srcs { margin: 0 0 8px; padding-left: 1.4em; font-size: 14px; line-height: 1.8; }
.gm-srcs a { color: var(--dl-ink2); overflow-wrap: anywhere; }
.gm-stage { position: fixed; inset: 0; z-index: 5000; background: #0e1a20; }
.gm-stage[hidden] { display: none; }
html.gm-on, html.gm-on body { overflow: hidden !important; }