/* Spec 154: the controls between the board and the cardboard. Choices are segmented strips with shared
   lines, fields and counters are square, statuses are small token shapes with plain text, metric strips
   share their lines, icons stand without bubbles and bars are score tracks. Loaded after tabletop-board.css
   only with the tabletop look. */

/* 1. Segmented controls: shared lines drawn by each cell (spec 161: no fill behind a wrapped row), the chosen
   cell framed in the accent. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-tonight-chips, .news-lang-group, .news-type-group, .ranking-depth, .club-kind, .pricing-period, .lang-selector, .auth-lang, .gl-lang,
    .planner-mobile-section-nav) {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 1px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Spec 162: the game page's section strip stays a phone-only control, as in the app. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-mobile-section-nav {
    display: none;
}

@media (max-width: 768px) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-mobile-section-nav {
        display: flex;
        justify-content: center;
    }
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-tonight-chip, .news-lang-btn, .news-type-btn, .ranking-depth-chip, .ranking-mode-chip, .club-kind-btn, .pricing-period-btn, .lang-btn, .auth-lang-link, .gl-lang > a,
    .planner-mobile-section-nav-btn) {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--tt-line);
    text-shadow: none;
    transform: none;
    margin: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-tonight-chip, .news-lang-btn, .news-type-btn, .ranking-depth-chip, .ranking-mode-chip, .club-kind-btn, .pricing-period-btn, .lang-btn, .auth-lang-link, .gl-lang > a,
    .planner-mobile-section-nav-btn):hover {
    color: var(--tt-accent);
    transform: none;
    box-shadow: 0 0 0 1px var(--tt-line);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-tonight-chip, .news-lang-btn, .news-type-btn, .ranking-depth-chip, .ranking-mode-chip, .club-kind-btn, .pricing-period-btn, .lang-btn, .auth-lang-link, .gl-lang > a,
    .planner-mobile-section-nav-btn):is(.active, [aria-pressed="true"], .lang-btn-active, .is-active) {
    background: var(--tt-accent-soft);
    color: var(--tt-ink);
    box-shadow: 0 0 0 2px var(--tt-accent);
    position: relative;
    z-index: 1;
}

/* 2. Toggles that stand alone: square, the same "on" look. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-source-chip, .news-sources-toggle, .shelf-btn, .ranking-history-btn, .pdf-reader-tool) {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-source-chip, .news-sources-toggle, .shelf-btn, .ranking-history-btn, .pdf-reader-tool):hover {
    border-color: var(--tt-accent);
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-source-chip, .shelf-btn, .ranking-history-btn, .pdf-reader-tool):is(.active, .shelf-btn-active, [aria-pressed="true"]) {
    background: var(--tt-accent-soft);
    border-color: var(--tt-accent);
    box-shadow: inset 0 0 0 2px var(--tt-accent);
}

/* Spec 197: "Replace a passage" while picking - the piece lies pressed down and framed in the accent (the classic
   orange fill it had never showed under the piece). */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pdf-override-replace-btn[aria-pressed="true"] {
    transform: translateY(3px);
    box-shadow: inset 0 0 0 2px var(--tt-accent);
}

