/* MatchPlayV2 - modern, responsive, team-color-configurable styling for the Match Play leaderboard.
   Scoped entirely under .mpv2 so it never touches the legacy MatchPlay (site.css) styles.
   Team colors and the card background are injected per-page as CSS custom properties
   (--team-left-color, --team-right-color, --mpv2-card-bg, ...); the values below are just the
   fallback defaults used when a tour hasn't configured them. */

.mpv2 {
    --team-left-color: #7F0000;
    --team-left-text: #ffffff;
    --team-right-color: #071E93;
    --team-right-text: #ffffff;
    --mpv2-bg: #f4f6f8;
    --mpv2-card-bg: #ffffff;
    --mpv2-text: #1a1a1a;
    --mpv2-muted: #6b7280;
    --mpv2-border: #e2e5e9;
    /* Text drawn directly on --mpv2-card-bg (hole dots, muted labels inside a match card) must
       flip dark/light with that background, which admins can set independently of --mpv2-text.
       --mpv2-card-text is injected per-page from the card background's contrast; --mpv2-card-muted
       derives a softened variant from it via color-mix so it stays on the readable side either way. */
    --mpv2-card-text: #1a1a1a;
    --mpv2-card-muted: color-mix(in srgb, var(--mpv2-card-text) 65%, var(--mpv2-card-bg));
    /* Empty progress-bar track: same reasoning as --mpv2-card-text above, but for the progress
       bar's own background. Injected per-page - GetProgressTrackColorHex keeps this gray on a
       light card and switches to a lighter tint of the card background on a dark one, since a
       team color mixed against a fixed gray can vanish against it there. */
    --mpv2-progress-track: #e2e5e9;
    --mpv2-vs-thru-color: #6b7280;
    --mpv2-match-players-color: #1a1a1a;

    max-width: 720px;
    margin: 0 auto;
    padding: 14px 4px;
    color: var(--mpv2-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

.mpv2 *, .mpv2 *::before, .mpv2 *::after {
    box-sizing: border-box;
}

.mpv2 a {
    color: inherit;
    text-decoration: none;
}

/* ---------- Scoreboard ---------- */

.mpv2-scoreboard {
    background: var(--mpv2-card-bg);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    padding: 16px;
    margin-bottom: 16px;
}

.mpv2-scoreboard-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.mpv2-team {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.mpv2-team-name {
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mpv2-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpv2-team--left .mpv2-team-name { color: var(--team-left-color); }
.mpv2-team--right .mpv2-team-name { color: var(--team-right-color); }

.mpv2-team-score {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.mpv2-team--left .mpv2-team-score { color: var(--team-left-color); }
.mpv2-team--right .mpv2-team-score { color: var(--team-right-color); }

.mpv2-scoreboard-vs {
    flex: 0 0 auto;
    font-size: 1rem;
    color: var(--mpv2-vs-thru-color);
    font-weight: 600;
    padding: 0 8px;
}

.mpv2-progress {
    position: relative;
    height: 36px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: var(--mpv2-progress-track);
}

/* Split progress bar, two stacked layers per side growing from each team's own edge toward the middle:
   - "projected" (lighter tint) = finished + in-progress share of totalPoints
   - "actual" (solid/dark) = finished-only share, always <= projected, drawn on top so it reads as the
     dark "already decided" portion within the lighter "still in play" projected extent.
   Gridlines sit above both fills (dividing every point, as in the reference design); the numeric
   labels sit above the gridlines so the lines never cross through the text.
   A fixed-tone (not team-color-derived) border marks each layer's leading edge - same reasoning as
   .mpv2-hole-dot--square: a team configured with a light/white color color-mixes down to something
   indistinguishable from --mpv2-progress-track, so the boundary needs a marker that doesn't depend on
   the team color's own lightness. box-sizing keeps that border from pushing the width past the % value. */

.mpv2-progress-projected,
.mpv2-progress-actual {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    box-sizing: border-box;
    transition: width .3s ease;
}

.mpv2-progress-projected--red,
.mpv2-progress-actual--red {
    left: 0;
    border-right: 1px solid rgba(0, 0, 0, .18);
}

.mpv2-progress-projected--blue,
.mpv2-progress-actual--blue {
    right: 0;
    border-left: 1px solid rgba(0, 0, 0, .18);
}

.mpv2-progress-projected {
    z-index: 0;
}

.mpv2-progress-projected--red { background: color-mix(in srgb, var(--team-left-color) 45%, var(--mpv2-progress-track)); }
.mpv2-progress-projected--blue { background: color-mix(in srgb, var(--team-right-color) 45%, var(--mpv2-progress-track)); }

.mpv2-progress-actual {
    z-index: 1;
}

.mpv2-progress-actual--red { background: var(--team-left-color); }
.mpv2-progress-actual--blue { background: var(--team-right-color); }

.mpv2-progress-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0, 0, 0, .15);
    z-index: 2;
}

/* Half-point ticks, gauge-style: half the height of a full gridline, anchored to the bottom edge
   growing upward instead of spanning the whole bar - like the minor ticks on an analog meter. */
.mpv2-progress-gridline-half {
    position: absolute;
    top: 50%;
    bottom: 0;
    width: 1px;
    background: rgba(0, 0, 0, .15);
    z-index: 2;
}

.mpv2-progress-label {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 2.25rem;
    font-weight: 800;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

.mpv2-progress-label--red {
    left: 0;
    color: var(--team-left-text);
    justify-content: flex-start;
    padding-left: 8px;
}

.mpv2-progress-label--blue {
    right: 0;
    color: var(--team-right-text);
    justify-content: flex-end;
    padding-right: 8px;
}

.mpv2-progress-center {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 50%;
    width: 2px;
    background: var(--mpv2-text);
    z-index: 4;
}

/* ---------- Round menu / selectors ---------- */

.mpv2-round-title {
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #ffffff;
    background: var(--mpv2-text);
    font-size: 1.5rem;
    width: fit-content;
    margin: 24px auto 14px;
    padding: 5px 16px;
    border-radius: 999px;
}

.mpv2-round-select {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 12px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--mpv2-border);
    background: var(--mpv2-card-bg);
    color: var(--mpv2-card-text);
    font-weight: 600;
    text-align: center;
}

/* ---------- Match list / cards ---------- */

.mpv2-match-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
}

.mpv2-match-card {
    background: var(--mpv2-card-bg);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    overflow: hidden;
}

/* DetailsV2/ScoreV2 stack the shared match card, the current-hole entry card and (when relevant)
   the password card as separate .mpv2-match-card elements outside of .mpv2-match-list, so they need
   their own spacing - matches the 12px gap .mpv2-match-list uses between list rows. */
.mpv2-match-card + .mpv2-match-card {
    margin-top: 12px;
}

.mpv2-match-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
}

.mpv2-match-players {
    min-width: 0;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: break-word;
    color: var(--mpv2-match-players-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 12px;
}

.mpv2-match-players--left {
    text-align: left;
    border-left: 4px solid var(--team-left-color);
}

.mpv2-match-players--right {
    text-align: right;
    border-right: 4px solid var(--team-right-color);
}

/* Leading team: the whole name column fills with the team color (Ryder-Cup style card),
   instead of just the thin stripe on the card's outer edge used for the trailing/square side. */
.mpv2-match-players--left.mpv2-match-players--leading {
    background: var(--team-left-color);
    color: var(--team-left-text);
    border-left-color: transparent;
}

.mpv2-match-players--right.mpv2-match-players--leading {
    background: var(--team-right-color);
    color: var(--team-right-text);
    border-right-color: transparent;
}

.mpv2-match-players a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mpv2-match-result {
    position: relative;
    text-align: center;
    min-width: 130px;
    padding: 10px 16px;
}

/* Arrowhead pointing from the leading team's colored column toward the score: a small,
   sharp-angled triangle glued to the score column's inner edge, in the team's color.
   Kept narrow relative to the card height so the angle reads as a sharp point, not a wedge. */
.mpv2-match-result--left::before,
.mpv2-match-result--right::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    z-index: 0;
}

.mpv2-match-result--left::before {
    left: -1px;
    background: var(--team-left-color);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.mpv2-match-result--right::before {
    right: -1px;
    background: var(--team-right-color);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.mpv2-match-result-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.mpv2-match-label {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mpv2-vs-thru-color);
    white-space: nowrap;
}

.mpv2-match-score {
    display: flex;
    align-items: center;
    line-height: 1;
}

.mpv2-match-score-big {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
}

.mpv2-match-score-small {
    font-size: 1.6rem;
    font-weight: 700;
    margin-left: 2px;
    line-height: 1;
}

.mpv2-match-result--left .mpv2-match-score-big,
.mpv2-match-result--left .mpv2-match-score-small {
    color: var(--team-left-color);
}

.mpv2-match-result--right .mpv2-match-score-big,
.mpv2-match-result--right .mpv2-match-score-small {
    color: var(--team-right-color);
}

.mpv2-match-result--square .mpv2-match-score-big,
.mpv2-match-result--square .mpv2-match-score-small {
    color: var(--mpv2-card-muted);
}

.mpv2-match-meta-inline {
    font-size: .85rem;
}

.mpv2-match-thru {
    display: block;
    font-size: .85rem;
    text-transform: uppercase;
    color: var(--mpv2-vs-thru-color);
}

.mpv2-match-meta {
    text-align: center;
    font-size: .95rem;
    color: var(--mpv2-card-muted);
    padding: 6px 10px 2px;
}

.mpv2-hole-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding: 8px 6px 10px;
    border-top: 1px solid var(--mpv2-border);
}

.mpv2-hole-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mpv2-card-text);
    background: transparent;
}

