/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-ejtq6xudbt] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ejtq6xudbt] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-8lionf3oos],
.components-reconnect-repeated-attempt-visible[b-8lionf3oos],
.components-reconnect-failed-visible[b-8lionf3oos],
.components-pause-visible[b-8lionf3oos],
.components-resume-failed-visible[b-8lionf3oos],
.components-rejoining-animation[b-8lionf3oos] {
    display: none;
}

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


#components-reconnect-modal[b-8lionf3oos] {
    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-8lionf3oos 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-8lionf3oos {
    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/Board.razor.rz.scp.css */
/* Flagship Black & Cream (style guide §2). Layout is skin-independent; a skin swaps the
   --board-* tokens and the board fonts only (US-9.3). One viewport — never scrolls. */

/* Ground frame (Phase 12): the skin paints the surround; a nameplate sits in the top band. */
.ground[b-iif0wjwe9c] {
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .05), rgba(0, 0, 0, .18)),
        var(--board-frame);
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25), inset 0 0 0 5px rgba(255, 255, 255, .08);
}

.ground-plate[b-iif0wjwe9c] {
    position: absolute;
    top: clamp(2px, 1vh, 10px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-board);
    font-size: clamp(12px, 3.2vh, 30px);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--board-plate);
    opacity: .85;
    white-space: nowrap;
    z-index: 2;
}

/* Numerals in the skin's tin-number face */
.v[b-iif0wjwe9c],
.total-num[b-iif0wjwe9c],
.fc-total[b-iif0wjwe9c],
.num-badge[b-iif0wjwe9c],
.fall[b-iif0wjwe9c] {
    font-family: var(--font-board-num);
}

.board[b-iif0wjwe9c] {
    position: fixed;
    inset: 0;
    margin: clamp(26px, 6.5vh, 60px) clamp(14px, 3vw, 44px) clamp(10px, 2.5vh, 32px);
    background: var(--board-bg);
    color: var(--board-plate);
    font-family: var(--font-board);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: clamp(8px, 2vh, 28px) clamp(12px, 3vw, 48px);
    gap: clamp(4px, 1.2vh, 16px);
    overflow: hidden;
}

[b-iif0wjwe9c] body {
    background: var(--board-frame);
}

.board.waiting[b-iif0wjwe9c] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.waiting-text[b-iif0wjwe9c] {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 2vh, 20px);
}

.waiting-text .sub[b-iif0wjwe9c] {
    color: var(--board-plate-dim);
    font-size: clamp(14px, 3.4vh, 36px);
}

/* Match-code entry on the waiting board */
.code-entry[b-iif0wjwe9c] {
    display: flex;
    gap: clamp(6px, 1vw, 14px);
    justify-content: center;
    margin-top: clamp(8px, 2vh, 24px);
}

.code-entry input[b-iif0wjwe9c] {
    background: none;
    border: 1px solid var(--board-line);
    border-radius: 4px;
    color: var(--board-plate);
    font-family: var(--font-board-num);
    font-size: clamp(16px, 3.6vh, 34px);
    letter-spacing: .3em;
    text-transform: uppercase;
    text-align: center;
    width: clamp(160px, 22vw, 300px);
    padding: clamp(4px, 1vh, 10px);
}

.code-entry input:focus[b-iif0wjwe9c] {
    outline: none;
    border-color: var(--board-plate-dim);
}

.code-entry button[b-iif0wjwe9c] {
    background: none;
    border: 1px solid var(--board-line);
    border-radius: 4px;
    color: var(--board-accent);
    font-family: var(--font-board);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: clamp(13px, 2.8vh, 26px);
    padding: 0 clamp(10px, 1.6vw, 22px);
    cursor: pointer;
}

.code-entry button:disabled[b-iif0wjwe9c] {
    opacity: .35;
    cursor: default;
}

.row[b-iif0wjwe9c] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.hdr[b-iif0wjwe9c] {
    border-bottom: 2px solid var(--board-line);
    padding-bottom: clamp(4px, 1vh, 12px);
}

.team[b-iif0wjwe9c] {
    font-size: clamp(20px, 5.5vh, 56px);
    font-weight: 600;
}

.innings[b-iif0wjwe9c] {
    font-size: clamp(13px, 3vh, 30px);
    color: var(--board-plate-dim);
}

.summary[b-iif0wjwe9c] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(6px, 2vh, 20px);
    min-height: 0;
    max-width: min(80vw, 900px);
    width: 100%;
    margin: 0 auto;
}

.main[b-iif0wjwe9c] {
    display: grid;
    grid-template-columns: 1.15fr .85fr 1.1fr;
    gap: clamp(10px, 3vw, 56px);
    min-height: 0;
    align-content: center;
}

.col[b-iif0wjwe9c] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(2px, 1vh, 12px);
    min-width: 0;
}

.line[b-iif0wjwe9c] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5em;
    font-size: clamp(17px, 4.6vh, 48px);
    font-weight: 500;
    border-bottom: 1px solid var(--board-line);
    padding-bottom: clamp(2px, .6vh, 8px);
    white-space: nowrap;
    overflow: hidden;
}

.line .n[b-iif0wjwe9c] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.line .v[b-iif0wjwe9c] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.line.small[b-iif0wjwe9c] {
    font-size: clamp(12px, 2.8vh, 28px);
}

.dim[b-iif0wjwe9c] {
    color: var(--board-plate-dim);
}

.lbl[b-iif0wjwe9c] {
    font-size: clamp(11px, 2.4vh, 24px);
    color: var(--board-plate-dim);
    letter-spacing: .12em;
}

