.demo-navigation{z-index:100;background:#0c1120;border-bottom:1px solid #ffffff20;justify-content:space-between;align-items:center;height:44px;padding:0 16px;font:600 14px/1 system-ui,sans-serif;display:flex;position:fixed;inset:0 0 auto}.demo-navigation a{color:#f4e5b8;letter-spacing:.04em;align-items:center;min-width:44px;min-height:44px;text-decoration:none;display:inline-flex}.demo-navigation a:hover{color:#fff}.demo-navigation a:focus-visible{outline-offset:-4px;outline:2px solid #f4e5b8}.has-demo-navigation .cabinet{top:calc(50% + 22px)}.has-demo-navigation.fluid-demo #app{height:calc(100dvh - 44px);margin-top:44px}.has-demo-navigation.fluid-demo .cabinet{width:min(100vw,177.778dvh - 78.2222px);height:min(100dvh - 44px,56.25vw);top:auto}@media (width<=620px) and (orientation:portrait){.has-demo-navigation.fluid-demo .cabinet{width:100vw;height:calc(100dvh - 44px)}}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{color:#fff3dd;background:#090811;font:17px Arial,Helvetica,sans-serif}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.45}button:focus-visible{outline-offset:5px;outline:3px solid #6bf0ff}[hidden]{display:none!important}.cabinet{transform-origin:50%;isolation:isolate;background:#170d26;position:absolute;top:50%;left:50%;overflow:hidden}.backdrop{z-index:-3;background:url(/demos/neon-crown/assets/lounge.png) 50%/cover;position:absolute;inset:0}.haze{z-index:-2;background:linear-gradient(90deg,#120b1b77,#0000 48%,#180b2177),linear-gradient(#0000 35%,#090513cc);position:absolute;inset:0}.cabinet:after{content:"";pointer-events:none;z-index:8;border:1px solid #e2b38d33;position:absolute;inset:0;box-shadow:inset 0 0 80px #04030bc0}header{justify-content:space-between;align-items:center;height:112px;padding:18px 42px;display:flex}.studio{letter-spacing:4px;font-size:12px;font-weight:800;line-height:2}.studio small{letter-spacing:2px;color:#d7b9d6;font-size:8px;display:block}.wordmark{text-align:center;filter:drop-shadow(0 0 14px #ff48b96b);line-height:.95;position:absolute;top:13px;left:50%;transform:translate(-50%)}.wordmark span{letter-spacing:18px;color:#ffa9e3;padding-left:18px;font-size:25px;display:block}.wordmark strong{letter-spacing:6px;color:#fff0bc;text-shadow:0 2px #dc9456,0 5px #512438;font:italic 900 51px Georgia,serif}.utility{gap:10px;display:flex}.utility button{background:#160d28bd;border:1px solid #ddbd9180;border-radius:50%;width:44px;height:44px;font-size:24px}.stage{grid-template-columns:275px 650px 275px;gap:0;height:492px;padding:0 40px;display:grid}.left,.right{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:0 20px;display:flex}.overline{letter-spacing:2px;color:#e2bdaa;font-size:10px;font-weight:800}.left h2{margin:18px 0 26px;font:italic 27px/1.15 Georgia,serif}.pay-preview{width:100%}.pay-preview>div{border-bottom:1px solid #ffcfa533;justify-content:center;align-items:center;gap:4px;margin-bottom:12px;padding-bottom:10px;display:flex}.pay-preview .symbol{flex:none;width:74px;height:74px}.pay-preview span:not(.symbol){letter-spacing:1px;text-align:left;font-size:10px}.pay-preview strong{color:#ffe5a4;font-variant-numeric:tabular-nums;margin-top:6px;font-size:25px;display:block}.outline{letter-spacing:1px;background:linear-gradient(#4a2d4877,#161225cc);border:1px solid #a676974d;border-radius:10px;padding:14px;font-size:12px;font-weight:800}.outline:hover{border-color:#ffe8b8}.machine{width:650px}.marquee{letter-spacing:3px;color:#ecccaa;justify-content:center;align-items:center;gap:16px;height:32px;font-size:12px;font-weight:800;display:flex}.marquee i{background:#ffc583;border-radius:50%;width:5px;height:5px;box-shadow:0 0 14px #ff78ce}.reel-window{background:#120d21;border:10px solid #bca284;border-radius:36px;width:650px;height:390px;position:relative;overflow:visible;box-shadow:0 0 0 2px #382e3d,0 0 0 4px #f8d6ae,0 0 0 8px #441d4c,0 0 35px #fe4fb766,inset 0 0 30px #040307}.reel-window:before{content:"";pointer-events:none;z-index:4;border:2px solid #ffa6dd;border-radius:29px;position:absolute;inset:-5px;box-shadow:0 0 12px #ff62bf,inset 0 0 9px #fa61ae}.glass{z-index:3;pointer-events:none;background:linear-gradient(#03040ac9,#0000 20% 78%,#04030abd);border-radius:25px;position:absolute;inset:0}#reels{border-radius:25px;width:100%;height:100%;display:flex;overflow:hidden}.reel{background:radial-gradient(#523052 0,#251529 70%);border-right:1px solid #d5a89644;width:33.3333%;height:100%;position:relative;overflow:hidden}.reel:last-child{border:0}.strip{will-change:transform;width:100%;height:100%}.cell{transform-origin:50%;place-items:center;width:100%;height:33.3333%;display:grid;position:relative}.symbol{background-image:url(/demos/neon-crown/assets/symbols.png);background-size:306% 306%;background-position:var(--sx) var(--sy);filter:drop-shadow(0 7px 5px #0008);background-repeat:no-repeat;width:94%;height:94%;display:block}.cell .symbol{width:130px;height:122px}.cell small{letter-spacing:2px;color:#fff;text-shadow:0 1px 3px #000;border-radius:4px;font-size:10px;font-weight:900;position:absolute;bottom:8px}.running .strip{filter:blur(1.8px);height:400%;animation:.24s linear infinite roll}.running .cell{height:8.3333%}.running .cell .symbol{opacity:.84}.land .strip{animation:.24s cubic-bezier(.16,.9,.3,1) land}@keyframes roll{0%{transform:translateY(-25%)}to{transform:translateY(0)}}@keyframes land{0%{transform:translateY(-14%)}55%{transform:translateY(3%)}to{transform:translateY(0)}}#lines{pointer-events:none;z-index:5;width:100%;height:100%;position:absolute;inset:0;overflow:visible}#lines polyline{fill:none;stroke:var(--line);stroke-width:4px;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 7px var(--line));stroke-dasharray:800;animation:.55s ease-out both trace}@keyframes trace{0%{stroke-dashoffset:800px}to{stroke-dashoffset:0}}.cell.hit .symbol{filter:drop-shadow(0 0 12px #ffe3a7);animation:1.1s ease-in-out infinite hit}@keyframes hit{0%,to{transform:scale(.97)}45%{transform:scale(1.08)rotate(-3deg)}70%{transform:scale(1.03)rotate(2deg)}}#amount-tag{z-index:7;border:1px solid var(--line);color:#fff4cd;white-space:nowrap;font-variant-numeric:tabular-nums;background:#170d22;border-radius:18px;padding:7px 16px;font-size:18px;font-weight:900;position:absolute;bottom:-4px;left:50%;transform:translate(-50%);box-shadow:0 0 15px #0008}#amount-tag:empty{display:none}.side-mark{color:#4a2549;z-index:6;background:#f4cc8c;border:2px solid #ffeccc;border-radius:50%;place-items:center;width:27px;height:27px;font-weight:900;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.left-mark{left:-23px}.right-mark{right:-23px}.result{justify-content:center;align-items:center;gap:26px;height:70px;display:flex;position:relative}.result>span{text-align:center;max-width:280px;font-size:17px;font-weight:700}.win{text-align:center;min-width:120px}.win small{letter-spacing:2px;color:#e6c7b8;margin-bottom:2px;font-size:9px;display:block}.win strong{font-variant-numeric:tabular-nums;color:#ffe5a0;text-shadow:0 0 15px #fc978266;font-size:36px}.crown-emblem{width:126px;height:126px;animation:5s ease-in-out infinite breathe}.right .overline{margin:12px 0 15px;font-size:9px}.line-buttons{flex-wrap:wrap;justify-content:center;gap:8px;max-width:220px;display:flex}.line-button{color:#e4ceda;background:#231831c4;border:1px solid #a885ac66;border-radius:8px;align-items:center;width:58px;height:56px;padding:5px;display:flex}.line-button b{font-size:10px}.line-button svg{width:45px}.line-button path,.rule-lines path{stroke:var(--line);stroke-width:5px;fill:none;stroke-linecap:round;stroke-linejoin:round}.line-button.active{border-color:var(--line);box-shadow:0 0 12px color-mix(in srgb,var(--line),transparent 70%)}.right p{color:#dac8d7;margin:16px 0;font-size:12px;line-height:1.6}.maximum{color:#f9ddb1;font-size:27px}.maximum small{letter-spacing:1px;margin-top:4px;font-size:8px;display:block}footer{z-index:5;background:linear-gradient(120deg,#2e203add,#15111fdc);border:1px solid #bb96715c;border-radius:18px;justify-content:center;align-items:center;gap:33px;height:92px;margin:10px 44px 0;display:flex;position:relative;box-shadow:0 -2px 20px #ffacb011,inset 0 1px #ffd9ae44}footer small{color:#dcbfcd;letter-spacing:2px;margin-bottom:5px;font-size:9px;display:block}.balance{min-width:150px}.balance strong{font-variant-numeric:tabular-nums;font-size:28px}.stake{text-align:center}.stake>div{align-items:center;gap:17px;display:flex}.stake strong{min-width:70px;font-size:25px}.stake button{background:#251a31;border:1px solid #ac879955;border-radius:50%;width:40px;height:40px;font-size:25px}#speed{width:104px;padding:9px;line-height:1.5}#speed b{color:#9eecf4;display:block}.spin{color:#29172e;background:linear-gradient(145deg,#fff0b9,#ddb36f);border:4px solid #715274;border-radius:50%;outline:2px solid #e2bc87;flex:none;width:100px;height:100px;transition:transform .15s;box-shadow:0 0 27px #ff74cd4d}.spin:hover:enabled{transform:scale(1.05)}.spin span{font-size:69px;line-height:.84;display:block}.spin small{color:#332538;margin-top:6px;font-size:9px;font-weight:900}#history{padding:7px 16px;font-size:26px}#history small{margin:3px 0;font-size:8px}#coins{pointer-events:none;z-index:6;position:absolute;inset:0;overflow:hidden}#coins i{left:var(--x);color:#ffdf87;text-shadow:0 0 8px #ffb162;animation:spark 1.5s var(--d) both;opacity:0;font-size:28px;position:absolute;top:20%}@keyframes spark{10%{opacity:1}to{transform:translate(var(--dx),280px) rotate(var(--r));opacity:0}}.winning .marquee{color:#fff1b6}.big-win .reel-window{box-shadow:0 0 0 4px #ffe1a0,0 0 45px #ff9d52,inset 0 0 30px #040307}.big-win .win strong{color:#fff5d1;animation:1s ease-in-out infinite breathe}@keyframes breathe{50%{filter:drop-shadow(0 0 18px #f7a5de);transform:translateY(-5px)}}#intro{z-index:20;text-align:center;background:linear-gradient(90deg,#14071cf5,#230f21d9,#12071bed),url(/demos/neon-crown/assets/lounge.png) 50%/cover;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#intro h1{letter-spacing:16px;color:#ffa6db;text-shadow:0 0 30px #ee44a5a1;margin:25px 0 20px;font:900 86px/.82 Arial,sans-serif}#intro h1 em{color:#ffe6ad;letter-spacing:5px;text-shadow:0 4px #8b475e,0 0 35px #d9707959;font:italic 900 104px/.98 Georgia,serif}#intro p{color:#efd6e5;margin:0 0 12px;font:italic 23px Georgia,serif}.intro-trio{gap:5px;height:140px;display:flex}.intro-trio .symbol{width:140px;height:140px;animation:4s ease-in-out infinite breathe}.intro-trio .symbol:nth-child(2){width:170px;height:160px;animation-delay:-1s}.intro-trio .symbol:nth-child(3){animation-delay:-2s}.intro-facts{gap:45px;margin:12px 0 25px;display:flex}.intro-facts span{letter-spacing:2px;font-size:10px}.intro-facts b{color:#ffeab8;margin-bottom:7px;font-size:23px;display:block}.gold{color:#402737;letter-spacing:2px;background:linear-gradient(#ffefb5,#d7ab67);border:1px solid #ffe5a6;border-radius:9px;padding:17px 42px;font-weight:900;box-shadow:0 4px #77523f}#intro>small{color:#d1b9cd;margin-top:21px;font-size:10px}#intro.depart{pointer-events:none;animation:.5s both depart}@keyframes depart{to{opacity:0;filter:blur(8px);transform:scale(1.08)}}dialog{color:#fff1df;text-align:center;background:linear-gradient(145deg,#34203b,#110d21);border:1px solid #cda578;border-radius:22px;width:min(860px,94vw);max-height:92vh;padding:28px;overflow:auto;box-shadow:0 0 0 4px #633f5655,0 25px 100px #000c}dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#09040dbb}dialog .close{color:#ffe3d4;background:#412d4888;border:1px solid #d8c4c433;border-radius:50%;width:34px;height:34px;font-size:24px;position:absolute;top:12px;right:12px}dialog h2{margin:15px;font:italic 30px Georgia,serif}dialog p{color:#e0cdda;max-width:680px;margin:16px auto;font-size:14px;line-height:1.55}.pay-grid{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}.pay-grid>div{background:#1c142b;border:1px solid #c3a17444;border-radius:12px;padding:7px}.pay-grid .symbol{width:80px;height:80px;margin:auto}.pay-grid span:not(.symbol){font-size:11px;display:block}.pay-grid strong{color:#ffe3a6;margin-top:7px;font-size:18px;display:block}.pay-grid small{color:#c3acc8;margin-top:8px;font-size:9px;display:block}.rule-lines{justify-content:center;gap:18px;margin:20px 0;display:flex}.rule-lines span{color:var(--line);align-items:center;font-size:12px;display:flex}.rule-lines svg{width:60px;height:42px}details{border-top:1px solid #8e6c7a55;padding-top:14px}summary{cursor:pointer;color:#d9b89b;font-size:12px}table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}td,th{text-align:right;border-bottom:1px solid #bd96aa44;padding:12px}th{color:#e7c497;font-size:11px}td{font-size:15px}.portrait header{height:165px;padding:24px}.portrait .studio{letter-spacing:2px;max-width:145px;font-size:10px}.portrait .studio small{max-width:105px;font-size:8px}.portrait .wordmark{top:22px}.portrait .wordmark span{font-size:27px}.portrait .wordmark strong{font-size:55px}.portrait .utility{gap:8px}.portrait .utility button{width:50px;height:50px;font-size:26px}.portrait .stage{height:740px;padding:0 22px;display:block;position:relative}.portrait .left{height:105px;padding:0;display:block}.portrait .left .overline,.portrait .left h2,.portrait .left .pay-preview{display:none}.portrait #paytable{padding:15px;font-size:17px;position:absolute;top:-36px;right:22px}.portrait .machine{width:676px;position:absolute;top:72px;left:22px}.portrait .marquee{letter-spacing:2px;height:46px;font-size:17px}.portrait .reel-window{width:676px;height:470px}.portrait .cell .symbol{width:174px;height:151px}.portrait .result{gap:25px;height:112px}.portrait .win strong{font-size:48px}.portrait .win small{font-size:13px}.portrait .result>span{font-size:23px}.portrait .right{padding:0;position:absolute;top:0;left:22px}.portrait .right>p,.portrait .right>.overline,.portrait .crown-emblem,.portrait .maximum{display:none}.portrait .line-buttons{gap:6px;max-width:none}.portrait .line-button b{font-size:13px}.portrait footer{gap:15px;height:138px;margin:0 20px;padding:10px}.portrait footer small{letter-spacing:1px;font-size:12px}.portrait .balance{min-width:150px}.portrait .balance strong{font-size:33px}.portrait #speed{width:90px;padding:7px;font-size:16px}.portrait .stake strong{min-width:71px;font-size:31px}.portrait .stake>div{gap:8px}.portrait .spin{width:103px;height:103px}.portrait #history{padding:5px 12px;font-size:22px;position:absolute;bottom:151px;right:6px}.portrait #history small{display:none}.portrait #intro h1{font-size:94px;line-height:.9}.portrait #intro h1 em{font-size:108px}.portrait #intro p{margin:25px 0;font-size:29px}.portrait .intro-trio{height:190px}.portrait .intro-trio .symbol{width:175px;height:175px}.portrait .intro-trio .symbol:nth-child(2){width:195px;height:195px}.portrait .intro-facts{gap:30px;margin:30px 0}.portrait .intro-facts span{font-size:17px}.portrait .intro-facts b{font-size:34px}.portrait .gold{padding:25px 50px;font-size:25px}.portrait #intro>small{margin-top:30px;font-size:17px}@media (width<=620px){dialog{padding:22px 14px}dialog h2{padding:0 20px;font-size:26px}.pay-grid{grid-template-columns:repeat(3,1fr)}.pay-grid .symbol{width:70px;height:70px}.rule-lines{gap:5px}.rule-lines svg{width:42px}dialog p{font-size:13px}}@media (height<=500px) and (aspect-ratio>=1){dialog{max-height:94vh;padding:12px 24px}dialog h2{margin:8px;font-size:23px}.pay-grid .symbol{width:52px;height:52px}.pay-grid strong{font-size:15px}.pay-grid small{margin-top:4px}dialog p{margin:8px auto;font-size:12px}.rule-lines{margin:7px 0}details{padding-top:7px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.running .strip{filter:blur(3px);transform:none}}.portrait header{height:145px}.portrait .stage{height:710px}.portrait footer{grid-template-rows:60px 115px;grid-template-columns:1fr 1fr 130px;gap:10px;height:215px;padding:10px 18px;display:grid}.portrait .balance{text-align:left;grid-column:1/3}.portrait #speed{grid-area:1/3;width:120px;height:60px}.portrait .stake{grid-area:2/1/auto/3}.portrait .stake>div{justify-content:flex-start;gap:24px}.portrait .stake button{width:82px;height:82px;font-size:42px}.portrait .stake>small{text-align:left}.portrait .spin{grid-area:2/3;width:116px;height:116px}.portrait #history{bottom:227px}.portrait .result{height:104px}.portrait .utility button{width:64px;height:64px}.portrait .studio{max-width:100px}.portrait .line-button{width:62px;height:76px}.portrait #paytable{top:-22px}.portrait .machine{top:65px}