/* ==========================================================================
   Game room refresh: the online game bar, the player rows, the table room
   drawer and the watch-live page, brought to the look of the home screen and
   the glass bottom bar: warm glass cards, hairline edges, soft shadows, gold
   (or teal in the light theme) accents and 44px touch targets.

   Loaded last. The older game rules (milestone.css, glass-system.css,
   board-controls.css) use !important on the contested properties, so these
   selectors win by specificity (two ids) and repeat !important only where an
   older rule does. Nothing here changes the size or position of the board,
   the player rows or the bottom action bar; it changes how they look.
   ========================================================================== */

#screen-game,
#screen-watch {
    --gr-edge: color-mix(in srgb, var(--tp-color-text) 10%, transparent);
    --gr-edge-strong: color-mix(in srgb, var(--tp-color-text) 16%, transparent);
    --gr-card: color-mix(in srgb, var(--tp-color-surface-raised) 82%, transparent);
    --gr-card-solid: color-mix(in srgb, var(--tp-color-surface-raised) 94%, transparent);
    --gr-soft: color-mix(in srgb, var(--tp-color-text) 6%, transparent);
    --gr-soft-2: color-mix(in srgb, var(--tp-color-text) 10%, transparent);
    --gr-accent-soft: color-mix(in srgb, var(--tp-color-primary) 16%, transparent);
    --gr-accent-edge: color-mix(in srgb, var(--tp-color-primary) 42%, transparent);
    --gr-glint: rgba(255, 255, 255, 0.10);
    --gr-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.6);
    --gr-shadow-lg: 0 24px 56px -20px rgba(0, 0, 0, 0.7);
}

html[data-theme="steppe-light"] #screen-game,
html[data-theme="steppe-light"] #screen-watch {
    --gr-card: color-mix(in srgb, var(--tp-color-surface-raised) 86%, transparent);
    --gr-glint: rgba(255, 255, 255, 0.85);
    --gr-shadow: 0 10px 26px -16px rgba(60, 48, 24, 0.32);
    --gr-shadow-lg: 0 22px 50px -22px rgba(60, 48, 24, 0.4);
}

/* ── 1. The game bar: a floating glass pill with round icon buttons ──────── */

html[data-theme] #screen-game .material-game-bar {
    border: 1px solid var(--gr-edge) !important;
    border-radius: 22px;
    background: color-mix(in srgb, var(--tp-color-surface-raised) 62%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    box-shadow:
        var(--gr-shadow),
        inset 0 1px 0 var(--gr-glint) !important;
}

html[data-theme] #screen-game .material-game-bar :is(.material-game-bar__back, #live-board-panel-toggle, .table-room-bar-button, .historical-replay-back) {
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--gr-edge);
    border-radius: 50%;
    background: var(--gr-soft);
    color: var(--tp-color-text);
    box-shadow: inset 0 1px 0 var(--gr-glint);
    font-size: 16px;
    cursor: pointer;
    transition: background-color 160ms ease, transform 100ms ease-out;
}

html[data-theme] #screen-game .material-game-bar .table-room-bar-button { display: inline-flex; }

html[data-theme] #screen-game .material-game-bar :is(.material-game-bar__back, #live-board-panel-toggle, .table-room-bar-button, .historical-replay-back):active {
    transform: scale(0.94);
    background: var(--gr-soft-2);
}

html[data-theme] #screen-game .material-game-bar :is(button):focus-visible {
    outline: 2px solid var(--tp-color-focus, var(--tp-color-primary));
    outline-offset: 2px;
}

/* The panel button is the one that opens the table: give it the accent. */
html[data-theme] #screen-game .material-game-bar .table-room-bar-button {
    border-color: var(--gr-accent-edge);
    background: var(--gr-accent-soft);
    color: var(--tp-color-primary);
}

html[data-theme] #screen-game .material-game-bar .table-room-bar-actions { gap: 6px; }

html[data-theme] #screen-game .material-game-bar__identity strong {
    color: var(--tp-color-text);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* The small raster logo is blurry on a phone; the title carries the identity. */
