/*
 * Product-wide presentation cleanup.
 *
 * This file is the migration owner for the shared visual grammar only. It is
 * loaded after the historical page styles so all product screens consume one
 * radius, type and spacing scale. Live-game and Material Board geometry are
 * intentionally excluded.
 */

:root {
    --tp-ui-radius-surface: 16px;
    --tp-ui-radius-control: 12px;
    --tp-ui-radius-compact: 10px;
    --tp-ui-border: 1px solid var(--tp-color-border);
    --tp-ui-divider: color-mix(in srgb, var(--tp-color-border) 72%, transparent);
    --tp-ui-page-title: clamp(28px, 3.1vw, 32px);
    --tp-ui-section-title: clamp(21px, 2.1vw, 24px);
    --tp-ui-card-title: clamp(16px, 1.5vw, 18px);
    --tp-ui-body: clamp(14px, 1.2vw, 16px);
    --tp-ui-meta: 12px;
    --tp-ui-page-gap: clamp(16px, 2vw, 24px);
    --tp-ui-nav-reserve: 84px;
}

body:not(.game-active) :where(
    #screen-home, #screen-play, #screen-online, #screen-bot-setup,
    #screen-analysis, #screen-profile, #screen-stats, #screen-rewards,
    #screen-ai-dossier, #screen-settings, #screen-league, #screen-more,
    #screen-database, #screen-learn, #screen-training, #screen-puzzles
) {
    font-family: var(--tp-font-sans);
    text-rendering: optimizeLegibility;
}

body:not(.game-active) :where(
    .tp-page-heading h1, .tp-phase-header h1, .sm-page-header h1,
    #screen-profile .sub-screen-title, #screen-stats h1,
    #screen-league .sm-page-title
) {
    font-family: var(--tp-font-sans) !important;
    font-size: var(--tp-ui-page-title) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
}

body:not(.game-active) :where(
    .tp-section-heading h2, .profile-section-heading h2,
    .tp-ai-section__title, .research-section-heading h2,
    .tp-analysis-section-heading h2
) {
    font-family: var(--tp-font-sans) !important;
    font-size: var(--tp-ui-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.018em !important;
}

body:not(.game-active) :where(
    .tp-home h3, .tp-play-page h3, .tp-reward-card h2,
    .profile-game-card strong, .tp-settings-row strong,
    .tp-ai-fact__value
) {
    font-size: var(--tp-ui-card-title);
    font-weight: 650;
}

body:not(.game-active) :where(
    .tp-page-heading p, .tp-phase-header p, .tp-section-heading p,
    .profile-section p, .tp-ai-section__lede
) {
    font-size: var(--tp-ui-body);
    line-height: 1.5;
}

body:not(.game-active) :where(
    button, select, input, textarea, .tp-button, .tp-phase-button,
    .tp-filter-chip, .tp-theme-choice
) {
    border-radius: var(--tp-ui-radius-control);
}

body:not(.game-active) :where(
    .tp-home-hero, .tp-home-section, .tp-play-card, .tp-online__card,
    .tp-product-section, .tp-analysis-viewer-card, .tp-analysis-control-card,
    .profile-identity-card, .profile-section, .tp-reward-card,
    .tp-ai-hero, .tp-ai-section, .tp-settings-v2__panel,
    .tp-settings-v2__nav, .league-player-row
) {
    border-radius: var(--tp-ui-radius-surface) !important;
}

/* A calm canvas: keep the existing texture but stop it competing with copy. */
body:not(.game-active) .tp-shell-main::before,
body:not(.game-active) .tp-product-page::before,
body:not(.game-active) .tp-phase-page::before {
    opacity: .34 !important;
}

/* Home and Play: same information architecture, less nested chrome. */
body:not(.game-active) #screen-home .tp-home-hero,
body:not(.game-active) #screen-home .tp-home-section {
    border-color: var(--tp-ui-divider) !important;
    box-shadow: none !important;
}

body:not(.game-active) #screen-home .tp-home-hero h1 {
    font-family: var(--tp-font-sans) !important;
    font-size: clamp(30px, 4.5vw, 48px) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

body:not(.game-active) #screen-home :where(.tp-home-action, .tp-mode-card, .tp-time-card),
body:not(.game-active) #screen-play :where(.tp-play-mode, .tp-play-action) {
    border-radius: var(--tp-ui-radius-control) !important;
    box-shadow: none !important;
}

/* Analysis stays board-first. The control rail is a workspace, not a card in a card. */
body:not(.game-active) #screen-analysis .tp-analysis-control-card {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body:not(.game-active) #screen-analysis .tp-phase-header,
body:not(.game-active) #screen-research .research-header {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 4px 0;
}

body:not(.game-active) #screen-analysis .tp-analysis-viewer-card {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body:not(.game-active) #screen-analysis :where(.tp-workspace-tabs, #analysis-source-panel, #analysis-position-panel) {
    border-radius: var(--tp-ui-radius-control) !important;
}

body:not(.game-active) #screen-analysis .tp-analysis-quick-actions button {
    min-height: 44px;
    border-color: var(--tp-ui-divider) !important;
}

/* Replay is a board with context, not a universal tool. The route header owns
   the factual players/result line; the viewer owns only board navigation. */
body:not(.game-active) #screen-replay .tp-replay-topbar {
    width: min(980px, 100%);
    margin: 0 auto 12px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
}

body:not(.game-active) #screen-replay .tp-replay-heading {
    grid-column: 2;
    min-width: 0;
    text-align: center;
}

body:not(.game-active) #screen-replay .tp-replay-heading h1 {
    margin: 0;
    overflow: hidden;
    color: var(--tp-color-text);
    font: 700 clamp(18px, 2.1vw, 24px)/1.2 var(--tp-font-sans);
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.game-active) #screen-replay .tp-replay-heading p {
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--tp-color-text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.game-active) #screen-replay .tp-replay-content {
    display: grid;
    width: min(980px, 100%);
    gap: 10px;
}

body:not(.game-active) #screen-replay .tp-replay-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

body:not(.game-active) #screen-replay #replay-analyze-button { order: 1; }
body:not(.game-active) #screen-replay [data-research-entry="replay"] { order: 2; }
body:not(.game-active) #screen-replay #replay-export-button {
    order: 3;
    border: 0;
    background: transparent;
    color: var(--tp-color-text-muted);
}

body:not(.game-active) #screen-replay .tp-replay-details {
    border: 0;
    border-top: 1px solid var(--tp-ui-divider);
}

body:not(.game-active) #screen-replay .tp-replay-details > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    color: var(--tp-color-text-muted);
    font-size: 13px;
}

body:not(.game-active) #screen-replay .tp-replay-details > summary::-webkit-details-marker { display: none; }

body:not(.game-active) #screen-replay .tp-replay-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}

body:not(.game-active) #screen-replay .tp-replay-facts > div {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset -1px 0 0 var(--tp-ui-divider);
    padding: 10px 12px;
}

body:not(.game-active) #screen-replay .tp-replay-facts > div:nth-child(3n) { box-shadow: none; }