.lbl.gap[b-iif0wjwe9c] {
    margin-top: clamp(4px, 1.4vh, 18px);
}

.lbl.center[b-iif0wjwe9c] {
    text-align: center;
}

.total-num[b-iif0wjwe9c] {
    font-size: clamp(56px, 15vh, 170px);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.total-sub[b-iif0wjwe9c] {
    display: flex;
    justify-content: space-between;
    font-size: clamp(14px, 3.4vh, 36px);
}

.total-sub .v[b-iif0wjwe9c] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.foot[b-iif0wjwe9c] {
    border-top: 2px solid var(--board-line);
    padding-top: clamp(4px, 1vh, 12px);
    gap: 1em;
}

.fow[b-iif0wjwe9c] {
    font-size: clamp(12px, 2.8vh, 28px);
    color: var(--board-plate-dim);
}

.target[b-iif0wjwe9c] {
    font-size: clamp(13px, 3vh, 32px);
    color: var(--board-accent);
    font-weight: 600;
}

.board-flag[b-iif0wjwe9c] {
    font-size: clamp(13px, 3vh, 32px);
    color: var(--board-accent);
    font-weight: 600;
    letter-spacing: .14em;
    animation: flag-blink-b-iif0wjwe9c 1.6s step-end infinite;
}

@keyframes flag-blink-b-iif0wjwe9c {
    50% {
        opacity: .45;
    }
}

@media (prefers-reduced-motion: reduce) {
    .board-flag[b-iif0wjwe9c] {
        animation: none;
    }
}

/* Full-card layout (Phase 12 — Adelaide convention) */
.fullcard[b-iif0wjwe9c] {
    display: grid;
    grid-template-columns: .85fr 1fr 1.35fr;
    gap: clamp(10px, 2.6vw, 44px);
    min-height: 0;
    overflow: hidden;
}

.fc-col[b-iif0wjwe9c] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1px, .4vh, 5px);
    min-width: 0;
}

/* Sized so a full XI (header + 11 rows) plus totals always fits one viewport */
.fc-head[b-iif0wjwe9c],
.fc-row[b-iif0wjwe9c],
.fc-line[b-iif0wjwe9c] {
    display: flex;
    align-items: baseline;
    gap: .5em;
    border-bottom: 1px solid var(--board-line);
    padding-bottom: clamp(1px, .25vh, 3px);
    font-size: clamp(9px, 2.2vh, 24px);
    line-height: 1.15;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

.fullcard .lbl[b-iif0wjwe9c] {
    font-size: clamp(9px, 1.9vh, 20px);
}

.fc-head[b-iif0wjwe9c] {
    color: var(--board-accent);
    letter-spacing: .1em;
    border-bottom-width: 2px;
}

.fc-head .n[b-iif0wjwe9c],
.fc-row .n[b-iif0wjwe9c],
.fc-line .n[b-iif0wjwe9c] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-head .c[b-iif0wjwe9c],
.fc-row .c[b-iif0wjwe9c] {
    width: clamp(22px, 4.6vw, 60px);
    text-align: right;
    flex: none;
}

.fc-row.dim[b-iif0wjwe9c],
.fc-line .dim[b-iif0wjwe9c],
.fc-row.dim .v[b-iif0wjwe9c] {
    color: var(--board-plate-dim);
}

.fc-line .v[b-iif0wjwe9c],
.fc-row .v[b-iif0wjwe9c] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fc-line .n.dim[b-iif0wjwe9c] {
    color: var(--board-plate-dim);
}

.num-badge[b-iif0wjwe9c] {
    flex: none;
    width: 1.3em;
    color: var(--board-accent);
    font-weight: 600;
}

.fc-total[b-iif0wjwe9c] {
    font-size: clamp(24px, 6.5vh, 72px);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.fall[b-iif0wjwe9c] {
    color: var(--board-accent);
}

.lbl.center[b-iif0wjwe9c] {
    text-align: center;
}

/* Live clock hands over the facade's dial (template geometry: centre 800,60 r25 of 1600x900) */
.live-clock[b-iif0wjwe9c] {
    position: fixed;
    left: 48.4375%;
    top: 3.889%;
    width: 3.125%;
    height: 5.556%;
    z-index: 2;
    pointer-events: none;
}

/* Layout toggle — the one deliberate interactive element on the board (Phase 12) */
.layout-toggle[b-iif0wjwe9c] {
    position: fixed;
    right: clamp(18px, 3.4vw, 52px);
    bottom: clamp(2px, .9vh, 9px);
    z-index: 3;
    background: none;
    border: 1px solid var(--board-line);
    border-radius: 999px;
    color: var(--board-plate-dim);
    font-family: var(--font-board);
    font-size: clamp(10px, 2vh, 18px);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 1px clamp(8px, 1.4vw, 18px);
    cursor: pointer;
    opacity: .75;
}

.layout-toggle:hover[b-iif0wjwe9c] {
    color: var(--board-plate);
    border-color: var(--board-plate-dim);
}

/* Celebration overlay (US-9.5) — same plate language as the board, gone in 4s */
.celebration[b-iif0wjwe9c] {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--board-bg) 88%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 2vh, 20px);
    font-family: var(--font-board);
    text-transform: uppercase;
    color: var(--board-plate);
    animation: overlay-in-b-iif0wjwe9c .3s ease-out;
}

.cry[b-iif0wjwe9c] {
    font-size: clamp(40px, 14vh, 140px);
    font-weight: 600;
    letter-spacing: .06em;
    animation: cry-slam-b-iif0wjwe9c .45s cubic-bezier(.2, 1.4, .4, 1) both;
    animation-delay: .55s;
}

