/* =============================================================================
   ENCOSIM – Global Styles
   Ergänzt Tailwind um wiederverwendbare, projektspezifische Klassen.
   Struktur:
   1) Fonts & Typo
   2) Utilities (Motion, Glows, Helpers)
   3) Karten / Interaktion
   4) Tabs
   5) Container (Search, Filter)
   6) Form-Controls (Inputs, Checkbox, Radio)
   7) Layout-Helfer
   8) Expandable Sections (Accordion)
   9) Modal
   10) Micro-Animations (Dice, Scroll-Fade)
============================================================================= */


/* ========== 1) Fonts & Typo =============================================== */

/* Google Fonts (einmal global) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:wght@400;600&display=swap');

/* Utility-Fonts */
.fantasy-font { font-family: 'Cinzel', serif; }
.text-font    { font-family: 'Crimson Text', serif; }


/* ========== 2) Utilities (Motion, Glows, Helpers) ========================= */

/* Progress/Balken weiche Bewegung */
.hp-bar { transition: width 0.3s ease; }

/* Glows – neutral/Status */
.glow-silver { box-shadow: 0 0 15px rgba(226, 232, 240, 0.30); }
.glow-green  { box-shadow: 0 0 15px rgba(34, 197, 94, 0.30); }
.glow-gold   { box-shadow: 0 0 20px rgba(217, 119, 6, 0.40); } /* Amber-Thema */

/* Runde Avatare/Icons */
.rounded-avatar { border-radius: 9999px; object-fit: cover; }
/* Icon-Größe angelehnt an w-10/h-10 */
.icon-10 { width: 2.5rem; height: 2.5rem; }

/* Schwebe-Animation (z. B. Deko-Elemente) */
.floating-animation { animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}

/* Bewegungsreduktion für Nutzerpräferenz */
@media (prefers-reduced-motion: reduce) {
  .hp-bar,
  .floating-animation,
  .dice-icon,
  .scroll-fade,
  .quick-actions,
  .character-card {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}


/* ========== 3) Karten / Interaktion ====================================== */

/* Basiszustand für Player/Enemy Cards */
.character-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease;
  background: linear-gradient(135deg, #2d3748 0%, #1e2a3a 100%); /* neutraler Dark-Verlauf */
}
.character-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.40);
}
.character-card.selected {
  box-shadow: 0 0 20px rgba(226, 232, 240, 0.40);
  border-color: #e2e8f0; /* silver */
}

.filter-dropdown.enemy {
  border-color: #742a2a; /* dunkles Rot */
}

/* Position oben rechts in der Card */
.card-select {
  position: absolute;
  top: -0.5rem;
  right: -15.3rem;
}

/* Farbvarianten */
.custom-checkbox--player:checked {
  border-color: #16a34a; /* green-600 */
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.45);
}
.custom-checkbox--enemy:checked {
  border-color: #b91c1c; /* red-700 */
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

/* Optional: Card-GLOW, wenn ausgewählt */
.picked--player {
  border-color: #16a34a !important;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
}
.picked--enemy {
  border-color: #b91c1c !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.35);
}


/* Inline-Quick-Actions (Edit/Copy/Del) */
.quick-actions {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.character-card:hover .quick-actions {
  opacity: 1;
  transform: translateY(0);
}

/* Feature-Card (Marketing/Highlights) */
.feature-card {
  background: linear-gradient(135deg, #2d3748 0%, #1e2a3a 100%);
  border: 2px solid #4a5568;
  transition: all 0.3s ease;
}
.feature-card:hover {
  border-color: #d97706;
  box-shadow: 0 0 20px rgba(217, 119, 6, 0.30);
  transform: translateY(-4px);
}


/* ========== 4) Tabs ======================================================= */

.active-tab {
  background: linear-gradient(135deg, #d97706, #f59e0b); /* gold gradient */
  color: #0f1419;
  box-shadow: 0 0 20px rgba(217, 119, 6, 0.40);
}



/* ========== 5) Container (Search, Filter) ================================= */

/* Suchbereich mit dunklem Verlauf */
.search-container {
  background: linear-gradient(135deg, #1e2a3a 0%, #2d3748 100%);
}

/* Select/Filter – Dark Look + Fokus */
.filter-dropdown {
  background: linear-gradient(135deg, #2d3748 0%, #1e2a3a 100%);
  background-color: #1e2a3a; /* Fallback */
  color: #e2e8f0;
  border: 1px solid #4a5568;
}
.filter-dropdown:focus {
  background-color: #2d3748;
  border-color: #e2e8f0;
  outline: none;
}
/* Optionen im Dropdown */
.filter-dropdown option {
  background-color: #1e2a3a;
  color: #e2e8f0;
}
.filter-dropdown option:hover {
  background-color: #2d3748;
  color: #ffffff;
}


/* ========== 6) Form-Controls (Inputs, Checkbox, Radio) ==================== */

/* Formularsektion (z. B. Zauberrunen) */
.form-section {
  background: linear-gradient(135deg, #2d3748 0%, #1e2a3a 100%);
  border: 2px solid #d97706;
  box-shadow: 0 0 20px rgba(217, 119, 6, 0.20);
}

/* Text-/Number-Inputs im Dark Theme */
.rune-input {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  border: 2px solid #4a5568;
  transition: all 0.3s ease;
}
.rune-input:focus {
  border-color: #d97706;
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.30);
  outline: none;
}

/* Custom Checkbox */
.custom-checkbox {
  appearance: none;
  width: 1rem; height: 1rem;
  border: 2px solid #4a5568;
  border-radius: 0.25rem;
  background: linear-gradient(135deg, #0f1419 0%, #1a202c 100%);
  position: relative;
  cursor: pointer;
}
.custom-checkbox:checked {
  border-color: #d97706;
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}
.custom-checkbox:checked::after {
  content: '✓';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #0f1419;
  font-size: 0.75rem; font-weight: bold;
}

/* Custom Radio */
.custom-radio {
  appearance: none;
  width: 1rem; height: 1rem;
  border: 2px solid #4a5568;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f1419 0%, #1a202c 100%);
  position: relative;
  cursor: pointer;
}
.custom-radio:checked { border-color: #d97706; }
.custom-radio:checked::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem; height: 0.5rem;
  background: #d97706; border-radius: 50%;
}


/* ========== 7) Layout-Helfer ============================================= */

.spell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}


/* ========== 8) Expandable Sections (Accordion) ============================ */

.expandable-section {
  transition: max-height 0.3s ease;
  overflow: hidden;
}
.collapsed { max-height: 0; }
.expanded  { max-height: 500px; } /* großzügig, je nach Content anpassen */


/* ========== 9) Modal ====================================================== */

.modal-backdrop {
  background: rgba(15, 20, 25, 0.8);
  backdrop-filter: blur(5px);
}
.modal-content {
  background: linear-gradient(135deg, #2d3748 0%, #1e2a3a 100%);
  border: 2px solid #d97706;
  box-shadow: 0 0 30px rgba(217, 119, 6, 0.40);
}


/* ========== 10) Micro-Animations (Dice, Scroll-Fade) ====================== */

.dice-icon { animation: roll 2s ease-in-out infinite; }
@keyframes roll {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(90deg); }
  50%      { transform: rotate(180deg); }
  75%      { transform: rotate(270deg); }
}

/* Scroll-Reveal (per JS Klasse .visible setzen) */
.scroll-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}
.scroll-fade.visible {
  opacity: 1;
  transform: translateY(0);
}