/* ================================================================
   MATERIAL BOARD GAME
   Active presentation owner for #screen-game and match result UI.
   The real board reference is translated into matte light wood,
   carved otaus, long recessed kazans and semimatte black stones.
   ================================================================ */

#screen-game {
    --mb-wood-050: #f4e4c8;
    --mb-wood-100: #ead0a7;
    --mb-wood-200: #d9b47e;
    --mb-wood-300: #c99b61;
    --mb-wood-400: #a8733d;
    --mb-wood-line: rgba(100, 63, 29, 0.22);
    --mb-carve-shadow: rgba(75, 43, 19, 0.29);
    --mb-ink: #3a2a1d;
    --mb-ink-soft: #725943;
    --mb-stone-hi: #50514e;
    --mb-stone-mid: #222321;
    --mb-stone-low: #090a09;
    --mb-legal: #627354;
    --mb-selected: #345b45;
    --mb-last: #a66b2f;
    --mb-capture: #b56e34;
    --mb-shell: #17130f;
    --mb-panel: #211b15;
    --mb-panel-raised: #2b231b;
    --mb-panel-border: rgba(235, 214, 178, 0.13);
    --mb-text: #f5ead6;
    --mb-text-soft: #b9a78d;
    --board-gap: clamp(5px, 1%, 9px);
    --pit-gap: clamp(4px, 0.8vw, 10px);
    --pit-border: 1px;
    --stone-size: 21px;
    --stone-gap: 2px;
    --counter-size: clamp(18px, 1.9vw, 25px);
    --board-padding: clamp(12px, 2.1%, 22px);

    display: none !important;
    box-sizing: border-box;
}

#screen-game *,
#screen-game *::before,
#screen-game *::after,
#end-screen *,
#end-screen *::before,
#end-screen *::after {
    box-sizing: border-box;
}

#screen-game.active {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: grid !important;
    /* The board column was capped at 1050px, so on a wide monitor every extra
       pixel went into the two side gutters and the board looked small. The
       cap is raised so it uses the width that is actually available.
       This base rule only applies from 1100px up: the mobile grid overrides
       `grid-template-columns` entirely at max-width 1099.98px. */
    grid-template-columns: minmax(8px, 1fr) minmax(0, 1680px) minmax(300px, 340px) minmax(8px, 1fr) !important;
    grid-template-rows: 52px 58px 34px minmax(0, 1fr) 58px !important;
    gap: 0 10px !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 42%, rgba(119, 92, 61, 0.16), transparent 48%),
        var(--mb-shell) !important;
    color: var(--mb-text);
    transform: none !important;
}

.material-game-bar {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: max(6px, env(safe-area-inset-top, 0px)) 20px 6px;
    border-bottom: 1px solid var(--mb-panel-border);
    background: color-mix(in srgb, var(--mb-shell) 96%, black);
}

.material-game-bar__identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.material-game-logo {
    display: block;
    width: 132px;
    height: 38px;
    flex: 0 0 132px;
    object-fit: contain;
    border-radius: 6px;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42))
        drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.18));
}

.material-game-bar__identity > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.material-game-bar__identity strong {
    overflow: hidden;
    color: var(--mb-text);
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-game-bar__eyebrow,
.material-game-bar__caption,
.game-panel-eyebrow,
.match-result-kicker {
    color: var(--mb-text-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.material-game-bar__caption {
    display: none;
}

/* Keep the AI title centered against the whole viewport, independently of
   asymmetric Back and brand widths. */
body.ai-game .material-game-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}

body.ai-game .material-game-bar__back {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

body.ai-game .material-game-bar__identity {
    display: contents;
}

body.ai-game .material-game-bar__identity > div {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    max-width: min(52vw, 320px);
    text-align: center;
}

body.ai-game .material-game-logo {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.table-room-bar-actions { display: none; align-items: center; gap: 4px; }
.table-room-bar-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border: 1px solid var(--mb-panel-border);
    border-radius: 9px;
    background: var(--mb-panel-raised);
    color: var(--mb-text);
    cursor: pointer;
}
.table-room-bar-button--danger { color: #e7a298; }
.table-room-bar-button:focus-visible { outline: 3px solid rgba(247, 234, 209, .72); outline-offset: 2px; }

.game-compat[hidden] { display: none !important; }

.match-player {
    min-width: 0;
    height: 52px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    margin: 3px 0 !important;
    padding: 5px 8px !important;
    color: var(--mb-text) !important;
    background: var(--mb-panel) !important;
    border: 1px solid var(--mb-panel-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}

.match-player--opponent {
    grid-column: 2 / 4;
    grid-row: 2;
}

.match-player--self {
    grid-column: 2;
    grid-row: 5;
    width: auto !important;
    padding-bottom: 5px !important;
}

.match-avatar {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(222, 186, 130, 0.35) !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #765b3e, #3f3225) !important;
    color: #fff4df !important;
    font-size: 13px;
    font-weight: 900 !important;
}

.match-player-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.match-player-copy strong,
.match-player-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-player-copy strong { color: var(--mb-text); font-size: 13px; }
.match-player-copy small { color: var(--mb-text-soft); font-size: 10px; }

.match-side-label {
    color: var(--mb-text-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.match-clock {
    min-width: 80px !important;
    min-height: 38px;
    margin-left: 0 !important;
    padding: 9px 10px !important;
    border: 1px solid var(--mb-panel-border) !important;
    border-radius: 9px !important;
    background: var(--mb-panel-raised) !important;
    color: var(--mb-text) !important;
    font: 800 17px/1 var(--font-mono, 'JetBrains Mono', monospace) !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.match-player.is-active,
.match-player:has(.match-clock.is-active) {
    border-color: rgba(117, 137, 94, 0.62) !important;
}

.match-clock.is-active,
.match-player.is-active .match-clock {
    outline: 2px solid var(--mb-legal) !important;
    outline-offset: -2px !important;
}

body.untimed-game .match-clock {
    min-width: 94px !important;
    font-size: 11px !important;
    letter-spacing: 0.01em;
}

.match-state-strip {
    grid-column: 2 / 4;
    grid-row: 3;
    min-width: 0;
    height: 30px !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 3px 8px !important;
    overflow-x: auto !important;
    color: var(--mb-text-soft) !important;
    font-size: 10px !important;
    white-space: nowrap;
    scrollbar-width: none;
}

.match-state-strip::-webkit-scrollbar { display: none; }

/* The AI recovery sentences are longer than any other status message, and the
   strip is one fixed nowrap line with a hidden scrollbar — so on a 390px
   viewport the end of "your move is saved and will resume automatically"
   simply scrolls out of sight with nothing to indicate it. These states, and
   only these, are allowed to wrap and grow.

   The flag lives on the screen rather than the strip because the strip's
   height is set by the screen's own grid row: growing only the child would
   overflow the row and lay the message over the board. */
#screen-game[data-ai-longform="true"] .match-state-strip {
    height: auto !important;
    min-height: 30px !important;
    padding-block: 5px !important;
    white-space: normal;
    overflow-x: hidden !important;
    text-align: center;
    justify-content: center !important;
    line-height: 1.25;
}
.match-state-strip strong,
.match-state-strip b { color: var(--mb-text); }

.match-ai-thinking { display: none; }

body.ai-game .match-ai-thinking {
    width: 46px;
    min-width: 46px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    color: var(--mb-gold);
    opacity: 0;
    visibility: hidden;
    transition: opacity 140ms ease;
}

body.ai-game .match-state-strip[data-ai-status="opponent_turn"] .match-ai-thinking,
body.ai-game .match-state-strip[data-ai-status="move_found"] .match-ai-thinking {
    opacity: 1;
    visibility: visible;
}

.match-ai-thinking > i { width: 13px; flex: 0 0 13px; font-size: 11px; text-align: center; }
.match-ai-thinking__dots {
    width: 25px;
    min-width: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}
.match-ai-thinking__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: material-thinking-dot 720ms ease-in-out infinite alternate;
}
.match-ai-thinking__dots i:nth-child(2) { animation-delay: 110ms; }
.match-ai-thinking__dots i:nth-child(3) { animation-delay: 220ms; }

body.ai-game .match-state-strip[data-ai-status="move_found"] .match-ai-thinking {
    color: var(--mb-legal);
}
body.ai-game .match-state-strip[data-ai-status="move_found"] .match-ai-thinking__dots { opacity: 0; }

.match-state-strip #status-text[data-state="your_turn"] { color: #91a77a; }
.match-state-strip #status-text[data-state="disconnected"] { color: #d58a7d; }

.match-ai-retry {
    order: -1;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--mb-gold) 55%, transparent);
    border-radius: 10px;
    padding: 0 14px;
    background: color-mix(in srgb, var(--mb-gold) 14%, transparent);
    color: var(--mb-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.match-ai-retry:focus-visible {
    outline: 2px solid var(--mb-gold);
    outline-offset: 2px;
}

@keyframes material-thinking-dot {
    from { opacity: .32; transform: translateY(1px); }
    to { opacity: 1; transform: translateY(-1px); }
}

.match-state-divider {
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: var(--mb-wood-300);
}

#screen-game #tab-board {
    grid-column: 2;
    grid-row: 4;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

#screen-game .board-stage {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#screen-game .board-layout {
    position: relative !important;
    min-width: 0 !important;
    /* The 1050px term was the real cap on desktop: the column could grow but
       the board could not. It is raised so the remaining terms govern —
       available width, and the height the viewport actually allows.
       Mobile keeps its own width rules in the max-width blocks below. */
    width: min(100%, 1680px, calc((100dvh - 202px) * 1.7847)) !important;
    height: auto !important;
    max-height: 100% !important;
    display: block !important;
    aspect-ratio: 1053 / 590 !important;
}

#screen-game .board-device-clock,
#screen-game .board-match-clock { display: none !important; }

#screen-game .board-container {
    position: relative !important;
    isolation: isolate;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    /* Legacy style.css configured this element as a centered flex column.
       Those alignment properties remain meaningful after display:grid and
       collapsed the auto grid column to its max-content width in Chrome. */
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) clamp(62px, 11%, 72px) 6px clamp(62px, 11%, 72px) minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
    gap: var(--board-gap) !important;
    padding: var(--board-padding) !important;
    overflow: hidden !important;
    border: 1px solid rgba(98, 60, 27, 0.34) !important;
    border-radius: clamp(15px, 2vw, 24px) !important;
    background-color: var(--mb-wood-100) !important;
    background-image:
        repeating-linear-gradient(2deg, transparent 0 34px, rgba(104, 65, 29, 0.055) 35px, transparent 36px 73px),
        linear-gradient(91deg, rgba(255, 255, 255, 0.12), transparent 22%, rgba(115, 72, 33, 0.045) 55%, transparent 78%),
        linear-gradient(180deg, var(--mb-wood-050), var(--mb-wood-100) 48%, #e2c18f) !important;
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.29),
        inset 0 1px 0 rgba(255, 255, 255, 0.66),
        inset 0 0 0 5px rgba(143, 94, 45, 0.08) !important;
}

#screen-game .board-container::before {
    content: '' !important;
    position: absolute !important;
    inset: 7px !important;
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(124, 81, 38, 0.17) !important;
    border-radius: calc(clamp(15px, 2vw, 24px) - 6px) !important;
    background: none !important;
    opacity: 1 !important;
}

#screen-game .board-container::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 20;
    pointer-events: none;
    border-radius: inherit !important;
    background: linear-gradient(100deg, transparent 0 47%, rgba(91, 57, 26, 0.055) 49%, transparent 51%) !important;
    box-shadow: none !important;
}

.board-ornament {
    position: absolute;
    z-index: 2;
    top: 9px;
    width: 24px;
    height: 24px;
    pointer-events: none;
    opacity: 0.32;
    border-top: 2px solid var(--mb-wood-400);
}

.board-ornament::before,
.board-ornament::after {
    content: '';
    position: absolute;
    border: 2px solid var(--mb-wood-400);
    border-radius: 50%;
}

.board-ornament::before { width: 12px; height: 12px; top: 3px; }
.board-ornament::after { width: 7px; height: 7px; top: 13px; }
.board-ornament--left { left: 12px; border-left: 2px solid var(--mb-wood-400); }
.board-ornament--left::before { left: 3px; }
.board-ornament--left::after { left: 13px; }
.board-ornament--right { right: 12px; border-right: 2px solid var(--mb-wood-400); }
.board-ornament--right::before { right: 3px; }
.board-ornament--right::after { right: 13px; }

#screen-game .numbers-row,
#screen-game .pit-counts-row { display: none !important; }

#screen-game .row {
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: var(--pit-gap) !important;
    z-index: 3 !important;
}

