/* =============================================================================
   大型幸運輪盤視圖 — 黑金奢華(所有選擇器加 .gv-wheel 前綴)
   一律沿用 style.css 的 :root 變數:felt / gold / panel / grad-gold …
   俯視平面——輪盤「絕不」3D 傾斜(任何角度,含 rotateX/perspective)。
   輪盤本體 2D 俯視,靠 CSS rotate(單軸,平面內旋轉)減速停格,絕非透視傾斜。
   立體感只做「物件級」:指針的厚度陰影+高光、中心徽章的高光、金框的多層漸層描邊。
   繁中文案;手機 375–480px 可用、無水平捲動。

   [2026-07-27 改版] 全面免費制盤面(金額格/銘謝惠顧/JACKPOT)視覺升級:
     - 扇區底色改 SVG radialGradient(六種格各一份,見 game-wheel.js buildWheel),
       取代舊版純色 fill——金額越高色階越亮,JACKPOT 用寶石紅金漸層獨立於金階之外。
     - 輪圈金框改三層(外槽/主環金屬掃光漸層/內亮邊)疊出溝紋立體感。
     - 指針加高光streak(wh-pointer-hi),中獎格 flash(wh-seg-win)+ JACKPOT 常駐微光脈動。

   [2026-07-27 R4-4 修飾] 扇區文字防溢出 + 減速動畫拉長緩尾:
     - .wh-seg-label 現可能含 1–2 個 <tspan>(見 game-wheel.js 的 labelLines/buildWheel)——
       4 字以上標籤(銘謝惠顧/JACKPOT/長金額)一律拆兩行,字級同步縮小,徑向可用空間遠比
       切向弦寬寬裕,拆行後穩定收在扇區內不溢出。text-anchor/dominant-baseline 對每個
       獨立 y 座標的 tspan 仍個別生效,不受影響。
     - 減速動畫總時長 4s→8s、MAIN_PHASE_RATIO 大幅下修(見 game-wheel.js 常數註解),回彈
       定格尾段被拉得很長,純 inline transition 動態賦值,此檔無新增靜態規則。
   ============================================================================= */

.gv-wheel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- 共用面板(深絨布底 + 金色頂線,與骰子/掃雷同一套質感) ---------- */
.gv-wheel .wh-panel {
  position: relative;
  background:
    radial-gradient(120% 96% at 50% 26%, rgba(255, 240, 200, .06), transparent 56%),
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--felt) 86%, #fff 6%) 0%, var(--felt) 44%, var(--felt-dark) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 8px 24px rgba(0, 0, 0, .4);
  padding: 16px;
}
.gv-wheel .wh-panel::before { /* 頂端金色細線飾條 */
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 2px;
  background: var(--grad-gold-line);
  opacity: .6;
  pointer-events: none;
}

/* ---------- 版面:左舞台+控制 / 右動態牆(900px 以下收成單欄) ---------- */
.gv-wheel .wh-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 14px;
  align-items: start;
}
.gv-wheel .wh-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ---------- 頂部狀態列:本窗轉數 / 本窗剩餘 + JACKPOT 資格徽章 ---------- */
.gv-wheel .wh-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gv-wheel .wh-statrow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gv-wheel .wh-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line-soft);
}
.gv-wheel .wh-stat-label { font-size: .68rem; color: var(--muted); letter-spacing: .08em; white-space: nowrap; }
.gv-wheel .wh-stat-val { font-size: .95rem; color: var(--ink); white-space: nowrap; }
.gv-wheel .wh-stat.ready .wh-stat-val { color: var(--gold-bright); text-shadow: 0 0 8px rgba(240, 214, 122, .4); }
.gv-wheel .wh-stat.used .wh-stat-val { color: var(--muted); }

