/* 魔書主題:淡藍底色、深藍面板、紅金書皮、金色 MP token、發光中線 */
:root {
  /* 底色(頁面、頂欄、盤面):淡藍;直接寫在底色上的字用 --on-page 系列,深色面板內維持 --ink */
  --page: #d6ebfa;
  --page-hi: #e8f4fd;         /* 盤面中央 */
  --page-deep: #c2dcf2;       /* 頂欄、工具列、構築器卡池 */
  --page-line: #9fc0de;
  --on-page: #1c2d4a;
  --on-page-dim: #4d6282;
  --on-page-blue: #1d5fa8;
  --on-page-green: #1f7a46;
  --on-page-amber: #8a5a10;
  --on-page-orange: #b84a12;
  --on-page-red: #b8322a;
  --page-frame: rgba(30, 60, 110, .3);   /* 空格虛線框 */
  --panel: #12182a;           /* 側欄/對話框(深藍) */
  --panel-line: #2e3a55;
  --book-red: #6e1d1d;
  --book-red-dark: #491212;
  --gold: #d9a441;
  --gold-soft: #c9b06c;
  --glow: #ffd166;
  --ink: #e8e8f0;
  --ink-dim: #9aa5c0;
  --accent-green: #7ee0a3;
  --accent-blue: #6cc4ff;
  --danger: #ff6b5e;
  --btn-bg: #2a3958;
  --btn-line: #3a4a6e;
  --btn-primary: #a3541e;
  --btn-primary-line: #d0793c;
  /* 盤面固定尺寸(桌面組):框格不因內容伸縮,窄螢幕整組切換為手機值
     卡格高=卡圖+卡名兩行(行動按鈕已移入放大檢視,不再預留) */
  --card-w: 104px;
  --card-h: 124px;
  --art-h: 75px;
  --cell-w: 120px;
  --book-w: calc(var(--card-w) * 2 + 32px);   /* 兩頁 + 頁縫/內距/框線 */
  --book-h: calc(var(--card-h) + 36px);
  /* 負傷卡:旋轉前為實卡比例(63:88),轉 90° 後長邊恰為魔物欄寬 */
  --injured-h: var(--cell-w);
  --injured-w: calc(var(--cell-w) * .716);
  /* 盤面卡圖框的長寬比 = (卡寬 - 內距 12 - 框線 4) / --art-h;負傷卡沿用同比例,cover 裁到的範圍才相同 */
  --art-ratio: 88 / 75;
  /* 背景的魔書五圓紋(淡,線條透明度寫在 SVG 內) */
  --emblem: url("/static/emblem.svg");
  --emblem-size: min(560px, 82vw) auto;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background: var(--page) var(--emblem) center / var(--emblem-size) no-repeat fixed; color: var(--ink);
  height: 100vh; display: flex; flex-direction: column;
}
/* 日文以日文字型顯示,避免漢字以中文字形呈現(含中、英模式下的日文原名小字) */
body:lang(ja), [lang="ja"] { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; }

/* 維護公告橫幅(頂欄下方,所有畫面) */
#announcement {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: #fff3c4; border-bottom: 1px solid #e0b84a; color: #5a3d00; font-size: 14px; font-weight: bold;
}
#announcement .ann-text { flex: 1; white-space: pre-wrap; }
#announcement .ann-close {
  border: none; background: transparent; color: #5a3d00; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
}
#topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px; background: var(--page-deep); border-bottom: 1px solid var(--page-line);
  font-size: 14px; color: var(--on-page);
}
#title { display: flex; }
/* 標題字:五圓紋徽章(同網頁圖示)+ GASH / CARD BATTLE / ONLINE(ONLINE 置中)。Oswald 子集自架於 /static/fonts(OFL) */
@font-face {
  font-family: "Oswald Title"; font-weight: 200 700; font-display: swap;
  src: url("/static/fonts/oswald-title.woff2") format("woff2");
}
.wordmark { display: inline-flex; align-items: center; gap: var(--wm-gap); font-family: "Oswald Title", "Oswald", sans-serif;
  color: var(--on-page); line-height: 1; }
.wm-badge { width: var(--wm-badge); height: var(--wm-badge); flex-shrink: 0; }
/* 三行沿同一條中線置中;字距會在字尾多出一段空白,各行以等量左內距平衡,墨色才真正對齊中線 */
.wm-text { display: flex; flex-direction: column; align-items: center; gap: var(--wm-line-gap); }
.wm-gash { font-weight: 700; font-size: var(--wm-gash); letter-spacing: .03em; padding-left: .03em; color: var(--book-red); }
.wm-sub { font-weight: 500; font-size: var(--wm-sub); letter-spacing: .2em; padding-left: .2em; }
.wm-online { color: var(--on-page-amber); }
.wordmark.large { --wm-badge: 104px; --wm-gap: 22px; --wm-gash: 76px; --wm-sub: 23px; --wm-line-gap: 6px; }
.wordmark.small { --wm-badge: 24px; --wm-gap: 8px; --wm-gash: 20px; --wm-sub: 13px; --wm-line-gap: 7px; }
.wordmark.small .wm-text { flex-direction: row; align-items: baseline; }   /* 頂欄排成一行,同一基線 */
.wordmark.small .wm-sub { letter-spacing: .12em; padding-left: 0; }
#topbar > span:empty { display: none; }   /* 首頁、構築器等沒有對局資訊時,空欄位不佔 gap(手機上會把按鈕擠到右側並換行) */
#topbar button { white-space: nowrap; flex-shrink: 0; }   /* 較長的語言(英、日)不把按鈕擠成直排;擠不下時由文字欄位換行 */
#acting-info { color: var(--on-page-green); font-weight: bold; }

#layout { display: flex; flex: 1; min-height: 0; }
#board {
  flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-y: auto;
  color: var(--on-page);
  background:
    var(--emblem) center / var(--emblem-size) no-repeat,
    radial-gradient(ellipse at 50% 40%, var(--page-hi) 0%, var(--page) 62%),
    repeating-linear-gradient(45deg, rgba(30,60,110,.02) 0 2px, transparent 2px 6px);
}

/* ---------------- 玩家區(鏡像牌桌) ---------------- */
.player-zone { padding: 6px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.player-zone.active { box-shadow: inset 0 0 0 2px var(--on-page-green); border-radius: 4px; }
.pz-head { display: flex; gap: 14px; align-items: center; font-size: 13px; }
.pz-head .pname { font-weight: bold; font-size: 15px; }
.pz-head .mp { color: var(--on-page-blue); font-weight: bold; }
.pz-head .book-progress { color: var(--on-page-amber); }
.pz-head .discard-btn { cursor: pointer; color: var(--on-page-dim); text-decoration: underline; }
.pz-head-rest { display: inline-flex; gap: 14px; align-items: center; }
.pz-head .review-btn { cursor: pointer; color: var(--on-page-amber); text-decoration: underline; }
/* 行動權標籤(等待輸入的一方);回合玩家由中線的回合轉盤表示 */
.pz-head .acting-label { color: var(--on-page-green); font-size: 12px; font-weight: bold; }
.pz-head .review-btn:hover { color: var(--on-page); }
.name-input { text-transform: none !important; }

/* 查閱魔書 overlay */
#book-review-overlay {
  position: fixed; inset: 0; background: rgba(8,10,18,.78);
  display: flex; align-items: center; justify-content: center; z-index: 55;
}
#book-review {
  background: var(--panel); border: 1px solid #4a5a80; border-radius: 12px;
  padding: 16px; max-width: 92vw; max-height: 88vh; overflow-y: auto;
}
#book-review-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; margin: -16px -16px 12px; padding: 16px 16px 8px;
  position: sticky; top: -16px; z-index: 1; background: var(--panel); }   /* 捲到當前頁時標題與關閉鈕仍在 */
#book-review-head h3 { color: var(--glow); font-size: 16px; }
/* 選擇提示:決策開啟的網格在標題下寫出這次要選什麼(除了發光以外) */
#book-review-hint { order: 3; flex-basis: 100%; font-size: 13px; color: var(--accent-green); }
#book-review-close { padding: 5px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--btn-line); background: var(--btn-bg); color: #dfe6ff; }
/* 魔書網格(查閱、構築器、金手指):固定欄寬,每欄一組對頁、各列對齊;P1 靠右、P32 靠左(實體魔書的右頁與左頁) */
#book-review-grid {
  display: grid; grid-template-columns: repeat(auto-fill, calc(var(--review-card-w) * 2 + 15px));
  gap: 10px; max-width: 84vw; --review-card-w: 96px;   /* 對頁寬 = 兩頁 + 頁縫 3 + 內距 5×2 + 框線 1×2 */
}
.review-spread.single:first-child, .spread.single:first-child { justify-self: end; }
.review-spread.single:last-child, .spread.single:last-child { justify-self: start; }
.review-spread { display: flex; gap: 3px; padding: 5px; border-radius: 8px;
  background: rgba(110,29,29,.35); border: 1px solid rgba(217,164,65,.3); }