#screen-game .row-top { grid-row: 1; }
#screen-game .kazan-top { grid-row: 2; }
#screen-game .board-join { grid-row: 3; }
#screen-game .kazan-bottom { grid-row: 4; }
#screen-game .row-bottom { grid-row: 5; }

#screen-game .pit {
    appearance: none !important;
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: var(--pit-border) solid rgba(118, 75, 35, 0.42) !important;
    border-radius: clamp(10px, 1.45vw, 20px) clamp(10px, 1.45vw, 20px) clamp(15px, 2.2vw, 30px) clamp(15px, 2.2vw, 30px) !important;
    background:
        linear-gradient(180deg, rgba(130, 82, 36, 0.2), transparent 22%),
        linear-gradient(175deg, #c8995f 0%, #dbb57f 45%, #e5c695 100%) !important;
    box-shadow:
        inset 0 6px 10px var(--mb-carve-shadow),
        inset 0 -2px 3px rgba(255, 245, 219, 0.72),
        0 1px 0 rgba(255, 255, 255, 0.5) !important;
    color: var(--mb-ink) !important;
    font: inherit !important;
    transform: none !important;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease !important;
}

#screen-game .pit::before {
    content: '' !important;
    position: absolute !important;
    inset: 4px !important;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(255, 244, 217, 0.25) !important;
    border-radius: inherit !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

#screen-game .pit::after { content: none !important; }

#screen-game .pit.player-pit:not(:disabled) {
    cursor: pointer !important;
}

#screen-game .pit.legal-move:not(:disabled) {
    border-color: rgba(80, 102, 69, 0.72) !important;
    box-shadow:
        inset 0 6px 10px var(--mb-carve-shadow),
        inset 0 -2px 3px rgba(255, 245, 219, 0.72),
        0 0 0 2px rgba(98, 115, 84, 0.22) !important;
}

@media (hover: hover) {
    #screen-game .pit.legal-move:not(:disabled):hover {
        border-color: var(--mb-legal) !important;
        box-shadow:
            inset 0 6px 10px rgba(66, 42, 20, 0.34),
            inset 0 -2px 3px rgba(255, 245, 219, 0.72),
            0 0 0 3px rgba(98, 115, 84, 0.25) !important;
    }
}

#screen-game .pit.selected-pit {
    border-color: var(--mb-selected) !important;
    box-shadow:
        inset 0 6px 10px rgba(59, 39, 20, 0.36),
        inset 0 -2px 3px rgba(255, 245, 219, 0.72),
        0 0 0 3px rgba(52, 91, 69, 0.42) !important;
}

#screen-game .pit.last-move-highlight {
    border-color: var(--mb-last) !important;
    box-shadow:
        inset 0 6px 10px var(--mb-carve-shadow),
        inset 0 -2px 3px rgba(255, 245, 219, 0.72),
        0 0 0 2px rgba(166, 107, 47, 0.34) !important;
}

#screen-game .pit.last-landing-highlight {
    border-color: rgba(166, 107, 47, 0.72) !important;
    box-shadow:
        inset 0 6px 10px var(--mb-carve-shadow),
        inset 0 -2px 3px rgba(255, 245, 219, 0.66),
        0 0 0 2px rgba(166, 107, 47, 0.24) !important;
}

#screen-game .pit.sow-source {
    border-color: var(--mb-selected) !important;
    filter: brightness(0.97);
}

#screen-game .pit.last-sow-source {
    border-color: rgba(183, 109, 55, 0.82) !important;
    box-shadow:
        inset 0 6px 10px var(--mb-carve-shadow),
        inset 0 0 0 1px rgba(255, 218, 166, 0.46),
        0 0 0 2px rgba(183, 109, 55, 0.34) !important;
}

/* Практический урок ведёт новичка к одному конкретному отау. Подсказка
 * использует outline, а не box-shadow: остальные состояния лунки объявляют
 * box-shadow через !important, и анимация его не переопределила бы. Цвет
 * отличается от зелёного «доступный ход» и оранжевого «последний ход», а для
 * скринридеров отау дополнительно подписан в aria-label — не только цветом. */
/* Второй селектор нужен из-за специфичности: подсвеченный отау урока всегда
 * ещё и .legal-move, а у того правила тоже !important и больше классов, поэтому
 * без него зелёная рамка «доступного хода» перекрывала бы цвет подсказки. */
#screen-game .pit.lesson-hint,
#screen-game .pit.lesson-hint.legal-move:not(:disabled) {
    border-color: #2f6f8f !important;
    outline: 3px solid rgba(47, 111, 143, 0.85);
    outline-offset: 2px;
    animation: mb-lesson-hint 1.8s ease-in-out infinite;
}

@keyframes mb-lesson-hint {
    0%, 100% { outline-color: rgba(47, 111, 143, 0.85); outline-offset: 2px; }
    50%      { outline-color: rgba(47, 111, 143, 0.32); outline-offset: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    #screen-game .pit.lesson-hint { animation: none; }
}

#screen-game .pit.pit-drop-flash {
    animation: pit-drop-calm 150ms ease-out;
}

@keyframes pit-drop-calm {
    50% { box-shadow: inset 0 0 0 2px rgba(241, 198, 110, 0.42); }
}

#screen-game .pit:focus-visible,
#screen-game .game-tool-button:focus-visible,
#screen-game .game-panel-close:focus-visible,
.match-result-action:focus-visible,
.match-dialog-actions button:focus-visible,
.game-menu-item:focus-visible {
    outline: 3px solid #f7ead1 !important;
    outline-offset: 2px !important;
}

#screen-game .pit:disabled {
    cursor: default !important;
    opacity: 0.94 !important;
}

.pit-number,
.pit-value {
    position: absolute;
    z-index: 8;
    top: clamp(5px, 0.75vw, 9px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--counter-size);
    height: var(--counter-size);
    border-radius: 999px;
    font-size: clamp(9px, 1vw, 12px);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.pit-number {
    left: clamp(5px, 0.7vw, 9px);
    color: rgba(58, 42, 29, 0.74);
    background: rgba(245, 224, 189, 0.48);
    border: 1px solid rgba(105, 67, 31, 0.15);
}

.pit-value {
    right: clamp(5px, 0.7vw, 9px);
    color: #f5e8ce;
    background: rgba(43, 34, 26, 0.88);
    border: 1px solid rgba(255, 240, 210, 0.16);
}

#screen-game .stones-stack {
    position: absolute !important;
    inset: clamp(24px, 25%, 34px) 5px 5px !important;
    z-index: 4 !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    padding: 0 !important;
    pointer-events: none;
}

#screen-game .stone {
    position: absolute !important;
    left: var(--x) !important;
    top: var(--y) !important;
    width: min(var(--stone-diameter, var(--stone-size)), var(--stone-size)) !important;
    height: min(var(--stone-diameter, var(--stone-size)), var(--stone-size)) !important;
    aspect-ratio: 1 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 34% 28%, var(--mb-stone-hi) 0 7%, var(--mb-stone-mid) 42%, var(--mb-stone-low) 100%) !important;
    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, 0.16),
        inset -2px -2px 3px rgba(0, 0, 0, 0.44),
        0 var(--stone-shadow-y, 2px) var(--stone-shadow-blur, 3px) rgba(61, 37, 17, 0.42) !important;
    transform: translate(-50%, -50%) scale(var(--stone-scale, 1)) !important;
}

/* ── Last landed kumalak ─────────────────────────────────────────────────────
 * The real `.stone` carries the state: no extra element, no dot, no size
 * change. A thin theme rim keeps it findable in a dense stack of black
 * kumalaks, and a soft halo separates it from its neighbours. `box-shadow`
 * does both, so the geometry the layout computed stays untouched — the ring
 * is drawn inside the existing circle, not around a bigger one.
 *
 * `!important` matches the base rule above, which is itself !important; the
 * shorter selector would otherwise never win.
 * ────────────────────────────────────────────────────────────────────────── */
#screen-game .stone.last-landed-stone {
    box-shadow:
        inset 0 0 0 1.5px var(--last-landed-ring, rgba(232, 188, 108, 0.92)),
        inset 1px 1px 1px rgba(255, 255, 255, 0.2),
        inset -2px -2px 3px rgba(0, 0, 0, 0.4),
        0 0 0 1px var(--last-landed-glow, rgba(212, 162, 76, 0.34)),
        0 0 7px 2px var(--last-landed-glow, rgba(212, 162, 76, 0.34)) !important;
    z-index: 6 !important;
}

/* The landing emphasis. One short pulse of the halo only — the rim is already
 * at its final value, so nothing moves and nothing resizes. */