/* JACKPOT 多元資格徽章(同 game-slot.js 的 sl-jackpot-elig 手法):自成一列,文案較長時換行不橫捲。 */
.gv-wheel .wh-jackpot-elig {
  font-size: .8rem;
  line-height: 1.35;
  letter-spacing: .03em;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  cursor: default;
}
.gv-wheel .wh-jackpot-elig:empty { display: none; }
.gv-wheel .wh-jackpot-elig.ok {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .1em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(240, 214, 122, .28);
}
.gv-wheel .wh-jackpot-elig.locked {
  color: color-mix(in srgb, var(--gold-bright) 55%, var(--muted, #9a8f77));
}

/* ---------- 輪盤舞台:置中大轉盤,絕對俯視(平面),固定指針 ---------- */
.gv-wheel .wh-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
}
.gv-wheel .wh-wheelwrap {
  position: relative;
  width: min(420px, 84vw);
  aspect-ratio: 1 / 1;
}
.gv-wheel .wh-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55));
  will-change: transform;
}
/* 減速旋轉:transition duration/easing 由 JS 依 settle 時長動態設定,兩段式(主減速 +
   回彈定格,R4-4 起後段被大幅拉長成主要的「還在滑」戲劇段,見 game-wheel.js startSpinAnim
   的 OVERSHOOT_DEG/MAIN_PHASE_RATIO)——inline style 動態賦值,故不在此定義靜態 class,
   避免與 JS 內的 inline transition 衝突。 */

/* 12 扇區:fill 由 JS 指到對應的 radialGradient(wh-grad-*),此處只留分隔描邊樣式。 */
.gv-wheel .wh-seg-div { stroke: var(--felt-dark); stroke-width: 1.4; }
.gv-wheel .wh-seg-label {
  font-family: var(--font-display);
  font-weight: 700;
  fill: #211705;
  text-anchor: middle;
  dominant-baseline: middle;
}
.gv-wheel .wh-seg-huge .wh-seg-label,
.gv-wheel .wh-seg-big .wh-seg-label { fill: #2a1c02; }
.gv-wheel .wh-seg-blank .wh-seg-label { fill: #b8ac8f; }
.gv-wheel .wh-seg-label-jp {
  fill: #fff0d6;
  letter-spacing: -.01em;
  text-shadow: 0 0 4px rgba(0, 0, 0, .5);
}

/* JACKPOT 格常駐微光脈動(誘目效果),reduced-motion 關閉。 */
.gv-wheel .wh-seg-jackpot {
  animation: gv-wheel-jp-glow 2.6s ease-in-out infinite;
  transform-origin: 150px 150px;
}
@keyframes gv-wheel-jp-glow {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.22) saturate(1.25); }
}

/* 中獎格 flash(結果揭曉時套用,兩次明滅後停留在最後一幀原色)。 */
.gv-wheel .wh-seg-win {
  animation: gv-wheel-seg-flash 0.85s ease-in-out 2;
  transform-origin: 150px 150px;
}
@keyframes gv-wheel-seg-flash {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  50%      { filter: brightness(1.65) drop-shadow(0 0 10px rgba(255, 236, 170, .9)); }
}

/* 輪圈三層金屬描邊:外槽(溝紋暗影)/ 主環(brushed-metal 掃光漸層)/ 內亮邊。 */
.gv-wheel .wh-rim-outer {
  fill: none;
  stroke: var(--felt-dark);
  stroke-width: 2;
  opacity: .8;
}
.gv-wheel .wh-rim {
  fill: none;
  stroke: url(#wh-rim-grad);
  stroke-width: 6;
}
.gv-wheel .wh-rim-inner {
  fill: none;
  stroke: rgba(255, 246, 214, .55);
  stroke-width: 1.2;
}
.gv-wheel .wh-hub {
  fill: url(#wh-hub-grad);
  stroke: var(--gold-deep);
  stroke-width: 1.6;
}

/* 固定指針(不隨轉盤旋轉),置於輪盤正上方指向圓心 — 金屬三角 + 高光 streak。 */
.gv-wheel .wh-pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid var(--gold);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6));
  z-index: 2;
}
.gv-wheel .wh-pointer::before { /* 主體疊金屬漸層(border-triangle 不能直接 gradient,疊一層漸層遮罩模擬) */
  content: '';
  position: absolute;
  top: -20px;
  left: -12px;
  width: 24px;
  height: 20px;
  background: linear-gradient(155deg, var(--gold-hi) 0%, var(--gold-bright) 38%, var(--gold) 66%, var(--gold-deep) 100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  opacity: .92;
}
.gv-wheel .wh-pointer::after { /* 頂端亮珠 */
  content: '';
  position: absolute;
  top: -22px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 6px rgba(240, 214, 122, .7);
}
.gv-wheel .wh-pointer-hi { /* 左緣高光細條(指針高光) */
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-9px);
  width: 3px;
  height: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  opacity: .8;
  z-index: 3;
  pointer-events: none;
}

