.games-shell {
    max-width:960px;
    margin:20px auto 60px;
}

.games-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:28px;
}

.games-top a {
    color:var(--text-link);
}

.games-language {
    display:flex;
    flex:0 0 auto;
    align-items:center;
    gap:4px;
    white-space:nowrap;
}

.games-language a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    width:40px;
    min-height:36px;
    padding:6px 1px;
    color:var(--games-language-muted, var(--text-muted));
    font-size:12px;
    font-weight:500;
    line-height:1.25;
    text-decoration:none;
    border-radius:3px;
}

.games-language a[aria-current],
.games-language a:hover,
.games-language a:focus-visible {
    color:var(--games-language-active, var(--text));
    text-decoration:none;
}

.games-language a[aria-current] {
    font-weight:700;
}

.games-language a:focus-visible {
    outline:2px solid currentColor;
    outline-offset:2px;
}

.games-eyebrow {
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.16em;
    font-weight:700;
    color:var(--text-link);
}

.games-shell h1 {
    font-family:Montserrat,var(--font-family);
    font-size:clamp(2rem,5vw,3.7rem);
    letter-spacing:-.04em;
    line-height:1.1;
    margin:14px 0 20px;
}

.games-shell h2 {
    font-family:Montserrat,var(--font-family);
    font-size:clamp(1.4rem,4vw,2.1rem);
    line-height:1.25;
}

.games-lead {
    font-size:1.1rem;
    color:var(--text-muted);
    line-height:1.7;
    max-width:640px;
}

.games-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    margin-top:32px;
}

.game-card,.ballpark-card {
    background:var(--surface-alt);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:clamp(20px,4vw,40px);
}

.game-card {
    display:flex;
    flex-direction:column;
    align-items:start;
}

.game-card p {
    color:var(--text-muted);
    line-height:1.6;
    flex:1;
}

.game-card-icon {
    font-size:2.2rem;
}

.game-card-status {
    font-size:.8rem;
    color:var(--text-muted);
    border:1px solid var(--border);
    border-radius:var(--radius-pill);
    padding:6px 12px;
}

.games-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    border:1px solid transparent;
    border-radius:var(--radius-pill);
    background:#002246;
    color:#fff;
    padding:12px 24px;
    font:600 1rem var(--font-family);
    text-decoration:none;
    cursor:pointer;
}

.games-button.secondary {
    background:var(--surface);
    border-color:var(--border);
    color:var(--text);
}

.games-button:disabled {
    opacity:.6;
    cursor:wait;
}

.games-shell :focus-visible {
    outline:3px solid var(--text-link);
    outline-offset:4px;
}

.ballpark-hero {
    background:linear-gradient(145deg,#002246,#073e66);
    color:white;
    border-radius:var(--radius-md);
    padding:clamp(24px,5vw,48px);
}

.ballpark-hero .games-lead {
    color:#d8e7f5;
}

.ballpark-hero .games-button {
    background:white;
    color:#002246;
}

.ballpark-stats {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:28px 0;
}

.ballpark-stats span {
    border:1px solid #ffffff50;
    border-radius:var(--radius-pill);
    padding:9px 14px;
    font-size:.85rem;
}

.ballpark-rules {
    color:var(--text-muted);
    line-height:1.7;
    margin-top:24px;
}

.ballpark-progress {
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-weight:700;
    color:var(--text-muted);
}

.ballpark-dots {
    display:flex;
    gap:6px;
    margin:18px 0 30px;
}

.ballpark-dots span {
    height:5px;
    background:var(--border);
    flex:1;
    border-radius:10px;
}

.ballpark-dots span.done {
    background:var(--text-link);
}

.ballpark-year {
    color:var(--text-muted);
    font-size:1rem;
}

.ballpark-amount {
    display:block;
    font-size:clamp(2.4rem,8vw,4rem);
    font-weight:800;
    color:var(--text-link);
    margin:24px 0;
    text-align:center;
    font-variant-numeric:tabular-nums;
}

.ballpark-control {
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 48px;
    gap:16px;
    align-items:center;
    margin-bottom:8px;
}

.ballpark-control button {
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-size:1.6rem;
    cursor:pointer;
}

.ballpark-control input {
    width:100%;
    accent-color:var(--text-link);
    height:36px;
}

.ballpark-limits {
    display:flex;
    justify-content:space-between;
    color:var(--text-muted);
    font-size:.8rem;
    margin:0 64px 28px;
}

.ballpark-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:28px;
}