@keyframes tp-last-landed-arrive {
    0%   { box-shadow:
             inset 0 0 0 1.5px var(--last-landed-ring, rgba(232, 188, 108, 0.92)),
             0 0 0 1px var(--last-landed-glow, rgba(212, 162, 76, 0.34)),
             0 0 3px 0 var(--last-landed-glow, rgba(212, 162, 76, 0.34)); }
    45%  { box-shadow:
             inset 0 0 0 1.5px var(--last-landed-ring, rgba(232, 188, 108, 0.92)),
             0 0 0 1px var(--last-landed-glow, rgba(212, 162, 76, 0.34)),
             0 0 12px 4px var(--last-landed-glow, rgba(212, 162, 76, 0.34)); }
    100% { box-shadow:
             inset 0 0 0 1.5px var(--last-landed-ring, rgba(232, 188, 108, 0.92)),
             0 0 0 1px var(--last-landed-glow, rgba(212, 162, 76, 0.34)),
             0 0 7px 2px var(--last-landed-glow, rgba(212, 162, 76, 0.34)); }
}

#screen-game .stone.last-landed-stone.is-arriving {
    animation: tp-last-landed-arrive 210ms cubic-bezier(.2, .8, .2, 1) 1;
}

/* Reduced motion keeps the persistent state and drops only the pulse: the
 * player still has to be able to see where the move ended. */
@media (prefers-reduced-motion: reduce) {
    #screen-game .stone.last-landed-stone.is-arriving { animation: none !important; }
}

/* Legacy play-platform.css used nth-child variants to alternate light stones.
   Material Board has one physical material for every ordinary kumalak. */
#screen-game .stone:nth-child(n),
#screen-game .kazan-stone:nth-child(n) {
    border: 0 !important;
    background: radial-gradient(circle at 34% 28%, var(--mb-stone-hi) 0 7%, var(--mb-stone-mid) 42%, var(--mb-stone-low) 100%) !important;
    filter: none !important;
}

.tuzdyk-marker {
    position: absolute;
    z-index: 7;
    left: 50%;
    top: 56%;
    display: grid;
    width: clamp(24px, 3vw, 38px);
    height: clamp(24px, 3vw, 38px);
    place-items: center;
    border: 1px solid rgba(111, 63, 35, 0.5);
    background: rgba(130, 71, 40, 0.16);
    color: #75452f;
    font-weight: 900;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transform: translate(-50%, -50%);
}

/* Тұздық: заметная янтарная рамка + внутренний highlight.
   Сами ою — отдельные узлы .tuzdyk-ornaments, а не фоновые слои:
   фон терялся при обычном просмотре доски. */
#screen-game .pit.tuzdyk {
    background:
        linear-gradient(180deg, rgba(117, 63, 37, 0.17), transparent 42%),
        linear-gradient(175deg, #c99961, #dfbd89) !important;
    border: 2px solid #a35f10 !important;
    box-shadow:
        0 0 0 3px rgba(217, 164, 65, 0.85),
        inset 0 0 14px rgba(255, 231, 176, 0.72) !important;
}

/* Overlay не участвует в layout, не ловит нажатия и не создаёт focusable-узлов. */
#screen-game .pit.tuzdyk .tuzdyk-ornaments {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
}

#screen-game .pit.tuzdyk .ornament {
    position: absolute;
    width: var(--oyu-size, clamp(10px, 2.9vw, 16px));
    height: var(--oyu-size, clamp(10px, 2.9vw, 16px));
    pointer-events: none;
    /* Қошқар мүйіз: геометрический четырёхлучевой мотив. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c.9 4.2 2.9 6.2 8 8-5.1 1.8-7.1 3.8-8 8-.9-4.2-2.9-6.2-8-8 5.1-1.8 7.1-3.8 8-8z' fill='%235a3208'/%3E%3C/svg%3E")
        center / contain no-repeat;
    filter: drop-shadow(0 1px 0 rgba(255, 236, 190, 0.9));
}

/* Углы: ою уходят по диагоналям, центр (Т) и верх (номер) свободны. */
#screen-game .pit.tuzdyk .ornament--tl { top: 5%; left: 5%; }
#screen-game .pit.tuzdyk .ornament--tr { top: 5%; right: 5%; }
#screen-game .pit.tuzdyk .ornament--bl { bottom: 5%; left: 5%; }
#screen-game .pit.tuzdyk .ornament--br { bottom: 5%; right: 5%; }

#screen-game .kazan-track {
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: center !important;
    gap: clamp(7px, 1vw, 13px) !important;
    margin: 0 !important;
    padding: clamp(3px, 0.4vw, 4px) clamp(8px, 1.15vw, 14px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(112, 69, 31, 0.42) !important;
    border-radius: clamp(9px, 1.3vw, 17px) !important;
    background:
        linear-gradient(180deg, rgba(103, 62, 27, 0.18), transparent 42%),
        linear-gradient(180deg, #c4955d, #ddb77e) !important;
    box-shadow:
        inset 0 5px 8px rgba(81, 48, 21, 0.26),
        inset 0 -2px 2px rgba(255, 244, 214, 0.6) !important;
    z-index: 3 !important;
}

#screen-game .kazan-top {
    box-shadow:
        inset 0 5px 8px rgba(70, 58, 47, 0.3),
        inset 0 -2px 2px rgba(255, 244, 214, 0.56) !important;
}

#screen-game .kazan-bottom {
    box-shadow:
        inset 0 5px 8px rgba(73, 67, 38, 0.27),
        inset 0 -2px 2px rgba(255, 244, 214, 0.62),
        inset 0 -1px 0 rgba(95, 106, 69, 0.2) !important;
}

#screen-game .kazan-track-inner {
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
}

#screen-game .kazan-stone {
    position: absolute !important;
    left: var(--x) !important;
    top: var(--y) !important;
    width: min(var(--stone-diameter, var(--stone-size)), var(--stone-size)) !important;
    height: min(var(--stone-diameter, var(--stone-size)), var(--stone-size)) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 34% 28%, var(--mb-stone-hi) 0 7%, var(--mb-stone-mid) 42%, var(--mb-stone-low) 100%) !important;
    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, 0.14),
        0 var(--stone-shadow-y, 1px) var(--stone-shadow-blur, 2px) rgba(43, 26, 12, 0.38) !important;
    transform: translate(-50%, -50%) !important;
}

#screen-game .kazan-score {
    position: static !important;
    min-width: clamp(30px, 3.5vw, 43px) !important;
    padding: 4px 6px !important;
    border: 0 !important;
    border-left: 1px solid rgba(79, 49, 24, 0.19) !important;
    border-radius: 3px !important;
    background: rgba(112, 72, 36, 0.08) !important;
    box-shadow: inset 1px 1px 1px rgba(255, 245, 219, 0.3) !important;
    color: rgba(58, 42, 29, 0.82) !important;
    font: 800 clamp(12px, 1.35vw, 17px)/1 var(--font-mono, 'JetBrains Mono', monospace) !important;
    text-align: right !important;
    text-shadow: 0 1px 0 rgba(255, 243, 216, 0.42) !important;
}

.board-join {
    position: relative;
    align-self: center;
    height: 6px;
    border-top: 1px solid rgba(105, 66, 31, 0.18);
    border-bottom: 1px solid rgba(255, 246, 222, 0.34);
}

.board-join span {
    position: absolute;
    top: 50%;
    width: 34px;
    height: 7px;
    border-radius: 2px;
    background: #846f57;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 2px rgba(67, 39, 16, 0.32);
    transform: translateY(-50%);
}

.board-join span:first-child { left: 24%; }
.board-join span:last-child { right: 24%; }

.game-side-panel {
    grid-column: 3;
    grid-row: 4 / 6;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.game-action-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

body.ai-game [data-action="game-chat"],
body.ai-game #btn-offer-draw {
    display: none !important;
}

.game-tool-button,
.game-panel-close {
    appearance: none;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--mb-panel-border);
    background: var(--mb-panel-raised);
    color: var(--mb-text);
    cursor: pointer;
}

.game-tool-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
}

.game-tool-button i { width: 16px; color: var(--mb-text-soft); text-align: center; }
.game-tool-button--danger { color: #d9998e; }
.game-tool-button--danger i { color: #d9998e; }
.game-tool-button:disabled { cursor: not-allowed; opacity: 0.45; }

.game-live-analysis {
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--mb-panel-border);
    border-radius: 12px;
    background: var(--mb-panel);
    color: var(--mb-text);
}

.game-live-analysis[hidden] { display: none !important; }
.game-live-analysis header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.game-live-analysis header span,
.game-live-analysis small {
    color: var(--mb-text-soft);
    font-size: 9px;
}
.game-live-analysis header strong { font-size: 11px; }
.game-live-analysis p { margin: 0; color: var(--mb-text-soft); font-size: 10px; line-height: 1.35; }
.game-live-analysis > strong { font-size: 10px; line-height: 1.35; }

.live-evaluation-numbers {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--mb-text-soft);
    font-size: 9px;
}

.live-evaluation-numbers strong {
    color: var(--mb-text);
    font: 800 11px/1 var(--font-mono, monospace);
}

.live-evaluation-meter {
    position: relative;
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(229, 198, 150, 0.16);
    border-radius: 999px;
    background: #22201e;
}

