/* =====================================================================
   worldmap.css — CHINA · THE OPEN-JAW CAMPAIGN overworld
   Fork of the SlowCoast/honeymoon Mode-7 world map. Dark lunarpunk / JRPG.
   Self-contained (no CDN, no external fonts). All colors carry fallbacks so
   the module renders standalone even without the host app's :root palette.
   HARD: travel-adventure, never honeymoon — no couple/wedding chrome here.
   ===================================================================== */

.wm-root{
  /* lunarpunk / JRPG palette — scoped so the module is drop-in anywhere */
  --wm-abyss:#071a24; --wm-deep:#0b2836; --wm-panel:#0e3040; --wm-panel2:#123b4e;
  --wm-line:#1d4a5e; --wm-line2:#2a5f76;
  --wm-cyan:#3fd8d2; --wm-teal:#1f9fb4; --wm-gold:#e8b45a; --wm-coral:#e0785a;
  --wm-mint:#8fe6c4; --wm-parch:#dfeef0; --wm-dim:#84acb6; --wm-dim2:#5d8593;
  --wm-leg:#f2c14e; --wm-epic:#c98cf5; --wm-rare:#5fc2ea; --wm-unc:#8fe0b0;
  --wm-route:#e7a23a; --wm-ink:#0b1420;

  color:var(--wm-parch);
  font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  -webkit-tap-highlight-color:transparent;
  width:100%;
  box-sizing:border-box;
}
.wm-root *,.wm-root *::before,.wm-root *::after{box-sizing:border-box;}

