/* Steppe Glass — final material owner. Theme colours stay in rewards-themes.
 * Structural chrome: blur. Content: solid tinted depth. Board: unchanged. */
/* A light material needs more opacity to keep small secondary text legible
 * even over the darkest photograph. */
html[data-theme="steppe-light"] { --tp-glass-medium: color-mix(in srgb, var(--tp-color-surface-raised) 94%, transparent); }
html[data-theme] body {
    background: radial-gradient(ellipse at 75% 0%, var(--tp-glass-reflection), transparent 52%), var(--tp-color-page);
}
html[data-theme] .tp-shell { background: transparent; }
html[data-theme] #tp-app-shell.tp-shell .tp-topbar {
    background: var(--tp-glass-subtle);
    border: 0;
    border-bottom: 1px solid var(--tp-glass-border);
    backdrop-filter: blur(var(--tp-blur-md));
    -webkit-backdrop-filter: blur(var(--tp-blur-md));
    box-shadow: inset 0 1px 0 var(--tp-glass-highlight);
}
html[data-theme] #tp-app-shell.tp-shell .tp-topbar__inner { background: transparent; }
html[data-theme] #tp-app-shell.tp-shell .tp-desktop-nav {
    position: relative;
    isolation: isolate;
    border-color: var(--tp-glass-border);
    border-radius: 18px;
    background: var(--tp-glass-highlight);
}
.tp-nav-material {
    position: absolute;
    z-index: -1;
    left: 0;
    border: 1px solid var(--tp-glass-border);
    border-radius: 13px;
    background: linear-gradient(135deg, var(--tp-glass-highlight), transparent), var(--tp-glass-selected);
    box-shadow: inset 0 1px 0 var(--tp-glass-highlight), var(--tp-shadow-xs);
    pointer-events: none;
}
html[data-theme] #tp-app-shell.tp-shell .tp-desktop-nav__item {
    border-color: transparent;
    border-radius: 13px;
    background: transparent;
    color: var(--tp-color-text-muted);
}
html[data-theme] #tp-app-shell.tp-shell .tp-desktop-nav__item::after { display: none; }
html[data-theme] #tp-app-shell.tp-shell .tp-desktop-nav__item.is-active { color: var(--tp-color-text); background: var(--tp-glass-selected); box-shadow: none; }
html[data-theme] #tp-app-shell.tp-shell .tp-desktop-nav[data-material-ready] .tp-desktop-nav__item.is-active { background: transparent; }
html[data-theme] :is(.tp-profile-trigger, .tp-shell-icon-button, .tp-online-status) {
    border: 1px solid var(--tp-glass-border);
    border-radius: var(--tp-control-radius);
    background: var(--tp-glass-highlight);
    box-shadow: inset 0 1px 0 var(--tp-glass-highlight);
}
html[data-theme] :is(.tp-tools-menu, .tp-profile-menu, .tp-notification-center) {
    background: var(--tp-glass-strong);
    color: var(--tp-color-text);
    border: 1px solid var(--tp-glass-border);
    border-radius: 20px;
    box-shadow: var(--tp-glass-shadow);
    backdrop-filter: blur(var(--tp-blur-lg));
    -webkit-backdrop-filter: blur(var(--tp-blur-lg));
    transform-origin: top right;
    animation: none;
    transition: opacity var(--tp-motion-exit) var(--tp-ease-out), transform var(--tp-motion-exit) var(--tp-ease-out), display var(--tp-motion-exit) allow-discrete;
}
html[data-theme] :is(.tp-tools-menu, .tp-profile-menu, .tp-notification-center):not([hidden]) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-duration: var(--tp-motion-overlay);
}
html[data-theme] :is(.tp-tools-menu, .tp-profile-menu, .tp-notification-center)[hidden] { opacity: 0; transform: translateY(-6px) scale(.97); }
@starting-style {
    html[data-theme] :is(.tp-tools-menu, .tp-profile-menu, .tp-notification-center):not([hidden]) { opacity: 0; transform: translateY(-6px) scale(.97); }
}
html[data-theme] :is(.modal-card, .modal-content, .modal-sheet, .match-result-card) {
    background: linear-gradient(145deg, var(--tp-glass-highlight), transparent 55%), var(--tp-glass-strong);
    border: 1px solid var(--tp-glass-border);
    border-radius: var(--tp-material-radius);
    color: var(--tp-color-text);
    box-shadow: var(--tp-glass-shadow);
}
html[data-theme] .modal-overlay {
    background: var(--tp-glass-scrim);
    backdrop-filter: blur(var(--tp-blur-sm));
    -webkit-backdrop-filter: blur(var(--tp-blur-sm));
}
/* One blur layer on the scrim; foreground motion only transforms/opacity. */
html[data-theme] :is(.modal-overlay, .overlay)[role="dialog"] {
    transition: opacity var(--tp-motion-exit) var(--tp-ease-out), display var(--tp-motion-exit) allow-discrete;
}
html[data-theme] :is(.modal-overlay, .overlay)[role="dialog"]:not(.open) { opacity: 0; }
html[data-theme] :is(.modal-overlay, .overlay)[role="dialog"].open { opacity: 1; transition-duration: var(--tp-motion-overlay); }
html[data-theme] :is(.modal-overlay, .overlay)[role="dialog"] :is(.modal-sheet, .modal-card, .match-result-card) {
    animation: none;
    transform-origin: center;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity var(--tp-motion-overlay) var(--tp-ease-out), transform var(--tp-motion-overlay) var(--tp-ease-out);
}
html[data-theme] :is(.modal-overlay, .overlay)[role="dialog"]:not(.open) :is(.modal-sheet, .modal-card, .match-result-card) {
    opacity: 0;
    transform: translateY(8px) scale(.97);
    transition-duration: var(--tp-motion-exit);
}
@starting-style {
    html[data-theme] :is(.modal-overlay, .overlay)[role="dialog"].open { opacity: 0; }
    html[data-theme] :is(.modal-overlay, .overlay)[role="dialog"].open :is(.modal-sheet, .modal-card, .match-result-card) { opacity: 0; transform: translateY(8px) scale(.97); }
}
html[data-theme] #confirm-dialog .confirm-dialog-sheet > p { color: var(--tp-color-text-muted); }
html[data-theme] #game-history-overlay :is(th, td:first-child) { color: var(--tp-color-text-muted) !important; }
html[data-theme] :is(#news-detail-dialog, #confirm-dialog, #end-screen) :is(.modal-sheet, .match-result-card) {
    background: linear-gradient(145deg, var(--tp-glass-highlight), transparent 55%), var(--tp-glass-strong);
    border-color: var(--tp-glass-border);
    border-radius: var(--tp-material-radius);
    box-shadow: var(--tp-glass-shadow);
}
html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-tile--play:last-child { border-right: 1px solid var(--tp-glass-border); }
html[data-theme] :is(.tp-tools-menu, .tp-profile-menu) button { min-height: 44px; border-radius: 10px; color: var(--tp-color-text); }
html[data-theme] :is(button, a, [role="button"]) { touch-action: manipulation; }
html[data-theme] button { -webkit-tap-highlight-color: transparent; }
html[data-theme] :is(.ai-segment-option, .ai-choice-card, .tp-play-mode, .tp-dash-tile--play, .tp-button, .ai-start-button) {
    transition: transform var(--tp-motion-press) var(--tp-ease-out), background-color var(--tp-motion-fast) ease, border-color var(--tp-motion-fast) ease;
}
html[data-theme] :is(.ai-segment-option, .ai-choice-card, .tp-play-mode, .tp-dash-tile--play, .tp-button):active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }
html[data-theme] :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--tp-color-focus); outline-offset: 4px; }
html[data-theme] :is(button:disabled, button[aria-disabled="true"]) { cursor: not-allowed; }
html[data-theme] .sm-auth-input { background: var(--tp-color-page) !important; color: var(--tp-color-text) !important; border-color: var(--tp-glass-border) !important; }
html[data-theme] .sm-auth-input::placeholder { color: var(--tp-color-text-muted) !important; opacity: 1; }

