.match-header {
    text-align: center;
}

.match-header-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.match-team {
    flex: 1;
    text-align: center;
    padding: 15px;
}

.team-badge-large {
    width: 80px;
    height: 80px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.team-badge-large img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.match-team-name {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 4px;
}

.match-team-label {
    font-size: 0.85rem;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.match-team-total {
    font-size: 1.8rem;
    font-weight: bold;
    color: #d4a017;
}

.match-scores {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 6px;
}

.match-score-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.match-score-label {
    font-size: 0.7rem;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.match-score-value {
    font-size: 1.4rem;
    color: #ffffff;
}

.match-score-value.score-winner {
    font-weight: bold;
    color: #d4a017;
    text-shadow: 0 0 8px rgba(212, 160, 23, 0.4);
}

.match-vs {
    font-size: 2rem;
    font-weight: bold;
    color: #c41e3a;
    flex-shrink: 0;
}

.score-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
}

.score-table thead th:first-child {
    border-top-left-radius: 12px;
}

.score-table thead th:last-child {
    border-top-right-radius: 12px;
}

.score-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.score-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.score-table th,
.score-table td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.score-table th:first-child,
.score-table td:first-child {
    border-left: 3px solid rgba(196, 30, 58, 0.3);
    padding-left: 20px;
}

.score-table th:last-child,
.score-table td:last-child {
    border-right: 3px solid rgba(196, 30, 58, 0.3);
    padding-right: 20px;
}

.score-table thead th {
    border-top: 3px solid rgba(196, 30, 58, 0.3);
}

.score-table tbody tr:last-child td {
    border-bottom: 3px solid rgba(196, 30, 58, 0.3);
}

.score-table th {
    background: rgba(196, 30, 58, 0.35);
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    white-space: nowrap;
}

.score-table th:first-child,
.score-table td:first-child {
    text-align: left;
    min-width: 140px;
}

.score-table th:last-child {
    width: 1%;
}

.score-table td {
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.score-table tbody tr:nth-child(even) td {
    background: rgba(196, 30, 58, 0.06);
}

.score-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

.score-table .total-cell {
    font-weight: bold;
    color: #ffffff;
    font-size: 1rem;
    width: 1%;
    white-space: nowrap;
}

.score-table .total-cell.total-highest {
    color: #d4a017;
}

.score-table .total-cell.total-lowest {
    color: #c41e3a;
}

.score-table .score-cell {
    min-width: 36px;
    color: #d0d0d0;
}

.score-table .score-cell.score-winner {
    color: #d4a017;
    text-shadow: 0 0 8px rgba(212, 160, 23, 0.4);
}

.score-table .score-cell.score-loser {
    color: #c41e3a;
}

.score-table .shooter-cell {
    color: #d0d0d0;
}

.shooter-link {
    color: inherit;
    text-decoration: none;
}

.shooter-link:hover {
    color: #d4a017;
    text-decoration: underline;
}

.score-table .empty-table-msg {
    text-align: center;
    color: #a0a0a0;
    font-style: italic;
    padding: 24px 12px;
}

.score-table .team-total-row td {
    font-weight: bold;
    font-size: 1rem;
}

.summary-table {
    width: 100%;
}

.summary-table th:first-child,
.summary-table td:first-child {
    min-width: unset;
    width: 60%;
    text-align: left;
}

.summary-table .summary-shooter {
    font-size: 0.85rem;
    color: #d0d0d0;
    word-break: break-word;
}

.summary-table .summary-total-row td {
    font-weight: bold;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 1rem;
}

.summary-table .summary-total-row .score-cell:not(.score-winner) {
    font-weight: normal;
    color: #ffffff;
}

.summary-table .score-cell {
    min-width: 50px;
}

.summary-table td:last-child {
    width: 1%;
    white-space: nowrap;
}

.score-tables-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Only meaningful once score entry is live, so JS reveals it (drops the
   [hidden] attribute) once the scorecards are built in edit mode - it stays
   hidden entirely on a read-only view. */
.scoring-order-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 20px;
    font-size: 0.9rem;
    color: #d0d0d0;
    cursor: pointer;
    user-select: none;
}

.scoring-order-toggle[hidden] {
    display: none;
}

.scoring-order-toggle input {
    accent-color: #d4a017;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.score-table-column {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.score-table-column + .score-table-column {
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
}

.score-table-column .score-table:not(.summary-table) {
    min-width: 480px;
}

.score-table-column .summary-table {
    min-width: 300px;
}

.column-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #d4a017;
    margin-bottom: 12px;
    text-align: center;
}

.no-match {
    text-align: center;
    padding: 40px;
    color: #a0a0a0;
    font-style: italic;
}

@media (max-width: 1120px) {
    .score-table-column .score-table:not(.summary-table) {
        min-width: unset;
        width: 100%;
    }

    .match-header-inner {
        gap: 15px;
    }

    .match-team-name {
        font-size: 1.1rem;
    }

    .team-badge-large {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .match-vs {
        font-size: 1.5rem;
    }

    .match-score-value {
        font-size: 1.1rem;
    }

    .score-table th,
    .score-table td {
        padding: 8px 6px;
        font-size: 0.8rem;
    }

    .score-table th:first-child,
    .score-table td:first-child {
        min-width: 100px;
    }

    .summary-table {
        max-width: 100%;
    }

    .summary-table .summary-shooter {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .match-header-inner {
        flex-direction: column;
        gap: 10px;
    }

    .match-vs {
        font-size: 1.2rem;
    }

    .team-badge-large {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .score-table th,
    .score-table td {
        padding: 6px 4px;
        font-size: 0.75rem;
    }

    .score-table th:first-child,
    .score-table td:first-child {
        min-width: 80px;
    }

    .score-table .score-cell {
        min-width: 24px;
    }

    .summary-table .summary-shooter {
        font-size: 0.75rem;
    }

    .summary-table .score-cell {
        min-width: 40px;
        padding: 6px 2px;
    }

    .summary-table th,
    .summary-table td {
        padding: 4px 2px;
        font-size: 0.7rem;
    }
}

.rotate-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(24, 24, 27, 0.95);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.rotate-overlay.visible {
    display: flex;
}

.rotate-overlay-content {
    text-align: center;
    padding: 40px 30px;
    max-width: 320px;
}

.rotate-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    animation: rotateHint 2s ease-in-out infinite;
}

@keyframes rotateHint {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(90deg); }
    75% { transform: rotate(0deg); }
}

.rotate-overlay-content h2 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: #c41e3a;
}

.rotate-overlay-content p {
    font-size: 0.95rem;
    color: #a0a0a0;
    margin-bottom: 24px;
    line-height: 1.5;
}

.rotate-dismiss {
    background: rgba(196, 30, 58, 0.3);
    color: #ffffff;
    border: 1px solid rgba(196, 30, 58, 0.5);
    padding: 10px 28px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.rotate-dismiss:hover {
    background: rgba(196, 30, 58, 0.5);
}

/* ---- Score entry (edit mode) ---- */

.edit-mode .shooter-picker {
    position: relative;
    width: 100%;
}

.edit-mode .shooter-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
}

.edit-mode .shooter-picker-trigger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.edit-mode .shooter-picker-trigger:hover {
    background: rgba(255, 255, 255, 0.12);
}

.edit-mode .shooter-picker-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edit-mode .shooter-picker-caret {
    font-size: 0.65rem;
    color: #a0a0a0;
}

.edit-mode .shooter-picker-panel[hidden] {
    display: none;
}

.edit-mode .shooter-picker-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

.edit-mode .shooter-picker-search {
    width: 100%;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.9rem;
}

.edit-mode .shooter-picker-search:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.1);
}