.live-evaluation-meter > span {
    display: block;
    width: var(--white-share, 50%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d9c9aa, #f0e2c7);
    transition: width 220ms ease-out;
}

.live-evaluation-meter[data-leader="black"] {
    box-shadow: inset -2px 0 0 rgba(241, 198, 110, 0.28);
}

.live-evaluation-meter[data-leader="white"] {
    box-shadow: inset 2px 0 0 rgba(241, 198, 110, 0.28);
}

@media (hover: hover) {
    .game-tool-button:not(:disabled):hover,
    .game-panel-close:hover {
        border-color: rgba(216, 181, 126, 0.34);
        background: color-mix(in srgb, var(--mb-panel-raised) 86%, #9b7447);
    }
}

/* Online table room: the board remains authoritative; this rail owns context. */
body:not(.online-game):not(.table-waiting-game) #table-room-shell { display: none !important; }
body.online-game #table-room-shell,
body.table-waiting-game #table-room-shell { display: contents !important; }
body.online-game .game-action-strip [data-action="game-history"],
body.online-game .game-action-strip [data-action="game-chat"],
body.table-waiting-game #game-live-actions { display: none !important; }
body.online-game .game-action-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body:is(.online-game, .table-waiting-game) .game-side-panel {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--mb-panel-border);
    border-radius: 12px;
    background: var(--mb-panel);
    padding: 0;
}
body:is(.online-game, .table-waiting-game) .table-room-header { order: 1; }
body:is(.online-game, .table-waiting-game) #game-live-actions { order: 2; padding: 5px; border-bottom: 1px solid var(--mb-panel-border); }
body:is(.online-game, .table-waiting-game) .table-room-tabs { order: 3; }
body:is(.online-game, .table-waiting-game) [data-table-room-panel-content] { order: 4; }

.table-room-shell {
    min-width: 0;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mb-panel-border);
    border-radius: 12px;
    background: var(--mb-panel);
    color: var(--mb-text);
}
.table-room-shell[data-active-panel="protocol"] { flex: 0 0 auto; }
.table-room-header {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--mb-panel-border);
}
.table-room-header > div { min-width: 0; }
.table-room-header strong,
.table-room-header small,
.table-room-status { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-room-header strong { margin-top: 2px; font-size: 12px; }
.table-room-header small { margin-top: 3px; color: var(--mb-text-soft); font-size: 9px; }
.table-room-status { color: #dfbd83; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.table-room-leave { display: grid; flex: 0 0 44px; }

.table-room-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 5px;
    border-bottom: 1px solid var(--mb-panel-border);
    background: rgba(255, 255, 255, .018);
}
.table-room-tabs button {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 44px;
    place-items: center;
    gap: 3px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--mb-text-soft);
    padding: 4px 2px;
    cursor: pointer;
    font: 750 8px/1.1 var(--font-sans, sans-serif);
}
.table-room-tabs button i { font-size: 12px; }
.table-room-tabs button.is-active { border-color: rgba(223, 189, 131, .28); background: rgba(223, 189, 131, .1); color: #f2dfbd; }
.table-room-tabs button:focus-visible,
.table-room-settings__form :is(input, select, button):focus-visible,
.table-room-chat__composer :is(textarea, button):focus-visible,
.table-room-invite button:focus-visible { outline: 3px solid rgba(247, 234, 209, .72); outline-offset: 2px; }
.table-room-unread { position: absolute; top: 2px; right: 4px; min-width: 16px; min-height: 16px; border-radius: 99px; background: #bc704d; color: white; padding: 2px 4px; font-size: 8px; }

.game-room-panel {
    min-width: 0;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--mb-text);
}
.table-room-chat__messages { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding: 8px; }
.table-room-chat__composer .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}
.table-room-message { max-width: 88%; align-self: flex-start; border: 1px solid var(--mb-panel-border); border-radius: 10px 10px 10px 3px; background: var(--mb-panel-raised); padding: 7px 8px; }
.table-room-message.is-mine { align-self: flex-end; border-radius: 10px 10px 3px 10px; background: rgba(196, 154, 97, .14); }
.table-room-message p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 10px; line-height: 1.4; }
.table-room-message time { display: block; margin-top: 3px; color: var(--mb-text-soft); font-size: 8px; text-align: right; }
.table-room-chat__composer { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 5px; padding: 7px; border-top: 1px solid var(--mb-panel-border); }
.table-room-chat__composer textarea { min-width: 0; min-height: 44px; max-height: 96px; resize: vertical; border: 1px solid var(--mb-panel-border); border-radius: 9px; background: var(--mb-panel-raised); color: var(--mb-text); padding: 9px; font: 10px/1.35 var(--font-sans, sans-serif); }
.table-room-chat__composer button,
.table-room-invite button,
.table-room-settings__form > button { min-height: 44px; border: 1px solid rgba(223, 189, 131, .34); border-radius: 9px; background: rgba(196, 154, 97, .18); color: #f2dfbd; cursor: pointer; font-weight: 800; }
.table-room-chat__composer button:disabled { cursor: not-allowed; opacity: .42; }

.table-room-player-list { display: grid; gap: 6px; padding: 8px; }
.table-room-player { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; min-height: 52px; gap: 8px; align-items: center; border: 1px solid var(--mb-panel-border); border-radius: 10px; background: var(--mb-panel-raised); padding: 6px 8px; }
.table-room-player .match-avatar { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
.table-room-player strong,
.table-room-player small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-room-player strong { font-size: 10px; }
.table-room-player small { margin-top: 2px; color: var(--mb-text-soft); font-size: 8px; }
.table-room-owner-badge { border-radius: 99px; background: rgba(196, 154, 97, .13); color: #dfbd83; padding: 4px 6px; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.table-room-invite { margin: 0 8px 8px; border: 1px solid rgba(196, 154, 97, .25); border-radius: 10px; background: rgba(196, 154, 97, .07); padding: 9px; }
.table-room-invite > strong { font-size: 10px; }
.table-room-invite > p,
.table-room-capability-note { margin: 4px 0 8px; color: var(--mb-text-soft); font-size: 8px; line-height: 1.4; }
.table-room-invite .tp-play-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.table-room-invite input { min-width: 0; min-height: 44px; border: 1px solid var(--mb-panel-border); border-radius: 8px; background: var(--mb-panel-raised); color: var(--mb-text); padding: 7px; font-size: 9px; }
.table-room-invite button { padding-inline: 10px; }
.table-room-capability-note { margin: auto 8px 8px; border-top: 1px solid var(--mb-panel-border); padding-top: 7px; }

.table-room-settings__form { min-height: 0; flex: 1; overflow-y: auto; padding: 8px; }
.table-room-settings__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.table-room-settings__form label { color: var(--mb-text-soft); font-size: 8px; font-weight: 750; }
.table-room-settings__form label > span { display: block; margin-bottom: 3px; }
.table-room-settings__form :is(input[type="number"], select) { width: 100%; min-height: 44px; border: 1px solid var(--mb-panel-border); border-radius: 8px; background: var(--mb-panel-raised); color: var(--mb-text); padding: 6px 7px; font: 10px/1 var(--font-sans, sans-serif); }
.table-room-setting-toggle { display: flex; min-height: 44px; align-items: center; gap: 7px; margin-top: 5px; border: 1px solid var(--mb-panel-border); border-radius: 8px; padding: 5px 7px; }
.table-room-setting-toggle > span { margin: 0 !important; color: var(--mb-text); }
.table-room-setting-toggle input { width: 18px; height: 18px; accent-color: #c49a61; }
.table-room-setting-toggle small { display: block; margin-top: 2px; color: var(--mb-text-soft); font-size: 7px; }
.table-room-setting-toggle.is-unsupported { opacity: .62; }
.table-room-settings__form > p { margin: 8px 1px; color: var(--mb-text-soft); font-size: 8px; line-height: 1.45; }
.table-room-settings__form > button { width: 100%; }
#table-room-settings-status { margin-top: 7px; color: var(--mb-text-soft); font-size: 9px; }
#table-room-settings-status[data-state="error"] { color: #e7a298; }
#table-room-settings-status[data-state="success"] { color: #9fd3aa; }

@media (max-width: 600px) {
    .table-room-tabs button { padding-inline: 1px; }
    .table-room-settings__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 350px) {
    .table-room-tabs button i { font-size: 11px; }
    .table-room-tabs button span { font-size: 6.5px; }
    .table-room-settings__grid { grid-template-columns: 1fr; }
}

.game-history-panel {
    min-width: 0;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mb-panel-border);
    border-radius: 12px;
    background: var(--mb-panel);
}

.game-history-panel[hidden],
#screen-game [hidden] {
    display: none !important;
}

.game-sheet-handle,
.game-history-backdrop { display: none; }

.game-panel-header {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--mb-panel-border);
}

.game-panel-header > div { display: flex; flex-direction: column; gap: 2px; }
.game-panel-header strong { color: var(--mb-text); font-size: 12px; }

.game-panel-close {
    display: none;
    place-items: center;
    padding: 0;
    border-radius: 9px;
}

#table-room-leave {
    display: grid;
}

#screen-game .history-box {
    min-height: 0 !important;
    flex: 1;
    padding: 8px !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.game-history-empty {
    margin: 24px 8px;
    color: var(--mb-text-soft);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

#screen-game .hist-turn {
    display: grid !important;
    grid-template-columns: 30px 1fr 1fr !important;
    gap: 4px !important;
    min-height: 32px;
    align-items: center;
    padding: 4px 6px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mb-panel-border) !important;
    background: rgba(255, 255, 255, 0.025) !important;
    color: var(--mb-text) !important;
    font: 600 11px/1.2 var(--font-mono, 'JetBrains Mono', monospace) !important;
}

#screen-game .hist-header {
    position: sticky;
    z-index: 2;
    top: -8px;
    display: grid;
    grid-template-columns: 30px 1fr 1fr;
    gap: 4px;
    padding: 8px 6px 6px;
    border-bottom: 1px solid rgba(235, 214, 178, 0.2);
    background: color-mix(in srgb, var(--mb-panel) 96%, black);
    color: var(--mb-text-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#screen-game .hist-num { color: var(--mb-text-soft) !important; }
#screen-game .hist-w,
#screen-game .hist-b {
    min-width: 0;
    padding: 5px 7px;
    overflow: hidden;
    border: 1px solid rgba(235, 214, 178, 0.09);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025) !important;
    color: var(--mb-text) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#screen-game .hist-header .hist-w,
#screen-game .hist-header .hist-b {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--mb-text-soft) !important;
}

#screen-game .hist-turn.is-latest {
    border-left: 2px solid #c49a61 !important;
    background: rgba(196, 154, 97, 0.10) !important;
}

.game-history-legend {
    margin: 10px 6px 4px;
    color: var(--mb-text-soft);
    font-size: 9px;
    line-height: 1.45;
}

.game-eval-panel {
    display: none;
    position: fixed;
    z-index: 10022;
    inset: 50% auto auto 50%;
    width: min(420px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid var(--mb-panel-border);
    border-radius: 14px;
    background: var(--mb-panel);
    color: var(--mb-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%);
}

#screen-game.eval-open .game-eval-panel { display: block; }
.game-eval-panel .game-panel-close { display: grid; }
.game-eval-panel .eval-box {
    display: grid;
    gap: 14px;
    padding: 28px;
    background: var(--mb-panel) !important;
    color: var(--mb-text);
    text-align: center;
}
.game-eval-panel .eval-title { color: var(--mb-text-soft); font-size: 10px; text-transform: uppercase; }
.game-eval-panel p { margin: 0; color: var(--mb-text-soft); font-size: 12px; line-height: 1.5; }
.live-evaluation-numbers--large { font-size: 12px; }
.live-evaluation-numbers--large strong { display: block; margin-top: 4px; font-size: 28px; }
.live-evaluation-meter--large { height: 14px; }
.eval-best-move { font-size: 14px; }
.eval-thinking-pace { color: var(--mb-text-soft); font-size: 10px; }
.eval-refresh-button {
    min-height: 44px;
    border: 1px solid var(--mb-panel-border);
    border-radius: 10px;
    background: var(--mb-panel-raised);
    color: var(--mb-text);
    font-weight: 800;
    cursor: pointer;
}

#tab-eval[data-analysis-state="loading"] .live-evaluation-meter > span,
#game-live-analysis[data-analysis-state="loading"] .live-evaluation-meter > span {
    animation: evaluation-loading 900ms ease-in-out infinite alternate;
}

