/* ════════════════════════════════════════════════════════════════════════════════
   worldmap.css — world.html only: the interactive "carte du royaume" (hover-alive card
   in the split + a full-screen explorer with zone pins & descriptions). Self-contained
   so it never touches the shared site.css. Falls back gracefully if a theme var is absent.
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── the clickable map card (right column of the split) ── */
.worldmap-card{
  position:relative; display:block; width:100%; padding:0; margin:0; isolation:isolate;
  aspect-ratio:3/2; border-radius:var(--radius,16px); overflow:hidden;
  border:1px solid var(--line-strong,rgba(231,182,88,.22)); background:#0a0f1f; cursor:pointer;
  box-shadow:0 18px 50px rgba(0,0,0,.5); -webkit-tap-highlight-color:transparent;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .5s ease;
}
.worldmap-card:hover,.worldmap-card:focus-visible{
  transform:translateY(-4px); border-color:rgba(231,182,88,.55); outline:none;
  box-shadow:0 26px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(231,182,88,.25);
}
.worldmap-card>img{
  display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); filter:saturate(.96) brightness(.9);
  transition:transform 7s ease, filter .6s ease;
}
.worldmap-card:hover>img,.worldmap-card:focus-visible>img{
  transform:scale(1.12) translate(-1.5%,-1%); filter:saturate(1.08) brightness(1);   /* slow Ken-Burns drift = the map "breathes" */
}
.worldmap-card::after{   /* vignette so dots + hint read */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(120% 80% at 50% 28%, transparent 52%, rgba(4,7,14,.55) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.wm-sheen{   /* light sweep on hover */
  position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(105deg,transparent,rgba(255,247,224,.18),transparent); transform:skewX(-12deg);
}
.worldmap-card:hover .wm-sheen{ animation:wm-sweep 1.1s ease .05s 1; }
@keyframes wm-sweep{ 0%{left:-60%;opacity:0} 12%{opacity:1} 100%{left:130%;opacity:0} }
.wm-dot{
  position:absolute; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%);
  z-index:2; pointer-events:none; background:var(--gold-100,#f3d28a); opacity:.5; transition:opacity .4s ease;
}
.worldmap-card:hover .wm-dot{ opacity:1; animation:wm-pulse 1.9s ease-out infinite; }
.worldmap-card:hover .wm-dot:nth-child(3){animation-delay:.3s}
.worldmap-card:hover .wm-dot:nth-child(4){animation-delay:.6s}
.worldmap-card:hover .wm-dot:nth-child(5){animation-delay:.9s}
.worldmap-card:hover .wm-dot:nth-child(6){animation-delay:1.2s}
.worldmap-card:hover .wm-dot:nth-child(7){animation-delay:1.5s}
@keyframes wm-pulse{ 0%{box-shadow:0 0 0 0 rgba(231,182,88,.55)} 70%{box-shadow:0 0 0 10px rgba(231,182,88,0)} 100%{box-shadow:0 0 0 0 rgba(231,182,88,0)} }
.wm-hint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%) translateY(8px);
  display:inline-flex; align-items:center; gap:8px; z-index:4; pointer-events:none;
  padding:9px 16px; border-radius:999px; font-weight:700; font-size:.92rem; color:#1a1206;
  background:linear-gradient(180deg,#f3d28a,#d8ab4e); border:1px solid rgba(255,255,255,.35);
  box-shadow:0 8px 22px rgba(0,0,0,.45); opacity:0; transition:opacity .4s ease, transform .4s ease;
}
.wm-hint img{display:block}
.worldmap-card:hover .wm-hint,.worldmap-card:focus-visible .wm-hint{ opacity:1; transform:translateX(-50%) translateY(0); }
.mapcue{ margin-top:1.1rem; color:var(--gold-100,#f3d28a); font-weight:600; }

/* ── full-screen explorer ── */
.wmap-overlay{
  position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; padding:clamp(16px,4vw,40px);
  background:rgba(4,7,14,.92); backdrop-filter:blur(10px); animation:wm-fade .25s ease;
}
.wmap-overlay[hidden]{ display:none; }
@keyframes wm-fade{ from{opacity:0} to{opacity:1} }
.wmap-close{
  position:absolute; top:18px; right:20px; width:46px; height:46px; border-radius:12px; z-index:2;
  display:flex; align-items:center; justify-content:center; font-size:19px; cursor:pointer;
  color:var(--parch,#e9dcc3); background:rgba(20,26,42,.7); border:1px solid var(--line-2,rgba(231,182,88,.2)); transition:.2s;
}
.wmap-close:hover{ color:#fff; border-color:var(--blood,#c0455a); background:rgba(40,18,24,.7); }
.wmap-stage{ display:flex; align-items:center; justify-content:center; flex:1; min-height:0; width:100%; }
.wmap-canvas{
  position:relative; display:inline-block; line-height:0; border-radius:14px; overflow:hidden;
  border:1px solid var(--line-strong,rgba(231,182,88,.28)); box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:wm-pop .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes wm-pop{ from{transform:scale(.96);opacity:.4} to{transform:scale(1);opacity:1} }
.wmap-canvas>img{ display:block; max-width:min(1200px,92vw); max-height:70vh; width:auto; height:auto; }
.wmap-pin{
  position:absolute; transform:translate(-50%,-50%); width:22px; height:22px; padding:0; border-radius:50%;
  cursor:pointer; z-index:3; border:2px solid rgba(20,12,4,.55); box-shadow:0 2px 8px rgba(0,0,0,.5);
  background:radial-gradient(circle at 50% 40%, #fff6df, #e7b658 60%, #b9852f);
  transition:transform .18s ease, box-shadow .18s ease;
}
.wmap-pin::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(231,182,88,.5); animation:wm-pulse2 2s ease-out infinite;
}
@keyframes wm-pulse2{ 0%{transform:scale(.55);opacity:.9} 100%{transform:scale(1.7);opacity:0} }
.wmap-pin:hover,.wmap-pin:focus-visible,.wmap-pin.act{
  transform:translate(-50%,-50%) scale(1.35); outline:none;
  box-shadow:0 0 0 4px rgba(231,182,88,.3), 0 4px 12px rgba(0,0,0,.6);
}
.wmap-info{
  display:flex; align-items:center; gap:16px; width:min(760px,94vw); padding:15px 20px; border-radius:14px;
  background:rgba(14,19,32,.85); border:1px solid var(--line,rgba(231,182,88,.16)); box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.wmap-info-ic{ flex:0 0 auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.wmap-info h4{ margin:0; font-size:1.15rem; color:var(--gold-100,#f3d28a); font-family:var(--font-title,inherit); }
.wmap-info p{ margin:.25rem 0 0; color:var(--parch,#cdbf9f); font-size:.98rem; line-height:1.45; }

@media (max-width:720px){
  .wmap-canvas>img{ max-height:54vh; }
  .wmap-pin{ width:26px; height:26px; }
}
@media (prefers-reduced-motion:reduce){
  .worldmap-card>img{ transition:none }
  .wm-sheen,.wm-dot,.wmap-pin::after{ animation:none }
}