.who-out[b-iif0wjwe9c] {
    font-size: clamp(16px, 4vh, 40px);
    color: var(--board-plate-dim);
    letter-spacing: .08em;
    animation: cry-slam-b-iif0wjwe9c .4s ease-out both;
    animation-delay: .8s;
}

.celebration.golden .cry[b-iif0wjwe9c] {
    color: var(--board-accent);
}

/* stumps */
.stumps[b-iif0wjwe9c] {
    width: clamp(90px, 22vh, 200px);
    height: auto;
    fill: var(--board-plate);
}

.stumps .bail[b-iif0wjwe9c] {
    fill: var(--board-plate);
}

.clattered .bail-left[b-iif0wjwe9c] {
    animation: bail-fly-left-b-iif0wjwe9c 1s ease-out both;
    animation-delay: .35s;
}

.clattered .bail-right[b-iif0wjwe9c],
.broken .bail-right[b-iif0wjwe9c] {
    animation: bail-fly-right-b-iif0wjwe9c 1s ease-out both;
    animation-delay: .35s;
}

.clattered .stump.mid[b-iif0wjwe9c] {
    transform-origin: 60px 114px;
    animation: stump-lean-b-iif0wjwe9c .5s ease-out both;
    animation-delay: .4s;
}

.appeal[b-iif0wjwe9c] {
    animation: appeal-shake-b-iif0wjwe9c .5s ease-in-out;
    animation-delay: .35s;
}

.taken .ball[b-iif0wjwe9c] {
    animation: ball-arc-b-iif0wjwe9c 0.9s cubic-bezier(.3, 0, .7, 1) both;
}

.duck[b-iif0wjwe9c] {
    width: clamp(110px, 26vh, 240px);
    height: auto;
    fill: var(--board-plate);
    animation: duck-waddle-b-iif0wjwe9c 3.4s ease-in-out both;
}

.duck .eye[b-iif0wjwe9c] {
    fill: var(--board-bg);
}

.duck .wing[b-iif0wjwe9c] {
    fill: var(--board-bg);
    opacity: .25;
}

.celebration.golden .duck[b-iif0wjwe9c] {
    fill: var(--board-accent);
}

