.goalie-board {
    max-width: 1200px;
    margin: 0 auto;
}

.status-summary {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
}

.status-summary h2 {
    margin: 0 0 10px 0;
    color: #fff !important;
    font-size: 1.5em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.sub-needed-alert {
    background-color: #dc3545;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    display: inline-block;
    font-weight: bold;
    animation: pulse 2s infinite;
}

.sub-needed-alert.none {
    background-color: #28a745;
    animation: none;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.week-section {
    margin-bottom: 40px;
}

.week-header {
    background: #333;
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.week-header h3 {
    margin: 0;
}

.week-header .division-badge {
    background: #007bff;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85em;
}

.matchups-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.matchups-table th {
    background: #f8f9fa;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
}

.matchups-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.matchups-table tr:last-child td {
    border-bottom: none;
}

.matchups-table tr:hover {
    background-color: #f8f9fa;
}

.team-cell {
    font-weight: 500;
}

.goalie-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.goalie-name {
    font-weight: 500;
}

.goalie-name.is-sub {
    color: #007bff;
}

.sub-badge {
    background: #007bff;
    color: white;
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.status-badge {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: 500;
    display: inline-block;
}

.status-badge.confirmed {
    background-color: #d4edda;
    color: #155724;
}

.status-badge.sub-needed {
    background-color: #f8d7da;
    color: #721c24;
    animation: pulse 2s infinite;
}

.status-badge.unconfirmed {
    background-color: #fff3cd;
    color: #856404;
}

.time-cell {
    color: #666;
    font-size: 0.9em;
}

.no-matchups {
    text-align: center;
    padding: 40px;
    color: #666;
}

.legend {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.captain-panel {
    max-width: 900px;
    margin: 0 auto;
}

.team-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    text-align: center;
    color: #fff;
}

.team-header h2 {
    margin: 0 0 10px 0;
    font-size: 2.2em;
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    letter-spacing: 1px;
}

.team-header p {
    margin: 0;
    opacity: 0.8;
}

.roster-goalie-info {
    background: rgba(255,255,255,0.1);
    padding: 10px 20px;
    border-radius: 20px;
    display: inline-block;
    margin-top: 15px;
}

.matchup-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    overflow: hidden;
}

.matchup-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.matchup-date {
    font-weight: 600;
    color: #333;
}

.matchup-opponent {
    color: #666;
}

.matchup-opponent strong {
    color: #333;
}

.matchup-body {
    padding: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-group {
    flex: 1;
    min-width: 200px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 1em;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
}

.form-group select:focus {
    outline: none;
    border-color: #007bff;
}

.form-group select:hover {
    border-color: #999;
}

.btn-update {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 120px;
}

.btn-update:hover {
    background: #0056b3;
}

.btn-update:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.btn-update.saving {
    background: #6c757d;
}

.btn-update.saved {
    background: #28a745;
}

.current-status {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}

.current-status-label {
    color: #666;
}

.help-text {
    background: #e7f3ff;
    border-left: 4px solid #007bff;
    padding: 15px 20px;
    margin-bottom: 30px;
    border-radius: 0 8px 8px 0;
}

.help-text h4 {
    margin: 0 0 10px 0;
    color: #0056b3;
}

.help-text ul {
    margin: 0;
    padding-left: 20px;
}

.help-text li {
    margin-bottom: 5px;
}

.update-feedback {
    display: none;
    margin-left: 10px;
    font-size: 0.9em;
}

.update-feedback.success {
    color: #28a745;
}

.update-feedback.error {
    color: #dc3545;
}

@media (max-width: 768px) {
    .matchups-table {
        font-size: 0.9em;
    }

    .matchups-table th,
    .matchups-table td {
        padding: 10px 8px;
    }

    .goalie-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
    }

    .form-group {
        width: 100%;
    }

    .btn-update {
        width: 100%;
    }
}

/* ── Messages (after a board or captain action) ───────────────────────── */

.site-messages { margin: 0 0 16px; }
.site-message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.45;
    background: #e7f3ff;
    border-left: 4px solid #007bff;
    color: #1f2937;
}
.site-message.success { background: #d4edda; border-left-color: #28a745; }
.site-message.error { background: #f8d7da; border-left-color: #dc3545; }
.site-message.info { background: #fff3cd; border-left-color: #ffc107; }

/* ── Board: summary ───────────────────────────────────────────────────── */

.board-intro {
    margin: 12px auto 0;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.5;
}
.board-intro strong { color: #fff; }
.unconfirmed-note {
    margin: 12px auto 0;
    max-width: 640px;
    color: #ffe08a;
    font-size: 15px;
    line-height: 1.4;
}
.unconfirmed-note strong { color: #fff; }

/* The games-needing-a-sub list (base styles in schedule.css, shared with
   the Schedule page) on the board's dark summary panel. */
/* `#content` keeps these ahead of schedule.css's light `#content` rules. */
.status-summary .needs-sub-list { margin: 12px auto 0; max-width: 560px; }
#content .status-summary .needs-sub-list a { background: rgba(255, 255, 255, 0.1); color: #fff; }
#content .status-summary .needs-sub-list a:hover,
#content .status-summary .needs-sub-list a:focus-visible { background: rgba(255, 255, 255, 0.18); color: #fff; text-decoration: none; }
#content .status-summary .needs-sub-who { color: #ffb3ba; }
#content .status-summary .needs-sub-game { color: rgba(255, 255, 255, 0.7); opacity: 1; }

/* ── Board: game cards ────────────────────────────────────────────────── */

.game-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
@media (min-width: 900px) {
    .game-cards { grid-template-columns: 1fr 1fr; }
}

.game-card {
    border: 1px solid #e2e6e8;
    border-radius: 8px;
    overflow: hidden;
    scroll-margin-top: 90px;
}
.game-card-needs-sub { border-color: #f1b0b7; }
.game-card-cancelled { opacity: 0.6; }
.game-card:target { box-shadow: 0 0 0 3px #ffd97a; }

.game-card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}
.game-time { font-weight: 700; color: #333; white-space: nowrap; }
.game-teams { color: #555; font-size: 14px; }
.game-at { color: #d80000; font-weight: 700; margin: 0 3px; }
.cancelled-badge {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: #721c24;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* One team's goalie: name and status on the left, its action buttons on
   the right. A coloured stripe repeats the status so the eye can run down
   the page for red (sub needed) and amber (unconfirmed) without reading.
   When the buttons don't fit beside the info they wrap underneath,
   right-aligned, so a phone row is at most three short lines. */
.side-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 12px 8px 10px;
    border-top: 1px solid #f0f0f0;
    border-left: 4px solid #ffc107;
}
.side-row:first-of-type { border-top: none; }
.side-confirmed { border-left-color: #28a745; }
.side-needs-sub { border-left-color: #dc3545; background: #fff8f8; }
.side-info { min-width: 0; flex: 1 1 180px; }
.side-team { font-weight: 600; color: #222; line-height: 1.3; }
.side-label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 4px;
}
.side-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.goalie-none { color: #888; font-weight: 400; }
.reported-by, .volunteer-when { font-size: 12px; color: #777; margin-top: 2px; }
.volunteer-list { font-size: 14px; color: #333; margin-top: 4px; }
.volunteer-note { color: #777; font-size: 13px; }

/* Actions: a <details> whose summary is the button, with the form inside. */
.side-actions {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
/* An opened form takes the full card width under the game info instead
   of squeezing into the button column. */
.side-actions:has(.board-action[open]) { width: 100%; }
.board-action[open] { flex-basis: 100%; }
.board-action > summary { list-style: none; }
.board-action > summary::-webkit-details-marker { display: none; }
.board-action[open] > summary { opacity: 0.6; }

.board-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 8px;
    border: 2px solid transparent;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.board-btn:focus-visible { outline: 2px solid #1a5276; outline-offset: 2px; }
.board-btn-primary { background: #007bff; color: #fff; }
.board-btn-primary:hover { background: #0056b3; }
.board-btn-secondary { background: #fff; color: #444; border-color: #cfd6dc; }
.board-btn-secondary:hover { border-color: #888; }
/* On a confirmed row the only action is a rare one, so it looks like a
   link (still a 44px target) and doesn't compete with rows needing work. */
.board-btn-quiet { background: transparent; color: #555; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding: 0 8px; }
.board-btn-quiet:hover { color: #222; background: #f1f3f5; }
.board-btn-danger { background: #dc3545; color: #fff; }
.board-btn-danger:hover { background: #b02a37; }
.board-btn-success { background: #1e7e34; color: #fff; }
.board-btn-success:hover { background: #155d26; }
.board-btn-submit { width: 100%; margin-top: 4px; }

.board-form {
    margin-top: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e2e6e8;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.board-form-title { margin: 0; font-size: 14px; color: #333; font-weight: 600; }
.board-form label { display: block; }
.board-form label span { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 4px; }
.board-form label em { font-weight: 400; color: #999; }
.board-form input {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 16px; /* stops iOS zooming into the field */
    background: #fff;
}
.board-form input:focus { outline: none; border-color: #007bff; }
.board-form select {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    background: #fff;
    color: #222;
}
.board-form select:focus { outline: none; border-color: #007bff; }
.board-form select + .board-other-name { margin-top: 8px; }
.board-form input[hidden] { display: none; }
/* A one-tap answer: the form is just its button. */
.board-tap { display: inline; }
.board-form-help { margin: 0; font-size: 12px; color: #777; line-height: 1.4; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Captain page: volunteers */
.volunteers-box {
    margin-top: 15px;
    padding: 14px;
    background: #fff8f8;
    border: 1px solid #f1b0b7;
    border-radius: 8px;
}
.volunteers-box h4 { margin: 0 0 8px; color: #721c24; }
.volunteer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px solid #f3d3d6;
}
.volunteer:first-of-type { border-top: none; }
.volunteer-info { min-width: 0; }
.volunteer-actions { display: flex; gap: 8px; }
.volunteer-empty { margin: 0; color: #555; font-size: 14px; line-height: 1.5; }

@media (max-width: 599px) {
    .board-action[open] > summary.board-btn { width: 100%; }
    .volunteer-actions { width: 100%; }
    .volunteer-actions form { flex: 1; }
    .volunteer-actions .board-btn { width: 100%; }
}