.review-spread.single { background: rgba(60,40,70,.35); }
.review-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; width: var(--review-card-w); }
.review-cell .card { flex: 1; width: var(--review-card-w); }   /* 隨列高拉伸:同一列的卡片等高;卡背同寬 */
.review-cell.open { outline: 2px solid var(--glow); outline-offset: 1px; border-radius: 8px; }
.review-cell .card { cursor: default; }
.review-cell .card:hover { transform: none; box-shadow: none; }
.review-foot { display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  justify-content: center; font-size: 9px; }
.review-pno { color: var(--gold-soft); }
.review-tag { padding: 0 5px; border-radius: 6px; font-size: 9px; }
.review-tag.cur { background: var(--glow); color: #3a2a08; }
.review-tag.left { background: #5b6270; color: #d9dde5; }
.review-tag.used { background: #8a2f2f; color: #ffd9d9; }

/* 場區置中貼中線對峙、魔書區靠外角(對手右上、我方左下對角相對) */
.zone-body { display: flex; gap: 12px; flex: 1; }
.player-zone.top .zone-body { align-items: flex-end; }      /* 場區貼中線 */
.player-zone.bottom .zone-body { align-items: flex-start; }
.zone-side { flex: 1 1 0; min-width: 0; display: flex; }
/* 魔書側不可被壓縮到與場區重疊 */
.zone-side.book-side { align-self: stretch; min-width: max-content; }
.player-zone.top .zone-side.book-side { justify-content: flex-end; align-items: flex-start; }
.player-zone.bottom .zone-side.book-side { justify-content: flex-start; align-items: flex-end; }
.field-block { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.field-row { display: flex; gap: 10px; justify-content: center; }
/* 框格固定尺寸:有無卡片、有無按鈕都不伸縮 */
.mcell { display: flex; align-items: center; justify-content: center; width: var(--cell-w); }
.mamodo-cell { height: var(--card-h); position: relative; }
/* 負傷:欄內保留健康卡尺寸的虛線直框,橫卡疊在上面交叉成十字 */
.injured-frame {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--card-w); height: var(--card-h); pointer-events: none;
  border: 2px dashed var(--page-frame); border-radius: 8px;
}
.partner-cell { height: var(--card-h); }  /* 搭檔欄與魔物欄同高 */
/* 盤面卡片:只以卡名為主,數值/效果移到點卡放大檢視 */
#board .card, .fx-guard.card { width: var(--card-w); height: var(--card-h); min-height: 0; overflow: hidden; }
#board .card.small { width: var(--card-w); height: var(--card-h); }  /* 搭檔卡與魔物同尺寸 */
#board .card img.art, .fx-guard.card img.art { height: var(--art-h); flex-shrink: 0; }
#board .card.injured, .fx-guard.card.injured { width: var(--injured-w); height: var(--injured-h); }
#board .card.injured img.art, .fx-guard.card.injured img.art { height: auto; aspect-ratio: var(--art-ratio); }
/* 盤面卡面只留卡名:隱藏費用/魔力/傷害(cmeta)、效果全文、日文名、卡號 */
#board .card .cmeta,
#board .card .ceffect,
#board .card .cname-ja,
#board .card .cnum,
.fx-guard .cmeta, .fx-guard .ceffect, .fx-guard .cname-ja, .fx-guard .cnum { display: none; }
#board .card .cname {         /* 卡名限 2 行省略 */
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.empty-frame {
  border: 2px dashed var(--page-frame); border-radius: 8px;
  color: rgba(30, 60, 110, .5); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  width: var(--card-w); height: 100%;
}
.empty-frame.small { font-size: 10px; }
.stack-badge {
  position: absolute; left: 6px; top: 5px; z-index: 3;
  background: var(--gold); color: #3a2a08; font-weight: bold;
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
}

/* 魔書區:紅金書皮 + 書脊中縫,MP 托盤疊於魔書前方(朝中線側),尺寸全固定 */
.book-block { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
  align-items: flex-end; }                                     /* 對手:書上、托盤下(前方) */
.player-zone.bottom .book-block { flex-direction: column-reverse; align-items: flex-start; }
.book-cover {
  position: relative; display: flex; padding: 7px 10px; border-radius: 12px;
  background: linear-gradient(160deg, var(--book-red) 0%, var(--book-red-dark) 70%);
  border: 2px solid var(--gold);
  box-shadow: 0 3px 14px rgba(0,0,0,.5), inset 0 0 0 4px rgba(217,164,65,.18);
  width: var(--book-w); height: var(--book-h); gap: 6px;
}
.book-spine {
  position: absolute; left: 50%; top: 6px; bottom: 6px; width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(rgba(217,164,65,.0), rgba(217,164,65,.45), rgba(217,164,65,.0));
  pointer-events: none;
}
.book-pages { display: flex; gap: 8px; }
#action-bar .flip-hint { font-size: 13px; color: var(--glow); }   /* 開始階段:翻閱的對頁不對應翻頁張數時的提示 */
/* 場上魔書翻閱:左右鍵半疊在書皮兩緣,「回到目前頁」在上緣;點擊範圍以偽元素擴大 */
.book-nav {
  position: absolute; z-index: 3; border: 1px solid var(--gold); border-radius: 10px; cursor: pointer;
  background: rgba(18,24,42,.88); color: var(--gold-soft); line-height: 1; padding: 0;
}
.book-nav::before { content: ""; position: absolute; inset: -6px; }
.book-nav:disabled { opacity: .3; cursor: default; }
.book-prev, .book-next { top: 50%; transform: translateY(-50%); width: 22px; height: 44px; font-size: 20px; }
.book-prev { left: -12px; }
.book-next { right: -12px; }
.book-current {
  top: -11px; left: 50%; transform: translateX(-50%); font-size: 11px; padding: 2px 8px; white-space: nowrap;
}
.book-current:not(:disabled) { background: var(--gold); color: #2a1b06; font-weight: bold;
  box-shadow: 0 0 8px rgba(255,209,102,.6); }
.page-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.page-no { font-size: 10px; color: var(--gold-soft); }
.page-void { width: var(--card-w); height: var(--card-h); border-radius: 8px;
  border: 2px dashed rgba(217,164,65,.18); }

/* MP token 托盤:固定尺寸;每排 8 顆,>16 折疊為 ●×N */
.mp-tray {
  display: flex; flex-direction: column; gap: 4px; padding: 8px;
  border-radius: 10px; background: rgba(18,24,42,.85);
  border: 1px solid rgba(217,164,65,.5); width: 172px; height: 76px;
}
.mp-tokens { display: flex; flex-wrap: wrap; gap: 4px; width: 148px; height: 34px;
  align-content: flex-start; align-items: center; }
.mp-token {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe9ad, var(--gold) 55%, #8a6420);
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.mp-token.big { width: 24px; height: 24px; }
.mp-fold-count { font-size: 15px; font-weight: bold; color: var(--glow); margin-left: 4px; }
.mp-count { font-size: 11px; color: var(--accent-blue); font-weight: bold; }

/* ---------------- 卡片 ---------------- */
.card {
  width: 118px; min-height: 128px; border-radius: 8px; position: relative;
  background: #f5efdc; color: #24201a; padding: 6px; font-size: 11px;
  border: 2px solid #6b5b3e; cursor: pointer; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 2px;
  transition: transform .15s, box-shadow .15s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,.5), 0 0 10px rgba(255,209,102,.35);
}
.card .cname { font-weight: bold; font-size: 12px; }
.card .cname-ja { font-size: 9px; color: #6b6355; }
.card .cmeta { font-size: 10px; color: #4a4335; }
.card .ceffect {
  font-size: 9.5px; color: #333; overflow: hidden; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
.card .cnum {   /* 卡號標籤:有底色,蓋在卡圖右上也可讀(與頁位的頁碼同一種樣式) */
  position: absolute; right: 4px; top: 4px; z-index: 2; font-size: 10px; line-height: 1.4;
  color: #e6ecff; background: rgba(18,24,42,.8); padding: 0 4px; border-radius: 4px;
}
/* 中級 / 上級:併入資訊列,限制可放的頁數 */
.card .cclass {
  display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px;
  font-size: .9em; font-weight: bold; line-height: 1.4; color: #fff;
}
.card .cclass-intermediate { background: #2f7d55; }
.card .cclass-superior { background: #a33a2a; }
/* 牌組編輯器的詳情按鈕:卡圖右側、卡號下方(不壓到卡名與資訊列),點擊範圍以偽元素擴大 */
.card .card-detail {
  position: absolute; right: 4px; top: 24px; z-index: 2; width: 20px; height: 20px; padding: 0;
  border-radius: 50%; border: 1px solid #c9d3ee; background: rgba(18,24,42,.85); color: #e6ecff;
  font: italic bold 12px/18px Georgia, serif; text-align: center; cursor: pointer;
}
.card .card-detail::before { content: ""; position: absolute; inset: -5px; }
.card .card-detail:hover, .card .card-detail:focus-visible { background: #2c3a5e; outline: 2px solid var(--glow); }
.card img.art {
  width: 100%; height: 80px; object-fit: cover; object-position: top; border-radius: 4px;
}
.card.type-spell { background: #dceaf5; border-color: #3e556b; }
.card.type-event { background: #e9dcf5; border-color: #563e6b; }
.card.type-partner { background: #dcf5e0; border-color: #3e6b48; }
.card.injured { transform: rotate(90deg); }
.card.injured:hover { transform: translateY(-3px) rotate(90deg); }
.card.small { width: 96px; min-height: 104px; }

#zoom-actions button, #action-bar button, #dialog-options button {
  font-size: 10.5px; padding: 3px 8px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--btn-line); background: var(--btn-bg); color: #dfe6ff;
  transition: box-shadow .15s, background .15s;
}
#zoom-actions button:hover:not(:disabled), #action-bar button:hover:not(:disabled),
#dialog-options button:hover:not(:disabled) {
  background: #3d5484; box-shadow: 0 0 8px rgba(255,209,102,.35);
}
#zoom-actions button:disabled, #action-bar button:disabled { opacity: .38; cursor: not-allowed; }
#zoom-actions button.primary, #action-bar button.primary {
  background: var(--btn-primary); border-color: var(--btn-primary-line);
}
#zoom-actions button.primary:hover:not(:disabled) { background: #c76a2c; }

.badge { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 9px; }
.badge.injured-mark { background: #8a2f2f; color: #ffd9d9; }
.badge.partner-mark { background: #2f8a49; color: #dcffe4; }

.card.back {
  background: url("/static/back.jpg") center / cover no-repeat, #5b2323;
  border-color: #8a4040; cursor: default;
}
.card.back:hover { transform: none; box-shadow: none; }
/* 卡片已離開頁面的頁位:卡背壓暗 */
.card.back.consumed { opacity: .55; filter: saturate(.55); }

/* ---------------- 對決舞台(中線) ---------------- */
#battle-stage {
  position: relative; margin: 0 14px; border-radius: 8px;
  flex-shrink: 0;   /* 盤面比視窗高時不可被壓扁(否則時機指示與對決內容會溢出蓋到玩家區) */
  min-height: 4px; background: linear-gradient(90deg,
    rgba(217,164,65,0), rgba(217,164,65,.9), rgba(217,164,65,0));
  box-shadow: 0 0 8px rgba(255,209,102,.35);
  transition: min-height .25s;
}
#battle-stage #stage-content { display: none; }
#battle-stage.open {
  min-height: 64px; color: var(--ink);
  background: linear-gradient(180deg, rgba(42,31,51,.92), rgba(30,22,38,.92));
  border: 1px solid rgba(255,157,108,.5);
  box-shadow: 0 0 18px rgba(255,157,108,.25);
}
#battle-stage.open #stage-content {
  display: flex; gap: 18px; align-items: center; justify-content: center;
  flex-wrap: wrap; padding: 8px 14px; font-size: 13px;
}
.stage-vs { color: #ff9d6c; font-weight: bold; font-size: 15px; }
.stage-side { display: flex; gap: 8px; align-items: baseline; }
.stage-side .side-label { color: var(--ink); }
.stage-side .side-total { font-size: 20px; font-weight: bold; color: var(--glow); }
.stage-side.defense .side-total { color: var(--accent-blue); }
.stage-hint { font-size: 12px; color: var(--ink-dim); flex-basis: 100%; text-align: center; }

#action-bar {
  padding: 10px 14px; display: flex; gap: 12px; align-items: center;
  background: rgba(18,24,42,.94); border-top: 1px solid var(--panel-line); color: var(--ink);
  position: sticky; bottom: 0; backdrop-filter: blur(3px);
}
#action-main { flex: 1; min-width: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* 回合轉盤(行動欄左端,橢圓):外圈與順時鐘箭頭固定;「回合玩家」標籤沿橢圓邊緣移到 --dial-angle
 * (0° 在下方、順時鐘),位置以 sin/cos 計算;--dial-angle 以 @property 登記為角度,才能做轉場。
 * 標籤維持正向,三角箭頭只朝上或朝下(依回合玩家在上方或下方)。 */
@property --dial-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
#turn-cluster { --dial-w: 132px; --dial-h: 70px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#turn-dial {
  --dial-angle: 0deg; --pad-x: 30px; --pad-y: 21px; position: relative; flex-shrink: 0;
  width: calc(var(--dial-w) + 2 * var(--pad-x)); height: calc(var(--dial-h) + 2 * var(--pad-y));
  transition: --dial-angle .6s ease-in-out;
}
#turn-dial .dial-ring {
  position: absolute; left: var(--pad-x); top: var(--pad-y); width: var(--dial-w); height: var(--dial-h);
  border-radius: 50%; background: #f5b800; border: 2px solid #5a9a3a; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
#turn-dial .dial-rotor { position: absolute; inset: 0; pointer-events: none; }
#turn-dial .dial-arrow { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 順時鐘箭頭在左右兩側,避開「回合玩家」標籤會停留的上、下、左下、右上 */
#turn-dial .dial-arrow path:nth-child(odd) { stroke: #155e80; }
#turn-dial .dial-arrow path:nth-child(even) { fill: #155e80; }
#turn-dial .dial-tab {
  position: absolute; z-index: 1; transform: translate(-50%, -50%);
  left: calc(50% - var(--dial-w) / 2 * sin(var(--dial-angle)));
  top: calc(50% + var(--dial-h) / 2 * cos(var(--dial-angle)));
}
#turn-dial .dial-tab::after {           /* 三角箭頭:只朝上或朝下,指向回合玩家那一側 */
  content: ""; position: absolute; left: 50%; top: 100%; width: 0; height: 0; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--glow);
}
#turn-dial .dial-tab.up::after { top: auto; bottom: 100%; border-top: 0; border-bottom: 9px solid var(--glow); }
#turn-dial .dial-tab-text, #acting-pointer .pointer-text {
  display: block; white-space: nowrap; font-size: 11px; font-weight: bold; color: #10324a;
  padding: 2px 7px; border-radius: 6px; border: 1px solid #2a8ac0;
  background: linear-gradient(180deg, #a6d4f5, #74b9ea);
}
#turn-dial .dial-center {
  position: absolute; left: calc(var(--pad-x) + var(--dial-w) * .2); top: calc(var(--pad-y) + var(--dial-h) * .2);
  width: calc(var(--dial-w) * .6); height: calc(var(--dial-h) * .6); border-radius: 50%;
  background: #fff; border: 2px solid #155e80; color: #1b1b1b;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 13px; font-weight: bold; line-height: 1.1; padding: 2px; word-break: keep-all;
}
#turn-dial .dial-center[data-phase="nonbattle"] { background: #47d65c; }
#turn-dial .dial-center[data-phase="battle"] { background: #ff3b30; color: #fff; }
#turn-dial.instant, .motion-off #turn-dial { transition: none; }
#turn-cluster .turn-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 170px; }
/* 「行動玩家」:三角形指向等待輸入的一方(上方玩家朝上,下方玩家朝下) */
#acting-pointer { display: flex; flex-direction: column; align-items: center; }
#acting-pointer::after, #acting-pointer.up::before {
  content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 10px solid var(--glow);
}
#acting-pointer.up::after { display: none; }
#acting-pointer.up::before { border-top: 0; border-bottom: 10px solid var(--glow); }
#dial-note { font-size: 11px; color: var(--ink-dim); line-height: 1.3; }
#action-bar .hint { font-size: 12px; color: var(--glow); margin-right: 8px; }
/* 行動欄:摘要、提示開關、詳細提示;輪到自己時醒目 */
#action-bar.mine { background: rgba(28, 58, 40, .94); box-shadow: inset 0 3px 0 var(--accent-green); }
/* 行動欄底色深:行動選項用淺色按鈕做出對比;「展開提示」是外框樣式,和選項區分 */
#action-bar button {
  background: var(--page-hi); color: var(--on-page); border-color: var(--page-line); font-weight: bold;
}
#action-bar button:hover:not(:disabled) { background: #fff; box-shadow: 0 0 8px rgba(255,209,102,.55); }
#action-bar button.primary { background: #ffc58a; border-color: #ffdcb5; color: #4a2408; }
#action-bar button.primary:hover:not(:disabled) { background: #ffd6aa; }
#action-bar button.noted .btn-note { color: var(--on-page-dim); opacity: 1; }
#action-bar button.primary.noted .btn-note { color: #7a3d10; }
#action-bar .hint-toggle, #action-bar .hint-toggle:hover:not(:disabled) {
  font-size: 12px; padding: 3px 10px; font-weight: normal;
  background: transparent; color: var(--ink-dim); border: 1px dashed var(--ink-dim); box-shadow: none;
}
#action-bar .hint-toggle:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
#action-bar .hint-details { flex-basis: 100%; margin: 2px 0 0 20px; font-size: 12px; line-height: 1.7;
  color: var(--ink-dim); }
