/* Shared 400 px controls. Portrait phones fill the width and adapt cinema height. */
html,body{position:fixed;inset:0;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:0;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#app{position:fixed;inset:0;width:100%;height:100%;min-height:0;padding:0;display:block;overflow:hidden}
.safe-viewport-probe{position:fixed;top:0;left:0;height:100svh;width:0;box-sizing:border-box;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);visibility:hidden;pointer-events:none}
.desktop-mark,.desktop-side{display:none}
.game-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.game-design{position:absolute;left:0;top:0;width:400px;height:var(--game-height,704px);transform-origin:0 0;visibility:hidden}
.game-design[data-fitted=true]{visibility:visible}
.game-design .cabinet{position:relative;width:400px;height:var(--game-height,704px);min-height:0;max-height:none;display:grid;grid-template-rows:40px var(--stage-height,225px) 439px;gap:0;border:0;border-radius:5px;overflow:hidden;padding:0;margin:0}
.game-design .topbar{width:400px;height:40px;min-height:0;padding:0 10px;gap:4px}
.game-design .brand{font-size:18px;line-height:1;letter-spacing:.2px}
.game-design .brand-glyph{width:22px;height:22px;font-size:22px;margin-right:6px}
.game-design .top-actions{gap:3px}
.game-design .top-actions .icon-button{width:32px;height:34px;padding:6px}
.game-design .top-actions .icon-button svg{width:19px;height:19px}
.game-design .stage{width:400px;height:var(--stage-height,225px);min-height:0;flex:none;aspect-ratio:auto}
.game-design .hero-video{object-fit:contain;object-position:center}
.game-design .hero-art{width:100%;height:100%;inset:0;object-position:center;object-fit:contain}
.game-design .play-area{width:400px;height:439px;padding:0;display:grid;grid-template-rows:32px 28px 235px 144px;gap:0;min-height:0}
.game-design .fever-meter{height:32px;min-height:0;margin:0;padding:4px 16px 3px}
.game-design .fever-meter-heading{font-size:11px;line-height:15px;white-space:nowrap}
.game-design .fever-meter-heading strong{font-size:14px;line-height:15px}
.game-design .fever-meter-heading b{font-size:13px}
.game-design .fever-track{height:3px;margin:5px 0 0}
.game-design .fever-caption{display:none}
.game-design .reel-frame{width:400px;height:235px;min-height:0;max-height:235px;margin:0;padding:0;aspect-ratio:auto}
.game-design .reels{inset:28px 32px;gap:2px;aspect-ratio:auto}
.game-design .reels{grid-template-columns:repeat(var(--reel-columns,5),minmax(0,1fr))}
.game-design .reel-column{grid-template-rows:repeat(var(--reel-rows,3),minmax(0,1fr));min-height:0}
.game-design .payline-overlay{inset:28px 32px}
.game-design .symbol-tag{font-size:9px}
.game-design .machine-console{position:relative;display:block;width:400px;height:144px;min-height:0;margin:0;padding:0;gap:0;isolation:isolate}
.game-design .machine-console:before{inset:4px 0;background-size:100% 100%;}
.game-design .console-screen{position:absolute;left:30px;top:25px;width:340px;height:22px;min-height:0;margin:0;display:block}
.game-design .machine-console .wallet{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:340px;height:22px;margin:0;padding:0}
.game-design .machine-console .wallet>div{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;height:22px}
.game-design .machine-console .wallet>div+div{padding-left:10px;border-left:1px solid #49adc455}
.game-design .machine-console .wallet span{font:500 10px/1.1 'Noto Sans TC',sans-serif;letter-spacing:0;flex:0 0 auto;white-space:nowrap}
.game-design .machine-console .wallet strong{font-family:'Barlow Condensed',sans-serif;font-size:clamp(12px,calc(168px / var(--digits,7)),24px);font-weight:800;line-height:1;letter-spacing:0;white-space:nowrap;min-width:0;text-align:right}
.game-design .machine-console .credit-add{width:24px;height:24px;min-height:0;padding:4px;border-radius:5px;flex:0 0 24px}
.game-design .credit-add svg{width:17px;height:17px}
.game-design .machine-console .controls{position:absolute;left:26px;top:56px;width:348px;height:60px;min-height:0;display:grid;grid-template-columns:74px 168px 74px;gap:16px;align-items:stretch;padding:0;margin:0}
.game-design .machine-console .bet-control{width:74px;height:60px;min-height:0;max-height:60px;gap:3px;padding:2px 0;background:transparent;border:0;box-shadow:none}
.game-design .machine-console .bet-control>span{font:500 11px/1 'Noto Sans TC',sans-serif;letter-spacing:0}
.game-design .machine-console .bet-control>strong{font:800 25px/1 'Barlow Condensed',sans-serif}
.game-design .machine-console .bet-adjust-mark{display:flex;justify-content:center;gap:14px}
.game-design .bet-adjust-mark svg{width:13px;height:13px}
.game-design .spin-well{width:168px;height:60px}
.game-design .machine-console .spin-button{width:168px;height:60px;min-height:0;padding:0;background-size:contain!important}
.game-design .machine-console .spin-button>span{font:900 36px/1 'Barlow Condensed',sans-serif;letter-spacing:1px}
.game-design .console-modes{grid-template-rows:28px 28px;gap:4px}
.game-design .console-modes .turbo-button,.game-design .console-modes .mode-button{width:74px;height:28px;min-height:0;padding:2px;gap:3px;font:800 12px/1 'Barlow Condensed',sans-serif;letter-spacing:0;flex-direction:row;white-space:nowrap}
.game-design .console-modes .turbo-button svg{width:18px;height:18px}
.game-design .console-modes .mode-button svg{width:17px;height:17px}
.game-design .win-overlay{inset:auto 36px 31px;height:42px;padding:5px;gap:6px}
.game-design .win-overlay b{font-size:36px;line-height:1}
.game-design .combo-callout,.game-design .combo-callout.fever-announcement{inset:28px 32px;padding:8px 10px}
.game-design .combo-callout>strong,.game-design .combo-callout:not(.fever-announcement)>strong{font-size:23px;line-height:1.3}
.game-design .combo-callout>span{font-size:9px;line-height:1.2;letter-spacing:1px}
.game-design .combo-callout>b{font-size:30px;line-height:1.25}
.game-design .combo-callout>small{font-size:11px;line-height:1.3;margin-top:6px}
.game-design .browser-clearance{display:none}
/* The page is locked. Long rules/settings scroll only within the top-layer dialog. */
dialog{position:fixed;inset:auto;left:var(--dialog-left,10px);top:var(--dialog-top,10px);width:380px;max-width:none;min-width:0;max-height:var(--dialog-height,700px);margin:0;padding:18px;transform:scale(var(--dialog-scale,1));transform-origin:0 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;touch-action:pan-y;-webkit-overflow-scrolling:touch}
dialog .dialog-heading{position:sticky;top:-18px;z-index:2;padding-top:4px;background:#0d1e2a}
dialog input,dialog select{font-size:16px}
dialog input[type=range]{touch-action:none}
dialog .icon-button{width:36px;height:38px}


.game-design .spin-button.skip-ready{opacity:1;cursor:pointer;filter:brightness(1.12)}
.game-design .cabinet.presentation-skippable .reel-frame{cursor:pointer}
.game-design .win-overlay.visible{transition:none}
.game-design .combo-callout.visible{transition-duration:80ms}
.game-design .cabinet.presentation-skippable{cursor:pointer}
/* Only rolling cells get blur and compositor movement; settled cells stay sharp. */
.game-design .moving .symbol-art{filter:blur(2px);opacity:.8;animation:reel-roll .1s linear infinite;will-change:transform}
.game-design .moving .symbol-cell{overflow:hidden}
@keyframes reel-roll{from{transform:translateY(-28%) scaleY(1.3)}to{transform:translateY(28%) scaleY(1.3)}}
.game-design .gentle-motion .moving .symbol-art{filter:none;transform:none;will-change:auto}
@media(prefers-reduced-motion:reduce){.game-design .moving .symbol-art{animation:none;filter:none;transform:none;will-change:auto}}
.game-design .symbol-cell{contain:layout style}
.game-design .winning .symbol-art{animation:none}
.game-design .fever-active .reel-frame:after{animation:none}
.game-design .machine-console.auto-running:after{animation:none}
.game-design .fever-intro .reel-frame:after{animation:fever-border 1.2s ease-in-out 1}
.game-design .visual-paused *,.game-design .visual-paused:before,.game-design .visual-paused:after{animation-play-state:paused!important}
.game-design .auto-control-row{display:grid;grid-template-columns:42px 28px;gap:4px}
.game-design .console-modes .auto-control-row .mode-button{width:42px;font-size:11px;padding:1px;letter-spacing:0}
.game-design .settings-button{display:grid;place-items:center;width:28px;height:28px;padding:4px;background:#143340;border:1px solid #4e8c9b;border-radius:5px;color:#cafffa}
.game-design .settings-button svg{width:18px;height:18px}
.settings-dialog{padding:14px;overflow:hidden;height:min(620px,var(--dialog-height,620px))}
.settings-dialog[open]{display:flex;flex-direction:column;gap:0}
.settings-dialog .dialog-heading{position:static;flex-shrink:0;min-height:36px;margin:0 0 10px;padding:0}
.settings-dialog .dialog-heading h2{font-size:22px}
.settings-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 10px;flex-shrink:0}
.settings-tabs button{height:36px;min-width:0;padding:0 6px;white-space:nowrap;background:#132e3d;border:1px solid #466979;color:#aec9d2;border-radius:5px;font:600 14px/1 'Noto Sans TC',sans-serif}
.settings-tabs button[aria-selected=true]{color:#e9fffa;background:#175055;border-color:#77e8dc}
.settings-panel{display:flex;flex:1;min-height:0}
.settings-panel[hidden]{display:none!important}
.settings-panel form{display:flex;flex-direction:column;flex:1;min-height:0;margin:0}
.settings-scroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:0 3px 12px}
.settings-footer{flex-shrink:0;padding-top:10px;border-top:1px solid #426171}
.settings-footer .primary-dialog-button{height:42px;margin:0}
.settings-panel .track-title{margin:8px 0 12px;padding:10px}
.settings-panel .volume-field{margin:12px 0}
.settings-panel .check-row{margin:10px 0}
.settings-panel .setting-hint{font-size:12px;line-height:1.5}
/* AUTO fits one page; keep overflow recovery available when the keyboard opens. */
.settings-dialog:has(#auto-panel:not([hidden]),#audio-panel:not([hidden])){height:min(540px,var(--dialog-height,540px))}
.auto-settings-body{padding:0 2px 4px}
.auto-settings-body .auto-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;margin:0}
.auto-fields label{min-width:0;line-height:20px}
.auto-fields select,.auto-fields input[type=number]{height:44px;margin-top:5px;min-width:0}
.auto-settings-body .setting-hint{margin:12px 0;line-height:1.45}
.auto-stop-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.auto-stop-options .check-row{min-width:0;min-height:68px;margin:0;padding:10px 8px;gap:8px;border:1px solid #426979;border-radius:5px;background:#132e3d;font-size:13px;line-height:1.4}
.auto-stop-options .check-row input{flex:0 0 20px;margin:0}
.auto-stop-options .check-row:has(input:checked){border-color:#77e8dc;background:#175055;color:#e9fffa}
.auto-settings-body .form-error{font-size:12px;margin:8px 0 0}
.audio-settings-body{padding:0 2px 4px}
.audio-channel{margin-bottom:8px;padding:7px 10px 2px;background:#132e3d;border:1px solid #426979;border-radius:5px}
.audio-channel-heading{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:8px}
.audio-channel .check-row{min-width:0;margin:0;padding:0;min-height:24px;gap:8px;font-size:14px;line-height:20px}
.audio-channel .check-row input{flex:0 0 20px;margin:0}
.audio-channel output{color:#84f1e2;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
.audio-channel input[type=range]{display:block;width:100%;height:30px;margin:0;accent-color:#6ae1d5}
.audio-track{display:flex;flex-wrap:wrap;gap:2px 8px;margin:0 0 5px;color:#b6fff4;font-size:12px;line-height:17px}
.audio-track small{color:#94b1c2;font-size:11px}
.audio-settings-body .setting-hint{margin:8px 0 0;font-size:12px;line-height:17px}

/* One permanent glyph layout for idle, rolling, and settled balances. */
.game-design .machine-console .wallet #credits{position:relative;display:inline-flex;align-items:center;font:800 24px/28px 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums;height:28px;flex-shrink:0}
.game-design .machine-console .wallet #credits .credit-value{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.game-design .machine-console .wallet #credits .credit-reels{display:inline-flex;align-items:center;pointer-events:none}
.game-design .machine-console .wallet #credits .credit-reels,
.game-design .machine-console .wallet #credits .credit-reels *{font:800 24px/28px 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;color:inherit;-webkit-text-size-adjust:none;text-size-adjust:none}
#credits .credit-digit{display:block;flex:0 0 1ch;width:1ch;height:28px;overflow:hidden}
#credits .credit-strip{display:block;text-align:center}
#credits.credit-rolling .credit-strip{will-change:transform}
#credits .credit-strip b{display:block;height:28px}
#credits .credit-separator{display:block;flex:none;height:28px}
.game-design .machine-console .wallet #credits.credit-rolling .credit-reels,
.game-design .machine-console .wallet #credits.credit-rolling .credit-reels *{color:#fcffe8;-webkit-text-fill-color:#fcffe8;text-shadow:0 0 2px #fff,0 0 6px #daff43,0 0 11px #75ffd5}
#credits.credit-rolling .credit-reels{background:radial-gradient(ellipse,#bbff332b,transparent 75%);box-shadow:0 0 9px #a9ff382b;border-radius:3px}
.game-design .console-modes #auto[aria-pressed=true]{color:#fff5a6;border-color:#ffe369;background:linear-gradient(#907214,#524315);box-shadow:inset 0 0 15px #ffe67755,0 0 8px #ffb32244}
.game-design .machine-console .spin-button>span{font-size:32px;white-space:nowrap}

.game-design .fever-track>i{transition:width .16s ease-out}

.game-design .fever-meter-heading{gap:0}
.game-design .fever-meter-heading b{font-size:11px;letter-spacing:1px;margin-left:5px}
.game-design .fever-meter-heading strong{font-size:12px}
.reactor-preview{padding:10px 12px;border:1px solid #9972c2;color:#f1d5ff;background:#281d3d;font-weight:700;border-radius:5px}
.reactor-tier-list{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:9px 0}
.reactor-tier-list>div{padding:7px 3px;text-align:center;border:1px solid #526d79;background:#152b38;border-radius:4px}
.reactor-tier-list span{display:block;font:12px 'Barlow Condensed',sans-serif;color:#c1d4db}
.reactor-tier-list b{font:800 22px 'Barlow Condensed',sans-serif;color:#fff0b3}
.reactor-tier-list small{display:block;font-size:12px;white-space:nowrap;color:#e3eef0}
.reactor-probabilities{width:100%;font-size:12px;font-variant-numeric:tabular-nums}
.reactor-probabilities th,.reactor-probabilities td{padding:7px 3px;text-align:center}
.reactor-rules{border:1px solid #897449;padding:12px;border-radius:5px;margin:14px 0;background:#2b291b}
.game-design .critical-strip{display:flex;align-items:center;gap:7px;width:400px;height:28px;padding:2px 16px;background:linear-gradient(#102632,#091823);border-bottom:1px solid #416b78;box-sizing:border-box}
.critical-strip>span{flex:0 0 46px;font:600 10px/1.1 'Noto Sans TC',sans-serif;color:#a9d5da;letter-spacing:0}
.critical-bar{position:relative;display:grid;grid-template-columns:repeat(var(--segment-count),1fr);flex:1;min-width:0;height:20px}
.critical-bar>span{position:relative;display:grid;place-items:center;color:#63727b;background:#101e27;border:1px solid #2c414d;font:700 13px/18px 'Barlow Condensed',sans-serif;--factor-color:#a5fff1}
.critical-bar>span[data-factor="2"]{--factor-color:#83d9ff}.critical-bar>span[data-factor="3"]{--factor-color:#c1a0ff}.critical-bar>span[data-factor="4"]{--factor-color:#f9a1fb}.critical-bar>span[data-factor="5"]{--factor-color:#ffe276}
.critical-bar>span.available{color:var(--factor-color);border-color:var(--factor-color);background:#254556;box-shadow:inset 0 0 8px #81e2ff26}
.critical-bar>span.available:not([data-factor="1"]){background:#422e4e}
.critical-bar>span.selected.available{color:#fffcef;text-shadow:0 0 4px var(--factor-color);box-shadow:inset 0 0 10px #9ef7ff55}
/* Alternate only the two available cells; no pointer and no perpetual idle work. */
.critical-bar>span:after{content:'';position:absolute;inset:0;border:1px solid #fff9c8;background:#d7fcff55;box-shadow:0 0 7px var(--factor-color);opacity:0;pointer-events:none}
.critical-bar[data-phase=rolling]>.available:after{animation:critical-lamp .36s steps(1,end) infinite;will-change:opacity}
.critical-bar[data-phase=rolling]>.available:not([data-factor="1"]):after{animation-delay:-.18s}
.critical-bar[data-phase=landed]>.selected{animation:critical-lock .3s ease-out 1}
.critical-bar[data-phase=landed]>.selected:after{opacity:.45}
.critical-bar[data-phase=landed]>.available:not(.selected){color:#7c919d;background:#132532;box-shadow:none;border-color:#3d5864}
@keyframes critical-lamp{0%,100%{opacity:1}50%{opacity:0}}
@keyframes critical-lock{from{background:#fff9c9;color:#173648}to{background:#254556;color:#fffcef}}
@media(prefers-reduced-motion:reduce){.critical-bar[data-phase=rolling]>.available:after,.critical-bar[data-phase=landed]>.selected{animation:none;will-change:auto}}
.game-design #bet.insufficient-credit,#bet-preview.insufficient-credit{color:#ff7887!important;-webkit-text-fill-color:#ff7887;text-shadow:0 0 8px #ff40584d}
.game-design .bet-control.insufficient-bet{border-color:#fa6a78}
.credit-warning-balance{padding:12px;background:#291e2c;border:1px solid #d66877;color:#ffb0b9;font-variant-numeric:tabular-nums}
.credit-warning-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}
.credit-warning-actions button{margin:0;min-height:48px;font-size:16px}
