.table-app {
    color-scheme: light dark;
    --canvas: #f5f5f7;
    --table-panel: #fff;
    --ink: #1d1d1f;
    --muted: #616167;
    --table-line: #d9d9df;
    --control: #e9e9ee;
    --accent: #0066cc;
    --primary: #0071e3;
    --danger: #ad252b;
    --party-surface: #ece9fb;
    --shadow: 0 2px 10px #1515220a;
    margin: 0;
    min-height: 100dvh;
    background: var(--canvas);
    color: var(--ink);
    font: 1rem/1.45 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
    .table-app {
        --canvas: #18181b;
        --table-panel: #252529;
        --ink: #f5f5f7;
        --muted: #b6b6bf;
        --table-line: #45454d;
        --control: #35353b;
        --accent: #84bdff;
        --primary: #0064ca;
        --danger: #ffabae;
        --party-surface: #37304f;
        --shadow: 0 2px 12px #0002;
    }
}

.table-app a { color: var(--accent); text-underline-offset: .18em; }
.table-app :focus-visible { outline-color: var(--accent); }
.table-app .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--table-panel);
    border-bottom: 1px solid var(--table-line);
}
.table-app .header-inner, .table-app > .page {
    box-sizing: border-box;
    width: min(100%, 72rem);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.25rem);
}
.table-app .header-inner { min-height: 3.25rem; gap: .4rem 1rem; }
.table-app .header-inner a { text-decoration: none; }
.table-app .brand { color: var(--ink); font-weight: 700; letter-spacing: -.035em; }
.table-app nav a { color: var(--muted); font-size: .875rem; }
.table-app .header-inner nav { display: flex; gap: .85rem; align-items: center; }
.table-app nav a:hover { color: var(--accent); }
.table-app .identity-button { margin-inline-start: auto; }
.table-app #display-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.table-app #settings > span:last-child { border-inline-start: 1px solid var(--table-line); padding-inline-start: .4em; }
.table-app h1, .table-app h2, .table-app h3, .table-app h4 { letter-spacing: -.025em; line-height: 1.15; }
.table-app .eyebrow { color: var(--muted); font-size: .8rem; font-weight: 650; margin: 0 0 .4rem; }

.table-app :is(.button, #game-result button, #reconnect, dialog button, #game-mount button:not(.board-cell, .room-card-slot, .party-answer, [data-draw], .card)) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35em;
    padding: .45em .85em;
    border: 1px solid transparent;
    border-radius: .55rem;
    background: var(--control);
    color: var(--ink);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}
.table-app :is(.button, #game-result button, #reconnect, dialog button, #game-mount button:not(.board-cell, .room-card-slot, .party-answer, [data-draw], .card)):hover:not(:disabled) {
    border-color: color-mix(in srgb, currentColor 32%, transparent);
}
.table-app :is(.button.primary, .button-primary, #rematch, #game-mount button:is([data-submit], [type=submit])) {
    background: var(--primary);
    color: white;
}
.table-app :is(.button.danger, #leave-room) { color: var(--danger); }
.table-app button:disabled:not(.board-cell) { opacity: .55; }
.table-app :is(input:not([type=checkbox], [type=range]), select, textarea) {
    min-width: 0;
    padding: .45em .6em;
    border: 1px solid var(--table-line);
    border-radius: .5rem;
    background: var(--table-panel);
    color: var(--ink);
    font: inherit;
}
.table-app label { font-size: .875rem; }
.table-app :is(.panel, dialog, .notice) {
    border: 1px solid var(--table-line);
    border-radius: .95rem;
    background: var(--table-panel);
    color: var(--ink);
    box-shadow: var(--shadow);
}
.table-app dialog { box-sizing: border-box; max-width: calc(100% - 2rem); max-height: calc(100dvh - 2rem); padding: 1.2rem; }
.table-app dialog::backdrop { background: #15152066; backdrop-filter: blur(4px); }
.table-app dialog h2 { margin-block-start: 0; }

.home-intro { padding-block: clamp(2rem, 5.5vw, 4.5rem) 1.8rem; }
.home-title { margin-block-end: clamp(1.4rem, 4vw, 2.5rem); }
.home-title h1 { font-size: clamp(3rem, 8.5vw, 5.5rem); line-height: .97; letter-spacing: -.05em; margin: 0; }
.home-title > p:last-child { color: var(--muted); font-size: clamp(1rem, 2.5vw, 1.25rem); margin-block: .8rem 0; }
.home-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: .6rem;
}
.home-actions #join-form {
    display: flex;
    gap: .4rem;
    min-width: 0;
    padding-inline-start: .75rem;
    border-inline-start: 1px solid var(--table-line);
}
.home-actions button { white-space: nowrap; }
.home-actions input { width: 13rem; }
.game-library { padding-block-end: 2rem; }
.game-library > .section-heading { border-top: 1px solid var(--table-line); padding-block-start: 1.4rem; }
.game-library h2 { font-size: clamp(1.6rem, 5vw, 2.25rem); margin: 0; }
.game-library :is(#game-count, .game-copy p, .game-meta) { color: var(--muted); }
.game-category > h3 { font-size: 1rem; margin-block: 0 .6rem; }
.game-category-grid .game-card { border-color: var(--table-line); padding: .95rem; }
.game-copy h4 { font-size: 1.05rem; margin-block-start: 0; }
.game-copy p { font-size: .875rem; }
.game-meta span { background: transparent; padding: 0; }
.game-icon { background: var(--control); width: 1.45em; height: 1.45em; display: grid; place-items: center; padding: 0; border-radius: .6rem; }
.center-view { max-width: 34rem; margin: 2.5rem auto; padding: 1.25rem; }
.center-view h1 { margin-block: .35rem; }
.center-view > a:last-child { display: inline-block; margin-top: .75rem; }
.room-heading { margin-block: 1.6rem 1rem; }
.room-heading h1 { margin: 0 0 .5rem; }
.room-code { font-weight: 650; font-variant-numeric: tabular-nums; }
.connection { color: var(--muted); }
.connection.offline { color: var(--danger); }
.lobby-panel :is(h2, p) { margin-block-start: 0; }
.lobby-panel { padding: 1rem; }
.seat-list { padding: 0; list-style: none; margin-block: .5rem 0; }
.seat-list li { padding: .5rem 0; border-top: 1px solid var(--table-line); }
.seat-list .empty-seat, .muted { color: var(--muted); }
#room-options { display: grid; gap: .55rem; }

.table-app:has(#room-view:not([hidden]) > #game-mount:not([hidden])) {
    padding: 0;
    font-size: .875rem;
}
.table-app:has(#room-view:not([hidden]) > #game-mount:not([hidden])) :is(.header-inner, .page) {
    width: 100%;
    padding-inline: clamp(.5rem, 2vw, 1.5rem);
}
.table-app:has(#room-view:not([hidden]) > #game-mount:not([hidden])) .header-inner {
    min-height: 2.25rem;
    padding-block: .15rem;
}
.table-app #settings { padding: .3em .55em; }
.table-app #room-view:has(> #game-mount:not([hidden])) #room-header {
    margin: 0;
    padding-block: .25rem;
}
.table-app #room-view:has(> #game-mount:not([hidden])) :is(.room-tools, #game-result) button {
    padding: .26em .52em;
    font-size: .78rem;
}
.table-app #table-details { font-size: .78rem; color: var(--muted); }
.table-app .room-details-content {
    background: var(--table-panel);
    color: var(--ink);
    border-color: var(--table-line);
    box-shadow: var(--shadow);
    width: min(24rem, 100vw - 2 * clamp(.5rem, 2vw, 1.5rem));
}
.table-app #game-result:not([hidden]) { padding-block: .25rem; }
.table-app .board-sidebar { box-shadow: var(--shadow); }
.table-app .card-table {
    box-sizing: border-box;
    color-scheme: dark;
    --ink: #f4f7f6;
    --control: #294840;
    --table-line: #67867c;
    --table-panel: #17342d;
    --accent: #a5dcff;
    color: var(--ink);
    background: #193c32;
    border: 1px solid #244d41;
    border-radius: .9rem;
    padding: .3rem;
}
.table-app #game-mount button:not(.board-cell, .room-card-slot, .party-answer, [data-draw], .card) {
    font-size: .8rem;
    padding: .3em .6em;
}
.table-app :is(.table-heading, .your-seat, .solitaire-status) { min-width: 0; }
.table-app .board-history summary { color: var(--accent); }
.table-app .party-form button { justify-self: start; }

