:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #1c2333;
    --bg-card: rgba(255,255,255,0.04);
    --bg-card-hover: rgba(255,255,255,0.08);
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(245,166,35,0.5);
    --text-1: #e6edf3;
    --text-2: #8b949e;
    --text-3: #484f58;
    --accent: #f5a623;
    --accent-hover: #ffb84d;
    --accent-glow: rgba(245,166,35,0.15);
    --smoke: #58a6ff;
    --flash: #d29922;
    --molotov: #f85149;
    --he: #3fb950;
    --radius: 12px;
    --radius-sm: 8px;
    --transition: .25s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-primary);color:var(--text-1);line-height:1.6;min-height:100vh}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Rajdhani','Inter',sans-serif;font-weight:700;letter-spacing:.5px;line-height:1.2}

/* HEADER */
.header{position:sticky;top:0;z-index:100;background:rgba(13,17,23,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.header-inner{max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;height:64px}
.logo{display:flex;align-items:center;gap:.75rem;font-family:'Rajdhani',sans-serif;font-size:1.4rem;font-weight:700}
.logo-icon{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#ff6b00);display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 4px 14px var(--accent-glow)}
.logo span{color:var(--accent)}
.nav{display:flex;gap:2rem;list-style:none}
.nav a{color:var(--text-2);font-weight:500;font-size:.92rem;position:relative;padding:.25rem 0;transition:color var(--transition)}
.nav a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);transition:width var(--transition)}
.nav a:hover,.nav a.active{color:var(--text-1)}
.nav a:hover::after,.nav a.active::after{width:100%}

/* HERO */
.hero{max-width:1400px;margin:0 auto;padding:5rem 2rem 3rem;text-align:center}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:1rem;background:linear-gradient(135deg,#fff 30%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{color:var(--text-2);font-size:1.15rem;max-width:560px;margin:0 auto}
.hero-stats{display:flex;justify-content:center;gap:3rem;margin-top:2.5rem;flex-wrap:wrap}
.stat-val{font-family:'Rajdhani',sans-serif;font-size:2.2rem;font-weight:700;color:var(--accent)}
.stat-lbl{font-size:.8rem;color:var(--text-3);text-transform:uppercase;letter-spacing:1.5px}

.section{max-width:1400px;margin:0 auto;padding:2rem 2rem 4rem}
.section-title{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem;font-size:1.6rem}
.section-title::before{content:'';width:4px;height:26px;background:var(--accent);border-radius:2px}

.maps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}
.map-card{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all var(--transition)}
.map-card:hover{transform:translateY(-5px);border-color:var(--border-hover);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.map-thumb{height:160px;position:relative;background:linear-gradient(135deg,var(--bg-tertiary),var(--bg-primary));display:flex;align-items:center;justify-content:center;overflow:hidden}
.map-emoji{font-size:3.5rem;opacity:.35;transition:all var(--transition)}
.map-card:hover .map-emoji{opacity:.65;transform:scale(1.12)}
.map-body{padding:1.15rem}
.map-body h3{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.map-arrow{color:var(--accent);transition:transform var(--transition)}
.map-card:hover .map-arrow{transform:translateX(5px)}
.map-body p{color:var(--text-2);font-size:.88rem;margin-bottom:.75rem}
.badge{display:inline-block;padding:.2rem .7rem;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--bg-tertiary);color:var(--accent)}
.badge.soon{color:var(--text-3)}

/* PAGE HEAD */
.page-head{max-width:1400px;margin:0 auto;padding:2.5rem 2rem 1.5rem}
.crumb{display:flex;align-items:center;gap:.4rem;font-size:.88rem;color:var(--text-3);margin-bottom:.75rem}
.crumb a:hover{color:var(--accent)}
.crumb .sep{color:var(--text-3)}
.page-head h1{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:.3rem}
.page-head p{color:var(--text-2);font-size:1.05rem}

/* INTERACTIVE MAP */
.map-container{max-width:1400px;margin:0 auto;padding:0 2rem 3rem}
.map-wrapper{position:relative;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.4)}
.map-image{width:100%;height:auto;display:block;background:var(--bg-tertiary)}
.map-overlay{position:absolute;inset:0;cursor:crosshair}

.map-hotspot{position:absolute;width:24px;height:24px;transform:translate(-50%,-50%);cursor:pointer;transition:all var(--transition);z-index:10}
.map-hotspot::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--accent);opacity:.3;animation:pulse 2s ease-in-out infinite}
.map-hotspot::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.map-hotspot:hover{transform:translate(-50%,-50%) scale(1.3);z-index:20}
.map-hotspot.active{transform:translate(-50%,-50%) scale(1.4);z-index:30}
.map-hotspot.active::before{background:var(--molotov)}
.map-hotspot.active::after{background:var(--molotov);box-shadow:0 0 20px rgba(248,81,73,.6)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.8);opacity:0}}