.edit-mode .shooter-picker-list {
    overflow-y: auto;
    max-height: 210px;
}

/* Match sheet only: fixed, not absolute. The score table sits in an
   overflow-x: auto column, which also clips vertically, so an absolute panel
   on the last rows was cut off after "+ New Shooter". positionPanel()
   (match.js) places it against the trigger, flipping above it when there
   isn't room below, and sets its max-height to the space available. */
.edit-mode .shooter-picker-panel.shooter-picker-panel-fixed {
    position: fixed;
    top: auto;
    right: auto;
}

/* .section's backdrop-filter (styles.css) makes each section its own
   stacking context, painted in page order, so an open panel would otherwise
   sit under the next section down. Stays below the sticky nav (z-index 20). */
.section:has(.shooter-picker-panel:not([hidden])) {
    position: relative;
    z-index: 10;
}

.edit-mode .shooter-picker-panel-fixed .shooter-picker-list {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
}

.edit-mode .shooter-picker-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    color: #ffffff;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    text-align: left;
    font-size: 0.9rem;
}

.edit-mode .shooter-picker-option:last-child {
    border-bottom: 0;
}

.edit-mode .shooter-picker-none {
    font-style: italic;
    color: #a0a0a0;
}

.edit-mode .shooter-picker-new {
    color: #bfe6c4;
    font-weight: 600;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.edit-mode .shooter-picker-option:hover {
    background: rgba(196, 30, 58, 0.25);
}

.edit-mode .shooter-option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* First in the row, fixed width, so every name starts at the same column */
.edit-mode .shooter-option-no {
    flex-shrink: 0;
    width: 3.6em;
    color: #a0a0a0;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Narrow dropdown (a cramped scorecard column): name on its own line,
   number beneath it. Container query, since the scorecard is used in
   landscape so viewport width says nothing about the column width. */
@container (max-width: 260px) {
    .edit-mode .shooter-picker-option {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 3px;
    }

    .edit-mode .shooter-option-name {
        white-space: normal;
    }

    .edit-mode .shooter-option-no {
        width: auto;
    }
}

/* Sized on the fly by activateShotBox() in match.js/practice.js: just tall
   enough that whichever row auto-advance is centring can actually reach the
   middle of the viewport, even if it's near the end of the page (e.g. the
   away team, stacked below the home team) and there isn't normally enough
   content below it to scroll that far. Zero height the rest of the time, so
   it never leaves a permanent gap or gets in the way of scrolling back up
   to earlier rows. */
#shotScrollSpacer {
    height: 0;
    pointer-events: none;
}

.edit-mode .shot-input {
    width: 48px;
    padding: 6px 4px;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 0.9rem;
    -moz-appearance: textfield;
}

.edit-mode .shot-input::-webkit-outer-spin-button,
.edit-mode .shot-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.edit-mode .shot-input:focus {
    outline: none;
    border-color: rgba(212, 160, 23, 0.7);
}

.edit-mode .total-cell {
    height: 100%;
}

.edit-mode .score-edit-row.current-shooter td {
    background: rgba(212, 160, 23, 0.18);
}

.edit-mode .score-edit-row.row-locked .shot-input {
    opacity: 0.4;
    cursor: not-allowed;
}

.edit-mode .shot-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Shooter cell in edit mode: the picker plus its (usually hidden) reorder
   arrows, side by side - see buildEditRow/updateCurrentShooter in match.js. */
.edit-mode .shooter-cell-edit {
    display: flex;
    align-items: center;
    gap: 6px;
}

.edit-mode .shooter-cell-edit .shooter-picker {
    flex: 1 1 auto;
    min-width: 0;
}

.shooter-move-controls {
    display: none;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 2px;
}

/* Revealed by the "Reorder shooters" toggle button (renderEditorLockBar),
   which flips this class on the wrapper holding both teams' tables. */
.score-tables-wrapper.reorder-active .shooter-move-controls {
    display: flex;
}

.shooter-move-btn {
    width: 22px;
    height: 18px;
    padding: 0;
    line-height: 1;
    font-size: 0.6rem;
    color: #e0d6c8;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
}

.shooter-move-btn:hover:not(:disabled) {
    background: rgba(212, 160, 23, 0.25);
}

.shooter-move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.shooter-move-btn[hidden] {
    display: none;
}

/* Briefly marks the box focus just auto-advanced to, while it's read-only
   during the pause-before-typing grace period - so a switch to a different
   shooter/team is unmistakable and can't be typed into by accident. */
.shot-input.shot-landing {
    outline: 3px solid rgba(212, 160, 23, 0.9);
    outline-offset: 1px;
    background: rgba(212, 160, 23, 0.3) !important;
    cursor: wait;
}

.edit-mode .total-cell-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
}

