/* ── Layout & Main Container ────────────────────────────────────────────────── */

/* Override global .main-content padding so the chess layout fills the viewport */
.main-content {
    margin-top: var(--topbar-height) !important;
    padding: 0 0 0 0 !important;
    overflow: hidden;
}

@media (max-width: 768px) {
    .main-content {
        margin-right: 0;
        padding-top: 0;
    }
}

.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.chess-container .logo-img {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

.chess-container {
    display: flex;
    gap: var(--space-xl);
    width: 100%;
    height: calc(100dvh - var(--topbar-height) - var(--space-lg));
    height: calc(100vh - var(--topbar-height) - var(--space-lg));
    position: relative;
    padding: 0 var(--space-md);
    box-sizing: border-box;
    overflow: hidden;
}

.chess-left {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 720px;
    position: static;
}

.next-game-actions {
    display: flex;
    gap: var(--space-md);
    margin: var(--space-md) auto var(--space-lg);
    width: 100%;
}

.next-game-actions .btn {
    flex: 1;
    margin: 0;
}

/* When the next-game actions sit above the board, reserve vertical room for them
   so the square board is capped to the height that is actually available and the
   bottom rank never gets pushed out of view. */
.next-game-actions + .chessboard-container {
    --board-reserve: 170px;
}

.chessboard-container {
    position: relative;
    height: 100%;
    max-width: min(680px, 95vw, calc(100vh - var(--board-reserve, 100px)));
    max-width: min(680px, 95vw, calc(100svh - var(--board-reserve, 100px)));
    max-height: calc(100vh - var(--board-reserve, 100px));
    max-height: calc(100svh - var(--board-reserve, 100px));
}

.board-with-coords {
    display: grid;
    grid-template-columns: 30px 1fr 30px;
    grid-template-rows: 30px 1fr 30px;
    gap: 0;
}

.coord-top,
.coord-bottom {
    grid-column: 2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.coord-left,
.coord-right {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.game-over-banner {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.95), rgba(251, 146, 60, 0.95));
    color: white;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 0 #b1450b, 0 4px 12px rgba(0, 0, 0, .2), 0 12px 24px -6px rgba(249, 115, 22, .4);
    text-align: center;
}

.game-over-banner.draw {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.95), rgba(148, 163, 184, 0.95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 0 #475569, 0 4px 12px rgba(0, 0, 0, .2), 0 12px 24px -6px rgba(100, 116, 139, .4);
}


/* ── Game Banner (end of game result bar) ───────────────────────────────────── */

/* Banner action buttons — white on the orange/gray gradient */
.banner-actions {
    display: flex;
    gap: 10px;
    margin-top: var(--space-md);
    justify-content: center;
}

.btn-white {
    background: linear-gradient(160deg, #ffffff 0%, #f3f4f6 100%);
    color: #f97316;
    border: none;
    font-weight: var(--font-bold);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 rgba(0, 0, 0, .15), 0 4px 10px rgba(0, 0, 0, .15);
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-white:hover {
    background: linear-gradient(160deg, #ffffff 0%, #f3f4f6 100%);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 5px 0 rgba(0, 0, 0, .15), 0 8px 16px rgba(0, 0, 0, .2);
}

.btn-white:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 rgba(0, 0, 0, .15);
}

.btn-white-outline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.8);
    font-weight: var(--font-semibold);
}

.btn-white-outline:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Hide the end-of-game banner on small/short screens — the modal handles it there */
@media (max-width: 900px),
(max-height: 1049px) {
    .game-over-banner-end {
        display: none !important;
    }
}

.game-over-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-sm);
}

/* Icon naast de titel in de game-over banner (SVG i.p.v. emoji) */
.game-over-banner .game-over-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.banner-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.game-over-reason {
    font-size: var(--text-base);
    opacity: 0.95;
}

.game-over-winner {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-top: var(--space-sm);
}


/* ── Game Over Modal ────────────────────────────────────────────────────────── */

.game-over-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: var(--space-md);
    animation: fadeInModal 0.35s ease-out;
}

.game-over-modal.hidden {
    display: none;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.game-over-modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    animation: slideUpModal 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
    border-top: 4px solid var(--color-primary);
}

.game-over-modal-content.is-draw {
    border-top-color: var(--color-gray-400);
}

