/* =============================================================================
   拉霸機房視圖 — 黑金奢華(所有選擇器加 .gv-slot 前綴,內部元件用 sl- 短前綴)
   俯視平面——「絕不」3D 傾斜(rotateX/perspective/rotate3d 一律不用);轉輪動畫 = 純
   垂直位移(translateY)+ 淡淡動態模糊,不是 3D 翻牌。熱區 hover 才亮;繁中文案;375px 可用。
   ============================================================================= */

.gv-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* [需求A] 符號格尺寸的單一真實來源:CSS 決定、JS(game-slot.js cellPx())動態量測,
     放大符號 / RWD 縮小時轉輪捲動與 cascade FLIP 幾何都自動跟著走。桌機放大 ~40%
     (56 → 78),大螢幕再大一點讓機台佔更滿,窄螢幕逐級縮小(見檔尾 RWD)。 */
  --sl-cell: 78px;
  /* 佔更滿:機台在可用容器內置中、放寬留白;不設 max-width(#main 已 1280 上限),
     只確保寬內容(轉輪)各自 overflow-x:auto、body 不水平捲動。 */
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1200px) {
  .gv-slot { --sl-cell: 88px; }
}

.gv-slot .sl-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-slot .sl-panel::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 2px;
  background: var(--grad-gold-line);
  opacity: .6;
  pointer-events: none;
}

/* ---------- 全站 JACKPOT(館內醒目版,無論機台牆/機台畫面都在頂部) ---------- */
.gv-slot .sl-jackpot {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 14px 18px;
  text-align: center;
}
/* JACKPOT 多元資格徽章:自成一列(flex-basis 100%),文案較長時自動換行不橫捲。 */
.gv-slot .sl-jackpot-elig {
  flex-basis: 100%;
  font-size: .82rem;
  line-height: 1.35;
  letter-spacing: .04em;
  max-width: 100%;
  overflow-wrap: anywhere;
  cursor: default;
}
.gv-slot .sl-jackpot-elig:empty { display: none; }
.gv-slot .sl-jackpot-elig.ok {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .12em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(240, 214, 122, .28);
}
.gv-slot .sl-jackpot-elig.locked {
  color: color-mix(in srgb, var(--gold-bright) 55%, var(--muted, #9a8f77));
}
.gv-slot .sl-jackpot-label {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .3em;
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(240, 214, 122, .4);
}
.gv-slot .sl-jackpot-amt {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 700;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55));
}

/* ---------- 機台牆 ---------- */
.gv-slot .sl-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.gv-slot .sl-wall.hidden,
.gv-slot .sl-machine.hidden { display: none; }

.gv-slot .sl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 16px rgba(0, 0, 0, .35);
  transition: border-color .15s ease, transform .15s ease;
}
.gv-slot .sl-card.occupied { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.gv-slot .sl-card:not(.occupied):hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); transform: translateY(-2px); }

.gv-slot .sl-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.gv-slot .sl-card-style {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-bright);
  letter-spacing: .04em;
}
.gv-slot .sl-card-acc {
  font-size: .95rem;
  font-weight: 700;
  color: var(--gold-bright);
  white-space: nowrap;
}
.gv-slot .sl-card-bet { font-size: .78rem; }

.gv-slot .sl-card-status { margin-top: 4px; min-height: 40px; display: flex; align-items: center; }
.gv-slot .sl-sit-btn { width: 100%; }

