/* 東京2026 — 行程網站。配色沿用 App 的 Material 3 色盤。 */

:root {
  --primary: #1E3A5F;
  --on-primary: #ffffff;
  --secondary: #E8607A;
  --tertiary: #E0A32E;
  --bg: #FBF7F1;
  --on-bg: #1B1A18;
  --surface: #ffffff;
  --on-surface: #1B1A18;
  --surface-variant: #EFE7DA;
  --on-surface-variant: #4A453D;
  --ok: #2FA85F;
  --eat: #C8791E;
  --radius: 18px;
  --shadow: 0 1px 3px rgba(0,0,0,.10), 0 6px 18px rgba(0,0,0,.05);
  --tabbar: 62px;
  --rail: 216px;          /* 桌機左側常駐導覽列的寬度 */
  --content-max: 1500px;  /* 導覽列右側的內容最大寬度 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #9EC1F0;
    --on-primary: #0B1B2E;
    --secondary: #FF97AA;
    --tertiary: #E0A32E;
    --bg: #14161A;
    --on-bg: #ECE6DE;
    --surface: #1D2026;
    --on-surface: #ECE6DE;
    --surface-variant: #2A2F38;
    --on-surface-variant: #C7C1B8;
    --eat: #E9A94C;
    --shadow: 0 1px 3px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 圖片一律不得超出容器；未套用尺寸規則時也不會撐破版面 */
img { max-width: 100%; }

/* SVG 沒有明確尺寸時會以預設值撐破版面（.chev 就曾如此）。
   這是保底值，個別規則仍可覆寫。 */
svg { width: 22px; height: 22px; flex: none; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--on-bg);
  font-family: system-ui, -apple-system, "Noto Sans TC", "Hiragino Sans",
               "Microsoft JhengHei", sans-serif;
  line-height: 1.6;
  overscroll-behavior-y: none;
}

button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--primary); }

/* ---------- 解鎖畫面 ---------- */
#lock {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, #0E1B36, #2B3F7A 60%, #E9827A);
}
.lock-card {
  width: 100%; max-width: 380px;
  background: var(--surface); color: var(--on-surface);
  border-radius: 24px; padding: 32px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  text-align: center;
}
.lock-mark { margin-bottom: 14px; }
.lock-mark svg { width: 52px; height: 52px; }   /* 覆寫全域 svg 保底尺寸 */
.lock-card h1 { margin: 0 0 6px; font-size: 1.3rem; }
.lock-hint { margin: 0 0 20px; font-size: .86rem; color: var(--on-surface-variant); }
#lock-form { display: flex; flex-direction: column; gap: 12px; }
#pass {
  font: inherit; padding: 13px 15px;
  border: 1.5px solid var(--surface-variant); border-radius: 13px;
  background: var(--bg); color: var(--on-bg);
}
#pass:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
.remember {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--on-surface-variant); text-align: left;
}
#unlock {
  padding: 13px; border: 0; border-radius: 13px;
  background: var(--primary); color: var(--on-primary); font-weight: 700;
}
#unlock:disabled { opacity: .6; }
.lock-err { min-height: 1.2em; margin: 12px 0 0; color: var(--secondary); font-size: .85rem; }
.lock-foot { margin: 16px 0 0; font-size: .7rem; color: var(--on-surface-variant); opacity: .75; }

/* ---------- 版面 ---------- */
/* 同一份內容有三套版面，不是同一條窄欄拉長：
     手機（< 700px）   單欄 ＋ 底部分頁列
     平板（≥ 700px）   卡片並排成兩欄
     桌機（≥ 1024px）  分頁列換成左側常駐導覽列，內容拆成主欄＋側欄
   變寬時是靠重新排版把空間吃掉。照片一律 object-fit: cover 裁切、主視覺再加
   高度上限，所以任何寬度下都是重新構圖而不是被拉成變形的一條。
   實際的斷點規則集中在檔案末尾的「自適應版面」一節。 */
#app { margin: 0 auto; }
#view { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 16px); }

#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; background: var(--surface);
  border-top: 1px solid var(--surface-variant);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 導覽列在手機上只是分頁列，展開成側欄時才需要這塊標題 */
.rail-brand { display: none; }
.tab {
  flex: 1; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0 6px; color: var(--on-surface-variant); font-size: .7rem;
}
.tab svg { width: 23px; height: 23px; fill: currentColor; }
.tab[aria-current="page"] { color: var(--primary); font-weight: 700; }

/* ---------- 主視覺 ---------- */
.hero { position: relative; aspect-ratio: 39 / 21; overflow: hidden; }
.hero.small { aspect-ratio: 179 / 75; }
/* 有照片時是 <img>，沒有照片時是漸層的 <div class="noimg">，兩者都要撐滿 */
.hero img, .hero .noimg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 無實景照也找不到合適授權圖的景點：手繪風格插畫置中於暖色底 */
.illus-spot { display: flex; align-items: center; justify-content: center; }
.illus-spot svg {
  width: 46%; height: 46%; fill: none; stroke: #6B4A3D;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .78;
}
.hero .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.18) 32%, rgba(0,0,0,.52) 66%, rgba(0,0,0,.76) 100%);
}
.hero .cap { position: absolute; left: 20px; bottom: 16px; right: 20px; color: #fff; }
.hero .cap h1 { margin: 0; font-size: 1.35rem; }
.hero .cap h2 { margin: 0; font-size: 1.05rem; }
.hero .cap p { margin: 2px 0 0; font-size: .85rem; opacity: .92; }
.hero .corner { position: absolute; top: 12px; right: 12px; }

/* ---------- 元件 ---------- */
.card {
  background: var(--surface); border-radius: var(--radius);
  margin: 12px 16px; box-shadow: var(--shadow); overflow: hidden;
}
.card.tap { cursor: pointer; }
.card-pad { padding: 16px; }

.card-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; margin-bottom: 10px;
}
.card-title::before {
  content: ""; width: 4px; height: 18px; border-radius: 2px;
  background: var(--accent, var(--primary));
}

