/* Scene placement only. Player controls retain the Space game's stylesheet. */
.app{background:#36c8df;--hud-top:85vh;--hud-center:50vw}
.whale-stage{position:absolute;inset:0;overflow:hidden}
.scene-art-comparison{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));z-index:6;width:218px;padding:9px;border:1px solid #b8d4e84a;border-radius:8px;background:#092032ed;box-shadow:0 3px 12px #00122324;color:#ecf5fb;font:600 12px Arial,sans-serif}
.scene-art-comparison label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.scene-art-comparison select{min-width:0;max-width:170px;background:#173a51;color:#fff4d5;border:1px solid #8d9eaa;border-radius:4px;padding:4px 6px;font:inherit}
.background-variants{display:flex;gap:5px}
.background-variants button{flex:1;border:1px solid #7790a0;border-radius:4px;padding:7px 3px;background:#133247;color:#e1edf5;font:inherit;cursor:pointer}
.background-variants button[aria-pressed=true]{background:#f1ce7c;border-color:#ffe7ac;color:#122b3d}
.background-variants button:hover{filter:brightness(1.1)}
.board-size-comparison{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(48px,calc(env(safe-area-inset-top) + 48px));z-index:6;width:150px;padding:4px;border:1px solid #b8d4e84a;border-radius:6px;background:#092032ed;color:#ecf5fb;font:600 10px Arial,sans-serif}
.board-size-comparison button{padding:6px 1px}
.board-size-comparison button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.app[data-super-welcome=true] .board-size-comparison{visibility:hidden;pointer-events:none}
.scene-art-comparison :is(button,select,input):focus-visible{outline:2px solid #fff;outline-offset:2px}
.scene-art-comparison .premium-background-toggle{margin:7px 0 0;padding-top:7px;border-top:1px solid #b8d4e830;cursor:pointer;min-height:24px}
.scene-art-comparison .premium-background-toggle input{appearance:auto;flex:none;width:16px;height:16px;margin:0;accent-color:#f1ce7c;cursor:pointer}
.scene-art-comparison :disabled{opacity:.45;cursor:wait}
.app[data-super-welcome=true] .scene-art-comparison{visibility:hidden;pointer-events:none}
@media(max-width:480px){.scene-art-comparison{width:min(210px,calc(100vw - 180px));font-size:10px;padding:6px;top:max(10px,env(safe-area-inset-top))}.scene-art-comparison select{max-width:calc(100% - 32px);padding:4px 2px}.scene-art-comparison .background-variants button{padding:7px 1px}}
@media(min-width:481px) and (max-width:1100px){.scene-art-comparison{width:150px;padding:7px;font-size:10px}.scene-art-comparison select{max-width:95px}.background-variants button{padding:6px 1px}}
a.preview-action{color:inherit;text-decoration:none}a.preview-action:hover{background:#ffffff10;border-color:#d8b567}
.bonus-preview-options{border:0;padding:12px 0;margin:4px 0 12px;min-width:0}
.bonus-preview-options legend{font-size:13px;font-weight:700;color:#ffe6a0}
.bonus-preview-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bonus-preview-counts button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 3px;background:#163546;border:1px solid #a38648;border-radius:8px;color:#ffe7a1;cursor:pointer}
.bonus-preview-counts button:hover{background:#274c60;border-color:#ffe2a1}
.bonus-preview-counts button:disabled{opacity:.4;cursor:default}
.bonus-preview-counts strong{font-size:24px;line-height:1}
.bonus-preview-counts span,.bonus-preview-options>small{font-size:10px}
.bonus-preview-options>small{display:block;margin-top:8px;color:#b4c3cc}
#game{display:block;width:100%;height:100%;touch-action:manipulation}
.super-wave-transition{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:4;pointer-events:none;background:transparent}
#super-continue{position:absolute;inset:0;width:100%;height:100%;z-index:5;border:0;border-radius:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation}
#super-continue:focus-visible{outline:none}
.app[data-keyboard-input=true] #super-continue:focus-visible~.all-access-welcome .bonus-entry-art::after{content:"";position:absolute;left:35%;right:35%;top:89%;height:2px;background:#fff3bc}
@font-face{font-family:WhaleDisplay;src:url('assets/fonts/TitanOne-Regular.ttf') format('truetype');font-weight:400;font-display:block}
@font-face{font-family:WhaleLettering;src:url('assets/fonts/LilitaOne-Regular.ttf') format('truetype');font-weight:400;font-display:block}
.all-access-welcome{position:absolute;inset:0;z-index:3;pointer-events:none;display:grid;place-items:center;--welcome-opacity:1;opacity:var(--welcome-opacity);background:rgb(3 14 28 / 35%)}
/* Size against the screen: a fixed reference-game pixel cap was too small
   on larger displays. Preserve the supplied artwork's complete silhouette. */
.bonus-entry-art{position:relative;isolation:isolate;width:min(1035px,max(720px,55.5vw),70.5vw,58.5dvh * 2688 / 1520);aspect-ratio:2688/1520;--panel-glow:255 192 68;opacity:var(--panel-opacity,1);transform:translateY(var(--panel-y,0%)) rotate(var(--panel-angle,0deg)) scale(var(--panel-scale,1));will-change:transform,opacity}
.bonus-popup-light{position:absolute;inset:-25%;z-index:0;width:150%;height:150%;pointer-events:none}
.all-access-welcome[data-feature=super] .bonus-entry-art{--panel-glow:64 210 255}
.all-access-welcome[data-feature=hidden] .bonus-entry-art{--panel-glow:255 70 108}
.bonus-entry-art img{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 16px rgb(var(--panel-glow) / 65%)) drop-shadow(0 0 36px rgb(var(--panel-glow) / 32%))}
@media(max-width:600px){.bonus-entry-art{width:min(70.5vw,58.5dvh * 2688 / 1520)}}
@media(prefers-reduced-motion:reduce){.bonus-entry-art{transform:none!important}}
.app[data-super-welcome=true] .control-area,.app[data-super-welcome=true] .preview-badge{visibility:hidden;pointer-events:none}
.app:is([data-super-welcome=true],:has(.bonus-result[open])) :is(.hidden-math-test,.ui-free-label,.control-area,.preview-badge,.scene-art-comparison,.board-size-comparison){visibility:hidden;pointer-events:none}
.control-area{top:var(--hud-top);left:var(--hud-center);right:auto;bottom:auto;transform:translateX(-50%);width:max-content;height:var(--control-height)}
.preview-badge{position:absolute;right:16px;top:14px;z-index:2;padding:7px 10px;border:1px solid #ffffff45;border-radius:4px;background:#0d273ac9;color:#e5f5fa;font-size:9px;font-weight:700;letter-spacing:.1em}
.preview-badge:hover{background:#102635}.preview-panel{left:max(12px,calc(var(--hud-center) - 410px));bottom:calc(100dvh - var(--hud-top) + 10px);max-height:calc(var(--hud-top) - 20px);top:auto}
.hud-dialog{overscroll-behavior:contain}.hud .spin{touch-action:manipulation}
.music-controls{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:center;padding:10px 0 16px;border-bottom:1px solid #ffffff20;margin-bottom:10px}
.music-controls button{background:#163546;color:#fff0bd;border:1px solid #9f8b55;border-radius:7px;padding:10px;cursor:pointer}
.music-controls button[aria-pressed=true]{color:#b0bec6;border-color:#657581}
.music-controls label{font-size:12px;color:#d9e9ef}.music-controls output{float:right}
.music-controls input{display:block;width:100%;margin:8px 0 0;accent-color:#efc762}.music-controls small{grid-column:1/-1;color:#a8becb;font-size:11px}
.app[data-phase=spinning] .spin svg{animation:rotate .65s linear infinite}
.demo-mode{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;margin:14px 0 8px}
.demo-mode select{font:inherit;padding:9px 12px;border:1px solid #ad985b;border-radius:5px;background:#163546;color:#fff0bd}
#demo-mode-status{display:block;margin-bottom:14px;color:#b4c3cc;font-size:11px;line-height:1.45}
.app:is([data-demo-mode=super-bonus],[data-demo-mode=coin-bonus]) .bet-control{display:none}
.app:is([data-demo-mode=super-bonus],[data-demo-mode=coin-bonus]) .bonus-meter>small{display:block;height:auto;font-size:7px;color:#c7c1ad}
@media(max-width:480px){.preview-badge{font-size:8px;top:max(10px,env(safe-area-inset-top));right:12px}.preview-panel{left:12px;width:calc(100vw - 24px)}}
@media(min-width:481px) and (max-width:700px){.preview-panel{left:12px}}

#payline-rules{margin:14px 0;color:#d9e9ef;font-size:12px}#payline-rules summary{cursor:pointer;font-weight:700;color:#ffe6a0}
#payline-diagrams{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}#payline-diagrams figure{margin:0;text-align:center}#payline-diagrams svg{display:block;width:100%}#payline-diagrams figcaption{padding-top:3px;font-size:10px}
