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

/* Large Desktop */
@media (min-width: 1200px) {
    .chess-board { width: min(560px, 55vh); height: min(560px, 55vh); }
    .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: row; max-height: 180px;
    }
    .move-history-panel { flex: 1; }
    .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; }
}

/* 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;
        transition: max-height 0.2s ease;
    }
    .side-panel.is-expanded { max-height: 160px; }
    .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; }
    .move-history-panel, .action-buttons { display: none; }
    .side-panel.is-expanded .move-history-panel,
    .side-panel.is-expanded .action-buttons { display: flex; }
    .status-panel { display: none; }
    .action-buttons { flex-direction: column; min-width: 90px; border-top: none; border-left: 1px solid var(--card-border); padding: 8px; }
    .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; font-size: 18px; }
    .player-name { font-size: 12px; }
    .player-timer { font-size: 14px; }
    .game-header { padding: 8px 12px; }
    .game-title { font-size: 14px; }
    .menu-logo h1 { font-size: 28px; }
    .chess-icon { font-size: 60px; }
    .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: unset; flex-direction: column; }
    .chess-board { width: min(300px, 70vh); height: min(300px, 70vh); }
    .board-area { padding: 4px; gap: 4px; }
    .player-info { padding: 4px 8px; }
    .player-avatar { display: none; }
    .game-header { padding: 6px 12px; }
}

/* Very small */
@media (max-width: 360px) {
    .chess-board { width: min(300px, 90vw); height: min(300px, 90vw); }
    .piece { font-size: 20px; }
}

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