/* Play-first UI layer: familiar board-platform ergonomics with TogyzPro identity. */
:root {
    --play-green: #81b64c;
    --play-green-hover: #94c75c;
    --play-green-deep: #5d8d31;
    --play-bg: #262522;
    --play-panel: #312e2b;
    --play-panel-raised: #3a3733;
    --play-line: rgba(255,255,255,.09);
    --play-text: #f4f2ed;
    --play-muted: #b7b4ad;
}

/* Global app shell — denser navigation, generous play area. */
.app-container.sm-app-shell {
    --sidebar-w: 208px;
    --header-h: 60px;
    background: var(--play-bg) !important;
}
.sm-app-header,
.sm-app-sidebar { background: #211f1c !important; }
.sm-app-header { border-color: var(--play-line) !important; }
.sm-app-sidebar {
    border-color: var(--play-line) !important;
    padding: 12px 10px 16px !important;
}
.sm-nav-item {
    min-height: 42px;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    color: #c8c5be !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}
.sm-nav-item i { font-size: 16px !important; width: 20px !important; }
.sm-nav-item:hover { background: rgba(255,255,255,.07) !important; color: white !important; }
.sm-nav-item.is-active {
    color: #fff !important;
    background: rgba(129,182,76,.18) !important;
    box-shadow: inset 3px 0 0 var(--play-green);
}
.sm-nav-item.is-active i { color: var(--play-green) !important; }
.sm-app-main,
.sm-app-main > .screen { background: var(--play-bg) !important; }

/* Home — the board and the next action are always above the fold. */
#screen-home.sm-home { max-width: 1160px !important; width: 100%; }
#screen-home .sm-page-content { padding: 30px 30px 54px !important; }
.sm-greeting {
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    font-size: clamp(24px, 2.8vw, 34px) !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
}
.sm-greeting-sub { color: var(--play-muted) !important; font-size: 14px !important; margin-bottom: 20px !important; }
.sm-play-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, .82fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 24px;
}
.sm-board-showcase,
.sm-quick-panel {
    border: 1px solid var(--play-line);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,.26);
}
.sm-board-showcase {
    display:flex;
    flex-direction:column;
    padding: 18px;
    background:
        radial-gradient(circle at 50% 0, rgba(212,162,76,.11), transparent 48%),
        linear-gradient(145deg, #4b2f18, #2d1c0f);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sm-board-showcase:hover,
.sm-board-showcase:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(212,162,76,.5);
    box-shadow: 0 20px 46px rgba(0,0,0,.38);
    outline: none;
}
.sm-showcase-topline,
.sm-showcase-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sm-showcase-topline {
    color: rgba(255,255,255,.64);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 14px;
}
.sm-live-dot {
    display:inline-flex; align-items:center; gap:7px;
    color:#d8efc1; background:rgba(129,182,76,.17);
    padding:5px 9px; border-radius:999px;
}
.sm-live-dot::before {
    content:""; width:7px; height:7px; border-radius:50%; background:var(--play-green);
    box-shadow:0 0 0 4px rgba(129,182,76,.13);
}
.sm-preview-board {
    border-radius: 18px;
    padding: clamp(14px,2.2vw,24px);
    background: linear-gradient(145deg,#b98243,#71451f);
    border: 1px solid rgba(255,224,170,.25);
    box-shadow: inset 0 2px 2px rgba(255,255,255,.12), inset 0 -8px 18px rgba(25,10,2,.35), 0 12px 25px rgba(0,0,0,.28);
}
.sm-preview-row { display:grid; grid-template-columns:repeat(9,minmax(28px,1fr)); gap:clamp(5px,1vw,10px); }
.sm-preview-row span {
    aspect-ratio:1.18;
    border-radius:50%;
    display:grid; place-items:center;
    color:#f4dfb4; font:800 clamp(11px,1.5vw,16px)/1 var(--font-mono);
    background:radial-gradient(circle at 42% 38%,#3c250f,#160d07 72%);
    border:1px solid rgba(255,224,170,.24);
    box-shadow:inset 0 5px 10px rgba(0,0,0,.8),0 1px rgba(255,255,255,.1);
}
.sm-preview-row--top { direction:rtl; }
.sm-preview-kazan {
    display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:10px;
    margin:10px 0;
}
.sm-preview-kazan i {
    height:30px; border-radius:999px;
    background:rgba(43,22,8,.68); border:1px solid rgba(255,224,170,.2);
    box-shadow:inset 0 4px 10px rgba(0,0,0,.52);
}
.sm-preview-kazan b {
    display:grid; place-items:center; height:34px; border-radius:8px;
    background:rgba(24,14,7,.72); color:#f3d89e; font:800 14px var(--font-mono);
}
.sm-showcase-caption { margin-top:15px; color:white; }
.sm-showcase-caption span { font-size:16px; font-weight:800; }
.sm-showcase-caption span i { color:var(--gold-bright); margin-right:6px; }
.sm-showcase-caption small { color:rgba(255,255,255,.58); font-size:11px; }
.sm-showcase-features {
    display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:18px;
}
.sm-showcase-features span {
    display:inline-flex; align-items:center; gap:6px; padding:7px 9px; border-radius:8px;
    background:rgba(20,10,4,.28); border:1px solid rgba(255,224,170,.11);
    color:rgba(255,255,255,.66); font-size:10px; font-weight:700;
}
.sm-showcase-features i { color:#e6bf73; }

.sm-quick-panel { background:var(--play-panel); padding:22px; }
.sm-quick-eyebrow { color:var(--play-green); font-size:10px; letter-spacing:.16em; font-weight:900; }
.sm-quick-panel h2 {
    margin:5px 0 6px; color:var(--play-text); font:800 25px/1.2 var(--font-body); letter-spacing:-.03em;
}
.sm-quick-panel > p { margin:0 0 17px; color:var(--play-muted); font-size:13px; line-height:1.45; }
.sm-mode-btn {
    width:100%; min-height:62px; display:grid; grid-template-columns:42px 1fr 14px;
    align-items:center; gap:11px; margin-top:9px; padding:9px 12px;
    border:1px solid var(--play-line); border-radius:10px;
    background:#262522; color:var(--play-text); text-align:left; cursor:pointer;
    box-shadow:0 3px 8px rgba(0,0,0,.18);
    transition:background .15s ease,transform .15s ease,border-color .15s ease;
}
.sm-mode-btn:hover { background:#403d39; border-color:rgba(255,255,255,.17); transform:translateY(-1px); }
.sm-mode-btn--primary { background:linear-gradient(#88bd51,#73a943); border-color:#91c45c; color:#142008; }
.sm-mode-btn--primary:hover { background:linear-gradient(#98cb61,#82b74d); border-color:#a4d16f; }
.sm-mode-icon {
    width:38px; height:38px; border-radius:9px; display:grid; place-items:center;
    background:rgba(255,255,255,.08); color:#e8cf9c; font-size:16px;
}
.sm-mode-btn--primary .sm-mode-icon { background:rgba(20,32,8,.13); color:#1f350d; }
.sm-mode-icon--ai { color:#79b9e5; background:rgba(74,125,168,.16); }
.sm-mode-btn > span:nth-child(2) { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sm-mode-btn strong { font-size:14px; font-weight:850; }
.sm-mode-btn small { color:var(--play-muted); font-size:10.5px; }
.sm-mode-btn--primary small { color:rgba(20,32,8,.65); }
.sm-mode-btn > i { opacity:.5; font-size:11px; }
.sm-quick-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.sm-quick-links button,.sm-quick-links a {
    min-height:36px; display:flex; align-items:center; justify-content:center; gap:6px;
    border:0; border-radius:8px; background:rgba(255,255,255,.055); color:var(--play-muted);
    font:700 10.5px var(--font-body); text-decoration:none; cursor:pointer;
}
.sm-quick-links button:hover,.sm-quick-links a:hover { background:rgba(255,255,255,.09); color:white; }
.sm-quick-links a.is-live { color:#d8efc1; background:rgba(129,182,76,.12); }
.sm-section-heading { display:flex; justify-content:space-between; align-items:end; margin:0 0 10px; }
.sm-section-heading > div { display:flex; align-items:baseline; gap:10px; }
.sm-section-heading span { color:var(--play-text); font-size:16px; font-weight:800; }
.sm-section-heading small { color:var(--play-muted); font-size:11px; }
.sm-actions { gap:12px !important; margin-bottom:18px !important; }
.sm-action {
    min-height:88px; display:grid !important; grid-template-columns:42px 1fr; align-items:center; gap:11px;
    background:var(--play-panel) !important; border-color:var(--play-line) !important;
    border-radius:11px !important; padding:15px !important; color:inherit; font:inherit;
}
.sm-action .sm-action-icon { margin:0; }
.sm-action-title { font-family:var(--font-body) !important; font-size:14px !important; }
.sm-stats-card,.sm-activity-card { background:var(--play-panel) !important; border-color:var(--play-line) !important; }

/* Landing: simplified primary action and warmer board-platform palette. */
.sm-landing { background:#262522 !important; }
.sm-landing-header { border-color:var(--play-line) !important; }
.sm-landing-cta--primary,.sm-auth-submit {
    background:linear-gradient(#88bd51,#73a943) !important;
    color:#17220c !important; border-color:#91c45c !important;
    box-shadow:0 4px 0 #537d2c,0 10px 22px rgba(0,0,0,.24) !important;
}
.sm-landing-cta--primary:hover,.sm-auth-submit:hover { background:linear-gradient(#98cb61,#82b74d) !important; }
.sm-landing-title em { color:var(--play-green) !important; }
.sm-demo,.sm-auth-card { background:#312e2b !important; border-color:var(--play-line) !important; }

/* Game focus: readable clocks and a neutral surrounding canvas. */
body.game-active #screen-game { background:#211f1c !important; }
body.game-active .board-stage { background:radial-gradient(circle at 50% 42%,#35312c 0,#211f1c 64%) !important; }
body.online-game .board-device-clock,
body.online-game .board-match-clock {
    min-width:128px; padding:10px 16px !important; border-radius:8px !important;
    background:#f4f2ed !important; color:#242321 !important;
    font-family:var(--font-mono) !important; font-weight:850 !important;
    box-shadow:0 5px 16px rgba(0,0,0,.28) !important;
}
.board-side-btn { border-radius:8px !important; }

/* Physical board finish — walnut, carved wells and matte kumalaks. */
.sm-board-showcase {
    background:
        linear-gradient(115deg, rgba(255,255,255,.035), transparent 24%, transparent 72%, rgba(0,0,0,.12)),
        #3b291c;
}
.sm-preview-board {
    position: relative;
    overflow: hidden;
    background:
        repeating-linear-gradient(7deg, transparent 0 24px, rgba(63,32,14,.13) 25px 27px, transparent 28px 61px),
        linear-gradient(100deg, rgba(255,242,208,.08), transparent 24%, rgba(75,37,14,.12) 67%, transparent),
        linear-gradient(145deg,#a06c3d,#76502f 54%,#5b391f) !important;
    border: 7px solid #5f3c22 !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,235,196,.2),
        inset 0 12px 18px rgba(255,231,190,.06),
        inset 0 -12px 20px rgba(45,22,9,.24),
        0 12px 24px rgba(0,0,0,.28) !important;
}
.sm-preview-board::before {
    content:"";
    position:absolute; inset:0;
    background:repeating-linear-gradient(92deg,transparent 0 70px,rgba(54,29,15,.1) 71px 73px,transparent 74px 142px);
    mix-blend-mode:multiply;
    pointer-events:none;
}
.sm-preview-board > * { position:relative; z-index:1; }
.sm-preview-row span {
    border-radius:44% / 34% !important;
    color:#f4e5c5 !important;
    background:
        radial-gradient(circle at 36% 35%, rgba(232,209,161,.16) 0 5%, transparent 6%),
        radial-gradient(ellipse at 50% 43%,#321d10 0 42%,#160c07 72%,#090503 100%) !important;
    border:1px solid rgba(238,202,149,.17) !important;
    box-shadow:
        inset 0 7px 11px rgba(0,0,0,.72),
        inset 0 -3px 6px rgba(154,94,45,.16),
        0 1px 0 rgba(255,231,190,.13) !important;
    text-shadow:0 1px 2px #000;
}
.sm-preview-kazan i {
    background:radial-gradient(ellipse at 50% 38%,#321d10,#120a05 76%) !important;
    border-color:rgba(238,202,149,.16) !important;
    box-shadow:inset 0 7px 12px rgba(0,0,0,.68),0 1px rgba(255,235,198,.12) !important;
}
.sm-preview-kazan b {
    background:#3c281a !important;
    border:1px solid rgba(255,235,198,.12);
    color:#ead7b3 !important;
}

#screen-game .board-container {
    box-sizing:border-box !important;
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:0 !important;
    border:clamp(6px,1vw,11px) solid #5b361f !important;
    border-radius:clamp(12px,1.8vw,22px) !important;
    background:
        linear-gradient(90deg,rgba(49,25,12,.24),transparent 14%,transparent 84%,rgba(35,16,7,.3)),
        repeating-linear-gradient(6deg,transparent 0 54px,rgba(65,34,17,.12) 55px 58px,transparent 59px 111px),
        repeating-linear-gradient(92deg,#9b6a3e 0 112px,#936138 113px 224px,#a46f40 225px 340px) !important;
    box-shadow:
        0 20px 38px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,235,199,.28),
        inset 0 -6px 12px rgba(50,25,12,.22) !important;
}
#screen-game .board-layout {
    /* 1053px was the hard ceiling on the board, so widening the grid column
       changed nothing. The cap is raised; the height term in milestone.css
       still governs, so the board grows only as far as the viewport allows. */
    width:min(1680px,calc(100vw - 32px)) !important;
    max-width:1680px !important;
    max-height:calc(100dvh - 24px) !important;
}
#screen-game .board-container::before {
    display:block !important;
    background:
        linear-gradient(105deg,rgba(255,246,220,.055),transparent 25%,transparent 68%,rgba(62,31,15,.08)),
        repeating-linear-gradient(176deg,transparent 0 83px,rgba(74,38,19,.08) 84px 86px,transparent 87px 169px) !important;
    opacity:1 !important;
}

#screen-game .pit {
    box-sizing:border-box !important;
    border:1px solid rgba(239,203,154,.16) !important;
    border-radius:44% / 18% !important;
    background:
        radial-gradient(ellipse at 38% 35%,rgba(197,145,89,.12) 0 4%,transparent 5%),
        radial-gradient(ellipse at 50% 42%,#321b0e 0 40%,#160b06 73%,#080403 100%) !important;
    box-shadow:
        inset 0 15px 22px rgba(0,0,0,.72),
        inset 0 -6px 10px rgba(154,91,47,.13),
        inset 3px 0 6px rgba(0,0,0,.22),
        0 1px 0 rgba(255,233,196,.18) !important;
    transition:filter .16s ease,transform .16s ease,border-color .16s ease !important;
}
#screen-game .pit.player-pit:hover {
    filter:brightness(1.09);
    transform:translateY(-1px) !important;
    border-color:rgba(234,207,165,.38) !important;
    box-shadow:
        inset 0 15px 22px rgba(0,0,0,.7),
        inset 0 -6px 10px rgba(154,91,47,.16),
        0 2px 3px rgba(0,0,0,.24) !important;
}
#screen-game .pit.player-pit:active { transform:translateY(1px) scale(.985) !important; }
#screen-game .pit.last-pit,
#screen-game .pit.last-move-highlight {
    border-color:#d0b276 !important;
    box-shadow:
        inset 0 15px 22px rgba(0,0,0,.7),
        inset 0 -6px 10px rgba(154,91,47,.14),
        0 0 0 2px rgba(208,178,118,.78) !important;
}
#screen-game .pit.tuzdyk {
    border-color:#9d5b48 !important;
    background:radial-gradient(ellipse at 50% 43%,#3d1b14,#170907 74%,#080303) !important;
}
#screen-game .pit.tuzdyk::after {
    color:rgba(205,145,113,.62) !important;
    text-shadow:none !important;
}

#screen-game .stone,
#screen-game .kazan-stone {
    background:
        radial-gradient(circle at 34% 27%,#fff7d9 0 10%,#ead8ae 42%,#bca276 73%,#725a3c 100%) !important;
    border:1px solid rgba(72,48,29,.24) !important;
    box-shadow:
        inset -2px -2px 3px rgba(69,47,29,.28),
        inset 1px 1px 2px rgba(255,255,238,.56),
        0 2px 3px rgba(0,0,0,.34) !important;
}
#screen-game .stone:nth-child(3n),
#screen-game .kazan-stone:nth-child(3n) {
    background:radial-gradient(circle at 34% 27%,#f5ead0,#d1bd95 53%,#8a704d 100%) !important;
}
#screen-game .stone:nth-child(4n+1),
#screen-game .kazan-stone:nth-child(4n+1) { filter:brightness(.94) saturate(.84); }

#screen-game .kazan-track {
    border:1px solid rgba(239,203,154,.14) !important;
    background:radial-gradient(ellipse at 50% 38%,#392012,#170c07 72%,#0c0603) !important;
    box-shadow:
        inset 0 12px 19px rgba(0,0,0,.67),
        inset 0 -5px 9px rgba(145,86,43,.13),
        0 1px rgba(255,233,196,.14) !important;
}
#screen-game .kazan-track.kazan-bottom {
    border-color:rgba(231,211,178,.58) !important;
    box-shadow:
        inset 0 12px 19px rgba(0,0,0,.67),
        inset 0 -5px 9px rgba(145,86,43,.13),
        0 0 0 2px rgba(231,211,178,.58) !important;
}
#screen-game .num-label,
#screen-game .pit-count-label,
#screen-game .kazan-score { color:#f1e3c9 !important; text-shadow:0 1px 2px rgba(0,0,0,.72) !important; }
#screen-game .board-side-btn {
    border:1px solid rgba(255,255,255,.13) !important;
    background:#2e2b27 !important;
    color:#d8d5ce !important;
    box-shadow:0 4px 10px rgba(0,0,0,.26) !important;
}
#screen-game .board-side-btn:hover { background:#3a3732 !important; color:#fff !important; transform:translateY(-1px); }

/* Glass belongs only to the mobile bottom navigation. */
@media (max-width: 900px) {
    #main-bottom-nav.bottom-nav,
    body.use-liquid-nav #main-bottom-nav.bottom-nav {
        display:flex !important;
        position:fixed !important;
        top:auto !important;
        left:max(10px,env(safe-area-inset-left,0px)) !important;
        right:max(10px,env(safe-area-inset-right,0px)) !important;
        bottom:max(9px,env(safe-area-inset-bottom,9px)) !important;
        width:auto !important;
        max-width:none !important;
        height:64px !important;
        min-height:64px !important;
        max-height:64px !important;
        padding:0 5px !important;
        flex-direction:row !important;
        align-items:stretch !important;
        justify-content:space-around !important;
        gap:0 !important;
        border-radius:22px !important;
        border:1px solid rgba(255,255,255,.16) !important;
        border-top-color:rgba(255,255,255,.25) !important;
        background:rgba(43,41,37,.68) !important;
        -webkit-backdrop-filter:blur(22px) saturate(125%) !important;
        backdrop-filter:blur(22px) saturate(125%) !important;
        box-shadow:0 13px 30px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.1) !important;
        overflow:visible !important;
        overflow-y:visible !important;
        animation:glassNavEnter .48s cubic-bezier(.2,.78,.25,1) both;
    }
    #main-bottom-nav.bottom-nav::before {
        content:"";
        position:absolute; inset:1px 12px auto; height:1px;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
        pointer-events:none;
    }
    #main-bottom-nav > .nav-item,
    #main-bottom-nav > .nav-item-center {
        appearance:none !important;
        -webkit-appearance:none !important;
        border:0 !important;
        background:transparent !important;
        font:inherit !important;
        display:flex !important;
        flex:1 1 0 !important;
        width:auto !important;
        min-width:44px !important;
        height:58px !important;
        min-height:58px !important;
        margin:0 !important;
        padding:0 !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;
        position:relative !important;
        border-radius:17px !important;
        color:rgba(244,242,237,.62) !important;
        transition:color .2s ease,background .2s ease,transform .18s ease !important;
    }
    #main-bottom-nav .nav-item:hover { background:rgba(255,255,255,.045); }
    #main-bottom-nav .nav-item:active,
    #main-bottom-nav .nav-item-center:active { transform:scale(.94); }
    #main-bottom-nav .nav-item.active {
        color:#fff !important;
        background:rgba(255,255,255,.085) !important;
        box-shadow:inset 0 1px rgba(255,255,255,.08) !important;
    }
    #main-bottom-nav .nav-item.active i { color:#d7bd85 !important; animation:glassTabSelect .34s cubic-bezier(.2,.85,.3,1); }
    #main-bottom-nav .nav-center-circle {
        position:absolute !important;
        left:50% !important;
        top:auto !important;
        bottom:32px !important;
        width:48px !important; height:48px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:50% !important;
        border:1px solid rgba(255,255,255,.3) !important;
        background:rgba(115,160,72,.88) !important;
        -webkit-backdrop-filter:blur(12px) saturate(120%) !important;
        backdrop-filter:blur(12px) saturate(120%) !important;
        box-shadow:0 8px 17px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.28) !important;
        transform:translateX(-50%);
        animation:playButtonSettle .55s cubic-bezier(.18,.9,.25,1) both;
    }
    #main-bottom-nav .nav-item-center.active .nav-center-circle {
        background:rgba(129,182,76,.92) !important;
        box-shadow:0 8px 17px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.3) !important;
    }
    #main-bottom-nav .nav-center-circle i { color:#18220f !important; font-size:18px !important; }
    #main-bottom-nav .nav-center-label { margin-top:30px !important; color:rgba(244,242,237,.72) !important; }
    #main-bottom-nav .nav-item-center.active .nav-center-label { color:#fff !important; }
}

@keyframes glassNavEnter {
    from { opacity:0; transform:translateY(18px) scale(.98); }
    to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes glassTabSelect {
    0% { transform:translateY(2px) scale(.88); }
    65% { transform:translateY(-1px) scale(1.08); }
    100% { transform:translateY(0) scale(1); }
}
@keyframes playButtonSettle {
    from { opacity:0; transform:translateX(-50%) translateY(10px) scale(.86); }
    to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}

@media (max-width: 1050px) {
    .sm-play-layout { grid-template-columns:1fr; }
    .sm-board-showcase { max-width:none; }
    .sm-quick-panel { display:grid; grid-template-columns:1fr 1fr; column-gap:10px; }
    .sm-quick-panel h2,.sm-quick-panel > p,.sm-quick-eyebrow,.sm-quick-links { grid-column:1/-1; }
}
@media (max-width: 900px) {
    #screen-home .sm-page-content { padding:22px 18px 90px !important; }
}
@media (max-width: 640px) {
    .sm-play-layout { gap:12px; }
    .sm-board-showcase { padding:12px; }
    .sm-preview-board { padding:12px 9px; border-radius:12px; }
    .sm-preview-row { gap:4px; }
    .sm-preview-row span { min-width:0; font-size:10px; }
    .sm-showcase-caption small { display:none; }
    .sm-quick-panel { display:block; padding:17px; }
    .sm-actions { grid-template-columns:1fr !important; }
    .sm-action { min-height:72px; }
    .sm-bottom-grid { grid-template-columns:1fr !important; }
    .sm-quick-links { grid-template-columns:1fr; }
    .sm-section-heading small { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    .sm-board-showcase,.sm-mode-btn,.sm-action,.bottom-nav,.nav-center-circle,.nav-item i { transition:none !important; animation:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAY HUB — мобильный порядок: hero → время → CTA → режимы → «Ещё»
   Тёмно-золотая тема берётся из design-tokens, своих цветов не вводим.
   ═══════════════════════════════════════════════════════════════════════════ */

#screen-play .tp-play-hub { display: flex; flex-direction: column; min-height: 100%; }

/* Мобильный верх — обычный поток, поэтому промежутки задаём явно. */
.tp-play-hub__top { display: grid; gap: clamp(8px, 2.2vw, 14px); }
.tp-play-hub__start { display: grid; gap: clamp(8px, 2vw, 12px); }

.tp-play-hub__bar {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
    padding: clamp(8px, 2vw, 14px) clamp(10px, 3vw, 20px);
    border-bottom: 1px solid var(--tp-color-border);
}
.tp-play-hub__bar h1 {
    margin: 0;
    text-align: center;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 800; letter-spacing: -.02em;
    font-size: clamp(17px, 4.4vw, 22px);
    color: var(--tp-color-text);
}

.tp-play-hub__content {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2.2vw, 14px);
    padding: clamp(10px, 2.4vw, 18px) clamp(10px, 3vw, 20px)
             calc(76px + env(safe-area-inset-bottom, 0px));
}

/* Компактный hero: не вытесняет основное действие. */
.tp-play-hero {
    position: relative;
    display: grid;
    place-items: center;
    /* Пропорции файла play-board-photo.png (1198x515) — кадр не режется. */
    aspect-ratio: 1198 / 515;
    width: 100%;
    border: 1px solid var(--tp-color-border);
    border-radius: 18px;
    background: #0d0906;
    overflow: hidden;
}
.tp-play-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Мягкое затемнение снизу — фото не спорит с золотой кнопкой. */


/* Выбор времени */
.tp-play-time { border: 0; margin: 0; padding: 0; min-width: 0; }
.tp-play-time legend {
    display: flex; align-items: center; gap: 8px;
    padding: 0 0 10px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: clamp(14px, 3.6vw, 17px); font-weight: 700;
    color: var(--tp-color-text);
}
.tp-play-time legend i { color: var(--tp-color-primary, #d4a54e); }
.tp-play-time__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tp-play-time__option {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; min-width: 0; padding: 8px 4px;
    border: 1px solid var(--tp-color-border); border-radius: 14px;
    background: var(--tp-color-surface); color: var(--tp-color-text-muted);
    cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tp-play-time__option i { font-size: 12px; opacity: .75; }
.tp-play-time__option strong { font-family: 'DM Sans', system-ui, sans-serif; font-size: clamp(14px, 4vw, 17px); font-weight: 700; }
.tp-play-time__option.selected {
    border-color: var(--tp-color-primary, #d4a54e);
    color: var(--tp-color-text);
    background: var(--tp-color-surface-raised);
}
.tp-play-time__option:focus-visible,
.tp-play-cta:focus-visible,
.tp-play-mode:focus-visible,
.tp-play-more__summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--tp-color-primary, #d4a54e) 55%, transparent);
    outline-offset: 2px;
}

/* Главное действие */
.tp-play-cta {
    width: 100%; min-height: 50px; padding: 11px 18px;
    border: 0; border-radius: 16px;
    background: linear-gradient(180deg, #e0b662, #c2913f);
    color: var(--tp-color-primary-ink, #1a1007);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: clamp(15px, 4.2vw, 18px); font-weight: 800; letter-spacing: -.015em;
    cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.tp-play-cta:hover { filter: brightness(1.04); }

/* Список режимов */
.tp-play-modes { display: grid; grid-template-columns: 1fr; gap: 6px; }
.tp-play-mode {
    display: flex;
    align-items: center; justify-content: center; gap: 10px; width: 100%;
    min-height: 52px; padding: 10px 14px; text-align: center;
    border: 1px solid var(--tp-color-border); border-radius: 15px;
    background: var(--tp-color-surface); color: var(--tp-color-text);
    cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.tp-play-mode:hover:not(.is-disabled) { border-color: rgba(212, 165, 78, .45); background: var(--tp-color-surface-raised); }
.tp-play-mode > i:first-child { font-size: 18px; color: var(--tp-color-primary, #d4a54e); flex: 0 0 auto; }
.tp-play-mode span { display: grid; gap: 2px; min-width: 0; justify-items: center; }
.tp-play-mode strong {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: clamp(14px, 3.8vw, 16px); font-weight: 700; letter-spacing: -.01em;
}
.tp-play-mode small {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: clamp(11px, 2.9vw, 12.5px); line-height: 1.35; color: var(--tp-color-text-muted);
}
.tp-play-mode__go { font-size: 12px; color: var(--tp-color-text-subtle); }
.tp-play-mode.is-disabled { opacity: .55; cursor: not-allowed; }
.tp-play-badge {
    font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 999px;
    background: rgba(212, 165, 78, .16); color: var(--tp-color-primary, #d4a54e); white-space: nowrap;
}

/* Раскрываемое «Ещё» */
.tp-play-more { border: 1px solid var(--tp-color-border); border-radius: 15px; background: var(--tp-color-surface); }
.tp-play-more__summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 40px; padding: 0 14px; cursor: pointer; list-style: none;
    color: var(--tp-color-text); font-weight: 700;
}
.tp-play-more__summary::-webkit-details-marker { display: none; }
.tp-play-more[open] .tp-play-more__summary i { transform: rotate(180deg); }
.tp-play-more__summary i { transition: transform .18s ease; color: var(--tp-color-text-subtle); }
.tp-play-more__body { display: grid; gap: 6px; padding: 0 8px 8px; }
.tp-play-more__body .tp-play-mode { background: var(--tp-color-surface-raised); }


@media (min-width: 1024px) {
    .tp-play-hub__content {
        max-width: 1180px; width: 100%; margin: 0 auto;
        padding: clamp(18px, 2vw, 28px) clamp(18px, 3vw, 32px) 40px;
        gap: 22px;
    }
    /* Двухколоночный верх: слева атмосфера, справа действие. */
    /* Равные колонки: при пропорциях 1198x515 высота фото совпадает с карточкой старта. */
    .tp-play-hub__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
    .tp-play-hero { height: auto; aspect-ratio: 1198 / 515; min-height: 0; align-self: start; }
    .tp-play-hero img { object-fit: cover; }
    /* Управление — отдельная карточка справа. */
    .tp-play-hub__start {
        display: grid; gap: 18px; align-content: center;
        border: 1px solid var(--tp-color-border); border-radius: 18px;
        background: var(--tp-color-surface); padding: 22px;
    }
    .tp-play-time__option { min-height: 66px; }
    .tp-play-cta { min-height: 62px; }
    .tp-play-mode { min-height: 92px; }
    .tp-play-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tp-play-more { grid-column: 1 / -1; }
    .tp-play-more__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Мобильный список: только названия режимов, описания скрыты. */
@media (max-width: 1023px) {
    .tp-play-mode small { display: none; }
    .tp-play-mode span { gap: 0; }
    .tp-play-mode { min-height: 48px; }
}