.game-category { margin-block: 1.5rem 2rem; }
.game-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .8rem; }
.game-category-grid .game-card { display: flex; gap: .8rem; margin: 0; border-radius: .75rem; border-color: color-mix(in srgb, currentColor 25%, transparent); }
.game-copy { display: flex; flex-direction: column; align-items: start; min-width: 0; }
.game-copy h4 { margin: .35rem 0 0; }
.game-copy p { margin: .4rem 0 .8rem; }
.game-copy button { margin-top: auto; }
.game-meta { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .78rem; }
.game-meta span, .game-icon { padding: .2rem .45rem; border-radius: .4rem; background: color-mix(in srgb, currentColor 9%, transparent); }
.game-icon { align-self: start; font-size: 1.5rem; min-width: 1.5rem; text-align: center; }
#game-mount:has(.board-table) { container-type: size; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.board-table, .party-table {
    height: 100%;
    box-sizing: border-box;
    margin-inline: auto;
    padding: .25rem clamp(.15rem, 1vw, .75rem);
    display: grid;
    gap: clamp(.35rem, 1.25vw, 1rem);
}
.board-table {
    width: 100%;
    max-width: 48rem;
    align-self: center;
    grid-template: minmax(0, 1fr) fit-content(40%) / minmax(0, 1fr);
}
.board-stage {
    min-width: 0;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}