@media (max-width: 560px) {
    .home-actions { width: 100%; flex-direction: column; align-items: stretch; }
    .home-actions #join-form {
        padding: .65rem 0 0;
        border-inline-start: 0;
        border-block-start: 1px solid var(--table-line);
    }
    .home-actions input { width: 100%; font-size: 1rem; }
    .table-app .header-inner nav a[data-home] { display: none; }
    .table-app .header-inner nav:has(#open-admin[hidden]) { display: none; }
}
@media (max-width: 420px), (max-height: 420px) {
    .table-app #room-view:has(> #game-mount:not([hidden])) .room-tools { gap: .2rem .35rem; font-size: .75rem; }
}

/* Fit the original chip artwork around the cards and betting controls. */
.table-chips {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding-inline: .15rem;
    color: inherit;
    font-size: .72rem;
    white-space: nowrap;
}
.table-chips .chip {
    box-sizing: border-box;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-width: 3px;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}
.spectator-roster li:has(.table-chips) {
    display: flex;
    align-items: center;
    gap: .3rem;
}

#home-presets { margin-inline-start: auto; }
#presets-dialog { width: min(36rem, calc(100% - 2rem)); }
#save-preset-form { padding-block-end: .85rem; border-bottom: 1px solid var(--table-line); }
#save-preset-form p { margin-block: 0 .5rem; }
#save-preset-form label { display: block; margin-block-end: .25rem; }
#save-preset-form input { flex: 1 1 9rem; }
#preset-status:empty, #preset-list:empty { display: none; }
#preset-list { padding: 0; margin: .6rem 0 1rem; list-style: none; }
#preset-list li {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .45rem .75rem;
    padding-block: .65rem;
    border-bottom: 1px solid var(--table-line);
    overflow-wrap: anywhere;
}
#preset-list li > div:first-child { flex: 1 1 14rem; min-width: 0; }
#preset-list :is(strong, span, small) { display: block; }
#preset-list small { color: var(--muted); }
.preset-actions { display: flex; gap: .3rem; }

.profile-avatar, .open-seat-icon {
    width: 1.65rem;
    height: 1.65rem;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--control);
}
#header-avatar { width: 1.25rem; height: 1.25rem; }
.seat-list li, #friends-list li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.open-seat-icon { display: grid; place-items: center; }
#community-dialog { width: min(34rem, calc(100% - 2rem)); }
#community-status:empty { display: none; }
.profile-preview { width: 5rem; height: 5rem; }
#profile-form, #feedback-form { display: grid; justify-items: start; gap: .5rem; }
#profile-photo { max-width: 100%; }
#feedback-message { width: 100%; box-sizing: border-box; resize: vertical; }
#friends-list { list-style: none; padding: 0; }
#friends-list li { padding-block: .55rem; border-bottom: 1px solid var(--table-line); overflow-wrap: anywhere; }
#friends-list .preset-actions { margin-inline-start: auto; }
.community-footer { margin-top: .8rem; }
#admin-feedback p { white-space: pre-wrap; }
#table-players { padding-inline-start: 0; }
#table-players li { display: flex; align-items: center; gap: .4rem; margin-block: .25rem; }
#table-players .profile-avatar { width: 1.25rem; height: 1.25rem; }

#friend-rooms { list-style: none; padding: 0; }
#friend-rooms li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-block: .4rem;
}
#room-access-label { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
#room-access { max-width: 100%; }

