/* GeoGuessr Master Hub Custom Styling */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Light Theme Defaults (Default) */
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --border-color: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-body: #334155;
  --accent-emerald: #059669;
  --accent-blue: #0284c7;
  --accent-amber: #d97706;
  --accent-purple: #9333ea;
  --accent-rose: #e11d48;
}

html.dark {
  /* Dark Theme */
  --bg-primary: #0b0f19;
  --bg-secondary: #111827;
  --bg-card: #162032;
  --bg-card-hover: #1e2c45;
  --border-color: #24324d;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-body: #cbd5e1;
  --accent-emerald: #10b981;
  --accent-blue: #38bdf8;
  --accent-amber: #f59e0b;
  --accent-purple: #a855f7;
  --accent-rose: #f43f5e;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-body);
  overflow-x: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}

code, kbd, pre, .font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #24324d;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #3b82f6;
}

/* Glow effects */
.glow-emerald {
  box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.25);
}
.glow-blue {
  box-shadow: 0 0 25px -5px rgba(56, 189, 248, 0.25);
}

/* Glassmorphism */
.glass-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  color: var(--text-main);
  transition: background 0.2s ease, border-color 0.2s ease;
}
html.dark .glass-nav {
  background: rgba(11, 15, 25, 0.85);
  border-bottom: 1px solid rgba(36, 50, 77, 0.6);
  color: var(--text-main);
}

.glass-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  color: var(--text-body);
  transition: all 0.2s ease;
}
html.dark .glass-card {
  background: rgba(22, 32, 50, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  box-shadow: none;
}

.banner-stats {
  background: linear-gradient(to right, #ecfdf5, #f8fafc, #eff6ff);
  border-bottom: 1px solid #e2e8f0;
  color: #475569;
}
html.dark .banner-stats {
  background: linear-gradient(to right, rgba(6, 78, 59, 0.3), rgba(15, 23, 42, 0.6), rgba(23, 37, 84, 0.3));
  border-bottom: 1px solid rgba(51, 65, 85, 0.6);
  color: #cbd5e1;
}

/* 3D Flip Card for Flashcards */
.perspective-1000 {
  perspective: 1000px;
}
.transform-style-3d {
  transform-style: preserve-3d;
}
.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.rotate-y-180 {
  transform: rotateY(180deg);
}

/* Card hover animations */
.transition-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.transition-card:hover {
  transform: translateY(-2px);
  border-color: #3b82f6;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}
html.dark .transition-card:hover {
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}

/* Light theme overrides for template classes */
html:not(.dark) .text-white {
  color: #0f172a !important;
}
html:not(.dark) .text-slate-100 {
  color: #0f172a !important;
}
html:not(.dark) .text-slate-200 {
  color: #1e293b !important;
}
html:not(.dark) .text-slate-300 {
  color: #334155 !important;
}
html:not(.dark) .text-slate-400 {
  color: #64748b !important;
}
html:not(.dark) .text-slate-500 {
  color: #64748b !important;
}

/* Ensure buttons with solid/gradient colored backgrounds maintain white text in light theme */
html:not(.dark) button.text-white,
html:not(.dark) button[class*="bg-blue-"],
html:not(.dark) button[class*="bg-emerald-"],
html:not(.dark) button[class*="bg-purple-"],
html:not(.dark) button[class*="from-emerald-"],
html:not(.dark) button[class*="bg-blue-"] *,
html:not(.dark) button[class*="bg-emerald-"] *,
html:not(.dark) button[class*="bg-purple-"] *,
html:not(.dark) button[class*="from-emerald-"] *,
html:not(.dark) a.text-white,
html:not(.dark) a[class*="bg-blue-"] *,
html:not(.dark) [class*="from-emerald-"].text-white,
html:not(.dark) .text-white-force {
  color: #ffffff !important;
}

html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-800\/70,
html:not(.dark) .bg-slate-800\/50 {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}
html:not(.dark) .bg-slate-800:hover,
html:not(.dark) .bg-slate-800\/80:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Badges & Pills in Light Theme */
html:not(.dark) .bg-emerald-950\/40,
html:not(.dark) .bg-emerald-950\/60 {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}
html:not(.dark) .bg-blue-950\/80,
html:not(.dark) .bg-blue-950\/60 {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}
html:not(.dark) .bg-purple-950\/60 {
  background-color: #faf5ff !important;
  color: #7e22ce !important;
  border-color: #e9d5ff !important;
}
html:not(.dark) .bg-amber-500\/10 {
  background-color: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-800\/60,
html:not(.dark) .border-slate-800\/40,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/60,
html:not(.dark) .border-slate-700\/70,
html:not(.dark) .border-slate-700\/80,
html:not(.dark) .border-slate-700\/40 {
  border-color: #e2e8f0 !important;
}

html:not(.dark) thead.bg-slate-900\/80 {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border-bottom-color: #e2e8f0 !important;
}
html:not(.dark) tbody.divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: #f1f5f9 !important;
}
html:not(.dark) tr:hover {
  background-color: #f8fafc !important;
}


/* Modal Lightbox */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 8, 15, 0.94);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}
.lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}

/* Highlight badge */
.badge-pulse {
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-ring {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Code & pre styling */
.markdown-body pre {
  background: #0f172a;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #1e293b;
  overflow-x: auto;
}
.markdown-body code {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

html {
  scroll-behavior: smooth;
}

.scroll-mt-24 {
  scroll-margin-top: 6rem;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}