.gv-slot .sl-occ { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.gv-slot .sl-occ-ava {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  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: .82rem;
  font-weight: 800;
}
.gv-slot .sl-occ-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-slot .sl-occ-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gv-slot .sl-occ-name { font-size: .82rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-slot .sl-occ-tag { font-size: .7rem; color: var(--red); letter-spacing: .04em; }

/* ---------- 機台畫面(坐下後) ---------- */
.gv-slot .sl-machine { display: flex; flex-direction: column; gap: 14px; }

.gv-slot .sl-machine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.gv-slot .sl-machine-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.gv-slot .sl-machine-style {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold-bright);
  letter-spacing: .04em;
}
.gv-slot .sl-machine-acc { font-size: .9rem; color: var(--muted); white-space: nowrap; }
.gv-slot .sl-machine-acc b { color: var(--gold-bright); }
.gv-slot .sl-machine-bet { font-size: .82rem; color: var(--muted); }

/* ---------- Task 10:免費轉常駐資訊列(剩餘次數/倍數),只在 freeSpins 非 null 時顯示
   (見 game-slot.js applyFreeSpinsTheme),平常 display:none 不佔版面。 ---------- */
.gv-slot .sl-fsinfo {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold-deep) 32%, var(--panel-2)), var(--panel));
  border: 1px solid var(--gold-deep);
}
.gv-slot .sl-fsinfo.show { display: flex; }
.gv-slot .sl-fsinfo-tag {
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .16em;
  color: var(--gold-bright);
}
.gv-slot .sl-fsinfo-left,
.gv-slot .sl-fsinfo-mult {
  font-size: .86rem;
  color: var(--gold-hi);
  white-space: nowrap;
}

/* ---------- 轉輪舞台(俯視平面,純垂直捲動,無 3D) ---------- */
.gv-slot .sl-reelstage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.gv-slot .sl-reels {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #0a0806;
  border: 2px solid var(--gold-deep);
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, .7), inset 0 -2px 6px rgba(0, 0, 0, .5), var(--glow-gold);
  /* 硬性紅線:body 絕不水平捲動——放大後若某窄螢幕塞不下,轉輪盒內部自行 overflow-x:auto
     (只裁盒內的輪、不裁盒本身的金色外光)。 */
  max-width: 100%;
  overflow-x: auto;
}
.gv-slot .sl-reel { position: relative; flex: none; }
.gv-slot .sl-reelmask {
  position: relative;
  width: var(--sl-cell);
  height: calc(var(--sl-cell) * var(--sl-rows, 3)); /* JS 設 --sl-rows(3 或 4);高度隨 --sl-cell 走 */
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(180deg, #1a140c, #0d0a06);
}
.gv-slot .sl-reelmask::before, .gv-slot .sl-reelmask::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  pointer-events: none;
  z-index: 2;
}
.gv-slot .sl-reelmask::before { top: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .65), transparent); }
.gv-slot .sl-reelmask::after { bottom: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent); }
.gv-slot .sl-reelstrip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.gv-slot .sl-reelmask.spinning .sl-reelstrip { filter: blur(1.5px); }

/* ---------- Task 10:免費轉模式金色主題(.sl-machine.is-freespins,見 applyFreeSpinsTheme)----------
   俯視平面、純 filter/box-shadow/background 換色 + 淡淡呼吸脈動,不加任何 3D 傾斜。 */
.gv-slot .sl-machine.is-freespins .sl-reelstage {
  background:
    radial-gradient(120% 96% at 50% 20%, rgba(255, 224, 140, .22), transparent 60%),
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--gold-deep) 50%, var(--felt) 50%) 0%, var(--felt-dark) 100%);
  border-color: var(--gold);
}
.gv-slot .sl-machine.is-freespins .sl-reels {
  border-color: var(--gold-bright);
  box-shadow:
    inset 0 4px 14px rgba(0, 0, 0, .6),
    inset 0 -2px 6px rgba(0, 0, 0, .4),
    0 0 26px rgba(240, 214, 122, .55);
  animation: gv-slot-fs-pulse 2.2s ease-in-out infinite;
}
@keyframes gv-slot-fs-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
}
.gv-slot .sl-machine.is-freespins .sl-spin-btn {
  background: var(--grad-gold);
  color: #33270a;
}
/* 免費轉的每一轉都鎖住觸發當下的注額,下注列點了也沒用(server 不理會 action.bet),
   免費轉期間直接隱藏、避免混淆。 */
