/*
 * Profile & Replay Visual Unification
 *
 * Scoped owner for the profile screen, avatar dialogs and the surrounding
 * historical-replay shell. It intentionally does not style Material Board
 * geometry, pits, stones, kazans or any live-game controls.
 */

/* ── Profile ───────────────────────────────────────────────────────────── */

#screen-profile.profile-unified.active {
    display: block !important;
    min-width: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--tp-color-page);
    color: var(--tp-color-text);
}

#screen-profile.profile-unified .profile-context-header {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: var(--tp-space-3);
    margin: 0;
    padding: max(var(--tp-space-2), env(safe-area-inset-top, 0px)) max(var(--tp-space-5), env(safe-area-inset-right, 0px)) var(--tp-space-2) max(var(--tp-space-5), env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--tp-color-border);
    background: color-mix(in srgb, var(--tp-color-page) 94%, transparent);
    backdrop-filter: blur(12px);
}

#screen-profile.profile-unified .profile-context-back {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-sm);
    background: var(--tp-color-surface);
    color: var(--tp-color-text);
}

#screen-profile.profile-unified .profile-context-heading {
    min-width: 0;
    display: grid;
    gap: 2px;
}

#screen-profile.profile-unified .profile-context-eyebrow,
#screen-profile.profile-unified .profile-section-eyebrow,
.avatar-dialog-eyebrow {
    color: var(--tp-color-text-subtle);
    font: 500 11px/1.25 var(--tp-font-sans);
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

#screen-profile.profile-unified .profile-context-heading h1 {
    margin: 0;
    color: var(--tp-color-text);
    font: 700 18px/1.2 var(--tp-font-display);
    letter-spacing: -0.02em;
}

#screen-profile.profile-unified .profile-page {
    width: min(100%, 960px);
    margin: 0 auto;
    padding: var(--tp-space-8) var(--tp-space-6) calc(var(--tp-space-12) + env(safe-area-inset-bottom, 0px));
}

#screen-profile.profile-unified .profile-identity-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--tp-space-6);
    padding: var(--tp-space-6);
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-lg);
    background: var(--tp-color-surface);
    box-shadow: var(--tp-shadow-sm);
}

#screen-profile.profile-unified .profile-avatar-wrap {
    position: relative;
    width: 112px;
    height: 112px;
}

#screen-profile.profile-unified .profile-avatar {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--tp-color-border-strong);
    border-radius: 50%;
    background: var(--tp-color-surface-soft);
    color: var(--tp-color-text);
    font-size: 52px;
    line-height: 1;
    box-shadow: var(--tp-shadow-xs);
}

#screen-profile.profile-unified .profile-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#screen-profile.profile-unified .profile-avatar-control {
    position: absolute;
    right: -12px;
    bottom: 4px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--tp-color-border-strong);
    border-radius: 50%;
    background: var(--tp-color-surface-raised);
    color: var(--tp-color-primary);
    box-shadow: var(--tp-shadow-sm);
}

#screen-profile.profile-unified .profile-avatar-control[hidden],
#screen-profile.profile-unified .profile-owner-section[hidden],
#screen-profile.profile-unified #profile-rewards-all[hidden],
#screen-profile.profile-unified #profile-avatar-remove[hidden] {
    display: none !important;
}

#screen-profile.profile-unified .profile-identity-copy {
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: var(--tp-space-2);
}

#screen-profile.profile-unified .profile-identity-meta {
    color: var(--tp-color-text-muted);
    font: 400 var(--tp-text-sm)/1.35 var(--tp-font-sans);
}

#screen-profile.profile-unified #profile-name {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--tp-color-text);
    font: 700 clamp(24px, 3vw, 34px)/1.12 var(--tp-font-display);
    letter-spacing: -0.03em;
}

#screen-profile.profile-unified .profile-rating-pill {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid color-mix(in srgb, var(--tp-color-primary) 38%, var(--tp-color-border));
    border-radius: var(--tp-radius-pill);
    background: color-mix(in srgb, var(--tp-color-primary) 10%, var(--tp-color-surface));
    color: var(--tp-color-text-muted);
    font: 500 var(--tp-text-sm)/1 var(--tp-font-sans);
}

