@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Outfit:wght@300;400;600;800&family=Share+Tech+Mono&family=Noto+Sans+JP:wght@300;400;700&display=swap');

:root {
  /* Colors */
  --bg-color: #030812;
  --bg-grid-color: rgba(0, 242, 254, 0.03);
  
  --text-main: #e0f2fe;
  --text-muted: #94a3b8;
  
  --panel-bg: rgba(10, 25, 47, 0.7);
  --panel-border: rgba(0, 242, 254, 0.2);
  --panel-border-glow: rgba(0, 242, 254, 0.4);
  
  /* Class Accent Colors */
  --color-standard: #00f2fe;
  --color-mega: #a855f7;
  --color-giga: #ef4444;
  --color-blank: #e2e8f0;
  --color-gentei: #eab308;
  
  /* Status Colors */
  --color-acquired: #10b981;
  --color-acquired-bg: rgba(16, 185, 129, 0.1);
  --color-missing: #f97316;
  --color-missing-bg: rgba(249, 115, 22, 0.1);
  
  --font-cyber: 'Orbitron', 'Share Tech Mono', sans-serif;
  --font-main: 'Outfit', 'Noto Sans JP', sans-serif;
  
  /* Default Theme (Berserk) */
  --color-theme: #eab308;
  --color-theme-glow: rgba(234, 179, 8, 0.45);
  --color-theme-bg: rgba(234, 179, 8, 0.06);
  --logo-shadow: 0 0 20px rgba(234, 179, 8, 0.6);
}

/* Tribe Specific Themes */
html[data-tribe="berserk"] {
  --color-theme: #eab308;
  --color-theme-glow: rgba(234, 179, 8, 0.45);
  --color-theme-bg: rgba(234, 179, 8, 0.06);
  --logo-shadow: 0 0 20px rgba(234, 179, 8, 0.6);
  --bg-grid-color: rgba(234, 179, 8, 0.02);
}

html[data-tribe="shinobi"] {
  --color-theme: #10b981;
  --color-theme-glow: rgba(16, 185, 129, 0.45);
  --color-theme-bg: rgba(16, 185, 129, 0.06);
  --logo-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
  --bg-grid-color: rgba(16, 185, 129, 0.02);
}

html[data-tribe="dinosaur"] {
  --color-theme: #ef4444;
  --color-theme-glow: rgba(239, 68, 68, 0.45);
  --color-theme-bg: rgba(239, 68, 68, 0.06);
  --logo-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
  --bg-grid-color: rgba(239, 68, 68, 0.02);
}

/* Tribe Selector Styling */
.tribe-selector-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 242, 254, 0.25);
  transition: border-color 0.5s ease;
}

html[data-tribe="berserk"] .tribe-selector-wrapper { border-color: rgba(234, 179, 8, 0.3); }
html[data-tribe="shinobi"] .tribe-selector-wrapper { border-color: rgba(16, 185, 129, 0.3); }
html[data-tribe="dinosaur"] .tribe-selector-wrapper { border-color: rgba(239, 68, 68, 0.3); }

.selector-label {
  font-family: var(--font-cyber);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: bold;
}

.tribe-options {
  display: flex;
  gap: 8px;
}

.tribe-opt {
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.tribe-opt input {
  display: none;
}

.tribe-opt .opt-text {
  color: var(--text-muted);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 8px;
}

.tribe-opt:hover .opt-text {
  color: var(--text-main);
}

.tribe-opt[data-tribe="berserk"].active .opt-text {
  color: #eab308;
  text-shadow: 0 0 8px rgba(234, 179, 8, 0.6);
}

.tribe-opt[data-tribe="shinobi"].active .opt-text {
  color: #10b981;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.tribe-opt[data-tribe="dinosaur"].active .opt-text {
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

#btn-reset-default:hover {
  border-color: var(--color-missing);
  color: var(--color-missing);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.2);
}

/* Custom Filter Chip dot representation */
.filter-chip {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-chip::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.filter-chip.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: currentColor;
  box-shadow: 0 0 10px currentColor;
  font-weight: 700;
}

.filter-chip[data-class="all"] { color: var(--text-main); }
.filter-chip[data-class="standard"] { color: var(--color-standard); }
.filter-chip[data-class="mega"] { color: var(--color-mega); }
.filter-chip[data-class="giga"] { color: var(--color-giga); }
.filter-chip[data-class="blank"] { color: var(--color-blank); }
.filter-chip[data-class="gentei"] { color: var(--color-gentei); }

/* Class Labels inside Table */
.class-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-cyber);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 4px;
}

.class-badge.std { background: rgba(0, 242, 254, 0.15); color: var(--color-standard); }
.class-badge.mg { background: rgba(168, 85, 247, 0.15); color: var(--color-mega); }
.class-badge.gg { background: rgba(239, 68, 68, 0.15); color: var(--color-giga); }
.class-badge.bk { background: rgba(226, 232, 240, 0.15); color: var(--color-blank); }
.class-badge.gt { background: rgba(234, 179, 8, 0.15); color: var(--color-gentei); }

/* Interactive Badge in Checklist going to Monsterbook */
.virus-name-badge {
  cursor: pointer;
  transition: all 0.2s ease;
}

.virus-name-badge:hover {
  background: rgba(0, 242, 254, 0.15);
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.3);
  transform: scale(1.05);
}