:root { --game-preview-height: 260px; }
/* The homepage owns brand, typography, palette, navigation and footer tokens. */
.boss-page main > section { padding-block: 44px; border-bottom: 1px solid var(--line); scroll-margin-top: 20px; }
.boss-page .play-section { padding-top: 36px; }
.play-intro h1 { font-size: clamp(2rem,4.6vw,3.2rem); margin-bottom: 14px; }
.play-intro .hero-lede { margin-bottom: 22px; line-height: 1.7; }
.mobile-notice { padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--panel); margin-bottom: 24px; }
.mobile-notice strong { color: var(--accent); }
.mobile-notice p { margin: 5px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.65; }
.games { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.game-card { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.game-image { position: relative; height: var(--game-preview-height); overflow: hidden; background: #070d14; }
.game-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.game-image span { position: absolute; bottom: 8px; left: 10px; background: #0a1019e8; color: var(--text); padding: 4px 8px; border-radius: 4px; font-size: .68rem; }
.game-body { padding: 20px; }
.game-body h2 { font-size: 1.25rem; margin-bottom: 16px; }
.game-body .primary-action { width: 100%; }
.stage-one { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 5px; color: var(--blue); font-size: .82rem; }
.stage-note { color: var(--muted); font-size: .85rem; margin: 20px 0; line-height: 1.8; }
.boss-page section > h2 { margin-bottom: 20px; }
.boss-page section > p, .boss-page details p, .method-grid p { color: var(--muted); line-height: 1.9; }
.method-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin-block: 30px; }
.method-grid h3 { color: var(--blue); font-size: 1.1rem; }
.method-grid p { font-size: .9rem; }
.boss-page details { border-top: 1px solid var(--line); padding-block: 8px; }
.boss-page summary { padding: 14px 2px; cursor: pointer; line-height: 1.6; }
.boss-page details[open] > summary { color: var(--accent); }
.review-data { margin-top: 24px; }
.table-wrap { max-width: 100%; overflow: auto; margin-block: 20px; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
caption { text-align: left; padding: 12px 0; font-weight: 650; }
th,td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); }
thead { background: var(--panel); }
th:first-child { min-width: 130px; }
td { font-variant-numeric: tabular-nums; }
.note { color: var(--muted); font-size: .82rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel); border-radius: 6px; padding: 18px; max-height: 540px; overflow: auto; font: .82rem/1.85 ui-monospace,monospace; }
@media(max-width:700px) {
 .games { grid-template-columns: 1fr; gap: 14px; }
 .game-card { display: grid; grid-template-columns: 112px minmax(0,1fr); }
 .game-image { height: 186px; min-height: 186px; }
 .game-image img { object-position: 50% 30%; }
 .game-image span { left: 4px; bottom: 4px; font-size: .56rem; padding: 3px; }
 .game-body { padding: 16px 14px 8px; }
 .game-body h2 { font-size: 1.1rem; margin-bottom: 12px; }
 .game-body .primary-action { padding-inline: 8px; }
 .method-grid { grid-template-columns: 1fr; gap: 10px; }
 .boss-page main > section { padding-block: 32px; }
 .boss-page .site-header { gap: 8px; }
 .boss-page .header-nav a { padding-inline: 8px; }
}
@media(max-width:360px) { .game-card { grid-template-columns: 86px minmax(0,1fr); } .game-body { padding-inline: 10px; } }