:root {
  --hand-w: 5.2rem;
  --hand-h: 7.5rem;
  --fan-pivot: calc(100% + 10rem);
  --peek-lift: -0.8rem;
  --hand-dim: 0.45;
  --hand-unusable-filter: brightness(0.62) saturate(0.4);
  --toast-pop-duration: 2.6s;
  --toast-pop-rise: 2.4rem;
  --focus-fade-in: 0.5s;
  --focus-fade-out: 0.2s;
}

.hand-list {
  position: absolute;
  left: 50%;
  bottom: 4.1rem;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hand-list,
.hand-slot,
.hand-card {
  touch-action: none;
}

.hand-slot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--hand-w);
  height: var(--hand-h);
  translate: -50% 0;
  transform: rotate(calc((var(--fan-a, 0) + var(--fan-push, 0)) * 1deg));
  transform-origin: 50% var(--fan-pivot);
  transition: transform var(--t-fast), filter var(--t-fast);
}

/* 手牌重排動畫（時長與 constants.js HAND.SORT_ANIM_MS 對應）：
   旋轉改走較長過渡呈現排序輪轉，期間禁止手牌操作 */
.hand-list--sorting .hand-slot {
  transition: transform 0.5s ease, filter var(--t-fast);
  pointer-events: none;
}

.hand-card {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: pointer;
  transform: translateY(var(--card-lift, 0rem)) scale(var(--card-scale, 1));
  transform-origin: 50% 100%;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.hand-slot--peek {
  z-index: 12;
}

.hand-slot--peek .hand-card {
  --card-lift: var(--peek-lift);
  box-shadow: 0 0 0 var(--bw) var(--c-accent-dim), var(--shadow-pop);
}

/* 以亮度濾鏡壓暗（卡面維持不透明），避免重疊卡牌的半透明疊影 */
.hand-list--dim .hand-slot:not(.hand-slot--selected):not(.hand-slot--peek) {
  filter: brightness(var(--hand-dim));
}

/* 當前不可使用的手牌：淡化＋去飽和（仍可點選，點選出現彈入提示） */
.hand-list .hand-slot--unusable:not(.hand-slot--selected):not(.hand-slot--peek) {
  filter: var(--hand-unusable-filter);
}

.hand-slot--selected {
  z-index: 11;
}

.hand-slot--selected .hand-card {
  --card-lift: var(--peek-lift);
  box-shadow: 0 0 0 var(--bw-bold) var(--c-accent), var(--shadow-pop);
}

.peek-layer {
  position: absolute;
  left: 50%;
  bottom: 11.8rem;
  translate: -50% 0;
  z-index: 14;
  pointer-events: none;
}

.peek-layer[hidden] {
  display: none;
}

/* 點擊檢視循環第 1 層：放大版開放點擊（再點升級為特大號），其餘情境維持穿透 */
.peek-layer--tappable {
  pointer-events: auto;
  cursor: pointer;
}

/* 浮層開啟時放大層升至浮層之上，供情報 chip 滑入檢視 */
body:has(.overlay-root:not([hidden])) .peek-layer {
  z-index: 55;
}

/* 停留聚焦全版遮暗層：z 低於手牌區(6)與放大層(14)，僅暗其餘區域；
   出現用慢轉場（--focus-fade-in）、恢復用短淡出（--focus-fade-out，實務通則：出現可慢、消失要快） */
.dim-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgb(4 8 12 / 0.6);
  opacity: 0;
  transition: opacity var(--focus-fade-in) ease;
  pointer-events: none;
}

.dim-veil--on {
  opacity: 1;
}

.dim-veil--fast {
  transition-duration: var(--focus-fade-out);
}

/* 停留聚焦大字功能描述層：上緣＝歷史列下緣、下緣＝放大卡上緣
   （11.8rem 放大層底 + 15.75rem 放大卡高 + 0.35rem 間距）；字級由貪婪塞入注入 --fit-font；
   z 高於歷史面板(30)與浮層(50–60)：選角面板等浮層內卡片的停留聚焦亦可顯示
   （聚焦僅於停留期間出現，浮層開啟時其他停留來源被浮層攔截，不致誤蓋） */
.focus-text {
  position: absolute;
  top: calc(var(--h-top) + 0.3rem);
  bottom: 27.9rem;
  left: 0.6rem;
  right: 0.6rem;
  z-index: 61;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--focus-fade-in) ease;
  pointer-events: none;
}

.focus-text--on {
  opacity: 1;
}

/* 擴展級距（角色牌長文限定，peekFocus 於一般區塞入落定字級低於擴層門檻時掛上）：
   下緣自放大卡上緣延伸至身份牌「卡面」上緣（非 own-row 列頂——卡面上方還有標籤與置中留白）：
   4.72rem ≈ 卡面高 4.28（0.57rem×7.5em）＋置中偏移 0.44（(6.5−(標籤行 ~1.2＋間隙 0.15＋4.28))/2）；
   覆蓋放大卡區屬可接受代價——被蓋住的正是本段大字所描述的那張卡 */
