@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');
button:hover{filter:brightness(1.05)!important}.completed-picker{margin:23px auto 15px;text-align:left}.completed-picker small{display:block;margin-bottom:7px;color:#f4d27a;font:700 10px "DM Mono",monospace;letter-spacing:1.3px}.completed-picker .name-choice{display:flex;width:100%;align-items:center;justify-content:space-between;border-color:#f4d27a;background:rgba(244,210,122,.17);color:#fff;opacity:1;cursor:default}.completed-picker .name-choice em{color:#f4d27a;font-size:11px;font-style:normal}
.result-card{overflow:hidden}.golden-ticket{position:relative;min-height:540px;margin:-44px;padding:48px 38px;background:url('/assets/golden-ticket-reveal.png') center/cover no-repeat;display:grid;place-items:center;isolation:isolate;animation:ticket-arrival .75s cubic-bezier(.2,.8,.2,1) both}.golden-ticket:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,246,203,.05),rgba(72,8,17,.1));z-index:-1}.ticket-content{width:min(430px,100%);text-align:center;color:#57320d;text-shadow:0 1px 0 rgba(255,255,255,.5);animation:ticket-copy .65s .3s both}.golden-ticket .eyebrow{color:#7c4210;font-size:10px}.ticket-kicker{margin:12px 0 0;color:#8a551e;font:700 9px "DM Mono",monospace;letter-spacing:1.5px}.golden-ticket h1{margin:17px 0 15px;color:#642d0d;font-size:clamp(37px,7vw,55px)}.golden-ticket h1 em{color:#a25b13}.golden-ticket .score{margin:15px 0;color:#5e320d}.golden-ticket .token{border:1px dashed #8a5216;background:rgba(255,251,225,.45);color:#67360d;box-shadow:inset 0 0 0 3px rgba(255,244,191,.4)}.golden-ticket .completed-picker small{color:#805018}.golden-ticket .completed-picker .name-choice{border-color:#9d671f;background:rgba(255,248,211,.46);color:#63360c}.golden-ticket .completed-picker .name-choice em{color:#875219}.ticket-footer{margin-bottom:0!important;color:#744416!important}.ticket-flare{position:absolute;top:23px;right:35px;color:#fff6c8;font-size:28px;filter:drop-shadow(0 0 9px #f8ad32);animation:ticket-twinkle 1.2s infinite alternate}@keyframes ticket-arrival{from{opacity:0;transform:scale(.82) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes ticket-copy{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes ticket-twinkle{to{transform:scale(1.35) rotate(14deg);filter:drop-shadow(0 0 17px #fff8b8)}}@media(max-width:520px){.golden-ticket{min-height:520px;margin:-34px -24px;padding:42px 30px}.ticket-flare{top:17px;right:22px}}
.result-card:has(.golden-ticket){padding:0;background:#310914;border-color:#f0c15a}.golden-ticket{min-height:590px;margin:0;padding:58px 30px;background-color:#330a15;background-size:contain;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 0 90px rgba(15,0,5,.72);animation:ticket-reveal .8s cubic-bezier(.16,.86,.3,1) both}.golden-ticket:after{z-index:0;background:linear-gradient(90deg,rgba(39,3,12,.48),transparent 23%,transparent 77%,rgba(39,3,12,.48))}.ticket-content{position:relative;z-index:2;width:min(420px,88%);padding:29px 27px 24px;border:1px solid rgba(131,78,17,.45);border-radius:16px;background:rgba(255,249,219,.96);box-shadow:0 15px 35px rgba(62,17,4,.28);text-shadow:none;animation:ticket-content-pop .5s .55s both}.golden-ticket .ticket-content p{color:#61360e}.golden-ticket .ticket-content .eyebrow{color:#8a4911}.ticket-confetti{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}.ticket-confetti i{position:absolute;top:-12%;color:#fff3b6;font-style:normal;font-size:22px;opacity:0;animation:confetti-fall 2.4s .4s ease-in infinite}.ticket-confetti i:nth-child(1){left:12%;animation-delay:.15s}.ticket-confetti i:nth-child(2){left:29%;animation-delay:.8s;color:#fff}.ticket-confetti i:nth-child(3){left:52%;animation-delay:.4s}.ticket-confetti i:nth-child(4){left:75%;animation-delay:1.1s;color:#fff}.ticket-confetti i:nth-child(5){left:91%;animation-delay:.55s}.ticket-footer{font-size:12px}.golden-ticket .completed-picker .name-choice{pointer-events:none}@keyframes ticket-reveal{0%{opacity:0;transform:scale(.72) rotateY(48deg);filter:brightness(1.7)}65%{opacity:1;transform:scale(1.03) rotateY(-5deg);filter:brightness(1.12)}100%{opacity:1;transform:scale(1) rotateY(0);filter:brightness(1)}}@keyframes ticket-content-pop{0%{opacity:0;transform:translateY(20px) scale(.92)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes confetti-fall{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate3d(22px,680px,0) rotate(270deg)}}@media(max-width:520px){.result-card:has(.golden-ticket){width:min(575px,100%)}.golden-ticket{min-height:630px;padding:45px 15px;background-size:auto 100%;background-position:center}.ticket-content{width:min(355px,90%);padding:25px 19px 20px}.golden-ticket h1{font-size:38px}.golden-ticket .token{font-size:16px;letter-spacing:.4px}.ticket-confetti i{font-size:18px}}@media(prefers-reduced-motion:reduce){.golden-ticket,.ticket-content,.ticket-confetti i{animation:none!important}}
*{box-sizing:border-box}body{min-height:100vh;margin:0;background:radial-gradient(circle at 14% 9%,#c94f55 0,#7b1e30 43%,#300a14 100%);color:#fffaf4;font-family:"DM Sans",sans-serif}.preview-shell{min-height:100vh;display:grid;place-items:center;align-content:center;gap:18px;padding:34px 18px;overflow:hidden;position:relative}.snow{position:absolute;top:28px;left:50%;width:150%;transform:translateX(-50%);color:rgba(255,233,183,.55);font-size:22px;letter-spacing:30px;text-align:center;pointer-events:none}.card{width:min(575px,100%);padding:44px;border:1px solid rgba(255,239,202,.46);border-radius:28px;background:linear-gradient(145deg,rgba(112,21,39,.9),rgba(51,7,18,.92));box-shadow:0 30px 75px rgba(20,0,5,.42);text-align:center}.seal{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 22px;border:1px solid #f4d27a;border-radius:17px;color:#f4d27a;font-size:25px}.eyebrow{margin:0;color:#f4d27a;font:700 10px "DM Mono",monospace;letter-spacing:1.7px}.card h1{margin:14px 0 17px;font:700 clamp(34px,7vw,57px)/1 "Playfair Display",serif}.card h1 em{color:#f4d27a}.intro{max-width:435px;margin:0 auto 28px;color:#f4ded9;font-size:16px;line-height:1.65}.card strong{color:#fff6d9}form{text-align:left}label{display:block;margin-bottom:8px;color:#f4d27a;font-size:13px;font-weight:700}input{width:100%;border:1px solid rgba(255,239,202,.65);border-radius:12px;padding:15px 16px;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:16px;outline:0}input:focus{border-color:#f4d27a;box-shadow:0 0 0 3px rgba(244,210,122,.18)}button{width:100%;border:0;border-radius:12px;margin-top:13px;padding:15px;background:#f4d27a;color:#591326;font:700 15px "DM Sans",sans-serif;cursor:pointer;transition:transform .16s,filter .16s}button:hover{transform:translateY(-2px);filter:brightness(.05)}button:disabled{cursor:not-allowed;opacity:.45;transform:none}.hint{margin:14px 0 0;color:#e6bbb7;text-align:center;font-size:12px;line-height:1.5}.name-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:245px;margin-top:10px;overflow:auto;padding-right:3px}.name-choice{margin:0;padding:11px 12px;border:1px solid rgba(255,239,202,.28);background:rgba(255,255,255,.07);color:#fffaf4;text-align:left;font-size:13px}.name-choice:hover{border-color:#f4d27a;filter:none}.name-choice.selected{border-color:#f4d27a;background:rgba(244,210,122,.2);color:#fff}.name-empty{grid-column:1/-1;margin:8px 0;color:#e6bbb7;font-size:13px}.quiz-card{text-align:left}.quiz-top{display:flex;justify-content:space-between;gap:12px;color:#f4d27a;font:500 11px "DM Mono",monospace;letter-spacing:.5px}.progress{height:6px;margin:16px 0 31px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}.progress i{display:block;width:10%;height:100%;border-radius:inherit;background:#f4d27a;transition:width .25s}.quiz-card h1{font-size:clamp(28px,5.5vw,42px);line-height:1.14}.options{display:grid;gap:10px;margin-top:27px}.option{width:100%;margin:0;padding:15px 16px;border:1px solid rgba(255,239,202,.28);background:rgba(255,255,255,.07);color:#fffaf4;text-align:left}.option:hover{border-color:#f4d27a;filter:none}.option.selected{border-color:#f4d27a;background:rgba(244,210,122,.18)}.option b{display:inline-grid;place-items:center;width:25px;height:25px;margin-right:10px;border:1px solid currentColor;border-radius:8px;color:#f4d27a;font-size:12px}.question-actions{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:13px}.question-actions button{margin-top:0}.previous-question{width:auto;background:transparent;border:1px solid rgba(255,239,202,.5);color:#fffaf4}.previous-question[hidden]{display:none}.result-card .token{margin:24px auto 12px;padding:16px;border:1px dashed #f4d27a;border-radius:14px;color:#f4d27a;font:700 21px "DM Mono",monospace;letter-spacing:1px}.result-card p{color:#f4ded9;line-height:1.6}.result-card .score{margin:15px 0;color:#fff;font-size:18px;font-weight:700}.footer{margin:0;color:rgba(255,236,214,.64);font:500 10px "DM Mono",monospace;letter-spacing:1.3px}@media(max-width:520px){.preview-shell{padding:26px 15px}.card{padding:34px 24px;border-radius:22px}.card h1{font-size:40px}.quiz-top{font-size:9px}.snow{top:14px;font-size:16px}.name-picker{grid-template-columns:1fr}.question-actions{grid-template-columns:1fr}.previous-question{width:100%}}
/* Final layer for the invitation reveal: artwork stays decorative, all copy stays readable. */
.result-card:has(.golden-ticket){padding:0;background:#310914;border-color:#f0c15a}.golden-ticket{position:relative;display:grid;place-items:center;isolation:isolate;min-height:590px;margin:0;padding:58px 30px;overflow:hidden;background-color:#330a15;background-image:url("/assets/golden-ticket-reveal.png");background-size:contain;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 0 90px rgba(28,2,9,.72);animation:ticket-reveal .8s cubic-bezier(.18,.9,.25,1.1) both}.golden-ticket:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(39,3,12,.48),transparent 23%,transparent 77%,rgba(39,3,12,.48))}.golden-ticket .ticket-content{position:relative;z-index:2;width:min(420px,88%);padding:29px 27px 24px;border:1px solid rgba(131,78,17,.45);border-radius:16px;background:rgba(255,249,219,.96);box-shadow:0 15px 35px rgba(62,17,4,.28);text-shadow:none;animation:ticket-content-pop .5s .55s both}.golden-ticket .ticket-content p{color:#61360e}.golden-ticket .ticket-content .eyebrow{color:#8a4911}.golden-ticket .ticket-content h1{color:#572609}.golden-ticket .ticket-content .score{color:#75400b}.golden-ticket .ticket-content .token{background:#54141e;color:#fff4bd;border-color:#b67726}.golden-ticket .ticket-content .completed-picker .name-choice{pointer-events:none;color:#5d2b0d;border-color:rgba(131,78,17,.38);background:rgba(246,223,158,.48)}.ticket-confetti{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}.ticket-confetti i{position:absolute;top:-12%;color:#fff3b6;font-style:normal;font-size:22px;opacity:0;animation:confetti-fall 2.4s .4s ease-in infinite}.ticket-confetti i:nth-child(1){left:12%;animation-delay:.15s}.ticket-confetti i:nth-child(2){left:29%;animation-delay:.8s;color:#fff}.ticket-confetti i:nth-child(3){left:52%;animation-delay:.4s}.ticket-confetti i:nth-child(4){left:75%;animation-delay:1.1s;color:#fff}.ticket-confetti i:nth-child(5){left:91%;animation-delay:.55s}.ticket-footer{font-size:12px}@keyframes ticket-reveal{0%{opacity:0;transform:scale(.72) rotateY(48deg);filter:brightness(1.7)}65%{opacity:1;transform:scale(1.03) rotateY(-5deg);filter:brightness(1.12)}100%{opacity:1;transform:scale(1) rotateY(0);filter:brightness(1)}}@keyframes ticket-content-pop{0%{opacity:0;transform:translateY(20px) scale(.92)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes confetti-fall{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate3d(22px,680px,0) rotate(270deg)}}@media(max-width:520px){.result-card:has(.golden-ticket){width:min(575px,100%)}.golden-ticket{min-height:630px;padding:45px 15px;background-size:auto 100%;background-position:center}.golden-ticket .ticket-content{width:min(355px,90%);padding:25px 19px 20px}.golden-ticket h1{font-size:38px}.golden-ticket .token{font-size:16px;letter-spacing:.4px}.ticket-confetti i{font-size:18px}}@media(prefers-reduced-motion:reduce){.golden-ticket,.golden-ticket .ticket-content,.ticket-confetti i{animation:none!important}}
/* Subtle snowfall behind the preview card. */
.preview-shell:before,.preview-shell:after{content:"";position:absolute;inset:-140px -30px 0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1.5px,transparent 2.8px),radial-gradient(circle,rgba(255,245,211,.8) 0 2px,transparent 3.6px),radial-gradient(circle,rgba(255,255,255,.72) 0 1px,transparent 2.5px);background-size:128px 170px,235px 260px,78px 112px;background-position:12px -35px,58px -140px,-20px -70px;opacity:.44;animation:preview-snow-near 14s linear infinite}.preview-shell:after{opacity:.2;filter:blur(1px);background-size:190px 230px,310px 360px,120px 170px;background-position:70px -170px,4px -90px,35px -120px;animation:preview-snow-far 22s linear infinite}.preview-shell>*{position:relative;z-index:1}@keyframes preview-snow-near{0%{transform:translate3d(-10px,0,0)}50%{transform:translate3d(16px,52vh,0)}100%{transform:translate3d(-5px,110vh,0)}}@keyframes preview-snow-far{0%{transform:translate3d(15px,0,0)}50%{transform:translate3d(-13px,55vh,0)}100%{transform:translate3d(8px,110vh,0)}}@media(prefers-reduced-motion:reduce){.preview-shell:before,.preview-shell:after{animation:none}}
/* Keep the preview as a single, non-scrolling screen. */
html:has(.preview-shell),body:has(.preview-shell){height:100%;overflow:hidden}.preview-shell{height:100dvh;min-height:0;overflow:hidden;padding:22px 18px;align-content:center}.preview-shell .card{max-height:calc(100dvh - 44px);overflow:hidden}.preview-shell .name-picker{max-height:190px}.preview-shell .footer{flex-shrink:0}@media(max-width:520px){.preview-shell{height:100dvh;padding:15px 12px}.preview-shell .card{max-height:calc(100dvh - 30px);padding:25px 19px;border-radius:19px}.preview-shell .name-picker{max-height:155px;gap:6px}.preview-shell .name-choice{padding:9px 10px;font-size:12px}.preview-shell .intro{margin-bottom:18px;font-size:14px;line-height:1.45}.preview-shell .card h1{margin:10px 0 13px;font-size:36px}.preview-shell .seal{margin-bottom:14px}}
.login-card .hint{display:block;min-height:16px;margin:12px 0 0;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.07);color:#f0cbc5;line-height:1.4}.preview-shell>.footer{position:relative;z-index:2;margin-top:2px;white-space:nowrap}
main.preview-shell:has(#login-card:not([hidden]))>.footer{display:none}
@media(max-width:520px){.login-card .hint{margin-top:10px;padding:6px 8px;font-size:11px}.preview-shell>.footer{font-size:9px;letter-spacing:1px}}
.name-choice.completed,.name-choice.completed:hover{display:flex;align-items:center;justify-content:space-between;gap:12px;border-color:rgba(244,210,122,.55);background:rgba(244,210,122,.12);color:#f4d27a;cursor:not-allowed;opacity:.78;filter:none!important}.name-choice.completed em{font-size:10px;font-style:normal;white-space:nowrap;color:#f4d27a}