:root{--ink:#173d54;--muted:#59758a;--blue:#267bbb;--sky:#edf8fc;--line:#d6e8ef;--gold:#ffd46d;--green:#247f68;--font:'Noto Sans TC Variable','PingFang TC','Microsoft JhengHei',sans-serif;font-family:var(--font);color:var(--ink);background:#edf8fc;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0%,#fff7df,transparent 50%),linear-gradient(#eef9fc,#f6faf6);min-height:100svh}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #efab32;outline-offset:4px}[hidden]{display:none!important}.topbar{height:76px;max-width:940px;margin:auto;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;gap:9px;align-items:center;font-weight:850;font-size:17px;white-space:nowrap}.brand-icon{display:grid;place-items:center;width:38px;height:38px;background:#fff;border:2px solid #277cae;border-radius:13px;transform:rotate(-5deg);font-size:24px;color:#277cae}.tools{display:flex;gap:7px}.tool{background:#fff;border:1px solid var(--line);border-radius:14px;min-height:46px;min-width:48px;padding:8px 11px;font-size:15px;font-weight:750;box-shadow:0 3px 0 #dfecf1}.audio-panel{position:fixed;z-index:30;right:max(16px,calc((100vw - 930px)/2));top:75px;width:278px;padding:20px;border:1px solid var(--line);border-radius:20px;background:white;box-shadow:0 14px 40px #204c5426}.audio-panel label{display:flex;justify-content:space-between;font-size:16px;font-weight:700}.audio-panel input{width:100%;height:45px;accent-color:var(--blue)}.audio-panel .secondary{width:100%;font-size:16px;min-height:44px}main{max-width:560px;margin:0 auto;padding:5px 16px 20px;outline:0}footer{text-align:center;padding:4px 20px 28px;font-size:13px;color:#6b8292;line-height:1.8}footer small{font-size:12px}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;color:#538092}.primary,.secondary{display:block;width:100%;min-height:56px;border-radius:17px;font-weight:850;line-height:1.35;padding:13px 18px;font-size:19px;border:0}.primary{background:var(--gold);color:#493e1b;box-shadow:0 5px 0 #eeb74c;transition:transform .15s,box-shadow .15s}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #eeb74c}.primary.blue{background:#287cba;color:white;box-shadow:0 5px 0 #176196}.secondary{background:#fff;border:1px solid var(--line);box-shadow:0 3px 0 #e1ecf0;font-size:17px}.quiet-button{padding:9px 14px;background:transparent;border:0;color:#527688;font-size:15px;min-height:44px}.landing{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 12px 38px #45676c1c;background:#fff8eb}.landing .cover{display:block;width:100%;height:auto}.landing-title{position:absolute;top:5%;left:8%;right:8%;text-align:center}.landing-title .eyebrow{font-size:11px}.landing-title h1{font-size:clamp(30px,7.7vw,42px);line-height:1.3;margin:6px 0 4px;font-weight:900;color:#125c89;text-shadow:0 2px white}.landing-title p{margin:4px 0;font-size:15px;font-weight:600}.landing-action{position:absolute;bottom:5%;left:9%;right:9%;text-align:center}.landing-action .primary{max-width:300px;margin:auto}.landing-action .continue-note{font-size:13px;margin:13px 0 0;color:#426a7c;font-weight:650}.journey-strip{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px 2px 4px;font-size:13px;color:#536b79}.journey-strip b{color:#216487;font-size:17px}.progress-panel{background:white;border:1px solid var(--line);border-radius:20px;padding:13px 16px;margin:3px 0 14px;box-shadow:0 4px 0 #e6eff3}.progress-row{display:flex;justify-content:space-between;font-size:14px;font-weight:700;margin-bottom:8px}.progress-track{height:9px;overflow:hidden;border-radius:10px;background:#e9f0f2}.progress-fill{height:100%;background:linear-gradient(90deg,#2b94bf,#65b9a0);border-radius:10px;transition:width .4s}.level-dots{display:flex;justify-content:space-between;gap:5px;margin-top:10px}.level-dot{display:grid;place-items:center;flex:1;background:#edf3f6;border-radius:9px;min-height:29px;font-size:16px;color:#8b9ba5}.level-dot.active{background:#d7edfa;color:#176196;outline:2px solid #75b0d3}.level-dot.done{background:#e0f2df;color:#39763c}.scene{overflow:hidden;border-radius:24px;position:relative;border:1px solid #deedf1;background:#fff}.scene img{display:block;width:100%;height:auto}.scene-title{position:absolute;top:5%;left:9%;right:9%;text-align:center}.scene-title h1{font-size:25px;line-height:1.3;margin:3px 0;font-weight:850}.scene-title .eyebrow{font-size:12px;letter-spacing:.06em}.mission-box{position:relative;background:white;border-radius:22px;padding:22px;margin-top:14px;border:1px solid var(--line);text-align:center}.mission-box p{font-size:17px;line-height:1.8;margin:0 0 17px}.mission-words{display:flex;gap:9px;justify-content:center;margin:0 0 20px}.mission-words span{display:grid;place-items:center;border:1px solid #cee1eb;background:#f0f8fc;width:45px;height:49px;border-radius:11px;font-size:27px}.question-scene{margin-bottom:13px}.question-scene img{max-height:190px;width:100%;object-fit:cover;object-position:center 62%}.question-scene .scene-title{top:6%;left:6%;text-align:left}.question-scene .scene-title h1{font-size:18px;display:inline-block;padding:4px 9px;background:#fffef5e8;border-radius:10px}.question-scene .scene-title .eyebrow{display:none}.question-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 6px 0 #e3edf2}.question-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#617c8e;font-weight:700}.question-type{background:#eef5fa;padding:5px 9px;border-radius:8px}.question-head{display:flex;align-items:center;gap:14px;margin:15px 0}.word-tile{display:grid;place-items:center;flex:0 0 74px;height:82px;background:#fffaed;border:2px solid #e6cf87;border-radius:18px;color:#324b55;font-size:53px;font-weight:600}.question-head h2{font-size:20px;line-height:1.65;margin:0;font-weight:800}.read-button{min-height:40px;font-size:13px;padding:5px 11px;border:1px solid #dbe9f0;border-radius:11px;background:#f9fcff;color:#52758b}.answer-list{display:grid;gap:10px;margin-top:15px}.answer{display:flex;align-items:center;gap:13px;min-height:64px;width:100%;text-align:left;background:#f6faff;border:2px solid #d4e4ef;border-radius:15px;padding:13px 15px;transition:background .18s,border-color .18s,transform .18s;font-size:20px;font-weight:750;line-height:1.55}.answer .option-letter{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:#e1eef9;color:#376c99;font-size:15px}.answer:hover:not(:disabled){background:#ecf6ff;border-color:#8ebedc}.answer.correct{background:#e5f7ea;border-color:#64b58b}.answer.wrong{background:#fff6e4;border-color:#dfae5f}.answer:disabled{opacity:1}.answer:not(.correct):disabled{color:#698294;background:#f2f5f7}.answer.wrong .option-letter{background:#ffe3b1}.answer.correct .option-letter{background:#c3eace;color:#277d50}.long-option{font-size:17px}.color-preview{display:block;font-size:32px;letter-spacing:2px;margin-bottom:6px}.color-blue{color:#176dad}.color-yellow{color:#b57b09}.option-copy{flex:1}.hint-toggle{margin:13px 0 0;display:flex;justify-content:center}.feedback{display:flex;gap:12px;margin-top:16px;padding:15px;border-radius:17px;background:#fff7e8;border:1px solid #eed39c;align-items:flex-start}.feedback.is-correct{background:#edf8ee;border-color:#b6dcc0}.feedback img{width:60px;height:70px;object-fit:contain;flex:0 0 60px}.feedback h3{font-size:17px;margin:1px 0 6px}.feedback p{font-size:16px;line-height:1.7;margin:0}.feedback .small-note{font-size:13px;margin-top:8px}.next-action{margin-top:16px}.drag-zone{display:grid;place-items:center;margin-top:10px}.drag-card{border-radius:15px;background:#fff3c9;border:2px solid #e6c475;width:85px;height:85px;display:grid;place-items:center;font-size:53px;cursor:grab;touch-action:none;user-select:none;position:relative;z-index:2}.drag-card.dragging{z-index:50;cursor:grabbing;box-shadow:0 16px 30px #25475a36}.drag-help{font-size:13px;color:#658195;text-align:center;margin:9px 0 0}.drop-target{border-style:dashed}.drop-target.over{border-style:solid;background:#ddecfa;transform:scale(1.015)}.clear-page .scene-title h1{font-size:28px}.clear-page .scene-title{top:7%}.reward-badge{width:74px;height:74px;display:grid;place-items:center;background:#fff3bd;border:4px solid #eabc51;border-radius:50%;font-size:37px;box-shadow:0 5px 0 #e6d390;margin:15px auto 13px}.clear-box{background:white;border:1px solid var(--line);border-radius:22px;text-align:center;margin:15px 0;padding:19px}.clear-box h2{margin:0 0 8px;font-size:23px}.clear-box p{margin:0 0 16px;line-height:1.7;font-size:16px}.collected-row{display:flex;justify-content:center;gap:8px;margin-bottom:20px}.collected-row span{background:#edf8f1;color:#2c7657;border:1px solid #b7d8c2;border-radius:10px;font-size:29px;padding:6px 11px}.finale .scene-title{top:6%}.finale .scene-title h1{font-size:30px;color:#206285}.finale .scene-title p{font-size:16px;margin:5px}.finale-buttons{margin-top:16px;display:grid;gap:11px}.certificate-form{margin-top:16px;background:white;border:1px solid var(--line);padding:23px;border-radius:22px}.certificate-form h2{font-size:24px;margin:0 0 12px}.certificate-form p{line-height:1.75;color:#5d798d;font-size:16px}.certificate-form label{display:block;font-weight:700;margin-bottom:8px}.certificate-form input{width:100%;border:2px solid #cedee8;border-radius:13px;font-size:22px;min-height:57px;padding:12px;margin-bottom:17px;background:#fcfeff}.certificate-preview{display:block;width:100%;border-radius:17px;border:1px solid #d8e6ed;margin:16px 0}.status-text{font-size:15px;line-height:1.7}.error-text{color:#b35131}.small-note{font-size:13px;color:#607d91}dialog{width:calc(100% - 24px);max-width:540px;border:0;padding:22px;border-radius:24px;color:var(--ink);box-shadow:0 20px 80px #173d5430;max-height:86svh}dialog::backdrop{background:#173d5480;backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-head h2{margin:0;font-size:23px}.icon-close{width:45px;height:45px;flex:0 0 45px;border-radius:13px;font-size:28px;line-height:1;background:#eff5fa;border:0}dialog>p{font-size:15px;line-height:1.75;color:#658195}.map-item{display:flex;align-items:center;gap:13px;text-align:left;background:#f5faff;border:1px solid #d9e8ef;border-radius:16px;width:100%;padding:13px;min-height:76px;margin:9px 0}.map-item:disabled{background:#f3f5f6;color:#8c9ba5}.map-radical{display:grid;place-items:center;width:49px;height:49px;flex:0 0 49px;background:#fff;border-radius:12px;font-size:31px;border:1px solid #dbe7ed}.map-copy{flex:1}.map-copy b{font-size:17px;display:block}.map-copy small{font-size:13px;display:block;margin-top:4px}.map-arrow{font-size:18px}.book-group{padding:15px 0;border-bottom:1px solid var(--line)}.book-group h3{font-size:17px;margin:0 0 10px}.book-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.book-card{border:1px solid #adcdb5;background:#edf8ef;color:#266846;border-radius:12px;padding:6px 1px;min-height:54px;font-size:29px}.book-card:disabled{background:#f0f3f5;border-color:#e0e6e9;color:#94a5ae;font-size:23px}#card-info{padding:13px 0;font-size:16px;line-height:1.8}.replay-tag{font-size:12px;color:#846335;background:#fff5d7;padding:4px 9px;border-radius:8px}#confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}.confetti-bit{position:absolute;width:8px;height:16px;top:-30px;animation:fall 2.7s ease-in forwards}@keyframes fall{to{transform:translateY(110svh) rotate(500deg);opacity:.15}}.pop-in{animation:pop-in .35s ease-out}@keyframes pop-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:750px){.topbar{height:90px}.brand{font-size:20px}main{padding-top:10px}.question-scene img{max-height:220px}.question-head h2{font-size:22px}.landing-title h1{font-size:43px}.audio-panel{top:85px}}
@media(max-width:359px){.topbar{padding:12px;gap:5px}.brand{font-size:15px;gap:6px}.brand-icon{width:32px;height:34px;font-size:21px}.tools{gap:5px}.tool{padding:7px;font-size:13px}.sound-button span{display:none}main{padding:0 10px 16px}.question-card{padding:15px}.word-tile{flex-basis:61px;height:70px;font-size:46px}.question-head{gap:10px}.question-head h2{font-size:18px}.answer{font-size:18px;padding:12px}.answer.long-option{font-size:16px}.mission-box{padding:18px}.mission-words{gap:7px}.scene-title h1{font-size:22px}.landing-title p{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.confetti-bit{display:none}}
/* 驗收修正：共用操作保持至少44px高，窄屏過關字卡留在內容區內。 */
.brand{min-height:44px}
.read-button{min-height:44px}
.collected-row span{flex:1;min-width:0;max-width:55px;padding:6px 0}