/* 可用卡發光:當下有可執行行動的卡 */
#board .card.usable { box-shadow: 0 0 0 2px var(--accent-green), 0 0 12px rgba(126, 224, 163, .6); }
/* 決策目標:可選的卡(場上、魔書網格、棄牌區),和可用卡的綠光區分 */
.card.pickable { box-shadow: 0 0 0 3px var(--glow), 0 0 16px rgba(255, 209, 102, .85); cursor: pointer; }
.review-cell.pickable .review-pno { color: var(--glow); font-weight: bold; }
/* 行動欄的決策區塊 */
#action-bar .choice-prompt { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
#action-bar .choice-title { font-size: 14px; font-weight: bold; color: var(--glow); }
#action-bar .choice-source { font-size: 12px; color: var(--ink-dim); border-left: 3px solid var(--gold-soft);
  padding-left: 8px; max-height: 5.4em; overflow-y: auto; }
#action-bar .choice-source .src-name { color: var(--ink); font-weight: bold; }
#action-bar .choice-notes { font-size: 12px; color: var(--ink); }
#action-bar .choice-hint { font-size: 12px; color: var(--accent-green); }
#action-bar .choice-options { display: flex; gap: 8px; flex-wrap: wrap; }
#action-bar .choice-cards { display: flex; gap: 8px; flex-wrap: wrap; }
#action-bar .choice-cards .card { cursor: pointer; }
/* 時機指示(中線) */
#timing-track { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px;
  padding: 3px 8px; font-size: 12px; color: var(--on-page-dim); }
