:root{
  --paper: #efe8da;
  --paper-hi: #f5efe3;
  --ink: #2b2620;
  --ink-soft: #4a4237;
  --ink-faint: #8b8272;
  --line: #cfc6b3;
  --accent: #2a231d;
  --accent-rgb: 182, 137, 63;      /* per-station accent, set by JS */
  --curtain-ink: 43, 38, 32;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(120% 90% at 50% 22%, var(--paper-hi) 0%, var(--paper) 46%, #e7dfcf 100%);
  color: var(--ink);
  font-family: "Space Mono", monospace;
  overflow:hidden;
  -webkit-font-smoothing: antialiased;
}

/* subtle paper grain */
.paper-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.55; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}
/* per-station accent atmosphere (一站一色) */
.hue{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(115% 95% at 50% 30%, transparent 48%, rgba(var(--accent-rgb), .16) 100%);
  transition: background .9s ease;
}
.vignette{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(130% 120% at 50% 40%, transparent 55%, rgba(60,46,30,.12) 100%);
}

/* ---------------- NAV ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding: 26px 40px;
}
.nav-left{ display:flex; align-items:baseline; gap:38px; }
.brand{
  font-family:"Playfair Display", serif;
  font-weight:700; font-size:17px; letter-spacing:.5px;
  color:var(--ink); text-decoration:none;
}
.nav-links{ display:flex; gap:30px; }
.nav-links a{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; opacity:.75;
  transition:opacity .25s;
}
.nav-links a.active, .nav-links a:hover{ opacity:1; }
.nav-links a.active{ text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }

.nav-right{ display:flex; align-items:center; gap:22px; }

.btn-config{
  font-family:"Playfair Display", serif;
  font-style:italic; font-size:15px;
  color:var(--paper-hi); background:var(--accent);
  border:none; border-radius:7px;
  padding:8px 18px; cursor:pointer;
  letter-spacing:.3px;
  box-shadow: 0 6px 18px rgba(40,30,20,.18);
  transition: transform .2s, box-shadow .2s;
}
.btn-config:hover{ transform:translateY(-1px); box-shadow:0 9px 22px rgba(40,30,20,.24); }

/* sound toggle (moved into nav) */
.sound-toggle{
  display:flex; align-items:center; gap:7px;
  background:transparent; border:none; cursor:pointer;
  font-family:"Space Mono", monospace; font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--ink-faint);
}
.sound-toggle__wave{
  width:14px; height:12px; position:relative; display:inline-block;
  background:
    linear-gradient(var(--ink-soft),var(--ink-soft)) 0 50%/2px 5px no-repeat,
    linear-gradient(var(--ink-soft),var(--ink-soft)) 4px 50%/2px 11px no-repeat,
    linear-gradient(var(--ink-soft),var(--ink-soft)) 8px 50%/2px 7px no-repeat,
    linear-gradient(var(--ink-soft),var(--ink-soft)) 12px 50%/2px 4px no-repeat;
}
.sound-toggle:not(.is-off) .sound-toggle__wave{ animation: eq .9s ease-in-out infinite alternate; }
@keyframes eq{ from{ transform:scaleY(.7) } to{ transform:scaleY(1.1) } }
.sound-toggle.is-off{ opacity:.5; }
.sound-toggle.is-off .sound-toggle__wave{ filter:grayscale(1); opacity:.5; animation:none; }

/* ---------------- STAGE ---------------- */
.stage{
  position:relative; z-index:10;
  height:100vh; width:100%;
  touch-action:none;
  cursor:grab;
}
.stage.grabbing{ cursor:grabbing; }
.stage.grabbing .roof-wrap{ transition:none; }

/* center composition */
.composition{
  position:absolute; top:0; left:50%;
  transform:translateX(-50%);
  height:100%;
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
}
.roof-wrap{
  margin-top: clamp(84px, 14vh, 140px);
  position:relative; z-index:3;
  transition: opacity .9s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.4,0,.2,1);
}
.roof{
  display:block;
  width: var(--roof-w, 360px);
  height:auto;
  filter: drop-shadow(20px 24px 22px rgba(70,52,30,.20));
  user-select:none;
}
.curtain{
  position:absolute;
  left:50%; transform:translateX(-50%);
  top: var(--curtain-top, 220px);
  z-index:2;
  pointer-events:auto;
  touch-action:none;
}
.cast-shadow{
  position:absolute; z-index:1;
  top: var(--curtain-top, 220px);
  left:50%;
  width: var(--curtain-w, 300px);
  height: var(--curtain-h, 360px);
  transform: translateX(-30%) skewX(-14deg) scaleX(1.15);
  background: radial-gradient(60% 70% at 40% 30%, rgba(60,46,26,.18), rgba(60,46,26,0) 72%);
  filter: blur(10px);
  opacity:.8;
}