.mpv2-hole-dot--left { background: var(--team-left-color); color: var(--team-left-text); }
.mpv2-hole-dot--right { background: var(--team-right-color); color: var(--team-right-text); }

/* All-square holes get an outline instead of a filled background: a solid fill here used to be
   --mpv2-border (a light gray), which becomes indistinguishable from a team that's configured with
   a light gray/white color - an outlined circle stays readable as "not a team color" regardless of
   what colors the teams are given. */
.mpv2-hole-dot--square {
    background: transparent;
    border: 2px solid var(--mpv2-card-muted);
    color: var(--mpv2-card-text);
}

/* Holes still to come in a match that's still being played: plain muted number,
   no circle, no strike-through - they're just waiting to be played. */
.mpv2-hole-dot--pending {
    background: transparent;
    color: var(--mpv2-card-muted);
}

/* Holes the match never reached because it already finished: same muted number,
   but crossed out with a diagonal line since they will never be played. */
.mpv2-hole-dot--unplayed {
    position: relative;
    background: transparent;
    color: var(--mpv2-card-muted);
}

.mpv2-hole-dot--unplayed::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    top: 50%;
    border-top: 1.5px solid var(--mpv2-card-muted);
    transform: rotate(-25deg);
}

/* Stacked HCP-allowance stroke circles above/below a hole's dot (team 1 above, team 2 below - see
   MatchCardViewModelBuilder.BuildStrokeOwners). Only rendered when a view opts into
   MatchCardOptions.ShowStrokeIndicators, so plain .mpv2-hole-dot (no .mpv2-hole-cell wrapper) stays
   pixel-identical to before for views that don't. */