/* Home: photographic gaming stage + an inset functional glass panel. */
html[data-theme] #screen-home.tp-dash { background: transparent; }
html[data-theme] #screen-home.tp-dash::before { display: none; }
html[data-theme] #screen-home .tp-dash__content { max-width: 1280px; gap: 28px; }
html[data-theme] #screen-home .tp-dash-id { padding: 0; }
html[data-theme] #screen-home .tp-dash-id__avatar { width: 48px; height: 48px; border: 1px solid var(--tp-glass-border); background: var(--tp-glass-selected); }
html[data-theme] #screen-home .tp-dash-id__name { font-size: 20px; }
html[data-theme] #screen-home .tp-dash-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr);
    min-height: 330px;
    padding: 24px;
    border: 1px solid var(--tp-glass-border);
    border-radius: 28px;
    background: var(--tp-color-surface);
    box-shadow: var(--tp-glass-shadow);
    overflow: hidden;
    isolation: isolate;
}
html[data-theme] #screen-home .tp-dash-stage__board { position: absolute; inset: 0; height: 100%; min-height: 0; z-index: -1; background: var(--tp-color-wood); }
html[data-theme] #screen-home .tp-dash-stage__board img { width: 100%; height: 100%; object-fit: cover; object-position: left 45%; }
html[data-theme] #screen-home .tp-dash-stage__board::after { background: linear-gradient(90deg, transparent 20%, var(--tp-glass-scrim) 78%), linear-gradient(0deg, var(--tp-glass-scrim), transparent 65%); }
html[data-theme] #screen-home .tp-dash-stage__wordmark {
    left: 32px; bottom: 28px;
    color: #fff4e2;
    font: 700 clamp(28px, 3.2vw, 46px)/1.03 var(--tp-font-display);
    letter-spacing: -.04em;
    text-shadow: 0 2px 16px #17130e;
}
html[data-theme] #screen-home .tp-dash-stage .tp-dash-primary {
    grid-column: 2;
    align-self: center;
    padding: 28px;
    background: var(--tp-glass-medium);
    border: 1px solid var(--tp-glass-border);
    border-radius: var(--tp-material-radius);
    backdrop-filter: blur(var(--tp-blur-md));
    -webkit-backdrop-filter: blur(var(--tp-blur-md));
    box-shadow: var(--tp-glass-shadow);
}
html[data-theme] #screen-home .tp-dash-primary__card { background: transparent; border: 0; padding: 0; box-shadow: none; }
html[data-theme] #screen-home .tp-dash-primary__headline { font: 700 clamp(24px, 2.8vw, 34px)/1.15 var(--tp-font-sans); letter-spacing: -.03em; }
html[data-theme] #screen-home .tp-dash-ai__name { font: 700 26px/1.15 var(--tp-font-sans); letter-spacing: -.03em; }
html[data-theme] #screen-home .tp-dash-ai__portrait { border: 1px solid var(--tp-glass-border); border-radius: 18px; background: var(--tp-glass-selected); }
html[data-theme] #screen-home .tp-dash-primary__kicker { color: var(--tp-color-text-muted); font-size: 12px; letter-spacing: .03em; }
html[data-theme] #screen-home :is(.tp-dash-primary__go, .tp-dash-primary__start, .tp-dash-primary__cta) {
    min-height: 50px;
    border: 1px solid var(--tp-color-primary);
    border-radius: var(--tp-control-radius);
    background: var(--tp-color-primary);
    color: var(--tp-color-primary-ink);
    box-shadow: inset 0 1px 0 var(--tp-glass-highlight), var(--tp-shadow-sm);
    transition: transform var(--tp-motion-press) var(--tp-ease-out), background-color var(--tp-motion-fast) ease;
}
html[data-theme] #screen-home .tp-dash-block__head h2 { font: 700 18px/1.3 var(--tp-font-sans); letter-spacing: -.02em; }
html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-block__head h2::before { display: none; }
html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-row--modes { background: transparent; padding: 0; border: 0; box-shadow: none; gap: 14px; overflow: visible; }
html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-tile--play {
    position: relative;
    isolation: isolate;
    flex: 1;
    min-height: 98px;
    padding: 20px;
    border: 1px solid var(--tp-glass-border);
    border-radius: 20px;
    background: linear-gradient(135deg, var(--tp-glass-highlight), transparent 70%), var(--tp-color-surface);
    box-shadow: inset 0 1px 0 var(--tp-glass-highlight);
    overflow: hidden;
}
html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-tile--play::before {
    content: '';
    position: absolute;
    inset: -50%;
    z-index: -1;
    background: linear-gradient(115deg, transparent 45%, var(--tp-glass-reflection) 50%, transparent 55%);
    opacity: 0;
    transform: translateX(-20%);
    transition: transform var(--tp-motion-overlay) var(--tp-ease-out), opacity var(--tp-motion-fast) ease;
}
html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-tile--play::after { display: none; }
html[data-theme] #screen-home :is(.tp-dash-today, #home-progress-row) { border: 1px solid var(--tp-glass-border); border-radius: 18px; background: var(--tp-color-surface); box-shadow: inset 0 1px 0 var(--tp-glass-highlight); }
html[data-theme] #screen-home #home-progress-row .tp-dash-tile__value { font-size: 30px; font-variant-numeric: tabular-nums; }
html[data-theme] #screen-home .tp-dash-feature { border: 1px solid var(--tp-glass-border); border-radius: 20px; background: linear-gradient(135deg, var(--tp-glass-reflection), transparent), var(--tp-color-surface); }
html[data-theme] #screen-home .tp-dash-feature__copy { padding: 22px; }

