/* === LANDSCAPE SPACE RECLAIM CSS === */
/* Complete vertical space optimization for mobile landscape mode */

/* === ELIMINATE TOP/BOTTOM SPACING === */
body.layout-landscape {
    padding: 0 !important; /* Remove all body padding */
    margin: 0 !important;
    overflow: hidden;
}

/* Remove safe area insets in landscape mode */
@supports (padding: max(0px)) {
    body.layout-landscape {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: max(2px, env(safe-area-inset-left)) !important;
        padding-right: max(2px, env(safe-area-inset-right)) !important;
    }
}

/* === PWA SPECIFIC OVERRIDES === */
/* PWA apps may have different safe area handling */
body.layout-landscape {
    /* Force override any PWA status bar spacing */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Force remove webkit safe areas for PWA */
@supports (-webkit-touch-callout: none) {
    body.layout-landscape {
        padding-top: 0 !important;
        -webkit-appearance: none;
    }
}

/* === MOVE SETTINGS TO MAP AREA === */
/* Position settings button in upper right of canvas/map area to avoid UI panel */
body.layout-landscape #settings-button-container {
    top: 10px !important;
    right: 10px !important; /* Move to right side over canvas, away from UI panel */
    left: auto !important; /* Override any left positioning */
    z-index: 100 !important; /* Above canvas but below modals */
    position: fixed !important;
}

body.layout-landscape #open-settings-button {
    width: 35px !important;
    height: 35px !important;
    font-size: 1rem !important;
    background-color: rgba(40,40,40,0.7) !important;
    border: 1px solid var(--grey-border) !important;
    box-shadow: 0 2px 0 #333 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important; /* Optimize for fast taps */
}

/* Alternative: If you want to keep settings accessible, make it tiny and move to corner */
/*
body.layout-landscape #settings-button-container {
    top: 5px !important;
    right: 5px !important;
    z-index: 1000;
}

body.layout-landscape #open-settings-button {
    width: 25px !important;
    height: 25px !important;
    font-size: 0.8rem !important;
    background-color: rgba(40,40,40,0.6) !important;
    border-width: 1px !important;
}
*/

/* === HIDE OTHER TOP ELEMENTS === */
body.layout-landscape .achievement-popup,
body.layout-landscape #multiplayer-turn-indicator,
body.layout-landscape .game-toast {
    display: none !important; /* Hide notification elements that take top space */
}

/* === FULL HEIGHT GAME WRAPPER === */
body.layout-landscape .game-wrapper {
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* === UNIFIED CONTAINER WITH SINGLE BORDER === */
body.layout-landscape .ui-container {
    /* Single border around the entire container */
    border-radius: 0;
    border-style: solid;
    border-width: 2px;
    border-image-slice: 8 fill;
    border-image-repeat: stretch;
    border-image-source: var(--ui-border-image);
    background-color: var(--dark-ui);
    padding: 6px;
    gap: 0; /* Remove gaps between boxes */
    height: 100vh;
    box-sizing: border-box;
}

/* === REMOVE INDIVIDUAL BORDERS === */
body.layout-landscape .stats-box,
body.layout-landscape .actions-box,
body.layout-landscape .log-box {
    border: none !important;
    border-image: none !important;
    background-color: transparent;
    padding: 4px 6px; /* Reduced padding */
    margin: 0;
}

/* === SEPARATING LINES BETWEEN SECTIONS === */
body.layout-landscape .stats-box {
    border-bottom: 1px solid var(--grey-border);
    padding-bottom: 6px;
    flex-shrink: 0 !important; /* Prevent shrinking */
}

body.layout-landscape .actions-box {
    border-bottom: 1px solid var(--grey-border);
    padding-top: 6px;
    padding-bottom: 4px;
    flex-shrink: 0 !important; /* Prevent shrinking */
    height: auto !important; /* Let content determine height */
    min-height: auto !important;
    max-height: none !important;
}

body.layout-landscape .log-box {
    padding-top: 6px;
    flex-grow: 1; /* Take remaining space */
    flex-shrink: 1; /* Allow shrinking if needed */
    min-height: 0 !important; /* Override any min-height that causes overflow */
    overflow-y: auto; /* Add scrolling if content is too tall */
    height: 0; /* Force flex-grow to work properly */
}

/* === TEXT SIZE SCALING (except HP/XP) === */
body.layout-landscape .stats-box p:not(.hp-bar-line p):not(.xp-bar-line p),
body.layout-landscape .log-box p,
body.layout-landscape .actions-box h2,
body.layout-landscape .body-text {
    font-size: clamp(6px, 1.4vmin, 0.7rem) !important;
    line-height: 1.2;
}

/* Keep HP/XP text same size */
body.layout-landscape .stat-bar-line p {
    font-size: clamp(8px, 1.6vmin, 0.8rem) !important;
}

/* === COMPACT ADVENTURER BOX === */
body.layout-landscape .core-stats-grid {
    gap: 1px 4px; /* Reduced from 2px 5px */
    margin-bottom: 1px; /* Further reduced */
}

body.layout-landscape .stat-bars-container {
    margin-top: 0px !important; /* Remove gap between stats and HP/XP */
    padding-top: 0px !important; /* Remove padding */
}

body.layout-landscape .stat-bar-line {
    margin-top: 1px; /* Reduced from 2px */
    gap: 6px; /* Reduced from 8px */
}

/* === COMPACT ACTION BUTTONS === */
body.layout-landscape .action-buttons-grid {
    gap: 6px !important; /* Reduced from 10px */
    margin-top: 6px !important; /* Reduced from 10px */
}

body.layout-landscape .action-btn-desktop {
    padding: 8px 6px !important; /* Reduced from 12px 10px */
    font-size: 0.75rem !important; /* Reduced from 0.9rem */
}

/* === COMPACT HEADERS === */
body.layout-landscape h2 {
    font-size: clamp(8px, 1.5vmin, 0.75rem) !important;
    margin: 0 0 4px 0 !important; /* Reduced margins */
    line-height: 1.1;
}

/* === MESSAGE LOG OPTIMIZATION === */
body.layout-landscape #portrait-message-log,
body.layout-landscape #landscape-message-log {
    gap: 3px; /* Reduced from 5px */
}

