/* Spec 152: what you press or what floats above the page is a punched cardboard token - a bevel instead
   of a round corner, a hard edge instead of a blurred shadow, a press that moves it down by its edge.
   Loaded after tabletop.css only with the tabletop look. The :not(#tabletop) prefix outranks the
   ":not(#ui-surfaces)" and ".page:is(...)" rules of ui-states.css without !important. */

/* 1. Every piece: a small radius, no glow, no blur, the same motion. */
html.tabletop:not(#tabletop) :is(.home-cta, .game-card-btn, .game-pager-btn, .cookie-consent-btn, .dice-roll-btn, .dice-clear-btn,
    .dice-new-btn, .dice-pick-edit, .chat-send-btn, .news-settings-btn, .news-mobile-filters-toggle, .pdf-note-open-btn, .pdf-setup-open-btn,
    .pdf-override-open-btn, .pdf-override-replace-btn, .nav-theme-btn, .nav-logout-btn, .back-home-btn, .planner-vote-btn,
    .sidebar-toggle-btn, .chat-icon-btn, .news-action-btn, .game-edit-mini-btn, .fav-btn, .home-summary-close,
    .dice-panel-close, .nav-theme-icon-btn, .nav-logout-icon-btn, .upload-btn, .btn.btn-primary, .pricing-btn:not(.pricing-btn-secondary), .gl-btn-primary, .upload-input-file-btn, .btn.btn-secondary, .pricing-btn-secondary, .gl-btn-ghost, .upload-file-action-btn,
    .pdf-score-pad-btn, .pdf-dice-btn, .pdf-note-page-btn, .pdf-bgg-btn, .pdf-note-delete-btn, .news-custom-remove, .chat-history-new, .chat-history-delete-all,
    .chat-warning-btn, .chat-restore-btn) {
    border-radius: 3px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-decoration: none;
    transition: transform 0.07s ease, box-shadow 0.07s ease, border-color 0.12s ease, color 0.12s ease;
}

/* 2. Primary: the accent gradient on a dark orange edge. */
html.tabletop:not(#tabletop) :is(.home-cta-primary, .game-card-btn:not(.game-card-btn-secondary, .game-card-btn-danger),
    .cookie-consent-btn-primary, .dice-roll-btn, .chat-send-btn, .upload-btn, .btn.btn-primary, .pricing-btn:not(.pricing-btn-secondary), .gl-btn-primary, .chat-warning-btn) {
    background: linear-gradient(135deg, var(--tt-accent-from), var(--tt-accent-to));
    color: var(--tt-on-accent);
    border: 1px solid transparent;
    box-shadow: 0 3px 0 var(--tt-edge-strong);
    text-shadow: none;
}

/* 3. Secondary: a plain cardboard face on a dark edge. The log-out button joins them: it destroys nothing. */
html.tabletop:not(#tabletop) :is(.home-cta-secondary, .game-card-btn-secondary, .game-pager-btn, .cookie-consent-btn-secondary,
    .dice-clear-btn, .dice-new-btn, .dice-pick-edit, .news-settings-btn, .news-mobile-filters-toggle, .pdf-note-open-btn, .pdf-setup-open-btn,
    .pdf-override-open-btn, .pdf-override-replace-btn, .nav-theme-btn, .nav-logout-btn, .back-home-btn, .planner-vote-btn,
    .upload-input-file-btn, .btn.btn-secondary, .pricing-btn-secondary, .gl-btn-ghost, .upload-file-action-btn, .pdf-score-pad-btn, .pdf-dice-btn, .pdf-note-page-btn, .pdf-bgg-btn, .chat-history-new) {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    box-shadow: 0 3px 0 var(--tt-edge);
    text-shadow: none;
}

/* 4. Danger: filled for the confirming step, outlined for the first one. */
html.tabletop:not(#tabletop) :is(.game-card-btn.game-card-btn-danger, .dice-pick-edit.dice-pick-danger) {
    background: var(--tt-danger);
    color: #ffffff;
    border: 1px solid var(--tt-danger);
    box-shadow: 0 3px 0 var(--tt-danger-edge);
}

