:root{--edge:24px;--purple:#3d047e;--orange:#ff5100;--blue:#0073ff;--red:#e92429;--white:#fffaf6;font-family:'Chiron GoRound TC',sans-serif;color:var(--white);background:var(--purple);font-weight:700;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}button:disabled{cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:6px}button:hover{filter:brightness(1.08)}button:active{transform:translateY(2px)}[hidden]{display:none!important}#game-surface{min-height:100svh;position:relative;isolation:isolate;transition:filter .5s,transform .5s}#stage{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}#fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}#stage canvas{display:block;width:100%;height:100%}.masthead{height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--edge);position:absolute;inset:0 0 auto;z-index:5;pointer-events:none}.header-right{pointer-events:auto}.brand{font-family:Arial,sans-serif;font-weight:900;font-size:20px;letter-spacing:-.8px;color:var(--white);text-decoration:none;display:flex;align-items:center;gap:7px}.brand>span:last-child{font-size:14px;border:1px solid #ffffff75;border-radius:30px;padding:4px 6px;letter-spacing:0}.brand-mark{color:var(--orange);font-size:32px;line-height:1}.header-right{display:flex;align-items:center;gap:18px}.icon-button{background:transparent;color:white;width:43px;height:43px;padding:8px;border:1px solid #ffffff50;border-radius:50%}.icon-button svg{height:100%;width:100%}.icon-button[aria-pressed=true] .sound-waves{display:none}#round-pill{border:1px solid #ffffff60;border-radius:25px;padding:7px 16px;font-size:14px}.screen{min-height:100svh;position:relative}.eyebrow{font-size:13px;letter-spacing:.08em;font-weight:700;display:flex;align-items:center;gap:14px}.home-copy>.eyebrow{color:var(--orange)}.tiny-star{font-size:21px}.edition{border:1px solid var(--orange);border-radius:20px;font-size:11px;padding:4px 8px;margin-left:5px;letter-spacing:.02em}h1{font-size:clamp(62px,calc(6.5*var(--vw)),134px);line-height:1.13;letter-spacing:-.065em;font-weight:900;color:var(--orange);margin:19px 0 28px;position:relative}.title-spark{position:absolute;display:inline-block;font-family:Arial;font-size:.49em;transform:rotate(10deg);margin:16px 0 0 14px}.primary{border-radius:100px;background:var(--orange);color:var(--purple);padding:17px 28px;font-size:22px;font-weight:900;display:inline-flex;align-items:center;justify-content:space-between;gap:42px;transition:filter .2s,transform .2s;min-height:62px}.primary.huge{font-size:clamp(25px,calc(3.5*var(--vw)),51px);padding:13px 34px;gap:.55em;min-height:85px}.primary:disabled{opacity:.68}.arrow{width:1.3em;height:1.3em;flex:none;color:inherit}.cinema-screen{display:flex;align-items:flex-end;justify-content:center}.question-screen,.result-screen{display:flex;justify-content:flex-end;align-items:center;padding:116px var(--edge) 55px}.question-screen{padding:92px var(--edge)}.question-content,.result-content{width:47%;max-width:690px; margin-right:calc(4*var(--vw))}.question-content>.eyebrow{color:#cca5ee;justify-content:space-between}h2{font-weight:900}.question-content h2{font-size:clamp(27px,calc(3.25*var(--vw)),51px);line-height:1.35;letter-spacing:-.035em;margin:0 0 12px}.question-content h2 em{font-style:normal;color:var(--orange);white-space:nowrap}.screen-top,.screen-rest{display:contents}.answers{display:grid;gap:12px}.answer{display:flex;border-radius:55px;background:var(--blue);min-height:75px;overflow:hidden;transition:transform .2s,background .2s,color .2s}.answer:hover,.answer:active,.answer:focus-within{transform:translateX(4px);background:#0052b8}.answer button{background:transparent;color:white}.answer-choice{flex:1;min-width:0;display:flex;align-items:center;gap:16px;text-align:left;padding:17px 23px;font-size:26px;font-weight:900}.answer-letter{font-family:Arial,sans-serif;font-size:12px;width:26px;height:26px;border:1px solid #ffffff65;display:grid;place-items:center;border-radius:50%;flex-shrink:0}.audio-status{font-size:12px;color:#ceb4e9;min-height:18px;margin:21px 0 0}.info-line{margin:22px 0 0}#question .info-line{text-align:right}.info-link{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.5);text-decoration:none;font-size:14px;font-weight:700;line-height:1.3}.info-link u{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}.info-link:hover u{text-decoration-thickness:2.5px}#result .info-line{margin:0 0 22px}@media(min-width:901px){#result .info-link,#result .credits{font-size:calc(1.5*var(--vw))}}.info-link .arrow{width:1em;height:1em;margin-left:-2px}.link-logo{flex:none;width:1.6em;height:1.6em;background:currentColor;-webkit-mask:url(./assets/my903.svg) no-repeat center/contain;mask:url(./assets/my903.svg) no-repeat center/contain}.result-content>.eyebrow{font-size:20px;letter-spacing:0}#result-kicker{font-size:32px;letter-spacing:0;color:rgba(255,255,255,.5)}.result-content h2{color:var(--orange);font-size:clamp(48px,calc(5.7*var(--vw)),85px);letter-spacing:-.06em;line-height:1.1;margin:24px 0 9px}.result-content h3{color:var(--orange);font-size:clamp(26px,calc(3*var(--vw)),43px);margin:0 0 24px;line-height:1.3}.result-content>p{font-size:17px;line-height:1.65;max-width:520px}.result-content .credits{color:var(--white);font-size:14px;line-height:1.8}.now-playing{display:flex;align-items:center;gap:13px;background:#2d055e;color:white;padding:13px 18px;border-radius:14px;margin:25px 0;font-size:13px}.equalizer{display:flex;height:18px;align-items:center;gap:3px}.equalizer i{width:3px;height:50%;background:var(--orange);animation:equalize .7s alternate infinite}.equalizer i:nth-child(2){animation-delay:-.3s}.equalizer i:nth-child(3){animation-delay:-.5s}.equalizer i:nth-child(4){animation-delay:-.1s}.now-playing.paused .equalizer i{animation-play-state:paused}.finish-screen{display:flex;justify-content:center;text-align:center;padding:114px var(--edge) 45px}.finish-content{max-width:750px}.finish-content h2{font-size:clamp(53px,calc(6*var(--vw)),88px);color:var(--orange);line-height:1.1;letter-spacing:-.05em;margin:12px 0 25px;position:relative}.finish-content h2>span{display:inline-block;font-size:.5em;transform:rotate(15deg);position:absolute;margin:12px}.finish-prizes{margin:22px 0 4px}.prize-link{background:transparent;color:var(--white);font-size:18px;font-weight:700;display:inline-flex;align-items:center;gap:10px;padding:0}.prize-link u{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}.prize-link:hover u{text-decoration-thickness:3px}.prize-link .arrow{width:1em;height:1em}.prize-hit{position:absolute;inset:0;background:transparent;border-radius:14px}.prize-hit:active{transform:none}.prize-list{list-style:none;margin:0;padding:0;font-size:17px;font-weight:700}.prize-list li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:7px 0}.prize-list li span:last-child{color:var(--orange);white-space:nowrap}.finish-actions{display:inline-flex;flex-direction:column;gap:15px;align-items:stretch;justify-content:center;margin:24px 0}.finish-actions .secondary{justify-content:center}.secondary{border:1px solid var(--orange);border-radius:50px;background:transparent;color:var(--orange);font-size:18px;padding:17px 28px;font-weight:900}.discoveries{display:flex;justify-content:center;gap:14px;margin:20px 0}.discovery{width:105px;transform:rotate(-5deg);border:1px solid #ffffff65;padding:7px;border-radius:9px;background:#ffffff12;box-shadow:5px 8px 0 #19043455}.discovery:nth-child(2){transform:rotate(4deg)}.discovery:nth-child(3){transform:rotate(-2deg)}.discovery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px}.discovery span{display:block;font-size:11px;margin:5px 0 2px}body[data-scene=break] #stage,body[data-scene=break] main,body[data-scene=break] .masthead{filter:blur(14px)}#stage,main,.masthead{transition:filter .5s}.overlay{position:fixed;inset:0;z-index:15;display:grid;place-items:center;background:#1805389e;padding:20px}.break-wrap{position:relative;text-align:center;z-index:1}.break-wrap>p{font-size:16px;margin:0 0 18px}.break-wrap>.break-title{color:var(--orange);font-size:26px;font-weight:900;letter-spacing:-.02em;margin:0 0 10px}.break-close{position:absolute;top:24px;right:var(--edge);z-index:2;width:43px;height:43px;border-radius:50%;border:1px solid #ffffff50;background:#18053899;color:var(--white);font-size:26px;line-height:1;display:grid;place-items:center;padding:0 0 3px}.break-choices{display:inline-flex;flex-direction:column;align-items:stretch;gap:15px;margin-top:22px}.break-choices .secondary{justify-content:center}.break-card{width:300px;height:450px;max-width:calc(100vw - 40px);background:#f6f1ea;margin:auto;border-radius:6px}.break-top{display:flex;justify-content:space-between;font:9px Arial,sans-serif;letter-spacing:.08em}.break-spark{position:absolute;font:180px Arial;color:var(--red);right:-35px;top:35px;transform:rotate(12deg)}.break-card h2{font-size:58px;line-height:1.02;letter-spacing:-.08em;margin:46px 0 20px;position:relative}.break-card>p{font:10px/1.5 Arial,sans-serif;letter-spacing:.1em}.break-brand{font:bold 20px Arial;border-top:1px solid var(--purple);padding-top:15px;margin-top:29px}.break-countdown{width:300px;max-width:calc(100vw - 40px);height:6px;margin:20px auto 0;border-radius:6px;background:#ffffff33;overflow:hidden}.break-countdown i{display:block;height:100%;width:100%;background:var(--orange);border-radius:6px;transition:width .12s linear}.bokeh{position:absolute;inset:0;overflow:hidden}.bokeh i{position:absolute;border-radius:50%;filter:blur(15px);width:90px;height:90px;background:#ff510045;top:20%;left:16%}.bokeh i:nth-child(2){width:160px;height:160px;left:80%;top:60%;background:#0073ff55}.bokeh i:nth-child(3){top:80%;left:24%;background:#ffffff30}.bokeh i:nth-child(4){top:12%;left:72%;width:65px;height:65px;background:#e9242966}dialog{border:1px solid #ffffff60;border-radius:22px;padding:40px;max-width:min(440px,calc(100vw - 40px));color:white;background:var(--purple)}dialog::backdrop{backdrop-filter:blur(8px);background:#140527bf}dialog h2{font-size:30px}#prize-dialog h2{font-size:23px;margin:4px 0 18px}dialog p{font-size:16px;line-height:1.8}.dialog-close{position:absolute;right:15px;top:12px;background:transparent;color:white;font-size:25px}.dialog-close-button{font-size:18px;min-height:50px;margin-top:15px}#error,#a-message{position:fixed;inset:0;z-index:25;background:var(--purple);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}#error p,#a-message p{max-width:500px;line-height:1.8}@keyframes equalize{from{height:25%}to{height:100%}}@media(max-height:780px) and (min-width:901px){.masthead{height:72px}.screen{min-height:100svh}.question-screen,.result-screen{padding-top:77px;padding-bottom:32px}.question-screen{padding-top:72px;padding-bottom:72px}.answer{min-height:63px}.question-content h2{margin:0 0 17px}.question-content{width:48%}.finish-screen{padding-top:72px}.finish-content h2{font-size:65px}.finish-top{margin-top:16px}.discoveries{margin:13px 0}.discovery{width:85px}}
@media(max-width:900px){:root{--edge:18px}.masthead{height:72px;padding:0 var(--edge)}.brand{font-size:17px}.brand-mark{font-size:26px}.brand>span:last-child{font-size:11px}.icon-button{width:37px;height:37px}.exit-button{font-size:16px;min-height:44px;padding:8px 18px 8px 12px;gap:8px;background:rgba(61,4,126,.62)}.screen{min-height:100svh}.eyebrow{font-size:11px;gap:8px}.edition{font-size:9px}.tiny-star{font-size:16px}.title-spark{font-size:.4em;margin:10px 0 0 10px}.question-screen,.result-screen{display:block;padding:0 var(--edge) 40px}.question-content,.result-content{width:100%;max-width:none;padding-top:16px;position:relative;z-index:1}.question-content>.screen-top>h2,.result-content>.screen-top>.eyebrow{margin-top:0}body[data-scene=question] .masthead,body[data-scene=result] .masthead,body[data-scene=break] .masthead{position:absolute;inset:0 0 auto;pointer-events:none}body[data-scene=question] .header-right,body[data-scene=result] .header-right,body[data-scene=break] .header-right{pointer-events:auto}.screen-top,.screen-rest{display:block}.screen-top{padding-top:var(--chain-space,380px)}.question-content h2{font-size:29px;margin:17px 0}.answer{min-height:54px}.answer-choice{padding:10px 17px;font-size:21px;gap:11px}.answers{gap:8px}.audio-status{font-size:11px;margin-top:17px}.result-content{padding-top:18px}.result-content>.eyebrow{font-size:17px}#result-kicker{font-size:20px;padding-bottom:10px}.info-link{font-size:13px}.info-line{margin-top:18px}.break-wrap>.break-title{font-size:22px}.break-close{top:15px;width:37px;height:37px}.result-content h2{font-size:36px;margin:6px 0 4px}.result-content h3{font-size:20px;margin-bottom:12px}.result-content>p{font-size:15px}.result-content .credits{font-size:12px}#continue,#shared-replay{font-size:18px;padding:10px 17px;min-height:54px;gap:18px}.now-playing{margin:20px 0}.finish-screen{padding:99px var(--edge) 30px;min-height:100svh}.finish-content h2{font-size:44px}.prize-link{font-size:15px;gap:8px}.prize-list{font-size:15px}.prize-list li{gap:12px;padding:6px 0}#prize-dialog h2{font-size:19px}.finish-top{font-size:15px;margin-top:26px}.finish-content>.eyebrow{font-size:9px}.finish-copy{font-size:14px}.finish-actions{flex-direction:column;gap:12px}.finish-actions .primary,.finish-actions .secondary{width:100%;justify-content:center}.finish-actions .secondary{font-size:16px;padding:15px}.finish-content h2>span{font-size:.4em;margin:8px}.finish-content #score-line{font-size:15px}.break-wrap>p{font-size:14px}.header-right{gap:10px}#round-pill{font-size:12px;padding:6px 11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.equalizer i{animation:none!important}.answer,button,#game-surface{transition:none!important}}

/* Native dialogs focus their first button on open; keep button-like controls ring-free. */
button,a.primary,a.secondary,a.share-social{-webkit-user-select:none;user-select:none}
button:focus,button:focus-visible,a.primary:focus,a.secondary:focus,a.share-social:focus{outline:none}
button::-moz-focus-inner{border:0}

/* Separate exiting from retrying by at least the retry button's height (62px). */
.break-choices{gap:72px}

/* The header carries the exit control on the left and the sound control on the right. */
.header-left{pointer-events:auto}
.exit-button{display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--white);border:0;border-radius:100px;padding:9px 22px 9px 15px;font-size:18px;font-weight:700;min-height:50px}
.question-content>.eyebrow{justify-content:flex-end}
.audio-status:empty{display:none}
.answer.incorrect,.answer.incorrect:hover{background:#5d378c;opacity:.65;box-shadow:none;transform:none}
.answer.incorrect .answer-title{text-decoration:line-through;text-decoration-thickness:2px}
.answer.incorrect .answer-letter{font-size:22px;border:0}
.answer.incorrect button:disabled{cursor:not-allowed}
.answer.correct{outline:2px solid #fff9;outline-offset:-2px}
.result-content>.primary{margin-top:20px}

/* Screen copy rises in and sinks out; the 3D scene is untouched. */
.screen.entering:not(.home-screen){animation:screen-fade-in 1s cubic-bezier(.3,.6,.3,1) both}
.screen.leaving{animation:screen-fade-out .3s ease-in both;pointer-events:none;position:absolute;top:0;left:0;right:0;z-index:2}
.screen.entering .finish-content{animation:screen-rise .62s cubic-bezier(.22,.8,.24,1) both}
@keyframes screen-fade-in{from{opacity:0}to{opacity:1}}
@keyframes screen-fade-out{from{opacity:1}to{opacity:0}}
@keyframes screen-slide-in{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
@keyframes screen-slide-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-28px)}}
@keyframes screen-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes screen-sink{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){.screen.entering *,.screen.leaving *{animation:none!important}}

/* Titles receive focus for screen readers only; no visible ring. */
#question-title:focus,#song-title:focus,#finish h2:focus,#success h2:focus{outline:none}

/* Answer screen buttons: 分享俾朋友 beside 繼續. */
.result-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.result-actions .secondary{font-size:22px;min-height:62px;padding:17px 36px}

/* Login returns skip the home screen. */
html[data-boot=success] #home,html[data-boot=success] #stage{visibility:hidden}

/* Share screen: solid purple, left-aligned block in the middle of the page. */
.share-overlay{background:var(--purple);grid-template-columns:min(560px,100%);justify-content:center}
.share-wrap{min-width:0;justify-self:stretch;margin:auto 0}
/* Only the share panel scrolls while native sharing can suspend the browser. */
html.share-panel-open{overflow:hidden;overscroll-behavior:none}
.share-overlay{bottom:auto;height:var(--share-panel-height,100%);overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;align-items:start;grid-template-rows:minmax(min-content,1fr)}
.share-wrap h2{text-align:center;color:var(--orange);font-size:clamp(44px,calc(5*var(--vw)),72px);font-weight:900;letter-spacing:-.04em;line-height:1.1;margin:0 0 26px}
.share-preview{margin:0 0 24px}
.share-preview img{display:block;width:auto;max-width:100%;height:auto;max-height:min(46vh,440px);margin:0 auto}
/* The link box keeps at least 220px; on a narrow phone the buttons wrap under it as one row. */
.share-buttons{display:flex;gap:10px}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.share-url{flex:1 1 0;min-width:min(220px,100%);height:60px;display:flex;align-items:center;gap:8px;border-radius:100px;background:rgba(255,255,255,.1);padding:0 12px 0 20px}
#share-url{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:17px;user-select:all;-webkit-user-select:all;cursor:pointer}
#share-copy{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;background:none;color:var(--white)}
.share-icon{display:block;width:28px;height:28px;background:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain}
.share-icon.copy{-webkit-mask-image:url(./assets/share-copy.svg);mask-image:url(./assets/share-copy.svg)}
.share-social{flex:none;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;padding:0;color:#fff;transition:filter .2s,transform .2s}
.share-social:hover{filter:brightness(1.08);transform:translateY(-1px)}
.share-social.threads{background:#000}
.share-social.threads .share-icon{width:30px;height:30px;-webkit-mask-image:url(./assets/share-threads.svg);mask-image:url(./assets/share-threads.svg)}
.share-social.whatsapp{background:#25d366}
/* Download the share image (where the social buttons show, i.e. not with the share sheet). */
.share-social.download{background:#c48b58;color:#fff}
.share-social.download svg{width:30px;height:30px}
.share-social.whatsapp .share-icon{width:38px;height:38px;-webkit-mask-image:url(./assets/share-whatsapp.svg);mask-image:url(./assets/share-whatsapp.svg)}
.share-social.facebook{background:#1877f2}
.share-social.facebook .share-icon{width:48px;height:48px;-webkit-mask-image:url(./assets/share-facebook.svg);mask-image:url(./assets/share-facebook.svg)}
.share-social.native{background:var(--orange);color:var(--purple)}
/* While the share image loads (app.js preloadShareFile). */
.share-social.native:disabled{opacity:.5}
/* The share-sheet button: the icon with 分享 beside it. */
.share-social.native{width:auto;display:inline-flex;align-items:center;gap:8px;padding:0 24px 0 20px;border-radius:100px;font-size:20px;font-weight:900}
.share-social.native svg{width:26px;height:26px;flex:none}
.share-status{min-height:1.5em;margin:10px 0 14px 20px;font-size:14px;color:rgba(255,255,255,.5)}
@media(max-width:900px){
.result-actions .secondary{font-size:18px;min-height:54px;padding:10px 20px}
.share-wrap h2{font-size:40px;margin-bottom:16px}
.share-url{height:52px;padding-left:16px}
#share-url{font-size:15px}
.share-social{width:52px;height:52px}
.share-social.threads .share-icon{width:26px;height:26px}
.share-social.whatsapp .share-icon{width:32px;height:32px}
.share-social.facebook .share-icon{width:40px;height:40px}
}


/* 開始 is invisible (data-waiting) until the game script can start the game, and again from the end of
   loading until the player is back on the intro screen; it fades in and out (setStart in app.js / safe.js). */
#start{transition:filter .2s,transform .2s,opacity .35s}
#start[data-waiting]{opacity:0;pointer-events:none}
/* Loading (準備緊...): label only, no arrow, also while it fades out after loading. */
#start[aria-busy=true] .arrow,#start[data-waiting] .arrow{display:none}


.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* End screen: thanks, the terms box, the agree tick and 下一步; then the success screen. */
#finish .finish-content,#success .finish-content{max-width:100%}
#finish h2,#success h2{font-size:clamp(40px,calc(5*var(--vw)),72px);margin:0 0 20px}
#finish .finish-prizes{margin:0}
.terms{width:min(100%,680px);height:clamp(160px,calc(100svh - 490px),380px);margin:18px auto 0;padding:14px 18px;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;text-align:left;border-radius:6px;background:rgba(200,175,245,.18);font-family:system-ui,-apple-system,'PingFang HK','Noto Sans TC','Microsoft JhengHei',sans-serif;font-weight:400;font-size:16px;line-height:1.5;color:rgba(255,255,255,.92);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent}
.terms:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.terms p{margin:0 0 1.1em}
.terms p:last-child{margin-bottom:0}
.terms ul,.terms ol{margin:-.6em 0 1.1em;padding-left:1.6em}
.terms li{margin:.2em 0}
.terms a{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.terms-agree{display:inline-flex;align-items:center;gap:10px;position:relative;margin:22px 0 0;font-size:18px;text-align:left;cursor:pointer}
.terms-agree input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.terms-box{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:2px solid var(--white);border-radius:5px;transition:background .15s,border-color .15s}
.terms-box::after{content:'';width:5px;height:10px;border:solid var(--purple);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg);opacity:0}
.terms-agree input:checked+.terms-box{background:var(--orange);border-color:var(--orange)}
.terms-agree input:checked+.terms-box::after{opacity:1}
.terms-agree input:focus-visible+.terms-box{outline:2px solid var(--orange);outline-offset:3px}
.terms-warning{min-height:1.4em;margin:6px 0 0;color:var(--orange);font-size:15px}
#finish .finish-actions{margin:6px 0 0}
#finish-next{justify-content:center;min-width:5.6em}
.success-screen{align-items:center;padding-bottom:72px}
.success-copy{margin:0;font-size:18px;line-height:1.45}
#success .finish-actions{align-items:center;gap:24px;margin:28px 0 0}
#success .finish-actions .primary{justify-content:center}
#success .finish-actions .secondary{display:inline-flex;align-items:center;justify-content:center;min-height:62px;padding:17px 26px;border-width:2px;font-size:22px;text-decoration:none}
@media(max-width:900px){
  #finish h2,#success h2{font-size:min(7.4vw,44px);margin-bottom:16px}
  .terms{height:clamp(180px,calc(100svh - 430px),420px);margin-top:14px;padding:12px 14px;font-size:14px}
  .terms-agree{margin-top:16px;font-size:15px}
  .terms-warning{font-size:13px}
  .success-copy{font-size:15px}
  #success .finish-actions{align-items:stretch;gap:12px}
  #success .finish-actions .secondary{min-height:54px;padding:13px 20px;font-size:18px}
}

/* The page is at most 1920px wide: wider screens centre it, and sizes given in viewport
   widths (written as calc(n*var(--vw))) stop growing there. models.js frames the 3D the same way. */
:root{--vw:min(1vw,19.2px)}
main{max-width:1920px;margin:0 auto}
.masthead{max-width:1920px;margin:0 auto}
/* Raise the copy beside the chain on desktop question and answer screens. */
@media(min-width:901px){.question-content,.result-content{position:relative;top:-3vh}}

/* Copyright, at the foot of every screen. */
.site-footer{position:absolute;left:0;right:0;bottom:18px;z-index:1;max-width:1920px;margin:0 auto;padding:0 var(--edge);text-align:center;font-size:13px;line-height:1.4;font-weight:700;color:rgba(255,255,255,.5);pointer-events:none}

/* Intro: the ad space at the top, then the logo, title, tagline and 開始 down the left, the
   prize line and 獎品包括 at the foot, the machine on the right (placed by .home-machine). The
   page is at least a screen taller than the ad, so the ad can always be scrolled away.
   Above 768px the copy and machine share a frame (--frame) as wide as the page (itself at
   most 1920px) less 32px each side; the copy sticks to the top and the prize line to the
   bottom as the page scrolls. */
.home-screen{display:flex;flex-direction:column;min-height:calc(100svh + var(--top-height));padding-bottom:calc(32px + var(--anchor-height));--frame:calc(100% - 64px);--inset:calc((100% - var(--frame))/2);--text-inset:var(--inset)}
/* From 1100px wide the text sits 4vw in (stopping at the 1920px page's 76.8px). */
@media(min-width:1100px){.home-screen{--text-inset:calc(4*var(--vw))}}
.top-space{display:flex;justify-content:center;padding:0 var(--edge)}
/* The banner slot: at least the ad's height (970 × 250, 728 × 90 or 320 × 100 by width), growing if an ad is taller. */
.top-space-box{flex:none;width:320px;min-height:var(--top-height);max-width:100%;}
:root{--top-height:100px}
@media(min-width:776px){:root{--top-height:90px}.top-space-box{width:728px}}
@media(min-width:1018px){:root{--top-height:250px}.top-space-box{width:970px}}
.home-copy{position:-webkit-sticky;position:sticky;top:0;z-index:1;padding:45px 0 0 var(--text-inset);width:calc(var(--inset) + .46*var(--frame))}
.home-logo{display:block;width:clamp(170px,min(calc(19.6*var(--vw)),25vh),376px);height:auto}
.home-copy h1{font-size:clamp(48px,min(calc(6*var(--vw)),7.6vh),134px);line-height:1.13;margin:24px 0 0}
.home-tagline{color:var(--orange);font-size:clamp(17px,min(calc(1.9*var(--vw)),2.45vh),36px);font-weight:700;margin:14px 0 0}
#start{margin-top:20px}
#start.primary.huge{font-size:clamp(25px,min(calc(3.5*var(--vw)),4.5vh),51px);min-height:clamp(62px,min(calc(6.9*var(--vw)),8.8vh),100px);padding:0 .62em 0 .8em;gap:.3em}
/* Desktop: the machine's cap runs from just under the ad, right of the frame's centre. It is
   sized by the page's width: the cap's front is .38 of the frame, so the machine (front and
   side) fills about the right half of the page. */
.home-machine{position:absolute;left:calc(var(--inset) + .464*var(--frame));top:calc(var(--top-height) + 60px);width:calc(.38*var(--frame));height:0;pointer-events:none}
/* The prize line: in the side-by-side layout it sticks 32px above the anchor space at the
   bottom of the screen, both when the screen is tall and as the page scrolls; the box it
   sticks in (.home-rest) starts 48px under 開始, so on a short screen it sits there instead
   of riding up over the button. */
.home-rest{flex:1 0 auto;display:flex;flex-direction:column}
.home-bottom{position:-webkit-sticky;position:sticky;bottom:calc(32px + var(--anchor-height));z-index:1;margin-top:auto;padding:48px 0 0 var(--text-inset)}
.home-prizes{cursor:pointer;margin:0 0 12px;color:#fbb161;font-size:clamp(16px,min(calc(1.6*var(--vw)),2.05vh),28px);line-height:1.45}
.outline-button{display:inline-flex;align-items:center;gap:.45em;padding:.4em .7em;border:2px solid #fbb161;border-radius:10px;background:transparent;color:#fbb161;font-size:clamp(16px,min(calc(1.6*var(--vw)),2.05vh),28px);font-weight:900;line-height:1.3;transition:filter .2s,transform .2s}
.outline-button .arrow{width:1.1em;height:1.1em}
@media(max-width:768px),(max-aspect-ratio:10/11){
  /* Phones, and any screen at least 1.1 times as tall as it is wide: the machine stands larger, a little left, its cap tucked under 開始, fading into
     the purple behind the prize line; room for the copyright at the foot. Nothing sticks. */
  .home-screen{padding-bottom:60px}
  .site-footer{font-size:11px}
  .home-copy{position:relative;padding:22px var(--edge) 0;width:auto}
  .home-logo{width:min(calc(46.4*var(--vw)),220px)}
  .home-copy h1{font-size:min(calc(11.7*var(--vw)),58px);line-height:1.12;margin-top:20px}
  .home-tagline{font-size:16px;margin-top:12px}
  #start{margin-top:14px}
  #start.primary.huge{font-size:26px;padding:0 18px 0 22px;min-height:57px;gap:.35em}
  .home-machine{position:relative;left:auto;top:auto;flex:none;margin:-52px 0 0 calc(5.5*var(--vw));width:calc(80*var(--vw));height:calc(72*var(--vw))}
  .home-bottom{position:relative;bottom:auto;padding:24px var(--edge) 0}
  .home-bottom::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:-120px;bottom:calc(-60px - var(--footer-scroll-space,0px));background:linear-gradient(to bottom,rgba(61,4,126,0),rgba(61,4,126,.88) 130px);pointer-events:none}
  .home-prizes{font-size:16px;margin-bottom:12px}
  .outline-button{font-size:16px;border-radius:9px}
}
/* Wider screens in the phone layout: the whole machine (front and side) about 70% of the
   screen, against its right edge (the side runs about 9% past the box). */
@media(min-width:601px) and (max-width:768px),(min-width:601px) and (max-aspect-ratio:10/11){
  .home-machine{width:calc(61*var(--vw));height:calc(55*var(--vw));margin-left:auto;margin-right:calc(9*var(--vw))}
}
/* Short screens (under 960px): the copy does not stick, so the page scrolls it away. */
@media(max-height:959px){.home-copy{position:relative;top:auto}}

/* Anchor ad space on every screen: a dark panel wrapped round the ad space, fixed to the
   bottom centre (728 × 90 where there is room, else 320 × 100), a tab on its top edge
   collapsing it to just the tab. The real anchor will be a third party's, with no callback
   when it collapses, so nothing follows it: the copyright lies under it (seen once it is
   collapsed); the intro's sticky prize line and its foot keep --anchor-height clear. */
:root{--anchor-height:100px}
.anchor-space{position:fixed;left:50%;bottom:0;z-index:14;display:flex;padding:0;background:rgba(24,5,56,.92);border-radius:10px 10px 0 0;box-shadow:0 -4px 18px rgba(10,0,30,.35);transform:translateX(-50%);transition:transform .35s cubic-bezier(.3,.6,.3,1)}
.anchor-box{width:320px;height:100px;background:#fff}
@media(min-width:760px){.anchor-space{padding:5px 5px 5px}.anchor-box{width:728px;height:90px}}
.anchor-toggle{position:absolute;left:50%;bottom:100%;width:48px;height:18px;margin-left:-24px;padding:0;border-radius:10px 10px 0 0;background:rgba(24,5,56,.92);color:var(--white);display:grid;place-items:center}
.anchor-toggle:active{transform:none}
.anchor-toggle svg{width:20px;height:20px;transition:transform .35s}
.anchor-space.collapsed{transform:translate(-50%,100%)}
.anchor-space.collapsed .anchor-toggle svg{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.anchor-space,.anchor-toggle svg{transition:none}}
.site-footer{bottom:18px}
@media(max-width:900px){
  /* Phones: the question and answer screens leave two lines above the copyright, the others
     room for it. */
  .question-screen,.result-screen{padding-bottom:calc(18px + 4.2em)}
  .finish-screen,.success-screen{padding-bottom:calc(18px + 2.8em)}
  /* Type on phones: 退出遊戲 flush with the edge, answers 20px, the question 26px with a
     little more room above; on the answer screen the credits and 更多歌曲資訊 16px at 1.4
     (models.js raises its copy so 答啱喇！ ends level with the holder's bottom). */
  .exit-button{padding-left:0}
  .answer-choice{font-size:20px}
  .question-content h2{font-size:26px;margin:28px 0 17px}
  #result .credits,#result .info-link{font-size:16px;line-height:1.4}
  /* A little room under 繼續 to scroll it clear. */
  #result .result-actions{margin-bottom:1.5em}
  /* 退出遊戲 16px, its arrow to match. */
  .exit-button{font-size:16px}
  .exit-button .arrow{width:1.1em;height:1.1em}
}

/* End and success screens: the same top ad space as the intro, then the copy under it
   (the success copy centred in the room left). */
.finish-screen{flex-direction:column;align-items:center;justify-content:flex-start;padding-top:0}
.finish-screen>.top-space{align-self:stretch;margin-bottom:48px}
.success-screen .finish-content{margin:auto 0}
@media(max-width:900px){.finish-screen{padding-top:0}.finish-screen>.top-space{margin-bottom:28px}}

/* T&C: room under 下一步. */
#finish .finish-actions{margin-bottom:120px}

/* Only iOS Chrome: keep native viewport scrolling disabled before the first share.
   No transforms/containment here: the 3D stage and anchor remain fixed to the viewport. */
html.game-contained{height:100%;overflow:hidden;overscroll-behavior:none}
html.game-contained body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
/* Allow elastic bounce inside the game without passing overscroll to the locked page. */
#game-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}

/* Extra mobile scrolling room before the copyright clears controls above the anchor. */
@media(max-width:900px){body:not([data-share-page]) #game-surface{--footer-scroll-space:100px;padding-bottom:var(--footer-scroll-space)}}

#submitForm { display: none; }
/* Intro terms: the end screen's terms copy, read without registration controls. */
.home-prizes{max-width:26em}
.home-terms{display:block;width:max-content;max-width:100%;margin-top:16px;padding:0;background:transparent;color:#fbb161;font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.intro-terms-dialog,.safe-dialog.intro-terms-dialog{width:760px;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);padding:32px;overflow:hidden;text-align:center}
.intro-terms-dialog .terms{width:100%;height:440px;max-height:calc(100vh - 180px);margin:0}
.intro-terms-dialog .terms p{font-size:inherit;line-height:inherit}
.intro-terms-dialog .primary{margin-top:20px;min-height:54px;justify-content:center}
@media(max-width:900px){.intro-terms-dialog,.safe-dialog.intro-terms-dialog{padding:20px}.intro-terms-dialog .primary{font-size:18px}}

@media(min-width:769px) and (min-aspect-ratio:10/11){.home-prizes{width:26em;max-width:calc(.42*var(--frame))}}

.prize-notice{margin:18px 0 0}

#prize-heading{padding-right:24px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.35)}

.terms li>ul{margin:.35em 0 .6em}

.advert-slot.lazy {
   display: flex;
   justify-content: center;
   align-items: center;
}