/* Play is a choice workspace. No repeated Home photograph or hidden modes. */
html[data-theme] #screen-play .tp-play-hub__bar {
    display: flex; align-items: center; justify-content: flex-start; gap: 16px;
    width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 24px 18px;
    border: 0; background: transparent;
}
html[data-theme] #screen-play .tp-play-hub__bar h1 { margin: 0; font: 700 32px/1.15 var(--tp-font-sans); letter-spacing: -.035em; text-align: left; }
html[data-theme] #screen-play .tp-play-hub__heading p { margin: 7px 0 0; color: var(--tp-color-text-muted); font-size: 14px; line-height: 1.45; }
html[data-theme] #screen-play .tp-play-hub__content { max-width: 1200px; padding: 8px 24px 40px; gap: 0; }
html[data-theme] #screen-play .tp-play-hub__top {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 20px; min-height: 0; overflow: visible; border: 0; border-radius: 0;
    background: none; box-shadow: none;
}
html[data-theme] #screen-play .tp-play-hub__start {
    display: grid; align-content: center; gap: 24px; padding: 28px;
    border: 1px solid var(--tp-glass-border); border-radius: var(--tp-material-radius);
    background: linear-gradient(140deg, var(--tp-glass-reflection), transparent 70%), var(--tp-color-surface);
    box-shadow: inset 0 1px 0 var(--tp-glass-highlight);
}
html[data-theme] #screen-play .tp-play-time { min-width: 0; margin: 0; }
html[data-theme] #screen-play .tp-play-time legend { display: flex; align-items: center; gap: 12px; padding: 0; font: 700 24px/1.25 var(--tp-font-sans); letter-spacing: -.025em; color: var(--tp-color-text); }
html[data-theme] #screen-play .tp-play-time legend i { color: var(--tp-color-primary); font-size: 20px; }
html[data-theme] #screen-play .tp-play-quick-note { margin: 10px 0 24px; color: var(--tp-color-text-muted); font-size: 14px; line-height: 1.5; }
html[data-theme] #screen-play .tp-play-time__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html[data-theme] #screen-play .tp-play-time__option { min-height: 64px !important; height: 64px; border: 1px solid var(--tp-glass-border); border-radius: 12px !important; color: var(--tp-color-text-muted); }
html[data-theme] #screen-play .tp-play-time__option.selected { color: var(--tp-color-text); }
html[data-theme] #screen-play .tp-play-time__option strong { font: 700 19px/1.2 var(--tp-font-sans); font-variant-numeric: tabular-nums; }
html[data-theme] #screen-play .tp-play-cta { min-height: 52px; height: auto; border-radius: var(--tp-control-radius); background: var(--tp-color-primary); color: var(--tp-color-primary-ink); font: 700 15px/1.3 var(--tp-font-sans); box-shadow: none; }
html[data-theme] #screen-play .tp-play-modes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; border: 0; }
html[data-theme] #screen-play :is(.tp-play-modes, .tp-play-more__body) .tp-play-mode {
    display: flex; align-items: center; justify-content: flex-start; gap: 16px;
    min-width: 0; min-height: 88px; padding: 20px; text-align: left;
    border: 1px solid var(--tp-glass-border); border-radius: 18px !important;
    background: linear-gradient(135deg, var(--tp-glass-highlight), transparent 70%), var(--tp-color-surface);
    box-shadow: inset 0 1px 0 var(--tp-glass-highlight) !important;
    color: var(--tp-color-text);
    transition: transform var(--tp-motion-press) var(--tp-ease-out), border-color var(--tp-motion-fast) ease, background-color var(--tp-motion-fast) ease;
}
html[data-theme] #screen-play :is(.tp-play-modes, .tp-play-more__body) .tp-play-mode > i:first-child { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; background: var(--tp-glass-selected); color: var(--tp-color-primary); font-size: 19px; }
html[data-theme] #screen-play .tp-play-mode span { min-width: 0; display: grid; justify-items: start; gap: 5px; }
html[data-theme] #screen-play .tp-play-mode strong { font: 700 17px/1.3 var(--tp-font-sans); }
html[data-theme] #screen-play .tp-play-mode small { display: block; color: var(--tp-color-text-muted); font: 400 13px/1.45 var(--tp-font-sans); white-space: normal; }
html[data-theme] #screen-play .tp-play-mode__arrow { margin-left: auto; color: var(--tp-color-text-muted); font-size: 14px; }
html[data-theme] #screen-play .tp-play-more { width: 100%; margin: 24px 0 0; border: 0; border-radius: 0; background: none; }
html[data-theme] #screen-play .tp-play-hub__alternatives { margin: 0 0 12px; font: 600 14px/1.4 var(--tp-font-sans); color: var(--tp-color-text-muted); }
html[data-theme] #screen-play .tp-play-more__body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; padding: 0; }
html[data-theme] #screen-play .tp-play-more__body .tp-play-mode { align-items: flex-start; flex-wrap: wrap; gap: 12px; padding: 18px; min-height: 148px; }
html[data-theme] #screen-play .tp-play-more__body .tp-play-mode span { flex: 1 0 100%; order: 2; }
html[data-theme] #screen-play .tp-play-more__body .tp-play-mode strong { font-size: 15px; }
html[data-theme] #screen-play .tp-play-mode.is-disabled { opacity: 1; color: var(--tp-color-text-muted); background: var(--tp-glass-subtle); box-shadow: none !important; }
html[data-theme] #screen-play .tp-play-mode.is-disabled > i:first-child { color: var(--tp-color-text-muted); background: var(--tp-glass-highlight); }
html[data-theme] #screen-play .tp-play-badge { position: static; order: 1; margin-left: auto; color: var(--tp-color-text-muted); border: 1px solid var(--tp-glass-border); border-radius: 7px; padding: 3px 7px; font-size: 11px; font-style: normal; }
@media (hover: hover) and (pointer: fine) {
    html[data-theme] #screen-play .tp-play-mode:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--tp-color-primary); }
    html[data-theme] #screen-play .tp-play-cta:hover { background: var(--tp-color-primary-hover); }
}
@media (min-width: 1025px) and (max-height: 700px) {
    html[data-theme] #screen-play { padding-top: 4px; }
    html[data-theme] #screen-play .tp-play-hub__bar { padding-block: 16px 12px; }
    html[data-theme] #screen-play .tp-play-hub__start { padding: 20px; gap: 16px; }
    html[data-theme] #screen-play .tp-play-quick-note { margin-bottom: 16px; }
    html[data-theme] #screen-play .tp-play-time__option { height: 56px; min-height: 56px !important; }
    html[data-theme] #screen-play .tp-play-modes .tp-play-mode { min-height: 76px; padding: 16px; }
    html[data-theme] #screen-play .tp-play-more { margin-top: 16px; }
    html[data-theme] #screen-play .tp-play-more__body .tp-play-mode { padding: 16px; min-height: 128px; }
    html[data-theme] #screen-play .tp-play-more__body .tp-play-mode > i:first-child { flex-basis: 36px; width: 36px; height: 36px; font-size: 17px; }
}
@media (max-width: 767px) {
    html[data-theme] #screen-play .tp-play-hub__bar { padding: 14px 16px 12px; gap: 12px; }
    html[data-theme] #screen-play .tp-play-hub__bar h1 { font-size: 25px; }
    html[data-theme] #screen-play .tp-play-hub__heading p { font-size: 12px; }
    html[data-theme] #screen-play .tp-play-hub__content { padding: 4px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
    html[data-theme] #screen-play .tp-play-hub__top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    html[data-theme] #screen-play .tp-play-hub__start { padding: 16px; gap: 12px; border-radius: 20px; }
    html[data-theme] #screen-play .tp-play-time legend { font-size: 20px; }
    html[data-theme] #screen-play .tp-play-quick-note { margin: 8px 0 12px; font-size: 12px; }
    html[data-theme] #screen-play .tp-play-time__option { height: 44px; min-height: 44px !important; }
    html[data-theme] #screen-play .tp-play-cta { min-height: 44px; }
    html[data-theme] #screen-play .tp-play-modes { gap: 10px; }
    html[data-theme] #screen-play .tp-play-modes .tp-play-mode { min-height: 68px; padding: 10px 14px; gap: 12px; }
    html[data-theme] #screen-play .tp-play-modes .tp-play-mode > i:first-child { flex-basis: 36px; width: 36px; height: 36px; border-radius: 11px; font-size: 17px; }
    html[data-theme] #screen-play .tp-play-mode strong { font-size: 15px; }
    html[data-theme] #screen-play .tp-play-mode small { font-size: 12px; }
    html[data-theme] #screen-play .tp-play-more__body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    html[data-theme] #screen-play .tp-play-more__body .tp-play-mode { padding: 14px; min-height: 164px; }
    html[data-theme] #screen-play .tp-play-badge { font-size: 10px; padding-inline: 5px; }
}