#screen-profile.profile-unified .profile-rating-pill i { color: var(--tp-color-primary); }
#screen-profile.profile-unified .profile-rating-pill strong {
    color: var(--tp-color-text);
    font: 600 15px/1 var(--tp-font-mono);
    font-variant-numeric: tabular-nums;
}

#screen-profile.profile-unified .profile-status {
    margin-top: var(--tp-space-1);
    color: var(--tp-color-text-muted);
    font: 400 var(--tp-text-sm)/1.45 var(--tp-font-sans);
}

#screen-profile.profile-unified .profile-status[data-state="error"] { color: var(--tp-color-danger); }
#screen-profile.profile-unified .profile-status[data-state="success"] { color: var(--tp-color-success); }

#screen-profile.profile-unified .profile-section {
    margin-top: var(--tp-space-10);
}

#screen-profile.profile-unified .profile-section-heading {
    display: grid;
    gap: var(--tp-space-1);
    margin-bottom: var(--tp-space-4);
}

#screen-profile.profile-unified .profile-section-heading p,
#screen-profile.profile-unified .profile-section-heading h2 {
    margin: 0;
}

#screen-profile.profile-unified .profile-section-heading:has(.profile-rewards-all) {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--tp-space-3);
}

#screen-profile.profile-unified .profile-rewards-progress {
    margin: var(--tp-space-1) 0 0;
    color: var(--tp-color-text-muted);
    font: 500 var(--tp-text-xs)/1.35 var(--tp-font-sans);
}

#screen-profile.profile-unified .profile-rewards-all {
    min-height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 var(--tp-space-2);
    border: 0;
    border-radius: var(--tp-radius-sm);
    background: transparent;
    color: var(--tp-color-primary);
    font: 600 var(--tp-text-sm)/1 var(--tp-font-sans);
    cursor: pointer;
}

#screen-profile.profile-unified .profile-section-heading h2 {
    color: var(--tp-color-text);
    font: 700 20px/1.2 var(--tp-font-display);
    letter-spacing: -0.025em;
}

#screen-profile.profile-unified .profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tp-space-3);
}

#screen-profile.profile-unified .profile-stat-item {
    min-width: 0;
    min-height: 104px;
    display: grid;
    align-content: space-between;
    gap: var(--tp-space-3);
    padding: var(--tp-space-4);
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
}

#screen-profile.profile-unified .profile-stat-item span {
    color: var(--tp-color-text-muted);
    font: 500 12px/1.35 var(--tp-font-sans);
}

#screen-profile.profile-unified .profile-stat-item strong {
    overflow-wrap: anywhere;
    color: var(--tp-color-text);
    font: 600 25px/1 var(--tp-font-mono);
    font-variant-numeric: tabular-nums;
}

#screen-profile.profile-unified .profile-achievements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--tp-space-3);
}

#screen-profile.profile-unified .profile-empty-state {
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: var(--tp-space-4);
    padding: var(--tp-space-5);
    border: 1px dashed var(--tp-color-border-strong);
    border-radius: var(--tp-radius-md);
    background: color-mix(in srgb, var(--tp-color-surface) 92%, transparent);
    color: var(--tp-color-text-muted);
}

#screen-profile.profile-unified .profile-empty-state > i {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tp-color-surface-soft);
    color: var(--tp-color-primary);
}

#screen-profile.profile-unified .profile-empty-state > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

#screen-profile.profile-unified .profile-empty-state strong {
    color: var(--tp-color-text);
    font: 600 var(--tp-text-md)/1.3 var(--tp-font-sans);
}

#screen-profile.profile-unified .profile-empty-state span {
    color: var(--tp-color-text-muted);
    font: 400 var(--tp-text-sm)/1.45 var(--tp-font-sans);
}

#screen-profile.profile-unified .profile-empty-state__cta,
#screen-profile.profile-unified .profile-game-card__open,
#screen-profile.profile-unified .profile-action-button,
#screen-profile.profile-unified .profile-remove-avatar,
#screen-profile.profile-unified .profile-logout {
    min-height: 44px;
    border-radius: var(--tp-radius-sm);
    font: 600 var(--tp-text-sm)/1 var(--tp-font-sans);
}

#screen-profile.profile-unified .profile-empty-state__cta {
    margin-left: auto;
    padding: 0 var(--tp-space-4);
    border: 0;
    background: var(--tp-color-primary);
    color: var(--tp-color-primary-ink);
    white-space: nowrap;
}

