@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#10172c;--blue:#7489db;--gold:#ffbf28;--text:#f5f6fc;--muted:#a5acc6;--line:#ffffff1a}
*{box-sizing:border-box}body{margin:0;background:#0c1225;color:var(--text);font-family:'DM Sans',sans-serif;min-height:100svh;overflow-x:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:disabled{cursor:wait;opacity:.65}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3,.timer-digits,.large-step{font-family:'Space Grotesk',sans-serif}em{font-style:normal;color:#b7c4ff}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:5px}h1:focus,h2:focus{outline:0}
.ambient{position:fixed;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(ellipse at 50% 0,#202d54 0,transparent 65%)}.ambient i{position:absolute;width:60vw;height:60vw;border-radius:50%;opacity:.12;filter:blur(70px);background:#647cfa;top:-40%;left:-25%;animation:drift 18s ease-in-out infinite alternate}.ambient i:nth-child(2){background:#ffb805;left:85%;top:30%;opacity:.055;animation-delay:-7s}.ambient i:nth-child(3){background:#9271f2;left:30%;top:70%;width:40vw;height:40vw;opacity:.08;animation-delay:-12s}.floor-grid{position:fixed;z-index:-1;bottom:-20%;left:-50%;width:200%;height:65%;background-image:linear-gradient(#9aacff12 1px,transparent 1px),linear-gradient(90deg,#9aacff12 1px,transparent 1px);background-size:65px 65px;transform:perspective(600px) rotateX(64deg);mask-image:linear-gradient(transparent,#000);pointer-events:none}
.topbar{max-width:1240px;margin:auto;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 23px 'Space Grotesk',sans-serif}.brand img{border-radius:10px;background:white;object-fit:contain;padding:3px}.brand small{display:block;font:500 8px 'DM Sans',sans-serif;letter-spacing:.18em;margin-top:4px;color:var(--muted)}.sound-toggle{border:1px solid var(--line);border-radius:30px;padding:10px 15px;color:var(--muted);background:#ffffff05;font-size:12px}.sound-toggle[aria-pressed=true]{color:var(--gold);border-color:#ffbf2850}
#app{max-width:1160px;margin:0 auto;padding:24px 36px 50px;min-height:calc(100svh - 165px)}.show-meta{display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;letter-spacing:.16em;color:#e8edff}.live-dot{width:6px;height:6px;display:inline-block;background:var(--gold);border-radius:50%;box-shadow:0 0 12px #ffbf28aa;animation:live 3s ease-in-out infinite}.meta-sep{opacity:.25;margin:0 4px}.demo-badge{font-size:10px;color:var(--muted);letter-spacing:.04em}.steps{display:flex;justify-content:center;gap:30px;margin:24px auto 38px;font-size:11px;color:#6d7797}.steps span{padding-bottom:10px;border-bottom:2px solid transparent}.steps .active{color:#eef1ff;border-color:var(--gold)}.steps .complete{color:#a2aed8}
.scene{position:relative;animation:scene-in .65s cubic-bezier(.2,.8,.25,1) both}.scene.exiting{animation:scene-out .22s ease both}.eyebrow{font-size:10px;letter-spacing:.19em;color:#acb9e9;font-weight:700;line-height:1.6}.lead{color:var(--muted);font-size:17px;line-height:1.8;max-width:450px}.small-print{font-size:11px;line-height:1.7;max-width:390px;color:#8590b3}.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;border:0;text-decoration:none;padding:17px 22px;border-radius:12px;font-size:14px;font-weight:700;line-height:1.4;transition:transform .2s,box-shadow .2s;min-height:52px}.btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(110deg,#ffd36b,#ffbf28);color:#17203b;box-shadow:0 5px 24px #ffbf281c}.primary:hover{box-shadow:0 8px 32px #ffbf2840}.secondary{background:#26345c;color:white;border:1px solid #8f9ed155}.text-btn{border:0;background:none;text-decoration:underline;text-underline-offset:5px;color:#b7c3ef;font-size:12px;padding:14px}.center-heading{text-align:center;margin-bottom:28px}.center-heading h2{font-size:clamp(28px,4vw,42px);letter-spacing:-.05em;margin:12px 0}.center-heading>p:last-child{font-size:13px;line-height:1.7;color:var(--muted)}
#welcome{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:65px;max-width:1000px;margin:auto}.welcome-copy h1{font-size:clamp(40px,5.4vw,66px);line-height:1.02;letter-spacing:-.065em;margin:21px 0 26px}.welcome-copy h1 em{background:linear-gradient(100deg,#d4dcff,#829cf1);color:transparent;background-clip:text}.feature-pills{display:flex;flex-wrap:wrap;gap:9px;margin:23px 0}.feature-pills span{font-size:10px;border:1px solid var(--line);border-radius:30px;padding:8px 12px;background:#ffffff03}.access-card{position:relative;background:linear-gradient(145deg,#263456,#141e38);border:1px solid #ffffff26;border-radius:23px;padding:24px;text-align:center;box-shadow:0 28px 70px #0005,0 0 70px #6e80ff0a}.access-card:before{content:'';position:absolute;inset:-1px;border-radius:23px;border-top:1px solid #b2bff080;pointer-events:none}.card-top{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.14em;color:#b2bfeb;margin-bottom:22px}.card-top>span:last-child{margin-left:auto}.ticket-dot{width:7px;height:7px;background:var(--gold);border-radius:50%}.qr-frame{position:relative;background:#fff;border-radius:16px;width:min(230px,100%);aspect-ratio:1;margin:0 auto 22px;padding:17px;box-shadow:0 0 38px #9aafff24}.qr-frame svg{display:block;width:100%;height:auto}.scan-sweep{position:absolute;left:10px;right:10px;top:15%;height:2px;background:#a08223;opacity:.5;box-shadow:0 0 10px #ffbf28;animation:scan 3.5s ease-in-out infinite;pointer-events:none}.corner{position:absolute;width:18px;height:18px;border:2px solid var(--gold)}.tl{left:-7px;top:-7px;border-right:0;border-bottom:0}.tr{right:-7px;top:-7px;border-left:0;border-bottom:0}.bl{left:-7px;bottom:-7px;border-right:0;border-top:0}.br{right:-7px;bottom:-7px;border-left:0;border-top:0}.access-card h2{font-size:18px;letter-spacing:-.03em}.access-card>p{font-size:11px;line-height:1.6;color:var(--muted);margin-top:8px}.or{display:flex;align-items:center;gap:10px;font-size:10px;color:#8391b5;margin:16px 0}.or:before,.or:after{content:'';height:1px;background:var(--line);flex:1}.access-card .btn{width:100%}.access-card .access-count{font-size:10px;margin-top:15px}
.photo-layout{display:grid;grid-template-columns:1fr .8fr;align-items:center;gap:55px;max-width:810px;margin:auto}.camera-shell{border:1px solid #7e90c63d;border-radius:22px;background:linear-gradient(145deg,#263456,#121b31);padding:17px;box-shadow:0 24px 65px #0006;transform:rotate(-2deg)}.camera-top,.camera-bottom{display:flex;align-items:center;justify-content:space-between;color:#a0add4;font-size:9px;letter-spacing:.09em;padding:5px 0 15px}.camera-top .live-dot{margin-right:6px}.camera-bottom{padding:15px 0 2px;font-size:10px;letter-spacing:0}.camera-led{width:6px;height:6px;background:#75daca;border-radius:50%;box-shadow:0 0 10px #75daca}.viewfinder{aspect-ratio:1;position:relative;overflow:hidden;border-radius:13px;background:radial-gradient(ellipse at 50% 40%,#425788,#121b31 75%);isolation:isolate}.camera-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent 33%,#ffffff08 33%,#ffffff08 33.4%,transparent 33.4%,transparent 66%,#ffffff08 66%,#ffffff08 66.4%,transparent 66.4%),linear-gradient(transparent 33%,#ffffff08 33%,#ffffff08 33.4%,transparent 33.4%,transparent 66%,#ffffff08 66%,#ffffff08 66.4%,transparent 66.4%)}.silhouette{position:absolute;inset:0;animation:breathe 3s ease-in-out infinite}.silhouette i{position:absolute;width:28%;height:33%;left:36%;top:20%;border-radius:50%;background:linear-gradient(145deg,#95aae0,#4b609d);box-shadow:0 0 45px #9bb9ff30}.silhouette b{position:absolute;left:20%;bottom:-15%;width:60%;height:56%;border-radius:50% 50% 0 0;background:linear-gradient(145deg,#7389c2,#334771)}.focus-frame{position:absolute;inset:18%;border:1px solid #ffbf2866;border-radius:26%;box-shadow:0 0 0 35px #00000008;animation:focus 3s ease-in-out infinite}.viewfinder-label{position:absolute;bottom:15px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.18em;color:#dfe6ff;z-index:4}.camera-flash{position:absolute;inset:0;z-index:8;background:white;opacity:0;pointer-events:none}.capturing .camera-flash{animation:flash .45s ease both}.capturing .camera-shell{animation:shutter .35s ease}#photo-count{position:absolute;inset:0;display:grid;place-items:center;font:700 100px 'Space Grotesk';z-index:5;text-shadow:0 0 40px #ffffff70}.count-pop{animation:count-pop .8s cubic-bezier(.2,.8,.2,1)}.avatar{background-image:var(--portrait-image,url('/assets/sorteo/cartoon-guests.jpg'));background-size:300% 300%;background-position:var(--ax,0%) var(--ay,0%);border-radius:50%;aspect-ratio:1;flex-shrink:0}.photo-result{position:absolute;inset:0;border-radius:13px;opacity:0;transform:scale(1.15);filter:blur(12px);transition:opacity .9s,transform 1.2s cubic-bezier(.2,.7,.2,1),filter 1s;z-index:3}.developed .photo-result{opacity:1;transform:scale(1);filter:blur(0)}.photo-instructions h3{font-size:32px;line-height:1.12;letter-spacing:-.04em;margin:15px 0}.photo-instructions p{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:25px}.large-step{font-size:45px;color:#ffcf61;font-weight:500}.large-step span{font-size:16px;color:#6e7ca6;margin-left:4px}.photo-instructions .text-btn{display:block}
.registration-card{position:relative;max-width:430px;margin:70px auto 0;padding:77px 30px 25px;border:1px solid #788bd14d;border-radius:22px;background:linear-gradient(140deg,#283554,#152039);box-shadow:0 28px 70px #0004}.pass-avatar{position:absolute;width:114px;top:-57px;left:calc(50% - 57px);border:5px solid #19243e;box-shadow:0 0 0 1px #9bb4ff50,0 8px 30px #0005}.pass-tag{display:block;font-size:9px;letter-spacing:.2em;color:#c5d1fa;text-align:center;margin-bottom:25px}.registration-card label{display:block;font-size:13px;font-weight:bold;margin-bottom:10px}.registration-card input{width:100%;background:#0f1830;border:1px solid #ffffff25;border-radius:10px;padding:16px;color:white;font-size:19px}.registration-card input::placeholder{color:#8d9abb}.registration-card #nickname-help{font-size:11px;line-height:1.7;color:var(--muted);margin:12px 0 22px}.registration-footer{border-top:1px dashed #8796c345;padding:18px 0;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;color:#c3cceb;font-size:11px}.registration-footer strong{font:700 30px 'Space Grotesk';color:#ffcf61;display:block}.registration-footer .secure-note{color:#8f9bbd;font-size:10px;line-height:1.7}.registration-card .btn{width:100%}.form-error{color:#ffbeb4;font-size:12px;line-height:1.7;margin-top:12px}.form-error:empty{display:none}
.draw-stage{width:360px;max-width:85vw;aspect-ratio:1;margin:18px auto 20px;position:relative;display:grid;place-items:center}.timer-core{width:64%;aspect-ratio:1;position:relative;border-radius:50%;background:radial-gradient(circle,#253964,#131f3e);box-shadow:0 0 50px #7288e52b,inset 0 0 35px #7089e415;border:1px solid #8098df30}.timer-core svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);filter:drop-shadow(0 0 5px #ffbf2840)}.timer-core circle{fill:none;stroke-width:3}.timer-track{stroke:#ffffff10}#timer-ring{stroke:#ffcf61;stroke-linecap:round;stroke-dasharray:678.6;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear}.timer-digits{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.timer-digits>span{font-size:84px;line-height:1;letter-spacing:-.08em;font-weight:600}.timer-digits small{color:#a1b1de;letter-spacing:.25em;font-size:8px;margin-top:10px}.orbit{position:absolute;border:1px solid #93a7ef22;border-radius:50%;inset:4%;animation:orbit-turn 26s linear infinite}.orbit:before{content:'';position:absolute;width:6px;height:6px;left:50%;top:-3px;background:#bacbff;border-radius:50%;box-shadow:0 0 14px #9bb1ff}.orbit-two{inset:-3%;border-style:dashed;opacity:.45;animation-direction:reverse;animation-duration:44s}#orbit-guests{position:absolute;inset:0;animation:orbit-turn 38s linear infinite}.orbit-guest{width:45px;position:absolute;border:2px solid #536b9f;box-shadow:0 4px 20px #0005;animation:orbit-turn 38s linear infinite reverse}.orbit-guest:nth-child(1){left:calc(50% - 22px);top:-9px}.orbit-guest:nth-child(2){right:-9px;top:calc(50% - 22px)}.orbit-guest:nth-child(3){bottom:-9px;left:calc(50% - 22px)}.orbit-guest:nth-child(4){left:-9px;top:calc(50% - 22px)}
.entry-ticket{max-width:370px;margin:30px auto 0;display:flex;gap:14px;align-items:center;border:1px solid #ffffff20;background:#ffffff05;border-radius:14px;padding:13px 18px}.ticket-avatar{width:44px}.entry-ticket small{font-size:8px;letter-spacing:.15em;color:#a5b4de;display:block;margin-bottom:4px}.entry-ticket strong{font-size:16px;overflow-wrap:anywhere}.ticket-check{margin-left:auto;background:#ffcf61;color:#17203b;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;font-size:12px}.participant-line{text-align:center;color:#8d9bc2;font-size:11px;line-height:1.7;margin-top:18px}.final-seconds .timer-core{animation:final-pulse 1s ease-in-out infinite}.final-seconds .timer-digits>span{color:#ffcf61}.final-seconds .orbit{border-color:#ffbf2840}#finish-error{text-align:center;font-size:12px;color:#ffbcb4}#finish-error .btn{margin-top:12px}
#reveal{text-align:center;min-height:470px;padding:50px 0;overflow:hidden}#reveal h2{font-size:clamp(30px,5vw,52px);margin:15px 0 35px;letter-spacing:-.05em}.reveal-rays{position:absolute;inset:-100%;pointer-events:none;opacity:.18;background:repeating-conic-gradient(from 0deg,transparent 0 15deg,#99b4ff 15deg 17deg,transparent 17deg 30deg);animation:orbit-turn 30s linear infinite;mask-image:radial-gradient(circle,#000,transparent 55%)}.roulette-window{position:relative;max-width:500px;height:170px;border-top:1px solid #b3c6ff30;border-bottom:1px solid #b3c6ff30;overflow:hidden;margin:auto;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);background:#ffffff04}.roulette-portraits{display:flex;gap:20px;align-items:center;height:100%;width:max-content}.roulette-portraits .avatar{width:110px;box-shadow:0 10px 30px #0005}.roulette-marker{position:absolute;inset:12px auto 12px calc(50% - 69px);width:138px;border:2px solid #ffd778;border-radius:20px;box-shadow:0 0 30px #ffbf2820}.reveal-dots{display:flex;gap:9px;justify-content:center;margin-top:32px}.reveal-dots i{width:7px;height:7px;background:#ffcf61;border-radius:50%;animation:live .75s ease-in-out infinite}.reveal-dots i:nth-child(2){animation-delay:.15s}.reveal-dots i:nth-child(3){animation-delay:.3s}
#winner{text-align:center;max-width:660px;margin:auto;isolation:isolate}.winner-halo{position:absolute;left:calc(50% - 220px);top:-20px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,#ffbf2820,transparent 65%);z-index:-1;animation:halo-in 1.4s ease both}.winner-medal{display:inline-grid;place-items:center;font-size:26px;width:54px;height:54px;background:linear-gradient(135deg,#ffeab4,#ffbf28);color:#6a4205;border:4px double #8f640e;border-radius:50%;box-shadow:0 0 45px #ffbf2830;margin-bottom:16px;animation:medal-in 1.2s cubic-bezier(.2,.8,.2,1) both}#winner h2{font-size:clamp(45px,8vw,78px);letter-spacing:-.065em;line-height:1.1;margin:12px 0 22px;background:linear-gradient(110deg,#fff4da,#ffcf61);background-clip:text;color:transparent;animation:win-text .9s ease both}.winner-avatar-wrap{width:122px;position:relative;margin:auto}.winner-avatar-wrap>.avatar{width:122px;border:4px solid #ffdc82;box-shadow:0 0 0 7px #ffbf2810,0 0 45px #ffbf2820}.winner-avatar-wrap>span{position:absolute;bottom:-8px;left:calc(50% - 42px);width:84px;border-radius:4px;background:#ffcf61;color:#13203d;padding:5px;font-size:9px;letter-spacing:.16em;font-weight:bold}#winner-name{font-size:28px;margin:23px 0 8px;overflow-wrap:anywhere}.winner-count{font-size:15px;color:#d0d9f1;line-height:1.7}.simulation-note{font-size:10px;color:#929dbd;line-height:1.7;margin-top:8px}.prize-card{margin:30px auto 0;padding:26px;max-width:520px;background:linear-gradient(140deg,#29365b,#172039);border:1px solid #9aaee044;border-radius:18px}.prize-card h3{font-size:23px;margin:10px 0 12px;letter-spacing:-.035em}.prize-card>p:not(.eyebrow){font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:20px}.prize-card .btn{width:100%;justify-content:center}.prize-card .text-btn{display:block;margin:auto;padding-bottom:0}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:12}.footer{padding:25px 30px;max-width:1160px;margin:auto;border-top:1px solid var(--line);color:#828fb3;font-size:10px;display:flex;justify-content:space-between;gap:15px}.footer a{font-weight:bold;text-decoration:none;color:#b7c6f4}.footer span{color:#637093}.global-error{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#692d38;color:white;padding:16px 22px;border-radius:12px;z-index:30;max-width:90vw;font-size:13px}.noscript{text-align:center;padding:40px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes drift{to{transform:translate(20%,25%) scale(1.2)}}@keyframes live{50%{opacity:.45;box-shadow:0 0 3px currentColor}}@keyframes scene-in{from{opacity:0;transform:translateY(25px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes scene-out{to{opacity:0;transform:translateY(-15px)}}@keyframes scan{50%{top:85%}}@keyframes breathe{50%{transform:translateY(-4px)}}@keyframes focus{50%{transform:scale(.94);border-color:#ffbf28cc}}@keyframes flash{0%,100%{opacity:0}15%{opacity:.9}}@keyframes shutter{40%{transform:rotate(-2deg) scale(.97)}}@keyframes count-pop{0%{opacity:0;transform:scale(1.5)}30%{opacity:1;transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:scale(.8)}}@keyframes orbit-turn{to{transform:rotate(360deg)}}@keyframes final-pulse{50%{box-shadow:0 0 70px #ffbf282a,inset 0 0 35px #ffbf281a}}@keyframes halo-in{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes medal-in{from{opacity:0;transform:translateY(-45px) rotateY(180deg) scale(.3)}to{opacity:1;transform:none}}@keyframes win-text{from{opacity:0;transform:translateY(25px) scale(.85)}to{opacity:1;transform:none}}
@media(min-width:1200px){#app{padding-top:30px}.steps{margin-bottom:50px}}
@media(max-width:740px){.topbar{padding:18px 20px}.brand{font-size:20px}.brand img{width:38px;height:38px}.brand small{font-size:6px}.sound-toggle{font-size:10px;padding:9px 10px}#app{padding:16px 22px 35px}.steps{gap:16px;font-size:9px;margin:22px auto 28px}.show-meta{font-size:9px;gap:7px}.demo-badge{font-size:9px}#welcome{grid-template-columns:1fr;gap:30px;max-width:440px}.welcome-copy{text-align:center}.welcome-copy h1{font-size:46px;margin:16px 0 19px}.lead{font-size:14px;line-height:1.7}.small-print{font-size:10px;margin:auto}.feature-pills{justify-content:center;margin:18px 0}.access-card{max-width:360px;width:100%;margin:auto;padding:22px}.qr-frame{width:185px}.photo-layout{grid-template-columns:1fr;gap:26px;max-width:360px}.camera-shell{max-width:310px;width:100%;margin:auto}.photo-instructions{text-align:center}.photo-instructions .large-step{display:none}.photo-instructions h3{font-size:25px;margin:0 0 10px}.photo-instructions p{font-size:12px;margin-bottom:17px}.photo-instructions .text-btn{margin:auto}.center-heading h2{font-size:29px}.center-heading>p:last-child{font-size:12px}.draw-stage{width:280px;max-width:78vw}.timer-digits>span{font-size:64px}.orbit-guest{width:38px}.orbit-guest:nth-child(1),.orbit-guest:nth-child(3){left:calc(50% - 19px)}.orbit-guest:nth-child(2),.orbit-guest:nth-child(4){top:calc(50% - 19px)}.registration-card{padding:72px 23px 23px}.footer{font-size:9px;padding:20px;flex-wrap:wrap}.prize-card{padding:22px}.participant-line{font-size:10px}.winner-halo{left:calc(50% - 160px);width:320px;height:320px}#reveal{min-height:430px}.roulette-window{height:160px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.camera-flash{display:none}.photo-result{filter:none}.scene{filter:none}.reveal-rays{display:none}}

/* Light event palette: paper white, lavender, sky blue and warm cream. */
:root{color-scheme:light;--ink:#202b48;--blue:#4b5c92;--gold:#ffbf28;--text:#202b48;--muted:#596782;--line:#4b5c921c}
body{background:#f8f9fd}
.ambient{background:radial-gradient(ellipse at 8% 8%,#e8e4fa 0,transparent 52%),radial-gradient(ellipse at 95% 35%,#fff1d9 0,transparent 50%),linear-gradient(160deg,#f8f9ff,#f5f9fb)}
.ambient i{background:#bbcbf7;opacity:.23}.ambient i:nth-child(2){background:#ffe2a5;opacity:.22}.ambient i:nth-child(3){background:#e4cef3;opacity:.24}
.floor-grid{opacity:.45;background-image:linear-gradient(#64779c12 1px,transparent 1px),linear-gradient(90deg,#64779c12 1px,transparent 1px)}
.brand img{box-shadow:0 3px 14px #4b5c9210}.brand small{color:#596782}
.sound-toggle{color:#4b5c92;background:#ffffffa6;border-color:#cdd5e8}.sound-toggle[aria-pressed=true]{background:#fff4d7;color:#354875;border-color:#ebc463}
.show-meta{color:#4b5c92}.demo-badge{color:#65718a}.live-dot{background:#d49612;box-shadow:0 0 10px #ffbf2860}
.steps{color:#6a7690}.steps .active{color:#354875}.steps .complete{color:#536690}
.eyebrow{color:#4b5c92}em{color:#4b5c92}.welcome-copy h1 em{background:linear-gradient(110deg,#435586,#7786b8);background-clip:text}
.small-print{color:#65718a}.feature-pills span{background:#ffffffa8;border-color:#dce2ef;color:#4b5c92}
.access-card,.registration-card,.prize-card{background:linear-gradient(145deg,#ffffff,#f7f8fe);border-color:#dce2f0;box-shadow:0 20px 55px #3e517514}
.access-card:before{border-top-color:#fff}.card-top{color:#4b5c92}.qr-frame{box-shadow:0 8px 30px #4b5c9212;border:1px solid #e4e9f3}.or{color:#65718a}
.primary{background:linear-gradient(110deg,#ffdf88,#ffca4f);box-shadow:0 6px 20px #d69f171a}.secondary{color:#354875;background:#e9edf9;border-color:#cbd5ea}.text-btn{color:#4b5c92}
.camera-shell{background:linear-gradient(145deg,#fff,#edf1fb);border-color:#d4ddee;box-shadow:0 18px 45px #4b5c9220}
.camera-top,.camera-bottom{color:#52658e}.camera-led{background:#379485;box-shadow:0 0 10px #6ad6c250}
.viewfinder{background:radial-gradient(ellipse at 40% 30%,#e8e2fa,#cfdef2 75%)}
.camera-grid{background:linear-gradient(90deg,transparent 33%,#4b5c9210 33%,#4b5c9210 33.4%,transparent 33.4%,transparent 66%,#4b5c9210 66%,#4b5c9210 66.4%,transparent 66.4%),linear-gradient(transparent 33%,#4b5c9210 33%,#4b5c9210 33.4%,transparent 33.4%,transparent 66%,#4b5c9210 66%,#4b5c9210 66.4%,transparent 66.4%)}
.silhouette i{background:linear-gradient(145deg,#aab9df,#7c91c0);box-shadow:0 0 30px #ffffff80}.silhouette b{background:linear-gradient(145deg,#a1b2d8,#7187b6)}
.focus-frame{border-color:#7386b66b;box-shadow:0 0 0 35px #ffffff08}
#photo-count{color:#354875;text-shadow:0 2px 20px #ffffffd0}
.viewfinder-label{color:#354875}.developed .viewfinder-label{color:white;background:#202b4899;left:15px;right:15px;bottom:12px;border-radius:6px;padding:7px;backdrop-filter:blur(6px)}
.large-step{color:#4b5c92}.large-step span{color:#687b9b}
.pass-avatar{border-color:#fff;box-shadow:0 0 0 1px #d2dcee,0 8px 26px #4b5c9224}.pass-tag{color:#536690}
.registration-card input{background:#f8faff;border-color:#cdd7eb;color:#202b48}.registration-card input::placeholder{color:#75829c}
.registration-footer{border-top-color:#c9d3e8;color:#53617c}.registration-footer strong{color:#4b5c92}.registration-footer .secure-note{color:#606f89}
.form-error,#finish-error{color:#a63848}
.timer-core{background:radial-gradient(circle,#fff,#edf1fc);box-shadow:0 0 45px #9aabdb30,inset 0 0 35px #fff8;border-color:#cdd9ef}.timer-track{stroke:#dce3f2}#timer-ring{stroke:#6278b5;filter:none}.timer-digits small{color:#536690}.final-seconds .timer-digits>span{color:#4b5c92}
.orbit{border-color:#9bafd64d}.orbit:before{background:#849bce;box-shadow:0 0 12px #b6c9ef}.orbit-guest{border-color:white;box-shadow:0 5px 18px #4b5c9226}
.entry-ticket{background:#ffffffc7;border-color:#dce3f1;box-shadow:0 8px 24px #4b5c9209}.entry-ticket small{color:#536690}.participant-line{color:#5e6e8c}
.roulette-window{background:#ffffff80;border-color:#d9e2f2}.roulette-portraits .avatar{box-shadow:0 8px 24px #4b5c9224}.roulette-marker{border-color:#dbaf39;box-shadow:0 0 25px #ffe29b45}.reveal-rays{opacity:.13}
#winner h2{background:linear-gradient(110deg,#354875,#6b7eb4);background-clip:text}.winner-count{color:#4b5c78}.simulation-note{color:#64718a}.winner-halo{background:radial-gradient(circle,#ffe9b866,transparent 65%)}
.footer{color:#65718a}.footer a{color:#4b5c92}.footer span{color:#65718a}
.global-error{background:#fff0f1;color:#963447;border:1px solid #edbec5;box-shadow:0 6px 24px #4b5c9215}
@keyframes final-pulse{50%{box-shadow:0 0 55px #e6bb5350,inset 0 0 25px #fff8}}

/* Never expose a preloaded portrait before the shutter completes. */
.photo-result[hidden]{display:none!important}
.brand img{padding:0;background:transparent;box-shadow:none;border-radius:0;object-fit:contain}

/* One viewport, one scene. Native zoom remains available. */
html{height:100%;overflow:hidden}
body{height:100vh;height:var(--app-height,100dvh);min-height:0;overflow:hidden;display:flex;flex-direction:column}
.topbar{width:100%;max-width:1240px;flex:0 0 auto;padding:calc(10px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 10px max(20px,env(safe-area-inset-left,0px));gap:12px}
.brand{font-size:19px}.brand img{width:34px;height:34px}.brand small{display:none}
.sound-toggle{padding:8px 12px;font-size:10px;min-height:34px}
#app{width:100%;max-width:1160px;flex:1 1 0;min-height:0;padding:4px 28px max(12px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;overflow:hidden}
.show-meta{flex:0 0 auto;min-height:18px;font-size:9px}.demo-badge{font-size:9px}
.steps,.footer{display:none}
.scene{flex:0 1 auto;min-height:0;width:100%;margin-block:auto!important;max-height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
.scene.active{animation:none}
#welcome{gap:40px;padding:10px 0}.welcome-copy h1{font-size:clamp(34px,4.5vw,58px);margin:16px 0 20px}
.access-card{padding:20px;box-shadow:0 12px 32px #3e517510}.qr-frame{width:clamp(140px,24vh,210px);margin-bottom:16px}
.card-top{margin-bottom:16px}.or{margin:12px 0}
.center-heading{margin-bottom:18px}.center-heading h2{font-size:clamp(25px,3vw,36px);margin:8px 0}.center-heading .eyebrow{font-size:9px}
.photo-layout{gap:36px;max-width:760px}.camera-shell{width:min(340px,40vh);padding:13px;transform:none;margin:auto}.camera-top{padding:3px 0 10px}.camera-bottom{padding:10px 0 2px}
.registration-card{margin:54px auto 0;padding-top:62px;max-width:410px}.pass-avatar{width:94px;top:-47px;left:calc(50% - 47px)}
.pass-tag{margin-bottom:16px}.registration-card input{font-size:18px;padding:13px 14px}.registration-card #nickname-help{margin:10px 0 14px}.registration-footer{padding:12px 0}.registration-card .btn{padding:13px 18px;min-height:46px}
.draw-stage{width:min(320px,40vh);margin:18px auto 20px}.entry-ticket{margin:20px auto 0}.participant-line{margin-top:12px}
#reveal{min-height:0;padding:25px 0}.roulette-window{height:150px}
#winner{padding:4px 0;max-width:650px}.winner-medal{width:38px;height:38px;font-size:20px;margin-bottom:7px}
#winner>.eyebrow{font-size:9px}#winner h2{font-size:clamp(36px,6vh,62px);margin:8px 0 14px}
.winner-avatar-wrap,.winner-avatar-wrap>.avatar{width:88px}.winner-avatar-wrap>span{font-size:8px;padding:4px}
#winner-name{font-size:23px;margin:18px 0 5px}.winner-count{font-size:13px;line-height:1.5}.simulation-note{margin-top:6px}
.prize-card{margin:18px auto 0;padding:18px 22px;max-width:500px}.prize-card .eyebrow{font-size:9px}.prize-card h3{font-size:21px;margin:7px 0 8px}.prize-card>p:not(.eyebrow){font-size:12px;line-height:1.6;margin-bottom:14px}.prize-card .btn{padding:13px 15px;min-height:46px}.prize-card .text-btn{padding-top:12px}
@media(max-width:740px){
 #app{padding-inline:18px;gap:8px}
 #welcome{gap:14px;padding:4px 0;max-width:390px}
 .welcome-copy>.eyebrow,.welcome-copy>.lead,.feature-pills{display:none}
 .welcome-copy h1{font-size:32px;line-height:1.04;margin:0 0 10px;letter-spacing:-.055em}
 .small-print{font-size:10px;line-height:1.5;max-width:330px}
 .access-card{padding:16px 20px;max-width:330px}.card-top{font-size:8px;margin-bottom:12px}
 .qr-frame{width:clamp(124px,22vh,176px);padding:10px;margin-bottom:12px}
 .access-card h2{font-size:16px}.access-card>p{font-size:10px;margin-top:5px}
 .or{margin:10px 0;font-size:9px}.access-card .btn{min-height:44px;padding:12px 17px}
 .access-card .access-count{margin-top:10px;font-size:9px}
 .center-heading{margin-bottom:12px}.center-heading>.eyebrow{display:none}.center-heading h2{font-size:25px;margin:0 0 6px}.center-heading>p:last-child{font-size:11px}
 .photo-layout{gap:14px;max-width:340px}
 .camera-shell{width:min(270px,calc(var(--app-height,100dvh) * .39));max-width:100%;padding:12px}
 .photo-instructions .large-step,.photo-instructions h3,.photo-instructions>p{display:none}
 .photo-instructions .btn{min-height:46px;padding:13px 20px}
 .photo-instructions .text-btn{padding:12px 0 0}
 .registration-card{margin-top:48px;padding:57px 20px 18px;max-width:360px}
 .pass-avatar{width:86px;top:-43px;left:calc(50% - 43px)}.registration-card #nickname-help{font-size:10px;line-height:1.6}
 .registration-footer strong{font-size:25px}.registration-footer{gap:12px;padding:10px 0;font-size:10px}.registration-footer .secure-note{font-size:9px}
 .draw-stage{width:min(260px,calc(var(--app-height,100dvh) * .38));max-width:76vw;margin:20px auto 22px}.timer-digits>span{font-size:clamp(45px,8vh,64px)}
 .entry-ticket{padding:10px 14px;margin-top:16px}.ticket-avatar{width:36px}.entry-ticket strong{font-size:14px}
 #reveal h2{font-size:30px;margin:12px 0 25px}
 #winner h2{font-size:42px;margin:6px 0 12px}.winner-medal{width:32px;height:32px;font-size:16px;margin-bottom:6px}
 .winner-avatar-wrap,.winner-avatar-wrap>.avatar{width:76px}
 #winner-name{font-size:21px;margin-top:16px}.winner-count{font-size:12px}.simulation-note{font-size:9px}
 .prize-card{padding:16px;margin-top:14px}.prize-card>.eyebrow{display:none}.prize-card h3{font-size:20px;margin-top:0}.prize-card>p:not(.eyebrow){font-size:11px;margin-bottom:12px}
}
@media(max-height:650px){
 .topbar{padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px}.brand img{width:28px;height:28px}
 #app{gap:5px;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
 .welcome-copy h1{font-size:28px;margin-bottom:8px}.small-print{font-size:9px;line-height:1.4}
 .access-card{padding:12px 16px}.qr-frame{width:128px;margin-bottom:9px}.access-card>p:not(.access-count){display:none}.card-top{margin-bottom:10px}.or{margin:8px 0}
 .center-heading h2{font-size:23px}.center-heading{margin-bottom:10px}
 .registration-card{margin-top:37px;padding-top:44px;padding-bottom:12px}
 .pass-avatar{width:64px;top:-32px;left:calc(50% - 32px)}.pass-tag{margin-bottom:12px}
 .registration-card #nickname-help{margin:8px 0}.registration-footer{padding:8px 0}.registration-card label{margin-bottom:8px}
 .winner-medal,#winner>.eyebrow{display:none}#winner h2{font-size:35px;margin:0 0 10px}
 .winner-avatar-wrap,.winner-avatar-wrap>.avatar{width:60px}#winner-name{font-size:20px;margin-top:14px}
 .prize-card{padding:12px 16px;margin-top:10px}.prize-card h3{font-size:18px;margin-bottom:6px}.prize-card>p:not(.eyebrow){font-size:11px;line-height:1.45;margin-bottom:10px}
}
@media(max-height:500px) and (min-width:600px){
 #app{padding-inline:24px}.show-meta{display:none}
 #welcome{grid-template-columns:1fr 1fr;max-width:850px;gap:28px}
 .welcome-copy{text-align:left}.welcome-copy>.lead{display:none}.welcome-copy>.eyebrow,.feature-pills{display:none}
 .welcome-copy h1{font-size:34px}.small-print{font-size:10px}
 .access-card{max-width:290px;padding:12px 18px}.qr-frame{width:118px;margin-bottom:8px}.card-top{display:none}.access-card h2{font-size:14px}.or{margin:8px 0}.access-card .access-count{margin-top:6px}
 .photo-layout{grid-template-columns:1fr 1fr;gap:25px;max-width:650px}.camera-shell{width:min(230px,54vh)}
 .photo-instructions{text-align:left}.photo-instructions h3{display:block;font-size:24px}.photo-instructions .text-btn{margin:0}
 .center-heading{margin-bottom:8px}.center-heading h2{font-size:22px}.center-heading>.eyebrow{display:none}
 #register{max-width:620px}.registration-card{max-width:600px;margin:0 auto;padding:15px 20px 15px 105px}.pass-avatar{width:64px;left:20px;top:20px}.pass-tag{display:none}.registration-card #nickname-help{margin:8px 0;font-size:10px}.registration-footer{padding:8px 0}.registration-footer strong{display:inline;font-size:20px;margin-right:4px}
 #countdown{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;align-items:center;max-width:740px}
 #countdown .center-heading{grid-column:1;grid-row:1;margin:0}#countdown .draw-stage{grid-column:2;grid-row:1 / 4;width:min(240px,57vh);margin:10px auto}
 #countdown .entry-ticket{grid-column:1;grid-row:2;width:100%;margin:0}#countdown .participant-line{grid-column:1;grid-row:3;margin:0}
 #winner{display:grid;grid-template-columns:1fr 1.2fr;column-gap:24px;max-width:900px;align-content:center}
 #winner h2{grid-column:1;grid-row:1}.winner-avatar-wrap{grid-column:1;grid-row:2}
 #winner-name{grid-column:1;grid-row:3}.winner-count{grid-column:1;grid-row:4}.simulation-note{grid-column:1;grid-row:5}
 .prize-card{grid-column:2;grid-row:1 / 6;align-self:center;margin:0}
 #reveal{padding:0}.roulette-window{height:140px}#reveal h2{margin:10px 0 15px}.reveal-dots{margin-top:15px}
}
.keyboard-open .topbar{display:none}
.keyboard-open #app{padding-top:8px;gap:4px}
.keyboard-open .show-meta{display:none}
.keyboard-open #register .center-heading{display:none}
.keyboard-open .registration-card{margin:0 auto;padding:14px 18px}
.keyboard-open .pass-avatar,.keyboard-open .pass-tag,.keyboard-open .registration-footer{display:none}
.keyboard-open .registration-card #nickname-help{font-size:10px;margin:8px 0}
.keyboard-open .registration-card input{font-size:16px}

/* Decorative light must not enlarge the scene's scrollable bounds. */
#winner .winner-halo{inset:0;width:100%;height:100%;margin:0}
@media(max-height:500px) and (min-width:600px){
 .camera-shell{width:min(210px,48vh)}
 .photo-layout{gap:20px}
}

@media(max-height:500px) and (min-width:600px){.photo-instructions .large-step,.photo-instructions>p{display:none}.photo-instructions h3{margin:0 0 15px}}