/* [Claude Code 2026-06-24] wolves_slot_rush client 樣式（霓虹深色主題；通用渲染器共用） */
:root {
  --bg: #0d0f1a;
  --surface: #171a2b;
  --surface-2: #1f2336;
  --border: #2c3150;
  --text: #e8eaf6;
  --text-soft: #9aa0c0;
  --neon: #ff3df0;
  --neon-2: #36e0ff;
  --gold: #ffd24a;
  --win: #ffe169;
}
/* ---- theme 驅動配色：改 config 的 theme 即換整套風格（新增主題在這加一組）----
   覆寫 --neon/--neon-2 這對主色 → hero/卡片/按鈕/外框整體換色，無需改 code。 */
body[data-theme="neon"]   { --neon: #ff3df0; --neon-2: #36e0ff; }
body[data-theme="lucky777"] { --neon: #ffb31a; --neon-2: #ff4d6d; --gold: #ffd24a; }
body[data-theme="egypt"]  { --neon: #e8b14a; --neon-2: #ffd24a; --gold: #ffe08a; }
body[data-theme="ocean"]  { --neon: #34d3ff; --neon-2: #5ad1ff; }
body[data-theme="fruit"]  { --neon: #ff5f6d; --neon-2: #ffb84a; }
body[data-theme="oriental"] { --neon: #ff3838; --neon-2: #ffcf4a; }
body[data-theme="candy"] { --neon: #ff5fa2; --neon-2: #a06bff; --gold: #ffd24a; }
body[data-theme="pirate"] { --neon: #d4a017; --neon-2: #1f8a70; --gold: #ffd24a; }
body[data-theme="prism"] { --neon: #36e0ff; --neon-2: #b06bff; --gold: #ffe08a; }
body[data-theme="galaxy"] { --neon: #7b6bff; --neon-2: #36e0ff; --gold: #ffe08a; }
body[data-theme="frost"] { --neon: #5ad1ff; --neon-2: #aef0ff; --gold: #d6f3ff; }
body[data-theme="arcane"] { --neon: #a06bff; --neon-2: #d7b3ff; --gold: #ffe08a; }
body[data-theme="honey"] { --neon: #e8920c; --neon-2: #ffc94d; --gold: #ffd766; }
body[data-theme="meadow"] { --neon: #8bc34a; --neon-2: #ffd54a; --gold: #ffe08a; }
/* [Claude Code 2026-07-06] 賓果主題（藍紫 + 金球）*/
body[data-theme="bingo"] { --neon: #5b8bff; --neon-2: #b06bff; --gold: #ffd24a; }
* { box-sizing: border-box; }
body {
  margin: 0; background: radial-gradient(circle at 50% -10%, #1a1d36 0%, var(--bg) 60%);
  color: var(--text); font-family: -apple-system, "Segoe UI", "Microsoft JhengHei", sans-serif;
  min-height: 100vh;
}
.loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: var(--bg); z-index: 50; color: var(--text-soft); font-size: 18px;
  transition: opacity .25s ease; }
/* 777 拉霸機 loading：金框機台 + 三軸符號往上滾（不旋轉） */
.ld-machine { display: flex; gap: 6px; padding: 8px 10px; border-radius: 14px;
  background: linear-gradient(#171a29, #0c0e18); border: 2px solid var(--gold, #ffd24a);
  box-shadow: 0 0 22px rgba(255,210,74,.35), inset 0 0 12px rgba(0,0,0,.5); }
.ld-reel { position: relative; width: var(--reel-w, 38px); height: var(--reel-h, 48px); overflow: hidden; border-radius: 7px;
  background: linear-gradient(#0a0c16, #1b1f30); box-shadow: inset 0 0 8px rgba(0,0,0,.6); }
/* 上下淡出遮罩，凸顯中間那格 */
.ld-reel::before, .ld-reel::after { content: ""; position: absolute; left: 0; right: 0; height: var(--reel-fade, 14px); z-index: 2; pointer-events: none; }
.ld-reel::before { top: 0; background: linear-gradient(#0c0e18, transparent); }
.ld-reel::after { bottom: 0; background: linear-gradient(transparent, #0c0e18); }
.ld-strip { display: flex; flex-direction: column; align-items: center; will-change: transform; }
/* span 高度 = reel 視窗高度（剛好一格）→ translateY(-50%) 無縫迴圈不受尺寸影響 */
.ld-strip span { height: var(--reel-h, 48px); display: flex; align-items: center; justify-content: center;
  font-size: var(--reel-fs, 26px); font-weight: 900; line-height: 1; }
.ld-strip span.s7 { color: var(--gold, #ffd24a); text-shadow: 0 0 8px rgba(255,210,74,.7); font-family: "Arial Black", system-ui, sans-serif; }
/* 三軸不同速度，像真拉霸各自轉；strip 內容重複兩次 → translateY(-50%) 無縫接回 */
.ld-reel:nth-child(1) .ld-strip { animation: ldRoll .55s linear infinite; }
.ld-reel:nth-child(2) .ld-strip { animation: ldRoll .72s linear infinite; }
.ld-reel:nth-child(3) .ld-strip { animation: ldRoll .9s linear infinite; }
/* 由上往下滾：strip 內容重複兩次，從 -50% 滑到 0 → 符號往下跑、無縫接回 */
@keyframes ldRoll { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.loading-text { font-size: 15px; letter-spacing: 3px; color: var(--text-mute, #8b91a3);
  animation: ldText 1.2s ease-in-out infinite; }
@keyframes ldText { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px;
  background: rgba(23,26,43,.9); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.brand { font-size: 20px; font-weight: 800; letter-spacing: .5px;
  text-shadow: 0 0 12px var(--neon); }
.ver { font-size: 11px; color: var(--text-soft); text-shadow: none; }
.top-right { display: flex; align-items: center; gap: 12px; }
.coins-box { background: var(--surface-2); padding: 6px 14px; border-radius: 999px; font-weight: 700; color: var(--gold); }
.game-tools { display: inline-flex; align-items: center; gap: 6px; }

.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.btn-ghost:hover { border-color: var(--neon-2); color: var(--neon-2); }

.view { max-width: 980px; margin: 0 auto; padding: 24px 20px 60px; }
.section-title { text-align: center; color: var(--text-soft); font-weight: 600; }

/* ---- 大廳 hero + section head ---- */
.lobby-hero { text-align: center; padding: 28px 16px 18px;
  background: radial-gradient(circle at 50% 0%, rgba(255,61,240,.18), transparent 70%); border-radius: 18px; margin-bottom: 18px; }
.hero-title { font-size: clamp(28px, 6vw, 44px); font-weight: 900; letter-spacing: 2px;
  display: inline-flex; align-items: center; gap: 12px; color: #fff;
  text-shadow: 0 0 20px rgba(255,61,240,.6), 0 0 8px rgba(54,224,255,.55), 0 2px 4px rgba(0,0,0,.5); }
.hero-ico { font-size: .95em; filter: drop-shadow(0 0 10px rgba(255,210,74,.5)); }
.hero-sub { color: var(--text-soft); margin-top: 6px; font-size: 14px; }
/* [Claude Code 2026-06-25] 平台啟動日期徽章 */
.hero-since { display: inline-block; margin-top: 10px; padding: 3px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--gold);
  background: rgba(255,210,74,.1); border: 1px solid rgba(255,210,74,.3); }
.lobby-section-head { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 6px 4px 12px; color: var(--text); }
.lobby-section-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--neon-2); box-shadow: 0 0 8px var(--neon-2); }
.lobby-section-head .count { background: var(--surface-2); color: var(--text-soft); font-size: 12px; padding: 1px 9px; border-radius: 999px; }

.lobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.game-card { position: relative; background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: 16px; padding: 18px 16px 16px; cursor: pointer;
  color: var(--text); text-align: left; overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.game-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--neon), var(--neon-2)); opacity: .85; }
.game-card:hover { transform: translateY(-4px); border-color: var(--neon); box-shadow: 0 10px 34px rgba(255,61,240,.28); }
.card-badge { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700;
  background: rgba(54,224,255,.15); color: var(--neon-2); border: 1px solid rgba(54,224,255,.4); padding: 3px 10px; border-radius: 999px; }
/* [Claude Code 2026-06-28] 大廳「開發中」徽章（沒填 completedAt 的款；放左上、橘色，與右上「▶ 開玩」不重疊）*/
.card-dev { position: absolute; top: 12px; left: 12px; z-index: 3; font-size: 11px; font-weight: 800;
  background: rgba(255,153,0,.18); color: #ffb454; border: 1px solid rgba(255,153,0,.5);
  padding: 3px 10px; border-radius: 999px; letter-spacing: .03em; }
.card-emoji { font-size: 46px; line-height: 1; margin: 6px 0 8px;
  display: inline-block; transform-origin: 50% 50%; }
/* [Claude Code 2026-06-28] 大廳圖示動畫改「一次只動一張」：JS 輪流給某張卡的圖示掛 fx-pulse，
   做完換下一張。效果＝中心點放大縮小 + 亮一下（取代原本搖晃 wiggle），較正、較好看。 */
.card-emoji.fx-pulse { animation: cardPulse .9s ease; }
.game-card:hover .card-emoji { animation: cardPop .5s ease; }   /* hover 時清楚彈一下 */
@keyframes cardPulse {
  0%   { transform: scale(1);    filter: none; }
  35%  { transform: scale(1.3);  filter: brightness(1.85) drop-shadow(0 0 14px var(--neon, #5b6cf6)); }
  60%  { transform: scale(1.08); filter: brightness(1.25) drop-shadow(0 0 7px var(--neon, #5b6cf6)); }
  100% { transform: scale(1);    filter: none; }
}
@keyframes cardPop { 0%,100% { transform: scale(1); } 40% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .card-emoji { animation: none !important; } }

/* 擴展百搭（黃金法老）：整軸展開成 WILD 時，每格金光放大一下 */
.cell.expand-fill { box-shadow: inset 0 0 0 2px var(--gold, #ffd24a), 0 0 16px rgba(255,210,74,.6); z-index: 4; }
.cell.expand-fill .glyph { animation: expandFill .42s ease; }
@keyframes expandFill { 0% { transform: scale(.4); opacity: .2; filter: brightness(2); } 60% { transform: scale(1.18); } 100% { transform: scale(1); opacity: 1; } }
/* [Claude Code 2026-06-28] 神秘符（mystery）：🔮 揭曉前脈動蓄勢、揭曉時翻牌 */
.cell.myst-orb { box-shadow: inset 0 0 0 2px #c08bff, 0 0 18px rgba(160,107,255,.7); z-index: 4; }
.cell.myst-orb .glyph { animation: mystPulse .54s ease infinite; }
@keyframes mystPulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.15); filter: brightness(1.6) drop-shadow(0 0 8px #c08bff); } }
.cell.myst-flip { box-shadow: inset 0 0 0 2px var(--neon-2, #d7b3ff), 0 0 16px rgba(160,107,255,.6); z-index: 4; }
.cell.myst-flip .glyph { animation: mystFlip .56s ease; }
@keyframes mystFlip { 0% { transform: rotateY(90deg) scale(.6); opacity: .2; filter: brightness(2); } 55% { transform: rotateY(0deg) scale(1.2); } 100% { transform: rotateY(0deg) scale(1); opacity: 1; } }
/* [Claude Code 2026-06-28] 黏性百搭（sticky）：免費期黏住的 🐝 百搭金色光暈 + 輕微脈動（表示「黏住、持續生效」）*/
.cell.sticky-wild { box-shadow: inset 0 0 0 2px #ffcf4a, 0 0 14px rgba(255,180,40,.7); z-index: 4; }
.cell.sticky-wild .glyph { animation: stickyPulse 1.1s ease-in-out infinite; }
@keyframes stickyPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); filter: drop-shadow(0 0 6px #ffb400); } }
/* [Claude Code 2026-06-29] 蜜蜂採蜜（cashcollect）：空格變暗、花蜜面額徽章、採集動畫 */
.cell.sym-EMPTY .glyph { opacity: .28; font-size: .7em; }   /* 空格：⬡ 淡化、縮小，看起來「空」 */
.cell .nectar-val { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 6; pointer-events: none;
  font-family: "Arial Black", system-ui, sans-serif; font-weight: 900; font-size: 11px; line-height: 1;
  padding: 2px 6px; border-radius: 8px; white-space: nowrap;
  background: linear-gradient(135deg, #fff1c2, #ffcf4a); color: #5a3a00; box-shadow: 0 0 7px rgba(255,180,40,.7), 0 1px 2px rgba(0,0,0,.5); }
.cell.cash-bee { box-shadow: inset 0 0 0 2px #ffd54a, 0 0 16px rgba(255,200,60,.85); z-index: 4; }
.cell.cash-bee .glyph { animation: stickyPulse .7s ease-in-out infinite; }
.cell.cash-grab .glyph { animation: cashGrab .6s ease; }
@keyframes cashGrab { 0% { transform: scale(1); } 45% { transform: scale(1.25); filter: brightness(1.6) drop-shadow(0 0 8px #ffd54a); } 100% { transform: scale(1); } }
/* 採蜜賠付表：花蜜面額列 */
.nectar-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.nectar-chip { background: rgba(255,200,60,.14); border: 1px solid rgba(255,200,60,.4); color: var(--neon-2, #ffd54a);
  padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.card-name { font-size: 19px; font-weight: 800; }
/* [Claude Code 2026-06-29] 大廳權重星星（display.stars，金星=權重、灰星補滿至 5；星多排上面）*/
.card-stars { font-size: 13px; letter-spacing: 2px; color: #ffcf4a; margin-top: 2px;
  text-shadow: 0 0 6px rgba(255,200,60,.45); }
.card-sub { font-size: 12px; color: var(--text-soft); letter-spacing: .5px; margin-top: 1px; }
.card-desc { font-size: 12.5px; color: #c8cce8; line-height: 1.5; margin: 10px 0 0; min-height: 3.6em; }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.card-tags .tag { font-size: 11px; background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text-soft); padding: 2px 9px; border-radius: 999px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.card-meta span { font-size: 10.5px; color: var(--text-soft); background: var(--bg); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 8px; }

/* ---- 直版 / 手機優先：整個遊戲區置中、限寬 ---- */
.game-stage { max-width: 480px; margin: 0 auto; padding: 8px 4px 24px; }
.game-head { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; margin-bottom: 12px; }
.game-head h2 { margin: 0; text-align: center; font-size: 19px; }
.game-head .btn-ghost { padding: 6px 10px; }
.head-spacer { display: block; }
.icon-btn { font-size: 17px; padding: 6px 11px; line-height: 1; }

.machine { position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.4); }

/* ---- 盤面（treadmill 掉落式）---- */
.board { display: grid; gap: 6px; background: #070a14; border-radius: 12px; padding: 6px; }
.reel { position: relative; overflow: hidden; border-radius: 10px; background: #0a0c16; }
.strip { position: absolute; inset: 0; }
.cell { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(26px, 9vw, 46px); background: var(--surface-2);
  border: 2px solid #070a14; box-sizing: border-box; user-select: none; will-change: transform; }
.cell .glyph { position: relative; z-index: 2; line-height: 1; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
/* 字牌類（A/K/Q/J/7/BAR）純文字 → 與 emoji 基線一致、置中不歪；各符號給色易辨 */
.cell .glyph.txt { font-family: "Arial Black", "Segoe UI", system-ui, sans-serif; font-weight: 900;
  letter-spacing: .5px; color: #e8eaf6; text-shadow: 0 2px 5px rgba(0,0,0,.55); }
.cell .glyph.txt-multi { font-size: .5em; letter-spacing: 1.5px; }
.cell.sym-SEVEN .glyph { color: #ff4d6d; text-shadow: 0 0 10px rgba(255,77,109,.45); }
.cell.sym-BAR  .glyph { color: #c77dff; text-shadow: 0 0 10px rgba(199,125,255,.45); }
.cell.sym-A .glyph { color: #ff7aa8; }
.cell.sym-K .glyph { color: #5ad1ff; }
.cell.sym-Q .glyph { color: #ffd24a; }
.cell.sym-J .glyph { color: #7ee787; }
.strip.spinning .glyph { filter: blur(2.5px); }
.cell.win { background: rgba(255,225,105,.12); box-shadow: inset 0 0 0 2px var(--win), 0 0 16px var(--win); z-index: 4; }
.cell.win .glyph { animation: pop .45s ease; }
@keyframes pop { 0%{transform:scale(1)} 45%{transform:scale(1.18)} 100%{transform:scale(1)} }

/* ---- WILD / SCATTER 辨識（比照 slot_town：金/青外框 + 角標）---- */
.cell.sym-WILD::before, .cell.sym-SCATTER::before {
  content: ""; position: absolute; inset: 3px; border-radius: 8px; pointer-events: none; z-index: 1; }
.cell.sym-WILD::before { border: 2px solid rgba(255,210,74,.65);
  box-shadow: 0 0 10px rgba(255,210,74,.45), inset 0 0 8px rgba(255,210,74,.3); }
.cell.sym-SCATTER::before { border: 2px solid rgba(52,224,255,.6);
  box-shadow: 0 0 10px rgba(52,224,255,.4), inset 0 0 8px rgba(52,224,255,.25); }
.cell.sym-WILD::after, .cell.sym-SCATTER::after {
  position: absolute; top: 3px; left: 3px; z-index: 3; padding: 1px 5px; border-radius: 6px;
  font-size: clamp(.4rem, 2.6vw, .58rem); font-weight: 900; letter-spacing: .04em; line-height: 1.25;
  pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.cell.sym-WILD::after { content: "WILD"; background: linear-gradient(#ffe9a6, var(--gold)); color: #2a1d00; }
.cell.sym-SCATTER::after { content: "SCATTER"; background: linear-gradient(#bff4ff, #34e0ff); color: #042530; }
.cell.sym-WILD .glyph { filter: drop-shadow(0 0 6px rgba(255,210,74,.6)); }
.cell.sym-SCATTER .glyph { filter: drop-shadow(0 0 6px rgba(52,224,255,.6)); }

/* [Claude Code 2026-06-28] 倍率百搭（frost_wilds）：❄️ 百搭格右上角的 ×N 倍率徽章。
   放右上、避開既有「WILD」字樣（在左上 ::after）；藍冰漸層 + 發光。 */
.cell .wild-mult {
  position: absolute; top: 3px; right: 3px; z-index: 6; pointer-events: none;
  font-family: "Arial Black", system-ui, sans-serif; font-weight: 900;
  font-size: clamp(.5rem, 2.8vw, .72rem); line-height: 1; letter-spacing: .02em;
  padding: 2px 5px; border-radius: 7px;
  background: linear-gradient(135deg, #e8f9ff, #5ad1ff); color: #042a3a;
  box-shadow: 0 0 9px rgba(90,209,255,.85), 0 1px 3px rgba(0,0,0,.5);
  animation: wmPop .4s ease; }
@keyframes wmPop { 0%{transform:scale(.4);opacity:0} 60%{transform:scale(1.2)} 100%{transform:scale(1);opacity:1} }
/* frost 主題：百搭已用 ×N 徽章標示，隱藏左上「WILD」字樣避免兩標籤擠在一起（保留外框光暈）。 */
body[data-theme="frost"] .cell.sym-WILD::after { display: none; }
body[data-theme="frost"] .cell.sym-WILD::before { border-color: rgba(90,209,255,.7);
  box-shadow: 0 0 10px rgba(90,209,255,.5), inset 0 0 8px rgba(90,209,255,.3); }
/* [Claude Code 2026-06-25] candy 款：取消「框+角標」這種疊在格子上的辨識（消除掉落時會跟 glyph 分離），
   改成把光暈做在 glyph 上 → drop-shadow 隨 glyph 一起掉落/消除，棒棒糖🍭/轉盤🎡 與光暈永遠同進退。 */
/* candy 款：標示框做在 .glyph 上（不是 .cell）→ inset 環 + 光暈會隨 glyph 一起掉落/消除，永不分離。 */
body[data-theme="candy"] .cell.sym-WILD::before,
body[data-theme="candy"] .cell.sym-WILD::after,
body[data-theme="candy"] .cell.sym-SCATTER::before,
body[data-theme="candy"] .cell.sym-SCATTER::after { display: none; }
/* 框做小一點、留邊（emoji 縮 .82em + 內距），外光暈也收斂 → 不會被 reel 的 overflow:hidden 裁掉。 */
body[data-theme="candy"] .cell.sym-SCATTER .glyph,
body[data-theme="candy"] .cell.sym-BONUS .glyph { box-sizing: border-box; font-size: .82em; padding: 5px; border-radius: 12px; }
body[data-theme="candy"] .cell.sym-SCATTER .glyph { box-shadow: inset 0 0 0 2.5px #34e0ff, 0 0 7px rgba(52,224,255,.55); }
body[data-theme="candy"] .cell.sym-BONUS .glyph { box-shadow: inset 0 0 0 2.5px var(--gold), 0 0 7px rgba(255,95,162,.5); }
/* 小角標（跟著 glyph 走）標明是哪種特殊符 */
body[data-theme="candy"] .cell.sym-SCATTER .glyph::after,
body[data-theme="candy"] .cell.sym-BONUS .glyph::after {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  font-size: 8px; font-weight: 900; letter-spacing: .03em; line-height: 1.3; padding: 1px 5px; border-radius: 6px;
  white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.55); }
body[data-theme="candy"] .cell.sym-SCATTER .glyph::after { content: "SCATTER"; background: linear-gradient(#bff4ff, #34e0ff); color: #042530; }
body[data-theme="candy"] .cell.sym-BONUS .glyph::after { content: "BONUS"; background: linear-gradient(#ffe9a6, var(--gold)); color: #5a1d00; }

/* 固定高度動作區：撐住「翻倍鈕 / 免費旋轉文字」其一的空間（兩者不同時出現）→ 高度固定、SPIN 不跳動。
   拿掉「贏得 N！」後只需一排高度，縮小與盤面的間距。 */
.action-zone { min-height: 44px; margin-top: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; }
.win-banner { text-align: center; margin: 0; font-size: 17px; font-weight: 700;
  color: var(--win); text-shadow: 0 0 10px rgba(255,225,105,.5); }
.win-banner:empty { display: none; }   /* 空時不佔行，避免把翻倍鈕往下推 */

/* ---- 大獎全螢幕特效 overlay（BIG / MEGA / EPIC WIN）---- */
.win-overlay { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .25s; background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.55), rgba(0,0,0,.82)); }
.win-overlay.show { opacity: 1; visibility: visible; }
.wo-tier { font-size: clamp(40px, 13vw, 90px); font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(90deg, var(--gold), #fff, var(--gold)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 24px var(--gold)); animation: woPop .5s ease; }
.wo-amt { font-size: clamp(26px, 8vw, 52px); font-weight: 900; color: #fff; text-shadow: 0 0 18px var(--win); animation: woRise .6s ease; }
.win-overlay.tier-mega .wo-tier { background: linear-gradient(90deg, #ff3df0, #36e0ff, #ffd24a); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 26px #ff3df0); }
.win-overlay.tier-epic .wo-tier { background: linear-gradient(90deg, #ff3df0, #7a5cff, #36e0ff, #ffd24a); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 30px #7a5cff); animation: woPop .5s ease, woShake .6s ease .5s; }
@keyframes woPop { 0%{transform:scale(.3);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }
@keyframes woRise { 0%{transform:translateY(20px);opacity:0} 100%{transform:translateY(0);opacity:1} }
@keyframes woShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

/* ---- 控制列（直版置底一排）---- */
.control-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
/* ---- 單注 +/- stepper ---- */
.bet-stepper { display: flex; align-items: center; gap: 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 8px; }
.bet-label { color: var(--text-soft); font-size: 13px; padding-left: 6px; }
.bet-btn { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--surface); color: var(--text); font-size: 20px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.bet-btn:hover:not(:disabled) { background: var(--neon-2); color: #08101a; }
.bet-btn:disabled { opacity: .35; cursor: not-allowed; }
.bet-value { min-width: 64px; text-align: center; font-size: 17px; font-weight: 800; color: var(--gold); }
.btn-spin { background: linear-gradient(135deg, var(--neon), var(--neon-2)); color: #0a0c16;
  border: none; padding: 14px 40px; border-radius: 999px; font-size: 18px; font-weight: 800;
  cursor: pointer; letter-spacing: 1px; box-shadow: 0 6px 20px rgba(54,224,255,.35); }
.btn-spin:disabled { opacity: .5; cursor: not-allowed; }

.paytable-card { width: 360px; max-width: calc(100vw - 32px); max-height: 80vh; overflow-y: auto; }
.paytable h4 { margin: 0 0 10px; color: var(--text-soft); }
table.pt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.pt th, table.pt td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--border); }
table.pt th { color: var(--text-soft); font-weight: 600; }
.fs-note { font-size: 12px; color: var(--neon-2); margin-top: 10px; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center;
  justify-content: center; z-index: 30; }
.modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px; width: 320px; position: relative; }
.modal-card h3 { margin: 0 0 8px; }
.modal-card .hint { font-size: 12px; color: var(--text-soft); }
.modal-card input { width: 100%; margin: 8px 0; padding: 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.modal-actions { display: flex; gap: 10px; margin-top: 6px; }
.modal-close { position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: var(--text-soft); font-size: 22px; cursor: pointer; }
.acc-msg { font-size: 13px; color: var(--neon-2); min-height: 18px; margin: 10px 0 0; }
.newguest-btn { width: 100%; margin-top: 10px; border-color: var(--neon-2); color: var(--neon-2); }
.newguest-btn:hover { background: var(--neon-2); color: #08101a; }

/* ---- 遊戲內小圖示（標題前）---- */
.title-emoji { font-size: 22px; vertical-align: -2px; }

/* ---- 該款完成日期（SPIN 下方）---- */
.game-completed { text-align: center; color: var(--text-mute, #8b91a3); font-size: 12px; letter-spacing: .3px; margin: 14px 0 4px; }
/* 遊戲內資訊列：波動 / 最大賠付 / 核心玩法 */
.game-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 10px; }
.game-info:empty { display: none; }
.gi-chip { font-size: 11.5px; font-weight: 600; color: var(--text-soft, #c7ccda);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.gi-vol { color: #ffcf7a; border-color: rgba(255,207,122,.3); }
.gi-max { color: var(--gold, #ffd24a); border-color: rgba(255,210,74,.3); }
.gi-core { color: #8fd3ff; border-color: rgba(143,211,255,.28); }

/* ---- 注單號（名字和盤面中間）---- */
/* 固定寬度 + monospace tabular，單號變動或在「—」之間切換時不會左右跳動 */
.spin-ticket { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 10px; }
.st-label { font-size: 12px; color: var(--text-soft); letter-spacing: 1px; white-space: nowrap; }
.st-no { font-family: "JetBrains Mono", "SF Mono", Consolas, monospace; font-size: 13px; font-weight: 700;
  color: var(--gold); letter-spacing: .5px; font-variant-numeric: tabular-nums;
  min-width: 210px; text-align: center; padding: 4px 10px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-copy { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; line-height: 1;
  font-size: 15px; background: var(--surface); color: var(--text-soft); border: 1px solid var(--border);
  transition: background .15s, color .15s, transform .12s; }
.st-copy:hover:not(:disabled) { background: var(--neon-2); color: #08101a; border-color: var(--neon-2); }
.st-copy:disabled { opacity: .4; cursor: not-allowed; }
.st-copy.copied { background: var(--get, #16a34a); color: #fff; border-color: var(--get, #16a34a); transform: scale(1.08); }

/* ---- 本局贏分計量區 ---- */
.win-meter { display: flex; align-items: center; justify-content: space-around; gap: 10px; margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(255,210,74,.08), transparent); border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 14px; }
/* [Claude Code 2026-06-29] 盤面正上方一排：本局贏分 + 餘額（玩遊戲時餘額好找）*/
.wm-group { display: flex; align-items: center; gap: 8px; }
.wm-balance { border-left: 1px solid var(--border); padding-left: 16px; }
.wm-balance .wm-value { color: var(--gold, #ffd24a); }
.wm-label { font-size: 12px; color: var(--text-soft); letter-spacing: 1px; }
.wm-value { font-size: 24px; font-weight: 900; color: var(--win); text-shadow: 0 0 10px rgba(255,225,105,.4);
  font-variant-numeric: tabular-nums; }
.wm-value.bump { animation: wmBump .3s ease; }
@keyframes wmBump { 0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)} }
/* [Claude Code 2026-06-29] 領獎慶祝彈窗（任務/升級領取）—— 中央金幣 + 標籤 + 金額，彈起放大再淡出 */
.reward-burst { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 120;
  text-align: center; pointer-events: none; animation: rbPop 1.6s ease forwards; }
.reward-burst .rb-coins { font-size: 40px; letter-spacing: 6px; animation: rbCoins 1.6s ease forwards; }
.reward-burst .rb-label { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: 1px; margin-top: 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.reward-burst .rb-amt { font-size: 40px; font-weight: 900; color: var(--gold, #ffd24a);
  text-shadow: 0 0 16px rgba(255,210,74,.8), 0 2px 6px rgba(0,0,0,.6); font-variant-numeric: tabular-nums; }
@keyframes rbPop { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.5); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  30% { transform: translate(-50%, -50%) scale(1); } 78% { opacity: 1; transform: translate(-50%, -54%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(.95); } }
@keyframes rbCoins { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-8px); } 60% { transform: translateY(2px); } }

/* ---- AUTO 按鈕 ---- */
.auto-btn.auto-on { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 12px rgba(255,61,240,.4); }

/* ---- modal 表單欄位（AUTO 設定）---- */
.field { display: block; color: var(--text-soft); font-size: 14px; margin: 10px 0 4px; }
.field select { margin-left: 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 8px; font-size: 14px; }
.field-title { color: var(--text-soft); font-size: 13px; margin: 14px 0 6px; }
.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; margin: 8px 0; }
.check input[type="number"] { background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 6px; margin: 0 4px; }

/* ---- 翻倍按鈕（中獎後亮起，opt-in）---- */
.gamble-btn { display: block; margin: 0; padding: 9px 22px; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 800; color: #2a1d00; border: none;
  background: linear-gradient(135deg, #ffe9a6, var(--gold)); box-shadow: 0 0 0 0 rgba(255,210,74,.6); }
.gamble-btn.armed { animation: gPulse 1.3s ease-in-out infinite; }
@keyframes gPulse { 0%,100%{ box-shadow: 0 0 10px 0 rgba(255,210,74,.5); } 50%{ box-shadow: 0 0 20px 6px rgba(255,210,74,.35); transform: scale(1.03); } }

/* ---- 翻倍玩法視窗 ---- */
.gamble-card { width: 330px; text-align: center; }
.gamble-stake { font-size: 16px; color: var(--text); margin: 4px 0; }
.gamble-stake span { color: var(--win); font-weight: 900; font-size: 22px; }
.gamble-board { position: relative; margin: 16px 0 4px; }
.gamble-choices { display: flex; gap: 14px; }
.gamble-color { flex: 1; padding: 20px 0; border-radius: 14px; border: 2px solid var(--border); cursor: pointer;
  font-size: 26px; color: #fff; transition: transform .12s, box-shadow .15s; }
.gamble-color span { display: block; font-size: 14px; font-weight: 800; margin-top: 2px; }
.gamble-color.red { background: linear-gradient(160deg, #ff5b6d, #c81e3a); }
.gamble-color.black { background: linear-gradient(160deg, #3a3f52, #14171f); }
.gamble-color:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.gamble-color:disabled { opacity: .5; cursor: not-allowed; }
/* 揭曉反饋：大 ✓×2 / ✗ + 綠/紅徑向閃光，蓋在選色上 */
.gamble-reveal { position: absolute; inset: -6px; display: flex; align-items: center; justify-content: center;
  border-radius: 16px; font-size: 46px; font-weight: 900; opacity: 0; visibility: hidden; pointer-events: none; }
.gamble-reveal.show { opacity: 1; visibility: visible; animation: gReveal .4s ease; }
.gamble-reveal.win { color: #aef5c0; background: radial-gradient(circle, rgba(46,230,166,.45), rgba(46,230,166,.05) 70%);
  text-shadow: 0 0 18px #2ee6a6; }
.gamble-reveal.lose { color: #ffb3b3; background: radial-gradient(circle, rgba(255,77,109,.45), rgba(255,77,109,.05) 70%);
  text-shadow: 0 0 18px #ff4d6d; }
@keyframes gReveal { 0%{ transform: scale(.4); opacity: 0; } 60%{ transform: scale(1.15); } 100%{ transform: scale(1); opacity: 1; } }
/* 開牌路單 */
.gamble-trail { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.gt-label { font-size: 12px; color: var(--text-mute, #8b91a3); }
.gt-dots { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.g-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.g-dot.red { background: #ff4d6d; } .g-dot.black { background: #6b7280; }
.gt-empty { font-size: 12px; color: var(--text-soft); }
.g-tally { font-size: 12px; color: var(--text-soft); margin-left: 4px; }

/* ---- Hold & Win 鎖幣重轉 ---- */
/* 金幣符號（COIN）：金色光暈，holdwin 款的核心符號 */
.cell.sym-COIN .glyph { filter: drop-shadow(0 0 8px rgba(255,210,74,.85)); }
.cell.sym-COIN { background: radial-gradient(circle at 50% 45%, rgba(255,210,74,.22), transparent 70%); }
/* 鎖定金幣：金框 + 面額徽章 */
.cell.hw-lock { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(255,210,74,.5); border-radius: 8px; }
.cell.hw-lock.hw-pop { animation: hwPop .35s ease; }
@keyframes hwPop { 0%{ transform: scale(.4); opacity:.2; } 60%{ transform: scale(1.18); } 100%{ transform: scale(1); opacity:1; } }
.hw-val { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  background: linear-gradient(135deg, #ffe9a6, var(--gold)); color: #2a1d00;
  font-size: 11px; font-weight: 900; padding: 1px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgba(0,0,0,.4); white-space: nowrap; z-index: 6; }
/* 重轉中：未鎖定（空）格「靜態」變暗 → 讓鎖定金幣明顯突出（不再無意義一直閃）。 */
.cell.hw-dim { opacity: .28; filter: grayscale(.5); transition: opacity .2s; }
/* 落新幣前：該空格一次性快閃一下（不是無限），暗示「這格在轉」。 */
.cell.hw-spin { animation: hwSpin .45s ease; }
@keyframes hwSpin { 0%{ filter: brightness(.5); } 50%{ filter: brightness(1.5); } 100%{ filter: brightness(1); } }
/* HUD（重轉次數 + 收集總額）覆在盤面上方 */
.hw-hud { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 14px; padding: 7px 18px; border-radius: 999px;
  background: rgba(8,16,26,.9); border: 1px solid var(--gold); box-shadow: 0 4px 16px rgba(0,0,0,.6);
  backdrop-filter: blur(3px); white-space: nowrap; }
.hw-title { font-size: 12px; font-weight: 900; color: var(--gold); letter-spacing: 1px; }
.hw-respins { font-size: 13px; color: var(--text); }
.hw-respins span { font-weight: 900; color: var(--neon-2); font-size: 18px; display: inline-block; min-width: 14px; text-align: center; }
/* 落新幣 → 重轉次數重置，數字跳一下（讓玩家看出「重置了」）。 */
.hw-respins span.reset { animation: hwReset .5s ease; color: var(--gold); }
@keyframes hwReset { 0%{ transform: scale(2); text-shadow: 0 0 14px var(--gold); } 100%{ transform: scale(1); } }
.hw-collect { font-size: 15px; font-weight: 900; color: var(--win); font-variant-numeric: tabular-nums; }
.hw-collect.bump { animation: wmBump .3s ease; }

/* ---- Candy 消除掉落（scatter-pays），三段表演：高亮 → 消除露空格 → 掉落補位 ---- */
/* 1) 中獎符「閃爍」（持續一閃一閃，停一下讓玩家看清中了什麼） */
.cell.cs-win { z-index: 4; }
.cell.cs-win .glyph { animation: csWin .34s ease-in-out infinite alternate; }
@keyframes csWin { from{ transform: scale(1); filter: none; } to{ transform: scale(1.2); filter: brightness(1.75) drop-shadow(0 0 11px var(--win)); } }
/* 2) 消除（放大一下再縮成 0 + 淡出，露出空格） */
.cell.cs-clear .glyph { animation: csClear .3s ease forwards; }
@keyframes csClear { 0%{ transform: scale(1.2); opacity: 1; filter: brightness(1.75); } 35%{ transform: scale(1.4); opacity: 1; } 100%{ transform: scale(0); opacity: 0; } }
/* 3) 掉落補位：survivor 從原位往下掉、新符從盤面上方掉入。距離用 --drop-from（px，負=從上方）。 */
.cell.cs-drop .glyph { animation: csDrop var(--drop-ms, 520ms) cubic-bezier(.33,1.06,.5,1) both; }
@keyframes csDrop { from{ transform: translateY(var(--drop-from, -100%)); opacity: .35; } to{ transform: translateY(0); opacity: 1; } }
/* 倍率糖面值徽章（免費期） */
.cs-bombv { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: linear-gradient(135deg, #fff0a6, var(--gold)); color: #7a1d6b;
  font-size: 13px; font-weight: 900; padding: 2px 8px; border-radius: 999px;
  border: 2px solid #fff; box-shadow: 0 0 10px rgba(255,210,74,.8); z-index: 6; white-space: nowrap; }
.cell.cs-bombfire { animation: csBombFire .6s ease infinite; }
@keyframes csBombFire { 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.8) drop-shadow(0 0 10px var(--gold)); } }

/* ---- Ways / Megaways 變動高度盤面 ---- */
.board.ways-board { display: flex !important; gap: 5px; align-items: center; justify-content: center; }
.ways-reel { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.ways-cell { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border-radius: 8px; left: auto; right: auto; top: auto; }
/* 消除掉落款（ways / cluster）：WILD/SCATTER 的框做在 .glyph 上（不是 .cell）→ 掉落時框跟符號一起動、不分離、不被裁。 */
.ways-cell.sym-WILD::before, .ways-cell.sym-WILD::after,
.ways-cell.sym-SCATTER::before, .ways-cell.sym-SCATTER::after,
.clus-cell.sym-WILD::before, .clus-cell.sym-WILD::after,
.clus-cell.sym-SCATTER::before, .clus-cell.sym-SCATTER::after { display: none; }
.ways-cell.sym-WILD .glyph, .ways-cell.sym-SCATTER .glyph,
.clus-cell.sym-WILD .glyph, .clus-cell.sym-SCATTER .glyph { box-sizing: border-box; font-size: .78em; padding: 6px; border-radius: 11px; }
.ways-cell.sym-WILD .glyph, .clus-cell.sym-WILD .glyph { box-shadow: inset 0 0 0 2.5px var(--gold), 0 0 7px rgba(255,210,74,.55); }
.ways-cell.sym-SCATTER .glyph, .clus-cell.sym-SCATTER .glyph { box-shadow: inset 0 0 0 2.5px #34e0ff, 0 0 7px rgba(52,224,255,.55); }
.ways-cell.sym-WILD .glyph::after, .ways-cell.sym-SCATTER .glyph::after,
.clus-cell.sym-WILD .glyph::after, .clus-cell.sym-SCATTER .glyph::after {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  font-size: 8px; font-weight: 900; letter-spacing: .03em; line-height: 1.3; padding: 1px 5px; border-radius: 6px;
  white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.55); }
.ways-cell.sym-WILD .glyph::after, .clus-cell.sym-WILD .glyph::after { content: "WILD"; background: linear-gradient(#ffe9a6, var(--gold)); color: #2a1d00; }
.ways-cell.sym-SCATTER .glyph::after, .clus-cell.sym-SCATTER .glyph::after { content: "SCATTER"; background: linear-gradient(#bff4ff, #34e0ff); color: #042530; }

/* ---- Cluster 群落消除（N×N CSS grid）---- */
.board.clus-board { display: grid !important; gap: 4px; justify-content: center; }
.clus-cell { position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border-radius: 8px; left: auto; right: auto; top: auto; }

/* ---- 轉盤 Bonus overlay ---- */
.wheel-overlay { position: absolute; inset: 0; z-index: 20; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(circle at 50% 40%, rgba(40,10,50,.92), rgba(8,8,20,.96));
  border-radius: 14px; padding: 16px; }
.wheel-overlay.show { display: flex; animation: lineIn .3s ease; }
.wheel-title { font-size: 20px; font-weight: 900; color: var(--gold); letter-spacing: 1px;
  text-shadow: 0 0 16px rgba(255,210,74,.7); }
/* 圓形轉盤：旋轉圓盤（conic 分段）+ 固定指針 + 中心軸 */
.wheel-circle { position: relative; width: 248px; height: 248px; max-width: 80vw; max-height: 80vw; }
.wheel-disc { position: absolute; inset: 0; border-radius: 50%;
  border: 5px solid var(--gold); box-shadow: 0 0 26px rgba(255,210,74,.5), inset 0 0 22px rgba(0,0,0,.45);
  transform: rotate(0deg); will-change: transform; }
.wheel-label { position: absolute; top: 50%; left: 50%; font-size: 12px; font-weight: 900;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.85); white-space: nowrap; pointer-events: none;
  transition: filter .2s ease; }
.wheel-label.win { filter: drop-shadow(0 0 7px var(--win)) brightness(1.25); font-size: 13px; }
.wheel-hub { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 40% 35%, #ffe9a6, var(--gold) 55%, #8a5a00);
  border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.wheel-pointer { position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent;
  border-top: 24px solid var(--win); z-index: 4; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.wheel-result { font-size: 22px; font-weight: 900; color: var(--win); min-height: 28px;
  text-shadow: 0 0 14px rgba(255,225,105,.6); }

/* ---- 開寶箱 Pick-em overlay（bothways 款）---- */
.pickme-overlay { position: absolute; inset: 0; z-index: 20; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(circle at 50% 35%, rgba(16,46,40,.94), rgba(6,10,18,.97));
  border-radius: 14px; padding: 16px; }
.pickme-overlay.show { display: flex; animation: lineIn .3s ease; }
.pickme-title { font-size: 20px; font-weight: 900; color: var(--gold); letter-spacing: 1px;
  text-shadow: 0 0 16px rgba(255,210,74,.7); }
.pickme-sub { font-size: 13px; color: var(--text-soft); }
.pickme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; max-width: 320px; }
.pickme-chest { aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: var(--surface-2); border: 2px solid var(--border); cursor: default;
  transition: transform .12s ease; }
.pickme-chest.opening { transform: scale(1.14); box-shadow: 0 0 16px var(--gold); border-color: var(--gold); }
.pickme-chest.prize { background: linear-gradient(135deg, rgba(212,160,23,.28), rgba(31,138,112,.2));
  border-color: var(--gold); }
.pickme-chest .pc-val { font-size: 12px; font-weight: 900; color: var(--gold); }
.pickme-chest.end { background: linear-gradient(135deg, rgba(220,40,60,.4), rgba(40,8,14,.6));
  border-color: #ff5d6d; box-shadow: 0 0 18px rgba(255,93,109,.7); }
.pickme-collect { font-size: 22px; font-weight: 900; color: var(--win); min-height: 28px;
  text-shadow: 0 0 14px rgba(255,225,105,.6); }
.pickme-collect.bump { animation: wmBump .3s ease; }

/* ---- 淨化光稜：光稜發光 / 雜符被射閃光（mechanic=laser，重用 cs-* 掉落視覺）---- */
.cell.lp-laser { box-shadow: inset 0 0 16px rgba(54,224,255,.85), 0 0 14px rgba(54,224,255,.6); border-radius: 8px; z-index: 4; }
.cell.lp-laser .glyph { animation: lpLaser .42s ease infinite alternate; filter: drop-shadow(0 0 12px #36e0ff); }
.cell.lp-hit { animation: lpHit .32s ease; box-shadow: inset 0 0 14px rgba(255,95,120,.9); border-radius: 8px; }
@keyframes lpLaser { from { transform: scale(1); } to { transform: scale(1.22); } }
@keyframes lpHit { 0% { filter: brightness(1); } 45% { filter: brightness(2.3) drop-shadow(0 0 9px #fff); } 100% { filter: brightness(1); } }
/* 光稜連線（SVG polyline，畫在 #lineLayer）：虛線 —— 青色光暈 + 白色芯，柔和淡入 */
/* [Claude Code 2026-06-28] 閃電由實線改虛線（stroke-dasharray）*/
.bolt { fill: none; stroke: #36e0ff; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 7 6; filter: drop-shadow(0 0 5px #36e0ff); opacity: .85; animation: boltFade .3s ease both; }
.bolt-core { fill: none; stroke: #ffffff; stroke-width: 1.3; stroke-linecap: round;
  stroke-dasharray: 7 6; opacity: .9; animation: boltFade .3s ease both; }
@keyframes boltFade { from { opacity: 0; } to { opacity: .88; } }

/* ---- 無盡星河 Infinity：橫向可變軸數盤面 ---- */
.board.inf-board { display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 5px; overflow-x: hidden; padding: 4px 2px; }
.inf-reel { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
/* ⚠️ 必須覆寫基礎 .cell 的 position:absolute（否則格子全疊在 top:0、reel 高度塌掉只剩一格）—— 比照 .ways-cell/.clus-cell */
.cell.inf-cell { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.inf-reel.inf-grow { animation: infGrow .34s cubic-bezier(.2,.8,.25,1) both; }
@keyframes infGrow { 0% { opacity: 0; transform: translateX(22px) scale(.7); } 100% { opacity: 1; transform: none; } }

/* ---- 中獎連線高亮（SVG 蓋層）---- */
.board-wrap { position: relative; }
.line-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.win-line { fill: none; stroke: var(--win); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--win)); opacity: .92; animation: lineIn .4s ease; }
@keyframes lineIn { from { opacity: 0; } to { opacity: .92; } }

/* ---- near-miss 期待停軸（差一個 scatter 就觸發）---- */
.reel.anticipate { animation: anticPulse .5s ease-in-out infinite; z-index: 3; }
@keyframes anticPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(52,224,255,.5); } 50%{ box-shadow: 0 0 22px 4px rgba(52,224,255,.55); } }
.board-wrap.anticipating .reel:not(.anticipate) { filter: brightness(.5); transition: filter .25s; }

/* ---- TURBO 加速鈕 ---- */
.turbo-btn.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px rgba(255,210,74,.5); }

/* ---- 按下 SPIN 立即回饋 ---- */
.btn-spin.pressed { transform: scale(.95); filter: brightness(1.12); }

/* ---- AUTO 下接面板（取代彈窗）---- */
.auto-wrap { position: relative; }
.auto-panel { position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 25;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); width: 220px; }
.auto-panel::after { content: ""; position: absolute; bottom: -7px; right: 28px; width: 12px; height: 12px;
  background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }
.ap-label { display: block; font-size: 12px; color: var(--text-soft); margin-bottom: 6px; }
.auto-panel select { width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.ap-start { width: 100%; margin-top: 10px; padding: 10px 0; border: none; border-radius: 999px; cursor: pointer;
  font-weight: 800; color: #0a0c16; background: linear-gradient(135deg, var(--neon), var(--neon-2)); }

/* ---- 任務 / 等級 ---- */
.meta-btn { position: relative; }
.meta-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%;
  background: #ff4d6d; box-shadow: 0 0 6px #ff4d6d; }
.meta-card { width: 360px; max-width: calc(100vw - 32px); }
.meta-sec { margin-bottom: 18px; }
.meta-sec-head { font-weight: 800; color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.meta-sub { font-size: 12px; color: var(--text-soft); font-weight: 400; margin-left: auto; }
.lvl-badge { background: linear-gradient(135deg, var(--neon), var(--neon-2)); color: #0a0c16; font-weight: 900;
  padding: 2px 10px; border-radius: 999px; font-size: 13px; }
.lvl-bar { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.lvl-fill { height: 100%; background: linear-gradient(90deg, var(--neon), var(--neon-2)); transition: width .4s ease; }
.lvl-exp { font-size: 12px; color: var(--text-soft); text-align: right; margin: 4px 0 8px; }
.meta-claim { width: 100%; padding: 9px 0; border: none; border-radius: 10px; cursor: pointer; font-weight: 800;
  color: #2a1d00; background: linear-gradient(135deg, #ffe9a6, var(--gold)); }
.meta-claim:disabled { background: var(--surface-2); color: var(--text-mute, #8b91a3); cursor: not-allowed; }
.miss-list { display: flex; flex-direction: column; gap: 8px; }
.miss-row { display: flex; align-items: center; gap: 10px; }
.miss-info { flex: 1; }
.miss-need { font-size: 12px; color: var(--text-soft); margin-bottom: 3px; }
.miss-bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.miss-fill { height: 100%; background: linear-gradient(90deg, var(--neon-2), var(--neon)); }
.miss-claim { min-width: 62px; padding: 7px 10px; border: none; border-radius: 8px; cursor: pointer; font-weight: 800; font-size: 13px;
  color: #2a1d00; background: linear-gradient(135deg, #ffe9a6, var(--gold)); }
.miss-claim:disabled { background: var(--surface-2); color: var(--text-soft); cursor: not-allowed; }
.miss-claim.done { background: transparent; border: 1px solid var(--border); color: var(--get, #16a34a); }
.miss-step { color: var(--text-mute, #8b91a3); font-size: 11px; }
.miss-done-all { text-align: center; color: var(--get, #16a34a); font-weight: 700; padding: 10px 0; }

/* ---- 升級獎勵逐筆列（每筆標明等級、可個別領）---- */
.lvl-claims { display: flex; flex-direction: column; gap: 8px; }
.lvl-claim-none { color: var(--text-mute, #8b91a3); font-size: 13px; padding: 6px 2px; }
.lvl-claim-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.lcr-label { flex: 1; font-weight: 700; color: var(--text); font-size: 13.5px; }
.lcr-btn { min-width: 92px; padding: 8px 12px; border: none; border-radius: 8px; cursor: pointer; font-weight: 800; font-size: 13px;
  color: #2a1d00; background: linear-gradient(135deg, #ffe9a6, var(--gold)); }
.lcr-btn:hover { filter: brightness(1.05); }

/* ---- 賠付 / 玩法 分頁 ---- */
.pt-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.pt-tab { flex: 1; padding: 8px 0; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-soft); border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; }
.pt-tab.active { background: var(--neon-2); color: #08101a; border-color: var(--neon-2); }
.rule-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rule-t { font-weight: 700; color: var(--text); font-size: 13.5px; }
.rule-d { color: var(--text-soft); font-size: 13px; line-height: 1.55; }

/* ==== 賓果（lucky_bingo）：波動檔選擇 + 5×5 卡 + 開球托盤 ==== */
/* [Claude Code 2026-07-06] 底座是輪盤機器，賓果自成一路渲染，這整段是賓果專屬。 */

/* 波動檔選擇（保守 / 標準 / 衝刺）*/
.bingo-tiers { display: flex; gap: 8px; margin: 4px 0 10px; }
.bingo-tier { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer;
  background: var(--surface-2); color: var(--text-soft); transition: transform .1s, box-shadow .15s, border-color .15s; }
.bingo-tier:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--neon-2); }
.bingo-tier:disabled { opacity: .55; cursor: default; }
.bingo-tier.sel { border-color: var(--neon-2); color: var(--text);
  background: linear-gradient(135deg, rgba(91,139,255,.28), rgba(176,107,255,.22));
  box-shadow: 0 0 0 1px var(--neon-2), 0 4px 16px rgba(91,139,255,.35); }
.bingo-tier .bt-name { font-weight: 800; font-size: 14px; }
.bingo-tier .bt-draw { font-size: 11px; opacity: .85; }

/* 5×5 賓果卡 */
.board.bingo-board { display: grid; gap: 6px; padding: 8px; aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, #1a1f3a, #141830); border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--border); }
.bingo-cell { position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: #10132a; box-shadow: inset 0 0 0 1px #262c4c;
  font-weight: 800; font-size: clamp(14px, 5vw, 26px); color: var(--text);
  transition: transform .12s, background .18s, box-shadow .18s; user-select: none; }
.bingo-cell .bc-num { transition: color .18s; }
.bingo-cell.free { color: var(--gold); background: linear-gradient(160deg, #2a2340, #1c1832);
  box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 10px rgba(255,210,74,.3); }
.bingo-cell.free .bc-free { font-size: 1.1em; text-shadow: 0 0 8px rgba(255,210,74,.7); }
/* 標記態：開球命中 */
.bingo-cell.marked { background: linear-gradient(160deg, #24407a, #1c3060);
  box-shadow: inset 0 0 0 1.5px var(--neon), 0 0 10px rgba(91,139,255,.4); color: #eaf1ff;
  animation: bingoMark .3s ease; }
@keyframes bingoMark { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
/* 命中金球 */
.bingo-cell.gold { background: linear-gradient(160deg, #4a3a12, #6a4e14);
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(255,210,74,.6); color: #fff3c8; }
.bingo-cell.gold::after { content: "🟡"; position: absolute; top: 2px; right: 3px; font-size: .5em; }
/* 完成線內的格：外光暈脈動 */
.bingo-cell.in-line { box-shadow: inset 0 0 0 2px var(--win), 0 0 16px rgba(255,225,105,.55);
  animation: bingoLine 1s ease-in-out infinite alternate; z-index: 2; }
@keyframes bingoLine { from { box-shadow: inset 0 0 0 2px var(--win), 0 0 8px rgba(255,225,105,.4); }
  to { box-shadow: inset 0 0 0 2px var(--win), 0 0 20px rgba(255,225,105,.8); } }

/* 開球托盤 */
.bingo-tray { margin-top: 10px; padding: 10px; border-radius: 12px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.bt-current-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bt-current-label { font-size: 12px; color: var(--text-soft); font-weight: 700; }
.bt-current { min-width: 46px; height: 46px; padding: 0 6px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 22px;
  color: #08101a; background: radial-gradient(circle at 35% 30%, #cfe0ff, #7ea3ff);
  box-shadow: 0 3px 10px rgba(91,139,255,.5); }
.bt-current .bball.gold { color: #4a2f00; }
.bt-current .bball { position: relative; display: inline-flex; align-items: center; }
.bt-current .bb-gold { font-size: 11px; margin-left: 2px; color: #7a4f00; font-weight: 800; }
.bt-stat { flex: 1; text-align: right; font-size: 13px; color: var(--text-soft); }
.bt-stat b { color: var(--win); font-size: 15px; }
/* 已開球列 */
.bt-drawn { display: flex; flex-wrap: wrap; gap: 4px; max-height: 74px; overflow-y: auto; }
.bd-chip { min-width: 22px; height: 22px; padding: 0 4px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: #10132a; color: var(--text-soft); box-shadow: inset 0 0 0 1px #2a3050; }
.bd-chip.hit { background: #24407a; color: #eaf1ff; box-shadow: inset 0 0 0 1px var(--neon); }
.bd-chip.gold { background: #6a4e14; color: #fff3c8; box-shadow: inset 0 0 0 1px var(--gold); }

/* 賓果賠付表小標 */
.bingo-pt-head { margin-top: 12px !important; color: var(--neon-2); }