:root {
  --brand-darkBg: #0b0f17;       /* Deep midnight canvas gray */
  --brand-cardBg: #161b22;       /* Soft warm container backgrounds */
  --brand-accent: #f59e0b;       /* Soft gold/amber glow */
  --brand-accent-hover: #d97706; /* Interaction amber */
  --brand-success: #10b981;      /* Emerald sage */
}

/* Base Body Modifications */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--brand-darkBg);
}

/* Custom Scrollbars for Smooth Scannability */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--brand-darkBg);
}
::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* Eye-Friendly Interactive SVG Map Country Blocks */
.map-country {
  fill: #1a1f29;
  stroke: #2d3748;
  stroke-width: 1.5;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.map-country:hover {
  fill: #2d3748;
  stroke: var(--brand-accent);
}

/* Selected state inside Study Mode */
.map-country.study-active {
  fill: #251e12;
  stroke: var(--brand-accent);
}

/* Guessed countries softly light up green instead of blinking violently */
.map-country.guessed {
  fill: rgba(16, 185, 129, 0.08);
  stroke: var(--brand-success);
}

/* Correct and Incorrect Stats List Styling */
.badge-correct {
  background-color: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.badge-incorrect {
  background-color: rgba(244, 63, 94, 0.06);
  border: 1px solid rgba(244, 63, 94, 0.15);
  color: #fb7185;
}

/* Micro-animations */
.animate-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-spin-slow {
  animation: spin 8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}