@keyframes evaluation-loading {
    from { opacity: 0.4; }
    to { opacity: 0.9; }
}


#screen-game .pit.pit-drop-flash {
    animation: material-pit-drop 220ms ease-out !important;
}

#screen-game .pit.capture-flash {
    animation: material-capture 360ms ease-out !important;
}

@keyframes material-pit-drop {
    0% { border-color: rgba(52, 91, 69, 0.8); }
    100% { border-color: rgba(118, 75, 35, 0.42); }
}

@keyframes material-capture {
    0% { box-shadow: inset 0 9px 13px var(--mb-carve-shadow), 0 0 0 3px rgba(181, 110, 52, 0.62); }
    100% { box-shadow: inset 0 9px 13px var(--mb-carve-shadow), 0 0 0 0 rgba(181, 110, 52, 0); }
}

/* Game menu: static material controls, no glass or bounce. */
#game-menu-overlay {
    z-index: 10040 !important;
    background: rgba(18, 14, 10, 0.72) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#game-menu-overlay .game-menu-sheet {
    width: min(420px, calc(100vw - 24px)) !important;
    padding: 20px 20px max(20px, env(safe-area-inset-bottom, 0px)) !important;
    border: 1px solid rgba(226, 198, 155, 0.16) !important;
    border-radius: 18px !important;
    background: #211b15 !important;
    color: #f5ead6 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.46) !important;
    animation: material-sheet-in 180ms ease-out !important;
}

#game-menu-overlay .modal-title,
#game-menu-overlay .modal-close-btn {
    color: #f5ead6 !important;
}

.game-menu-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.game-menu-item {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(226, 198, 155, 0.13);
    border-radius: 11px;
    background: #2b231b;
    color: #f5ead6;
    text-align: left;
    cursor: pointer;
}
.game-menu-item > i { width: 22px; color: #c49a61; text-align: center; }
.game-menu-item:disabled { opacity: 0.48; cursor: not-allowed; }
.game-menu-item__title { font-size: 13px; font-weight: 800; }
.game-menu-item__description { margin-top: 2px; color: #b9a78d; font-size: 10px; line-height: 1.35; }
.game-rules-sheet { max-width: 560px; }
.game-rules-summary { margin: 0; padding: 0 0 0 22px; color: #d8c9b3; font-size: 13px; line-height: 1.55; }
.game-rules-summary li + li { margin-top: 8px; }
.game-rules-sheet .tp-button { width: 100%; margin-top: 18px; text-decoration: none; }

@keyframes material-sheet-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Result dialog */
#end-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    background: rgba(17, 13, 9, 0.8) !important;
    color: #f5ead6;
    text-align: center;
    backdrop-filter: none !important;
}

.match-result-card {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 26px 24px;
    overflow-y: auto;
    border: 1px solid rgba(229, 198, 150, 0.2);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(228, 194, 143, 0.1), transparent 82px),
        #211a14;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
}

.match-result-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 7px;
    background: linear-gradient(90deg, #bb874e, #e5c28d 48%, #a66e36);
}

.match-result-card.is-arriving {
    animation: material-result-arrive 560ms ease-out;
}

@keyframes material-result-arrive {
    0% { box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(196, 154, 97, 0.42); }
    100% { box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 0 18px rgba(196, 154, 97, 0); }
}

.match-result-ornament {
    width: 52px;
    height: 14px;
    border-top: 1px solid #b58a55;
    opacity: 0.64;
}

.match-result-ornament::before,
.match-result-ornament::after {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: -6px 5px 0;
    border: 1px solid #b58a55;
    transform: rotate(45deg);
}

#end-screen h1 {
    width: auto !important;
    margin: 0 !important;
    color: #f2e5cf;
    font: 800 clamp(26px, 5vw, 42px)/1.1 var(--font-display, 'Unbounded', sans-serif) !important;
    letter-spacing: -0.03em;
}

#end-screen[data-outcome="win"] h1 { color: #9eb488; }
#end-screen[data-outcome="draw"] h1 { color: #d2b27d; }
#end-screen[data-outcome="loss"] h1 { color: #d39489; }
.end-subtitle { color: #b9a78d; font-size: 12px; line-height: 1.4; }

.match-result-score {
    color: #f5ead6 !important;
    font: 900 clamp(34px, 7vw, 56px)/1 var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-variant-numeric: tabular-nums;
}

.match-result-players { color: #cdbb9f !important; font-size: 13px; font-weight: 700 !important; }

.match-result-details {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    margin: 5px 0 !important;
    overflow: hidden;
    border: 1px solid rgba(229, 198, 150, 0.14) !important;
    border-radius: 12px !important;
    background: rgba(229, 198, 150, 0.14) !important;
}

.match-result-details > div { padding: 10px !important; background: #292119 !important; }
.match-result-details dt { color: #a9977e !important; font-size: 9px !important; text-transform: uppercase; letter-spacing: 0.08em; }
.match-result-details dd { margin: 4px 0 0 !important; color: #f2e5cf !important; font-size: 12px; font-weight: 800 !important; }
.match-analysis-note { margin: 0; color: #9f8e75 !important; font-size: 10px !important; line-height: 1.4; }

.match-result-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.match-result-action,
.match-dialog-actions button {
    min-width: 44px !important;
    min-height: 46px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px !important;
    border: 1px solid rgba(229, 198, 150, 0.16) !important;
    border-radius: 10px !important;
    background: #30271e !important;
    color: #f2e5cf !important;
    font-size: 11px;
    font-weight: 800 !important;
    cursor: pointer;
}

.match-result-action--primary,
#btn-end-rematch {
    border-color: transparent !important;
    background: #c49a61 !important;
    color: #25190f !important;
}

.match-result-action:disabled { cursor: not-allowed; opacity: 0.42; }
#btn-end-next { display: none; }

.confirm-dialog-overlay {
    z-index: 10070 !important;
    padding: 16px;
    background: rgba(8, 7, 6, 0.76) !important;
}
.confirm-dialog-overlay[hidden] { display: none !important; }
.confirm-dialog-overlay.open { display: flex !important; align-items: center; justify-content: center; }
.confirm-dialog-sheet {
    width: min(430px, calc(100vw - 24px)) !important;
    padding: 24px !important;
    border: 1px solid rgba(235, 214, 178, 0.18) !important;
    border-radius: 16px !important;
    background: #27211b !important;
    color: #f5ead6 !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.46) !important;
    text-align: left;
}
.confirm-dialog-icon {
    width: 42px; height: 42px; display: grid; place-items: center;
    margin-bottom: 16px; border-radius: 12px;
    background: rgba(182, 79, 68, 0.14); color: #e5a197;
}
.confirm-dialog-sheet h2 { margin: 0 0 8px; font-size: 22px; }
.confirm-dialog-sheet > p { margin: 0; color: #c8b9a3; font-size: 14px; line-height: 1.55; }
.confirm-dialog-error { margin-top: 14px !important; color: #f1a69c !important; }
.confirm-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.confirm-dialog-actions button {
    min-height: 46px; border: 1px solid rgba(235, 214, 178, 0.16); border-radius: 10px;
    background: #342c24; color: #f5ead6; font-weight: 800; cursor: pointer;
}
.confirm-dialog-actions button.is-destructive { border-color: rgba(218, 106, 94, 0.5); background: #7b302a; color: white; }
.confirm-dialog-actions button:disabled { cursor: wait; opacity: 0.65; }
.confirm-dialog-actions button:focus-visible { outline: 3px solid #f7ead1; outline-offset: 2px; }

.ai-bubble { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1099.98px) {
    #screen-game.active {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 48px 52px 30px minmax(0, 1fr) 52px calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 0 !important;
    }

    .material-game-bar,
    .match-player--opponent,
    .match-state-strip,
    #screen-game #tab-board,
    .match-player--self,
    .game-quick-actions,
    .game-side-panel {
        grid-column: 1;
        width: calc(100vw - 8px) !important;
        margin-inline: auto !important;
    }

    .material-game-bar { grid-row: 1; width: 100% !important; }
    .match-player--opponent { grid-row: 2; }
    .match-state-strip { grid-row: 3; }
    #screen-game #tab-board { grid-row: 4; padding: 3px 0 !important; }
    .match-player--self { grid-row: 5; }

    .game-side-panel {
        grid-row: 6;
        display: block;
        padding: 5px 0 max(5px, env(safe-area-inset-bottom, 0px));
        background: var(--mb-shell);
    }

    .game-action-strip {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 4px;
    }

    /* Живая доска показывает ровно шесть действий, поэтому на телефоне они
       встают сеткой 2×3 вместо одного тесного ряда. Правило ограничено
       body.live-board-active и не затрагивает страницу игры против ИИ. */
    body.live-board-active .game-action-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-live-analysis { display: none !important; }

    .game-tool-button {
        min-width: 44px;
        min-height: 48px;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 4px 2px;
        font-size: 9px;
    }

    .game-tool-button i { width: auto; font-size: 13px; }

    .game-history-panel {
        position: fixed;
        z-index: 10020;
        inset: auto 0 0;
        width: 100%;
        max-height: min(70dvh, 620px);
        min-height: 320px;
        border-width: 1px 0 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -100vh 0 rgba(14, 11, 8, 0.58), 0 -18px 46px rgba(0, 0, 0, 0.38);
        transform: translateY(calc(100% + 24px));
        visibility: hidden;
        transition: transform 180ms ease-out, visibility 0s linear 180ms;
    }

    #screen-game.history-open #tab-history {
        transform: translateY(0);
        visibility: visible;
        transition: transform 180ms ease-out;
    }

    .game-history-backdrop {
        position: fixed;
        z-index: 10019;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        border: 0;
        background: rgba(14, 11, 8, 0.58);
    }
    #screen-game.history-open .game-history-backdrop:not([hidden]) { display: block; }
    .game-sheet-handle {
        display: block;
        width: 44px;
        height: 5px;
        flex: 0 0 5px;
        margin: 9px auto 2px;
        border-radius: 999px;
        background: rgba(245, 234, 214, 0.34);
        touch-action: none;
        cursor: grab;
    }

    .game-panel-close { display: grid; }
    #screen-game .history-box { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important; }

    #screen-game .board-layout {
        width: min(calc(100vw - 8px), calc((100dvh - 246px) * 1.62)) !important;
        aspect-ratio: 1.62 !important;
    }
}

@media (max-width: 600px) {
    #screen-game {
        --board-gap: 2px;
        --pit-gap: 2px;
        --pit-border: 1px;
        --stone-size: 13px;
        --stone-gap: 1px;
        --counter-size: 16px;
        --board-padding: 6px;
    }
    #screen-game.active {
        grid-template-rows: 42px 46px 24px auto 46px calc(49px + env(safe-area-inset-bottom, 0px)) minmax(0, 1fr) !important;
        align-content: start !important;
    }

    .material-game-bar,
    .match-player--opponent,
    .match-state-strip,
    #screen-game #tab-board,
    .match-player--self,
    .game-quick-actions,
    .game-side-panel { width: calc(100vw - 4px) !important; }

    .material-game-bar { padding-inline: 10px; }
    .material-game-bar__caption { display: none; }
    .material-game-logo { width: 108px; height: 32px; flex-basis: 108px; }

    .match-player {
        height: 42px !important;
        margin-block: 1px !important;
        padding: 3px 5px !important;
        border-radius: 9px !important;
    }

    .match-avatar { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
    .match-player-copy strong { font-size: 12px; }
    .match-player-copy small { font-size: 9px; }
    .match-side-label { display: none; }
    .match-clock { min-width: 68px !important; min-height: 34px; padding: 7px 8px !important; font-size: 15px !important; }
    body.untimed-game .match-clock { min-width: 78px !important; padding-inline: 6px !important; font-size: 9px !important; }

    .match-state-strip {
        height: 24px !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding-inline: 5px !important;
        font-size: 9px !important;
    }

    /* Give the compact HUD a little breathing room before the physical board.
       The extra five pixels are layout space, so the self strip and actions
       move with the board instead of being overpainted by a transform. */
    #screen-game #tab-board {
        height: auto !important;
        padding: 8px 0 3px !important;
    }

    /* The recovery sentences need two or three lines at this width, so the
       row that holds them has to stop being a fixed 24px. The board keeps its
       square aspect ratio and simply gets a little less height. */
    #screen-game.active[data-ai-longform="true"] {
        grid-template-rows: 42px 46px auto auto 46px calc(49px + env(safe-area-inset-bottom, 0px)) minmax(0, 1fr) !important;
    }

    #screen-game[data-ai-longform="true"] .match-state-strip {
        height: auto !important;
        min-height: 24px !important;
    }

    #screen-game .board-layout {
        width: calc(100vw - 4px) !important;
        aspect-ratio: 1 / 1 !important;
    }

    #screen-game .board-container {
        grid-template-rows: minmax(0, 1fr) 36px 3px 36px minmax(0, 1fr) !important;
        gap: var(--board-gap) !important;
        padding: var(--board-padding) !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
    }

    #screen-game .board-container::before { content: none !important; }
    .board-ornament { display: none; }
    #screen-game .row { gap: var(--pit-gap) !important; }

    #screen-game .pit {
        border-radius: 7px 7px 11px 11px !important;
        box-shadow: inset 0 3px 5px rgba(75, 43, 19, 0.22) !important;
    }

    #screen-game .pit::before { content: none !important; }
    /* Номер отау и счётчик масштабируются от ширины экрана: фиксированные
       8px/16px делали доску нечитаемой на телефоне. */
    .pit-number,
    .pit-value {
        top: 3px;
        min-width: var(--pit-badge, clamp(16px, 4.6vw, 22px));
        height: var(--pit-badge, clamp(16px, 4.6vw, 22px));
        font-size: clamp(10px, 2.9vw, 13px);
    }
    .pit-number { left: 3px; }
    .pit-value { right: 3px; }

    /* Камни начинаются под бейджами, поэтому отступ следует за их размером. */
    #screen-game .stones-stack {
        inset: calc(var(--pit-badge, clamp(16px, 4.6vw, 22px)) + 3px) 2px 2px !important;
    }
    #screen-game .kazan-track {
        grid-template-columns: minmax(0, 1fr) max-content !important;
        gap: 4px !important;
        padding: 3px 5px !important;
        border-radius: 7px !important;
        box-shadow: inset 0 3px 5px rgba(81, 48, 21, 0.20) !important;
    }
    #screen-game .kazan-score { min-width: 23px !important; padding: 3px 4px !important; font-size: 10px !important; }
    .board-join { height: 3px; }
    .board-join span { width: 20px; height: 4px; }

    .game-side-panel { padding: 2px 0 max(2px, env(safe-area-inset-bottom, 0px)); }
    .game-action-strip { gap: 3px; }
    /* 8px подпись не читалась; tap-цель 44px сохраняется. */
    .game-tool-button { min-height: 44px; padding-block: 2px; font-size: clamp(9px, 2.4vw, 11px); }

    .match-result-card { gap: 8px; padding: 24px 14px 16px; border-radius: 16px; }
    .match-result-details > div { padding: 8px 5px !important; }
    .match-result-actions { grid-template-columns: 1fr 1fr !important; }
    .match-result-action { min-height: 44px !important; padding: 8px 6px !important; font-size: 10px; }

    #game-menu-overlay .game-menu-sheet {
        width: 100% !important;
        margin-top: auto;
        border-width: 1px 0 0 !important;
        border-radius: 18px 18px 0 0 !important;
    }
}

