*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{color:#fff0d0;background:#071922;font-family:Trebuchet MS,Arial,sans-serif}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.48}button:focus-visible{outline-offset:3px;outline:3px solid #7ef4e7}[hidden]{display:none!important}.stage{isolation:isolate;background:linear-gradient(#04142115,#03111d35),url(/demos/midnight-market/assets/market-DPKzL8q5.png) 50%/cover;position:absolute;left:50%;overflow:clip}.sprite{aspect-ratio:1;background-image:url(/demos/midnight-market/assets/symbols-CKMdapxb.png);background-size:400% 300%;background-position:var(--sx) var(--sy);background-repeat:no-repeat;flex-shrink:0;width:100%;display:block}.stage header{text-align:center;width:740px;position:absolute;top:21px;left:280px}header small{letter-spacing:7px;color:#90dbd2;font-size:11px}h1{letter-spacing:-2px;color:#fff0b2;text-shadow:0 4px #53252a,0 0 20px #fe794d66;margin:6px 0;font-size:51px;font-weight:950;line-height:1}h1 em{color:#65e3d4;font-style:normal}.chef{text-align:center;width:270px;position:absolute;bottom:104px;left:-1px}.mascot{filter:drop-shadow(0 10px 15px #0006);width:285px;animation:4s ease-in-out infinite breathe}.chef-sign{background:#182f32e8;border:2px solid #cba064;border-radius:4px;width:160px;margin:-22px auto 0;padding:8px;position:relative;transform:rotate(-3deg)}.chef-sign b{letter-spacing:4px;font-family:Georgia,serif;font-size:30px}.chef-sign span{letter-spacing:1px;margin-top:4px;font-size:10px;display:block}.stall{width:774px;position:absolute;top:114px;left:269px}.stall-top{background:linear-gradient(#a13632,#74262a);border:2px solid #d1974d;border-radius:13px 13px 0 0;justify-content:space-between;align-items:center;gap:10px;height:55px;padding:4px 15px;display:flex;box-shadow:0 5px #381c21}.stall-top>b{max-width:545px;font-size:23px;line-height:1.15}.stall-top>span{letter-spacing:1px;white-space:nowrap;font-size:11px}#lanterns{white-space:nowrap;align-items:center;gap:6px;display:flex}#lanterns>span{color:#342a2a;text-shadow:0 1px #b0694a;font-size:23px}#lanterns>span.lit{color:#ffdc70;text-shadow:0 0 9px #ffa900}#lanterns>b{margin-left:5px;font-size:13px}.board{background:#061c25;border:9px solid #805239;border-width:7px 9px 13px;height:416px;padding:10px;position:relative;box-shadow:inset 0 0 0 2px #d8a157,0 5px #271821,0 9px 25px #020a11a8}#cells{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(5,1fr);gap:6px;width:100%;height:100%;display:grid;position:relative;overflow:hidden}.cell{background:radial-gradient(at 50% 30%,#294449,#14282f);border-radius:10px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;container-type:size}.cell .piece{filter:drop-shadow(0 5px 4px #0008);width:min(100cqw,100cqh);max-width:100%}.bonus-tag{letter-spacing:1px;color:#fff6ba;text-shadow:0 2px #461320;font-size:12px;font-weight:900;position:absolute;bottom:2px}.compartment{background:radial-gradient(#291f29,#121b25);box-shadow:inset 0 0 0 2px #533a34}.compartment.locked{background:radial-gradient(#835523,#3d2623);box-shadow:inset 0 0 0 2px #dcad4d}.compartment.collector{background:radial-gradient(#125746,#142e32)}.compartment .piece{width:min(87cqw,87cqh);transform:translateY(-12%)}.token-value{color:#fff4bc;text-shadow:0 3px #3c2028,0 0 7px #2b1720;font-size:28px;font-weight:950;line-height:1;position:absolute;bottom:5px}.cat-tag{text-align:center;color:#b7ffef;letter-spacing:1px;font-size:9px;font-weight:900;position:absolute;top:4px;left:0;right:0}.empty-mark{color:#4d3937;font-size:30px}.matched{box-shadow:inset 0 0 0 2px #fbe49c,0 0 18px #f7c552}.matched .piece{animation:.6s ease-in-out infinite alternate dishWin}.board:has(.matched) .cell:not(.matched){filter:brightness(.55)}#trails{pointer-events:none;width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;inset:10px;overflow:visible}.payline{fill:none;stroke:#fff4a2;stroke-width:2px;stroke-linecap:round;filter:drop-shadow(0 0 3px #f39625);stroke-dasharray:650;animation:.65s ease-out both trace}.collect-path{fill:none;stroke:#7dffdf;stroke-width:3px;stroke-dasharray:8 20;filter:drop-shadow(0 0 4px #38e9c1);animation:.7s linear infinite collectTrail}#labels{pointer-events:none;position:absolute;inset:0}.line-prize{text-shadow:0 3px #40262c,0 0 3px #40262c,2px 0 #40262c,-2px 0 #40262c;color:#fff6bd;font-size:33px;font-weight:950;animation:.3s ease-out both prize;position:absolute;transform:translate(-50%,-50%)}#receipt-strip{scrollbar-width:thin;justify-content:center;align-items:center;gap:13px;height:48px;display:flex;overflow:auto}#receipt-strip>span{white-space:nowrap;align-items:center;gap:5px;display:flex}#receipt-strip .sprite{width:42px}#receipt-strip b{font-size:24px}#receipt-strip small{color:#8ee5d8;font-size:10px}.night-menu{text-align:center;width:210px;position:absolute;top:165px;right:11px}#bonus{filter:drop-shadow(0 6px 6px #0007);background:0 0;border:0;width:195px;min-height:270px;transition:filter .2s;position:relative}#bonus:hover{filter:drop-shadow(0 0 15px #df763c)}#bonus .sprite{transform-origin:50% 5%;width:195px;animation:4s ease-in-out infinite sway}#bonus strong{background:linear-gradient(#de5145,#a22f33);border:2px solid #f3c183;border-radius:5px;margin-top:-28px;padding:9px 7px;font-size:22px;line-height:1.15;display:block;position:relative;box-shadow:0 5px #542127}#bonus>span{letter-spacing:1px;color:#a1e7db;margin-top:13px;font-size:11px;font-weight:900;display:block}#feature-guide{background:#082834d9;border:1px solid #549186;border-radius:8px;margin:16px 9px;padding:14px 7px}#feature-guide b{color:#ffcba0;font-size:23px;display:block}#feature-guide span{margin-top:6px;font-size:14px;display:block}.tip-jar{background:linear-gradient(#183c40dd,#072a32ee);border:2px solid #d4b96c;border-radius:30px 30px 12px 12px;margin-top:110px;padding:20px 8px;box-shadow:inset 0 0 0 5px #7dd7c11a}.tip-jar small{letter-spacing:1px;font-size:12px}.tip-jar strong{color:#fff0a2;margin:14px 0;font-size:33px;display:block}.tip-jar span{color:#bce4d8;font-size:12px}.feature .stall-top{background:linear-gradient(#297f71,#104f51)}.feature .stall-top>b{max-width:355px;font-size:20px}.feature .board{border-color:#977443}.feature .mascot{animation:2.7s ease-in-out infinite breathe}footer{background:linear-gradient(#13404b,#07252f);border:2px solid #58938a;border-radius:13px;justify-content:space-around;align-items:center;gap:18px;height:93px;padding:9px 15px;display:flex;position:absolute;bottom:17px;left:175px;right:30px;box-shadow:0 5px #031a23}footer small{letter-spacing:1.1px;color:#94d7d0;margin-bottom:6px;font-size:11px;font-weight:800;display:block}.wallet b{font-size:27px}.result{text-align:center;min-width:160px}.result strong{color:#ffe99d;font-size:40px;line-height:1}.bet{text-align:center}.bet>div{align-items:center;gap:9px;display:flex}.bet button,.modal-bet button{color:#e8fff1;background:#123f49;border:1px solid #58bba9;border-radius:50%;width:41px;height:41px;font-size:27px;line-height:1}.bet b{min-width:70px;font-size:23px}#spin{background:linear-gradient(#f7744c,#a22e31);border:4px solid #fac38a;border-radius:50%;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;width:100px;height:100px;margin-top:-15px;display:flex;box-shadow:0 0 0 3px #52272b,0 5px #542127}#spin b{font-size:65px;line-height:.75}#spin span{margin-top:9px;font-size:11px;font-weight:900}.utilities{flex-direction:column;gap:6px;display:flex}.utilities button{background:#163c46;border:1px solid #5eac9c;border-radius:6px;padding:7px 9px;font-size:14px;font-weight:800}.utilities button[aria-pressed=true]{color:#093440;background:#87d7c4}.steam{pointer-events:none;z-index:-1;position:absolute;inset:0;overflow:hidden}.steam i{filter:blur(14px);background:radial-gradient(#d3f7f625,#0000 68%);width:95px;height:190px;animation:6s linear infinite steam;position:absolute;bottom:105px;left:5%}.steam i:nth-child(2){animation-delay:-2s;left:89%}.steam i:nth-child(3){animation-delay:-4s;left:79%}.turning .piece{animation:.23s ease-in both turnOut}.served .piece{animation:.3s cubic-bezier(.25,.8,.35,1.2) both serve;animation-delay:var(--delay)}.searching{animation:.22s ease-in-out infinite alternate search}.arriving .piece{animation:.36s cubic-bezier(.2,.85,.3,1.2) both coinIn}.collected{animation:.4s ease-in-out 2 catPulse}.collected .token-value{animation:.38s ease-out coinIn}.collecting .chef-sign{box-shadow:0 0 22px #49efb9}#intro{z-index:20;background:linear-gradient(90deg,#09253265,#07212c05),url(/demos/midnight-market/assets/market-DPKzL8q5.png) 50%/cover;position:absolute;inset:0;overflow:hidden}.intro-neon{text-align:center;width:585px;position:absolute;top:89px;left:105px;transform:rotate(-3deg)}.intro-neon small{letter-spacing:7px;color:#b1eddf;font-size:12px}.intro-neon h2{letter-spacing:-4px;color:#fff1b1;text-shadow:0 5px #783133,0 0 30px #df633b55;margin:23px 0;font-size:87px;font-weight:950;line-height:.89}.intro-neon em{color:#74e5d0;font-size:99px;font-style:normal}.intro-neon p{color:#ffd8b4;margin:20px 0;font-size:22px}.intro-chef{filter:drop-shadow(0 15px 15px #0008);width:555px;animation:4s ease-in-out infinite breathe;position:absolute;bottom:80px;right:42px}.intro-tray{background:linear-gradient(#0c3543,#041e29);border:5px solid #b58b53;border-radius:20px;justify-content:center;align-items:center;gap:10px;width:470px;height:155px;padding:10px 25px 28px;display:flex;position:absolute;top:365px;left:160px;transform:rotate(-3deg);box-shadow:0 8px #3c2428}.intro-tray>span{width:125px;animation:3s ease-in-out infinite dishWin;animation-delay:var(--delay)}.intro-tray>b{letter-spacing:1px;color:#fff0bf;font-size:13px;position:absolute;bottom:12px}.intro-action{text-align:center;flex-direction:column;gap:14px;width:500px;display:flex;position:absolute;bottom:80px;left:145px}.intro-action small{color:#c5e5dc;font-size:12px}.primary{color:#fff4d0;letter-spacing:.6px;background:linear-gradient(#f7774e,#b63335);border:2px solid #ffbf89;border-radius:8px;padding:17px 28px;font-size:18px;font-weight:950;box-shadow:0 5px #64202a}.depart{pointer-events:none;animation:.55s ease-in both introOut}dialog{color:#173b43;background:linear-gradient(#ffecd0,#edcda5);border:5px solid #8a4436;border-radius:9px;width:min(880px,95vw);max-height:92dvh;padding:27px 30px;font-family:Trebuchet MS,Arial,sans-serif;overflow:auto;box-shadow:0 18px 70px #020f1aca,inset 0 0 0 3px #ffc27f}dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#03121bc9}dialog .close{color:#653029;z-index:5;background:#d7ae89;border:1px solid #a65845;border-radius:50%;width:36px;height:36px;font-size:26px;position:absolute;top:12px;right:12px}dialog h2{color:#7a302d;margin:8px 0 20px;font-family:Georgia,serif;font-size:32px}dialog p{font-size:15px;line-height:1.55}dialog small{letter-spacing:1px;font-size:11px;font-weight:800}.menu-title{text-align:center;margin:6px 25px 20px}.menu-options{justify-content:center;gap:24px;display:flex}.menu-choice{color:#ffe7bb;background:linear-gradient(#cb5441,#923334);border:3px solid #8f3c34;border-radius:6px 6px 25px 25px;width:47%;padding:14px 18px 20px;position:relative;box-shadow:0 6px #62302a}.menu-choice.feast{background:linear-gradient(#277264,#164852);border-color:#28605b;box-shadow:0 6px #0b303a}.menu-choice:before,.menu-choice:after{content:"";background:#efb46a;height:3px;position:absolute;top:8px;left:15px;right:15px}.menu-choice:after{top:auto;bottom:10px}.dish-art{width:140px;height:130px;margin:0 auto}.dish-art .sprite{animation:4s ease-in-out infinite sway}.menu-choice h3{margin:9px 0 12px;font-size:27px}.menu-choice p{min-height:43px;margin:6px 0;font-size:14px}.menu-choice>small{letter-spacing:.5px;font-size:10px}.price{color:#fff4be;margin:13px 0 12px;font-size:42px;display:block}.menu-choice>span{letter-spacing:2px;font-size:12px;font-weight:900}.modal-bet{justify-content:center;align-items:center;gap:23px;margin:25px auto 12px;display:flex}.modal-bet span{text-align:center;flex-direction:column;gap:5px;display:flex}.modal-bet b{font-size:27px}.fine{text-align:center;font-size:11px!important}.feature-card{text-align:center;max-width:590px;margin:auto}.feature-art{width:130px;height:130px;margin:0 auto}.feature-card h2{margin:8px 0 16px}.feature-number{color:#a03b30;font-size:64px;line-height:1.1;display:block}.feature-card .primary{min-width:220px;margin:16px 0 8px}.three-lights{color:#d47a22;letter-spacing:8px;text-shadow:0 2px #752f27;font-size:52px}.confirm{justify-content:center;align-items:center;gap:15px;display:flex}.confirm>button:not(.primary){background:#d3b48e;border:1px solid #987550;border-radius:7px;padding:17px 24px;font-weight:800}.setting-options{grid-template-columns:1fr 1fr;gap:14px;display:grid}.setting-options button{color:#fff0c5;background:#1b5a57;border:2px solid #28605b;border-radius:7px;padding:19px 13px;font-weight:800}.sample{vertical-align:middle;width:44px;display:inline-block}table{border-collapse:collapse;width:100%;font-size:14px}td,th{text-align:center;border-bottom:1px solid #b589674d;padding:6px}td:first-child{text-align:left}.line-guide{grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0;display:grid}.line-guide>span{background:#e3be95;border-radius:5px;align-items:center;gap:5px;padding:3px 6px;display:flex}.line-guide svg{width:100%;height:34px}.line-guide polyline{fill:none;stroke:#80382d;stroke-width:4px}details{border-top:1px solid #ad856244;padding-top:14px}summary{cursor:pointer;font-weight:800}.portrait header{width:740px;top:18px;left:10px}.portrait h1{font-size:58px}.portrait header small{font-size:13px}.portrait .chef{width:260px;top:102px;bottom:auto;left:25px}.portrait .mascot{width:260px}.portrait .chef-sign{width:170px;margin:-20px 0 0 40px}.portrait .chef-sign b{font-size:27px}.portrait .chef-sign span{font-size:12px}.portrait .night-menu{width:410px;top:130px;right:24px}.portrait #bonus{background:linear-gradient(#842e30,#64232a);border:3px solid #ffc17c;border-radius:13px;width:405px;min-height:146px;padding:18px 8px 12px 120px;box-shadow:0 6px #391c24}.portrait #bonus .sprite{width:143px;position:absolute;top:-8px;left:5px}.portrait #bonus strong{box-shadow:none;background:0 0;border:0;margin:0;padding:8px;font-size:30px}.portrait #bonus>span{margin-top:5px;font-size:14px}.portrait #feature-guide{justify-content:center;align-items:center;gap:13px;margin:14px 0 0;padding:13px;display:flex}.portrait #feature-guide b{font-size:24px}.portrait #feature-guide span{margin:0;font-size:19px}.portrait .tip-jar{border-radius:13px;margin:10px 0 0;padding:14px 10px}.portrait .tip-jar small{font-size:17px}.portrait .tip-jar strong{margin:8px 0;font-size:45px}.portrait .tip-jar span{font-size:17px}.portrait .stall{width:724px;top:401px;left:18px}.portrait .stall-top{flex-wrap:wrap;gap:3px 10px;height:89px;padding:9px 14px}.portrait .stall-top>b,.portrait.feature .stall-top>b{width:100%;max-width:none;font-size:26px}.portrait .stall-top>span{font-size:17px}.portrait #lanterns span{font-size:23px}.portrait #lanterns b{font-size:17px}.portrait .board{height:442px}.portrait .token-value{font-size:29px}.portrait .cat-tag{font-size:11px}.portrait #receipt-strip{justify-content:flex-start;height:63px}.portrait #receipt-strip b{font-size:29px}.portrait #receipt-strip small{font-size:13px}.portrait #receipt-strip .sprite{width:54px}.portrait footer{grid-template-rows:69px 96px;grid-template-columns:1fr 1.35fr 115px;gap:6px 13px;height:209px;padding:14px;display:grid;bottom:22px;left:18px;right:18px}.portrait .wallet{grid-area:1/1}.portrait footer small{font-size:16px}.portrait .wallet b{font-size:29px}.portrait .result{grid-area:1/2;min-width:0}.portrait .result strong{font-size:41px}.portrait .bet{grid-area:2/2}.portrait .bet>small{display:none}.portrait .bet>div{justify-content:center;gap:8px}.portrait .bet button{width:78px;height:78px;font-size:34px}.portrait .bet b{min-width:65px;font-size:29px}.portrait #spin{grid-area:1/3/3;width:110px;height:110px;margin:0}.portrait #spin b{font-size:73px}.portrait #spin span{font-size:13px}.portrait .utilities{flex-direction:row;grid-area:2/1;gap:5px}.portrait .utilities button{min-height:78px;padding:9px 7px;font-size:20px}.portrait .intro-neon{width:710px;top:78px;left:25px}.portrait .intro-neon h2{letter-spacing:-3px;font-size:101px}.portrait .intro-neon em{font-size:119px}.portrait .intro-neon p{font-size:29px}.portrait .intro-chef{width:565px;bottom:236px;right:-55px}.portrait .intro-tray{flex-wrap:wrap;gap:0;width:240px;height:310px;padding:20px 20px 42px;display:flex;top:521px;left:44px}.portrait .intro-tray>b{text-align:center;width:90%;font-size:14px;line-height:1.5;bottom:16px}.portrait .intro-action{z-index:2;width:650px;bottom:83px;left:55px}.portrait .intro-action .primary{padding:26px 16px;font-size:27px}.portrait .intro-action small{font-size:17px}.portrait .line-prize{font-size:35px}@media (width<=600px){dialog{max-height:94dvh;padding:24px 16px}dialog h2{font-size:25px}dialog p{font-size:13px}.menu-title{margin:18px 9px}.menu-options{gap:13px}.menu-choice{width:49%;padding:12px 9px 18px}.dish-art{width:104px;height:104px}.menu-choice h3{min-height:50px;margin:7px 0;font-size:22px}.menu-choice p{min-height:50px;font-size:12px}.menu-choice>small{letter-spacing:0;font-size:9px}.price{font-size:30px}.menu-choice>span{font-size:11px}.feature-number{font-size:52px}.feature-art{width:110px;height:110px}.setting-options button{padding:17px 8px;font-size:13px}.primary{padding:16px 20px;font-size:15px}.sample{width:31px}table{font-size:11px}td,th{padding:5px 2px}.line-guide{gap:5px}.line-guide svg{height:27px}.fine{font-size:10px!important}}@keyframes breathe{50%{transform:translateY(-5px)rotate(.5deg)}}@keyframes sway{50%{transform:rotate(3deg)}}@keyframes steam{to{opacity:0;transform:translate(20px,-420px)scale(1.7)}}@keyframes dishWin{50%{filter:drop-shadow(0 0 6px #ffd97e);transform:translateY(-4px)scale(1.06)}}@keyframes turnOut{to{opacity:0;transform:translateY(140px)}}@keyframes serve{0%{opacity:.2;transform:translateY(-180px)rotate(-7deg)}to{opacity:1;transform:translateY(0)}}@keyframes trace{0%{stroke-dashoffset:650px}to{stroke-dashoffset:0}}@keyframes prize{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes search{to{background:#5a4035;box-shadow:inset 0 0 10px #d49c4a55}}@keyframes coinIn{0%{filter:brightness(2);transform:translateY(-90px)scale(.7)}to{transform:translateY(-12%)scale(1)}}@keyframes catPulse{50%{box-shadow:inset 0 0 0 3px #a5ffee,0 0 30px #61ffcf}}@keyframes collectTrail{to{stroke-dashoffset:-140px}}@keyframes introOut{to{opacity:0;transform:translateY(-18px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (width>=601px) and (height<=650px){dialog{padding:16px 23px}.menu-title{margin:2px 25px 12px}.menu-title h2{margin:7px 0 10px;font-size:25px}.menu-choice{padding:10px 14px 16px}.dish-art{width:86px;height:80px}.menu-choice h3{margin:7px 0;font-size:23px}.menu-choice p{min-height:29px;margin:5px 0;font-size:12px}.menu-choice>small{font-size:9px}.price{margin:8px 0;font-size:33px}.menu-choice>span{font-size:11px}.modal-bet{gap:20px;margin:17px auto 6px}.modal-bet b{font-size:23px}.fine{margin:7px 0 1px}.feature-art{width:85px;height:85px}.feature-card h2{margin:4px 0 9px;font-size:26px}.feature-card p{margin:9px 0;font-size:13px}.feature-card>.primary{margin:10px 0 4px}.feature-number{font-size:48px}.three-lights{font-size:36px}}.portrait .intro-tray{flex-flow:column;height:340px;padding:12px 20px 64px}.portrait .intro-tray>span{width:85px}.portrait .intro-tray>b{max-width:190px;font-size:17px;bottom:17px}.portrait .intro-chef{width:535px;right:-15px}.stage:not(.portrait) .board{height:388px}.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)}}