.gv-slot .sl-machine.is-freespins .sl-controls .sl-betrow { display: none; }

/* 期待感:已停輪湊出 2 顆以上 scatter/diamond、還有機會湊滿時,尚在轉的輪金色發光脈動。 */
.gv-slot .sl-reelmask.anticipate {
  animation: gv-slot-anticipate-glow .5s ease-in-out infinite;
}
@keyframes gv-slot-anticipate-glow {
  0%, 100% { box-shadow: inset 0 0 10px rgba(0, 0, 0, .5), 0 0 6px rgba(240, 214, 122, .35); }
  50% { box-shadow: inset 0 0 10px rgba(0, 0, 0, .5), 0 0 20px rgba(240, 214, 122, .95); }
}

.gv-slot .sl-sym {
  width: var(--sl-cell);
  height: var(--sl-cell);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.gv-slot .sl-sym-svg {
  width: 74%;
  height: 74%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}
.gv-slot .sl-sym.is-empty { opacity: .25; }
.gv-slot .sl-sym.win {
  animation: gv-slot-symwin 1s ease-in-out infinite;
}
@keyframes gv-slot-symwin {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(240, 214, 122, .3)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(240, 214, 122, .95)); transform: scale(1.08); }
}
/* Task 9:逐條揭露時「正在唱名」的這一條額外加強脈動(比 base .win 更快更亮),
   比 .win 更具體性(兩個 class 同時掛),下一條開始前會被移除、只留 .win 的常駐發光。 */
.gv-slot .sl-sym.win.win-current {
  animation: gv-slot-symwin-current .45s ease-in-out infinite;
}
@keyframes gv-slot-symwin-current {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(240, 214, 122, .6)); transform: scale(1.05); }
  50% { filter: drop-shadow(0 0 24px rgba(240, 214, 122, 1)); transform: scale(1.18); }
}

/* Task 10:cascade 連消——中獎格「縮放淡出」消除(先移除 .win/.win-current 常駐發光,見
   game-slot.js animateCascadeRemovalAndFall,避免兩者同時搶 transform 屬性互相打架)。落下
   補位那段改用 JS 逐格 inline transform(FLIP 手法)動畫,不靠 CSS class/transition。 */
.gv-slot .sl-sym.sl-sym-remove {
  transition: opacity .22s ease, transform .22s ease;
  opacity: 0;
  transform: scale(.35);
}

/* Task 10:cascade 階梯倍數常駐小徽章(steps.length>1 才顯示,見 setCascadeMult/hideCascadeMult)。 */
.gv-slot .sl-cascademult {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 5;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--gold-hi);
  text-shadow: 0 0 10px rgba(240, 214, 122, .6);
  background: rgba(10, 8, 6, .72);
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  padding: 3px 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .18s ease;
}
.gv-slot .sl-cascademult.show { opacity: 1; transform: translate(-50%, 0); }

/* Task 9:贏線組成標籤(逐條揭露時顯示「符號 × 連數」,例如「七 ×3」「櫻桃 ×4 · 8 ways」)。 */
.gv-slot .sl-winlabel {
  min-height: 1.3em;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  color: var(--gold-bright);
  text-shadow: 0 0 8px rgba(240, 214, 122, .35);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .15s ease, transform .15s ease;
}
.gv-slot .sl-winlabel.show { opacity: 1; transform: translateY(0); }

