@import url('./modal-buttons.css?v=2bd7fc7fdcf6'); @font-face{font-family:Rounded;src:url('../../../assets/fonts/rounded-smile/HakgyoansimDunggeunmisoTTF-R.woff2?v=2bd7fc7fdcf6') format('woff2');font-display:swap;font-weight:400} @font-face{font-family:Rounded;src:url('../../../assets/fonts/rounded-smile/HakgyoansimDunggeunmisoTTF-B.woff2?v=2bd7fc7fdcf6') format('woff2');font-display:swap;font-weight:700} :root{font-family:Rounded,system-ui,sans-serif;color:#354438;--plaza-accent:#635de8;--plaza-accent-dark:#5148cf;--gold:#e4bc69;--paper:#fff9eaf2;--ink:#354438}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#344e3c}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit;border:1px solid #897c5744;border-radius:10px;padding:11px 16px;background:#fff9ea}button:hover{background:#ffefc9}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #e7b853;outline-offset:3px}[hidden]{display:none!important}#game{position:relative;width:100%;height:100dvh;min-height:400px;isolation:isolate}#world{width:100%;height:100%;display:block;outline:none;touch-action:none}.game-header{font-family:var(--ml-font-heading);position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:10px;height:56px;padding:8px 20px;pointer-events:none;background:#fff;z-index:3;color:var(--ml-ink);border-bottom:1px solid #e6e7eb}.game-header>*{pointer-events:auto}.back{display:grid;place-items:center;flex:none;width:36px;height:40px;text-decoration:none;border-radius:10px}.back img{display:block;width:28px;height:24px}.back:hover{background:var(--ml-tint)}.game-title{min-width:0;display:flex;align-items:center}.game-title strong{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-title span{display:none}.header-actions{display:flex;gap:8px;margin-left:auto}.header-actions button{background:#fffaeae8;font-size:12px;box-shadow:0 3px 10px #15332422}.primary{border:1px solid var(--plaza-accent);background:var(--plaza-accent);color:#fff;box-shadow:0 2px 5px #635de824;font-weight:700;min-height:48px;transition:background var(--ml-duration),transform var(--ml-duration)}.primary:hover{background:var(--plaza-accent-dark)}.entry{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:1fr 1fr;gap:38px;width:min(740px,calc(100% - 48px));padding:34px 38px;background:var(--paper);border:1px solid #f9e1a6;border-radius:22px;box-shadow:0 24px 90px #172d3266;z-index:6;backdrop-filter:blur(12px)}.entry-copy{align-self:center}.ticket-mark{display:inline-block;color:#b58d44;font-size:32px;margin-bottom:12px}.entry h1{font-size:34px;line-height:1.4;letter-spacing:-1.2px;margin:0 0 18px;color:#34513e}.entry p{font-size:14px;color:#69735d;line-height:1.9}.entry label{display:block;font-size:12px;color:#64705b;margin:15px 0 7px}.entry label span{font-size:10px;margin-left:5px;color:#8c947e}.entry input{width:100%;background:#fffdf6;border:1px solid #c9ccb8;border-radius:9px;padding:11px;font-size:14px;color:#354438}.entry input::placeholder{color:#949988}.entry .primary{width:100%;display:flex;justify-content:space-between;margin-top:20px}.error{color:#b85844!important;min-height:1em;font-size:12px!important;margin:10px 0 0}.character-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.character-choice{height:86px;border:1px solid #d5d7c5;border-radius:12px;background:#eceedd;padding:5px;position:relative;display:block!important;margin:0!important;cursor:pointer}.character-choice:has(input:checked){border-color:#ad873a;background:#ffe8ac;box-shadow:0 0 0 1px #ad873a}.character-choice input{position:absolute;opacity:0;width:1px;height:1px;padding:0}.character-choice:has(input:focus-visible){outline:3px solid #b99845;outline-offset:3px}.character-choice canvas{width:100%;height:100%;display:block}.mission{position:absolute;top:95px;right:26px;width:255px;background:var(--paper);border:1px solid #fff2c3;border-radius:14px;padding:17px 19px;box-shadow:0 7px 30px #18332325;z-index:2;backdrop-filter:blur(12px)}.mission-meta{color:#978254;font-size:11px;margin-bottom:8px;display:flex;justify-content:space-between}.mission h1{font-size:20px;line-height:1.4;margin:0 0 8px}.mission>p{font-size:12px;line-height:1.75;color:#6a715d;margin:0}.mission .primary{width:100%;margin-top:14px;font-size:13px;min-height:40px}#lesson:empty{display:none}#lesson{margin-top:12px;font-size:12px;line-height:1.7}#lesson .hint{color:#818571;font-size:11px;margin:8px 0 0}.cargo-meter{display:flex;justify-content:space-between;align-items:center;font-size:11px}.cargo-meter strong{font-size:22px;color:#44614b}.cargo-meter small{font-size:12px;color:#949580}.cargo-track{display:flex;gap:5px;margin:8px 0 13px}.cargo-track i{height:8px;background:#dedfce;flex:1;border-radius:8px}.cargo-track i.loaded{background:var(--cargo);box-shadow:inset 0 0 0 1px #b19a7055}.guide summary{font-size:11px;color:#71785f;cursor:pointer}.guide-button{display:block;width:100%;border:0;border-bottom:1px solid #b5b29833;border-radius:0;text-align:left;padding:11px 0;background:transparent;font-size:12px}.guide-button:hover{background:#eadfc266}.guide-button small{font-size:10px;color:#8a8d79;display:block;padding-top:3px}.carrying{background:#ebefdf;padding:10px;border-radius:8px;font-size:12px}.carrying span{font-size:10px;color:#848a70;float:right}.ready-message{color:#71906e}.trip-line{display:flex;align-items:center;gap:8px;font-size:10px}.trip-line i{flex:1;height:1px;background:#b7b294;position:relative}.trip-line i:after{content:'✦';position:absolute;top:-9px;left:40%;color:#9d873f}.mission.travelling{top:auto;bottom:75px;right:50%;transform:translateX(50%);width:330px;text-align:center;background:#fff8e9e8}#game[data-phase=depart] .game-header{opacity:.65}#game[data-phase=depart] .touch-controls{display:none!important}.story-dialog{position:absolute;z-index:7;bottom:8%;left:50%;transform:translateX(-50%);width:min(565px,calc(100% - 36px));background:linear-gradient(120deg,#fffced,#fff7e4);border:1px solid #e8d7a8;border-radius:20px;padding:30px 35px;box-shadow:0 16px 80px #17362a77}.dialog-speaker{font-size:12px;color:#9e8652}.story-dialog h2{font-size:27px;line-height:1.4;margin:10px 0 14px;color:#385843;letter-spacing:-.5px}.story-dialog p{font-size:14px;line-height:1.9;color:#647059;margin:0 0 16px}.story-dialog p strong{color:#8e783e}.story-dialog .dialog-note{font-size:12px;color:#8a8b74;margin:17px 0}.dialog-close{position:absolute;top:15px;right:15px;background:transparent;border:0;padding:1px 8px;font-size:25px;color:#939781}.brief-steps{display:flex;justify-content:space-between;gap:8px;border-block:1px solid #dedbc1;padding:16px 0;font-size:12px}.brief-steps span{display:flex;align-items:center;gap:7px}.brief-steps b{border-radius:50%;background:#e7ebd8;color:#6c8061;width:24px;height:24px;display:grid;place-items:center}.story-dialog .primary{width:100%}.authored-note{display:block;text-align:center;color:#a5a38f;font-size:10px;margin-top:14px}#story-receipt{display:flex;gap:8px;flex-wrap:wrap}#story-receipt:not(.focused-replay):not(.team-focused) span{font-size:11px;padding:7px 11px;background:#efecd6;border-radius:8px}.interact{position:absolute;bottom:75px;left:50%;transform:translateX(-50%);z-index:5;border:1px solid #ffe8a8;background:#fffbeceF;box-shadow:0 5px 22px #33482f55;border-radius:30px;display:flex;gap:11px;align-items:center;font-weight:700;white-space:nowrap;padding:10px 21px 10px 10px}.interact kbd{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#365e4e;color:#fff7db;font-family:inherit}.participants{position:absolute;top:80px;right:24px;width:290px;max-height:calc(100% - 110px);overflow:auto;background:var(--paper);border:1px solid #f9e4b2;border-radius:16px;padding:18px;z-index:8;box-shadow:0 15px 50px #26452c55}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel-heading h2{font-size:17px;margin:0}.panel-heading button{padding:2px 9px;font-size:24px;background:transparent;border:0}.participants p,.check{font-size:12px;color:#7a836e}.check{display:flex;gap:8px;align-items:center;margin:12px 0}.player-row{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #80885c22;padding:9px 0;font-size:12px}.player-row span{color:#8d956f;font-size:10px}#host-controls{display:flex;gap:6px;margin:15px 0}#host-controls button,#leave{font-size:11px;padding:9px}#leave{width:100%}.reconnect{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);background:var(--paper);padding:30px;border:1px solid #d7b87f;border-radius:16px;width:min(380px,90vw);z-index:10}.reconnect strong{display:block;margin-bottom:18px;line-height:1.7}footer{position:absolute;inset:auto 24px 18px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;gap:16px;color:#f4efd8;font-size:11px;z-index:3}.move-help{padding:10px 15px;background:#294734bd;border:1px solid #fffbd633;border-radius:10px}kbd{font-family:inherit}footer button{pointer-events:auto}.zoom-controls{display:flex;background:#fff9e8e8;border:1px solid #f8e7b3;border-radius:12px;overflow:hidden}.zoom-controls button{border:0;border-radius:0;background:transparent;padding:9px 13px;font-size:12px}#toast{position:absolute;bottom:140px;left:50%;transform:translateX(-50%);padding:12px 22px;border:1px solid #f2d69c77;border-radius:13px;background:#294736ef;color:#fff6d9;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:10;text-align:center;max-width:85vw}#toast.visible{opacity:1}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px 28px;border-radius:12px;background:var(--paper)}#transition{position:absolute;inset:0;background:#fff8dc;opacity:0;pointer-events:none;z-index:4;transition:opacity .6s}#transition.flash{opacity:.18}.touch-controls{position:absolute;left:18px;bottom:65px;display:grid;grid-template-columns:repeat(3,40px);gap:4px;z-index:4}.touch-controls button{width:40px;height:38px;padding:0;background:#fff9e3d9}.touch-controls [data-direction=up]{grid-column:2}.touch-controls [data-direction=left]{grid-row:2;grid-column:1}.touch-controls [data-direction=down]{grid-row:2;grid-column:2}.touch-controls [data-direction=right]{grid-row:2;grid-column:3}@media(pointer:fine){.touch-controls{display:none!important}}@media(max-width:700px){.header-actions{gap:4px}.header-actions button{font-size:10px;padding:8px}.entry{grid-template-columns:1fr;gap:14px;width:min(410px,calc(100% - 30px));padding:24px;max-height:calc(100dvh - 90px);overflow:auto;top:53%}.entry-copy .ticket-mark{display:none}.entry h1{font-size:24px;margin:0 0 6px}.entry h1 br{display:none}.entry p{font-size:12px;margin:0}.entry-copy p br{display:none}.character-choice{height:65px}.entry label{margin:10px 0 6px}.entry .primary{margin-top:14px}.mission{top:72px;right:13px;width:210px;padding:12px 14px}.mission h1{font-size:16px}.mission>p{font-size:11px}.mission-meta{font-size:10px;margin-bottom:5px}#lesson{margin-top:8px}.mission .primary{font-size:11px;min-height:36px;margin-top:10px}.story-dialog{padding:23px;bottom:7%}.story-dialog h2{font-size:23px}.story-dialog p{font-size:12px}.brief-steps{font-size:10px;gap:5px}.brief-steps span{gap:4px}.brief-steps b{width:19px;height:19px}.story-dialog .dialog-note{font-size:11px}.participants{right:13px;top:70px}.move-help{display:none}footer{left:13px;right:13px;bottom:13px;justify-content:flex-end}.interact{bottom:155px;font-size:12px;padding-right:17px}.interact kbd{width:27px;height:27px}#toast{bottom:215px;font-size:12px;width:max-content;max-width:90vw}.mission.travelling{bottom:75px;width:285px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* Monster game: keep the map playable; story stays above the arena. */ .mission{top:100px;right:14px;width:215px;padding:13px;background:#fffaf0f5}.mission h1{font-size:17px}.pad-buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:8px 0}.pad-buttons button{padding:7px 5px;font-size:12px}.pad-buttons small{display:block;color:#79705d;font-size:10px}.picked{font-size:26px;font-weight:700;color:#7744a1;margin:15px 0}#speech{position:absolute;top:104px;left:50%;transform:translateX(-50%);width:min(570px,55vw);padding:16px 22px;border-radius:20px;background:#fff9eff5;border:3px solid #b898cc;box-shadow:0 5px 0 #5a386055;pointer-events:none;text-align:center;z-index:2}#speech span{display:block;font-size:13px;color:#7f5294;margin-bottom:6px}#speech strong{font-size:24px;line-height:1.5}#speech.countdown{border-color:#dc7947}#timer{font-size:23px;color:#ab522d}.story-dialog{max-height:82dvh;overflow:auto}.ending-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}.replay-step{text-align:left;border-bottom:1px solid #dfd3c4;padding:10px 0}.replay-step small{display:block;color:#796d5c}.replay-step span{display:inline-block;font-size:12px;padding:4px 7px;margin:3px;background:#ede7dc;border-radius:8px}.replay-step .chosen{background:#efd487;color:#432c0d}.replay-step b{font-size:19px}.replay-key{padding:15px;line-height:1.8}.reading-line{font-size:22px!important;background:#eee3f5;padding:10px;border-radius:12px}.team-row{display:flex;gap:14px;align-items:center;border-bottom:1px solid #ddd;padding:9px}.team-row b{flex:1}#round-seconds{font:inherit;padding:10px;border-radius:10px;margin:10px}.authored-note{line-height:1.65}#story-receipt{display:block}#game[data-phase=depart] #speech{display:none}.mission-meta{font-size:12px}.ending-card .primary{margin:0} @media(max-width:900px){.mission{top:auto;bottom:70px;right:10px;width:215px}#speech{top:88px;width:85vw;padding:10px 15px}#speech strong{font-size:19px}.pad-buttons{display:none}.mission>p,.mission .hint{font-size:11px}.mission h1{font-size:15px}.mission{padding:8px 12px}.story-dialog{width:calc(100% - 28px);padding:24px}.team-row{font-size:13px;gap:6px}} .header-actions button,.zoom-controls button{color:#354438} .ending-card{width:min(860px,calc(100vw - 32px))}.discovery-shelf{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:12px 0}.discovery-shelf button{font-size:12px;padding:9px 4px;background:#eee8f0}.discovery-shelf .active{background:#ead28c;border-color:#9b7538}.discovery-scene{min-height:230px;padding:12px 0}.discovery-scene h3{font-size:23px;margin:10px 0 20px}.discovery-scene p{font-size:18px;line-height:1.7}.discovery-scene small,#story-receipt>small{font-size:12px;color:#706777;line-height:1.6;display:block}.discovery-nav{display:flex;justify-content:space-between;gap:10px}.rewind-icon{font-size:52px}.token-trail{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:22px 0}.token-trail span{padding:12px;background:#e8d8f1;border:2px solid #ae88c3;border-radius:12px;animation:token-in .5s both;animation-delay:var(--delay)}.book-flow{display:flex;gap:15px;align-items:center;justify-content:center;padding:25px;background:#f3ebfa;border-radius:18px}.book-flow span{font-size:35px}.book-flow b{font-size:14px}.context-pair{display:flex;gap:10px;align-items:center}.context-pair section{background:#efe7f4;border-radius:15px;padding:10px;flex:1}.context-pair span,.draw-candidates span{display:inline-block;padding:5px 9px;margin:3px;background:white;border:1px solid #cdbbda;border-radius:9px;font-size:14px}.replay-bar{display:flex;gap:7px;align-items:center;margin:10px 0;font-size:13px;text-align:left}.replay-bar>span{width:125px;flex-shrink:0}.replay-bar>div{background:#ece6ef;border-radius:5px;flex:1;height:16px;overflow:hidden}.replay-bar i{display:block;height:100%;width:var(--bar);background:#a789bd;animation:bar-in .7s both}.replay-bar>b{width:86px;font-size:12px;text-align:right}#crowd-replay{max-width:100%;height:auto;border-radius:14px}.draw-winner{background:#f8dd93!important;outline:2px solid #b58b36;animation:token-in .6s both}.replay-sentence{padding:18px;background:#f2ead9;border-radius:14px;line-height:1.7}.ai-pipeline{padding:18px;background:#eee5f4;border-radius:15px;margin:14px 0}.team-book{padding:22px;border-radius:20px;box-shadow:inset 6px 0 #ffffff88}.team-book.fairy,.team-compare .fairy{background:#eee2f7}.team-book.sport,.team-compare .sport{background:#dfedf8}.team-book p{font-size:22px;line-height:1.7;animation:token-in .35s both}.team-book span{font-size:16px}.team-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}.team-compare section{padding:15px;border-radius:18px}.team-compare .replay-bar{flex-wrap:wrap}.team-compare .replay-bar>span{width:100%}.team-compare details{text-align:left;font-size:12px}.team-compare details p{font-size:13px}.team-compare h3{font-size:21px}@keyframes token-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes bar-in{from{width:0}to{width:var(--bar)}}@media(max-width:600px){.discovery-shelf{grid-template-columns:repeat(3,1fr)}.context-pair,.book-flow{flex-direction:column}.team-compare{grid-template-columns:1fr}.discovery-scene h3{font-size:20px}.discovery-scene p{font-size:16px}.replay-bar>span{width:100px}.team-book p{font-size:18px}}@media(prefers-reduced-motion:reduce){.token-trail span,.replay-bar i,.draw-winner,.team-book p{animation:none}} /* Monster toy arena: preserve an unobstructed center and a visible mascot. */ :root{--gold:#ffe086;--paper:#fcf7fff5;--ink:#45305d}body{background:#080f26;color:#45305d}.entry h1{color:#694091}.entry{border-color:#d6b8f4}.mission{background:#fcf7fff2;border-color:#c5a5e3}.pad-buttons button{background:#eee3fb}.pad-buttons button:hover{background:#ddcbf7}#speech{top:88px;bottom:auto;width:min(670px,calc(100vw - 500px));padding:10px 20px;border-color:#bd98e6;background:#fffafff7}#speech strong{font-size:21px}#speech span{font-size:11px;margin-bottom:2px}@media(max-width:900px){#speech{top:72px;bottom:auto;width:80vw;padding:7px 12px}#speech strong{font-size:17px}.mission{bottom:60px;width:190px}.mission .pad-buttons{display:none}} @media(min-width:901px) and (max-width:1100px){#speech{top:88px;width:80vw}.mission{top:auto;bottom:70px;width:190px}.mission .pad-buttons{display:none}} /* One sentence + one visual at a time in the replay. */ #ending-card[data-replay=true]>h2,#ending-card[data-replay=true]>#ending-story{display:none}#ending-card[data-replay=true]{width:min(760px,calc(100% - 32px));padding:28px 36px;background:#fffaf2}.focus-progress{color:#8f809a;font-size:13px;text-align:center}.focus-heading{text-align:center;margin:24px 0}.focus-heading p{font-size:clamp(26px,3.5vw,36px)!important;font-weight:700;line-height:1.4!important;margin:0 0 8px!important;color:#583571}.focus-heading h3{font-size:clamp(32px,5vw,52px);line-height:1.35;color:#7442ad;margin:0;min-height:2.7em;display:grid;place-content:center}.focus-visual{min-height:150px;display:grid;align-content:center;margin:16px 0 24px}.focus-learning{text-align:center;font-size:52px}.focus-learning span{color:#ac99bb}.focus-chunks{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.focus-chunks span,.focus-grow span{display:inline-block;padding:10px 14px;border-radius:14px;background:#eee3f7;color:#583571;font-size:22px;line-height:1.45}.focus-context{display:grid;gap:9px;text-align:center}.focus-context>div{padding:12px;background:#f0eaf4;border-radius:14px}.focus-context b{display:block;font-size:18px}.focus-context span{display:block;margin-top:8px;color:#8055a0;font-size:17px}.focus-context i{font-size:22px}.focus-winner{text-align:center;font-size:35px}.focus-winner strong{display:block;font-size:36px;color:#704397}.focus-grow{text-align:center;line-height:2.5;min-height:130px}.focus-grow span{font-size:19px;margin:4px}.new-chunk{background:#f8dfa4!important;animation:token-in .3s both}.focus-more{font-size:13px;color:#8c7995;margin:12px 0}.focus-more summary{cursor:pointer;text-align:center}.focus-more p{font-size:19px!important;line-height:1.8!important;padding:12px;background:#f2eaf7;border-radius:12px}.focus-nav{display:flex;gap:10px;justify-content:center;align-items:center}.focus-nav .primary{flex:1;max-width:350px}.focus-nav #type-finish{font-size:13px;padding:9px}.focus-bars .replay-bar>span{width:120px}.focus-bars .replay-bar{font-size:15px}#ending-card[data-replay=true] .ending-actions{margin-top:12px}@media(max-width:600px){#ending-card[data-replay=true]{padding:22px 18px}.focus-heading{margin:16px 0}.focus-heading p{font-size:26px!important}.focus-learning{font-size:38px}.focus-chunks span{font-size:18px}.focus-visual{min-height:120px}.focus-nav{gap:5px}.focus-nav button{padding:10px}} /* The main discovery is a headline, never a receipt chip. */ #story-receipt #typed-focus{font:inherit;line-height:inherit;color:inherit;background:none;padding:0;border-radius:0;word-break:keep-all;overflow-wrap:anywhere} /* Keep discovery headlines above legacy dialog and receipt typography. */ #story-receipt.focused-replay .focus-heading h3, #story-receipt.focused-replay #typed-focus{font-size:clamp(32px,5vw,52px);font-weight:700;line-height:1.35} .learning-demo{padding:20px;border-radius:22px;background:linear-gradient(135deg,#eee4fa,#e4f3f2);text-align:center;overflow:hidden} .learning-example{display:inline-block;padding:12px 22px;border-radius:12px;background:#fffdf8;box-shadow:0 4px 0 #d7c8e7;font-size:24px;color:#524265} .learning-example strong{color:#346d62} .learning-scenes{position:relative;min-height:152px;margin:20px 0 6px} .learning-scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:0} .learning-scene small{font-size:18px;color:#655775} .learning-scene b{font-size:clamp(22px,3.2vw,32px);color:#583279;word-break:keep-all} .learning-scene em{font-style:normal;color:#ab5963}.learning-scene del{color:#a88791}.learning-scene strong{color:#237967}.learning-scene span{margin:0 18px} .learning-dials{display:flex;gap:16px}.learning-dials i{width:68px;height:8px;border-radius:8px;background:#c5b3d8;position:relative}.learning-dials i:after{content:'';position:absolute;top:-5px;left:10%;width:18px;height:18px;border-radius:50%;background:#8152b5;box-shadow:0 2px 3px #65398644} .learning-run .learn-guess{animation:learn-step 3s both}.learning-run .learn-check{animation:learn-step 3s 3s both}.learning-run .learn-adjust{animation:learn-final .6s 6s both}.learning-run .learning-dials i:after{animation:learn-adjust 1.1s 6.3s both}.learning-run .learning-dials i:nth-child(2):after{animation-direction:reverse} .learning-restart{font-size:13px;background:#ffffff99;padding:7px 12px;border-color:#cfc1df} @keyframes learn-step{0%{opacity:0;transform:translateY(8px)}12%,88%{opacity:1;transform:translateY(0)}100%{opacity:0}} @keyframes learn-final{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes learn-adjust{from{left:10%}to{left:65%}} @media(prefers-reduced-motion:reduce){.learning-scenes{display:grid;gap:18px}.learning-scene{position:static;opacity:1;animation:none!important}.learning-dials i:after{animation:none!important}} @media(max-width:600px){.learning-demo{padding:14px}.learning-example{font-size:20px}.learning-scene small{font-size:16px}} #ending-card[data-team-focus=true]>h2,#ending-card[data-team-focus=true]>#ending-story{display:none} .team-focused{text-align:center}.team-focused .team-book{padding:26px 20px}.team-focused .team-book h3{font-size:24px;margin:24px 0} .team-focused .memory-line{font-size:clamp(26px,3.5vw,38px)!important;line-height:1.7;min-height:140px;display:block;align-content:center;word-break:keep-all} .memory-line strong{color:#7740b0;border-bottom:4px solid #bb94db}.memory-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}.memory-nav small{color:#877792} .team-focus-title{font-size:clamp(28px,4vw,42px);line-height:1.4;color:#7346a0;margin:26px 0;word-break:keep-all} .team-top-word{display:block;font-size:clamp(24px,3vw,32px);line-height:1.5;word-break:keep-all}.team-focused .team-compare section{padding:24px 16px}.team-focused .team-compare h3{font-size:19px;margin:0 0 18px}.team-focused .team-compare p{font-size:17px;margin-bottom:0} .team-detail{margin:22px 0;color:#75627f;font-size:14px}.team-detail p{font-size:17px;line-height:1.7}.team-short-note{font-size:18px!important;line-height:1.6!important;margin:22px 0!important}.team-focused .focus-nav{margin-top:24px} /* Give the completed story a full, centered finale. */ #game[data-phase=ending] #ending-card{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);width:min(1080px,calc(100vw - 40px));max-height:86dvh;padding:clamp(24px,4vw,56px);text-align:center;background:#fffaf2;box-shadow:0 20px 100px #080c2688} #game[data-phase=ending] #ending-title{font-size:clamp(28px,4vw,48px);line-height:1.3;margin:0 0 30px;color:#70449a} #game[data-phase=ending] #ending-story{font-size:clamp(27px,3.4vw,42px);line-height:1.65;font-weight:700;color:#3d3055;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;margin:0 0 30px} #game[data-phase=ending] .final-principle{font-size:clamp(22px,2.6vw,30px);line-height:1.65;font-weight:700;color:#7851a1;border-top:1px solid #d8cbe5;padding-top:24px;margin:0} #game[data-phase=ending] .final-note{font-size:13px;color:#897593;margin:18px 0}.final-note summary{cursor:pointer}.final-note p{font-size:15px;line-height:1.6} @media(max-width:600px){#game[data-phase=ending] #ending-card{width:calc(100vw - 24px);padding:26px 20px}#game[data-phase=ending] #ending-story{font-size:27px}} #brief[data-arrival]>:not(.alien-arrival):not(.brief-content):not(.dialog-close):not(.modal-audio){display:none!important} #brief[data-arrival]{top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(820px,calc(100vw - 32px));text-align:center;background:#fffaf2;padding:28px} .arrival-scene{height:260px;position:relative;overflow:hidden;border-radius:22px;background:radial-gradient(ellipse at 50% 100%,#446b85,#142744 55%,#0b1027)} .arrival-stars{position:absolute;inset:0;background-image:radial-gradient(circle,#e0faff 1px,transparent 2px);background-size:67px 53px;opacity:.5} .arrival-ufo{position:absolute;left:50%;top:60px;width:210px;height:74px;transform:translateX(-50%);animation:ufo-land 2.4s ease-out both} .arrival-ufo i{position:absolute;width:112px;height:72px;left:49px;top:-33px;border-radius:70px 70px 15px 15px;background:linear-gradient(120deg,#c2fffa,#5c94b2);border:5px solid #8398c5} .arrival-ufo b{position:absolute;inset:0;border-radius:50%;background:linear-gradient(#aba3e3,#526689 55%,#24364d);border-bottom:7px solid #76e5ed;box-shadow:0 6px 20px #73f5ff77} .arrival-ufo em{position:absolute;inset:15px 24px;border-radius:50%;border-bottom:6px dotted #ffe18e} .arrival-alien{position:absolute;bottom:5px;left:50%;width:160px;height:213.33px;transform:translateX(-50%);background:url('/assets/monster-plaza/neon/monster-8-frames.webp?v=2bd7fc7fdcf6') 0 -213.33px / 640px 426.67px;animation:alien-talk .55s steps(1) infinite} #brief[data-arrival="0"] .arrival-alien{opacity:0} #brief[data-arrival="1"] .arrival-alien{animation:alien-arrive .7s ease-out both,alien-talk .55s steps(1) infinite} #brief:not([data-arrival="0"]) .arrival-ufo{left:78%;top:44px;scale:.65;opacity:.65;animation:none} #brief .arrival-caption{font-size:clamp(26px,3.5vw,36px);line-height:1.5;color:#63418b;font-weight:700;min-height:3em;margin:24px 0;word-break:keep-all} .arrival-nav{display:flex;justify-content:center;gap:12px}.arrival-nav .primary{min-width:180px} @keyframes ufo-land{from{transform:translate(-50%,-170px) rotate(-12deg)}to{transform:translate(-50%,40px) rotate(0)}} @keyframes alien-arrive{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}} @keyframes alien-talk{0%,100%{background-position:0 -213.33px}50%{background-position:-160px -213.33px}} @media(prefers-reduced-motion:reduce){.arrival-ufo,.arrival-alien{animation:none!important}.arrival-alien{opacity:1}} @media(max-width:600px){.arrival-scene{height:220px}#brief[data-arrival]{padding:22px 18px}.arrival-nav{flex-wrap:wrap}} /* An uneven star field and a bashful, stammering visitor. */ .arrival-stars{background:none;opacity:1}.arrival-stars i{position:absolute;width:var(--size);height:var(--size);background:#d7f5ff;border-radius:50%;box-shadow:0 0 5px #bbdfff55} #brief .arrival-caption{white-space:pre-line} .arrival-actor{position:absolute;left:50%;bottom:5px;width:160px;height:213px;transform:translateX(-50%)} .arrival-actor .arrival-alien{bottom:0} .alien-sweat,.alien-stammer{display:none} #brief[data-arrival="2"] .arrival-actor{animation:alien-fidget 1.3s ease-in-out infinite} #brief[data-arrival="2"] .alien-sweat{display:block;position:absolute;top:82px;right:2px;width:12px;height:20px;border-radius:70% 30% 65% 65%;background:linear-gradient(130deg,#e4fbff,#6dd2fb);box-shadow:0 2px 4px #11395055;animation:alien-sweat 1.6s ease-in infinite} #brief[data-arrival="2"] .sweat-two{right:-9px;top:100px;width:8px;height:14px;animation-delay:.65s} #brief[data-arrival="2"] .alien-stammer{display:block;position:absolute;top:24px;left:-90px;background:#fff5e7;color:#795296;padding:10px 14px;border-radius:18px 18px 0 18px;font-size:20px;white-space:nowrap;animation:stammer-pop 1.8s ease-in-out infinite} #brief[data-arrival="4"] .arrival-alien{background-position:-320px -213.33px;animation:alien-relieved .7s steps(1) infinite} @keyframes alien-fidget{0%,100%{translate:-3px 0;rotate:-2deg}50%{translate:3px 2px;rotate:2deg}} @keyframes alien-sweat{0%{opacity:0;translate:0 -5px;scale:.7}25%{opacity:1;scale:1}85%{opacity:1}100%{opacity:0;translate:3px 25px}} @keyframes stammer-pop{0%,100%{transform:scale(.96)}50%{transform:scale(1.04)}} @keyframes alien-relieved{0%,100%{background-position:-320px -213.33px}50%{background-position:-480px -213.33px}} @media(prefers-reduced-motion:reduce){.arrival-actor,.alien-sweat,.alien-stammer{animation:none!important}.alien-sweat{opacity:1}} @media(max-width:600px){#brief[data-arrival="2"] .alien-stammer{left:-38px;top:8px;font-size:17px}} #brief[data-arrival="2"] .arrival-alien{background-position:0 -213.33px;animation:none} #brief[data-arrival="3"] .arrival-alien{background-position:-320px 0;animation:none} .arrival-nav .arrival-next{white-space:normal;word-break:keep-all} /* A readable mission briefing with a spacious native select hit area. */ #brief:not([data-arrival]){top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 32px));padding:38px;background:#fffaf2} #brief:not([data-arrival]) #brief-title{font-size:clamp(28px,3.5vw,38px);line-height:1.4;color:#63418b;margin:0 32px 24px 0;word-break:keep-all} #brief .brief-mission{font-size:clamp(22px,2.5vw,28px);line-height:1.6;color:#40344e;margin:0 0 8px;word-break:keep-all} #brief .brief-mission strong{color:#7545a5} #brief .brief-goal{font-size:20px;line-height:1.5;color:#766187;margin:0 0 26px} .brief-timing{display:grid;grid-template-columns:1fr minmax(200px,1fr);align-items:center;gap:18px;padding:18px 20px;background:#f0e9f6;border-radius:16px;margin-bottom:20px} .brief-timing label{font-size:19px;font-weight:700;color:#5b4370} .brief-select{position:relative}.brief-select:after{content:'';position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid #71538d;border-bottom:2px solid #71538d;transform:translateY(-70%) rotate(45deg);pointer-events:none} #brief #round-seconds{appearance:none;-webkit-appearance:none;display:block;width:100%;min-height:54px;margin:0;padding:12px 50px 12px 16px;background:#fff;border:1px solid #c6b4d8;border-radius:12px;font-size:19px;color:#463456} #brief .brief-help{padding:0 4px;margin:0 0 26px}#brief .brief-help p{font-size:18px;line-height:1.65;margin:8px 0;color:#655b70}#brief .brief-help b{display:inline-block;min-width:52px;color:#684592} #brief:not([data-arrival]) #accept-quest{font-size:23px;min-height:60px;margin:0;width:100%} @media(max-width:600px){#brief:not([data-arrival]){padding:28px 22px}.brief-timing{grid-template-columns:1fr;gap:10px;padding:16px}#brief .brief-help p{font-size:16px}#brief .brief-goal{font-size:18px}} body{background:#c5e7ec} .arrival-scene{background:linear-gradient(#bfe6ef 0 60%,#8caf80 60% 67%,#dfba8f 67%)} .arrival-stars{background:linear-gradient(90deg,transparent 0 12%,#edcc9f 12% 88%,transparent 88%);inset:auto 0 25%;height:70px;border-bottom:9px solid #b5755f} .arrival-stars i{background:#719ead;border-radius:2px;box-shadow:none;width:15px;height:20px;opacity:.7!important} .intro-lesson{background:#f1eaf8;position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#55366e} .intro-lesson small{font-size:17px;color:#856b9b}.intro-lesson strong{font-size:clamp(23px,3vw,31px);line-height:1.45}.intro-lesson mark{background:#f8da8f;color:#64447e;padding:0 7px;border-radius:7px}.intro-lesson em{font-style:normal;font-size:14px} .intro-odds{width:min(440px,100%);display:grid;gap:10px}.intro-odds b{display:flex;align-items:center;gap:10px;font-size:20px;white-space:nowrap}.intro-odds i{height:15px;background:#9d77c6;border-radius:8px;animation:bar-in .8s ease-out} body{background:#dac4a3} body{background:#82ad65} /* Approved painted school + matte alien, shared across map and introduction. */ :root{--paper:#fffaf0f5;--ink:#3c564e;--gold:#d2b47a} body{background:#879479;color:#3c564e} .entry,.mission{background:#fffaf0f5;border-color:#c8bda2}.entry h1,.mission h1{color:#3f6356} .pad-buttons button{background:#eeeedd}.pad-buttons button:hover{background:#dae4cd} #speech{background:#fffaf0f7;border-color:#b3bea0;box-shadow:0 5px 0 #526a4e33}#speech span,#speech strong{color:#425f55} #brief:not([data-arrival]) #brief-title,#brief .arrival-caption{color:#42695b} .brief-timing{background:#e9ecde}.brief-timing label,#brief .brief-help b,#brief .brief-mission strong{color:#4f7160} .arrival-scene{background:linear-gradient(#c4ceae 0 48%,#ded3ba 48% 65%,#e5cea8 65%)} .arrival-school{position:absolute;left:50%;top:0;transform:translateX(-50%);width:600px;height:195px;opacity:.8} .arrival-alien{background-size:640px 426.667px;background-position:0 0;animation:painted-breathe 2.4s ease-in-out infinite} #brief[data-arrival="1"] .arrival-alien{background-position:-320px 0;animation:alien-arrive .7s ease-out both,painted-speaking .7s ease-in-out infinite} #brief[data-arrival="2"] .arrival-alien,#brief[data-arrival="3"] .arrival-alien{background-position:-160px 0;animation:painted-breathe 2.4s ease-in-out infinite} #brief[data-arrival="4"] .arrival-alien{background-position:-480px 0;animation:painted-happy 1s ease-in-out infinite} .arrival-ufo b{background:linear-gradient(#c4d0bb,#718f88 60%,#506c66);border-bottom-color:#d7c895;box-shadow:0 8px 15px #45615335}.arrival-ufo i{background:linear-gradient(120deg,#e1ede2,#8faea6);border-color:#82998e} @keyframes painted-breathe{0%,100%{scale:1}50%{scale:1.015 1.025}} @keyframes painted-speaking{0%,100%{rotate:-1deg;translate:0 0}50%{rotate:1deg;translate:0 -2px}} @keyframes painted-happy{0%,100%{translate:0 0}50%{translate:0 -7px}} @media(prefers-reduced-motion:reduce){.arrival-alien{animation:none!important}} /* Purple remains the game's UI identity; school materials keep their natural colors. */ :root{--paper:#fff9fff5;--ink:#49345f;--gold:#e1bf7e} body{background:#393047;color:#49345f} .entry,.mission{background:#fff9fff5;border-color:#ceb9df}.entry h1,.mission h1{color:#513767} .pad-buttons button{background:#f0e8f7}.pad-buttons button:hover{background:#e1d1ed} #speech{background:#fffafff7;border-color:#ba9cd5;box-shadow:0 5px 0 #66478033}#speech span,#speech strong{color:#624581} #brief:not([data-arrival]) #brief-title,#brief .arrival-caption{color:#694791} .brief-timing{background:#eee6f5}.brief-timing label,#brief .brief-help b,#brief .brief-mission strong{color:#71518d} /* Hand-painted spaceship replaces the former CSS saucer parts. */ .arrival-ufo{width:250px;height:180px;top:36px;border:0;box-shadow:none} #brief:not([data-arrival="0"]) .arrival-ufo{left:82%;top:54px;scale:.6;opacity:1} .arrival-scene{} .arrival-ufo{height:145px} /* Keep the activity visible: the map already carries every selectable word. */ #mission .pad-buttons,#mission #lesson>.hint{display:none} #mission{width:210px;padding:14px 16px} #mission h1{font-size:18px} #speech{top:78px;padding:9px 20px;width:min(660px,calc(100% - 400px))} @media(max-width:1000px){#speech{width:calc(100% - 48px);top:82px}#mission{top:auto;bottom:62px;width:180px;padding:11px 13px}#mission h1{font-size:16px}#mission>p{display:none}} #speech{left:70%;top:88px;width:min(520px,43vw);padding:12px 20px} #mission{top:auto;bottom:60px;right:18px;width:185px;background:#fffaffed} #mission h1{font-size:16px}#mission>p{display:none} @media(max-width:1000px){#speech{left:66%;width:60%;top:90px;padding:9px 14px}#speech strong{font-size:20px}#mission{width:158px;padding:10px}} #speech{padding:10px 14px}#speech strong{font-size:clamp(18px,1.65vw,26px);line-height:1.35}#speech span{font-size:11px} /* Sunny outdoor courtyard: calm scenery, purple interaction accents. */ body{background:#fbedda}.header-actions button{background:#fffaf7;border-color:#e5d7e6;box-shadow:none} #speech{background:#fffdf5f5;border:2px solid #c7b2dc;border-radius:18px;box-shadow:0 5px 0 #bd9a7320}#speech::after{content:'';position:absolute;left:-13px;top:28px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:13px solid #c7b2dc} #mission{background:#fffdf7ef;border:1px solid #ddd0e8;box-shadow:0 5px 18px #8d77521a}.controls .move-hint{background:#fffaf0e8;color:#725b83} .arrival-scene{}.arrival-school{display:none} /* The intro uses the same independent school sprite, not a flattened scene. */ .arrival-scene{background:linear-gradient(#dce8c6 0 45%,#e9ddc8 45% 62%,#f7dfb8 62%)} .arrival-school{display:block;left:22%;top:30px;width:280px;height:220px;opacity:1;} /* Front-above campus atlas: same school in the arrival scene and playable map. */ .arrival-school{left:23%;top:28px;width:330px;height:152px;} .arrival-school{left:25%;top:24px;width:390px;height:156px;} .arrival-scene{} /* Keep reading surfaces distinct from the quieter campus artwork. */ #speech{background:#fff;border-color:#9070b4;box-shadow:0 5px 18px #3e285523} #speech strong{color:#39264e;word-break:keep-all;overflow-wrap:break-word;line-height:1.45} #mission{background:#fff;border-color:#b5a1cd;color:#39264e} /* Restore the original space plaza while retaining accessible reading controls. */ body{background:#080e25}.header-actions button{background:#fff9eae8;color:#354438} #speech{background:#fffafff7;border-color:#bd98e6;box-shadow:0 5px 0 #66478033}#speech::after{display:none}#speech strong{color:#49305f}#mission{background:#fcf7fff2;border-color:#c5a5e3} .arrival-school{display:none!important}.arrival-scene{background:radial-gradient(ellipse at 25% 85%,#254660,transparent 65%),radial-gradient(ellipse at 80% 20%,#282546,transparent 60%),#0b142d} .arrival-scene::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 12% 25%,#ceeaff 1px,transparent 2px),radial-gradient(circle at 32% 72%,#ceeaff 1px,transparent 2px),radial-gradient(circle at 73% 17%,#ceeaff 1px,transparent 2px),radial-gradient(circle at 86% 65%,#ceeaff 1px,transparent 2px);background-size:193px 137px,277px 193px,331px 241px,419px 277px;opacity:.6} .arrival-alien{background-image:url('/assets/monster-plaza/neon/monster-8-frames.webp?v=2bd7fc7fdcf6')} .arrival-ufo{width:210px;height:74px;top:60px;background:none;border:0;box-shadow:none} .arrival-ufo b{background:linear-gradient(#aba3e3,#526689 55%,#24364d);border-bottom:7px solid #76e5ed;box-shadow:0 6px 20px #73f5ff77}.arrival-ufo i{background:linear-gradient(120deg,#c2fffa,#5c94b2);border-color:#8398c5} .arrival-alien{background-position:0 -213.33px;animation:alien-talk .55s steps(1) infinite} #brief[data-arrival="1"] .arrival-alien{animation:alien-arrive .7s ease-out both,alien-talk .55s steps(1) infinite} #brief[data-arrival="2"] .arrival-alien{background-position:0 -213.33px;animation:none} #brief[data-arrival="3"] .arrival-alien{background-position:-320px 0;animation:none} #brief[data-arrival="4"] .arrival-alien{background-position:-320px -213.33px;animation:alien-relieved .7s steps(1) infinite} .arrival-scene{background:#0b142e url('/assets/monster-plaza/neon/quiet-space-v1.webp?v=2bd7fc7fdcf6') center /cover no-repeat}.arrival-scene::before{display:none} /* Choice floor owns the screen; do not cover its labels with the side status panel. */ #game:has(#speech:not([hidden])) #mission{top:20px;bottom:auto;right:20px;width:175px;padding:8px 12px;background:#251b42e8;color:#fff;border-color:#8464ab}#game:has(#speech:not([hidden])) #mission h1,#game:has(#speech:not([hidden])) #mission #lesson,#game:has(#speech:not([hidden])) #mission>p{display:none}#game:has(#speech:not([hidden])) .header-actions{visibility:hidden}#game:has(#speech:not([hidden])) .mission-meta{margin:0;color:#fff}#game:has(#speech:not([hidden])) #timer{color:#fff} .arrival-ufo{background:url('/assets/monster-plaza/neon/ship-friendly-v2.webp?v=2bd7fc7fdcf6') center /contain no-repeat;width:250px;height:150px}.arrival-ufo i,.arrival-ufo b{display:none} /* Shared walking sprites, eight selectable appearances. */ .chosen-appearance{display:flex;align-items:center;justify-content:center;gap:12px;color:#59416e}.chosen-appearance canvas{width:112px;height:112px;object-fit:contain}.chosen-appearance strong{font-size:19px} #character-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}#character-options .character-choice{height:96px;position:relative;display:flex;flex-direction:column;align-items:center;margin:0;padding:5px;border-radius:12px}#character-options canvas{width:62px;height:65px;object-fit:contain}#character-options span{font-size:10px;text-align:center;white-space:nowrap}#character-options .character-choice:has(input:checked){outline:3px solid #8957c4;background:#ede0ff}#sound-cue{pointer-events:auto;font-size:12px;margin-left:auto;background:#302743;color:#fff;border-color:#9986b4}.entry{max-height:calc(100dvh - 110px);overflow:auto} @media(max-width:700px){.chosen-appearance canvas{width:76px;height:76px}#character-options .character-choice{height:83px}#character-options canvas{height:52px;width:50px}#character-options span{font-size:9px}} /* The first arrival carries the surprised pilot inside the cockpit. */ #brief[data-arrival="0"] .arrival-ufo{background-image:url('/assets/monster-plaza/neon/arrival-pilot-v1.webp?v=2bd7fc7fdcf6');width:min(360px,82%);height:235px;top:12px;left:50%;transform:translateX(-50%);animation:pilot-landing 3.2s ease-out both} #brief[data-arrival="0"] .arrival-actor{display:none} @keyframes pilot-landing{0%{transform:translate(-50%,-210px) rotate(-8deg) scale(.72)}40%{transform:translate(-50%,-40px) rotate(6deg) scale(.94)}65%{transform:translate(-50%,6px) rotate(-4deg)}82%{transform:translate(-50%,-3px) rotate(2deg)}100%{transform:translate(-50%,0) rotate(0)}} @media(max-width:600px){#brief[data-arrival="0"] .arrival-ufo{height:200px;top:8px}} @media(prefers-reduced-motion:reduce){#brief[data-arrival="0"] .arrival-ufo{animation:none;transform:translateX(-50%)}} /* Compact briefing: action, goal, timing, start. */ #brief:not([data-arrival]){width:min(570px,calc(100vw - 32px));padding:30px;background:#fffdf8;border:1px solid #f0e4d4;border-radius:26px;text-align:center} #brief:not([data-arrival]) #brief-title{font-size:clamp(26px,4vw,34px);margin:0 24px 20px;color:#352845} #brief .brief-action{margin-bottom:20px;background:#e1f4ed;border:1px solid #c2e5d6;border-radius:18px;padding:18px 12px;color:#285b51} #brief .brief-action p{font-size:clamp(20px,3vw,25px);line-height:1.5;margin:9px 0 3px;color:#285b51;word-break:keep-all} #brief .brief-action strong{color:#185b4c}#brief .brief-action>span{font-size:14px;color:#487367} .brief-floor-demo{display:flex;justify-content:center;gap:4px;height:42px;align-items:flex-end}.brief-floor-demo i{width:55px;height:29px;border-radius:6px;background:#b7dcd5;border:2px solid #a0cac0;box-shadow:0 3px 0 #96b9af}.brief-floor-demo i:first-child{background:#d7caee;border-color:#c1afdf;box-shadow:0 3px 0 #b3a1d0}.brief-floor-demo i:last-child{background:#fae0ba;border-color:#e9cfa4;box-shadow:0 3px 0 #d2ba96}.brief-floor-demo .chosen{height:35px;background:#fffef8;border-color:#408d76;box-shadow:0 3px 0 #408d76;position:relative}.brief-floor-demo .chosen:after{content:'';position:absolute;width:12px;height:7px;border-left:3px solid #408d76;border-bottom:3px solid #408d76;transform:rotate(-45deg);left:18px;top:8px} #brief .brief-goal{display:flex;align-items:center;justify-content:center;gap:12px;background:#fff0db;color:#8b552e;border-radius:12px;padding:12px 8px;margin:12px 0 18px;font-size:17px;line-height:1.5}.brief-progress{display:flex;gap:4px}.brief-progress i{width:9px;height:9px;border-radius:50%;background:#e6ad66} #brief .brief-timing{display:grid;grid-template-columns:1fr 190px;background:transparent;padding:0;margin:0 0 18px;gap:12px;text-align:left}#brief .brief-timing label{font-size:16px;color:#625b68;font-weight:400}#brief #round-seconds{font-size:16px;min-height:46px;border-color:#d8d0df;border-radius:10px;padding:10px 36px 10px 12px}#brief .brief-select:after{right:16px;width:7px;height:7px} #brief:not([data-arrival]) #accept-quest{min-height:54px;font-size:22px;background:#7950b2;color:#fff;border-color:#694099;border-radius:13px;box-shadow:0 3px 0 #573280}#brief .brief-control-note{font-size:12px;color:#766e7c;margin:15px 0 0;line-height:1.5} @media(max-width:420px){#brief:not([data-arrival]){padding:24px 18px}#brief .brief-goal{font-size:15px;gap:8px}#brief .brief-timing{grid-template-columns:1fr 165px}} .arrival-scene{background-image:url('/assets/monster-plaza/neon/space-clean-v2.webp?v=2bd7fc7fdcf6')} .space-ring,.space-moon,.space-comet{position:absolute;display:block;pointer-events:none;background:center /contain no-repeat;opacity:.8} .space-ring{left:1.5%;top:5%;width:8%;height:22%;background-image:url('/assets/monster-plaza/neon/space-ring-v2.webp?v=2bd7fc7fdcf6');animation:quiet-ring-turn 48s linear infinite} .space-moon{right:.1%;top:30%;width:6%;height:26%;background-image:url('/assets/monster-plaza/neon/space-moon-v2.webp?v=2bd7fc7fdcf6');animation:quiet-moon-turn 70s linear infinite} .space-comet{left:81%;top:4%;width:6%;height:18%;background-image:url('/assets/monster-plaza/neon/space-comet-v2.webp?v=2bd7fc7fdcf6');animation:quiet-meteor 14s linear infinite} @keyframes quiet-ring-turn{0%{rotate:0deg}25%{rotate:102deg}50%{rotate:180deg}75%{rotate:258deg}100%{rotate:360deg}} @keyframes quiet-moon-turn{to{rotate:360deg}} @keyframes quiet-meteor{0%{opacity:0;transform:translate(0,0)}5%{opacity:.8}22.85%{opacity:0;transform:translate(-180%,180%)}100%{opacity:0;transform:translate(-180%,180%)}} @media(prefers-reduced-motion:reduce){.space-ring,.space-moon,.space-comet{animation:none!important}.space-comet{opacity:.65}} .arrival-next[hidden]{display:none!important}.arrival-nav .arrival-pause{background:transparent;border:1px solid #d4c6e1;color:#73568b;font-size:15px;padding:12px 18px}.arrival-nav .arrival-pause[aria-pressed="true"]{background:#eee4f8} /* The alien explains each concrete example beside it. */ .lesson-with-guide{display:grid;grid-template-columns:160px minmax(0,1fr);gap:22px;padding:22px;background:linear-gradient(120deg,#e5f3f1,#f2ebfa 65%)} .lesson-guide{position:relative;height:210px;align-self:center} .lesson-guide .arrival-alien{bottom:0} .lesson-guide>span{position:absolute;bottom:0;left:0;right:0;font-size:13px;color:#654d80} .lesson-example{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0} .lesson-example em{line-height:1.5;word-break:keep-all} #brief[data-arrival="5"] .arrival-caption,#brief[data-arrival="6"] .arrival-caption,#brief[data-arrival="7"] .arrival-caption,#brief[data-arrival="8"] .arrival-caption{font-size:clamp(20px,2.6vw,27px);white-space:pre-line;min-height:4.5em} @media(max-width:600px){.lesson-with-guide{grid-template-columns:85px minmax(0,1fr);gap:8px;padding:14px}.lesson-guide{height:150px}.lesson-guide .arrival-alien{scale:.65;transform-origin:50% 100%;left:50%;margin-left:-28px}.lesson-example strong{font-size:21px}.lesson-example small{font-size:14px}.lesson-example em{font-size:12px}.lesson-example .intro-odds b{font-size:16px;gap:5px}} .arrival-nav .arrival-skip{white-space:nowrap;min-width:100px;flex-shrink:0} /* Guide gestures follow the caption, then settle into a quiet listening pose. */ .lesson-guide .arrival-alien{animation:guide-breathe 3.8s ease-in-out infinite;transform-origin:50% 90%;background-position:0 0} #brief[data-arrival="5"] .lesson-guide .arrival-alien{background-position:-320px 0} #brief[data-arrival="7"] .lesson-guide .arrival-alien{background-position:-160px 0} #brief .lesson-guide[data-speaking="true"] .arrival-alien{animation:guide-speech .9s steps(1) infinite,guide-explain 2.8s ease-in-out infinite} #brief[data-arrival="5"] .lesson-guide[data-speaking="true"] .arrival-alien{animation:guide-consider 4.2s steps(1) infinite,guide-look 4.2s ease-in-out infinite} #brief[data-arrival="7"] .lesson-guide[data-speaking="true"] .arrival-alien{animation:guide-speech .9s steps(1) infinite,guide-delight 1.3s ease-out 1} #brief[data-arrival="8"] .lesson-guide[data-speaking="true"] .arrival-alien{animation:guide-speech .9s steps(1) infinite,guide-nod 3s ease-in-out infinite} #brief[data-arrival="6"] .intro-odds b{border-radius:8px;padding:3px 7px;animation:guide-candidate 6s ease-in-out 1} #brief[data-arrival="6"] .intro-odds b:nth-child(2){animation-delay:1.4s} #brief[data-arrival="6"] .intro-odds b:nth-child(3){animation-delay:2.8s} @keyframes guide-breathe{0%,100%{translate:0 0}50%{translate:0 -2px}} @keyframes guide-speech{0%,100%{background-position:-160px -213.33px}38%{background-position:0 -213.33px}62%{background-position:-160px -213.33px}} @keyframes guide-consider{0%,100%{background-position:-320px 0}32%{background-position:-160px -213.33px}55%{background-position:0 -213.33px}73%{background-position:-160px -213.33px}} @keyframes guide-look{0%,100%{rotate:0deg;translate:0 0}25%,65%{rotate:3deg;translate:3px -2px}} @keyframes guide-explain{0%,100%{rotate:0deg;translate:0 0}40%{rotate:2deg;translate:3px -3px}70%{rotate:-1deg;translate:0 -1px}} @keyframes guide-delight{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 -8px;rotate:-3deg}60%{translate:0 1px;rotate:2deg}} @keyframes guide-nod{0%,65%,100%{translate:0 0;rotate:0deg}25%,42%{translate:0 3px;rotate:2deg}34%{translate:0 0;rotate:0deg}} @keyframes guide-candidate{0%,8%,45%,100%{background:transparent}15%,32%{background:#fff6d6}} @media(prefers-reduced-motion:reduce){#brief .lesson-guide .arrival-alien,#brief .intro-odds b{animation:none!important}} /* Gentle hover continues after the pilot finishes descending. */ #brief:not([data-arrival="0"]) .arrival-ufo{animation:ship-hover 5.5s ease-in-out infinite} #brief[data-arrival="0"] .arrival-ufo{animation:pilot-landing 3.2s ease-out both,ship-hover 5.5s ease-in-out 3.2s infinite} @keyframes ship-hover{0%,100%{transform:translate(-50%,0) rotate(0deg)}25%{transform:translate(calc(-50% + 4px),-9px) rotate(2.5deg)}50%{transform:translate(-50%,0) rotate(0deg)}75%{transform:translate(calc(-50% - 4px),7px) rotate(-2.5deg)}} @media(prefers-reduced-motion:reduce){#brief .arrival-ufo{animation:none!important;transform:translateX(-50%)}} /* Keep the learning sequence focused; map access returns at the ending. */ #ending-card[data-replay=true] #close-ending{display:none} #ending-card[data-replay=true] .ending-actions:not(:has(button:not([hidden]):not(#close-ending))){display:none} .focus-chunks{align-items:center}.focus-chunks .chunk-divider{font-size:28px;font-weight:400;color:#937ba6;line-height:1;padding:0 2px} /* Branded time selector, including the expanded options. */ #brief .custom-time-picker:after{display:none} #brief .custom-time-picker #round-seconds[hidden]{display:none} #brief .time-picker-trigger{width:100%;min-height:46px;padding:10px 36px 10px 14px;text-align:left;background:#fffaf2;color:#51396b;border:1px solid #ccb8df;border-radius:12px;font:inherit;font-size:16px;position:relative;box-shadow:none} #brief .time-picker-trigger:after{content:'';position:absolute;right:16px;top:18px;width:7px;height:7px;border-right:2px solid #7951b1;border-bottom:2px solid #7951b1;transform:rotate(45deg)} #brief .time-picker-trigger[aria-expanded=true]:after{transform:translateY(4px) rotate(225deg)} #brief .time-picker-options{margin-top:6px;padding:6px;background:#fffaf2;border:1px solid #dfd0ec;border-radius:14px;box-shadow:0 8px 20px #49345e15} #brief .time-picker-options button{display:block;width:100%;padding:11px 30px 11px 10px;border:0;border-radius:9px;background:transparent;text-align:left;color:#51396b;font:inherit;font-size:16px;box-shadow:none;position:relative} #brief .time-picker-options button:hover,#brief .time-picker-options button:focus-visible{background:#f0e8fa;outline:2px solid #b89ad8;outline-offset:-2px} #brief .time-picker-options button[aria-selected=true]{background:#e9ddf5;color:#69439a;font-weight:700} #brief .time-picker-options button[aria-selected=true]:after{content:'✓';position:absolute;right:10px} #brief .time-picker-trigger:focus-visible{outline:2px solid #9570bd;outline-offset:3px} /* Keep candidates visible while a selected teaching chunk joins the sentence. */ .token-demo{position:relative;width:100%;max-width:540px;text-align:center}.token-candidates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.token-candidates>div{position:relative;padding:12px 6px 17px;background:#fffaf2;border-radius:12px}.token-candidates b{display:block;font-size:20px}.token-candidates span{font-size:16px}.token-candidates i{position:absolute;left:8px;bottom:7px;width:var(--chance);max-width:calc(100% - 16px);height:5px;background:#a080c5;border-radius:5px}.token-candidates .selected{background:#f8da8f}.token-demo .token-rule,.token-demo .token-result{font-size:14px;line-height:1.4;color:#614477;margin:10px 0}.token-sentence{font-size:clamp(22px,3vw,30px);font-weight:700;margin:20px 0 8px;white-space:nowrap}.token-sentence mark{display:inline-block;min-width:3.5em}.token-demo .flying-token{position:absolute;font-size:22px;font-weight:700;color:#64447e;background:#f8da8f;padding:0 7px;border-radius:7px;z-index:2;pointer-events:none}.token-replay{font-size:13px;padding:6px 12px;min-height:32px}.token-teacher-note{font-size:13px;color:#786584;margin:8px 0 14px}.token-teacher-note p{font-size:13px!important;line-height:1.6!important;margin:8px 0!important}#brief[data-arrival="7"] .lesson-example{gap:8px}#brief[data-arrival="7"] .arrival-caption{font-size:clamp(22px,3vw,32px)} @media(max-width:600px){#brief[data-arrival="7"] .lesson-with-guide{grid-template-columns:58px minmax(0,1fr);padding:12px;gap:5px}#brief[data-arrival="7"] .lesson-guide{transform:scale(.7);transform-origin:center}.token-candidates{gap:5px}.token-candidates b{font-size:15px}.token-candidates span{font-size:13px}.token-demo .token-rule,.token-demo .token-result{font-size:12px}.token-sentence{font-size:19px}.token-demo .flying-token{font-size:19px}} #brief[data-arrival="7"] .arrival-scene{height:320px;min-height:320px} /* Compare the same candidates as the preceding context changes. */ .context-demo{width:100%;max-width:560px;text-align:center}.context-sentence{font-size:clamp(19px,2.6vw,28px);line-height:1.6;margin:0 0 14px;word-break:keep-all}.context-odds{display:grid;gap:12px;margin:12px 0}.context-odds>div{display:grid;grid-template-columns:105px minmax(40px,1fr) 48px;align-items:center;gap:10px;font-size:18px;text-align:left}.context-odds i{display:block;background:#ded3ed;height:14px;border-radius:12px;overflow:hidden}.context-odds i span{display:block;height:100%;background:#9a74c2;border-radius:12px;transition:width 850ms ease}.context-demo em{display:block;font-size:12px}.context-toggle{margin-top:12px;background:#7850ad;color:white;border:0;border-radius:12px;padding:9px 18px;font-size:17px}.context-feedback{font-size:15px;line-height:1.5;margin:10px 0 0;min-height:3em}.token-sentence{white-space:normal;line-height:1.5}.token-candidates b{font-size:17px}#brief[data-arrival="5"] .arrival-scene,#brief[data-arrival="6"] .arrival-scene,#brief[data-arrival="7"] .arrival-scene{height:370px;min-height:370px} @media(max-width:600px){#brief[data-arrival="5"] .lesson-with-guide,#brief[data-arrival="6"] .lesson-with-guide{grid-template-columns:50px minmax(0,1fr);padding:10px;gap:6px}.context-odds>div{grid-template-columns:78px minmax(20px,1fr) 35px;gap:5px;font-size:14px}.context-sentence{font-size:19px}.context-feedback{font-size:13px}.token-candidates b{font-size:14px}.token-sentence{font-size:18px}} @media(prefers-reduced-motion:reduce){.context-odds i span{transition:none}} #brief .context-demo .context-sentence{font-size:clamp(19px,2.6vw,28px);line-height:1.6;margin:0 0 14px}#brief .context-demo .context-toggle{background:#7850ad;color:#fff;border:1px solid #694399;font-size:16px}#brief .context-demo .context-feedback{font-size:15px;line-height:1.5;margin:10px 0 0} /* Link the strongest candidate to the highlighted context. */ .context-odds .most-likely>b,.context-odds .most-likely>[data-chance]{background:linear-gradient(transparent 38%,#f8da8f 38%,#f8da8f 94%,transparent 94%);border-radius:5px;width:fit-content;box-shadow:4px 0 0 transparent;font-weight:700} /* One short spoken line; the example itself carries the explanation. */ #brief[data-arrival] .lesson-guide>span,#brief[data-arrival] .lesson-example>small,#brief[data-arrival] .token-rule,#brief[data-arrival] .token-result,#brief[data-arrival] .token-teacher-note,#brief[data-arrival="8"] .lesson-example>em{display:none} #brief[data-arrival="5"] .arrival-caption,#brief[data-arrival="6"] .arrival-caption,#brief[data-arrival="7"] .arrival-caption,#brief[data-arrival="8"] .arrival-caption{min-height:1.5em;margin:22px 0;font-size:clamp(20px,2.6vw,27px)} #brief[data-arrival="6"]:has(.context-feedback:not(:empty)) .arrival-caption{visibility:hidden} /* The guide settles before the token moves, keeping one focus at a time. */ #brief[data-arrival="7"] .lesson-guide[data-speaking="false"] .arrival-alien{animation:none} .token-replay:disabled{opacity:.4;cursor:default} #brief[data-arrival="6"] .context-feedback{display:none} .repeat-demo{position:relative;width:100%;text-align:center}.repeat-sentence{font-size:clamp(22px,3vw,32px);line-height:1.85;font-weight:700;word-break:keep-all}.repeat-sentence [data-repeat-context]{border-radius:8px;transition:background-color .2s}.repeat-sentence .reading{background:#f8da8f;box-shadow:0 0 0 4px #f8da8f}.repeat-sentence mark{display:inline-block;min-width:2em}.repeat-source{display:table;margin:18px auto 0;padding:4px 12px;background:#f8da8f;border-radius:9px;font-size:24px;font-weight:700;min-height:35px;opacity:0;pointer-events:none}.repeat-replay{font-size:14px;padding:8px 14px;margin-top:12px}.repeat-replay:disabled{visibility:hidden}#brief[data-arrival="8"] .arrival-scene{height:370px;min-height:370px}#brief[data-arrival="8"] .lesson-guide[data-speaking="false"] .arrival-alien{animation:none}@media(max-width:600px){#brief[data-arrival="8"] .lesson-with-guide{grid-template-columns:50px minmax(0,1fr);gap:8px;padding:12px}.repeat-sentence{font-size:20px}.repeat-source{font-size:20px}} /* Overlay the choices above the trigger without resizing the briefing. */ #brief .custom-time-picker{position:relative} #brief .time-picker-options{position:absolute;left:0;right:0;bottom:calc(100% + 6px);margin:0;z-index:20;max-height:190px;overflow-y:auto} #speech #speech-prompt{margin:10px 0 0;font-size:clamp(15px,1.8vw,20px);line-height:1.4;color:#73519a;font-weight:700;word-break:keep-all} .live-timer{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.live-timer button{padding:4px 5px;min-width:28px;min-height:30px;font-size:12px;line-height:1;color:#fff6de;background:#655080;border:1px solid #a98cc4;border-radius:8px}.live-timer button:hover{background:#8464a0}#game:has(#speech:not([hidden])) #mission{width:225px}#mission .mission-meta{align-items:center}#mission #timer{min-width:36px;text-align:center} /* Fit replay explanations and navigation together in the available viewport. */ #game #ending-card[data-replay=true]{top:50%;bottom:auto;transform:translate(-50%,-50%);max-height:calc(100dvh - 24px);padding:20px 28px} #story-receipt.focused-replay .focus-heading{margin:12px 0} #story-receipt.focused-replay .focus-heading h3{min-height:1.35em} #story-receipt.focused-replay .focus-visual{min-height:100px;margin:12px 0} #story-receipt.focused-replay .learning-demo{padding:14px} #story-receipt.focused-replay .learning-scenes{min-height:108px;margin:12px 0 6px} #story-receipt.focused-replay .focus-more{margin:8px 0} #story-receipt.focused-replay .focus-nav{position:sticky;bottom:0;z-index:2;background:#fffaf2;padding-top:8px} @media(max-height:760px){ #story-receipt.focused-replay .focus-heading p{font-size:clamp(22px,3vw,28px)!important} #story-receipt.focused-replay .focus-heading h3, #story-receipt.focused-replay #typed-focus{font-size:clamp(26px,4vw,38px)} #story-receipt.focused-replay .learning-scenes{min-height:88px;margin:8px 0} #story-receipt.focused-replay .learning-example{padding:8px 16px;font-size:22px} } @media(max-width:600px){ #game #ending-card[data-replay=true]{padding:18px 16px} #story-receipt.focused-replay .focus-heading h3, #story-receipt.focused-replay #typed-focus{font-size:30px} } .replay-short-note{text-align:center!important;font-size:18px!important;line-height:1.6!important;color:#71667c;margin:22px 0!important} #evidence-hud{position:absolute;z-index:12;top:90px;left:50%;transform:translateX(-50%);width:min(900px,92vw);padding:16px 24px;border-radius:22px;background:#fffaf2;color:#473256;text-align:center;box-shadow:0 4px 0 #ac8dce;pointer-events:none} #evidence-hud[hidden]{display:none} #evidence-hud h2{font-size:20px;margin:0 0 8px;color:#7955a3} #evidence-hud .evidence-answer{font-size:clamp(20px,2.5vw,30px);font-weight:bold;margin:6px 0} #evidence-hud .evidence-message{font-size:17px;line-height:1.5;margin:8px 0} #evidence-hud small{font-size:13px;color:#746781} #evidence-hud button{pointer-events:auto} .evidence-link{display:flex;justify-content:center;gap:16px;font-size:16px;background:#eee6f7;padding:8px;border-radius:10px;margin:8px 0} #game[data-phase=evidence] #controls{display:flex} #game[data-phase=evidence] #controls .move-help{display:none} #game[data-phase=evidence] #controls{justify-content:flex-end} #game[data-phase=evidence] .zoom-controls button{min-width:44px;min-height:44px;font-size:16px} @media(max-height:700px){#evidence-hud{top:68px;padding:10px 18px}#evidence-hud h2{font-size:16px}.evidence-link{font-size:13px}#evidence-hud .evidence-message{font-size:15px}} .recap-example,.recap-odds{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:22px 0;font-size:clamp(20px,3vw,34px)} .recap-example span,.recap-odds span{background:#eee4f7;padding:10px 16px;border-radius:14px}.recap-example i{font-style:normal;color:#9984ac}.recap-context{text-align:center;font-size:clamp(20px,3vw,30px);margin:18px 0;color:#5f4a71}.recap-odds b{display:block;font-size:.8em}.recap-odds span:first-child,.recap-example .new-piece{background:#ffe08a}.focused-replay .focus-heading h3{font-size:clamp(24px,3.4vw,42px);word-break:keep-all;line-height:1.4}.focused-replay #attach-piece{display:block;margin:12px auto;padding:14px 28px}.evidence-proof{display:flex;justify-content:center;gap:16px;align-items:center;font-size:clamp(19px,2.8vw,28px);padding:12px}.evidence-proof span{padding:12px;background:#eee4f7;border-radius:12px}.evidence-proof b{display:block;margin-top:8px;color:#65448c}#evidence-hud .evidence-answer{word-break:keep-all} .focused-replay .focus-heading h3 .recap-term{color:#167d70} .recap-sentence{font-size:clamp(23px,3vw,36px);line-height:1.8;text-align:center;word-break:keep-all;min-height:3.6em;padding:18px 24px;background:#eee4f7;border-radius:18px;margin:22px 0;color:#503763} .arriving-token{background:#ffe08a;border-radius:5px;animation:recap-token-in .4s ease-out}.recap-cursor{color:#9c78ba} #replay-animation{display:block;margin:12px auto;padding:10px 20px} @keyframes recap-token-in{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){.arriving-token{animation:none}} .bag-pattern{font-size:clamp(18px,2.6vw,28px);padding:12px;color:#167d70}.evidence-proof svg{display:block;margin:8px auto}.evidence-proof b{font-size:22px} .learning-animation{margin:14px auto;padding:14px;background:#eee4f7;border-radius:14px;font-size:clamp(18px,2.2vw,26px);color:#65448c}.generated-piece{display:inline-block;background:#ffe18d;border-radius:8px;padding:4px 7px}.piece-divider{font-style:normal;color:#aa94b8}.evidence-proof img{display:block;margin:auto} /* Selected floor words land directly in the sentence's reserved next-word slot. */ #speech .attached-story-word{display:inline-block;background:#f8da8f;color:#604080;border-radius:6px;padding:0 5px} .story-word-flight{position:fixed;z-index:30;transform:translate(-50%,-50%);background:#f8da8f;color:#604080;border-radius:6px;padding:0 5px;font-family:Rounded,sans-serif;font-weight:700;line-height:1.45;pointer-events:none;white-space:nowrap} #speech #speech-text .story-continuation{display:inline;font-size:inherit;color:inherit;margin:0} /* Inline emphasis must not become separate grid rows in recap sentences. */ .focused-replay .focus-heading h3{display:block;text-wrap:pretty} .focused-replay .focus-heading h3 .recap-term{display:inline;white-space:nowrap} #evidence-hud .mission-purpose{font-size:clamp(17px,2vw,22px);line-height:1.6;margin:12px 0;color:#655474;word-break:keep-all} .mission-route{display:flex;justify-content:center;align-items:center;gap:8px;margin:16px 0;font-size:clamp(14px,1.8vw,19px)} .mission-route span{padding:8px 12px;background:#eee5f5;border-radius:12px;word-break:keep-all}.mission-route b{color:#a392b5}.mission-route.compact{margin:0 0 9px;font-size:13px}.mission-route.compact span{padding:5px 10px}.mission-route .current{background:#ffe08a;color:#503763;font-weight:bold} #evidence-hud .mission-together{font-size:15px;color:#756383;line-height:1.5;margin:10px 0 16px;word-break:keep-all} #evidence-hud .mission-action{margin:10px 0;font-size:clamp(16px,2vw,20px);color:#70518f;word-break:keep-all} /* Keep the walking map visible while its one current instruction is read. */ #evidence-hud{box-sizing:border-box;width:min(800px,calc(100vw - 32px));padding:10px 20px;top:78px} #evidence-hud .mission-route.compact{margin:0;font-size:14px} #evidence-hud .evidence-answer{font-size:clamp(18px,2vw,26px);margin:4px 0} #evidence-hud .mission-action{margin:4px 0;font-size:16px} #evidence-hud[data-reading="true"]{background:#fffaf2f5} #evidence-hud .mission-purpose{font-size:18px;line-height:1.4;margin:8px 0} #evidence-hud .mission-together{margin:6px 0;font-size:14px} @media(max-width:700px){#evidence-hud{top:72px;padding:8px 12px}#evidence-hud .mission-route{font-size:12px;gap:6px}#evidence-hud .mission-purpose{font-size:15px}#evidence-hud .mission-action{font-size:13px}} /* Learning examples accumulate in a centered, bounded dialog. */ #evidence-hud.learning-centered{top:50%;transform:translate(-50%,-50%);max-height:calc(100dvh - 40px);overflow:auto;padding:24px;width:min(760px,calc(100vw - 32px));box-sizing:border-box;} #evidence-hud.learning-centered .learning-animation{display:flex;flex-direction:column;gap:10px;background:transparent;min-height:180px;justify-content:center;} #evidence-hud.learning-centered .learning-animation p{margin:0;padding:12px 16px;border-radius:12px;background:#eee4f7;color:#62437e;font-size:clamp(17px,2.2vw,25px);word-break:keep-all;} #evidence-hud.learning-centered[data-reading="true"]{background:#fffaf2;} .voyage-invite{display:flex;align-items:end;justify-content:center;gap:28px;height:clamp(100px,19vh,170px);margin:10px 0}.voyage-invite img{height:100%;max-width:45%;object-fit:contain}.voyage-ready{font-size:clamp(16px,2vw,22px);color:#715887;margin:10px 0} .nene-waving{display:block;height:100%;aspect-ratio:1.02;background:url('/assets/monster-plaza/evidence-map/nene-wave.webp?v=2bd7fc7fdcf6') 0 50% / 200% 100% no-repeat;animation:nene-greeting 1s steps(1) infinite;}@keyframes nene-greeting{50%{background-position:100% 50%}}@media(prefers-reduced-motion:reduce){.nene-waving{animation:none}} #story-receipt .voyage-ready{text-align:center;font-size:18px;line-height:1.5;} .hall-scene{margin:22px auto;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.hall-sentence{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-size:clamp(20px,3vw,30px)}.hall-sentence>*{padding:10px 15px;background:#eee3f7;border-radius:12px;animation:hall-arrive .5s both;animation-delay:var(--delay)}.hall-sentence mark{background:#ffdfa0;color:#62437e}.hall-evidence{border:2px dashed #ac96bb;padding:10px 25px;border-radius:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}.hall-evidence strong{font-size:30px;color:#a46a28}.hall-evidence small{font-size:15px}.hall-compare{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,50px)}.hall-compare>div{display:flex;flex-direction:column;align-items:center;gap:8px}.hall-compare strong{font-size:30px}.hall-compare small{font-size:16px}.hall-compare>b{font-size:42px;color:#9d6171}.hall-mars{background:#ffe0c6;padding:18px;border-radius:18px}.hall-card{animation:hall-arrive 1s both}.hall-card img{height:90px;width:100px;object-fit:contain}.hall-name{font-size:clamp(26px,4vw,40px);color:#7542aa;animation:hall-arrive .6s .7s both}.hall-safe{background:#e0f2ec;padding:20px;border-radius:16px;font-size:24px;animation:hall-arrive .7s both}#evidence-hud [data-replay-scene]{margin-right:10px;padding:10px 14px;font-size:16px}@keyframes hall-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.hall-scene *{animation:none!important}} .ai-identity{display:flex;flex-direction:column;align-items:center;gap:4px;margin:8px auto;color:#65417c}.ai-identity>strong{font-size:23px}.ai-identity>small{font-size:15px}.momo-speaking{display:block;width:90px;height:120px;background:url('/assets/monster-plaza/neon/monster-8-frames.webp?v=2bd7fc7fdcf6') 0 100% / 400% 200% no-repeat;animation:momo-reply .5s steps(1) infinite}.ai-input{max-width:460px;margin:8px auto;padding:10px 16px;border-radius:14px;background:#e4f2ec;display:flex;flex-direction:column;gap:4px;animation:question-enter 1.2s both}.ai-input strong{font-size:clamp(19px,2.3vw,25px);word-break:keep-all}.ai-answer{padding:14px;background:#eee4f7;border-radius:14px;font-size:clamp(20px,2.4vw,28px);min-height:40px;margin:8px auto;max-width:520px}.ai-answer .generated-piece{display:inline-block}.ai-exchange .ai-identity{margin:4px auto}.ai-exchange .momo-speaking{width:60px;height:80px}@keyframes momo-reply{50%{background-position:33.333% 100%}}@keyframes question-enter{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.momo-speaking,.ai-input{animation:none}} /* Stable silhouette: avoid alternating differently registered generated poses. */ .nene-waving{background:url('/assets/monster-plaza/evidence-map/nene.webp?v=2bd7fc7fdcf6') center / contain no-repeat;animation:nene-float 2.4s ease-in-out infinite;transform-origin:50% 90%} @keyframes nene-float{50%{transform:translateY(-3px) rotate(1deg)}} @media(prefers-reduced-motion:reduce){.nene-waving{animation:none}} #evidence-hud[data-reading="false"]{width:fit-content;max-width:calc(100vw - 32px);padding:14px 24px} #evidence-hud .received-question{margin:20px auto;max-width:360px;background:#eee4f7;border:3px solid #c2a5df;border-radius:20px;padding:24px;box-shadow:0 6px 0 #d0bddf;animation:hall-arrive .4s both} .received-question strong{display:block;font-size:clamp(24px,3vw,34px);margin-top:12px} .friends-introduction{display:flex;align-items:end;justify-content:center;gap:clamp(30px,8vw,100px);height:clamp(140px,26vh,230px);margin:22px auto;overflow:hidden} .friends-introduction>div{display:flex;align-items:center;flex-direction:column;height:100%;justify-content:end;min-width:120px} .friends-introduction .momo-speaking{width:150px;height:180px;flex:none} .friends-introduction .nene-waving{height:calc(100% - 30px);width:150px;flex:none} .friends-introduction b{font-size:18px;color:#674782;margin-top:6px} .lulu-enters .friend-lulu{animation:lulu-walk-in 1.5s ease-out both} @keyframes lulu-walk-in{0%{opacity:0;transform:translateX(160px)}20%{opacity:1;transform:translateX(125px) translateY(-4px)}40%{transform:translateX(90px)}60%{transform:translateX(55px) translateY(-4px)}80%{transform:translateX(20px)}100%{transform:translateX(0)}} @media(prefers-reduced-motion:reduce){.lulu-enters .friend-lulu{animation:none}} /* A consistent reading stage, with controls kept at the bottom. */ #evidence-hud.learning-centered,#ending-card[data-replay="true"]{width:min(740px,calc(100vw - 48px));height:auto;max-height:calc(100dvh - 48px);overflow-y:auto;box-sizing:border-box;padding:28px 32px;} #evidence-hud.learning-centered{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;} #evidence-hud.learning-centered[hidden]{display:none} #evidence-hud.learning-centered>.evidence-answer{font-size:clamp(22px,2.5vw,30px);line-height:1.45;max-width:760px;} #evidence-hud.learning-centered>[data-next]{margin-top:auto;min-width:240px;flex-shrink:0} #evidence-hud.learning-centered>[data-replay-scene]{margin-top:12px;margin-bottom:-6px} #evidence-hud.learning-centered>[data-replay-scene]+[data-next]{margin-top:0} #story-receipt.focused-replay{height:auto;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box} #story-receipt.focused-replay .focus-nav{margin-top:22px;flex-shrink:0} #story-receipt.focused-replay .focus-heading h3{margin:14px 0;font-size:clamp(24px,3vw,36px)} .solo-speaker{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:12px auto;color:#674782} .lulu-greeting{width:200px;height:218px;object-fit:contain;max-height:28vh} .solo-speaker .momo-speaking{width:150px;height:190px} .learned-links{padding:20px;background:#eee4f7;border-radius:18px;width:min(560px,100%);box-sizing:border-box;font-size:24px} .learned-links>div:first-child,.learned-recall small{font-size:17px;color:#74558c} .learned-links p{font-size:clamp(23px,3vw,32px);margin:18px 0}.learned-links mark,.learned-recall mark{background:#ffe08a;color:#56376b;border-radius:6px;padding:2px 6px} .concept-chips{display:flex;align-items:center;justify-content:center;gap:20px;font-size:30px;margin:12px}.concept-chips span{background:white;border-radius:12px;padding:12px 20px} #evidence-hud .learned-links small{font-size:18px}.link-arrow{font-size:30px;color:#9070b5} .learned-recall{padding:12px 20px;background:#f0e6f8;border-radius:14px;animation:hall-arrive .6s both} .learned-recall p{font-size:24px;margin:10px 0}.learned-recall>span{font-size:17px;color:#806095;animation:hall-arrive .6s 1.3s both} .ai-exchange{width:min(600px,100%)}.ai-exchange .ai-answer{min-height:40px} #plaza-quiz{position:absolute;z-index:15;top:92px;left:50%;transform:translateX(-50%);width:min(900px,calc(100vw - 32px));box-sizing:border-box;padding:18px 24px;border-radius:24px;background:#fffaf2;color:#503464;text-align:center;box-shadow:0 5px #ae90ce} #plaza-quiz[hidden]{display:none}#plaza-quiz h2{font-size:clamp(21px,2.6vw,32px);margin:8px 0;word-break:keep-all}#plaza-quiz p{font-size:18px;margin:8px 0;word-break:keep-all}#plaza-quiz small{display:block;font-size:15px;color:#7d668d}#plaza-quiz button{margin:8px 0 0;padding:10px 24px;font-size:20px}.quiz-answer{font-size:32px;color:#18766a} @media(max-height:650px){#evidence-hud.learning-centered,#ending-card[data-replay="true"]{padding:16px 20px}.lulu-greeting{height:150px;width:140px}.solo-speaker .momo-speaking{height:130px;width:100px}.ai-exchange .momo-speaking{height:50px;width:40px}.ai-identity{margin:0}.ai-input{margin:0;padding:6px}.learned-recall{padding:8px}.learned-recall p{font-size:21px;margin:6px 0}#plaza-quiz{top:75px;padding:10px 20px}#plaza-quiz p{font-size:15px}} /* Center each explanation while retaining a stable navigation position. */ #evidence-hud.learning-centered{padding-bottom:28px} #evidence-hud.learning-centered>[data-next]{position:static;transform:none;margin:16px 0 0;width:280px;max-width:100%;flex-shrink:0} #evidence-hud.learning-centered .ai-exchange .momo-speaking{width:110px;height:146px} @media(max-height:650px){#evidence-hud.learning-centered .ai-exchange .momo-speaking{width:60px;height:80px}} .quiz-clock{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:12px}.quiz-clock strong{font-size:34px;min-width:80px;color:#7443a6}#plaza-quiz .quiz-clock button{margin:0;font-size:18px;padding:8px 13px} /* Sentence and countdown share one centered reading area. */ #game:has(#speech:not([hidden])) #speech #mission{position:static;display:inline-block;transform:none;width:auto;max-width:100%;margin:12px auto 0;padding:8px 16px;border-radius:14px;box-shadow:none} #speech #mission .mission-meta{display:flex;justify-content:center;gap:20px;align-items:center} #speech #mission span{margin:0;color:#fff;font-size:14px} #speech #mission .live-timer{display:inline-flex;gap:10px} #speech #mission #timer{font-size:28px;font-weight:bold;min-width:58px;line-height:1.2} #speech #mission .live-timer button{min-width:32px;min-height:32px} .friends-introduction .lulu-walk{height:calc(100% - 30px);width:auto;max-width:260px;object-fit:contain;flex:none} .friends-introduction.lulu-walk-enter{overflow:visible} .lulu-dialogue{display:flex;flex-direction:column;align-items:center;gap:26px;width:100%;padding-top:4px} .lulu-speech-bubble{position:relative;margin:0;max-width:600px;padding:20px 28px;border:2px solid #b797d3;border-radius:24px;background:#eee4f8;color:#553571;font-size:clamp(22px,2.5vw,30px);line-height:1.45;word-break:keep-all;box-shadow:0 3px 0 #d8c6e8} .lulu-speech-bubble:before,.lulu-speech-bubble:after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:14px solid transparent;border-bottom:0;border-top-color:#b797d3} .lulu-speech-bubble:after{margin-top:-2px;border-top-color:#eee4f8;border-width:12px;border-bottom:0} .lulu-speaker{display:flex;flex-direction:column;align-items:center;gap:4px;color:#674782}.lulu-speaker .lulu-greeting{width:165px;height:180px}.lulu-speaker b{font-size:18px} .momo-study-scene{display:grid;grid-template-columns:145px minmax(0,1fr);align-items:center;gap:20px;width:100%;margin:8px 0} .momo-study-character{display:flex;flex-direction:column;align-items:center;gap:4px;color:#674782}.momo-study-character b{font-size:18px} .momo-studying{display:block;width:140px;height:187px;background:url('/assets/monster-plaza/neon/monster-8-frames.webp?v=2bd7fc7fdcf6') 66.6667% 0 / 400% 200% no-repeat;transform-origin:50% 85%} #evidence-hud.learning-centered .momo-study-scene .learning-animation{width:100%;margin:0;min-height:220px;display:flex;flex-direction:column;justify-content:center;gap:12px} #evidence-hud.learning-centered .momo-study-scene .learning-animation p{font-size:clamp(17px,1.8vw,22px);padding:14px 16px;border:2px solid transparent;transition:background .25s,border-color .25s} #evidence-hud.learning-centered .momo-study-scene p.currently-reading{background:#fff0bd;border-color:#ddba63} @media(max-width:560px){.momo-study-scene{grid-template-columns:1fr;gap:8px}.momo-studying{width:90px;height:120px}#evidence-hud.learning-centered .momo-study-scene .learning-animation{min-height:190px}} /* Emphasize Momo's transition from storytelling to answering questions. */ .focused-replay .recap-answer-underline{ display:inline; padding-bottom:.09em; background:linear-gradient(#ffe178,#ffe178) left 70% / 100% .85em no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone; animation:recap-underline-draw .8s .35s ease-out both; } @keyframes recap-underline-draw{ from{background-size:0% .85em} to{background-size:100% .85em} } @media(prefers-reduced-motion:reduce){ .focused-replay .recap-answer-underline{animation:none} } #evidence-hud.learning-centered.lulu-card-modal{width:min(620px,calc(100vw - 32px));padding:24px 28px} .lulu-card-pair{display:flex;align-items:center;justify-content:center;gap:40px;width:100%} .lulu-exploration-card{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px} #evidence-hud .lulu-exploration-card img{width:180px;height:225px;object-fit:contain} .lulu-exploration-card figcaption{font-size:18px;color:#674782} .lulu-card-modal .lulu-speech-bubble:before,.lulu-card-modal .lulu-speech-bubble:after{left:25%} @media(max-width:480px){ #evidence-hud.learning-centered.lulu-card-modal{padding:22px 16px} .lulu-card-pair{gap:18px} .lulu-card-pair .lulu-greeting{width:125px;height:150px} #evidence-hud .lulu-exploration-card img{width:135px;height:180px} .lulu-card-pair b,.lulu-exploration-card figcaption{font-size:15px} } #evidence-hud .evidence-proof{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);align-items:stretch;gap:12px;width:100%;padding:0} .evidence-proof>section{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;padding:20px 12px;background:#eee4f7;border-radius:18px;min-width:0} #evidence-hud .evidence-proof h3{font-size:clamp(18px,2.4vw,24px);line-height:1.4;margin:0;word-break:keep-all} #evidence-hud .evidence-proof img{display:block;width:100%;max-width:180px;height:220px;object-fit:contain} #evidence-hud .evidence-proof b{font-size:28px;margin:0} .evidence-proof>strong{align-self:center;text-align:center} #evidence-hud .evidence-choices{display:flex;justify-content:center;gap:14px;margin-top:24px;width:100%} #evidence-hud .evidence-choices button{flex:1;width:auto;max-width:220px;margin:0;min-height:50px} @media(max-width:480px){ #evidence-hud .evidence-proof{gap:6px;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr)} .evidence-proof>section{padding:14px 8px} #evidence-hud .evidence-proof img{height:160px} } .momo-safe-dialogue{display:flex;flex-direction:column;align-items:center;gap:24px} .momo-safe-dialogue .momo-speech-bubble{position:relative;margin:0;padding:18px 26px;border:2px solid #93cbbc;border-radius:24px;line-height:1.45;box-shadow:0 3px 0 #c4e4d9} .momo-speech-bubble:before,.momo-speech-bubble:after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:14px solid transparent;border-bottom:0;border-top-color:#93cbbc} .momo-speech-bubble:after{margin-top:-2px;border-width:12px;border-bottom:0;border-top-color:#e0f2ec} .momo-safe-speaker{display:flex;flex-direction:column;align-items:center;gap:2px;color:#674782} .momo-safe-speaker .momo-speaking{width:112px;height:150px} .momo-safe-speaker b{font-size:18px} #plaza-quiz.quiz-finale{top:50%;transform:translate(-50%,-50%);width:min(740px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;padding:26px 30px} #plaza-quiz.quiz-finale h2{font-size:clamp(23px,3vw,32px);margin:12px 0} #plaza-quiz .finale-explanation{line-height:1.65;font-size:clamp(16px,2vw,20px)} .finale-friends{display:flex;justify-content:center;gap:56px;margin:18px 0} .finale-friends>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;color:#674782} .finale-friends .momo-speaking{width:135px;height:180px} .finale-friends .lulu-greeting{width:165px;height:180px} #plaza-quiz .finale-reminder{background:#e0f2ec;border-radius:16px;padding:14px;font-weight:bold;color:#306e62} #plaza-quiz .finale-goodbye{font-size:17px;margin:14px 0} #plaza-quiz.quiz-finale [data-next]{width:min(340px,100%);margin-top:8px} @media(max-width:480px),(max-height:650px){ #plaza-quiz.quiz-finale{padding:20px} .finale-friends{gap:30px;margin:10px 0} .finale-friends .momo-speaking{width:105px;height:140px} .finale-friends .lulu-greeting{width:128px;height:140px} } /* Countdown floats above the sentence and receives its own pointer input. */ #game:has(#speech:not([hidden])) #speech #mission{ position:absolute;top:auto;bottom:calc(100% + 8px);left:50%;right:auto; transform:translateX(-50%);margin:0;padding:4px 12px;width:max-content;max-width:none; background:#28213bcc;border:1px solid #a58cc977;border-radius:12px; pointer-events:auto;z-index:5 } #speech #mission .mission-meta{margin:0;gap:12px} #speech #mission .live-timer{align-items:center;gap:8px} #speech #mission #timer{font-size:24px;min-width:46px} #speech #mission .live-timer button{pointer-events:auto;min-width:36px;min-height:36px;padding:4px;font-size:15px} #speech #speech-prompt{margin-top:6px} #evidence-hud .question-highlight{color:inherit;background:linear-gradient(transparent 24%,#ffe27b 24%,#ffe27b 92%,transparent 92%);padding:0 .08em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone} .momo-check-pair{display:flex;align-items:center;justify-content:center;gap:30px;min-height:175px} .verified-destination{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px} .verified-destination img{width:115px;height:150px;object-fit:contain} .verified-destination figcaption{font-size:15px;color:#674782} .momo-speech-bubble strong{color:#267365;background:#ffe27b;border-radius:4px;padding:0 4px} /* Lulu asks on the left; Momo prepares an answer on the right. */ #evidence-hud .character-conversation{width:min(680px,100%)} .question-partners{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start} .question-lulu,.question-partners .ai-identity{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0} .question-speech{box-sizing:border-box;position:relative;background:#eee4f7;border:2px solid #b89bd0;border-radius:22px;padding:15px 16px;margin:0 0 12px;min-height:94px;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,2.4vw,27px);line-height:1.4;word-break:keep-all} .question-speech:after{content:'';position:absolute;bottom:-10px;left:calc(50% - 9px);width:16px;height:16px;background:#eee4f7;border-right:2px solid #b89bd0;border-bottom:2px solid #b89bd0;transform:rotate(45deg)} #evidence-hud .question-partners .lulu-greeting{width:140px;height:168px} #evidence-hud.learning-centered .question-partners .momo-speaking,#evidence-hud .question-partners .momo-studying{width:126px;height:168px;flex:none} .question-partners strong{font-size:21px;color:#65417c} .thinking-bubble{display:flex;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;min-height:94px;margin-bottom:12px;width:110px;background:#e4f2ec;border-radius:40px;position:relative} .thinking-bubble:after{content:'';position:absolute;bottom:-12px;left:28px;width:14px;height:14px;border-radius:50%;background:#e4f2ec} .thinking-bubble span{width:10px;height:10px;border-radius:50%;background:#7955a3;animation:answer-thinking 1.2s ease-in-out infinite} .thinking-bubble span:nth-child(2){animation-delay:.2s}.thinking-bubble span:nth-child(3){animation-delay:.4s} .is-thinking .momo-studying{animation:momo-consider 2.2s ease-in-out infinite} @keyframes answer-thinking{0%,70%,100%{transform:translateY(0);opacity:.4}35%{transform:translateY(-6px);opacity:1}} @keyframes momo-consider{0%,100%{transform:rotate(-2deg)}50%{transform:translateY(3px) rotate(2deg)}} @media(max-height:700px){#evidence-hud .question-partners .lulu-greeting{width:100px;height:120px}#evidence-hud.learning-centered .question-partners .momo-speaking,#evidence-hud .question-partners .momo-studying{width:90px;height:120px}.question-speech,.thinking-bubble{min-height:76px;font-size:20px}.question-partners{gap:14px}} @media(max-width:480px){.question-partners{gap:12px}.question-speech{font-size:18px;padding:12px 8px;min-height:105px}.thinking-bubble{min-height:105px;width:85px}.question-partners strong{font-size:18px}.question-partners .ai-identity small{font-size:13px}} @media(prefers-reduced-motion:reduce){.thinking-bubble span,.is-thinking .momo-studying{animation:none}} .answer-ready .thinking-bubble{visibility:hidden}.answer-ready .thinking-bubble span{animation:none} .recheck-reading{display:flex;align-items:center;justify-content:center;gap:24px;width:100%}.recheck-sentences{flex:1;max-width:510px;min-height:315px;text-align:left}.recheck-sentences p{margin:8px 0;padding:12px 16px;background:#eee4f7;border-radius:14px;font-size:clamp(18px,2vw,23px);line-height:1.35}.recheck-sentences p.active{background:#ffe18b}.recheck-sentences p.verified{border:2px solid #8dcdbb}.recheck-question{display:flex;flex-direction:column;align-items:center;gap:6px}.recheck-question .lulu-speech-bubble{font-size:24px;margin:4px 0 12px;padding:14px 24px}.recheck-question .lulu-greeting{width:100px;height:125px}.recheck-source{font-size:20px;margin:12px 0;padding:10px 16px;background:#e0f2ec;border-radius:12px}.recheck-response{display:flex;align-items:center;justify-content:center;gap:20px}.recheck-response .momo-speaking{width:100px;height:133px;flex-shrink:0}.recheck-response .momo-speech-bubble{font-size:clamp(21px,2.8vw,29px);padding:18px 24px;margin:0;min-width:210px}.recheck-response mark{background:#ffe18b;color:#297664;border-radius:6px} @media(max-width:560px){.recheck-reading{gap:12px}.recheck-reading .momo-studying{width:75px;height:100px}.recheck-sentences p{font-size:17px;padding:10px}.recheck-response{gap:10px}.recheck-response .momo-speaking{width:75px;height:100px}.recheck-response .momo-speech-bubble{min-width:0;padding:14px}.recheck-question .lulu-speech-bubble{font-size:21px}.recheck-source{font-size:17px}} .evidence-farewell{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:min(670px,100%)}.evidence-farewell>div{display:flex;flex-direction:column;align-items:center;gap:8px}.farewell-bubble{position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;background:#e1f2ec;border-radius:20px;padding:18px 14px;min-height:125px;width:100%;font-size:clamp(18px,2vw,24px);line-height:1.5;word-break:keep-all;margin:0 0 14px}.farewell-bubble:after{content:'';position:absolute;bottom:-9px;left:calc(50% - 9px);width:18px;height:18px;background:inherit;transform:rotate(45deg)}.evidence-farewell>div:nth-child(2) .farewell-bubble{background:#eee4f7}.farewell-bubble mark{background:#ffe18b;border-radius:5px;color:#65417c}.evidence-farewell .momo-speaking{width:120px;height:160px}.evidence-farewell .lulu-greeting{width:140px;height:160px}.evidence-farewell b{font-size:21px;color:#65417c}.evidence-farewell-prompt{font-size:clamp(17px,2vw,23px);margin:20px 0 4px;word-break:keep-all}@media(max-width:500px){.evidence-farewell{gap:12px}.farewell-bubble{font-size:17px;padding:12px 10px;min-height:145px}.evidence-farewell .momo-speaking{width:90px;height:120px}.evidence-farewell .lulu-greeting{width:105px;height:120px}.evidence-farewell b{font-size:18px}} /* The repeated question and its answer share one row. */ .recheck-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;width:min(680px,100%);align-items:start} .recheck-duo .recheck-question,.recheck-duo .recheck-response{display:grid;grid-template-rows:minmax(112px,auto) 168px auto;justify-items:center;align-items:center;gap:14px;min-width:0} .recheck-duo .lulu-speech-bubble,.recheck-duo .momo-speech-bubble{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;align-content:center;width:100%;height:100%;min-width:0;margin:0;padding:16px 18px;border-radius:24px;font-size:clamp(19px,2.3vw,26px);line-height:1.45;word-break:keep-all} .recheck-duo .momo-speech-bubble{display:block;align-content:center;background:#e0f2ec;border:2px solid #8ecbbc;color:#473256} .recheck-duo .momo-speech-bubble:after{content:'';position:absolute;bottom:-10px;left:calc(50% - 9px);width:16px;height:16px;background:#e0f2ec;border-right:2px solid #8ecbbc;border-bottom:2px solid #8ecbbc;transform:rotate(45deg)} #evidence-hud .recheck-duo .lulu-greeting{width:145px;height:168px}.recheck-duo .momo-speaking{width:126px;height:168px}.recheck-duo b{font-size:21px;color:#65417c}.recheck-duo+.recheck-source{margin:22px 0 8px;font-size:19px} @media(max-width:500px){.recheck-duo{gap:12px}.recheck-duo .recheck-question,.recheck-duo .recheck-response{grid-template-rows:minmax(115px,auto) 125px auto;gap:12px}.recheck-duo .lulu-speech-bubble,.recheck-duo .momo-speech-bubble{font-size:18px;padding:12px 10px}#evidence-hud .recheck-duo .lulu-greeting{width:108px;height:125px}.recheck-duo .momo-speaking{width:94px;height:125px}.recheck-duo b{font-size:18px}.recheck-duo+.recheck-source{font-size:16px}} .recheck-duo .momo-speech-bubble:before{display:none}.recheck-duo .momo-speech-bubble:after{top:auto;margin:0;border:0;border-right:2px solid #8ecbbc;border-bottom:2px solid #8ecbbc} #controls .sound-control{pointer-events:auto}#controls .sound-panel{top:auto;bottom:calc(100% + 12px);left:0;right:auto;width:240px;box-sizing:border-box}#controls .sound-panel label{display:grid;grid-template-columns:auto minmax(0,1fr) 4ch;gap:10px}#controls .sound-panel input{width:100%;min-width:0}#controls .sound-panel output{text-align:right}#controls .sound-button{background:#342443;border:1px solid #b79ccc;color:#fff8ec}#sound-cue[hidden]{display:none} /* Generated replies belong to Momo's speech bubble above the character. */ .question-partners .ai-identity{min-width:0;width:100%} .question-partners .momo-answer-bubble{position:relative;box-sizing:border-box;width:100%;max-width:none;min-height:94px;margin:0 0 12px;padding:15px 16px;border:2px solid #90c9bb;border-radius:22px;background:#e1f2ed;display:block;align-content:center;text-align:center;font-size:clamp(20px,2.4vw,27px);line-height:1.4;word-break:keep-all} .momo-answer-bubble:after{content:'';position:absolute;bottom:-10px;left:calc(50% - 9px);width:16px;height:16px;background:#e1f2ed;border-right:2px solid #90c9bb;border-bottom:2px solid #90c9bb;transform:rotate(45deg)} .question-partners .momo-answer-bubble .generated-piece{display:inline;white-space:pre-wrap} @media(max-height:700px){.question-partners .momo-answer-bubble{min-height:76px;font-size:20px}} @media(max-width:480px){.question-partners .momo-answer-bubble{min-height:105px;font-size:18px;padding:12px 8px}} /* During selection keep the prompt compact; after reveal show a centered answer. */ #plaza-quiz.quiz-picking{top:68px;padding:10px 18px;width:min(820px,calc(100vw - 32px))} #plaza-quiz.quiz-picking h2{font-size:clamp(18px,2.1vw,25px);margin:4px 0} #plaza-quiz.quiz-picking small{font-size:12px} #plaza-quiz.quiz-picking p{font-size:15px;margin:4px 0} #plaza-quiz.quiz-picking .quiz-clock{margin-top:6px;gap:12px} #plaza-quiz.quiz-picking .quiz-clock strong{font-size:26px} #plaza-quiz.quiz-picking .quiz-clock button{font-size:15px;padding:4px 10px} #plaza-quiz.quiz-result{top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px 28px;box-shadow:0 5px #ae90ce,0 0 0 100vmax #10152655} #plaza-quiz.quiz-result .quiz-feedback{display:flex;flex-direction:column;align-items:center;gap:12px;margin:14px 0} #plaza-quiz.quiz-result .quiz-answer{font-size:36px;line-height:1.2} #plaza-quiz.quiz-result .momo-speaking{width:105px;height:140px;flex:none} #plaza-quiz.quiz-result p{font-size:19px;line-height:1.5;margin:0} #plaza-quiz.quiz-result button{width:min(280px,100%);margin-top:6px} #plaza-quiz.quiz-reveal-wait{visibility:hidden;pointer-events:none} @media(max-height:600px){#plaza-quiz.quiz-result{padding:16px 20px}#plaza-quiz.quiz-result .momo-speaking{width:75px;height:100px}#plaza-quiz.quiz-result .quiz-feedback{gap:8px;margin:8px 0}} #plaza-quiz.quiz-picking .quiz-clock{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);margin:0;padding:3px 12px;border-radius:12px;background:#342443;color:#fffaf2;white-space:nowrap} #plaza-quiz.quiz-picking .quiz-clock strong{color:#fffaf2} .llm-learning-demo{width:min(700px,100%);text-align:center}.demo-tabs,.demo-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.demo-tabs button,.demo-actions button{font-size:15px;padding:8px 12px!important;margin:0!important;width:auto!important}.demo-tabs [aria-pressed=true]{background:#7953ae;color:#fffaf2}.llm-learning-demo h3{font-size:25px;margin:16px 0}.demo-body{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center;background:#eee4f7;border-radius:22px;padding:20px}.demo-momo{display:flex;flex-direction:column;align-items:center;gap:8px}.demo-momo .momo-studying{width:100px;height:133px}.demo-momo b{font-size:18px}.demo-example{font-size:clamp(20px,2.8vw,30px);min-height:115px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;line-height:1.6;word-break:keep-all}.demo-content p{font-size:18px!important;line-height:1.6;min-height:58px;margin:10px 0 0!important}.llm-learning-demo>small{display:block;font-size:12px;color:#776387;margin:12px 0}.demo-chunk{background:#fffaf2;padding:4px 8px;border-radius:8px}.demo-odds{width:100%;display:grid;gap:6px;font-size:18px}.demo-odds span{display:grid;grid-template-columns:60px 1fr;text-align:left;align-items:center}.demo-odds b{background:linear-gradient(to right,#b997da var(--p),#fffaf2 var(--p));border-radius:8px;padding:2px 8px;font-size:16px}.weight-dials{display:flex;gap:16px;height:100px;align-items:end}.weight-dials i{display:block;width:34px;height:var(--level);background:#9671bd;border-radius:8px;animation:weights-adjust 1.4s ease-in-out 2 alternate}@keyframes weights-adjust{from{height:25%}to{height:var(--level)}}.demo-books{font-size:35px}@media(max-width:500px){.demo-body{grid-template-columns:70px minmax(0,1fr);padding:12px;gap:8px}.demo-momo .momo-studying{width:68px;height:91px}.demo-content p{font-size:16px!important}.llm-learning-demo h3{font-size:21px}.demo-tabs button,.demo-actions button{font-size:13px}}@media(prefers-reduced-motion:reduce){.weight-dials i{animation:none}} /* A shallow 3D stage: floating word blocks land on a raised answer platform. */ .word-stage-demo{width:min(740px,100%)}.word-stage{height:340px;position:relative;isolation:isolate;overflow:hidden;border-radius:24px;background:radial-gradient(ellipse at 50% 90%,#8263bd 0,#302655 65%,#211d3f 100%);perspective:700px;color:#fffaf2}.space-question{position:absolute;top:18px;left:50%;transform:translateX(-50%) rotateX(-5deg);width:max-content;max-width:90%;box-sizing:border-box;padding:13px 20px;border-radius:14px;background:#fffaf2;color:#513767;box-shadow:0 6px #c5a9dd,0 14px 24px #17112c66;font-size:clamp(18px,2.6vw,25px);z-index:4}.word-orbit{position:absolute;top:100px;left:29%;right:4%;display:flex;justify-content:center;gap:18px;z-index:6}.word-block{display:inline-block;padding:12px 17px;border-radius:12px;background:linear-gradient(140deg,#fffdf7,#e7d5fb);box-shadow:0 7px #a78ac9,5px 12px 12px #170e324d;color:#593a75;font-size:24px;white-space:nowrap;transform:rotate(-4deg);transition:opacity .3s}.word-block:nth-child(2){transform:translateY(12px) rotate(3deg)}.word-block:nth-child(3){transform:rotate(5deg)}.word-block.chosen{background:#ffe28b;box-shadow:0 7px #ba9142,0 0 24px #ffdf9499}.stage-momo{position:absolute;left:4%;bottom:45px;display:flex;align-items:center;flex-direction:column;z-index:4}.stage-momo .momo-studying,.stage-momo .momo-speaking{display:block;width:115px;height:154px}.stage-momo b{font-size:16px;color:#fffaf2}.answer-platform{position:absolute;left:32%;right:9%;bottom:40px;display:flex;justify-content:center;gap:10px;padding:18px 15px 22px;background:linear-gradient(#b29ad7,#8d70b9);border:2px solid #d1b9ef;border-radius:18px;box-shadow:0 12px #62477d,0 20px 20px #140c3655;z-index:3;transform:rotateX(8deg)}.answer-slot{padding:9px 12px;min-width:64px;min-height:45px;box-sizing:border-box;border:2px dashed #d8c9ee;border-radius:10px;color:#dfcfee;font-size:24px}.answer-slot.filled{background:#ffe28b;color:#513767;border:2px solid #ffedb4;box-shadow:0 5px #b79449}.stage-floor{position:absolute;left:-20%;right:-20%;bottom:-120px;height:270px;border-radius:50%;background:repeating-linear-gradient(90deg,transparent 0 54px,#d3b7f322 55px 56px),repeating-linear-gradient(0deg,#9b80b733 0 44px,#d3b7f333 45px 46px);transform:rotateX(55deg);z-index:0}.stage-caption{font-size:19px!important;line-height:1.5;margin:14px 0!important;min-height:2.8em;align-content:center}.stage-controls{display:flex;gap:8px;justify-content:center}.stage-controls button{font-size:18px;padding:10px 18px!important;margin:0!important}.stage-controls [hidden]{display:none!important}.word-stage-demo>small{font-size:12px;display:block;margin:10px 0;color:#7d668d}@media(max-width:500px){.word-stage{height:300px}.word-orbit{left:25%;gap:9px;top:100px}.word-block{font-size:19px;padding:9px 11px}.stage-momo .momo-studying,.stage-momo .momo-speaking{width:80px;height:107px}.answer-platform{left:28%;right:4%;padding:12px 8px 18px}.answer-slot{font-size:20px;min-width:55px}.space-question{padding:10px;font-size:18px}.stage-caption{font-size:17px!important}}@media(max-height:650px){.word-stage{height:270px}.stage-momo{bottom:28px}.stage-momo .momo-studying,.stage-momo .momo-speaking{width:82px;height:110px}.word-orbit{top:88px}.answer-platform{bottom:25px}.word-stage-demo .stage-caption{margin:8px 0!important}} /* Labeled audio control matches the neighboring map controls. */ #controls .sound-button{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:98px;height:46px;padding:0 16px;box-sizing:border-box;border:1px solid #e8d9ad;border-radius:15px;background:#fff8e7;color:#473553;font:inherit;font-size:16px;line-height:1;box-shadow:0 3px #b99dcb;white-space:nowrap} #controls .sound-button svg{display:block;width:22px;height:22px;flex:none} #controls .sound-button:hover,#controls .sound-button[aria-expanded=true]{background:#eee3f8;border-color:#b295cd} #controls .sound-button:focus-visible{outline:3px solid #8c60bb;outline-offset:3px} #controls .sound-button[data-muted=true]{color:#75657e} #controls .sound-panel{width:260px;max-width:calc(100vw - 32px);padding:18px;background:#fffaf2;border:2px solid #b99dcb;border-radius:18px;color:#503464;box-shadow:0 5px #a88cbf,0 12px 25px #20142b33} #controls .sound-panel input{accent-color:#7952b1;min-height:32px;margin:0;cursor:pointer} #controls .sound-panel output{color:#654580;font-size:14px;font-variant-numeric:tabular-nums} .word-stage .word-orbit[hidden],.number-engine[hidden]{display:none!important}.number-engine{position:absolute;z-index:8;top:92px;left:27%;right:3%;padding:12px;box-sizing:border-box;border:1px solid #c7afff;border-radius:16px;background:linear-gradient(145deg,#3e3261,#29213f);box-shadow:0 6px #171329,0 0 25px #b998ff44;color:#fffaf2;min-height:145px}.engine-heading{font-size:15px;margin:0 0 12px;color:#ffe8a6}.vector-input{display:flex;gap:6px;justify-content:center}.vector-input>span{padding:8px 5px;background:#eee4f7;color:#503464;border-radius:9px;font-size:18px;animation:vector-enter 1.2s ease both}.vector-input small{display:block;font:11px monospace;margin-top:9px;white-space:nowrap}.number-layers{display:flex;align-items:center;justify-content:center;gap:6px}.number-layer{border:1px solid #8671a4;border-radius:9px;padding:7px;min-width:65px;transition:background .4s,box-shadow .4s}.number-layer small{font-size:11px;color:#d6c5eb;display:block}.number-layer b{font:13px monospace;display:block;margin-top:7px;white-space:pre}.number-layer.active{background:#7355a1;box-shadow:0 0 15px #ceadff;border-color:#ffe7a4}.layer-arrow{font-size:19px;color:#dbc2ff}.fixed-weights{display:block;font-size:11px;color:#dbcde9;margin-top:10px}.probability-convert{padding:20px 0;font-size:17px}.word-block small{display:block;font:14px Rounded,sans-serif;line-height:1.3;margin-top:4px}.word-block i{display:block;margin-top:4px;height:4px;border-radius:4px;background:linear-gradient(to right,#9672be var(--prob),#ffffff var(--prob))}@keyframes vector-enter{from{opacity:0;transform:translateY(-20px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:500px){.number-engine{left:23%;right:2%;padding:9px;top:83px}.engine-heading{font-size:12px}.vector-input>span{font-size:15px;padding:7px 3px}.vector-input small{font-size:8px}.number-layer{min-width:0;padding:5px}.number-layer b{font-size:10px}.number-layers{gap:3px}.number-layer small{font-size:9px}.layer-arrow{font-size:13px}.probability-convert{font-size:14px}}@media(prefers-reduced-motion:reduce){.vector-input>span{animation:none}.number-layer{transition:none}} /* Mouth movement follows prerecorded speech, including pause and completion. */ [data-momo-speaking="false"] .momo-speaking{animation:none;background-position:0 0} @media(prefers-reduced-motion:no-preference){[data-momo-speaking="true"] .momo-speaking{background-position:0 100%;animation:momo-reply .5s steps(1) infinite}} /* Timer controls retain contrast against their light button surface. */ #plaza-quiz.quiz-picking .quiz-clock button{color:#4b315f;background:#fff8e9;border-color:#d4c5ad;font-weight:700;opacity:1} #plaza-quiz.quiz-picking .quiz-clock button:hover{background:#ffe9aa;color:#4b315f} #plaza-quiz .quiz-feedback p{white-space:pre-line;word-break:keep-all;overflow-wrap:break-word} .recap-demo{max-width:900px;margin:20px auto;display:grid;gap:18px}.recap-demo-candidates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.recap-demo-candidate{padding:18px;background:#eee5f7;border:3px solid transparent;border-radius:18px;display:grid;gap:10px;font-size:clamp(20px,2.5vw,34px)}.recap-demo-candidate div{height:12px;background:#d8cbe7;border-radius:9px;overflow:hidden}.recap-demo-candidate i{display:block;height:100%;background:#9570be}.recap-demo-candidate.selected{border-color:#d8ad3b;background:#fff0ba}.recap-demo-caption{font-size:clamp(18px,2vw,28px);line-height:1.5;margin:0}.recap-demo-note{display:block;color:#7d6c88;line-height:1.5}.recap-more{margin-top:12px;text-align:left}.recap-more summary{cursor:pointer;color:#765194;padding:10px}.recap-more[open]{background:#f0e8f7;padding:14px;border-radius:18px}.recap-more .word-stage-demo{margin-top:15px} #brief .brief-action{padding:0;overflow:hidden;background:transparent;border:0}#brief .brief-simulation{display:block;width:100%;aspect-ratio:800/360;border-radius:18px;background:#15213e}#brief .brief-action>p{font-size:clamp(18px,2.2vw,25px);line-height:1.4;margin:14px 8px 18px}#brief .brief-action>span{display:none} .recap-calculation .word-stage{max-height:480px;aspect-ratio:1.65}.recap-calculation .stage-caption{margin:16px 0;font-size:clamp(18px,2vw,25px);line-height:1.5}.recap-calculation .stage-controls{margin:12px 0}.recap-calculation>small{display:block;font-size:14px;line-height:1.5;margin:12px 0}@media(max-width:600px){.recap-calculation .word-stage{aspect-ratio:1.2}.recap-calculation .stage-caption{font-size:18px}} /* Keep consecutive evidence dialogue pages in a stable frame. */ #evidence-hud.learning-centered{min-height:min(480px,calc(100dvh - 48px));} #evidence-hud.learning-centered>.evidence-answer{margin-top:8px;margin-bottom:8px;} #evidence-hud.learning-centered>[data-next]{margin-top:auto;} #evidence-hud.learning-centered.lulu-card-modal{width:min(740px,calc(100vw - 48px));} /* Draw attention once at the first story choice, without blocking movement. */ #speech.first-sentence-focus{z-index:20;animation:first-sentence-focus 3s ease-out both;transform-origin:center top} @keyframes first-sentence-focus{ 0%,12%{transform:translateX(-50%) scale(1);box-shadow:0 0 0 100vmax #080f2655,0 0 0 5px #ffe086;border-color:#e99547} 28%,68%{transform:translateX(-50%) scale(1.06);box-shadow:0 0 0 100vmax #080f2655,0 0 26px 7px #ffe08699;border-color:#e99547} 100%{transform:translateX(-50%) scale(1);box-shadow:0 5px 0 #66478033;border-color:#bd98e6} } @media(prefers-reduced-motion:reduce){ #speech.first-sentence-focus{animation:first-sentence-focus-still 3s linear both} @keyframes first-sentence-focus-still{0%,90%{border-color:#e99547;box-shadow:0 0 0 3px #ffe086}100%{border-color:#bd98e6;box-shadow:0 5px 0 #66478033}} } /* Center the calculation stage and every explanatory line inside its modal. */ .recap-demo.recap-calculation.word-stage-demo{margin:20px auto;text-align:center;justify-items:stretch} .recap-calculation .word-stage{width:100%;margin-inline:auto} .recap-calculation .stage-caption,.recap-calculation>small{text-align:center;width:100%} .recap-calculation .stage-controls{justify-content:center} /* Learned evidence belongs to Momo's column, beneath his answer and identity. */ #evidence-hud .question-partners .learned-recall{box-sizing:border-box;width:100%;margin-top:8px;padding:12px 14px;text-align:center} #evidence-hud .question-partners .learned-recall p{font-size:clamp(17px,1.9vw,23px);line-height:1.6;margin:8px 0;word-break:keep-all} #evidence-hud .question-partners .learned-recall>span{display:block;font-size:14px;line-height:1.4} #evidence-hud .question-partners .learned-recall small{font-size:14px} /* Keep farewell bubbles, feet, and name labels on shared horizontal lines. */ .evidence-farewell{align-items:stretch} .evidence-farewell>div{display:grid;grid-template-rows:1fr 170px auto;justify-items:center;align-items:end} .evidence-farewell .farewell-bubble{height:100%;min-height:190px;margin:0 0 14px;align-self:stretch} .evidence-farewell .momo-speaking,.evidence-farewell .lulu-greeting{height:160px;align-self:end} .evidence-farewell b{margin-top:8px;line-height:1.4} @media(max-width:500px){.evidence-farewell>div{grid-template-rows:1fr 130px auto}.evidence-farewell .farewell-bubble{min-height:190px}.evidence-farewell .momo-speaking,.evidence-farewell .lulu-greeting{height:120px}} #brief .brief-action strong{color:#7750b7} .arrival-pause span{white-space:nowrap} #speech #mission .live-timer button{min-width:44px;min-height:44px;touch-action:manipulation} /* Leave more desktop space for the islands while keeping the guide above them. */ @media(min-width:1024px){ #evidence-hud:not(.learning-centered):not([data-reading="true"]){top:68px;padding:6px 18px;width:max-content;max-width:calc(100vw - 48px)} #evidence-hud:not([data-reading="true"]) .evidence-answer{font-size:clamp(20px,1.8vw,26px);line-height:1.3;margin:4px 0} } #evidence-hud.learning-centered.centered-question{display:grid;grid-template-rows:1fr auto;gap:24px} #evidence-hud.learning-centered.centered-question>.evidence-answer{align-self:center;justify-self:center;margin:0;max-width:100%;text-align:center;word-break:keep-all;line-height:1.5} #evidence-hud.learning-centered.centered-question>[data-next]{margin:0 auto;align-self:end} /* Main explanation and supporting visual read as one centered group. */ #evidence-hud.learning-centered.lesson-hall-simple{ width:min(900px,calc(100vw - 48px));height:min(620px,calc(100dvh - 48px)); padding:32px;gap:0;justify-content:stretch; } #evidence-hud.lesson-hall-simple .lesson-content{ display:flex;flex-direction:column;align-items:center;justify-content:center; flex:1;width:100%;gap:30px;min-height:min-content;padding:10px 0 24px; } #evidence-hud.learning-centered .evidence-answer{ font-size:clamp(32px,4vw,42px);line-height:1.45;word-break:keep-all; } #evidence-hud.lesson-hall-simple .evidence-answer{margin:0;max-width:760px} #evidence-hud.lesson-hall-simple .hall-scene{margin:0;min-height:0;gap:24px;width:100%} #evidence-hud.lesson-hall-simple .hall-evidence{font-size:21px} #evidence-hud.lesson-hall-simple .hall-evidence small{font-size:18px} #evidence-hud.lesson-hall-simple .hall-sentence{font-size:clamp(27px,3.3vw,38px)} #evidence-hud.lesson-hall-simple .lesson-navigation{margin-top:0} @media(max-width:600px){ #evidence-hud.learning-centered.lesson-hall-simple{padding:24px 18px;width:calc(100vw - 24px)} #evidence-hud.learning-centered .evidence-answer{font-size:26px} #evidence-hud.lesson-hall-simple .lesson-content{gap:24px;padding-bottom:18px} #evidence-hud.lesson-hall-simple .hall-evidence{font-size:18px;padding:10px 14px} #evidence-hud.lesson-hall-simple .hall-evidence small{font-size:16px} } @media(max-height:600px){ #evidence-hud.learning-centered.lesson-hall-simple{padding:18px 24px} #evidence-hud.lesson-hall-simple .lesson-content{gap:18px;padding:0 0 12px} #evidence-hud.lesson-hall-simple .evidence-answer{font-size:28px} } /* Preserve authored meaning-based line breaks, with natural wrapping on small screens. */ #evidence-hud .evidence-answer{white-space:pre-line;text-wrap:balance} /* Compact shared audio control on every explanation modal. */ :is(#brief,#ending-card,#evidence-hud,#plaza-quiz) .modal-audio{position:absolute;top:14px;right:16px;z-index:30;pointer-events:auto} #brief .modal-audio{right:54px} :is(#brief,#ending-card,#evidence-hud,#plaza-quiz) .modal-audio .sound-button{ display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px; padding:10px;margin:0;border:1px solid #d6c8df;border-radius:12px; background:#fffaf2;color:#73558b;box-shadow:none; } :is(#brief,#ending-card,#evidence-hud,#plaza-quiz) .modal-audio .sound-button svg{display:block;width:22px;height:22px} :is(#brief,#ending-card,#evidence-hud,#plaza-quiz) .modal-audio .sound-panel{ top:calc(100% + 8px);right:0;left:auto;bottom:auto;width:260px;max-width:calc(100vw - 48px); padding:18px;background:#fffaf2;color:#503464;border:1px solid #c4aed7;border-radius:16px; box-shadow:0 8px 24px #28123d26; } :is(#brief,#ending-card,#evidence-hud,#plaza-quiz) .modal-audio .sound-panel label{display:grid;grid-template-columns:auto minmax(0,1fr) 4ch;gap:10px;margin:0;font-size:15px} :is(#brief,#ending-card,#evidence-hud,#plaza-quiz) .modal-audio input{width:100%;min-width:0;min-height:32px;accent-color:#8055b1;margin:0;pointer-events:auto} :is(#brief,#ending-card,#evidence-hud,#plaza-quiz) .modal-audio output{font-size:14px;text-align:right} :is(#brief,#ending-card,#evidence-hud,#plaza-quiz) .modal-audio .sound-mute{display:block;width:100%;min-height:44px;margin:10px 0 0;padding:8px 12px;border:1px solid #d6c8df;border-radius:10px;background:#f0e8f7;color:#654777;font-size:15px;box-shadow:none} :is(#brief,#ending-card,#evidence-hud,#plaza-quiz) .modal-audio .sound-mute[aria-pressed=true]{background:#8055b1;color:white;border-color:#72459f} #plaza-quiz:not(.quiz-picking){padding-top:66px} /* Connect the reader, the provided context, and the fact used in the next answer. */ .recheck-reading{align-items:center;gap:28px} .recheck-reading .momo-study-character{width:165px;flex-shrink:0;text-align:center} .reference-momo-message{font-size:18px;line-height:1.5;color:#654777;background:white;border:1px solid #d8c8e5;border-radius:16px;padding:14px;margin:0 0 14px;word-break:keep-all} .reference-progress{display:block;margin-top:10px;font-size:14px;color:#80668f} .reference-document{flex:1;max-width:560px;min-width:0;text-align:left} .reference-document h3{margin:0 0 12px;font-size:20px;color:#73558b} .reference-document .recheck-sentences{max-width:none;min-height:0} .reference-document .recheck-sentences p{display:flex;align-items:baseline;gap:12px;margin:8px 0;padding:12px 14px;font-size:21px;border:2px solid transparent;background:#f0e8f7;transition:background .2s,border-color .2s} .reference-line-number{font-size:13px;color:#9a82ab;min-width:12px} .reference-document .recheck-sentences p.active{background:#fff2ca;border-color:#e7bc65} .reference-document .recheck-sentences p.verified{background:#f5efdd;border-color:#9bcbb9} .reference-document mark{background:#ffe08c;color:#503464;border-radius:5px;padding:2px 3px} .reference-explanation,.reference-example-note{font-size:14px;line-height:1.5;color:#8b7699;text-align:center;margin:10px 0} #evidence-hud .reference-momo-message{font-size:18px} @media(max-width:600px){.recheck-reading{gap:14px}.recheck-reading .momo-study-character{width:95px}.reference-document h3{font-size:17px}.reference-document .recheck-sentences p{font-size:17px;padding:9px;gap:7px}#evidence-hud .reference-momo-message{font-size:15px;padding:10px}.reference-explanation{font-size:12px}.reference-progress{font-size:12px}} #evidence-hud.lesson-reference-reading{width:min(900px,calc(100vw - 48px));gap:18px} #evidence-hud.lesson-reference-reading .hall-scene{margin:8px auto} #evidence-hud.lesson-reference-reading .lesson-next{font-size:16px;letter-spacing:-.5px;white-space:nowrap;padding:10px 12px} #evidence-hud.lesson-reference-reading .evidence-answer{margin-bottom:12px} /* Keep modal utility actions on one clear row above the illustration. */ #brief:has(.modal-audio){padding-top:76px} #brief .modal-audio{top:16px;right:76px} #brief .dialog-close{top:16px;right:24px;width:44px;height:44px;min-height:44px;display:grid;place-items:center;padding:0;margin:0;border:1px solid #d6c8df;border-radius:12px;background:#fffaf2;color:#73558b;line-height:1;font-size:27px;box-shadow:none} #brief .dialog-close:hover,#brief .modal-audio .sound-button:hover{background:#eee4f7} @media(max-width:600px){#brief:has(.modal-audio){padding-top:72px}#brief .dialog-close{right:18px}#brief .modal-audio{right:70px}} /* The calculation demonstration owns the single forward action. */ .navigation-action-demo .stage-controls{display:none} .navigation-action-demo:not([data-started]) .stage-caption{display:none} #ending-card[data-replay=true] .focus-heading{margin:14px 0 22px} #ending-card[data-replay=true] .focus-heading h3{min-height:0;font-size:clamp(25px,3vw,34px)} .navigation-action-demo>small{font-size:13px;color:#8b7699;margin:12px 0 0} #ending-card .lesson-navigation:has(.lesson-next){grid-template-columns:minmax(90px,1fr) minmax(100px,1fr) minmax(180px,1.6fr)} #ending-card #replay-next{font-size:17px;min-width:0;white-space:normal;word-break:keep-all} /* Keep the question above the generation stage, separate from answer candidates. */ #ending-card[data-replay=true] .generation-heading{display:flex;flex-direction:column;align-items:center;gap:12px;margin:8px 0 22px} .generation-question{box-sizing:border-box;max-width:100%;padding:14px 24px;border:1px solid #d8c7e6;border-radius:18px;background:#f0e7f7;color:#493355;font-size:clamp(23px,3vw,32px);line-height:1.45;word-break:keep-all;text-wrap:balance} .generation-question>span{font-weight:800;color:#7948ae;margin-right:6px} #ending-card[data-replay=true] .generation-heading h3{font-size:clamp(19px,2.3vw,25px);color:#826491} .navigation-action-demo .word-orbit{top:54px} @media(max-width:500px){.generation-question{padding:12px 16px}.navigation-action-demo .word-orbit{top:48px}} /* Stepped generation: one visual and one spoken explanation per page. */ .manual-generation .generation-phase{font-size:14px;color:#9379a3;margin:0 0 10px;text-align:center} .manual-generation .word-orbit{top:48px} .manual-generation .stage-caption{font-family:Rounded,sans-serif;font-size:clamp(24px,3vw,32px)!important;font-weight:700;color:#7442ad;line-height:1.45;min-height:2.9em;margin:20px 0 8px!important;word-break:keep-all;text-wrap:balance} .manual-generation>small{font-size:12px;color:#947e9e} .generation-step-count{font-size:13px;color:#9379a3;display:block;text-align:center} #ending-card:has(.manual-generation) .focus-heading{margin-bottom:14px} #ending-card:has(.manual-generation) .lesson-navigation{margin-top:18px} @media(max-height:780px){.manual-generation .word-stage{height:270px}.manual-generation .stage-momo{bottom:28px}.manual-generation .stage-momo>span{width:82px;height:110px}.manual-generation .answer-platform{bottom:25px}.manual-generation .stage-caption{font-size:23px!important;margin:14px 0 4px!important}.manual-generation .generation-phase{margin-bottom:6px}} #ending-card:has(.manual-generation) #story-receipt>.focus-progress{display:none} #ending-card:has(.manual-generation) .generation-heading{gap:8px;margin:0 0 12px} #ending-card:has(.manual-generation) .generation-heading h3{margin:0} #ending-card:has(.manual-generation) .generation-question{padding:10px 20px;font-size:clamp(22px,2.5vw,29px)} .recap-demo.recap-calculation.word-stage-demo.manual-generation{margin:0 auto;gap:6px} .manual-generation .stage-caption{margin:12px 0 0!important;min-height:2.9em} .manual-generation>small{margin:2px 0!important} @media(max-height:780px){#ending-card:has(.manual-generation){padding:20px 28px}.manual-generation .word-stage{height:240px}.manual-generation .number-engine{top:42px}.manual-generation .word-orbit{top:32px}.manual-generation .answer-platform{bottom:25px;padding:12px 10px 18px}.manual-generation .stage-caption{font-size:24px!important}#ending-card:has(.manual-generation) .lesson-navigation{margin-top:12px}} .manual-generation .number-engine{top:22px;min-height:108px;padding:10px} .manual-generation .vector-input>span{animation:none} .manual-generation .engine-heading{margin-bottom:8px} .manual-generation .number-layer{padding:6px} .manual-generation .fixed-weights{margin-top:6px} @media(max-width:500px){ #ending-card:has(.manual-generation){padding:62px 16px 18px} .manual-generation .word-stage{height:250px} #ending-card:has(.manual-generation) .lesson-navigation{grid-template-columns:1fr 1fr 1.2fr;gap:6px} #ending-card:has(.manual-generation) .lesson-navigation>.lesson-previous,#ending-card:has(.manual-generation) #replay-next{min-width:0;width:100%;font-size:16px;padding:10px 6px} #ending-card:has(.manual-generation) .lesson-replay{font-size:13px;white-space:normal} .manual-generation .stage-caption{font-size:24px!important} } @media(max-width:500px){ #ending-card[data-replay=true]:has(.manual-generation){padding:62px 16px 18px} .manual-generation .vector-input>span{min-width:0;flex:1;text-align:center} .manual-generation .vector-input small{white-space:normal;font-size:9px;line-height:1.5} .manual-generation .number-layer b{font-size:9px} } @media(max-width:500px){#game #ending-card[data-replay=true]:has(.manual-generation){padding:62px 16px 18px}} /* One question, one visual, and one core sentence. The introduction appears once. */ #story-receipt[data-generation-started=true] .generation-heading h3{display:none} #game #ending-card[data-replay=true]:has(.manual-generation){height:min(680px,calc(100dvh - 48px))} #game #ending-card:has(.manual-generation) #story-receipt{height:100%;flex-wrap:nowrap;min-width:0} #game #ending-card:has(.manual-generation) #story-receipt>.focus-heading{flex-shrink:0} .recap-demo.recap-calculation.word-stage-demo.manual-generation{flex:1;min-height:0;min-width:0;width:100%;grid-template-rows:minmax(200px,1fr) auto auto;align-content:center} .manual-generation .word-stage{height:100%;min-height:200px;max-height:340px;aspect-ratio:auto;width:100%} .manual-generation .stage-caption{min-height:0} #game #ending-card:has(.manual-generation) .lesson-navigation{margin-top:16px;flex-shrink:0;min-width:0;width:100%} .manual-generation .number-engine{display:grid;align-content:center} .manual-generation .vector-input>span{min-width:0;flex:1;text-align:center} .manual-generation .vector-input small{white-space:normal;font-size:clamp(9px,1.3vw,11px);line-height:1.5} /* The introductory modal keeps audio in its corner while only the lesson scrolls. */ #brief:has(.brief-content){padding:0;overflow:hidden} #brief .brief-content{margin-top:72px;padding:0 28px 28px;max-height:calc(82dvh - 72px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable} #brief .modal-audio{top:16px;right:16px} @media(max-width:600px){#brief .brief-content{padding:0 18px 20px;margin-top:68px;max-height:calc(82dvh - 68px)}#brief .modal-audio{top:12px;right:12px}} #brief[data-arrival] .brief-content>:not(.alien-arrival){display:none!important} .scene-loading{position:absolute;z-index:60;inset:50% auto auto 50%;transform:translate(-50%,-50%);padding:24px 32px;border-radius:20px;background:#fff9f0;color:#573975;box-shadow:0 8px 30px #10082970;text-align:center;max-width:calc(100% - 32px)} .scene-loading[hidden]{display:none} /* Content controls stay readable and separate on narrow screens. */ .character-choice.unavailable{opacity:.45;cursor:default} .evidence-jump kbd{margin-left:6px;font-size:.8em} @media(max-width:600px),(pointer:coarse) and (max-width:1024px){ .header-actions{gap:4px}.header-actions button{padding:8px;font-size:11px} #game #speech{top:78px;left:12px;right:12px;width:calc(100% - 24px);padding:12px;transform:none} #game #speech #speech-text{font-size:23px;line-height:1.35} #game #speech #speech-prompt{font-size:17px;margin:8px 0} #game:has(#speech:not([hidden])) #speech #mission{position:static;transform:none;width:100%;max-width:100%;padding:0;margin-top:10px;background:none;border:0;box-shadow:none} #game #speech .mission-meta{justify-content:center;gap:8px;font-size:14px} #game #speech #mission span{color:#5e3f79} #game #speech #mission #timer{font-size:22px;color:#5e3f79} #game #speech .live-timer{gap:6px} #game #speech .live-timer button{min-width:40px;min-height:40px;padding:6px} #game #evidence-hud:not([data-reading="true"]){top:78px;width:calc(100% - 24px);left:12px;transform:none;padding:10px 12px} #game #evidence-hud:not([data-reading="true"]) .evidence-answer{font-size:20px;line-height:1.4;margin:0} #game .touch-controls:not([hidden]){display:grid!important;left:12px;right:auto;bottom:98px;gap:4px} #game .touch-controls button{width:42px;height:42px;padding:6px} .evidence-jump{left:auto!important;right:12px;bottom:104px!important;transform:none!important;width:172px;max-width:calc(100vw - 164px)!important;padding:12px 8px!important;font-size:16px;line-height:1.4} .evidence-jump kbd{display:none} } @media(pointer:coarse){.evidence-jump kbd{display:none}} @media(max-width:600px) and (prefers-reduced-motion:no-preference){ #game #speech.first-sentence-focus{animation:first-sentence-focus-mobile 3s ease-out both} @keyframes first-sentence-focus-mobile{0%,75%{transform:scale(1.015);border-color:#e99547;box-shadow:0 0 0 3px #ffe086}100%{transform:none;border-color:#bd98e6;box-shadow:0 5px 0 #66478033}} } /* Fit the lesson's contents, rather than hiding horizontal overflow. */ @media(max-width:600px){ #game #ending-card[data-replay=true] #story-receipt{min-width:0;width:100%} #ending-card[data-replay=true] #story-receipt>*{min-width:0;max-width:100%} #ending-card .friends-introduction{width:100%;gap:16px;height:180px} #ending-card .friends-introduction>div{min-width:0;flex:1;max-width:50%} #ending-card .friends-introduction .momo-speaking{width:100px;max-width:100%;height:133px} #ending-card .friends-introduction .lulu-walk{width:100%;height:150px;max-width:150px;object-fit:contain} #ending-card .friends-introduction b{font-size:16px} #game :is(#brief,#ending-card,#evidence-hud) .lesson-navigation{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:6px} #game :is(#brief,#ending-card,#evidence-hud) .lesson-navigation>*{min-width:0;max-width:100%} #game :is(#brief,#ending-card,#evidence-hud) .lesson-navigation button{min-width:0;width:100%;padding:10px 6px;font-size:16px;white-space:normal;word-break:keep-all} #game :is(#brief,#ending-card,#evidence-hud) .lesson-navigation .lesson-replay{font-size:14px} } @media(max-width:380px){ .manual-generation .number-engine{left:8px;right:8px} #ending-card .voyage-invite{gap:12px} #ending-card .voyage-invite>*{width:42%;max-width:42%;object-fit:contain} #evidence-hud .question-partners :is(.lulu-greeting,.momo-speaking,.momo-studying){max-width:100%;object-fit:contain} #evidence-hud .lulu-card-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;gap:10px} #evidence-hud .lulu-card-pair>*{min-width:0;margin:0} #evidence-hud .lulu-card-pair :is(canvas,img){max-width:100%;object-fit:contain} } @media(pointer:coarse) and (max-width:1024px){ #game .move-help{display:none} } @media(pointer:coarse) and (max-height:500px) and (max-width:1024px){ #game #speech{top:70px;padding:6px 12px} #game #speech #speech-text{font-size:20px} #game #speech #speech-prompt{font-size:16px;margin:4px 0} #game #speech #mission{margin-top:4px} #game #speech .live-timer button{min-height:32px;min-width:36px} } @media(pointer:coarse) and (max-height:500px) and (min-width:601px) and (max-width:1024px){ #game #speech{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center} #game #speech>span{display:none} #game #speech #speech-text{grid-column:1;grid-row:1} #game #speech #speech-prompt{grid-column:1;grid-row:2;margin:0} #game:has(#speech:not([hidden])) #speech #mission{grid-column:2;grid-row:1 / 3;width:auto;margin:0} #game #speech .mission-meta{flex-direction:column;gap:2px} } @media(max-width:600px){ #game #evidence-hud.learning-centered{padding-top:68px} #game #plaza-quiz:is(.quiz-result,.quiz-finale){padding-top:68px} #game :is(#brief,#ending-card,#evidence-hud) .lesson-navigation:not(:has(.lesson-next)){grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #ending-card .friends-introduction.lulu-walk-enter{overflow:hidden} }