@font-face{
  font-family:'jf-openhuninn';
  src:url('https://cdn.jsdelivr.net/gh/justfont/open-huninn-font/font/jf-openhuninn-2.1.ttf') format('truetype');
  font-weight:400 700;font-display:swap;
}

/* ===== 深色（預設） ===== */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0f13; --surface:#151a21; --surface-2:#1c222b; --ink:#e9edf3; --muted:#98a2af; --line:#242c36;
  --accent:#ff6a58; --accent-ink:#fff; --ring:rgba(255,106,88,.35);
  --topbar:rgba(15,19,25,.72); --shadow:0 22px 50px rgba(0,0,0,.4);
  --red-bg:#e8483a; --amber-bg:#efa23a; --green-bg:#43b072; --gray-bg:#5c6672;
  --p-red-bg:rgba(232,72,58,.16); --p-red-fg:#ff9f93;
  --p-amber-bg:rgba(239,162,58,.16); --p-amber-fg:#f4bd6a;
  --p-green-bg:rgba(67,176,114,.17); --p-green-fg:#6fd39c;
  --p-gray-bg:rgba(150,160,175,.14); --p-gray-fg:#b3bcc7;
  --legend-fg:#b6bfca;
}
/* ===== 淺色 ===== */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#f1f3f6; --ink:#1a1f27; --muted:#667085; --line:#e7eaef;
  --accent:#e5402c; --accent-ink:#fff; --ring:rgba(229,64,44,.25);
  --topbar:rgba(255,255,255,.8); --shadow:0 20px 45px rgba(38,50,70,.1);
  --gray-bg:#c3c9d2;
  --p-red-bg:#fdecec; --p-red-fg:#c0341d;
  --p-amber-bg:#fdf3e0; --p-amber-fg:#9a6410;
  --p-green-bg:#e7f6ee; --p-green-fg:#1f7a45;
  --p-gray-bg:#eef0f3; --p-gray-fg:#5b6472;
  --legend-fg:#4b5563;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;
  font-family:'jf-openhuninn',"Microsoft JhengHei",-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-underline-offset:2px}
button{font:inherit}
/* 深淺切換：從主題鈕圓形擴散（View Transitions API；不支援則瞬間切換） */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:.5s cubic-bezier(.3,0,.2,1) both vt-reveal}
@keyframes vt-reveal{from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,0))}to{clip-path:circle(var(--vt-r,160vmax) at var(--vt-x,50%) var(--vt-y,0))}}
.wrap{width:min(1120px,100%);margin:0 auto;padding:18px 16px 8px}

/* landing 頁面 */
.crumbs-top{font-size:13px;color:var(--muted);margin-bottom:8px}
.crumbs-top a{text-decoration:none}
h1.page-h1{font-size:clamp(20px,4vw,26px);font-weight:700;margin:2px 0 6px}
.page-intro{font-size:14px;color:var(--muted);margin:0 0 14px;max-width:40em}

/* ===== 主容器 ===== */
.app{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}

