/* =====================
   Enhanced Main CSS with Better Architecture
   ===================== */

/* Import order follows ITCSS (Inverted Triangle CSS) methodology */

/* 1. SETTINGS - Global variables and config */
@import 'abstracts/variables.css';
@import 'abstracts/mixins.css';

/* 2. TOOLS - Mixins and functions (handled via CSS custom properties) */

/* 3. GENERIC - Reset, normalize, box-sizing */
@import 'core/reset.css';
@import 'core/accessibility.css';
@import 'core/performance.css';

/* 4. ELEMENTS - Base HTML element styles */
@import 'core/typography.css';

/* 5. OBJECTS - Design patterns, layout systems */
@import 'core/layout.css';

/* 6. COMPONENTS - UI components */
@import 'components/buttons.css';
@import 'components/checkbox.css';
@import 'components/count-visual.css';
@import 'components/theme-toggle.css';
@import 'components/tabs.css';
@import 'components/tables.css';
@import 'components/hotkeys.css';
@import 'components/chat.css';
@import 'components/heroes.css';
@import 'components/players.css?v=20251229s';
@import 'components/talking-logo.css';
@import 'components/analytics.css';
@import 'components/retrain-icon.css';
@import 'components/collapsible-divider.css';
@import 'components/resource-toggle.css';
@import 'components/replay-browser.css';
@import 'components/replay-folder-modal.css';

/* 7. TRUMPS - Utilities and helper classes */
@import 'utilities/utilities.css';
@import 'utilities/responsive.css';
@import 'utilities/animations.css';

/* 7.5. ENHANCEMENTS - Professional visual effects */
@import 'enhancements/professional-effects.css';

/* 8. THEMES - Theme-specific overrides */
@import 'themes/dark-theme.css';
@import 'themes/light-theme.css';

/* 9. VENDORS - Third-party styles (if any) */
/* @import 'vendors/chart.css'; */

/* === Critical above-the-fold content === */
.hero-section,
.theme-toggle-area {
  contain: layout style paint;
}

/* === Non-critical below-the-fold content === */
.tab-content {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

/* === GPU acceleration for smooth animations === */
.cta-btn,
.tab-btn,
#moon-toggle,
.player-block {
  transform: translateZ(0);
  will-change: transform;
}

/* Remove will-change after animation completes */
.cta-btn:not(:hover),
.tab-btn:not(:hover),
.player-block:not(:hover) {
  will-change: auto;
}
.speech-bubble.visible {
  opacity: 1;
  transform: translate(-50%, -130%);
}
.hero-image.talking img,
.hero-image.talking-intense img {
  animation: talking-bounce 0.18s infinite alternate;
}
.hero-image.talking-intense img {
  animation-duration: 0.09s;
}
@keyframes talking-bounce {
  0% { transform: scale(1) }
  100% { transform: scale(1.07) }
}
.sound-loading {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -60px);
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 215, 0, 0.3);
  border-top: 3px solid #ffd700;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 11;
  pointer-events: none;
}
.sound-loading.visible {
  opacity: 1;
}

@keyframes spin {
  0% { transform: translate(-50%, -60px) rotate(0deg); }
  100% { transform: translate(-50%, -60px) rotate(360deg); }
}

/* LIGHT THEME TRANSPARENCY FIX - Maximum Priority */
body.light-theme .tab-content,
body.light-theme #tab-heroes,
body.light-theme #tab-units,
body.light-theme #tab-buildings,
body.light-theme #tab-upgrades,
body.light-theme #tab-items,
body.light-theme #tab-actions,
body.light-theme #tab-hotkeys,
body.light-theme #tab-chat,
body.light-theme #tab-orc-brain {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: none !important;
}

body.light-theme .player-block,
body.light-theme .team-player-block {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: none !important;
}

/* Hotkeys tab: keep player cards + table opaque (fixes see-through rows) */
body.light-theme #tab-hotkeys .player-block,
body.light-theme #tab-hotkeys .team-player-block {
  background: rgba(255, 255, 255, 0.96) !important;
}

body.light-theme #tab-hotkeys .hotkeys-table {
  background: rgba(255, 255, 255, 0.98) !important;
}

body.light-theme .hero-glass,
body.light-theme .hero-header .hero-glass,
body.light-theme .hero-header-flex .hero-glass {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: none !important;
}

body.light-theme .versus-side-panel,
body.light-theme #versus-display-area,
body.light-theme #versus-summary-area,
body.light-theme .versus-side-panel.hide {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: none !important;
}

body.light-theme .replay-summary {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: none !important;
}

/* 5. OBJECTS - Design patterns, layout systems */