#screen-profile.profile-unified .profile-badge {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: var(--tp-space-3);
    padding: var(--tp-space-3) var(--tp-space-4);
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
}

#screen-profile.profile-unified .profile-badge__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tp-color-primary) 12%, var(--tp-color-surface-soft));
    color: var(--tp-color-primary);
}

#screen-profile.profile-unified .profile-badge__icon.tp-medal {
    border: 1px solid color-mix(in srgb, var(--tp-color-primary) 58%, var(--tp-color-border));
    background:
        radial-gradient(circle at 36% 30%, rgba(255,255,255,0.24), transparent 28%),
        linear-gradient(135deg, #6d5227, #c79e4c 48%, #5f461e);
    color: #211809;
    box-shadow: inset 0 1px rgba(255,255,255,0.24), 0 5px 12px rgba(0,0,0,0.24);
}

#screen-profile.profile-unified .profile-badge__icon.tp-medal::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(50, 35, 11, 0.42);
    border-radius: inherit;
    pointer-events: none;
}

#screen-profile.profile-unified .profile-badge__copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

#screen-profile.profile-unified .profile-badge__copy strong {
    color: var(--tp-color-text);
    font: 600 var(--tp-text-sm)/1.3 var(--tp-font-sans);
}

#screen-profile.profile-unified .profile-badge__copy small {
    color: var(--tp-color-text-muted);
    font: 400 var(--tp-text-xs)/1.35 var(--tp-font-sans);
}

#screen-profile.profile-unified .profile-history-list {
    display: grid;
    gap: var(--tp-space-3);
}

#screen-profile.profile-unified .profile-game-card {
    display: grid;
    gap: var(--tp-space-3);
    padding: var(--tp-space-4);
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
}

#screen-profile.profile-unified .profile-game-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tp-space-3);
}

#screen-profile.profile-unified .profile-game-card__opponent {
    min-width: 0;
    display: grid;
    gap: 2px;
}

#screen-profile.profile-unified .profile-game-card__opponent span {
    color: var(--tp-color-text-subtle);
    font: 500 var(--tp-text-xs)/1.25 var(--tp-font-sans);
}

#screen-profile.profile-unified .profile-game-card__opponent strong {
    overflow: hidden;
    color: var(--tp-color-text);
    font: 600 var(--tp-text-md)/1.3 var(--tp-font-sans);
    text-overflow: ellipsis;
    white-space: nowrap;
}

#screen-profile.profile-unified .profile-game-result {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-pill);
    color: var(--tp-color-text-muted);
    font: 600 var(--tp-text-xs)/1 var(--tp-font-sans);
}

#screen-profile.profile-unified .profile-game-result--win { color: var(--tp-color-success); }
#screen-profile.profile-unified .profile-game-result--loss { color: var(--tp-color-danger); }

#screen-profile.profile-unified .profile-game-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    color: var(--tp-color-text-muted);
    font: 400 var(--tp-text-xs)/1.4 var(--tp-font-sans);
}

#screen-profile.profile-unified .profile-game-card__meta-item:not(:last-child)::after {
    margin-left: 10px;
    color: var(--tp-color-border-strong);
    content: '•';
}

#screen-profile.profile-unified .profile-game-card__open {
    justify-self: start;
    padding: 0 var(--tp-space-4);
    border: 1px solid var(--tp-color-border-strong);
    background: transparent;
    color: var(--tp-color-text);
}

#screen-profile.profile-unified .profile-owner-section {
    display: grid;
    gap: var(--tp-space-3);
    margin-top: var(--tp-space-10);
    padding-top: var(--tp-space-6);
    border-top: 1px solid var(--tp-color-border);
}

#screen-profile.profile-unified .profile-owner-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tp-space-3);
}

#screen-profile.profile-unified .profile-action-button,
#screen-profile.profile-unified .profile-remove-avatar,
#screen-profile.profile-unified .profile-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tp-space-2);
    padding: 0 var(--tp-space-4);
    border: 1px solid var(--tp-color-border-strong);
    background: var(--tp-color-surface);
    color: var(--tp-color-text);
}

#screen-profile.profile-unified .profile-remove-avatar,
#screen-profile.profile-unified .profile-logout { color: var(--tp-color-danger); }