#battle-stage.open #timing-track { color: var(--ink-dim); }
#timing-track .seg-phase, #timing-track .seg-battle { display: inline-flex; align-items: center; gap: 4px;
  flex-wrap: wrap; justify-content: center; }
#timing-track .step, #timing-track .seg-label { white-space: nowrap; }   /* 換行只發生在步驟之間 */
#timing-track .step { padding: 1px 8px; border-radius: 10px; }
#timing-track .step.current { background: var(--glow); color: #3a2a08; font-weight: bold; }
#timing-track .sep { opacity: .6; }
#spotlight .spot-panel.banner .spot-lines { font-size: 22px; font-weight: bold; color: var(--glow); }
#action-bar button { font-size: 13px; padding: 6px 14px; }
/* 行動選項附註:按鈕內兩行,下行小字 */
#action-bar button.noted { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; }
#action-bar button.noted .btn-note { font-size: 11px; font-weight: normal; opacity: .8; }

#log-panel {
  width: 300px; background: var(--panel); border-left: 1px solid var(--panel-line);
  display: flex; flex-direction: column; padding: 10px;
}
#log-panel h3 { font-size: 13px; color: var(--ink-dim); margin-bottom: 6px; }
#log { flex: 1; overflow-y: auto; font-size: 12px; line-height: 1.7; }
#log .ev { border-bottom: 1px dashed #232d47; padding: 1px 0; }
#log .ev.important { color: var(--glow); }
#log .ev.turn { color: var(--accent-green); font-weight: bold; margin-top: 4px; }

#cheat-panel {
  margin: auto; width: min(1240px, 96vw); max-width: 96vw;
  height: 92dvh; max-height: 92dvh; padding: 16px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--panel-line);
  border-radius: 12px; overflow: hidden;
}
#cheat-panel[open] { display: flex; flex-direction: column; gap: 10px; }
#cheat-panel button, #cheat-panel input, #cheat-panel select {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--btn-bg);
  border: 1px solid var(--btn-line); border-radius: 6px; padding: 6px 9px; min-height: 34px;
}
#cheat-panel button { cursor: pointer; }
#cheat-panel button:disabled { opacity: .45; cursor: not-allowed; }
#cheat-panel button:hover:not(:disabled) { filter: brightness(1.2); }
#cheat-panel button.primary { background: var(--btn-primary); border-color: var(--btn-primary-line); }
#cheat-panel :focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
#cheat-panel::backdrop { background: rgba(8, 10, 18, .8); }
#cheat-head, #cheat-toolbar, #cheat-players, #cheat-actions, #cheat-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#cheat-head { justify-content: space-between; }
#cheat-head h3 { font-size: 17px; }
#cheat-help { font-size: 12px; color: var(--ink-dim); }
#cheat-editor { border: 0; padding: 0; margin: 0; min-width: 0; min-height: 0; flex: 1;
  display: flex; flex-direction: column; gap: 10px; }
#cheat-editor:disabled { opacity: .6; }
#cheat-players button[aria-pressed="true"] { border-color: var(--glow); color: var(--glow); }
#cheat-mp { width: 80px; }
#cheat-selection { color: var(--glow); font-size: 13px; }
#cheat-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; min-height: 0; }
#cheat-book, #cheat-pool { min-width: 0; min-height: 0; overflow-y: auto; padding: 4px;
  overscroll-behavior: contain; }
#cheat-panel h4 { margin-bottom: 8px; }
#cheat-pool-grid { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
#cheat-book-grid {
  --slot-w: 100px; display: grid; grid-template-columns: repeat(auto-fill, calc(var(--slot-w) * 2 + 12px));
  gap: 8px; align-content: start;
}
#cheat-filters { position: sticky; top: 0; z-index: 3; padding-bottom: 8px; background: var(--panel); }
#cheat-filters select { max-width: 100%; }
#cheat-pool-grid .card { width: 120px; cursor: pointer; }
#cheat-pool-grid .card:hover, #cheat-pool-grid .card:focus-visible { outline: 2px solid var(--glow); }
#cheat-book-grid .page-slot .card { width: 96px; }
#cheat-book-grid .page-slot .card img.art { height: 85px; }
#cheat-error { color: var(--danger); font-size: 12px; max-height: 70px; overflow-y: auto; }
#cheat-actions { justify-content: flex-end; }
#cheat-status { margin-right: auto; font-size: 12px; color: var(--glow); }
@media (max-width: 700px) {
  #cheat-panel { width: 98vw; max-width: 98vw; height: 96dvh; max-height: 96dvh; padding: 10px; gap: 6px; }
  #cheat-head h3 { font-size: 15px; }
  #cheat-columns { display: flex; flex-direction: column; overflow-y: auto; }
  #cheat-book, #cheat-pool { overflow: visible; flex: none; }
  #cheat-book-grid { max-height: 32dvh; overflow-y: auto; justify-content: center; }
  #cheat-pool-grid { justify-content: center; }
  #cheat-selection { width: 100%; }
  #cheat-actions { gap: 5px; }
  #cheat-actions button { padding: 6px 8px; font-size: 12px; }
}

#dialog-overlay, #zoom-overlay {
  position: fixed; inset: 0; background: rgba(8, 10, 18, .72);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
#zoom-overlay { flex-direction: column; gap: 12px; z-index: 56; }   /* 在魔書網格之上:網格中的卡可放大選擇 */
/* 檢視內行動區:卡片實例的統一操作入口 */
#zoom-actions { display: flex; flex-direction: column; gap: 8px; max-width: 300px; width: 300px; }
.zoom-action { display: flex; align-items: center; gap: 8px; }
/* 疊放中的魔物:下方的卡(由上而下)以小卡列出 */
.zoom-stack { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 8px;
  background: #1c2438; border: 1px solid var(--panel-line); }
.zoom-stack-title { font-size: 13px; color: var(--ink-dim); }
.zoom-stack-cards { display: flex; gap: 8px; flex-wrap: wrap; }
.zoom-stack-cards .card { width: 88px; height: 112px; min-height: 0; overflow: hidden; cursor: pointer; }
.zoom-stack-cards .card img.art { height: 62px; }
.zoom-stack-cards .card .cmeta, .zoom-stack-cards .card .ceffect, .zoom-stack-cards .card .cname-ja { display: none; }
#zoom-actions button { flex: 1; font-size: 14px; padding: 9px 14px; min-height: 38px; }
.zoom-reason { font-size: 12px; color: var(--danger); flex-shrink: 0; max-width: 45%; }
.hidden { display: none !important; }
#dialog {
  background: #202a42; border: 1px solid #4a5a80; border-radius: 10px;
  padding: 18px; max-width: 640px; max-height: 80vh; overflow-y: auto;
}
#dialog h3 { font-size: 15px; margin-bottom: 12px; color: var(--glow); }
#dialog-source {
  font-size: 13px; line-height: 1.5; margin-bottom: 12px; padding: 8px 10px;
  background: rgba(255, 255, 255, .05); border-left: 3px solid var(--glow); border-radius: 4px;
}
#dialog-source .src-name { font-weight: bold; margin-bottom: 4px; }
#dialog-notes { font-size: 14px; margin-bottom: 12px; color: var(--glow); }
#dialog-options { display: flex; gap: 10px; flex-wrap: wrap; }
#dialog-options button { font-size: 13px; padding: 8px 14px; }
#dialog-options .card { cursor: pointer; }

