/* ===================================================================
   GeoGuessr IRL — Design system néon / gaming (v3)
   =================================================================== */

:root {
  --bg-0: #07030f;
  --bg-1: #140a2e;
  --bg-2: #2a0a5e;

  --pink: #ff2d95;
  --magenta: #d100d1;
  --purple: #7b2ff7;
  --violet: #b14cff;
  --blue: #3a86ff;
  --cyan: #22d3ee;
  --teal: #06d6a0;
  --green: #22e39a;
  --yellow: #ffd60a;
  --gold: #ffb703;
  --orange: #ff7b00;
  --red: #ff4d6d;

  --grad-hero: linear-gradient(100deg, var(--yellow), var(--pink) 45%, var(--cyan));
  --grad-accent: linear-gradient(135deg, var(--pink), var(--purple));
  --grad-primary: linear-gradient(135deg, var(--blue), var(--purple));
  --grad-ok: linear-gradient(135deg, var(--teal), #049e77);
  --grad-danger: linear-gradient(135deg, var(--red), var(--magenta));

  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-bg-2: rgba(255, 255, 255, 0.1);
  --glass-brd: rgba(255, 255, 255, 0.14);
  --text: #f4f1ff;
  --text-dim: rgba(244, 241, 255, 0.6);

  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 11px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --glow-cyan: 0 0 26px rgba(34, 211, 238, 0.45);
  --glow-pink: 0 0 26px rgba(255, 45, 149, 0.5);

  --f-head: "Baloo 2", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-num: "Space Grotesk", "Inter", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--f-body);
  color: var(--text);
  background: var(--bg-0);
  -webkit-tap-highlight-color: transparent;
}

/* ---------- DÉCOR ---------- */
#bg-mesh {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 55% at 15% 15%, rgba(123, 47, 247, 0.55), transparent 60%),
    radial-gradient(55% 50% at 85% 20%, rgba(255, 45, 149, 0.42), transparent 60%),
    radial-gradient(65% 60% at 75% 90%, rgba(34, 211, 238, 0.38), transparent 60%),
    radial-gradient(60% 60% at 20% 85%, rgba(255, 183, 3, 0.28), transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0));
  background-size: 200% 200%;
  animation: meshMove 22s ease-in-out infinite;
}
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.blob {
  position: fixed; border-radius: 50%; filter: blur(80px);
  opacity: 0.5; z-index: 0; pointer-events: none;
}
.blob-a { width: 360px; height: 360px; background: var(--pink); top: -110px; left: -90px; animation: float 16s ease-in-out infinite; }
.blob-b { width: 420px; height: 420px; background: var(--cyan); bottom: -140px; right: -110px; animation: float 20s ease-in-out infinite reverse; }
.blob-c { width: 300px; height: 300px; background: var(--purple); top: 40%; left: 60%; animation: float 24s ease-in-out infinite; }

/* ---------- ÉCRANS ---------- */
.screen {
  position: relative; z-index: 1;
  display: none; flex-direction: column;
  height: 100dvh; padding: 22px;
  padding-top: max(22px, env(safe-area-inset-top));
}
.screen.active { display: flex; }

/* ---------- TYPO ---------- */
h1, h2, h3 { font-family: var(--f-head); text-align: center; margin: 0 0 12px; line-height: 1.1; letter-spacing: .3px; }
h1 { font-size: clamp(30px, 7vw, 52px); font-weight: 800; }
h2 { font-size: clamp(22px, 4vw, 30px); font-weight: 700; }
h3 { font-size: 17px; color: var(--cyan); font-weight: 700; }
h3 small { color: var(--text-dim); font-weight: 500; font-size: 12px; }
.grad, h1 .grad {
  background: var(--grad-hero); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: shine 6s linear infinite;
}
.subtitle { text-align: center; color: var(--text-dim); margin: -4px 0 18px; font-size: 15px; }

/* ---------- VERRE ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 28px;
}
.login-card, .lobby-card, .wait-card { width: 100%; max-width: 460px; margin: auto; text-align: center; }
.results-card { width: 100%; max-width: 720px; }

/* ---------- CHAMPS ---------- */
input {
  width: 100%; padding: 15px 16px; font-size: 16px; font-family: inherit;
  margin: 8px 0; border-radius: var(--r-md);
  border: 1px solid var(--glass-brd); background: rgba(0, 0, 0, 0.3);
  color: var(--text); text-align: center; outline: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
input::placeholder { color: var(--text-dim); }
input:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.22); transform: translateY(-1px); }

