@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/Accounts/PlayerStats.razor.rz.scp.css */
/* C08 — what an account's own games add up to. */

.s7-stats[b-mq1vp41cxs] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    background: var(--cream-panel);
}

/* ---- The band ---------------------------------------------------- */
.s7-stats__head[b-mq1vp41cxs] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
    background: var(--board-teal);
    color: var(--neutral-0);
}

.s7-stats__mark[b-mq1vp41cxs] {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: var(--radius-pill);
    background: var(--neutral-0);
    border: 3px solid var(--game-ink);
    font-size: 24px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-stats__who[b-mq1vp41cxs] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.s7-stats__name[b-mq1vp41cxs] {
    font-size: 32px;
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: -.01em;
}

.s7-stats__since[b-mq1vp41cxs] {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .85);
}

.s7-stats__headline[b-mq1vp41cxs] {
    display: flex;
    gap: 12px;
}

.s7-stats__headline-figure[b-mq1vp41cxs] {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 108px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 3px solid var(--game-ink);
    color: var(--game-ink);
}

/* The one figure a person came for. */
.s7-stats__headline-figure--wins[b-mq1vp41cxs] {
    background: var(--flip7-yellow);
}

.s7-stats__headline-figure .s7-display[b-mq1vp41cxs] {
    font-size: 34px;
    font-weight: var(--weight-bold);
    line-height: 1;
}

.s7-stats__percent[b-mq1vp41cxs] {
    font-size: 22px;
}

.s7-stats__headline-label[b-mq1vp41cxs] {
    font-size: 11px;
    color: var(--game-ink-soft);
}

/* ---- The tiles --------------------------------------------------- */
.s7-stats__main[b-mq1vp41cxs] {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 22px 24px;
}

.s7-stats__tiles[b-mq1vp41cxs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.s7-stats__tile[b-mq1vp41cxs] {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: var(--neutral-0);
    border: 2px solid var(--teal-cream-edge);
}

.s7-stats__tile-figure[b-mq1vp41cxs] {
    font-size: 34px;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--game-ink);
}

/* The two that are not neutral facts: one is a cost, one is an achievement. */
.s7-stats__tile-figure[data-tone="busted"][b-mq1vp41cxs] {
    color: var(--busted-text);
}

.s7-stats__tile-figure[data-tone="flip7"][b-mq1vp41cxs] {
    color: var(--stayed-text);
}

.s7-stats__tile-label[b-mq1vp41cxs] {
    font-size: 12.5px;
    color: var(--game-ink-soft);
}

/* ---- The chart --------------------------------------------------- */
.s7-stats__chart-block[b-mq1vp41cxs] {
    display: grid;
    gap: 10px;
}

.s7-stats__chart[b-mq1vp41cxs] {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--neutral-0);
    border: 2px solid var(--teal-cream-edge);
}

.s7-stats__bars[b-mq1vp41cxs] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    height: 220px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--teal-cream-edge);
    list-style: none;
}

.s7-stats__bar[b-mq1vp41cxs] {
    flex: 1;
    min-width: 0;
    border-radius: 6px 6px 0 0;
    background: #CFE6E6;
}

.s7-stats__bar--won[b-mq1vp41cxs] {
    background: var(--flip7-yellow);
    border: 2px solid var(--game-ink);
}

/* The chart is decoration over a list that can actually be read out; a row of divs with
   heights says nothing. Off-screen rather than display:none, which would take it from a
   screen reader as well. */
.s7-stats__readout[b-mq1vp41cxs] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.s7-stats__legend[b-mq1vp41cxs] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    font-size: 12px;
    color: var(--neutral-500);
}

.s7-stats__key[b-mq1vp41cxs] {
    display: flex;
    gap: 7px;
    align-items: center;
}

.s7-stats__key[b-mq1vp41cxs]::before {
    content: "";
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: #CFE6E6;
}

.s7-stats__key--won[b-mq1vp41cxs]::before {
    background: var(--flip7-yellow);
    border: 2px solid var(--game-ink);
}

.s7-stats__legend-range[b-mq1vp41cxs] {
    margin-left: auto;
}

.s7-stats__note[b-mq1vp41cxs] {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: #EEF4F8;
    font-size: 13px;
    line-height: 1.5;
    color: var(--game-ink-soft);
}

/* ---- The side ---------------------------------------------------- */
.s7-stats__side[b-mq1vp41cxs] {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 22px 20px;
    background: var(--cream);
    border-left: 1px solid var(--teal-cream-edge);
}

.s7-stats__opponents[b-mq1vp41cxs],
.s7-stats__highlights[b-mq1vp41cxs] {
    display: grid;
    gap: 10px;
}

.s7-stats__against[b-mq1vp41cxs] {
    display: grid;
    gap: 7px;
    list-style: none;
}

.s7-stats__other[b-mq1vp41cxs] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--neutral-0);
    border: 2px solid var(--teal-cream-edge);
}

.s7-stats__dot[b-mq1vp41cxs] {
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    background: var(--teal-cream-edge);
}

.s7-stats__dot[data-own="yes"][b-mq1vp41cxs] {
    background: var(--azure-500);
}

.s7-stats__other-name[b-mq1vp41cxs] {
    font-size: 15.5px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
    white-space: nowrap;
}

.s7-stats__other-games[b-mq1vp41cxs] {
    font-size: 12px;
    color: var(--neutral-500);
    text-align: right;
}

/* Green when ahead, red when behind, ink when level — the one place on this screen where a
   colour is the reading rather than the decoration. */
.s7-stats__record[b-mq1vp41cxs] {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
    white-space: nowrap;
}

.s7-stats__record[data-ahead="me"][b-mq1vp41cxs] {
    color: var(--stayed-text);
}

.s7-stats__record[data-ahead="them"][b-mq1vp41cxs] {
    color: var(--busted-text);
}

.s7-stats__dash[b-mq1vp41cxs] {
    padding: 0 2px;
    color: var(--text-subtle);
}

.s7-stats__dot-note[b-mq1vp41cxs],
.s7-stats__empty-help[b-mq1vp41cxs] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-500);
}

.s7-stats__highlight[b-mq1vp41cxs] {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--neutral-0);
    border: 2px solid var(--teal-cream-edge);
}

/* The first one gets the ink border: it is the fact worth reading if only one is. */
.s7-stats__highlight--lead[b-mq1vp41cxs] {
    border: 3px solid var(--game-ink);
}

.s7-stats__highlight-title[b-mq1vp41cxs] {
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-stats__highlight-detail[b-mq1vp41cxs] {
    font-size: 13px;
    line-height: 1.45;
    color: var(--game-ink-soft);
}

/* ---- Nothing to count -------------------------------------------- */
.s7-stats--empty[b-mq1vp41cxs] {
    grid-template-columns: 1fr;
    align-content: start;
    justify-items: start;
    gap: 8px;
    padding: 40px 24px;
}

.s7-stats__empty-title[b-mq1vp41cxs] {
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-stats__empty-help[b-mq1vp41cxs] {
    margin-bottom: 10px;
    max-width: 52ch;
}

/* ---- Narrower ----------------------------------------------------- */
@media (max-width: 1023px) {
    .s7-stats[b-mq1vp41cxs] {
        grid-template-columns: 1fr;
    }

    .s7-stats__main[b-mq1vp41cxs],
    .s7-stats__side[b-mq1vp41cxs] {
        padding: 16px;
    }

    .s7-stats__side[b-mq1vp41cxs] {
        border-left: none;
        border-top: 1px solid var(--teal-cream-edge);
    }
}

@media (max-width: 767px) {
    .s7-stats__head[b-mq1vp41cxs] {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 14px;
    }

    .s7-stats__headline[b-mq1vp41cxs] {
        grid-column: 1 / -1;
    }

    .s7-stats__headline-figure[b-mq1vp41cxs] {
        flex: 1;
        min-width: 0;
    }

    .s7-stats__name[b-mq1vp41cxs] {
        font-size: 25px;
    }

    .s7-stats__bars[b-mq1vp41cxs] {
        height: 160px;
        gap: 6px;
    }
}
/* /Components/Game/ActionPad.razor.rz.scp.css */
.s7-pad__eyebrow[b-udolbw3tk5] {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 7px;
    background: rgba(12, 34, 54, .45);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .12em;
    color: var(--cream);
}

.s7-pad__eyebrow--spaced[b-udolbw3tk5] {
    margin: 20px 0 10px;
}

.s7-actions[b-udolbw3tk5] {
    display: flex;
    flex-direction: column;
    gap: var(--pad-gap, 7px);
}

.s7-action[b-udolbw3tk5] {
    display: flex;
    align-items: center;
    gap: 8px;
    /* min-height rather than height: the three share a row on every screen but the desktop, and
       a name that wraps must push the bar taller instead of spilling out of it. */
    min-height: var(--action-bar-h, 36px);
    padding: 4px 12px;
    line-height: 1.15;
    border: none;
    border-radius: 9px;
    font-family: var(--font-sans);
    font-size: var(--action-bar-text, 11px);
    font-weight: var(--weight-bold);
    letter-spacing: .04em;
    color: var(--game-ink);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard),
    filter var(--duration-fast) var(--ease-standard);
}

.s7-action:hover:not(:disabled)[b-udolbw3tk5] {
    filter: brightness(.96);
}

.s7-action:active:not(:disabled)[b-udolbw3tk5] {
    transform: scale(.98);
}

.s7-action:disabled[b-udolbw3tk5] {
    cursor: not-allowed;
    opacity: .55;
}

.s7-action__name[b-udolbw3tk5] {
    flex: 1;
    text-align: left;
}

.s7-action__hint[b-udolbw3tk5] {
    font-size: var(--action-hint-text, 9.5px);
    font-weight: var(--weight-medium);
    opacity: .7;
}

.s7-action--freeze[b-udolbw3tk5] {
    background: var(--freeze-blue);
    letter-spacing: .06em;
}

.s7-action--flipthree[b-udolbw3tk5] {
    background: var(--flip7-yellow);
}

/* Ink rather than white: white on this red reads at 3.05 to 1, and this is 11 px bold. */
.s7-action--secondchance[b-udolbw3tk5] {
    background: var(--second-chance-red);
    color: var(--ink-900);
}

.s7-action--secondchance .s7-action__hint[b-udolbw3tk5] {
    opacity: .75;
}


/* The three Action cards share one row once the screen is stacked, in three equal shares. They
   are three cards of one deck, and a STOP a third the width of its neighbours read as the lesser
   of them. The names wrap instead. */
@media (max-width: 1023px) {
    .s7-actions[b-udolbw3tk5] {
        flex-direction: row;
        gap: 6px;
    }

    .s7-action[b-udolbw3tk5] {
        flex: 1 1 0;
        min-width: 0;
        /* A thumb needs 44 wherever the design calls the size small — and an iPad in portrait is
           as much a thumb as a phone is. */
        min-height: 44px;
    }
}

/* On a phone the hints go too: the names carry the meaning, and FREEZE / FLIP THREE /
   SECOND CHANCE is the widest this row ever gets. */
@media (max-width: 767px) {
    .s7-action[b-udolbw3tk5] {
        justify-content: center;
        min-height: 52px;
        padding: 4px 6px;
        font-size: 9.5px;
        text-align: center;
    }

    .s7-action__name[b-udolbw3tk5] {
        text-align: center;
    }

    .s7-action__hint[b-udolbw3tk5] {
        display: none;
    }
}


/* P05, the tablet on its side: the three Specials share a row, in equal shares.
   See RoundEntry.razor.css for what the query is doing. */
@media (min-width: 1024px) and (max-height: 850px) and (pointer: coarse) {
    .s7-actions[b-udolbw3tk5] {
        flex-direction: row;
        gap: 8px;
    }

    .s7-action[b-udolbw3tk5] {
        flex: 1 1 0;
        min-width: 0;
        min-height: 48px;
        justify-content: center;
        text-align: center;
        font-size: 12px;
    }

    .s7-action__name[b-udolbw3tk5] {
        text-align: center;
    }

    /* Three names across 480px is already the whole width; the hints would break them. */
    .s7-action__hint[b-udolbw3tk5] {
        display: none;
    }
}
/* /Components/Game/CalcBreakdownPopover.razor.rz.scp.css */
.s7-calc[b-ahspvwpxj3] {
    position: absolute;
    top: 47px;
    right: -12px;
    z-index: 5;
    width: 262px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: 0 12px 28px rgba(12, 34, 54, .32);
    text-align: left;
}

/* Two stacked triangles: the ink outline, then the cream fill just inside it. */
.s7-calc__arrow-outer[b-ahspvwpxj3],
.s7-calc__arrow-inner[b-ahspvwpxj3] {
    position: absolute;
    width: 0;
    height: 0;
}

.s7-calc__arrow-outer[b-ahspvwpxj3] {
    top: -9px;
    right: 13px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid var(--game-ink);
}

.s7-calc__arrow-inner[b-ahspvwpxj3] {
    top: -5px;
    right: 15px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--cream);
}

.s7-calc__eyebrow[b-ahspvwpxj3] {
    margin-bottom: 9px;
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .12em;
    color: var(--game-ink-soft);
}

.s7-calc__lines[b-ahspvwpxj3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--weight-medium);
    color: var(--game-ink);
}

.s7-calc__line[b-ahspvwpxj3] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.s7-calc__line--none[b-ahspvwpxj3] {
    color: rgba(43, 42, 118, .6);
}

.s7-calc__line--total[b-ahspvwpxj3] {
    font-weight: var(--weight-bold);
}

.s7-calc__rule[b-ahspvwpxj3] {
    height: 1px;
    margin: 2px 0;
    background: rgba(43, 42, 118, .25);
}


/* Hung off the right edge of the score, which on a phone is the right edge of the screen. */
@media (max-width: 767px) {
    .s7-calc[b-ahspvwpxj3] {
        right: 0;
        width: min(262px, calc(100vw - 32px));
    }
}
/* /Components/Game/CardSlot.razor.rz.scp.css */
.s7-slot[b-2fjmciic28] {
    display: grid;
    place-items: center;
    height: var(--hand-card-h, 96px);
    border-radius: 8px;
    text-align: center;
}

.s7-slot--seventhcard[b-2fjmciic28] {
    border: 2px dashed var(--flip7-yellow);
}

.s7-slot--modifier[b-2fjmciic28] {
    border: 2px dashed color-mix(in srgb, var(--modifier-orange) 80%, transparent);
}

.s7-slot--secondchance[b-2fjmciic28] {
    border: 2px dashed color-mix(in srgb, var(--second-chance-red) 90%, transparent);
}

.s7-slot__label[b-2fjmciic28] {
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    background: rgba(12, 34, 54, .42);
    font-size: calc(9px * var(--hand-card-scale, 1));
    font-weight: var(--weight-bold);
    line-height: 1.35;
    letter-spacing: .04em;
    color: var(--flip7-yellow);
}

.s7-slot--secondchance .s7-slot__label[b-2fjmciic28] {
    background: rgba(12, 34, 54, .45);
    font-size: calc(8px * var(--hand-card-scale, 1));
    letter-spacing: .03em;
    color: var(--cream);
}


@media (max-width: 767px) {
    .s7-slot[b-2fjmciic28] {
        height: 62px;
    }

    .s7-slot__label[b-2fjmciic28] {
        padding: 4px 5px;
        font-size: 7.5px;
        letter-spacing: .02em;
    }

    .s7-slot--secondchance .s7-slot__label[b-2fjmciic28] {
        font-size: 7px;
    }
}
/* /Components/Game/FinalStandings.razor.rz.scp.css */
.s7-standings[b-7qxik0lng9] {
    padding: 22px;
    border-radius: 16px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: var(--panel-lift-lg);
}

.s7-standings__eyebrow[b-7qxik0lng9] {
    margin-bottom: 14px;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--game-ink);
}

.s7-standings__list[b-7qxik0lng9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s7-standing[b-7qxik0lng9] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    border: 1px solid rgba(43, 42, 118, .22);
}

/* Level at the top, or the winner: both wear the yellow. */
.s7-standing--tied[b-7qxik0lng9],
.s7-standing--first[b-7qxik0lng9] {
    padding: 13px 15px;
    border-radius: 12px;
    background: var(--flip7-yellow);
    border: 2px solid var(--game-ink);
}

.s7-standing--podium[b-7qxik0lng9] {
    border-color: rgba(43, 42, 118, .28);
}

/* Off the podium the rows recede rather than compete with the winner. */
.s7-standing--rest[b-7qxik0lng9] {
    background: rgba(255, 255, 255, .62);
    border-color: transparent;
}

.s7-standing__rank[b-7qxik0lng9] {
    width: 16px;
    font-size: 12px;
    color: var(--game-ink);
}

.s7-standing--rest .s7-standing__rank[b-7qxik0lng9] {
    color: rgba(43, 42, 118, .5);
}

.s7-standing__name[b-7qxik0lng9] {
    flex: 1;
    font-size: 12px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-standing--tied .s7-standing__name[b-7qxik0lng9],
.s7-standing--first .s7-standing__name[b-7qxik0lng9] {
    font-size: 14px;
}

.s7-standing--rest .s7-standing__name[b-7qxik0lng9] {
    font-weight: var(--weight-medium);
    color: rgba(43, 42, 118, .85);
}

.s7-standing__badge[b-7qxik0lng9] {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--game-ink);
    font-size: 8.5px;
    font-weight: var(--weight-bold);
    color: var(--flip7-yellow);
}

.s7-standing__total[b-7qxik0lng9] {
    font-size: 13px;
    color: var(--game-ink);
}

.s7-standing--tied .s7-standing__total[b-7qxik0lng9],
.s7-standing--first .s7-standing__total[b-7qxik0lng9] {
    font-size: 19px;
}

.s7-standing--rest .s7-standing__total[b-7qxik0lng9] {
    color: rgba(43, 42, 118, .85);
}

.s7-standings__note[b-7qxik0lng9] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(43, 42, 118, .32);
    font-size: 11px;
    line-height: 1.65;
    color: rgba(43, 42, 118, .75);
}


@media (max-width: 767px) {
    .s7-standings[b-7qxik0lng9] {
        padding: 16px;
    }
}
/* /Components/Game/Flip7Banner.razor.rz.scp.css */
.s7-flip7[b-ylyyi0ium5] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 14px 0 12px;
    padding: 10px 15px;
    border-radius: 12px;
    background: var(--flip7-yellow);
    border: 2px solid var(--game-ink);
    box-shadow: var(--card-lift-sm);
}

.s7-flip7__title[b-ylyyi0ium5] {
    font-size: 13px;
    letter-spacing: .02em;
    color: var(--game-ink);
    white-space: nowrap;
}

.s7-flip7__text[b-ylyyi0ium5] {
    font-size: 12px;
    font-weight: var(--weight-medium);
    color: var(--game-ink);
}
/* /Components/Game/FlipThreeDialog.razor.rz.scp.css */
/* E06 — the distribution dialog. Shares the scrim and shell of the targeting dialog. */

.s7-scrim[b-eqwl0yhh52] {
    position: absolute;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12, 34, 54, .58);
}

.s7-modal[b-eqwl0yhh52] {
    width: 700px;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    border-radius: 18px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: 0 18px 44px rgba(12, 34, 54, .42);
}

.s7-modal--wide[b-eqwl0yhh52] {
    width: 760px;
}

.s7-modal__head[b-eqwl0yhh52] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    background: var(--flip7-yellow);
    border-bottom: 2px solid var(--game-ink);
}

.s7-modal__card[b-eqwl0yhh52] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 54px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--cream);
    border: 2px solid var(--game-ink);
    text-align: center;
    font-size: 7.5px;
    font-weight: var(--weight-bold);
    line-height: 1.25;
    color: var(--game-ink);
}

.s7-modal__titles[b-eqwl0yhh52] {
    flex: 1;
}

.s7-modal__title[b-eqwl0yhh52] {
    font-size: 16px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-modal__subtitle[b-eqwl0yhh52] {
    font-size: 11.5px;
    font-weight: var(--weight-medium);
    color: rgba(43, 42, 118, .75);
}

.s7-modal__counter[b-eqwl0yhh52] {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--game-ink);
    font-size: 12px;
    font-weight: var(--weight-bold);
    color: var(--flip7-yellow);
}

.s7-modal__body[b-eqwl0yhh52] {
    padding: 18px 20px;
}

/* ---- What has been dealt so far ------------------------------ */
.s7-deal[b-eqwl0yhh52] {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.s7-deal__eyebrow[b-eqwl0yhh52] {
    margin-bottom: 8px;
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .12em;
    color: var(--game-ink-soft);
}

.s7-deal__cards[b-eqwl0yhh52] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.s7-deal__slot[b-eqwl0yhh52] {
    position: relative;
}

.s7-deal__card[b-eqwl0yhh52] {
    display: grid;
    place-items: center;
    width: 54px;
    height: 76px;
    border-radius: 7px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: var(--card-lift-sm);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 26px;
}

/* The same keylined figure as a card in the hand — see GameCard.razor.css for why the
   keyline is near-black and why the fallback rule sits outside the support query. */
.s7-deal__card--number[b-eqwl0yhh52] {
    color: var(--s7-deal-ink, var(--game-ink));
}

@supports (-webkit-text-stroke: 1px currentColor) {
    .s7-deal__card--number[b-eqwl0yhh52] {
        color: var(--s7-deal-colour);
        -webkit-text-stroke: 1.75px var(--ink-900);
        paint-order: stroke fill;
    }
}

/* A Modifier or an Action is one of the three too: it wears its own pad's colour rather
   than being drawn as a Number. */
.s7-deal__card--modifier[b-eqwl0yhh52] {
    background: var(--modifier-orange);
    font-size: 20px;
}

.s7-deal__card--action[b-eqwl0yhh52] {
    font-family: var(--font-sans);
    font-size: 9px;
    line-height: 1.25;
    text-align: center;
    letter-spacing: .04em;
}

.s7-deal__card--freeze[b-eqwl0yhh52] {
    background: var(--freeze-blue);
}

.s7-deal__card--flipthree[b-eqwl0yhh52] {
    background: var(--flip7-yellow);
}

/* Ink rather than white, the same correction ActionPad carries: white on this red is
   3.05 to 1. */
.s7-deal__card--secondchance[b-eqwl0yhh52] {
    background: var(--second-chance-red);
    color: var(--ink-900);
}

.s7-deal__card--waiting[b-eqwl0yhh52] {
    background: transparent;
    border: 2px dashed var(--game-ink);
    box-shadow: none;
    font-size: 20px;
    color: rgba(43, 42, 118, .45);
}

.s7-deal__position[b-eqwl0yhh52] {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: var(--game-ink);
    font-size: 8px;
    font-weight: var(--weight-bold);
    color: var(--flip7-yellow);
}

.s7-deal__rule[b-eqwl0yhh52] {
    width: 1px;
    height: 76px;
    background: rgba(43, 42, 118, .2);
}

.s7-deal__hand[b-eqwl0yhh52] {
    flex: 1;
}

.s7-deal__hand-cards[b-eqwl0yhh52] {
    display: inline-block;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    background: var(--neutral-0);
    border: 1px solid rgba(43, 42, 118, .25);
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    color: var(--game-ink);
}

/* ---- The simplified pad -------------------------------------- */
.s7-deal__prompt[b-eqwl0yhh52] {
    margin: 18px 0 8px;
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .12em;
    color: var(--game-ink-soft);
}

.s7-deal__numbers[b-eqwl0yhh52] {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 6px;
}

.s7-deal__tile[b-eqwl0yhh52] {
    height: 46px;
    border-radius: 8px;
    background: var(--neutral-0);
    border: 1px solid rgba(43, 42, 118, .35);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 17px;
    color: var(--s7-tile-colour, var(--game-ink));
    cursor: pointer;
}

.s7-deal__tile:active[b-eqwl0yhh52] {
    transform: scale(.98);
}

/* Already in front of the target: still the way a bust gets recorded, and marked the way the
   entry pad marks it — the two surfaces deal the same cards and must say the same thing. */
.s7-deal__tile--held[b-eqwl0yhh52] {
    background: var(--busted-bg);
    border: 2px solid var(--busted-text);
    color: var(--busted-text);
}

.s7-deal__rest[b-eqwl0yhh52] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 14px;
}