#zoom-card .card {
  width: 300px; min-height: 380px; font-size: 15px; cursor: default;
}
#zoom-card .card .cnum {
  position: static; display: block; font-size: 14px; line-height: 1.5;
  color: #403426; font-weight: normal; margin-top: 6px; background: none; padding: 0;
}
#zoom-card { max-height: 75dvh; overflow-y: auto; }
#zoom-card .card:hover { transform: none; box-shadow: none; }
#zoom-card .card .cname { font-size: 19px; }
#zoom-card .card .cname-ja { font-size: 12px; }
#zoom-card .card .cmeta { font-size: 13px; }
#zoom-card .card .ceffect { font-size: 13px; -webkit-line-clamp: unset; line-clamp: none; }
#zoom-card .card img.art { height: 250px; }

/* 規則頁:目錄 + 可捲動內容;窄螢幕單欄、目錄為上方橫列 */
#rules-overlay {
  position: fixed; inset: 0; background: rgba(8, 10, 18, .78);
  display: flex; align-items: center; justify-content: center; z-index: 51;
}
#rules-dialog {
  background: #202a42; border: 1px solid #4a5a80; border-radius: 12px;
  width: min(980px, 96vw); height: 88dvh; display: flex; flex-direction: column; padding: 14px 16px;
}
#rules-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#rules-head h3 { font-size: 17px; color: var(--glow); }
#rules-close { padding: 5px 14px; border-radius: 6px; cursor: pointer; min-height: 32px;
  border: 1px solid var(--btn-line); background: var(--btn-bg); color: #dfe6ff; }
#rules-main { flex: 1; min-height: 0; display: flex; gap: 14px; }
#rules-toc { width: 180px; flex-shrink: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.rules-toc-title { font-size: 12px; color: var(--ink-dim); margin-bottom: 4px; }
.rules-toc-item { text-align: left; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 13px;
  border: 1px solid transparent; background: none; color: var(--ink); }
.rules-toc-item:hover { background: var(--btn-bg); }
.rules-toc-item.current { border-color: var(--glow); color: var(--glow); }
#rules-body { flex: 1; min-width: 0; overflow-y: auto; padding: 0 6px 60vh 0; line-height: 1.7; font-size: 14px; }
.rules-section { margin-bottom: 22px; }
.rules-section h4 { font-size: 15px; color: var(--glow); margin-bottom: 6px; }
.rules-section p { margin-bottom: 6px; }
.rules-section ul { margin: 0 0 8px 20px; }
.rules-figure-wrap h4, .rules-icons h4 { font-size: 13px; color: var(--ink); margin: 8px 0; }
.rules-figures { display: flex; gap: 12px; flex-wrap: wrap; }
.rules-figure { margin: 0; width: 150px; text-align: center; font-size: 12px; color: var(--ink-dim); }
.rules-art { position: relative; aspect-ratio: 465 / 679; border-radius: 6px; overflow: hidden; background: #111; }
.rules-art img { width: 100%; height: 100%; display: block; }
.rules-mark { position: absolute; border: 2px solid var(--danger); border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
.rules-mark-no { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: bold;
  display: flex; align-items: center; justify-content: center; }
.rules-art-missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 8px; color: var(--ink); border: 2px dashed var(--btn-line); border-radius: 6px; }
.rules-legend { margin: 8px 0 0 22px; font-size: 13px; }
.rules-missing-art { font-size: 12px; color: var(--gold-soft); margin-bottom: 6px; }
.rules-icons { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.rules-icons h4 { flex-basis: 100%; }
.rules-icon { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 200px; }
.icon-slot { width: 46px; display: flex; justify-content: center; }
.icon-crop { display: block; width: 46px; background-repeat: no-repeat; border-radius: 4px; }
.icon-fallback { font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 6px;
  background: var(--btn-bg); border: 1px solid var(--btn-line); white-space: nowrap; }
#action-bar .rule-link { margin-left: 6px; padding: 0 7px; min-height: 0; font-size: 11px; border-radius: 50%; }
#timing-track .step { cursor: pointer; }
@media (max-width: 700px) {
  #rules-dialog { width: 98vw; height: 94dvh; padding: 10px; }
  #rules-main { flex-direction: column; gap: 8px; }
  #rules-toc { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; flex-shrink: 0; }
  .rules-toc-title { display: none; }
  .rules-toc-item { white-space: nowrap; }
  .rules-figure { width: calc(50% - 6px); }
}

/* 純展示資訊對話框(魔力明細、作用中效果) */
#info-overlay {
  position: fixed; inset: 0; background: rgba(8, 10, 18, .72);
  display: flex; align-items: center; justify-content: center; z-index: 52;
}
#info-dialog {
  background: #202a42; border: 1px solid #4a5a80; border-radius: 10px;
  padding: 16px 18px; width: min(460px, 94vw); max-height: 80vh; overflow-y: auto;
}
#info-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#info-head h3 { font-size: 15px; color: var(--glow); }
#info-close { padding: 5px 14px; border-radius: 6px; cursor: pointer; min-height: 32px;
  border: 1px solid var(--btn-line); background: var(--btn-bg); color: #dfe6ff; }