/* Profile: identity first, then compact sporting facts and readable rows. */
body:not(.game-active) #screen-profile.profile-unified .profile-page {
    max-width: 920px;
}

body:not(.game-active) #screen-profile.profile-unified .profile-context-header {
    max-width: 920px;
    min-height: 56px;
    margin-inline: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body:not(.game-active) #screen-profile.profile-unified .profile-context-eyebrow { display: none; }

body:not(.game-active) #screen-profile.profile-unified .profile-context-heading { min-width: 0; }

body:not(.game-active) #screen-profile.profile-unified .profile-context-heading .sub-screen-title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

body:not(.game-active) #screen-profile.profile-unified .profile-identity-card {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body:not(.game-active) #screen-profile.profile-unified .profile-cover {
    aspect-ratio: auto;
    min-height: 84px;
    height: 84px;
    border-radius: var(--tp-ui-radius-surface);
    opacity: .76;
}

body:not(.game-active) #screen-profile.profile-unified .profile-section {
    margin-top: 24px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body:not(.game-active) #screen-profile.profile-unified .profile-section + .profile-section {
    padding-top: 20px !important;
    border-top: 1px solid var(--tp-ui-divider) !important;
}

body:not(.game-active) #screen-profile.profile-unified .profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 4px;
}

body:not(.game-active) #screen-profile.profile-unified .profile-stat-item {
    min-height: 68px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    padding: 8px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset -1px 0 0 var(--tp-ui-divider);
}

body:not(.game-active) #screen-profile.profile-unified .profile-stat-item:last-child { box-shadow: none; }

body:not(.game-active) #screen-profile.profile-unified .profile-stat-item strong {
    font-family: var(--tp-font-sans);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

body:not(.game-active) #screen-profile.profile-unified .profile-stat-item span {
    color: var(--tp-color-text-muted);
    font-size: 12px;
}

body:not(.game-active) #screen-profile.profile-unified .profile-pools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 14px;
    border-top: 1px solid var(--tp-ui-divider);
}

body:not(.game-active) #screen-profile.profile-unified .profile-pool-card {
    min-width: 0;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset -1px 0 0 var(--tp-ui-divider);
}

body:not(.game-active) #screen-profile.profile-unified .profile-pool-card:last-child { box-shadow: none; }

body:not(.game-active) #screen-profile.profile-unified .profile-empty-state {
    min-height: 0;
    padding: 10px 0;
    border: 0;
    background: transparent;
}

body:not(.game-active) #screen-profile.profile-unified .profile-empty-state > i {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    background: color-mix(in srgb, var(--tp-color-primary) 10%, transparent);
}

body:not(.game-active) #screen-profile.profile-unified .profile-achievements {
    gap: 6px;
}

body:not(.game-active) #screen-profile.profile-unified .profile-game-card {
    padding: 14px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 -1px 0 var(--tp-ui-divider);
}

body:not(.game-active) #screen-profile.profile-unified .profile-game-card:last-child { box-shadow: none; }

body:not(.game-active) #screen-profile.profile-unified .profile-game-card__actions {
    justify-content: flex-start;
}

body:not(.game-active) #screen-profile.profile-unified .profile-game-card__actions > button {
    flex: 0 1 auto;
    min-height: 38px;
    padding-inline: 12px;
}

body:not(.game-active) #screen-profile.profile-unified .profile-owner-section {
    margin-top: 24px;
    padding-top: 16px;
}

body:not(.game-active) #screen-profile.profile-unified #profile-avatar-actions,
body:not(.game-active) #screen-profile.profile-unified #profile-avatar-remove {
    display: none !important;
}

/* Rewards: two compact counters and one full-width next step. */
body:not(.game-active) #screen-rewards .tp-rewards-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body:not(.game-active) #screen-rewards .tp-rewards-summary article {
    min-height: 78px;
    padding: 12px 14px;
    border-radius: var(--tp-ui-radius-control);
    box-shadow: none;
}

body:not(.game-active) #screen-rewards .tp-rewards-summary article:last-child {
    grid-column: 1 / -1;
    min-height: 70px;
}

body:not(.game-active) #screen-rewards .tp-rewards-controls {
    padding: 10px;
    border-color: var(--tp-ui-divider);
    border-radius: var(--tp-ui-radius-surface);
    background: transparent;
}

body:not(.game-active) #screen-rewards .tp-reward-card {
    min-height: 90px;
    padding: 12px 14px;
    box-shadow: none;
}

/* Statistics: a sporting score page, not a grid of BI cards. */
body:not(.game-active) #screen-stats .tp-product-content {
    width: min(920px, calc(100% - 32px));
    gap: 20px;
}

body:not(.game-active) #screen-stats .tp-statistics-heading {
    display: grid;
    gap: 14px;
    margin-bottom: 0;
}

body:not(.game-active) #screen-stats .tp-stat-summary {
    display: grid;
    grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
    order: 0;
}

body:not(.game-active) #screen-stats .tp-stat-summary__primary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 20px 12px 0;
    border: 0;
    border-right: 1px solid var(--tp-ui-divider);
    border-radius: 0;
    background: transparent;
}

body:not(.game-active) #screen-stats .tp-stat-summary__rating-line {
    justify-content: flex-start;
    gap: 12px;
}

body:not(.game-active) #screen-stats .tp-stat-summary__rating-line > strong {
    font-size: clamp(42px, 6vw, 58px);
    font-weight: 700;
}

body:not(.game-active) #screen-stats .tp-stat-summary__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body:not(.game-active) #screen-stats .tp-stat-summary__metrics > div {
    min-height: 68px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    padding: 10px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset -1px 0 0 var(--tp-ui-divider), inset 0 -1px 0 var(--tp-ui-divider);
}

body:not(.game-active) #screen-stats .tp-stat-summary__metrics > div:nth-child(2n) {
    box-shadow: inset 0 -1px 0 var(--tp-ui-divider);
}

body:not(.game-active) #screen-stats .tp-stat-summary__metrics > div:nth-last-child(-n + 2) {
    box-shadow: inset -1px 0 0 var(--tp-ui-divider);
}

body:not(.game-active) #screen-stats .tp-stat-summary__metrics > div:last-child { box-shadow: none; }
body:not(.game-active) #screen-stats .tp-stat-summary__metrics dd { margin: 0 0 3px; font-size: 22px; }
body:not(.game-active) #screen-stats .tp-stat-summary__metrics dt { color: var(--tp-color-text-muted); font-size: 12px; }

body:not(.game-active) #screen-stats .tp-statistics-graph {
    min-height: 0;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--tp-ui-divider);
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
}

body:not(.game-active) #screen-stats .tp-rating-chart-wrap { min-height: 250px; }

body:not(.game-active) #screen-stats .tp-stat-history-link {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
    border: 0;
    border-top: 1px solid var(--tp-ui-divider);
    border-bottom: 1px solid var(--tp-ui-divider);
    border-radius: 0;
    background: transparent;
    color: var(--tp-color-text);
    font: 600 15px/1.2 var(--tp-font-sans);
    text-align: left;
}