.gv-slot .sl-result {
  min-height: 1.6em;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
  color: var(--muted);
  transition: opacity .2s ease;
}
.gv-slot .sl-result-amt { display: inline-block; }
.gv-slot .sl-result.win { color: var(--gold-bright); text-shadow: 0 0 12px rgba(240, 214, 122, .4); }
.gv-slot .sl-result.jackpot { color: var(--gold-hi); font-size: 1.1rem; }
/* Task 9:tier=big/mega 時結果列文字本身也跟著升級(更亮/更大),不只是全螢幕特效那一下。 */
.gv-slot .sl-result.win.tier-big {
  color: var(--gold-hi);
  font-size: 1.05rem;
  text-shadow: 0 0 16px rgba(240, 214, 122, .6);
}
.gv-slot .sl-result.win.tier-mega {
  color: var(--gold-hi);
  font-size: 1.2rem;
  text-shadow: 0 0 22px rgba(240, 214, 122, .85);
  animation: gv-slot-tierresult-pulse 1s ease-in-out infinite;
}
@keyframes gv-slot-tierresult-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

/* ---------- 控制列 ---------- */
.gv-slot .sl-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gv-slot .sl-betrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gv-slot .sl-betrow-label { font-size: .85rem; color: var(--muted); letter-spacing: .1em; }
.gv-slot .sl-betval { color: var(--gold-bright); font-size: 1.05rem; min-width: 5em; }
.gv-slot .sl-badj { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.gv-slot .sl-qbtn {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s ease, border-color .15s ease;
}
.gv-slot .sl-qbtn:hover { filter: brightness(1.15); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.gv-slot .sl-qbtn:active { transform: scale(.96); }
.gv-slot .sl-qbtn.active {
  background: var(--grad-gold);
  color: #33270a;
  border-color: var(--gold-deep);
}

.gv-slot .sl-actionrow { display: flex; gap: 10px; align-items: stretch; }
.gv-slot .sl-spinwrap { position: relative; flex: 1 1 auto; display: flex; min-width: 0; }
.gv-slot .sl-spin-btn { flex: 1; width: 100%; font-size: 1.15rem; padding: 14px 18px; }
.gv-slot .sl-leave-btn { flex: 1; }
.gv-slot .sl-spin-btn:disabled,
.gv-slot .sl-leave-btn:disabled,
.gv-slot .sl-auto-btn:disabled,
.gv-slot .sl-stop-btn:disabled { opacity: .5; cursor: default; }

/* ---------- 需求B:自動轉開關(金色小開關) ---------- */
.gv-slot .sl-auto-btn {
  flex: 0 0 auto;
  font-size: .92rem;
  font-weight: 700;
  padding: 12px 16px;
  border: 1px solid var(--gold-deep);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--gold-bright);
  white-space: nowrap;
  transition: filter .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.gv-slot .sl-auto-btn:not(:disabled):hover { filter: brightness(1.12); }
.gv-slot .sl-auto-btn.on {
  background: var(--grad-gold);
  color: #33270a;
  border-color: var(--gold-bright);
  box-shadow: 0 0 16px rgba(240, 214, 122, .55);
  animation: gv-slot-auto-pulse 1.6s ease-in-out infinite;
}
@keyframes gv-slot-auto-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(240, 214, 122, .45); }
  50% { box-shadow: 0 0 22px rgba(240, 214, 122, .8); }
}

/* ---------- 需求B:停止鈕(僅 queue>0 或 autoSpin 時 .show) ---------- */
.gv-slot .sl-stop-btn {
  display: none;
  flex: 0 0 auto;
  font-size: .92rem;
  font-weight: 700;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--red) 60%, var(--line));
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--red) 26%, var(--panel-2)), var(--panel));
  color: var(--ink);
  white-space: nowrap;
  transition: filter .15s ease, border-color .15s ease;
}
.gv-slot .sl-stop-btn.show { display: inline-flex; align-items: center; justify-content: center; }
.gv-slot .sl-stop-btn:not(:disabled):hover { filter: brightness(1.15); border-color: var(--red); }

/* ---------- 需求B:排隊徽章(排隊 ×N,浮在 SPIN 右上角) ---------- */
.gv-slot .sl-queue-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #33270a;
  background: var(--grad-gold);
  border: 1px solid var(--gold-bright);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 0 12px rgba(240, 214, 122, .5);
  pointer-events: none;
  white-space: nowrap;
}
.gv-slot .sl-queue-badge.show { display: inline-flex; }