@keyframes slideUpModal {
    from { transform: translateY(28px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Header: icon + title + reason — centered, airy */
.gom-head {
    padding: 36px 28px 22px;
    text-align: center;
    border-bottom: 1px solid var(--color-gray-100);
}

.game-over-modal-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-primary) 55%, var(--color-primary-dark) 100%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .38), 0 8px 20px -6px rgba(249, 115, 22, .45);
}

.game-over-modal-icon.is-draw {
    background: linear-gradient(160deg, var(--color-gray-400) 0%, var(--color-gray-500) 55%, var(--color-gray-600) 100%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3), 0 8px 20px -6px rgba(100, 116, 139, .45);
}

.game-over-modal-icon svg {
    width: 32px;
    height: 32px;
}

.game-over-modal-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: var(--leading-tight);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.game-over-modal-subtitle {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    margin-bottom: 10px;
}

.game-over-modal-reason {
    display: inline-flex;
    align-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--color-gray-200);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* Primary actions: one clear next step */
.gom-primary {
    padding: 20px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.game-over-modal-row {
    display: flex;
    gap: 10px;
}

.game-over-modal-row .btn {
    flex: 1;
    min-height: 44px;
}

.gom-tc {
    font-weight: var(--font-normal);
    opacity: 0.85;
    font-size: 0.9em;
    margin-left: 4px;
}

/* Close button — subtle, top-right */
.game-over-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-tertiary);
    border: 1px solid var(--color-gray-200);
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 50%;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}

.game-over-modal-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--color-gray-300);
    transform: scale(1.05);
}

.game-over-modal-close:active {
    transform: scale(0.96);
}

/* ── Utility footer: Analyseer + Delen — muted toolbar, visually part of card ─ */

.gom-footer {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--color-gray-200);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    align-items: stretch;
}

/* Ghost button used in footer — white, but with 3D bevel like the rest of the app */
.btn-ghost {
    background: linear-gradient(160deg, #ffffff 0%, #f9fafb 100%);
    border: 1px solid var(--color-gray-200);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 0 rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.06);
}

.btn-ghost:hover {
    background: linear-gradient(160deg, #ffffff 0%, #f9fafb 100%);
    border-color: var(--color-gray-300);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 5px 0 rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.08);
}

.btn-ghost:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.gom-footer-btn {
    flex: 1;
    min-height: 42px;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
}

.gom-footer-share {
    flex: 1;
    position: relative;
    display: flex;
}

.gom-footer-share .share-toggle {
    width: 100%;
}

/* Legacy helper kept for other spots */
.btn-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.share-menu-wrap {
    position: relative;
}

.share-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.share-toggle .share-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.share-toggle[aria-expanded="true"] .share-chevron {
    transform: rotate(180deg);
}

.share-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    min-width: 100%;
    max-width: min(320px, calc(100vw - 32px));
    background: var(--bg-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16), 0 1px 0 rgba(255,255,255,0.8) inset;
    overflow: hidden;
    z-index: 10;
    animation: shareMenuIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.share-menu[hidden] {
    display: none;
}

@keyframes shareMenuIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.share-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-align: left;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.share-menu-item + .share-menu-item {
    border-top: 1px solid var(--color-gray-100);
}

.share-menu-item:hover {
    background: var(--bg-secondary);
    color: var(--color-primary);
}

