@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 {
  /* Version 3 Colors */
  --bg-color: #07030a;
  --bg-grid-color: rgba(239, 68, 68, 0.02);
  
  --text-main: #f5f3ff;
  --text-muted: #94a3b8;
  
  --panel-bg: rgba(20, 10, 30, 0.65);
  --panel-border: rgba(239, 68, 68, 0.2);
  --panel-border-glow: rgba(168, 85, 247, 0.4);
  
  /* Class Accent Colors - SF3 Red/Purple Theme */
  --color-standard: #ef4444;      /* Crimson Red */
  --color-mega: #a855f7;          /* Violet Purple */
  --color-giga: #ec4899;          /* Shock Pink */
  --color-gentei: #eab308;        /* Gold (Event) */
  
  /* Status Colors */
  --color-acquired: #10b981;
  --color-acquired-bg: rgba(16, 185, 129, 0.1);
  --color-missing: #ef4444;
  --color-missing-bg: rgba(239, 68, 68, 0.08);
  
  --font-cyber: 'Orbitron', 'Share Tech Mono', sans-serif;
  --font-main: 'Outfit', 'Noto Sans JP', sans-serif;
  
  /* Shared Theme Color for Ryusei 3 */
  --color-theme: #ef4444;
  --color-theme-glow: rgba(239, 68, 68, 0.4);
  --color-theme-bg: rgba(239, 68, 68, 0.06);
}

#btn-reset-default:hover {
  border-color: var(--color-missing);
  color: var(--color-missing);
  box-shadow: 0 0 8px rgba(239, 68, 68, 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="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(239, 68, 68, 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(236, 72, 153, 0.15); color: var(--color-giga); }
.class-badge.gt { background: rgba(234, 179, 8, 0.15); color: var(--color-gentei); }

/* Jump to Monster button */
.btn-goto-monster {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 6px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.btn-goto-monster:hover {
  transform: scale(1.2) rotate(10deg);
  text-shadow: 0 0 8px var(--color-mega);
}

/* Clicking on virus badge in checklist also goes to monsterbook */
.virus-name-badge {
  cursor: pointer;
  transition: all 0.2s ease;
}

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