.s7-deal__row[b-eqwl0yhh52] {
    display: flex;
    gap: 7px;
}

.s7-deal__modifier[b-eqwl0yhh52] {
    width: 44px;
    height: 38px;
    border-radius: 8px;
    background: var(--modifier-orange);
    border: 2px solid var(--game-ink);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 13px;
    color: var(--game-ink);
    cursor: pointer;
}

.s7-deal__actions[b-eqwl0yhh52] {
    text-align: right;
}

.s7-deal__action[b-eqwl0yhh52] {
    display: grid;
    place-items: center;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 2px solid var(--game-ink);
    text-align: center;
    font-family: var(--font-sans);
    font-size: 8px;
    font-weight: var(--weight-bold);
    line-height: 1.25;
    color: var(--game-ink);
    cursor: pointer;
}

.s7-deal__action--freeze[b-eqwl0yhh52] {
    background: var(--freeze-blue);
    font-size: 10.5px;
    letter-spacing: .06em;
}

.s7-deal__action--flipthree[b-eqwl0yhh52] {
    background: var(--flip7-yellow);
}

.s7-deal__action--secondchance[b-eqwl0yhh52] {
    background: var(--second-chance-red);
    color: var(--neutral-0);
}

.s7-modal__foot[b-eqwl0yhh52] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px dashed rgba(43, 42, 118, .3);
}

.s7-modal__note[b-eqwl0yhh52] {
    flex: 1;
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(43, 42, 118, .75);
}

@media (max-width: 1023px) {
    .s7-scrim[b-eqwl0yhh52] {
        padding: 0;
    }

    .s7-modal[b-eqwl0yhh52],
    .s7-modal--wide[b-eqwl0yhh52] {
        width: 100%;
        height: 100%;
        max-height: none;
        border: none;
        border-radius: 0;
    }

    .s7-deal[b-eqwl0yhh52] {
        flex-direction: column;
        align-items: stretch;
    }

    .s7-deal__rule[b-eqwl0yhh52] {
        display: none;
    }

    .s7-deal__numbers[b-eqwl0yhh52] {
        grid-template-columns: repeat(7, 1fr);
    }

    .s7-deal__rest[b-eqwl0yhh52] {
        flex-direction: column;
        align-items: stretch;
    }

    .s7-deal__actions[b-eqwl0yhh52] {
        text-align: left;
    }
}


@media (max-width: 767px) {
    .s7-scrim[b-eqwl0yhh52] {
        position: fixed;
    }
}
/* /Components/Game/FreezeMark.razor.rz.scp.css */
/* The Stop card's own colours: its blue, its ink. */
.s7-freeze[b-looaxrr15f] {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--freeze-blue);
    border: 1px solid var(--game-ink);
    color: var(--game-ink);
}

.s7-freeze svg[b-looaxrr15f] {
    width: 13px;
    height: 13px;
}
/* /Components/Game/GameCard.razor.rz.scp.css */
.s7-card[b-bu92y1pbnc] {
    position: relative;
    display: grid;
    place-items: center;
    height: var(--hand-card-h, 96px);
    border-radius: 8px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: var(--card-lift);
}

.s7-card__keyline[b-bu92y1pbnc] {
    position: absolute;
    inset: 6px;
    border: 1px solid var(--card-inner-rule);
    border-radius: var(--radius-xs);
}

.s7-card__value[b-bu92y1pbnc] {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: calc(var(--s7-card-size, 36px) * var(--hand-card-scale, 1));
    line-height: 1;
    color: var(--s7-card-ink, var(--game-ink));
}

/* The figure the way the real card prints it: the ink the card is actually printed in,
   keylined in near-black. The keyline is what carries the legibility — it clears 3:1 against
   every fill in the deck — and that is what lets the fill stay at full saturation instead of
   the darkened stand-in the palette used to need.

   Near-black rather than the card's own --game-ink border: navy on the grey of a 12 measures
   2.68 to 1 and the keyline would sink into its own fill.

   The rule above stays outside the query on purpose. A browser with no text-stroke paints the
   darkened --number-N-ink and is merely plainer; it never shows a pale figure on cream. */
@supports (-webkit-text-stroke: 1px currentColor) {
    .s7-card--number .s7-card__value[b-bu92y1pbnc] {
        color: var(--s7-card-colour);
        -webkit-text-stroke: calc(var(--s7-card-stroke, 2px) * var(--hand-card-scale, 1)) var(--ink-900);
        paint-order: stroke fill;
    }
}

.s7-card__caption[b-bu92y1pbnc] {
    position: absolute;
    bottom: 7px;
    font-size: calc(6px * var(--hand-card-scale, 1));
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--game-ink);
    opacity: .6;
}

.s7-card--modifier[b-bu92y1pbnc] {
    background: var(--modifier-orange);
}

.s7-card--modifier .s7-card__keyline[b-bu92y1pbnc] {
    border-color: rgba(43, 42, 118, .3);
}

.s7-card--modifier .s7-card__value[b-bu92y1pbnc] {
    font-size: calc(30px * var(--hand-card-scale, 1));
    color: var(--game-ink);
}

.s7-card--modifier .s7-card__caption[b-bu92y1pbnc] {
    letter-spacing: .12em;
    opacity: .7;
}

/* An Action card. Only a Second chance is ever held, so its red is the base; Stop and Three
   in a row have their own colour for wherever else the card is drawn. */
.s7-card--action[b-bu92y1pbnc] {
    background: var(--second-chance-red);
}

.s7-card--freeze[b-bu92y1pbnc] {
    background: var(--freeze-blue);
}

.s7-card--flipthree[b-bu92y1pbnc] {
    background: var(--flip7-yellow);
}

.s7-card--action .s7-card__keyline[b-bu92y1pbnc] {
    border-color: rgba(12, 34, 54, .3);
}

.s7-card--action .s7-card__value[b-bu92y1pbnc] {
    padding: 0 6px;
    font-family: var(--font-sans);
    font-size: calc(11px * var(--hand-card-scale, 1));
    line-height: 1.3;
    text-align: center;
    letter-spacing: .04em;
    /* Ink, not white: white on this red reads at 3.05 to 1, and the same ink clears the bar on
       all three Action colours. ActionPad made this move already; the card had been missed. */
    color: var(--ink-900);
}

.s7-card--action .s7-card__caption[b-bu92y1pbnc] {
    color: var(--ink-900);
    opacity: .75;
}


/* On a phone seven cards share the width, so they lose their caption and half their height. */
@media (max-width: 767px) {
    .s7-card[b-bu92y1pbnc] {
        height: 62px;
        border-radius: 6px;
    }

    .s7-card__keyline[b-bu92y1pbnc] {
        inset: 4px;
    }

    .s7-card__value[b-bu92y1pbnc] {
        font-size: calc(var(--s7-card-size, 36px) * .62);
    }

    /* ~22px of figure: the 2px keyline would start closing the counters of an 8 or a 0. */
    .s7-card--number .s7-card__value[b-bu92y1pbnc] {
        --s7-card-stroke: 1.5px;
    }

    .s7-card--modifier .s7-card__value[b-bu92y1pbnc] {
        font-size: 19px;
    }

    .s7-card--action .s7-card__value[b-bu92y1pbnc] {
        padding: 0 3px;
        font-size: 8px;
        letter-spacing: .02em;
        overflow-wrap: anywhere;
    }

    .s7-card__caption[b-bu92y1pbnc] {
        display: none;
    }
}
/* /Components/Game/LastEntryToast.razor.rz.scp.css */
/* Fixed rather than in the flow: on every layout the entry area is a scroller of some sort, and
   a confirmation that scrolls out of sight confirms nothing. */
.s7-toast[b-m0i8r2iryw] {
    position: fixed;
    inset-inline: 0;
    bottom: calc(16px + var(--safe-bottom));
    z-index: var(--z-toast);
    display: grid;
    justify-items: center;

    /* The region stays in the document for the whole round so a screen reader has something to
       watch; only its contents come and go. Empty, it must not intercept a tap meant for the
       table underneath. */
    pointer-events: none;
}

.s7-toast__body[b-m0i8r2iryw] {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(var(--toast-max-w, 420px), calc(100vw - 32px));
    padding: 7px 13px 7px 7px;
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    border: 2px solid var(--game-ink);
    box-shadow: var(--panel-lift);
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
}

.s7-toast__body:active[b-m0i8r2iryw] {
    transform: scale(.99);
}

/* The card as the correction screen draws it, at the size a line of text can carry. */
.s7-toast__card[b-m0i8r2iryw] {
    display: grid;
    place-items: center;
    width: var(--toast-card-w, 30px);
    height: var(--toast-card-h, 40px);
    flex: none;
    border-radius: 5px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--toast-card-text, 16px);
    overflow: hidden;
}

/* An Action card is named rather than numbered: two small lines where a Number wants one. */
.s7-toast__card--worded[b-m0i8r2iryw] {
    width: 56px;
    font-family: var(--font-sans);
    font-size: 8px;
    line-height: 1.25;
    text-align: center;
    padding: 0 3px;
    text-transform: uppercase;
}

.s7-toast__what[b-m0i8r2iryw] {
    flex: 1;
    min-width: 0;
    font-size: var(--toast-text, 12.5px);
    font-weight: var(--weight-semibold);
    line-height: 1.35;
    color: var(--ink-900);
}

.s7-toast__undo[b-m0i8r2iryw] {
    flex: none;
    font-size: calc(var(--toast-text, 12.5px) * .84);
    font-weight: var(--weight-semibold);
    letter-spacing: .04em;
    color: var(--color-primary);
    white-space: nowrap;
}

/* A bust is the one entry worth a second look, so it wears the colour the matrix uses for it. */
.s7-toast--bust .s7-toast__body[b-m0i8r2iryw] {
    background: var(--busted-bg);
    border-color: var(--busted-text);
}

.s7-toast--bust .s7-toast__what[b-m0i8r2iryw] {
    color: var(--busted-text);
}

.s7-toast--bust .s7-toast__undo[b-m0i8r2iryw] {
    color: var(--busted-text);
}

@media (max-width: 767px) {
    .s7-toast[b-m0i8r2iryw] {
        bottom: calc(12px + var(--safe-bottom));
    }

    .s7-toast__what[b-m0i8r2iryw] {
        font-size: 11.5px;
    }
}
/* /Components/Game/ModifierPad.razor.rz.scp.css */
.s7-pad__eyebrow[b-o35draqcbz] {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 7px;
    background: rgba(12, 34, 54, .45);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .12em;
    color: var(--cream);
}

.s7-pad__eyebrow--spaced[b-o35draqcbz] {
    margin: 20px 0 10px;
}

.s7-modifier[b-o35draqcbz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pad-gap, 7px);
}

.s7-modifier__tile[b-o35draqcbz] {
    height: var(--modifier-tile-h, 38px);
    border-radius: 9px;
    border: none;
    background: var(--modifier-orange);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--modifier-tile-text, 15px);
    color: var(--game-ink);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard),
    filter var(--duration-fast) var(--ease-standard);
}

.s7-modifier__tile:hover:not(:disabled)[b-o35draqcbz] {
    filter: brightness(.96);
}

.s7-modifier__tile:active:not(:disabled)[b-o35draqcbz] {
    transform: scale(.98);
}

.s7-modifier__tile:disabled[b-o35draqcbz] {
    cursor: not-allowed;
    opacity: .5;
}


@media (max-width: 1023px) {
    .s7-modifier[b-o35draqcbz] {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Same reason as the Action bars: 38 is a desktop measurement, and everything under 1024 is
       a screen somebody taps. */
    .s7-modifier__tile[b-o35draqcbz] {
        height: 44px;
    }
}

@media (max-width: 767px) {
    .s7-modifier[b-o35draqcbz] {
        gap: 5px;
    }

    .s7-modifier__tile[b-o35draqcbz] {
        height: 44px;
        font-size: 13px;
    }
}


/* P05, the tablet on its side: one row of six, tall enough to tap.
   See RoundEntry.razor.css for what the query is doing. */
@media (min-width: 1024px) and (max-height: 850px) and (pointer: coarse) {
    .s7-modifier[b-o35draqcbz] {
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }

    .s7-modifier__tile[b-o35draqcbz] {
        height: 48px;
        font-size: 17px;
    }
}
/* /Components/Game/NumberPad.razor.rz.scp.css */
.s7-pad__eyebrow[b-72t6a1jzr9] {
    display: inline-block;
    margin-bottom: 11px;
    padding: 4px 9px;
    border-radius: 7px;
    background: rgba(12, 34, 54, .45);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .12em;
    color: var(--cream);
}

.s7-pad__numbers[b-72t6a1jzr9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pad-gap, 7px);
}

.s7-tile[b-72t6a1jzr9] {
    height: var(--pad-tile-h, var(--control-h-md));
    border-radius: 9px;
    background: var(--cream);
    border: 1px solid rgba(43, 42, 118, .35);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--pad-tile-text, 19px);
    color: var(--s7-tile-colour, var(--game-ink));
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard),
    filter var(--duration-fast) var(--ease-standard);
}

.s7-tile:hover:not(:disabled)[b-72t6a1jzr9] {
    filter: brightness(.96);
}

.s7-tile:active:not(:disabled)[b-72t6a1jzr9] {
    transform: scale(.98);
}

/* Already in the hand: the marker can still tap it, and that records the bust. It therefore
   keeps the full card stock, the lift and the press of an available tile — dimming it would say
   "not for you" about the one tile on this pad that changes a score the most. What marks it is
   the bust red the matrix already uses for a round somebody lost. */
.s7-tile--held[b-72t6a1jzr9] {
    background: var(--cream);
    border: 2px solid var(--busted-text);
    box-shadow: inset 0 0 0 2px var(--busted-bg);
    color: var(--busted-text);
}

.s7-tile:disabled[b-72t6a1jzr9] {
    cursor: not-allowed;
    opacity: .5;
}


/* Stacked layouts — iPad portrait and phone — put the whole deck in two rows of seven rather
   than four of four: one glance, and the height goes to the rest of the screen. */
@media (max-width: 1023px) {
    .s7-pad__numbers[b-72t6a1jzr9] {
        grid-template-columns: repeat(7, 1fr);
    }
}

@media (max-width: 767px) {
    .s7-pad__numbers[b-72t6a1jzr9] {
        gap: 5px;
    }

    .s7-tile[b-72t6a1jzr9] {
        height: 46px;
        font-size: 17px;
    }
}


/* P05, the tablet on its side: the deck in two rows of seven, at the size of a thumb.
   See RoundEntry.razor.css for what the query is doing. */
@media (min-width: 1024px) and (max-height: 850px) and (pointer: coarse) {
    .s7-pad__numbers[b-72t6a1jzr9] {
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
    }

    .s7-tile[b-72t6a1jzr9] {
        height: 56px;
        font-size: 22px;
    }
}
/* /Components/Game/PlayerSpotlight.razor.rz.scp.css */
.s7-spotlight[b-xvzvrk0jbv] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.s7-spotlight__avatar[b-xvzvrk0jbv] {
    display: grid;
    place-items: center;
    width: var(--spotlight-avatar, 52px);
    height: var(--spotlight-avatar, 52px);
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--neutral-0);
    font-size: var(--spotlight-initial, 21px);
    font-weight: var(--weight-bold);
    color: #0C8E95;
}

.s7-spotlight__name[b-xvzvrk0jbv] {
    font-size: var(--spotlight-name, 30px);
    font-weight: var(--weight-bold);
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--neutral-0);
}

.s7-spotlight__meta[b-xvzvrk0jbv] {
    display: inline-block;
    margin-top: 3px;
    padding: 4px 9px;
    border-radius: 7px;
    background: rgba(12, 34, 54, .45);
    font-size: var(--spotlight-meta, 12px);
    font-weight: var(--weight-medium);
    color: var(--cream);
}

.s7-spotlight__gap[b-xvzvrk0jbv] {
    flex: 1;
}

.s7-spotlight__score[b-xvzvrk0jbv] {
    position: relative;
    text-align: right;
}

.s7-spotlight__score-row[b-xvzvrk0jbv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.s7-spotlight__figure[b-xvzvrk0jbv] {
    font-size: var(--spotlight-figure, 52px);
    line-height: 1;
    color: var(--neutral-0);
}

.s7-spotlight__info[b-xvzvrk0jbv] {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--cream);
    border: 2px solid var(--game-ink);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard);
}

.s7-spotlight__info:hover[b-xvzvrk0jbv] {
    background: var(--flip7-yellow);
}

@media (max-width: 1023px) {
    .s7-spotlight__name[b-xvzvrk0jbv] {
        font-size: 22px;
    }

    .s7-spotlight__figure[b-xvzvrk0jbv] {
        font-size: 38px;
    }
}


@media (max-width: 767px) {
    .s7-spotlight[b-xvzvrk0jbv] {
        gap: 10px;
    }

    /* The mark stays 24 px, where the design put it; the box that answers the thumb grows
       around it to 44. Making the circle itself bigger would have redrawn the screen. */
    .s7-spotlight__info[b-xvzvrk0jbv] {
        position: relative;
    }

    .s7-spotlight__info[b-xvzvrk0jbv]::after {
        content: "";
        position: absolute;
        inset: -10px;
    }

    .s7-spotlight__avatar[b-xvzvrk0jbv] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .s7-spotlight__name[b-xvzvrk0jbv] {
        font-size: 21px;
    }

    .s7-spotlight__meta[b-xvzvrk0jbv] {
        font-size: 10.5px;
    }

    .s7-spotlight__figure[b-xvzvrk0jbv] {
        font-size: 36px;
    }
}
/* /Components/Game/RoundExitAnnouncement.razor.rz.scp.css */
/* Fixed rather than in the flow, for the same reason the entry bubble is: on every layout the
   entry area is a scroller of some sort, and an announcement that scrolls out of sight
   announces nothing. */
.s7-exit[b-6k3xmqx9ww] {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;

    /* The scrim is the whole point — it is what makes this readable from the far side of a
       table — but it must not swallow the next card. Only the card itself takes a pointer. */
    pointer-events: none;
    background: var(--overlay-scrim);
    animation: s7-exit-scrim-b-6k3xmqx9ww var(--duration-base) var(--ease-out) both;
}

.s7-exit__card[b-6k3xmqx9ww] {
    display: grid;
    justify-items: center;
    gap: 8px;
    max-width: min(560px, calc(100vw - 48px));
    padding: 26px 34px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 3px solid var(--game-ink);
    box-shadow: var(--panel-lift-lg);
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
}

.s7-exit__card:active[b-6k3xmqx9ww] {
    transform: scale(.99);
}

.s7-exit__who[b-6k3xmqx9ww] {
    font-family: var(--font-sans);
    font-size: 27px;
    font-weight: var(--weight-bold);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--game-ink);
}

.s7-exit__why[b-6k3xmqx9ww] {
    font-size: 14px;
    font-weight: var(--weight-medium);
    line-height: 1.45;
    color: var(--game-ink-soft);
}

/* Each departure wears the colour the rest of the app already gives it, so the card is read
   before it is read: red for a bust, the Flip 7 yellow, the Stop blue, the stayed green. */
.s7-exit--busted .s7-exit__card[b-6k3xmqx9ww] {
    background: var(--busted-bg);
    border-color: var(--busted-text);
}

.s7-exit--busted .s7-exit__who[b-6k3xmqx9ww] {
    color: var(--busted-text);
}

.s7-exit--flipped7 .s7-exit__card[b-6k3xmqx9ww] {
    background: var(--flip7-yellow);
}

.s7-exit--frozen .s7-exit__card[b-6k3xmqx9ww] {
    background: var(--freeze-blue);
}

.s7-exit--stayed .s7-exit__card[b-6k3xmqx9ww] {
    background: var(--stayed-bg);
    border-color: var(--stayed-text);
}

.s7-exit--stayed .s7-exit__who[b-6k3xmqx9ww] {
    color: var(--stayed-text);
}

