/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-i1mlpnpxv7],
.components-reconnect-repeated-attempt-visible[b-i1mlpnpxv7],
.components-reconnect-failed-visible[b-i1mlpnpxv7],
.components-pause-visible[b-i1mlpnpxv7],
.components-resume-failed-visible[b-i1mlpnpxv7],
.components-rejoining-animation[b-i1mlpnpxv7] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-i1mlpnpxv7],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-i1mlpnpxv7],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-i1mlpnpxv7],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-i1mlpnpxv7],
#components-reconnect-modal.components-reconnect-retrying[b-i1mlpnpxv7],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-i1mlpnpxv7],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-i1mlpnpxv7],
#components-reconnect-modal.components-reconnect-failed[b-i1mlpnpxv7],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-i1mlpnpxv7] {
    display: block;
}


#components-reconnect-modal[b-i1mlpnpxv7] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-i1mlpnpxv7 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-i1mlpnpxv7 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-i1mlpnpxv7 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-i1mlpnpxv7]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-i1mlpnpxv7 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-i1mlpnpxv7 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-i1mlpnpxv7 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-i1mlpnpxv7 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-i1mlpnpxv7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-i1mlpnpxv7] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-i1mlpnpxv7] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-i1mlpnpxv7] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-i1mlpnpxv7] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-i1mlpnpxv7] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-i1mlpnpxv7] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-i1mlpnpxv7 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-i1mlpnpxv7] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-i1mlpnpxv7 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/TournamentPage.razor.rz.scp.css */
/* Styling that belongs to this page only. app.css owns the shared classes; anything added
   here is scoped to TournamentPage, so the two cannot collide. ::deep is needed wherever the
   target is inside a MudBlazor child component, which never carries the scope attribute. */

/* Holds its place whatever it is showing — usually nothing at all — so the row does not shift
   sideways as a tick appears and fades. There is no save button: the row saves itself. */
.bet-save[b-qvzybh851a] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    /* Room for the widest thing that can appear here, which is Retry with its icon. */
    min-width: 88px;
    font-size: 0.8rem;
}

/* Status, not a call to action: quiet, and the tick fades rather than standing as a claim.
   A row saying nothing is the normal, successful, uninteresting case. */
.bet-saving[b-qvzybh851a] {
    color: var(--mud-palette-text-secondary, #8b98ab);
}

.bet-saved[b-qvzybh851a] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-success, #4ca36a);
    animation: bet-saved-fade-b-qvzybh851a 3s ease-out forwards;
}

@keyframes bet-saved-fade-b-qvzybh851a {
    0%, 60% { opacity: 1; }
    100% { opacity: 0; }
}

/* Someone who typed a level knockout score has done everything the boxes ask and would
   otherwise be left thinking it was stored. */
.bet-hint[b-qvzybh851a] {
    color: var(--mud-palette-warning, #e8a13a);
    text-align: right;
    line-height: 1.2;
}

/* Reduced motion still gets the tick, it simply does not fade in front of them. */
@media (prefers-reduced-motion: reduce) {
    .bet-saved[b-qvzybh851a] { animation: none; }
}

/* For labels whose visible form is the layout itself — the advancer select's only visible words
   are its placeholder option, which disappears as soon as a team is chosen. */
.sr-only[b-qvzybh851a] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Footnotes carrying what a hover tooltip used to say, so touch and keyboard reach it too. */
.list-note[b-qvzybh851a] {
    max-width: 880px;
}

.all-bets-note[b-qvzybh851a] {
    padding: 2px 0 4px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary, #8b98ab);
}

/* The tiebreak field carries its own label now, so it needs room for the words. */
.tiebreak-row[b-qvzybh851a]  .tiebreak-field {
    width: 168px;
}

/* --- Rank race: the player list ---------------------------------------------------
   The chart's clickable SVG groups cannot be reached with a keyboard, so selection lives in
   real buttons here. The same list is the chart's text alternative, which is why it repeats
   each player's finishing position and points. The 880px measure is the one the scoreboard
   and the match list use. */
.race-players[b-qvzybh851a] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 880px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.race-player[b-qvzybh851a] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-height: 32px;
    padding: 4px 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: 16px;
    cursor: pointer;
}

.race-player:hover[b-qvzybh851a],
.race-player-on[b-qvzybh851a] {
    color: var(--mud-palette-text-primary, #e6ebf2);
}

.race-player-on[b-qvzybh851a] {
    border-color: var(--mud-palette-text-primary, #e6ebf2);
}

/* My own chip matches my own line in the chart. */
.race-player-mine[b-qvzybh851a] {
    color: var(--mud-palette-text-primary, #e6ebf2);
    border-color: var(--mud-palette-primary, #f2b705);
}

.race-player:focus-visible[b-qvzybh851a] {
    outline: 2px solid var(--mud-palette-primary, #f2b705);
    outline-offset: 2px;
}

.race-player-now[b-qvzybh851a] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0.85;
}

.race-track[b-qvzybh851a] {
    max-width: 880px;
    margin-top: 8px;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary, #8b98ab);
}

/* A number the last sync changed gets a moment of light, then settles. Neutral rather than
   amber: amber already means "provisional" in this app, and a live score is red, which reads
   badly on a warm ground. The negative margin keeps the digit exactly where it was. */
.score-num.score-changed[b-qvzybh851a] {
    border-radius: 4px;
    padding: 0 4px;
    margin: 0 -4px;
    animation: live-flash-b-qvzybh851a 2.4s ease-out forwards;
}

.stat-value.stat-changed[b-qvzybh851a] {
    border-radius: 4px;
    padding: 0 4px;
    margin: 0 -4px;
    animation: live-flash-b-qvzybh851a 2.4s ease-out forwards;
}

@keyframes live-flash-b-qvzybh851a {
    0%   { background: color-mix(in srgb, white 22%, transparent); }
    100% { background: transparent; }
}

/* How far the live scores have moved the viewer, next to their position. Green up, amber down:
   dropping is worth noticing but is not an error, and red is already the live-score colour. */
.rank-delta[b-qvzybh851a] {
    margin-left: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    vertical-align: middle;
}

.rank-up[b-qvzybh851a]   { color: var(--mud-palette-success, #4ca36a); }
.rank-down[b-qvzybh851a] { color: var(--mud-palette-warning, #e8a13a); }

/* The dashed pill borrowed from the scoreboard sits mid-height next to the big number. */
.stat-value .points-pill[b-qvzybh851a] {
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .score-num.score-changed[b-qvzybh851a],
    .stat-value.stat-changed[b-qvzybh851a] { animation: none; }
}
/* /Components/Shared/PlayerAvatar.razor.rz.scp.css */
/* The ink is the app's dark, which every colour in the palette carries at well past 4.5:1 —
   the same choice the Live badge makes, and for the same reason. */
.player-avatar[b-6jd0xboxga] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #0b1220;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    /* Initials are letters, not words: centring them optically needs no descender room. */
    text-transform: uppercase;
    user-select: none;
}

.player-avatar-small[b-6jd0xboxga] {
    width: 24px;
    height: 24px;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
}

.player-avatar-medium[b-6jd0xboxga] {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
}

.player-avatar-large[b-6jd0xboxga] {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
}
/* /Components/Shared/TournamentCard.razor.rz.scp.css */
/* The status chip, with the live pill in front of it while a match is on. Right-aligned and
   allowed to wrap, so a narrow card stacks the two rather than squeezing either. */
.tournament-card-chips[b-imw1429o0o] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

/* The match list's live badge, sat level with the chip beside it. */
.live-pill[b-imw1429o0o] {
    align-self: center;
}