@media (max-width: 760px) {
    html[data-theme] #screen-game .material-game-bar .material-game-logo { display: none; }
    html[data-theme] body:is(.online-game, .table-waiting-game) #screen-game .material-game-bar__identity strong { font-size: 15px; }
}

/* ── 2. Player rows: compact glass cards with a clear clock pill ─────────── */

html[data-theme] #screen-game .match-player {
    gap: 10px !important;
    padding: 5px 8px 5px 6px !important;
    border: 1px solid var(--gr-edge) !important;
    border-radius: 20px !important;
    background: var(--gr-card) !important;
    box-shadow:
        0 8px 20px -14px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 var(--gr-glint) !important;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

html[data-theme="steppe-light"] #screen-game .match-player {
    box-shadow:
        0 8px 20px -14px rgba(60, 48, 24, 0.3),
        inset 0 1px 0 var(--gr-glint) !important;
}

/* The side to move (timer.js sets .is-active on the row of the running clock). */
html[data-theme] body:not(.untimed-game) #screen-game .match-player.is-active {
    border-color: var(--gr-accent-edge) !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--tp-color-primary) 13%, transparent), transparent 60%),
        var(--gr-card) !important;
    box-shadow:
        0 10px 26px -14px color-mix(in srgb, var(--tp-color-primary) 55%, transparent),
        inset 0 1px 0 var(--gr-glint) !important;
}

html[data-theme] #screen-game .match-player .match-player-open {
    min-width: 0;
    border-radius: 14px;
}

html[data-theme] #screen-game .match-avatar {
    border: 1.5px solid color-mix(in srgb, var(--tp-color-primary) 38%, transparent) !important;
    background: color-mix(in srgb, var(--tp-color-text) 8%, var(--tp-color-surface-raised)) !important;
    color: var(--tp-color-primary) !important;
    box-shadow: inset 0 1px 0 var(--gr-glint);
}

html[data-theme] body:not(.untimed-game) #screen-game .match-player.is-active .match-avatar {
    border-color: var(--tp-color-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-color-primary) 22%, transparent);
}

html[data-theme] #screen-game .match-player-copy strong {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.005em;
}

html[data-theme] #screen-game .match-player-copy small {
    font-size: 12px;
    font-weight: 500;
}

html[data-theme] #screen-game .match-side-label {
    font-size: 10px;
}

html[data-theme] #screen-game .match-clock {
    display: inline-grid;
    place-items: center;
    min-width: 84px !important;
    min-height: 38px;
    padding: 0 12px !important;
    border: 1px solid var(--gr-edge) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--tp-color-text) 7%, transparent) !important;
    color: var(--tp-color-text) !important;
    font: 800 18px/1 var(--font-mono, 'JetBrains Mono', ui-monospace, monospace) !important;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 1px 0 var(--gr-glint);
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

html[data-theme] body:not(.untimed-game) #screen-game .match-player.is-active .match-clock {
    outline: none !important;
    border-color: var(--tp-color-primary) !important;
    background: var(--tp-color-primary) !important;
    color: var(--tp-color-primary-ink, #1a1206) !important;
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--tp-color-primary) 70%, transparent);
}

html[data-theme] body.untimed-game #screen-game .match-clock {
    font-size: 12px !important;
    min-width: 94px !important;
}

/* The state strip under the opponent: readable, and the turn stands out. */
html[data-theme] #screen-game .match-state-strip {
    padding-inline: 2px !important;
    font-size: 10px !important;
    gap: 5px !important;
    color: var(--tp-color-text-muted) !important;
}

html[data-theme] #screen-game .match-state-strip #status-text {
    color: var(--tp-color-text);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}
html[data-theme] #screen-game .match-state-strip .match-state-divider { display: none; }