@keyframes s7-exit-scrim-b-6k3xmqx9ww {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* The announcement is information, not decoration: reduced motion drops the movement, never
   the message. */
@media (prefers-reduced-motion: reduce) {
    .s7-exit[b-6k3xmqx9ww] {
        animation: none;
    }
}

/* Bigger where there is room — this is the one thing on screen everybody at the table is
   meant to read at once. */
@media (min-width: 1024px) and (min-height: 851px),
       (min-width: 1280px) and (min-height: 700px) and (pointer: fine) {
    .s7-exit__card[b-6k3xmqx9ww] {
        max-width: min(680px, calc(100vw - 64px));
        padding: 34px 44px;
    }

    .s7-exit__who[b-6k3xmqx9ww] {
        font-size: 36px;
    }

    .s7-exit__why[b-6k3xmqx9ww] {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .s7-exit__card[b-6k3xmqx9ww] {
        max-width: calc(100vw - 32px);
        padding: 20px 22px;
    }

    .s7-exit__who[b-6k3xmqx9ww] {
        font-size: 21px;
    }

    .s7-exit__why[b-6k3xmqx9ww] {
        font-size: 12.5px;
    }
}
/* /Components/Game/RoundRecapRow.razor.rz.scp.css */
.s7-recap[b-9fgec1sjgm] {
    display: grid;
    grid-template-columns: 120px 1fr 92px 92px;
    gap: 14px;
    align-items: center;
    padding: 11px 16px;
    border-radius: 13px;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
}

/* The best round of the table, and a Flip 7, both earn a ring. */
.s7-recap--leader[b-9fgec1sjgm] {
    border: 2px solid var(--success-500);
    box-shadow: 0 12px 28px rgba(12, 34, 54, .08);
}

.s7-recap--flip7[b-9fgec1sjgm] {
    border: 2px solid var(--game-ink);
    background: var(--flip7-yellow);
}

.s7-recap__name[b-9fgec1sjgm] {
    font-size: 14px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-recap__who > .s7-pill[b-9fgec1sjgm] {
    margin-top: 3px;
}

.s7-recap__chain[b-9fgec1sjgm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    color: var(--neutral-700);
}

.s7-recap__arrow[b-9fgec1sjgm] {
    color: var(--text-subtle);
}

.s7-recap__step[b-9fgec1sjgm] {
    padding: 5px 10px;
    border-radius: 8px;
}

.s7-recap__step--plain[b-9fgec1sjgm] {
    background: var(--surface-page);
}

/* Anything that changed the arithmetic beyond the plain sum. */
.s7-recap__step--warm[b-9fgec1sjgm] {
    background: var(--near-target-bg);
    color: var(--near-target-text);
}

.s7-recap__step--muted[b-9fgec1sjgm] {
    background: var(--surface-page);
    color: var(--text-subtle);
}

.s7-recap__busted[b-9fgec1sjgm] {
    font-size: 11.5px;
    font-weight: var(--weight-medium);
    color: var(--text-subtle);
}

.s7-recap__figure[b-9fgec1sjgm] {
    text-align: right;
}

.s7-recap__figure-label[b-9fgec1sjgm] {
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    color: var(--text-subtle);
}

.s7-recap__round[b-9fgec1sjgm] {
    font-size: 20px;
    color: var(--success-500);
}

.s7-recap__round--zero[b-9fgec1sjgm] {
    color: var(--danger-500);
}

.s7-recap__total[b-9fgec1sjgm] {
    font-size: 22px;
    color: var(--ink-900);
}

@media (max-width: 1023px) {
    /* One line per player: name and figures on top, the working folded underneath. */
    .s7-recap[b-9fgec1sjgm] {
        grid-template-columns: 1fr auto auto;
        row-gap: 8px;
    }

    .s7-recap__chain[b-9fgec1sjgm],
    .s7-recap__busted[b-9fgec1sjgm] {
        grid-column: 1 / -1;
        order: 1;
    }
}


/* The fold only exists on a phone: on a wide screen the working is always on show. */
.s7-recap__fold[b-9fgec1sjgm] {
    display: none;
}

@media (max-width: 767px) {
    /* Name · fold · round · total, and the working underneath when it is asked for. */
    .s7-recap[b-9fgec1sjgm] {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        gap: 10px;
        padding: 10px 12px;
    }

    /* 44 px of target around a 22 px mark: the mark is what you see, the target is what you hit. */
    .s7-recap__fold[b-9fgec1sjgm] {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .s7-recap__fold-dot[b-9fgec1sjgm] {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: var(--radius-pill);
        border: 1px solid var(--neutral-200);
        font-family: var(--font-sans);
        font-size: 12px;
        font-style: italic;
        font-weight: var(--weight-bold);
        color: var(--neutral-500);
    }

    .s7-recap__chain[b-9fgec1sjgm],
    .s7-recap__busted[b-9fgec1sjgm] {
        display: none;
    }

    .s7-recap__folded--open[b-9fgec1sjgm] {
        display: flex;
        grid-column: 1 / -1;
        order: 9;
    }

    p.s7-recap__folded--open[b-9fgec1sjgm] {
        display: block;
    }
}
/* /Components/Game/RoundTotalsBoard.razor.rz.scp.css */
/* E08 — round-total entry. Values from the prototype. */

.s7-totals[b-uancwjjbnz] {
    flex: 1;
    padding: 20px 24px 22px;
    background: var(--cream);
}

.s7-totals__counter[b-uancwjjbnz] {
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: rgba(12, 34, 54, .28);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--neutral-0);
}

/* ---- The Action cards, still available here ------------------- */
.s7-totals__actions[b-uancwjjbnz] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--neutral-0);
    border: 1px solid rgba(43, 42, 118, .22);
}

.s7-totals__actions-title[b-uancwjjbnz] {
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .12em;
    color: var(--game-ink-soft);
    white-space: nowrap;
}

.s7-totals__bars[b-uancwjjbnz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.s7-totals__bar[b-uancwjjbnz] {
    display: grid;
    place-items: center;
    height: var(--control-h-sm);
    padding: 0 13px;
    border-radius: 9px;
    border: 2px solid var(--game-ink);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: .04em;
    color: var(--game-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.s7-totals__bar:active:not(:disabled)[b-uancwjjbnz] {
    transform: scale(.98);
}

.s7-totals__bar:disabled[b-uancwjjbnz] {
    cursor: not-allowed;
    opacity: .5;
}

.s7-totals__bar--freeze[b-uancwjjbnz] {
    background: var(--freeze-blue);
    font-size: 10.5px;
    letter-spacing: .06em;
}

.s7-totals__bar--flipthree[b-uancwjjbnz] {
    background: var(--flip7-yellow);
}

.s7-totals__bar--secondchance[b-uancwjjbnz] {
    background: var(--second-chance-red);
    color: var(--neutral-0);
}

.s7-totals__actions-help[b-uancwjjbnz] {
    flex: 1;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(43, 42, 118, .72);
}

/* ---- The table ------------------------------------------------ */
.s7-totals__head[b-uancwjjbnz],
.s7-totals__row[b-uancwjjbnz] {
    display: grid;
    grid-template-columns: 1.4fr 110px 1fr 90px 90px;
    gap: 12px;
    align-items: center;
}

.s7-totals__head[b-uancwjjbnz] {
    padding: 0 4px 10px;
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .12em;
    color: var(--game-ink-soft);
}

.s7-totals__right[b-uancwjjbnz] {
    text-align: right;
}

.s7-totals__rows[b-uancwjjbnz] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.s7-totals__row[b-uancwjjbnz] {
    padding: 6px 14px;
    border-radius: 12px;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
}

.s7-totals__row--busted[b-uancwjjbnz] {
    background: var(--busted-bg);
    border-color: var(--busted-border);
}

/* Nothing typed yet: the row waits rather than claiming a score of nothing. */
.s7-totals__row--pending[b-uancwjjbnz] {
    border: 2px solid var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 171, 252, .16);
    padding: 5px 13px;
}

.s7-totals__name[b-uancwjjbnz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-totals__before[b-uancwjjbnz] {
    font-size: 12px;
    font-weight: var(--weight-medium);
    color: var(--neutral-500);
}

.s7-totals__bustednote[b-uancwjjbnz] {
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    color: var(--busted-text);
}

.s7-totals__switch[b-uancwjjbnz] {
    display: flex;
    justify-content: flex-end;
}

.s7-totals__total[b-uancwjjbnz] {
    text-align: right;
    font-size: 16px;
    color: var(--ink-900);
}

.s7-totals__total--pending[b-uancwjjbnz] {
    color: var(--text-subtle);
}

/* ---- The verdict ---------------------------------------------- */
.s7-totals__foot[b-uancwjjbnz] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
}

.s7-totals__foot--ending[b-uancwjjbnz] {
    background: var(--near-target-bg);
    border-color: var(--warning-100);
}

.s7-totals__verdict[b-uancwjjbnz] {
    font-size: 12.5px;
    font-weight: var(--weight-bold);
    color: var(--near-target-text);
}

.s7-totals__verdict-help[b-uancwjjbnz] {
    flex: 1;
    font-size: 12px;
    color: var(--near-target-text);
}

.s7-totals__foot:not(.s7-totals__foot--ending) .s7-totals__verdict[b-uancwjjbnz],
.s7-totals__foot:not(.s7-totals__foot--ending) .s7-totals__verdict-help[b-uancwjjbnz] {
    color: var(--neutral-600);
    font-weight: var(--weight-medium);
}

@media (max-width: 1023px) {
    .s7-totals[b-uancwjjbnz] {
        padding: 16px;
    }

    .s7-totals__actions[b-uancwjjbnz] {
        flex-wrap: wrap;
    }

    /* The "before" column is the first thing a phone can do without. */
    .s7-totals__head[b-uancwjjbnz],
    .s7-totals__row[b-uancwjjbnz] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px 72px;
    }

    .s7-totals__head > :nth-child(2)[b-uancwjjbnz],
    .s7-totals__before[b-uancwjjbnz] {
        display: none;
    }

    .s7-totals__foot[b-uancwjjbnz] {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ---- The phone ------------------------------------------------ */
/* The same four columns, with everything around them pulled in: at this width the score
   field and the busted switch are the row, and the padding was taking their space. */
@media (max-width: 767px) {
    .s7-totals[b-uancwjjbnz] {
        padding: 12px;
    }

    /* The switch and the total are as narrow as they can be read at, and what that buys goes
       to the name: a name that runs into the score field is a name nobody trusts. */
    .s7-totals__head[b-uancwjjbnz],
    .s7-totals__row[b-uancwjjbnz] {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 52px 52px;
        gap: 8px;
    }

    .s7-totals__name[b-uancwjjbnz] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .s7-totals__row[b-uancwjjbnz] {
        padding: 6px 10px;
    }

    .s7-totals__row--pending[b-uancwjjbnz] {
        padding: 5px 9px;
    }
}
/* /Components/Game/ScoreboardCard.razor.rz.scp.css */
.s7-row[b-a98csah0h2] {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--neutral-100);
    background: var(--neutral-0);
    box-shadow: 0 1px 3px rgba(12, 34, 54, .06);
}

.s7-row--turn[b-a98csah0h2] {
    border: 2px solid var(--color-primary);
    background: var(--dealer-bg);
    box-shadow: 0 8px 24px rgba(0, 171, 252, .18);
}

.s7-row--out[b-a98csah0h2] {
    background: var(--surface-page);
}

.s7-row__head[b-a98csah0h2],
.s7-row__foot[b-a98csah0h2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.s7-row__foot[b-a98csah0h2] {
    gap: 5px;
    margin-top: 8px;
}

.s7-row__name[b-a98csah0h2] {
    flex: 1;
    font-size: 12.5px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-row__total[b-a98csah0h2] {
    font-size: 19px;
    color: var(--ink-900);
}

.s7-row__gap[b-a98csah0h2] {
    flex: 1;
}

.s7-row__summary[b-a98csah0h2] {
    font-size: 10.5px;
    font-weight: var(--weight-semibold);
    color: var(--dealer-text);
}

.s7-row__delta[b-a98csah0h2] {
    font-size: 12px;
    color: var(--color-primary);
}

.s7-row__state[b-a98csah0h2] {
    font-size: 10px;
    font-weight: var(--weight-medium);
    color: var(--neutral-500);
}

/* The miniature hand: same stock and rule as a real card, at a glanceable size. */
.s7-minihand[b-a98csah0h2] {
    display: grid;
    place-items: center;
    width: 18px;
    height: 24px;
    border-radius: 3px;
    background: var(--cream);
    border: 1px solid var(--game-ink);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 10px;
}


/* In the bottom strip a row is a tile: name, total, and what it did this round. */
@media (max-width: 767px) {
    .s7-row[b-a98csah0h2] {
        padding: 9px 11px;
    }

    .s7-row__head[b-a98csah0h2] {
        gap: 6px;
    }

    .s7-row__name[b-a98csah0h2] {
        font-size: 12px;
    }

    .s7-row__total[b-a98csah0h2] {
        font-size: 17px;
    }

    .s7-row__foot[b-a98csah0h2] {
        margin-top: 5px;
    }
}
/* /Components/Game/TargetPickerDialog.razor.rz.scp.css */
.s7-scrim[b-t9yxngtuy6] {
    position: absolute;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12, 34, 54, .58);
}

.s7-modal[b-t9yxngtuy6] {
    width: 700px;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    border-radius: 18px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: 0 18px 44px rgba(12, 34, 54, .42);
}

.s7-modal__head[b-t9yxngtuy6] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 2px solid var(--game-ink);
}

/* The header carries the colour of the card that opened it. */
.s7-modal--freeze .s7-modal__head[b-t9yxngtuy6] {
    background: var(--freeze-blue);
}

.s7-modal--secondchance .s7-modal__head[b-t9yxngtuy6] {
    background: var(--second-chance-red);
}

.s7-modal--flipthree .s7-modal__head[b-t9yxngtuy6] {
    background: var(--flip7-yellow);
}

.s7-modal__card[b-t9yxngtuy6] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 56px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--cream);
    border: 2px solid var(--game-ink);
    text-align: center;
    font-size: 8.5px;
    font-weight: var(--weight-bold);
    line-height: 1.25;
    letter-spacing: .06em;
    color: var(--game-ink);
}

.s7-modal__titles[b-t9yxngtuy6] {
    flex: 1;
}

.s7-modal__title[b-t9yxngtuy6] {
    font-size: 16px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-modal__subtitle[b-t9yxngtuy6] {
    font-size: 11.5px;
    font-weight: var(--weight-medium);
    color: rgba(43, 42, 118, .75);
}

.s7-modal__badge[b-t9yxngtuy6] {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--game-ink);
    font-size: 9px;
    font-weight: var(--weight-bold);
    letter-spacing: .08em;
    color: var(--neutral-0);
}

.s7-modal__body[b-t9yxngtuy6] {
    padding: 18px 20px;
}

.s7-modal__question[b-t9yxngtuy6] {
    margin-bottom: 3px;
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-modal__help[b-t9yxngtuy6] {
    margin-bottom: 14px;
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(43, 42, 118, .75);
}

.s7-targets[b-t9yxngtuy6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.s7-target[b-t9yxngtuy6] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--control-h-md);
    padding: 13px 15px;
    border-radius: 11px;
    background: var(--neutral-0);
    border: 1px solid rgba(43, 42, 118, .3);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.s7-target:hover[b-t9yxngtuy6] {
    border: 2px solid var(--game-ink);
    padding: 12px 14px;
    box-shadow: 0 3px 0 rgba(43, 42, 118, .2);
}

.s7-target:active[b-t9yxngtuy6] {
    transform: scale(.99);
}

/* Kept on screen, dimmed and dashed, so the reason can be read. */
.s7-target--out[b-t9yxngtuy6] {
    background: rgba(43, 42, 118, .06);
    border: 1px dashed rgba(43, 42, 118, .3);
    cursor: default;
}

.s7-target--out:hover[b-t9yxngtuy6] {
    border: 1px dashed rgba(43, 42, 118, .3);
    padding: 13px 15px;
    box-shadow: none;
}

.s7-target__name[b-t9yxngtuy6] {
    flex: 1;
    font-size: 13px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-target--out .s7-target__name[b-t9yxngtuy6] {
    font-weight: var(--weight-semibold);
    color: rgba(43, 42, 118, .5);
}

.s7-target__hand[b-t9yxngtuy6] {
    font-size: 10.5px;
    font-weight: var(--weight-medium);
    color: rgba(43, 42, 118, .62);
}

.s7-target__flag[b-t9yxngtuy6] {
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--second-chance-red);
    font-size: 8.5px;
    font-weight: var(--weight-bold);
    color: var(--neutral-0);
}

.s7-target__score[b-t9yxngtuy6] {
    font-size: 15px;
    color: var(--game-ink);
}

.s7-target__reason[b-t9yxngtuy6] {
    font-size: 10.5px;
    font-weight: var(--weight-medium);
    text-align: right;
    color: rgba(43, 42, 118, .5);
}

.s7-modal__foot[b-t9yxngtuy6] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px dashed rgba(43, 42, 118, .3);
}

.s7-modal__note[b-t9yxngtuy6] {
    flex: 1;
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(43, 42, 118, .72);
}

@media (max-width: 1023px) {
    .s7-scrim[b-t9yxngtuy6] {
        padding: 0;
    }

    /* On a phone the dialog is the screen, not a card floating on it. */
    .s7-modal[b-t9yxngtuy6] {
        width: 100%;
        height: 100%;
        max-height: none;
        border: none;
        border-radius: 0;
    }

    .s7-targets[b-t9yxngtuy6] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 767px) {
    /* The body scrolls under it now, so the scrim answers to the viewport rather than to
       wherever the document happens to be. */
    .s7-scrim[b-t9yxngtuy6] {
        position: fixed;
    }
}
/* /Components/Home/FirstLaunch.razor.rz.scp.css */
/* E01 — first launch. Values taken from the prototype, not estimated. */

.s7-board[b-xogkijz9ch] {
    position: relative;
    flex: 1;
    overflow: hidden;
    padding: 40px 44px;
    background: var(--board-teal);
}

/* The inset rule that frames the table. */
.s7-board__rule[b-xogkijz9ch] {
    position: absolute;
    inset: 16px;
    border: 2px solid var(--board-rule);
    border-radius: 12px;
    pointer-events: none;
}

.s7-board__grid[b-xogkijz9ch] {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 40px;
    align-items: start;
}

.s7-board__eyebrow[b-xogkijz9ch] {
    display: inline-block;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    background: var(--cream);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .18em;
    color: var(--game-ink);
}

.s7-board__wordmark[b-xogkijz9ch] {
    margin-top: 18px;
}

.s7-notice[b-xogkijz9ch] {
    margin: 20px 0 24px;
    padding: 17px 20px;
    border-radius: 12px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: var(--panel-lift);
}

.s7-notice__title[b-xogkijz9ch] {
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-notice__body[b-xogkijz9ch] {
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--game-ink);
}

.s7-board__actions[b-xogkijz9ch] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.s7-steps[b-xogkijz9ch] {
    padding: 22px;
    border-radius: 16px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: var(--panel-lift-lg);
}

.s7-steps__eyebrow[b-xogkijz9ch] {
    margin-bottom: 14px;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--game-ink);
}

.s7-steps__list[b-xogkijz9ch] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.s7-step[b-xogkijz9ch] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--neutral-0);
    border: 1px solid var(--game-ink-22);
}

.s7-step__number[b-xogkijz9ch] {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--game-ink);
    color: var(--flip7-yellow);
    font-size: 11px;
    font-weight: var(--weight-bold);
}

.s7-step__title[b-xogkijz9ch] {
    font-size: 12.5px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-step__body[b-xogkijz9ch] {
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--game-ink-72);
}

.s7-steps__note[b-xogkijz9ch] {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 11px;
    background: rgba(43, 42, 118, .07);
    font-size: 11.5px;
    line-height: 1.65;
    color: rgba(43, 42, 118, .8);
}

/* Below the tablet breakpoint the two columns stack: the wordmark and the call
   to action first, the three steps under them. */
@media (max-width: 1023px) {
    /* Taller than the screen is fine: the body scrolls. Left flexing, the board is exactly
       one screen tall and its own overflow: hidden swallows everything below the fold. */
    .s7-board[b-xogkijz9ch] {
        flex: none;
        overflow: visible;
        padding: 20px 16px;
    }

    .s7-board__rule[b-xogkijz9ch] {
        display: none;
    }

    .s7-board__grid[b-xogkijz9ch] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

}
/* /Components/Home/GameInProgress.razor.rz.scp.css */
/* E02 — home with a game to resume. Values from the prototype. */

.s7-home[b-12vybndy19] {
    flex: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
}

.s7-home__pitch[b-12vybndy19] {
    position: relative;
    overflow: hidden;
    padding: 44px 44px 40px;
    background: var(--board-teal);
}

.s7-board__rule[b-12vybndy19] {
    position: absolute;
    inset: 16px;
    border: 2px solid var(--board-rule);
    border-radius: 12px;
    pointer-events: none;
}

.s7-home__pitch-inner[b-12vybndy19] {
    position: relative;
}

.s7-board__eyebrow[b-12vybndy19] {
    display: inline-block;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    background: var(--cream);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .18em;
    color: var(--game-ink);
}

.s7-home__wordmark[b-12vybndy19] {
    margin-top: 16px;
}

.s7-home__blurb[b-12vybndy19] {
    max-width: 440px;
    margin: 20px 0 30px;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: var(--panel-lift);
}

.s7-home__blurb-label[b-12vybndy19] {
    font-size: 12.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--game-ink);
}

.s7-home__blurb-text[b-12vybndy19] {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--game-ink);
}

.s7-home__actions[b-12vybndy19] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
}

.s7-home__stats[b-12vybndy19] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 24px;
}

.s7-stat[b-12vybndy19] {
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: 0 3px 0 rgba(43, 42, 118, .25);
}

.s7-stat__figure[b-12vybndy19] {
    font-size: 22px;
    color: var(--game-ink);
}

.s7-stat__label[b-12vybndy19] {
    font-size: 10.5px;
    font-weight: var(--weight-medium);
    color: var(--game-ink-72);
}

.s7-home__side[b-12vybndy19] {
    padding: 32px 30px;
    background: var(--cream);
}

.s7-resume[b-12vybndy19] {
    padding: 20px;
    border-radius: var(--radius-lg);
    background: var(--neutral-0);
    border: 2px solid var(--game-ink);
    box-shadow: 0 5px 0 var(--game-ink-22);
}

.s7-resume__head[b-12vybndy19] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.s7-resume__eyebrow[b-12vybndy19] {
    flex: 1;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--game-ink);
}

.s7-resume__when[b-12vybndy19] {
    font-size: 10.5px;
    color: var(--text-subtle);
}

.s7-resume__title[b-12vybndy19] {
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-resume__players[b-12vybndy19] {
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--neutral-600);
}

.s7-resume__rounds[b-12vybndy19] {
    display: flex;
    gap: 5px;
    margin-bottom: 18px;
}

.s7-resume__round[b-12vybndy19] {
    flex: 1;
    height: 7px;
    border-radius: var(--radius-pill);
    background: var(--game-ink);
}

.s7-resume__round--current[b-12vybndy19] {
    background: var(--flip7-yellow);
    border: 1px solid rgba(43, 42, 118, .3);
}

@media (max-width: 1023px) {
    /* Taller than the screen is fine: the body scrolls. Left flexing, the two stacked halves
       are squeezed into one screen and the pitch clips whatever no longer fits. */
    .s7-home[b-12vybndy19] {
        flex: none;
        grid-template-columns: 1fr;
    }

    .s7-home__pitch[b-12vybndy19] {
        overflow: visible;
        padding: 20px 16px;
    }

    .s7-board__rule[b-12vybndy19] {
        display: none;
    }

    .s7-home__side[b-12vybndy19] {
        padding: 20px 16px;
    }
}

/* ---- Recent games ---------------------------------------------- */
.s7-recent__eyebrow[b-12vybndy19] {
    margin: 26px 0 12px;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--game-ink-soft);
}

.s7-recent[b-12vybndy19] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s7-recent__row[b-12vybndy19] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--neutral-0);
    border: 1px solid #E3D5B4;
    text-decoration: none;
}

.s7-recent__winner[b-12vybndy19] {
    flex: 1;
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    color: var(--ink-900);
}

.s7-recent__when[b-12vybndy19] {
    font-size: 10.5px;
    color: var(--text-subtle);
}

.s7-recent__score[b-12vybndy19] {
    font-size: 13px;
    color: var(--ink-900);
}

/* C09's way in. A quiet link under the way back to the game, because sharing is the second
   thing anybody wants from this card and C09's own bar calls it « facultatif ». */