/* Online table room: one shared right drawer below 1100px. The generic
   history sheet above remains the owner for AI/local/historical games. */
@media (max-width: 1099.98px) {
    body:is(.online-game, .table-waiting-game) #screen-game.active {
        grid-template-rows: 48px 52px 30px minmax(0, 1fr) 52px !important;
    }
    body:is(.online-game, .table-waiting-game) .table-room-bar-actions { display: flex; }
    body:is(.online-game, .table-waiting-game) #game-service-panel {
        position: fixed;
        z-index: 10020;
        grid-column: auto !important;
        grid-row: auto !important;
        inset: 48px 0 0 auto;
        width: min(46vw, 380px) !important;
        height: calc(100dvh - 48px);
        max-width: 380px;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-width: 1px 0 0 1px;
        border-radius: 14px 0 0;
        background: var(--mb-panel);
        box-shadow: -18px 0 46px rgba(0, 0, 0, .4);
        padding: 0;
        transform: translateX(calc(100% + 16px));
        visibility: hidden;
        pointer-events: none;
        transition: transform 180ms ease-out, visibility 0s linear 180ms;
    }
    body:is(.online-game, .table-waiting-game) #screen-game.table-room-panel-open #game-service-panel {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform 180ms ease-out;
    }
    body:is(.online-game, .table-waiting-game) #screen-game [data-table-room-panel-content]:not([hidden]) {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;
        flex: 1 1 auto;
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none !important;
        visibility: visible !important;
        transition: none;
    }
    body:is(.online-game, .table-waiting-game) #screen-game [data-table-room-panel-content] .game-sheet-handle { display: none; }
    body:is(.online-game, .table-waiting-game) #screen-game.table-room-panel-open .game-history-backdrop:not([hidden]) {
        position: fixed;
        z-index: 10019;
        grid-column: auto !important;
        grid-row: auto !important;
        inset: 48px min(46vw, 380px) 0 0;
        display: block;
        width: auto;
        height: auto;
        margin: 0 !important;
        border: 0;
        background: rgba(14, 11, 8, .28);
    }
    body:is(.online-game, .table-waiting-game) .game-room-panel .game-panel-close,
    body:is(.online-game, .table-waiting-game) #tab-history .game-panel-close { display: grid; }
    body:is(.online-game, .table-waiting-game) #table-room-leave { display: none; }
    body:is(.online-game, .table-waiting-game) :is(.table-room-settings__form, .table-room-chat__composer, .table-room-capability-note) {
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 767px) {
    body:is(.online-game, .table-waiting-game) #game-service-panel {
        width: min(84vw, 420px) !important;
        max-width: 420px;
    }
    body:is(.online-game, .table-waiting-game) #screen-game.table-room-panel-open .game-history-backdrop:not([hidden]) {
        right: min(84vw, 420px);
    }
}

@media (max-width: 600px) {
    body:is(.online-game, .table-waiting-game) #screen-game.active {
        grid-template-rows: 42px 46px 24px minmax(0, 1fr) 46px !important;
    }
    body:is(.online-game, .table-waiting-game) #game-service-panel {
        top: 42px;
        height: calc(100dvh - 42px);
    }
    body:is(.online-game, .table-waiting-game) #screen-game.table-room-panel-open .game-history-backdrop:not([hidden]) { top: 42px; }
    body:is(.online-game, .table-waiting-game) .material-game-bar { gap: 6px; padding-inline: 6px; }
    body:is(.online-game, .table-waiting-game) .material-game-logo { width: 76px; flex-basis: 76px; }
    body:is(.online-game, .table-waiting-game) .material-game-bar__identity { gap: 6px; }
    body:is(.online-game, .table-waiting-game) .material-game-bar__identity strong { font-size: 11px; }
    body:is(.online-game, .table-waiting-game) .table-room-tabs button span { font-size: 7px; }
}

@media (max-width: 430px) {
    #screen-game { --board-padding: 5px; --pit-gap: 2px; --stone-size: 13px; --counter-size: 16px; }
}

@media (max-width: 390px) {
    #screen-game { --board-padding: 4px; --pit-gap: 1px; --stone-size: 12px; --counter-size: 15px; }
}

