/*
 * TogyzPro final visual polish.
 * Opaque premium surfaces everywhere; glass is intentionally limited to the
 * mobile bottom navigation defined in play-platform.css.
 */
:root {
    --vp-canvas: #24231f;
    --vp-canvas-deep: #1d1c19;
    --vp-panel: #302e29;
    --vp-panel-raised: #393630;
    --vp-panel-soft: #2a2925;
    --vp-line: rgba(246, 236, 216, .10);
    --vp-line-strong: rgba(246, 236, 216, .18);
    --vp-ink: #f4f0e7;
    --vp-muted: #aaa69c;
    --vp-sand: #d1b472;
    --vp-green: #81b64c;
    --vp-green-hover: #91c45a;
    --vp-shadow-sm: 0 5px 14px rgba(0,0,0,.20);
    --vp-shadow-md: 0 14px 34px rgba(0,0,0,.28);
    --vp-shadow-lg: 0 24px 58px rgba(0,0,0,.36);
    --gold-glow: transparent !important;
    --shadow-gold: 0 9px 22px rgba(0,0,0,.24) !important;
    --shadow-glow-gold: 0 9px 22px rgba(0,0,0,.24) !important;
    --shadow-glow-steppe: 0 9px 22px rgba(0,0,0,.24) !important;
    --shadow-glow-blood: 0 9px 22px rgba(0,0,0,.24) !important;
    color-scheme: dark;
}

