/**
 * Adventurer Box Layout Fixes
 * Version: 4.2.1-Controls
 * 
 * Targeted fixes for spacing and font consistency in the adventurer stats box
 */

/* === REDUCED VERTICAL SPACING === */

/* Reduce spacing between stat rows */
.core-stats-grid {
    gap: 4px 15px !important; /* Reduced from 8px to 4px vertically */
}

/* Reduce spacing between stats and HP/XP bars */
.stat-bars-container {
    margin-top: 4px !important; /* Reduced spacing */
}

/* Tighter spacing for HP/XP lines */
.stat-bar-line {
    margin-top: 4px !important; /* Reduced from 8px to 4px */
}

/* Reduce margins on all stats box paragraphs */
.stats-box p {
    margin: 1px 0 !important; /* Reduced from 2px to 1px */
}

/* === CONSISTENT FONT SIZES === */

/* Make HP and XP text same size as other stats (desktop specific) */
@media (min-width: 769px) {
    .stats-box p,
    .stat-bar-line p {
        font-size: clamp(8px, 1.6vmin, 0.8rem) !important;
    }
    
    /* Override desktop.css larger font size for stat bars */
    .stat-bar-line p {
        font-size: clamp(8px, 1.6vmin, 0.8rem) !important; /* Match other stats instead of 1rem */
    }
    
    /* Keep core stats consistent */
    .core-stats-grid {
        font-size: clamp(8px, 1.6vmin, 0.8rem) !important; /* Match instead of 1rem */
    }
}

/* === TIGHTER LAYOUT FOR STATS BOX === */

.stats-box {
    padding: 6px 8px !important; /* Slightly tighter padding */
}

.stats-box h2 {
    margin: 0 0 4px 0 !important; /* Reduced bottom margin */
}

/* Ensure consistent line height for compact display */
.stats-box p,
.stat-bar-line p {
    line-height: 1.2 !important;
}

/* === MOBILE AND TABLET ADJUSTMENTS === */

@media (max-width: 768px) {
    /* Keep mobile spacing as is - these fixes are mainly for desktop */
    .core-stats-grid {
        gap: 2px 8px !important;
    }
    
    .stat-bar-line {
        margin-top: 2px !important;
    }
}

/* === LANDSCAPE MODE ADJUSTMENTS === */

@media (orientation: landscape) and (max-height: 600px) {
    /* Even tighter spacing in landscape */
    .core-stats-grid {
        gap: 2px 10px !important;
    }
    
    .stat-bars-container {
        margin-top: 2px !important;
    }
    
    .stat-bar-line {
        margin-top: 2px !important;
    }
    
    .stats-box {
        padding: 4px 6px !important;
    }
}

/* === PREVENT TEXT WRAPPING === */

/* Force single line display and allow font to shrink to fit */
.stats-box p,
.stat-bar-line p,
.core-stats-grid {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important; /* Allow flexbox shrinking */
}

/* Use CSS container queries for even better responsive font sizing */
.stats-box {
    container-type: inline-size !important;
}

@container (max-width: 120px) {
    .stats-box p,
    .stat-bar-line p,
    .core-stats-grid {
        font-size: clamp(6px, 1.2vmin, 0.6rem) !important;
    }
}

@container (max-width: 100px) {
    .stats-box p,
    .stat-bar-line p,
    .core-stats-grid {
        font-size: clamp(5px, 1vmin, 0.5rem) !important;
    }
}

/* Additional shrinking for very narrow containers */
@container (max-width: 80px) {
    .stats-box p,
    .stat-bar-line p,
    .core-stats-grid {
        font-size: clamp(4px, 0.8vmin, 0.4rem) !important;
    }
}

/* Fallback for browsers without container query support */
@media (max-width: 480px) {
    .stats-box p,
    .stat-bar-line p,
    .core-stats-grid {
        font-size: clamp(5px, 1.2vmin, 0.6rem) !important;
    }
}

@media (max-width: 320px) {
    .stats-box p,
    .stat-bar-line p,
    .core-stats-grid {
        font-size: clamp(4px, 1vmin, 0.5rem) !important;
    }
}