.chess-header { text-align: center; margin-bottom: 30px; }
.chess-subtitle { color: var(--text-gray); font-size: 1.1rem; max-width: 600px; margin: -20px auto 0; }

/* The game sits directly on the page: no border, background or scrollbars */
.chess-frame {
    width: min(100%, 560px);
    margin: 0 auto;
    container-type: inline-size;
}
.chess-frame iframe {
    width: 100%;
    /* Fallback until js/app.js measures the game: board as wide as the frame + ~280px of controls */
    height: calc(min(100cqw, 560px) + 280px);
    border: 0;
    display: block;
    overflow: hidden;
    background: transparent;
    color-scheme: normal;
}
.chess-frame:fullscreen { width: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-color); }
.chess-frame:fullscreen iframe { width: min(100%, 560px); height: 100% !important; }

.chess-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 30px; }