/* 配色與造型：紅色機身、粗黑描邊、奶油色卡片、黃色重點。 */
:root {
  --red: #e3350d;
  --red-dark: #a62008;
  --yellow: #ffcb05;
  --yellow-dark: #c79a00;
  --blue: #2f6fbd;
  --blue-dark: #1d4c8a;
  --ink: #1f2430;
  --paper: #fffdf2;
  --muted: #666b78;
  --green: #3fae4a;
  --topbar-h: 56px;
  --panel-w: 380px;
  --font: "Huninn", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --pixel: "DotGothic16", "Huninn", "Microsoft JhengHei", monospace;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--red);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

button, input { font-family: inherit; }
button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ---------- 頂列 ---------- */

.topbar {
  flex: none;
  position: relative;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 10px;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  background: var(--red);
  border-bottom: 4px solid var(--ink);
  box-shadow: inset 0 -6px 0 var(--red-dark);
  color: #fff;
}

.topbar h1 {
  min-width: 0;
  margin: 0;
  color: var(--yellow);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 2px;
  white-space: nowrap;
  -webkit-text-stroke: 5px var(--blue-dark);
  paint-order: stroke fill;
}

.tagline {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 10px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: #24301f;
  box-shadow: inset 0 0 0 2px #3c4d33;
  color: #a6f08a;
  font-family: var(--pixel);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.clock-mode {
  padding: 0 5px;
  border-radius: 4px;
  background: #a6f08a;
  color: #24301f;
  font-size: 11px;
}

.clock.sim { color: var(--yellow); }
.clock.sim .clock-mode { background: var(--yellow); }

/* 手機自己就有日期時間，即時模式不必再顯示；時光機模式才出現，順便當「回到即時」的按鈕。 */
.clock:not(.sim) { display: none; }

/* 列車車頭圖示：地圖上的列車、班次卡、提示與載入畫面共用 */
.loco {
  flex: none;
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 26l-3 4M22 26l3 4' stroke='%231f2430' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='4.5' y='2.5' width='23' height='23' rx='6' fill='%23e3350d' stroke='%231f2430' stroke-width='3'/%3E%3Crect x='9' y='7' width='14' height='7' rx='2' fill='%23bfe3f2' stroke='%231f2430' stroke-width='2'/%3E%3Ccircle cx='11' cy='20' r='2' fill='%23fff' stroke='%231f2430' stroke-width='1.5'/%3E%3Ccircle cx='21' cy='20' r='2' fill='%23fff' stroke='%231f2430' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 版面 ---------- */

.layout {
  flex: 1;
  position: relative;
  min-height: 0;
}

.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.map {
  position: absolute;
  inset: 0;
  background: #bfe3f2;
}

.panel {
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 56%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle, rgb(0 0 0 / 9%) 1.5px, transparent 2px) 0 0 / 12px 12px,
    var(--red);
  border-top: 4px solid var(--ink);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -6px 18px rgb(0 0 0 / 25%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.panel > * { flex: none; }

/* 收合後只留把手，把地圖整個讓出來 */
.panel.collapsed > :not(.panel-handle) { display: none; }

.panel-handle {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  min-height: 44px;
  margin-bottom: -8px;
  padding: 6px 0 4px;
  border: 0;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.panel-handle::before {
  content: "";
  display: block;
  width: 56px;
  height: 6px;
  margin: 0 auto 4px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #fff;
}

.panel-handle::after { content: "▼ 隱藏面板，看地圖"; }
.panel.collapsed .panel-handle { margin-bottom: 0; }
.panel.collapsed .panel-handle::after { content: "▲ 顯示列車資訊"; }

/* 平板與橫放的手機：面板放左邊 */
@media (min-width: 720px), (orientation: landscape) and (min-width: 560px) {
  .stage { left: var(--panel-w); }

  .panel {
    top: 0;
    right: auto;
    width: var(--panel-w);
    max-height: none;
    padding: 12px calc(12px + 4px) 12px 12px;
    border-top: 0;
    border-right: 4px solid var(--ink);
    border-radius: 0;
    box-shadow: inset -6px 0 0 var(--red-dark);
  }

  .panel-handle { display: none; }
  .panel.collapsed > :not(.panel-handle) { display: revert; }
  .clock:not(.sim) { display: flex; }
}

@media (min-width: 720px) and (max-width: 899px), (orientation: landscape) and (max-width: 719px) {
  :root { --panel-w: 320px; }
}

/* 窄螢幕上時光機的時鐘會擠到小標 */
@media (max-width: 400px) {
  .topbar:has(.clock.sim) .tagline { display: none; }
}

@media (max-height: 480px) {
  :root { --topbar-h: 44px; }
}

/* ---------- 按鈕 ---------- */

.btn {
  flex: none;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 0 var(--ink);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .05s, box-shadow .05s;
}

.btn:active { transform: translateY(4px); box-shadow: none; }
.btn-live.on { background: var(--yellow); }

.btn-small {
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  border-width: 2px;
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--ink);
  font-size: 12px;
}

.btn-small:active { transform: translateY(3px); }

.btn-wide {
  width: 100%;
  height: 50px;
  margin-top: 4px;
  background: var(--yellow);
  font-size: 15px;
}

/* ---------- 卡片共用 ---------- */

.spot, .summary, .card, .timemachine {
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--ink);
}

/* ---------- 拍攝點 ---------- */

.spot {
  padding: 0 12px 12px;
  overflow: hidden;
}

.spot-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin: 0 -12px 10px;
  padding: 5px 10px 5px 12px;
  background: var(--blue);
  border-bottom: 3px solid var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
}

.spot-title > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.spot-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.spot-where, .spot-hint, .spot-none {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.spot-where { margin-top: 0; }

/* 安全提醒：黃黑警示邊，和平交道標誌同一套配色 */
.spot-safety {
  margin: 10px 0 0;
  padding: 7px 10px;
  border: 2px solid var(--ink);
  border-left-width: 10px;
  border-radius: 8px;
  background: var(--yellow);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.spot-none {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.pass {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px 7px 7px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

/* 倒數：像車站的 LED 顯示 */
.pass-count {
  flex: none;
  min-width: 96px;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--ink);
  box-shadow: inset 0 0 0 2px #454c5e;
  color: var(--yellow);
  font-family: var(--pixel);
  font-size: 19px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.pass-info { font-weight: 700; line-height: 1.35; }

.pass-info small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.pass-info .pass-late { color: var(--red); font-weight: 700; }
.pass-info .pass-late[hidden] { display: none; }

.pass.past { opacity: .55; }
.pass.past .pass-count { background: #8c8f99; box-shadow: none; color: #fff; font-size: 14px; }
.pass.soon { background: #fff3c2; border-color: var(--red); box-shadow: 0 0 0 3px var(--yellow); }
.pass.soon .pass-count { background: var(--red); box-shadow: none; color: #fff; animation: blink 1s steps(2) infinite; }

@keyframes blink {
  50% { opacity: .6; }
}

.spot-later { margin-top: 8px; }

.spot-later summary, .timemachine > summary {
  padding: 6px 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.later {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin-top: 5px;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: #fff;
  color: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.later b { flex: 1; min-width: 0; font-weight: 700; }
.later span { margin-left: auto; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- 對話框（目前狀況） ---------- */

.summary {
  position: relative;
  padding: 12px 34px 12px 14px;
  border-width: 4px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 6px var(--blue), 0 4px 0 var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.summary small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

/* 對話框右下角的「繼續」箭頭 */
.summary::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 12px;
  border: 7px solid transparent;
  border-bottom-width: 0;
  border-top: 9px solid var(--red);
  animation: nudge .8s steps(2) infinite;
}

@keyframes nudge {
  50% { transform: translateY(3px); }
}

/* ---------- 班次卡 ---------- */

.cards {
  display: grid;
  gap: 10px;
}

.card {
  padding: 10px 12px;
  overflow: hidden;
}

.card:empty { display: none; }

.card-main {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
}

.card.selected { background: #fff3c2; }
.card.is-done { filter: grayscale(.6); opacity: .75; }

.card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.card-head .loco { width: 24px; height: 24px; }
.card-no { margin-right: 2px; font-family: var(--pixel); font-size: 19px; white-space: nowrap; }
.card-no small { font-family: var(--font); font-size: 13px; }

/* 屬性標籤 */
.chip {
  padding: 2px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  white-space: nowrap;
}

.chip.type-fast { background: var(--yellow); }
.chip.type-local { background: #7ac74c; }
.chip.line-mt { background: #b6a136; color: #fff; }
.chip.line-sea { background: #6390f0; color: #fff; }

.chip-late { background: var(--red); color: #fff; }
.chip-status { margin-left: auto; }
.chip-status.running { background: var(--green); color: #fff; }
.chip-status.boarding, .chip-status.dwell { background: var(--yellow); }
.chip-status.before { background: #e3e8f3; }
.chip-status.done { background: #cfcfcf; }

.card-route {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
}

.card-route time {
  color: var(--muted);
  font-family: var(--pixel);
  font-size: 13px;
  font-weight: 400;
}

.card-route .arrow { color: var(--red); }

/* 進度條：做成 HP 條 */
.progress {
  height: 14px;
  margin-top: 8px;
  padding: 2px;
  border-radius: 999px;
  background: var(--ink);
}

.progress i {
  display: block;
  min-width: 6px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(to bottom, #9cf07a, #46c24f 55%, #2f9a3b);
}

.card-detail {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* ---------- 各站時刻 ---------- */

.stops {
  margin: 10px 0 0;
  padding: 8px 0 0;
  border-top: 3px dashed var(--ink);
  list-style: none;
}

.stop {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 6px 4px 6px 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.stop time {
  flex: none;
  width: 124px;
  padding-right: 22px;
  font-family: var(--pixel);
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

/* 時間與站名之間的路線與站點 */
.stop::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 111px;
  width: 4px;
  background: var(--ink);
}

.stop::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 106px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
}

.stops li:first-child .stop::before { top: 50%; }
.stops li:last-child .stop::before { bottom: 50%; }

.stop.is-pass {
  padding-block: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.stop.is-pass::after {
  left: 109px;
  width: 8px;
  height: 8px;
  border-width: 2px;
  background: #bbb;
}

.stop small { margin-left: 6px; font-size: 11px; }
.stop.past { opacity: .45; }
.stop.next { color: var(--red); }
.stop.next::after { background: var(--yellow); }

/* ---------- 時光機 ---------- */

.timemachine { padding: 4px 12px; }
.timemachine[open] { padding-bottom: 12px; }

.controls {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.datebar, .timebar {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 日期框：原生的日期欄位後面接星期幾。外框畫在這一層，兩者看起來才是同一格。 */
.datebox {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 8px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}

.datebox:focus-within {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* 右邊的月曆圖示（原生的那一顆被下面攤平成整格的點擊範圍了） */
.datebox::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2430' stroke-width='2.2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

#datePick {
  flex: 0 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

/* 原生的月曆按鈕攤成透明的一整格：點日期框任何地方都會開日期選單 */
#datePick::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#dateWeekday { flex: none; white-space: nowrap; }

/* 滑桿代表一天中的時間（00:00–23:59），下方標籤顯示目前時刻 */
.slider-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-bottom: 16px;
}

#timeSlider {
  display: block;
  width: 100%;
  height: 36px;
  margin: 0;
  accent-color: var(--red);
}

.time-label {
  position: absolute;
  bottom: 0;
  /* 圓點寬約 20px，標籤中心對齊圓點中心 */
  left: calc(var(--p, 0) * (100% - 20px) + 10px);
  padding: 0 6px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--pixel);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.disclaimer {
  margin: 2px 4px 4px;
  color: #ffe9e2;
  font-size: 11px;
  line-height: 1.6;
}

/* ---------- 頁尾：造訪次數、作者、聯絡 ---------- */

.credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 4px 6px;
  color: #ffe9e2;
  font-size: 11px;
  line-height: 1.5;
}

.credits a {
  color: #fff;
  font-weight: 700;
  text-underline-offset: 3px;
}

.credits .mail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
}

.credits .social {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.visits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
}

.visits[hidden] { display: none; }

.visits::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.visits b { font-family: var(--pixel); font-size: 13px; font-weight: 400; }

/* ---------- 地圖上的圖示 ---------- */

.train-pin {
  position: relative;
  width: 44px;
  height: 44px;
}

.train-pin .loco {
  position: absolute;
  inset: 5px;
  width: auto;
  height: auto;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 45%));
}

/* 行駛中：外圈擴散的光環 */
.train-pin.running::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 3px solid var(--yellow);
  border-radius: 50%;
  animation: ring 1.6s ease-out infinite;
}

.train-pin.running .loco { animation: bob 1.2s ease-in-out infinite; }
.train-pin.idle .loco { filter: grayscale(.7) drop-shadow(0 2px 3px rgb(0 0 0 / 45%)); }

.train-pin .heading {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.train-pin .heading::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top-width: 0;
  border-bottom: 12px solid var(--ink);
}

.train-pin.idle .heading { display: none; }

.train-pin .tag {
  position: absolute;
  top: 100%;
  left: 50%;
  padding: 0 7px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--yellow);
  font-family: var(--pixel);
  font-size: 12px;
  white-space: nowrap;
  transform: translate(-50%, -2px);
}

@keyframes bob {
  50% { transform: translateY(-3px); }
}

@keyframes ring {
  from { transform: scale(.8); opacity: .9; }
  to { transform: scale(1.9); opacity: 0; }
}

.spot-pin {
  width: 30px;
  height: 30px;
  border: 3px solid var(--ink);
  border-radius: 50% 50% 50% 0;
  background: var(--blue);
  box-shadow: 0 2px 5px rgb(0 0 0 / 40%);
  transform: rotate(-45deg);
}

.spot-pin::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
}

.crossing-pin {
  position: relative;
  width: 16px;
  height: 16px;
  margin: 3px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--yellow);
  box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
  transform: rotate(45deg);
  cursor: pointer;
}

/* 菱形裡的 X（平交道警示標誌） */
.crossing-pin::before,
.crossing-pin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  margin: -1px 0 0 -5px;
  background: var(--ink);
}

.crossing-pin::after { transform: rotate(90deg); }

.locate-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 4px 0 var(--ink);
  color: var(--ink);
  cursor: pointer;
}

.locate-btn:active { transform: translateY(4px); box-shadow: none; }

/* Leaflet 內建元件換成同一套描邊 */
.leaflet-container { font: inherit; }

.leaflet-bar {
  border: 3px solid var(--ink) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 0 var(--ink) !important;
  overflow: hidden;
}

.leaflet-bar a {
  width: 42px !important;
  height: 42px !important;
  color: var(--ink) !important;
  font-size: 22px !important;
  line-height: 42px !important;
}

.leaflet-bar a:first-child { border-bottom: 3px solid var(--ink) !important; }

.leaflet-popup-content-wrapper {
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--ink);
}

.leaflet-popup-content { margin: 10px 12px; }

.leaflet-tooltip {
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: none;
  color: var(--ink);
  font-weight: 700;
}

.pop-title {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
}

.pop-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  font-size: 12px;
}

.pop-row b { font-family: var(--pixel); font-weight: 400; }

/* ---------- 遭遇提示 ---------- */

.encounter {
  position: absolute;
  z-index: 900;
  top: 12px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 130px);
  padding: 8px 14px 8px 10px;
  border: 4px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 6px var(--red), 0 4px 0 var(--ink);
  transform: translateX(-50%);
  animation: drop .45s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: none;
}

.encounter[hidden] { display: none; }
.encounter .loco { animation: wobble .9s ease-in-out infinite; }
.encounter b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.encounter small { display: block; font-family: var(--pixel); font-size: 13px; }
.encounter.now { background: var(--yellow); box-shadow: inset 0 0 0 3px var(--yellow), inset 0 0 0 6px var(--ink), 0 4px 0 var(--ink); }

@media (max-width: 480px) {
  .encounter { left: 10px; max-width: calc(100% - 78px); transform: none; animation-name: drop-left; }
}

/* 遭遇瞬間的畫面閃爍 */
.flash {
  position: absolute;
  z-index: 890;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.flash.go { animation: flash .7s steps(1) 1; }

@keyframes flash {
  0%, 40% { opacity: .85; }
  20%, 60% { opacity: 0; }
}

@keyframes drop {
  from { transform: translate(-50%, -140%); }
}

@keyframes drop-left {
  from { transform: translateY(-140%); }
}

@keyframes wobble {
  25% { transform: rotate(-18deg); }
  75% { transform: rotate(18deg); }
}

/* ---------- 載入畫面 ---------- */

.loading {
  position: absolute;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: var(--red);
  color: #fff;
  font-size: 16px;
}

.loading .loco { width: 64px; height: 64px; animation: wobble .9s ease-in-out infinite; }
.loading p { margin: 0; padding: 0 20px; text-align: center; }

/* ---------- 桌機與平板：字體再小一級 ---------- */
/* 免責聲明與版權那一段維持原本大小，已經夠小了。 */

@media (min-width: 720px), (orientation: landscape) and (min-width: 560px) {
  /* 通用的放前面，後面幾行才蓋得過去 */
  .panel, .btn, .spot-none, .pass, .summary, .stop, .pass.past .pass-count { font-size: 13px; }
  .pass-count, .card-no { font-size: 18px; }
  .btn-wide, .spot-title, .card-route { font-size: 14px; }
  .btn-small, .spot-where, .spot-hint, .spot-safety, .summary small, .card-detail { font-size: 11px; }
  .clock, .spot-later summary, .timemachine > summary, .later, .card-no small, .card-route time, .time-label { font-size: 12px; }
  .stop.is-pass { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}