/* AI: one high-contrast work surface, with distinct opponent and selection. */
html[data-theme] #screen-bot-setup .ai-setup-config { border: 1px solid var(--tp-glass-border); border-radius: var(--tp-material-radius); background: var(--tp-color-surface); box-shadow: var(--tp-glass-shadow); padding: 28px; }
html[data-theme] #screen-bot-setup .ai-setup-preview { border: 1px solid var(--tp-glass-border); border-radius: var(--tp-material-radius); background: linear-gradient(145deg, var(--tp-glass-reflection), transparent 65%), var(--tp-glass-strong); box-shadow: var(--tp-glass-shadow); padding: 24px; }
html[data-theme] #screen-bot-setup .ai-segmented { border: 1px solid var(--tp-glass-border); border-radius: 17px; background: var(--tp-color-page); padding: 5px; gap: 5px; }
html[data-theme] #screen-bot-setup :is(.ai-segment-option, .ai-choice-card) { border-radius: 12px; background: var(--tp-color-surface-raised); border: 1px solid var(--tp-glass-border); color: var(--tp-color-text); }
html[data-theme] #screen-bot-setup :is(.ai-segment-option, .ai-choice-card).selected { background: var(--tp-glass-selected); border-color: var(--tp-color-primary); box-shadow: inset 0 1px 0 var(--tp-glass-highlight), inset 0 -2px 0 var(--tp-color-primary); }
html[data-theme] #screen-bot-setup .ai-choice-card { min-height: 94px; padding: 16px; }
html[data-theme] #screen-bot-setup .ai-choice-card strong { font-size: 17px; }
/* Each level is a person: the portrait, round like a messenger avatar, sits where a number tile used to. */
html[data-theme] #screen-bot-setup .ai-choice-card[data-ai-level]::before {
    content: '';
    display: block;
    width: var(--ai-face-size, 54px);
    height: var(--ai-face-size, 54px);
    border: 1px solid rgba(212, 162, 76, 0.45);
    border-radius: 50%;
    background-color: #141210;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: none;
    filter: none;
}
html[data-theme] #screen-bot-setup .ai-choice-card[aria-disabled="true"]::before { filter: grayscale(0.55) brightness(0.86); opacity: 0.7; }
html[data-theme] #screen-bot-setup .ai-start-button { border-radius: var(--tp-control-radius) !important; box-shadow: var(--tp-shadow-sm) !important; transition: transform var(--tp-motion-press) var(--tp-ease-out), background-color var(--tp-motion-fast) ease !important; }

/* Workspaces use one dense material around the stable, opaque game board. */
html[data-theme] #screen-game {
    --mb-shell: var(--tp-color-page);
    --mb-panel: var(--tp-glass-strong);
    --mb-panel-raised: var(--tp-color-surface-raised);
    --mb-panel-border: var(--tp-glass-border);
    --mb-text: var(--tp-color-text);
    --mb-text-soft: var(--tp-color-text-muted);
}
html[data-theme] #screen-game .game-side-panel { background: var(--tp-glass-strong); border: 1px solid var(--tp-glass-border); border-radius: 20px; box-shadow: var(--tp-glass-shadow); }
html[data-theme] #screen-game .game-action-strip button { transition: transform var(--tp-motion-press) var(--tp-ease-out), border-color var(--tp-motion-fast) ease; }
html[data-theme] #screen-game .game-action-strip button:active { transform: scale(.98); }
html[data-theme] :is(.game-side-panel, .tp-analysis-control-card, .tp-opening-panel) { background: var(--tp-glass-strong); border: 1px solid var(--tp-glass-border); box-shadow: var(--tp-glass-shadow); }
html[data-theme] .game-side-panel { transition: transform var(--tp-motion-overlay) var(--tp-ease-drawer), opacity var(--tp-motion-overlay) var(--tp-ease-out); }
html[data-theme] .material-game-bar { background: var(--tp-glass-strong); border-bottom: 1px solid var(--tp-glass-border); }
html[data-theme] :is(.tp-play-mode, .tp-tournament-card, .tp-profile-summary) { background: linear-gradient(145deg, var(--tp-glass-highlight), transparent), var(--tp-color-surface); border: 1px solid var(--tp-glass-border); border-radius: 20px; }
html[data-theme] .tp-play-time__option.selected { background: var(--tp-glass-selected); color: var(--tp-color-text); border-color: var(--tp-color-primary); }

@media (hover: hover) and (pointer: fine) {
    html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-tile--play:hover { transform: translateY(-2px); background-color: var(--tp-color-surface-raised); border-color: var(--tp-color-border-strong); }
    html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-tile--play:hover::before { opacity: 1; transform: translateX(20%); }
    html[data-theme] #screen-home :is(.tp-dash-primary__go, .tp-dash-primary__start):hover { background: var(--tp-color-primary-hover); }
    html[data-theme] #screen-bot-setup :is(.ai-segment-option, .ai-choice-card):hover:not([aria-disabled="true"]):not(:disabled) { border-color: var(--tp-color-primary); transform: translateY(-1px); }
}
@media (min-width: 1025px) {
    html[data-theme] body:not(.game-active) #screen-analysis .tp-analysis-control-card { padding: 20px !important; background: linear-gradient(145deg, var(--tp-glass-highlight), transparent 60%), var(--tp-glass-strong) !important; border: 1px solid var(--tp-glass-border) !important; border-radius: 20px; box-shadow: var(--tp-glass-shadow) !important; }
    html[data-theme] #screen-home .tp-dash__content { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); padding-top: 24px; }
    html[data-theme] #screen-home .tp-dash-id { grid-column: 1 / -1; }
    html[data-theme] #screen-home .tp-dash-stage { grid-column: 1 / -1; }
    html[data-theme] #screen-home .tp-dash-block--modes { grid-column: 1 / -1; }
    html[data-theme] #screen-bot-setup .ai-trainer-workspace { gap: 24px; }
}
@media (max-width: 767px) {
    html[data-theme] #screen-home .tp-dash__content { gap: 22px; }
    html[data-theme] #screen-home .tp-dash-stage { display: block; padding: 150px 14px 14px; min-height: 0; border-radius: 22px; }
    html[data-theme] #screen-home .tp-dash-stage__wordmark { top: 24px; bottom: auto; left: 24px; font-size: 25px; }
    html[data-theme] #screen-home .tp-dash-stage .tp-dash-primary { padding: 20px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--tp-glass-strong); border-radius: 18px; }
    html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-row--modes { gap: 10px; overflow-x: auto; padding-bottom: 4px; }
    html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-tile--play { flex: 0 0 160px; min-height: 96px; padding: 16px; }
    html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-tile--play .tp-dash-tile__value { white-space: normal; overflow: visible; line-height: 1.25; font-size: 14px; }
    html[data-theme] #screen-bot-setup :is(.ai-setup-config, .ai-setup-preview) { padding: 20px; border-radius: 20px; }
    html[data-theme] #screen-bot-setup .ai-difficulty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    html[data-theme] #screen-bot-setup .ai-choice-card[data-ai-level] { grid-template-columns: 44px minmax(0, 1fr) !important; gap: 8px; padding: 12px; min-height: 116px; }
    html[data-theme] #screen-bot-setup .ai-choice-card[data-ai-level]::before { --ai-face-size: 44px; grid-row: 1; }
    html[data-theme] #screen-bot-setup .ai-choice-card strong { grid-column: 1 / -1; font-size: 14px; line-height: 1.25; overflow-wrap: normal; }
    html[data-theme] #screen-bot-setup .ai-choice-card__badge { grid-column: 1 / -1; }
    html[data-theme] #screen-bot-setup .ai-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    html[data-theme] #screen-bot-setup .ai-time-grid .ai-choice-card { min-height: 64px; padding: 10px; }
    html[data-theme] #screen-bot-setup .ai-setup-shell { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
    html[data-theme] #screen-bot-setup .ai-setup-cta-wrap { position: fixed; z-index: 9999; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); margin: 0; }
    html[data-theme] #screen-bot-setup .ai-start-button { background: var(--tp-color-primary) !important; color: var(--tp-color-primary-ink) !important; min-height: 52px !important; }
    html[data-theme] .tp-mobile-nav { background: var(--tp-glass-strong); border: 1px solid var(--tp-glass-border); box-shadow: var(--tp-glass-shadow); }
}
/* Focused correction pass: distinct tint, edge and shadow at each depth.
 * Settings keeps its existing scoped material and layout. */