/* ---------- section header ---------- */
.wm-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 12px;}
.wm-kick{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--wm-cyan);}
.wm-title{font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:800;font-size:clamp(1.35rem,5vw,2rem);letter-spacing:.02em;color:#fff;margin:0;line-height:1.1;}
.wm-title .wm-no{color:var(--wm-gold);font-variant-numeric:tabular-nums;margin-right:.4em;}
.wm-sub{width:100%;color:var(--wm-dim);font-size:.8rem;letter-spacing:.02em;}

/* ---------- HUD / walk controls ---------- */
.wm-hud{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;}
.wm-here{flex:1 1 200px;min-width:0;background:var(--wm-abyss);border:1px solid var(--wm-line);
  border-radius:11px;padding:8px 13px;display:flex;flex-direction:column;gap:1px;}
.wm-here .zn{font-weight:800;font-size:.92rem;color:#fff;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wm-here .sub{font-size:.68rem;color:var(--wm-dim);letter-spacing:.02em;}
.wm-here .sub b{color:var(--wm-gold);font-variant-numeric:tabular-nums;}
.wm-btn{cursor:pointer;background:var(--wm-deep);border:1px solid var(--wm-line2);color:var(--wm-parch);
  font:inherit;font-size:.82rem;font-weight:700;min-width:44px;min-height:44px;padding:8px 12px;
  border-radius:10px;letter-spacing:.03em;transition:border-color .14s,background .14s,color .14s;}
.wm-btn:hover:not(:disabled){border-color:var(--wm-cyan);}
.wm-btn:disabled{opacity:.34;cursor:not-allowed;}
.wm-btn.ghost{color:var(--wm-dim);}
.wm-btn.ghost[aria-pressed="true"]{color:#062a2a;
  background:linear-gradient(180deg,var(--wm-cyan),var(--wm-teal));border-color:var(--wm-cyan);}

/* ---------- the Mode-7 frame ----------
   perspective lives on the FRAME (parent); rotateX lives on the CANVAS (child)
   so the 3-D tilt never fights a 2-D transform written onto the SVG itself
   (the anvaka/panzoom gotcha from META_LEARNINGS §1). */
.wm-frame{position:relative;margin:0 auto;width:100%;max-width:920px;aspect-ratio:1152/640;
  border-radius:16px;overflow:hidden;background:var(--wm-abyss);
  box-shadow:0 0 0 1px rgba(63,216,210,.16),0 26px 64px -26px #000;
  perspective:1200px;perspective-origin:50% 30%;}
.wm-canvas{width:100%;height:100%;transform-origin:50% 64%;}
.wm-canvas svg{display:block;width:100%;height:100%;background:transparent;}
.wm-frame.tilt .wm-canvas{transform:rotateX(34deg) scale(1.04);}
@media(prefers-reduced-motion:no-preference){
  .wm-canvas{transition:transform .4s ease;}
}

/* painted overworld base — Ghibli aerial map; graceful if the PNG is absent */
.wm-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  pointer-events:none;user-select:none;}

/* ---------- SVG overlay atoms (mirror slowcoast wm-*) ---------- */
.wm-grid line{stroke:#0e5b60;stroke-opacity:.2;stroke-width:1;}
.wm-r-ghost{fill:none;stroke:#fff;stroke-opacity:.5;stroke-width:2;stroke-dasharray:2 9;}
.wm-r-ahead{fill:none;stroke:#8aa0a8;stroke-opacity:.45;stroke-width:4;stroke-dasharray:11 8;}
.wm-r-trav{fill:none;stroke:var(--wm-route);stroke-width:4;stroke-dasharray:11 8;filter:url(#wmglow);}
@media(prefers-reduced-motion:no-preference){
  .wm-r-trav{animation:wm-march 1.1s linear infinite;}
}
@keyframes wm-march{to{stroke-dashoffset:-19;}}

.wm-zn{font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:800;font-size:23px;
  fill:#fff;paint-order:stroke;stroke:var(--wm-ink);stroke-width:4.5px;}
.wm-zs{font-family:ui-monospace,monospace;font-weight:700;font-size:12px;fill:#8ff0e6;
  paint-order:stroke;stroke:var(--wm-ink);stroke-width:3px;}
.wm-zlv{font-family:ui-monospace,monospace;font-weight:800;font-size:13px;fill:var(--wm-leg);
  paint-order:stroke;stroke:var(--wm-ink);stroke-width:3px;}
.wm-zd{font-family:ui-monospace,monospace;font-weight:700;font-size:12px;fill:#F7C877;
  paint-order:stroke;stroke:var(--wm-ink);stroke-width:3px;}
.wm-zc{font-family:ui-monospace,monospace;font-weight:800;font-size:12px;
  paint-order:stroke;stroke:var(--wm-ink);stroke-width:3px;}

.wm-skull{font-size:19px;fill:#FBF3DF;paint-order:stroke;stroke:#22303a;stroke-width:2.5px;}
.wm-skull.lit{fill:var(--wm-leg);}
.wm-skull.marquee{font-size:22px;fill:var(--wm-coral);}
.wm-skull.final{font-size:27px;fill:var(--wm-leg);}
@media(prefers-reduced-motion:no-preference){
  .wm-skull.final{animation:wm-bosspulse 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
}
@keyframes wm-bosspulse{0%,100%{opacity:.85;}50%{opacity:1;filter:drop-shadow(0 0 4px var(--wm-leg));}}
.wm-crown{font-size:14px;fill:var(--wm-gold);paint-order:stroke;stroke:#22303a;stroke-width:2px;}

.wm-endcap{font-family:ui-monospace,monospace;font-weight:700;font-size:11px;fill:#cfe6ea;
  paint-order:stroke;stroke:var(--wm-ink);stroke-width:3px;}
.wm-herenote{font-family:ui-monospace,monospace;font-weight:800;font-size:12px;fill:#FBF3DF;
  paint-order:stroke;stroke:var(--wm-ink);stroke-width:3px;}

.wm-node .wm-hit{cursor:pointer;}
.wm-node.sel .wm-core{stroke:var(--wm-cyan);stroke-width:2.4px;}
.wm-node.sel .wm-ring{stroke:var(--wm-cyan)!important;stroke-opacity:1!important;}

/* ---------- legend ---------- */
.wm-legend{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin:14px auto 0;
  max-width:760px;font-size:.7rem;color:var(--wm-dim);}
.wm-legend .li{display:inline-flex;align-items:center;gap:6px;}
.wm-legend .li b{color:var(--wm-parch);font-variant-numeric:tabular-nums;}
.wm-legend .sw{width:22px;height:0;border-top:3px dashed currentColor;display:inline-block;flex:none;}
.wm-legend .dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none;}
.wm-legend .summary{color:var(--wm-gold);font-weight:700;}

/* ---------- zone detail panel (deck filter target) ---------- */
.wm-detail{margin:16px auto 0;max-width:920px;background:linear-gradient(180deg,var(--wm-panel),var(--wm-deep));
  border:1px solid var(--wm-line2);border-radius:14px;padding:16px 16px 18px;
  box-shadow:0 18px 44px -28px #000;}
.wm-detail[hidden]{display:none;}
.wm-d-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;}
.wm-d-no{font-weight:800;font-size:1.6rem;color:var(--wm-gold);font-variant-numeric:tabular-nums;line-height:1;}
.wm-d-name{font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:800;
  font-size:1.35rem;color:#fff;letter-spacing:.01em;line-height:1.05;margin:0;}
.wm-d-sub{color:var(--wm-cyan);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;width:100%;}
.wm-d-meta{display:flex;flex-wrap:wrap;gap:6px 8px;margin:12px 0 4px;}
.wm-chip{display:inline-flex;align-items:center;gap:5px;background:var(--wm-abyss);
  border:1px solid var(--wm-line);border-radius:999px;padding:4px 11px;font-size:.7rem;
  font-weight:700;letter-spacing:.03em;color:var(--wm-parch);}
.wm-chip.lv{color:#062a2a;background:linear-gradient(180deg,var(--wm-leg),#cf9a3f);border-color:var(--wm-leg);}
.wm-chip.dates{color:var(--wm-gold);}
.wm-chip.tag{color:var(--wm-coral);border-color:var(--wm-coral);}
.wm-d-blurb{color:var(--wm-parch);font-size:.86rem;line-height:1.5;margin:10px 0 0;}

.wm-bosses{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;}
.wm-boss{display:flex;gap:10px;align-items:flex-start;background:var(--wm-abyss);
  border:1px solid var(--wm-line);border-left:3px solid var(--wm-coral);border-radius:10px;padding:9px 12px;}
.wm-boss.final{border-left-color:var(--wm-leg);background:linear-gradient(90deg,rgba(242,193,78,.10),var(--wm-abyss) 60%);}
.wm-boss .sk{font-size:1.15rem;line-height:1.2;flex:none;}
.wm-boss .bd{min-width:0;}
.wm-boss .bn{font-weight:800;color:#fff;font-size:.86rem;}
.wm-boss .bk{color:var(--wm-dim);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;margin-top:1px;}
.wm-boss .bp{color:var(--wm-mint);font-size:.72rem;margin-top:4px;line-height:1.45;}
.wm-boss .bbadge{display:inline-block;margin-left:6px;font-size:.6rem;font-weight:800;letter-spacing:.1em;
  padding:1px 6px;border-radius:5px;background:var(--wm-leg);color:#33260a;vertical-align:middle;}

.wm-hazards{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;}
.wm-haz{background:rgba(224,120,90,.09);border:1px solid rgba(224,120,90,.35);border-radius:9px;
  padding:8px 11px;font-size:.75rem;color:#f4c9b8;line-height:1.45;}
.wm-haz b{color:var(--wm-coral);letter-spacing:.03em;}

/* filtered deck strip */
.wm-deckhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:16px 0 8px;}
.wm-deckhead .lbl{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wm-cyan);}
.wm-deckhead .cnt{font-size:.74rem;color:var(--wm-dim);font-variant-numeric:tabular-nums;}
.wm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;}
.wm-card{position:relative;background:var(--wm-abyss);border:1px solid var(--wm-line);border-radius:11px;
  overflow:hidden;display:flex;flex-direction:column;text-align:left;}
.wm-card{--rc:var(--wm-unc);border-top:3px solid var(--rc);}
.wm-card.leg{--rc:var(--wm-leg);} .wm-card.epic{--rc:var(--wm-epic);}
.wm-card.rare{--rc:var(--wm-rare);} .wm-card.unc{--rc:var(--wm-unc);}
.wm-card .art{position:relative;width:100%;aspect-ratio:4/3;background:
  linear-gradient(135deg,var(--wm-deep),var(--wm-panel2));overflow:hidden;}
.wm-card .art img{width:100%;height:100%;object-fit:cover;display:block;}
.wm-card .art .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--wm-dim2);font-size:1.5rem;}
.wm-card .rr{position:absolute;top:6px;left:6px;font-size:.55rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 6px;border-radius:5px;background:var(--rc);color:#0b1420;}
.wm-card .body{padding:8px 10px 10px;display:flex;flex-direction:column;gap:3px;flex:1;}
.wm-card .tt{font-weight:800;font-size:.78rem;color:#fff;line-height:1.2;}
.wm-card .fl{font-size:.68rem;color:var(--wm-dim);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.wm-card .foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:4px 8px;padding-top:4px;
  font-size:.62rem;color:var(--wm-dim2);}
.wm-card .foot .veg{color:var(--wm-mint);}
.wm-card.looted::after{content:"✓";position:absolute;top:6px;right:6px;width:20px;height:20px;
  border-radius:50%;background:var(--wm-mint);color:#062a2a;font-weight:800;font-size:.7rem;
  display:flex;align-items:center;justify-content:center;}
.wm-empty{color:var(--wm-dim2);font-size:.8rem;padding:16px;text-align:center;}

/* wider viewport → detail panel sits beside the map */
@media(min-width:860px){
  .wm-root.wm-split .wm-stage{display:grid;grid-template-columns:1fr minmax(300px,380px);gap:18px;align-items:start;}
  .wm-root.wm-split .wm-detail{margin-top:0;max-width:none;}
}