@keyframes overlay-in-b-iif0wjwe9c {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cry-slam-b-iif0wjwe9c {
    from {
        opacity: 0;
        transform: scale(2.2);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bail-fly-left-b-iif0wjwe9c {
    to {
        transform: translate(-70px, -60px) rotate(-230deg);
        opacity: 0;
    }
}

@keyframes bail-fly-right-b-iif0wjwe9c {
    to {
        transform: translate(75px, -50px) rotate(260deg);
        opacity: 0;
    }
}

@keyframes stump-lean-b-iif0wjwe9c {
    to {
        transform: rotate(14deg);
    }
}

@keyframes appeal-shake-b-iif0wjwe9c {
    0%, 100% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-4deg);
    }

    75% {
        transform: rotate(4deg);
    }
}

@keyframes ball-arc-b-iif0wjwe9c {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    60% {
        transform: translate(75px, -26px);
    }

    100% {
        transform: translate(112px, 16px);
        opacity: 1;
    }
}

@keyframes duck-waddle-b-iif0wjwe9c {
    0% {
        transform: translateX(-46vw) rotate(-4deg);
    }

    25% {
        transform: translateX(-23vw) rotate(4deg);
    }

    50% {
        transform: translateX(0) rotate(-4deg);
    }

    75% {
        transform: translateX(23vw) rotate(4deg);
    }

    100% {
        transform: translateX(46vw) rotate(-4deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .celebration[b-iif0wjwe9c],
    .celebration *[b-iif0wjwe9c] {
        animation: none !important;
    }
}

.rotate-hint[b-iif0wjwe9c] {
    display: none;
}

@media (orientation: portrait) {
    .board[b-iif0wjwe9c] {
        display: none;
    }

    .rotate-hint[b-iif0wjwe9c] {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--board-bg);
        color: var(--board-plate-dim);
        font-family: var(--font-board);
        text-transform: uppercase;
        font-size: clamp(18px, 3vw, 40px);
        letter-spacing: .04em;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home[b-4dx3os35rn] {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

h1[b-4dx3os35rn] {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 var(--space-6);
}

h2[b-4dx3os35rn] {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--desk-ink-soft);
    margin: var(--space-7) 0 var(--space-3);
}

.account-line[b-4dx3os35rn] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    color: var(--desk-ink-soft);
    font-size: 13px;
    margin-bottom: var(--space-2);
}

.account-line a[b-4dx3os35rn] {
    color: var(--desk-accent);
    text-decoration: none;
}

.account-line a:hover[b-4dx3os35rn] {
    text-decoration: underline;
}

.muted[b-4dx3os35rn] {
    color: var(--desk-ink-soft);
    font-size: 13px;
    display: block;
}

.empty[b-4dx3os35rn] {
    text-align: center;
    padding: var(--space-11) 0;
}

.empty p[b-4dx3os35rn] {
    color: var(--desk-ink-soft);
    margin-bottom: var(--space-5);
}

.actions[b-4dx3os35rn] {
    display: flex;
    gap: var(--space-3);
}

.match-card[b-4dx3os35rn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--desk-surface);
    border: 1px solid var(--desk-rule);
    border-radius: var(--radius-card);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
}

.btn-primary[b-4dx3os35rn] {
    background: var(--desk-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    height: 40px;
    padding: 0 var(--space-5);
    font: 600 15px var(--font-desk);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-primary:hover[b-4dx3os35rn] {
    filter: brightness(.92);
}

.btn-secondary[b-4dx3os35rn] {
    background: var(--desk-surface);
    color: var(--desk-ink);
    border: 1px solid var(--desk-rule);
    border-radius: var(--radius-btn);
    height: 40px;
    padding: 0 var(--space-5);
    font: 500 15px var(--font-desk);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-secondary:hover[b-4dx3os35rn] {
    border-color: var(--desk-accent);
}

.card-actions[b-4dx3os35rn] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.btn-danger-ghost[b-4dx3os35rn] {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    height: 40px;
    padding: 0 var(--space-3);
    font: 500 14px var(--font-desk);
    color: var(--desk-danger);
    cursor: pointer;
}

.btn-danger-ghost:hover[b-4dx3os35rn] {
    border-color: var(--desk-danger);
}
/* /Components/Pages/Print.razor.rz.scp.css */
.loading[b-owxi8gnorm] {
    padding: var(--space-8);
    color: var(--desk-ink-soft);
}

.sheet[b-owxi8gnorm] {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-6);
    background: #fff;
    color: #000;
}

.toolbar[b-owxi8gnorm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
}

.toolbar a[b-owxi8gnorm] {
    color: var(--desk-accent);
    text-decoration: none;
}

.btn-primary[b-owxi8gnorm] {
    background: var(--desk-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    height: 40px;
    padding: 0 var(--space-5);
    font: 600 15px var(--font-desk);
    cursor: pointer;
}

header h1[b-owxi8gnorm] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.meta-line[b-owxi8gnorm] {
    color: #333;
    font-size: 13px;
    margin: var(--space-1) 0;
}

.result-line[b-owxi8gnorm] {
    font-weight: 650;
    margin: var(--space-1) 0 var(--space-5);
    border-bottom: 2px solid #000;
    padding-bottom: var(--space-3);
}

section[b-owxi8gnorm] {
    margin-bottom: var(--space-7);
    break-inside: avoid;
}

h2[b-owxi8gnorm] {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 650;
    margin: 0 0 var(--space-2);
}

table[b-owxi8gnorm] {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

table.bowling[b-owxi8gnorm] {
    margin-top: var(--space-3);
}

th[b-owxi8gnorm] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
    border-bottom: 1px solid #000;
    padding: 2px 6px;
}

th.num[b-owxi8gnorm],
td.num[b-owxi8gnorm] {
    text-align: right;
    width: 40px;
}

td[b-owxi8gnorm] {
    padding: 3px 6px;
    border-bottom: 1px solid #ccc;
}

.howout[b-owxi8gnorm] {
    color: #444;
}

.dnb[b-owxi8gnorm] {
    color: #444;
    font-style: italic;
}

.extras-line[b-owxi8gnorm],
.fow-line[b-owxi8gnorm] {
    font-size: 13px;
    margin: var(--space-2) 0;
}

footer[b-owxi8gnorm] {
    margin-top: var(--space-8);
    color: #777;
    font-size: 11px;
    text-align: center;
}

@media print {
    .no-print[b-owxi8gnorm] {
        display: none;
    }

    .sheet[b-owxi8gnorm] {
        max-width: none;
        padding: 0;
    }
}
/* /Components/Pages/Score.razor.rz.scp.css */
.loading[b-y3qdk309ze] {
    padding: var(--space-8);
    color: var(--desk-ink-soft);
}

.score-page[b-y3qdk309ze] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* top bar — kept above modal scrims so Save & exit always works (autosave makes leaving safe) */
.topbar[b-y3qdk309ze] {
    height: 56px;
    background: var(--desk-surface);
    border-bottom: 1px solid var(--desk-rule);
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: 0 var(--space-7);
    flex: none;
    position: relative;
    z-index: 60;
}

.brand[b-y3qdk309ze] {
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--desk-ink);
    text-decoration: none;
    white-space: nowrap;
}

.state-line[b-y3qdk309ze] {
    color: var(--desk-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.actions[b-y3qdk309ze] {
    margin-left: auto;
    display: flex;
    gap: var(--space-2);
}

.match-code[b-y3qdk309ze] {
    align-self: center;
    font: 650 14px var(--font-desk);
    letter-spacing: .06em;
    color: var(--desk-accent);
    white-space: nowrap;
}

.clock[b-y3qdk309ze] {
    align-self: center;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    color: var(--desk-ink);
    white-space: nowrap;
}

.clock.expired[b-y3qdk309ze] {
    color: var(--desk-danger);
}

.btn2[b-y3qdk309ze] {
    background: var(--desk-surface);
    border: 1px solid var(--desk-rule);
    border-radius: var(--radius-btn);
    height: 36px;
    padding: 0 var(--space-3);
    font: 500 14px var(--font-desk);
    color: var(--desk-ink);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.btn2:hover[b-y3qdk309ze] {
    border-color: var(--desk-accent);
}

.btn2:disabled[b-y3qdk309ze] {
    opacity: .4;
    cursor: default;
}

.btn2.danger[b-y3qdk309ze] {
    color: var(--desk-danger);
    border-color: var(--desk-danger);
}

/* scorecard region */
.card-region[b-y3qdk309ze] {
    flex: 1;
    overflow: auto;
    padding: var(--space-6) var(--space-7);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: var(--space-6);
    align-content: start;
}

.panel[b-y3qdk309ze] {
    background: var(--desk-surface);
    border: 1px solid var(--desk-rule);
    border-radius: var(--radius-card);
    padding: var(--space-5);
}

.panel.past[b-y3qdk309ze] {
    opacity: .75;
}

.panel h2[b-y3qdk309ze] {
    font-size: 17px;
    font-weight: 650;
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
}

.panel h2 .tot[b-y3qdk309ze] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table[b-y3qdk309ze] {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

table.bowling[b-y3qdk309ze] {
    margin-top: var(--space-4);
}

th[b-y3qdk309ze] {
    font: 600 11px var(--font-desk);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--desk-ink-soft);
    text-align: left;
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--desk-rule);
}

th.num[b-y3qdk309ze],
td.num[b-y3qdk309ze] {
    text-align: right;
    width: 44px;
}

td[b-y3qdk309ze] {
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--desk-rule);
    height: 32px;
}

tr.active td[b-y3qdk309ze] {
    background: var(--desk-accent-soft);
}

tr.dim td[b-y3qdk309ze] {
    color: var(--desk-ink-soft);
}

.howout[b-y3qdk309ze] {
    color: var(--desk-ink-soft);
    font-size: 13px;
}

.meta[b-y3qdk309ze] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    color: var(--desk-ink-soft);
    font-size: 13px;
    padding-top: var(--space-3);
    flex-wrap: wrap;
}

.meta .target[b-y3qdk309ze] {
    color: var(--desk-accent);
    font-weight: 600;
}

/* first-ball callout (F-12) */
.callout[b-y3qdk309ze] {
    flex: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    background: var(--desk-accent-soft);
    border-top: 1px solid var(--desk-rule);
    padding: var(--space-2) var(--space-7);
    font-size: 13px;
    color: var(--desk-ink-soft);
}

.callout strong[b-y3qdk309ze] {
    color: var(--desk-ink);
}

.callout button[b-y3qdk309ze] {
    background: none;
    border: none;
    color: var(--desk-accent);
    font: 500 13px var(--font-desk);
    cursor: pointer;
    white-space: nowrap;
}

/* entry panel */
.entry[b-y3qdk309ze] {
    flex: none;
    background: var(--desk-surface);
    border-top: 1px solid var(--desk-rule);
    padding: var(--space-4) var(--space-7) var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-7);
    align-items: center;
    min-height: 120px;
}

.entry.completed[b-y3qdk309ze] {
    justify-content: space-between;
    font-size: 19px;
}

.entry.waiting[b-y3qdk309ze] {
    color: var(--desk-ink-soft);
}

/* Inline pick panels (batsman / bowler / innings start) — replaced modals in D-019 so the
   adjacent ad slot is a plain in-page unit, never an overlay. */
.entry.picker[b-y3qdk309ze] {
    display: block;
    max-height: 46vh;
    overflow-y: auto;
}

.entry.picker h3[b-y3qdk309ze] {
    margin: 0 0 var(--space-3);
    font-size: 16px;
}

.entry.picker .modal-actions[b-y3qdk309ze] {
    margin-top: var(--space-3);
}

.context[b-y3qdk309ze] {
    flex: 1 1 100%;
    color: var(--desk-ink-soft);
    font-size: 13px;
}

.context strong[b-y3qdk309ze] {
    color: var(--desk-ink);
}

.over-balls[b-y3qdk309ze] {
    margin-left: var(--space-4);
    font-variant-numeric: tabular-nums;
    letter-spacing: .1em;
}

.flag[b-y3qdk309ze] {
    margin-left: var(--space-3);
    padding: 1px var(--space-2);
    border-radius: var(--radius-badge);
    background: var(--desk-accent-soft);
    color: var(--desk-accent);
    font: 600 11px var(--font-desk);
    letter-spacing: .08em;
}

.flag.danger-flag[b-y3qdk309ze] {
    background: #F7E6E4;
    color: var(--desk-danger);
}

.keys[b-y3qdk309ze] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.keys .lbl[b-y3qdk309ze] {
    font: 600 12px var(--font-desk);
    color: var(--desk-ink-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-right: var(--space-1);
}

.key[b-y3qdk309ze] {
    min-width: 56px;
    height: 56px;
    background: var(--desk-surface);
    border: 1.5px solid var(--desk-rule);
    border-radius: var(--radius-key);
    font: 650 22px var(--font-desk);
    color: var(--desk-ink);
    cursor: pointer;
}

.key:hover[b-y3qdk309ze] {
    border-color: var(--desk-accent);
}

.key:active[b-y3qdk309ze] {
    background: var(--desk-accent-soft);
}

.key.wide[b-y3qdk309ze] {
    width: auto;
    padding: 0 var(--space-4);
    font-size: 16px;
}

.key.danger[b-y3qdk309ze] {
    border-color: var(--desk-danger);
    color: var(--desk-danger);
    width: auto;
    padding: 0 var(--space-5);
    font-size: 18px;
}

.key.powerplay-key[b-y3qdk309ze] {
    border-color: var(--desk-accent);
    color: var(--desk-accent);
    font-size: 15px;
}

.key.ghost[b-y3qdk309ze] {
    border-style: dashed;
    font-size: 18px;
    color: var(--desk-ink-soft);
}

.hint[b-y3qdk309ze] {
    color: var(--desk-warn);
    font-size: 13px;
    margin-left: var(--space-3);
}

.error-banner[b-y3qdk309ze] {
    position: fixed;
    bottom: 140px;
    left: var(--space-7);
    background: var(--desk-danger);
    color: #fff;
    border-radius: var(--radius-btn);
    padding: var(--space-3) var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    z-index: 30;
}

.error-banner button[b-y3qdk309ze] {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

/* ball log drawer */
.log-drawer[b-y3qdk309ze] {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 340px;
    background: var(--desk-surface);
    border-left: 1px solid var(--desk-rule);
    box-shadow: var(--shadow-modal);
    padding: var(--space-4);
    overflow-y: auto;
    z-index: 20;
}

.log-drawer header[b-y3qdk309ze] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.log-drawer h3[b-y3qdk309ze] {
    margin: 0;
    font-size: 17px;
    font-weight: 650;
}

.log-drawer h4[b-y3qdk309ze] {
    margin: var(--space-4) 0 var(--space-2);
    font: 600 11px var(--font-desk);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--desk-ink-soft);
}

.log-row[b-y3qdk309ze] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--desk-rule);
    padding: var(--space-2) var(--space-1);
    font: 450 14px var(--font-desk);
    color: var(--desk-ink);
    cursor: pointer;
    text-align: left;
}

.log-row:hover[b-y3qdk309ze] {
    background: var(--desk-accent-soft);
}

.log-row .ob[b-y3qdk309ze] {
    font-variant-numeric: tabular-nums;
    color: var(--desk-ink-soft);
    width: 36px;
    flex: none;
}

.log-row .who[b-y3qdk309ze] {
    flex: none;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-row .what[b-y3qdk309ze] {
    flex: 1;
    color: var(--desk-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-row .pencil[b-y3qdk309ze] {
    color: var(--desk-accent);
}

.preview-list[b-y3qdk309ze] {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
    font-size: 14px;
    line-height: 1.6;
}

/* modals */
.scrim[b-y3qdk309ze] {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 16, .45);
    z-index: 40;
}

.modal[b-y3qdk309ze] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    overflow: auto;
    background: var(--desk-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
    padding: var(--space-5);
    z-index: 50;
}

.modal h3[b-y3qdk309ze] {
    margin: 0 0 var(--space-4);
    font-size: 19px;
    font-weight: 650;
}

.last-over[b-y3qdk309ze] {
    color: var(--desk-ink-soft);
    font-size: 13px;
    margin: 0 0 var(--space-3);
    font-variant-numeric: tabular-nums;
}

.last-over strong[b-y3qdk309ze] {
    color: var(--desk-ink);
}

.choice-row[b-y3qdk309ze] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.choice-list[b-y3qdk309ze] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.choice[b-y3qdk309ze] {
    background: var(--desk-surface);
    border: 1.5px solid var(--desk-rule);
    border-radius: var(--radius-btn);
    padding: var(--space-3) var(--space-4);
    font: 500 15px var(--font-desk);
    color: var(--desk-ink);
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

.choice:hover:enabled[b-y3qdk309ze] {
    border-color: var(--desk-accent);
}

.choice.active[b-y3qdk309ze] {
    border-color: var(--desk-accent);
    background: var(--desk-accent-soft);
}

.choice:disabled[b-y3qdk309ze] {
    opacity: .45;
    cursor: default;
}

.choice .figures[b-y3qdk309ze] {
    color: var(--desk-ink-soft);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.field[b-y3qdk309ze] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 13px;
    color: var(--desk-ink-soft);
    margin-bottom: var(--space-3);
}

.field select[b-y3qdk309ze] {
    height: 40px;
    border: 1px solid var(--desk-rule);
    border-radius: var(--radius-btn);
    background: var(--desk-surface);
    font: 450 15px var(--font-desk);
    color: var(--desk-ink);
    padding: 0 var(--space-3);
}

.override[b-y3qdk309ze] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--desk-warn);
    margin-bottom: var(--space-3);
}

.modal-actions[b-y3qdk309ze] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

.modal-actions .delete-ball[b-y3qdk309ze] {
    margin-right: auto;
}

.btn-primary[b-y3qdk309ze] {
    background: var(--desk-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    height: 40px;
    padding: 0 var(--space-5);
    font: 600 15px var(--font-desk);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-primary:disabled[b-y3qdk309ze] {
    background: var(--desk-rule);
    color: var(--desk-ink-soft);
    cursor: default;
}

.btn-danger[b-y3qdk309ze] {
    background: var(--desk-danger);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    height: 40px;
    padding: 0 var(--space-5);
    font: 600 15px var(--font-desk);
    cursor: pointer;
}

.btn-danger:disabled[b-y3qdk309ze] {
    background: var(--desk-rule);
    color: var(--desk-ink-soft);
    cursor: default;
}
/* /Components/Pages/Setup.razor.rz.scp.css */
.setup[b-yfcsyhiyb0] {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-6) var(--space-10);
}

header[b-yfcsyhiyb0] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-6);
}

h1[b-yfcsyhiyb0] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.steps[b-yfcsyhiyb0] {
    color: var(--desk-ink-soft);
    font-size: 13px;
}

h2[b-yfcsyhiyb0] {
    font-size: 19px;
    font-weight: 650;
    margin: 0 0 var(--space-4);
}

.presets[b-yfcsyhiyb0] {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.preset[b-yfcsyhiyb0] {
    flex: 1;
    background: var(--desk-surface);
    border: 1.5px solid var(--desk-rule);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    text-align: left;
    cursor: pointer;
    font: 450 15px var(--font-desk);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.preset span[b-yfcsyhiyb0] {
    color: var(--desk-ink-soft);
    font-size: 13px;
}

.preset.active[b-yfcsyhiyb0] {
    border-color: var(--desk-accent);
    background: var(--desk-accent-soft);
}

.preset .delete[b-yfcsyhiyb0] {
    color: var(--desk-danger);
    font-size: 12px;
    align-self: flex-end;
    cursor: pointer;
}

.save-row[b-yfcsyhiyb0] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-3);
}

.save-row input[b-yfcsyhiyb0] {
    height: 36px;
    min-width: 0;
    flex: 1;
    max-width: 260px;
}

.load-team[b-yfcsyhiyb0] {
    width: 100%;
    margin-bottom: var(--space-2);
    height: 36px;
}

.reorder[b-yfcsyhiyb0] {
    background: none;
    border: none;
    color: var(--desk-ink-soft);
    cursor: pointer;
    font-size: 11px;
    padding: 0 var(--space-1);
}

.reorder:disabled[b-yfcsyhiyb0] {
    opacity: .25;
    cursor: default;
}

.reorder:hover:enabled[b-yfcsyhiyb0] {
    color: var(--desk-accent);
}

.fields[b-yfcsyhiyb0] {
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

label[b-yfcsyhiyb0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 13px;
    color: var(--desk-ink-soft);
}

input[b-yfcsyhiyb0],
select[b-yfcsyhiyb0] {
    height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--desk-rule);
    border-radius: var(--radius-btn);
    background: var(--desk-surface);
    font: 450 15px var(--font-desk);
    color: var(--desk-ink);
    min-width: 180px;
}

input:focus[b-yfcsyhiyb0],
select:focus[b-yfcsyhiyb0] {
    border-color: var(--desk-accent);
    outline: none;
}

.hint[b-yfcsyhiyb0] {
    color: var(--desk-ink-soft);
    font-size: 13px;
    align-self: end;
    margin: 0 0 var(--space-2);
}

.teams[b-yfcsyhiyb0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
}

.team-name[b-yfcsyhiyb0] {
    width: 100%;
    font-weight: 650;
    margin-bottom: var(--space-3);
}

.player-row[b-yfcsyhiyb0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.player-row .order[b-yfcsyhiyb0] {
    width: 20px;
    text-align: right;
    color: var(--desk-ink-soft);
    font-size: 13px;
}

.player-row input[b-yfcsyhiyb0] {
    flex: 1;
    height: 34px;
    min-width: 0;
}

.error[b-yfcsyhiyb0] {
    color: var(--desk-danger);
    font-size: 13px;
}

/* Ground skins (Phase 12) */
.ground-h[b-yfcsyhiyb0] {
    margin-top: var(--space-6);
}

.presets.grounds[b-yfcsyhiyb0] {
    flex-wrap: wrap;
}

.preset.ground[b-yfcsyhiyb0] {
    flex: 1 1 150px;
    align-items: flex-start;
}

.swatch[b-yfcsyhiyb0] {
    display: inline-flex;
    gap: 2px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 3px solid;
    font: 600 14px "Oswald", sans-serif;
    margin-bottom: var(--space-1);
}

.customise[b-yfcsyhiyb0] {
    margin: var(--space-4) 0;
    color: var(--desk-ink-soft);
    font-size: 14px;
}

.customise summary[b-yfcsyhiyb0] {
    cursor: pointer;
    color: var(--desk-accent);
    margin-bottom: var(--space-3);
}

.customise input[type="color"][b-yfcsyhiyb0] {
    min-width: 64px;
    height: 36px;
    padding: 2px;
}

.inset-row[b-yfcsyhiyb0] {
    display: flex;
    gap: var(--space-2);
}

.inset-row input[b-yfcsyhiyb0] {
    min-width: 0;
    width: 72px;
}

/* Live skin preview (sample data) */
.board-preview[b-yfcsyhiyb0] {
    position: relative;
    width: min(680px, 100%);
    aspect-ratio: 16 / 9;
    background-size: 100% 100%;
    background-color: var(--board-frame);
    border-radius: 6px;
    overflow: hidden;
    margin: var(--space-4) 0;
    box-shadow: var(--shadow-modal);
}

.bp-plate[b-yfcsyhiyb0] {
    position: absolute;
    top: 2.5%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-board);
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: 11px;
    color: var(--board-plate);
    opacity: .85;
}

.bp-board[b-yfcsyhiyb0] {
    position: absolute;
    background: var(--board-bg);
    color: var(--board-plate);
    font-family: var(--font-board);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5% 3.5%;
    font-size: 12px;
}

.bp-num[b-yfcsyhiyb0] {
    font-family: var(--font-board-num);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bp-hdr[b-yfcsyhiyb0] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--board-line);
    padding-bottom: 2px;
    font-size: 15px;
    font-weight: 600;
}

.bp-dim[b-yfcsyhiyb0],
.bp-hdr .bp-dim[b-yfcsyhiyb0] {
    color: var(--board-plate-dim);
    font-size: 10px;
    letter-spacing: .1em;
}

.bp-acc[b-yfcsyhiyb0] {
    color: var(--board-accent);
    font-size: 10px;
    letter-spacing: .1em;
}

.bp-cols[b-yfcsyhiyb0] {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 4%;
    flex: 1;
    align-content: center;
}

.bp-col[b-yfcsyhiyb0] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    justify-content: center;
}