html { scroll-behavior: smooth; }
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(129,182,76,.36); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #5b574f #252420; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: #252420; }
*::-webkit-scrollbar-thumb { background: #5b574f; border: 2px solid #252420; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #716c62; }

:is(button, a, input, select, textarea, [role="button"]):focus-visible {
    outline: 3px solid #d8c18d !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}
:is(button, [role="button"]):active { transition-duration: .08s !important; }

/* ── Landing: editorial hierarchy + a real material demo board ───────────
 * R-04: the landing chrome below reads the active product theme instead of a
 * fixed palette. Colours resolve through the three-theme registry in
 * rewards-themes.css; the literals that remain are the demo board's wood and
 * pits, which intentionally do not follow the interface theme. */
#web-auth-screen.sm-landing {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 2%, transparent) 1px, transparent 1px) 0 0 / 72px 72px,
        radial-gradient(ellipse 900px 620px at 74% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 66%),
        radial-gradient(ellipse 760px 520px at 16% 82%, color-mix(in srgb, var(--success) 9%, transparent), transparent 68%),
        linear-gradient(135deg, var(--surface-1) 0%, var(--product-bg) 52%, var(--surface-1) 100%) !important;
}
.sm-landing-shell { max-width: 1260px !important; }
.sm-landing-header {
    height: 68px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}
.sm-landing-header,
.sm-app-header,
.sm-app-sidebar,
.home-header,
.sub-screen-header,
.lobby-header,
.sm-hero,
.sm-demo,
.sm-auth-card,
.tutorial-overlay,
#end-screen {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.sm-landing-header .sm-logo { letter-spacing: -.025em; }
.sm-landing-header .sm-logo-image { box-shadow: none !important; }
.sm-landing-hero {
    grid-template-columns: minmax(0,1.08fr) minmax(430px,.92fr) !important;
    gap: clamp(46px,6vw,82px) !important;
    padding: clamp(42px,6vh,74px) 0 clamp(58px,8vh,96px) !important;
}
.sm-landing-left { animation: vpRise .56s cubic-bezier(.18,.82,.24,1) both; }
.sm-landing-right { animation: vpRise .56s .09s cubic-bezier(.18,.82,.24,1) both; }
.sm-landing-eyebrow {
    margin-bottom: 20px !important;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)) !important;
    border-color: color-mix(in srgb, var(--accent) 32%, transparent) !important;
    color: var(--accent-hover) !important;
    box-shadow: inset 0 1px color-mix(in srgb, var(--text-primary) 4%, transparent) !important;
}
.sm-landing-title {
    max-width: 720px;
    font-size: clamp(48px,5.2vw,72px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.048em !important;
    text-wrap: balance;
}
.sm-landing-title em {
    background: linear-gradient(90deg, var(--accent), var(--accent-hover) 58%, var(--accent)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
.sm-landing-lede {
    max-width: 590px !important;
    color: var(--text-secondary) !important;
    font-size: clamp(17px,1.45vw,19px) !important;
    line-height: 1.58 !important;
}
.sm-landing-cta,
.sm-auth-submit {
    min-height: 48px;
    border-radius: 10px !important;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}
/* The primary CTA is gold, not green: the accent belongs to our own brand and
 * follows the active theme. */
.sm-landing-cta--primary,
.sm-auth-submit {
    background: linear-gradient(var(--accent-hover), var(--accent)) !important;
    border: 1px solid var(--accent-hover) !important;
    color: var(--tp-product-gold-ink, #17120a) !important;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 55%, #000), 0 11px 22px rgba(0,0,0,.23) !important;
}
.sm-landing-cta--primary:hover,
.sm-auth-submit:hover {
    background: linear-gradient(var(--accent-hover), color-mix(in srgb, var(--accent-hover) 70%, var(--accent))) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 55%, #000), 0 14px 26px rgba(0,0,0,.27) !important;
}
.sm-landing-cta--primary:active,
.sm-auth-submit:active {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000), 0 7px 14px rgba(0,0,0,.22) !important;
}
.sm-landing-cta--ghost {
    background: var(--surface-2) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    box-shadow: inset 0 1px color-mix(in srgb, var(--text-primary) 3%, transparent) !important;
}
.sm-landing-cta--ghost:hover { background: var(--surface-raised) !important; border-color: var(--tp-product-border-strong) !important; transform: translateY(-1px); }
.sm-landing-bullets { gap: 12px !important; }
.sm-landing-bullet { color: var(--text-secondary) !important; }
.sm-landing-bullet i {
    background: color-mix(in srgb, var(--success) 24%, var(--surface-2)) !important;
    color: var(--success) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 18%, transparent) !important;
}

.sm-demo {
    padding: 20px !important;
    border-radius: 18px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--vp-shadow-lg) !important;
}
.sm-demo::before { display: none !important; }
.sm-demo-eyebrow { color: var(--accent-hover) !important; margin: 0 2px 14px !important; }
.sm-demo-eyebrow::before {
    background: var(--success) !important;
    box-shadow: none !important;
    animation: vpStatus 2.3s ease-in-out infinite !important;
}
.sm-demo-board {
    gap: 7px !important;
    padding: 15px 14px !important;
    border: 6px solid #5e3b23 !important;
    border-radius: 14px !important;
    background:
        repeating-linear-gradient(7deg,transparent 0 29px,rgba(66,34,16,.12) 30px 32px,transparent 33px 68px),
        linear-gradient(145deg,#9b693e,#744a2b 56%,#5f3d24) !important;
    box-shadow: inset 0 1px rgba(255,235,198,.2), inset 0 -8px 15px rgba(48,24,10,.22) !important;
}
.sm-demo-row { gap: 6px !important; }
.sm-demo-pit {
    aspect-ratio: 1.08 !important;
    border-radius: 44% / 34% !important;
    border: 1px solid rgba(234,202,154,.14) !important;
    background: radial-gradient(ellipse at 50% 42%,#311a0e 0 42%,#150a05 74%,#080403 100%) !important;
    color: #eee0c3 !important;
    font-size: clamp(10px,1vw,13px) !important;
    box-shadow: inset 0 7px 11px rgba(0,0,0,.72), inset 0 -3px 5px rgba(157,91,43,.13), 0 1px rgba(255,231,190,.10) !important;
}
.sm-demo-pit.is-active {
    transform: translateY(-1px) !important;
    border-color: #d2b474 !important;
    color: #f5e7c8 !important;
    box-shadow: inset 0 7px 11px rgba(0,0,0,.7), 0 0 0 2px rgba(210,180,116,.58) !important;
}
.sm-demo-pit.is-last { border-color: #8eaf70 !important; color: #dbe9ce !important; }
.sm-demo-kazan-track {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    gap: 8px;
    align-items: center;
}
.sm-demo-kazan-track::before,
.sm-demo-kazan-track::after {
    content: "0";
    height: 24px;
    display: grid; place-items: center;
    border-radius: 6px;
    background: #3b281b;
    border: 1px solid rgba(255,235,198,.10);
    color: #ead7b3;
    font: 700 11px var(--font-mono);
}
.sm-demo-kazan-track span {
    height: 22px;
    border-radius: 999px;
    background: radial-gradient(ellipse at 50% 38%,#321d10,#120a05 76%);
    box-shadow: inset 0 7px 11px rgba(0,0,0,.66), 0 1px rgba(255,235,198,.10);
}
.sm-demo-meta { color: var(--text-secondary) !important; }
.sm-demo-kazan { color: var(--accent) !important; }

.sm-auth-card {
    padding: 24px !important;
    border-radius: 16px !important;
    background: var(--surface-2) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: var(--vp-shadow-md) !important;
}
.sm-auth-tabs { background: var(--product-bg) !important; border: 1px solid var(--border-subtle) !important; }
.sm-auth-tab { min-height: 44px; }
.sm-auth-tab.is-active {
    color: var(--text-primary) !important;
    background: var(--surface-raised) !important;
    border-bottom-color: var(--accent) !important;
    box-shadow: inset 0 1px color-mix(in srgb, var(--text-primary) 4%, transparent) !important;
}
.sm-auth-input,
.premium-input,
.menu-select {
    background-color: #24231f !important;
    border-color: rgba(246,236,216,.11) !important;
    color: var(--vp-ink) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.22) !important;
}
.sm-auth-input:hover,
.premium-input:hover,
.menu-select:hover { border-color: rgba(246,236,216,.20) !important; }
.sm-auth-input:focus,
.premium-input:focus,
.menu-select:focus { border-color: #cbb681 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.22) !important; }
.sm-landing-footer { border-color: rgba(246,236,216,.08) !important; }

/* ── App shell and cards ───────────────────────────────────────────────── */
.sm-app-header,
.sm-app-sidebar { background: #1f1e1b !important; }
.sm-app-header { box-shadow: 0 1px 0 rgba(255,255,255,.025), 0 7px 18px rgba(0,0,0,.15) !important; }
.sm-app-sidebar {
    background:
        linear-gradient(180deg,rgba(255,255,255,.018),transparent 24%),
        #1f1e1b !important;
}
.sm-user-pod {
    background: #292824 !important;
    border-color: var(--vp-line) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}
.sm-user-pod:hover { background: #33312c !important; border-color: var(--vp-line-strong) !important; }
.sm-app-main,
.sm-app-main > .screen {
    background:
        radial-gradient(ellipse 760px 500px at 72% 8%,rgba(150,113,58,.045),transparent 68%),
        var(--vp-canvas) !important;
}
.tp-shell-main > .screen.active:not(#screen-game) { animation: none; }

.tp-shell-main > .screen.is-route-exiting {
    pointer-events: none;
    animation: none;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 90ms var(--tp-ease-standard),
        transform 90ms var(--tp-ease-standard);
}

.tp-shell-main > .screen.is-route-entering {
    animation: none;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 160ms var(--tp-ease-standard),
        transform 160ms var(--tp-ease-standard);
}

.tp-shell-main > .screen.is-route-entering.is-route-entering-active {
    opacity: 1;
    transform: translateY(0);
}

#screen-home.active .tp-home-section,
#screen-analysis.active .tp-analysis-controls,
#screen-analysis.active .tp-analysis-settings,
#screen-analysis.active .tp-analysis-results:not([hidden]) > article {
    animation: vpPanelIn var(--tp-motion-base) var(--tp-ease-standard) both;
}

#screen-home.active .tp-home__information-grid > :nth-child(2),
#screen-analysis.active .tp-analysis-results:not([hidden]) > article:nth-child(2) {
    animation-delay: 40ms;
}

#screen-home.active .tp-home__information-grid > :nth-child(3),
#screen-analysis.active .tp-analysis-results:not([hidden]) > article:nth-child(3) {
    animation-delay: 80ms;
}

/* Shared async feedback. Feature owners provide only the stable skeleton
 * geometry; the indicator, timing and reduced-motion behavior stay reusable. */
.tp-loading-state {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tp-space-2);
    color: var(--text-secondary, var(--tp-color-text-muted));
    font-size: var(--tp-text-sm);
}

.tp-loading-state--inline {
    width: 100%;
    justify-content: flex-start;
}

.tp-loading-dots {
    width: 30px;
    min-width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

.tp-loading-dots i {
    width: 6px;
    height: 6px;
    border-radius: var(--tp-radius-pill);
    background: currentColor;
    animation: tpLoadingDot 900ms var(--tp-ease-standard) infinite alternate;
}

.tp-loading-dots i:nth-child(2) { animation-delay: 120ms; }
.tp-loading-dots i:nth-child(3) { animation-delay: 240ms; }

.tp-analysis-loading {
    display: grid;
    gap: var(--tp-space-3);
    min-height: 172px;
}

.tp-analysis-loading[hidden] { display: none; }

.tp-analysis-skeleton {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: var(--tp-space-2);
}

.tp-analysis-skeleton span {
    min-height: 52px;
    border-radius: var(--tp-radius-sm);
    background: linear-gradient(
        90deg,
        var(--surface-2, var(--tp-color-surface-raised)),
        var(--surface-raised, var(--tp-color-surface-soft)),
        var(--surface-2, var(--tp-color-surface-raised))
    );
    background-size: 220% 100%;
    animation: aiTrainerSkeleton 1100ms var(--tp-ease-standard) infinite;
}

.tp-analysis-skeleton__lead {
    grid-column: 1 / -1;
    min-height: 72px !important;
}

@media (hover: hover) and (pointer: fine) {
    .tp-button:not(:disabled):not([aria-disabled="true"]):hover {
        transform: translateY(-1px);
        box-shadow: var(--tp-shadow-xs);
    }
}

.tp-button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px) scale(0.99);
    box-shadow: none;
}
.sm-greeting { color: #f5f1e8 !important; text-wrap: balance; }
.sm-greeting-sub { color: #a7a399 !important; }
.sm-board-showcase,
.sm-quick-panel,
.sm-action,
.sm-stats-card,
.sm-activity-card,
.sm-invite,
.settings-card,
.featured-event {
    border-color: var(--vp-line) !important;
    box-shadow: var(--vp-shadow-sm) !important;
}
.sm-board-showcase { box-shadow: var(--vp-shadow-md) !important; }
.sm-board-showcase:hover,
.sm-board-showcase:focus-visible {
    transform: translateY(-2px) !important;
    border-color: rgba(209,180,114,.35) !important;
    box-shadow: 0 19px 40px rgba(0,0,0,.34) !important;
}
.sm-live-dot {
    color: #d9e7ca !important;
    background: #35402e !important;
    border: 1px solid rgba(166,198,132,.10);
}
.sm-live-dot::before { box-shadow: none !important; animation: vpStatus 2.3s ease-in-out infinite; }
.sm-quick-panel,
.sm-action,
.sm-stats-card,
.sm-activity-card { background: var(--vp-panel) !important; }
.sm-mode-btn {
    background: #282723 !important;
    border-color: rgba(246,236,216,.09) !important;
    box-shadow: 0 3px 7px rgba(0,0,0,.16) !important;
    transition: transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease !important;
}
.sm-mode-btn:hover { background: #36332e !important; border-color: rgba(246,236,216,.17) !important; box-shadow: 0 6px 13px rgba(0,0,0,.22) !important; }
.sm-mode-btn:active { transform: translateY(1px) scale(.992) !important; }
.sm-mode-btn--primary {
    background: linear-gradient(#8abd53,#76aa45) !important;
    border-color: #98c769 !important;
    box-shadow: 0 3px 0 #557e32, 0 7px 13px rgba(0,0,0,.20) !important;
}
.sm-mode-btn--primary:hover { background: linear-gradient(#96c861,#82b650) !important; box-shadow: 0 4px 0 #557e32,0 10px 17px rgba(0,0,0,.24) !important; }
.sm-mode-btn--primary:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 #557e32,0 5px 10px rgba(0,0,0,.2) !important; }
.sm-action,
.sm-activity-item,
.sm-invite { transition: transform .16s ease,background .16s ease,border-color .16s ease !important; }
.sm-action:hover,
.sm-activity-item:hover,
.sm-invite:hover { transform: translateY(-1px); background: var(--vp-panel-raised) !important; border-color: var(--vp-line-strong) !important; }
.sm-action:active,
.sm-activity-item:active,
.sm-invite:active { transform: translateY(1px) scale(.995); }
.sm-winbar { height: 5px !important; background: #22211e !important; }
.sm-winbar-fill { background: #82aa5e !important; box-shadow: none !important; }
.sm-section-heading span,
.sm-card-section-label > span:first-child { color: #eee9df !important; }

/* ── Match setup, search, settings and shared internal controls ─────────── */
.sm-page-header,
.sub-screen-header,
.home-header {
    background: #211f1c !important;
    border-color: var(--vp-line) !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.14) !important;
}
.sub-screen-back,
.back-btn-top,
.sm-back-btn {
    background: #2d2b27 !important;
    border-color: var(--vp-line) !important;
    color: #d8d4cb !important;
    box-shadow: none !important;
}
.sub-screen-back:hover,
.back-btn-top:hover,
.sm-back-btn:hover { background: #393630 !important; border-color: var(--vp-line-strong) !important; color: #fff !important; }
.time-select-screen,
.setup-container,
.searching-screen {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}
.time-select-screen { padding: 28px clamp(18px,4vw,34px) 110px !important; }
.time-category-label { color: #aaa69c !important; letter-spacing: .12em !important; }
.time-option,
.side-card {
    min-height: 76px;
    background: #302e29 !important;
    border-color: var(--vp-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: transform .15s ease,background .15s ease,border-color .15s ease !important;
}
.time-option:hover,
.side-card:hover { background: #3a3731 !important; border-color: var(--vp-line-strong) !important; transform: translateY(-1px); }
.time-option.selected,
.side-card.selected {
    background: #373328 !important;
    border-color: #cbb477 !important;
    box-shadow: inset 0 0 0 1px rgba(203,180,119,.26),var(--vp-shadow-sm) !important;
}
.time-option-main {
    color: #f1ece2 !important;
    font-family: var(--tp-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
    font-size: 18px !important;
}
.time-option-inc { color: #a9c98b !important; }
.setup-container {
    max-width: 560px;
    padding: 34px clamp(18px,4vw,32px) 110px !important;
    gap: 18px !important;
}
.setup-hero-icon {
    width: 76px; height: 76px;
    display: grid !important; place-items: center;
    margin: 4px auto 10px !important;
    border-radius: 22px;
    background: #34312b;
    border: 1px solid var(--vp-line);
    color: #cdb57e !important;
    font-size: 32px !important;
    box-shadow: var(--vp-shadow-md);
}
.side-card { min-height: 78px; padding: 12px 10px !important; }
.menu-select { min-height: 50px; }
.start-game-btn,
.search-with-time-btn,
.btn-launch-tourn,
.search-invite-btn {
    min-height: 50px;
    background: linear-gradient(#8bc153,#78ad45) !important;
    color: #17220e !important;
    border: 1px solid #98c967 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 0 #557f31,0 10px 20px rgba(0,0,0,.23) !important;
    transition: transform .15s ease,background .15s ease,box-shadow .15s ease !important;
}
.start-game-btn:hover,
.search-with-time-btn:hover,
.btn-launch-tourn:hover,
.search-invite-btn:hover { background: linear-gradient(#98ca62,#84b950) !important; transform: translateY(-1px) !important; box-shadow: 0 5px 0 #557f31,0 13px 24px rgba(0,0,0,.26) !important; }
.start-game-btn:active,
.search-with-time-btn:active,
.btn-launch-tourn:active,
.search-invite-btn:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 #557f31,0 6px 12px rgba(0,0,0,.22) !important; }

/* Match-entry controls use the restrained sports UI language. Tournament
   actions keep their existing owner and are outside the Material Board pass. */
body:not(.game-active) .start-game-btn,
body:not(.game-active) .search-with-time-btn {
    background: #8a672f !important;
    color: #fff8eb !important;
    border-color: #a88349 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.1) inset !important;
}
body:not(.game-active) .start-game-btn:hover,
body:not(.game-active) .search-with-time-btn:hover {
    background: #98743a !important;
    transform: none !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset !important;
}
body:not(.game-active) .start-game-btn:active,
body:not(.game-active) .search-with-time-btn:active {
    transform: scale(.99) !important;
    box-shadow: none !important;
}

body:not(.game-active) .time-option,
body:not(.game-active) .side-card {
    min-height: 76px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

body:not(.game-active) .side-card { padding: 12px 10px !important; }
body:not(.game-active) .time-option-main {
    font-family: var(--tp-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
    font-size: 18px !important;
}
.searching-screen { min-height: calc(100dvh - 80px) !important; max-width: 520px; }
.searching-spinner {
    width: 68px !important; height: 68px !important;
    border: 4px solid #3b3933 !important;
    border-top-color: #9fbd7e !important;
    box-shadow: none !important;
}
body:not(.game-active) .searching-title { color: var(--tp-color-text) !important; letter-spacing: -.02em; }
body:not(.game-active) .search-invite-card {
    margin-top: 24px !important;
    background: var(--tp-color-surface) !important;
    border: 1px solid var(--tp-color-border) !important;
    box-shadow: var(--vp-shadow-sm);
}
body:not(.game-active) .cancel-search-btn { background: var(--tp-color-surface-raised) !important; border-color: color-mix(in srgb, var(--tp-color-danger) 42%, var(--tp-color-border)) !important; }
body:not(.game-active) .cancel-search-btn:hover { background: var(--tp-color-surface-soft) !important; border-color: color-mix(in srgb, var(--tp-color-danger) 64%, var(--tp-color-border)) !important; }
body:not(.game-active) .settings-card { background: var(--tp-color-surface) !important; }
body:not(.game-active) .settings-row { border-color: var(--tp-color-border) !important; transition: background .15s ease; }
body:not(.game-active) .settings-row:hover { background: var(--tp-color-surface-soft) !important; }
body:not(.game-active) .toggle-slider { background: var(--tp-color-surface-soft) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,.28); }
body:not(.game-active) .toggle-switch input:checked + .toggle-slider { background: var(--tp-color-success) !important; }

/* Opaque dialogs: no accidental glass outside the mobile navigation. */
body:not(.game-active) .overlay,
body:not(.game-active) .modal-overlay,
body:not(.game-active) .support-modal-overlay,
body:not(.game-active) .avatar-modal-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: color-mix(in srgb, var(--tp-color-page) 84%, transparent) !important;
}
body:not(.game-active) .modal-sheet,
body:not(.game-active) .support-modal,
body:not(.game-active) .avatar-modal,
body:not(.game-active) .create-tournament-sheet {
    background: var(--tp-color-surface) !important;
    border-color: var(--tp-color-border) !important;
    box-shadow: var(--vp-shadow-lg) !important;
}
body:not(.game-active) .support-modal-title,
body:not(.game-active) .avatar-modal-title { color: var(--tp-color-text) !important; }
body:not(.game-active) .support-modal-sub { color: var(--tp-color-text-muted) !important; }
body:not(.game-active) .support-modal-handle,
body:not(.game-active) .avatar-modal-handle { background: var(--tp-color-border-strong) !important; }
body:not(.game-active) .support-contact-item { background: var(--tp-color-surface-raised) !important; border-color: var(--tp-color-border) !important; }

/* Remove legacy neon/glow remnants while retaining clear selected states. */
.searching-spinner,
.side-card.selected,
.time-option.selected,
#btn-show-create-tourn:hover,
.sm-demo-pit.is-active,
body .pit.last-move-highlight,
.league-loading-spinner {
    filter: none !important;
}
#btn-show-create-tourn:hover { box-shadow: var(--vp-shadow-sm) !important; }
.auth-logo-icon,
.big-btn:first-child:hover,
.mega-card:hover,
.theme-swatch-circle.active { box-shadow: var(--vp-shadow-sm) !important; }
.lobby-online-dot,
.online-dot,
.mega-online-dot { box-shadow: none !important; animation: vpStatus 2.3s ease-in-out infinite !important; }
.sr-rank-icon.gold,
.sr-rank-icon.silver,
.sr-rank-icon.bronze { filter: none !important; }
.clock-low { color: #f2a79b !important; text-shadow: none !important; }
body:not(.game-active) .logo-text::before { box-shadow: none !important; }

/* Physical feedback instead of light blooms during moves. */
@keyframes pitFlash {
    0% { filter: brightness(1); transform: translateY(0); }
    45% { filter: brightness(1.16); transform: translateY(1px); }
    100% { filter: brightness(1); transform: translateY(0); }
}
@keyframes captureFlash {
    0% { filter: brightness(1); }
    35% { filter: brightness(1.14) saturate(.88); }
    100% { filter: brightness(1); }
}

@keyframes vpRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes vpScreenIn {
    from { opacity: 0; transform: translateY(6px) scale(.997); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes vpPanelIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes tpLoadingDot {
    from { opacity: .35; transform: translateY(1px); }
    to { opacity: 1; transform: translateY(-1px); }
}
@keyframes vpStatus {
    0%,100% { opacity: .58; }
    50% { opacity: 1; }
}

@media (max-width: 900px) {
    .sm-landing-shell { padding-inline: 18px !important; }
    .sm-landing-hero { grid-template-columns: 1fr !important; gap: 28px !important; padding-top: 26px !important; }
    .sm-landing-title { font-size: clamp(40px,11vw,54px) !important; }
    .sm-landing-lede { font-size: 16px !important; }
    .sm-demo { padding: 14px !important; }
    .sm-demo-board { padding: 11px 9px !important; border-width: 5px !important; }
    .sm-demo-row { gap: 4px !important; }
    .sm-demo-pit { font-size: 9px !important; }
    .sm-app-main > .screen:not(#screen-game) { padding-bottom: calc(92px + env(safe-area-inset-bottom,0px)) !important; }
    .sm-page-header { min-height: 58px; }
    .time-select-screen,.setup-container { padding-inline: 16px !important; }
}

@media (max-width: 560px) {
    .sm-landing-header { height: 60px !important; }
    .sm-landing-title { font-size: 34px !important; line-height: 1.06 !important; overflow-wrap: anywhere; }
    .sm-landing-eyebrow { font-size: 9px !important; margin-bottom: 15px !important; }
    .sm-landing-cta-row { gap: 10px !important; margin-bottom: 28px !important; }
    .sm-demo-meta { flex-direction: column; gap: 4px; align-items: flex-start; }
    .sm-auth-card { padding: 18px !important; }
    .time-grid { gap: 8px !important; }
    .time-option { min-height: 86px; padding-inline: 6px !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sm-landing-left,
    .sm-landing-right,
    .tp-shell-main > .screen.active:not(#screen-game),
    #screen-home.active .tp-home-section,
    #screen-analysis.active .tp-analysis-controls,
    #screen-analysis.active .tp-analysis-settings,
    #screen-analysis.active .tp-analysis-results:not([hidden]) > article,
    .tp-loading-dots i,
    .ai-setup-shell.is-ready > *,
    .ai-trainer-skeleton span,
    .tp-analysis-skeleton span,
    .sm-live-dot::before,
    .sm-demo-eyebrow::before { animation: none !important; }
    .tp-shell-main > .screen.is-route-exiting,
    .tp-shell-main > .screen.is-route-entering,
    .tp-shell-main > .screen.is-route-entering.is-route-entering-active {
        opacity: 1 !important;
        transform: none !important;
    }
    *, *::before, *::after { transition-duration: .01ms !important; }
}

/* AI Trainer — factual, compact setup with viewport-safe geometry. */
.ai-setup-screen {
    min-width: 0;
    min-height: 100%;
    background: var(--product-bg, var(--tp-color-page));
    color: var(--text-primary, var(--tp-color-text));
}
.ai-setup-screen,
.ai-setup-screen *,
.ai-setup-screen *::before,
.ai-setup-screen *::after { box-sizing: border-box; }
.ai-setup-screen :where(.ai-setup-shell, .ai-trainer-skeleton, .ai-trainer-workspace, .ai-setup-config, .ai-setup-preview, .ai-setup-fieldset, .ai-segmented, .ai-difficulty-grid, .ai-time-grid, .ai-choice-card, .ai-opponent-heading, .ai-opponent-heading > div) {
    min-width: 0;
    max-width: 100%;
}
.ai-setup-screen .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.ai-setup-page-heading {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    gap: 12px;
    align-items: start;
    margin: 0 0 14px;
    padding: 2px 0;
    color: var(--text-primary, var(--tp-color-text));
    background: transparent;
    border: 0;
    box-shadow: none;
}
.ai-setup-page-heading > div { min-width: 0; }
.ai-setup-page-heading h1 { margin: 0; overflow-wrap: anywhere; font-size: clamp(22px, 3vw, 30px); line-height: 1.12; }
.ai-setup-page-heading p { margin: 4px 0 0; color: var(--text-secondary, var(--tp-color-text-muted)); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.ai-setup-back { position: static; margin: 0; }
.ai-setup-shell,
.ai-trainer-skeleton {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(16px, 2.4vw, 28px) 0 32px;
}
.ai-setup-shell[hidden],
.ai-trainer-skeleton[hidden],
.ai-setup-shell [hidden] { display: none !important; }
.ai-setup-shell.is-ready > * {
    animation: aiTrainerReveal 180ms var(--tp-ease-standard) both;
}
.ai-setup-shell.is-ready > :nth-child(2) { animation-delay: 40ms; }
.ai-setup-shell.is-ready > :nth-child(3) { animation-delay: 80ms; }
.ai-setup-shell.is-ready > :nth-child(4) { animation-delay: 120ms; }
.ai-trainer-section-heading > span,
.ai-preview-kicker {
    color: var(--accent, var(--tp-color-primary));
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.ai-trainer-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 16px;
    align-items: start;
}
.ai-setup-config,
.ai-setup-preview {
    min-width: 0;
    border: 1px solid var(--border-subtle, var(--tp-color-border));
    border-radius: var(--tp-radius-lg);
    background: var(--surface-1, var(--tp-color-surface));
    box-shadow: var(--tp-shadow-sm);
}
.ai-setup-config { padding: clamp(16px, 2vw, 22px); }
.ai-trainer-section-heading { margin-bottom: 14px; }
.ai-trainer-section-heading h2 { margin: 5px 0 0; font-size: clamp(18px, 2vw, 23px); line-height: 1.2; overflow-wrap: anywhere; }
.ai-setup-fieldset { min-width: 0; margin: 0 0 15px; padding: 0; border: 0; }
.ai-setup-fieldset:last-child { margin-bottom: 0; }
.ai-setup-fieldset legend {
    margin-bottom: 10px;
    color: var(--text-secondary, var(--tp-color-text-muted));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ai-segmented,
.ai-difficulty-grid,
.ai-time-grid { display: grid; gap: 9px; }
.ai-segmented {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 4px;
    border: 1px solid var(--border-subtle, var(--tp-color-border));
    border-radius: var(--tp-radius-sm);
    background: var(--surface-2, var(--tp-color-surface-raised));
}
.ai-difficulty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-segment-option,
.ai-choice-card {
    appearance: none;
    min-width: 0;
    min-height: 48px;
    border: 1px solid var(--border-subtle, var(--tp-color-border));
    border-radius: var(--tp-radius-sm);
    background: var(--surface-2, var(--tp-color-surface-raised));
    color: var(--text-primary, var(--tp-color-text));
    cursor: pointer;
    transition:
        border-color var(--tp-motion-fast) var(--tp-ease-standard),
        background-color var(--tp-motion-fast) var(--tp-ease-standard),
        box-shadow var(--tp-motion-fast) var(--tp-ease-standard),
        transform var(--tp-motion-fast) var(--tp-ease-standard);
}
.ai-segment-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px;
    font: 800 12px/1.2 var(--tp-font-sans);
}
.ai-choice-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
    width: 100%;
    gap: 5px;
    min-height: 78px;
    padding: 11px 12px;
    text-align: left;
    font-family: var(--tp-font-sans);
    overflow-wrap: anywhere;
}
.ai-choice-card__level {
    color: var(--accent, var(--tp-color-primary));
    font: 800 9px/1 var(--tp-font-sans);
    letter-spacing: .09em;
}
.ai-choice-card strong { overflow-wrap: anywhere; font-size: 15px; line-height: 1.2; }
.ai-time-card {
    display: flex;
    min-height: 54px;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
}
.ai-time-card strong { color: var(--accent, var(--tp-color-primary)); font: 800 16px/1 var(--tp-font-mono); }
.ai-time-card span { color: var(--text-secondary, var(--tp-color-text-muted)); font-size: 11px; }
.ai-segment-option.selected,
.ai-choice-card.selected {
    border-color: var(--accent, var(--tp-color-primary));
    background: color-mix(in srgb, var(--accent, var(--tp-color-primary)) 9%, var(--surface-2, var(--tp-color-surface-raised)));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, var(--tp-color-primary)) 16%, transparent);
}
@media (hover: hover) and (pointer: fine) {
    .ai-segment-option:not(:disabled):hover,
    .ai-choice-card:not(:disabled):hover {
        border-color: color-mix(in srgb, var(--accent, var(--tp-color-primary)) 54%, var(--border-subtle, var(--tp-color-border)));
        transform: translateY(-2px);
    }
}
.ai-segment-option:active,
.ai-choice-card:active { transform: scale(.98); }
.ai-choice-card[data-guest-locked] { opacity: .52; }
.ai-choice-card[data-guest-locked]::after {
    content: '\f023';
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--text-secondary, var(--tp-color-text-muted));
    font: 900 10px/1 'Font Awesome 6 Free';
}
.ai-difficulty-description,
.ai-guest-level-note {
    min-height: 44px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--accent, var(--tp-color-primary));
    border-radius: 0 var(--tp-radius-xs) var(--tp-radius-xs) 0;
    background: color-mix(in srgb, var(--accent, var(--tp-color-primary)) 7%, transparent);
    color: var(--text-secondary, var(--tp-color-text-muted));
    font-size: 12px;
    line-height: 1.45;
}
.ai-guest-level-note[hidden] { display: none; }

.ai-segment-option:focus-visible,
.ai-choice-card:focus-visible,
.ai-start-button:focus-visible {
    outline: 3px solid var(--tp-color-focus);
    outline-offset: 2px;
}
.ai-side-disc { width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%; }
.ai-side-disc--white {
    border: 1px solid var(--text-secondary, var(--tp-color-text-muted));
    background: var(--text-primary, var(--tp-color-text));
}
.ai-side-disc--black {
    border: 1px solid var(--text-secondary, var(--tp-color-text-muted));
    background: var(--product-bg, var(--tp-color-page));
}
.ai-setup-preview {
    position: static;
    padding: 18px;
}
.ai-opponent-heading { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 11px; align-items: center; }
.ai-opponent-avatar {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent, var(--tp-color-primary)) 28%, var(--border-subtle, var(--tp-color-border)));
    border-radius: 16px;
    color: var(--accent, var(--tp-color-primary));
    background: color-mix(in srgb, var(--accent, var(--tp-color-primary)) 8%, var(--surface-2, var(--tp-color-surface-raised)));
    font-size: 20px;
}
.ai-opponent-heading h2 { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 15px; line-height: 1.2; }
.ai-setup-preview dl { margin: 0; }
.ai-setup-preview dl div {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--border-subtle, var(--tp-color-border));
    font-size: 12px;
}
.ai-setup-preview dt { color: var(--text-secondary, var(--tp-color-text-muted)); }
.ai-setup-preview dd { margin: 0; overflow-wrap: anywhere; font-weight: 750; text-align: right; }
.ai-setup-preview p { margin: 14px 0 0; color: var(--text-secondary, var(--tp-color-text-muted)); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.ai-setup-cta-wrap { margin: 12px 0 0; }
.ai-start-button {
    width: 100% !important;
    max-width: none !important;
    min-height: 54px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 !important;
    font-size: 14px !important;
}
.ai-start-button[aria-busy="true"] { cursor: wait; opacity: .74; }
.ai-trainer-skeleton { display: grid; gap: 14px; }
.ai-trainer-skeleton__config,
.ai-trainer-skeleton__opponent {
    display: grid;
    gap: 12px;
    padding: 24px;
    border: 1px solid var(--border-subtle, var(--tp-color-border));
    border-radius: var(--tp-radius-lg);
    background: var(--surface-1, var(--tp-color-surface));
}
.ai-trainer-skeleton__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 16px; }
.ai-trainer-skeleton__config { min-height: 430px; }
.ai-trainer-skeleton__opponent { min-height: 250px; }
.ai-trainer-skeleton span {
    display: block;
    height: 18px;
    border-radius: var(--tp-radius-pill);
    background: linear-gradient(90deg, var(--surface-2, var(--tp-color-surface-raised)), var(--surface-raised, var(--tp-color-surface-soft)), var(--surface-2, var(--tp-color-surface-raised)));
    background-size: 220% 100%;
    animation: aiTrainerSkeleton 1100ms var(--tp-ease-standard) infinite;
}
.ai-trainer-skeleton__config span { height: 82px; }
.ai-trainer-skeleton__opponent span:first-child { height: 64px; }
.ai-trainer-skeleton__cta { width: 100%; min-height: 54px; }

@keyframes aiTrainerReveal {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes aiTrainerSkeleton {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* Guest header is part of the hero, not a separate chrome bar. */
#web-auth-screen.sm-landing .sm-landing-header {
    position: relative;
    min-height: calc(64px + env(safe-area-inset-top, 0px));
    height: auto !important;
    padding-top: env(safe-area-inset-top, 0px);
    border: 0 !important;
    background: transparent !important;
}

@media (max-width: 900px) {
    .ai-trainer-workspace,
    .ai-trainer-skeleton__grid { grid-template-columns: 1fr; }
    .ai-difficulty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-setup-preview { position: static; }
}

@media (max-width: 760px) {
    body.bot-setup-active .tp-topbar { display: none !important; }
    body.bot-setup-active .tp-shell-main { padding-top: 0 !important; }
    body.bot-setup-active .sm-app-main > #screen-bot-setup.screen.active {
        padding-bottom: calc(var(--tp-mobile-nav-height, 68px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
        scroll-padding-bottom: calc(var(--tp-mobile-nav-height, 68px) + env(safe-area-inset-bottom, 0px) + 16px);
    }
    .ai-setup-shell,
    .ai-trainer-skeleton {
        width: min(100% - 20px, 620px);
        padding: 14px 0 20px;
    }
    .ai-setup-page-heading { gap: 10px; margin-bottom: 12px; padding-top: 0; }
    .ai-setup-page-heading h1 { font-size: 22px; }
    .ai-setup-page-heading p { font-size: 12px; }
    .ai-setup-config,
    .ai-setup-preview { padding: 14px; }
    .ai-opponent-heading { grid-template-columns: 46px minmax(0, 1fr); }
    .ai-opponent-avatar { width: 46px; height: 46px; }
    .ai-setup-fieldset { margin-bottom: 13px; }
    .ai-choice-card { min-height: 72px; padding: 10px; }
    .ai-difficulty-description { min-height: 0; margin-top: 7px; }
    .ai-setup-cta-wrap { position: static; padding: 0; }
}

@media (max-width: 430px) {
    .ai-setup-shell { width: calc(100% - 12px); padding-top: 10px; }
    .ai-trainer-skeleton { width: calc(100% - 12px); padding-top: 10px; }
    .ai-segment-option { padding-inline: 4px; font-size: 10px; }
    .ai-side-disc { width: 12px; height: 12px; flex-basis: 12px; }
    .ai-difficulty-grid,
    .ai-time-grid { grid-template-columns: 1fr; }
    .ai-choice-card { min-height: 64px; padding: 9px 10px; }
    .ai-setup-config,
    .ai-setup-preview { padding: 12px; }
}

/* Final product polish owners: brand, time selection and analysis workspace. */
wps-translate-entry,
#google_translate_element,
.goog-te-gadget,
.goog-te-banner-frame,
iframe.goog-te-menu-frame {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.sm-logo-image,
.tp-brand__logo {
    display: block;
    object-fit: contain;
    flex: 0 0 auto;
    border: 0;
    border-radius: 7px;
    clip-path: none;
    background: none;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42))
        drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.18));
}

.logo-text { display: inline-flex; align-items: center; gap: 8px; }

.tp-time-select__header-label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.tp-utility-header { position: relative; display: flex !important; align-items: center; justify-content: flex-start !important; gap: 12px; min-height: 58px; }
.tp-utility-header > .tp-page-back,
.tp-utility-header > .sub-screen-back { order: -1; flex: 0 0 42px; margin: 0; }
.tp-utility-header__copy { display: grid; min-width: 0; gap: 1px; line-height: 1.2; }
.tp-utility-header__copy > span,
.tp-utility-header__copy > .tp-time-select__header-label { color: var(--text-secondary); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tp-utility-header__copy > strong { overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.tp-page-back { justify-self: start; }

.tp-time-select .time-select-screen {
    min-height: auto;
    overflow: visible;
    padding: clamp(20px, 3vw, 36px) 20px max(28px, env(safe-area-inset-bottom));
}

.tp-time-select .time-select-scroll {
    width: min(100%, 1240px);
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
}

.tp-time-select__intro { margin-bottom: 14px; }
.tp-time-select__intro h1 { margin: 0 0 5px; font-size: clamp(25px, 2.4vw, 34px); line-height: 1.12; }
.tp-time-select__intro p:last-child { margin: 0; color: var(--text-secondary); }
.tp-time-select__layout { display: grid; grid-template-columns: minmax(0, 1fr) 294px; gap: 14px; align-items: stretch; }
.tp-time-select__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tp-time-group { min-width: 0; padding: 12px; border: 1px solid var(--border-subtle, rgba(255,255,255,.09)); border-radius: 17px; background: var(--surface-1, #141820); }
.tp-time-group--recommended { border-color: color-mix(in srgb, var(--accent, #d2aa55) 34%, var(--border-subtle)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #d2aa55) 5%, var(--surface-1)), var(--surface-1)); }
.tp-time-select .time-category-label { display: flex; align-items: center; gap: 7px; min-height: 26px; margin: 0 0 9px; font-size: 13px; letter-spacing: .02em; }
.tp-time-recommendation { margin-left: auto; padding: 3px 6px; border-radius: 99px; color: var(--accent, #d2aa55); background: color-mix(in srgb, var(--accent, #d2aa55) 10%, transparent); font-size: 9px; font-weight: 700; letter-spacing: 0; }
.tp-time-select .time-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.tp-time-select .time-option {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "main check" "inc check" "type check";
    min-height: 66px;
    padding: 9px 11px;
    text-align: left;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--surface-2, #171b22) 92%, transparent) !important;
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1)) !important;
    border-radius: 14px !important;
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.tp-time-select .time-option:hover { border-color: color-mix(in srgb, var(--accent, #d2aa55) 54%, transparent); transform: translateY(-1px); }
.tp-time-select .time-option:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent, #d2aa55) 40%, transparent); outline-offset: 2px; }
.tp-time-select .time-option.selected {
    border-color: var(--accent, #d2aa55) !important;
    background: color-mix(in srgb, var(--accent, #d2aa55) 10%, var(--surface-2, #171b22)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #d2aa55) 25%, transparent);
}
.time-option-main { grid-area: main; font-size: 19px; font-weight: 700; }
.time-option-inc { grid-area: inc; color: var(--text-secondary); font-size: 12px; }
.time-option-type { grid-area: type; color: var(--accent, #d2aa55); font-size: 11px; font-weight: 600; }
.time-option-check { grid-area: check; align-self: center; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: transparent; border: 1px solid var(--border-subtle, rgba(255,255,255,.12)); }
.time-option.selected .time-option-check { color: #111318; background: var(--accent, #d2aa55); border-color: var(--accent, #d2aa55); }
.tp-time-match-summary { display: flex; min-width: 0; flex-direction: column; padding: 19px; border: 1px solid color-mix(in srgb, var(--accent, #d2aa55) 30%, var(--border-subtle)); border-radius: 18px; background: linear-gradient(155deg, color-mix(in srgb, var(--accent, #d2aa55) 7%, var(--surface-raised, #1b2029)), var(--surface-1, #141820)); box-shadow: 0 20px 55px rgba(0,0,0,.18); }
.tp-time-match-summary__status { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 99px; color: var(--accent, #d2aa55); background: color-mix(in srgb, var(--accent, #d2aa55) 10%, transparent); font-size: 11px; font-weight: 650; }
.tp-time-match-summary > .tp-section-heading__kicker { margin: 22px 0 4px; }
.tp-time-match-summary h2 { margin: 0; font-size: 29px; line-height: 1.05; }
.tp-time-match-summary h2 span:last-child { color: var(--text-secondary); font-size: 14px; font-weight: 500; }
.tp-time-match-summary > p:not(.tp-section-heading__kicker) { margin: 7px 0 0; color: var(--text-secondary); }
.tp-time-match-facts { display: grid; gap: 0; margin: 18px 0 0; }
.tp-time-match-facts > div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08)); }
.tp-time-match-facts dt { color: var(--text-secondary); font-size: 11px; }
.tp-time-match-facts dd { margin: 0; color: var(--text-primary); font-size: 11px; text-align: right; }
.tp-time-select__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 16px; }
.tp-time-match-summary .tp-time-select__actions { flex-direction: column; }
.tp-time-match-summary .tp-time-select__actions > p { margin: 0; color: var(--text-secondary); font-size: 10px; line-height: 1.45; text-align: center; }
.tp-time-select__actions .search-with-time-btn,
.tp-time-select__actions .back-btn-top { width: auto; margin: 0; min-height: 46px; }
.tp-time-match-summary .search-with-time-btn { width: 100%; }

.tp-analysis-page .analysis-screen-wrap {
    width: min(100%, 1380px);
    max-width: 1380px;
    margin: 0 auto;
    padding: clamp(14px, 2vw, 24px) 20px max(24px, env(safe-area-inset-bottom));
    overflow: visible;
}
.tp-analysis-heading { margin-bottom: 14px; }
.tp-analysis-heading h1 { margin: 0 0 4px; font-size: clamp(25px, 2.4vw, 34px); }
.tp-analysis-heading p { margin: 0; color: var(--text-secondary); }
.tp-analysis-workspace { display: grid; grid-template-columns: minmax(470px, 1.32fr) minmax(320px, .82fr) minmax(260px, .62fr); gap: 14px; align-items: start; }
.tp-analysis-preview,
.tp-analysis-controls,
.tp-analysis-settings,
.tp-analysis-page .analysis-result-card {
    background: var(--surface-1, #141820);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.09));
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0,0,0,.16);
}
.tp-analysis-preview { min-width: 0; padding: clamp(15px, 1.8vw, 22px); }
.tp-analysis-preview__heading,
.tp-analysis-preview__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tp-analysis-preview__heading h2 { margin: 0; font-size: 18px; }
.tp-analysis-side { color: var(--accent, #d2aa55); font-size: 13px; font-weight: 600; }
.tp-analysis-board { position: relative; display: grid; gap: 10px; margin: 18px 0; padding: 17px 54px; border: 1px solid rgba(205,168,91,.28); border-radius: 22px; background: linear-gradient(145deg, #c8a36c, #9a7144); }
.tp-analysis-board__row { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 7px; }
.tp-analysis-pit { position: relative; display: grid; place-items: center; aspect-ratio: .78; min-width: 0; padding: 0; border: 1px solid transparent; border-radius: 48%; color: #f4e9d5; background: #292622; box-shadow: inset 0 4px 8px rgba(0,0,0,.65), 0 1px rgba(255,255,255,.18); font: inherit; font-weight: 700; }
.tp-analysis-pit:not(:disabled) { cursor: pointer; }
.tp-analysis-pit:disabled,
.tp-analysis-kazans button:disabled { opacity: 1; }
.tp-analysis-pit:not(:disabled):hover { border-color: rgba(255,245,218,.72); }
.tp-analysis-pit.is-fixed { box-shadow: inset 0 4px 8px rgba(0,0,0,.65), 0 0 0 2px rgba(255,245,218,.22); }
.tp-analysis-pit.is-selected { outline: 3px solid #f7d37a; outline-offset: 2px; }
.tp-analysis-pit small { position: absolute; bottom: 4px; color: #bca77f; font-size: 9px; font-weight: 500; }
.tp-analysis-kazans { position: absolute; inset: 20px 10px; display: flex; flex-direction: column; justify-content: space-around; pointer-events: none; }
.tp-analysis-kazans button { display: grid; place-items: center; width: 36px; height: 38%; padding: 0; border: 1px solid transparent; border-radius: 18px; color: #f4e9d5; background: #332a21; box-shadow: inset 0 3px 7px rgba(0,0,0,.55); font: inherit; font-size: 13px; pointer-events: auto; }
.tp-analysis-kazans button:last-child { margin-left: auto; }
.tp-analysis-kazans button:not(:disabled) { cursor: pointer; }
.tp-analysis-kazans button.is-selected { outline: 3px solid #f7d37a; outline-offset: 2px; }
.tp-analysis-preview__footer { color: var(--text-secondary); font-size: 12px; }
.tp-analysis-move-controls { display: flex; justify-content: center; align-items: center; gap: 7px; margin: -8px 0 18px; }
.tp-analysis-move-controls .tp-button { min-width: 44px; width: 44px; padding: 0; }
.tp-analysis-move-controls #analysis-ply { min-width: 58px; text-align: center; color: var(--text-secondary); font-size: 12px; }
.tp-analysis-controls,
.tp-analysis-settings { width: auto; max-width: none; margin: 0; padding: 18px; }
.tp-analysis-controls { padding: 14px; }
.tp-analysis-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--border-subtle); border-radius: 13px; background: var(--surface-2); }
.tp-analysis-mode-switch button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 0; border-radius: 9px; color: var(--text-secondary); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.tp-analysis-mode-switch button.selected { color: var(--text-primary); background: var(--surface-raised); box-shadow: 0 5px 16px rgba(0,0,0,.15); }
.tp-analysis-mode-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-analysis-source-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 9px 0; }
.tp-analysis-source-actions .tp-button { min-height: 40px; width: 100%; }
.tp-analysis-dropzone { padding: 9px; margin: 8px 0 13px; border: 1px dashed var(--border-subtle, rgba(255,255,255,.14)); border-radius: 12px; transition: border-color 160ms ease, background-color 160ms ease; }
.tp-analysis-dropzone.is-dragging { border-color: var(--accent, #d2aa55); background: color-mix(in srgb, var(--accent, #d2aa55) 8%, transparent); }
.tp-analysis-dropzone > p { margin: 0; color: var(--text-secondary); text-align: center; font-size: 11px; }
.tp-analysis-page .analysis-textarea { min-height: 86px; resize: vertical; }
.tp-field-help,
.tp-field-error { margin: 7px 0 16px; font-size: 12px; line-height: 1.45; }
.tp-field-help { color: var(--text-secondary); }
.tp-field-error { color: var(--danger, #e87878); }
.tp-analysis-inline-actions { display: flex; justify-content: space-between; gap: 8px; margin: -10px 0 12px; }
.tp-analysis-example { margin: 0 0 14px; padding: 9px 11px; overflow: auto; border: 1px solid var(--border-subtle, rgba(255,255,255,.09)); border-radius: 10px; color: var(--text-secondary); background: var(--surface-2, #1a1f28); font: 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.tp-analysis-settings__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.tp-analysis-settings__heading p { margin: 0 0 3px; }
.tp-analysis-settings__heading h2 { margin: 0; font-size: 18px; }
.tp-analysis-settings__heading > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.tp-analysis-page .depth-row-new { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.tp-analysis-page .depth-btn-new { display: grid; gap: 2px; min-height: 54px; padding: 8px; font-size: 11px; background: var(--surface-2, #1a1f28); border: 1px solid var(--border-subtle, rgba(255,255,255,.1)); }
.tp-analysis-page .depth-btn-new strong { font-size: 15px; }
.tp-analysis-page .depth-btn-new.selected { color: var(--accent, #d2aa55); border-color: var(--accent, #d2aa55); background: color-mix(in srgb, var(--accent, #d2aa55) 9%, var(--surface-2, #1a1f28)); }
.tp-analysis-actions { display: flex; gap: 8px; margin-top: 12px; }
.tp-analysis-actions > [hidden] { display: none !important; }
.tp-analysis-actions .analyze-btn-new { width: auto; flex: 1; margin: 0; }
.tp-analysis-page .analysis-spinner-wrap { margin: 16px 0 0; }
.tp-analysis-page .analysis-result-card { width: 100%; max-width: none; margin: 14px 0 0; padding: 16px; align-items: flex-start; }
.tp-analysis-page .result-best-pit { font-size: 27px; }

.tp-position-editor__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tp-position-editor__heading h2 { margin: 0 0 4px; font-size: 17px; }
.tp-position-editor__heading p { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.tp-position-editor__summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 9px 0; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-2); color: var(--text-secondary); font-size: 11px; }
.tp-position-editor__summary strong { color: var(--text-primary); font-size: 17px; }
.tp-position-editor__selection { display: grid; gap: 7px; padding: 10px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-subtle)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 5%, var(--surface-2)); }
.tp-position-editor__selection > strong { font-size: 14px; }
.tp-field-label { color: var(--text-secondary); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.tp-position-stepper { display: grid; grid-template-columns: 42px 1fr 42px; gap: 5px; }
.tp-position-stepper button,
.tp-position-stepper input { min-width: 0; min-height: 42px; border: 1px solid var(--border-subtle); border-radius: 10px; color: var(--text-primary); background: var(--surface-raised); font: inherit; }
.tp-position-stepper button { cursor: pointer; }
.tp-position-stepper input { width: 100%; text-align: center; font-weight: 700; appearance: textfield; }
.tp-position-stepper input::-webkit-inner-spin-button { appearance: none; }
.tp-position-stepper button:hover,
.tp-position-stepper button:focus-visible,
.tp-position-stepper input:focus-visible { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: 1px; }
.tp-position-turn { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.tp-position-turn button { min-height: 40px; border: 1px solid var(--border-subtle); border-radius: 10px; color: var(--text-secondary); background: var(--surface-2); font: inherit; font-size: 11px; cursor: pointer; }
.tp-position-turn button.selected { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.tp-position-editor > .tp-field-help { margin: 7px 0 0; }

/* Retire the legacy desktop 720px utility cap without touching other screens. */
@media (min-width: 861px) {
    body:not(.game-active) #screen-time-select,
    body:not(.game-active) #screen-analysis {
        height: calc(100dvh - 65px) !important;
        max-height: calc(100dvh - 65px) !important;
        padding-bottom: 0 !important;
    }
    body:not(.game-active) .tp-time-select .time-select-screen {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
        padding-bottom: 24px !important;
        overflow: visible !important;
    }
    body:not(.game-active) .tp-analysis-page .analysis-screen-wrap {
        width: min(100%, 1380px) !important;
        max-width: 1380px !important;
        margin-inline: auto !important;
        padding-bottom: 24px !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 1180px) {
    .tp-analysis-workspace { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); }
    .tp-analysis-settings { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr); gap: 12px 18px; align-items: start; }
    .tp-analysis-settings__heading { grid-row: span 3; margin: 0; }
    .tp-analysis-settings .tp-analysis-actions,
    .tp-analysis-settings .analysis-spinner-wrap,
    .tp-analysis-settings .analysis-result-card { grid-column: 2; }
    .tp-analysis-source-actions { grid-template-columns: 1fr; }
}

@media (max-width: 1020px) {
    .tp-time-select__layout { grid-template-columns: 1fr; }
    .tp-time-match-summary { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 18px; align-items: center; }
    .tp-time-match-summary__status { grid-row: span 2; }
    .tp-time-match-summary > .tp-section-heading__kicker { margin: 0; }
    .tp-time-match-summary h2 { font-size: 24px; }
    .tp-time-match-summary > p:not(.tp-section-heading__kicker) { margin: 0; }
    .tp-time-match-facts { display: none; }
    .tp-time-match-summary .tp-time-select__actions { grid-column: 3; grid-row: 1 / span 2; width: 230px; padding: 0; }
}

@media (max-width: 860px) {
    .tp-time-select__groups { grid-template-columns: 1fr; }
    .tp-time-select .time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tp-analysis-workspace { grid-template-columns: 1fr; }
    .tp-analysis-controls { order: -1; }
    .tp-analysis-settings { display: block; grid-column: auto; }
    .tp-analysis-settings__heading { margin-bottom: 18px; }
}

@media (max-width: 560px) {
    .tp-time-select .time-select-screen { padding-inline: 14px; }
    .tp-time-select__header-label { display: block; }
    .tp-time-select__groups { gap: 8px; }
    .tp-time-group { padding: 9px; }
    .tp-time-select .time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important; }
    .tp-time-select .time-option { min-height: 66px; padding: 8px !important; }
    .time-option-main { font-size: 18px; }
    .time-option-check { width: 20px; height: 20px; }
    .tp-time-match-summary { display: flex; padding: 15px; }
    .tp-time-match-summary .tp-time-select__actions { width: 100%; padding-top: 14px; }
    .tp-time-select__actions .search-with-time-btn { width: 100%; }
    .tp-analysis-page .analysis-screen-wrap { padding-inline: 14px; }
    .tp-analysis-board { padding: 14px 42px; gap: 8px; border-radius: 18px; }
    .tp-analysis-board__row { gap: 4px; }
    .tp-analysis-pit { font-size: 11px; }
    .tp-analysis-pit small { font-size: 7px; bottom: 2px; }
    .tp-analysis-kazans { inset: 14px 6px; }
    .tp-analysis-kazans button { width: 29px; }
    .tp-analysis-controls { padding: 16px; }
    .tp-analysis-source-actions { display: grid; grid-template-columns: 1fr; }
    .tp-analysis-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-time-select .time-option,
    .tp-analysis-dropzone,
    .tp-button { transition: none !important; animation: none !important; }
}