/* ============ THEME VARIABLES ============ */
:root{
  --gold:#FFD700;
  --gold-dark:#b8860b;
  --bg:#050505;
  --card:#0e0e0e;
  --surface:#0a0a0a;
  --border:#1e1e1e;
  --border-light:#333;
  --text:#ffffff;
  --text-muted:#666666;
  --text-dim:#999999;
  --overlay:rgba(0,0,0,0.8);
  --header-bg:rgba(5,5,5,0.92);
  --menu-bg:rgba(5,5,5,0.97);
  --tooltip-bg:rgba(10,10,10,0.95);
  --toast-bg:#161616;
  --card-hover:#161616;
  --input-bg:#050505;
  --skeleton-a:#111;
  --skeleton-b:#1a1a1a;
  --scrollbar-track:#0a0a0a;
  --scrollbar-thumb:#333;
  --scrollbar-thumb-hover:#555;
  color-scheme:dark;
}

[data-theme="light"]{
  --gold:#b8860b;
  --gold-dark:#8b6914;
  --bg:#f4f4f5;
  --card:#ffffff;
  --surface:#ebebed;
  --border:#d4d4d8;
  --border-light:#a1a1aa;
  --text:#18181b;
  --text-muted:#71717a;
  --text-dim:#a1a1aa;
  --overlay:rgba(0,0,0,0.4);
  --header-bg:rgba(244,244,245,0.92);
  --menu-bg:rgba(244,244,245,0.97);
  --tooltip-bg:rgba(255,255,255,0.97);
  --toast-bg:#ffffff;
  --card-hover:#f0f0f2;
  --input-bg:#f0f0f2;
  --skeleton-a:#e4e4e7;
  --skeleton-b:#f4f4f5;
  --scrollbar-track:#e4e4e7;
  --scrollbar-thumb:#a1a1aa;
  --scrollbar-thumb-hover:#71717a;
  color-scheme:light;
}

html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;transition:background 0.3s,color 0.3s}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--scrollbar-track)}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}
.font-display{font-family:'Bebas Neue',sans-serif}
.gold-glow{text-shadow:0 0 20px rgba(255,215,0,0.3),0 0 40px rgba(255,215,0,0.1)}
.gold-border-glow{box-shadow:0 0 15px rgba(255,215,0,0.15),inset 0 0 15px rgba(255,215,0,0.05)}

