*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;background:#0a0a0f;color:#e8e4df;overflow:hidden;height:100vh;width:100vw}
#map{position:absolute;inset:0;z-index:1}
.leaflet-tile-pane{transition:filter 0.3s ease}
.leaflet-control-attribution,.leaflet-control-zoom{display:none!important}

.top-bar{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(180deg,rgba(10,10,15,0.95) 0%,rgba(10,10,15,0) 100%);pointer-events:none}
.top-bar>*{pointer-events:auto}

.logo{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:22px;letter-spacing:2px;display:flex;align-items:center;gap:8px}
.logo-img{width:28px;height:28px;object-fit:contain}
.logo span{background:linear-gradient(90deg,#ff6a00,#ff9040);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Splash screen */
.splash{position:fixed;inset:0;z-index:9999;background:#0a0a0f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity 0.6s ease}
.splash.fade-out{opacity:0;pointer-events:none}
.splash-logo{width:180px;height:auto;animation:splash-pulse 2s ease-in-out infinite alternate}
.splash-text{width:280px;height:auto;opacity:0.9}
@keyframes splash-pulse{0%{filter:drop-shadow(0 0 8px rgba(255,106,0,0.3))}100%{filter:drop-shadow(0 0 24px rgba(255,106,0,0.6))}}

.top-right{display:flex;align-items:center;gap:8px}

.view-toggle{display:flex;background:rgba(20,20,28,0.85);border-radius:12px;padding:4px;backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.06)}
.view-btn{padding:10px 20px;border-radius:9px;border:none;background:transparent;color:#888;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s}
.view-btn.active{background:rgba(255,106,0,0.15);color:#ff8833;box-shadow:0 0 20px rgba(255,106,0,0.1)}
.view-btn:hover:not(.active){color:#ccc}

/* Settings menu */
.settings-wrap{position:relative}
.settings-btn{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:rgba(20,20,28,0.85);backdrop-filter:blur(20px);color:#888;font-size:20px;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;line-height:1}
.settings-btn:hover,.settings-btn.open{color:#ff8833;border-color:rgba(255,106,0,0.3)}
.settings-btn.open{background:rgba(30,28,20,0.9)}
.settings-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:rgba(14,14,20,0.95);backdrop-filter:blur(24px);border-radius:14px;border:1px solid rgba(255,255,255,0.08);padding:16px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 0.2s,transform 0.2s,visibility 0.2s;pointer-events:none}
.settings-menu.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.settings-section{margin-bottom:14px}
.settings-section:last-child{margin-bottom:0}
.settings-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#555;margin-bottom:8px}
.settings-row{display:flex;gap:6px;flex-wrap:wrap}
.settings-option{padding:6px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:#777;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.settings-option:hover{border-color:rgba(255,255,255,0.15);color:#bbb}
.settings-option.active{background:rgba(255,106,0,0.12);border-color:rgba(255,106,0,0.3);color:#ff8833}

.stats-area{z-index:1000}
.panel{position:fixed;z-index:1000;background:rgba(14,14,20,0.9);backdrop-filter:blur(24px);border-radius:16px;padding:16px 20px;border:1px solid rgba(255,255,255,0.06);transition:all 0.3s ease}
.legend{bottom:24px;left:24px;min-width:200px}
.stats{bottom:24px;right:24px;text-align:right}
.panel h3{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#666;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.panel-toggle{background:none;border:none;color:#555;font-size:14px;cursor:pointer;padding:0 0 0 12px;transition:transform 0.3s ease, color 0.2s;line-height:1}
.panel-toggle:hover{color:#ff8833}
.panel.collapsed .panel-toggle{transform:rotate(180deg)}
.panel.collapsed .panel-body{display:none}
.panel.collapsed{padding:12px 16px}
.legend-item{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;color:#aaa}
.legend-dot{width:14px;height:14px;border-radius:3px;flex-shrink:0;clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.stat-row{display:flex;justify-content:space-between;gap:24px;margin-bottom:8px;font-size:13px}
.stat-label{color:#666}
.stat-value{font-family:'JetBrains Mono',monospace;font-weight:700;color:#ff8833}

/* Hex glow on hover */
.hex-glow{filter:drop-shadow(0 0 6px var(--glow-color, rgba(255,106,0,0.9))) drop-shadow(0 0 14px var(--glow-color, rgba(255,106,0,0.7))) drop-shadow(0 0 28px var(--glow-color, rgba(255,106,0,0.4))) brightness(1.6)}

/* Gold glow for active recording hexes */
.hex-gold{filter:drop-shadow(0 0 6px rgba(255,215,0,0.9)) drop-shadow(0 0 16px rgba(255,215,0,0.6)) brightness(1.5)}

/* Sport filter pills */
.sport-filters{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:1000;display:flex;flex-direction:column;gap:6px;pointer-events:auto}
.sport-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:rgba(14,14,20,0.85);backdrop-filter:blur(20px);color:#555;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.25s;white-space:nowrap}
.sport-pill:hover{border-color:rgba(255,255,255,0.15);color:#999}
.sport-pill.active{color:#e8e4df;border-color:rgba(255,255,255,0.15)}
.sport-pill .pill-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0;clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);opacity:0.3;transition:opacity 0.25s}
.sport-pill.active .pill-dot{opacity:1}

/* Bottom buttons */
.bottom-buttons{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1001;display:flex;align-items:center;gap:12px}
.locate-btn{width:48px;height:48px;border-radius:50%;border:2px solid rgba(0,140,255,0.3);background:rgba(14,14,20,0.92);backdrop-filter:blur(24px);color:#0090ff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s}
.locate-btn:hover{border-color:rgba(0,140,255,0.6);color:#40b0ff}
.record-btn{display:flex;align-items:center;gap:10px;padding:14px 28px;border-radius:50px;border:2px solid rgba(255,106,0,0.3);background:rgba(14,14,20,0.92);backdrop-filter:blur(24px);color:#aaa;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.3s}
.record-btn:hover{border-color:rgba(255,106,0,0.6);color:#e8e4df}
.record-btn.recording{border-color:rgba(255,215,0,0.7);background:rgba(40,35,10,0.92);color:#ffd700;animation:rec-pulse 1.5s ease-in-out infinite}
.record-dot{width:14px;height:14px;border-radius:50%;background:#ff4d00;transition:all 0.3s}
.record-btn.recording .record-dot{background:#ffd700;box-shadow:0 0 12px rgba(255,215,0,0.8)}
@keyframes rec-pulse{0%,100%{box-shadow:0 0 10px rgba(255,215,0,0.3)}50%{box-shadow:0 0 24px rgba(255,215,0,0.6)}}

/* GPS location dot */
.gps-dot{width:16px;height:16px;background:rgba(0,140,255,0.9);border:3px solid #fff;border-radius:50%;box-shadow:0 0 10px rgba(0,140,255,0.6),0 0 30px rgba(0,140,255,0.3)}

/* Tooltip */
.hex-tooltip{position:fixed;z-index:2000;background:rgba(14,14,20,0.95);backdrop-filter:blur(20px);border-radius:10px;padding:12px 16px;border:1px solid rgba(255,106,0,0.2);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity 0.2s,transform 0.2s;font-size:12px;max-width:260px}
.hex-tooltip.visible{opacity:1;transform:translateY(0)}
.hex-tooltip .tt-title{font-weight:700;color:#ff8833;margin-bottom:6px}
.hex-tooltip .tt-detail{color:#888;line-height:1.7}
.tt-sport-line{display:flex;align-items:center;gap:6px}
.tt-sport-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;display:inline-block}
.tt-sport-name{color:#ccc}
.tt-sport-when{color:#666;margin-left:auto;padding-left:12px}

/* Login page */
.login-container{display:flex;align-items:center;justify-content:center;height:100vh;background:#0a0a0f}
.login-box{background:rgba(14,14,20,0.95);backdrop-filter:blur(24px);border-radius:16px;padding:40px;border:1px solid rgba(255,255,255,0.06);width:360px}
.login-box h1{font-family:'JetBrains Mono',monospace;font-size:24px;text-align:center;margin-bottom:24px;background:linear-gradient(90deg,#ff6a00,#ff9040);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.login-box input{width:100%;padding:12px 16px;margin-bottom:14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#e8e4df;font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color 0.3s}
.login-box input:focus{border-color:rgba(255,106,0,0.4)}
.login-box button{width:100%;padding:12px;border:none;border-radius:8px;background:linear-gradient(135deg,#ff6a00,#ff2d00);color:#fff;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:opacity 0.3s}
.login-box button:hover{opacity:0.9}
.login-error{color:#ff4444;font-size:13px;text-align:center;margin-bottom:14px}

/* Install toast */
.install-toast{position:fixed;top:60px;left:50%;transform:translateX(-50%) translateY(-20px);z-index:2000;background:rgba(14,14,20,0.95);backdrop-filter:blur(20px);border-radius:12px;padding:14px 20px;border:1px solid rgba(255,106,0,0.3);color:#ff8833;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;white-space:nowrap;opacity:0;transition:opacity 0.3s,transform 0.3s}
.install-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Mobile responsive ───────────────────────── */
@media (max-width: 640px) {
    .top-bar{padding:8px 12px}
    .logo{font-size:16px;gap:6px}
    .logo .hex-icon{width:22px;height:22px}
    .view-btn{padding:8px 12px;font-size:12px}
    .settings-btn{width:34px;height:34px;font-size:17px}
    .settings-menu{min-width:170px;padding:12px}
    .legend,.stats{padding:10px 14px}
    .legend{bottom:16px;left:12px;min-width:160px}
    .stats{bottom:16px;right:12px}
    .panel h3{font-size:10px;margin-bottom:10px}
    .legend-item{font-size:11px;gap:6px;margin-bottom:6px}
    .legend-dot{width:10px;height:10px}
    .stat-row{font-size:11px;gap:16px;margin-bottom:6px}

    .stats-area{position:fixed;bottom:16px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
    .stats-area .sport-filters{position:static;display:flex;flex-direction:column;gap:6px;transform:none;top:auto;right:auto}
    .stats-area .stats{position:static;bottom:auto;right:auto}
    .sport-pill{padding:6px 10px;font-size:11px;gap:6px}
    .sport-pill .pill-dot{width:8px;height:8px}

    .bottom-buttons{top:52px;bottom:auto;transform:translateX(-50%)}
    .record-btn{padding:8px 20px;font-size:12px;border-radius:20px}
    .locate-btn{width:36px;height:36px}
    .hex-tooltip{max-width:200px;font-size:11px}
}