/* ── Avatar dialogs ────────────────────────────────────────────────────── */

#avatar-modal-overlay.avatar-modal-overlay,
#avatar-upload-modal-overlay.avatar-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100100 !important;
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: var(--tp-space-4);
    overflow: hidden;
    background: rgba(7, 7, 6, 0.72);
    backdrop-filter: blur(8px);
}

#avatar-modal-overlay.avatar-modal-overlay.open,
#avatar-upload-modal-overlay.avatar-modal-overlay.open { display: flex !important; }

body:has(#avatar-modal-overlay.open),
body:has(#avatar-upload-modal-overlay.open) { overflow: hidden; }

#avatar-modal-overlay .avatar-modal,
#avatar-upload-modal-overlay .avatar-modal {
    width: min(600px, calc(100vw - 32px));
    max-width: min(600px, calc(100vw - 32px));
    max-height: min(82dvh, 720px);
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid var(--tp-color-border-strong) !important;
    border-radius: var(--tp-radius-lg) !important;
    background: var(--tp-color-surface-raised) !important;
    color: var(--tp-color-text) !important;
    box-shadow: var(--tp-shadow-md) !important;
    transform: none !important;
    animation: none !important;
}

#avatar-modal-overlay .avatar-modal-handle,
#avatar-upload-modal-overlay .avatar-modal-handle { display: none; }

.avatar-dialog-header {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tp-space-4);
    padding: var(--tp-space-4) var(--tp-space-5);
    border-bottom: 1px solid var(--tp-color-border);
}

.avatar-dialog-header > div { min-width: 0; display: grid; gap: 2px; }

#avatar-modal-overlay .avatar-modal-title,
#avatar-upload-modal-overlay .avatar-modal-title {
    margin: 0;
    color: var(--tp-color-text) !important;
    text-align: left !important;
    font: 700 18px/1.2 var(--tp-font-display) !important;
    letter-spacing: -0.025em;
}

.avatar-dialog-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-sm);
    background: transparent;
    color: var(--tp-color-text-muted);
}

.avatar-dialog-copy,
.avatar-upload-copy {
    margin: 0;
    padding: 0 var(--tp-space-5);
    color: var(--tp-color-text-muted);
    font: 400 var(--tp-text-sm)/1.45 var(--tp-font-sans);
}

.avatar-preset-modal .avatar-dialog-copy { padding-top: var(--tp-space-4); }

#avatar-modal-overlay .avatar-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--tp-space-2);
    padding: var(--tp-space-4) var(--tp-space-5) var(--tp-space-5);
    overflow-y: auto;
}

#avatar-modal-overlay .av-item {
    min-width: 0;
    min-height: 64px;
    display: grid;
    place-items: center;
    gap: 3px;
    padding: var(--tp-space-2) 3px;
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-sm);
    background: var(--tp-color-surface);
    color: var(--tp-color-text);
}

#avatar-modal-overlay .av-item.selected {
    border-color: var(--tp-color-primary);
    background: color-mix(in srgb, var(--tp-color-primary) 11%, var(--tp-color-surface));
}

#avatar-modal-overlay .av-emoji { font-size: 22px; line-height: 1; }
#avatar-modal-overlay .av-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--tp-color-text-muted);
    font: 500 9px/1.1 var(--tp-font-sans);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-upload-content {
    display: grid;
    gap: var(--tp-space-3);
    padding: var(--tp-space-4) var(--tp-space-5);
    overflow-y: auto;
}

#avatar-upload-modal-overlay .avatar-upload-copy { padding: 0; }

#avatar-upload-modal-overlay .avatar-upload-dropzone {
    min-height: 132px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: var(--tp-space-4);
    border: 1px dashed var(--tp-color-border-strong);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
    color: var(--tp-color-text-muted);
    cursor: pointer;
    transition: border-color var(--tp-motion-fast) var(--tp-ease-standard), background var(--tp-motion-fast) var(--tp-ease-standard);
}

#avatar-upload-modal-overlay .avatar-upload-dropzone[data-dragging="true"] {
    border-color: var(--tp-color-primary);
    background: color-mix(in srgb, var(--tp-color-primary) 9%, var(--tp-color-surface));
}

#avatar-upload-modal-overlay .avatar-upload-dropzone[data-has-preview="true"] {
    min-height: min(280px, 42dvh);
    padding: 0;
    border-style: solid;
}

