:root{--bg: #fff7ed;--bg-soft: #ffffff;--card: #ffffff;--card-border: #f0d9c0;--text: #3b2b1a;--text-soft: #7c6650;--shadow: 0 10px 30px rgba(120, 80, 30, .12);--ok: #16a34a;--ok-bg: #dcfce7;--wrong: #ef4444;--wrong-bg: #fee2e2;--star: #fbbf24;--star-empty: #e7d3ad;--accent: #f97316;--soft: #ffe8d2;--blob1: #ffe0b2;--blob2: #cdeafe;--blob3: #d9f6df;color-scheme:light}:root[data-theme=dark]{--accent: #fb923c;--bg: #14110d;--bg-soft: #1e1a15;--card: #241f19;--card-border: #3a3229;--text: #f7ecdf;--text-soft: #c3b39f;--shadow: 0 10px 30px rgba(0, 0, 0, .5);--ok: #4ade80;--ok-bg: #14351f;--wrong: #f87171;--wrong-bg: #3a1b1b;--star: #fbbf24;--star-empty: #5a4f3a;--soft: #2b241c;--blob1: #2a2018;--blob2: #172230;--blob3: #16261a;color-scheme:dark}*{box-sizing:border-box}body{margin:0;font-family:Nunito,PingFang TC,Noto Sans TC,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;transition:color .3s ease;background:radial-gradient(circle at 12% 8%,var(--blob1) 0,transparent 32%),radial-gradient(circle at 88% 6%,var(--blob2) 0,transparent 30%),radial-gradient(circle at 78% 92%,var(--blob3) 0,transparent 34%),var(--bg);background-attachment:fixed;min-height:100dvh}svg{display:inline-block;vertical-align:middle}.app{min-height:100dvh;display:flex;flex-direction:column;max-width:860px;margin:0 auto;padding:0 clamp(12px,4vw,24px) env(safe-area-inset-bottom)}.header{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10}.brand{display:flex;align-items:center;gap:8px;font-weight:800}.brand-logo{flex:none}.brand-name{font-size:clamp(1.1rem,4vw,1.4rem)}.header-right{display:flex;align-items:center;gap:8px}.ai-badge{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:800;padding:6px 12px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--card-border);color:var(--text-soft);white-space:nowrap}.ai-badge.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--card-border);background:var(--bg-soft);cursor:pointer;transition:transform .15s ease,background .2s ease}.theme-toggle:hover{transform:scale(1.08)}.theme-toggle:active{transform:scale(.95)}.main{flex:1;padding:8px 0 24px}.footer{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--text-soft);font-size:.85rem;padding:16px 0 24px}.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:800;font-size:1.05rem;color:#fff;background:var(--accent);border:none;border-radius:18px;padding:14px 24px;cursor:pointer;box-shadow:0 6px color-mix(in srgb,var(--accent) 62%,#000);transition:transform .1s ease,box-shadow .1s ease}.primary-btn:hover{transform:translateY(-1px)}.primary-btn:active{transform:translateY(4px);box-shadow:0 2px color-mix(in srgb,var(--accent) 60%,#000)}.ghost-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-weight:800;color:var(--text-soft);background:var(--bg-soft);border:2px solid var(--card-border);border-radius:16px;padding:10px 18px;cursor:pointer;transition:border-color .2s ease,color .2s ease,transform .1s ease}.ghost-btn:hover{border-color:var(--accent);color:var(--accent)}:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:2px}.hero{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--card-border);border-radius:28px;padding:22px;box-shadow:var(--shadow);flex-wrap:wrap}.hero-mascot{flex:none;display:grid;place-items:center;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 50% 40%,var(--soft),transparent 72%)}.hero-text{flex:1;min-width:200px}.hero-text h1{margin:0 0 6px;font-size:clamp(1.5rem,6vw,2.1rem)}.hero-text p{margin:4px 0;color:var(--text-soft);line-height:1.7}.hero-text strong{color:var(--accent)}.badge-count{display:flex;align-items:center;flex-wrap:wrap;gap:2px;font-weight:700}.inline-medal,.name-medal{vertical-align:middle}.section-title{margin:26px 4px 14px;font-size:1.25rem}.world-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.world-card{position:relative;font-family:inherit;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);border:2px solid var(--card-border);border-radius:24px;padding:18px 16px;cursor:pointer;color:var(--text);overflow:hidden;transition:transform .14s ease,border-color .2s ease,box-shadow .2s ease}.world-card:before{content:"";position:absolute;inset:0 0 auto 0;height:92px;background:color-mix(in srgb,var(--soft) 88%,transparent)}.world-card:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:var(--shadow);border-color:var(--accent)}.world-card:active{transform:translateY(0)}.world-art{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--card);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 25%,transparent);margin-top:4px}.world-card.done .world-art{box-shadow:0 0 0 3px var(--accent),0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent)}.world-name{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:1.15rem;margin-top:2px}.world-blurb{color:var(--text-soft);font-size:.9rem;line-height:1.5;min-height:2.6em}.world-stars{display:inline-flex;align-items:center;gap:3px;margin-top:4px}.play-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}.play-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.world-tag,.level-tag,.star-tag{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:.85rem;padding:6px 12px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--card-border)}.world-tag{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}.star-tag{color:var(--star)}.progress-bar{height:12px;background:var(--bg-soft);border:1px solid var(--card-border);border-radius:999px;overflow:hidden;margin-bottom:18px}.progress-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .4s ease}.loading-card,.quiz-card{background:var(--card);border:1px solid var(--card-border);border-radius:24px;padding:clamp(18px,5vw,28px);box-shadow:var(--shadow)}.loading-card{text-align:center}.loading-card p{font-weight:700;margin:10px 0}.dots{display:flex;gap:8px;justify-content:center}.dots span{width:12px;height:12px;border-radius:50%;background:var(--accent);animation:bounce 1s infinite}.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,to{transform:translateY(0);opacity:.5}50%{transform:translateY(-8px);opacity:1}}.quiz-question{display:flex;align-items:center;gap:14px;margin-bottom:20px}.quiz-question h2{margin:0;font-size:clamp(1.3rem,5.5vw,1.8rem);line-height:1.4}.options{display:flex;flex-direction:column;gap:12px}.option{font-family:inherit;display:flex;align-items:center;gap:12px;background:var(--bg-soft);border:2px solid var(--card-border);border-radius:18px;padding:16px 18px;font-size:1.2rem;font-weight:700;color:var(--text);cursor:pointer;text-align:left;transition:transform .1s ease,border-color .15s ease,background .15s ease}.option:not(:disabled):hover{transform:translateY(-2px);border-color:var(--accent)}.option:not(:disabled):active{transform:translateY(0)}.option-key{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-size:1.05rem;font-weight:900}.option-text{flex:1}.option-mark{display:inline-flex}.option.correct{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}.option.correct .option-key{background:var(--ok)}.option.wrong{background:var(--wrong-bg);border-color:var(--wrong);color:var(--wrong)}.option.wrong .option-key{background:var(--wrong)}.option.dim{opacity:.55}.option:disabled{cursor:default}.feedback{margin-top:20px;padding:18px;border-radius:18px;text-align:center;animation:pop .25s ease}.feedback.ok{background:var(--ok-bg)}.feedback.oops{background:var(--wrong-bg)}.feedback-title{margin:0 0 6px;font-size:1.3rem;font-weight:800}.feedback.ok .feedback-title{color:var(--ok)}.feedback.oops .feedback-title{color:var(--wrong)}.feedback-explain{margin:0 0 16px;color:var(--text);line-height:1.6;font-weight:600}@keyframes pop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.result{text-align:center;padding:12px}.result h1{font-size:clamp(1.6rem,7vw,2.4rem);margin:8px 0}.result-world{display:inline-flex;align-items:center;gap:6px;font-size:1.2rem;font-weight:800;color:var(--accent);margin:4px 0 16px}.result-stars{display:flex;justify-content:center;gap:6px;margin:8px 0}.big-star{animation:pop .4s ease backwards}.big-star:nth-child(2){animation-delay:.08s}.big-star:nth-child(3){animation-delay:.16s}.big-star:nth-child(4){animation-delay:.24s}.big-star:nth-child(5){animation-delay:.32s}.result-score{font-weight:800;font-size:1.2rem;margin:8px 0}.earned-badge{display:inline-flex;flex-direction:column;align-items:center;gap:8px;background:var(--card);border:2px dashed var(--accent);border-radius:20px;padding:18px 30px;margin:12px 0;font-weight:800;animation:pop .4s ease}.result-msg{color:var(--text-soft);font-weight:600;margin:10px 0 20px}.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.mascot{display:block}.mascot-cheer{animation:wiggle .6s ease}.mascot-think{animation:float 2s ease-in-out infinite}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:480px){.hero,.quiz-question{flex-direction:column;text-align:center}.result-actions{flex-direction:column}.result-actions .primary-btn,.result-actions .ghost-btn{width:100%}}