.info-section { margin-bottom: 12px; }
.info-section h4 { font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.info-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
  padding: 3px 0; border-bottom: 1px dashed #2e3a55; }
.info-row .info-amount { color: var(--accent-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.info-row .info-when { color: var(--ink-dim); white-space: nowrap; }
.info-empty { font-size: 13px; color: var(--ink-dim); }
/* 檢視對手翻開的頁(E-014 / M-018):頁碼在上、卡片在下,依頁碼並排 */
.info-section.peek { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.peek-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.peek-page-no { font-size: 13px; color: var(--ink-dim); }
.info-result { font-size: 13px; color: var(--glow); font-weight: bold; }
/* 意見回報 */
.feedback-desc { font-size: 13px; color: var(--ink-dim); margin: 2px 0 12px; }
.feedback-channel .feedback-desc { margin-bottom: 0; }
.feedback-channel a { font-size: 14px; font-weight: bold; color: var(--accent-blue); }
.feedback-context { display: block; font-size: 12px; color: var(--ink); background: rgba(0, 0, 0, .25);
  padding: 6px 8px; border-radius: 6px; word-break: break-all; user-select: all; margin-bottom: 6px; }
.feedback-copy { padding: 4px 12px; border-radius: 6px; cursor: pointer; min-height: 30px;
  border: 1px solid var(--btn-line); background: var(--btn-bg); color: #dfe6ff; }
.breakdown-ref { color: var(--accent-blue); cursor: pointer; text-decoration: underline dotted; margin-left: 4px; }
#stage-content .side-total { cursor: pointer; text-decoration: underline dotted; }
#rules-toggle, #feedback-toggle, #lang-toggle, #prefs-toggle, #effects-toggle, #cheat-toggle { padding: 4px 12px; border: 1px solid #4a5a80; background: #23304d;
  color: var(--ink); border-radius: 6px; cursor: pointer; }

#toast {
  position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%);
  background: #8a2f2f; color: #fff; padding: 8px 18px; border-radius: 8px;
  font-size: 13px; z-index: 99;
}

/* ---------------- 動畫層 ---------------- */
#anim-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  perspective: 900px;
}
#anim-overlay > * { position: fixed; }

/* 翻頁:右半書頁 rotateY 翻向左側 */
.fx-page-flap {
  transform-origin: left center; border-radius: 0 10px 10px 0;
  background: linear-gradient(100deg, #f0e6c8, #d8c99a);
  border: 1px solid rgba(107,91,62,.6);
  animation: page-flip .55s ease-in forwards;
  backface-visibility: hidden;
}
.fx-page-flap.damage {
  background: linear-gradient(100deg, #f3cfc2, #e09a86);
  box-shadow: 0 0 18px rgba(255,80,60,.7);
}
@keyframes page-flip {
  0% { transform: rotateY(0deg); opacity: .96; }
  100% { transform: rotateY(-160deg); opacity: 0; }
}
.fx-damage-glow { animation: damage-glow .6s ease-out; }
@keyframes damage-glow {
  0% { box-shadow: 0 0 0 rgba(255,60,40,0); }
  30% { box-shadow: 0 0 26px rgba(255,60,40,.85); }
  100% { box-shadow: 0 3px 14px rgba(0,0,0,.5); }
}

/* 出卡 FLIP 飛行 */
.fx-fly-card {
  transition: left .42s cubic-bezier(.2,.8,.3,1), top .42s cubic-bezier(.2,.8,.3,1),
              width .42s, height .42s;
  z-index: 41; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.55);
}
.fx-arriving { opacity: 0; }

/* MP token 飛行 */
.fx-mp-token {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe9ad, var(--gold) 55%, #8a6420);
  box-shadow: 0 0 8px rgba(255,209,102,.7);
  transition: left .5s ease, top .5s ease, opacity .5s;
  transform: translate(-50%, -50%);
}

/* 負傷紅閃 */
.fx-hit { animation: hit-flash .5s ease-out; }
@keyframes hit-flash {
  0%, 60% { box-shadow: 0 0 0 3px rgba(255,60,40,.9), 0 0 22px rgba(255,60,40,.8); }
  100% { box-shadow: none; }
}

/* 魔物送墓:灰化縮小淡出 */
.fx-to-discard {
  margin: 0; z-index: 1; pointer-events: none; overflow: hidden;
  transition: left var(--fly-ms) ease-in, top var(--fly-ms) ease-in, transform var(--fly-ms) ease-in, opacity var(--fly-ms) ease-in;
}
.fx-to-discard img.art { height: 60%; }
.fx-to-discard .cmeta, .fx-to-discard .ceffect, .fx-to-discard .cname-ja, .fx-to-discard .cnum { display: none; }
.fx-to-discard.gone { transform: scale(.25) rotate(-12deg); opacity: .35; filter: grayscale(.6); }

/* 3D 硬幣 */
.fx-coin-wrap {
  left: 50%; top: 42%; transform: translate(-50%, -50%);
  perspective: 700px;
}
.fx-coin {
  width: 96px; height: 96px; position: relative; transform-style: preserve-3d;
}
.fx-coin.land-heads { animation: coin-heads .6s ease-out forwards; }
.fx-coin.land-tails { animation: coin-tails .6s ease-out forwards; }
@keyframes coin-heads { 0% { transform: rotateX(0); } 100% { transform: rotateX(1440deg); } }
@keyframes coin-tails { 0% { transform: rotateX(0); } 100% { transform: rotateX(1620deg); } }
.fx-coin .face {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: bold; backface-visibility: hidden;
  border: 4px solid #8a6420;
}
.fx-coin .face.heads {
  background: radial-gradient(circle at 35% 30%, #ffe9ad, var(--gold) 60%, #8a6420);
  color: #4a3208;
}
.fx-coin .face.tails {
  background: radial-gradient(circle at 35% 30%, #d9dde5, #9aa2b2 60%, #5b6270);
  color: #2c3038; transform: rotateX(180deg);
}

/* 對手行動聚焦展示:蓋住盤面(點擊跳過),內容置中 */
#spotlight {
  position: fixed; inset: 0; z-index: 45; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 18, .35);
}
#spotlight .spot-panel {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: center;
  width: min(460px, 92vw); padding: 16px 18px; border-radius: 14px;
  background: rgba(20, 14, 26, .94); border: 2px solid var(--gold);
  box-shadow: 0 0 30px rgba(255, 157, 108, .35);
  animation: spot-in .15s ease-out;
}
#spotlight.no-motion .spot-panel { animation: none; }
@keyframes spot-in { 0% { opacity: 0; transform: scale(.94); } }
#spotlight .spot-art { width: 140px; border-radius: 8px; flex-shrink: 0; }
#spotlight .spot-info { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#spotlight .spot-caption { font-size: 13px; color: var(--ink-dim); }
#spotlight .spot-name { font-size: 18px; font-weight: bold; color: var(--glow); }
#spotlight .spot-effect { font-size: 13px; line-height: 1.5; color: var(--ink); }
#spotlight .spot-lines { flex-basis: 100%; font-size: 15px; line-height: 1.7; color: var(--ink); text-align: center; }
#spotlight .with-card .spot-lines { text-align: left; font-size: 14px; color: var(--accent-green); }
.prefs-options { display: flex; gap: 8px; flex-wrap: wrap; }
.prefs-options button { padding: 6px 14px; border-radius: 6px; cursor: pointer; min-height: 34px;
  border: 1px solid var(--btn-line); background: var(--btn-bg); color: #dfe6ff; }
.prefs-options button[aria-pressed="true"] { border-color: var(--glow); color: var(--glow); }
@media (max-width: 700px) {
  #spotlight .spot-art { width: 110px; }
}

/* 魔力對決對峙演出:半透明背景(點擊跳過),中央上下兩組「魔物+戰術」,中間 VS → 結果大字;
 * 各時段長度依總長 --fo-ms 的比例(滑入 20%、衝撞 12%) */
.fx-faceoff {
  inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(46,22,58,.94), rgba(8,6,14,.96));
  cursor: pointer; animation: fo-fade calc(var(--fo-ms) * .1) ease-out;
}
@keyframes fo-fade { 0% { opacity: 0; } }
.fo-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fo-group {
  display: grid; grid-template-columns: auto auto; grid-template-areas: "label label" "cards total";
  align-items: center; column-gap: 18px; row-gap: 4px; padding: 8px 14px; border-radius: 12px;
  background: #241a33; border: 2px solid rgba(255,255,255,.12);
  transition: transform .2s, opacity .2s, filter .2s, border-color .2s, box-shadow .2s;
}
.fo-group.top { animation: fo-in-top calc(var(--fo-ms) * .2) cubic-bezier(.2,.8,.3,1.1); }
.fo-group.bottom { animation: fo-in-bottom calc(var(--fo-ms) * .2) cubic-bezier(.2,.8,.3,1.1); }
@keyframes fo-in-top { 0% { transform: translateY(-60vh); opacity: 0; } }
@keyframes fo-in-bottom { 0% { transform: translateY(60vh); opacity: 0; } }
.fo-label { grid-area: label; font-size: 14px; font-weight: bold; color: var(--ink-dim); }
.fo-group.attack .fo-label { color: #ff9d6c; }
.fo-group.defense .fo-label { color: var(--accent-blue); }
.fo-cards { grid-area: cards; position: relative; display: flex; gap: 8px; }
.fo-card .card { width: 112px; height: 134px; min-height: 0; overflow: hidden; cursor: inherit; }
.fo-card .card img.art { height: 82px; flex-shrink: 0; }
.fo-empty {
  width: 112px; height: 134px; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--ink-dim); border-radius: 8px; color: var(--ink); font-size: 15px; font-weight: bold;
}
.fo-total { grid-area: total; font-size: 44px; font-weight: bold; color: var(--ink); min-width: 3.2em; text-align: center; }
.fo-vs { font-size: 34px; font-weight: 900; color: #ff9d6c; text-shadow: 0 0 14px rgba(255,157,108,.8); letter-spacing: 2px; }
.fo-stamp {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg);
  padding: 2px 14px; border: 4px solid var(--danger); border-radius: 8px; color: var(--danger);
  font-size: 28px; font-weight: 900; background: rgba(20,10,10,.7);
}
/* 衝撞:勝方朝敗方位移後彈回;敗方震動 */
.fo-group.top.clash { animation: fo-clash-down calc(var(--fo-ms) * .12) ease-in-out; }
.fo-group.bottom.clash { animation: fo-clash-up calc(var(--fo-ms) * .12) ease-in-out; }
@keyframes fo-clash-down { 50% { transform: translateY(36px) scale(1.05); } }
@keyframes fo-clash-up { 50% { transform: translateY(-36px) scale(1.05); } }
.fo-group.shake { animation: fo-shake calc(var(--fo-ms) * .12) ease-in; }
@keyframes fo-shake {
  20% { transform: translateX(-8px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(5px); }
}
.fo-group.win {
  transform: scale(1.1); border-color: var(--glow);
  box-shadow: 0 0 28px rgba(255,209,102,.75), inset 0 0 18px rgba(255,209,102,.25);
}
.fo-group.win .fo-total { color: var(--glow); text-shadow: 0 0 16px rgba(255,209,102,.9); }
.fo-group.lose { opacity: .5; filter: grayscale(.8); transform: scale(.94); }
.fo-group.lose .fo-cards::after {          /* 打叉 */
  content: ""; position: absolute; inset: -6px;
  background:
    linear-gradient(to top right, transparent calc(50% - 3px), var(--danger) calc(50% - 3px), var(--danger) calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(to bottom right, transparent calc(50% - 3px), var(--danger) calc(50% - 3px), var(--danger) calc(50% + 3px), transparent calc(50% + 3px));
}
.fo-result { display: flex; flex-direction: column; align-items: center; animation: fo-result-in .25s ease-out; }
.fo-result-main {
  font-size: 40px; font-weight: 900; color: var(--glow); letter-spacing: 3px;
  text-shadow: 0 0 6px #6b2b00, 0 0 22px rgba(255,209,102,.9);
}
.fo-result-sub { font-size: 15px; color: var(--ink); }
@keyframes fo-result-in { 0% { transform: scale(2.2); opacity: 0; } }
@media (max-width: 700px) {
  .fo-card .card, .fo-empty { width: 78px; height: 96px; }
  .fo-card .card img.art { height: 56px; }
  .fo-total { font-size: 30px; }
  .fo-group { column-gap: 10px; padding: 6px 8px; }
  .fo-result-main { font-size: 30px; }
  .fo-vs { font-size: 26px; }
}

/* 傷害能量:發光球帶尾跡自中央飛向目標(left/top 過渡),命中處爆光 */
.fx-energy {
  width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle, #fff 0 22%, #ffe27a 38%, #ff8a3c 62%, rgba(255,80,40,0) 72%);
  box-shadow: 0 0 22px 8px rgba(255,170,60,.85);
  transition: left var(--fly-ms) cubic-bezier(.5,0,.9,.6), top var(--fly-ms) cubic-bezier(.5,0,.9,.6);
}
.fx-energy::after {               /* 尾跡:朝飛行反方向延伸 */
  content: ""; position: absolute; right: 50%; top: 50%; width: 160px; height: 20px; margin-top: -10px;
  transform-origin: right center; transform: rotate(var(--angle));
  background: linear-gradient(to left, rgba(255,190,80,.85), rgba(255,120,40,0));
  border-radius: 10px; filter: blur(3px);
}
.fx-impact {
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 12%, rgba(255,200,90,.85) 30%, rgba(255,70,40,.45) 55%, rgba(255,60,40,0) 70%);
  animation: fx-impact var(--impact-ms) ease-out forwards;
}
@keyframes fx-impact { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; } }

/* 保護:外框(以中心定位)帶著複製的保護魔物移到傷害對象前方;卡保留自己的樣式(負傷維持橫置),
 * 承受能量後在原地轉成橫置(負傷)或淡出(送墓) */
.fx-guard-wrap {
  z-index: 1; pointer-events: none; transform: translate(-50%, -50%);
  transition: left var(--guard-ms) ease-in-out, top var(--guard-ms) ease-in-out;
}
.fx-guard { transition: transform var(--guard-ms) ease-out, opacity var(--guard-ms), box-shadow var(--guard-ms); }
.fx-guard.guarding { box-shadow: 0 0 0 3px var(--accent-blue), 0 0 22px rgba(108,196,255,.85); }
.fx-guard.guard-gone { opacity: 0; filter: grayscale(1); }

/* 動畫關閉(演出設定;未設定時依 prefers-reduced-motion,由 app.js 切換 html.motion-off) */
.motion-off *, .motion-off *::before, .motion-off *::after {
  animation: none !important; transition: none !important;
}

/* ---------------- 入口頁與房間(online-battle) ---------------- */
#landing { flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 26px; padding: 24px 16px; overflow-y: auto; }
/* 以 auto margin 垂直置中:內容比畫面高時從頂端排起可捲動,不會像 justify-content: center 往上溢出 */
#landing > :first-child { margin-top: auto; }
#landing > :last-child { margin-bottom: auto; }
#landing h1 { display: flex; justify-content: center; }
#landing-online { margin-bottom: 10px; font-size: 13px; color: var(--on-page); text-align: center; }
#landing-online::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: var(--on-page-green); vertical-align: 1px; }
#landing-online.none::before { background: var(--on-page-dim); }
#landing-version-line { margin-top: 4px; font-size: 12px; color: var(--on-page); opacity: .56; text-align: center; }
#release-open { margin-left: 10px; padding: 0; border: none; background: none; cursor: pointer;
  color: inherit; font: inherit; text-decoration: underline; }