body:not(.game-active) #screen-stats .tp-stat-history-link .fa-arrow-right { margin-inline-start: auto; color: var(--tp-color-text-muted); }

body:not(.game-active) #screen-stats .tp-statistics-details {
    border: 0;
    background: transparent;
}

body:not(.game-active) #screen-stats .tp-statistics-details > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    color: var(--tp-color-text);
    font-size: var(--tp-ui-card-title);
    font-weight: 600;
}

body:not(.game-active) #screen-stats .tp-statistics-details > summary::-webkit-details-marker { display: none; }

body:not(.game-active) #screen-stats .tp-statistics-details > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-inline-start: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
}

body:not(.game-active) #screen-stats .tp-statistics-details[open] > summary::after { transform: rotate(-135deg); }
body:not(.game-active) #screen-stats .tp-statistics-details__body { display: grid; gap: 0; }

body:not(.game-active) #screen-stats .tp-statistics-details__body > section {
    padding: 20px 0;
    border: 0;
    border-top: 1px solid var(--tp-ui-divider);
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
}

body:not(.game-active) #screen-stats #stats-page-content[data-empty="true"] .tp-statistics-details,
body:not(.game-active) #screen-stats #stats-page-content[data-empty="true"] .tp-stat-history-link {
    display: none;
}

/* On a reviewed desktop game, use the otherwise empty second column for the
   move under the cursor. Full-game detail remains the single fold below. */
@media (min-width: 901px) {
    body:not(.game-active) #screen-analysis[data-analysis-state="completed"] .tp-analysis-layout {
        grid-template-columns: minmax(0, 1.42fr) minmax(320px, .58fr);
    }

    body:not(.game-active) #screen-analysis[data-analysis-state="completed"] .tp-move-panel {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        margin: 0;
        padding: 4px 2px 10px;
    }

    body:not(.game-active) #screen-analysis[data-analysis-state="completed"] .tp-analysis-full-fold {
        grid-row: 2;
    }
}

/* Settings rows become real touch rows with readable supporting copy. */
body:not(.game-active) #screen-settings .tp-settings-v2__nav {
    border-color: var(--tp-ui-divider);
    box-shadow: none;
}

body:not(.game-active) #screen-settings .tp-settings-v2__nav button {
    min-height: 68px;
    padding: 12px 14px;
}

body:not(.game-active) #screen-settings .tp-settings-v2__nav strong,
body:not(.game-active) #screen-settings .tp-settings-row strong {
    color: var(--tp-color-text) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
}

body:not(.game-active) #screen-settings .tp-settings-v2__nav small,
body:not(.game-active) #screen-settings .tp-settings-row small {
    color: var(--tp-color-text-muted) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* AI dossier: the first screen answers the user; raw evidence is disclosed. */
body:not(.game-active) #screen-ai-dossier .tp-ai-root {
    gap: 14px;
}

body:not(.game-active) #screen-ai-dossier :where(.tp-ai-hero, .tp-ai-section) {
    padding: clamp(16px, 2.6vw, 24px);
    border-color: var(--tp-ui-divider);
    box-shadow: none;
}

body:not(.game-active) #screen-ai-dossier .tp-ai-hero__title {
    font-family: var(--tp-font-sans);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.14;
}

.tp-ai-advanced {
    border-top: 1px solid var(--tp-ui-divider);
    padding-top: 8px;
}

.tp-ai-advanced > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--tp-color-primary);
    font-weight: 650;
}

.tp-ai-advanced__body { display: grid; gap: 12px; }

/* Avatar actions: one owner sheet opened from the avatar itself. */
.tp-avatar-actions-overlay {
    position: fixed;
    inset: 0;
    z-index: 100220;
    display: grid;
    align-items: end;
    background: rgba(0, 0, 0, .58);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.tp-avatar-actions-overlay[hidden] { display: none !important; }

.tp-avatar-actions-sheet {
    width: min(100%, 520px);
    max-height: min(78dvh, 620px);
    margin-inline: auto;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border: var(--tp-ui-border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--tp-color-surface-raised);
    box-shadow: 0 -18px 46px rgba(0, 0, 0, .36);
}

.tp-avatar-actions-sheet__handle {
    width: 42px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--tp-color-border-strong);
}

.tp-avatar-actions-sheet header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.tp-avatar-actions-sheet h2 { margin: 0; font-size: 21px; }
.tp-avatar-actions-sheet__close { width: 44px; height: 44px; border: 0; background: transparent; color: var(--tp-color-text-muted); }
.tp-avatar-actions-sheet__actions { display: grid; gap: 8px; }
.tp-avatar-actions-sheet__actions button {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border: var(--tp-ui-border);
    background: var(--tp-color-surface);
    color: var(--tp-color-text);
    font: 650 15px/1.2 var(--tp-font-sans);
    text-align: left;
}
.tp-avatar-actions-sheet__actions button.is-danger { color: var(--tp-color-danger); }

