/* 寶石方塊的棋盤（ADR-193，規格 docs/features/gems.md §10）。
   一格幾 px 只看 --gc（board.js 的 fitGemCell 算的整數倍）；棋子位置只看 --r / --c。
   動畫時間由 board.js 寫進 --gems-*-ms，跟 JS 的等待是同一組數字。 */

.gems-board {
  --gc: 32px;
  position: relative;
  width: calc(var(--gc) * 8); height: calc(var(--gc) * 8);
  overflow: hidden;               /* 補位的新棋子從上緣外面掉進來，外面那段要切掉 */
  background: #1a130e;
  box-shadow: 0 0 0 2px var(--border), 0 4px 0 2px rgba(0,0,0,.45);
  image-rendering: pixelated;
  user-select: none; -webkit-user-select: none;
}

/* 底下：64 顆按鈕，負責點擊 / 鍵盤 / 讀螢幕。棋盤格用兩種深色交錯，才看得出每一格的邊界 */
.gems-cells {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(8, var(--gc)); grid-template-rows: repeat(8, var(--gc));
  touch-action: none;             /* 滑動是用來交換棋子的，不要讓頁面跟著捲 */
}
.gems-cell {
  width: var(--gc); height: var(--gc); padding: 0; border: 0; background: transparent;
  cursor: pointer;
}
.gems-cell:nth-child(16n+2), .gems-cell:nth-child(16n+4), .gems-cell:nth-child(16n+6), .gems-cell:nth-child(16n+8),
.gems-cell:nth-child(16n+9), .gems-cell:nth-child(16n+11), .gems-cell:nth-child(16n+13), .gems-cell:nth-child(16n+15) {
  background: #231a13;
}
.gems-cell:hover:not(:disabled) { background: #3a2b1d; border: 0; }
.gems-cell:active:not(:disabled) { background: #3a2b1d; }
.gems-cell:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
/* 選取中：琥珀底 + 內框（像素風：硬邊、不用陰影模糊） */
.gems-cell.sel, .gems-cell.sel:hover { background: #5a3f1c; box-shadow: inset 0 0 0 2px var(--amber); }

.gems-board.off .gems-cells { pointer-events: none; }
.gems-board.busy .gems-cell { cursor: wait; }

/* 唯讀（觀戰，§10.4）：格子整片 inert、不接滑鼠，點到的是棋盤本身。
   游標不要變手指（外面的 .room 是 pointer，會繼承下來）；格子不接滑鼠，也就沒有 hover 的高亮。
   手機上摸唯讀的棋盤可以捲頁：touch-action: none 只寫在格子層上。 */
.gems-board.readonly .gems-cells { pointer-events: none; }
.gems-board.readonly, .gems-board.off { cursor: default; }

/* 最後一步換過的兩格：疊在棋子上面的外框，到下一步才換掉（§10.4）。
   不畫在 .gems-cell 上（.sel 是那樣畫的）：棋子圖會蓋住格子，2px 的內框會被吃掉。
   顏色用 --ink，跟選取的琥珀色分得開；硬邊、不用圓角、不動畫（減少動態效果時一樣看得到）。 */
.gems-marks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.gems-mark {
  --r: 0; --c: 0;
  position: absolute; left: 0; top: 0;
  width: var(--gc); height: var(--gc);
  transform: translate(calc(var(--c) * var(--gc)), calc(var(--r) * var(--gc)));
  box-shadow: inset 0 0 0 2px var(--ink);
}

/* 上面：棋子圖。不接滑鼠，點到的永遠是底下的按鈕 */
.gems-layer { position: absolute; inset: 0; pointer-events: none; }
.gems-piece {
  --r: 0; --c: 0;
  position: absolute; left: 0; top: 0;
  width: var(--gc); height: var(--gc);
  transform: translate(calc(var(--c) * var(--gc)), calc(var(--r) * var(--gc)));
  transition: transform var(--gems-fall-ms, 160ms) ease-in;
  background-repeat: no-repeat;
  background-size: calc(var(--gc) * 5) var(--gc);   /* 五格的橫排影格條；平常停在第一格 */
  background-position: 0 0;
  image-rendering: pixelated;
}
.gems-piece.k0 { background-image: url("/assets/loot/spr_red_gem_strip5.png"); }
.gems-piece.k1 { background-image: url("/assets/loot/spr_blue_gem_strip5.png"); }
.gems-piece.k2 { background-image: url("/assets/loot/spr_green_gem_strip5.png"); }
.gems-piece.k3 { background-image: url("/assets/loot/spr_amethyst_strip5.png"); }
.gems-piece.k4 { background-image: url("/assets/loot/spr_gold_bar_strip5.png"); }
.gems-piece.k5 { background-image: url("/assets/loot/spr_pearl_necklace_strip5.png"); }

/* 交換比落下快一點（兩者共用同一條 transition，只換時間） */
.gems-board.swapping .gems-piece { transition-duration: var(--gems-swap-ms, 120ms); transition-timing-function: ease-out; }

/* 消除：素材自帶的閃光（五格）掃過一次，停在第六格 = 空白，也就是消失 */
.gems-piece.clearing { animation: gems-shine var(--gems-clear-ms, 130ms) steps(5, jump-end) forwards; }
@keyframes gems-shine {
  from { background-position: 0 0; }
  to   { background-position: calc(var(--gc) * -5) 0; }
}

/* 無效交換彈回來時，棋盤輕輕左右晃一下（2px 的硬位移，不用模糊） */
.gems-board.nope { animation: gems-nope var(--gems-swap-ms, 120ms) steps(4); }
@keyframes gems-nope { 25% { translate: -2px 0; } 75% { translate: 2px 0; } }

/* 洗牌：整盤暗下去、再換新的 */
.gems-board.shuffling .gems-layer { opacity: .15; transition: opacity var(--gems-shuffle-ms, 260ms) steps(3); }

@media (prefers-reduced-motion: reduce) {
  .gems-piece { transition: none; }
  .gems-piece.clearing, .gems-board.nope { animation: none; }
}

/* ---- 試玩頁（/dev/gems.html）的外框：之後遊戲內的面板會換成對話框樣式 ---- */
.gems-page {
  min-height: 100%; display: flex; justify-content: center; align-items: flex-start;
  padding: 16px;
}
.gems-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  max-width: 100%;
  background: var(--panel); padding: 12px 16px 16px;
  border: 12px solid transparent; border-image: var(--frame); image-rendering: pixelated;
  box-shadow: 0 6px 0 rgba(0,0,0,.5);
}
/* 寬螢幕：棋盤在左、資訊在右；窄螢幕（手機直放）：上下疊，卡片跟棋盤一樣寬 */
.gems-body { display: flex; gap: 16px; align-items: flex-start; }
.gems-side { width: 240px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 719px) {
  .gems-page { padding: 8px; }
  .gems-card { width: min-content; min-width: 272px; padding: 8px 8px 12px; }
  .gems-body { flex-direction: column; align-items: center; }
  .gems-side { width: 100%; }
}
.gems-head { align-self: stretch; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gems-head h1 { margin: 0; font-size: 24px; color: var(--amber); letter-spacing: 2px; }
.gems-tag { font-size: 12px; color: var(--ink-faint); }

.gems-hud { align-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gems-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px;
  background: var(--panel-2); border: 2px solid var(--border); }
.gems-stat span { font-size: 12px; color: var(--ink-faint); }
.gems-stat b { font-size: 24px; color: var(--ink); font-weight: normal; min-height: 24px; }
.gems-stat b.low { color: #e07a5f; }
.gems-stat b.gain { color: var(--amber); }

/* 三檔門檻：一條進度條 + 三個刻度。打到的刻度亮起來 */
.gems-tiers { align-self: stretch; display: flex; flex-direction: column; gap: 4px; }
.gems-bar { position: relative; height: 12px; background: #1a130e; border: 2px solid var(--border); }
.gems-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--amber-deep);
  transition: width 200ms steps(6); }
.gems-bar-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink-faint); }
.gems-bar-tick.hit { background: var(--amber); }
.gems-tier-labels { position: relative; height: 14px; }
.gems-tier-label { position: absolute; top: 0; font-size: 12px; color: var(--ink-faint); white-space: nowrap; translate: -100% 0; }
.gems-tier-label.hit { color: var(--amber); }

.gems-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.gems-foot { align-self: stretch; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-faint); line-height: 1.6; }
.gems-foot b { color: var(--ink-soft); font-weight: normal; }

