/* /Components/CharacterAvatar.razor.rz.scp.css */
.character-avatar[b-bjgqup84eg] {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    border: 2px solid #333;
}

.character-avatar.compact[b-bjgqup84eg] {
    max-width: 64px;
    max-height: 64px;
}
/* /Components/DiceTray.razor.rz.scp.css */
.dice-tray[b-01t1yhksyk],
.dice-tray-empty[b-01t1yhksyk] {
    box-sizing: border-box;
    min-height: 172px;
    padding: 16px;
    /* Faint felt-tinted background so the tray reads as part of the table. */
    background:
        radial-gradient(circle at 50% 30%, rgba(14, 94, 58, 0.10), transparent 70%),
        var(--surface-alt);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 3px rgba(8, 32, 20, 0.08), var(--shadow-sm);
}

.dice-tray[b-01t1yhksyk] {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 14px;
    justify-content: center;
}

.dice-tray-empty[b-01t1yhksyk] {
    margin: 0;
    color: var(--text-muted);
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile: tighten the tray's outer padding + inter-die gap so the
   3-wide grid leaves more breathing room on narrow phones. Dice size
   itself stays at 64px to keep them comfortable touch targets. */
@media (max-width: 640px), (max-height: 500px) {
    .dice-tray[b-01t1yhksyk],
    .dice-tray-empty[b-01t1yhksyk] {
        padding: 10px;
    }
    .dice-tray[b-01t1yhksyk] {
        gap: 10px;
    }
}
/* /Components/DieControl.razor.rz.scp.css */
.die[b-zghu5v0ln2] {
    width: 64px;
    height: 64px;
    font-size: 2rem;
    font-weight: bold;
    border: 2px solid #2a2a2a;
    border-radius: 12px;
    background: linear-gradient(155deg, #ffffff 0%, #ececec 100%);
    color: #111;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    padding: 0;
    box-shadow: 0 2px 4px rgba(8, 32, 20, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.die-value[b-zghu5v0ln2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-zghu5v0ln2] .die-pips {
    display: block;
}

.die:hover:not(:disabled)[b-zghu5v0ln2] {
    background: linear-gradient(155deg, #ffffff 0%, #dadada 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(8, 32, 20, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.die-reserved[b-zghu5v0ln2] {
    background: linear-gradient(155deg, var(--felt-green-light) 0%, var(--felt-green) 100%);
    color: white;
    border-color: var(--felt-green-dark);
    box-shadow: 0 2px 4px rgba(8, 32, 20, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.die-reserved:hover:not(:disabled)[b-zghu5v0ln2] {
    background: linear-gradient(155deg, var(--felt-green) 0%, var(--felt-green-dark) 100%);
}

.die-no-value[b-zghu5v0ln2] {
    color: var(--text-faint);
    background: linear-gradient(155deg, #f3f3f3 0%, #e2e2e2 100%);
}

.die-disabled[b-zghu5v0ln2] {
    cursor: default;
    opacity: 0.6;
}

.die-empty[b-zghu5v0ln2] {
    color: #ccc;
}

/* Prior-reserved dice (reserved in an earlier roll within this phase): red border
   so they're visually distinct from reserved-this-roll (which has a green border).
   Matches the legacy WinForms convention. Override .die-disabled's 60% opacity so
   the value stays clearly readable. */
.die.die-reserved.die-disabled[b-zghu5v0ln2] {
    border-color: #d32f2f;
    border-width: 3px;
    opacity: 1;
}
/* /Components/EndGameButton.razor.rz.scp.css */
/* No width override — the button sizes to its label. Centering is done
   by the .end-game-card wrapper via text-align: center. */
/* /Components/FinishedNotification.razor.rz.scp.css */
.ended-early-note[b-e5zsyhbyp9] {
    color: #777;
    font-size: 0.9rem;
    margin: 0 0 12px;
}

.place[b-e5zsyhbyp9] {
    margin: 6px 0;
    font-size: 1.05rem;
}

.place-icon[b-e5zsyhbyp9] {
    display: inline-block;
    margin-right: 6px;
    font-size: 1.2rem;
    vertical-align: middle;
}

.result-actions[b-e5zsyhbyp9] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.did-not-finish-header[b-e5zsyhbyp9] {
    margin: 16px 0 4px;
    color: #666;
    font-size: 0.9rem;
    font-weight: 600;
}

.did-not-finish-row[b-e5zsyhbyp9] {
    margin: 2px 0;
    padding-left: 8px;
    color: #777;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}
/* /Components/LanguageSelector.razor.rz.scp.css */
.language-selector[b-ewz7t1teu2] {
    display: inline-flex;
    gap: 4px;
}

.lang-btn[b-ewz7t1teu2] {
    padding: 4px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #555;
    background: #fff;
    color: #555;
    cursor: pointer;
    border-radius: 4px;
    min-width: 36px;
}

.lang-btn-active[b-ewz7t1teu2] {
    background: #0e5e3a;
    color: white;
    border-color: #083d24;
}
/* /Components/Modal.razor.rz.scp.css */
.modal-backdrop[b-5aqz1dpnx6] {
    position: fixed;
    inset: 0;
    background: rgba(8, 32, 20, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.modal-panel[b-5aqz1dpnx6] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    min-width: 320px;
    max-width: 80vw;
    max-height: 80vh;
    padding: 1.75rem;
    box-shadow: var(--shadow-lg);
    overflow: auto;
    /* Felt-green accent strip at the top so dialogs feel part of the table. */
    border-top: 4px solid var(--felt-green);
}

.modal-title[b-5aqz1dpnx6] {
    margin: 0 0 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.modal-body[b-5aqz1dpnx6] {
    line-height: 1.5;
}
/* /Components/ScoreTable.razor.rz.scp.css */
/* Wrapper allows the table to horizontally scroll on phones when 4–6
   player columns push it past the viewport. The card chrome (rounded
   corners + shadow) lives on the table itself so the scroll area stays
   visually contained. */
.score-table-scroll[b-fw50797r1x] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Compensate for the table's own border-radius — without this the
       overflow:auto wrapper clips the bottom-corner radii. */
    border-radius: var(--radius-md);
}

.score-table[b-fw50797r1x] {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.95rem;
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.score-table th[b-fw50797r1x], .score-table td[b-fw50797r1x] {
    border-bottom: 1px solid var(--surface-border);
    padding: 8px 12px;
    text-align: right;
}

.score-table tbody tr:last-child td[b-fw50797r1x] {
    border-bottom: none;
}

.score-table th[b-fw50797r1x] {
    background: var(--felt-green);
    color: white;
    text-align: right;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--felt-green-dark);
    /* Smooth crossfade of the active-player highlight between turns. */
    transition: background 0.45s ease, color 0.45s ease;
}

.header-medal[b-fw50797r1x] {
    display: inline-block;
    margin-right: 6px;
    /* slightly larger than name text so the medal reads at a glance */
    font-size: 1.1em;
    vertical-align: -1px;
}

/* Active player's column header: lighter green panel + cream text so
   the column being played pops off the row. Transition lives on .score-table th
   above so the change crossfades when the turn advances. */
.score-table th.player-current[b-fw50797r1x] {
    background: var(--felt-green-light);
    color: #fff8e1;
}

/* # column header stays centered to match the centered row-num body cells. */
.score-table th:first-child[b-fw50797r1x] {
    text-align: center;
}

.score-table .row-num[b-fw50797r1x] {
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-stripe);
    font-weight: 600;
}

.score-table tbody tr:nth-child(even) td:not(.row-num)[b-fw50797r1x] {
    background: var(--surface-stripe);
}

/* Future-round placeholder rows: greyed-out row number + empty cells,
   no flash colours, no current-row highlight. */
.score-table tbody tr.placeholder-row .row-num[b-fw50797r1x] {
    color: var(--text-faint);
    font-weight: 400;
}

.score-table-empty[b-fw50797r1x] {
    padding: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.score-table td[b-fw50797r1x] {
    transition: background 0.5s ease-out, color 0.5s ease-out;
}

.score-table td.cell-flash-success[b-fw50797r1x] {
    background: #c8e6c9;
    color: #1b5e20;
    transition: none;
}

.score-table td.cell-flash-fail[b-fw50797r1x] {
    background: #ffcdd2;
    color: #b71c1c;
    transition: none;
}

.score-expand-toggle[b-fw50797r1x] {
    display: block;
    margin: 8px 0 0 0;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--felt-green);
    background: transparent;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.score-expand-toggle:hover[b-fw50797r1x] {
    background: var(--felt-green);
    color: white;
    border-color: var(--felt-green-dark);
}

.score-table tbody tr.current-row td[b-fw50797r1x] {
    font-weight: 700;
    background: rgba(14, 94, 58, 0.06);
}

.score-table tbody tr.current-row td:first-child[b-fw50797r1x] {
    border-left: 3px solid var(--felt-green);
    background: rgba(14, 94, 58, 0.12);
}

/* Per-cell status icons + styling for failed / bust / zero-out turns. The
   cell text stays the player's running total so a streak doesn't hide the
   score; the icon + color cue indicates "this turn didn't count". */
.cell-icon[b-fw50797r1x] {
    display: inline-block;
    margin-right: 4px;
}

.cell-icon-failed[b-fw50797r1x] {
    color: #c62828;
    font-weight: bold;
}

.score-table td.cell-status-failed[b-fw50797r1x],
.score-table td.cell-status-bust[b-fw50797r1x] {
    color: var(--text-faint);
}

.score-table td.cell-status-zeroout[b-fw50797r1x] {
    color: #c62828;
    font-weight: bold;
}

.score-table td.cell-status-winning[b-fw50797r1x] {
    color: var(--felt-green-dark);
    font-weight: bold;
}
/* /Components/StatusBar.razor.rz.scp.css */
/* Floating warning toast: appears centred above the game area, slides
   in from above, then auto-dismisses (timer lives in StatusBar.razor).
   Warning palette (light amber + orange accent) is more visible than the
   neutral cream of regular surface cards, but still soft enough to not
   feel alarming for a validation hint. */
.status-bar[b-32whz9yg51] {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;

    padding: 12px 20px;
    background: #fff8e1;
    color: #5d4400;
    font-size: 0.95rem;
    border: 1px solid #ffc107;
    border-left: 4px solid #ff9800;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);

    max-width: min(640px, calc(100vw - 32px));

    animation: status-bar-flash-in-b-32whz9yg51 0.22s ease-out;
}

@keyframes status-bar-flash-in-b-32whz9yg51 {
    from {
        opacity: 0;
        transform: translate(-50%, -12px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Phones: sit a bit lower because the nav links wrap to a second row
   and 80px would clip into them. Also widen the toast to fill more of
   the narrow viewport. */
@media (max-width: 640px), (max-height: 500px) {
    .status-bar[b-32whz9yg51] {
        top: 110px;
        max-width: calc(100vw - 20px);
        font-size: 0.9rem;
        padding: 10px 14px;
    }
}
/* /Components/TurnProperties.razor.rz.scp.css */
.turn-properties[b-4w9rl5y0bn] {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 220px;
}

.turn-empty[b-4w9rl5y0bn] {
    color: var(--text-muted);
    font-style: italic;
}

.turn-player[b-4w9rl5y0bn] {
    margin: 0 0 14px;
    padding: 0 0 12px;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--felt-green-dark);
    letter-spacing: -0.01em;
    border-bottom: 2px solid var(--surface-border);
}

.turn-stats[b-4w9rl5y0bn] {
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Narrow screens: stat cards sit side by side to save vertical space.
   Matches the .game-grid breakpoint in Pages/Game.razor.css. */
@media (max-width: 640px), (max-height: 500px) {
    .turn-stats[b-4w9rl5y0bn] {
        flex-direction: row;
    }
    .stat[b-4w9rl5y0bn] {
        flex: 1;
    }
    /* Player name is redundant on mobile — the highlighted column header
       in the score table already conveys whose turn it is. Hide it to
       save a row of vertical space. */
    .turn-player[b-4w9rl5y0bn] {
        display: none;
    }
}

.stat[b-4w9rl5y0bn] {
    background: var(--surface-alt);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.4s ease;
}

.stat-current[b-4w9rl5y0bn] {
    border-left: 4px solid var(--felt-green);
}

.stat-total[b-4w9rl5y0bn] {
    border-left: 4px solid var(--felt-green-light);
}

.stat-label[b-4w9rl5y0bn] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--text-muted);
}

.stat-value[b-4w9rl5y0bn] {
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1.1;
}

.stat-total .stat-value[b-4w9rl5y0bn] {
    color: var(--text-muted);
    font-size: 1.4rem;
}

/* Small caption under the Total value — conveys the win-condition target
   without needing a separate banner above the board. */
.stat-goal[b-4w9rl5y0bn] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* /Components/TurnPropertiesControl.razor.rz.scp.css */
.turn-actions[b-lyj1sar6fq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 12px;
}

.turn-actions .action-btn[b-lyj1sar6fq] {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* Roll is the most-pressed action — give it a touch more presence. */
.turn-actions .action-btn.roll[b-lyj1sar6fq] {
    padding: 12px;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Score & end turn (primary) stays distinct via its own primary color +
   border. No extra rules needed. */

/* Narrow screens: Roll and Reserve all sit side by side on row 1;
   Score & end turn (primary) spans the full row underneath. Same
   640px breakpoint as the rest of the mobile pass. */
@media (max-width: 640px), (max-height: 500px) {
    .turn-actions[b-lyj1sar6fq] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .turn-actions .action-btn:nth-child(3)[b-lyj1sar6fq] {
        grid-column: 1 / -1;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Outer bar: spans the full viewport so the green strip + bottom border
   reach edge to edge regardless of how wide the browser is. */
.app-nav[b-ga7xajw93f] {
    background: #0e5e3a;
    color: white;
    border-bottom: 2px solid #083d24;
}

/* Inner row: holds the actual content, capped at the same max-width as
   the game grid (Pages/Game.razor.css → .game-grid). The auto margins
   centre the row when the viewport is wider. */
.app-nav-inner[b-ga7xajw93f] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.app-title[b-ga7xajw93f] {
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
}

.app-title:hover[b-ga7xajw93f] {
    text-decoration: underline;
}

.app-nav-links[b-ga7xajw93f] {
    display: flex;
    gap: 16px;
    flex: 1;
}

.app-nav-links a[b-ga7xajw93f] {
    color: white;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
}

.app-nav-links a:hover[b-ga7xajw93f] {
    background: rgba(255, 255, 255, 0.15);
}

.app-nav-right[b-ga7xajw93f] {
    margin-left: auto;
}

/* Hide the Shortcuts nav link at the same breakpoint the mobile layout
   uses. Touch-detection media queries (hover: none / pointer: coarse)
   proved unreliable across mobile browsers. The /shortcuts route
   itself stays reachable via direct URL. Tradeoff: a narrow desktop
   window will also hide the link. */
@media (max-width: 640px), (max-height: 500px) {
    .app-nav-links a[href="/shortcuts"][b-ga7xajw93f] {
        display: none;
    }
}

main[b-ga7xajw93f] {
    /* Horizontal padding mirrors .app-nav-inner so the content edge in
       every page lines up exactly with the nav links above. Without this
       cards sit ~10–14px further in than the nav, which is visible when
       the browser is zoomed out on a phone. */
    padding: 16px 24px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Mobile nav: title + language selector on row 1, links on row 2 as a
   horizontally scrollable strip so all six fit even on a 320px phone
   without wrapping into a tall stack. Matches the 640px breakpoint
   used elsewhere. */
@media (max-width: 640px), (max-height: 500px) {
    .app-nav-inner[b-ga7xajw93f] {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 10px 14px;
    }
    .app-nav-links[b-ga7xajw93f] {
        order: 3;
        flex-basis: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        /* Hide the scrollbar; the cards are obvious enough to swipe. */
        scrollbar-width: none;
    }
    .app-nav-links[b-ga7xajw93f]::-webkit-scrollbar { display: none; }
    .app-nav-links a[b-ga7xajw93f] {
        flex-shrink: 0;
        white-space: nowrap;
    }
    main[b-ga7xajw93f] {
        padding: 12px 14px;
    }
}
/* /Pages/Game.razor.rz.scp.css */
/* Desktop: two columns, each a vertical flex stack.
   - Board (left): goal banner → dice tray → score table, packed tightly.
   - Sidebar (right): stats+buttons panel → optional avatar+end-game card.
   align-items: start prevents the grid from stretching the columns to
   match each other's height — the dice tray and score table sit flush
   underneath each other regardless of how tall the sidebar grows. */
.game-grid[b-l0uimhm7en] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    padding: 20px 0;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

.board[b-l0uimhm7en],
.sidebar[b-l0uimhm7en] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Allow the column to shrink below its content's natural min-size in a
       grid context — needed so the score table's wrapper can horizontal-
       scroll instead of pushing the column wider. */
    min-width: 0;
}

/* Avatar + end-game cards both sit in the right sidebar on desktop and
   inherit the TurnProperties chrome so they read as a related set. */
.avatar-card[b-l0uimhm7en],
.end-game-card[b-l0uimhm7en] {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 220px;
}

.end-game-card[b-l0uimhm7en] {
    /* Tighter padding than the avatar card — just one control. The card
       spans the board column width so it lines up with the score table
       above; the button inside is content-sized and centred. */
    padding: 14px;
    text-align: center;
}

.avatar-card .turn-avatar[b-l0uimhm7en] {
    display: flex;
    justify-content: center;
}

/* Narrow viewport OR short viewport (landscape phones): collapse to a
   single-column stack with the order:
     goal → dice → stats+buttons → score → avatar+end-game
   so the buttons stay just below the dice (no drift down as new rounds
   fill the table) and the avatar lives below the table. .board and
   .sidebar become display:contents so their children flow as direct
   flex children of .game-grid and can be re-sequenced with `order`.

   The ::deep combinator is required for selectors that target elements
   rendered by child components (DiceTray, TurnProperties, ScoreTable);
   Razor's scoped CSS would otherwise restrict the rules to elements
   rendered by Game.razor only. */
@media (max-width: 640px), (max-height: 500px) {
    .game-grid[b-l0uimhm7en] {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 14px 0;
        /* Override the desktop rule so flex items stretch full width
           instead of shrinking to their content. */
        align-items: stretch;
    }

    .board[b-l0uimhm7en],
    .sidebar[b-l0uimhm7en] {
        display: contents;
    }

    .game-grid[b-l0uimhm7en]  .dice-tray,
    .game-grid[b-l0uimhm7en]  .dice-tray-empty     { order: 1; }
    .game-grid[b-l0uimhm7en]  .turn-properties     { order: 2; }
    .game-grid[b-l0uimhm7en]  .score-table-scroll,
    .game-grid[b-l0uimhm7en]  .score-table-empty,
    .game-grid[b-l0uimhm7en]  .score-expand-toggle { order: 3; }
    /* End-game button sits directly below the score table on mobile so
       it's reachable without scrolling past the avatar. */
    .end-game-card[b-l0uimhm7en]              { order: 4; }
    .avatar-card[b-l0uimhm7en]                { order: 5; }
}
/* /Pages/NewGame.razor.rz.scp.css */
fieldset[b-vrt13c6h8k] {
    margin-bottom: 16px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

fieldset legend[b-vrt13c6h8k] {
    padding: 0 8px;
    font-weight: 600;
    color: var(--felt-green);
}

.player-row[b-vrt13c6h8k] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.player-row input[type="text"][b-vrt13c6h8k], .player-row input[type=""][b-vrt13c6h8k] {
    flex: 1;
}

.player-type-icon[b-vrt13c6h8k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--surface-border);
    background: var(--surface-alt);
    font-size: 1.1rem;
    user-select: none;
    flex-shrink: 0;
}

.player-type-icon.type-human[b-vrt13c6h8k] {
    background: rgba(14, 94, 58, 0.08);
    border-color: var(--felt-green);
}

.player-type-icon.type-robot[b-vrt13c6h8k] {
    background: rgba(8, 32, 20, 0.06);
}

.add-buttons[b-vrt13c6h8k] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* Mobile: stack the player-row controls so the name input gets the
   full width and the selects/Remove button drop to a wrapped second
   line instead of squishing horizontally. Matches the 640px breakpoint
   used by the game grid. */
@media (max-width: 640px), (max-height: 500px) {
    .player-row[b-vrt13c6h8k] {
        flex-wrap: wrap;
        gap: 8px;
    }
    /* Name shrinks first so the voice / image selects stay next to it
       on a single row as long as possible. min-width keeps the input
       legible (~10 chars) before it gives up and pushes a select to the
       next row. */
    .player-row input[type="text"][b-vrt13c6h8k], .player-row input[type=""][b-vrt13c6h8k] {
        flex: 1 1 100px;
        min-width: 100px;
    }
    .player-row select[b-vrt13c6h8k] {
        min-width: 0;
    }
    .add-buttons[b-vrt13c6h8k] {
        flex-wrap: wrap;
    }
}

.player-row input[b-vrt13c6h8k], .player-row select[b-vrt13c6h8k] {
    padding: 6px 8px;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    background: white;
}

.player-row input:focus[b-vrt13c6h8k], .player-row select:focus[b-vrt13c6h8k] {
    outline: 2px solid var(--felt-green-light);
    outline-offset: 1px;
}

.rules label[b-vrt13c6h8k] {
    display: block;
    margin-bottom: 8px;
}

.rules input[type="number"][b-vrt13c6h8k] {
    padding: 4px 8px;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    background: white;
    width: 110px;
}
/* /Pages/Rules.razor.rz.scp.css */
.rules-doc[b-fwg4r4n85a] {
    max-width: 760px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.rules-doc h1[b-fwg4r4n85a] {
    margin-top: 0;
}

.rules-doc h2[b-fwg4r4n85a] {
    margin-top: 28px;
    color: var(--felt-green-dark);
    border-bottom: 1px solid var(--surface-border);
    padding-bottom: 6px;
}

.rules-doc h3[b-fwg4r4n85a] {
    margin-top: 22px;
    color: var(--felt-green);
}

.rules-doc ul[b-fwg4r4n85a] {
    padding-left: 22px;
}

.rules-doc li[b-fwg4r4n85a] {
    margin-bottom: 6px;
}

.rules-doc .note[b-fwg4r4n85a] {
    background: var(--surface);
    border-left: 4px solid var(--felt-green);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin: 14px 0;
}

.rules-doc .example[b-fwg4r4n85a] {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.05rem;
    background: var(--surface);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--surface-border);
    display: inline-block;
    margin: 8px 0;
}

.rules-doc .scoring-list[b-fwg4r4n85a] {
    list-style: none;
    padding-left: 0;
}

.rules-doc .scoring-list li[b-fwg4r4n85a] {
    padding: 8px 14px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--surface-border);
    margin-bottom: 6px;
}

/* Bottom-of-page block (Back button + build footer) shares the same
   max-width as .rules-doc so it aligns with the text above. */
.rules-bottom[b-fwg4r4n85a] {
    max-width: 760px;
    margin: 0 auto;
}

.rules-build[b-fwg4r4n85a] {
    margin: 32px 0 8px;
    text-align: center;
    color: var(--text-faint);
    font-size: 0.8rem;
}

.rules-build code[b-fwg4r4n85a] {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: var(--text-muted);
}
/* /Pages/Settings.razor.rz.scp.css */
fieldset[b-fq0ippepsa] {
    margin-bottom: 16px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    /* Match the apparent width on /new-game: that form's fieldsets are
       constrained by the long player-row flex layout. Settings fieldsets
       have nothing wide forcing them, so they sprawl to full container
       width unless capped. */
    max-width: 720px;
}

fieldset legend[b-fq0ippepsa] {
    padding: 0 8px;
    font-weight: 600;
    color: var(--felt-green);
}

fieldset label[b-fq0ippepsa] {
    display: block;
    margin-bottom: 8px;
}

fieldset input[type="number"][b-fq0ippepsa], fieldset select[b-fq0ippepsa] {
    padding: 4px 8px;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    background: white;
}

fieldset input[type="number"][b-fq0ippepsa] {
    /* Match NewGame's .rules input[type="number"] width so the two pages'
       numeric inputs line up visually. */
    width: 110px;
}

.rules-reset-btn[b-fq0ippepsa] {
    margin-top: 8px;
}

.settings-status[b-fq0ippepsa] {
    padding: 8px 12px;
    background: #e8f5e9;
    color: var(--felt-green-dark);
    border-radius: var(--radius-sm);
    margin: 8px 0;
}
/* /Pages/Shortcuts.razor.rz.scp.css */
.shortcuts[b-ewcst5bi8t] {
    border-collapse: separate;
    border-spacing: 0;
    margin: 16px 0;
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.shortcuts th[b-ewcst5bi8t], .shortcuts td[b-ewcst5bi8t] {
    border-bottom: 1px solid var(--surface-border);
    padding: 8px 12px;
    text-align: left;
}

.shortcuts tbody tr:last-child td[b-ewcst5bi8t] {
    border-bottom: none;
}

.shortcuts th[b-ewcst5bi8t] {
    background: var(--felt-green);
    color: white;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--felt-green-dark);
}

.shortcuts kbd[b-ewcst5bi8t],
.dice-shortcut-grid kbd[b-ewcst5bi8t] {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: var(--text);
    background: var(--surface-alt);
    border: 1px solid var(--surface-border);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
}

.hint[b-ewcst5bi8t] {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 4px 0 12px;
}

.dice-shortcut-row[b-ewcst5bi8t] {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    margin: 4px 0 24px;
    flex-wrap: wrap;
}

.dice-shortcut-block[b-ewcst5bi8t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dice-shortcut-grid[b-ewcst5bi8t] {
    display: grid;
    grid-template-columns: repeat(3, 36px);
    grid-auto-rows: 36px;
    gap: 6px;
}

.dice-shortcut-grid kbd[b-ewcst5bi8t] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.dice-shortcut-label[b-ewcst5bi8t] {
    color: var(--text-muted);
    font-size: 0.85rem;
}
/* /Pages/Statistics.razor.rz.scp.css */
.stats[b-9vej7f61my] {
    border-collapse: separate;
    border-spacing: 0;
    margin: 16px 0;
    min-width: 320px;
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.stats th[b-9vej7f61my], .stats td[b-9vej7f61my] {
    border-bottom: 1px solid var(--surface-border);
    padding: 8px 12px;
    text-align: right;
}

.stats tbody tr:last-child td[b-9vej7f61my] {
    border-bottom: none;
}

.stats th[b-9vej7f61my] {
    background: var(--felt-green);
    color: white;
    text-align: right;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--felt-green-dark);
}

/* Player column header aligned left to match the player-name body cells. */
.stats th:first-child[b-9vej7f61my] {
    text-align: left;
}

.stats td:first-child[b-9vej7f61my] {
    text-align: left;
    font-weight: 600;
}