html.tabletop:not(#tabletop) :is(.game-card-btn.game-card-btn-secondary.is-danger, .pdf-note-delete-btn, .news-custom-remove, .chat-history-delete-all) {
    background: transparent;
    color: var(--tt-danger);
    border-color: var(--tt-danger);
    box-shadow: 0 3px 0 var(--tt-danger-edge);
}

/* 5. Quiet icon buttons: no frame until hover, square. */
html.tabletop:not(#tabletop) :is(.sidebar-toggle-btn, .chat-icon-btn, .news-action-btn, .game-edit-mini-btn, .fav-btn,
    .home-summary-close, .dice-panel-close, .cookie-consent-btn-link, .nav-theme-icon-btn, .nav-logout-icon-btn, .chat-restore-btn) {
    background: transparent;
    color: var(--tt-ink);
    border: 1px solid transparent;
    box-shadow: none;
}

/* Spec 231: the saved news item keeps the accent, so it is seen saved without filtering. */
html.tabletop:not(#tabletop) .news-action-btn.news-action-active {
    background: var(--tt-field);
    color: var(--tt-accent);
    border-color: var(--tt-accent);
}

/* The favourite and edit buttons sit on a cover: they keep a face so they stay readable on the picture. */
html.tabletop:not(#tabletop) :is(.fav-btn, .game-edit-mini-btn) {
    background: var(--tt-field);
    border-color: var(--tt-line);
}

/* 6. States. Hover: the frame takes the accent, nothing moves, scales or glows. */
html.tabletop:not(#tabletop) :is(.home-cta, .game-card-btn, .game-pager-btn, .cookie-consent-btn, .dice-roll-btn, .dice-clear-btn,
    .dice-new-btn, .dice-pick-edit, .chat-send-btn, .news-settings-btn, .news-mobile-filters-toggle, .pdf-note-open-btn, .pdf-setup-open-btn,
    .pdf-override-open-btn, .pdf-override-replace-btn, .nav-theme-btn, .nav-logout-btn, .back-home-btn, .planner-vote-btn,
    .sidebar-toggle-btn, .chat-icon-btn, .news-action-btn, .game-edit-mini-btn, .fav-btn, .home-summary-close,
    .dice-panel-close, .nav-theme-icon-btn, .nav-logout-icon-btn, .dice-fab, .upload-btn, .btn.btn-primary, .pricing-btn:not(.pricing-btn-secondary), .gl-btn-primary, .upload-input-file-btn, .btn.btn-secondary, .pricing-btn-secondary, .gl-btn-ghost,
    .upload-file-action-btn, .pdf-score-pad-btn, .pdf-dice-btn, .pdf-note-page-btn, .pdf-bgg-btn, .pdf-note-delete-btn, .news-custom-remove, .chat-history-new,
    .chat-history-delete-all, .chat-warning-btn, .chat-restore-btn):hover:not(:disabled) {
    transform: none;
    border-color: var(--tt-accent);
}

html.tabletop:not(#tabletop) :is(.home-cta-secondary, .game-card-btn-secondary:not(.is-danger), .game-pager-btn, .cookie-consent-btn-secondary,
    .dice-clear-btn, .dice-new-btn, .dice-pick-edit:not(.dice-pick-danger), .news-settings-btn, .news-mobile-filters-toggle, .pdf-note-open-btn, .pdf-setup-open-btn,
    .pdf-override-open-btn, .pdf-override-replace-btn, .nav-theme-btn, .nav-logout-btn, .back-home-btn, .planner-vote-btn,
    .sidebar-toggle-btn, .chat-icon-btn, .news-action-btn, .game-edit-mini-btn, .fav-btn, .home-summary-close,
    .dice-panel-close, .cookie-consent-btn-link, .nav-theme-icon-btn, .nav-logout-icon-btn, .upload-input-file-btn, .btn.btn-secondary, .pricing-btn-secondary, .gl-btn-ghost,
    .upload-file-action-btn, .pdf-score-pad-btn, .pdf-dice-btn, .pdf-note-page-btn, .pdf-bgg-btn, .chat-history-new,
    .chat-restore-btn):hover:not(:disabled) {
    color: var(--tt-accent);
}

