/* ==========================================================
   Ludéales — suite géographique
   ========================================================== */

.geo-hero{padding:52px 0 36px}
.geo-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:900px){.geo-hero-grid{grid-template-columns:1fr;gap:28px}}

.geo-globe{
  position:relative;min-height:220px;padding:36px 28px;
  background:linear-gradient(145deg, var(--blanc) 0%, var(--lavande-pale) 55%, rgba(184,216,234,.35) 100%);
  border:1px solid var(--ligne);border-radius:calc(var(--rayon) + 4px);
  box-shadow:var(--ombre);overflow:hidden;
}
.geo-globe::before{
  content:"";position:absolute;inset:-20% -10% auto;height:70%;
  background:radial-gradient(circle at 30% 40%, rgba(212,196,240,.55), transparent 62%);
  pointer-events:none;
}
.geo-orbit{
  position:relative;z-index:1;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
}
.geo-pin{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;
  background:rgba(255,255,255,.82);border:1px solid var(--ligne);
  font-size:13px;font-weight:700;color:var(--encre-doux);
  box-shadow:0 2px 10px rgba(61,53,88,.06);
}
.geo-pin i{
  width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  background:var(--corail);box-shadow:0 0 0 4px rgba(232,146,90,.18);
}

.geo-card.new::after{content:"Nouveau"}

/* ---------- page de jeu ---------- */
.geo-play{padding:28px 0 64px}
.geo-playhead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:22px;
}
.geo-playhead h1{font-size:clamp(28px,4vw,42px);letter-spacing:-.015em}
.geo-playhead .origin{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--lavande-fonce);font-weight:700}

.geo-board{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,320px);
  gap:28px;align-items:start;
}
@media(max-width:960px){
  .geo-board{
    display:flex;flex-direction:column;gap:16px;
  }
  .geo-map-panel{order:2}
  .geo-map-panel::before{
    content:"Pincez pour zoomer, glissez pour déplacer la carte";
    display:block;font-size:12px;font-weight:600;color:var(--encre-doux);
    text-align:center;margin-bottom:8px;line-height:1.4;
  }
  .geo-side{display:contents}
  .geo-prompt{order:1}
  .geo-feedback{order:3}
  .geo-timer{order:4}
  .geo-stats{order:5}
  .geo-queue{order:6}
  .geo-actions{order:7}
  .geo-map-viewport{min-height:min(58vw, 420px)}
}

.geo-map-panel{
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:calc(var(--rayon) + 2px);box-shadow:var(--ombre);
  padding:18px 16px 14px;position:relative;
}
.geo-map-wrap{
  position:relative;border-radius:var(--rayon);
  background:linear-gradient(180deg, rgba(184,216,234,.22) 0%, rgba(245,241,250,.65) 100%);
  border:1px solid var(--ligne);overflow:hidden;
  touch-action:none;
}
.geo-map-viewport{
  overflow:hidden;width:100%;min-height:220px;
  touch-action:none;cursor:grab;
}
.geo-map-viewport.is-panning{cursor:grabbing}
.geo-map-layer{
  transform-origin:0 0;
  will-change:transform;
}
.geo-map-layer svg{display:block;width:100%;height:auto;cursor:crosshair}
.geo-map-wrap svg{display:block;width:100%;height:auto;cursor:crosshair}
.geo-map-wrap svg path{
  fill:var(--lavande-pale);
  stroke:var(--lavande-fonce);
  stroke-width:.7;
  vector-effect:non-scaling-stroke;
  transition:fill .25s ease, stroke .25s ease, opacity .25s ease;
}
.geo-map-wrap svg path:hover:not(.placed){
  fill:rgba(212,196,240,.55);
}
.geo-map-wrap svg path.placed{
  stroke:rgba(61,53,88,.35);
  cursor:default;
}
.geo-map-wrap svg path.placed:hover{fill:inherit}

.geo-map-wrap svg .geo-country-pin{
  fill:var(--corail);
  stroke:var(--blanc);
  stroke-width:2.2;
  paint-order:stroke fill;
  cursor:pointer;
  opacity:.92;
  transition:fill .2s ease, opacity .2s ease, transform .15s ease;
  filter:drop-shadow(0 1px 2px rgba(61,53,88,.18));
}
.geo-map-wrap svg .geo-country-pin:hover:not(.placed){
  opacity:1;
  fill:var(--corail-clair);
}
.geo-map-wrap svg .geo-country-pin.placed{
  stroke:rgba(61,53,88,.28);
  cursor:default;
  opacity:1;
}

.geo-map-wrap svg .geo-inset{
  fill:rgba(255,251,247,.92);
  stroke:var(--lavande-fonce);
  stroke-width:1.6;
  pointer-events:none;
}
.geo-map-wrap svg .geo-inset-link{
  stroke:var(--lavande-fonce);
  stroke-width:1.4;
  stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
  opacity:.7;
}
.geo-map-wrap svg .geo-inset-anchor{
  fill:var(--corail);
  stroke:var(--blanc);
  stroke-width:1.4;
  paint-order:stroke fill;
  pointer-events:none;
  opacity:.9;
}
.geo-map-wrap svg .geo-inset-anchor.placed{
  stroke:rgba(61,53,88,.28);
  opacity:1;
}
.geo-map-wrap svg .geo-inset-label{
  fill:var(--encre-doux);
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  pointer-events:none;
}

