.board-frame { display: grid; gap: 12px; min-width: 0; align-self: center; }
.felt-board { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 8px; box-shadow: 0 16px 38px #0009; user-select: none; -webkit-tap-highlight-color: transparent; }
.felt-board.movement-drag { touch-action: none; }
.felt-board.checker-moving { overflow: visible; position: relative; z-index: 1; }
.traveling-checker { pointer-events: none; }
.board-target { fill: transparent; stroke: transparent; outline: none; }
.board-target.source { cursor: pointer; }
.movement-drag .board-target.source { cursor: grab; }
.movement-drag .board-target.selected { cursor: grabbing; }
.board-target.destination { cursor: pointer; }
.board-target:focus-visible { stroke: #fff2c9; stroke-width: 5px; }
.checker-art, .point-number, .board-inscription, .move-die-badge { pointer-events: none; }
.move-arrows { --arrow-color: var(--brass); pointer-events: none; }
.move-arrows.good { --arrow-color: #69e389; }
.move-arrows.bad { --arrow-color: #ff635f; }
.move-arrow path { stroke-linecap: round; }
.arrow-outline, .arrow-shaft { fill: none; }
.arrow-outline { stroke: #100c08; stroke-width: 17; }
.arrow-shaft { stroke: var(--arrow-color); stroke-width: 11; }
.arrow-tip, .arrow-tail { fill: var(--arrow-color); stroke: #100c08; stroke-width: 4; stroke-linejoin: round; }
.arrow-off-label { fill: var(--text); stroke: #100c08; stroke-width: 6; paint-order: stroke; text-anchor: middle; dominant-baseline: central; font-size: 35px; font-weight: 700; }
.move-die-badge { --badge-color: #d6ab5c; font-family: ui-monospace, monospace; font-weight: 700; }
.move-die-badge.hit { --badge-color: #e9806a; }
.move-die-badge circle { fill: var(--badge-color); }
.move-die-badge text { fill: #14110e; }
.board-inscription {
    fill: #e8bc73;
    /* Match iOS at 4.6% of the 1536-unit board width. */
    font: 70.656px Georgia, serif;
    text-anchor: middle;
    dominant-baseline: central;
}
.board-inscription.in-play { opacity: .13; }
.point-number { fill: #fff3d6; stroke: #281a10; stroke-width: 4px; paint-order: stroke; font-size: 30px; font-weight: 600; text-anchor: middle; }
.destination-point, .lesson-source { pointer-events: none; fill: #d6ab5c36; stroke: #f4d591; stroke-width: 6px; }
.destination-point.hit { stroke: #ffad98; stroke-dasharray: 14 9; }
.board-target.lesson-source { pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
    .board-die { animation: settle-die 240ms ease-out both; transform-box: fill-box; transform-origin: center; }
    @keyframes settle-die { from { transform: translateY(-16px) rotate(-11deg) scale(.88); } to { transform: none; } }
}

.theme-slate .board-image { filter: saturate(.52) hue-rotate(44deg) brightness(.88); }
.theme-honey .board-image { filter: sepia(.43) saturate(1.2) brightness(1.15); }
.theme-dusk .board-image { filter: hue-rotate(100deg) saturate(.7) brightness(.87); }
.off-trays { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.off-tray { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-width: 0; border: 1px solid #6a5a44; background: #1f1a14; color: #f6efe0; border-radius: 10px; padding: 10px; text-align: left; }
.off-tray-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.off-tray-slots { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); align-self: end; gap: 2px; height: 14px; pointer-events: none; }
.off-tray-slots > span { border-radius: 999px; background-color: #6a5a4455; }
.off-tray-slots > .filled { background: linear-gradient(#fff4, #0003) currentColor; }
.off-tray strong { margin-left: auto; font-size: .85rem; white-space: nowrap; }
.off-tray .move-die-badge { display: grid; place-items: center; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--badge-color); color: #14110e; }
.piece-chip { width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px #32281777; }
.piece-chip.ivory { background: #f0e7d3; }
.piece-chip.umber { background: #6b3418; }
.table-layout { display: grid; gap: var(--table-gap); align-items: start; }
.table-controls { display: grid; align-content: start; gap: 12px; min-width: 0; }
.table-controls > * { overflow-wrap: anywhere; }
.table-actions { display: contents; }
.player-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.player-scores .card { padding: clamp(8px, 1vw, 14px); display: grid; align-content: start; gap: 4px; }
.player-scores .active { border-color: var(--brass); background: #2a2319; }
.player-scores .turn-delay { color: var(--brass); font-variant-numeric: tabular-nums; }
.player-clock {
    margin-block-start: 4px;
    padding-block-start: 6px;
    border-block-start: 1px solid #6a5a4477;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.table-turn > strong { font-size: 1.125rem; }
.table-resign-dialog { width: min(calc(100% - 16px), 24rem); }
.tab-strip { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
.tab-strip .button { flex: 0 0 auto; min-width: 0; white-space: nowrap; }
.theme-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.theme-sample { display: grid; gap: 8px; }
.theme-sample .board-frame { pointer-events: none; }
.theme-sample .off-trays { display: none; }
.face-to-face { transform: rotate(180deg); }
@media (min-width: 880px) {
    .table-layout:not(.paired-table) { grid-template-columns: minmax(0, 1fr) var(--rail-width); }
    .table-layout:not(.paired-table) .table-controls {
        /* The board sets the row height even when chat or coaching feedback expands. */
        contain: size;
        align-self: stretch;
        overflow: auto;
        scrollbar-width: thin;
        padding: 4px;
        margin: -4px;
    }
}
.paired-table { grid-template-columns: 1fr; }
.paired-controls { justify-content: center; }
.paired-table .board-frame { width: min(100%, calc(var(--board-width) + var(--tray-width) + 5px)); justify-self: center; }
.paired-table .table-controls { width: min(100%, 550px); justify-self: center; }
@media (max-width: 600px) and (orientation: portrait) {
    .table-layout .felt-board { aspect-ratio: 1.22; }
    .table-layout :is(.checker-art, .felt-board .move-die-badge) { transform-box: fill-box; transform-origin: center; transform: scaleY(.81); }
    .table-layout .board-inscription { transform-origin: center; transform: scaleY(calc(1.22 / 1.5)); }
}
@media (min-width: 721px) {
    .table-layout .board-frame { grid-template-columns: minmax(0, 1fr) var(--tray-width); gap: 5px; }
    .table-layout .off-trays { grid-template-columns: 1fr; gap: 5px; }
    .table-layout .off-tray { padding: 5px; gap: 5px; }
    .table-layout .off-tray-label { flex-direction: column; gap: 5px; }
    .table-layout .off-tray-name { font-size: .65rem; }
    .table-layout .off-tray-slots { grid-template-columns: 1fr; grid-template-rows: repeat(15, minmax(0, 1fr)); place-self: center; gap: 1px; width: min(100%, 48px); height: 100%; max-height: 150px; }
    .table-layout .off-tray strong { margin-left: 0; font-size: .7rem; }
}
@media (orientation: landscape) and (max-height: 540px), (orientation: landscape) and (pointer: coarse) {
    .game-stage > .table-layout { display: contents; }
    .game-stage .table-layout > .board-frame {
        grid-area: 1 / 1 / -1;
        grid-template-columns: minmax(0, 1fr) var(--tray-width);
        gap: var(--table-gap);
        width: 100%;
    }
    .game-stage .paired-table > .board-frame { grid-row-start: 2; }
    .game-stage .paired-controls {
        grid-area: 1 / 1;
        align-self: start;
        min-height: var(--control-height);
        flex-wrap: nowrap;
        gap: 4px;
        font-size: clamp(.8125rem, 2.3dvh, .9375rem);
    }
    .game-stage .paired-controls > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .game-stage .paired-controls > .button { flex: none; }
    .game-stage .table-layout .off-trays { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--table-gap); }
    .game-stage .table-layout .off-tray { padding: 3px; gap: 3px; border-radius: 6px; }
    .game-stage .table-layout .off-tray-label { flex-direction: column; gap: 2px; }
    .game-stage .table-layout .off-tray-label .piece-chip { display: none; }
    .game-stage .table-layout .off-tray-name,
    .game-stage .table-layout .off-tray strong { margin: 0; font-size: .6875rem; }
    .game-stage .table-layout .off-tray-slots {
        grid-template: repeat(5, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
        place-self: center;
        width: 100%;
        height: 100%;
        max-height: 44px;
    }
    .game-stage .table-layout > .table-controls {
        grid-area: 3 / 2;
        align-self: stretch;
        min-height: 0;
        width: auto;
        justify-self: stretch;
        contain: none;
        overflow: auto;
        scrollbar-width: thin;
        padding: 2px;
        margin: -2px;
        gap: 5px;
        font-size: clamp(.8125rem, 2.3dvh, .9375rem);
        line-height: 1.25;
    }
    .game-stage .table-layout .button { padding: 3px 6px; font-size: clamp(.75rem, 2.2dvh, .875rem); border-radius: 6px; }
    .game-stage .table-controls .card { padding: 5px; border-radius: 7px; gap: 4px; }
    .game-stage .player-scores { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .game-stage .player-scores .card {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        align-items: center;
        padding-block: 3px;
        column-gap: 4px;
        row-gap: 2px;
    }
    .game-stage .player-scores .eyebrow { font-size: 0; }
    .game-stage .player-scores .piece-chip { width: 10px; height: 10px; }
    .game-stage .player-name { grid-column: 2 / 4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .game-stage .player-score { grid-column: 4; font-size: .6875rem; white-space: nowrap; }
    .game-stage .player-pips { grid-column: 2; white-space: nowrap; }
    .game-stage .turn-delay { grid-column: 3; white-space: nowrap; }
    .game-stage .player-clock { grid-area: 2 / 4; margin: 0; padding: 0; border: 0; font-size: .875rem; text-align: end; }
    .game-stage .table-turn > strong { font-size: .875rem; }
    .game-stage .table-turn > strong:has(.turn-player) { display: flex; gap: .25em; white-space: nowrap; }
    .game-stage .turn-player { overflow: hidden; text-overflow: ellipsis; }
    .game-stage .table-turn > small {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .game-stage .table-turn > .game-number,
    .game-stage .table-controls:has(.table-feedback) .table-turn,
    .game-stage .table-controls:has(.practice-feedback) .player-scores,
    .game-stage .table-controls:has(.table-invite) .player-scores,
    .game-stage .bear-off-full-label,
    .game-stage .training-promotion { display: none; }
    .game-stage .table-actions { display: flex; flex-wrap: wrap; gap: 4px; }
    .game-stage .table-actions:empty { display: none; }
    .game-stage .table-actions > :is(.button, .table-chat) { flex: 1 1 0; }
    .game-stage .table-disclosure > summary { min-height: calc(var(--control-height) - 12px); padding: 3px 0; }
    .game-stage .table-chat > summary { white-space: nowrap; }
    .game-stage .table-disclosure-body {
        position: absolute;
        z-index: 2;
        inset-block-start: 0;
        inset-inline-end: calc(var(--rail-width) + var(--table-gap));
        width: min(22rem, calc(100% - var(--rail-width) - var(--table-gap)));
        max-height: 100%;
        overflow: auto;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
    }
}
@media (orientation: landscape) and (max-height: 280px) {
    .game-stage .table-controls { --control-height: 1.875rem; gap: 4px; }
    .game-stage .table-controls .card { padding-block: 3px; }
    .game-stage .player-scores .card { padding-block: 2px; }
}

.board-frame { position: relative; }
.board-move-notice { position: absolute; inset: auto 12px 12px; padding: 8px; background: #211c16; color: #f5ead5; pointer-events: none; z-index: 2; }
.legal-move-list { position: absolute; z-index: 3; inset: 8px auto auto 8px; background: #211c16; border: 1px solid #8b714a; border-radius: 8px; color: #f5ead5; }
.legal-move-list summary { cursor: pointer; padding: 5px 8px; font-size: .8rem; }
.legal-move-options { display: grid; gap: 4px; padding: 6px; max-height: min(48vh, 300px); overflow: auto; }
.legal-move-options button { min-height: 44px; }

@media (max-width: 600px) and (orientation: portrait) {
    .game-stage .table-layout .felt-board { aspect-ratio: 1.22; }
    .game-stage .board-frame, .game-stage .off-trays, .game-stage .table-controls { gap: 6px; }
    .game-stage .off-tray { padding: 6px 8px; grid-template-rows: auto; }
    .game-stage .off-tray-slots { height: 5px; }
    .game-stage .table-actions { display: flex; flex-wrap: wrap; gap: 6px; }
    .game-stage .table-actions .button { flex: 1; }
    .tab-strip .button { white-space: normal; }
}

.paired-controls {
    min-height: 44px;
    padding-inline: 8px;
    border-radius: 10px;
    background: var(--surface);
}
.paired-controls .seat-turn { color: var(--brass); }
.paired-table .table-controls:empty { display: none; }
.table-instruction { color: var(--text); border-color: var(--line); }
@media (orientation: landscape) and (max-height: 540px), (orientation: landscape) and (pointer: coarse) {
    .game-stage:has(> .paired-table) {
        --paired-controls-height: calc(2 * (var(--control-height) + var(--table-gap)));
        grid-template-rows: var(--control-height) auto minmax(0, 1fr) var(--control-height);
    }
    .game-stage .paired-table .paired-ivory { grid-area: 4 / 1; }
    .game-stage .paired-table .paired-umber { grid-area: 1 / 1; }
    .game-stage .paired-table > .board-frame { grid-row: 2 / 4; }
}

.off-tray.lesson-off { border-color: var(--brass); }
.table-layout > .table-instruction { grid-column: 1 / -1; }
@media (orientation: landscape) and (max-height: 540px), (orientation: landscape) and (pointer: coarse) {
    .game-stage .table-layout > .table-instruction { grid-area: 2 / 2; margin-bottom: var(--table-gap); font-size: .75rem; padding: 6px; }
}