.board-sidebar {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: .55rem;
    overflow-wrap: anywhere;
    overscroll-behavior: contain;
    background: var(--table-panel);
    border: 1px solid var(--table-line);
    border-radius: .75rem;
}
@media (width < 560px) {
    .board-table { max-height: calc(100cqw + 14rem); }
    .board-table:has(.board-ur) { max-height: calc(38cqw + 14rem); }
    .board-table:has(.board-mancala) { max-height: calc(25cqw + 14rem); }
}
@media (min-width: 560px) {
    .board-table {
        max-width: min(74rem, calc(100cqh + 22rem));
        grid-template: minmax(0, 1fr) / minmax(0, 1fr) clamp(11rem, 30%, 19rem);
    }
    .board-sidebar { align-self: safe center; max-height: 100%; box-sizing: border-box; }
}
.board-heading { text-align: center; }
.board-heading h2, .party-heading h2 { margin-block: 0; }
.board-heading h2 { font-size: clamp(1rem, 3vw, 1.5rem); }
.board-detail { margin: .25rem 0; }
.board-stats { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin-block: .35rem; }
.board-stats:has(.board-stat:nth-child(2)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.board-stat { display: grid; gap: .1rem; padding: .2rem .5rem; border: 1px solid color-mix(in srgb, currentColor 27%, transparent); border-radius: .5rem; text-align: center; }
.board-stat span { font-size: .75rem; }
.board-stat strong, .party-clock { font-variant-numeric: tabular-nums; }
.board-grid {
    --ratio: calc(var(--columns) / var(--rows));
    --max-width: 48rem;
    display: grid;
    grid-template: repeat(var(--rows), minmax(0, 1fr)) / repeat(var(--columns), minmax(0, 1fr));
    gap: clamp(1px, .5cqh, .22rem);
    box-sizing: border-box;
    width: min(var(--max-width), 100cqw, 100cqh * var(--ratio));
    height: min(100cqh, 100cqw / var(--ratio), var(--max-width) / var(--ratio));
    container-type: inline-size;
}
.board-square { --max-width: 54rem; gap: 0; border: .25rem solid #42332b; box-shadow: 0 .35rem 1rem #0005; border-radius: .5rem; overflow: clip; }
.board-flipped, .board-flipped .board-cell { transform: rotate(180deg); }
.board-ur { --ratio: calc(8 / 3); }
.board-mancala { --ratio: 4; }
.board-cell { position: relative; display: grid; place-content: center; justify-items: center; min-width: 0; min-height: 0; border: 0; padding: .08rem; background: #d6af86; color: #21180f; border-radius: .2rem; touch-action: manipulation; }
.board-square .board-cell { border-radius: 0; }
.board-cell:disabled { opacity: 1; cursor: default; }
.board-cell:not(:disabled) { cursor: pointer; }
.board-cell:focus-visible { outline: .18rem solid #18230b; outline-offset: -.2rem; z-index: 1; }
.board-cell.dark { background: #887057; }
.board-cell.light { background: #e8d4ab; }
.board-cell.in-check { background: #c75853; }
.board-cell.board-last { box-shadow: inset 0 0 0 .18rem #f7d271; }
.board-cell.board-source::before { position: absolute; inset: .16rem; border: 1px solid #fff8; border-radius: inherit; content: ''; pointer-events: none; }
.board-cell.board-selected { background: #e5a13d; }
.board-cell.board-target::after { position: absolute; inset: 12%; border-radius: 50%; border: .17rem solid #216441; box-shadow: 0 0 0 1px #fff9; content: ''; pointer-events: none; }
.board-piece { font: bold min(9cqw, 4rem)/1.03 system-ui, sans-serif; position: relative; z-index: 1; }
.board-piece.ivory { color: #fff9e8; text-shadow: 0 1px 3px #271e16, 0 0 1px #281c13; }
.board-piece.ink { color: #1f2024; text-shadow: 0 0 2px #eee; }
.board-piece.red { color: #902631; text-shadow: 0 0 2px #ffe4c2; }
.board-piece.moved { animation: board-arrive 220ms ease-out both; }
@keyframes board-arrive { from { opacity: .45; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
.board-marker { font-size: clamp(.45rem, 2.3cqw, .8rem); letter-spacing: -.03em; }
.board-ur .board-marker { position: absolute; inset: 0; display: grid; place-items: center; color: #704112; font-size: min(6cqw, 2.5rem); }
.board-cell.rosette { background: #edbe71; }
.board-cell.shared { background: #bc997c; }
.board-cell.private-path { background: #e6cfac; }
.board-cell.pit, .board-cell.store { border-radius: 45%; background: #e3c29b; box-shadow: inset 0 2px .4rem #54311666; }
.board-cell.store { background: #c8996c; }
.board-cell.pit .board-marker, .board-cell.store .board-marker { color: #744620; }
.board-value { font-size: clamp(.55rem, 3cqw, 1.1rem); }
.board-caption { font-size: clamp(.43rem, 2.3cqw, .83rem); font-weight: 600; overflow-wrap: anywhere; }
.board-landlord .board-cell {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    line-height: 1;
}
.board-landlord .board-piece { font-size: min(2.8cqw, 1.1rem); white-space: nowrap; }
.board-landlord .board-value, .board-landlord .board-marker { font-size: clamp(.43rem, 2.2cqw, .73rem); }
.board-landlord .district-property { background: #e5cba6; }
.board-landlord .district-grant { background: #acd6ae; }
.board-landlord .district-tax { background: #e8aaa5; }
.board-landlord .district-start { background: #f2d784; }
.board-landlord .district-rest { background: #b4c9dd; }
.board-centerpiece { grid-area: 2 / 2 / -2 / -2; display: grid; place-content: center; gap: .45rem; text-align: center; padding: .5rem; border-radius: .4rem; background: color-mix(in srgb, currentColor 8%, transparent); }
.board-centerpiece strong { font-size: clamp(.75rem, 5cqw, 2.4rem); }
.board-centerpiece span { font-size: clamp(.55rem, 3cqw, 1rem); }
.board-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-block: .35rem; }
.board-controls:empty, .board-stats:empty { display: none; }
.board-history { margin: .35rem 0; }
.party-table {
    max-width: 58rem;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 14rem);
    grid-template-rows: auto minmax(0, 1fr);
}
.party-prompts, .party-scoreboard {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
.party-prompts { padding: 3px; }
.party-heading { grid-column: 1 / -1; border-radius: 1rem; padding: .65rem .85rem; color: var(--ink); background: var(--party-surface); }
.party-heading h2 { font-size: clamp(1.15rem, 3vw, 2rem); line-height: 1.05; }
.party-heading .eyebrow { margin: 0; }
.party-stage { display: inline-block; margin: .25rem .65rem .25rem 0; }
.party-clock { display: inline-block; background: var(--table-panel); border-radius: 10rem; padding: .25rem .65rem; font-weight: 700; }
.party-prompts { display: grid; gap: .65rem; align-content: start; }
.party-prompt, .party-scoreboard { padding: .8rem; border-radius: .75rem; border: 1px solid var(--table-line); background: var(--table-panel); }
.party-prompt h3, .party-scoreboard h3 { margin: 0 0 .55rem; }
.party-form { display: grid; justify-items: start; gap: .55rem; }
.party-form textarea { box-sizing: border-box; width: 100%; resize: vertical; font: inherit; padding: .55rem; user-select: text; -webkit-user-select: text; }
.party-answers { display: grid; gap: .4rem; }
.party-answer { display: block; overflow-wrap: anywhere; background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; padding: .55rem; border-radius: .5rem; text-align: left; font: inherit; }
button.party-answer { border: 1px solid var(--table-line); cursor: pointer; }
button.party-answer:hover { border-color: var(--accent); }
.party-answer small { display: block; margin-top: .3rem; }
.party-confirm { font-weight: bold; }
.party-scoreboard { align-self: start; max-height: 100%; box-sizing: border-box; }
.party-score { display: flex; justify-content: space-between; gap: .3rem; padding: .35rem 0; overflow-wrap: anywhere; }
.party-answer-new, .party-table.reveal .party-answer, .party-winner { animation: party-reveal .35s ease-out both; }
@keyframes party-reveal { from { opacity: 0; translate: 0 .5rem; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 559px) {
    .party-table {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) fit-content(28%);
    }
}
@media (prefers-reduced-motion: reduce) { .board-piece.moved, .party-answer-new, .party-table.reveal .party-answer, .party-winner { animation: none; } }
.board-piece.captured { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; animation: board-capture 220ms ease-in both; }
@keyframes board-capture { to { opacity: 0; transform: scale(.55); } }
@media (prefers-reduced-motion: reduce) { .board-piece.captured { display: none; } }
.card-spectator {
    max-width: 74rem;
    height: 100%;
    box-sizing: border-box;
    margin-inline: auto;
    padding: .35rem;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .35rem;
}
.spectator-heading { overflow-wrap: anywhere; }
.spectator-heading h2 { font-size: 1.1rem; }
.spectator-heading > * { margin: .2rem 0; }
.spectator-roster { display: flex; flex-wrap: wrap; gap: .2rem .65rem; list-style: none; padding: 0; font-size: .8rem; }
.spectator-card-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    align-content: start;
    gap: .35rem;
    overflow: auto;
    padding: 3px;
}
.spectator-card-row {
    min-width: 0;
    border: 1px solid var(--table-line);
    border-radius: .5rem;
    background: var(--table-panel);
    padding: .35rem;
    overflow-wrap: anywhere;
}
.spectator-card-row h3 { margin: 0 0 .25rem; font-size: .85rem; }
.spectator-cards { display: flex; flex-wrap: wrap; gap: .18rem; }
.spectator-card { display: inline-grid; place-items: center; min-width: 1.45rem; min-height: 1.9rem; padding-inline: .1rem; border: 1px solid #746452; border-radius: .22rem; color: #241d19; background: #fffcf1; font-size: .8rem; font-weight: 700; }
.spectator-card.red-suit { color: #991e34; }
.spectator-card.covered { color: #ecd1a2; background: #473246; }

.dice-roll { display: grid; justify-items: center; gap: .3rem; padding: .35rem 0; }
.dice-tray { display: flex; gap: .4rem; }
.dice-total { font-size: .78rem; font-variant-numeric: tabular-nums; }
.board-die {
    display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); place-items: center;
    width: 1.6rem; aspect-ratio: 1; padding: .2rem; box-sizing: border-box;
    color: #302621; background: linear-gradient(145deg, #fff8e7, #d9c299);
    border-radius: .35rem; box-shadow: inset 0 0 0 1px #6a4d3650, 0 2px 3px #0004;
}
.die-pip { width: 75%; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.binary-die { clip-path: polygon(50% 0, 100% 92%, 0 92%); padding-top: .35rem; border-radius: 0; }
.binary-die .die-pip { background: #504033; }
.dice-tumble { animation: dice-tumble .48s ease-out both; animation-delay: calc(var(--die-index) * 35ms); }
@keyframes dice-tumble {
    from { transform: translateY(-.6rem) rotate(-135deg) scale(.75); opacity: .55; }
    60% { transform: translateY(.12rem) rotate(14deg); opacity: 1; }
    to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .dice-tumble { animation: none; } }

.binary-die {
    background: conic-gradient(from 60deg at 50% 67%, #e4cda6 0 120deg, #b2936b 120deg 240deg, #fff1d3 240deg);
}
[data-dice-theme="bronze-pyramid"] .binary-die {
    background: conic-gradient(from 60deg at 50% 67%, #a9683e 0 120deg, #693c2a 120deg 240deg, #d8945c 240deg);
}
[data-dice-theme="bronze-pyramid"] .die-pip { background: #fff0c6; }
[data-dice-theme="lapis-cube"] .board-die {
    color: #ffdb7a; background: linear-gradient(145deg, #658dd0, #253561);
}
[data-dice-theme="win-dice-ur"] .binary-die {
    background: conic-gradient(from 60deg at 50% 67%, #3057a3 0 120deg, #253561 120deg 240deg, #658dd0 240deg);
}
[data-dice-theme="win-dice-ur"] .binary-die .die-pip { background: #ffdb7a; }
[data-dice-theme="win-dice-foundry"] .board-die:not(.binary-die) {
    color: #fff0c6; background: linear-gradient(145deg, #b67444, #693c2a);
}
.dice-preview .dice-roll { padding: 0; }

.ur-tracker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .45rem; margin-top: .45rem; }
.ur-tracker-row { border: 1px solid var(--table-line); border-radius: .5rem; padding: .4rem .5rem; min-width: 0; }
.ur-tracker-row strong { display: block; font-size: .8rem; }
.ur-tracker-tokens, .ur-piece-preview { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.ur-tracker-tokens { margin-block: .3rem; }
.ur-tracker-counts { display: block; font-size: .72rem; }
.ur-token.ivory { --ur-token-color: #fff9e8; }
.ur-token.red { --ur-token-color: #902631; }
.ur-token { display: inline-block; width: .8rem; height: .8rem; box-sizing: border-box; border-radius: 50%; background: var(--ur-token-color); border: 1px solid #654b35; }
.ur-token.waiting { background: transparent; border: 2px dotted var(--ur-token-color); }
.ur-token.home { box-shadow: inset 0 0 0 2px #382b1f; }
[data-piece-theme="win-ur-pieces"] :is(.ur-token, .board-ur .board-piece).ivory { --ur-token-color: #315ac2; color: #315ac2; }
[data-piece-theme="win-ur-pieces"] :is(.ur-token, .board-ur .board-piece).red { --ur-token-color: #ffbb42; color: #ffbb42; }
.board-connect-four { background: #275f9a; padding: .35rem; border-radius: .65rem; }
.board-connect-four .board-cell { border-radius: 50%; background: #dfebf6; }
.board-connect-four .board-piece.connect-red { color: #ba2639; }
.board-connect-four .board-piece.connect-yellow { color: #a56300; }