.s7-resume__share[b-12vybndy19] {
    justify-self: start;
    margin-top: 10px;
    padding: 8px 2px;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: .1em;
    color: var(--game-ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.s7-resume__share:hover[b-12vybndy19] {
    color: var(--azure-600);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-uxbp1nmmen],
.components-reconnect-repeated-attempt-visible[b-uxbp1nmmen],
.components-reconnect-failed-visible[b-uxbp1nmmen],
.components-pause-visible[b-uxbp1nmmen],
.components-resume-failed-visible[b-uxbp1nmmen],
.components-rejoining-animation[b-uxbp1nmmen] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-uxbp1nmmen {
    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/Correction.razor.rz.scp.css */
/* E07 — correction. Values from the prototype. */

.s7-correction[b-7ix627dknj] {
    flex: 1;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 16px;
    padding: 22px;
    background: var(--cream);
}

/* ---- The action about to be undone --------------------------- */
.s7-undo[b-7ix627dknj] {
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    border-radius: 16px;
    background: var(--neutral-0);
    border: 2px solid var(--game-ink);
    box-shadow: var(--panel-lift-lg);
}

.s7-undo__title[b-7ix627dknj] {
    font-size: 18px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-undo__help[b-7ix627dknj] {
    margin: 5px 0 16px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(43, 42, 118, .75);
}

/* Yellow, ink-ruled: the one thing on this screen that will actually change. */
.s7-undo__target[b-7ix627dknj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--flip7-yellow);
    border: 2px solid var(--game-ink);
}

.s7-undo__card[b-7ix627dknj] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 52px;
    flex: none;
    border-radius: 5px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 19px;

    /* A card face is a card: whatever it says stays inside it, never over the sentence. */
    overflow: hidden;
}

/*
 * An Action card is named rather than numbered. "Seconde chance" wants two small lines where
 * a Number wants one big one, so the face is set in the body font at a size that fits.
 */
.s7-undo__card--worded[b-7ix627dknj] {
    /* Wide enough for the longest word of the longest name, so the break falls on the space
       the way the entry pad breaks "SECONDE CHANCE" — never through the middle of a word. */
    width: 66px;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: var(--weight-bold);
    line-height: 1.25;
    text-align: center;
    padding: 0 4px;
    text-transform: uppercase;
}

.s7-undo__what[b-7ix627dknj] {
    flex: 1;
}

.s7-undo__label[b-7ix627dknj] {
    font-size: 13px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-undo__meta[b-7ix627dknj] {
    font-size: 11px;
    font-weight: var(--weight-medium);
    color: rgba(43, 42, 118, .72);
}

/* ---- The stack below it -------------------------------------- */
.s7-undo__eyebrow[b-7ix627dknj] {
    margin: 18px 0 10px;
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--game-ink-soft);
}

.s7-undo__eyebrow--flush[b-7ix627dknj] {
    margin-top: 0;
}

.s7-undo__stack[b-7ix627dknj] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.s7-undo__row[b-7ix627dknj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--cream-panel);
    border: 1px solid rgba(43, 42, 118, .18);
}

.s7-undo__row-label[b-7ix627dknj] {
    flex: 1;
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    color: var(--game-ink);
}

.s7-undo__row-label--bust[b-7ix627dknj] {
    color: var(--busted-text);
}

.s7-undo__row-when[b-7ix627dknj] {
    font-size: 10.5px;
    color: rgba(43, 42, 118, .55);
}

.s7-undo__spacer[b-7ix627dknj] {
    flex: 1;
}

.s7-undo__further[b-7ix627dknj] {
    padding-top: 14px;
    border-top: 1px dashed rgba(43, 42, 118, .3);
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(43, 42, 118, .72);
}

.s7-undo__empty[b-7ix627dknj] {
    padding: 16px;
    border-radius: 12px;
    background: var(--cream-panel);
    border: 1px dashed rgba(43, 42, 118, .3);
    font-size: 12px;
    color: rgba(43, 42, 118, .72);
}

/* ---- The resulting round ------------------------------------- */
.s7-correction__side[b-7ix627dknj] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.s7-preview[b-7ix627dknj] {
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--neutral-0);
    border: 1px solid rgba(43, 42, 118, .22);
}

.s7-preview__list[b-7ix627dknj] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.s7-preview__row[b-7ix627dknj] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    border: 1px solid rgba(43, 42, 118, .22);
}

.s7-preview__name[b-7ix627dknj] {
    flex: 1;
    font-size: 12px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-preview__state[b-7ix627dknj] {
    font-size: 10.5px;
    font-weight: var(--weight-medium);
    color: rgba(43, 42, 118, .62);
}

.s7-preview__score[b-7ix627dknj] {
    font-size: 13px;
    color: var(--game-ink);
}

/* ---- What undo cannot reach ---------------------------------- */
.s7-untouched[b-7ix627dknj] {
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--game-ink);
    background-image: radial-gradient(120% 120% at 100% 0%, rgba(247, 222, 99, .24) 0%, rgba(247, 222, 99, 0) 48%);
}

.s7-untouched__title[b-7ix627dknj] {
    margin-bottom: 8px;
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .65);
}

.s7-untouched__text[b-7ix627dknj] {
    font-size: 11.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .9);
}

@media (max-width: 1023px) {
    .s7-correction[b-7ix627dknj] {
        grid-template-columns: 1fr;
        padding: 16px;
    }
}
/* /Components/Pages/History.razor.rz.scp.css */
/* E13 — history. Values from the prototype. */

.s7-history[b-7x8dglap2a] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 420px;
}

.s7-history--empty[b-7x8dglap2a] {
    display: block;
    padding: 40px 24px;
    background: var(--cream-panel);
}

.s7-history__empty-title[b-7x8dglap2a] {
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-history__empty-help[b-7x8dglap2a] {
    margin-top: 5px;
    font-size: 12px;
    color: var(--neutral-500);
}

.s7-history__list[b-7x8dglap2a] {
    padding: 24px;
    background: var(--cream-panel);
}

.s7-history__head[b-7x8dglap2a],
.s7-history__row[b-7x8dglap2a] {
    display: grid;
    grid-template-columns: 90px 1fr 110px 80px 70px;
}

/* Signed in, a sixth column says where each game lives. Signed out there is nothing to
   distinguish, so the column is absent rather than present and empty. */
.s7-history__head[data-with-state][b-7x8dglap2a],
.s7-history__row[data-with-state][b-7x8dglap2a] {
    grid-template-columns: 90px 1fr 110px 80px 56px 116px;
    gap: 12px;
    align-items: center;
}

.s7-history__head[b-7x8dglap2a] {
    padding: 0 14px 10px;
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .12em;
    color: var(--game-ink-soft);
}

.s7-history__right[b-7x8dglap2a] {
    text-align: right;
}

.s7-history__rows[b-7x8dglap2a] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.s7-history__row[b-7x8dglap2a] {
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.s7-history__row--selected[b-7x8dglap2a] {
    padding: 12px 13px;
    background: var(--dealer-bg);
    border: 2px solid var(--color-primary);
}

.s7-history__date[b-7x8dglap2a] {
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    color: var(--ink-900);
}

.s7-history__players[b-7x8dglap2a] {
    font-size: 11.5px;
    color: var(--neutral-600);
}

.s7-history__winner[b-7x8dglap2a] {
    font-size: 12px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-history__score[b-7x8dglap2a] {
    text-align: right;
    font-size: 14px;
    color: var(--ink-900);
}

.s7-history__rounds[b-7x8dglap2a] {
    text-align: right;
    font-size: 11.5px;
    font-weight: var(--weight-medium);
    color: var(--neutral-500);
}

/* The list column with nothing finished in it yet: the message, and the game in progress
   beside it. Narrower than the full list, because there is no table to hold. */
/* Only the alignment. Repeating the columns here would out-specify the one-column collapse
   below and leave the phone with a 420px track it has no room for. */
.s7-history[data-only-playing="yes"][b-7x8dglap2a] {
    align-items: start;
}

.s7-history__empty-inline[b-7x8dglap2a] {
    padding: 16px 0 4px;
}

/* ---- The right-hand column ------------------------------------- */
/* The edge and the ground belong to the column rather than to the matrix, because the column
   now holds two panels and the game in progress can be there without a game selected. */
.s7-history__side[b-7x8dglap2a] {
    display: grid;
    align-content: start;
    background: var(--cream);
    border-left: 1px solid var(--teal-cream-edge);
}

/* ---- The game still being played ------------------------------- */
/* C07. Named for this screen rather than borrowed: E02's home card is also a game offered
   back, also called resume, and is a different panel on a different screen. */
.s7-history__playing[b-7x8dglap2a] {
    display: grid;
    justify-items: start;
    gap: 6px;
    padding: 24px 22px;
    background: var(--cream-panel);
    border-bottom: 1px solid var(--teal-cream-edge);
}

.s7-history__playing-title[b-7x8dglap2a] {
    font-size: 17px;
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: var(--game-ink);
}

.s7-history__playing-who[b-7x8dglap2a] {
    font-size: 12px;
    font-weight: var(--weight-medium);
    color: var(--game-ink-soft);
}

/* Only ever rendered with an account, where "which device" is a question that has an answer. */
.s7-history__playing-where[b-7x8dglap2a] {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--cream);
    border: 1px solid var(--teal-cream-edge);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--game-ink-soft);
}

.s7-history__playing-where[data-here="yes"][b-7x8dglap2a] {
    background: var(--stayed-bg);
    border-color: var(--stayed-text);
    color: var(--stayed-text);
}

/* The button is the account sheet's, deliberately: it is the same gesture with the same
   weight as every other "this is the one thing to do here" on the account screens. */
.s7-history__playing .s7-auth__submit[b-7x8dglap2a] {
    margin-top: 8px;
}

.s7-history__playing-note[b-7x8dglap2a] {
    font-size: 11px;
    line-height: 1.45;
    color: var(--neutral-500);
}

/* ---- The matrix ----------------------------------------------- */
.s7-matrix[b-7x8dglap2a] {
    padding: 24px 22px;
}

.s7-matrix__eyebrow[b-7x8dglap2a] {
    margin-bottom: 14px;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--game-ink-soft);
}

.s7-matrix__head[b-7x8dglap2a],
.s7-matrix__row[b-7x8dglap2a] {
    display: grid;
    gap: 6px;
    align-items: center;
}

.s7-matrix__head[b-7x8dglap2a] {
    padding: 0 6px 8px;
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    color: var(--text-subtle);
}

.s7-matrix__round[b-7x8dglap2a] {
    text-align: center;
}

.s7-matrix__rows[b-7x8dglap2a] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.s7-matrix__row[b-7x8dglap2a] {
    padding: 9px 6px;
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
}

.s7-matrix__name[b-7x8dglap2a] {
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-matrix__cell[b-7x8dglap2a] {
    text-align: center;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--ink-900);
}

/* Red is a round the player busted — the one thing the matrix is really for. */
.s7-matrix__cell--busted[b-7x8dglap2a] {
    color: var(--danger-500);
}

.s7-matrix__cell--best[b-7x8dglap2a] {
    color: var(--success-500);
}

.s7-matrix__note[b-7x8dglap2a] {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
    font-size: 11px;
    line-height: 1.65;
    color: var(--neutral-600);
}

.s7-matrix__actions[b-7x8dglap2a] {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

@media (max-width: 1023px) {
    .s7-history[b-7x8dglap2a] {
        grid-template-columns: 1fr;
    }

    .s7-history__list[b-7x8dglap2a],
    .s7-history__playing[b-7x8dglap2a],
    .s7-matrix[b-7x8dglap2a] {
        padding: 16px;
    }

    .s7-history__side[b-7x8dglap2a] {
        border-left: none;
        border-top: 1px solid var(--teal-cream-edge);
    }


}

/* ---- Phone ----------------------------------------------------- */
/* The column surgery used to start at 1023px, alongside the single-column layout it has
   nothing to do with. A tablet in portrait got a phone's four columns while six had room to
   spare — and with six cells to place in four tracks the last one, ÉTAT, dropped onto a line
   of its own and read like a mistake. */
@media (max-width: 767px) {
    /* The player list is the first column a phone can do without, and the state moves under
       the players rather than taking a column of its own. */
    .s7-history__head[b-7x8dglap2a],
    .s7-history__row[b-7x8dglap2a],
    .s7-history__head[data-with-state][b-7x8dglap2a],
    .s7-history__row[data-with-state][b-7x8dglap2a] {
        grid-template-columns: 84px 1fr 56px 44px;
    }

    .s7-history__head > :nth-child(2)[b-7x8dglap2a],
    .s7-history__players[b-7x8dglap2a] {
        display: none;
    }
}
/* /Components/Pages/NewGame.razor.rz.scp.css */
/* E03 — configuration. Values from the prototype. */

.s7-setup[b-8ir70hhic2] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.s7-setup__players[b-8ir70hhic2] {
    padding: 26px 30px 22px;
    background: var(--cream-panel);
}

.s7-setup__mode[b-8ir70hhic2] {
    padding: 30px 30px 26px;
    background: var(--cream);
    border-left: 1px solid var(--teal-cream-edge);
}

.s7-setup__title[b-8ir70hhic2] {
    font-size: 19px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-setup__help[b-8ir70hhic2] {
    margin: 5px 0 20px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--neutral-500);
}

/* ---- Seats --------------------------------------------------- */
.s7-seats[b-8ir70hhic2] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.s7-seat[b-8ir70hhic2] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.s7-seat__index[b-8ir70hhic2] {
    width: 24px;
    flex: none;
    font-size: 11px;
    color: var(--text-subtle);
}

.s7-seat__field[b-8ir70hhic2] {
    flex: 1;
    min-width: 0;
}

/* Signed in, the first seat is the account rather than a field. It keeps the height and the
   width of the ones around it — a row that shrinks because it cannot be typed in reads as a
   row that is missing something. */
.s7-seat__you[b-8ir70hhic2] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: var(--control-h-md);
    padding: 0 12px;
    border-radius: var(--radius-md);
    background: var(--neutral-50);
    border: 1px solid var(--border-subtle);
}

/* The same dot as C08 and C10, meaning the same thing in all three: an account of their own. */
.s7-seat__dot[b-8ir70hhic2] {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--azure-600);
}

.s7-seat__name[b-8ir70hhic2] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--weight-semibold);
    color: var(--ink-900);
}

.s7-seat__mine[b-8ir70hhic2] {
    flex: none;
    font-size: 11px;
    color: var(--text-muted);
}

.s7-seat__remove[b-8ir70hhic2]::part(control) {
    padding: 0 10px;
    font-size: 16px;
}

.s7-setup__add[b-8ir70hhic2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.s7-setup__note[b-8ir70hhic2] {
    font-size: 10.5px;
    color: var(--text-subtle);
}

.s7-setup__error[b-8ir70hhic2] {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--busted-bg);
    border: 1px solid var(--busted-border);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--busted-text);
}

/* ---- Entry mode ---------------------------------------------- */
.s7-modes[b-8ir70hhic2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s7-mode[b-8ir70hhic2] {
    display: block;
    width: 100%;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.s7-mode--chosen[b-8ir70hhic2] {
    border: 2px solid var(--color-primary);
    box-shadow: 0 12px 28px rgba(0, 171, 252, .14);
}

.s7-mode__head[b-8ir70hhic2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.s7-mode__radio[b-8ir70hhic2] {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: var(--radius-pill);
    border: 2px solid var(--neutral-300);
    background: var(--neutral-0);
}

.s7-mode--chosen .s7-mode__radio[b-8ir70hhic2] {
    border: 5px solid var(--color-primary);
}

.s7-mode__name[b-8ir70hhic2] {
    font-size: 14px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-mode__badge[b-8ir70hhic2] {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--dealer-bg);
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    color: var(--dealer-text);
}

.s7-mode__help[b-8ir70hhic2] {
    display: block;
    font-size: 12px;
    line-height: 1.65;
    color: var(--neutral-600);
}

.s7-mode__preview[b-8ir70hhic2] {
    display: flex;
    gap: 5px;
    margin-top: 12px;
}

/* Miniature cards: the same cream stock and ink rule as the real ones. */
.s7-minicard[b-8ir70hhic2] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 30px;
    border-radius: var(--radius-xs);
    background: var(--cream);
    border: 1px solid var(--game-ink);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 12px;
}

.s7-minicard--modifier[b-8ir70hhic2] {
    background: var(--modifier-orange);
    color: var(--game-ink);
    font-size: 10px;
}

.s7-total[b-8ir70hhic2] {
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    background: var(--surface-page);
    border: 1px solid var(--neutral-100);
    font-size: 12px;
    color: var(--ink-900);
}

.s7-total--busted[b-8ir70hhic2] {
    background: var(--busted-bg);
    border-color: var(--busted-border);
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: var(--weight-semibold);
    color: var(--busted-text);
}

/* ---- Target and actions -------------------------------------- */
.s7-target[b-8ir70hhic2] {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
}

.s7-target__row[b-8ir70hhic2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.s7-target__label[b-8ir70hhic2] {
    flex: 1;
    font-size: 12.5px;
    font-weight: var(--weight-semibold);
    color: var(--ink-900);
}

.s7-target__value[b-8ir70hhic2] {
    font-size: 17px;
    color: var(--ink-900);
}

.s7-target__help[b-8ir70hhic2] {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-subtle);
}

/* Said from the first render, before a single name is typed. */
.s7-setup__replaces[b-8ir70hhic2] {
    margin-top: 12px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--neutral-600);
}

/* Armed, and reading like the confirm on the settings screen it borrows from. */
.s7-setup__confirm[b-8ir70hhic2] {
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    color: var(--busted-text);
}

.s7-setup__actions[b-8ir70hhic2] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

@media (max-width: 1023px) {
    .s7-setup[b-8ir70hhic2] {
        grid-template-columns: 1fr;
    }

    .s7-setup__players[b-8ir70hhic2],
    .s7-setup__mode[b-8ir70hhic2] {
        padding: 20px 16px;
    }

    .s7-setup__mode[b-8ir70hhic2] {
        border-left: none;
        border-top: 1px solid var(--teal-cream-edge);
    }
}


@media (max-width: 767px) {
    /* The banner already says the game is new; the bar note is the same fact, twice. */
    .s7-newgame__barnote[b-8ir70hhic2] {
        display: none;
    }

    /* Four things on one line — seat number, name, donneur, remove. They fit once the name
       field is allowed to shrink; the gap buys it the last few pixels. */
    .s7-seat[b-8ir70hhic2] {
        gap: 8px;
    }
}
/* /Components/Pages/RoundEntry.razor.rz.scp.css */
/* E04 — card-by-card entry. Values from the prototype. */

/* min-width: 0 on every level of the shell. Without it a grid or flex child refuses to
   shrink below its own content, and quietly pushes the screen wider than the phone. */
.s7-round[b-d7wmn718gq] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--board-column, 316px);
    min-width: 0;
    min-height: 0;
}

.s7-round__table[b-d7wmn718gq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pad-column, 248px);
    min-width: 0;
    min-height: 0;
    background: var(--entry-teal);
}

.s7-round__player[b-d7wmn718gq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px 24px;
}

/* Cream straight on the entry teal reads at 3.09 to 1, which is under the floor for text
   this size. The same dark pill the eyebrows use puts it back over it. */
.s7-round__done[b-d7wmn718gq] {
    display: inline-block;
    align-self: flex-start;
    margin-top: 24px;
    padding: 7px 12px;
    border-radius: 9px;
    background: rgba(12, 34, 54, .45);
    font-size: 14px;
    font-weight: var(--weight-semibold);
    color: var(--cream);
}

/* ---- The hand ------------------------------------------------ */
.s7-hand[b-d7wmn718gq] {
    margin-top: 12px;
}

.s7-hand__labels[b-d7wmn718gq] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--hand-gap, 8px);
    margin-bottom: 7px;
}

.s7-hand__eyebrow[b-d7wmn718gq] {
    grid-column: 1 / span 2;
    justify-self: start;
    padding: 4px 9px;
    border-radius: 7px;
    background: rgba(12, 34, 54, .45);
    font-size: 8.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--cream);
}

.s7-hand__eyebrow--right[b-d7wmn718gq] {
    grid-column: 7;
    justify-self: end;
}

/* minmax(0, 1fr) rather than 1fr: a plain 1fr floors at the widest word on the card, and
   SECONDE at eight pixels is wider than a seventh of a phone. */
.s7-hand__grid[b-d7wmn718gq] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--hand-gap, 8px);
}

/* The Second chance always keeps the seventh column, whatever else is in the row. */
.s7-hand__seventh[b-d7wmn718gq] {
    grid-column: 7;
}

/* ---- The pad -------------------------------------------------- */
/* The pad scrolls itself. A tablet in landscape is a wide screen by the breakpoints and a
   short one in fact — an iPad Mini leaves some 610px once Safari and the bar have taken
   theirs, and the pad wants 644. Left to the body, the last of it — Stop, the one action
   that leaves the round — is reachable only by scrolling the spotlight and the table away
   with it. The player column is deliberately not given the same: the breakdown popover
   hangs outside it on purpose, and a scroller there would clip it. */
.s7-round__pad[b-d7wmn718gq] {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    background: rgba(255, 255, 255, .14);
    border-left: 1px solid rgba(255, 255, 255, .22);
}

.s7-round__rule[b-d7wmn718gq] {
    height: 1px;
    margin: 16px 0 14px;
    background: rgba(255, 255, 255, .28);
}