.mpv2-hole-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Fixed (not min-) height sized for the max possible stack - 2 teammates can both have an
   allowance on the same hole in Fourball - so every hole-cell in a row reserves the same space
   here regardless of how many circles it actually has, keeping the dot/number row underneath
   aligned across the whole .mpv2-hole-dots row instead of shifting down on holes with 2 circles. */
.mpv2-hole-stroke-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    height: 28px;
}

/* Circles hug the dot they belong to, with the reserved empty space pushed outward. */
.mpv2-hole-stroke-row--top { justify-content: flex-end; }
.mpv2-hole-stroke-row--bottom { justify-content: flex-start; }

.mpv2-stroke-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}

.mpv2-stroke-dot--left { background: var(--team-left-color); color: var(--team-left-text); }
.mpv2-stroke-dot--right { background: var(--team-right-color); color: var(--team-right-text); }

.mpv2-match-link {
    display: block;
}

/* ---------- Match details / score entry ---------- */

.mpv2-detail-players {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: start;
    padding: 12px;
}

.mpv2-player-name {
    font-size: 1.15rem;
    font-weight: 600;
}

.mpv2-player-hcp {
    font-size: .9rem;
    color: var(--mpv2-card-muted);
}

/* --mpv2-card-muted is computed against the card background, not against a leading team's fill
   (.mpv2-match-players--leading), so on a light team color it can end up nearly invisible. When
   leading, inherit the already-contrasting --team-*-text color the parent sets instead. */
.mpv2-match-players--leading .mpv2-player-hcp {
    color: inherit;
    opacity: .85;
}

/* Player-number badge on the HCP line (Fourball only) - reuses the same small-circle look as the
   stroke-allowance dots in the hole-progress row so the two "which player" indicators read as one
   visual system. */
