/* =================================================================
   MOBILE STYLES - Clean rebuild
   ================================================================= */

/* =================================================================
   PORTRAIT MODE - Board with move history below
   ================================================================= */
@media (max-width: 768px) and (orientation: portrait) {

    /* Show sidebar but make it compact below board */
    body[data-page="game"] .game-sidebar,
    body[data-page="shogi"] .game-sidebar,
    body[data-page="xiangqi"] .game-sidebar {
        display: block !important;
        width: 100% !important;
        order: 2 !important;
        padding: 10px !important;
        border-top: 1px solid rgba(255,255,255,0.2) !important;
    }

    /* Hide non-essential sidebar elements */
    body[data-page="game"] .game-sidebar > h2,
    body[data-page="game"] .game-sidebar > svg,
    body[data-page="game"] .game-sidebar .game-options,
    body[data-page="game"] .game-sidebar .game-status,
    body[data-page="game"] .game-sidebar .player-list,
    body[data-page="game"] .game-sidebar .tutor-section,
    body[data-page="game"] .game-sidebar .game-controls {
        display: none !important;
    }

    /* Show move history */
    body[data-page="game"] .game-sidebar .move-history-section {
        display: block !important;
        margin: 0 !important;
    }

    body[data-page="game"] .move-history-section h3 {
        font-size: 12px !important;
        margin-bottom: 8px !important;
    }

    body[data-page="game"] .move-history-list {
        max-height: 120px !important;
        font-size: 11px !important;
    }

    body[data-page="game"] .history-nav button {
        padding: 8px 6px !important;
        font-size: 16px !important;
    }

    /* Compact header */
    .header {
        padding: 6px 10px !important;
    }

    .header h1 {
        font-size: 14px !important;
    }

    .header .user-info .btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
        min-height: 28px !important;
    }

    /* Game area: vertical stack */
    .game-area {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    /* Board area */
    .game-main {
        width: 100% !important;
        padding: 10px !important;
        order: 1 !important;
    }

    /* Board sizing */
    .hex-board {
        transform: scale(0.6) !important;
        transform-origin: top center !important;
        margin: 0 auto !important;
    }

    /* Hide the data div */
    #hexchess-root {
        display: none !important;
    }

    /* Mobile menu and zoom controls */
    .mobile-menu-btn,
    .zoom-controls {
        display: flex;
    }

    .mobile-panel {
        display: block;
    }
}

/* =================================================================
   LANDSCAPE MODE - Side by side: controls left, board right
   ================================================================= */