.topbar{display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.mast{display:flex;align-items:center;gap:11px}
.cyclone{width:30px;height:30px;flex-shrink:0;color:var(--accent);animation:cyc 16s linear infinite}
.cyclone svg{width:100%;height:100%;display:block}
@keyframes cyc{to{transform:rotate(360deg)}}
.mastwrap{display:flex;flex-direction:column;line-height:1.16}
.mast-name{font-size:18px;font-weight:700;letter-spacing:1px}
.tagline{font-size:10.5px;color:var(--muted);letter-spacing:.6px}
.themebtn{position:relative;width:38px;height:38px;flex-shrink:0;margin-left:auto;border:1px solid var(--line);border-radius:50%;
  background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,transform .12s}
.themebtn:hover{border-color:var(--accent);color:var(--accent)}
.themebtn:active{transform:scale(.9)}
.themebtn .ic{position:absolute;inset:0;margin:auto;width:19px;height:19px;fill:currentColor;
  transition:opacity .28s ease,transform .42s cubic-bezier(.5,-.3,.4,1.35)}
:root[data-theme="dark"] .ic-sun{opacity:1;transform:rotate(0)}
:root[data-theme="dark"] .ic-moon{opacity:0;transform:rotate(-55deg) scale(.55)}
:root[data-theme="light"] .ic-sun{opacity:0;transform:rotate(55deg) scale(.55)}
:root[data-theme="light"] .ic-moon{opacity:1;transform:rotate(0)}

.statusbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line)}
.statusmain{display:flex;flex-direction:column;gap:3px;min-width:0}
.headline{font-size:clamp(16px,2.4vw,19px);font-weight:700;line-height:1.15;letter-spacing:.3px}
.headline .hl-num{font-size:1.5em;font-weight:800;line-height:1;margin-right:.14em;letter-spacing:0}
.headline .hl-num.red{color:var(--p-red-fg)}
.headline .hl-num.amber{color:var(--p-amber-fg)}
.headline .hl-num.green,.headline .hl-word.green{color:var(--p-green-fg)}
.headline .hl-txt{font-weight:700}
.headline .hl-sub{font-size:.74em;font-weight:600;color:var(--muted);margin-left:.35em;letter-spacing:0}
.statusmeta{font-size:12px;color:var(--muted)}
.pills{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.pill{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.pill b{font-size:15px}
.pill.red{background:var(--p-red-bg);color:var(--p-red-fg)}
.pill.amber{background:var(--p-amber-bg);color:var(--p-amber-fg)}
.pill.green{background:var(--p-green-bg);color:var(--p-green-fg)}
.pill.gray{background:var(--p-gray-bg);color:var(--p-gray-fg)}

/* ===== 版面：地圖 + 詳情 ===== */
.board{display:flex;gap:16px;padding:12px 18px 16px;align-items:flex-start}
.mapcol{flex:1;min-width:0;display:flex;flex-direction:column}
.detailcol{width:308px;flex-shrink:0;display:none}
.detailcol:has(.detail.show){display:block}

.toolrow{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:8px}
.crumb{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;min-height:24px}
.crumb a{color:var(--accent);cursor:pointer;text-decoration:none}.crumb .cur{color:var(--ink)}.crumb .sep{color:var(--muted)}
.modes{display:inline-flex;gap:4px;margin-left:auto;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.modes button{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.modes button.on{background:var(--accent);color:var(--accent-ink)}

.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;flex:1 1 auto;min-width:0}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--legend-fg)}
.legend i.sw{width:12px;height:12px;border-radius:4px;display:inline-block}
.legend i.sw.red{background:var(--red-bg)}.legend i.sw.amber{background:var(--amber-bg)}
.legend i.sw.green{background:var(--green-bg)}.legend i.sw.gray{background:var(--gray-bg)}
.legend i.swatch-partial{background:repeating-linear-gradient(45deg,var(--red-bg) 0 3px,#fff 3px 5px)}

.mapwrap{display:flex;justify-content:center}
.mapbox{position:relative;height:clamp(400px,64vh,640px);aspect-ratio:3/5;max-width:100%}
svg.main{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
path.cty{cursor:pointer;stroke:var(--surface);stroke-width:.6;transition:filter .12s}
path.cty:hover{filter:brightness(1.12)}
.red{fill:var(--red-bg)}.amber{fill:var(--amber-bg)}.green{fill:var(--green-bg)}.gray{fill:var(--gray-bg)}
.sel{stroke:var(--ink);stroke-width:1.7}
text.lbl{font-size:11px;font-weight:700;fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.5);stroke-width:.5;
  filter:drop-shadow(0 1px 1.6px rgba(0,0,0,.85));pointer-events:none;text-anchor:middle;dominant-baseline:central}
text.lbl.sm{font-size:8.5px;font-weight:600}

.offshore{position:absolute;right:100%;top:4px;margin-right:14px;display:flex;flex-direction:column;gap:12px;width:150px;z-index:2}
.off-box{background:transparent;border:0;padding:2px 0 4px;cursor:pointer}
.off-box:hover .lbl{color:var(--accent)}
.off-box .lbl{font-size:12px;font-weight:700;text-align:center}
.off-box .note{font-size:9.5px;color:var(--muted);text-align:center}
.off-box svg{width:100%;height:auto;display:block}

.zoomctl{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;gap:6px;z-index:3}
.zoomctl button{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:18px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);opacity:.95}
.zoomctl button:hover{border-color:var(--accent);color:var(--accent);opacity:1}

.hint{font-size:12px;color:var(--muted);text-align:center;margin-top:10px}

/* ===== 詳情卡 ===== */
.detail{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:18px;display:none}
.detail.show{display:block}
.d-name{font-size:24px;font-weight:700}
.d-sub{font-size:12px;color:var(--muted);font-weight:600;margin-top:1px}
.badge{display:inline-block;font-size:13px;font-weight:700;padding:5px 14px;border-radius:999px;margin:12px 0;color:#fff}
.d-row{font-size:13.5px;margin:8px 0;color:var(--ink)}
.d-row b{color:var(--muted);font-weight:600;display:block;font-size:11px;margin-bottom:1px}
.d-link{display:block;text-align:center;margin-top:16px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-size:13px;font-weight:700;padding:11px;border-radius:12px}

footer.dis{margin:16px auto 0;max-width:1120px;font-size:11px;color:var(--muted);text-align:center;line-height:1.7;padding:0 8px}

/* ===== 手機 ===== */
@media(max-width:820px){
  .wrap{padding:10px 10px 6px}
  .app{border-radius:18px}
  .topbar{padding:11px 14px}
  .mast-name{font-size:16px}
  .meta{flex-basis:100%;margin-left:0;max-width:none;text-align:left;order:5}
  .statusbar{padding:12px 14px}
  .pills{margin-left:0}
  .board{flex-direction:column;padding:12px 12px 14px;gap:12px}
  .detailcol{width:100%}
  .toolrow{gap:8px}
  .modes{margin-left:0;width:100%;justify-content:space-between}
  .modes button{flex:1;text-align:center}
  .mapwrap{order:3}
  .mapbox{height:auto;width:100%;max-width:400px;aspect-ratio:3/5;margin:0 auto}
  svg.main{width:100%;height:100%}
  .offshore{position:static;flex-direction:row;width:auto;justify-content:center;margin:0 0 4px}
  .off-box{width:31%;max-width:120px}
}
@media(max-width:420px){
  .livechip{display:none}
  .tagline{display:none}
  .off-box{width:32%}
}