.release h4 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.release .release-date { font-weight: normal; font-size: 12px; color: var(--ink-dim); }
.release ul { margin: 2px 0 0 18px; font-size: 13px; line-height: 1.7; }
#landing-disclaimer { max-width: 720px; font-size: 12px; line-height: 1.6; color: var(--on-page); opacity: .7; text-align: center; }
#assets-hint { max-width: 720px; padding: 8px 14px; border-radius: 8px; font-size: 13px;
  color: var(--on-page-amber); background: rgba(217, 164, 65, 0.15);
  border: 1px solid var(--gold); word-break: break-all; }
.card img.art.placeholder { opacity: 0.45; }
#landing-cards { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  max-width: 820px; }
.entry { background: #202a42; border: 1px solid #4a5a80; border-radius: 12px;
  padding: 20px 22px; width: 240px; display: flex; flex-direction: column; gap: 8px;
  text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.entry:hover, .entry:focus-visible { filter: brightness(1.2); border-color: var(--glow); }
.entry-title { font-size: 17px; font-weight: bold; color: var(--ink); }
.entry-desc { font-size: 12px; color: var(--ink-dim); }

/* 設定頁:一次顯示一個模式的面板 */
#setup { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 24px 16px; overflow-y: auto; }
#setup-head { width: 100%; max-width: 360px; display: flex; align-items: center; gap: 12px; }
#setup-head h2 { font-size: 19px; color: var(--on-page); }
#setup-back { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--btn-line);
  background: var(--btn-bg); color: #dfe6ff; cursor: pointer; font-size: 14px; }
.setup-panel { width: 100%; max-width: 360px; background: #202a42; border: 1px solid #4a5a80;
  border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.setup-panel .field { display: flex; flex-direction: column; gap: 10px; }
.setup-panel p { font-size: 12px; color: var(--ink-dim); }
.setup-panel > button, .seg button { padding: 8px; border-radius: 6px; border: 1px solid var(--btn-line);
  background: var(--btn-bg); color: #dfe6ff; cursor: pointer; font-size: 14px; }
.setup-panel > button.primary { margin-top: 6px; background: var(--btn-primary);
  border-color: var(--btn-primary-line); }
.setup-panel button:hover, #setup-back:hover { filter: brightness(1.2); }
.setup-panel input, .setup-panel select { padding: 7px; border-radius: 6px; font-size: 14px;
  border: 1px solid var(--btn-line); background: var(--panel); color: var(--ink); }
.setup-panel label { font-size: 12px; color: var(--ink-dim); }
#join-code { text-transform: uppercase; letter-spacing: 2px; }
.seg { display: flex; }
.seg button { flex: 1; }
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.seg button.active { background: var(--btn-primary); border-color: var(--btn-primary-line);
  font-weight: bold; }
@media (max-width: 700px) {
  #landing-cards { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .entry { width: 100%; padding: 14px 18px; }
}

#waiting { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: 24px 16px; color: var(--on-page); }
#waiting h2 { color: var(--on-page-green); }
.room-code { font-size: 42px; letter-spacing: 10px; color: var(--on-page); font-weight: bold; }
.share-row { display: flex; gap: 8px; align-items: center; font-size: 13px; width: min(480px, 100%); }
.share-row span, .share-row button { white-space: nowrap; }
.share-row input { flex: 1; min-width: 0; padding: 6px; border-radius: 6px;
  border: 1px solid var(--btn-line); background: var(--panel); color: var(--ink-dim); font-size: 12px; }
.share-row button { padding: 5px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--btn-line); background: var(--btn-bg); color: #dfe6ff; }

#identity { color: var(--on-page-blue); font-weight: bold; }
#countdown { color: var(--on-page-orange); font-weight: bold; min-width: 84px; }
#conn-status { font-size: 12px; }
#conn-status.ok { color: var(--on-page-green); }
#conn-status.bad { color: var(--on-page-red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .4; } }
#leave-room { margin-left: auto; padding: 4px 14px; border: 1px solid #4a5a80;
  background: #23304d; color: var(--ink); border-radius: 6px; cursor: pointer; }

.ev .timeout-mark { color: #ff9d6c; }

/* ---------------- 牌組構築器(deck-builder) ---------------- */
.deck-label { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.deck-select { text-transform: none !important; }

#builder { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#builder-head {
  display: flex; gap: 8px; align-items: center; padding: 8px 14px;
  background: var(--page-deep); border-bottom: 1px solid var(--page-line); flex-wrap: wrap;
}
#builder-head button, #io-actions button {
  padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--btn-line); background: var(--btn-bg); color: #dfe6ff;
}
#builder-head button.primary { background: var(--btn-primary); border-color: var(--btn-primary-line); }
#builder-head button:hover { filter: brightness(1.2); }
#builder-head select, #builder-head input {
  padding: 5px 8px; border-radius: 6px; font-size: 13px;
  border: 1px solid var(--btn-line); background: #1c2333; color: var(--ink);
}
#builder-name { width: 180px; }

#builder-main { flex: 1; display: flex; min-height: 0; }
#builder-pool {
  width: 46%; display: flex; flex-direction: column; min-width: 0;
  border-right: 1px solid var(--page-line); background: var(--page-deep);
}
#pool-filters { display: flex; gap: 6px; padding: 8px; flex-wrap: wrap; }
#pool-filters select {
  padding: 4px 8px; border-radius: 6px; font-size: 12px;
  border: 1px solid var(--btn-line); background: #1c2333; color: var(--ink);
}
#pool-grid {
  flex: 1; overflow-y: auto; padding: 8px;
  display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
}
#pool-grid .card { cursor: pointer; }
#pool-grid .card:hover { outline: 2px solid var(--glow); }