@media (max-width: 350px) {
    #screen-game { --board-padding: 3px; --pit-gap: 1px; --stone-size: 11px; --counter-size: 14px; }
    .confirm-dialog-actions { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
    .material-game-bar__eyebrow { display: none; }
    .material-game-bar__identity strong { font-size: 12px; }
    .game-tool-button span { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    #screen-game *,
    #screen-game *::before,
    #screen-game *::after,
    #end-screen *,
    #end-screen *::before,
    #end-screen *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Live Board mobile side drawer ────────────────────────────────────────────
   The Live Board used to stack `.game-side-panel` under the board as wide
   action cards ("История / Меню" and four more). On a phone that pushed the
   board up and turned a tool panel into the main surface.

   The panel is now a right-side drawer over the board, which is the production
   game-room pattern. Scoped to `body.live-board-active` and to the phone
   breakpoint: the desktop right column and the online table room are unchanged.
   ─────────────────────────────────────────────────────────────────────────── */
#live-board-panel-toggle { display: none; }
.game-side-panel-scrim { display: none; }

@media (max-width: 900px) {
    body.live-board-active #live-board-panel-toggle { display: inline-flex; }

    body.live-board-active .game-side-panel {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: 60;
        /* 90vw keeps a slice of the board visible on the left, so the drawer
           reads as a layer over the game rather than a new page. At 390px this
           is a 351px panel with a 39px board strip. */
        width: 90vw !important;
        max-width: 400px;
        height: 100dvh;
        margin-inline: 0 !important;
        padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--mb-shell);
        border-inline-start: 1px solid var(--on-line, rgba(255, 255, 255, 0.12));
        box-shadow: -18px 0 44px rgba(0, 0, 0, 0.45);
        transform: translateX(100%);
        transition: transform 180ms ease;
        visibility: hidden;
    }

    body.live-board-active #screen-game.side-panel-open .game-side-panel {
        transform: translateX(0);
        visibility: visible;
    }

    body.live-board-active .game-side-panel-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 59;
        background: rgba(0, 0, 0, 0.5);
    }
    body.live-board-active .game-side-panel-scrim[hidden] { display: none; }

    /* The board keeps its own row. It used to span rows 4-6, which painted over
       the bottom player strip and the quick actions and left the phone with a
       board and nothing else. */
    body.live-board-active #screen-game #tab-board { grid-row: 4; }
    /* Its own row under the bottom player strip, on every phone and tablet
       width — not just the one I happened to measure. */
    #screen-game .game-quick-actions { grid-row: 6; }

    /* Compact action grid inside the drawer instead of six full-width cards. */
    body.live-board-active .game-action-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    body.live-board-active .game-action-strip .game-tool-button {
        height: 52px;
        flex-direction: column;
        gap: 3px;
        font-size: 12px;
    }

    /* The body must not scroll behind an open drawer. */
    body.live-board-active.side-panel-locked { overflow: hidden; touch-action: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.live-board-active .game-side-panel { transition: none; }
}

/* ── Immersive mobile game shell ──────────────────────────────────────────────
   The way out of a game surface must always be visible and must not drift.
   The bar is sticky, so Back keeps its position while the board scrolls
   instead of behaving like a floating element in the page body.
   ─────────────────────────────────────────────────────────────────────────── */
.material-game-bar__back { display: none; }
.material-game-bar__menu { display: none; }

@media (max-width: 900px) {
    .material-game-bar {
        position: sticky;
        top: 0;
        z-index: 30;
        gap: 6px;
        padding-top: max(4px, env(safe-area-inset-top, 0px));
        background: var(--mb-shell);
    }

    body.live-board-active .material-game-bar__back,
    body.ai-game .material-game-bar__back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        /* 44x44 is the minimum comfortable touch target. */
        width: 44px;
        height: 44px;
        border: 1px solid var(--on-line, rgba(255, 255, 255, 0.14));
        border-radius: 12px;
        background: var(--on-surface-1, rgba(255, 255, 255, 0.05));
        color: inherit;
        font-size: 16px;
        cursor: pointer;
    }
    .material-game-bar__back:focus-visible {
        outline: 2px solid var(--accent-primary, #C9A227);
        outline-offset: 2px;
    }

    /* The drawer trigger is a peer of Back, not a subtle icon in a corner. */
    body.live-board-active #live-board-panel-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        margin-inline-start: auto;
        color: inherit;
        cursor: pointer;
        width: 44px;
        height: 44px;
        border: 1px solid var(--on-line, rgba(255, 255, 255, 0.14));
        border-radius: 12px;
        background: var(--on-surface-1, rgba(255, 255, 255, 0.05));
        font-size: 16px;
    }

    /* The logo competes with Back and the menu on a phone; the title carries
       the identity instead. */
    body.live-board-active .material-game-logo { display: none; }
    body.ai-game .material-game-logo { display: none; }
    body.live-board-active .material-game-bar__identity { min-width: 0; }
    body.live-board-active #game-title-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Sections inside the drawer: compact rows, not a wall of large cards. */
    body.live-board-active .game-side-panel .game-action-strip + .game-action-strip {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--on-line, rgba(255, 255, 255, 0.12));
    }
}

/* ── Sticky product page header ───────────────────────────────────────────────
   Screens that resolve to no bottom-navigation item own an explicit Back. It
   belongs to a sticky header so it holds its place during scroll.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tp-page-heading--action {
        position: sticky;
        top: 0;
        z-index: 20;
        padding-top: max(8px, env(safe-area-inset-top, 0px));
        padding-bottom: 8px;
        background: var(--surface-canvas, #15100A);
    }
    /* The subtitle is page content, not app-bar content: keeping it out of the
       sticky row stops the bar from eating a third of a phone screen. */
    .tp-page-heading--action .tp-page-heading__copy p { display: none; }
}

/* ── Game Board drawer: internal composition ──────────────────────────────────
   The drawer was eight identical full-width cards in a two-column grid: every
   action carried the same visual weight, navigation looked like a game action,
   and "Menu" appeared inside an already-open menu.

   It is now a compact game menu — header, four labelled sections, and three
   levels of emphasis. Mobile only; the desktop right column is untouched.
   ─────────────────────────────────────────────────────────────────────────── */
.game-drawer-head { display: none; }
.game-drawer-section__title { display: none; }

