/* 深淵暗賭（ADR-198）：試玩頁 /dev/abyssal.html 的外框，以及板子（js/games/abyssal/board.js）的樣子。
   版面照 docs/features/abyssal-bet.md 第二部分 §6。

   **這裡沒有圖的路徑、也沒有每張牌各自的樣式**：
   - 圖一律由 board.js 照 js/games/abyssal/content.js 的 ART 寫進元素的 --img（加上 --w / --h 原始尺寸），
     這裡只寫 background: var(--img)。換圖只改 content.js。
   - 卡框顏色照 content.js 的 TYPE_STYLE 寫進卡面的 --tc。
   - 板子的座標（兩排、手牌的上緣、槽的 x、右欄、板子大小、行距、飄字飄多高）是 content.js 的 LAYOUT，board.js 寫成
     --y-opp / --y-self / --y-hand / --x-side / --side-w / --side-h / --side-top / --say-top / --who-w / --face / --lead /
     --float-rise / --float-steps / --ab-w / --ab-h / --ab-frame / --card-w / --card-h；走廊上每一樣東西的位置由 board.js 算好寫進 --x / --y。
   - 兩邊的代表色（content.js 的 SEAT_STYLE）是 --ink-self / --ink-opp；牌背（BACK_STYLE）是 --back-frame / --back-fill。
   - 動畫長度是 content.js 的 TIMING，board.js 寫成 --ab-flip-ms 那一組。
   - 自己（下面那排）是 .self、對手（上面那排）是 .opp：誰坐哪一邊由 board.js 的 mySeat 決定，這裡不管名字。
   這裡剩下的數字是「一張卡面 / 一個人的資訊欄裡面怎麼排」這種模板。
   試玩頁的外框（頁面留白、資訊欄寬、板子和資訊欄的間距、資訊欄能不能放右邊）寫成 .ab-page 上的
   --ab-pad / --ab-gap / --ab-side-w / --ab-side-ok，dev/abyssal.js 的 fit() 讀這幾個變數、卡片的框和內距、
   實際量到的標題列高度來挑板子的大小和版面（.stack = 資訊欄在下面），不另外抄一份數字。

   像素的規矩：一個板子像素 = --u 個 CSS px（board.js 的 fitBoardScale 挑，讓「--u × 裝置像素比」是整數），
   板子裡的位置、大小、邊框、字級全部乘 --u，字級只有 12 × --u 一種。沒有圓角、沒有模糊的影子；
   動畫一律 steps()，每一格的位移都是 --u 的整數倍。 */

/* ---- 頁面外框（跟寶石方塊試玩頁同一個樣子） ---- */
.ab-page {
  --ab-pad: 16px;        /* 頁面四周留白 */
  --ab-gap: 16px;        /* 板子和資訊欄之間 */
  --ab-side-w: 260px;    /* 資訊欄放在板子右邊時多寬 */
  --ab-side-ok: 1;       /* 1 = 視窗夠寬，資訊欄可以放在板子右邊（手機是 0，一律放下面） */
  min-height: 100%; display: flex; justify-content: center; align-items: flex-start;
  padding: var(--ab-pad);
}
.ab-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 100%;
  background: var(--panel); padding: 8px 12px 12px;
  border: 12px solid transparent; border-image: var(--frame); image-rendering: pixelated;
  box-shadow: 0 6px 0 rgba(0,0,0,.5);
}
.ab-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ab-head h1 { margin: 0; font-size: 24px; font-weight: normal; color: var(--amber); letter-spacing: 2px; }
.ab-tag { font-size: 12px; color: var(--ink-faint); }

/* 設定列 */
.ab-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--ink-soft); }
.ab-settings label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ab-settings select { padding: 4px 6px; }
.ab-settings button { padding: 5px 10px; }
.ab-adv { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 6px 8px;
  background: var(--panel-2); border: 2px solid var(--border); }
.ab-adv[hidden] { display: none; }
#ab-adv-btn.changed { border-color: var(--amber-deep); color: var(--amber); }