.geo-map-wrap.wrong-flash{animation:geoShake .45s ease}
@keyframes geoShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

.geo-side{
  position:sticky;top:80px;
  display:flex;flex-direction:column;gap:16px;
}
@media(max-width:960px){.geo-side{position:static}}

.geo-prompt{
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--rayon);box-shadow:var(--ombre);
  padding:22px 20px 20px;text-align:center;
}
.geo-prompt-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--encre-doux);font-weight:700;margin-bottom:10px;
}
.geo-prompt-country{
  font-family:var(--serif);font-size:clamp(28px,4.5vw,38px);
  letter-spacing:-.02em;color:var(--encre);line-height:1.05;
  min-height:1.2em;
}
.geo-prompt-hint{
  margin-top:12px;font-size:13px;color:var(--encre-doux);line-height:1.5;
}

.geo-feedback{
  min-height:2.8em;padding:12px 14px;border-radius:var(--rayon);
  font-size:13.5px;line-height:1.45;text-align:center;
  background:var(--lavande-pale);color:var(--encre-doux);
  border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s;
}
.geo-feedback.ok{background:rgba(184,216,234,.35);color:var(--encre);border-color:rgba(142,197,224,.55)}
.geo-feedback.nope{background:rgba(232,146,90,.12);color:var(--encre);border-color:rgba(232,146,90,.35)}
.geo-feedback.done{background:rgba(212,196,240,.4);color:var(--encre);border-color:var(--lavande-moy)}

.geo-timer{
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  gap:2px 12px;align-items:end;
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--rayon);box-shadow:var(--ombre);
  padding:14px 18px 12px;
}
.geo-timer-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--lavande-fonce);font-weight:700;
}
.geo-timer-value{
  grid-row:1 / 3;grid-column:2;
  font-family:var(--serif);font-variant-numeric:tabular-nums;
  font-size:clamp(32px,5vw,40px);line-height:1;color:var(--encre);
  letter-spacing:-.02em;
}
.geo-timer-note{
  font-size:12px;color:var(--encre-doux);font-weight:600;
}
.geo-timer.penalty-flash{
  animation:geoPenalty .7s ease;
}
.geo-timer.penalty-flash .geo-timer-value{color:var(--corail)}
@keyframes geoPenalty{
  0%{box-shadow:0 0 0 0 rgba(232,146,90,.45)}
  40%{background:rgba(232,146,90,.12);border-color:rgba(232,146,90,.45)}
  100%{box-shadow:0 0 0 0 transparent}
}

.geo-stats{
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--rayon);box-shadow:var(--ombre);
  padding:16px 18px;
}
.geo-stats h2{
  font-family:var(--sans);font-size:10px;text-transform:uppercase;
  letter-spacing:.13em;color:var(--lavande-fonce);font-weight:700;margin-bottom:12px;
}
.geo-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.geo-stat{
  background:var(--lavande-pale);border-radius:12px;padding:10px 12px;
}
.geo-stat span{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--encre-doux);font-weight:700;margin-bottom:4px;
}
.geo-stat b{font-variant-numeric:tabular-nums;font-size:22px;color:var(--encre);line-height:1}

.geo-progress{margin-top:14px}
.geo-progress-bar{
  height:8px;background:rgba(61,53,88,.08);border-radius:999px;overflow:hidden;
}
.geo-progress-bar i{
  display:block;height:100%;width:0;background:linear-gradient(90deg,var(--corail),var(--lavande-fonce));
  border-radius:999px;transition:width .35s ease;
}
.geo-progress-meta{
  display:flex;justify-content:space-between;margin-top:7px;
  font-size:12px;color:var(--encre-doux);font-weight:600;
}

.geo-queue{
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--rayon);box-shadow:var(--ombre);
  padding:14px 16px 12px;max-height:180px;overflow:auto;
}
.geo-queue h2{
  font-family:var(--sans);font-size:10px;text-transform:uppercase;
  letter-spacing:.13em;color:var(--lavande-fonce);font-weight:700;margin-bottom:8px;
}
.geo-queue ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.geo-queue li{
  font-size:11.5px;padding:4px 9px;border-radius:999px;
  background:var(--lavande-pale);color:var(--encre-doux);font-weight:600;
}
.geo-queue li.current{background:var(--corail);color:var(--blanc)}
.geo-queue li.done{opacity:.45;text-decoration:line-through}

.geo-actions{display:flex;gap:10px;flex-wrap:wrap}
.geo-actions .btn{flex:1 1 auto;text-align:center;text-decoration:none}

.geo-attrib{
  margin-top:10px;font-size:11px;color:var(--encre-doux);opacity:.75;line-height:1.45;
}