/* Standing down: white, ink-ruled, lifted — the one action that leaves the round. */
.s7-standdown[b-d7wmn718gq] {
    display: grid;
    place-items: center;
    width: 100%;
    height: var(--stand-down-h, 50px);
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    border: 2px solid var(--game-ink);
    box-shadow: var(--card-lift-sm);
    font-family: var(--font-sans);
    font-size: var(--stand-down-text, 13.5px);
    font-weight: var(--weight-bold);
    color: var(--game-ink);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.s7-standdown:active:not(:disabled)[b-d7wmn718gq] {
    transform: scale(.98);
}

/* Staying needs a card in front of you. Without one the button was still lifted, still had a
   pointer and still pressed in — it just did nothing, and the tooltip that explained why never
   shows on a touch screen. */
.s7-standdown:disabled[b-d7wmn718gq] {
    box-shadow: none;
    border-color: var(--game-ink-22);
    color: var(--game-ink-soft);
    opacity: .5;
    cursor: not-allowed;
}

/* ---- The scoreboard ------------------------------------------- */
.s7-scoreboard[b-d7wmn718gq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 18px 16px;
    background: var(--neutral-0);
    border-left: 1px solid var(--neutral-100);
}

.s7-scoreboard__head[b-d7wmn718gq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.s7-scoreboard__title[b-d7wmn718gq] {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--game-ink-soft);
}

.s7-scoreboard__target[b-d7wmn718gq] {
    font-size: 10px;
    font-weight: var(--weight-medium);
    color: var(--text-subtle);
}

.s7-scoreboard__list[b-d7wmn718gq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Quiet on purpose: sharing is optional, and this sits under the one block on the screen
   nobody taps by accident. Full width so it is a target rather than a word. */
.s7-scoreboard__invite[b-d7wmn718gq] {
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid var(--neutral-200);
    background: var(--neutral-0);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-align: center;
    text-decoration: none;
}

.s7-scoreboard__invite:hover[b-d7wmn718gq] {
    border-color: var(--color-primary);
}

.s7-scoreboard__hint[b-d7wmn718gq] {
    margin-top: 10px;
    padding: 11px 12px;
    border-radius: 11px;
    background: var(--surface-page);
    border: 1px solid var(--neutral-100);
    font-size: 10.5px;
    line-height: 1.55;
    color: var(--neutral-600);
}

.s7-scoreboard__hint-word[b-d7wmn718gq] {
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
}

/* ---- Bar context --------------------------------------------- */
.s7-bar__round[b-d7wmn718gq] {
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    color: var(--neutral-700);
}

/* The mark and the name read as one thing: "who is dealing". */
.s7-bar__dealer[b-d7wmn718gq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.s7-bar__dealer-name[b-d7wmn718gq] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    color: var(--neutral-700);
}

.s7-bar__dot[b-d7wmn718gq] {
    font-size: 11.5px;
    color: var(--text-subtle);
}

.s7-bar__turn[b-d7wmn718gq] {
    font-size: 11.5px;
    color: var(--neutral-500);
}

/* Below the tablet breakpoint the three columns stack, and the scoreboard becomes a
   sideways-scrolling strip so the pad keeps its width. */
@media (max-width: 1023px) {
    .s7-round[b-d7wmn718gq],
    .s7-round__table[b-d7wmn718gq] {
        grid-template-columns: 1fr;
    }

    .s7-round__player[b-d7wmn718gq] {
        padding: 16px;
    }

    /* Stacked, the pad grows and the body scrolls: a scroller here would be a second
       scrollbar inside the first. */
    .s7-round__pad[b-d7wmn718gq] {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, .22);
        overflow-y: visible;
    }

    .s7-scoreboard[b-d7wmn718gq] {
        border-left: none;
        border-top: 1px solid var(--neutral-100);
    }

    .s7-scoreboard__list[b-d7wmn718gq] {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
    }

    .s7-scoreboard__list > *[b-d7wmn718gq] {
        min-width: 210px;
    }

    /* Taller than the screen is fine: the body scrolls. Left flexing, the scoreboard would be
       squeezed to nothing at the bottom. */
    .s7-round[b-d7wmn718gq] {
        flex: none;
    }

    .s7-scoreboard__list[b-d7wmn718gq] {
        flex: none;
    }
}


/* ---- P05, the tablet on its side ------------------------------ */
/* A tablet in landscape is wide by the breakpoints and short in fact: an iPad Mini is 1133 by
   744, so it takes the desktop's three columns with barely two thirds of its height. The pad
   ends up 248px wide and scrolling, with tiles sized for a mouse on a screen nobody touches
   with one.

   So it borrows the portrait answer: the table goes to the bottom as a strip, and the width it
   gives back goes to the pad, whose tiles grow to the size of a thumb.

   The query is written from the constraint rather than from a device — wide, short, and tapped.
   `pointer: coarse` is load-bearing, not decoration: without it a laptop at 1180 x 730 would
   switch too, and 1180 x 730 is exactly the frame E04 is compared against.

   The same query appears in NumberPad, ModifierPad and ActionPad. There is no build step here
   to declare it once. */
@media (min-width: 1024px) and (max-height: 850px) and (pointer: coarse) {
    .s7-round[b-d7wmn718gq] {
        flex: 1;
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    /* The pad takes the table's old column and then some: the tiles are what this screen is for. */
    .s7-round__table[b-d7wmn718gq] {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
    }

    /* Down the bottom, as it is in portrait. The pad keeps the scroller it already had above
       1024, and the player column is still given none: the breakdown popover hangs outside it
       on purpose, and a scroller there would clip it. With the table out of the way there is
       height enough for the spotlight and both rows of the hand. */
    .s7-scoreboard[b-d7wmn718gq] {
        border-left: none;
        border-top: 1px solid var(--neutral-100);
        max-height: 30dvh;
        padding: 10px 16px calc(12px + var(--safe-bottom));
    }

    .s7-scoreboard__list[b-d7wmn718gq] {
        flex: none;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
    }

    .s7-scoreboard__list > *[b-d7wmn718gq] {
        min-width: 210px;
    }

    /* The strip itself says whose turn it is; the hint is desktop reassurance. */
    /* Quiet on purpose: sharing is optional, and this sits under the one block on the screen
   nobody taps by accident. Full width so it is a target rather than a word. */
.s7-scoreboard__invite[b-d7wmn718gq] {
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid var(--neutral-200);
    background: var(--neutral-0);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-align: center;
    text-decoration: none;
}

.s7-scoreboard__invite:hover[b-d7wmn718gq] {
    border-color: var(--color-primary);
}

.s7-scoreboard__hint[b-d7wmn718gq] {
        display: none;
    }

    /* The table is pinned, so the body stops scrolling and the entry starts — and the strip is
       what meets the home indicator, so it carries the inset instead of the body. */
    .s7-app__body[b-d7wmn718gq] {
        overflow: hidden;
        padding-bottom: 0;
    }
}


/* ---- M04, the phone ------------------------------------------- */
/* One column, everything sized for a thumb, and the scoreboard as a strip along the bottom
   that scrolls sideways — six players will not fit down the side of a phone. */
@media (max-width: 767px) {
    .s7-round__player[b-d7wmn718gq] {
        padding: 12px;
    }

    .s7-round__pad[b-d7wmn718gq] {
        padding: 12px;
    }

    .s7-round__rule[b-d7wmn718gq] {
        margin: 12px 0 10px;
    }

    /* The hand keeps its seven columns; the cards shrank instead. */
    .s7-hand__grid[b-d7wmn718gq],
    .s7-hand__labels[b-d7wmn718gq] {
        gap: 5px;
    }

    .s7-hand__eyebrow[b-d7wmn718gq] {
        font-size: 7.5px;
        padding: 3px 6px;
        letter-spacing: .1em;
    }

    .s7-standdown[b-d7wmn718gq] {
        height: 52px;
        font-size: 14px;
    }

    .s7-scoreboard[b-d7wmn718gq] {
        padding: 10px 12px calc(12px + var(--safe-bottom));
    }

    .s7-scoreboard__list > *[b-d7wmn718gq] {
        min-width: 150px;
    }

    /* The turn hint is desktop reassurance; the strip itself says whose turn it is. */
    /* Quiet on purpose: sharing is optional, and this sits under the one block on the screen
   nobody taps by accident. Full width so it is a target rather than a word. */
.s7-scoreboard__invite[b-d7wmn718gq] {
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid var(--neutral-200);
    background: var(--neutral-0);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-align: center;
    text-decoration: none;
}

.s7-scoreboard__invite:hover[b-d7wmn718gq] {
    border-color: var(--color-primary);
}

.s7-scoreboard__hint[b-d7wmn718gq] {
        display: none;
    }

    /* Round and dealer stay in the bar. The turn counter goes: the spotlight already says
       whose turn it is, and it says it in words. */
    .s7-bar__turn[b-d7wmn718gq],
    .s7-bar__dot[b-d7wmn718gq] {
        display: none;
    }

    .s7-bar__round[b-d7wmn718gq] {
        font-size: 11px;
        white-space: nowrap;
    }

    /* The table is what everyone around the real table looks at, and hunting for it under a
       screenful of pads is not looking at it. It stays at the bottom and the entry scrolls
       behind it — which means the body stops scrolling and the entry starts. */
    .s7-app__body[b-d7wmn718gq] {
        overflow: hidden;
        /* Nothing scrolls to the bottom here; the strip below is what meets the home
           indicator, and it carries the inset so its own white runs under it. */
        padding-bottom: 0;
    }

    .s7-round[b-d7wmn718gq] {
        flex: 1;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .s7-round__table[b-d7wmn718gq] {
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Six players' worth of strip must not take the screen the cards are entered on. */
    .s7-scoreboard[b-d7wmn718gq] {
        max-height: 42dvh;
    }
}


/* ---- Wide and tall, the tier that was missing ------------------
   Sizes are the tokens' job — see score7-tokens.css, which explains why this frame had none.
   What is left here is the one thing a token cannot say: where the surplus height goes.

   The spotlight stays at the top, because that is where the eye starts and where the score
   is. The two rows of the hand take the middle of what remains rather than hugging the
   spotlight, which is what left a third of the table empty underneath them. */
@media (min-width: 1024px) and (min-height: 851px),
       (min-width: 1280px) and (min-height: 700px) and (pointer: fine) {
    .s7-round__player[b-d7wmn718gq] {
        padding: 28px 32px;
    }

    .s7-hand:not(.s7-hand--second)[b-d7wmn718gq] {
        margin-top: auto;
    }

    .s7-hand--second[b-d7wmn718gq] {
        margin-bottom: auto;
    }

    .s7-round__pad[b-d7wmn718gq] {
        padding: 22px;
    }

    .s7-scoreboard[b-d7wmn718gq] {
        padding: 22px 20px;
    }
}
/* /Components/Pages/RoundRecap.razor.rz.scp.css */
/* E10 — end of round. */

.s7-recaps[b-r756gmcvc9] {
    flex: 1;
    padding: 18px 24px 20px;
    background: var(--cream);
}

.s7-recaps__list[b-r756gmcvc9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s7-outcome[b-r756gmcvc9] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 15px 20px;
    border-radius: var(--radius-lg);
    background: var(--game-ink);
    background-image: radial-gradient(120% 120% at 100% 0%, rgba(247, 222, 99, .24) 0%, rgba(247, 222, 99, 0) 48%);
}

.s7-outcome__words[b-r756gmcvc9] {
    flex: 1;
}

.s7-outcome__headline[b-r756gmcvc9] {
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--neutral-0);
}

.s7-outcome__sub[b-r756gmcvc9] {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .7);
}

/* Once per game, in the margin of the scores rather than across them: it corrects a habit,
   it does not report on the game. */
.s7-deckrule[b-r756gmcvc9] {
    margin-top: 14px;
    padding-left: 11px;
    border-left: 3px solid var(--azure-500);
    font-size: 12px;
    line-height: 1.7;
    color: var(--neutral-600);
}

/* The seconds stay out of the accent button: that label is already four different sentences,
   and a ticking button reads as something you have to beat. */
.s7-autonext[b-r756gmcvc9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.s7-autonext__value[b-r756gmcvc9] {
    font-size: 13px;
    color: var(--neutral-0);
    font-variant-numeric: tabular-nums;
}

.s7-autonext__stop[b-r756gmcvc9] {
    padding: 4px 10px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, .78);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.s7-autonext__stop:hover[b-r756gmcvc9] {
    color: var(--neutral-0);
    border-color: rgba(255, 255, 255, .5);
}

/* Said, not shown: the figure beside it is aria-hidden, and a live region on digits that
   change every second would talk over the recap being read. */
.s7-autonext__spoken[b-r756gmcvc9] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 1023px) {
    .s7-recaps[b-r756gmcvc9] {
        padding: 16px;
    }

    .s7-outcome[b-r756gmcvc9] {
        flex-direction: column;
        align-items: stretch;
    }

    .s7-autonext[b-r756gmcvc9] {
        justify-content: space-between;
    }
}


/* ---- The phone ------------------------------------------------ */
/* Six players, a verdict and a button do not fit one screen, and the button is the one
   thing that must never be scrolled to. The rows take the scrolling instead. */
@media (max-width: 767px) {
    .s7-app__body[b-r756gmcvc9] {
        overflow: hidden;
        /* The rows scroll, not the body: the verdict below them is what meets the home
           indicator, so the inset belongs to the block that holds it. */
        padding-bottom: 0;
    }

    .s7-recaps[b-r756gmcvc9] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 12px 12px calc(12px + var(--safe-bottom));
    }

    .s7-recaps__list[b-r756gmcvc9] {
        flex: 1;
        min-height: 0;
        gap: 6px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .s7-outcome[b-r756gmcvc9] {
        flex: none;
        margin-top: 10px;
        padding: 12px 14px;
    }
}
/* /Components/Pages/Rules.razor.rz.scp.css */
/* E14 — the rules, consultable mid-round. */

.s7-rules[b-nol2v26djj] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.s7-rules__principle[b-nol2v26djj] {
    padding: 26px 30px;
    background: var(--cream-panel);
}

.s7-rules__cards[b-nol2v26djj] {
    padding: 26px 30px;
    background: var(--cream);
    border-left: 1px solid var(--teal-cream-edge);
}

.s7-rules__eyebrow[b-nol2v26djj] {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--game-ink-soft);
}

.s7-rules__title[b-nol2v26djj] {
    margin-top: 6px;
    font-size: 19px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-rules__subtitle[b-nol2v26djj] {
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-rules__phrases[b-nol2v26djj] {
    margin: 12px 0 20px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--neutral-700);
}

.s7-rules__phrases strong[b-nol2v26djj] {
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

/* ---- The calculation card ------------------------------------- */
.s7-calc-card[b-nol2v26djj] {
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: var(--panel-lift);
}

.s7-calc-card__title[b-nol2v26djj] {
    margin-bottom: 12px;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--game-ink);
}

.s7-calc-card__steps[b-nol2v26djj] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.s7-calc-card__step[b-nol2v26djj] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--game-ink);
}

.s7-calc-card__number[b-nol2v26djj] {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--game-ink);
    font-size: 11px;
    font-weight: var(--weight-bold);
    color: var(--cream);
}

.s7-calc-card__example[b-nol2v26djj] {
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    border: 1px solid var(--game-ink-22);
    font-size: 12px;
    color: var(--game-ink);
}

/* A quiet aside, not a panel: it closes the column without competing with the calc card. */
/* The one paragraph that contradicts a habit rather than describing the game: given a rule
   down its edge so the eye stops on it. */
.s7-rules__end--deck[b-nol2v26djj] {
    border-left: 3px solid var(--azure-500);
}

.s7-rules__end[b-nol2v26djj] {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--surface-page);
    font-size: 12px;
    line-height: 1.8;
    color: var(--neutral-600);
}

/* ---- The cards ------------------------------------------------- */
.s7-rules__actions[b-nol2v26djj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 14px 0 22px;
}

.s7-rules__action[b-nol2v26djj] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--neutral-0);
}

.s7-rules__action-card[b-nol2v26djj] {
    display: grid;
    place-items: center;
    width: 50px;
    height: 64px;
    flex: none;
    border-radius: var(--radius-sm);
    border: 2px solid var(--game-ink);
    box-shadow: var(--card-lift-sm);
    text-align: center;
    font-size: 8px;
    font-weight: var(--weight-bold);
    line-height: 1.25;
    color: var(--game-ink);
}

.s7-rules__action-card--freeze[b-nol2v26djj] {
    background: var(--freeze-blue);
    font-size: 10px;
    letter-spacing: .06em;
}

.s7-rules__action-card--flipthree[b-nol2v26djj] {
    background: var(--flip7-yellow);
}

.s7-rules__action-card--secondchance[b-nol2v26djj] {
    background: var(--second-chance-red);
    color: var(--neutral-0);
}

.s7-rules__action-name[b-nol2v26djj] {
    font-size: 13px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-rules__action-text[b-nol2v26djj] {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--neutral-600);
}

.s7-rules__modifiers[b-nol2v26djj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 16px;
}

.s7-rules__modifier[b-nol2v26djj] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: var(--modifier-orange);
    border: 2px solid var(--game-ink);
    box-shadow: var(--card-lift-sm);
    font-size: 14px;
    color: var(--game-ink);
}

.s7-rules__note[b-nol2v26djj] {
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--neutral-600);
}

@media (max-width: 1023px) {
    .s7-rules[b-nol2v26djj] {
        grid-template-columns: 1fr;
    }

    .s7-rules__principle[b-nol2v26djj],
    .s7-rules__cards[b-nol2v26djj] {
        padding: 20px 16px;
    }

    .s7-rules__cards[b-nol2v26djj] {
        border-left: none;
        border-top: 1px solid var(--teal-cream-edge);
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* E15 — settings. */

.s7-settings[b-62cgx6w0vo] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 22px 24px;
    background: var(--cream);
}

.s7-settings__column[b-62cgx6w0vo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s7-settings__section[b-62cgx6w0vo] {
    margin-top: 4px;
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--game-ink-soft);
}

.s7-setting[b-62cgx6w0vo] {
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
}

.s7-setting__rule[b-62cgx6w0vo] {
    height: 1px;
    margin: 14px 0;
    border: 0;
    background: var(--neutral-100);
}

/* Switch first, then its label: the state is what the eye scans down the column. */
.s7-switch[b-62cgx6w0vo] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--control-h-sm);
}

.s7-switch__label[b-62cgx6w0vo] {
    font-size: 13px;
    color: var(--ink-900);
}

/* Off by design: dimmed, but present, with its reason attached. */
.s7-switch--declined .s7-switch__label[b-62cgx6w0vo] {
    color: var(--text-subtle);
}

/* What the rulebook fixes: text on the left, the value as a read-only chip. */
.s7-fixed[b-62cgx6w0vo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.s7-fixed__value[b-62cgx6w0vo] {
    flex: none;
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--surface-page);
    border: 1px solid var(--neutral-100);
    font-size: 15px;
    letter-spacing: .04em;
    color: var(--ink-900);
}

.s7-setting__label[b-62cgx6w0vo] {
    font-size: 12.5px;
    font-weight: var(--weight-semibold);
    color: var(--ink-900);
}

.s7-setting__note[b-62cgx6w0vo] {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-subtle);
}

.s7-setting__action[b-62cgx6w0vo] {
    display: flex;
    align-items: center;
    flex: none;
    gap: 10px;
}

.s7-setting__confirm[b-62cgx6w0vo] {
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    color: var(--busted-text);
}

/* ---- Choice pills ---------------------------------------------- */
.s7-choices[b-62cgx6w0vo] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.s7-choice[b-62cgx6w0vo] {
    min-height: var(--control-h-sm);
    padding: 0 14px;
    border-radius: var(--radius-pill);
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--neutral-600);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.s7-choice--chosen[b-62cgx6w0vo] {
    background: var(--dealer-bg);
    border: 2px solid var(--color-primary);
    color: var(--dealer-text);
}

/* ---- Where the data lives -------------------------------------- */
.s7-data[b-62cgx6w0vo] {
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: var(--game-ink);
    background-image: radial-gradient(120% 120% at 100% 0%, rgba(247, 222, 99, .24) 0%, rgba(247, 222, 99, 0) 48%);
}

.s7-data__title[b-62cgx6w0vo] {
    margin-bottom: 8px;
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .65);
}

.s7-data__text[b-62cgx6w0vo] {
    font-size: 11.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .9);
}

.s7-settings__legal[b-62cgx6w0vo] {
    margin-top: auto;
    padding-top: 12px;
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--text-subtle);
}

@media (max-width: 1023px) {
    .s7-settings[b-62cgx6w0vo] {
        grid-template-columns: 1fr;
        padding: 16px;
    }
}
/* /Components/Pages/Tiebreak.razor.rz.scp.css */
/* E11 — tie at the top. Shares the board treatment with the home screen. */

.s7-board[b-w3388y42dl] {
    position: relative;
    flex: 1;
    overflow: hidden;
    padding: 38px 44px;
    background: var(--board-teal);
}

.s7-board__rule[b-w3388y42dl] {
    position: absolute;
    inset: 16px;
    border: 2px solid var(--board-rule);
    border-radius: 12px;
    pointer-events: none;
}

.s7-board__eyebrow[b-w3388y42dl] {
    display: inline-block;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    background: var(--cream);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .18em;
    color: var(--game-ink);
}

.s7-tiebreak[b-w3388y42dl] {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: start;
}

.s7-tiebreak__score[b-w3388y42dl] {
    margin-top: 18px;
    font-size: 62px;
    line-height: 1.05;
    color: var(--flip7-yellow);
    text-shadow: 5px 5px 0 var(--game-ink);
}

.s7-tiebreak__explain[b-w3388y42dl] {
    margin: 20px 0 24px;
    padding: 16px 19px;
    border-radius: 12px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: var(--panel-lift);
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--game-ink);
}

.s7-tiebreak__players[b-w3388y42dl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.s7-tiebreak__player[b-w3388y42dl] {
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--neutral-0);
    border: 2px solid var(--game-ink);
    box-shadow: 0 4px 0 rgba(43, 42, 118, .2);
}

.s7-tiebreak__name[b-w3388y42dl] {
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-tiebreak__total[b-w3388y42dl] {
    margin-top: 2px;
    font-size: 30px;
    color: var(--game-ink);
}

.s7-tiebreak__fact[b-w3388y42dl] {
    font-size: 10.5px;
    font-weight: var(--weight-medium);
    color: rgba(43, 42, 118, .65);
}

.s7-tiebreak__actions[b-w3388y42dl] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 1023px) {
    /* Taller than the screen is fine: the body scrolls. Left flexing, the board is exactly
       one screen tall and its own overflow: hidden swallows everything below the fold. */
    .s7-board[b-w3388y42dl] {
        flex: none;
        overflow: visible;
        padding: 20px 16px;
    }

    .s7-board__rule[b-w3388y42dl] {
        display: none;
    }

    .s7-tiebreak[b-w3388y42dl] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .s7-tiebreak__score[b-w3388y42dl] {
        font-size: 40px;
    }
}
/* /Components/Pages/Victory.razor.rz.scp.css */
/* E12 — victory. The score is the whole point, so it is the largest thing on screen. */

.s7-board[b-uvj5pts8pt] {
    position: relative;
    flex: 1;
    overflow: hidden;
    padding: 44px 46px;
    background: var(--board-teal);
}

.s7-board__rule[b-uvj5pts8pt] {
    position: absolute;
    inset: 16px;
    border: 2px solid var(--board-rule);
    border-radius: 12px;
    pointer-events: none;
}

.s7-board__eyebrow[b-uvj5pts8pt] {
    display: inline-block;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    background: var(--cream);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .18em;
    color: var(--game-ink);
}

.s7-victory[b-uvj5pts8pt] {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 44px;
    align-items: start;
}

.s7-victory__wins[b-uvj5pts8pt] {
    margin: 18px 0 4px;
    font-size: 17px;
    font-weight: var(--weight-bold);
    color: var(--cream);
    text-shadow: 0 1px 0 rgba(43, 42, 118, .55);
}

.s7-victory__score[b-uvj5pts8pt] {
    font-size: 104px;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--flip7-yellow);
    text-shadow: 6px 6px 0 var(--game-ink);
}

.s7-victory__moment[b-uvj5pts8pt] {
    max-width: 430px;
    margin: 18px 0 30px;
    padding: 15px 19px;
    border-radius: 12px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: var(--panel-lift);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--game-ink);
}

.s7-victory__actions[b-uvj5pts8pt] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Deliberately not a third button: the two above are what this screen offers, and the way out
   should not compete with them. Sized for a thumb all the same — it is the only way off a
   screen that wears no top bar. */
.s7-victory__home[b-uvj5pts8pt] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-size: 12.5px;
    font-weight: var(--weight-semibold);
    color: var(--cream);
    text-decoration: underline;
    text-underline-offset: 3px;
    /* --cream at 45%: the underline is a hint of the link, not a rule under it. */
    text-decoration-color: rgba(251, 244, 225, .45);
}

.s7-victory__home:hover[b-uvj5pts8pt] {
    text-decoration-color: var(--cream);
}

.s7-victory__home:focus-visible[b-uvj5pts8pt] {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--ring-brand);
}

.s7-victory__stats[b-uvj5pts8pt] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.s7-victory__stats .s7-stat[b-uvj5pts8pt] {
    min-width: 132px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--cream);
    border: 2px solid var(--game-ink);
    box-shadow: 0 3px 0 rgba(43, 42, 118, .25);
}

.s7-victory__stats .s7-stat__figure[b-uvj5pts8pt] {
    font-size: 20px;
    color: var(--game-ink);
}

.s7-victory__stats .s7-stat__label[b-uvj5pts8pt] {
    font-size: 10.5px;
    font-weight: var(--weight-medium);
    color: rgba(43, 42, 118, .72);
}

@media (max-width: 1023px) {
    /* Taller than the screen is fine: the body scrolls. Left flexing, the board is exactly
       one screen tall and its own overflow: hidden swallows everything below the fold.
       No top bar on this screen, so the board is what the status bar sits on. */
    .s7-board[b-uvj5pts8pt] {
        flex: none;
        overflow: visible;
        padding: calc(20px + var(--safe-top)) 16px 20px;
    }

    .s7-board__rule[b-uvj5pts8pt] {
        display: none;
    }

    .s7-victory[b-uvj5pts8pt] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .s7-victory__score[b-uvj5pts8pt] {
        font-size: 64px;
    }
}