.mpv2-player-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    margin-right: 4px;
    /* Ring in the card background color so the badge stays visible even when it sits on a
       same-color leading fill (.mpv2-match-players--leading) instead of disappearing into it. */
    box-shadow: 0 0 0 1.5px var(--mpv2-card-bg);
}

/* Detailed hole-by-hole list (MatchHoleListV2) - one row per hole showing the running match
   lead ("AS" / "N▲") on whichever side is ahead, plus that hole's own result in the center.
   Companion to the compact .mpv2-hole-dots progress row: same underlying data, laid out
   vertically so the match's swing-by-swing dynamics (who led, by how much, when) read more
   clearly than the dot row alone. Deliberately narrow (~1/3 of the full card width) and
   centered under MatchCardV2's score column, so together they read as a "T" - the wide card
   on top, this detail column as the stem. */
.mpv2-hole-list-card {
    max-width: 240px;
    width: 33%;
    min-width: 168px;
    margin-left: auto;
    margin-right: auto;
}

.mpv2-hole-list {
    padding: 0;
}

/* Rebuilt on a "ledger row" model instead of the old full-bleed gradient panels: every row
   stays a quiet, constant, theme-adaptive strip (a hairline + faint zebra tint, never a
   per-cell fill), and the only color in the whole list is a small solid pill worn by whichever
   side actually won or leads that hole - closer to how broadcast hole-by-hole graphics (Ryder
   Cup etc.) do it than a scorecard trying to gradient-fill every cell. This sidesteps the two
   problems the gradient version kept running into: consecutive wins by one side no longer need
   to "connect" (each hole is its own small badge, read as a sequence, not a bar chasing
   continuity), and a halved hole needs no special-cased background at all - a neutral outlined
   pill is simply the sibling of a colored one, not an exception. */
.mpv2-hole-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--mpv2-card-muted) 30%, transparent);
}

.mpv2-hole-row:last-child {
    border-bottom: none;
}

/* Faint zebra striping keeps a run of 18 rows easy to scan at a glance - derived from the
   card's own text color at very low opacity, so it's correct on every configured theme
   instead of a fixed gray that could vanish or clash. */
.mpv2-hole-row:nth-child(even) {
    background: color-mix(in srgb, var(--mpv2-card-text) 5%, transparent);
}

.mpv2-hole-side {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}

.mpv2-hole-row-strokes {
    display: inline-flex;
    gap: 3px;
    justify-content: center;
}

/* min-height is required, not incidental: a flex container with no content (the empty pill for
   "won this hole, no lead text") has no line box to size itself against and would otherwise sit
   shorter than a text-bearing pill next to it - explicitly matching the text pill's own
   padding+line-height math (2 * 3px + 1rem * 1.2) keeps every pill in the list the same height
   regardless of whether it holds text. */
.mpv2-hole-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8em;
    min-height: calc(1.5rem * 1.2 + 6px);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}

/* Won this hole, but the running score carries no text for this side (still trailing overall,
   or just pulled level without being the one showing "AS"): still the full pill shape, just
   empty - min-width keeps it the same size as a text-bearing pill instead of collapsing, so
   there's one consistent pill element throughout the list rather than a second (dot) shape
   for this one case. */
.mpv2-hole-pill--left { background: var(--team-left-color); color: var(--team-left-text); }
.mpv2-hole-pill--right { background: var(--team-right-color); color: var(--team-right-text); }

/* Halved/level ("AS"): no team color on either side - the absence of color already says
   "nobody's ahead here" without a special-cased background. A thin ring (derived from the
   card's own muted tone, never a fixed white/gray) keeps the pill from disappearing entirely
   against a dark theme instead of a hardcoded box that fought the surrounding colors. */
.mpv2-hole-pill--neutral {
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--mpv2-card-muted) 70%, transparent);
    color: var(--mpv2-card-muted);
    font-weight: 700;
}

.mpv2-hole-number {
    color: var(--mpv2-card-text);
    padding: 3px 0;
}

/* Self-contained column stack for the number/PAR/INDEX lines. */
.mpv2-hole-number-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.15;
}

.mpv2-hole-number-value {
    font-size: 1.5rem;
    font-weight: 800;
}

