html, body {
    font-family: 'Inter', system-ui, 'Segoe UI', sans-serif;
    /* The page itself never scrolls sideways; wide content scrolls in containers.
       iOS Safari ignores overflow-x: hidden on the body for viewport panning —
       clip (the second declaration, where supported) is what actually stops it. */
    overflow-x: hidden;
    overflow-x: clip;
    /* Keep Safari from inflating text on its own, which widens layouts. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

a, .btn-link {
    color: var(--mud-palette-primary, #f2b705);
}

/* Account-page buttons follow the app theme (amber on dark) instead of Bootstrap blue. */
.btn-primary {
    color: #131c2b;
    font-weight: 600;
    background-color: var(--mud-palette-primary, #f2b705);
    border: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Styling for the statically rendered account pages (login/register). */
.account-form {
    max-width: 380px;
}

.account-form .mb-3 {
    margin-bottom: 1rem;
}

.account-form .form-label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.account-form .form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: var(--mud-palette-text-primary, #1f2430);
    background: var(--mud-palette-background, #ffffff);
    border: 1px solid var(--mud-palette-lines-default, #c4c4c4);
    border-radius: 4px;
}

.account-form .btn,
.btn.btn-primary {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.text-danger {
    color: #e50000;
}

.text-success {
    color: var(--mud-palette-success, #3e8757);
}

/* --- Email verification banner ------------------------------------------------ */

.verify-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}

.verify-resend-form {
    display: inline;
}

.verify-resend-button {
    padding: 2px 10px;
    font: inherit;
    font-weight: 600;
    color: inherit;
    background: transparent;
    border: 1px solid currentcolor;
    border-radius: 6px;
    cursor: pointer;
}

.mt-3 {
    margin-top: 1rem;
}

/* --- App bar ----------------------------------------------------------------- */

.logout-form {
    display: inline;
}

.logout-button {
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 6px;
    cursor: pointer;
}

/* --- Admin ------------------------------------------------------------------ */

.section-title {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.admin-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #8b98ab);
}

.datetime-input {
    height: 40px;
    padding: 0 10px;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary, #e6ebf2);
    background: var(--mud-palette-background, #0b1220);
    border: 1px solid var(--mud-palette-lines-default, #22304a);
    border-radius: 6px;
    color-scheme: dark;
}

/* --- Match list (sportsbook-style dense rows) ------------------------------- */

.match-day {
    margin: 20px 0 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary, #8b98ab);
}

.match-list {
    max-width: 880px;
    border: 1px solid var(--mud-palette-lines-default, #22304a);
    border-radius: 6px;
    overflow: hidden;
}

.match-day {
    max-width: 880px;
}

.match-row {
    display: grid;
    /* Flashscore-style: time | stacked teams | stacked scores | actions. */
    grid-template-columns: 118px minmax(180px, 1fr) 56px minmax(210px, 280px);
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--mud-palette-surface, #131c2b);
    border-bottom: 1px solid var(--mud-palette-lines-default, #22304a);
    min-height: 64px;
}

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

.match-row:hover {
    background: color-mix(in srgb, var(--mud-palette-surface, #131c2b) 85%, white 5%);
}

.match-time {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.25;
    min-width: 0;
}

.match-kickoff {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.match-stage,
.match-deadline {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary, #8b98ab);
    overflow-wrap: break-word;
}

.match-venue {
    max-width: 100%;
    font-size: 0.68rem;
    line-height: 1.3;
    color: color-mix(in srgb, var(--mud-palette-text-secondary, #8b98ab) 75%, transparent);
    /* Wrap up to two lines before truncating — the full name is in the tooltip. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
}

/* Both columns stretch to the full row height and split into two equal halves,
   so each team name is vertically centered against its score box (or score
   number) in the neighboring column — align-self: stretch is what keeps the
   halves in phase when another cell (e.g. the time cell) is the tallest. */
.match-teams {
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    align-self: stretch;
    /* A fixed indent, identical on every row, so all teams share one left edge
       (nudged right from the time column rather than hugging it). */
    padding-left: 48px;
    gap: 6px;
    min-width: 0;
}

.match-team-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    line-height: 20px;
    min-width: 0;
}

.match-team-line > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-winner {
    font-weight: 700;
}

.team-badge {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Provider short names replace full names on narrow screens. */
.team-short { display: none; }

.highlights-link {
    font-size: 0.8rem;
    white-space: nowrap;
}

.standings-table {
    max-width: 720px;
}

.standings-table td,
.standings-table th {
    white-space: nowrap;
}

.standings-team {
    min-width: 200px;
}

.match-scores {
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    align-self: stretch;
    justify-items: center;
    gap: 6px;
}

.score-num {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 20px;
}

.score-live {
    color: var(--mud-palette-error, #e5484d);
}

.score-empty {
    color: var(--mud-palette-text-secondary, #8b98ab);
    font-weight: 400;
}

.score-box {
    width: 44px;
    height: 30px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary, #e6ebf2);
    background: var(--mud-palette-background, #0b1220);
    border: 1px solid var(--mud-palette-lines-default, #22304a);
    border-radius: 6px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.score-box::-webkit-inner-spin-button,
.score-box::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.score-box:focus {
    outline: none;
    border-color: var(--mud-palette-primary, #f2b705);
}


.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--mud-palette-error, #e5484d);
    border-radius: 4px;
    padding: 2px 8px;
}

.badge-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .badge-live::before { animation: none; }
}

.saved-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--mud-palette-success, #3e8757);
    white-space: nowrap;
}

.tbd {
    color: var(--mud-palette-text-secondary, #8b98ab);
    font-style: italic;
    cursor: help;
}

.summary-strip {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

/* Tab panel padding (MudTabs no longer accepts a PanelClass attribute). */
.mud-tabs .mud-tabs-panels {
    padding: 16px;
}

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

.advancer-select {
    height: 36px;
    padding: 0 8px;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary, #e6ebf2);
    background: var(--mud-palette-background, #0b1220);
    border: 1px solid var(--mud-palette-lines-default, #22304a);
    border-radius: 6px;
}

.own-bet {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #8b98ab);
    white-space: nowrap;
}

.own-bet-missed {
    font-style: italic;
}

/* Fixed-width points number so the live pills line up vertically in the scoreboard. */
.points-value {
    display: inline-block;
    min-width: 34px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.points-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 10px;
    background: var(--mud-palette-lines-default, #22304a);
    color: var(--mud-palette-text-primary, #e6ebf2);
}

.points-pill-scored {
    background: var(--mud-palette-success, #3e8757);
    color: #08130a;
}

.points-pill-provisional {
    background: transparent;
    border: 1px dashed var(--mud-palette-primary, #f2b705);
    color: var(--mud-palette-primary, #f2b705);
}

.own-row {
    background: color-mix(in srgb, var(--mud-palette-primary, #f2b705) 8%, transparent);
}

/* --- Tournament cards (home) --------------------------------------------------- */

.tournament-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 168px;
    padding: 18px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--mud-palette-text-primary, #e6ebf2);
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--mud-palette-surface, #131c2b) 90%, white 10%) 0%,
        var(--mud-palette-surface, #131c2b) 55%,
        color-mix(in srgb, var(--mud-palette-surface, #131c2b) 96%, black 4%) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 28px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Soft glass sheen across the upper half. */
.tournament-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.tournament-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mud-palette-primary, #f2b705) 40%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 14px 34px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .tournament-card,
    .tournament-card:hover { transform: none; }
}

.tournament-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.tournament-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--mud-palette-primary, #f2b705);
    background: color-mix(in srgb, var(--mud-palette-primary, #f2b705) 14%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.tournament-card-title {
    margin-top: 4px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.tournament-card-meta {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #8b98ab);
}

.tournament-card-cta {
    margin-top: auto;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-primary, #f2b705);
}

/* --- Player profiles ---------------------------------------------------------- */

.stat {
    display: flex;
    flex-direction: column;
    min-width: 56px;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary, #8b98ab);
}

.sparkline {
    display: block;
    width: 100%;
    max-width: 260px;
    height: 44px;
}

.sparkline polyline {
    fill: none;
    stroke: var(--mud-palette-primary, #f2b705);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.badge-chip {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.8rem;
    border: 1px solid var(--mud-palette-lines-default, #22304a);
    border-radius: 12px;
    background: var(--mud-palette-background, #0b1220);
}

.recap-line {
    padding: 2px 0;
}

.history-table {
    max-width: 860px;
}

.history-table th,
.history-table td {
    white-space: nowrap;
}

.history-score {
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.all-bets {
    padding: 4px 12px 10px 108px;
    background: var(--mud-palette-surface, #131c2b);
    border-bottom: 1px solid var(--mud-palette-lines-default, #22304a);
}

.all-bets-row {
    display: grid;
    grid-template-columns: 200px 56px 44px auto;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: 0.85rem;
}

.bet-reactions {
    display: inline-flex;
    gap: 4px;
}

.reaction-btn {
    padding: 1px 6px;
    font: inherit;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary, #8b98ab);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default, #22304a);
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
}

.reaction-zero {
    opacity: 0.45;
    border-color: transparent;
}

.reaction-btn:hover {
    opacity: 1;
    border-color: var(--mud-palette-lines-default, #22304a);
}

.reaction-mine {
    border-color: var(--mud-palette-primary, #f2b705);
    color: var(--mud-palette-text-primary, #e6ebf2);
}

.all-bets-score {
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.all-bets-points {
    color: var(--mud-palette-text-secondary, #8b98ab);
}

/* --- Admin participants ------------------------------------------------------- */

.participant-list {
    max-width: 860px;
}

.participant-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default, #22304a);
}

.participant-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 220px;
    min-width: 0;
}

.participant-email {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #8b98ab);
    overflow-wrap: anywhere;
}

.participant-message {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary, #8b98ab);
}

.participant-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* --- Match comments -------------------------------------------------------------- */

.comment-toggle {
    padding: 2px 10px;
    font: inherit;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #8b98ab);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default, #22304a);
    border-radius: 10px;
    cursor: pointer;
}

.comment-toggle:hover {
    color: var(--mud-palette-text-primary, #e6ebf2);
}

.match-comments {
    padding: 8px 12px 12px 108px;
    background: var(--mud-palette-surface, #131c2b);
    border-bottom: 1px solid var(--mud-palette-lines-default, #22304a);
}

.comment-empty {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary, #8b98ab);
    padding: 4px 0;
}

.comment-row {
    padding: 6px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-lines-default, #22304a) 50%, transparent);
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary, #8b98ab);
}

.comment-author {
    font-weight: 600;
    font-size: 0.82rem;
}

.comment-delete {
    margin-left: auto;
}

.comment-body {
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.comment-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    max-width: 480px;
}

.comment-form .mud-input-control {
    flex: 1;
}

@media (max-width: 800px) {
    .match-comments { padding-left: 12px; }
}

.auto-tag {
    margin-left: 6px;
    padding: 0 6px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary, #8b98ab);
    border: 1px dashed var(--mud-palette-lines-default, #22304a);
    border-radius: 8px;
}

/* --- Swish payment box ---------------------------------------------------------- */

.swish-qr {
    border-radius: 8px;
    background: #ffffff;
    padding: 6px;
}

.swish-info {
    flex: 1 1 240px;
    min-width: 0;
}

/* --- Pick distribution (shown with the public predictions) -------------------- */

.dist {
    padding: 6px 0 10px;
}

.dist-bar {
    display: flex;
    height: 6px;
    max-width: 420px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--mud-palette-background, #0b1220);
}

.dist-seg.dist-home { background: var(--mud-palette-secondary, #7d97b5); }
.dist-seg.dist-draw { background: #4a586e; }
.dist-seg.dist-away { background: var(--mud-palette-primary, #f2b705); }

.dist-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Each outcome is its own bordered chip, so symbol and percentage read as one unit. */
.dist-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary, #8b98ab);
    background: var(--mud-palette-background, #0b1220);
    border: 1px solid var(--mud-palette-lines-default, #22304a);
    border-radius: 10px;
}

.dist-chip b {
    color: var(--mud-palette-text-primary, #e6ebf2);
}

.dist-most {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary, #8b98ab);
}

.dist-most b {
    color: var(--mud-palette-text-primary, #e6ebf2);
}

.dist-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
}

/* --- How it works ---------------------------------------------------------------- */

.howto {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 640px;
}

.howto-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.howto-num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--mud-palette-primary, #f2b705);
    background: color-mix(in srgb, var(--mud-palette-primary, #f2b705) 14%, transparent);
    border-radius: 50%;
}

/* --- Rank race chart ------------------------------------------------------------ */

.rank-race {
    overflow-x: auto;
    padding-bottom: 4px;
}

.race-grid {
    stroke: color-mix(in srgb, var(--mud-palette-lines-default, #22304a) 55%, transparent);
    stroke-width: 1;
}

.race-axis {
    fill: var(--mud-palette-text-secondary, #8b98ab);
    font-size: 11px;
}

.race-name {
    font-size: 11px;
}

.race-name-mine {
    font-weight: 700;
    font-size: 12px;
}

/* --- Winner podium (finished tournaments) -------------------------------------- */

.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    margin: 20px 0 10px;
}

.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    max-width: 34%;
}

.podium-medal {
    font-size: 2rem;
    line-height: 1.2;
}

.podium-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.podium-points {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #8b98ab);
    font-variant-numeric: tabular-nums;
}

.podium-prize {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mud-palette-primary, #f2b705);
}

.podium-step {
    width: 92px;
    max-width: 100%;
    margin-top: 8px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
    font-size: 1.2rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--mud-palette-text-secondary, #8b98ab) 60%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary, #f2b705) 16%, var(--mud-palette-surface, #131c2b)), var(--mud-palette-surface, #131c2b));
    border: 1px solid var(--mud-palette-lines-default, #22304a);
    border-radius: 8px 8px 0 0;
}

.podium-step-1 { height: 96px; }
.podium-step-2 { height: 68px; }
.podium-step-3 { height: 48px; }

/* Wide tables scroll inside their own container instead of the page. */
.standings-table,
.scoreboard-table .mud-table-container {
    overflow-x: auto;
}

.standings-table th,
.standings-table td,
.scoreboard-table th,
.scoreboard-table td:last-child,
.scoreboard-table .points-cell {
    white-space: nowrap;
}

@media (max-width: 800px) {
    /* The stacked layout carries over; only the actions move to their own footer row. */
    .match-row {
        grid-template-columns: 76px 1fr 56px;
        grid-template-areas:
            "time teams scores"
            "actions actions actions";
        row-gap: 6px;
        padding: 10px 12px;
    }

    .match-time { grid-area: time; }
    .match-teams { grid-area: teams; padding-left: 32px; }
    .match-scores { grid-area: scores; }

    /* The narrow phone time column gets a third line before the venue truncates. */
    .match-venue { -webkit-line-clamp: 3; line-clamp: 3; }

    /* Provider short names replace full names on small screens. */
    .match-team-line:has(> .team-short) .team-full { display: none; }
    .team-short { display: inline; }

    .match-actions {
        grid-area: actions;
        justify-content: space-between;
    }

    .match-actions:empty { display: none; }

    .all-bets { padding-left: 12px; }

    /* Reactions get their own line under each pick on narrow screens. */
    .all-bets-row { grid-template-columns: 1fr 56px 44px; row-gap: 2px; }
    .bet-reactions { grid-column: 1 / -1; padding-bottom: 4px; }

    /* Bigger touch targets for thumbs. */
    .score-box {
        width: 48px;
        height: 36px;
    }

    .summary-strip { gap: 16px; }
    .summary-strip .stat-value { font-size: 1.05rem; }

    /* Tighter scoreboard cells and pills so the columns fit a phone screen. */
    .scoreboard-table .mud-table-cell { padding: 10px 6px; }
    .points-pill { margin-left: 4px; padding: 0 6px; font-size: 0.7rem; }
    .pill-live-label { display: none; }

    /* Long player names wrap onto a second line (between words) rather than
       pushing the prize column off-screen. */
    .scoreboard-table td:nth-child(2) {
        max-width: 104px;
    }

    /* Phones get the width back that desktop spends on breathing room. */
    .mud-tabs .mud-tabs-panels { padding: 12px 4px; }
}

@media (max-width: 560px) {
    /* The app bar must stay a single row: drop the username (the account is
       obvious to its owner) and tighten the paddings around what remains. */
    .appbar-username { display: none; }
    .mud-appbar .mud-toolbar { padding-left: 10px; padding-right: 6px; }
    .logout-button { padding: 4px 10px; }
    .appbar-title { font-size: 1.05rem; margin-left: 0 !important; }
    .mud-appbar .mud-icon-button { padding: 8px; }

    /* The exact-scores column doesn't fit a phone screen — dropping it lets the
       scoreboard show rank, player, points and prize without sideways scrolling.
       The stat is still on the player profile. */
    .scoreboard-table th:nth-child(4),
    .scoreboard-table td:nth-child(4) { display: none; }
}

@media (max-width: 360px) {
    /* On the narrowest screens the ball alone carries the brand. */
    .appbar-name { display: none; }
}