@media (max-width: 1023px) {
    :root { --tp-mobile-nav-height: var(--tp-ui-nav-reserve); }

    body:not(.game-active):not(.global-nav-hidden) .tp-shell-main > .screen.active:not(#screen-game) {
        padding-bottom: calc(var(--tp-ui-nav-reserve) + env(safe-area-inset-bottom, 0px)) !important;
        scroll-padding-bottom: calc(var(--tp-ui-nav-reserve) + env(safe-area-inset-bottom, 0px));
    }

    body:not(.game-active):not(.global-nav-hidden) #screen-home.tp-home.active > .tp-home__content {
        padding-bottom: calc(var(--tp-ui-nav-reserve) + 14px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .tp-mobile-nav {
        left: max(12px, env(safe-area-inset-left)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: 56px !important;
        padding: 4px !important;
        border-radius: 16px !important;
        background-color: color-mix(in srgb, var(--tp-color-surface-raised) 92%, transparent) !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .3) !important;
    }

    .tp-mobile-nav__item {
        min-height: 44px !important;
        border-radius: 11px !important;
    }

    .tp-mobile-nav__item.is-active {
        background: color-mix(in srgb, var(--tp-color-primary) 16%, transparent) !important;
        box-shadow: none !important;
    }

    body:not(.game-active) .tp-phase-header,
    body:not(.game-active) .sm-page-header,
    body:not(.game-active) .tp-page-heading--action {
        position: relative !important;
        top: auto !important;
    }

    body:not(.game-active) #screen-home .tp-home__content { padding-inline: 16px !important; }
    body:not(.game-active) #screen-home .tp-home-hero { padding: 18px 16px !important; }
    body:not(.game-active) #screen-home .tp-home-hero h1 { font-size: 30px !important; }
    body:not(.game-active) #screen-home .tp-home-hero p { font-size: 15px !important; }

    body:not(.game-active) #screen-profile.profile-unified .profile-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    body:not(.game-active) #screen-profile.profile-unified .profile-stat-item { min-height: 68px; }

    body:not(.game-active) #screen-profile.profile-unified .profile-cover {
        min-height: 72px;
        height: 72px;
    }

    body:not(.game-active) #screen-replay .tp-replay-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.game-active) #screen-replay .tp-replay-topbar {
        margin-bottom: 8px;
    }

    body:not(.game-active) #screen-replay #replay-analyze-button {
        grid-column: 1 / -1;
    }

    body:not(.game-active) #screen-replay .tp-replay-actions .tp-phase-button {
        min-width: 0;
        padding-inline: 9px;
    }

    body:not(.game-active) #screen-replay #replay-export-button {
        grid-column: auto;
        margin-inline-start: 0;
        justify-self: stretch;
        border: 0;
        background: transparent;
    }

    body:not(.game-active) #screen-replay .tp-replay-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    body:not(.game-active) #screen-replay .tp-replay-facts > div {
        min-width: 0;
        box-shadow: inset -1px 0 0 var(--tp-ui-divider), inset 0 -1px 0 var(--tp-ui-divider);
    }

    body:not(.game-active) #screen-replay .tp-replay-facts > div:nth-child(2n) {
        box-shadow: inset 0 -1px 0 var(--tp-ui-divider);
    }

    body:not(.game-active) #screen-profile.profile-unified .profile-pools-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    body:not(.game-active) #screen-profile.profile-unified .profile-pool-card__head {
        display: grid;
        gap: 3px;
    }

    body:not(.game-active) #screen-profile.profile-unified .profile-pool-card__rate { gap: 3px; }
    body:not(.game-active) #screen-profile.profile-unified .profile-pool-card__rate strong { font-size: 17px; }

    body:not(.game-active) #screen-profile.profile-unified .profile-game-card__open {
        width: auto;
    }

    body:not(.game-active) #screen-stats .tp-stat-summary { grid-template-columns: 1fr; }
    body:not(.game-active) #screen-stats .tp-stat-summary__primary {
        padding: 10px 0 16px;
        border-right: 0;
        border-bottom: 1px solid var(--tp-ui-divider);
    }
    body:not(.game-active) #screen-stats .tp-rating-history { min-height: 0; }
    body:not(.game-active) #screen-stats .tp-rating-chart-wrap { min-height: 180px; overflow: hidden; }
    body:not(.game-active) #screen-stats .tp-rating-chart { min-width: 0; min-height: 175px; }

    body:not(.game-active) #screen-stats .tp-product-content,
    body:not(.game-active) #screen-rewards .tp-product-content,
    body:not(.game-active) #screen-settings .tp-product-content { padding-inline: 16px; }

    body:not(.game-active) #screen-ai-dossier .tp-ai-hero__grid,
    body:not(.game-active) #screen-ai-dossier .tp-ai-factrow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body:not(.game-active) #screen-ai-dossier .tp-ai-fact { min-height: 74px; padding: 10px; }
}

@media (min-width: 700px) {
    .tp-avatar-actions-overlay { align-items: center; padding: 24px; }
    .tp-avatar-actions-sheet { border-bottom: var(--tp-ui-border); border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-avatar-actions-overlay, .tp-avatar-actions-sheet { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Pass 2 — one visible container level.

   The complaint these rules answer is structural, not decorative: Statistics
   drew a rectangle inside a rectangle inside a rectangle. Measured on the live
   page at 390px before this block, #screen-stats painted 29 visible borders,
   18 of them inside another bordered box and 3 nested two deep — a section
   edge, then a grid edge, then a tile edge, and a dashed empty-state edge
   inside all of it.

   The section is the surface. Its children are separated by spacing and, where
   they need to read as tiles, by a quiet fill — never by a second edge. Input
   borders, focus rings and danger states are untouched; they carry meaning.
   ══════════════════════════════════════════════════════════════════════════ */

/* Period and kind filters: a segmented control on one surface, rather than
   four separately outlined buttons competing with the page title.

   The id is written out per screen rather than folded into :where(): that
   pseudo-class contributes no specificity, which left these rules tied with
   `body:not(.game-active) … button {border: … !important}` in inline-styles.css
   — a sheet that lands after this one, so the tie went the wrong way. */
body:not(.game-active) #screen-stats .tp-compact-filter,
body:not(.game-active) #screen-profile .tp-compact-filter,
body:not(.game-active) #screen-league .tp-compact-filter {
    border: 0 !important;
    box-shadow: none !important;
    background: var(--tp-color-muted-surface) !important;
    border-radius: var(--tp-ui-radius-control) !important;
    padding: 3px !important;
    gap: 2px !important;
    /* The kind row (Все · Победы · … · Турниры) is wider than 390px, and it was
       being clipped rather than scrolled. */
    overflow-x: auto;
    scrollbar-width: none;
}

body:not(.game-active) #screen-stats .tp-compact-filter::-webkit-scrollbar,
body:not(.game-active) #screen-profile .tp-compact-filter::-webkit-scrollbar,
body:not(.game-active) #screen-league .tp-compact-filter::-webkit-scrollbar { display: none; }

body:not(.game-active) #screen-stats .tp-compact-filter > button,
body:not(.game-active) #screen-profile .tp-compact-filter > button,
body:not(.game-active) #screen-league .tp-compact-filter > button {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: calc(var(--tp-ui-radius-control) - 3px) !important;
    font-weight: 500;
    color: var(--tp-color-text-muted) !important;
    white-space: nowrap;
    flex: 0 0 auto;
}

body:not(.game-active) #screen-stats .tp-compact-filter > button.is-active,
body:not(.game-active) #screen-profile .tp-compact-filter > button.is-active,
body:not(.game-active) #screen-league .tp-compact-filter > button.is-active {
    background: var(--tp-color-surface-raised) !important;
    color: var(--tp-color-text) !important;
    font-weight: 600;
}

/* Children of a section that already owns a surface. */
body:not(.game-active) #screen-stats .tp-stat-summary__metrics,
body:not(.game-active) #screen-stats .tp-stat-summary__metrics > div,
body:not(.game-active) #screen-stats .tp-performance-grid,
body:not(.game-active) #screen-stats .tp-attention-block {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Tiles still need to read as separate figures, so they take a quiet fill
   instead of an outline. */
body:not(.game-active) #screen-stats .tp-mode-rating,
body:not(.game-active) #screen-stats .tp-breakdown-card {
    border: 0 !important;
    box-shadow: none !important;
    background: var(--tp-color-muted-surface) !important;
    border-radius: var(--tp-ui-radius-compact) !important;
}

/* Empty states: the dashed rectangle inside an outer card was the single most
   visible offender. An icon, a line of explanation and one action need no box
   of their own. */
body:not(.game-active) .tp-data-state--empty {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-inline: 0 !important;
}

/* "История партий" was a full-width outlined button under the filters. It is a
   link to another screen, so it reads as a navigation row. */
body:not(.game-active) #screen-stats .tp-page-heading__actions > .tp-button--compact {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100%;
    justify-content: flex-start !important;
    gap: 10px;
    padding-inline: 2px !important;
    color: var(--tp-color-text) !important;
    font-weight: 600;
}