/* ---------- BOUTONS ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 15px 24px; font-size: 16px; font-family: var(--f-head); font-weight: 700;
  color: #fff; border: none; border-radius: var(--r-md); cursor: pointer; margin: 8px 0;
  background: var(--grad-ok); box-shadow: 0 10px 26px rgba(6, 214, 160, 0.35);
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s, filter .14s;
}
.btn span { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.08); }
.btn:active { transform: translateY(0) scale(.97); }
.btn:disabled { background: rgba(255, 255, 255, 0.1); color: var(--text-dim); box-shadow: none; cursor: not-allowed; transform: none; filter: none; }
.btn.full { width: 100%; }
.btn.btn-primary { background: var(--grad-primary); box-shadow: 0 10px 26px rgba(58, 134, 255, .4); }
.btn.btn-accent  { background: var(--grad-accent);  box-shadow: 0 10px 26px rgba(255, 45, 149, .4); }
.btn.btn-danger  { background: var(--grad-danger);  box-shadow: 0 10px 26px rgba(255, 77, 109, .4); }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .6s;
}
.btn:hover::after { transform: translateX(130%); }

.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-brd);
  background: var(--glass-bg); color: #fff; font-size: 18px; cursor: pointer;
  backdrop-filter: blur(12px); transition: transform .15s, background .2s;
}
.icon-btn:hover { transform: scale(1.1); background: var(--glass-bg-2); }
.icon-btn.danger:hover { background: rgba(255, 77, 109, .25); }
.top-cluster { position: fixed; top: 14px; right: 14px; z-index: 9999; display: flex; gap: 10px; }

/* ---------- LOGIN ---------- */
.logo-wrap { position: relative; display: inline-block; margin-bottom: 4px; }
.logo-pin { font-size: 60px; display: block; animation: bob 2.6s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.logo-ping { position: absolute; left: 50%; bottom: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--cyan); transform: translateX(-50%); animation: ping 1.8s ease-out infinite; }

.tabs { display: flex; gap: 8px; background: rgba(0,0,0,.28); padding: 6px; border-radius: 999px; margin: 18px 0 16px; }
.tab { flex: 1; padding: 11px; border: none; border-radius: 999px; background: transparent; color: var(--text-dim); font-family: var(--f-head); font-weight: 700; font-size: 15px; cursor: pointer; transition: .25s; }
.tab.active { background: var(--grad-accent); color: #fff; box-shadow: var(--glow-pink); }
.tab-panel { display: none; animation: fadeIn .35s ease; }
.tab-panel.active { display: block; }

/* ---------- LISTES ---------- */
.player-list { list-style: none; padding: 0; margin: 8px 0; text-align: left; }
.player-list.scroll { max-height: 150px; overflow-y: auto; }
.player-list li {
  display: flex; align-items: center; gap: 12px;
  background: var(--glass-bg); border: 1px solid var(--glass-brd);
  margin: 8px 0; padding: 11px 13px; border-radius: var(--r-md);
  transition: transform .15s, background .2s;
}
.player-list li:hover { transform: translateX(4px); background: var(--glass-bg-2); }
.player-list .grow { flex: 1; font-weight: 600; }

.avatar {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-head);
  font-weight: 800; font-size: 15px; color: #0b0620;
  box-shadow: 0 5px 12px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.25);
}
.badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; font-family: var(--f-num); }
.badge.done { background: rgba(34, 227, 154, .18); color: var(--green); }
.badge.wait { background: rgba(255, 214, 10, .16); color: var(--yellow); }
.badge.score { background: rgba(34, 211, 238, .16); color: var(--cyan); }

