:root{
  --bg:#070a12; --bg2:#0d1220; --accent:#3fd0ff; --accent2:#ff9d3f; --gold:#ffd23f; --purple:#b48cff;
  --glass: rgba(18,24,42,0.88); --glass-border: rgba(255,255,255,0.1);
  --text:#eaf2ff; --muted:#8398b8;
  --font-head:'Space Grotesk', sans-serif; --font-body:'Inter', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; background:var(--bg); color:var(--text); font-family:var(--font-body); overflow:hidden;}

/* ============ SPLASH ============ */
#splash{
  position:fixed; inset:0; z-index:100; background:radial-gradient(circle at 50% 35%, #101a30, #070a12 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .6s ease, visibility .6s ease;
}
#splash.hide{opacity:0; visibility:hidden; pointer-events:none;}
.splashRadar{position:relative; width:160px; height:160px; display:flex; align-items:center; justify-content:center;}
.radarRing{position:absolute; border:1.5px solid rgba(63,208,255,0.35); border-radius:50%; width:100%; height:100%;}
.radarRing.r2{width:60%; height:60%;}
.radarSweep{
  position:absolute; width:80px; height:80px; top:0; left:0; right:0; bottom:0; margin:auto;
  background:conic-gradient(from 0deg, rgba(63,208,255,0.55), transparent 60%);
  border-radius:50%; animation:spin 1.6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.radarBlip{position:absolute; width:6px; height:6px; border-radius:50%; background:#3fff8a; box-shadow:0 0 8px #3fff8a; animation:blipPulse 1.4s ease-in-out infinite;}
.b1{top:38%; left:60%;} .b2{top:65%; left:32%; animation-delay:.5s;}
@keyframes blipPulse{0%,100%{opacity:.3; transform:scale(.8);} 50%{opacity:1; transform:scale(1.3);}}
.splashTitle{font-family:var(--font-head); font-size:32px; font-weight:700; letter-spacing:2px;}
.splashTitle span{color:var(--accent);}
.splashSub{font-size:13px; color:var(--muted);}
.splashBar{width:220px; height:5px; background:rgba(255,255,255,0.08); border-radius:6px; overflow:hidden;}
#splashProgress{height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--purple)); transition:width .3s ease;}

/* ============ HEADER ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:5; padding:12px 16px;
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(180deg, rgba(7,10,18,0.92), rgba(7,10,18,0));
}
.iconBtn{background:none; border:none; cursor:pointer; color:var(--text);}
#menuBtn{width:36px; height:30px; display:flex; flex-direction:column; justify-content:space-between; padding:4px 2px;}
#menuBtn span{display:block; height:2.5px; background:var(--text); border-radius:2px; transition:.25s;}
h1{font-family:var(--font-head); font-size:17px; font-weight:700; letter-spacing:1px; flex:1; display:flex; align-items:center; gap:8px;}
h1 span{color:var(--accent);}
h1 .badge{font-family:var(--font-body); font-size:10.5px; background:var(--accent); color:#00202b; padding:3px 8px; border-radius:20px; font-weight:800; letter-spacing:0;}
.headerRight{display:flex; align-items:center; gap:10px;}
#xpChip{
  display:flex; align-items:center; gap:5px; background:rgba(255,210,63,0.12); border:1px solid rgba(255,210,63,0.3);
  color:var(--gold); padding:6px 11px; border-radius:20px; font-size:12.5px; font-weight:700;
}
.pill{
  background:var(--glass); border:1px solid var(--glass-border); padding:7px 13px; border-radius:20px; font-size:13px; font-weight:600;
}
.pill:hover{background:rgba(255,255,255,0.1);}

/* ============ MENU LATERAL ============ */
#menuOverlay{
  position:fixed; inset:0; z-index:19; background:rgba(0,0,0,0.5); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:.3s;
}
#menuOverlay.show{opacity:1; visibility:visible;}
#sideMenu{
  position:fixed; top:0; left:-320px; width:290px; height:100%; z-index:20;
  background:linear-gradient(180deg,#0d1424,#080b14); border-right:1px solid var(--glass-border);
  padding:22px 16px; overflow-y:auto; transition:left .35s cubic-bezier(.2,.85,.2,1);
  display:flex; flex-direction:column; gap:6px;
}
#sideMenu.open{left:0;}
.menuHead{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.menuAvatar{width:46px; height:46px; border-radius:14px; background:rgba(63,208,255,0.15); display:flex; align-items:center; justify-content:center; font-size:22px;}
.menuName{font-weight:700; font-size:15px;}
.menuLevel{font-size:12px; color:var(--accent);}
.menuXpBar{height:6px; background:rgba(255,255,255,0.08); border-radius:6px; overflow:hidden; margin-bottom:18px;}
#menuXpFill{height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--accent2)); transition:width .4s ease;}
.menuItem{
  background:none; border:none; color:var(--text); text-align:left; padding:11px 12px; border-radius:12px;
  font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:10px; transition:.2s;
}
.menuItem span{font-size:16px;}
.menuItem:hover{background:rgba(255,255,255,0.06);}
.menuItem.active{background:rgba(63,208,255,0.15); color:var(--accent);}
.menuDivider{height:1px; background:var(--glass-border); margin:10px 0;}
.menuTestLabel{font-size:10.5px; font-weight:800; color:#ff8080; letter-spacing:0.6px; padding:4px 12px;}
.menuItem.test{font-size:12.5px; color:#e0a0a0; padding:9px 12px;}
.menuTestList{display:flex; flex-direction:column; gap:4px; max-height:160px; overflow-y:auto;}
.menuTestList .menuItem{font-size:12px;}

/* ============ VUES ============ */
.view{display:none; position:fixed; inset:0; padding-top:70px;}
.view.active{display:block;}
#view-map.active{display:block;}
.viewHeader{padding:16px 20px 4px;}
.viewHeader h2{font-family:var(--font-head); font-size:22px;}
.viewHeader .sub{color:var(--muted); font-size:13px; margin-top:2px;}

/* ============ CARTE ============ */
#locBanner{
  position:fixed; top:74px; left:50%; transform:translateX(-50%); z-index:4; width:min(460px,92vw);
  background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:14px 16px;
  display:flex; flex-direction:column; gap:10px; backdrop-filter:blur(10px);
}
#locBanner.hidden{display:none;}
#locBannerText{font-size:13px; color:var(--muted); line-height:1.4;}
#locBtn{background:linear-gradient(135deg,var(--accent),#2a9fd6); border:none; color:#00202b; font-weight:700; padding:10px; border-radius:10px; cursor:pointer; font-size:14px;}

#status{
  position:fixed; top:74px; left:16px; z-index:4; font-size:12px; color:var(--muted);
  background:var(--glass); border:1px solid var(--glass-border); padding:7px 12px; border-radius:10px;
  display:flex; align-items:center; gap:8px;
}
.dot{width:8px; height:8px; border-radius:50%; background:#ff9d3f; box-shadow:0 0 8px #ff9d3f; animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}

#map{position:absolute; inset:0; top:0; z-index:1;}
/* Leaflet utilise des z-index internes allant jusqu'à ~700 (tuiles, marqueurs, popups).
   Sans z-index explicite ici, ces panneaux internes peuvent passer AU-DESSUS du header,
   du HUD, du panneau de filtres, etc. Le z-index:1 crée un contexte d'empilement qui
   confine toute la carte en dessous de n'importe quel élément d'interface (z-index >= 2). */

#hud{
  position:fixed; bottom:0; left:0; right:0; z-index:4; padding:14px; display:flex; gap:10px;
  overflow-x:auto; scrollbar-width:none;
}
#hud::-webkit-scrollbar{display:none;}

.planeCard{
  min-width:200px; background:var(--glass); border:1px solid var(--glass-border); border-radius:16px;
  padding:12px 14px; backdrop-filter:blur(12px); flex-shrink:0; transition:.2s;
  animation:rise .35s ease;
}
@keyframes rise{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);}}
.planeCard:hover{border-color:var(--accent);}
.planeCard .topRow{display:flex; justify-content:space-between; align-items:center;}
.planeCard .callsign{font-weight:700; font-size:14px; color:var(--accent); font-family:var(--font-head);}
.planeCard .rarityTag{font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:8px; letter-spacing:0.4px;}
.rarity-common{background:rgba(140,155,180,0.2); color:#b6c4d8;}
.rarity-rare{background:rgba(63,208,255,0.2); color:var(--accent);}
.rarity-epic{background:rgba(180,140,255,0.2); color:var(--purple);}
.rarity-legendary{background:rgba(255,210,63,0.2); color:var(--gold);}
.planeCard .meta{font-size:11px; color:var(--muted); margin-top:6px; line-height:1.5;}
.planeCard .distance{font-size:11.5px; margin-top:5px; font-weight:700;}
.planeCard .distance.near{color:#3fff8a;}
.planeCard .distance.far{color:var(--muted);}
.planeCard .catchBtn{
  margin-top:9px; width:100%; border:none; font-weight:700; padding:9px; border-radius:10px; font-size:12.5px; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#2a9fd6); color:#00202b; transition:.2s;
}
.planeCard .catchBtn:hover:not(:disabled){transform:translateY(-2px);}
.planeCard .catchBtn:disabled{background:#232f45; color:var(--muted); cursor:not-allowed;}

/* ============ LAYERS BUTTON + FILTER PANEL ============ */
.mapFab{
  position:fixed; top:118px; right:16px; z-index:6; width:42px; height:42px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,0.35); transition:.2s;
}
.mapFab:hover{background:rgba(255,255,255,0.1);}
.mapFab.active{color:var(--accent); border-color:var(--accent);}

#filterPanel{
  position:fixed; top:166px; right:16px; z-index:6; width:230px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:14px;
  backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,0.4);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.22s;
}
#filterPanel.show{opacity:1; visibility:visible; transform:translateY(0);}
.filterTitle{font-size:10.5px; font-weight:800; letter-spacing:0.6px; color:var(--muted); text-transform:uppercase; margin-bottom:8px;}
.filterRow{display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; padding:6px 0; cursor:pointer;}
.filterRow input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:34px; height:20px; border-radius:20px; background:#232f45;
  position:relative; cursor:pointer; transition:.2s; border:1px solid var(--glass-border); flex-shrink:0;
}
.filterRow input[type="checkbox"]::before{
  content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:var(--muted); transition:.2s;
}
.filterRow input[type="checkbox"]:checked{background:rgba(63,208,255,0.35); border-color:var(--accent);}
.filterRow input[type="checkbox"]:checked::before{transform:translateX(14px); background:var(--accent);}
.filterDivider{height:1px; background:var(--glass-border); margin:10px 0;}
#scopeSelect{
  width:100%; background:#141d31; border:1px solid var(--glass-border); color:var(--text);
  padding:8px 10px; border-radius:8px; font-size:12.5px;
}
.filterHint{font-size:10.5px; color:var(--muted); line-height:1.5; margin-top:8px;}