/* 行內確認（不開對話框）：換設定開新局、認輸 */
.ab-confirm { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 8px; font-size: 12px; line-height: 1.5; color: var(--ink);
  background: #3a211a; border: 2px solid #a04a3a; }
.ab-confirm[hidden] { display: none; }
.ab-confirm span { flex: 1 1 100%; }

.ab-body { display: flex; gap: var(--ab-gap); align-items: flex-start; }
/* 資訊欄放到板子下面：dev/abyssal.js 的 fit() 挑（手機一定；桌機是「放右邊板子會變小」的時候，例如 1024 寬以下） */
.ab-page.stack .ab-body { flex-direction: column; align-items: center; gap: 10px; }
.ab-page.stack .ab-side { width: 100%; max-width: var(--ab-wrap-w, 344px); }

/* ---- 板子 ---- */
/* 外框（box-shadow）畫在 .ab-wrap 的 padding 裡；結算卡也蓋在 .ab-wrap 上，所以 --u、--ab-frame 在這裡也要有（dev/abyssal.js 設） */
.ab-wrap { --u: 1px; position: relative; flex: none; padding: calc(var(--ab-frame, 2) * var(--u)); }

.ab-board {
  position: relative; overflow: hidden;
  width: calc(var(--ab-w) * var(--u)); height: calc(var(--ab-h) * var(--u));
  font-size: calc(12 * var(--u)); line-height: calc(12 * var(--u));
  color: var(--ink);
  background: #241a13;
  box-shadow: 0 0 0 calc(var(--ab-frame) * var(--u)) var(--border), 0 calc(4 * var(--u)) 0 calc(var(--ab-frame) * var(--u)) rgba(0,0,0,.45);
  image-rendering: pixelated;
  user-select: none; -webkit-user-select: none;
}
/* 兩排中間走廊那一條的底色：讓上（對手）下（自己）兩半分得開 */
.ab-board::before { content: ""; position: absolute; left: 0; right: 0;
  top: calc((var(--y-opp) + var(--card-h)) * var(--u));
  height: calc((var(--y-self) - var(--y-opp) - var(--card-h)) * var(--u)); background: #1c140f; }

/* 一張圖：位置 --x / --y、大小 --w / --h（板子像素），圖是 --img（board.js 照 content.js 的 ART 設） */
.ab-spr { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  background: var(--img) no-repeat 0 0 / 100% 100%; }

/* 兩人的資訊：左欄（對手在上、自己在下；蠟燭都靠近中間的走廊） */
.ab-who { position: absolute; left: calc(2 * var(--u)); width: calc(var(--who-w) * var(--u)); height: calc(var(--card-h) * var(--u)); }
.ab-who.opp { top: calc(var(--y-opp) * var(--u)); }
.ab-who.self { top: calc(var(--y-self) * var(--u)); }
.ab-face { position: absolute; left: calc(2 * var(--u)); width: calc(var(--face) * var(--u)); height: calc(var(--face) * var(--u));
  overflow: hidden; background-color: #1a130e; box-shadow: 0 0 0 calc(2 * var(--u)) var(--border); }
.ab-face.opp { top: calc(2 * var(--u)); }
.ab-face.self { top: calc(38 * var(--u)); }
.ab-name, .ab-hptext, .ab-status { position: absolute; left: calc(38 * var(--u)); right: 0; white-space: nowrap; overflow: hidden; }
.ab-name { text-overflow: ellipsis; }   /* 名字由外面給（酒館裡是玩家名字），太長就截掉，不蓋到槽 */
.ab-who.opp .ab-name { top: calc(2 * var(--u)); }
.ab-who.opp .ab-hptext { top: calc(14 * var(--u)); }
.ab-who.opp .ab-status { top: calc(26 * var(--u)); }
.ab-who.self .ab-name { top: calc(36 * var(--u)); }
.ab-who.self .ab-hptext { top: calc(48 * var(--u)); }
.ab-who.self .ab-status { top: calc(60 * var(--u)); }
.ab-who.opp .ab-name { color: var(--ink-opp); }     /* 跟走廊上對手的棋子同一個顏色 */
.ab-who.self .ab-name { color: var(--ink-self); }
.ab-status { color: var(--ink-faint); }
.ab-status.ready { color: var(--amber); }

/* 理智 = 蠟燭：一排 6 根，點亮 / 熄掉 / 燒光三種圖（board.js 換 --img） */
.ab-candles { position: absolute; left: calc(4 * var(--u)); width: calc(96 * var(--u)); height: calc(32 * var(--u));
  display: flex; flex-wrap: wrap; align-content: flex-end; }
.ab-who.opp .ab-candles { top: calc(40 * var(--u)); }
.ab-who.self .ab-candles { top: calc(2 * var(--u)); align-content: flex-start; }
.ab-candle { flex: none; width: calc(var(--w, 16) * var(--u)); height: calc(var(--h, 16) * var(--u));
  background: var(--img) no-repeat 0 0 / 100% 100%; }

/* ---- 卡片按鈕（槽、手牌）：外觀全部畫在裡面的 span 上，按鈕本身透明 ---- */
.ab-card-btn {
  position: absolute; display: block;
  width: calc(var(--card-w) * var(--u)); height: calc(var(--card-h) * var(--u));
  padding: 0; margin: 0; border: 0; background: transparent;
  font: inherit; font-size: calc(12 * var(--u)); line-height: calc(12 * var(--u)); font-weight: normal;
  color: var(--ink); white-space: nowrap; text-align: left; cursor: pointer;
}
.ab-card-btn:hover:not(:disabled) { border: 0; color: var(--ink); }
.ab-card-btn:active:not(:disabled) { background: transparent; }
/* 鍵盤焦點：畫在牌的外面（牌與牌之間有空隙、每排上下留了 2 像素），淡色的框跟每一種卡框顏色都分得開 */
.ab-card-btn:focus-visible { outline: calc(2 * var(--u)) solid #fff0b8; outline-offset: 0; z-index: 4; }
.ab-card-btn[aria-disabled="true"] { cursor: default; }

.ab-slot { left: calc(var(--x) * var(--u)); }
.ab-slot.opp { top: calc(var(--y-opp) * var(--u)); }
.ab-slot.self { top: calc(var(--y-self) * var(--u)); }

/* 卡面：左上速度、右上類型（字，不只靠顏色）、中間 32px 的圖、短名、右下主要效果。卡框顏色 --tc 由 board.js 設 */
.ab-cf { --tc: var(--border);
  position: absolute; inset: 0; display: block;
  background: #30241b; border: calc(2 * var(--u)) solid var(--tc); }
.ab-c-speed { position: absolute; left: 0; top: 0; height: calc(12 * var(--u));
  padding: 0 calc(2 * var(--u)); color: #1a120c; background: var(--tc); }
.ab-c-type { position: absolute; right: calc(1 * var(--u)); top: 0; color: var(--tc); }
.ab-c-art { position: absolute; left: calc(8 * var(--u)); top: calc(12 * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); background: var(--img) no-repeat 0 0 / 100% 100%; }
.ab-c-name { position: absolute; left: 0; right: 0; top: calc(44 * var(--u)); text-align: center; }
/* 置中的字要落在整數像素上：中文字寬 13（奇數），字數是奇數時框少 1 像素（board.js 加 .odd；你的空槽和手牌的空框固定是奇數字） */
.ab-c-name.odd, .ab-stamp.odd { padding-left: calc(1 * var(--u)); }
.ab-c-tag { position: absolute; right: calc(2 * var(--u)); top: calc(56 * var(--u)); color: var(--amber); }
/* 空白的蠟燭（每人一次的規則，第一張之後）：反灰、右下寫「無效」 */
.ab-cf.blank { background: #251e18; }
.ab-cf.blank .ab-c-art { filter: grayscale(1); opacity: .45; }
.ab-cf.blank .ab-c-name { color: var(--ink-faint); }
.ab-cf.blank .ab-c-tag { color: #e07a5f; }

/* 牌背（對手蓋著的牌；顏色是 content.js 的 BACK_STYLE） */
.ab-back { position: absolute; inset: 0; display: block; background: var(--back-fill); border: calc(2 * var(--u)) solid var(--back-frame); }
.ab-back-art { position: absolute; left: calc(8 * var(--u)); top: calc(18 * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); background: var(--img) no-repeat 0 0 / 100% 100%; }

/* 空的槽：自己的寫「① 先結算」（出牌時）；對手還在想的放一個沙漏 */
.ab-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(4 * var(--u)); color: var(--ink-faint); background: #1a130e;
  border: calc(2 * var(--u)) solid #3a2c20; }
.ab-empty b { font-weight: normal; color: var(--ink-soft); }
.ab-slot.self .ab-empty { border-color: #5a4430; padding-left: calc(1 * var(--u)); }
.ab-hourglass { display: block; flex: none; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  background: var(--img) no-repeat 0 0 / 100% 100%; }
.ab-empty.think .ab-hourglass { animation: ab-blink var(--ab-blink-ms) steps(1) infinite; }
@keyframes ab-blink { 50% { opacity: .35; } }

/* 放好的牌上緣中間標 ①②（左上是速度、右上是類型、右下的角標最長「傷害3」會佔到左下，所以放上面） */
.ab-slotmark { position: absolute; left: calc(18 * var(--u)); top: calc(2 * var(--u)); color: var(--ink-soft); }

/* 蓋在牌上的字：作廢 / 無效 / 擋下 / 移出 / 被伏擊 / 撲空 / 護盾 / 沒翻（字在 content.js 的 TEXT.stamp） */
.ab-stamp { position: absolute; z-index: 1; left: calc(4 * var(--u)); top: calc(24 * var(--u));
  width: calc(44 * var(--u)); height: calc(16 * var(--u)); text-align: center;
  color: #ffd8cc; background: #2a120e; border: calc(2 * var(--u)) solid #c0563f; }
.ab-stamp.good { color: #d8ecff; background: #13202e; border-color: #6a9fd4; }
.ab-stamp.quiet { color: var(--ink-soft); background: #1a130e; border-color: var(--border); }

/* 揭牌：正在結算的那一槽亮、另一槽暗；正在動作的牌往桌子中間移 2 像素、外面加一圈琥珀色的框 */
.ab-slot.dim { opacity: .45; }
.ab-slot.acting { z-index: 2; }
.ab-slot.self.acting { translate: 0 calc(-2 * var(--u)); }
.ab-slot.opp.acting { translate: 0 calc(2 * var(--u)); }
.ab-slot.acting::after { content: ""; position: absolute; inset: calc(-2 * var(--u)); pointer-events: none;
  border: calc(2 * var(--u)) solid var(--amber); }
/* 翻牌：牌背 → 側面（中間一條）→ 正面，三格硬切，不縮放（縮成一半的圖不是整數倍） */
.ab-flipback, .ab-flipedge { opacity: 0; }
.ab-back.ab-flipback { z-index: 1; animation: ab-flipback var(--ab-flip-ms) steps(1, end) both; }
.ab-flipedge { position: absolute; z-index: 1; left: calc(24 * var(--u)); top: 0; width: calc(4 * var(--u)); height: 100%;
  background: var(--back-frame); animation: ab-flipedge var(--ab-flip-ms) steps(1, end) both; }
.ab-cf.flipin { animation: ab-flipin var(--ab-flip-ms) steps(1, end) both; }
@keyframes ab-flipback { 0% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ab-flipedge { 0% { opacity: 0; } 35% { opacity: 1; } 65% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ab-flipin { 0% { opacity: 0; } 65% { opacity: 1; } 100% { opacity: 1; } }
/* 對手出牌：兩張蓋牌從上面落下來（三格，每格 4 像素） */
.ab-back.drop { animation: ab-drop var(--ab-drop-ms) steps(3, end) both; }
@keyframes ab-drop { from { translate: 0 calc(-12 * var(--u)); opacity: 0; } to { translate: 0 0; opacity: 1; } }

/* ---- 右欄：回合、對手說的話 / 速度梯、倒數、提示（大小是 content.js 的 LAYOUT.side；字太多也不跑出這一塊） ---- */
.ab-rk, .ab-rm { position: absolute; left: calc(var(--x-side) * var(--u)); width: calc(var(--side-w) * var(--u));
  height: calc(var(--side-h) * var(--u)); overflow: hidden; }
.ab-rk { top: calc((var(--y-opp) + var(--side-top)) * var(--u)); }
.ab-rm { top: calc((var(--y-self) + var(--side-top)) * var(--u)); }
.ab-turn { color: var(--ink-soft); white-space: nowrap; }
.ab-say { position: absolute; left: 0; top: calc(var(--say-top) * var(--u)); width: 100%; margin: 0;
  line-height: calc(var(--lead) * var(--u)); color: #f0c9a8; }
.ab-say.old { color: var(--ink-faint); }

.ab-ladder { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: calc(1 * var(--u)); }
.ab-ladder-h { width: calc(26 * var(--u)); color: var(--ink-faint); white-space: nowrap; }
/* 15 寬：扣掉兩邊的框剩 11，數字寬 7（「1」是 6），靠左留 2 —— 不用 text-align: center，免得「1」落在半個像素上 */
.ab-rung { width: calc(15 * var(--u)); height: calc(16 * var(--u)); padding-left: calc(2 * var(--u)); color: var(--ink-faint);
  background: #1a130e; border: calc(2 * var(--u)) solid var(--border); }
.ab-rung.done { color: var(--ink-soft); border-color: #5a4430; }
.ab-rung.on { color: #1a120c; background: var(--amber); border-color: #fff0b8; }
.ab-clock { position: absolute; left: 0; top: calc(22 * var(--u)); display: flex; align-items: center; gap: calc(4 * var(--u));
  white-space: nowrap; color: var(--ink); }
.ab-clock.low { color: #e07a5f; }
.ab-clock.idle .ab-hourglass { opacity: .4; }
/* 提示最多兩行；換行寫在字裡（content.js 的 TEXT.hint.first），不讓「①」跟後面的字被拆開 */
.ab-hint { position: absolute; left: 0; top: calc(42 * var(--u)); width: 100%; margin: 0;
  line-height: calc(var(--lead) * var(--u)); white-space: pre-line; color: var(--ink-soft); }
.ab-hint.warn { color: #e07a5f; }

/* ---- 走廊（金幣賽道）：入口的拱門 → 一金幣一塊石板（上排對手、下排自己）→ 寶藏室的寶箱 ----
   每一樣東西的位置、大小都由 board.js 照 content.js 的 LAYOUT.corridor 算好寫進 --x / --y / --w / --h。 */
.ab-cor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ab-floor, .ab-tile { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.ab-floor { background: #150f0c; }
/* 石板：材質橫向接著鋪（--bx 讓每一塊從走廊起點算起的位置接上），圖的大小照原始尺寸 --bw × --bh */
.ab-tile { background: var(--img) repeat-x; background-size: calc(var(--bw) * var(--u)) calc(var(--bh) * var(--u));
  background-position: calc(var(--bx) * var(--u)) 0; }
.ab-goal, .ab-toknum { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); white-space: nowrap;
  text-shadow: var(--u) 0 0 #140d09, calc(-1 * var(--u)) 0 0 #140d09, 0 var(--u) 0 #140d09, 0 calc(-1 * var(--u)) 0 #140d09; }
.ab-goal { color: var(--amber); }
.ab-toknum.opp { color: var(--ink-opp); }
.ab-toknum.self { color: var(--ink-self); }

/* ---- 手牌：置中一排 ---- */
.ab-hand { position: absolute; left: 0; top: calc(var(--y-hand) * var(--u)); width: 100%; height: calc(var(--card-h) * var(--u));
  display: flex; justify-content: center; gap: calc(var(--hand-gap) * var(--u)); }
.ab-hand[hidden], .ab-hc[hidden] { display: none; }   /* 觀戰（setReadOnly）時整排收起來 */
.ab-hc { position: relative; flex: none; }
/* 放進槽裡的牌，手牌那個位置留一個空框，寫它去了哪一槽 */
.ab-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding-left: calc(1 * var(--u)); color: var(--ink-faint); border: calc(2 * var(--u)) solid #3a2c20; }
.ab-ph b { font-weight: normal; }
/* 新抽到的牌：外框閃三下（減少動態效果時改成固定亮框，見最下面） */
.ab-hc.new .ab-cf { animation: ab-new var(--ab-new-ms) steps(1, end) both; }
@keyframes ab-new { 0%, 33%, 66% { border-color: #fff0b8; } 17%, 50%, 83%, 100% { border-color: var(--tc); } }

/* ---- 跳出來的數字（+3 金 / −3 理智）：位置由 board.js 量過字寬、夾在板子裡面，放在整數板子像素上 ---- */
.ab-floats { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
/* 深色底板：飄在蠟燭、石板上面也讀得清楚 */
.ab-float { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  padding: var(--u) calc(3 * var(--u)); white-space: nowrap; text-align: left;
  background: #1a120c; box-shadow: 0 var(--u) 0 #000;
  text-shadow: var(--u) 0 0 #1a120c, calc(-1 * var(--u)) 0 0 #1a120c, 0 var(--u) 0 #1a120c, 0 calc(-1 * var(--u)) 0 #1a120c;
  animation: ab-float var(--ab-float-ms) steps(var(--float-steps), end) forwards; }
.ab-float small { display: block; font-size: calc(12 * var(--u)); line-height: calc(12 * var(--u)); }
.ab-float.minus { color: #f08870; }
.ab-float.plus { color: #9fe0a0; }
.ab-float.gold { color: #ffd060; }
.ab-float.cap { color: #d8a8f0; }
/* 往上飄 --float-rise 像素、分 --float-steps 格（content.js 的 LAYOUT.floats：8 像素四格，每格 2 像素），最後四分之一淡掉 */
@keyframes ab-float { 0% { translate: 0 0; opacity: 1; } 75% { opacity: 1; } 100% { translate: 0 calc(-1 * var(--float-rise) * var(--u)); opacity: 0; } }

/* ---- 「第 N 回合」橫幅：放在對手那兩槽上面（位置由 board.js 算），不擋操作 ---- */
.ab-banner { position: absolute; z-index: 7; left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u));
  display: flex; flex-direction: column; gap: calc(2 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u)); white-space: nowrap; pointer-events: none;
  color: var(--amber); background: #2a1d14; border: calc(2 * var(--u)) solid var(--amber-deep);
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(0,0,0,.5); }
.ab-banner[hidden] { display: none; }
.ab-banner small { font-size: calc(12 * var(--u)); color: var(--ink-soft); }

/* ---- 結算卡：蓋在板子上（寬度固定、位置是整數板子像素：340 − 240 = 左右各 50） ---- */
.ab-over { position: absolute; inset: 0; z-index: 8; background: rgba(20, 14, 10, .84); }
.ab-over[hidden] { display: none; }
.ab-over-card { position: absolute; left: calc(50 * var(--u)); top: calc(44 * var(--u)); width: calc(240 * var(--u));
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u)); background: var(--panel); border: calc(2 * var(--u)) solid var(--border);
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(0,0,0,.5);
  font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--ink-soft); }
.ab-over-card h2 { margin: 0; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); font-weight: normal;
  color: var(--amber); letter-spacing: var(--u); }
.ab-over-card p { margin: 0; }
.ab-over-reason { color: var(--ink); }
.ab-over-at { color: var(--ink-faint); }
.ab-over-card button { min-height: max(36px, calc(20 * var(--u))); min-width: calc(80 * var(--u)); margin-top: calc(2 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u)); font-size: calc(12 * var(--u)); border-width: calc(2 * var(--u)); }

/* ---- 資訊欄（桌機在板子右邊，手機和窄的視窗在板子下面） ---- */
.ab-side { width: var(--ab-side-w); display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--ink-soft); }
.ab-p-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  border-bottom: 2px solid var(--border); padding-bottom: 4px; }
.ab-p-title { color: var(--amber); font-weight: 700; }
.ab-phase { color: var(--ink); white-space: nowrap; }
.ab-phase.low { color: #e07a5f; }
.ab-p-sub { color: var(--ink-faint); line-height: 1.5; }
.ab-p-actions { display: flex; gap: 6px; }
.ab-p-actions button { flex: 1; min-height: 36px; padding: 4px 6px; }
.ab-p-actions button[hidden] { display: none; }
/* 停用的按鈕用 aria-disabled（不用 disabled）：焦點不會掉回頁首，讀螢幕照樣唸得到 */
.ab-side button[aria-disabled="true"], .ab-side button[aria-disabled="true"]:hover {
  opacity: .45; cursor: not-allowed; border-color: var(--border); color: var(--ink-soft); }
.ab-side .btn-primary[aria-disabled="true"], .ab-side .btn-primary[aria-disabled="true"]:hover { color: #2a1c0c; }
.ab-side button[aria-disabled="true"]:active { translate: none; background: var(--panel-2); box-shadow: none; }
.ab-side .btn-primary[aria-disabled="true"]:active { background: linear-gradient(180deg, var(--amber) 0%, var(--amber-deep) 100%); }

.ab-info { padding: 6px 8px; min-height: 84px; line-height: 1.5; background: var(--panel-2); border: 2px solid var(--border); }
.ab-info p { margin: 0; }
.ab-info-name { color: var(--amber); }
.ab-info-meta { color: var(--ink-faint); }
.ab-info-text { color: var(--ink-soft); }

.ab-log { height: 144px; overflow-y: auto; padding: 4px 6px; line-height: 1.5;
  background: #1a130e; border: 2px solid var(--border); }
.ab-log:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.ab-log p { margin: 0; }
.ab-log .turn { color: var(--amber); margin-top: 4px; }
.ab-log .slot { color: var(--ink); }
.ab-log .say { color: #f0c9a8; }
.ab-log .end { color: var(--amber); }

/* 還沒看到的牌（牌庫 + 卡絲的手牌；跟卡絲記牌看的是同一份） */
.ab-seen-box { display: flex; flex-direction: column; gap: 4px; }
.ab-seen-h { color: var(--ink-faint); }
.ab-seen-h b { font-weight: normal; color: var(--ink-soft); }
.ab-seen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ab-seen-cell { display: flex; flex-direction: column; align-items: center; padding: 2px 0;
  background: var(--panel-2); border: 2px solid var(--border); }
.ab-seen-cell b { font-weight: normal; color: var(--ink); }
.ab-seen-cell.gone { border-color: var(--amber-deep); }
.ab-seen-cell.gone b { color: var(--amber); }
.ab-piles, .ab-candle-state { color: var(--ink-faint); }
.ab-candle-state[hidden] { display: none; }

.ab-rules { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; line-height: 1.5;
  background: var(--panel-2); border: 2px solid var(--border); }
.ab-rules[hidden] { display: none; }
.ab-rules p { margin: 0; }
.ab-rules h3 { margin: 0; font-size: 12px; font-weight: normal; color: var(--amber); }
.ab-rules ul { margin: 0; padding-left: 16px; }
.ab-rules li b { font-weight: normal; color: var(--ink); }

.ab-foot { display: flex; flex-direction: column; gap: 2px; line-height: 1.6; color: var(--ink-faint); }
.ab-foot b { font-weight: normal; color: var(--ink-soft); }
.ab-foot #ab-tally { color: var(--ink); }
.ab-foot .btn-sm { margin-left: 4px; }

.ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 觸控裝置沒有實體鍵盤：不列快捷鍵 */
@media (pointer: coarse) {
  .ab-keys { display: none; }
}

/* 1100 寬以下（1024 的筆電、外接螢幕）：頁面留白收小，資訊欄放右邊時板子還放得下 2 倍 */
@media (max-width: 1100px) {
  .ab-page { --ab-pad: 4px; --ab-gap: 12px; }
}
/* 720～735 寬：外框和內距收小一點，資訊欄放下面時板子還放得下 2 倍（fit() 讀實際值，不用改） */
@media (min-width: 720px) and (max-width: 759px) {
  .ab-card { padding: 4px; }
}
/* 窄螢幕（手機直放）：拿掉外框、資訊欄一律在板子下面（跟板子一樣寬）；按得到的東西至少 36px 高。
   留白收到 2px：360 寬的手機扣掉留白剛好放得下 1 倍的板子（含外框 340） */
@media (max-width: 719px) {
  .ab-page { --ab-pad: 2px; --ab-side-ok: 0; }
  .ab-card { width: 100%; padding: 6px; border: 0; border-image: none; box-shadow: none; }
  /* 跟 .ab-page.stack 一樣（fit() 在手機上一定加 .stack）；這裡先寫一次，模組還沒跑完的第一格畫面就不會左右排 */
  .ab-body { flex-direction: column; align-items: center; gap: 10px; }
  .ab-side { width: 100%; max-width: var(--ab-wrap-w, 344px); }
  .ab-log { height: 108px; }
  .ab-settings select, .ab-settings button, .ab-confirm button, .ab-foot .btn-sm { min-height: 36px; }
  .ab-confirm button { min-width: 72px; }
}

/* 減少動態效果：不翻牌、不飄字、棋子直接跳到位（board.js）；每一步靜止停一下，外框標出是哪張在動作；
   新抽到的牌改成固定的亮框（不閃，但還是看得出是新的） */
@media (prefers-reduced-motion: reduce) {
  .ab-slot.acting { translate: none; }
  .ab-slot.self.acting, .ab-slot.opp.acting { translate: none; }
  .ab-back.ab-flipback, .ab-flipedge, .ab-cf.flipin, .ab-back.drop, .ab-empty.think .ab-hourglass { animation: none; }
  .ab-hc.new .ab-cf { animation: none; border-color: #fff0b8; }
  .ab-float { animation: ab-float-still var(--ab-float-reduced-ms) steps(1, end) forwards; }
}
@keyframes ab-float-still { 0% { opacity: 1; } 100% { opacity: 0; } }