/* 每一層連鎖跳出來的「+分數」：從消除的中心往上飄、淡掉 */
.gems-board-wrap { position: relative; }
.gems-pop {
  position: absolute; z-index: 3; pointer-events: none; translate: -50% -50%;
  font-size: 24px; color: var(--amber); white-space: nowrap;
  text-shadow: 2px 0 0 #2a1c0c, -2px 0 0 #2a1c0c, 0 2px 0 #2a1c0c, 0 -2px 0 #2a1c0c;
  animation: gems-pop 700ms steps(7) forwards;
}
.gems-pop small { display: block; font-size: 12px; text-align: center; color: var(--ink); }
@keyframes gems-pop { from { translate: -50% -50%; opacity: 1; } 70% { opacity: 1; } to { translate: -50% -150%; opacity: 0; } }
.gems-pop.gems-notice { font-size: 12px; color: var(--ink); padding: 6px 10px; text-shadow: none;
  background: var(--panel); border: 2px solid var(--amber-deep); animation: gems-pop-still 1200ms steps(1) forwards; }
@media (prefers-reduced-motion: reduce) { .gems-pop { animation: gems-pop-still 700ms steps(1) forwards; } }
@keyframes gems-pop-still { to { opacity: 0; } }

/* 一局結束：蓋在棋盤上的結算卡 */
.gems-over {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: rgba(20, 14, 10, .82);
}
.gems-over[hidden] { display: none; }
.gems-over-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px; max-width: calc(100% - 16px);
  background: var(--panel); border: 2px solid var(--border); box-shadow: 0 4px 0 rgba(0,0,0,.5); text-align: center; }