.airportPopup{font-size:12px; line-height:1.5;}
.airportPopup b{color:var(--accent);}

/* ============ RECORDING BAR ============ */
#recBar{
  position:fixed; top:74px; left:50%; transform:translateX(-50%) translateY(-170px); z-index:6; width:min(420px,92vw);
  background:linear-gradient(135deg, rgba(255,90,90,0.16), var(--glass)); border:1px solid rgba(255,90,90,0.4);
  border-radius:16px; padding:11px 14px; display:flex; align-items:center; gap:10px; backdrop-filter:blur(12px);
  box-shadow:0 10px 26px rgba(0,0,0,0.4); transition:transform .35s cubic-bezier(.2,.85,.2,1);
}
#recBar.show{transform:translateX(-50%) translateY(0);}
#recDot{width:9px; height:9px; border-radius:50%; background:#ff5a5a; box-shadow:0 0 8px #ff5a5a; animation:pulse 1s infinite; flex-shrink:0;}
#recText{font-size:12.5px; font-weight:600; flex:1;}
#recTime{font-size:13px; font-weight:800; font-family:var(--font-head); color:#ff9d9d;}
#recStopBtn{background:#ff5a5a; border:none; color:#2b0000; font-weight:800; padding:7px 12px; border-radius:10px; font-size:12px; cursor:pointer;}

