/* 深淵暗賭在酒館裡（ADR-200，docs/features/abyssal-bet-tavern.md §10.1 ⑤）：
   牌桌的容器（.duel-stage，SceneView.mountCenter 放在房間正中央）、蓋在牌桌上的結算卡、
   資訊欄（#duel，借 .game-panel 的版位，跟 gems.css 的 .gems-panel 同一套）：桌邊面板、被挑戰、自己的局、觀戰。

   **牌桌本身的樣子在 css/abyssal.css**（試玩版在用的那一份：.ab-board、.ab-wrap、.ab-over、.ab-over-card…），
   index.html 要在這一份之前載它（不用 @import：多一趟串接的請求，abyssal-bet-dev.md 的檢查也不收 CSS 裡的 url()）。

   **這裡沒有圖的路徑**：資訊欄標題的小紙牌由 DuelView 照 content.js 的 ART.headMark 設 --img；
   兩邊的代表色（content.js 的 SEAT_STYLE）由 DuelView 設在面板上的 --ink-self / --ink-opp；
   一個板子像素幾 CSS px（--u）、外框寬（--ab-frame）由 DuelView 設在 .duel-wrap 上。
   像素的規矩照全站（frontend.md §5）：沒有圓角、沒有模糊、沒有平滑的 transition，邊線 2px，字級只有 12 / 24。 */

/* ---- 牌桌：浮在房間正中央（SceneView 的 .scene-overlay 裡；left / top 是 JS 算好的整數 px）----
   吞掉點擊的是 .scene-overlay（點牌桌不會變成角色往那一格走）。.duel-wrap 同時是 abyssal.css 的 .ab-wrap（外框、結算卡的定位） */
.duel-stage { position: absolute; left: 0; top: 0; pointer-events: auto; }
.duel-wrap { --u: 1px; }
.duel-over-actions { display: flex; gap: calc(6 * var(--u)); flex-wrap: wrap; margin-top: calc(2 * var(--u)); }
.duel-over-card .ok { color: var(--verd); }
.duel-over-card .ab-over-at { color: var(--ink-faint); }
.duel-over-actions button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---- 資訊欄（.game-panel：桌機右下、手機在房間正下方）---- */
.duel-panel { gap: 6px; }
.duel-panel [hidden] { display: none; }
.duel-p-head { display: flex; align-items: center; gap: 6px; border-bottom: 2px solid var(--border); padding-bottom: 4px; }
.duel-p-icon { flex: none; width: 16px; height: 16px; image-rendering: pixelated;
  background: var(--img, none) 0 0 / 100% 100% no-repeat; }
