/* ============================================================
   雪隧烏龜王 — 雪山隧道即時路況看板

   版面以 1672×941 為設計畫布（尺寸全部量自 assets/img/ui-reference.png），
   整張畫布用 --u 等比縮放塞進視窗，所以任何解析度都跟參考圖一模一樣。
   1rem = 10 設計 px，寫尺寸時直接把量到的 px 除以 10。
   ============================================================ */

:root{
  --u:min(100vw / 1672, 100vh / 941);

  --navy:#0c1b2f;
  --ink:#22384f;
  --ink-soft:#4d6480;

  --green-dk:#357d1c;
  --green-rim:#c3e295;
  --green-panel:#e8f1d6;
  --green-box:#f7f8e9;

  --blue-dk:#1c5698;
  --blue-rim:#aed4f5;
  --blue-panel:#e3eefb;
  --blue-box:#f5fbff;

  --gold:#ffcf3f;
  --alert:#e0492a;
  --frame:#fbfbf6;
  --hair:rgba(120,146,150,.3);

  --sh-card:0 1.4rem 2.6rem rgba(4,14,28,.42);
}

@supports (height:100dvh){
  :root{--u:min(100vw / 1672, 100dvh / 941)}
}

*{box-sizing:border-box}

html{font-size:calc(10 * var(--u))}

body{
  margin:0;
  min-height:100vh;
  background:var(--navy);
  color:var(--ink);
  font-family:"Noto Sans TC","Microsoft JhengHei","PingFang TC",system-ui,sans-serif;
  font-weight:700;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;display:inline-block;flex:none;vertical-align:-.14em}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}

/* ============================================================
   場景：背景鋪滿視窗，內容置中在 1672×941 畫布上
   ============================================================ */

.scene{
  position:relative;
  width:100vw;height:100vh;
  display:grid;place-items:center;
  overflow:hidden;
}

.bg-layer{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(28,60,102,.22), rgba(6,14,26,.86) 78%),
    url("../assets/snow-tunnel-turtle/tunnel-bg.webp") center 42%/cover no-repeat,
    linear-gradient(#0b1b31,#081426 55%,#0c1b2f);
  filter:brightness(.74) saturate(.92) contrast(1.05);
  transition:filter .35s ease, opacity .35s ease;
}
.bg-layer.weather-rain{filter:brightness(.66) saturate(.9) contrast(1.08)}
.bg-layer.weather-cloud{filter:brightness(.72) saturate(.84) contrast(1.02)}
.bg-layer.weather-sun{filter:brightness(.84) saturate(1.08) contrast(1.03)}
.bg-layer.weather-storm{filter:brightness(.56) saturate(.92) contrast(1.12)}
.bg-layer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(8,20,38,.36),rgba(6,14,28,.1) 38%,rgba(6,14,28,.52));
}

.stage{
  position:relative;z-index:1;
  width:167.2rem;height:94.1rem;
}

.topbar{display:contents}

/* ============================================================
   場景裝飾
   ============================================================ */

.deco{position:absolute;inset:0;z-index:0;pointer-events:none}