/* Played holes get their own number circled in the result's color - the same win/halved
   convention as the compact hole-dots row (.mpv2-hole-dot--left/--right/--square): a solid
   filled circle in the winning team's color, or a transparent outlined ring for a halved hole,
   so the two views always agree on what a given result looks like. Sized in em off the
   number's own font-size so it scales if that's ever changed again. Pending/unplayed holes get
   no modifier here and stay plain text, matching .mpv2-hole-dot--pending/--unplayed having no
   circle either. */
.mpv2-hole-number-value--left,
.mpv2-hole-number-value--right,
.mpv2-hole-number-value--square {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    line-height: 1;
}

.mpv2-hole-number-value--left { background: var(--team-left-color); color: var(--team-left-text); }
.mpv2-hole-number-value--right { background: var(--team-right-color); color: var(--team-right-text); }
.mpv2-hole-number-value--square {
    background: transparent;
    border: 2px solid var(--mpv2-card-muted);
}

/* Kept at 1rem (never shrunk below it) - de-emphasized via opacity instead, per the page's
   own minimum-legible-text rule. */
.mpv2-hole-number-meta {
    font-size: 1rem;
    font-weight: 500;
    opacity: .62;
}

/* Hole the match is still working toward: the whole number/par/index stack dims, waiting. */
.mpv2-hole-number--pending {
    opacity: .55;
}

/* Hole the match will never reach because it already finished early: dimmed further and
   struck through, distinct from "still to come". */
.mpv2-hole-number--unplayed {
    opacity: .35;
    text-decoration: line-through;
}

.mpv2-hole-list-finished {
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 6px;
}

.mpv2-hole-list-finished--left { background: var(--team-left-color); color: var(--team-left-text); }
.mpv2-hole-list-finished--right { background: var(--team-right-color); color: var(--team-right-text); }
.mpv2-hole-list-finished--square { background: var(--mpv2-card-muted); color: var(--mpv2-card-bg); }

.mpv2-choice-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 12px;
}

/* Score-entry buttons: sized and contrasted for outdoor/sunlight use (large tap target, thick
   border) and with an unmistakable "selected" state (filled + checkmark) so a player returning to
   fix an earlier hole can see at a glance which choice is currently recorded. Built on the same
   input-plus-sibling-span trick already used by .gos-radio (site.css) instead of :has(), since
   :has() isn't used anywhere else in this app's CSS and this needs to work on whatever mobile
   browser a player has in the field.
   Both the resting and selected states are fully colored, glass-like "keycaps" - since the
   checkmark already carries the selected meaning, the color no longer has to. The resting state
   reads as raised (light-to-tint gradient, bottom-edge bevel, drop shadow, glossy top highlight
   via ::before); the selected state (.mpv2-choice-fill) reads as pressed-in (inset shadow) and
   lit up (colored outer glow) - a light/dark keycap pair rather than an outline-vs-fill pair.
   overflow is left visible (no clipping) so the fill's outer glow can bloom past the border. */
.mpv2-choice {
    position: relative;
    display: flex;
    min-height: 78px;
    border-radius: 14px;
    border: 3px solid var(--choice-accent);
    cursor: pointer;
    user-select: none;
    color: var(--choice-accent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--choice-accent) 32%, #fff) 0%,
        color-mix(in srgb, var(--choice-accent) 14%, var(--mpv2-card-bg)) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        0 4px 0 rgba(0, 0, 0, .16),
        0 7px 10px rgba(0, 0, 0, .18);
    transition: box-shadow .15s ease, transform .15s ease;
}

/* Glossy top-shine, always present on the "glass" keycap - blended with overlay so it lightens
   highlights/darkens shadows already drawn beneath it instead of flatly whiting the top out. */
.mpv2-choice::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 11px;
    z-index: 2;
    background: linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 48%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

.mpv2-choice:active {
    transform: translateY(3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        0 1px 0 rgba(0, 0, 0, .16),
        0 2px 4px rgba(0, 0, 0, .18);
}

.mpv2-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.mpv2-choice-fill {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 11px;
    opacity: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--choice-accent) 80%, #fff) 0%,
        var(--choice-accent) 55%,
        color-mix(in srgb, var(--choice-accent) 85%, #000) 100%);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, .35),
        inset 0 -1px 0 rgba(255, 255, 255, .3),
        0 0 18px 3px color-mix(in srgb, var(--choice-accent) 70%, transparent);
    transition: opacity .15s ease;
}

.mpv2-choice input:checked ~ .mpv2-choice-fill {
    opacity: 1;
}

.mpv2-choice-content {
    position: relative;
    z-index: 3;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
}

.mpv2-choice-mark {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
}

.mpv2-choice input:checked ~ .mpv2-choice-content .mpv2-choice-mark::before {
    content: "\2713";
}

.mpv2-choice--left { --choice-accent: var(--team-left-color); --choice-accent-text: var(--team-left-text); }
.mpv2-choice--right { --choice-accent: var(--team-right-color); --choice-accent-text: var(--team-right-text); }
.mpv2-choice--square { --choice-accent: var(--mpv2-card-muted); --choice-accent-text: #fff; }

.mpv2-choice input:checked ~ .mpv2-choice-content { color: var(--choice-accent-text); }

.mpv2-nav-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
}

.mpv2-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    background: #1f2937;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.mpv2-btn:hover {
    opacity: .9;
}

