/* Main CSS - Imports all component styles */

/* Variables first - loaded before everything else */
@import url('./base/variables.css');

/* Base styles - loaded first */
@import url('./base/reset.css');

/* Layout styles */
@import url('./layout/game-layout.css');

/* Component styles */
@import url('./components/buttons.css');
@import url('./components/panels.css');
@import url('./components/modals.css');
@import url('./components/achievements.css');
@import url('./components/toolbar.css');
@import url('./components/forms.css');
@import url('./components/banner.css');

/* Utilities */
@import url('./utilities/animations.css');

/* Responsive styles - loaded last */
@import url('./responsive/breakpoints.css');

/* Special HUD Button States - Moved here temporarily */
/* These are specific button IDs that need special treatment */

.hud-button-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #FF5722;
    color: white;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
}

/* Active button states for specific HUD buttons */
#minimap-toggle.active {
    background: linear-gradient(145deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.35));
    border-color: rgba(76, 175, 80, 0.5);
    color: #4CAF50;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

#minimap-toggle.active:hover {
    background: linear-gradient(145deg, rgba(76, 175, 80, 0.3), rgba(76, 175, 80, 0.45));
    border-color: rgba(76, 175, 80, 0.6);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

#research-toggle.panel-open {
    background: linear-gradient(145deg, rgba(0, 188, 212, 0.2), rgba(0, 188, 212, 0.35));
    border-color: rgba(0, 188, 212, 0.5);
    color: #00BCD4;
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}

#research-toggle.panel-open:hover {
    background: linear-gradient(145deg, rgba(0, 188, 212, 0.3), rgba(0, 188, 212, 0.45));
    border-color: rgba(0, 188, 212, 0.6);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.4);
}

#achievements-toggle.panel-open {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.35));
    border-color: rgba(255, 215, 0, 0.5);
    color: #FFD700;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

#achievements-toggle.panel-open:hover {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.45));
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

#color-values-info.panel-open {
    background: linear-gradient(145deg, rgba(156, 39, 176, 0.2), rgba(156, 39, 176, 0.35));
    border-color: rgba(156, 39, 176, 0.5);
    color: #E1BEE7;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

#color-values-info.panel-open:hover {
    background: linear-gradient(145deg, rgba(156, 39, 176, 0.3), rgba(156, 39, 176, 0.45));
    border-color: rgba(156, 39, 176, 0.6);
    box-shadow: 0 6px 20px rgba(156, 39, 176, 0.4);
}

/* Ensure help button matches other HUD buttons exactly */
button[onclick="openHelpModal()"] {
    min-width: 44px;
    min-height: 36px;
    font-size: 1.2rem;
    font-weight: bold;
}