/**
 * Platform pages (/windows, /android, /ios; CMS pages windows, android, ios): the version hero on top of the
 * theme's .bb-page / .bb-btn / .bb-card / .bb-note / .bb-rivets (bb-pages.css). Own file (server
 * pub/media/platforms/platforms.css) so no Tailwind rebuild is needed; bump ?v= in the pages after a change.
 * The version numbers are {{block}}s (Mgwalk_GameDownload::version.phtml); the footer's script refreshes Windows.
 */
.bb-plat-hero {
    display: grid; gap: 1.25rem; align-items: center;
    margin: 0 0 1.75rem; padding: 1.5rem 1.4rem; border-radius: 12px;
    border: 1px solid var(--color-bb-line, #2a3756);
    background:
        radial-gradient(40rem 14rem at 100% 0%, rgb(245 158 11 / .12), transparent 65%),
        linear-gradient(135deg, #16203a 0%, #0e1424 75%);
}
@media (min-width: 48rem) { .bb-plat-hero { grid-template-columns: minmax(0, 1fr) auto; padding: 2rem; } }
.bb-plat-hero h2 { margin: 0 0 .5rem; }
.bb-plat-hero .bb-lede { margin: 0; }
.bb-plat-ver {
    display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 11rem;
    padding: .9rem 1.2rem; border-radius: 8px; text-align: center;
    border: 1px solid var(--color-bb-line, #2a3756); background: var(--color-bb-panel-2, #1d2844);
}
.bb-plat-ver-label { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-bb-muted, #9aa6c0); }
.bb-plat-ver-num { font-family: var(--font-mono, monospace); font-size: 1.6rem; line-height: 2rem; color: var(--color-bb-amber, #f59e0b); overflow-wrap: anywhere; }
.bb-plat-ver-note { font-size: .85rem; color: var(--color-bb-muted, #9aa6c0); }
.bb-plat-specs { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.bb-plat-specs th, .bb-plat-specs td { text-align: left; vertical-align: top; padding: .55rem .75rem; border-bottom: 1px solid var(--color-bb-line, #2a3756); }
.bb-plat-specs th { width: 34%; font-family: var(--font-display, sans-serif); font-weight: 600; color: var(--color-bb-muted, #9aa6c0); }
@media (max-width: 30rem) {
    .bb-plat-specs th, .bb-plat-specs td { display: block; width: auto; }
    .bb-plat-specs th { border-bottom: 0; padding-bottom: 0; }
}