/* On a phone the standings come before the two buttons: you look at who won, then at the
   table, and only then decide whether to play again. display: contents dissolves the desktop
   column so all seven pieces can be ordered against each other. */
@media (max-width: 767px) {
    .s7-victory[b-uvj5pts8pt] {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .s7-victory__lead[b-uvj5pts8pt] {
        display: contents;
    }

    .s7-board__eyebrow[b-uvj5pts8pt] {
        order: 1;
        align-self: flex-start;
    }

    .s7-victory__wins[b-uvj5pts8pt] {
        order: 2;
    }

    .s7-victory__score[b-uvj5pts8pt] {
        order: 3;
        font-size: 60px;
    }

    .s7-victory__moment[b-uvj5pts8pt] {
        order: 4;
        margin-bottom: 18px;
    }

    /* Dissolved like the lead column, so its two panels can be ordered apart: this game's
       result belongs with the moment, the table's running standing does not. */
    .s7-victory__standings[b-uvj5pts8pt] {
        display: contents;
    }

    .s7-victory__final[b-uvj5pts8pt] {
        order: 5;
        margin-bottom: 18px;
    }

    .s7-victory__actions[b-uvj5pts8pt] {
        order: 6;
        margin-bottom: 18px;
    }

    .s7-victory__stats[b-uvj5pts8pt] {
        order: 7;
        margin-top: 18px;
    }

    /* Last, and after the buttons. Two full panels between the score and "Rejouer" put the one
       thing this screen is for a whole screen below the fold; the standing that carries into
       the next game can wait until the decision is made. */
    .s7-victory__table[b-uvj5pts8pt] {
        order: 8;
        margin-top: 18px;
    }

    /* 132px each is two tiles and a widow. Sharing the line keeps the three facts together. */
    .s7-victory__stats .s7-stat[b-uvj5pts8pt] {
        flex: 1 1 96px;
        min-width: 0;
        padding: 12px 10px;
    }
}
/* /Components/Shared/LanguageFlag.razor.rz.scp.css */
/* Two flags, drawn with gradients. The Union Jack drops its diagonals: at 20 pixels wide they
   read as noise rather than as a flag. */

.s7-flag[b-30qsd1zwwf] {
    display: inline-block;
    flex: none;
    border-radius: 3px;
    border: 1px solid rgba(12, 34, 54, .18);
}

.s7-flag--fr[b-30qsd1zwwf] {
    background: linear-gradient(90deg, #0055A4 0 33.3%, #fff 33.3% 66.6%, #EF4135 66.6% 100%);
}

.s7-flag--en[b-30qsd1zwwf] {
    background:
        linear-gradient(0deg, transparent 38%, #C8102E 38% 62%, transparent 62%),
        linear-gradient(90deg, transparent 38%, #C8102E 38% 62%, transparent 62%),
        linear-gradient(0deg, transparent 27%, #fff 27% 73%, transparent 73%),
        linear-gradient(90deg, transparent 27%, #fff 27% 73%, transparent 73%),
        #012169;
}
/* /Components/Shared/LanguagePicker.razor.rz.scp.css */
/* L10 — the pill and its menu. L12 — the same two lines as a sheet, on a narrow screen. */

.s7-lang[b-14kofqy3lu] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    /* The pill is 32px tall but the target around it is a full 44: a thumb needs the room. */
    min-width: 44px;
    height: 44px;
}

.s7-lang__pill[b-14kofqy3lu] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--lang-pill-bg);
    border: 1px solid var(--color-primary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard);
}

.s7-lang__pill:hover[b-14kofqy3lu] {
    background: var(--lang-pill-hover);
}

.s7-lang__code[b-14kofqy3lu] {
    font-size: 10.5px;
    font-weight: var(--weight-bold);
    letter-spacing: .04em;
    color: var(--lang-pill-text);
}

.s7-lang__chevron[b-14kofqy3lu] {
    font-family: var(--font-sans);
    font-size: 8px;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-primary);
}

.s7-lang__spelt[b-14kofqy3lu] {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--lang-pill-text);
}

/* Spelt out, the pill is a control in its own right rather than a corner of the bar. */
.s7-lang--named .s7-lang__pill[b-14kofqy3lu] {
    height: var(--control-h-sm);
    padding: 0 14px;
    gap: 10px;
    border-radius: 12px;
    border-width: 2px;
}

/* ---- The menu, on anything wide enough to hang one -------------- */
.s7-lang__scrim[b-14kofqy3lu] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.s7-lang__menu[b-14kofqy3lu] {
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 41;
    width: 236px;
    border-radius: 12px;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    box-shadow: 0 16px 34px rgba(12, 34, 54, .16);
    overflow: hidden;
    text-align: left;
}

.s7-lang__eyebrow[b-14kofqy3lu] {
    padding: 9px 13px 7px;
    border-bottom: 1px solid var(--lang-rule);
    font-size: 9px;
    font-weight: var(--weight-semibold);
    letter-spacing: .13em;
    color: var(--text-subtle);
}

/* The sheet's furniture: no room for it in a menu. */
.s7-lang__handle[b-14kofqy3lu],
.s7-lang__title[b-14kofqy3lu] {
    display: none;
}

.s7-lang__row[b-14kofqy3lu] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 13px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: var(--weight-medium);
    color: var(--ink-900);
    text-align: left;
}

.s7-lang__row:hover[b-14kofqy3lu] {
    background: var(--surface-page);
}

.s7-lang__row--chosen[b-14kofqy3lu],
.s7-lang__row--chosen:hover[b-14kofqy3lu] {
    background: var(--lang-pill-bg);
}

.s7-lang__row--chosen .s7-lang__name[b-14kofqy3lu] {
    font-weight: var(--weight-semibold);
    color: var(--lang-pill-text);
}

.s7-lang__name[b-14kofqy3lu] {
    flex: 1;
}

.s7-lang__tick[b-14kofqy3lu] {
    font-size: 12px;
    font-weight: var(--weight-bold);
    color: var(--color-primary);
}

.s7-lang__note[b-14kofqy3lu] {
    padding: 10px 13px 12px;
    border-top: 1px solid var(--lang-rule);
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-subtle);
}

/* ---- The sheet, where a menu hung from the bar would be out of reach ---- */
@media (max-width: 767px) {
    .s7-lang[b-14kofqy3lu] {
        min-width: 60px;
    }

    .s7-lang__code[b-14kofqy3lu] {
        display: none;
    }

    .s7-lang__scrim[b-14kofqy3lu] {
        z-index: 60;
        background: rgba(12, 34, 54, .5);
    }

    .s7-lang__menu[b-14kofqy3lu] {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 61;
        width: auto;
        padding: 14px 14px 18px;
        border: 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -14px 34px rgba(12, 34, 54, .22);
    }

    .s7-lang__eyebrow[b-14kofqy3lu] {
        display: none;
    }

    .s7-lang__handle[b-14kofqy3lu] {
        display: block;
        width: 38px;
        height: 4px;
        margin: 0 auto 12px;
        border-radius: var(--radius-pill);
        background: var(--neutral-200);
    }

    .s7-lang__title[b-14kofqy3lu] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .s7-lang__title-word[b-14kofqy3lu] {
        font-size: 15px;
        font-weight: var(--weight-bold);
        color: var(--ink-900);
    }

    .s7-lang__title-other[b-14kofqy3lu] {
        font-size: 11px;
        color: var(--text-subtle);
    }

    .s7-lang__rows[b-14kofqy3lu] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .s7-lang__row[b-14kofqy3lu] {
        min-height: 56px;
        padding: 0 14px;
        border-radius: 12px;
        border: 1px solid var(--neutral-200);
        font-size: 15px;
    }

    .s7-lang__row--chosen[b-14kofqy3lu] {
        border: 2px solid var(--color-primary);
    }

    .s7-lang__note[b-14kofqy3lu] {
        padding: 14px 2px 0;
        border-top: 0;
        font-size: 11px;
    }
}
/* /Components/Shared/MainNav.razor.rz.scp.css */
/* Its own flex row, carrying the bar's own gap. The links used to be direct children of the
   bar and inherited it; wrapped in a nav they stopped, and « Historique » ran straight into
   « Statistiques ». The rule belongs here rather than in the bar's stylesheet because the
   markup does — scoped means scoped. */
.s7-topbar__nav[b-kl3kc2652t] {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* /Components/Shared/RoleMark.razor.rz.scp.css */
/* The same two tones the pills wore, in the space of a glyph. */
.s7-mark[b-hnrvl2yxuq] {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: var(--radius-pill);
}

.s7-mark svg[b-hnrvl2yxuq] {
    width: 12px;
    height: 12px;
}

.s7-mark--dealer[b-hnrvl2yxuq] {
    background: var(--dealer-bg);
    border: 1px solid var(--dealer-border);
    color: var(--dealer-text);
}

.s7-mark--turn[b-hnrvl2yxuq] {
    background: var(--color-primary);
    color: var(--neutral-0);
}

/* The row this reader is in. Azure, like every other « you » in the app. */
.s7-mark--you[b-hnrvl2yxuq] {
    background: var(--azure-600);
    color: var(--text-on-brand);
}
/* /Components/Shared/RosterStandings.razor.rz.scp.css */
.s7-roster[b-5nnirk0ov6] {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--surface-page);
    border: 1px solid var(--neutral-100);
}

.s7-roster__eyebrow[b-5nnirk0ov6] {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    color: var(--game-ink-soft);
}

.s7-roster__caption[b-5nnirk0ov6] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--neutral-500);
}

.s7-roster__empty[b-5nnirk0ov6] {
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--neutral-500);
}

.s7-roster__head[b-5nnirk0ov6],
.s7-roster__row[b-5nnirk0ov6] {
    display: grid;
    grid-template-columns: 26px 1fr 64px 76px 60px;
    gap: 10px;
    align-items: center;
}

.s7-roster__head[b-5nnirk0ov6] {
    padding: 14px 12px 8px;
    font-size: 9.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .12em;
    color: var(--game-ink-soft);
}

.s7-roster__right[b-5nnirk0ov6] {
    text-align: right;
}

.s7-roster__rows[b-5nnirk0ov6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.s7-roster__row[b-5nnirk0ov6] {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
}

/* The table's leader — and both of them when two are level on wins and points. */
.s7-roster__row--leader[b-5nnirk0ov6] {
    background: var(--dealer-bg);
    border-color: var(--dealer-border);
}

.s7-roster__rank[b-5nnirk0ov6] {
    font-size: 12px;
    color: var(--game-ink-soft);
}

.s7-roster__name[b-5nnirk0ov6] {
    font-size: 11.5px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-roster__wins[b-5nnirk0ov6],
.s7-roster__points[b-5nnirk0ov6] {
    text-align: right;
    font-size: 13px;
    color: var(--ink-900);
}

.s7-roster__flip7[b-5nnirk0ov6] {
    text-align: right;
    font-size: 11px;
    font-weight: var(--weight-medium);
    color: var(--neutral-500);
}

/* The aside has no room for a header row, and the podium is the point there. */
.s7-roster--compact .s7-roster__head[b-5nnirk0ov6],
.s7-roster--compact .s7-roster__flip7[b-5nnirk0ov6] {
    display: none;
}

.s7-roster--compact .s7-roster__row[b-5nnirk0ov6] {
    grid-template-columns: 22px 1fr 40px 56px;
}

/* Flip 7 is the first column a phone can do without, as on the history table. */
@media (max-width: 767px) {
    .s7-roster__head[b-5nnirk0ov6],
    .s7-roster__row[b-5nnirk0ov6] {
        grid-template-columns: 24px 1fr 52px 64px;
    }

    .s7-roster__head > :nth-child(5)[b-5nnirk0ov6],
    .s7-roster__flip7[b-5nnirk0ov6] {
        display: none;
    }
}
/* /Components/Shared/Score7Logo.razor.rz.scp.css */
.s7-logo[b-qv84yfjyv6] {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    letter-spacing: .04em;
    line-height: 1;
    color: var(--ink-900);
}

.s7-logo__badge[b-qv84yfjyv6] {
    display: inline-block;
    margin-left: .16em;
    padding: 0 .16em;
    border-radius: .14em;
    background: var(--flip7-yellow);
    border: .055em solid var(--game-ink);
    font-family: var(--font-sans);
    font-weight: 800;
    font-style: italic;
    font-size: .88em;
    line-height: 1.05;
    color: var(--game-ink);
    transform: skewX(-7deg);
    text-shadow: none;
}

.s7-logo--hero[b-qv84yfjyv6] {
    letter-spacing: .02em;
    line-height: 1.1;
    color: var(--flip7-yellow);
    text-shadow: .09em .09em 0 var(--game-ink);
}
/* /Components/Shared/ScreenCard.razor.rz.scp.css */
.s7-screen[b-y9xwyzni7h] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--screen-card-shadow);
}

/* Below the tablet breakpoint the frame gets out of the way: at 393px a card
   with margins would cost width the entry pad needs. */
@media (max-width: 1023px) {
    .s7-screen[b-y9xwyzni7h] {
        border: none;
        border-radius: 0;
        box-shadow: none;

        /* And the clipping goes with it. `overflow: hidden` above is there to hold
           content inside the rounded corners; with no corners left to hold it to, it
           only amputates whatever is taller than the viewport — and it does it without
           a scrollbar, so there is no way to reach what it cut. On a phone that made
           « Mon compte » stop dead halfway down its own page. */
        overflow: visible;
    }
}
/* /Components/Shared/SectionBanner.razor.rz.scp.css */
.s7-banner[b-thg4bfdfl0] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 22px;
    background: var(--banner-teal);
}

.s7-banner__title[b-thg4bfdfl0] {
    font-size: 13px;
    letter-spacing: .02em;
    color: var(--neutral-0);
    text-transform: uppercase;
}

.s7-banner__text[b-thg4bfdfl0] {
    font-size: 12px;
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, .85);
}

.s7-banner__spacer[b-thg4bfdfl0] {
    flex: 1;
}


/* On a phone the banner wraps rather than squeezing: a counter crushed into four lines
   tells you less than the same counter on a line of its own. */
@media (max-width: 767px) {
    .s7-banner[b-thg4bfdfl0] {
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        padding: 10px 12px;
    }

    .s7-banner__title[b-thg4bfdfl0] {
        font-size: 12px;
    }

    .s7-banner__text[b-thg4bfdfl0] {
        font-size: 11.5px;
    }

    .s7-banner__spacer[b-thg4bfdfl0] {
        display: none;
    }
}
/* /Components/Shared/StatusPill.razor.rz.scp.css */
.s7-pill[b-74em32whwu] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 9px;
    font-weight: var(--weight-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.s7-pill--neutral[b-74em32whwu] {
    background: var(--surface-sunken);
    color: var(--text-muted);
}

.s7-pill--busted[b-74em32whwu] {
    background: var(--busted-bg);
    color: var(--busted-text);
}

.s7-pill--stayed[b-74em32whwu] {
    background: var(--stayed-bg);
    color: var(--stayed-text);
}

.s7-pill--dealer[b-74em32whwu] {
    background: var(--dealer-bg);
    border: 1px solid var(--dealer-border);
    color: var(--dealer-text);
}

.s7-pill--neartarget[b-74em32whwu] {
    background: var(--near-target-bg);
    color: var(--near-target-text);
}

.s7-pill--turn[b-74em32whwu] {
    background: var(--color-primary);
    color: var(--neutral-0);
}
/* /Components/Shared/TakenOver.razor.rz.scp.css */
/* The screen a browser gets when it stops being the one holding the pen.

   A screen rather than an overlay, and not by choice: this is rendered by an error boundary,
   and a boundary cannot keep the subtree that threw. There is no board left behind it to dim,
   so a scrim would be shading an empty page — which reads as the app having fallen over, which
   is the one thing that has not happened. It takes the app's own ground instead.

   It does cover everything, and that part is deliberate: every gesture underneath would be a
   write, and a write is exactly what this browser may no longer do. A dismissible strip would
   leave a board that looks live and refuses every tap. */
.s7-takenover[b-fbcl60rvl4] {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--surface-page);
}

.s7-takenover__card[b-fbcl60rvl4] {
    display: grid;
    justify-items: center;
    gap: 8px;
    max-width: min(460px, 100%);
    padding: 28px 32px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 3px solid var(--game-ink);
    box-shadow: var(--panel-lift-lg);
    text-align: center;
}

.s7-takenover__title[b-fbcl60rvl4] {
    font-size: 21px;
    font-weight: var(--weight-bold);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--game-ink);
}

.s7-takenover__body[b-fbcl60rvl4] {
    font-size: 13px;
    font-weight: var(--weight-medium);
    line-height: 1.5;
    color: var(--game-ink-soft);
}

/* The account sheet's button, on purpose: taking the game back is the same kind of gesture,
   and this card is the one place it has to be the obvious thing to press. */
.s7-takenover__card .s7-auth__submit[b-fbcl60rvl4] {
    margin-top: 10px;
}

@media (max-width: 767px) {
    .s7-takenover__card[b-fbcl60rvl4] {
        padding: 22px 20px;
    }

    .s7-takenover__title[b-fbcl60rvl4] {
        font-size: 18px;
    }
}
/* /Components/Shared/TopBar.razor.rz.scp.css */
/* The wordmark, as a link. An anchor rather than a click handler: the router intercepts it,
   and middle-click, ctrl-click and the status-bar URL come for free. */
.s7-topbar__home[b-cachjcy2uy] {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
}

.s7-topbar__home:focus-visible[b-cachjcy2uy] {
    outline: none;
    box-shadow: var(--ring-brand);
}

/* The status bar sits on top of the bar, not above it: the inset is added to the padding so
   the bar's own white is what shows through, and the wordmark still clears the notch. */
.s7-topbar[b-cachjcy2uy] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: calc(12px + var(--safe-top)) 22px 12px;
    background: var(--neutral-0);
    border-bottom: 1px solid var(--neutral-100);
}

.s7-topbar__subtitle[b-cachjcy2uy] {
    font-size: 11px;
    font-weight: var(--weight-regular);
    color: var(--game-ink-soft);
}

.s7-topbar__divider[b-cachjcy2uy] {
    width: 1px;
    height: 22px;
    background: var(--neutral-100);
}

.s7-topbar__spacer[b-cachjcy2uy] {
    flex: 1;
}

@media (max-width: 1023px) {
    .s7-topbar[b-cachjcy2uy] {
        padding: calc(10px + var(--safe-top)) 14px 10px;
        gap: 10px;
    }
}

/* On a phone the bar is down to what it has to carry: the lockup, what round this is, and
   the one action. The app's own subtitle is decoration the logo already covers. */
@media (max-width: 767px) {
    .s7-topbar[b-cachjcy2uy] {
        gap: 8px;
        padding: calc(8px + var(--safe-top)) 12px 8px;
    }

    .s7-topbar__subtitle--app[b-cachjcy2uy] {
        display: none;
    }

    .s7-topbar__divider[b-cachjcy2uy] {
        display: none;
    }
}
/* /Components/Table/ClaimAttachment.razor.rz.scp.css */
/* What a guest sees when they open the link. One card, one question, one button. */

.s7-claimed[b-rebkzv66bh] {
    flex: 1;
    display: grid;
    place-items: start center;
    padding: 32px 20px;
    background: var(--cream-panel);
}

.s7-claimed__card[b-rebkzv66bh] {
    display: grid;
    justify-items: start;
    gap: 12px;
    width: 100%;
    max-width: 560px;
    padding: 26px 28px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 3px solid var(--game-ink);
    box-shadow: var(--panel-lift);
}

.s7-claimed__title[b-rebkzv66bh] {
    font-size: 25px;
    font-weight: var(--weight-bold);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--game-ink);
}

.s7-claimed__text[b-rebkzv66bh] {
    font-size: 14px;
    line-height: 1.55;
    color: var(--game-ink-soft);
}

.s7-claimed__note[b-rebkzv66bh] {
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--cream-panel);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--neutral-500);
}