@media (max-width: 768px) and (orientation: landscape) {

    /* Hide header in landscape too */
    body[data-page="game"] .header,
    body[data-page="shogi"] .header,
    body[data-page="xiangqi"] .header {
        display: none;
    }

    /* Game area: horizontal layout */
    .game-area {
        display: flex;
        flex-direction: row;
        height: 100vh;
    }

    /* Sidebar: narrow column on left */
    .game-sidebar {
        width: 150px;
        padding: 10px;
        border-right: 1px solid rgba(255,255,255,0.2);
        overflow-y: auto;
    }

    /* Hide non-essential elements */
    .game-sidebar > h2,
    .game-sidebar > svg,
    .game-sidebar .game-options,
    .game-sidebar .game-status,
    .game-sidebar .move-history-section,
    .game-sidebar .tutor-section {
        display: none;
    }

    /* Compact player list */
    .game-sidebar .player-list {
        margin-bottom: 10px;
    }

    .game-sidebar .player-item {
        padding: 4px 6px;
        font-size: 11px;
        margin-bottom: 3px;
    }

    /* Stack buttons vertically in landscape */
    .game-controls {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .game-controls .btn {
        padding: 8px 6px;
        font-size: 11px;
        margin: 0;
    }

    /* Board area */
    .game-main {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Board sizing for landscape */
    .hex-board {
        transform: scale(0.5);
        transform-origin: center center;
    }

    #hexchess-root {
        display: none;
    }

    .mobile-menu-btn,
    .zoom-controls {
        display: flex;
    }

    .mobile-panel {
        display: block;
    }
}

/* =================================================================
   COMMON MOBILE STYLES (both orientations)
   ================================================================= */
@media (max-width: 768px) {
    /* Touch-friendly buttons */
    .btn {
        min-height: 40px;
        touch-action: manipulation;
    }

    /* Prevent text selection on board */
    .hex-board {
        user-select: none;
        -webkit-user-select: none;
    }

    /* Header text stacking */
    .header h1 {
        font-size: 16px;
    }

    .header h1 .header-text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .header h1 .header-text span {
        display: block;
    }

    /* Compact notifications */
    .notification {
        font-size: 12px;
        padding: 8px 12px;
    }
}

/* =================================================================
   LOBBY PAGE - Mobile
   ================================================================= */
@media (max-width: 768px) {
    .lobby {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .panel {
        padding: 12px;
    }

    .panel h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .form-group label {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .form-group input,
    .form-group select {
        padding: 10px;
        font-size: 14px;
    }
}

/* =================================================================
   DEMO PAGE - Mobile Portrait
   ================================================================= */
@media (max-width: 768px) and (orientation: portrait) {
    body[data-page="demo"] .game-area {
        flex-direction: column;
    }

    body[data-page="demo"] .game-sidebar {
        width: 100%;
        padding: 12px;
    }

    body[data-page="demo"] .game-main {
        padding: 10px;
    }

    body[data-page="demo"] .hex-board {
        transform: scale(0.55);
        transform-origin: top center;
    }

    body[data-page="demo"] .piece-nav-btn {
        font-size: 11px;
        padding: 8px 4px;
    }

    body[data-page="demo"] .piece-desc {
        font-size: 11px;
        padding: 8px;
    }
}

/* =================================================================
   DEMO PAGE - Mobile Landscape
   ================================================================= */
@media (max-width: 768px) and (orientation: landscape) {
    body[data-page="demo"] .game-area {
        flex-direction: row;
    }

    body[data-page="demo"] .game-sidebar {
        width: 180px;
    }

    body[data-page="demo"] .hex-board {
        transform: scale(0.45);
    }
}

/* =================================================================
   STANDARD CHESS - Mobile Portrait
   ================================================================= */
@media (max-width: 768px) and (orientation: portrait) {
    body[data-page="chess"] .game-sidebar {
        display: none !important;
    }

    body[data-page="chess"] .game-area {
        display: block !important;
        height: auto !important;
        padding: 5px !important;
    }

    body[data-page="chess"] .game-main {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        padding: 5px !important;
    }

    /* Make the chess board fit the screen width */
    body[data-page="chess"] #chess-board {
        width: calc(100vw - 20px) !important;
        max-width: 400px !important;
    }
}

/* =================================================================
   STANDARD CHESS - Mobile Landscape
   ================================================================= */
@media (max-width: 768px) and (orientation: landscape) {
    body[data-page="chess"] .header {
        display: none !important;
    }

    body[data-page="chess"] .game-area {
        display: flex !important;
        flex-direction: row !important;
        height: 100vh !important;
    }

    body[data-page="chess"] .game-sidebar {
        width: 120px !important;
        padding: 8px !important;
        overflow-y: auto !important;
    }

    body[data-page="chess"] .game-sidebar > h2 {
        display: none !important;
    }

    body[data-page="chess"] .game-sidebar .player-item {
        padding: 4px !important;
        font-size: 10px !important;
    }

    body[data-page="chess"] .game-sidebar .game-controls .btn {
        padding: 6px 4px !important;
        font-size: 10px !important;
    }

    body[data-page="chess"] .game-main {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    body[data-page="chess"] #chess-board {
        width: calc(100vh - 20px) !important;
        max-width: 350px !important;
    }
}