.duel-p-title { flex: 1; min-width: 0; color: var(--amber); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel-p-phase { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); white-space: nowrap; }   /* 「等某某出牌…」名字很長也不撐破 */
.duel-p-phase.low { color: #e07a5f; }
.duel-p-sub { color: var(--ink-faint); line-height: 1.5; }
.duel-sec { display: flex; flex-direction: column; gap: 6px; }

/* 按鈕列：一列平分，放不下就換行（揭牌中三顆、敬酒帶名字都可能超過資訊欄寬）；停用用 aria-disabled（焦點不會掉回頁首，讀螢幕照樣唸得到） */
.duel-p-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.duel-p-actions button { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; min-height: 36px; padding: 4px 6px; }
.duel-panel button[aria-disabled="true"], .duel-panel button[aria-disabled="true"]:hover {
  opacity: .45; cursor: not-allowed; border-color: var(--border); color: var(--ink-soft); }
.duel-panel .btn-primary[aria-disabled="true"], .duel-panel .btn-primary[aria-disabled="true"]:hover { color: #2a1c0c; }
.duel-panel button[aria-disabled="true"]:active { translate: none; background: var(--panel-2); box-shadow: none; }
.duel-panel .btn-primary[aria-disabled="true"]:active { background: linear-gradient(180deg, var(--amber) 0%, var(--amber-deep) 100%); }
/* 按鈕旁的快捷鍵（L / S / Esc）；觸控裝置沒有實體鍵盤，不列 */
.duel-key { margin-left: 4px; font-weight: normal; opacity: .7; }
@media (pointer: coarse) { .duel-key { display: none; } }

/* ---- 桌邊面板（§3.2 的表）---- */
.duel-t-note { margin: 0; line-height: 1.5; color: var(--ink); }
.duel-t-btns { display: flex; flex-direction: column; gap: 6px; }
.duel-t-btn { min-height: 36px; padding: 4px 8px; line-height: 1.4; white-space: normal; }
.duel-t-btn small { display: block; font-size: 12px; color: var(--ink-faint); }
.duel-t-stats { display: flex; flex-direction: column; gap: 2px; line-height: 1.5; color: var(--ink-faint); }
.duel-t-busy { margin: 0; line-height: 1.5; color: #e07a5f; }
.duel-table .btn-sm { flex: none; min-height: 28px; margin-left: auto; }

/* ---- 被挑戰：疊在資訊欄最上面，外框一亮一暗（steps，不是平滑的動畫）---- */
.duel-invite { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px;
  background: #3a2a14; border: 2px solid var(--amber-deep); animation: duel-attn 1000ms steps(1) infinite; }
.duel-invite p { margin: 0; line-height: 1.5; }
.duel-invite-text { color: var(--amber); }
.duel-invite-left { color: var(--ink-soft); }
@keyframes duel-attn { 50% { border-color: var(--amber); } }

/* ---- 自己的局 / 觀戰：兩個人（上面對手、下面自己；名字的顏色跟板子上一樣）---- */
.duel-players { display: flex; flex-direction: column; gap: 2px; }
.duel-who { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 20px; line-height: 1.5; }
.duel-who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-self); }
.duel-who.opp .duel-who-name { color: var(--ink-opp); }
.duel-who-rec { color: var(--ink-faint); white-space: nowrap; }
.duel-who-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.duel-badge { font-size: 12px; line-height: 1; padding: 2px 4px; white-space: nowrap; color: var(--amber); border: 2px solid var(--amber-deep); }
.duel-who-away { color: #e07a5f; white-space: nowrap; }
.duel-cup { display: inline-flex; animation: duel-cup 600ms steps(1) infinite; }   /* 有人敬酒：小酒杯跳兩下 */
@keyframes duel-cup { 50% { translate: 0 -2px; } }
.duel-who-status { margin-left: auto; white-space: nowrap; color: var(--ink-faint); }
.duel-who-status.ready { color: var(--amber); }

/* 選中那張牌的說明、戰報（照試玩頁的 .ab-info / .ab-log） */
.duel-info { padding: 6px 8px; min-height: 60px; line-height: 1.5; background: var(--panel-2); border: 2px solid var(--border); }
.duel-info p { margin: 0; }
.duel-info-name { color: var(--amber); }
.duel-info-meta { color: var(--ink-faint); }
.duel-info-text { color: var(--ink-soft); }
.duel-log { height: 108px; overflow-y: auto; padding: 4px 6px; line-height: 1.5; background: #1a130e; border: 2px solid var(--border); }
.duel-log:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.duel-log p { margin: 0; }
.duel-log .turn { color: var(--amber); margin-top: 4px; }
.duel-log .slot { color: var(--ink); }
.duel-log .say { color: #f0c9a8; }
.duel-log .end { color: var(--amber); }
.duel-log .note { color: var(--ink-faint); }

/* 還沒看到的牌（自己：牌庫＋對手的手牌；觀戰：還沒翻開的，含雙方手牌） */
.duel-seen-box { display: flex; flex-direction: column; gap: 4px; }
.duel-seen-h { color: var(--ink-faint); }
.duel-seen-h b { font-weight: normal; color: var(--ink-soft); }
.duel-seen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.duel-seen-cell { display: flex; flex-direction: column; align-items: center; padding: 2px 0; min-height: 40px;
  background: var(--panel-2); border: 2px solid var(--border); }
.duel-seen-cell b { font-weight: normal; color: var(--ink); }
.duel-seen-cell.gone { border-color: var(--amber-deep); }
.duel-seen-cell.gone b { color: var(--amber); }
.duel-piles { color: var(--ink-faint); line-height: 1.5; }

/* 認輸的確認列（行內，不開對話框）、規則摘要 */
.duel-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; line-height: 1.5;
  color: var(--ink); background: #3a211a; border: 2px solid #a04a3a; }
.duel-confirm span { flex: 1 1 100%; }
.duel-confirm button { flex: 1; min-height: 36px; }
.duel-rules { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; padding: 6px 8px; line-height: 1.5;
  background: var(--panel-2); border: 2px solid var(--border); }
.duel-rules p { margin: 0; }
.duel-rules h3 { margin: 0; font-size: 12px; font-weight: normal; color: var(--amber); }
/* 掃一眼的四行（ADR-203）：放在規則最上面，跟底下的完整版分開 —— 琥珀色的編號、左邊一條邊 */
.duel-brief { margin: 0; padding: 4px 0 4px 22px; list-style: decimal; border-left: 2px solid var(--amber-deep); }
.duel-brief li { margin: 0 0 2px; color: var(--ink); }
.duel-brief li::marker { color: var(--amber); }
.duel-rules ul { margin: 0; padding-left: 16px; }
.duel-rules li b { font-weight: normal; color: var(--ink); }

/* 沒有牌桌時的結算卡（F5 補看結果）：畫在資訊欄裡 */
.duel-res-card { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; line-height: 1.5;
  background: var(--panel-2); border: 2px solid var(--border); }
.duel-res-card h2 { margin: 0; font-size: 12px; font-weight: 700; color: var(--amber); }
.duel-res-card p { margin: 0; color: var(--ink-soft); }
.duel-res-card .ab-over-reason { color: var(--ink); }
.duel-res-card .ab-over-at { color: var(--ink-faint); }
.duel-res-card .ok { color: var(--verd); }
.duel-res-card .duel-over-actions { gap: 6px; margin-top: 2px; }
.duel-res-card .duel-over-actions button { flex: 1; min-height: 36px; }

/* 一直掛著的一句（連線中斷之類，ctx.note） */
.duel-state { margin: 0; line-height: 1.5; color: #e07a5f; }

/* 「看哪一局？」：好幾個人頭上的紙牌疊在一起時（跟寶石方塊的「看誰？」同一個樣子）。每一顆至少 44px 高 */
.duel-pick { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(10, 7, 5, .55); }
.duel-pick-card { display: flex; flex-direction: column; gap: 6px; min-width: 200px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px); overflow-y: auto; padding: 10px;
  background: var(--panel); border: 12px solid transparent; border-image: var(--frame); image-rendering: pixelated; }
.duel-pick-title { font-size: 12px; color: var(--ink-soft); text-align: center; }
.duel-pick-btn { min-height: 44px; font-size: 12px; }
.duel-pick-btn.cancel { color: var(--ink-faint); }

/* 底下的暫時提示（role=status 一直掛著、沒字時只是看不見：從 display:none 變出來的那一次讀螢幕常常不唸） */
.duel-note { margin: 0; line-height: 1.5; color: var(--amber); }
.duel-note.empty, .duel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .duel-invite, .duel-cup { animation: none; }
}

/* 手機：資訊欄在房間和聊天中間，太高會把聊天擠出畫面（寶石方塊 §10.4 的教訓）。
   觀戰只留標題、兩個人和按鈕；自己的局戰報矮一點。按得到的東西至少 44px 高 */
@media (max-width: 640px) {
  .duel-panel[data-mode="watch"] .duel-info, .duel-panel[data-mode="watch"] .duel-log,
  .duel-panel[data-mode="watch"] .duel-seen-box, .duel-panel[data-mode="watch"] .duel-p-sub { display: none; }
  .duel-log { height: 84px; }
  .duel-info { min-height: 0; }
  .duel-p-actions button, .duel-t-btn, .duel-confirm button { min-height: 44px; }
}