body:not(.game-active) #screen-stats .tp-page-heading__actions > .tp-button--compact::after {
    content: '';
    width: 7px;
    height: 7px;
    margin-inline-start: auto;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .5;
}

/* Profile: the same one-level rule. Avatar controls stay in their sheet. */
body:not(.game-active) #screen-profile .tp-data-state,
body:not(.game-active) #screen-profile .tp-profile-metrics,
body:not(.game-active) #screen-profile .tp-profile-metrics > div {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Bottom navigation: one surface. The shadow and the blur already lift it off
   the page, so the outline around the capsule was a third edge doing no work.
   The active item keeps its quiet fill — that is the only mark needed. */
body:not(.game-active) .tp-mobile-nav {
    border: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Move panel — the default reading of a reviewed game.

   Sits directly under the board so the answer to "what did I play here and
   what was better" is the first thing under the position it describes. The
   game-level review (story, accuracy, phases, graph, findings) keeps its place
   below; it is context, not the lede.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.game-active) #screen-analysis .tp-move-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    margin: 0 0 4px;
    padding: 12px 2px 14px;
    border: 0;
    background: transparent;
}

body:not(.game-active) #screen-analysis .tp-move-panel__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

body:not(.game-active) #screen-analysis .tp-move-panel__nav > strong {
    min-width: 10ch;
    text-align: center;
    font-size: var(--tp-ui-card-title);
    font-weight: 600;
}

body:not(.game-active) #screen-analysis .tp-move-panel__step {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--tp-color-muted-surface);
    color: var(--tp-color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body:not(.game-active) #screen-analysis .tp-move-panel__step:disabled { opacity: .4; cursor: default; }

body:not(.game-active) #screen-analysis .tp-move-panel__players {
    margin: 0;
    text-align: center;
    font-size: var(--tp-ui-meta);
    color: var(--tp-color-text-muted);
}

body:not(.game-active) #screen-analysis .tp-move-panel__facts {
    display: grid;
    gap: 2px;
    margin: 0;
}

body:not(.game-active) #screen-analysis .tp-move-panel__facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 2px;
    border: 0;
    /* A hairline between rows, not a box around each — the panel is one surface. */
    box-shadow: inset 0 -1px 0 var(--tp-ui-divider);
}

body:not(.game-active) #screen-analysis .tp-move-panel__facts > div:last-child { box-shadow: none; }

body:not(.game-active) #screen-analysis .tp-move-panel__facts dt {
    margin: 0;
    font-size: var(--tp-ui-body);
    color: var(--tp-color-text-muted);
}

body:not(.game-active) #screen-analysis .tp-move-panel__facts dd {
    margin: 0;
    font-size: var(--tp-ui-card-title);
    font-weight: 600;
    color: var(--tp-color-text);
}

body:not(.game-active) #screen-analysis #analysis-move-better-row dd { color: var(--tp-color-primary); }

body:not(.game-active) #screen-analysis .tp-move-panel__why > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 2px;
    font-weight: 600;
    color: var(--tp-color-primary);
}

body:not(.game-active) #screen-analysis .tp-move-panel__why > summary::-webkit-details-marker { display: none; }
body:not(.game-active) #screen-analysis .tp-move-panel__why > p {
    margin: 0 0 4px;
    padding: 0 2px;
    font-size: var(--tp-ui-body);
    color: var(--tp-color-text-muted);
}

/* Two destinations on a history card: view the record, or have it analysed. */
body:not(.game-active) .profile-game-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body:not(.game-active) .profile-game-card__actions > button {
    flex: 1 1 auto;
    min-height: 40px;
    border-radius: var(--tp-ui-radius-control);
}

body:not(.game-active) .profile-game-card__analyze {
    border: 0;
    background: var(--tp-color-primary);
    color: var(--tp-color-primary-ink);
    font-weight: 600;
}

/* `display:flex` above out-specifies the [hidden] attribute, which left the
   "better move" row on screen with an empty value whenever the played move was
   already the best one. */
body:not(.game-active) #screen-analysis .tp-move-panel__facts > div[hidden] { display: none; }

/* Key moments: compact rows that seek the board, not bordered cards. */
body:not(.game-active) #screen-analysis .tp-move-panel__moments > h3 {
    margin: 6px 0 4px;
    font-size: var(--tp-ui-card-title);
    font-weight: 600;
}

body:not(.game-active) #screen-analysis .tp-move-panel__moments > ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

body:not(.game-active) #screen-analysis .tp-move-panel__moments li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 2px;
    cursor: pointer;
    box-shadow: inset 0 -1px 0 var(--tp-ui-divider);
}

body:not(.game-active) #screen-analysis .tp-move-panel__moments li:last-child { box-shadow: none; }
body:not(.game-active) #screen-analysis .tp-move-panel__moments li.is-current { color: var(--tp-color-primary); }
body:not(.game-active) #screen-analysis .tp-move-panel__moments li > b {
    min-width: 8ch;
    font-variant-numeric: tabular-nums;
    color: var(--tp-color-text-muted);
    font-weight: 500;
}

/* The game-level fold: everything that is about the game rather than the move. */
body:not(.game-active) #screen-analysis .tp-analysis-full-fold {
    grid-column: 1 / -1;
    border: 0;
    background: transparent;
    padding: 0;
    margin-top: 4px;
}

body:not(.game-active) #screen-analysis .tp-analysis-full-fold > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 2px;
    font-size: var(--tp-ui-card-title);
    font-weight: 600;
    box-shadow: inset 0 -1px 0 var(--tp-ui-divider);
}

body:not(.game-active) #screen-analysis .tp-analysis-full-fold > summary::-webkit-details-marker { display: none; }

body:not(.game-active) #screen-analysis .tp-analysis-full-fold > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-inline-start: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: .55;
}

body:not(.game-active) #screen-analysis .tp-analysis-full-fold[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* Interrupted-room recovery: a quiet organizer affordance inside the pairing
   row, not an alarm. It removes an orphaned lock; it does not delete a result. */
body:not(.game-active) .tp-pairing-row__recovery {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    box-shadow: inset 0 1px 0 var(--tp-ui-divider);
}

body:not(.game-active) .tp-pairing-row__recovery-note {
    margin: 0;
    font-size: var(--tp-ui-meta);
    color: var(--tp-color-text-muted);
}

body:not(.game-active) .tp-pairing-row__recovery > button { justify-self: start; }

/* ══ Finished tournament — result-first ══════════════════════════════════════
   The permanent inline view. Same Toguz Pro surface language: one container
   level, quiet fills, restrained metal accents. No glow, no trophy art. */
