:root {
  --thao: #1565c0;
  --kavalan: #00897b;
  --hlaalua: #ef6c00;
  --seediq: #c62828;
  --bg: #f3ead9;
  --bg2: #e8dbc2;
  --paper: #fffdf8;
  --ink: #2a1e12;
  --ink-soft: #6d5c43;
  --line: #ddceb0;
  --accent: #b0652a;
  --accent-dark: #8a4e20;
  --gold: #d9a441;
  --danger: #b83227;
  --ok: #2e7d32;
  --gold-rgb: 217,164,65;
  --accent-rgb: 176,101,42;
  --danger-rgb: 184,50,39;
  --r-lg: 18px;
  --r-md: 13px;
  --shadow-sm: 0 2px 6px rgba(60,40,15,0.10);
  --shadow-md: 0 6px 18px rgba(60,40,15,0.14);
  --shadow-lg: 0 12px 32px rgba(60,40,15,0.20);
  --fserif: "Noto Serif TC", "Songti TC", serif;
  --fsans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--fsans);
  font-size: 19px;
  line-height: 1.55;
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 15% -10%, rgba(217,164,65,0.16), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(176,101,42,0.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-attachment: fixed;
}

#app {
  max-width: 940px;
  margin: 0 auto;
  padding: 20px 18px 40px;
  min-height: 100vh;
}

h1, h2, h3 { margin: 0.3em 0; font-family: var(--fserif); letter-spacing: 0.02em; }
h1 { font-size: 1.9em; font-weight: 900; }
h2 { font-size: 1.45em; font-weight: 700; }
h3 { font-weight: 700; }

/* 全站按鈕：透明底＋發光外框（取代原本的實色/漸層填色） */
button {
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
  padding: 13px 20px;
  border-radius: var(--r-md);
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  margin: 4px;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
button:hover:not(:disabled) {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.55);
}
button:active:not(:disabled) { transform: translateY(0); box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.3); }
button:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
button.primary {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.45);
}
button.primary:hover:not(:disabled) { box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.75); }
button.danger {
  background: rgba(var(--danger-rgb), 0.08);
  color: var(--danger);
  border-color: var(--danger);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(var(--danger-rgb), 0.4);
}
button.danger:hover:not(:disabled) { box-shadow: 0 0 18px rgba(var(--danger-rgb), 0.65); }

input[type=text] {
  font-size: 1em;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--line);
  width: 100%;
}

.card-box {
  background: var(--paper);
  border: 30px solid transparent;
  border-image: url('assets/ui/frame-gold.png') 120 / 30px / 0 stretch;
  border-radius: var(--r-lg);
  padding: 10px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
  background-clip: padding-box;
}
/* 視覺主次：一個畫面裡只有最重要的區塊（我方）保留完整雕花金框，
   次要/唯讀區塊（戰場、行動選單、電腦回合狀態）改輕量金邊，避免密集重複的畫框感 */
.card-box.light-frame {
  border: 2px solid var(--gold);
  border-image: none;
  padding: 12px 16px;
}
.card-box h3 {
  border-left: 4px solid var(--gold);
  padding-left: 10px;
  margin: 16px 0 9px;
  color: var(--accent-dark);
}
.card-box h3:first-child, .card-box > h3:first-of-type { margin-top: 4px; }

.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.row.between { justify-content: space-between; }
.muted { color: var(--ink-soft); font-size: 0.85em; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fbf5e8;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.92em;
  box-shadow: var(--shadow-sm);
}

.tribe-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.tribe-thao { background: var(--thao); }
.tribe-kavalan { background: var(--kavalan); }
.tribe-hlaalua { background: var(--hlaalua); }
.tribe-seediq { background: var(--seediq); }

.tribe-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  margin-right: 6px;
  border: 2px solid rgba(255,255,255,0.8);
}
.tribe-icon-lg {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  margin-right: 6px;
  border: 2px solid var(--line);
}
.pass-tribe-img {
  width: 180px;
  max-width: 60vw;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.pass-screen {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}
.pass-screen .big { font-size: 2em; font-weight: bold; }

.hand-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  cursor: pointer;
  min-width: 116px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hand-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hand-card.culture { border-color: #8e5aa6; }
.hand-card.disabled { opacity: 0.4; cursor: not-allowed; }
.hand-card.selected { border-color: var(--accent); background: #f3e9d3; box-shadow: 0 0 0 2px rgba(166,116,45,0.35); }

.action-menu button {
  display: block;
  width: 100%;
  text-align: left;
  margin: 6px 0;
}
.action-menu .action-main { display: block; width: 100%; }
.action-menu .action-lock-reason {
  display: block;
  clear: both;
  margin-top: 3px;
  padding-right: 34px;
  color: rgba(245, 220, 174, .56);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
}
/* Hick 定律：11 顆行動按鈕分組（基礎/建造/對抗），降低單次掃視的選項數 */
.action-group-label {
  font-size: 0.78em;
  font-weight: 700;
  color: var(--accent-dark);
  text-transform: none;
  letter-spacing: 0.04em;
  margin: 14px 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px dashed var(--line);
}
.action-group-label:first-of-type { margin-top: 6px; }
.action-menu .action-suggest {
  border: 2px solid var(--gold);
  background: transparent;
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.5);
}
.action-menu .action-suggest:hover:not(:disabled) { box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.75); }
.action-menu button.action-ready:not(.danger) {
  position: relative;
  border-left: 3px solid rgba(255, 215, 106, 0.88);
  background: rgba(255, 255, 255, 0.06);
}
.action-menu button.action-ready:not(.danger)::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd76a;
  box-shadow: 0 0 9px rgba(255, 215, 106, 0.78);
  transform: translateY(-50%);
}
.action-menu button.action-ready:not(.danger) {
  padding-left: 22px;
}