/* ============ EXISTING ANIMATIONS ============ */
@keyframes pulseGold{0%,100%{box-shadow:0 0 5px rgba(255,215,0,0.2)}50%{box-shadow:0 0 20px rgba(255,215,0,0.5)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes glow{0%,100%{opacity:0.4}50%{opacity:1}}
@keyframes countUp{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============ NEW ANIMATIONS ============ */
@keyframes fadeOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}
@keyframes fadeOutUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInDown{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(0.3)}50%{transform:scale(1.05)}70%{transform:scale(0.95)}100%{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes ripple{to{transform:scale(4);opacity:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 5px rgba(255,215,0,0.2),0 0 10px rgba(255,215,0,0.1)}50%{box-shadow:0 0 20px rgba(255,215,0,0.4),0 0 40px rgba(255,215,0,0.2)}}
@keyframes typewriter{from{width:0}to{width:100%}}
@keyframes blink{50%{border-color:transparent}}
@keyframes particleFloat{0%,100%{transform:translate(0,0) scale(1);opacity:0.4}25%{transform:translate(10px,-20px) scale(1.2);opacity:0.7}50%{transform:translate(-5px,-35px) scale(1);opacity:0.5}75%{transform:translate(15px,-15px) scale(0.8);opacity:0.6}}
@keyframes counterSlide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(20px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ============ ANIMATION CLASSES ============ */
.animate-fade{animation:fadeIn 0.4s ease-out}
.animate-fade-out{animation:fadeOut 0.25s ease-in forwards}
.animate-slide-up{animation:slideUp 0.5s ease-out}
.animate-slide-right{animation:slideRight 0.3s ease-out}
.animate-scale-in{animation:scaleIn 0.3s ease-out}
.animate-bounce-in{animation:bounceIn 0.5s ease-out}
.animate-float{animation:float 3s ease-in-out infinite}
.animate-glow-pulse{animation:glowPulse 2s ease-in-out infinite}
.animate-modal-in{animation:modalSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)}

/* Stagger delays */
.delay-100{animation-delay:100ms}
.delay-200{animation-delay:200ms}
.delay-300{animation-delay:300ms}
.delay-400{animation-delay:400ms}
.delay-500{animation-delay:500ms}
.delay-600{animation-delay:600ms}
.delay-700{animation-delay:700ms}
.delay-800{animation-delay:800ms}

/* ============ HERO PARTICLES ============ */
.hero-particle{position:absolute;border-radius:50%;background:rgba(255,215,0,0.3);pointer-events:none}
.hero-particle:nth-child(1){width:3px;height:3px;top:20%;left:15%;animation:particleFloat 6s ease-in-out infinite}
.hero-particle:nth-child(2){width:2px;height:2px;top:35%;right:20%;animation:particleFloat 8s ease-in-out infinite 1s}
.hero-particle:nth-child(3){width:4px;height:4px;top:60%;left:25%;animation:particleFloat 7s ease-in-out infinite 2s}
.hero-particle:nth-child(4){width:2px;height:2px;top:45%;right:30%;animation:particleFloat 5s ease-in-out infinite 0.5s}
.hero-particle:nth-child(5){width:3px;height:3px;top:70%;left:60%;animation:particleFloat 9s ease-in-out infinite 3s}
.hero-particle:nth-child(6){width:2px;height:2px;top:15%;left:70%;animation:particleFloat 6s ease-in-out infinite 1.5s}

/* ============ EXISTING COMPONENTS ============ */
.ticker-wrap{overflow:hidden;white-space:nowrap;position:relative}
.ticker-wrap::before,.ticker-wrap::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.ticker-wrap::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.ticker-wrap::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.ticker-content{display:inline-block;animation:ticker 30s linear infinite}
.ticker-content:hover{animation-play-state:paused}

.btn-outbid{background:linear-gradient(135deg,#FFD700,#e6c200);color:#000;font-weight:700;border:none;padding:12px 28px;border-radius:8px;cursor:pointer;transition:all 0.2s;font-family:'Space Grotesk',sans-serif;font-size:16px;letter-spacing:0.5px;position:relative;overflow:hidden}
.btn-outbid:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(255,215,0,0.4)}
.btn-outbid:active{transform:translateY(0) scale(0.98);box-shadow:0 2px 10px rgba(255,215,0,0.3)}
.btn-outbid::after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(0,0,0,0.2);border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0;transition:none}
.btn-outbid:active::after{animation:ripple 0.6s linear}

.btn-secondary{background:transparent;color:var(--gold);border:1px solid var(--border-light);padding:10px 24px;border-radius:8px;cursor:pointer;transition:all 0.2s;font-family:'Space Grotesk',sans-serif;font-size:14px;position:relative;overflow:hidden}
.btn-secondary:hover{border-color:var(--gold);background:rgba(255,215,0,0.05);transform:translateY(-1px)}
.btn-secondary:active{transform:translateY(0) scale(0.98)}

.country-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer}
.country-card:hover{border-color:rgba(255,215,0,0.3);background:var(--card-hover);transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,0.3),0 0 15px rgba(255,215,0,0.05)}

.map-tooltip{position:absolute;pointer-events:none;background:var(--tooltip-bg);border:1px solid var(--border-light);border-radius:10px;padding:12px 16px;font-size:13px;z-index:1000;backdrop-filter:blur(10px);max-width:260px;opacity:0;transition:opacity 0.2s,transform 0.2s;transform:translateY(5px);color:var(--text)}
.map-tooltip.visible{opacity:1;transform:translateY(0)}

.modal-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(4px);z-index:999;display:flex;align-items:center;justify-content:center}
.modal-overlay.closing{animation:fadeOut 0.25s ease-in forwards}
.modal-content{background:var(--card);border:1px solid var(--border);border-radius:16px;max-width:520px;width:90%;max-height:85vh;overflow-y:auto;padding:32px;animation:modalSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);color:var(--text)}

.toast-container{position:fixed;bottom:20px;right:20px;z-index:1100;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--toast-bg);border:1px solid var(--border-light);border-radius:10px;padding:14px 18px;animation:slideInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);max-width:360px;font-size:14px;transition:all 0.3s;color:var(--text)}
.toast.removing{animation:fadeOutUp 0.3s ease-in forwards}
.toast-gold{border-color:rgba(255,215,0,0.3);background:var(--toast-bg)}