/* ---------- 個人 JACKPOT 大慶祝(僅自己中獎時觸發) ---------- */
.gv-slot .sl-celebrate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: radial-gradient(ellipse at 50% 50%, rgba(20, 15, 5, .92), rgba(5, 4, 2, .96));
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.gv-slot .sl-celebrate.show { opacity: 1; pointer-events: auto; }
.gv-slot .sl-celebrate-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.4rem);
  font-weight: 800;
  letter-spacing: .1em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gv-slot-celebrate-pulse 1.1s ease-in-out infinite;
}
.gv-slot .sl-celebrate-amt {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: var(--gold-hi);
  text-shadow: 0 0 16px rgba(240, 214, 122, .7);
}
@keyframes gv-slot-celebrate-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(240, 214, 122, .5)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 26px rgba(240, 214, 122, .95)); }
}

/* ---------- Task 9:粒子噴發共用元件(個人 JACKPOT 鑽石噴發 + tier 花火兩處共用) ----------
   純 CSS 觸發:JS 只負責把固定 12 顆 .sl-burst-p(各自內含一個符號 SVG)準備好塞進 DOM,
   角度 --a 由下面 12 條 nth-child 規則指定(0°起 30° 一顆,繞一整圈),要不要播放、播多久、
   噴多遠一律交給父層 class(.show / .mega)決定——沒有任何 JS 隨機數或逐格計算。 */
.gv-slot .sl-burst { position: absolute; inset: 0; pointer-events: none; }
.gv-slot .sl-burst-p {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  opacity: 0;
}
.gv-slot .sl-burst-p svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(240, 214, 122, .85)); }
.gv-slot .sl-burst-p:nth-child(1)  { --a: 0deg; }
.gv-slot .sl-burst-p:nth-child(2)  { --a: 30deg; }
.gv-slot .sl-burst-p:nth-child(3)  { --a: 60deg; }
.gv-slot .sl-burst-p:nth-child(4)  { --a: 90deg; }
.gv-slot .sl-burst-p:nth-child(5)  { --a: 120deg; }
.gv-slot .sl-burst-p:nth-child(6)  { --a: 150deg; }
.gv-slot .sl-burst-p:nth-child(7)  { --a: 180deg; }
.gv-slot .sl-burst-p:nth-child(8)  { --a: 210deg; }
.gv-slot .sl-burst-p:nth-child(9)  { --a: 240deg; }
.gv-slot .sl-burst-p:nth-child(10) { --a: 270deg; }
.gv-slot .sl-burst-p:nth-child(11) { --a: 300deg; }
.gv-slot .sl-burst-p:nth-child(12) { --a: 330deg; }
@keyframes gv-slot-burst-p {
  0%   { opacity: 0; transform: rotate(var(--a, 0deg)) translateY(0) scale(.3); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a, 0deg)) translateY(var(--dist, -120px)) scale(1); }
}
/* 個人 JACKPOT 慶祝:鑽石粒子噴發(既有 .sl-celebrate.show 觸發全螢幕慶祝時一起播)。 */
.gv-slot .sl-celebrate .sl-burst-p { --dist: -150px; }
.gv-slot .sl-celebrate.show .sl-burst-p {
  animation: gv-slot-burst-p 1.3s ease-out forwards;
}