html[data-theme="steppe-light"] {
    --tp-material-1: color-mix(in srgb, var(--tp-color-surface-raised) 46%, var(--tp-color-page));
    --tp-material-2: color-mix(in srgb, var(--tp-color-surface) 97%, transparent);
    --tp-material-3: color-mix(in srgb, var(--tp-color-surface-raised) 93%, transparent);
    --tp-material-4: color-mix(in srgb, var(--tp-color-surface) 80%, #fffdf6);
    --tp-material-sheen: rgba(255, 253, 245, .82);
    --tp-material-shadow-ink: #473b25;
}
html[data-theme] #tp-app-shell.tp-shell .tp-topbar {
    background: var(--tp-material-3);
    border-bottom-color: var(--tp-material-edge);
    box-shadow: var(--tp-material-shadow-3);
}
html[data-theme] :is(.tp-tools-menu, .tp-profile-menu, .tp-notification-center) {
    background: linear-gradient(130deg, var(--tp-glass-reflection), transparent 54%), var(--tp-material-3);
    border-color: var(--tp-material-edge);
    box-shadow: var(--tp-material-shadow-3);
}
html[data-theme] :is(.modal-sheet, .modal-card, .match-result-card),
html[data-theme] :is(#news-detail-dialog, #confirm-dialog, #end-screen, #game-menu-overlay, #game-history-overlay) :is(.modal-sheet, .match-result-card) {
    background: linear-gradient(150deg, var(--tp-glass-reflection), transparent 58%), var(--tp-material-4) !important;
    border-color: var(--tp-material-edge) !important;
    box-shadow: var(--tp-material-shadow-4) !important;
    color: var(--tp-color-text);
}
/* These legacy children set literal white/gold, some with !important. */
html[data-theme] #screen-league :is(.logo-text, .league-season-title, .lb-name, .lb-rating-val, .league-pool-name) {
    color: var(--tp-color-text) !important;
    -webkit-text-fill-color: currentColor;
    opacity: 1;
}
html[data-theme] #screen-league :is(.league-season-sub, .lb-head, .lb-rank__num, .lb-rating-peak, .lb-rating-label, .league-pool-tc, .league-loading) { color: var(--tp-color-text-muted) !important; opacity: 1; }
html[data-theme] #screen-league .logo-text { background: none; background-clip: border-box; }
html[data-theme] #screen-league .league-pool-switch { background: var(--tp-material-1); border-color: var(--tp-material-edge); }
html[data-theme] #screen-league .league-pool-tab.is-active { background: var(--tp-material-2); box-shadow: var(--tp-material-shadow-2), inset 0 -2px var(--tp-color-primary); }
html[data-theme] #screen-league .lb-card { background: var(--tp-material-2) !important; border-color: var(--tp-material-edge) !important; box-shadow: var(--tp-material-shadow-2); }
html[data-theme] #end-screen #end-title { color: var(--tp-color-text) !important; -webkit-text-fill-color: currentColor; opacity: 1; }
html[data-theme] #end-screen[data-outcome="loss"] #end-title { color: var(--tp-color-danger) !important; }
html[data-theme] #end-screen[data-outcome="win"] #end-title { color: var(--tp-color-success) !important; }
html[data-theme] #end-screen .match-result-score { color: var(--tp-color-text) !important; opacity: 1; }
html[data-theme] #end-screen :is(.match-result-players, .match-result-kicker, .end-subtitle, .match-analysis-note, .match-result-details dt) { color: var(--tp-color-text-muted) !important; opacity: 1; }
html[data-theme] #end-screen .match-result-details { background: var(--tp-material-edge) !important; border-color: var(--tp-material-edge) !important; }
html[data-theme] #end-screen .match-result-details > div { background: var(--tp-material-1) !important; }
html[data-theme] #end-screen .match-result-details:has(> #end-rating-row[hidden]) > div:nth-child(3) { grid-column: 1 / -1; }
html[data-theme] #end-screen .match-result-details dd { color: var(--tp-color-text) !important; }
html[data-theme] #end-screen .match-result-details dt { font-size: 11px !important; letter-spacing: .035em; }
html[data-theme] #end-screen .match-analysis-note { font-size: 12px !important; }
html[data-theme] #end-screen .match-guest-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin: -2px auto 0; padding: 0 14px; border: 1px solid var(--tp-color-primary); border-radius: 999px; background: transparent; color: var(--tp-color-primary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
html[data-theme] #end-screen .match-guest-save[hidden] { display: none; }
html[data-theme] #end-screen .match-guest-save:focus-visible { outline: 2px solid var(--tp-color-primary); outline-offset: 2px; }
html[data-theme] #end-screen .match-result-action { color: var(--tp-color-text) !important; background: var(--tp-material-2) !important; border-color: var(--tp-material-edge) !important; }
html[data-theme] #end-screen .match-result-action--primary:not(:disabled) { background: var(--tp-color-primary) !important; color: var(--tp-color-primary-ink) !important; border-color: var(--tp-color-primary) !important; }
html[data-theme] #end-screen .match-result-actions:has(#btn-end-review:disabled) #btn-end-rematch { background: var(--tp-color-primary) !important; color: var(--tp-color-primary-ink) !important; border-color: var(--tp-color-primary) !important; }
html[data-theme] #end-screen .match-result-action:disabled { opacity: 1; color: var(--tp-color-text-muted) !important; background: var(--tp-material-1) !important; box-shadow: none; }
html[data-theme] #end-screen .match-result-card::before { height: 1px; background: linear-gradient(90deg, transparent, var(--tp-material-sheen), transparent); }