html.tabletop:not(#tabletop) :is(.home-cta-primary, .game-card-btn:not(.game-card-btn-secondary, .game-card-btn-danger),
    .cookie-consent-btn-primary, .dice-roll-btn, .chat-send-btn, .dice-fab, .upload-btn, .btn.btn-primary, .pricing-btn:not(.pricing-btn-secondary), .gl-btn-primary, .chat-warning-btn):hover:not(:disabled) {
    border-color: transparent;
    filter: brightness(1.05);
}

/* Pressed: the piece goes down by its edge. */
html.tabletop:not(#tabletop) :is(.home-cta, .game-card-btn, .game-pager-btn, .cookie-consent-btn:not(.cookie-consent-btn-link),
    .dice-roll-btn, .dice-clear-btn, .dice-new-btn, .dice-pick-edit, .chat-send-btn, .news-settings-btn, .news-mobile-filters-toggle, .pdf-note-open-btn,
    .pdf-setup-open-btn, .pdf-override-open-btn, .pdf-override-replace-btn, .nav-theme-btn, .nav-logout-btn, .back-home-btn,
    .planner-vote-btn, .dice-fab, .upload-btn, .btn.btn-primary, .pricing-btn:not(.pricing-btn-secondary), .gl-btn-primary, .upload-input-file-btn, .btn.btn-secondary, .pricing-btn-secondary, .gl-btn-ghost, .upload-file-action-btn, .pdf-score-pad-btn, .pdf-dice-btn,
    .pdf-note-page-btn, .pdf-bgg-btn, .pdf-note-delete-btn, .news-custom-remove, .chat-history-new, .chat-history-delete-all, .chat-warning-btn):active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: none;
    filter: none;
}