html[data-theme] #screen-game .match-state-strip #status-text[data-state="disconnected"] { color: var(--tp-color-danger, #d58a7d); }
html[data-theme] #screen-game .match-state-strip[data-ai-status="your_turn"] #status-text {
    padding: 2px 8px;
    background: var(--gr-accent-soft);
    color: var(--tp-color-primary);
}

/* ── The bottom action bar (phone): glass tiles ──────────────────────────── */

@media (max-width: 600px) {
    html[data-theme] #screen-game .game-mobile-action:not([hidden]) {
        min-height: 52px;
        border: 1px solid var(--gr-edge);
        border-radius: 18px;
        background: var(--gr-card);
        color: var(--tp-color-text);
        box-shadow: inset 0 1px 0 var(--gr-glint);
        font-size: 12px;
        font-weight: 700;
    }
    html[data-theme] #screen-game .game-mobile-action--danger { color: var(--tp-color-danger, var(--danger)); }
    html[data-theme] #screen-game .game-mobile-action:not(:disabled):active { background: var(--gr-soft-2); }
}

/* ── 3. The table room drawer ────────────────────────────────────────────── */

/* Glass surface for the drawer on every width. */
html[data-theme] #screen-game #game-service-panel.game-side-panel {
    border-color: var(--gr-edge) !important;
    background: color-mix(in srgb, var(--tp-color-surface-raised) 95%, transparent) !important;
    -webkit-backdrop-filter: blur(26px) saturate(165%);
    backdrop-filter: blur(26px) saturate(165%);
    box-shadow: var(--gr-shadow-lg), inset 0 1px 0 var(--gr-glint) !important;
}

/* Phone and tablet: a floating card under the bar instead of a flat slab
   that covers the lower half of it. */
@media (max-width: 1099.98px) {
    html[data-theme] body:is(.online-game, .table-waiting-game) #screen-game #game-service-panel.game-side-panel {
        top: calc(var(--game-bar-offset, 8px) + 62px);
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        left: auto;
        height: auto;
        border-width: 1px;
        border-radius: 26px;
        padding: 4px 12px 0;
    }
    html[data-theme] body:is(.online-game, .table-waiting-game) #screen-game.table-room-panel-open .game-history-backdrop:not([hidden]) {
        top: 0;
        right: 0;
        background: rgba(10, 8, 6, 0.38);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
}

@media (max-width: 380px) {
    html[data-theme] body:is(.online-game, .table-waiting-game) #screen-game #game-service-panel.game-side-panel {
        width: calc(100vw - 16px) !important;
        max-width: none;
    }
}

html[data-theme] #screen-game .game-drawer-head { padding-top: 8px; }

html[data-theme] #screen-game .game-drawer-head__copy strong {
    color: var(--tp-color-text);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Round close buttons wherever the drawer has one. */
html[data-theme] #screen-game :is(.game-drawer-close, .game-panel-close) {
    width: 44px;
    height: 44px;
    border: 1px solid var(--gr-edge);
    border-radius: 50%;
    background: var(--gr-soft);
    color: var(--tp-color-text);
    box-shadow: none;
    transition: background-color 160ms ease, transform 100ms ease-out;
}
html[data-theme] #screen-game :is(.game-drawer-close, .game-panel-close):active { transform: scale(0.94); background: var(--gr-soft-2); }

/* Header of the table: status pill, title, terms. */
html[data-theme] #screen-game .table-room-header {
    min-height: 0;
    padding: 10px 4px 12px;
    border-bottom: 0;
}
html[data-theme] #screen-game .table-room-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--gr-accent-soft);
    color: var(--tp-color-primary);
    font-size: 11px;
    letter-spacing: 0.06em;
}
html[data-theme] #screen-game .table-room-header strong {
    margin-top: 8px;
    color: var(--tp-color-text);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
html[data-theme] #screen-game .table-room-header small {
    margin-top: 2px;
    color: var(--tp-color-text-muted);
    font-size: 13px;
}

