/* L070: dimensions and timing belong to Claude Code. */
:root{
  --t-beat:448ms;
  --t-reveal-col:224ms;
  --t-reel-loop:800ms;
  --t-reveal-col-slow:896ms;
  --t-cascade:560ms;
  --t-link-draw:224ms;
  --t-mult-pop:224ms;
  --t-rollup-small:672ms;
  --t-rollup-mid:2016ms;
  --t-rollup-big:3584ms;
  --t-celebrate:4032ms;
  --t-free-in:2240ms;
  --t-boss-enter:1333ms;
  --t-boss-exit:1000ms;
  --t-pick-reveal:896ms;
  --t-cast-swap:224ms;
  --t-cast-stagger:112ms;
  /* palette defaults:start */
  --c-bg-1:#5FBFAA;--c-bg-2:#F3EEDC;--c-accent:#5FBFAA;--c-win-1:#FFC53D;--c-win-2:#E8553E;--c-text:#16322B;
  /* palette defaults:end */
  /* 螢幕 1% 高／寬，兩種方向都用實際視窗尺寸。 */
  --vh:calc(var(--vp-h,100dvh) / 100);--vw:calc(var(--vp-w,100dvw) / 100);
  color-scheme:light;
  font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;
  color:var(--c-text);background:var(--c-bg-2);
}
*{box-sizing:border-box}
/* Safari 26 工具列底下畫的是 html 的背景：撐到最大視窗高，各主題 skin 把背景圖也掛在 html。 */
html{min-height:100lvh}
:root[data-game]{background-color:var(--c-bg-2)}
/* 深色輪替（app.mjs rotateMood 掛 data-mood=dark）：深色素材到位前先把現有背景壓暗、盤面換深底。
   html 那層（工具列底下）用 multiply 一起壓暗。 */