.hotspot-label{position:absolute;top:28px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.9);color:var(--text-1);padding:.35rem .7rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:all var(--transition);border:1px solid var(--border)}
.map-hotspot:hover .hotspot-label{opacity:1;top:32px}

.map-legend{display:flex;gap:1.5rem;padding:1rem 1.5rem;background:var(--bg-card);border-top:1px solid var(--border);flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-2)}
.legend-dot{width:12px;height:12px;border-radius:50%}
.legend-dot.smoke{background:var(--smoke)}
.legend-dot.flash{background:var(--flash)}
.legend-dot.molotov{background:var(--molotov)}
.legend-dot.he{background:var(--he)}

/* Source points on user map */
.map-hotspot-source{position:absolute;width:24px;height:24px;transform:translate(-50%,-50%);cursor:pointer;transition:all var(--transition);z-index:15;animation:sourceAppear .3s ease}
.map-hotspot-source::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--smoke);opacity:.5;animation:pulse 2s ease-in-out infinite}
.map-hotspot-source::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--smoke);box-shadow:0 0 10px rgba(88,166,255,.5)}
.map-hotspot-source:hover{transform:translate(-50%,-50%) scale(1.3);z-index:20}
.map-hotspot-source.active{transform:translate(-50%,-50%) scale(1.4);z-index:25}
.map-hotspot-source.active::before{background:var(--accent)}
.map-hotspot-source.active::after{background:var(--accent);box-shadow:0 0 20px var(--accent-glow)}
.map-hotspot-source .hotspot-label{background:rgba(88,166,255,.9);color:#fff}

@keyframes sourceAppear{from{opacity:0;transform:translate(-50%,-50%) scale(0.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* SIDE PANEL */
.map-overlay-active{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:999;opacity:0;pointer-events:none;transition:opacity .3s ease}
.map-overlay-active.show{opacity:1;pointer-events:all}

.lineup-panel{position:fixed;right:-450px;top:0;width:450px;max-width:90vw;height:100vh;background:var(--bg-secondary);border-left:1px solid var(--border);box-shadow:-8px 0 32px rgba(0,0,0,.5);z-index:1000;transition:right .3s ease;overflow-y:auto;display:flex;flex-direction:column}
.lineup-panel.open{right:0}
.lineup-panel-header{padding:1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;background:var(--bg-tertiary)}
.lineup-panel-title{font-size:1.4rem;font-weight:700;margin-bottom:.35rem}
.lineup-panel-subtitle{color:var(--text-2);font-size:.9rem}
.lineup-panel-close{width:36px;height:36px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.lineup-panel-close:hover{background:var(--molotov);color:#fff;border-color:var(--molotov)}
.lineup-panel-content{padding:1.5rem;flex:1}
.lineup-panel-section{margin-bottom:1.5rem}
.lineup-panel-section-title{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:.6rem;font-weight:600;display:flex;align-items:center;gap:.5rem}
.lineup-panel-video{width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:1rem}
.lineup-panel-video video{width:100%;height:100%;object-fit:cover}

.inst-box{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.15rem;position:relative}
.inst-box p{color:var(--text-1);font-family:'JetBrains Mono','Courier New',monospace;font-size:.9rem;line-height:1.7;white-space:pre-wrap}
.copy-btn{position:absolute;top:.65rem;right:.65rem;padding:.35rem .75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-2);font-size:.78rem;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:.3rem;font-family:inherit}
.copy-btn:hover{background:var(--accent);color:#000;border-color:var(--accent)}
.copy-btn.ok{background:var(--he);color:#fff;border-color:var(--he)}

.btn{padding:.7rem 1rem;border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;cursor:pointer;transition:all var(--transition);border:none;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:.4rem}
.btn-primary{background:var(--accent);color:#000;flex:1}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-secondary{background:var(--bg-card);color:var(--text-1);border:1px solid var(--border);flex:1}
.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}

/* FAVORITES & HISTORY */
.fav-counter{position:relative}
.fav-badge{position:absolute;top:-8px;right:-12px;min-width:18px;height:18px;padding:0 5px;background:var(--molotov);border-radius:999px;font-size:.7rem;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;line-height:1}
.fav-badge:empty{display:none}

.history-section{max-width:1400px;margin:0 auto;padding:0 2rem 2rem}
.history-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.history-title h3{font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:.5rem}
.history-clear{padding:.4rem .85rem;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-3);font-size:.78rem;cursor:pointer;transition:all var(--transition);font-family:inherit}
.history-clear:hover{background:var(--molotov);color:#fff;border-color:var(--molotov)}
.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.history-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.85rem;cursor:pointer;transition:all var(--transition);display:flex;flex-direction:column;gap:.5rem}
.history-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.history-card-title{font-size:.88rem;font-weight:600;color:var(--text-1);display:flex;align-items:center;gap:.4rem}
.history-card-meta{font-size:.75rem;color:var(--text-3)}
.history-empty{text-align:center;padding:2rem;color:var(--text-3);font-size:.9rem}

.favorites-page{max-width:1400px;margin:0 auto;padding:2rem}
.favorites-empty{text-align:center;padding:4rem 2rem}
.favorites-empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.3}
.favorites-empty h2{font-size:1.5rem;margin-bottom:.5rem;color:var(--text-1)}
.favorites-empty p{color:var(--text-2);margin-bottom:1.5rem}
.favorites-btn{display:inline-block;padding:.7rem 1.5rem;background:var(--accent);color:#000;border-radius:var(--radius-sm);font-weight:600;transition:all var(--transition)}
.favorites-btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 20px var(--accent-glow)}

/* FOOTER */
.footer{border-top:1px solid var(--border);padding:2rem;margin-top:3rem;background:var(--bg-secondary)}
.footer-inner{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-copy{color:var(--text-3);font-size:.88rem}
.footer-links{display:flex;gap:1.5rem;list-style:none}
.footer-links a{color:var(--text-2);font-size:.88rem}
.footer-links a:hover{color:var(--accent)}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

@media(max-width:768px){
    .header-inner{padding:0 1rem}
    .nav{gap:1rem}
    .nav a{font-size:.82rem}
    .hero{padding:3rem 1rem 2rem}
    .section,.map-container,.history-section,.page-head,.favorites-page{padding-left:1rem;padding-right:1rem}
    .maps-grid,.history-grid{grid-template-columns:1fr}
    .lineup-panel{width:100%;max-width:100%;right:-100%}
    .footer-inner{flex-direction:column;text-align:center}    
}

/* Filters */
.map-filters {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    align-items: center;
}

.filter-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-2);
    margin-right: 0.5rem;
}

.filter-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.filter-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-1);
    border-color: var(--border-hover);
}

.filter-btn.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}

.filter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.filter-dot.smoke { background: var(--smoke); }
.filter-dot.flash { background: var(--flash); }
.filter-dot.molotov { background: var(--molotov); }
.filter-dot.he { background: var(--he); }

.hotspot-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--molotov);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    border: 2px solid var(--bg-secondary);
}
/* Side filter buttons */
.side-btn {
    padding: .45rem .9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.side-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-1);
    border-color: var(--border-hover);
}

.side-btn.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}

.side-btn[data-side="T"].active {
    background: var(--accent);
    color: #000;
}

.side-btn[data-side="CT"].active {
    background: var(--smoke);
    color: #fff;
}