.score-status {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #bfe6c4;
    font-weight: 600;
}

/* One confirm/submit panel under the match header (see buildConfirmArea).
   Deliberately larger than the other buttons on the page: it is the last
   step of a match and people were missing it. */
.match-confirm {
    margin-bottom: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    border: 1px solid rgba(212, 160, 23, 0.45);
    background: rgba(212, 160, 23, 0.08);
}

.match-confirm[hidden] {
    display: none;
}

.match-confirm-hint {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: #f5e6b8;
}

.match-confirm-hint[hidden] {
    display: none;
}

.match-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.match-confirm-actions .confirm-btn,
.match-confirm-actions .submit-btn {
    padding: 12px 28px;
    font-size: 1rem;
}

.confirm-btn,
.submit-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.2s ease;
}

.confirm-btn {
    background: rgba(212, 160, 23, 0.3);
    color: #f5e6b8;
    border-color: rgba(212, 160, 23, 0.6);
}

.confirm-btn:hover {
    background: rgba(212, 160, 23, 0.5);
}

.confirm-btn.unconfirm {
    background: rgba(196, 30, 58, 0.3);
    color: #f0aeb6;
    border-color: rgba(196, 30, 58, 0.5);
}

.confirm-btn.unconfirm:hover {
    background: rgba(196, 30, 58, 0.5);
}