.bg-art::before{content:"";position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .8s}
:root:has(.stage[data-mood=dark]){background-color:#3a3a44;background-blend-mode:multiply}
.stage[data-mood=dark] .board{background:radial-gradient(ellipse at 50% 40%,#2a3346,#121826)}
body{margin:0}
button{font:inherit;color:inherit;touch-action:manipulation}
[hidden]{display:none!important}
.stage{
  --safe-x:max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --safe-b:env(safe-area-inset-bottom,0px);
  --bar-h:clamp(40px,calc(11 * var(--vh)),64px);
  --gap-b:calc(8px + var(--safe-b));
  --usable-w:calc(calc(100 * var(--vw)) - 2 * var(--safe-x));
  --board:min(calc(calc(100 * var(--vh)) - var(--gap-b)),calc(var(--usable-w) * 0.58));
  --cell:calc(var(--board) / 6);
  --side:calc((var(--usable-w) - var(--board)) / 2);
  --fs-win:max(20px,calc(var(--cell) * 0.46));
  --fs-credit:max(15px,calc(var(--cell) * 0.30));
  --fs-jp-amt:max(12px,calc(var(--cell) * 0.24));
  --fs-label:max(11px,calc(var(--cell) * 0.18));
  --fs-btn:max(13px,calc(var(--cell) * 0.26));
  position:relative;isolation:isolate;display:grid;
  grid-template-columns:var(--side) var(--board) var(--side);
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"left board right";
  align-content:center;min-height:calc(100 * var(--vh));height:calc(100 * var(--vh));
  padding-inline:var(--safe-x);padding-block-end:var(--gap-b);overflow:hidden;
}
/* 背景鋪滿整個螢幕（含工具列／網址列底下），舞台比螢幕小時不露底色（使用者：全螢幕下方、左右留白）。 */
.bg-art{position:fixed;top:0;left:0;width:100vw;height:max(100lvh,100%);z-index:0;background:radial-gradient(ellipse at 50% 10%,color-mix(in srgb,var(--c-bg-1) 55%,white),transparent 70%),linear-gradient(120deg,var(--c-bg-1),var(--c-bg-2) 50%,var(--c-bg-1))}
.char-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Player uses unscaled source-pixel background positions: scale the whole slot. */
.char{position:absolute;background-repeat:no-repeat;transform-origin:bottom center}
.char--cast{width:260px;height:390px;bottom:var(--gap-b);scale:clamp(.42,calc(var(--side) / 260px),.9);opacity:.65}
.char--cast[data-slot=left]{left:calc(var(--safe-x) + var(--side) / 2 - 130px)}
.char--cast[data-slot=right]{right:calc(var(--safe-x) + var(--side) / 2 - 130px)}
/* 角色圖集一律面朝右；右邊的位子鏡像，兩邊都轉向盤面 */
.char--cast[data-slot=right]{transform:scaleX(-1)}
.char__sheet{position:absolute;inset:0;width:100%;height:100%}
.char[data-vid]>.char__sheet{visibility:hidden}
[data-game] .char[data-sheet]:not([data-state=awe]){filter:none}   /* 陰影已畫進畫布（characters.mjs bakeShadow），外層濾鏡關掉：每換一格重做模糊太貴 */
.char--cast[data-state=awe]{filter:brightness(.5) saturate(.3);translate:0 8px}
.char--boss{width:640px;height:640px;left:calc(50% - 320px);bottom:var(--gap-b);scale:calc(var(--board) / 640px)}
/* 手機實測：魔王被盤面外框蓋住。魔王在場時角色層不再自成一層，只把魔王抬到外框（3）之上，兩側角色留在面板底下 */
.stage:has(.char--boss:not([hidden])) .char-layer:not([style*=z-index]){z-index:auto}
.stage:has(.char--boss:not([hidden])) .char--cast{z-index:1}
.char--boss{z-index:4}
.char--boss[data-state=loom]:not([data-vid]),.char--boss[data-state=exit]{visibility:hidden}   /* 影片播完不留半透明魔王（使用者 2026-09-30：拿掉） */
.char--boss[data-state=enter]{animation:boss-enter var(--t-boss-enter) ease-out both}
.char--boss[data-state=exit]{animation:boss-exit var(--t-boss-exit) ease-in both}
.topbar{position:absolute;inset:0;z-index:3;pointer-events:none;min-width:0}
.topbar::before{position:absolute;left:calc(var(--safe-x) + var(--side) * .15);top:62px;width:calc(var(--side) * .7);height:38px!important;margin:0!important}
.jackpot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1;list-style:none;margin:0;padding:0;gap:8px}
.jackpot__tier{--tier:color-mix(in srgb,var(--c-text) 92%,var(--c-accent));position:absolute;display:flex;align-items:center;justify-content:center;gap:6px;border-left:3px solid var(--tier);min-width:0;width:calc(var(--side) - 20px);height:26px!important;padding-inline:4px!important}
.jackpot__tier[data-tier=mini]{left:calc(var(--safe-x) + 8px);top:4px}
.jackpot__tier[data-tier=minor]{left:calc(var(--safe-x) + 8px);top:32px}
.jackpot__tier[data-tier=major]{right:calc(var(--safe-x) + 8px);top:4px}
.jackpot__tier[data-tier=grand]{right:calc(var(--safe-x) + 8px);top:32px}
[data-tier=minor]{--tier:color-mix(in srgb,var(--c-text) 86%,var(--c-accent))}[data-tier=major]{--tier:color-mix(in srgb,var(--c-text) 78%,var(--c-accent))}[data-tier=grand]{--tier:color-mix(in srgb,var(--c-text) 74%,var(--c-accent))}
.jackpot__name{font-size:var(--fs-label);color:var(--tier);letter-spacing:.06em}
.jackpot__amt{font-size:var(--fs-jp-amt);font-variant-numeric:tabular-nums}
/* A2 實測 1200×757：164px 的欄位裝不下「4× SCATTER 贏取免費遊戲」這行 nowrap 文字，
   置中後左邊壓到 GRAND 獎池、右邊被螢幕切掉 28px。欄寬不動，改讓文字自己換行。 */
.scatter{position:absolute;top:100px;left:calc(var(--safe-x) + 8px);width:calc(var(--side) - 20px);display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:4px;min-width:0}
.scatter__pip{width:9px;height:9px;border:1px solid var(--c-text);rotate:45deg;background:color-mix(in srgb,var(--c-bg-1) 65%,white)}
.scatter__pip[data-state=lit]{background:var(--c-accent)}
.scatter__label{flex:0 0 100%;text-align:center;text-wrap:balance;line-height:1.15;font-size:max(10px,calc(var(--cell) * 0.12))}
.board-wrap{grid-area:board;position:relative;align-self:center;width:var(--board);height:var(--board)}
.board{position:relative;z-index:2;width:100%;height:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));background:color-mix(in srgb,var(--c-bg-2) 90%,white);outline:1px solid var(--c-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-bg-1) 55%,white)}
.cell{min-width:0;min-height:0;background-position:center;background-repeat:no-repeat;background-size:100% 100%;border:max(1px,calc(var(--cell) * .02)) solid color-mix(in srgb,var(--c-text) 25%,var(--c-bg-2))}
[data-symbol=P]{background-image:var(--sym-P)}
[data-symbol=C]{background-image:var(--sym-C)}
[data-symbol=A]{background-image:var(--sym-A)}
[data-symbol=K]{background-image:var(--sym-K)}
[data-symbol=Q]{background-image:var(--sym-Q)}
[data-symbol=J]{background-image:var(--sym-J)}
[data-symbol=S]{background-image:var(--sym-S)}
[data-symbol=M]{background-image:var(--sym-M)}
[data-symbol=G]{background-image:var(--sym-G)}
/* Removal without a winning grade stays neutral. */
.cell[data-state=win]{outline:2px solid var(--c-text);outline-offset:-3px;background-color:color-mix(in srgb,var(--c-bg-1) 35%,white)}
#board[data-cascade-grade=small] .cell[data-state=win]{outline-color:var(--c-win-1);box-shadow:inset 0 0 12px var(--c-win-1)}
#board[data-cascade-grade=mid] .cell[data-state=win]{outline-color:var(--c-win-1);box-shadow:inset 0 0 12px var(--c-win-1);animation:cascade-bounce var(--t-cascade) ease-out both}
#board[data-cascade-grade=big] .cell[data-state=win]{outline-color:var(--c-win-1);box-shadow:inset 0 0 16px var(--c-win-1),0 0 12px var(--c-win-2);animation:cascade-bounce var(--t-cascade) ease-out both}
@keyframes cascade-bounce{0%,100%{scale:1}45%{scale:1.06}}
/* 中獎呈現（使用者 2026-09-29 第 1/2/4 點）：連線跑完 → 中獎格粗框＋前後伸縮閃爍 → 格子上跳這組分數；結算時中央大字金額 */
#board[data-win-frame] .cell[data-state=win]{position:relative;z-index:1;outline:max(3px,calc(var(--cell) * .07)) solid var(--c-win-1);outline-offset:calc(var(--cell) * -.05);box-shadow:0 0 calc(var(--cell) * .25) var(--c-win-1),inset 0 0 calc(var(--cell) * .2) var(--c-win-2);animation:win-frame calc(var(--t-cascade) - var(--t-link-draw)) ease-in-out both}
@keyframes win-frame{0%,100%{scale:1}30%{scale:1.16}55%{scale:.96}80%{scale:1.1}}
#board .cell[data-pop],#board[data-win-frame] .cell[data-state=win][data-pop]{position:relative;z-index:3}
.cell[data-pop]::after{content:attr(data-pop);position:absolute;left:50%;top:50%;translate:-50% -50%;white-space:nowrap;pointer-events:none;font-size:max(16px,calc(var(--cell) * .5));font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:#fff;-webkit-text-stroke:max(2px,calc(var(--cell) * .06)) var(--c-win-2);paint-order:stroke fill;text-shadow:0 0 calc(var(--cell) * .15) var(--c-win-1),0 2px 3px rgb(0 0 0/.6);animation:cell-pop calc(var(--t-cascade) - var(--t-link-draw)) cubic-bezier(.2,1.6,.4,1) both}
@keyframes cell-pop{0%{scale:.3;opacity:0}40%{scale:1.3;opacity:1}100%{scale:1;opacity:1}}
.win-banner{position:absolute;left:0;right:0;top:50%;translate:0 -50%;z-index:7;pointer-events:none;text-align:center;white-space:nowrap;font-size:min(clamp(52px,calc(var(--board, 320px) * .26),156px),var(--fit, 999px));font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:#fff;-webkit-text-stroke:max(3px,.06em) var(--c-win-2);paint-order:stroke fill;text-shadow:0 0 .25em var(--c-win-1),0 .06em .1em rgb(0 0 0/.7);animation:win-banner .45s cubic-bezier(.2,1.6,.4,1) both}
.win-banner[hidden]{display:none}
.win-banner[data-grade=trivial],.win-banner[data-grade=small]{font-size:min(clamp(42px,calc(var(--board, 320px) * .18),110px),var(--fit, 999px))}
.win-banner[data-grade=big]{font-size:min(clamp(68px,calc(var(--board, 320px) * .34),208px),var(--fit, 999px));animation:win-banner .45s cubic-bezier(.2,1.6,.4,1) both,win-banner-beat var(--t-beat) ease-in-out .45s infinite}
@keyframes win-banner{0%{scale:.2;opacity:0}60%{scale:1.15;opacity:1}100%{scale:1}}
@keyframes win-banner-beat{0%,100%{scale:1}50%{scale:1.07}}

.fx{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
/* L074: JS gates cascade particles by final grade, including during cascades. */
/* L133: multiplier = this game's M symbol + the value from data-mult-pop as text. */
#board[data-mult-pop]::after{content:"×" attr(data-mult-pop);display:grid;place-items:center;position:absolute;inset:0;margin:auto;width:calc(var(--cell) * 1.8);height:calc(var(--cell) * 1.8);z-index:4;pointer-events:none;background:var(--sym-M) center/contain no-repeat;color:var(--c-text);font-size:calc(var(--cell) * 0.62);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;-webkit-text-stroke:calc(var(--cell) * 0.035) var(--c-bg-2);paint-order:stroke fill;text-shadow:0 0 calc(var(--cell) * 0.12) var(--c-accent);animation:mult-pop var(--t-mult-pop) ease-out both}
@keyframes mult-pop{from{opacity:.75;scale:.88}to{opacity:1;scale:1}}
.panel{z-index:2;container-type:inline-size;position:relative;min-width:0;padding:12px;display:grid;gap:8px;align-content:start;background:color-mix(in srgb,var(--c-bg-2) 70%,white)}
.panel--left{grid-area:left;grid-template-rows:44px 1fr auto;align-content:stretch}
.panel--right{grid-area:right;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;justify-items:center}
@media(orientation:landscape){
 .panel--left{padding-top:140px!important}
 .panel--right{padding-top:64px!important;gap:4px}
 .panel--right .meter{padding:2px!important}
 .panel--right .meter__label{font-size:11px}
 .panel--right .meter__val,.panel--right .meter--credit .meter__val{font-size:16px}
 .panel--right .btn--spin{width:72px;height:72px;margin-top:0}
}
.btn{min-width:44px;min-height:44px;border:2px solid var(--c-text);background:color-mix(in srgb,var(--c-bg-1) 72%,white);border-radius:6px;cursor:pointer;font-size:var(--fs-btn);font-weight:650}
.btn:hover:not(:disabled){background:color-mix(in srgb,var(--c-bg-1) 85%,white)}.btn:active:not(:disabled){background:var(--c-bg-1)}
.btn:focus-visible,.pick:focus-visible{outline:3px solid var(--c-text);outline-offset:2px}
.btn:disabled{opacity:1;cursor:default;background:color-mix(in srgb,var(--c-bg-1) 28%,white)}
.btn--icon{justify-self:start;font-size:20px}
.panel__tools{display:flex;gap:8px;align-items:start}
.btn--mute[aria-pressed=true]{opacity:.7}
#btn-full[hidden]{display:none!important}
#btn-full{display:grid;place-items:center;padding:0}
#btn-full[aria-pressed=true]{opacity:.7}
.btn--buy{align-self:center;width:100%;padding:10px 6px;display:grid;gap:4px;background:color-mix(in srgb,var(--c-bg-1) 80%,white)}
.btn__price{font-size:var(--fs-credit);font-variant-numeric:tabular-nums}
.bet{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center}
.bet__amt{font-size:var(--fs-btn);text-align:center;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;background:color-mix(in srgb,var(--c-bg-2) 75%,white)}
.btn--step{font-size:22px}
.meter{width:100%;text-align:center;background:color-mix(in srgb,var(--c-bg-2) 75%,white);padding:6px 2px;min-width:0}
.meter__label{display:block;color:var(--c-text);font-size:var(--fs-label);letter-spacing:.1em}
.meter__val{display:block;font-size:var(--fs-win);font-weight:750;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.2}
.meter--credit .meter__val{font-size:var(--fs-credit)}
.meter__net[data-sign=neg]{display:block;color:var(--c-text);font-size:var(--fs-credit);font-weight:650;overflow-wrap:anywhere}
.meter__net:empty{display:none}
.btn--auto{align-self:end;padding:0;min-width:44px;justify-self:start}
.btn--auto[data-state=on]{background:var(--c-bg-1);outline:2px solid var(--c-text)}
.btn--spin{width:max(72px,calc(var(--cell) * 1.6));height:max(72px,calc(var(--cell) * 1.6));border-radius:50%;background:color-mix(in srgb,var(--c-bg-1) 70%,white);color:var(--c-text);border:4px double var(--c-text);justify-self:end;box-shadow:0 3px 0 var(--c-accent);letter-spacing:.05em}
/* 轉鈕特效（手機實測「沒文字沒特效」）：待轉時外圈呼吸光，轉動中外圈掃光。不用文字，全球玩家都看得懂 */
.btn--spin{position:relative;isolation:isolate}
.btn--spin::before{content:"";position:absolute;inset:-8%;border-radius:50%;z-index:-1;pointer-events:none;
 background:radial-gradient(closest-side,transparent 80%,color-mix(in srgb,var(--c-win-2) 80%,white) 90%,transparent);animation:spin-breathe 1.8s ease-in-out 4.5 forwards}
.stage:not([data-phase=idle]) .btn--spin::before{background:conic-gradient(transparent 0 55%,color-mix(in srgb,var(--c-win-2) 80%,white) 95%,transparent);
 mask:radial-gradient(closest-side,transparent 82%,#000 86% 96%,transparent);animation:loader-spin .7s linear infinite}
@keyframes spin-breathe{0%,100%{opacity:.3;scale:.97}50%{opacity:1;scale:1.05}}
/* 主題皮的底圖與陰影畫在這一層：濾鏡若掛在按鈕上會把一直在動的光圈（::before）也包進去，每一幀重算模糊 */
.spin__face{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
/* L118: bounded AUTO, pending round, recoverable error. */
.auto-controls{align-self:end;justify-self:stretch;display:grid;gap:8px;min-width:0}
#btn-auto{padding:4px 10px}
.auto-picker{position:relative;width:88px;height:44px}
#auto-count{box-sizing:border-box;appearance:none;-webkit-appearance:none;width:100%;height:100%;min-width:40px;min-height:40px;padding:0 25px 0 10px;border:2px solid var(--c-text);border-radius:6px;background:var(--c-bg-2);color:var(--c-text);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;cursor:pointer}
#auto-count:focus-visible{outline:3px solid var(--c-text);outline-offset:2px}
.auto-picker::after{content:"";position:absolute;right:11px;top:calc(50% - 4px);width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;pointer-events:none;color:var(--c-text)}
#btn-auto[data-state=on]{background:var(--c-accent);color:var(--c-text);border-color:var(--c-text);outline:2px solid var(--c-text)}
#btn-auto[data-left]::after{content:attr(data-left);display:inline-block;margin-inline-start:8px;font-variant-numeric:tabular-nums}
/* 轉動帶（測試者 09-30「模糊了但格子上還是同一個東西」，app.mjs buildReel）：
   還沒揭曉的欄藏起格子，蓋一條隨機符號帶往下滾，由左到右一欄一欄停（data-stop）。
   一欄一個合成層；上下殘影只在建層時畫一次，不是每幀濾鏡。速度調 --t-reel-loop（捲 8 格的時間）。
   平常用 visibility 藏、動畫暫停，不用 display:none：那樣每局開轉都要把 6 條帶（96 格×3 張圖）重新畫一次層。 */
.reel{display:grid;visibility:hidden;position:absolute;inset:0;z-index:3;grid-template-columns:repeat(6,minmax(0,1fr));overflow:clip;pointer-events:none}
:is(#stage[data-phase=wait],#stage[data-phase=reveal],#stage[data-phase=anticipate],#stage[data-phase=boss]) .reel{visibility:visible}
:is(#stage[data-phase=wait],#stage[data-phase=reveal],#stage[data-phase=anticipate],#stage[data-phase=boss]) .reel__strip{animation-play-state:running}
:is(#stage[data-phase=wait],#stage[data-phase=reveal],#stage[data-phase=anticipate],#stage[data-phase=boss]) .cell:not([data-state]){visibility:hidden}
/* 停輪（效能 09-30）：轉動帶自己減速停在結果上，停穩才露出底下的格子；取代 36 格各自落下（一格一層、拆拆合合）。 */
.reel__col[data-stop]{animation:reel-hide 1ms var(--t-reveal-col) forwards}
.reel .reel__col[data-stop] .reel__strip{animation:reel-land var(--t-reveal-col) cubic-bezier(.2,.6,.35,1) 0s both}
@keyframes reel-hide{to{visibility:hidden}}
@keyframes reel-land{from{translate:0 -18.75%}to{translate:0 0}}   /* 不衝過頭：帶子上面沒東西，過衝會在欄頂露一條縫 */
.reel__strip{will-change:translate;animation:reel-roll var(--t-reel-loop) linear infinite paused}
.reel__col:nth-child(3n+2) .reel__strip{animation-delay:calc(var(--t-reel-loop) / -3)}
.reel__col:nth-child(3n) .reel__strip{animation-delay:calc(var(--t-reel-loop) / -1.5)}
.reel__strip i{display:block;position:relative;height:calc(var(--board) / 6);background-position:center;background-repeat:no-repeat;background-size:100% 100%;border:max(1px,calc(var(--cell) * .02)) solid color-mix(in srgb,var(--c-text) 25%,var(--c-bg-2))}
.reel__strip i::before,.reel__strip i::after{content:'';position:absolute;inset:0;background:inherit;border:0;opacity:.35}
.reel__strip i::before{translate:0 -22%}
.reel__strip i::after{translate:0 22%}
@keyframes reel-roll{from{translate:0 -50%}to{translate:0 0}}
#stage[data-error],html[data-error] #stage{--error-text:"發生錯誤，請再試一次"}
#stage[data-error=INSUFFICIENT_BALANCE],html[data-error=INSUFFICIENT_BALANCE] #stage{--error-text:"點數不足"}
#stage:is([data-error=OFFLINE],[data-error=INTERNAL]),html:is([data-error=OFFLINE],[data-error=INTERNAL]) #stage{--error-text:"連線不穩，請再試一次"}
#stage[data-error=GAME_NOT_AVAILABLE],html[data-error=GAME_NOT_AVAILABLE] #stage{--error-text:"這款遊戲目前沒有開放"}
#stage[data-error=UNAUTHENTICATED],html[data-error=UNAUTHENTICATED] #stage{--error-text:"登入已失效，請重新進入"}
#stage[data-error]::before,html[data-error] #stage::before{content:var(--error-text);position:absolute;top:calc(var(--bar-h) + 8px);left:calc(var(--safe-x) + var(--side) + 8px);width:calc(var(--board) - 16px);z-index:4;padding:10px 8px;border:2px solid var(--c-text);border-radius:6px;background:var(--c-bg-2);color:var(--c-text);font-size:14px;font-weight:650;line-height:1.4;text-align:center;pointer-events:none}
#stage[data-phase=anticipate] .board::before{content:"";position:absolute;inset:0;z-index:1;background:rgb(0 0 0 / .45);pointer-events:none}
#stage[data-phase=anticipate] .cell[data-state=anticipate]{position:relative;z-index:2}
#board[data-reveal-col] .cell[data-state=anticipate]{outline:2px solid var(--c-win-1);outline-offset:-3px}
#board[data-reveal-col] .cell[data-state=anticipate]::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 14px var(--c-win-1);pointer-events:none;animation:anticipate var(--t-reveal-col-slow) ease-out both}
#stage[data-phase=boss] .bg-art::before{opacity:.65}
#stage[data-phase=boss] .board{opacity:.48}
/* Step 9 §4：小／中／大三級的畫面差異。小獎只高亮，中獎多一段跳動，大獎才壓暗背景。 */
#stage[data-phase=settle][data-grade=mid] .board{animation:win-pop var(--t-rollup-mid) ease-out both}
#stage[data-phase=settle][data-grade=big] .board{box-shadow:0 0 26px var(--c-win-1),0 0 0 4px var(--c-win-2);animation:big-light var(--t-celebrate) ease-out both,win-pop var(--t-rollup-mid) ease-out both}
#stage[data-phase=settle][data-grade=big] .bg-art::before{opacity:.55}
/* Sprite reaches freeIdle before the 2240ms transition; retain its tail in settle. */
.stage[data-phase=settle]:has(.char--cast:is([data-state=freeIn],[data-state=freeIdle]))::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;animation:free-in var(--t-free-in) ease-out both;background:radial-gradient(ellipse,var(--c-win-1),transparent 70%);border:12px solid var(--c-win-2)}
.stage[data-phase=settle]:has(.char--cast:is([data-state=freeIn],[data-state=freeIdle])) .board{animation:free-board var(--t-free-in) ease-out both}
/* A3（Step 8 §6）：§6 給免費進場列的是「全螢幕轉場、頓幀、色彩翻轉」三樣。
   瀏覽器實測 settle 期間只有兩個動畫在跑 —— `free-in@stage::after` 與 `free-board@board`，
   等於全螢幕轉場已經有了、色彩翻轉只翻了盤面、頓幀完全沒做。這裡只補真缺的兩樣，
   上面兩條 L070 交來的規則一個字不動。
   時間點對齊 free-board 既有的 18%（403ms ≒ 0.9 拍），兩者讀起來才是同一個事件。
   `step-end`：關鍵影格之間不插值，到點直接跳、跳完撐住 —— 這就是頓幀，不是慢慢變。
   兩次閃爍都落在 18%–24.5%（403–549ms）內、整段只有兩次，遠低於 WCAG 2.3.1 的
   「任一秒 3 閃」門檻；第二次強度砍到 .7，讀起來是衰減不是連閃。
   縮放只往下（.985／.993）不往上：`.stage` 是 100dvh，放大會撐出捲軸。 */
.stage[data-phase=settle]:has(.char--cast:is([data-state=freeIn],[data-state=freeIdle])){animation:free-flip var(--t-free-in) step-end both}
.overlay-fx{position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:repeat(3,clamp(64px,calc(17 * var(--vh)),140px));grid-template-rows:repeat(3,clamp(64px,calc(17 * var(--vh)),140px));justify-content:center;align-content:center;gap:clamp(8px,calc(1.6 * var(--vh)),16px);background:rgb(0 0 0 / .55);backdrop-filter:blur(4px)}
.pick{border:2px solid var(--pick-edge,var(--c-text));border-radius:12px;padding:0;cursor:pointer;min-width:44px;min-height:44px;font-size:clamp(14.08px,calc(3.74 * var(--vh)),30.8px);line-height:1;transition:scale 160ms ease-out,border-color 160ms ease-out}
.pick::before{content:none}
.pick:is(:hover,:focus-visible){scale:1.05;border-color:#fff8dc}
.pick:focus-visible{outline:3px solid #fff8dc;outline-offset:4px}
/* 翻牌（使用者 2026-09-30）：翻開的牌面寫小獎金額，金龍牌放金龍幣圖；湊滿的 3 張發光，其餘壓暗 */
.overlay-fx .pick[data-state]{animation:pick-reveal var(--t-pick-reveal) ease-out both;border-color:#fff8dc;background:linear-gradient(145deg,#fff8dc,#e2b858);color:#3a1d00;font-weight:900;font-variant-numeric:tabular-nums}
.overlay-fx .pick[data-prize=grand]{background:var(--sym-G) center/82% no-repeat,radial-gradient(#fff3c0,#c8901a)}
.overlay-fx .pick[data-state=won]{border-color:#FFC107;box-shadow:0 0 24px #FFC107}
[data-mode=jackpot-won] .pick:not([data-state=won]){opacity:.35;filter:grayscale(.6)}
/* 快中巨型：第 2 張金龍翻出後，其他牌壓暗、金龍發光；第 3 張停一拍時那張牌抖一下 */
[data-mode=jackpot][data-near] .pick:not([data-prize=grand]):not([data-focus]){opacity:.45;transition:opacity 300ms}
[data-mode=jackpot][data-near] .pick[data-prize=grand]{border-color:#FFC107;box-shadow:0 0 28px #FFC107;animation:pick-reveal var(--t-pick-reveal) ease-out both,pick-glow 448ms ease-in-out var(--t-pick-reveal) infinite alternate}
.pick[data-focus]{animation:pick-shake 112ms linear infinite;border-color:#FFC107;box-shadow:0 0 36px #FFC107}
@keyframes pick-glow{to{box-shadow:0 0 44px #FFE082}}
@keyframes pick-shake{25%{translate:-2px 0}75%{translate:2px 0}}
.loader{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
 background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--c-bg-1) 70%,white),var(--c-bg-2));transition:opacity .4s}
.loader.is-done{opacity:0;pointer-events:none}
.loader__ring{width:64px;height:64px;border-radius:50%;border:6px solid color-mix(in srgb,var(--c-accent) 25%,transparent);border-top-color:var(--c-accent);animation:loader-spin .9s linear infinite}
.loader__bar{width:min(50%,420px);height:10px;border-radius:5px;background:color-mix(in srgb,var(--c-accent) 20%,transparent);overflow:hidden}
.loader__bar>i{display:block;height:100%;width:calc(var(--p,0) * 100%);border-radius:inherit;background:linear-gradient(90deg,var(--c-accent),var(--c-win-2));transition:width .2s}
@keyframes loader-spin{to{rotate:1turn}}
.loader__game{width:min(70%,520px);max-height:40%;object-fit:contain;filter:drop-shadow(0 4px 8px rgb(0 0 0/.35))}
.loader__game:not([src]){visibility:hidden}
.loader__brand{height:clamp(26px,6vh,44px);margin-top:clamp(0px,4vh,32px)}
@media(orientation:landscape) and (max-height:500px){.loader{gap:14px}.loader__ring{width:40px;height:40px;border-width:4px}}
/* 公司 Logo：左上角小小一塊，不擋遊戲、不吃點擊 */
.brand{position:absolute;z-index:6;left:calc(var(--safe-x,0px) + 6px);top:6px;height:18px;width:auto;pointer-events:none;user-select:none;opacity:.9;filter:drop-shadow(0 1px 2px rgb(0 0 0/.8))}
.rotate-gate{position:absolute;inset:0;z-index:5;background:color-mix(in srgb,var(--c-bg-2) 75%,white);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.rotate-gate>span{font-size:64px}.rotate-gate p{line-height:1.7}
@keyframes anticipate{0%{opacity:.2;scale:.92}45%,100%{opacity:1;scale:1}}
@keyframes win-pop{0%,100%{scale:1}12%{scale:.95}24%{scale:1}}
@keyframes big-light{0%,9%,100%{translate:0 0}2%{translate:-3px 2px}4%{translate:3px -2px}6%{translate:-2px 1px}}
@keyframes boss-enter{from{opacity:0;translate:0 30px;filter:brightness(.2)}to{opacity:1;translate:0 0;filter:brightness(1)}}
@keyframes boss-exit{to{opacity:0}}
@keyframes free-in{0%{opacity:0;clip-path:inset(48% 0)}18%,30%{opacity:.65;clip-path:inset(0)}60%{opacity:.25}100%{opacity:0;clip-path:inset(0)}}
@keyframes free-flip{0%{filter:none;scale:1}18%{filter:invert(1) hue-rotate(180deg);scale:.985}21%{filter:none;scale:1}23%{filter:invert(.7) hue-rotate(180deg);scale:.993}24.5%,100%{filter:none;scale:1}}
@keyframes free-board{0%,18%{filter:none;scale:1}19%,30%{filter:sepia(.8) hue-rotate(330deg);scale:.97}65%{filter:sepia(.4);scale:1}100%{filter:none;scale:1}}
@keyframes pick-reveal{0%{transform:perspective(600px) rotateY(90deg) scale(.6)}60%{transform:perspective(600px) rotateY(0) scale(1.15)}100%{transform:perspective(600px) rotateY(0) scale(1)}}
@container (max-width:170px){.btn--buy{font-size:13px}.bet{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;margin-inline:-4px}.meter__label{letter-spacing:.05em}}
@media(max-height:374px) and (orientation:landscape){.panel{padding:8px;gap:4px}.scatter__label{display:none}.btn--auto{justify-self:start}.btn--spin{margin-top:-44px}.meter{padding:4px 2px}}
@media(min-height:430px){.panel{padding:20px;gap:12px}.btn--buy{padding-block:16px}}
.testbar{position:absolute;top:2px;left:50%;translate:-50% 0;z-index:9;display:flex;gap:3px;font-size:11px;opacity:.85}
.testbar a{padding:3px 6px;border-radius:6px;background:#000a;color:#fff;text-decoration:none}
.testbar a[aria-current]{background:#e8553e}
@media(orientation:portrait){
 html,body{overflow:hidden}
 .stage{--bar-h:56px;--controls-h:216px;--hero-h:max(calc(18 * var(--vh)),100px);
  --board:min(calc((var(--usable-w) - 28px) * 6 / 7),calc((100 * var(--vh) - var(--bar-h) - var(--hero-h) - var(--controls-h) - var(--gap-b)) * 6 / 7))!important;
  --side:calc(var(--usable-w) / 2);--fs-jp-amt:12px;--fs-label:10px;--fs-btn:13px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:var(--bar-h) minmax(var(--hero-h),1fr) calc(var(--board) * 7 / 6) var(--controls-h);
  grid-template-areas:"top top" ". ." "board board" "left right";align-content:stretch}
 .topbar{position:relative;grid-area:top;inset:auto;display:block;width:100%;background:color-mix(in srgb,var(--c-bg-2) 78%,white);border-bottom:1px solid var(--c-text)}
 .topbar::before{display:none}
 .jackpot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:36px;gap:2px;padding:2px 4px}
 .jackpot__tier{position:static;width:auto;height:32px!important;flex-direction:column;gap:0;padding-inline:1px!important;border-left-width:2px}
 .jackpot__name{font-size:9px;line-height:1}
 .jackpot__amt{font-size:11px;line-height:1.15}
 .scatter{position:static;width:100%;height:18px;gap:7px;padding:0!important;border:0!important;border-radius:0!important}
 .scatter__pip{width:9px;height:9px}
 .scatter__label{flex:0 1 auto;font-size:9px;line-height:1}
 .board-wrap{grid-column:1/-1;justify-self:center;align-self:center}
 /* 直拿人物放大約 3 倍當半身像：頭頂貼彩金列，下半身藏在盤面後面 */
 .char--cast{transform-origin:top center;transition:scale .25s ease-out,translate .25s ease-out,opacity .25s;top:calc(var(--bar-h) + 4px);bottom:auto;scale:clamp(.8,calc(var(--hero-h) * 3 / 390px),1.5)!important}
 .char--cast[data-slot=left],.char--cast[data-slot=right]{left:calc(22% - 130px)!important;right:auto!important}
 .char--cast[data-slot=right]{left:calc(78% - 130px)!important}
 .char-layer:has(.char--cast[data-vid]) .char--cast:not([data-vid]){opacity:0}   /* 直拿出招時另一席讓出舞台：抬層時它的 3 倍半身才不會蓋住盤面 */
 .char--boss{bottom:calc(var(--gap-b) + var(--controls-h) + var(--board) / 12)}
 .panel{padding:2px!important;gap:2px!important;min-height:0}
 .panel--left{grid-template-rows:44px minmax(48px,1fr) 44px;align-content:stretch}
 .panel--right{grid-template-columns:minmax(0,1fr) 72px;grid-template-rows:36px 36px minmax(0,1fr);justify-items:stretch}
 .panel--left,.panel--right{padding-inline:2px!important;padding-top:2px!important}
 .panel__tools{gap:4px}
 .btn--buy{padding:6px 2px!important;width:100%!important;align-self:center!important;min-height:48px;max-height:96px;height:100%;align-content:center;gap:2px}
 .btn__price{font-size:22px;font-weight:800;line-height:1.1}
 .bet{gap:2px;margin:0!important;grid-template-columns:44px minmax(0,1fr) 44px}
 /* 牌匾內框只佔圖高 25%～65%：標籤與數字排成一行、跨兩欄，才落在內框裡 */
 .meter{padding:0 15% 2px!important;line-height:1;display:flex;align-items:center;justify-content:center;gap:6px}
 .meter--win{grid-column:1/-1;grid-row:1}
 .meter--credit{grid-column:1/-1;grid-row:2}
 /* 冰火牌匾 900×288 下方三分之一透明，內框在 y30～160：圖拉高 1.5 倍、靠上，內框中心才對齊文字 */
 [data-game=ib] .panel .meter{background-size:100% 150%;background-position:center top}
 .meter__label{font-size:10px}
 .meter__val,.meter--credit .meter__val{font-size:15px}
 .meter__net[data-sign=neg]{font-size:10px}
 .auto-controls{grid-column:1;grid-row:3;align-self:stretch;gap:2px}
 #btn-auto{min-height:44px;width:100%}
 .btn--spin{grid-column:2;grid-row:3;align-self:end;justify-self:end;width:72px;height:72px;margin:0}
 .overlay-fx{grid-template-columns:repeat(3,min(26vw,90px));grid-template-rows:repeat(3,min(26vw,90px));gap:min(2vw,8px)}
 .pick{font-size:clamp(14px,5vw,24px)}
 #stage[data-error]::before,html[data-error] #stage::before{top:calc(var(--bar-h) + var(--hero-h));left:10%;width:80%}
}
/* L221: compact portrait HUD and two-row controls; all original DOM hooks stay put. */
@media(orientation:portrait){
 .stage{
  --bar-h:56px;--controls-h:100px;
  --board:min(calc(var(--usable-w) - 12px),calc(100 * var(--vh) - var(--bar-h) - 40px - var(--controls-h) - 96px - var(--gap-b)))!important;
  grid-template-rows:var(--bar-h) 40px minmax(0,1fr) var(--board) var(--controls-h);
  grid-template-areas:"top top" ". ." ". ." "board board" ". .";
 }
 .topbar{height:var(--bar-h)}
 .panel--left,.panel--right{display:contents}
 .panel__tools{position:absolute;z-index:4;top:calc(var(--bar-h) + 1px);left:4px;height:40px;align-items:center}
 .panel__tools .btn{min-width:40px;min-height:40px;width:40px;height:40px}
 .meter{position:absolute;z-index:4;top:calc(var(--bar-h) + 1px);grid-row:auto;grid-column:auto;height:40px;padding:0 3px!important;white-space:nowrap}
 .meter--win{left:94px;width:calc((100% - 98px) * .52)}
 .meter--credit{right:4px;width:calc((100% - 98px) * .48)}
 .meter__label{font-size:10px}
 .meter__val,.meter--credit .meter__val{font-size:14px}
 .scatter{height:16px}
 .char--cast{top:calc(var(--bar-h) + 43px);scale:clamp(.8,calc(max(18 * var(--vh),100px) * 3 / 390px),1.5)!important}
 .board-wrap{width:var(--board);height:var(--board)}
 .cell{background-size:100% 100%;border-width:1px}
 .bet,.btn--buy,.auto-controls,.btn--spin{position:absolute;z-index:4}
 .bet{left:4px;bottom:52px;width:calc(42% - 4px);height:44px;grid-template-columns:40px minmax(0,1fr) 40px;gap:2px}
 .bet .btn{min-width:40px;min-height:44px}
 .bet__amt{align-self:stretch;display:grid;place-items:center}
 .btn--buy{left:42%;bottom:52px;width:calc(100% - 42% - 84px)!important;height:44px;min-height:44px;max-height:44px;padding:0 2px!important;display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap}
 .btn--buy>span:first-child{font-size:11px;line-height:1}
 .btn__price{font-size:14px;line-height:1}
 .auto-controls{left:4px;bottom:4px;width:138px;height:44px;display:grid;grid-template-columns:44px 88px;gap:6px;align-items:stretch}
 #btn-auto{width:44px;min-width:44px;min-height:44px;font-size:11px;padding:0}
 .btn--spin{right:4px;bottom:4px;width:76px;height:92px;min-width:76px;min-height:92px}
}
/* L223: keep the original landscape board; controls sit in the side gutters. */
@media(orientation:landscape){
 .stage{--board:min(calc(100 * var(--vh) - var(--gap-b)),calc(var(--usable-w) * .58))!important;--controls-top:calc(100 * var(--vh) - 98px)}
 .board-wrap{align-self:center;margin-top:0}
 #stage .char--cast{scale:calc(clamp(.45,calc((calc(100 * var(--vh)) - var(--bar-h)) / 420px),1.6) * .6375);bottom:calc(var(--gap-b) + 74px)}
 .topbar{z-index:5}
 .jackpot__tier{width:calc(var(--side) - 16px);height:26px;right:auto;flex-direction:row;gap:4px;line-height:1;padding-inline:2px!important;background:color-mix(in srgb,var(--c-bg-2) 88%,black)}
 .jackpot__name{font-size:8px}
 .jackpot__amt{font-size:11px}
 .jackpot__tier[data-tier=mini]{left:calc(var(--safe-x) + 4px);top:4px}
 .jackpot__tier[data-tier=minor]{left:calc(var(--safe-x) + 4px);top:32px}
 .jackpot__tier[data-tier=major]{left:auto;right:calc(var(--safe-x) + 4px);top:4px}
 .jackpot__tier[data-tier=grand]{left:auto;right:calc(var(--safe-x) + 4px);top:32px}
 .panel--left,.panel--right{display:contents}
 .panel__tools,.panel--right .meter,.btn--buy,.bet,#btn-auto,.panel--right .btn--spin{position:absolute;z-index:4}
 .panel__tools{left:calc(var(--safe-x) + 4px);top:var(--controls-top);width:84px;height:40px;gap:4px}
 .panel__tools .btn{width:40px;min-width:40px;min-height:40px}
 .panel--right .meter{left:calc(var(--safe-x) + 92px);top:var(--controls-top);height:40px;width:calc((var(--side) - 100px) / 2);padding:1px}
 .panel--right .meter--credit{left:calc(var(--safe-x) + 96px + (var(--side) - 100px) / 2)}
 .panel--right .meter__label{font-size:9px}
 .panel--right .meter__val,.panel--right .meter--credit .meter__val{font-size:11px;white-space:nowrap}
 .bet{left:calc(var(--safe-x) + 4px);top:calc(var(--controls-top) + 46px);width:128px;height:40px;grid-template-columns:40px 44px 40px;gap:2px}
 .bet .btn{min-width:40px;min-height:40px}
 #stage .btn--buy{left:calc(var(--safe-x) + 136px);top:calc(var(--controls-top) + 46px);width:calc(var(--side) - 140px);min-width:0;height:40px;min-height:40px;display:grid;align-content:center;gap:0;padding:0 2px;font-size:10px;white-space:nowrap}
 .btn--buy .btn__price{font-size:12px}
 .auto-controls{display:contents}
 .auto-picker{position:absolute;z-index:4;right:calc(var(--safe-x) + var(--side) - 132px);top:var(--controls-top);width:84px;height:40px}
 #btn-auto{top:var(--controls-top);width:40px;height:40px;min-width:40px;min-height:40px;padding:0;font-size:11px}
 #btn-auto{right:calc(var(--safe-x) + var(--side) - 44px)}
 .panel--right .btn--spin{right:calc(var(--safe-x) + 4px);top:calc(var(--controls-top) + 7px);width:72px;height:72px;min-width:72px;min-height:72px;border-radius:50%}
 .scatter{left:auto;right:calc(var(--safe-x) + 4px);top:62px;width:calc(var(--side) - 8px);height:16px;padding:1px;align-content:center;gap:3px;background:color-mix(in srgb,var(--c-bg-2) 88%,transparent)}
 .scatter__label{display:none}
}
@media(orientation:landscape) and (max-width:739px){
 .stage{--controls-top:calc(100 * var(--vh) - 140px)}
 #stage .char--cast{bottom:calc(var(--gap-b) + 89px)}
 .panel__tools{top:var(--controls-top)}
 #stage .btn--buy{left:calc(var(--safe-x) + 92px);top:var(--controls-top);width:calc(var(--side) - 96px);padding:0 1px;white-space:normal;line-height:1}
 #stage .btn--buy>span:first-child{font-size:8px}
 .panel--right .meter{left:calc(var(--safe-x) + 4px);top:calc(var(--controls-top) + 44px);width:calc((var(--side) - 12px) / 2)}
 .panel--right .meter--credit{left:calc(var(--safe-x) + 8px + (var(--side) - 12px) / 2)}
 .bet{top:calc(var(--controls-top) + 88px)}
 .panel--right .btn--spin{top:calc(var(--controls-top) + 47px);width:56px;height:56px;min-width:56px;min-height:56px}
 .panel--right .meter{padding-inline:0}
 .panel--right .meter__val,.panel--right .meter--credit .meter__val{font-size:9.5px;letter-spacing:-.02em}   /* 牌匾只剩約 69px，10,000,000 才放得下 */
}
html.too-short #rotate-gate{display:flex!important}
.testbar span{padding:3px 6px;border-radius:6px;background:#000a;color:#ff0;white-space:nowrap}

/* L227: compact portrait header, visible cast, and one landscape jackpot row. */
@media(orientation:portrait){
 .stage{--bar-h:30px;--controls-h:82px;--board:min(calc(var(--usable-w) - 12px),calc(72 * var(--vh) - 148px))!important;grid-template-rows:30px 36px minmax(0,1fr) var(--board) var(--controls-h)}
 .topbar{height:30px;border:0;background:none}
 .jackpot{height:30px;padding:1px 4px}
 #stage .jackpot__tier{height:28px!important;line-height:1;padding-block:3px 1px!important}
 .scatter{position:absolute;top:30px;left:0;width:100%;height:10px;z-index:4;gap:6px;background:none!important}
 .scatter__pip{width:7px;height:7px}
 .scatter__label{display:none}
 .panel__tools,.meter{top:34px;height:28px}
 .panel__tools{height:44px;top:30px}
 .panel__tools .btn{width:44px;height:44px;min-width:44px;min-height:44px}
 .meter{left:102px;width:calc((100% - 106px) * .52)}
 .meter--credit{left:auto;right:4px;width:calc((100% - 106px) * .48)}
 #stage .char--cast{--cast-scale:clamp(.8,calc(max(18 * var(--vh),100px) * 3 / 390px),1.5);top:calc(75px - var(--opaque-y) * var(--cast-scale));scale:var(--cast-scale)!important}
 #stage .char--cast:is([data-cast=guanyu],[data-cast=zhaoyun],[data-cast=zhangfei],[data-cast=hideyoshi],[data-cast=kenshin]){--opaque-y:10px}
 #stage .char--cast:is([data-cast=zhugeliang],[data-cast=masamune]){--opaque-y:17px}
 #stage .char--cast[data-cast=shingen]{--opaque-y:19px}
 #stage .char--cast[data-cast=grape]{--opaque-y:52px}
 #stage .char--cast[data-cast=ember]{--opaque-y:57px}
 #stage .char--cast[data-cast=glacier]{--opaque-y:58px}
 #stage .char--cast[data-cast=blueberry]{--opaque-y:62px}
 #stage .char--cast[data-cast=jade]{--opaque-y:63px}
 #stage .char--cast[data-cast=pearl]{--opaque-y:67px}
 #stage .char--cast[data-cast=azure]{--opaque-y:69px}
 #stage .char--cast:is([data-cast=amber],[data-cast=cinder]){--opaque-y:71px}
 #stage .char--cast[data-cast=frost]{--opaque-y:72px}
 #stage .char--cast[data-cast=lemon]{--opaque-y:79px}
 #stage .char--cast[data-cast=strawberry]{--opaque-y:81px}
 #stage .char--cast:is([data-cast=kiwi],[data-cast=melon]){--opaque-y:82px}
 #stage .char--cast[data-cast=banana]{--opaque-y:83px}
 #stage .char--cast[data-cast=cherry]{--opaque-y:86px}
 .bet,.btn--buy{bottom:46px}
 .auto-controls{bottom:0}
 .btn--spin{bottom:0;height:88px;min-height:88px}
 #stage :is(.meter__val,.meter--credit .meter__val,.jackpot__amt,.bet__amt){font-size:12px}
 #stage :is(.meter__label,.jackpot__name){font-size:9px}
 #stage :is(.panel__tools .btn,.bet .btn,#btn-auto,.btn--buy,.btn--buy>span,.btn__price){font-size:12px}
}
@media(orientation:landscape){
 .stage{--board:min(calc(100 * var(--vh) - var(--gap-b) - 32px),calc(var(--usable-w) * .58))!important}
 .board-wrap{align-self:end}
 .topbar::before{top:0;height:24px!important}
 #stage .char--cast{scale:calc(clamp(.45,calc((calc(100 * var(--vh)) - var(--bar-h)) / 420px),1.6) * .9);left:calc(var(--safe-x) + var(--side) * .5 - 146px);bottom:calc(var(--gap-b) + 74px)}
 #stage .char--cast[data-slot=right]{left:auto;right:calc(var(--safe-x) + var(--side) * .5 - 146px)}
 .jackpot__tier{width:calc((var(--board) - 12px) / 4);height:28px!important;top:2px!important;right:auto!important;flex-direction:column;gap:0}
 .jackpot__tier[data-tier=mini]{left:calc(var(--safe-x) + var(--side) + 3px)}
 .jackpot__tier[data-tier=minor]{left:calc(var(--safe-x) + var(--side) + (var(--board) - 12px) / 4 + 6px)}
 .jackpot__tier[data-tier=major]{left:calc(var(--safe-x) + var(--side) + (var(--board) - 12px) / 2 + 9px)}
 .jackpot__tier[data-tier=grand]{left:calc(var(--safe-x) + var(--side) + (var(--board) - 12px) * .75 + 12px)}
 .scatter{left:calc(var(--safe-x) + var(--side))!important;right:auto;top:29px;width:var(--board);height:3px;padding:0!important;background:none!important;border:0!important}
 .scatter__pip{width:3px;height:3px}
 #stage :is(.meter__val,.meter--credit .meter__val,.jackpot__amt,.bet__amt){font-size:11px}
 #stage :is(.meter__label,.jackpot__name){font-size:9px}
 #stage :is(.panel__tools .btn,.bet .btn,#btn-auto,.btn--buy,.btn--buy>span,.btn__price){font-size:11px}
 .panel--right .meter{height:28px;top:calc(var(--controls-top) + 6px)}
 .panel--right .meter__label{font-size:9px}
 .panel--right .meter__val,.panel--right .meter--credit .meter__val{font-size:11px;letter-spacing:-.02em}
}
@media(orientation:landscape) and (max-width:739px){
 .panel--right .meter{top:calc(var(--controls-top) + 44px)}
}
@media(orientation:landscape) and (max-height:350px){
 .jackpot__tier{height:24px!important;top:0!important}
 .scatter{top:24px;height:3px}
 .panel--right .meter{height:24px}
}

/* L229: keep plaque text on one line inside the illustrated inset. */
@media(orientation:portrait){
 #stage .jackpot{gap:0;padding-inline:0}
 #stage .jackpot__tier{flex-direction:row;gap:2px;padding-block:0!important}
 #stage .jackpot__name{letter-spacing:-.15em}
 #stage .jackpot__amt{letter-spacing:-.15em}
}
@media(orientation:landscape){
 #stage .jackpot{position:absolute;top:0;left:calc(var(--safe-x) + var(--side) - 20px);width:calc(var(--board) + 40px);height:30px;gap:2px;padding:0}
 #stage .jackpot__tier{position:static;width:auto;min-width:0;flex-direction:row;gap:2px;padding-block:0!important}
 #stage .jackpot__name{letter-spacing:-.15em}
 #stage .jackpot__amt{letter-spacing:-.15em}
 #stage .panel--right .meter{left:calc(var(--safe-x) + 92px);width:41px;display:flex;align-items:center;justify-content:center;gap:2px;line-height:1;padding:0 1px!important}
 #stage .panel--right .meter--credit{left:calc(var(--safe-x) + 137px);width:calc(var(--side) - 141px)}
 #stage .scatter{left:calc(var(--safe-x) + var(--side) + var(--board) + 24px)!important;top:-2px;width:60px;height:16px;align-items:center;gap:8px}
 #stage .scatter__pip{width:8px;height:8px}
}
@media(orientation:landscape) and (max-width:739px){
 #stage .jackpot{left:calc(var(--safe-x) + var(--side) - 7px);width:calc(var(--board) + 11px)}
 #stage .panel--right .meter{left:calc(var(--safe-x) + 4px)}
 #stage .panel--right .meter--credit{left:calc(var(--safe-x) + 49px);width:calc(var(--side) - 53px)}
}
@media(orientation:landscape) and (max-height:350px){
 #stage .jackpot{height:24px}
 #stage .scatter{top:1px;width:26px;height:26px;flex-wrap:wrap;align-content:center;gap:3px 4px}
}

/* L242: readable type; source-panel insets include transparent canvas margins. */
html[data-game] #stage{--hud-number:15px;--hud-button:14px;--plaque-h:50px}
html[data-game=dr] #stage{--panel-height:200%;--panel-y:50.52%}
html[data-game=ib] #stage{--panel-height:185%;--panel-y:12.97%}
html[data-game=tk] #stage{--panel-height:190%;--panel-y:47.89%}
html[data-game=sg] #stage{--panel-height:230%;--panel-y:42.04%}
html[data-game=fs] #stage{--panel-height:100%;--panel-y:50%}
html[data-game=fl] #stage{--panel-height:150%;--panel-y:51.75%}
html[data-game] #stage :is(.jackpot__name,.meter__label){font-size:11px;font-weight:800;line-height:.88;letter-spacing:0;text-shadow:0 1px 1px #000;position:relative;top:.2px}
html[data-game] #stage :is(.jackpot__amt,.meter__val,.bet__amt){font-size:var(--hud-number);font-weight:800;font-variant-numeric:tabular-nums;line-height:.88;letter-spacing:-.35px;text-shadow:0 1px 1px #000}
html[data-game] #stage :is(.panel__tools .btn,.bet .btn,#btn-auto,.btn--buy,.btn--buy>span,.btn__price){font-size:var(--hud-button);font-weight:800;line-height:1}
html[data-game] #stage :is(#auto-count,.btn__price){font-variant-numeric:tabular-nums}
html[data-game] #stage :is(.jackpot__tier,.meter,.bet__amt){background-size:100% var(--panel-height);background-position:center var(--panel-y)}
html[data-game] #stage :is(.jackpot__tier,.meter){height:var(--plaque-h)!important;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0 2px!important;translate:0 -10px}
html[data-game=ib] #stage :is(.jackpot__tier,.meter)>*{position:relative;left:1.111%}
html[data-game] #stage .btn--buy{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0 2px!important}
@media(orientation:portrait){
 #stage .jackpot{height:40px}
 html[data-game] #stage :is(.panel__tools .btn,.bet .btn,#btn-buy,#btn-auto){height:40px;min-height:40px;max-height:40px}
 #stage .bet{height:40px}
 #stage .panel__tools{top:40px;height:40px}
 #stage .panel__tools .btn{width:40px;height:40px;min-width:40px;min-height:40px}
 html[data-game] #stage .meter{top:40px;left:134px;width:calc((100% - 138px) * .45)}
 html[data-game] #stage .meter--credit{left:auto;right:4px;width:calc((100% - 138px) * .55)}
 #stage .scatter{top:82px;left:8px;width:0;height:0;flex-wrap:nowrap;justify-content:flex-start;gap:6px;overflow:visible}
 #stage .scatter__pip{flex:none}
 #stage .char--cast{top:calc(80.1px - var(--opaque-y) * var(--cast-scale))}
 html[data-game] #stage .jackpot__amt{letter-spacing:-1.95px}
}
@media(orientation:landscape){
 html[data-game] #stage{--hud-number:14px;--hud-button:13px;--board:min(calc(100 * var(--vh) - var(--gap-b) - 38px),calc(var(--usable-w) * .58))!important}
 #stage .jackpot{top:-2px;height:40px}
 html[data-game] #stage .jackpot__amt{letter-spacing:-1.6px}
 html[data-game] #stage .panel--right .meter{left:calc(var(--safe-x) + 4px);width:calc((var(--side) - 10px) * .42);top:var(--controls-top)}
 html[data-game] #stage .panel--right .meter--credit{left:calc(var(--safe-x) + 6px + (var(--side) - 10px) * .42);width:calc((var(--side) - 10px) * .58)}
 #stage .panel__tools{left:calc(var(--safe-x) + var(--side) + var(--board) + 46px);top:calc(var(--controls-top) + 46px);gap:2px}
 #stage #btn-auto{right:calc(var(--safe-x) + var(--side) - 44px)}
}
@media(orientation:landscape) and (max-width:739px){
 #stage .char--cast{bottom:calc(var(--gap-b) + 80px)}
 html[data-game] #stage .panel--right .meter{left:calc(var(--safe-x) + 4px);width:calc(var(--side) - 8px);top:calc(100 * var(--vh) - 134px)}
 html[data-game] #stage .panel--right .meter--credit{left:auto;right:calc(var(--safe-x) + 4px);top:calc(100 * var(--vh) - 148px);translate:0}
 #stage .bet{top:calc(100 * var(--vh) - 92px);width:calc(var(--side) - 8px);grid-template-columns:40px minmax(0,1fr) 40px}
 #stage .panel__tools{display:contents}
 #stage #btn-mute{position:absolute;left:calc(var(--safe-x) + 4px);top:calc(100 * var(--vh) - 48px)}
 #stage #btn-full{position:absolute;left:calc(var(--safe-x) + 4px);top:4px;width:40px;height:40px;min-width:40px;min-height:40px}
 #stage #btn-menu{position:absolute;left:auto;right:calc(var(--safe-x) + var(--side) - 86px);top:calc(100 * var(--vh) - 64px)}
 html[data-game] #stage .btn--buy{left:calc(var(--safe-x) + 48px);top:calc(100 * var(--vh) - 48px);width:calc(var(--side) - 52px);white-space:normal}
 #stage #btn-auto,#stage .auto-picker{top:calc(100 * var(--vh) - 108px)}
 #stage .panel--right .btn--spin{top:calc(100 * var(--vh) - 64px)}
}
@media(orientation:landscape) and (max-width:739px) and (min-height:351px){
 #stage #btn-auto,#stage .auto-picker{top:calc(100 * var(--vh) - 96px)}
 #stage #btn-menu{top:calc(100 * var(--vh) - 55px)}
}
/* L252: single-line jackpots fit the top row without clipping the plaque. */
html[data-game] #stage .jackpot__tier{height:28px!important;flex-direction:row;gap:3px;translate:0;white-space:nowrap;background-size:115% var(--panel-height)}
html[data-game] #stage .jackpot{top:2px;padding-block:0;grid-template-columns:1fr 1fr 1.14fr 1.47fr}
html[data-game] #stage .jackpot__name{top:0}

@media(orientation:portrait){html[data-game] #stage .jackpot{position:relative}}
html[data-game] #stage .jackpot__tier>*{left:0}
html[data-game] #stage .jackpot__amt{position:relative;top:.25px}
html[data-game] #stage .btn--buy>span{position:relative;top:.5px}

/* L297: the top row now holds only the logo and free-game progress. */
@media(orientation:landscape){
 #stage .scatter{left:auto!important;right:calc(var(--safe-x) + 8px);top:4px;width:min(180px,calc(var(--side) - 16px));height:auto;min-height:26px;padding:4px 6px!important;border-radius:6px;background:color-mix(in srgb,var(--c-text) 85%,black)!important;color:var(--c-bg-2)}
 #stage .scatter__label{display:block;flex-basis:100%;font-size:10px}
}
@media(orientation:portrait){
 #stage .scatter{left:auto;right:8px;top:4px;width:max-content;height:26px;flex-wrap:nowrap;align-items:center;overflow:visible;padding:3px 6px!important;border-radius:6px!important;background:color-mix(in srgb,var(--c-text) 85%,black)!important;color:var(--c-bg-2)}
 #stage .scatter__label{display:block;flex:0 1 auto;max-width:110px;font-size:12px}
}

.info{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:rgb(0 0 0 / .72)}
#stage #rotate-gate{z-index:31}
.info[hidden]{display:none}
.ask__panel{width:min(100%,440px)}
.ask__cost{margin:0;text-align:center;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.ask__text{margin:8px 0 0;text-align:center;font-size:15px}
.ask__text[data-short]{color:#c62828;font-weight:700}
.ask__btns{display:flex;gap:12px;padding:0 16px 16px}
.ask__btns .btn{flex:1;min-height:48px;font-size:18px;font-weight:700}
.ask__btns .btn:disabled{opacity:.45}
.ask__btns #buy-no{filter:grayscale(1) brightness(1.15)}
.info__panel{display:flex;flex-direction:column;min-height:0;width:min(100%,660px);max-height:100%;overflow:hidden;border:2px solid var(--c-accent);border-radius:12px;background:color-mix(in srgb,var(--c-bg-2) 94%,white);color:var(--c-text);box-shadow:0 12px 32px rgb(0 0 0 / .45)}
.info__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--c-accent)}
.info__head h2{margin:0;font-size:22px;line-height:1.2}
.info__head .btn{flex:none;display:grid;place-items:center;min-width:44px;min-height:44px}
.info__body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px;font-size:14px;line-height:1.5}
.info__sec+ .info__sec{margin-top:24px}
.info__sec h3{margin:0 0 10px;font-size:18px;line-height:1.3}
.info__sec h3 small{display:block;margin-top:2px;font-size:14px;font-weight:500}
.info__jackpot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
.info__jackpot li{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0;padding:10px;border:1px solid var(--c-accent);border-radius:6px;background:color-mix(in srgb,var(--c-bg-1) 16%,white)}
.info__jackpot [data-tier=grand]{grid-column:1 / -1;font-size:18px;font-weight:800}
.info__amt{font-variant-numeric:tabular-nums;font-weight:800;overflow-wrap:anywhere}
.info__note{margin:10px 0 0}
.info__pay{width:100%;border-collapse:collapse;table-layout:fixed;text-align:right}
.info__pay th,.info__pay td{padding:8px 3px;border-bottom:1px solid color-mix(in srgb,var(--c-text) 25%,transparent);font-size:14px}
.info__pay th:first-child{width:31%;text-align:left}
.info__pay tbody th{font-weight:600}
.info__pay tbody th span{vertical-align:middle}
.info__sym{display:inline-block;width:32px;height:32px;vertical-align:middle;background-position:center;background-size:contain;background-repeat:no-repeat}
.info__rules{margin:0;padding-inline-start:1.4em}
.info__rules li+li{margin-top:6px}
/* L314：分頁留在內容區外，只有目前頁捲動。購買確認框不受影響。 */
.info__panel:has(.info__tabs){height:min(100%,760px);container-type:inline-size;background:color-mix(in srgb,var(--c-bg-2) 40%,white)}
.info__head{flex-shrink:0}
.info__body:has(.info__tabs){display:grid;grid-template-rows:auto minmax(0,1fr);flex:1;padding:0;overflow:hidden;font-size:16px;line-height:1.65}
.info__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px 12px;border-bottom:1px solid color-mix(in srgb,var(--c-text) 20%,transparent)}
.info__tabs [role=tab]{min-width:0;min-height:44px;padding:6px 4px;border:1px solid var(--c-accent);border-radius:8px;background:transparent;font-weight:700;line-height:1.3;cursor:pointer}
.info__tabs [aria-selected=true]{background:var(--c-accent);box-shadow:inset 0 -3px 0 var(--c-text)}
.info__tabs [role=tab]:hover{border-color:var(--c-text)}
.info__tabs [role=tab]:focus-visible{outline:2px solid var(--c-text);outline-offset:2px}
.info__sec{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;padding:16px 20px 24px;scrollbar-gutter:stable}
.info__sec+.info__sec{margin-top:0}
.info__sec h3{font-size:20px;margin:0 0 16px}
.info__grand{margin:0 0 12px;font-size:28px;text-align:center}
.info__bet{margin:0 0 12px;font-weight:700}
.info__fig{--info-gold:var(--c-win-1);--info-gold:hsl(from var(--c-win-1) 45 s l);margin:16px 0 24px;min-width:0;text-align:center}
.info__fig figcaption{margin-top:10px;font-size:14px;font-weight:600}
.info__mini{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px;width:100%;padding:6px;border:1px solid var(--c-accent);border-radius:8px;background:color-mix(in srgb,var(--c-bg-1) 35%,white)}
.info__cell{display:block;min-width:0;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--c-text) 18%,transparent);border-radius:4px;background-size:contain;background-repeat:no-repeat;background-position:center}
.info__cell[data-hit]{outline:2px solid var(--c-text);outline-offset:-2px;background-color:var(--info-gold)}
.info__cell[data-gone]{border:1px dashed var(--c-text);background:transparent}
.info__cell[data-new]{outline:2px solid var(--c-accent);outline-offset:-2px;background-color:color-mix(in srgb,var(--c-accent) 35%,white)}
.info__fig[data-fig=cluster] .info__mini{width:min(100%,210px);margin:auto}
.info__fig[data-fig=cluster] .info__cell:not([data-hit]){opacity:.35}
.info__fig[data-fig=cascade]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;max-width:480px;margin-inline:auto}
.info__step{position:relative;min-width:0;font-size:14px;font-weight:700}
.info__step+.info__step::before{content:"→";position:absolute;left:-22px;top:30%;width:20px;font-size:20px;color:var(--c-text)}
.info__step>span{display:block;margin-top:6px}
.info__fig[data-fig=cascade] figcaption{grid-column:1/-1}
.info__fig[data-fig=mult],.info__fig[data-fig=scatter]{display:flex;justify-content:center;align-items:center;gap:clamp(4px,2cqw,14px)}
.info__fig [data-op]::before{content:attr(data-op)}
.info__fig [data-op]{font-style:normal;font-size:22px;font-weight:700}
.info__chip{display:grid;justify-items:center;min-width:0;gap:4px;font-size:18px}
.info__fig .info__sym{width:clamp(28px,8cqw,48px);height:clamp(28px,8cqw,48px);flex-shrink:0}
.info__total{font-size:clamp(24px,5cqw,32px);white-space:nowrap}
.info__fig[data-fig=ladder]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:6px;list-style:none;padding:0}
.info__fig[data-fig=ladder] li{display:grid;gap:4px;padding:8px 2px;border-radius:6px;background:color-mix(in srgb,var(--c-accent) var(--step-light),white);border-bottom:3px solid var(--c-accent)}
.info__fig[data-fig=ladder] li:nth-child(1){--step-light:20%;--step-size:20px}
.info__fig[data-fig=ladder] li:nth-child(2){--step-light:40%;--step-size:24px}
.info__fig[data-fig=ladder] li:nth-child(3){--step-light:65%;--step-size:28px}
.info__fig[data-fig=ladder] li:nth-child(4){--step-light:90%;--step-size:32px}
.info__fig[data-fig=ladder] span{font-size:12px;white-space:nowrap}
.info__fig[data-fig=ladder] b{font-size:var(--step-size);line-height:1.2}
.info__fig[data-ladder=free] li{background:color-mix(in srgb,var(--c-win-1) var(--step-light),white);border-bottom-color:var(--c-win-2)}
.info__fig[data-fig=cards]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(100%,260px);margin-inline:auto;padding:0;list-style:none}
.info__fig[data-fig=cards] li{display:grid;place-items:center;min-height:56px;border:1px solid var(--c-accent);border-radius:8px;background:color-mix(in srgb,var(--c-bg-1) 35%,white);font-size:20px}
.info__fig[data-fig=cards] [data-match]{border:2px solid var(--info-gold);background:color-mix(in srgb,var(--info-gold) 50%,white);box-shadow:0 2px 10px color-mix(in srgb,var(--info-gold) 65%,transparent)}
@container (max-width:400px){
 .info__tabs{gap:4px;padding:8px}
 .info__tabs [role=tab]{font-size:14px}
 .info__sec{padding:12px}
 .info__pay th,.info__pay td{font-size:12px}
 .info__pay tbody th span{display:block}
}
/* 橫放往上滑收網址列（src/main.mjs 的 swipe-full）：頁面暫時比螢幕高才捲得動，舞台釘住不跟著捲。
   提示 swipe-tip 點得穿、無底色、幾秒就收，不擋遊戲（使用者 2026-09-30）。 */
.swipe-hint{display:none}
html.swipe-full body{min-height:calc(100lvh + 240px)}
html.swipe-full .stage{position:fixed;top:0;left:0;right:0}
html.swipe-full.swipe-tip .swipe-hint{display:grid;position:fixed;inset:0;z-index:20;place-items:center;pointer-events:none}
/* App 內建瀏覽器提示（src/main.mjs 的 in-app）：上方一條小字＋開到 Chrome／Safari 的按鈕，10 秒自己收，只有按鈕點得到，不擋遊戲 */
.app-tip{display:none}
html.in-app .app-tip{display:flex;position:fixed;top:max(6px,env(safe-area-inset-top));left:50%;translate:-50% 0;z-index:21;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:999px;background:rgb(0 0 0/.78);color:#fff;font-size:13px;white-space:nowrap;pointer-events:none}
.app-tip a,.app-tip button{pointer-events:auto;padding:4px 10px;border:0;border-radius:999px;background:#FFC107;color:#3a1d00;font-weight:800;text-decoration:none}
.app-tip button{background:transparent;color:#fff;padding:4px 6px}
.swipe-hint svg{opacity:.85;animation:swipe-up 1.4s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgb(0 0 0/.7))}
/* 直式提醒轉橫向（src/main.mjs 的 turn-on）：點卡外或「知道了」就關，轉橫自己收 */
.turn-tip{display:none}
html.turn-on .turn-tip{display:grid;position:fixed;inset:0;z-index:40;place-items:center;padding:24px;background:rgb(0 0 0/.55)}
.turn-tip__card{display:grid;justify-items:center;gap:12px;max-width:280px;padding:22px 22px 18px;border-radius:18px;background:rgb(20 10 0/.9);box-shadow:0 0 0 2px #FFC107,0 8px 30px #000a;color:#fff;font-size:17px;font-weight:700;text-align:center}
.turn-tip__card p{margin:0;line-height:1.5}
.turn-tip__card svg{animation:turn-phone 2s ease-in-out infinite}
.turn-tip__card button{width:100%;padding:10px 16px;border:0;border-radius:999px;background:#FFC107;color:#3a1d00;font:inherit;font-weight:800}
.turn-tip__card [data-x]{background:transparent;color:#fff;opacity:.8;padding:6px}
@keyframes turn-phone{0%,20%{rotate:0deg}50%,80%{rotate:-90deg}100%{rotate:0deg}}
@keyframes swipe-up{0%{translate:0 50px;opacity:0}25%,70%{opacity:1}100%{translate:0 -50px;opacity:0}}

/* 連鎖倍率列（使用者 2026-09-30）：壓在盤面外框上緣正中。亮的那格＝這一次連鎖乘的倍率，換格時彈一下。 */
/* 巨型彩金牌（使用者 2026-09-30）：倍率列正上方，全場最顯眼的數字。不做無限動畫：閒置時每幀重畫光暈太耗電 */
.grand-pool{position:absolute;z-index:4;left:50%;bottom:calc(100% + var(--cell) * .46 + 4px);translate:-50% 0;display:flex;align-items:center;gap:calc(var(--cell) * .08);height:calc(var(--cell) * .56);padding:0 calc(var(--cell) * .26) 0 calc(var(--cell) * .06);border-radius:999px;pointer-events:none;background:linear-gradient(#4a2600,#160900);box-shadow:0 0 0 2px #FFD54A,0 0 calc(var(--cell) * .3) #FFB300,inset 0 0 calc(var(--cell) * .12) #FFB30088}
.grand-pool::before{content:"";width:calc(var(--cell) * .48);height:calc(var(--cell) * .48);background:var(--sym-G) center/contain no-repeat}
.grand-pool__amt{font:900 calc(var(--cell) * .36)/1 Georgia,"Songti TC",serif;font-variant-numeric:tabular-nums;color:transparent;background:linear-gradient(#FFF6C8,#FFC107 55%,#FF8F00);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 0 #000)}
/* 橫放（含電腦版，電腦版就是手機橫放放大）盤面頂到螢幕上緣，倍率列上方沒空間：彩金牌跟倍率列並排在外框上緣，彩金牌在左半、倍率列在右半 */
@media(orientation:landscape){
 html .grand-pool{bottom:auto;top:calc(var(--cell) * -.27);right:calc(50% + 4px);left:auto;translate:0 -50%;height:calc(var(--cell) * .5)}
 html .ladder{left:calc(50% + 4px);translate:0 0}
}
.ladder{position:absolute;z-index:4;left:50%;top:calc(var(--cell) * -.46);translate:-50% 0;height:calc(var(--cell) * .38);margin:0;padding:0 8px;list-style:none;display:flex;gap:4px;align-items:center;pointer-events:none;border-radius:999px;background:color-mix(in srgb,var(--c-text) 80%,black);box-shadow:0 0 0 2px var(--c-win-1),0 3px 8px #0008}
.ladder li{min-width:calc(var(--cell) * .6);text-align:center;font:800 calc(var(--cell) * .24)/1 Georgia,"Songti TC",serif;font-variant-numeric:tabular-nums;color:var(--c-bg-2);opacity:.5}
.ladder li[data-on]{opacity:1;color:var(--c-win-1);text-shadow:0 0 6px var(--c-win-1),0 1px 0 #000;animation:ladder-pop var(--t-mult-pop) ease-out}
@keyframes ladder-pop{from{scale:1.7}}

/* 自動張數：直放排成一列按鈕填滿空白，橫放維持下拉（使用者 2026-09-30） */
.auto-quick{display:none}
@media(orientation:portrait){
 #stage .auto-controls{width:calc(100% - 92px);grid-template-columns:44px minmax(0,1fr)}
 #stage .auto-picker{display:none}
 #stage .auto-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 #stage .btn--count{min-width:0;min-height:44px;padding:0;font-size:14px}
 #stage .btn--count[aria-pressed=true]{outline:2px solid var(--c-win-1);outline-offset:-2px}
}
/* 橫放右下（自動列＋工具列）上下緣切齊轉動鈕（使用者 2026-09-30）：兩列各 34px＋間距 4px＝轉動鈕的 72px */
@media(orientation:landscape) and (min-width:740px){
 #stage #btn-auto,#stage .auto-picker{top:calc(var(--controls-top) + 7px);height:34px;min-height:34px}
 #stage #auto-count{min-height:34px}
 #stage .panel__tools{top:calc(var(--controls-top) + 45px);height:34px}
 #stage .panel__tools .btn{height:34px;min-height:34px}
}
/* 橫放兩側控制項一律從「外框外緣」算起（使用者 2026-09-30：UI 要符合所有手機）。
   原本從盤面邊緣算，外框凸出約半格沒扣，窄一點的手機就壓到外框。
   --side-in＝一側扣掉外框後真的能放東西的寬度；盤面加上限，保證 --side-in 至少 190px（左：注額 112＋購買 66；右：自動 40＋張數 66＋轉動鈕 80）。 */
@media(orientation:landscape) and (min-width:740px){
 html[data-game] #stage{--side-in:calc(var(--side) - var(--cell) * .35);--board:min(calc(100 * var(--vh) - var(--gap-b) - 38px),calc(var(--usable-w) * .58),calc((var(--usable-w) - 380px) / 1.1167))!important}
 html[data-game] #stage .panel--right .meter{width:calc((var(--side-in) - 10px) * .42)}
 html[data-game] #stage .panel--right .meter--credit{left:calc(var(--safe-x) + 6px + (var(--side-in) - 10px) * .42);width:calc((var(--side-in) - 10px) * .58)}
 html[data-game] #stage .bet{width:112px;grid-template-columns:36px minmax(0,1fr) 36px}
 html[data-game] #stage .bet .btn{min-width:36px;width:36px}
 html[data-game] #stage .btn--buy{left:calc(var(--safe-x) + 120px);width:calc(var(--side-in) - 124px)}
 html[data-game] #stage #btn-auto{right:calc(var(--safe-x) + var(--side-in) - 40px)}
 html[data-game] #stage .auto-picker{right:calc(var(--safe-x) + 80px);width:calc(var(--side-in) - 124px)}
 html[data-game] #stage .panel__tools{left:auto;right:calc(var(--safe-x) + 80px);width:calc(var(--side-in) - 80px)}
 html[data-game] #stage .panel__tools .btn{flex:1;width:auto;min-width:0;padding:0}
 html[data-game] #stage .scatter{width:calc(var(--side-in) - 8px)}
}
 /* 740 以下（SE、8 Plus）同一套：盤面上限保證 --side-in 至少 145px，控制項寬度一律用 --side-in。
   右下：自動貼外框、張數夾在自動與轉動鈕之間，選單在自動正下方。 */
@media(orientation:landscape) and (max-width:739px){
 html[data-game] #stage{--side-in:calc(var(--side) - var(--cell) * .35);--board:min(calc(100 * var(--vh) - var(--gap-b) - 38px),calc(var(--usable-w) * .58),calc((var(--usable-w) - 290px) / 1.1167))!important}
 html[data-game] #stage .panel--right .meter{width:calc(var(--side-in) - 8px)}
 html[data-game] #stage .bet{width:calc(var(--side-in) - 8px)}
 html[data-game] #stage .btn--buy{width:calc(var(--side-in) - 52px)}
 html[data-game] #stage #btn-auto{right:calc(var(--safe-x) + var(--side-in) - 40px)}
 html[data-game] #stage .auto-picker{right:calc(var(--safe-x) + 64px);width:calc(var(--side-in) - 108px)}
 html[data-game] #stage #btn-menu{right:calc(var(--safe-x) + var(--side-in) - 40px)}
 html[data-game] #stage .scatter{width:calc(var(--side-in) - 8px)}
}

/* 電腦版（src/main.mjs 的 html.desk，使用者 2026-09-30）：舞台照手機橫放排版，整個等比放大 --desk-k 倍鋪滿視窗。
   舞台被 transform 後 fixed 的背景改以舞台為準，要自己鋪滿舞台。 */
html.desk body{overflow:hidden}
html.desk .stage{width:calc(100 * var(--vw));transform:scale(var(--desk-k));transform-origin:0 0}
html.desk .bg-art{position:absolute;inset:0;width:100%;height:100%}

/* 巨型累積獎金慶祝（src/grand-show.mjs，使用者 2026-09-30）。暗場＋光芒在金幣畫布（z6）底下，數字在上面。
   stage[data-grand]：boss 魔王出招 → in 暗場 → coin 光芒亮起 → roll 數字滾動 → slam 砸下白閃 → hold 停留 → out 收掉 */
.grand-bg{position:absolute;inset:0;z-index:5;pointer-events:none;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,rgb(60 30 0/.55),rgb(0 0 0/.88) 70%);opacity:0;transition:opacity .45s}
.grand-rays{position:absolute;left:50%;top:50%;width:250vmax;height:250vmax;translate:-50% -50%;opacity:0;background:repeating-conic-gradient(from 0deg,rgb(255 215 90/.30) 0deg 7deg,transparent 7deg 20deg);mask:radial-gradient(circle,#000 0,#000 12%,transparent 45%);-webkit-mask:radial-gradient(circle,#000 0,#000 12%,transparent 45%);animation:grand-spin 14s linear infinite;transition:opacity .6s}
.grand-num{position:absolute;left:0;right:0;top:50%;translate:0 12%;z-index:7;pointer-events:none;text-align:center;white-space:nowrap;font:900 min(calc(var(--cell) * 1.25),var(--fit,999px))/1 Georgia,"Songti TC",serif;font-variant-numeric:tabular-nums;color:#fff4c2;-webkit-text-stroke:max(3px,.05em) #8a4a00;paint-order:stroke fill;text-shadow:0 0 .18em #ffc53d,0 0 .5em #ff8a00,0 .06em .1em rgb(0 0 0/.8);opacity:0}
.stage[data-grand] .grand-bg{opacity:1}
.stage[data-grand]:not([data-grand=in]) .grand-rays{opacity:1}
.stage[data-grand=boss] .grand-bg{opacity:0}
.stage[data-grand]:not([data-grand=boss]) .char-layer{z-index:6}   /* 兩側角色擺大獎姿勢，抬到暗場（5）之上、金幣與數字底下 */
.stage:is([data-grand=roll],[data-grand=slam],[data-grand=hold]) .grand-num{opacity:1}
.stage[data-grand=roll] .grand-num{animation:grand-num-in .5s cubic-bezier(.2,1.5,.4,1) both}
.stage[data-grand=slam] .grand-num{animation:grand-slam .9s cubic-bezier(.2,1.6,.4,1) both}
.stage[data-grand=slam] .grand-bg::after{content:"";position:absolute;inset:0;background:#fff;animation:grand-flash .6s ease-out both}
.stage[data-grand=hold] .grand-num{animation:win-banner-beat var(--t-beat) ease-in-out infinite}
.stage[data-grand=hold] .grand-rays{animation-duration:6s}
.stage[data-grand=out] :is(.grand-bg,.grand-num){opacity:0;transition:opacity .5s}
@keyframes grand-spin{to{rotate:360deg}}
@keyframes grand-num-in{0%{scale:.2;opacity:0}100%{scale:1;opacity:1}}
@keyframes grand-slam{0%{scale:2.2;filter:brightness(2.5)}45%{scale:.92}100%{scale:1;filter:none}}
@keyframes grand-flash{0%{opacity:.9}100%{opacity:0}}
@media(orientation:portrait){.grand-num{font-size:min(calc(var(--cell) * 1.8),var(--fit,999px))}}