#avatar-upload-modal-overlay .avatar-upload-canvas {
    width: min(100%, 280px);
    max-height: min(280px, 42dvh);
    aspect-ratio: 1;
    touch-action: none;
    cursor: grab;
}

#avatar-upload-modal-overlay .avatar-upload-canvas:active { cursor: grabbing; }

.avatar-upload-choose {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tp-space-2);
    padding: 0 var(--tp-space-4);
    border: 1px solid var(--tp-color-border-strong);
    border-radius: var(--tp-radius-sm);
    background: transparent;
    color: var(--tp-color-text);
    font: 600 var(--tp-text-sm)/1 var(--tp-font-sans);
}

.avatar-upload-zoom-label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--tp-space-3);
    color: var(--tp-color-text-muted);
    font: 500 var(--tp-text-sm)/1.3 var(--tp-font-sans);
}

.avatar-upload-zoom-label input { width: 100%; accent-color: var(--tp-color-primary); }

.avatar-upload-status {
    min-height: 20px;
    color: var(--tp-color-text-muted);
    font: 400 var(--tp-text-xs)/1.45 var(--tp-font-sans);
}

.avatar-upload-status[data-state="error"] { color: var(--tp-color-danger); }
.avatar-upload-status[data-state="ready"] { color: var(--tp-color-success); }

.avatar-upload-progress-row {
    min-height: 16px;
    display: flex;
    align-items: center;
    gap: var(--tp-space-2);
    color: var(--tp-color-text-muted);
    font: 500 var(--tp-text-xs)/1 var(--tp-font-mono);
}

.avatar-upload-progress-row progress {
    width: 100%;
    accent-color: var(--tp-color-primary);
}

.avatar-dialog-actions,
.avatar-upload-actions {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tp-space-2);
    padding: var(--tp-space-3) var(--tp-space-5);
    border-top: 1px solid var(--tp-color-border);
    background: var(--tp-color-surface-raised);
}

#avatar-modal-overlay .avatar-close-btn,
#avatar-upload-modal-overlay .avatar-close-btn,
#avatar-upload-modal-overlay .avatar-upload-primary {
    min-height: 44px;
    padding: 0 var(--tp-space-4);
    border: 1px solid var(--tp-color-border-strong);
    border-radius: var(--tp-radius-sm);
    background: transparent;
    color: var(--tp-color-text);
    font: 600 var(--tp-text-sm)/1 var(--tp-font-sans);
}

#avatar-upload-modal-overlay .avatar-upload-primary {
    border-color: transparent;
    background: var(--tp-color-primary);
    color: var(--tp-color-primary-ink);
}

#avatar-upload-modal-overlay .avatar-upload-primary:disabled {
    background: var(--tp-color-surface-soft);
    color: var(--tp-color-text-subtle);
}

/* ── Historical replay surrounding UI (not the board) ──────────────────── */

#screen-game.is-historical-replay .match-state-strip,
#screen-game.is-historical-replay #game-live-actions,
#screen-game.is-historical-replay #tab-eval { display: none !important; }

#screen-game.is-historical-replay .historical-replay-back:not([hidden]) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    margin-right: 2px;
    padding: 0;
    border: 1px solid var(--mb-panel-border);
    border-radius: 10px;
    background: var(--mb-panel-raised);
    color: var(--mb-text);
}

#screen-game.is-historical-replay .historical-replay-controller {
    display: grid;
    grid-template-columns: repeat(2, 44px) minmax(60px, 1fr) repeat(2, 44px);
    align-items: center;
    gap: 5px;
    padding: 0;
}

#screen-game.is-historical-replay .historical-replay-control {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--mb-panel-border);
    border-radius: 10px;
    background: var(--mb-panel-raised);
    color: var(--mb-text);
}

#screen-game.is-historical-replay .historical-replay-control:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

#screen-game.is-historical-replay .historical-replay-progress {
    min-width: 0;
    display: grid;
    place-items: center;
    color: var(--mb-text);
    font: 600 12px/1 var(--font-mono, 'JetBrains Mono', monospace);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#screen-game.is-historical-replay .historical-replay-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--mb-panel-border);
    border-radius: 11px;
    background: color-mix(in srgb, var(--mb-panel) 88%, black);
}

