/* ════════════════════════════════════════════════════════════════════
 * Travel Map · game/travel/travel-map.css
 * The cartoon "Global Travel" reference look — illustrated ocean
 * background, soft clouds, green land, a white dotted curved path, and
 * big white destination cards with thick green borders alternating
 * left / right down a vertical scroll.
 *
 * Class prefixes: .tm-*  (map chrome / scene)   .dc-* (destination card)
 * Chosen to never collide with the host pages' existing .lvl-* / .topbar
 * / .breadcrumb / .bottom-nav rules.
 *
 * Palette is driven by CSS custom properties the engine writes from the
 * active theme (see region-theme.js):
 *   --tm-ocean --tm-ocean-deep --tm-sky --tm-land --tm-land-dark
 *   --tm-accent --tm-accent-dark --tm-path --tm-path-shadow --tm-card-green
 * ════════════════════════════════════════════════════════════════════*/

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Nunito:wght@400;600;700;800;900&display=swap');

.tm-root{
  --tm-ocean:#2f9adf; --tm-ocean-deep:#1d6fc0; --tm-sky:#7fc8f4;
  --tm-land:#79c143; --tm-land-dark:#5a9e33;
  --tm-accent:#ff8c00; --tm-accent-dark:#cf7e10;
  --tm-path:#ffffff; --tm-path-shadow:rgba(20,74,140,0.42);
  --tm-card-green:#52d369;
  --tm-frame:#ffb73b; --tm-frame-d:#cf7e10;
  --tm-title-blue:#3b3b9a; --tm-title-blue-d:#1f1f6b;
  --tm-pad-top:18px; --tm-pad-bottom:30px;
  --tm-col:460px;

  position:relative;
  width:100%;
  min-height:100%;
  font-family:'Nunito',sans-serif; font-weight:700;
  color:#0b1a2c;
  background:linear-gradient(180deg,
     color-mix(in srgb, var(--tm-ocean) 78%, #fff) 0%,
     var(--tm-ocean) 44%, var(--tm-ocean-deep) 100%);
  overflow:hidden;          /* clip drifting clouds / land */
  isolation:isolate;
}
/* Fallback for browsers without color-mix */
@supports not (background:color-mix(in srgb, red 50%, blue)){
  .tm-root{ background:linear-gradient(180deg,#6fc0ec 0%, var(--tm-ocean) 44%, var(--tm-ocean-deep) 100%); }
}

/* Standalone mode (town.html): the root IS the full-screen scroller. */
.tm-root.tm-standalone{
  position:fixed; inset:0; width:auto; height:auto;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

/* ── Background layers ──────────────────────────────────────────────*/
.tm-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.tm-bg svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.tm-land-svg{ opacity:0.96; }
.tm-clouds-svg{ animation:tm-drift 90s linear infinite; }
@keyframes tm-drift{
  from{ transform:translateY(0); }
  to  { transform:translateY(-40px); }
}
@media (prefers-reduced-motion: reduce){ .tm-clouds-svg{ animation:none; } }

/* ── Scene = the centered phone-width column holding path + cards ───*/
.tm-scene{
  position:relative; z-index:1;
  max-width:var(--tm-col);
  margin:0 auto;
  padding:var(--tm-pad-top) 14px var(--tm-pad-bottom);
  min-height:100%;
}

/* ── Curved dotted path (SVG overlay over the scene) ────────────────*/
.tm-path{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; overflow:visible;
}
.tm-path .tm-path-shadow{ fill:none; stroke:var(--tm-path-shadow); stroke-width:15; stroke-linecap:round; stroke-linejoin:round; }
.tm-path .tm-path-dots{ fill:none; stroke:var(--tm-path); stroke-width:8; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2 20; }

/* ── Track holds the cards (alternating L/R) ───────────────────────
   Generous vertical gap so the dotted travel path is clearly visible
   swooping between cards (the reference look), not hidden behind them. */
.tm-track{ position:relative; z-index:2; display:flex; flex-direction:column; gap:56px; }

/* ── Destination card ──────────────────────────────────────────────*/
.dc{
  position:relative; z-index:2;
  width:min(60%, 250px);
  padding:6px 6px 8px;
  background:linear-gradient(180deg,#fffdf6 0%, #fff3d8 100%);
  border:5px solid var(--tm-card-green);
  border-radius:22px;
  box-shadow:0 7px 0 rgba(8,40,80,0.22), 0 14px 24px rgba(8,40,80,0.28);
  text-decoration:none; color:inherit; cursor:pointer; display:block;
  transition:transform .16s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color:transparent;
}
a.dc:hover{ transform:translateY(-3px); box-shadow:0 10px 0 rgba(8,40,80,0.22), 0 18px 28px rgba(8,40,80,0.3); }
.dc.left { margin-left:5%;  margin-right:auto; }
.dc.right{ margin-right:5%; margin-left:auto; }

.dc-pin{ position:absolute; top:-12px; right:18px; width:22px; height:28px; z-index:4; }
.dc-pin svg{ width:100%; height:100%; filter:drop-shadow(0 3px 3px rgba(0,0,0,0.35)); }

/* image area */
.dc-art{
  position:relative; width:100%; aspect-ratio:1.5 / 1;
  border-radius:15px; overflow:hidden;
  background:linear-gradient(160deg,#bfe6ff,#8fd0f5);
  box-shadow:inset 0 -8px 12px rgba(0,0,0,0.16), inset 0 3px 6px rgba(255,255,255,0.25);
  display:grid; place-items:center;
}
.dc-art .dc-scene{ position:absolute; inset:0; width:100%; height:100%; }
.dc-emoji{
  position:relative; z-index:2; font-size:2.5rem; line-height:1;
  width:58px; height:58px; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 58%, rgba(255,255,255,0) 72%);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,0.35));
}

/* lock overlay (locked cards) */
.dc-lock{ position:absolute; inset:0; z-index:3; display:none; place-items:center;
  background:rgba(18,38,64,0.42); }
.dc-lock svg{ width:46px; height:46px; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.55)); }

/* body */
.dc-body{ padding:7px 6px 4px; text-align:center; }
.dc-name{
  font-family:'Bangers',cursive; letter-spacing:0.04em;
  font-size:1.12rem; line-height:1.05; color:var(--tm-accent);
  text-shadow:0 1px 0 rgba(122,58,0,0.18);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dc-sub{ font-size:0.62rem; color:#7a6a4a; font-weight:700; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-status{
  display:inline-block; margin-top:6px;
  font-size:0.72rem; font-weight:900; letter-spacing:0.03em;
  padding:3px 12px; border-radius:999px;
  color:#fff; background:linear-gradient(180deg,#5b6b8c,#3d4b69);
  box-shadow:0 2px 0 rgba(0,0,0,0.18);
}

/* ── States ───────────────────────────────────────────────────────*/
.dc.is-locked{ cursor:not-allowed; }
.dc.is-locked .dc-art{ filter:grayscale(0.7) brightness(0.82); }
.dc.is-locked .dc-emoji{ opacity:0.5; }
.dc.is-locked .dc-lock{ display:grid; }
.dc.is-locked .dc-name{ color:#8a6a3a; }

.dc.is-completed{ border-color:#34C759; }
.dc.is-completed .dc-status{ background:linear-gradient(180deg,#34C759,#15803d); }
.dc.is-completed .dc-name{ color:#1f8a45; }
.dc-badge{ position:absolute; top:-10px; left:14px; z-index:4;
  font-size:0.6rem; font-weight:900; letter-spacing:0.05em; color:#053a17;
  background:linear-gradient(180deg,#7ee0a0,#34C759);
  padding:3px 9px; border-radius:999px; border:2px solid #fff;
  box-shadow:0 3px 6px rgba(0,0,0,0.25); display:none; }
.dc.is-completed .dc-badge{ display:block; }

.dc.is-current{
  box-shadow:0 7px 0 rgba(8,40,80,0.22), 0 0 0 4px rgba(255,212,74,0.85), 0 14px 28px rgba(255,160,20,0.5);
  animation:tm-bob 2.2s ease-in-out infinite;
}
.dc.is-current .dc-status{ background:linear-gradient(180deg,var(--tm-accent),var(--tm-accent-dark)); }
@keyframes tm-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@media (prefers-reduced-motion: reduce){ .dc.is-current{ animation:none; } }
.dc-play-flag{ position:absolute; top:-30px; left:50%; transform:translateX(-50%); z-index:5;
  display:none; font-family:'Bangers',cursive; letter-spacing:0.06em; font-size:0.72rem; color:#fff;
  background:linear-gradient(180deg,var(--tm-accent),var(--tm-accent-dark));
  padding:3px 12px; border-radius:999px; border:2px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,0.3);
  white-space:nowrap; }
.dc.is-current .dc-play-flag{ display:block; }

/* coming-soon / non-interactive but unlocked */
.dc.is-soon{ cursor:default; }
.dc.is-soon .dc-status{ background:linear-gradient(180deg,#caa15a,#9a7634); }

/* ── Phase divider (town's 16 phases) ──────────────────────────────*/
.tm-phase{
  position:relative; z-index:3; align-self:center;
  margin:6px 0 0; padding:7px 20px;
  background:linear-gradient(180deg,var(--tm-title-blue),var(--tm-title-blue-d));
  color:#fff; border:3px solid var(--tm-frame); border-radius:14px;
  font-family:'Bangers',cursive; letter-spacing:0.06em; font-size:0.92rem;
  text-shadow:0 2px 0 rgba(0,0,0,0.4); box-shadow:0 5px 0 rgba(0,0,0,0.22);
  text-align:center; max-width:88%;
}

/* ════════════════════════════════════════════════════════════════
 * Optional chrome (rendered by the engine when renderChrome:true —
 * used by town.html, which has no chrome of its own). Mirrors the
 * look of levels.html's existing topbar / breadcrumb / bottom-nav so
 * the two screens match.
 * ════════════════════════════════════════════════════════════════*/
.tm-header{
  position:fixed; top:0; left:0; right:0; z-index:60; height:74px;
  padding:10px 14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#1d6dc0 0%,#2f9adf 70%, rgba(47,154,223,0) 100%);
  pointer-events:none;
}
.tm-header .tm-back, .tm-header .tm-gear{
  pointer-events:auto; position:absolute; top:9px;
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(180deg,#fff8d6,#f3d57a); border:3px solid var(--tm-frame-d);
  display:grid; place-items:center; font-size:1.4rem; color:#7a3a00; cursor:pointer;
  text-decoration:none; box-shadow:0 6px 0 rgba(0,0,0,0.25); font-family:'Nunito',sans-serif;
}
.tm-header .tm-back{ left:14px; } .tm-header .tm-gear{ right:14px; }
.tm-header .tm-title{
  pointer-events:auto; padding:9px 28px;
  background:linear-gradient(180deg,var(--tm-title-blue),var(--tm-title-blue-d)); color:#fff;
  border:3px solid var(--tm-frame); border-radius:14px;
  font-family:'Bangers',cursive; font-size:1.5rem; letter-spacing:0.1em;
  text-shadow:0 3px 0 rgba(0,0,0,0.4); box-shadow:0 6px 0 rgba(0,0,0,0.25);
}
.tm-breadcrumb{
  position:fixed; top:76px; left:50%; transform:translateX(-50%); z-index:55;
  display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap; max-width:94vw;
  padding:5px 14px; background:linear-gradient(180deg,#fff8d6,#f6d97b);
  border:3px solid var(--tm-frame-d); border-radius:18px;
  box-shadow:0 4px 0 rgba(0,0,0,0.22);
  color:#7a3a00; font-family:'Bangers',cursive; letter-spacing:0.04em; font-size:0.78rem;
}
.tm-breadcrumb .tm-sep{ color:rgba(122,58,0,0.45); font-size:0.78rem; }
.tm-breadcrumb .tm-crumb.active{
  background:linear-gradient(135deg,#3b3b9a,#5959c8); color:#fff;
  padding:2px 9px; border-radius:999px; border:2px solid rgba(255,255,255,0.3); font-size:0.74rem;
}
.tm-bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns:repeat(5,1fr);
  height:96px; padding:6px 4px max(8px, env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#1d6dc0,#185fb0);
  border-top:3px solid var(--tm-frame); box-shadow:0 -6px 0 rgba(0,0,0,0.25);
}
.tm-bottomnav .tm-nav-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-decoration:none; color:#fff; font-size:0.7rem; font-weight:800; letter-spacing:0.04em;
}
.tm-bottomnav .tm-nav-icon{
  width:54px; height:54px; display:grid; place-items:center; font-size:1.55rem;
  background:linear-gradient(180deg,#fff8d6,#f3d57a); border:3px solid var(--tm-frame-d);
  border-radius:14px; box-shadow:0 3px 0 rgba(0,0,0,0.25);
}
.tm-bottomnav .tm-nav-item.active .tm-nav-icon{
  background:linear-gradient(180deg,#fff,#fff7e0); border-color:var(--tm-frame);
  box-shadow:0 0 0 3px rgba(255,255,255,0.5), 0 3px 0 rgba(0,0,0,0.25);
}
.tm-bottomnav .tm-nav-label{ text-shadow:0 2px 0 rgba(0,0,0,0.4); }

/* When chrome is on, the scene must clear the fixed header + breadcrumb
   (which can wrap to 2-3 lines) up top and the nav + progress pill below. */
.tm-root.tm-standalone .tm-scene{ --tm-pad-top:150px; --tm-pad-bottom:144px; }

/* ── Small screens ─────────────────────────────────────────────────*/
@media (max-width:480px){
  .tm-root{ --tm-col:100%; }
  .dc{ width:min(70%, 260px); }
  .dc-name{ font-size:1.02rem; }
  .dc-emoji{ font-size:2rem; }
  .tm-header .tm-title{ font-size:1.25rem; padding:7px 18px; }
  .tm-bottomnav .tm-nav-icon{ width:46px; height:46px; font-size:1.3rem; }
}