/* Standalone event page: intentionally does not require the theme asset build. */
body.beef-playoffs-page { margin: 0; background: #2d2926; color: #fff; }
body.beef-playoffs-page #hcg-float { display: none !important; }
.playoffs { --red: #d6202b; --navy: #103750; --gold: #eabb28; min-height: 100vh; padding-bottom: 110px; font-family: 'Montserrat', sans-serif; font-size: 1rem; background: #2d2926 url('../images/beef-playoffs/beef-brackets-background.jpg') center top / cover no-repeat; }
.playoffs *, .playoffs *::before, .playoffs *::after { box-sizing: border-box; }
.playoffs [hidden] { display: none !important; }
.playoffs-banner { padding: 25px 20px; background: var(--navy); text-align: center; font-size: 1.25rem; font-weight: 700; }
.playoffs-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 2400px; margin: auto; padding: 48px 64px; align-items: stretch; }
.playoffs-center { grid-column: 4; grid-row: 1; text-align: center; padding: 0 8px; display: flex; align-items: center; flex-direction: column; }
/* SVG is 150 units wide; the main logo spans x=3.21–133.87.
   Center that artwork (68.54), allowing the trademark to extend to the right. */
.playoffs-logo { display: block; width: 160px; max-width: 100%; height: auto; transform: translateX(4.3067%); }
.playoffs h1 { color: #fff; font-family: 'Oswald', sans-serif; font-size: 4.375rem; font-weight: 700; line-height: .98; letter-spacing: 1px; margin: 35px 0; }
.playoffs-center > p, .playoffs-vote-online { font-size: 1.5rem; font-weight: 700; line-height: 1.4; }
.playoffs .playoffs-tagline { margin-top: 60px; font-size: 2rem; line-height: 1.2; }
.playoffs #playoffs-intro { max-width: 19rem; margin: 20px 0 0; }
.playoffs-stage { min-width: 0; display: flex; flex-direction: column; }
.playoffs .playoffs-round-heading { display: flex; flex-direction: column; gap: 8px; color: #ed2935; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.2; min-height: 58px; margin: 0 0 20px; }
.playoffs-round-title { color: #fff; font-size: 1.125rem; font-weight: 700; text-transform: uppercase; }
.playoffs-round-name { font-size: 1.5rem; font-weight: 700; }
.playoffs-stage.is-open .playoffs-round-name { text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--gold); }
.playoffs-matches { display: flex; flex: 1; flex-direction: column; justify-content: space-around; gap: 36px; }
.playoffs-round-1.playoffs-left { grid-column: 1; grid-row: 1; }
.playoffs-round-2.playoffs-left { grid-column: 2; grid-row: 1; padding-top: 100px; padding-bottom: 80px; }
.playoffs-round-3.playoffs-left { grid-column: 3; grid-row: 1; padding-top: 230px; padding-bottom: 220px; }
.playoffs-round-1.playoffs-right { grid-column: 7; grid-row: 1; }
.playoffs-round-2.playoffs-right { grid-column: 6; grid-row: 1; padding-top: 100px; padding-bottom: 80px; }
.playoffs-round-3.playoffs-right { grid-column: 5; grid-row: 1; padding-top: 230px; padding-bottom: 220px; }
.playoffs-bracket-group { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 48px; min-width: 0; }
.playoffs-round-1 .playoffs-matches { gap: 72px; }
.playoffs .playoffs-group { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 42px; margin: 0; border: 0; box-shadow: none; padding: 16px 0; background: var(--navy); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 1.125rem; line-height: 1.2; letter-spacing: .08em; writing-mode: vertical-rl; white-space: nowrap; }
.playoffs-left .playoffs-group { left: -64px; transform: rotate(180deg); }
.playoffs-right .playoffs-group { right: -64px; }
.playoffs-match { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; position: relative; min-width: 0; }
.playoffs-left .playoffs-match::after, .playoffs-right .playoffs-match::after { content: ''; position: absolute; width: 15px; top: 49px; bottom: 49px; border: 2px solid var(--gold); pointer-events: none; }
.playoffs-left .playoffs-match::after { right: -15px; border-left: 0; }
.playoffs-right .playoffs-match::after { left: -15px; border-right: 0; }
.playoffs-left .playoffs-match::before, .playoffs-right .playoffs-match::before { content: ''; position: absolute; top: 50%; width: 15px; height: 2px; margin-top: -1px; background: var(--gold); pointer-events: none; }
.playoffs-left .playoffs-match::before { right: -30px; }
.playoffs-right .playoffs-match::before { left: -30px; }
.playoffs-dish { position: relative; display: flex; align-items: center; gap: 9px; margin: 0; padding: 8px; min-height: 100px; color: #181818; background: #fff; border: 3px solid #d6d6d6; border-radius: 4px; box-shadow: 0 3px 6px #0008; overflow-wrap: anywhere; }
.playoffs-dish.is-votable { cursor: pointer; border-color: #fff; }
.playoffs-dish.is-votable:hover { border-color: #7dc334; }
.playoffs-dish.is-selected, .playoffs-dish.is-winner { border-color: #7dc334; }
.playoffs-dish:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.playoffs-dish input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.playoffs-dish-media { width: 40%; max-width: 90px; height: 78px; object-fit: cover; flex-shrink: 0; border-radius: 2px; }
.playoffs-dish-media { position: relative; display: block; }
.playoffs-dish-media img { display: block; width: 100%; max-width: none; object-fit: cover; border-radius: 2px; }
.playoffs-placeholder { background: #ccc url('../images/beef-playoffs/icon-unknown.svg') center / 70% 70% no-repeat; }
.playoffs-dish.is-rejected { border-color: var(--red); }
.playoffs-dish:is(.is-selected, .is-winner, .is-rejected, .is-loser) .playoffs-dish-media::after { content: ''; position: absolute; inset: 0; background: center / 85% 85% no-repeat; pointer-events: none; }
.playoffs-dish:is(.is-selected, .is-winner) .playoffs-dish-media::after { background-image: url('../images/beef-playoffs/icon-check.svg'); }
.playoffs-dish:is(.is-rejected, .is-loser) .playoffs-dish-media::after { background-image: url('../images/beef-playoffs/icon-reject.svg'); }
.playoffs-dish-copy { display: flex; flex-direction: column; gap: 5px; font-size: .875rem; line-height: 1.3; }
.playoffs-count { color: #666; font-weight: 400; font-size: .75rem; text-transform: uppercase; }
.playoffs-winner { color: #326613; font-size: .75rem; }
.playoffs-stage.is-pending .playoffs-dish { border-color: #ccc; }
#playoffs-final { width: 100%; margin-top: 45px; }
.playoffs-final .playoffs-round-heading { margin-bottom: 22px; }
.playoffs-final .playoffs-match { flex-direction: row; gap: 16px; }
.playoffs-final .playoffs-dish { flex: 1; min-width: 0; }
.playoffs-right .playoffs-dish, .playoffs-final .playoffs-dish:last-child { flex-direction: row-reverse; }
.playoffs .playoffs-dish-copy strong { font-size: .875rem; font-weight: 700; }
.playoffs-site-link { display: inline-block; border: 2px solid var(--red); border-radius: 40px; padding: 10px 24px; color: #fff; font-size: 1.25rem; font-weight: 700; line-height: 1.2; text-decoration: none; }
.playoffs-site-link:hover, .playoffs-site-link:focus-visible { color: #fff; background: var(--red); }
.playoffs :is(h2, h3, p, button, label) { font-family: 'Montserrat', sans-serif; }
.playoffs fieldset { border: 0; }
.playoffs .playoffs-dish img { height: 78px !important; } /* Override the global theme image-height rule. */
.playoffs-feedback { text-align: center; padding: 12px 20px; min-height: 30px; }
.playoffs-confirmation { text-align: center; padding: 30px 20px; margin: 20px auto; max-width: 800px; background: var(--navy); border-radius: 8px; }
.playoffs-confirmation h2 { color: #fff; font-size: 1.5rem; font-weight: 700; }
.playoffs button { border: 0; border-radius: 40px; padding: 14px 30px; font: inherit; font-weight: 700; color: #8c1118; background: #fff; cursor: pointer; }
.playoffs button:disabled { cursor: default; opacity: .55; }
.playoffs button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.playoffs-vote-bar { position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 25px; padding: 20px; background: var(--red); font-size: 1.5rem; font-weight: 700; }
.playoffs-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* Desktop geometry: 201×100 cards; 12px within a pair, 50px between
   pairs in one category, and 67px between categories. Each later card
   is centered on its two feeders, independent of viewport height. */
.playoffs-bracket-scroll { width: 100%; overflow-x: auto; }
.playoffs .playoffs-group::before, .playoffs .playoffs-group::after { content: none; display: none; }
.playoffs-center-footer { display: flex; flex-direction: column; align-items: center; width: 100%; }
.playoffs .playoffs-qr { display: block; width: 8rem; max-width: 100%; height: auto; flex-shrink: 0; margin: 0 0 2rem; background: #fff; }
@media (min-width: 1201px) {
    .playoffs-board {
        --card-width: 201px;
        --card-height: 100px;
        --column-gap: 30px;
        --pair-gap: 12px;
        --match-gap: 50px;
        --category-gap: 67px;
        --heading-space: 100px;
        /* A category is two pairs: (100 + 12 + 100) * 2 + 50 = 474. */
        --pair-height: calc(2 * var(--card-height) + var(--pair-gap));
        --category-height: calc(2 * var(--pair-height) + var(--match-gap));
        --tree-height: calc(2 * var(--category-height) + var(--category-gap));
        --round-2-offset: calc((var(--card-height) + var(--pair-gap)) / 2);
        --round-2-card-gap: calc(var(--card-height) + var(--pair-gap) + var(--match-gap));
        --round-2-pair-gap: calc(var(--card-height) + var(--pair-gap) + var(--category-gap));
        --round-3-offset: calc((var(--category-height) - var(--card-height)) / 2);
        --round-3-card-gap: calc(var(--category-height) + var(--category-gap) - var(--card-height));
        --final-offset: calc((var(--tree-height) - var(--card-height)) / 2);
        width: 100%;
        min-width: 1920px;
        max-width: 1920px;
        margin: 0 auto;
        padding: 48px 51px;
        grid-template-columns: repeat(3, var(--card-width)) minmax(432px, 1fr) repeat(3, var(--card-width));
        column-gap: var(--column-gap);
    }
    .playoffs-stage { position: relative; padding: var(--heading-space) 0 0; }
    .playoffs .playoffs-round-heading { position: absolute; top: 0; left: 0; right: 0; margin: 0; }
    .playoffs-round-1 .playoffs-matches { gap: var(--category-gap); }
    .playoffs-matches { flex: none; justify-content: flex-start; }
    .playoffs-bracket-group { flex: none; height: var(--category-height); gap: var(--match-gap); }
    .playoffs-match { gap: var(--pair-gap); }
    .playoffs .playoffs-dish { width: var(--card-width); height: var(--card-height); min-height: var(--card-height); flex: none; }
    .playoffs-round-2.playoffs-left, .playoffs-round-2.playoffs-right,
    .playoffs-round-3.playoffs-left, .playoffs-round-3.playoffs-right { padding: var(--heading-space) 0 0; }
    .playoffs-round-2 .playoffs-round-heading { top: var(--round-2-offset); }
    .playoffs-round-2 .playoffs-matches { padding-top: var(--round-2-offset); gap: var(--round-2-pair-gap); }
    .playoffs-round-2 .playoffs-match { gap: var(--round-2-card-gap); }
    .playoffs-round-3 .playoffs-round-heading { top: var(--round-3-offset); }
    .playoffs-round-3 .playoffs-matches { padding-top: var(--round-3-offset); }
    .playoffs-round-3 .playoffs-match { gap: var(--round-3-card-gap); }
    .playoffs-left .playoffs-group { left: -51px; }
    .playoffs-right .playoffs-group { right: -51px; }
    .playoffs-center { position: relative; padding: 0; min-height: calc(var(--heading-space) + var(--tree-height) + 160px); }
    #playoffs-final { position: absolute; top: var(--final-offset); left: 0; right: 0; margin: 0; }
    .playoffs-final .playoffs-match { justify-content: space-between; gap: var(--column-gap); }
    .playoffs-center-footer { position: absolute; top: calc(var(--heading-space) + var(--final-offset) + var(--card-height) + 60px); }
    .playoffs .playoffs-tagline { margin: 0 0 64px; }
}
@media (max-width: 1200px) {
    .playoffs-left .playoffs-match::before, .playoffs-right .playoffs-match::before,
    .playoffs-left .playoffs-match::after, .playoffs-right .playoffs-match::after { display: none; }
    .playoffs-board { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; gap: 32px; padding: 28px 52px; }
    .playoffs-center { grid-column: 1 / -1; grid-row: 1; }
    .playoffs-center h1 { font-size: 3.75rem; margin: 24px 0; }
    .playoffs-logo { width: 100px; }
    .playoffs .playoffs-tagline { font-size: 1.75rem; margin-top: 32px; }
    .playoffs .playoffs-group { width: 32px; font-size: .875rem; }
    .playoffs-left .playoffs-group { left: -44px; }
    .playoffs-right .playoffs-group { right: -44px; }
    #playoffs-final { max-width: 500px; margin-top: 12px; }
    .playoffs-final .playoffs-match { flex-direction: row; }
    .playoffs-final .playoffs-dish { flex: 1; }
    .playoffs-round-1.playoffs-left, .playoffs-round-2.playoffs-left, .playoffs-round-3.playoffs-left { grid-column: 1; padding: 0; }
    .playoffs-round-1.playoffs-right, .playoffs-round-2.playoffs-right, .playoffs-round-3.playoffs-right { grid-column: 2; padding: 0; }
    .playoffs-round-1.playoffs-left, .playoffs-round-1.playoffs-right { grid-row: 2; }
    .playoffs-round-2.playoffs-left, .playoffs-round-2.playoffs-right { grid-row: 3; }
    .playoffs-round-3.playoffs-left, .playoffs-round-3.playoffs-right { grid-row: 4; }
    .playoffs-matches { gap: 24px; }
    .playoffs-dish-copy { font-size: .875rem; }
    .playoffs .playoffs-round-heading { min-height: 0; }
    .playoffs-round-name { font-size: 1.3125rem; }
}
@media (max-width: 540px) {
    .playoffs-board { gap: 24px 14px; padding: 24px 38px; }
    .playoffs .playoffs-dish { flex-direction: column; align-items: stretch; padding: 6px; min-height: 154px; }
    .playoffs-dish-media { width: 100%; max-width: none; height: 85px; }
    .playoffs-dish-copy { font-size: .8125rem; }
    .playoffs .playoffs-group { width: 26px; font-size: .75rem; }
    .playoffs-left .playoffs-group { left: -32px; }
    .playoffs-right .playoffs-group { right: -32px; }
    .playoffs-round-1 .playoffs-matches { gap: 36px; }
    .playoffs-bracket-group { gap: 24px; }
    .playoffs-round-name { font-size: 1.0625rem; }
    .playoffs-round-title { font-size: .875rem; }
    .playoffs .playoffs-dish img { height: 85px !important; }
    .playoffs-vote-bar { padding: 12px; gap: 12px; font-size: .875rem; }
    .playoffs button { padding: 12px 18px; }

}

/* Completed results remain readable but visually distinct from active voting. */
.playoffs-stage.is-completed .playoffs-dish { background: #dedede; border-color: #aaa; color: #555; filter: grayscale(1); }
.playoffs-stage.is-completed .playoffs-round-name { color: #aaa; }

/* Keep advancement visible even after a round is complete. */
.playoffs-stage.is-completed .playoffs-dish.is-winner { border-color: #78be20; filter: none; }
.playoffs-stage.is-completed .playoffs-dish.is-loser { border-color: var(--red); filter: none; }
.playoffs-stage.is-completed .playoffs-dish.is-loser img { filter: grayscale(1); }
.playoffs-stage.is-completed:not(.playoffs-final) .playoffs-dish.is-winner img { filter: grayscale(1); }
.playoffs-final.is-completed .playoffs-dish.is-winner { background: #fff; color: #181818; }
.playoffs-champion-label, .playoffs-champion-name { display: block; }
.playoffs-champion-label { color: #78be20; font-size: 1.5rem; font-weight: 700; }
.playoffs-champion-name { margin-top: .75rem; font-size: 2rem; font-weight: 700; }

/* The theme's default link underline must not decorate the brand artwork. */
.playoffs .playoffs-logo-link,
.playoffs .playoffs-logo-link:hover,
.playoffs .playoffs-logo-link:focus { border: 0; box-shadow: none; background: none; text-decoration: none; }
.playoffs-logo-link::before, .playoffs-logo-link::after { content: none; }
.playoffs-versus { display: none; }

@media (max-width: 767px) {
    .playoffs-center-footer { display: none; }
    .playoffs { background: #000; }
    .playoffs-board { display: flex; flex-direction: column; max-width: 100%; gap: 40px; padding: 28px 16px; }
    .playoffs-center { order: 0; }
    .playoffs-round-1.playoffs-left { order: 1; }
    .playoffs-round-1.playoffs-right { order: 2; }
    .playoffs-round-2.playoffs-left { order: 3; }
    .playoffs-round-2.playoffs-right { order: 4; }
    .playoffs-round-3.playoffs-left { order: 5; }
    .playoffs-round-3.playoffs-right { order: 6; }
    .playoffs-stage { width: 100%; }
    .playoffs-matches, .playoffs-round-1 .playoffs-matches { gap: 40px; }
    .playoffs-bracket-group { gap: 0; }
    .playoffs .playoffs-group {
        position: static; width: 100%; min-height: 44px; margin: 0 0 24px;
        padding: 10px 12px; writing-mode: horizontal-tb; transform: none;
        font-size: 1.25rem; letter-spacing: .1em; white-space: normal; text-align: center;
    }
    .playoffs-match-wrap + .playoffs-match-wrap { border-top: 2px dashed #888; margin-top: 24px; padding-top: 24px; }
    .playoffs .playoffs-match { flex-direction: column; align-items: center; gap: 0; }
    .playoffs .playoffs-dish {
        flex: none; flex-direction: row; align-items: center; width: 100%; max-width: 250px;
        min-height: 120px; padding: 7px; gap: 10px; text-align: left;
    }
    .playoffs-dish-media { width: 44%; max-width: 100px; height: 100px; }
    .playoffs .playoffs-dish img { height: 100px !important; }
    .playoffs-dish-copy { flex: 1; min-width: 0; }
    .playoffs .playoffs-dish-copy strong { font-size: .875rem; }
    .playoffs-count { font-size: .75rem; }
    .playoffs-versus {
        display: flex; align-items: center; gap: 14px; width: 100%; max-width: 250px;
        margin: 16px 0; color: var(--red); font-size: 1rem; font-weight: 700; line-height: 1.3;
    }
    .playoffs-versus::before, .playoffs-versus::after { content: ''; flex: 1; height: 2px; background: var(--gold); }
}

/* Fit inside the available viewport, including a classic Windows scrollbar. */
@media (min-width: 1201px) {
    .playoffs-board {
        --card-width: clamp(190px, calc((100vw - 709px) / 6), 201px);
        width: 100%; min-width: 1858px; max-width: 1920px;
        grid-template-columns: repeat(3, var(--card-width)) minmax(432px, 1fr) repeat(3, var(--card-width));
        padding-left: 40px; padding-right: 40px;
    }
    .playoffs-left .playoffs-group { left: -40px; width: 32px; }
    .playoffs-right .playoffs-group { right: -40px; width: 32px; }
}
.playoffs-stage.is-completed .playoffs-dish.is-winner { opacity: 1; }
.playoffs-stage.is-completed .playoffs-dish.is-loser { opacity: .4; }
.playoffs-final.is-completed .playoffs-dish.is-winner { opacity: 1; }
.playoffs-banner { display: flex; align-items: center; justify-content: center; gap: 20px; }
.playoffs-banner > span { flex: 1; }
.playoffs #playoffs-how-to { flex-shrink: 0; font-size: 1rem; padding: 10px 20px; }
#playoffs-errors:empty { display: none; }
#playoffs-errors { font-size: .875rem; max-width: 35rem; }
.playoffs-modal { border: 0; border-radius: 8px; padding: 36px; width: min(620px, calc(100% - 32px)); max-height: 85vh; overflow-y: auto; background: #fff; color: #2d2926; }
.playoffs-modal::backdrop { background: #000b; }
.playoffs .playoffs-modal h2, .playoffs .playoffs-modal h3 { color: #2d2926; font-weight: 700; }
.playoffs .playoffs-modal button { background: var(--red); color: #fff; }
.playoffs .playoffs-modal-close { float: right; padding: 4px 12px; font-size: 1.5rem; }
.playoffs-form-placeholder { padding: 40px 20px; margin: 20px 0; background: #eee; border: 2px dashed #aaa; text-align: center; }
#playoffs-champion-art { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; }
.playoffs-trophy { display: block; width: 10rem; max-width: 100%; height: auto; margin-bottom: 1rem; }
.playoffs-champion-card { display: flex; align-items: center; gap: 12px; width: 260px; max-width: 100%; padding: 8px; margin-bottom: 24px; border: 3px solid #78be20; border-radius: 4px; background: #fff; color: #181818; text-align: left; box-shadow: 0 3px 6px #0008; }
.playoffs-champion-media { display: block; flex: 0 0 90px; height: 90px; border-radius: 2px; overflow: hidden; }
.playoffs #playoffs-champion-image { display: block; width: 100%; height: 90px !important; object-fit: cover; }
#playoffs-champion-name { font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
@media (max-width: 767px) {
    .playoffs-center-footer.has-champion { display: flex; }
}
@media (min-width: 1201px) {
    .playoffs-center.has-champion { min-height: calc(var(--heading-space) + var(--tree-height) + 300px); }
}
.playoffs-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.playoffs-confetti i { position: absolute; top: -20px; left: var(--x); width: 8px; height: 14px; animation: playoffs-fall 3s var(--delay) ease-in forwards; }
@keyframes playoffs-fall { to { transform: translateY(110vh) rotate(600deg); } }
@media (max-width: 767px) {
    .playoffs-banner { flex-direction: column; font-size: 1.125rem; }
    .playoffs-modal { padding: 24px; }
    .playoffs-vote-bar {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        text-align: center;
        gap: 10px;
        /* Keep controls clear of the chat launcher without shifting their center. */
        padding: 12px 72px calc(12px + env(safe-area-inset-bottom, 0px));
        font-size: .875rem;
    }
    .playoffs-vote-bar > * { max-width: 100%; }
    .playoffs { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
}

/* Reuse theme modal content, header, body, radius and close-icon styling.
   Native dialog supplies focus management and Escape-to-close. */
.playoffs-site-modal { padding: 0; border: 0; width: min(570px, calc(100% - 32px)); max-height: none; overflow: visible; background: transparent; color: #2d2926; }
.playoffs-site-modal::backdrop { background: #2d2926; }
.playoffs-site-modal .modal__content { max-height: calc(100dvh - 60px); }
.playoffs .playoffs-site-modal .modal__close { padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; }
.playoffs-site-modal .modal__header { padding-right: 1.5rem; }
.playoffs-site-modal h2, .playoffs-site-modal h3 { color: #2d2926; font-weight: 700; }

/* Mobile and tablet focus on the current ballot; desktop retains the complete bracket. */
.playoffs-mobile-reminder { display: none; }
@media (max-width: 1200px) {
    .playoffs-stage:not(.is-open),
    #playoffs-final:not(.is-active),
    .playoffs .playoffs-qr,
    .playoffs .playoffs-site-link,
    .playoffs:not(.has-open-round) #playoffs-intro { display: none; }
    .playoffs-center-footer:not(.has-champion) { display: none; }
    .playoffs-mobile-reminder {
        display: block; order: 7; margin: 0; padding: 20px 16px;
        background: var(--navy); border-radius: 4px; text-align: center;
        font-size: 1rem; font-weight: 700; line-height: 1.5;
    }
}
@media (min-width: 768px) and (max-width: 1200px) {
    .playoffs-center {
        display: grid;
        grid-template-columns: 100px auto;
        justify-content: center;
        justify-items: center;
        column-gap: 24px;
    }
    .playoffs-center > .playoffs-logo-link { grid-column: 1; grid-row: 1; }
    .playoffs-center > h1 { grid-column: 2; grid-row: 1; margin: 0; }
    .playoffs-center > h1 br { display: none; }
    .playoffs-center > #playoffs-intro,
    .playoffs-center > #playoffs-final,
    .playoffs-center > .playoffs-center-footer { grid-column: 1 / -1; }
    .playoffs-stage.playoffs-left.is-open,
    .playoffs-stage.playoffs-right.is-open { grid-row: 2; }
    .playoffs-mobile-reminder { grid-column: 1 / -1; grid-row: 3; }
}

/* Equal side columns keep banner copy centered on the viewport, not the
   space remaining beside the instructions button. */
@media (min-width: 768px) {
    .playoffs-banner { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 10rem; }
    .playoffs-banner > span { grid-column: 2; grid-row: 1; min-width: 0; }
    .playoffs #playoffs-how-to { grid-column: 3; grid-row: 1; justify-self: end; }
}