.pill {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 500; white-space: nowrap;
}
.row { display: flex; gap: 8px; align-items: center; }
.wrap { flex-wrap: wrap; }
.scroll-x {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar { display: none; }

.section-title {
  margin: 20px 20px 2px; font-size: 1.15rem; font-weight: 700;
}

ul.bullets { margin: 0; padding: 0; list-style: none; }
ul.bullets li {
  display: flex; gap: 6px; margin-bottom: 8px; font-size: .9rem; line-height: 1.55;
}
ul.bullets li::before { content: attr(data-b); flex: none; opacity: .85; }
ul.bullets li:last-child { margin-bottom: 0; }

.stats { display: flex; gap: 10px; margin: 16px; }
.stat {
  flex: 1; background: var(--surface); border-radius: 16px;
  padding: 14px; box-shadow: var(--shadow);
}
.stat b { display: block; font-size: 1.3rem; }
.stat span { font-size: .74rem; color: var(--on-surface-variant); }

/* 展開／收合 */
details.exp { background: var(--surface); }
details.exp > summary {
  list-style: none; cursor: pointer; padding: 16px;
  display: flex; align-items: center; gap: 8px; font-weight: 700;
}
details.exp > summary::-webkit-details-marker { display: none; }
details.exp > summary::before {
  content: ""; width: 4px; height: 18px; border-radius: 2px;
  background: var(--accent, var(--primary)); flex: none;
}
details.exp > summary .chev {
  margin-left: auto; flex: none; width: 22px; height: 22px;
  fill: var(--on-surface-variant); transition: transform .18s;
}
details.exp[open] > summary .chev { transform: rotate(180deg); }
details.exp .body { padding: 0 16px 16px; }

/* 行程動線 */
.timeline { padding: 4px 0; }
.leg {
  display: flex; gap: 10px; padding: 8px 16px;
  font-size: .82rem; color: var(--on-surface-variant);
}
.leg .line { flex: none; width: 2px; background: var(--surface-variant); margin-left: 15px; }
.stop { display: flex; gap: 12px; padding: 4px 16px 4px; }
.stop .time {
  flex: none; width: 46px; font-weight: 700; color: var(--primary); font-size: .86rem; padding-top: 2px;
}
.stop .body { flex: 1; min-width: 0; }
.stop-name { font-weight: 700; margin-top: 6px; }
.stop-sub { font-size: .78rem; color: var(--on-surface-variant); }
.stop-tags { margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.stop img, .stop .noimg {
  width: 100%; aspect-ratio: 67 / 23; object-fit: cover; border-radius: 12px; display: block;
  background: var(--surface-variant);
}

/* 首頁日卡片裡的橫向縮圖（96px 寬的格子） */
.thumb {
  width: 100%; height: 60px; object-fit: cover; border-radius: 12px; display: block;
  background: var(--surface-variant);
}

/* 搜尋 */
.searchbar { padding: 12px 16px 4px; }
.searchbar input {
  width: 100%; font: inherit; padding: 12px 14px;
  border: 1.5px solid var(--surface-variant); border-radius: 13px;
  background: var(--surface); color: var(--on-surface);
}
.searchbar input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.chips { display: flex; gap: 7px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  border: 1.5px solid var(--surface-variant); background: var(--surface);
  border-radius: 999px; padding: 6px 13px; font-size: .8rem; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* 景點列 */
.spot-row { display: flex; gap: 12px; align-items: center; padding: 10px 16px; }
.spot-row img, .spot-row .noimg {
  width: 66px; height: 66px; flex: none; object-fit: cover; border-radius: 13px;
  background: var(--surface-variant);
}
.spot-row .meta { flex: 1; min-width: 0; }
.spot-row .meta b { display: block; }
.spot-row .meta small { color: var(--on-surface-variant); }

/* 頂列 */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 8px; background: var(--bg);
  border-bottom: 1px solid var(--surface-variant);
}
.topbar h2 { flex: 1; margin: 0; font-size: 1.02rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconbtn {
  border: 0; background: none; padding: 8px; border-radius: 50%;
  display: inline-flex; line-height: 0;
}
.iconbtn svg { width: 23px; height: 23px; fill: currentColor; }
.iconbtn:hover { background: var(--surface-variant); }

/* 動作按鈕 */
.actions { display: flex; gap: 10px; padding: 16px; }
.btn {
  flex: 1; border: 0; border-radius: 14px; padding: 11px 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .88rem; font-weight: 600; text-decoration: none;
  background: var(--primary); color: var(--on-primary);
}
.btn.outline { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }
.btn.gold { background: var(--tertiary); color: #1B1A18; }
.btn svg { width: 17px; height: 17px; fill: currentColor; }

/* 清單 */
.check-item { display: flex; gap: 12px; padding: 12px 16px; align-items: flex-start; }
.check-item .box {
  flex: none; width: 22px; height: 22px; border-radius: 6px; margin-top: 2px;
  border: 2px solid var(--on-surface-variant); display: grid; place-items: center;
}
.check-item[aria-checked="true"] .box { background: var(--ok); border-color: var(--ok); }
.check-item[aria-checked="true"] .box svg { display: block; }
.check-item .box svg { display: none; width: 14px; height: 14px; fill: #fff; }
.check-item[aria-checked="true"] .txt { text-decoration: line-through; opacity: .55; }
.check-item .txt { font-size: .9rem; }

.bar { height: 8px; border-radius: 4px; background: var(--primary); opacity: .78; }
.bar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-variant); overflow: hidden; }

.foot { padding: 20px; font-size: .78rem; color: var(--on-surface-variant); }
.credit { padding: 6px 20px 0; font-size: .72rem; color: var(--on-surface-variant); }

/* ============ 主視覺插畫 ============ */
.hero.illus { background: #F3D9C8; }
.hero.illus img { object-position: center 38%; }
/* 插畫底部是淺色波紋，需要比照片更深的漸層才壓得住白字 */
.hero.illus .scrim {
  background: linear-gradient(to bottom,
    transparent 0%, rgba(30, 42, 58, .10) 40%,
    rgba(30, 42, 58, .48) 74%, rgba(22, 32, 46, .74) 100%);
}
.hero.illus .cap { text-shadow: 0 1px 8px rgba(20, 28, 40, .55); }
.hero.zoomable { cursor: zoom-in; }

/* ============ 打卡進度環 ============ */
.ringwrap { line-height: 0; }
.ring { width: 46px; height: 46px; }
.ring .track { fill: none; stroke: var(--surface-variant); stroke-width: 5; }
.ring .fill {
  fill: none; stroke: var(--primary); stroke-width: 5; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1);
}
.ring .rt {
  font-size: 13px; font-weight: 700; fill: var(--on-surface);
  text-anchor: middle; dominant-baseline: central;
}
.accent-gold { color: var(--tertiary); }
.accent-pink { color: var(--secondary); }

/* ============ 色系提示清單 ============ */
ul.notes { margin: 0; padding: 0; list-style: none; }
ul.notes li {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 7px 0; font-size: .88rem; line-height: 1.6;
}
ul.notes li + li { border-top: 1px solid color-mix(in srgb, var(--on-surface-variant) 14%, transparent); }
.note-lead { display: block; font-weight: 700; margin-bottom: 2px; }
.ni { width: 17px; height: 17px; flex: none; margin-top: 3px; }

/* ============ 重點格線 ============ */
dl.facts {
  display: grid; grid-template-columns: auto 1fr; gap: 9px 12px;
  margin: 0; align-items: baseline;
}
dl.facts dt {
  display: flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; color: var(--on-surface-variant); white-space: nowrap;
}
dl.facts dd { margin: 0; font-size: .88rem; line-height: 1.55; }
.fi { width: 16px; height: 16px; flex: none; }

/* ============ 可收合區塊 ============ */
details.exp > summary .eh { width: 19px; height: 19px; flex: none; }
details.exp > summary .et { font-weight: 700; }
details.exp > summary::before { display: none; }
details.exp .body { animation: slidein .22s ease; }
@keyframes slidein { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ============ 移動時間長條 ============ */
.barrow { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
.blabel { width: 30px; font-weight: 700; color: var(--primary); font-size: .8rem; }
.bval { font-size: .78rem; color: var(--on-surface-variant); width: 50px; text-align: right; }
.bar { width: 0; transition: width .8s cubic-bezier(.2,.8,.2,1); }

.dsum { font-size: .84rem; color: var(--on-surface-variant); margin-top: 2px; }
.hint {
  margin: 10px 0 0; font-size: .78rem; line-height: 1.5;
  color: var(--on-surface-variant);
}

/* ============ 文字截斷，維持可掃讀 ============ */
.clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ 互動回饋 ============ */
.tap, .card.tap, details.exp > summary, .chip, .btn, .spot-row, .check-item, .stop {
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.tap:active, .card.tap:active, .btn:active, .stat.tap:active { transform: scale(.977); }
.spot-row:active, .check-item:active, .stop:active { background: var(--surface-variant); }
details.exp > summary:active { background: color-mix(in srgb, var(--accent) 8%, transparent); }

#view { opacity: 0; transform: translateY(6px); }
#view.in { opacity: 1; transform: none; transition: opacity .24s ease, transform .24s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  #view { opacity: 1; transform: none; }
  .bar { transition: none; }
}

/* ============ 照片全螢幕 ============ */
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 20px; background: rgba(10, 10, 14, .93);
  opacity: 0; transition: opacity .2s ease; cursor: zoom-out;
}
.lb.on { opacity: 1; }
.lb img {
  max-width: 100%; max-height: 76vh; border-radius: 12px;
  transform: scale(.97); transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.lb.on img { transform: none; }
.lb-c { margin: 0; color: #d8d2ca; font-size: .74rem; text-align: center; }
.lb-x { position: absolute; top: 12px; right: 12px; color: #fff; }

/* ---------- 入口畫面：渋谷スクランブル交差点 ----------
   一整面霓虹招牌牆、透視路口、來回穿越的人群。

   全部以 CSS 與 inline SVG 繪製：CSP 的 default-src 'none' 不允許任何外部
   字型或圖檔。霓虹是疊出來的 —— 燈管的白心用 text-shadow 的第一層，外圈色暈
   用後面幾層，管身則是 box-shadow 的內外兩道。招牌的位置與顏色寫在檔尾的
   位置表，HTML 那 28 個 span 與這份表由同一份資料產生，不會對不起來。

   會動的東西只改 transform／opacity，而且全部收在 prefers-reduced-motion:
   no-preference 裡：關掉動畫後仍是一張完整的夜景，不是空畫面。 */

#gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #0B0512;
  color: #EAF6FF;
  opacity: 1;
  transition: opacity .38s ease, transform .38s ease;
}
#gate.out { opacity: 0; transform: scale(1.06); pointer-events: none; }

/* 場景層。畫的先後就是前後關係：天空 → 天際線 → 樓 → 招牌 → 路面 →
   車燈 → 人群 → 雨 → 掃描線 → 暗角，不另外排 z-index。 */
.gate-bg { position: absolute; inset: 0; overflow: hidden; }

/* 夜空不是純黑：整條街的霓虹會把低空染成紫紅色 */
.sc-sky {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    #14081F 0%, #1E0A30 30%, #2E0C38 56%, #1A0820 76%, #0B0512 100%);
}
.sc-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 34% at 22% 58%, rgba(255,45,120,.34), transparent 70%),
    radial-gradient(ellipse 54% 30% at 78% 52%, rgba(56,245,255,.24), transparent 70%),
    radial-gradient(ellipse 48% 26% at 50% 68%, rgba(255,216,77,.20), transparent 70%);
}

.sc-skyline {
  position: absolute; left: -4%; right: -4%; bottom: 30%;
  width: 108%; height: 22%;
  fill: #0E0819;
}

/* 樓體只是掛招牌的暗牆：窗光刻意壓到很暗，主角是招牌 */
.sc-tower {
  position: absolute;
  background: linear-gradient(to bottom, rgba(14,8,26,.94), rgba(9,5,17,.98));
  overflow: hidden;
}
.sc-tower-l {
  left: -4vw; top: 0; width: min(34vw, 210px); height: 74%;
  clip-path: polygon(0 8%, 52% 8%, 52% 0, 100% 0, 100% 100%, 0 100%);
}
.sc-tower-r {
  right: -4vw; top: 0; width: min(30vw, 186px); height: 74%;
  clip-path: polygon(0 0, 46% 0, 46% 11%, 100% 11%, 100% 100%, 0 100%);
}
.sc-win { position: absolute; inset: 0; }
.sc-win::before, .sc-win::after { content: ''; position: absolute; inset: 0; }
.sc-win::before {
  background-image: repeating-linear-gradient(to bottom,
    rgba(255,206,138,.22) 0 3px, transparent 3px 11px);
  mask-image: repeating-linear-gradient(to right, #000 0 5px, transparent 5px 13px);
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 5px, transparent 5px 13px);
}
.sc-win::after {
  background-image: repeating-linear-gradient(to bottom,
    rgba(120,222,255,.16) 0 2px, transparent 2px 17px);
  mask-image: repeating-linear-gradient(to right, #000 0 4px, transparent 4px 9px);
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 4px, transparent 4px 9px);
}
/* 地平線上的街廓 */
.sc-mid {
  position: absolute; left: -2%; right: -2%; bottom: 26%; height: 16%;
  background: #100A1E;
  clip-path: polygon(
    0 38%, 9% 38%, 9% 16%, 18% 16%, 18% 46%, 27% 46%, 27% 26%, 36% 26%,
    36% 8%, 45% 8%, 45% 34%, 55% 34%, 55% 18%, 64% 18%, 64% 42%, 73% 42%,
    73% 12%, 82% 12%, 82% 30%, 91% 30%, 91% 20%, 100% 20%, 100% 100%, 0 100%);
}
.sc-mid::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom,
    rgba(255,206,138,.30) 0 2px, transparent 2px 9px);
  mask-image: repeating-linear-gradient(to right, #000 0 3px, transparent 3px 10px);
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 3px, transparent 3px 10px);
}

/* ---- 霓虹招牌 ----
   白心＋色暈才像燈管：文字給白色，發光全交給 text-shadow 的三層色暈；
   外框與管身用 box-shadow 的內外兩道。顏色統一走 --c。 */
/* 招牌牆有上限寬度：招牌位置是百分比，在寬螢幕上會被推到左右兩邊，
   中間空出一大塊。限寬之後整面牆維持在中央，兩側交給大樓的窗光。 */
.sc-wall {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: min(100%, 980px);
  transform: translateX(-50%);
}
.sc-sign {
  position: absolute;
  padding: .5em .44em;
  border: 1.5px solid var(--c);
  border-radius: 3px;
  background: rgba(9,5,20,.5);
  color: #FFFFFF;
  line-height: 1.06;
  letter-spacing: .16em;
  white-space: nowrap;
  box-shadow: 0 0 7px var(--c), 0 0 20px -5px var(--c), inset 0 0 9px -2px var(--c);
  text-shadow: 0 0 4px var(--c), 0 0 11px var(--c), 0 0 26px var(--c);
}
.sc-v {
  writing-mode: vertical-rl;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
               "Noto Serif JP", "Noto Serif TC", serif;
}
.sc-h { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* 無字的純燈管：霓虹街上本來就有一堆只是形狀的燈 */
.sc-ring {
  position: absolute; aspect-ratio: 1;
  border: 2.5px solid var(--c); border-radius: 50%;
  box-shadow: 0 0 9px var(--c), 0 0 26px -7px var(--c), inset 0 0 11px -3px var(--c);
}
.sc-box {
  position: absolute;
  border: 2px solid var(--c); border-radius: 2px;
  box-shadow: 0 0 9px var(--c), inset 0 0 13px -4px var(--c);
}
.sc-tube {
  position: absolute;
  border-radius: 3px; background: var(--c);
  box-shadow: 0 0 9px var(--c), 0 0 24px -4px var(--c);
}

/* ---- 正面大型看板 ---- */
.sc-board {
  position: absolute; left: 50%; top: 3%;
  width: min(40vw, 26vh, 250px); aspect-ratio: 16 / 10;
  transform: translateX(-50%);
}
.sc-screen {
  position: absolute; inset: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 3px;
  background: #0B0512;
  box-shadow: 0 0 26px rgba(255,45,120,.45), 0 0 70px -10px rgba(56,245,255,.35);
}
/* 五張投影片、最後一張與第一張相同：捲到底接回起點時不會倒帶 */
.sc-reel { display: flex; flex-direction: column; height: 500%; }
.sc-slide {
  display: flex; align-items: center; justify-content: center;
  height: 20%; padding: 0 6%;
  text-align: center;
  font-size: clamp(.62rem, 3vw, 1rem);
  letter-spacing: .12em;
}
.sc-slide-a {
  background: linear-gradient(135deg, #FF2D78, #6E0F45);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #FFF3F8;
}
.sc-slide-b {
  background: linear-gradient(135deg, #0B4A5E, #38F5FF);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
               "Noto Serif JP", "Noto Serif TC", serif;
  font-size: clamp(1rem, 5.5vw, 1.9rem);
  color: #04121A;
}
.sc-slide-c {
  background: linear-gradient(135deg, #2A0C38, #0B0512);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #38F5FF;
}
.sc-slide-d {
  background: linear-gradient(135deg, #FFD84D, #A85A0B);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
               "Noto Serif JP", "Noto Serif TC", serif;
  font-size: clamp(1rem, 5.5vw, 1.9rem);
  color: #1B1200;
}
.sc-screen-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
}

/* ---- 行人號誌 ---- */
.sc-signal {
  position: absolute; left: 4vw; bottom: 25%;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 34px;
  border: 1px solid rgba(234,246,255,.32);
  border-radius: 3px;
  background: #0B0512;
  box-shadow: 0 0 16px -2px rgba(124,255,155,.7);
}
.sc-signal::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  width: 2px; height: 44px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(234,246,255,.22), transparent);
}
.sc-signal svg {
  width: 20px; height: 24px;
  fill: #7CFF9B;
  filter: drop-shadow(0 0 6px rgba(124,255,155,.95));
}

/* ---- 路面 ----
   整塊平面用 rotateX 壓成地面，子元素在平面座標裡排：下緣是眼前、上緣是遠處。
   俯角刻意只有 48 度：角度再大，整條路就會被壓成畫面最下緣的一條細帶。 */
.sc-road {
  position: absolute; left: -55%; right: -55%; bottom: 0; height: 56%;
  background: linear-gradient(to top, #1A1226 0%, #0E0819 76%, #0B0512 100%);
  transform: perspective(850px) rotateX(48deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%);
  overflow: hidden;
}
.sc-zebra { position: absolute; }
/* 兩條縱向、兩條橫向、一條對角 —— 湊齊才是スクランブル的形狀 */
.sc-zebra-a {
  left: 31%; right: 41%; top: 0; bottom: 0;
  background: repeating-linear-gradient(to right,
    rgba(245,250,255,.72) 0 20px, transparent 20px 46px);
}
.sc-zebra-b {
  left: 60%; right: 12%; top: 0; bottom: 0;
  background: repeating-linear-gradient(to right,
    rgba(245,250,255,.66) 0 20px, transparent 20px 46px);
}
.sc-zebra-c {
  left: 0; right: 0; top: 62%; height: 34%;
  background: repeating-linear-gradient(to bottom,
    rgba(245,250,255,.68) 0 18px, transparent 18px 46px);
}
.sc-zebra-d {
  left: 0; right: 0; top: 6%; height: 11%;
  background: repeating-linear-gradient(to bottom,
    rgba(245,250,255,.38) 0 7px, transparent 7px 17px);
}
.sc-zebra-e {
  left: -8%; right: -8%; top: 12%; height: 30%;
  transform: rotate(-22deg);
  background: repeating-linear-gradient(to bottom,
    rgba(245,250,255,.42) 0 14px, transparent 14px 38px);
}
/* 濕柏油：一整排招牌在地上化成一攤攤顏色 */
.sc-pool {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 20% 30% at 10% 74%, rgba(255,45,120,.55), transparent 72%),
    radial-gradient(ellipse 16% 26% at 27% 88%, rgba(255,216,77,.44), transparent 72%),
    radial-gradient(ellipse 20% 30% at 48% 96%, rgba(56,245,255,.44), transparent 72%),
    radial-gradient(ellipse 16% 26% at 70% 86%, rgba(176,107,255,.44), transparent 72%),
    radial-gradient(ellipse 20% 30% at 90% 74%, rgba(124,255,155,.40), transparent 72%);
  mix-blend-mode: screen;
}

/* ---- 掠過的車燈 ---- */
.sc-car { position: absolute; left: 0; height: 3px; width: 30vw; border-radius: 3px; opacity: 0; }
.sc-car-1 {
  bottom: 23%;
  background: linear-gradient(to right, transparent,
    rgba(255,90,130,.9) 60%, rgba(255,236,242,1) 86%, transparent);
}
.sc-car-2 {
  bottom: 25.5%; height: 4px; width: 38vw;
  background: linear-gradient(to left, transparent,
    rgba(140,230,255,.85) 60%, rgba(255,255,255,1) 88%, transparent);
}
.sc-car-3 {
  bottom: 21%; height: 2px; width: 24vw;
  background: linear-gradient(to right, transparent,
    rgba(255,216,77,.8) 66%, rgba(255,247,224,1) 90%, transparent);
}

/* ---- 人群 ----
   剪影只有身體與頭，這個尺寸畫五官只會糊成一團。
   左右位移放在 .ped、上下的步伐放在裡面的 <i>，兩個 transform 才不會打架。 */
.sc-crowd { position: absolute; left: 0; right: 0; bottom: 24px; height: 22%; }
.ped { position: absolute; left: 0; aspect-ratio: .42; }
.ped i {
  position: relative; display: block;
  width: 100%; height: 100%;
  background: #05030C;
  border-radius: 42% 42% 16% 16% / 22% 22% 8% 8%;
  box-shadow: 0 0 8px -1px rgba(56,245,255,.55), inset 0 -5px 8px -2px rgba(255,45,120,.45);
}
.ped i::before {
  content: ''; position: absolute; left: 50%; top: -38%;
  width: 56%; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: inherit;
  box-shadow: 0 0 6px -1px rgba(56,245,255,.5);
}
/* 每個人的深度：越遠越小、越淡、走得越慢。靜態時 translateX 讓他們散在路口，
   動畫一跑就會被 keyframes 蓋過去。 */
.ped:nth-child(1 ) { bottom: 0%;   height: 42px; opacity: 0.98; transform: translateX(12vw); animation-duration: 11s; animation-delay: -1s; }
.ped:nth-child(2 ) { bottom: 5%;   height: 38px; opacity: 0.95; transform: translateX(74vw); animation-duration: 13s; animation-delay: -8s; }
.ped:nth-child(3 ) { bottom: 10%;  height: 34px; opacity: 0.92; transform: translateX(38vw); animation-duration: 12s; animation-delay: -5s; }
.ped:nth-child(4 ) { bottom: 15%;  height: 30px; opacity: 0.88; transform: translateX(88vw); animation-duration: 16s; animation-delay: -3s; }
.ped:nth-child(5 ) { bottom: 20%;  height: 27px; opacity: 0.84; transform: translateX(56vw); animation-duration: 14s; animation-delay: -11s; }
.ped:nth-child(6 ) { bottom: 25%;  height: 24px; opacity: 0.79; transform: translateX(24vw); animation-duration: 18s; animation-delay: -6s; }
.ped:nth-child(7 ) { bottom: 29%;  height: 21px; opacity: 0.74; transform: translateX(66vw); animation-duration: 15s; animation-delay: -13s; }
.ped:nth-child(8 ) { bottom: 33%;  height: 19px; opacity: 0.69; transform: translateX(4vw); animation-duration: 20s; animation-delay: -2s; }
.ped:nth-child(9 ) { bottom: 37%;  height: 17px; opacity: 0.64; transform: translateX(46vw); animation-duration: 17s; animation-delay: -15s; }
.ped:nth-child(10) { bottom: 40%;  height: 15px; opacity: 0.59; transform: translateX(96vw); animation-duration: 22s; animation-delay: -9s; }
.ped:nth-child(11) { bottom: 43%;  height: 14px; opacity: 0.55; transform: translateX(30vw); animation-duration: 19s; animation-delay: -17s; }
.ped:nth-child(12) { bottom: 46%;  height: 12px; opacity: 0.5; transform: translateX(80vw); animation-duration: 24s; animation-delay: -4s; }

/* ---- 雨 ----
   一層漸層當雨絲、一層遮罩切成一根根；位移剛好一個週期，接縫看不出來。 */
.sc-rain {
  position: absolute; left: -20%; right: -20%; top: -10%; bottom: -10%;
  transform: skewX(-11deg);
}
.sc-rain-a {
  background-image: repeating-linear-gradient(to bottom,
    rgba(214,238,255,.16) 0 12px, transparent 12px 52px);
  mask-image: repeating-linear-gradient(to right, #000 0 1px, transparent 1px 16px);
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 1px, transparent 1px 16px);
}
.sc-rain-b {
  background-image: repeating-linear-gradient(to bottom,
    rgba(214,238,255,.10) 0 9px, transparent 9px 37px);
  mask-image: repeating-linear-gradient(to right, #000 0 1px, transparent 1px 25px);
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 1px, transparent 1px 25px);
}

.sc-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,.26) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.sc-vig {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 46%,
    transparent 34%, rgba(11,5,18,.58) 78%, rgba(11,5,18,.92) 100%);
}

/* ---- 中央招牌 ----
   背後是一整面亮招牌，文字非得有自己的燈箱才讀得出來。 */
.gate-inner {
  position: relative; z-index: 10;
  padding: 18px 22px 20px;
  text-align: center;
  border: 1.5px solid rgba(56,245,255,.55);
  border-radius: 4px;
  background: rgba(8,4,17,.7);
  box-shadow: 0 0 22px -2px rgba(56,245,255,.5), 0 0 80px -20px rgba(255,45,120,.6),
              inset 0 0 44px rgba(8,4,17,.9);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.gate-torii {
  width: clamp(62px, 15vw, 84px);
  margin: 0 auto 6px;
  color: #38F5FF;
}
.gate-torii svg {          /* 覆寫全域 svg 22px 保底尺寸 */
  width: 100%; height: auto;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.9))
          drop-shadow(0 0 10px rgba(56,245,255,1))
          drop-shadow(0 0 26px rgba(56,245,255,.7));
}

.gate-kicker {
  margin: 0 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.5rem, 1.7vw, .64rem); letter-spacing: clamp(.1em, .5vw, .22em);
  color: #EAFDFF;
  text-shadow: 0 0 4px #38F5FF, 0 0 12px #38F5FF, 0 0 28px rgba(56,245,255,.8);
}