/* ---------------- LEDE (lower-left) ---------------- */
.lede{
  position:absolute; left: clamp(40px, 6vw, 96px); bottom: clamp(120px, 17vh, 168px);
  max-width: 340px; z-index:12;
}
.kicker{
  font-size:11px; letter-spacing:1px; color:var(--ink-faint);
  margin:0 0 16px; line-height:1.5;
}
.kicker .en{ color:var(--ink-soft); }
.headline{
  font-family:"Noto Serif", Georgia, serif;
  font-weight:600; font-size: clamp(26px, 2.8vw, 38px);
  line-height:1.3; letter-spacing:-.2px; margin:0;
  color:var(--ink);
  text-align:left;
}
.headline .dash{ font-weight:400; }
/* Headlines are English (Latin serif, LTR) for every station; the falling
   text-curtain keeps each country's native script. No per-station RTL /
   per-script headline switching. */
.discover{
  display:inline-block; margin-top:24px;
  font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color: rgba(var(--accent-rgb), .9);
}

/* ---------------- NOTE (lower-right) ---------------- */
.note{
  position:absolute; right: clamp(40px, 6vw, 90px); bottom: clamp(128px, 18vh, 180px);
  max-width: 226px; text-align:left;
  font-size:11px; line-height:1.7; color:var(--ink-soft);
  z-index:12;
}

/* ---------------- DRAG HINT ---------------- */
.drag-hint{
  position:absolute; left:50%; bottom: 96px; transform:translateX(-50%);
  z-index:11; pointer-events:none;
  display:flex; align-items:center; gap:10px;
  font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
  color:var(--ink-faint);
  opacity:0; animation:hintIn .8s ease 1.2s forwards;
}
.drag-hint__arrow{ display:inline-block; animation:hintArrow 1.8s ease-in-out infinite; }
@keyframes hintIn{ from{opacity:0} to{opacity:.8} }
@keyframes hintArrow{ 0%,100%{ transform:translateX(0); opacity:.5 } 50%{ transform:translateX(7px); opacity:1 } }
.drag-hint.gone{ opacity:0 !important; transition:opacity .5s ease; animation:none; }

/* ================= SILK-ROAD ROUTE RIBBON (footer nav) ============= */
.route{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:16;
  display:flex; align-items:center; gap:18px;
  padding:8px 14px;
}
.route-nav{
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:rgba(245,239,227,.5);
  color:var(--ink-soft); cursor:pointer;
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition: border-color .25s, color .25s, transform .2s;
}
.route-nav:hover{ border-color:rgba(var(--accent-rgb),1); color:var(--ink); transform:translateY(-1px); }
.route-track{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  width: clamp(280px, 40vw, 460px);
  height:34px;
}
/* dotted road baseline */
.route-track::before{
  content:""; position:absolute; left:6px; right:6px; top:50%;
  height:0; border-top:2px dotted var(--line); transform:translateY(-50%);
}
/* traveled portion */
.route-track::after{
  content:""; position:absolute; left:6px; top:50%; height:0;
  width: var(--route-progress, 0%);
  border-top:2px solid rgba(var(--accent-rgb),.9); transform:translateY(-50%);
  transition: width .9s cubic-bezier(.22,.61,.36,1);
}
.route-node{
  position:relative; z-index:2;
  width:12px; height:12px; padding:0; border-radius:50%;
  border:1.5px solid var(--ink-faint); background:var(--paper-hi);
  cursor:pointer; transition: transform .25s, border-color .25s, background .25s;
}
.route-node:hover{ transform:scale(1.25); border-color:var(--ink-soft); }
.route-node.active{
  border-color:rgba(var(--accent-rgb),1);
  background:rgba(var(--accent-rgb),1);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.22);
}
.route-node.done{ border-color:rgba(var(--accent-rgb),.9); }
.route-node__label{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-size:8.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap; opacity:0; transition:opacity .25s;
  pointer-events:none;
}
.route-node.active .route-node__label,
.route-node:hover .route-node__label{ opacity:1; color:var(--ink-soft); }

