/* All assets are bundled locally. The page adapts to the display; no build step. */
:root{--brand:#008c78;--brand-dark:#00594c;--gold:#cfac68;--ink:#183f36;--muted:#577168;--paper:#f7faf4;--line:#dce6db;--green:#007d68;--font:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;min-width:320px;font-family:var(--font);color:var(--ink);background:radial-gradient(ellipse at 91% 44%,#d8eee166,transparent 54%),var(--paper);-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:wait}button:focus-visible{outline:3px solid #1a6ab2;outline-offset:6px}button,a{touch-action:manipulation}h1,h2,p{margin:0}[hidden]{display:none!important}.festive-border{height:7px;background:repeating-linear-gradient(110deg,var(--brand) 0 44px,#dcc593 44px 49px,var(--brand-dark) 49px 93px,#dcc593 93px 98px)}.app-shell{position:relative;z-index:1;width:min(1520px,88.4%);min-height:calc(100svh - 49px);margin:0 auto;display:flex;flex-direction:column}.site-header{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:14px;align-items:center;flex-shrink:0}.brand-symbol{display:grid;place-items:center;width:48px;height:54px;border-radius:15px;background:var(--brand);box-shadow:0 4px 0 #00594c}.brand-symbol img{width:31px;height:31px;filter:brightness(0) invert(1)}.brand-name{display:block;font-weight:800;font-size:23px;letter-spacing:1px}.brand-caption{display:block;color:var(--muted);font-size:12px;letter-spacing:3px;margin-top:6px}.header-right{display:flex;gap:25px;align-items:center}.event-tag{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}.event-tag>span{width:7px;height:7px;background:var(--brand);border-radius:50%;box-shadow:0 0 0 4px #008c7810}.utility-tools{display:flex;gap:6px}.tool-button{background:transparent;color:#49685e;border:1px solid #cfddd3;border-radius:9px;padding:9px 13px;font-size:13px;transition:background .2s}.tool-button:hover{background:#e8f1e7}.tool-button[aria-pressed="true"]{color:var(--brand);background:#e1eee4}.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.confetti{position:absolute;width:9px;height:19px;border-radius:2px;background:var(--gold);opacity:.4;animation:drift 8s ease-in-out infinite}.c1{left:5%;top:63%;transform:rotate(27deg)}.c2{left:47%;top:21%;background:var(--brand);animation-delay:-2s}.c3{left:91%;top:78%;transform:rotate(66deg);animation-delay:-5s}.c4{left:79%;top:18%;height:10px;width:10px;border-radius:50%;animation-delay:-6s}.c5{left:4%;top:84%;width:7px;height:7px;border-radius:50%;background:var(--brand)}.c6{left:58%;top:72%;animation-delay:-1s}.c7{left:97%;top:48%;background:var(--brand);animation-delay:-4s}.c8{left:34%;top:79%;width:6px;height:6px;border-radius:50%;animation-delay:-3s}main{display:flex;flex:1;min-height:0;outline:none}.screen{width:100%;animation:screen-in .45s ease both}.hero-screen{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:0;padding:45px 0 34px;min-height:550px}.hero-copy{position:relative;z-index:2;padding-left:1.3vw}.eyebrow{font-size:14px;letter-spacing:2px;color:#6c7952;display:flex;align-items:center;gap:12px;margin-bottom:22px}.eyebrow-line{height:2px;width:28px;background:var(--gold)}.hero-copy h1{position:relative;font-size:clamp(54px,5.75vw,94px);line-height:1.23;font-weight:900;letter-spacing:-3px;color:var(--brand-dark);white-space:nowrap}.hero-copy h1>span{color:var(--brand)}.title-dot{display:inline-block;width:14px;height:14px;margin-left:10px;border-radius:50%;background:var(--gold)}.hero-description{margin-top:23px;font-size:clamp(17px,1.45vw,23px);line-height:1.9;color:var(--muted);letter-spacing:.5px}.button{min-height:62px;padding:16px 34px;display:inline-flex;align-items:center;justify-content:center;gap:42px;border:0;border-radius:14px;font-size:23px;font-weight:700;transition:transform .18s,background .18s,box-shadow .18s}.button-primary{color:#fffdf3;background:var(--brand);box-shadow:0 5px 0 var(--brand-dark),0 10px 24px #00594c18}.button-primary:hover{background:#007866;transform:translateY(-2px);box-shadow:0 7px 0 var(--brand-dark),0 14px 28px #00594c22}.button-primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--brand-dark)}.button-primary>span{font-size:30px;font-weight:400}.button-primary:disabled{opacity:.85;transform:none}.hero-cta{margin-top:28px;min-width:245px}.button-caption{margin-top:15px;font-size:13px;color:#61756a}.topic-list{display:flex;gap:12px;align-items:center;margin-top:35px;font-size:12px;color:#597260}.topic-list>span:not(.topic-note){border:1px solid #c3d5c6;border-radius:5px;padding:5px 11px}.topic-note{margin-left:1px;letter-spacing:1px}.hero-visual{position:relative;aspect-ratio:1;display:grid;place-items:center;min-width:0;isolation:isolate}.visual-halo{position:absolute;width:95%;height:95%;border-radius:50%;background:radial-gradient(circle,#bfdcc288 0,#e1edd877 48%,transparent 70%);z-index:-1}.hero-gift{width:110%;height:110%;object-fit:contain;max-width:none;animation:float 5s ease-in-out infinite;filter:none}.gift-orbit{position:absolute;width:86%;height:50%;border:1px solid #709e8145;border-radius:50%;transform:rotate(-25deg);z-index:-1}.orbit-two{width:90%;height:66%;transform:rotate(28deg);border-style:dashed;border-color:#709e8130}.gift-label{position:absolute;right:-.5%;top:15%;font-size:22px;font-weight:800;color:var(--brand-dark);background:#e9d29d;padding:13px 24px;border-radius:8px;box-shadow:4px 5px 0 #b89c5a40;transform:rotate(9deg);animation:tag-bob 6s ease-in-out infinite}.gift-label>span{font-size:30px;margin-right:5px}.visual-note{position:absolute;bottom:3%;right:18%;font-size:13px;letter-spacing:3px;color:#6d8062}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:25px;min-height:84px;border-top:1px solid var(--line)}.flow-steps{display:flex;align-items:center;gap:36px;list-style:none;padding:0;margin:0;color:#63776a;font-size:14px}.flow-steps li{display:flex;align-items:center;gap:9px}.flow-steps li:not(:last-child)::after{content:"—";color:#bbcbbc;margin-left:17px}.flow-steps li>span{display:grid;place-items:center;border-radius:50%;width:28px;height:28px;border:1px solid #cddccf;font-size:11px;font-weight:800}.flow-steps li.active{color:var(--brand);font-weight:700}.flow-steps li.active>span{background:var(--brand);color:#fff;border-color:var(--brand)}.footer-right{display:flex;align-items:center;gap:22px;font-size:13px;color:var(--muted);white-space:nowrap}.text-button{border:0;background:none;color:#587064;font-size:14px;padding:11px 8px;text-decoration:underline;text-decoration-color:#b0c3b4;text-underline-offset:5px}.text-button:hover{color:var(--brand)}.reset-button{font-size:12px}.bottom-ribbon{position:relative;z-index:1;min-height:42px;display:flex;align-items:center;justify-content:center;gap:28px;background:var(--brand-dark);color:#e7ebd2;font-size:12px;letter-spacing:3px}.ribbon-dot{color:#d4a45a}.section-label{display:inline-flex;align-items:center;border:1px solid #bed2ba;border-radius:6px;padding:7px 14px;color:#476d46;font-size:14px;letter-spacing:1px;font-weight:600}.participant-rule{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}.draw-screen{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 0 24px;min-height:535px}.draw-top{position:absolute;top:26px;left:0;right:0;display:flex;align-items:center;justify-content:space-between}.draw-screen h1{font-size:clamp(30px,3.1vw,51px);color:var(--brand-dark);margin-top:34px;font-weight:800;letter-spacing:1px;outline:none}.screen-subtitle{font-size:19px;color:var(--muted);line-height:1.8;margin-top:12px}.draw-cta{min-width:260px}.drawing .button{background:#a87846;box-shadow:0 5px 0 #805530}.question-screen{display:flex;flex-direction:column;justify-content:space-between;padding:34px 2vw 35px;min-height:540px}.question-top{display:flex;align-items:center;justify-content:space-between}.question-body{margin:28px 0 34px}.question-instruction{font-size:17px;color:var(--muted);margin-bottom:20px;letter-spacing:2px}#question-text{font-size:clamp(30px,3.45vw,59px);font-weight:800;line-height:1.65;letter-spacing:1px;color:#153d33;outline:none;overflow-wrap:anywhere}#question-text.long-question{font-size:clamp(28px,3.05vw,51px)}.answer-area{text-align:center}.answer-helper{font-size:14px;color:var(--muted);margin-bottom:16px;letter-spacing:1px}.answer-buttons{display:flex;justify-content:center;gap:25px}.answer-button{display:flex;align-items:center;justify-content:center;gap:33px;min-height:104px;width:min(370px,42%);border:2px solid transparent;border-radius:17px;transition:transform .18s,box-shadow .18s}.answer-button:hover{transform:translateY(-3px)}.answer-button:active{transform:translateY(2px)}.answer-true{background:#007d68;color:#fffdf4;box-shadow:0 5px 0 #005443}.answer-true:hover{background:#006b59}.answer-false{background:#f5edda;border-color:#c4a974;color:#795322;box-shadow:0 5px 0 #c4a974}.answer-false:hover{background:#eee0ba}.answer-mark{font-family:Arial,sans-serif;font-weight:400;font-size:61px;line-height:1}.answer-label{display:flex;align-items:center;gap:18px}.answer-label small{font-size:14px;font-weight:400;letter-spacing:2px;writing-mode:vertical-rl}.answer-label strong{font-size:46px;line-height:1.2}.result-screen{display:flex;flex-direction:column;justify-content:center;padding:28px 2vw 30px;min-height:555px}.result-heading{display:flex;align-items:center;gap:24px;position:relative;min-height:140px}.result-symbol{display:grid;place-items:center;width:85px;height:85px;border:2px solid #c2a368;color:#008c78;background:#efe0b9;border-radius:50%;font-family:Arial,sans-serif;font-size:49px;box-shadow:0 0 0 8px #efe0b940;flex-shrink:0;animation:pop-in .6s ease both}.result-kicker{font-size:12px;letter-spacing:4px;color:#74813f;margin-bottom:8px}#result-title{font-size:clamp(35px,3.5vw,60px);color:var(--brand);line-height:1.3;letter-spacing:2px;outline:none}.result-subtitle{font-size:19px;color:#577363;margin-top:10px;line-height:1.5}.result-gift{position:absolute;right:20px;top:-40px;width:225px;height:225px;object-fit:contain;animation:float 4s ease-in-out infinite}.explanation-panel{position:relative;background:#fffefa;border:1px solid #dae2cc;border-radius:19px;padding:26px 30px;margin-top:17px;box-shadow:0 6px 25px #97733007}.explanation-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.explanation-heading .section-label{padding:4px 10px;font-size:12px}.selected-answer{font-size:14px;color:var(--muted)}.result-question{margin-top:16px;font-size:clamp(17px,1.5vw,25px);line-height:1.7;color:#58715f}.answer-explanation{display:flex;align-items:center;gap:27px;border-top:1px solid #e3e6d7;padding-top:20px;margin-top:18px}.correct-answer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:96px;height:94px;padding:8px 12px;border-radius:11px;background:#e7efde;color:#396238;font-size:13px;flex-shrink:0}.correct-answer strong{font-size:35px;line-height:1.2}.explanation-eyebrow{display:block;font-size:12px;color:#7a8046;letter-spacing:2px;margin-bottom:7px}#explanation-text{font-size:clamp(21px,2.1vw,35px);font-weight:600;line-height:1.55;color:#20432e}.result-actions{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:27px}.result-actions .button{min-width:225px;min-height:58px;font-size:21px}.result-incorrect .result-symbol{background:#efe6ce;color:#94703a;border-color:#cdb481;box-shadow:0 0 0 8px #efe6ce50;font-family:var(--font);font-size:39px}.result-incorrect #result-title{color:#80662f;font-size:clamp(30px,3.1vw,49px)}.result-incorrect .result-gift{display:none}.result-incorrect .explanation-panel{animation:reveal-panel .6s ease both}.celebration-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}.toast{position:fixed;left:50%;bottom:75px;transform:translateX(-50%);z-index:30;color:#f7faf4;background:#285143;padding:14px 22px;max-width:90vw;border-radius:12px;box-shadow:0 6px 30px #0002;font-size:14px;line-height:1.6}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.button-secondary{color:#49623d;background:#e7eddd;box-shadow:0 4px 0 #cfdac0}dialog{width:min(490px,92vw);color:var(--ink);border:1px solid #cddbbf;border-radius:23px;background:var(--paper);padding:32px;box-shadow:0 20px 100px #163e3140}dialog::backdrop{background:#15392b88;}dialog h2{font-size:27px;margin:20px 0 13px}dialog p{color:var(--muted);font-size:15px;line-height:1.8}.dialog-actions{display:flex;gap:14px;justify-content:flex-end;margin-top:27px}.dialog-actions .button{font-size:16px;min-height:50px;padding:12px 20px;gap:0}body[data-phase="question"] .ambient,body[data-phase="result"] .ambient{opacity:.25}body[data-phase="question"] .ambient *,body[data-phase="result"] .ambient *{animation-play-state:paused}body[data-phase="question"]{background:var(--paper)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-13px) rotate(1deg)}}@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@keyframes drift{0%,100%{translate:0 0;rotate:0deg}50%{translate:5px -20px;rotate:40deg}}@keyframes tag-bob{0%,100%{transform:rotate(9deg) translateY(0)}50%{transform:rotate(6deg) translateY(-5px)}}@keyframes shake{0%,100%{transform:rotate(0) scale(1.01)}25%{transform:rotate(-5deg) scale(1.03)}75%{transform:rotate(5deg) scale(1.03)}}@keyframes glow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}@keyframes screen-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes pop-in{0%{transform:scale(.5);opacity:0}65%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}@keyframes reveal-panel{from{transform:perspective(900px) rotateX(-7deg);opacity:0}to{transform:perspective(900px) rotateX(0);opacity:1}}
@media(min-width:1700px){.site-header{min-height:126px}.brand-name{font-size:29px}.brand-caption{font-size:14px}.brand-symbol{width:57px;height:61px}.event-tag{font-size:16px}.tool-button{font-size:16px}.hero-screen{padding:45px 0}.hero-description{font-size:24px}.hero-cta{font-size:28px;padding:20px 39px;min-width:300px}.eyebrow{font-size:17px}.button-caption{font-size:16px}.topic-list{font-size:15px}.site-footer{min-height:100px}.flow-steps{font-size:18px}.footer-right{font-size:16px}.bottom-ribbon{min-height:46px;font-size:14px}.app-shell{min-height:calc(100svh - 53px)}.section-label,.participant-rule{font-size:18px}.draw-screen h1{margin-top:55px}.screen-subtitle{font-size:24px}.draw-cta{font-size:28px;min-width:310px}.question-instruction{font-size:23px}.answer-helper{font-size:19px}.answer-button{min-height:125px;width:390px}.question-screen{padding-top:42px;padding-bottom:48px}.question-body{margin:36px 0}.result-screen{padding-block:45px}.result-heading{min-height:175px}.result-kicker{font-size:15px}.result-subtitle{font-size:25px}.result-gift{width:270px;height:270px;top:-50px}.explanation-panel{padding:30px 35px}.result-question{margin-top:19px}.correct-answer{height:115px;min-width:125px;font-size:17px}.correct-answer strong{font-size:45px}.explanation-eyebrow{font-size:15px}.selected-answer{font-size:18px}.result-actions{margin-top:36px}.result-actions .button{font-size:25px;min-height:70px}.result-actions .text-button{font-size:17px}}
@media(max-width:1050px){.app-shell{width:88%}.event-tag{display:none}.hero-copy h1{font-size:clamp(43px,5.7vw,65px);letter-spacing:-2px}.eyebrow{font-size:11px;letter-spacing:1px}.hero-screen{min-height:510px}.hero-description{font-size:16px}.gift-label{font-size:16px;padding:10px 16px;right:-1%}.gift-label>span{font-size:23px}.visual-note{font-size:11px;letter-spacing:1px}.topic-list{gap:6px;font-size:11px}.topic-list>span:not(.topic-note){padding:4px 8px}.flow-steps{gap:15px;font-size:12px}.flow-steps li:not(:last-child)::after{margin-left:5px}.footer-right{gap:10px;font-size:12px}.result-gift{width:180px;height:180px;right:0;top:-20px}.result-heading{min-height:120px}.result-subtitle{font-size:17px}.result-symbol{width:70px;height:70px;font-size:42px}.result-actions{margin-top:24px}}
@media(max-height:780px) and (min-width:900px){.site-header{min-height:88px}.hero-screen{padding:25px 0 24px;min-height:465px}.hero-copy h1{font-size:min(5.2vw,76px)}.hero-description{margin-top:16px;font-size:18px}.eyebrow{margin-bottom:16px}.hero-cta{margin-top:20px;min-height:57px;padding:12px 30px}.topic-list{margin-top:26px}.hero-visual{max-height:430px}.hero-gift{height:105%;width:105%}.site-footer{min-height:70px}.draw-screen{padding-top:20px;min-height:450px}.draw-screen h1{margin-top:34px;font-size:35px}.screen-subtitle{font-size:17px;margin-top:9px}.question-screen{padding-top:24px;padding-bottom:26px;min-height:440px}.question-body{margin:24px 0}#question-text{font-size:clamp(30px,3.1vw,46px);line-height:1.55}#question-text.long-question{font-size:clamp(28px,2.8vw,42px)}.question-instruction{font-size:15px;margin-bottom:16px}.answer-button{min-height:86px}.answer-mark{font-size:50px}.answer-label strong{font-size:39px}.answer-helper{margin-bottom:14px}.result-screen{min-height:460px;padding:22px 1vw}.result-heading{min-height:110px}.result-symbol{width:66px;height:66px;font-size:42px}#result-title{font-size:41px}.result-kicker{margin-bottom:4px}.result-subtitle{font-size:17px;margin-top:7px}.result-gift{width:175px;height:175px;top:-27px}.explanation-panel{padding:18px 24px;margin-top:12px}.result-question{font-size:18px;margin-top:12px}.answer-explanation{padding-top:15px;margin-top:13px;gap:22px}.correct-answer{min-width:88px;height:78px}.correct-answer strong{font-size:30px}#explanation-text{font-size:25px}.result-actions{margin-top:20px}.result-actions .button{min-height:50px;padding:11px 29px;font-size:19px}}
@media(max-width:700px){.app-shell{width:89%;min-height:calc(100svh - 48px)}.site-header{min-height:86px;gap:10px}.brand{gap:9px}.brand-symbol{width:35px;height:40px;border-radius:10px}.brand-symbol img{width:24px;height:24px}.brand-name{font-size:17px;letter-spacing:.5px}.brand-caption{font-size:9px;letter-spacing:1px;margin-top:5px}.utility-tools{gap:3px}.tool-button{font-size:11px;padding:8px 7px;border-radius:7px}.hero-screen{display:flex;flex-direction:column;min-height:0;padding:33px 0 24px;gap:0}.hero-copy{padding-left:0;width:100%;text-align:center}.eyebrow{justify-content:center;font-size:11px;margin-bottom:17px}.eyebrow-line{width:18px}.hero-copy h1{font-size:clamp(43px,10.8vw,68px);letter-spacing:-1px}.title-dot{width:9px;height:9px;margin-left:5px}.hero-description{font-size:15px;line-height:1.8;margin-top:15px}.hero-cta{margin-top:21px;min-width:225px;min-height:55px;font-size:20px;padding:13px 28px}.button-caption{font-size:11px;margin-top:12px}.topic-list{justify-content:center;margin-top:20px}.hero-visual{width:85%;height:260px;aspect-ratio:auto;margin-top:5px;max-width:400px}.hero-gift{height:112%;width:112%}.gift-label{top:12%;right:1%;font-size:14px;padding:8px 13px}.gift-label>span{font-size:21px}.visual-note{bottom:0;right:16%}.site-footer{min-height:93px;flex-direction:column;justify-content:center;gap:12px;padding:16px 0}.flow-steps{gap:10px;font-size:11px;justify-content:center;width:100%}.flow-steps li{gap:5px}.flow-steps li>span{width:22px;height:22px;font-size:9px}.flow-steps li:not(:last-child)::after{margin-left:5px}.footer-right{font-size:11px;gap:15px}.reset-button{padding:0 4px;font-size:11px}.bottom-ribbon{min-height:41px;font-size:10px;letter-spacing:1px;gap:10px}.section-label,.participant-rule{font-size:12px}.section-label{padding:5px 9px}.draw-screen{min-height:520px;padding:48px 0 27px}.draw-top{top:20px}.draw-screen h1{font-size:27px;margin-top:28px;letter-spacing:0}.screen-subtitle{font-size:15px}.draw-cta{min-width:230px;min-height:58px;font-size:22px}.question-screen{min-height:480px;padding:24px 0 29px}.question-top{gap:12px}.question-body{margin:29px 0}.question-instruction{font-size:13px;margin-bottom:19px;letter-spacing:0}#question-text{font-size:28px;line-height:1.7;letter-spacing:0}#question-text.long-question{font-size:25px}.answer-buttons{gap:15px}.answer-button{min-height:90px;width:50%;gap:14px;border-radius:13px}.answer-mark{font-size:38px}.answer-label{gap:8px}.answer-label small{font-size:10px;letter-spacing:1px}.answer-label strong{font-size:34px}.answer-helper{font-size:12px;letter-spacing:0}.result-screen{padding:26px 0;min-height:530px}.result-heading{gap:14px;min-height:115px}.result-symbol{width:52px;height:52px;font-size:32px;box-shadow:0 0 0 5px #efe0b940}.result-kicker{font-size:10px;letter-spacing:2px}.result-gift{display:none}#result-title{font-size:32px;letter-spacing:1px}.result-incorrect #result-title{font-size:25px;letter-spacing:0}.result-subtitle{font-size:14px;margin-top:7px}.result-incorrect .result-symbol{font-size:28px}.explanation-panel{padding:19px 16px;margin-top:10px;border-radius:15px}.explanation-heading{gap:10px}.selected-answer{font-size:12px}.result-question{font-size:15px;margin-top:14px;line-height:1.7}.answer-explanation{gap:14px;align-items:flex-start;margin-top:16px;padding-top:17px}.correct-answer{min-width:62px;height:78px;font-size:10px;padding:8px}.correct-answer strong{font-size:30px}.explanation-eyebrow{font-size:10px;letter-spacing:1px}#explanation-text{font-size:21px;line-height:1.6}.result-actions{flex-direction:column;gap:6px;margin-top:24px}.result-actions .button{font-size:20px;min-height:55px;min-width:225px}.result-actions .text-button{font-size:12px}.toast{font-size:12px;padding:12px 16px;bottom:60px;width:max-content;max-width:85vw}.dialog-actions .button{font-size:14px;padding:12px 17px}dialog{padding:26px}dialog h2{font-size:23px}}
.sr-only{top:0;left:0}.hero-visual{justify-self:center;width:100%;max-height:min(640px,calc(100svh - 315px))}.hero-gift{position:absolute;left:-5%;top:-5%;width:110%;height:110%}.visual-note{bottom:-12px;right:0;width:100%;text-align:center}.result-gift{width:clamp(110px,10vw,170px);height:clamp(110px,10vw,170px);top:auto;bottom:10px}
@media(max-width:700px){.hero-visual{width:85%}.visual-note{bottom:-6px}}
/* V1.1: visible stage effects, controlled by the host's page-level motion switch. */
.atmosphere-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.ambient{z-index:1}.app-shell{z-index:2}
.hero-gift{animation:gift-dance 3.2s ease-in-out infinite}.hero-visual:hover .hero-gift{animation:gift-wiggle .7s ease-in-out 2}
.gift-label{animation:label-dance 2.8s ease-in-out infinite}.visual-halo{animation:halo-breathe 3.2s ease-in-out infinite}
.orbit-one{animation:orbit-drift 18s linear infinite}.orbit-two{animation:orbit-drift 26s linear infinite reverse}
.hero-cta,.draw-cta{position:relative;overflow:hidden;isolation:isolate}.hero-cta::after,.draw-cta::after{content:"";position:absolute;pointer-events:none;width:45%;height:180%;background:linear-gradient(90deg,transparent,#fff7d95c,transparent);left:-60%;top:-40%;transform:skewX(-22deg);animation:button-shine 3.6s ease-in-out infinite;z-index:-1}
.hero-cta>span,.draw-cta>span{animation:arrow-invite 1.4s ease-in-out infinite}.drawing .ring-b{animation-delay:.45s}
.question-screen{animation:question-unfold .62s cubic-bezier(.2,.7,.25,1) both;transform-origin:50% 20%}
.result-symbol{position:relative}.result-screen:not(.result-incorrect) .result-symbol{animation:medal-bounce .85s cubic-bezier(.18,.75,.3,1.25) both}
.result-screen:not(.result-incorrect) .result-symbol::after{content:"";position:absolute;inset:-12px;border:3px solid #dab05a;border-radius:50%;animation:win-ripple 1.5s ease-out 3;pointer-events:none}
.result-screen:not(.result-incorrect) #result-title{animation:title-cheer .85s cubic-bezier(.2,.7,.35,1.4) both}
.result-screen:not(.result-incorrect) .result-gift{animation:gift-dance 2s ease-in-out 2}
.result-screen:not(.result-incorrect) .explanation-panel{animation:prize-reveal .75s ease-out both}
.result-incorrect .result-symbol{animation:friendly-tilt .95s ease-in-out both}
.result-incorrect .explanation-panel{animation:knowledge-flip .85s cubic-bezier(.2,.7,.3,1) both;transform-origin:50% 0}
@keyframes sway-festival{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}}
@keyframes gift-dance{0%,100%{transform:translateY(4px) rotate(-3deg) scale(.98)}50%{transform:translateY(-20px) rotate(3deg) scale(1.025)}}
@keyframes gift-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg) translateY(-9px)}75%{transform:rotate(7deg) translateY(-9px)}}
@keyframes label-dance{0%,100%{transform:rotate(10deg) translateY(0)}50%{transform:rotate(4deg) translateY(-12px)}}
@keyframes halo-breathe{0%,100%{transform:scale(.85);opacity:.45}50%{transform:scale(1.12);opacity:1}}
@keyframes orbit-drift{from{transform:rotate(-25deg)}to{transform:rotate(335deg)}}
@keyframes button-shine{0%,35%{left:-60%}70%,100%{left:125%}}
@keyframes arrow-invite{0%,100%{translate:0 0}50%{translate:5px -4px}}
@keyframes ring-open{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.65);opacity:0}}
@keyframes gift-draw{0%{transform:rotate(0) scale(1);opacity:1}12%{transform:rotate(-9deg) scale(1.06)}24%{transform:rotate(9deg) scale(1.06)}36%{transform:rotate(-12deg) translateY(-8px) scale(1.1)}48%{transform:rotate(12deg) translateY(-8px) scale(1.1)}58%{transform:rotate(-8deg) scale(1.14)}66%{transform:rotate(8deg) scale(1.14)}74%{transform:rotate(0) scale(.92);opacity:1}89%,100%{transform:translateY(-30px) scale(1.3);opacity:0}}
@keyframes reveal-cheer{0%,74%{transform:scale(.5);opacity:0}87%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes draw-sunburst{0%{transform:scale(.7);opacity:.4}65%{transform:scale(1.15);opacity:1}84%{transform:scale(1.8);opacity:1}100%{transform:scale(1.45);opacity:.6}}
@keyframes question-unfold{from{transform:perspective(1100px) rotateX(-8deg) translateY(30px);opacity:0}to{transform:perspective(1100px) rotateX(0) translateY(0);opacity:1}}
@keyframes medal-bounce{0%{transform:translateY(-55px) scale(.4);opacity:0}55%{transform:translateY(8px) scale(1.16);opacity:1}78%{transform:translateY(-10px) scale(.97)}100%{transform:translateY(0) scale(1)}}
@keyframes win-ripple{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.75);opacity:0}}
@keyframes title-cheer{0%{transform:translateY(20px) scale(.88);opacity:0}70%{transform:translateY(-5px) scale(1.04);opacity:1}100%{transform:translateY(0) scale(1)}}
@keyframes prize-reveal{from{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes friendly-tilt{0%{transform:scale(.7);opacity:0}30%{transform:rotate(-13deg) scale(1.1);opacity:1}55%{transform:rotate(10deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0) scale(1)}}
@keyframes knowledge-flip{from{transform:perspective(1000px) rotateX(-25deg) translateY(15px);opacity:0}to{transform:perspective(1000px) rotateX(0) translateY(0);opacity:1}}
@media(max-width:1050px){.header-right{gap:10px}.utility-tools{gap:4px}.tool-button{padding:9px 10px}}
@media(max-width:700px){.utility-tools{gap:3px}.tool-button{font-size:10px;padding:7px 6px}.brand-name{font-size:16px}.brand-caption{font-size:8px}.brand{gap:7px}.header-right{gap:0}.site-header{gap:7px}.brand-symbol{width:30px;height:36px}.brand-symbol img{width:21px;height:21px}}
@media(max-width:360px){.brand-caption{display:none}.brand-name{font-size:14px}.brand-symbol{width:26px;height:31px}.tool-button{font-size:9px;padding:7px 5px}}
body[data-motion="reduced"] *,body[data-motion="reduced"] *::before,body[data-motion="reduced"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}

/* V2: one participant, one fortune card. CSS owns the card presentation only. */
.hero-gift{filter:none;animation:gift-float-v2 4.6s ease-in-out infinite}
.hero-visual:hover .hero-gift{animation:gift-float-v2 4.6s ease-in-out infinite}
.gift-label{animation:label-float-v2 4.6s ease-in-out infinite}
.visual-halo{animation:halo-breathe 4.6s ease-in-out infinite}
.gift-orbit{animation:none}
.hero-cta::after{left:-60%;animation:button-shine-v2 4s ease-in-out infinite}
.hero-cta>span{animation:none}
.question-screen{animation:screen-in .4s ease-out both}
.result-screen:not(.result-incorrect) .result-gift{animation:gift-float-v2 2s ease-in-out 2}
.result-actions .button{min-width:265px}
.button-caption{font-size:14px;color:#61756a;line-height:1.5}
.screen-subtitle{font-size:20px}
.answer-helper{font-size:16px}
.question-instruction{font-size:18px}
.flow-steps{gap:28px}
.draw-screen{padding:78px 0 32px;min-height:560px}
.draw-screen h1{margin-top:0}
.fortune-deck{display:flex;justify-content:center;gap:clamp(22px,4vw,66px);margin-top:34px;padding:12px 20px 20px;perspective:1300px}
.fortune-card{--tilt:0deg;--delay:-.8s;display:block;position:relative;width:clamp(185px,18vw,285px);height:clamp(255px,25vw,382px);padding:0;border:0;background:none;border-radius:22px;transform:rotate(var(--tilt));animation:card-float 4.8s ease-in-out var(--delay) infinite;transition:opacity .25s,transform .25s}
.fortune-card:first-child{--tilt:-4deg;--delay:-2.2s}.fortune-card:last-child{--tilt:4deg;--delay:-3.4s}
.card-inner{display:block;width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.65,.3,1)}
.card-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;border-radius:22px;overflow:hidden}
.card-front{border:1px solid #005f4b;background:radial-gradient(ellipse at 14% 0%,#26b59377,transparent 62%),linear-gradient(150deg,#008c76,#006553);color:#eee1b8;box-shadow:0 7px 0 #004c40,0 15px 24px #005e4a20}
.card-front::before{content:"";position:absolute;inset:9px;border:1px solid #d9c38d94;border-radius:15px;pointer-events:none}
.card-front::after{content:"";position:absolute;width:190px;height:190px;border:1px solid #bddeb72b;border-radius:50%;right:-105px;bottom:-60px;box-shadow:0 0 0 18px #bddeb70b,0 0 0 38px #bddeb708}
.card-topline{font-size:12px;letter-spacing:4px;color:#d2e6ce}
.fortune-glyph{display:grid;place-items:center;font-size:clamp(64px,6vw,100px);font-weight:800;line-height:1;width:1.38em;height:1.38em;margin:15px 0 11px;color:#f3dfad;text-shadow:0 3px 0 #004c4080;border:1px solid #d9c38d70;border-radius:50%}
.card-name{font-size:clamp(21px,2vw,31px);letter-spacing:5px;font-weight:600}
.card-invite{display:flex;align-items:center;gap:16px;margin-top:19px;padding-top:12px;border-top:1px solid #b1d0ac50;font-size:15px;color:#edf3d8}
.card-invite>span{font-size:24px;line-height:1}
.card-back{transform:rotateY(180deg);border:1px solid #c4b076;background:radial-gradient(circle at 50% 25%,#fffbe3,#e7d6a8);box-shadow:0 7px 0 #b5a272,0 15px 30px #005e4a18;color:var(--brand-dark)}
.card-back-star{font-size:34px;color:#9d823b;margin-bottom:12px}
.card-back strong{font-size:clamp(38px,4.5vw,67px);letter-spacing:7px;line-height:1.4}
.card-back>span:last-child{font-size:13px;letter-spacing:3px;margin-top:17px}
.fortune-card:hover:not(:disabled){animation-play-state:paused;transform:translateY(-12px) rotate(0)}
.fortune-card:hover:not(:disabled) .card-front{background:linear-gradient(145deg,#049f84,#006d58)}
.drawing .fortune-card{animation:none}
.drawing .fortune-card:not(.chosen){opacity:.16;transform:scale(.93) rotate(var(--tilt))}
.drawing .fortune-card.chosen{transform:translateY(-10px) rotate(0) scale(1.06)}
.drawing .chosen .card-inner{transform:rotateY(180deg)}
@keyframes card-float{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-8px) rotate(var(--tilt))}}
@keyframes gift-float-v2{0%,100%{transform:translateY(5px) rotate(-2deg)}50%{transform:translateY(-15px) rotate(2deg)}}
@keyframes label-float-v2{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(4deg) translateY(-7px)}}
@keyframes button-shine-v2{0%,35%{transform:translateX(0) skewX(-22deg)}70%,100%{transform:translateX(430%) skewX(-22deg)}}
@media(min-width:1700px){.draw-screen{padding-top:90px}.fortune-deck{margin-top:40px}.card-topline{font-size:16px}.card-invite{font-size:19px}.screen-subtitle{font-size:25px}.button-caption{font-size:17px}.answer-helper{font-size:19px}.question-instruction{font-size:23px}}
@media(max-width:1100px){.app-shell{width:90%}.flow-steps{gap:12px;font-size:12px}.flow-steps li:not(:last-child)::after{margin-left:3px}.footer-right{gap:10px;font-size:12px}.event-tag{display:none}}
@media(max-height:780px) and (min-width:900px){.draw-screen{padding:70px 0 20px;min-height:450px}.draw-top{top:18px}.draw-screen h1{margin-top:0;font-size:34px}.screen-subtitle{font-size:19px;margin-top:7px}.fortune-deck{margin-top:18px;padding-bottom:12px}.fortune-card{width:186px;height:247px}.fortune-glyph{font-size:64px;margin:11px 0 8px}.card-name{font-size:22px}.card-invite{margin-top:14px;font-size:14px}.card-topline{font-size:12px}.card-back strong{font-size:44px}.draw-screen .button-caption{margin-top:9px}.question-instruction{font-size:17px}}
@media(max-width:700px){.draw-screen{min-height:510px;padding:85px 0 35px}.draw-top{top:23px}.participant-rule{font-size:11px}.draw-screen h1{font-size:clamp(23px,5.4vw,34px);letter-spacing:0;margin:0}.screen-subtitle{font-size:17px}.fortune-deck{gap:10px;padding:10px 2px 15px;margin-top:35px;width:100%}.fortune-card{width:calc((100% - 20px)/3);height:clamp(170px,48vw,260px);border-radius:14px}.card-face{border-radius:14px}.card-front::before{inset:5px;border-radius:10px}.card-topline{font-size:8px;letter-spacing:1px}.fortune-glyph{font-size:clamp(38px,11vw,65px);margin:10px 0 8px}.card-name{font-size:clamp(15px,4.2vw,23px);letter-spacing:2px}.card-invite{font-size:10px;gap:6px;margin-top:11px;padding-top:8px}.card-invite>span{font-size:18px}.card-back-star{font-size:23px;margin-bottom:5px}.card-back strong{font-size:30px;letter-spacing:3px}.card-back>span:last-child{font-size:8px;letter-spacing:1px;margin-top:8px}.button-caption{font-size:12px}.flow-steps{font-size:11px;gap:10px}.flow-steps li{gap:6px}.flow-steps li:not(:last-child)::after{display:none}.footer-right{font-size:11px;gap:10px}.answer-helper{font-size:12px}.question-instruction{font-size:15px;letter-spacing:0}}
@media(max-width:360px){.card-topline{font-size:7px}.fortune-card{height:160px}}
body[data-motion="reduced"] *,body[data-motion="reduced"] *::before,body[data-motion="reduced"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
@media(min-width:900px) and (min-height:781px){
  .fortune-card{width:clamp(210px,25.4vh,273px);height:clamp(280px,34vh,366px)}
  .fortune-glyph{font-size:clamp(68px,8vh,88px);margin:11px 0 8px}
  .card-name{font-size:clamp(23px,2vw,27px)}
  .card-invite{margin-top:14px;padding-top:9px;font-size:15px}
}
/* Keep small card labels readable across the whole gradient, including hover. */
.card-front{background:linear-gradient(150deg,#007866,#005e4e)}
.fortune-card:hover:not(:disabled) .card-front{background:linear-gradient(145deg,#007866,#005e4e)}
.card-topline,.card-invite{color:#fff7db}
/* Sound controls belong to the host; audience interaction stays unchanged. */
#sound-dialog{width:min(540px,92vw)}
#sound-dialog h2{font-size:26px;line-height:1.5}
.volume-heading{display:flex;align-items:center;justify-content:space-between;margin-top:28px;font-size:18px}
.volume-heading output{font-weight:800;color:var(--brand-dark);font-size:27px;font-variant-numeric:tabular-nums}
#sound-volume{display:block;width:100%;margin:20px 0 12px;accent-color:var(--brand);height:28px;cursor:pointer}
#sound-volume:focus-visible{outline:3px solid #1a6ab2;outline-offset:4px}
#sound-dialog .volume-help{font-size:14px}
.sound-preview-buttons{display:flex;gap:15px;margin-top:24px}
.sound-preview-buttons .button{flex:1;min-height:58px;font-size:19px;padding:13px 16px}
#sound-dialog .sound-preview-status{font-size:13px;min-height:48px;margin-top:20px;line-height:1.8}
.sound-dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:12px}
.sound-dialog-actions .button{min-height:46px;font-size:16px;padding:10px 25px}
@media(max-width:700px){.site-header{flex-wrap:wrap;padding-block:12px;row-gap:8px}.header-right{margin-left:auto}#sound-dialog{padding:24px}#sound-dialog h2{font-size:22px}.sound-preview-buttons .button{font-size:16px}}
.home-button{color:var(--brand-dark);border-color:#93c5b8;background:#e3f1e9;font-weight:700;white-space:nowrap}.home-button span{font-size:1.2em;margin-right:3px}.utility-tools{flex-wrap:wrap;justify-content:flex-end}@media(max-width:700px){.header-right{max-width:100%}.utility-tools{row-gap:6px}}
#start-label{font-size:inherit;font-weight:inherit}
/* Keep navigation beside the brand; host controls get their own mobile row. */
.site-header{gap:16px}
.site-header .brand{margin-right:auto}
.site-header .header-right{flex-shrink:0}
.site-header .utility-tools{flex-wrap:nowrap}
@media(max-width:700px){
  body{min-width:0}
  .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(44px,auto) auto;grid-template-areas:"brand home" "tools tools";gap:12px 10px;padding-block:14px}
  .site-header .brand{grid-area:brand;margin:0;min-width:0;gap:9px}
  .site-header .brand>div{min-width:0}
  .site-header .brand-name{font-size:17px;letter-spacing:0;white-space:nowrap}
  .site-header .brand-caption{display:block;font-size:10px;letter-spacing:.5px;white-space:nowrap;margin-top:5px}
  .site-header .brand-symbol{width:34px;height:40px;flex-shrink:0}
  .site-header .brand-symbol img{width:24px;height:24px}
  .site-header .home-button{grid-area:home;justify-self:end;min-height:44px;font-size:13px;padding:9px 12px}
  .site-header .header-right{grid-area:tools;display:block;width:100%;max-width:none;min-width:0;margin:0}
  .site-header .utility-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
  .site-header .utility-tools .tool-button{width:100%;min-width:0;min-height:44px;font-size:13px;line-height:1.4;padding:9px 4px;white-space:nowrap}
}

/* Preserve focus presentation and pause offscreen decoration. */
#welcome-title{outline:none}
body[data-visibility="hidden"] *,body[data-visibility="hidden"] *::before,body[data-visibility="hidden"] *::after{animation-play-state:paused!important}