/* 結果判定文字(結果先算好,動畫停格後才顯示) */
.gv-wheel .wh-verdict {
  min-height: 1.4em;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .25s ease, transform .25s ease;
}
.gv-wheel .wh-verdict.show { opacity: 1; transform: translateY(0); }
.gv-wheel .wh-verdict.win { color: var(--gold-bright); text-shadow: 0 0 12px rgba(240, 214, 122, .4); }
.gv-wheel .wh-verdict.lose { color: var(--red); }

/* ---------- 控制面板:單一「免費轉」鈕(全免費制) ---------- */
.gv-wheel .wh-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gv-wheel .wh-btnrow {
  display: flex;
  gap: 10px;
}
.gv-wheel .wh-spinbtn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 10px;
  font-size: 1.05rem;
}
.gv-wheel .wh-spinbtn small {
  font-size: .72rem;
  font-weight: 400;
  opacity: .85;
  letter-spacing: .04em;
}
.gv-wheel .wh-spinbtn[disabled] small { opacity: .6; }

/* ---------- 右側動態牆(與骰子同一套語彙) ---------- */
.gv-wheel .wh-side { min-width: 0; }
.gv-wheel .wh-feedpanel { padding: 12px; }
.gv-wheel .wh-feedtitle {
  margin: 0 0 10px;
  font-size: .95rem;
  color: var(--gold-bright);
  letter-spacing: .1em;
}
.gv-wheel .wh-feedlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.gv-wheel .wh-feedrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .26);
  border: 1px solid var(--line-soft);
  min-width: 0;
}
.gv-wheel .wh-feedrow.winrow { border-color: color-mix(in srgb, var(--gold) 35%, var(--line-soft)); }
.gv-wheel .wh-feedrow.jackpotrow {
  border-color: color-mix(in srgb, #e0483f 55%, var(--line-soft));
  background: linear-gradient(90deg, rgba(224, 72, 63, .16), rgba(0, 0, 0, .26) 60%);
}
.gv-wheel .wh-feedrow.new { animation: gv-wheel-feedin .3s ease-out; }
@keyframes gv-wheel-feedin {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gv-wheel .wh-fava {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  color: var(--gold-bright);
  font-size: .8rem;
  font-weight: 800;
}
.gv-wheel .wh-fava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-wheel .wh-fmain { flex: 1; min-width: 0; }
.gv-wheel .wh-fname {
  font-size: .8rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gv-wheel .wh-flabel { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-wheel .wh-fright {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.gv-wheel .wh-famt { font-size: .85rem; font-variant-numeric: tabular-nums; }
.gv-wheel .wh-famt.win { color: var(--gold-bright); }
.gv-wheel .wh-famt.lose { color: var(--red); }
.gv-wheel .wh-feedempty { text-align: center; padding: 14px 0; }

/* ---------- 響應式(375–480px 手機可用,無水平捲動) ---------- */
@media (max-width: 900px) {
  .gv-wheel .wh-layout { grid-template-columns: 1fr; }
  .gv-wheel .wh-feedlist { max-height: 240px; }
}
@media (max-width: 480px) {
  .gv-wheel .wh-panel { padding: 12px; }
  .gv-wheel .wh-wheelwrap { width: min(300px, 88vw); }
  .gv-wheel .wh-statrow { gap: 6px; }
  .gv-wheel .wh-stat-val { font-size: .82rem; }
}

/* 動畫減量:尊重使用者設定——輪盤直接跳到結果,不做旋轉過場/常駐微光脈動/中獎格 flash
   (game-wheel.js 的 reducedMotion() 已在 JS 層直接跳過 transition,這裡處理其餘 CSS 動畫)。 */
@media (prefers-reduced-motion: reduce) {
  .gv-wheel .wh-verdict { transition: none; }
  .gv-wheel .wh-feedrow.new { animation: none; }
  .gv-wheel .wh-seg-jackpot { animation: none; }
  .gv-wheel .wh-seg-win { animation: none; }
}