/* game-shell.css. The new look of the game pages (Stage 5, chess first, the other games in Stage 6), as in the
   redesign mockup: the board on the left with the setup card laid over it, one panel on the right with tabs
   (Moves, Board, Stats, About), a button bar under the board and "About" below the game. Phones get the same page in
   one column, the setup card over the board as well (the old separate setup and play screens are switched off).
   It sits on top of each game's own stylesheet, which is still loaded. Every id and script of the game stays.
   <main class="gs-shell" data-game="chess" data-game-state="setup|playing|over" [data-setup-open]>, the state is set
   by /assets/game-shell.js from the game's own buttons, move list and result card.
   In a tournament frame (html.tournament-embed) only the board and the moves are shown, sized by the game's script. */

/* ── Page ───────────────────────────────────────────────────────────────────── */
.sg-page .page-shell { width: min(calc(100% - 2 * var(--space-4)), 1760px); padding-top: var(--space-4); }
.gs-anchor { position: relative; top: calc(-1 * var(--header-height)); }
.gs-shell.game-layout { padding-top: 0; }
.gs-kicker { color: var(--accent-text); font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* The board, as large as the screen allows: the screen height less the header and the two player strips
   (the game's buttons are in the panel on the right). */
/* On a wide screen the board column is as wide as the board, and the board and the panel are centered together. */
.gs-shell { --gs-board: min(calc(100vw - 400px), calc(100svh - var(--header-height) - 130px), 940px); }

.gs-play {
    display: grid;
    grid-template-columns: auto minmax(300px, 340px);
    justify-content: center;
    gap: var(--space-6);
    align-items: start;
}
/* Wide screens: the two player strips stand to the left of the board (top strip at the top, bottom strip at the bottom),
   so the board gets the full height of the screen. */
@media (min-width: 981px) {
    .gs-shell { --gs-board: min(calc(100vw - 600px), calc(100svh - var(--header-height) - 20px), 1100px); }
    /* The room for the board is measured on the game area itself, so the panel never covers the board at any zoom. */
    @supports (width: 1cqw) {
        .gs-play { container-type: inline-size; }
        .gs-shell { --gs-board: min(calc(100cqw - 560px), calc(100svh - var(--header-height) - 20px), 1100px); }
    }
    html:not(.tournament-embed) .gs-board-col { grid-template-columns: 170px auto; column-gap: var(--space-4); align-items: stretch; }
    html:not(.tournament-embed) .gs-board-col > .gs-board-wrap { grid-column: 2; grid-row: 1; }
    html:not(.tournament-embed) .gs-board-col > .gs-strip { grid-column: 1; grid-row: 1; width: 170px; flex-direction: column; align-items: flex-start; align-self: start; gap: var(--space-2); }
    html:not(.tournament-embed) .gs-board-col > .gs-strip:last-of-type { align-self: end; flex-direction: column-reverse; }
    html:not(.tournament-embed) .gs-strip .text-box { flex: none; width: 100% !important; padding: 0; }
}
@media (max-width: 980px) {
    /* A capture adds a piece to the strip. The strip keeps one fixed height and the pieces share one row (they
       shrink side by side when there are many), so the board never jumps up or down when something is taken. */
    html:not(.tournament-embed) .gs-strip { height: 48px; min-height: 48px; overflow: hidden; }
    html:not(.tournament-embed) .gs-strip .text-box { display: flex; flex-wrap: nowrap; align-items: center; height: 40px; min-height: 40px; min-width: 0; line-height: 0; }
    html:not(.tournament-embed) .gs-strip .text-box img { flex: 0 1 30px; min-width: 10px; width: 30px; height: 30px; object-fit: contain; }
    .gs-play { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .gs-shell { --gs-board: min(calc(100vw - 2 * var(--space-4)), 640px); }
}

/* ── Board column ───────────────────────────────────────────────────────────── */
.gs-board-col { display: grid; justify-items: center; gap: var(--space-2); min-width: 0; }
.gs-board-wrap { position: relative; display: grid; grid-template-areas: "stack"; justify-items: center; align-items: start; width: 100%; perspective: 1400px; }
.gs-board-wrap > * { grid-area: stack; }
html:not(.tournament-embed) .gs-shell #chess-board {
    width: var(--gs-board) !important;
    height: auto !important;
    max-width: none;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
}
/* The squares are whole pixels (the content width is a multiple of 8), otherwise the turned board shows thin gaps. */
@supports (width: round(down, 100px, 8px)) {
    html:not(.tournament-embed) .gs-shell #chess-board { width: calc(round(down, var(--gs-board) - 20px, 8px) + 20px) !important; }
}
.gs-shell #chess-board {
    border: 10px solid color-mix(in srgb, var(--sq-dark) 38%, #140d09);
    border-radius: 14px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
    transform: rotateX(var(--gs-tilt, 0deg)) scale(var(--gs-scale, 1));
    transform-origin: 50% 0;
    transition: transform .9s cubic-bezier(.2, .8, .2, 1), filter .7s;
}
/* The game turns the board for the player with Black (class flip-board, a 180 degree turn), keep that turn. */
.gs-shell #chess-board.flip-board { transform: rotateX(var(--gs-tilt, 0deg)) scale(var(--gs-scale, 1)) rotate(180deg); transform-origin: 50% 50%; }
/* Before a game the board leans back and dims under the setup card. */
.gs-shell[data-game-state="setup"] #chess-board,
.gs-shell[data-setup-open] #chess-board { filter: saturate(.7) brightness(.6); }

/* Highlights in the colors of the site */
.gs-shell .clicked { background-color: color-mix(in srgb, var(--accent) 50%, var(--sq-light)) !important; }
.gs-shell .highlighted::before { inset: 36%; border-radius: 50%; background: color-mix(in srgb, var(--accent-2) 70%, transparent); box-shadow: none; }
.gs-shell .kingCheck { background-color: color-mix(in srgb, var(--danger) 80%, #300) !important; }
.gs-shell .light .chess-coord { color: color-mix(in srgb, var(--sq-dark) 60%, #000); font-weight: 700; }
.gs-shell .dark .chess-coord { color: #fff; font-weight: 700; text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .7); }

/* ── Setup card over the board ──────────────────────────────────────────────── */
.gs-shell .gs-setup {
    position: relative;
    top: auto;
    z-index: 10;
    display: grid;
    gap: var(--space-3);
    width: min(calc(100% - 24px), 470px);
    max-height: calc(100svh - var(--header-height) - 72px);
    margin: 12px 0 0;
    padding: var(--space-4) var(--space-5) var(--space-5);
    overflow-y: auto;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
    animation: gs-card-in .45s cubic-bezier(.2, .8, .2, 1);
}
@keyframes gs-card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.gs-shell:not([data-game-state="setup"]):not([data-setup-open]) .gs-setup { display: none !important; }
.gs-shell[data-setup-closed]:not([data-setup-open]) .gs-setup { display: none !important; }
/* With the card put away before the first game the board is not dimmed and the New game button is there to bring it back. */
.gs-shell[data-setup-closed][data-game-state="setup"] #chess-board,
.gs-shell[data-setup-closed][data-game-state="setup"] .gs-bai { filter: none !important; }
.gs-shell[data-setup-closed][data-game-state="setup"] .gs-board-col { min-height: 0 !important; }
.gs-shell[data-setup-closed][data-game-state="setup"] .gs-ctlbar > :not(.gs-new-game):not(.gs-status) { display: none !important; }
.gs-shell .gs-setup { overflow-x: hidden; }
.gs-shell .gs-new-game-top, html.tournament-embed .gs-new-game-top { display: none; }
html.tournament-embed .gs-shell .gs-new-game-top { display: none !important; }
@media (max-width: 980px) {
    .gs-shell[data-game-state="setup"][data-setup-closed]:not([data-setup-open]) .gs-new-game-top,
    .gs-shell[data-game-state="over"]:not([data-setup-open]) .gs-new-game-top { display: block; width: 100%; margin: 0 0 var(--space-2); }
}
/* The difficulty tips wrap inside the card, so the card has nothing wider than itself (no sideways scrollbar). */
.gs-shell .gs-setup .diff-tooltip { width: max-content; max-width: min(220px, 60vw); white-space: normal; }
.gs-shell .gs-setup .setup-card-header { margin: 0; }
.gs-shell .gs-setup .setup-card-header .eyebrow { margin-bottom: 4px; color: var(--accent-text); letter-spacing: .14em; }
.gs-shell .gs-setup .setup-card-header h2 { margin: 0 0 4px; font-size: 1.35rem; }
.gs-shell .gs-setup .setup-card-header p { margin: 0; color: var(--muted); font-size: .9rem; }
@media (max-height: 900px), (max-width: 820px) { .gs-shell .gs-setup .setup-card-header p { display: none; } }
.gs-shell .gs-setup #game-controls { display: grid; gap: var(--space-3); }
/* White | VS | Black side by side, so the card fits on the board */
.gs-shell #local-game-options { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.gs-shell #local-game-options .player-vs-divider { flex-direction: column; align-self: stretch; margin: 0; }
.gs-shell #local-game-options .player-vs-divider::before,
.gs-shell #local-game-options .player-vs-divider::after { width: 1px; height: auto; }
.gs-shell .diff-segmented { gap: 3px; }
.gs-shell .diff-segmented .diff-opt-wrap { flex: 1 1 0; min-width: 0; }
.gs-shell .diff-segmented .segment-button { width: 100%; min-width: 0; padding-inline: 0; }
.gs-shell #local-game-options .segmented-control .segment-button { min-width: 0; padding-inline: 4px; font-size: .88rem; }
.gs-shell .setup-card-header a { color: var(--accent-text) !important; opacity: 1 !important; }
.gs-setup-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; color: var(--text); font-size: 1.3rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.gs-shell[data-setup-open] .gs-setup-close { display: grid; place-items: center; }
.gs-shell .segmented-control { gap: 4px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.gs-shell .segment-button { color: var(--muted); border-radius: 9px; }
.gs-shell .segment-button:hover { color: var(--text); background: var(--surface-2); }
.gs-shell .segment-button.is-active { color: var(--text); background: var(--surface-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .25), inset 0 0 0 1px var(--accent); }
.gs-shell .segment-button.is-locked { opacity: 1; outline: 1px dashed var(--line); outline-offset: -3px; }
.gs-shell .seg-sublabel { color: var(--muted); opacity: 1; }
.gs-shell .segment-button.is-active .seg-sublabel { color: var(--text); }
.gs-shell .player-vs-divider { color: var(--muted); }
.gs-shell .compact-action-row { grid-template-columns: 1fr; }
.gs-shell #start-button { width: 100%; min-height: 52px; font-size: 1.02rem; }

/* ── Player strips (built by game-shell.js around #above-board and #below-board) ── */
.gs-strip { display: flex; align-items: center; gap: var(--space-3); width: var(--gs-board); min-height: 44px; }
html.tournament-embed .gs-strip { width: auto; }
.gs-strip .text-box {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none;
    min-height: 40px;
    margin: 0;
    padding: 4px 10px;
    color: var(--muted);
    font-family: var(--font-ui);
    background: transparent;
    border: 0;
    overflow: hidden;
}
.gs-player { display: flex; flex: none; align-items: center; gap: 10px; min-width: 0; }
.gs-avatar { display: grid; flex: none; place-items: center; width: 38px; height: 38px; color: var(--text); font-weight: 800; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.gs-avatar.is-ai { color: #0b0b18; background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--action), var(--accent)); border: 0; }
.gs-avatar.is-ai.is-thinking { animation: gs-spin 2.4s linear infinite; }
@keyframes gs-spin { to { transform: rotate(360deg); } }
.gs-player-copy { display: grid; min-width: 0; line-height: 1.2; }
.gs-player-copy b { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; font-size: .95rem; }
.gs-player-copy b .gs-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-player-copy small { color: var(--muted); font-size: .78rem; }
.gs-elo { margin-left: 0; padding: 1px 7px; color: var(--accent-text); font-size: .78rem; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.gs-dots { display: none; gap: 3px; margin-left: 6px; vertical-align: middle; }
.gs-player.is-thinking .gs-dots { display: inline-flex; }
.gs-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-text); animation: gs-bob 1s infinite; }
.gs-dots i:nth-child(2) { animation-delay: .15s; }
.gs-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes gs-bob { 50% { transform: translateY(-4px); } }
.gs-shell .ai-live-badge { display: none !important; }

/* ── The game's buttons, at the top of the panel ────────────────────────────── */
.gs-ctlbar { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; }
.gs-ctlbar > * { flex: 1 1 120px; }
.gs-ctlbar button { width: 100%; min-height: 44px; }
.gs-ctlbar .smg-save-bar { display: contents; }
.gs-status { flex-basis: 100%; margin: 0; padding: 8px 12px; color: var(--text); font-size: var(--text-sm); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.gs-status[hidden] { display: none; }
/* The small "+3" of the games that can say who is ahead */
.gs-lead { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 800; line-height: 1.5; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); vertical-align: middle; white-space: nowrap; }
/* Analyze Game (chess). Its own teal and blue so it does not look like the play or download buttons. */
.sg-btn-analyze { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; font: inherit; font-size: var(--text-sm); font-weight: 800; color: #04161c; background: linear-gradient(135deg, #2dd4bf, #5b9cff); border: 0; border-radius: 999px; cursor: pointer; transition: transform 150ms var(--ease), filter 150ms var(--ease); }
.sg-btn-analyze:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.sg-btn-analyze:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.sg-btn-analyze:disabled { opacity: .4; cursor: default; }
.sg-btn-analyze .sg-analyze-icon { flex: none; }
.gs-ctlbar > .sg-btn-analyze { flex: 1 1 100%; width: 100%; }
.gs-shell:not([data-game-state="over"]) .gs-ctlbar > #smg-analyze-btn { display: none; }
.result-popup-actions:has(> .sg-btn-analyze) { display: grid !important; grid-template-columns: auto auto; justify-content: center; width: fit-content; margin-inline: auto; }
.result-popup-actions > .sg-btn-analyze { grid-column: 1 / -1; width: auto; min-height: 42px; padding: 0 14px; font-size: .9rem; }
/* Captured black pieces vanish on the dark themes. A light halo keeps their shape readable. */
[data-theme]:not([data-theme="light"]) .gs-strip .text-box img[src*="black-"] { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255,255,255,.85)); }
/* Download Game in the look of the other buttons */
.gs-shell .smg-replay-dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 700; }
/* The result card writes its button with a film emoji, the new look uses a download icon. */
.gs-shell .smg-replay-dl-btn > span:first-child { display: none; }
.gs-shell #myPopup .smg-replay-dl-btn::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v8m0 0L4.5 6.5M8 10l3.5-3.5M2.5 12.5v1h11v-1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v8m0 0L4.5 6.5M8 10l3.5-3.5M2.5 12.5v1h11v-1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gs-shell .smg-replay-dl-btn.smg-replay-dl-btn--locked { opacity: .8; }
.gs-shell .smg-replay-dl-btn.smg-replay-dl-btn--locked::after { color: var(--text); background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.gs-shell #smg-save-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; font: inherit; font-size: var(--text-sm); font-weight: 700; }
.gs-shell #smg-save-btn svg { flex: none; }
.gs-shell #smg-save-btn:disabled { opacity: .45; }

.gs-shell[data-game-state="setup"]:not([data-setup-closed]) .gs-ctlbar { display: none; }
.gs-shell[data-game-state="playing"] .gs-new-game,
.gs-shell[data-game-state="playing"] #smg-save-btn { display: none; }
/* After a game: a new game, or save the one just played. Resign has nothing left to do (a second press counted the game twice). */
.gs-shell[data-game-state="over"] #abort-button { display: none !important; }
.gs-shell #abort-button { color: var(--danger); }

/* ── Panel on the right ─────────────────────────────────────────────────────── */
.gs-side {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    display: grid;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
}
@media (max-width: 980px) { .gs-side { position: static; } }
.gs-side-head { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-4) 0; }
.gs-side-head h1 { margin: 0; font-size: 1.35rem; letter-spacing: -0.01em; }
.gs-side-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; font-size: var(--text-sm); }
.gs-side-links a { color: var(--accent-text); text-decoration: none; }
.gs-side-links a:hover { text-decoration: underline; }
.gs-shell .mini-stats-strip { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; }
.gs-shell .mini-stat { display: flex; align-items: baseline; gap: 5px; padding: 5px 9px; white-space: nowrap; color: var(--muted); font-size: var(--text-xs); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.gs-shell .mini-stat strong { margin: 0; color: var(--text); font-size: .95rem; }

.gs-tabs { display: flex; gap: 2px; margin: var(--space-3) 0 0; padding: 0 var(--space-3); border-bottom: 1px solid var(--line); }
.gs-tabs .tab-button {
    min-height: 44px;
    padding: 0 10px;
    color: var(--muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    cursor: pointer;
}
.gs-tabs .tab-button.is-active { color: var(--text); border-bottom-color: var(--action); }
.gs-side .panel-section { display: none; padding: var(--space-4); }
.gs-side .panel-section.is-active { display: block; }
.gs-side #panel-moves.is-active { display: grid; gap: var(--space-3); }
.gs-side .move-history-panel { min-height: 0; background: none; border: 0; border-radius: 0; overflow: visible; }
.gs-shell .move-history-header { padding: 0 !important; background: none; border: 0; }
.gs-shell .move-history-header .eyebrow { color: var(--accent-text); }
.gs-shell .move-history-pill { color: var(--good); background: none; border: 1px solid var(--line); }
.gs-shell #info-box { max-height: min(560px, calc(100svh - var(--header-height) - 300px)); min-height: 120px; background: none; border: 0; }
.gs-shell .move-history-row.is-latest { background: var(--surface-2); }
.gs-shell .move-cell { color: var(--text); background: var(--bg); border-color: var(--line); }
.gs-shell .move-cell.is-active { color: var(--action) !important; border-color: var(--action) !important; }
.gs-shell:not([data-game-state="playing"]) .ai-thinking-panel { display: none !important; }
.gs-shell .ai-thinking-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.gs-shell .ai-thinking-progress-bar { background: var(--action); }
.gs-side .panel-card, .gs-side .guide-section { margin-bottom: var(--space-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.gs-side .game-intro-text, .gs-side p { color: var(--text); }
.gs-side a { color: var(--accent-text) !important; }
.gs-about-more { margin-top: var(--space-4); }

/* ── About the game, under it ───────────────────────────────────────────────── */
.gs-below { display: grid; gap: var(--space-4); max-width: 1100px; margin: var(--space-7) auto 0; padding: 0 var(--space-4); }
.gs-below h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -0.03em; }
.gs-below > p { max-width: 68ch; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.gs-below > p a { color: var(--accent-text); }
.gs-learn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 760px) { .gs-learn { grid-template-columns: minmax(0, 1fr); } }
.gs-lcard { display: grid; gap: 6px; padding: var(--space-5); color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; transition: transform .2s, border-color .2s; }
.gs-lcard:hover { border-color: var(--accent); transform: translateY(-3px); }
.gs-lcard h3 { margin: 0; font-size: 1.1rem; }
.gs-lcard p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* ── Phones: one column, no separate setup and play screens ─────────────────── */
@media (max-width: 820px) {
    body.sg-page .sg-header { position: static; }
    .sg-page .page-shell { width: min(calc(100% - 16px), 1440px); padding-top: var(--space-2); }
    .gs-shell { --gs-board: calc(100vw - 16px); }
    .mobile-screen-toggle { display: none !important; }
    body.mobile-pre-game .gs-board-col, body.mobile-in-game .gs-board-col,
    body.mobile-pre-game .gs-side, body.mobile-in-game .gs-side { display: grid !important; }
    body.mobile-pre-game .gs-setup, body.mobile-in-game .gs-setup { display: grid !important; }
    /* The card sits over the board from its top, the page grows under it when it is taller than the board. */
    .gs-shell .gs-setup { width: calc(100% - 8px); max-height: none; margin-top: 4px; padding: var(--space-3) var(--space-3) var(--space-4); overflow: visible; }
    .gs-shell #local-game-options { gap: var(--space-2); }
    .gs-shell #local-game-options .segmented-control .segment-button { padding-inline: 2px; font-size: .8rem; }
    .gs-shell .gs-setup .game-mode-hint { display: none; }
    .gs-ctlbar > * { flex-basis: 100px; }
    /* the games' own "setup screen" and "play screen" rules hide the board before a game, the board stays under the card now */
    body.mobile-pre-game .gs-bai, body.mobile-in-game .gs-bai { display: block !important; }
    body.mobile-pre-game .gs-bai .board-column, body.mobile-in-game .gs-bai .board-column { display: grid !important; }
}

/* ── The other games (Stage 6) ──────────────────────────────────────────────── */
/* Same page as chess: the game's own board column on the left (its sizing stays in the game's stylesheet), the panel on the right,
   and the setup card laid over the top of the board before a game and after "New game". */
.gs-shell:not([data-game="chess"]) .gs-play { grid-template-columns: auto minmax(300px, 340px); justify-content: center; }
@media (max-width: 980px) { .gs-shell:not([data-game="chess"]) .gs-play { grid-template-columns: minmax(0, 1fr); } }
.gs-shell:not([data-game="chess"]) .gs-board-col { position: relative; display: block; min-width: 0; }
.gs-shell .gs-bai { display: block; padding: 0; background: none; border: 0; box-shadow: none; transition: filter .6s; }
.gs-shell:not([data-game="chess"]) .gs-setup {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    width: min(calc(100% - 24px), 470px);
    max-height: calc(100% - 16px);
    margin: 0 auto;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5) var(--space-5);
}
.gs-shell:not([data-game="chess"])[data-game-state="setup"] .gs-bai,
.gs-shell:not([data-game="chess"])[data-setup-open] .gs-bai { filter: saturate(.7) brightness(.6); pointer-events: none; }
.gs-shell:not([data-game="chess"])[data-game-state="setup"] .gs-board-col,
.gs-shell:not([data-game="chess"])[data-setup-open] .gs-board-col { min-height: min(680px, calc(100svh - var(--header-height) - 32px)); }
/* The board column is as wide as the screen height allows. --gs-a and --gs-b are measured per game: height = a * width + b
   (b is what sits around the board, the status line, buttons and text under it). */
.gs-shell:not([data-game="chess"]) .gs-bai {
    --gs-w: calc((100svh - var(--header-height) - 32px - var(--gs-b, 0px)) / var(--gs-a, 1));
    width: 100%;
}
.gs-shell:not([data-game="chess"]) .gs-board-col {
    --gs-w: calc((100svh - var(--header-height) - 32px - var(--gs-b, 0px)) / var(--gs-a, 1));
    width: min(max(var(--gs-w), var(--gs-min, 300px)), 1000px, calc(100cqw - 360px));
}
.gs-shell:not([data-game="chess"]) .gs-play { container-type: inline-size; }
.gs-shell[data-game="connect4"] { --gs-a: .855; --gs-b: 173px; }
.gs-shell[data-game="checkers"] { --gs-a: 1; --gs-b: 135px; --gs-min: 420px; }
.gs-shell[data-game="walls"] { --gs-a: 1; --gs-b: 161px; }
.gs-shell[data-game="puzzle"] { --gs-a: 1; --gs-b: 150px; --gs-min: 480px; --gs-board: 100%; }
.gs-puzzle-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3); max-width: 1100px; margin: 0 auto var(--space-3); }
.gs-puzzle-head h1 { margin: 2px 0 0; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.02em; }
.gs-puzzle-head .eyebrow { color: var(--accent-text); }
.gs-shell[data-game="puzzle"] .puzzle-play-message { max-width: 1100px; margin: 0 auto var(--space-3); }
.gs-shell[data-game="puzzle"] .gs-bai #chess-board { max-width: none; }
.gs-shell .gs-side-head .puzzle-menu-info { display: grid; gap: var(--space-2); }
.gs-shell[data-game="dominion"] { --gs-a: .87; --gs-b: 164px; --gs-min: 520px; }
.gs-shell[data-game="backgammon"] { --gs-a: .445; --gs-b: 300px; --gs-min: 760px; }
.gs-shell .board-status-bar { min-height: 52px; margin-bottom: var(--space-2); }
.gs-shell:not([data-game="chess"]) .gs-bai .text-box,
.gs-shell:not([data-game="chess"]) .gs-bai .connect4-stage,
.gs-shell:not([data-game="chess"]) .gs-bai .board-status-bar,
.gs-shell:not([data-game="chess"]) .gs-bai .checkers-stage,
.gs-shell:not([data-game="chess"]) .gs-bai .walls-board-wrap { width: 100%; max-width: none; }
@media (max-width: 980px) { .gs-shell:not([data-game="chess"]) .gs-board-col { width: 100%; } }
.gs-shell .board-status-bar { flex-wrap: wrap; }
.gs-shell #local-options > .compact-options-stack { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.gs-shell #local-options .player-vs-divider { flex-direction: column; align-self: stretch; margin: 0; }
.gs-shell #local-options .player-vs-divider::before,
.gs-shell #local-options .player-vs-divider::after { width: 1px; height: auto; }
.gs-ctlbar [hidden] { display: none !important; }
.gs-shell[data-game-state="over"] .gs-ctlbar > .ghost-button { display: none !important; }
.gs-shell[data-game-state="setup"] .gs-side .move-history-panel.is-active { display: grid; }
.gs-shell .gs-side .panel-page { padding: var(--space-4); background: none; border: 0; }
.gs-shell .gs-side .panel-page:not(.is-active) { display: none; }
@media (max-width: 820px) {
    .gs-shell:not([data-game="chess"]) .gs-setup { width: calc(100% - 8px); top: 4px; max-height: none; overflow: visible; padding: var(--space-3) var(--space-3) var(--space-4); }
    .gs-shell #local-options > .compact-options-stack { gap: var(--space-2); }
}

/* ── Result card ────────────────────────────────────────────────────────────── */
.sg-page #myPopup { background: var(--overlay); }
.sg-page #myPopup .result-popup-card {
    position: relative;
    overflow: hidden;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
    animation: gs-pop .5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes gs-pop { from { transform: scale(.88) translateY(18px); opacity: 0; } }
.sg-page #myPopup .result-popup-card h2 { font-family: var(--font-display); }
.sg-page #myPopup .result-badge { color: var(--accent-text); background: var(--surface-2); }
.sg-page #myPopup .result-nav-item { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.gs-confetti { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.sg-page #myPopup .result-popup-card > :not(.gs-confetti):not(.result-popup-x-btn):not(.result-share-btn) { position: relative; z-index: 1; }
.sg-page #myPopup .result-popup-card > .result-popup-x-btn,
.sg-page #myPopup .result-popup-card > .result-share-btn { z-index: 2; }

/* ── Tournament frame: the board and the moves only ─────────────────────────── */
html.tournament-embed .gs-play,
html.tournament-embed .gs-shell:not([data-game="chess"]) .gs-play { grid-template-columns: minmax(0, 1fr) 300px; justify-content: stretch; gap: var(--space-4); }
html.tournament-embed .gs-side { position: static; }
html.tournament-embed .gs-side .panel-section { display: none !important; }
html.tournament-embed .gs-side #panel-moves { display: grid !important; }
html.tournament-embed #chess-board { --gs-tilt: 0deg !important; --gs-scale: 1 !important; filter: none !important; }
@media (max-width: 760px) { html.tournament-embed .gs-play, html.tournament-embed .gs-shell:not([data-game="chess"]) .gs-play { grid-template-columns: minmax(0, 1fr); } }

html, body.sg-page { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
    .gs-avatar.is-ai.is-thinking, .gs-dots i, .sg-page #myPopup .result-popup-card { animation: none; }
    .gs-shell #chess-board, .gs-shell .gs-setup { transition: none; }
}

/* Connect 4 column buttons while no game is on */
.gs-shell .connect4-column-button.is-disabled, .gs-shell .connect4-column-button:disabled { color: var(--text); opacity: 1; }

/* In a tournament frame the game starts by itself, nothing is dimmed or locked and the board column takes what the frame gives. */
html.tournament-embed .gs-shell .gs-bai { filter: none !important; pointer-events: auto !important; }
html.tournament-embed .gs-shell:not([data-game="chess"]) .gs-board-col { width: auto !important; min-height: 0 !important; }

.gs-shell #smg-save-btn:disabled { opacity: 1; color: var(--muted); border-style: dashed; }
.gs-shell .status-share-btn, .gs-shell .status-share-btn span { color: var(--accent-text); }

/* The puzzles list page: the information that used to be in the game menu sits under the list. */
.pz-info { position: static; max-width: 980px; margin: var(--space-6) auto 0; }
.pz-info .panel-section { padding: var(--space-5); }

/* The tournament puzzle board: the same board frame as the other pages, as large as the screen height allows. */
.gs-shell[data-game="tpuzzle"] { --gs-board: min(100%, calc(100svh - var(--header-height) - 190px)); }
.gs-shell[data-game="tpuzzle"] #chess-board { margin-inline: auto; }

/* ── Rating points, streak and new badges on the result card (/assets/progress.js) ── */
.sg-progress-gain { display: grid; gap: 4px; margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); text-align: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sg-progress-gain p { margin: 0; }
.sg-progress-points { color: var(--accent-text); font-size: 1.15rem; font-weight: 800; }
.sg-progress-rank, .sg-progress-streak { color: var(--muted); font-size: var(--text-sm); }
.sg-progress-streak { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.sg-progress-elo { color: var(--text); font-size: 1.05rem; }
.sg-progress-elo small { color: var(--muted); font-size: var(--text-sm); }
.sg-elo-change { font-weight: 800; }
.sg-elo-change.is-up { color: #3ecf8e; }
.sg-elo-change.is-down { color: #ff7b7b; }

/* The same account plays in another window */
.sg-elsewhere { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: var(--space-4); background: var(--overlay); }
.sg-elsewhere[hidden] { display: none; }
.sg-elsewhere-card { display: grid; gap: var(--space-3); max-width: 420px; padding: var(--space-5); text-align: center; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.sg-elsewhere-card h2 { margin: 0; font-size: 1.3rem; }
.sg-elsewhere-card p { margin: 0; color: var(--muted); }

/* ── The play bar (Quick Start, Play a Friend, Setup) ── */
.gs-playbar { display: none; gap: var(--space-2); }
.gs-playbar .sg-btn-quick { flex: 1 1 100%; min-height: 52px; font-size: 1.05rem; }
.gs-playbar .sg-btn-friend, .gs-playbar .sg-btn-setup { flex: 1 1 0; }
.gs-playbar.is-side { flex-wrap: wrap; margin: var(--space-3) var(--space-4) 0; }
.gs-playbar.is-top { flex-wrap: wrap; width: 100%; margin: 0 0 var(--space-2); }
.gs-shell[data-game-state="setup"][data-setup-closed]:not([data-setup-open]) .gs-playbar.is-side,
.gs-shell[data-game-state="over"]:not([data-setup-open]) .gs-playbar.is-side { display: flex; }
@media (max-width: 980px) {
    .gs-playbar.is-side { display: none !important; }
    .gs-shell[data-game-state="setup"][data-setup-closed]:not([data-setup-open]) .gs-playbar.is-top,
    .gs-shell[data-game-state="over"]:not([data-setup-open]) .gs-playbar.is-top { display: flex; }
}
html.tournament-embed .gs-playbar { display: none !important; }
/* the old single New game buttons are replaced by the play bar */
.gs-shell .gs-ctlbar .gs-new-game, .gs-shell .gs-new-game-top { display: none !important; }
.gs-shell[data-game-state="setup"][data-setup-closed] .gs-ctlbar { display: none; }

/* ── The line on the result card after a game against the AI ── */
.gs-next-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.gs-next-text { flex: 1 1 100%; margin: 0; color: var(--text); font-weight: 700; text-align: center; }
.gs-next-row .sg-btn-quick, .gs-next-row .sg-btn-setup { min-height: 42px; }

/* ── What is being played, shown while a game is on (where the play bar was) ── */
.gs-gameinfo { display: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); }
.gs-chip { display: inline-flex; align-items: center; min-height: 38px; max-width: 100%; padding: 0 var(--space-4); overflow: hidden; font-size: var(--text-sm); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; border: 2px solid transparent; border-radius: 999px; cursor: default; }
.gs-chip-mode { color: #ffb02e; background: color-mix(in srgb, #ffb02e 16%, transparent); border-color: #ffb02e; }
.gs-chip-player { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.gs-chip-player[data-side="white"], .gs-chip-player[data-side="p1"] { color: #1a1a2e; background: #f3f4ff; border-color: #f3f4ff; }
.gs-chip-player[data-side="black"], .gs-chip-player[data-side="p2"] { color: #f3f4ff; background: #20233a; border-color: #5b6190; }
.gs-chip-player[data-side="red"] { color: #fff; background: #e5484d; border-color: #e5484d; }
.gs-chip-player[data-side="yellow"] { color: #2a2000; background: #ffd23f; border-color: #ffd23f; }
.gs-chip-player[data-side="green"] { color: #05241a; background: #3fd9a0; border-color: #3fd9a0; }
.gs-chip-player[data-side="purple"] { color: #fff; background: #8b5cf6; border-color: #8b5cf6; }
.gs-gameinfo.is-side { margin: var(--space-3) var(--space-4) 0; }
.gs-gameinfo.is-top { width: 100%; margin: 0 0 var(--space-2); }
.gs-shell[data-game-state="playing"] .gs-gameinfo.is-side { display: flex; }
@media (max-width: 980px) {
    .gs-gameinfo.is-side { display: none !important; }
    .gs-shell[data-game-state="playing"] .gs-gameinfo.is-top { display: flex; }
}
html.tournament-embed .gs-gameinfo { display: none !important; }

/* ── The Vs AI part of the setup card: your color and the AI level ── */
.gs-shell [data-gs-legacy] > :not(.gs-local-simple) { display: none !important; }
.gs-shell .gs-local-simple { display: grid; grid-column: 1 / -1; gap: var(--space-3); width: 100%; min-width: 0; }
.gs-shell .game-mode-hint { display: none !important; }
.gs-local-simple .gs-level-row { display: flex; align-items: center; gap: var(--space-3); }
.gs-local-simple .diff-segmented { display: flex; flex: 1 1 auto; gap: 4px; min-width: 0; }
.gs-local-simple .diff-opt-wrap { position: relative; flex: 1 1 0; min-width: 0; }
.gs-local-simple .diff-opt-wrap .segment-button { width: 100%; }
.gs-local-simple .gs-zero { flex: 0 0 auto; }
.gs-local-simple .gs-zero .segment-button { min-width: 38px; padding-inline: 10px; font-size: .8rem; opacity: .85; }
.gs-local-simple .segment-button.is-locked { opacity: .45; cursor: not-allowed; }
.gs-local-simple .diff-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 30; width: max-content; max-width: 220px; padding: 8px 12px; color: var(--text); font-size: .76rem; line-height: 1.45; text-align: left; white-space: normal; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); opacity: 0; transform: translateX(-50%); transition: opacity .15s; }
.gs-local-simple .diff-tooltip:empty { display: none; }
.gs-local-simple .diff-opt-wrap:hover .diff-tooltip, .gs-local-simple .diff-opt-wrap:focus-within .diff-tooltip { opacity: 1; }
.gs-local-simple .gs-zero .diff-tooltip { left: 0; transform: none; }
.gs-local-simple .diff-opt-wrap:last-child .diff-tooltip { left: auto; right: 0; transform: none; }

/* centered, and the color buttons wear the real color when chosen */
.gs-local-simple .field-group { justify-items: center; text-align: center; }
.gs-local-simple .field-group > label { display: block; width: 100%; text-align: center; }
.gs-local-simple .gs-level-row { justify-content: center; width: 100%; max-width: 360px; }
.gs-local-simple .gs-hero-seg { width: min(100%, 300px); margin-inline: auto; }
.gs-local-simple .gs-hero-seg .segment-button { background: transparent; box-shadow: none; }
.gs-local-simple .gs-hero-seg .segment-button.is-active { border-color: transparent; }
.gs-local-simple .gs-hero-seg .segment-button.is-active[data-gs-hero="white"], .gs-local-simple .gs-hero-seg .segment-button.is-active[data-gs-hero="p1"] { color: #1a1a2e; background: #f3f4ff; }
.gs-local-simple .gs-hero-seg .segment-button.is-active[data-gs-hero="black"], .gs-local-simple .gs-hero-seg .segment-button.is-active[data-gs-hero="p2"] { color: #f3f4ff; background: #20233a; border-color: #5b6190; }
.gs-local-simple .gs-hero-seg .segment-button.is-active[data-gs-hero="red"] { color: #fff; background: #e5484d; }
.gs-local-simple .gs-hero-seg .segment-button.is-active[data-gs-hero="yellow"] { color: #2a2000; background: #ffd23f; }
.gs-local-simple .gs-hero-seg .segment-button.is-active[data-gs-hero="green"] { color: #05241a; background: #3fd9a0; }
.gs-local-simple .gs-hero-seg .segment-button.is-active[data-gs-hero="purple"] { color: #fff; background: #8b5cf6; }
.gs-shell #join-game-button:disabled, .gs-shell #join-room:disabled { opacity: .45; cursor: not-allowed; }

/* Vs. Friend: the color or side you create the game with wears its real color when chosen, like on the Vs AI side */
.gs-setup [data-sync-select="creator-color"] .segment-button, .gs-setup [data-sync-select="creator-side"] .segment-button, .gs-setup #remote-side .segment-button { background: transparent; box-shadow: none; }
.gs-setup [data-sync-select] .segment-button.is-active[data-value="white"], .gs-setup [data-sync-select="creator-side"] .segment-button.is-active[data-value="p1"] { color: #1a1a2e; background: #f3f4ff; border-color: transparent; }
.gs-setup [data-sync-select] .segment-button.is-active[data-value="black"], .gs-setup [data-sync-select="creator-side"] .segment-button.is-active[data-value="p2"] { color: #f3f4ff; background: #20233a; border-color: #5b6190; }
.gs-setup [data-sync-select="creator-color"] .segment-button.is-active[data-value="red"] { color: #fff; background: #e5484d; border-color: transparent; }
.gs-setup [data-sync-select="creator-color"] .segment-button.is-active[data-value="yellow"] { color: #2a2000; background: #ffd23f; border-color: transparent; }
.gs-setup #remote-side .segment-button.is-active[data-side="green"] { color: #05241a; background: #3fd9a0; border-color: transparent; }
.gs-setup #remote-side .segment-button.is-active[data-side="purple"] { color: #fff; background: #8b5cf6; border-color: transparent; }

/* A small divider and a gap between 0 (two players on this screen) and the AI levels 1 to 5, a different mode */
.gs-local-simple .gs-level-row { gap: var(--space-4); }
.gs-local-simple .gs-zero { position: relative; margin-right: var(--space-2); }
.gs-local-simple .gs-zero::after { content: ""; position: absolute; top: 50%; right: calc(-1 * (var(--space-4) + var(--space-2)) / 2 - 1px); width: 2px; height: 22px; background: var(--line); border-radius: 2px; transform: translateY(-50%); }

/* Titles that used to be h2 elements placed before the page h1 (the setup card and the Dominion status card).
   They are plain paragraphs now so the first heading of the page is the h1, and they keep the look of the old h2. */
.gs-title { margin: 0 0 4px; color: var(--text); font-weight: 700; line-height: 1.25; }
.gs-shell .gs-setup .setup-card-header .gs-title { margin: 0 0 4px; font-size: 1.35rem; }
.status-card .gs-title { margin: 4px 0 6px; font-size: 1.15rem; }
/* The puzzles page side cards were h3 under the h1. They are h2 now and keep the old size. */
.gs-sub-title { margin: 0 0 10px; color: var(--text); font-size: 1.17rem; font-weight: 700; }