* { box-sizing: border-box; }
[hidden] { display: none !important; }
.ui-icon { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.pager button, .subtle-btn { border: 1px solid var(--panel-line); background: var(--panel-2); color: var(--gold-lt); border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager span { font-size: 12px; color: var(--hud-dim); font-variant-numeric: tabular-nums; }
.pager button:focus-visible, .subtle-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── 全域主題變數（收斂層次：統一圓角、間距、卡片底色）──
   保留稿紙水墨「戲說台灣」暖色調，但降低多重邊框／描邊／陰影堆疊。 */
:root {
  /* 文藝字體階層：標題／匾額用明體（宋體）系，內文維持黑體確保易讀 */
  --font-serif: "Noto Serif TC", "Source Han Serif TC", "PMingLiU", "MingLiU", serif;
  --seal-red: #b4392e;   /* 朱印紅（篆刻章、點綴） */
  --gold: #e9b93a;
  --gold-lt: #ffe27a;
  --gold-dk: #c9a227;
  --ink: #2a2418;
  --paper: #f4ecd8;
  --paper-2: #efe4cb;

  /* HUD 深色木質面板（單一底色，不再層層漸層＋邊框＋陰影）*/
  --panel: #1a2530;
  --panel-2: #212f3c;
  --panel-line: rgba(201,162,39,0.18);
  --hud-text: #eef1ee;
  --hud-dim: #9fb0be;

  --radius: 12px;
  --radius-sm: 8px;
  --gap: 12px;

  --shadow-soft: 0 4px 14px rgba(0,0,0,0.28);

  /* ── UI 尺寸階層（預設值＝theme.js 的 THEME.ui；main.js 開局時以 CSS 變數覆寫）──
     直播縮圖也要看得清楚，故字級偏大；小螢幕由 --ui-scale 等比縮小，不必逐項改。 */
  --ui-scale: 1;
  --fz-status: 20px;
  --fz-name: 17px;
  --fz-val: 16px;
  --fz-meta: 13px;
  --fz-tag: 12px;
  --fz-hand: 14px;
  --fz-skill: 14px;
  --fz-dir: 17px;
  --fz-event: 16px;
  --fz-hudinfo: 15px;
  --btn-primary-h: 56px;
  --btn-primary-fz: 20px;
  --btn-dir-h: 46px;
  --btn-invest-h: 60px;
}

/* 以 --ui-scale 統一縮放整套字級／按鈕尺寸 */
.fz { font-size: calc(var(--fz-meta) * var(--ui-scale)); }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -10%, #23303b 0%, rgba(28,39,51,0) 60%),
    #10161d;
  color: var(--hud-text);
  overflow: hidden;   /* 整個遊戲鎖單屏，不出現捲軸 */
}

/* ── 選角：滿版單屏，置中直排（標題 → 三步目標 → 角色卡）── */
#select-screen {
  height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  background:
    radial-gradient(1000px 560px at 50% -6%, rgba(255,216,59,0.12) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(700px 420px at 12% 108%, rgba(180,71,46,0.14) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(700px 420px at 88% 108%, rgba(24,160,126,0.12) 0%, rgba(0,0,0,0) 60%);
}
.sel-inner {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  max-width: 1240px; width: 100%;
  animation: selIn .5s ease both;
}
@keyframes selIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* 匾額式頂飾：一條金線 + 中央菱形，點出廟宇氛圍 */
.sel-crest { position: relative; width: min(560px, 80%); height: 14px; margin-bottom: 12px; }
.sel-crest::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px;
  background: linear-gradient(90deg, rgba(233,185,58,0) 0%, var(--gold-dk) 18%, var(--gold-lt) 50%, var(--gold-dk) 82%, rgba(233,185,58,0) 100%);
}
.sel-crest::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 14px; height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--gold-lt), var(--gold-dk));
  box-shadow: 0 0 12px rgba(255,216,59,0.6);
}
#select-screen h1 {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.6vw, 44px); color: var(--gold-lt); margin: 0 0 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 28px rgba(255,216,59,0.3);
  letter-spacing: 6px;
}
.subtitle { font-family: var(--font-serif); color: #c9b98f; margin: 0 0 22px; font-size: 15px; letter-spacing: 2px; }

/* 三步目標帶：開場一眼看懂「怎麼玩、怎麼贏」 */
.goal-strip { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.goal-step {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 18px 12px 14px; min-width: 250px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(201,162,39,0.28); border-radius: var(--radius);
}
.gs-num {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 17px; color: #3a2708;
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  box-shadow: 0 2px 8px rgba(233,185,58,0.4);
}
.gs-txt b { display: block; font-family: var(--font-serif); color: #ffe9a8; font-size: 15px; letter-spacing: 2px; margin-bottom: 2px; }
.gs-txt small { color: #9fb0c0; font-size: 12.5px; line-height: 1.4; }

/* 遊戲長度選擇：goal-strip 之下、選角提示之上的按鈕列 */
.len-pick { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 14px; }
.len-label { color: var(--gold); font-size: 14px; letter-spacing: 3px; font-family: var(--font-serif); }
.len-list { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.len-btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 16px 6px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #253243 0%, #1b2632 100%);
  border: 1px solid #33465b; color: #cfdbe8;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.len-btn b { font-size: 14px; letter-spacing: 1px; }
.len-btn small { font-size: 11px; color: #8fa3b8; }
.len-btn:hover { transform: translateY(-2px); border-color: var(--gold-dk); }
.len-btn.on {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201,162,39,0.5), 0 0 16px rgba(233,185,58,0.25);
  color: var(--gold);
}
.len-btn.on small { color: rgba(233,185,58,0.75); }

.pick-hint { color: #8fd9c6; margin: 0 0 16px; font-size: 14px; letter-spacing: 1px; }
.pick-hint::before, .pick-hint::after { content: "—"; color: rgba(143,217,198,.45); margin: 0 10px; }

.char-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(740px, 100%); }
.char-card {
  width: 100%; padding: 12px; font-family: inherit;
  background: linear-gradient(180deg, #253243 0%, #1b2632 100%);
  border-radius: 14px; border: 1px solid #33465b;
  cursor: pointer; transition: transform .14s, box-shadow .14s, border-color .14s;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
}
.char-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-dk);
  box-shadow: 0 12px 26px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,162,39,0.45), 0 0 22px rgba(233,185,58,0.25);
}
.char-avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: bold; color: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.25), 0 3px 8px rgba(0,0,0,0.4);
  outline: 2px solid var(--pc, transparent); outline-offset: 2px;
  transition: transform .14s;
}
.char-card:hover .char-avatar { transform: scale(1.06); }
.char-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.char-avatar.noimg { outline: none; }
.char-nick { font-family: var(--font-serif); font-weight: bold; margin-top: 4px; font-size: 17px; letter-spacing: 2px; }
.char-skill { font-size: 12px; color: #9fb0c0; margin-top: 5px; flex: 1; line-height: 1.45; }
.char-go {
  margin-top: 9px; font-size: 12px; font-weight: bold; letter-spacing: 2px;
  color: rgba(255,226,122,0); border-top: 1px dashed rgba(255,255,255,0.12); padding-top: 7px;
  transition: color .14s;
}
.char-card:hover .char-go { color: var(--gold-lt); }

/* ── 桃鐵式浮層版面：地圖鋪滿全視窗，介面全部浮在上面 ──
   .overlay-* 容器本身 pointer-events:none（不擋地圖拖曳縮放），
   只有 .float-panel 面板本體與 .status-bar 吃滑鼠事件。 */
/* z-index 10：介面面板蓋過畫布，但讓路口路牌(18)、擲骰(19)、提示(20)、演出層(30) 蓋過面板 */
.overlay-top, .overlay-right, .overlay-bottom {
  position: absolute; z-index: 10; pointer-events: none;
}
.float-panel { pointer-events: auto; }

/* ── 頂列：標題 + 狀態提示列（強引導的一句白話），浮在地圖上緣 ── */
.topbar {
  top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 10px 14px;
}
.title {
  font-family: var(--font-serif); font-size: 19px; font-weight: bold;
  letter-spacing: 3px; white-space: nowrap; color: #f2e6c8;
  background: rgba(13,18,26,0.82); border: 1px solid var(--panel-line);
  border-radius: 999px; padding: 7px 18px;
  box-shadow: var(--shadow-soft); backdrop-filter: blur(3px);
}
/* 朱印章風格的小標籤（篆刻紅底白字，方章）*/
.tag {
  font-family: var(--font-serif); font-size: 12px; font-weight: bold;
  background: var(--seal-red); color: #fdf3e3;
  padding: 2px 6px; border-radius: 3px; margin-left: 8px; letter-spacing: 2px;
  box-shadow: inset 0 0 0 1px rgba(253,243,227,0.55);
  vertical-align: 2px;
}

/* 狀態提示列：醒目的匾額式膠囊，顏色隨階段變化 */
.status-bar {
  flex: 1; max-width: 620px; margin-left: auto;
  pointer-events: auto;
  text-align: center; font-size: calc(var(--fz-status) * var(--ui-scale)); font-weight: bold; letter-spacing: 1px;
  padding: 9px 20px; border-radius: 999px;
  background: rgba(13,18,26,0.82);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--hud-text);
  box-shadow: var(--shadow-soft); backdrop-filter: blur(3px);
  transition: background .2s, color .2s, box-shadow .2s;
}
.status-bar.st-you {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  color: #3a2708; border-color: rgba(255,255,255,0.4);
  box-shadow: 0 0 18px rgba(233,185,58,0.5);
}
.status-bar.st-choose {
  background: linear-gradient(180deg, #2fd0a6, #12967a);
  color: #05251d; border-color: rgba(255,255,255,0.4);
  box-shadow: 0 0 18px rgba(24,160,126,0.55);
  animation: statusPulse 1.1s ease-in-out infinite;
}
.status-bar.st-cpu { background: rgba(24,34,45,.94); color: #cdd9e4; }
.status-bar.st-done { background: linear-gradient(180deg, var(--gold-lt), var(--gold)); color: #3a2708; }
@keyframes statusPulse {
  0%,100% { box-shadow: 0 0 14px rgba(24,160,126,0.45); }
  50% { box-shadow: 0 0 26px rgba(47,208,166,0.85); }
}

/* ── 主版面：地圖畫布鋪滿整個視窗（100vh），fitBoard() 依 board-area（=全螢幕）resize 畫布。
   其餘介面（topbar / hud / board-foot）以浮層蓋在地圖上，見 .overlay-*。 ── */
#game-screen { position: relative; height: 100vh; overflow: hidden; }
.board-area { position: absolute; inset: 0; }
/* 注意：不可加 transform（會生成 stacking context，把 exit-chips / fx-layer
   關進去，蓋不過浮層面板 z-index）。 */
.board-wrap { position: absolute; inset: 0; }
/* 左下浮層：事件一句話＋手牌（右側讓給 HUD 欄）*/
.board-foot {
  left: 14px; bottom: 12px; right: 386px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
#board {
  width: 100%; height: 100%; display: block;
  background: #e8dcc4; cursor: default;
}
.map-tools { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: var(--radius-sm); background: rgba(24,34,45,.94); box-shadow: var(--shadow-soft); }
.map-tools button { padding: 7px 10px; border: 1px solid var(--panel-line); border-radius: 5px; background: var(--panel-2); color: var(--gold-lt); cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; }
.map-tools button:hover, .map-tools button:focus-visible { background: #3c493e; outline: 1px solid var(--gold); }
.map-tools span { padding: 0 5px; font-size: 11px; color: var(--hud-dim); }
@media (max-width: 820px) { .map-tools span { display: none; } }

/* ── 路口方向選擇：選項直接亮在地圖上（exit-chips 路牌），
   這裡只剩一顆小小的倒數膠囊靠在地圖左上角，不再蓋大面板 ── */
.dir-bar {
  position: absolute; left: 14px; top: var(--overlay-top, 66px);
  z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(13,42,36,0.88);
  border-radius: 999px;
  border: 1px solid rgba(47,208,166,0.5);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  animation: dirDrop .25s ease;
}
@keyframes dirDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.dir-hint-title { font-size: 15px; font-weight: bold; color: #d6fff0; letter-spacing: 1px; }
.dir-hint-sub { font-size: 12px; color: #8fd9c6; margin-top: 1px; }

/* 出口路牌：貼在地圖出口節點上的可點標籤（位置由 main.js 每幀更新）*/
.exit-chips { position: absolute; inset: 0; z-index: 18; pointer-events: none; overflow: hidden; }
.exit-chip {
  position: absolute; transform: translate(-50%, -100%);
  pointer-events: auto; cursor: pointer;
  font-family: inherit; font-size: calc(var(--fz-dir) * var(--ui-scale) * 0.85); font-weight: bold;
  color: #f7fffb; background: rgba(13,42,36,0.92);
  border: 1.5px solid rgba(47,208,166,0.85); border-radius: 999px;
  padding: 7px 13px; width: max-content; max-width: min(260px, calc(100vw - 24px)); white-space: normal;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 0 12px rgba(24,160,126,0.5);
  animation: chipPulse 1.4s ease-in-out infinite;
  transition: background .12s, color .12s, border-color .12s;
}
.exit-name { line-height: 1.35; }
.exit-heading { display: inline-flex; align-items: center; gap: 5px; }
.exit-direction { display: inline-flex; }
.exit-direction .ui-icon { width: 20px; height: 20px; }
.exit-distance { display: block; font-size: 10px; margin-top: 3px; opacity: .75; font-weight: normal; }
.exit-meta { display: block; margin-top: 3px; font-size: 11px; font-weight: normal; opacity: .85; }
.exit-chip:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }
.exit-chip::after { /* 指向節點的小三角 */
  content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 6px solid rgba(47,208,166,0.85);
}
.exit-chip:hover, .exit-chip.hover {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  color: #3a2708; border-color: #fff; animation: none;
  box-shadow: 0 0 18px rgba(255,207,63,0.8);
}
.exit-chip:hover::after, .exit-chip.hover::after { border-top-color: var(--gold); }
@keyframes chipPulse {
  0%,100% { box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 0 10px rgba(24,160,126,0.4); }
  50% { box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 0 20px rgba(47,208,166,0.85); }
}

/* ── 擲骰浮動顯示：地圖上緣置中的小骰面，數字跳動後定格（--pc 為擲骰者色）── */
.dice-float {
  position: absolute; left: 50%; top: var(--overlay-top, 66px); transform: translateX(-50%);
  z-index: 19; display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}
.dice-float .df-name {
  font-size: var(--fz-meta, 13px); font-weight: bold; color: #fff;
  background: rgba(13,42,36,0.85); border: 1px solid var(--pc, #e8b01a);
  padding: 4px 10px; border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.dice-float .df-num {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; color: #2a2418;
  background: linear-gradient(180deg, #fffdf4, #f0e6cd);
  border: 2px solid var(--pc, #e8b01a); border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  font-variant-numeric: tabular-nums;
}
.dice-float.settle .df-num { animation: dicePop .3s ease; }
@keyframes dicePop {
  0% { transform: scale(1); }
  45% { transform: scale(1.28) rotate(-4deg); }
  100% { transform: scale(1); }
}

/* ── 節點資訊小卡（hover 地圖節點）：紙籤風，配合紙地圖底色 ── */
.node-tip {
  position: absolute; z-index: 20; pointer-events: none;
  min-width: 130px; max-width: 240px;
  background: linear-gradient(180deg, #fffdf4, #f4ecd8);
  border: 1px solid #cbb98f; border-left: 3px solid var(--seal-red, #b4392e);
  border-radius: 6px; padding: 8px 12px;
  box-shadow: 0 6px 18px rgba(40,26,8,0.35);
  color: #2a2418; font-size: var(--fz-meta, 13px);
}
.node-tip .nt-name {
  font-family: var(--font-serif, serif); font-weight: bold;
  font-size: 15px; letter-spacing: 0.06em; color: #4a2a12;
}
.node-tip .nt-tags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.node-tip .nt-tag {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: rgba(120,96,60,0.12); color: #6a5638; border: 1px solid rgba(120,96,60,0.25);
}
.node-tip .nt-tag.nt-dest { background: rgba(232,176,26,0.2); color: #8a6410; border-color: rgba(200,150,20,0.5); }
.node-tip .nt-shop {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 5px; padding-top: 5px; border-top: 1px dashed rgba(120,96,60,0.3);
}
.node-tip .nt-shop b { color: #4a2a12; }
.node-tip .nt-owner { font-weight: bold; text-shadow: 0 0 2px rgba(255,255,255,0.8); }
.node-tip .nt-free { color: #1d7a5e; }
.node-tip .nt-sub { margin-top: 4px; color: #6a5638; }

/* 倒數環（SVG） */
.dir-timer { position: relative; width: 44px; height: 44px; flex: 0 0 44px; }
.dir-timer svg { transform: rotate(-90deg); }
.dt-track { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 4; }
.dt-arc { fill: none; stroke: #18a07e; stroke-width: 4; stroke-linecap: round; transition: stroke .2s; }
.dt-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: bold; color: #d6fff0; font-variant-numeric: tabular-nums;
}
.dt-num.warn { color: #ffd0bd; }
.dir-timer.warn { animation: timerShake .5s ease-in-out infinite; }
@keyframes timerShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-1.5px)} 75%{transform:translateX(1.5px)} }

.dir-btns { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.dir-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08); color: #eafff8; border: 1px solid rgba(255,255,255,0.22);
  padding: 0 18px; min-height: calc(var(--btn-dir-h) * var(--ui-scale));
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: calc(var(--fz-dir) * var(--ui-scale)); font-weight: bold;
  transition: transform .12s, background .12s, box-shadow .12s, border-color .12s;
}
.dir-btn .db-arrow {
  width: 0; height: 0; border-left: 8px solid currentColor;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; opacity: .85;
}
.dir-btn:hover, .dir-btn.hover {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  color: #3a2708; border-color: #fff;
  transform: translateY(-2px); box-shadow: 0 0 16px rgba(255,207,63,0.7);
}

/* ── 事件記錄快照列（最近一則）：左下浮層小卡 ── */
.event-bar {
  padding: 10px 15px; max-width: 100%;
  background: rgba(15,21,29,0.82);
  border-radius: var(--radius-sm); border: 1px solid var(--panel-line); border-left: 3px solid var(--gold-dk);
  font-size: calc(var(--fz-event) * var(--ui-scale)); color: #ffe9a8; min-height: 22px;
  box-shadow: var(--shadow-soft); backdrop-filter: blur(3px);
}
.purchase-receipt { display: flex; align-items: center; gap: 12px; padding: 10px 14px; max-width: 100%; background: var(--panel); border: 1px solid var(--gold); border-radius: var(--radius); color: var(--gold-lt); box-shadow: var(--shadow-soft); }
.purchase-receipt span { min-width: 0; }
.purchase-receipt b, .purchase-receipt small { display: block; }
.purchase-receipt b { font-size: 13px; }
.purchase-receipt small { color: var(--hud-text); font-size: 12px; margin-top: 4px; }
.purchase-receipt strong { font-size: 18px; white-space: nowrap; }
.board-foot:has(.purchase-receipt:not([hidden])) .event-bar { display: none; }

/* ── HUD 右欄浮層（半透明面板疊在地圖上，容器不吃滑鼠）── */
.hud {
  top: var(--overlay-top, 62px); right: 14px; bottom: 12px; width: 340px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.hud-block {
  flex-shrink: 0;
  background: rgba(24,34,45,0.86);
  border-radius: var(--radius); padding: 12px 14px;
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-soft); backdrop-filter: blur(3px);
}
.hud-title {
  font-family: var(--font-serif);
  font-size: 13px; color: var(--gold-lt); margin-bottom: 10px; font-weight: bold; letter-spacing: 3px;
  display: flex; align-items: center; gap: 8px;
}
.hud-title::before { content: ""; width: 4px; height: 13px; background: linear-gradient(180deg,var(--gold-lt),var(--gold-dk)); border-radius: 2px; }
.hud-tabs { display: flex; gap: 4px; }
.hud-tabs button { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; font: inherit; font-size: 12px; cursor: pointer; color: var(--hud-dim); background: var(--panel); border: 1px solid var(--panel-line); border-radius: 8px; }
.hud-tabs .ui-icon { width: 18px; height: 18px; }
.hud-tabs button[aria-selected="true"] { background: var(--gold-lt); color: var(--ink); }
.hud-tabs button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.hud-pages { min-height: 0; }
#mapPanel:not([hidden]), #logPanel:not([hidden]) { display: block; }
.sg-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--panel-line); }
.sg-row > .ui-icon { width: 34px; height: 34px; color: var(--gold-lt); }
.sg-row > span { flex: 1; min-width: 0; font-size: 13px; }
.sg-row small { display: block; font-weight: normal; color: var(--hud-dim); font-size: 11px; margin-top: 4px; }
.sg-row strong { font-size: 16px; color: #b4ebce; text-align: right; }
.economy-panel .subtle-btn { margin-top: 12px; width: 100%; }
.season-caption { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--hud-dim); }
.season-steps { display: flex; gap: 6px; margin: 10px 0; }
.season-step { flex: 1; text-align: center; padding: 5px; border-radius: 5px; background: var(--panel-2); color: var(--hud-dim); border: 1px solid var(--panel-line); }
.season-step.current { border-color: var(--gold); color: var(--gold-lt); }
.season-step.done { background: #386c58; color: white; }
.season-button { border: none; cursor: pointer; font-family: inherit; }
.hud-hint { margin-left: auto; font-family: var(--font-sans, inherit); font-size: 11px; color: #8b9aa8; font-weight: normal; letter-spacing: 1px; }
/* 小地圖與目的地名稱可點：鏡頭跳轉／偷看目的地 */
.minimap-block canvas { cursor: pointer; }
.hud-info #hudDest { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.hud-info #hudDest:hover { color: #fff3c4; }
.hud-info div { margin: 5px 0; font-size: calc(var(--fz-hudinfo) * var(--ui-scale)); color: #d7dee6; }
.hud-info b { color: #ffe9a8; }
.destination-block { flex-shrink: 0; border-left: 3px solid var(--gold); padding: 10px 14px; }
.destination-label { display: block; font-size: 11px; letter-spacing: 2px; color: var(--hud-dim); }
.destination-name { display: block; padding: 4px 0; text-align: left; background: none; border: none; color: var(--gold-lt); font: bold 18px var(--font-serif); cursor: pointer; }
.destination-name:hover { color: white; }
.destination-name:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.destination-blessing { font-size: 12px; color: var(--hud-dim); }
.destination-blessing b { color: var(--gold-lt); }
.skill-info { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); color: #ffe9a8; font-size: calc(var(--fz-skill) * var(--ui-scale)); }

/* ── 控制鍵（放最上：現在該做的動作最醒目）── */
.controls { display: flex; gap: 6px; flex-shrink: 0; padding: 8px; }
.controls button {
  flex: 1; min-width: 0; padding: 4px; min-height: 44px;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  background: #34455a; color: #fff; font-size: 14px; font-weight: bold;
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.controls button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.controls button.primary {
  background: linear-gradient(180deg, var(--gold-lt) 0%, #f2c014 100%);
  color: #12181f;
}
/* CTA：目前該按的鍵放大脈動，一眼可辨 */
.controls button.primary.cta {
  animation: ctaPulse 1.1s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(242,192,20,0.55), 0 3px 10px rgba(242,192,20,0.35); transform: scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(242,192,20,0.0), 0 4px 14px rgba(242,192,20,0.5); transform: scale(1.035); }
}
.controls button:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(0.4); }
.controls button.skill-btn {
  font-size: 12px;
  background: linear-gradient(180deg, #6a4fd0 0%, #4d38a8 100%);
  color: #f0eaff;
}
.controls button.sell-btn {
  background: linear-gradient(180deg, #a3452f 0%, #7c2f20 100%);
  color: #ffe3d6;
}

/* ── 通用選擇面板（投資／卡片目標／技能骰數）：仍為置中面板（dir-bar 已改小膠囊，這裡覆寫回來）── */
.choice-bar {
  flex-direction: column; align-items: stretch;
  left: 50%; top: var(--overlay-top, 66px); transform: translateX(-50%);
  max-height: calc(100vh - var(--overlay-top, 66px) - 16px);
  width: min(94%, 860px); padding: 12px 16px;
  border-radius: var(--radius);
  border-color: rgba(201,162,39,0.6);
  background: linear-gradient(180deg, rgba(52,42,18,0.97) 0%, rgba(36,28,12,0.97) 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 26px rgba(201,162,39,0.4);
  animation: choiceDrop .25s ease;
}
@keyframes choiceDrop { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.dir-head { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.choice-bar .dir-hint-title { color: #ffe9a8; }
.choice-bar .dir-hint-sub { color: #d8bd7a; }
.choice-btn { min-height: calc(var(--btn-invest-h, 44px) * var(--ui-scale)); }
.choice-btn .db-label small { display: block; font-size: .78em; font-weight: normal; opacity: .8; }
.choice-btn .cb-avatar {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 30px;
  border: 2px solid var(--pc, #888); background: #222; display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; color: #fff;
}
.choice-btn .cb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.choice-cancel { opacity: .75; }
.choice-bar .dir-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-bar .choice-cancel { justify-content: center; min-height: 38px; }
.choice-btn:disabled { cursor: not-allowed; opacity: .6; transform: none; background: rgba(255,255,255,.03); color: #d0c5ad; box-shadow: none; }
.choice-btn:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; }
.investment-choice { flex-direction: column; align-items: stretch; padding: 18px; }
.investment-choice .dir-head { width: 100%; }
.investment-choice .dir-hint-title { font-size: 20px; font-family: var(--font-serif); }
.investment-choice .dir-hint-sub { line-height: 1.6; margin-top: 6px; }
.investment-choice .dir-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.investment-choice .choice-btn { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 16px; text-align: left; gap: 12px; }
.investment-choice .choice-btn > .ui-icon { width: 44px; height: 44px; color: var(--gold-lt); }
.investment-line .ui-icon { width: 18px; height: 18px; margin-right: 5px; }
.investment-choice .key-hint { position: absolute; top: 12px; right: 5px; }
.investment-choice .db-label { padding-right: 18px; }
.investment-choice .db-label small { font-size: 1.15em; font-weight: bold; opacity: 1; color: var(--gold-lt); margin-top: 8px; }
.investment-details { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.investment-line { font-size: 12px; line-height: 1.55; font-weight: normal; color: #d6c8a7; }
.investment-line.income { color: #b4ebce; font-weight: bold; font-size: 14px; }
.investment-line.notice { padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,.2); }
.investment-line.balance, .investment-line.warning { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.15); }
.investment-line.warning { color: #ffbd9c; font-weight: bold; }
.investment-choice .choice-btn:hover:not(:disabled) { background: rgba(233,185,58,.15); color: #fff6de; border-color: var(--gold); }
.investment-choice .choice-cancel { grid-column: 1 / -1; align-items: center; min-height: 40px; padding: 10px; }
@media (max-width: 600px) {
  .investment-choice .dir-btns { grid-template-columns: 1fr; }
  .investment-choice .choice-btn { padding: 12px; gap: 8px; }
  .investment-choice .dir-hint-title { font-size: 17px; }
}

/* 選擇面板倒數藥丸（theme.guide.choiceCountdownSec）：逾時自動走安全預設 */
.choice-timer {
  margin-left: auto; min-width: 32px; height: 32px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,233,168,0.35);
  color: #ffe9a8; font-weight: 700; font-variant-numeric: tabular-nums;
}
.choice-timer.warn {
  color: #ffb08a; border-color: #e0673a;
  animation: ctPulse .5s ease-in-out infinite alternate;
}
@keyframes ctPulse { from { transform: scale(1); } to { transform: scale(1.14); } }

/* 卡片選目標時：計分板整列可點（金框提示） */
.scoreboard .sb-row.sb-pickable {
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255,207,63,0.75), 0 0 14px rgba(255,207,63,0.4);
  animation: pickPulse 1s ease-in-out infinite;
}
@keyframes pickPulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(255,207,63,0.75), 0 0 14px rgba(255,207,63,0.35); }
  50% { box-shadow: 0 0 0 3px rgba(255,207,63,0.95), 0 0 20px rgba(255,207,63,0.55); }
}

/* ── 金榜計分板（收斂：一張玩家卡 = 頭像＋名字＋資產＋一兩個標記）── */
.scoreboard-block { padding: 8px; }
/* 頂列右側：輪數藥丸＋說明／音效鍵。地圖底色偏亮，故給一層深底盤保證可讀（同 .title 語彙）*/
.round-strip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  background: rgba(13,18,26,0.82); border: 1px solid var(--panel-line);
  border-radius: 999px; padding: 5px 8px;
  box-shadow: var(--shadow-soft); backdrop-filter: blur(3px);
}
/* 音效開關（頂列）：金框小膠囊，靜音時轉灰 */
.sound-btn {
  font-size: calc(var(--fz-meta) * var(--ui-scale)); font-weight: bold;
  color: var(--gold-lt); background: rgba(233,196,106,0.08);
  border: 1px solid rgba(233,196,106,0.5); border-radius: 20px;
  padding: 4px 14px; cursor: pointer; letter-spacing: .5px;
  transition: background .2s, color .2s, border-color .2s;
}
.sound-btn:hover { background: rgba(233,196,106,0.18); }
.sound-btn.off { color: #7f948a; border-color: rgba(160,180,170,0.35); background: rgba(255,255,255,0.03); }
#btnSpeed[aria-pressed="true"] { color: #17241f; background: var(--gold-lt); border-color: var(--gold); }
.round-pill {
  display: inline-block; font-size: calc(var(--fz-meta) * var(--ui-scale)); color: #3a2708; font-weight: bold;
  background: linear-gradient(180deg,var(--gold-lt),var(--gold)); padding: 4px 14px; border-radius: 20px;
  letter-spacing: .5px;
}
.scoreboard { display: flex; flex-direction: column; gap: 7px; }
/* 玩家卡：單層底＋左側玩家色條，無多重外框；當前回合以柔金底＋左條加粗表示（不疊框）*/
.sb-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04);
  border-left: 4px solid var(--pc, #888);
  border-radius: var(--radius-sm); padding: 6px 8px;
  transition: background .2s, box-shadow .2s;
}
.sb-row.sb-cur {
  background: linear-gradient(90deg, rgba(233,185,58,0.20), rgba(233,185,58,0.05));
  border-left-width: 6px;
  box-shadow: inset 0 0 0 1px rgba(233,185,58,0.35);
}
.sb-avatar {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: bold; color: #fff;
  background: #0e1319; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
}
.sb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-main { flex: 1; min-width: 0; }
.sb-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.sb-name { font-weight: bold; font-size: 14px; color: #f2f5f8; }
.sb-you, .sb-cpu { font-size: calc(var(--fz-tag) * var(--ui-scale)); padding: 1px 6px; border-radius: 4px; }
.sb-you { background: #2a7d5f; color: #eafff5; }
.sb-cpu { background: #3a4a58; color: #aebcc8; }
/* 加持：一個金色小標記即可，不再疊發光框 */
.sb-bless { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: linear-gradient(180deg,var(--gold-lt),var(--gold)); color: #3a2708; font-weight: bold; }
.sb-turn { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--gold-dk); color: #12181f; font-weight: bold; margin-left: auto; }
.sb-track { height: 7px; background: rgba(0,0,0,0.35); border-radius: 4px; overflow: hidden; margin: 2px 0 4px; }
.sb-fill { height: 100%; border-radius: 4px; transition: width .35s ease; }
.sb-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; font-size: calc(var(--fz-meta) * var(--ui-scale)); color: #9fb0c0; }
.sb-dist { color: #9fb0c0; }
/* 剩兩格以內：隨時可能搶下首達，用暖色慢脈動提醒（不用紅色，紅色留給負債）*/
.sb-dist.near { color: #ffcf6b; font-weight: bold; animation: sbNear 1.6s ease-in-out infinite; }
@keyframes sbNear { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* 持有商圈數／手牌數：判斷對手威脅度的關鍵資訊，壓低彩度不搶資產數字 */
.sb-own { color: #8b9aa8; }
.sb-val { font-weight: bold; font-size: 14px; font-variant-numeric: tabular-nums; color: #ffe9a8; }
.sb-finances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 4px 0 6px; }
.sb-finances small { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--hud-dim); margin-bottom: 2px; }
.sb-finances .ui-icon { width: 13px; height: 13px; }
.sb-cash { font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.sb-cash.neg { color: #ff9292; }
.sb-distance-compact { display: none; font-size: 11px; color: var(--hud-dim); }
.sb-shopcount { display: inline-flex; align-items: center; gap: 3px; padding: 1px 4px; color: var(--hud-dim); font-size: 12px; }
.sb-shopcount .ui-icon { width: 14px; height: 14px; }
.sb-shopcount.leading { color: var(--gold-lt); background: rgba(233,185,58,.16); border-radius: 4px; }
.sb-top .sb-cpu { display: none; }
.map-key { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 11px; color: var(--hud-dim); }
.road-key::before, .route-key::before { content: ""; display: inline-block; width: 16px; margin-right: 4px; border-top: 3px solid #928774; vertical-align: middle; }
.route-key::before { border-color: var(--gold-lt); }
.sb-val.neg { color: #ff7676; }
.sb-rank { margin-left: auto; color: #8b9aa8; font-weight: bold; font-size: 11px; white-space: nowrap; }
/* 第一名：金字，讓「誰在領先」不必比對數字 */
.sb-rank.top { color: #ffd977; text-shadow: 0 0 8px rgba(255,200,80,0.35); }
.sb-effects { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sb-effect { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; line-height: 1.5; padding: 1px 4px; border-radius: 5px; border: 1px solid rgba(255,255,255,.14); cursor: help; }
.sb-effect .ui-icon { width: 15px; height: 15px; }
.sb-effect.benefit { color: #b3e8ce; background: rgba(39,135,99,.17); }
.sb-effect.caution { color: #ffd0a1; background: rgba(191,122,51,.18); }
.sb-effect.neutral { color: #bedcff; background: rgba(65,126,195,.18); }

/* ── 小地圖（浮層右欄空間有限：高度封頂，等比置中）── */
.minimap-block { padding-bottom: 12px; flex: 0 0 auto; }
#minimap {
  width: auto; max-width: 100%; height: auto; max-height: 168px;
  display: block; margin: 0 auto; border-radius: var(--radius-sm);
  background: var(--paper);
}

/* 記錄一次讀一則，用分頁保留完整內容，不以捲軸堆積長文。 */
.log-block { min-height: 120px; }
.log { font-size: 14px; line-height: 1.8; color: #b7c4d0; overflow-wrap: anywhere; }
.log div { padding: 1px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
/* 與某位玩家有關的記錄：行首玩家色條，直播上一眼分辨誰做了什麼 */
.log .log-who { border-left: 3px solid var(--pc, #888); padding-left: 7px; }

/* ── 手牌（左下浮層面板）── */
.hand-wrap {
  width: min(740px, 100%);
  background: rgba(24,34,45,0.86); border: 1px solid var(--panel-line);
  border-radius: var(--radius); padding: 10px 14px 12px;
  box-shadow: var(--shadow-soft); backdrop-filter: blur(3px);
  max-width: 100%;
}
.hand-title {
  font-size: calc(var(--fz-meta) * var(--ui-scale)); color: var(--gold-lt); font-weight: bold; letter-spacing: 1px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.hand-sub { color: #8b9aa8; font-weight: normal; letter-spacing: 0; }
.hand-bar { display: flex; gap: 10px; margin-top: 8px; min-height: 0; }
.hand-card {
  width: 128px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #2b3848 0%, #212c39 100%);
  border: 1px solid #34455a; border-top: 3px solid #556;
  font-family: inherit; text-align: left; color: var(--hud-text);
  font-size: calc(var(--fz-hand) * var(--ui-scale)); user-select: none;
  box-shadow: var(--shadow-soft); transition: transform .14s, box-shadow .14s;
}
.hand-card.playable { cursor: pointer; }
.hand-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,.5); }
.hand-card:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }
.hand-card[aria-disabled="true"] { cursor: help; }
.hand-card span { display: block; }
.hand-card .hc-kind { color: var(--hud-dim); font-size: .78em; margin-bottom: 5px; letter-spacing: 1px; }
.hand-card .hc-name { font-weight: bold; margin-bottom: 4px; color: #f0f4f8; }
.hand-card .hc-desc { display: none; }
.hand-card.card-buff, .hand-preview.card-buff { border-top-color: #4caf7d; }
.hand-card.card-prank, .hand-preview.card-prank { border-top-color: #e0a13c; }
.hand-card.card-debuff, .hand-preview.card-debuff { border-top-color: #e05b5b; }
.hand-card.card-daji { box-shadow: 0 0 0 2px var(--gold) inset, var(--shadow-soft); }
.hand-empty { color: #6b7885; font-size: 13px; padding: 10px 0; }

/* 手牌放大說明：獨立浮層，不推擠地圖／手牌，演出層(30)仍在其上。 */
.hand-preview {
  position: fixed; z-index: 21; pointer-events: none;
  width: min(300px, calc(100vw - 16px)); max-height: calc(100vh - 16px);
  padding: 18px 20px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid #536476; border-top: 5px solid #556;
  box-shadow: 0 12px 32px rgba(0,0,0,.48);
  color: var(--hud-text); overflow-wrap: anywhere;
}
.hand-preview.card-daji { box-shadow: 0 0 0 1px var(--gold), 0 12px 32px rgba(0,0,0,.48); }
.hp-kind { font-size: 13px; color: var(--gold-lt); letter-spacing: 2px; }
.hp-name { font-family: var(--font-serif); font-size: 23px; font-weight: bold; margin: 8px 0 12px; }
.hp-desc { font-size: 16px; line-height: 1.7; white-space: pre-wrap; }
.hp-enhanced { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--gold-lt); }
.hp-target { font-size: 13px; color: var(--hud-dim); margin-top: 14px; }
.hp-status { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--panel-line); font-size: 13px; color: var(--gold-lt); }
@media (prefers-reduced-motion: reduce) {
  .hand-card { transition: none; }
  .hand-card:hover { transform: none; }
}

/* ── 響應式（浮層版面在窄螢幕收斂：面板變窄、字級縮小，地圖永遠滿版）── */
@media (max-width: 1400px) {
  .hud { width: 300px; }
  .board-foot { right: 328px; }
  :root { --ui-scale: .92; }
}
@media (max-width: 1150px) {
  :root { --ui-scale: .84; }
  .hud { width: 264px; }
  .board-foot { right: 292px; }
  #select-screen { height: 100vh; }
  .status-bar { max-width: none; }
}
@media (max-width: 1280px) {
  .topbar { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; }
  .topbar .title { font-size: 16px; letter-spacing: 1px; }
  .round-strip { justify-self: end; grid-column: 2; grid-row: 1; gap: 5px; }
  .status-bar { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; margin: 0; padding: 7px 12px; }
  .sound-btn { padding: 5px 10px; white-space: nowrap; }
  .round-pill { white-space: nowrap; padding: 4px 9px; }
}
@media (max-width: 820px) {
  :root { --ui-scale: .78; }
  .topbar { padding: 8px 12px; }
  .topbar .tag { display: none; }
  .topbar .title { font-size: 14px; padding: 7px 10px; }
  .hud { right: 12px; width: 242px; }
  .board-foot { left: 12px; right: 266px; }
  .hand-wrap { width: 100%; padding: 8px 10px; }
  .hand-bar { flex-wrap: nowrap; padding: 4px 3px; }
  .hand-card { flex: 0 0 128px; }
  .hand-sub { font-size: 11px; }
  .event-bar { font-size: 12px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-top { flex-wrap: wrap; gap: 3px; }
  .sb-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .hud-block { padding: 10px; }
}
@media (max-width: 600px) {
  .topbar { grid-template-columns: 1fr; gap: 5px; }
  .topbar .title { justify-self: center; }
  .round-strip { grid-column: 1; grid-row: 2; justify-self: center; max-width: 100%; flex-wrap: wrap; justify-content: center; }
  .status-bar { grid-row: 3; font-size: 14px; }
  .hud { width: calc(100% - 24px); bottom: auto; gap: 6px; }
  .controls { padding: 6px; }
  .controls button { flex-basis: 20%; min-height: 38px; font-size: 14px; }
  .destination-block { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
  .destination-name { font-size: 16px; }
  .scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .scoreboard-block .hud-title { display: none; }
  .sb-row { padding: 5px; gap: 5px; }
  .sb-avatar { display: none; }
  .board-foot { right: 12px; }
  .event-bar { display: none; }
  .char-card { padding: 8px 3px; }
  .char-avatar { width: 52px; height: 52px; font-size: 20px; }
  .char-nick { font-size: 14px; letter-spacing: 0; }
  .char-skill, .char-go, .goal-strip, .subtitle { display: none; }
  .pick-hint { font-size: 12px; }
  .pick-hint::before, .pick-hint::after { display: none; }
  .len-pick { flex-direction: column; gap: 5px; }
  .len-btn { padding: 6px; }
  .len-btn b { font-size: 12px; }
  .len-btn small { font-size: 9px; }
  .purchase-receipt { gap: 8px; padding: 8px; }
  .purchase-receipt > .ui-icon { display: none; }
  .purchase-receipt strong { font-size: 14px; }
  .board-foot:has(.purchase-receipt:not([hidden])) .map-tools { display: none; }
  .sb-finances { grid-template-columns: 1fr; gap: 2px; }
  .sb-finances > span { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
  .sb-finances small { margin: 0; }
  .sb-cash, .sb-val { font-size: 12px; }
  .sb-top .sb-distance-compact { display: none; }
}
@media (max-height: 800px) {
  .hud { gap: 6px; }
  .hud-block { padding: 8px; }
  .sb-row { padding: 4px 6px; }
  .sb-avatar { display: none; }
  .sb-track { display: none; }
  .sb-finances { margin: 1px 0; }
  .scoreboard { gap: 4px; }
  .sb-bottom { display: none; }
  .sb-distance-compact { display: inline; }
  .sb-effect { padding: 0 3px; line-height: 1.3; }
  .sb-effects { margin-top: 3px; }
  .sb-name, .sb-cash, .sb-val { font-size: 13px; }
  .sb-top, .sb-bottom { gap: 4px; }
  .controls button { min-height: 38px; }
  .destination-name { font-size: 16px; }
  .goal-strip, .subtitle { display: none; }
}


/* ── 彈出演出層（fx.js）：浮在地圖上方的一次性動畫，不影響版面 ──
   時長／開關在 theme.js 的 THEME.fx；小物件素材在 THEME.fxAssets（缺圖時 fx.js 走程式化 fallback）。 */
.fx-layer {
  position: absolute; inset: 0; z-index: 30;  /* 蓋過浮層面板：演出時全螢幕聚焦 */
  pointer-events: none; overflow: hidden;
}
.fx-layer.fx-active { pointer-events: auto; cursor: pointer; }

/* 半透明壓底，讓演出主體跳出來 */
.fx-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.58) 100%);
  animation: fxFade .22s ease;
}
@keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }
.fx-scrim.out { animation: fxFadeOut .26s ease forwards; }
@keyframes fxFadeOut { to { opacity: 0; } }

/* 演出主體：置中卡片式容器 */
.fx-stage {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; color: #fff;
  animation: fxPop .3s cubic-bezier(.2,1.5,.4,1);
}
@keyframes fxPop {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.82); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.fx-stage.out { animation: fxOut .26s ease forwards; }
@keyframes fxOut { to { opacity: 0; transform: translate(-50%, -56%) scale(.96); } }

.fx-title {
  font-size: calc(var(--fz-status) * var(--ui-scale) * 1.5); font-weight: bold; letter-spacing: 3px;
  color: var(--gold-lt); text-shadow: 0 3px 14px rgba(0,0,0,.75), 0 0 26px rgba(255,216,59,.5);
}
.fx-sub {
  font-size: calc(var(--fz-event) * var(--ui-scale)); color: #f4ecd8;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
.fx-amount {
  font-size: calc(var(--fz-status) * var(--ui-scale) * 2.1); font-weight: bold;
  font-variant-numeric: tabular-nums; letter-spacing: 1px;
  text-shadow: 0 4px 18px rgba(0,0,0,.8);
}
.fx-amount.gain { color: #ffd75e; }
.fx-amount.loss { color: #ff8a7a; }
.fx-row { display: flex; align-items: center; justify-content: center; gap: 22px; }

/* 擲筊：兩枚筊杯翻轉落下 */
.fx-jiao {
  width: 96px; height: 96px; object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.6));
  animation: fxJiao var(--fx-dur, 1.5s) cubic-bezier(.3,.7,.3,1) both;
}
.fx-jiao.b { animation-delay: .12s; }
@keyframes fxJiao {
  0%   { opacity: 0; transform: translateY(-160px) rotate(0deg) scale(.7); }
  55%  { opacity: 1; transform: translateY(10px) rotate(540deg) scale(1.06); }
  70%  { transform: translateY(-14px) rotate(600deg) scale(1); }
  100% { opacity: 1; transform: translateY(0) rotate(630deg) scale(1); }
}
/* 無素材時的程式化筊杯（半月形） */
.fx-jiao.fallback {
  background: linear-gradient(150deg, #b4472e 0%, #7d2c1a 100%);
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  box-shadow: inset 0 -8px 16px rgba(0,0,0,.35), 0 8px 14px rgba(0,0,0,.5);
}
.fx-jiao.fallback.flat { background: linear-gradient(150deg, #d8613f 0%, #9c3a22 100%); }

/* 資金轉盤：指針轉動 */
.fx-wheel { position: relative; width: 180px; height: 180px; }
.fx-wheel img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.6));
  animation: fxWheelSpin var(--fx-dur, 1.5s) cubic-bezier(.15,.85,.2,1) both;
}
.fx-wheel img.fallback {
  border-radius: 50%;
  background: conic-gradient(#f4ecd8 0 25%, #e9b93a 0 50%, #f4ecd8 0 75%, #c9a227 0 100%);
  box-shadow: inset 0 0 0 6px #7d2c1a;
}
@keyframes fxWheelSpin { from { transform: rotate(0); } to { transform: rotate(1080deg); } }
.fx-wheel::after {
  content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 20px solid var(--gold-lt); filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}

/* 金幣／元寶噴發 */
.fx-coin {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px;
  object-fit: contain; margin: -27px 0 0 -27px;
  animation: fxCoin var(--fx-dur, 1.3s) cubic-bezier(.2,.8,.3,1) both;
  animation-delay: var(--d, 0s);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
}
.fx-coin.fallback {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe27a 0%, #e9b93a 55%, #a9801a 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35);
}
@keyframes fxCoin {
  0%   { opacity: 0; transform: translate(0,0) scale(.4) rotate(0deg); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, -170px)) scale(1) rotate(var(--rot, 240deg)); }
}

/* 破財：紅色裂震 */
.fx-shake { animation: fxShake .5s ease-in-out 2 both; }
@keyframes fxShake {
  0%,100% { transform: translate(-50%, -50%); }
  25% { transform: translate(calc(-50% - 9px), -50%); }
  75% { transform: translate(calc(-50% + 9px), -50%); }
}

/* 媽祖加持：金光擴散 */
.fx-halo {
  position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px;
  object-fit: contain;
  animation: fxHalo var(--fx-dur, 1.6s) ease-out both;
}
.fx-halo.fallback {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,226,122,.85) 0%, rgba(233,185,58,.45) 42%, rgba(233,185,58,0) 72%);
}
@keyframes fxHalo {
  0%   { opacity: 0; transform: scale(.35) rotate(0deg); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5) rotate(90deg); }
}
.fx-rays {
  position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px;
  background: repeating-conic-gradient(rgba(255,226,122,.30) 0deg 7deg, rgba(255,226,122,0) 7deg 18deg);
  border-radius: 50%;
  animation: fxRays var(--fx-dur, 1.6s) linear both;
}
@keyframes fxRays {
  0% { opacity: 0; transform: rotate(0deg) scale(.6); }
  30% { opacity: .9; }
  100% { opacity: 0; transform: rotate(120deg) scale(1.3); }
}

/* 抽卡翻牌 */
.fx-card {
  width: 210px; min-height: 132px; padding: 16px 18px; border-radius: 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, #2b3848 0%, #1c2734 100%);
  border: 1px solid #3d5165; border-top: 6px solid #556;
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  animation: fxFlip var(--fx-dur, 1.2s) cubic-bezier(.2,.9,.25,1) both;
}
.fx-card.card-buff { border-top-color: #4caf7d; }
.fx-card.card-prank { border-top-color: #e0a13c; }
.fx-card.card-debuff { border-top-color: #e05b5b; }
.fx-card.card-daji { box-shadow: 0 0 0 3px var(--gold) inset, 0 18px 40px rgba(0,0,0,.6); }
.fx-card .fc-kind { font-size: calc(var(--fz-meta) * var(--ui-scale)); color: var(--gold-lt); letter-spacing: 2px; }
.fx-card .fc-name { font-size: calc(var(--fz-name) * var(--ui-scale) * 1.15); font-weight: bold; color: #fff; }
.fx-card .fc-desc { font-size: calc(var(--fz-hand) * var(--ui-scale)); color: #b7c4d0; line-height: 1.45; }
@keyframes fxFlip {
  0%   { opacity: 0; transform: perspective(700px) rotateY(-180deg) scale(.7); }
  55%  { opacity: 1; transform: perspective(700px) rotateY(0deg) scale(1.06); }
  100% { opacity: 1; transform: perspective(700px) rotateY(0deg) scale(1); }
}

/* 慶祝彩帶（首達目的地） */
.fx-confetti {
  position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px;
  animation: fxConfetti var(--fx-dur, 1.9s) linear both; animation-delay: var(--d, 0s);
}
@keyframes fxConfetti {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(520px) rotate(540deg); }
}
.fx-hero.fallback {
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffe27a 0%, #e9b93a 48%, #b4472e 100%);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.28);
}
.fx-hero { width: 148px; height: 148px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }

/* 季底／年度結算榜單：全員收益＋名次，一行一位玩家依序滑入 */
.fx-season { max-width: min(620px, 88vw); }
.fxs-board {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; margin-top: 4px;
}
.fxs-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px;
  padding: 8px 16px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,32,44,.92) 0%, rgba(12,20,30,.92) 100%);
  border: 1px solid rgba(120,150,180,.28);
  border-left: 4px solid var(--pc, #e9b93a);
  animation: fxsIn .4s cubic-bezier(.2,1.3,.4,1) both; animation-delay: var(--d, 0s);
  text-align: left;
}
@keyframes fxsIn {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fxs-row.top {
  border-color: rgba(233,185,58,.75);
  box-shadow: 0 0 16px rgba(233,185,58,.28);
  background: linear-gradient(180deg, rgba(48,40,16,.94) 0%, rgba(28,24,10,.94) 100%);
}
.fxs-rank {
  font-size: calc(var(--fz-meta) * var(--ui-scale)); color: #b8c6d4; letter-spacing: 1px;
  min-width: 4.2em;
}
.fxs-row.top .fxs-rank { color: var(--gold-lt); }
.fxs-name {
  font-weight: bold; color: #f4ecd8; letter-spacing: 1px;
  font-size: calc(var(--fz-event) * var(--ui-scale));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fxs-income {
  font-variant-numeric: tabular-nums; font-weight: bold; letter-spacing: .5px;
  font-size: calc(var(--fz-event) * var(--ui-scale));
}
.fxs-income.gain { color: #ffd75e; }
.fxs-income.zero { color: #5f7285; }
.fxs-assets {
  font-variant-numeric: tabular-nums; color: #cfdbe8; min-width: 6em; text-align: right;
  font-size: calc(var(--fz-event) * var(--ui-scale));
}
.fxs-assets.loss { color: #ff8a7a; }
.fxs-note { opacity: .92; }

.fx-skip {
  position: absolute; right: 12px; bottom: 10px;
  font-size: calc(var(--fz-meta) * var(--ui-scale)); color: rgba(255,255,255,.55);
  letter-spacing: 1px;
}

/* 減少動態偏好：直接關閉演出動畫 */
@media (prefers-reduced-motion: reduce) {
  .fx-layer * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ── 局終戰績卡（P3）：全屏覆蓋，冠軍列金光強調 ── */
.result-screen {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 14, 12, .82);
  backdrop-filter: blur(4px);
  animation: rcFade .4s ease both;
}
@keyframes rcFade { from { opacity: 0; } to { opacity: 1; } }
.result-card {
  width: min(680px, 92vw); max-height: 94vh;
  background: linear-gradient(180deg, #17352c 0%, #102620 100%);
  border: 1px solid rgba(233, 196, 106, .45);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 30px 34px 26px;
  text-align: center;
  animation: rcPop .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes rcPop { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
.rc-crest { width: 200px; height: 10px; margin: 0 auto 12px; position: relative; }
.rc-crest::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px;
  background: linear-gradient(90deg, transparent, #e9c46a 30%, #e9c46a 70%, transparent);
}
.rc-crest::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg); background: #e9c46a; border-radius: 2px;
}
.result-card h2 {
  font-family: var(--font-serif);
  margin: 0 0 6px; color: #ffe9ad; letter-spacing: 6px;
  font-size: calc(30px * var(--ui-scale));
  text-shadow: 0 2px 14px rgba(233, 196, 106, .35);
}
.rc-sub { margin: 0 0 18px; color: #bfe3d2; font-size: calc(var(--fz-body) * var(--ui-scale)); letter-spacing: 1px; }
.rc-rows { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.rc-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 4px solid var(--pc, #888);
  border-radius: 12px; padding: 10px 14px;
  animation: rcRow .45s ease both;
}
@keyframes rcRow { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.rc-row.rc-win {
  background: linear-gradient(90deg, rgba(233, 196, 106, .2), rgba(233, 196, 106, .06));
  border-color: rgba(233, 196, 106, .6);
  box-shadow: 0 0 22px rgba(233, 196, 106, .22);
}
.rc-rank {
  flex: 0 0 auto; min-width: 62px; text-align: center;
  color: #cfe8db; font-weight: 700; font-size: calc(var(--fz-meta) * var(--ui-scale));
}
.rc-win .rc-rank { color: #ffe9ad; }
.rc-avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: #fdf6e3; border: 2px solid var(--pc, #888); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.rc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rc-avatar.noimg { color: #fff; font-weight: 700; font-size: 18px; }
.rc-main { flex: 1; min-width: 0; }
.rc-name { color: #f2efe4; font-weight: 700; font-size: calc(var(--fz-body) * var(--ui-scale)); }
.rc-you, .rc-cpu {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: calc(12px * var(--ui-scale)); font-weight: 700; vertical-align: 2px;
}
.rc-you { background: #e9c46a; color: #3d2b00; }
.rc-cpu { background: rgba(255,255,255,.14); color: #cfd8d3; }
.rc-detail { color: #9db8ab; font-size: calc(var(--fz-meta) * var(--ui-scale)); margin-top: 2px; }
.rc-assets {
  flex: 0 0 auto; font-weight: 800; color: #ffe9ad;
  font-size: calc(var(--fz-status) * var(--ui-scale)); font-variant-numeric: tabular-nums;
}
.rc-neg .rc-assets { color: #ff8a8a; }
.rc-actions { margin-top: 20px; }
/* 戰績卡與玩法說明共用的主要行動鍵（金色，與擲骰鍵同語彙） */
.rc-actions .primary {
  min-width: 220px; height: calc(var(--btn-primary-h) * var(--ui-scale));
  padding: 0 24px; border: none; border-radius: var(--radius-sm); cursor: pointer;
  background: linear-gradient(180deg, var(--gold-lt) 0%, #f2c014 100%);
  color: #12181f; font-weight: bold;
  font-size: calc(var(--btn-primary-fz) * var(--ui-scale));
  transition: transform .12s, filter .12s;
  box-shadow: 0 4px 14px rgba(242,192,20,0.3);
}
.rc-actions .primary:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ── 鍵盤快速鍵小鍵帽：選項按鈕與路口路牌上的數字／Esc 提示 ── */
kbd.key-hint {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 16px; padding: 0 4px; margin-right: 7px;
  font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.3); border-bottom-width: 2px;
  border-radius: 4px; flex: 0 0 auto; vertical-align: 1px;
}
.exit-chip:hover kbd.key-hint, .exit-chip.hover kbd.key-hint {
  color: #3a2708; background: rgba(58,39,8,0.12); border-color: rgba(58,39,8,0.45);
}

/* ── 玩法說明浮層：沿用戰績卡的暗幕與卡片語彙，兩欄規則摘要 ── */
.help-screen {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 14, 12, .78);
  backdrop-filter: blur(4px);
  animation: rcFade .3s ease both;
}
.help-card {
  width: min(620px, 94vw); max-height: 94vh;
  background: linear-gradient(180deg, #17352c 0%, #102620 100%);
  border: 1px solid rgba(233, 196, 106, .45);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 26px 30px 24px;
  text-align: center;
  animation: rcPop .4s cubic-bezier(.2, .9, .3, 1.2) both;
}
.help-card h2 {
  font-family: var(--font-serif);
  margin: 0 0 16px; color: #ffe9ad; letter-spacing: 6px;
  font-size: calc(24px * var(--ui-scale));
  text-shadow: 0 2px 14px rgba(233, 196, 106, .35);
}
.help-grid {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  text-align: left; margin-bottom: 18px;
}
.help-grid section {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 12px 14px;
}
.help-grid h3 {
  margin: 0 0 12px; color: #ffd97a; font-size: 18px;
  letter-spacing: 2px; font-family: var(--font-serif);
}
.help-grid p {
  margin: 0; color: #d7eadf;
  font-size: 15px; line-height: 1.65; letter-spacing: .4px;
}
.help-grid p b { color: #ffe9ad; }
.help-grid kbd.key-hint { margin-right: 3px; }
.help-grid section > .ui-icon { width: 42px; height: 42px; color: var(--gold-lt); margin-bottom: 12px; }
.time-diagram { display: flex; gap: 10px; margin-bottom: 18px; }
.time-diagram div { flex: 1; padding: 10px 4px; text-align: center; border-radius: 8px; background: rgba(255,255,255,.06); }
.time-diagram b, .time-diagram small { display: block; margin-top: 8px; }
.time-diagram b { font-size: 14px; color: var(--gold-lt); }
.time-diagram small { font-size: 12px; color: var(--hud-dim); }
#economyHelp > p { margin-top: 14px; }
#helpStrategy p + p { margin-top: 16px; }
@media (max-width: 600px), (max-height: 700px) {
  .result-card, .help-card { padding: 16px; }
  .result-card h2, .help-card h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: 2px; }
  .help-grid p { font-size: 14px; }
  .help-grid section > .ui-icon { width: 30px; height: 30px; margin-bottom: 6px; }
  .help-grid section { padding: 12px; }
  .rc-crest { display: none; }
  .rc-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; padding: 10px; }
  .rc-avatar { display: none; }
  .rc-assets { grid-column: 2; font-size: 18px; }
  .rc-detail { font-size: 12px; }
  .rc-actions { margin-top: 12px; }
}
@media (max-width: 760px) { .help-grid { grid-template-columns: 1fr; } }

/* 選角畫面的文字連結鍵（開玩法說明） */
.link-btn {
  background: none; border: none; padding: 0; margin-left: 10px;
  color: #ffd97a; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  letter-spacing: 1px;
}
.link-btn:hover { color: #ffe9ad; }

/* 角色與操作集中在一處；擲骰為主要行動，手牌／技能按需展開。 */
.action-dock { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 12px; width: min(560px, 100%); padding: 10px; border-radius: 14px; background: rgba(25,38,43,.97); border: 1px solid #546158; box-shadow: 0 5px 18px rgba(0,0,0,.26); }
.profile-portrait { grid-row: 1 / 3; width: 72px; height: 72px; padding: 0; border-radius: 12px; border: 2px solid var(--pc); background: var(--paper); overflow: hidden; cursor: pointer; color: var(--ink); font-size: 30px; }
.profile-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-readout { min-width: 0; line-height: 1.2; }
.profile-name { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.profile-name > span { font-size: 10px; color: var(--hud-dim); }
.profile-overview { margin-left: auto; font-size: 10px; padding: 2px 8px; border: 1px solid #63766e; background: transparent; color: #d0dfd4; border-radius: 4px; cursor: pointer; }
.profile-assets { color: var(--hud-dim); font-size: 11px; margin: 3px 0; }
.profile-assets strong { color: var(--gold-lt); font-size: 23px; font-variant-numeric: tabular-nums; margin-left: 5px; }
.profile-cash { font-size: 11px; color: var(--hud-dim); }
.profile-cash b { color: white; font-size: 13px; }
.profile-cash b.neg { color: #ff9b90; }
#myPaperBonus { margin-left: 8px; padding: 2px 5px; background: #4b4930; color: #ffe6a1; border: 1px solid #817449; border-radius: 4px; font-size: 10px; cursor: pointer; }
.action-progress { display: flex; align-items: center; gap: 9px; grid-column: 2; font-size: 10px; color: #95a8ad; }
.action-progress .current { color: var(--gold-lt); font-weight: bold; }
.action-progress .sell-btn { margin-left: auto; padding: 2px 6px; border: 1px solid #a6775a; border-radius: 4px; background: #44332b; color: #ffd9b4; cursor: pointer; font-size: 11px; }
.action-row.controls { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr 1.2fr; gap: 7px; padding: 0; }
.action-row.controls button { min-height: 52px; border: 1px solid #4b5e63; padding: 6px; background: #2b3c44; font-size: 13px; }
.action-row.controls button b, .action-row.controls button small { display: block; }
.action-row.controls button small { font-size: 10px; margin-top: 4px; font-weight: normal; opacity: .8; }
.action-row.controls button.primary { background: linear-gradient(#f5dc91,#dfb756); color: #342812; border-color: #f7df99; font-size: 16px; }
.action-row.controls .skill-btn.available { border-color: #a898c4; background: #3d3b55; }
#btnHand.available { border-color: #729d8b; }
#btnHand[aria-expanded="true"], #btnSkill[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--gold); }
.hand-wrap { width: min(410px,100%); padding: 7px 10px; background: rgba(29,43,48,.96); }
.hand-title, .hand-sub { font-size: 11px; letter-spacing: 0; }
.hand-card { width: 118px; padding: 6px 8px; }
.hand-card .hc-name { font-size: 13px; margin: 0; }
.hand-card .hc-kind { font-size: 9px; margin-bottom: 3px; }
.hand-empty { font-size: 12px; padding: 4px 0; }
.hand-bar { margin-top: 5px; gap: 8px; }
.hand-wrap .pager { margin-top: 5px; }
.hand-wrap .pager button { padding: 4px 9px; font-size: 11px; }
.sb-top > .sb-avatar { display: flex; width: 28px; height: 28px; flex-basis: 28px; }
.sb-top { flex-wrap: wrap; gap: 4px; }
.status-bar { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 6px 12px; }
.turn-portrait { display: inline-flex; width: 30px; height: 30px; flex: 0 0 30px; border: 2px solid var(--pc); border-radius: 50%; background: var(--paper); color: var(--ink); overflow: hidden; align-items: center; justify-content: center; font-size: 15px; }
.turn-portrait img { width: 100%; height: 100%; object-fit: cover; }
.status-bar.st-choose { background: #e1eddf; color: #244b3a; border-color: #83a68d; box-shadow: var(--shadow-soft); animation: none; }
.status-bar.st-you { background: #f1d68c; color: #44361d; box-shadow: var(--shadow-soft); }

/* 技能是真正可讀取／點選的浮層，保留角色肖像與明確發動鍵。 */
.skill-popover { position: fixed; z-index: 22; width: min(340px,calc(100vw - 16px)); padding: 16px; border-radius: 12px; border: 1px solid #bba982; background: #fff8e8; color: #3a3224; box-shadow: 0 8px 24px rgba(40,26,8,.3); }
.skill-pop-head { display: flex; gap: 12px; align-items: center; }
.skill-portrait { width: 52px; height: 52px; flex: 0 0 52px; border: 1px solid #c8bb9e; background: white; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.skill-portrait img { width: 100%; height: 100%; object-fit: contain; }
.skill-pop-head h3 { font: bold 21px var(--font-serif); margin: 0 0 6px; }
#skillQuota { font-size: 12px; color: #7a6847; }
.skill-popover p { font-size: 14px; line-height: 1.65; margin: 10px 0; }
.skill-popover .skill-usage { font-size: 12px; padding: 8px; background: #efe4c9; border-radius: 6px; }
#skillExtra { font-size: 13px; color: #684e24; }
.skill-pop-actions, .skill-opponents { display: flex; gap: 8px; }
.skill-pop-actions button, .skill-opponents button { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #bcad8e; background: #f8efdc; color: #4d3b20; cursor: pointer; font-family: inherit; }
.skill-pop-actions #btnSkillActivate { background: #345f4d; color: white; border-color: #345f4d; }
.skill-pop-actions button:disabled { opacity: .45; cursor: not-allowed; }
.skill-opponents button { font-size: 11px; padding: 5px; }
.skill-opponents button[aria-pressed="true"] { background: #dfd0a7; }

/* 紙牌路標：降低光暈，兩行呈現方向與前方地標。 */
.exit-chip { min-width: 185px; max-width: min(220px,calc(100vw - 24px)); padding: 8px 10px; border-radius: 8px; color: #3e382d; background: #fff9e9; border: 1px solid #b9aa86; box-shadow: 0 4px 12px rgba(40,26,8,.22); animation: none; }
.exit-heading { display: inline-flex; gap: 5px; align-items: center; }
.exit-type { font-size: 11px; color: #7f7158; font-weight: normal; }
.exit-bottom { display: flex; align-items: center; gap: 9px; justify-content: space-between; margin-top: 5px; }
.exit-meta { font-size: 11px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.exit-distance { font-size: 10px; margin: 0; flex-shrink: 0; color: #87744c; }
.exit-chip::after { border-top-color: #b9aa86; }
.exit-chip:hover, .exit-chip.hover { background: #fff0c2; color: #3e382d; border-color: #b18a32; box-shadow: 0 4px 12px rgba(70,48,12,.3); }
.exit-chip kbd.key-hint { color: #65583e; background: #e9dfc7; border-color: #c5b897; }
.nt-effect { font-size: 12px; line-height: 1.55; margin-top: 6px; color: #665639; }
.shop-art, .shop-mark { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; border-radius: 8px; }
.shop-mark { display: flex; align-items: center; justify-content: center; background: #e4d4ad; color: #5a4021; font: bold 23px var(--font-serif); }
.owned-hint { font-size: 11px; color: var(--hud-dim); margin: 8px 0; }
.owned-shop { display: flex; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--panel-line); }
.owned-shop > div { flex: 1; min-width: 0; }
.owned-shop b { display: block; font-size: 13px; }
.owned-shop small { display: block; font-size: 10px; color: var(--hud-dim); margin-top: 3px; font-weight: normal; }
.owned-shop strong { font-size: 14px; color: #c3e4cd; text-align: right; }
.owned-bonus { display: inline-block; font-size: 10px; margin-top: 5px; color: var(--hud-dim); }
.owned-bonus.on { color: var(--gold-lt); }
.log > div { padding: 8px 0; font-size: 12px; line-height: 1.65; }
.log-round { display: block; margin-bottom: 2px; color: var(--gold-lt); font-size: 10px; }
.char-card .char-skill { display: block; min-height: 30px; color: #ccd5d1; font-size: 12px; line-height: 1.5; }
.char-go { color: #9ebba9; border-top: none; margin-top: 3px; padding: 0; font-size: 10px; }
@media (max-width: 600px) {
  .action-dock { grid-template-columns: 64px minmax(0,1fr); padding: 8px; gap: 5px 8px; }
  .overview-mode .hud-pages { display: none; }
  .profile-portrait { width: 64px; height: 64px; }
  .profile-assets strong { font-size: 20px; }
  .profile-name { font-size: 12px; }
  .profile-cash, .profile-cash b { font-size: 11px; }
  .action-progress { font-size: 9px; gap: 5px; }
  .action-row.controls button { min-height: 48px; font-size: 12px; padding: 5px 3px; }
  .action-row.controls button.primary { font-size: 14px; }
  .action-row.controls button small { font-size: 9px; }
  .hand-card { flex: 0 0 118px; }
  .hand-title, .hand-sub { font-size: 10px; }
  .sb-top > .sb-avatar { width: 24px; height: 24px; flex-basis: 24px; }
  .sb-name { font-size: 12px; }
  .sb-rank { font-size: 10px; }
  .sb-shopcount { padding: 0 2px; font-size: 10px; }
  .turn-portrait { width: 24px; height: 24px; flex-basis: 24px; }
  .status-bar { font-size: 12px; }
  .char-card .char-skill { font-size: 10px; min-height: 30px; }
  .char-go { display: none; }
}