/* Reference scene assembly. Rendering/result controllers retain their IDs. Transparent HUD; purchase surfaces and frame use one original gold profile. */ @media(orientation:landscape){ html:has(#stage.soft-cabinet),body:has(#stage.soft-cabinet){height:100%;min-height:0;overflow:hidden} body #stage.soft-cabinet.premium-world{height:100dvh;min-height:0;max-height:100dvh} body #stage.soft-cabinet.premium-world #hud{top:auto;bottom:0;height:clamp(90px,18dvh,160px)} body #stage.soft-cabinet.premium-world #funds{left:49%;top:26%;width:23%;font-size:clamp(14px,1.4vw,27px)} body #stage.soft-cabinet.premium-world #funds span{font-size:inherit} body #stage.soft-cabinet.premium-world #result{left:22%;width:25%;top:30%} body #stage.soft-cabinet.premium-world #spinControls{left:73%;width:24%;top:2%} body #stage.soft-cabinet.premium-world .utilities{left:8%;top:30%;display:flex;flex-direction:row;flex-wrap:nowrap;width:12%;gap:6px} body #stage.soft-cabinet.premium-world #spin{width:clamp(44px,10dvh,108px);height:clamp(44px,10dvh,108px)} body #stage.soft-cabinet.premium-world .utilities button{position:static;width:clamp(28px,2.3vw,44px);height:clamp(28px,2.3vw,44px)} body #stage.soft-cabinet.premium-world #board{height:calc(100% - clamp(90px,18dvh,160px) - 9%)} } @font-face { font-family:'Rotto Display'; src:url('/assets/Anton-Regular.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; } #stage.soft-cabinet.premium-world { --feature-frame:url('/assets/olympus-feature-stone-v5.webp'); } #stage.soft-cabinet.premium-world:after { background:linear-gradient(180deg,transparent,#39172b40); } #stage.soft-cabinet.premium-world #board { border:0; border-radius:0; overflow:visible; isolation:isolate; --reel-inset-x:5%; --reel-inset-y:8%; background:none; box-shadow:none; backdrop-filter:none; } #stage.soft-cabinet.premium-world #board:after, .olympus-opening .opening-board:after { content:''; position:absolute; inset:4% 2.6% 5.5%; border-radius:6% / 12%; background:linear-gradient(120deg,#522075,#311544); z-index:0; pointer-events:none; } #stage.soft-cabinet.premium-world #reelGrid { position:absolute; inset:var(--reel-inset-y) var(--reel-inset-x); overflow:hidden; z-index:1; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100% / 6 - 1px),#e7c36438 calc(100% / 6 - 1px),#e7c36438 calc(100% / 6)); } #stage.soft-cabinet.premium-world #board:before { border:0; border-image:none; border-radius:0; clip-path:none; box-shadow:none; background:url('/assets/olympus-board-gold-v5.png') center/100% 110% no-repeat; z-index:9; pointer-events:none; } #stage.soft-cabinet.premium-world #board .cell { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); } #stage.soft-cabinet.premium-world #board .symbol { width:90%; height:86%; min-height:0; max-height:86%; aspect-ratio:auto; } #stage.soft-cabinet.premium-world :is(#buy,#ante,#featureMeter,#freeMeter,#history) { background:var(--feature-frame) center 41%/100% 134% no-repeat; border:0; border-image:none; border-radius:18px; box-shadow:none; filter:none; transform:none; } #stage.soft-cabinet.premium-world #buy:before, #stage.soft-cabinet.premium-world #ante:before { display:none; } #stage.soft-cabinet.premium-world :is(#buy,#ante):after { display:none; } #stage.soft-cabinet.premium-world #ante, #stage.soft-cabinet.premium-world #ante[aria-pressed=true] { background:url('/assets/olympus-ante-parchment-v5.webp') center/100% 103% no-repeat; } #stage.soft-cabinet.premium-world :is(#buy,#ante) :is(span,strong,small) { text-align:center; } #stage.soft-cabinet.premium-world #buy>span { color:#faf3ff; text-shadow:0 2px #3c1646,0 0 2px #190924; } #stage.soft-cabinet.premium-world #buy>#buyPrice { color:#ffeb91; text-shadow:0 2px #753619,0 0 2px #18071c; } #stage.soft-cabinet.premium-world #ante :is(span,strong,small) { color:#43234f; text-shadow:0 1px #fffce8; } #stage.soft-cabinet.premium-world #anteSwitch { background:none; color:#482446; } #stage.soft-cabinet.premium-world #anteSwitch:before { width:34px; height:18px; border:1px solid #b67d26; border-radius:12px; background:radial-gradient(circle at 24% 50%,#fff6cf 0 24%,transparent 27%),linear-gradient(#593832,#2b1822); } #stage.soft-cabinet.premium-world #ante[aria-pressed=true] #anteSwitch:before { background:radial-gradient(circle at 76% 50%,#fff6cf 0 24%,transparent 27%),linear-gradient(#85b346,#305b20); } #stage.soft-cabinet.premium-world #spin { background:#24151c60; border:2px solid white; box-shadow:none; } #stage.soft-cabinet.premium-world #spin svg { fill:white; stroke:none; width:70%; height:70%; } #stage.soft-cabinet.premium-world #spin { padding:0; } #stage.soft-cabinet.premium-world #history, #stage.soft-cabinet.premium-world #history:empty { background:var(--feature-frame) center 41%/100% 134% no-repeat; } #stage.soft-cabinet.premium-world #stopIcon { font-size:inherit; width:44%; height:44%; border:3px solid #ed3765; border-radius:4px; color:transparent; } #stage.soft-cabinet.premium-world .scene-toolbar { display:contents; } #stage.soft-cabinet.premium-world .scene-tool { border:1px solid #fff8df88; border-radius:999px; background:#21132160; padding:6px; color:white; } #stage.soft-cabinet.premium-world .scene-tool svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; } #stage.soft-cabinet.premium-world #funds { color:white; } #stage.soft-cabinet.premium-world #funds span { color:#ffdc62; } #stage.soft-cabinet.premium-world #status { display:none; } /* Reference rail: pale framed purchase/ante signs and a plain dark win ledger. */ #stage.soft-cabinet.premium-world #buy, #stage.soft-cabinet.premium-world #ante, #stage.soft-cabinet.premium-world #ante[aria-pressed=true] { background:url('/assets/olympus-ante-parchment-v5.webp') center/100% 106% no-repeat; border-radius:0; overflow:visible; backdrop-filter:none; filter:none; font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif; font-weight:800; } #stage.soft-cabinet.premium-world #buy>span, #stage.soft-cabinet.premium-world #ante>span { color:#ecf5ff; -webkit-text-stroke:.6px #203e77; paint-order:stroke fill; text-shadow:1px 1px 0 #173565,-1px -1px 0 #173565,0 2px 0 #173565; } #stage.soft-cabinet.premium-world #buy>#buyPrice, #stage.soft-cabinet.premium-world #ante>strong { color:#ffe15c; -webkit-text-stroke:.6px #573c18; paint-order:stroke fill; text-shadow:1px 1px 0 #543215,-1px -1px 0 #543215,0 2px 0 #543215; } #stage.soft-cabinet.premium-world #ante>small { color:#20376b; text-shadow:0 1px 0 white; line-height:1.08; letter-spacing:0; } #stage.soft-cabinet.premium-world #anteSwitch { display:flex; align-items:center; justify-content:center; gap:4px; color:#fff; text-shadow:1px 1px 0 #25150e; font-size:11px; } #stage.soft-cabinet.premium-world #anteSwitch:before { content:'➜'; display:grid; place-items:center; width:38px; height:23px; border:2px solid #d9a538; border-radius:4px; background:linear-gradient(#35e32b,#008d0a); color:white; font:900 28px/1 Arial; text-shadow:none; } #stage.soft-cabinet.premium-world #ante[aria-pressed=true] #anteSwitch:before { content:'✓'; background:linear-gradient(#35e32b,#008d0a); } #stage.soft-cabinet.premium-world #history, #stage.soft-cabinet.premium-world #history:empty { background:url('/assets/olympus-board-gold-v5.png') center/100% 110% no-repeat; border-radius:0; isolation:isolate; text-shadow:1px 1px 0 #160810; } #stage.soft-cabinet.premium-world #history:after, #stage.soft-cabinet.premium-world #history:empty:after { content:''; display:block; position:absolute; inset:5% 3%; border-radius:8%; background:linear-gradient(135deg,#382164,#160e35); z-index:-1; pointer-events:none; } #stage.soft-cabinet.premium-world #hud, #stage.soft-cabinet.premium-world #funds, #stage.soft-cabinet.premium-world #funds :is(div,button,span,b) { background:transparent; backdrop-filter:none; filter:none; box-shadow:none; border:0; font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif; font-weight:800; text-shadow:1px 1px 0 #352416; letter-spacing:0; } #stage.soft-cabinet.premium-world #funds b { color:#fff; overflow-wrap:normal; white-space:nowrap; } #stage.soft-cabinet.premium-world #funds span { color:#ffda36; } @media(orientation:landscape) { #stage.soft-cabinet.premium-world #buy { padding:12% 12%; } #stage.soft-cabinet.premium-world #ante { padding:12% 12%; } #stage.soft-cabinet.premium-world #left { left:8.5%; width:12%; top:12%; bottom:15%; grid-template-rows:24% 39% minmax(0,1fr); gap:2%; } #stage.soft-cabinet.premium-world #buy>span { font-size:1.65cqw; line-height:1; } #stage.soft-cabinet.premium-world #buy>#buyPrice { font-size:min(1.65cqw,calc(15cqw / var(--amount-chars,10))); line-height:1.05; } #stage.soft-cabinet.premium-world #ante>span { font-size:1.35cqw; line-height:1; } #stage.soft-cabinet.premium-world #ante>strong { font-size:2.1cqw; line-height:1.1; } #stage.soft-cabinet.premium-world #ante>small { font-size:1.05cqw; } #stage.soft-cabinet.premium-world #funds { font-size:1.65cqw; line-height:1.12; top:34%; } #stage.soft-cabinet.premium-world #funds span { font-size:1.5cqw; min-width:5cqw; } #stage.soft-cabinet.premium-world #history { padding:12% 12%; } #stage.soft-cabinet.premium-world .scene-tool { display:none; } #stage.soft-cabinet.premium-world #spin { padding:0; } #stage.soft-cabinet.premium-world #ante>small { display:block; } } @media(orientation:portrait) { html:has(#stage.soft-cabinet.premium-world) { background-position:85% center; } #stage.soft-cabinet.premium-world { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-content:stretch; grid-template-rows:clamp(68px,12dvh,108px) 16px auto 46px 96px minmax(106px,1fr) 44px 48px; grid-template-areas:'brand brand' 'headline headline' 'board board' 'result result' 'purchase mode' 'spin spin' 'toolbar toolbar' 'funds funds'; gap:6px; padding:max(8px,env(safe-area-inset-top)) 3vw max(8px,env(safe-area-inset-bottom)); } #stage.soft-cabinet.premium-world:after { inset:48% 0 0; background:linear-gradient(transparent,#32162845); } #stage.soft-cabinet.premium-world #brand { align-self:center; height:100%; } #stage.soft-cabinet.premium-world #brand h1 img { width:min(68vw,300px); height:clamp(68px,12dvh,108px); max-height:clamp(68px,12dvh,108px); object-fit:contain; } #stage.soft-cabinet.premium-world #headline { font-size:10px; } #stage.soft-cabinet.premium-world #boardSlot { height:min(60.645vw,calc(100dvh - 412px)); align-self:start; } #stage.soft-cabinet.premium-world #board { width:min(100cqw,155cqh); aspect-ratio:1.55; } #stage.soft-cabinet.premium-world #result { align-self:center; } #stage.soft-cabinet.premium-world #resultLabel { font-size:10px; } #stage.soft-cabinet.premium-world #win { font-size:30px; line-height:1.05; } #stage.soft-cabinet.premium-world #left { display:contents; } #stage.soft-cabinet.premium-world :is(#buy,#featureMeter) { grid-area:purchase; } #stage.soft-cabinet.premium-world :is(#ante,#freeMeter) { grid-area:mode; } #stage.soft-cabinet.premium-world :is(#buy,#ante,#featureMeter,#freeMeter) { padding:13px 12px; border-radius:16px; overflow:hidden; } #stage.soft-cabinet.premium-world #buy { gap:5px; } #stage.soft-cabinet.premium-world #buy>span { font-size:16px; line-height:1.04; } #stage.soft-cabinet.premium-world #buy>span br { display:block; } #stage.soft-cabinet.premium-world #buy>#buyPrice { font-size:min(25px,calc(245px / var(--amount-chars,10))); line-height:1.1; } #stage.soft-cabinet.premium-world #ante, #stage.soft-cabinet.premium-world #ante[aria-pressed=true] { display:flex; flex-direction:column; gap:2px; } #stage.soft-cabinet.premium-world #ante>span { font-size:13px; } #stage.soft-cabinet.premium-world #ante>strong { font-size:min(23px,calc(230px / var(--amount-chars,10))); line-height:1.1; } #stage.soft-cabinet.premium-world #anteSwitch { flex-direction:row; gap:5px; margin:2px 0 0; font-size:8px; } #stage.soft-cabinet.premium-world #spinControls { align-self:center; width:100%; height:112px; padding-right:28%; } #stage.soft-cabinet.premium-world #spin { width:92px; height:92px; padding:0; } #stage.soft-cabinet.premium-world .spinrow { gap:12px; } #stage.soft-cabinet.premium-world .round { width:36px; height:36px; font-size:27px; } #stage.soft-cabinet.premium-world .subrow { display:none; } #stage.soft-cabinet.premium-world #history, #stage.soft-cabinet.premium-world #history:empty { display:flex; visibility:visible; grid-area:spin; position:relative; right:auto; top:auto; bottom:auto; justify-self:end; align-self:center; width:25%; height:102px; max-height:none; padding:9px; align-items:stretch; justify-content:flex-end; } #stage.soft-cabinet.premium-world #history:before { display:none; } #stage.soft-cabinet.premium-world .historyRow { font-size:9px; } #stage.soft-cabinet.premium-world .scene-toolbar { grid-area:toolbar; position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; gap:6px; padding:0 2px; z-index:4; } #stage.soft-cabinet.premium-world .scene-tool, #stage.soft-cabinet.premium-world .scene-toolbar #speed, #stage.soft-cabinet.premium-world .scene-toolbar #auto { display:grid; place-items:center; height:38px; min-height:38px; width:58px; min-width:0; border:0; background:#25152268; border-radius:999px; padding:5px; order:initial; font-size:0; } #stage.soft-cabinet.premium-world .scene-toolbar #auto:after { content:''; width:28px; height:24px; background:url('/assets/slot-autoplay.svg') center/contain no-repeat; } #stage.soft-cabinet.premium-world .scene-toolbar #auto[aria-pressed=true] { background:#7f342889; } #stage.soft-cabinet.premium-world .scene-toolbar #speed svg { width:38px; height:22px; } #stage.soft-cabinet.premium-world .utilities { display:none; } #stage.soft-cabinet.premium-world #funds { display:flex; flex-direction:column; align-self:center; font-size:21px; gap:1px; line-height:1.05; padding:0; } #stage.soft-cabinet.premium-world #funds>div, #stage.soft-cabinet.premium-world #betOpen { display:flex; justify-content:center; width:auto; flex:none; padding:0; } #stage.soft-cabinet.premium-world #funds span { font-size:16px; flex-shrink:0; white-space:nowrap; } } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog { background:url('/assets/olympus-board-gold-v5.png') center/100% 110% no-repeat,linear-gradient(135deg,#4c2c83,#221244) center/94% 88% no-repeat; border:0; border-radius:28px; padding:32px 40px 28px; width:min(640px,calc(100vw - 12px)); max-height:calc(100dvh - 20px); box-shadow:none; overflow:auto; animation:olympus-feature-open 320ms cubic-bezier(.16,.85,.28,1); } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog::backdrop { background:#130914aa; backdrop-filter:none; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .purchase-heading h2 { font-size:clamp(24px,5vw,43px); margin:0 0 4px; padding:0; color:#fff3dc; line-height:1.03; text-shadow:0 2px 1px #472719,0 0 4px #130815; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .purchase-heading small { display:block; text-align:center; color:#f4d699; font-size:12px; letter-spacing:.1em; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .purchase-crown { display:none; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .largePrice { font-size:clamp(32px,9vw,66px); margin:12px 0 6px; color:#fff09a; line-height:1.1; text-shadow:0 3px 1px #702a17,0 0 4px #11040c; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .close { display:none; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .betrow { max-width:340px; margin:6px auto; gap:10px; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .betrow b { background:none; font-size:18px; min-width:0; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .betrow button { width:34px; height:34px; min-width:34px; border-radius:50%; border:1px solid #fff0cba0; padding:0; background:#28111340; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .actions { display:flex; justify-content:space-between; gap:40px; width:min(320px,100%); margin:12px auto 0; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .actions button { flex:0 1 112px; min-height:68px; padding:6px 14px; border:2px solid #efd16c; border-radius:18px; background:linear-gradient(#9fda57,#579420 58%,#286914); color:white; box-shadow:inset 0 2px 2px #f5ffd6,0 3px 5px #11040c88; display:flex; flex-direction:column; align-items:center; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .actions button svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:6; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .actions button span { font-size:10px; letter-spacing:.07em; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .actions button.cancel { background:linear-gradient(#f16b59,#c0362b 58%,#8f1c20); box-shadow:inset 0 2px 2px #ffd5ad,0 3px 5px #11040c88; } @keyframes olympus-feature-open { from { opacity:0; transform:scale(.65); } to { opacity:1; transform:scale(1); } } @media(prefers-reduced-motion:reduce) { body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog { animation:none; } } @media(orientation:portrait) { body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog { padding:28px 28px 24px; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .purchase-heading h2 { font-size:clamp(23px,7vw,36px); } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .actions { gap:24px; width:86%; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .actions button { min-height:58px; flex-basis:90px; } } @media(orientation:landscape) and (max-height:500px) { body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog { padding:18px 30px; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .purchase-heading h2 { margin:0 0 4px; font-size:25px; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.purchase-dialog .largePrice { margin:8px 0; font-size:32px; } } @media(orientation:portrait) and (max-height:650px) { #stage.soft-cabinet.premium-world { grid-template-rows:54px 12px auto 34px 82px minmax(70px,1fr) 38px 44px; gap:4px; padding-top:4px; padding-bottom:4px; } #stage.soft-cabinet.premium-world #boardSlot { height:min(60.645vw,calc(100dvh - 376px)); } #stage.soft-cabinet.premium-world #brand h1 img { height:54px; max-height:54px; } #stage.soft-cabinet.premium-world #win { font-size:24px; } #stage.soft-cabinet.premium-world #resultLabel { font-size:8px; } #stage.soft-cabinet.premium-world :is(#buy,#ante,#featureMeter,#freeMeter) { padding:10px 10px; } #stage.soft-cabinet.premium-world #buy>span { font-size:13px; } #stage.soft-cabinet.premium-world #buy>#buyPrice { font-size:min(20px,calc(198px / var(--amount-chars,10))); } #stage.soft-cabinet.premium-world #ante>span { font-size:11px; } #stage.soft-cabinet.premium-world #ante>strong { font-size:min(19px,calc(190px / var(--amount-chars,10))); } #stage.soft-cabinet.premium-world #spinControls { height:86px; } #stage.soft-cabinet.premium-world #spin { width:78px; height:78px; padding:0; } #stage.soft-cabinet.premium-world .round { width:30px; height:30px; font-size:24px; } #stage.soft-cabinet.premium-world #history, #stage.soft-cabinet.premium-world #history:empty { height:78px; bottom:auto; } #stage.soft-cabinet.premium-world #funds { display:flex; flex-direction:column; font-size:18px; gap:1px; } #stage.soft-cabinet.premium-world #funds>div, #stage.soft-cabinet.premium-world #betOpen { display:flex; justify-content:center; width:auto; flex:none; padding:0; } #stage.soft-cabinet.premium-world #funds span { font-size:14px; } #stage.soft-cabinet.premium-world .scene-tool, #stage.soft-cabinet.premium-world .scene-toolbar #auto, #stage.soft-cabinet.premium-world .scene-toolbar #speed { height:34px; min-height:34px; width:50px; } } /* Full environmental opening: an illustrative reel demonstration, not cards. */ dialog.olympus-opening { position:fixed; inset:0; margin:0; width:100vw; max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; padding:0; overflow:hidden; color:white; background:url('/assets/rottolympus-environment-v10.webp') center/cover no-repeat; container-type:inline-size; isolation:isolate; } dialog.olympus-opening::backdrop { background:#130818; } .olympus-opening .opening-light { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 45% 30%,#ffdf7840,transparent 60%); animation:opening-atmosphere 6s ease-in-out infinite alternate; } .olympus-opening .opening-board { position:absolute; left:15%; top:15%; width:49%; height:67%; padding:0; border-radius:0; background:none; isolation:isolate; } .olympus-opening .opening-board::before { content:''; position:absolute; inset:0; background:url('/assets/olympus-board-gold-v5.png') center/100% 110% no-repeat; pointer-events:none; z-index:2; } .olympus-opening .opening-reels { position:absolute; inset:8% 5%; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); overflow:hidden; z-index:1; } .olympus-opening .opening-symbol { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); place-items:center; min-width:0; min-height:0; } .olympus-opening .opening-symbol .symbol-art { position:relative; inset:auto; display:block; width:84%; height:84%; min-width:0; min-height:0; max-width:84%; max-height:84%; aspect-ratio:auto; } .olympus-opening[data-slide="0"] .opening-match { animation:opening-match 1800ms ease-in-out infinite; } .olympus-opening .opening-presentation { position:absolute; left:68%; width:28%; top:12%; height:82%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1.1cqw; } .olympus-opening .opening-logo { width:100%; height:13cqw; object-fit:contain; filter:drop-shadow(0 4px 6px #4b132c); } .olympus-opening .opening-copy { font-size:1.6cqw; line-height:1.1; margin:0; color:#fff5d8; text-shadow:0 2px 2px #3d1731; } .olympus-opening .opening-dots { display:flex; gap:12px; } .olympus-opening .opening-dots i { display:block; width:12px; height:12px; border:1px solid #ffea9b; border-radius:50%; background:#81343c; } .olympus-opening .opening-dots .active { background:#ffda62; box-shadow:0 0 12px #ffe194; } .olympus-opening .opening-cap { margin:0; font-size:1.3cqw; color:#ffe393; text-shadow:0 2px #672c15; } .olympus-opening .opening-cap b { font-size:1.8cqw; } .olympus-opening .opening-play { width:9cqw; height:9cqw; border:2px solid white; border-radius:50%; padding:15px; background:#29101c60; box-shadow:0 3px 15px #4c1a2580; } .olympus-opening .opening-play svg { width:100%; height:100%; fill:white; } .olympus-opening .opening-preference { font-size:12px; display:flex; align-items:center; gap:8px; } .olympus-opening .opening-preference input { accent-color:#dfb649; width:20px; height:20px; } .olympus-opening .opening-disclaimer { display:block; font-size:10px; color:#f0dabd; } .olympus-opening .opening-language { position:absolute; z-index:2; right:16px; top:16px; border:1px solid #fff7db80; border-radius:50%; padding:8px; background:#3a182e80; color:white; } .olympus-opening :is(.opening-charge,.opening-scatters) { display:none; position:absolute; inset:10%; align-items:center; justify-content:center; filter:drop-shadow(0 0 20px #ffdb7180); background:#321031a0; border-radius:24px; z-index:1; } .olympus-opening[data-slide="1"] .opening-charge { display:flex; flex-direction:column; gap:10px; } .olympus-opening .opening-charge .symbol-art { width:45%; height:55%; } .olympus-opening .opening-charge b { font-size:3cqw; color:#ffeda5; } .olympus-opening[data-slide="2"] .opening-scatters { display:flex; } .olympus-opening .opening-scatters .symbol-art { width:24%; height:60%; } @keyframes opening-match { 50% { filter:drop-shadow(0 0 12px #ffe598); transform:scale(1.12); } } @keyframes opening-atmosphere { to { opacity:.45; } } @media(orientation:portrait) { .olympus-opening .opening-board { left:3%; top:22%; width:94%; height:60.645vw; padding:0; border-radius:18px; } .olympus-opening .opening-presentation { inset:0; width:100%; height:100%; display:block; padding:0 5%; } .olympus-opening .opening-logo { position:absolute; width:80%; height:18dvh; left:10%; top:2%; } .olympus-opening .opening-copy { position:absolute; left:6%; width:88%; top:calc(22% + 60.645vw + 16px); font-size:22px; } .olympus-opening .opening-dots { position:absolute; left:0; width:100%; top:calc(22% + 60.645vw + 77px); justify-content:center; } .olympus-opening .opening-cap { position:absolute; left:0; width:100%; top:calc(22% + 60.645vw + 103px); font-size:16px; } .olympus-opening .opening-cap b { font-size:24px; } .olympus-opening .opening-play { position:absolute; bottom:12%; left:calc(50% - 46px); width:92px; height:92px; } .olympus-opening .opening-preference { position:absolute; bottom:6.5%; left:0; width:100%; justify-content:center; } .olympus-opening .opening-disclaimer { position:absolute; bottom:3%; left:0; width:100%; } .olympus-opening .opening-charge b { font-size:32px; } } @media(orientation:portrait) and (max-height:650px) { .olympus-opening .opening-copy { font-size:17px; top:calc(22% + 60.645vw + 8px); } .olympus-opening .opening-dots { top:calc(22% + 60.645vw + 51px); } .olympus-opening .opening-cap { top:calc(22% + 60.645vw + 71px); font-size:12px; } .olympus-opening .opening-cap b { font-size:18px; } .olympus-opening .opening-play { width:62px; height:62px; left:calc(50% - 31px); bottom:11%; padding:8px; } } @media(prefers-reduced-motion:reduce) { .olympus-opening :is(.opening-light,.opening-match) { animation:none; } } @media(orientation:landscape) { body:has(#stage.soft-cabinet.premium-world) .cabinet-test { left:auto; right:8px; width:min(360px,40vw); } } /* One bundled condensed display face, including Turkish glyphs on phones. */ #stage.soft-cabinet.premium-world :is(#headline,#buy,#ante,#featureMeter,#freeMeter,#funds,#result,#auto), #stage.soft-cabinet.premium-world :is(#buy,#ante,#funds,#result) :is(span,strong,small,b,button,div), body:has(#stage.soft-cabinet.premium-world) #modal :is(h2,.largePrice,.betrow b,.actions span), .olympus-opening :is(.opening-copy,.opening-cap,.opening-play) { font-family:'Rotto Display',Impact,'Arial Narrow',sans-serif; font-weight:400; font-synthesis:none; } #stage.soft-cabinet.premium-world #buy>span, #stage.soft-cabinet.premium-world #ante>span { color:#f8fcff; -webkit-text-stroke:1px #163a84; paint-order:stroke fill; letter-spacing:.02em; } #stage.soft-cabinet.premium-world :is(#buy,#ante) { position:relative; isolation:isolate; } #stage.soft-cabinet.premium-world :is(#buy,#ante)>* { position:relative; z-index:2; } #stage.soft-cabinet.premium-world #buy:after, #stage.soft-cabinet.premium-world #ante:after { content:''; display:block; position:absolute; inset:9% 7%; z-index:1; pointer-events:none; border-radius:12%; background:linear-gradient(115deg,transparent 34%,#fff7c385 48%,transparent 62%); background-size:320% 100%; animation:olympus-plaque-light 6s ease-in-out infinite; } #stage.soft-cabinet.premium-world #ante:after { animation-delay:2s; opacity:.45; } #stage.soft-cabinet.premium-world :is(#buy,#ante):hover:not(:disabled) { filter:brightness(1.12); } #stage.soft-cabinet.premium-world :is(#buy,#ante):active:not(:disabled) { transform:scale(.98); } #stage.soft-cabinet.premium-world #anteSwitch { background:#30234a; border:1px solid #dcbb67; border-radius:4px; padding:1px 5px 1px 1px; width:max-content; margin:6px auto 0; } #stage.soft-cabinet.premium-world #funds b { font-size:1.2em; } @keyframes olympus-plaque-light { 0%,25% { background-position:100% 0; } 65%,100% { background-position:0% 0; } } @media(orientation:landscape) { #stage.soft-cabinet.premium-world #buy>span { font-size:2cqw; } #stage.soft-cabinet.premium-world #buy>#buyPrice { font-size:min(2.15cqw,calc(21cqw / var(--amount-chars,10))); } #stage.soft-cabinet.premium-world #ante>span { font-size:1.85cqw; } #stage.soft-cabinet.premium-world #ante>strong { font-size:2.65cqw; } #stage.soft-cabinet.premium-world #ante>small { font-size:1.25cqw; margin:8px 0; } #stage.soft-cabinet.premium-world #funds { width:27%; top:30%; } #stage.soft-cabinet.premium-world #anteSwitch { font-size:clamp(10px,.65cqw,16px); } } @media(prefers-reduced-motion:reduce) { #stage.soft-cabinet.premium-world :is(#buy,#ante):after { animation:none; background:none; } } #stage.soft-cabinet.premium-world #result[data-empty=true] :is(#resultLabel,#win) { display:none; } #stage.soft-cabinet.premium-world #result[data-empty=true] #status { display:block; color:white; font-size:clamp(13px,1.5cqw,32px); line-height:1.1; text-shadow:1px 2px 0 #3a291a; } @media(orientation:portrait) { #stage.soft-cabinet.premium-world #result[data-empty=true] #status { font-size:20px; } } /* Feature readouts belong to the scene, not the purchase-card skin. */ #stage.soft-cabinet.premium-world :is(#featureMeter,#freeMeter) { position:relative; isolation:isolate; background:none; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; filter:none; aspect-ratio:auto; min-height:0; height:100%; padding:0; gap:0; overflow:visible; display:flex; flex-direction:column; align-items:center; justify-content:center; text-shadow:0 2px 1px #29132d; } #stage.soft-cabinet.premium-world :is(#featureMeter,#freeMeter)[hidden] { display:none; } #stage.soft-cabinet.premium-world :is(#featureMeter,#freeMeter):before, #stage.soft-cabinet.premium-world :is(#featureMeter,#freeMeter):after { display:none; } #stage.soft-cabinet.premium-world :is(#featureMeter,#freeMeter)>span { font-size:1.35cqw; line-height:1.1; color:#fff3c8; letter-spacing:.045em; -webkit-text-stroke:.6px #593721; paint-order:stroke fill; text-shadow:0 2px 0 #593721,0 3px 5px #29132d70; } #stage.soft-cabinet.premium-world #featureMeter small { display:none; } #stage.soft-cabinet.premium-world .powerOrb { width:100%; height:9.4cqw; margin:0; flex:none; background:none; box-shadow:none; } #stage.soft-cabinet.premium-world .powerOrb:before { inset:0; background:url('/assets/rottolympus-win-emblem-v10.webp') center/contain no-repeat; filter:drop-shadow(0 4px 2px #24142880) drop-shadow(0 0 7px #ffe3a530); } #stage.soft-cabinet.premium-world .powerOrb:after { content:''; display:block; position:absolute; top:23%; left:48%; width:12%; height:22%; border:0; border-radius:0; transform:none; pointer-events:none; z-index:3; background:radial-gradient(ellipse 10% 50%,#fffde8,transparent),radial-gradient(ellipse 50% 10%,#fffde8,transparent); animation:olympus-jewel-glint 5.6s ease-in-out infinite; } #stage.soft-cabinet.premium-world .orbHalo { display:block; inset:12% 22%; border:0; transform:none; box-shadow:none; z-index:-1; background:radial-gradient(ellipse,#ffefaf85,transparent 70%); animation:olympus-meter-glow 3.8s ease-in-out infinite alternate; } #stage.soft-cabinet.premium-world .powerOrb #featureMultiplier { font-family:'Rotto Display',sans-serif; font-weight:400; font-size:2.9cqw; line-height:1; margin:0; color:#fffbe0; -webkit-text-stroke:1px #21565b; paint-order:stroke fill; text-shadow:0 2px 1px #153c46; } #stage.soft-cabinet.premium-world #freeMeter { background:radial-gradient(ellipse at center,#331a4266,transparent 72%); } #stage.soft-cabinet.premium-world .freeCount { flex-direction:column; align-items:center; gap:0; margin:.3cqw 0; } #stage.soft-cabinet.premium-world .freeCount #remaining { font-family:'Rotto Display',sans-serif; font-weight:400; font-size:5.6cqw; line-height:1.05; color:#ffe996; -webkit-text-stroke:1px #855021; paint-order:stroke fill; text-shadow:0 3px 0 #603114,0 5px 5px #25102e80; } @supports (background-clip:text) { #stage.soft-cabinet.premium-world .freeCount #remaining { background:linear-gradient(180deg,#fffde4 5%,#fff0a6 28%,#eeb94b 48%,#ffeeb1 51%,#e8a73d 83%,#b56b23); background-clip:text; -webkit-background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 2px 0 #6c391c) drop-shadow(0 4px 3px #25102e70); } } #stage.soft-cabinet.premium-world .freeCount span { font-size:.9cqw; color:#fff6dd; letter-spacing:.15em; } #stage.soft-cabinet.premium-world .freeProgress { width:68%; height:3px; margin:.65cqw 0 0; background:#402a3b80; box-shadow:0 1px 0 #fff0ac70,0 0 7px #ffcb5b30; border-radius:50%; } #stage.soft-cabinet.premium-world .freeProgress i { background:linear-gradient(90deg,#b07b32,#fff1b4,#d5a447); } @media(orientation:landscape) { #stage.soft-cabinet.premium-world.feature #left { left:7%; width:13.5%; grid-template-rows:35% 30% minmax(0,1fr); } } @media(orientation:portrait) { #stage.soft-cabinet.premium-world :is(#featureMeter,#freeMeter) { padding:0; gap:0; } #stage.soft-cabinet.premium-world :is(#featureMeter,#freeMeter)>span { font-size:14px; } #stage.soft-cabinet.premium-world .powerOrb { width:174px; max-width:100%; height:76px; margin:0; } #stage.soft-cabinet.premium-world .powerOrb #featureMultiplier { font-size:32px; } #stage.soft-cabinet.premium-world .freeCount { flex-direction:row; align-items:baseline; gap:6px; margin:0; } #stage.soft-cabinet.premium-world .freeCount #remaining { font-size:49px; } #stage.soft-cabinet.premium-world .freeCount span { font-size:11px; } #stage.soft-cabinet.premium-world .freeProgress { margin:5px 0 0; } } @media(orientation:portrait) and (max-height:650px) { #stage.soft-cabinet.premium-world :is(#featureMeter,#freeMeter)>span { font-size:12px; } #stage.soft-cabinet.premium-world .powerOrb { height:65px; width:146px; } #stage.soft-cabinet.premium-world .powerOrb #featureMultiplier { font-size:28px; } #stage.soft-cabinet.premium-world .freeCount #remaining { font-size:42px; } } @keyframes olympus-meter-glow { to { opacity:.45; transform:scale(.9); } } /* One number/unit treatment from the reel jewel to its collection target. */ #stage.soft-cabinet.premium-world :is(.cell .value,.multiplierFlight,#featureMultiplier) { display:flex; align-items:center; justify-content:center; gap:.035em; font-family:'Rotto Display',sans-serif; font-weight:400; white-space:nowrap; font-variant-numeric:tabular-nums; line-height:1; } #stage.soft-cabinet.premium-world :is(.cell .value,.multiplierFlight,#featureMultiplier) .multiplier-number { font:inherit; color:#fff9dc; letter-spacing:-.025em; text-shadow:0 2px 0 #164247; -webkit-text-stroke:.65px #24565c; paint-order:stroke fill; } #stage.soft-cabinet.premium-world :is(.cell .value,.multiplierFlight,#featureMultiplier) .multiplier-unit { font:900 1.05em/1 Arial,sans-serif; color:#ffdf7f; letter-spacing:0; -webkit-text-stroke:.4px #624a24; paint-order:stroke fill; text-shadow:0 1px 0 #293e3c; } #stage.soft-cabinet.premium-world .powerOrb #featureMultiplier { font-size:min(3.3cqw,calc(6.8cqw / var(--multiplier-digits,2))); } #stage.soft-cabinet.premium-world .cell .value { font-size:min(3cqw,calc(7.2cqw / var(--multiplier-digits,2))); } #stage.soft-cabinet.premium-world .multiplierFlight { filter:drop-shadow(0 0 5px #fff0a580); } @media(orientation:portrait) { #stage.soft-cabinet.premium-world .powerOrb #featureMultiplier { font-size:min(36px,calc(90px / var(--multiplier-digits,2))); } #stage.soft-cabinet.premium-world .cell .value { font-size:min(6cqw,calc(13cqw / var(--multiplier-digits,2))); } #stage.soft-cabinet.premium-world .multiplierFlight { font-size:5cqw; } } @keyframes olympus-jewel-glint { 0%,65%,100% { opacity:0; transform:scale(.45); } 76% { opacity:.95; transform:scale(1); } 88% { opacity:0; transform:scale(.6); } } /* Portrait reference: edge-to-edge board, paired signs, transparent single-line funds. */ @media(orientation:portrait) { #stage.soft-cabinet.premium-world { grid-template-rows:clamp(60px,10dvh,90px) 18px auto 38px 84px minmax(110px,1fr) 40px 28px; gap:4px; padding:4px 1vw max(6px,env(safe-area-inset-bottom)); } #stage.soft-cabinet.premium-world #brand h1 img { width:90vw; height:clamp(60px,10dvh,90px); max-height:90px; } #stage.soft-cabinet.premium-world #headline { font-size:clamp(9px,2.5vw,15px); } #stage.soft-cabinet.premium-world #boardSlot { height:min(70vw,calc(100dvh - 390px)); } #stage.soft-cabinet.premium-world #board { width:min(100cqw,143cqh); aspect-ratio:1.43; --reel-inset-y:8%; --reel-inset-x:5%; } #stage.soft-cabinet.premium-world :is(#buy,#ante) { width:92%; justify-self:center; padding:9px 12px; } #stage.soft-cabinet.premium-world #buy { background:url('/assets/olympus-feature-stone-v5.webp') center/100% 112% no-repeat; gap:2px; padding-top:13px; padding-bottom:12px; } #stage.soft-cabinet.premium-world #buy>span { font-size:16px; color:#88e6ff; } #stage.soft-cabinet.premium-world #ante>span { font-size:12px; } #stage.soft-cabinet.premium-world #ante>strong { font-size:20px; } #stage.soft-cabinet.premium-world #spinControls { padding-right:31%; height:118px; } #stage.soft-cabinet.premium-world #spin { width:104px; height:104px; } #stage.soft-cabinet.premium-world #history, #stage.soft-cabinet.premium-world #history:empty { width:31%; height:clamp(98px,17dvh,154px); margin-right:2%; } #stage.soft-cabinet.premium-world #funds { flex-direction:row; justify-content:center; align-items:center; gap:10px; width:100%; font-size:clamp(14px,4.1vw,23px); line-height:1; } #stage.soft-cabinet.premium-world #funds :is(span,b) { font-size:inherit; } #stage.soft-cabinet.premium-world #funds>div, #stage.soft-cabinet.premium-world #betOpen { align-items:baseline; gap:4px; font-size:inherit; } } @media(orientation:portrait) and (max-height:650px) { #stage.soft-cabinet.premium-world { grid-template-rows:50px 14px auto 28px 74px minmax(88px,1fr) 34px 24px; gap:3px; } #stage.soft-cabinet.premium-world #brand h1 img { height:50px; max-height:50px; } #stage.soft-cabinet.premium-world #boardSlot { height:min(70vw,calc(100dvh - 347px)); } #stage.soft-cabinet.premium-world #buy>span { font-size:13px; } #stage.soft-cabinet.premium-world #ante>strong { font-size:18px; } #stage.soft-cabinet.premium-world #spinControls { height:88px; } #stage.soft-cabinet.premium-world #spin { width:82px; height:82px; } #stage.soft-cabinet.premium-world #history, #stage.soft-cabinet.premium-world #history:empty { height:86px; } #stage.soft-cabinet.premium-world .scene-toolbar :is(.scene-tool,#speed,#auto) { height:32px; min-height:32px; } #stage.soft-cabinet.premium-world .powerOrb { height:58px; } } @media(prefers-reduced-motion:reduce) { #stage.soft-cabinet.premium-world .orbHalo { animation:none; } #stage.soft-cabinet.premium-world .powerOrb:after { animation:none; opacity:.3; } } /* No brown/burgundy panel surfaces. Gold is trim, not the panel material. */ /* v6 multiplier: artwork and lettering use the same 1000:714 contain box. */ #stage.soft-cabinet.premium-world .powerOrb:before { background-image:url('/assets/olympus-multiplier-orb-v6.webp'); } #stage.soft-cabinet.premium-world .powerOrb { height:auto; aspect-ratio:1000/714; max-height:calc(100% - 22px); } #stage.soft-cabinet.premium-world .powerOrb #featureMultiplier { position:absolute; inset:0; width:100%; height:100%; display:block; font-size:0; text-shadow:none; -webkit-text-stroke:0; overflow:hidden; } #stage.soft-cabinet.premium-world .cell .value { inset:7% 5%; width:90%; height:86%; display:block; font-size:0; text-shadow:none; -webkit-text-stroke:0; overflow:hidden; pointer-events:none; } #stage.soft-cabinet.premium-world .multiplier-lettering { display:block; width:100%; height:100%; overflow:hidden; } #stage.soft-cabinet.premium-world .multiplier-lettering text { font-family:'Arial Black',Arial,sans-serif; font-size:240px; font-weight:900; paint-order:stroke fill; stroke-linejoin:round; letter-spacing:-4px; } #stage.soft-cabinet.premium-world .multiplier-depth { fill:#ba37d4; stroke:#3a075a; stroke-width:14px; } #stage.soft-cabinet.premium-world .multiplier-face { stroke:#fcf3a3; stroke-width:4px; } #stage.soft-cabinet.premium-world .multiplierFlight { width:9cqw; height:6.426cqw; } @media(orientation:portrait) { #stage.soft-cabinet.premium-world .powerOrb { width:174px; height:76px; aspect-ratio:auto; max-height:calc(100% - 18px); } #stage.soft-cabinet.premium-world .multiplierFlight { width:24cqw; height:17.136cqw; } } #stage.soft-cabinet.premium-world #buy { /* One sculpted purchase surface: no miniature ornamental board frame. */ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px 14px 16px; overflow:hidden; border:0; border-radius:32px; background:url('/assets/olympus-purchase-shell-v7.svg') center/100% 100% no-repeat; box-shadow:none; filter:drop-shadow(0 5px 7px #180e344d); transition:box-shadow .2s ease,filter .2s ease,transform .15s ease; } #stage.soft-cabinet.premium-world #buy:before { content:''; display:block; position:absolute; inset:7% 4% 9%; z-index:0; pointer-events:none; border:0; border-radius:28px; opacity:.4; background:linear-gradient(115deg,transparent 35%,#e8c9ff40 49%,transparent 63%); background-size:320% 100%; animation:olympus-plaque-light 8s ease-in-out infinite; } #stage.soft-cabinet.premium-world #buy:after { inset:3% 2% 5%; height:auto; border:1px solid #efcfff; border-image:none; border-radius:30px; z-index:1; background:radial-gradient(ellipse at 50% 0%,#edc5ff38,transparent 65%); box-shadow:inset 0 0 14px #d79aff80,0 0 10px #d79aff60; opacity:.15; animation:olympus-purchase-breathe 3.6s ease-in-out infinite; } @keyframes olympus-purchase-breathe { 0%,100% { opacity:.12; } 50% { opacity:.85; } } #stage.soft-cabinet.premium-world #buy:disabled:before, #stage.soft-cabinet.premium-world #buy:disabled:after { animation:none; opacity:.1; } #stage.soft-cabinet.premium-world #buy>span { color:#faf3ff; -webkit-text-stroke:0; text-shadow:0 2px 3px #1c0f40; letter-spacing:.045em; line-height:1.07; } #stage.soft-cabinet.premium-world #buy>#buyPrice { width:94%; padding-top:4px; border-top:0; color:#ffec9b; -webkit-text-stroke:0; text-shadow:0 2px 3px #1c0f40; line-height:1.12; white-space:nowrap; } #stage.soft-cabinet.premium-world #buy:hover:not(:disabled) { box-shadow:none; filter:brightness(1.1) drop-shadow(0 0 12px #bd8dea66); } #stage.soft-cabinet.premium-world #buy>.shop-kicker { display:block; color:#fff0bd; font:400 clamp(11px,.85cqw,22px)/1 'Rotto Display',Impact,sans-serif; letter-spacing:.055em; text-shadow:0 1px 1px #291245,0 0 8px #ead0ff50; } #stage.soft-cabinet.premium-world #buy .purchase-action { display:inline; font:inherit; font-size:.7em; font-style:normal; letter-spacing:.08em; color:#f2e5ff; } @media(orientation:landscape) { #stage.soft-cabinet.premium-world #buy>span { font-size:1.7cqw; line-height:.98; } #stage.soft-cabinet.premium-world #buy>#buyPrice { font-size:min(2cqw,calc(21cqw / var(--amount-chars,10))); } } #stage.soft-cabinet.premium-world #buy:focus-visible { outline:2px solid #fff1b8; outline-offset:4px; } @media(orientation:portrait) { #stage.soft-cabinet.premium-world #buy { padding:8px 10px 10px; gap:2px; border-radius:24px; } #stage.soft-cabinet.premium-world #buy:before { border-radius:19px 8px 19px 8px; } #stage.soft-cabinet.premium-world #buy>span { font-size:16px; line-height:.92; } #stage.soft-cabinet.premium-world #buy>.shop-kicker { font-size:11px; letter-spacing:.05em; } #stage.soft-cabinet.premium-world #buy:after { border-radius:22px; } #stage.soft-cabinet.premium-world #buy>#buyPrice { padding-top:2px; } } @media(orientation:portrait) and (max-height:650px) { #stage.soft-cabinet.premium-world #buy { padding:6px 8px; gap:1px; } #stage.soft-cabinet.premium-world #buy>span { font-size:13px; } } @media(prefers-reduced-motion:reduce) { #stage.soft-cabinet.premium-world #buy { transition:none; } #stage.soft-cabinet.premium-world #buy:before { animation:none; background:none; } #stage.soft-cabinet.premium-world #buy:after { animation:none; opacity:.3; } } #stage.soft-cabinet.premium-world #ante, #stage.soft-cabinet.premium-world #ante[aria-pressed=true] { background:url('/assets/olympus-board-gold-v5.png') center/100% 110% no-repeat,linear-gradient(135deg,#fffef4,#eae6f7) center/94% 88% no-repeat; } #stage.soft-cabinet.premium-world #spin { background:#17142c60; } /* Non-modal bet drawer: the scene and outer stake controls remain interactive. */ body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog { position:absolute; inset:auto 2% 17% auto; margin:0; transform:none; width:min(320px,34%); max-height:72%; height:auto; overflow:auto; padding:22px 18px 16px; border:1px solid #d9b9f47a; border-radius:22px; background:#211331ed; box-shadow:0 6px 24px #12091c66; backdrop-filter:none; filter:none; animation:none; font-size:13px; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog::backdrop { background:transparent; backdrop-filter:none; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog:before, body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog:after { display:none; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog h2 { font-size:20px; margin:5px 25px 16px 0; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog .close { top:5px; right:7px; width:32px; height:32px; font-size:25px; padding:0; background:none; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog .betLabel { display:block; text-align:center; font-size:12px; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog .betrow { margin:7px 0 12px; gap:8px; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog .betrow b { font-size:20px; min-width:0; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog .betrow button { width:38px; height:38px; min-width:38px; font-size:24px; padding:0; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog p { font:11px/1.4 Arial,sans-serif; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog .actions { margin:10px 0 0; } body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog .actions button { padding:10px 15px; font-size:14px; } @media(orientation:portrait) { body:has(#stage.soft-cabinet.premium-world) dialog#modal.bet-dialog { width:min(280px,90%); right:3%; bottom:28%; max-height:58%; padding:18px 14px 12px; } } #stage.soft-cabinet.premium-world:after { background:linear-gradient(180deg,transparent,#20163e30); } /* v8 introduction: full-scene artwork, no imitation reel board or dim tile sheet. */ dialog.olympus-opening.opening-v8 { background-image:linear-gradient(90deg,#21103918,#20103655 54%,#160b2aa8),url('/assets/rottolympus-environment-v10.webp'); } .opening-v8 .intro-showcase { position:absolute; left:7%; top:12%; width:45%; height:76%; } .opening-v8 .intro-halo { position:absolute; inset:4%; border-radius:50%; background:radial-gradient(ellipse,#e5b9ff60,transparent 67%); box-shadow:inset 0 0 65px #e5b9ff18; } .opening-v8 .intro-chapter { position:absolute; inset:3%; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.94); transition:opacity .7s ease,transform .9s ease; filter:drop-shadow(0 15px 20px #29114a66); } .opening-v8[data-slide="0"] .intro-matches,.opening-v8[data-slide="1"] .intro-orb,.opening-v8[data-slide="2"] .intro-goddess { opacity:1; transform:scale(1); } .opening-v8 .intro-chapter strong { position:absolute; color:#fff0a5; text-shadow:0 3px #54205d,0 6px 14px #1b0c36; font:400 5.5cqw/1 'Rotto Display',Impact,sans-serif; } .opening-v8 .intro-matches { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); gap:3%; padding:15% 2% 25%; } .opening-v8 .intro-matches i { display:block; height:100%; min-height:0; } .opening-v8 .intro-matches .symbol-art { width:100%; height:100%; } .opening-v8 .intro-matches strong { bottom:7%; left:0; width:100%; text-align:center; } .opening-v8 .intro-orb .symbol-art { width:100%; height:100%; } .opening-v8 .intro-orb strong { font-size:5cqw; } .opening-v8 .intro-goddess img { width:100%; height:100%; object-fit:contain; } .opening-v8 .intro-goddess strong { bottom:2%; font-size:3.4cqw; } .opening-v8 .intro-content { position:absolute; inset:7% 5% 5% 56%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1.1cqh; } .opening-v8 .opening-logo { position:static; width:100%; height:23cqh; max-height:26%; object-fit:contain; } .opening-v8 .intro-eyebrow { margin:1cqh 0; font:600 .85cqw/1.2 Arial,sans-serif; letter-spacing:.25em; color:#e6ccf7; } .opening-v8 .opening-copy { position:static; width:100%; min-height:1.2em; margin:0; font-size:3.2cqw; line-height:1.12; color:#fff1c1; text-shadow:0 3px 8px #25123e; } .opening-v8 .intro-description { margin:0; min-height:2.5em; max-width:90%; font:400 1.15cqw/1.4 Arial,sans-serif; color:#fff3ff; } .opening-v8 .intro-pagination { display:flex; gap:12px; } .opening-v8 .intro-pagination button { border:0; border-bottom:2px solid #d4b6e04d; border-radius:0; padding:5px 14px; background:none; color:#e1c8ee; font:600 13px Arial,sans-serif; } .opening-v8 .intro-pagination button[aria-pressed=true] { color:#ffecad; border-color:#ffecad; } .opening-v8 .opening-cap { position:static; width:auto; margin:1.3cqh 0; font-size:1.15cqw; color:#fff0c3; text-shadow:0 2px 5px #25123e; } .opening-v8 .opening-cap b { display:block; font-size:4.4cqw; line-height:1.2; } .opening-v8 .opening-play { position:static; display:flex; flex-direction:row-reverse; align-items:center; justify-content:center; gap:18px; width:auto; height:78px; min-height:64px; padding:4px 20px 4px 6px; border:0; border-radius:50px; background:transparent; box-shadow:none; color:#fff3ca; font:400 clamp(22px,1.6cqw,38px) 'Rotto Display',Impact,sans-serif; letter-spacing:.05em; text-shadow:0 2px 6px #1c0c32; cursor:pointer; } .opening-v8 .opening-play svg { box-sizing:border-box; width:66px; height:66px; padding:20px; flex-shrink:0; fill:#fff0b6; border:1px solid #ffdfa4; border-radius:50%; background:radial-gradient(circle at 35% 20%,#9163ba,#442365 75%); box-shadow:inset 0 2px 2px #fae2ff77,0 0 0 5px #e3c2ef14,0 6px 20px #24103670; transition:box-shadow .2s,filter .2s; } .opening-v8 .opening-play:hover svg { filter:brightness(1.2); box-shadow:inset 0 2px 2px #fae2ff77,0 0 0 7px #e3c2ef20,0 0 24px #d2a3ff60; } .opening-v8 .opening-play:focus-visible { outline:2px solid #ffe8ae; outline-offset:5px; } .opening-v8 .opening-preference { position:static; width:auto; min-height:36px; margin-top:3px; gap:10px; font:500 12px/1.3 Arial,sans-serif; letter-spacing:.01em; color:#eadff3; cursor:pointer; } .opening-v8 .opening-preference input { appearance:none; -webkit-appearance:none; position:relative; width:34px; height:20px; margin:0; flex-shrink:0; border:1px solid #cfb4e67a; border-radius:20px; background:#25133899; cursor:pointer; } .opening-v8 .opening-preference input:before { content:''; position:absolute; left:3px; top:3px; width:12px; height:12px; border-radius:50%; background:#cdbbde; box-shadow:0 1px 3px #10091d66; transition:transform .2s,background .2s; } .opening-v8 .opening-preference input:checked { border-color:#efd698; background:#66448a; } .opening-v8 .opening-preference input:checked:before { transform:translateX(14px); background:#fff0b6; } .opening-v8 .opening-preference input:focus-visible { outline:2px solid #ffe8ae; outline-offset:4px; } .opening-v8 .opening-disclaimer { position:static; width:auto; margin-top:3px; color:#e0d2eb; } @media(orientation:portrait) { .opening-v8 .intro-showcase { left:12%; top:17%; width:76%; height:35%; } .opening-v8 .intro-content { inset:0; padding:0 6%; justify-content:flex-end; gap:6px; padding-bottom:max(12px,env(safe-area-inset-bottom)); } .opening-v8 .opening-logo { position:absolute; top:1%; left:10%; width:80%; height:16%; max-height:none; } .opening-v8 .intro-eyebrow { display:none; } .opening-v8 .opening-copy { font-size:7vw; margin:0; } .opening-v8 .intro-description { font-size:13px; min-height:2.5em; } .opening-v8 .intro-chapter strong { font-size:15vw; } .opening-v8 .intro-orb strong { font-size:12vw; } .opening-v8 .intro-goddess strong { font-size:8vw; } .opening-v8 .intro-pagination button { padding:3px 14px; } .opening-v8 .opening-cap { font-size:12px; margin:3px 0; } .opening-v8 .opening-cap b { font-size:9vw; } .opening-v8 .opening-play { width:auto; height:60px; min-height:60px; font-size:23px; gap:14px; padding:2px 14px 2px 4px; } .opening-v8 .opening-play svg { width:54px; height:54px; padding:16px; } .opening-v8 .opening-preference { margin-top:0; font-size:11px; min-height:32px; } .opening-v8 .opening-disclaimer { font-size:9px; margin:0; } } @media(orientation:portrait) and (max-height:650px) { .opening-v8 .intro-showcase { top:16%; height:29%; } .opening-v8 .intro-content { gap:3px; } .opening-v8 .opening-copy { font-size:6.4vw; } .opening-v8 .intro-description { font-size:11px; min-height:2.3em; } .opening-v8 .opening-cap b { font-size:8vw; } .opening-v8 .opening-play { height:52px; min-height:52px; } .opening-v8 .opening-play svg { width:46px; height:46px; padding:13px; } } @media(prefers-reduced-motion:reduce) { .opening-v8 .intro-chapter,.opening-v8 .opening-play svg,.opening-v8 .opening-preference input:before { transition:none; } } @media(orientation:portrait) { #stage.soft-cabinet.premium-world .scene-toolbar :is(.scene-tool,#speed,#auto) { background:#20183768; } } /* Mobile ante stays on one raster plane; state changes must not resize its label. */ @media (orientation:portrait), (hover:none) and (pointer:coarse) { #stage.soft-cabinet.premium-world #ante, #stage.soft-cabinet.premium-world #ante:hover:not(:disabled), #stage.soft-cabinet.premium-world #ante:active:not(:disabled) { transform:none; filter:none; animation:none; transition:none; will-change:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #stage.soft-cabinet.premium-world #ante:after { display:none; animation:none; } #stage.soft-cabinet.premium-world #ante :is(span,strong,small,b) { transform:none; filter:none; animation:none; transition:none; -webkit-text-stroke:0; text-shadow:none; will-change:auto; } #stage.soft-cabinet.premium-world #ante>span, #stage.soft-cabinet.premium-world #ante>strong { color:#273568; } #stage.soft-cabinet.premium-world #ante #anteSwitch { box-sizing:border-box; width:64px; min-width:64px; height:34px; min-height:34px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0; margin:0; border:0; background:none; color:#293257; font:700 10px/12px Arial,sans-serif; letter-spacing:0; white-space:nowrap; } #stage.soft-cabinet.premium-world #anteSwitch:before, #stage.soft-cabinet.premium-world #ante[aria-pressed=true] #anteSwitch:before { content:''; box-sizing:border-box; display:block; flex:none; width:34px; height:18px; border:1px solid #657090; border-radius:12px; background:radial-gradient(circle at 8px 8px,#fff 0 5px,transparent 6px),#626d87; box-shadow:none; transform:none; filter:none; animation:none; transition:none; } #stage.soft-cabinet.premium-world #ante[aria-pressed=true] #anteSwitch:before { border-color:#147b64; background:radial-gradient(circle at 24px 8px,#fff 0 5px,transparent 6px),#138567; } } /* fs188 (owner: 'orta alan tam verimli kullanılmalı, sağı solu boş kalmamalı'): the board keeps its full width; on portrait screens 651-780 px tall the rows around it get compact so the balance/bet row stays on screen. */ @media(orientation:portrait) and (min-height:651px) and (max-height:780px) { #stage.soft-cabinet.premium-world { grid-template-rows:clamp(46px,7.5dvh,90px) 14px auto 32px 74px minmax(96px,1fr) 36px 26px; gap:3px; } #stage.soft-cabinet.premium-world #brand h1 img { height:clamp(46px,7.5dvh,90px); } #stage.soft-cabinet.premium-world #spinControls { height:100px; } #stage.soft-cabinet.premium-world #spin { width:90px; height:90px; } #stage.soft-cabinet.premium-world #history, #stage.soft-cabinet.premium-world #history:empty { height:clamp(86px,14dvh,154px); } } /* fs189 (owner: 'freespin satın alma ve scatter şansını artır alanındaki yazıları %15 küçült, her şey sığsın'): every text in the buy and ante boxes at 85 % of its measured size (portrait / landscape). */ @media(orientation:portrait) { #stage.premium-world #buy .shop-kicker { font-size:9.35px!important; } #stage.premium-world #buy .purchase-action { font-size:9.5px!important; } #stage.premium-world #buy #buyPrice { font-size:20.8px!important; } #stage.premium-world #ante>span { font-size:10.2px!important; } #stage.premium-world #ante #antePrice { font-size:17px!important; } #stage.premium-world #ante #anteSwitch { font-size:8.5px!important; } } @media(orientation:landscape) { #stage.premium-world #buy .shop-kicker, #stage.premium-world #buy .purchase-action, #stage.premium-world #buy #buyPrice, #stage.premium-world #ante>span, #stage.premium-world #ante #antePrice, #stage.premium-world #ante #anteSwitch { zoom:.85; } } /* fs190 (owner: 'crown of olympus mobilde çok daha geniş alanda oynanıyordu, jackpot nova gibi büyük büyük'): portrait board at the 6x5 grid's own ratio (1.2 instead of 1.43) with a thin frame inset, like the series boards (Anubis, Sugar Voltage): square cells, symbols ~30 % larger (390x692: cells 57x45 -> 60x59). Rows keep the balance row on screen. */ @media(orientation:portrait) { #stage.soft-cabinet.premium-world #boardSlot { height:min(calc((100vw - 8px) / 1.2),calc(100dvh - 425px)); } #stage.soft-cabinet.premium-world #board { width:min(100cqw,120cqh); aspect-ratio:1.2; --reel-inset-y:8%; --reel-inset-x:5%;/* fs192: the frame corner ornaments need the designed 5 %/8 % inset */ } } @media(orientation:portrait) and (max-height:780px) { #stage.soft-cabinet.premium-world #boardSlot { height:min(calc((100vw - 8px) / 1.2),calc(100dvh - 362px)); } } /* fs191 (owner: 'çerçeveye sığmama sorunu var, %10 sembol küçültmesi; uzaktan oynanan oyunlar gibi olmasın'): the fs190 board size stays; only the symbol inside each cell is drawn at 90 % (the 'scale' property composes with the win animations' transforms). Portrait only. */ @media(orientation:portrait) { #stage.soft-cabinet.premium-world #reelGrid .cell .symbol { scale:1; }/* fs192: not needed once the inset is back */ } /* fs198 (owner: 'mobilde 15 ücretsiz tur yazan alan %10 büyüsün, yazılar sığmıyor'): the buy/ante row +10 % (84->92, 74->82, 74->81 px); the board formula takes the extra 8 px so the balance row stays on screen. */ @media(orientation:portrait){#stage.soft-cabinet.premium-world{grid-template-rows:clamp(60px,10dvh,90px) 18px auto 38px 92px minmax(110px,1fr) 40px 28px!important}#stage.soft-cabinet.premium-world #boardSlot{height:min(calc((100vw - 8px) / 1.2),calc(100dvh - 433px))!important}} @media(orientation:portrait) and (min-height:651px) and (max-height:780px){#stage.soft-cabinet.premium-world{grid-template-rows:clamp(46px,7.5dvh,90px) 14px auto 32px 82px minmax(96px,1fr) 36px 26px!important}} @media(orientation:portrait) and (max-height:650px){#stage.soft-cabinet.premium-world{grid-template-rows:50px 14px auto 28px 81px minmax(88px,1fr) 34px 24px!important}} @media(orientation:portrait) and (max-height:780px){#stage.soft-cabinet.premium-world #boardSlot{height:min(calc((100vw - 8px) / 1.2),calc(100dvh - 370px))!important}} /* fs204 (owner: 'oyunlarda donma kasma var'): on touch devices the live backdrop blurs (board 14px, buy / ante / meters 20px) were recomputed every frame over the moving scene at DPR 3 — the heaviest GPU work on phones. Replaced there by a slightly darker flat backing; desktop unchanged. */ @media (pointer:coarse) { #stage.premium-world :is(#board,#buy,#ante,#featureMeter,#freeMeter,#celebration) { -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #stage.premium-world :is(#buy,#ante,#featureMeter,#freeMeter) { background-color:rgba(20,12,34,.55); } } /* fs205 (owner: 'oyunlar yine ortada dar alana gelmiş, niye bozulup duruyor'): with Chrome's bars shown the visible height drops below 650 px and the board shrank to keep its ratio (600 px: 276 px wide). Short screens now squeeze logo, headline, buy row, spin area and toolbar instead, so the board keeps (nearly) full width. */ @media(orientation:portrait) and (max-height:650px){body #stage.soft-cabinet.premium-world{grid-template-rows:36px 10px auto 20px 72px minmax(72px,1fr) 30px 20px!important;gap:2px!important}#stage.soft-cabinet.premium-world #brand h1 img{height:36px!important;max-height:36px!important}html body #stage.soft-cabinet.premium-world #boardSlot{height:min(calc((100vw - 8px) / 1.2),calc(100dvh - 280px))!important}#stage.soft-cabinet.premium-world #spinControls{height:74px!important}#stage.soft-cabinet.premium-world #spin{width:68px!important;height:68px!important}#stage.soft-cabinet.premium-world :is(#history,#history:empty){height:70px!important}#stage.soft-cabinet.premium-world .scene-toolbar :is(.scene-tool,#speed,#auto){height:28px!important;min-height:28px!important}} @media(orientation:portrait) and (min-height:651px) and (max-height:720px){body #stage.soft-cabinet.premium-world{grid-template-rows:42px 12px auto 26px 78px minmax(84px,1fr) 32px 24px!important}#stage.soft-cabinet.premium-world #brand h1 img{height:42px!important}html body #stage.soft-cabinet.premium-world #boardSlot{height:min(calc((100vw - 8px) / 1.2),calc(100dvh - 328px))!important}} /* fs206 (owner: 'freespin satın al penceresinde vazgeç ve satın al tuşları çerçeveye sığmıyor, çok büyükler'): portrait only, the reference purchase dialog's İPTAL / ONAYLA buttons 63->48 px tall with smaller icon/label and room above the frame; board and page layout untouched. */ @media (orientation:portrait){dialog.purchase-dialog{padding-bottom:38px!important}dialog.purchase-dialog .actions :is(#cancelBuy,#confirmBuy){width:70px!important;height:48px!important;min-height:0!important;padding:4px 6px!important}dialog.purchase-dialog .actions :is(#cancelBuy,#confirmBuy) svg{width:20px!important;height:20px!important}dialog.purchase-dialog .actions :is(#cancelBuy,#confirmBuy) span{font-size:10px!important}} /* fs208 (owner: purchase buttons too big / too wide, move them up inside the frame): portrait purchase dialogs of every kind */ @media (orientation:portrait){html body dialog.purchase-dialog{padding-bottom:44px!important}html body dialog.purchase-dialog .actions{justify-content:center!important;gap:22px!important;margin-top:2px!important}html body dialog.purchase-dialog .actions :is(#cancelBuy,#confirmBuy){flex:0 0 auto!important;width:66px!important;height:44px!important}html body dialog.purchase-dialog .purchase-actions{display:flex!important;margin-bottom:26px!important;justify-content:center!important;gap:10px!important}html body dialog.purchase-dialog .purchase-actions :is(.purchase-cancel,.purchase-confirm){flex:0 0 auto!important;width:auto!important;min-width:0!important;height:40px!important;padding:0 16px!important;font-size:12px!important}html body dialog.purchase-dialog .confirm{justify-content:center!important;gap:12px!important}html body dialog.purchase-dialog .confirm :is(#cancelBuy,#confirmBuy){flex:0 0 auto!important;width:auto!important;min-width:0!important;height:40px!important;padding:0 18px!important;font-size:13px!important}}