/* Actions: calm glass tiles. */
html[data-theme] body:is(.online-game, .table-waiting-game) #screen-game #game-live-actions {
    padding: 0 0 12px;
    border-bottom: 0;
    gap: 8px;
}
html[data-theme] #screen-game #game-live-actions > .game-drawer-section__title {
    margin-bottom: 2px;
    color: var(--tp-color-text-muted) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
html[data-theme] #screen-game .game-tool-button {
    border: 1px solid var(--gr-edge) !important;
    border-radius: 18px !important;
    background: var(--gr-soft) !important;
    box-shadow: inset 0 1px 0 var(--gr-glint) !important;
    transition: background-color 160ms ease, transform 100ms ease-out;
}
html[data-theme] #screen-game .game-tool-button:active { transform: scale(0.97); background: var(--gr-soft-2) !important; }
html[data-theme] #screen-game #game-live-actions > button > span { font-size: 13px; font-weight: 700; }
html[data-theme] #screen-game .game-tool-button--danger {
    border-color: color-mix(in srgb, var(--tp-color-danger) 36%, transparent) !important;
    background: color-mix(in srgb, var(--tp-color-danger) 10%, transparent) !important;
}

/* Tabs: one segmented control. */
html[data-theme] #screen-game .table-room-tabs {
    gap: 2px;
    margin-bottom: 12px;
    padding: 4px;
    border: 1px solid var(--gr-edge);
    border-radius: 20px;
    background: var(--gr-soft);
}
html[data-theme] #screen-game .table-room-tabs button {
    min-height: 50px;
    gap: 4px;
    border: 0;
    border-radius: 16px;
    color: var(--tp-color-text-muted);
    font: 700 12px/1.1 var(--font-sans, inherit);
    transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
html[data-theme] #screen-game .table-room-tabs button i { font-size: 15px; }
html[data-theme] #screen-game .table-room-tabs button span,
html[data-theme] body:is(.online-game, .table-waiting-game) #screen-game .table-room-tabs button span { max-width: 100%; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; }
html[data-theme] #screen-game .table-room-tabs button:hover:not(.is-active) { color: var(--tp-color-text); }
html[data-theme] #screen-game .table-room-tabs button.is-active {
    background: color-mix(in srgb, var(--tp-color-primary) 20%, var(--tp-color-surface-raised));
    color: var(--tp-color-text);
    box-shadow:
        inset 0 0 0 1px var(--gr-accent-edge),
        0 6px 14px -8px rgba(0, 0, 0, 0.5);
}
html[data-theme] #screen-game .table-room-tabs button.is-active i { color: var(--tp-color-primary); }
html[data-theme] #screen-game .table-room-unread {
    top: 4px;
    right: 6px;
    min-width: 18px;
    min-height: 18px;
    background: var(--tp-color-primary);
    color: var(--tp-color-primary-ink, #1a1206);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

/* Panels: clean cards. */
html[data-theme] body:is(.online-game, .table-waiting-game) #screen-game :is(.game-room-panel, .game-history-panel.game-room-protocol) {
    border: 1px solid var(--gr-edge);
    border-radius: 22px;
    background: color-mix(in srgb, var(--tp-color-text) 3.5%, transparent);
}

html[data-theme] #screen-game .game-panel-header {
    min-height: 56px;
    padding: 8px 8px 8px 16px;
    border-bottom: 1px solid var(--gr-edge);
}
html[data-theme] #screen-game .game-panel-header strong { color: var(--tp-color-text); font-size: 15px; font-weight: 800; }
html[data-theme] #screen-game .game-panel-eyebrow {
    color: var(--tp-color-primary);
    font-size: 11px;
    letter-spacing: 0.08em;
}
html[data-theme] #screen-game .game-history-empty {
    margin: 28px 16px;
    color: var(--tp-color-text-muted);
    font-size: 14px;
}

/* Protocol: airy rows, no zebra. The move cells are buttons (play-wait.css). */
html[data-theme] #screen-game .history-box { padding: 6px 10px 10px !important; }