.s7-claimed__signin[b-rebkzv66bh] {
    font-size: 14px;
    font-weight: var(--weight-semibold);
    color: var(--game-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- The two scopes --------------------------------------------- */
.s7-claimed__scopes[b-rebkzv66bh] {
    display: grid;
    gap: 8px;
    width: 100%;
}

.s7-claimed__scope[b-rebkzv66bh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--cream-panel);
    border: 2px solid var(--teal-cream-edge);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.s7-claimed__scope--picked[b-rebkzv66bh] {
    background: var(--azure-50);
    border-color: var(--azure-600);
}

.s7-claimed__scope-what[b-rebkzv66bh] {
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-claimed__scope-figure[b-rebkzv66bh] {
    font-size: 21px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-claimed__scope-since[b-rebkzv66bh] {
    font-size: 12px;
    color: var(--neutral-500);
}

/* A link that leads nowhere is not an error, so it does not wear one: no red, no warning
   glyph. Somebody was sent something that has run out, which is ordinary. */
.s7-claimed__card--gone[b-rebkzv66bh],
.s7-claimed__card--done[b-rebkzv66bh] {
    justify-items: start;
}
/* /Components/Table/ClaimGuests.razor.rz.scp.css */
/* C10 / CM10 — what everyone at the table walks away with.

   Three row states share one silhouette: avatar, gutter, a middle block that may be one line
   or two, and an action slot. Only the middle block and the slot change, which is the whole
   point — a seat that already has the evening is not a demoted guest, it is being offered
   something else. */

.s7-claim[b-w0jfk58wqo] {
    display: grid;
    gap: 0;
    padding: 22px;
    border-radius: 16px;
    background: var(--neutral-0);
    border: 2px solid var(--game-ink);
    box-shadow: var(--panel-lift-lg);
}

/* The eyebrow's own size and tracking come from app.css; only the ink is this panel's, and on
   a phone it steps down a point so « les 5 autres joueurs · 2 ont déjà cette partie » stays on
   one line. */
.s7-claim .s7-eyebrow[b-w0jfk58wqo] {
    color: var(--game-ink);
}

.s7-claim__title[b-w0jfk58wqo] {
    margin: 8px 0 5px;
    font-size: 19px;
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: var(--ink-900);
}

.s7-claim__lede[b-w0jfk58wqo] {
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--neutral-600);
}

/* Two wordings for one sentence: a phone gets the shorter one rather than the long one
   wrapped four times. A breakpoint cannot pick a string, so both are written and one is
   dropped — `display: none` takes it out of the accessibility tree with it, so a screen
   reader hears one. */
.s7-claim__narrow[b-w0jfk58wqo] {
    display: none;
}

.s7-claim__guests[b-w0jfk58wqo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.s7-claim__guest[b-w0jfk58wqo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Between items only. What wraps onto a second line — the seat's two lines, the link in
       the clear, the phone's full-width action — sets its own gap, because the design gives
       each of them a different one. */
    column-gap: 11px;
    row-gap: 0;
    padding: 13px 15px;
    border-radius: 12px;
    background: var(--cream-panel);
    border: 1px solid #E3D5B4;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}

/* Nothing left to offer. Quieter on purpose: the cream is the colour of a row that still
   wants something from the marker. */
.s7-claim__guest--settled[b-w0jfk58wqo] {
    background: #F7FAFC;
    border-color: #E4EBF0;
}

/* A link is out for this one. Azure, like every other « this is live » in the app. */
.s7-claim__guest--sent[b-w0jfk58wqo] {
    background: var(--azure-50);
    border-color: var(--azure-600);
    border-width: 2px;
    /* The border grew by a pixel; take it back off the padding so the row does not jump. */
    padding: 12px 14px;
}

.s7-claim__mark[b-w0jfk58wqo] {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: #F1F5F8;
    font-size: 11px;
    font-weight: var(--weight-bold);
    color: var(--neutral-400);
}

/* An account of their own, so the initial is printed on the game's ink in the brand yellow —
   the same pairing the scoreboard uses for a player who is somebody rather than a name. */
.s7-claim__mark--account[b-w0jfk58wqo] {
    background: var(--game-ink);
    color: var(--flip7-yellow);
}

.s7-claim__who[b-w0jfk58wqo] {
    display: grid;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.s7-claim__name[b-w0jfk58wqo] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Straight from C08, where it already means « has an account of their own ». One marker for
   one fact, in both places — a second glyph invented here would be a second thing to learn. */
.s7-claim__dot[b-w0jfk58wqo] {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--azure-600);
}

.s7-claim__what[b-w0jfk58wqo] {
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--neutral-500);
}

.s7-claim__guest--sent .s7-claim__what[b-w0jfk58wqo] {
    color: var(--azure-700);
}

/* The seat with evenings still to fetch is the one row that takes two lines to say what it is
   worth, so they go under the whole row rather than into the strip left beside the button —
   indented to the avatar's width plus the gutter, so they hang off the name. */
.s7-claim__what--under[b-w0jfk58wqo] {
    flex-basis: 100%;
    margin-top: 7px;
    padding-left: 39px;
}

.s7-claim__send[b-w0jfk58wqo] {
    flex: none;
    min-height: var(--control-h-sm);
    padding: 9px 16px;
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    border: 2px solid var(--azure-600);
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--azure-600);
    cursor: pointer;
    white-space: nowrap;
}

.s7-claim__send:hover[b-w0jfk58wqo] {
    background: var(--azure-50);
}

.s7-claim__slot[b-w0jfk58wqo] {
    display: flex;
    flex: none;
    gap: 12px;
    align-items: center;
}

.s7-claim__copy[b-w0jfk58wqo],
.s7-claim__revoke[b-w0jfk58wqo] {
    min-height: var(--control-h-sm);
    padding: 8px 4px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    cursor: pointer;
    white-space: nowrap;
}

.s7-claim__copy[b-w0jfk58wqo] {
    color: var(--azure-600);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.s7-claim__revoke[b-w0jfk58wqo] {
    color: var(--neutral-500);
}

.s7-claim__revoke:hover[b-w0jfk58wqo] {
    color: var(--busted-text);
}

/* Text, not a disabled button. There is nothing here to unlock, so nothing here should look
   like a control: no hover, no pointer, no tab stop. */
.s7-claim__nothing[b-w0jfk58wqo] {
    flex: none;
    font-size: 10.5px;
    color: var(--neutral-400);
}

/* The link written out, because it exists exactly once: the token is stored only as a hash,
   so a copy button that silently fails would lose it for good. */
.s7-claim__url[b-w0jfk58wqo] {
    flex-basis: 100%;
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--neutral-500);
    overflow-wrap: anywhere;
}

.s7-claim__legend[b-w0jfk58wqo] {
    margin-top: 11px;
    font-size: 10px;
    line-height: 1.55;
    color: var(--neutral-400);
}

.s7-claim__note[b-w0jfk58wqo] {
    margin-top: 12px;
    padding: 13px 15px;
    border-radius: 11px;
    background: rgba(43, 42, 118, .06);
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--game-ink-72);
}

/* ---- Nobody needs anything ---------------------------------
   A band, not a panel. Disappearing would be indistinguishable from a fault, and would take
   with it the only proof the marker has that everyone left with the game — but there is no
   offer left to make, so the question, the list and the footer all go. */
.s7-claim--settled[b-w0jfk58wqo] {
    padding: 18px 20px;
}

.s7-claim__done-head[b-w0jfk58wqo] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--game-ink);
}

.s7-claim__tick[b-w0jfk58wqo] {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: var(--success-500);
    font-size: 11px;
    font-weight: var(--weight-bold);
    color: var(--neutral-0);
}

.s7-claim__done-title[b-w0jfk58wqo] {
    margin: 11px 0 4px;
    font-size: 15px;
    font-weight: var(--weight-bold);
    line-height: 1.3;
    color: var(--ink-900);
}

.s7-claim__done-body[b-w0jfk58wqo] {
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--neutral-600);
}

.s7-claim__names[b-w0jfk58wqo] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
    list-style: none;
}

.s7-claim__pill[b-w0jfk58wqo] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 10px;
    border-radius: var(--radius-pill);
    background: #F7FAFC;
    border: 1px solid #E4EBF0;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--neutral-700);
}

/* ---- CM10, under 768px -------------------------------------
   The action leaves the row and goes full width under the name, at the 44px touch floor. The
   settled row keeps no button at all, so it stays half the height of an active one and the
   list reads as a pile of tasks emptying itself. */
@media (max-width: 767px) {
    .s7-claim__wide[b-w0jfk58wqo] {
        display: none;
    }

    .s7-claim__narrow[b-w0jfk58wqo] {
        display: inline;
    }

    .s7-claim[b-w0jfk58wqo] {
        padding: 14px;
        border-radius: 14px;
        box-shadow: var(--panel-lift);
    }

    .s7-claim .s7-eyebrow[b-w0jfk58wqo] {
        font-size: 9px;
    }

    .s7-claim__title[b-w0jfk58wqo] {
        font-size: 14px;
        line-height: 1.3;
    }

    .s7-claim__lede[b-w0jfk58wqo] {
        font-size: 10.5px;
        line-height: 1.6;
    }

    .s7-claim__guests[b-w0jfk58wqo] {
        gap: 7px;
    }

    .s7-claim__guest[b-w0jfk58wqo] {
        column-gap: 9px;
        padding: 11px 12px;
        border-radius: 11px;
    }

    .s7-claim__guest--sent[b-w0jfk58wqo] {
        padding: 10px 11px;
    }

    .s7-claim__mark[b-w0jfk58wqo] {
        width: 24px;
        height: 24px;
    }

    .s7-claim__name[b-w0jfk58wqo] {
        font-size: 12px;
    }

    .s7-claim__what[b-w0jfk58wqo] {
        font-size: 10px;
        line-height: 1.55;
    }

    /* Down here rather than beside the name: a 44px target is wider than the room left over
       once a name has had its own. */
    .s7-claim__send[b-w0jfk58wqo],
    .s7-claim__slot[b-w0jfk58wqo] {
        flex-basis: 100%;
        margin-top: 9px;
        order: 5;
    }

    .s7-claim__send[b-w0jfk58wqo] {
        min-height: var(--control-h-md);
    }

    .s7-claim__copy[b-w0jfk58wqo],
    .s7-claim__revoke[b-w0jfk58wqo] {
        min-height: var(--control-h-md);
    }

    /* Before the action, not after it: the button is the last thing on the row, and what it is
       worth has to have been read by the time somebody reaches it. */
    .s7-claim__what--under[b-w0jfk58wqo] {
        order: 4;
        padding-left: 33px;
    }

    .s7-claim__send[b-w0jfk58wqo] {
        display: grid;
        place-items: center;
        font-size: 13px;
    }

    .s7-claim__legend[b-w0jfk58wqo] {
        font-size: 9.5px;
    }

    .s7-claim__note[b-w0jfk58wqo] {
        font-size: 10px;
    }

    .s7-claim--settled[b-w0jfk58wqo] {
        padding: 14px;
    }

    .s7-claim__tick[b-w0jfk58wqo] {
        width: 18px;
        height: 18px;
    }

    .s7-claim__done-title[b-w0jfk58wqo] {
        font-size: 12.5px;
    }

    .s7-claim__done-body[b-w0jfk58wqo] {
        font-size: 10.5px;
        line-height: 1.65;
    }

    .s7-claim__pill[b-w0jfk58wqo] {
        padding: 5px 10px 5px 8px;
        font-size: 10px;
    }

    .s7-claim__pill .s7-claim__dot[b-w0jfk58wqo] {
        width: 5px;
        height: 5px;
    }
}

/* The row's own fade is a colour change and nothing else. A height that animates while
   somebody is reading the line above it is motion nobody asked for. */
@media (prefers-reduced-motion: reduce) {
    .s7-claim__guest[b-w0jfk58wqo] {
        transition: none;
    }
}
/* /Components/Table/JoinTable.razor.rz.scp.css */
/* CM09 — typing a code somebody is reading out, then saying which of the names is you.

   Sized for a phone first, because that is where this screen actually happens: the marker is
   holding the tablet and everybody else is holding their own phone. */

.s7-join[b-npzfyapaq9] {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 20px;
    padding: 26px 24px;
    background: var(--cream-panel);
}

.s7-join__title[b-npzfyapaq9] {
    font-size: 27px;
    font-weight: var(--weight-bold);
    letter-spacing: -.01em;
    color: var(--game-ink);
}

.s7-join__help[b-npzfyapaq9] {
    margin-top: 4px;
    font-size: 13px;
    color: var(--game-ink-soft);
}

/* ---- The six boxes -------------------------------------------- */
.s7-join__boxes[b-npzfyapaq9] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.s7-join__box[b-npzfyapaq9] {
    width: 58px;
    height: 72px;
    padding: 0;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 3px solid var(--game-ink);
    box-shadow: var(--panel-lift);
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: var(--weight-bold);
    text-align: center;
    text-transform: uppercase;
    color: var(--game-ink);
}

.s7-join__box:focus-visible[b-npzfyapaq9] {
    outline: none;
    border-color: var(--azure-500);
    box-shadow: var(--panel-lift), 0 0 0 3px var(--azure-50);
}

/* An empty box is a slot waiting, not a box that is broken. Driven from the component rather
   than from :placeholder-shown or [value=""] — neither of which sees what Blazor set. */
.s7-join__box[data-empty="yes"][b-npzfyapaq9] {
    border-style: dashed;
    background: transparent;
}

.s7-join__refusal[b-npzfyapaq9] {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--busted-bg);
    border: 2px solid var(--busted-border);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--busted-text);
}

/* ---- Which of these is you ------------------------------------ */
.s7-join__who[b-npzfyapaq9] {
    display: grid;
    justify-items: start;
    gap: 12px;
    padding: 20px 22px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 3px solid var(--game-ink);
    box-shadow: var(--panel-lift);
}

.s7-join__table-of[b-npzfyapaq9] {
    display: grid;
    gap: 3px;
}

.s7-join__round[b-npzfyapaq9] {
    font-size: 12.5px;
    color: var(--game-ink-soft);
}

.s7-join__seats[b-npzfyapaq9] {
    /* The reboot leaves these on, and a bulleted list of people is a bullet too many. */
    list-style: none;
    display: grid;
    gap: 8px;
    width: 100%;
}

.s7-join__seat[b-npzfyapaq9] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--cream-panel);
    border: 2px solid var(--teal-cream-edge);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.s7-join__seat:hover:not(:disabled)[b-npzfyapaq9] {
    border-color: var(--game-ink);
}

.s7-join__seat--picked[b-npzfyapaq9] {
    border-color: var(--azure-500);
    background: var(--azure-50);
}

/* Shown taken rather than hidden, so the person looking for their own name can see that
   somebody already has it. Struck through, because that reads as "gone" and grey alone reads
   as "loading". */
.s7-join__seat:disabled[b-npzfyapaq9] {
    cursor: not-allowed;
    opacity: .55;
}

.s7-join__seat:disabled .s7-join__seat-name[b-npzfyapaq9] {
    text-decoration: line-through;
}

.s7-join__seat-mark[b-npzfyapaq9] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--teal-cream-edge);
    font-size: 14px;
    font-weight: var(--weight-bold);
    color: var(--game-ink-soft);
}

.s7-join__seat--picked .s7-join__seat-mark[b-npzfyapaq9] {
    background: var(--game-ink);
    color: var(--cream);
}

.s7-join__seat-name[b-npzfyapaq9] {
    font-size: 16px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-join__seat-what[b-npzfyapaq9] {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.s7-join__take-help[b-npzfyapaq9] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-500);
}

/* Not a small grey link under a big blue button: following without playing is a real answer to
   the question above, and the screen must not whisper it. */
.s7-join__without[b-npzfyapaq9] {
    min-height: 44px;
    padding: 10px 4px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 17px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.s7-join__without-help[b-npzfyapaq9] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-500);
}

@media (min-width: 768px) {
    .s7-join[b-npzfyapaq9] {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 28px;
        padding: 32px;
    }
}

@media (max-width: 400px) {
    .s7-join__boxes[b-npzfyapaq9] {
        gap: 6px;
    }

    .s7-join__box[b-npzfyapaq9] {
        width: 44px;
        height: 58px;
        font-size: 24px;
    }
}
/* /Components/Table/MemberList.razor.rz.scp.css */
/* Everyone around the table. One row per seat, then anybody following without one. */

.s7-members[b-ekcp4dptm5] {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 26px 24px;
    background: var(--cream);
    border-left: 1px solid var(--teal-cream-edge);
}

.s7-members__list[b-ekcp4dptm5] {
    /* The reboot leaves these on, and a bulleted list of people is a bullet too many. */
    list-style: none;
    display: grid;
    gap: 8px;
}

.s7-member[b-ekcp4dptm5] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: var(--cream-panel);
    border: 2px solid var(--teal-cream-edge);
}

/* A seat nobody has claimed. Dashed rather than greyed: the name is real, the marker typed it —
   what is missing is a browser behind it, and dashed is how the rest of the app says "empty". */
.s7-member--guest[b-ekcp4dptm5] {
    border-style: dashed;
    background: transparent;
}

.s7-member--you[b-ekcp4dptm5] {
    border-color: var(--azure-500);
    background: var(--azure-50);
}

.s7-member__mark[b-ekcp4dptm5] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--game-ink);
    font-size: 14px;
    font-weight: var(--weight-bold);
    color: var(--cream);
}

.s7-member--guest .s7-member__mark[b-ekcp4dptm5] {
    background: var(--teal-cream-edge);
    color: var(--game-ink-soft);
}

.s7-member__who[b-ekcp4dptm5] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.s7-member__name[b-ekcp4dptm5] {
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-member__what[b-ekcp4dptm5] {
    font-size: 11.5px;
    color: var(--neutral-500);
}

.s7-member__marker[b-ekcp4dptm5] {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--azure-600);
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: .1em;
    color: var(--text-on-brand);
}

.s7-member__presence[b-ekcp4dptm5] {
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    color: var(--text-subtle);
}

/* The dot is the whole signal, so it is drawn rather than written: « en ligne » beside a green
   dot is read as one thing, and the word alone is read as a label. */
.s7-member__presence[data-online="yes"][b-ekcp4dptm5] {
    display: flex;
    gap: 7px;
    align-items: center;
    color: var(--stayed-text);
}

.s7-member__presence[data-online="yes"][b-ekcp4dptm5]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--stayed-text);
}

@media (max-width: 1023px) {
    .s7-members[b-ekcp4dptm5] {
        border-left: none;
        border-top: 1px solid var(--teal-cream-edge);
        padding: 16px;
    }
}
/* /Components/Table/PlayerHand.razor.rz.scp.css */
/* The same cards the marker's board draws, so one hand looks like one hand from either side. */

/* Seven equal columns, the same grid the marker's own board lays a hand out on.

   A flex row was the obvious first shape and the wrong one: a GameCard has a height and takes
   its width from its container, so in a flex row it collapses to a sliver — and a squeezed
   card is unreadable at exactly the moment somebody is checking what they were dealt. Seven
   because seven is what ends a round; a hand never has more. */
.s7-pv-hand[b-mk98sjwfbt] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
}

/* Somebody else's hand, in a band that shares its line with a name and a score. Sized by the
   card rather than by seven equal shares of whatever is left: seven shares of 150px is seven
   slivers, and this hand is here to be recognised at a glance rather than counted. */
.s7-pv-hand--compact[b-mk98sjwfbt] {
    grid-template-columns: repeat(auto-fit, 34px);
    gap: 5px;
    --hand-card-h: 48px;
    --hand-card-scale: .62;
}

/* The duplicate that ended the round, marked as the card it was rather than removed: the
   whole point of V04 is that a person can see what happened. */
.s7-pv-hand__fatal[b-mk98sjwfbt] {
    display: inline-flex;
    border-radius: var(--radius-md);
    outline: 2px solid var(--busted-text);
    outline-offset: 2px;
}
/* /Components/Table/PlayerView.razor.rz.scp.css */
/* V01–V09. Three bands in one order on every format: me, the active player, the table.

   The order is the design's whole argument. What a person cannot read on the iPad in the middle
   of the table is their own hand, so their own hand is the biggest thing on their own phone. */

.s7-pv[b-e8dpxodw0f] {
    flex: 1;
    width: 100%;
    display: grid;
    align-content: start;
    background: var(--neutral-0);
}

/* ---- The bar ---------------------------------------------------- */
/* Slim. This strip carries four short facts and sits under a top bar that already carries
   three; every pixel of it is a pixel not spent on the cards, which are the reason the screen
   exists. */
.s7-pv__bar[b-e8dpxodw0f] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 9px 20px;
    background: var(--cream-panel);
    border-bottom: 1px solid var(--teal-cream-edge);
    font-size: 14px;
    color: var(--game-ink-soft);
}

.s7-pv__bar-round[b-e8dpxodw0f] {
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-pv__bar-turn[b-e8dpxodw0f] {
    flex: 1;
}

.s7-pv__bar-dealer[b-e8dpxodw0f] {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--azure-50);
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: .06em;
    color: var(--azure-600);
}

/* ---- V02's ribbon ----------------------------------------------- */
/* The one moment this screen asks anything of anybody, and what it asks is to speak. */
.s7-pv__yours[b-e8dpxodw0f] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--flip7-yellow);
    border-bottom: 2px solid var(--game-ink);
}

.s7-pv__yours-title[b-e8dpxodw0f] {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: var(--weight-bold);
    letter-spacing: .04em;
    color: var(--game-ink);
}

.s7-pv__yours-help[b-e8dpxodw0f] {
    font-size: 13px;
    color: var(--game-ink);
}

/* ---- Band 1: me ------------------------------------------------- */
.s7-pv__me[b-e8dpxodw0f] {
    display: grid;
    gap: 14px;
    padding: 22px 20px;
    background: var(--board-teal);
    color: var(--neutral-0);
}

/* Busting is red and stopping is green, on the band rather than on a badge: from a metre away
   the colour is the whole message and the words are the detail. */
.s7-pv__me[data-state="busted"][b-e8dpxodw0f] {
    background: linear-gradient(160deg, #B4443B 0%, #8E2E27 100%);
    border-bottom: 2px solid var(--game-ink);
}

.s7-pv__me[data-state="stayed"][b-e8dpxodw0f] {
    background: linear-gradient(160deg, #14A07A 0%, #0B6E4B 100%);
    border-bottom: 2px solid var(--game-ink);
}

.s7-pv__me-head[b-e8dpxodw0f] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
}

.s7-pv__mark[b-e8dpxodw0f] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--game-ink);
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--flip7-yellow);
}

.s7-pv__mark--big[b-e8dpxodw0f] {
    width: 56px;
    height: 56px;
    background: var(--neutral-0);
    font-size: 21px;
    color: var(--game-ink);
}

.s7-pv__me-who[b-e8dpxodw0f] {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.s7-pv__me-name[b-e8dpxodw0f] {
    font-size: 30px;
    font-weight: var(--weight-bold);
    line-height: 1.05;
    letter-spacing: -.01em;
}

/* A pill rather than a line of text: it is a fact about me, and it sits under my name the way
   a caption sits under a photograph. */
.s7-pv__me-state[b-e8dpxodw0f] {
    justify-self: start;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    background: rgba(12, 34, 54, .28);
    font-size: 12.5px;
    font-weight: var(--weight-medium);
}

.s7-pv__me-round[b-e8dpxodw0f],
.s7-pv__me-delta[b-e8dpxodw0f],
.s7-pv__me-after[b-e8dpxodw0f] {
    display: grid;
    gap: 2px;
    justify-items: end;
    text-align: right;
}

.s7-pv__me-round .s7-eyebrow[b-e8dpxodw0f],
.s7-pv__me-delta .s7-eyebrow[b-e8dpxodw0f],
.s7-pv__me-after .s7-eyebrow[b-e8dpxodw0f] {
    color: rgba(255, 255, 255, .78);
}

.s7-pv__me-round .s7-display[b-e8dpxodw0f] {
    font-size: 46px;
    font-weight: var(--weight-bold);
    line-height: 1;
}

/* Yellow while it is still mine to change, white once it is banked. */
.s7-pv__me[data-state="mine"] .s7-pv__me-round .s7-display[b-e8dpxodw0f],
.s7-pv__me[data-state="stayed"] .s7-pv__me-round .s7-display[b-e8dpxodw0f] {
    color: var(--flip7-yellow);
}

.s7-pv__me-figures[b-e8dpxodw0f] {
    display: flex;
    gap: 22px;
    align-items: flex-start;
}

.s7-pv__me-delta .s7-display[b-e8dpxodw0f] {
    font-size: 34px;
    font-weight: var(--weight-bold);
    color: var(--flip7-yellow);
}

.s7-pv__me-after .s7-display[b-e8dpxodw0f] {
    font-size: 34px;
    font-weight: var(--weight-bold);
}

.s7-pv__hand[b-e8dpxodw0f] {
    display: grid;
    gap: 12px;
}

/* The reason, in a dashed box beside the cards: it belongs to the hand rather than to the
   figures, because it is what the hand did. */
.s7-pv__why[b-e8dpxodw0f] {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 2px dashed rgba(255, 255, 255, .5);
    font-size: 14px;
    line-height: 1.45;
}

.s7-pv__if-you-stop[b-e8dpxodw0f] {
    font-size: 17px;
    font-weight: var(--weight-bold);
}

.s7-pv__tiles[b-e8dpxodw0f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.s7-pv__tile[b-e8dpxodw0f] {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
}

.s7-pv__tile .s7-eyebrow[b-e8dpxodw0f] {
    color: rgba(255, 255, 255, .8);
}

/* The one figure the round actually turns on gets the cream card and the ink type. */
.s7-pv__tile--lead[b-e8dpxodw0f] {
    background: var(--cream);
    border: 2px solid var(--game-ink);
    color: var(--game-ink);
}

.s7-pv__tile--lead .s7-eyebrow[b-e8dpxodw0f] {
    color: var(--game-ink-soft);
}

.s7-pv__tile-figure[b-e8dpxodw0f] {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.s7-pv__tile-figure .s7-display[b-e8dpxodw0f] {
    font-size: 27px;
    font-weight: var(--weight-bold);
}

.s7-pv__tile-note[b-e8dpxodw0f] {
    font-size: 12px;
    opacity: .85;
}

/* ---- Band 2: whoever is playing --------------------------------- */
.s7-pv__active[b-e8dpxodw0f] {
    display: grid;
    gap: 12px;
    padding: 18px 20px;
    background: var(--cream-panel);
    border-bottom: 1px solid var(--teal-cream-edge);
}

.s7-pv__active-head[b-e8dpxodw0f] {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
}

.s7-pv__active-note[b-e8dpxodw0f] {
    font-size: 12.5px;
    color: var(--neutral-500);
}

.s7-pv__active-body[b-e8dpxodw0f] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.s7-pv__active-name[b-e8dpxodw0f] {
    font-size: 21px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-pv__active-hand[b-e8dpxodw0f] {
    flex: 1;
    min-width: 0;
}

.s7-pv__active-score[b-e8dpxodw0f] {
    display: grid;
    gap: 2px;
    justify-items: end;
}

.s7-pv__active-score .s7-display[b-e8dpxodw0f] {
    font-size: 34px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-pv__flip7[b-e8dpxodw0f] {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--flip7-yellow);
    border: 2px solid var(--game-ink);
}

.s7-pv__flip7-label[b-e8dpxodw0f] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: .04em;
    color: var(--game-ink);
}

.s7-pv__flip7-text[b-e8dpxodw0f] {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--game-ink);
}

/* ---- Band 3: the table ------------------------------------------ */
.s7-pv__table[b-e8dpxodw0f] {
    display: grid;
    gap: 10px;
    padding: 18px 16px;
}

/* The same trap the addendum names for the page grid, one level down: a grid item defaults to
   min-width:auto, so a band whose rows have a wide min-content refuses to shrink into its
   track and simply hangs off the end of the frame. Every band that holds a row needs this. */
.s7-pv__me[b-e8dpxodw0f],
.s7-pv__active[b-e8dpxodw0f],
.s7-pv__table[b-e8dpxodw0f],
.s7-pv__rows[b-e8dpxodw0f],
.s7-pv__seats[b-e8dpxodw0f],
.s7-pv__final-rows[b-e8dpxodw0f],
.s7-pv__row[b-e8dpxodw0f],
.s7-pv__seat[b-e8dpxodw0f],
.s7-pv__final-row[b-e8dpxodw0f] {
    min-width: 0;
}

.s7-pv__table-head[b-e8dpxodw0f],
.s7-pv__order-head[b-e8dpxodw0f],
.s7-pv__code-head[b-e8dpxodw0f] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
}

.s7-pv__target[b-e8dpxodw0f] {
    font-size: 12.5px;
    color: var(--neutral-500);
}

.s7-pv__rows[b-e8dpxodw0f],
.s7-pv__seats[b-e8dpxodw0f],
.s7-pv__final-rows[b-e8dpxodw0f] {
    display: grid;
    gap: 7px;
    list-style: none;
}

/* One line per player on a phone — rank, name, badge, state, total — so six players fit
   without scrolling. The cards are not lost: mine are in band 1 and the active player's in
   band 2. */
/* minmax(0, …) on the flexible track, not 1fr — the same trap the addendum names for the page
   grid bites here too: a plain 1fr takes the min-content width of a long name plus its badges
   and pushes the total off the end of a 340px column. */
.s7-pv__row[b-e8dpxodw0f],
.s7-pv__seat[b-e8dpxodw0f],
.s7-pv__final-row[b-e8dpxodw0f] {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    gap: 9px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--neutral-0);
    border: 2px solid var(--teal-cream-edge);
}