.table-app:has(#home-view:not([hidden])) #settings #display-name { display: none; }
.table-app:has(#home-view:not([hidden])) #settings > span:last-child {
    border-inline-start: 0;
    padding-inline-start: 0;
}

.profile-avatar[data-frame="silver"] { box-shadow: 0 0 0 2px #aab7c8; }
.profile-avatar[data-frame="cobalt"] { box-shadow: 0 0 0 2px #3578e8; }
.profile-avatar[data-frame="regular"] { box-shadow: 0 0 0 2px #4cae8e, 0 0 0 4px #266e62; }
.profile-avatar[data-frame="laurel"] { box-shadow: 0 0 0 2px #e7b968, 0 0 0 4px #9b712c; }
#chat-dialog, #cosmetics-dialog { width: min(38rem, calc(100% - 2rem)); }
#chat-history { max-height: 42dvh; overflow: auto; padding-inline-start: 1.5rem; }
#chat-history p { margin: .15rem 0; overflow-wrap: anywhere; white-space: pre-wrap; }
#chat-history li { margin-bottom: .55rem; }
#chat-form { margin-block: .5rem; }
#chat-form input { flex: 1 1 10rem; }
#chat-threads { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .65rem; }
.cosmetic-card { position: relative; display: inline-block; width: 1.3rem; height: 1.85rem; }
.cosmetic-card .card { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; }
.frame-preview { display: inline-block; width: 1rem; height: 1rem; }

.header-account { margin-inline-start: auto; display: flex; align-items: center; gap: .6rem; }
#avatar-menu { position: relative; z-index: 20; }
#avatar-menu summary { display: grid; place-items: center; padding: .35rem; border-radius: 50%; list-style: none; }
#avatar-menu summary::-webkit-details-marker { display: none; }
#avatar-menu #header-avatar { width: 1.8rem; height: 1.8rem; }
.avatar-dropdown { position: absolute; inset-inline-end: 0; top: calc(100% + .3rem); min-width: 9rem; padding: .35rem; }
.avatar-dropdown > * { display: block; width: 100%; box-sizing: border-box; padding: .4rem .55rem; border: 0; border-radius: .4rem; background: transparent; color: inherit; text-align: start; font: inherit; white-space: nowrap; }
.avatar-dropdown > :hover { background: var(--control); }
.settings-page { max-width: 45rem; margin: 2rem auto; padding-block-end: 2rem; }
.settings-page form { display: grid; justify-items: start; gap: .5rem; margin-bottom: 1rem; }
.settings-page form label { display: grid; gap: .25rem; }
.profile-tabs { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.profile-tabs [aria-current="page"] { font-weight: 700; color: var(--ink); }
.theme-preview { width: 1.6rem; height: 1.6rem; border-radius: .25rem; background: linear-gradient(135deg, #d7b580 50%, #587066 50%); }
.chess-tools { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.chess-tools [aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.board-grid:has(.chess-annotations) { position: relative; }
.board-cell.chess-premove { box-shadow: inset 0 0 0 3px #b85ce0; }
.board-cell.chess-marked { box-shadow: inset 0 0 0 3px #e78a20; }
.chess-annotations { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.chess-annotations path { fill: none; stroke: #f29b22; stroke-width: .13; stroke-linecap: round; stroke-linejoin: round; }



#profile-view { max-width: 58rem; }
#profile-status:empty { display: none; }
.profile-tabs { border-bottom: 1px solid var(--table-line); gap: .25rem; }
.profile-tabs a { padding: .55rem .8rem; text-decoration: none; border-bottom: 2px solid transparent; }
.profile-tabs [aria-current="page"] { border-bottom-color: var(--accent); }
.profile-card { max-width: 37rem; }
.profile-banner {
    height: clamp(5.5rem, 15vw, 8rem);
    border-radius: inherit;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    background: radial-gradient(ellipse at 82% 0%, #517092, transparent 70%), linear-gradient(110deg, #223d55, #233e38);
}
.profile-card-body { padding: 0 clamp(1rem, 4vw, 1.75rem) 1rem; }
.profile-avatar-wrap { position: relative; display: inline-grid; margin-top: -2.5rem; border-radius: 50%; }
.profile-avatar-wrap .profile-avatar { width: 6rem; height: 6rem; }
#edit-avatar {
    position: absolute; inset: 0; display: grid; place-content: center; gap: .1rem;
    border: 0; border-radius: 50%; background: #101018bd; color: white;
    font: 650 .7rem/1.1 system-ui; opacity: 0; transition: opacity .15s ease;
}
#edit-avatar span:first-child { font-size: 1.55rem; }
#edit-avatar:is(:hover, :focus-visible) { opacity: 1; }
@media (hover: none) { #edit-avatar { opacity: 1; inset: auto 0 0 auto; width: 2rem; height: 2rem; } #edit-avatar span:last-child { display: none; } }
#photo-dialog { width: min(26rem, calc(100% - 2rem)); }
#photo-dialog #profile-form { justify-items: center; gap: .9rem; }
#photo-status { margin: 0; text-align: center; color: var(--muted); }
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); gap: .65rem; }
.achievement-grid { list-style: none; padding: 0; }
.achievement-tile { position: relative; min-width: 0; }
.achievement-trigger {
    border: 1px solid var(--table-line); border-radius: .65rem;
    background: var(--table-panel); font-size: .85rem;
}
.achievement-trigger summary {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    gap: .15rem .55rem; padding: .55rem; list-style: none; cursor: pointer;
}
.achievement-trigger summary::-webkit-details-marker { display: none; }
.achievement-icon {
    grid-row: span 2; display: grid; place-items: center; width: 1.85rem; height: 1.85rem;
    border-radius: .5rem; background: #273e55; color: #b9dcff; font-size: 1rem;
}
.achievement-tile.locked .achievement-icon { background: var(--control); color: var(--muted); }
.achievement-reward { grid-column: 2; }
.achievement-detail {
    margin: 0 .55rem; padding: .5rem 0; border-block-start: 1px solid var(--table-line);
    color: var(--muted); font-size: .8rem;
}

.settings-page { max-width: 56rem; }
.settings-page > h1 { margin-block: 0 .5rem; font-size: clamp(2rem, 5vw, 2.65rem); }
#account-status { color: var(--muted); margin: 0 0 1.25rem; }
#account-management { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .85rem; }
.settings-page .account-card, .account-preferences { padding: clamp(.9rem, 3vw, 1.4rem); }
.settings-page .account-card { align-content: start; justify-items: stretch; margin: 0; }
.account-card h2, .account-preferences h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.account-card button { justify-self: start; }
#account-form { max-width: 26rem; }
.account-actions { grid-column: 1 / -1; }
.account-preferences { margin-top: 1rem; }
.account-preferences p { margin-block: .5rem; }
.account-preferences p:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-bottom: 0; }
.room-quick-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
#room-reactions { position: relative; z-index: 5; }
#room-reactions summary { list-style: none; }
#room-reactions summary::-webkit-details-marker { display: none; }
.reaction-popover { position: absolute; inset-block-start: calc(100% + .35rem); inset-inline-start: 0; display: flex; gap: .2rem; padding: .3rem; }
#room-reactions #table-emotes button { font-size: 1.05rem; padding: .28rem; }
#nudge-dialog, #table-social-dialog { width: min(25rem, calc(100% - 2rem)); }
.table-settings { display: grid; gap: .65rem; margin-bottom: 1rem; }
.table-settings label { display: grid; gap: .25rem; }
.table-settings > button { justify-self: start; }
@media (max-width: 480px) { .reaction-popover { position: fixed; inset: auto .5rem .5rem; justify-content: center; } }

/* Shared surfaces for the library, lobby, account pages, and admin. */
.table-app .site-header { background: color-mix(in srgb, var(--table-panel) 84%, var(--canvas)); }
.home-intro { position: relative; isolation: isolate; }
.home-intro::before {
    content: ''; position: absolute; z-index: -1; inset: 0;
    background: radial-gradient(ellipse 30% 70% at 70% 30%,
        color-mix(in srgb, var(--accent) 10%, transparent), transparent);
    pointer-events: none;
}
.game-library .game-card { transition: border-color .15s ease, box-shadow .15s ease; }
.game-library .game-card:is(:hover, :focus-within) {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--table-line));
    box-shadow: var(--shadow);
}
.lobby-panel, .center-view { padding: clamp(.95rem, 3vw, 1.4rem); }
.lobby-panel .section-heading { margin-bottom: .45rem; }
.lobby-panel .seat-list li { min-height: 2rem; }
.lobby-panel .game-option { min-height: 2rem; }
.admin-page #admin-content > section { padding: clamp(.75rem, 3vw, 1.25rem); border: 1px solid var(--table-line); border-radius: .95rem; background: var(--table-panel); }
.admin-page #admin-content > section > h2 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .game-library .game-card { transition: none; } }

#profile-pane.profile-card { max-width: none; }
.profile-card-body { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-top: .65rem; }
.profile-identity p { margin: .18rem 0; color: var(--muted); font-size: .875rem; }
#profile-presence::before { content: ''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); margin-right: .4rem; }
#profile-presence.profile-online::before { background: #3da879; }
#profile-preferences, .profile-overview { padding: .85rem clamp(1rem, 4vw, 1.75rem); border-top: 1px solid var(--table-line); }
#profile-details-form { margin: .75rem 0 0; }
#profile-details-form label:has(input[type="checkbox"]) { display: flex; align-items: center; }
.profile-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.profile-overview h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
#profile-friend-list { display: flex; flex-wrap: wrap; align-items: start; gap: .5rem; }
#profile-friend-list a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .45rem; background: var(--control); border-radius: .5rem; overflow-wrap: anywhere; }
#profile-statistics p { margin: 0 0 .5rem; }
#profile-statistics dt { font-weight: 650; }
#profile-statistics dd { margin: 0 0 .45rem; color: var(--muted); font-size: .85rem; }

.game-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
}
.game-card-actions a, .rules-list a { display: inline-block; padding-block: .5rem; }
.game-library > a { margin-block: .75rem; }
#invite-rules { display: inline-block; margin-inline-end: .75rem; }
.rules-page {
    max-width: 44rem;
    margin-inline: auto;
    padding-block: clamp(1.5rem, 6vw, 4rem);
}
.rules-page h1 { overflow-wrap: anywhere; }
.rules-list {
    columns: 2 14rem;
    padding-inline-start: 1.25rem;
}
.rules-list li { break-inside: avoid; }
#rules-dialog { width: min(44rem, calc(100% - 2rem)); }
:is(.rules-page, #rules-dialog) :is(.guide-goal, ol) {
    line-height: 1.65;
    -webkit-user-select: text;
    user-select: text;
}
.guide-goal { font-weight: 650; }
:is(.rules-page, #rules-dialog) ol { padding-inline-start: 1.5rem; }
:is(.rules-page, #rules-dialog) ol li + li { margin-block-start: .7rem; }

.competition-controls { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-block: .75rem; }
.competition-controls label, #competition-form label { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
#competition-form { display: grid; gap: .75rem; }
#competition-form select, #competition-form input, .competition-controls select { max-width: 100%; }
#competition-options, #competition-format-fields { display: grid; gap: .5rem; }
#competition-options input[type="number"], #competition-shorter { width: 6rem; }
#competition-status, #ranking-status, #tournament-status { overflow-wrap: anywhere; }
.ranking-table { width: 100%; border-collapse: collapse; text-align: left; }
.ranking-table :is(td, th) { padding: .65rem .4rem; border-bottom: 1px solid var(--table-line); }
.ranking-table :is(td, th):last-child { text-align: right; }
.ranking-table td { font-variant-numeric: tabular-nums; }
.competition-player { display: inline-flex; min-width: 0; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
.competition-avatar { position: relative; display: inline-grid; flex: none; }
.competition-avatar img { width: 1.75rem; height: 1.75rem; }
.competition-roster { list-style: none; padding: 0; }
.competition-roster li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .35rem 0; }
.tournament-pairs { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tournament-pairs > h2 { grid-column: 1 / -1; }
.tournament-pair { display: grid; gap: .4rem; justify-items: start; padding: .8rem; overflow-wrap: anywhere; }
.tournament-pair :is(h3, p) { margin: 0; }
.tournament-pair label, #tournament-controls details label { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0; }
#tournament-back { width: fit-content; align-self: start; }
#match-history-list li { margin-block: .45rem; }
.profile-avatar[data-frame="champions-laurel"] { box-shadow: 0 0 0 2px #ecc362, 0 0 0 4px #9b6821; }
.profile-avatar[data-frame^="mastery-"] { box-shadow: 0 0 0 3px hsl(var(--cosmetic-hue, 212) 50% 56%); }
.badge-preview { display: grid; place-content: center; color: #b48b35; }
@media (max-width: 520px) {
    .tournament-pairs { grid-template-columns: minmax(0, 1fr); }
    .ranking-table :is(td, th) { padding-inline: .25rem; }
}
.table-app :is(#competition-format-fields, #competition-shorter-label, #room-privacy-controls,
    #ranking-game-label, #ranking-month-label, #ranking-friends-label, #tournament-back)[hidden] { display: none; }
.tournament-next { grid-column: 1 / -1; margin: 0; }
#competition-options label[hidden] { display: none; }

.home-play-actions, .home-discover { display: flex; flex-wrap: wrap; gap: .5rem; }
.home-discover { margin-block-start: .7rem; }
.home-discover .button { background: var(--table-panel); border-color: var(--table-line); }
.home-play-actions > .button, .home-actions #join-form > .button { min-height: 2.5rem; }
.ranking-intro { color: var(--muted); max-width: 58ch; }
#leaderboards-view { padding-block: clamp(1.3rem, 4vw, 3rem) 2rem; }
#leaderboards-view h1 { margin-block: 0 .6rem; font-size: clamp(2rem, 5vw, 3.25rem); }
.ranking-filters { padding: .8rem 1rem; align-items: end; }
.ranking-filters label { display: grid; gap: .3rem; flex: 1 1 10rem; min-width: 0; }
.ranking-filters label:has(input[type="checkbox"]) { display: flex; align-self: center; }
.ranking-filters select { width: 100%; }
#ranking-preference { padding-block: .65rem; border-block-end: 1px solid var(--table-line); }
#ranking-preference p { margin-block: .3rem 0; font-size: .875rem; }
#ranking-own:not(:empty), .competition-empty:not(:empty) { padding: .8rem 1rem; border-radius: .75rem; }
#ranking-own:not(:empty) { background: color-mix(in srgb, var(--accent) 12%, var(--table-panel)); }
.competition-empty:not(:empty) { border: 1px dashed var(--table-line); color: var(--muted); }
.ranking-results:not(:empty) { border: 1px solid var(--table-line); border-radius: .85rem; background: var(--table-panel); overflow: hidden; }
.ranking-table th { background: var(--control); font-size: .82rem; }
.ranking-table :is(td, th) { padding-inline: .9rem; }
.ranking-table tbody tr:last-child td { border-bottom: 0; }
#competition-dialog { width: min(31rem, calc(100% - 2rem)); }
#competition-form p { margin-block: 0; }
#competition-form label:has(select) { display: grid; gap: .3rem; }
#competition-form select { width: 100%; }
#competition-form .competition-controls { margin-block: .15rem 0; }
#competition-status:empty, #ranking-status:empty, #ranking-own:empty, #ranking-explanation:empty,
#match-history-status:empty { display: none; }
#tournament-room { padding-block-end: 1.5rem; }
#tournament-status { color: var(--muted); }
.tournament-summary { padding: .85rem 1rem; }
.tournament-summary:empty { display: none; }
.tournament-summary h2, .tournament-pairs > h2 { margin-block: 0 .35rem; font-size: 1.2rem; }
.tournament-summary ul { margin-block: 0; }
.tournament-summary li + li { border-top: 1px solid var(--table-line); }
.tournament-summary li > :last-child { margin-inline-start: auto; font-size: .85rem; }
.tournament-pairs { grid-template-columns: minmax(0, 1fr); margin-block: 1rem; }
.tournament-round { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.tournament-round-title { grid-column: 1 / -1; margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }
.tournament-pair-heading, .match-history-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .65rem; width: 100%; }
.tournament-pair-heading h4 { margin: 0; }
.match-status { border-radius: 999px; background: var(--control); padding: .16rem .5rem; font-size: .75rem; font-weight: 650; }
.match-status[data-status="playing"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--table-panel)); }
.match-status[data-status="paused"] { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--table-panel)); }
.match-result { font-weight: 650; }
#match-history-list { padding: 0; list-style: none; }
#match-history-list li { padding: .55rem 0; border-block-start: 1px solid var(--table-line); }
#match-history-list p { margin: .2rem 0 0; font-size: .85rem; overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .home-play-actions, .home-discover { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-actions { gap: .5rem; }
    .home-actions #join-form { padding-block-start: .5rem; }
    .ranking-filters { gap: .65rem; padding: .7rem; }
    .ranking-filters label { flex-basis: 100%; }
    .ranking-filters select, #competition-form :is(select, input[type="number"]) { font-size: 1rem; }
    .ranking-table :is(td, th) { padding-inline: .55rem; }
    .tournament-round { grid-template-columns: minmax(0, 1fr); }
}

#cosmetic-testing-panel { padding: .85rem 1rem; margin-block: .8rem; }
#cosmetic-testing-panel label { display: flex; gap: .45rem; align-items: center; font-weight: 650; }
#cosmetic-testing-panel p { margin: .35rem 0 0; font-size: .875rem; }
#standard-access-slot:empty { display: none; }
#tournament-controls > p { flex-basis: 100%; margin-block: 0 .2rem; color: var(--muted); }
#tournament-access-slot .competition-controls { margin-block: .8rem; }

.game-library .game-card { position: relative; }
.table-app .game-card .game-card-help {
    position: absolute; inset: .55rem .55rem auto auto;
    width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%;
    color: var(--muted); background: transparent; border-color: var(--table-line);
}
.table-app .game-card .game-card-help:is(:hover, :focus-visible) { color: var(--accent); background: var(--control); }
#competition-dialog { width: min(43rem, calc(100% - 2rem)); }
.game-picker { display: grid; gap: .8rem; max-height: min(36dvh, 23rem); overflow-y: auto; padding: .2rem .3rem .3rem; }
.game-picker-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.game-picker-group legend { color: var(--muted); font-size: .8rem; font-weight: 650; margin-bottom: .35rem; }
.game-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.table-app dialog .game-picker-card {
    min-width: 0; min-height: 3.15rem; justify-content: flex-start; text-align: start; gap: .6rem;
    border-color: var(--table-line); background: var(--table-panel); overflow-wrap: anywhere;
}
.game-picker-card small { display: block; color: var(--muted); margin-top: .2rem; font-weight: 450; }
.game-picker-icon { display: grid; flex: none; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: .45rem; background: var(--control); }
.table-app dialog .game-picker-card[aria-pressed="true"], .table-app .setting-choices button[aria-pressed="true"] {
    color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--table-panel));
}
:is(#room-options, #competition-options) .game-option {
    box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    min-width: 0; padding: .65rem .75rem; margin: 0;
    border: 1px solid var(--table-line); border-radius: .65rem;
}
:is(#room-options, #competition-options) .game-option[hidden] { display: none; }
.game-option legend { font-size: .85rem; font-weight: 600; padding-inline: .2rem; }
.game-option > span:first-child { font-weight: 600; }
.game-option input[type="range"] { flex: 1 1 6rem; min-width: 0; accent-color: var(--accent); }
.game-option output { min-width: 2ch; text-align: end; font-variant-numeric: tabular-nums; }
.game-option input[role="switch"] { margin-inline-start: auto; }
.table-app input[role="switch"] {
    appearance: none; -webkit-appearance: none; box-sizing: border-box; flex: none;
    display: inline-grid; align-items: center; width: 2.4rem; height: 1.35rem;
    vertical-align: middle; border: 1px solid var(--table-line); border-radius: 1rem;
    background: var(--control); cursor: pointer;
}
.table-app input[role="switch"]::after {
    content: ''; width: .9rem; height: .9rem; margin-inline-start: .17rem;
    border-radius: 50%; background: var(--muted);
}
.table-app input[role="switch"]:checked { background: var(--primary); border-color: var(--primary); }
.table-app input[role="switch"]:checked::after { transform: translateX(1.03rem); background: white; }
.table-app input[role="switch"]:disabled { opacity: .6; cursor: default; }
.table-app input[role="switch"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (forced-colors: active) {
    .table-app input[role="switch"] { appearance: auto; -webkit-appearance: auto; }
    .table-app input[role="switch"]::after { content: none; }
}

.setting-choices { display: flex; flex-wrap: wrap; gap: .35rem; }
.table-app .setting-choices button { min-width: 2.45rem; padding: .4rem .65rem; border: 1px solid var(--table-line); border-radius: .45rem; background: var(--control); color: var(--ink); font: inherit; }
#competition-options h3 { margin: .15rem 0; font-size: .95rem; }
#room-game-picker { margin-block-end: .5rem; }
#return-to-room[hidden], #room-game-picker[hidden] { display: none; }
#cosmetic-filter-status:empty { display: none; }
@media (max-width: 420px) { .game-picker-grid { grid-template-columns: minmax(0, 1fr); } }
#room-access-label { border: 0; padding: 0; margin: 0; min-width: 0; }
#room-access-label legend { color: var(--muted); font-size: .85rem; margin-block-end: .3rem; }
#room-access-label[hidden], #competition-rematches-label[hidden] { display: none; }
.profile-avatar[data-frame="champions-crown"] { box-shadow: 0 0 0 2px #ffe29b, 0 0 0 4px #a66a1e, 0 0 8px #f6bd5570; }
.profile-avatar[data-frame^="mastery-"][data-frame$="-5"] { box-shadow: 0 0 0 2px #f4d59a, 0 0 0 4px hsl(var(--cosmetic-hue, 212) 55% 49%); }
:is(.badge-preview, .profile-badge)[data-badge^="mastery-"] {
    background: hsl(var(--cosmetic-hue, 212) 48% 29%);
    color: #ffe3a7;
    border: 1px solid hsl(var(--cosmetic-hue, 212) 40% 55%);
}
.profile-badge { display: inline-flex; border-radius: 999px; padding: .25rem .6rem; font-weight: 650; font-size: .85rem; }
.table-app .game-card .game-card-trophy {
    position: absolute; inset: .55rem 3rem auto auto;
    width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%;
    background: transparent; border-color: var(--table-line); font-size: .82rem;
}
.table-app .game-card .game-card-trophy:is(:hover, :focus-visible) { background: var(--control); }
.game-library .game-meta {
    min-block-size: 2rem;
    padding-inline-end: 4.5rem;
    align-content: start;
}
#game-achievements-dialog { width: min(40rem, calc(100% - 2rem)); }
.game-achievements-heading { display: flex; align-items: center; gap: .75rem; }
#game-achievements-title { margin: 0; }
#game-achievements-icon, .game-reward-icon {
    display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem;
    border-radius: .6rem; color: var(--accent); background: var(--control);
}
#game-achievements-status:empty { display: none; }
#game-achievements-list { list-style: none; padding: 0; margin: 1rem 0; }
#game-achievements-list li {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: .65rem; padding: .6rem .25rem;
    border-block-end: 1px solid var(--table-line);
}
.game-reward-copy { display: grid; min-width: 0; overflow-wrap: anywhere; }
.game-reward-copy span { font-size: .85rem; }
.game-reward-progress { display: grid; gap: .2rem; justify-items: end; color: var(--muted); font-size: .75rem; }
.game-reward-progress progress { width: clamp(2.5rem, 12vw, 5rem); height: .35rem; accent-color: var(--accent); }
#game-achievements-list .earned .game-reward-progress { color: var(--accent); font-weight: 650; }
.game-achievements-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: .5rem; }
.game-achievements-actions a[hidden] { display: none; }
#profile-achievements > section + section { margin-block-start: 1.6rem; }
#profile-achievements h2 { font-size: 1.1rem; }
.card-full-preview { width: 8.5rem; height: 12rem; }
.card-full-preview .card { border-radius: .65rem; box-shadow: var(--shadow); }
#cosmetic-filter-status:empty { display: none; }

.lobby-grid { align-items: start; }
.lobby-game-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .6rem 1rem; }
.lobby-game-field[hidden] { display: none; }
#lobby-game-label { padding-block: .55rem; font-weight: 600; font-size: .875rem; }
#lobby-game-summary {
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: .6rem;
    padding: .5rem .7rem; border: 1px solid var(--table-line); border-radius: .55rem;
    background: var(--control); font-size: .875rem; font-weight: 600; cursor: pointer;
}
#lobby-game-summary::-webkit-details-marker { display: none; }
#lobby-game-summary::after {
    content: ''; flex: none; width: .4rem; height: .4rem; margin-inline: .2rem;
    border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
#lobby-game-disclosure[open] #lobby-game-summary::after { transform: rotate(225deg); }
#lobby-game-picker { margin-top: .4rem; padding: .5rem; border: 1px solid var(--table-line); border-radius: .55rem; }
#lobby-game-picker .game-picker-grid { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
.table-app #lobby-game-picker .game-picker-card { justify-content: start; text-align: start; min-width: 0; background: transparent; }
.table-app #lobby-game-picker .game-picker-card:is(:hover, [aria-pressed="true"]) { background: var(--control); }
.table-app #lobby-game-picker .game-picker-card[aria-pressed="true"] { border-color: var(--accent); }
#lobby-game-picker .game-picker-card small { display: inline; margin-inline-start: .4rem; }
#room-options:not(:empty) { border-block-start: 1px solid var(--table-line); gap: 0; margin-block-start: .45rem; }
#room-options .game-option { justify-content: space-between; border: 0; border-radius: 0; padding: .55rem 0; }
#room-options .game-option + .game-option { border-block-start: 1px solid var(--table-line); }
#room-options .setting-choices { gap: .2rem; padding: .18rem; border-radius: .55rem; background: var(--control); }
#room-options .setting-choices button { background: transparent; border-color: transparent; }
#room-options .setting-choices button[aria-pressed="true"] { background: var(--table-panel); border-color: var(--table-line); }
.table-app :is(a.room-player-name, #tournament-room .competition-player a) {
    color: var(--ink); text-decoration: none; font-weight: 600;
}
.table-app :is(a.room-player-name, #tournament-room .competition-player a):is(:hover, :focus-visible) { text-decoration: underline; }
#player-preview { width: min(20rem, calc(100% - 2rem)); }
.player-preview-heading { display: flex; gap: .75rem; align-items: center; overflow-wrap: anywhere; }
#player-preview .player-preview-heading h2 { margin: 0; min-width: 0; }
#player-preview-avatar { width: 2.5rem; height: 2.5rem; flex: none; }

.table-app #table-details { position: relative; z-index: 2; }
.table-app #table-details summary { cursor: pointer; color: var(--ink); }
.table-app #table-details .room-details-content { max-inline-size: min(22rem, calc(100vw - 2rem)); }
#room-chat-panel {
    display: grid;
    grid-template-rows: auto auto minmax(3rem, 1fr) auto;
    min-width: 0;
    min-height: 0;
    padding: .75rem;
}
#room-chat-panel[hidden], #room-chat-form[hidden] { display: none; }
.room-chat-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }
.room-chat-heading h2 { margin: 0; font-size: 1rem; }
#room-chat-status { margin: .35rem 0 0; font-size: .8rem; }
#room-chat-status:empty { margin: 0; }
#room-chat-history { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0; margin: .5rem 0; list-style: none; }
#room-chat-history li { padding: .35rem 0; border-block-start: 1px solid var(--table-line); }
#room-chat-history p { margin: .15rem 0; overflow-wrap: anywhere; white-space: pre-wrap; }
#room-chat-history .button { font-size: .7rem; padding: .2rem .4rem; }
#room-chat-form { display: flex; gap: .35rem; }
#room-chat-form input { flex: 1; width: 0; }
#room-view:has(> #game-mount[hidden]) #room-chat-panel { height: 15rem; margin-block: .75rem; }
@media (min-width: 900px) {
    #room-view:not([hidden]):has(> #room-chat-panel:not([hidden])) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(12rem, 17vw, 19rem);
        column-gap: .75rem;
    }
    #room-view:has(> #room-chat-panel:not([hidden])) > :not(#room-chat-panel) { grid-column: 1; }
    #room-view:has(> #room-chat-panel:not([hidden])) > #room-header { grid-column: 1 / -1; }
    #room-chat-panel { grid-column: 2; grid-row: 3; }
    #room-view:has(> #game-mount[hidden]) #room-chat-panel { grid-row: 2 / span 4; }
}
@media (max-width: 899px) {
    html:has(#room-view:not([hidden]) > #room-chat-panel:not([hidden])) { overflow: auto; }
    body.table-app:has(#room-view:not([hidden]) > #game-mount:not([hidden])):has(#room-chat-panel:not([hidden])) {
        display: block; height: auto;
    }
    #room-view:has(> #room-chat-panel:not([hidden])) > #game-mount:not([hidden]) { min-height: 60dvh; }
    #room-view:has(> #game-mount:not([hidden])) > #room-chat-panel { grid-row: 5; height: 13rem; }
    #room-view:has(> #room-chat-panel:not([hidden])) > #game-result { grid-row: 4; }
}


.cosmetic-locker {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) minmax(10rem, 15rem);
    align-items: start;
    gap: 1rem;
    padding-block: 1rem 2rem;
}
#cosmetic-types { display: grid; gap: .35rem; }
.table-app #cosmetic-types .button { justify-content: start; white-space: nowrap; }
.table-app #cosmetic-types [aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.locker-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .35rem .65rem; margin-bottom: .6rem; }
.locker-toolbar h2 { margin: 0; font-size: 1.1rem; }
.locker-toolbar label { white-space: nowrap; }
.locker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.25rem), 1fr)); gap: .45rem; }
.cosmetic-locker [data-rarity="common"] { --rarity: var(--muted); }
.cosmetic-locker [data-rarity="uncommon"] { --rarity: light-dark(#237443, #7ad7a0); }
.cosmetic-locker [data-rarity="rare"] { --rarity: var(--accent); }
.cosmetic-locker [data-rarity="legendary"] { --rarity: light-dark(#975014, #ffb76b); }
.locker-tile {
    position: relative; display: grid; grid-template-rows: 2rem 1fr 1em; place-items: center;
    gap: .2rem; min-width: 0; height: 6.6rem; padding: .5rem .25rem;
    border: 1px solid var(--table-line); border-block-end: 2px solid var(--rarity);
    border-radius: .55rem; background: var(--table-panel); color: var(--ink); cursor: pointer;
}
.locker-tile[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.locker-tile strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: .75rem; line-height: 1.1; }
.locker-tile small { color: var(--muted); font-size: .65rem; }
.board-piece-preview { display: grid; grid-template-columns: repeat(2, 1.65rem); justify-items: center; }
.board-piece-preview .board-piece { font-size: 1.45rem; }
.dice-set-preview { display: inline-flex; align-items: center; gap: .5rem; }
.cosmetic-preview-locked { filter: grayscale(1); }
#locker-preview { position: sticky; top: 4rem; padding: .75rem; scroll-margin-top: 4rem; }
#locker-preview h3 { margin: .25rem 0 .45rem; overflow-wrap: anywhere; }
#locker-preview p { color: var(--muted); font-size: .8rem; }
.locker-styles { display: flex; flex-wrap: wrap; gap: .35rem; }
.table-app .locker-styles [aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.locker-rarity { color: var(--rarity); text-transform: capitalize; font-size: .75rem; font-weight: 650; }
.locker-art {
    display: grid; place-items: center; min-height: 13rem; margin-bottom: .65rem; border-radius: .5rem;
    background: color-mix(in srgb, var(--rarity) 12%, var(--canvas));
}
.locker-art :is(.theme-preview:not(.chess-theme-preview), .frame-preview) { width: 4rem; height: 4rem; font-size: 2rem; }
.locker-art .ur-token { width: 1.65rem; height: 1.65rem; }
.locker-art .board-die { width: 3.3rem; }
.frame-preview img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.chess-theme-preview {
    display: grid; width: 8.5rem; height: auto; aspect-ratio: 1; container-type: inline-size;
    grid-template-columns: repeat(var(--preview-columns), minmax(0, 1fr));
    grid-template-rows: repeat(var(--preview-rows), minmax(0, 1fr));
    aspect-ratio: var(--preview-columns) / var(--preview-rows);
    overflow: hidden; border: 2px solid var(--theme-trim, #42332b);
}
.chess-theme-preview .board-cell { border-radius: 0; padding: 0; cursor: inherit; }
.chess-theme-preview .board-piece { font-size: 10cqw; }
@media (max-width: 700px) {
    .cosmetic-locker { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
    #cosmetic-types { display: flex; overflow-x: auto; padding: .2rem; }
    #locker-preview { grid-row: 2; position: static; }
    .locker-art { min-height: 5rem; }
    .locker-art { padding-block: .65rem; }
}

#lobby-game-picker details > summary {
    padding: .4rem .45rem;
    border-radius: .35rem;
    color: var(--ink);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}
#lobby-game-picker details > summary:hover { background: var(--control); }
#lobby-game-picker details[open] > summary { margin-bottom: .25rem; }

/* Keep the web Klondike controls outside the felt so the cards have their own space. */
#solitaire-toolbar:empty { display: none; }
#room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) {
    gap: .5rem;
    padding-block-end: .5rem;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}
#room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) > :is(#room-header, #solitaire-toolbar, #game-result) {
    border: 1px solid var(--table-line);
    border-radius: .75rem;
    background: var(--table-panel);
    padding: .65rem .75rem;
}
#room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) #room-title { font-size: 1.2rem; }
#room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) #game-result-heading {
    display: block;
    margin: 0;
    font-size: 1.05rem;
}
#room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) #game-result {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    grid-row: 4;
}
#room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) #standard-access-slot:not(:has(> :not([hidden]))) {
    display: none;
}
.table-app #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) :is(.room-tools button, #game-result button, #solitaire-toolbar button, #table-details) {
    font-size: .9rem;
}
.table-app #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) :is(.room-tools button, #game-result button, #solitaire-toolbar button) {
    min-height: 2.25rem;
    padding: .4em .7em;
}
#solitaire-toolbar [data-message] { margin: 0; }
#solitaire-toolbar .solitaire-metrics { font-size: .95rem; }
#solitaire-toolbar .solitaire-controls { justify-content: start; }

