/* Dark Mode Styles */
.dark-theme {
  --primary: #9d4edd;
  --primary-dark: #7b2cbf;
  --secondary: #ff9e00;
  --dark: #121212;
  --light: #e0e0e0;
  --card-bg: rgba(40, 40, 40, 0.6);
  --card-border: rgba(80, 80, 80, 0.4);
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --bg-gradient: linear-gradient(135deg, #121212, #1e1e30, #121220);
}

.dark-theme body {
  background: var(--bg-gradient);
  color: var(--text-primary);
}

.dark-theme .elements-section,
.dark-theme .result-section,
.dark-theme .canon-panel,
.dark-theme .story-content,
.dark-theme .battle-section {
  background: rgba(30, 30, 40, 0.8);
}

.dark-theme .element-card,
.dark-theme .gender-card,
.dark-theme .battle-setting-card,
.dark-theme .story-setting-card,
.dark-theme .battle-type-card {
  background: var(--card-bg);
}

.dark-theme .element-card.selected,
.dark-theme .gender-card.selected,
.dark-theme .battle-setting-card.selected,
.dark-theme .story-setting-card.selected,
.dark-theme .battle-type-card.selected {
  background: rgba(123, 44, 191, 0.3);
}

/* Offline Mode Styles */
.offline-mode .requires-online {
  opacity: 0.5;
  position: relative;
}

.offline-mode .requires-online::after {
  content: "⚠️ Requires online";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.7);
  color: #ff9e00;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.disabled-feature {
  cursor: not-allowed !important;
}

.offline-mode-indicator {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(255, 62, 62, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  z-index: 1000;
  display: none;
}

.offline-mode .offline-mode-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Performance Mode Styles */
.performance-mode .elements-grid,
.performance-mode .canon-characters-grid {
  max-height: 300px;
}

.performance-mode .battle-animation,
.performance-mode .victory-animation,
.performance-mode .defeat-animation {
  transition: none !important;
  animation-duration: 0.5s !important;
}

.performance-mode * {
  transition-duration: 0.1s !important;
}

.settings-panel {
  display: none; /* Hide the settings panel */
}

.settings-toggle-btn {
  display: none; /* Hide the settings toggle button */
}

/* Accessibility improvements */
.dark-theme :focus {
  outline: 2px solid var(--secondary) !important;
  outline-offset: 2px;
}

.high-contrast-text * {
  text-shadow: 0 0 1px black;
}

/* Loading optimization indicators */
.performance-mode .optimize-loading {
  display: none !important;
}