/* ---------- Task 9:tier=big/mega 全螢幕金爆(俯視平面,無 3D 傾斜——純 opacity/scale/translateY) ---------- */
.gv-slot .sl-tierflash {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(240, 214, 122, .35), transparent 62%);
  border-radius: var(--radius);
}
.gv-slot .sl-tierflash.show { opacity: 1; animation: gv-slot-tierflash-bg .9s ease-out; }
.gv-slot .sl-tierflash.show.mega {
  animation-duration: 1.6s;
  background: radial-gradient(ellipse at 50% 45%, rgba(240, 214, 122, .55), transparent 66%);
}
@keyframes gv-slot-tierflash-bg {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
.gv-slot .sl-tierflash-text {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7vw, 2.8rem);
  font-weight: 800;
  letter-spacing: .08em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(240, 214, 122, .6));
  opacity: 0;
}
.gv-slot .sl-tierflash.show .sl-tierflash-text {
  animation: gv-slot-tiertext-pop .9s cubic-bezier(.22, 1.4, .4, 1);
}
.gv-slot .sl-tierflash.show.mega .sl-tierflash-text {
  font-size: clamp(1.9rem, 8vw, 3.2rem);
  animation-duration: 1.6s;
}
@keyframes gv-slot-tiertext-pop {
  0%   { opacity: 0; transform: scale(.4); }
  30%  { opacity: 1; transform: scale(1.15); }
  45%  { transform: scale(.98); }
  70%  { transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1); }
}
/* ring1:big/mega 皆有(較短噴射距離);ring2:只有 mega 才點亮(見選擇器多一個 .mega 條件、
   多一個 .sl-tier-ring2 範圍),粒子數等於再翻一倍、噴射距離也更遠——呼應「mega 更盛大」。 */
.gv-slot .sl-tier-ring1 .sl-burst-p { --dist: -110px; }
.gv-slot .sl-tier-ring2 .sl-burst-p { --dist: -170px; }
.gv-slot .sl-tierflash.show .sl-tier-ring1 .sl-burst-p {
  animation: gv-slot-burst-p .9s ease-out forwards;
}
.gv-slot .sl-tierflash.show.mega .sl-tier-ring2 .sl-burst-p {
  animation: gv-slot-burst-p 1.5s ease-out forwards;
  animation-delay: .12s;
}

/* ---------- Task 10:免費轉橫幅(進場/續轉/結束,三種文案共用同一個 overlay,見
   game-slot.js showFreeSpinsBanner)——重用 tierflash 的淡入淡出/文字 pop 兩個 @keyframes,
   俯視平面、無 3D 傾斜。 ---------- */
.gv-slot .sl-fsbanner {
  position: absolute;
  inset: 0;
  z-index: 19;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(240, 214, 122, .4), transparent 62%);
  border-radius: var(--radius);
}
.gv-slot .sl-fsbanner.show { opacity: 1; animation: gv-slot-tierflash-bg .9s ease-out; }
.gv-slot .sl-fsbanner-text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: .05em;
  text-align: center;
  padding: 0 16px;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(240, 214, 122, .6));
  opacity: 0;
}
.gv-slot .sl-fsbanner.show .sl-fsbanner-text {
  animation: gv-slot-tiertext-pop 1s cubic-bezier(.22, 1.4, .4, 1);
}

/* ---------- 玩法說明:機台牆頂部工具列 + 覆層 dialog(黑金奢華,俯視平面、無 3D 傾斜) ---------- */
/* 頂部工具列:玩法說明按鈕(隨牆一起 .hidden;坐上機台後不顯示)。 */
.gv-slot .sl-wall-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.gv-slot .sl-wall-head.hidden { display: none; }
/* 按鈕沿用 .btn 黑金底,加金色描邊/金字讓它在牆頂夠顯眼,但不與「坐下」金填鈕搶權重。 */
.gv-slot .sl-guide-btn {
  gap: 8px;
  border-color: var(--gold-deep);
  color: var(--gold-bright);
  font-weight: 700;
  letter-spacing: .06em;
}
.gv-slot .sl-guide-btn:hover { border-color: var(--gold); box-shadow: 0 0 14px rgba(240, 214, 122, .35); }