.bp-centre[b-yfcsyhiyb0] {
    align-items: center;
}

.bp-line[b-yfcsyhiyb0] {
    display: flex;
    justify-content: space-between;
    gap: .5em;
    border-bottom: 1px solid var(--board-line);
    white-space: nowrap;
    overflow: hidden;
}

.bp-total[b-yfcsyhiyb0] {
    font-size: 30px;
    line-height: 1;
    text-align: center;
}

.bp-foot[b-yfcsyhiyb0] {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--board-line);
    padding-top: 2px;
}

/* Bat toss (US-9.2) */
.bat-toss[b-yfcsyhiyb0] {
    background: var(--desk-surface);
    border: 1px solid var(--desk-rule);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
}

.bat-stage[b-yfcsyhiyb0] {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0;
}

/* The toss: the bat is flung up and tumbles end-over-end in 3D — the two painted faces
   sit back-to-back, so hills/flats alternate naturally as it rotates, slowing to land. */
.bat-stage[b-yfcsyhiyb0] {
    perspective: 700px;
}

.bat-flip[b-yfcsyhiyb0] {
    position: relative;
    width: 64px;
    height: 156px;
}

.bat-flip:not(.landed)[b-yfcsyhiyb0] {
    animation: toss-arc-b-yfcsyhiyb0 2.6s cubic-bezier(.3, .5, .55, 1) forwards;
}