body:not(.game-active) #screen-tournament-lobby .tp-finished-hero {
    display: grid; gap: 4px; padding: 4px 2px 14px;
    box-shadow: inset 0 -1px 0 var(--tp-ui-divider);
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-hero__status {
    margin: 0; font-size: var(--tp-ui-section-title); font-weight: 700;
    color: var(--tp-color-text);
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-hero__name {
    margin: 0; font-size: var(--tp-ui-section-title); font-weight: 700;
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-hero__date {
    margin: 0; font-size: var(--tp-ui-meta); color: var(--tp-color-text-muted);
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-hero__badges {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-hero__badges > span {
    font-size: var(--tp-ui-meta); padding: 4px 9px; border-radius: var(--tp-radius-pill);
    background: var(--tp-color-muted-surface); color: var(--tp-color-text-muted);
}

body:not(.game-active) #screen-tournament-lobby .tp-finished-podium {
    display: grid; gap: 8px; padding: 14px 0;
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-podium__slot {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: 8px; padding: 11px 10px; border-radius: var(--tp-ui-radius-compact);
    background: var(--tp-color-muted-surface); border-left: 3px solid transparent;
}
/* Metal accents are a secondary cue; the place is always written out too. */
body:not(.game-active) #screen-tournament-lobby .tp-finished-podium__slot[data-rank="1"] {
    border-left-color: #d2a75e; background: color-mix(in srgb, #d2a75e 12%, var(--tp-color-muted-surface));
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-podium__slot[data-rank="2"] { border-left-color: #b9bcc2; }
body:not(.game-active) #screen-tournament-lobby .tp-finished-podium__slot[data-rank="3"] { border-left-color: #b08257; }
body:not(.game-active) #screen-tournament-lobby .tp-finished-podium__label {
    grid-column: 1 / -1; font-size: var(--tp-ui-meta); font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--tp-color-primary);
}
/* The name is the point of the row, so the place label takes only what it
   needs and the score is not allowed to squeeze it. */
body:not(.game-active) #screen-tournament-lobby .tp-finished-podium__place {
    font-size: var(--tp-ui-meta); color: var(--tp-color-text-muted); white-space: nowrap;
}
/* A podium has room for two lines; truncating the winner's name to fit a
   single row is the wrong trade. The table below keeps single-line ellipsis. */
body:not(.game-active) #screen-tournament-lobby .tp-finished-podium .tp-finished-player__name {
    font-size: var(--tp-ui-body); white-space: normal; overflow: visible;
    text-overflow: clip; overflow-wrap: anywhere;
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-podium__score {
    font-size: var(--tp-ui-card-title); font-weight: 700;
}

body:not(.game-active) #screen-tournament-lobby .tp-finished-player {
    display: flex; align-items: center; gap: 8px; min-width: 0;
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-player__name {
    font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

body:not(.game-active) #screen-tournament-lobby .tp-finished-standings > h3 {
    margin: 6px 0 8px; font-size: var(--tp-ui-card-title); font-weight: 600;
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-standings__list {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
}
/* Compact rows rather than a squeezed desktop table — nothing scrolls sideways. */
body:not(.game-active) #screen-tournament-lobby .tp-finished-standings__row {
    display: grid; grid-template-columns: 4ch 1fr auto; align-items: center;
    gap: 10px; padding: 9px 2px; box-shadow: inset 0 -1px 0 var(--tp-ui-divider);
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-standings__row:last-child { box-shadow: none; }
body:not(.game-active) #screen-tournament-lobby .tp-finished-standings__place {
    font-variant-numeric: tabular-nums; color: var(--tp-color-text-muted);
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-standings__main { min-width: 0; }
body:not(.game-active) #screen-tournament-lobby .tp-finished-standings__meta {
    display: block; font-size: var(--tp-ui-meta); color: var(--tp-color-text-muted);
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-standings__score {
    font-size: var(--tp-ui-card-title); font-weight: 700; font-variant-numeric: tabular-nums;
}

body:not(.game-active) #screen-tournament-lobby .tp-finished-details > summary {
    list-style: none; cursor: pointer; padding: 14px 2px; font-weight: 600;
    box-shadow: inset 0 1px 0 var(--tp-ui-divider);
}
body:not(.game-active) #screen-tournament-lobby .tp-finished-details > summary::-webkit-details-marker { display: none; }

@media (min-width: 760px) {
    body:not(.game-active) #screen-tournament-lobby .tp-finished-podium {
        grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
    }
}

/* Player rows are real buttons everywhere they appear — same control, same
   affordance, keyboard reachable. */
body:not(.game-active) #screen-tournament-lobby .tp-player-link {
    background: none; border: 0; padding: 0; margin: 0; font: inherit;
    color: inherit; text-align: left; cursor: pointer; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
}
body:not(.game-active) #screen-tournament-lobby .tp-player-link:hover { color: var(--tp-color-primary); }
body:not(.game-active) #screen-tournament-lobby .tp-player-link:focus-visible {
    outline: var(--tp-focus-ring, 2px solid currentColor); outline-offset: 2px; border-radius: 4px;
}

/* Contextual popover, not a second profile page and not a bottom sheet.
   The shared `.modal-overlay` lays its child out as a bottom sheet
   (align-items: flex-end) and premium.css paints it with a heavy
   rgba(8,8,16,.72) + blur(8px) backdrop.  Both are used by unrelated
   features, so this overlay opts OUT by id instead of changing them:
   the id beats `.modal-overlay.open` on specificity for display, and the
   backdrop paint needs !important only because premium.css uses it. */
#tournament-player-card-overlay.open { display: block; animation: none; }
#tournament-player-card-overlay {
    /* The same trap the onboarding overlay documents: inline-styles.css says
       `body:not(.game-active) .modal-overlay { position: relative }`, which drops
       the overlay into document flow with zero height. The card is absolutely
       positioned inside it, so its JS coordinates were being applied relative to
       a box partway down the page instead of the viewport — which is what pushed
       the card to the bottom of the screen. Pin it to the viewport explicitly. */
    position: fixed; inset: 0; z-index: 10040;
    background: rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Placement comes from JS (trigger rect + collision), so the card is
   positioned, never flexed into a corner. */
#tournament-player-card-overlay .tp-player-card {
    position: absolute; inset-block-start: 0; inset-inline-start: 0;
    width: 316px; max-width: calc(100vw - 32px);
    /* Fallback only — at 390x844 the card is ~300px tall and never scrolls. */
    max-height: calc(100vh - 32px); overflow-y: auto;
    display: grid; gap: 10px; text-align: start;
    padding: 14px; border-radius: 16px;
    /* Use the product surface token, not --bg-elevated: premium.css redefines
       that to a navy #1A1A28 which reads as off-brand beside the warm dark
       tournament table. */
    background: var(--tp-color-surface, #1E1810);
    border: 1px solid var(--tp-color-border);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    animation: tpcPopIn 150ms ease-out;
}
/* A popover appearing, not a drawer sliding up. */
@keyframes tpcPopIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    #tournament-player-card-overlay .tp-player-card { animation: none; }
}

.tp-player-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px; align-items: start; }
.tp-player-card__ident { min-width: 0; }
.tp-player-card__avatar, .tp-player-card__avatar img, .tp-player-card__avatar > * {
    width: 44px; height: 44px; border-radius: 50%; }
.tp-player-card__close { width: 34px; height: 34px; padding: 0; border: 0;
    background: none; color: inherit; cursor: pointer; border-radius: 8px; }