/* ============ INDEX / STATS / SETTINGS ============ */
#view-index, #view-stats, #view-settings{overflow-y:auto; height:100%;}
.collGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; padding:14px 20px 40px;}
.collCard{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:14px; font-size:12px;
  position:relative; overflow:hidden;
}
.collCard::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--rarity-color,var(--accent));}
.collCard .cs{font-weight:700; color:var(--text); font-size:14px; font-family:var(--font-head);}
.collCard .rarityTag{display:inline-block; margin-top:4px;}
.collCard .when{color:var(--muted); margin-top:8px;}
.empty{color:var(--muted); font-size:13px; text-align:center; margin-top:60px; grid-column:1/-1;}

.statsGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; padding:14px 20px 40px;}
.statCard{background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:18px;}
.statCard .val{font-family:var(--font-head); font-size:28px; font-weight:700; color:var(--accent);}
.statCard .lbl{font-size:12px; color:var(--muted); margin-top:4px;}

/* ============ MES VOLS (JOURNAL) ============ */
#logControlCard{
  margin:14px 20px; background:var(--glass); border:1px solid var(--glass-border); border-radius:18px;
  padding:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.logControlTitle{font-family:var(--font-head); font-size:16px; font-weight:700;}
.logControlDesc{font-size:12px; color:var(--muted); margin-top:4px; max-width:340px; line-height:1.5;}
#logStartBtn{
  background:linear-gradient(135deg,#ff5a5a,#c93a3a); border:none; color:#fff; font-weight:800;
  padding:12px 18px; border-radius:12px; cursor:pointer; font-size:13px; white-space:nowrap; flex-shrink:0;
}
#logStartBtn.recording{background:linear-gradient(135deg,#3fff8a,#1fbf67); color:#00230f;}