#screen-game.is-historical-replay .historical-replay-tabs button {
    min-height: 38px;
    padding: 0 var(--tp-space-2);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mb-text-soft);
    font: 600 11px/1 var(--font-body, 'DM Sans', sans-serif);
}

#screen-game.is-historical-replay .historical-replay-tabs button.is-active {
    background: var(--mb-panel-raised);
    color: var(--mb-text);
    box-shadow: var(--tp-shadow-xs);
}

#screen-game.is-historical-replay .historical-replay-panel[hidden] { display: none !important; }

#screen-game.is-historical-replay .historical-replay-panel {
    min-height: 0;
    flex: 1 1 auto;
}

#screen-game.is-historical-replay .historical-replay-information {
    min-height: 0;
    display: grid;
    gap: 1px;
    padding: 5px;
    overflow-y: auto;
}

#screen-game.is-historical-replay .historical-replay-information__field {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--mb-panel-border);
}

#screen-game.is-historical-replay .historical-replay-information__field:last-child { border-bottom: 0; }

#screen-game.is-historical-replay .historical-replay-information__field span {
    color: var(--mb-text-soft);
    font: 500 9px/1.25 var(--font-body, 'DM Sans', sans-serif);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#screen-game.is-historical-replay .historical-replay-information__field strong {
    color: var(--mb-text);
    font: 500 12px/1.35 var(--font-body, 'DM Sans', sans-serif);
    overflow-wrap: anywhere;
}

#screen-game.is-historical-replay .historical-export-trigger {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: auto;
    padding: 0 10px;
    border: 1px solid var(--mb-panel-border);
    border-radius: 9px;
    background: var(--mb-panel-raised);
    color: var(--mb-text);
    font: 600 11px/1 var(--font-body, 'DM Sans', sans-serif);
}

#screen-game.is-historical-replay .historical-export-trigger:disabled {
    cursor: progress;
    opacity: 0.65;
}

#screen-game.is-historical-replay .historical-export-menu[hidden] { display: none !important; }

#screen-game.is-historical-replay .historical-export-menu {
    display: grid;
    gap: 8px;
    margin: 0 7px 7px;
    padding: 9px;
    border: 1px solid var(--mb-panel-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mb-panel-raised) 92%, black);
}

#screen-game.is-historical-replay .historical-export-status {
    min-height: 1.25em;
    margin: 0;
    color: var(--mb-text-soft);
    font: 500 11px/1.35 var(--font-body, 'DM Sans', sans-serif);
}

#screen-game.is-historical-replay .historical-export-menu[data-export-state="success"] .historical-export-status {
    color: var(--tp-color-success, #7ab576);
}

#screen-game.is-historical-replay .historical-export-menu[data-export-state="error"] .historical-export-status,
#screen-game.is-historical-replay .historical-export-menu[data-export-state="unavailable"] .historical-export-status,
#screen-game.is-historical-replay .historical-export-menu[data-export-state="unauthorized"] .historical-export-status {
    color: var(--tp-color-danger, #d97d70);
}

#screen-game.is-historical-replay .historical-export-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

#screen-game.is-historical-replay .historical-export-option,
#screen-game.is-historical-replay .historical-export-retry,
#screen-game.is-historical-replay .historical-export-close {
    min-height: 44px;
    border: 1px solid var(--mb-panel-border);
    border-radius: 8px;
    background: var(--mb-panel);
    color: var(--mb-text);
    font: 600 11px/1 var(--font-body, 'DM Sans', sans-serif);
}

#screen-game.is-historical-replay .historical-export-option:disabled,
#screen-game.is-historical-replay .historical-export-retry:disabled {
    cursor: progress;
    opacity: 0.6;
}

#screen-game.is-historical-replay .historical-export-footer {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

#screen-game.is-historical-replay .historical-export-retry[hidden] { display: none !important; }

#screen-game.is-historical-replay .historical-export-retry { color: var(--tp-color-primary); }

#screen-game.is-historical-replay .historical-export-close {
    min-width: 44px;
    padding: 0 10px;
}

#screen-game.is-historical-replay .historical-ply-jump {
    display: grid;
    gap: 5px;
    padding: 8px 10px 10px;
    color: var(--mb-text-soft);
    font: 500 10px/1.25 var(--font-body, 'DM Sans', sans-serif);
}