/* 覆層:固定全螢幕、暗底遮罩,點背景(覆層本體)關閉;內容過高時 panel 內部捲動、body 不捲。 */
.gv-slot .sl-guide {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at 50% 40%, rgba(20, 15, 5, .84), rgba(4, 3, 2, .93));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.gv-slot .sl-guide.show { opacity: 1; pointer-events: auto; }

.gv-slot .sl-guide-panel {
  position: relative;
  width: min(680px, 100%);
  max-height: 88vh;
  max-height: min(88dvh, 760px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 240, 200, .06), transparent 55%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 18px 50px rgba(0, 0, 0, .6),
    var(--glow-gold);
  overflow: hidden; /* 讓 body 的內部捲動裁在圓角內 */
  transform: translateY(10px) scale(.98);
  transition: transform .3s cubic-bezier(.22, 1, .4, 1);
}
.gv-slot .sl-guide.show .sl-guide-panel { transform: translateY(0) scale(1); }
/* 頂部金色細線(與 .sl-panel::before 同一 DNA)。 */
.gv-slot .sl-guide-panel::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 2px;
  background: var(--grad-gold-line);
  opacity: .7;
  pointer-events: none;
  z-index: 3;
}

.gv-slot .sl-guide-close {
  position: absolute;
  top: 9px;
  right: 11px;
  z-index: 4;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(10, 8, 6, .6);
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, filter .15s ease;
}
.gv-slot .sl-guide-close:hover {
  color: var(--gold-bright);
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  filter: brightness(1.1);
}

/* 唯一捲動容器:overscroll-behavior:contain 阻斷捲動鏈,body 絕不跟著捲。 */
.gv-slot .sl-guide-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gv-slot .sl-guide-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  letter-spacing: .06em;
  text-align: center;
  margin: 2px 24px 2px 0; /* 右留白避開關閉 × */
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

.gv-slot .sl-guide-heading {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-bright);
  letter-spacing: .08em;
  padding-left: 12px;
  border-left: 3px solid var(--gold); /* 金色左飾條,替代原文 ■ 標記 */
  margin-bottom: 12px;
}

.gv-slot .sl-guide-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.gv-slot .sl-guide-item {
  position: relative;
  padding-left: 16px;
  font-size: .9rem;
  line-height: 1.75;
  color: var(--ink);
}
.gv-slot .sl-guide-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 6px rgba(240, 214, 122, .5);
}