.tp-player-card__name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25;
    overflow-wrap: anywhere; }
/* Full card width, not inside the narrow ident column: the Kazakh label
   ("Турнир кезіндегі рейтинг") is long enough to wrap raggedly there. */
.tp-player-card__rating { margin: -4px 0 0; font-size: 13px; color: var(--tp-color-text-muted); }
.tp-player-card__rating[hidden] { display: none; }
.tp-player-card__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; width: 100%; margin: 0; }
.tp-player-card__stats > div { display: grid; gap: 2px; align-content: center;
    min-height: 56px; padding: 8px 10px;
    border-radius: var(--tp-ui-radius-compact, 10px); background: var(--tp-color-muted-surface); }
.tp-player-card__stats dt { margin: 0; font-size: 12px; color: var(--tp-color-text-muted); }
.tp-player-card__stats dd { margin: 0; font-size: 16px; font-weight: 700; }
.tp-player-card > .tp-button { width: 100%; min-height: 46px; height: auto; padding: 0 14px; }
/* Follow is a secondary action: it must read clearly but never out-shout the
   gold Open-profile button below it. State is carried by the label text, not by
   colour alone. */
.tp-player-card__follow { width: 100%; min-height: 40px; height: auto;
    padding: 0 12px; font-size: 14px; font-weight: 600; }
.tp-player-card__follow[data-following="true"] {
    background: transparent; color: var(--tp-color-text-muted);
    border: 1px solid var(--tp-color-border);
}
.tp-player-card__follow:disabled { opacity: .6; cursor: progress; }
/* `.tp-button` sets display, which out-specifies the bare [hidden] attribute —
   restate it here or the control stays visible on your own card. */
.tp-player-card__follow[hidden] { display: none; }
.profile-follow-action[hidden] { display: none; }

/* Followers / following — a plain navigable list inside the profile, not a
   nested modal. Rows must stay readable at 390px without horizontal scroll. */
body:not(.game-active) .profile-follow-list__rows { display: grid; gap: 2px; }
body:not(.game-active) .profile-follow-list__row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
    align-items: center; padding: 8px 2px;
    box-shadow: inset 0 -1px 0 var(--tp-ui-divider);
}
body:not(.game-active) .profile-follow-list__row:last-child { box-shadow: none; }
body:not(.game-active) .profile-follow-list__person {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px;
    align-items: center; min-width: 0; padding: 0; border: 0;
    background: none; color: inherit; text-align: start; cursor: pointer;
}
body:not(.game-active) .profile-follow-list__avatar,
body:not(.game-active) .profile-follow-list__avatar img,
body:not(.game-active) .profile-follow-list__avatar > * {
    width: 36px; height: 36px; border-radius: 50%;
}
body:not(.game-active) .profile-follow-list__name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--tp-ui-body); font-weight: 600;
}
body:not(.game-active) .profile-follow-list__follow {
    min-height: 34px; height: auto; padding: 0 12px; font-size: 13px; white-space: nowrap;
}
body:not(.game-active) .profile-follow-list__follow[data-following="true"] {
    background: transparent; color: var(--tp-color-text-muted);
    border: 1px solid var(--tp-color-border);
}
body:not(.game-active) .profile-follow-list__empty {
    margin: 8px 0; color: var(--tp-color-text-muted); font-size: var(--tp-ui-body);
}
/* `.tp-button` sets display, which out-specifies a bare [hidden]. */
body:not(.game-active) #profile-social-more[hidden],
body:not(.game-active) .profile-follow-list__empty[hidden],
body:not(.game-active) #profile-social-list[hidden],
body:not(.game-active) #profile-followers-count[hidden],
body:not(.game-active) #profile-following-count[hidden] { display: none; }