#screen-game.is-historical-replay .historical-ply-jump select {
    min-height: 38px;
    width: 100%;
    border: 1px solid var(--mb-panel-border);
    border-radius: 8px;
    background: var(--mb-panel-raised);
    color: var(--mb-text);
    font: 500 12px/1.2 var(--font-body, 'DM Sans', sans-serif);
}

/* Isolate the replay move list from the old light game-history cards. */
#screen-game.is-historical-replay #history-content {
    display: grid;
    gap: 4px;
    padding: 0 8px 8px;
}

#screen-game.is-historical-replay #history-content .hist-turn {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 4px !important;
    min-height: 34px;
    margin: 0 !important;
    padding: 3px;
    border: 1px solid var(--mb-panel-border) !important;
    border-radius: 8px;
    background: var(--mb-panel-raised) !important;
    color: var(--mb-text);
    font: 600 11px/1 var(--font-mono, 'JetBrains Mono', monospace);
}

#screen-game.is-historical-replay #history-content .hist-num {
    padding: 0 !important;
    color: var(--mb-text-soft);
    font: 500 10px/1 var(--font-mono, 'JetBrains Mono', monospace);
    text-align: center;
}

#screen-game.is-historical-replay #history-content .hist-w,
#screen-game.is-historical-replay #history-content .hist-b {
    min-width: 0;
    min-height: 28px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border-radius: 6px;
    color: var(--mb-text) !important;
    font: 600 11px/1 var(--font-mono, 'JetBrains Mono', monospace);
    text-align: center;
}

#screen-game.is-historical-replay .hist-w.is-current,
#screen-game.is-historical-replay .hist-b.is-current {
    border-radius: 6px;
    background: color-mix(in srgb, var(--tp-color-primary) 18%, transparent);
    color: var(--mb-text) !important;
    outline: 1px solid color-mix(in srgb, var(--tp-color-primary) 48%, transparent);
    outline-offset: -1px;
}

#screen-game.is-historical-replay .historical-panel-close { display: none; }

@media (min-width: 1101px) {
    #screen-game.active.is-historical-replay {
        grid-template-columns: minmax(12px, 1fr) minmax(0, 1050px) minmax(248px, 280px) minmax(12px, 1fr) !important;
        grid-template-rows: 52px 58px minmax(0, 1fr) 58px !important;
    }

    #screen-game.is-historical-replay .match-player--opponent {
        grid-column: 2;
        grid-row: 2;
    }

    #screen-game.is-historical-replay #tab-board {
        grid-column: 2;
        grid-row: 3;
    }

    #screen-game.is-historical-replay .match-player--self {
        grid-column: 2;
        grid-row: 4;
    }

    #screen-game.is-historical-replay .game-side-panel {
        grid-column: 3;
        grid-row: 2 / 5;
        display: flex;
        gap: 10px;
        padding: 8px 0;
        overflow: hidden;
    }
}

@media (max-width: 1100px) {
    #screen-game.active.is-historical-replay {
        grid-template-rows: 48px 52px minmax(220px, 1fr) 52px minmax(112px, 34dvh) !important;
    }

    #screen-game.is-historical-replay .material-game-bar { grid-row: 1; }
    #screen-game.is-historical-replay .match-player--opponent { grid-row: 2; }
    #screen-game.is-historical-replay #tab-board { grid-row: 3; }
    #screen-game.is-historical-replay .match-player--self { grid-row: 4; }

    #screen-game.is-historical-replay .game-side-panel {
        grid-row: 5;
        min-height: 0;
        display: flex !important;
        gap: 6px;
        padding: 6px max(4px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
        overflow: hidden;
        background: var(--mb-shell);
    }

    #screen-game.is-historical-replay .historical-replay-controller { flex: 0 0 auto; }
    #screen-game.is-historical-replay .historical-replay-tabs { flex: 0 0 auto; }

    #screen-game.is-historical-replay .game-history-panel {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 1 1 auto;
        border-width: 1px !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        transform: none !important;
        visibility: visible !important;
        transition: none !important;
    }

    #screen-game.is-historical-replay .game-panel-header { min-height: 44px; padding: 7px 9px; }
    #screen-game.is-historical-replay .game-panel-close:not(.historical-panel-close):not(.history-panel-close) { display: none; }
    #screen-game.is-historical-replay .historical-panel-close { display: grid; }
    #screen-game.is-historical-replay .history-panel-close { display: grid; }
    #screen-game.is-historical-replay .history-box { min-height: 0; }
}