.ballpark-error {
    padding:16px;
    border-left:4px solid var(--red);
    background:var(--surface);
    line-height:1.6;
    margin:20px 0;
}

.ballpark-error:empty {
    display:none;
}

.ballpark-values {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin:24px 0;
}

.ballpark-values p {
    padding:18px;
    border-radius:var(--radius-md);
    background:var(--surface);
    margin:0;
}

.ballpark-values strong {
    display:block;
    font-size:clamp(1.3rem,4vw,2rem);
    margin-top:10px;
}

.ballpark-track {
    position:relative;
    height:10px;
    border-radius:10px;
    background:var(--border);
    margin:40px 12px 65px;
}

.ballpark-marker {
    position:absolute;
    top:-6px;
    height:22px;
    width:5px;
    background:var(--text-link);
    transform:translateX(-50%);
}

.ballpark-marker.actual {
    background:var(--green);
    top:-13px;
    height:36px;
}

.ballpark-scale-labels {
    color:var(--text-muted);
    font-size:.85rem;
    line-height:1.8;
}

.ballpark-scale-labels span {
    display:inline-block;
    margin-right:20px;
}

.ballpark-legend-estimate {
    color:var(--text-link);
}

.ballpark-legend-actual {
    color:var(--green);
}

.ballpark-score {
    font-size:clamp(3rem,9vw,5rem);
    font-weight:800;
    color:var(--text-link);
    margin:24px 0 8px;
}

.ballpark-symbols {
    font-size:clamp(1.6rem,6vw,2.6rem);
    letter-spacing:.12em;
    margin:20px 0;
}

.ballpark-summary {
    display:grid;
    gap:14px;
    margin-top:24px;
}

.ballpark-summary article {
    padding:20px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
}

.ballpark-summary h3 {
    margin:0 0 12px;
}

.ballpark-summary p {
    line-height:1.8;
    margin:6px 0;
}

.ballpark-share-text {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font:inherit;
    line-height:1.7;
    background:var(--surface);
    padding:20px;
    border-radius:var(--radius-md);
}

.ballpark-notice {
    min-height:1.5em;
    color:var(--text-muted);
}

@media(max-width:600px) {
    .games-grid {
        grid-template-columns:1fr;
    }

    .ballpark-values {
        grid-template-columns:1fr;
    }

    .ballpark-control {
        gap:10px;
    }

    .ballpark-actions .games-button {
        width:100%;
    }

    .games-shell {
        margin-top:8px;
    }

    .ballpark-limits {
        margin-left:58px;
        margin-right:58px;
    }

    .games-top {
        align-items:start;
    }

}

/* The original key visual is always displayed in full, never as a cropped cover. */
.ballpark-key-visual {
    width: 100%;
    background: #07111e;
    overflow: hidden;
}

.ballpark-key-visual img {
    display: block;
    width: 100%;
    height: auto;
}

.ballpark-key-visual--card {
    aspect-ratio: 16 / 9;
    border-radius: 9px;
    margin-bottom: 8px;
}

.ballpark-key-visual--card img {
    height: 100%;
    object-fit: contain;
}

/* Overview-only adjustments; the game and preview cards retain their styles. */
#games-index { margin-top: 12px; }
#games-index .games-top { justify-content: flex-end; margin-bottom: 12px; }
#games-index .games-index-heading { text-align: center; }
#games-index .games-index-heading h1 { margin: 0 0 12px; }
#games-index .games-index-heading .games-lead { margin: 0 auto; }
#games-index .games-grid { margin-top: 24px; align-items: stretch; }
#games-index .games-grid--single { grid-template-columns: minmax(0, calc((100% - 20px) / 2)); justify-content: center; }
#games-index .game-card--ballpark .ballpark-key-visual--card { aspect-ratio: auto; background: transparent; margin-bottom: 0; }
#games-index .game-card--ballpark .ballpark-key-visual--card img { height: auto; }
#games-index .game-card--ballpark > p { margin: 12px 0 16px; width: 100%; text-align: center; }
#games-index .game-card--ballpark > .games-button { align-self: center; }
#games-index .games-index-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 600px) {
    #games-index { margin-top: 0; }
    #games-index .games-grid--single { grid-template-columns: minmax(0, 1fr); }
}