/* game page: builds on /style.css */
.crumbs { color: var(--mute); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }

.g-hero { padding: clamp(24px, 5vw, 64px) var(--pad) 0; }
.g-title { font-size: clamp(2.8rem, 9.6vw, 9.6rem); margin: clamp(16px, 2.6vw, 30px) 0 clamp(16px, 2vw, 26px); overflow-wrap: anywhere; }
.g-tagline { font-size: clamp(1.3rem, 2.6vw, 2.2rem); font-weight: 600; line-height: 1.15; max-width: 28ch; letter-spacing: -.015em; }
.g-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(20px, 3vw, 32px) 0 clamp(28px, 4vw, 48px); }
.btn-accent { background: var(--accent); color: #1F1F20; }
.btn-accent:hover { background: var(--ink); color: var(--paper); }
.btn-line { background: none; color: var(--ink); border: 1px solid var(--rule); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-dark { background: #1F1F20; color: #F2F0EB; }
.btn-dark:hover { background: #F2F0EB; color: #1F1F20; }
.g-actions .btn { align-self: auto; }

/* screenshots */
.shot { margin: 0; }
.shot button { display: block; width: 100%; padding: 0; border: 1px solid var(--rule); background: var(--paper); overflow: hidden; cursor: zoom-in; }
.shot img { display: block; width: 100%; height: auto; transition: transform .35s; }
.shot button:hover img { transform: scale(1.025); }
.shot-hero button { border-width: 2px; }

/* numbers */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: clamp(28px, 4vw, 48px); }
.stats div { padding: clamp(18px, 3vw, 36px) var(--pad); display: flex; flex-direction: column; gap: 6px; }
.stats div + div { border-left: 1px solid var(--rule); }
.stats b { font-size: clamp(3rem, 8vw, 7rem); color: var(--accent); }
.stats .mono { color: var(--mute); }

/* sections */
.block { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3vw, 36px); padding: clamp(40px, 7vw, 96px) var(--pad); border-bottom: 1px solid var(--rule); }
.label { color: var(--mute); font-weight: 400; }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 18px); }

.story { max-width: 820px; display: grid; gap: 22px; }
.col { display: grid; gap: 22px; align-content: start; }
.story p, .col p { color: var(--mute); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; }
.story .lead, .col .lead, .lead { color: var(--ink); font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.15; font-weight: 600; font-stretch: 108%; letter-spacing: -.02em; }
.split .lead { max-width: 22ch; }

.points { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.points li { position: relative; padding: 16px 0 16px 30px; border-bottom: 1px solid var(--rule); font-size: 1.05rem; line-height: 1.45; }
.points li::before { content: ''; position: absolute; left: 0; top: 24px; width: 12px; height: 12px; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.points-wide { max-width: 900px; }

.g-cta { background: var(--accent); color: #1F1F20; padding: clamp(40px, 7vw, 96px) var(--pad); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.g-cta h2 { font-size: clamp(2.6rem, 8vw, 8rem); }
.g-cta p { font-weight: 500; max-width: 38ch; font-size: 1.15rem; }

/* lightbox */
dialog#zoom { border: 0; padding: 0; background: #000; width: min(1280px, 94vw); max-height: 92vh; overflow: hidden; position: fixed; inset: 0; margin: auto; height: fit-content; }
dialog#zoom::backdrop { background: rgba(10, 10, 10, .82); }
dialog#zoom img { display: block; width: 100%; height: auto; }
.dlg-close { position: absolute; top: 10px; right: 10px; padding: 6px 12px; background: rgba(0, 0, 0, .7); color: #fff; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div:nth-child(3) { border-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .shot img { transition: none; } }