/* The state takes the slack, everywhere. It is the only part of a row that reads perfectly
   well on two lines: a name must not break and a total must not shorten. On a full-width row
   there is slack to spare and it stays on one line; in the 340px column of the three-column
   layout it wraps, which is the graceful end of the same rule rather than a second one. */
.s7-pv__row[b-e8dpxodw0f] {
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
}

.s7-pv__final-row[b-e8dpxodw0f] {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

/* A name is never broken across lines and never truncated: it is the one thing on the row
   that has to be readable. Everything else on the row is sized so that it does not have to be. */
.s7-pv__seat-name[b-e8dpxodw0f] {
    white-space: nowrap;
}

.s7-pv__row--you[b-e8dpxodw0f],
.s7-pv__seat--you[b-e8dpxodw0f],
.s7-pv__final-row--you[b-e8dpxodw0f] {
    background: var(--azure-50);
    border-color: var(--azure-600);
}

.s7-pv__row--playing[b-e8dpxodw0f] {
    background: #FDF8E8;
    border-color: var(--game-ink);
}

.s7-pv__row--out[b-e8dpxodw0f] {
    background: #F7FAFC;
}

.s7-pv__final-row--winner[b-e8dpxodw0f] {
    background: var(--flip7-yellow);
    border-color: var(--game-ink);
}

/* The rank is a hint — the rows are already in order — so it gets no reserved width. */
.s7-pv__rank[b-e8dpxodw0f] {
    font-family: var(--font-display);
    font-size: 12.5px;
    color: var(--text-subtle);
}

.s7-pv__seat-name[b-e8dpxodw0f] {
    font-size: 16px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

/* Wraps rather than truncates. In a 340px column a name, a badge, a state and a total do not
   always fit on one line — and « 2… » is not a shorter way of saying « 2ᵉ chance · 19 », it is
   a way of saying nothing. The row gets taller instead, which costs a few pixels of a column
   that has room below it. */
.s7-pv__row-state[b-e8dpxodw0f] {
    text-wrap: balance;
}

.s7-pv__badges[b-e8dpxodw0f] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.s7-pv__badge[b-e8dpxodw0f] {
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 9.5px;
    font-weight: var(--weight-bold);
    letter-spacing: .05em;
    white-space: nowrap;
}

.s7-pv__badge--you[b-e8dpxodw0f] {
    background: var(--azure-600);
    color: var(--text-on-brand);
}

.s7-pv__badge--turn[b-e8dpxodw0f] {
    background: var(--game-ink);
    color: var(--flip7-yellow);
}

.s7-pv__badge--busted[b-e8dpxodw0f] {
    background: var(--busted-bg);
    border: 1px solid var(--busted-border);
    color: var(--busted-text);
}

.s7-pv__badge--stayed[b-e8dpxodw0f] {
    background: var(--stayed-bg);
    color: var(--stayed-text);
}

.s7-pv__badge--role[b-e8dpxodw0f] {
    background: var(--azure-50);
    color: var(--azure-600);
}

.s7-pv__row-state[b-e8dpxodw0f],
.s7-pv__row-delta[b-e8dpxodw0f] {
    font-size: 12.5px;
    color: var(--neutral-500);
    text-align: right;
}

.s7-pv__row-delta[b-e8dpxodw0f] {
    font-weight: var(--weight-bold);
    color: var(--stayed-text);
}

.s7-pv__row-total[b-e8dpxodw0f],
.s7-pv__final-total[b-e8dpxodw0f] {
    min-width: 3ch;
    text-align: right;
    font-size: 24px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

/* ---- The line that says nothing to press ------------------------ */
.s7-pv__readonly[b-e8dpxodw0f] {
    padding: 12px 20px;
    background: var(--cream-panel);
    border-top: 1px solid var(--teal-cream-edge);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--neutral-500);
}

/* ---- V01 -------------------------------------------------------- */
.s7-pv--waiting[b-e8dpxodw0f] {
    gap: 20px;
    padding: 24px 20px 0;
    background: var(--cream-panel);
}

.s7-pv--waiting > .s7-pv__readonly[b-e8dpxodw0f] {
    margin: 0 -20px;
}

.s7-pv__waiting-head[b-e8dpxodw0f] {
    display: grid;
    gap: 8px;
}

.s7-pv__waiting-title[b-e8dpxodw0f] {
    font-size: 30px;
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--game-ink);
}

.s7-pv__waiting-help[b-e8dpxodw0f] {
    font-size: 14px;
    line-height: 1.5;
    color: var(--game-ink-soft);
}

.s7-pv__code[b-e8dpxodw0f] {
    display: grid;
    gap: 12px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 3px solid var(--game-ink);
    box-shadow: var(--panel-lift);
}

.s7-pv__code-note[b-e8dpxodw0f] {
    font-size: 12.5px;
    color: var(--neutral-500);
}

.s7-pv__order[b-e8dpxodw0f] {
    display: grid;
    gap: 10px;
}

.s7-pv__seat[b-e8dpxodw0f] {
    background: var(--cream);
}

/* ---- V06 -------------------------------------------------------- */
.s7-pv--recap .s7-pv__me[b-e8dpxodw0f] {
    border-bottom: 2px solid var(--game-ink);
}

.s7-pv__past-target[b-e8dpxodw0f] {
    margin: 0 20px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: #FDF3E0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #8A5A16;
}

.s7-pv__waiting-for[b-e8dpxodw0f] {
    padding: 16px 20px;
    background: var(--cream-panel);
    border-top: 1px solid var(--teal-cream-edge);
    font-size: 12.5px;
    color: var(--neutral-500);
}

/* ---- V07 -------------------------------------------------------- */
.s7-pv--over[b-e8dpxodw0f] {
    gap: 18px;
    padding: 26px 20px;
    background: var(--board-teal);
    color: var(--neutral-0);
}

.s7-pv__over-head[b-e8dpxodw0f] {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.s7-pv__over-eyebrow[b-e8dpxodw0f] {
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: var(--cream);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: .1em;
    color: var(--game-ink);
}

.s7-pv__over-title[b-e8dpxodw0f] {
    font-size: 24px;
    font-weight: var(--weight-bold);
    line-height: 1.15;
}

.s7-pv__over-score[b-e8dpxodw0f] {
    font-size: 76px;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--flip7-yellow);
}

.s7-pv__mine[b-e8dpxodw0f] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 3px solid var(--game-ink);
    color: var(--game-ink);
}

.s7-pv__mine-what[b-e8dpxodw0f] {
    display: grid;
    gap: 3px;
}

.s7-pv__mine-rank[b-e8dpxodw0f] {
    font-size: 21px;
    font-weight: var(--weight-bold);
}

.s7-pv__mine-total[b-e8dpxodw0f] {
    display: grid;
    gap: 2px;
    justify-items: end;
}

.s7-pv__mine-total .s7-display[b-e8dpxodw0f] {
    font-size: 34px;
    font-weight: var(--weight-bold);
}

.s7-pv__mine-best[b-e8dpxodw0f] {
    font-size: 11.5px;
    color: var(--game-ink-soft);
}

.s7-pv__final[b-e8dpxodw0f] {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: #EEF2DC;
    border: 3px solid var(--game-ink);
}

.s7-pv__final .s7-eyebrow[b-e8dpxodw0f] {
    color: var(--game-ink-soft);
}

.s7-pv__keep[b-e8dpxodw0f] {
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--neutral-0);
    color: var(--game-ink);
}

.s7-pv__keep-title[b-e8dpxodw0f] {
    font-size: 17px;
    font-weight: var(--weight-bold);
}

.s7-pv__keep-text[b-e8dpxodw0f] {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--game-ink-soft);
}

/* ---- V08, 820–1180: two columns --------------------------------- */
/* My reading on the left with the cards big, the table full height on the right.

   Scoped to the playing state, and that matters: V01, V06 and V07 replace the whole frame and
   have none of these bands. Left unscoped, they inherit a three-column grid and their own
   contents get dealt across it. */
@media (min-width: 820px) {
    .s7-pv--playing[b-e8dpxodw0f] {
        align-content: stretch;
        grid-template-columns: minmax(0, 1fr) 316px;

        /* Named rather than auto-placed. Auto-placement put the read-only line — the one that
           says « en attente du marqueur » — in the first free cell it found, which was above
           the bands rather than under them: a third strip of chrome at the top of a screen
           that is meant to have two. */
        grid-template-areas:
            "bar   bar"
            "yours yours"
            "me    table"
            "you   table"
            "foot  foot";
        grid-template-rows: auto auto auto 1fr auto;
    }

    .s7-pv--playing > .s7-pv__bar[b-e8dpxodw0f] {
        grid-area: bar;
    }

    .s7-pv--playing > .s7-pv__yours[b-e8dpxodw0f] {
        grid-area: yours;
    }

    .s7-pv--playing > .s7-pv__me[b-e8dpxodw0f] {
        grid-area: me;
    }

    .s7-pv--playing > .s7-pv__active[b-e8dpxodw0f] {
        grid-area: you;
    }

    .s7-pv--playing > .s7-pv__table[b-e8dpxodw0f] {
        grid-area: table;
        background: var(--cream-panel);
        border-left: 1px solid var(--teal-cream-edge);
        align-content: start;
    }

    .s7-pv--playing > .s7-pv__readonly[b-e8dpxodw0f] {
        grid-area: foot;
    }

    .s7-pv__me-name[b-e8dpxodw0f] {
        font-size: 38px;
    }

    .s7-pv__me-round .s7-display[b-e8dpxodw0f] {
        font-size: 58px;
    }
}

/* ---- V09, ≥1180: three columns ---------------------------------- */
/* My reading · the active player · the table. Nothing scrolls, everything reads at a metre.

   minmax(0, 1fr) and not 1fr: with 1fr the grid takes the min-content width of the card row
   and pushes the table out of the frame. The addendum flags this trap by name. */
@media (min-width: 1180px) {
    .s7-pv--playing[b-e8dpxodw0f] {
        grid-template-columns: minmax(0, 1fr) 300px 340px;
        grid-template-areas:
            "bar   bar   bar"
            "yours yours yours"
            "me    you   table"
            "foot  foot  foot";
        grid-template-rows: auto auto 1fr auto;
    }

    .s7-pv--playing > .s7-pv__active[b-e8dpxodw0f] {
        border-bottom: none;
        border-right: 1px solid var(--teal-cream-edge);
        align-content: start;
    }

    /* Three columns means the table gets 340px. The rows fit it as they are now that the
       roles are marks; the tightening that used to live here was buying back room the word
       pills had taken. */
    .s7-pv__row-total[b-e8dpxodw0f] {
        font-size: 21px;
    }

    /* The active player's own band is a column now, so their hand wraps instead of running. */
    .s7-pv__active-body[b-e8dpxodw0f] {
        display: grid;
        justify-items: start;
        gap: 10px;
    }

    .s7-pv__active-hand[b-e8dpxodw0f] {
        width: 100%;
    }
}

/* ---- Motion ----------------------------------------------------- */
/* There is none. The addendum asks for a screen that stays awake without an animation looping
   on it, and a mirror that moves when the table has not is a mirror that lies. */
/* /Components/Table/ProgressToTarget.razor.rz.scp.css */
/* How far along the 200 a total is. The number is already written above it in words, so this
   carries none of its own. */

.s7-toward[b-xxqa84um81] {
    height: 10px;
    border-radius: var(--radius-pill);
    background: rgba(12, 34, 54, .28);
    overflow: hidden;
}

.s7-toward__done[b-xxqa84um81] {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--flip7-yellow);
}
/* /Components/Table/QrPanel.razor.rz.scp.css */
/* The code takes the app's own ink and ground rather than carrying #000 and #FFF in its
   markup — which is the whole reason this draws its own SVG instead of taking QRCoder's. */

.s7-qr[b-f0pb0fc8g2] {
    display: block;
    width: 168px;
    height: 168px;
    border-radius: var(--radius-md);
}

.s7-qr__ground[b-f0pb0fc8g2] {
    fill: var(--cream-panel);
}

/* Ink rather than pure black: the contrast against cream is far past what a scanner needs,
   and a hard black square is the one thing on these screens that would look pasted in. */
.s7-qr__ink[b-f0pb0fc8g2] {
    fill: var(--game-ink);
}

@media (max-width: 767px) {
    .s7-qr[b-f0pb0fc8g2] {
        width: 140px;
        height: 140px;
    }
}
/* /Components/Table/ScoreChain.razor.rz.scp.css */
/* « 8 + 4 = 12 », and what did not happen to it. */

.s7-chain[b-qyk7cd3ujh] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 2px solid var(--game-ink);
    color: var(--game-ink);
}

.s7-chain__sum[b-qyk7cd3ujh] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.s7-chain__card[b-qyk7cd3ujh] {
    display: grid;
    place-items: center;
    min-width: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 2px solid var(--game-ink);
    font-size: 17px;
    font-weight: var(--weight-bold);
}

.s7-chain__plus[b-qyk7cd3ujh],
.s7-chain__equals[b-qyk7cd3ujh] {
    font-size: 17px;
    font-weight: var(--weight-bold);
    color: var(--game-ink-soft);
}

.s7-chain__figure[b-qyk7cd3ujh] {
    font-size: 21px;
    font-weight: var(--weight-bold);
}

.s7-chain__note[b-qyk7cd3ujh] {
    font-size: 13px;
    color: var(--game-ink-soft);
}
/* /Components/Table/SharedTable.razor.rz.scp.css */
/* C09 — the marker's side of a shared table, and the spectator's. Two states of one screen,
   because the table is one thing seen from two sides. */

.s7-table[b-epnbqyq93l] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 460px;
    background: var(--cream-panel);
}

.s7-table__invite[b-epnbqyq93l] {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 26px 24px;
}

/* ---- The code ------------------------------------------------- */
.s7-table__code-card[b-epnbqyq93l],
.s7-table__qr-card[b-epnbqyq93l] {
    padding: 22px 24px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 3px solid var(--game-ink);
    box-shadow: var(--panel-lift);
}

.s7-table__code-card[b-epnbqyq93l] {
    display: grid;
    justify-items: start;
    gap: 14px;
}

.s7-table__say[b-epnbqyq93l] {
    max-width: 46ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--game-ink-soft);
}

.s7-table__code-actions[b-epnbqyq93l] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.s7-table__copy[b-epnbqyq93l] {
    min-height: 44px;
    padding: 10px 22px;
    border-radius: var(--radius-md);
    background: var(--cream);
    border: 2px solid var(--game-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
    cursor: pointer;
}

.s7-table__copy:hover[b-epnbqyq93l] {
    background: var(--cream-panel);
}

/* The quiet ones: closing a table and asking for a new code are both things you do rarely and
   deliberately, and neither should compete with the code itself for attention. */
/* The way on, and the loudest thing on this screen while it is showing: everybody is sitting
   down and the round is what they are waiting for. */
.s7-table__begin[b-epnbqyq93l] {
    display: block;
    margin-top: 4px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border: 2px solid var(--game-ink);
    background: var(--color-primary);
    color: var(--neutral-0);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    text-align: center;
    text-decoration: none;
}

.s7-table__plain[b-epnbqyq93l] {
    justify-self: start;
    min-height: 44px;
    padding: 10px 4px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--weight-semibold);
    color: var(--game-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.s7-table__plain:hover[b-epnbqyq93l] {
    color: var(--azure-600);
}

/* The link written out, so the copy button is a shortcut rather than the only way. Wrapped
   rather than truncated: a link with an ellipsis in it cannot be read out or typed. */
.s7-table__link[b-epnbqyq93l] {
    max-width: 100%;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--neutral-500);
    overflow-wrap: anywhere;
}

/* ---- The QR --------------------------------------------------- */
.s7-table__qr-card[b-epnbqyq93l] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
}

.s7-table__qr-title[b-epnbqyq93l] {
    font-size: 17px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-table__qr-help[b-epnbqyq93l] {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--game-ink-soft);
}

.s7-table__note[b-epnbqyq93l] {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 2px dashed var(--teal-cream-edge);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--game-ink-soft);
}

/* ---- Nothing to share ----------------------------------------- */
.s7-table--closed[b-epnbqyq93l] {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 8px;
    grid-template-columns: 1fr;
    padding: 40px 24px;
}

.s7-table__closed-title[b-epnbqyq93l] {
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-table__closed-help[b-epnbqyq93l] {
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--neutral-500);
}

/* ---- Watching ------------------------------------------------- */
/* The spectator's whole screen. Bigger than the marker's board on purpose: this is read from
   across a table, at a glance, by somebody who is not holding the device. */
.s7-watch[b-epnbqyq93l] {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 26px 24px;
    background: var(--cream-panel);
}

.s7-watch__last[b-epnbqyq93l],
.s7-watch__waiting[b-epnbqyq93l] {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 3px solid var(--game-ink);
    box-shadow: var(--panel-lift);
}

.s7-watch__waiting[b-epnbqyq93l] {
    display: grid;
    gap: 4px;
    background: var(--cream-panel);
    border-style: dashed;
    border-color: var(--neutral-500);
    box-shadow: none;
}

.s7-watch__waiting-text[b-epnbqyq93l] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--game-ink-soft);
}

.s7-watch__card[b-epnbqyq93l] {
    display: grid;
    place-items: center;
    min-width: 44px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    background: var(--cream-panel);
    border: 2px solid var(--game-ink);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-watch__last-text[b-epnbqyq93l] {
    font-size: 17px;
    font-weight: var(--weight-semibold);
    color: var(--game-ink);
}

.s7-watch__scores[b-epnbqyq93l] {
    display: grid;
    gap: 8px;
    /* An ordered list, because the order is the standing — but the numbers belong in the row,
       not in a marker down the side. */
    list-style: none;
}

/* Dimmed while the marker is away, because the numbers are still true and no longer live.
   Not hidden: a spectator whose screen empties assumes the game ended. */
.s7-watch__scores[data-frozen="yes"][b-epnbqyq93l] {
    opacity: .6;
}

.s7-watch__row[b-epnbqyq93l] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 18px;
    align-items: baseline;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 2px solid var(--teal-cream-edge);
}

.s7-watch__row--playing[b-epnbqyq93l] {
    border-color: var(--azure-500);
    background: var(--azure-50);
}

.s7-watch__name[b-epnbqyq93l] {
    font-size: 19px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-watch__round[b-epnbqyq93l] {
    min-width: 3ch;
    text-align: right;
    font-size: 19px;
    color: var(--game-ink-soft);
}

.s7-watch__total[b-epnbqyq93l] {
    min-width: 4ch;
    text-align: right;
    font-size: 26px;
    font-weight: var(--weight-bold);
    color: var(--game-ink);
}

.s7-watch__legend[b-epnbqyq93l] {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* ---- Narrower ------------------------------------------------- */
@media (max-width: 1023px) {
    .s7-table[b-epnbqyq93l] {
        grid-template-columns: 1fr;
    }

    .s7-table__invite[b-epnbqyq93l],
    .s7-watch[b-epnbqyq93l] {
        padding: 16px;
    }

    .s7-table__qr-card[b-epnbqyq93l] {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

@media (max-width: 767px) {
    .s7-watch__name[b-epnbqyq93l] {
        font-size: 16px;
    }

    .s7-watch__total[b-epnbqyq93l] {
        font-size: 22px;
    }

    .s7-watch__last-text[b-epnbqyq93l] {
        font-size: 15px;
    }
}
/* /Components/Table/TableCodeBoxes.razor.rz.scp.css */
/* Six boxes, sized to be read across a table rather than to fit a phone's address bar. */

.s7-code[b-6axeaxknlb] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.s7-code__box[b-6axeaxknlb] {
    display: grid;
    place-items: center;
    min-width: 58px;
    min-height: 72px;
    padding: 8px 6px;
    border-radius: var(--radius-lg);
    background: var(--cream-panel);
    border: 3px solid var(--game-ink);
    box-shadow: var(--panel-lift);
    font-size: 34px;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--game-ink);
    /* The one place a character has to be unmistakable rather than pretty: 5 and S, 8 and B
       are read out loud from this. */
    font-variant-numeric: slashed-zero;
}

@media (max-width: 767px) {
    .s7-code[b-6axeaxknlb] {
        gap: 7px;
    }

    .s7-code__box[b-6axeaxknlb] {
        min-width: 44px;
        min-height: 56px;
        font-size: 26px;
    }
}