.gems-over-card h2 { margin: 0; font-size: 24px; color: var(--amber); }
.gems-over-card p { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
.gems-over-card .ok { color: var(--verd); }
.gems-over-card .bad { color: #e07a5f; }

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

/* ================================================================
   酒館裡（ADR-196，gems.md §4.8 / §10.2 / §10.4）
   ================================================================ */

/* 棋盤外框：浮在房間正中央（SceneView 的 .scene-overlay 裡；left / top 是 JS 算好的整數 px）。
   吞掉點擊的是 .scene-overlay（§10.4：不擋的話點棋盤會變成角色往那一格走）。 */
.gems-stage { position: absolute; left: 0; top: 0; pointer-events: auto; }
.gems-over-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.gems-over-actions button { min-height: 36px; min-width: 88px; }

/* 頭上的解謎圖示（§4.8 ①）：畫出來 16px（素材 32px 的一半，整數比），點擊範圍 44px 靠 SceneView 的幾何判定。
   跟著角色走（掛在 .char 裡）；說話的泡泡（z 30）會暫時蓋住它。 */
.char-gems {
  position: absolute; left: 50%; bottom: 100%; width: 16px; height: 16px; margin: 0 0 2px -8px;
  z-index: 1; pointer-events: none;
  background: url("/assets/loot/spr_red_gem_strip5.png") 0 0 / 80px 16px no-repeat; image-rendering: pixelated;
  filter: drop-shadow(1px 0 0 #241a10) drop-shadow(-1px 0 0 #241a10) drop-shadow(0 1px 0 #241a10) drop-shadow(0 -1px 0 #241a10);
  animation: gems-bob 1200ms steps(1) infinite;
}
@keyframes gems-bob { 50% { translate: 0 -2px; } }

/* 路過的人看得到：有人站在旁邊解謎的桌子，桌面上放著一顆閃一下的小寶石（§10.2，跟賭桌的小骰盅同一個道理）。
   放在桌面正中央、不放桌子上緣：上緣是「點一下接著玩」提示的位置。素材的閃光五格照播（steps），不縮放動畫。 */
.gems-table-fx { position: absolute; z-index: 7; pointer-events: none; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  image-rendering: pixelated; background: url("/assets/loot/spr_amethyst_strip5.png") 0 0 / 80px 16px no-repeat;
  filter: drop-shadow(1px 0 0 #241a10) drop-shadow(-1px 0 0 #241a10) drop-shadow(0 1px 0 #241a10) drop-shadow(0 -1px 0 #241a10);
  animation: gems-table-shine 1600ms steps(1) infinite; }
@keyframes gems-table-shine {
  0%, 62% { background-position: 0 0; } 70% { background-position: -16px 0; } 78% { background-position: -32px 0; }
  86% { background-position: -48px 0; } 94% { background-position: -64px 0; }
}
@media (prefers-reduced-motion: reduce) { .char-gems, .gems-table-fx { animation: none; } }

/* 資訊欄：賭桌面板的位置（.game-panel；桌機右下、手機在房間正下方） */
.gems-panel { gap: 6px; }
.gems-p-head { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.gems-p-icon { flex: none; width: 16px; height: 16px; image-rendering: pixelated;
  background: url("/assets/loot/spr_red_gem_strip5.png") 0 0 / 80px 16px no-repeat; }
.gems-p-title { flex: 1; min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gems-p-phase { color: var(--ink-faint); white-space: nowrap; }
.gems-p-hud { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.gems-p-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 4px;
  background: var(--panel-2); border: 2px solid var(--border); }
.gems-p-stat[hidden] { display: none; }
.gems-p-stat span { font-size: 12px; color: var(--ink-faint); }
.gems-p-stat b { font-size: 24px; line-height: 24px; font-weight: normal; color: var(--ink); }
.gems-p-stat b.low { color: #e07a5f; }
.gems-p-stat b.gain { color: var(--amber); }
.gems-panel .gems-tiers[hidden] { display: none; }
.gems-tier-label.got { color: var(--verd); }
.gems-panel .gems-tier-labels { height: 28px; }
.gems-panel .gems-tier-label { text-align: right; line-height: 14px; }
.gems-panel .gems-tier-label span { display: block; }
.gems-p-note { line-height: 1.5; color: var(--ink-soft); }
.gems-p-note[data-tone="warn"] { color: #e07a5f; }
.gems-p-watchers { line-height: 1.5; color: var(--amber); }
.gems-p-watchers[hidden] { display: none; }
/* 播報區（role=status）一直掛著、沒字時只是看不見：從 display:none 變出來的那一次讀螢幕常常不唸 */
.gems-p-note.empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 玩法那四行（ADR-203）：跟資訊欄其他區塊分開 —— 琥珀色編號、左邊一條邊；太長就自己捲 */
.gems-help { max-height: 200px; overflow-y: auto; padding: 4px 6px; line-height: 1.5;
  background: var(--panel-2); border: 2px solid var(--border); }
.gems-help[hidden] { display: none; }
.gems-help-list { margin: 0; padding-left: 18px; list-style: decimal; }
.gems-help-list li { margin: 0 0 3px; color: var(--ink-soft); }
.gems-help-list li::marker { color: var(--amber); }

.gems-p-actions { display: flex; gap: 6px; }
.gems-p-actions button { flex: 1; min-height: 36px; padding: 4px 6px; }
.gems-p-actions button[hidden] { display: none; }

/* 觀戰：一兩行就好（§10.4）——手機上面板在房間和聊天中間，太高會把聊天擠出畫面，而交流就靠聊天 */
.gems-panel[data-mode="watch"] { flex-direction: row; flex-wrap: wrap; align-items: center; }
.gems-panel[data-mode="watch"] .gems-p-head { flex: 1 1 100%; border-bottom: 0; padding-bottom: 0; }
.gems-panel[data-mode="watch"] .gems-p-hud { flex: 1 1 auto; }
.gems-panel[data-mode="watch"] .gems-p-stat { flex-direction: row; gap: 4px; padding: 0 4px; border-width: 1px; }
.gems-panel[data-mode="watch"] .gems-p-stat b { font-size: 12px; line-height: 20px; }
.gems-panel[data-mode="watch"] .gems-p-note { display: none; }   /* 觀戰的狀態寫在標題那一行（「走開了，這一盤還在」），不另開一行 */
.gems-panel[data-mode="watch"] .gems-p-phase { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--amber); }
.gems-panel[data-mode="watch"] .gems-p-actions { flex: none; }

/* 在場名單：正在解謎的人那一列的「看」，頂欄「在場 N」旁邊的小記號（§4.8 ②） */
.presence li .pv-watch { flex: none; min-height: 28px; padding: 2px 8px; font-size: 12px; }
.presence-h.has-gems::after { content: ""; width: 16px; height: 16px; margin-left: 4px; image-rendering: pixelated;
  background: url("/assets/loot/spr_red_gem_strip5.png") 0 0 / 80px 16px no-repeat; }
@media (max-width: 640px) { .presence li .pv-watch { min-height: 36px; padding: 4px 12px; } }

/* 「看誰？」：同一張桌邊好幾個人的圖示疊在一起時（§4.8 ①）。每一顆至少 44px 高 */
.gems-pick { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(10, 7, 5, .55); }
.gems-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; }
.gems-pick-title { font-size: 12px; color: var(--ink-soft); text-align: center; }
.gems-pick-btn { min-height: 44px; font-size: 12px; }
.gems-pick-btn.cancel { color: var(--ink-faint); }