/* ===== CHESS RESPONSIVE ===== */

/* Large Desktop */
@media (min-width: 1200px) {
    .chess-board { width: min(560px, calc(62 * var(--app-vh))); height: min(560px, calc(62 * var(--app-vh))); }
    .side-panel { width: 320px; }
}

/* Desktop */
@media (min-width: 900px) {
    .game-layout { flex-direction: row; }
    .side-panel { display: flex !important; }
    .board-area { padding: 16px; }
}

/* Tablet */
@media (max-width: 899px) and (min-width: 600px) {
    .game-layout { flex-direction: column; }
    .side-panel {
        width: 100%; min-width: unset; border-left: none;
        border-top: 1px solid var(--card-border);
        flex-direction: column; max-height: 48px; flex-shrink: 0;
        transition: max-height 0.2s ease;
    }
    .side-panel.is-expanded { max-height: 230px; }
    .mobile-panel-toggle {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; min-height: 48px; padding: 0 16px;
        background: transparent; border: 0; color: var(--text-muted);
        font-size: 11px; font-weight: 700; letter-spacing: 2px;
        cursor: pointer; flex: 0 0 48px;
    }
    .mobile-panel-arrow { color: var(--accent); font-size: 20px; line-height: 1; }
    .side-panel-content { display: none; min-height: 0; }
    .side-panel.is-expanded .side-panel-content { display: flex; flex: 1; flex-direction: row; }
    .move-history-panel { flex: 1; min-width: 0; }
    .status-panel { min-width: 120px; border-bottom: none; border-right: 1px solid var(--card-border); }
    .action-buttons { flex-direction: column; min-width: 100px; border-top: none; border-left: 1px solid var(--card-border); }
    .chess-board { width: min(420px, 50vw); height: min(420px, 50vw); }
    .board-area { padding: 8px; gap: 6px; }
}

/* Tablet portrait: the 599px rule below does not apply here, so let the
   board use the height it actually has. */
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
    .chess-board {
        width: min(94vw, calc(52 * var(--app-vh)));
        height: min(94vw, calc(52 * var(--app-vh)));
    }
}

/* Mobile Portrait */
@media (max-width: 599px) {
    .game-layout { flex-direction: column; }
    .side-panel {
        width: 100%; min-width: unset; border-left: none;
        border-top: 1px solid var(--card-border);
        flex-direction: column; max-height: 48px; flex-shrink: 0;
        transition: max-height 0.2s ease;
    }
    .side-panel.is-expanded { max-height: 230px; }
    .mobile-panel-toggle {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; min-height: 48px; padding: 0 16px;
        background: transparent; border: 0; color: var(--text-muted);
        font-size: 11px; font-weight: 700; letter-spacing: 2px;
        cursor: pointer;
    }
    .mobile-panel-arrow { color: var(--accent); font-size: 20px; line-height: 1; }
    .side-panel-content { display: none; min-height: 0; }
    .side-panel.is-expanded .side-panel-content { display: flex; flex-direction: column; flex: 1; }
    .status-panel {
        display: flex; align-items: center; justify-content: center; gap: 12px;
        padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--card-border);
    }
    .status-label { margin: 0; }
    .move-history-panel { display: flex; flex: 1; min-height: 50px; }
    .move-history { min-height: 0; }
    .action-buttons {
        display: flex; flex-direction: row; min-width: 0; padding: 8px;
        border-top: 1px solid var(--card-border); border-left: none;
    }
    .chess-board { width: min(340px, 92vw); height: min(340px, 92vw); }
    .board-area { padding: 6px; gap: 4px; }
    .player-info { padding: 6px 10px; }
    .player-avatar { width: 28px; height: 28px; }
    .player-name { font-size: 12px; }
    .player-timer { font-size: 14px; }
    .game-header { padding-top: calc(8px + env(safe-area-inset-top)); padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); }
    .game-title { font-size: 14px; }
    .menu-logo h1 { font-size: 28px; }
    .chess-icon { width: 56px; height: 56px; }
    .difficulty-cards { gap: 10px; }
    .diff-card { min-width: 100px; padding: 16px 12px; }
}

/* Mobile Landscape */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .game-layout { flex-direction: row; }
    .side-panel {
        width: 200px; min-width: 180px; border-left: 1px solid var(--card-border);
        max-height: 48px; flex-direction: column; flex-shrink: 0;
    }
    .side-panel.is-expanded { max-height: 230px; }
    .mobile-panel-toggle { display: flex; }
    .side-panel-content { display: none; min-height: 0; }
    .side-panel.is-expanded .side-panel-content { display: flex; flex-direction: column; flex: 1; }
    .status-panel {
        display: flex; align-items: center; justify-content: center; gap: 12px;
        padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--card-border);
    }
    .status-label { margin: 0; }
    .move-history-panel { display: flex; flex: 1; min-height: 50px; }
    .move-history { min-height: 0; }
    .action-buttons {
        display: flex; flex-direction: row; min-width: 0; padding: 8px;
        border-top: 1px solid var(--card-border); border-left: none;
    }
    .chess-board { width: min(300px, 68 * var(--app-vh)); height: min(300px, 68 * var(--app-vh)); }
    .board-area { padding: 4px; gap: 4px; }
    .player-info { padding: 4px 8px; }
    .player-avatar { display: none; }
    .game-header { padding-top: calc(6px + env(safe-area-inset-top)); padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); }
}

/* Very small */
@media (max-width: 360px) {
    .chess-board { width: min(300px, 90vw); height: min(300px, 90vw); }
    .pc-mini { width: 13px; height: 13px; }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .sq { min-width: 0; min-height: 0; }
    .btn { min-height: 52px; }
    .btn-sm { min-height: 44px; }
    .promo-piece { width: 56px; height: 56px; }
    .promo-piece .piece-svg { width: 88%; height: 88%; }
}