#builder-book { flex: 1; overflow-y: auto; padding: 10px 14px; color: var(--on-page); }
#book-hint { font-size: 12px; color: var(--on-page-dim); margin-bottom: 8px; }
#book-grid {
  --slot-w: 92px; display: grid; grid-template-columns: repeat(auto-fill, calc(var(--slot-w) * 2 + 12px));
  gap: 10px; align-content: start;   /* 對頁寬 = 兩頁 + 頁縫 2 + 內距 4×2 + 框線 1×2 */
}
.spread {
  display: flex; gap: 2px; padding: 4px; border-radius: 8px;
  background: #232d47; border: 1px solid #34405f;
}
.spread.single { background: #2a2338; border-color: #4e3a63; }
.page-slot {
  width: var(--slot-w, 92px); min-height: 100px; border-radius: 6px; position: relative;
  border: 2px dashed #4a5a80; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: #1c2333;
}
.page-slot .pno {
  position: absolute; top: 2px; left: 5px; font-size: 9px; color: var(--ink-dim); z-index: 2;
  background: rgba(18,24,42,.75); padding: 0 4px; border-radius: 4px;
}
.page-slot.selected { border-color: var(--glow); border-style: solid; box-shadow: 0 0 6px #ffd16688; }
.page-slot.filled { border-style: solid; align-items: stretch; }   /* 卡片填滿頁位:同一對頁的兩張等高 */
.page-slot .card { width: 88px; min-height: 96px; font-size: 9px; margin: 0; }
.page-slot .card .ceffect { display: none; }
.page-slot .card .cname-ja { display: none; }
.page-slot .card img.art { height: 40px; }
.page-slot.dragover { outline: 2px solid var(--accent-green); }
/* 選中的有卡頁位:明確的移除按鈕(取代再點一次移除,避免連點誤刪) */
.page-slot .slot-remove {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 2;
  font-size: 11px; padding: 2px 10px; border-radius: 10px; cursor: pointer;
  background: var(--danger); color: #fff; border: 1px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.page-slot .empty-label { font-size: 11px; color: #5b6682; }

#builder-validation {
  padding: 8px 14px; background: #161e33; border-top: 1px solid var(--panel-line);
  font-size: 12.5px; min-height: 38px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
#builder-validation .err { color: #ff8f8f; }
#builder-validation .ok { color: var(--accent-green); font-weight: bold; }
#builder-validation .stat { color: var(--ink-dim); }

#io-overlay {
  position: fixed; inset: 0; background: rgba(8,10,18,.72);
  display: flex; align-items: center; justify-content: center; z-index: 60;
}
#io-dialog {
  background: #202a42; border: 1px solid #4a5a80; border-radius: 10px;
  padding: 18px; width: 560px; display: flex; flex-direction: column; gap: 10px;
}
#io-dialog h3 { font-size: 15px; color: var(--glow); }
#io-text {
  width: 100%; font-size: 12px; font-family: monospace; padding: 8px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--btn-line); border-radius: 6px;
  resize: vertical;
}
#io-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ================= 手機直向(≤700px):堆疊佈局,尺寸切手機組 =================
   堆疊序(上→下):對手魔書(對頁+MP)→ 對手搭檔 → 對手魔物 → 中線 →
                   我方魔物 → 我方搭檔 → 我方魔書(對頁+MP) */
@media (max-width: 700px) {
  :root { --card-w: 88px; --card-h: 112px; --art-h: 64px; --cell-w: 92px; --art-ratio: 72 / 64; }

  #topbar { gap: 8px; padding: 6px 8px; font-size: 12px; flex-wrap: wrap; }
  #topbar #title { display: none; }
  .wordmark.large { --wm-badge: 76px; --wm-gap: 14px; --wm-gash: 54px; --wm-sub: 16px; --wm-line-gap: 4px; }

  #layout { flex-direction: column; }
  #board { overflow-y: auto; }
  .player-zone { padding: 4px 8px; }
  .pz-head { font-size: 12px; gap: 8px; flex-wrap: wrap; }
  .pz-head .pname { font-size: 13px; }
  .pz-head-rest { gap: 8px; flex-wrap: wrap; }

  /* 縱向堆疊:zone-body 轉直欄,魔書列以 order 移到外端(對手最上/我方最下) */
  .zone-body { flex-direction: column; align-items: center; gap: 6px; }
  .zone-side { flex: 0 0 auto; min-width: 0; }
  .zone-side.book-side { min-width: 0; align-self: center; }
  .player-zone.top .zone-side.book-side { order: -1; justify-content: center; }
  .player-zone.bottom .field-block { order: -1; }
  .player-zone.bottom .zone-side.book-side { justify-content: center; }

  /* 魔書與 MP 托盤同列,壓低整列高度 */
  .book-block, .player-zone.bottom .book-block { flex-direction: row; align-items: flex-end; gap: 6px; }
  .mp-tray { width: 130px; height: 70px; padding: 6px; }
  .mp-tokens { width: 116px; height: 30px; }
  .mp-token { width: 12px; height: 12px; }
  .mp-token.big { width: 18px; height: 18px; }

  /* 行動記錄:底部抽屜(頁籤=標題列,點擊展開/收合) */
  #log-panel {
    width: auto; border-left: none; border-top: 1px solid var(--panel-line);
    padding: 6px 10px; flex: 0 0 auto;
  }
  /* 收合:只顯示最後 4 條,每條一行;展開:固定 45vh,記錄在 #log 內捲動(min-height: 0 才不會被內容撐高) */
  #log { min-height: 0; }
  #log-panel:not(.open) #log { flex: 0 0 auto; overflow: hidden; }
  #log-panel:not(.open) #log .ev:not(:nth-last-child(-n+4)) { display: none; }
  #log-panel:not(.open) #log .ev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #log-panel.open { flex: 0 0 45vh; min-height: 0; }
  #log-panel h3 {
    cursor: pointer; margin: 0 0 2px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  #log-panel h3::before { content: "☰ "; color: var(--gold-soft); }

  /* 觸控目標 */
  #zoom-actions button { min-height: 44px; font-size: 15px; }
  #dialog-options button { min-height: 44px; font-size: 14px; }
  #action-bar .choice-options button { min-height: 44px; font-size: 14px; }
  #action-bar button { min-height: 40px; font-size: 14px; padding: 8px 14px; }
  /* 窄螢幕:回合轉盤縮小 */
  #turn-cluster { --dial-w: 88px; --dial-h: 48px; gap: 4px; }
  #turn-dial { --pad-x: 24px; --pad-y: 19px; }
  #action-bar { gap: 6px; padding: 8px 10px; }
  #turn-dial .dial-tab-text { font-size: 10px; padding: 1px 5px; }
  #turn-dial .dial-center { font-size: 11px; }
  #turn-cluster .turn-side { max-width: 84px; }
  #dial-note { font-size: 10px; }
  #timing-track { font-size: 11px; gap: 2px; }
  #timing-track .step { padding: 1px 5px; }
  #timing-track .seg-battle.collapsed .step, #timing-track .seg-battle.collapsed .sep { display: none; }
  #timing-track.in-battle > .step, #timing-track.in-battle > .sep,
  #timing-track.in-battle .seg-phase > .seg-label, #timing-track.in-battle .seg-phase > .sep.outer { display: none; }
  #dialog { max-width: 94vw; }
  #zoom-card .card { width: min(300px, 86vw); }
  #zoom-actions { width: min(300px, 86vw); }
  #zoom-card .card img.art { height: min(250px, 40vh); }

  /* 構築器:上下分割(魔書上、卡池下),點選互動為準 */
  #builder-head { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  #builder-name { width: 120px; }
  #builder-main { flex-direction: column; }
  #builder-book { order: -1; flex: 0 0 46%; border-bottom: 1px solid var(--page-line);
    padding: 8px; }
  #builder-pool { width: auto; flex: 1; border-right: none; min-height: 0; }
  #book-grid { --slot-w: 76px; gap: 6px; justify-content: center; }
  .page-slot { min-height: 88px; }
  .page-slot .card { width: 72px; min-height: 84px; }
  #pool-grid { justify-content: center; }
  #pool-grid .card { width: 106px; }
  #builder-validation { font-size: 11px; min-height: 30px; padding: 6px 8px; gap: 8px; }
}

/* 使用中卡片(宣告中的攻防戰術)與可點卡名 */
#board .card.in-use {
  outline: 2px solid var(--glow);
  box-shadow: 0 0 14px rgba(255, 209, 102, .65);
}
.card-ref { color: var(--glow); text-decoration: underline dotted; cursor: pointer; }
.card-ref:hover { text-shadow: 0 0 6px rgba(255, 209, 102, .5); }