@media (min-width: 900px) and (min-height: 560px) {
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) {
        grid-template-columns: clamp(13rem, 18vw, 17rem) minmax(0, 1fr);
        grid-template-rows: auto auto auto minmax(0, 1fr);
        gap: .75rem;
        padding-block: .75rem;
    }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar):has(> #room-chat-panel:not([hidden])) {
        grid-template-columns: clamp(13rem, 18vw, 17rem) minmax(0, 1fr) clamp(12rem, 17vw, 19rem);
    }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) > #game-mount {
        grid-area: 1 / 2 / -1 / 3;
    }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) > #room-chat-panel {
        grid-area: 1 / 3 / -1 / 4;
    }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) > :is(#room-header, #solitaire-toolbar, #game-result) {
        grid-column: 1;
        align-items: stretch;
        align-content: start;
        padding: .85rem;
    }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) > #room-header { grid-row: 1; }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) > #solitaire-toolbar { grid-row: 2; }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) > #game-result { grid-row: 3; }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) :is(#room-header, #game-result, .solitaire-status) {
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
    }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) #room-title { font-size: 1.35rem; }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) #table-details { flex-basis: 100%; }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) .room-details-content {
        inset-block-start: 0;
        inset-inline-start: calc(100% + .5rem);
    }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) #game-result > a { align-self: start; }
}