/* ================= MAP FLYTHROUGH OVERLAY ============= */
.map-layer{
  position:fixed; inset:0; z-index:30; pointer-events:none;
  opacity:0; visibility:hidden;
  transition: opacity .55s cubic-bezier(.4,0,.2,1), visibility .55s cubic-bezier(.4,0,.2,1);
  background:
    radial-gradient(120% 100% at 50% 40%, #efe4cc 0%, #e4d5b3 55%, #d8c49a 100%);
}
.map-layer.show{ opacity:1; visibility:visible; }
.map-layer svg{ position:absolute; inset:0; width:100%; height:100%; }
.map-layer .map-grain{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23m)' opacity='0.35'/></svg>");
}
.map-title{
  position:absolute; top:9%; left:0; right:0; text-align:center;
  font-family:"Playfair Display", serif; font-style:italic;
  font-size: clamp(16px, 2vw, 24px); color:#3f3016; letter-spacing:1px; opacity:.95;
}

/* ---------------- transition helpers ---------------- */
.fade-out{ opacity:0 !important; }
.slide-left{ transform:translateX(-40px) !important; }
.slide-right{ transform:translateX(40px) !important; }
.lede, .note{ transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }

/* focus visibility */
.route-node:focus-visible, .route-nav:focus-visible,
.sound-toggle:focus-visible, .btn-config:focus-visible{
  outline:2px solid var(--ink-soft); outline-offset:3px;
}

/* ---------------- responsive ---------------- */
@media (max-width: 860px){
  .nav{ padding:16px 18px; }
  .nav-links{ display:none; }
  .roof{ width:min(var(--roof-w, 360px), calc(100vw - 32px)); }
  .cast-shadow{ transform:translateX(-50%) skewX(-8deg) scaleX(.96); }
  .lede{ left:20px; right:20px; bottom:150px; max-width:none; }
  .note{ display:none; }
  .headline{ font-size:clamp(22px, 6.2vw, 25px); line-height:1.16; }
  .route{ gap:8px; padding:8px 0; }
  .route-track{ width: min(64vw, 300px); }
  .route-node__label{ display:none; }
}

@media (max-width: 860px) and (orientation: landscape){
  .nav{ padding:14px 28px; }
  .composition{
    left:62%;
    width:42vw;
    align-items:center;
  }
  .roof-wrap{ margin-top:52px; }
  .roof{ width:min(var(--roof-w, 360px), 36vw); }
  .cast-shadow{
    transform:translateX(-50%) skewX(-8deg) scaleX(.78);
    opacity:.58;
  }
  .lede{
    top:132px;
    bottom:auto;
    left:28px;
    right:auto;
    width:min(34vw, 300px);
  }
  .kicker{
    margin-bottom:12px;
    font-size:10px;
    line-height:1.4;
  }
  .headline{
    font-size:clamp(22px, 3.2vw, 28px);
    line-height:1.08;
    max-width:300px;
  }
  .discover{ margin-top:16px; }
  .drag-hint{ display:none; }
  .route{
    bottom:14px;
    gap:8px;
    padding:4px 0;
  }
  .route-nav{
    width:28px;
    height:28px;
    background:rgba(245,239,227,.62);
  }
  .route-track{
    width:min(34vw, 260px);
    height:28px;
  }
}

@media (max-width: 860px) and (max-height: 700px) and (min-width: 520px) and (orientation: portrait){
  .composition{
    left:66%;
    width:40vw;
    align-items:center;
  }
  .roof-wrap{ margin-top:82px; }
  .roof{ width:min(var(--roof-w, 360px), 52vw); }
  .cast-shadow{
    transform:translateX(-50%) skewX(-8deg) scaleX(.82);
    opacity:.58;
  }
  .lede{
    top:318px;
    bottom:auto;
    left:28px;
    right:auto;
    width:min(36vw, 236px);
  }
  .kicker{
    margin-bottom:10px;
    font-size:10px;
    line-height:1.4;
  }
  .headline{
    font-size:clamp(21px, 4.2vw, 25px);
    line-height:1.08;
    max-width:236px;
  }
  .discover{ margin-top:14px; }
  .drag-hint{ display:none; }
  .route{ bottom:18px; }
}

@media (prefers-reduced-motion: reduce){
  .roof-wrap{ transition:opacity .3s ease; }
  .lede, .note{ transition: opacity .25s ease, transform .25s ease; }
  .map-layer{ transition: opacity .2s ease, visibility .2s ease; }
  .drag-hint__arrow{ animation:none; }
  .sound-toggle .sound-toggle__wave{ animation:none !important; }
}