#logMatchCard{
  margin:0 20px 14px; background:rgba(63,208,255,0.1); border:1px solid rgba(63,208,255,0.3);
  border-radius:16px; padding:14px 16px;
}
#logMatchCard.hidden{display:none;}
.logMatchLabel{font-size:10.5px; font-weight:800; letter-spacing:0.5px; color:var(--accent); text-transform:uppercase; margin-bottom:6px;}

.logList{padding:0 20px 40px; display:flex; flex-direction:column; gap:12px;}
.logCard{background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:16px;}
.logCard .lcTop{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.logCard .lcTitle{font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--accent);}
.logCard .lcDate{font-size:11px; color:var(--muted);}
.logCard .lcStats{display:flex; gap:16px; margin-top:10px; flex-wrap:wrap;}
.logCard .lcStat{font-size:12px;}
.logCard .lcStat b{display:block; font-family:var(--font-head); font-size:16px; color:var(--text);}
.logCard .lcInfo{margin-top:10px; font-size:12px; color:var(--muted); background:rgba(255,255,255,0.04); border-radius:10px; padding:9px 11px; line-height:1.6;}
.logCard .lcActions{display:flex; gap:8px; margin-top:12px;}
.logCard .lcActions button{
  flex:1; background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); color:var(--text);
  padding:9px; border-radius:10px; font-size:12px; font-weight:700; cursor:pointer;
}
.logCard .lcActions button:hover{background:rgba(255,255,255,0.12);}
.logCard .lcActions button.danger{color:#ff9d9d; border-color:rgba(255,90,90,0.3);}

.settingsList{padding:10px 20px 40px; display:flex; flex-direction:column; gap:14px; max-width:520px;}
.settingRow{display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:14px 16px;}
.settingTitle{font-size:14px; font-weight:600;}
.settingDesc{font-size:11.5px; color:var(--muted); margin-top:2px;}
.settingRow select{background:#141d31; border:1px solid var(--glass-border); color:var(--text); padding:8px 10px; border-radius:8px; font-size:13px;}
.dangerBtn{background:rgba(255,90,90,0.12); border:1px solid rgba(255,90,90,0.35); color:#ff9d9d; padding:12px; border-radius:12px; cursor:pointer; font-weight:700; font-size:13px;}

/* ============ MINI-JEU ============ */
#gameOverlay{
  position:fixed; inset:0; z-index:30; background:rgba(4,6,12,0.92); display:none;
  align-items:center; justify-content:center; backdrop-filter:blur(6px);
}
#gameOverlay.show{display:flex;}
#gameBox{background:var(--glass); border:1px solid var(--glass-border); border-radius:20px; padding:22px; text-align:center; width:min(360px,92vw); animation:popIn .3s cubic-bezier(.2,.9,.3,1.2);}
@keyframes popIn{from{opacity:0; transform:scale(.85);} to{opacity:1; transform:scale(1);}}
#gameRarity{font-size:11px; font-weight:800; letter-spacing:0.5px; margin-bottom:4px;}
#gameBox h2{font-size:18px; margin-bottom:6px; font-family:var(--font-head);}
#gameSub{font-size:12px; color:var(--muted); margin-bottom:12px;}
#gameCanvas{background:#0d1424; border-radius:14px; border:1px solid var(--glass-border); touch-action:none; cursor:pointer;}
#gameCanvas.hidden{display:none;}
#gameHoldArea{display:none; width:320px; height:320px; align-items:center; justify-content:center; background:#0d1424; border-radius:14px; border:1px solid var(--glass-border); margin:0 auto;}
#gameHoldArea.show{display:flex;}
#gameHoldBtn{
  width:170px; height:170px; border-radius:50%; border:none; cursor:pointer; user-select:none; touch-action:none;
  background:radial-gradient(circle at 35% 30%, #3fe0ff, #1a86ac); color:#00202b; font-weight:800; font-size:15px;
  line-height:1.5; box-shadow:0 0 0 6px rgba(63,208,255,0.15); transition:transform .12s ease, box-shadow .12s ease;
}
#gameHoldBtn.pressed{transform:scale(0.92); box-shadow:0 0 0 14px rgba(63,208,255,0.28);}
#gameProgress{height:8px; background:rgba(255,255,255,0.08); border-radius:6px; margin-top:12px; overflow:hidden;}
#gameProgressBar{height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .1s linear;}
#gameTimer{margin-top:8px; font-size:13px; color:var(--muted); font-weight:700;}
#gameCancel{margin-top:14px; background:none; border:1px solid var(--glass-border); color:var(--muted); padding:8px 16px; border-radius:10px; cursor:pointer;}

/* ============ CONFETTIS DE CAPTURE ============ */
#captureFx{position:fixed; inset:0; z-index:40; pointer-events:none; overflow:hidden;}
.confetti{position:absolute; top:-10px; width:8px; height:14px; border-radius:2px; animation:confettiFall linear forwards;}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg); opacity:1;}
  100%{transform:translateY(110vh) rotate(720deg); opacity:0;}
}
.captureBurst{
  position:absolute; width:12px; height:12px; border-radius:50%; background:var(--gold);
  animation:burstOut .6s ease-out forwards;
}
@keyframes burstOut{from{transform:translate(-50%,-50%) scale(0.3); opacity:1;} to{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity:0;}}

/* ============ TOAST ============ */
#toast{
  position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-80px); z-index:50;
  background:linear-gradient(135deg,var(--accent2),#e07a1f); color:#2b1400; font-weight:700; padding:12px 22px;
  border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,0.4); transition:transform .4s cubic-bezier(.2,.8,.2,1);
  pointer-events:none; max-width:90vw; text-align:center;
}
#toast.show{transform:translateX(-50%) translateY(0);}

@media (max-width:600px){
  h1{font-size:14px;}
  .planeCard{min-width:170px;}
  #gameCanvas{width:280px; height:280px;}
  #gameHoldArea{width:280px; height:280px;}
  #gameHoldBtn{width:140px; height:140px; font-size:13px;}
  #sideMenu{width:82vw; left:-82vw;}
  #filterPanel{width:min(230px,58vw);}
  #logControlCard{flex-direction:column; align-items:stretch;}
  #logStartBtn{width:100%;}
}