.notification-dot{width:8px;height:8px;background:#FF3B3B;border-radius:50%;position:absolute;top:-2px;right:-2px;animation:glow 1.5s ease-in-out infinite}
.stat-number{font-family:'Bebas Neue',sans-serif;font-size:48px;line-height:1;color:var(--gold);transition:all 0.3s}
.stat-number.counting{animation:counterSlide 0.4s ease-out}

/* ============ SKELETON LOADING ============ */
.skeleton{background:linear-gradient(90deg,var(--skeleton-a) 25%,var(--skeleton-b) 50%,var(--skeleton-a) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:6px}
.skeleton-text{height:14px;margin-bottom:8px}
.skeleton-title{height:24px;width:60%;margin-bottom:12px}
.skeleton-avatar{width:40px;height:40px;border-radius:50%}
.skeleton-card{height:120px;border-radius:12px}

/* ============ FAQ ACCORDION ============ */
details{overflow:hidden;transition:border-color 0.3s}
details[open] summary{border-color:rgba(255,215,0,0.2)}
details .faq-content{max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1),padding 0.3s ease}
details[open] .faq-content{max-height:500px}

/* ============ SECTION REVEAL ============ */
.section-reveal{opacity:0;transform:translateY(30px);transition:all 0.6s cubic-bezier(0.4,0,0.2,1)}
.section-reveal.visible{opacity:1;transform:translateY(0)}

/* ============ PAGE TRANSITION ============ */
#app{transition:opacity 0.2s ease-out}
#app.transitioning{opacity:0}

/* ============ MAP PATH TRANSITIONS ============ */
#mapContainer path{transition:fill 0.25s ease,stroke 0.2s ease,opacity 0.3s ease}

/* ============ LIGHT MODE: TAILWIND ARBITRARY CLASS OVERRIDES ============ */
/* Text colors */
[data-theme="light"] .text-\[\#666\],[data-theme="light"] .text-muted{color:var(--text-muted)!important}
[data-theme="light"] .text-\[\#999\],[data-theme="light"] .text-\[\#888\]{color:var(--text-dim)!important}
[data-theme="light"] .text-white{color:var(--text)!important}
[data-theme="light"] .text-\[\#ccc\],[data-theme="light"] .text-\[\#ddd\]{color:var(--text)!important}
[data-theme="light"] .hover\:text-white:hover{color:var(--text)!important}
[data-theme="light"] .text-\[\#FFD700\],[data-theme="light"] .text-gold,[data-theme="light"] .hover\:text-\[\#FFD700\]:hover,[data-theme="light"] .hover\:text-gold:hover{color:var(--gold)!important}

/* Background colors */
[data-theme="light"] .bg-\[\#050505\],[data-theme="light"] .bg-dark{background-color:var(--input-bg)!important}
[data-theme="light"] .bg-\[\#0e0e0e\],[data-theme="light"] .bg-card{background-color:var(--card)!important}
[data-theme="light"] .bg-\[\#0a0a0a\],[data-theme="light"] .bg-\[\#080808\]{background-color:var(--surface)!important}
[data-theme="light"] .bg-\[\#111\]{background-color:var(--surface)!important}
[data-theme="light"] .bg-\[\#161616\],[data-theme="light"] .bg-card-hover{background-color:var(--card-hover)!important}
[data-theme="light"] .bg-\[\#1a1a1a\]{background-color:var(--surface)!important}
[data-theme="light"] .bg-\[\#1e1e1e\]{background-color:var(--border)!important}
[data-theme="light"] .bg-\[\#1a1500\]{background-color:#fbf3d6!important}
[data-theme="light"] .bg-\[\#1a0a00\]{background-color:#fae8c0!important}
[data-theme="light"] .hover\:bg-\[\#0a0a0a\]:hover{background-color:var(--surface)!important}
[data-theme="light"] .hover\:bg-\[\#0e0e0e\]:hover{background-color:var(--card-hover)!important}
[data-theme="light"] .hover\:bg-\[\#161616\]:hover{background-color:var(--card-hover)!important}
[data-theme="light"] .group:hover .group-hover\:bg-\[\#0a0a0a\]{background-color:var(--surface)!important}
[data-theme="light"] .group[open] .group-open\:bg-\[\#0a0a0a\]{background-color:var(--surface)!important}

/* Border colors */
[data-theme="light"] .border-\[\#1e1e1e\],[data-theme="light"] .border-border{border-color:var(--border)!important}
[data-theme="light"] .border-\[\#222\],[data-theme="light"] .border-\[\#333\]{border-color:var(--border)!important}
[data-theme="light"] .border-\[\#111\]{border-color:var(--border)!important}
[data-theme="light"] .hover\:border-\[\#FFD700\]\/20:hover,[data-theme="light"] .hover\:border-\[\#FFD700\]\/30:hover{border-color:rgba(184,134,11,0.3)!important}
[data-theme="light"] .open\:border-\[\#FFD700\]\/20[data-open]{border-color:rgba(184,134,11,0.2)!important}
[data-theme="light"] details[open]{border-color:rgba(184,134,11,0.2)!important}

/* Inline style overrides (must use !important to beat inline styles) */
[data-theme="light"] [style*="color:#FFD700"]{color:var(--gold)!important}

/* Group open states */
[data-theme="light"] .group[open] .group-open\:rotate-45{transform:rotate(45deg)}

/* ============ MAP LEGEND SWATCHES ============ */
.legend-owned{background:#3d3000}
.legend-hot{background:#6b5500}
[data-theme="light"] .legend-owned{background:#f1e09b}
[data-theme="light"] .legend-hot{background:#e6c95a}

/* Map background override handled in map.js via isLightMode() */