.bat-tumble[b-yfcsyhiyb0] {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: toss-tumble-b-yfcsyhiyb0 2.6s cubic-bezier(.15, .6, .3, 1) forwards;
}

.bat-face[b-yfcsyhiyb0] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.face-flats[b-yfcsyhiyb0] {
    transform: rotateX(180deg);
}

.bat-flip.landed[b-yfcsyhiyb0] {
    animation: bat-land-b-yfcsyhiyb0 .35s ease-out;
}

.bat-flip.landed .bat-face[b-yfcsyhiyb0] {
    position: static;
    backface-visibility: visible;
}

@keyframes toss-arc-b-yfcsyhiyb0 {
    0% {
        transform: translateY(34px) scale(.92);
    }

    28% {
        transform: translateY(-66px) scale(1);
    }

    55% {
        transform: translateY(-34px);
    }

    82% {
        transform: translateY(8px);
    }

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

@keyframes toss-tumble-b-yfcsyhiyb0 {
    0% {
        transform: rotateX(0);
    }

    100% {
        transform: rotateX(1800deg);
    }
}

@keyframes bat-land-b-yfcsyhiyb0 {
    0% {
        transform: scale(1.15);
    }

    60% {
        transform: scale(.96);
    }

    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bat-flip:not(.landed)[b-yfcsyhiyb0],
    .bat-tumble[b-yfcsyhiyb0],
    .bat-flip.landed[b-yfcsyhiyb0] {
        animation: none;
    }

    .bat-tumble .face-flats[b-yfcsyhiyb0] {
        display: none;
    }
}

.spin-status[b-yfcsyhiyb0],
.spin-result[b-yfcsyhiyb0] {
    text-align: center;
    margin: 0;
    color: var(--desk-ink-soft);
}

.spin-result[b-yfcsyhiyb0] {
    color: var(--desk-ink);
    font-size: 17px;
}

.spin-result strong[b-yfcsyhiyb0] {
    color: var(--desk-accent);
    letter-spacing: .04em;
}

.spin-btn[b-yfcsyhiyb0] {
    align-self: end;
}

.bat-toss .btn-ghost[b-yfcsyhiyb0] {
    align-self: center;
}

.divider[b-yfcsyhiyb0] {
    text-align: center;
    color: var(--desk-ink-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: var(--space-2) 0 var(--space-4);
}

.nav-row[b-yfcsyhiyb0] {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.btn-primary[b-yfcsyhiyb0] {
    background: var(--desk-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    height: 40px;
    padding: 0 var(--space-5);
    font: 600 15px var(--font-desk);
    cursor: pointer;
}

.btn-primary:disabled[b-yfcsyhiyb0] {
    background: var(--desk-rule);
    color: var(--desk-ink-soft);
    cursor: default;
}

.btn-secondary[b-yfcsyhiyb0] {
    background: var(--desk-surface);
    border: 1px solid var(--desk-rule);
    border-radius: var(--radius-btn);
    height: 40px;
    padding: 0 var(--space-5);
    font: 500 15px var(--font-desk);
    color: var(--desk-ink);
    cursor: pointer;
}

.btn-ghost[b-yfcsyhiyb0] {
    background: none;
    border: none;
    color: var(--desk-accent);
    font: 500 14px var(--font-desk);
    cursor: pointer;
    margin-left: auto;
}
/* /Components/Pages/Support.razor.rz.scp.css */
.support[b-p7bn1sogz0] {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

h1[b-p7bn1sogz0] {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 var(--space-5);
}

p[b-p7bn1sogz0] {
    margin: 0 0 var(--space-4);
    line-height: 1.55;
}

.adfree[b-p7bn1sogz0] {
    background: var(--desk-surface);
    border: 1px solid var(--desk-rule);
    border-radius: var(--radius-card);
    padding: var(--space-4) var(--space-5);
    font-weight: 600;
}

.btn-primary[b-p7bn1sogz0] {
    background: var(--desk-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    height: 44px;
    padding: 0 var(--space-6);
    font: 600 16px var(--font-desk);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--space-3);
}

.btn-primary:hover[b-p7bn1sogz0] {
    filter: brightness(.92);
}

.hint[b-p7bn1sogz0] {
    color: var(--desk-ink-soft);
    font-size: 13px;
}

.legal[b-p7bn1sogz0] {
    color: var(--desk-ink-soft);
    font-size: 12px;
    border-top: 1px solid var(--desk-rule);
    padding-top: var(--space-4);
    margin-top: var(--space-6);
}