/* The hero and entry row stay intact; only lower dashboard regions regroup. */
.tp-dash-dashboard { display: contents; }
html[data-theme] #screen-home :is(.tp-dash-today, #home-progress-row, .tp-dash-history-row, .tp-dash-wide, .tp-release-news__card) { background: var(--tp-material-1); border-color: var(--tp-material-edge); box-shadow: inset 0 1px var(--tp-material-sheen); }
html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-tile--play { background: linear-gradient(145deg, var(--tp-glass-reflection), transparent 60%), var(--tp-material-2); box-shadow: var(--tp-material-shadow-2); border-color: var(--tp-material-edge); }
@media (min-width: 1025px) {
    html[data-theme] #screen-home .tp-dash-dashboard { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 24px; }
    /* Row 1 is personal: last game, today, progress. League moves beside news. */
    html[data-theme] #screen-home .tp-dash-block--last { grid-column: 1; grid-row: 1; }
    html[data-theme] #screen-home .tp-dash-block--today { grid-column: 2; grid-row: 1; }
    html[data-theme] #screen-home .tp-dash-block--progress { grid-column: 3; grid-row: 1; }
    html[data-theme] #screen-home .tp-dash-block--news { grid-column: 1 / 3; grid-row: 2; }
    html[data-theme] #screen-home .tp-dash-block--league { grid-column: 3; grid-row: 2; }
    html[data-theme] #screen-home .tp-dash-block--community { grid-column: 1 / 3; grid-row: 3; }
    html[data-theme] #screen-home .tp-dash-block--recent { grid-column: 3; grid-row: 3; }
    html[data-theme] #screen-home .tp-dash-dashboard:has(.tp-dash-block--recent.is-empty) .tp-dash-block--community { grid-column: 1 / -1; }
    /* No last-game card (a game is in progress): the original three-up row. */
    html[data-theme] #screen-home .tp-dash-dashboard:has(.tp-dash-block--last.is-empty) .tp-dash-block--today { grid-column: 1; }
    html[data-theme] #screen-home .tp-dash-dashboard:has(.tp-dash-block--last.is-empty) .tp-dash-block--progress { grid-column: 2; }
    html[data-theme] #screen-home .tp-dash-dashboard:has(.tp-dash-block--last.is-empty) .tp-dash-block--league { grid-column: 3; grid-row: 1; }
    html[data-theme] #screen-home .tp-dash-dashboard:has(.tp-dash-block--last.is-empty) .tp-dash-block--news { grid-column: 1 / -1; }
    html[data-theme] #screen-home #home-today-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 148px; gap: 8px; }
    html[data-theme] #screen-home #home-today-row .tp-dash-today--wide { grid-column: 1 / -1; min-width: 0; }
    html[data-theme] #screen-home #home-progress-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 148px; padding: 12px; gap: 8px; }
    html[data-theme] #screen-home #home-progress-row .tp-dash-tile { min-width: 0; padding: 8px; border: 0; }
    html[data-theme] #screen-home #home-progress-row .tp-dash-tile__value { font-size: 25px; }
    html[data-theme] #screen-home .tp-dash-block--league .tp-dash-wide { min-height: 148px; padding: 18px; border-radius: 18px; }
    html[data-theme] #screen-home .tp-dash-block--news #home-release-news { display: flex; flex: 1; }
    html[data-theme] #screen-home .tp-dash-block--news .tp-dash-feature { flex: 1; }
    html[data-theme] #screen-home .tp-dash-history-row { min-height: 62px; border: 1px solid var(--tp-material-edge); border-radius: 14px; padding: 12px; }
}
/* Interactive cards are brighter than supporting content; selections keep tint. */
html[data-theme] #screen-play .tp-play-hub__start,
html[data-theme] #screen-play .tp-play-modes .tp-play-mode { background: linear-gradient(140deg, var(--tp-glass-reflection), transparent 64%), var(--tp-material-2); border-color: var(--tp-material-edge); box-shadow: var(--tp-material-shadow-2) !important; }
html[data-theme] #screen-play .tp-play-more__body .tp-play-mode { background: var(--tp-material-1); box-shadow: inset 0 1px var(--tp-material-sheen) !important; }
html[data-theme] #screen-bot-setup .ai-setup-config { background: var(--tp-material-1); box-shadow: inset 0 1px var(--tp-material-sheen); }
html[data-theme] #screen-bot-setup .ai-setup-preview { background: linear-gradient(140deg, var(--tp-glass-reflection), transparent 60%), var(--tp-material-2); border-color: var(--tp-material-edge); box-shadow: var(--tp-material-shadow-2); }
html[data-theme] #screen-bot-setup :is(.ai-segment-option, .ai-choice-card) { background: var(--tp-material-2); border-color: var(--tp-material-edge); box-shadow: var(--tp-material-shadow-2); }
html[data-theme] #screen-bot-setup :is(.ai-segment-option, .ai-choice-card).selected { background: var(--tp-glass-selected); border-color: var(--tp-color-primary); box-shadow: inset 0 1px var(--tp-material-sheen), inset 0 -2px var(--tp-color-primary); }
html[data-theme] #screen-bot-setup .ai-choice-card[aria-disabled="true"] { opacity: 1; background: var(--tp-material-1); box-shadow: none; color: var(--tp-color-text-muted); }
html[data-theme] #screen-bot-setup .ai-choice-card[aria-disabled="true"] :is(strong, .ai-choice-card__badge) { color: var(--tp-color-text-muted); }
html[data-theme] :is(#screen-play .tp-play-cta, #screen-bot-setup .ai-start-button) { box-shadow: 0 5px 14px -6px color-mix(in srgb, var(--tp-color-primary) 40%, transparent) !important; }

/* Game chrome adopts the same materials. Board, pits and stones are excluded. */
html[data-theme] #screen-game { --mb-panel: var(--tp-material-2); --mb-panel-raised: var(--tp-material-1); --mb-panel-border: var(--tp-material-edge); }
html[data-theme] #screen-game .material-game-bar { background: var(--tp-material-3); border-color: var(--tp-material-edge); box-shadow: var(--tp-material-shadow-3); }
html[data-theme] #screen-game .match-player { background: var(--tp-material-2) !important; border: 1px solid var(--tp-material-edge) !important; border-radius: 16px; box-shadow: var(--tp-material-shadow-2) !important; }
html[data-theme] #screen-game .match-player-copy strong { color: var(--tp-color-text) !important; }
html[data-theme] #screen-game :is(.match-player-copy small, .match-side-label) { color: var(--tp-color-text-muted) !important; }
html[data-theme] #screen-game .match-avatar { background: var(--tp-material-1); color: var(--tp-color-primary); border-color: var(--tp-material-edge); }
html[data-theme] #screen-game .match-clock { color: var(--tp-color-text); background: var(--tp-material-1); border-color: var(--tp-material-edge); }
html[data-theme] #screen-game .game-side-panel { background: var(--tp-material-2) !important; border-color: var(--tp-material-edge) !important; box-shadow: var(--tp-material-shadow-2) !important; }
html[data-theme] #screen-game :is(.game-history-inline, .game-eval-panel .eval-box) { background: var(--tp-material-1); border: 1px solid var(--tp-material-edge); border-radius: 14px; }
html[data-theme] #screen-game :is(.game-history-inline__title, .game-drawer-section__title, .game-history-inline__empty, .eval-title, .eval-thinking-pace, #eval-position-summary) { color: var(--tp-color-text-muted) !important; opacity: 1; }
html[data-theme] #screen-game :is(.game-history-inline__row, .game-history-inline__move, .eval-best-move, .game-panel-header, .live-evaluation-numbers) { color: var(--tp-color-text) !important; }
html[data-theme] #screen-game .game-tool-button { background: var(--tp-material-2) !important; border-color: var(--tp-material-edge) !important; color: var(--tp-color-text) !important; box-shadow: inset 0 1px var(--tp-material-sheen); border-radius: 12px; }
html[data-theme] #screen-game .game-tool-button--primary { color: var(--tp-color-primary) !important; background: var(--tp-glass-selected) !important; border-color: var(--tp-color-primary) !important; }
html[data-theme] #screen-game .game-tool-button--danger { color: var(--tp-color-danger) !important; }
html[data-theme] #screen-game .game-tool-button:disabled { opacity: 1; color: var(--tp-color-text-muted) !important; background: var(--tp-material-1) !important; box-shadow: none; }
html[data-theme] #screen-game .game-eval-panel { background: var(--tp-material-3) !important; border-color: var(--tp-material-edge); color: var(--tp-color-text); box-shadow: var(--tp-material-shadow-3); }
html[data-theme] #screen-game .game-live-analysis { background: var(--tp-material-1); border-color: var(--tp-material-edge); box-shadow: inset 0 1px var(--tp-material-sheen); }
html[data-theme] #screen-game :is(.game-live-analysis header strong, #live-analysis-best, .live-evaluation-numbers strong) { color: var(--tp-color-text) !important; }
html[data-theme] #screen-game :is(.game-live-analysis header span, #live-analysis-leader, #live-analysis-pace, .game-history-empty, .game-panel-eyebrow) { color: var(--tp-color-text-muted) !important; opacity: 1; }
html[data-theme] #game-menu-overlay .game-menu-item { background: var(--tp-material-1) !important; border-color: var(--tp-material-edge) !important; box-shadow: inset 0 1px var(--tp-material-sheen); }
html[data-theme] #game-menu-overlay .game-menu-item__title { color: var(--tp-color-text) !important; }
html[data-theme] #game-menu-overlay .game-menu-item__description { color: var(--tp-color-text-muted) !important; }
html[data-theme] #game-menu-overlay .game-menu-item--danger :is(i, .game-menu-item__title) { color: var(--tp-color-danger) !important; }
html[data-theme] #game-history-overlay :is(td, .game-history-empty) { color: var(--tp-color-text) !important; }
@media (pointer: coarse) { html[data-theme] :is(input, select, textarea) { font-size: 16px; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    :root, html[data-theme] { --tp-glass-subtle: var(--tp-color-surface); --tp-glass-medium: var(--tp-color-surface-raised); --tp-glass-strong: var(--tp-color-surface-raised); --tp-glass-border: var(--tp-color-border-strong); --tp-material-2: var(--tp-color-surface); --tp-material-3: var(--tp-color-surface-raised); --tp-material-4: var(--tp-color-surface); --tp-material-edge: var(--tp-color-border-strong); --tp-blur-sm: 0px; --tp-blur-md: 0px; --tp-blur-lg: 0px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme] :is(.tp-tools-menu, .tp-profile-menu, .tp-notification-center, .game-side-panel) { transform: none !important; transition: none !important; }
    html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-tile--play::before { display: none; }
    html[data-theme] :is(button, a):is(:hover, :active) { transform: none !important; }
    html[data-theme] :is(.modal-sheet, .modal-card, .match-result-card) { transform: none !important; filter: none !important; transition: none !important; }
}
/* Keyboard navigation is instantaneous, including existing route transitions. */
html[data-theme] body[data-reduced-motion="true"] :is(.tp-tools-menu, .tp-profile-menu, .tp-notification-center, .game-side-panel, .modal-sheet, .modal-card, .match-result-card) { transform: none !important; filter: none !important; transition: none !important; }
html[data-theme] body[data-reduced-motion="true"] #screen-home .tp-dash-tile--play::before { display: none; }
html[data-theme] body[data-reduced-motion="true"] :is(button, a):is(:hover, :active) { transform: none !important; }
html[data-input="keyboard"] :is(.screen, .modal-overlay, .overlay, .tp-tools-menu, .tp-profile-menu, .tp-notification-center, .game-side-panel, button) { transition: none !important; animation: none !important; }
html[data-input="keyboard"] :is(.modal-sheet, .modal-card, .match-result-card) { transition: none !important; transform: none !important; filter: none !important; }

/* System correction: shared content geometry; Settings remains the benchmark.
   Inner edge = standard container minus its gutter on both sides. */
html[data-theme] :is(#screen-learn, #screen-analysis, #screen-tournaments, #screen-friends, #screen-stats, #screen-help) > .tp-product-content,
html[data-theme] #screen-play :is(.tp-play-hub__bar, .tp-play-hub__content),
html[data-theme] #screen-bot-setup .ai-setup-shell {
    width: min(100%, var(--tp-content-standard));
    max-width: var(--tp-content-standard);
    margin-inline: auto;
    padding-inline: var(--tp-content-gutter);
    box-sizing: border-box;
}
html[data-theme] #screen-play .tp-play-hub__bar { padding-top: var(--tp-page-space); padding-bottom: var(--tp-section-space); }
html[data-theme] #screen-play .tp-play-hub__start { border-radius: var(--tp-radius-panel); }
html[data-theme] #screen-bot-setup :is(.ai-setup-config, .ai-setup-preview) { border-radius: var(--tp-radius-panel); }
html[data-theme] :is(#screen-tournaments, #screen-friends, #screen-stats, #screen-analysis) :is(.tp-product-section, .tp-side-card, .tp-analysis-control-card, .tp-opening-panel) { border-radius: var(--tp-material-radius); }

/* Learn's parent no longer clips a rotated child/shadow. The picture owns
   clipping, with intrinsic aspect ratio instead of a fixed 230px crop. */
html[data-theme] #screen-learn .tp-learning-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-rows: auto;
    gap: var(--tp-section-space);
    overflow: visible;
    border-radius: var(--tp-radius-dialog);
    background: var(--tp-material-2);
    border-color: var(--tp-material-edge);
    box-shadow: var(--tp-material-shadow-2);
}
html[data-theme] #screen-learn .tp-learning-hero__visual {
    width: 100%; height: auto; min-height: 0;
    aspect-ratio: 1.6;
    border-radius: var(--tp-material-radius);
    transform: none;
    box-shadow: var(--tp-material-shadow-3);
}
html[data-theme] #screen-learn .tp-learning-hero__visual img { position: absolute; inset: 0; object-fit: cover; object-position: 50% 48%; }
html[data-theme] #screen-learn .tp-learning-hero__actions { gap: 12px; align-items: stretch; }
html[data-theme] #screen-learn .tp-learning-hero__actions .tp-button { min-height: 44px; align-items: center; border-radius: var(--tp-control-radius); }
html[data-theme] #screen-learn :is(.tp-learning-continue, .tp-learning-category, .tp-practice-card) { border-radius: var(--tp-radius-card); background: var(--tp-material-1); border-color: var(--tp-material-edge); }
html[data-theme] #screen-learn .tp-learning-lesson { border-radius: var(--tp-control-radius); }
html[data-theme] #screen-learn :is(.tp-learning-section, .tp-learning-practice, .tp-learning-lessons) { margin-top: var(--tp-section-space); }

/* Tournament cards retain main + action columns; each column can wrap.
   The directory is a size container, so the split follows available space. */
html[data-theme] .tp-tournament-directory { container-type: inline-size; }
html[data-theme] .tp-tournament-list { gap: var(--tp-section-space); border: 0; }
html[data-theme] .tp-tournament-list__section { display: grid; gap: 12px; border: 0; }
html[data-theme] .tp-tournament-list__section > h3 { padding: 0; }
html[data-theme] .tp-tournament-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, .32fr);
    gap: var(--tp-section-space);
    padding: 20px;
    border: 1px solid var(--tp-material-edge);
    border-radius: var(--tp-radius-card);
    background: var(--tp-material-2);
    box-shadow: var(--tp-material-shadow-2);
    opacity: 1;
}
html[data-theme] .tp-tournament-card:last-child { border-bottom: 1px solid var(--tp-material-edge); }
html[data-theme] .tp-tournament-card :is(.tp-tournament-card__head, .tp-tournament-card__footer, .tp-tournament-meta__item) { min-width: 0; }
html[data-theme] .tp-tournament-card__head { grid-template-columns: minmax(0, 1fr) auto; }
html[data-theme] .tp-tournament-card__head :is(h3, p) { overflow-wrap: anywhere; }
html[data-theme] .tp-tournament-card__footer { align-self: stretch; justify-content: center; padding-inline-start: 20px; border-inline-start: 1px solid var(--tp-material-edge); }
html[data-theme] .tp-tournament-card__actions { width: 100%; flex-wrap: wrap; }
html[data-theme] .tp-tournament-card__actions .tp-button { flex: 1 1 auto; white-space: normal; min-height: 44px; border-radius: var(--tp-control-radius); }
html[data-theme] .tp-tournament-meta { gap: 8px 16px; }
html[data-theme] .tp-tournament-meta__item { overflow-wrap: anywhere; }
@container (max-width: 960px) {
    html[data-theme] .tp-tournament-card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    html[data-theme] .tp-tournament-card__footer { align-items: flex-start; padding: 16px 0 0; border-inline-start: 0; border-top: 1px solid var(--tp-material-edge); }
    html[data-theme] .tp-tournament-card__actions { width: auto; justify-content: flex-start; }
}