.confirm-btn[hidden],
.submit-btn[hidden] {
    display: none;
}

.submit-btn {
    background: rgba(80, 170, 90, 0.4);
    color: #d6f3da;
    border-color: rgba(80, 170, 90, 0.7);
}

.submit-btn:hover {
    background: rgba(80, 170, 90, 0.6);
}

.match-status-bar {
    margin-top: 14px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #a0a0a0;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.match-status-bar.submitted {
    color: #d4a017;
    background: rgba(212, 160, 23, 0.12);
}

/* Handicap match additions */
.handicap-banner {
    margin-top: 12px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #d4a017;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(212, 160, 23, 0.12);
}

.hc-cell {
    color: #d4a017;
    font-weight: 600;
}

/* A competition shooter with no calculated handicap: the editor types one in
   (see CompetitionCommon.fillHcCell). Read-only viewers see the figure with
   a "*" instead, so a manual handicap is never mistaken for a calculated one. */
.hc-override-input {
    width: 56px;
    padding: 6px 4px;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    color: #d4a017;
    border: 1px dashed rgba(212, 160, 23, 0.6);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    -moz-appearance: textfield;
}

.hc-override-input::-webkit-outer-spin-button,
.hc-override-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hc-override-input::placeholder {
    color: #9a9aa2;
    font-weight: 400;
}

.hc-override-input:focus {
    outline: none;
    border-style: solid;
}

/* Small muted aside next to a handicap-adjusted total, e.g. "(raw 65)" -
   used by the League Pairs/Trebles/Senior Pairs results summary. */
.hc-note {
    font-size: 0.75em;
    font-weight: 400;
    color: #9a9aa2;
    margin-left: 4px;
}

/* Shown on a match unlocked only by the admin match-day override. Styled
   like a warning, not a hint - it means the date rule is currently off. */
.override-banner {
    margin-top: 12px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ff8a8a;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(196, 30, 58, 0.12);
}

/* Single-editor lock: one read-only-by-default Edit / Editing-Done bar
   covering every side this account has rights to, sat above both score
   tables (not duplicated per column - a home account holds both at once). */
.edit-lock-bar {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.edit-lock-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.2s ease;
    background: rgba(80, 170, 90, 0.4);
    color: #d6f3da;
    border-color: rgba(80, 170, 90, 0.7);
}

.edit-lock-btn:hover {
    background: rgba(80, 170, 90, 0.6);
}

.edit-lock-btn.done-btn {
    background: rgba(212, 160, 23, 0.3);
    color: #f5e6b8;
    border-color: rgba(212, 160, 23, 0.6);
}

.edit-lock-btn.done-btn:hover {
    background: rgba(212, 160, 23, 0.5);
}

.edit-lock-btn.danger-btn {
    background: rgba(196, 30, 58, 0.28);
    color: #f0aeb6;
    border-color: rgba(196, 30, 58, 0.55);
}

.edit-lock-btn.danger-btn:hover {
    background: rgba(196, 30, 58, 0.5);
    color: #ffffff;
}

.edit-lock-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Admin-only "Restore from snapshot" modal (see openScoreSnapshotPicker in
   JS/match.js). Self-contained rather than reusing confirm-dialog.js's
   .cfd-* classes, since those are only injected lazily on first use of
   window.confirmDialog and this modal can be the first modal on the page. */
.snapshot-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.7);
}

.snapshot-modal-card {
    background: #18181b;
    color: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    width: min(480px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    font: inherit;
    box-sizing: border-box;
}

.snapshot-modal-card h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    color: #d4a017;
}

.snapshot-modal-card p {
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #e0d6c8;
}