html[data-theme] #screen-game .hist-header {
    top: -6px;
    padding: 10px 6px 8px;
    border-bottom: 1px solid var(--gr-edge);
    border-radius: 12px 12px 0 0;
    background: color-mix(in srgb, var(--tp-color-text) 5%, var(--tp-color-surface-raised));
    color: var(--tp-color-text-muted);
    font-size: 11px;
}

html[data-theme] #screen-game .hist-turn {
    gap: 6px !important;
    margin: 0 0 2px;
    padding: 3px 4px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    font-size: 14px !important;
}

html[data-theme] #screen-game .hist-turn:is(:nth-child(even), :nth-child(odd)) { background: transparent !important; }

html[data-theme] #screen-game .hist-turn .hist-num {
    color: var(--tp-color-text-muted) !important;
    font-size: 12px;
    text-align: right;
    padding-right: 4px;
    opacity: 1;
}

html[data-theme] #screen-game .hist-turn :is(.hist-w, .hist-b) {
    border: 0;
    border-radius: 12px;
    background: var(--gr-soft) !important;
    color: var(--tp-color-text) !important;
}

html[data-theme] #screen-game #history-content .hist-turn button:is(.hist-w, .hist-b):hover { background: var(--gr-soft-2) !important; }

html[data-theme] #screen-game #history-content .hist-turn button.is-shown,
html[data-theme] #screen-game #history-content .hist-turn button.is-shown:hover {
    background: color-mix(in srgb, var(--tp-color-primary) 26%, transparent) !important;
    box-shadow: inset 0 0 0 1px var(--gr-accent-edge);
}

html[data-theme] #screen-game .hist-turn.is-latest {
    border-left: 0 !important;
    background: var(--gr-accent-soft) !important;
}

html[data-theme] #screen-game .game-history-legend {
    margin: 12px 8px 4px;
    color: var(--tp-color-text-muted);
    font-size: 12px;
    opacity: 1;
}

/* Chat. */
html[data-theme] #screen-game .table-room-chat__messages { gap: 8px; padding: 12px; }
html[data-theme] #screen-game .table-room-message {
    max-width: 86%;
    padding: 9px 12px;
    border: 1px solid var(--gr-edge);
    border-radius: 18px 18px 18px 6px;
    background: var(--gr-soft);
}
html[data-theme] #screen-game .table-room-message.is-mine {
    border-color: var(--gr-accent-edge);
    border-radius: 18px 18px 6px 18px;
    background: var(--gr-accent-soft);
}
html[data-theme] #screen-game .table-room-message p { font-size: 14px; line-height: 1.4; }
html[data-theme] #screen-game .table-room-message time { color: var(--tp-color-text-muted); font-size: 11px; }

html[data-theme] #screen-game .table-room-chat__composer {
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: end;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--gr-edge);
}
html[data-theme] #screen-game .table-room-chat__composer textarea {
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--gr-edge-strong);
    border-radius: 24px;
    background: color-mix(in srgb, var(--tp-color-text) 6%, transparent) !important;
    color: var(--tp-color-text);
    font: 500 16px/1.3 var(--font-sans, inherit);
    resize: none;
}
html[data-theme] #screen-game .table-room-chat__composer textarea::placeholder { color: var(--tp-color-text-muted); }
html[data-theme] #screen-game .table-room-chat__composer textarea:focus-visible,
html[data-theme] #screen-game .table-room-settings__form :is(input, select):focus-visible,
html[data-theme] #screen-game .table-room-invite input:focus-visible {
    outline: 2px solid var(--tp-color-focus, var(--tp-color-primary));
    outline-offset: 1px;
    border-color: var(--tp-color-primary);
}
html[data-theme] #screen-game .table-room-chat__composer button[type="submit"] {
    width: 48px;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tp-color-primary);
    color: var(--tp-color-primary-ink, #1a1206);
    font-size: 16px;
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--tp-color-primary) 80%, transparent);
}
html[data-theme] #screen-game .table-room-chat__composer button:disabled { opacity: 0.4; box-shadow: none; }

