*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000}
body{display:flex;align-items:center;justify-content:center}
#app{position:relative;width:min(100vw,56.179775vh);height:min(100vh,178vw);overflow:hidden;isolation:isolate}
.page{position:absolute;inset:0;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .72s cubic-bezier(.4,0,.2,1),visibility 0s .72s}
.page.active{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}
.page.leaving{visibility:visible}
.page img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.page .text-layer{position:absolute;inset:0;pointer-events:none;opacity:0}
.ready .page.active .text-layer{animation:textFromLeft .95s cubic-bezier(.16,1,.3,1) both}
.ready .page.active .title-layer{animation-delay:.16s}
.ready .page.active .action-layer{animation-duration:.8s;animation-delay:.42s}
.ready .page.active .caption-layer{animation-duration:.8s;animation-delay:.54s}
.page.leaving .text-layer{opacity:1;transform:none}
.page[data-page="0"] .action-layer{transform-origin:51% 83.5%}
.page[data-page="1"] .action-layer,.page[data-page="2"] .action-layer{transform-origin:76% 29.5%}
@keyframes textFromLeft{from{opacity:0;transform:translate3d(-4%,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.hotspot{position:absolute;z-index:2;border:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hotspot:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:999px}
.page[data-page="0"] .hotspot{left:24.8%;top:79.6%;width:52%;height:8.3%}
.page[data-page="1"] .hotspot,.page[data-page="2"] .hotspot{left:57.5%;top:26.5%;width:37.5%;height:6.6%}
@media(prefers-reduced-motion:reduce){.page{transition:none}.ready .page.active .text-layer{animation:none;opacity:1;transform:none}}
.catalog-page .process-1{left:25%;top:18.3%;width:23%;height:3%}
.catalog-page .process-2{left:51%;top:40.3%;width:30%;height:3%}
.catalog-page .process-3{left:63%;top:65%;width:17%;height:3%}
.catalog-page .process-4{left:12%;top:73%;width:15%;height:3.5%}
.catalog-page .process-5{left:13%;top:93%;width:29%;height:3.5%}
.catalog-page .process-6{left:58%;top:94%;width:19%;height:3.5%}
.image-button{border:0;background:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .18s ease}
.image-button:active{transform:scale(.94)}
.image-button:focus-visible{outline:2px solid white;border-radius:50%}
.return-button{position:absolute;top:3%;left:4%;width:12%;aspect-ratio:1;z-index:2}
.video-modal[hidden]{display:none}
.video-modal{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.84);animation:modalIn .26s ease both}
.video-panel{position:relative;width:92%;max-height:94%;display:flex;flex-direction:column;align-items:center;gap:14px}
.video-panel video{display:block;width:100%;max-height:min(70vh,calc(178vw - 100px));object-fit:contain;background:#000}
.close-button{position:relative;flex:none;width:44px;height:44px;align-self:center}
.image-button img{display:block;width:100%;height:100%;object-fit:contain}
.video-message{color:#fff;font-size:14px;text-align:center;line-height:1.6}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.video-modal{animation:none}.image-button{transition:none}}

.ready .page.active .unified-layer{animation:textFromLeft .95s cubic-bezier(.16,1,.3,1) .16s both}
@media(prefers-reduced-motion:reduce){.ready .page.active .unified-layer{animation:none;opacity:1}}

/* Button art and text are one image inside one animated clickable element. */
.animated-button{opacity:0;overflow:visible;transform-origin:center}
.animated-button img{position:absolute;max-width:none;pointer-events:none}
.page[data-page="0"] .animated-button img{width:192.307692%;height:1204.819277%;left:-47.692308%;top:-959.036145%}
.page[data-page="1"] .animated-button img,.page[data-page="2"] .animated-button img{width:266.666667%;height:1515.151515%;left:-153.333333%;top:-401.515152%}
.ready .page.active .animated-button{animation:buttonFromLeft .85s cubic-bezier(.16,1,.3,1) .4s both}
.page.leaving .animated-button{opacity:1;transform:none}
@keyframes buttonFromLeft{from{opacity:0;transform:translate3d(-20px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.ready .page.active .animated-button{animation:none;opacity:1;transform:none}}
.page .prize-qr{position:absolute;left:27.2%;top:11.685%;width:45.6%;height:25.62%;object-fit:contain;background:#fff;image-rendering:pixelated}.close-button:disabled{opacity:.55;cursor:wait}

.lottery-debug{position:fixed;left:8px;right:8px;bottom:8px;z-index:99999;background:rgba(15,23,42,.95);color:#fff;border:1px solid #6ee7b7;border-radius:8px;font:12px/1.5 monospace;max-height:38vh;padding:8px;box-sizing:border-box}.lottery-debug summary{cursor:pointer;font-family:system-ui}.lottery-debug pre{max-height:28vh;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;margin:8px 0 0}