@font-face{font-family:BpmfHuninn;src:url(/assets/huninn-DSA5sG_D.woff2) format("woff2");font-display:swap}:root{--cream: #FFFAF2;--beige: #F3E8D8;--tan: #E4D3BA;--brown: #A8774E;--yellow: #F6C945;--yellow-dark: #C99B1E;--ink: #3A2E25;--red: #E8655A;--green: #6FB257;--blue: #5B8FCB;--off: #D9CBB8;--tap: 56px;--plain-font: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;--zh-font: "BpmfHuninn", var(--plain-font);--font: var(--plain-font)}html:lang(zh-Hant-TW){--font: var(--zh-font)}[lang=zh-Hant-TW]{font-family:var(--zh-font)}[lang=en]{font-family:var(--plain-font)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;color:var(--ink);font-family:var(--font);background:var(--beige);touch-action:manipulation;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#bg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}#ui{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column}button,a.btn{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation;text-decoration:none;background:var(--cream);border-radius:18px;box-shadow:0 4px #78553240,0 6px 14px #7855321a;transition:transform .08s}button:active,a.btn:active{transform:translateY(3px);box-shadow:0 1px #78553240}button.yellow,.chip.yellow{background:var(--yellow)}button:focus-visible,a.btn:focus-visible{outline:4px solid var(--ink);outline-offset:3px}svg{width:1em;height:1em;display:block;flex:none}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.topbar{display:flex;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left));min-height:76px;flex:none}.topbar .grow{flex:1;min-width:0;text-align:center;font-weight:900;font-size:clamp(17px,3.2vmin,28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar .title{display:flex;align-items:center;justify-content:center;gap:8px}.topbar .logo{color:var(--yellow-dark);font-size:1.2em}.chip{min-width:var(--tap);height:var(--tap);padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:22px;font-weight:800}.chip .label{font-size:16px}@media(max-width:560px){.chip .label.opt{display:none}}.map{flex:1;min-height:0;display:flex;gap:12px;padding:4px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}.hero{flex:0 0 min(30%,340px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.hero canvas{width:100%;max-width:340px;height:auto}.hero p{font-weight:800;font-size:18px;background:#fffaf2e6;border-radius:16px;padding:8px 14px;margin:8px 0 0}.hero p .tl{display:inline-block;max-width:100%}.hero p .tl:lang(zh){white-space:nowrap}.units{flex:1;min-width:0;overflow:auto;display:grid;gap:12px;align-content:start;padding:2px 2px 8px;touch-action:pan-y}.unit{background:#fffaf2f0;border-radius:22px;padding:10px 12px 12px;box-shadow:0 5px #78553229}.unit h2{margin:0 0 8px;font-size:20px;font-weight:900;display:flex;align-items:center;gap:8px}.unit h2 canvas,.unit h2 svg{width:36px;height:36px}.levels{display:flex;gap:8px;flex-wrap:wrap}.ticket{position:relative;width:64px;height:64px;border-radius:14px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--cream)}.ticket canvas{width:46px;height:46px}.ticket .num{position:absolute;left:4px;top:2px;font-size:13px;font-weight:900;color:var(--brown)}.ticket .stars{position:absolute;bottom:2px;left:0;right:0;display:flex;justify-content:center;gap:1px;font-size:10px;color:var(--off)}.ticket .stars .on{color:var(--yellow-dark)}.ticket.done{background:#fff1c9}.ticket.locked{background:var(--off);color:#3a2e2580;box-shadow:none}.ticket.locked .num{position:static;font-size:20px;color:inherit}.ticket.mw{width:auto;min-width:64px;flex-direction:column;gap:0;padding:4px 10px}.ticket.mw .mwch{font-size:28px;font-weight:900;line-height:1.1}.ticket.mw .mwcard{font-size:12px;font-weight:700;color:var(--brown);white-space:nowrap}.hall-intro{margin:0;font-weight:800;background:#fffaf2f0;border-radius:16px;padding:8px 12px}.map.hall .units{padding:0 max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.panel .hall-card{font-size:44px;font-weight:900;margin:4px 0}.panel .hall-card b{color:#b5401f}.film-still canvas.mw-still{background:var(--cream);border-radius:18%;box-shadow:0 6px #78553233;width:min(46cqh,46cqw)}.unit.review,.unit.hall-entry{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px}.unit.review h2,.unit.hall-entry h2{margin:0}.unit.review p,.unit.hall-entry p{margin:0;font-size:15px;color:var(--brown);font-weight:700;grid-row:2}.unit.review .play,.unit.hall-entry .play{grid-row:1 / 3;grid-column:2;min-width:110px;height:var(--tap);padding:0 16px;font-weight:900;font-size:18px}.unit.review .play:disabled{background:var(--off);box-shadow:none;color:#3a2e2599}.mapfoot{flex:none;display:flex;justify-content:flex-end;padding:0 max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom))}.hold{position:relative;overflow:hidden}.hold .fill{position:absolute;inset:0;background:#f6c945bf;transform-origin:left;transform:scaleX(0)}.hold>:not(.fill){position:relative}.hold .hint{font-size:12px;font-weight:700;color:var(--brown)}.dots{display:flex;gap:6px;justify-content:center}.dots i{width:14px;height:14px;border-radius:50%;background:var(--off)}.dots i.done{background:var(--green)}.dots i.now{background:var(--yellow);box-shadow:0 0 0 3px #c99b1e59}.level{flex:1;min-height:0;display:flex;gap:12px;padding:0 max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.screen-wrap{position:relative;flex:1.35 1 0;min-width:0;min-height:0;display:flex}.screen{flex:1;min-height:0;border-radius:22px;overflow:hidden;background:#2b2420;box-shadow:0 0 0 8px #3a2e25,0 10px 0 6px #78553240;margin:8px}.replay-film{position:absolute;right:18px;top:18px;z-index:3}.qa{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:10px}.qa.waiting p{text-align:center;font-weight:900;font-size:20px;background:#fffaf2eb;border-radius:18px;padding:16px}.level.nofilm .qa{max-width:760px;margin:0 auto}.level.phase-film{container-type:size;justify-content:center;align-items:center}.level.phase-film .qa{display:none}.level.phase-film .screen-wrap{flex:none;width:min(100cqw,100cqh * 16 / 9);height:min(100cqh,100cqw * 9 / 16)}.ask{display:flex;align-items:center;gap:10px;justify-content:center;font-weight:900;font-size:clamp(19px,3.2vmin,28px);background:#fffaf2e6;border-radius:18px;padding:6px 12px}.picq,.mwq{display:flex;align-items:center;justify-content:center;gap:12px;min-height:0}.picq canvas{width:min(200px,26vh);height:auto;background:var(--cream);border-radius:22px;box-shadow:0 5px #7855322e}.mwq canvas{width:min(130px,18vh);height:auto;background:var(--cream);border-radius:18px}.mwq .blank{font-size:clamp(30px,6vmin,52px);font-weight:900;background:var(--cream);border-radius:18px;padding:6px 16px}.mwq .blank{white-space:nowrap}.mwq .blank .gap{display:inline-block;min-width:1.6em;margin:0 .12em;border-radius:.2em;background:#fff1c9;box-shadow:inset 0 -.12em 0 var(--yellow);color:var(--yellow-dark);text-align:center}.choices{display:grid;grid-template-columns:1fr;gap:10px}.choice{display:flex;gap:8px}.pick{flex:1;min-height:64px;min-width:0;font-size:clamp(24px,4.2vmin,36px);font-weight:900;letter-spacing:.06em;border-radius:20px}.choices.pics{grid-template-columns:repeat(3,minmax(0,1fr))}.pick.picture{padding:6px;display:flex;align-items:center;justify-content:center}.pick.picture canvas{width:100%;max-width:150px;height:auto}.listen{width:var(--tap);min-height:var(--tap);flex:none;font-size:24px;display:flex;align-items:center;justify-content:center;background:#fce7a0}.pick.wrong{background:var(--off);color:#3a2e2573;box-shadow:none;animation:shake .4s}.pick.wrong canvas{opacity:.4}.pick.right{background:var(--green);color:#fff}.pick.hint{box-shadow:0 0 0 5px var(--yellow),0 4px #78553240}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.feedback{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;font-size:clamp(16px,2.6vmin,21px);font-weight:800}.feedback span{background:#fffaf2f5;border-radius:14px;padding:6px 14px}.feedback.bad span{background:#fff1c9}.feedback.good span{background:#e3f2d9}.feedback .sentence{font-weight:700;font-size:.9em}.feedback:empty{visibility:hidden}@media(max-aspect-ratio:1/1){.map{flex-direction:column}.hero{flex:none;flex-direction:row;gap:8px}.hero canvas{width:min(120px,27vw)}.hero p{font-size:clamp(12px,3.85vw,15px);margin:0;flex:1;min-width:0;padding:8px 10px;line-height:1.35}.hero p:lang(en){font-size:clamp(12px,3.4vw,14px)}.level{flex-direction:column;gap:6px}.screen-wrap{flex:0 0 auto;height:min(46vh,72vw)}.screen{margin:6px}.level.phase-film .screen-wrap{width:min(100cqw,100cqh * 9 / 16);height:min(100cqh,100cqw * 16 / 9)}.qa{justify-content:flex-start;gap:8px}.picq canvas{width:min(150px,18vh)}.pick{min-height:58px}.replay-film{right:12px;top:12px}}.film-host{width:100%;height:100%}.film{position:relative;width:100%;height:100%;overflow:hidden;container-type:size;background:#2b2420}.film-media{position:absolute;inset:0}.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;background:#2b2420}.film-still{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#fff7e8,#f0dfc4 70%,#e2c9a4)}.film-still canvas{width:min(62cqh,62cqw);height:auto;animation:still-zoom 14s ease-in-out both}@keyframes still-zoom{0%{transform:scale(.92)}to{transform:scale(1.06)}}.still-tag{position:absolute;right:3%;top:4%;font-size:clamp(11px,3.4cqh,16px);font-weight:800;color:var(--brown);background:#fffaf2d9;border-radius:999px;padding:2px 10px}.film-layer{position:absolute;inset:0;pointer-events:none}.film-fx{position:absolute;inset:0}.film-sub{position:absolute;left:4%;right:4%;bottom:3%;text-align:center;font-size:clamp(15px,min(5.2cqh,5.4cqw),34px);line-height:1.5;font-weight:900;color:#3a2e2573;background:#fffaf2ed;border-radius:16px;padding:.25em .6em;opacity:0;transition:opacity .3s}.film-sub.show{opacity:1}.film-sub span{transition:color .12s}.film-sub span.on{color:var(--ink)}.film-sub span.now{color:#b5401f}.film-steps{position:absolute;left:3%;top:4%;display:flex;gap:8px}.film-step{font-size:clamp(20px,min(9cqh,9cqw),48px);font-weight:900;width:1.7em;height:1.7em;display:flex;align-items:center;justify-content:center;border-radius:.35em;background:var(--cream);box-shadow:0 4px #7855324d;opacity:0;transform:scale(.4);transition:transform .35s cubic-bezier(.3,1.6,.6,1),opacity .25s,background .2s}.film-step.show{opacity:.75;transform:scale(.85)}.film-step.show.now{opacity:1;transform:scale(1);background:var(--yellow)}.film-sound{position:absolute;transform:translate(-50%,-50%);font-size:clamp(26px,min(11cqh,12cqw),64px);font-weight:900;color:var(--yellow);-webkit-text-stroke:.08em var(--ink);paint-order:stroke fill;white-space:nowrap;display:none}.film-sound.show{display:block;animation:sound-in 2.2s ease-out both}@keyframes sound-in{0%{opacity:0;translate:0 .6em}10%{opacity:1}55%{translate:0 -.4em}80%{opacity:1}to{opacity:0;translate:0 -.5em}}.film-sound span{display:inline-block;animation:bounce .5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * .08s)}@keyframes bounce{0%{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-.18em) rotate(6deg)}}.film-card{position:absolute;left:0;right:0;bottom:var(--card-bottom, 7%);display:flex;justify-content:center;opacity:0;transition:opacity .35s}.film-card.show{opacity:1}.film-card .card-in{background:var(--cream);border-radius:.4em;padding:.25em .6em .2em;font-size:clamp(30px,min(16cqh,12cqw),110px);white-space:nowrap;font-weight:900;box-shadow:0 .08em 0 var(--yellow-dark),0 0 0 .06em var(--yellow);text-align:center;transform:scale(.6);transition:transform .45s cubic-bezier(.3,1.6,.6,1)}.film-card.show .card-in{transform:scale(1)}.film-card .mw{color:#b5401f}.film-card .card-en{font-size:.32em;color:var(--brown)}.film-title{position:absolute;inset:0;background:#5b2a2a linear-gradient(160deg,#7a2e2e,#3a1f24 70%) center / cover no-repeat;opacity:0;transition:opacity .4s;pointer-events:none}.film-title.show{opacity:1;transition:none}.film-title .title-in{position:absolute;left:50%;top:var(--title-y, 50%);transform:translate(-50%,-50%)}.film-title b{display:block;font-size:clamp(34px,min(16cqh,13cqw),120px);font-weight:900;color:#8c2f2b;-webkit-text-stroke:.08em #fff6dc;paint-order:stroke fill;letter-spacing:.06em;white-space:nowrap}.film-title.show b{animation:title-in .9s cubic-bezier(.3,1.4,.6,1) both}@keyframes title-in{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.film-wait{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none}.film.waiting .film-wait{display:flex}.film-wait i{width:48px;height:48px;border-radius:50%;border:6px solid rgba(255,250,242,.35);border-top-color:var(--cream);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.film-error{position:absolute;inset:0;display:none;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;padding:16px;background:#2b2420d1;color:var(--cream);font-weight:900;font-size:clamp(16px,5cqh,24px)}.film.failed .film-error{display:flex}.film-error p{margin:0}.film-error button{min-height:var(--tap);min-width:var(--tap);padding:0 20px;font-size:20px;font-weight:900}@media(prefers-reduced-motion:reduce){.film-sound.show{animation:fade-in .3s both}.film-sound span,.film-still canvas,.film-title.show b{animation:none}.film-sub span{transition:none}.film-step,.film-card .card-in{transition:opacity .3s;transform:none!important}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}body.record #bg{display:none}.record-host{position:fixed;inset:0}.overlay{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#3a2e2559;padding:16px}.panel{background:var(--cream);border-radius:28px;padding:24px;width:min(520px,100%);max-height:100%;overflow:auto;text-align:center;box-shadow:0 10px #78553240}.panel h2{margin:0 0 8px;font-size:32px;font-weight:900}.bigstars{display:flex;justify-content:center;gap:8px;font-size:56px;color:var(--off);margin:8px 0}.bigstars .on{color:var(--yellow)}.panel .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}.panel .row button{min-height:var(--tap);padding:0 18px;font-weight:900;font-size:18px;display:inline-flex;gap:6px;align-items:center}.parent{flex:1;min-height:0;overflow:auto;background:#fffaf2f5;margin:0 max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-radius:24px;padding:16px 18px 24px;-webkit-user-select:text;user-select:text;touch-action:pan-y}.parent h2{font-size:20px;margin:12px 0 10px}.progress-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.progress-list>div{background:var(--beige);border-radius:14px;padding:10px 12px;font-weight:700}.progress-list b{display:block;font-size:18px}.bar{height:10px;border-radius:5px;background:var(--off);margin-top:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--green)}.words{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.words li{display:flex;align-items:center;gap:6px;background:#e3f2d9;border-radius:14px;padding:4px 12px 4px 4px;font-size:20px;font-weight:900}.words.unsure li{background:#fff1c9}.words canvas{width:40px;height:40px}.words small{font-size:13px;color:var(--brown);font-weight:700}.parent .clear{min-height:var(--tap);padding:0 18px;font-weight:900;margin-top:18px;background:#f7d6d2}.parent .clear.confirm{background:var(--red);color:#fff}.parent .about{font-weight:800;margin:4px 0 0}.parent .note{color:var(--brown);font-size:14px}