/* Floating game chrome. The board's wood/pits/stones are not selectors here. */
html[data-theme] #screen-game .game-side-panel { padding: 16px; gap: 12px; border-radius: var(--tp-radius-panel); }
html[data-theme] #screen-game .game-action-strip { gap: 8px; grid-auto-rows: minmax(44px, auto); }
html[data-theme] #screen-game .game-tool-button { min-width: 0; min-height: 44px; padding: 10px 8px; gap: 8px; border-radius: var(--tp-control-radius); line-height: 1.25; }
html[data-theme] #screen-game .game-tool-button span { min-width: 0; overflow-wrap: normal; }
html[data-theme] #screen-game .game-tool-button i { flex: 0 0 16px; text-align: center; }
html[data-theme] #screen-game .game-tool-button:active:not(:disabled) { transform: scale(.98); }
html[data-theme] #screen-game .game-tool-button:disabled { transform: none; }
html[data-theme] #screen-game .game-live-analysis { padding: 16px; border-radius: var(--tp-radius-card); }
html[data-theme] #screen-game .game-history-panel { border-radius: var(--tp-radius-card); background: var(--tp-material-1); border-color: var(--tp-material-edge); }
html[data-theme] #screen-game .history-box { min-height: 0; overscroll-behavior: contain; }
html[data-theme] #screen-game .game-eval-panel { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--tp-radius-dialog); }
html[data-theme] #screen-game .game-eval-panel .eval-box { background: var(--tp-material-1) !important; border-radius: 0; }
html[data-theme] :is(#game-menu-overlay, #game-history-overlay, #live-board-save-overlay, #end-screen, #confirm-dialog) :is(.modal-sheet, .match-result-card) { border-radius: var(--tp-radius-dialog) !important; }
html[data-theme] #screen-game .game-quick-action { border-radius: var(--tp-control-radius); min-height: 44px; }
@media (min-width: 1100px) {
    html[data-theme] #screen-game.active { grid-template-columns: minmax(8px, 1fr) minmax(0, 1680px) minmax(280px, 320px) minmax(8px, 1fr) !important; column-gap: 20px !important; }
    /* The rail spans the opponent, turn, board and self rows. Its height is
       owned by the workspace grid, not by the inner wooden board. */
    html[data-theme] #screen-game .game-side-panel { align-self: stretch; height: auto; max-height: none; margin: 3px 0; overflow: hidden; }
    html[data-theme] #screen-game .game-quick-actions { grid-row: 5; align-self: center; margin: 0; grid-auto-rows: 44px; }
    html[data-theme] #screen-game .game-tool-button { font-size: 12px; }
}
@media (max-width: 1099.98px) {
    html[data-theme] #screen-game .game-side-panel { padding: 8px; border-radius: var(--tp-radius-card); }
    html[data-theme] #screen-game .game-action-strip { gap: 4px; }
    html[data-theme] #screen-game .game-tool-button { padding: 6px 3px; gap: 4px; font-size: 10px; }
    html[data-theme] #screen-game .game-history-panel { border-radius: var(--tp-radius-panel) var(--tp-radius-panel) 0 0; }
}
@media (max-width: 760px) {
    html[data-theme] #screen-learn .tp-learning-hero { grid-template-columns: minmax(0, 1fr); padding: 24px; }
    html[data-theme] #screen-learn .tp-learning-hero__visual { aspect-ratio: 1.8; }
    html[data-theme] .tp-tournament-card { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    html[data-theme] .tp-tournament-card__head { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: none), (pointer: coarse) {
    html[data-theme] #screen-learn :is(.tp-learning-category, .tp-puzzle-daily):hover { transform: none; }
}
/* Route entrances are the single motion owner, without nested stagger delays. */
html[data-theme] .screen:is(.is-route-entering, .is-route-exiting) :is(.tp-home-section, .tp-analysis-controls, .tp-analysis-settings, .ai-setup-config, .ai-setup-preview, .ai-choice-card, .lb-card) { animation: none !important; }
html[data-input="keyboard"] .screen:not(#screen-game) *,
html[data-theme] body[data-reduced-motion="true"] .screen * { animation: none !important; transition: none !important; }
html[data-input="keyboard"] .screen:is(.is-route-entering, .is-route-exiting),
html[data-theme] body[data-reduced-motion="true"] .screen:is(.is-route-entering, .is-route-exiting) { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    html[data-theme] .screen:is(.is-route-entering, .is-route-exiting) { opacity: 1 !important; transform: none !important; transition: none !important; }
    html[data-theme] .screen * { animation: none !important; transition: none !important; }
}

/* One scrolling canvas: legacy .screen used a full viewport inside a shell
   that already contains the topbar, producing nested scrollbars and clipping. */
@media (min-width: 1024px) {
    html[data-theme] body:not(.game-active) .tp-shell-main > :is(#screen-home, #screen-play, #screen-bot-setup, #screen-league, #screen-tournaments, #screen-more).active {
        height: auto;
        max-height: none;
        min-height: calc(100dvh - var(--tp-topbar-height));
        overflow: visible;
    }
}
@media (max-width: 760px) {
    html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-row--modes { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; gap: 10px; }
    html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-tile--play { width: 100%; min-width: 0; min-height: 76px; padding: 16px; }
    html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-tile__label { white-space: normal; overflow: visible; line-height: 1.4; }
    html[data-theme] #screen-home .tp-dash-today--wide { max-width: none; min-width: 0; }
    html[data-theme] #screen-home .tp-dash-today__value { white-space: normal; overflow: visible; line-height: 1.35; }
}
/* League's compact mobile banner uses the same quiet material as desktop. */
html[data-theme] body:not(.game-active) #screen-league .league-season-banner {
    border: 1px solid var(--tp-material-edge) !important;
    border-radius: var(--tp-material-radius) !important;
    background: var(--tp-material-1) !important;
    box-shadow: inset 0 1px var(--tp-material-sheen) !important;
}
html[data-theme] body:not(.game-active) #screen-league .league-season-banner::after { content: none; }
html[data-theme] #screen-league .league-pool-tab .league-pool-tc { opacity: 1; }

/* Filters stay within the content grid; long locale labels wrap as controls. */
html[data-theme] #screen-tournaments .tp-section-tabs { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 4px; }
html[data-theme] #screen-tournaments .tp-section-tabs button { min-height: 44px; min-width: 0; white-space: normal; line-height: 1.3; padding: 10px 14px; border-radius: var(--tp-radius-small) var(--tp-radius-small) 0 0; }
html[data-theme] #screen-tournaments .tp-page-heading__actions .tp-button { min-height: 44px; box-shadow: none !important; border-radius: var(--tp-control-radius); }

/* Profile still inherited the old white page-title and dark-theme captions. */
html[data-theme="steppe-light"] #screen-profile.profile-unified .profile-context-header .sub-screen-title { color: var(--tp-color-text) !important; opacity: 1; }
html[data-theme="steppe-light"] #screen-profile.profile-unified :is(.profile-context-eyebrow, .profile-form__caption) { color: var(--tp-color-text-muted); }
html[data-theme="steppe-light"] #screen-profile.profile-unified .profile-form__dot.is-loss { color: var(--danger); }
html[data-theme="steppe-light"] #screen-profile.profile-unified .profile-form__dot.is-win { color: var(--success); }

/* Authenticated secondary pages still carried gold button ink from the old
   dark palette. Keep their layout and give actions the current material ink. */
html[data-theme="steppe-light"] body:not(.game-active) #screen-stats :is(.tp-button--secondary, .tp-match-row__profile, .tp-stat-history-link) {
    color: var(--tp-color-primary) !important;
    background: var(--tp-material-2) !important;
    border-color: var(--tp-material-edge) !important;
}
html[data-theme="steppe-light"] body:not(.game-active) #screen-stats .tp-stat-history-link {
    padding-inline: 14px;
    border: 1px solid var(--tp-material-edge) !important;
    border-radius: var(--tp-control-radius);
}
@media (max-width: 760px) {
    html[data-theme] #screen-friends .tp-section-tabs {
        flex-wrap: wrap;
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
        gap: 4px;
    }
    html[data-theme] #screen-friends .tp-section-tabs button { min-height: 44px; }
    html[data-theme] #screen-rewards .tp-reward-status-filters { flex-wrap: wrap; overflow: visible; }
    html[data-theme] body:not(.game-active) #screen-stats .tp-compact-filter { flex-wrap: wrap; overflow: visible; }
    html[data-theme] #screen-stats .tp-recent-games-section .tp-section-heading { flex-wrap: wrap; }
}