@media (max-width: 899px), (max-height: 559px) {
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) .solitaire-status {
        justify-content: start;
    }
    #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) .solitaire-status [data-message] {
        flex-basis: 100%;
        order: 1;
    }
    .table-app #room-view:has(> #game-mount:not([hidden]) .has-room-toolbar) #solitaire-toolbar button {
        min-height: 2.75rem;
    }
}

.site-policy-links { margin-block: 1.5rem 1rem; }
#game-vote { margin-block: .75rem; }
#public-tables { width: min(44rem, calc(100% - 2rem)); }
#tables-results { max-block-size: 45dvh; overflow-y: auto; }
#tables-results p { overflow-wrap: anywhere; }
#reconnect:not([hidden]) {
    position: fixed;
    z-index: 9;
    inset-inline-end: max(1rem, env(safe-area-inset-right));
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
    min-height: 2.75rem;
}

.replay-dialog { width: min(28rem, calc(100vw - 2rem)); }
.replay-board { display: grid; margin-block: .75rem; }
.replay-board [role="row"] { display: grid; grid-template-columns: repeat(var(--replay-columns), minmax(0, 1fr)); }
.replay-cell {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: #b1c6bb;
    color: #182b27;
    font-size: clamp(1rem, 5vmin, 1.8rem);
}
.replay-cell.dark { background: #688c7d; }
.replay-cell.ivory { color: #fff; text-shadow: 0 0 3px #17211d; }

html[data-appearance="light"] { color-scheme: light; }
html[data-appearance="dark"] { color-scheme: dark; }
html[data-appearance="light"] .table-app {
    color-scheme: light;
    --canvas: #f5f5f7;
    --table-panel: #fff;
    --ink: #1d1d1f;
    --muted: #616167;
    --table-line: #d9d9df;
    --control: #e9e9ee;
    --accent: #0066cc;
    --primary: #0071e3;
    --danger: #ad252b;
    --party-surface: #ece9fb;
}
html[data-appearance="dark"] .table-app {
    color-scheme: dark;
    --canvas: #18181b;
    --table-panel: #252529;
    --ink: #f5f5f7;
    --muted: #b6b6bf;
    --table-line: #45454d;
    --control: #35353b;
    --accent: #84bdff;
    --primary: #0064ca;
    --danger: #ffabae;
    --party-surface: #37304f;
}
html[data-suits="accessible"] .card.red { color: #a63600; }
html[data-suits="accessible"] .card.blue { color: #005ca8; }
html[data-suits="accessible"] .card.green { color: #6a4900; }
html[data-motion="reduced"] :is(.card, .board-piece, .dice-tumble, .party-answer, .party-winner, .game-card) {
    animation: none !important;
    transition: none !important;
}
.suit-reference { margin-block: .7rem; }
.suit-reference ul { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; list-style: none; }
.table-app :is(.header-inner, .page) {
    padding-inline-start: max(clamp(.5rem, 2vw, 1.5rem), env(safe-area-inset-left));
    padding-inline-end: max(clamp(.5rem, 2vw, 1.5rem), env(safe-area-inset-right));
}

.tutorial-dialog { width: min(33rem, calc(100vw - 2rem)); }
.tutorial-choices { display: flex; gap: .5rem; flex-wrap: wrap; }
.tutorial-choices button { min-height: 2.75rem; }
.tutorial-choices [aria-pressed="true"] { outline: 2px solid var(--accent); }

.tutorial-board { block-size: min(42dvh, 24rem); min-block-size: 10rem; overflow: auto; }
.tutorial-highlight { outline: 3px solid var(--accent); outline-offset: -3px; }

.profile-avatar[data-frame="first-light"] { box-shadow: 0 0 0 2px #ffd583, 0 0 0 4px #9f5732; }
.profile-avatar[data-frame="game-night-regular"] { box-shadow: 0 0 0 2px #7bd2ed, 0 0 0 4px #305679; }
[data-card-back="daily-dealer"] .card.flipped {
    background-color: #144b3b;
    background-image: repeating-linear-gradient(45deg, transparent 0 9px, #84c29e80 9px 11px);
    border-color: #bfe5c4;
}

#play-navigation { position: relative; }
#play-navigation .avatar-dropdown { inset-inline-start: 0; inset-inline-end: auto; }
#play-navigation .avatar-dropdown > * { display: block; }
@media (pointer: coarse) {
    #room-header .room-tools > .button, #game-result button, #room-chat-form button {
        min-block-size: 2.75rem;
    }
    #room-chat-form input { font-size: 16px; }
    #room-chat-panel { scroll-margin-block-end: 1rem; }
}

#account-view { max-inline-size: 56rem; margin-inline: auto; }
#account-view > form.account-card { display: grid; gap: .75rem; max-inline-size: 32rem; margin-block-end: 1rem; }
#account-view .account-card label { display: grid; gap: .3rem; }
#account-view :is(input:not([type="range"], [type="checkbox"]), button) { min-block-size: 2.75rem; }
#account-view .account-preferences { margin-block-start: 1rem; }
#account-status:empty { display: none; }