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;
    position: relative; /* anchor for the absolutely placed comment bubble */
}

.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;
}

/* Tighter tab headers: Material's 160px tab minimum wastes width, pushes tabs
   behind tiny scroll arrows and leaves dead space to the right. With natural
   widths every tab is visible at once — on phones too. (Swiping the panel
   content left/right also switches tabs; see ui.js.) */
.mud-tabs .mud-tab {
    /* !important: MudBlazor sets the 160px minimum with higher specificity. */
    min-width: 0 !important;
    padding: 10px 14px;
    /* Uppercase (Material's default look) reads better here; at natural widths
       all tabs still fit a 360px phone — measured 331px total. */
    font-weight: 600;
    font-size: 0.95rem;
}

.match-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 48px; /* keeps flowing content clear of the pinned bubble */
}

.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;
}

/* The duplicate played-matches switch at the played/upcoming border. */
.played-divider {
    display: flex;
    justify-content: center;
    padding: 2px 12px;
    margin: 4px 0;
    background: color-mix(in srgb, var(--mud-palette-surface, #131c2b) 60%, transparent);
    border-top: 1px dashed var(--mud-palette-lines-default, #22304a);
    border-bottom: 1px dashed var(--mud-palette-lines-default, #22304a);
}

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

.comment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    /* Anchored to the row itself (not the flowing actions content), so the
       bubble sits at exactly the same spot on every match row no matter what
       else the row shows: vertically centered at the right edge. */
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font: inherit;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary, #8b98ab);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default, #22304a);
    border-radius: 10px;
    cursor: pointer;
}

.comment-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: currentColor;
}

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

.comment-toggle-open {
    color: var(--mud-palette-primary, #4f8ef7);
    border-color: var(--mud-palette-primary, #4f8ef7);
}

.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;
        /* Always reserve the bubble's strip, even when the row has no other actions. */
        min-height: 28px;
    }

    /* Bottom of every row, centered on the score column's own center line
       (row edge − 12px padding − 28px half column), so the bubble lines up with
       both the centered final-score digits and the score inputs. translateX(50%)
       keeps that center fixed whatever width the comment count gives the bubble.
       View predictions etc. can never move it. */
    .comment-toggle {
        top: auto;
        bottom: 10px;
        right: 40px;
        transform: translateX(50%);
    }

    .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. The 16px font matters: anything smaller
       makes iOS Safari auto-zoom the page when a field gets focus. */
    .score-box {
        width: 48px;
        height: 36px;
        font-size: 16px;
    }

    .advancer-select {
        font-size: 16px;
    }

    .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; }

    /* All four tab headers fit a 390px screen without scroll arrows. */
    .mud-tabs .mud-tab { padding: 10px 9px; font-size: 0.85rem; }
}

@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; }
}