:root { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; color: #5a281c; background: #e9f4f5; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #0f73b7; outline-offset: 2px; }
.site-shell { min-height: 100svh; display: flex; justify-content: center; align-items: flex-start; }
.phone { position: relative; width: min(100vw, 460px); min-height: min(216.67vw, 996px); aspect-ratio: 1080 / 2340; overflow: hidden; background: #83d4ed; box-shadow: 0 12px 44px #24546635; container-type: inline-size; }
#app, .page { position: absolute; inset: 0; }
.page { background: url('/assets/scene.png') center / 100% 100% no-repeat; }
.page.home { background-image: url('/assets/home-scene.png'); }
.brand { position: absolute; top: 2.9%; left: 6.8%; width: 27%; height: auto; z-index: 3; }
.top-timer { position: absolute; right: 6%; top: 4.5%; color: white; font-size: 3.3cqw; font-weight: 700; text-shadow: 0 1px 4px #176b8f88; z-index: 3; }
.home-title { position: absolute; top: 11.4%; left: 5%; width: 90%; text-align: center; color: #071b35; font-family: "Songti SC", "STSong", serif; font-weight: 800; line-height: 1.1; text-shadow: 1px 2px 0 #ffffffaa; }
.home-title .eyebrow { display: block; font-size: 9.6cqw; letter-spacing: .12em; }
.home-title .title-main { display: block; font-size: 11.5cqw; margin-top: 1cqw; letter-spacing: .12em; }
.home-ribbon { position: absolute; top: 26.5%; left: 14%; width: 72%; border-radius: 12cqw; background: #2ca65f; color: white; text-align: center; padding: 1.1cqw 2cqw; font-size: 3.2cqw; font-weight: 700; box-shadow: 0 2px 0 #117638; }
.start-hit { position: absolute; top: 36%; left: 25%; width: 50%; height: 6%; background: transparent; color: #071b35; font-size: 7cqw; font-weight: 700; }
.home-bottom { position: absolute; bottom: 3.8%; left: 8%; width: 84%; text-align: center; }
.home-intro { min-height: 3.3em; font-size: 3.4cqw; line-height: 1.5; color: #654625; }
.rule-line { margin: 1.2cqw 0 0; color: #433514; font-size: 3.35cqw; font-weight: 700; }
.quiet-note { color: #8f714b; font-size: 2.7cqw; line-height: 1.4; }
.paper { position: absolute; top: 10.9%; left: 4.3%; width: 91.4%; height: 75.8%; border: 1px solid #709e73; border-top: 2.1cqw solid #f8db30; border-radius: 0 0 2cqw 2cqw; background: linear-gradient(180deg,#fffef7 0%,#fff8d2 60%,#f8eb9e 100%); box-shadow: 0 3px 8px #3654601e; }
.paper.quiz-feedback { height: 69%; }
.paper::before { content: ""; position: absolute; width: 28%; height: 4%; left: 36%; top: -2.5%; border-radius: 2px; background: linear-gradient(#70767a 0 15%,#d5d8d7 17% 38%,#8c9294 45% 58%,#f4f5f3 72%,#5c6569 88%); border: 1px solid #555e62; box-shadow: 0 1px 4px #4e5256a8; z-index: 2; }
.paper-inner { position: absolute; inset: 5% 7% 5%; display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.quiz-inner { overflow-y: auto; scrollbar-width: none; }
.quiz-inner::-webkit-scrollbar { display: none; }
.quiz-progress { align-self: center; width: 75%; padding: 1.2cqw 1cqw; border-radius: 30px; color: #fff; background: linear-gradient(90deg,#a7d4ed00,#86bce1,#a7d4ed00); font-size: 4.2cqw; font-weight: 700; }
.score-small { font-size: 3.2cqw; color: #876331; margin-top: 1.2cqw; }
.question-box { margin-top: 5%; width: 100%; min-height: 23%; border: 1px solid #93be8e; border-radius: 6cqw; background: #fff8d7; display: flex; align-items: center; justify-content: center; padding: 4cqw; color: #572517; font-size: 5.1cqw; line-height: 1.5; font-weight: 800; }
.options { display: flex; flex-direction: column; gap: 2.4cqw; margin-top: 6%; }
.option { position: relative; width: 100%; min-height: 10.5cqw; padding: 1.5cqw 4cqw; border: 1px solid #91ba8e; border-radius: 99px; background: #fff8d9; color: #572517; text-align: left; font-size: 4.2cqw; font-weight: 700; line-height: 1.4; transition: transform .12s, background .12s; }
.option:not(:disabled):active, .orange-btn:active { transform: scale(.98); }
.option.correct { background: #26ad43; color: #fff; border-color: #179137; }
.option.wrong { background: #ef1715; color: #fff; border-color: #c30d0c; }
.option:disabled { cursor: default; opacity: 1; }
.letter { display: inline-block; width: 7cqw; color: inherit; }
.feedback { display: grid; justify-items: center; gap: .5cqw; margin-top: 3%; color: #6a3e28; font-size: 3.55cqw; line-height: 1.4; }
.feedback strong { color: #dc6400; }
.feedback p { margin: .5cqw 0 0; }
.quiz-next { margin-top: auto; padding-top: 2%; }
.orange-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 57%; min-height: 11cqw; padding: 1.5cqw 5cqw 2.7cqw; border-radius: 4.2cqw; background: #ef6900; color: white; box-shadow: inset 0 -1.2cqw 0 #a84909; font-size: 5.5cqw; font-weight: 800; line-height: 1.2; }
.orange-btn:disabled { opacity: .55; cursor: wait; }
.plain-btn { color: #98511b; font-weight: 700; background: transparent; font-size: 3.4cqw; padding: 2cqw; }
.result-inner { justify-content: center; gap: 2%; }
.result-heading { font-size: 5.6cqw; font-weight: 800; }
.result-score { font-size: 25cqw; line-height: 1; font-weight: 900; color: #ed6900; }
.result-score span { font-size: 8cqw; }
.result-caption { align-self: center; padding: 1cqw 3cqw; border: 1px solid #9cbd8c; border-radius: 99px; background: #fff7d6; font-size: 3.7cqw; font-weight: 700; }
.result-emoji { font-size: 19cqw; line-height: 1.1; margin: 1.5cqw; }
.result-action { margin-top: 5%; }
.result-subtitle { color: #83653c; font-size: 3.3cqw; line-height: 1.5; margin: 3cqw auto 0; }
.review { max-height: 21%; overflow: auto; margin-top: 3%; text-align: left; font-size: 3cqw; line-height: 1.4; }
.review summary { color: #8d4c1c; font-weight: 700; text-align: center; cursor: pointer; }
.review-item { border-top: 1px solid #d8cfa4; padding: 1.4cqw 0; }
.draw-inner { justify-content: center; }
.draw-inner .orange-btn { align-self: center; }
.draw-title { font-size: 9cqw; font-weight: 900; color: #ea6300; line-height: 1.35; }
.draw-prize { font-size: 7cqw; font-weight: 800; color: #5b5b55; margin: 10% 0 13%; }
.sad-title { font-size: 8cqw; font-weight: 800; color: #686464; line-height: 1.4; }
.claim-inner { justify-content: flex-start; padding-top: 5%; }
.claim-title { color: #ed6800; font-size: 6cqw; font-weight: 800; margin-bottom: 5%; line-height: 1.35; }
.claim-form { display: flex; flex-direction: column; gap: 3cqw; }
.claim-form input, .claim-form textarea { width: 100%; border: 1px solid #9ac18f; border-radius: 99px; background: #fff8d7; color: #573318; padding: 2.5cqw 3cqw; font-size: 4cqw; }
.claim-form textarea { border-radius: 3cqw; min-height: 25cqw; resize: vertical; }
.claim-form .orange-btn { align-self: center; margin-top: 2%; }
.claim-success { font-size: 5cqw; font-weight: 800; color: #2f8b49; line-height: 1.6; }
.toast { position: absolute; z-index: 10; bottom: 12%; left: 10%; right: 10%; display: none; padding: 2.5cqw; border-radius: 2cqw; background: #4e281ee8; color: #fff; text-align: center; font-size: 3.7cqw; }
.toast.visible { display: block; }
@media (min-width: 461px) { .site-shell { padding: 22px 0; } .phone { min-height: 996px; } }
@media (max-height: 680px) and (max-width: 460px) { .site-shell { overflow-y: auto; } }