.mpv2-password-box {
    max-width: 320px;
    margin: 0 auto;
    padding: 16px;
    text-align: center;
    color: var(--mpv2-card-text);
}

.mpv2-password-box input[type="password"] {
    display: block;
    width: 100%;
    padding: 8px 10px;
    margin: 8px 0;
    border-radius: 8px;
    border: 1px solid var(--mpv2-border);
    background: #ffffff;
    color: #1a1a1a;
}

.mpv2-error-text {
    color: #c62828;
    font-size: 1rem;
}

.mpv2-empty {
    text-align: center;
    color: var(--mpv2-muted);
    padding: 24px;
}

/* ---------- Captain match list (kept as a real <table> so the existing
   drag-toggle/inline-load JS, which inserts sibling <tr>s, keeps working) ---------- */

.mpv2-captain-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.mpv2-captain-table tr {
    background: var(--mpv2-card-bg);
}

.mpv2-captain-cell {
    padding: 10px;
    border-bottom: 1px solid var(--mpv2-border);
    vertical-align: middle;
}

.mpv2-captain-match-btn {
    cursor: pointer;
    font-weight: 700;
    text-align: center;
    min-width: 90px;
}

.mpv2-captain-match-btn--left { background: var(--team-left-color); color: var(--team-left-text); }
.mpv2-captain-match-btn--right { background: var(--team-right-color); color: var(--team-right-text); }

/* ---------- HCP allowance info page ---------- */

.mpv2-info-card {
    background: var(--mpv2-card-bg);
    color: var(--mpv2-card-text);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    padding: 16px;
    margin-bottom: 12px;
}

.mpv2-info-card h4 {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 700;
}

.mpv2-info-card p {
    margin: 0 0 10px;
    line-height: 1.5;
}

.mpv2-info-card p:last-child {
    margin-bottom: 0;
}

/* Full card-text color, not a dimmed/mixed variant - color-mix-based muting isn't reliably
   readable across every admin-configurable card background, especially dark ones. De-emphasis
   comes from font-weight only, never from color or size. */
.mpv2-info-muted {
    color: var(--mpv2-card-text);
    font-weight: 400;
    font-size: 1.2rem;
}

/* Team badge (prose text only, e.g. "Hrají 1 - Novák a ... proti ..."): background is the
   actual team color, text is the matching --team-left-text/--team-right-text contrast color
   computed the same way as on Details (PlayersOperations.GetContrastTextColorHex). */
.mpv2-team-left {
    background: var(--team-left-color);
    color: var(--team-left-text);
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 6px;
    display: inline-block;
}

.mpv2-team-right {
    background: var(--team-right-color);
    color: var(--team-right-text);
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 6px;
    display: inline-block;
}

/* Table "Hráč" column: the whole cell (not a pill of varying width) is filled with the team
   color so every row's name cell lines up flush and vertical-centers cleanly against the rest
   of the row. Specificity beats the shared ".mpv2-info-table td" color/text-align rules. */
.mpv2-info-table td.mpv2-team-cell-left {
    background: var(--team-left-color);
    color: var(--team-left-text);
    font-weight: 700;
}

.mpv2-info-table td.mpv2-team-cell-right {
    background: var(--team-right-color);
    color: var(--team-right-text);
    font-weight: 700;
}

.mpv2-info-subtitle {
    text-align: center;
    color: var(--mpv2-muted);
    font-size: 1.5rem;
    margin: -6px 0 14px;
}

/* Holes-with-allowance shown as the same colored hole-number circles used for per-hole
   match results elsewhere in mpv2, so a player's stroke holes read as the familiar dot
   language instead of a plain number list. */
.mpv2-holes-cell {
    white-space: normal !important;
}

