/* Layout: 全版地圖＋「天穹時間帶」主畫面。設計系統在 src/styles/（tokens／base／cold／warm／hud）；這個檔案留下還沒改版的部分（側欄內容、事件／標題／結局視窗、設定、載入畫面）。 *//* =========================================================
   歸航 HOMEWARD — 介面設計 tokens（冷暖雙語）
   冷＝系統／NOVA：艦橋全息（自己發光的玻璃）
   暖＝人：探險手札（被燈照亮的紙）
   紅＝危機（兩種語言共用，但冷用螢光紅、暖用紅墨）
   ========================================================= */

/* 液晶數字（--f-num，B612 Mono／IBM Plex Mono）是等寬字：小數點與逗號佔一整格，夾在中文句子裡像「1. 5」「4, 997」。
   只有「.」與「,」這兩個字元改用系統的比例字型（unicode-range），數字照舊等寬對齊；系統沒有這些字型就退回原本的等寬字 */
@font-face {
  font-family: "Num Punct";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("HelveticaNeue"), local("Helvetica"), local("Noto Sans"), local("DejaVu Sans");
  unicode-range: U+002C, U+002E;
}

:root {
  color-scheme: dark;

  /* ---------- 冷：艦橋全息 ---------- */
  --void: #060912;
  --glass: rgba(8, 14, 28, 0.80);          /* 面板玻璃（半透明，露出遊戲畫面；0.80 是雪地白天的對比底線） */
  --glass-strong: rgba(7, 12, 24, 0.86);   /* 文字密集的側欄 */
  --glass-row: rgba(124, 201, 255, 0.055); /* 面板內的列底 */
  --glass-row-hi: rgba(124, 201, 255, 0.11);
  --line: rgba(124, 201, 255, 0.20);       /* 細框線 */
  --line-2: rgba(124, 201, 255, 0.38);
  --line-3: rgba(124, 201, 255, 0.70);     /* 角括號、強調框 */
  --grid: rgba(124, 201, 255, 0.06);
  --ice: #7cc9ff;
  --ice-hi: #c4e9ff;
  --ice-deep: #2d6f9e;
  --nova: #8fd7ff;
  --text: #dbe8f8;
  --text-2: #9fb2cf;
  --text-3: #8a9ebf;                       /* 最壞情況（白天雪地上的 --glass）對比 4.5:1 */

  /* 狀態（冷） */
  --ok: #7fe0a4;
  --warn: #ffd166;
  --alert: #ff5d53;
  --alert-deep: #8f1d17;

  /* 資源色（沿用原型） */
  --c-o2: #9ae6ff;
  --c-water: #5aa2ff;
  --c-food: #a6e07d;
  --c-metal: #c3cbd8;
  --c-parts: #c6a2ff;
  --c-fuel: #ff9a57;
  --c-power: #ffe066;

  /* ---------- 暖：探險手札 ---------- */
  --ember: #ffae4d;                        /* 主要按鈕、選取、溫暖與希望 */
  --ember-hi: #ffd29a;
  --ember-deep: #c96b1c;
  --paper: #efe3c8;
  --paper-2: #e3d2ad;                      /* 較舊的紙、內頁 */
  --paper-3: #d4bf93;                      /* 紙邊、折痕 */
  --polaroid: #f6f1e6;
  --ink: #2a2017;                          /* 主墨（紙上對比 11.5–12.9:1） */
  --ink-2: #4f4029;                        /* 次墨（平的紙上 7.5:1，暈邊最暗處也 ≥ 5） */
  --ink-3: #5c4b35;                        /* 鉛筆（平的紙上 6:1，暈邊最暗處 ≥ 4.5；舊值 #6f5c42 在暈邊只有 3.2–3.8） */
  --ink-red: #832213;                      /* 紅墨：批註、印章、危機（舊值 #a3301c 在暈邊 3.1–3.8；暈邊最暗處的紙 L≈.46，小字要 ≤ .062 才有 4.5） */
  --ink-blue: #24405f;                     /* 藍墨：手寫註記 */
  --ink-green: #2a5a2d;                    /* 綠墨：好結果 */
  --tape: rgba(232, 216, 176, 0.82);

  /* ---------- 字型 ---------- */
  --f-ui: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --f-story: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-stencil: "Saira Stencil One", "Noto Serif TC", serif;
  --f-hand: "Caveat", "LXGW WenKai TC", cursive;          /* 拉丁手寫（原文名字、數字註記） */
  --f-hand-tc: "LXGW WenKai TC", "Caveat", "Kaiti TC", cursive; /* 中文手寫註記 */

  /* 字級（以 13px 為內文基準；遊戲 HUD 在 1440 寬下閱讀距離約 60cm） */
  --fs-10: 10px;  /* 只給英文 eyebrow，中文不得小於 11 */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-88: 88px;

  /* 間距（4px 格） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --gut: 16px;     /* 面板距畫面邊緣 */

  /* 圓角／切角：冷＝切角（不用圓角），暖＝紙張的微圓角 */
  --cut: 12px;     /* 面板切角 */
  --cut-sm: 7px;   /* 按鈕、晶片切角 */
  --r-paper: 2px;
  --r-pill: 999px;

  /* 陰影 */
  --sh-paper: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 22px 50px rgba(12, 6, 0, 0.6), 0 4px 12px rgba(12, 6, 0, 0.45);
  --sh-polaroid: 0 10px 22px rgba(20, 10, 0, 0.45), 0 2px 4px rgba(20, 10, 0, 0.35);
  --glow-ice: 0 0 14px rgba(124, 201, 255, 0.45);
  --glow-ember: 0 0 16px rgba(255, 174, 77, 0.5);
  --glow-alert: 0 0 14px rgba(255, 93, 83, 0.6);

  /* 動效 */
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 420ms;
  --t-stamp: 360ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-snap: cubic-bezier(0.3, 1.5, 0.5, 1);
  --scan-period: 7s;   /* 掃描線漂移一輪 */
  --pulse-period: 1.6s;

  /* 紙紋（feTurbulence 雜訊，乘在紙色上） */
  --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.12  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --paper-fiber: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.15  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; --t-stamp: 0ms; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* =========================================================
   正式方向 CD（2026-10-07 使用者選定）：C 的極簡版面＋D 的液晶數字＋只留在四角的霜。
   介面風格只剩乾淨一種（第 65 題棄用殘破）：<html data-ui="clean"> 寫死在 index.html，cd.css／mobile.css 有幾條選擇器以它開頭。
   乾淨＝浮在畫面上的字。
   ========================================================= */
:root {
  --cd-fg: rgba(224, 230, 234, 0.92);       /* 一般文字 */
  --cd-fg-2: rgba(178, 188, 196, 0.9);      /* 次要 */
  --cd-fg-3: rgba(150, 160, 168, 0.88);     /* 提示（頂部暗漸層上 4.5:1 以上） */
  --cd-hair: rgba(255, 255, 255, 0.12);     /* 細線 */
  --cd-lcd: #b7cabf;                        /* 液晶數字：低飽和冷灰綠 */
  --cd-lcd-2: #82968c;
  --cd-lcd-glow: rgba(183, 202, 191, 0.3);
  --cd-panel: rgba(6, 9, 12, 0.62);         /* 冷面板：暗、透明、無飽和 */
  --cd-panel-solid: rgba(6, 9, 12, 0.82);
  --cd-red: #e0574c;                        /* 只給危險 */
  --cd-amber: #d9a25e;                      /* 只給人的溫暖 */
  --cd-radio: #a9c2cc;                      /* NOVA 字幕 */
  --f-num: "Num Punct", "B612 Mono", "IBM Plex Mono", ui-monospace, monospace;
  --ui-dim: 1;                              /* 夜晚 .8：介面跟著暗 */
  --ui-sat: 0.78;                           /* 場景降飽和 */
  --map-filter: saturate(var(--ui-sat)) contrast(1.04) brightness(0.95); /* 場景畫布平常的濾鏡（cd.css 的 #map）；載入圖用同一組，淡出那一下顏色不跳（G17 §7） */
  --ui-frost: 0.4;                          /* 四角霜不透明度 */
  --ui-frost-r: 210px;                      /* 四角霜半徑 */
}
/* =========================================================
   歸航 HOMEWARD — 介面基礎（移植自 design/ui-mock/components.css 第 0 節）
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; }
.ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ic.fill { fill: currentColor; stroke: none; }
.mono, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--text-3); }
.c-ok { color: var(--ok); } .c-warn { color: var(--warn); } .c-alert { color: var(--alert); } .c-ice { color: var(--ice); } .c-ember { color: var(--ember); }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
kbd { font: 500 10px/1 var(--f-mono); color: var(--text-3); border: 1px solid var(--line); padding: 2px 4px 3px; border-radius: 2px; background: rgba(124, 201, 255, 0.04); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 動效（移植自 components.css 第 4 節） ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes tipin { from { opacity: 0; transform: translateY(-4px); } }
@keyframes scan { to { background-position: 0 30px; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(0.82); opacity: 0.75; } }
@keyframes pulse { 50% { opacity: 0.55; } }
@keyframes blink { 50% { opacity: 0.55; } }
@keyframes halo { from { r: 3px; stroke-opacity: 0.9; } to { r: 12px; stroke-opacity: 0; } }
@keyframes drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.03) translate(-0.6%, -0.4%); } }
@keyframes snow { to { background-position: -60px 260px, -40px 260px, -80px 260px, -30px 260px, -70px 260px; } }
@keyframes stamp-in { 0% { opacity: 0; transform: rotate(var(--rot)) scale(2.2); } 60% { opacity: 0.9; transform: rotate(var(--rot)) scale(0.94); } 100% { opacity: 0.86; transform: rotate(var(--rot)) scale(1); } }
@keyframes drop-in { 0% { opacity: 0; transform: translateY(-18px) rotate(-4deg); } 100% { opacity: 1; } }
@keyframes flash-up { 0% { color: var(--ok); text-shadow: 0 0 10px var(--ok); } }
@keyframes flash-down { 0% { color: #ff8a82; text-shadow: 0 0 10px var(--alert); } }
@keyframes sweep { from { transform: translateX(-120%); } to { transform: translateX(220%); } }
@keyframes tout { to { opacity: 0; transform: translateY(-8px); } }
/* =========================================================
   歸航 HOMEWARD — 冷：艦橋全息（移植自 design/ui-mock/components.css 第 1 節）
   面板 .holo、按鈕 .btn、標籤 .tag、量表 .meter、開關 .switch、提示框 .tip
   ========================================================= */
.holo {
  --c: var(--cut); --lc: var(--line-2); --bg: var(--glass);
  position: relative;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.7px), var(--lc) calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px)) top left / var(--c) var(--c) no-repeat,
    linear-gradient(to top left, transparent calc(50% - 0.7px), var(--lc) calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px)) bottom right / var(--c) var(--c) no-repeat,
    linear-gradient(var(--lc), var(--lc)) right top / calc(100% - var(--c)) 1px no-repeat,
    linear-gradient(var(--lc), var(--lc)) right top / 1px calc(100% - var(--c)) no-repeat,
    linear-gradient(var(--lc), var(--lc)) left bottom / calc(100% - var(--c)) 1px no-repeat,
    linear-gradient(var(--lc), var(--lc)) left bottom / 1px calc(100% - var(--c)) no-repeat,
    linear-gradient(180deg, rgba(124, 201, 255, 0.07), rgba(124, 201, 255, 0) 42%),
    var(--bg);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  animation: rise var(--t-slow) var(--ease-out) both;
}
.holo::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--line-3), var(--line-3)) right top / 12px 1.5px no-repeat,
    linear-gradient(var(--line-3), var(--line-3)) right top / 1.5px 12px no-repeat,
    linear-gradient(var(--line-3), var(--line-3)) left bottom / 12px 1.5px no-repeat,
    linear-gradient(var(--line-3), var(--line-3)) left bottom / 1.5px 12px no-repeat; }
.holo::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: repeating-linear-gradient(180deg, rgba(170, 220, 255, 0.04) 0 1px, transparent 1px 3px);
  animation: scan var(--scan-period) linear infinite; }
.holo.strong { --bg: var(--glass-strong); }
.holo.alert { --lc: rgba(255, 93, 83, 0.6); }
.holo-mini { --c: var(--cut-sm); }

.hh { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px 6px 14px; color: var(--text); }
.hh > .ic { color: var(--ice); width: 17px; height: 17px; }
.hh h3 { font: 700 14px/1.2 var(--f-ui); letter-spacing: 0.04em; }
.hh .meta { margin-left: auto; font-size: 11px; color: var(--text-3); }
.hh-btn { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text-3); border: 1px solid var(--line); }
.hh-btn:hover { color: var(--text); border-color: var(--line-2); }
.eyebrow { font: 500 10px/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }

/* 按鈕：冷＝切角描邊；主要＝琥珀（原型規則：琥珀是主要按鈕與選取） */
.btn { --c: var(--cut-sm); display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px;
  font: 500 13px/1 var(--f-ui); color: var(--text); background: rgba(124, 201, 255, 0.08);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.btn:hover { background: rgba(124, 201, 255, 0.16); box-shadow: inset 0 0 0 1px var(--ice); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.sm { height: 26px; padding: 0 10px; font-size: 12px; }
.btn.lg { height: 42px; padding: 0 20px; font-size: 15px; font-weight: 700; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.btn.primary { color: #1e1105; background: linear-gradient(180deg, #ffc777, var(--ember) 55%, #e8902f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(255, 174, 77, 0.6); font-weight: 700; }
.btn.primary:hover { background: linear-gradient(180deg, #ffd59a, #ffbc66 55%, #f09a3a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--glow-ember); }
.btn.danger { color: #ffd5d1; background: rgba(255, 93, 83, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 93, 83, 0.55); }
.btn.danger:hover { background: rgba(255, 93, 83, 0.2); box-shadow: inset 0 0 0 1px var(--alert), var(--glow-alert); }
.btn.ice { color: #04121f; background: linear-gradient(180deg, #bfe7ff, var(--ice)); font-weight: 700; box-shadow: none; }
.btn.ink { color: var(--ink); background: rgba(255, 252, 240, 0.4); box-shadow: inset 0 0 0 1.5px rgba(60, 40, 15, 0.55); }
.btn.ink:hover { color: var(--ink); background: rgba(255, 214, 140, 0.5); box-shadow: inset 0 0 0 1.5px var(--ember-deep); }
.btn[disabled], .btn.is-off { opacity: 0.55; pointer-events: none; }

/* 標籤（冷）：一定是「圖示＋文字」，不只靠顏色 */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; font-size: 11.5px; font-weight: 500; color: var(--text-2);
  background: rgba(124, 201, 255, 0.07); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.tag .ic { width: 12px; height: 12px; }
.tag.t-ok { color: var(--ok); box-shadow: inset 0 0 0 1px rgba(127, 224, 164, 0.4); background: rgba(127, 224, 164, 0.08); }
.tag.t-warn { color: var(--warn); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.45); background: rgba(255, 209, 102, 0.08); }
.tag.t-alert { color: #ff8a82; box-shadow: inset 0 0 0 1px rgba(255, 93, 83, 0.55); background: rgba(255, 93, 83, 0.12); }
.tag.t-ice { color: var(--ice); box-shadow: inset 0 0 0 1px var(--line-2); }
.tag.t-ember { color: var(--ember); box-shadow: inset 0 0 0 1px rgba(255, 174, 77, 0.5); background: rgba(255, 174, 77, 0.08); }
.tag.t-dim { color: var(--text-3); }

/* 量表：分格的光條 */
.meter { --v: 50%; --col: var(--ice); position: relative; display: block; height: 8px; background: rgba(124, 201, 255, 0.1); overflow: visible; }
.meter > i { position: absolute; inset: 0 auto 0 0; width: var(--v); background: linear-gradient(90deg, color-mix(in oklab, var(--col) 55%, transparent), var(--col)); box-shadow: 0 0 10px color-mix(in oklab, var(--col) 60%, transparent); transition: width var(--t-slow) var(--ease-out); }
.meter, .meter > i { -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); }
.meter.t-ember { --col: var(--ember); } .meter.t-alert { --col: var(--alert); } .meter.t-ok { --col: var(--ok); } .meter.t-warn { --col: var(--warn); } .meter.t-ice { --col: var(--ice); }
.meter .mk { position: absolute; top: -3px; bottom: -3px; left: var(--at); width: 1.5px; background: var(--text-2); z-index: 1; }
.meter-wrap { position: relative; }
.meter-wrap .mk { position: absolute; top: -3px; height: 14px; left: var(--at); width: 1.5px; background: var(--text-2); }

/* 開關（委託） */
.switch { --w: 40px; position: relative; width: var(--w); height: 22px; flex: none; background: rgba(124, 201, 255, 0.08); box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); cursor: pointer; transition: background var(--t-med); }
.switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; background: var(--text-3); transition: transform var(--t-med) var(--ease-snap), background var(--t-med); }
.switch[aria-checked="true"] { background: rgba(124, 201, 255, 0.28); box-shadow: inset 0 0 0 1px var(--ice), var(--glow-ice); }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: #e9f7ff; }

/* 提示框 */
.tip { position: fixed; z-index: 100; width: 300px; padding: 12px 14px; color: var(--text); font-size: 12.5px; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 26, 48, 0.97), rgba(7, 12, 24, 0.97)); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px rgba(0, 0, 0, 0.55);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); animation: tipin var(--t-med) var(--ease-out); }
.tip h4 { display: flex; align-items: center; gap: 6px; font: 700 14px/1.3 var(--f-ui); margin-bottom: 8px; flex-wrap: wrap; }
.tip h4 .ic { color: var(--ice); }
.tip-tag { margin-left: auto; font-size: 11px; font-weight: 500; display: inline-flex; gap: 3px; align-items: center; padding: 2px 6px; box-shadow: inset 0 0 0 1px currentColor; }
.tip-tag.t-warn { color: var(--warn); } .tip-tag .ic { width: 12px; height: 12px; }
.tip-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.tip-t td { padding: 3px 0; border-bottom: 1px dashed var(--line); color: var(--text-2); }
.tip-t td + td { text-align: right; font-family: var(--f-mono); color: var(--text); }
.tip-t .up { color: var(--ok) !important; } .tip-t .down { color: #ff8a82 !important; } .tip-t .dim { color: var(--text-3) !important; }
.tip-t tr.sum td { border-bottom: 0; padding-top: 6px; font-weight: 700; color: var(--text); }
.tip p { color: var(--text-2); margin-top: 6px; }
.tip-n { display: flex; gap: 6px; align-items: flex-start; color: var(--nova) !important; font-size: 12px; }
.tip-n .ic { margin-top: 2px; }

/* 舊按鈕名稱的別名（title／modal／側欄內容還在用 .ember、.small、.icon、:disabled） */
.btn.ember { color: #1e1105; background: linear-gradient(180deg, #ffc777, var(--ember) 55%, #e8902f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(255, 174, 77, 0.6); font-weight: 700; }
.btn.ember:hover { background: linear-gradient(180deg, #ffd59a, #ffbc66 55%, #f09a3a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--glow-ember); color: #1e1105; }
.btn.small { height: 26px; padding: 0 10px; font-size: 12px; }
.btn.icon { width: 30px; padding: 0; }
.btn:disabled { opacity: 0.55; pointer-events: none; }
.btn.on { color: #1e1105; background: var(--ember); box-shadow: var(--glow-ember); }
/* =========================================================
   歸航 HOMEWARD — 暖：探險手札（移植自 design/ui-mock/components.css 第 2 節）
   紙 .paper、拍立得 .polaroid、印章 .stamp、特質 .trait、人的名牌 .ptag、紙條 .slip、事件選項 .evt .choice、投票 .vote
   ========================================================= */
.paper {
  position: relative; color: var(--ink);
  background:
    radial-gradient(125% 95% at 50% 38%, rgba(255, 248, 230, 0) 52%, rgba(96, 58, 20, 0.09) 100%),
    var(--paper-grain), var(--paper-fiber),
    linear-gradient(176deg, #f3e8d0, #e9dab9);
  border-radius: var(--r-paper);
  box-shadow: inset 0 0 0 1px rgba(120, 88, 45, 0.28), inset 0 0 50px rgba(120, 76, 26, 0.06), var(--sh-paper);
}
.paper.old { background: radial-gradient(125% 95% at 50% 38%, rgba(255, 248, 230, 0) 45%, rgba(96, 58, 20, 0.2) 100%), var(--paper-grain), var(--paper-fiber), linear-gradient(176deg, #ead9b4, #dcc69a); }
.paper.ruled { background:
    radial-gradient(125% 95% at 50% 38%, rgba(255, 248, 230, 0) 52%, rgba(96, 58, 20, 0.09) 100%),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(60, 90, 130, 0.14) 25px 26px),
    var(--paper-grain), var(--paper-fiber), linear-gradient(176deg, #f3e8d0, #e9dab9); }
.serif { font-family: var(--f-story); }
.hand { font-family: var(--f-hand); color: var(--ink-blue); font-weight: 600; }
.hand-tc { font-family: var(--f-hand-tc); color: var(--ink-blue); }
.ink-red { color: var(--ink-red); }

/* 拍立得：白框、底邊較厚、膠帶、微旋轉 */
.polaroid { --rot: 0deg; --pw: 120px; position: relative; display: inline-block; width: var(--pw); padding: calc(var(--pw) * 0.06) calc(var(--pw) * 0.06) calc(var(--pw) * 0.22);
  background: linear-gradient(180deg, #fbf8f1, #efe8d9); box-shadow: var(--sh-polaroid); transform: rotate(var(--rot)); transition: transform var(--t-med) var(--ease-out); }
.polaroid .ph { position: relative; aspect-ratio: 1; overflow: hidden; background: #2d261d; }
.polaroid .ph img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.18) contrast(1.04) saturate(0.92); }
.polaroid .ph::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 18px rgba(30, 18, 5, 0.45); background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 40%); }
.polaroid figcaption { position: absolute; left: 6%; right: 6%; bottom: 2%; height: 18%; display: grid; place-items: center; font-family: var(--f-hand); font-weight: 600;
  font-size: calc(var(--pw) * 0.13); line-height: 1; color: var(--ink-blue); white-space: nowrap; overflow: hidden; }
.tape { position: absolute; z-index: 2; top: -9px; left: 50%; width: 56%; height: 18px; transform: translateX(-50%) rotate(-3deg); background: var(--tape);
  box-shadow: 0 1px 2px rgba(60, 40, 10, 0.18); opacity: 0.88;
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 96% 12%, 100% 25%, 96% 40%, 100% 55%, 96% 70%, 100% 85%, 96% 100%, 0 100%, 4% 85%, 0 70%, 4% 55%, 0 40%, 4% 25%); }
.polaroid.gone .ph img { filter: grayscale(1) contrast(0.9) brightness(0.8); }
.pt { width: 100%; height: 100%; object-fit: cover; }

/* 印章：紅墨、斑駁、蓋下去的動畫 */
.stamp { --rot: -8deg; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 2px; font: 900 15px/1.1 var(--f-story); letter-spacing: 0.12em; color: var(--ink-red);
  border: 2.5px double currentColor; border-radius: 3px; transform: rotate(var(--rot)); opacity: 0.86; mix-blend-mode: multiply;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='80'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -3.2 2.55'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='80'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -3.2 2.55'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  animation: stamp-in var(--t-stamp) var(--ease-snap) both; }
.stamp.blue { color: var(--ink-blue); }
.stamp.green { color: var(--ink-green); }
.stamp.latin { font-family: var(--f-stencil); font-weight: 400; letter-spacing: 0.08em; }

/* 特質、狀態（暖） */
.trait { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; font: 500 12px/1 var(--f-ui); color: var(--ink);
  background: rgba(176, 132, 64, 0.16); box-shadow: inset 0 0 0 1px rgba(110, 78, 36, 0.35); border-radius: 2px; }
.trait .ic { width: 13px; height: 13px; color: var(--ink-2); }
.wstat { display: inline-flex; align-items: center; gap: 4px; font: 700 12px/1 var(--f-ui); color: var(--ink-2); }
.wstat .ic { width: 13px; height: 13px; }
.wstat.t-ok { color: var(--ink-green); } .wstat.t-warn { color: #6f4708; } .wstat.t-alert { color: var(--ink-red); } .wstat.t-ice { color: var(--ink-blue); } .wstat.t-ember { color: #7d3d09; } .wstat.t-dim { color: var(--ink-3); }

/* 人＝紙：冷面板裡出現的人名，一律是小紙片名牌 */
.ptag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px 0 2px; vertical-align: -4px; white-space: nowrap;
  font: 700 12px/1 var(--f-story); color: var(--ink); background: linear-gradient(180deg, #f4ead3, #e6d6b2); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(120, 88, 45, 0.3); transform: rotate(-0.6deg); }
.ptag b { color: var(--ink) !important; font: 700 12px/1 var(--f-story) !important; }
.ptag .pt { width: 16px; height: 16px; border-radius: 1px; box-shadow: 0 0 0 1px #fbf7ee; }

/* 紙條（附在冷面板上的「人」的內容，例如承諾） */
.slip { position: relative; margin: 6px 10px 10px; padding: 8px 10px 8px 12px; color: var(--ink); transform: rotate(-0.7deg);
  background: var(--paper-grain), linear-gradient(176deg, #f2e6cb, #e4d2aa); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(120, 88, 45, 0.25); }
.slip::before { content: ""; position: absolute; top: -7px; left: 18px; width: 40px; height: 13px; background: var(--tape); transform: rotate(-6deg); opacity: 0.85; }
.slip-k { font: 600 15px/1 var(--f-hand-tc); color: var(--ink-red); }
.slip p { font: 700 13.5px/1.4 var(--f-story); margin: 3px 0 4px; }
.slip-m { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.slip-m em { font-style: normal; font-weight: 700; color: #6f4708; border: 1px solid rgba(138, 90, 12, 0.5); padding: 0 4px; }
.slip-m .ic { width: 12px; height: 12px; }

/* 選項卡（事件） */
.evt .choice { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; width: 100%; text-align: left; padding: 12px 14px 12px 12px; color: var(--ink);
  background: var(--paper-grain), linear-gradient(176deg, rgba(255, 252, 242, 0.75), rgba(240, 228, 200, 0.75)); border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(110, 78, 36, 0.3), 0 2px 0 rgba(110, 78, 36, 0.15); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
.evt .choice:hover, .evt .choice.is-hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(201, 107, 28, 0.85), inset 4px 0 0 var(--ember-deep), 0 10px 22px rgba(60, 30, 0, 0.25); }
.evt .choice .no { grid-row: span 3; width: 28px; height: 28px; display: grid; place-items: center; font: 700 14px/1 var(--f-mono); color: #fff7ea; background: var(--ink); border-radius: 50%; }
.evt .choice:hover .no, .evt .choice.is-hover .no { background: var(--ember-deep); }
.evt .choice .ct { font: 900 16px/1.35 var(--f-story); }
.evt .choice .cd { font: 500 13px/1.5 var(--f-story); color: var(--ink-2); }
.evt .choice .cfx { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fx { display: inline-flex; align-items: center; gap: 3px; height: 21px; padding: 0 7px; font: 600 12px/1 var(--f-ui); color: var(--ink-2); border: 1px solid rgba(110, 78, 36, 0.35); border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.fx .ic { width: 12px; height: 12px; }
.fx.up { color: var(--ink-green); border-color: rgba(47, 99, 50, 0.45); }
.fx.down { color: var(--ink-red); border-color: rgba(163, 48, 28, 0.45); }
/* NOVA 投射在紙上的估算：冷色貼片 */
.fx.nova { color: var(--nova); background: #0b1628; border: 0; font: 500 11.5px/1 var(--f-mono); box-shadow: inset 0 0 0 1px rgba(124, 201, 255, 0.45), 0 0 10px rgba(124, 201, 255, 0.25);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }

/* 事件類型條：類型＝圖示＋文字＋顏色，三者一起 */
.evtype { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--f-ui); color: var(--ink-2); flex-wrap: wrap; }
.evtype .sep { width: 1px; height: 12px; background: rgba(90, 64, 30, 0.35); }
.evtype .ic { width: 13px; height: 13px; }
.kind { display: inline-flex; align-items: center; gap: 5px; height: 25px; padding: 0 14px 0 9px; color: #fff8ec; font: 700 12.5px/1 var(--f-ui); letter-spacing: 0.1em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.kind .ic { width: 14px; height: 14px; }
.kind.k-event { background: #a8501a; } .kind.k-crisis { background: var(--ink-red); } .kind.k-nova { background: #1d4c74; }
.kind.k-petition { background: var(--ink-blue); } .kind.k-expedition { background: var(--ink-green); } .kind.k-record { background: #6b5a44; }
/* 投票（冷）：附在手札下緣的全息條——人做決定，系統計票 */
.vote { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 14px; --c: 9px; }
.vote .vk { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-2); margin-right: 4px; }
.vote .vk b { display: flex; align-items: center; gap: 5px; color: #fff; font-size: 13px; white-space: nowrap; }
.vote .vk .ic { color: var(--ember); }
.voter { display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; background: var(--glass-row); box-shadow: inset 0 0 0 1px var(--line); }
.voter .av { width: 26px; height: 26px; display: grid; place-items: center; font: 700 12px/1 var(--f-ui); color: #0b1220; background: var(--pc);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.voter b { display: block; font-size: 12px; color: #fff; line-height: 1.2; white-space: nowrap; }
.voter small { font-size: 10.5px; color: var(--text-3); }
.voter .pick { display: grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; font: 700 12px/1 var(--f-mono); color: #1e1105; background: var(--ember); border-radius: 50%; }
.voter.wait .pick { color: var(--text-2); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); animation: pulse 1.2s ease-in-out infinite; }
.timer { position: relative; width: 40px; height: 40px; margin-left: auto; flex: none; }
.timer svg { transform: rotate(-90deg); display: block; }
.timer b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 13px var(--f-mono); color: #fff; }
.pt.drone { display: grid; place-items: center; background: #d9ccae; color: var(--ink-2); }
.pt.drone .ic { width: 60%; height: 60%; }
/* =========================================================
   歸航 HOMEWARD — 正式方向 CD 的主畫面（design/ui-mock/cd.css 的遊戲版；規格見 design/ui-mock/README.md 第 0 節）
   規則：平常收起、需要時才展開；冷面板暗、透明、低飽和，不疊卡片、圖表放第二層；暖（紙、拍立得、琥珀）只出現在人的時刻。
   風格：只剩乾淨一種（<html data-ui="clean">，第 65 題棄用殘破）：字直接浮在畫面上。
   與樣稿不同的地方：①場景是 #map 這張畫布，所以降飽和／壓暗用 CSS filter 直接套在它身上；②樣稿的 .ui 外層（夜裡 opacity .8）
   改成每個 HUD 元素各自 opacity:var(--ui-dim)——外層有 opacity 的話，裡面面板的 backdrop-filter 就模糊不到場景；
   ③暗角叫 .vig（舊的 .grade 是結局的評等字）；
   ④樣稿沒有時間速度鈕，遊戲需要：四顆小圖示接在窗口倒數後面（#speed），其他照樣稿。
   ========================================================= */

/* ---------- 舞台：場景降飽和＋暗角；夜晚整體變暗 ---------- */
#map { filter: var(--map-filter); transition: filter 500ms; }
#app.storm #map { filter: saturate(calc(var(--ui-sat) - 0.2)) brightness(0.92); }
#app.night #map { filter: saturate(calc(var(--ui-sat) - 0.08)) brightness(0.8); }
#app.night.storm #map { filter: saturate(calc(var(--ui-sat) - 0.2)) brightness(0.74); }
#app.is-event #map { filter: saturate(0.55) brightness(0.5) blur(1.5px); }
html.q-low #map { filter: none; transition: none; }
#app { --ui-dim: 1; --panel-dim: 1; }
#app.night { --ui-dim: 0.8; --panel-dim: 0.94; } /* --ui-dim：浮在畫面上的 HUD；--panel-dim：面板（字要壓得住底，淡太多會掉出對比標準） */
#app.is-event { --ui-dim: 1; --panel-dim: 1; }
#app.storm { --ui-frost: 0.58; --ui-frost-r: 260px; }
.vig { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 95% at 50% 52%, transparent 55%, rgba(4, 6, 10, 0.55) 100%); }
/* 上下各一道很淡的暗漸層襯底（給沒有底板的浮動字用；不是實心面板，場景照樣看得到）：頂部放時間與資源，底部放快捷鍵、建造鍵與 NOVA 字幕。
   亮雪地上的字背後本來是近白的畫面，量測（test/contrast.mjs）正午快捷鍵標籤只有 1.04:1。--tf-top／--tf-bot 是兩道的高度（手機用較矮的） */
.topfade { --tf-top: 128px; --tf-bot: 172px; /* 中間兩個停點（透明度、位置）可以覆寫：手機頂端有三列（時間、資源、希望／座位／不安），要壓到第三列的底 */ position: absolute; inset: 0; z-index: 4; pointer-events: none; /* 比四角的霜（z 3）高：霜是亮的，襯底要蓋在它上面，字才不會落在亮霜上 */
  background: linear-gradient(180deg, rgba(3, 5, 9, 0.7) 0, rgba(3, 5, 9, var(--tf-m1, 0.5)) var(--tf-p1, 34px), rgba(3, 5, 9, var(--tf-m2, 0.24)) var(--tf-p2, 80px), transparent var(--tf-top)) top / 100% var(--tf-top) no-repeat,
    linear-gradient(0deg, rgba(3, 5, 9, 0.72) 0, rgba(3, 5, 9, 0.58) 46px, rgba(3, 5, 9, 0.38) 100px, rgba(3, 5, 9, 0.15) 142px, transparent var(--tf-bot)) bottom / 100% var(--tf-bot) no-repeat; }
#app.night .topfade { opacity: 0.7; } /* 夜裡場景本來就暗，襯底淡一點，暗場才不會被壓死 */

/* ---------- 四角的霜（越冷越多）；--cold 0–1 由 hud.ts 依氣溫設，再多一點點 ----------
   樣稿的兩個 SVG 雜訊濾鏡用預設區域（120%），stitchTiles 的週期因此不等於磁磚，每 600px 一條直縫；這裡把濾鏡區域釘成磁磚大小 */
.cd-frost { --fr: calc(var(--ui-frost-r) * (1 + 0.22 * var(--cold, 0))); position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: calc(var(--ui-frost) + 0.1 * var(--cold, 0));
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g' x='0' y='0' width='200' height='200' filterUnits='userSpaceOnUse'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 6 -5.4'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") 0 0 / 200px 200px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='c' x='0' y='0' width='600' height='600' filterUnits='userSpaceOnUse'><feTurbulence type='turbulence' baseFrequency='0.012 0.035' numOctaves='4' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.95  0 0 0 0 1  0 0 0 1.6 -0.15'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>") 0 0 / 600px 600px,
    radial-gradient(circle var(--fr) at 0 0, rgba(214, 230, 240, 0.6), rgba(214, 230, 240, 0.12) 60%, transparent 80%),
    radial-gradient(circle var(--fr) at 100% 0, rgba(214, 230, 240, 0.6), rgba(214, 230, 240, 0.12) 60%, transparent 80%),
    radial-gradient(circle var(--fr) at 0 100%, rgba(214, 230, 240, 0.6), rgba(214, 230, 240, 0.12) 60%, transparent 80%),
    radial-gradient(circle var(--fr) at 100% 100%, rgba(214, 230, 240, 0.6), rgba(214, 230, 240, 0.12) 60%, transparent 80%);
  -webkit-mask:
    radial-gradient(circle var(--fr) at 0 0, #000 20%, transparent 100%),
    radial-gradient(circle var(--fr) at 100% 0, #000 20%, transparent 100%),
    radial-gradient(circle var(--fr) at 0 100%, #000 20%, transparent 100%),
    radial-gradient(circle var(--fr) at 100% 100%, #000 20%, transparent 100%);
  mask:
    radial-gradient(circle var(--fr) at 0 0, #000 20%, transparent 100%),
    radial-gradient(circle var(--fr) at 100% 0, #000 20%, transparent 100%),
    radial-gradient(circle var(--fr) at 0 100%, #000 20%, transparent 100%),
    radial-gradient(circle var(--fr) at 100% 100%, #000 20%, transparent 100%); }
html.q-low .cd-frost { display: none; }

/* ---------- 液晶數字 ---------- */
.n { font-family: var(--f-num); font-weight: 700; color: var(--cd-lcd); text-shadow: 0 0 6px var(--cd-lcd-glow), 0 1px 3px rgba(0, 0, 0, 0.85); font-variant-numeric: tabular-nums; }
/* 紙面（航行日誌本、結局書、手札）上的數字只要數字字型：液晶藍與發光是給 HUD 的，印在紙上像一團糊掉的藍字（「看過 1／17 種結局」） */
.jbook .n, .book .n, .paper .n { color: var(--ink); text-shadow: none; }
.n.bad { color: #ff8075; text-shadow: 0 0 8px rgba(224, 87, 76, 0.55), 0 1px 3px rgba(0, 0, 0, 0.85); }
.lbl { font: 500 11.5px/1 var(--f-ui); color: var(--cd-fg-3); }
.unit .ic, .notes .ic, .drop .ic { color: var(--cd-fg-3); }

/* ---------- 單元：浮在畫面上的字 ---------- */
.unit { position: absolute; z-index: 6; color: var(--cd-fg); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); opacity: var(--ui-dim); }
.unit .win { position: relative; display: flex; align-items: center; gap: 14px; }
.sep { width: 1px; height: 14px; background: var(--cd-hair); align-self: center; flex: none; }

/* ---------- 冷面板（建造、建築、方舟）：暗、透明、細線 ---------- */
.panel { position: absolute; z-index: 7; background: var(--cd-panel); backdrop-filter: blur(10px) saturate(0.7); -webkit-backdrop-filter: blur(10px) saturate(0.7);
  box-shadow: inset 0 0 0 1px var(--cd-hair), 0 20px 40px rgba(0, 0, 0, 0.35); color: var(--cd-fg); animation: cd-in 260ms var(--ease-out) both; }
.panel[hidden] { display: none; }

/* ---------- 時間（左上）與資源（右上） ---------- */
#top { position: absolute; inset: 0 0 auto 0; height: 0; z-index: 6; pointer-events: none; }
#top .unit { pointer-events: auto; }
.u-time { left: 26px; top: 14px; cursor: default; }
.u-time .win { gap: 13px; }
.u-time .day { font-size: 21px; color: #e3ece6; }
.u-time .day small { font-size: 11px; color: var(--cd-lcd-2); margin-left: 2px; }
.u-time .t { font-size: 15px; }
.u-time .lbl .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
#win { display: contents; }
#win.open .lbl, #win.open .lbl .ic { color: var(--cd-amber); }
#win.open .n { color: #f0c88d; text-shadow: 0 0 8px rgba(217, 162, 94, 0.4), 0 1px 3px rgba(0, 0, 0, 0.85); }
#tl.open #more { visibility: hidden; } /* 不用 display:none：那會讓時間單元縮短，滑過就把右邊的速度鈕推動 */
.u-res { right: 26px; top: 14px; }
.u-res .win { gap: 15px; }
.rs { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: default; }
.rs .ic { width: 13px; height: 13px; }
.rs .n { font-size: 14px; }
.rs.bad .ic { color: var(--cd-red); }
.rs.bad::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cd-red); box-shadow: 0 0 8px var(--cd-red); animation: blink 1s steps(1) infinite; }
.rs.bad em { font: 600 11px/1 var(--f-ui); font-style: normal; padding: 3px 5px; color: #ffb1a8; background: rgba(224, 87, 76, 0.18); box-shadow: inset 0 0 0 1px rgba(224, 87, 76, 0.55); }
.rs.sick { color: #ff8a80; font-size: 12px; }
.rs.sick .ic { color: #ff8a80; } /* 圖示跟字同一個亮紅（原本繼承 .rs.bad .ic 的 --cd-red，最後一夜極光的綠光底下量到 2.6:1） */
.rs.sick::before { display: none; }
/* 時間速度：樣稿沒有，遊戲需要。四顆小圖示，目前的速度亮、其他淡；暫停時那顆閃紅（出了事的訊號） */
.spd { display: inline-flex; align-items: center; gap: 0; margin: -4px -4px -4px 0; }
.sp { position: relative; width: 24px; height: 24px; display: grid; place-items: center; color: var(--cd-fg-3); opacity: 0.85; transition: color var(--t-fast), opacity var(--t-fast); }
.sp .ic { width: 13px; height: 13px; color: currentColor; }
.sp:hover { color: var(--cd-fg); opacity: 1; }
.sp.on { color: var(--cd-fg); opacity: 1; }
.sp.on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px; height: 1px; background: currentColor; }
.sp.paused { color: #ffb3aa; opacity: 1; animation: alarm 1.4s ease-in-out infinite; } /* 亮雪地上的紅圖示：#ff9a90 只有 2.6–2.9:1 */
/* 前三天的新手提示：頂部細線下面一行小字 */
.goal { position: absolute; left: 26px; top: 50px; z-index: 6; max-width: min(46vw, 560px); font-size: 12.5px; color: var(--cd-fg-2); cursor: pointer; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6); opacity: var(--ui-dim); }
.goal[hidden] { display: none; }
.goal:hover { color: #fff; }
.goal.quote { cursor: default; } .goal.quote:hover { color: var(--cd-fg-2); } /* 一波波發現（G16）：第一局發現期是船員的一句話，點了沒有動作 */

/* ---------- 冰暴警示條：24 小時內才出現（#warn 本身就是 .unit.u-warn） ---------- */
.u-warn { left: 50%; top: 54px; transform: translateX(-50%); }
.u-warn .win { gap: 12px; min-height: 34px; padding: 0 18px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; color: #f1d9d6;
  background: linear-gradient(90deg, rgba(90, 14, 10, 0), rgba(90, 14, 10, 0.78) 8%, rgba(90, 14, 10, 0.78) 92%, rgba(90, 14, 10, 0)); /* 冰暴白天亮雪地上，0.55 讓 #ff9a90 的圖示只有 2.7:1 */
  border-top: 1px solid rgba(224, 87, 76, 0.45); border-bottom: 1px solid rgba(224, 87, 76, 0.45); animation: cd-fade 600ms ease-out both; }
.u-warn .wk { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: #ff9a90; letter-spacing: 0.06em; }
.u-warn .wk .ic { width: 15px; height: 15px; color: #ff9a90; }
.u-warn .n { color: #fff; font-size: 16px; text-shadow: 0 0 8px rgba(224, 87, 76, 0.5); }
.u-warn .lbl { color: rgba(241, 217, 214, 0.78); }
.u-warn .sev i { display: inline-block; width: 9px; height: 6px; margin-right: 2px; background: var(--cd-red); }
.u-warn .sev i.o { background: rgba(224, 87, 76, 0.25); }
.u-warn .sep { background: rgba(224, 87, 76, 0.4); }

/* ---------- 滑過（或按 Tab）才展開：窗口時間軸、五日預報、目標、人 ---------- */
.drop { left: 18px; top: 50px; width: min(520px, calc(100% - 36px)); max-height: calc(100% - 140px); overflow-y: auto; padding: 14px 16px 12px; font-size: 12.5px; opacity: var(--panel-dim, 1); }
.drop::-webkit-scrollbar { width: 5px; } .drop::-webkit-scrollbar-thumb { background: var(--cd-hair); }
/* 可捲動的容器一律預留捲軸的位置：內容變長（滑過、展開、換頁）冒出捲軸時，裡面的東西不會被往左推；test/hover-shift.mjs 會掃有沒有漏的 */
.items, .bcats, #drawer .db, .drop, #pcard, .ev-a, .book .page { scrollbar-gutter: stable; }
#title, .book { scrollbar-gutter: stable both-edges; } /* 整頁的畫面（標題、手機的手札）：兩邊都留，內容才不會偏左 */
.drop h4 { display: flex; justify-content: space-between; align-items: baseline; font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: var(--cd-fg-3); margin: 0 0 9px; }
.drop h4 span { letter-spacing: 0; }
.drop section + section { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--cd-hair); }
.trk { position: relative; height: 34px; }
.trk .base { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: rgba(255, 255, 255, 0.14); }
.trk .past { position: absolute; left: 0; top: 13px; height: 2px; background: rgba(255, 255, 255, 0.55); }
.trk .w { position: absolute; top: 9px; height: 10px; min-width: 5px; box-shadow: inset 0 0 0 1px rgba(217, 162, 94, 0.8); }
.trk .w.next { background: rgba(217, 162, 94, 0.35); }
.trk .w.missed { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.trk .st { position: absolute; top: 1px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.trk .st.past { opacity: 0.3; } .trk .st.soon { background: var(--cd-red); }
.trk .now { position: absolute; top: 6px; width: 2px; height: 16px; background: #fff; }
.trk .tl { position: absolute; top: 22px; font: 400 10px var(--f-num); color: var(--cd-fg-3); transform: translateX(-50%); white-space: nowrap; }
.fc5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fc5 > div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; box-shadow: inset 0 0 0 1px var(--cd-hair); font-size: 11.5px; }
.fc5 .ic { width: 18px; height: 18px; }
.fc5 .z { color: var(--cd-fg-2); }
.fc5 .n { font-size: 12px; }
.fc5 .deep { box-shadow: inset 0 0 0 1px rgba(255, 138, 128, 0.6); } .fc5 .deep .n, .fc5 .dc { color: #ff8a80; } .fc5 .dc { font-size: 10.5px; }
.fc5 .s .ic, .fc5 .s .z { color: #ff9a90; }
.fc5 .w { box-shadow: inset 0 0 0 1px rgba(217, 162, 94, 0.55); } .fc5 .w .ic, .fc5 .w .z { color: var(--cd-amber); }
.fc-note { margin: 8px 0 0; color: var(--cd-red); font-size: 11.5px; display: flex; gap: 5px; align-items: center; }
.fc-note .ic { width: 12px; height: 12px; color: var(--cd-red); }
.objs { margin: 0; padding: 0; list-style: none; }
.objs li { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 4px 0; cursor: pointer; }
.objs li:hover { color: #fff; }
.objs li .n { font-size: 12px; }
.objs li i { grid-column: span 2; height: 2px; background: rgba(255, 255, 255, 0.1); }
.objs li i em { display: block; height: 100%; background: rgba(255, 255, 255, 0.55); }
.objs li.pet { color: #f0d4ab; cursor: default; }
.objs li.pet .n { color: var(--cd-amber); text-shadow: none; }
.objs li.pet .pnote { grid-column: span 2; font-size: 11.5px; line-height: 1.45; color: var(--cd-fg-3); }
.ppl { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--cd-fg-2); }
.ppl .n { font-size: 12.5px; }
.ppl .bad { color: #ff8a80; }
.ppl .warn { color: var(--cd-amber); }

/* ---------- 按鈕：安靜；主要＝淺色填滿；危險＝紅；人的選擇才用琥珀 ---------- */
.cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; font: 500 13px/1 var(--f-ui); color: var(--cd-fg);
  box-shadow: inset 0 0 0 1px var(--cd-hair); background: rgba(255, 255, 255, 0.03); transition: background var(--t-fast), box-shadow var(--t-fast); cursor: pointer; border: 0; }
.cbtn:hover { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.cbtn .ic { width: 15px; height: 15px; color: currentColor; }
.cbtn.pri { color: #101418; background: #d7dde1; box-shadow: none; font-weight: 700; }
.cbtn.pri:hover { background: #eef2f4; }
.cbtn.danger { color: #ffb0a6; box-shadow: inset 0 0 0 1px rgba(224, 87, 76, 0.55); }
.cbtn[disabled] { opacity: 0.66; cursor: not-allowed; }

/* ---------- NOVA 無線電字幕、靠右通知、快捷鍵、建造鍵 ---------- */
.radio { left: 50%; bottom: 52px; transform: translateX(-50%); width: min(860px, calc(100% - 40px)); text-align: center; font: 400 14.5px/1.75 var(--f-num); color: var(--cd-radio); cursor: pointer; transition: opacity var(--t-slow); }
.radio.hide { opacity: 0; pointer-events: none; }
.radio .prev { font-size: 12.5px; color: rgba(214, 233, 240, 0.9); }
.radio .prev:empty { display: none; }
.radio .ch { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--f-num); letter-spacing: 0.22em; color: rgba(210, 230, 238, 0.9); margin: 4px 0 4px; }
.radio .ch i { width: 6px; height: 6px; border-radius: 50%; background: var(--cd-radio); box-shadow: 0 0 6px var(--cd-radio); animation: blink 1.2s steps(1) infinite; }
.radio .line { display: inline; min-height: 1.75em; }
.radio .log { font: 500 10.5px var(--f-ui); color: rgba(210, 230, 238, 0.88); margin-left: 10px; }
.radio .win { flex-direction: column; gap: 0; }
.radio.alert { color: #ffb3a8; } .radio.alert .ch i { background: var(--cd-red); box-shadow: 0 0 6px var(--cd-red); } .radio.alert .ch { color: rgba(255, 150, 140, 0.7); }
html.motion-reduce .radio .ch i, html.q-low .radio .ch i { animation: none; }

.notes { position: absolute; right: 26px; top: clamp(150px, 33vh, 360px); width: min(290px, calc(100% - 52px)); z-index: 6; display: flex; flex-direction: column; gap: 10px; pointer-events: none; opacity: var(--ui-dim); }
.note { position: relative; padding: 4px 0 6px 12px; border-left: 2px solid rgba(220, 228, 233, 0.45); font-size: 13px; color: var(--cd-fg); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); animation: cd-note 500ms ease-out both; }
.note small { display: block; font-size: 11.5px; color: var(--cd-fg-2); margin-top: 2px; }
.note .ic { width: 13px; height: 13px; margin-right: 5px; }
.note::after { content: ""; position: absolute; left: 12px; bottom: 0; height: 1px; width: calc(100% - 12px); background: currentColor; opacity: 0.35; transform-origin: left; animation: cd-life var(--life, 3s) linear both; }
.notes.frozen .note::after { animation-play-state: paused; } /* 整列凍結（滑鼠停在「看一眼」上，toast.ts）：倒數細線也停住，不然細線走完了通知卻還在 */
.note.bad, .note.warn { border-left-color: var(--cd-red); color: #f3d3cf; } .note.bad .ic, .note.warn .ic { color: var(--cd-red); }
.note.warm { border-left-color: var(--cd-amber); color: #f0d4ab; }
.note.warm .ic { color: var(--cd-amber); }
.note.warm b { font-family: var(--f-story); }
.note.out { animation: tout 0.35s ease-in forwards; }
/* 新聞型事件的「看一眼」（第 81 題）：通知整條不吃滑鼠，只有這顆鈕可以按 */
.note .peek { pointer-events: auto; display: inline-flex; align-items: center; margin: 5px 0 1px; padding: 3px 10px; border: 1px solid rgba(220, 228, 233, 0.55); border-radius: 999px; background: rgba(8, 12, 18, 0.55); color: var(--cd-fg); font: 600 12px/1.3 var(--f-ui); letter-spacing: 0.06em; cursor: pointer; }
.note .peek:hover, .note .peek:focus-visible { border-color: var(--cd-amber); color: #ffe2b8; outline: none; }

[data-ui="clean"] .buildk, [data-ui="clean"] .radio { text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.55); }
.unit kbd, .panel kbd { color: var(--cd-fg-2); border-color: var(--cd-hair); background: rgba(0, 0, 0, 0.3); }
.buildk { left: 26px; bottom: 22px; }
.buildk .win { gap: 8px; height: 36px; padding: 0 14px 0 12px; background: rgba(6, 8, 12, 0.42); box-shadow: inset 0 0 0 1px var(--cd-hair); font-size: 13px; color: var(--cd-fg); }
.buildk .bb { display: inline-flex; align-items: center; align-self: stretch; gap: 8px; color: var(--cd-fg); } /* 撐滿整個窗的高度（36px）：只有字那麼高的話平板上是 92×19，點不準 */
.buildk .ic { width: 16px; height: 16px; }
.buildk .lbl { font-size: 11px; }
.buildk:hover .win, .buildk.open .win { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); }
.buildk[hidden] { display: none; }
.placing-bar { left: 26px; bottom: 66px; padding: 7px 12px; flex-direction: column; align-items: flex-start; gap: 3px; background: rgba(6, 8, 12, 0.66); box-shadow: inset 0 0 0 1px var(--cd-hair); font-size: 13px; color: var(--cd-fg); }
.placing-bar .pl1 { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.placing-bar .pl1 b { color: var(--cd-fg); }
.placing-bar .pl2 { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cd-fg-3); }
.placing-bar .pl-live { display: inline-flex; align-items: center; gap: 10px; } /* 成本與已蓋幾座：HUD 會整段換，所以包在一個元素裡 */
.placing-bar .pmax { font-size: 12px; color: var(--cd-fg-2); }
.placing-bar .cost { color: var(--cd-fg-2); } /* 成本的數字：.cost 的底色 --text-2 在夜裡的場景上只有 4.0:1（放置列沒有實心底） */
.placing-bar .cost .lack { color: #ffb3ab; } /* 缺的那項：#ff9a90 夜裡剛好 4.50:1，再亮一階 */
.placing-bar .pdone { height: 26px; margin-left: 6px; padding: 0 12px; font-size: 12px; } /* 放置的出口：手機沒有右鍵與 Esc，桌機也看得到 */
/* 「連續」切換鈕（第 79 題）：開著時蓋完不結束；開著要一眼看得出來——亮底、亮框、打勾 */
.placing-bar .pchain { height: 26px; margin-left: 10px; padding: 0 10px; font-size: 12px; }
.placing-bar .pchain.on { color: #fff; background: rgba(150, 214, 238, 0.24); box-shadow: inset 0 0 0 1px #cfe6f0, 0 0 10px rgba(150, 214, 238, 0.35); }
.placing-bar[hidden] { display: none; }
/* ---------- 讓位（規格 0.3 第 7 條）：面板開著時，NOVA 字幕與通知讓位；右側面板開著時快捷鍵銘牌讓位；人的面板連資源列也讓位 ---------- */
#nova, #toasts { transition: opacity 300ms; }
#app.panel-open #nova, #app.panel-open #toasts, #app.build-open #nova, #app.build-open #toasts { opacity: 0 !important; pointer-events: none; }
#app.panel-open #tools { opacity: 0; pointer-events: none; }
#app.panel-people .u-res, #app.panel-people #warn, #app.panel-people .u-mood { opacity: 0 !important; pointer-events: none; } /* 希望／不安在船員面板裡本來就有（人口的兩個弧）；手機的個人卡會蓋到這一列 */
/* 個人卡會蓋到左上的目標、左下的建造鍵：只在真的會疊到的視窗退開，1366、1440 寬的桌機不動。
   實測（開局、19 張個人卡取最壞）：卡的左緣在 ≤1100 寬固定在 x≈40，更寬是「視窗寬 − 950」。
   目標：開局那句短目標疊到 1101 寬，最長的目標（max-width 50vw − 310）疊到 1346 寬，1366 寬起不疊（≤1000 寬目標本來就藏起來）。
   建造鍵：≤1000 寬（分類圖示已收起，右緣 132）卡高最多 681，視窗高 ≤ 800 會疊；更寬（右緣 395）卡高最多 532，視窗高 ≤ 600 會疊。
   手機（≤760）的個人卡停在底列上面，不蓋建造鍵 */
@media (max-width: 1346px) { #app.panel-people #goal { opacity: 0 !important; pointer-events: none; } }
@media (min-width: 761px) and (max-width: 1000px) and (max-height: 820px), (min-width: 1001px) and (max-width: 1346px) and (max-height: 680px) { #app.panel-people #dock { opacity: 0 !important; pointer-events: none; } }
#app.panel-people #map { filter: saturate(0.5) brightness(0.5); } /* 人的時刻：場景壓暗（樣稿 cd-crew），冷介面退到只剩頂部時間 */

/* ---------- 事件與電影鏡頭：上下黑邊（桌機 92px）、介面全部退場、場景壓暗（.is-event 才模糊壓暗） ---------- */
.lb { position: absolute; left: 0; right: 0; height: 92px; background: #000; z-index: 39; pointer-events: none; transform: scaleY(0); transition: transform 600ms var(--ease-out); }
.lb-top { top: 0; transform-origin: top; } .lb-bot { bottom: 0; transform-origin: bottom; }
#app.cine .lb { transform: scaleY(1); }
.lb-cap { position: absolute; z-index: 40; left: 0; right: 0; bottom: 34px; text-align: center; font: 400 13px/1 var(--f-num); color: rgba(220, 228, 233, 0.7); letter-spacing: 0.08em; opacity: 0; transition: opacity 400ms; pointer-events: none; }
.lb-cap b { color: #fff; font-weight: 700; }
#app.cine .lb-cap:not(:empty) { opacity: 1; }
#top .unit, #warn, #drop, #toasts, #nova, #dock, #placing, #tools, #buildbar, #goal { transition: opacity 400ms; }
#app.cine #top .unit, #app.cine #warn, #app.cine #drop, #app.cine #toasts, #app.cine #nova, #app.cine #dock, #app.cine #placing, #app.cine #tools, #app.cine #buildbar, #app.cine #goal, #app.cine #drawer, #app.cine .cd-frost { opacity: 0 !important; pointer-events: none; }
/* NOVA 監視器（G18，ui/novacam.ts）：介面跟 .cine 一樣退場，但不拉上下黑邊（監視器自己有取景框）；引導、組合的光、幕名卡也收 */
#app.nvcam #top .unit, #app.nvcam #warn, #app.nvcam #drop, #app.nvcam #toasts, #app.nvcam #nova, #app.nvcam #dock, #app.nvcam #placing, #app.nvcam #tools, #app.nvcam #buildbar, #app.nvcam #goal, #app.nvcam #drawer, #app.nvcam .cd-frost, #app.nvcam .gcard, #app.nvcam .dk, #app.nvcam .guide-cell, #app.nvcam .cmb-glows, #app.nvcam #dev-badge, #app.nvcam .m-bot, #app.nvcam #act-card, #app.nvcam #lb-cap { opacity: 0 !important; pointer-events: none; transition: none !important; } /* 硬切：跟畫面同一幀消失（播完才照原本的 400ms 淡回來） */

/* ---------- 其他：提示框改成素的深色玻璃（只有紅與琥珀是顏色） ---------- */
.tip { background: rgba(6, 9, 13, 0.9); box-shadow: inset 0 0 0 1px var(--cd-hair), 0 18px 40px rgba(0, 0, 0, 0.55); clip-path: none; color: var(--cd-fg); }
.tip h4 .ic { color: var(--cd-fg-2); }
.tip-t td { border-bottom: 1px dashed rgba(255, 255, 255, 0.12); }
.tip-t .up { color: #e8eef2 !important; } .tip-t .down { color: #ff9a90 !important; }
.tip-tag.t-warn { color: #ff9a90; } .tip-n { color: var(--cd-radio) !important; }
.tip-hero { width: 120px; height: 120px; float: right; margin: -18px -16px -6px 6px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }

@keyframes cd-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes cd-fade { from { opacity: 0; } }
@keyframes cd-note { from { opacity: 0; transform: translateX(12px); } }
@keyframes cd-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes alarm { 50% { opacity: 0.45; } }

/* ---------- 標題與結局時，主畫面的東西全部收起來 ---------- */
#app.title-mode #top, #app.title-mode #goal, #app.title-mode #warn, #app.title-mode #drop, #app.title-mode #toasts, #app.title-mode #nova, #app.title-mode #dock, #app.title-mode #placing, #app.title-mode #tools, #app.title-mode #buildbar, #app.title-mode #drawer, #app.title-mode .vig, #app.title-mode .topfade, #app.title-mode .cd-frost, #app.title-mode .lb,
#app.end-mode #top, #app.end-mode #goal, #app.end-mode #warn, #app.end-mode #drop, #app.end-mode #toasts, #app.end-mode #nova, #app.end-mode #dock, #app.end-mode #placing, #app.end-mode #tools, #app.end-mode #buildbar, #app.end-mode #drawer, #app.end-mode .vig, #app.end-mode .topfade, #app.end-mode .cd-frost { display: none !important; }

/* ---------- 窄視窗：右上資源列掉到第二行；手機版另照 cd-mobile 做（⑧） ---------- */
@media (max-width: 1180px) {
  .u-time { left: 14px; } .u-res { right: 14px; } .u-res .win { gap: 11px; } .u-time .win { gap: 10px; }
  .buildk { left: 14px; } .notes { right: 14px; } .drop { left: 8px; }
}
@media (max-width: 1000px) {
  .u-res { top: 56px; }
  .goal { display: none; }
}

/* ---------- 第二批共用的小元件（樣稿 cd.css 末段）：第 60 天標記、反應爐一行、冷面板裡的人、倒數細線、是／否清單 ---------- */
.trk.e60 { height: 50px; }
.trk .d60 { position: absolute; right: 0; top: 2px; width: 2px; height: 34px; background: repeating-linear-gradient(180deg, #e9eef1 0 3px, transparent 3px 5px); }
.trk .d60l { position: absolute; right: 6px; top: 36px; font: 400 10.5px var(--f-num); color: #e9eef1; white-space: nowrap; }
.drop .core1 { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--cd-fg-2); }
.core1 b { font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: var(--cd-fg-3); }
.core1 .n { font-size: 13px; }
.core1 .bar { position: relative; flex: 0 0 90px; height: 4px; background: rgba(255, 255, 255, 0.1); }
.core1 .bar em { position: absolute; inset: 0 auto 0 0; background: var(--cd-lcd); }
.core1 .bar i { position: absolute; top: -3px; width: 1px; height: 10px; background: rgba(224, 87, 76, 0.8); }
.core1 .lbl { margin-left: auto; }
.mug { width: 22px; height: 22px; border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.mug .pt { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) brightness(0.92); }
.mugs { display: flex; flex-wrap: wrap; gap: 3px; }
.cnt { position: relative; height: 2px; background: rgba(255, 255, 255, 0.12); }
.cnt em { position: absolute; inset: 0 auto 0 0; background: rgba(235, 240, 243, 0.7); }
.cnt.bad em { background: var(--cd-red); }
.nsay { font: 400 12.5px/1.6 var(--f-num); color: var(--cd-radio); }
.ok-l { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--cd-fg-2); }
.ok-l > span { display: flex; align-items: center; gap: 7px; }
.ok-l .ic { width: 13px; height: 13px; flex: none; }
.ok-l .y .ic { color: var(--cd-lcd); } .ok-l .y { color: var(--cd-fg); }
.ok-l .x .ic { color: var(--cd-red); }
.ok-l small { margin-left: auto; font-size: 11px; color: var(--cd-fg-3); }

/* =========================================================
   浮動文字的可讀性（2026-10-07 使用者回報「有些文字顏色有問題，融入背景裡」）
   浮動文字直接浮在 3D 畫面上，亮雪地（白天、冰暴）把淺灰字吃掉。做法三層，量測用 test/contrast.mjs（量字背後實際的像素）：
   ①上下各一道暗漸層襯底（.topfade，不是實心面板）；②沒有底板的字提亮到近白、拿掉發光，改用多層暗暈（--halo）；③圖示同樣加暗暈，停用的速度鈕不再淡到看不見。
   ========================================================= */
.unit, .goal, .notes, .radio { --cd-fg: #f5f8fa; --cd-fg-2: #e6ecef; --cd-fg-3: #d9e0e4; --cd-lcd: #e2efe8; --cd-lcd-2: #bccdc4; --cd-radio: #d2e6ee; }
[data-ui="clean"] { --halo: 0 0 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.85), 0 0 11px rgba(0, 0, 0, 0.65), 0 0 22px rgba(0, 0, 0, 0.4);
  --halo-ic: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 10px rgba(0, 0, 0, 0.55)); }
[data-ui="clean"] .unit, [data-ui="clean"] .goal, [data-ui="clean"] .note, [data-ui="clean"] .unit .n, [data-ui="clean"] .goal .n, [data-ui="clean"] .note .n { text-shadow: var(--halo); }
[data-ui="clean"] .unit .ic, [data-ui="clean"] .goal .ic, [data-ui="clean"] .notes .ic { filter: var(--halo-ic); }
[data-ui="clean"] .unit kbd { color: var(--cd-fg); border-color: rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.5); text-shadow: none; }
[data-ui="clean"] .buildk .win { background: rgba(6, 8, 12, 0.55); }
[data-ui="clean"] .note { background: linear-gradient(90deg, rgba(5, 8, 12, 0.78), rgba(5, 8, 12, 0.56) 78%, rgba(5, 8, 12, 0)); } /* 夜裡整個通知還要乘 --ui-dim（0.8）：最後一夜背後是泛光與光柱漲到全白的底，0.6 的襯底會讓小圖示掉到 2.3:1（天空鏡頭線量到），加深到 0.78 */

/* =========================================================
   面板文字的可讀性（2026-10-07 使用者回報右側檢視面板「可以在這裡建造」的建築名稱深褐色壓在深色面板上看不見）
   根因兩個：①crew.css 的 .row b／i／small 沒限定在船員名冊，把紙上的墨色漏到所有 .row 裡（已限定在 #drawer[data-tab="crew"]／#pcard）；
   ②面板裡的灰階字沿用「頂部暗漸層上的浮動字」那組偏暗的灰（--cd-fg-3 是 150/160/168），放在半透明面板上、白天亮雪地透過來時只有 2.7–3.3:1。
   做法：面板、側欄、視窗、展開資訊裡的灰階字提亮（同 HUD 浮動字那組）；半透明面板底下的場景先壓暗再疊面板色（亮雪地、冰暴白天不會把面板變成灰的，夜裡本來就暗、幾乎沒變）；
   鎖住、停用、已建好的字可以淡但不低於 3:1（opacity 拉高）；夜裡的淡出只給浮動 HUD，面板用 --panel-dim（紙面板不淡：淡出後墨與紙一起往暗處走，次墨掉到 4.5 以下）。
   量測：test/contrast.mjs（字核心像素 vs 字透明那張的同位置底；面板、手札、結局、選單、設定、說明、手機都量）。
   ========================================================= */
.panel, #drawer, #buildbar, #drop, #placing, #tip, .m-bot, #modal .plate { --cd-fg: #f5f8fa; --cd-fg-2: #e6ecef; --cd-fg-3: #cfd7dc; --cd-lcd: #e2efe8; --cd-lcd-2: #bccdc4; --cd-radio: #d2e6ee; }
.panel { backdrop-filter: blur(10px) saturate(0.7) brightness(0.62); -webkit-backdrop-filter: blur(10px) saturate(0.7) brightness(0.62); }
#drawer[data-tab="crew"], #pcard { opacity: 1; }

/* =========================================================
   頂部中央：希望與不安（ui/mood.ts）。使用者：「不安跟希望條要做在畫面比較明顯的位置」。
   左希望（琥珀）、右不安（冷灰藍），兩條橫向細條＋數字＋趨勢箭頭；中間 #mood-mid 留給方舟進度「方舟 x／y」。
   危險區（希望 ≤ 25、不安 ≥ 70；條上有一格刻度）才變紅、框慢慢呼吸（不閃）；滑過浮出原因明細（提示框，絕對定位，不推動排版）。
   放在第二行正中央（第一行左右的時間單元與資源列寬度會變，中間放不穩）；冰暴警示與目標往第三行讓；≤ 1000 資源列掉到第二行右邊，希望／方舟／不安掉到第三行；手機在資源列下面。
   ========================================================= */
.u-mood { left: 50%; top: 50px; transform: translateX(-50%); width: max-content; cursor: default; line-height: 20px; } /* width: max-content：絕對定位 left:50% 的可用寬度只剩一半，不釘住會在窄視窗把內容擠成兩行 */ /* 第二行正中央：第一行左右兩個單元（時間、資源列）寬度會變（資源一缺就多一個標籤、病人、NOVA 離線），中間放不穩；行高釘死：方舟座位數的大字（19px）不把整塊撐高 */
.u-mood .win { gap: 12px; }
#mood-mid { display: inline-flex; align-items: center; }
#mood-mid:empty { display: none; }
.mb { display: inline-flex; align-items: center; gap: 7px; outline: none; }
.mb:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; }
.mb .lbl { font-size: 11.5px; }
.mb .n { min-width: 2ch; font-size: 14px; text-align: right; }
.mb.unrest .n { text-align: left; }
.mb .tr { width: 1em; font-size: 9px; text-align: center; color: var(--cd-fg-3); }
.mb .tr.good { color: var(--cd-lcd); } .mb .tr.bad { color: #ff9a90; }
.mb .bar { position: relative; flex: none; display: block; width: 56px; height: 5px; background: rgba(255, 255, 255, 0.24); }
.mb .bar::before { content: ""; position: absolute; top: 0; bottom: 0; width: var(--v, 50%); background: var(--c-mood, var(--cd-amber)); transition: width 400ms var(--ease-out); }
.mb .bar::after { content: ""; position: absolute; top: -2px; bottom: -2px; width: 1px; background: rgba(255, 255, 255, 0.6); } /* 危險區的刻度 */
.mb.hope .bar::before { left: 0; } .mb.hope .bar::after { left: 25%; }
.mb.unrest .bar::before { right: 0; } .mb.unrest .bar::after { right: 30%; }
.mb.hope { --c-mood: var(--cd-amber); } .mb.unrest { --c-mood: #9ec3d6; }
.mb.danger { --c-mood: var(--cd-red); } .mb.danger .n { color: #ff9a90; }
.u-mood.alarm { outline: 1px solid transparent; outline-offset: 5px; animation: mood-breathe 2.4s ease-in-out infinite; }
@keyframes mood-breathe { 50% { outline-color: rgba(224, 87, 76, 0.65); } }
/* 冰暴警示與目標（新手提示）往第三行讓；目標寬度不超過警示條左緣 */
.u-warn { top: 80px; }
.goal { top: 80px; max-width: max(160px, calc(50vw - 310px)); }
@media (max-width: 1000px) { /* 資源列掉到右邊第二行：希望／方舟／不安跟著掉到第三行，冰暴警示第四行 */
  .u-mood { top: 96px; }
  .u-warn { top: 128px; }
}

/* 希望預告的第二行（第 81 題 D1）：為什麼在掉、補得回來的出口。字比第一行小一點，窄螢幕折行 */
.u-warn .win.why { min-height: 0; padding: 6px 18px; gap: 2px 22px; font-size: 12px; line-height: 1.45; text-align: center; }
.u-warn .win.why .hg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; } /* 一組（標籤＋內容）當一個單位折行：窄螢幕上第一組一行、第二組一行 */
.u-warn .win.why .hw { color: #fff; }
/* =========================================================
   歸航 HOMEWARD — 建造抽屜（design/ui-mock/cd-build.html）
   平常收成左下的「建造 B」；按 B 才從按鈕往上展開一個小抽屜：左邊類別、右邊一行一個建築；
   滑過（或鍵盤聚焦）的那一行才展開說明與數字，不另開提示卡。NOVA 字幕與通知在抽屜開著時讓位（cd.css 的 #app.build-open）。
   點一格空地打開的是同一個抽屜，最上面多一段「這格」（.bcell：地形一行＋「這格能蓋的」橫向一列小卡）；沒有就是 0 高的第一列。
   ========================================================= */
.bdr { left: 22px; bottom: 70px; width: 600px; max-height: calc(100% - 170px); display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; opacity: var(--panel-dim, 1); }
.bdr > .bcats, .bdr > .items { grid-row: 2; }
.bdr > .bfoot { grid-row: 3; }
/* 「這格」：從空地打開才有；第一次打開抽屜的那一句說明（.hintrow）也放這裡 */
.bcell { grid-column: 1 / -1; grid-row: 1; min-width: 0; padding: 10px 14px 10px; border-bottom: 1px solid var(--cd-hair); }
.bcell[hidden] { display: none; }
.bcell .hintrow { margin: 0 0 8px; }
.bcell .hintrow kbd { font-size: 11px; }
.bc-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 26px; }
.bc-h b { font: 700 14px/1.3 var(--f-ui); color: #eef2f4; }
.bc-h .lbl { font-size: 11.5px; color: var(--cd-fg-3); }
.bc-h .cbtn { margin-left: auto; }
.bc-d { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--cd-fg-2); }
.bc-d .past { color: var(--cd-fg-3); }
.bc-d span + span::before { content: '　'; }
.bc-t { margin: 8px 0 5px; font: 600 11.5px/1.2 var(--f-ui); color: var(--cd-fg-3); letter-spacing: 0.04em; }
.bc-row { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding-bottom: 2px; }
.bt { flex: none; width: 86px; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 7px 4px 6px; text-align: center; color: inherit; font: inherit; background: rgba(255, 255, 255, 0.03); border: 0; box-shadow: inset 0 0 0 1px var(--cd-hair); cursor: pointer; }
.bt:hover, .bt:focus-visible { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); outline: none; }
.bt img { width: 40px; height: 40px; object-fit: contain; filter: saturate(0.75) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.bt b { font-size: 12px; line-height: 1.25; font-weight: 700; color: #eef2f4; }
.bt .cost { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; font-size: 11.5px; }
.bt .cost > span { display: inline-flex; align-items: center; gap: 2px; }
.bt .cost .ic { width: 11px; height: 11px; }
.bt .short { color: #ff8a80; }
.bc-none { margin: 0; font-size: 12px; color: var(--cd-fg-3); }
/* 矮的視窗（手機橫放）：抽屜只有兩百多 px 高，「這格」一放上去下面的類別與卡片就沒位置了——整個抽屜改成一起捲（類別、卡片不再各自捲），
   鍵盤提示那一列收起來；「這格」的卡改成一行的小條（縮圖、名稱、成本並排） */
@media (max-height: 560px) {
  .bdr { grid-template-rows: auto auto; overflow-y: auto; scrollbar-gutter: stable; }
  .bdr > .bcats, .bdr > .items { overflow: visible; }
  .bdr > .bfoot { display: none; }
  .bcell { padding: 8px 12px; }
  .bc-t { margin: 4px 0 3px; }
  .bt { grid-auto-flow: column; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; width: auto; }
  .bt img { width: 28px; height: 28px; }
  .bt .cost { flex-wrap: nowrap; }
}
.bdr[hidden] { display: none; }
.bcats { padding: 10px 0; border-right: 1px solid var(--cd-hair); overflow-y: auto; scrollbar-width: thin; }
.bcats button { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 14px; font-size: 13px; color: var(--cd-fg-2); text-align: left; background: none; border: 0; cursor: pointer; }
.bcats button .ic { width: 15px; height: 15px; color: currentColor; }
.bcats button .n { margin-left: auto; font-size: 11px; color: var(--cd-lcd-2); }
.bcats button:hover { color: #fff; }
.bcats button.on { color: #fff; background: rgba(255, 255, 255, 0.06); box-shadow: inset 2px 0 0 #fff; }
.items { padding: 6px 0 8px; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.it { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; width: 100%; padding: 6px 14px; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.it:hover, .it:focus-visible, .it.on { background: rgba(255, 255, 255, 0.05); }
.it img { width: 44px; height: 44px; grid-row: span 2; object-fit: contain; filter: saturate(0.75) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.it b { font-size: 14px; font-weight: 700; color: #eef2f4; }
.it .cost { justify-self: end; display: flex; gap: 10px; font-size: 13px; }
.it .cost > span { display: inline-flex; align-items: center; gap: 3px; }
.it .cost .ic { width: 12px; height: 12px; }
.it .meta { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; color: var(--cd-fg-3); }
.it .meta .n { font-size: 11.5px; }
.it .meta .ic { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.it .meta .okr { color: var(--cd-fg-2); }
.it.lock { opacity: 0.72; }
.it .short { color: #ff8a80; }
.it.is-built { opacity: 0.72; }
/* 一波波發現（G16）：第一局剛長出來的建築標「新」（波次剛揭露、研究／協議剛解鎖，24 遊戲小時內、還沒蓋過） */
.it.isnew { box-shadow: inset 2px 0 0 var(--cd-amber); }
.it .newtag, .msum .newtag { display: inline-block; margin-left: 8px; padding: 1px 6px 2px; border-radius: 3px; font: 800 11px/1.3 var(--f-ui); letter-spacing: 0.08em; font-style: normal; color: #2b1805; background: linear-gradient(180deg, #ffe2b8, #e3aa6a); vertical-align: 1px; }
.it[disabled] { pointer-events: none; }
/* 說明在抽屜右邊的浮層（#bpop，buildbar.ts 擺位）：滑過那一行才出現，不佔列裡的位置——在列裡展開會把下面的列推開 */
.bpop { z-index: 8; width: 300px; padding: 12px 14px 12px; pointer-events: none; font-size: 12.5px; color: var(--cd-fg-2); line-height: 1.6; }
.bpop .pn { display: block; margin-bottom: 4px; font: 700 14px/1.3 var(--f-ui); color: #eef2f4; }
.bpop .kvs { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--cd-hair); }
.bpop .kvs > span { display: inline-flex; gap: 6px; align-items: baseline; }
.bpop .kvs .k { flex: none; white-space: nowrap; } /* 標籤不准縮、不准換行：值很長時它會被壓到 min-content，中文逐字斷成「施／工」 */
.bpop .kvs .v { min-width: 0; } /* 值這一側才換行 */
.bpop .kvs .n { font-size: 13px; }
.bpop .nv { display: block; margin-top: 6px; font: 400 12px/1.5 var(--f-num); color: var(--cd-radio); }
.hintrow { display: flex; gap: 10px; align-items: flex-start; margin: 6px 14px 4px; padding: 8px 10px; font-size: 12.5px; line-height: 1.55; color: var(--cd-fg-2); border: 1px dashed rgba(255, 255, 255, 0.22); }
.hintrow .ic { width: 15px; height: 15px; margin-top: 2px; flex: none; color: var(--cd-fg-3); }
.hintrow b { color: var(--cd-fg); font-weight: 700; }
.bfoot { grid-column: span 2; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 9px 14px; border-top: 1px solid var(--cd-hair); font-size: 11.5px; color: var(--cd-fg-3); }
.bfoot .r { margin-left: auto; text-align: right; }
@media (max-width: 1099px) { .bdr { width: min(560px, calc(100% - 44px)); grid-template-columns: 112px minmax(0, 1fr); } .bcats button { padding: 0 10px; } }
@media (max-width: 1000px) { .bdr { max-height: calc(100% - 70px - var(--b2-top)); } } /* 資源列掉到第二行、希望／不安到第三行：抽屜的上緣讓開它們（和圖板同一條線） */

/* ---------- 分類圖示（「建造 B」右邊常駐一排）：滑過浮出名稱（絕對定位的浮層，不推動任何東西），點一下展開抽屜並跳到那一類 ---------- */
.buildk { z-index: 8; } /* 名稱浮層要壓過往上展開的抽屜（z 7） */
.buildk .bb .lbl#dock-caret { display: inline-block; min-width: 10px; text-align: center; } /* 抽屜開關時 ▴ 出現又消失：寬度先留著，右邊的圖示不跟著跳 */
.buildk .dcats { display: flex; align-items: center; gap: 1px; margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--cd-hair); }
.buildk .dc { position: relative; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: var(--cd-fg-2); background: none; border: 0; cursor: pointer; }
.buildk .dc .ic { width: 17px; height: 17px; color: currentColor; }
.buildk .dc:hover, .buildk .dc:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.1); outline: none; }
.buildk .dc.on { color: #fff; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 -2px 0 #fff; }
.buildk .dc .cn { position: absolute; right: 1px; top: 1px; min-width: 12px; padding: 0 2px; text-align: center; font: 700 9.5px/12px var(--f-num); color: #f3f6f7; text-shadow: none; background: rgba(6, 8, 12, 0.8); border-radius: 6px; }
.buildk .dc .cd { position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--cd-amber); box-shadow: 0 0 6px var(--cd-amber); }
.buildk .dc .cd[hidden] { display: none; }
.buildk .dc::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); padding: 4px 8px; font: 600 12px/1.2 var(--f-ui); white-space: nowrap; color: #fff; text-shadow: none; background: rgba(6, 8, 12, 0.92); box-shadow: inset 0 0 0 1px var(--cd-hair); opacity: 0; pointer-events: none; transition: opacity 120ms; }
.buildk .dc:hover::after, .buildk .dc:focus-visible::after { opacity: 1; }
@media (max-width: 760px) { .buildk .dcats { display: none; } } /* 手機維持建造鍵＋抽屜 */
@media (max-width: 1000px) { #app.panel-open .buildk .dcats { display: none; } } /* 平板、手機橫放：右側欄開著時會伸到這一排上面，先收起來只留建造鍵 */

/* ---------- 第一天的引導：地上一格發亮（buildguide.ts 每幀把它貼到那一格的中心；NOVA 的建議用 NOVA 的顏色）。不吃點擊，點下去的是底下的地圖 ---------- */
.guide-cell { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; pointer-events: none; }
.guide-cell[hidden] { display: none; }
/* 白天的雪地很亮：光圈外面多一圈暗邊、中間一層淡光，亮地暗地都讀得到 */
.guide-cell::before, .guide-cell::after { content: ''; position: absolute; left: -48px; top: -28px; width: 96px; height: 56px; border-radius: 50%; border: 2.5px solid #e6f6fd; }
.guide-cell::before { background: radial-gradient(closest-side, rgba(150, 214, 238, 0.32), rgba(150, 214, 238, 0) 100%); box-shadow: 0 0 0 1.5px rgba(4, 10, 18, 0.45), 0 0 20px rgba(150, 214, 238, 0.95), inset 0 0 0 1.5px rgba(4, 10, 18, 0.35), inset 0 0 16px rgba(150, 214, 238, 0.55); }
.guide-cell::after { animation: gc-pulse 1.8s ease-out infinite; box-shadow: 0 0 12px rgba(150, 214, 238, 0.9); }
.guide-cell.flat::before, .guide-cell.flat::after { top: -48px; height: 96px; }
@keyframes gc-pulse { from { transform: scale(0.75); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }
#app.cine .guide-cell, #app.board-open .guide-cell, #app.panel-people .guide-cell, #app.title-mode .guide-cell, #app.end-mode .guide-cell, #app.placing .guide-cell { display: none; }
html.motion-reduce .guide-cell::after { animation: none; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .guide-cell::after { animation: none; opacity: 0.5; } }
/* =========================================================
   建築檢視（樣稿 cd-inspect.html）：窄面板，平常只回答三件事——它在不在工作、誰在裡面、能做什麼；
   第二層（<details class="more">）才有地圖徽章、拆解入艦的得失。#drawer[data-tab="inspect"] 把外殼的標題列藏起來，標題在內容裡。
   ========================================================= */
#drawer[data-tab="inspect"] { width: 350px; bottom: auto; max-height: calc(100% - 84px); overflow: hidden; }
@media (max-width: 1100px) and (min-height: 521px) { #drawer[data-tab="inspect"] { max-height: calc(100% - var(--b2-top) - 22px); } } /* 窄視窗側欄的上緣是 --b2-top（84 或 124），不是 62：高度上限跟著扣（組合區塊與確認卡讓內容變長之後，平板直放會伸出畫面底下）；手機橫放的上緣是 52，照原本的 84 */
#drawer[data-tab="inspect"] .dh { display: none; }
#drawer[data-tab="inspect"] .db { padding: 0 0 4px; }
.ins-eb, .db .eb { font: 500 10.5px/1 var(--f-num); letter-spacing: 0.16em; color: var(--cd-fg-3); padding: 14px 16px 0; display: block; }
.db .panel-h { padding-top: 6px; }
.db .panel-h h2 { font: 700 17px/1.2 var(--f-ui); color: #eef2f4; }
.db .panel-h .x, .who .x { width: 24px; height: 24px; display: grid; place-items: center; color: var(--cd-fg-3); background: none; border: 0; cursor: pointer; }
.db .panel-h .x { margin-left: auto; }
.db .panel-h .x:hover, .who .x:hover { color: #fff; }
.db .panel-h .x .ic, .who .x .ic { width: 14px; height: 14px; color: currentColor; }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0 16px; font-size: 13px; color: var(--cd-fg-2); }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: #c9d4cf; box-shadow: 0 0 6px rgba(201, 212, 207, 0.7); }
.status .bad, .faces .sick, .gl .bad { color: #ff9a90; }
.status .sep { height: 12px; }
.kvs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 16px 2px; }
.kv { display: flex; flex-direction: column; gap: 4px; }
.kvs .kv .n { font-size: 20px; }
.kvs .kv > span { white-space: nowrap; }
.kvs .kv .lbl { font-size: 11px; }
.line { height: 1px; background: var(--cd-hair); margin: 10px 16px; }
.insb { padding: 12px 16px 14px; }
.who { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; margin: 0; list-style: none; }
.who .lbl { margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
.who .step { display: inline-flex; }
.who li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.who li .pt { width: 26px; height: 26px; border-radius: 2px; object-fit: cover; filter: saturate(0.55) brightness(0.92); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.who li b { font-weight: 500; color: var(--cd-fg); }
.who li small { margin-left: auto; font-size: 11.5px; color: var(--cd-fg-3); }
.who li.empty { color: #ff9a90; }
.who li.empty b { color: #ff9a90; }
.who li.empty .pt { display: grid; place-items: center; background: rgba(224, 87, 76, 0.12); box-shadow: inset 0 0 0 1px rgba(224, 87, 76, 0.5); filter: none; }
.who li.empty .pt .ic { width: 15px; height: 15px; color: #ff9a90; }
.faces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 0 16px; }
.faces span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: var(--cd-fg-2); min-width: 0; }
.faces .pt { width: 40px; height: 40px; border-radius: 2px; object-fit: cover; filter: saturate(0.55) brightness(0.92); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 14px; }
.acts .cbtn { height: 30px; padding: 0 10px; font-size: 12.5px; }
.bdg { margin: 0; padding: 0; list-style: none; }
.bdg li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 12.5px; color: var(--cd-fg-2); padding: 3px 0; line-height: 1.5; }
.bdg .ic { width: 15px; height: 15px; margin-top: 2px; color: var(--cd-fg-3); }
/* 第二層的「拆解入艦」：一行摘要（按鈕），點了才展開得失與確認 */
.more > .msum { list-style: none; display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; font-size: 13px; color: var(--cd-fg-2); cursor: pointer; background: none; border: 0; text-align: left; }
.more > .msum::before { content: "▸"; font-size: 11px; color: var(--cd-fg-3); transition: transform var(--t-fast); }
.more.open > .msum::before { transform: rotate(90deg); }
.more > .msum .lbl { margin-left: auto; }
.more > .msum .ic { width: 15px; height: 15px; color: currentColor; }
.more.open > .msum { color: var(--cd-fg); }
.more > summary .ic { width: 15px; height: 15px; color: currentColor; }
.more > div { padding: 0 16px 12px; }
.gl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 12.5px; line-height: 1.55; }
.gl h5 { font: 600 11.5px var(--f-ui); color: var(--cd-fg-3); margin: 0 0 4px; }
.gl ul { margin: 0; padding: 0; list-style: none; }
.gl li { color: var(--cd-fg); margin-bottom: 3px; }
.gl li small { display: block; color: var(--cd-fg-3); font-size: 11.5px; }
.ctitle { display: block; font-size: 13px; color: var(--cd-fg); margin-bottom: 8px; }
.dnova { margin: 10px 0 0; font: 400 12.5px/1.6 var(--f-num); color: var(--cd-radio); }
.dact { display: flex; gap: 6px; margin-top: 10px; }
/* 拆城的三個出口（G6 第三批）：一般拆除／拆解入艦／拆解回收並列 */
.otl { margin: 0 0 10px; }
.otl h5 { font: 600 11.5px var(--f-ui); color: var(--cd-fg-3); margin: 0 0 2px; }
.dact .cbtn { flex: 1; }
/* 住所拆解：人的時刻 → 一張小紙條（暖只出現在這裡） */
.homeslip { margin-top: 10px; display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; padding: 8px 10px; color: var(--ink); transform: rotate(-0.6deg);
  background: var(--paper-grain), linear-gradient(176deg, #ece0c4, #dccaa2); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); }
.homeslip img { width: 74px; height: 56px; object-fit: cover; filter: sepia(0.35) contrast(1.05); box-shadow: 0 0 0 3px #f6f1e6, 0 2px 4px rgba(0, 0, 0, 0.3); }
.homeslip p { margin: 0; font: 600 14.5px/1.4 var(--f-hand-tc); color: var(--ink-blue); }
/* 舊內容在窄面板裡的小調整 */
#drawer[data-tab="inspect"] .sec { margin: 0 0 14px; }
#drawer[data-tab="inspect"] .db .confirm { margin: 10px 16px; }
#drawer[data-tab="inspect"] .db > .confirm { margin: 10px 16px; }
/* 第二層（樣稿 cd.css 的 .more）：預設收起，點了才展開 */
.more { border-top: 1px solid var(--cd-hair); }
.more > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 13px; color: var(--cd-fg-2); cursor: pointer; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "▸"; font-size: 11px; color: var(--cd-fg-3); transition: transform var(--t-fast); }
.more[open] > summary { color: var(--cd-fg); }
.more[open] > summary::before { transform: rotate(90deg); }
.more > summary .lbl { margin-left: auto; }
.more > summary .n { font-size: 13px; }
.panel-h { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 8px; }
.panel-h .lbl { margin-left: auto; }
.st-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 0 0; padding: 0 16px; font-size: 12.5px; color: var(--cd-fg-2); }
.st-line .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; color: var(--cd-fg-3); }
.st-line span { color: var(--cd-fg-3); font-size: 11.5px; }
.mini { width: 100%; height: 70px; display: block; }
.mini .nt { fill: rgba(255, 255, 255, 0.04); }
.mini .ln { fill: none; stroke: var(--cd-lcd); stroke-width: 1.5; }
.mini .ln2 { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 3 3; }
.mini text { font: 400 9.5px var(--f-num); fill: var(--cd-fg-3); }
/* =========================================================
   歸航 HOMEWARD — 人的時刻：黑邊裡的一張紙（design/ui-mock/cd.css 的 .ev-a、hud-cd.html#event）
   事件與發射確認用。場景壓暗模糊是 #app.is-event（cd.css）、上下黑邊是 .lb；這裡只管紙。
   選項是 <button class="choice">（按 1–9、測試點 #modal .choice），樣式用 #modal 加權蓋過舊的 .choice 卡片。
   ========================================================= */
#modal.is-paper { background: transparent; padding: 0; z-index: 40; backdrop-filter: none; -webkit-backdrop-filter: none; } /* 舊的 .overlay 會把下面的東西糊掉三像素——黑邊裡的操作提示（.lb-cap）就在它下面 */
.ev-a { position: relative; width: min(620px, calc(100% - 36px)); max-height: calc(100% - 200px); overflow-y: auto; padding: 12px 12px 14px; transform: rotate(-0.4deg); animation: drop-in 600ms var(--ease-snap) 150ms both; scrollbar-width: thin; }
.ev-tx { padding: 12px 16px 0; }
.ev-tx h2 { font: 900 25px/1.3 var(--f-story); margin: 8px 0 6px; color: var(--ink); }
.ev-tx p { font: 500 14.5px/1.75 var(--f-story); color: var(--ink); margin: 0 0 6px; }
.ev-ch { margin-top: 10px; }
#modal .ev-ch .choice { display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; width: 100%; padding: 8px; text-align: left; color: var(--ink); background: none; border: 0; border-top: 1px solid rgba(90, 64, 30, 0.25); border-radius: 0; box-shadow: none; transform: none; cursor: pointer; }
#modal .ev-ch .choice:hover:not(:disabled), #modal .ev-ch .choice:focus-visible { background: rgba(201, 107, 28, 0.12); box-shadow: inset 3px 0 0 var(--ember-deep); border-color: rgba(90, 64, 30, 0.25); outline: none; }
#modal .ev-ch .choice .no { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; font: 700 13px/1 var(--f-num); color: #fff7ea; background: var(--ink); border-radius: 50%; }
#modal .ev-ch .choice:hover:not(:disabled) .no, #modal .ev-ch .choice:focus-visible .no { background: #8f4208; } /* 白字 6.7:1（--ember-deep 只有 3.5） */
#modal .ev-ch .choice b { font: 900 15px/1.4 var(--f-story); color: var(--ink); }
#modal .ev-ch .choice .fx2 { font: 500 12px/1.45 var(--f-ui); color: var(--ink-2); }
#modal .ev-ch .choice:disabled { opacity: 0.74; cursor: not-allowed; } /* 停用的選項（要先有船體骨架…）：0.6 時序號 2.3、小字 2.7，低於停用字的底線 3 */
#modal .ev-ch .choice:disabled .no { background: var(--ink-3); }
@media (max-width: 760px) { .ev-a { max-height: calc(100% - 120px); } .ev-tx h2 { font-size: 22px; } }

/* ---- 手札（design/ui-mock/cd-event-b.html）：重大的決定。左頁現場（照片、在場的人和一句話、NOVA 貼的盤點）、右頁決定 ----
   尺寸跟著視窗縮（樣稿 1080×640）；頁面比內容矮就在頁裡捲動，不疊在一起。 */
.book { position: relative; width: min(1080px, calc(100% - 40px)); height: min(640px, calc(100% - 200px)); transform: rotate(-0.3deg); padding: 10px; display: grid; grid-template-columns: 1fr 1fr; background: radial-gradient(120% 120% at 50% 40%, #3e2a1c, #1e130b); border-radius: 7px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), inset 0 0 0 2px #4d3422; animation: drop-in 600ms var(--ease-snap) 150ms both; }
.book .page { position: relative; overflow: hidden auto; scrollbar-width: thin; }
.book .page.l { display: flex; flex-direction: column; border-radius: 4px 0 0 4px; box-shadow: inset -40px 0 40px -30px rgba(70, 40, 10, 0.55), var(--sh-paper); padding: 26px 30px 20px; }
.book .page.r { border-radius: 0 4px 4px 0; box-shadow: inset 40px 0 40px -30px rgba(70, 40, 10, 0.55), var(--sh-paper); padding: 26px 32px 0 36px; }
.book .ev-tx { padding: 0; }
.book .ev-tx h2 { font-size: 26px; line-height: 1.25; margin: 10px 0 6px; }
.book .spine { position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; background: rgba(50, 30, 10, 0.5); z-index: 2; }
.book .photo { flex: none; margin: 0; padding: 8px 8px 26px; background: linear-gradient(180deg, #fbf8f1, #efe8d9); box-shadow: var(--sh-polaroid); transform: rotate(-2deg); position: relative; }
.book .photo img { display: block; width: 100%; height: 210px; object-fit: cover; object-position: 50% 45%; filter: sepia(0.35) contrast(1.1) brightness(0.9) saturate(0.85); }
.book .photo figcaption { position: absolute; left: 12px; bottom: 5px; font: 600 15px/1 var(--f-hand-tc); color: var(--ink-blue); }
/* 插畫（ui/illust.ts）：手繪的圖不套照片的棕褐濾鏡（那會把水彩弄髒）；圖自帶不規則的紙邊，所以拍立得的白框收窄；沒載好時是紙色底，不是一個洞 */
.book .photo.ill { padding: 5px 5px 24px; }
.book .photo.ill img { height: auto; aspect-ratio: 1600 / 740; object-fit: cover; object-position: 50% 50%; filter: none; background: #f1ebde; }
.book.solo .page.l { justify-content: center; } .book.solo .pfoot { display: none; } /* 沒有人要放（只有插畫）：圖放在左頁正中，不要吊在頂端、下面一大片空白 */
.book .whot { margin: 16px 2px 0; font: 600 14.5px/1.2 var(--f-hand-tc); color: var(--ink-blue); }
.book .who { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.book .who > div { display: flex; flex-direction: column; align-items: center; }
.book .who .cap2 { margin: 6px 0 0; text-align: center; font: 600 14px/1.3 var(--f-hand-tc); color: var(--ink-blue); }
.book .who .cap2 b { display: block; font: 700 13.5px/1.3 var(--f-story); color: var(--ink); }
.book .pfoot { margin-top: auto; padding-top: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.book .est { position: relative; flex: none; width: 250px; padding: 8px 12px; transform: rotate(1.2deg); font: 400 12px/1.6 var(--f-num); color: #b7cabf; background: rgba(14, 20, 18, 0.92); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px #2a332e; }
.book .est::before { content: ""; position: absolute; top: -8px; left: 40%; width: 60px; height: 14px; background: var(--tape); transform: rotate(-4deg); }
.book .est .h { display: block; font-size: 10px; letter-spacing: 0.2em; color: #a7bab0; margin-bottom: 2px; }
.book .ink-note { margin: 0 0 6px; width: 170px; font: 600 16px/1.35 var(--f-hand-tc); color: var(--ink-red); transform: rotate(-4deg); }
/* =========================================================
   歸航 HOMEWARD — 方舟面板（design/ui-mock/cd-ark.html）：右側一條，鏡頭推到發射台（渲染器那邊不動）
   第一層只回答：座位夠不夠、還缺什麼才能走、下一個窗口還多久；第二層（<details class="more">）：船身、拆解入艦、冷凍艙、核心入艦、方舟儲備。
   交出判斷權之後：.nj（NOVA 的判斷）＋ .go.lk（按鈕停用、寫原因，照 design 的 #nova 版）。
   ========================================================= */
#drawer[data-tab="ark"] { width: 430px; overflow: hidden; }
#drawer[data-tab="ark"] .dh { display: none; }
#drawer[data-tab="ark"] .db { padding: 0; display: block; overflow-y: auto; scrollbar-width: thin; }
#drawer[data-tab="ark"] .mores { flex: none; overflow: visible; margin-top: 8px; }
#drawer[data-tab="ark"] .go { position: sticky; bottom: 0; z-index: 2; background: rgba(10, 14, 16, 0.99); margin-top: 8px; }
.seats { padding: 4px 16px 0; }
.seats .big { display: flex; align-items: baseline; gap: 8px; }
.seats .big .n { font-size: 34px; }
.seats .big .of { font: 400 14px var(--f-num); color: var(--cd-fg-3); }
.seats .big .gap { margin-left: auto; font-size: 13px; color: #ff9a90; }
.ticks { display: grid; gap: 2px; margin: 8px 0 5px; }
.ticks i { height: 12px; background: var(--cd-lcd); opacity: 0.85; }
.ticks i.c { background: none; box-shadow: inset 0 0 0 1.5px var(--cd-lcd); }
.ticks i.n { background: none; box-shadow: inset 0 0 0 1px rgba(224, 87, 76, 0.75); opacity: 1; }
.ticks i.q { background: rgba(183, 202, 191, 0.25); }
.tleg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--cd-fg-3); }
.tleg i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; }
.chk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 0 16px; font-size: 13px; }
.chk span { display: flex; align-items: center; gap: 6px; color: var(--cd-fg-2); }
.chk .ic { width: 14px; height: 14px; }
.chk .ok { color: var(--cd-fg); } .chk .ok .ic { color: var(--cd-lcd); }
.chk .no .ic { color: var(--cd-red); }
.chk .n { font-size: 12.5px; }
.wins { display: flex; gap: 6px; padding: 10px 16px 0; font-size: 12px; color: var(--cd-fg-3); }
.wins span { flex: 1; padding: 6px 0; text-align: center; box-shadow: inset 0 0 0 1px var(--cd-hair); }
.wins span .n { display: block; font-size: 12.5px; margin-top: 2px; }
.wins .past { opacity: 0.45; text-decoration: line-through; }
.wins .next { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); color: var(--cd-fg); }
.mores .more > summary { padding: 8px 16px; }
.segs { display: flex; gap: 3px; margin: 2px 0 6px; }
.segs span { flex: 1; height: 26px; display: grid; place-items: center; font: 400 10px/1 var(--f-num); color: var(--cd-fg-3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.segs .d { background: rgba(183, 202, 191, 0.18); color: var(--cd-lcd); }
.segs .p { background: linear-gradient(90deg, rgba(183, 202, 191, 0.18) var(--p), transparent var(--p)); }
.segl { display: flex; gap: 3px; font-size: 10.5px; color: var(--cd-fg-3); }
.segl span { flex: 1; text-align: center; }
.padwork { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--cd-fg-2); flex-wrap: wrap; }
.padwork .step { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.padwork .cbtn { height: 26px; padding: 0 8px; font-size: 12px; }
.curseg { margin-top: 8px; padding: 8px 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); font-size: 13px; }
.dl { margin: 0; padding: 0; list-style: none; }
.dl li { display: grid; grid-template-columns: 18px 1fr auto; gap: 1px 10px; align-items: center; padding: 5px 0; border-top: 1px solid var(--cd-hair); font-size: 13px; }
.dl li:first-child { border-top: 0; }
.dl .cb { width: 14px; height: 14px; box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, 0.4); display: grid; place-items: center; }
.dl li.on .cb { background: #d7dde1; box-shadow: none; color: #101418; }
.dl .cb .ic { width: 11px; height: 11px; stroke-width: 2.6; color: #101418; }
.dl .g { font-family: var(--f-num); font-weight: 700; color: var(--cd-lcd); font-size: 12.5px; }
.dl small { grid-column: 2 / 4; font-size: 11.5px; color: var(--cd-fg-3); }
.dl small.bad, .dl .bad { color: #ff9a90; }
.dl .dm { display: contents; color: inherit; font: inherit; cursor: pointer; }
.dl li:has(> .dm) { cursor: pointer; }
.dl li:has(> .dm):hover { background: rgba(255, 255, 255, 0.04); }
.segrows li { grid-template-columns: 1fr auto; }
.segrows li > span:first-child { grid-column: 1; }
.segrows .g { grid-column: 2; }
.segrows .sr-f { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.segrows .sr-f .cost { display: inline-flex; gap: 8px; font-size: 12px; }
.segrows li > .cbtn, .segrows li > .lbl { grid-column: 2; justify-self: end; height: 26px; padding: 0 10px; font-size: 12px; }
.segrows li > small { grid-column: 1 / 3; }
.pods { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 12.5px; color: var(--cd-fg-2); }
.pods .cbtn { height: 26px; padding: 0 10px; font-size: 12px; }
.pod { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.pod b { font-weight: 500; color: var(--cd-fg); }
.pod .cbtn { margin-left: auto; height: 26px; padding: 0 10px; font-size: 12px; }
.kvl { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--cd-fg-2); }
.kvl small { color: var(--cd-fg-3); }
.go { padding: 12px 16px 14px; border-top: 1px solid var(--cd-hair); display: flex; gap: 8px; }
.go .cbtn { flex: 1; height: 38px; }
.go.lk { flex-wrap: wrap; }
.go.lk .lockr { flex-basis: 100%; }
.lockr { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; font-size: 12px; color: var(--cd-fg-2); }
.lockr .ic { width: 13px; height: 13px; margin-top: 2px; color: var(--cd-fg-3); }
.lockr b { color: var(--cd-fg); }
.nj { margin: 8px 16px 0; padding: 9px 12px 10px; box-shadow: inset 0 0 0 1px rgba(169, 194, 204, 0.35); background: rgba(169, 194, 204, 0.05); }
.nj .k { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; color: var(--cd-radio); letter-spacing: 0.06em; }
.nj .k .n { margin-left: auto; font-size: 12.5px; letter-spacing: 0; }
.nj .ok-l { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.nj .ok-l > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--cd-fg-2); }
.nj .ok-l .ok { color: var(--cd-fg); } .nj .ok-l .ok .ic { color: var(--cd-lcd); } .nj .ok-l .no .ic { color: var(--cd-red); }
.nj .ok-l .ic { width: 14px; height: 14px; }
.nj .ok-l small { flex-basis: 100%; padding-left: 20px; font-size: 11.5px; color: var(--cd-fg-3); }
.nj .nsay { margin: 7px 0 0; padding-top: 6px; border-top: 1px dashed rgba(169, 194, 204, 0.3); font: 400 12px/1.6 var(--f-num); color: var(--cd-radio); }
/* =========================================================
   歸航 HOMEWARD — 方舟面板的第二、三個分頁：奧德賽七號（design/ui-mock/cd-odyssey.html）、留守長夜（cd-vigil.html）
   選擇器全部加了 #drawer[data-tab="ark"] 前綴（和方舟號分頁共用同一個框）。雙船發射確認的手札（.book、.est…）不在這裡。
   ========================================================= */

#drawer[data-tab="ark"] .tabs { display: flex; gap: 2px; padding: 12px 16px 0; }
#drawer[data-tab="ark"] .tabs a { flex: 1; padding: 7px 0 6px; text-align: center; font-size: 12.5px; color: var(--cd-fg-3); box-shadow: inset 0 -1px 0 var(--cd-hair); }
#drawer[data-tab="ark"] .tabs a.on { color: var(--cd-fg); box-shadow: inset 0 -2px 0 #d7dde1; }
#drawer[data-tab="ark"] .tabs a .n { font-size: 11.5px; margin-left: 6px; }
#drawer[data-tab="ark"] .stl { display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 12.5px; color: var(--cd-fg-2); }
#drawer[data-tab="ark"] .stl .dot { width: 7px; height: 7px; border-radius: 50%; background: #c9d4cf; box-shadow: 0 0 6px rgba(201, 212, 207, 0.7); }
#drawer[data-tab="ark"] .stl .dot.wait { background: none; box-shadow: inset 0 0 0 1.5px #c9d4cf; }
#drawer[data-tab="ark"] .prog { display: grid; grid-template-columns: 44px 1fr auto; gap: 6px 10px; align-items: center; padding: 12px 16px 0; font-size: 12px; color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .prog .bar { position: relative; height: 6px; background: rgba(255, 255, 255, 0.1); }
#drawer[data-tab="ark"] .prog .bar em { position: absolute; inset: 0 auto 0 0; background: var(--cd-lcd); }
#drawer[data-tab="ark"] .prog .bar i { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, rgba(183, 202, 191, 0.55) 0 3px, transparent 3px 5px); }
#drawer[data-tab="ark"] .prog .v { font-size: 12.5px; color: var(--cd-fg-2); }
#drawer[data-tab="ark"] .prog .v .n { font-size: 14px; }
#drawer[data-tab="ark"] .prog small { grid-column: 2 / 4; margin-top: -3px; font-size: 11px; color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .blk { padding: 0 16px; }
#drawer[data-tab="ark"] .blk h4 { display: flex; align-items: baseline; font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: var(--cd-fg-3); margin: 0 0 7px; }
#drawer[data-tab="ark"] .blk h4 .lbl { margin-left: auto; letter-spacing: 0; font-size: 11px; }
#drawer[data-tab="ark"] .crew { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; }
#drawer[data-tab="ark"] .crew span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cd-fg); }
#drawer[data-tab="ark"] .crew small { color: var(--cd-fg-3); font-size: 11px; }
#drawer[data-tab="ark"] .crew .mug { width: 26px; height: 26px; }
#drawer[data-tab="ark"] .trip { display: grid; grid-template-columns: 18px 1fr auto; gap: 3px 9px; align-items: center; font-size: 12.5px; color: var(--cd-fg); padding: 4px 0; }
#drawer[data-tab="ark"] .trip .ic { width: 15px; height: 15px; color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .trip .n { font-size: 12.5px; }
#drawer[data-tab="ark"] .trip .cnt { grid-column: 2 / 4; }
#drawer[data-tab="ark"] .trip.idle { color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .seats2 { display: flex; align-items: baseline; gap: 8px; }
#drawer[data-tab="ark"] .seats2 .n.big { font-size: 28px; }
#drawer[data-tab="ark"] .seats2 .of { font: 400 13px var(--f-num); color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .seats2 .lbl { margin-left: auto; }
#drawer[data-tab="ark"] .sbox { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin: 7px 0 5px; }
#drawer[data-tab="ark"] .sbox i { height: 26px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); overflow: hidden; }
#drawer[data-tab="ark"] .sbox i .pt { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) brightness(0.92); }
#drawer[data-tab="ark"] .sbox i.g { box-shadow: inset 0 0 0 1.5px var(--cd-lcd); }
#drawer[data-tab="ark"] .sbox i.r { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 5px); }
#drawer[data-tab="ark"] .pick li { display: grid; grid-template-columns: 16px 26px 1fr auto; gap: 0 9px; align-items: center; padding: 3px 0; border-top: 1px solid var(--cd-hair); font-size: 12.5px; }
#drawer[data-tab="ark"] .pick li:first-child { border-top: 0; }
#drawer[data-tab="ark"] .pick .cb { width: 14px; height: 14px; box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, 0.4); display: grid; place-items: center; }
#drawer[data-tab="ark"] .pick li.on .cb { background: #d7dde1; box-shadow: none; }
#drawer[data-tab="ark"] .pick .cb .ic { width: 11px; height: 11px; stroke-width: 2.6; color: #101418; }
#drawer[data-tab="ark"] .pick .mug { width: 26px; height: 26px; }
#drawer[data-tab="ark"] .pick small { font-size: 11px; color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .pick .bad { color: #ff9a90; }
#drawer[data-tab="ark"] .mores { flex: 1; overflow: hidden; margin-top: 8px; }
#drawer[data-tab="ark"] .spec { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 12.5px; color: var(--cd-fg-2); }
#drawer[data-tab="ark"] .spec b { display: block; font: 700 14px var(--f-num); color: var(--cd-lcd); }
#drawer[data-tab="ark"] .p2 { font-size: 12px; line-height: 1.6; color: var(--cd-fg-2); }
#drawer[data-tab="ark"] .ok-l.two { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 10px; }
#drawer[data-tab="ark"] .fuel { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 12.5px; color: var(--cd-fg-2); }
#drawer[data-tab="ark"] .fuel .n { font-size: 12.5px; }
#drawer[data-tab="ark"] .fuel .tot { color: var(--cd-fg); border-top: 1px solid var(--cd-hair); padding-top: 4px; }
#drawer[data-tab="ark"] .go { margin-top: auto; padding: 12px 16px 14px; border-top: 1px solid var(--cd-hair); display: flex; flex-wrap: wrap; gap: 6px; }
#drawer[data-tab="ark"] .go .cbtn { flex: 1 1 auto; height: 32px; padding: 0 10px; font-size: 12px; }
#drawer[data-tab="ark"] .go .why2 { flex-basis: 100%; font-size: 11.5px; color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .cdn { display: flex; align-items: baseline; gap: 8px; padding: 2px 16px 0; }
#drawer[data-tab="ark"] .cdn .n.big { font-size: 30px; }
#drawer[data-tab="ark"] .cdn .lbl { font-size: 12px; }
#drawer[data-tab="ark"] .cdn .res { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cd-fg); }
#drawer[data-tab="ark"] .cdn .res .ic { width: 14px; height: 14px; color: var(--cd-lcd); }
#drawer[data-tab="ark"] .cond { margin: 10px 16px 0; }
#drawer[data-tab="ark"] .cond .c { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--cd-hair); }
#drawer[data-tab="ark"] .cond .c:first-child { border-top: 0; padding-top: 2px; }
#drawer[data-tab="ark"] .cond .no { font: 700 12px/20px var(--f-num); width: 20px; height: 20px; text-align: center; color: #101418; background: #d7dde1; }
#drawer[data-tab="ark"] .cond .c b { font-weight: 500; font-size: 13.5px; color: var(--cd-fg); }
#drawer[data-tab="ark"] .cond .ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--cd-lcd); }
#drawer[data-tab="ark"] .cond .ok .ic { width: 14px; height: 14px; }
#drawer[data-tab="ark"] .cond .rows { grid-column: 2 / 4; display: grid; grid-template-columns: 74px 1fr; gap: 3px 10px; align-items: baseline; font-size: 12px; color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .cond .rows .n { font-size: 15px; }
#drawer[data-tab="ark"] .cond .rows .n small { font-size: 11px; color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .cond .rows .w { grid-column: 1 / 3; color: var(--cd-fg-2); }
#drawer[data-tab="ark"] .cond .rows .w .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; color: var(--cd-amber); }
#drawer[data-tab="ark"] .trial { margin: 2px 16px 0; padding: 9px 12px 10px; box-shadow: inset 0 0 0 1px var(--cd-hair); background: rgba(255, 255, 255, 0.02); }
#drawer[data-tab="ark"] .trial h4 { display: flex; align-items: baseline; gap: 8px; font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: var(--cd-fg-3); margin: 0 0 8px; }
#drawer[data-tab="ark"] .trial h4 .n { font-size: 16px; letter-spacing: 0; color: #e3ece6; }
#drawer[data-tab="ark"] .trial h4 .lbl { margin-left: auto; letter-spacing: 0; }
#drawer[data-tab="ark"] .trial .env { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--cd-fg-2); }
#drawer[data-tab="ark"] .trial .env span { display: inline-flex; align-items: center; gap: 4px; }
#drawer[data-tab="ark"] .trial .env .ic { width: 13px; height: 13px; color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .trial .grp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--cd-hair); }
#drawer[data-tab="ark"] .trial .grp2 h5 { font: 500 12px var(--f-ui); color: var(--cd-fg); margin: 0 0 3px; }
#drawer[data-tab="ark"] .trial .grp2 h5 .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
#drawer[data-tab="ark"] .trial .grp2 p { font-size: 11.5px; line-height: 1.55; color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .trial .grp2 .bad { color: #ff9a90; }
#drawer[data-tab="ark"] .trial .grp2 .imm { color: var(--cd-radio); }
#drawer[data-tab="ark"] .vlt h6 { display: flex; align-items: baseline; gap: 8px; font: 500 11.5px var(--f-ui); color: var(--cd-fg-2); margin: 2px 0 5px; }
#drawer[data-tab="ark"] .vlt h6 .n { font-size: 12px; }
#drawer[data-tab="ark"] .vlt h6 .lbl { margin-left: auto; }
#drawer[data-tab="ark"] .sl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; margin-bottom: 8px; }
#drawer[data-tab="ark"] .sl span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cd-fg); white-space: nowrap; }
#drawer[data-tab="ark"] .sl .mug { width: 24px; height: 24px; }
#drawer[data-tab="ark"] .sl .mug .pt { filter: saturate(0.3) brightness(1.02) hue-rotate(-10deg); }
#drawer[data-tab="ark"] .sl small { font-size: 10.5px; color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .imm2 { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; font-size: 11px; color: var(--cd-radio); box-shadow: inset 0 0 0 1px rgba(169, 194, 204, 0.45); }
#drawer[data-tab="ark"] .cand li { display: grid; grid-template-columns: 24px 1fr auto; gap: 0 9px; align-items: center; padding: 4px 0; border-top: 1px solid var(--cd-hair); font-size: 12.5px; }
#drawer[data-tab="ark"] .cand li:first-child { border-top: 0; }
#drawer[data-tab="ark"] .cand .mug { width: 24px; height: 24px; }
#drawer[data-tab="ark"] .cand small { font-size: 11px; color: var(--cd-fg-3); }
#drawer[data-tab="ark"] .cand .cbtn { height: 24px; padding: 0 8px; font-size: 11.5px; }
#drawer[data-tab="ark"] .fac { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; font-size: 12.5px; color: var(--cd-fg-2); }
#drawer[data-tab="ark"] .fac .n { font-size: 12.5px; }
#drawer[data-tab="ark"] .ex li { display: grid; grid-template-columns: 70px 1fr; gap: 0 10px; padding: 5px 0; border-top: 1px solid var(--cd-hair); font-size: 12px; line-height: 1.5; color: var(--cd-fg-2); }
#drawer[data-tab="ark"] .ex li:first-child { border-top: 0; }
#drawer[data-tab="ark"] .ex b { font-weight: 500; color: var(--cd-fg); }
#drawer[data-tab="ark"] .ex .bad { color: #ff9a90; }
#drawer[data-tab="ark"] .p2 .tag2 { font-size: 10.5px; padding: 1px 5px; color: var(--cd-amber); box-shadow: inset 0 0 0 1px rgba(217, 162, 94, 0.5); }

/* 核心入艦確認框最上面那句：氧氣撐不過入艦工時（第 81 題 D2） */
.confirm .o2warn { color: #ff9a90; }
/* 決定 38「方舟從第 1 天就在場」：主畫面常駐的方舟座位數（頂部中央，點了打開方舟面板）、檢視面板的「可拆成 N 座」 */
.u-ark { display: inline-flex; align-items: center; cursor: pointer; outline: none; } /* 在 #mood-mid 裡（cd.css 的希望／不安區塊），不再是自己絕對定位的單元 */
.u-ark:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; }
@media (max-width: 900px) { .u-ark { padding: 4px 6px; margin: -4px -6px; } } /* 觸控目標至少 24px 高：座位數整塊可以點（打開方舟面板），用內距加外距抵銷，不推動這一列的版面（手機與平板寬度；以前是 .seats 的內距撐出來的，改名時一起沒了） */
.u-ark .ak { display: inline-flex; align-items: center; gap: 7px; } /* 不能叫 .win：.unit .win 的 flex 與間距會套到它身上 */
.u-ark .ic { width: 15px; height: 15px; }
.u-ark .lbl, .u-ark .un { font-size: 12px; color: var(--cd-fg-2); } /* 「方舟座位 0／19 人」：前面是座位、後面是要上船的人 */
.u-ark .nn { display: inline-flex; align-items: baseline; } /* 座位／人數連在一起，斜線貼著兩個數字 */
.u-ark .sl { margin: 0 2px; font: 400 15px/1 var(--f-ui); color: var(--cd-fg-3); }
.u-ark .sn, .u-ark .pn { font-size: 17px; } /* 兩個數字一樣大（以前 19px 對 14px，使用者問「為什麼大小不一樣」） */
.u-ark .sn { color: #f0c88d; } /* 座位還不夠＝方舟的琥珀色；夠了＝液晶綠白（下一行）。類別名不叫 seats：ark.css 的 .seats 有左右 16px 內距，會把數字撐開 */
.u-ark .sn.ok { color: var(--cd-lcd); }
.u-ark .pn { color: var(--cd-fg); } /* 冰暴白天的亮雪地上 lcd-2 只有 4.4:1，所以用主文字色 */
.u-ark .pend { font: 600 11.5px/1 var(--f-ui); color: #f6d39e; padding: 3px 6px; background: rgba(6, 8, 12, 0.9); box-shadow: inset 0 0 0 1px rgba(217, 162, 94, 0.6); text-shadow: none; }
.u-ark:hover .lbl, .u-ark:focus-visible .lbl { color: #fff; }
.seatv { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 2px 16px 10px; font-size: 12px; color: var(--cd-fg-2); }
.seatv .ic { width: 14px; height: 14px; align-self: center; color: #f0c88d; }
.seatv b { color: #f0c88d; font-weight: 600; white-space: nowrap; }
.seatv span { color: var(--cd-fg-3); font-size: 11px; }
@media (max-width: 1599px) { .u-ark .pend .pt { display: none; } } /* 中間這一格寬度有限：窄一點只留「＋N」，完整說明在提示框 */ /* =========================================================
   歸航 HOMEWARD — 功能艙的介面（G5 §1.4＋§2.5）：「→ 水耕艙」小標籤、建造卡滑過的說明、確認卡的「得到」、
   方舟面板「船身」裡的安裝點與待裝清單、發射檢查列的「航程」。冷面板的語彙（--cd-*）；小標籤用液晶灰綠，不用暖色（暖色只給人）。
   ========================================================= */
/* 拆解入艦清單的名稱靠左（按鈕的預設置中會把「名稱＋標籤」擠到格子中間） */
.dl .dm { text-align: left; }
/* 小標籤：建造卡第二列尾巴、檢視面板「可拆成 N 座」旁、拆解入艦清單每行 */
.baytag { display: inline-flex; align-items: center; height: 17px; margin-left: 6px; padding: 0 6px; font: 600 10.5px/1 var(--f-ui); font-style: normal; white-space: nowrap; vertical-align: 1px; color: var(--cd-lcd); box-shadow: inset 0 0 0 1px rgba(183, 202, 191, 0.5); }
.baytag.no { color: var(--cd-fg-3); font-weight: 400; box-shadow: inset 0 0 0 1px var(--cd-hair); }
.it .meta .baytag { margin-left: 0; }
.seatv { flex-wrap: wrap; }
.seatv .baytag { margin-left: 0; font-size: 10.5px; color: var(--cd-lcd); }
/* 建造卡滑過的說明（#bpop）多一段：功能艙效果＋48 小時 */
.bpop .baypop { display: block; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--cd-hair); color: var(--cd-fg-2); }
.bpop .baypop b { display: block; margin-bottom: 2px; font: 700 12.5px/1.4 var(--f-ui); color: var(--cd-lcd); }
.bpop .baypop small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--cd-fg-3); }
/* 確認卡「得到」的功能艙那一行 */
.gl li.baygain b { color: var(--cd-lcd); font-weight: 600; }
.gl li.baygain.no { color: var(--cd-fg-3); }
/* 方舟面板「船身」裡的功能艙：標題＋3 個安裝點＋待裝清單（清單沿用 .dl.segrows 的版面） */
.bays { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--cd-hair); }
.bays h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 7px; font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: var(--cd-fg-3); }
.bays h4 .lbl { margin-left: auto; letter-spacing: 0; font-size: 11px; }
.bslots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.bslots > span { display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 46px; padding: 4px 4px; text-align: center; color: var(--cd-fg-3); box-shadow: inset 0 0 0 1px var(--cd-hair); }
.bslots b { font-size: 12.5px; font-weight: 600; color: inherit; line-height: 1.3; }
.bslots small { font-size: 10.5px; line-height: 1.2; color: var(--cd-fg-3); }
.bslots .on { background: rgba(183, 202, 191, 0.18); color: var(--cd-lcd); box-shadow: inset 0 0 0 1px rgba(183, 202, 191, 0.5); }
.bslots .p { color: var(--cd-fg); background: linear-gradient(90deg, rgba(183, 202, 191, 0.22) var(--p), transparent var(--p)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); }
.bslots .e { border: 0; box-shadow: inset 0 0 0 1px var(--cd-hair); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 6px); }
.bays .bhint { margin: 8px 0 0; line-height: 1.6; }
.bays .bayrows { margin-top: 8px; }
/* 發射檢查列下面的「航程」：第一層一行（非阻擋，不打勾叉），點開是明細 */
.voy { margin: 10px 16px 0; box-shadow: inset 0 0 0 1px var(--cd-hair); }
.voy > summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; color: var(--cd-fg-2); cursor: pointer; list-style: none; }
.voy > summary::-webkit-details-marker { display: none; }
.voy > summary::before { content: "▸"; order: 5; margin-left: 2px; font-size: 11px; color: var(--cd-fg-3); transition: transform var(--t-fast); }
.voy[open] > summary::before { transform: rotate(90deg); }
.voy > summary .ic { width: 14px; height: 14px; color: var(--cd-fg-3); }
.voy > summary b { font-weight: 500; color: var(--cd-fg); }
.voy > summary .n { font-size: 12.5px; }
.voy > summary .rk { margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--cd-lcd); }
.voy.r-mid > summary .rk { color: var(--cd-amber); }
.voy.r-high > summary .rk { color: #ff9a90; }
.voy > div { padding: 2px 10px 10px; font-size: 12.5px; color: var(--cd-fg-2); }
.vbody .vhead { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: var(--cd-fg-3); }
.vbody .vrow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1px 8px; align-items: baseline; padding: 3px 0; }
.vbody .vrow .k { font-size: 11.5px; color: var(--cd-fg-3); }
.vbody .vrow .v { color: var(--cd-fg); }
.vbody .vrow .v small { margin-left: 8px; font-size: 11.5px; color: var(--cd-fg-3); }
.vbody .valso { margin: 3px 0 2px; padding: 0; list-style: none; font-size: 11.5px; line-height: 1.5; color: var(--cd-fg-3); }
.vbody .valso li { display: flex; align-items: baseline; gap: 6px; padding: 1px 0; }
.vbody .valso .ic { flex: none; align-self: center; width: 12px; height: 12px; color: var(--cd-lcd); }
.vbody .valso .on { color: var(--cd-fg-2); }
.vbody h5 { margin: 8px 0 3px; font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: var(--cd-fg-3); }
.vbody .vcr { margin: 0; padding: 0; list-style: none; }
.vbody .vcr li { display: grid; grid-template-columns: 16px 4.6em minmax(0, 1fr); gap: 1px 6px; align-items: baseline; padding: 3px 0; border-top: 1px solid var(--cd-hair); }
.vbody .vcr li:first-child { border-top: 0; }
.vbody .vcr .ic { width: 13px; height: 13px; align-self: center; }
.vbody .vcr li > i { font-style: normal; text-align: center; color: var(--cd-fg-3); }
.vbody .vcr b { font-weight: 500; color: var(--cd-fg); }
.vbody .vcr small { grid-column: 3; font-size: 11.5px; color: var(--cd-lcd); }
.vbody .vcr .ok .ic { color: var(--cd-lcd); }
.vbody .vcr .no .ic { color: var(--cd-red); }
.vbody .vcr .no span { color: #ff9a90; }
.vbody .vcr .na { color: var(--cd-fg-3); }
.vbody .vcr .na b, .vbody .vcr .na span { color: var(--cd-fg-3); }
.vbody .vres { margin: 8px 0 0; padding-top: 6px; border-top: 1px dashed var(--cd-hair); font-size: 13px; color: var(--cd-fg); }
.vbody .vnote { margin: 4px 0 0; line-height: 1.6; }
/* =========================================================
   歸航 HOMEWARD — 首頁（標題畫面）：電影感極簡（DECISIONS 第 37 題 A；樣稿 design/ui-mock/title-a.html）
   背景就是真的 3D 營地（game.ts 的 titleScene、R.titleMode：第一局黃昏、之後熄燈只留幾扇窗），這裡只有疊在上面的角落小東西：
   左上標誌、左下一列垂直選單、右下等寬字、第二局起一句 NOVA 無線電字幕、「新的模擬」子畫面（沒有框，只有細線）。
   內容由 ui/title.ts 畫。滑過只改顏色與標記線（::before 不佔版面），不推動任何東西（test/hover-shift.mjs 守著）。
   ========================================================= */
#title.screen { display: block; padding: 0; overflow: hidden; background: none; color: var(--cd-fg); --cd-fg: #f5f8fa; --cd-fg-2: #e6ecef; --cd-fg-3: #cfd7dc; --cd-lcd: #e2efe8; --cd-lcd-2: #bccdc4; --cd-radio: #d2e6ee; }
/* 讓左下的選單與右下的字讀得到的暗角；場景本身不壓暗。新的模擬：場景退後。
   載入畫面（style.css 的 .load-veil）用同一組暗角：載入圖淡出、3D 淡入那一下只換介面、不換暗角（G17 §7） */
:root { --tt-scrim: radial-gradient(56% 78% at 0% 100%, rgba(3, 5, 9, 0.86), rgba(3, 5, 9, 0.62) 42%, rgba(3, 5, 9, 0.24) 72%, transparent 100%),
    radial-gradient(46% 42% at 100% 100%, rgba(3, 5, 9, 0.6), transparent 100%), linear-gradient(0deg, rgba(3, 5, 9, 0.5), transparent 30%);
  --tt-top-h: 300px; --tt-top: linear-gradient(180deg, rgba(3, 5, 9, 0.68), rgba(3, 5, 9, 0.58) 120px, transparent 100%); }
@media (max-width: 760px) { :root { --tt-top-h: 380px; --tt-top: linear-gradient(180deg, rgba(3, 5, 9, 0.72), rgba(3, 5, 9, 0.64) 210px, transparent 100%); } }
@media (max-height: 520px) { :root { --tt-top-h: 170px; --tt-top: linear-gradient(180deg, rgba(3, 5, 9, 0.68), rgba(3, 5, 9, 0.58) 90px, transparent 100%); } }
#title::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--tt-scrim); }
/* 亮的場景（G17：首頁畫的那一局是白天，日照 > 0.35；game.ts 的 titleScene 加 is-bright）：低角度的鏡頭會把正午的雪地放在選單後面，暗角再加一層（.tt-dim 疊在上面兩層暗角之上）；
   桌機左下的橢圓放大、手機一條從底往上的暗帶（手機的「繼續」小字一直展開，右端超出左下那個橢圓）。用透明度淡進來：開機交接時等天色從載入圖的時刻追上才出現（§7） */
.tt-dim { inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(70% 92% at 0% 100%, rgba(3, 5, 9, 0.9), rgba(3, 5, 9, 0.78) 48%, rgba(3, 5, 9, 0.38) 78%, transparent 100%),
    radial-gradient(50% 46% at 100% 100%, rgba(3, 5, 9, 0.72), transparent 100%), linear-gradient(0deg, rgba(3, 5, 9, 0.6), transparent 34%); }
#title.is-bright:not(.is-new) .tt-dim { opacity: 1; }
html.motion-reduce .tt-dim { transition: none; }
@media (max-width: 760px) { .tt-dim { background: linear-gradient(0deg, rgba(3, 5, 9, 0.88), rgba(3, 5, 9, 0.74) 40%, transparent 62%); } }
#title.is-new::before { background: rgba(3, 5, 9, 0.58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
/* 頂端一條暗帶：左上的字標、右上的音效鈕（手機還有頂端那一疊小字）疊在天空上，正午的天空很亮，沒有它讀不到；新的模擬已經整片壓暗，不再加 */
#title::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--tt-top-h); z-index: 0; pointer-events: none; background: var(--tt-top); }
#title.is-new::after { display: none; }
#title > * { position: absolute; z-index: 1; margin: 0; }

.tt-logo { left: 72px; top: 64px; display: flex; align-items: flex-end; gap: 12px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.tt-logo h1 { margin: 0; font: 900 38px/1 var(--f-story); letter-spacing: 0.1em; color: #f1ece2; }
.tt-logo span { font: 400 10px/1 var(--f-stencil); letter-spacing: 0.5em; color: rgba(241, 236, 226, 0.92); margin-bottom: 4px; }

/* 選單：一列、左下；滑過（或鍵盤聚焦）那一項才亮出一兩行小字 */
.tt-menu { left: 72px; bottom: 92px; display: flex; flex-direction: column; gap: 2px; }
.tt-mi { position: relative; display: flex; align-items: flex-start; gap: 18px; min-height: 42px; padding: 0 0 0 34px; font: 500 18px/42px var(--f-ui); letter-spacing: 0.08em; text-align: left; white-space: nowrap;
  color: rgba(228, 234, 238, 0.74); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); background: none; border: 0; cursor: pointer; transition: color var(--t-med); }
.tt-mi[hidden] { display: none; }
.tt-mi::before { content: ""; position: absolute; left: 0; top: 21px; width: 12px; height: 1px; background: rgba(224, 230, 234, 0.5); transition: width var(--t-med), background var(--t-med); }
.tt-mi:hover, .tt-mi:focus-visible, .tt-mi.on { color: #f7f9fa; outline: none; }
.tt-mi:hover::before, .tt-mi:focus-visible::before, .tt-mi.on::before { width: 24px; background: #f7f9fa; }
.tt-mi .det { display: flex; flex-direction: column; padding-top: 16px; }
.tt-mi small { font: 400 12px/1 var(--f-num); letter-spacing: 0.04em; color: var(--cd-lcd); opacity: 0; transition: opacity var(--t-med); } /* 只淡入、不位移：hover-shift 連 transform 造成的 6px 都算推動 */
.tt-mi:hover small, .tt-mi:focus-visible small, .tt-mi.on small { opacity: 1; }
.tt-mi small.l2 { display: block; margin-top: 7px; color: var(--cd-fg-3); }
#btn-continue small { opacity: 0.86; } /* 「繼續」的進度摘要（第幾天、方舟座位、下一個窗口）平常就看得到，不用滑過；其他選項的說明還是滑過才亮 */
.is-new .tt-menu .tt-mi:not(.on) { color: rgba(228, 234, 238, 0.66); }

/* 右下：等寬字，一行編號（第一局是艦載曆）＋一行上一局的痕跡 */
.tt-sim { right: 64px; bottom: 60px; text-align: right; font: 400 11.5px/1.7 var(--f-num); color: rgba(206, 222, 228, 0.82); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.tt-sim b { display: block; font: 700 14px/1.4 var(--f-num); letter-spacing: 0.26em; color: #e6f2f6; text-shadow: 1.5px 0 0 rgba(224, 87, 76, 0.45), -1.5px 0 0 rgba(169, 194, 204, 0.6), 0 1px 4px #000; }
.tt-sim .tr { color: rgba(244, 218, 178, 0.9); }
/* 第一局：日期那一格偶爾閃過一幀別的年份（約每 11 秒、0.08 秒；細微的不對勁，靜止截圖看不到） */
.stamp-y { position: relative; display: inline-block; }
.stamp-y::after { content: "3094.311"; position: absolute; inset: 0; background: #05070b; color: #ff9a90; opacity: 0; animation: tt-ghost 11s steps(1) 3s infinite; }
@keyframes tt-ghost { 0%, 99.2%, 100% { opacity: 0; } 99.3% { opacity: 1; } }

/* 第二局起：NOVA 的一句無線電字幕（在右下的字上面，逐字打出來） */
.tt-nova { right: 64px; bottom: 124px; max-width: min(560px, calc(100vw - 640px)); text-align: right; font: 400 14.5px/1.75 var(--f-num); color: var(--cd-radio); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
.tt-nova[hidden] { display: none; }
.tt-nova .ch { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-bottom: 4px; font: 600 11px/1 var(--f-num); letter-spacing: 0.22em; color: rgba(214, 233, 240, 0.92); }
.tt-nova .ch i { width: 6px; height: 6px; border-radius: 50%; background: var(--cd-radio); box-shadow: 0 0 6px var(--cd-radio); animation: blink 1.2s steps(1) infinite; }
.tt-nova .tt-line { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: calc(var(--n, 20) * 1em); animation: tt-type 3.4s steps(var(--n, 20), end) 0.9s both; }
@keyframes tt-type { from { width: 0; } }
html.motion-reduce .tt-nova .tt-line, html.q-low .tt-nova .tt-line { animation: none; }

/* 音效：右上角一顆小圖示 */
.tt-snd { right: 28px; top: 24px; width: 34px; height: 34px; display: grid; place-items: center; color: rgba(236, 241, 244, 0.92); background: none; border: 0; cursor: pointer; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8)); }
.tt-snd:hover, .tt-snd:focus-visible { color: #fff; outline: none; }
.tt-snd .ic { width: 18px; height: 18px; }

/* 新的模擬（第一局叫「開始」）：場景退後、中間浮出一欄，沒有框，只有細線 */
.tt-ns { left: 470px; top: 120px; width: 640px; max-width: calc(100% - 500px); }
.tt-ns[hidden] { display: none; }
.tt-ns { animation: cd-in 360ms var(--ease-out) both; }
.tt-ns .eb { font: 400 11px/1 var(--f-num); letter-spacing: 0.26em; color: var(--cd-fg-3); }
.tt-ns h2 { margin: 10px 0 26px; font: 700 30px/1.1 var(--f-ui); letter-spacing: 0.06em; color: #f1f4f5; }
.tt-ns h2 .n { margin-left: 10px; font-size: 26px; color: var(--cd-lcd); }
.tt-ns section { padding: 16px 0 18px; border-top: 1px solid var(--cd-hair); }
.tt-ns h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; font: 500 12px/1 var(--f-ui); letter-spacing: 0.16em; color: var(--cd-fg-3); }
.tt-ns h3 .lbl { letter-spacing: 0; }
.tt-opts { display: flex; gap: 8px; }
.tt-opts.wrap { flex-wrap: wrap; }
.tt-opt { flex: 1; min-width: 56px; height: 40px; display: flex; align-items: center; justify-content: center; font: 500 15px/1 var(--f-ui); color: var(--cd-fg-2); background: rgba(6, 9, 12, 0.4); border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--cd-hair); text-shadow: none; }
.tt-opt:hover, .tt-opt:focus-visible { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); outline: none; }
.tt-opt.on { color: #101418; background: #d7dde1; font-weight: 700; box-shadow: none; }
.tt-opt .n { font-size: 16px; color: inherit; text-shadow: none; }
.tt-opt sup { margin-left: 4px; font: 600 9.5px/1 var(--f-ui); color: var(--cd-amber); }
.tt-opt.on sup { color: #7a4a14; }
.tt-ns .why { margin: 10px 0 0; font-size: 13px; color: var(--cd-fg-2); line-height: 1.6; }
.tr8 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--cd-fg); }
.tr8 .q { width: 28px; height: 28px; display: grid; place-items: center; font: 700 14px/1 var(--f-num); color: var(--cd-lcd); box-shadow: inset 0 0 0 1px var(--cd-hair); }
.tr8 .q + .q { margin-left: -4px; }
.tr8 .tx { white-space: nowrap; }
.tr8 .lbl { margin-left: 4px; font-size: 12px; }
.tt-ns .acts { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 0; } /* 通用的 .acts（inspect.css）有左右內距，這裡要齊左 */
.tt-ns .acts .cbtn { height: 42px; padding: 0 22px; font-size: 15px; }
.tt-ns .acts .lbl { margin-left: 6px; font-size: 12px; }

@media (max-width: 1100px) {
  .tt-ns { left: 40px; width: min(640px, calc(100% - 80px)); max-width: none; }
  .tt-nova { max-width: 420px; }
  .tt-nova .tt-line { white-space: normal; width: auto; animation: none; }
}
@media (max-width: 760px) {
  .tt-logo { left: 24px; top: 30px; } .tt-logo h1 { font-size: 30px; }
  .tt-snd { right: 14px; top: 20px; }
  .tt-menu { left: 24px; bottom: 54px; } .tt-mi { font-size: 17px; }
  .tt-mi small, #btn-continue small { opacity: 1; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 0 0 9px rgba(0, 0, 0, 0.85); } /* 手機沒有滑過：小字一直顯示；排不下就換行，不要切在螢幕右邊 */
  .tt-mi .det { min-width: 0; }
  .tt-sim { right: 20px; bottom: auto; top: 84px; font-size: 11px; }
  .tt-nova { left: 24px; right: 24px; bottom: auto; top: 138px; max-width: none; font-size: 13px; }
  .tt-ns { left: 20px; right: 20px; top: 96px; width: auto; }
  .tt-ns h2 { margin-bottom: 14px; font-size: 26px; }
  .tt-ns section { padding: 12px 0 14px; }
  .tt-opt { min-width: 44px; }
  .tr8 { flex-wrap: wrap; } .tr8 .lbl { flex-basis: 100%; margin-left: 0; } /* 手機：「可能：…」另起一行，不要把字擠斷 */
}
/* 窄又矮的視窗（小筆電 1024×700、手機橫放 844×390）：新的模擬的子畫面從 x=40 開始，會壓在左下的選單上（版面巡檢抓到）；移到選單右邊 */
@media (max-width: 1100px) and (max-height: 760px) { .tt-ns { left: 300px; width: min(640px, calc(100% - 324px)); } }
@media (max-height: 520px) { /* 手機橫放：畫面很矮，頂端暗帶只蓋到字標那一列；新的模擬的子畫面（約 470px 高）貼著頂端、移到字標右邊、間距壓緊，放不下就在自己裡面捲（以前被 #title 的 overflow: hidden 切掉，「開始」按不到） */
  .tt-ns { left: 300px; right: 76px; top: 14px; width: auto; max-width: none; max-height: calc(100% - 28px); overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; } /* 在字標右邊、音效鈕左邊，不壓到它們 */
  .tt-nova { max-width: calc(100vw - 480px); } /* 左邊的選單（連小字）最寬到 x≈400，右下的 NOVA 一句不要伸進去 */
  .tt-menu { bottom: 24px; } /* 選單（有存檔時「繼續」多兩行小字、看過開場多一項「開場」）不要頂到左上的字標：單項縮矮、字標上移 */
  .tt-logo { top: 22px; }
  .tt-mi { min-height: 36px; font-size: 17px; line-height: 36px; } .tt-mi::before { top: 18px; } .tt-mi .det { padding-top: 11px; }
  .tt-ns .eb { display: none; }
  .tt-ns h2 { margin: 2px 0 8px; font-size: 22px; }
  .tt-ns section { padding: 7px 0 8px; }
  .tt-ns h3 { margin-bottom: 8px; }
  .tt-opt { height: 34px; }
  .tt-ns .why { margin-top: 6px; }
  .tt-ns .acts { margin-top: 10px; }
}
/* =========================================================
   歸航 HOMEWARD — 建築相連：檢視面板的相連區塊、放置時的預覽（ui/adjacency.ts）
   好＝液晶綠、壞＝紅（沿用檢視面板 .bad 的 #ff9a90）；沒有框，只有細線，跟其他檢視區塊同一個語氣。
   ========================================================= */
#drawer[data-tab="inspect"] .adj { margin: 0 0 14px; padding: 0 16px; }
.adj h4 { margin: 0 0 8px; font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: var(--cd-fg-3); }
/* 正面／負面兩組（G8 §7.4）：組名前一個小色塊，和放置時地上的綠／紅同一套顏色 */
.adj .adjg + .adjg { margin-top: 14px; }
.adj h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 500 11px/1 var(--f-ui); letter-spacing: 0.1em; color: var(--cd-fg-2); }
.adj h5::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #5fe58a; }
.adj .adjg.bad h5::before { background: repeating-linear-gradient(135deg, #ff6a60 0 2px, rgba(255, 106, 96, 0.35) 2px 4px); }
.adj h5 span { color: var(--cd-fg-3); font-weight: 400; }
.adj .adjl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.adj li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2px 12px; align-items: baseline; font-size: 12.5px; color: var(--cd-fg-2); } /* 左 2：規則名與對象，右 3：效果句（會換行、靠右）。原本右欄是 auto＝整句的寬度，粉塵那種長句會把左欄擠到只剩一個字寬（「採／礦機」一字一行） */
.adj .rn b { font-weight: 700; color: var(--cd-lcd); }
.adj .rn i { margin-left: 8px; font-style: normal; color: var(--cd-fg-3); }
.adj .rf { display: grid; justify-items: end; text-align: right; color: var(--cd-lcd); }
.adj .rf em { font-style: normal; font-size: 11.5px; color: var(--cd-fg-3); } /* 對方也拿到的效果：另起一行、淡一點 */
.adj li.bad .rn b, .adj li.bad .rf { color: #ff9a90; }
.adj li.bad .rf em { color: var(--cd-fg-3); }
.adj small { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.5; color: var(--cd-fg-3); }

/* 放置列的第三列：連到誰、這格加分還是扣分、各方得到什麼（每一行是一個 .pl3r）；沒指著格子時是地上顏色的說明 */
.placing-bar .pl3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; max-width: 520px; font-size: 12px; color: var(--cd-fg-2); }
.placing-bar .pl3[hidden] { display: none; }
.placing-bar .pl3 .pl3r { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 10px; }
.placing-bar .pl3 .lk { color: var(--cd-fg); font-weight: 700; }
.placing-bar .pl3 .pw { color: var(--cd-fg-3); } /* 不叫 .who：inspect.css 有一個直欄排列、左右內距的 .who */
.placing-bar .pl3 .good { color: var(--cd-lcd); }
.placing-bar .pl3 .bad { color: #ff9a90; }
/* 加分／扣分的標籤與顏色說明的小色塊：和地上的綠（#5fe58a）、紅斜紋同一套 */
.placing-bar .pl3 .vd { padding: 0 6px; border-radius: 3px; font-weight: 700; font-size: 11.5px; text-shadow: none; } /* 放置列是 .unit：它的深色文字陰影會在深字底下暈一圈，對比量到 2.46（要 4.5）；標籤自己有底色，不要陰影 */
.placing-bar .pl3 .vd.good { color: #06210f; background: #5fe58a; }
.placing-bar .pl3 .vd.bad { color: #2a0705; background: #ff7a70; }
.placing-bar .pl3 .sw { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; vertical-align: -0.5px; background: #5fe58a; }
.placing-bar .pl3 .bad .sw { background: repeating-linear-gradient(135deg, #ff6a60 0 2px, rgba(255, 106, 96, 0.35) 2px 4px); }

/* 拆除確認卡：旁邊的建築會失去哪些相連加成（拆解入艦的卡片裡是 .gl 的「失去」欄，用它自己的樣式） */
.confirm .adjloss { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--cd-fg-2); }
.confirm .adjloss li.bad { color: #ff9a90; }
.confirm .adjloss li.good { color: var(--cd-lcd); }
.confirm .adjloss small { display: block; font-size: 11.5px; color: var(--cd-fg-3); }
/* =========================================================
   歸航 HOMEWARD — 船員名冊與個人卡（design/ui-mock/cd-crew.html）：人的時刻，紙、拍立得、手寫與琥珀
   名冊＝#drawer[data-tab="crew"]（橫線紙）；個人卡＝#pcard（名冊左邊的另一張紙）。船員面板開著時資源列讓位（cd.css 的 #app.panel-people）。
   ========================================================= */
#drawer[data-tab="crew"] { width: 392px; overflow: hidden; color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: var(--r-paper); animation: drop-in 480ms var(--ease-out) both;
  background: radial-gradient(125% 95% at 50% 38%, rgba(255, 248, 230, 0) 52%, rgba(96, 58, 20, 0.09) 100%), repeating-linear-gradient(180deg, transparent 0 25px, rgba(60, 90, 130, 0.14) 25px 26px), var(--paper-grain), var(--paper-fiber), linear-gradient(176deg, #f3e8d0, #e9dab9);
  box-shadow: inset 0 0 0 1px rgba(120, 88, 45, 0.28), inset 0 0 50px rgba(120, 76, 26, 0.06), var(--sh-paper); }
#drawer[data-tab="crew"] .dh { display: none; }
#drawer[data-tab="crew"] .db { padding: 0; display: flex; flex-direction: column; overflow-y: auto; color: var(--ink); scrollbar-width: thin; }
#drawer[data-tab="crew"] .r-head { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px 10px; border-bottom: 1.5px solid rgba(90, 64, 30, 0.35); }
#drawer[data-tab="crew"] .r-head h2 { margin: 0; font: 900 21px/1 var(--f-story); color: var(--ink); }
#drawer[data-tab="crew"] .r-head .n2 { font: 500 12px var(--f-ui); color: var(--ink-2); }
#drawer[data-tab="crew"] .r-head .d { margin-left: auto; font: 700 20px/1 var(--f-hand); color: var(--ink-red); transform: rotate(-4deg); }
/* 名冊自己的標題列也要有關閉鈕（其他面板的標題列都有；沒有它，用滑鼠或手機就關不掉） */
#drawer[data-tab="crew"] .r-head .x { align-self: center; width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink-2); background: none; border: 0; border-radius: 3px; cursor: pointer; }
#drawer[data-tab="crew"] .r-head .x:hover { color: var(--ink); background: rgba(90, 64, 30, 0.12); }
#drawer[data-tab="crew"] .grp { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 10px 18px 4px; font: 700 16px/1 var(--f-hand-tc); color: var(--ink-red); cursor: pointer; }
#drawer[data-tab="crew"] .grp small { font: 500 11.5px var(--f-ui); color: var(--ink-3); }
#drawer[data-tab="crew"] .grp.closed { color: var(--ink-blue); border-top: 1px dashed rgba(90, 64, 30, 0.25); padding-top: 11px; padding-bottom: 9px; }
#drawer[data-tab="crew"] .grp.closed::after { content: "▸"; margin-left: auto; font: 500 12px var(--f-ui); color: var(--ink-3); }
#drawer[data-tab="crew"] .grp:hover { background: rgba(255, 210, 120, 0.12); }
#drawer[data-tab="crew"] .rows { padding: 0 10px 4px 12px; }
#drawer[data-tab="crew"] .rows .row { display: grid; grid-template-columns: 34px 1fr auto; gap: 1px 10px; align-items: center; flex-wrap: nowrap; padding: 5px 6px; border-bottom: 1px dashed rgba(90, 64, 30, 0.2); cursor: pointer; position: relative; }
#drawer[data-tab="crew"] .rows .row:hover { background: rgba(255, 210, 120, 0.16); }
#drawer[data-tab="crew"] .row .th { width: 32px; height: 32px; padding: 2px; background: #fbf8f1; box-shadow: 0 1px 3px rgba(40, 20, 0, 0.35); transform: rotate(var(--r, -2deg)); }
#drawer[data-tab="crew"] .row .th .pt { width: 28px; height: 28px; object-fit: cover; display: block; }
#drawer[data-tab="crew"] .row b { font: 700 14px/1.2 var(--f-story); color: var(--ink); }
#drawer[data-tab="crew"] .row i { font: 600 13.5px/1 var(--f-hand); font-style: normal; color: var(--ink-blue); margin-left: 4px; }
#drawer[data-tab="crew"] .row small { font-size: 11.5px; color: var(--ink-3); }
#drawer[data-tab="crew"] .row .st { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#drawer[data-tab="crew"] .row.sel { background: rgba(255, 214, 92, 0.32); box-shadow: inset 3px 0 0 var(--ember-deep); }
#drawer[data-tab="crew"] .r-foot { margin-top: auto; padding: 10px 18px 14px; border-top: 1.5px solid rgba(90, 64, 30, 0.35); font-size: 12px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 14px; }
#drawer[data-tab="crew"] .r-foot b { color: var(--ink); font-family: var(--f-num); }
/* 離營（失約的請願者走了，tension）：名冊最上面一組，每列多一行動作——「派車接回」按鈕（不能按時旁邊寫原因）或「探勘車在路上（還要 N 小時）」 */
#drawer[data-tab="crew"] .rows .row.walk { padding-bottom: 7px; }
#drawer[data-tab="crew"] .row .wk, #pcard .c-act .wk { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font: 600 12px/1.4 var(--f-ui); color: var(--ink-2); }
#drawer[data-tab="crew"] .row .wk { grid-column: 2 / 4; margin-top: 3px; }
#drawer[data-tab="crew"] .row .wk .btn, #pcard .c-act .wk .btn { flex: none; min-height: 28px; }
/* 名冊在 #drawer 裡：style.css 的「#drawer .btn」把按鈕換成冷面板的淺色字，放在紙上就看不見——紙上的按鈕要用墨色（個人卡在 #drawer 外面，本來就是墨色） */
#drawer[data-tab="crew"] .btn.ink { color: var(--ink); background: rgba(255, 252, 240, 0.4); box-shadow: inset 0 0 0 1.5px rgba(60, 40, 15, 0.55); }
#drawer[data-tab="crew"] .btn.ink:hover { color: var(--ink); background: rgba(255, 214, 140, 0.5); box-shadow: inset 0 0 0 1.5px var(--ember-deep); }
#drawer[data-tab="crew"] .row .wk .why, #pcard .c-act .wk .why { color: var(--ink-red); font-weight: 700; }
#drawer[data-tab="crew"] .row .wk .gone { flex-basis: 100%; font-weight: 500; }
#drawer[data-tab="crew"] .row .wk.fetching { color: #7d3d09; }
#drawer[data-tab="crew"] .row .wk.fetching .ic { width: 14px; height: 14px; }
/* 頂部細線的「離營 N」與方舟面板座位列裡的「離營」字樣：點了直接開名冊 */
.rs.walk { color: #ff8a80; font-size: 12px; cursor: pointer; }
.rs.walk::before { animation: none; }
@media (max-width: 760px) { #app #res .rs.walk { order: -1; flex: none; min-height: 28px; padding: 0 6px; margin-left: -6px; } } /* 手機的資源列靠左排、放不下會折成兩行（mobile.css）：離營排最前面（第一行行首），不然落在最後一行的尾巴；它是這一列唯一會被點的，點擊範圍要夠大（高 28px，左邊補回 padding 的 6px 讓字對齊） */
.tleg .lnk { font: inherit; color: inherit; text-decoration: underline dotted; cursor: pointer; }
/* 個人卡 */
#pcard { position: absolute; z-index: 7; right: 430px; top: 78px; width: min(520px, calc(100% - 470px)); max-height: calc(100% - 100px); overflow-y: auto; padding: 20px 26px 16px; transform: rotate(-0.8deg); animation: drop-in 560ms var(--ease-snap) 120ms both; scrollbar-width: thin; }
#pcard[hidden] { display: none; }
#pcard .tape { left: 16%; width: 90px; transform: rotate(-6deg); }
#pcard .cx { position: absolute; right: 10px; top: 8px; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-3); background: none; border: 0; cursor: pointer; z-index: 3; }
#pcard .cx:hover { color: var(--ink); } #pcard .cx .ic { width: 14px; height: 14px; color: currentColor; }
#pcard .c-head { display: grid; grid-template-columns: 150px 1fr; gap: 18px; }
#pcard .c-file { margin: 0; font: 700 15px/1 var(--f-hand); color: var(--ink-red); }
#pcard .c-name { margin: 6px 0 0; font: 900 29px/1.15 var(--f-story); color: var(--ink); }
#pcard .c-orig { margin: 2px 0 0; font: 700 30px/1 var(--f-hand); color: var(--ink-blue); transform: rotate(-2deg); transform-origin: left; }
#pcard .c-from { margin: 6px 0 0; font: 500 13px/1.5 var(--f-story); color: var(--ink-2); }
#pcard .c-role { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 700 14px var(--f-story); color: var(--ink); }
#pcard .c-role .ic { width: 15px; height: 15px; color: var(--ink-2); }
#pcard .c-health { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: var(--ink-2); }
#pcard .c-sec { margin-top: 12px; }
#pcard .c-sec h3 { margin: 0 0 6px; font: 700 16px/1 var(--f-hand-tc); color: var(--ink-red); display: flex; align-items: center; gap: 8px; }
#pcard .c-sec h3::after { content: ""; flex: 1; height: 1px; background: rgba(90, 64, 30, 0.3); }
#pcard .traits > div { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: center; font: 500 13px/1.5 var(--f-story); color: var(--ink-2); margin-bottom: 4px; }
#pcard .rels { margin: 0; padding: 0; list-style: none; }
#pcard .rels li { display: grid; grid-template-columns: 30px 56px 1fr; gap: 10px; align-items: center; padding: 3px 0; font: 500 13px/1.4 var(--f-story); color: var(--ink-2); }
#pcard .rels .pt { width: 28px; height: 28px; object-fit: cover; box-shadow: 0 0 0 2px #fbf7ee, 0 1px 3px rgba(40, 20, 0, 0.35); }
#pcard .rels b { font: 700 15px/1 var(--f-hand-tc); color: var(--ink-blue); }
#pcard .rels b.red { color: var(--ink-red); }
#pcard .rels em { font-style: normal; color: var(--ink); font-weight: 700; }
#pcard .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12.5px; }
#pcard .facts > div { display: flex; flex-direction: column; gap: 1px; }
#pcard .facts small { font-size: 11px; color: var(--ink-3); }
#pcard .facts b { font: 700 13.5px/1.35 var(--f-story); color: var(--ink); }
#pcard .log { margin: 0; padding: 0; list-style: none; }
#pcard .log li { display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: 2px 0; font: 500 13px/1.55 var(--f-story); color: var(--ink); }
#pcard .log em { font: 700 15px/1.4 var(--f-hand); font-style: normal; color: var(--ink-red); }
#pcard .log li.more2 { display: block; font: 600 13px/1 var(--f-hand-tc); color: var(--ink-3); padding-top: 3px; cursor: pointer; }
#pcard .c-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
#pcard .stampwrap { position: absolute; right: 26px; top: 124px; }
@media (max-width: 1100px) { #pcard { right: 418px; width: calc(100% - 460px); } }
/* =========================================================
   歸航 HOMEWARD — NOVA 面板（design/ui-mock/cd-nova.html）：#drawer[data-tab="nova"] 底下的版面（選擇器全部加了這個前綴，避免和方舟、檢視面板同名的 .mores／.tr…互相蓋）
   ========================================================= */
#drawer[data-tab="nova"] { width: 452px; overflow: hidden; }
#drawer[data-tab="nova"] .dh { display: none; }
#drawer[data-tab="nova"] .db { padding: 0; overflow-y: auto; scrollbar-width: thin; }

#drawer[data-tab="nova"] { right: 22px; top: 62px; bottom: 22px; width: 452px; display: flex; flex-direction: column; overflow: hidden; }
@media (max-width: 1100px) { #drawer[data-tab="nova"] { top: var(--b2-top); } } /* 和其他側欄一樣：窄視窗讓開正中央的希望／不安與掉到第二行的資源列 */
#drawer[data-tab="nova"] .eb { display: flex; align-items: center; gap: 7px; font: 500 10.5px/1 var(--f-num); letter-spacing: 0.16em; color: var(--cd-fg-3); padding: 14px 16px 0; }
#drawer[data-tab="nova"] .eb i { width: 6px; height: 6px; border-radius: 50%; background: var(--cd-radio); box-shadow: 0 0 6px var(--cd-radio); animation: blink 1.2s steps(1) infinite; }
#drawer[data-tab="nova"] .panel-h { padding-top: 6px; padding-bottom: 2px; }
#drawer[data-tab="nova"] > .nsay { padding: 0 16px; }
#drawer[data-tab="nova"] .tr { padding: 10px 16px 0; }
#drawer[data-tab="nova"] .tr .top { display: flex; align-items: baseline; gap: 8px; }
#drawer[data-tab="nova"] .tr .top .big { font-size: 34px; }
#drawer[data-tab="nova"] .tr .of { font: 400 14px var(--f-num); color: var(--cd-fg-3); }
#drawer[data-tab="nova"] .tr .st { font-size: 12.5px; color: var(--cd-fg-2); margin-left: 4px; }
#drawer[data-tab="nova"] .tr .st.bad { color: #ff9a90; }
#drawer[data-tab="nova"] .tr .d24 { margin-left: auto; font: 400 12px var(--f-num); color: var(--cd-fg-3); }
#drawer[data-tab="nova"] .scale { position: relative; height: 5px; margin: 9px 0 3px; background: linear-gradient(90deg, rgba(224, 87, 76, 0.38) 0 30%, rgba(255, 255, 255, 0.13) 30% 75%, rgba(183, 202, 191, 0.3) 75%); }
#drawer[data-tab="nova"] .scale i { position: absolute; top: -5px; width: 2px; height: 15px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.7); }
#drawer[data-tab="nova"] .scale b { position: absolute; top: -2px; bottom: -2px; width: 1px; background: rgba(4, 6, 9, 0.9); }
#drawer[data-tab="nova"] .scl { position: relative; height: 13px; font: 400 10px/13px var(--f-num); color: var(--cd-fg-3); }
#drawer[data-tab="nova"] .scl span { position: absolute; white-space: nowrap; }
#drawer[data-tab="nova"] .dlg { display: flex; flex-wrap: wrap; gap: 3px 12px; padding: 9px 16px 0; font-size: 12.5px; color: var(--cd-fg-3); }
#drawer[data-tab="nova"] .dlg span { display: inline-flex; align-items: center; gap: 5px; }
#drawer[data-tab="nova"] .dlg span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cd-fg-3); }
#drawer[data-tab="nova"] .dlg .on { color: var(--cd-fg); }
#drawer[data-tab="nova"] .dlg .on::before { background: var(--cd-lcd); box-shadow: 0 0 6px var(--cd-lcd-glow); }
#drawer[data-tab="nova"] .dlg .lk::before { border-radius: 0; background: var(--cd-radio); box-shadow: none; }
#drawer[data-tab="nova"] .dsum { display: flex; align-items: baseline; gap: 8px; padding: 0 16px; font-size: 12px; color: var(--cd-fg-2); }
#drawer[data-tab="nova"] .dsum .n { font-size: 13px; }
#drawer[data-tab="nova"] .dsum .bad { color: #ff9a90; }
#drawer[data-tab="nova"] .sh { display: flex; align-items: baseline; gap: 8px; padding: 0 16px 6px; font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: var(--cd-fg-3); }
#drawer[data-tab="nova"] .sh .lbl { margin-left: auto; letter-spacing: 0; font-size: 11px; }
#drawer[data-tab="nova"] .dec { margin: 0 16px 8px; padding: 8px 10px 9px 12px; box-shadow: inset 2px 0 0 var(--cd-radio), inset 0 0 0 1px var(--cd-hair); background: rgba(169, 194, 204, 0.04); }
#drawer[data-tab="nova"] .dec .h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--cd-fg-3); }
#drawer[data-tab="nova"] .dec .h .ic { width: 13px; height: 13px; color: var(--cd-radio); }
#drawer[data-tab="nova"] .dec .h .dm { color: var(--cd-radio); font-weight: 500; }
#drawer[data-tab="nova"] .dec .h .left { margin-left: auto; font: 700 12.5px var(--f-num); color: var(--cd-fg); }
#drawer[data-tab="nova"] .dec .h .left small { font: 400 10.5px var(--f-ui); color: var(--cd-fg-3); margin-right: 5px; }
#drawer[data-tab="nova"] .dec .h .fin { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; font-size: 11px; color: var(--cd-radio); }
#drawer[data-tab="nova"] .dec .h .fin .ic { width: 12px; height: 12px; }
#drawer[data-tab="nova"] .dec p { margin: 4px 0 3px; font-size: 13px; line-height: 1.5; color: var(--cd-fg); }
#drawer[data-tab="nova"] .dec .nsay { font-size: 11.5px; line-height: 1.5; }
#drawer[data-tab="nova"] .dec .mugs { margin: 5px 0 1px; }
#drawer[data-tab="nova"] .dec .ft { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
#drawer[data-tab="nova"] .dec .ft .cnt { flex: 1; }
#drawer[data-tab="nova"] .dec .ft .cbtn { height: 26px; padding: 0 9px; font-size: 12px; }
#drawer[data-tab="nova"] .dec .vline { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--cd-hair); }
#drawer[data-tab="nova"] .dec.done { box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px var(--cd-hair); background: none; }
#drawer[data-tab="nova"] .mores { flex: none; margin-top: 4px; padding-bottom: 6px; }
#drawer[data-tab="nova"] .more > summary { padding: 8px 16px; }
#drawer[data-tab="nova"] .more > summary .ic { width: 14px; height: 14px; }
#drawer[data-tab="nova"] .sw { position: relative; flex: none; width: 28px; height: 15px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); cursor: pointer; transition: background var(--t-fast); }
#drawer[data-tab="nova"] .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: transform var(--t-fast); }
#drawer[data-tab="nova"] .sw.on { background: #d7dde1; box-shadow: none; }
#drawer[data-tab="nova"] .sw.on::after { transform: translateX(13px); background: #101418; }
#drawer[data-tab="nova"] .sw.lock { opacity: 0.5; cursor: not-allowed; }
#drawer[data-tab="nova"] .dept { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 4px 0; border-bottom: 1px solid var(--cd-hair); font: 500 11px var(--f-ui); letter-spacing: 0.1em; color: var(--cd-fg-3); }
#drawer[data-tab="nova"] .dept:first-child { margin-top: 0; }
#drawer[data-tab="nova"] .dept .own { letter-spacing: 0.04em; font-family: var(--f-num); }
#drawer[data-tab="nova"] .dept .all { margin-left: auto; display: inline-flex; gap: 7px; align-items: center; letter-spacing: 0; }
#drawer[data-tab="nova"] .drow { display: grid; grid-template-columns: 16px 1fr auto 28px; gap: 0 9px; align-items: center; padding: 5px 0 3px; font-size: 13px; }
#drawer[data-tab="nova"] .drow .ic { width: 14px; height: 14px; }
#drawer[data-tab="nova"] .drow small { grid-column: 2 / 4; font-size: 11.5px; color: var(--cd-fg-3); }
#drawer[data-tab="nova"] .drow .p3 { font: 700 12px var(--f-num); color: var(--cd-lcd); }
#drawer[data-tab="nova"] .drow.off { color: var(--cd-fg-2); } .drow.off .p3 { color: var(--cd-fg-3); }
#drawer[data-tab="nova"] .capm { margin-top: 6px; font-size: 11.5px; color: var(--cd-fg-3); }
#drawer[data-tab="nova"] .capm.bad { color: #ff9a90; }
#drawer[data-tab="nova"] .prp { padding: 2px 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--cd-fg); }
#drawer[data-tab="nova"] .prp + .prp { border-top: 1px solid var(--cd-hair); padding-top: 8px; }
#drawer[data-tab="nova"] .prp .k { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--cd-fg-3); letter-spacing: 0.08em; margin-bottom: 3px; }
#drawer[data-tab="nova"] .prp .k .n { margin-left: auto; font-size: 12px; letter-spacing: 0; }
#drawer[data-tab="nova"] .prp .acts { display: flex; gap: 6px; margin-top: 6px; }
#drawer[data-tab="nova"] .prp .acts .cbtn { height: 26px; padding: 0 10px; font-size: 12px; }
#drawer[data-tab="nova"] .prp .res { display: inline-flex; align-items: center; gap: 5px; font: 700 12px var(--f-num); color: var(--cd-lcd); }
#drawer[data-tab="nova"] .prp .res.dn { color: #ff9a90; }
#drawer[data-tab="nova"] .prp .row2 { display: flex; align-items: center; gap: 9px; margin-top: 4px; color: var(--cd-fg-2); }
#drawer[data-tab="nova"] .prp .row2 .sw { margin-left: auto; }
#drawer[data-tab="nova"] .tch { width: 100%; height: 92px; display: block; }
#drawer[data-tab="nova"] .tch .th { stroke: rgba(224, 87, 76, 0.55); stroke-dasharray: 3 3; } .tch .th2 { stroke: rgba(183, 202, 191, 0.45); stroke-dasharray: 3 3; }
#drawer[data-tab="nova"] .tch .ln { fill: none; stroke: var(--cd-lcd); stroke-width: 1.5; }
#drawer[data-tab="nova"] .tch circle { fill: #0b0f12; stroke: var(--cd-lcd); stroke-width: 1.2; } .tch .bad circle { stroke: #ff9a90; }
#drawer[data-tab="nova"] .tch text { font: 400 9.5px var(--f-num); fill: var(--cd-fg-3); } .tch .ev text { fill: var(--cd-fg-2); } .tch .bad text { fill: #ff9a90; }
#drawer[data-tab="nova"] .req { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 2px 0 6px; }
#drawer[data-tab="nova"] .req span { padding: 5px 2px; text-align: center; font-size: 10.5px; line-height: 1.3; color: var(--cd-fg-3); box-shadow: inset 0 0 0 1px var(--cd-hair); }
#drawer[data-tab="nova"] .req span.y { color: var(--cd-fg); background: rgba(183, 202, 191, 0.14); }
#drawer[data-tab="nova"] .req span.end { box-shadow: inset 0 0 0 1px rgba(169, 194, 204, 0.6); color: var(--cd-radio); }
#drawer[data-tab="nova"] .p2 { font-size: 12px; line-height: 1.6; color: var(--cd-fg-2); }
#drawer[data-tab="nova"] .p2 + .p2 { margin-top: 4px; }
#drawer[data-tab="nova"] .sbtn { display: flex; gap: 6px; margin-top: 8px; }
#drawer[data-tab="nova"] .sbtn .cbtn { height: 28px; font-size: 12px; }
#drawer[data-tab="nova"] .slip { position: relative; margin: 6px 2px 8px; padding: 10px 12px 10px 96px; color: var(--ink); transform: rotate(-0.6deg);
  background: var(--paper-grain), linear-gradient(176deg, #ece0c4, #dccaa2); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); }
#drawer[data-tab="nova"] .slip .polaroid { position: absolute; left: 12px; top: -6px; }
#drawer[data-tab="nova"] .slip .ty { font: 700 13px/1 var(--f-hand-tc); color: var(--ink-red); }
#drawer[data-tab="nova"] .slip h5 { font: 900 16px/1.3 var(--f-story); margin: 4px 0 0; }
#drawer[data-tab="nova"] .slip p { font: 500 12.5px/1.6 var(--f-story); color: var(--ink-2); margin-top: 3px; }
#drawer[data-tab="nova"] .slip .goal { margin-top: 6px; font: 600 14px/1.3 var(--f-hand-tc); color: var(--ink-blue); }
#drawer[data-tab="nova"] .slip .k { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; font: 500 11.5px/1.4 var(--f-ui); color: var(--ink-2); }
#drawer[data-tab="nova"] .slip .k b { color: var(--ink-red); font-family: var(--f-num); }
#drawer[data-tab="nova"] .nxt { margin: 0 16px; padding: 8px 12px 10px; box-shadow: inset 0 0 0 1px rgba(169, 194, 204, 0.35); background: rgba(169, 194, 204, 0.05); }
#drawer[data-tab="nova"] .nxt .k { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; color: var(--cd-radio); letter-spacing: 0.06em; }
#drawer[data-tab="nova"] .nxt .k .n { margin-left: auto; font-size: 13px; letter-spacing: 0; }
#drawer[data-tab="nova"] .nxt .ok-l { margin-top: 6px; }
#drawer[data-tab="nova"] .nxt .go { margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(169, 194, 204, 0.3); font-size: 12.5px; color: var(--cd-fg); }
#drawer[data-tab="nova"] .nxt .lockr { margin-top: 7px; }
#drawer[data-tab="nova"] .cmd li { padding: 6px 0; border-top: 1px solid var(--cd-hair); font-size: 12.5px; line-height: 1.5; }
#drawer[data-tab="nova"] .cmd li:first-child { border-top: 0; padding-top: 2px; }
#drawer[data-tab="nova"] .cmd .t { font: 400 11px var(--f-num); color: var(--cd-fg-3); margin-right: 6px; }
#drawer[data-tab="nova"] .cmd .nsay { font-size: 11.5px; }
#drawer[data-tab="nova"] .scan .bar { position: relative; height: 6px; margin: 6px 0 4px; background: rgba(255, 255, 255, 0.1); }
#drawer[data-tab="nova"] .scan .bar em { position: absolute; inset: 0 auto 0 0; background: var(--cd-radio); box-shadow: 0 0 8px rgba(169, 194, 204, 0.5); }
#drawer[data-tab="nova"] .scan .bar i { position: absolute; top: -4px; width: 1px; height: 14px; background: #fff; }
#drawer[data-tab="nova"] .scan .bl { position: relative; height: 13px; font: 400 10px/13px var(--f-num); color: var(--cd-fg-3); }
#drawer[data-tab="nova"] .scan .bl span { position: absolute; transform: translateX(-50%); }
#drawer[data-tab="nova"] .scan .mugs { margin: 6px 0; }
#drawer[data-tab="nova"] .scan .mug.no { opacity: 0.32; filter: grayscale(1); }
#drawer[data-tab="nova"] .scan .mug.now { box-shadow: 0 0 0 1.5px var(--cd-radio), 0 0 8px rgba(169, 194, 204, 0.8); }
#drawer[data-tab="nova"] .cf { position: absolute; z-index: 22; left: calc(50% - 450px); top: 132px; width: 900px; background: var(--cd-panel-solid); }
#drawer[data-tab="nova"] .cf .eb { display: block; font: 500 10.5px/1 var(--f-num); letter-spacing: 0.18em; color: var(--cd-fg-3); padding: 18px 26px 0; }
#drawer[data-tab="nova"] .cf h2 { padding: 8px 26px 0; font: 700 30px/1.2 var(--f-ui); color: #eef2f4; letter-spacing: 0.04em; }
#drawer[data-tab="nova"] .cf .lead { padding: 6px 26px 0; font-size: 14.5px; line-height: 1.6; color: var(--cd-fg); }
#drawer[data-tab="nova"] .cf .lead b { color: #ff9a90; font-weight: 700; }
#drawer[data-tab="nova"] .cf .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; padding: 16px 26px 0; }
#drawer[data-tab="nova"] .cf h4 { font: 500 11px/1 var(--f-ui); letter-spacing: 0.14em; color: var(--cd-fg-3); margin: 0 0 8px; }
#drawer[data-tab="nova"] .lose li { display: grid; grid-template-columns: 18px 1fr; gap: 0 9px; align-items: start; padding: 5px 0; border-top: 1px solid var(--cd-hair); font-size: 13.5px; color: var(--cd-fg); }
#drawer[data-tab="nova"] .lose li:first-child { border-top: 0; }
#drawer[data-tab="nova"] .lose .ic { width: 15px; height: 15px; color: #ff9a90; margin-top: 2px; }
#drawer[data-tab="nova"] .lose small { display: block; font-size: 11.5px; color: var(--cd-fg-3); }
#drawer[data-tab="nova"] .lose s { text-decoration-color: rgba(255, 154, 144, 0.8); }
#drawer[data-tab="nova"] .rule { font-size: 12.5px; line-height: 1.65; color: var(--cd-fg-2); }
#drawer[data-tab="nova"] .rule ol { counter-reset: r; }
#drawer[data-tab="nova"] .rule li { position: relative; padding-left: 20px; margin-bottom: 3px; }
#drawer[data-tab="nova"] .rule li::before { counter-increment: r; content: counter(r); position: absolute; left: 0; top: 1px; width: 14px; height: 14px; font: 700 10px/14px var(--f-num); text-align: center; color: #101418; background: var(--cd-radio); }
#drawer[data-tab="nova"] .rule b { color: var(--cd-fg); font-weight: 500; }
#drawer[data-tab="nova"] .now2 { margin-top: 10px; padding: 8px 10px; box-shadow: inset 0 0 0 1px var(--cd-hair); }
#drawer[data-tab="nova"] .now2 .ok-l { margin-top: 4px; }
#drawer[data-tab="nova"] .keep { margin-top: 10px; font-size: 12px; color: var(--cd-fg-2); line-height: 1.6; }
#drawer[data-tab="nova"] .cf .say2 { margin: 16px 26px 0; padding: 10px 14px; font: 400 13.5px/1.7 var(--f-num); color: var(--cd-radio); box-shadow: inset 2px 0 0 var(--cd-radio); background: rgba(169, 194, 204, 0.05); }
#drawer[data-tab="nova"] .cf .acts { display: flex; align-items: center; gap: 10px; padding: 16px 26px 20px; }
#drawer[data-tab="nova"] .cf .acts .cbtn { height: 40px; padding: 0 18px; font-size: 14px; }
#drawer[data-tab="nova"] .cf .acts .hold { position: relative; margin-left: auto; overflow: hidden; min-width: 290px; }
#drawer[data-tab="nova"] .cf .acts .hold em { position: absolute; inset: 0 auto 0 0; width: 38%; background: rgba(224, 87, 76, 0.28); }
#drawer[data-tab="nova"] .cf .acts .hold span { position: relative; }
#drawer[data-tab="nova"] .cf .acts .note2 { font-size: 12px; color: var(--cd-fg-3); }
/* =========================================================
   歸航 HOMEWARD — 手機（design/ui-mock/cd-mobile.html，390×844）：同一套規則縮小
   常駐＝頂部一行時間＋一行資源（放不下折成兩行，不橫捲）；下方是 NOVA 字幕、建造鍵、（時間速度＋選單）；點建築＝底部抽屜（第一層），第二層一樣收在 ▸ 裡；
   事件＝上下黑邊（54px）＋整張紙，選項至少 56px 高。斷點 760px（和 Game.updateInsets 的 mobile 判斷一致）。
   選擇器前面加 #app，才蓋得過各檔裡單獨寫 #id 的桌機規則（樣稿沒有時間速度，手機這裡放在右下角、跟選單鍵一起）。
   ========================================================= */
.m-bot { display: none; }
@media (max-width: 760px) {
  #app .topfade { --tf-top: calc(150px + var(--res-x, 0px)); --tf-bot: 196px; --tf-m1: 0.58; --tf-p1: 50px; --tf-m2: 0.44; --tf-p2: calc(104px + var(--res-x, 0px)); } /* 頂端三列（到 y≈104，資源列折成兩行時再往下一行）：第三列的字不能只靠漸層的尾巴 */
  #app .u-time { left: 14px; right: 14px; top: 10px; }
  #app .u-time .win { width: 100%; gap: 10px; }
  #app .u-time .day { font-size: 20px; } #app .u-time .t { font-size: 14px; }
  #app #more, #app .spd, #app .u-time .win > .sep { display: none; }
  #app #win > :first-child { margin-left: auto; }
  #app .u-res { left: 14px; right: 14px; top: 44px; }
  /* 資源列：放不下就折成兩行（以前是橫捲、最右邊一格被切掉，看不出還有東西）；每一格不折字。折行多出來的高度由 topline.ts 量好寫進 --res-x，下面的希望／不安列、警示條跟著往下挪 */
  #app .u-res .win { flex-wrap: wrap; gap: 4px 12px; min-height: 22px; white-space: nowrap; }
  #app .u-res .win > .sep { display: none; } /* 折行後分隔線會落在行首行尾 */
  #app .goal { display: none; }
  #app .u-mood { left: 14px; right: 14px; top: calc(78px + var(--res-x, 0px)); transform: none; width: auto; }
  #app .u-mood .win { width: 100%; justify-content: space-between; gap: 8px; }
  #app .mb { flex: 1 1 0; min-width: 0; gap: 5px; }
  #app .mb .bar { flex: 1 1 36px; width: auto; min-width: 36px; }
  #app #mood-mid { flex: none; } #app .u-ark .lb-a { display: none; } #app .u-ark .sn, #app .u-ark .pn { font-size: 15px; } #app .u-ark .lbl, #app .u-ark .un { font-size: 11px; } #app .u-ark .ak { gap: 3px; } #app .u-ark .sl { font-size: 13px; margin: 0 1px; } /* 「方舟」兩個字省掉，剩「座位 0/19 人」 */
  #app .mb .lbl { white-space: nowrap; } #app .mb .bar { flex-basis: 24px; min-width: 24px; } /* 條子先縮，字不准一字一行 */
  #app .u-warn { left: 14px; right: 14px; top: calc(114px + var(--res-x, 0px)); transform: none; }
  #app .u-warn .win { padding: 6px 10px; gap: 6px 10px; }
  #app .drop { left: 8px; right: 8px; width: auto; top: 44px; max-height: calc(100% - 200px); }
  #app .notes { top: auto; bottom: calc(var(--mbar) + 188px); right: 14px; width: 230px; } /* 第 81 題：原本 top 96px 蓋住希望那一列（78–104）與警示條；改成疊在 NOVA 字幕上面往上長——字幕坐在 --mbar＋58px（boards.css），三行字時約 120px 高 */
  #app .radio { left: 14px; right: 14px; bottom: 76px; width: auto; transform: none; font-size: 13px; line-height: 1.65; }
  [data-ui="clean"] #app .radio { padding: 8px 12px 10px; border-radius: 6px; background: linear-gradient(0deg, rgba(3, 5, 9, 0.66) 0, rgba(3, 5, 9, 0.5) 72%, rgba(3, 5, 9, 0.2)); } /* 手機的 NOVA 字幕三行，站得比底部暗漸層高，亮雪地上自己墊一層 */
  #app .buildk { left: 14px; bottom: 18px; }
  #app .buildk .win { height: 44px; padding: 0 16px; font-size: 14px; }
  #app .buildk .ic { width: 18px; height: 18px; }
  #app .buildk .bb { align-self: stretch; padding-inline: 4px; } /* 原本只有 96×20，要點得到整個窗的高度 */
  #app #drawer[data-tab="nova"] .sw { width: 44px; height: 24px; border-radius: 12px; } /* 28×15 的開關在手機點不準（觸控目標至少 24） */
  #app #drawer[data-tab="nova"] .sw::after { top: 5px; left: 5px; width: 14px; height: 14px; }
  #app #drawer[data-tab="nova"] .sw.on::after { transform: translateX(20px); }
  #app .placing-bar { left: 14px; right: 14px; bottom: var(--mbar); }
  #app .placing-bar .pl1 { flex-wrap: wrap; row-gap: 2px; }
  #app .placing-bar .pl2 { width: 100%; justify-content: space-between; }
  #app .placing-bar .kk { display: none; } /* 右鍵、Esc 是鍵盤的字，手機沒有：靠右邊的「完成」結束放置 */
  #app .placing-bar .pdone { height: 44px; min-width: 88px; margin-left: 0; font-size: 14px; }
  #app .placing-bar .pchain { height: 44px; min-width: 88px; margin-left: auto; margin-right: 8px; font-size: 14px; } /* 手機沒有 Shift：連續蓋靠這顆，和「完成」一起靠右 */
  #app .m-bot { display: flex; position: absolute; right: 14px; bottom: 18px; z-index: 6; gap: 4px; align-items: center; opacity: var(--ui-dim); }
  #app .m-bot .sp { width: 38px; height: 44px; background: rgba(6, 8, 12, 0.5); box-shadow: inset 0 0 0 1px var(--cd-hair); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  #app .m-bot .sp .ic { width: 16px; height: 16px; }
  #app .m-bot .mbtn { width: 48px; height: 44px; display: grid; place-items: center; color: var(--cd-fg); background: rgba(6, 8, 12, 0.5); box-shadow: inset 0 0 0 1px var(--cd-hair); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  #app .m-bot .mbtn .ic { width: 18px; height: 18px; color: currentColor; }
  #app.title-mode .m-bot, #app.end-mode .m-bot, #app.cine .m-bot { display: none; }
  /* 建造抽屜：整條貼在建造鍵上方 */
  #app { --mbar: 74px; } /* 底部列（建造鍵、速度、選單）佔的高度：抽屜與個人卡都坐在它上面，不蓋住它 */
  #app .bdr { left: 10px; right: 10px; width: auto; bottom: var(--mbar); max-height: 62vh; grid-template-columns: 92px minmax(0, 1fr); }
  #app .bdr .bcats button { padding: 0 10px; gap: 6px; } #app .bdr .bfoot .r { display: none; }
  /* 側欄：底部抽屜（檢視、方舟、船員共用）；個人卡蓋滿 */
  #app #drawer, #app #drawer[data-tab="inspect"], #app #drawer[data-tab="ark"], #app #drawer[data-tab="crew"] { left: 0; right: 0; top: auto; bottom: var(--mbar); width: auto; height: min(62vh, 540px); max-height: none; z-index: 25; padding-bottom: env(safe-area-inset-bottom, 0px); }
  #app #drawer[data-tab="inspect"] { height: auto; max-height: min(62vh, 540px); }
  #app #drawer::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); z-index: 2; }
  #app #drawer[data-tab="crew"]::before { background: rgba(60, 40, 15, 0.35); }
  #app #drawer .db { padding-top: 12px; }
  #app #pcard { left: 10px; right: 10px; top: 64px; bottom: var(--mbar); width: auto; max-height: none; z-index: 30; transform: none; padding: 16px 16px 14px; }
  #app:has(#pcard:not([hidden])) #drawer[data-tab="crew"] { visibility: hidden; } /* 個人卡蓋在名冊上：名冊先藏起來，關掉卡片再出現 */
  #app #pcard .c-head { grid-template-columns: 110px 1fr; gap: 12px; }
  #app #pcard .polaroid { --pw: 110px !important; }
  #app #pcard .c-name { font-size: 24px; } #app #pcard .c-orig { font-size: 24px; }
  #app .stampwrap { top: 96px; right: 12px; }
  /* 事件與發射確認：整張紙，選項至少 56px */
  #app .lb { height: 54px; }
  #app .ev-a { width: calc(100% - 20px); max-height: calc(100% - 132px); transform: none; padding: 10px 10px 0; } /* 紙在 #modal 的 flex 裡居中、本身是 position: relative：不能寫 left／right（relative 的 left: 10px 會把整張紙往右推 10px，右緣超出畫面），左右各留 10px 靠寬度 */
  #app .ev-a .ev-tx { padding: 12px 6px 0; } #app .ev-a .ev-tx h2 { font-size: 22px; } #app .ev-a .ev-tx p { font-size: 14px; line-height: 1.65; }
  #app .ev-a .evtype { gap: 6px; font-size: 11px; } #app .ev-a .evtype .sep { display: none; }
  /* 手札：手機只留右頁（決定），左頁的現場放不下 */
  #app .book { width: calc(100% - 20px); height: auto; max-height: calc(100% - 132px); grid-template-columns: 1fr; padding: 6px; transform: none; }
  #app .book .page.l, #app .book .spine { display: none; }
  /* 有插畫的手札：手機只有一頁的版面，把左頁收成「只有照片」放在正文上面（人與盤點照舊不顯示） */
  #app .book.has-ill { grid-template-rows: auto minmax(0, 1fr); gap: 4px; }
  #app .book.has-ill .page.l { display: block; padding: 12px 12px 8px; border-radius: 4px; overflow: visible; box-shadow: var(--sh-paper); }
  #app .book.has-ill .page.l > :not(.photo) { display: none; }
  #app .book.has-ill .photo { transform: none; }
  #app .book .page.r { border-radius: 4px; padding: 12px 10px 4px; box-shadow: var(--sh-paper); }
  #app .book .ev-tx h2 { font-size: 22px; } #app .book .evtype { gap: 6px; font-size: 11px; } #app .book .evtype .sep { display: none; }
  #app #modal .ev-ch .choice { min-height: 56px; padding: 9px 6px; }
  #app .lb-cap { bottom: 18px; font-size: 11.5px; }
  /* 結局：左右頁疊成一頁往下捲 */
  #ending.is-book { align-items: start; padding-top: 64px; }
  .book { display: block; width: calc(100vw - 20px); height: calc(100vh - 140px); overflow-y: auto; padding: 8px; transform: none; }
  .book .page { overflow: visible; } .page.l { padding: 22px 18px 20px; border-radius: 4px 4px 0 0; } .page.r { display: block; padding: 18px 18px 22px; border-radius: 0 0 4px 4px; }
  .book .spine { display: none; } .shot { display: none; } .book .story p:first-child { padding-right: 0; }
  .title h1 { font-size: 52px; } .grd { grid-template-columns: 96px 1fr; gap: 12px; } .gstamp { width: 92px; height: 92px; font-size: 56px; }
  /* 照片牆 5 欄：每格約 62px，名字（9px）放得下。前面要加 #app：ending.css 比 mobile.css 晚載入，同樣的 .wall 選擇器會蓋過這裡（原本的 7 欄從來沒生效，手機一直是 10 欄、每格 28px） */
  #app .wall { grid-template-columns: repeat(5, 1fr); } #app .left { grid-template-columns: repeat(2, 1fr); }
  .sim { bottom: 14px; } .sim span { display: none; }
}

/* 最後一夜的頂部（第 81 題 D2 順手修）：時間那一格多了「核心拆離／期限／起飛」三組倒數，手機單行放不下，flex 項目被擠窄，
   中文一字一行折成直排、把這一格撐高，蓋到下面的資源列。倒數獨立成第二行（三組平均分、不折字），資源列、希望列、警示條整體往下挪一行 */
@media (max-width: 760px) {
  #app.lastnight .u-time .win { flex-wrap: wrap; row-gap: 3px; }
  #app.lastnight #win { display: flex; flex: 0 0 100%; align-items: center; justify-content: space-between; gap: 8px; }
  #app.lastnight #win > :first-child { margin-left: 0; }
  #app.lastnight #win > * { white-space: nowrap; }
  #app.lastnight .u-res { top: 66px; }
  #app.lastnight .u-mood { top: calc(100px + var(--res-x, 0px)); }
  #app.lastnight .u-warn { top: calc(136px + var(--res-x, 0px)); }
}
/* =========================================================
   歸航 HOMEWARD — 結局：上下黑邊，航行日誌的最後一頁（design/ui-mock/cd-ending.html）
   左頁＝故事、評等章、航跡算式；右頁＝上了船的人（小照片牆）與留下的人（放大、褪色、寫上為什麼）。
   最後一條冷色的系統字從下黑邊浮出：「模擬結束」。場景壓暗是 #app.is-event，黑邊是 .lb（cd.css）。
   版面（2026-10-09 先遣隊最下面的算式被切掉之後；test/ending-layout.mjs 守著：每種結局 × 七種視窗）：
   ・並排：書的大小隨視窗（#ending .book 的 --bw／--bh）；--k（0.62–1）是書相對 1220×760 的縮放，標題、間距、評等章、照片、照片牆都乘它（字有下限）。
   ・左頁分兩段：上面 .body（照片、標題、故事、判詞…）放不下就在頁內捲動；下面 .foot（評等章、算式、累積航跡、按鈕）釘在頁底，算式與按鈕不會再被切掉。
     照片是浮動的（float），故事與標題自己繞著它排，不靠替第一段留白。
   ・會捲的區塊（.scr）捲得動、還沒到底時，底下浮出「往下還有」（ending.ts 的 watchScroll 切 .has-more；類名不能叫 .more：inspect.css 的 .more > div 會給每個子 div 加 16px 的內距）。
   ・視窗太窄（≤ 900）或太矮（≤ 600）：疊成一頁（左頁在上、右頁在下），整本書往下捲，黑邊縮小（檔尾的 @media）。
   ・事件手札也叫 .book／.page：event.css 與 mobile.css 的 #app .book … 對結局一樣有效（手機的 #app .book .page.l 還會把左頁藏起來），
     所以結局的規則一律加 #ending 前綴，並在檔尾明寫 display。
   ========================================================= */
:root { --k: 1; }
#ending.is-book { background: transparent; padding: 0; place-items: center; overflow: hidden; z-index: 50; }
/* 只給結局：.book 這個類名事件手札也在用，放在下面那條全域規則裡會把手機橫放（390 高）的事件手札撐出畫面 */
#ending .book { --bw: min(1220px, 100vw - 40px); --bh: min(760px, 100vh - 200px); width: var(--bw); height: var(--bh); min-height: 420px; }
@supports (width: calc(1px * tan(atan2(1px, 1px)))) { /* tan(atan2(長度, 長度)) ＝ 兩個長度的比值（CSS 沒有「長度除以長度」） */
  #ending .book { --k: clamp(0.62, min(tan(atan2(var(--bw), 1220px)), tan(atan2(var(--bh), 760px))), 1); }
}
.book { position: relative; width: min(1220px, calc(100vw - 40px)); height: min(680px, calc(100vh - 200px)); transform: rotate(-0.25deg); padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; background: radial-gradient(120% 120% at 50% 40%, #3e2a1c, #1e130b); border-radius: 7px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75), inset 0 0 0 2px #4d3422; animation: drop-in 700ms var(--ease-snap) both; }
.page { position: relative; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.page::-webkit-scrollbar { display: none; }
.page.l { border-radius: 4px 0 0 4px; padding: 30px 40px 30px 44px; box-shadow: inset -40px 0 40px -30px rgba(70, 40, 10, 0.55), var(--sh-paper); }
.page.r { border-radius: 0 4px 4px 0; padding: 28px 34px 26px 40px; box-shadow: inset 40px 0 40px -30px rgba(70, 40, 10, 0.55), var(--sh-paper); }
#ending .page.l { --shot: calc(200px * var(--k)); display: flex; flex-direction: column; overflow: hidden; padding: calc(24px * var(--k)) calc(30px * var(--k)) calc(16px * var(--k)); }
#ending .page.r { padding: calc(24px * var(--k)) calc(32px * var(--k)) calc(14px * var(--k)) calc(36px * var(--k)); }
#ending .body { position: relative; flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; padding-bottom: 5px; } /* 捲得動的容器都要 stable（hover-shift 守著）：內容變長冒出捲軸時，裡面的字才不會被往左推。底下留 5px：捲動範圍 ≤ 4px（SCROLL_SLACK）只會吃掉這段留白，不藏字 */
#ending .foot { flex: none; }
/* 會捲的區塊：細捲軸（macOS 的浮動捲軸平常看不見，所以另外有底下的提示） */
.scr { scrollbar-width: thin; scrollbar-color: rgba(90, 64, 30, 0.5) transparent; }
.scr::after, #ending .book.has-more::after { content: attr(data-more) " ▾"; position: sticky; bottom: 0; display: block; height: 34px; margin-top: -34px; padding-top: 14px; box-sizing: border-box; text-align: center;
  font: 700 14px/20px var(--f-hand-tc); color: var(--ink-red); background: linear-gradient(to bottom, rgba(236, 223, 190, 0), rgba(236, 223, 190, 0.97) 70%); opacity: 0; transition: opacity 200ms; pointer-events: none; }
.scr.has-more::after, #ending .book.has-more::after { opacity: 1; }
.spine { position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; background: rgba(50, 30, 10, 0.5); }
.kicker { margin: 0; font: 700 17px/1 var(--f-hand); color: var(--ink-red); }
#ending .kicker { font-size: max(14px, calc(17px * var(--k))); }
.title { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; max-width: 330px; }
#ending .title { margin-top: calc(6px * var(--k)); max-width: none; } /* 右邊的照片是 float：標題自己排在照片旁邊剩下的寬度裡 */
.title h1 { margin: 0; font: 900 72px/1 var(--f-story); letter-spacing: 0.06em; color: var(--ink); }
#ending .title h1 { font-size: max(40px, calc(68px * var(--k))); text-wrap: balance; }
.title .en { font: 400 14px/1 var(--f-stencil); letter-spacing: 0.4em; color: #8f4208; margin-bottom: 12px; } /* 紙上的橘字：--ember-deep 只有 2.6:1 */
#ending .title .en { font-size: max(11px, calc(14px * var(--k))); margin-bottom: calc(12px * var(--k)); }
.shot { position: relative; float: right; width: var(--shot, 200px); margin: calc(8px * var(--k)) calc(8px * var(--k)) calc(10px * var(--k)) calc(14px * var(--k)); padding: 7px 7px 24px; background: linear-gradient(180deg, #fbf8f1, #efe8d9); box-shadow: var(--sh-polaroid); transform: rotate(4deg); }
.shot img { width: 100%; height: calc(130px * var(--k)); object-fit: cover; filter: sepia(0.3) contrast(1.1); }
.shot figcaption { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font: 600 14px/1 var(--f-hand-tc); color: var(--ink-blue); }
.book .story { margin-top: 22px; }
#ending .story { margin-top: calc(14px * var(--k)); }
.book .story p { font: 500 15px/1.85 var(--f-story); color: var(--ink); margin: 0; }
#ending .story p { font-size: max(13px, calc(15px * var(--k))); line-height: 1.8; }
.book .story p + p { margin-top: 6px; }
#ending .verd { margin-top: calc(10px * var(--k)); }
#ending .verd .vh { font-size: max(13px, calc(15px * var(--k))); }
#ending .verd li { font-size: max(13px, calc(14.5px * var(--k))); line-height: 1.55; }
.grd { display: grid; grid-template-columns: calc(130px * var(--k)) 1fr; gap: calc(20px * var(--k)); align-items: center; margin-top: calc(10px * var(--k)); padding-top: calc(10px * var(--k)); border-top: 1.5px solid rgba(90, 64, 30, 0.35); }
.gstamp { position: relative; width: calc(120px * var(--k)); height: calc(120px * var(--k)); display: grid; place-items: center; border-radius: 50%; border: 4px double var(--ink-red); color: var(--ink-red); transform: rotate(-10deg);
  font: 400 calc(76px * var(--k))/1 var(--f-stencil); mix-blend-mode: multiply; opacity: 0.88; --rot: -10deg; animation: stamp-in 420ms var(--ease-snap) 500ms both; }
.gstamp small { position: absolute; bottom: calc(16px * var(--k)); font: 900 max(10px, calc(12px * var(--k)))/1 var(--f-story); letter-spacing: 0.3em; }
.gstamp.nog { font-size: calc(60px * var(--k)); } .gstamp.nog small { letter-spacing: 0.15em; }
.crit { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6px * var(--k)) calc(18px * var(--k)); font: 500 max(12px, calc(13px * var(--k)))/1.4 var(--f-story); color: var(--ink-2); }
.crit b { display: block; font: 700 max(15px, calc(19px * var(--k)))/1.2 var(--f-num); color: var(--ink); }
.crit .why { grid-column: span 2; font: 600 max(12px, calc(14px * var(--k)))/1.3 var(--f-hand-tc); color: var(--ink-blue); }
.points { margin-top: max(10px, calc(10px * var(--k))); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 600 max(15px, calc(20px * var(--k)))/1.2 var(--f-hand); color: var(--ink-blue); }
.points .tot { position: relative; font: 700 max(20px, calc(28px * var(--k)))/1 var(--f-hand); color: var(--ink-red); padding: calc(6px * var(--k)) calc(12px * var(--k)); }
.points .tot::after { content: ""; position: absolute; inset: -4px -6px; border: 2px solid var(--ink-red); border-radius: 50% 46% 52% 48% / 55% 50% 50% 45%; transform: rotate(-4deg); }
.points .tot.zero { color: var(--ink-3); } .points .tot.zero::after { border-color: var(--ink-3); }
#ending .cum { margin-top: max(10px, calc(10px * var(--k))); font-size: max(12px, calc(14px * var(--k))); }
.book .acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin-top: calc(10px * var(--k)); }
.rh { display: flex; align-items: baseline; gap: 12px; }
.rh.sub { margin-top: calc(8px * var(--k)); }
.rh h2 { margin: 0; font: 700 max(15px, calc(20px * var(--k)))/1 var(--f-hand-tc); color: var(--ink-red); }
.rh span { font: 500 12.5px var(--f-ui); color: var(--ink-2); }
/* 一張的最小寬度 --cw 依人數由 ending.ts 給（人多就小一點，一頁才放得下）；不能再小於 40px：固定十欄在窄螢幕每張只剩三十幾 px，名字被切掉 */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(40px, calc(var(--cw, 60px) * var(--k))), 1fr)); gap: calc(6px * var(--k)) 6px; margin: calc(6px * var(--k)) 0 0; }
/* 人名：字 9px 是下限，行高跟著字（12px），名牌的框高也是 12px、貼在拍立得底邊的留白裡。
   原本框高是照片高的 18%、左右各縮 6%、overflow 隱藏：照片牆隨視窗縮到 40～50px 寬時，框（9px 高）比字（11px 高）小、
   最長的名字（Fatoumata、Valentina 九個字母，後備字型約 42px 寬）也比框寬——人名被裁。
   現在框跟照片一樣寬、不裁（名字最多比框多出一兩 px，落在格子之間 6px 的空隙裡，不會壓到隔壁）。
   框高 12px、下緣伸出拍立得底邊 1px，不撐高拍立得（底下的留白是 --pw 的 22%＝約 10px，9px 的字置中在這 12px 裡剛好落在留白內）：
   拍立得不變高，照片牆與右頁的總高跟改之前一樣（撐高 2px × 幾列，就把原本剛好放得進的右頁推出 2px 的捲動範圍） */
.wall .polaroid { width: 100%; }
.wall .polaroid figcaption { left: 0; right: 0; bottom: -1px; height: 12px; font-size: 9px; line-height: 12px; overflow: visible; }
.left-h { margin-top: calc(10px * var(--k)); }
.left { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14px * var(--k)); margin-top: calc(8px * var(--k)); }
.left > div { display: flex; flex-direction: column; align-items: center; }
.left .polaroid { --pw: max(60px, calc(84px * var(--k))) !important; } /* 蓋過寫在標籤上的 --pw:96px */
.left .lnote { margin: calc(6px * var(--k)) 0 0; text-align: center; font: 600 max(12px, calc(14px * var(--k)))/1.35 var(--f-hand-tc); color: var(--ink-blue); }
.left .lnote b { display: block; font: 700 max(12px, calc(13.5px * var(--k)))/1.3 var(--f-story); color: var(--ink); }
.reveal { position: relative; margin-top: 12px; padding: 10px 14px 11px; transform: rotate(-0.7deg); font: 400 12.5px/1.7 var(--f-num); color: #b7cabf; background: rgba(14, 20, 18, 0.94); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px #2a332e; }
.reveal::before { content: ""; position: absolute; top: -8px; left: 42%; width: 64px; height: 14px; background: var(--tape); transform: rotate(-3deg); }
.reveal .h { display: block; font-size: 10px; letter-spacing: 0.2em; color: #a7bab0; margin-bottom: 2px; }
/* 照片牆的三種處理：冬眠庫（霜）、上傳的意識（冷、掃描線）、全部留下（褪色） */
.wall.vault .polaroid .ph img { filter: saturate(0.35) brightness(1.06) contrast(0.92); }
.wall.vault .polaroid .ph::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(200, 226, 242, 0.55), rgba(200, 226, 242, 0.15) 70%); }
.wall.vault figcaption { color: #2c5c80; }
.wall.dig .polaroid { background: linear-gradient(180deg, #eef2f3, #d9e0e3); }
.wall.dig .polaroid .ph { background: #0f2d35; }
.wall.dig .polaroid .ph img { filter: grayscale(1) contrast(1.2) brightness(1.08); opacity: 0.8; }
.wall.dig .polaroid .ph::before { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(180deg, rgba(169, 210, 224, 0.28) 0 1px, transparent 1px 3px), rgba(40, 120, 150, 0.28); }
.wall.dig figcaption { font-family: var(--f-num); font-weight: 700; font-size: 8px; color: #2c5c80; letter-spacing: 0.04em; }
.wall.gone .polaroid .ph img { filter: grayscale(1) contrast(0.9) brightness(0.8); }
.wall.gone .polaroid { opacity: 0.86; }
.sim { position: absolute; z-index: 51; left: 0; right: 0; bottom: 30px; margin: 0; display: flex; justify-content: center; align-items: center; gap: 16px; font: 400 13px/1 var(--f-num); color: var(--cd-radio); animation: simin 900ms steps(6) 900ms both; }
.sim b { font: 700 18px/1 var(--f-num); letter-spacing: 0.22em; color: #e6f2f6; text-shadow: 2px 0 0 rgba(224, 87, 76, 0.5), -2px 0 0 rgba(169, 194, 204, 0.7); }
.sim i { width: 9px; height: 16px; background: var(--cd-radio); animation: blink 1s steps(1) infinite; }
html.motion-reduce .sim i { animation: none; }
@keyframes simin { 0% { opacity: 0; clip-path: inset(48% 0 48% 0); } 50% { opacity: 1; clip-path: inset(30% 0 60% 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
/* 長夜試煉的紀錄（照抄核心的 epilogue） */
.epi { margin: 8px 0 0; padding: 7px 0 0; list-style: none; border-top: 1px dashed rgba(90, 64, 30, 0.35); }
.epi li { display: grid; grid-template-columns: 96px 1fr; gap: 8px; font: 500 12.5px/1.6 var(--f-story); color: var(--ink-2); }
.epi li b { font: 600 14px/1.55 var(--f-hand-tc); color: var(--ink-red); }
.epi li.d { color: var(--ink); }

/* ---- 視窗太窄（≤ 900：平板直式、手機）或太矮（≤ 600：手機橫放）：左右頁疊成一頁，整本書往下捲；照片不放、黑邊縮小 ----
   前綴寫滿 #ending .book …：mobile.css 的 #app .book .page.l（事件手札手機只留右頁）對結局一樣有效，這裡明寫 display 蓋回來。
   整本書是捲動區塊（.has-more 掛在 .book 上），左頁的 .body 不再自己捲。 */
@media (max-width: 900px), (max-height: 600px) {
  #app.end-mode .lb { height: 54px; }
  #ending.is-book { align-items: start; padding-top: 62px; }
  #ending .book { --k: 1; display: block; width: calc(100vw - 20px); height: calc(100vh - 128px); min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; padding: 8px; transform: none; }
  #ending .book .page { overflow: visible; }
  #ending .book .page.l { display: block; padding: 22px 18px 20px; border-radius: 4px 4px 0 0; }
  #ending .book .page.l .body { overflow: visible; }
  #ending .book .page.r { display: block; padding: 18px 18px 22px; border-radius: 0 0 4px 4px; }
  #ending .book .spine, #ending .shot { display: none; }
  #ending .title h1 { font-size: 52px; }
  #ending .grd { grid-template-columns: 96px 1fr; gap: 12px; } #ending .gstamp { width: 92px; height: 92px; font-size: 56px; } #ending .gstamp.nog { font-size: 44px; }
  .sim { bottom: 14px; } .sim span { display: none; }
}
@media (max-width: 480px) { #ending .wall { grid-template-columns: repeat(5, 1fr); } #ending .left { grid-template-columns: repeat(2, 1fr); } } /* 手機直式：照片牆 5 欄，每格約 58px，名字（9px）放得下；更寬的（平板、手機橫放）照人數自動排 */
@media (max-height: 600px) { /* 手機橫放：黑邊再縮，書佔滿 */
  #app.end-mode .lb { height: 36px; }
  #ending.is-book { padding-top: 44px; }
  #ending .book { height: calc(100vh - 92px); }
}
/* =========================================================
   歸航 HOMEWARD — G11「有點小催淚」的畫面（docs/design/G11-tears.md）：
   手札小紙條（遺物交接、信裡的小事）、個人卡上的遺物、結局書的「回家了」、發射台字幕。
   延續冷暖雙語：NOVA 是冷光字（等寬、發光），人是暖色的紙與手寫；這裡只有紙、拍立得、膠帶、手寫與一條貼在紙上的列印條。
   ========================================================= */

/* ---------- 手札小紙條（靠右通知裡唯一的一張紙） ---------- */
.note.hand { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; padding: 12px 14px 12px 12px; margin-right: 2px; border-left: 0; transform: rotate(-1.2deg);
  font: 600 14.5px/1.55 var(--f-hand-tc); color: var(--ink); text-shadow: none; pointer-events: none;
  background: radial-gradient(130% 110% at 40% 30%, rgba(255, 248, 230, 0) 55%, rgba(96, 58, 20, 0.12) 100%), var(--paper-grain), linear-gradient(176deg, #f3e8d0, #e6d5b0);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(120, 88, 45, 0.35), inset 0 0 18px rgba(120, 76, 26, 0.1); border-radius: 2px; animation: slip-in 620ms var(--ease-snap) both; }
.note.hand::after { content: none; }
.note.hand .tape { top: -9px; left: 24px; width: 64px; transform: rotate(-5deg); }
.note.hand .th { grid-row: 1; width: 46px; height: 46px; padding: 3px 3px 9px; background: linear-gradient(180deg, #fbf8f1, #efe8d9); box-shadow: 0 1px 4px rgba(40, 20, 0, 0.45); transform: rotate(-3deg); }
.note.hand .th img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.18) contrast(1.04) saturate(0.92); }
.note.hand .tx { display: block; }
.note.hand:not(:has(.th)) { grid-template-columns: 1fr; }
@keyframes slip-in { 0% { opacity: 0; transform: translateY(10px) rotate(2.5deg); } 100% { opacity: 1; transform: translateY(0) rotate(-1.2deg); } }
html.motion-reduce .note.hand { animation: none; }

/* ---------- 個人卡：他帶著的遺物 ---------- */
#pcard .c-relic .rl { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; padding: 2px 0 6px 20px; cursor: pointer; }
#pcard .c-relic .clip { position: absolute; left: 1px; top: 8px; width: 9px; height: 19px; border: 2px solid var(--ink-3); border-radius: 6px; transform: rotate(14deg); opacity: 0.8; }
#pcard .c-relic .clip::after { content: ""; position: absolute; left: 1px; top: 6px; width: 3px; height: 8px; border: 1.5px solid var(--ink-3); border-radius: 3px; }
#pcard .c-relic .rl b { font: 700 25px/1.15 var(--f-hand-tc); color: var(--ink-red); transform: rotate(-1.2deg); transform-origin: left; }
#pcard .c-relic .rl small { grid-column: 1; margin-top: 1px; font: 500 12px/1.4 var(--f-ui); color: var(--ink-3); }
#pcard .c-relic .rl-open { grid-row: 1; grid-column: 2; font: 600 13px/1 var(--f-hand-tc); color: var(--ink-3); }
#pcard .c-relic .rl:hover b { color: #a02d18; }
#pcard .c-relic .rl-more { display: grid; grid-template-columns: 96px 1fr; gap: 8px 14px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed rgba(90, 64, 30, 0.35); }
#pcard .c-relic .rl-more .polaroid { --pw: 76px; margin-left: 6px; }
#pcard .c-relic .rl-d { margin: 0; font: 500 13px/1.6 var(--f-story); color: var(--ink-2); }
#pcard .c-relic .rl-ch { margin: 6px 0 0; font: 600 17px/1.4 var(--f-hand-tc); color: var(--ink-blue); }
#pcard .c-relic .rl-ch i { font-style: normal; color: var(--ink-3); margin: 0 5px; }
#pcard .c-relic .rl-ch .me { color: var(--ink-red); }
#pcard .c-relic .rl-hands small { display: block; margin-top: 3px; font: 500 11.5px var(--f-ui); color: var(--ink-3); }
#pcard .c-relic .rl-nova { position: relative; grid-column: 1 / -1; margin: 2px 0 0; padding: 9px 12px 10px; transform: rotate(-0.4deg); font: 400 12px/1.75 var(--f-num); color: #b7cabf; background: rgba(14, 20, 18, 0.94);
  box-shadow: 0 3px 8px rgba(40, 20, 0, 0.35), inset 0 0 0 1px #2a332e; }
#pcard .c-relic .rl-nova span { display: block; font-size: 10px; letter-spacing: 0.2em; color: #8fd7ff; opacity: 0.85; margin-bottom: 2px; }

/* ---------- 結局書右頁：回家了（遺物到家的那一刻） ---------- */
.relics-home { display: grid; gap: 12px; margin: 10px 0 2px; }
.rh-card { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 6px 14px; align-items: center; padding: 9px 16px 8px 10px; transform: rotate(var(--rot, 0deg));
  background: linear-gradient(176deg, rgba(255, 250, 236, 0.7), rgba(236, 222, 188, 0.55)); box-shadow: 0 2px 7px rgba(60, 36, 10, 0.28), inset 0 0 0 1px rgba(120, 88, 45, 0.3); border-radius: 2px; }
.rh-card .polaroid { justify-self: center; margin-bottom: 8px; }
.rh-card .polaroid figcaption { font-family: var(--f-hand-tc); font-size: 11px; }
.rh-tx { min-width: 0; padding-right: 54px; }
.rh-t { margin: 0 0 3px; font: 700 21px/1.2 var(--f-hand-tc); color: var(--ink-red); transform: rotate(-0.8deg); transform-origin: left; }
.rh-s { margin: 0; font: 500 13.5px/1.75 var(--f-story); color: var(--ink); }
.rh-tx small { display: block; margin-top: 4px; font: 500 11.5px var(--f-ui); color: var(--ink-3); }
.rh-card .stamp { position: absolute; right: 12px; top: 10px; font-size: 13px; padding: 2px 8px 1px; }

/* ---------- 發射台字幕：升空的時候，畫面下方黑邊裡一行一行出字（人＝暖色手寫、NOVA＝冷光等寬） ---------- */
#padlines { position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 14px; cursor: pointer; transition: opacity 600ms; }
#padlines.leave { opacity: 0; pointer-events: none; }
/* 寬度用 100vw 不用 100%：這一列的寬度是從字算出來的，百分比會把它自己壓窄 48px，一行字被折成兩行；折行平均，不留孤字 */
#padlines p { margin: 0; max-width: min(880px, calc(100vw - 48px)); text-align: center; text-wrap: balance; }
#padlines .pl-prev { min-height: 20px; font: 500 15px/1.5 var(--f-hand-tc); color: rgba(240, 212, 171, 0.38); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); transition: opacity 400ms; }
#padlines .pl-prev.cold { font: 400 12.5px/1.6 var(--f-num); color: rgba(143, 215, 255, 0.38); }
#padlines .pl-row { display: flex; align-items: center; justify-content: center; gap: 16px; max-width: min(920px, calc(100% - 48px)); }
#padlines .pl-face:empty { display: none; }
#padlines .pl-face .th { display: block; width: 46px; height: 46px; padding: 3px 3px 10px; background: linear-gradient(180deg, #fbf8f1, #efe8d9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); transform: rotate(-3deg); }
#padlines .pl-face img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.18) contrast(1.04) saturate(0.92); }
#padlines .pl-cur { min-height: 40px; font: 600 23px/1.55 var(--f-hand-tc); color: #f6dcae; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95), 0 0 18px rgba(255, 174, 77, 0.18); letter-spacing: 0.04em; }
#padlines .pl-cur.in { animation: pl-in 640ms var(--ease-out) both; }
#padlines .pl-cur.cold { font: 400 16px/1.7 var(--f-num); color: var(--nova); letter-spacing: 0.02em; text-shadow: 0 0 10px rgba(143, 215, 255, 0.55), 0 1px 4px rgba(0, 0, 0, 0.9); animation: none; }
#padlines .pl-cur.cold::after { content: ""; display: inline-block; width: 8px; height: 15px; margin-left: 4px; vertical-align: -2px; background: var(--nova); animation: blink 1s steps(1) infinite; }
#padlines .pl-hint { position: absolute; right: 22px; bottom: 8px; font: 500 11px/1 var(--f-ui); color: rgba(210, 225, 235, 0.45); }
@keyframes pl-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
html.motion-reduce #padlines .pl-cur.in, html.motion-reduce #padlines .pl-cur.cold::after { animation: none; }
@media (max-width: 760px) { #padlines .pl-cur { font-size: 19px; } #padlines .pl-hint { display: none; } }

/* ---------- 結局書右頁左側放大三位的註記：折行平均，不留「空。」這種孤字 ---------- */
.left .lnote { text-wrap: balance; }

/* ---------- 航行日誌的遺物櫃（G11 X1） ---------- */
.relics-cab, .relics-cab-home { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.rc-card { position: relative; display: grid; grid-template-columns: 82px 1fr; gap: 6px 14px; align-items: center; padding: 9px 14px 8px 10px; transform: rotate(var(--rot, 0deg));
  background: linear-gradient(176deg, rgba(255, 250, 236, 0.7), rgba(236, 222, 188, 0.55)); box-shadow: 0 2px 7px rgba(60, 36, 10, 0.28), inset 0 0 0 1px rgba(120, 88, 45, 0.3); border-radius: 2px; }
.rc-card.next { box-shadow: 0 2px 7px rgba(60, 36, 10, 0.28), inset 0 0 0 1px rgba(120, 88, 45, 0.3), inset 3px 0 0 var(--ink-red); }
.rc-card .polaroid { justify-self: center; margin-bottom: 8px; }
.rc-card .polaroid figcaption { font-family: var(--f-hand-tc); font-size: 11px; }
.rc-card .rh-tx { padding-right: 0; }
.rc-t { margin: 0 0 3px; font: 700 18px/1.35 var(--f-hand-tc); color: var(--ink-red); transform: rotate(-0.6deg); transform-origin: left; text-wrap: balance; }
.relics-cab .rl-ch, .relics-cab-home .rl-ch { margin: 6px 0 0; font: 600 16px/1.4 var(--f-hand-tc); color: var(--ink-blue); }
.relics-cab .rl-ch i, .relics-cab-home .rl-ch i { font-style: normal; color: var(--ink-3); margin: 0 5px; }
.relics-cab .rl-ch .me, .relics-cab-home .rl-ch .me { color: var(--ink-red); }
/* 日誌的註解段 class="jn" 撞到協議板的 .jn（council.css:66，菱形節點：絕對定位、12px、轉 45 度）——整句字被轉成斜的小方塊（b6a0f62 起就是這樣）。
   這裡先在日誌裡還原；根治請把協議板那個類名改掉。遺物櫃自己的註解用 cab-note，不踩這個坑 */
.jbook .jn { position: static; width: auto; height: auto; transform: none; background: none; box-shadow: none; pointer-events: auto; }
.cab-note { margin: 0 0 8px; font: 500 12.5px/1.6 var(--f-ui); color: var(--ink-2); }
.rc-t { word-break: keep-all; } /* 只在「．」與空格換行，不把人名從中間折斷 */
.cab-h { margin: 20px 0 2px; font: 700 18px var(--f-hand-tc); color: var(--ink-red); }
.cab-h span { margin-left: 8px; font: 500 12px var(--f-ui); color: var(--ink-3); }
.relics-cab-home { gap: 0; }
.relics-cab-home li { position: relative; padding: 8px 64px 8px 4px; border-bottom: 1px dashed rgba(90, 64, 30, 0.3); }
.relics-cab-home b { display: block; font: 700 15px/1.4 var(--f-hand-tc); color: var(--ink-red); }
.relics-cab-home .rl-ch { margin: 2px 0 0; font-size: 15px; }
.relics-cab-home small { display: block; margin-top: 2px; font: 500 11.5px var(--f-ui); color: var(--ink-3); }
.relics-cab-home .stamp { position: absolute; right: 4px; top: 10px; font-size: 12px; padding: 2px 8px 1px; }

/* ---------- 首頁：NOVA 那一句底下，手寫一行這一次帶進去的東西（G11 X2） ---------- */
.tt-nova .tt-carry { display: block; margin-top: 10px; font: 600 19px/1.5 var(--f-hand-tc); letter-spacing: 0.06em; color: #f0d6a8; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 0 16px rgba(255, 174, 77, 0.16); animation: pl-in 900ms var(--ease-out) 4.6s both; }
html.motion-reduce .tt-nova .tt-carry, html.q-low .tt-nova .tt-carry { animation: none; }

/* ---------- 結局書左頁的敘述：最後一行不留一兩個字 ---------- */
.book .story p { text-wrap: pretty; }
/* =========================================================
   歸航 HOMEWARD — 最後一夜（G5 §2.5；design/ui-mock/README §0 的黑邊與「只留必要資訊」）
   #app.lastnight：上下細黑邊（在介面底下、場景上面）、四周壓暗、場景略降飽和；目標提示收起，建造鍵與快捷鍵退到半透明。
   #ln-card：開始時的標題卡。最後一夜面板 .ln-*、逐人勾選的名冊 .ln-roster。
   ========================================================= */

/* ---------- 主畫面 ---------- */
.ln-bar { position: absolute; left: 0; right: 0; height: 46px; z-index: 5; pointer-events: none; transform: scaleY(0); transition: transform 1200ms var(--ease-out); }
.ln-bar.t { top: 0; transform-origin: top; background: linear-gradient(#000 0 70%, rgba(0, 0, 0, 0)); }
.ln-bar.b { bottom: 0; transform-origin: bottom; background: linear-gradient(rgba(0, 0, 0, 0), #000 30% 100%); }
#app.lastnight .ln-bar { transform: scaleY(1); }
#app.lastnight .vig { background: radial-gradient(115% 90% at 50% 50%, transparent 45%, rgba(2, 4, 8, 0.78) 100%); }
#app.lastnight:not(.is-event):not(.panel-people) #map { filter: saturate(0.8) contrast(1.04); }
#app.lastnight #goal { display: none !important; }
@media (min-width: 901px) { #app.lastnight .u-ark { top: 54px; } } /* 頂部時間那一格多了倒數：方舟座位挪到細黑邊下面，不跟它疊在一起 */
#app.lastnight #dock, #app.lastnight #tools { opacity: calc(var(--ui-dim) * 0.75); } /* 退到半透明，但不是看不見：夜裡 0.8 × 0.5 ＝ 0.4 時底下的鍵名與「建造」量到 3.0–3.6:1（要 4.5），0.8 × 0.75 ＝ 0.6 */
#app.lastnight #dock:hover, #app.lastnight #tools:hover { opacity: var(--ui-dim); }
.ln-dl { color: var(--cd-fg); }
.ln-dl.bad { color: var(--cd-red) !important; }
#app.ln-urgent .n.ln-dl.bad { animation: ln-blink 1.2s steps(2, jump-none) infinite; }
@keyframes ln-blink { 50% { opacity: 0.35; } }

/* ---------- 標題卡 ---------- */
#ln-card { position: absolute; inset: 0; z-index: 60; /* 壓過事件視窗（#modal.overlay 的 55）：名單手札在它後面等 2 秒 */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; opacity: 0; transition: opacity 700ms; }
#ln-card.show { opacity: 1; pointer-events: auto; cursor: pointer; }
#ln-card { background: radial-gradient(80% 70% at 50% 50%, #07090c, #000); } /* 整片黑：2 秒後淡出，接核心入艦的鏡頭（或名單手札） */
#ln-card b { font: 900 clamp(40px, 6vw, 76px)/1 var(--f-story); letter-spacing: 0.32em; padding-left: 0.32em; color: #f1ece2; text-shadow: 0 0 40px rgba(255, 174, 77, 0.25), 0 2px 12px rgba(0, 0, 0, 0.9); }
#ln-card span { font: 400 14px/1.4 var(--f-num); letter-spacing: 0.14em; color: rgba(220, 228, 233, 0.75); text-shadow: 0 1px 6px #000; }
#ln-card.show b { animation: ln-rise 2400ms var(--ease-out) both; }
@keyframes ln-rise { from { opacity: 0; transform: translateY(8px); letter-spacing: 0.5em; } 25% { opacity: 1; } to { opacity: 1; transform: none; letter-spacing: 0.32em; } }
@media (prefers-reduced-motion: reduce) { #ln-card.show b { animation: none; } .ln-bar { transition: none; } }

/* ---------- 最後一夜面板 ---------- */
.ln-big .big .n { font-size: 40px; }
.ln-big .cnt { margin-top: 8px; }
.ln-st { display: flex; flex-direction: column; gap: 4px; padding: 8px 16px 2px; font-size: 12.5px; color: var(--cd-fg-2); }
.ln-st span { display: flex; align-items: center; gap: 7px; }
.ln-st .ic { width: 14px; height: 14px; color: var(--cd-lcd); }
.ln-bad, .ln-st .ln-bad { color: #ff9a90 !important; }
.ln-st .ln-bad .ic { color: var(--cd-red); }
.ln-h { padding: 8px 16px 2px; margin: 0; }
.ln-jobs { margin: 0 16px; }
.ln-jobs li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
.ln-camp { display: flex; flex-direction: column; gap: 4px; }
.ln-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.ln-face { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 3px; color: var(--cd-fg-2); cursor: pointer; }
.ln-face:disabled { cursor: default; }
.ln-face .mug { width: 34px; height: 34px; }
.ln-face b { font: 500 11.5px/1.2 var(--f-story); color: var(--cd-fg); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-face small { font-size: 10.5px; color: var(--cd-fg-3); }
.ln-face.k-on { border-color: rgba(255, 174, 77, 0.55); box-shadow: inset 0 0 12px rgba(255, 174, 77, 0.12); }
.ln-face.k-on small { color: var(--ember); }
.ln-face.k-cryo { border-color: rgba(124, 201, 255, 0.45); }
.ln-face.k-cryo small { color: #9ed3f5; }
.ln-face.k-left { opacity: 0.55; }
.ln-face.k-left .mug .pt { filter: grayscale(1) brightness(0.8); }
.ln-face:not(:disabled):hover { background: rgba(255, 255, 255, 0.07); }

/* ---------- 逐人勾選的名冊（暖：紙＋拍立得） ---------- */
.ln-roster { width: min(1080px, calc(100% - 40px)); max-height: calc(100% - 200px); display: flex; flex-direction: column; padding: 18px 20px 14px; transform: rotate(-0.25deg); animation: drop-in 500ms var(--ease-snap) both; }
.ln-roster header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid rgba(90, 64, 30, 0.3); padding-bottom: 8px; }
.ln-roster h2 { margin: 0; font: 900 26px/1.1 var(--f-story); }
.ln-roster header p { margin: 0; font: 400 14px/1.4 var(--f-story); color: rgba(42, 32, 23, 0.8); }
.ln-roster .cnt2 { margin-left: auto; font: 700 16px var(--f-num); color: #8a2a1e; }
.ln-roster .cnt2.full { color: #2f5a3a; }
.ln-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px 10px; padding: 14px 4px; scrollbar-width: thin; }
.ln-pc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; background: none; border: 0; color: var(--ink); cursor: pointer; }
.ln-pc .polaroid { transition: transform 200ms, filter 200ms; filter: grayscale(0.85) brightness(0.92); }
.ln-pc.on .polaroid { filter: none; transform: rotate(var(--rot)) translateY(-3px); }
.ln-pc small { font: 400 11.5px/1.3 var(--f-story); color: rgba(42, 32, 23, 0.78); text-align: center; }
.ln-pc small.rel { color: #8a4a1e; font-family: var(--f-hand-tc); font-size: 13px; }
.ln-pc .ck { position: absolute; top: 2px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(42, 32, 23, 0.18); color: rgba(42, 32, 23, 0.5); }
.ln-pc.on .ck { background: #b8451f; color: #fff4e4; }
.ln-pc .ck .ic { width: 13px; height: 13px; }
.ln-roster footer { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid rgba(90, 64, 30, 0.3); padding-top: 10px; }
#modal .ln-roster footer .choice { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 8px 14px; color: var(--ink); background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(90, 64, 30, 0.35); border-radius: 2px; cursor: pointer; }
#modal .ln-roster footer .choice.pri { background: #2a2017; color: #f4ead6; }
#modal .ln-roster footer .choice:disabled { opacity: 0.4; cursor: default; }
#modal .ln-roster footer .no { font: 400 11px var(--f-num); opacity: 0.7; }
@media (max-width: 760px) { .ln-roster { max-height: calc(100% - 120px); } .ln-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }
/* =========================================================
   歸航 HOMEWARD — 幕名卡（第 83 題、G14 §2.5；ui/actcard.ts）：換進第二幕「爐火」、第三幕「長夜」那一刻，
   頂欄下方正中一行宋體大字＋一行副標：0.5 秒淡入、停 2.5 秒、0.7 秒淡出（動畫總長 ＝ actcard.ts 的 ACT_CARD_MS）。不暫停、不擋操作（點得穿），只在換幕那一刻出現一次。
   字是暖白，底下一條夠深的暗帶（::before：整段字底下是平的 0.74，只在兩端與上下緣淡出）：亮灰白的天空（第二、三幕的白天）上對比 ≥ 4.5；
   兩側一條細線收邊（同最後一夜標題卡的語言）。
   ========================================================= */
#act-card { --ac-pad: 64px; position: absolute; left: 50%; top: 122px; z-index: 7; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px var(--ac-pad) 15px; pointer-events: none; opacity: 0; visibility: hidden; white-space: nowrap; }
/* 字底下的暗帶：平的那一段正好蓋住字（字從 --ac-pad 起；帶子往兩側多伸 30px 淡出），上下各 16px 淡出；不用放射狀漸層——它在字的兩端只剩三成，亮天空上字尾對比掉到 3 以下 */
#act-card::before { content: ''; position: absolute; inset: -6px -30px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 9, 14, 0), rgba(6, 9, 14, 0.74) calc(var(--ac-pad) + 30px), rgba(6, 9, 14, 0.74) calc(100% - var(--ac-pad) - 30px), rgba(6, 9, 14, 0));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(180deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
#act-card.show { visibility: visible; animation: act-card 3000ms var(--ease-out) both; }
#act-card b { font: 700 clamp(26px, 2.9vw, 40px)/1.15 var(--f-story); letter-spacing: 0.34em; padding-left: 0.34em; color: #f4eee2;
  text-shadow: 0 0 28px rgba(255, 174, 77, 0.22), 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6); }
#act-card span { display: flex; align-items: center; gap: 12px; font: 400 13px/1.4 var(--f-story); letter-spacing: 0.22em; color: rgba(236, 232, 222, 0.92); text-shadow: 0 1px 6px #000, 0 0 2px #000; }
#act-card span::before, #act-card span::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, rgba(236, 232, 222, 0), rgba(236, 232, 222, 0.75)); }
#act-card span::after { transform: scaleX(-1); }
@keyframes act-card { 0% { opacity: 0; } 13.3% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } /* 總長 3 秒（第 83 題）：0.4 秒淡入、停 2.0 秒、0.6 秒淡出 */
#act-card.show b { animation: act-rise 3000ms var(--ease-out) both; }
@keyframes act-rise { from { transform: translateY(6px); letter-spacing: 0.5em; } 32% { transform: none; letter-spacing: 0.34em; } to { transform: none; letter-spacing: 0.34em; } }
html.motion-reduce #act-card.show b { animation: none; } /* 遊戲設定的「減少動態」（跟隨系統時 settings.ts 也會設這個 class）：只淡入淡出，字不動 */
/* 手機：頂端三列（到 y≈104）與冰暴警示（114 起）之下 */
@media (max-width: 760px) {
  #act-card { --ac-pad: 34px; top: 158px; padding: 10px var(--ac-pad) 11px; gap: 5px; }
  #act-card b { font-size: 24px; letter-spacing: 0.28em; padding-left: 0.28em; }
  #act-card span { font-size: 12px; letter-spacing: 0.16em; gap: 8px; }
  #act-card span::before, #act-card span::after { width: 20px; }
}
/* =========================================================
   歸航 HOMEWARD — 短局 roguelite 的介面（G4）：標題的模擬編號與寒潮等級、開局的行星卡、HUD 展開資訊的「模擬 #N」、
   磁暴帶（NOVA 離線）與冰火山的警示、結局的判詞與真結局、航行日誌畫面。
   冷的（系統、NOVA）用 --cd-* 與等寬字；暖的（結局、日誌）延續結局「航行日誌・最後一頁」的紙本手札語言（ending.css）。
   ========================================================= */

/* ---------- 標題：模擬編號、寒潮等級 ---------- */
.simno { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font: 400 12.5px/1.4 var(--f-num); color: var(--cd-radio); }
.simno b { font: 700 20px/1 var(--f-num); letter-spacing: 0.12em; color: #e6f2f6; text-shadow: 0 0 14px rgba(169, 194, 204, 0.35); }
.simno .n { color: var(--cd-lcd); }
.eyebrow .hint { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.chills { display: flex; flex-wrap: wrap; gap: 6px; }
.chill { min-width: 38px; height: 34px; padding: 0 8px; cursor: pointer; font: 700 15px var(--f-num); color: var(--text-2); border: 1px solid var(--line); background: rgba(10, 16, 30, 0.75); }
.chill:hover { color: var(--text); border-color: var(--line-2); }
.chill.on { color: var(--text); border-color: var(--ember); background: rgba(60, 34, 12, 0.7); }
.chill-note { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-2); min-height: 1.55em; }

/* ---------- 開局：這一局的行星（系統的聲音：冷、等寬字、黑邊裡；按 1 或點一下開始） ---------- */
.simcard { position: relative; width: min(580px, calc(100% - 36px)); max-height: calc(100% - 190px); overflow-y: auto; padding: 26px 30px 20px; color: var(--cd-fg);
  background: var(--cd-panel-solid); backdrop-filter: blur(10px) saturate(0.7); -webkit-backdrop-filter: blur(10px) saturate(0.7);
  box-shadow: inset 0 0 0 1px var(--cd-hair), 0 24px 60px rgba(0, 0, 0, 0.55); animation: cd-in 420ms var(--ease-out) both; scrollbar-width: thin; }
.simcard .k { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 500 11px/1 var(--f-num); letter-spacing: 0.28em; color: rgba(169, 194, 204, 0.7); }
.simcard .k i { width: 6px; height: 6px; border-radius: 50%; background: var(--cd-radio); box-shadow: 0 0 6px var(--cd-radio); animation: blink 1.2s steps(1) infinite; }
.simcard h2 { margin: 0 0 16px; font: 700 28px/1.2 var(--f-num); letter-spacing: 0.06em; color: #e6f2f6; text-shadow: 2px 0 0 rgba(224, 87, 76, 0.35), -2px 0 0 rgba(169, 194, 204, 0.5); }
.simcard h2 small { display: block; margin-top: 6px; font: 500 13px var(--f-ui); letter-spacing: 0.14em; color: var(--cd-fg-3); text-shadow: none; }
.simcard .traits { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.simcard .traits li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; align-items: start; }
.simcard .traits li .ic { grid-row: span 2; width: 18px; height: 18px; margin-top: 2px; color: var(--cd-radio); }
.simcard .traits b { font: 700 17px/1.3 var(--f-ui); color: #eef2f4; }
.simcard .traits span { font: 400 13px/1.65 var(--f-ui); color: var(--cd-fg-2); }
.simcard .none { margin: 0 0 14px; font-size: 13px; color: var(--cd-fg-2); }
.simcard .chillbox { margin: 0 0 14px; padding: 10px 14px 12px; background: rgba(224, 87, 76, 0.08); box-shadow: inset 0 0 0 1px rgba(224, 87, 76, 0.45); }
.simcard .chillbox b { font: 700 14px var(--f-ui); color: #ffb1a8; }
.simcard .chillbox ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.7; color: var(--cd-fg-2); }
.simcard .meta { margin: 0 0 12px; font: 400 12px var(--f-num); color: var(--cd-fg-3); }
.simcard .meta .n { color: var(--cd-lcd); }
#modal .simcard .ev-ch { margin-top: 4px; }
#modal .simcard .ev-ch .choice { color: var(--cd-fg); border-top: 1px solid var(--cd-hair); }
#modal .simcard .ev-ch .choice:hover:not(:disabled), #modal .simcard .ev-ch .choice:focus-visible { background: rgba(255, 255, 255, 0.08); box-shadow: inset 3px 0 0 #fff; }
#modal .simcard .ev-ch .choice b { font: 700 16px/1.4 var(--f-ui); color: #eef2f4; }
#modal .simcard .ev-ch .choice .no, #modal .simcard .ev-ch .choice:hover:not(:disabled) .no, #modal .simcard .ev-ch .choice:focus-visible .no { color: #101418; background: #d7dde1; }
#modal .simcard .ev-ch .choice .fx2 { color: var(--cd-fg-3); }

/* ---------- HUD 展開資訊裡的「模擬 #N」一節 ---------- */
.drop .runsec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.drop .runsec li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline; }
.drop .runsec .tn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--cd-fg); }
.drop .runsec .tn .ic { width: 13px; height: 13px; color: var(--cd-radio); }
.drop .runsec .td { line-height: 1.55; color: var(--cd-fg-2); }
.drop .runsec li.chl .tn { color: #ffb1a8; } .drop .runsec li.chl .tn .ic { color: var(--cd-red); }

/* ---------- 警示：冰火山一行（冰暴那一行下面）、NOVA 離線 ---------- */
.u-warn .win + .win { margin-top: 6px; }
.rs.off { color: #ffb3a8; font-size: 12px; }
.rs.off .ic { color: var(--cd-red); }
.rs.off::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cd-red); box-shadow: 0 0 8px var(--cd-red); animation: blink 1s steps(1) infinite; }
.radio.off { color: rgba(255, 160, 150, 0.85); font-size: 13px; }
.radio.off .ch i { background: var(--cd-red); box-shadow: 0 0 6px var(--cd-red); }
#drawer[data-tab="nova"] .nsay.off { color: #ffb3a8; }
#drawer[data-tab="nova"] .dlg span.pause { opacity: 0.5; }
#drawer[data-tab="nova"] .dlg span.pause::before { background: none; box-shadow: inset 0 0 0 1px var(--cd-red); }
html.motion-reduce .rs.off::before, html.q-low .rs.off::before, html.motion-reduce .simcard .k i { animation: none; }

/* ---------- 結局：判詞、累積航跡、真結局 ---------- */
.book .verd { margin-top: 16px; }
.book .verd .vh { margin: 0 0 4px; font: 700 15px/1 var(--f-hand-tc); color: var(--ink-red); }
.book .verd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.book .verd li { position: relative; padding-left: 16px; font: 600 14.5px/1.6 var(--f-hand-tc); color: var(--ink-blue); }
.book .verd li::before { content: "—"; position: absolute; left: 0; color: var(--ink-red); }
.book .cum { margin: 8px 0 0; font: 600 14px/1.4 var(--f-hand-tc); color: var(--ink-2); }
.book .cum b { font: 700 16px var(--f-num); color: var(--ink); }
#ending.is-true { background: #000; place-items: center; overflow: hidden; padding: 0; }
.trueend { position: relative; width: min(780px, 100%); height: min(600px, 100%); display: grid; align-content: center; justify-items: center; gap: 24px; padding: 0 24px; text-align: center; }
.trueend .star { position: absolute; left: 50%; top: -30px; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.7), 0 -26px 16px -3px rgba(255, 255, 255, 0.28); animation: star-fall 7s cubic-bezier(0.4, 0.1, 0.6, 1) 500ms both; }
@keyframes star-fall { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate(-70px, 70vh); opacity: 0; } }
.trueend .tl { margin: 0; font: 500 24px/1.9 var(--f-story); letter-spacing: 0.1em; color: #eef2f4; animation: te-in 2400ms ease-out both; }
.trueend .l1 { animation-delay: 2600ms; } .trueend .l2 { animation-delay: 6200ms; }
.trueend .tsim { display: grid; gap: 4px; margin: 14px 0 0; font: 400 12.5px/1.4 var(--f-num); color: var(--cd-radio); animation: te-in 1600ms ease-out 10s both; }
.trueend .tsim b { font: 700 16px/1 var(--f-num); letter-spacing: 0.2em; color: #e6f2f6; }
.trueend .tsim .n { color: var(--cd-lcd); }
.trueend .tacts { display: flex; gap: 8px; animation: te-in 1200ms ease-out 11.5s both; }
@keyframes te-in { from { opacity: 0; } }
html.motion-reduce .trueend .star { display: none; }
html.motion-reduce .trueend .tl, html.motion-reduce .trueend .tsim, html.motion-reduce .trueend .tacts { animation: none; }

/* ---------- 航行日誌：左頁現況與解鎖樹、右頁翻頁籤（最近的局、已知的人、看過的結局、紀錄） ---------- */
#journal.is-book { z-index: 52; padding: 0; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, rgba(12, 16, 24, 0.92), rgba(2, 3, 6, 0.97)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.jbook { position: relative; width: min(1120px, calc(100vw - 40px)); height: min(700px, calc(100vh - 56px)); min-height: 420px; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; transform: rotate(-0.2deg);
  background: radial-gradient(120% 120% at 50% 40%, #3e2a1c, #1e130b); border-radius: 7px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75), inset 0 0 0 2px #4d3422; animation: drop-in 520ms var(--ease-snap) both; }
.jbook .page.jl { padding: 28px 34px 24px 40px; }
.jbook .page.jr { padding: 18px 34px 24px 36px; }
.jbook .jt { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.jbook .jt h1 { margin: 0; font: 900 44px/1 var(--f-story); letter-spacing: 0.04em; color: var(--ink); }
.jbook .jt .sub { font: 600 16px var(--f-hand-tc); color: var(--ink-blue); }
.jbook .jpts { display: grid; gap: 6px; margin-top: 14px; padding: 12px 0; border-top: 1.5px solid rgba(90, 64, 30, 0.35); border-bottom: 1.5px solid rgba(90, 64, 30, 0.35); }
.jbook .jpts .big { display: flex; align-items: baseline; gap: 12px; }
.jbook .jpts .big b { font: 700 42px/1 var(--f-num); color: var(--ink-red); }
.jbook .jpts .big span { font: 600 16px var(--f-hand-tc); color: var(--ink-blue); }
.jbook .jpts .cum { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font: 500 13px var(--f-ui); color: var(--ink-2); }
.jbook .jpts .cum b { font: 700 15px var(--f-num); color: var(--ink); }
.jbook .jh { margin: 16px 0 2px; font: 700 18px/1 var(--f-hand-tc); color: var(--ink-red); }
.jbook .jn { margin: 0 0 8px; font: 500 12.5px/1.6 var(--f-ui); color: var(--ink-2); }
.jbook .uline h4 { margin: 12px 0 2px; font: 700 14px var(--f-story); color: var(--ink); }
.jbook .uline h4 span { margin-left: 8px; font: 500 12px var(--f-ui); color: var(--ink-3); }
.jbook .uline ul { list-style: none; margin: 0; padding: 0; }
.jbook .ur { display: grid; grid-template-columns: 26px 1fr 38px 86px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed rgba(90, 64, 30, 0.28); }
.jbook .ur .tn { font: 700 15px var(--f-num); color: var(--ink-3); }
.jbook .ur .nm b { display: block; font: 700 14px/1.4 var(--f-story); color: var(--ink); }
.jbook .ur .nm small { display: block; font: 500 12px/1.45 var(--f-ui); color: var(--ink-2); }
.jbook .ur .cost { text-align: right; font: 700 14px var(--f-num); color: var(--ink-blue); }
.jbook .ur.own .nm b { color: var(--ink-green); }
.jbook .ur.lockd .nm { font: 600 14px var(--f-hand-tc); color: var(--ink-3); }
.jbook .ur.lockd .cost { grid-column: 3 / 5; } /* 沒內容的幾階只有三格：費用橫跨後兩欄（在「／」後面換行，不要在 38px 裡一個數字一行；不能 nowrap：五階的費用串在手機會撐出橫向捲軸） */
.jbook .ur .own { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font: 700 12px var(--f-ui); color: var(--ink-green); }
.jbook .ur .own .ic { width: 13px; height: 13px; color: var(--ink-green); }
.jbook .ur .cbtn { width: 100%; height: 30px; padding: 0 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); background: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.jbook .ur .cbtn:hover:not(:disabled) { color: #fff7ea; background: var(--ink); }
.jbook .ur .cbtn:disabled { opacity: 0.85; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px rgba(90, 64, 30, 0.4); cursor: not-allowed; } /* 全站的停用鈕是 0.66，疊在紙上的淺墨色上只有 2.8（對比掃描新掃到航行日誌才發現）；這裡的淺墨色本來就是「停用」，不再疊一層 */
.jbook .ur .cbtn .ic { width: 12px; height: 12px; margin-right: 3px; color: currentColor; }
.jbook .jtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 40px 12px 0; border-bottom: 1.5px solid rgba(90, 64, 30, 0.35); }
.jbook .jtabs button { padding: 8px 14px 9px; position: relative; top: 1.5px; font: 700 15px var(--f-hand-tc); color: var(--ink-3); background: none; border: 0; cursor: pointer; }
.jbook .jtabs button:hover { color: var(--ink); }
.jbook .jtabs button.on { color: var(--ink-red); box-shadow: inset 0 -3px 0 var(--ink-red); }
.jbook .runs { list-style: none; margin: 0; padding: 0; }
.jbook .run { display: grid; grid-template-columns: 52px 1fr 38px 70px 70px; gap: 4px 10px; align-items: center; padding: 8px 0; border-top: 1px dashed rgba(90, 64, 30, 0.28); }
.jbook .run .no { font: 700 14px var(--f-num); color: var(--ink-blue); }
.jbook .run .en b { font: 700 15px var(--f-story); color: var(--ink); }
.jbook .run .en small { display: block; font: 500 12px var(--f-ui); color: var(--ink-2); }
.jbook .run .gr { display: grid; place-items: center; width: 36px; height: 36px; border: 2px double var(--ink-red); border-radius: 50%; transform: rotate(-8deg); font: 400 24px/1 var(--f-stencil); color: var(--ink-red); }
.jbook .run .gr.g-nog { font-size: 18px; color: var(--ink-3); border-color: var(--ink-3); }
.jbook .run .gr.g-F { color: var(--ink-3); border-color: var(--ink-3); }
.jbook .run .bd, .jbook .run .pt { text-align: right; font: 500 13px var(--f-ui); color: var(--ink-2); }
.jbook .run .bd b, .jbook .run .pt b { font: 700 15px var(--f-num); color: var(--ink); }
.jbook .run .bd small, .jbook .run .pt small { display: block; font: 500 11px var(--f-ui); color: var(--ink-3); }
.jbook .run .ex { grid-column: 2 / -1; font: 600 13px/1.5 var(--f-hand-tc); color: var(--ink-blue); }
.jbook .run .ex em { margin-right: 10px; font-style: normal; color: var(--ink-red); }
.jbook .run.is-true .en b::after { content: "　可以停了"; font: 600 12px var(--f-hand-tc); color: var(--ink-red); }
/* 回放（有錄影的最近 5 局，ui/replay.ts）：紙上的墨色框鈕，跟解鎖、重看開場同一種；放在這一列最後、從第二欄起 */
.jbook .run .rp { grid-column: 2 / -1; }
.jbook .jerr { margin: 0 0 8px; padding: 6px 10px; color: var(--ink-red); box-shadow: inset 2px 0 0 var(--ink-red); } /* 回放讀不到：紅墨一行 */
.jbook .run .rp .cbtn { height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 700; color: var(--ink); background: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.jbook .run .rp .cbtn:hover { color: #fff7ea; background: var(--ink); }
.jbook .run .rp .cbtn .ic { width: 11px; height: 11px; margin-right: 5px; color: currentColor; }
.jbook .people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.jbook .people li { padding: 8px 10px; background: rgba(255, 255, 255, 0.28); box-shadow: inset 0 0 0 1px rgba(90, 64, 30, 0.25); }
.jbook .people b { font: 700 15px var(--f-story); color: var(--ink); }
.jbook .people .en { margin-left: 8px; font: 600 15px var(--f-hand); color: var(--ink-blue); }
.jbook .people small { display: block; font: 500 12px var(--f-ui); color: var(--ink-2); }
.jbook .people .trs { display: block; font: 600 13px var(--f-hand-tc); color: var(--ink-red); }
.jbook .ends { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jbook .ends li { padding: 11px 8px; text-align: center; font: 700 15px var(--f-story); color: var(--ink-3); box-shadow: inset 0 0 0 1px rgba(90, 64, 30, 0.3); }
.jbook .ends li.seen { color: var(--ink); background: rgba(255, 255, 255, 0.28); }
.jbook .ends li.true { grid-column: span 3; color: var(--ink-red); box-shadow: inset 0 0 0 1.5px var(--ink-red); }
.jbook .ends li .ic { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: currentColor; }
.jbook .lore { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.jbook .lore h4 { margin: 0 0 3px; font: 700 15px var(--f-hand-tc); color: var(--ink-red); }
.jbook .lore p { margin: 0; font: 500 14px/1.8 var(--f-story); color: var(--ink); }
.jbook .lore .sealed p { font-style: italic; color: var(--ink-3); }
.jbook .empty { margin: 8px 0; font: 600 15px/1.8 var(--f-hand-tc); color: var(--ink-3); }
.jbook .jopen { margin: 18px 0 0; }
.jbook .jopen .cbtn { height: 32px; padding: 0 14px; font-size: 13px; font-weight: 700; color: var(--ink); background: none; box-shadow: inset 0 0 0 1.5px var(--ink); } /* 紙上的按鈕：墨色框（解鎖鈕同一種），不是深色面板上的淡字 */
.jbook .jopen .cbtn:hover { color: #fff7ea; background: var(--ink); }
.jbook .jopen .cbtn .ic { width: 12px; height: 12px; margin-right: 5px; color: currentColor; }
.jbook .jx { position: absolute; right: 18px; top: 16px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-3); background: none; border: 0; cursor: pointer; }
.jbook .jx:hover { color: var(--ink-red); }
.jbook .jx .ic { width: 18px; height: 18px; color: currentColor; }

@media (max-width: 760px) {
  .simno b { font-size: 17px; }
  .simcard { padding: 20px 18px 14px; max-height: calc(100% - 130px); }
  .simcard h2 { font-size: 22px; }
  #app .u-warn .win + .win { margin-top: 4px; }
  /* 日誌：兩頁疊成一欄、整本可以捲 */
  #journal.is-book { place-items: stretch; }
  .jbook { display: block; width: calc(100vw - 12px); height: calc(100vh - 12px); margin: 6px auto; padding: 6px; overflow-y: auto; transform: none; scrollbar-width: none; }
  .jbook .page { overflow: visible; margin-bottom: 6px; }
  .jbook .page.jl { padding: 18px 16px 14px; } .jbook .page.jr { padding: 12px 14px 18px; }
  .jbook .spine { display: none; }
  .jbook .jt h1 { font-size: 34px; }
  .jbook .jtabs { margin-right: 0; }
  .jbook .jtabs button { padding: 8px 10px 9px; font-size: 14px; }
  .jbook .ur { grid-template-columns: 24px 1fr 32px 76px; gap: 6px; }
  .jbook .run { grid-template-columns: 46px 1fr 34px 62px; }
  .jbook .run .pt { display: none; }
  .jbook .people { grid-template-columns: 1fr; }
  .jbook .ends { grid-template-columns: repeat(2, 1fr); } .jbook .ends li.true { grid-column: span 2; }
  .jbook .jx { position: fixed; right: 14px; top: 12px; }
}

/* =========================================================
   歸航 HOMEWARD — 設定視窗：和新首頁（title.css）同一種語言——場景退後、沒有框、只有細線；三組：畫面、音效、操作
   內容由 ui/settings-modal.ts 畫。#modal 加 .st-screen 才套這份（hideModal 會把 className 還原成 overlay）。
   shell.mjs 認的選擇器照舊：#modal .set-box、#modal .seg button[data-k][data-v]、#set-<音量>／#out-<音量>、#set-quality-note、[data-act="modal-close"]。
   ========================================================= */
#modal.st-screen { align-items: flex-start; justify-content: center; overflow-y: auto; background: rgba(3, 5, 9, 0.76); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  --cd-fg: #f5f8fa; --cd-fg-2: #e6ecef; --cd-fg-3: #cfd7dc; --cd-lcd: #e2efe8; --cd-hair: rgba(255, 255, 255, 0.2); color: var(--cd-fg); }
.set-box.st { width: min(660px, 100%); max-height: none; margin: auto 0; padding: 4px 4px 28px; display: block; background: none; box-shadow: none; border: 0; animation: cd-in 360ms var(--ease-out) both; }
@media (min-width: 1000px) { .set-box.st { width: min(1040px, 100%); } .st-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; } .st-grp:last-child { grid-column: 1 / -1; } } /* 寬螢幕：上排畫面、音效並排，操作整列放在下面（三組分兩欄會有一欄短一截），一屏放得下 */
.st-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.st-eb { margin: 0; font: 400 11px/1 var(--f-num); letter-spacing: 0.26em; color: var(--cd-fg-3); }
.set-box.st h2 { margin: 10px 0 0; font: 700 30px/1.1 var(--f-ui); letter-spacing: 0.06em; color: #f1f4f5; }
.st-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--cd-fg-2); background: none; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--cd-hair); }
.st-x:hover, .st-x:focus-visible { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); outline: none; }
.st-x .ic { width: 18px; height: 18px; }

.st-grp { padding: 16px 0 18px; border-top: 1px solid var(--cd-hair); }
.st-grp h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; font: 500 12px/1 var(--f-ui); letter-spacing: 0.16em; color: var(--cd-fg-3); }
.st-grp h3 i { font: 400 10px/1 var(--f-num); font-style: normal; letter-spacing: 0.26em; opacity: 0.7; }
.st-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 10px; }
.st-row:first-of-type { margin-top: 0; }
.st-lab { font-size: 14px; color: var(--cd-fg-2); }
.set-note { margin: 8px 0 0; padding-left: 124px; font-size: 12.5px; line-height: 1.65; color: var(--cd-fg-3); }
.set-note:empty { display: none; }

/* 分段選項：和首頁「新的模擬」的難度鈕同一個樣子（細線框、選中反白） */
.seg { display: flex; gap: 8px; }
.seg button { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 8px; display: flex; align-items: center; justify-content: center; font: 500 14px/1 var(--f-ui); color: var(--cd-fg-2); background: rgba(6, 9, 12, 0.4); border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--cd-hair); text-shadow: none; }
.seg button:hover, .seg button:focus-visible { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); outline: none; }
.seg button.on { color: #101418; background: #d7dde1; font-weight: 700; box-shadow: none; }

/* 音量：細線滑桿＋右邊的數值（液晶字） */
.st-vol { grid-template-columns: 112px minmax(0, 1fr) 52px; grid-template-areas: "lab rng out"; }
.st-vol .st-lab { grid-area: lab; } .st-vol input { grid-area: rng; } .st-vol output { grid-area: out; text-align: right; font-size: 16px; }
.st-vol input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
.st-vol input[type=range]:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; }
.st-vol input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #d7dde1 var(--p, 50%), rgba(255, 255, 255, 0.22) var(--p, 50%)); }
.st-vol input[type=range]::-moz-range-track { height: 2px; background: linear-gradient(90deg, #d7dde1 var(--p, 50%), rgba(255, 255, 255, 0.22) var(--p, 50%)); }
.st-vol input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 20px; margin-top: -9px; border: 0; border-radius: 1px; background: #f1f4f5; box-shadow: 0 0 0 1px rgba(6, 9, 12, 0.8), 0 0 10px rgba(255, 255, 255, 0.25); }
.st-vol input[type=range]::-moz-range-thumb { width: 10px; height: 20px; border: 0; border-radius: 1px; background: #f1f4f5; box-shadow: 0 0 0 1px rgba(6, 9, 12, 0.8), 0 0 10px rgba(255, 255, 255, 0.25); }

/* 標籤很長的一列（打開面板時暫停）：標籤在左占滿一行、分段鈕在右；底下的說明也不縮排（手機本來就整列直排） */
@media (min-width: 761px) { .st-row.wide { grid-template-columns: minmax(0, 1fr) 300px; } .st-row.wide + .set-note { padding-left: 0; } }

/* 靜音：一顆開關＋一行字 */
.st-mute { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--cd-fg-2); }
.st-sw { flex: none; position: relative; width: 52px; height: 28px; padding: 0; background: rgba(6, 9, 12, 0.4); border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--cd-hair); }
.st-sw i { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; background: #cfd7dc; transition: transform var(--t-med, 200ms); }
.st-sw[aria-checked="true"] { background: #d7dde1; box-shadow: none; }
.st-sw[aria-checked="true"] i { transform: translateX(24px); background: #101418; }
.st-sw:hover, .st-sw:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); outline: none; }

/* 操作：一行一類，左邊小標、右邊寫法 */
.st-key { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; margin-top: 10px; }
.st-key:first-of-type { margin-top: 0; }
.st-key p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--cd-fg-2); }
.st-key kbd { margin: 0 1px; padding: 1px 5px 2px; font: 500 11px/1 var(--f-num); color: var(--cd-fg); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 2px; }
.st-help { margin: 14px 0 0 124px; }
.st-btn { height: 40px; padding: 0 18px; font: 500 14px/1 var(--f-ui); color: var(--cd-fg); background: rgba(6, 9, 12, 0.4); border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--cd-hair); }
.st-btn:hover, .st-btn:focus-visible { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); outline: none; }
.st-foot { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--cd-hair); font: 400 11.5px/1.6 var(--f-num); letter-spacing: 0.06em; color: var(--cd-fg-3); }

@media (max-width: 760px) {
  #modal.st-screen { padding: calc(26px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .set-box.st h2 { font-size: 26px; }
  .st-row, .st-key { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .set-note { padding-left: 0; }
  .st-help { margin-left: 0; }
  .seg button { height: 44px; font-size: 14.5px; }
  .st-vol { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab out" "rng rng"; gap: 2px 12px; }
  .st-vol input[type=range] { height: 36px; }
  .st-sw { width: 56px; height: 32px; } .st-sw i { width: 24px; height: 24px; } .st-sw[aria-checked="true"] i { transform: translateX(24px); }
  .st-btn { height: 44px; }
}
html.motion-reduce .set-box.st { animation: none; }
/* =========================================================
   歸航 HOMEWARD — 開場插畫序列（ui/opening.ts）：黑底、插畫一格一格淡入、旁白放在圖下面的黑邊
   六格都是指揮官手札的暖色手寫字（.is-nova 的冷光等寬字樣式目前沒有任何一格用到）；最後是 歸航／HOMEWARD 字標。
   ========================================================= */
#opening { position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; overflow: hidden; background: #03050a; color: #dbe7ee; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: opacity 0.6s ease; --op-line: #bfe3f2; animation: op-in 0.8s ease both; }
@keyframes op-in { from { opacity: 0; } }
#opening.leave { opacity: 0; pointer-events: none; }
/* 暗角：畫面邊緣壓一點，插畫像貼在黑底上 */
#opening::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 80% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }

.op-stage { position: relative; width: 100%; display: grid; justify-items: center; gap: clamp(16px, 3.6vh, 38px); padding: 0 clamp(16px, 4vw, 56px); opacity: 1; transition: opacity 0.7s ease; }
.op-stage.out { opacity: 0; transition-duration: 0.5s; }

.op-ill { width: min(100%, 1280px, calc((100vh - 290px) * 2.162)); /* 290＝下面旁白、主標語、圓點、提示要的高度（第 6 格最高） */ aspect-ratio: 1600 / 740; overflow: hidden; background: #070b12; box-shadow: 0 0 80px rgba(0, 0, 0, 0.8); }
.op-ill img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 58%; animation: op-push linear both; }
@keyframes op-push { from { transform: scale(1); } to { transform: scale(1.075); } }
html.motion-reduce #opening .op-ill img { animation: none; } /* 減少動態：不推近 */
@media (prefers-reduced-motion: reduce) { #opening .op-ill img { animation: none; } }
.op-stage.no-ill .op-ill { display: none; }

.op-tx { width: min(100%, 880px); min-height: 118px; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; }
.op-stage.no-ill .op-tx { min-height: 0; }
.op-who { margin: 0; min-height: 13px; font: 400 11px/1 var(--f-mono); letter-spacing: 0.34em; color: #6f98a8; }
.op-who:empty { display: none; }
.op-line { margin: 0; min-height: 3.4em; font: 600 clamp(19px, 2vw, 27px)/1.75 var(--f-hand-tc); letter-spacing: 0.03em; color: #f2e2c0; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
/* 折行：balance＝兩行盡量一樣長、不留一個字在第二行；子句（ui/opening.ts 的 setLog 包成 span）是不拆的一段，所以只會斷在「，」「。」之後（連「呼叫 NOVA」中間的空格也不斷）；
   keep-all／anywhere 是保險：沒包 span 的字不在字與字之間斷，子句比畫面還寬時 inline-block 會縮到畫面寬、再在裡面折，不會爆出畫面 */
.op-line > span { display: inline-block; }
.op-stage.is-nova .op-line { font: 400 clamp(15px, 1.5vw, 20px)/1.85 var(--f-mono); letter-spacing: 0.05em; color: var(--op-line); text-shadow: 0 0 14px rgba(111, 208, 232, 0.5), 0 0 2px rgba(111, 208, 232, 0.6); }
.op-stage.no-ill .op-line { font-size: clamp(22px, 2.6vw, 34px); min-height: 0; }
.op-stage.no-ill.is-nova .op-line { font-size: clamp(16px, 1.8vw, 24px); }
.op-slogan { text-wrap: balance; margin: 10px 0 0; font: 900 clamp(19px, 2.3vw, 31px)/1.5 var(--f-story); letter-spacing: 0.12em; color: #fff7ea; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); opacity: 0; transition: opacity 1.4s ease; }
.op-slogan.on { opacity: 1; }
.op-slogan:empty { display: none; }

/* 收尾字標：歸航／HOMEWARD（和載入畫面同一個字標） */
.op-mark { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 14px; }
.op-mark b { font: 900 clamp(64px, 10vw, 128px)/1 var(--f-story); letter-spacing: 0.14em; color: #f7f0e4; text-shadow: 0 0 60px rgba(255, 174, 77, 0.3); }
.op-mark span { padding-left: 0.5em; font: 400 clamp(12px, 1.4vw, 19px)/1 var(--f-stencil); letter-spacing: 0.5em; color: rgba(247, 240, 228, 0.9); }
.op-stage.is-mark > .op-ill, .op-stage.is-mark > .op-tx { display: none; }
.op-stage.is-mark .op-mark { display: grid; }

.op-skip { position: absolute; right: max(18px, env(safe-area-inset-right, 0px)); top: max(16px, env(safe-area-inset-top, 0px)); z-index: 2; min-height: 44px; padding: 0 16px; font: 500 13px/1 var(--f-ui); letter-spacing: 0.12em; color: rgba(207, 233, 244, 0.85); background: rgba(3, 5, 10, 0.5); border: 0; box-shadow: inset 0 0 0 1px rgba(169, 194, 204, 0.35); cursor: pointer; }
.op-skip:hover, .op-skip:focus-visible { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); outline: none; }
.op-hint { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font: 400 12px/1 var(--f-ui); letter-spacing: 0.12em; color: rgba(169, 194, 204, 0.62); pointer-events: none; }
.op-hint .touch { display: none; }
@media (hover: none) { .op-hint .mouse { display: none; } .op-hint .touch { display: inline; } }
.op-dots { position: absolute; left: 0; right: 0; bottom: max(46px, calc(28px + env(safe-area-inset-bottom, 0px))); display: flex; justify-content: center; gap: 10px; pointer-events: none; }
.op-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(169, 194, 204, 0.28); transition: background 0.4s, transform 0.4s; }
.op-dots i.on { background: #e8f4f8; transform: scale(1.25); }
.op-hint, .op-dots { transition: opacity 0.6s; } #opening.marking .op-hint, #opening.marking .op-dots { opacity: 0; } /* 字標那一格不要留提示與圓點 */

@media (max-width: 760px) {
  .op-ill { width: 100%; }
  .op-stage { padding: 0 14px; }
  .op-tx { min-height: 150px; }
  .op-line { font-size: 19px; line-height: 1.7; }
  .op-stage.is-nova .op-line { font-size: 15px; }
}
@media (max-height: 520px) { /* 手機橫放：圖縮小、字貼緊 */
  .op-ill { width: min(100%, calc((100vh - 120px) * 2.162)); }
  .op-tx { min-height: 74px; }
  .op-line { min-height: 0; font-size: 17px; line-height: 1.5; }
  .op-stage.is-nova .op-line { font-size: 14px; }
  .op-dots { bottom: 30px; } .op-hint { bottom: 10px; }
}
/* =========================================================
   歸航 HOMEWARD — 「讓我去找她」帶回的插畫演出（ui/partner-cine.ts）：版面照開場（styles/opening.css）——
   壓暗的遊戲畫面上，插畫放在黑底中間、旁白在圖下面；不透明度、推近、光點、第 2 張的淡入全由程式每幀照 render/partner-plan.ts 的 ptShow 設，
   這裡只管版面與外觀。減少動態時程式不推近、不閃（calm），CSS 不用另外處理。
   ========================================================= */
#ptcine { position: fixed; inset: 0; z-index: 62; /* 壓過事件視窗（#modal.overlay 的 55）與名單手札（#ln-card 的 60） */ display: grid; place-items: center; overflow: hidden; background: rgba(3, 5, 10, 0.94); color: #dbe7ee; cursor: default; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* 暗角：畫面邊緣壓一點，插畫像貼在黑底上 */
#ptcine::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 80% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }

.ptc-stage { position: relative; width: 100%; display: grid; justify-items: center; gap: clamp(16px, 3.6vh, 38px); padding: 0 clamp(16px, 4vw, 56px); }
.ptc-ill { position: relative; width: min(100%, 1280px, calc((100vh - 220px) * 2.162)); /* 220＝下面那一句字（兩行）與提示要的高度 */ aspect-ratio: 1600 / 740; overflow: hidden; background: #070b12; box-shadow: 0 0 80px rgba(0, 0, 0, 0.8); }
.ptc-z { position: absolute; inset: 0; will-change: transform, opacity; transform-origin: 50% 58%; }
.ptc-z2 { opacity: 0; } /* 疊在第 1 張上面，慢慢淡入 */
.ptc-z img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 補丁：蓋掉畫上那點頭燈的透明 PNG（邊緣淡出；位置與大小是 PT_PATCH，由程式寫在 style 上；不透明度每幀由程式設，平常 0）。疊在第 1 張上、光點的下面 */
.ptc-z img.ptc-patch { position: absolute; object-fit: fill; opacity: 0; pointer-events: none; }
/* 頭燈光點：風雪裡一個小小的暖光（位置與大小是 PT_SPOT；亮度、縮放每幀由程式設）。一般混色、中心近白、往外轉成琥珀色再透明：疊加混色（screen）在亮灰的天上會變成一顆乳白的圓，看不出是暖光 */
.ptc-spot { position: absolute; aspect-ratio: 1; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255, 246, 228, 1) 0, rgba(255, 222, 160, 0.9) 18%, rgba(255, 192, 112, 0.5) 38%, rgba(255, 172, 92, 0.16) 64%, rgba(255, 160, 80, 0) 100%); }

.ptc-line { margin: 0; min-height: 3.6em; width: min(100%, 880px); text-align: center; font: 600 clamp(19px, 2vw, 27px)/1.75 var(--f-hand-tc); letter-spacing: 0.03em; color: #f2e2c0; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); text-wrap: balance; opacity: 0; } /* balance：折行時兩行一樣長，不要留一個字在第二行 */
.ptc-hint { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font: 400 12px/1 var(--f-ui); letter-spacing: 0.12em; color: rgba(169, 194, 204, 0.62); pointer-events: none; }

@media (max-width: 760px) {
  .ptc-ill { width: 100%; }
  .ptc-stage { padding: 0 14px; }
  .ptc-line { min-height: 5.2em; font-size: 19px; line-height: 1.7; }
}
@media (max-height: 520px) { /* 手機橫放：圖縮小、字貼緊 */
  .ptc-ill { width: min(100%, calc((100vh - 110px) * 2.162)); }
  .ptc-line { min-height: 0; font-size: 17px; line-height: 1.5; }
  .ptc-hint { bottom: 10px; }
}
/* =========================================================
   歸航 HOMEWARD — 決策圖板的共用樣式（board.ts、emblems.ts、toolbar.ts 的圓鈕；設計 docs/design/panels-ux.md §2、§7）
   圖板不是一塊平面深色面板，是營地裡的東西：霜玻璃（看得到後面模糊的營地）＋蝕刻金屬框＋冷光；冷的時候邊緣結霜（--cold）；殘破檔多刮痕與鏽。
   移植自 design/ui-mock/panels-kit.css、panels-b2.css。各桌子自己的版面在 council.css（協議板）等檔。
   滑過一律不准用 transform 位移（test/hover-shift.mjs 量 getBoundingClientRect）：只用光暈、陰影、透明度。
   ========================================================= */
:root {
  /* 徽記的三種墨色（照 src/render/palette.json 調低飽和）：中性＝系統、冰藍＝NOVA、琥珀＝人 */
  --em-sys: #c6d0c9; --em-nova: #86c6e6; --em-human: #e3aa6a; --em-key: #f1f4f6; --em-deep: #3a3f47; --em-ink: #0c1013;
  --good: #cfe3d6; --loss: #ff9a90;
  --b2-ink: #e8eef0; --b2-dim: rgba(214, 224, 228, 0.66); --b2-faint: rgba(214, 224, 228, 0.48);
  /* 標題列的小字（英文標籤、篩選列的標題）與篩選籤的字：原本用 --b2-faint／--b2-dim，在霜玻璃上量到 3.1–4.4（2026-10-10 日誌線量的），加亮到 ≥ 4.5 */
  --b2-label: rgba(214, 224, 228, 0.8); --b2-chip: rgba(226, 234, 238, 0.9); --b2-cyan: #8fd7ff; --b2-amber: #e3aa6a; --b2-red: #ff6a5c;
  /* 圖板的上緣：讓開頂部的時間、資源與希望／不安（希望／不安在第二行正中央，簽完要看得到它跳） */
  --b2-top: 84px;
}
@media (max-width: 1000px) { :root { --b2-top: 124px; } }

/* ---------- 徽記 ---------- */
.emb { --ec: var(--em-sys); width: 24px; height: 24px; overflow: visible; flex: none; display: block; }
.emb.c-nova { --ec: var(--em-nova); } .emb.c-human { --ec: var(--em-human); } .emb.key { --ec: var(--em-key); }
.emb .fr { fill: none; stroke: var(--ec); stroke-width: 1.6; stroke-linejoin: round; transition: fill 300ms, stroke 300ms; }
.emb .fr2 { fill: none; stroke: var(--ec); stroke-width: 0.9; opacity: 0.55; }
.emb .sy { color: var(--ec); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: color 300ms; }
.emb.md { width: 32px; height: 32px; }
.emb.lg { width: 56px; height: 56px; --lg: 1; }
.emb.xl { width: 72px; height: 72px; --lg: 1; }
.emb.lg .fr, .emb.lg .sy, .emb.xl .fr, .emb.xl .sy { stroke-width: 1.15; }
.emb .rg0, .emb .rg1 { fill: none; stroke-width: 1.3; stroke-linecap: butt; transform: rotate(-90deg); transform-origin: 12px 12px; }
.emb .rg0 { stroke: rgba(255, 255, 255, 0.16); }
.emb .rg1 { stroke: var(--ec); transition: stroke-dasharray 600ms; }
.emb.lg .rg0, .emb.lg .rg1, .emb.xl .rg0, .emb.xl .rg1 { stroke-width: 0.8; }
.emb .slash { stroke: rgba(220, 228, 233, 0.75); stroke-width: 1.4; stroke-linecap: round; }
.emb .flag { fill: var(--ec); stroke: none; }
.emb .sug { fill: var(--em-human); stroke: #0c1013; stroke-width: 1; }
.emb .sug.bad { fill: var(--cd-red); }
/* 狀態：可做＝亮線＋微光；做了＝蓋章（填滿、符號反白）；鎖住＝虛線；冷卻／進行中＝描邊＋刻度環；關上＝斜線 */
.emb.s-open { filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.2)); }
.emb.c-nova.s-open { filter: drop-shadow(0 0 3px rgba(134, 198, 230, 0.45)); }
.emb.c-human.s-open { filter: drop-shadow(0 0 3px rgba(227, 170, 106, 0.45)); }
.emb.s-done .fr { fill: var(--ec); }
.emb.s-done .fr2 { stroke: var(--ec); opacity: 0.9; }
.emb.s-done .sy { color: var(--em-ink); }
.emb.s-done.deep .fr { fill: var(--em-deep); stroke: #5b626c; }
.emb.s-done.deep .sy { color: #a3abb4; }
.emb.s-lock .fr { stroke-dasharray: 1.7 2.1; opacity: 0.7; }
.emb.s-lock .sy { opacity: 0.4; }
.emb.s-cd .fr, .emb.s-cd .sy { opacity: 0.75; }
.emb.s-run .sy { opacity: 0.9; }
.emb.s-shut { opacity: 0.42; }
.emb.s-hid .fr { stroke-dasharray: 1.2 2; opacity: 0.6; }
.emb.deep.s-open { filter: none; }
/* 狀態切換的動畫：蓋章＝放大後落下（彈性）；其他＝由模糊變清楚 */
.emb.to-done { animation: emb-stamp 700ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.emb.to-other { animation: emb-reveal 600ms ease-out both; }
@keyframes emb-stamp { 0% { transform: scale(1.5) rotate(-6deg); filter: drop-shadow(0 0 14px rgba(255, 120, 100, 0.9)); } 100% { transform: none; } }
@keyframes emb-reveal { 0% { filter: blur(3px) brightness(1.6); opacity: 0.4; } 100% { filter: none; opacity: 1; } }

/* ---------- 圖板模式：#drawer 撐滿畫面（頂部時間、資源、希望／不安照常看得到），其他 HUD 讓位 ---------- */
#app #drawer[data-board] { left: 26px; right: 26px; top: var(--b2-top); bottom: 22px; width: auto; max-height: none; display: block; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; animation: none; overflow: visible; color: var(--b2-ink); opacity: 1; }
#app #drawer[data-board]::after { display: none; }
#app #drawer[data-board] .dh { display: none; }
#app #drawer[data-board] .db { position: absolute; inset: 0; padding: 0; overflow: visible; font-size: 13px; }
#app.board-open #goal, #app.board-open #warn, #app.board-open #drop, #app.board-open #dock, #app.board-open #placing, #app.board-open #buildbar { opacity: 0 !important; pointer-events: none; }

/* ---------- 外殼：霜玻璃、金屬框、邊緣的霜、銘牌、標題列 ---------- */
.b2 { position: absolute; inset: 0; color: var(--b2-ink); animation: b2-in 520ms var(--ease-out) backwards; }
.b2-glass { position: absolute; inset: 0; border-radius: 6px; backdrop-filter: blur(7px) saturate(0.7) brightness(0.78); -webkit-backdrop-filter: blur(7px) saturate(0.7) brightness(0.78);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.07), transparent 34%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='240' height='240' filterUnits='userSpaceOnUse'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.8  0 0 0 0 0.88  0 0 0 0 0.92  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 240px 240px,
    linear-gradient(180deg, rgba(12, 18, 24, 0.62), rgba(7, 10, 14, 0.78)); }
.b2-frame { position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 6px #22282b, inset 0 0 0 7px rgba(0, 0, 0, 0.7), inset 0 0 0 8px rgba(255, 255, 255, 0.06), 0 30px 70px rgba(0, 0, 0, 0.55); }
.b2-frame::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 24px) top / 100% 5px no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 24px) bottom / 100% 5px no-repeat; }
.b2-frame i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9aa3a6, #3c4346 60%, #15191b); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); }
.b2-frame i:nth-child(1) { left: 3px; top: 3px; } .b2-frame i:nth-child(2) { right: 3px; top: 3px; } .b2-frame i:nth-child(3) { left: 3px; bottom: 3px; } .b2-frame i:nth-child(4) { right: 3px; bottom: 3px; }
.b2-plate { position: absolute; z-index: 4; left: 50%; top: -11px; transform: translateX(-50%); padding: 4px 16px 3px; font: 400 10px/1 var(--f-stencil); letter-spacing: 0.3em; color: #9aa4a7; background: linear-gradient(180deg, #30373a, #1b2022); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px #0d1011, 0 4px 10px rgba(0, 0, 0, 0.5); white-space: nowrap; pointer-events: none; }
/* 邊緣的霜：越冷越多（--cold 0–1，hud.ts 依氣溫設在 #app） */
.b2-frost { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; opacity: calc(0.3 + 0.55 * var(--cold, 0.4));
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='c' x='0' y='0' width='300' height='300' filterUnits='userSpaceOnUse'><feTurbulence type='turbulence' baseFrequency='0.02 0.06' numOctaves='4' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.86  0 0 0 0 0.93  0 0 0 0 1  0 0 0 1.5 -0.32'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>") 0 0 / 300px 300px;
  -webkit-mask: radial-gradient(140px 120px at 0 0, #000 10%, transparent 100%), radial-gradient(160px 120px at 100% 0, #000 10%, transparent 100%), radial-gradient(180px 140px at 0 100%, #000 10%, transparent 100%), radial-gradient(150px 150px at 100% 100%, #000 10%, transparent 100%), linear-gradient(90deg, #000, transparent 18px, transparent calc(100% - 18px), #000), linear-gradient(180deg, #000, transparent 14px, transparent calc(100% - 14px), #000);
  mask: radial-gradient(140px 120px at 0 0, #000 10%, transparent 100%), radial-gradient(160px 120px at 100% 0, #000 10%, transparent 100%), radial-gradient(180px 140px at 0 100%, #000 10%, transparent 100%), radial-gradient(150px 150px at 100% 100%, #000 10%, transparent 100%), linear-gradient(90deg, #000, transparent 18px, transparent calc(100% - 18px), #000), linear-gradient(180deg, #000, transparent 14px, transparent calc(100% - 14px), #000); }
html.q-low .b2-glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, #0c1116, #070a0d); } /* 低畫質：不透明的深色底（backdrop-filter 在低階機器會掉幀） */
html.q-low .b2-frost { display: none; }
.b2-head { position: absolute; z-index: 3; left: 30px; right: 26px; top: 18px; height: 46px; display: flex; align-items: center; gap: 16px; }
.b2-head .ttl { display: flex; flex-direction: column; gap: 4px; flex: none; }
.b2-head .ttl b { font: 700 22px/1 var(--f-ui); letter-spacing: 0.06em; color: #f2f6f7; text-shadow: 0 0 18px rgba(143, 215, 255, 0.15); white-space: nowrap; }
.b2-head .ttl span { font: 500 10.5px/1 var(--f-num); letter-spacing: 0.16em; color: var(--b2-label); white-space: nowrap; }
.b2-head .sub { font-size: 12.5px; color: var(--b2-dim); white-space: nowrap; }
.b2-head .grow { flex: 1; }
.b2-head .x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--b2-dim); background: none; border-radius: 3px; }
.b2-head .x .ic { width: 16px; height: 16px; }
.b2-head .x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.b2-body { position: absolute; left: 0; right: 0; top: 72px; bottom: 0; }
@media (max-width: 1240px) { .b2-head .sub { display: none; } }
@media (min-width: 761px) and (max-width: 900px) and (min-height: 521px) { /* 平板直放：標題列放不下麻煩篩選，篩選換到第二行 */
  .b2-head { flex-wrap: wrap; height: auto; gap: 8px 14px; }
  .b2-head .tbl { order: 5; width: 100%; }
  .b2-body { top: 112px; }
}

/* 開關：打開＝鏡頭推近、節點依序進場；第一次＝從遠處推進、由模糊變清楚；收起＝往後退、淡出 */
@keyframes b2-in { from { opacity: 0; transform: translateY(14px) scale(0.975); filter: blur(2px); } }
@keyframes b2-push { 0% { transform: scale(0.72) translateY(80px); filter: blur(8px) brightness(0.4); opacity: 0; } 35% { opacity: 1; } 100% { transform: none; filter: none; } }
@keyframes b2-out { to { opacity: 0; transform: translateY(10px) scale(0.97); filter: blur(2px); } }
@keyframes b2-node { from { opacity: 0; transform: translateY(8px) scale(0.92); filter: blur(2px); } }
.b2.push { animation: b2-push 1300ms cubic-bezier(0.2, 0.7, 0.1, 1) backwards; }
#drawer.closing .b2 { animation: b2-out 200ms ease-in forwards; pointer-events: none; }
.b2 .nin { animation: b2-node 420ms var(--ease-out) backwards; animation-delay: calc(140ms + var(--i, 0) * 16ms); }
.b2.push .nin { animation-delay: calc(700ms + var(--i, 0) * 16ms); }
.pulse { animation: node-pulse 520ms ease-in-out 2 !important; }
@keyframes node-pulse { 50% { filter: drop-shadow(0 0 16px rgba(255, 220, 170, 0.95)) brightness(1.35); } }

/* ---------- 麻煩篩選：缺糧、生病、不安、冷 ---------- */
.tbl { display: flex; gap: 6px; align-items: center; min-width: 0; }
.tbl .tlb { font: 500 10.5px/1 var(--f-num); letter-spacing: 0.14em; color: var(--b2-label); margin-right: 2px; white-space: nowrap; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; font: 500 12.5px/1 var(--f-ui); color: var(--b2-chip); white-space: nowrap; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); cursor: pointer; transition: background 160ms, color 160ms, box-shadow 160ms; }
.chip .ic { width: 14px; height: 14px; }
.chip .n { font: 500 12px/1 var(--f-num); color: inherit; text-shadow: none; }
.chip.bad { color: #ffc1b9; box-shadow: inset 0 0 0 1px rgba(224, 87, 76, 0.55); }
.chip.bad::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--cd-red); box-shadow: 0 0 8px var(--cd-red); }
.chip:hover { background: rgba(255, 255, 255, 0.08); color: var(--b2-ink); }
.chip.on { color: #101418; background: #e8eef0; box-shadow: 0 0 18px rgba(255, 255, 255, 0.25); }
.chip.on.bad { background: #ffb4aa; }
.chip.on .ic { color: #101418; }
/* 篩選時：不相關的變暗，能解的發亮（.filtering 掛在放節點的容器上） */
.filtering [data-id]:not(.fit), .filtering .pl:not(.fit).shut { opacity: 0.18; filter: grayscale(0.6); }
.filtering [data-id].fit { filter: drop-shadow(0 0 10px rgba(255, 230, 190, 0.35)); }
.fitnote { position: absolute; z-index: 6; font: 500 11.5px/1.3 var(--f-ui); color: #ffe2bd; background: rgba(40, 24, 10, 0.9); padding: 4px 8px; box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.6); white-space: nowrap; pointer-events: none; transform: translateX(-50%); }

/* ---------- 第一次：聚光＋小卡 ---------- */
.spot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; background: radial-gradient(circle var(--sr, 120px) at var(--sx, 50%) var(--sy, 50%), transparent 62%, rgba(2, 4, 6, 0.5) 100%); /* 暗幕 0.8→0.5（使用者：引導不要太明確、被壓暗的牌也要讀得到）：被聚光的那塊靠琥珀框、光暈與旁邊的小卡仍是焦點 */ animation: spot-in 700ms ease-out both; }
@keyframes spot-in { from { opacity: 0; } }
.spotcap { position: absolute; z-index: 7; width: 280px; padding: 10px 12px; font: 500 13px/1.6 var(--f-ui); color: #fff; background: rgba(4, 7, 10, 0.9); box-shadow: inset 2px 0 0 #ffd9a6, 0 8px 20px rgba(0, 0, 0, 0.5); animation: spot-in 600ms ease-out 400ms both; pointer-events: none; }
.spotcap b { color: #ffd9a6; }
.spotcap i { display: block; margin-top: 4px; font: 400 11.5px/1.5 var(--f-ui); color: var(--b2-dim); font-style: normal; }

/* ---------- 營地的回應：字幕（NOVA 冷色／人是暖色紙字）與頂部希望／不安的跳數 ---------- */
.camp-say { position: absolute; z-index: 9; left: 30%; bottom: 26px; transform: translateX(-50%); width: max-content; max-width: min(620px, 56%); text-align: center; font: 400 14.5px/1.7 var(--f-num); color: var(--cd-radio); text-shadow: 0 1px 4px #000, 0 0 12px rgba(0, 0, 0, 0.8); pointer-events: none; opacity: 0; transition: opacity 600ms; }
.camp-say .who { display: block; margin-bottom: 6px; font: 500 10.5px/1 var(--f-num); letter-spacing: 0.2em; color: rgba(169, 194, 204, 0.7); }
.camp-say.warm { color: #f3d2a2; font-family: var(--f-story); font-weight: 700; }
.camp-say.show { opacity: 1; animation: say-in 400ms ease-out both; transition: none; }
@keyframes say-in { from { opacity: 0; translate: 0 8px; } }
.mbump { position: absolute; top: -16px; right: -6px; font: 700 13px/1 var(--f-num); font-style: normal; pointer-events: none; animation: mbump 2.6s ease-out forwards; }
.mbump.good { color: #9fe0b0; } .mbump.bad { color: #ff9a90; }
@keyframes mbump { 0% { opacity: 0; translate: 0 6px; } 12% { opacity: 1; translate: 0 0; } 75% { opacity: 1; } 100% { opacity: 0; translate: 0 -8px; } }
.mb { position: relative; } /* 跳數字（.mbump）以這一條為準 */
.mb.bumped .bar { box-shadow: 0 0 10px rgba(255, 255, 255, 0.55); transition: box-shadow 300ms; }

/* ---------- 右下：三顆決策圓鈕（研究、協議、探勘），取代快捷鍵銘牌裡的 R／P／E ---------- */
.dk { position: absolute; z-index: 6; right: 26px; bottom: 60px; display: flex; gap: 8px; opacity: var(--ui-dim); transition: opacity 400ms; }
.dk .k { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 66px; padding: 0; color: var(--cd-fg); background: none; border: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); cursor: pointer; }
.dk .o { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(6, 9, 12, 0.55); box-shadow: inset 0 0 0 1px var(--cd-hair); transition: box-shadow 200ms, background 200ms; }
.dk .o > .ic { width: 19px; height: 19px; color: var(--cd-fg); }
.dk .o > svg.ring { position: absolute; left: -4px; top: -4px; width: 52px; height: 52px; overflow: visible; pointer-events: none; }
.dk .ring circle { fill: none; stroke-width: 2.2; transform: rotate(-90deg); transform-origin: 26px 26px; }
.dk .ring .r0 { stroke: rgba(255, 255, 255, 0.14); }
.dk .ring .r1 { stroke: #e6ecef; transition: stroke-dasharray 600ms var(--ease-out); }
.dk .k[hidden] { display: none; } /* 一波波發現（G16）：第一局研究、探勘的圓鈕在長夜之前藏起來 */
.dk .k.c-human .ring .r1 { stroke: var(--em-human); } .dk .k.c-nova .ring .r1 { stroke: var(--em-nova); }
.dk .tx { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dk .t { font: 500 11.5px/1 var(--f-ui); white-space: nowrap; }
.dk .s { min-height: 10px; font: 400 10px/1 var(--f-num); color: var(--cd-fg); white-space: nowrap; } /* 次要色（--cd-fg-2）在夜裡組合圖層的亮框上只有 4.31:1（10px 要 4.5） */
.dk .pip { position: absolute; right: 4px; top: -6px; pointer-events: none; }
.dk .pip .emb { width: 20px; height: 20px; }
.dk .k:hover .o { background: rgba(6, 9, 12, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.dk .k.on .o { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
.dk .k.lit .o { box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.6), 0 0 12px rgba(227, 170, 106, 0.22); }
.dk .k.lit .s { color: #f0cf9f; }
.dk .k.hot .o { box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.85), 0 0 18px rgba(227, 170, 106, 0.45); animation: dk-pulse 1.8s ease-in-out infinite; }
.dk .k.hot .s { color: #f0cf9f; }
@keyframes dk-pulse { 50% { box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 1), 0 0 26px rgba(227, 170, 106, 0.7); } }
/* 讓位：面板開著（右側面板或圖板）、放置中、建造列開著、事件黑邊、首頁與結局 */
#app.panel-open .dk, .dk.yield { opacity: 0; pointer-events: none; }
#app.cine .dk { opacity: 0 !important; pointer-events: none; }
#app.title-mode .dk, #app.end-mode .dk { display: none !important; }
/* NOVA 字幕：讓出圓鈕的位置（寬螢幕：右邊一排；平板：右邊一欄），站在左下建造鍵那一列的上面；放置中讓位（會疊到放置列） */
#app.placing #nova { opacity: 0 !important; pointer-events: none; }
@media (min-width: 761px) { [data-ui="clean"] .radio { bottom: 62px; } }
@media (min-width: 1100px) { [data-ui="clean"] .radio { width: min(860px, calc(100% - 500px)); } }
@media (min-width: 761px) and (max-width: 1099px) {
  .dk { flex-direction: column; gap: 6px; right: 14px; bottom: 58px; }
  [data-ui="clean"] .radio { width: min(860px, calc(100% - 200px)); }
}
@media (max-height: 520px) and (min-width: 761px) { /* 手機橫放：一欄放不下，改回橫排；字幕讓出右邊 */
  .dk { flex-direction: row; }
  [data-ui="clean"] .radio { width: min(860px, calc(100% - 480px)); }
}

/* ---------- 手機（≤ 760）：底列上方一整列三格，一層直達；圖板蓋滿時間列以下 ---------- */
@media (max-width: 760px) {
  #app .dk { left: 14px; right: 14px; bottom: calc(var(--mbar) + 2px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #app .dk .k { flex-direction: row; justify-content: flex-start; gap: 6px; width: auto; height: 48px; padding: 0 6px; background: rgba(6, 8, 12, 0.5); box-shadow: inset 0 0 0 1px var(--cd-hair); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  #app .dk .o { width: 32px; height: 32px; flex: none; background: none; box-shadow: none; }
  #app .dk .o > svg.ring { left: -3px; top: -3px; width: 38px; height: 38px; }
  #app .dk .o > .ic { width: 16px; height: 16px; }
  #app .dk .tx { align-items: flex-start; min-width: 0; }
  #app .dk .t { font-size: 13px; }
  #app .dk .s { font-size: 10.5px; }
  #app .dk .pip { left: 26px; right: auto; top: 2px; }
  #app .dk .k.hot, #app .dk .k.lit { box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.85), 0 0 14px rgba(227, 170, 106, 0.35); }
  #app .dk .k.hot .o, #app .dk .k.lit .o { box-shadow: none; animation: none; }
  #app .dk .k.hot { animation: dk-pulse 1.8s ease-in-out infinite; }
  #app .dk .k.on { background: rgba(230, 236, 239, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
  
  #app .radio { bottom: calc(var(--mbar) + 58px); }
  #app #drawer[data-board] { left: 0; right: 0; top: 44px; bottom: var(--mbar); height: auto; z-index: 25; }
  #app.board-open .u-res, #app.board-open .u-mood, #app.board-open #warn { opacity: 0 !important; pointer-events: none; }
  .b2-glass, .b2-frame, .b2-frost { border-radius: 0; }
  .b2-plate { display: none; }
  /* 標頭與板身排成一欄：標頭有幾行，板身就從它下面開始（以前板身的 top 寫死 112px，籤列只好橫捲——「冷 19 人沒床」「人 31」被切在畫面外）。
     篩選籤改成格線、放不下就折行（麻煩 2 欄、日誌 3 欄、冰暴預報 1 欄），每一顆都完整看得到；籤自己放不下也折字，不橫捲、不省略 */
  .b2 { display: flex; flex-direction: column; }
  .b2-head { position: relative; left: auto; right: auto; top: auto; flex: none; margin: 12px 10px 0 14px; height: auto; flex-wrap: wrap; gap: 8px 12px; }
  .b2-head .ttl b { font-size: 19px; }
  .b2-head .ttl span { display: none; }
  .b2-head .tbl { order: 5; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 4px 4px 0 0; }
  .b2-head .tbl.lgf-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b2-head .tbl.sc-fc { grid-template-columns: minmax(0, 1fr); }
  .b2-head .tbl .tlb { display: none; }
  .b2-head .chip { min-height: 36px; height: auto; padding: 5px 9px; gap: 5px; white-space: normal; line-height: 1.25; }
  .b2-head .tbl .chip { min-width: 0; }
  .b2-head .tbl .chip .n { margin-left: auto; padding-left: 4px; }
  .b2-body { position: relative; left: auto; right: auto; top: auto; bottom: auto; flex: 1 1 0; min-height: 0; margin-top: 10px; }
  .camp-say { left: 50%; top: auto; bottom: calc(58% + 10px); max-width: calc(100% - 28px); font-size: 13px; padding: 8px 10px; background: rgba(4, 7, 10, 0.9); } /* 公告從下面升起來：字幕站在公告上緣 */
}
@media (max-height: 520px) and (min-width: 761px) { /* 手機橫放：圖板蓋到時間列下面，資源與希望／不安先讓位 */
  #app #drawer[data-board] { top: 52px; bottom: 10px; left: 10px; right: 10px; }
  #app.board-open .u-res, #app.board-open .u-mood, #app.board-open #warn { opacity: 0 !important; pointer-events: none; }
  .b2-head { top: 10px; height: 40px; } .b2-head .ttl span, .b2-head .tbl .tlb { display: none; }
  .b2-body { top: 56px; }
  .b2-plate { display: none; }
}

/* 減少動態效果（遊戲設定，html.motion-reduce）：圖板的推近、節點進場、脈動、波紋全部直接到位（作業系統的設定在 tokens.css） */
html.motion-reduce .b2, html.motion-reduce .b2 *, html.motion-reduce .b2 *::before, html.motion-reduce .b2 *::after, html.motion-reduce .dk * { animation: none !important; transition: none !important; }
html.motion-reduce .spot, html.motion-reduce .spotcap, html.motion-reduce .camp-say { animation: none !important; }
/* =========================================================
   歸航 HOMEWARD — 協議：營地協議板（ui/panels/protocols.ts；樣稿 design/ui-mock/protocols-b2.html、panels-b2.css）
   牆上的銘牌、岔路、兩條有能量流動的路、別在右邊的公告（人＝紙）、按住 1.2 秒的印章。外殼與共用零件在 boards.css。
   兩種版面：.cfield.wide＝全景（場地 980×708，照 --k 縮放）；.cfield.list＝一個主題一列往下捲；公告 data-sheet＝side 右欄／bottom 從下面升起。
   ========================================================= */

/* ---------- 標題列：冷卻刻度 ---------- */
.b2-proto .coolbox { display: flex; align-items: center; gap: 10px; flex: none; }
.cool-dial { position: relative; width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.cool-dial svg { position: absolute; inset: 0; width: 44px; height: 44px; overflow: visible; }
.cool-dial svg circle { fill: none; stroke-width: 3; transform: rotate(-90deg); transform-origin: 25px 25px; }
.cool-dial .r0 { stroke: rgba(255, 255, 255, 0.14); }
.cool-dial .r1 { stroke: #e8eef0; transition: stroke-dasharray 900ms var(--ease-out); }
.cool-dial.ready .r1 { stroke: var(--b2-amber); filter: drop-shadow(0 0 5px rgba(227, 170, 106, 0.8)); }
.cool-dial b { font: 700 13px/1 var(--f-num); color: var(--b2-ink); }
.cool-dial.ready b { color: #ffd9a6; }
.cool-cap { display: flex; flex-direction: column; gap: 4px; font: 500 11.5px/1.2 var(--f-ui); color: var(--b2-dim); white-space: nowrap; }
.cool-cap b { font: 700 13px/1 var(--f-ui); color: var(--b2-ink); }

/* ---------- 場地 ---------- */
.cfield { position: absolute; }
.cfield.wide { top: 0; left: 14px; width: 980px; height: 708px; transform-origin: 0 0; }
.cfield .cwall { position: absolute; inset: 0 -14px; background: repeating-linear-gradient(0deg, transparent 0 46px, rgba(255, 255, 255, 0.025) 46px 47px); pointer-events: none; }
.rlab { position: absolute; font: 500 12px/1 var(--f-ui); letter-spacing: 0.3em; color: var(--b2-label); writing-mode: vertical-rl; transform: translateY(-50%); padding: 6px 3px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.18); pointer-events: none; }
/* 一塊銘牌：螺絲、金屬漸層；滑過＝亮邊（不位移） */
.pl { position: absolute; width: 98px; margin-left: -49px; padding: 9px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; color: var(--b2-ink); background: none; border: 0; border-radius: 3px; cursor: pointer; transition: opacity 260ms, filter 260ms; font: inherit; }
.pl::before { content: ""; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(180deg, rgba(48, 56, 60, 0.6), rgba(18, 22, 24, 0.6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.35); transition: box-shadow 200ms, background 200ms, opacity 260ms; }
.pl::after { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 3px; background: radial-gradient(circle at 2px 1.5px, #8b9396 1.2px, transparent 1.6px) 0 0 / calc(100% - 4px) 3px no-repeat, radial-gradient(circle at calc(100% - 2px) 1.5px, #8b9396 1.2px, transparent 1.6px) 0 0 / 100% 3px no-repeat; }
.pl > * { position: relative; }
.pl .emb { width: 40px; height: 40px; --lg: 1; transition: opacity 260ms; }
.pl .emb .fr, .pl .emb .sy { stroke-width: 1.35; }
.pl .nm { font: 500 12.5px/1.25 var(--f-ui); color: var(--b2-ink); }
.pl .st { min-height: 12px; font: 400 10.5px/1.2 var(--f-num); color: var(--b2-dim); }
.pl.open .st { color: #d6e6dc; }
.pl:hover::before, .pl:focus-visible::before { background: linear-gradient(180deg, rgba(60, 70, 75, 0.7), rgba(24, 29, 32, 0.7)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 24px rgba(255, 255, 255, 0.12), 0 8px 18px rgba(0, 0, 0, 0.4); }
.pl:focus-visible { outline: none; }
.pl.on::before { box-shadow: inset 0 0 0 2px #f1f4f6, 0 0 26px rgba(255, 255, 255, 0.2), 0 8px 18px rgba(0, 0, 0, 0.4); }
.pl.lock .nm, .pl.shut .nm, .pl.fog .nm { color: var(--b2-faint); }
.pl.fog .nm { letter-spacing: 0.2em; }
.pl.shut { opacity: 0.66; }
.pl.done .st { color: #ffb4aa; }
.pl .stampmark { position: absolute; right: 5px; top: 8px; font: 900 10px/1 var(--f-story); letter-spacing: 0.08em; color: rgba(214, 64, 52, 0.95); border: 1.5px solid rgba(214, 64, 52, 0.85); padding: 2px 3px; transform: rotate(-12deg); }
.pl.rel::before { box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.8), 0 0 20px rgba(227, 170, 106, 0.3); }
.pl.dim { opacity: 0.22; }
.pl.newdone .emb { animation: emb-stamp 700ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.pl.newcd { animation: cd-wave 520ms ease-out both; animation-delay: var(--dly, 0ms); }
@keyframes cd-wave { 0% { filter: brightness(1.9); } 100% { filter: none; } }
/* 第一次：只亮第一個該做的選擇——沒亮的牌只讓圖（徽記）與底板退下去，名字與狀態是接近平常亮度的實色（以前整塊退到 0.14，字量到 1.1:1，等於看不見；
   研究、探勘的聚光已經是同一個做法）。聚光的暗幕（boards.css 的 .spot，0.5 黑）還會再壓一次，所以字不能再退一級：暗幕開著實拍量到名字 ≥ 3.9:1。
   「還沒解開」的牌靠虛線徽記與「？？？」的字樣讀出，不靠看不見（test/contrast.mjs 的 protocols-first 狀態、fog-protocol 規則） */
.cfield.guided .pl:not(.lit) .emb { opacity: 0.14; }
.cfield.guided .pl:not(.lit)::before, .cfield.guided .pl:not(.lit)::after { opacity: 0.5; }
.cfield.guided .pl:not(.lit) .nm { color: #eef3f5; }
.cfield.guided .pl:not(.lit) .st { color: #d8e2e6; }
.cfield.guided .pl.lit::before { box-shadow: inset 0 0 0 2px #ffd9a6, 0 0 30px rgba(255, 210, 160, 0.35); }

/* 「新」旗做成書籤：從牌子上緣往下垂、不凸出牌子（原本 top: -11px 凸出去，第一排的牌子被牆的上緣裁掉一半；使用者 10-11 截圖） */
/* ---------- 第 73 題：新掛上牆的牌子（落下、回彈、琥珀的漣漪、「新」旗）、牆上最後一塊空牌「還有 N 條」 ---------- */
.pl .newtag { position: absolute; z-index: 3; right: 10px; top: 0; padding: 7px 7px 10px; font: 800 14px/1 var(--f-ui); letter-spacing: 0.1em; color: #2b1805; background: linear-gradient(180deg, #ffe2b8, #e3aa6a); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); transform-origin: 70% 0; pointer-events: none; animation: tag-pop 560ms cubic-bezier(0.2, 1.6, 0.4, 1) backwards; animation-delay: calc(var(--dly, 0ms) + 520ms); }
@keyframes tag-pop { 0% { opacity: 0; scale: 0.2; rotate: 24deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
.pl.isnew::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1.5px rgba(255, 217, 166, 0.75), 0 0 18px rgba(227, 170, 106, 0.35), 0 6px 14px rgba(0, 0, 0, 0.35); animation: new-pulse 2.4s ease-in-out infinite; }
.pl.isnew .nm { color: #ffe9cc; }
@keyframes new-pulse { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1.5px rgba(255, 217, 166, 1), 0 0 30px rgba(227, 170, 106, 0.6), 0 6px 14px rgba(0, 0, 0, 0.35); } }
.pl.drop { transform-origin: 50% 0; animation: plate-drop 820ms cubic-bezier(0.25, 0.9, 0.3, 1) backwards; animation-delay: var(--dly, 0ms); }
@keyframes plate-drop { 0% { opacity: 0; translate: 0 -46px; rotate: -5deg; } 46% { opacity: 1; translate: 0 5px; rotate: 1.6deg; } 66% { translate: 0 -3px; rotate: -0.7deg; } 84% { translate: 0 1px; rotate: 0.2deg; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; } }
/* 牌子撞上牆的那一下：一圈琥珀色的漣漪（外圈擴散），之後換成「新」的呼吸 */
.pl.drop::before { animation: plate-ripple 1100ms ease-out backwards, new-pulse 2.4s ease-in-out 1500ms infinite; animation-delay: calc(var(--dly, 0ms) + 420ms), calc(var(--dly, 0ms) + 1500ms); }
@keyframes plate-ripple { 0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 2px #fff, 0 0 0 0 rgba(255, 217, 166, 0.85), 0 6px 14px rgba(0, 0, 0, 0.35); } 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1.5px rgba(255, 217, 166, 0.75), 0 0 0 26px rgba(255, 217, 166, 0), 0 6px 14px rgba(0, 0, 0, 0.35); } }
.pslot { position: absolute; width: 168px; margin-left: -49px; padding: 10px 6px 9px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; pointer-events: none; }
.pslot::before { content: ""; position: absolute; inset: 0; border-radius: 3px; border: 1.5px dashed rgba(255, 255, 255, 0.2); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 6px, transparent 6px 12px); }
.pslot > * { position: relative; }
.pslot .pdash { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.34) 0 2px, transparent 2.6px) 0 50% / 13px 13px repeat-x; opacity: 0.8; }
.pslot .nm { font: 500 12.5px/1.25 var(--f-ui); color: var(--b2-dim); }
.pslot .st { font: 400 10.5px/1.3 var(--f-ui); color: var(--b2-dim); }
.cfield.list .pslot { position: relative; left: auto; top: auto; width: auto; max-width: 260px; margin: 0 0 4px; flex-direction: row; justify-content: center; gap: 10px; padding: 10px 14px; text-align: left; }
.cfield.list .pslot .pdash { width: 26px; height: 26px; flex: none; background-size: 9px 9px; }
.cfield.list .pslot .st { display: block; }

/* 路徑：軌、岔路、前置的鏈、兩條路 */
.wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.wires path { fill: none; stroke-linecap: round; transition: stroke 200ms, opacity 300ms, stroke-width 200ms; }
.wires .rl { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.6; }
.wires .w { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.6; }
.wires .w.hi, .wires .fork.hi { stroke: #ffe2b8; stroke-width: 2.4; filter: drop-shadow(0 0 4px rgba(255, 210, 150, 0.8)); }
.wires .fork { stroke: rgba(255, 255, 255, 0.34); stroke-width: 2.2; }
.wires .fork.cut { stroke: rgba(255, 255, 255, 0.1); stroke-dasharray: 2 6; }
.wires .road { stroke-width: 22; opacity: 0.16; }
.wires .road.nv { stroke: var(--em-nova); } .wires .road.hm { stroke: var(--em-human); }
.wires .core { stroke-width: 2.2; stroke-dasharray: 7 7; animation: road-flow 1.4s linear infinite; }
.wires .core.nv { stroke: rgba(150, 210, 240, 0.9); } .wires .core.hm { stroke: rgba(240, 190, 130, 0.9); }
.wires .closed { opacity: 0.2; filter: grayscale(1); animation: none; }
@keyframes road-flow { to { stroke-dashoffset: -28; } }
.jn { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; transform: rotate(45deg); background: #1b2023; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); pointer-events: none; }
.jlab { position: absolute; font: 500 10.5px/1.2 var(--f-ui); color: #ffd9a6; white-space: nowrap; transform: translateX(-50%); text-shadow: 0 1px 3px #000; pointer-events: none; }
.jlab.top { font-size: 12px; color: #fff; }
.seal { position: absolute; width: 44px; height: 6px; margin-top: -3px; background: repeating-linear-gradient(45deg, #5a1f19 0 6px, #2a0f0c 6px 12px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7); transform-origin: left; animation: seal-in 600ms ease-out both; pointer-events: none; }
@keyframes seal-in { from { transform: scaleX(0); } }
.roadsign { position: absolute; padding: 6px 10px; font: 700 12px/1.3 var(--f-ui); color: #101418; background: #e8eef0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); transform: translateX(-50%) rotate(-1.5deg); white-space: nowrap; pointer-events: none; }
.roadsign small { display: block; font: 500 10.5px var(--f-ui); color: #49535a; }
.roadwarn { position: absolute; z-index: 5; padding: 8px 12px; font: 500 12.5px/1.5 var(--f-ui); color: #ffe0dc; background: rgba(60, 12, 10, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 106, 92, 0.6); transform: translateX(-50%); white-space: nowrap; pointer-events: none; animation: spot-in 240ms ease-out both; }
.roadlock { position: absolute; z-index: 3; padding: 9px 13px; text-align: center; font: 500 12.5px/1.5 var(--f-ui); color: #e8eef0; background: rgba(10, 14, 18, 0.9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 4px 10px rgba(0, 0, 0, 0.5); transform: translateX(-50%) rotate(-1.2deg); white-space: nowrap; pointer-events: none; }
.roadlock small { display: block; font-size: 11.5px; color: var(--b2-dim); }

/* ---------- 公告（人＝紙）：別在協議板右邊 ---------- */
.b2-proto .notice { position: absolute; z-index: 7; right: 18px; top: -4px; bottom: 6px; width: 380px; padding: 18px 22px 12px; color: var(--ink); overflow: hidden auto; scrollbar-width: none; overscroll-behavior: contain;
  background: var(--paper-fiber), var(--paper-grain), linear-gradient(178deg, #efe4c9, #e0cfa9); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.3) inset; transform: rotate(0.5deg); }
.b2-proto .notice::-webkit-scrollbar { display: none; }
.b2-proto .notice::before, .b2-proto .notice::after { content: ""; position: absolute; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c24a3a, #6b1d14 70%); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
.b2-proto .notice::before { left: 14px; } .b2-proto .notice::after { right: 14px; }
.notice.flip { animation: note-flip 420ms var(--ease-out) both; }
@keyframes note-flip { from { opacity: 0; translate: 0 12px; } }
.notice .grab { display: none; }
.notice .eb { font: 500 10.5px/1.3 var(--f-num); letter-spacing: 0.12em; color: var(--ink-3); }
.notice .hd { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.notice .hd .emb { width: 58px; height: 58px; --ec: #3a2c1c; --lg: 1; filter: none; }
.notice .hd .emb.c-nova { --ec: #2c4a70; } .notice .hd .emb.c-human { --ec: #8a4b16; }
.notice h2 { margin: 0; font: 900 26px/1.15 var(--f-story); color: var(--ink); }
.notice .kind { margin-top: 4px; font: 500 12px/1.3 var(--f-ui); color: var(--ink-2); }
.notice .kind b { color: var(--ink-red); }
.notice .lead { margin: 8px 0 0; font: 500 13.5px/1.7 var(--f-story); color: var(--ink); }
.notice h4 { margin: 10px 0 5px; font: 700 11px/1 var(--f-ui); letter-spacing: 0.14em; color: var(--ink-2); }
.notice .gl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.notice .gl h5 { margin: 0 0 5px; font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: var(--ink-3); }
.notice .gl ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.45; }
.notice .gl li { position: relative; padding-left: 15px; color: var(--ink); }
.notice .gl li::before { position: absolute; left: 0; top: 0; font: 700 12px/1.45 var(--f-num); }
.notice .gl .g li::before { content: "＋"; color: var(--ink-green); }
.notice .gl .l li::before { content: "−"; color: var(--ink-red); }
.notice .gl .l li.none { color: var(--ink-3); } .notice .gl .l li.none::before { content: ""; }
.notice .now { font: 700 13px/1.5 var(--f-ui); color: var(--ink); }
.notice .now .up { color: var(--ink-green); } .notice .now .dn { color: var(--ink-red); }
.notice .whos { display: flex; flex-wrap: wrap; gap: 3px; }
.notice .mug { width: 30px; height: 30px; border-radius: 2px; box-shadow: 0 0 0 2px #f6f1e6, 0 2px 4px rgba(40, 20, 0, 0.3); }
.notice .mug .pt { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7); }
.notice .mug .pt.drone { display: grid; place-items: center; background: #2b3135; }
.notice .mug.hit { box-shadow: 0 0 0 2px #f6f1e6, 0 0 0 3.5px rgba(163, 48, 28, 0.85); }
.notice .whos .more { align-self: center; margin-left: 4px; font: 700 12px var(--f-num); color: var(--ink-2); }
.notice .whot { margin-top: 2px; font: 500 12px/1.5 var(--f-ui); color: var(--ink-2); }
.notice .say { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; margin-top: 6px; }
.notice .say q { display: block; font: 700 13px/1.45 var(--f-story); color: var(--ink); quotes: "「" "」"; }
.notice .say small { display: block; margin-bottom: 1px; font: 500 10.5px/1.3 var(--f-ui); color: var(--ink-3); }
.notice .patch { margin-top: 10px; padding: 9px 11px; font: 400 12px/1.65 var(--f-num); color: #cfe2ea; background: rgba(12, 20, 26, 0.92); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); transform: rotate(-0.4deg); }
.notice .patch b { color: #fff; }
.notice .moral { margin: 9px 0 0; font: 500 13.5px/1.6 var(--f-story); color: var(--ink-2); font-style: italic; }
.notice .moral::before { content: "「"; } .notice .moral::after { content: "」"; }
.notice .rel2 { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; font: 500 12px/1.4 var(--f-ui); color: var(--ink-2); }
.notice .rel2 > * { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; }
.notice .rel2 a { color: var(--ink-blue); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; align-self: flex-start; }
.notice .rel2 .emb { width: 18px; height: 18px; --ec: #3a2c1c; filter: none; flex: none; }
.notice .warnline { margin-top: 10px; padding: 8px 10px; font: 700 12.5px/1.5 var(--f-ui); color: #7d2a1a; background: rgba(163, 48, 28, 0.1); box-shadow: inset 3px 0 0 #a3301c; }
.notice .sig { position: sticky; bottom: -12px; z-index: 2; display: flex; align-items: center; gap: 12px; margin: 10px -22px -12px; padding: 10px 22px 12px; border-top: 1px dashed rgba(90, 64, 30, 0.45); min-height: 92px; background: linear-gradient(180deg, rgba(234, 221, 192, 0.97), #e2d0aa 50%); } /* 印章那一列黏在公告底部：內容長、視窗矮的時候也按得到 */
.notice .sig .hint { flex: 1; font: 500 12px/1.5 var(--f-ui); color: var(--ink-3); }
.notice .sig .hint b { color: var(--ink); }
/* 印章：按住 1.2 秒蓋下去；放開就抬起來 */
.stamp2 { position: relative; width: 92px; height: 92px; flex: none; padding: 0; background: none; border: 0; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.stamp2 .handle { position: absolute; left: 30px; top: 0; width: 32px; height: 46px; border-radius: 15px 15px 6px 6px; background: linear-gradient(90deg, #4a2a1c, #7a4630 45%, #3a2015); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 4px 6px rgba(0, 0, 0, 0.35); transition: transform 120ms; }
.stamp2 .base { position: absolute; left: 12px; top: 42px; width: 68px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, #2c2c2c, #111); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45); transition: transform 120ms; }
.stamp2 .base::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -4px; height: 5px; border-radius: 0 0 2px 2px; background: #9d2018; }
.stamp2 .ring { position: absolute; left: 6px; top: 66px; width: 80px; height: 8px; background: rgba(90, 64, 30, 0.2); overflow: hidden; }
.stamp2 .ring em { position: absolute; inset: 0 auto 0 0; width: 0; background: #a3301c; }
.stamp2 .slab { position: absolute; left: 0; right: 0; top: 78px; text-align: center; font: 700 11px/1 var(--f-ui); color: var(--ink-2); }
.stamp2:hover .handle { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 0 14px rgba(163, 48, 28, 0.45); }
.stamp2:focus-visible { outline: 2px solid var(--ink-blue); outline-offset: 2px; }
.stamp2.down .handle, .stamp2.down .base { transform: translateY(var(--press, 0px)); transition: none; }
.stamp2.down .ring em { width: var(--p, 0%); }
.inkmark { position: absolute; right: 18px; bottom: 14px; width: 150px; height: 70px; display: grid; place-content: center; font: 900 20px/1 var(--f-story); letter-spacing: 0.12em; color: rgba(179, 38, 30, 0.88); border: 3px double rgba(179, 38, 30, 0.85); border-radius: 4px; transform: rotate(-9deg); mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='80'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.7'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") center / cover;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='80'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.7'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") center / cover;
  animation: ink-hit 520ms cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.inkmark.still { animation: none; }
.inkmark small { display: block; margin-top: 4px; text-align: center; font: 700 10px/1 var(--f-num); letter-spacing: 0.08em; }
@keyframes ink-hit { 0% { transform: rotate(-9deg) scale(1.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-9deg) scale(1); } }
.notice.shake { animation: shake 260ms linear both; }
@keyframes shake { 20% { translate: 2px 1px; } 40% { translate: -2px -1px; } 60% { translate: 1px 2px; } 80% { translate: -1px 0; } }

/* ---------- 一列一列（手機、平板直放、矮視窗）：主題一列往下捲；岔路是兩塊牌子上面一個 Y；兩條路是兩條並排的彩色軌 ---------- */
.cfield.list { left: 0; right: 0; top: 0; bottom: 0; overflow: hidden auto; scrollbar-gutter: stable; overscroll-behavior: contain; padding: 0 0 16px; }
.b2-proto[data-sheet="side"] .cfield.list { right: calc(var(--side-w, 340px) + 30px); }
.b2-proto[data-sheet="bottom"] .cfield.list { bottom: 58%; }
.cfield.list .prow { position: relative; padding: 14px 10px 4px 16px; }
.cfield.list .prow h6 { margin: 0 4px 8px; font: 500 11px/1 var(--f-ui); letter-spacing: 0.16em; color: var(--b2-label); }
.cfield.list .pitems { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: flex-start; }
.cfield.list .pl { position: relative; left: auto; top: auto; margin: 0; width: 100px; }
.cfield.list .pchain { display: flex; align-items: center; gap: 2px; }
.cfield.list .pchain .arr { width: 10px; height: 2px; background: rgba(255, 255, 255, 0.35); position: relative; }
.cfield.list .pchain .arr::after { content: ""; position: absolute; right: -2px; top: -3px; border: 4px solid transparent; border-left-color: rgba(255, 255, 255, 0.45); border-right: 0; }
.cfield.list .pfork { position: relative; display: flex; gap: 6px; padding-top: 22px; }
.cfield.list .pfork .flab { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font: 500 10.5px/1 var(--f-ui); color: #ffd9a6; white-space: nowrap; }
.cfield.list .pfork::after { content: ""; position: absolute; left: 25%; right: 25%; top: 13px; height: 8px; border: 1.5px solid rgba(255, 255, 255, 0.35); border-bottom: 0; }
.cfield.list .roads .lockline { margin: 0 4px 8px; font-size: 12px; color: var(--b2-dim); }
.cfield.list .ppaths { display: grid; grid-template-columns: repeat(2, minmax(0, 120px)); gap: 10px; }
.cfield.list .track { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 26px 0 8px; }
.cfield.list .track::before { content: ""; position: absolute; top: 20px; bottom: 6px; left: 50%; width: 10px; margin-left: -5px; border-radius: 5px; opacity: 0.18; }
.cfield.list .track.nv::before { background: var(--em-nova); } .cfield.list .track.hm::before { background: var(--em-human); }
.cfield.list .track.closed { opacity: 0.5; }
.cfield.list .track h6 { position: absolute; top: 2px; margin: 0; font: 500 11.5px/1 var(--f-ui); white-space: nowrap; }
.cfield.list .track.nv h6 { color: #b9dcee; } .cfield.list .track.hm h6 { color: #f0cf9f; }
.b2-proto[data-lay="list"][data-sheet="side"] { --side-w: 340px; }
.b2-proto[data-lay="list"][data-sheet="side"] .notice { width: 340px; }
/* 公告從下面升起來（58%），印章固定在公告底部，讀到哪裡都按得到 */
.b2-proto[data-sheet="bottom"] .notice { left: 6px; right: 6px; top: auto; bottom: 0; width: auto; height: 58%; transform: none; border-radius: 10px 10px 0 0; padding: 18px 18px 0; animation: sheet-up 360ms var(--ease-out) both; }
.b2-proto[data-sheet="bottom"] .notice.flip { animation: sheet-up 360ms var(--ease-out) both; }
.b2-proto[data-sheet="bottom"] .notice .grab { display: block; width: 44px; height: 4px; margin: -8px auto 8px; border-radius: 2px; background: rgba(90, 64, 30, 0.35); }
.b2-proto[data-sheet="bottom"] .notice .sig { bottom: 0; margin: 10px -18px 0; padding: 8px 18px 10px; min-height: 0; }
.b2-proto[data-sheet="bottom"] .notice .stamp2 { width: 92px; height: 86px; }
.b2-proto[data-sheet="bottom"] .notice .inkmark { right: 10px; bottom: 4px; width: 108px; height: 48px; font-size: 15px; border-width: 2px; } /* 公告在下面時印章那一列比較矮：印小一點，不蓋到上面的人 */
@keyframes sheet-up { from { translate: 0 40px; opacity: 0; } }
@media (max-width: 1240px) { .b2-proto .cool-cap { display: none; } }
@media (max-width: 760px) {
  .b2-proto .coolbox { margin-left: auto; }
  .b2-proto .cool-cap { display: flex; }
  .cfield.list .pl { width: calc((100vw - 64px) / 3); max-width: 116px; }
  .b2-proto .notice .gl { gap: 0 10px; }
  .b2-proto .notice h2 { font-size: 24px; }
}
@media (max-height: 520px) and (min-width: 761px) { .b2-proto .cool-cap { display: none; } .b2-proto .tbl .chip { padding: 0 8px; } }
/* =========================================================
   歸航 HOMEWARD — 研究：艦橋藍圖桌（ui/panels/research.ts；樣稿 design/ui-mock/research-b2.html、panels-b2.css 的「研究」段）
   藍圖格線、微微後傾的桌面、冷光；研究站是在燒的引信；方舟的關鍵路徑上有流動的光點；迷霧三級；靈光一閃的白光與飛出去的卡。
   外殼（霜玻璃、金屬框、篩選、聚光、字幕）在 boards.css。兩種版面：.bp-main.wide＝全景（場地照比例縮放）；.bp-main.list＝四個分支一段一段往下捲；
   詳情 data-sheet＝side 右欄／bottom 從下面升起。滑過不准用 transform 位移（test/hover-shift.mjs）：只用光暈、陰影、透明度。
   ========================================================= */
.b2-tech { --side-w: 364px; }
.b2-tech[data-lay="list"][data-sheet="side"] { --side-w: 330px; }

/* ---------- 研究站：在燒的引信（頂部一排） ---------- */
.bp-labs { position: absolute; z-index: 4; left: 26px; right: calc(var(--side-w) + 44px); top: 2px; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.lab { position: relative; flex: 0 1 312px; min-width: 228px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 3px 10px; align-items: center; padding: 7px 12px 8px 8px; text-align: left; color: var(--b2-ink); font: inherit; background: rgba(6, 14, 20, 0.64); border: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.25); cursor: pointer; transition: box-shadow 200ms, background 200ms; }
.lab > .emb { grid-row: 1 / span 3; width: 38px; height: 38px; --lg: 1; }
.lab .lt { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; min-width: 0; }
.lab .lt b { font: 500 12.5px/1.25 var(--f-ui); color: #eaf6fc; }
.lab .lspd { font: 400 10.5px/1.2 var(--f-num); color: rgba(143, 215, 255, 0.62); white-space: nowrap; }
.lab .eta2 { grid-column: 2; font: 400 11px/1.35 var(--f-num); color: rgba(143, 215, 255, 0.85); }
.lab .eta2 b { font: 700 11.5px var(--f-num); color: #fff; }
.lab .eta2 .bad { color: #ffb4aa; }
.lab:hover, .lab:focus-visible { outline: none; background: rgba(10, 22, 32, 0.76); box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.6), 0 0 18px rgba(143, 215, 255, 0.14); }
.fuse { grid-column: 2; position: relative; height: 6px; margin: 2px 0 1px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(240, 220, 180, 0.65) 0 5px, rgba(240, 220, 180, 0.35) 5px 7px); }
.fuse .ash { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(60, 60, 60, 0.92) 0 5px, rgba(28, 28, 28, 0.92) 5px 7px); transition: width 600ms linear; }
.fuse .ash.grow { background: repeating-linear-gradient(90deg, rgba(143, 215, 255, 0.5) 0 5px, rgba(143, 215, 255, 0.25) 5px 7px); }
/* 火花：只閃亮度與透明度（不用 transform，滑過量位移時才不會被當成在動） */
.fuse .spark { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, #ffd27a 35%, rgba(255, 140, 40, 0.6) 55%, transparent 70%); box-shadow: 0 0 10px rgba(255, 180, 90, 0.6); animation: bp-spark 0.22s steps(2) infinite; transition: left 600ms linear; pointer-events: none; }
@keyframes bp-spark { 50% { opacity: 0.62; filter: brightness(1.7); } }
.lab.paused .fuse .spark { animation: none; opacity: 0.35; filter: grayscale(1); box-shadow: none; }
.lab.paused { box-shadow: inset 0 0 0 1px rgba(255, 180, 170, 0.35); }
.lab.idle, .lab.none { box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.75), 0 0 18px rgba(227, 170, 106, 0.18); }
.lab.idle .lt b, .lab.none .lt b { color: #ffd9a6; }
.lab.idle .fuse, .lab.none .fuse { background: rgba(255, 255, 255, 0.08); }
.lab.none { border: 1px dashed rgba(227, 170, 106, 0.45); }
.lab.none .eta2 b { color: #ffd9a6; }
.lab.site { cursor: default; opacity: 0.8; }
.lab.lit { animation: bp-lit 1400ms ease-out both; }
@keyframes bp-lit { 0% { box-shadow: inset 0 0 0 1px #fff, 0 0 34px rgba(255, 210, 140, 0.8); } 100% { box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.25); } }
.lab.burn .spark { box-shadow: 0 0 22px 6px rgba(255, 220, 160, 0.95); }

/* ---------- 全景：微微後傾的藍圖桌 ---------- */
.bp-main { position: absolute; left: 14px; right: calc(var(--side-w) + 32px); top: 70px; bottom: 12px; }
.bp-main.wide { perspective: 1500px; }
.bp-table { position: absolute; inset: 0; border-radius: 4px; transform: rotateX(5deg); transform-origin: 50% 100%;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(40, 90, 130, 0.2), transparent 70%),
    repeating-linear-gradient(0deg, rgba(143, 215, 255, 0.07) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(143, 215, 255, 0.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(143, 215, 255, 0.12) 0 1px, transparent 1px 110px), repeating-linear-gradient(90deg, rgba(143, 215, 255, 0.12) 0 1px, transparent 1px 110px),
    linear-gradient(180deg, rgba(10, 24, 36, 0.66), rgba(6, 14, 22, 0.78));
  box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.28), inset 0 0 40px rgba(0, 0, 0, 0.55), 0 20px 40px rgba(0, 0, 0, 0.45); }
.bp-table::after { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; background: linear-gradient(180deg, rgba(143, 215, 255, 0.06), transparent 30%); }
.bp-field { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lane-l { position: absolute; left: 12px; font: 400 11px/1.2 var(--f-stencil); letter-spacing: 0.22em; color: rgba(143, 215, 255, 0.82); pointer-events: none; }
.lane-l small { display: block; margin-top: 3px; font: 400 10px var(--f-num); letter-spacing: 0; color: rgba(143, 215, 255, 0.8); }
.tlinks { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.tlinks path { fill: none; stroke: rgba(143, 215, 255, 0.24); stroke-width: 1.3; transition: stroke 200ms, stroke-width 200ms, opacity 200ms; }
.tlinks .lsep { stroke: rgba(143, 215, 255, 0.16); stroke-width: 1; stroke-dasharray: 4 6; }
.tlinks .x2 { stroke-dasharray: 3 4; opacity: 0.6; }
.tlinks .lgo { stroke: rgba(143, 215, 255, 0.5); }
.tlinks .dn { stroke: rgba(190, 230, 250, 0.55); stroke-dasharray: none; opacity: 1; }
.tlinks .key { stroke: rgba(241, 244, 246, 0.85); stroke-width: 2.4; opacity: 1; }
.tlinks .hi { stroke: #ffe2b8; stroke-width: 2.2; opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 210, 150, 0.8)); }
/* 能量：流向方舟的光點 */
.tlinks .energy { stroke: #fff; stroke-width: 3; stroke-dasharray: 2 16; stroke-linecap: round; opacity: 1; animation: bp-flow 0.9s linear infinite; filter: drop-shadow(0 0 5px rgba(160, 220, 255, 1)); }
@keyframes bp-flow { to { stroke-dashoffset: -36; } }

/* ---------- 一格研究：迷霧三級（迷霧＝模糊輪廓＋？？？、差一步＝半透明＋名字、看得到） ---------- */
.bpn { position: absolute; width: 88px; height: 70px; margin-left: -44px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; color: var(--b2-ink); font: inherit; background: none; border: 0; cursor: pointer; transition: opacity 260ms, filter 260ms; }
.bpn > * { position: relative; }
.bpn .emb { width: 38px; height: 38px; --lg: 1; flex: none; transition: filter 200ms, opacity 260ms; }
.bpn .emb .fr, .bpn .emb .sy { stroke-width: 1.35; }
.bpn .nm { padding: 0 4px; border-radius: 2px; font: 500 11.5px/1.3 var(--f-ui); color: #dff1fb; white-space: nowrap; background: rgba(7, 17, 26, 0.82); text-shadow: 0 1px 3px #000; }
.bpn .eta { min-height: 12px; padding: 0 3px; font: 400 10px/1.2 var(--f-num); color: #a9defb; white-space: nowrap; background: rgba(7, 17, 26, 0.8); }
.bpn .eta:empty { background: none; }
.bpn.run .eta { color: #fff; }
.bpn::before { content: ""; position: absolute; left: 50%; top: -7px; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; opacity: 0; transition: opacity 200ms; box-shadow: 0 0 0 1px rgba(143, 215, 255, 0.8), 0 0 24px rgba(143, 215, 255, 0.35); pointer-events: none; }
.bpn:hover .emb, .bpn:focus-visible .emb { filter: drop-shadow(0 0 8px rgba(143, 215, 255, 0.85)); }
.bpn:focus-visible { outline: none; }
.bpn:focus-visible::before { opacity: 0.6; }
.bpn.on::before { opacity: 1; }
.bpn.on .emb { filter: drop-shadow(0 0 10px rgba(143, 215, 255, 0.9)); }
.bpn.near .emb { filter: blur(1.2px); opacity: 0.7; }
.bpn.near .nm { color: #b9cfdb; }
.bpn.fog .emb { filter: blur(2.6px); opacity: 0.45; }
.bpn.fog .nm { color: #93bbd0; letter-spacing: 0.3em; background: rgba(7, 17, 26, 0.74); } /* 還沒解開：名字是「？？？」、徽記是虛線框（emb.s-lock）；比可用的暗一級，但字是實色、小牌有底，至少 3:1（test/contrast.mjs 的 fog-research 規則） */
.bpn.near:hover .emb, .bpn.fog:hover .emb { filter: blur(0.6px) drop-shadow(0 0 6px rgba(143, 215, 255, 0.6)); opacity: 0.85; }
.bpn.rel .emb { filter: drop-shadow(0 0 8px rgba(255, 226, 184, 0.9)); opacity: 1; }
.bpn.rel .nm { color: #ffe2b8; }
.bpn.bp-rev .emb { animation: bp-reveal 1100ms ease-out both; }
.bpn.bp-rev .nm { animation: bp-name 1100ms ease-out both; }
@keyframes bp-reveal { 0% { filter: blur(6px) brightness(3); opacity: 0.2; } 50% { filter: blur(0) brightness(2.2); opacity: 1; } 100% { filter: none; } }
@keyframes bp-name { 0% { opacity: 0; letter-spacing: 0.6em; } 100% { opacity: 1; } }
/* 第一次：只亮第一個該做的選擇 */
.bp-main.guided .bpn:not(.lit) .emb { opacity: 0.12; }
.bp-main.guided .bpn:not(.lit) .nm { color: #e1edf3; }
.bp-main.guided .bpn:not(.lit) .eta { color: #bfe0f1; } /* 聚光：沒亮的格子圖退到 0.12，名字與時間是接近平常亮度的實色（整格 0.12 時字量到 1.1:1，等於看不見；暗幕 0.5 還會再壓一次，字不能再退一級） */
.bp-main.guided .bpn.ghost .emb { animation: none; } /* 下一層的輪廓平常會呼吸（bp-breathe，opacity 0.34↔0.56），動畫的值蓋過上面的 0.12——聚光時沒亮的格子只有它不夠暗（test/blueprint.mjs「第一次」斷言抓到）；聚光收起後呼吸照舊 */
.bp-main.guided .bpn.lit::before { opacity: 1; box-shadow: 0 0 0 2px #ffd9a6, 0 0 30px rgba(255, 210, 160, 0.45); }
.bp-main.guided .arkgoal { box-shadow: inset 0 0 0 1px rgba(241, 244, 246, 0.26); }
.bp-main.guided .arkgoal b, .bp-main.guided .arkgoal .ic { color: #e6f1f6; }
.bp-main.guided .arkgoal span { color: #cfe0ea; } /* 聚光：關鍵研究那一框退一級（框線淡、字是接近平常亮度的實色），不再整框 0.25 */
.bp-main.guided .tlinks { opacity: 0.12; } /* 格子暗成 0.12，線也一起暗：不然亮亮的線會通到一片空白 */
.tlinks { transition: opacity 260ms; }
.filtering .tlinks { opacity: 0.25; } /* 篩選時不相關的格子暗成 0.18，線也跟著暗：不留亮亮的線連著看不見的格子 */
/* 方舟的關鍵研究 */
.arkgoal { position: absolute; z-index: 1; width: 384px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #fff; background: rgba(8, 18, 28, 0.86); box-shadow: inset 0 0 0 1px rgba(241, 244, 246, 0.6), 0 0 26px rgba(160, 220, 255, 0.25); pointer-events: none; transition: opacity 260ms; }
.arkgoal .ic { flex: none; width: 22px; height: 22px; color: #fff; }
.arkgoal b { display: block; font: 700 13px/1.25 var(--f-ui); }
.arkgoal span { font: 400 11px/1.35 var(--f-num); color: rgba(220, 240, 250, 0.82); }
.bp-field .arkgoal { min-height: 54px; } /* 全景排版把這個框當 384×54，能量線的終點落在它的下緣：至少要這麼高 */
.arkgoal.recalc { animation: bp-recalc 1400ms ease-out both; }
@keyframes bp-recalc { 0% { box-shadow: inset 0 0 0 1px #fff, 0 0 46px rgba(200, 240, 255, 0.9); } 100% { box-shadow: inset 0 0 0 1px rgba(241, 244, 246, 0.6), 0 0 26px rgba(160, 220, 255, 0.25); } }

/* ---------- 靈光一閃：白光、飛出去的卡 ---------- */
.b2-tech .flash { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255, 255, 255, 0.95), rgba(180, 230, 255, 0.4) 18%, transparent 48%); animation: bp-flash 900ms ease-out both; }
@keyframes bp-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.flycard { position: absolute; z-index: 31; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; color: #fff; white-space: nowrap; background: rgba(8, 16, 24, 0.95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 10px 24px rgba(0, 0, 0, 0.5); pointer-events: none; animation: bp-fly 2600ms cubic-bezier(0.3, 0.8, 0.2, 1) both; animation-delay: var(--dly, 0ms); }
.flycard img { width: 46px; height: 46px; object-fit: cover; }
.flycard .pic { display: grid; place-items: center; width: 46px; height: 46px; }
.flycard .pic .emb { width: 36px; height: 36px; }
.flycard b { display: block; font: 700 13px/1.25 var(--f-ui); }
.flycard span { font: 400 11px/1.25 var(--f-num); color: rgba(220, 240, 250, 0.8); }
@keyframes bp-fly { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 18% { transform: translate(0, -40px) scale(1.05); opacity: 1; } 70% { transform: translate(0, -40px) scale(1); opacity: 1; } 100% { transform: translate(var(--x1, 0), var(--y1, 0)) scale(0.5); opacity: 0; } }

/* ---------- 詳情：藍圖桌旁的冷面板 ---------- */
.tside { position: absolute; z-index: 7; right: 18px; top: -2px; bottom: 12px; width: var(--side-w); padding: 18px 20px 16px; overflow: hidden auto; scrollbar-width: none; overscroll-behavior: contain; background: rgba(6, 12, 18, 0.72); box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.22); }
.tside::-webkit-scrollbar { display: none; }
.tside.flip { animation: bp-side 360ms var(--ease-out) both; }
@keyframes bp-side { from { opacity: 0; translate: 0 10px; } }
.tside .grab { display: none; }
.tside .eb { font: 500 10.5px/1.2 var(--f-num); letter-spacing: 0.16em; color: rgba(143, 215, 255, 0.65); }
.tside .top { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.tside .top .emb { width: 64px; height: 64px; }
.tside h3 { margin: 0; font: 700 21px/1.25 var(--f-ui); color: #f2f8fb; }
.tside .knd { margin-top: 5px; font: 500 12px/1.4 var(--f-ui); color: var(--b2-dim); }
.tside .tdesc { margin: 12px 0 0; font-size: 13px; line-height: 1.65; color: rgba(220, 235, 242, 0.88); }
.tside h5 { margin: 14px 0 7px; font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: rgba(143, 215, 255, 0.65); }
.tside .fitline { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 6px 9px; font: 500 12px/1.45 var(--f-ui); color: #ffd9a6; background: rgba(60, 36, 12, 0.5); box-shadow: inset 2px 0 0 #e3aa6a; }
.tside .fitline .ic { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.tside .why { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font: 500 12.5px/1.5 var(--f-ui); color: #ffc1b9; }
.tside .why .ic { flex: none; width: 14px; height: 14px; margin-top: 3px; }
.tside .jumps { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 8px; }
.tside .lockjump { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 6px 0 0; font: 500 12.5px/1.3 var(--f-ui); color: #ffe2b8; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
.tside .lockjump .emb { width: 22px; height: 22px; }
.tside .lockjump:hover { color: #fff; }
.tside .kept { margin-top: 8px; font: 400 11.5px/1.3 var(--f-num); color: var(--b2-dim); }
.tside .unl { display: flex; flex-direction: column; gap: 6px; }
.tside .unl .u { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #eaf6fc; }
.tside .unl img { width: 34px; height: 34px; object-fit: cover; background: rgba(143, 215, 255, 0.07); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.tside .unl img.sil { filter: invert(0.8) sepia(1) hue-rotate(160deg) saturate(1.6) brightness(0.62); } /* 還沒開放的建築：黑剪影在暗底上看不見，改成藍圖色的剪影 */
.tside .unl .emb { width: 26px; height: 26px; margin: 0 4px; }
.tside .unl .q { width: 34px; height: 34px; display: grid; place-items: center; font: 700 16px var(--f-num); font-style: normal; color: rgba(143, 215, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.3); }
.tside .unl .q .ic { width: 18px; height: 18px; }
.tside .ktag { margin-left: 4px; padding: 1px 6px; font: 600 10.5px/1.4 var(--f-ui); color: #fff; box-shadow: inset 0 0 0 1px rgba(241, 244, 246, 0.7); }
.tside .cost2, .tside .eta { font: 400 12px/1.4 var(--f-num); color: var(--b2-ink); }
.tside .tacts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.tside .tacts .cbtn { height: 40px; font-size: 14px; }
.tside .tacts .cbtn[disabled] { opacity: 0.45; cursor: not-allowed; }
.tside .tacts .tnote { font: 400 11.5px/1.5 var(--f-ui); color: var(--b2-dim); }
.tside .tacts .tnote.bad { color: #ffb4aa; }

/* ---------- 一段一段往下捲（手機、平板直放、矮視窗） ---------- */
.bp-main.list { overflow: hidden auto; scrollbar-gutter: stable; overscroll-behavior: contain; border-radius: 4px; background: repeating-linear-gradient(0deg, rgba(143, 215, 255, 0.06) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(143, 215, 255, 0.06) 0 1px, transparent 1px 22px), linear-gradient(180deg, rgba(10, 24, 36, 0.62), rgba(6, 14, 22, 0.74)); box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.22); }
.bp-grid { position: relative; padding: 10px 6px 16px; }
.bp-grid h6 { margin: 14px 8px 8px; font: 400 11px/1 var(--f-stencil); letter-spacing: 0.22em; color: rgba(143, 215, 255, 0.82); }
.bp-grid h6 small { margin-left: 8px; font: 400 10px var(--f-num); letter-spacing: 0; color: rgba(143, 215, 255, 0.8); }
.bp-grid .bitems { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px 0; }
.bp-grid .bpn { position: relative; left: auto; top: auto; margin: 0 auto; }
.bp-grid .arkgoal { position: relative; width: auto; margin: 2px 8px 0; }
.b2-tech[data-sheet="bottom"] .bp-main { right: 6px; left: 6px; bottom: calc(42% + 8px); }
.b2-tech[data-sheet="bottom"] .bp-labs { right: 10px; left: 10px; }
.b2-tech[data-sheet="bottom"] .lab { flex: 1 1 100%; min-width: 0; }
.b2-tech[data-lay="list"] .bp-labs { gap: 6px; }
.b2-tech[data-lay="list"] .lab { padding: 5px 10px 6px 6px; flex-basis: 260px; }
.b2-tech[data-lay="list"] .lab > .emb { width: 32px; height: 32px; }
/* 詳情從下面升起來（42%） */
.b2-tech[data-sheet="bottom"] .tside { left: 6px; right: 6px; top: auto; bottom: 0; width: auto; height: 42%; padding: 16px 18px 14px; border-radius: 10px 10px 0 0; background: rgba(6, 12, 18, 0.97); animation: bp-sheet 360ms var(--ease-out) both; }
.b2-tech[data-sheet="bottom"] .tside.flip { animation: bp-sheet 360ms var(--ease-out) both; }
.b2-tech[data-sheet="bottom"] .tside .grab { display: block; width: 44px; height: 4px; margin: -6px auto 8px; border-radius: 2px; background: rgba(143, 215, 255, 0.3); }
.b2-tech[data-sheet="bottom"] .tside .top .emb { width: 52px; height: 52px; }
.b2-tech[data-sheet="bottom"] .tside h3 { font-size: 19px; }
@keyframes bp-sheet { from { translate: 0 40px; opacity: 0; } }

/* 營地的回應字幕：置中在藍圖桌下緣（詳情欄左邊），像電影字幕；陰影加重，壓在格子上也讀得到 */
.b2-tech .camp-say { left: calc((100% - var(--side-w) - 32px) / 2 + 14px); bottom: 18px; max-width: min(640px, calc(100% - var(--side-w) - 80px)); text-shadow: 0 1px 4px #000, 0 0 14px #000, 0 0 24px rgba(0, 0, 0, 0.9); }
.b2-tech[data-sheet="bottom"] .camp-say { left: 50%; bottom: calc(42% + 14px); max-width: calc(100% - 28px); }

/* ---------- 情境教學卡（長夜之後：研究＝回家的路線圖） ---------- */
.gcard { position: absolute; z-index: 12; right: 26px; bottom: 150px; width: 330px; display: grid; grid-template-columns: 34px 1fr; gap: 8px 12px; padding: 12px 14px; color: var(--b2-ink); background: rgba(6, 12, 18, 0.92); box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.35), inset 2px 0 0 #ffd9a6, 0 12px 30px rgba(0, 0, 0, 0.5); animation: spot-in 500ms ease-out both; }
.gcard > .emb { width: 32px; height: 32px; }
.gcard .gtx { font: 500 12.5px/1.6 var(--f-ui); color: var(--b2-dim); }
.gcard .gtx b { display: block; font-size: 14px; color: #ffd9a6; }
.gcard .gact { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.gcard .gact .cbtn { height: 34px; padding: 0 14px; }
#app.board-open .gcard, #app.cine .gcard { display: none; }

/* ---------- 第 73 題：只看下一步（預設）——研究中／能研究的格子、下一層的輪廓、已完成收成一顆、每條車道「還有 N 項」；整棵樹在「全覽」 ---------- */
.chip.ovbtn { margin-left: 8px; flex: none; }
.chip.ovbtn .ic { width: 15px; height: 15px; }
.chip.ovbtn[aria-pressed="true"] { color: #101418; background: #e8eef0; box-shadow: 0 0 18px rgba(255, 255, 255, 0.25); }
.chip.ovbtn[aria-pressed="true"] .ic { color: #101418; }
/* 下一層的輪廓：模糊的剪影，慢慢呼吸（只動不透明度；滑過量位移的測試不會被騙） */
.bpn.ghost { cursor: pointer; }
.bpn.ghost .emb { animation: bp-breathe 3.6s ease-in-out infinite; }
@keyframes bp-breathe { 0%, 100% { opacity: 0.34; } 50% { opacity: 0.56; } }
.bpn.ghost.key .emb { filter: blur(2px) drop-shadow(0 0 5px rgba(241, 244, 246, 0.45)); }
.bpn.bp-rev .emb, .bpn.bp-rev .nm { animation-delay: var(--rd, 0ms); }
/* 已完成收成一顆：兩圈同心的章、中間是做完的項數；展開時最後一顆是「收合」 */
.dbox { position: absolute; width: 88px; height: 70px; margin-left: -44px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; color: var(--b2-ink); font: inherit; background: none; border: 0; cursor: pointer; }
.dbox > * { position: relative; }
.dbox .ring { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(143, 215, 255, 0.2), rgba(8, 20, 30, 0.82)); box-shadow: inset 0 0 0 1.4px rgba(190, 230, 250, 0.6), 0 0 0 5px rgba(143, 215, 255, 0.06), 0 0 0 6px rgba(190, 230, 250, 0.2); transition: box-shadow 200ms; }
.dbox .ring b { font: 700 15px/1 var(--f-num); color: #eaf6fc; }
.dbox .nm { padding: 0 4px; border-radius: 2px; font: 500 11.5px/1.3 var(--f-ui); color: #c4d9e5; background: rgba(7, 17, 26, 0.82); }
.dbox .eta { min-height: 12px; padding: 0 3px; font: 400 10px/1.2 var(--f-num); color: #9fcfe8; white-space: nowrap; background: rgba(7, 17, 26, 0.8); }
.dbox .eta:empty { background: none; }
.dbox:hover .ring, .dbox:focus-visible .ring { box-shadow: inset 0 0 0 1.4px #fff, 0 0 0 5px rgba(143, 215, 255, 0.1), 0 0 0 6px rgba(255, 255, 255, 0.4), 0 0 18px rgba(143, 215, 255, 0.45); }
.dbox:focus-visible { outline: none; }
.dbox.open .ring { box-shadow: inset 0 0 0 1.4px rgba(255, 226, 184, 0.95), 0 0 0 5px rgba(255, 210, 150, 0.08), 0 0 0 6px rgba(255, 226, 184, 0.3); }
.dbox .up { width: 9px; height: 9px; margin-top: 4px; border-left: 2px solid #ffe2b8; border-top: 2px solid #ffe2b8; transform: rotate(45deg); }
.tlinks .from { stroke-dasharray: 2 5; }
.tlinks .rail { stroke: rgba(143, 215, 255, 0.13); stroke-width: 1.2; stroke-dasharray: 1 7; stroke-linecap: round; }
/* 車道最右邊：還有 N 項／全數完成；場地底下的一句說明＋全覽的連結 */
.lane-more { position: absolute; display: flex; align-items: center; gap: 8px; font: 400 11.5px/1 var(--f-ui); letter-spacing: 0.1em; color: rgba(143, 215, 255, 0.82); white-space: nowrap; pointer-events: none; }
.lane-more::before { content: ""; width: 30px; height: 0; border-top: 1.5px dotted rgba(143, 215, 255, 0.4); }
.lane-more.fin { color: rgba(190, 230, 250, 0.86); }
.fnote { position: absolute; max-width: 560px; font: 400 11.5px/1.6 var(--f-ui); color: rgba(143, 215, 255, 0.82); }
.fnote .flink { display: inline-flex; align-items: center; min-height: 26px; margin-left: 4px; padding: 0 6px; font: 500 11.5px/1.6 var(--f-ui); color: #ffe2b8; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
.fnote .flink:hover { color: #fff; }
.bp-grid .fnote { position: relative; max-width: none; margin: 16px 8px 4px; }
.bp-grid .dbox { position: relative; left: auto; top: auto; margin: 0 auto; }
.bp-grid .lane-more { position: relative; grid-column: 1 / -1; padding: 0 8px; }
.bp-grid .lane-more::before { width: 18px; }
@media (max-width: 760px) { .bp-grid .dbox { width: 84px; } .chip.ovbtn { margin-left: 4px; } }

/* ---------- 窄視窗（殘破檔已棄用，第 65 題：只有乾淨版） ---------- */
@media (max-width: 760px) {
  .b2-tech .bp-labs { top: 0; }
  .b2-tech .lab { padding: 5px 10px 5px 6px; }
  .bp-grid .bitems { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bp-grid .bpn { width: 84px; }
  .gcard { left: 14px; right: 14px; width: auto; bottom: calc(var(--mbar) + 64px); }
}
@media (max-height: 520px) and (min-width: 761px) { .b2-tech .lab .lspd { display: none; } }
/* =========================================================
   歸航 HOMEWARD — 探勘：全息星圖桌（ui/panels/expedition.ts；樣稿 design/ui-mock/expedition-b2.html、panels-b2.css「探勘」一節）
   圓形投影（藍光的圓盤、掃描線、轉動的雷達、金屬框與刻度）、時數圈、冰暴前回得來的紅圈、航點徽記、路上的隊伍、無線電字幕；
   右邊（手機：下面）是規劃台。只有乾淨版（第 65 題棄用殘破檔）。外殼與共用零件在 boards.css。class 一律 sc- 開頭（全域已經有 .go、.kind、.eb、.crew…）。
   滑過不准用 transform 位移（test/hover-shift.mjs）：只用光暈、陰影、透明度。雷達轉的是背景的角度（--sw），元素本身不動。
   ========================================================= */
@property --sw { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- 標題列：冰暴預報（不是按鈕，不吃滑過） ---------- */
.b2-exp .sc-fc .chip { cursor: default; }
.b2-exp .sc-fc .chip:hover { background: rgba(255, 255, 255, 0.03); color: var(--b2-chip); }
.b2-exp .sc-fc .chip.bad:hover { color: #ffc1b9; }

/* ---------- 對船員的承諾（第 75 題「去找其他人」）：標題列的琥珀小牌；星圖上算數的逃生艙畫琥珀虛線圈＋「請願」小標（跟「有人在等」的琥珀同一個語言，派去別處不算兌現） ---------- */
.b2-exp .sc-pm[hidden] { display: none; }
.b2-exp .sc-pm .tlb { color: #e3aa6a; }
.b2-exp .sc-pm .chip { cursor: default; color: #ffd8a8; box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.6); }
.b2-exp .sc-pm .chip:hover { background: rgba(255, 255, 255, 0.03); color: #ffd8a8; }
.sc-node.pet { outline: 1.5px dashed rgba(227, 170, 106, 0.95); outline-offset: 4px; }
.sc-pnote { margin: 8px 0 0; padding: 6px 9px; font-size: 12px; line-height: 1.5; color: #ffd8a8; border-left: 2px solid #e3aa6a; background: rgba(227, 170, 106, 0.08); } /* 規劃台：這個地點就是承諾要去的 */
@media (max-width: 900px), (max-height: 520px) { .b2-exp .sc-pm { display: none; } } /* 窄螢幕的標題列放不下第二組（板身從固定位置起算，多一行會壓到星圖）：只靠星圖上的「請願」小標與規劃台那一行 */
.sc-lbl .pt { margin-top: 2px; padding: 2px 5px; border-radius: 3px; font: 600 9.5px/1 var(--f-ui); font-style: normal; letter-spacing: 0.08em; color: #1b1308; background: #e3aa6a; box-shadow: 0 1px 3px #000; }

/* ---------- 星圖：圓盤、掃描線、雷達、框 ---------- */
.sc-chart { position: absolute; overflow: hidden; }
.sc-disc, .sc-scan, .sc-sweep, .sc-rim { position: absolute; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; pointer-events: none; }
.sc-disc {
  background: radial-gradient(circle closest-side, rgba(70, 160, 220, 0.2), rgba(20, 60, 90, 0.14) 74%, rgba(8, 20, 30, 0.55) 98%, transparent 100%),
    repeating-radial-gradient(circle, transparent 0 3px, rgba(143, 215, 255, 0.025) 3px 4px);
  box-shadow: 0 0 0 1px rgba(143, 215, 255, 0.35), 0 0 60px rgba(70, 160, 220, 0.18), inset 0 0 80px rgba(70, 160, 220, 0.12); }
.sc-scan { background: repeating-linear-gradient(180deg, rgba(143, 215, 255, 0.045) 0 1px, transparent 1px 4px); }
.sc-sweep { background: conic-gradient(from var(--sw), transparent 0deg 286deg, rgba(143, 215, 255, 0.05) 318deg, rgba(143, 215, 255, 0.24) 357deg, rgba(200, 240, 255, 0.55) 360deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 calc(100% - 1px), transparent 100%); mask: radial-gradient(circle closest-side, #000 calc(100% - 1px), transparent 100%); }
.sc-rim { box-shadow: inset 0 0 0 10px rgba(30, 36, 40, 0.88), inset 0 0 0 11px rgba(255, 255, 255, 0.12), inset 0 0 0 18px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.45); }
/* 框上的刻度：每 5° 一格、每 45° 一大格 */
.sc-rim::before, .sc-rim::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; }
.sc-rim::before { background: repeating-conic-gradient(from -0.3deg, rgba(220, 235, 240, 0.32) 0 0.6deg, transparent 0.6deg 5deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px), #000 calc(100% - 3px), transparent calc(100% - 2px)); mask: radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px), #000 calc(100% - 3px), transparent calc(100% - 2px)); }
.sc-rim::after { background: repeating-conic-gradient(from -0.6deg, rgba(240, 248, 250, 0.6) 0 1.2deg, transparent 1.2deg 45deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px), #000 calc(100% - 2px), transparent calc(100% - 1px)); mask: radial-gradient(circle closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px), #000 calc(100% - 2px), transparent calc(100% - 1px)); }
html.motion-reduce .sc-sweep { display: none; }
@media (prefers-reduced-motion: reduce) { .sc-sweep { display: none; } }

/* ---------- 線：時數圈、方位、冰暴圈、航線 ---------- */
.sc-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.sc-lines .rg { fill: none; stroke: rgba(143, 215, 255, 0.17); stroke-dasharray: 2 5; }
.sc-lines .ax { stroke: rgba(143, 215, 255, 0.12); }
.sc-lines text { fill: rgba(143, 215, 255, 0.58); font: 400 10px var(--f-num); }
.sc-lines .cp { fill: rgba(220, 240, 250, 0.82); font: 500 11px var(--f-ui); }
.sc-lines .storm { fill: rgba(224, 87, 76, 0.045); stroke: rgba(255, 106, 92, 0.72); stroke-width: 1.4; stroke-dasharray: 6 5; animation: sc-flow 3s linear infinite; }
.sc-lines .st { fill: #ffb1a8; font: 500 11px var(--f-ui); paint-order: stroke; stroke: rgba(4, 8, 12, 0.85); stroke-width: 3px; stroke-linejoin: round; }
.sc-lines .st.far { fill: rgba(170, 230, 190, 0.85); }
.sc-lines .r { stroke: rgba(143, 215, 255, 0.15); }
.sc-lines .r.done { stroke: rgba(143, 215, 255, 0.07); }
.sc-lines .r.busy { stroke: rgba(227, 170, 106, 0.18); }
.sc-lines .tk { stroke: rgba(227, 170, 106, 0.4); stroke-dasharray: 3 4; }
.sc-lines .tg { stroke: rgba(255, 226, 189, 0.9); stroke-width: 2; filter: drop-shadow(0 0 3px rgba(255, 200, 140, 0.8)); }
.sc-lines .tk.bad { stroke: rgba(255, 120, 104, 0.6); }
.sc-lines .tg.bad { stroke: rgba(255, 138, 122, 0.95); filter: drop-shadow(0 0 3px rgba(255, 106, 92, 0.85)); }
.sc-lines .selr { stroke: none; }
.sc-lines .selr.on { stroke: #fff; stroke-width: 2; stroke-dasharray: 6 5; animation: sc-flow 1.2s linear infinite; filter: drop-shadow(0 0 4px rgba(160, 230, 255, 0.9)); }
.sc-lines .selr.on.bad { stroke: #ff8a7a; filter: drop-shadow(0 0 4px rgba(255, 106, 92, 0.9)); }
@keyframes sc-flow { to { stroke-dashoffset: -22; } }

/* ---------- 營地與航點 ---------- */
.sc-camp { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: -18px 0 0 -30px; width: 60px; pointer-events: none; }
.sc-camp .emb { width: 36px; height: 36px; --lg: 1; filter: drop-shadow(0 0 8px rgba(227, 170, 106, 0.65)); }
.sc-camp span { font: 500 11px/1.2 var(--f-ui); color: #ffe2bd; text-shadow: 0 1px 3px #000; }
.sc-node { position: absolute; z-index: 2; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; display: grid; place-items: center; color: inherit; background: none; border: 0; border-radius: 50%; cursor: pointer; transition: opacity 260ms, filter 260ms; }
.sc-node .emb { width: 34px; height: 34px; --lg: 1; transition: filter 200ms; }
.sc-node .emb .fr, .sc-node .emb .sy { stroke-width: 1.4; }
.sc-node:hover .emb, .sc-node:focus-visible .emb { filter: drop-shadow(0 0 8px rgba(160, 230, 255, 0.85)) brightness(1.25); }
.sc-node:focus-visible { outline: none; }
.sc-node.on::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 0 20px rgba(143, 215, 255, 0.7); pointer-events: none; }
.sc-node.hid .emb { opacity: 0.78; }
.sc-node.done .emb { opacity: 0.82; }
.sc-node.sos .emb { animation: sc-sos 1.6s ease-out infinite; }
.sc-node.ping .emb { animation: sc-ping 900ms ease-out; }
@keyframes sc-sos { 50% { filter: drop-shadow(0 0 10px rgba(227, 170, 106, 0.95)); } }
@keyframes sc-ping { 30% { filter: drop-shadow(0 0 14px rgba(160, 230, 255, 1)) brightness(1.8); } }
/* 揭露：從問號飛到真正的位置，落地時一圈光 */
.sc-node.fly { z-index: 5; transition: left 1.1s cubic-bezier(0.25, 0.7, 0.2, 1), top 1.1s cubic-bezier(0.25, 0.7, 0.2, 1); }
.sc-node.sc-rv::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(160, 230, 255, 0.9); animation: sc-burst 1.4s ease-out 0.9s both; pointer-events: none; }
@keyframes sc-burst { from { opacity: 1; transform: scale(0.6); } to { opacity: 0; transform: scale(2.4); } }
.sc-node.pulse { animation: node-pulse 520ms ease-in-out 2 !important; }
/* 名字：不吃點擊，擺在空位（上下左右） */
.sc-lbl { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; text-align: center; pointer-events: none; transition: opacity 260ms; }
.sc-lbl[data-side="r"] { align-items: flex-start; text-align: left; }
.sc-lbl[data-side="l"] { align-items: flex-end; text-align: right; }
.sc-lbl b { font: 500 11.5px/1.25 var(--f-ui); color: #e6f6ff; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.85); }
.sc-lbl small { font: 400 10px/1.25 var(--f-num); color: rgba(150, 218, 255, 0.82); text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, 0.8); }
.sc-lbl small em { font-style: normal; color: #ffb1a8; }
.sc-lbl.done b { color: rgba(230, 246, 255, 0.78); }
.sc-lbl.done small { color: rgba(150, 218, 255, 0.7); }
.sc-lbl.hid b { font-weight: 400; color: rgba(214, 232, 240, 0.86); } /* 還沒去過：名字是「未知．東」、副標「探勘…後揭露」、徽記是虛線圈；比去過的暗一級，字是 0.86 實色、有深色陰影，至少 3:1（test/contrast.mjs 的 fog-expedition 規則） */
.sc-lbl.hid small { color: rgba(150, 218, 255, 0.78); }
.sc-lbl.busy b { color: #ffe2bd; }
.sc-lbl.hov b { color: #fff; }
.sc-lbl.wait { opacity: 0; }
.sc-chart.small .sc-node { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.sc-chart.small .sc-node .emb { width: 28px; height: 28px; }
.sc-chart.small .sc-lbl small { display: none; }
.sc-chart.small .sc-lbl.done:not(.sel) { display: none; } /* 小星圖：去過的地點只留徽記（蓋了章），選中才寫名字 */
.sc-chart.small .sc-lbl b { font-size: 10.5px; }
/* 第一次：只亮第一個該做的選擇 */
.sc-chart.guided .sc-node:not(.lit), .sc-chart.guided .sc-teams { opacity: 0.15; }
.sc-chart.guided .sc-lbl:not(.lit) b { color: #f1f9fd; }
.sc-chart.guided .sc-lbl:not(.lit) small { color: rgba(190, 235, 255, 0.95); } /* 聚光：沒亮的地點只退節點，名字接近平常亮度（暗幕 0.5 還會再壓一次，不能再退一級） */

/* ---------- 路上的隊伍：亮點＋兩張臉＋往哪裡去 ---------- */
.sc-team { position: absolute; z-index: 3; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22), 0 0 18px rgba(200, 240, 255, 0.9); pointer-events: none; transition: left 450ms linear, top 450ms linear, opacity 600ms; }
.sc-team::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); animation: sc-teamring 1.6s ease-out infinite; }
.sc-team.bad { background: #ffd8d2; box-shadow: 0 0 0 4px rgba(255, 120, 104, 0.28), 0 0 18px rgba(255, 120, 104, 0.85); }
.sc-team.home { opacity: 0; }
@keyframes sc-teamring { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.sc-tag { position: absolute; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 3px 7px 3px 3px; white-space: nowrap; font: 400 10.5px/1 var(--f-num); color: #fff; background: rgba(6, 14, 20, 0.88); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.4); pointer-events: none; transition: left 450ms linear, top 450ms linear; }
.sc-tag[data-side="r"] { transform: translate(16px, -50%); }
.sc-tag[data-side="l"] { transform: translate(calc(-100% - 16px), -50%); }
.sc-tag[data-side="u"] { transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% - 15px)); }
.sc-tag[data-side="d"] { transform: translate(calc(-50% + var(--dx, 0px)), 15px); }
.sc-tag .mug { width: 22px; height: 22px; overflow: hidden; flex: none; }
.sc-tag .mug .pt { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-tag .tt { padding-left: 2px; }

/* ---------- 無線電字幕 ---------- */
.sc-radio { position: absolute; z-index: 4; left: 50%; width: min(560px, calc(100% - 24px)); min-height: 44px; transform: translateX(-50%); text-align: center; pointer-events: none; }
.sc-radio .ch { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 500 10px/1 var(--f-num); letter-spacing: 0.2em; color: rgba(169, 194, 204, 0.78); }
.sc-radio .ch b { font-weight: 500; }
.sc-radio .ch i { width: 6px; height: 6px; border-radius: 50%; background: #9fe0b0; box-shadow: 0 0 6px #9fe0b0; animation: sc-blink 1.2s steps(1) infinite; }
.sc-radio .tx { display: block; font: 400 13px/1.55 var(--f-num); color: #cfe9f6; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, 0.8); }
.sc-radio .tx.in { animation: sc-type 700ms steps(28) both; }
.sc-radio.idle .ch i { background: #67777d; box-shadow: none; animation: none; }
.sc-radio.idle .tx { color: rgba(207, 233, 246, 0.7); }
.sc-chart.small .sc-radio { min-height: 32px; }
.sc-chart.small .sc-radio .tx { font-size: 12px; line-height: 1.45; }
@keyframes sc-blink { 50% { opacity: 0.25; } }
@keyframes sc-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* 營地的字幕（NOVA、隊員）站在無線電的位置：說話時無線電讓位 */
.b2-exp .camp-say { left: var(--sc-say-x, 30%); bottom: var(--sc-say-b, 26px); }
.sc-radio { transition: opacity 300ms; }
.b2-exp:has(.camp-say.show) .sc-radio { opacity: 0; }

/* ---------- 規劃台：可能帶回、走哪條路、賭不賭冰暴、派誰去 ---------- */
.sc-plan { position: absolute; z-index: 7; right: 18px; top: 4px; bottom: 14px; width: 404px; padding: 14px 18px 0; overflow: hidden auto; scrollbar-width: none; overscroll-behavior: contain;
  background: rgba(6, 12, 18, 0.74); box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.24), 0 18px 40px rgba(0, 0, 0, 0.35); }
.sc-plan::-webkit-scrollbar { display: none; }
.sc-plan.flip { animation: sc-flip 320ms var(--ease-out) both; }
@keyframes sc-flip { from { opacity: 0.35; translate: 10px 0; } }
.b2-exp[data-sheet="bottom"] .sc-plan { left: 6px; right: 6px; bottom: 0; width: auto; padding: 12px 14px 0; border-radius: 10px 10px 0 0; background: rgba(6, 12, 18, 0.96); }
.b2-exp[data-sheet="bottom"] .sc-plan.flip { animation-name: sc-up; }
@keyframes sc-up { from { opacity: 0.35; translate: 0 18px; } }
.sc-plan .grab { display: block; width: 44px; height: 4px; margin: -4px auto 8px; border-radius: 2px; background: rgba(143, 215, 255, 0.3); }
.sc-eb { display: block; font: 500 10.5px/1.3 var(--f-num); letter-spacing: 0.16em; color: rgba(143, 215, 255, 0.62); }
.sc-top { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
.sc-top .emb { width: 58px; height: 58px; --lg: 1; flex: none; }
.sc-top h3 { margin: 0; font: 700 20px/1.25 var(--f-ui); color: #f2f8fb; }
.sc-kind { margin-top: 4px; font-size: 12px; color: var(--b2-dim); }
.sc-desc { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: rgba(220, 235, 242, 0.86); }
.sc-plan h5 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 14px 0 7px; font: 500 11px/1.25 var(--f-ui); letter-spacing: 0.12em; color: rgba(143, 215, 255, 0.64); }
.sc-plan h5 small { letter-spacing: 0; font-size: 11px; color: var(--b2-dim); text-align: right; }
/* 可能帶回：剪影（模糊的圖示，到了才知道確切的數字） */
.sc-loot { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-loot > span { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 54px; height: 46px; overflow: hidden; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.2); }
.sc-loot .ic { width: 22px; height: 22px; color: rgba(160, 200, 220, 0.58); filter: blur(0.6px); }
.sc-loot .pp .ic { color: rgba(227, 170, 106, 0.72); }
.sc-loot .bq .emb { width: 22px; height: 22px; }
.sc-loot .uk b { font: 700 18px/1 var(--f-ui); color: rgba(160, 200, 220, 0.6); filter: blur(0.4px); }
.sc-loot em { font: 400 10.5px/1.1 var(--f-num); font-style: normal; color: rgba(220, 235, 242, 0.74); }
.sc-loot > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%); animation: sc-shimmer 2.4s linear infinite; }
@keyframes sc-shimmer { from { translate: -100% 0; } to { translate: 100% 0; } }
/* 走哪條路 */
.sc-routes { display: flex; flex-direction: column; gap: 6px; }
.sc-route { display: grid; grid-template-columns: 18px 1fr auto; gap: 2px 8px; align-items: center; width: 100%; padding: 8px 10px; text-align: left; color: inherit; font: inherit; background: none; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.sc-route i { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.sc-route.on { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.sc-route.on i { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }
.sc-route b { font: 500 13px/1.2 var(--f-ui); color: #f2f8fb; }
.sc-route .t { font: 400 12px/1.2 var(--f-num); color: #fff; }
.sc-route .d { grid-column: 2 / span 2; font-size: 11.5px; line-height: 1.35; color: var(--b2-dim); }
.sc-route .tag2 { margin-left: 6px; font: 500 10px var(--f-ui); color: #ffd27a; }
.sc-route.off { cursor: default; opacity: 0.6; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.sc-route.off b, .sc-route.off .t { color: var(--b2-dim); }
/* 賭不賭冰暴前回得來：時間軸＋一句結論 */
.sc-gamble { margin-top: 2px; }
.sc-tl { display: block; overflow: visible; }
.sc-tl .o { fill: rgba(230, 240, 245, 0.62); }
.sc-tl .h { fill: rgba(230, 240, 245, 0.32); }
.sc-tl .sb { fill: rgba(224, 87, 76, 0.24); stroke: rgba(255, 106, 92, 0.68); }
.sc-tl .now { stroke: #ffe2bd; stroke-width: 2; }
.sc-tl text { fill: var(--b2-dim); font: 400 10.5px var(--f-num); }
.sc-tl text.s { fill: #ffb1a8; }
.sc-tl text.b { fill: #fff; }
.sc-verdict { margin-top: 6px; padding: 8px 10px; font: 500 12.5px/1.5 var(--f-ui); }
.sc-verdict.ok { color: #c8f0d4; background: rgba(60, 140, 90, 0.14); box-shadow: inset 3px 0 0 #7fe0a4; }
.sc-verdict.bad { color: #ffd2cc; background: rgba(150, 30, 20, 0.22); box-shadow: inset 3px 0 0 var(--cd-red); }
/* 派誰去：兩個人；標籤＝他走了營地少什麼 */
.sc-crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sc-crew .none { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--b2-dim); }
.sc-cm { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 6px 8px 6px 6px; text-align: left; color: inherit; font: inherit; background: none; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: background 160ms, box-shadow 160ms; }
.sc-cm:hover { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.sc-cm .mug { grid-row: span 2; width: 36px; height: 36px; overflow: hidden; border-radius: 2px; }
.sc-cm .mug .pt { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-cm b { padding-right: 46px; font: 500 12.5px/1.2 var(--f-ui); color: #eef6fa; }
.sc-cm .jt { font-size: 10.5px; line-height: 1.3; color: var(--b2-dim); }
.sc-cm .gap { position: absolute; right: 6px; top: 6px; padding: 2px 4px; font: 700 9.5px/1 var(--f-ui); }
.sc-cm .gap.lo { color: #9fe0b0; box-shadow: inset 0 0 0 1px rgba(159, 224, 176, 0.5); }
.sc-cm .gap.md { color: #ffd27a; box-shadow: inset 0 0 0 1px rgba(255, 210, 122, 0.5); }
.sc-cm .gap.hi { color: #ffb1a8; box-shadow: inset 0 0 0 1px rgba(255, 106, 92, 0.6); }
.sc-cm.pick { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.5px #fff; }
.sc-cm.pick::after { content: "✓"; position: absolute; left: 3px; top: 2px; display: grid; place-items: center; width: 15px; height: 15px; font: 700 11px/1 var(--f-ui); color: #101418; background: #fff; border-radius: 50%; }
.sc-cm.static { cursor: default; }
.sc-cm.static b { padding-right: 0; }
.sc-more { width: 100%; height: 30px; margin-top: 6px; font: 500 12px var(--f-ui); color: var(--b2-dim); background: rgba(255, 255, 255, 0.03); border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); cursor: pointer; }
.sc-more:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
/* 派遣鈕：黏在底部 */
.sc-go:empty { display: none; }
.sc-go { position: sticky; bottom: 0; z-index: 2; display: flex; margin: 12px -18px 0; padding: 10px 18px 14px; background: linear-gradient(180deg, rgba(6, 12, 18, 0), rgba(6, 12, 18, 0.97) 32%); }
.sc-go .cbtn { flex: 1; height: 42px; font-size: 14px; }
.sc-go .cbtn[disabled] { opacity: 0.62; cursor: not-allowed; }
.b2-exp[data-sheet="bottom"] .sc-go { margin: 10px -14px 0; padding: 8px 14px 10px; }
/* 去過、只知道方位 */
.sc-jump { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 10px 6px 6px; font: 500 12.5px/1.2 var(--f-ui); color: #ffe2bd; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.45); }
.sc-jump:hover { background: rgba(227, 170, 106, 0.1); }
.sc-jump .emb { width: 24px; height: 24px; }
.sc-got { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(220, 235, 242, 0.88); }
.sc-saved { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-saved .mug { width: 30px; height: 30px; overflow: hidden; border-radius: 2px; }
.sc-saved .mug .pt { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-saved .mug.dead { filter: grayscale(1) brightness(0.6); }

/* ---------- 窄視窗 ---------- */
@media (max-width: 760px) {
  .b2-exp .sc-plan h5 small { max-width: 60%; }
  .sc-top .emb { width: 46px; height: 46px; }
  .sc-top h3 { font-size: 18px; }
}
/* =========================================================
   歸航 HOMEWARD — 後期經濟的介面（第 77 題）：慶典的小卡（希望那一欄展開）、礦脈的放置預覽
   小卡是冷面板（.panel）加一點燈火的暖：琥珀色的燈與按鈕旁的微光，不另開一種視覺語言。
   ========================================================= */

/* 希望那一欄：第 25 天起點得開；辦得起而且希望偏低時多一個慢慢呼吸的琥珀小點 */
.mb.hope.fest-can { cursor: pointer; }
.mb.hope.fest-can:hover .lbl, .mb.hope.fest-open .lbl { color: var(--cd-fg); }
.mb.hope.fest-ok::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 7px 1px rgba(255, 174, 77, 0.7); animation: fest-glow 2.6s ease-in-out infinite; }
@keyframes fest-glow { 0%, 100% { opacity: 0.45; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .mb.hope.fest-ok::after { animation: none; opacity: 0.9; } }
.fest-tip { margin: 8px 0 0; color: var(--ember-hi); font-size: 12px; }

/* 小卡：在「希望／不安」那一排的正下方 */
.fest { left: 50%; top: 86px; transform: translateX(-50%); width: min(352px, calc(100% - 28px)); padding: 13px 16px 14px; font-size: 12.5px;
  box-shadow: inset 0 0 0 1px var(--cd-hair), 0 20px 40px rgba(0, 0, 0, 0.35), 0 -2px 26px rgba(255, 174, 77, 0.10); }
.fest h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 500 12px/1 var(--f-ui); letter-spacing: 0.14em; color: var(--cd-fg-2); }
.fest .fest-i { display: inline-flex; color: var(--ember); filter: drop-shadow(0 0 5px rgba(255, 174, 77, 0.55)); }
.fest .fest-x { margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center; font-size: 17px; line-height: 1; color: var(--cd-fg-3); background: none; border: 0; cursor: pointer; }
.fest .fest-x:hover { color: var(--cd-fg); }
.fest .fest-d { margin: 0 0 10px; line-height: 1.65; color: var(--cd-fg-2); }
.fest .fest-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0 0 12px; padding: 9px 0; border-top: 1px solid var(--cd-hair); border-bottom: 1px solid var(--cd-hair); }
.fest .fest-kv dt { color: var(--cd-fg-3); } .fest .fest-kv dd { margin: 0; text-align: right; color: var(--cd-fg); }
.fest .fest-go { width: 100%; height: 38px; }
.fest .fest-go:not([disabled]) { color: var(--ember-hi); font-weight: 700; background: rgba(255, 174, 77, 0.13); box-shadow: inset 0 0 0 1px rgba(255, 174, 77, 0.62), 0 0 16px rgba(255, 174, 77, 0.22); } /* 琥珀色：希望那一欄的顏色，也是燈火的顏色 */
.fest .fest-go:not([disabled]):hover { background: rgba(255, 174, 77, 0.24); box-shadow: inset 0 0 0 1px rgba(255, 190, 110, 0.9), 0 0 22px rgba(255, 174, 77, 0.35); }
.fest .fest-w { margin: 9px 0 0; color: var(--cd-fg-3); line-height: 1.55; }

/* 採礦機的放置預覽：這條礦脈共多少 */
.placing-bar .pl3 .ore-n { color: var(--cd-fg); font-weight: 700; }
.placing-bar .pl3 .ore-d { color: var(--cd-fg-3); }
/* 採礦機檢視的「礦脈」區塊：跟組合、相連一樣自己帶左右 16px（直接插在檢視面板裡，沒有 .insb 外框；10-11 使用者截圖「爆版」） */
#drawer[data-tab="inspect"] .ore-sec { margin: 0 0 14px; padding: 0 16px; }
/* =========================================================
   歸航 HOMEWARD — 命名組合體的介面（G8 §7.1、§7.3、§7.4、§7.6、§7.7；字串在 ui/combos.ts、ui/panels/combos.ts）
   顏色：好＝液晶綠、壞＝紅、還差一點＝琥珀（和放置預覽其他行同一套）；組合自己的色系：暖（人的組合）琥珀、冷（產業與 NOVA）冰藍、負面紅。沒有框，只有細線。
   ========================================================= */

/* ---------- 放置預覽第三列下面的組合行（§7.1） ---------- */
.placing-bar .pl3 .cmb .lk { font-weight: 700; }
.placing-bar .pl3 .cmb.good { color: var(--cd-lcd); } .placing-bar .pl3 .cmb.good .lk { color: #7be8a0; }
.placing-bar .pl3 .cmb.bad { color: #ff9a90; } .placing-bar .pl3 .cmb.bad .lk { color: #ff8a80; }
.placing-bar .pl3 .cmb.amb { color: #f0cf9f; } .placing-bar .pl3 .cmb.amb .lk { color: #ffcf8a; }
.placing-bar .pl3 .cmb .pw { color: var(--cd-fg-3); font-weight: 400; }

/* ---------- 檢視面板的「組合」區塊（§7.4；放在「相連」上面） ---------- */
#drawer[data-tab="inspect"] .cmb { margin: 0 0 14px; padding: 0 16px; }
.sec.cmb h4 { margin: 0 0 8px; font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: var(--cd-fg-3); }
.sec.cmb .cbl { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sec.cmb li { font-size: 12.5px; line-height: 1.5; color: var(--cd-fg-2); }
.sec.cmb li b { font-weight: 700; margin-right: 4px; }
.sec.cmb li.cold b { color: var(--cd-radio); } .sec.cmb li.warm b { color: var(--cd-amber); } .sec.cmb li.neg b { color: #ff9a90; }
.sec.cmb li .cbfx { color: var(--cd-lcd); } .sec.cmb li.bad .cbfx { color: #ff9a90; }
.sec.cmb li.dim { color: var(--cd-fg-3); }
.sec.cmb li small { display: block; font-size: 11.5px; line-height: 1.5; color: var(--cd-fg-3); }
/* 相連區塊裡被組合併入的連結：照列出來，整列灰字、不算效果 */
.adj li.in .rn b { font-weight: 500; color: var(--cd-fg-3); }
.adj li.in .rf { color: var(--cd-fg-3); }
.adj li.in .rf em { font-size: 12px; color: var(--cd-fg-2); }

/* ---------- 拆除與拆解確認卡的「會失去的組合」（§7.6）：拆解入艦的卡片是 .gl 的「失去」欄 ---------- */
.gl li.good { color: var(--cd-lcd); }

/* ---------- 組合面板（抽屜分頁「組合」，§7.3）：窄面板，標題在內容裡（同檢視面板） ---------- */
#drawer[data-tab="combos"] { width: 384px; bottom: auto; max-height: calc(100% - 84px); overflow: hidden; }
@media (max-width: 1100px) { #drawer[data-tab="combos"] { max-height: calc(100% - var(--b2-top) - 22px); } } /* 窄視窗側欄的上緣是 --b2-top（84 或 124），不是 62：高度上限跟著扣，圖鑑展開時才不會伸出畫面底下 */
#drawer[data-tab="combos"] .dh { display: none; }
#drawer[data-tab="combos"] .db { padding: 0 0 4px; }
.cbp-body { padding: 0 16px; }
/* 頂部：營地效率（大數字）、分項、一句說明、圖層開關 */
.cbe { padding: 6px 0 12px; border-bottom: 1px solid var(--cd-hair); }
.cbe-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cbe .n.big { font-size: 30px; }
.cbe .cbl { margin-left: auto; align-self: center; }
.cbtn.cbl { height: 28px; padding: 0 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.cbtn.cbl .ic { width: 14px; height: 14px; }
.cbtn.cbl.on { color: #101418; background: #d7dde1; box-shadow: none; }
.cbe-s { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 4px; font-size: 12.5px; color: var(--cd-fg-2); }
.cbe-s .n { font-size: 13px; margin-left: 2px; }
.cbe-h { margin: 6px 0 0; font-size: 11.5px; color: var(--cd-fg-3); }
/* 區：運作中、差 1 棟、負面 */
.cbk { padding: 12px 0 4px; }
.cbk h4 { display: flex; align-items: baseline; margin: 0 0 8px; font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: var(--cd-fg-3); }
.cbk h4 .lbl { margin-left: auto; letter-spacing: 0; }
.cbk.neg h4 { color: #ff9a90; }
.cbk .cbl, .more .cbl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cbh { margin: 0 0 8px; font-size: 12px; line-height: 1.6; color: var(--cd-fg-3); }
/* 一列：徽記（排法小圖）、名字與狀態、成員、效果一句、成形進度或 [蓋] */
.cbr { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 3px 10px; padding: 9px 0; border-top: 1px solid var(--cd-hair); font-size: 12.5px; color: var(--cd-fg-2); }
.cbk .cbr:first-child, .more .cbr:first-child { border-top: 0; padding-top: 2px; }
.cbr > .cbg { grid-row: 1 / span 2; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cbr.warm > .cbg, .cbr.warm .cbn b { color: var(--cd-amber); }
.cbr.cold > .cbg, .cbr.cold .cbn b { color: var(--cd-radio); }
.cbr.neg > .cbg, .cbr.neg .cbn b { color: #ff9a90; }
.cbr.paused > .cbg { opacity: 0.55; } /* 暫停：徽記淡一點（名字旁邊寫原因） */
.cbn .cbl2 { margin-left: auto; align-self: center; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; } /* 圖鑑：排法小圖 */
.cbn { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-width: 0; }
.cbn b { font-size: 14px; font-weight: 700; }
.cbn small { font-size: 11.5px; color: var(--cd-fg-3); }
.cbn small.bad { color: #ff9a90; } .cbn small.amb { color: #f0cf9f; } .cbn small.dim { color: var(--cd-fg-2); }
.cbr > :not(.cbg):not(.cbn) { grid-column: 2; min-width: 0; }
.cbm { display: flex; flex-wrap: wrap; gap: 5px; }
.cbc { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px 0 3px; font-size: 12px; color: var(--cd-fg); background: rgba(255, 255, 255, 0.04); border: 0; box-shadow: inset 0 0 0 1px var(--cd-hair); cursor: pointer; }
.cbc:hover { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.cbc img { width: 20px; height: 20px; object-fit: cover; filter: saturate(0.55) brightness(0.92); }
.cbc span { white-space: nowrap; }
.cbc:not(:has(img)) { padding-left: 8px; }
.cbf { color: var(--cd-lcd); line-height: 1.5; }
.cbr.neg .cbf { color: #ff9a90; }
.cbr.cand .cbf { color: var(--cd-fg-2); }
.cbx { margin: 0; font-size: 12px; line-height: 1.5; color: var(--cd-fg-2); }
.cbx b { font-weight: 500; }
/* 成形進度：48 小時（滿了是綠） */
.cbp { position: relative; height: 4px; background: rgba(255, 255, 255, 0.1); }
.cbp i { position: absolute; inset: 0 auto 0 0; background: var(--cd-fg-3); }
.cbp.full i { background: var(--cd-lcd); }
.cbs { font-size: 11.5px; color: var(--cd-fg-3); margin-top: -1px; }
.cba { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.cba .cbtn { height: 30px; padding: 0 10px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.cba .cbtn .ic { width: 14px; height: 14px; }
/* 圖鑑（<details class="more">，預設收起）：沒解鎖的灰掉 */
#drawer[data-tab="combos"] .more { margin-top: 10px; }
#drawer[data-tab="combos"] .more > div { padding: 0 16px 8px; }
.cbr.cdx.locked { opacity: 0.55; }
.cbr.cdx .cbf.eff { color: var(--cd-fg); }
.cbr.cdx.neg .cbf.eff { color: #ff9a90; }
.cbr.cdx .cbf.fix { color: var(--cd-fg-3); font-size: 12px; }

/* ---------- 圖層圓鈕（第四顆，和研究、協議、探勘同一套）與手機的位置 ---------- */
.dk .k#tool-combolayer.on .o { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9); background: rgba(6, 9, 12, 0.78); }
.dk .k#tool-combolayer .ring .r1 { stroke: var(--cd-amber); }
@media (max-width: 760px) {
  /* 手機的圓鈕列只放得下三格（研究、協議、探勘）：圖層鈕是畫面右上、時間列下面的一顆小圓鈕（和圓鈕列一起讓位：放置中、面板開著、建造列開著都收起來） */
  #app .dk .k#tool-combolayer { position: fixed; top: calc(112px + var(--res-x, 0px)); right: 12px; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; background: rgba(6, 8, 12, 0.62); box-shadow: inset 0 0 0 1px var(--cd-hair); }
  #app.lastnight .dk .k#tool-combolayer { top: calc(134px + var(--res-x, 0px)); } /* 最後一夜希望／不安列在 100–126：圓鈕放在它下面（原本 112 蓋住「不安」兩個字）；資源列折成兩行時（--res-x）兩個位置都往下挪，警示條出現時 toolbar.ts 另外設 */
  #app .dk .k#tool-combolayer .tx { display: none; }
  #app .dk .k#tool-combolayer .o { width: 30px; height: 30px; }
  #app .dk .k#tool-combolayer .o > svg.ring { left: -4px; top: -4px; width: 38px; height: 38px; }
  #app .dk .k#tool-combolayer.on { background: rgba(6, 9, 12, 0.8); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
  #app .dk .k#tool-combolayer.lit, #app .dk .k#tool-combolayer.hot { border-radius: 50%; }
}

/* NOVA 字幕（置中）讓出圓鈕列：圓鈕多了第四顆（圓鈕列寬 +74px），字幕的右緣要退到圓鈕列的左邊（boards.css 的原值：≥1100 是 100%−500；手機橫放是 100%−480、置中） */
@media (min-width: 1100px) { [data-ui="clean"] .radio { width: min(860px, calc(100% - 650px)); } }
@media (max-height: 520px) and (min-width: 761px) { [data-ui="clean"] .radio { left: calc(50% - 90px); } } /* 手機橫放放不下更窄的字幕：整條往左挪（它在建造鍵那一列的正上方，不蓋到） */

/* ---------- 放置時發亮的格子（候選的 [蓋]、NOVA 那一句的冰鑽鄰格）：介面層的光圈，每幀貼在格子中心（combolayer.ts 的 tickComboGlow） ---------- */
.cmb-glows { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; pointer-events: none; }
.cmb-glow { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.cmb-glow[hidden] { display: none; }
.cmb-glow::before, .cmb-glow::after { content: ''; position: absolute; left: -34px; top: -20px; width: 68px; height: 40px; border-radius: 50%; border: 2.5px solid #ffe7c2; }
.cmb-glow::before { background: radial-gradient(closest-side, rgba(240, 190, 120, 0.3), rgba(240, 190, 120, 0) 100%); box-shadow: 0 0 0 1.5px rgba(4, 10, 18, 0.45), 0 0 18px rgba(240, 190, 120, 0.9), inset 0 0 0 1.5px rgba(4, 10, 18, 0.35), inset 0 0 14px rgba(240, 190, 120, 0.5); }
.cmb-glow::after { animation: gc-pulse 1.8s ease-out infinite; box-shadow: 0 0 12px rgba(240, 190, 120, 0.9); }
.cmb-glow.flat::before, .cmb-glow.flat::after { top: -34px; height: 68px; }
#app.cine .cmb-glows, #app.board-open .cmb-glows, #app.title-mode .cmb-glows, #app.end-mode .cmb-glows { display: none; }
html.motion-reduce .cmb-glow::after { animation: none; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .cmb-glow::after { animation: none; opacity: 0.5; } }

/* ---------- NOVA 那一句（§7.7）：建造列裡電解槽的卡片發亮 ---------- */
.bcard.cmb-nudge { box-shadow: inset 0 0 0 1.5px rgba(227, 170, 106, 0.85), 0 0 14px rgba(227, 170, 106, 0.3); animation: dk-pulse 1.8s ease-in-out infinite; }
.bcard .cmb-tag { color: #f0cf9f; font-size: 11px; }
html.motion-reduce .bcard.cmb-nudge { animation: none; }
@media (prefers-reduced-motion: reduce) { .bcard.cmb-nudge { animation: none; } }
/* =========================================================
   歸航 HOMEWARD — 日誌：營地日誌圖板「分類檔案」（ui/panels/log.ts；卡片 log-kit.ts）
   外殼是研究、協議、探勘共用的圖板（boards.css：霜玻璃、金屬框、銘牌、標題列、篩選籤）。
   lgk-＝卡片（人名籤、訃告、事件頁、NOVA 無線電、銘牌、紙條、換幕）；lgf-＝清單與詳情的版面。
   顏色只給三種人：危險（紅）、人（琥珀與紙）、NOVA（冰藍）；其餘是中性的系統色。滑過不准用位移（hover-shift 規則）。
   版面：桌機＝左清單、右詳情；平板、手機橫放＝同樣兩欄，詳情窄一點；手機直式（≤ 760）＝清單滿版，點一則詳情蓋滿清單、上面一列「返回清單」。
   ========================================================= */

/* ---------- 人名籤（紙做的名牌，點了打開船員卡） ---------- */
.lgk-who { margin: 0 2px; padding: 0 6px 0 2px; border: 0; cursor: pointer; vertical-align: -4px; transition: box-shadow 160ms, filter 160ms; }
.lgk-who:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(138, 75, 22, 0.75), 0 0 10px rgba(227, 170, 106, 0.45); }
.lgk-who:focus-visible { outline: 2px solid #8fd7ff; outline-offset: 1px; }
.lgk-who.lgk-gone { background: linear-gradient(180deg, #e2dccf, #cfc6b3); }
.lgk-who.lgk-gone .pt { filter: grayscale(1) contrast(0.92); }
@media (max-width: 900px) { .lgk-who { height: 26px; padding-right: 8px; vertical-align: -6px; } .lgk-who .pt { width: 20px; height: 20px; } } /* 觸控寬度：點擊目標至少 24px（版面巡檢 ④、WCAG 2.5.8） */

/* 一行紀錄的小圖：建築縮圖、研究／協議／地點徽記、圖示 */
.lgk-th { display: block; width: 26px; height: 26px; object-fit: cover; border-radius: 2px; background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.lgk-x { flex: none; align-self: center; padding: 3px 6px; font: 600 11px/1 var(--f-num); font-style: normal; color: #d6ecf6; background: rgba(134, 198, 230, 0.14); box-shadow: inset 0 0 0 1px rgba(134, 198, 230, 0.38); border-radius: 2px; white-space: nowrap; }
.lgk-eb { display: block; font: 500 10.5px/1.25 var(--f-num); letter-spacing: 0.14em; }

/* ---------- 訃告（人＝紙）：褪色的拍立得、名字、死因、他留下的東西 ---------- */
.lgk-death { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; color: var(--ink); }
.lgk-pol { position: relative; align-self: start; margin: 2px 0 0; padding: 8px 8px 30px; background: linear-gradient(180deg, #fbf8f1, #ece4d3); box-shadow: 0 3px 9px rgba(40, 20, 0, 0.38); transform: rotate(-2.2deg); }
.lgk-pol .pt { display: block; width: 132px; height: 132px; object-fit: cover; filter: grayscale(1) contrast(0.96) brightness(0.94) sepia(0.12); }
.lgk-pol figcaption { position: absolute; left: 4px; right: 4px; bottom: 6px; text-align: center; font: 600 14px/1.1 var(--f-hand); color: var(--ink-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgk-dt { min-width: 0; }
.lgk-dt .lgk-eb { color: var(--ink-red); }
.lgk-dt h3 { margin: 5px 0 0; font: 900 25px/1.2 var(--f-story); color: var(--ink); }
.lgk-who2 { margin: 4px 0 0; font: 500 12.5px/1.4 var(--f-ui); color: var(--ink-2); }
.lgk-cause { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 9px 0 0; }
.lgk-cause b { font: 700 16px/1.3 var(--f-story); color: var(--ink-red); }
.lgk-cause span { font: 500 12.5px/1.3 var(--f-ui); color: var(--ink-2); }
.lgk-epi { margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed rgba(59, 45, 27, 0.32); font: 400 16.5px/1.6 var(--f-hand-tc); color: var(--ink-blue); }
.lgk-link { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-top: 11px; padding: 0 12px; font: 600 12.5px/1 var(--f-ui); color: var(--ink); background: rgba(176, 132, 64, 0.16); border: 0; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(110, 78, 36, 0.42); cursor: pointer; }
.lgk-link .ic { width: 14px; height: 14px; }
.lgk-link:hover { background: rgba(176, 132, 64, 0.28); }
.lgk-link:focus-visible { outline: 2px solid var(--ink-blue); outline-offset: 2px; }

/* ---------- 事件頁（人＝紙）：插畫、標題、全文、結果 ---------- */
.lgk-story { display: grid; color: var(--ink);
  background: radial-gradient(125% 95% at 50% 38%, rgba(255, 248, 230, 0) 52%, rgba(96, 58, 20, 0.1) 100%), var(--paper-fiber), var(--paper-grain), linear-gradient(176deg, #f3e8d0, #e6d5b0);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(120, 88, 45, 0.25); }
.lgk-ill { margin: 0; padding: 18px 18px 4px; }
.lgk-ill img { display: block; width: 100%; height: auto; aspect-ratio: 908 / 420; object-fit: cover; padding: 5px 5px 14px; box-sizing: border-box; background: #fbf8f1; box-shadow: 0 2px 7px rgba(40, 20, 0, 0.32); transform: rotate(-0.7deg); }
.lgk-st { min-width: 0; padding: 12px 22px 18px; }
.lgk-st .lgk-eb { color: var(--ink-3); }
.lgk-st h3 { margin: 4px 0 7px; font: 900 21px/1.25 var(--f-story); color: var(--ink); }
.lgk-body p { margin: 0 0 7px; font: 500 13.5px/1.75 var(--f-story); color: var(--ink); }
.lgk-res { margin: 9px 0 0; padding-top: 8px; border-top: 1px dashed rgba(59, 45, 27, 0.32); font: 600 12.5px/1.55 var(--f-ui); color: var(--ink-2); }
/* NOVA 的長獨白（軌道圖、窗口開啟）：冷色的頁 */
.lgk-story.lgk-lore { color: #d4e6ee; background: linear-gradient(180deg, rgba(10, 24, 34, 0.86), rgba(6, 14, 20, 0.86)); box-shadow: inset 0 0 0 1px rgba(134, 198, 230, 0.3), 0 12px 28px rgba(0, 0, 0, 0.4); }
.lgk-story.lgk-lore .lgk-eb { color: rgba(169, 214, 236, 0.85); }
.lgk-story.lgk-lore h3 { color: #eaf6fc; font-family: var(--f-ui); font-weight: 700; }
.lgk-story.lgk-lore .lgk-body p { font: 400 13.5px/1.75 var(--f-ui); color: #d4e6ee; }
.lgk-story.lgk-lore .lgk-res { color: #b5d3e2; border-top-color: rgba(134, 198, 230, 0.25); }

/* ---------- 換幕：一章的標題 ---------- */
.lgk-act { display: grid; justify-items: center; gap: 5px; padding: 20px 16px 18px; text-align: center;
  background: radial-gradient(60% 120% at 50% 50%, rgba(255, 214, 160, 0.1), transparent 70%), rgba(8, 12, 16, 0.88);
  box-shadow: inset 0 1px 0 rgba(241, 227, 200, 0.32), inset 0 -1px 0 rgba(241, 227, 200, 0.32); }
.lgk-act .lgk-eb { color: rgba(214, 224, 228, 0.8); }
.lgk-act b { font: 700 24px/1.3 var(--f-story); letter-spacing: 0.32em; padding-left: 0.32em; color: #f4eee2; }
.lgk-act b small { display: block; margin-bottom: 6px; font: 400 12px/1 var(--f-story); letter-spacing: 0.5em; color: rgba(241, 227, 200, 0.82); }
.lgk-act > span:last-child { font: 400 13.5px/1.5 var(--f-story); letter-spacing: 0.14em; color: rgba(236, 232, 222, 0.88); }

/* ---------- NOVA 的無線電（冷色）：警告多一道紅邊 ---------- */
.lgk-nova { position: relative; padding: 10px 16px 12px 18px; background: linear-gradient(180deg, rgba(12, 26, 36, 0.78), rgba(6, 14, 20, 0.78)); box-shadow: inset 0 0 0 1px rgba(134, 198, 230, 0.26); }
.lgk-nova::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(134, 198, 230, 0.75); }
.lgk-nova.lgk-alert::before { background: var(--cd-red); box-shadow: 0 0 10px rgba(224, 87, 76, 0.7); }
.lgk-nova header { display: flex; align-items: center; gap: 8px; }
.lgk-nova .lgk-nv { width: 18px; height: 18px; }
.lgk-ch { font: 500 10.5px/1 var(--f-num); letter-spacing: 0.18em; color: rgba(169, 214, 236, 0.9); }
.lgk-k { padding: 3px 6px 2px; font: 600 11px/1 var(--f-ui); color: #c4e5f5; box-shadow: inset 0 0 0 1px rgba(134, 198, 230, 0.42); }
.lgk-nova.lgk-alert .lgk-k { color: #ffc6be; box-shadow: inset 0 0 0 1px rgba(255, 106, 92, 0.6); }
.lgk-nova header time { margin-left: auto; font: 500 11.5px/1 var(--f-num); color: rgba(214, 224, 228, 0.76); }
.lgk-nova p { margin: 8px 0 0; font: 400 14px/1.75 var(--f-ui); color: #d6e8f0; }
.lgk-nova footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(134, 198, 230, 0.26); font: 500 12px/1.3 var(--f-ui); color: #bcdbea; }
.lgk-nova footer .ic { width: 13px; height: 13px; }
.lgk-nova footer span { font: 500 11.5px/1.3 var(--f-num); color: rgba(214, 224, 228, 0.76); }

/* ---------- 系統的銘牌：天災、窗口、協議、平息 ---------- */
.lgk-plate { display: flex; align-items: center; gap: 13px; padding: 10px 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.lgk-plate.lgk-bad { background: linear-gradient(90deg, rgba(96, 22, 15, 0.62), rgba(44, 12, 9, 0.42)); box-shadow: inset 0 0 0 1px rgba(255, 106, 92, 0.5); }
.lgk-plate.lgk-k-window { background: rgba(64, 38, 12, 0.42); box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.5); }
.lgk-pi { flex: none; width: 36px; height: 36px; display: grid; place-items: center; color: #e8eef0; }
.lgk-pi .ic { width: 20px; height: 20px; } .lgk-pi .emb { width: 34px; height: 34px; } .lgk-pi .lgk-th { width: 36px; height: 36px; }
.lgk-plate.lgk-bad .lgk-pi { color: #ffb3aa; }
.lgk-plate > div { flex: 1; min-width: 0; font: 500 14px/1.6 var(--f-ui); color: var(--b2-ink); }
.lgk-pk { display: block; margin-bottom: 3px; font: 500 10.5px/1.2 var(--f-num); letter-spacing: 0.14em; color: rgba(214, 224, 228, 0.78); }
.lgk-plate b { font: 700 17px/1.3 var(--f-ui); color: #f2f6f7; }
.lgk-plate time { flex: none; font: 500 11.5px/1 var(--f-num); color: rgba(214, 224, 228, 0.76); }

/* ---------- 人的紙條：承諾、新生、手札 ---------- */
.lgk-slip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 10px 15px; color: var(--ink);
  background: var(--paper-grain), linear-gradient(176deg, #f2e6cb, #e4d2aa); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(120, 88, 45, 0.25); }
.lgk-sk { display: inline-flex; align-items: center; gap: 5px; font: 600 15px/1 var(--f-hand-tc); color: var(--ink-red); white-space: nowrap; }
.lgk-sk .ic { width: 14px; height: 14px; }
.lgk-slip.lgk-k-birth .lgk-sk, .lgk-slip.lgk-k-promise:not(.lgk-bad) .lgk-sk { color: var(--ink-green); }
.lgk-slip.lgk-k-hand .lgk-sk { color: var(--ink-blue); }
.lgk-slip p { margin: 0; font: 700 13.5px/1.6 var(--f-story); }
.lgk-slip.lgk-k-hand p { font: 400 16px/1.55 var(--f-hand-tc); color: var(--ink-blue); }
.lgk-slip time { font: 500 11px/1 var(--f-num); color: var(--ink-3); }

/* =========================================================
   清單（左）與詳情（右）
   ========================================================= */
.lgf { --lgf-side: 440px; }
.lgf-list { position: absolute; left: 30px; right: calc(var(--lgf-side) + 50px); top: 2px; bottom: 16px; padding: 0 10px 0 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; scrollbar-gutter: stable; }
.lgf-side { position: absolute; z-index: 6; right: 22px; top: -2px; bottom: 10px; width: var(--lgf-side); overflow: hidden auto; scrollbar-width: none; overscroll-behavior: contain; }
.lgf-side::-webkit-scrollbar { display: none; }
.lgf-sep { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 0 9px; background: linear-gradient(180deg, rgba(9, 13, 17, 0.97) 72%, rgba(9, 13, 17, 0)); }
.lgf-sep b { font: 700 15px/1 var(--f-ui); color: #f2f6f7; }
.lgf-sep span { padding: 4px 6px 3px; font: 700 11px/1 var(--f-ui); color: #101418; background: #e8eef0; }
.lgf-sep i { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.13); }

.lgf-row { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0 0 6px; padding: 9px 12px 10px; cursor: pointer; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: background 160ms, box-shadow 160ms; }
.lgf-row:hover { background: rgba(255, 255, 255, 0.075); }
.lgf-row.lgf-sel { background: rgba(232, 238, 240, 0.13); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.78), 0 0 18px rgba(255, 255, 255, 0.1); }
.lgf-row:focus-visible { outline: 2px solid #8fd7ff; outline-offset: 1px; }
.lgf-m { flex: 1; min-width: 0; }
.lgf-h { display: flex; align-items: baseline; gap: 9px; }
.lgf-h b { font: 700 13.5px/1.35 var(--f-ui); color: #f2f6f7; }
/* 時刻＋多久以前（第 75 題）：右上角兩行 */
.lgf-row time { display: grid; justify-items: end; gap: 3px; margin-left: auto; flex: none; font: 500 11.5px/1 var(--f-num); color: rgba(214, 224, 228, 0.8); }
.lgf-row time em { font: 400 10.5px/1 var(--f-ui); font-style: normal; color: rgba(214, 224, 228, 0.78); white-space: nowrap; }
.lgf-tg { font: 500 11.5px/1.3 var(--f-ui); color: rgba(214, 224, 228, 0.84); white-space: nowrap; }
.lgf-tg.lgf-tgd { color: #ffb6ad; }
.lgf-m p { margin: 4px 0 0; font: 400 13px/1.65 var(--f-ui); color: rgba(228, 236, 240, 0.9); }
.lgf-m p.lgf-clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lgf-m.lgf-one { display: flex; align-items: center; gap: 10px; }
.lgf-m.lgf-one p { flex: 1; min-width: 0; margin: 0; }
.lgf-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
.lgf-ic .emb { width: 26px; height: 26px; } .lgf-ic .ic { width: 17px; height: 17px; color: rgba(214, 224, 228, 0.8); } .lgf-ic .lgk-th { width: 30px; height: 30px; }
.lgf-row .lgk-x { margin-top: 5px; }

/* NOVA：冷色無線電 */
.lgf-row.lgf-c-nova { background: rgba(10, 26, 36, 0.5); box-shadow: inset 0 0 0 1px rgba(134, 198, 230, 0.2), inset 2px 0 0 rgba(134, 198, 230, 0.6); }
.lgf-row.lgf-c-nova:hover { background: rgba(14, 34, 46, 0.62); }
.lgf-row.lgf-c-nova .lgf-h b { font: 500 11px/1.35 var(--f-num); letter-spacing: 0.18em; color: #acd8ee; }
.lgf-row.lgf-c-nova .lgf-m p { color: #d2e6ef; }
.lgf-row.lgf-k-alert { box-shadow: inset 0 0 0 1px rgba(134, 198, 230, 0.2), inset 2px 0 0 var(--cd-red); }
.lgf-row.lgf-c-nova.lgf-sel { box-shadow: inset 0 0 0 1.5px rgba(196, 233, 250, 0.85), 0 0 18px rgba(134, 198, 230, 0.2); }
/* 事件：插畫縮圖 */
.lgf-thumb { flex: none; width: 112px; height: 56px; padding: 3px 3px 5px; box-sizing: border-box; background: #fbf8f1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); transform: rotate(-1deg); }
.lgf-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lgf-thumb.lgf-none { display: grid; place-items: center; padding: 0; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); transform: none; color: rgba(214, 224, 228, 0.8); }
.lgf-thumb.lgf-none .ic { width: 20px; height: 20px; }
.lgf-row.lgf-k-story .lgf-h b { font: 700 14.5px/1.35 var(--f-story); }
.lgf-row.lgf-c-event.lgf-bad, .lgf-row.lgf-k-hazard { background: linear-gradient(90deg, rgba(90, 22, 15, 0.5), rgba(40, 12, 9, 0.3)); box-shadow: inset 0 0 0 1px rgba(255, 106, 92, 0.42); }
.lgf-row.lgf-k-hazard .lgf-ic .ic { color: #ffb3aa; }
.lgf-row.lgf-k-window { background: rgba(64, 38, 12, 0.4); box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.48); }
/* 建造：一行，像帳本 */
.lgf-row.lgf-c-build { align-items: center; margin: 0; padding: 6px 10px; background: none; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07); }
.lgf-row.lgf-c-build:hover { background: rgba(255, 255, 255, 0.05); }
.lgf-row.lgf-c-build.lgf-sel { background: rgba(232, 238, 240, 0.12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75); }
/* 人：紙條與照片 */
.lgf-row.lgf-c-people { color: var(--ink); background: var(--paper-grain), linear-gradient(176deg, #efe3c6, #e0cda5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(120, 88, 45, 0.25); }
.lgf-row.lgf-c-people:hover { background: var(--paper-grain), linear-gradient(176deg, #f4e9cf, #e6d4ae); }
.lgf-row.lgf-c-people.lgf-sel { box-shadow: 0 0 0 2px #f2f6f7, 0 4px 14px rgba(0, 0, 0, 0.45); }
.lgf-row.lgf-c-people .lgf-h b { font: 700 14.5px/1.35 var(--f-story); color: var(--ink); }
.lgf-row.lgf-c-people time, .lgf-row.lgf-c-people time em { color: var(--ink-3); }
.lgf-row.lgf-c-people .lgf-m p { color: var(--ink); }
.lgf-row.lgf-c-people .lgf-tg { color: var(--ink-2); } .lgf-row.lgf-c-people .lgf-tg.lgf-tgd { color: var(--ink-red); font-weight: 700; }
.lgf-row.lgf-c-people .lgf-ic .ic { color: var(--ink-2); }
.lgf-pt { flex: none; width: 50px; height: 58px; padding: 4px 4px 10px; box-sizing: border-box; background: #fbf8f1; box-shadow: 0 2px 5px rgba(40, 20, 0, 0.38); transform: rotate(-2deg); }
.lgf-pt .pt { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(0.95) sepia(0.1); }
.lgf-row p.lgf-hand { font: 400 15.5px/1.5 var(--f-hand-tc); color: var(--ink-blue); }

/* 詳情：紙（人、事件）或冷面板（NOVA、建造） */
.lgf-sheet { position: relative; box-sizing: border-box; min-height: 100%; padding: 22px 22px 18px; }
.lgf-sheet.lgf-paper { color: var(--ink); background: var(--paper-fiber), var(--paper-grain), linear-gradient(178deg, #efe4c9, #e0cfa9); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.3) inset; }
.lgf-sheet.lgf-paper::before, .lgf-sheet.lgf-paper::after { content: ""; position: absolute; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c24a3a, #6b1d14 70%); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
.lgf-sheet.lgf-paper::before { left: 14px; } .lgf-sheet.lgf-paper::after { right: 14px; }
.lgf-sheet.lgf-cold { background: rgba(6, 12, 18, 0.76); box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.22); }
.lgf-sheet.lgf-page { padding: 0; }
.lgf-sheet.lgf-page .lgk-story { min-height: 100%; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
/* 手機直式的返回列（桌機、平板、手機橫放的詳情一直在右邊，不需要） */
.lgf-top { display: none; }
.lgf-sheet h5 { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 9px; font: 500 11px/1 var(--f-ui); letter-spacing: 0.12em; color: rgba(143, 215, 255, 0.85); }
.lgf-sheet h5 span { font: 500 11px/1 var(--f-num); letter-spacing: 0.04em; color: rgba(214, 224, 228, 0.78); }
.lgf-sheet h5.lgf-ink { color: var(--ink-2); }
.lgf-hist { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.lgf-hist li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; font: 400 12.5px/1.55 var(--f-ui); color: rgba(220, 232, 238, 0.88); }
.lgf-hist li time { font: 500 11.5px/1.55 var(--f-num); color: rgba(214, 224, 228, 0.78); }
.lgf-hist li.lgf-me { color: #fff; } .lgf-hist li.lgf-me time { color: #c4e9ff; }
.lgf-hist li.lgf-more { display: block; color: rgba(214, 224, 228, 0.8); }
.lgf-bio { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.lgf-bio li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; font: 500 13px/1.55 var(--f-story); color: var(--ink); }
.lgf-bio li time { font: 500 11.5px/1.6 var(--f-num); color: var(--ink-3); }
.lgf-bld { display: flex; gap: 16px; align-items: flex-start; }
.lgf-bld img { flex: none; width: 104px; height: 104px; object-fit: cover; background: rgba(143, 215, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.lgf-bld .lgk-eb { color: rgba(143, 215, 255, 0.82); }
.lgf-bld h3 { margin: 6px 0 0; font: 700 21px/1.25 var(--f-ui); color: #f2f8fb; }
.lgf-bld p { margin: 8px 0 0; font: 400 13.5px/1.65 var(--f-ui); color: rgba(220, 235, 242, 0.9); }
.lgf-empty { margin: 30px 10px; text-align: center; font: 400 13px/1.5 var(--f-ui); color: rgba(214, 224, 228, 0.8); }
.lgf-end { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 6px; font: 400 11.5px/1.3 var(--f-ui); color: rgba(214, 224, 228, 0.78); }
.lgf-end .ic { width: 13px; height: 13px; }

/* =========================================================
   平板、手機橫放：兩欄，詳情窄一點；手機直式：清單滿版，詳情蓋滿清單
   ========================================================= */
@media (max-width: 1100px) and (min-width: 761px) {
  .lgf { --lgf-side: 360px; }
  .lgk-death { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
  .lgk-pol .pt { width: 96px; height: 96px; }
}
@media (max-height: 520px) and (min-width: 761px) { /* 手機橫放：圖板矮，邊距收緊 */
  .lgf { --lgf-side: 340px; }
  .lgf-list { left: 18px; right: calc(var(--lgf-side) + 32px); bottom: 10px; }
  .lgf-side { right: 14px; bottom: 6px; }
  .lgf-sheet { padding: 16px 16px 14px; }
  .lgf-sep { padding: 7px 0 6px; }
  .lgk-death { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
  .lgk-pol { padding: 6px 6px 22px; } .lgk-pol .pt { width: 78px; height: 78px; }
  .lgk-dt h3 { font-size: 20px; }
  .lgk-ill { padding: 12px 12px 2px; }
  .lgk-st { padding: 10px 16px 14px; }
}
@media (max-width: 760px) {
  .lgf-list { left: 10px; right: 10px; top: 0; bottom: 0; padding-right: 0; }
  .lgf-side { display: none; }
  /* 點一則：詳情蓋滿清單（標題列與篩選籤還在上面，關閉鈕在標題列），最上面一列「返回清單」 */
  .lgf.lgf-picked .lgf-side { display: block; inset: 0; width: auto; z-index: 9; animation: lgf-in 260ms var(--ease-out) both; background: rgba(8, 12, 16, 0.96); }
  .lgf.lgf-picked .lgf-list { visibility: hidden; }
  .lgf-sheet { min-height: 100%; padding: 0 16px 18px; }
  .lgf-sheet.lgf-paper::before, .lgf-sheet.lgf-paper::after { top: 58px; }
  .lgf-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; margin: 0 -16px 14px; padding: 6px 16px 6px 8px; min-height: 48px; box-sizing: border-box; background: rgba(8, 12, 16, 0.97); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12); }
  .lgf-sheet.lgf-page .lgf-top { margin: 0; }
  .lgf-top span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/1.2 var(--f-num); color: rgba(214, 224, 228, 0.82); text-align: right; }
  .lgf-back { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 8px; font: 600 14px/1 var(--f-ui); color: #101418; background: #e8eef0; border: 0; border-radius: 3px; cursor: pointer; }
  .lgf-back .ic { width: 15px; height: 15px; transform: rotate(180deg); }
  .lgf-back:focus-visible { outline: 2px solid #8fd7ff; outline-offset: 2px; }
  .lgf-thumb { width: 84px; height: 44px; }
  .lgf-row { gap: 10px; padding: 9px 10px 10px; }
  .lgk-death { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .lgk-pol { padding: 6px 6px 24px; } .lgk-pol .pt { width: 92px; height: 92px; }
  .lgk-dt h3 { font-size: 21px; }
  .lgk-ill { padding: 14px 14px 2px; }
  .lgk-st { padding: 10px 16px 16px; }
  .lgk-nova p { font-size: 13.5px; }
}
@keyframes lgf-in { from { opacity: 0; transform: translateY(16px); } }
/* =========================================================
   「下一步」（src/ui/guide-next.ts）：左上清單（#gx-a）、今晚的危機卡（#gx-b）、第一局的聚光（#gx-spot）、圓鈕上的數字（.dk-n）
   類名一律 gx- 前綴（不撞全域短類名）；#app 上不另掛類名（DOM 對照 dom-parity 會記 #app 的類名）
   ========================================================= */
#app.title-mode .gx-a, #app.title-mode .gx-b, #app.title-mode .gx-spot, #app.end-mode .gx-a, #app.end-mode .gx-b, #app.end-mode .gx-spot { display: none !important; }
#app.cine .gx-a, #app.cine .gx-b, #app.nvcam .gx-a, #app.nvcam .gx-b { opacity: 0 !important; pointer-events: none; }
#app.board-open .gx-a, #app.panel-open .gx-a, #app.build-open .gx-a, #app.placing .gx-a { opacity: 0 !important; pointer-events: none; } /* 圖板（協議、研究、探勘）撐滿畫面、側欄開著（日誌是半透明的整面）、建造抽屜開著、放置中（窄螢幕會疊到抽屜與相連說明）：清單跟目標小字、圓鈕一樣讓位 */
.gx-a, .gx-b { --gx-t0: #ff6b5e; --gx-t1: var(--ember); --gx-t2: var(--ice); font-family: var(--f-ui); }
.gx-ic { width: 16px; height: 16px; flex: none; }
.gx-bar { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(196, 233, 255, 0.16); overflow: hidden; }
.gx-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember-deep), var(--ember)); border-radius: inherit; }

/* ---------- 清單（左上，取代前三天的目標小字） ---------- */
#app #goal { display: none !important; } /* 前三天的目標小字：清單的第一項就是它（同一個位置） */
.gx-a { position: absolute; left: 22px; top: 52px; z-index: 6; width: 352px; color: var(--cd-fg, #f5f8fa); opacity: var(--ui-dim, 1); transition: opacity 400ms; }
#app.panel-people .gx-a { opacity: 0; pointer-events: none; }
.gx-a header { display: flex; align-items: center; gap: 8px; width: max-content; height: 26px; padding: 0 10px 0 8px; border-radius: 13px; background: rgba(6, 10, 18, 0.66); font: 700 11.5px/1 var(--f-ui); letter-spacing: 0.24em; color: rgba(226, 239, 245, 0.96); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); cursor: default; } /* 有底：亮的組合圖層、正午的雪地上「還有 N 項」也要 4.5:1 */
.gx-a header em { font: 500 11px var(--f-ui); letter-spacing: 0.04em; font-style: normal; color: rgba(226, 239, 245, 0.9); }
.gx-a header .gx-mmore { display: none; } /* 手機只顯示一列：「還有幾項」算的是第一列以外的 */
.gx-led { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 8px var(--ice); }
.gx-led.hot { background: var(--gx-t0); box-shadow: 0 0 10px var(--gx-t0); animation: gx-blink 1.1s steps(1) infinite; }
.gx-a ol { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.gx-a li { --c: var(--gx-t2); opacity: 1; transform: none; transition: opacity 300ms, transform 300ms; }
.gx-a li.t0 { --c: var(--gx-t0); } .gx-a li.t1 { --c: var(--gx-t1); }
.gx-a li.in { animation: gx-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.gx-a li .gx-row { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 9px 10px 9px 9px; text-align: left; color: inherit; border-radius: 10px;
  background: linear-gradient(90deg, rgba(8, 13, 24, 0.9), rgba(8, 13, 24, 0.84)); /* 右邊放「前往」：亮的組合圖層、雪地上也要 4.5:1 */ box-shadow: inset 0 0 0 1px rgba(124, 201, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 160ms, box-shadow 160ms, transform 160ms; }
.gx-a li .gx-row::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); box-shadow: 0 0 10px var(--c); }
.gx-a li .gx-row:hover { background: linear-gradient(90deg, rgba(14, 22, 38, 0.92), rgba(12, 19, 34, 0.78)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 8px 22px rgba(0, 0, 0, 0.34); transform: translateX(2px); }
.gx-a li .gx-ic { width: 30px; height: 30px; padding: 7px; border-radius: 50%; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.gx-tx { display: grid; gap: 2px; min-width: 0; }
.gx-tx b { font: 700 13.5px/1.3 var(--f-ui); color: #f4f8fb; }
.gx-tx > span { font: 400 12px/1.45 var(--f-ui); color: rgba(214, 228, 240, 0.86); }
.gx-a li.t0 .gx-tx b { color: #ffd7d2; }
.gx-rush { display: inline-flex; align-items: center; gap: 5px; height: 26px; margin: 4px 0 0 49px; padding: 0 10px 0 8px; border-radius: 13px; font: 700 12px/1 var(--f-ui); color: #1b130a; background: linear-gradient(180deg, var(--ember-hi), var(--ember)); box-shadow: 0 3px 10px rgba(255, 174, 77, 0.3); }
.gx-rush .ic { width: 13px; height: 13px; }
.gx-rush:hover { filter: brightness(1.08); }
.gx-go { display: inline-flex; align-items: center; gap: 3px; font: 600 11.5px/1 var(--f-ui); color: color-mix(in srgb, var(--c) 62%, #fff); letter-spacing: 0.06em; white-space: nowrap; }
.gx-go i { font-style: normal; font-size: 15px; transition: transform 160ms; }
.gx-a li .gx-row:hover .gx-go i { transform: translateX(3px); }
.gx-quote { margin: 5px 0 0; padding: 6px 12px; width: max-content; max-width: 100%; border-radius: 10px; font: italic 500 12.5px/1.45 var(--f-ui); color: #f1e3cf; background: rgba(6, 10, 18, 0.66); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); } /* 第一局發現期船員的一句話 */
.gx-none { margin: 4px 0 0; padding: 8px 12px; font: 400 12px/1.5 var(--f-ui); color: rgba(214, 228, 240, 0.8); text-shadow: 0 1px 3px #000; }
@keyframes gx-in { from { opacity: 0; transform: translateX(-10px); } }
@keyframes gx-blink { 50% { opacity: 0.25; } }

/* ---------- 危機卡（左下，建造鍵上面；一次一張，只給今晚的危機） ---------- */
.gx-b { position: absolute; left: 22px; bottom: 74px; z-index: 9; width: 404px; pointer-events: none; opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 260ms, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.gx-b.show { opacity: 1; transform: none; pointer-events: auto; }
#app.panel-open .gx-b, #app.build-open .gx-b, #app.placing .gx-b { opacity: 0 !important; pointer-events: none; }
.gx-b-in { --c: var(--gx-t2); position: relative; padding: 14px 16px 14px 18px; border-radius: 14px; color: #eef5fa; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 55%), linear-gradient(160deg, rgba(10, 17, 30, 0.94), rgba(6, 10, 18, 0.9));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gx-b-in.t0 { --c: var(--gx-t0); } .gx-b-in.t1 { --c: var(--gx-t1); }
.gx-b-in::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 30%, transparent)); box-shadow: 0 0 14px var(--c); }
.gx-b.show .gx-b-in.t0 { animation: gx-nudge 520ms 180ms ease-out 1; }
.gx-b header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gx-eye { position: relative; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--nova) 70%, transparent), 0 0 12px rgba(143, 215, 255, 0.35); }
.gx-eye i { position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle, #e6f7ff, var(--nova) 55%, rgba(143, 215, 255, 0.2)); animation: gx-eye 2.4s ease-in-out infinite; }
.gx-b-in.t0 .gx-eye { box-shadow: inset 0 0 0 1.5px rgba(255, 120, 108, 0.8), 0 0 14px rgba(255, 107, 94, 0.45); } .gx-b-in.t0 .gx-eye i { background: radial-gradient(circle, #ffe3df, var(--gx-t0) 60%, rgba(255, 107, 94, 0.2)); }
.gx-from { display: grid; font: 800 12px/1.1 var(--f-ui); letter-spacing: 0.28em; color: #d8f1ff; }
.gx-from small { font: 600 10.5px/1.3 var(--f-ui); letter-spacing: 0.12em; color: var(--c); }
.gx-t { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 700 16.5px/1.35 var(--f-ui); color: #fff; }
.gx-t .gx-ic { width: 18px; height: 18px; margin-top: 3px; color: var(--c); }
.gx-why { margin: 5px 0 0 26px; font: 400 13px/1.55 var(--f-ui); color: rgba(220, 232, 242, 0.9); }
.gx-b .gx-bar { margin-left: 26px; }
.gx-b footer { display: flex; gap: 8px; margin: 12px 0 0 26px; }
.gx-b footer button { height: 32px; padding: 0 14px; border-radius: 8px; font: 700 13px/1 var(--f-ui); letter-spacing: 0.04em; transition: filter 140ms, transform 140ms, background 140ms; }
.gx-b .gx-go { color: #1b130a; background: linear-gradient(180deg, var(--ember-hi), var(--ember)); box-shadow: 0 4px 14px rgba(255, 174, 77, 0.32); }
.gx-b-in.t0 .gx-go { color: #fff; background: linear-gradient(180deg, #ff8a7c, #e5483d); box-shadow: 0 4px 14px rgba(255, 93, 83, 0.38); }
.gx-b .gx-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.gx-b .gx-later { color: rgba(220, 232, 242, 0.82); background: rgba(124, 201, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(124, 201, 255, 0.22); }
.gx-b .gx-later:hover { background: rgba(124, 201, 255, 0.16); }
@keyframes gx-eye { 50% { transform: scale(0.72); opacity: 0.75; } }
@keyframes gx-nudge { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }

/* ---------- NOVA 字幕（ui/nova.ts）：頻道標籤 11px、九成不透明，在亮的組合圖層上量到 4.49:1——字提到全不透明（警報的紅字不動） ---------- */
#app #nova:not(.alert) .ch { color: #e3f0f5; }

/* ---------- 圓鈕上的數字（協議＝新草案幾份、研究＝閒著的研究站；toolbar.ts） ---------- */
.dk .o > .dk-n { position: absolute; z-index: 2; left: -8px; top: -8px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; font: 800 11.5px/19px var(--f-num, var(--f-ui)); text-align: center; color: #1a0f05; background: var(--ember); box-shadow: 0 0 0 2px rgba(6, 10, 18, 0.9), 0 0 10px rgba(255, 174, 77, 0.6); text-shadow: none; pointer-events: none; } /* 淺底深字：不要繼承圓鈕的深色字影（對比會被算成 1.3） */
.dk .o > .dk-n[hidden] { display: none; }
/* 第一局的關鍵時刻：聚光（暫停中） */
.gx-spot { position: fixed; inset: 0; z-index: 60; --x: 50vw; --y: 50vh; --r: 60px; }
.gx-spot[hidden] { display: none; }
.gx-hole { position: absolute; left: calc(var(--x) - var(--r)); top: calc(var(--y) - var(--r)); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%;
  box-shadow: 0 0 0 200vmax rgba(3, 7, 14, 0.66), inset 0 0 0 2px rgba(255, 210, 154, 0.95), 0 0 0 6px rgba(255, 174, 77, 0.25), 0 0 40px rgba(255, 174, 77, 0.5); animation: gx-ring 1.6s ease-in-out infinite; }
.gx-cap { --c: var(--ember); position: absolute; width: 330px; padding: 16px 18px; border-radius: 14px; color: #f2f7fb; font-family: var(--f-ui);
  left: clamp(16px, calc(var(--x) - 165px), calc(100vw - 346px)); bottom: calc(100vh - var(--y) + var(--r) + 18px);
  background: linear-gradient(160deg, rgba(14, 20, 34, 0.97), rgba(8, 12, 22, 0.95)); box-shadow: inset 0 0 0 1px rgba(255, 174, 77, 0.5), 0 20px 50px rgba(0, 0, 0, 0.55); animation: gx-cap 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.gx-cap.t0 { --c: #ff6b5e; box-shadow: inset 0 0 0 1px rgba(255, 107, 94, 0.6), 0 20px 50px rgba(0, 0, 0, 0.55); }
.gx-spot.left .gx-cap { left: auto; right: clamp(16px, calc(100vw - var(--x) - 60px), calc(100vw - 346px)); }
.gx-spot.below .gx-cap { bottom: auto; top: calc(var(--y) + var(--r) + 18px); }
.gx-cap .gx-from { display: block; margin-bottom: 6px; color: var(--c); font-size: 11px; }
.gx-cap b { display: block; font: 700 17px/1.35 var(--f-ui); }
.gx-cap p { margin: 6px 0 0; font: 400 13px/1.55 var(--f-ui); color: rgba(220, 232, 242, 0.9); }
.gx-cap footer { display: flex; gap: 8px; margin-top: 14px; }
.gx-cap button { height: 32px; padding: 0 14px; border-radius: 8px; font: 700 13px/1 var(--f-ui); }
.gx-cap button[data-gx="go"] { color: #1b130a; background: linear-gradient(180deg, var(--ember-hi), var(--ember)); }
.gx-cap button[data-gx="skip"] { color: rgba(220, 232, 242, 0.85); background: rgba(124, 201, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(124, 201, 255, 0.25); }
@keyframes gx-ring { 50% { box-shadow: 0 0 0 200vmax rgba(3, 7, 14, 0.66), inset 0 0 0 2px rgba(255, 210, 154, 0.7), 0 0 0 12px rgba(255, 174, 77, 0.12), 0 0 56px rgba(255, 174, 77, 0.35); } }
@keyframes gx-cap { from { opacity: 0; transform: translateY(10px); } }
html.motion-reduce .gx-hole, html.motion-reduce .gx-eye i, html.motion-reduce .gx-led.hot, html.motion-reduce .gx-a li.in, html.motion-reduce .gx-b.show .gx-b-in.t0 { animation: none; }

/* ---------- 手機（≤ 760）、矮的視窗（手機橫放）、觸控的平板（≤ 1024）：清單只顯示第一項，點標頭看全部（三項會壓到下方的字幕）。
   平板：三項的清單蓋住地圖左上一大塊，雙指旋轉／縮放的手指落在清單上就被吃掉；縮成一項，蓋住的範圍跟手機一樣小（不轉送觸控事件：轉給畫布要重組雙指手勢，容易壞） ---------- */
@media (max-width: 760px), (max-height: 520px), (max-width: 1024px) and (pointer: coarse) {
  .gx-a header .gx-more { display: none; } .gx-a header .gx-mmore { display: inline; }
  .gx-a.open header .gx-mmore { display: none; }
  .gx-a:not(.open) li:nth-child(n + 2) { display: none; }
  .gx-a header { cursor: pointer; }
  .gx-a header .gx-mmore::after { content: " ▾"; }
}
@media (max-width: 760px) {
  .gx-a { left: 12px; right: 62px; top: 126px; width: auto; } /* 手機頂端兩列（時間資源、希望座位不安）之下；右邊讓出組合圖層的小圓鈕 */
  .gx-tx > span { font-size: 11.5px; }
  .gx-b { left: 10px; right: 10px; width: auto; bottom: 178px; }
  .gx-t { font-size: 15px; }
  .gx-rush { margin-left: 40px; }
  .gx-cap { width: auto; left: 16px !important; right: 16px !important; }
}
/* 燃料引導（使用者 2026-10-11 選甲＋丙）：頂部燃料格「現有／升空需要」與提示框（ui/topline.ts、ui/tip.ts）、發射台油槽與精煉廠的標籤（ui/fuel-need.ts 的 tankHTML，
   3D 疊層 render/overlay.ts、2D 標籤層 render2d/fuel.ts 共用）。疊層的類名一律 r3 開頭：疊層的類名全域都看得到，不能撞別人的類名 */

/* ---------- 甲：頂部燃料格「現有／升空需要」＋細進度條（存夠了變綠勾）；需求意外變多的 ▲ ---------- */
.rs.rs-fuel { position: relative; padding-bottom: 3px; }
.rs.rs-fuel .ic { color: var(--c-fuel); }
.rs.rs-fuel .n small { font: 500 11px/1 var(--f-mono); color: rgba(224, 230, 234, 0.74); margin-left: 1px; } /* 小字：對比 4.5 以上（HUD 浮在 3D 畫面上） */
.rs.rs-fuel .rs-fuel-bar { position: absolute; left: 18px; right: 0; bottom: -3px; height: 2px; background: rgba(255, 154, 87, 0.18); }
.rs.rs-fuel .rs-fuel-bar b { display: block; height: 100%; background: var(--c-fuel); box-shadow: 0 0 6px rgba(255, 154, 87, 0.7); }
.rs.rs-fuel.done .ic { color: #9fe3b8; }
.rs.rs-fuel.done .rs-fuel-bar b { background: #9fe3b8; box-shadow: 0 0 6px rgba(159, 227, 184, 0.7); }
.rs.rs-fuel .rs-fuel-up { margin-left: 2px; font-style: normal; font-size: 9px; color: #ffb37f; }

/* 甲：燃料格的提示框（小標、需求拆項、意外的變動、幾天存夠） */
.tip .tip-k { margin: 8px 0 2px; font: 600 10.5px/1.2 var(--f-ui); letter-spacing: 0.12em; color: rgba(224, 230, 234, 0.66); }
.tip .tip-pace { margin: 6px 0 2px; color: #ffc59a; }
.tip .tip-sub td { padding-top: 1px; padding-bottom: 1px; border-bottom: 0; font-size: 11px; color: rgba(224, 230, 234, 0.7); }
.tip .tip-sub td:first-child { padding-left: 12px; }
.tip .tip-sub td + td { color: rgba(255, 210, 174, 0.85); }
.tip .tip-chg { margin: 6px 0 0; padding: 5px 7px; color: #ffd2ae; background: rgba(255, 154, 87, 0.12); box-shadow: inset 2px 0 0 #ff9a57; }

/* ---------- 丙：發射台的油槽標籤與精煉廠的「燃料 → 方舟」 ---------- */
.r3ov .r3b.occ:has(> .r3fg) { opacity: 1; } /* 油槽被建築擋到也不淡掉：它是燃料唯一掛在營地裡的地方 */
.r3ov .r3tank, .r3fl > div:has(> .r3fg) { z-index: 2; } /* 地形名、別的徽章晚建立、排在 DOM 後面：油槽標籤要蓋在它們上面 */
/* 電影黑邊（事件卡、結局書頁）拉起來時，油槽與精煉廠的標籤跟 HUD 一起退場：它們是疊層裡唯一的大塊暗底卡片，留著就是蓋在營地上的一塊黑（test/hygiene-ui.mjs A）。
   用 visibility 不用 display：標籤的寬度只在內容變了才量（overlay.ts 的 tankW），display:none 的時候量到 0，演完靠邊的標籤就不往裡收了；3D 疊層、2D 標籤層（.r3fl）共用 */
#app.cine .r3tank, #app.cine .r3fr, #app.cine .r3fl { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
.r3fg { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 176px; padding: 7px 10px 7px 9px; margin-bottom: 3px; background: rgba(6, 9, 13, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 154, 87, 0.55), 0 0 18px -5px rgba(255, 154, 87, 0.75), 0 6px 16px rgba(0, 0, 0, 0.45); font: 600 11px/1 "Noto Sans TC", sans-serif; color: rgba(224, 230, 234, 0.82); white-space: nowrap; }
.r3fg-h { display: flex; align-items: center; gap: 6px; letter-spacing: 0.06em; }
.r3fg-h b { margin-left: auto; font: 700 15px/1 "IBM Plex Mono", ui-monospace, monospace; color: #ffd2ae; letter-spacing: 0; }
.r3fg-h b small { font-size: 11px; font-weight: 500; color: rgba(224, 230, 234, 0.72); }
.r3fg svg, .r3fr svg { width: 13px; height: 13px; stroke: #ff9a57; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.r3fg-b { position: relative; display: flex; height: 7px; background: rgba(255, 154, 87, 0.13); }
.r3fg-b em { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #d8672f, #ffb37f); box-shadow: 0 0 8px rgba(255, 154, 87, 0.6); }
.r3fg-b i { position: relative; box-shadow: inset -2px 0 0 rgba(6, 9, 13, 0.95); }
.r3fg-b i:last-child { box-shadow: none; }
.r3fg-b .r3fg-ice { background: repeating-linear-gradient(135deg, rgba(150, 210, 255, 0.28) 0 3px, transparent 3px 6px); }
.r3fg-p { font: 500 10px/1.2 "Noto Sans TC", sans-serif; color: rgba(224, 230, 234, 0.74); }
.r3fg-p b { font: 600 10.5px/1 "IBM Plex Mono", ui-monospace, monospace; color: rgba(255, 210, 174, 0.9); }
.r3fg-p > span { display: inline-block; white-space: nowrap; }
.r3fg-c { padding: 4px 6px; margin: 0 -4px -2px; font: 600 10.5px/1.2 "Noto Sans TC", sans-serif; color: #1a0f06; background: #ffb37f; }
.r3fg.hot { box-shadow: inset 0 0 0 1px rgba(255, 179, 127, 0.95), 0 0 22px -4px rgba(255, 154, 87, 0.95), 0 6px 16px rgba(0, 0, 0, 0.45); }
.r3fg.ok { box-shadow: inset 0 0 0 1px rgba(159, 227, 184, 0.6), 0 0 14px -4px rgba(159, 227, 184, 0.7); }
.r3fg.ok .r3fg-h b { color: #c8f1d6; }
.r3fg.ok svg { stroke: #9fe3b8; }
.r3fg.ok .r3fg-b em { background: #9fe3b8; box-shadow: none; }
.r3fr { display: flex; align-items: center; gap: 4px; padding: 3px 7px 3px 5px; margin-bottom: 2px; background: rgba(6, 9, 13, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 154, 87, 0.35);
  font: 600 10.5px/1 "Noto Sans TC", sans-serif; color: #ffc59a; white-space: nowrap; }

/* 2D 版的標籤層（render2d/fuel.ts）：疊在畫布上、不吃點擊；每個標籤的錨點在底邊中央 */
.r3fl { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.r3fl > div { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.r3fl[hidden], .r3fl > div[hidden] { display: none; }

@media (max-width: 760px) { /* 手機：營地小、標籤擠——油槽的拆項折成兩行、精煉廠只留「→ 方舟」 */
  .r3fg { min-width: 0; max-width: 190px; }
  .r3fg-p { white-space: normal; line-height: 1.35; }
  .r3fr .r3fr-w { display: none; }
}

/* =========================================================
   歸航 HOMEWARD — 右下角的圖示列（第 118 題「隨進度出現」；src/ui/toolbar.ts）＋滑鼠停留的提示（src/ui/keytip.ts）＋ ≡ 選單裡的面板入口。
   圖示列跟左下建造列成對：寬螢幕一條 36px 高、只有圖示，名字與快捷鍵在滑過的提示；平板（多半是觸控）圖示旁寫名字；
   手機是圓鈕列上面一條小籤（熱力、選單在右下的 ≡）。圖示鈕借圓鈕的外觀（.dk .k ＞ .o）：#tools 本身也掛 .dk，
   讓位、事件黑邊、首頁與結局跟圓鈕一起收（boards.css）。手機不要給 #tools 加 backdrop-filter：它會變成 fixed 子元素的定位框。
   ========================================================= */

/* 圖示鈕：外觀跟圓鈕同一家，只是沒有環與底下那一行；紅點（方舟、船員）掛在圖示右上 */
#tools .k .o { background: none; box-shadow: none; }
@media (hover: hover) { #tools .k:hover .o { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); } } /* 觸控點過之後 :hover 會黏著：只給有滑鼠的裝置 */
#tools .k.on .o { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
#tools .o > .dot { position: absolute; z-index: 2; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--cd-amber); box-shadow: 0 0 0 2px rgba(6, 10, 18, 0.9), 0 0 8px var(--cd-amber); pointer-events: none; }
#tools .o > .dot.alert { background: var(--cd-red); box-shadow: 0 0 0 2px rgba(6, 10, 18, 0.9), 0 0 8px var(--cd-red); }
#tools .o > .dot[hidden] { display: none; }
#tools .tb-sep { flex: none; width: 1px; height: 18px; margin: 0 5px; background: rgba(255, 255, 255, 0.16); }

/* 寬螢幕：圓鈕往上讓出一條，圖示列跟左下建造列同高（36px）、同一條底線 */
@media (min-width: 761px) {
  #app #dials { bottom: 68px; }
  #app #tools { right: 26px; bottom: 22px; height: 36px; gap: 0; flex-direction: row; align-items: center; padding: 0 4px; background: rgba(6, 8, 12, 0.42); box-shadow: inset 0 0 0 1px var(--cd-hair); }
  #app #tools .k { width: 36px; height: 36px; gap: 0; justify-content: center; }
  #app #tools .k .o { width: 30px; height: 30px; }
  #app #tools .k .o > .ic { width: 17px; height: 17px; }
  #app #tools .k .tx { display: none; }
}
/* 平板（多半是觸控、沒有滑過）：圖示旁邊寫名字 */
@media (min-width: 761px) and (max-width: 1099px) {
  #app #dials { bottom: 66px; } #app #tools { right: 14px; }
  #app #tools .k:not(#tool-menu) { width: auto; flex-direction: row; gap: 3px; padding: 0 7px 0 3px; }
  #app #tools .k:not(#tool-menu) .tx { display: flex; }
  #app #tools .k .t { font-size: 12px; }
}
/* 窄平板、手機橫放（761–879 寬）：寫了名字的圖示列約 480px，再加上建造列右邊的分類圖示（約 345px）會跟左下疊在一起——分類圖示先收（建造抽屜裡照樣有分類） */
@media (min-width: 761px) and (max-width: 879px) { #app .buildk .dcats { display: none; } }
/* 手機：圓鈕列上面一條圖示＋名字的小籤（熱力、選單在右下的 ≡）；字幕與通知跟著往上挪一條 */
@media (max-width: 760px) {
  #app #tools { left: 14px; right: 14px; bottom: calc(var(--mbar) + 56px); display: flex; justify-content: flex-end; gap: 4px; }
  #app #tools .tb-sep, #app #tools #tool-heat, #app #tools #tool-menu { display: none; }
  #app #tools .k { flex: 1 1 0; min-width: 0; width: auto; height: 36px; gap: 3px; padding: 0 2px; justify-content: center; }
  #app #tools .k .o { width: 22px; height: 22px; }
  #app #tools .k .o > .ic { width: 14px; height: 14px; }
  #app #tools .k .tx { flex: none; } #app #tools .k .t { font-size: 11.5px; }
  #app .radio { bottom: calc(var(--mbar) + 100px); }
  #app .notes { bottom: calc(var(--mbar) + 230px); }
}

/* 第一次長出來（第一局）：彈出來、琥珀色亮兩下（4 秒）；減少動態效果時不動（boards.css 的 html.motion-reduce .dk *） */
.dk .k.tb-new { animation: tb-born 4s var(--ease-out, ease-out) both; }
.dk .k.tb-new .o { animation: tb-glow 1.6s ease-in-out 2; }
@keyframes tb-born { 0% { transform: scale(0.4); opacity: 0; } 12% { transform: scale(1.12); opacity: 1; } 20%, 100% { transform: none; opacity: 1; } }
@keyframes tb-glow { 50% { box-shadow: inset 0 0 0 1.5px rgba(240, 207, 159, 1), 0 0 22px rgba(227, 170, 106, 0.85); background: rgba(227, 170, 106, 0.22); } }

/* ≡ 選單裡的面板入口（modal.ts）：桌機也列出來，第一局還沒長出來的畫面在這裡找得到；鈕上的點是「有事可做」 */
#app .mpanels { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
#app .mpanels .mp { position: relative; min-height: 46px; }
#app .mpanels .mp .dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--cd-amber); box-shadow: 0 0 6px var(--cd-amber); }
#app .mpanels .mp .dot.alert { background: var(--cd-red); box-shadow: 0 0 6px var(--cd-red); }
/* 選單多了十個面板入口，桌機的矮視窗（≤ 820 高，例如 1280×720）一欄會超出畫面：改兩欄，跟手機橫放同一套（style.css 的 max-height: 520px） */
@media (min-width: 761px) and (max-height: 820px) { .menu-box { width: min(560px, 100%); max-height: 100%; overflow-y: auto; grid-template-columns: 1fr 1fr; } .menu-box h2, .menu-box .mpanels { grid-column: 1 / -1; } }

/* 觸控裝置（沒有滑鼠）不顯示鍵盤的字：建造抽屜底下那一列、放置列的「按住 Shift…右鍵或 Esc」（第 118 題：觸控完全不顯示鍵名） */
@media (hover: none) { #buildbar .bfoot .kb, #placing .kk { display: none; } }

/* 滑過的提示（只有滑鼠；keytip.ts）：名字＋快捷鍵，圓鈕再加一行現況 */
#keytip { position: fixed; z-index: 80; pointer-events: none; display: flex; flex-direction: column; gap: 3px; padding: 7px 10px 8px; max-width: 280px; background: rgba(6, 9, 12, 0.94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 20px rgba(0, 0, 0, 0.5); color: #f5f8fa; font: 500 12.5px/1.35 var(--f-ui); }
#keytip[hidden] { display: none; }
#keytip b { display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
#keytip kbd { margin-left: auto; padding: 3px 6px 2px; border: 0; border-radius: 3px; font: 600 11px/1 var(--f-num); color: #f5f8fa; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
#keytip span { font: 400 11.5px/1.4 var(--f-ui); color: #cdd6db; }
/* =========================================================
   歸航 HOMEWARD — 方舟號與 NOVA 圖板（第 110–111 題；src/ui/panels/ark.ts、ark-ship.ts、nova.ts、board-secs.ts）
   類名字首：.pnl2＝板身、p2-＝兩塊板共用的零件、p2a-＝方舟、p2b-＝NOVA、.shp＝船的 SVG（裡面的短類名只在 .shp 底下用）。
   顏色語意照圖板家族：冰藍＝系統／NOVA、琥珀＝人的動作、紅＝出問題、灰綠 LCD＝完成。
   #drawer[data-tab="ark"]／[data-tab="nova"] 的舊樣式（ark.css、ark2.css、nova.css）照樣套得到：奧德賽、留守兩個分頁沿用舊版面靠它們。
   ========================================================= */
.pnl2 { text-wrap: pretty; /* 折行不留孤字（「件」「6 節」「/ 4」單獨掉到下一行） */ --ink: #e8eef0; --dim: rgba(214, 224, 228, 0.78); --faint: rgba(214, 224, 228, 0.6); --cy: #8fd7ff; --nova: #86c6e6; --amb: #e3aa6a; --amb2: #f0c48c; --red: #ff7a6c; --ok: #b7cabf;
  position: absolute; inset: 0 18px 16px; overflow: auto; color: var(--ink); font: 400 13px/1.5 var(--f-ui); scrollbar-width: thin; scrollbar-gutter: stable; } /* 捲得動的容器都要 stable（hover-shift 守著） */
.pnl2 em { font-style: normal; color: #ff9f94; }
.pnl2 h4 { margin: 14px 0 6px; font: 500 10.5px/1.3 var(--f-num); letter-spacing: 0.16em; color: var(--dim); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.pnl2 h4 small { font: 400 11.5px/1.3 var(--f-ui); letter-spacing: 0; color: var(--amb2); }
.pnl2 .p2-mute { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--dim); }
.pnl2 .p2-warn { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #ffb3a8; }
.pnl2 .p2-line { margin: 6px 0; line-height: 1.6; color: var(--ink); }
.pnl2 .p2-line.bad { color: #ffb3a8; }
.pnl2 .p2-line .ic, .pnl2 .p2-mute .ic { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; color: var(--dim); }
.pnl2 .lnk { background: none; border: 0; padding: 0; color: var(--cy); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pnl2 .why2 { margin: 8px 0 0; font-size: 12px; color: #ffb3a8; }
/* 按鈕：主＝琥珀（人的動作）、一般＝描邊、警告＝紅描邊 */
.pnl2 .p2b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 14px; font: 500 13px/1 var(--f-ui); color: var(--ink); background: rgba(255, 255, 255, 0.05); border: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); cursor: pointer; white-space: nowrap; transition: background 160ms, box-shadow 160ms; }
.pnl2 .p2b .ic { width: 15px; height: 15px; flex: none; }
.pnl2 .p2b:hover:not([disabled]) { background: rgba(255, 255, 255, 0.11); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.pnl2 .p2b.pri { color: #1b1206; background: linear-gradient(180deg, #f1c58f, #d99b55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 18px rgba(227, 170, 106, 0.28); font-weight: 700; }
.pnl2 .p2b.pri:hover:not([disabled]) { background: linear-gradient(180deg, #f7d2a3, #e3a965); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 26px rgba(227, 170, 106, 0.45); }
.pnl2 .p2b.p2-go { box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.75); color: var(--amb2); }
.pnl2 .p2b.warn { box-shadow: inset 0 0 0 1px rgba(255, 122, 108, 0.7); color: #ffc0b6; }
.pnl2 .p2b.danger { color: #fff; background: #9e2f26; box-shadow: inset 0 0 0 1px #ff7a6c; }
.pnl2 .p2b.on { color: #101418; background: #e8eef0; }
.pnl2 .p2b.sm { min-height: 28px; padding: 0 10px; font-size: 12px; }
.pnl2 .p2b.lg { min-height: 44px; padding: 0 20px; font-size: 15px; }
.pnl2 .p2b.ic { width: 30px; min-height: 30px; padding: 0; }
.pnl2 .p2b.big-launch { width: auto; letter-spacing: 0.04em; } /* style.css 的 .big-launch 是舊側欄底部那顆撐滿的鈕；冒煙測試靠這個類名找發射鈕 */
.pnl2 .p2b[disabled] { opacity: 0.5; cursor: default; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); background: none; color: var(--dim); }
.pnl2 .p2-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
/* 第二層（ark-parts.ts 的 moreBlock）：放在圖板裡收窄內距 */
.pnl2 details.more { margin-top: 10px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); border-radius: 3px; }
.pnl2 details.more > summary { padding: 9px 12px; color: var(--ink); }
.pnl2 details.more > summary .lbl { color: var(--dim); }
.pnl2 details.more > div { padding: 2px 12px 12px; }
.pnl2 .lbl { color: var(--dim); }
/* 發射條件燈 */
.pnl2 .p2-lamps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 28px; padding: 4px 6px; margin: -4px -6px; background: none; border: 0; border-radius: 3px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pnl2 .p2-lamps:hover { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.p2a-wins .w[data-bsel] { cursor: pointer; } .p2a-wins .w[data-bsel]:hover { background: rgba(255, 255, 255, 0.06); }
.pnl2 .p2-lamps .lp { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.2 var(--f-ui); color: var(--dim); white-space: nowrap; }
.pnl2 .p2-lamps .lp i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 122, 108, 0.85); }
.pnl2 .p2-lamps .lp.ok { color: var(--ink); }
.pnl2 .p2-lamps .lp.ok i { background: var(--ok); box-shadow: 0 0 8px rgba(183, 202, 191, 0.6); }
.pnl2 .p2-lamps .lp em { margin-left: 2px; font: 500 11px/1 var(--f-num); color: inherit; }
/* 拆解清單（住所換組件、其他建築進儲備） */
.pnl2 .p2-chill { margin: 0 0 6px; padding: 5px 9px; font-size: 12px; color: #dff3ff; background: repeating-linear-gradient(135deg, rgba(220, 240, 255, 0.12) 0 4px, rgba(143, 215, 255, 0.05) 4px 8px); box-shadow: inset 0 0 0 1px rgba(220, 240, 255, 0.35); border-radius: 2px; }
.pnl2 .p2-shel { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pnl2 .p2-shel li { position: relative; display: grid; grid-template-columns: minmax(96px, 1fr) auto auto auto; align-items: center; gap: 4px 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); border-radius: 3px; }
.pnl2 .p2-shel li.busy { box-shadow: inset 2px 0 0 var(--amb), inset 0 0 0 1px rgba(227, 170, 106, 0.3); }
.pnl2 .p2-shel .nm { font-weight: 500; min-width: 0; }
.pnl2 .p2-shel .nm small { display: block; font-weight: 400; font-size: 11px; color: var(--dim); }
.pnl2 .p2-shel .gn { font: 600 16px/1 var(--f-num); color: var(--amb2); white-space: nowrap; }
.pnl2 .p2-shel .gn.mt { font-size: 14px; color: var(--ink); }
.pnl2 .p2-shel .gn.wait { display: grid; font: 600 12.5px/1.25 var(--f-ui); color: #cfeaff; }
.pnl2 .p2-shel .gn small { margin-left: 3px; font: 400 10.5px/1 var(--f-ui); color: var(--dim); }
.pnl2 .p2-shel .gn.wait small { margin: 0; }
.pnl2 .p2-shel .tg { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.pnl2 .p2-shel .tg.bad { color: #ffb3a8; } .pnl2 .p2-shel .tg.on { color: var(--amb2); }
.pnl2 .p2-conf { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 6px; padding: 10px 12px; background: rgba(40, 24, 10, 0.78); box-shadow: inset 2px 0 0 var(--amb); border-radius: 2px; font-size: 12.5px; }
.pnl2 .p2-conf b { color: #ffe2bd; }
.pnl2 .p2-conf .lose { color: var(--dim); }
.pnl2 .p2-conf > div { display: flex; gap: 8px; flex-wrap: wrap; }
/* 燃料分段條 */
.pnl2 .p2-fstack { position: relative; margin: 26px 0 6px; }
.pnl2 .p2-fstack .p2-fbar { display: flex; height: 30px; gap: 2px; }
.pnl2 .p2-fstack .fs { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 7px; min-width: 0; overflow: hidden; background: rgba(143, 215, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.35); }
.pnl2 .p2-fstack .fs b { font: 500 10.5px/1.1 var(--f-ui); color: var(--ink); white-space: nowrap; }
.pnl2 .p2-fstack .fs.thin { min-width: 3px; padding: 0; }
.pnl2 .p2-fstack .fs em { font: 500 10.5px/1.1 var(--f-num); color: var(--ink); }
.pnl2 .p2-fstack .fs-mods { background: rgba(143, 215, 255, 0.24); }
.pnl2 .p2-fstack .fs-cryo { background: rgba(134, 198, 230, 0.3); }
.pnl2 .p2-fstack .fs-ice { background: repeating-linear-gradient(135deg, rgba(220, 240, 255, 0.34) 0 4px, rgba(143, 215, 255, 0.14) 4px 8px); box-shadow: inset 0 0 0 1px rgba(220, 240, 255, 0.6); }
.pnl2 .p2-fstack .fs-paint { background: rgba(227, 170, 106, 0.3); box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.6); }
.pnl2 .p2-fstack .have { position: absolute; top: -8px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--amb); box-shadow: 0 0 8px var(--amb); font-style: normal; }
.pnl2 .p2-fstack .have span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; font: 600 11px/1 var(--f-num); color: var(--amb2); white-space: nowrap; }
.pnl2 .p2-fstack .have.end span { left: auto; right: -1px; transform: none; }
/* 發射台（精煉廠）人手與施工中的分段 */
.pnl2 .p2-pad { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 12px; margin: 8px 0; padding: 10px 12px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); border-radius: 3px; }
.pnl2 .p2-pad .k { font-size: 12px; color: var(--dim); }
.pnl2 .p2-pad .n { font: 600 22px/1 var(--f-num); color: var(--ink); }
.pnl2 .p2-pad .n small { font-size: 13px; color: var(--dim); }
.pnl2 .p2-pad .st { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.pnl2 .p2-pad .nt { grid-column: 1 / -1; font-size: 11.5px; color: var(--dim); }
.pnl2 .p2-curseg { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 8px 0; font-size: 12.5px; }
.pnl2 .p2-curseg .n { font: 600 13px/1.3 var(--f-num); color: var(--amb2); }
.pnl2 .p2-curseg .p2-prog, .pnl2 .p2-curseg > span { grid-column: 1 / -1; }
.pnl2 .p2-curseg .bad { color: #ffb3a8; }
.pnl2 .p2-prog { height: 6px; margin: 4px 0 2px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; }
.pnl2 .p2-prog i { display: block; height: 100%; background: linear-gradient(90deg, #d99b55, #f1c58f); box-shadow: 0 0 10px rgba(227, 170, 106, 0.6); }
/* 每個窗口要多少（燃料工單） */
.pnl2 .p2-wn { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pnl2 .p2-wn li { display: grid; grid-template-columns: 32px 46px 1fr 1fr auto; gap: 8px; align-items: baseline; padding: 5px 8px; font: 500 12px/1.3 var(--f-num); background: rgba(255, 255, 255, 0.03); border-radius: 2px; }
.pnl2 .p2-wn li.bad span:nth-of-type(3) { color: #ffb3a8; }
.pnl2 .p2-wn li em { color: #cfeaff; font-size: 11px; }
/* 最後一夜 */
.pnl2 .p2-ln .big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pnl2 .p2-ln .big .n { font: 600 46px/1 var(--f-num); color: #fff; }
.pnl2 .p2-ln .big .of { font: 500 15px/1 var(--f-ui); color: var(--dim); }
.pnl2 .p2-ln .big .sub { width: 100%; font-size: 12px; color: var(--dim); }
.pnl2 .p2-ln .p2-dl { position: relative; margin: 12px 0 6px; height: 22px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden; }
.pnl2 .p2-ln .p2-dl span { position: absolute; left: 8px; top: 0; font: 600 12px/22px var(--f-num); z-index: 1; }
.pnl2 .p2-ln .p2-dl i { display: block; height: 100%; background: rgba(183, 202, 191, 0.32); }
.pnl2 .p2-ln .p2-dl.bad i { background: rgba(224, 87, 76, 0.55); }
.pnl2 .p2-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.pnl2 .p2-jobs li { display: flex; justify-content: space-between; gap: 10px; color: var(--dim); }
.pnl2 .p2-jobs b { font-weight: 500; color: var(--ink); }
.pnl2 .p2-jobs .bad { color: #ffb3a8; }
.pnl2 .p2-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.pnl2 .p2-faces .fc { display: grid; justify-items: center; gap: 2px; padding: 5px 2px; background: rgba(255, 255, 255, 0.03); border: 0; border-radius: 3px; color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font: inherit; }
.pnl2 .p2-faces .fc img, .pnl2 .p2-faces .fc .pt { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.pnl2 .p2-faces .fc b { font: 500 11px/1.1 var(--f-ui); }
.pnl2 .p2-faces .fc small { font-size: 10.5px; color: var(--dim); }
.pnl2 .p2-faces .fc.k-on, .pnl2 .p2-faces .fc.k-cryo { box-shadow: inset 0 0 0 1px rgba(183, 202, 191, 0.7); background: rgba(183, 202, 191, 0.1); }
.pnl2 .p2-faces .fc.k-left { box-shadow: inset 0 0 0 1px rgba(255, 122, 108, 0.45); }
.pnl2 .p2-faces .fc[disabled] { cursor: default; }
/* 交出判斷權之後的 NOVA 判斷（ark.ts 的 novaJudgement）放進圖板 */
.pnl2 .nj { margin-top: 10px; padding: 10px 12px; background: rgba(134, 198, 230, 0.07); box-shadow: inset 0 0 0 1px rgba(134, 198, 230, 0.3); border-radius: 3px; font-size: 12px; }
.pnl2 .nj .k { font: 500 11px/1 var(--f-num); color: var(--nova); margin-bottom: 6px; display: flex; justify-content: space-between; }
.pnl2 .nj .ok-l { display: grid; gap: 4px; }
.pnl2 .nj .ok-l span { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.pnl2 .nj .ok-l small { width: 100%; color: var(--dim); }
.pnl2 .nj .ic { width: 13px; height: 13px; }
.pnl2 .nj .ok .ic { color: var(--ok); } .pnl2 .nj .no .ic { color: var(--red); }
.pnl2 .nj .nsay { margin: 8px 0 0; color: var(--dim); line-height: 1.6; }
.pnl2 .confirm { font-size: 12px; }
/* 標題列右邊的分頁籤（有奧德賽七號、留守長夜才出現） */
.b2-head .p2-head { display: flex; min-width: 0; }
.b2-head .p2-tabs { display: flex; gap: 4px; }
.b2-head .p2-tabs button { display: inline-flex; align-items: baseline; gap: 6px; height: 32px; padding: 0 12px; font: 500 13px/32px var(--f-ui); color: var(--b2-chip); background: rgba(255, 255, 255, 0.04); border: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); cursor: pointer; white-space: nowrap; }
.b2-head .p2-tabs button .n { font: 500 11.5px/1 var(--f-num); color: inherit; }
.b2-head .p2-tabs button.on { color: #101418; background: #e8eef0; box-shadow: none; }
.b2-head .p2-tabs button:hover:not(.on) { background: rgba(255, 255, 255, 0.1); }

/* =========================================================
   方舟號（甲「工程看板」）：現在／船的藍圖＋工單／窗口卡
   ========================================================= */
.b2-p2a .b2-glass { background: radial-gradient(120% 90% at 40% 45%, rgba(20, 52, 74, 0.45), transparent 70%), linear-gradient(180deg, rgba(8, 20, 30, 0.82), rgba(5, 11, 17, 0.9)); }
.p2-ark { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "now now" "ship card" "low card"; gap: 12px 16px; }
.p2-ark .p2s-now { grid-area: now; } .p2-ark .p2s-ship { grid-area: ship; min-height: 0; } .p2-ark .p2s-card { grid-area: card; min-height: 0; overflow: hidden; } .p2-ark .p2s-low { grid-area: low; min-width: 0; }
.p2-ark .p2a-now { display: grid; grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 4px 16px; padding: 12px 16px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 3px 0 0 var(--tn, var(--cy)), inset 0 0 0 1px rgba(255, 255, 255, 0.08); border-radius: 3px; }
.p2a-now.t-go { --tn: var(--amb); } .p2a-now.t-warn { --tn: #f0b45a; } .p2a-now.t-bad { --tn: var(--red); } .p2a-now.t-calm { --tn: var(--ok); }
.p2a-now .p2-stp { grid-row: 1 / 3; padding: 7px 10px; font: 700 13px/1 var(--f-ui); letter-spacing: 0.24em; color: var(--tn, var(--cy)); background: color-mix(in srgb, var(--tn, var(--cy)) 14%, transparent); box-shadow: inset 0 0 0 2px var(--tn, var(--cy)); border-radius: 2px; transform: rotate(-3deg); white-space: nowrap; }
.p2a-now > b { font-size: 19px; font-weight: 700; letter-spacing: 0.02em; }
.p2a-now .why { grid-column: 2 / 4; grid-row: 2; color: var(--dim); font-size: 12.5px; }
.p2a-now > .p2b { grid-column: 4; grid-row: 1 / 3; }
.p2a-now .p2-lamps { grid-column: 3; grid-row: 1; justify-self: end; }
.p2-ark .p2a-bp { position: relative; height: 100%; min-height: 260px; display: grid; place-items: center; container-type: size; border-radius: 3px; overflow: hidden; }
.p2a-bp { background: radial-gradient(70% 80% at 46% 50%, rgba(30, 110, 140, 0.32), transparent 70%), linear-gradient(180deg, rgba(2, 10, 16, 0.7), rgba(2, 8, 12, 0.85)); box-shadow: inset 0 0 0 1px rgba(95, 227, 255, 0.28), inset 0 0 40px rgba(95, 227, 255, 0.08); }
.p2a-stage { position: relative; width: min(100cqw, (100cqh - 34px) * 1000 / 340); aspect-ratio: 1000 / 340; } /* 下面的標籤掛在船底下：留一點高度給它們 */
.p2a-ln .p2a-tag { max-width: min(210px, 18%); } /* 最後一夜的船區塊矮（底下是名單）：標籤寬一點、少折一行，船底下的標籤才不會被切（發射台好好的就不掛標籤，見 ark.ts callouts） */
.p2a-stage .p2a-ship { position: absolute; inset: 0; width: 100%; height: 100%; }
.p2a-tags { position: absolute; inset: 0; }
.p2a-tag { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: grid; gap: 2px; min-width: min(120px, 13%); max-width: min(210px, 16%); /* 寬度跟著船縮：船小的時候標籤多折一行，不會疊在一起 */ padding: 6px 10px 7px; text-align: left; color: var(--ink); background: rgba(6, 14, 20, 0.92); border: 0; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.35), inset 3px 0 0 var(--tg, rgba(143, 215, 255, 0.5)); cursor: pointer; font: inherit; }
.p2a-tag.bl { transform: translate(-50%, 0); }
.p2a-tag b { font: 600 12.5px/1.2 var(--f-ui); }
.p2a-tag span { font: 400 11.5px/1.35 var(--f-ui); color: var(--dim); }
.p2a-tag.tg-ok { --tg: var(--ok); } .p2a-tag.tg-act { --tg: var(--amb); } .p2a-tag.tg-go { --tg: var(--cy); } .p2a-tag.tg-bad { --tg: var(--red); } .p2a-tag.tg-lk { --tg: rgba(255, 255, 255, 0.25); }
.p2a-tag:hover { box-shadow: inset 0 0 0 1px rgba(191, 230, 255, 0.8), inset 3px 0 0 var(--tg), 0 0 16px rgba(143, 215, 255, 0.25); }
.p2a-tag.sel { background: rgba(14, 30, 42, 0.97); box-shadow: inset 0 0 0 1.5px #f1c58f, inset 3px 0 0 var(--tg), 0 0 22px rgba(227, 170, 106, 0.4); }
.p2a-wo { height: 100%; padding: 14px 16px 16px; background: linear-gradient(180deg, rgba(20, 26, 30, 0.86), rgba(10, 14, 17, 0.92)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 3px 0 rgba(227, 170, 106, 0.6); border-radius: 3px; overflow: auto; scrollbar-width: thin; scrollbar-gutter: stable; }
.p2a-wo header { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; margin-bottom: 8px; }
.p2a-wo header .no { grid-row: 1 / 3; align-self: center; padding: 4px 6px; font: 400 11px/1 var(--f-stencil); letter-spacing: 0.18em; color: var(--amb2); box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.6); }
.p2a-wo header b { font-size: 18px; }
.p2a-wo header small { font: 500 12px/1.2 var(--f-num); color: var(--dim); }
.p2a-wo header .led { grid-column: 1 / -1; justify-self: start; margin-top: 6px; padding: 3px 8px; font: 600 11.5px/1.2 var(--f-ui); color: #1b1206; background: var(--amb2); border-radius: 2px; }
.p2a-wo > .p2b { margin-top: 6px; width: 100%; }
.p2a-wo .bays { margin-top: 12px; }
.p2a-wo .voy { margin-top: 12px; }
/* 窗口卡（丙）：早走座位少、晚走燃料多 */
.p2a-wins { display: flex; gap: 8px; overflow-x: auto; scrollbar-gutter: stable; }
.p2a-wins .w { flex: 1; min-width: 150px; display: grid; align-content: start; gap: 4px; padding: 9px 11px 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); border-radius: 3px; font-size: 12px; }
.p2a-wins .w header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.p2a-wins .w header b { font: 600 15px/1 var(--f-num); }
.p2a-wins .w header span { font: 500 11.5px/1.2 var(--f-num); color: var(--dim); }
.p2a-wins .w header small { width: 100%; font: 500 11.5px/1.3 var(--f-num); color: var(--ink); }
.p2a-wins .w .f { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.p2a-wins .w .f b { font: 600 12.5px/1.3 var(--f-num); }
.p2a-wins .w .f i { font: 500 11px/1.3 var(--f-num); font-style: normal; color: #dff3ff; padding: 1px 5px; background: repeating-linear-gradient(135deg, rgba(220, 240, 255, 0.18) 0 4px, rgba(143, 215, 255, 0.06) 4px 8px); box-shadow: inset 0 0 0 1px rgba(220, 240, 255, 0.4); border-radius: 2px; }
.p2a-wins .w .f small { width: 100%; color: var(--dim); }
.p2a-wins .w .f.ok small { color: #cfe3d6; } .p2a-wins .w .f.bad small { color: #ffb3a8; }
.p2a-wins .w .c { color: var(--dim); }
.p2a-wins .w .k { padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--ink); line-height: 1.45; }
.p2a-wins .w.past { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } /* 過了的窗口：不用透明度（字會淡到讀不清），改成沒有底、字退一級 */
.p2a-wins .w.past header b, .p2a-wins .w.past header small { color: var(--dim); }
.p2a-wins .w.cur, .p2a-wins .w.nx { box-shadow: inset 0 0 0 1px rgba(227, 170, 106, 0.7), inset 0 2px 0 var(--amb); }
.p2a-low { max-height: 100%; overflow: auto; scrollbar-gutter: stable; }
.p2-ark .p2s-low:has(.p2a-low) { max-height: 34vh; overflow: auto; scrollbar-gutter: stable; } /* 最後一夜：名單照片牆在底下自己捲，不把船擠扁 */
.p2a-low h4:first-child { margin-top: 0; }
/* 奧德賽七號、留守長夜：沿用舊側欄的版面（ark2.css），放在板身裡；舊標頭的關閉鈕讓給圖板的 */
.pnl2.p2a-old { display: block; }
.p2a-old .p2s-old { max-width: 760px; margin: 0 auto 16px; padding: 6px 0 14px; background: rgba(10, 14, 16, 0.94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); border-radius: 4px; } /* 舊版面的字色是照深色側欄調的：給它一塊同樣深的底 */
#drawer .p2a-old .p2s-old > .panel-h .x { display: none; }
#drawer .p2a-old .p2s-old .go { position: static; background: none; }

/* =========================================================
   船（ark-ship.ts）：全息投影（使用者 10-11 挑定）；狀態類名見 ark-ship.ts 檔頭
   ========================================================= */
.shp text { font: 500 7.5px/1 var(--f-num); letter-spacing: 0.14em; text-anchor: middle; }
.shp .lead line { stroke-width: 1; }
.shp .pf .hatch { fill: none; stroke-width: 1.6; animation: shp-hatch 900ms linear infinite; }
.shp .scan { stroke-width: 1.6; animation: shp-scan 2.6s ease-in-out infinite alternate; }
.shp .s-open.can > .sh { animation: shp-dash 1.6s linear infinite; }
@keyframes shp-hatch { to { transform: translateX(8px); } }
@keyframes shp-scan { to { transform: translateX(var(--w, 40px)); } }
@keyframes shp-dash { to { stroke-dashoffset: -20; } }
@keyframes shp-beam { to { transform: translateX(1100px); } }
html.motion-reduce .shp *, html.motion-reduce .shp { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .shp * { animation: none !important; } }

/* 全息投影：青藍發光、半透明分層、掃描光 */
.shp { --ln: #6fe6ff; }
.shp .floor line { stroke: rgba(95, 227, 255, 0.12); stroke-width: 0.8; }
.shp .sm { fill: none; stroke: rgba(111, 230, 255, 0.32); stroke-width: 0.7; }
.shp .depth path { fill: rgba(95, 227, 255, 0.025); stroke: rgba(111, 230, 255, 0.2); stroke-width: 0.8; stroke-dasharray: 2 4; }
.shp .halo path { fill: none; stroke: rgba(95, 227, 255, 0.16); stroke-width: 9; }
.shp .halo2 path { fill: none; stroke: rgba(95, 227, 255, 0.07); stroke-width: 14; }
.shp .cp > .sh { fill: rgba(95, 227, 255, 0.03); stroke: rgba(111, 230, 255, 0.4); stroke-width: 1.1; stroke-dasharray: 5 4; }
.shp .cp.s-done > .sh { fill: rgba(95, 227, 255, 0.1); stroke: #b5f4ff; stroke-width: 1.4; stroke-dasharray: none; }
.shp .cp.s-active > .sh { fill: rgba(255, 204, 102, 0.07); stroke: #ffcc66; stroke-width: 1.4; stroke-dasharray: none; }
.shp .cp.s-open.can > .sh { stroke: #6fe6ff; stroke-dasharray: 6 4; }
.shp .cp.s-locked > .sh, .shp .cp.s-ghost > .sh { stroke: rgba(111, 230, 255, 0.2); fill: none; }
.shp .cp.s-need > .sh { stroke: #ff6b8a; stroke-dasharray: 4 3; fill: rgba(255, 107, 138, 0.1); }
.shp .cp.s-kit > .sh { stroke: #6fe6ff; stroke-dasharray: 2 3; fill: rgba(95, 227, 255, 0.08); }
.shp .hull.s-done > .sh { fill: rgba(95, 227, 255, 0.04); }
.shp .spn, .shp .keel, .shp .ring, .shp .win, .shp .kitm { fill: none; stroke: #8ff0ff; stroke-width: 0.9; opacity: 0.8; }
.shp .s-locked .ring, .shp .s-locked .win, .shp .s-open .ring, .shp .s-open .win { opacity: 0.3; }
.shp .seat circle { fill: #d8fbff; } .shp .seat circle.on { fill: #ffcc66; } .shp .seat circle.off { fill: none; stroke: rgba(216, 251, 255, 0.6); stroke-width: 1.1; }
.shp .cpod rect { fill: rgba(95, 227, 255, 0.06); stroke: rgba(111, 230, 255, 0.55); stroke-width: 0.9; } .shp .cpod.frz rect { fill: rgba(95, 227, 255, 0.3); stroke: #b5f4ff; } .shp .cpod circle, .shp .cpod .body { fill: #e6fdff; }
.shp .glow { fill: rgba(255, 204, 102, 0.5); }
.shp .pf rect { fill: rgba(255, 204, 102, 0.16); } .shp .pf .hatch { stroke: rgba(255, 214, 128, 0.65); } .shp .scan { stroke: #fff2c8; }
.shp .beam { animation: shp-beam 6s linear infinite; }
.shp .pad .deck, .shp .pad .tw { fill: rgba(95, 227, 255, 0.06); stroke: rgba(111, 230, 255, 0.55); stroke-width: 1; }
.shp .pad .leg, .shp .pad .cr, .shp .pad .sad, .shp .pad .arm { fill: none; stroke: rgba(111, 230, 255, 0.5); stroke-width: 1; }
.shp .pad .pipe { fill: none; stroke: rgba(255, 204, 102, 0.55); stroke-width: 1.4; stroke-dasharray: 3 2; }
.shp .pad .bcn { fill: #ff6b8a; }
.shp .pad-ghost > *, .shp .pad-build > * { stroke-dasharray: 4 4 !important; opacity: 0.55; }
.shp .tank .shell { fill: rgba(95, 227, 255, 0.05); stroke: #8ff0ff; stroke-width: 1.2; }
.shp .tank .lv { fill: rgba(255, 204, 102, 0.5); } .shp .tank.full .lv { fill: rgba(143, 255, 210, 0.45); }
.shp .tank .tkp { stroke: rgba(2, 10, 16, 0.85); stroke-width: 1.5; }
.shp .tank .tk, .shp .tank .legs { stroke: rgba(111, 230, 255, 0.6); stroke-width: 0.9; }
.shp .tank .need { stroke: #ffcc66; stroke-width: 1.5; stroke-dasharray: 3 3; }
.shp .tank .tkn { text-anchor: start; fill: #ffcc66; }
.shp .dims path { fill: none; stroke: rgba(111, 230, 255, 0.4); stroke-width: 0.8; }
.shp .dims .cl { stroke-dasharray: 2 5; }
.shp .dims text, .shp .hud text { fill: rgba(143, 240, 255, 0.75); }
.shp .hud text { text-anchor: start; } .shp .hud path { fill: none; stroke: rgba(111, 230, 255, 0.6); }
.shp .mk text { fill: rgba(143, 240, 255, 0.7); }
.shp .lead line { stroke: rgba(111, 230, 255, 0.5); } .shp .lead circle { fill: #b5f4ff; }
.shp .blk { fill: none; stroke: #8ff0ff; stroke-width: 0.8; opacity: 0.5; }
.shp .skin { fill: none; stroke: rgba(111, 230, 255, 0.3); stroke-width: 0.7; }
.shp .ext { fill: none; stroke: rgba(111, 230, 255, 0.35); stroke-width: 0.8; }
.shp .raster { fill: none; stroke: rgba(150, 240, 255, 0.07); stroke-width: 1; }
.shp .node circle { fill: #dffbff; }
.shp .pool { opacity: 0.9; }
.shp marker path { fill: rgba(191, 226, 255, 0.7); }
/* 手機：船縮成三百多像素寬，細節線、代號、尺寸、投影格線、引出線（標籤在船底下排成兩欄，不指著船）都收掉，只留外形與狀態；
   外形與狀態的線不跟著縮（vector-effect），維持 1px 以上，虛線也看得出是虛線 */
@media (max-width: 760px) {
  .shp .dims, .shp .mk, .shp .hud, .shp .node, .shp .floor, .shp .raster, .shp .depth, .shp .ext, .shp .sm, .shp .lead, .shp .blk, .shp .skin { display: none; }
  .shp .cp > .sh, .shp .tank .shell, .shp .tank .need, .shp .pad .deck, .shp .pad .tw, .shp .pad .cr, .shp .ring { vector-effect: non-scaling-stroke; }
  .shp .halo path { stroke-width: 14; } .shp .halo2 path { stroke-width: 20; }
  .shp .cp.s-open.can > .sh { stroke-width: 2; } .shp .cp.s-need > .sh { stroke-width: 1.6; } /* 可以開工（青虛線）、缺的（紅虛線）在小船上也看得出來 */
}

/* =========================================================
   NOVA（乙「一頁一件事」＋丙的推翻倒數）
   ========================================================= */
.b2-p2b-n .b2-glass { background: radial-gradient(80% 70% at 50% 30%, rgba(20, 44, 58, 0.45), transparent 70%), linear-gradient(180deg, rgba(10, 14, 18, 0.82), rgba(6, 8, 11, 0.9)); }
/* 寬畫面兩欄：左邊「現在」與「它改了你什麼」、右邊委託開關（同一頁、不用捲到最下面）與第二層；窄畫面一欄：現在 → 改了什麼 → 開關與第二層 */
.p2-nova { display: grid; grid-template-columns: minmax(0, 1fr) 350px; grid-template-rows: auto 1fr; grid-template-areas: "hero side" "chg side"; align-items: start; gap: 14px 20px; max-width: 1280px; margin: 0 auto; padding-bottom: 24px; }
.p2-nova .p2s-hero { grid-area: hero; } .p2-nova .p2s-chg { grid-area: chg; } .p2-nova .p2s-side { grid-area: side; }
.p2-nova .p2s-chg h4:first-child, .p2-nova .p2s-side h4:first-child { margin-top: 2px; }
.p2-nova .p2s-side .p2-doms { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1099px) { .p2-nova { display: flex; flex-direction: column; align-items: stretch; } .p2-nova .p2s-side .p2-doms { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }
.p2b-hero { position: relative; padding: 26px 30px; background: linear-gradient(100deg, var(--hg, rgba(134, 198, 230, 0.13)), rgba(255, 255, 255, 0.02) 55%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 4px 0 0 var(--hc, var(--nova)); border-radius: 4px; }
.p2b-hero.t-go { --hc: var(--amb); --hg: rgba(227, 170, 106, 0.14); } .p2b-hero.t-warn { --hc: #f0b45a; --hg: rgba(240, 180, 90, 0.12); }
.p2b-hero.t-bad { --hc: var(--red); --hg: rgba(255, 122, 108, 0.13); } .p2b-hero.t-calm { --hc: var(--nova); --hg: rgba(134, 198, 230, 0.12); }
.p2b-hero .p2-eb { font: 400 11px/1 var(--f-stencil); letter-spacing: 0.24em; color: var(--hc); }
.p2b-hero h2 { margin: 10px 0 8px; padding-right: 240px; font: 700 28px/1.25 var(--f-ui); letter-spacing: 0.02em; color: #fff; }
.p2b-hero > p { margin: 0 0 6px; max-width: 640px; font-size: 14px; line-height: 1.7; color: var(--dim); }
.p2b-hero .p2b.pri { min-height: 46px; padding: 0 24px; font-size: 15px; }
.p2b-hero .p2-trust { position: absolute; right: 26px; top: 22px; }
.pnl2 .p2-trust { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; min-width: 200px; }
.pnl2 .p2-trust .n { grid-row: 1 / 3; font: 600 30px/1 var(--f-num); color: #dff3ff; text-shadow: 0 0 16px rgba(134, 198, 230, 0.4); }
.pnl2 .p2-trust.bad .n { color: #ffb3a8; text-shadow: none; }
.pnl2 .p2-trust .m { font-size: 12px; color: var(--dim); }
.pnl2 .p2-trust .m em { margin-left: 6px; font: 500 11px/1 var(--f-num); color: var(--nova); } .pnl2 .p2-trust .m em.dn { color: #ffb3a8; }
.pnl2 .p2-trust .sc { position: relative; height: 4px; background: linear-gradient(90deg, rgba(255, 122, 108, 0.5) 0 30%, rgba(255, 255, 255, 0.16) 30% 75%, rgba(134, 198, 230, 0.55) 75%); border-radius: 2px; }
.pnl2 .p2-trust .sc i { position: absolute; top: -4px; width: 3px; height: 12px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 6px #fff; }
.pnl2 .p2-trust .sc b { position: absolute; top: -2px; width: 1px; height: 8px; background: rgba(255, 255, 255, 0.5); }
/* 它改了你什麼：還能推翻的寫還剩多久（倒數條＋推翻鈕） */
.pnl2 .p2-chg { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pnl2 .p2-chg li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 12px; background: rgba(255, 255, 255, 0.035); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(134, 198, 230, 0.16); }
.pnl2 .p2-chg li.open { box-shadow: inset 2px 0 0 var(--nova), inset 0 0 0 1px rgba(134, 198, 230, 0.45); background: rgba(134, 198, 230, 0.07); }
.pnl2 .p2-chg li.act { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pnl2 .p2-chg li.hold { box-shadow: inset 2px 0 0 var(--amb), inset 0 0 0 1px rgba(227, 170, 106, 0.3); } .pnl2 .p2-chg .fin.hold { color: #f3d3a8; } /* 你調過人手、NOVA 暫時不碰：琥珀＝你的手，不是它的 */
.pnl2 .p2-chg .when { grid-column: 1 / -1; font: 500 11px/1.2 var(--f-num); letter-spacing: 0.06em; color: var(--nova); }
.pnl2 .p2-chg p { grid-column: 1 / 2; margin: 0; line-height: 1.55; }
.pnl2 .p2-chg .mugs { grid-column: 2; grid-row: 2; display: flex; gap: 2px; align-self: start; }
.pnl2 .mug { display: inline-block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(134, 198, 230, 0.5); }
.pnl2 .mug img, .pnl2 .mug svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pnl2 .p2-chg .lnk { grid-column: 1; justify-self: start; }
.pnl2 .p2-chg .tl { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.pnl2 .p2-chg .cd { flex: 1; display: flex; align-items: center; gap: 8px; font: 500 12px/1.2 var(--f-num); color: #cdeefc; }
.pnl2 .p2-chg .cd i { display: block; height: 3px; max-width: 140px; background: var(--nova); box-shadow: 0 0 6px var(--nova); }
.pnl2 .p2-chg .cd b { font-weight: 600; }
.pnl2 .p2-chg .fin { font-size: 11.5px; color: var(--faint); }
.pnl2 .p2-chg .fin .ic { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.pnl2 .p2-doms { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.pnl2 .p2-dom { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: 9px 12px; text-align: left; color: var(--ink); background: rgba(255, 255, 255, 0.035); border: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); cursor: pointer; font: inherit; }
.pnl2 .p2-dom .p2-sw { grid-row: 1 / 3; position: relative; width: 34px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.pnl2 .p2-dom .p2-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #9aa6ab; transition: left 160ms, background 160ms; }
.pnl2 .p2-dom.on .p2-sw { background: rgba(134, 198, 230, 0.35); box-shadow: inset 0 0 0 1px var(--nova); }
.pnl2 .p2-dom.on .p2-sw::after { left: 19px; background: #dff3ff; box-shadow: 0 0 8px var(--nova); }
.pnl2 .p2-dom b { font-weight: 500; font-size: 13px; }
.pnl2 .p2-dom small { font-size: 11px; line-height: 1.4; color: var(--dim); }
.pnl2 .p2-dom.on { box-shadow: inset 0 0 0 1px rgba(134, 198, 230, 0.55); background: rgba(134, 198, 230, 0.08); }
.pnl2 .p2-dom:hover:not([disabled]) { background: rgba(255, 255, 255, 0.07); }
.pnl2 .p2-dom[disabled] { cursor: default; opacity: 0.6; }
.pnl2 .p2b-mores details.more .p2-dom { width: 100%; margin-top: 8px; }
.pnl2 .p2-fx { margin: 6px 0 8px; padding-left: 18px; color: var(--dim); font-size: 12px; line-height: 1.7; }

/* =========================================================
   窄畫面：一欄往下捲（整塊板一起捲，裡面的卡片不各自捲）
   ========================================================= */
/* 平板、矮視窗（手機橫放）與手機：方舟改成一欄往下捲（船縮成一張圖、標籤排在底下，不會擠成一團） */
@media (max-width: 1099px), (max-height: 640px) {
  .pnl2.p2-ark { display: flex; flex-direction: column; gap: 12px; }
  .pnl2.p2-ark .p2s { flex: none; min-height: 0; }
  .p2-ark .p2s-card, .p2-ark .p2a-wo { height: auto; overflow: visible; }
  .p2-ark .p2a-bp { min-height: 0; height: auto; display: block; container-type: normal; }
  .p2a-stage { width: 100%; }
  .p2a-stage .p2a-ship { position: relative; height: auto; }
  .p2a-ship .lead { display: none; }
  .p2a-tags { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 0 8px 26px; }
  .p2a-tag, .p2a-tag.bl { position: static; transform: none; max-width: none; min-width: 0; }
  .p2a-wins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .p2a-wins .w { min-width: 0; }
  .p2a-low { max-height: none; overflow: visible; }
  .p2-ark .p2s-low:has(.p2a-low) { max-height: none; overflow: visible; }
  .p2a-ln .p2s-card { order: 1; } .p2a-ln .p2s-low { order: 2; } .p2a-ln .p2s-ship { order: 3; } /* 最後一夜：登船與名單在前，船在最後 */
}
/* 手機（≤ 760） */
@media (max-width: 760px) {
  .pnl2 { inset: 0 10px 10px; }
  .p2-ark .p2a-now { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
  .p2a-now .p2-stp { grid-row: auto; justify-self: start; }
  .p2a-now .why, .p2a-now > .p2b, .p2a-now .p2-lamps { grid-column: auto; grid-row: auto; justify-self: stretch; }
  .p2a-now > b { font-size: 17px; }
  .p2a-tags, .p2a-wins { grid-template-columns: 1fr 1fr; }
  .pnl2 .p2-shel li { grid-template-columns: minmax(0, 1fr) auto auto; } .pnl2 .p2-shel .tg { grid-column: 1 / 3; }
  .b2-head .p2-head { order: 5; width: 100%; } /* 分頁籤排到標題下面一整列，關閉鈕留在標題那一列的右邊 */
  .b2-head .p2-tabs { flex-wrap: wrap; }
  .b2-head .p2-tabs button { height: 30px; padding: 0 9px; font-size: 12.5px; line-height: 30px; }
  .p2b-hero { padding: 18px 16px; }
  .p2b-hero h2 { padding-right: 0; font-size: 21px; }
  .p2b-hero .p2-trust { position: static; margin: 10px 0 4px; }
  .pnl2 .p2-doms { grid-template-columns: minmax(0, 1fr); }
  .p2a-old .p2s-old { padding-top: 0; }
  .pnl2 .lnk { display: inline-flex; align-items: center; min-height: 28px; } /* 觸控：文字連結也要 ≥ 24px 高 */
  .p2a-now > .p2b, .p2b-hero .p2-acts .p2b { min-height: 44px; } /* 「現在」的主按鈕：手指一按就中 */
  .pnl2 .p2-chg .tl { flex-wrap: wrap; } .pnl2 .p2-chg .cd { flex: 1 1 100%; } .pnl2 .p2-chg .cd b { white-space: nowrap; } .pnl2 .p2-chg .tl .p2b { min-height: 36px; } /* 倒數那一句不被推翻鈕擠成兩行 */
}
/* 方舟號與 NOVA 圖板（第 110–111 題）：選擇器全部掛在 .pnl2（板身）、.b2-p2a／.b2-p2b-n（外殼）底下 */
/* =========================================================
   歸航 HOMEWARD — 試玩版的序號門檻（ui/beta-gate.ts）、首頁的「鳴謝」（ui/credits.ts）、首頁角落的版本（ui/title.ts）。
   和首頁、設定視窗同一種語言：場景退後（暗＋霜玻璃模糊）、沒有框、只有細線；字是 HUD 的 Noto Sans TC 與液晶等寬字。
   ========================================================= */
:root {
  /* 玩家自己打的名字（鳴謝清單、暱稱輸入框）：可能是任何中日韓文字。Noto Sans TC 在 index.html；JP／KR／SC 打開畫面時才補載（credits.ts 的 loadCjkFonts）；
     離線載不到時，後面是各平台內建的中日韓字型 */
  --f-names: "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "PingFang TC", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Apple SD Gothic Neo",
    "Microsoft JhengHei", "Yu Gothic", "Meiryo", "Malgun Gothic", "Noto Sans CJK TC", "Noto Sans CJK JP", "Noto Sans CJK KR", sans-serif;
}

/* ---------- 首頁右下角落的版本：小字、不搶畫面（跟上面的模擬編號同一種等寬字） ---------- */
#title .tt-ver { right: 64px; bottom: 28px; font: 400 10.5px/1.4 var(--f-num); letter-spacing: 0.06em; color: rgba(214, 226, 232, 0.8); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95); pointer-events: none; }
#title.is-new .tt-ver { display: none; } /* 新的模擬：中間的子畫面在手機橫放會伸到右下 */
@media (max-width: 760px) { #title .tt-ver { right: 20px; bottom: 16px; } }

/* ---------- 共同：場景退後的整頁 ---------- */
#beta.screen, #credits.screen {
  --cd-fg: #f5f8fa; --cd-fg-2: #e6ecef; --cd-fg-3: #cfd7dc; --cd-lcd: #e2efe8; --cd-hair: rgba(255, 255, 255, 0.2);
  color: var(--cd-fg); background: rgba(3, 5, 9, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overscroll-behavior: contain;
  grid-template-columns: minmax(0, 1fr); justify-items: center; /* 一欄撐滿再置中：用 justify-content 置中的話欄寬變成「內容多寬」，width 的百分比算不出來（手機的鳴謝只剩 220px） */
}

/* ---------- 序號門檻：蓋在首頁（連載入畫面，80）上面，關不掉 ---------- */
#beta.screen { z-index: 90; place-items: center; }
.bg-col { width: min(520px, 100%); margin: auto 0; padding: 4px 4px 20px; animation: cd-in 360ms var(--ease-out) both; }
.bg-eb, .cr-eb { margin: 0; font: 400 11px/1 var(--f-num); letter-spacing: 0.26em; color: var(--cd-fg-3); }
#beta h2, #credits h2 { margin: 10px 0 12px; font: 700 30px/1.15 var(--f-ui); letter-spacing: 0.06em; color: #f1f4f5; }
.bg-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: var(--cd-fg-2); }
.bg-note { margin: 0 0 14px; padding: 8px 12px; font-size: 13.5px; line-height: 1.6; color: #f4dcb6; box-shadow: inset 2px 0 0 var(--cd-amber); background: rgba(217, 162, 94, 0.1); }
.bg-steps { display: flex; gap: 22px; margin: 0; padding: 12px 0; list-style: none; border-top: 1px solid var(--cd-hair); }
.bg-steps li { display: flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--f-ui); letter-spacing: 0.08em; color: rgba(207, 215, 220, 0.72); }
.bg-steps li i { width: 18px; height: 18px; display: grid; place-items: center; font: 600 10px/1 var(--f-num); font-style: normal; box-shadow: inset 0 0 0 1px var(--cd-hair); }
.bg-steps li.on { color: #fff; } .bg-steps li.on i { color: #101418; background: #d7dde1; box-shadow: none; }
.bg-steps li.done { color: var(--cd-lcd); }
.bg-form { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--cd-hair); }
.bg-lbl { font: 500 12px/1 var(--f-ui); letter-spacing: 0.16em; color: var(--cd-fg-3); }
.bg-key { display: flex; align-items: center; height: 50px; background: rgba(6, 9, 12, 0.5); box-shadow: inset 0 0 0 1px var(--cd-hair); }
.bg-key:focus-within, .bg-text:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.bg-key span { padding: 0 2px 0 14px; font: 600 18px/1 var(--f-num); letter-spacing: 0.12em; color: var(--cd-lcd); }
.bg-key input { flex: 1; min-width: 0; height: 100%; padding: 0 12px 0 0; background: none; border: 0; outline: none; color: #fff; font: 500 18px/1 var(--f-num); letter-spacing: 0.12em; text-transform: uppercase; }
.bg-key input::placeholder, .bg-text::placeholder { color: rgba(207, 215, 220, 0.42); }
.bg-text { height: 48px; padding: 0 14px; background: rgba(6, 9, 12, 0.5); border: 0; outline: none; box-shadow: inset 0 0 0 1px var(--cd-hair); color: #fff; font: 500 17px/1 var(--f-names); }
.bg-sub { margin-top: -2px; font-size: 12.5px; line-height: 1.6; color: var(--cd-fg-3); }
.bg-chk { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--cd-fg-2); cursor: pointer; }
.bg-chk input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #d7dde1; cursor: pointer; }
.bg-chk a { color: var(--cd-lcd); text-underline-offset: 3px; }
.bg-err { min-height: 1.5em; font-style: normal; font-size: 13px; line-height: 1.5; color: #ffaea6; }
.bg-err:empty { min-height: 0; }
.bg-row { display: flex; gap: 10px; margin-top: 4px; }
.bg-go { height: 46px; padding: 0 28px; font: 700 15px/1 var(--f-ui); letter-spacing: 0.08em; color: #101418; background: #d7dde1; border: 0; cursor: pointer; }
.bg-go:hover:not(:disabled), .bg-go:focus-visible { background: #fff; outline: none; }
.bg-go:disabled { opacity: 0.38; cursor: not-allowed; }
.bg-hint { margin: 16px 0 0; font-size: 12.5px; color: var(--cd-fg-3); }
.bg-keyok { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--cd-fg-3); }
.bg-keyok b { font: 600 15px/1 var(--f-num); letter-spacing: 0.1em; color: var(--cd-lcd); }
.bg-link { padding: 0; font: inherit; color: var(--cd-fg-2); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bg-welcome { display: grid; gap: 10px; padding: 20px 0 8px; border-top: 1px solid var(--cd-hair); }
.bg-welcome span { font: 500 12px/1 var(--f-ui); letter-spacing: 0.16em; color: var(--cd-lcd); }
.bg-welcome b { font: 700 24px/1.3 var(--f-names); color: #f1f4f5; overflow-wrap: anywhere; }
.bg-welcome small { font-size: 13.5px; color: var(--cd-fg-2); }
/* 隱私權政策：同一頁上再蓋一層，裡面是伺服器上唯一的那份（server/beta/public/privacy/） */
.bg-pol { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); background: rgba(3, 5, 9, 0.88); }
.bg-pol-in { width: min(760px, 100%); height: min(86vh, 920px); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; justify-items: end; }
.bg-pol-in iframe { width: 100%; height: 100%; border: 0; background: #05070b; box-shadow: inset 0 0 0 1px var(--cd-hair); }

/* ---------- 鳴謝（首頁選單）：比設定視窗晚一層（55 是 #modal），蓋在首頁（50）上 ---------- */
#credits.screen { z-index: 54; align-items: start; }
.cr-col { width: min(760px, 100%); margin: auto 0; padding: 4px 4px 24px; animation: cd-in 360ms var(--ease-out) both; }
.cr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cr-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--cd-fg-2); background: none; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--cd-hair); }
.cr-x:hover, .cr-x:focus-visible { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); outline: none; }
.cr-x .ic { width: 18px; height: 18px; }
.cr-sec { padding: 16px 0 18px; border-top: 1px solid var(--cd-hair); }
.cr-sec h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; font: 500 12px/1 var(--f-ui); letter-spacing: 0.16em; color: var(--cd-fg-3); }
.cr-n { font: 400 11px/1 var(--f-num); letter-spacing: 0.06em; }
.cr-author { margin: 0; font: 700 24px/1.4 var(--f-story); letter-spacing: 0.06em; color: #f1ece2; }
.cr-names { margin: 0; padding: 0; list-style: none; columns: 3 170px; column-gap: 28px; }
.cr-names li { padding: 3px 0; font: 500 15.5px/1.6 var(--f-names); color: var(--cd-fg); break-inside: avoid; overflow-wrap: anywhere; }
.cr-note { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--cd-fg-2); }
.cr-names + .cr-note { margin-top: 12px; }
.cr-ver { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--cd-hair); font: 400 11px/1 var(--f-num); letter-spacing: 0.06em; color: var(--cd-fg-3); }

@media (max-width: 760px) {
  #beta h2, #credits h2 { font-size: 26px; }
  .bg-steps { gap: 14px; }
  .bg-go { flex: 1; }
  .cr-names { columns: 2; column-gap: 18px; }
  .cr-author { font-size: 22px; }
}
@media (max-height: 520px) { /* 手機橫放：門檻往上貼、間距壓緊 */
  #beta.screen { place-items: start center; }
  #beta h2 { margin: 6px 0 6px; font-size: 22px; } .bg-lead { margin-bottom: 8px; } .bg-steps { padding: 8px 0; } .bg-form { padding-top: 10px; gap: 8px; }
}
:root {
  --plate: var(--glass-strong);
  --plate-solid: #0c1322;
  --plate-2: #131c31;
  --plate-3: #1a2540;
  --line-soft: rgba(124, 165, 225, 0.16);
  --top-h: 78px;
}
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--void); color: var(--text); }
body { font-family: var(--f-ui); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
#app { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- 共用面板 ---------- */
.plate {
  background:
    linear-gradient(var(--ice), var(--ice)) top left / 12px 1px no-repeat,
    linear-gradient(var(--ice), var(--ice)) top left / 1px 12px no-repeat,
    linear-gradient(var(--ice), var(--ice)) bottom right / 12px 1px no-repeat,
    linear-gradient(var(--ice), var(--ice)) bottom right / 1px 12px no-repeat,
    var(--plate);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border: 1px solid currentColor; border-radius: 99px; font-size: 11px; line-height: 16px; white-space: nowrap; }
.bar { position: relative; height: 6px; background: rgba(124, 165, 225, 0.12); overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--ice); }

/* 側欄（#drawer）：CD 的冷面板（.panel）；窄的建築檢視是 #drawer.ins（樣稿 cd-inspect），其他分頁暫時用同一個框（方舟、船員之後照樣稿換）。
   裡面的舊內容（.sec／.card／.kv／.btn…）靠下面「舊 token 對應」整批換成 CD 的灰綠＋紅＋琥珀，不用逐個面板改色。 */
#drawer { z-index: 14; right: 22px; top: 62px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); width: 384px; display: flex; flex-direction: column; opacity: var(--panel-dim, 1); }
#drawer[hidden] { display: none !important; }
#drawer .dh { order: -1; /* DOM 上排在內容後面：檢視面板把這列藏起來、用內容裡的標題與關閉鈕，裡面的關閉鈕才是 querySelector 的第一個 */ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--cd-hair); }
#drawer .dh h2 { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: #eef2f4; }
#drawer .db { flex: 1; overflow-y: auto; padding: 12px 14px 18px; font-size: 13px; overscroll-behavior: contain; }
#drawer .db::-webkit-scrollbar { width: 6px; } #drawer .db::-webkit-scrollbar-thumb { background: var(--cd-hair); }
/* 舊 token 對應：drawer 裡舊面板用的是冷藍系統（--ice、--ember 當主色），這裡整批換成 CD 的規則——顏色只剩紅（危險）與琥珀（人的溫暖），其餘灰綠灰白。
   選單／設定／說明三個視窗（樣稿沒有它們，結構沿用舊的 .plate）也套同一組，才不會在新畫面上冒出一塊藍的 */
#drawer, #modal .plate { --text: var(--cd-fg); --text-2: var(--cd-fg-2); --text-3: var(--cd-fg-3); --line: var(--cd-hair); --line-2: rgba(255, 255, 255, 0.24); --line-soft: rgba(255, 255, 255, 0.07);
  --ice: #d3dbe0; --ember: #e8edf0; --ok: var(--cd-lcd); --warn: var(--cd-amber); --alert: var(--cd-red); --nova: var(--cd-radio); --plate-solid: rgba(6, 9, 12, 0.9); --plate-2: rgba(255, 255, 255, 0.05); --plate-3: rgba(255, 255, 255, 0.09); }
#drawer .btn, #modal .plate .btn { clip-path: none; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--cd-hair); color: var(--cd-fg); }
#drawer .btn:hover, #modal .plate .btn:hover { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: #fff; }
#drawer .btn.ember, #drawer .btn.primary, #drawer .btn.ice, #drawer .btn.on, #modal .plate .btn.ember, #modal .plate .btn.primary, #modal .plate .btn.ice, #modal .plate .btn.on { color: #101418; background: #d7dde1; box-shadow: none; font-weight: 700; }
#drawer .btn.ember:hover, #drawer .btn.primary:hover, #drawer .btn.ice:hover, #drawer .btn.on:hover, #modal .plate .btn.ember:hover, #modal .plate .btn.primary:hover, #modal .plate .btn.ice:hover, #modal .plate .btn.on:hover { background: #eef2f4; color: #101418; box-shadow: none; }
#drawer .btn.danger, #modal .plate .btn.danger { color: #ffb0a6; background: transparent; box-shadow: inset 0 0 0 1px rgba(224, 87, 76, 0.55); }
#drawer .btn.danger:hover, #modal .plate .btn.danger:hover { background: rgba(224, 87, 76, 0.14); box-shadow: inset 0 0 0 1px var(--cd-red); color: #ffb0a6; }
#drawer .card, #drawer .toggle, #drawer .list-row, #drawer .cool, #modal .plate .toggle { background: rgba(255, 255, 255, 0.03); }
#drawer .card.active { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.07); }
#modal .plate { background: var(--cd-panel-solid); border: 0; box-shadow: inset 0 0 0 1px var(--cd-hair), 0 10px 30px rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px) saturate(0.7); -webkit-backdrop-filter: blur(10px) saturate(0.7); }
#drawer .confirm { border-color: rgba(224, 87, 76, 0.5); background: rgba(90, 20, 20, 0.28); }
#drawer .tabs button.on { color: #fff; border-bottom-color: #fff; }
.sec { margin: 0 0 16px; }
.sec > h4 { margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-2); letter-spacing: 0.04em; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12.5px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; min-width: 0; }
.desc { color: var(--text-2); font-size: 12.5px; margin: 0 0 10px; line-height: 1.65; }
.hdr { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.hdr img { width: 52px; height: 52px; background: rgba(124, 165, 225, 0.06); border: 1px solid var(--line); }
.hdr h3 { margin: 0; font-size: 17px; }
.hdr .meta { font-size: 11.5px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; align-items: center; }
.staff { display: flex; align-items: center; gap: 8px; }
.staff .n { font-family: var(--f-mono); font-size: 18px; min-width: 64px; text-align: center; }
.dots { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 8px; }
.dots i { width: 9px; height: 9px; border: 1px solid var(--text-3); }
.dots i.on { background: var(--ice); border-color: var(--ice); }
.dots i.eng.on { background: var(--c-parts); border-color: var(--c-parts); }
.dots i.drone.on { background: var(--ok); border-color: var(--ok); }
.dots i.sick.on { background: var(--warn); border-color: var(--warn); }
.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(124, 165, 225, 0.04); margin-top: 8px; }
.toggle b { font-size: 12.5px; } .toggle small { display: block; color: var(--text-3); font-size: 11px; }
.confirm { border: 1px solid #7a2a26; background: rgba(90, 20, 20, 0.25); padding: 10px; margin-top: 8px; }
.card { border: 1px solid var(--line); background: rgba(124, 165, 225, 0.035); padding: 10px 11px; display: grid; gap: 6px; }
.card + .card { margin-top: 6px; }
.card .t { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card .t b { font-size: 13.5px; }
.card .c { font-size: 12px; color: var(--text-2); line-height: 1.55; }
.card .f { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.card.done { opacity: 0.72; }
.card.active { border-color: var(--ember); background: rgba(255, 174, 77, 0.06); }
.card.locked { opacity: 0.72; }
.card.signed { border-color: rgba(127, 224, 164, 0.5); }
.cost { display: inline-flex; gap: 8px; font-family: var(--f-mono); font-size: 11.5px; color: var(--text-2); }
.cost span { display: inline-flex; align-items: center; gap: 3px; }
.cost .lack { color: #ff9a90; } /* 深色面板上的紅小字：--alert（#e0574c）只有 2.7–3.1:1 */
.cost .ic { width: 12px; height: 12px; }
.fxl { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.fxl li { font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); color: var(--text-2); }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: -4px 0 12px; }
.tabs button { flex: 1; padding: 7px 4px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-3); cursor: pointer; font-size: 12.5px; }
.tabs button.on { color: var(--ember); border-bottom-color: var(--ember); }
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.path-col h5 { margin: 0 0 6px; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.path-col.nova h5 { color: var(--nova); } .path-col.human h5 { color: var(--ember); }
.path-col .card { padding: 8px; }
.path-col .card .t b { font-size: 12.5px; }
.cool { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--line); color: var(--text-2); font-size: 12px; margin-bottom: 12px; }
.starmap { width: 100%; aspect-ratio: 1; max-width: 100%; display: block; background: radial-gradient(circle at 50% 50%, rgba(124, 201, 255, 0.07), transparent 65%); border: 1px solid var(--line); }
.starmap .node { cursor: pointer; }
.list-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.list-row:last-child { border-bottom: 0; }
.list-row .sub { display: block; font-size: 11px; color: var(--text-3); }
.roster { display: grid; gap: 0; }
.roster .p { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.roster .p .sub { color: var(--text-3); font-size: 11px; }
.rtag { font-family: var(--f-mono); font-size: 10px; padding: 0 4px; border: 1px solid currentColor; margin-right: 4px; }
.rtag.T { color: var(--ice); } .rtag.E { color: var(--c-parts); } .rtag.D { color: var(--ok); } .rtag.C { color: var(--ember); }
.log { display: grid; gap: 0; font-size: 12px; } /* 日誌本身改成圖板（ui/panels/log.ts、styles/logbook.css）；這一條還留著：NOVA 字幕的「L 回看」與個人卡的經歷清單也掛 .log */
.ark-svg { width: 100%; height: auto; display: block; margin-bottom: 10px; }
.reqs { display: grid; gap: 4px; margin: 8px 0 12px; }
.reqs div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.reqs .ic { width: 14px; height: 14px; }
.big-launch { width: 100%; min-height: 46px; font-size: 16px; font-weight: 700; letter-spacing: 0.1em; }


/* ---------- 事件視窗 ---------- */
.overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: calc(var(--gut) + env(safe-area-inset-top, 0px)) var(--gut) calc(var(--gut) + env(safe-area-inset-bottom, 0px)); background: rgba(3, 5, 12, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.overlay[hidden] { display: none !important; }
.modal { width: min(580px, 100%); max-height: 100%; overflow-y: auto; padding: 0; animation: min .3s ease-out; }
@keyframes min { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.modal .strip { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 22px; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--text-3); }
.modal .strip .k { color: var(--ice); }
.modal.k-story .strip .k, .modal.k-petition .strip .k { color: var(--ember); }
.modal.k-crisis .strip .k { color: var(--alert); }
.modal.k-crisis { border-color: #6b2622; }
.modal .body { padding: 18px 22px 8px; }
.modal h2 { margin: 0 0 12px; font-family: var(--f-story); font-weight: 900; font-size: 27px; letter-spacing: 0.04em; color: #f3e6d2; text-wrap: balance; }
.modal .story p { font-family: var(--f-story); font-size: 16px; line-height: 1.9; margin: 0 0 12px; color: #e3e9f2; }
.modal.k-nova .story p { font-family: var(--f-mono); font-size: 14px; line-height: 1.8; color: #d2ecff; }
.choices { display: grid; gap: 8px; padding: 6px 22px 22px; }
.choice { display: grid; gap: 2px; text-align: left; padding: 10px 14px; border: 1px solid var(--line); background: rgba(124, 165, 225, 0.05); cursor: pointer; }
.choice:hover:not(:disabled) { border-color: var(--ember); background: rgba(255, 174, 77, 0.08); }
.choice:disabled { opacity: 0.6; cursor: not-allowed; }
.choice b { font-family: var(--f-story); font-size: 15.5px; font-weight: 700; }
.choice small { font-family: var(--f-mono); font-size: 11.5px; color: var(--text-2); }

/* ---------- 標題 / 結局 / 選單 ---------- */
.screen { position: fixed; inset: 0; z-index: 50; display: grid; overflow-y: auto; padding: calc(28px + env(safe-area-inset-top, 0px)) var(--gut) calc(28px + env(safe-area-inset-bottom, 0px)); background: radial-gradient(ellipse at 70% 40%, rgba(6, 9, 18, 0.35), rgba(6, 9, 18, 0.88) 70%); }
.screen[hidden] { display: none !important; }
.end-wrap { margin: auto; width: min(760px, 100%); padding: 30px 32px; }
.end-wrap .eyebrow { margin-bottom: 8px; }
.end-wrap h1 { margin: 0 0 18px; font-family: var(--f-story); font-weight: 900; font-size: clamp(36px, 6vw, 58px); letter-spacing: 0.06em; color: #f6eadb; text-wrap: balance; }
.end-wrap .story p { font-family: var(--f-story); font-size: 16.5px; line-height: 1.95; margin: 0 0 14px; color: #e3e9f2; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 20px 0; }
.stats div { background: var(--plate-solid); padding: 12px; display: grid; gap: 2px; }
.stats b { font-family: var(--f-mono); font-size: 24px; font-weight: 500; }
.stats span { font-size: 11.5px; color: var(--text-3); }
.grade { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.grade .g { font-family: var(--f-stencil); font-size: 64px; line-height: 1; color: var(--ember); }
.names { font-size: 12.5px; color: var(--text-2); line-height: 1.8; }
.menu-box { width: min(380px, 100%); padding: 20px; display: grid; gap: 8px; }
.menu-box h2 { margin: 0 0 6px; font-size: 18px; }
.menu-box .btn { min-height: 40px; justify-content: flex-start; }
@media (max-height: 520px) { .menu-box { width: min(560px, 100%); max-height: 100%; overflow-y: auto; grid-template-columns: 1fr 1fr; } .menu-box h2, .menu-box .mpanels { grid-column: 1 / -1; } } /* 手機橫放（高 390）：一欄排不下，「回到標題畫面」在螢幕外（版面巡檢抓到） */
.help { width: min(720px, 100%); max-height: 100%; overflow-y: auto; padding: 22px 26px; }
.help h2 { margin: 0 0 4px; font-family: var(--f-story); font-size: 24px; }
.help h3 { margin: 18px 0 6px; font-size: 14px; color: var(--ember); }
.help p, .help li { font-size: 13px; color: var(--text-2); line-height: 1.75; }
.help ul { margin: 0; padding-left: 18px; }
.help kbd { font-family: var(--f-mono); font-size: 11px; padding: 0 5px; border: 1px solid var(--line); background: var(--plate-2); }
/* ---------- 設定面板 ---------- */
#modal.overlay { z-index: 55; } /* 要壓過標題畫面（.screen 的 50）：標題上的「設定」「遊戲說明」才看得到 */
/* 設定視窗的樣式搬到 styles/settings.css（和首頁同一種語言） */
.help .keys { width: 100%; border-collapse: collapse; }
.help .keys th { padding: 5px 14px 5px 0; text-align: left; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; vertical-align: top; }
.help .keys td { padding: 5px 0; font-size: 13px; line-height: 1.75; color: var(--text-2); }
.help .keys tr + tr > * { border-top: 1px solid var(--line-soft); }

/* ---------- 載入畫面：冰原遠景＋NOVA 開機自檢（背景是遊戲自己的 3D 渲染器拍的靜態圖 public/loading/bg-*.webp，index.html 預載） ---------- */
#loading { z-index: 80; display: block; padding: 0; overflow: hidden; background: #04060b; color: #dbe7ee; transition: opacity .6s ease;
  --ld-cold: #a9c2cc; --ld-cold-2: #7f98a4; --ld-ok: #a8e6c4; }
#loading.out { opacity: 0; pointer-events: none; }
.load-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; animation: load-in 1.1s ease-out both; filter: var(--map-filter); } /* 載入圖是畫布原本的像素：套跟場景畫布一樣的濾鏡（tokens.css 的 --map-filter），淡出那一下顏色不跳 */
html.q-low .load-bg { filter: none; } /* 低畫質的場景畫布沒有濾鏡（cd.css）；index.html 開頭就照畫質加上 q-low */
.load-veil { position: absolute; inset: 0; pointer-events: none; background: var(--tt-scrim); } /* 跟首頁同一組暗角（title.css 的 --tt-scrim／--tt-top）：交接那一下只換介面、不換暗角（G17 §7） */
.load-veil::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--tt-top-h); background: var(--tt-top); }
.load-wrap { position: absolute; left: clamp(26px, 5vw, 72px); right: clamp(26px, 5vw, 72px); bottom: clamp(26px, 6.5vh, 60px); display: grid; gap: clamp(14px, 2.6vh, 24px); justify-items: start; max-width: 540px; }
.load-mark { position: absolute; left: clamp(26px, 5vw, 72px); top: clamp(28px, 7vh, 68px); display: grid; gap: 10px; justify-items: start; } /* 字標在左上的天空（和首頁的字標同一個起點），自檢與進度線在左下的雪地，不蓋到營地的光 */
.load-mark .zh { font-family: var(--f-story); font-weight: 900; font-size: clamp(56px, 7.4vw, 112px); line-height: 0.95; letter-spacing: 0.14em; color: #f7f0e4; text-shadow: 0 0 60px rgba(255, 174, 77, 0.32), 0 2px 18px rgba(30, 14, 40, 0.55); }
.load-mark .en { padding-left: 0.2em; font-family: var(--f-stencil); font-size: clamp(12px, 1.4vw, 19px); letter-spacing: 0.5em; color: rgba(247, 240, 228, 0.95); text-shadow: 0 0 5px rgba(8, 6, 16, 0.9), 0 1px 3px rgba(8, 6, 16, 0.9); }
.load-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; font: 400 clamp(11px, 1.05vw, 13px) / 1.5 var(--f-mono); color: var(--ld-cold); }
.load-log li { display: flex; align-items: baseline; gap: 8px; }
.lg-tag { flex: none; color: var(--ld-cold-2); letter-spacing: 0.14em; }
.lg-tag::after { content: " ▸"; }
.lg-dots { flex: 1; min-width: 10px; border-bottom: 1px dotted rgba(169, 194, 204, 0.3); transform: translateY(-3px); }
.lg-st { flex: none; min-width: 3.4em; text-align: right; color: var(--ld-cold-2); }
.load-log li.ok .lg-st { color: var(--ld-ok); }
.load-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; width: 100%; }
.load-bar { height: 2px; background: rgba(169, 194, 204, 0.2); overflow: hidden; }
.load-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #6fd0e8, #ffd29a); box-shadow: 0 0 10px rgba(255, 200, 140, 0.55); transition: width .25s ease-out; }
.load-note { font: 400 11px var(--f-mono); letter-spacing: 0.16em; color: rgba(169, 194, 204, 0.85); }
@keyframes load-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) { .load-bg { object-position: 50% 50%; } .load-mark { left: 24px; top: calc(30px + env(safe-area-inset-top, 0px)); } .load-mark .zh { font-size: 56px; } .load-wrap { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } }
html.motion-reduce .load-bg { animation: none; }
@media (prefers-reduced-motion: reduce) { .load-bg { animation: none; } }

/* ---------- 響應式（HUD 的窄視窗規則在 styles/hud.css） ---------- */
@media (max-width: 1100px) {
  #drawer { width: 340px; top: var(--b2-top); } /* 側欄窄一點就會伸到正中央的希望／方舟／不安底下（≤1000 資源列還掉到第二行）：上緣跟圖板一樣讓開它們 */
}
@media (max-height: 520px) and (min-width: 761px) { /* 手機橫放：側欄貼著時間列下面才有高度，資源與希望／不安先讓位（和圖板一樣） */
  #app #drawer:not([data-board]) { top: 52px; }
  #app.panel-open .u-res, #app.panel-open .u-mood, #app.panel-open #warn { opacity: 0 !important; pointer-events: none; }
}
@media (max-width: 760px) {
  :root { --gut: 10px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .end-wrap { padding: 20px 16px; }
  .modal h2 { font-size: 23px; }
  .modal .story p { font-size: 15px; }
  .path-grid { grid-template-columns: 1fr; }
}
/* 減少動態：預設跟隨系統；設定面板選「開」或「關」時，main.js 會在 <html> 上掛 motion-reduce／motion-ok 蓋過系統設定 */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-ok) *, html:not(.motion-ok) *::before, html:not(.motion-ok) *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
html.motion-reduce *, html.motion-reduce *::before, html.motion-reduce *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }

/* =========================================================
   歸航 HOMEWARD — 回放器的面板（src/ui/replay.ts）：航行日誌的「回放」與上帝視角（src/dev/spectate.ts，只在 __DEV_CONSOLE__ 的建置裡）共用
   左邊一塊冷面板，外觀照除錯控制台（devconsole.css）。z-index 58：要壓過標題畫面與結局書（#title／#ending 都是 50，標題上打 878787 才點得到）、事件卡（55）；
   在除錯控制台（70）、載入畫面（80）、提示框（100）之下。
   ========================================================= */

#gv {
  position: absolute; left: var(--gut, 16px); top: 64px; z-index: 58; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 150px);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--cd-panel-solid); backdrop-filter: blur(12px) saturate(0.7); -webkit-backdrop-filter: blur(12px) saturate(0.7);
  box-shadow: inset 0 0 0 1px var(--cd-hair), 0 18px 36px rgba(0, 0, 0, 0.45);
  color: var(--cd-fg); font: 400 12.5px/1.45 var(--f-ui);
}
#gv[hidden] { display: none; }
#gv button { color: inherit; font: inherit; background: none; border: 0; cursor: pointer; }
.gv-head { display: flex; align-items: center; gap: 8px; padding: 7px 6px 7px 12px; border-bottom: 1px solid var(--cd-hair); }
.gv-head b { font: 700 11px/1 var(--f-num); letter-spacing: 0.2em; color: var(--cd-lcd); text-shadow: 0 0 6px var(--cd-lcd-glow); white-space: nowrap; }
.gv-sub { flex: 1; min-width: 0; color: var(--cd-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-x { width: 28px; height: 28px; color: var(--cd-fg-3); }
.gv-x:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.gv-body { overflow-y: auto; padding: 8px 12px 12px; display: grid; gap: 8px; align-content: start; }
.gv-dim { color: var(--cd-fg-3); }
.gv-err { color: #ff8a80; }
.gv-warn { color: #ffb1a8; }
.gv-live { color: #ff8a80; font-style: normal; }
.gv-body code { font: 500 12px/1 var(--f-mono); color: var(--cd-lcd); }

/* 選局 */
.gv-run { display: grid; gap: 2px; text-align: left; padding: 8px 10px; box-shadow: inset 0 0 0 1px var(--cd-hair); }
.gv-run:hover { background: rgba(255, 255, 255, 0.05); }
.gv-run small { color: var(--cd-fg-3); font-size: 11px; word-break: break-all; }

/* 觀戰中 */
.gv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gv-chips > span { font: 500 11px/1 var(--f-num); padding: 4px 6px; box-shadow: inset 0 0 0 1px var(--cd-hair); color: var(--cd-fg-2); }
.gv-bar { height: 3px; background: rgba(255, 255, 255, 0.08); }
.gv-bar > i { display: block; height: 100%; background: var(--cd-lcd); }
.gv-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.gv-ctl button { padding: 5px 8px; box-shadow: inset 0 0 0 1px var(--cd-hair); font: 600 12px/1 var(--f-num); }
.gv-ctl button:hover { background: rgba(255, 255, 255, 0.06); }
.gv-ctl button.on { color: #10140f; background: var(--cd-lcd); }
.gv-ctl .gv-leave { margin-left: auto; padding: 5px 12px; } /* 回放（航行日誌）：離開放在速度列的最右邊 */
/* 回放到結局、結局書翻開（#app.end-mode）：縮成頂端黑邊裡的一行（桌機的書從 ~100px、手機直式從 ~56px 起），不蓋到書 */
#gv.gv-mini { top: 8px; max-height: none; grid-template-rows: auto; }
#gv.gv-mini .gv-head { border-bottom: 0; padding: 5px 6px 5px 12px; }
#gv.gv-mini .gv-chip { font: 500 11px/1 var(--f-num); color: var(--cd-fg-2); white-space: nowrap; }
#gv.gv-mini .gv-leave { padding: 6px 12px; box-shadow: inset 0 0 0 1px var(--cd-hair); font: 600 12px/1 var(--f-num); white-space: nowrap; }
#gv.gv-mini .gv-leave:hover { background: rgba(255, 255, 255, 0.06); }
.gv-ctl label { color: var(--cd-fg-2); }
.gv-ctl input { width: 46px; height: 24px; padding: 0 4px; border: 0; color: #eef4f0; background: rgba(0, 0, 0, 0.38); box-shadow: inset 0 0 0 1px var(--cd-hair); font: 500 12px/1 var(--f-mono); }
.gv-now { display: grid; gap: 3px; padding: 9px 10px; background: rgba(0, 0, 0, 0.25); box-shadow: inset 2px 0 0 var(--cd-lcd-2); }
.gv-now.gv-pend { box-shadow: inset 2px 0 0 #ffd27a; }
.gv-now b { font-size: 14px; color: #fff; }
.gv-now p { margin: 0; color: var(--cd-fg); }
.gv-now small { color: var(--cd-fg-3); }
.gv-now .gv-res { color: var(--cd-fg-2); }
.gv-end { margin: 0; color: #ffd27a; font-weight: 600; }
.gv-fut { margin: 0; color: var(--cd-fg-2); }
.gv-fut b { display: block; color: var(--cd-lcd); font-size: 11px; letter-spacing: 0.08em; }
.gv-saw summary { cursor: pointer; color: var(--cd-fg-2); }
.gv-saw pre { max-height: 240px; overflow: auto; margin: 6px 0 0; padding: 6px 8px; white-space: pre-wrap; word-break: break-word;
  font: 400 11px/1.45 var(--f-mono); color: var(--cd-fg-2); background: rgba(0, 0, 0, 0.3); user-select: text; -webkit-user-select: text; }
.gv-hist { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.gv-hist button { display: grid; text-align: left; padding: 5px 8px; border-left: 1px solid var(--cd-hair); }
.gv-hist button:hover { background: rgba(255, 255, 255, 0.05); }
.gv-hist small { color: var(--cd-fg-3); font-size: 10.5px; }
.gv-hist em { font-style: normal; color: var(--cd-fg-3); font-size: 11.5px; }
.gv-notes p { margin: 4px 0 0; color: var(--cd-fg-2); white-space: pre-wrap; }
.gv-notes b { color: var(--cd-lcd); font-size: 11px; }