html.tabletop:not(#tabletop) :is(.home-cta, .game-card-btn, .game-pager-btn, .cookie-consent-btn, .dice-roll-btn, .dice-clear-btn,
    .dice-new-btn, .dice-pick-edit, .chat-send-btn, .news-settings-btn, .news-mobile-filters-toggle, .pdf-note-open-btn, .pdf-setup-open-btn,
    .pdf-override-open-btn, .pdf-override-replace-btn, .nav-theme-btn, .nav-logout-btn, .back-home-btn, .planner-vote-btn,
    .upload-btn, .btn.btn-primary, .pricing-btn:not(.pricing-btn-secondary), .gl-btn-primary, .upload-input-file-btn, .btn.btn-secondary, .pricing-btn-secondary, .gl-btn-ghost, .upload-file-action-btn, .pdf-score-pad-btn, .pdf-dice-btn, .pdf-note-page-btn, .pdf-bgg-btn,
    .pdf-note-delete-btn, .news-custom-remove, .chat-history-new, .chat-history-delete-all, .chat-warning-btn):disabled {
    opacity: 0.55;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Spec 159 rule 8: the log-out stays a red piece, as in the app. After the states above, so it wins them. */
html.tabletop:not(#tabletop) :is(.nav-logout-btn, .nav-logout-icon-btn) {
    background: var(--tt-danger-fill);
    color: #ffffff;
    border: 1px solid var(--tt-danger-fill);
    box-shadow: 0 3px 0 var(--tt-danger-edge);
}

html.tabletop:not(#tabletop) :is(.nav-logout-btn, .nav-logout-icon-btn):hover:not(:disabled) {
    color: #ffffff;
    border-color: var(--tt-danger-fill);
    filter: brightness(1.08);
}

/* 7. Pieces that float above the page. */
html.tabletop:not(#tabletop) :is(.home-summary-modal, .planner-modal, .cookie-consent-card, .dice-panel, .pdf-note-modal, .app-busy-card,
    .planner-picker-modal) {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    border-radius: 3px;
    box-shadow: 0 6px 0 var(--tt-edge);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* The locked notice stays dark in both themes, like a token turned over. */
html.tabletop:not(#tabletop) .demo-locked {
    background: #36251a;
    color: #f8f1e8;
    border: 1px solid #5c412c;
    border-radius: 3px;
    box-shadow: 0 6px 0 #0b0603;
}

html.tabletop:not(#tabletop) .demo-locked a:not(.game-card-btn) {
    color: #ffa25a;
}

html.tabletop:not(#tabletop) .home-summary-backdrop {
    background: rgba(11, 6, 3, 0.62);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 8. The dice button: a square cardboard token, still in its corner (backlog 80 moves it). */
html.tabletop:not(#tabletop) .dice-fab {
    border-radius: 3px;
    background: linear-gradient(135deg, var(--tt-accent-from), var(--tt-accent-to));
    color: var(--tt-on-accent);
    border: 1px solid transparent;
    box-shadow: 0 4px 0 var(--tt-edge-strong);
}

/* 9. The BGG badge keeps its logo; its frame is a small piece. */
html.tabletop:not(#tabletop) .bgg-attribution {
    border-radius: 3px;
    box-shadow: 0 3px 0 var(--tt-edge);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 10. The bevel, where the browser has it. */
@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) :is(.home-cta, .game-card-btn, .game-pager-btn, .cookie-consent-btn:not(.cookie-consent-btn-link),
        .dice-roll-btn, .dice-clear-btn, .dice-new-btn, .chat-send-btn, .news-settings-btn, .news-mobile-filters-toggle, .pdf-note-open-btn,
        .pdf-setup-open-btn, .pdf-override-open-btn, .pdf-override-replace-btn, .nav-theme-btn, .nav-logout-btn,
        .back-home-btn, .planner-vote-btn, .upload-btn, .btn.btn-primary, .pricing-btn:not(.pricing-btn-secondary), .gl-btn-primary, .upload-input-file-btn, .btn.btn-secondary, .pricing-btn-secondary, .gl-btn-ghost, .upload-file-action-btn, .pdf-score-pad-btn, .pdf-dice-btn,
        .pdf-bgg-btn, .chat-history-new, .chat-history-delete-all, .chat-warning-btn) {
        border-radius: 9px;
        corner-shape: bevel;
    }

    html.tabletop:not(#tabletop) :is(.dice-pick-edit, .game-edit-mini-btn, .fav-btn, .pdf-note-page-btn, .pdf-note-delete-btn, .news-custom-remove,
        .card-bg-swatch) {
        border-radius: 7px;
        corner-shape: bevel;
    }

    html.tabletop:not(#tabletop) :is(.sidebar-toggle-btn, .chat-icon-btn, .news-action-btn, .home-summary-close,
        .dice-panel-close, .nav-theme-icon-btn, .nav-logout-icon-btn, .dice-fab, .chat-restore-btn) {
        border-radius: 10px;
        corner-shape: bevel;
    }

    html.tabletop:not(#tabletop) :is(.home-summary-modal, .planner-modal, .cookie-consent-card, .dice-panel, .demo-locked, .pdf-note-modal,
        .app-busy-card, .planner-picker-modal) {
        border-radius: 18px;
        corner-shape: bevel;
    }

    html.tabletop:not(#tabletop) .bgg-attribution {
        border-radius: 12px;
        corner-shape: bevel;
    }
}

/* 11. The dice loader: a die face in CSS that turns a quarter at a time, instead of every spinner. */
html.tabletop:not(#tabletop) :is(.spinner-border, .reconnect-spinner),
html.tabletop:not(#tabletop) .home-summary-status[data-demo-summary-loading]::before {
    --tt-pip: var(--tt-accent);
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--tt-accent);
    border-radius: 3px;
    background:
        radial-gradient(circle at 26% 26%, var(--tt-pip) 0 11%, transparent 12%),
        radial-gradient(circle at 74% 26%, var(--tt-pip) 0 11%, transparent 12%),
        radial-gradient(circle at 50% 50%, var(--tt-pip) 0 11%, transparent 12%),
        radial-gradient(circle at 26% 74%, var(--tt-pip) 0 11%, transparent 12%),
        radial-gradient(circle at 74% 74%, var(--tt-pip) 0 11%, transparent 12%),
        var(--tt-field);
    animation: tt-die-tumble 0.9s steps(1) infinite;
    vertical-align: middle;
}

html.tabletop:not(#tabletop) .home-summary-status[data-demo-summary-loading] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

html.tabletop:not(#tabletop) .home-summary-status[data-demo-summary-loading]::before {
    content: "";
    flex: none;
}

html.tabletop:not(#tabletop) .home-summary-status[data-demo-summary-loading][hidden] {
    display: none;
}

@keyframes tt-die-tumble {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
}

@media (prefers-reduced-motion: reduce) {
    html.tabletop:not(#tabletop) :is(.spinner-border, .reconnect-spinner),
    html.tabletop:not(#tabletop) .home-summary-status[data-demo-summary-loading]::before {
        animation: none;
    }

    html.tabletop:not(#tabletop) :is(.home-cta, .game-card-btn, .game-pager-btn, .cookie-consent-btn, .dice-roll-btn,
        .chat-send-btn, .nav-theme-btn, .back-home-btn, .dice-fab) {
        transition: none;
    }
}

/* Spec 167 rule 4: the dialog's close button - a small cut and the cross in the middle. */
html.tabletop:not(#tabletop) :is(.home-summary-close, .planner-modal-close) {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    padding: 0;
    line-height: 1;
}

@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) :is(.home-summary-close, .planner-modal-close, .dice-panel-close, .demo-locked-close) {
        border-radius: 5px;
        corner-shape: bevel;
    }
}

/* Spec 168 rule 2: the badge of a paid action is the gold Pro token, not a round yellow disc; spec 272 rule 1: the
   turquoise Club token on the Club plan's buttons. Spec 315 rule 13: it sits above the top edge a little inside the
   right corner, so a button at the edge of a clipped header keeps it whole. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.game-card-btn-pro, .game-card-btn-club)::after {
    top: -10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--tt-pro) center / contain no-repeat;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card-btn-club::after {
    background: var(--tt-club) center / contain no-repeat;
}

/* Spec 172 rule 1: one close button - the planner's cross, centred, turning a quarter on hover while the
   button stays put. Buttons that carry a text "x" draw the same cross through a mask. */
html.tabletop:not(#tabletop) :is(.home-summary-close, .planner-modal-close, .dice-panel-close, .demo-locked-close) {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    padding: 0;
    line-height: 1;
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    color: var(--tt-ink);
    box-shadow: none;
}

html.tabletop:not(#tabletop) .demo-locked-close {
    width: 28px;
    height: 28px;
}

html.tabletop:not(#tabletop) :is(.home-summary-close, .planner-modal-close, .dice-panel-close, .demo-locked-close):hover {
    border-color: var(--tt-accent);
    color: var(--tt-accent);
}

html.tabletop:not(#tabletop) :is(.home-summary-close, .planner-modal-close, .dice-panel-close, .demo-locked-close):hover {
    transform: none;
}

html.tabletop:not(#tabletop) :is(.home-summary-close, .dice-panel-close, .demo-locked-close) {
    font-size: 0;
}

html.tabletop:not(#tabletop) :is(.home-summary-close, .dice-panel-close, .demo-locked-close)::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--tt-cross) center / contain no-repeat;
    mask: var(--tt-cross) center / contain no-repeat;
    transition: transform 0.15s ease;
}

html.tabletop:not(#tabletop) .planner-modal-close svg {
    transition: transform 0.15s ease;
}

html.tabletop:not(#tabletop) :is(.home-summary-close, .dice-panel-close, .demo-locked-close):hover::before,
html.tabletop:not(#tabletop) .planner-modal-close:hover svg {
    transform: rotate(90deg);
}

/* Spec 172 rule 2: the dialogs' coloured title icons do not fit the look. */
html.tabletop:not(#tabletop) .planner-modal-title-icon {
    display: none;
}

/* Spec 184 rule 2: the reconnect notice floats as a piece over a plain scrim, in both themes. */
html.tabletop:not(#tabletop) #components-reconnect-modal {
    background: rgba(20, 12, 7, 0.6);
}

html.tabletop:not(#tabletop) #components-reconnect-modal.components-reconnect-pending {
    background: transparent;
}

html.tabletop:not(#tabletop) #components-reconnect-modal .reconnect-card {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: 0 6px 0 var(--tt-edge);
}

html.tabletop:not(#tabletop) #components-reconnect-modal .reconnect-card strong {
    font-family: var(--tt-font-display);
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) #components-reconnect-modal .reconnect-card p {
    color: var(--tt-muted);
}

@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) #components-reconnect-modal .reconnect-card {
        border-radius: 18px;
        corner-shape: bevel;
    }
}

/* The cookie banner's text button is a quiet piece: square, no cut. */
html.tabletop:not(#tabletop) .cookie-consent-btn.cookie-consent-btn-link {
    border-radius: 0;
}