/* ---------- LEADERBOARD (barres) ---------- */
.leaderboard { list-style: none; padding: 0; margin: 10px 0; }
.leaderboard li {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin: 9px 0; border-radius: var(--r-md);
  background: var(--glass-bg); border: 1px solid var(--glass-brd); overflow: hidden;
}
.leaderboard .bar { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(255,45,149,.28), rgba(34,211,238,.12)); width: 0; border-radius: inherit; transition: width 1s cubic-bezier(.22,1,.36,1); }
.leaderboard li > * { position: relative; z-index: 1; }
.rank { font-family: var(--f-head); font-weight: 800; width: 30px; text-align: center; font-size: 18px; }
.lb-score { font-family: var(--f-num); font-weight: 700; color: var(--cyan); }
.lb-name { flex: 1; font-weight: 600; }

/* ---------- STATUS / HEAD ---------- */
.screen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-right: 120px; }
.screen-head h2 { margin: 0; text-align: left; }
.floating-head { position: absolute; top: 18px; left: 22px; z-index: 500; margin: 0; padding-right: 0; }
.floating-head h2 { background: rgba(7,3,15,.6); backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--glass-brd); font-size: 18px; }
.status-pill { font-family: var(--f-head); font-weight: 700; padding: 8px 16px; border-radius: 999px; background: var(--glass-bg-2); border: 1px solid var(--glass-brd); white-space: nowrap; }

/* ---------- ADMIN ---------- */
.admin-grid { display: flex; gap: 18px; flex: 1; min-height: 0; }
.admin-col { display: flex; flex-direction: column; min-height: 0; padding: 20px; }
.admin-col.controls { flex: 1; overflow-y: auto; }
.admin-col.maps { flex: 1.6; }
.admin-chrono { text-align: center; font-family: var(--f-num); font-weight: 700; color: var(--cyan); font-size: 20px; min-height: 24px; margin: 4px 0 8px; }
.field-inline { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; margin: 8px 0; }
.field-inline input { width: 90px; margin: 0; }
.add-row { display: flex; gap: 8px; align-items: center; }
.add-row input { margin: 0; }
.add-row .btn { margin: 0; padding: 14px 18px; }

/* ---------- CARTES MAPLIBRE ---------- */
.map {
  flex: 1; width: 100%; min-height: 260px;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--glass-brd); box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.full-map { border-radius: 0; border: none; margin: 0; position: absolute; inset: 0; z-index: 1; }
#screen-game { padding: 0; }
.maplibregl-ctrl-group { background: rgba(7,3,15,.8) !important; border: 1px solid var(--glass-brd) !important; border-radius: 12px !important; overflow: hidden; }
.maplibregl-ctrl-group button { background: transparent !important; }
.maplibregl-ctrl-group button span { filter: invert(1); }
.maplibregl-popup-content {
  background: rgba(10,5,25,.95) !important; color: #fff !important;
  border: 1px solid var(--glass-brd); border-radius: 12px !important;
  font-family: var(--f-body); box-shadow: var(--shadow) !important; padding: 10px 14px !important;
}
.maplibregl-popup-tip { border-top-color: rgba(10,5,25,.95) !important; border-bottom-color: rgba(10,5,25,.95) !important; }
.maplibregl-popup-close-button { color: var(--text-dim) !important; font-size: 18px; }

/* Marqueurs personnalisés : le wrapper n'a AUCUN transform (MapLibre le
   positionne) ; l'animation/rotation vit sur les enfants. */
.pin-marker { width: 30px; height: 42px; cursor: grab; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.pin-marker svg { display: block; }
.pin-marker.me svg { transform-origin: 50% 100%; animation: dropIn .5s cubic-bezier(.34,1.56,.64,1); }
.halo-marker { width: 0; height: 0; }
.halo-inner { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,214,10,.4); }

/* ---------- CHRONO RING ---------- */
.chrono-ring { position: absolute; top: 74px; right: 16px; z-index: 600; width: 92px; height: 92px; }
.chrono-ring.big { position: relative; top: auto; right: auto; width: 150px; height: 150px; margin: 14px auto; }
.chrono-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.chrono-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.chrono-ring .ring-bg { stroke: rgba(255,255,255,.12); }
.chrono-ring .ring-fg { stroke: var(--cyan); transition: stroke-dashoffset .3s linear, stroke .3s; filter: drop-shadow(0 0 6px var(--cyan)); }
.chrono-ring .ring-time { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-num); font-weight: 700; font-size: 22px; }
.chrono-ring.big .ring-time { font-size: 34px; }
.chrono-ring.danger .ring-fg { stroke: var(--red); filter: drop-shadow(0 0 8px var(--red)); }
.chrono-ring.danger { animation: heartbeat .8s ease-in-out infinite; }
.chrono-ring.danger .ring-time { color: var(--red); }