/* 天花板燈條：沿隧道透視散落，大小間距都不規則 */
.ceil{position:absolute;top:-1rem;width:44rem;height:46rem}
.ceil-l{left:-1rem}
.ceil-r{right:-1rem;transform:scaleX(-1)}
.ceil i{
  position:absolute;display:block;border-radius:.5rem;
  background:linear-gradient(#fffbe6,#ffdc74 52%,#f0a615);
  box-shadow:0 0 2.6rem .9rem rgba(255,197,73,.45);
}
.ceil i:nth-child(1){left:1rem;top:1rem;width:9.6rem;height:1.9rem;transform:rotate(-19deg)}
.ceil i:nth-child(2){left:7rem;top:5.6rem;width:8.2rem;height:1.7rem;transform:rotate(-24deg)}
.ceil i:nth-child(3){left:.4rem;top:8.4rem;width:7.4rem;height:1.6rem;transform:rotate(-16deg)}
.ceil i:nth-child(4){left:12rem;top:1.4rem;width:7rem;height:1.6rem;transform:rotate(-30deg);opacity:.92}
.ceil i:nth-child(5){left:6rem;top:13rem;width:6.2rem;height:1.4rem;transform:rotate(-21deg);opacity:.88}
.ceil i:nth-child(6){left:0;top:17rem;width:5.6rem;height:1.3rem;transform:rotate(-13deg);opacity:.8}
.ceil i:nth-child(7){left:11rem;top:9.6rem;width:5.2rem;height:1.3rem;transform:rotate(-27deg);opacity:.72}
.ceil i:nth-child(8){left:4.6rem;top:21rem;width:4.4rem;height:1.1rem;transform:rotate(-18deg);opacity:.6}
.ceil i:nth-child(9){left:14rem;top:16rem;width:3.8rem;height:1rem;transform:rotate(-25deg);opacity:.5}

.wall-strip{
  position:absolute;top:36rem;height:28rem;width:1.4rem;border-radius:.7rem;
  background:linear-gradient(rgba(255,214,110,.04),rgba(255,206,84,.5),rgba(255,214,110,.04));
  box-shadow:0 0 2.6rem .8rem rgba(255,190,60,.2);
}
.wall-l{left:.4rem}
.wall-r{right:.4rem}

/* 路牌 */
.road-sign{
  position:absolute;top:34rem;width:7rem;padding:1rem .4rem 1.2rem;
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  border-radius:1.1rem;border:.4rem solid #eef1ec;
  color:#fff;font-size:2.1rem;font-weight:900;letter-spacing:.2rem;
  box-shadow:0 1rem 1.6rem rgba(0,0,0,.5), inset 0 0 0 .2rem rgba(255,255,255,.2);
  text-shadow:0 .2rem .3rem rgba(0,0,0,.4);
}
.road-sign .ic{width:1.5em;height:1.5em;color:#fff;filter:drop-shadow(0 .2rem .2rem rgba(0,0,0,.35))}
.road-sign::after{
  content:"";position:absolute;top:100%;width:.9rem;height:5.6rem;
  background:linear-gradient(90deg,#54606c,#93a0ac 45%,#465260);
  border-radius:0 0 .3rem .3rem;
}
.sign-l{left:2rem;background:linear-gradient(#2e7d4a,#1c5c33)}
.sign-r{right:2rem;background:linear-gradient(#2f5fa6,#1d4278)}

/* 草叢 + 三角錐 */
.bush{position:absolute;top:54rem;display:flex;align-items:flex-end}
.bush-l{left:1rem}
.bush-r{right:1rem}
.bush .grass{width:4.6rem;filter:drop-shadow(0 .6rem .8rem rgba(0,0,0,.4))}
.bush .g2{width:3.2rem;margin:0 0 -.2rem -.6rem}
.bush .turtle{width:4rem;margin-left:-.4rem;filter:drop-shadow(0 .6rem .8rem rgba(0,0,0,.4))}

.cone{position:absolute;top:69rem;width:5.4rem;filter:drop-shadow(0 .8rem 1rem rgba(0,0,0,.45))}
.cone-l{left:7.4rem}
.cone-r{right:7.4rem}

/* 底部路面虛線 */
.road{
  position:absolute;left:0;right:0;bottom:0;height:8rem;
  background:linear-gradient(rgba(9,18,32,0),rgba(9,18,32,.5));
  display:flex;align-items:center;justify-content:center;gap:9rem;
  overflow:hidden;
}
.road span{
  width:12.4rem;height:1.2rem;border-radius:.3rem;
  background:linear-gradient(#ffe89f,#e0a413);
  opacity:.72;transform:skewX(-24deg);
}

/* ============================================================
   左上：更新時間 + 南下 / 北上
   ============================================================ */

.topbar-left{position:absolute;left:6.9rem;top:3rem;display:flex;flex-direction:column;gap:2.7rem}

.pill{
  display:flex;align-items:center;gap:1.3rem;
  height:6.5rem;padding:0 2.2rem;border-radius:3.3rem;
  background:linear-gradient(rgba(38,60,94,.95),rgba(20,36,62,.95));
  color:#eef5ff;
  border:.3rem solid rgba(196,214,238,.45);
  box-shadow:inset 0 .2rem 0 rgba(255,255,255,.16), inset 0 0 0 .2rem rgba(10,20,36,.5),
             0 1rem 2.2rem rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
}
.pill .ic-lg{width:3.2rem;height:3.2rem}
.pill-txt{line-height:1.3;text-align:left}
.pill-txt small{display:block;font-size:1.6rem;opacity:.85;font-weight:600}
.pill-txt strong{display:block;font-size:1.9rem;letter-spacing:.05rem;white-space:nowrap}

.dir-tabs{display:flex;gap:2.1rem;padding-left:.6rem}
.dtab{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:4.8rem;padding:0 1.2rem 0 2.7rem;border-radius:1.6rem;
  font-size:2.7rem;font-weight:900;color:#fff;letter-spacing:.1rem;
  background:linear-gradient(#7a8a9d,#4c5c72);
  border:.3rem solid rgba(214,228,244,.52);
  box-shadow:inset 0 .2rem 0 rgba(255,255,255,.3), 0 .5rem 0 rgba(0,0,0,.22), 0 1rem 1.6rem rgba(0,0,0,.35);
  text-shadow:0 .2rem .3rem rgba(0,0,0,.35);
  transition:transform .12s, filter .12s;
}
.dtab .ic{width:2.5rem;height:2.5rem;color:#fff}
.dtab:hover{transform:translateY(-.1rem);filter:brightness(1.08)}
.dtab.active{background:linear-gradient(#7ec93f,#357d1c);border-color:rgba(214,240,178,.8)}

.live-pill{
  display:grid;grid-template-columns:1.5rem auto;grid-template-rows:auto auto;column-gap:.9rem;
  width:28rem;padding:1rem 1.5rem;border-radius:1.6rem;
  color:#eef5ff;background:linear-gradient(rgba(38,60,94,.93),rgba(20,36,62,.93));
  border:.25rem solid rgba(196,214,238,.42);
  box-shadow:inset 0 .2rem 0 rgba(255,255,255,.14),0 .6rem 1.3rem rgba(0,0,0,.34);
}
.live-pill span{
  grid-row:1/3;align-self:center;width:1.3rem;height:1.3rem;border-radius:50%;
  background:#8f9fb0;box-shadow:0 0 0 .4rem rgba(255,255,255,.12);
}
.live-pill strong{font-size:1.6rem;line-height:1.2;white-space:nowrap}
.live-pill small{font-size:1.25rem;font-weight:700;opacity:.8;line-height:1.25;white-space:nowrap}
.live-pill[data-state="live"] span{background:#63d044;box-shadow:0 0 1.1rem rgba(99,208,68,.8)}
.live-pill[data-state="recent"] span{background:#ffcf3f;box-shadow:0 0 1.1rem rgba(255,207,63,.7)}
.live-pill[data-state="stale"] span,
.live-pill[data-state="offline"] span{background:#e0492a;box-shadow:0 0 1.1rem rgba(224,73,42,.7)}

/* ============================================================
   右上：天氣
   ============================================================ */

.topbar-right{position:absolute;right:10.7rem;top:3rem;display:flex;flex-direction:column;align-items:flex-end;gap:1.1rem}
.weather{width:28rem;padding:0 1.4rem;height:6.5rem;overflow:hidden}
.weather .ic-lg{width:4.4rem;height:4.4rem}
.weather .pill-txt{min-width:0;flex:1}
.weather .pill-txt strong{font-size:2.1rem;overflow:hidden;text-overflow:ellipsis}
.weather .pill-txt strong b{font-weight:900;margin-left:.5rem}
.weather .pill-txt small{font-size:1.45rem;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weather .chev{width:2.4rem;height:2.4rem;margin-left:.8rem;opacity:.85}
.weather:hover{filter:brightness(1.1)}
.weather.loading{opacity:.82}

/* ============================================================
   標題
   ============================================================ */

.brand{position:absolute;left:38.5rem;top:.8rem;width:95rem;z-index:1}
.mascot{
  position:absolute;left:0;top:0;width:32.5rem;
  filter:drop-shadow(0 1.6rem 1.6rem rgba(0,0,0,.45));
}
.brand-copy{position:relative;z-index:1;padding-left:26.5rem;padding-top:1.2rem}

.title-row{position:relative;z-index:0;display:inline-flex;align-items:flex-start}
/* 標題後面的暗色暈影，讓字在隧道背景上浮起來 */
.title-row::before{
  content:"";position:absolute;z-index:-2;
  left:-3rem;right:-3rem;top:.5rem;bottom:.5rem;
  background:radial-gradient(ellipse at 50% 55%, rgba(9,26,18,.62), rgba(9,26,18,.28) 55%, transparent 76%);
  filter:blur(1.4rem);
}
.title{
  position:relative;margin:0;white-space:nowrap;
  font-size:9rem;line-height:1.05;letter-spacing:.19em;font-weight:900;
  text-indent:.1em;
}
.t-white,.t-gold{
  position:relative;display:inline-block;
  -webkit-text-stroke:.1em #3d7f40;
  paint-order:stroke fill;
}
.t-white{color:#fff}
.t-gold{color:var(--gold)}
/* 墊在後面、更粗的白描邊 → 做出「白＋綠」雙層外框與立體投影 */
.t-white::before,.t-gold::before{
  content:attr(data-t);
  position:absolute;left:0;top:0;z-index:-1;
  -webkit-text-stroke:.19em #ffffff;
  paint-order:stroke fill;color:#fff;
  filter:drop-shadow(0 .07em 0 #1d4224) drop-shadow(0 .12em .18em rgba(0,0,0,.6));
}
.crown{
  position:absolute;right:1.2rem;top:-.2rem;
  width:6rem;height:4rem;
  filter:drop-shadow(0 .4rem .5rem rgba(0,0,0,.45));
  transform:rotate(9deg);
}
.title-turtle{
  width:5.1rem;align-self:flex-end;margin:0 0 1.2rem -.6rem;
  filter:drop-shadow(0 .5rem .6rem rgba(0,0,0,.45));
}

.spark{position:absolute;color:var(--gold);filter:drop-shadow(0 0 .7rem rgba(255,214,90,.8))}
.spark.s1{width:2.8rem;height:2.8rem;left:-3.2rem;top:2.2rem}
.spark.s2{width:2rem;height:2rem;left:2.6rem;top:-1.2rem;opacity:.9}

.subtitle{
  display:inline-flex;align-items:center;gap:1.3rem;
  margin:1.8rem 0 0 14rem;height:4.2rem;padding:0 2.6rem;border-radius:2.1rem;
  background:linear-gradient(#4a8ed6,#1c5599);
  color:#fff;font-size:2.4rem;font-weight:900;letter-spacing:.15rem;white-space:nowrap;
  border:.3rem solid rgba(255,255,255,.42);
  box-shadow:inset 0 .2rem 0 rgba(255,255,255,.3), 0 .8rem 1.6rem rgba(0,0,0,.42);
}
.subtitle i{width:.8rem;height:.8rem;border-radius:.2rem;background:rgba(255,255,255,.9)}

/* ============================================================
   主看板三欄
   ============================================================ */

.board{
  position:absolute;left:10.4rem;top:23.7rem;width:146.4rem;height:44.7rem;z-index:2;
  display:grid;grid-template-columns:42.8rem 59.2rem 42.8rem;gap:.8rem;
}

/* ── 車道 ── */
.lane{position:relative}

.lane-btn{
  position:absolute;top:-.4rem;z-index:3;
  display:inline-flex;align-items:center;gap:2.3rem;
  height:4.8rem;padding:0 3.4rem;border-radius:2.6rem;
  color:#fff;font-size:3.5rem;font-weight:900;letter-spacing:.5rem;white-space:nowrap;
  text-shadow:0 .2rem .4rem rgba(0,0,0,.32);
  transition:transform .14s, filter .14s;
}
.lane-left .lane-btn{left:4rem}
.lane-right .lane-btn{right:4rem}
/* 外圈亮色粗框 + 白邊：參考圖的雙層立體膠囊 */
.lane-btn.green{
  background:linear-gradient(#8ed155,#3a8a22);
  box-shadow:0 0 0 1rem var(--green-rim), 0 0 0 1.3rem rgba(255,255,255,.55),
             inset 0 .3rem 0 rgba(255,255,255,.35), 0 1rem 2rem rgba(0,0,0,.42);
}
.lane-btn.blue{
  background:linear-gradient(#63aef2,#1a5eb4);
  box-shadow:0 0 0 1rem var(--blue-rim), 0 0 0 1.3rem rgba(255,255,255,.55),
             inset 0 .3rem 0 rgba(255,255,255,.35), 0 1rem 2rem rgba(0,0,0,.42);
}
.lane-btn:hover{transform:translateY(-.2rem);filter:brightness(1.06)}
.lane-btn:not(.active){filter:brightness(.95)}
.lane-btn.active{filter:saturate(1.1) brightness(1.05)}

/* ‹ 圓鈕比膠囊高，會凸出上下緣 —— 參考圖的細節 */
.lane-ic.circle{
  width:5.5rem;height:5.5rem;border-radius:50%;flex:none;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(#7cc245,#4d9427);
  box-shadow:inset 0 0 0 .45rem rgba(255,255,255,.9), 0 .2rem .5rem rgba(0,0,0,.3);
}
.lane-btn.blue .lane-ic.circle{background:linear-gradient(#5aa6ee,#2467bd)}
.lane-ic.circle .ic{width:2.6rem;height:2.6rem}
.lane-ic.turtle{width:5.2rem;flex:none;filter:drop-shadow(0 .2rem .3rem rgba(0,0,0,.3))}
.lane-name{padding-top:.2rem}

.lane-card{
  position:absolute;left:0;right:0;top:5.9rem;bottom:.2rem;
  border-radius:3rem;padding:2.4rem;
  border:.5rem solid var(--frame);
  box-shadow:var(--sh-card), inset 0 0 0 .3rem rgba(255,255,255,.7);
  display:flex;flex-direction:column;gap:1.4rem;
}
.green-card{background:linear-gradient(var(--green-panel),#dcebc6)}
.blue-card{background:linear-gradient(var(--blue-panel),#d3e5f9)}

.metric,.queue,.status{
  border-radius:2rem;
  box-shadow:0 .3rem .8rem rgba(20,44,72,.1), inset 0 0 0 .2rem rgba(255,255,255,.9);
  border:.2rem solid rgba(140,160,120,.24);
}
.green-card .metric,.green-card .queue,.green-card .status{background:var(--green-box)}
.blue-card .metric,.blue-card .queue,.blue-card .status{background:var(--blue-box);border-color:rgba(120,152,190,.26)}

/* 車速 */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;height:13.6rem;flex:none}
.metrics.single{grid-template-columns:1fr}
.metrics.single .metric-row{gap:1.4rem}
.metrics.single .m-ic{width:6.2rem}
/* .metrics 的高度是固定的 13.6rem（119px）。把 .spd-sub（隊尾／可信度）
   從 .metric-row 內移到數字下方之後，.metric 變成 134px，多出的 15px 會
   溢出容器、往下壓到「平均每分鐘通過」那個框，看起來像下面的框擠進車速區。
   .lane-card 已經排滿（只剩 3px），沒有空間可以讓 .metrics 長高。

   所以這 15px 全部從行高與間距回收，不動 57.9px 的主數字——時速是這個
   看板的主角，縮它是最後手段：
     · small「車速」 line-height 預設 ≈1.4 → 1.05   省 ~6px
     · .metric padding .6rem → .35rem               省 ~4px
     · .metric-row / .num span / .spd-sub 的 margin  各省 ~2px  */
.metric{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.35rem .4rem}
.metric small{display:block;font-size:2rem;line-height:1.05;color:#3d5670;font-weight:800;letter-spacing:.05rem}
.metric-row{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:.15rem}
.m-ic{width:5.3rem;height:auto;flex:none}
.m-ic.svg{width:6rem;height:3.8rem}
.num{display:flex;flex-direction:column;align-items:center;line-height:1}
/* 參考圖的數字是窄體，用 scaleX 壓一下寬度才對得上 */
.num b{
  display:inline-block;transform:scaleX(.84);
  font-size:6.6rem;line-height:.88;font-weight:900;letter-spacing:-.1rem;
  color:var(--green-dk);font-family:"Arial Rounded MT Bold",Arial,sans-serif;
}
.num b.navy{color:#1f3f76}
.blue-card .num b:not(.alert){color:#2668bb}
.num b.alert{color:var(--alert)}
.num span{display:block;font-size:2rem;color:#5b7086;font-weight:800;margin-top:.15rem}

/* 每分鐘通過輛 */
.queue{height:8rem;flex:none;min-width:0;padding:.4rem 1.3rem;display:flex;flex-direction:column;justify-content:center}
.queue>strong{display:block;font-size:2rem;line-height:1.15;color:#2b415c;margin-bottom:.2rem}
.queue-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-width:0}
/* 車越多，單台就縮小，整排車寬度固定約 23rem，「約 x.x km」才不會被擠出框外 */
.cars{display:flex;align-items:flex-end;gap:1.5rem;flex:none}
.cars img{width:4.2rem;height:auto}
.cars[data-n="5"]{gap:1rem}
.cars[data-n="5"] img{width:3.6rem}
.cars[data-n="6"]{gap:.6rem}
.cars[data-n="6"] img{width:3.1rem}
.cars img.dim{filter:grayscale(1) brightness(1.3);opacity:.4}
.cars.jam img:not(.dim){filter:hue-rotate(-24deg) saturate(1.5)}
.queue-len{display:flex;align-items:baseline;gap:.2rem;white-space:nowrap;flex:none;color:var(--green-dk)}
.queue-len em{font-style:normal;font-size:2.1rem;font-weight:800}
.queue-len b{
  display:inline-block;transform:scaleX(.84);
  font-size:4.2rem;font-weight:900;line-height:.92;letter-spacing:-.05rem;
  font-family:"Arial Rounded MT Bold",Arial,sans-serif;
}
.queue-len.alert{color:var(--alert)}

/* 車流狀態 */
.status{height:8.2rem;flex:none;display:flex;align-items:center;gap:1.2rem;padding:0 1.6rem}
.st-turtle{width:5.8rem;flex:none}
.st-txt{flex:1;line-height:1.32;min-width:0}
.st-txt strong{display:block;font-size:2.2rem;color:#2b415c}
/* DLQA 的說明句最長到 21 字（ANOMALY_EMPTY 的「鄰道車流正常卻此道無車，
   可能封閉或偵測異常」），在 1.7rem 下要 3 行 = 59px，加上標題 25px 就
   超過 .status 固定的 72px 框而擠出來。看板是固定畫布（.scene 會裁切），
   放大框會被切掉，所以縮字級並收緊行高，讓最長的句子也只佔 2 行。 */
.st-txt small{display:block;font-size:1.5rem;line-height:1.25;color:var(--ink-soft);font-weight:700}
/* 可信度低（樣本少）時淡化說明，取代原本在句尾補「（樣本少，可信度 N%）」，
   可信度的數字本身在時速下方的 .spd-conf 已經有了。 */
.st-txt small.weak{opacity:.7;font-style:italic}
.st-badge{width:4.6rem;height:auto;flex:none}
.st-badge.svg{height:4.6rem}

/* ── 中欄 ── */
.middle{position:relative;display:flex;flex-direction:column;align-items:center}

.choose-title{
  position:relative;display:inline-flex;align-items:center;gap:1.4rem;height:4.4rem;
  font-size:4rem;font-weight:900;letter-spacing:.2rem;
  color:#fff;text-shadow:0 .3rem 0 #1c3d5c, 0 .7rem 1.4rem rgba(0,0,0,.5);
}
.bangs{display:inline-flex;align-items:center;gap:.3rem}
.bang{width:1.5rem;height:3.4rem;filter:drop-shadow(0 .3rem .4rem rgba(0,0,0,.45))}
.bangs.bl .bang:first-child{transform:rotate(-20deg)}
.bangs.bl .bang:last-child{transform:rotate(-8deg)}
.bangs.br .bang:first-child{transform:rotate(8deg)}
.bangs.br .bang:last-child{transform:rotate(20deg)}
.spark.s3{position:absolute;right:-4.6rem;top:.2rem;width:2.9rem;height:2.9rem;color:var(--gold)}

/* 小烏龜黃車 */
.turtle-car{position:absolute;top:2.8rem;left:50%;transform:translateX(-50%);z-index:3;width:10.6rem;height:6.4rem}
.turtle-car .car-body{
  position:absolute;left:0;right:0;bottom:.9rem;height:3.6rem;
  border-radius:2.2rem 2.4rem 1.2rem 1.2rem;
  background:linear-gradient(#ffe071,#efa415);
  box-shadow:inset 0 0 0 .3rem rgba(255,255,255,.65), inset 0 -.6rem 1rem rgba(160,100,0,.25),
             0 .6rem 1.2rem rgba(0,0,0,.4);
}
.turtle-car .glass{
  position:absolute;left:1.6rem;top:.5rem;width:3.4rem;height:1.9rem;
  border-radius:1.4rem .8rem .5rem 1rem;
  background:linear-gradient(#eaf7ff,#b6dbf5);
  box-shadow:inset 0 0 0 .2rem rgba(255,255,255,.75);
}
.turtle-car .car-body::before,.turtle-car .car-body::after{
  content:"";position:absolute;bottom:-1rem;width:2.4rem;height:2.4rem;border-radius:50%;
  background:#332f2c;box-shadow:inset 0 0 0 .7rem #cdd3db, 0 .2rem .4rem rgba(0,0,0,.4);
}
.turtle-car .car-body::before{left:1rem}
.turtle-car .car-body::after{right:1rem}
.turtle-car img{position:absolute;left:50%;transform:translateX(-50%);bottom:3.1rem;width:4.6rem;filter:drop-shadow(0 .4rem .5rem rgba(0,0,0,.4))}

/* CCTV */
.cctv{
  position:absolute;left:0;right:0;top:7rem;bottom:0;
  border-radius:3rem;padding:2.2rem 2.2rem 1rem;
  background:linear-gradient(102deg,#6fbb3c 0%, #4fa457 32%, #2f79bf 70%, #2a6fb4 100%);
  border:.5rem solid var(--frame);
  box-shadow:var(--sh-card), inset 0 0 0 .3rem rgba(255,255,255,.35);
  display:flex;flex-direction:column;
}
.cctv-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:3.7rem;padding:0 1.4rem;margin-bottom:.4rem;
  color:#fff;border-radius:1.6rem 1.6rem .6rem .6rem;
  background:linear-gradient(90deg,#59a52c 0 56%,#1c4c85 56% 100%);
  box-shadow:inset 0 .2rem 0 rgba(255,255,255,.3), inset 0 0 0 .2rem rgba(255,255,255,.16);
}
.ch-left{display:flex;align-items:center;gap:.9rem;font-size:2.1rem;font-weight:900;text-shadow:0 .2rem .3rem rgba(0,0,0,.4)}
.ch-left .ic{width:1.25em;height:1.25em}
.ch-right{font-size:1.7rem;font-weight:800;letter-spacing:.05rem;text-shadow:0 .2rem .3rem rgba(0,0,0,.4);white-space:nowrap}

/* 螢幕外圈金框 —— 參考圖的重點細節 */
.cctv-screen{
  position:relative;flex:1;margin-bottom:1.2rem;
  border-radius:1.4rem;overflow:hidden;background:#0a141d;
  box-shadow:0 0 0 .6rem var(--gold), 0 0 0 .8rem rgba(255,255,255,.35), inset 0 0 2.6rem rgba(0,0,0,.5);
}
.cctv-screen img{width:100%;height:100%;object-fit:cover;display:block}
.stamp{
  position:absolute;left:1.4rem;top:1rem;color:#fff;
  font-family:"Consolas",ui-monospace,monospace;font-size:1.7rem;
  line-height:1.35;letter-spacing:.05rem;text-shadow:0 0 .4rem #000,0 .2rem .4rem #000;
}
.cam-nav{
  position:absolute;bottom:1.4rem;width:3.8rem;height:3.8rem;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:2rem;
  background:linear-gradient(#93d757,#468f22);
  box-shadow:inset 0 0 0 .32rem rgba(255,255,255,.78), inset 0 .2rem 0 rgba(255,255,255,.4),
             0 .4rem 1rem rgba(0,0,0,.5);
  transition:transform .12s;
}
.cam-nav .ic{width:1.9rem;height:1.9rem}
.cam-nav:hover{transform:scale(1.08)}
.cam-nav.prev{left:1.4rem}
.cam-nav.next{right:1.4rem}

/* 圓點直接落在卡片下緣的框上 */
.dots-bar{position:absolute;left:0;right:0;bottom:.6rem;display:flex;justify-content:center}
.dots{display:inline-flex;gap:.8rem}
.dots i{width:.9rem;height:.9rem;border-radius:50%;background:rgba(255,255,255,.45);transition:.2s;cursor:pointer;display:block}
.dots i.on{background:#fff;transform:scale(1.3)}

/* ============================================================
   下排四張小卡
   ============================================================ */

.strip{
  position:absolute;left:10.4rem;top:69.2rem;width:146.4rem;height:17.5rem;z-index:2;
  display:grid;grid-template-columns:32rem 35.1rem 32rem 44rem;gap:1.1rem;
}
.mini{
  background:linear-gradient(#fffefa,#f1f6f2);
  border-radius:2.6rem;padding:1rem 1.8rem;
  border:.4rem solid var(--frame);
  box-shadow:var(--sh-card), inset 0 0 0 .2rem rgba(255,255,255,.85);
  display:flex;flex-direction:column;overflow:hidden;line-height:1.2;
}
.mini h3{
  display:flex;align-items:center;gap:1rem;margin:0 0 .5rem;line-height:1.15;
  font-size:2.5rem;font-weight:900;color:var(--ink);
  padding-bottom:.7rem;border-bottom:.2rem solid var(--hair);
}
.mini h3 .ic{width:1.4em;height:1.4em}

/* 隧道小資訊 */
.info-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;flex:1}
.info-card li{
  display:flex;align-items:center;gap:1.2rem;font-size:2.1rem;line-height:1.1;
  padding-bottom:.4rem;border-bottom:.15rem solid rgba(120,146,150,.22);
}
.info-card li:last-child{border-bottom:0;padding-bottom:0}
.info-card li .ic{width:1.38em;height:1.38em}
.info-card li span{color:#3d5670;font-weight:800}
.info-card li b{margin-left:auto;font-weight:900;color:var(--ink);letter-spacing:.03rem}

/* 最佳建議 */
.best-row{position:relative;display:flex;align-items:center;gap:1.2rem;flex:1;min-width:0}
.best-txt{min-width:0}      /* 同 .event-txt：不加就無法在 flex 裡縮，文字會被裁 */
.trophy-wrap{position:relative;width:7.8rem;flex:none}
.trophy{width:100%;height:7.2rem;filter:drop-shadow(0 .5rem .6rem rgba(0,0,0,.28))}
.trophy-turtle{position:absolute;left:-2.2rem;bottom:-.6rem;width:4.4rem;filter:drop-shadow(0 .3rem .4rem rgba(0,0,0,.32))}
.best-txt strong{display:block;font-size:2.8rem;font-weight:900;color:var(--green-dk);margin-bottom:.4rem}
/* 「車多穩定・69 分（91 km/h）」在 .best-txt 只有 149px 寬（獎盃與三角錐
   各佔一邊）的情況下會折行，加上第二行就變 3 行 = 67px，剛好貼齊卡片
   底緣，最後一行被 .mini 的 overflow:hidden 切掉。縮字級 + 收行高留出餘裕。 */
.best-txt small{display:block;font-size:1.55rem;color:var(--ink-soft);font-weight:700;line-height:1.35}
.best-cone{width:3.2rem;margin-left:auto;align-self:flex-end;margin-bottom:-.4rem;filter:drop-shadow(0 .4rem .5rem rgba(0,0,0,.28))}

/* 即時事件 */
.event-row{display:flex;align-items:center;gap:1.2rem;flex:1;min-width:0}
.check-badge{
  width:5.4rem;height:5.4rem;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:3.4rem;color:#fff;
  background:linear-gradient(#8ad046,#4a9720);
  box-shadow:0 0 0 .4rem #e6f7d2, inset 0 .3rem 0 rgba(255,255,255,.4), 0 .6rem 1.2rem rgba(0,0,0,.25);
}
/* min-width:0 是關鍵：.event-row 是 flex，而 flex item 預設 min-width:auto，
   內容再長也不肯縮，於是整段被推出卡片、被 .mini 的 overflow:hidden 切掉。

   strong 原本有 white-space:nowrap，那是為預設的短句「目前無事故或施工」
   寫的；接上 1968 之後標題變成「左側車道受阻・施工維修」這種長度，禁止
   換行就等於保證被裁。改成可換行。

   small 裡會出現「（來源：高公局 1968）」這種不含空白的長串，中文標點
   之間不一定有斷點，所以補 overflow-wrap:anywhere 當保險。 */
.event-txt{min-width:0}
.event-txt strong{
  display:block;font-size:2rem;font-weight:900;color:#276a2b;margin-bottom:.3rem;
  line-height:1.25;overflow-wrap:anywhere;
}
.event-txt small{
  display:block;font-size:1.5rem;line-height:1.3;color:var(--ink-soft);font-weight:700;
  overflow-wrap:anywhere;
}

/* 歷史趨勢 */
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.chart-head h3{flex:1}
.chart-toggle{display:flex;gap:.6rem;padding-top:.2rem}
.ctg{
  padding:.4rem 1.3rem;border-radius:1.2rem;font-size:1.8rem;font-weight:900;
  color:#5d7089;background:#e7edee;box-shadow:inset 0 0 0 .15rem rgba(0,0,0,.07);
}
.ctg.active{color:#fff;background:linear-gradient(#7fc548,#3f8a1e);box-shadow:0 .2rem .5rem rgba(0,0,0,.25)}
.chart{
  width:100%;flex:1;min-height:0;
  background:linear-gradient(#ffffff,#f4f9fa);
  border-radius:.8rem;box-shadow:inset 0 0 0 .15rem rgba(120,146,150,.32);
}
.chart-axis{display:flex;justify-content:space-between;font-size:1.5rem;color:#5b7086;font-weight:800;padding:.4rem .3rem 0}

/* ============================================================
   Footer
   ============================================================ */

.tip{
  position:absolute;left:50%;transform:translateX(-50%);top:88.3rem;
  display:inline-flex;align-items:center;gap:1.8rem;
  height:5rem;padding:0 4.6rem;border-radius:3rem;
  background:linear-gradient(#66b332,#2a6a1d);
  color:#fff;font-size:2.4rem;font-weight:900;letter-spacing:.15rem;white-space:nowrap;
  border:.3rem solid rgba(255,255,255,.36);
  box-shadow:inset 0 .2rem 0 rgba(255,255,255,.28), 0 .9rem 1.8rem rgba(0,0,0,.45);
  text-shadow:0 .2rem .3rem rgba(0,0,0,.32);
  z-index:2;
}
.tip .ic{width:1.2em;height:1.2em}

/* ============================================================
   互動 / 動態
   ============================================================ */

.lane.picked .lane-card{
  box-shadow:var(--sh-card), inset 0 0 0 .3rem rgba(255,255,255,.7),
             0 0 0 .3rem rgba(255,206,70,.55), 0 0 2.4rem rgba(255,206,70,.4);
}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.02)}100%{transform:scale(1)}}
.pop{animation:pop .35s ease}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5rem)}}
@keyframes bobx{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-.5rem)}}
.mascot{animation:bob 3.4s ease-in-out infinite}
.turtle-car{animation:bobx 2.6s ease-in-out infinite}

@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.spark{animation:twinkle 2.4s ease-in-out infinite}
.spark.s2{animation-delay:.8s}
.spark.s3{animation-delay:1.5s}

@media (prefers-reduced-motion:reduce){
  .mascot,.turtle-car,.spark,.pop{animation:none}
}

/* ============================================================
   窄螢幕：改成可捲動的直式堆疊（看板本體仍維持同一套比例）
   ============================================================ */

@media (max-width:900px){
  :root{--u:calc(100vw / 470)}
  body{overflow-x:hidden;overflow-y:auto}
  .scene{width:100%;height:auto;min-height:100vh;display:block;padding:2rem 1.6rem 3rem;overflow-x:clip}
  .bg-layer{position:fixed}
  .stage{width:100%;height:auto;display:flex;flex-direction:column;gap:2rem}
  .deco{display:none}

  .topbar{display:flex;flex-direction:column;align-items:center;gap:1.6rem}
  .topbar-left,.topbar-right,.brand,.board,.strip,.tip{position:static;transform:none}
  .topbar-left{align-items:center}
  .topbar-right{align-items:center}
  .live-pill{width:28rem}
  .brand{width:100%;text-align:center}
  .mascot{position:static;display:block;margin:0 auto -1rem;width:26rem;animation:none}
  .brand-copy{padding:0}
  /* 標題列：縮字級並收掉會外溢的裝飾星星，避免橫向爆版 */
  .title-row{max-width:100%}
  .title{font-size:6.2rem;letter-spacing:.14em}
  .spark.s1{left:-1.6rem;top:1.4rem}
  .spark.s3{right:-2.4rem}
  .subtitle{margin:1.4rem 0 0}
  .board{width:100%;height:auto;grid-template-columns:1fr;gap:2rem}
  .middle{order:-1}
  .lane{min-height:52rem}
  .middle{min-height:52rem}
  .strip{width:100%;height:auto;grid-template-columns:1fr;gap:1.4rem}
  .mini{min-height:17rem}

  /* 底部提醒條：桌機是 nowrap 藥丸，窄螢幕改成可換行的滿版條 */
  .tip{
    align-self:stretch;margin:0;width:100%;max-width:100%;
    display:flex;justify-content:center;align-items:center;text-align:center;
    height:auto;min-height:5rem;padding:1.3rem 1.8rem;gap:1.1rem;
    border-radius:2.4rem;
    white-space:normal;overflow-wrap:anywhere;
    font-size:2.1rem;line-height:1.4;letter-spacing:.04rem;
  }
  .tip .ic{width:1.15em;height:1.15em;flex:none}
}


/* ── 時速下方的補充資訊 ────────────────────────────────────
   主數字用中位數（抗極端值），這裡補兩件中位數看不出來的事：
   · 隊尾速度 P10：壅塞形成時它比中位數更早下滑，是早期警訊
   · 可信度：離峰時中位數只靠幾個樣本，必須讓使用者看得出來
   ──────────────────────────────────────────────────────── */
/* 這一列原本放在 .metric-row 裡面。.metric-row 是 flex，所以它被排到 58px
   的大數字旁邊，只分到 78px 寬，兩段文字都得換行。已改成 .metric-row 的
   下一個兄弟節點，佔滿整個 .metric 寬度。

   字級原本 1.1rem／1rem，換算實際只有 9.7px／8.8px——版面其他文字是
   15~58px，這兩個小到看不清。放大到約 13.6px／12.3px：仍明顯小於
   14.9px 的正文（維持「附註」的層級），但讀得出來。 */
.spd-sub{
  display:flex; align-items:center; justify-content:center; gap:.9rem; flex-wrap:wrap;
  margin-top:.25rem; font-size:1.55rem; font-weight:700; color:var(--ink-soft);
  line-height:1.25;
}
.spd-sub b{ font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums }
.spd-p10.warn b{ color:var(--alert) }        /* 隊尾明顯低於中位數 → 有煞車波 */
.spd-conf{ font-size:1.4rem; opacity:.75 }
.spd-conf.weak{ color:var(--alert); opacity:1 }
/* 可信度低時把主數字一起淡化，避免看起來像確定的事實 */
.num.uncertain b{ opacity:.55 }

/* ── 沒有量到速度：顯示 0，但轉灰階 ──────────────────────
   0 用彩色顯示會被讀成「車子停在原地」（最嚴重的路況），而實際意思是
   「這一側沒有車」，剛好相反。灰階把它和真正測到的低速在視覺上分開，
   顏色在這裡承擔語意，不只是裝飾。
   權重要壓得住 .blue-card .num b 與 .num b.navy 這些著色規則，
   所以連同父層一起指定。 */
.num b.nodata,
.blue-card .num b.nodata,
.green-card .num b.nodata{ color:#9dabb8; opacity:.75; text-shadow:none }
.spd-sub .spd-p10.nodata{ color:#9dabb8; opacity:.8 }
.spd-sub .spd-p10.nodata b{ color:#9dabb8; font-weight:700 }