/* Gchess ivory and walnut pieces. Never stretch their silhouettes. */
body .game-layout .board .square > .piece,
body .practice-game-layout .board .square > .piece,
body .daily-board .square > .piece {
    width: 94%;
    height: 94%;
    object-fit: contain;
    filter: drop-shadow(0 2px 1px rgba(24, 18, 10, .22));
}
.drag-piece, .move-animation-piece { object-fit: contain; }
.captured-piece { filter: none; }
@media (min-width: 1101px) {
    body .home-computer-layout,
    body.online-game-detail-page .online-game-layout {
        --square-size: min(120px, calc((100svh - 136px) / 8), calc((100vw - 664px) / 8));
        --board-panel-height: calc((var(--square-size) * 8) + 40px);
        gap: 24px;
        grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px);
        max-width: none;
    }
    body .home-computer-layout .computer-side { width: 100%; }
    body .home-computer-layout .board-wrapper,
    body.online-game-detail-page .online-game-layout .board-wrapper { padding: 12px; }
    body.mobile-analyzer-playing .analyzer-game-layout {
        --analyzer-board-size: min(960px, calc(100svh - 136px), calc(100vw - 664px));
        grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px);
        max-width: none;
        gap: 24px;
    }
}

/* Training uses the same artwork, with instructions kept above the board. */
@media (min-width: 1101px) {
    body .home-computer-layout .computer-play-panel {
        height: min(calc(100svh - 48px), 1040px);
    }
    body.practice-page-active .practice-page { padding-top: 12px; }
    body.practice-page-active .practice-header {
        display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    }
    body.practice-page-active .practice-header h1 { font-size: 26px; margin: 0; }
    body.practice-page-active .practice-header p { font-size: 14px; margin: 0; }
    body.practice-page-active .training-mode-guide {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
        gap: 4px 16px; padding: 8px 12px; margin: 8px 0;
    }
    body.practice-page-active .training-mode-guide > p {
        grid-column: 1; margin: 0; font-size: 12px;
    }
    body.practice-page-active .training-mode-guide > details { grid-column: 2; grid-row: 1 / 3; }
    body.practice-page-active .training-mode-guide > details[open] { grid-column: 1 / -1; grid-row: auto; }
    body.practice-page-active .practice-xp-panel { padding: 8px 12px; margin: 8px 0; gap: 4px; }
    body.practice-page-active .practice-xp-panel .xp-progress-track { height: 5px; margin: 5px 0; }
    body.practice-page-active .practice-xp-panel .xp-progress-header { font-size: 12px; line-height: 1.2; }
    body.practice-page-active .practice-xp-panel .xp-progress-meta { font-size: 11px; margin-top: 0; line-height: 1.25; }
    body.practice-page-active .practice-game-layout {
        --square-size: min(120px, calc((100svh - 296px) / 8), calc((100vw - 852px) / 8));
        --board-panel-height: calc(var(--square-size) * 8 + 40px);
        grid-template-columns: 190px max-content minmax(260px, 300px);
        gap: 18px; margin: 12px 0;
    }
    body.practice-page-active .practice-selector-panel {
        grid-column: auto; width: 190px; height: var(--board-panel-height); overflow-y: auto;
    }
    body.training-challenge-active .practice-game-layout {
        --square-size: min(120px, calc((100svh - 250px) / 8), calc((100vw - 664px) / 8));
        grid-template-columns: max-content minmax(250px, 1fr);
    }
    body.training-challenge-active .training-mode-guide { display: none; }
}