/* Players. */
html[data-theme] #screen-game .table-room-player-list { gap: 8px; padding: 12px; }
html[data-theme] #screen-game .table-room-player {
    min-height: 60px;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--gr-edge);
    border-radius: 18px;
    background: var(--gr-soft);
}
html[data-theme] #screen-game .table-room-player strong { color: var(--tp-color-text); font-size: 15px; font-weight: 800; }
html[data-theme] #screen-game .table-room-player small { color: var(--tp-color-text-muted); font-size: 12px; }
html[data-theme] #screen-game .table-room-owner-badge {
    padding: 4px 9px;
    background: var(--gr-accent-soft);
    color: var(--tp-color-primary);
    font-size: 10px;
    letter-spacing: 0.05em;
}
html[data-theme] #screen-game .table-room-invite {
    margin: 0 12px 12px;
    padding: 14px;
    border: 1px solid var(--gr-accent-edge);
    border-radius: 18px;
    background: var(--gr-accent-soft);
}
html[data-theme] #screen-game .table-room-invite > strong { color: var(--tp-color-text); font-size: 15px; }
html[data-theme] #screen-game .table-room-invite > p,
html[data-theme] #screen-game .table-room-capability-note {
    color: var(--tp-color-text-muted);
    font-size: 13px;
    line-height: 1.45;
}
html[data-theme] #screen-game .table-room-capability-note { margin: auto 16px 12px; border-top: 1px solid var(--gr-edge); }
html[data-theme] #screen-game .table-room-invite .tp-play-copy-row { gap: 8px; }
html[data-theme] #screen-game .table-room-invite input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--gr-edge-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--tp-color-text) 6%, transparent) !important;
  color: var(--tp-color-text);
  font-size: 14px;
}

/* Settings form: styled controls instead of the browser defaults. */
html[data-theme] #screen-game .table-room-settings__form { padding: 14px 12px 12px; }
html[data-theme] #screen-game .table-room-settings__grid { gap: 10px; margin-bottom: 4px; }
html[data-theme] #screen-game .table-room-settings__form label {
    color: var(--tp-color-text-muted);
    font-size: 12px;
    font-weight: 700;
}
html[data-theme] #screen-game .table-room-settings__form label > span { margin-bottom: 6px; }
html[data-theme] #screen-game .table-room-settings__form :is(input[type="number"], select) {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--gr-edge-strong);
    border-radius: 14px;
    background-color: color-mix(in srgb, var(--tp-color-text) 6%, transparent) !important;
    color: var(--tp-color-text);
    font: 600 16px/1 var(--font-sans, inherit);
    font-variant-numeric: tabular-nums;
}
html[data-theme] #screen-game .table-room-settings__form select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a39a8a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
html[data-theme] #screen-game .table-room-settings__form select option { background: var(--tp-color-surface-raised); color: var(--tp-color-text); }
html[data-theme] #screen-game .table-room-setting-toggle {
    min-height: 52px;
    gap: 12px;
    margin-top: 8px;
    padding: 8px 14px;
    border: 1px solid var(--gr-edge);
    border-radius: 16px;
    background: var(--gr-soft);
    cursor: pointer;
}
html[data-theme] #screen-game .table-room-setting-toggle > span { color: var(--tp-color-text); font-size: 14px; font-weight: 700; }
html[data-theme] #screen-game .table-room-setting-toggle input { width: 22px; height: 22px; accent-color: var(--tp-color-primary); }
html[data-theme] #screen-game .table-room-setting-toggle small { color: var(--tp-color-text-muted); font-size: 12px; font-weight: 500; }
html[data-theme] #screen-game .table-room-setting-toggle.is-unsupported { cursor: not-allowed; opacity: 0.55; }
html[data-theme] #screen-game .table-room-settings__form > p {
    margin: 12px 2px;
    color: var(--tp-color-text-muted);
    font-size: 13px;
    line-height: 1.45;
}
html[data-theme] #screen-game .table-room-settings__form > button[type="submit"] {
    min-height: 50px;
    border: 0;
    border-radius: 16px;
    background: var(--tp-color-primary);
    color: var(--tp-color-primary-ink, #1a1206);
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--tp-color-primary) 80%, transparent);
}
html[data-theme] #screen-game .table-room-settings__form > button[type="submit"]:disabled {
    background: var(--gr-soft-2);
    color: var(--tp-color-text-muted);
    box-shadow: none;
    opacity: 0.7;
}
html[data-theme] #screen-game #table-room-settings-status { font-size: 13px; }