.share-menu-item:focus-visible {
    outline: none;
    background: var(--bg-tertiary);
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* ── Rematch knop staten (banner + modal) ──────────────────────────────────── */

[data-rematch-btn] {
    min-width: 128px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

[data-rematch-btn].is-loading,
[data-rematch-btn].is-sent,
[data-rematch-btn].is-sent:hover {
    transform: none;
    cursor: default;
}

[data-rematch-btn].is-sent,
[data-rematch-btn].is-sent:hover {
    background: linear-gradient(160deg, var(--color-success) 0%, #059669 100%);
    color: var(--color-white);
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #047857, 0 4px 10px rgba(0, 0, 0, .18);
}

.btn-spinner {
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .8;
    animation: rematchSpin 0.7s linear infinite;
}

@keyframes rematchSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .game-over-modal,
    .game-over-modal-content,
    .share-menu {
        animation: none;
    }

    .btn-spinner {
        animation-duration: 1.4s;
    }
}


/* ── Board Animations & Indicators ─────────────────────────────────────────── */

/* Loading spinner for pending move */
.move-loader {
    width: 22px;
    aspect-ratio: 1;
    --_g: no-repeat radial-gradient(farthest-side, #f97316 90%, transparent);
    background: var(--_g), var(--_g), var(--_g), var(--_g);
    background-size: 40% 40%;
    animation: l46 0.9s infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    flex-shrink: 0;
}

.move-loader.hidden {
    display: none;
}

@keyframes l46 {
    0% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%
    }

    40%,
    50% {
        background-position: 100% 100%, 100% 0, 0 0, 0 100%
    }

    90%,
    100% {
        background-position: 100% 100%, 0 100%, 0 0, 100% 0
    }
}


/* ── Move History Sidebar ───────────────────────────────────────────────────── */

.chess-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: var(--space-lg);
    padding-right: var(--space-sm);
    height: 100%;
}

.player-card {
    background: linear-gradient(155deg, var(--bg-primary) 0%, var(--bg-tertiary) 130%);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(0, 0, 0, .05), 0 4px 0 rgba(0, 0, 0, .05), 0 10px 18px -8px rgba(0, 0, 0, .16);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    border: 2px solid transparent;
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease, border-color .18s ease;
}

.player-card.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .18), inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(0, 0, 0, .05), 0 4px 0 var(--bevel-primary-edge), 0 10px 20px -6px var(--bevel-primary-glow);
}

.player-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--color-gray-200);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .1), 0 3px 8px rgba(0, 0, 0, .15);
}

.player-card.active .player-avatar {
    border-color: var(--color-primary);
}

.player-details {
    flex: 1;
}

.player-name {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 2px;
}

.player-time {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.player-time.low-time {
    color: var(--color-error);
    animation: pulse 1s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.side-panel {
    background: linear-gradient(155deg, var(--bg-primary) 0%, var(--bg-tertiary) 130%);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(0, 0, 0, .05), 0 4px 0 rgba(0, 0, 0, .05), 0 10px 18px -8px rgba(0, 0, 0, .16);
}

.panel-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-gray-200);
}

.captured-pieces-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 40px;
    flex-wrap: wrap;
}

.captured-pieces {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
}

.captured-piece {
    height: 38px;
    width: 38px;
    object-fit: contain;
    opacity: 0.75;
}

.material-advantage {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-primary, #f97316);
    white-space: nowrap;
    margin-left: 4px;
}

.moves-list {
    max-height: 300px;
    overflow-y: auto;
}

.move-row {
    display: grid;
    grid-template-columns: 35px 1fr 1fr;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    cursor: pointer;
}

.move-row:hover {
    background-color: var(--bg-secondary);
}

.move-row.active {
    background-color: var(--bg-secondary);
}

