/* =================================================================
   HEXCHESS MOBILE RESPONSIVE STYLES
   Clean, consolidated mobile CSS with proper orientation handling
   
   NOTE: This file should be loaded AFTER base.css in index.php
   ================================================================= */

/* =================================================================
   BASE MOBILE STYLES (All mobile devices)
   ================================================================= */
@media (max-width: 768px) {
    /* Comfortable base sizing for mobile */
    .hex-board {
        transform: scale(0.75);
        margin: 8px auto;
        transform-origin: center center;
    }

    .hex-cell {
        width: 52px;
        height: 60px;
        margin: 0 1.5px;
    }

    .piece {
        width: 34px;
        height: 34px;
    }

    /* Compact sidebar */
    .game-sidebar {
        padding: 10px;
        gap: 8px;
    }

    .game-status {
        padding: 8px;
    }

    .game-status h3 {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .game-status p {
        font-size: 12px;
    }

    /* Improved touch feedback */
    .hex-cell:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    /* Compact header */
    .header h1 {
        font-size: 18px;
    }

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

    /* Touch-friendly buttons */
    .btn {
        min-height: 40px;
        font-size: 13px;
        padding: 10px 14px;
    }

.game-controls {
  display: flex;
  gap: 6px;
  flex-direction: column;
}
    .game-controls .btn {
        min-width: 75px;
//        padding: 6px 10px;
        font-size: 12px;
    }

    /* Larger tap targets for accessibility */
    .hex-cell::after {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        z-index: -1;
    }
}

/* =================================================================
   PORTRAIT ORIENTATION - Same as base (comfortable size)
   ================================================================= */
@media (max-width: 768px) and (orientation: portrait) {
    /* Keep comfortable sizing in portrait */
    .hex-board {
        transform: scale(0.75);
    }

    .hex-cell {
        width: 52px;
        height: 60px;
        margin: 0 1.5px;
    }

    .piece {
        width: 34px;
        height: 34px;
    }

    .game-main {
        min-height: 50vh;
    }

    /* Stack sidebar below */
    .game-area {
        flex-direction: column;
    }

    .game-sidebar {
        padding: 10px;
        gap: 6px;
    }
}

/* =================================================================
   LANDSCAPE ORIENTATION - Slightly more compact for horizontal space
   ================================================================= */
@media (max-width: 768px) and (orientation: landscape) {
    /* Slightly smaller to fit horizontally */
    .hex-board {
        transform: scale(0.72);
        margin: 5px auto;
    }

    .hex-cell {
        width: 50px;
        height: 58px;
        margin: 0 1.5px;
    }

    .piece {
        width: 32px;
        height: 32px;
    }

    /* Side-by-side layout */
    .game-area {
        flex-direction: row;
    }
    
    .game-sidebar {
        width: 200px;
        order: 1;
        flex-direction: column;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: none;
        padding: 8px;
        gap: 6px;
    }

    .game-main {
        order: 2;
        flex: 1;
    }

    .game-controls {
        flex-wrap: wrap;
    }

    .game-controls .btn {
        min-width: 70px;
//        padding: 5px 8px;
        font-size: 11px;
    }
}

/* =================================================================
   VERY SMALL SCREENS - Additional compactness
   ================================================================= */
@media (max-width: 375px) {
    .hex-board {
        transform: scale(0.65);
    }

    .hex-cell {
        width: 48px;
        height: 56px;
        margin: 0 1px;
    }

    .piece {
        width: 30px;
        height: 30px;
    }

    .game-sidebar {
        padding: 8px;
        gap: 4px;
    }

    .game-controls .btn {
        min-width: 65px;
//        padding: 4px 8px;
        font-size: 10px;
    }
}

/* Very small landscape */
@media (max-width: 667px) and (orientation: landscape) and (max-height: 400px) {
    .hex-board {
        transform: scale(0.62);
    }

    .hex-cell {
        width: 46px;
        height: 54px;
    }

    .piece {
        width: 28px;
        height: 28px;
    }

    .game-sidebar {
        width: 180px;
        padding: 6px;
        gap: 4px;
    }
}

/* =================================================================
   ACCESSIBILITY & PERFORMANCE
   ================================================================= */

/* High contrast mode */
@media (max-width: 768px) and (prefers-contrast: high) {
    .hex-cell.valid-move .hex-content {
        border-width: 4px;
    }

    .piece {
        filter: contrast(1.3) brightness(1.1);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .hex-cell:active {
        transform: none;
        transition: none;
    }

    .hex-cell.fog-hidden .hex-content {
        transition: none;
    }
}

/* High-DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .piece {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    .hex-cell {
        transition: transform 0.1s ease;
    }

    .hex-cell.valid-move {
        animation-duration: 1.5s;
    }

    .hex-cell.king-in-check {
        animation-duration: 2s;
    }
}

/* Disable animations on very low-end devices */
@media (max-width: 375px) {
    .hex-cell.valid-move,
    .hex-cell.king-in-check {
        animation: none;
    }

    .hex-cell.valid-move .hex-content {
        border: 3px solid #2ecc71;
        background: rgba(46, 204, 113, 0.3);
    }

    .hex-cell.king-in-check .hex-content {
        border: 3px solid #e74c3c;
        background: rgba(231, 76, 60, 0.2);
    }
}

/* =================================================================
   GAME LIST & AUTH MOBILE IMPROVEMENTS
   ================================================================= */
@media (max-width: 768px) {
    .auth-container {
        margin: 2rem auto;
        padding: 1.5rem;
    }

    .game-list {
        max-height: 300px;
    }

    .game-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .game-info h3 {
        font-size: 14px;
    }

    .game-info p {
        font-size: 11px;
    }
}

/* =================================================================
   MOBILE UI FIXES - Add to end of assets/css/mobile.css
   ================================================================= */

/* =================================================================
   1. REMOVE PIECE SHADOWS ON MOBILE
   ================================================================= */
@media (max-width: 768px) {
    /* Remove all shadows and filters from pieces */
    .piece {
        filter: none !important;
        box-shadow: none !important;
    }
    
    /* Remove shadows from fog icons */
    .fog-icon {
        filter: none !important;
        text-shadow: none !important;
    }
    
    /* Clean rendering on high DPI screens */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .piece {
            filter: none !important;
            -webkit-filter: none !important;
        }
    }
}

/* =================================================================
   2. SCROLLABLE GAME AREA FOR LARGE BOARDS
   ================================================================= */
@media (max-width: 768px) {
    /* Make game-main scrollable with proper background */
    .game-main {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        min-height: 60vh;
        height: auto;
        padding: 10px;
        position: relative;
        /* Ensure background covers scrollable area */
        background: inherit;
    }
    
    /* Allow hex-board to exceed viewport */
    .hex-board {
        min-width: min-content;
        min-height: min-content;
        margin: 20px;
    }
    
    /* More padding for landscape to accommodate scrolling */
    @media (orientation: landscape) {
        .game-main {
            padding: 20px 30px;
            min-width: 100%;
        }
        
        /* Extra space around board for easier navigation */
        .hex-board {
            margin: 30px;
        }
    }
}

/* =================================================================
   3. OPTIMIZED LANDSCAPE LAYOUT - BETTER SPACE UTILIZATION
   ================================================================= */
@media (max-width: 768px) and (orientation: landscape) {
    .game-area {
        flex-direction: row;
        height: 100vh;
        overflow: hidden;
    }
    
    /* MUCH MORE COMPACT SIDEBAR - Maximize board space */
    .game-sidebar {
        width: 180px !important;
        min-width: 180px;
        max-width: 180px;
        order: 1;
        flex-direction: column;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: none;
        padding: 6px !important;
        gap: 4px !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Maximize board area */
    .game-main {
        order: 2;
        flex: 1;
        overflow: auto;
        padding: 8px !important;
        min-height: 100vh;
    }

    /* Ultra-compact game status */
    .game-status {
        padding: 6px !important;
        margin-bottom: 4px !important;
        border-radius: 6px;
    }

    .game-status h3 {
        font-size: 11px !important;
        margin-bottom: 2px !important;
        line-height: 1.2;
    }

    .game-status p {
        font-size: 10px !important;
        line-height: 1.3;
        margin: 1px 0;
    }

    /* Compact player list */
    .player-list {
        margin-bottom: 4px !important;
    }

    .player-list h3 {
        font-size: 11px !important;
        margin-bottom: 4px !important;
        padding: 4px;
    }

    .player-item {
        padding: 4px !important;
        margin-bottom: 2px !important;
        font-size: 10px !important;
        border-radius: 4px;
    }

    /* Very compact controls */
    .game-controls {
        gap: 3px !important;
        margin-top: 4px;
    }

    .game-controls .btn {
        min-width: 70px !important;
//        padding: 5px 6px !important;
        font-size: 10px !important;
        margin-bottom: 0 !important;
        border-radius: 4px;
    }

    /* Maintain compact board in landscape */
    .hex-board {
        transform: scale(0.65) !important;
        margin: 10px auto !important;
    }

    .hex-cell {
        width: 46px !important;
        height: 54px !important;
        margin: 0 1px !important;
    }

    .piece {
        width: 28px !important;
        height: 28px !important;
    }

    /* Even more compact for very small landscape screens */
    @media (max-height: 450px) {
        .game-sidebar {
            width: 160px !important;
            min-width: 160px;
            padding: 4px !important;
            gap: 3px !important;
        }

        .hex-board {
            transform: scale(0.55) !important;
        }

        .game-status,
        .player-list {
            margin-bottom: 3px !important;
        }
    }
}

/* =================================================================
   4. DEMO PAGE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 768px) {
    /* Demo uses even smaller board for easier viewing */
    body[data-page="demo"] .hex-board,
    [data-demo="true"] .hex-board,
    .demo-board .hex-board {
        transform: scale(0.55) !important;
        margin: 0 auto !important; /* CHANGED from 5px auto to 0 auto */
    }
    
    /* Demo sidebar optimization */
    body[data-page="demo"] .game-sidebar,
    [data-demo="true"] .game-sidebar {
        padding: 15px !important; /* CHANGED from 8px to 15px for better spacing */
    }
    
    /* Compact demo piece navigation buttons */
    .piece-nav-btn {
        padding: 6px 4px !important;
        font-size: 10px !important;
        margin-bottom: 4px !important;
        line-height: 1.2;
    }
    
    /* More compact piece descriptions */
    .piece-desc {
        font-size: 11px !important;
        padding: 8px !important;
        margin-top: 8px !important;
        line-height: 1.4;
    }
    
    .piece-desc h4 {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    .piece-desc p {
        margin: 4px 0;
    }
}

/* Demo page landscape - extra compact */
@media (max-width: 768px) and (orientation: landscape) {
    body[data-page="demo"] .game-sidebar,
    [data-demo="true"] .game-sidebar {
        width: 160px !important;
        min-width: 160px;
    }
    
    body[data-page="demo"] .hex-board,
    [data-demo="true"] .hex-board {
        transform: scale(0.5) !important;
        margin: 0 auto !important; /* CHANGED from 5px auto to 0 auto */
    }

    /* Stack navigation in two columns for demo */
    body[data-page="demo"] .piece-nav-btn,
    [data-demo="true"] .piece-nav-btn {
        font-size: 9px !important;
        padding: 4px 2px !important;
    }
}

/* =================================================================
   5. TOUCH AND SCROLL IMPROVEMENTS
   ================================================================= */
@media (max-width: 768px) {
    /* Improve button touch targets */
    .btn {
        min-height: 40px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Prevent text selection during gameplay */
    .hex-board {
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Smooth momentum scrolling */
    .game-main,
    .game-sidebar {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Prevent layout shift during keyboard appearance */
    .game-area {
        min-height: 100vh;
        min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
    }

    /* Better scroll indicators */
    .game-main::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .game-main::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }

    .game-main::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
    }

    .game-main::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }
}

/* =================================================================
   6. ADDITIONAL POLISH FOR MOBILE LANDSCAPE
   ================================================================= */
@media (max-width: 768px) and (orientation: landscape) {
    /* Ensure header doesn't waste space */
    .header {
        padding: 0.4rem 0.8rem !important;
    }

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

    .user-info {
        font-size: 11px;
    }

    .user-info .btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
        min-height: 32px;
    }

    /* Compact notifications in landscape */
    .notification {
        top: 5px;
        right: 5px;
        padding: 8px 12px !important;
        font-size: 11px !important;
        max-width: 250px;
    }

    .notification-title {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .notification-message {
        font-size: 10px;
    }
}

/* =================================================================
   7. FIX FOR VERY SMALL PORTRAIT SCREENS
   ================================================================= */
@media (max-width: 375px) and (orientation: portrait) {
    /* Even more aggressive scaling for small phones */
    .hex-board {
        transform: scale(0.52) !important;
        margin: 5px auto !important;
    }

    .hex-cell {
        width: 40px !important;
        height: 48px !important;
    }

    .piece {
        width: 24px !important;
        height: 24px !important;
    }

    /* Ultra-compact sidebar */
    .game-sidebar {
        padding: 6px !important;
        gap: 3px !important;
    }

    .game-status {
        padding: 6px !important;
    }

    .game-status h3 {
        font-size: 11px !important;
    }

    .game-status p {
        font-size: 10px !important;
    }
}

/* =================================================================
   FIX BOARD TOP CUTOFF - Add to mobile.css after previous additions
   ================================================================= */

@media (max-width: 768px) {
    /* Ensure adequate top padding/margin for large boards */
    .game-main {
        padding-top: 40px !important;  /* More space at top */
        padding-bottom: 40px !important; /* Balance at bottom */
    }
    
    /* Give hex-board more vertical breathing room */
    .hex-board {
        margin: 40px 20px !important; /* Increased top/bottom margin */
    }
    
    /* Ensure nothing clips the board */
    .game-main {
        overflow: visible !important; /* Override any overflow:hidden */
        display: block !important;
    }
}

/* Extra padding in landscape mode */
@media (max-width: 768px) and (orientation: landscape) {
    .game-main {
        padding: 50px 40px !important; /* Even more padding in landscape */
    }
    
    .hex-board {
        margin: 50px 30px !important;
    }
}

/* For very large boards (radius 7-8), need even more space */
@media (max-width: 768px) {
    /* Target large boards specifically - they have more hex-rows */
    .hex-board:has(.hex-row:nth-child(13)),  /* Radius 7 */
    .hex-board:has(.hex-row:nth-child(15)) {  /* Radius 8 */
        margin: 60px 30px !important;
    }
}

/* Alternative fix if :has() doesn't work in your browser */
@media (max-width: 768px) {
    /* Just give all boards generous spacing */
    body[data-board-size="7"] .hex-board,
    body[data-board-size="8"] .hex-board,
    .hex-board {
        margin-top: 60px !important;
        margin-bottom: 60px !important;
    }
}

/* =================================================================
   END OF MOBILE UI FIXES
   ================================================================= */

/* =================================================================
   DEMO PAGE - CONSOLIDATED (Add to END of mobile.css)
   ================================================================= */
@media (max-width: 768px) and (orientation: portrait) {
    /* Compact sidebar */
    body[data-page="demo"] .game-sidebar {
        padding: 8px !important;
        margin: 0 !important;
    }
    
    /* Compact top section */
    body[data-page="demo"] .game-status {
        padding: 4px 8px !important;
        margin-bottom: 3px !important;
    }
    
    body[data-page="demo"] .game-status h3 {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }
    
    body[data-page="demo"] .game-status p {
        font-size: 10px !important;
    }
    
    /* Make "Choose Piece Type" bigger and compact */
    body[data-page="demo"] .player-list h3 {
        margin-bottom: 4px !important;
        font-size: 16px !important;
        font-weight: bold !important;
    }
    
    /* Readable button text */
    body[data-page="demo"] .piece-nav-btn {
        font-size: 12px !important;
        padding: 7px 5px !important;
        margin-bottom: 3px !important;
    }
    
    /* Compact button grid */
    body[data-page="demo"] .player-list > div[style*="grid"] {
        margin-bottom: 4px !important;
    }
    
    /* Tight descriptions */
    body[data-page="demo"] .piece-desc {
        margin-top: 2px !important;
        padding: 4px !important;
        font-size: 11px !important;
    }
    
    body[data-page="demo"] .piece-desc h4 {
        margin-bottom: 2px !important;
        font-size: 12px !important;
    }
    
    body[data-page="demo"] .piece-desc p {
        margin: 0 !important;
    }
    
    /* Position board high */
    body[data-page="demo"] .game-main {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Fix board centering */
    body[data-page="demo"] .hex-board {
        margin: 0 auto !important;
        transform: scale(0.55) !important;
    }
    
    /* No gap between sections */
    body[data-page="demo"] .game-area {
        gap: 0 !important;
    }
}
@media (max-width: 768px) and (orientation: portrait) {
    body[data-page="demo"] .game-main {
        margin-top: -80px !important;
    }
}

/* SHRINK DEMO BOARD CONTAINER HEIGHT */
@media (max-width: 768px) and (orientation: portrait) {
    body[data-page="demo"] .game-main {
        max-height: 0px !important;
        overflow: visible !important;
    }
}

/* GAME PAGE MOBILE LAYOUT FIX */
@media (max-width: 768px) and (orientation: portrait) {
    /* Controls already full width from existing styles, ensure no side margins */
    .game-sidebar {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Pull board up and collapse container like demo */
    .game-main {
        margin-top: -80px !important;
        max-height: 0px !important;
        overflow: visible !important;
    }
    
    /* Center board horizontally */
    .hex-board {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Apply same fix for landscape if needed */
@media (max-width: 768px) and (orientation: landscape) {
    .game-main {
        margin-top: 0 !important; /* Don't pull up in landscape, side-by-side layout */
    }
}

/* COMPACT HEADER AND CONTROLS */
@media (max-width: 768px) and (orientation: portrait) {
    /* Compact header */
    .header {
        padding: 8px 12px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .header h1 {
        font-size: 16px !important;
        margin: 0 !important;
    }
    
    .user-info {
        font-size: 12px !important;
        gap: 6px !important;
    }
    
    .user-info .btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-height: 32px !important;
    }
    
    /* Tighter game controls */
    .game-sidebar {
        padding: 8px !important;
        gap: 4px !important;
    }
    
    .game-status {
        padding: 6px !important;
        margin-bottom: 3px !important;
    }
    
    .game-status h3 {
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }
    
    .game-status p {
        font-size: 12px !important;
        margin: 1px 0 !important;
    }
    
    .player-list {
        margin-bottom: 3px !important;
    }
    
    .player-item {
        padding: 5px !important;
        margin-bottom: 2px !important;
        font-size: 12px !important;
    }
    
    /* THREE BUTTONS ON ONE LINE */
    .game-controls {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        margin-top: 3px !important;
    }
    
    .game-controls .btn {
        flex: 1 !important;
        padding: 8px 6px !important;
        font-size: 11px !important;
        min-height: 38px !important;
        white-space: nowrap !important;
    }
    
    /* CENTER BOARD HORIZONTALLY */
    .game-main {
        display: flex !important;
        justify-content: center !important;
    }
    
    .hex-board {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* MOBILE LOBBY LAYOUT - Stack vertically */
@media (max-width: 768px) {
    .lobby {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* Ensure create game panel comes first */
    .lobby .panel:first-child {
        order: 1;
    }
    
    /* Active games second */
    .lobby .panel:nth-child(2) {
        order: 2;
    }
    
    /* Available games last */
    .lobby .panel:nth-child(3) {
        order: 3;
    }
    
    /* Make panels more compact */
    .panel {
        padding: 12px !important;
    }
    
    .panel h2 {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }
}

/* COMPACT LOBBY FORM - Labels beside inputs */
@media (max-width: 768px) {
    .form-group {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .form-group label {
        flex: 0 0 90px !important;
        font-size: 11px !important;
        margin-bottom: 0 !important;
        text-align: right !important;
    }
    
    .form-group input,
    .form-group select {
        flex: 1 !important;
        padding: 8px !important;
        font-size: 13px !important;
    }
    
    /* Stack the two-column form rows on mobile */
    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    /* Helper text below */
    .form-helper {
        margin-top: 3px !important;
        font-size: 10px !important;
    }
    
    /* Timer settings more compact */
    .timer-settings {
        padding: 8px !important;
        margin-top: 6px !important;
    }
    
    .timer-info {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }
}

/* COMPACT CHECKBOXES */
@media (max-width: 768px) {
    /* Make checkbox group compact */
    .form-group.checkbox-group {
        display: block !important;
        margin-bottom: 8px !important;
    }
    
    .form-group.checkbox-group label {
        flex: 0 0 90px !important;
        align-self: flex-start !important;
        padding-top: 4px !important;
    }
    
    /* Shrink checkbox containers */
    .form-group input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        margin-right: 6px !important;
    }
    
    .form-group label[for*="fog"],
    .form-group label[for*="shogi"] {
        display: flex !important;
        align-items: center !important;
        padding: 6px 10px !important;
        margin-bottom: 4px !important;
        font-size: 12px !important;
    }
    
    /* If there's a wrapper around checkboxes, make it compact */
    .checkbox-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
}

/* PUT CHECKBOXES SIDE BY SIDE */
@media (max-width: 768px) {
    /* Container for fog and shogi checkboxes */
    #fog_of_war_container,
    .checkbox-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    
    /* Each checkbox option takes half width */
    .form-group label[for="fog_of_war"],
    .form-group label[for="shogi_drops"] {
        flex: 1 !important;
        min-width: 45% !important;
        padding: 8px !important;
        font-size: 12px !important;
    }
    
    /* Align Options label to top */
    .form-group label:first-child {
        align-self: flex-start !important;
        padding-top: 8px !important;
    }
}


/* FORCE CHECKBOXES INLINE - FINAL FIX */
@media (max-width: 768px) {
    /* Remove the flex layout from the parent */
    .form-group:has(label[for="fog_of_war"]) {
        display: block !important;
    }
    
    /* Move Options label to left like other labels */
    .form-group:has(label[for="fog_of_war"]) > label:first-child {
        display: inline-block !important;
        width: 90px !important;
        text-align: right !important;
        vertical-align: top !important;
        padding-top: 10px !important;
        margin-right: 8px !important;
    }
    
    /* Create inline container for checkboxes */
    .form-group:has(label[for="fog_of_war"]) > label[for="fog_of_war"],
    .form-group:has(label[for="fog_of_war"]) > label[for="shogi_drops"] {
        display: inline-block !important;
        width: calc(50% - 50px) !important;
        padding: 8px !important;
        margin: 0 2px !important;
        font-size: 12px !important;
        vertical-align: top !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 6px !important;
    }
}

/* =================================================================
   8. PORTRAIT GAME OPTIONS FIX - Ultra Compact Checkboxes
   ================================================================= */
@media (max-width: 768px) and (orientation: portrait) {
    /* Remove bulky backgrounds and reduce spacing for game options */
    .option-compact {
        background: transparent !important;
        border: none !important;
        padding: 3px 4px !important;
        gap: 4px !important;
        border-radius: 0 !important;
    }
    
    .option-compact:hover {
        background: transparent !important;
    }
    
    /* Smaller checkbox */
    .option-compact input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
    }
    
    /* Smaller text */
    .option-text {
        font-size: 11px !important;
        font-weight: normal !important;
    }
    
    /* Reduce overall container spacing */
    .hexchess-options-compact {
        gap: 2px !important;
        margin-top: 2px !important;
    }
    
    /* Hide help buttons on portrait to save space */
    .help-btn {
        display: none !important;
    }
    
    /* Make tooltips more compact if they show */
    .tooltip-compact {
        font-size: 9px !important;
        padding: 4px 6px !important;
    }
}

/* =================================================================
   DEMO PAGE - MOBILE OPTIMIZATION (Proper Specificity)
   No !important abuse - using specific selectors
   ================================================================= */

/* Mobile Portrait - Demo Page */
@media (max-width: 768px) and (orientation: portrait) {
    /* Target demo page specifically with body attribute + class */
    body[data-page="demo"] .game-area {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        align-items: stretch;
    }
    
    /* Compact control sidebar */
    body[data-page="demo"] .game-sidebar {
        width: 100%;
        order: 1;
        padding: 12px;
        margin: 0;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(20px);
    }
    
    /* Compact status section */
    body[data-page="demo"] .game-status {
        padding: 8px;
        margin-bottom: 8px;
    }
    
    body[data-page="demo"] .game-status h3 {
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    body[data-page="demo"] .game-status p {
        font-size: 11px;
        margin: 0;
    }
    
    /* Piece selection header */
    body[data-page="demo"] .player-list h3 {
        font-size: 14px;
        margin-bottom: 8px;
        font-weight: 600;
    }
    
    /* Grid for piece navigation buttons */
    body[data-page="demo"] .player-list > div[style*="grid"] {
        gap: 6px;
        margin-bottom: 8px;
    }
    
    /* Piece navigation buttons - larger for touch */
    body[data-page="demo"] .piece-nav-btn {
        font-size: 12px;
        padding: 10px 6px;
        margin-bottom: 0;
        line-height: 1.3;
        min-height: 42px;
    }
    
    /* Piece descriptions - compact */
    body[data-page="demo"] .piece-desc {
        font-size: 11px;
        padding: 10px;
        margin-top: 8px;
        line-height: 1.4;
    }
    
    body[data-page="demo"] .piece-desc h4 {
        font-size: 12px;
        margin-bottom: 4px;
    }
    
    body[data-page="demo"] .piece-desc p {
        margin: 4px 0;
    }
    
    /* Back button - compact */
    body[data-page="demo"] .btn-secondary {
        padding: 10px;
        font-size: 13px;
        margin-top: 8px;
    }
    
    /* BOARD SECTION - Position directly below with no gap */
    body[data-page="demo"] .game-main {
        order: 2;
        width: 100%;
        padding: 8px 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        background: rgba(255, 255, 255, 0.05);
        min-height: auto;
    }
    
    /* Board sizing for mobile portrait */
    body[data-page="demo"] .hex-board {
        transform: scale(0.6);
        margin: -20px auto -30px auto;
        transform-origin: center top;
    }
}

/* Mobile Landscape - Demo Page */
@media (max-width: 768px) and (orientation: landscape) {
    /* Side-by-side layout for landscape */
    body[data-page="demo"] .game-area {
        display: flex;
        flex-direction: row;
        gap: 0;
        padding: 0;
    }
    
    /* Sidebar on left in landscape */
    body[data-page="demo"] .game-sidebar {
        width: 200px;
        flex-shrink: 0;
        padding: 10px;
        overflow-y: auto;
        max-height: 100vh;
    }
    
    /* Smaller text for landscape */
    body[data-page="demo"] .game-status h3,
    body[data-page="demo"] .player-list h3 {
        font-size: 12px;
        margin-bottom: 6px;
    }
    
    body[data-page="demo"] .piece-nav-btn {
        font-size: 10px;
        padding: 6px 4px;
        min-height: 36px;
    }
    
    /* Board on right in landscape */
    body[data-page="demo"] .game-main {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }
    
    /* Smaller board for landscape */
    body[data-page="demo"] .hex-board {
        transform: scale(0.5);
        margin: 0 auto;
    }
}

/* Tablet size adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    body[data-page="demo"] .game-area {
        max-width: 900px;
        margin: 20px auto;
        gap: 20px;
    }
    
    body[data-page="demo"] .hex-board {
        transform: scale(0.75);
    }
}

/* =================================================================
   SPECIFICITY NOTES:
   - body[data-page="demo"] = 0,1,1 specificity
   - Adding .class = 0,1,2 or more
   - This beats most base.css rules (0,1,0 or 0,0,1)
   - Only use !important if inline styles exist that we can't remove
   ================================================================= */

   /* =================================================================
   LOBBY MOBILE OPTIMIZATION (Proper Specificity)
   Using media queries + specific selectors instead of !important
   ================================================================= */

@media (max-width: 768px) {
    /* Compact panel padding */
    .lobby .panel {
        padding: 12px;
    }
    
    .lobby .panel h2 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    /* FORM GROUPS - Labels beside inputs */
    .lobby .form-group {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }
    
    .lobby .form-group label {
        flex: 0 0 85px;
        font-size: 12px;
        margin-bottom: 0;
        text-align: right;
        font-weight: 600;
    }
    
    .lobby .form-group input,
    .lobby .form-group select {
        flex: 1;
        padding: 10px;
        font-size: 14px;
        min-height: 42px;
        border-radius: 6px;
    }
    
    /* Helper text */
    .lobby .form-helper {
        font-size: 10px;
        margin-top: 4px;
        padding-left: 93px;
    }
    
    /* GAME OPTIONS - Compact Checkboxes */
    /* Target the Options form group specifically */
    .lobby .form-group:has(.hexchess-options-compact),
    .lobby .form-group:has(.option-compact) {
        display: block;
        margin-bottom: 10px;
    }
    
    .lobby .form-group:has(.hexchess-options-compact) > label:first-child,
    .lobby .form-group:has(.option-compact) > label:first-child {
        display: block;
        text-align: left;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 600;
    }
    
    /* Checkbox container - side by side */
    .lobby .hexchess-options-compact {
        display: flex;
        flex-direction: row;
        gap: 6px;
        flex-wrap: wrap;
    }
    
    /* Individual checkbox options - take ~50% width each */
    .lobby .option-compact {
        flex: 1 1 48%;
        display: flex;
        align-items: center;
        padding: 8px 6px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 6px;
        min-height: 40px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .lobby .option-compact:hover,
    .lobby .option-compact:has(input:checked) {
        background: rgba(102, 126, 234, 0.15);
        border-color: rgba(102, 126, 234, 0.4);
    }
    
    .lobby .option-compact input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0 6px 0 0;
        flex-shrink: 0;
        cursor: pointer;
    }
    
    .lobby .option-compact .option-text {
        font-size: 11px;
        line-height: 1.2;
        font-weight: 600;
        flex: 1;
    }
    
    /* Tooltip compact */
    .lobby .tooltip-compact {
        width: 100%;
        font-size: 10px;
        padding: 6px 8px;
        margin-top: 4px;
        background: rgba(102, 126, 234, 0.1);
        border-left: 3px solid rgba(102, 126, 234, 0.5);
        border-radius: 4px;
        line-height: 1.3;
    }
    
    /* Help button - compact */
    .lobby .help-btn {
        width: 18px;
        height: 18px;
        padding: 0;
        font-size: 12px;
        margin-left: 4px;
        flex-shrink: 0;
    }
    
    /* Timer settings - compact */
    .lobby .timer-settings {
        padding: 10px;
        margin-top: 8px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 6px;
    }
    
    .lobby .timer-info {
        font-size: 11px;
        margin-bottom: 8px;
        font-weight: 600;
    }
    
    /* Form rows - stack vertically on mobile */
    .lobby .form-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    /* Buttons */
    .lobby .btn {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
    }
    
    .lobby .btn-reset {
        font-size: 11px;
        padding: 6px 10px;
        min-height: 32px;
        margin-left: 8px;
        display: inline-block;
        width: auto;
    }
    
    /* Stack panels vertically */
    .lobby {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Extra compact for very small screens */
@media (max-width: 360px) {
    .lobby .form-group label {
        flex: 0 0 70px;
        font-size: 11px;
    }
    
    .lobby .option-compact {
        flex: 1 1 100%;
    }
    
    .lobby .option-compact .option-text {
        font-size: 10px;
    }
}

/* Landscape orientation - keep compact layout */
@media (max-width: 768px) and (orientation: landscape) {
    .lobby .form-group label {
        flex: 0 0 75px;
    }
    
    .lobby .panel {
        padding: 10px;
    }
}

/* =================================================================
   WHY THIS IS BETTER:
   
   Before: .form-group { ... !important }
   - Specificity: 0,1,0 + !important = nuclear option
   - Hard to override if needed
   - Code smell
   
   After: .lobby .form-group { ... }
   - Specificity: 0,2,0 (beats base.css 0,1,0)
   - Can still be overridden if needed
   - Clean, maintainable code
   
   The @media query doesn't affect specificity, but combined with
   .lobby or body[data-page] gives us enough specificity to override
   base styles without !important.
   ================================================================= */

   /* =================================================================
   GAME PAGE - MOBILE TOUCH OPTIMIZATION (Proper Specificity)
   Using specific selectors instead of !important
   ================================================================= */

/* Mobile Portrait - Game Page */
@media (max-width: 768px) and (orientation: portrait) {
    /* Compact header */
    .game-area + .header,
    body .header {
        padding: 8px 12px;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .header h1 {
        font-size: 16px;
        margin: 0;
    }
    
    .header .user-info {
        font-size: 11px;
        gap: 6px;
    }
    
    .header .user-info .btn {
        padding: 6px 10px;
        font-size: 11px;
        min-height: 32px;
    }
    
    /* GAME AREA - Sidebar on top, board below */
    .game-area {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        gap: 0;
    }
    
    /* SIDEBAR - Compact controls at top */
    .game-area .game-sidebar {
        width: 100%;
        order: 1;
        padding: 10px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    /* Game status - horizontal layout */
    .game-area .game-status {
        padding: 8px;
        margin-bottom: 0;
        text-align: center;
    }
    
    .game-area .game-status h3 {
        font-size: 13px;
        margin-bottom: 3px;
    }
    
    .game-area .game-status p {
        font-size: 11px;
        margin: 2px 0;
    }
    
    /* Player list - compact on mobile */
    .game-area .player-list {
        margin-bottom: 0;
        overflow-x: auto;
    }
    
    .game-area .player-list h3 {
        font-size: 12px;
        margin-bottom: 6px;
    }
    
    .game-area .player-item {
        padding: 6px 8px;
        margin-bottom: 4px;
        font-size: 11px;
        border-radius: 4px;
    }
    
    /* THREE BUTTONS IN A ROW */
    .game-area .game-controls {
        display: flex;
        flex-direction: row;
        gap: 6px;
        margin-top: 0;
    }
    
    .game-area .game-controls .btn {
        flex: 1;
        padding: 10px 6px;
        font-size: 11px;
        min-height: 40px;
        white-space: nowrap;
        margin-bottom: 0;
    }
    
    /* BOARD SECTION - Center horizontally */
    .game-area .game-main {
        order: 2;
        flex: 1;
        padding: 10px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 60vh;
        background: rgba(255, 255, 255, 0.03);
    }
    
    /* HEX BOARD - Optimized for mobile touch */
    .game-area .hex-board {
        transform: scale(0.7);
        margin: 0 auto;
        transform-origin: center center;
    }
    
    /* HEX CELLS - Larger touch targets */
    .game-area .hex-cell {
        width: 56px;
        height: 64px;
        margin: 0 3px;
    }
    
    /* PIECES - Better visibility on mobile */
    .game-area .piece {
        font-size: 32px;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Touch feedback - more visible */
    .game-area .hex-cell:active {
        transform: scale(0.95);
        opacity: 0.9;
    }
    
    .game-area .hex-cell.selected {
        transform: scale(1.15);
        z-index: 100;
    }
    
    .game-area .hex-cell.valid-move::before {
        border-width: 5px;
    }
    
    /* Responsive board sizes for different device widths */
    @media (max-width: 375px) {
        /* iPhone SE, small phones */
        .game-area .hex-board {
            transform: scale(0.6);
        }
    }
    
    @media (min-width: 376px) and (max-width: 414px) {
        /* iPhone 12/13/14, standard phones */
        .game-area .hex-board {
            transform: scale(0.65);
        }
    }
    
    @media (min-width: 415px) and (max-width: 768px) {
        /* iPhone Plus, large phones */
        .game-area .hex-board {
            transform: scale(0.75);
        }
    }
}

/* Mobile Landscape - Game Page */
@media (max-width: 768px) and (orientation: landscape) {
    /* Horizontal layout with compact sidebar */
    .game-area {
        flex-direction: row;
    }
    
    .game-area .game-sidebar {
        width: 200px;
        order: 1;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: none;
        padding: 8px;
        overflow-y: auto;
        max-height: 100vh;
    }
    
    .game-area .game-status,
    .game-area .player-list,
    .game-area .game-controls {
        font-size: 10px;
    }
    
    .game-area .game-controls {
        flex-direction: column;
    }
    
    .game-area .game-controls .btn {
        font-size: 10px;
        padding: 8px 6px;
        min-height: 36px;
    }
    
    .game-area .game-main {
        order: 2;
        flex: 1;
        min-height: 100vh;
    }
    
    .game-area .hex-board {
        transform: scale(0.55);
    }
}

/* Tablet - Game Page */
@media (min-width: 769px) and (max-width: 1024px) {
    .game-area .hex-board {
        transform: scale(0.85);
    }
    
    .game-area .hex-cell {
        width: 54px;
        height: 62px;
    }
    
    .game-area .piece {
        font-size: 34px;
    }
}

/* Large board size adjustments - prevent overflow */
@media (max-width: 768px) {
    /* Jumbo boards (8 radius) - has 15+ rows */
    .game-area .hex-board:has(.hex-row:nth-child(n+15)) {
        transform: scale(0.5);
    }
    
    /* Large boards (7 radius) - has 13-14 rows */
    .game-area .hex-board:has(.hex-row:nth-child(13)):not(:has(.hex-row:nth-child(15))) {
        transform: scale(0.6);
    }
    
    /* Ensure board stays centered and visible */
    .game-area .hex-board {
        max-width: 100vw;
        overflow: visible;
    }
}

/* Prevent text selection during gameplay */
@media (max-width: 768px) {
    .game-area .hex-cell,
    .game-area .piece,
    .game-area .hex-content {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Smooth scrolling for overflowing content */
    .game-area .game-sidebar {
        -webkit-overflow-scrolling: touch;
    }
}

/* =================================================================
   SPECIFICITY BREAKDOWN:
   
   .game-area .game-sidebar
   - Class + descendant = 0,2,0
   - Beats base.css .game-sidebar (0,1,0)
   
   @media doesn't affect specificity, but helps organize breakpoints
   
   Alternative if needed:
   - Add data-page="game" to body
   - Use body[data-page="game"] .game-area (0,2,1 specificity)
   
   Why this works:
   - Specific enough to override base styles
   - Not so specific that it can't be overridden
   - Maintainable and follows CSS best practices
   ================================================================= */