@media (max-width: 900px) {
    body.live-board-active .game-drawer-head {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 64px;
        margin: 0 0 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--on-line, rgba(255, 255, 255, 0.12));
    }
    body.live-board-active .game-drawer-head__copy { flex: 1 1 auto; min-width: 0; }
    body.live-board-active .game-drawer-head__copy strong {
        display: block;
        font-size: 17px;
        line-height: 1.25;
    }
    body.live-board-active .game-drawer-head__copy small {
        display: block;
        margin-top: 2px;
        color: var(--on-text-2, rgba(255, 255, 255, 0.62));
        font-size: 12px;
    }
    body.live-board-active .game-drawer-close {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border: 1px solid var(--on-line, rgba(255, 255, 255, 0.14));
        border-radius: 12px;
        background: var(--on-surface-1, rgba(255, 255, 255, 0.05));
        color: inherit;
        font-size: 16px;
        cursor: pointer;
    }

    body.live-board-active .game-side-panel { padding-inline: 16px; }

    /* One column of rows, not a grid of equal cards. */
    body.live-board-active .game-action-strip {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }
    body.live-board-active .game-side-panel .game-action-strip + .game-action-strip {
        margin-top: 18px;
        padding-top: 0;
        border-top: 0;
    }

    body.live-board-active .game-drawer-section__title {
        display: block;
        margin: 18px 0 6px;
        color: var(--on-text-3, rgba(255, 255, 255, 0.5));
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    body.live-board-active .game-action-strip > .game-drawer-section__title:first-child { margin-top: 0; }

    /* SECONDARY — the default row. */
    body.live-board-active .game-action-strip .game-tool-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        height: 48px;
        padding: 0 14px;
        border: 1px solid var(--on-line, rgba(255, 255, 255, 0.1));
        border-radius: 11px;
        background: var(--on-surface-1, rgba(255, 255, 255, 0.035));
        font-size: 14px;
        font-weight: 500;
        text-align: start;
    }
    body.live-board-active .game-action-strip .game-tool-button > i {
        flex: 0 0 auto;
        width: 22px;
        font-size: 15px;
        text-align: center;
        color: var(--on-text-2, rgba(255, 255, 255, 0.66));
    }
    body.live-board-active .game-action-strip .game-tool-button > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* PRIMARY — the two AI actions carry the accent. */
    body.live-board-active .game-action-strip .game-tool-button--primary {
        height: 52px;
        border-color: color-mix(in srgb, var(--accent-primary, #C9A227) 42%, transparent);
        background: color-mix(in srgb, var(--accent-primary, #C9A227) 13%, transparent);
        font-weight: 600;
    }
    body.live-board-active .game-action-strip .game-tool-button--primary > i {
        color: var(--accent-primary, #C9A227);
    }

    /* TERTIARY — navigation and settings recede; they are not game actions. */
    body.live-board-active .game-action-strip .game-tool-button--quiet {
        height: 46px;
        border-color: transparent;
        background: transparent;
        color: var(--on-text-2, rgba(255, 255, 255, 0.72));
        font-weight: 500;
    }
    body.live-board-active .game-action-strip .game-tool-button--quiet:hover {
        background: var(--on-surface-1, rgba(255, 255, 255, 0.04));
    }

    /* Nothing here destroys data, so nothing wears the danger style. */
    body.live-board-active .game-action-strip .game-tool-button--danger {
        border-color: var(--on-line, rgba(255, 255, 255, 0.1));
        background: var(--on-surface-1, rgba(255, 255, 255, 0.035));
        color: inherit;
    }
}

/* ── Quick actions under the board ────────────────────────────────────────────
   The four most-used controls sit in the left game column directly under the
   board on every breakpoint, not inside the drawer and never duplicated there.
   ─────────────────────────────────────────────────────────────────────────── */
.game-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Fixed row height and start-aligned content: as a child of the game grid
       this container is stretched, and stretched auto rows turned an 8px gap
       into ~170px of dead space between the two rows. */
    grid-auto-rows: 46px;
    align-content: start;
    gap: 8px;
    width: 100%;
    margin: 8px 0 0;
    padding-inline: 2px;
}
.game-quick-actions[hidden] { display: none; }

.game-quick-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--on-line, rgba(255, 255, 255, 0.12));
    border-radius: 11px;
    background: var(--on-surface-1, rgba(255, 255, 255, 0.045));
    color: inherit;
    font: 600 13px/1.15 var(--font-body, inherit);
    cursor: pointer;
}
.game-quick-action > i { flex: 0 0 auto; font-size: 14px; opacity: 0.8; }
/* The label must never be clipped and must never force a horizontal scroll. */
.game-quick-action > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-quick-action:disabled { opacity: 0.45; cursor: default; }
.game-quick-action:focus-visible { outline: 2px solid var(--accent-primary, #C9A227); outline-offset: 2px; }

/* Continuing against the engine is the primary action of the workspace. */
.game-quick-action--primary {
    border-color: color-mix(in srgb, var(--accent-primary, #C9A227) 45%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #C9A227) 14%, transparent);
}
.game-quick-action--primary > i { color: var(--accent-primary, #C9A227); opacity: 1; }

/* Desktop has room for a single compact row. */
@media (min-width: 901px) {
    .game-quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 42px; }
    .game-quick-action { height: 42px; font-size: 12.5px; }
}

@media (max-width: 900px) {
    /* Clear of the drawer and the home indicator. */
    .game-quick-actions { margin-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
}

/* ── A. Quick actions: one row, icon-only on phones ───────────────────────────
   Four equal cells in a single row. The label is hidden on phones, so each
   control carries its own localized aria-label; desktop keeps the text.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .game-quick-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 44px;
        gap: 8px;
    }
    .game-quick-action {
        height: 44px;
        padding: 0;
        gap: 0;
        font-size: 0;
    }
    /* Icon only — no wrap, no ellipsis, no overflow. */
    .game-quick-action > span { display: none; }
    .game-quick-action > i { font-size: 16px; opacity: 0.9; }
    .game-quick-action--primary > i { opacity: 1; }
}

/* ── B. Centred save-position modal ───────────────────────────────────────────
   The shared overlay is a bottom sheet (`align-items: flex-end`, top-only
   radius, slide-up). The save form opts out: it is a centred dialog on both
   mobile and desktop, fully inside the viewport, and it scrolls internally
   rather than being pushed off-screen by the on-screen keyboard.
   ─────────────────────────────────────────────────────────────────────────── */
.modal-overlay--centered { align-items: center; padding: 16px; }

.modal-overlay--centered .modal-sheet {
    width: min(100%, 420px);
    max-height: min(88dvh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    border: 1px solid var(--on-line, rgba(255, 255, 255, 0.14));
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* The slide-up belongs to a sheet; a centred dialog fades in place. */
@keyframes tpModalPop {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay--centered.open .modal-sheet {
    animation: tpModalPop 0.18s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
    .modal-overlay--centered.open .modal-sheet { animation: none; }
}

.modal-overlay--centered .modal-sheet input,
.modal-overlay--centered .modal-sheet textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--on-line, rgba(255, 255, 255, 0.16));
    border-radius: 10px;
    background: var(--on-surface-2, rgba(0, 0, 0, 0.25));
    color: inherit;
    font: 400 15px/1.4 var(--font-body, inherit);
}

/* ── C. Compact move history overlay ──────────────────────────────────────────
   Opened by an explicit action only. One row per full move, White then Black —
   not a running list of plies, and not a permanent block in the right column.
   ─────────────────────────────────────────────────────────────────────────── */
.game-history-modal { width: min(100%, 420px); }

.game-history-modal__scroll {
    max-height: min(60dvh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.game-history-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.game-history-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 10px;
    background: var(--bg-menu-card, #3d281a);
    color: var(--on-text-3, rgba(255, 255, 255, 0.55));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: start;
    text-transform: uppercase;
}

.game-history-table td {
    padding: 7px 10px;
    border-top: 1px solid var(--on-line, rgba(255, 255, 255, 0.08));
    font-size: 14px;
    line-height: 1.2;
}
.game-history-table td:first-child {
    width: 46px;
    color: var(--on-text-3, rgba(255, 255, 255, 0.5));
}
.game-history-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }

.game-history-empty {
    margin: 12px 0 0;
    color: var(--on-text-2, rgba(255, 255, 255, 0.6));
    font-size: 13px;
    text-align: center;
}
.game-history-empty[hidden] { display: none; }

/* The right-column history panel is the product's own "Ходы партии" table
   (No / Белые / Чёрные with capture and tuzdyk marks). It stays on desktop —
   hiding it removed the panel the AI game is built around. The compact overlay
   below is the phone presentation, where there is no room for a side column. */
@media (max-width: 1099.98px) {
    body.live-board-active #tab-history,
    body.ai-game #tab-history { display: none !important; }
}

/* premium.css sets the sheet radius and padding with `!important`, so the
   centred variant has to match that weight. Scoped to the opted-in overlay:
   every other modal keeps the shared bottom-sheet look. */
.modal-overlay--centered .modal-sheet {
    border-radius: 16px !important;
    padding: 20px !important;
}

/* `#screen-game` is `position: fixed; z-index: 9999`, so a modal at z-index
   1000 opened from the board rendered *behind* it — visible in the DOM,
   invisible on screen. The game-owned dialogs are lifted above it.
   Scoped to the two overlays the board opens, not to every modal. */
#live-board-save-overlay,
#game-history-overlay,
#live-board-ask-overlay,
#live-board-list-overlay { z-index: 10000; }

/* The confirm action inside a centred dialog must read as a button, not as
   faint text. Scoped to the opted-in overlays. */
.modal-overlay--centered .modal-sheet button[type="submit"],
.modal-overlay--centered .modal-sheet .modal-primary-btn,
.modal-overlay--centered .modal-sheet form > button:last-of-type {
    display: block;
    width: 100%;
    min-height: 46px;
    margin-top: 14px;
    border: 1px solid color-mix(in srgb, var(--accent-primary, #C9A227) 55%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent-primary, #C9A227) 22%, transparent);
    color: #F5EBD8;
    font: 600 15px/1.2 var(--font-body, inherit);
    cursor: pointer;
}
.modal-overlay--centered .modal-sheet label {
    display: block;
    margin-bottom: 4px;
    color: var(--on-text-2, rgba(255, 255, 255, 0.72));
    font-size: 13px;
}

/* ── Desktop game board layout ────────────────────────────────────────────────
   `#screen-game` is a four-column grid (gutter | board | panel | gutter). The
   quick actions defaulted to `grid-column: auto` and landed in the 12px gutter,
   which rendered them as a 12px sliver over the player strip. They are placed
   explicitly in the board column, on their own row under it.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
    #screen-game .game-quick-actions {
        grid-column: 2;
        grid-row: 6;
        justify-self: stretch;
        max-width: 640px;
        margin: 10px auto 0;
    }

    /* Ask AI and its answer block are hidden on desktop for now: the answer
       card overflowed the column and crowded the panel. The action stays
       available on mobile inside the drawer. */
    #screen-game #btn-live-board-ask,
    #screen-game #live-board-answer,
    #screen-game .live-board-answer { display: none !important; }
}

/* ── Compact move list beside the board ───────────────────────────────────────
   One line per full move: "1. 76 - 98", White light, Black dark.
   ─────────────────────────────────────────────────────────────────────────── */
.game-history-inline { margin-bottom: 12px; }

.game-history-inline__title {
    margin: 0 0 6px;
    color: var(--on-text-3, rgba(255, 255, 255, 0.5));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.game-history-inline__list {
    max-height: 260px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.game-history-inline__list li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 14px;
    line-height: 1.35;
}
.game-history-inline__list li:nth-child(even) { background: rgba(255, 255, 255, 0.03); }

.game-history-inline__no {
    min-width: 22px;
    color: var(--on-text-3, rgba(255, 255, 255, 0.45));
    font-size: 12px;
}
/* White's move reads light; Black's reads dark on a light chip so it stays
   legible against the dark panel. */
.game-history-inline__white { color: #F6EEDF; font-weight: 600; }
.game-history-inline__dash { color: var(--on-text-3, rgba(255, 255, 255, 0.35)); }
.game-history-inline__black {
    padding: 0 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.86);
    color: #14100C;
    font-weight: 700;
}

.game-history-inline__empty {
    margin: 0;
    color: var(--on-text-2, rgba(255, 255, 255, 0.55));
    font-size: 12px;
}
.game-history-inline__empty[hidden] { display: none; }

/* Superseded: the panel's own "Ходы партии" table is the desktop history.
   This inline list duplicated it and crowded the column. */
.game-history-inline { display: none !important; }

/* The quick actions now live inside the side panel with the other actions, so
   the desktop board-column placement no longer applies. */
/* Desktop groups them with the panel actions: same column, directly under it.
   The element stays a child of the game grid rather than of the panel, because
   on a phone that panel is a transformed off-canvas drawer and a child cannot
   escape it — that is what made the buttons vanish on mobile. */
@media (min-width: 901px) {
    #screen-game .game-quick-actions {
        grid-column: 3;
        grid-row: 6;
        align-self: start;
        max-width: none;
        margin: 8px 0 0;
        /* One row, not 2x2. A grid row spans every column, so a 102px-tall
           block in the panel column was taking that height away from the board
           row — the board is height-bound on a short window, so this made it
           narrower. One row costs ~50px less and gives it straight back. */
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 40px;
        gap: 6px;
    }
    #screen-game .game-quick-action { font-size: 0; gap: 0; padding: 0; }
    #screen-game .game-quick-action > span { display: none; }
    #screen-game .game-quick-action > i { font-size: 15px; }
}

@media (max-width: 900px) {
    /* Inside the drawer they follow the same compact row rhythm. */
    body.live-board-active .game-quick-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--on-line, rgba(255, 255, 255, 0.12));
    }
    /* The player strips name the side on each edge, so the phone shows which
       side is at the bottom exactly as the desktop does. */
    body.live-board-active .match-player--self .match-player-copy small,
    body.live-board-active .match-player--opponent .match-player-copy small { display: block; }
}


/* The quick action row sizes to its buttons rather than being stretched by the
   grid, and Ask AI is not offered on phones either — the answer card has no
   room to render there. */
@media (max-width: 1099.98px) {
    #screen-game .game-quick-actions {
        align-self: center;
        margin: 0 !important;
        padding-top: 0;
        border-top: 0;
        height: 44px;
    }
    #screen-game #btn-live-board-ask { display: none !important; }
    /* With Ask AI gone the AI section header would label nothing. */
    body.live-board-active .game-action-strip > .game-drawer-section__title:nth-of-type(2) { display: none; }
}

/* ── League header banner ─────────────────────────────────────────────────────
   The banner rendered 38px tall while its own padding was 36px, so the 48px
   icon spilled above and below it and `overflow: hidden` sliced it, while the
   subtitle collided with the 3px accent line pinned to the bottom edge.

   One self-contained layout, specific enough to win over the stacked overrides
   in inline-styles.css. Same rules on mobile and desktop; only the scale moves.
   ─────────────────────────────────────────────────────────────────────────── */
#screen-league .league-season-banner {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    /* Extra bottom padding keeps text clear of the 3px accent line. */
    padding: 16px 18px 19px !important;
    min-height: 76px !important;
    height: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

#screen-league .league-season-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 46px !important;
    height: 46px !important;
    /* 36px glyph in a 46px box was what overflowed the banner. */
    font-size: 20px !important;
    border-radius: 13px !important;
    background: rgba(232, 182, 46, 0.14) !important;
    color: var(--arena-gold, #E8B62E) !important;
    box-shadow: inset 0 0 0 1px rgba(232, 182, 46, 0.28) !important;
}

#screen-league .league-season-banner > div:last-child { min-width: 0 !important; }

#screen-league .league-season-title {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
}

#screen-league .league-season-sub {
    margin-top: 3px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    /* The subtitle was clipped by the banner edge; it wraps instead. */
    overflow-wrap: anywhere !important;
    white-space: normal !important;
}

@media (max-width: 600px) {
    #screen-league .league-season-banner { padding: 14px 14px 17px !important; gap: 12px !important; min-height: 70px !important; }
    #screen-league .league-season-icon { width: 42px !important; height: 42px !important; font-size: 18px !important; }
    #screen-league .league-season-title { font-size: 15.5px !important; }
    #screen-league .league-season-sub { font-size: 12px !important; }
}