/* ── 4. Watch live ───────────────────────────────────────────────────────── */

html[data-theme] #screen-watch .tp-watch-directory,
html[data-theme] #screen-watch .tp-watch-stage {
    border-color: var(--gr-edge);
}

@media (min-width: 761px) {
    html[data-theme] #screen-watch .tp-watch-directory,
    html[data-theme] #screen-watch .tp-watch-stage {
        border: 1px solid var(--gr-edge);
        border-radius: 24px;
        background: var(--gr-card);
        box-shadow: var(--gr-shadow), inset 0 1px 0 var(--gr-glint);
    }
}

html[data-theme] #screen-watch .tp-watch-heading span,
html[data-theme] #screen-watch .tp-watch-stage__heading > div > span {
    color: var(--tp-color-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* Stage heading: a glass card with the pairing and the pace. */
html[data-theme] #screen-watch .tp-watch-stage__heading {
    padding: 14px 16px;
    border: 1px solid var(--gr-edge);
    border-radius: 20px;
    background: var(--gr-card);
    box-shadow: var(--gr-shadow), inset 0 1px 0 var(--gr-glint);
}
@media (max-width: 760px) {
    html[data-theme] #screen-watch .tp-watch-stage__heading { margin: 0 10px 10px; }
}
html[data-theme] #screen-watch .tp-watch-stage__heading h2 {
    color: var(--tp-color-text);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
html[data-theme] #screen-watch .tp-watch-stage__heading p {
    color: var(--tp-color-text-muted);
    font-size: 13px;
}

/* The list of games. */
html[data-theme] #screen-watch .tp-watch-list { gap: 10px; }
html[data-theme] #screen-watch .tp-watch-game {
    min-height: 68px;
    padding: 12px 44px 12px 16px;
    border: 1px solid var(--gr-edge);
    border-radius: 20px;
    background: var(--gr-card);
    color: var(--tp-color-text);
    box-shadow: var(--gr-shadow), inset 0 1px 0 var(--gr-glint);
    transition: border-color 160ms ease, background-color 160ms ease, transform 100ms ease-out;
}
html[data-theme] #screen-watch .tp-watch-game:hover { border-color: var(--gr-accent-edge); }
html[data-theme] #screen-watch .tp-watch-game:active { transform: scale(0.985); }
html[data-theme] #screen-watch .tp-watch-game strong {
    color: var(--tp-color-text);
    font-size: 16px;
    font-weight: 800;
}
html[data-theme] #screen-watch .tp-watch-game span {
    color: var(--tp-color-text-muted);
    font-size: 13px;
}
html[data-theme] #screen-watch .tp-watch-game::after { color: var(--tp-color-primary); }
html[data-theme] #screen-watch .tp-watch-game.is-active {
    border-color: var(--gr-accent-edge);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--tp-color-primary) 14%, transparent), transparent 70%),
        var(--gr-card);
}
html[data-theme] #screen-watch .tp-watch-game:focus-visible {
    outline: 2px solid var(--tp-color-focus, var(--tp-color-primary));
    outline-offset: 2px;
}
html[data-theme] #screen-watch .tp-watch-list .tp-play-empty {
    border: 1px dashed var(--gr-edge-strong);
    border-radius: 20px;
    background: var(--gr-soft);
}

html[data-theme] #screen-watch #watch-live-status {
    border: 1px solid var(--gr-edge);
    border-radius: 18px;
    background: var(--gr-soft);
    color: var(--tp-color-text-muted);
}

