/**
 * Mobile Portrait Stat Display Box Fixes
 * 
 * Addresses spacing issues and overflow problems in mobile portrait mode
 * as specifically requested by the user.
 */

/* === MOBILE PORTRAIT STAT BOX FIXES === */

@media (max-width: 768px) and (orientation: portrait) {
    
    /* Fix the main portrait stats box container */
    .ui-container#portrait-ui {
        height: 25vh !important;
        max-height: 200px !important;
        min-height: 150px !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        padding: 4px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Fix individual stat and log boxes */
    #portrait-ui > .stats-box,
    #portrait-ui > .log-box {
        width: calc(50% - 4px) !important; /* Account for gap */
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 6px 4px !important; /* Tighter padding */
    }
    
    /* Fix stats box content to prevent overflow */
    .stats-box {
        border: 2px solid var(--grey-border) !important;
        background: var(--dark-ui) !important;
        border-radius: 8px !important;
        position: relative !important;
    }
    
    /* Fix stats box header */
    .stats-box h2 {
        margin: 0 0 4px 0 !important;
        font-size: clamp(10px, 2.5vw, 14px) !important;
        line-height: 1.1 !important;
        flex-shrink: 0 !important;
    }
    
    /* Fix stats content area */
    .stats-box > div:not(h2) {
        flex: 1 !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }
    
    /* Fix individual stat items */
    .stats-box p {
        margin: 1px 0 !important;
        font-size: clamp(8px, 2vw, 11px) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Fix core stats grid */
    .core-stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2px 8px !important;
        font-size: clamp(8px, 2vw, 11px) !important;
        overflow: hidden !important;
    }
    
    /* Fix stat bars container */
    .stat-bars-container {
        margin-top: 4px !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
    }
    
    /* Fix individual stat bar lines */
    .stat-bar-line {
        margin-top: 2px !important;
        overflow: hidden !important;
    }
    
    .stat-bar-line p {
        font-size: clamp(8px, 2vw, 11px) !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Fix progress bars */
    .stat-bar {
        height: 12px !important;
        margin-top: 1px !important;
        border-radius: 4px !important;
        overflow: hidden !important;
    }
    
    /* Fix log box similar to stats box */
    .log-box {
        border: 2px solid var(--grey-border) !important;
        background: var(--dark-ui) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .log-box h2 {
        margin: 0 0 4px 0 !important;
        font-size: clamp(10px, 2.5vw, 14px) !important;
        line-height: 1.1 !important;
        flex-shrink: 0 !important;
    }
    
    /* Fix message log to not overflow */
    #portrait-message-log {
        height: calc(100% - 24px) !important; /* Account for header */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        flex: 1 !important;
        min-height: 0 !important;
        font-size: clamp(8px, 2vw, 10px) !important;
        line-height: 1.2 !important;
        padding: 2px !important;
    }
    
    /* Fix message log paragraphs */
    #portrait-message-log p {
        margin: 1px 0 !important;
        font-size: clamp(8px, 2vw, 10px) !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* === ADDITIONAL MOBILE PORTRAIT FIXES === */

@media (max-width: 480px) and (orientation: portrait) {
    
    /* Even tighter spacing for very small screens */
    .ui-container#portrait-ui {
        height: 22vh !important;
        max-height: 180px !important;
        gap: 6px !important;
        padding: 3px !important;
    }
    
    #portrait-ui > .stats-box,
    #portrait-ui > .log-box {
        padding: 4px 3px !important;
    }
    
    .stats-box h2,
    .log-box h2 {
        font-size: clamp(9px, 2.2vw, 12px) !important;
    }
    
    .stats-box p,
    .stat-bar-line p {
        font-size: clamp(7px, 1.8vw, 10px) !important;
    }
    
    .core-stats-grid {
        gap: 1px 6px !important;
        font-size: clamp(7px, 1.8vw, 10px) !important;
    }
    
    #portrait-message-log {
        font-size: clamp(7px, 1.8vw, 9px) !important;
    }
    
    #portrait-message-log p {
        font-size: clamp(7px, 1.8vw, 9px) !important;
    }
    
    .stat-bar {
        height: 10px !important;
    }
}

/* === ULTRA COMPACT MODE FOR VERY SMALL SCREENS === */

@media (max-width: 320px) and (orientation: portrait) {
    
    .ui-container#portrait-ui {
        height: 20vh !important;
        max-height: 160px !important;
        gap: 4px !important;
        padding: 2px !important;
    }
    
    #portrait-ui > .stats-box,
    #portrait-ui > .log-box {
        padding: 3px 2px !important;
    }
    
    .stats-box h2,
    .log-box h2 {
        font-size: clamp(8px, 2vw, 11px) !important;
        margin: 0 0 2px 0 !important;
    }
    
    .stats-box p,
    .stat-bar-line p {
        font-size: clamp(6px, 1.6vw, 9px) !important;
    }
    
    .core-stats-grid {
        gap: 1px 4px !important;
        font-size: clamp(6px, 1.6vw, 9px) !important;
    }
    
    #portrait-message-log {
        font-size: clamp(6px, 1.6vw, 8px) !important;
        height: calc(100% - 20px) !important;
    }
    
    #portrait-message-log p {
        font-size: clamp(6px, 1.6vw, 8px) !important;
    }
    
    .stat-bar {
        height: 8px !important;
    }
    
    .stat-bars-container {
        margin-top: 2px !important;
    }
    
    .stat-bar-line {
        margin-top: 1px !important;
    }
}

/* === PREVENT CONTAINER OVERFLOW === */

@media (max-width: 768px) and (orientation: portrait) {
    
    /* Ensure the game canvas doesn't push UI off screen */
    .game-canvas-container {
        height: calc(75vh - 20px) !important; /* Leave room for UI */
        min-height: calc(100vh - 220px) !important;
        overflow: hidden !important;
    }
    
    /* Ensure the main game area respects the UI space */
    .game-area {
        height: calc(75vh - 20px) !important;
        max-height: calc(100vh - 220px) !important;
        overflow: hidden !important;
    }
    
    /* Fix any scroll bars in the UI area */
    .ui-panel {
        overflow: hidden !important;
        height: 25vh !important;
        max-height: 200px !important;
        min-height: 150px !important;
    }
}