@media (max-width: 640px) {
    #screen-game.is-historical-replay .historical-export-trigger {
        width: 44px;
        padding: 0;
    }

    #screen-game.is-historical-replay .historical-export-trigger span { display: none; }

    #screen-profile.profile-unified .profile-page {
        padding: var(--tp-space-5) var(--tp-space-4) calc(var(--tp-space-10) + env(safe-area-inset-bottom, 0px));
    }

    #screen-profile.profile-unified .profile-identity-card {
        align-items: start;
        gap: var(--tp-space-4);
        padding: var(--tp-space-4);
    }

    #screen-profile.profile-unified .profile-avatar-wrap,
    #screen-profile.profile-unified .profile-avatar {
        width: 88px;
        height: 88px;
    }

    #screen-profile.profile-unified .profile-avatar { font-size: 40px; }
    #screen-profile.profile-unified .profile-avatar-control { right: -9px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
    #screen-profile.profile-unified #profile-name { font-size: 23px; }
    #screen-profile.profile-unified .profile-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #screen-profile.profile-unified .profile-stat-item { min-height: 92px; }
    #screen-profile.profile-unified .profile-owner-actions { grid-template-columns: 1fr; }
    #screen-profile.profile-unified .profile-empty-state { align-items: flex-start; flex-wrap: wrap; }
    #screen-profile.profile-unified .profile-empty-state__cta { width: 100%; margin-left: 0; }
    #screen-profile.profile-unified .profile-game-card__open { width: 100%; justify-self: stretch; }

    #avatar-modal-overlay.avatar-modal-overlay,
    #avatar-upload-modal-overlay.avatar-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    #avatar-modal-overlay .avatar-modal,
    #avatar-upload-modal-overlay .avatar-modal {
        width: 100%;
        max-width: none;
        max-height: min(84dvh, 720px);
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 20px 20px 0 0 !important;
    }

    #avatar-modal-overlay .avatar-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    #avatar-modal-overlay .av-item { min-height: 58px; }
    #avatar-upload-modal-overlay .avatar-upload-dropzone[data-has-preview="true"] { min-height: min(242px, 36dvh); }
    #avatar-upload-modal-overlay .avatar-upload-canvas { max-height: min(242px, 36dvh); }
    .avatar-dialog-actions,
    .avatar-upload-actions { padding-bottom: max(var(--tp-space-3), env(safe-area-inset-bottom, 0px)); }
}

#screen-profile.profile-unified button:focus-visible,
#avatar-modal-overlay button:focus-visible,
#avatar-upload-modal-overlay button:focus-visible,
#avatar-upload-modal-overlay [role="button"]:focus-visible,
#screen-game.is-historical-replay button:focus-visible,
#screen-game.is-historical-replay .hist-w:focus-visible,
#screen-game.is-historical-replay .hist-b:focus-visible,
#screen-game.is-historical-replay select:focus-visible {
    outline: none;
    box-shadow: var(--tp-focus-ring);
}

@media (hover: hover) {
    #screen-profile.profile-unified .profile-context-back:hover,
    #screen-profile.profile-unified .profile-avatar-control:hover,
    #screen-profile.profile-unified .profile-game-card__open:hover,
    #screen-profile.profile-unified .profile-action-button:hover,
    #screen-profile.profile-unified .profile-remove-avatar:hover,
    #screen-profile.profile-unified .profile-logout:hover,
    #avatar-modal-overlay .av-item:hover,
    #avatar-modal-overlay .avatar-dialog-close:hover,
    #avatar-upload-modal-overlay .avatar-dialog-close:hover,
    #avatar-upload-modal-overlay .avatar-upload-choose:hover {
        border-color: color-mix(in srgb, var(--tp-color-primary) 56%, var(--tp-color-border));
        background: color-mix(in srgb, var(--tp-color-primary) 7%, var(--tp-color-surface));
    }
}

@media (prefers-reduced-motion: reduce) {
    #screen-profile.profile-unified *,
    #avatar-modal-overlay *,
    #avatar-upload-modal-overlay *,
    #screen-game.is-historical-replay * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}