.gv-slot .sl-guide-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.gv-slot .sl-guide-card {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 16px rgba(0, 0, 0, .3);
}
.gv-slot .sl-guide-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.gv-slot .sl-guide-card-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--gold-bright);
  letter-spacing: .04em;
}
/* 波動標籤:金色膠囊,低/中/高分別以冷綠、金、紅微調配色(仍在黑金體系內)。 */
.gv-slot .sl-guide-vol {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--gold-deep);
  color: var(--gold-bright);
  white-space: nowrap;
}
.gv-slot .sl-guide-vol.low { color: #9fc9a6; border-color: color-mix(in srgb, #9fc9a6 45%, var(--line)); }
.gv-slot .sl-guide-vol.mid { color: var(--gold-bright); border-color: var(--gold-deep); }
.gv-slot .sl-guide-vol.high { color: #e8959a; border-color: color-mix(in srgb, var(--red) 55%, var(--line)); }
.gv-slot .sl-guide-card-bet {
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.gv-slot .sl-guide-card-desc {
  font-size: .88rem;
  line-height: 1.8;
  color: var(--ink);
}

/* 內文 inline 符號:鑽石/wild/scatter 一律用 sprite SVG(小尺寸、貼齊字行,嚴禁 emoji)。 */
.gv-slot .sl-guide-sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -.22em;
  margin: 0 .1em;
}
.gv-slot .sl-guide-sym svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

/* ---------- 響應式(375px 手機可用;放大後仍逐級優雅縮小,body 不水平捲動) ----------
   符號格尺寸統一由 --sl-cell 控制(JS 動態量測,見 game-slot.js),各斷點只改這個變數,
   轉輪捲動 / cascade FLIP 幾何自動跟著對。 */
@media (max-width: 900px) {
  .gv-slot { --sl-cell: 70px; }
  .gv-slot .sl-wall { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 600px) {
  .gv-slot { --sl-cell: 60px; }
}
@media (max-width: 430px) {
  .gv-slot { --sl-cell: 48px; }
  .gv-slot .sl-panel { padding: 12px; }
  .gv-slot .sl-badj { width: 100%; margin-left: 0; }
  .gv-slot .sl-qbtn { flex: 1; padding: 8px 6px; text-align: center; }
  .gv-slot .sl-actionrow { flex-wrap: wrap; }
  .gv-slot .sl-spinwrap { flex: 1 1 100%; order: -1; } /* 窄螢幕 SPIN 佔整行,自動/停止分列下方 */
  .gv-slot .sl-auto-btn, .gv-slot .sl-stop-btn { flex: 1 1 auto; }
  .gv-slot .sl-burst-p { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
  /* 玩法說明覆層:窄螢幕近全幅、留少量邊距,body 仍不水平捲動。 */
  .gv-slot .sl-guide { padding: 12px; }
  .gv-slot .sl-guide-panel { width: 100%; max-height: 92vh; max-height: 92dvh; }
  .gv-slot .sl-guide-body { padding: 20px 16px 22px; gap: 16px; }
  .gv-slot .sl-guide-card-head { flex-wrap: wrap; gap: 6px; }
}

/* 動畫減量:尊重使用者設定 */
@media (prefers-reduced-motion: reduce) {
  .gv-slot .sl-reelstrip { transition: none !important; }
  .gv-slot .sl-sym.win { animation: none; }
  .gv-slot .sl-sym.win.win-current { animation: none; }
  .gv-slot .sl-reelmask.anticipate { animation: none; }
  .gv-slot .sl-celebrate-title { animation: none; }
  .gv-slot .sl-card { transition: none; }
  .gv-slot .sl-winlabel { transition: none; }
  .gv-slot .sl-result.win.tier-mega { animation: none; }
  .gv-slot .sl-tierflash,
  .gv-slot .sl-tierflash.show,
  .gv-slot .sl-tierflash-text,
  .gv-slot .sl-tierflash.show .sl-tierflash-text,
  .gv-slot .sl-burst-p,
  .gv-slot .sl-celebrate.show .sl-burst-p,
  .gv-slot .sl-tierflash.show .sl-tier-ring1 .sl-burst-p,
  .gv-slot .sl-tierflash.show.mega .sl-tier-ring2 .sl-burst-p {
    animation: none !important;
  }
  /* Task 10:cascade 消除/階梯倍數/免費轉主題脈動/免費轉橫幅——同樣全部去動畫化,
     game-slot.js 端也已經在 reducedMotion() 時直接跳過逐步演出、走一次到位的靜態呈現。 */
  .gv-slot .sl-sym.sl-sym-remove { transition: none !important; }
  .gv-slot .sl-cascademult { transition: none; }
  .gv-slot .sl-machine.is-freespins .sl-reels { animation: none; }
  /* 需求B:自動轉開關開啟時的呼吸脈動也去動畫化(只留金色填色表達 on 狀態)。 */
  .gv-slot .sl-auto-btn.on { animation: none; }
  .gv-slot .sl-fsbanner,
  .gv-slot .sl-fsbanner.show,
  .gv-slot .sl-fsbanner-text,
  .gv-slot .sl-fsbanner.show .sl-fsbanner-text {
    animation: none !important;
  }
  /* 玩法說明覆層:去掉淡入/位移過渡(仍以 opacity/pointer-events 切換開關)。 */
  .gv-slot .sl-guide { transition: none; }
  .gv-slot .sl-guide-panel { transition: none; transform: none; }
  .gv-slot .sl-guide.show .sl-guide-panel { transform: none; }
}