/* Tournament record — three equal cards plus a compact history list. */
body:not(.game-active) .profile-tournament-record__stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; margin: 0 0 14px;
}
body:not(.game-active) .profile-tournament-record__stats > div {
    display: grid; gap: 2px; align-content: center; min-height: 62px;
    padding: 8px 10px; border-radius: var(--tp-ui-radius-compact, 10px);
    background: var(--tp-color-muted-surface); text-align: center;
}
body:not(.game-active) .profile-tournament-record__stats dt {
    margin: 0; font-size: 12px; color: var(--tp-color-text-muted);
}
body:not(.game-active) .profile-tournament-record__stats dd {
    margin: 0; font-size: 20px; font-weight: 700;
}
body:not(.game-active) .profile-tournament-record__subtitle {
    margin: 0 0 6px; font-size: var(--tp-ui-body); font-weight: 650;
}
body:not(.game-active) .profile-tournament-history { display: grid; gap: 2px; }
body:not(.game-active) .profile-tournament-history__row {
    display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 10px;
    align-items: center; width: 100%; padding: 9px 2px; border: 0;
    background: none; color: inherit; text-align: start; cursor: pointer;
    box-shadow: inset 0 -1px 0 var(--tp-ui-divider);
}
body:not(.game-active) .profile-tournament-history__row:last-child { box-shadow: none; }
body:not(.game-active) .profile-tournament-history__place {
    font-size: 17px; font-weight: 700; color: var(--tp-color-text-muted);
}
/* Colour is an accent only — the place is always written out as text. */
body:not(.game-active) .profile-tournament-history__place[data-medal="1"] { color: var(--gold-bright, #e8c07a); }
body:not(.game-active) .profile-tournament-history__place[data-medal="2"] { color: #c9ccd4; }
body:not(.game-active) .profile-tournament-history__place[data-medal="3"] { color: #c8925f; }
body:not(.game-active) .profile-tournament-history__main { display: grid; gap: 2px; min-width: 0; }
body:not(.game-active) .profile-tournament-history__title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--tp-ui-body); font-weight: 600;
}
body:not(.game-active) .profile-tournament-history__meta {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px; color: var(--tp-color-text-muted);
}
body:not(.game-active) .profile-tournament-history__empty {
    margin: 6px 0; color: var(--tp-color-text-muted); font-size: var(--tp-ui-body);
}
body:not(.game-active) #ptr-more[hidden],
body:not(.game-active) .profile-tournament-history__empty[hidden] { display: none; }

/* Certificate verification — an authenticity record, not a decorative diploma.
   Component-scoped so it cannot collide with profile/social/modal selectors. */
body:not(.game-active) .certificate-verify {
    width: min(520px, 100%); margin: 0 auto; padding: 20px 16px;
    display: grid; gap: 14px; text-align: center;
}
body:not(.game-active) .certificate-verify__brand {
    margin: 0; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--tp-color-text-muted);
}
body:not(.game-active) .certificate-verify__status {
    margin: 0; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.2;
}
/* State is carried by the text itself; colour only reinforces it. */
body:not(.game-active) .certificate-verify__status[data-state="valid"] { color: var(--tp-color-primary); }
body:not(.game-active) .certificate-verify__status[data-state="invalid"],
body:not(.game-active) .certificate-verify__status[data-state="notfound"] { color: var(--tp-color-text-muted); }
body:not(.game-active) .certificate-verify__hint {
    margin: 0; font-size: var(--tp-ui-body); color: var(--tp-color-text-muted);
}
body:not(.game-active) .certificate-verify__fields {
    display: grid; gap: 10px; margin: 4px 0 0; text-align: start;
    padding: 14px; border-radius: var(--tp-ui-radius-surface);
    background: var(--tp-color-surface, #1b1917); border: 1px solid var(--tp-color-border);
}
body:not(.game-active) .certificate-verify__fields > div { display: grid; gap: 2px; }
body:not(.game-active) .certificate-verify__fields dt {
    margin: 0; font-size: var(--tp-ui-meta); color: var(--tp-color-text-muted);
}
body:not(.game-active) .certificate-verify__value {
    margin: 0; font-size: var(--tp-ui-card-title); font-weight: 600; overflow-wrap: anywhere;
}
/* The id is a 32-char opaque token: it must wrap, never widen the page. */
body:not(.game-active) .certificate-verify__id {
    margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px; overflow-wrap: anywhere; word-break: break-all;
}
body:not(.game-active) .certificate-verify__fields[hidden],
body:not(.game-active) .certificate-verify__hint[hidden] { display: none; }

/* Certificate action in a tournament history row — secondary to the result,
   never a large gold CTA. Namespaced under the history component. */
body:not(.game-active) .profile-tournament-history__entry {
    display: grid; gap: 4px; padding: 0 0 6px;
    box-shadow: inset 0 -1px 0 var(--tp-ui-divider);
}
body:not(.game-active) .profile-tournament-history__entry:last-child { box-shadow: none; }
body:not(.game-active) .profile-tournament-history__entry > .profile-tournament-history__row {
    box-shadow: none;
}
body:not(.game-active) .profile-tournament-history__certificate {
    justify-self: start; margin-inline-start: calc(4ch + 10px);
    min-height: 32px; padding: 0 10px; border-radius: var(--tp-ui-radius-compact, 10px);
    border: 1px solid var(--tp-color-border); background: transparent;
    color: var(--tp-color-text-muted); font-size: 13px; font-weight: 600;
    cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: start;
}
body:not(.game-active) .profile-tournament-history__certificate:hover {
    color: var(--tp-color-text); border-color: var(--tp-color-primary);
}
@media (max-width: 430px) {
    body:not(.game-active) .profile-tournament-history__certificate { margin-inline-start: 0; }
}

/* ── Player card v2 ─────────────────────────────────────────────────────────
   One card, two placements. The tournament variant stays an anchored popover
   (placement comes from JS). The game variant is a bottom sheet on a phone and
   a centred card elsewhere. Surfaces use the glass tokens, which already turn
   opaque under prefers-reduced-transparency / prefers-contrast. */
#tournament-player-card-overlay .tp-player-card {
    background: linear-gradient(145deg, var(--tp-glass-highlight, transparent), transparent 55%), var(--tp-glass-strong, var(--tp-color-surface));
    border: 1px solid var(--tp-glass-border, var(--tp-color-border));
    border-radius: var(--tp-material-radius, 16px);
    box-shadow: var(--tp-glass-shadow, 0 18px 44px rgba(0, 0, 0, 0.55));
    color: var(--tp-color-text);
}
#tournament-player-card-overlay .tp-player-card__avatar {
    width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tp-color-primary, #E8B62E) 38%, transparent);
}
#tournament-player-card-overlay .tp-player-card__avatar > * {
    width: 100% !important; height: 100% !important; flex-basis: auto !important;
    border-radius: 50% !important; object-fit: cover; font-size: 18px;
}
#tournament-player-card-overlay .tp-player-card__close {
    width: 44px; height: 44px; margin: -6px -6px 0 0; display: grid; place-items: center;
    border-radius: 50%; color: var(--tp-color-text-muted);
    background: color-mix(in srgb, var(--tp-color-text) 7%, transparent);
    transition: background-color 120ms ease, transform 120ms ease;
}
#tournament-player-card-overlay .tp-player-card__close:hover { background: color-mix(in srgb, var(--tp-color-text) 12%, transparent); }
#tournament-player-card-overlay .tp-player-card__close:active { transform: scale(.94); }
#tournament-player-card-overlay .tp-player-card__close:focus-visible,
#tournament-player-card-overlay .tp-player-card .tp-button:focus-visible {
    outline: 2px solid var(--tp-color-primary, #E8B62E); outline-offset: 2px;
}

/* Game variant */
#tournament-player-card-overlay[data-variant="game"] {
    display: none; align-items: flex-end; justify-content: center;
    background: var(--tp-glass-scrim, rgba(0, 0, 0, .5)) !important;
    backdrop-filter: blur(var(--tp-blur-sm, 6px)) !important;
    -webkit-backdrop-filter: blur(var(--tp-blur-sm, 6px)) !important;
}
#tournament-player-card-overlay[data-variant="game"].open { display: flex; }
#tournament-player-card-overlay[data-variant="game"] .tp-player-card {
    position: relative; inset: auto; width: 100%; max-width: 440px; max-height: 92dvh;
    gap: 14px; justify-items: center; text-align: center;
    padding: 28px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0; border-bottom-width: 0;
}
#tournament-player-card-overlay[data-variant="game"] .tp-player-card__head {
    display: grid; grid-template-columns: 1fr; justify-items: center; gap: 12px; width: 100%;
}
#tournament-player-card-overlay[data-variant="game"] .tp-player-card__avatar {
    width: 88px; height: 88px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-color-primary, #E8B62E) 42%, transparent),
                0 10px 26px rgba(0, 0, 0, .28);
}
#tournament-player-card-overlay[data-variant="game"] .tp-player-card__avatar > * { font-size: 34px; }
#tournament-player-card-overlay[data-variant="game"] .tp-player-card__close {
    position: absolute; inset-block-start: 10px; inset-inline-end: 10px; margin: 0;
}
#tournament-player-card-overlay[data-variant="game"] .tp-player-card__name { font-size: 22px; line-height: 1.2; }
#tournament-player-card-overlay[data-variant="game"] .tp-player-card__rating {
    margin: -6px 0 0; font-size: 14px; color: var(--tp-color-text-muted); font-variant-numeric: tabular-nums;
}
#tournament-player-card-overlay[data-variant="game"] .tp-player-card__follow {
    min-height: 48px; border-radius: 14px; font-size: 16px; font-weight: 700; margin-top: 4px;
}
@media (min-width: 640px) {
    #tournament-player-card-overlay[data-variant="game"] { align-items: center; padding: 24px; }
    #tournament-player-card-overlay[data-variant="game"] .tp-player-card {
        width: 360px; border-radius: 24px; border-bottom-width: 1px; padding-bottom: 24px;
    }
}
@media (prefers-reduced-motion: reduce) {
    #tournament-player-card-overlay[data-variant="game"] .tp-player-card,
    #tournament-player-card-overlay .tp-player-card__close { transition: none !important; animation: none !important; transform: none !important; }
}