/* 行動選單改暗色戰情面板，按鈕改成扁平列表列（貼近參考圖），貼身標籤/建議動作維持發光外框凸顯 */
.card-box.light-frame.action-menu {
  background: linear-gradient(180deg, rgba(42,30,15,0.94), rgba(20,14,6,0.96));
  color: #f0e2c4;
}
.action-menu h3 { color: #ffe4a3; border-left-color: var(--gold); }
.action-menu .action-group-label { color: var(--gold); border-bottom-color: rgba(217,164,65,0.3); }
.action-menu button:not(.action-suggest):not(.danger) {
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #f0e2c4;
  box-shadow: none;
}
.action-menu button:not(.action-suggest):not(.danger):hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  transform: none;
  box-shadow: none;
}
.action-menu .ap-cost { background: rgba(var(--gold-rgb), 0.28); color: #ffe4a3; }
.ap-cost {
  float: right;
  background: var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8em;
}

/* 行動點數追蹤器：清楚顯示「還能做幾件事」＋圓點 */
.ap-tracker {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.16), rgba(var(--gold-rgb), 0.06));
  border: 1px solid rgba(var(--gold-rgb), 0.4);
}
.ap-tracker-top { display: flex; align-items: baseline; justify-content: space-between; }
.ap-tracker-label { font-size: 0.85em; color: #f3e0b6; letter-spacing: 0.04em; }
.ap-tracker-count { color: #ffe9b0; font-size: 0.95em; }
.ap-tracker-count b { font-size: 1.5em; color: #ffd76a; font-weight: 900; }
.ap-pips { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.ap-pip {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #f0b93f 60%, #b9812a);
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.ap-pip.used {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.35);
}
.ap-pips-lg { justify-content: center; margin-top: 10px; }
.ap-pips-lg .ap-pip { width: 22px; height: 22px; }
.dice-ap-line { font-size: 1.15em; margin: 10px 0 2px; }
.dice-ap-line b { color: var(--accent); font-size: 1.2em; }
.log-title { margin: 10px 0 4px; font-size: 0.82em; color: rgba(217, 164, 65, 0.85); letter-spacing: 0.04em; }
.turn-hint {
  margin: 0 0 10px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 106, 0.34);
  background: rgba(255, 215, 106, 0.11);
  color: #ffe9b0;
  font-size: 0.88em;
  line-height: 1.45;
}

/* 目標提示面板：治「不知道要幹嘛」，把贏的路變成看得見的清單 */
/* A20：公共事件橫幅（戰場頂端，暗色卡牌質感） */
.event-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 7px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(60, 40, 92, 0.6), rgba(26, 18, 46, 0.7));
  border: 1px solid rgba(190, 160, 255, 0.4);
  box-shadow: inset 0 0 18px rgba(120, 90, 200, 0.18);
  animation: eventPop 0.5s cubic-bezier(.22, .8, .3, 1.2) both;
}
@keyframes eventPop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.event-banner .event-icon { font-size: 1.5em; line-height: 1; }
.event-banner .event-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.event-banner .event-text b { color: #f0e2ff; font-size: 0.98em; }
.event-banner .event-text small { color: rgba(226, 214, 255, 0.8); font-size: 0.78em; }
.event-banner .event-dur { margin-left: auto; flex: 0 0 auto; font-size: 0.72em; color: #1b1420; background: #d9c4f9; padding: 2px 8px; border-radius: 999px; font-weight: 700; }

/* A20：秘密目標面板（只有本人看得到；<details> 可收合） */
.objective-panel {
  margin-bottom: 10px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(92, 66, 26, 0.4), rgba(52, 38, 16, 0.34));
  border: 1px solid rgba(255, 206, 120, 0.5);
  overflow: hidden;
}
.objective-panel.done { border-color: rgba(150, 220, 120, 0.7); background: linear-gradient(180deg, rgba(52, 92, 40, 0.4), rgba(30, 60, 24, 0.34)); }
.objective-panel > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-weight: 800; color: #ffe9c4; font-size: 0.95em; }
.objective-panel > summary::-webkit-details-marker { display: none; }
.objective-panel .obj-icon { font-size: 1.15em; }
.objective-panel .obj-check { margin-left: auto; color: #1b1420; background: #b9e89a; padding: 1px 8px; border-radius: 999px; font-size: 0.78em; }
.objective-panel .obj-body { padding: 0 12px 10px; }
.objective-panel .obj-desc { font-size: 0.82em; color: rgba(240, 226, 196, 0.82); margin-bottom: 6px; }
.objective-panel .obj-progress { height: 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.objective-panel .obj-bar { height: 100%; background: linear-gradient(90deg, #ffcf69, #ff9d3c); transition: width 0.4s ease; }
.objective-panel.done .obj-bar { background: linear-gradient(90deg, #9be07a, #5fbf46); }
.objective-panel .obj-count { margin-top: 5px; font-size: 0.78em; color: rgba(240, 226, 196, 0.7); }

/* A20：結算秘密目標揭曉 */
.end-objectives { margin: 14px 0 4px; }
.end-objectives h3 { color: #ffe4a3; margin: 0 0 8px; font-size: 1em; }
.end-obj-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; font-size: 0.86em; background: rgba(255, 255, 255, 0.05); margin-bottom: 5px; color: #f0e2c4; }
.end-obj-row.done { background: rgba(120, 200, 96, 0.16); }
.end-obj-row .end-obj-who { flex: 0 0 30%; font-weight: 700; }
.end-obj-row .end-obj-name { flex: 1 1 auto; }
.end-obj-row .end-obj-prog { opacity: 0.8; }
.end-obj-row .end-obj-mark { flex: 0 0 auto; font-weight: 700; color: rgba(240, 226, 196, 0.7); }
.end-obj-row.done .end-obj-mark { color: #b9e89a; }

.goal-panel {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(46, 92, 40, 0.34), rgba(28, 60, 24, 0.28));
  border: 1px solid rgba(126, 196, 96, 0.5);
}
.goal-head { font-weight: 800; color: #d6f0c0; font-size: 0.98em; }
.goal-head b { color: #ffe066; }
.goal-mats-label { margin-top: 6px; font-size: 0.78em; color: rgba(240, 240, 210, 0.75); }
.goal-mats { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.goal-mat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 0.68em;
  min-width: 44px;
}
.goal-mat img { width: 24px; height: 24px; }
.goal-mat-name { color: rgba(255, 245, 220, 0.8); }
.goal-mat.ok { background: rgba(126, 196, 96, 0.22); }
.goal-mat.ok .goal-mat-mark { color: #8fe06a; font-weight: 800; }
.goal-mat.miss { background: rgba(184, 60, 50, 0.22); opacity: 0.85; }
.goal-mat.miss img { filter: grayscale(0.7) opacity(0.6); }
.goal-mat.miss .goal-mat-mark { color: #ff9a7a; font-weight: 800; }
.goal-next { margin-top: 4px; font-size: 0.82em; line-height: 1.5; color: #ffe9c4; }
.goal-next b { color: #ffd76a; }

.bld-remain {
  margin-left: 10px;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 0.62em;
  font-weight: 800;
  vertical-align: middle;
  background: rgba(126, 196, 96, 0.25);
  border: 1px solid rgba(126, 196, 96, 0.55);
  color: #d6f0c0;
}
.bld-remain.done { background: rgba(var(--gold-rgb), 0.28); border-color: rgba(var(--gold-rgb), 0.6); color: #ffe9b0; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 22, 12, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 120;
}
.modal {
  background: var(--paper);
  border: 30px solid transparent;
  border-image: url('assets/ui/frame-gold.png') 120 / 30px / 0 stretch;
  border-radius: 16px;
  padding: 16px 20px;
  max-width: min(560px, calc(100vw - 24px));
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background-clip: padding-box;
}

.log-box {
  background: linear-gradient(180deg, #2a1e12, #1e150b);
  border: 1px solid #4a3722;
  border-radius: var(--r-md);
  padding: 12px 16px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.85em;
  color: #d9c6a4;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.45);
}
.log-box div { margin: 3px 0; padding-left: 10px; border-left: 2px solid rgba(217,164,65,0.4); }
.log-box div:last-child { color: #ffe4a8; font-weight: 500; }

.rps-btn {
  width: 104px;
  padding: 14px 8px 12px;
  font-size: 1.15em;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* 揭曉：雙方出拳並排，勝方發光 */
.rps-reveal { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 14px 0 6px; }
.rps-reveal-side { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 12px; border: 2px solid transparent; min-width: 96px; }
.rps-reveal-side.win { border-color: var(--gold); background: rgba(255, 207, 105, 0.12); box-shadow: 0 0 18px rgba(255, 196, 92, 0.4); }
.rps-reveal-side .rps-icon { width: 56px; height: 56px; }
.rps-reveal-name { font-size: 0.82em; opacity: 0.85; }
.rps-reveal-move { font-weight: 700; font-size: 1.05em; }
.rps-reveal-vs { font-weight: 900; font-size: 1.2em; color: var(--gold); opacity: 0.8; }

/* score-table 只用在結算畫面（暗色木雕面板內），直接做深色主題不影響其他頁 */
.end-score-scroll { width: 100%; overflow-x: auto; border-radius: var(--r-md); scrollbar-color: #b88731 rgba(0,0,0,.2); }
.end-score-scroll:focus-visible { outline: 2px solid #e4ba60; outline-offset: 3px; }
.score-table { width: 100%; border-collapse: collapse; border-radius: var(--r-md); overflow: hidden; margin: 4px 0 8px; }
.score-table th, .score-table td { padding: 10px 8px; text-align: center; color: #f3e6cc; }
.score-table th { background: linear-gradient(180deg, #6b4a1e, #3f2a10); color: #ffe4a3; font-family: var(--fserif); border-bottom: 1px solid rgba(217,164,65,0.4); }
.score-table td { border-bottom: 1px solid rgba(217,164,65,0.15); }
.score-table tr:nth-child(even) td { background: rgba(255,255,255,0.04); }
.score-table tr.is-winner td { background: linear-gradient(180deg, rgba(217,164,65,0.3), rgba(217,164,65,0.12)); font-weight: 700; color: #ffe9bc; }

.winner-banner { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 4px 0 16px; }
.winner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(217,164,65,0.22), rgba(217,164,65,0.08));
  border: 2px solid var(--gold);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.winner-card img {
  width: 60px; height: 60px; border-radius: 50%;
  object-fit: cover; object-position: top center;
  border: 2px solid var(--gold);
}
.winner-name { font-weight: 800; color: #ffe9bc; font-family: var(--fserif); }
.winner-score { color: var(--gold); font-weight: 700; }
.end-kicker { text-align: center; color: #d9b96d; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.end-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.end-actions .primary-start-button { margin: 0; }
.end-actions .secondary-lore-button { min-height: 54px; padding-inline: 24px; }

/* ── 世界觀介紹頁：沿用 .setup-panel 暗色木框，族群卡改小卡陳列 ── */
.story-panel p { line-height: 1.9; }
.story-kicker { color: #d9b968; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-align: center; }
.story-lead { max-width: 760px; margin: 0 auto 18px; color: rgba(248,235,205,.8); text-align: center; }
.story-lead b { color: #ffe39a; }
.story-loop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 18px; }
.story-loop article { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: start; padding: 14px; border: 1px solid rgba(255,211,116,.3); border-radius: 13px; background: rgba(255,255,255,.045); }
.story-loop article > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #d9a441; border-radius: 50%; color: #1f1408; background: #e3b956; font-weight: 900; }
.story-loop article div { display: grid; gap: 4px; }
.story-loop b { color: #ffe9b8; }
.story-loop small { color: rgba(242,226,193,.68); font-size: 12px; line-height: 1.55; }
.story-lore { margin: 14px auto 0; max-width: 820px; border: 1px solid rgba(255,211,116,.24); border-radius: 12px; background: rgba(0,0,0,.13); }
.story-lore summary { padding: 12px 15px; color: #e6cb90; font-weight: 800; cursor: pointer; }
.story-lore p { margin: 0; padding: 0 15px 12px; color: rgba(242,226,193,.72); font-size: 13px; }
.story-tribe-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0 10px;
}
.story-tribe-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(217,164,65,0.14), rgba(217,164,65,0.04));
  border: 1.5px solid rgba(217,164,65,0.5);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  text-align: center;
}
@media (max-width: 700px) {
  .story-loop { grid-template-columns: 1fr; }
  .story-loop article { grid-template-columns: 38px 1fr; }
}
.story-tribe-card img { width: 100%; max-width: 88px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
.story-tribe-name { font-weight: 800; color: #ffe9bc; font-family: var(--fserif); font-size: 0.95em; margin-top: 4px; }
.story-tribe-produces { font-size: 0.72em; color: rgba(248,230,190,0.75); }

@media (max-width: 600px) {
  .story-tribe-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── 桌面視覺重整 v2：資源、牌架、資訊層級統一 ── */
.table-surface { background-color: #17110b; }
.board-viewport {
  grid-template-columns: 244px minmax(420px, 1fr) 320px;
  gap: 12px;
  padding: 14px 18px 12px;
}
.bv-header { padding: 6px 10px; }
.bv-header h1 { letter-spacing: .04em; font-size: clamp(1.1rem, 1.8vw, 1.55rem); }
.bv-versus .versus-strip { border: 1px solid rgba(255,220,145,.34); background: rgba(18,12,6,.76); box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.bv-resources, .bv-buildings, .bv-side .card-box { border: 1px solid rgba(255,220,145,.3); border-radius: 16px; }
.bv-resources { background: linear-gradient(180deg, rgba(37,24,12,.97), rgba(19,12,6,.98)); }
.bv-buildings { background: linear-gradient(180deg, rgba(255,251,241,.98), rgba(244,232,207,.98)); }
.bv-side { gap: 10px; }
.bv-side .action-menu { border: 1px solid rgba(255,220,145,.34); border-radius: 16px; }
.bv-hand { min-height: 190px; border-radius: 16px; }

/* 素材數量改為圖示下方的數量牌，不再覆蓋圖片 */
.mat-dock {
  left: 24px;
  bottom: 18px;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 10px 6px;
  border: 1px solid rgba(255,220,145,.24);
  border-radius: 16px;
  background: rgba(18,11,5,.74);
  box-shadow: 0 10px 24px rgba(0,0,0,.34);
}
.mat-dock-coin { width: 58px; height: 82px; text-align: center; }
.mat-dock-coin img { width: 52px; height: 52px; margin: 0 auto 4px; }
.mat-dock-num {
  position: static;
  width: 100%;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #f4e3bc;
  color: #2b1a0c;
  font-size: 15px;
  line-height: 1;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(108,70,25,.35), 0 2px 5px rgba(0,0,0,.3);
}
.mat-dock-coin::after { content: attr(data-mat); display: block; margin-top: 3px; color: #f4e5c7; font-size: 10px; white-space: nowrap; }

@media (max-width: 860px) {
  .board-viewport { grid-template-columns: 1fr; padding: 10px; }
  .mat-dock { position: static; margin: 8px auto; }
}

/* ── 數位卡牌戰場主題：滿版、中央戰場、前景牌架 ── */
.table-surface {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(74,52,96,.32), transparent 48%),
    linear-gradient(180deg, rgba(7,8,18,.32), rgba(7,7,13,.76)),
    url('assets/ui/table-wood.jpg') center/cover;
}
.board-viewport {
  grid-template-columns: 218px minmax(460px, 1fr) 278px;
  grid-template-rows: auto auto minmax(310px, 1fr) auto;
  gap: 10px;
  padding: 12px 16px 14px;
}
.bv-header { padding: 2px 8px; }
.bv-header h1 { color: #fff5dc; text-shadow: 0 2px 14px #000; letter-spacing: .08em; }
.bv-versus .versus-strip { padding: 4px 8px; border-radius: 12px; background: rgba(9,10,20,.72); border-color: rgba(255,207,111,.5); }
.bv-versus .vs-player { background: rgba(23,24,42,.68); }
.bv-resources {
  background: rgba(8,10,19,.82);
  border: 1px solid rgba(143,164,216,.32);
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
}
.bv-resources h3 { color: #ffe3a5; }
.bv-buildings {
  background: radial-gradient(ellipse at 50% 45%, rgba(42,47,86,.84), rgba(9,12,27,.92));
  border: 1px solid rgba(255,206,107,.55);
  box-shadow: 0 16px 42px rgba(0,0,0,.42), inset 0 0 45px rgba(84,71,156,.18);
}
.bv-buildings .bld-centerpiece-title { color: #fff0c5; text-shadow: 0 2px 8px #000; }
.bv-side .action-menu, .bv-side .log-box, .bv-side .card-box {
  background: rgba(8,10,20,.86);
  border: 1px solid rgba(144,165,219,.34);
  box-shadow: 0 12px 28px rgba(0,0,0,.34);
}
.bv-side .action-menu h3, .bv-side .action-group-label { color: #ffd97e; }
.bv-side .action-menu button { background: rgba(255,255,255,.06); border-color: rgba(255,220,140,.24); color: #fff1d0; }
.bv-side .action-menu button:hover:not(:disabled) { background: rgba(255,207,105,.16); border-color: #ffd978; }
.bv-hand {
  min-height: 214px;
  padding: 18px 24px 12px;
  justify-content: center;
  background: linear-gradient(180deg, rgba(6,7,16,.08), rgba(5,6,14,.8));
  border: 1px solid rgba(255,211,116,.3);
  box-shadow: 0 -20px 44px rgba(0,0,0,.26);
}
.bv-hand .hand-card,
.bv-hand .hand-card:nth-child(odd), .bv-hand .hand-card:nth-child(even), .bv-hand .hand-card:nth-child(3n) {
  width: 144px; min-width: 144px; height: 184px; padding: 9px;
  border-radius: 14px; border: 2px solid rgba(255,211,116,.84);
  background: linear-gradient(160deg,#fffdf7,#e9d6ad);
  transform: rotate(var(--tilt, 0deg));
}
.bv-hand .hand-card:nth-child(odd) { --tilt: -2deg; }
.bv-hand .hand-card:nth-child(even) { --tilt: 2deg; }
.bv-hand .hand-card:hover { transform: translateY(-18px) scale(1.08) rotate(0); }
.bv-hand .hand-card .card-thumb { height: 98px; }
.bv-hand .hand-card-info b { font-size: 14px; }
.bv-hand .hand-card-info span { font-size: 12px; }
.empty-hand-state { background: rgba(9,10,22,.66); border-color: rgba(255,211,116,.42); }
.mat-dock { left: 22px; bottom: 22px; background: rgba(7,8,17,.88); border-color: rgba(255,211,116,.4); }
.mat-dock-num { background: #f9e5b1; color: #1b1420; }

/* ── 開局準備畫面：從表單改成選角／發牌前的準備桌 ── */
.setup-screen {
  align-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(87,67,150,.28), transparent 42%),
    linear-gradient(180deg, rgba(8,9,20,.4), rgba(8,8,15,.88)),
    url('assets/ui/hero-home.jpg') center/cover;
}
.setup-panel {
  position: relative;
  width: min(1180px, 94vw);
  padding: 30px 34px 34px;
  border-radius: 20px;
  background: rgba(10,12,25,.88);
  border: 1px solid rgba(255,211,116,.55);
  box-shadow: 0 24px 70px rgba(0,0,0,.62), inset 0 0 50px rgba(72,78,150,.12);
}
.setup-panel h2 { margin-bottom: 8px; font-size: clamp(30px, 4vw, 48px); color: #fff1c8; }
.setup-back {
  position: absolute;
  top: 22px;
  left: 24px;
  min-height: 42px;
  padding: 8px 14px;
  color: #f1d69d;
  border-color: rgba(255,211,116,.34);
  background: rgba(9,10,20,.45);
}
.setup-meta { display: flex; justify-content: center; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.setup-meta span { padding: 4px 10px; color: #dbc391; border: 1px solid rgba(255,211,116,.2); border-radius: 999px; background: rgba(255,255,255,.04); font-size: 12px; }
.setup-section-label { margin: 0 auto 8px; color: #d9c49a; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-align: center; }
.name-field-label small { margin-left: 5px; color: rgba(255,235,194,.55); font-size: 11px; font-weight: 500; }
.setup-panel .name-field {
  width: min(420px, 100%);
  margin: 0 auto 18px;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,211,116,.3);
}
.setup-panel .player-count-row { justify-content: center; gap: 10px; margin-bottom: 24px; }
.setup-panel .player-count-row .option-button { min-width: 92px; background: rgba(255,255,255,.07); color: #ffe8b5; }
.setup-panel .player-count-row .option-button.is-active { background: #d7a63d; color: #21140a; border-color: #ffe4a0; }
.setup-panel .player-row {
  margin: 18px 0 8px;
  padding: 8px 14px;
  border-left: 3px solid #d7a63d;
  background: rgba(255,255,255,.055);
  color: #fff1cd;
}
.setup-panel .player-tag { color: #ffd56d; font-weight: 900; }
.setup-panel .player-tag-fixed { color: #e8d8b7; }
.setup-panel .tribe-pick-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.setup-panel .tribe-pick {
  position: relative;
  min-height: 150px;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: #15172b;
  color: #fff3d0;
  box-shadow: 0 8px 18px rgba(0,0,0,.3);
}
.setup-panel .tribe-pick img { width: 100%; height: 112px; object-fit: cover; display: block; }
.setup-panel .tribe-pick span { display: block; padding: 6px; font-weight: 900; }
.setup-panel .tribe-pick:hover:not(:disabled) { transform: translateY(-5px); border-color: #ffe08a; }
.setup-panel .tribe-pick.is-active { border-color: #ffd15e; box-shadow: 0 0 0 3px rgba(255,209,94,.22), 0 14px 24px rgba(0,0,0,.45); }
.setup-panel .tribe-pick.is-active::after { content: '已選擇'; position: absolute; top: 8px; right: 8px; padding: 3px 7px; border-radius: 999px; background: #f2c451; color: #21140a; font-size: 11px; font-weight: 900; }
.setup-panel .primary-start-button { display: block; margin: 24px auto 0; min-height: 64px; font-size: 27px; }

@media (max-width: 700px) {
  .setup-panel { padding: 22px 16px 26px; }
  .setup-screen .setup-panel { padding-top: 70px; }
  .setup-back { top: 16px; left: 16px; }
  .setup-panel .tribe-pick-row { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

/* ── 傳裝置畫面：套進暗色木框後，.muted 需改亮色維持對比 ── */
.setup-panel .pass-screen { min-height: auto; padding: 6px 0; }
.setup-panel .pass-screen .muted { color: rgba(248,230,190,0.7); }

.mat-icon { display: inline-flex; align-items: center; gap: 4px; }
.mat-coin { width: 26px; height: 26px; display: block; }

.card-thumb {
  width: 84px;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto 6px;
}
.card-thumb-sm {
  width: 30px;
  height: auto;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 2px;
}
.card-back-sm {
  width: 22px;
  height: auto;
  border-radius: 3px;
  vertical-align: middle;
}
.card-chip { padding-left: 4px; }

.other-players { display: flex; flex-wrap: wrap; gap: 10px; }
.other-players .card-box { flex: 1 1 200px; margin-bottom: 0; }

/* ── 世界觀頁沿用的族群展示／CTA（首頁另有專屬的電影感主選單樣式，見下） ── */
.hero-tribes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 10px 0; }
.hero-tribes img {
  width: 120px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transition: transform 0.25s ease;
}
.hero-tribes img:hover { transform: translateY(-6px) scale(1.05); }
.hero-ctas { display: flex; flex-direction: column; gap: 10px; align-items: center; }

.cta {
  font-size: 1.25em;
  font-weight: bold;
  padding: 16px 44px;
  border-radius: 999px;
  background: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-primary {
  background: transparent;
  color: var(--accent-dark);
  border: 2px solid var(--gold);
  box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.5);
}
.cta-primary:hover:not(:disabled) {
  transform: scale(1.07);
  box-shadow: 0 0 26px rgba(var(--gold-rgb), 0.85);
  border-color: #ffc45c;
}
.cta-secondary {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}
.cta-secondary:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55);
}

/* ── 首頁：電影感遊戲主選單 ── */
.home-screen, .setup-screen, .end-screen {
  /* 逃出 #app 的 max-width/padding，做出滿版電影感畫面 */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -20px;
  margin-bottom: -40px;
  width: 100vw;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(rgba(12, 8, 3, 0.2), rgba(12, 8, 3, 0.55)),
    url('assets/ui/hero-home.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 56px);
}
.home-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  /* 暗角濾鏡：視覺焦點集中畫面中央，營造篝火旁的暗色神祕氛圍（僅套在電影感畫面，不影響對局中的可讀性） */
  background:
    radial-gradient(circle, transparent 40%, rgba(0, 0, 0, 0.8) 100%),
    radial-gradient(circle at center, rgba(255, 204, 120, 0.12), transparent 38%),
    radial-gradient(circle at bottom left, rgba(255, 120, 40, 0.18), transparent 28%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.68));
  pointer-events: none;
  z-index: 0;
}
.home-screen::after {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(229, 176, 85, 0.45);
  box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  z-index: 1;
}
.home-frame {
  position: relative;
  z-index: 2;
  width: min(1120px, 94vw);
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 36px);
  padding: clamp(28px, 5vw, 64px);
}

.title-plaque {
  position: relative;
  width: min(820px, 92vw);
  text-align: center;
  padding: 26px 48px 24px;
  color: #f8e6b8;
  background: linear-gradient(180deg, rgba(88, 52, 18, 0.96), rgba(37, 22, 10, 0.96));
  border: 4px solid #b89742;
  border-radius: 18px;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.8),
    0 10px 25px rgba(0, 0, 0, 0.5),
    0 18px 48px rgba(0, 0, 0, 0.55),
    inset 0 0 24px rgba(255, 219, 135, 0.14);
}
.title-plaque::before, .title-plaque::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 54px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d9a441, transparent);
}
.title-plaque::before { left: 18px; }
.title-plaque::after { right: 18px; }
.title-plaque h1 {
  margin: 0;
  font-size: clamp(42px, 7vw, 76px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.04em;
  /* 文字漸層雕刻感：金亮到金銅漸層 + drop-shadow（transparent 文字用 filter 而非 text-shadow，避免陰影跟裁切衝突） */
  background: linear-gradient(to bottom, #fff3c4, #d4af37);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 10px rgba(229, 193, 88, 0.3))
    drop-shadow(0 12px 28px rgba(0, 0, 0, 0.72));
}
.title-plaque p {
  margin: 14px 0 0;
  font-size: clamp(16px, 2vw, 22px);
  color: rgba(255, 239, 205, 0.92);
  letter-spacing: 0.04em;
}

.tribe-card-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: clamp(14px, 2vw, 26px);
  align-items: end;
  padding: 20px 26px 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(45, 27, 12, 0.18), rgba(15, 9, 4, 0.52));
  box-shadow: 0 26px 42px rgba(0, 0, 0, 0.42), inset 0 -18px 28px rgba(0, 0, 0, 0.45);
}
.tribe-card-stage::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 8px;
  height: 20px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 178, 65, 0.32), transparent 68%);
  filter: blur(5px);
  pointer-events: none;
}
.tribe-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transform: translateY(0);
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.48));
}
.tribe-card img { display: block; width: 100%; border-radius: 10px; }
.tribe-card-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 6px 7px;
  text-align: center;
  font-family: var(--fserif);
  font-weight: 800;
  font-size: clamp(13px, 1.6vw, 16px);
  color: #ffe9b0;
  letter-spacing: 0.06em;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 65%, transparent 100%);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}
/* .tribe-thao 等 class 原本是給 .tribe-badge 上純色底，套到卡片上要先中和背景副作用 */
.tribe-card.tribe-thao, .tribe-card.tribe-kavalan, .tribe-card.tribe-hlaalua, .tribe-card.tribe-seediq { background: none; }
.tribe-card:hover {
  transform: translateY(-8px) scale(1.035);
  border-color: rgba(255, 226, 154, 0.7);
  filter: drop-shadow(0 22px 24px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 16px rgba(255, 197, 96, 0.28));
}
/* 卡片 hover 依族色發光（沿用現有 --thao/--kavalan/--hlaalua/--seediq 色票，不改動色彩對應） */
.tribe-card.tribe-thao:hover    { border-color: var(--thao);    filter: drop-shadow(0 22px 24px rgba(0,0,0,0.62)) drop-shadow(0 0 18px var(--thao)); }
.tribe-card.tribe-kavalan:hover { border-color: var(--kavalan); filter: drop-shadow(0 22px 24px rgba(0,0,0,0.62)) drop-shadow(0 0 18px var(--kavalan)); }
.tribe-card.tribe-hlaalua:hover { border-color: var(--hlaalua); filter: drop-shadow(0 22px 24px rgba(0,0,0,0.62)) drop-shadow(0 0 18px var(--hlaalua)); }
.tribe-card.tribe-seediq:hover  { border-color: var(--seediq);  filter: drop-shadow(0 22px 24px rgba(0,0,0,0.62)) drop-shadow(0 0 18px var(--seediq)); }

.home-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* 透明底＋發光外框，取代原本的實色/金屬漸層填色按鈕 */
.primary-start-button {
  position: relative;
  min-width: 320px;
  min-height: 78px;
  padding: 0 48px;
  border: 2px solid var(--gold);
  border-radius: 14px;
  color: #ffe9b0;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: 0.12em;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.15);
  box-shadow:
    0 0 18px rgba(var(--gold-rgb), 0.65),
    inset 0 0 14px rgba(var(--gold-rgb), 0.15);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 220, 132, 0.45);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.primary-start-button::before, .primary-start-button::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%) rotate(45deg);
  border: 2px solid var(--gold);
  background: transparent;
}
.primary-start-button::before { left: 22px; }
.primary-start-button::after { right: 22px; }
.primary-start-button:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.05);
  border-color: #ffe699;
  box-shadow:
    0 0 34px rgba(var(--gold-rgb), 0.95),
    inset 0 0 18px rgba(var(--gold-rgb), 0.25);
}
.primary-start-button:active:not(:disabled) {
  transform: translateY(0) scale(1);
  box-shadow:
    0 0 10px rgba(var(--gold-rgb), 0.5),
    inset 0 0 10px rgba(var(--gold-rgb), 0.15);
}

.secondary-lore-button {
  min-width: 260px;
  min-height: 56px;
  padding: 0 36px;
  border-radius: 10px;
  border: 1px solid var(--gold);
  color: #f7ddb0;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.35);
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}
.secondary-lore-button:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: #ffe699;
  box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.6);
}

/* ── 設定玩家頁：同一套木雕金框風格 ── */
.setup-panel {
  position: relative;
  z-index: 2;
  width: min(880px, 94vw);
  padding: clamp(26px, 4vw, 48px);
  border-radius: 22px;
  border: 2px solid rgba(225, 177, 90, 0.78);
  background: linear-gradient(180deg, rgba(83, 51, 20, 0.92), rgba(29, 17, 8, 0.94));
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.58), inset 0 0 30px rgba(255, 210, 124, 0.13);
  color: #f8e6bf;
}
.setup-panel h2 {
  margin: 0 0 28px;
  text-align: center;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: 0.08em;
  color: #ffe4a3;
  text-shadow: 0 3px 0 #3e2109, 0 0 18px rgba(255, 200, 100, 0.35);
}
.setup-panel button, .setup-panel input {
  min-height: 52px;
  border-radius: 12px;
  font-size: 20px;
}
.setup-panel input {
  border: 1px solid rgba(217, 174, 105, 0.72);
  background: rgba(255, 242, 216, 0.92);
  color: #2a1708;
  padding: 0 18px;
  box-shadow: inset 0 2px 6px rgba(89, 52, 15, 0.28);
}
.setup-panel input::placeholder { color: rgba(64, 37, 15, 0.55); }
/* 玩家自己填名字：醒目一格 */
.name-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(var(--gold-rgb), 0.1);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
}
.name-field-label { font-size: 1.05em; font-weight: 800; color: #ffe4a3; letter-spacing: 0.04em; }
.name-field input { width: 100%; font-size: 22px; }

/* ── 連線對戰大廳 ── */
.net-lobby-panel { max-width: 640px; }
.net-section-label { margin: 6px 0 10px; font-weight: 800; color: #ffe4a3; }
.net-tribe-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.net-tribe-row .tribe-pick img { max-width: 72px; }
.net-actions { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.net-host-box, .net-join-box { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.net-join-box { flex-direction: row; justify-content: center; }
.net-or { color: rgba(248, 230, 191, 0.6); font-weight: 700; }
.net-player-count { display: flex; gap: 8px; margin: 0 0 12px; }
.net-player-count .option-button { flex: 0 0 84px; }
.room-code {
  margin: 14px auto;
  padding: 14px 28px;
  display: inline-block;
  font-size: 3em;
  font-weight: 900;
  letter-spacing: 0.3em;
  color: #ffd76a;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(var(--gold-rgb), 0.6);
  border-radius: 14px;
  text-shadow: 0 0 16px rgba(var(--gold-rgb), 0.6);
}
.room-code-input {
  font-size: 26px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  width: 160px;
}
/* 浮動靜音／配樂切換鈕（右下角常駐） */
.audio-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 224, 148, 0.3);
  background: rgba(18, 16, 12, 0.72);
  backdrop-filter: blur(8px);
  color: #ffe9c4;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.audio-toggle:hover { transform: scale(1.08); border-color: rgba(255, 224, 148, 0.6); }
.audio-toggle.is-muted { opacity: 0.6; }
.audio-toggle::after {
  content: attr(data-label);
  position: absolute;
  right: 52px;
  top: 50%;
  transform: translate(6px, -50%);
  width: max-content;
  padding: 6px 10px;
  border: 1px solid rgba(255,224,148,.28);
  border-radius: 8px;
  background: rgba(18,16,12,.92);
  color: #f5dfb0;
  font-size: 12px;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.audio-toggle:hover::after, .audio-toggle:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.motion-arrival { box-shadow: 0 0 0 3px rgba(232,190,93,.7), 0 0 24px rgba(232,190,93,.45) !important; }

.net-waiting { color: #ffe4a3; font-size: 1.1em; text-align: center; animation: ps5BtnBreath 1.6s ease-in-out infinite alternate; }
.net-error { color: #ff9a7a; text-align: center; }
/* 大廳入座名單 */
.net-roster { list-style: none; margin: 14px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.net-seat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 220, 140, 0.18);
  background: rgba(255, 255, 255, 0.05);
}
.net-seat.filled { border-color: rgba(255, 211, 116, 0.42); }
.net-seat.empty { opacity: 0.55; border-style: dashed; }
.net-seat img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.net-seat span { font-weight: 700; color: #ffe9c4; }
.net-seat em { font-style: normal; color: rgba(255, 233, 196, 0.72); font-size: 0.85em; }
.net-seat .net-seat-host { margin-left: auto; font-size: 0.72em; font-weight: 700; color: #1b1420; background: #f9e5b1; padding: 2px 8px; border-radius: 999px; }
.invite-url {
  display: block;
  width: 100%;
  margin: 6px 0 12px;
  font-size: 15px;
  text-align: center;
  color: #2a1708;
}
.net-invited {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(var(--gold-rgb), 0.16);
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  color: #ffe9b0;
  text-align: center;
}
.net-invited b { color: #ffd76a; letter-spacing: 0.15em; }

@media (max-width: 600px) {
  .net-tribe-row { gap: 6px; }
  .net-tribe-row .tribe-pick img { max-width: 100%; }
  .net-join-box { flex-direction: column; width: 100%; }
  .room-code-input { width: 100%; }
  .room-code { font-size: 2em; letter-spacing: 0.2em; padding: 12px 18px; }
  .invite-url { font-size: 13px; }
}

/* 首頁次要按鈕並排（連線對戰 / 世界觀介紹） */
.ps5-actions-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.player-count-row, .player-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.player-row input { flex: 1; min-width: 140px; }
.player-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  font-weight: 700;
}
.player-tag-fixed {
  color: rgba(248, 230, 191, 0.75);
  font-size: 0.9em;
}
.option-button, .player-type-button {
  min-height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  border: 1.5px solid rgba(218, 171, 90, 0.55);
  background: transparent;
  color: #f7ddb0;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.option-button:hover:not(:disabled), .player-type-button:hover:not(:disabled) {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.5);
}
.option-button.is-active, .player-type-button.is-active {
  background: transparent;
  color: #ffe9b0;
  border: 2px solid var(--gold);
  box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.7), inset 0 0 10px rgba(var(--gold-rgb), 0.2);
}

/* ── 設定畫面：選族群（A14） ── */
.tribe-pick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: -6px 0 18px;
}
.tribe-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 8px;
  border-radius: 10px;
  border: 1.5px solid rgba(218, 171, 90, 0.4);
  background: transparent;
  color: #f7ddb0;
  font-size: 0.78em;
  font-weight: 700;
  cursor: pointer;
  min-height: auto;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.tribe-pick img { width: 100%; max-width: 64px; border-radius: 7px; box-shadow: 0 3px 8px rgba(0,0,0,0.4); }
.tribe-pick:hover:not(:disabled) {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.5);
  transform: translateY(-2px);
}
.tribe-pick.is-active {
  background: transparent;
  color: #ffe9b0;
  border: 2px solid var(--gold);
  box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.7), inset 0 0 10px rgba(var(--gold-rgb), 0.2);
}
.tribe-pick:disabled { opacity: 0.3; cursor: not-allowed; }
.primary-start-button:disabled { filter: grayscale(0.6) brightness(0.75); cursor: not-allowed; }
.primary-start-button:disabled:hover { transform: none; }

/* ── 首頁 v3：PS5 / 主機 RPG 選單（依 JJ PS5_RPG_HOME_MENU_REDESIGN 工作單）── */
.ps5-home {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -20px;
  margin-bottom: -40px;
  width: 100vw;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  color: #f8e7bf;
  font-family: var(--fserif);
}
.ps5-home .ps5-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom, rgba(5, 6, 4, 0.12), rgba(5, 6, 4, 0.62)),
    url('assets/ui/hero-home.jpg') center/cover no-repeat;
  transform: scale(1.04);
}
.ps5-home .ps5-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 49% 43%, rgba(255, 214, 132, 0.08), transparent 34%),
    radial-gradient(circle at 53% 54%, transparent 36%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.16) 23%, rgba(0, 0, 0, 0.12) 65%, rgba(0, 0, 0, 0.58));
}
.ps5-home .ps5-focus-glow {
  position: absolute;
  z-index: 2;
  left: 14%;
  top: 18%;
  width: 58%;
  height: 64%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.16), transparent 68%);
}

/* 左側：主機遊戲選單（薄玻璃，浮於背景，不擠版面） */
.ps5-home .ps5-sidebar {
  position: fixed;
  left: 18px;
  top: 24px;
  bottom: 24px;
  z-index: 8;
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
  border-right: 1px solid rgba(255, 224, 148, 0.14);
}
.ps5-home .side-item {
  width: 136px;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 220, 140, 0.08);
  color: rgba(255, 238, 202, 0.68);
  background: rgba(12, 9, 5, 0.34);
  backdrop-filter: blur(12px);
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.ps5-home .side-item:hover {
  transform: translateX(4px);
  color: rgba(255, 238, 202, 0.96);
  background: rgba(255, 222, 144, 0.08);
  border-color: rgba(255, 218, 140, 0.24);
  box-shadow: none;
}
.ps5-home .side-item.active {
  color: #ffe8b4;
  background: linear-gradient(180deg, rgba(255, 210, 118, 0.16), rgba(55, 34, 12, 0.44));
  border-color: rgba(255, 213, 118, 0.52);
  box-shadow: 0 0 28px rgba(255, 188, 72, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ps5-home .side-icon { width: 24px; height: 24px; display: grid; place-items: center; color: rgba(255, 229, 170, 0.9); font-size: 16px; flex: none; }
.ps5-home .side-text b { display: block; font-size: 16px; line-height: 1.1; letter-spacing: 0.08em; }
.ps5-home .side-text small { display: block; margin-top: 4px; font-size: 10px; line-height: 1; letter-spacing: 0.16em; color: rgba(255, 225, 170, 0.48); }

/* 右上：小型工具列 */
.ps5-home .ps5-topbar {
  position: fixed;
  top: 24px;
  right: 36px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(19, 15, 10, 0.48);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 226, 160, 0.2);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ps5-home .ps5-topbar button {
  min-height: auto;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  color: rgba(255, 239, 205, 0.78);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 0.06em;
  box-shadow: none;
}
.ps5-home .ps5-topbar button:hover { color: #fff2cb; background: rgba(255, 255, 255, 0.08); box-shadow: none; }

/* 中央主內容區 */
.ps5-home .ps5-content {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  padding: clamp(88px, 9vh, 130px) clamp(48px, 5vw, 92px) clamp(72px, 8vh, 110px) clamp(190px, 14vw, 260px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(28px, 4vh, 46px);
}

.ps5-home .game-title-block { position: relative; max-width: 920px; text-align: left; }
.ps5-home .game-title-block::before {
  content: '';
  position: absolute;
  left: -38px;
  top: 50%;
  width: 110px;
  height: 110px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 217, 130, 0.12);
  border-radius: 50%;
  opacity: 0.7;
}
.ps5-home .game-title-block h1 {
  position: relative;
  margin: 0;
  font-size: clamp(46px, 5.8vw, 92px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #f8e3a9;
  text-shadow: 0 3px 0 rgba(54, 31, 8, 0.92), 0 18px 44px rgba(0, 0, 0, 0.72), 0 0 28px rgba(255, 209, 112, 0.22);
}
.ps5-home .game-title-block p {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
  font-size: clamp(15px, 1.35vw, 20px);
  color: rgba(255, 237, 203, 0.88);
  letter-spacing: 0.08em;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.75);
}
.ps5-home .game-title-block p::before, .ps5-home .game-title-block p::after {
  content: '';
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: rgba(255, 201, 83, 0.78);
}

/* 卡片 Carousel */
.ps5-home .tribe-carousel {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: min(880px, 70vw);
  gap: clamp(18px, 2vw, 30px);
  margin-top: 4px;
  align-self: center; /* 四族牌面在內容區水平置中 */
}
.ps5-home .tribe-card {
  position: relative;
  width: clamp(136px, 9.8vw, 188px);
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(20, 14, 8, 0.42);
  border: 1px solid rgba(255, 222, 144, 0.16);
  box-shadow: 0 24px 36px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: scale(0.94);
  opacity: 0.72;
  cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
  padding: 0;
  margin: 0;
  min-height: 0;
  color: inherit;
}
.ps5-home .tribe-card:hover { transform: translateY(-6px) scale(0.98); opacity: 0.92; }
.ps5-home .tribe-card.selected {
  transform: translateY(-8px) scale(1.08);
  opacity: 1;
  border-color: rgba(255, 225, 142, 0.86);
  box-shadow: 0 0 0 2px rgba(255, 225, 142, 0.22), 0 0 42px rgba(255, 196, 82, 0.32), 0 36px 54px rgba(0, 0, 0, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  filter: brightness(1.08);
}
.ps5-home .tribe-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps5-home .tribe-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 56%, rgba(0, 0, 0, 0.82));
  pointer-events: none;
}
.ps5-home .tribe-name {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  z-index: 2;
  text-align: center;
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #ffe8b8;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}
.ps5-home .carousel-arrow {
  min-height: auto;
  width: 40px;
  height: 70px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 214, 118, 0.8);
  font-size: 52px;
  line-height: 1;
  background: rgba(10, 8, 5, 0.16);
  cursor: pointer;
  box-shadow: none;
  transition: 150ms ease;
}
.ps5-home .carousel-arrow:hover { color: #ffe7ad; background: rgba(255, 220, 140, 0.08); box-shadow: none; }
.ps5-home .carousel-arrow.left { margin-right: -8px; }
.ps5-home .carousel-arrow.right { margin-left: -8px; }

/* 主按鈕區 */
.ps5-home .ps5-actions { width: min(880px, 70vw); display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 4px; }
.ps5-home .home-selection-copy { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; color:#ffe9b5; text-shadow:0 2px 8px #000; }
.ps5-home .home-selection-copy b { font-size:17px; }
.ps5-home .home-selection-copy span { color:rgba(255,237,202,.7); font-size:13px; }
.ps5-home .ps5-actions-row { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; }
.ps5-home .start-btn {
  position: relative;
  width: min(340px, 100%);
  min-height: 64px;
  border-radius: 999px;
  border: 1px solid rgba(255, 218, 128, 0.82);
  color: #fff1c8;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 900;
  letter-spacing: 0.14em;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 199, 84, 0.2), rgba(191, 104, 20, 0.18)), rgba(17, 12, 7, 0.66);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(255, 196, 82, 0.16), 0 0 34px rgba(255, 183, 65, 0.28), 0 18px 36px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.8), 0 0 16px rgba(255, 211, 126, 0.34);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.ps5-home .start-btn::before, .ps5-home .start-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%) rotate(45deg);
  border: 1px solid rgba(255, 205, 95, 0.86);
}
.ps5-home .start-btn::before { left: 28px; }
.ps5-home .start-btn::after { right: 28px; }
.ps5-home .start-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(255, 219, 140, 0.42), 0 0 52px rgba(255, 191, 78, 0.42), 0 26px 44px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.ps5-home .intro-btn {
  width: min(230px, 100%);
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 218, 128, 0.48);
  color: rgba(255, 238, 204, 0.9);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 800;
  letter-spacing: 0.1em;
  background: rgba(12, 10, 7, 0.48);
  backdrop-filter: blur(12px);
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ps5-home .intro-btn:hover { color: #fff1c8; border-color: rgba(255, 218, 128, 0.72); background: rgba(255, 218, 128, 0.08); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* 底部操作提示 */
.ps5-home .ps5-hints {
  position: fixed;
  left: 190px;
  bottom: 28px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 22px;
  color: rgba(255, 237, 203, 0.68);
  font-size: 14px;
  letter-spacing: 0.06em;
}
.ps5-home .ps5-hints span:not(:first-child)::before { content: '○'; margin-right: 6px; color: rgba(255, 220, 140, 0.7); }

@media (max-width: 1100px) {
  .ps5-home .ps5-content { padding-left: 176px; }
  .ps5-home .tribe-carousel, .ps5-home .ps5-actions { width: min(760px, 74vw); }
  .ps5-home .tribe-card { width: clamp(118px, 12vw, 156px); }
}

/* 漢堡鈕與遮罩：桌機隱藏，側欄常駐；手機才登場 */
.ps5-home .ps5-nav-toggle { display: none; }
.ps5-home .ps5-nav-scrim { display: none; }

@media (max-width: 820px) {
  /* 側欄改成左側滑出抽屜（重用既有 .ps5-sidebar 標記） */
  .ps5-home .ps5-sidebar {
    display: flex;
    left: 0; top: 0; bottom: 0;
    width: min(276px, 82vw);
    padding: 74px 16px 22px;
    gap: 8px;
    background: linear-gradient(180deg, rgba(20, 17, 12, 0.97), rgba(11, 9, 6, 0.98));
    border-right: 1px solid rgba(255, 224, 148, 0.18);
    box-shadow: 18px 0 46px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    transform: translateX(-104%);
    /* 關閉時用 visibility:hidden 把抽屜移出鍵盤 Tab 焦點順序（此規則僅在 ≤820px，桌機側欄常駐不受影響）；
       visibility 延遲 0.32s 切換，讓滑出動畫先播完再離開焦點 */
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(.22, .7, .24, 1), visibility 0s linear 0.32s;
    /* 蓋掉桌機進場動畫 ps5SlideRight（both 會把抽屜停在全開）*/
    animation: none !important;
    z-index: 21;
  }
  .ps5-home.nav-open .ps5-sidebar {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.32s cubic-bezier(.22, .7, .24, 1), visibility 0s;
  }
  .ps5-home .side-item { width: 100%; }

  /* 漢堡鈕（左上） */
  .ps5-home .ps5-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: fixed;
    left: 16px; top: 16px;
    width: 46px; height: 46px;
    padding: 0 11px;
    border-radius: 12px;
    border: 1px solid rgba(255, 224, 148, 0.24);
    background: rgba(18, 16, 12, 0.74);
    backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 23;
  }
  .ps5-home .ps5-nav-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 236, 196, 0.94);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .ps5-home.nav-open .ps5-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ps5-home.nav-open .ps5-nav-toggle span:nth-child(2) { opacity: 0; }
  .ps5-home.nav-open .ps5-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 遮罩 */
  .ps5-home .ps5-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .ps5-home.nav-open .ps5-nav-scrim { opacity: 1; pointer-events: auto; }

  .ps5-home .ps5-topbar { top: 16px; right: 16px; }
  .ps5-home .ps5-content { padding: 96px 22px 48px; align-items: center; text-align: center; }
  .ps5-home .game-title-block { text-align: center; }
  .ps5-home .game-title-block::before { display: none; }
  .ps5-home .game-title-block h1 { font-size: clamp(27px, 8.3vw, 36px); white-space: nowrap; }
  .ps5-home .game-title-block p { justify-content: center; font-size: 15px; }
  .ps5-home .tribe-carousel { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 16px; }
  .ps5-home .carousel-arrow { display: none; }
  .ps5-home .tribe-card, .ps5-home .tribe-card.selected, .ps5-home .tribe-card:hover { width: 100%; transform: none; }
  .ps5-home .tribe-card.selected { box-shadow: 0 0 0 2px rgba(255, 225, 142, 0.26), 0 0 34px rgba(255, 196, 82, 0.26), 0 22px 36px rgba(0, 0, 0, 0.58); }
  .ps5-home .ps5-actions { width: 100%; }
  .ps5-home .home-selection-copy { display:grid; gap:2px; text-align:center; }
  .ps5-home .ps5-actions-row { display:grid; grid-template-columns:1fr; width:min(340px,100%); }
  .ps5-home .start-btn,.ps5-home .intro-btn { width:100%; }
  .ps5-home .ps5-hints { display: none; }
}

/* ── 首頁動態：PS5 史詩感（環境動態＋進場編排）── */
/* 背景緩慢推移（Ken Burns），讓靜態照片活起來 */
.ps5-home .ps5-bg {
  animation: ps5BgDrift 46s ease-in-out infinite alternate;
}
@keyframes ps5BgDrift {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.2%, -1.6%); }
}

/* 火星粒子：兩層小光點以不同速度上飄，模擬篝火餘燼 */
.ps5-home .ps5-embers {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 88%, rgba(255, 190, 90, 0.85), transparent 60%),
    radial-gradient(1.6px 1.6px at 28% 74%, rgba(255, 160, 60, 0.7), transparent 60%),
    radial-gradient(2.4px 2.4px at 44% 92%, rgba(255, 205, 110, 0.8), transparent 60%),
    radial-gradient(1.4px 1.4px at 63% 80%, rgba(255, 175, 70, 0.65), transparent 60%),
    radial-gradient(2px 2px at 81% 87%, rgba(255, 195, 95, 0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 70%, rgba(255, 165, 65, 0.6), transparent 60%);
  background-repeat: repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: ps5EmberRise 16s linear infinite;
}
.ps5-home .ps5-embers-2 {
  background-image:
    radial-gradient(1.6px 1.6px at 20% 95%, rgba(255, 200, 100, 0.7), transparent 60%),
    radial-gradient(2.2px 2.2px at 37% 82%, rgba(255, 170, 65, 0.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 55% 90%, rgba(255, 210, 120, 0.75), transparent 60%),
    radial-gradient(2px 2px at 72% 78%, rgba(255, 180, 75, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 93%, rgba(255, 195, 90, 0.7), transparent 60%);
  animation-duration: 23s;
  animation-delay: -9s;
}
@keyframes ps5EmberRise {
  0%   { transform: translateY(6vh) scale(1);    opacity: 0; }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.5; }
  100% { transform: translateY(-58vh) scale(0.7); opacity: 0; }
}

/* 標題金光呼吸 */
.ps5-home .game-title-block h1 {
  animation: ps5TitleGlow 5.5s ease-in-out infinite alternate;
}
@keyframes ps5TitleGlow {
  from { text-shadow: 0 3px 0 rgba(54, 31, 8, 0.92), 0 18px 44px rgba(0, 0, 0, 0.72), 0 0 22px rgba(255, 209, 112, 0.16); }
  to   { text-shadow: 0 3px 0 rgba(54, 31, 8, 0.92), 0 18px 44px rgba(0, 0, 0, 0.72), 0 0 42px rgba(255, 209, 112, 0.42); }
}

/* 選中卡片微微浮動（idle 動態，像遊戲主選單等待輸入） */
.ps5-home .tribe-card.selected {
  animation: ps5CardIdle 3.6s ease-in-out infinite alternate;
}
@keyframes ps5CardIdle {
  from { transform: translateY(-8px) scale(1.08); }
  to   { transform: translateY(-14px) scale(1.08); }
}

/* 開始遊戲按鈕：光暈呼吸，全頁最亮的「等你按」訊號 */
.ps5-home .start-btn {
  animation: ps5BtnBreath 3.2s ease-in-out infinite alternate;
}
@keyframes ps5BtnBreath {
  from { box-shadow: 0 0 0 1px rgba(255, 196, 82, 0.16), 0 0 26px rgba(255, 183, 65, 0.2), 0 18px 36px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
  to   { box-shadow: 0 0 0 1px rgba(255, 205, 100, 0.3), 0 0 48px rgba(255, 183, 65, 0.42), 0 18px 36px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
}

/* ── 進場編排：切換到此畫面時，元素依序浮現（只播一次，由 render() 加 .screen-enter）── */
.screen-enter .ps5-sidebar { animation: ps5SlideRight 600ms cubic-bezier(.22,.7,.24,1) both; }
.screen-enter .ps5-topbar { animation: ps5FadeDown 600ms cubic-bezier(.22,.7,.24,1) 150ms both; }
.screen-enter .game-title-block { animation: ps5RiseIn 800ms cubic-bezier(.22,.7,.24,1) 100ms both; }
.screen-enter .tribe-carousel { animation: ps5RiseIn 800ms cubic-bezier(.22,.7,.24,1) 300ms both; }
.screen-enter .tribe-carousel .tribe-card:nth-child(2) { animation: ps5CardDeal 640ms cubic-bezier(.22,.7,.24,1) 360ms both; }
.screen-enter .tribe-carousel .tribe-card:nth-child(3) { animation: ps5CardDeal 640ms cubic-bezier(.22,.7,.24,1) 460ms both; }
.screen-enter .tribe-carousel .tribe-card:nth-child(4) { animation: ps5CardDeal 640ms cubic-bezier(.22,.7,.24,1) 560ms both; }
.screen-enter .tribe-carousel .tribe-card:nth-child(5) { animation: ps5CardDeal 640ms cubic-bezier(.22,.7,.24,1) 660ms both; }
.screen-enter .ps5-actions { animation: ps5RiseIn 800ms cubic-bezier(.22,.7,.24,1) 750ms both; }
.screen-enter .ps5-hints { animation: ps5Fade 900ms ease 1000ms both; }
/* 進場時卡片的 deal 動畫會覆蓋 idle 浮動，播完（fill:both 結束）後 idle 動畫自然接手 */

@keyframes ps5RiseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ps5FadeDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ps5SlideRight {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ps5Fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ps5CardDeal {
  from { opacity: 0; transform: translateY(34px) scale(0.86); }
  to   { opacity: 1; }
}

/* 其他畫面（設定/故事/對局/結算）切換時的通用淡入，讓整站換頁都有轉場感 */
.setup-screen.screen-enter, .end-screen.screen-enter { animation: ps5Fade 450ms ease both; }
.setup-screen.screen-enter .setup-panel, .end-screen.screen-enter .setup-panel { animation: ps5RiseIn 600ms cubic-bezier(.22,.7,.24,1) 80ms both; }
.table-surface.screen-enter { animation: ps5Fade 500ms ease both; }

/* 尊重使用者的減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
  .ps5-home .ps5-bg, .ps5-home .ps5-embers, .ps5-home .game-title-block h1,
  .ps5-home .tribe-card.selected, .ps5-home .start-btn,
  .screen-enter, .screen-enter *, .die-cube.dice-rolling, .speech-bubble,
  .game-impact, .action-denied, .net-waiting, .rps-reveal-side,
  .draw-flight, .coin-flight, .tutorial-highlight { animation: none !important; transition: none !important; }
  .audio-toggle::after { transition: none; }
}

/* ── 手機首頁選角閉環（主卡＋縮圖列＋固定 CTA）──
   桌機沿用既有 carousel，以下三個元件僅手機顯示；族群卡改語意化 <button> 的通用重置。 */
.ps5-home .home-lead,
.ps5-home .tribe-stage,
.ps5-home .home-cta-bar { display: none; }
.ps5-home .tribe-card {
  font-family: inherit;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 820px) {
  /* 動態視窗高度，避免行動瀏覽器工具列伸縮造成 100vh 溢出 */
  .ps5-home { min-height: 100vh; min-height: 100dvh; }
  /* 依規劃：第一屏只完成選角，設定／操作說明收進選單抽屜，頂部佔位列在手機隱藏 */
  .ps5-home .ps5-topbar { display: none; }
  .ps5-home .ps5-content {
    min-height: auto;
    justify-content: flex-start;
    /* 頂部避開狀態列與 topbar；底部保留固定 CTA 高度＋安全區，最後元素不被遮住 */
    padding: calc(76px + env(safe-area-inset-top)) 20px calc(164px + env(safe-area-inset-bottom));
    gap: 0;
  }

  .ps5-home .home-lead {
    display: block;
    text-align: center;
    margin: 6px 0 14px;
    font-size: 15px;
    letter-spacing: 0.14em;
    color: rgba(255, 229, 170, 0.82);
  }

  /* 主卡：一次只突出一個族群 */
  .ps5-home .tribe-stage {
    display: block;
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto 18px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 214, 130, 0.28);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    background: rgba(20, 17, 14, 0.6);
  }
  /* 主卡高度依視窗夾住，避免在矮螢幕把縮圖列擠到固定 CTA 後方（首屏即完成選角） */
  .ps5-home .tribe-stage-media { width: 100%; height: clamp(180px, 34vh, 300px); background: #12100d; }
  .ps5-home .tribe-stage-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ps5-home .tribe-stage-info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
  }
  .ps5-home .tribe-stage-name {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #fff2cf;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.9);
  }
  .ps5-home .tribe-stage-produces {
    margin-top: 4px;
    font-size: 14px;
    color: rgba(255, 236, 200, 0.88);
  }

  /* 縮圖列：橫向四張，可點可左右捲；覆蓋既有 ≤820 的 2 欄 grid */
  .ps5-home .tribe-carousel {
    width: 100%;
    display: flex;
    grid-template-columns: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px;
    margin: 0;
  }
  .ps5-home .carousel-arrow { display: none; }
  .ps5-home .tribe-card,
  .ps5-home .tribe-card:hover,
  .ps5-home .tribe-card.selected {
    flex: 0 0 auto;
    width: 74px;
    min-width: 74px;
    min-height: 74px;
    aspect-ratio: 1;
    transform: none;
    opacity: 1;
    filter: none;
    animation: none;
    border-radius: 12px;
  }
  .ps5-home .tribe-card::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 55%); }
  .ps5-home .tribe-card .tribe-name {
    bottom: 4px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  .ps5-home .tribe-card.selected {
    border-color: #ffcf7a;
    box-shadow: 0 0 0 2px rgba(255, 207, 122, 0.55), 0 0 22px rgba(255, 196, 82, 0.4);
  }

  /* 固定操作區：主 CTA 一鍵開局＋次要「了解這個族群」 */
  .ps5-home .home-cta-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(12, 10, 8, 0.97) 62%, rgba(12, 10, 8, 0));
  }
  .ps5-home.nav-open .home-cta-bar { display: none; } /* 選單抽屜開啟時讓出畫面 */
  .ps5-home .home-cta-primary {
    width: min(420px, 100%);
    min-height: 56px;
    border: none;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    color: #2a1c08;
    background: linear-gradient(135deg, #ffd98a, #f0a94b);
    box-shadow: 0 10px 26px rgba(240, 169, 75, 0.4);
  }
  .ps5-home .home-cta-secondary {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #f7ddb0;
    background: transparent;
    border: 1px solid rgba(255, 218, 128, 0.5);
  }

  .ps5-home .ps5-hints { display: none; }
}

/* ── 對戰桌牌桌墊 ── */
/* table-wood.jpg 是張可平鋪的正方形木紋圖，改用 repeat 平鋪＋固定磚塊尺寸，
   避免 cover 把方形圖硬拉伸成超長畫面而糊成一片放大木紋特寫 */
/* 對局畫面：橫向固定單畫面（不整頁捲動），像其他數位卡牌遊戲的桌面佈局。
   窄螢幕（手機直向）內容塞不下，改回原本可捲動的直向堆疊，見下方 @media。 */
.table-surface {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -20px;
  margin-bottom: -40px;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: url('assets/ui/table-wood.jpg') repeat;
  background-size: 360px 360px;
  box-shadow: var(--shadow-lg), inset 0 0 60px rgba(0,0,0,0.35);
  overflow: hidden;
}
.table-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,200,120,0.10), transparent 55%),
    linear-gradient(180deg, rgba(10,7,3,0.35), rgba(10,7,3,0.55) 60%, rgba(10,7,3,0.7));
  pointer-events: none;
  z-index: 0;
}
.table-surface .muted { color: #6d5c43; }

/* 版面主次：建築拼圖是本遊戲的核心收集目標，佔中央最大視覺區塊；
   戰場/素材/工藝/服飾這些唯讀資訊縮到左側窄欄；行動/log 在右側窄欄；
   手牌獨立成下方橫幅，做出「攤牌在桌上」的卡牌遊戲感 */
.board-viewport {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: 230px 1fr 300px;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "header    header    header"
    "versus    versus    versus"
    "resources buildings side"
    "hand      hand      hand";
  gap: 8px;
  padding: 10px 12px;
  overflow: hidden;
}
.bv-header { grid-area: header; margin: 0; }
.bv-header h1 { color: #ffe9bc; text-shadow: 0 2px 10px rgba(0,0,0,0.7); font-size: 1.3em; }
.bv-versus { grid-area: versus; }
.bv-versus .versus-strip { margin-bottom: 0; padding: 6px 8px; }
.bv-versus .vs-player { padding: 5px 5px; }
.bv-versus .vs-player img { width: 38px; height: 38px; }

/* 左側資訊欄改暗色戰情面板，資源改直式列表（貼近參考圖） */
.bv-resources {
  grid-area: resources;
  margin-bottom: 0;
  overflow-y: auto;
  min-height: 0;
  padding: 10px 14px 12px;
  background: linear-gradient(180deg, rgba(42,30,15,0.94), rgba(20,14,6,0.96));
  color: #f0e2c4;
}
.bv-resources h3 {
  margin: 12px 0 6px;
  color: #ffe4a3;
  border-left-color: var(--gold);
}
.bv-resources h3:first-of-type { margin-top: 2px; }
.bv-resources .row { flex-direction: column; align-items: stretch; gap: 3px; }
.bv-resources .chip {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.85em;
  color: #f0e2c4;
  box-shadow: none;
}
.bv-resources .tribe-badge { box-shadow: none; }
.bv-resources .muted { color: rgba(240,226,196,0.6); }
.bv-resources .row { gap: 5px; }

/* ── 主視覺：建築拼圖置中放大（核心收集目標） ── */
.bv-buildings {
  grid-area: buildings;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 0;
  overflow-y: auto;
  min-height: 0;
  padding: 12px 18px 14px;
  background: linear-gradient(180deg, rgba(255,253,248,0.98), rgba(255,248,232,0.96));
}
.bld-centerpiece-title {
  border-left: none !important;
  padding-left: 0 !important;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1em;
}
.bld-centerpiece {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 6px 0 4px;
}

.bv-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}
.bv-side .action-menu { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin-bottom: 0; }
.bv-side .log-box { flex: 0 0 auto; max-height: 160px; }
/* 側欄較窄，行動按鈕改用較緊湊的尺寸，讓固定視窗塞得下更多內容、減少側欄內部捲動需求 */
.bv-side .action-menu button {
  padding: 7px 10px;
  font-size: 0.86em;
  margin: 3px 0;
}
.bv-side .action-menu h3 { margin: 4px 0 6px; }
.bv-side .action-group-label { margin: 8px 0 3px; font-size: 0.72em; }
.bv-side .action-group-label:first-of-type { margin-top: 2px; }
.bv-side .other-players { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }

/* ── 手牌橫幅：扇形攤牌，做出真正的「卡牌遊戲感」 ── */
.bv-hand {
  grid-area: hand;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  padding: 10px 10px 6px;
  min-height: 92px;
  overflow-x: auto;
  overflow-y: visible;
  background: transparent;
  border-radius: var(--r-md);
}
/* 手牌＝純卡面＋淡金邊發光；名稱/效果收進 hover 浮出的說明框 */
.bv-hand .hand-card {
  flex: 0 0 auto;
  margin: 0 -16px;
  transform-origin: bottom center;
  transition: transform 160ms ease, margin 160ms ease, z-index 0s;
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  min-width: auto;
  box-shadow: none;
}
.bv-hand .hand-card .card-thumb {
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(var(--gold-rgb), 0.55);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.3), 0 6px 14px rgba(0, 0, 0, 0.4);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.bv-hand .hand-card:nth-child(odd) { transform: rotate(-3deg) translateY(3px); }
.bv-hand .hand-card:nth-child(even) { transform: rotate(3deg) translateY(3px); }
.bv-hand .hand-card:nth-child(3n) { transform: rotate(0deg) translateY(-2px); }
.bv-hand .hand-card:hover {
  transform: translateY(-16px) scale(1.08) rotate(0deg);
  z-index: 5;
  margin: 0 -4px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.bv-hand .hand-card:hover .card-thumb {
  border-color: rgba(255, 226, 154, 0.95);
  box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.65), 0 12px 22px rgba(0, 0, 0, 0.5);
}
.bv-hand .hand-card.disabled:hover .card-thumb {
  border-color: rgba(var(--gold-rgb), 0.55);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.3), 0 6px 14px rgba(0, 0, 0, 0.4);
}
.bv-hand .hand-card-info {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  min-width: 160px;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(20, 14, 6, 0.94);
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  color: #ffe9b0;
  font-size: 0.78em;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 9;
}
.bv-hand .hand-card:hover .hand-card-info { opacity: 1; transform: translateX(-50%) translateY(0); }
.bv-hand .hand-card-info b { display: block; font-size: 1.05em; }
.bv-hand .hand-card-info span { display: block; color: rgba(255, 239, 205, 0.78); }
.bv-hand .hand-card-info em { display: block; font-style: normal; color: var(--gold); margin-top: 2px; }

/* 我的素材：左下角 4 枚圓形素材幣，數字淡淡疊在幣面上 */
.mat-dock {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 6;
  display: flex;
  gap: 10px;
}
.mat-dock-coin { position: relative; width: 54px; height: 54px; }
.mat-dock-coin img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), 0 0 8px rgba(var(--gold-rgb), 0.25);
}
.mat-dock-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  color: rgba(255, 250, 235, 0.82);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* ── 卡牌桌面視覺修正：讓手牌看起來是「卡」，而不是漂浮圖片 ── */
.bv-hand {
  align-items: flex-end;
  gap: 10px;
  padding: 14px 18px 12px;
  min-height: 178px;
  background: linear-gradient(180deg, rgba(18,11,5,0.08), rgba(18,11,5,0.42));
  border: 1px solid rgba(255,220,145,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 -10px 28px rgba(0,0,0,0.18);
}
.bv-hand .hand-card,
.bv-hand .hand-card:nth-child(odd),
.bv-hand .hand-card:nth-child(even),
.bv-hand .hand-card:nth-child(3n) {
  width: 126px;
  min-width: 126px;
  height: 158px;
  margin: 0;
  padding: 8px 8px 9px;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: linear-gradient(160deg, #fffdf7 0%, #f3e5c9 100%);
  border: 2px solid #c69b4b;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.38), inset 0 0 0 2px rgba(255,255,255,0.55);
  color: #2a1708;
}
.bv-hand .hand-card::before {
  content: '原料卡';
  display: block;
  margin: -8px -8px 7px;
  padding: 3px 6px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, #a66a2c, #d9a441);
  color: #fff8e8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.bv-hand .hand-card.culture {
  border-color: #9b6bc1;
  background: linear-gradient(160deg, #fffaff 0%, #eadcf5 100%);
}
.bv-hand .hand-card.culture::before {
  content: '文化卡';
  background: linear-gradient(90deg, #65408b, #a67bc8);
}
.bv-hand .hand-card.disabled { opacity: 0.55; }
/* 卡面只放圖（JJ：字太多很醜）；名稱/效果/操作提示改為滑鼠移過才浮出（沿用上方 .hand-card-info 提示框） */
.bv-hand .hand-card .card-thumb {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  object-fit: cover;
  margin: 0;
  border: 1px solid rgba(75,43,14,0.28);
  border-radius: 7px;
  box-shadow: none;
}
.bv-hand .hand-card:hover {
  transform: translateY(-14px) scale(1.05);
  margin: 0;
  z-index: 5;
  border-color: #ffe19a;
  box-shadow: 0 18px 28px rgba(0,0,0,0.48), 0 0 18px rgba(255,210,108,0.42);
}

/* 深色桌面上的輔助文字強制使用高對比色，避免「有字但看不到」 */
.table-surface .muted,
.table-surface .bv-side .muted,
.table-surface .log-box,
.table-surface .log-box div,
.table-surface .turn-hint { color: #f5e7c8; }
.table-surface .bv-header h1,
.table-surface .bv-side h3,
.table-surface .action-menu,
.table-surface .action-menu button { color: #fff1cf; }
.table-surface .bv-side .card-box,
.table-surface .action-menu { background: linear-gradient(180deg, rgba(35,24,12,0.97), rgba(16,10,5,0.98)); }
.table-surface .action-menu button:not(:disabled) { border-color: rgba(255,220,145,0.38); }
.table-surface .action-menu button:disabled { color: rgba(245,231,200,0.42); }
.table-surface .bv-resources .chip,
.table-surface .bv-resources .muted { color: #f6e8ca; }
.empty-hand-state {
  width: min(620px, 92%);
  min-height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 14px 22px;
  border: 1px dashed rgba(255,220,145,0.45);
  border-radius: 14px;
  background: rgba(20,12,5,0.42);
  color: #f8e8c7;
}
.empty-hand-decks { display: flex; gap: 12px; }
.empty-deck { width: 74px; text-align: center; color: #ffe7aa; font-size: 11px; }
.empty-deck img { display: block; width: 62px; height: 88px; object-fit: cover; margin: 0 auto 4px; border-radius: 7px; border: 1px solid #d9a441; box-shadow: 0 5px 12px rgba(0,0,0,0.45); }
.empty-deck.culture-deck img { border-color: #a67bc8; }
.empty-deck b, .empty-deck span { display: block; }
.empty-deck span { color: #f5d58e; }
.empty-hand-copy { display: flex; flex-direction: column; gap: 4px; }
.empty-hand-copy strong { font-size: 18px; color: #fff1cf; }
.empty-hand-copy span { color: #ead9b8; font-size: 13px; }
.bv-header { padding-left: 10px; }

.battle-archive {
  margin-top: 12px;
  border-top: 1px solid rgba(224, 186, 105, 0.28);
  color: #ead9b8;
}
.battle-archive summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #f3d99c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}
.battle-archive summary:hover { color: #fff1c5; }
.battle-archive[open] { padding-bottom: 8px; }
.battle-archive h3 { margin: 10px 0 6px; font-size: 12px; color: #d8bd83; }

.board-coach {
  width: 100%;
  min-height: 48px;
  margin: 0 0 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(224, 186, 105, .38);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(47, 34, 18, .94), rgba(31, 58, 44, .9));
  color: #fff4d2;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 5px 14px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.board-coach:hover { transform: translateY(-1px); border-color: #dfb95f; box-shadow: 0 8px 18px rgba(0,0,0,.28); }
.board-coach:active { transform: translateY(0) scale(.99); }
.board-coach span { min-width: 0; display: grid; gap: 2px; text-align: left; }
.board-coach small { color: #d9b96d; font-size: 10px; letter-spacing: .12em; }
.board-coach b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.board-coach em { flex: 0 0 auto; color: #f6dda2; font-size: 11px; font-style: normal; }
.bv-buildings.is-ready-to-build .board-coach {
  border-color: #e6bd55;
  background: linear-gradient(90deg, rgba(81, 50, 16, .96), rgba(45, 83, 51, .94));
  box-shadow: 0 0 0 1px rgba(230,189,85,.18), 0 8px 22px rgba(0,0,0,.28);
}

@media (max-width: 600px) {
  .board-coach { min-height: 54px; }
  .board-coach b { white-space: normal; }
  .bv-hand { justify-content: flex-start; min-height: 168px; padding-inline: 10px; }
  .bv-hand .hand-card { width: 112px; min-width: 112px; height: 150px; }
  .bv-hand .hand-card .card-thumb { height: 74px; }
}

@media (max-width: 860px) {
  .table-surface { height: auto; overflow: visible; }
  .board-viewport {
    height: auto;
    overflow: visible;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "versus"
      "buildings"
      "resources"
      "hand"
      "side";
  }
  .bv-resources { overflow-y: visible; }
  .bv-buildings { overflow-y: visible; }
  .bv-hand { overflow-x: auto; }
  .bv-side { overflow: visible; }
  .bv-side .action-menu { overflow-y: visible; }
  .bv-side .log-box { max-height: 200px; }
  /* 手機版直向堆疊，素材幣不固定角落、改成置中一列 */
  .mat-dock { position: static; justify-content: center; margin: 4px auto; }
}

.story p { line-height: 1.9; }
.story-tribe { text-align: center; }
.story-tribe img { width: 110px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.18); }

/* ── 擲骰子：出手、翻滾、落定三段回饋 ── */
.dice-face { margin: 8px 0 12px; }
.dice-stage {
  --dice-size: 92px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: min(240px, 100%);
  height: 140px;
  margin: 0 auto;
  perspective: 700px;
  contain: layout paint;
}
.dice-motion {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  will-change: transform;
}
.die-cube {
  width: var(--dice-size, 88px);
  height: var(--dice-size, 88px);
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 12px;
  background: linear-gradient(145deg, #fffdf8, #f0e6d0);
  border: 2px solid var(--accent-dark);
  border-radius: 16px;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,0.6);
  backface-visibility: hidden;
}
.die-cube .pip { border-radius: 50%; }
.die-cube .pip.on {
  background: radial-gradient(circle at 35% 30%, #6b4a24, var(--ink));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.dice-shadow {
  position: absolute;
  z-index: 1;
  bottom: 14px;
  width: 74px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.46);
  filter: blur(2px);
  transform-origin: center;
}
.dice-impact-ring {
  position: absolute;
  z-index: 0;
  bottom: 11px;
  width: 78px;
  height: 24px;
  border: 1px solid rgba(216, 146, 70, 0.72);
  border-radius: 50%;
  opacity: 0;
}
.dice-stage.is-ready .dice-motion { transform: translateY(3px) rotateZ(-3deg); }
.dice-stage.is-launch .dice-motion { animation: dice-launch 180ms cubic-bezier(.2, .7, .3, 1) both; }
.dice-stage.is-launch .dice-shadow { animation: dice-shadow-launch 180ms ease-out both; }
.dice-stage.is-rolling .dice-motion { animation: dice-tumble 740ms cubic-bezier(.3, .05, .2, 1) both; }
.dice-stage.is-rolling .dice-shadow { animation: dice-shadow-roll 740ms ease-in-out both; }
.dice-stage.is-result .dice-motion { animation: dice-settle 480ms cubic-bezier(.18, .85, .32, 1.25) both; }
.dice-stage.is-result .dice-impact-ring { animation: dice-impact 420ms ease-out both; }
.dice-stage.is-result .dice-shadow { animation: dice-shadow-settle 480ms ease-out both; }
@keyframes dice-launch {
  from { transform: translate3d(0, 18px, 0) rotateX(0) rotateZ(0); }
  to { transform: translate3d(-8px, -34px, 0) rotateX(-38deg) rotateZ(-12deg); }
}
@keyframes dice-tumble {
  0% { transform: translate3d(-8px, -34px, 0) rotateX(-38deg) rotateY(24deg) rotateZ(-12deg); }
  38% { transform: translate3d(16px, -54px, 0) rotateX(250deg) rotateY(190deg) rotateZ(90deg); }
  72% { transform: translate3d(-10px, -18px, 0) rotateX(510deg) rotateY(460deg) rotateZ(210deg); }
  100% { transform: translate3d(0, 10px, 0) rotateX(720deg) rotateY(720deg) rotateZ(360deg); }
}
@keyframes dice-settle {
  0% { transform: translateY(10px) scale(.9, 1.08); }
  38% { transform: translateY(-10px) scale(1.04, .96); }
  70% { transform: translateY(3px) scale(.98, 1.02); }
  100% { transform: none; }
}
@keyframes dice-impact {
  0% { opacity: .72; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.72); }
}
@keyframes dice-shadow-launch {
  from { opacity: .72; transform: scale(1); }
  to { opacity: .28; transform: scale(.54); }
}
@keyframes dice-shadow-roll {
  0%, 100% { opacity: .34; transform: scale(.62); }
  38% { opacity: .16; transform: scale(.38); }
  72% { opacity: .48; transform: scale(.82); }
}
@keyframes dice-shadow-settle {
  0% { opacity: .75; transform: scale(1.2); }
  100% { opacity: .5; transform: scale(1); }
}
@media (max-width: 480px) {
  .dice-stage { --dice-size: 76px; height: 116px; perspective: 560px; }
}

/* ── 猜拳圖示 ── */
.rps-icon { display: block; width: 44px; height: 44px; margin: 0 auto 4px; object-fit: contain; }

/* ── 建築卡拼圖：2×2 格盤，缺片顯示虛線空格，集滿縫隙閉合成整張家屋 ── */
.bld-group { display: inline-block; text-align: center; margin: 6px 14px 6px 0; vertical-align: top; }
/* 家屋收集列：4 張完整比例的家屋卡橫排（取代舊切片拼圖，不再壓壞圖片比例）。
   已蓋＝彩色亮起＋✓；未蓋＝同張圖暗色剪影（預告蓋好的樣子）；集滿整排金光。 */
.bld-puzzle {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(8, 10, 20, 0.5);
  border: 2px solid rgba(255, 211, 116, 0.3);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.bld-cell {
  position: relative;
  width: 96px;
  aspect-ratio: 800 / 576; /* 跟原圖同比例，永不變形 */
  border-radius: 8px;
  overflow: hidden;
  flex: 0 1 auto;
}
.bld-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bld-cell.filled {
  box-shadow: 0 0 0 2px rgba(255, 211, 116, 0.75), 0 6px 14px rgba(0, 0, 0, 0.45);
}
.bld-cell.filled img { animation: bldPop 0.45s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes bldPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bld-cell .bld-check {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7cc45f;
  color: #10250b;
  font-size: 13px;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}
.bld-cell.empty { border: 1px dashed rgba(255, 224, 148, 0.4); }
.bld-cell.empty img { filter: grayscale(1) brightness(0.32); opacity: 0.8; }
.bld-cell .bld-slot-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 236, 196, 0.8);
  font-size: 0.72em;
  font-weight: 700;
  text-shadow: 0 1px 4px #000;
}
.bld-puzzle.complete {
  border-color: var(--gold);
  box-shadow: 0 0 26px rgba(217, 164, 65, 0.5);
}
.bld-label { font-weight: bold; color: var(--accent); font-size: 0.85em; margin-top: 4px; }

/* 主視覺放大版（本族家屋進度，畫面中央最大元素） */
.bld-group-big {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bld-puzzle-big {
  width: auto;
  max-width: min(96%, 1000px);
  height: auto;
  gap: 14px;
  padding: 14px;
  border: 3px solid var(--gold);
  box-shadow: var(--shadow-lg);
}
.bld-puzzle-big .bld-cell { width: clamp(120px, 14vw, 210px); }
.bld-puzzle-big .bld-cell .bld-check { width: 26px; height: 26px; font-size: 16px; line-height: 26px; }
.bld-puzzle-big .bld-cell .bld-slot-num { font-size: 0.95em; }
.bld-puzzle-big.complete {
  box-shadow: 0 14px 34px rgba(0,0,0,0.4), 0 0 34px rgba(217,164,65,0.55);
  border-color: var(--gold);
}
.bld-group-big .bld-label {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 1.05em;
  white-space: nowrap;
  background: rgba(20,14,6,0.85);
  color: #ffe9b0;
  padding: 4px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--gold);
  box-shadow: var(--shadow-md);
  z-index: 2;
}

/* ── 對戰列 ── */
.versus-strip {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  margin-bottom: 16px;
  padding: 10px 8px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2b2016, #3d2f1f);
  overflow-x: auto;
}
.vs-player {
  position: relative;
  flex: 1 1 0;
  min-width: 88px;
  text-align: center;
  padding: 8px 6px;
  border-radius: 12px;
  color: #f6ecd4;
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vs-player img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid rgba(255,255,255,0.35);
}
.vs-player.active {
  background: rgba(255,255,255,0.12);
  border-color: #ffc45c;
  box-shadow: 0 0 18px rgba(255,196,92,0.5);
  transform: translateY(-3px);
}
.vs-player.active img { border-color: #ffc45c; }
.vs-name { font-weight: bold; font-size: 0.9em; margin-top: 4px; }
.vs-score { font-size: 1.15em; font-weight: bold; color: #ffd98a; }
.vs-stats { font-size: 0.66em; opacity: 0.85; line-height: 1.4; }
/* 攤開手牌：對戰列裡每位玩家的手牌一律正面小卡 */
.vs-hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 220, 145, 0.16);
  min-height: 20px;
}
.vs-hand-card { display: inline-flex; }
.vs-hand-card .card-thumb-sm { width: 26px; margin: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.vs-hand-empty { font-size: 0.62em; opacity: 0.5; }
.duel-side .vs-hand { justify-content: flex-start; }
.vs-crown {
  position: absolute;
  top: -9px;
  right: 6px;
  background: linear-gradient(135deg, var(--gold), var(--accent));
  color: #2a1e12;
  font-size: 0.68em;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  letter-spacing: 0.05em;
}
.vs-sep { align-self: center; color: #a6742d; font-size: 1.3em; padding: 0 2px; flex: 0 0 auto; }

/* ── 雙人局：寬版對峙橫幅（左藍右紅）+ 中央金色回合徽章 ── */
.versus-duel {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 16px;
  border-radius: 14px;
  overflow: visible;
  box-shadow: var(--shadow-lg);
}
.duel-side {
  flex: 1 1 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  color: #eef2fb;
  border: 2px solid transparent;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.duel-left {
  /* 半透明，讓底下的木桌紋理透出來，不是純色實心色塊 */
  background: linear-gradient(120deg, rgba(53,69,95,0.78), rgba(68,93,124,0.78) 55%, rgba(58,81,112,0.78));
  border-radius: 14px 4px 4px 14px;
  flex-direction: row;
  text-align: left;
}
.duel-right {
  background: linear-gradient(120deg, rgba(107,70,63,0.78), rgba(133,86,75,0.78) 55%, rgba(116,70,61,0.78));
  border-radius: 4px 14px 14px 4px;
  flex-direction: row-reverse;
  text-align: right;
}
.duel-side.active {
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(var(--gold-rgb), 0.65), inset 0 0 18px rgba(var(--gold-rgb), 0.12);
}
.duel-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid var(--gold);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  flex: 0 0 auto;
}
.duel-info { display: flex; flex-direction: column; gap: 2px; }
.duel-name { font-weight: 800; font-family: var(--fserif); font-size: 1.02em; }
.duel-score { font-size: 1.3em; font-weight: 900; color: #ffd98a; text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.duel-stats { font-size: 0.72em; opacity: 0.85; }
.duel-flag {
  position: absolute;
  top: -10px;
  background: linear-gradient(135deg, var(--gold), var(--accent));
  color: #2a1e12;
  font-size: 0.68em;
  font-weight: 900;
  padding: 3px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.duel-left .duel-flag { left: 14px; }
.duel-right .duel-flag { right: 14px; }
.duel-medal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  z-index: 2;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 55%, var(--accent-dark) 100%);
  border: 3px solid #fff3cf;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), inset 0 0 8px rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.duel-medal-inner {
  font-family: var(--fserif);
  font-weight: 900;
  font-size: 0.82em;
  color: #4a2f11;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

@media (max-width: 640px) {
  .versus-duel { flex-direction: column; }
  .duel-left, .duel-right { border-radius: 12px; flex-direction: row; text-align: left; }
  .duel-medal { position: static; transform: none; margin: -14px auto; }
}

@media (max-width: 600px) {
  .versus-strip { gap: 0; padding: 8px 4px; }
  .vs-player { min-width: 66px; padding: 6px 3px; }
  .vs-player img { width: 40px; height: 40px; }
  .vs-name { font-size: 0.78em; }
  .vs-score { font-size: 1em; }
  .vs-sep { font-size: 1em; }
  .bld-puzzle { gap: 5px; padding: 4px; }
  .bld-cell { width: 64px; flex: 0 0 auto; }
  .bld-puzzle-big .bld-cell { width: clamp(56px, 18vw, 96px); }
}

/* ── 對戰桌三區布局：上對手／中戰場／下我方 ── */
.zone-label {
  text-align: center;
  color: #ffe9bc;
  font-family: var(--fserif);
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 4px 0 6px;
  text-shadow: 0 1px 5px rgba(0,0,0,0.7);
  opacity: 0.92;
}
.zone-opponents {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}
.opp-card {
  flex: 1 1 150px;
  max-width: 230px;
  background: rgba(255,253,248,0.94);
  border: 2px solid var(--gold);
  border-top: 5px solid var(--gold);
  border-radius: var(--r-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.opp-head { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; }
.opp-head .tribe-icon { margin-right: 0; }
.opp-stats { font-size: 0.8em; color: var(--ink-soft); margin-top: 5px; }

.battle-field { text-align: center; }
.battle-field h3 { border-left: none; padding-left: 0; text-align: center; color: var(--accent-dark); }
.row.center { justify-content: center; }

/* ── 對話泡泡 ── */
.speech-bubble {
  position: fixed;
  transform: translate(-50%, 2px) scale(0.8);
  background: #fffdf8;
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 6px 13px;
  font-weight: 700;
  font-size: 0.9em;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 90;
  pointer-events: none;
}
.speech-bubble::after {
  content: '';
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--accent);
}
.speech-bubble.show { opacity: 1; transform: translate(-50%, 8px) scale(1); }

/* ── 浮動提示（對戰動態）── */
#toast-layer {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: max-content;
  max-width: 92vw;
}
.toast {
  background: linear-gradient(135deg, #3a2a18, #241a0e);
  color: #ffe4a8;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.92em;
  font-weight: 500;
  text-align: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-14px) scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-error {
  color: #fff1e8;
  border-color: #ef8a67;
  background: linear-gradient(135deg, #642c21, #321712);
}
.action-denied { animation: actionDenied 360ms ease both; }
@keyframes actionDenied {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-7px); }
  65% { transform: translateX(5px); }
}
.game-impact {
  position: fixed;
  left: 50vw;
  top: 43vh;
  transform: translate(-50%, -50%) scale(.76);
  min-width: min(420px, 86vw);
  padding: 16px 28px 18px;
  display: grid;
  gap: 4px;
  text-align: center;
  color: #fff0bd;
  border: 1px solid rgba(241, 197, 92, .8);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 0%, rgba(115, 77, 24, .97), rgba(23, 18, 10, .96));
  box-shadow: 0 0 0 5px rgba(217,164,65,.1), 0 18px 55px rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity 240ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
}
.game-impact::before, .game-impact::after { content: '◆'; position: absolute; top: 50%; color: #d9a441; transform: translateY(-50%); }
.game-impact::before { left: 10px; }
.game-impact::after { right: 10px; }
.game-impact small { order: 2; color: #dfcda3; font-size: 11px; }
.game-impact strong { order: 1; font-family: var(--fserif); font-size: clamp(24px, 4vw, 38px); letter-spacing: .08em; }
.game-impact.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ── 動態抽卡動畫（仿爐石戰記真實效果）：卡面直接從牌庫快速滑到手牌並縮放，
   不做 3D 翻牌懸疑——爐石的抽卡就是「彈出→平滑滑動→到位」，乾脆俐落 ── */
.draw-flight {
  position: fixed;
  z-index: 88;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid var(--gold);
  background: #fff;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}
.draw-flight-img { flex: 1; min-height: 0; width: 100%; object-fit: cover; display: block; }
.draw-flight-name {
  flex: 0 0 auto;
  font-size: 0.62em;
  font-weight: 700;
  text-align: center;
  padding: 2px 3px;
  background: rgba(20,14,6,0.85);
  color: #ffe9b0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 素材幣飛行動畫（拿素材/交易/偷襲成功等，飛進素材列） ── */
.coin-flight {
  position: fixed;
  width: 26px;
  height: 26px;
  z-index: 87;
  pointer-events: none;
  border-radius: 50%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

/* ── 猜拳結果動態印章（勝負揭曉時蹦一下） ── */
.rps-stamp {
  display: inline-block;
  font-size: 1.3em;
  font-weight: 900;
  color: var(--ok);
  text-shadow: 0 0 14px rgba(46,125,50,0.5), 1px 1px 2px rgba(0,0,0,0.3);
  transform: rotate(-4deg);
  animation: rps-stamp-in 0.42s cubic-bezier(.34,1.56,.64,1);
}
.rps-stamp.lose { color: var(--danger); text-shadow: 0 0 14px rgba(184,50,39,0.5), 1px 1px 2px rgba(0,0,0,0.3); }
@keyframes rps-stamp-in {
  0%   { transform: scale(2.4) rotate(-4deg); opacity: 0; }
  55%  { transform: scale(0.9) rotate(-4deg); opacity: 1; }
  75%  { transform: scale(1.06) rotate(-4deg); }
  100% { transform: scale(1) rotate(-4deg); opacity: 1; }
}
.rps-shake { animation: rps-shake 0.4s ease; }
@keyframes rps-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

@media (max-width: 600px) {
  .end-actions { display: grid; grid-template-columns: 1fr; }
  .end-actions > * { width: 100%; }
  .end-score-scroll { margin-inline: -4px; width: calc(100% + 8px); background: rgba(0,0,0,.14); }
  .score-table { min-width: 780px; font-size: 13px; }
  .score-table th, .score-table td { padding: 9px 7px; white-space: nowrap; }
  .end-objectives { display: grid; gap: 7px; }
  .end-obj-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 10px; }
  .end-obj-row .end-obj-who, .end-obj-row .end-obj-name { flex: none; }
  .end-obj-row .end-obj-name { grid-column: 1 / -1; }
  body { font-size: 17px; }
  .rps-btn { width: 92px; font-size: 1.05em; padding: 12px 6px 10px; }
  .hero-tribes img { width: 84px; }
  .toast { font-size: 0.82em; padding: 8px 16px; }
}

/* ── 首頁／設定玩家頁 RWD ── */
@media (max-width: 768px) {
  .home-screen {
    align-items: flex-start;
    padding: 20px 14px;
  }
  .home-frame {
    width: 100%;
    min-height: auto;
    gap: 20px;
    padding: 24px 0;
  }
  .title-plaque { padding: 20px 22px; }
  .title-plaque h1 { font-size: clamp(34px, 11vw, 48px); }
  .title-plaque p { font-size: 16px; }
  .tribe-card-stage {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 14px;
    padding: 16px;
  }
  .primary-start-button { min-width: min(320px, 88vw); min-height: 68px; font-size: 28px; }
  .secondary-lore-button { min-width: min(280px, 82vw); min-height: 54px; font-size: 22px; }
  .setup-screen { align-items: flex-start; padding: 20px 14px; }
  .setup-panel { width: 100%; }
}

/* ── 新手互動教學（A15）：發光框強調真實元件＋提示框，不用單獨畫面 ── */
.tutorial-open-btn {
  padding: 8px 16px;
  font-size: 0.85em;
  border-radius: 999px;
  border: 1.5px solid var(--gold);
  background: rgba(0, 0, 0, 0.2);
  color: #ffe4a3;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.4);
}
.tutorial-open-btn:hover { box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.65); }
.tutorial-dim {
  position: fixed;
  inset: 0;
  background: rgba(10,7,3,0.34);
  z-index: 70;
  pointer-events: none;
}
.tutorial-highlight {
  position: relative;
  z-index: 75;
  border-radius: var(--r-md);
  animation: tut-pulse 1.4s ease-in-out infinite;
}
@keyframes tut-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--gold), 0 0 18px rgba(217,164,65,0.55); }
  50%      { box-shadow: 0 0 0 6px var(--gold), 0 0 30px rgba(217,164,65,0.85); }
}
.tutorial-tooltip {
  position: fixed;
  z-index: 80;
  width: 260px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: linear-gradient(180deg, #4a2f11, #241407);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 14px 16px;
  color: #f8e6b8;
  box-shadow: var(--shadow-lg);
}
.tutorial-tooltip h4 { margin: 2px 0 6px; color: #ffe4a3; font-family: var(--fserif); font-size: 1.05em; }
.tutorial-tooltip p { margin: 0; font-size: 0.88em; line-height: 1.5; color: rgba(248,230,190,0.92); }
.tutorial-tooltip .row { gap: 6px; flex-wrap: wrap; }
.tutorial-tooltip button { padding: 7px 12px; font-size: 0.85em; margin: 0; }
.tut-step { font-size: 0.72em; color: var(--gold); font-weight: 700; letter-spacing: 0.05em; }

@media (max-width: 600px) {
  .tutorial-tooltip { width: min(260px, 84vw); }
}

/* FINAL OVERRIDES: 戰場主題必須在所有舊版規則之後，避免白色面板復原 */
.table-surface { background: radial-gradient(ellipse at 50% 38%, rgba(74,52,96,.22), transparent 48%), linear-gradient(180deg, rgba(7,8,18,.6), rgba(7,7,13,.9)), url('assets/ui/table-wood.jpg') center/cover !important; }
.board-viewport { grid-template-columns: 218px minmax(460px,1fr) 278px !important; grid-template-rows: auto auto minmax(310px,1fr) auto !important; gap: 10px !important; padding: 12px 16px 14px !important; }
.bv-resources, .bv-side .action-menu, .bv-side .log-box, .bv-side .card-box { background: rgba(8,10,20,.86) !important; border-color: rgba(144,165,219,.34) !important; }
.bv-buildings { background: radial-gradient(ellipse at 50% 45%, rgba(42,47,86,.84), rgba(9,12,27,.92)) !important; border-color: rgba(255,206,107,.55) !important; box-shadow: 0 16px 42px rgba(0,0,0,.42), inset 0 0 45px rgba(84,71,156,.18) !important; }
.bv-buildings .bld-centerpiece-title { color: #fff0c5 !important; text-shadow: 0 2px 8px #000 !important; }
.bv-hand { min-height: 214px !important; padding: 18px 24px 12px !important; background: linear-gradient(180deg, rgba(6,7,16,.08), rgba(5,6,14,.8)) !important; border-color: rgba(255,211,116,.3) !important; }
.mat-dock { background: rgba(7,8,17,.88) !important; border-color: rgba(255,211,116,.4) !important; }
.mat-dock-num { position: static !important; width: 100% !important; height: 22px !important; background: #f9e5b1 !important; color: #1b1420 !important; text-shadow: none !important; }
.mat-dock-coin { width: 58px !important; height: 82px !important; text-align: center !important; }
.mat-dock-coin img { width: 52px !important; height: 52px !important; margin: 0 auto 4px !important; }
.bv-side .action-menu button { background: rgba(255,255,255,.06) !important; color: #fff1d0 !important; border-color: rgba(255,220,140,.24) !important; }
.bv-side .action-menu button:hover:not(:disabled) { background: rgba(255,207,105,.16) !important; border-color: #ffd978 !important; }
.continue-turn-btn { width: 100%; margin: 10px 0 12px; padding: 12px 14px; border: 1px solid #ffd36b; border-radius: 10px; background: linear-gradient(135deg, #d89d35, #9a6122); color: #fff6dc; font-weight: 900; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.continue-turn-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.advanced-actions { margin:10px 0 8px; padding:0; border:1px solid rgba(255,211,116,.28); border-radius:10px; background:rgba(4,9,18,.42); }
.advanced-actions summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; color:#f6d990; font-size:.78rem; font-weight:900; cursor:pointer; list-style:none; }
.advanced-actions summary::-webkit-details-marker { display:none; }
.advanced-actions summary::before { content:'＋'; color:#ffd36b; }
.advanced-actions[open] summary::before { content:'－'; }
.advanced-actions summary span { margin-left:auto; padding:2px 7px; border:1px solid rgba(255,211,116,.35); border-radius:99px; color:#dbc28d; font-size:.62rem; }
.advanced-actions>p { margin:0 10px 8px; color:rgba(245,231,200,.58); font-size:.66rem; line-height:1.45; }
.advanced-actions>button { width:calc(100% - 16px); margin:4px 8px !important; }

/* FINAL DRAWER MODE: 行動面板脫離 Grid，不再壓縮中央戰場 */
@media (min-width: 861px) {
  .board-viewport { grid-template-columns: 218px minmax(0, 1fr) 0 !important; }
  .bv-side { grid-area: side; position: static !important; width: 0 !important; min-width: 0 !important; overflow: visible !important; }
  .bv-side .hud-toggle { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 90; width: 42px; min-height: 74px; border-radius: 14px 0 0 14px; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
  .bv-side .action-menu { position: fixed; right: 14px; top: 92px; bottom: 84px; width: min(360px, 28vw); max-height: none; overflow-y: auto; z-index: 89; margin: 0 !important; padding: 16px !important; border-radius: 18px !important; box-shadow: 0 20px 60px rgba(0,0,0,.62) !important; }
  .bv-side.is-collapsed .action-menu { display: none !important; }
.bv-side:not(.is-collapsed) .hud-toggle { right: min(388px, calc(28vw + 28px)); }
}

/* 參考示意圖的沉浸式戰場背景與動態層 */
.table-surface { background: #0b1013 url('assets/ui/battlefield-bg.png') center / cover no-repeat !important; }
.table-surface::before { background: radial-gradient(ellipse at 50% 42%, rgba(21,44,46,.08), transparent 58%), linear-gradient(180deg, rgba(4,7,12,.12), rgba(4,6,9,.48)); }
.event-banner { animation: hudEventEnter .55s cubic-bezier(.2,.8,.25,1.15) both; }
@keyframes hudEventEnter { from { opacity: 0; transform: translateY(-18px) scale(.94); filter: blur(3px); } to { opacity: 1; transform: translateY(0) scale(1); filter: none; } }
.bv-hand .hand-card { animation: cardDealIn .5s cubic-bezier(.2,.8,.25,1.1) both; }
.bv-hand .hand-card:nth-child(2) { animation-delay: 70ms; }
.bv-hand .hand-card:nth-child(3) { animation-delay: 140ms; }
.bv-hand .hand-card:nth-child(4) { animation-delay: 210ms; }
@keyframes cardDealIn { from { opacity: 0; transform: translateY(80px) rotate(5deg) scale(.82); } to { opacity: 1; } }
.mat-dock-coin img { transition: transform .2s ease, filter .2s ease; }
.mat-dock-coin:hover img { transform: translateY(-5px) scale(1.08); filter: drop-shadow(0 0 10px rgba(255,211,116,.75)); }
.bld-cell.filled { animation: buildingReveal .45s ease both; }
.bv-buildings .bld-centerpiece { padding: 18px 0 8px !important; }
.bv-buildings .bld-puzzle { background: rgba(4,10,15,.34) !important; border: 1px solid rgba(255,211,116,.42) !important; border-radius: 16px !important; }
.bv-buildings .bld-label { color: #ffe3a1 !important; font-size: 1rem !important; }
.bv-buildings { position: relative; overflow: hidden !important; padding: 20px 24px 24px !important; background: radial-gradient(ellipse at center, rgba(29,57,59,.94), rgba(7,14,20,.98)) !important; }
.bv-buildings::before { content: '中央牌桌'; position: absolute; top: 14px; right: 20px; color: rgba(255,221,145,.52); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.bv-buildings .bld-centerpiece-title { position: relative; z-index: 1; justify-content: center; margin: 0 0 8px !important; font-size: 1.15rem !important; }
.bv-buildings .bld-centerpiece { position: relative; z-index: 1; min-height: 0; padding: 12px 0 18px !important; }
.bv-buildings .bld-puzzle-big { gap: 14px !important; padding: 14px !important; background: rgba(3,9,14,.55) !important; border: 1px solid rgba(255,211,116,.38) !important; border-radius: 18px !important; box-shadow: inset 0 0 30px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.35) !important; }
.bv-buildings .bld-puzzle-big .bld-cell { border-radius: 10px !important; }
.bv-buildings .bld-puzzle-big .bld-cell.filled { box-shadow: 0 0 0 2px rgba(255,211,116,.75), 0 8px 16px rgba(0,0,0,.4) !important; }
.bv-buildings .bld-group:not(.bld-group-big) { opacity: .85; transform: scale(.82); transform-origin: top center; }
.bv-versus .duel-left, .bv-versus .duel-right { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.bv-versus .duel-side.active { border-color: rgba(255,211,116,.8) !important; box-shadow: 0 0 16px rgba(255,211,116,.32) !important; }
.bv-versus .duel-badge { border-radius: 50% !important; border: 2px solid #ffd36b !important; box-shadow: 0 0 12px rgba(255,211,116,.35) !important; }
.bv-header .row.between, .bv-header .row.between h1, .bv-header .row.between .chip, .bv-header .row.between button { color: #fff1ce !important; text-shadow: 0 2px 7px rgba(0,0,0,.9); }
.bv-header .row.between .chip { background: rgba(7,10,18,.82) !important; border-color: rgba(255,211,116,.65) !important; }
.draw-reveal { position: relative; flex: 0 0 170px; width: 170px; min-height: 206px; padding: 8px 9px 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border: 2px solid #ffe08a; border-radius: 14px; background: linear-gradient(160deg, #4b351b, #181421); box-shadow: 0 0 24px rgba(255,210,108,.48), 0 14px 30px rgba(0,0,0,.55); animation: drawRevealIn .55s cubic-bezier(.18,.8,.25,1.2) both; z-index: 8; }
.draw-reveal-label { display: block; width: 100%; margin-bottom: 6px; color: #ffe9ac; font-size: 12px; font-weight: 900; text-align: center; }
.draw-reveal .card-thumb { width: 132px !important; height: 118px !important; object-fit: cover; margin: 0 auto 6px; border-radius: 8px; }
.draw-reveal b { color: #fff1cd; font-size: 14px; text-align: center; }
@keyframes drawRevealIn { from { opacity: 0; transform: translateY(60px) scale(.72) rotate(-5deg); } to { opacity: 1; transform: none; } }
.bv-hand .hand-card .card-thumb { width: 100% !important; height: 98px !important; object-fit: cover !important; object-position: center !important; }
@keyframes buildingReveal { from { opacity: 0; transform: scale(.78); filter: brightness(1.8); } to { opacity: 1; transform: scale(1); filter: none; } }
@media (max-width: 860px) {
  .bv-side { position: fixed !important; inset: auto 10px 10px; z-index: 90; width: auto !important; min-width: 0; pointer-events: none; }
  .bv-side .hud-toggle { pointer-events: auto; margin: 0 0 0 auto; min-height: 48px; }
  .bv-side .action-menu { pointer-events: auto; max-height: min(68vh, 620px); overflow-y: auto; margin: 8px 0 0 !important; }
  .bv-side.is-collapsed .action-menu { display: none !important; }
}

/* FINAL TOP HUD OVERRIDES */
@media (min-width: 861px) {
  .board-viewport { grid-template-rows: 42px 72px minmax(310px,1fr) auto !important; }
  .bv-header { position: relative !important; padding: 0 8px !important; min-height: 42px !important; }
  .bv-header h1 { margin: 0 !important; font-size: 1.05rem !important; line-height: 1.2 !important; }
  .bv-header .event-banner { position: absolute !important; top: -2px !important; left: 50% !important; transform: translateX(-50%) !important; width: min(420px,34vw) !important; margin: 0 !important; padding: 4px 9px !important; min-height: 34px !important; border-radius: 9px !important; }
  .bv-header .event-banner .event-icon { font-size: 1.15em !important; }
  .bv-header .event-banner .event-text b { font-size: .78em !important; }
  .bv-header .event-banner .event-text small { font-size: .62em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bv-header .event-banner .event-dur { font-size: .6em !important; padding: 1px 5px !important; }
  .bv-versus .versus-strip, .bv-versus .versus-duel { min-height: 62px !important; margin: 0 !important; padding: 3px 8px !important; border-radius: 12px !important; }
  .bv-versus .vs-player { padding: 3px 5px !important; display: grid !important; grid-template-columns: 30px 1fr; grid-template-rows: 1fr 1fr; column-gap: 6px; text-align: left; align-items: center; }
  .bv-versus .vs-player img { grid-row: 1 / 3; width: 30px !important; height: 30px !important; border-width: 2px; }
  .bv-versus .vs-name { margin: 0 !important; font-size: .72em !important; }
  .bv-versus .vs-score { font-size: .82em !important; line-height: 1; }
  .bv-versus .vs-stats, .bv-versus .vs-hand { display: none !important; }
  .bv-versus .duel-side { padding: 4px 14px !important; }
  .bv-versus .duel-badge { width: 34px !important; height: 34px !important; }
  .bv-versus .duel-stats, .bv-versus .duel-side .vs-hand { display: none !important; }
}

/* 頂部 HUD 減壓：事件卡與玩家列不再各自佔滿一整排 */
@media (min-width: 861px) {
  .board-viewport { grid-template-rows: 42px 72px minmax(310px,1fr) auto !important; }
  .bv-header { position: relative; padding: 0 8px !important; min-height: 42px; }
  .bv-header h1 { margin: 0; font-size: 1.05rem !important; line-height: 1.2; }
  .bv-header .event-banner { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: min(420px, 34vw); margin: 0; padding: 4px 9px; min-height: 34px; border-radius: 9px; }
  .bv-header .event-banner .event-icon { font-size: 1.15em; }
  .bv-header .event-banner .event-text b { font-size: .78em; }
  .bv-header .event-banner .event-text small { font-size: .62em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bv-header .event-banner .event-dur { font-size: .6em; padding: 1px 5px; }
  .bv-versus .versus-strip, .bv-versus .versus-duel { min-height: 62px; margin: 0 !important; padding: 3px 8px !important; border-radius: 12px; }
  .bv-versus .vs-player { padding: 3px 5px !important; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: 1fr 1fr; column-gap: 6px; text-align: left; align-items: center; }
  .bv-versus .vs-player img { grid-row: 1 / 3; width: 30px; height: 30px; border-width: 2px; }
  .bv-versus .vs-name { margin: 0; font-size: .72em; }
  .bv-versus .vs-score { font-size: .82em; line-height: 1; }
  .bv-versus .vs-stats, .bv-versus .vs-hand { display: none; }
  .bv-versus .duel-side { padding: 4px 14px; }
  .bv-versus .duel-badge { width: 34px; height: 34px; }
  .bv-versus .duel-stats, .bv-versus .duel-side .vs-hand { display: none; }
}

/* 行動面板抽屜：收合時只留行動點數旁的展開把手 */
.hud-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; width: 44px; min-height: 58px; padding: 5px 3px; margin: 0 0 6px auto; border: 1px solid rgba(255,211,116,.55); border-radius: 10px 0 0 10px; background: rgba(9,12,24,.94); color: #ffe39a; cursor: pointer; }
.hud-toggle-count { display: grid; line-height: 1; text-align: center; }
.hud-toggle-count b { font-size: 18px; }
.hud-toggle-count small { margin-top: 3px; font-size: 9px; letter-spacing: .04em; }
.hud-toggle-arrow { font-size: 16px; }
.action-drawer-scrim { position: fixed; inset: 0; z-index: 88; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(2,5,10,.34); cursor: default; }
.action-drawer-scrim:hover, .action-drawer-scrim:focus { background: rgba(2,5,10,.34); transform: none; box-shadow: none; }
.bv-side.is-collapsed { width: 38px; min-width: 38px; justify-self: end; }
.bv-side.is-collapsed .action-menu { display: none; }
.bv-side.is-collapsed .hud-toggle { width: 38px; min-height: 68px; margin: 12px 0 0; border-radius: 12px 0 0 12px; box-shadow: 0 8px 18px rgba(0,0,0,.4); }
.bv-side:not(.is-collapsed) .hud-toggle { margin-right: -1px; }
@media (max-width: 860px) {
  .bv-side.is-collapsed { width: 100%; min-width: 0; }
  .bv-side.is-collapsed .hud-toggle { position: sticky; bottom: 8px; margin: 0 0 0 auto; }
  .bv-side .action-menu { max-height: 70vh; overflow-y: auto; }
  .action-drawer-scrim { background: rgba(2,5,10,.55); }
}

/* 手機：上面的 FINAL OVERRIDES 用 !important 鎖了桌機三欄 grid，這裡必須同樣 !important 才能攤平成單欄 */
@media (max-width: 860px) {
  .board-viewport {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas:
      "header"
      "versus"
      "buildings"
      "resources"
      "hand"
      "side" !important;
    padding: 12px 12px 16px !important;
  }
  /* 素材幣列改成整列置中、可換行，別被 grid 推出畫面 */
  .mat-dock {
    grid-column: 1 / -1 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    max-width: 100% !important;
    margin: 4px auto !important;
  }
}

/* 手機：把「我的手牌」固定在畫面底部，永遠看得到 —— 修正抽到的原料卡躲在超長行動選單上方、滑不到的問題 */
@media (max-width: 860px) {
  .bv-hand {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    min-height: 0 !important;
    height: auto;
    max-height: 210px;
    margin: 0 !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 16px 16px 0 0 !important;
    border: none !important;
    border-top: 2px solid rgba(255, 211, 116, 0.45) !important;
    background: linear-gradient(180deg, rgba(10, 8, 18, 0.9), rgba(6, 6, 14, 0.97)) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    gap: 8px;
  }
  /* 為固定手牌預留空間，避免蓋住行動選單底部的「結束回合」 */
  .board-viewport { padding-bottom: 224px !important; }
  /* 靜音鈕移到固定手牌列上方，避免互相遮擋 */
  .audio-toggle { bottom: 224px; }
  /* 空手牌提示在固定列裡壓縮一點 */
  .bv-hand .empty-hand-state { flex-direction: row; align-items: center; gap: 10px; }
  .bv-hand .empty-hand-decks { display: none; }
}
/* ── 方案 C：文化策略冒險灰盒垂直切片 ── */
.adventure-shell{min-height:100dvh;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));color:#f7edd8;background:radial-gradient(circle at 50% 10%,#365247 0,#172a27 42%,#0d1716 100%);font-family:"Noto Sans TC",sans-serif}.adventure-intro{display:grid;place-content:center;text-align:center;max-width:none}.adventure-intro>p,.adventure-intro>h1,.adventure-actions{width:min(680px,100%);margin-inline:auto}.adventure-intro h1{font:900 clamp(2rem,6vw,4.5rem)/1.08 "Noto Serif TC",serif;margin:.35em auto}.adventure-eyebrow{color:#e6bd72;font-weight:800;letter-spacing:.12em}.adventure-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}.adventure-shell button{min-height:48px;border:1px solid rgba(247,237,216,.4);border-radius:12px;padding:10px 18px;color:inherit;background:rgba(255,255,255,.08);font:700 1rem inherit;cursor:pointer}.adventure-shell button:hover,.adventure-shell button:focus-visible{border-color:#f0c576;background:rgba(240,197,118,.16);outline:3px solid rgba(240,197,118,.28);outline-offset:2px}.adventure-shell button:disabled{opacity:.46;cursor:not-allowed}.adventure-shell .adventure-primary{background:#d99a42;color:#17140e;border-color:#f4ca7b}.adventure-header{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;max-width:1280px;margin:auto}.adventure-header p{margin:0;color:#e6bd72}.adventure-header h1{font-size:clamp(1rem,2.6vw,1.55rem);margin:.2rem 0}.adventure-progress{height:7px;max-width:1280px;margin:16px auto 26px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}.adventure-progress span{display:block;height:100%;background:#e6bd72;transition:width .35s ease}.adventure-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 220px;gap:20px;max-width:1280px;margin:auto}.adventure-map,.adventure-inventory,.adventure-scene{border:1px solid rgba(247,237,216,.16);border-radius:22px;background:rgba(6,18,16,.6);backdrop-filter:blur(12px)}.adventure-map{display:flex;flex-direction:column;gap:10px;padding:14px}.adventure-map .adventure-place{display:grid;grid-template-columns:32px 1fr;text-align:left;gap:2px 8px}.adventure-place>span{grid-row:1/3;font-size:1.5rem}.adventure-place small{opacity:.65}.adventure-place.is-current{border-color:#e6bd72;background:rgba(230,189,114,.14)}.adventure-scene{padding:clamp(20px,4vw,48px);text-align:center}.adventure-scene h2{font:800 clamp(1.35rem,3vw,2.2rem) "Noto Serif TC",serif}.adventure-visual{min-height:280px;display:grid;place-items:center;margin:24px 0;border-radius:18px;background:linear-gradient(#49665c,#253e36);font-size:clamp(3rem,10vw,7rem);letter-spacing:.15em}.adventure-visual.is-restored{background:radial-gradient(circle,#d8a955 0,#49665c 42%,#253e36 100%);box-shadow:0 0 50px rgba(230,189,114,.25)}.adventure-feedback{min-height:48px;color:#f1d9ad}.adventure-inventory{padding:20px}.adventure-inventory h2{margin-top:0}.adventure-inventory ul{list-style:none;padding:0;margin:0}.adventure-inventory li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}.adventure-inventory p,.adventure-hint{font-size:.86rem;opacity:.7}.adventure-ending{margin-top:22px;padding:18px;border:1px solid rgba(230,189,114,.4);border-radius:16px;background:rgba(230,189,114,.08)}
@media(max-width:820px){.adventure-layout{grid-template-columns:1fr}.adventure-map{display:grid;grid-template-columns:repeat(3,1fr);order:2}.adventure-scene{order:1}.adventure-inventory{order:3}.adventure-inventory ul{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.adventure-inventory li{display:grid;text-align:center}.adventure-visual{min-height:220px}}
@media(max-width:520px){.adventure-shell{padding:12px}.adventure-header{gap:8px}.adventure-header button{padding:8px 10px}.adventure-map{grid-template-columns:1fr}.adventure-inventory ul{grid-template-columns:repeat(2,1fr)}.adventure-scene{padding:20px 14px}.adventure-visual{min-height:180px}}
@media(prefers-reduced-motion:reduce){.adventure-shell *{animation:none!important;transition:none!important}}

/* 冒險模式正式視覺：沿用原版深色戰場、青銅金框與既有卡牌資產 */
#app:has(.adventure-shell) { max-width: none; padding: 0; margin: 0; }
html:has(.adventure-shell), body:has(.adventure-shell) { overflow-x:hidden; }
.adventure-shell { --adv-gold:#e4b657; --adv-gold-bright:#ffe5a0; --adv-ink:#07100f; --adv-panel:rgba(6,15,17,.92); min-height:100dvh; width:100%; padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); overflow:hidden; color:#f9efd7; background:#07100f url('assets/ui/battlefield-bg.png') center/cover fixed; font-family:var(--fsans); }
.adventure-shell::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(circle at 50% 18%,rgba(61,103,92,.18),transparent 44%),linear-gradient(180deg,rgba(2,8,9,.2),rgba(2,6,7,.76)); }
.adventure-shell > * { position:relative; z-index:1; }
.adventure-shell button { min-height:46px; margin:0; padding:10px 16px; border:1px solid rgba(235,193,103,.48); border-radius:10px; color:#fff1ce; background:linear-gradient(180deg,rgba(30,45,43,.96),rgba(8,17,18,.98)); box-shadow:0 8px 22px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.06); font-weight:800; }
.adventure-shell button:hover:not(:disabled),.adventure-shell button:focus-visible { border-color:var(--adv-gold-bright); color:#fff8e4; background:linear-gradient(180deg,rgba(61,73,58,.98),rgba(15,26,24,.98)); outline:2px solid rgba(255,222,142,.3); outline-offset:2px; transform:translateY(-1px); }
.adventure-shell button:active:not(:disabled) { transform:translateY(1px) scale(.99); }
.adventure-shell .adventure-primary { color:#201405; border-color:#ffe09a; background:linear-gradient(135deg,#f2ca72,#b97529); box-shadow:0 9px 24px rgba(126,76,20,.42),inset 0 1px rgba(255,255,255,.55); }
.adventure-kicker { margin:0 0 12px; color:var(--adv-gold-bright); font-size:.78rem; font-weight:900; letter-spacing:.17em; }

.adventure-intro { display:block; padding:0; min-height:100dvh; isolation:isolate; }
.adventure-intro::before { display:none; }
.adventure-intro-art { position:absolute; inset:0; z-index:0; background-image:linear-gradient(90deg,rgba(2,8,9,.96) 0%,rgba(3,10,11,.84) 33%,rgba(3,9,10,.2) 70%),var(--adventure-hero); background-position:center; background-size:cover; animation:advHeroIn 1.1s ease both; }
.adventure-intro-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(2,7,8,.9),transparent 40%),radial-gradient(circle at 76% 42%,transparent 0,rgba(0,0,0,.18) 54%,rgba(0,0,0,.56)); }
.adventure-intro-nav { position:absolute; z-index:3; top:max(18px,env(safe-area-inset-top)); left:clamp(20px,5vw,76px); right:clamp(20px,5vw,76px); display:flex; align-items:center; gap:10px; }
.adventure-intro-nav button { margin-right:auto; }
.adventure-intro-nav img { width:44px; height:44px; border:2px solid var(--adv-gold); border-radius:50%; object-fit:cover; box-shadow:0 0 16px rgba(228,182,87,.34); }
.adventure-intro-nav span { color:#ffe8ae; font-weight:900; text-shadow:0 2px 7px #000; }
.adventure-intro-copy { position:absolute; z-index:2; top:50%; left:clamp(24px,7vw,108px); width:min(590px,48vw); transform:translateY(-48%); text-align:left; }
.adventure-intro-copy h1 { margin:0; color:#fff4d4; font:900 clamp(3rem,6.5vw,6.7rem)/.98 var(--fserif); letter-spacing:.01em; text-shadow:0 5px 30px #000; }
.adventure-intro-copy > p:not(.adventure-kicker) { max-width:38rem; margin:24px 0 0; color:rgba(255,245,218,.84); font-size:clamp(1rem,1.4vw,1.22rem); line-height:1.75; text-shadow:0 2px 8px #000; }
.adventure-intro .adventure-actions { justify-content:flex-start; width:auto; margin:30px 0 0; }
.adventure-intro-cards { position:absolute; z-index:2; right:clamp(22px,5vw,76px); bottom:clamp(24px,5vw,62px); display:grid; grid-template-columns:repeat(3,130px); gap:12px; }
.adventure-intro-cards article { overflow:hidden; border:1px solid rgba(241,201,113,.5); border-radius:12px; background:rgba(5,13,14,.82); box-shadow:0 18px 38px rgba(0,0,0,.44); backdrop-filter:blur(10px); animation:advCardIn .6s ease both; }
.adventure-intro-cards article:nth-child(2){animation-delay:.08s}.adventure-intro-cards article:nth-child(3){animation-delay:.16s}
.adventure-intro-cards img { display:block; width:100%; height:86px; object-fit:cover; }
.adventure-intro-cards span { display:block; padding:10px; color:#ffe7ac; font-size:.78rem; font-weight:900; text-align:center; }

.adventure-game { display:flex; flex-direction:column; min-height:100dvh; }
.adventure-header { display:grid; grid-template-columns:140px 1fr 140px; width:100%; max-width:1480px; margin:0 auto 12px; align-items:center; }
.adventure-brand { display:flex; align-items:center; justify-self:center; gap:10px; }
.adventure-brand img { width:48px; height:48px; border:2px solid var(--adv-gold); border-radius:50%; object-fit:cover; box-shadow:0 0 18px rgba(228,182,87,.3); }
.adventure-brand span { display:grid; }
.adventure-brand small { color:#dfb968; font-size:.65rem; font-weight:900; letter-spacing:.1em; }
.adventure-brand b { color:#fff1cc; font-family:var(--fserif); font-size:1.02rem; }
.adventure-objective { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(160px,260px) 48px; align-items:center; gap:14px; width:100%; max-width:1480px; margin:0 auto 14px; padding:10px 16px; border:1px solid rgba(234,190,95,.38); border-radius:12px; background:linear-gradient(90deg,rgba(10,24,24,.96),rgba(20,26,21,.92)); box-shadow:0 12px 26px rgba(0,0,0,.32); }
.adventure-objective>span { color:#e9bd62; font-size:.68rem; font-weight:900; letter-spacing:.12em; }
.adventure-objective h1 { margin:0; color:#fff0c6; font:800 clamp(.95rem,1.6vw,1.25rem) var(--fserif); }
.adventure-objective>b { color:#ffe3a0; font-size:.82rem; text-align:right; }
.adventure-progress { height:6px; margin:0; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; }
.adventure-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9b692c,#ffe09a); box-shadow:0 0 12px rgba(255,213,119,.5); transition:width .35s ease; }
.adventure-layout { display:grid; grid-template-columns:230px minmax(420px,1fr) 230px; gap:14px; width:100%; max-width:1480px; margin:0 auto; flex:1; min-height:0; }
.adventure-map,.adventure-inventory { padding:14px; border:1px solid rgba(234,190,95,.3); border-radius:14px; background:linear-gradient(180deg,rgba(7,18,20,.96),rgba(5,11,14,.94)); box-shadow:0 18px 34px rgba(0,0,0,.34); }
.adventure-map h2,.adventure-inventory h2 { margin:0; color:#ffe9b4; font-size:1rem; }
.adventure-map { display:flex; flex-direction:column; gap:10px; }
.adventure-map>h2 { padding:4px 4px 7px; }
.adventure-map .adventure-place { display:grid; grid-template-columns:68px 1fr; gap:10px; min-height:88px; padding:7px; text-align:left; }
.adventure-place>img { width:68px; height:68px; border-radius:8px; object-fit:cover; filter:saturate(.8) brightness(.82); }
.adventure-place>span { display:grid; align-content:center; min-width:0; }
.adventure-place small { color:#d5ac5a; font-size:.55rem; font-weight:900; letter-spacing:.08em; }
.adventure-place b { color:#fff0c5; font-size:.88rem; white-space:nowrap; }
.adventure-place em { color:rgba(248,232,197,.6); font-size:.61rem; font-style:normal; }
.adventure-place.is-current { border-color:#f0c96f; background:linear-gradient(135deg,rgba(111,74,27,.58),rgba(12,27,25,.96)); box-shadow:0 0 16px rgba(232,184,83,.2); }
.adventure-place.is-current>img { filter:none; }
.adventure-scene { min-width:0; padding:0 0 18px; border:1px solid rgba(234,190,95,.35); border-radius:14px; background:rgba(5,13,15,.94); box-shadow:0 20px 44px rgba(0,0,0,.42); overflow:auto; text-align:center; }
.adventure-scene-art { position:relative; min-height:clamp(300px,47vh,560px); overflow:hidden; background:#071313; }
.adventure-scene-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:filter .5s ease,transform .7s ease; }
.adventure-scene-art:not(.is-restored) .adventure-scene-bg { filter:saturate(.72) brightness(.64); }
.adventure-scene-art.is-restored .adventure-scene-bg { filter:saturate(1.05) brightness(.98); transform:scale(1.02); }
.adventure-scene-vignette { position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,10,11,.94),transparent 52%),linear-gradient(90deg,rgba(2,8,9,.25),transparent 38%,rgba(2,8,9,.18)); }
.adventure-scene-caption { position:absolute; z-index:2; left:clamp(18px,4vw,48px); right:clamp(18px,4vw,48px); bottom:24px; text-align:left; }
.adventure-scene-caption p { margin:0 0 4px; color:#e5ba62; font-size:.68rem; font-weight:900; letter-spacing:.14em; }
.adventure-scene-caption h2 { margin:0; color:#fff4d2; font:900 clamp(1.8rem,4vw,3.6rem)/1.08 var(--fserif); text-shadow:0 3px 18px #000; }
.adventure-scene-caption span { display:block; max-width:620px; margin-top:9px; color:rgba(255,241,207,.82); font-size:.84rem; }
.adventure-guide { position:absolute; right:6%; bottom:0; z-index:1; width:min(34%,250px); max-height:82%; object-fit:contain; filter:drop-shadow(0 12px 20px rgba(0,0,0,.55)); animation:advGuideIn .55s ease both; }
.adventure-scene-rewards { position:absolute; z-index:2; top:24px; right:24px; display:flex; gap:10px; }
.adventure-scene-rewards img { width:76px; height:76px; border:2px solid #e8bd66; border-radius:12px; object-fit:cover; box-shadow:0 12px 24px rgba(0,0,0,.46); animation:advRewardFloat 3s ease-in-out infinite; }
.adventure-dialogue { display:grid; grid-template-columns:52px 1fr; gap:12px; align-items:center; margin:16px 18px 12px; padding:10px 14px; border:1px solid rgba(232,188,97,.26); border-radius:10px; background:rgba(20,33,31,.78); text-align:left; }
.adventure-dialogue img { width:52px; height:52px; border:1px solid #d7ab56; border-radius:50%; object-fit:cover; }
.adventure-dialogue small { color:#dcb35f; font-size:.58rem; font-weight:900; letter-spacing:.1em; }
.adventure-dialogue p { margin:2px 0 0; color:#f8e8c4; font-size:.82rem; line-height:1.5; }
.adventure-cta { width:calc(100% - 36px); max-width:460px; margin:0 auto; }
.adventure-hint { margin:12px 18px 0; color:#d5bd8e; }
.adventure-inventory-title { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.adventure-inventory-title>img { width:48px; height:58px; border-radius:7px; object-fit:cover; }
.adventure-inventory-title span { display:grid; }
.adventure-inventory-title small { color:#d7ad5a; font-size:.58rem; font-weight:900; letter-spacing:.1em; }
.adventure-inventory ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.adventure-inventory li { position:relative; display:grid; grid-template-columns:58px 1fr 28px; align-items:center; gap:9px; min-height:68px; padding:6px; border:1px solid rgba(230,188,100,.18); border-radius:10px; background:rgba(255,255,255,.035); opacity:.5; }
.adventure-inventory li.has-item { opacity:1; border-color:rgba(240,199,110,.5); background:rgba(123,81,27,.18); }
.adventure-inventory li img { width:58px; height:54px; border-radius:7px; object-fit:cover; }
.adventure-inventory li span { color:#f9e8bf; font-size:.74rem; font-weight:800; }
.adventure-inventory li b { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#211504; background:#e5ba65; font-size:.72rem; }
.adventure-inventory>p { color:rgba(242,224,185,.5); font-size:.62rem; text-align:center; }
.adventure-ending { margin:16px 18px 0; padding:18px; border:1px solid #e9bd64; border-radius:12px; background:radial-gradient(circle at 50% 0,rgba(225,179,79,.2),rgba(16,30,27,.94)); animation:advEndingIn .6s ease both; }
.adventure-ending>span { color:#e8bd65; font-size:.65rem; font-weight:900; letter-spacing:.14em; }
.adventure-ending h3 { margin:5px 0; color:#fff0c6; font-size:1.4rem; }
.adventure-ending p { margin:0 0 13px; color:#d8c39a; font-size:.78rem; }
@keyframes advHeroIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
@keyframes advCardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes advGuideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes advRewardFloat{50%{transform:translateY(-6px)}}
@keyframes advEndingIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media(max-width:1050px){
  .adventure-layout{grid-template-columns:190px minmax(380px,1fr)}
  .adventure-inventory{grid-column:1/-1}.adventure-inventory ul{grid-template-columns:repeat(4,1fr)}
  .adventure-inventory li{grid-template-columns:48px 1fr 26px}.adventure-inventory li img{width:48px;height:46px}
  .adventure-intro-cards{grid-template-columns:repeat(3,110px)}
}
@media(max-width:760px){
  .adventure-shell{padding:10px}.adventure-header{grid-template-columns:auto 1fr auto;gap:8px}.adventure-header>button{padding:8px 10px;font-size:.72rem}.adventure-brand b{display:none}.adventure-brand img{width:40px;height:40px}
  .adventure-objective{grid-template-columns:auto 1fr auto;gap:8px;padding:9px 11px}.adventure-objective .adventure-progress{grid-column:1/-1;grid-row:2}.adventure-objective h1{font-size:.9rem}.adventure-objective>b{grid-column:3;grid-row:1}
  .adventure-layout{grid-template-columns:1fr;display:flex;flex-direction:column}.adventure-scene{order:1;overflow:visible}.adventure-map{order:2;display:grid;grid-template-columns:repeat(3,1fr)}.adventure-map h2{grid-column:1/-1}.adventure-inventory{order:3}
  .adventure-map .adventure-place{grid-template-columns:1fr;padding:6px;min-height:0}.adventure-place>img{width:100%;height:74px}.adventure-place>span{padding:2px}.adventure-place b{font-size:.72rem}.adventure-place small,.adventure-place em{font-size:.5rem}
  .adventure-scene-art{min-height:390px}.adventure-scene-caption h2{font-size:2rem}.adventure-guide{width:45%}.adventure-scene-rewards img{width:58px;height:58px}
  .adventure-inventory ul{grid-template-columns:repeat(2,1fr)}
  .adventure-intro-art{background-image:linear-gradient(0deg,rgba(2,8,9,.96),rgba(3,10,11,.22) 70%),var(--adventure-hero);background-position:center}
  .adventure-intro-copy{left:20px;right:20px;top:auto;bottom:180px;width:auto;transform:none}.adventure-intro-copy h1{font-size:clamp(2.7rem,14vw,4.8rem)}.adventure-intro-copy>p:not(.adventure-kicker){font-size:.92rem;margin-top:14px}.adventure-intro .adventure-actions{margin-top:18px}
  .adventure-intro-cards{left:20px;right:20px;bottom:24px;grid-template-columns:repeat(3,1fr)}.adventure-intro-cards article{min-width:0}.adventure-intro-cards img{height:68px}.adventure-intro-cards span{font-size:.62rem;padding:7px 3px}
  .adventure-intro-nav{left:16px;right:16px}.adventure-intro-nav span{font-size:.75rem}
}
@media(max-width:420px){.adventure-intro-copy{bottom:160px}.adventure-intro-copy>p:not(.adventure-kicker){display:none}.adventure-intro-cards{bottom:16px}.adventure-scene-art{min-height:340px}.adventure-dialogue{grid-template-columns:42px 1fr}.adventure-dialogue img{width:42px;height:42px}.adventure-inventory ul{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.adventure-shell *{animation:none!important;transition:none!important}}

/* ══ A21 動線/視覺修正（JJ 審視清單全修）══════════════════ */

/* P0-1：結束回合釘在行動抽屜底部，767px 筆電也永遠按得到 */
.bv-side .action-menu .tut-endturn {
  position: sticky;
  bottom: -14px; /* 抵銷 action-menu 內距，貼齊可視底部 */
  z-index: 6;
  margin-top: 12px;
  box-shadow: 0 -10px 18px rgba(5, 6, 14, 0.85);
}

/* P0-2：收合把手加寬加高，新玩家找得到（含收合容器一起放寬） */
@media (min-width: 861px) {
  .bv-side .hud-toggle, .bv-side.is-collapsed .hud-toggle { width: 58px !important; min-height: 132px !important; }
  .bv-side.is-collapsed { width: 58px !important; min-width: 58px !important; }
  .hud-toggle-count b { font-size: 24px; }
  .hud-toggle-count small { font-size: 12px; }
  .hud-toggle-arrow { font-size: 20px; }
}

/* P1-4：公共牌庫實體化上桌（中央牌桌左側的兩疊牌） */
.table-decks {
  position: absolute;
  left: 18px;
  top: 56px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 4;
}
/* 牌堆只放牌背＋數量徽章（字太多很醜）；名稱/提示滑鼠移過才浮出 */
.table-deck {
  position: relative;
  display: block;
  padding: 6px;
  border: 1px solid rgba(255, 211, 116, 0.4);
  border-radius: 12px;
  background: rgba(8, 10, 20, 0.82);
  color: #ffe9c4;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.table-deck:hover:not(:disabled) { transform: translateY(-3px); border-color: #ffd978; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 196, 92, 0.25); }
.table-deck.is-locked { opacity: 0.55; cursor: default; }
.table-deck-stack { position: relative; display: block; width: 56px; }
.table-deck-stack img { display: block; width: 56px; border-radius: 6px; box-shadow: 2px 2px 0 rgba(30, 24, 12, 0.9), 4px 4px 0 rgba(20, 16, 8, 0.7), 0 6px 12px rgba(0, 0, 0, 0.55); }
.table-deck-count {
  position: absolute;
  right: -6px;
  bottom: -6px;
  min-width: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f9e5b1;
  color: #1b1420;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.table-deck-label {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  display: grid;
  line-height: 1.4;
  min-width: 128px;
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(20, 14, 6, 0.94);
  border: 1px solid rgba(255, 211, 116, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 9;
  text-align: left;
}
.table-deck:hover .table-deck-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.table-deck-label b { font-size: 0.92em; }
.table-deck-label small { color: rgba(255, 233, 196, 0.72); font-size: 0.72em; }

/* P0-3：空手牌區的牌庫改可點擊按鈕＋內文連結 */
.empty-hand-decks .empty-deck { border: none; background: none; padding: 0; cursor: default; font: inherit; }
button.empty-deck { cursor: pointer; border-radius: 10px; transition: transform 0.15s ease; }
button.empty-deck:hover { transform: translateY(-3px); }
button.empty-deck img { box-shadow: 0 0 0 1px rgba(255, 211, 116, 0.5), 0 6px 14px rgba(0, 0, 0, 0.5); border-radius: 6px; }
.empty-deck.is-locked { opacity: 0.55; }
.link-open-hud { border: none; background: none; padding: 0; color: #ffd978; text-decoration: underline; cursor: pointer; font: inherit; }
.link-open-hud:hover { color: #ffe9a8; }

/* P1-5：左欄常駐行動紀錄（自己回合也看得到剛剛發生什麼） */
.mini-log { margin-top: 10px; }
.mini-log > summary { cursor: pointer; color: #ffe4a3; font-weight: 700; font-size: 0.85em; padding: 4px 0; list-style: none; }
.mini-log > summary::before { content: '▸ '; }
.mini-log[open] > summary::before { content: '▾ '; }
.mini-log-box { max-height: 150px; font-size: 0.78em; }

/* P1-6：桌機手牌區左側留出素材幣的位置，卡多也不會被蓋住 */
@media (min-width: 861px) {
  .bv-hand { padding-left: 316px !important; }
}

/* 手機：桌上牌堆改為排版內橫列，不疊到家屋標題 */
@media (max-width: 860px) {
  .table-decks { position: static; flex-direction: row; justify-content: center; margin: 10px auto 4px; }
}

/* ── A22 緊急狀況：文化問答 PK ── */
.quiz-card { text-align: center; }
.quiz-banner {
  display: inline-block;
  margin: -4px auto 8px;
  padding: 6px 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8c2f1e, #c9542c);
  color: #ffe9c4;
  font-size: 1.15em;
  font-weight: 900;
  letter-spacing: 0.12em;
  box-shadow: 0 4px 14px rgba(140, 47, 30, 0.55), inset 0 1px 0 rgba(255,255,255,0.25);
  animation: quizPulse 1.1s ease-in-out infinite alternate;
}
@keyframes quizPulse { from { transform: scale(1); } to { transform: scale(1.04); box-shadow: 0 4px 20px rgba(201, 84, 44, 0.7); } }
.quiz-intro { margin: 0 0 10px; color: #7a5a33; font-size: 0.85em; }
.quiz-img { display: block; width: 96px; margin: 0 auto 8px; border-radius: 8px; box-shadow: 0 6px 14px rgba(0,0,0,0.3); }
.quiz-q { margin: 4px 0 12px; font-size: 1.2em; }
.quiz-options { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 8px; }
.quiz-opt { padding: 12px 8px; font-size: 1em; font-weight: 700; }
.quiz-opt.is-right { background: #4d8a37 !important; color: #f2ffe8 !important; border-color: #6fbf4e !important; }
.quiz-opt.is-wrong { background: #9c3323 !important; color: #ffe6dd !important; border-color: #d05a41 !important; }
.quiz-opt.is-dim { opacity: 0.45; }
.quiz-result { margin: 12px 0 4px; font-weight: 800; }
.quiz-result.ok { color: #3f7d2c; }
.quiz-result.no { color: #a03a26; }
@media (max-width: 600px) {
  .quiz-options { grid-template-columns: 1fr 1fr; }
  .quiz-opt { padding: 11px 6px; font-size: 0.92em; }
}

/* ── 點文化卡＝先跳完整卡面（效果/分數都看得到），再問要不要打出 ── */
/* JJ 反映桌機點下去會直接出牌，來不及看效果分數；改成一律先彈窗確認，不分桌機/觸控 */
.culture-confirm { display: flex; flex-direction: column; align-items: center; text-align: center; }
.culture-confirm-kind {
  display: inline-block;
  margin: -4px auto 10px;
  padding: 5px 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6a3f8c, #9457b8);
  color: #f4e9ff;
  font-size: 1em;
  font-weight: 900;
  letter-spacing: 0.15em;
  box-shadow: 0 4px 14px rgba(106, 63, 140, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
.culture-confirm .card-thumb { width: 160px; margin-bottom: 10px; }
.culture-confirm-name { font-size: 1.25em; margin-bottom: 4px; }
.culture-confirm-effect { color: var(--accent-dark); font-weight: 700; margin-bottom: 4px; }
.culture-confirm-score { color: var(--gold); font-weight: 800; font-size: 1.05em; margin-bottom: 6px; }

/* 觸控兩段式手牌：第一次點＝浮出說明（.is-inspected），再點同一張＝打出 */
.bv-hand .hand-card.is-inspected {
  transform: translateY(-14px) scale(1.05);
  z-index: 6;
  border-color: #ffe19a;
  box-shadow: 0 18px 28px rgba(0,0,0,0.48), 0 0 18px rgba(255,210,108,0.42);
}
.bv-hand .hand-card.is-inspected .hand-card-info { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 860px) {
  /* 手機固定手牌列 overflow 會裁掉上浮提示 → 檢視中的說明改固定在手牌列正上方置中 */
  .bv-hand .hand-card.is-inspected .hand-card-info {
    position: fixed;
    left: 50%;
    bottom: 240px;
    top: auto;
    transform: translateX(-50%);
    max-width: min(320px, 88vw);
    min-width: 200px;
  }
  .bv-hand .hand-card.is-inspected { transform: translateY(-8px) scale(1.04); }
}

/* 抽到的卡：中央彈出亮相後自動淡出（取代常駐在手牌區的 draw-reveal） */
.draw-pop {
  position: fixed;
  left: 50%;
  top: 50%; /* 正置中（JJ 指定） */
  transform: translate(-50%, -50%);
  z-index: 95;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 26px 22px;
  border: 3px solid #ffe08a;
  border-radius: 18px;
  background: linear-gradient(160deg, #4b351b, #181421);
  box-shadow: 0 0 40px rgba(255, 210, 108, 0.55), 0 20px 50px rgba(0, 0, 0, 0.65);
  animation: drawPop 2.2s cubic-bezier(.2, .8, .3, 1) both;
}
.draw-pop span { color: #ffe9ac; font-size: 13px; font-weight: 900; letter-spacing: 0.08em; }
/* 放大卡面，JJ 反映之前太小、換手又快，根本看不清楚抽到什麼 */
.draw-pop img { width: 240px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
.draw-pop b { color: #fff1cd; font-size: 19px; }
.draw-pop em { color: #ffd98a; font-size: 13px; font-style: normal; opacity: 0.9; }
@keyframes drawPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  14%  { transform: translate(-50%, -50%) scale(1); }
  84%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -46%) scale(0.85); }
}

/* ══ A23 視覺層級與操作回饋（JJ 設計檢視三優先）══════════════ */

/* ── 1. 版面焦點：字級層級（最大=行動目標、中=玩家狀態、小=輔助）── */
/* 遊戲標題在對局中只是品牌落款，讓位給行動目標 */
.bv-header h1 { font-size: 0.95rem !important; opacity: 0.55; letter-spacing: 0.14em; font-weight: 600; text-shadow: 0 1px 4px #000; }
/* 中央教練建議＝全板最大的字（目前行動目標） */
.board-coach b { font-size: 1.25rem; }
/* 事件橫幅降級為中型資訊條，不再跟主目標搶戲 */
.event-banner { padding: 4px 10px !important; }
.event-banner .event-icon { font-size: 1.1em !important; }
.event-banner .event-text b { font-size: 0.85em !important; }
.event-banner .event-text small { font-size: 0.68em !important; }
.event-banner .event-dur { font-size: 0.62em !important; }
/* 左欄整體降級：輔助資訊縮小、降亮度，聚焦回中央 */
.bv-resources { font-size: 0.88em; }
.bv-resources h3 { font-size: 0.82em !important; opacity: 0.75; }
.bv-resources .chip { opacity: 0.85; }
.mini-log { opacity: 0.85; }
/* 對戰列玩家狀態＝中級 */
.duel-score { font-size: 1em !important; }
.duel-stats { font-size: 0.66em !important; opacity: 0.75; }

/* ── 2. 統一互動語彙：可點＝浮起亮框手勢；不可點＝扁平標籤 ── */
/* 純資訊 chip（第 N 輪、牌庫數）：扁平、無邊框光、預設游標 */
.bv-header .chip, .bv-resources .chip {
  border-color: transparent !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.07) !important;
  cursor: default;
}
/* 事件橫幅是資訊不是按鈕 */
.event-banner { cursor: default; }
/* 所有真按鈕：pointer＋一致 hover 浮起 */
#app button:not(:disabled) { cursor: pointer; }
#app button:not(:disabled):hover { filter: brightness(1.08); }
/* ❓ 圓形說明鈕（與靜音鈕同語彙） */
.tutorial-open-btn.icon-round {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 900;
  line-height: 34px;
  text-align: center;
  border: 1px solid rgba(255, 224, 148, 0.4);
  background: rgba(18, 16, 12, 0.72);
  color: #ffe9c4;
}
.tutorial-open-btn.icon-round:hover { transform: scale(1.1); border-color: #ffd978; }

/* ── 3. 操作回饋 ── */
/* 可打的文化卡：呼吸金光（一眼看出「這張現在能出」） */
.bv-hand .hand-card.culture:not(.disabled) {
  animation: cardPlayable 1.6s ease-in-out infinite alternate;
}
@keyframes cardPlayable {
  from { box-shadow: 0 8px 18px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,211,116,0.35); }
  to   { box-shadow: 0 8px 18px rgba(0,0,0,0.38), 0 0 16px rgba(255,196,92,0.55), 0 0 0 2px rgba(255,211,116,0.7); }
}
/* 不可打：確實壓暗＋去彩 */
.bv-hand .hand-card.disabled { opacity: 0.45; filter: grayscale(0.7); }
/* 缺貨的素材幣：變暗＋紅圈，一眼看出缺什麼 */
.mat-dock-coin.is-empty img { filter: grayscale(1) brightness(0.45); }
.mat-dock-coin.is-empty { box-shadow: 0 0 0 2px rgba(208, 90, 65, 0.55); border-radius: 50%; }
.mat-dock-coin.is-empty .mat-dock-num { color: #ff9d86 !important; }
/* 家屋專屬進度條（取代大字進度） */
.bld-progressbar {
  display: inline-block;
  vertical-align: middle;
  width: 130px;
  height: 10px;
  margin: 0 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 211, 116, 0.35);
  overflow: hidden;
}
.bld-progressbar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffcf69, #ff9d3c);
  transition: width 0.5s cubic-bezier(.2, .8, .3, 1);
}
.bld-remain { font-size: 0.72em; opacity: 0.85; }
.bld-remain.done { color: #b9e89a; }