/* 標題就是整條街最大的一塊霓虹：白心、桃紅色暈，外加一層青色的管影 */
.gate-title {
  position: relative;
  margin: 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
               "Noto Serif JP", "Noto Serif TC", "Songti TC", serif;
  font-size: clamp(3.4rem, 17vw, 6.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-indent: .1em;              /* 補回字距造成的右偏 */
  color: #FFF7FA;
  text-shadow: 0 0 5px #fff, 0 0 14px #FF2D78, 0 0 30px #FF2D78,
               0 0 60px rgba(255,45,120,.85), 0 0 110px rgba(255,45,120,.5);
}
.gate-title::before,
.gate-title::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  text-indent: .1em;
  color: transparent;
}
.gate-title::before {
  transform: translate(-3px, 1px);
  text-shadow: 0 0 8px rgba(56,245,255,.9), 0 0 22px rgba(56,245,255,.6);
}
.gate-title::after {
  transform: translate(3px, -1px);
  text-shadow: 0 0 8px rgba(255,216,77,.5), 0 0 20px rgba(255,216,77,.3);
}

.gate-sub {
  margin: 10px 0 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
               "Noto Serif JP", "Noto Serif TC", serif;
  font-size: clamp(.72rem, 3.4vw, .9rem); letter-spacing: .08em;
  color: #FFF6FB;
  text-shadow: 0 0 6px rgba(255,45,120,.7), 0 0 18px rgba(255,45,120,.4);
}