.focus-text--tall {
  bottom: calc(var(--h-hand) + 4.72rem);
}

.focus-text--fast {
  transition-duration: var(--focus-fade-out);
}

/* 內容包裹面板：恆撐滿整個大字層區域（尺寸恆定＝不透出下方畫面、換卡零形變），
   圓角外框＋完全不透明介面色（徹底隔絕底層遊戲區干擾，閱讀優先），文字區塊置中 */
.focus-text-panel {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--c-accent-dim);
  border-radius: 0.8rem;
  background: var(--c-surface-2);
  padding: 0.5rem 0.8rem;
}

.focus-text-body {
  font-size: var(--fit-font, 3.15rem);
  line-height: 1.35;
  color: var(--c-ink);
  text-align: left;
  white-space: pre-line;
}

/* 角色牌大字的語意色列（peekFocus 依 lineType 掛載）：獲勝條件＝醬油綠、
   自動式＝潛伏紅、回應式＝軍情藍、限制式＝金（ink 亮階，深底醒目不刺眼） */
.focus-line--win {
  color: var(--c-intel-green);
}

.focus-line--auto {
  color: var(--c-intel-red);
}

.focus-line--response {
  color: var(--c-intel-blue);
}

.focus-line--limited {
  color: var(--c-accent-ink);
}

/* 受控術語（大字層）：粗體標示、不另設色——顏色隨所在列繼承
   （描述列＝預設字色、語意色列＝該列色；金色曾試行、過於搶眼而改制） */
.focus-term {
  font-weight: 700;
}

.hand-actions {
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  translate: -50% 0;
  width: 6.6rem;
  display: grid;
  gap: 0.3rem;
  z-index: 13;
}

.hand-actions[hidden] {
  display: none;
}

.hand-actions .btn {
  width: 100%;
  padding: 0.3rem 0.2rem;
  font-size: var(--fs-primary);
}

/* 提示章列＝#app 頂層直屬（z 高於放大層與聚焦層：玩家指引恆亮恆可見），錨定於手牌區上緣原位；
   三欄格線：兩側 1fr 對稱使提示章置中、以 min-content 保底＝三者結構上不可能重疊 */
.hand-top {
  position: absolute;
  top: calc(100% - var(--h-hand) + 0.15rem);
  left: 0.5rem;
  right: 0.5rem;
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
  align-items: start;
  gap: 0.4rem;
  z-index: 15;
}

.prompt-bar {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
}

.prompt-bar[hidden] {
  display: none;
}

.turn-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 0.3rem;
}

.turn-back {
  grid-column: 1;
  justify-self: start;
  display: flex;
  gap: 0.3rem;
}

.turn-back[hidden] {
  display: none;
}

.turn-back .btn {
  padding: 0.3rem 0.55rem;
  font-size: var(--fs-primary);
  white-space: nowrap;
}

.turn-actions[hidden] {
  display: none;
}

.turn-actions .btn {
  padding: 0.3rem 0.55rem;
  font-size: var(--fs-primary);
  white-space: nowrap;
}

/* 提示章：不透明底（疊於放大卡上仍可讀）＋淡金緩脈衝（細、慢，提醒而不搶戲）；
   字級由貪婪塞入注入（--fit-font），高度動態適配、上限 3 個中文行高 */
.prompt-label {
  font-size: var(--fit-font, var(--fs-primary));
  line-height: 1.4;
  max-height: calc(3 * 1.4 * var(--fs-primary));
  overflow: hidden;
  color: var(--c-accent-ink);
  background: var(--c-surface-2);
  border: var(--bw) solid var(--c-border);
  border-radius: 0.6rem;
  padding: 0.25rem 0.7rem;
  text-align: center;
  animation: prompt-glow 3s ease-in-out infinite;
}

@keyframes prompt-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--c-accent-dim);
  }
  50% {
    box-shadow: 0 0 0 0.15rem var(--c-accent-dim);
  }
}

.hand-toast {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  translate: -50% 0;
  z-index: 15;
  max-width: 86%;
  font-size: var(--fs-primary);
  color: var(--c-ink);
  background: var(--c-prompt-bg);
  border: var(--bw) solid var(--c-accent);
  border-radius: 0.6rem;
  padding: 0.25rem 0.7rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.hand-toast[hidden] {
  display: none;
}

.hand-toast--play {
  animation: hand-toast-pop var(--toast-pop-duration) ease forwards;
}

@keyframes hand-toast-pop {
  0% {
    translate: -50% var(--toast-pop-rise);
    opacity: 0;
  }
  14% {
    translate: -50% 0;
    opacity: 1;
  }
  78% {
    translate: -50% 0;
    opacity: 1;
  }
  100% {
    translate: -50% 0;
    opacity: 0;
  }
}