.snapshot-team-group {
    margin-bottom: 16px;
}

.snapshot-team-group[hidden] {
    display: none;
}

.snapshot-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.snapshot-tab {
    flex: 1;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: #e0d6c8;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.snapshot-tab.active {
    color: #d4a017;
    border-bottom-color: #d4a017;
}

.snapshot-team-group .snapshot-pick-btn {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
}

.snapshot-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.snapshot-modal-close {
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Popup shown to everyone watching when a match is submitted (see
   showMatchResultPopup). Sits just under the confetti canvas (z-index 9999,
   celebrate.js) so the confetti falls over it. */
.match-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.75);
    animation: match-result-fade 0.3s ease-out both;
}

.match-result-card {
    background: #18181b;
    color: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(212, 160, 23, 0.6);
    width: min(440px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
}

.match-result-card h2 {
    margin: 0 0 4px;
    font-size: 1.4rem;
    color: #d4a017;
}

.match-result-fixture {
    margin: 0 0 16px;
    font-size: 0.95rem;
    color: #a0a0a0;
}

.match-result-leagues {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.match-result-league {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(212, 160, 23, 0.1);
    border: 1px solid rgba(212, 160, 23, 0.3);
}

.match-result-league-name {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a0a0a0;
}

.match-result-winner {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f5e6b8;
}

.match-result-thanks {
    margin: 0 0 16px;
    font-size: 0.95rem;
    color: #e0d6c8;
}

.match-result-close {
    padding: 10px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    color: #d6f3da;
    background: rgba(80, 170, 90, 0.4);
    border: 1px solid rgba(80, 170, 90, 0.7);
}

.match-result-close:hover {
    background: rgba(80, 170, 90, 0.6);
}

/* The handshake: two halves of the same emoji, each clipped to its own side,
   slide in from the left and right and join into one clasp, which then
   pumps up and down a few times. */
.handshake {
    position: relative;
    width: 6rem;
    height: 6rem;
    margin: 0 auto 8px;
    font-size: 5rem;
    line-height: 6rem;
    animation: handshake-pump 0.5s ease-in-out 1.1s 4;
}

.handshake-half {
    position: absolute;
    inset: 0;
}

.handshake-left {
    clip-path: inset(0 50% 0 0);
    animation: handshake-in-left 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.handshake-right {
    clip-path: inset(0 0 0 50%);
    animation: handshake-in-right 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes handshake-in-left {
    from { transform: translateX(-130px) rotate(-18deg); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@keyframes handshake-in-right {
    from { transform: translateX(130px) rotate(18deg); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@keyframes handshake-pump {
    0%, 100% { transform: translateY(0) rotate(0); }
    25%      { transform: translateY(-9px) rotate(-8deg); }
    75%      { transform: translateY(7px) rotate(8deg); }
}

@keyframes match-result-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .handshake,
    .handshake-left,
    .handshake-right,
    .match-result-overlay {
        animation: none;
    }
}

/* Toast shown to a device that's just been bumped back to read-only because
   another device claimed the match's single editor lock. Sits above both
   score tables, next to the edit-lock bar. */
.editor-takeover-toast {
    margin-top: 12px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ff8a8a;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(196, 30, 58, 0.12);
    animation: editor-toast-in 0.2s ease;
}

@keyframes editor-toast-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Score corrections: a shot that was changed after it had already been
   entered (score_audit). The cell is flagged in the read-only tables, the
   full log sits in its own section, and a banner appears above the tables
   the moment a new correction lands - see refreshScoreAudit in match.js. */
.score-table .score-cell.score-corrected {
    color: #ff8a8a;
    background: rgba(196, 30, 58, 0.15);
    box-shadow: inset 0 -2px 0 #c41e3a;
    cursor: help;
}

.score-correction-toast {
    margin-top: 12px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ff8a8a;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(196, 30, 58, 0.15);
    border: 1px solid rgba(196, 30, 58, 0.5);
    animation: editor-toast-in 0.2s ease;
}

.score-corrections-intro {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: #a0a0a0;
}

.score-corrections-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.score-correction-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: baseline;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(196, 30, 58, 0.1);
    font-size: 0.9rem;
    color: #d0d0d0;
}

.score-correction-time,
.score-correction-by {
    font-size: 0.8rem;
    color: #a0a0a0;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .score-correction-item {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}