/* 3. Tabs: a line on top for the open one, no cardboard edge. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-pager-btn.ranking-tab-btn {
    background: transparent;
    color: var(--tt-muted);
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-pager-btn.ranking-tab-btn.active {
    background: var(--tt-page);
    color: var(--tt-ink);
    border-color: var(--tt-line);
    border-bottom-color: transparent;
    box-shadow: inset 0 3px 0 var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-pager-btn.ranking-tab-btn:active {
    transform: none;
}

/* 4. Fields: square, a heavier line below, the accent on focus. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.game-filter-input, .game-filter-select, .game-search-input, .game-sort-select, .news-search-input,
    .upload-input, .upload-file-kind, .pdf-find-input, .news-custom-input, .news-custom-select, .form-input, .dice-form-input, .home-invite-form input) {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    border-bottom: 2px solid var(--tt-muted);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.game-filter-input, .game-filter-select, .game-search-input, .game-sort-select, .news-search-input,
    .upload-input, .upload-file-kind, .pdf-find-input, .news-custom-input, .news-custom-select, .form-input, .dice-form-input, .home-invite-form input):focus {
    outline: none;
    border-color: var(--tt-accent);
    box-shadow: inset 0 0 0 1px var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.game-filter-input, .game-search-input, .news-search-input, .upload-input, .pdf-find-input, .news-custom-input, .form-input, .dice-form-input,
    .home-invite-form input)::placeholder {
    color: var(--tt-muted);
}

/* 5. Counters: two flat buttons and the number, one frame with shared lines. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-tonight-stepper, .dice-pick-controls) {
    display: inline-flex;
    align-items: stretch;
    gap: 1px;
    background: var(--tt-line);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-tonight-stepper, .dice-pick-controls) > * {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-tonight-stepper output, .dice-pick-count) {
    display: inline-grid;
    place-items: center;
    min-width: 2.5rem;
    font-family: var(--tt-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-tonight-stepper button, .dice-pick-btn):hover:not(:disabled) {
    color: var(--tt-accent);
}

/* 6. Metric strips: the facts of a game share their lines like a score track. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.game-card-badges, .planner-game-facts) {
    gap: 1px;
    background: var(--tt-line);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    padding: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.game-card-badge, .planner-fact) {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex: 1 1 auto;
    justify-content: center;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card-badge.game-card-badge-empty {
    color: var(--tt-muted);
}

/* 7. Markers: a token shape before plain text. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.friends-status--confirmed, .news-card-new-badge, .ranking-history-selected-badge,
    .friends-status--pending, .friends-status--linked) {
    --tt-mark: var(--tt-muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: var(--tt-ink);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.friends-status--confirmed, .news-card-new-badge, .ranking-history-selected-badge,
    .friends-status--pending, .friends-status--linked)::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: none;
    background: var(--tt-mark);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .friends-status--confirmed {
    --tt-mark: var(--tt-ok);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-card-new-badge, .ranking-history-selected-badge) {
    --tt-mark: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-card-new-badge, .ranking-history-selected-badge)::before {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.friends-status--pending, .friends-status--linked)::before {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--tt-mark);
}

/* Statuses with their own icon lose only the pill. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-invite-status-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    font-size: 15px;
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-invite-status-item.planner-invite-status-accepted {
    color: var(--tt-ok);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-invite-status-item.planner-invite-status-declined {
    color: var(--tt-danger);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-section-title {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    color: var(--tt-ink);
    font-family: var(--tt-font-text);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

/* The Pro mark: the gold token of spec 168 instead of the inline crown. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .premium-crown {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
    background: var(--tt-pro) center / contain no-repeat;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.premium-crown, .nav-premium-crown) svg {
    display: none;
}

/* 8. Plain labels: no pill, numbers in the heading face. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-keyword, .home-tonight-reason, .planner-section-count, .planner-vote-count,
    .planner-play-pill) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-section-count, .planner-vote-count) {
    font-family: var(--tt-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-keyword::before {
    content: none;
}

/* Spec 159 rule 11: a readable meeting - the title in the heading face, names in ink, the status as the
   icon only, the proposals as rows with a share bar. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-list > li > strong {
    font-family: var(--tt-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-list > li > .planner-small {
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-invite-status-item .planner-invite-status-email {
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-meeting-vote-title {
    font-family: var(--tt-font-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tt-ink);
}


html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-meeting-vote-list {
    flex: 1 1 auto;
    gap: 0;
    min-width: 0;
    border-top: 1px solid var(--tt-line);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-meeting-vote-list .planner-vote-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(60px, 35%) 2.5em;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
    color: var(--tt-ink);
    font-size: 14px;
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-meeting-vote-list .planner-vote-btn:is(:hover, :active) {
    background: var(--tt-accent-soft);
    box-shadow: none;
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-meeting-vote-list .planner-vote-btn::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    height: 6px;
    background: linear-gradient(90deg, var(--tt-accent) var(--tt-share, 0%), var(--tt-field) 0);
    box-shadow: inset 0 0 0 1px var(--tt-line);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-meeting-vote-list .planner-vote-name {
    grid-column: 1;
    grid-row: 1;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-meeting-vote-list .planner-vote-count {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    font-size: 16px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-toolbar {
    margin-left: 0;
    margin-right: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-card-type, .news-card-source-name, .game-card-chip, .news-source-chip-type) {
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 9. Icons stand on their own, in the accent, without a bubble. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-dash-icon, .planner-overview-head-icon, .planner-section-icon, .planner-insight-icon,
    .planner-fact-icon, .planner-empty-icon, .friends-add-toggle-icon, .planner-invite-status-icon) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-invite-status-item .planner-invite-status-icon {
    color: inherit;
}

/* 10. Bars are score tracks: ticks every tenth, a square fill. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.gs-bar-track, .ranking-progress) {
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--tt-line) calc(10% - 1px) 10%),
        var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.gs-bar-fill, .ranking-progress > span) {
    background: var(--tt-accent);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .ranking-select-check {
    border-radius: 0;
    background: var(--tt-accent);
    color: var(--tt-on-accent);
    box-shadow: none;
}

/* 11. The "Add friend" disclosure is a flat row of its section. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .friends-add-toggle {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* 12. BGG and YouTube links are small secondary pieces. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-bgg-link {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    border-radius: 3px;
    box-shadow: 0 3px 0 var(--tt-edge);
    text-decoration: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-bgg-link:hover {
    border-color: var(--tt-accent);
    color: var(--tt-accent);
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-bgg-link:active {
    transform: translateY(3px);
    box-shadow: none;
}

@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-bgg-link {
        border-radius: 7px;
        corner-shape: bevel;
    }
}

/* Spec 166 rule 1: who comes and who does not reads at a glance. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-invite-status-item .planner-invite-status-icon {
    font-size: 16px;
    font-weight: 700;
}

/* 11. Spec 171: the dialogs' chips and switches are square board pieces, their boxes flat fields. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-player-chip {
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
    color: var(--tt-ink);
    font-weight: 700;
    padding: 5px 10px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-player-chip:hover {
    border-color: var(--tt-accent);
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-player-chip.active {
    background: var(--tt-accent-soft);
    border-color: var(--tt-accent);
    box-shadow: inset 0 0 0 1px var(--tt-accent);
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-players-pool, .planner-suggested-games-selected) {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-toggle-item {
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-toggle-indicator {
    border-radius: 0;
    background: var(--tt-line);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-toggle-indicator::after {
    border-radius: 0;
    box-shadow: none;
    background: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-toggle-checkbox:checked + .planner-toggle-indicator {
    background: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-toggle-checkbox:checked + .planner-toggle-indicator::after {
    background: var(--tt-on-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-emails-module, .planner-play-timer-panel) {
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-modal-v2 :is(.planner-modal-header, .planner-modal-actions) {
    background: var(--tt-side);
    border-color: var(--tt-line);
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-modal-title-icon, .planner-winner-btn) {
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-winner-btn.active {
    background: var(--tt-accent);
    border-color: var(--tt-accent);
    color: var(--tt-on-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-timeline-thumb,
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-timeline-row::before {
    border-radius: 0;
}

/* Spec 235: check chips of the BGG collection states (library filters, ranking picker); checked = the selected look. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* The ranking's toolbar buttons and the collection chips under them keep a row of air between them. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.ranking-selection-head + .game-filter-chips, .ranking-selection-head + [data-demo-panel] > .game-filter-chips) {
    margin-top: 0.85rem;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 32px;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--tt-line);
    border-radius: 0;
    background: var(--tt-field);
    color: var(--tt-ink);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-filter-chip {
        border-radius: 8px;
        corner-shape: bevel;
    }
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-filter-chip input {
    margin: 0;
    accent-color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-filter-chip:hover,
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-filter-chip:has(input:checked) {
    border-color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-filter-chip:has(input:checked) {
    background: var(--tt-accent-soft);
}

/* Spec 235: the chips take the whole row of the filter grid. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-filter-group:has(> .game-filter-chips) {
    grid-column: 1 / -1;
}

/* Spec 244 rule 8: the Monthly / Yearly switch above the plans, centred, with the saving under it. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pricing-period-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0 auto 1rem;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pricing-period-btn {
    padding: 8px 18px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pricing-period-note {
    margin: 0;
    font-size: 13px;
    color: var(--tt-muted);
}

/* Spec 268 rule 7: the EN / PL switch of the static pages stands on the site's own surface, so its chosen cell (a
   see-through tint) looks the same on any page colour, as a club page's. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .auth-lang {
    background: var(--tt-field);
}

/* Spec 278: every select's list in the site's colours - the field's surface, the ink, the chosen option a soft accent
   tone. Where the browser lets a select be styled whole (appearance: base-select), the hover and keyboard mark is the
   accent too instead of the system blue, and one chevron replaces the drawn arrows. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) select option {
    background: var(--tt-field);
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) select option:checked {
    background: color-mix(in srgb, var(--tt-accent) 28%, var(--tt-field));
    color: var(--tt-ink);
}

@supports (appearance: base-select) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) select:not([multiple]):not([size]),
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) select:not([multiple]):not([size]) {
        display: inline-flex;
        align-items: center;
        background-image: none;
        padding-right: 0.7rem;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) select::picker-icon {
        margin-left: auto;
        padding-left: 0.6rem;
        color: var(--tt-muted);
        transition: rotate 0.15s ease;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) select:open::picker-icon {
        rotate: 180deg;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) select::picker(select) {
        margin-top: 4px;
        padding: 4px 0;
        border: 1px solid var(--tt-line);
        border-radius: 0;
        background: var(--tt-field);
        color: var(--tt-ink);
        box-shadow: 0 3px 0 var(--tt-line);
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) select option {
        padding: 0.45rem 0.75rem;
        outline: none;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) select option:is(:hover, :focus-visible) {
        background: color-mix(in srgb, var(--tt-accent) 16%, var(--tt-field));
        color: var(--tt-ink);
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) select option:checked {
        font-weight: 700;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) select option::checkmark {
        color: var(--tt-accent);
    }
}