.gate-rule {
  width: 150px; height: 2px; margin: 16px auto;
  border-radius: 2px;
  background: linear-gradient(to right, transparent, #FF2D78, #38F5FF, transparent);
  box-shadow: 0 0 10px rgba(56,245,255,.8);
}

.gate-enter {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 38px;
  background: rgba(56,245,255,.10);
  border: 2px solid #38F5FF;
  border-radius: 3px;
  color: #FFFFFF;
  box-shadow: 0 0 14px -1px #38F5FF, 0 0 40px -12px #38F5FF,
              inset 0 0 18px -6px #38F5FF;
  transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
}
.gate-enter-ja {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
               "Noto Serif JP", "Noto Serif TC", serif;
  font-size: 1.16rem; font-weight: 600; letter-spacing: .16em;
  text-shadow: 0 0 6px #38F5FF, 0 0 18px rgba(56,245,255,.7);
}
.gate-enter-en {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .58rem; letter-spacing: .34em;
  color: #BFF7FF;
}
.gate-enter:hover, .gate-enter:focus-visible {
  background: rgba(56,245,255,.24);
  box-shadow: 0 0 22px 0 #38F5FF, 0 0 60px -10px #38F5FF, inset 0 0 26px -6px #38F5FF;
  outline: none;
}
.gate-enter:active { transform: translateY(1px); }

.gate-foot {
  margin: 14px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .56rem; letter-spacing: .2em;
  color: rgba(234,246,255,.6);
}

/* ---- 底部跑馬燈：兩份相同的文字接成一條，捲過一份的寬度就回到原點 ---- */
.sc-ticker {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  margin: 0; padding: 5px 0;
  overflow: hidden;
  background: linear-gradient(to top, rgba(11,5,18,.96), rgba(11,5,18,.5));
  border-top: 1px solid rgba(56,245,255,.35);
  font-size: .6rem; letter-spacing: .16em;
  color: #DFFBFF;
  text-shadow: 0 0 5px #38F5FF, 0 0 16px rgba(56,245,255,.7);
}
.sc-tick { display: flex; width: max-content; }
.sc-tick i { font-style: normal; white-space: nowrap; }

/* ---- 招牌位置表 ----
   一行一塊招牌：--c 是燈管顏色，其餘是位置與字級。
   同一份表也生出 HTML 裡那 28 個 span。 */
.sc-s1  { --c: #FF2D78; top:1%;left:1%;font-size:clamp(.62rem,3.4vw,1.15rem); }
.sc-s2  { --c: #38F5FF; top:6.5%;left:10%;font-size:clamp(.5rem,2.5vw,.86rem); }
.sc-s3  { --c: #FFD84D; top:2%;left:19.5%;width:3px;height:clamp(30px,8vw,50px); }
.sc-s4  { --c: #7CFF9B; top:0.5%;right:1%;font-size:clamp(.5rem,2.5vw,.86rem); }
.sc-s5  { --c: #FF6B35; top:7.5%;right:10%;font-size:clamp(.62rem,3.4vw,1.15rem); }
.sc-s6  { --c: #4DFFE1; top:3%;right:18%;width:clamp(20px,5.2vw,32px); }
.sc-s7  { --c: #FFD84D; top:14%;left:2%;letter-spacing:.32em;font-size:clamp(.5rem,2.5vw,.86rem); }
.sc-s8  { --c: #FF2D78; top:13%;left:15%;width:clamp(24px,6.4vw,40px); }
.sc-s9  { --c: #38F5FF; top:14%;right:2%;letter-spacing:.28em;font-size:clamp(.5rem,2.5vw,.86rem); }
.sc-s10 { --c: #FFD84D; top:13%;right:16%;font-size:clamp(.52rem,2.6vw,.9rem); }
.sc-s11 { --c: #7CFF9B; top:20%;left:1%;font-size:clamp(.4rem,2vw,.68rem); }
.sc-s12 { --c: #B06BFF; top:18.5%;left:14%;font-size:clamp(.48rem,2.4vw,.84rem); }
.sc-s13 { --c: #FF2D78; top:21.5%;left:24%;letter-spacing:.24em;font-size:clamp(.4rem,2vw,.68rem); }
.sc-s14 { --c: #FFD84D; top:19%;left:39%;width:clamp(18px,4.6vw,28px); }
.sc-s15 { --c: #FF2D78; top:19.6%;left:44%;font-size:clamp(.42rem,2.1vw,.72rem); }
.sc-s16 { --c: #4DFFE1; top:19.8%;right:24%;font-size:clamp(.42rem,2.1vw,.72rem); }
.sc-s17 { --c: #38F5FF; top:18.6%;right:11%;font-size:clamp(.48rem,2.4vw,.84rem); }
.sc-s18 { --c: #B06BFF; top:21%;right:1%;letter-spacing:.26em;font-size:clamp(.52rem,2.6vw,.9rem); }
.sc-s19 { --c: #FF6B35; top:29%;left:1%;font-size:clamp(.5rem,2.5vw,.86rem); }
.sc-s20 { --c: #38F5FF; top:38%;left:2%;width:clamp(18px,4.8vw,30px);height:clamp(28px,7vw,44px); }
.sc-s21 { --c: #FFD84D; top:46.5%;left:1%;font-size:clamp(.46rem,2.3vw,.8rem); }
.sc-s22 { --c: #FF2D78; top:55%;left:3%;width:3px;height:clamp(30px,8vw,50px); }
.sc-s23 { --c: #FF3B3B; top:62%;left:2%;font-size:clamp(.54rem,2.8vw,.95rem); }
.sc-s24 { --c: #FFD84D; top:30%;right:1%;font-size:clamp(.5rem,2.5vw,.86rem); }
.sc-s25 { --c: #B06BFF; top:39.5%;right:2%;width:clamp(20px,5.2vw,32px); }
.sc-s26 { --c: #B06BFF; top:45.5%;right:1%;font-size:clamp(.46rem,2.3vw,.8rem); }
.sc-s27 { --c: #7CFF9B; top:54%;right:3%;width:3px;height:clamp(30px,8vw,50px); }
.sc-s28 { --c: #38F5FF; top:61.5%;right:2%;font-size:clamp(.54rem,2.8vw,.95rem); }

/* ---- 動態 ---- */
@keyframes sc-torii {
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}
@keyframes sc-glitch {
  0%, 92%, 100% { transform: translate(-3px, 1px); }
  94%           { transform: translate(-9px, -2px) skewX(-6deg); }
  96%           { transform: translate(-1px, 3px) skewX(4deg); }
}
@keyframes sc-glitch-alt {
  0%, 92%, 100% { transform: translate(3px, -1px); }
  94%           { transform: translate(9px, 2px) skewX(6deg); }
  96%           { transform: translate(1px, -3px) skewX(-4deg); }
}
/* 三種接觸不良：大部分時間亮著，偶爾連閃兩下 */
@keyframes sc-flick-a {
  0%, 86%, 100% { opacity: 1; }
  88%, 92%      { opacity: .22; }
  90%, 94%      { opacity: 1; }
}
@keyframes sc-flick-b {
  0%, 70%, 100% { opacity: 1; }
  72%, 76%, 80% { opacity: .3; }
  74%, 78%, 82% { opacity: 1; }
}
@keyframes sc-flick-c {
  0%, 44%, 100% { opacity: 1; }
  46%           { opacity: .35; }
  48%           { opacity: 1; }
}
@keyframes sc-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .78; }
}
@keyframes sc-reel {
  0%,   16%  { transform: translateY(0); }
  20%,  36%  { transform: translateY(-20%); }
  40%,  56%  { transform: translateY(-40%); }
  60%,  76%  { transform: translateY(-60%); }
  80%, 100%  { transform: translateY(-80%); }
}
@keyframes sc-signal {
  0%, 70%        { opacity: 1; }
  75%, 85%, 95%  { opacity: .25; }
  80%, 90%, 100% { opacity: 1; }
}
@keyframes sc-shimmer {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}
@keyframes sc-car      { 0% { transform: translateX(-34vw); opacity: 0; } 8%, 70% { opacity: 1; } 100% { transform: translateX(130vw); opacity: 0; } }
@keyframes sc-car-back { 0% { transform: translateX(130vw); opacity: 0; } 8%, 70% { opacity: 1; } 100% { transform: translateX(-42vw); opacity: 0; } }
@keyframes ped-right { from { transform: translateX(-16vw); } to { transform: translateX(116vw); } }
@keyframes ped-left  { from { transform: translateX(116vw); } to { transform: translateX(-16vw); } }
@keyframes ped-step  { from { transform: translateY(0) scaleX(1); } to { transform: translateY(-2.5%) scaleX(.94); } }
@keyframes sc-rain-a { to { transform: skewX(-11deg) translateY(52px); } }
@keyframes sc-rain-b { to { transform: skewX(-11deg) translateY(37px); } }
@keyframes sc-tick   { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: no-preference) {
  .gate-torii { animation: sc-torii 3.4s ease-in-out infinite; }
  .gate-title::before { animation: sc-glitch 5.5s steps(1, end) infinite; }
  .gate-title::after  { animation: sc-glitch-alt 5.5s steps(1, end) infinite; }
  .gate-enter { animation: sc-breathe 2.8s ease-in-out infinite; }

  /* 招牌閃爍：同一支動畫配上互質的週期與負延遲，就不會整條街一起閃 */
  .sc-s1  { animation: sc-flick-a 9s steps(1, end) infinite 0s; }
  .sc-s7  { animation: sc-flick-a 11s steps(1, end) infinite 1.5s; }
  .sc-s14 { animation: sc-flick-a 13s steps(1, end) infinite 4s; }
  .sc-s21 { animation: sc-flick-a 7.5s steps(1, end) infinite 2.2s; }
  .sc-s27 { animation: sc-flick-a 15s steps(1, end) infinite 6s; }
  .sc-s4  { animation: sc-flick-b 5.5s steps(1, end) infinite 0.8s; }
  .sc-s18 { animation: sc-flick-b 6.5s steps(1, end) infinite 3.1s; }
  .sc-s11 { animation: sc-flick-c 3.2s steps(1, end) infinite 0s; }
  .sc-s24 { animation: sc-flick-c 2.7s steps(1, end) infinite 1.3s; }
  .sc-s9  { animation: sc-breathe 4.2s ease-in-out infinite 0s; }
  .sc-s16 { animation: sc-breathe 5.6s ease-in-out infinite 1.1s; }
  .sc-s22 { animation: sc-breathe 4.8s ease-in-out infinite 2.4s; }

  .sc-reel { animation: sc-reel 14s ease-in-out infinite; }
  .sc-signal svg { animation: sc-signal 6s steps(1, end) infinite; }
  .sc-pool { animation: sc-shimmer 7s ease-in-out infinite; }

  .sc-car-1 { animation: sc-car 4.2s cubic-bezier(.4,0,.6,1) infinite 1.2s; }
  .sc-car-2 { animation: sc-car-back 3.4s cubic-bezier(.4,0,.6,1) infinite 3.6s; }
  .sc-car-3 { animation: sc-car 5.6s cubic-bezier(.4,0,.6,1) infinite 6.4s; }

  .ped { animation-name: ped-right; animation-timing-function: linear; animation-iteration-count: infinite; }
  .ped:nth-child(even) { animation-name: ped-left; }
  .ped i { animation: ped-step .48s ease-in-out infinite alternate; }
  .ped:nth-child(3n) i   { animation-duration: .57s; }
  .ped:nth-child(3n+1) i { animation-duration: .43s; }

  .sc-rain-a { animation: sc-rain-a .55s linear infinite; }
  .sc-rain-b { animation: sc-rain-b .78s linear infinite; }
  .sc-tick { animation: sc-tick 26s linear infinite; }
}

/* 窄螢幕：kicker 的寬字距會斷成兩行，收緊以維持單行 */
@media (max-width: 400px) {
  .gate-inner { padding: 16px 18px 18px; }
}

/* 橫向或矮螢幕：垂直空間不夠，收掉鳥居並壓低文字，按鈕才不會掉到路面下 */
@media (max-height: 560px) {
  .gate-torii { display: none; }
  .gate-title { font-size: clamp(2.6rem, 11vw, 4rem); }
  .gate-sub { font-size: .78rem; }
  .gate-rule { margin: 11px auto; }
  .gate-enter { padding: 10px 28px; }
  /* 高度不夠時：第二排與第三排中段整組收掉，直書招牌也要縮，
     否則同一柱裡上下兩塊會疊在一起 */
  .sc-r2, .sc-c { display: none; }
  .sc-v { font-size: .44rem; }
  .sc-box { height: 26px; }
  .sc-tube { height: 24px; }
  .sc-crowd { height: 30%; }
  /* 橫向時燈箱幾乎頂到畫面上緣，看板得讓到旁邊去 */
  .sc-board { top: 2%; left: 22%; }
}

/* ============================================================
   自適應版面
   ------------------------------------------------------------
   手機的單欄是基準，往上是兩段重新排版，不是等比放大：
     ≥ 700px   卡片並排兩欄；主視覺開始受高度上限管制
     ≥ 1024px  底部分頁列變成左側常駐導覽列，內容拆成主欄＋側欄，
               卡片依可用寬度自動決定欄數，行程動線的照片挪到文字左邊
   .grid 與 .split 在手機上都退回單純的直向堆疊，因此 app.js 送出的
   節點順序在任何寬度下都一致（照手機的閱讀順序寫）。
   ============================================================ */

/* 卡片格線。手機是單欄，由 grid 的 padding／gap 取代卡片自身的 margin，
   看起來與原本完全一樣。
   align-items: start 讓每張卡片只長到自己內容的高度：預設的 stretch 會把整列
   拉齊到最高的那張，短的卡片下半截就空著（準備頁的「航班」最明顯）。
   單欄時每列只有一張卡，這個值沒有作用，所以手機版不受影響。 */
.grid { display: grid; gap: 12px; padding: 0 16px; margin: 12px 0; align-items: start; }
.grid > .card, .grid > .spot-card { margin: 0; }
.spot-card { margin: 0; }
.grid-spots { gap: 10px; }

/* 主欄／側欄。手機上就是兩個依序堆疊的容器，沒有任何視覺影響。 */
.split { display: block; }
.split-main, .split-side { min-width: 0; }

/* ---------- 平板 ---------- */
@media (min-width: 700px) {
  .grid-days, .grid-spots, .grid-check, .grid-books {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 主視覺在寬螢幕上要橫跨整欄，但不能只加 max-height：aspect-ratio 會連寬度
     一起縮回去（1384px 寬的欄位量到只剩 854px，等於自己把版面縮小）。
     改成關掉比例、直接指定高度，寬度就會撐滿，再由 object-fit: cover 裁切。
     只挑最上層的主視覺；日卡片格線裡的縮圖仍照原比例，才不會變成直立的。 */
  #view > .hero, .split-main > .hero { aspect-ratio: auto; height: min(46vh, 420px); }
  #view > .hero.small, .split-main > .hero.small { height: min(34vh, 300px); }
}

/* ---------- 桌機 ---------- */
@media (min-width: 1024px) {
  /* 分頁列 → 左側常駐導覽列 */
  #tabs {
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--rail);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 2px; padding: 16px 10px;
    border-top: 0; border-right: 1px solid var(--surface-variant);
  }
  .tab {
    flex: none; flex-direction: row; justify-content: flex-start;
    gap: 12px; padding: 11px 14px; border-radius: 12px; font-size: .92rem;
  }
  .tab:hover { background: var(--surface-variant); }
  .tab[aria-current="page"] { background: color-mix(in srgb, var(--primary) 13%, transparent); }

  .rail-brand { display: block; padding: 6px 14px 18px; }
  .rail-ja {
    display: block; font-size: 1.15rem; font-weight: 700;
    letter-spacing: .12em; color: var(--primary);
  }
  .rail-en {
    display: block; margin-top: 2px; font-size: .68rem;
    letter-spacing: .06em; color: var(--on-surface-variant);
  }

  /* 內容讓開導覽列，並在剩下的空間裡置中 */
  #app { padding-left: var(--rail); }
  #view { max-width: var(--content-max); margin: 0 auto; padding-bottom: 48px; }

  /* 主欄寬、側欄窄。兩邊各自的 16px 卡片邊距合起來就是欄距。 */
  .split {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 8px; align-items: start;
  }

  /* 欄數改由可用寬度決定，而不是寫死兩欄 */
  .grid-days { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
  .grid-spots { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  .grid-check { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .grid-books { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

  /* 三個統計數字攤在整個主欄上會太空，收成一段 */
  .stats { max-width: 560px; }

  /* 行程動線：照片從文字上方挪到左邊，一頁能看到的站數多一倍 */
  .stop .body {
    display: grid; grid-template-columns: 190px minmax(0, 1fr);
    column-gap: 14px; align-items: start;
  }
  .stop .body > :first-child {
    grid-column: 1; grid-row: 1 / span 3;
    aspect-ratio: 4 / 3; height: auto;
  }
  .stop-name, .stop-sub, .stop-tags { grid-column: 2; }
  .stop-name { margin-top: 0; font-size: 1rem; }

  /* 搜尋列在整個視窗寬上會變成一條沒有終點的線 */
  .searchbar input { max-width: 520px; }
}

/* ---------- 大螢幕 ---------- */
@media (min-width: 1500px) {
  .split { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  #view > .hero, .split-main > .hero { height: min(48vh, 460px); }
  #view > .hero.small, .split-main > .hero.small { height: min(36vh, 320px); }
}

/* ============================================================
   今日分岔點
   ------------------------------------------------------------
   分岔點是「排不下、留到現場再決定」的取捨，所以不是條列文字，而是畫成一個
   節點分出數條路徑，而且可以點：選中的那條亮起來、其餘淡出，再點一次退回
   未決定。選擇存在 localStorage，人在現場點完不會被重新整理洗掉。

   連接線全部用 ::before（主幹）與 ::after（岔出去的支線）畫，沒有額外節點：
     手機   主幹在左側直下，每張卡片橫向岔出去
     桌機   主幹置中往下，再橫向拉成一條軌，各路徑由軌往下接
   最後一段主幹要收在支線的位置，否則會多出一截穿過最後一張卡片。
   ============================================================ */

.fork { padding: 12px 0 2px; }
.fork + .fork {
  margin-top: 12px; padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--on-surface-variant) 14%, transparent);
}

.fork-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.fork-at { font-weight: 700; color: var(--primary); font-size: .85rem; }
.fork-title { font-weight: 700; }

/* 從標題落下、接到主幹頂端的那一小段 */
.fork-stem {
  width: 2px; height: 12px; margin-left: 8px;
  background: var(--surface-variant);
}

.fork-paths { display: grid; gap: 8px; }

.fork-opt {
  position: relative; margin-left: 20px;   /* 讓出左邊的主幹 */
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px; align-items: start; text-align: left;
  padding: 11px 13px; border-radius: 14px;
  border: 1.5px solid var(--surface-variant); background: var(--surface);
  transition: opacity .18s ease, border-color .18s ease,
              background-color .18s ease, box-shadow .18s ease;
}
.fork-opt:active { transform: scale(.99); }
.fork-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 主幹：每張卡片自己畫一段，往下多長出 gap 的高度才接得起來 */
.fork-opt::before {
  content: ""; position: absolute; left: -12px; top: 0; bottom: -8px;
  width: 2px; background: var(--surface-variant);
}
/* 最後一段收在支線的高度，不要穿過整張卡片 */
.fork-opt:last-child::before { bottom: auto; height: 22px; }
/* 支線：主幹橫過來接到卡片左緣，高度對齊代號徽章的中心 */
.fork-opt::after {
  content: ""; position: absolute; left: -12px; top: 22px;
  width: 12px; height: 2px; background: var(--surface-variant);
}

.fork-key {
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--surface-variant); color: var(--on-surface-variant);
  font-size: .76rem; font-weight: 700;
}
.fork-body { font-size: .86rem; line-height: 1.55; }
.fork-lead { display: block; font-weight: 700; color: var(--on-surface); margin-bottom: 3px; }
.fork-text { display: block; }
.fork-tick { display: none; width: 18px; height: 18px; fill: var(--primary); }

/* 選定的路徑 */
.fork-opt[aria-checked="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: var(--shadow);
}
.fork-opt[aria-checked="true"] .fork-key { background: var(--primary); color: var(--on-primary); }
.fork-opt[aria-checked="true"] .fork-tick { display: block; }
.fork-opt[aria-checked="true"]::before,
.fork-opt[aria-checked="true"]::after { background: var(--primary); }

/* 已經決定之後，其餘路徑淡出但仍可回頭改。淡到還讀得完，因為當天很可能
   要再比一次才反悔。 */
.fork-paths[data-decided="yes"] .fork-opt[aria-checked="false"] { opacity: .55; }
.fork-paths[data-decided="yes"] .fork-opt[aria-checked="false"]:hover { opacity: .85; }

.fork-foot {
  display: flex; align-items: center; gap: 10px;
  margin: 9px 0 0 20px; min-height: 24px;
}
.fork-status { font-size: .76rem; color: var(--on-surface-variant); }
.fork-reset {
  border: 0; background: none; padding: 3px 9px; border-radius: 9px;
  font-size: .76rem; font-weight: 600; color: var(--primary);
}
.fork-reset:hover { background: var(--surface-variant); }

/* ---------- 桌機：主幹置中，路徑並排比較 ---------- */
@media (min-width: 1024px) {
  .fork-head { justify-content: center; }
  .fork-stem { margin: 0 auto; height: 14px; }

  .fork-h {
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: 10px; padding-top: 16px;
  }
  .fork-h > .fork-opt { margin-left: 0; }

  /* 由橫軌往下接到每張卡片 */
  .fork-h > .fork-opt::before,
  .fork-h > .fork-opt:last-child::before {
    left: 50%; top: -16px; bottom: auto; height: 16px; margin-left: -1px;
  }
  /* 橫軌：頭尾兩張各畫一半，中間的畫滿，合起來剛好收在頭尾的中心 */
  .fork-h > .fork-opt::after {
    left: 0; right: 0; top: -16px; width: auto;
  }
  .fork-h > .fork-opt:first-child::after { left: 50%; }
  .fork-h > .fork-opt:last-child::after { right: 50%; }
  /* 橫軌是共用的，選定時只點亮那條往下的落線；整段軌跟著變色會看起來像是
     某一段軌屬於某一條路徑。 */
  .fork-h > .fork-opt[aria-checked="true"]::after { background: var(--surface-variant); }

  .fork-foot { margin-left: 0; justify-content: center; }
}