.mpv2-hole-dots--inline {
    display: inline-flex;
    border-top: none;
    padding: 0;
    justify-content: flex-start;
    gap: 3px;
}

.mpv2-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.mpv2-info-table th,
.mpv2-info-table td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--mpv2-border);
    white-space: nowrap;
    color: var(--mpv2-card-text);
}

/* First column (Hráč) stays left-aligned with the team-colored cell; every other column
   (HCP, strokes, tee color, SR/CR, ...) is centered - except Jamky, which holds a row of
   hole-number circles that reads more naturally left-aligned than centered. */
.mpv2-info-table th:not(:first-child),
.mpv2-info-table td:not(:first-child) {
    text-align: center;
}

.mpv2-info-table th.mpv2-holes-cell,
.mpv2-info-table td.mpv2-holes-cell {
    text-align: left;
}

.mpv2-info-table th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: .03em;
}

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

.mpv2-info-table-scroll {
    overflow-x: auto;
    margin-bottom: 10px;
}

.mpv2-info-steps {
    margin: 0;
    padding-left: 18px;
    font-size: 1.2rem;
    line-height: 1.6;
}

.mpv2-info-steps ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* ".mpv2 a" (top of file) sets color:inherit with higher specificity than a lone class
   selector, which was silently winning over ".mpv2-info-back" and forcing the link back
   to the page's fixed dark --mpv2-text color regardless of what's set here - the extra
   ".mpv2" qualifier below outranks it so the intended --mpv2-card-text actually applies. */
.mpv2 a.mpv2-info-back {
    display: block;
    width: fit-content;
    margin: 18px auto 10px;
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--mpv2-card-bg);
    color: var(--mpv2-card-text);
    font-weight: 700;
    text-decoration: underline;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

/* ---------- Narrow phones ----------
   The larger, more legible fonts above need the nested container/scoreboard/card
   padding trimmed on common phone/small-tablet widths, or the scoreboard row and
   match-card grid overflow the viewport horizontally. The 18-hole dot row is the
   tightest fit: sizes below are picked so all 18 stay on one line down to
   roughly 350-360px viewport width; below that (very old ~320px phones) it may
   still wrap by one. */

@media (max-width: 540px) {
    .mpv2 {
        /* Extra top padding: on phones the top scoreboard card sits right under the
           page's own menu/header, so it needs a little more clearance than the bottom. */
        padding: 12px 2px 6px;
    }

    .mpv2-scoreboard {
        padding: 12px 8px;
    }

    .mpv2-scoreboard-teams {
        gap: 4px;
    }

    .mpv2-team-name {
        font-size: 1.75rem;
    }

    .mpv2-scoreboard-vs {
        padding: 0 4px;
    }

    .mpv2-match-players {
        font-size: 1.75rem;
        padding: 10px 8px;
    }

    .mpv2-match-result {
        min-width: 96px;
        padding: 8px 6px;
    }

    .mpv2-match-result--left::before,
    .mpv2-match-result--right::before {
        width: 14px;
    }

    .mpv2-match-score-big {
        font-size: 3rem;
    }

    .mpv2-match-score-small {
        font-size: 2rem;
    }

    .mpv2-hole-dots {
        gap: 2px;
        padding: 6px 3px 8px;
    }

    .mpv2-hole-dot {
        width: 19px;
        height: 19px;
        font-size: .9rem;
    }

    .mpv2-stroke-dot {
        width: 12px;
        height: 12px;
        font-size: .7rem;
    }

    .mpv2-hole-stroke-row {
        height: 24px;
    }

    .mpv2-hole-list-card {
        min-width: 132px;
    }

    .mpv2-hole-side {
        min-height: 24px;
    }

    /* Text itself stays at 1rem (never shrunk below it) even on narrow phones - space is
       saved via tighter padding/min-width instead of a smaller font. */
    .mpv2-hole-pill {
        min-width: 2em;
        padding: 2px 7px;
    }

    .mpv2-choice {
        min-height: 64px;
    }

    .mpv2-choice-content {
        font-size: 1.05rem;
        gap: 4px;
        padding: 6px;
    }

    .mpv2-choice-mark {
        width: 24px;
        height: 24px;
        font-size: 1.5rem;
    }

    .mpv2-info-card {
        padding: 12px;
    }

    .mpv2-info-table th,
    .mpv2-info-table td {
        padding: 5px 6px;
    }
}