/* The replay viewer lives in Shadow DOM (replay/replay-viewer.js): from the
   outside only its custom properties and the host box can be styled. The host
   becomes a glass card, and the round ◀ ▶ buttons take a glass tone. */
html[data-theme] #screen-watch togyz-replay-viewer {
    --rv-surface-2: color-mix(in srgb, var(--tp-color-text) 10%, var(--tp-color-surface-raised));
    --rv-accent-soft: color-mix(in srgb, var(--tp-color-primary) 26%, var(--tp-color-surface-raised));
    --rv-border: var(--gr-edge);
}
html[data-theme] #screen-watch togyz-replay-viewer:not([hidden]) {
    margin: 0 10px;
    padding: 8px 8px 10px;
    border: 1px solid var(--gr-edge);
    border-radius: 26px;
    background: var(--gr-card);
    box-shadow: var(--gr-shadow), inset 0 1px 0 var(--gr-glint);
}
@media (min-width: 761px) {
    html[data-theme] #screen-watch togyz-replay-viewer:not([hidden]) { margin: 0; }
}

/* ── Light theme touches ─────────────────────────────────────────────────── */

html[data-theme="steppe-light"] body:not(.untimed-game) #screen-game .match-player.is-active .match-clock {
    color: var(--tp-color-primary-ink, #fff) !important;
}
html[data-theme="steppe-light"] #screen-game .table-room-tabs button.is-active {
    background: color-mix(in srgb, var(--tp-color-primary) 16%, #fff);
    box-shadow: inset 0 0 0 1px var(--gr-accent-edge), 0 6px 14px -8px rgba(60, 48, 24, 0.3);
}
html[data-theme="steppe-light"] #screen-game .table-room-settings__form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a6f5c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="steppe-light"] #screen-game.table-room-panel-open .game-history-backdrop:not([hidden]) {
    background: rgba(40, 30, 14, 0.24) !important;
}

/* ── Motion and transparency preferences ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html[data-theme] #screen-game .material-game-bar button,
    html[data-theme] #screen-game .match-player,
    html[data-theme] #screen-game .match-clock,
    html[data-theme] #screen-game .game-tool-button,
    html[data-theme] #screen-game :is(.game-drawer-close, .game-panel-close),
    html[data-theme] #screen-game .table-room-tabs button,
    html[data-theme] #screen-watch .tp-watch-game { transition: none; }
    html[data-theme] #screen-game .material-game-bar button:active,
    html[data-theme] #screen-game .game-tool-button:active,
    html[data-theme] #screen-game :is(.game-drawer-close, .game-panel-close):active,
    html[data-theme] #screen-watch .tp-watch-game:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
    html[data-theme] #screen-game .material-game-bar,
    html[data-theme] #screen-game #game-service-panel.game-side-panel {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--tp-color-surface-raised) !important;
    }
}

/* Replay controls inside the viewer's shadow DOM, reached through its parts
   (replay/replay-viewer.js): round glass buttons and a pill move picker. */
html[data-theme] togyz-replay-viewer::part(controls) {
    gap: 10px;
    align-items: center;
}

html[data-theme] togyz-replay-viewer::part(control) {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tp-color-primary) 16%, var(--tp-color-surface-raised));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--tp-color-primary) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: var(--tp-color-primary);
    cursor: pointer;
    transition: transform 100ms ease-out, opacity 160ms ease;
}

html[data-theme] togyz-replay-viewer::part(control):active { transform: scale(0.94); }
html[data-theme] togyz-replay-viewer::part(control):disabled { opacity: 0.4; cursor: default; }
html[data-theme] togyz-replay-viewer::part(control):focus-visible { outline: 2px solid var(--tp-color-focus, var(--tp-color-primary)); outline-offset: 2px; }

html[data-theme] togyz-replay-viewer::part(jump) {
    min-height: 46px;
    padding: 0 36px 0 16px;
    border: 0;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--tp-color-text) 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tp-color-text) 10%, transparent);
    color: var(--tp-color-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}