/* === MOBILE CONTROLS ADJUSTMENT === */
body.layout-landscape #mobile-dpad-container,
body.layout-landscape #mobile-actions-container {
    bottom: 5px !important; /* Move closer to edge */
}

/* === VIRTUAL JOYSTICK FIX === */
/* Ensure virtual joystick works properly in landscape */
body.layout-landscape #virtual-joystick-container {
    z-index: 51 !important;
    pointer-events: none !important;
}

body.layout-landscape #virtual-joystick-touch-zone {
    z-index: 50 !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 40% !important; /* leftScreenZone default */
    height: 100% !important;
    background: transparent !important;
    touch-action: none !important;
}

/* Remove safe area spacing from mobile controls */
@supports (padding: max(0px)) {
    body.layout-landscape #mobile-actions-container {
        right: max(5px, env(safe-area-inset-right)) !important;
        bottom: 5px !important;
    }

    body.layout-landscape #mobile-dpad-container {
        left: max(5px, env(safe-area-inset-left)) !important;
        bottom: 5px !important;
    }
}

/* === ULTRA-COMPACT MODE FOR VERY SHORT SCREENS === */
@media screen and (max-height: 400px) and (orientation: landscape) {
    body.layout-landscape .ui-container {
        padding: 4px;
        border-width: 1px; /* Even thinner border */
    }
    
    body.layout-landscape .stats-box,
    body.layout-landscape .actions-box,
    body.layout-landscape .log-box {
        padding: 2px 4px;
    }
    
    body.layout-landscape .stats-box {
        flex-shrink: 0 !important;
    }
    
    body.layout-landscape .actions-box {
        flex-shrink: 0 !important;
        height: auto !important;
    }
    
    body.layout-landscape .log-box {
        min-height: 0 !important;
        height: 0;
        overflow-y: auto;
    }
    
    body.layout-landscape h2 {
        font-size: clamp(6px, 1.3vmin, 0.65rem) !important;
        margin: 0 0 2px 0 !important;
    }
    
    body.layout-landscape .action-buttons-grid {
        gap: 4px !important;
        margin-top: 4px !important;
    }
    
    body.layout-landscape .action-btn-desktop {
        padding: 6px 4px !important;
        font-size: 0.65rem !important;
    }
    
    body.layout-landscape .core-stats-grid {
        gap: 0px 3px;
        margin-bottom: 0px;
    }
    
    body.layout-landscape .stat-bars-container {
        margin-top: 0px !important;
        padding-top: 0px !important;
    }
    
    body.layout-landscape .stat-bar-line {
        margin-top: 0px;
        gap: 4px;
    }

    /* Hide mobile controls on extremely short screens but preserve virtual joystick */
    body.layout-landscape #mobile-dpad-container,
    body.layout-landscape #mobile-actions-container {
        display: none !important;
    }
    
    /* Keep virtual joystick working even on short screens */
    body.layout-landscape #virtual-joystick-container,
    body.layout-landscape #virtual-joystick-touch-zone {
        display: block !important;
        z-index: 50 !important;
    }
}

/* === PREVENT SCROLLING === */
body.layout-landscape {
    overflow: hidden !important;
    position: relative !important; /* Ensure proper positioning context */
}

body.layout-landscape .game-wrapper {
    overflow: hidden !important;
    position: relative !important; /* Ensure proper positioning context */
}

/* === ALLOW START SCREEN TO SCROLL IN LANDSCAPE === */
body.layout-landscape #start-screen {
    overflow-y: auto !important; /* Allow start screen to scroll */
    overflow-x: hidden !important;
}

/* === CANVAS OPTIMIZATION === */
body.layout-landscape .canvas-panel {
    margin: 0 !important;
    padding: 0 !important;
}

body.layout-landscape #game-canvas {
    border-radius: 0 !important; /* Square corners for max space */
}