/* ---------- JEU ---------- */
.hint { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 600; background: rgba(7,3,15,.75); backdrop-filter: blur(8px); padding: 9px 18px; border-radius: 999px; border: 1px solid var(--glass-brd); font-size: 14px; font-weight: 600; animation: floatY 2.4s ease-in-out infinite; }
.validate { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 600; width: min(92%, 460px); margin: 0; }

/* ---------- ATTENTE ---------- */
.check-badge { width: 96px; height: 96px; margin: 0 auto 10px; }
.check-badge svg { width: 100%; height: 100%; }
.check-badge circle { fill: none; stroke: var(--green); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .6s ease forwards; }
.check-badge path { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; animation: draw .4s .5s ease forwards; }
.wait-orb { width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; background: var(--glass-bg-2); border: 1px solid var(--glass-brd); animation: bob 2.6s ease-in-out infinite; }

/* ---------- RÉSULTATS ---------- */
.result-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 9px 0; border-radius: var(--r-md); background: var(--glass-bg); border: 1px solid var(--glass-brd); }
.result-row .dist { color: var(--text-dim); font-size: 13px; font-family: var(--f-num); }
.result-row .pts { font-family: var(--f-num); font-weight: 700; color: var(--green); font-size: 20px; }
.result-row.timeout .pts { color: var(--red); }
.bullseye { display: inline-block; color: var(--gold); font-weight: 800; font-size: 13px; animation: pop .5s ease; }

/* ---------- TOASTS ---------- */
#toast-zone { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; min-width: 230px; max-width: 90vw; padding: 14px 20px; border-radius: var(--r-md); background: rgba(10,5,25,.92); backdrop-filter: blur(12px); border: 1px solid var(--glass-brd); box-shadow: var(--shadow); font-weight: 600; text-align: center; }
.toast.ok { border-left: 5px solid var(--green); }
.toast.err { border-left: 5px solid var(--red); }
.toast.info { border-left: 5px solid var(--cyan); }

/* ---------- NET DOT ---------- */
.net-dot { position: fixed; bottom: 12px; left: 12px; z-index: 9999; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); background: var(--glass-bg); border: 1px solid var(--glass-brd); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(10px); }
.net-dot .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulseDot 1.8s ease infinite; }
.net-dot.off .dot { background: var(--red); box-shadow: 0 0 8px var(--red); }

/* ---------- ANIMATIONS ---------- */
@keyframes meshMove { 0%,100%{ background-position: 0% 0% } 50%{ background-position: 100% 100% } }
@keyframes shine { to { background-position: 220% center; } }
@keyframes float { 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(34px,44px) } }
@keyframes floatY { 0%,100%{ transform: translateX(-50%) translateY(0) } 50%{ transform: translateX(-50%) translateY(-7px) } }
@keyframes bob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }
@keyframes ping { 0%{ transform: translateX(-50%) scale(.6); opacity: .8 } 100%{ transform: translateX(-50%) scale(2.6); opacity: 0 } }
@keyframes pulseDot { 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@keyframes heartbeat { 0%,100%{ transform: scale(1) } 25%{ transform: scale(1.09) } 50%{ transform: scale(1) } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { 0%{ transform: scale(.6); opacity: 0 } 60%{ transform: scale(1.15) } 100%{ transform: scale(1); opacity: 1 } }
@keyframes dropIn { 0%{ transform: translateY(-34px); opacity: 0 } 60%{ transform: translateY(4px) } 100%{ transform: translateY(0); opacity: 1 } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes shake { 0%,100%{ transform: translateX(0) } 20%,60%{ transform: translateX(-8px) } 40%,80%{ transform: translateX(8px) } }
.shake { animation: shake .4s ease; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 820px) {
  .admin-grid { flex-direction: column; overflow-y: auto; }
  .admin-col.maps { min-height: 340px; }
  .screen { padding: 14px; }
  .chrono-ring { width: 76px; height: 76px; top: 68px; right: 12px; }
  .chrono-ring .ring-time { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}