.move-number {
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

.move-row.active .move-number {
    color: white;
}

.move-notation {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.move-row.active .move-notation {
    color: white;
}

.move-controls {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.move-control-btn {
    flex: 1;
    padding: var(--space-sm);
    background: linear-gradient(160deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .1);
}

.move-control-btn:hover:not(:disabled) {
    background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 var(--bevel-primary-edge), 0 4px 10px var(--bevel-primary-glow);
}

.move-control-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.move-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.game-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

.btn-action:hover {
    transform: translateY(-2px);
}

.btn-action:active {
    transform: translateY(1px);
}

.btn-warning {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.btn-warning:hover {
    background-color: var(--color-warning);
    color: var(--color-white);
    box-shadow: 0 3px 0 #92400e, 0 4px 10px rgba(217, 119, 6, .35);
}

.btn-danger {
    border-color: var(--color-error);
    color: var(--color-error);
}

.btn-danger:hover {
    background-color: var(--color-error);
    color: var(--color-white);
    box-shadow: 0 3px 0 #7f1d1d, 0 4px 10px rgba(239, 68, 68, .35);
}

.game-status-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.game-status-modal.hidden {
    display: none;
}

.game-status-content {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    box-shadow: var(--shadow-xl);
    max-width: 400px;
    width: 90%;
}

.game-status-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.game-status-message {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 400px;
}

.game-toast {
    background: linear-gradient(155deg, var(--bg-primary) 0%, var(--bg-tertiary) 130%);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 rgba(0, 0, 0, .06), var(--shadow-lg);
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    animation: gameToastIn 0.3s ease-out;
}

.game-toast.error {
    border-left-color: var(--color-error);
}

.game-toast.success {
    border-left-color: var(--color-success);
}

.game-toast.warning {
    border-left-color: var(--color-warning);
}

.game-toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.game-toast-content {
    flex: 1;
}

.game-toast-title {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.game-toast-message {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.game-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.game-toast-close:hover {
    color: var(--text-primary);
}

@keyframes gameToastIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes gameToastOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.confirm-dialog.hidden {
    display: none;
}

.confirm-content {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-xl);
}

.confirm-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.confirm-message {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.confirm-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

.draw-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 10px;
}

/* Hide scrollbars but keep functionality */
.chess-right::-webkit-scrollbar {
    display: none;
}

.chess-right {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Tab system — inset groove track with a beveled active segment (matches the
   login toggle-container language), swapped in for the old underline tabs. */
.side-panel-tabs {
    display: flex;
    gap: 3px;
    margin-bottom: var(--space-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(0, 0, 0, .04);
    padding: 3px;
}

.tab-button {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: none;
    border-radius: calc(var(--radius-lg) - 3px);
    cursor: pointer;
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.tab-button:hover:not(.active) {
    color: var(--text-primary);
}

.tab-button.active {
    background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-primary) 55%, var(--color-primary-dark) 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 var(--bevel-primary-edge), 0 3px 8px var(--bevel-primary-glow);
    transform: translateY(-1px);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


/* ── Promotion & Special Move UI ────────────────────────────────────────────── */

/* Add subtle invalid move report */
/* ── Message Modal ──────────────────────────────────────────────────────────── */

/* Message Modal */
.message-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.message-modal.hidden {
    display: none;
}

.message-modal-content {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.message-modal-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.message-section {
    margin-bottom: var(--space-xl);
}

.message-section-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-gray-200);
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: var(--space-sm);
    max-width: 100%;
}

.emoji-btn {
    font-size: 28px;
    padding: var(--space-sm);
    background-color: var(--bg-secondary);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}

.emoji-btn:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.1);
}

.message-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.message-btn {
    padding: var(--space-md);
    background-color: var(--bg-secondary);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: left;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.message-btn:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.message-modal-close {
    margin-top: var(--space-lg);
    width: 100%;
}


/* ── Responsive Breakpoints ─────────────────────────────────────────────────── */

/* ── 1025px – 1200px: board + sidebar side-by-side but tighter ── */
@media (min-width: 1025px) and (max-width: 1200px) {
    .chess-container {
        gap: var(--space-lg);
    }

    .chess-left {
        max-width: 560px;
    }

    .chess-right {
        min-width: 0;
    }

    .side-panel {
        padding: var(--space-md);
    }

    .player-card {
        padding: var(--space-md);
    }

    .player-avatar {
        width: 38px;
        height: 38px;
    }

    .player-time {
        font-size: var(--text-lg);
    }

    .player-name {
        font-size: var(--text-sm);
    }

    /* Compact move controls: hide text labels, show icons only */
    .move-controls {
        gap: 4px;
    }

    .move-control-btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0;
        /* hide text */
        gap: 0;
    }

    .move-control-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Tighter moves list */
    .moves-list {
        max-height: 220px;
    }

    .move-row {
        grid-template-columns: 28px 1fr 1fr;
        gap: 4px;
        padding: 4px 6px;
        font-size: var(--text-sm);
    }

    .move-notation {
        font-size: var(--text-sm);
    }

    /* Compact captured pieces */
    .captured-piece {
        width: 38px;
        height: 38px;
    }

    /* Compact game action buttons */
    .game-actions .btn {
        padding: var(--space-sm);
        font-size: var(--text-sm);
    }

    .panel-title {
        font-size: var(--text-base);
        margin-bottom: var(--space-sm);
    }
}

/* ── 901px – 1024px: board shrinks to keep sidebar alongside ── */
@media (min-width: 901px) and (max-width: 1024px) {
    .chess-container {
        gap: var(--space-lg);
    }

    .chess-left {
        max-width: 480px;
    }

    .chessboard-container {
        max-width: min(480px, calc(100vw - 300px), calc(100vh - var(--board-reserve, 100px)));
        max-width: min(480px, calc(100vw - 300px), calc(100svh - var(--board-reserve, 100px)));
    }

    .chess-right {
        min-width: 260px;
    }

    /* Compact sidebar like the 1025–1200px zone */
    .side-panel {
        padding: var(--space-md);
    }

    .player-card {
        padding: var(--space-md);
    }

    .player-avatar {
        width: 34px;
        height: 34px;
    }

    .player-time {
        font-size: var(--text-base);
    }

    .player-name {
        font-size: var(--text-sm);
    }

    .move-controls {
        gap: 4px;
    }

    .move-control-btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0;
        gap: 0;
    }

    .move-control-btn svg {
        width: 16px;
        height: 16px;
    }

    .moves-list {
        max-height: 180px;
    }

    .move-row {
        grid-template-columns: 24px 1fr 1fr;
        gap: 4px;
        padding: 4px 6px;
        font-size: var(--text-sm);
    }

    .captured-piece {
        width: 32px;
        height: 32px;
    }

    .panel-title {
        font-size: var(--text-base);
        margin-bottom: var(--space-sm);
    }
}

@media (max-width: 900px) {
    .main-content {
        overflow: visible;
    }

    .chess-container {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .chess-left {
        max-width: 100%;
        width: 100%;
        height: auto;
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--bg-primary);
        padding: 0;
    }

    /* On mobile the sidebar is below the board – board fills full width */
    /* Keep the square board capped to the height actually available below the
       topbar. svh (small viewport) ensures the bottom rank stays visible even
       while the mobile browser chrome is shown – with a sticky .chess-left the
       overflowing part of the board could never be scrolled into view. */
    .next-game-actions {
        gap: var(--space-sm);
        margin: var(--space-xs) auto var(--space-md);
    }

    .next-game-actions .btn {
        padding: var(--space-xs) var(--space-md);
        font-size: var(--text-sm);
    }

    .chessboard-container {
        max-width: min(97vw, 82vh, calc(100vh - var(--board-reserve, 100px)));
        max-width: min(97vw, 82vh, calc(100svh - var(--board-reserve, 100px)));
        max-height: 70vh;
        margin: 0 auto;
    }

    .chess-right {
        overflow-y: visible;
        height: auto;
        min-height: auto;
        -ms-overflow-style: auto;
        scrollbar-width: auto;
    }

    .chess-right::-webkit-scrollbar {
        display: block;
    }
}

@media (max-width: 768px) {
    .chess-container {
        gap: var(--space-lg);
        padding: 0 var(--space-md);
    }

    .chessboard-container {
        max-width: min(98vw, 82vh, calc(100vh - var(--board-reserve, 100px)));
        max-width: min(98vw, 82vh, calc(100svh - var(--board-reserve, 100px)));
    }

    .player-card {
        padding: var(--space-md);
    }

    .side-panel {
        padding: var(--space-md);
    }
}

@media (max-height: 850px) {
    .chess-container {
        padding: var(--space-md) var(--space-md);
    }

    .chess-left {
        justify-content: flex-start;
    }

    .chessboard-container {
        max-width: min(680px, 95vw, calc(100vh - var(--board-reserve, 100px)));
        max-width: min(680px, 95vw, calc(100svh - var(--board-reserve, 100px)));
        max-height: calc(100vh - var(--board-reserve, 100px));
        max-height: calc(100svh - var(--board-reserve, 100px));
    }

    .board-with-coords {
        grid-template-columns: 25px 1fr 25px;
        grid-template-rows: 25px 1fr 25px;
    }

    .coord-top,
    .coord-bottom,
    .coord-left,
    .coord-right {
        font-size: 11px;
    }
}

@media (max-height: 800px) {
    .chess-container {
        padding: var(--space-sm) 0;
    }

    .chess-left {
        justify-content: flex-start;
    }

    .chessboard-container {
        max-width: min(680px, 95vw, calc(100vh - var(--board-reserve, 100px)));
        max-width: min(680px, 95vw, calc(100svh - var(--board-reserve, 100px)));
        max-height: calc(100vh - var(--board-reserve, 100px));
        max-height: calc(100svh - var(--board-reserve, 100px));
    }

    .player-card {
        padding: var(--space-sm);
    }

    .side-panel {
        padding: var(--space-sm);
    }
}

@media (max-height: 750px) {
    .chessboard-container {
        max-width: min(680px, 95vw, calc(100vh - var(--board-reserve, 100px)));
        max-width: min(680px, 95vw, calc(100svh - var(--board-reserve, 100px)));
        max-height: calc(100vh - var(--board-reserve, 100px));
        max-height: calc(100svh - var(--board-reserve, 100px));
    }

    .chess-left {
        justify-content: flex-start;
    }

    .board-with-coords {
        grid-template-columns: 20px 1fr 20px;
        grid-template-rows: 20px 1fr 20px;
    }

    .coord-top,
    .coord-bottom,
    .coord-left,
    .coord-right {
        font-size: 10px;
    }

}

@media (max-height: 700px) {
    .chess-container {
        padding: var(--space-xs) var(--space-md);
    }

    .chess-left {
        justify-content: flex-start;
    }

    .chessboard-container {
        max-width: min(680px, 95vw, calc(100vh - var(--board-reserve, 100px)));
        max-width: min(680px, 95vw, calc(100svh - var(--board-reserve, 100px)));
        max-height: calc(100vh - var(--board-reserve, 100px));
        max-height: calc(100svh - var(--board-reserve, 100px));
    }

    .board-with-coords {
        grid-template-columns: 18px 1fr 18px;
        grid-template-rows: 18px 1fr 18px;
    }

    .coord-top,
    .coord-bottom,
    .coord-left,
    .coord-right {
        font-size: 9px;
    }
}

/* ── Board page redesign: /speel/partij (scoped .game-layout) ─────────────────
   Components (all sizes) + desktop fit-to-viewport layout (min-width: 901px).
   - Left: narrow rail with the two player cards (opponent top, yourself
     bottom) beside a bare board (no container).
   - Right column (desktop): fixed viewport height, moves panel flex-fills
     and only the moves list scrolls internally. No page-level scroll. */

/* ── Board rail with player cards (desktop: left of the board) ── */
/* Mobile fallback (refined in the mobile pass): cards side by side above board */
.game-layout .board-rail {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

/* ── Minimal rail cards: avatar + name + clock. Nothing else. ── */
.game-layout .rail-card {
    background: var(--bg-primary);
    border: 1px solid var(--color-gray-200);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.game-layout .rail-card.active {
    border-left-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, .15), var(--shadow-sm);
}

.game-layout .rail-card .rail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.game-layout .rail-card .player-avatar {
    width: 26px;
    height: 26px;
    border-width: 1px;
    flex-shrink: 0;
}

.game-layout .rail-card .player-name {
    margin: 0;
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.game-layout .rail-card .player-time {
    font-size: var(--text-lg);
    line-height: 1.2;
}

.game-layout .rail-card .move-loader {
    width: 16px;
}

/* Captured pieces inside rail cards (small strip under/above the name) */
.game-layout .rail-captured {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 0;
}

.game-layout .rail-captured .captured-pieces {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    align-items: center;
    min-width: 0;
}

.game-layout .rail-captured .captured-piece {
    width: 22px;
    height: 22px;
}

.game-layout .rail-captured .material-advantage {
    font-size: var(--text-xs);
    margin-left: 2px;
}

/* Action buttons between the player cards.
   Mobile fallback: full-width 2-col grid under the cards. */
.game-layout .rail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    grid-column: 1 / -1;
    order: 3;
}

.game-layout .rail-actions .btn {
    padding: 8px 6px;
    font-size: var(--text-sm);
    min-height: 36px;
    margin: 0;
}

.game-layout .rail-actions .btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.game-layout .rail-actions .btn-action {
    gap: 6px;
}

/* Home / next-game buttons live on the right now */
.game-layout .side-nav-actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-sm);
}

.game-layout .side-nav-actions .btn {
    flex: 1;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    min-height: 38px;
}

/* Compact move rows: number + both halves close together */
.game-layout .move-row {
    grid-template-columns: 2rem 1fr 1fr;
    gap: 2px 6px;
    padding: 2px 6px;
    font-size: var(--text-sm);
    align-items: baseline;
}

.game-layout .move-notation {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    font-size: var(--text-sm);
}

.game-layout .move-notation-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-layout .move-ts {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    opacity: .75;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (min-width: 901px) {
    .game-layout.chess-container {
        /* Clear the floating desktop pill nav (NOT the legacy --topbar-height:
           pill height + a gap above and below it) plus a small bottom margin. */
        --game-offset-top: calc(var(--dtop-pill-h, 56px) + var(--dtop-gap, 14px) * 2);
        height: calc(100dvh - var(--game-offset-top) - var(--space-sm));
        height: calc(100vh - var(--game-offset-top) - var(--space-sm));
        max-width: 1760px;
        margin-inline: auto;
        padding: var(--space-sm) var(--space-md);
        /* 2-track grid: board zone (shrink-wrapped) + flexible sidebar.
           Leftover width lands in the outer gutters — the gaps around the
           board stay exactly 8px at any viewport width. */
        display: grid;
        grid-template-columns: auto minmax(300px, 440px);
        gap: var(--space-sm);
        align-items: stretch;
        justify-content: center;
    }

    /* Board zone: rail + board as one centered unit, exactly board-tall */
    .game-layout .board-zone {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        align-self: center;
        gap: var(--space-sm);
        min-width: 0;
        min-height: 0;
    }

    /* Rail: opponent card top, actions middle, own card bottom */
    .game-layout .board-rail {
        flex: 0 0 auto;
        width: 180px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--space-sm);
        min-height: 0;
        min-width: 0;
    }

    .game-layout .rail-actions {
        display: flex;
        flex-direction: column;
        gap: 6px;
        grid-column: auto;
        order: 0;
    }

    .game-layout .chessboard-container {
        min-width: 0;
        max-width: none;
        max-height: none;
        height: auto;
        width: auto;
        display: flex;
        align-items: center;
    }

    .game-layout .board-with-coords {
        display: block;
        /* All viewport-based (no container percentages) so the zone can
           shrink-wrap the board exactly. As tall as the container allows
           (offset + 8px bottom margin), never wider than 900px or the
           viewport width budget — width and height stay equal via
           aspect-ratio, so max height means max size. */
        width: min(900px, calc(100vw - 548px), calc(100dvh - var(--game-offset-top, 84px) - 8px));
        width: min(900px, calc(100vw - 548px), calc(100vh - var(--game-offset-top, 84px) - 8px));
        aspect-ratio: 1 / 1;
        margin: 0;
    }

    /* ── Right column: fixed height, no page scroll ── */
    .game-layout .chess-right {
        min-width: 0;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        gap: var(--space-sm);
        padding-right: 0;
    }

    .game-layout .side-panel {
        padding: var(--space-sm) var(--space-md);
    }

    .game-layout .panel-title {
        font-size: var(--text-base);
        margin-bottom: var(--space-sm);
    }

    /* Moves panel flex-fills; only the list itself scrolls */
    .game-layout .side-panel--moves {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .game-layout .side-panel--moves .moves-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .game-layout .move-controls {
        gap: 6px;
        margin-bottom: var(--space-sm);
    }

    .game-layout .move-control-btn {
        padding: 6px 4px;
        font-size: var(--text-sm);
    }

    /* Compact end-of-game banner */
    .game-layout .game-over-banner {
        padding: var(--space-md);
        margin-bottom: 0;
    }

    .game-layout .game-over-title {
        font-size: var(--text-xl);
    }

    .game-layout .game-over-winner {
        font-size: var(--text-base);
    }

    .game-layout .banner-actions {
        margin-top: var(--space-sm);
    }
}

/* ── Viewed-position highlight for individually clickable half-moves ──
   (all sizes; the mobile strip below reuses it). */
.game-layout .move-notation {
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.game-layout .move-notation:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.game-layout .move-notation.current {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Mobile toolbar is mobile-only; desktop keeps rail buttons + move controls. */
.game-layout .mobile-game-toolbar {
    display: none;
}

/* ── Mobile pass: /speel/partij (max-width: 900px) ────────────────────
   Stack order: opponent card → centered board → own card → small
   horizontal moves strip → toolbar (Acties dropdown + move nav).
   The rail unwraps via display:contents so both cards keep their live
   IDs/handlers while sitting above/below the board. Captured pieces
   stay inside the cards, exactly like desktop. */
@media (max-width: 900px) {
    .game-layout.chess-container {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        height: auto;
        padding: 0 var(--space-sm) var(--space-lg);
    }

    .game-layout .board-zone {
        display: contents;
    }

    .game-layout .board-rail {
        display: contents;
    }

    /* Flattened so the moves strip can sit at the very top while the
       cards stay around the board; every child is ordered explicitly. */
    .game-layout .chess-right {
        display: contents;
    }

    .game-layout .side-panel--moves {
        order: 0;
    }

    .game-layout #drawBanner,
    .game-layout .game-over-banner-end,
    .game-layout #confirmDialog {
        order: 1;
    }

    .game-layout #opponentCard {
        order: 2;
    }

    .game-layout .chessboard-container {
        order: 3;
        width: 100%;
        max-width: 640px;
        max-height: none;
        margin: 0 auto;
    }

    .game-layout .board-with-coords {
        width: 100%;
    }

    .game-layout #currentCard {
        order: 4;
    }

    /* Desktop buttons are replaced by the Acties dropdown + icon nav. */
    .game-layout .board-rail .rail-actions {
        display: none;
    }

    .game-layout .move-controls {
        display: none;
    }

    /* Compact one-row player cards: avatar+name, captured strip, clock. */
    .game-layout .rail-card {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
    }

    .game-layout .rail-card .rail-row {
        order: 1;
        flex: 0 1 auto;
        min-width: 0;
    }

    .game-layout .rail-captured {
        order: 2;
        flex: 1 1 auto;
    }

    .game-layout .rail-captured .captured-piece {
        width: 20px;
        height: 20px;
    }

    .game-layout .rail-card .player-time {
        order: 3;
        margin-left: auto;
        font-size: var(--text-base);
        white-space: nowrap;
    }

    .game-layout .rail-card .move-loader {
        order: 4;
    }

    .game-layout .side-nav-actions {
        order: 6;
    }

    /* Small horizontal moves strip: pills next to each other. */
    .game-layout .side-panel--moves {
        padding: 8px;
    }

    .game-layout .side-panel--moves .moves-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        max-height: none;
        max-width: none;
        padding: 2px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .game-layout .side-panel--moves .moves-list::-webkit-scrollbar {
        display: none;
    }

    .game-layout .move-row {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        grid-template-columns: none;
        padding: 4px 8px;
        font-size: 12px;
        background: var(--bg-secondary);
        border-radius: var(--radius-md);
    }

    .game-layout .move-number {
        font-size: 11px;
    }

    .game-layout .move-notation {
        padding: 4px 6px;
        font-size: 12px;
    }

    /* The unscoped desktop active-row rules force white text; on the
       light mobile pills that turns invisible — keep normal ink. */
    .game-layout .move-row.active .move-notation {
        color: var(--text-primary);
    }

    .game-layout .move-row.active .move-number {
        color: var(--text-secondary);
    }

    /* Timestamps stay a desktop detail; the strip stays compact. */
    .game-layout .move-ts {
        display: none;
    }

    /* Toolbar: Acties dropdown (opens upward) with the move nav icons next to it. */
    .game-layout .mobile-game-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        order: 5;
    }

    .game-layout .mobile-actions-wrap {
        position: relative;
        flex: 0 0 auto;
    }

    .game-layout #mobileActionsBtn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        margin: 0;
    }

    .game-layout .mobile-actions-menu {
        position: absolute;
        bottom: calc(100% + 6px);
        left: 0;
        z-index: 50;
        min-width: 220px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 6px;
        background: var(--bg-primary);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }

    .game-layout .mobile-actions-menu[hidden] {
        display: none;
    }

    .game-layout .mobile-action-item {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        font-size: var(--text-sm);
        color: var(--text-primary);
        text-align: left;
        text-decoration: none;
        background: none;
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .game-layout .mobile-action-item:hover {
        background: var(--bg-secondary);
    }

    .game-layout .mobile-action-item.danger {
        color: var(--color-error);
    }

    .game-layout .mobile-move-nav {
        display: flex;
        flex: 1 1 auto;
        gap: 6px;
        margin-left: auto;
    }

    .game-layout .mobile-move-nav .move-control-btn {
        flex: 1 1 0;
        min-height: 40px;
        padding: 8px 4px;
        font-size: 0;
        gap: 0;
    }

    .game-layout .mobile-move-nav .move-control-btn svg {
        width: 18px;
        height: 18px;
    }
}