:root{--color-bg: #fffaf1;--color-surface: #fffef9;--color-surface-2: #fff6e8;--color-text: #2f2517;--color-text-muted: #6f6557;--color-primary: #0f8a7a;--color-success: #4d8b2f;--color-error: #c24f74}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Noto Sans TC,sans-serif;background:radial-gradient(circle at top left,rgba(228,139,29,.12),transparent 22%),radial-gradient(circle at top right,rgba(15,138,122,.12),transparent 18%),var(--color-bg);color:var(--color-text)}.container{width:min(1120px,calc(100% - 32px));margin:0 auto}.topbar{padding:1rem 0;position:sticky;top:0;background:#fffaf1e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(47,37,23,.06)}.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.brand{display:flex;align-items:center;gap:.75rem;font-weight:800}.brand-mark{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#d8efe9,#fff6e8)}.brand-sub{font-size:.9rem;color:var(--color-text-muted)}.brand-title{font-size:1.3rem}.top-actions{display:flex;gap:.5rem;align-items:center}.chip{padding:0 .8rem;border-radius:999px;background:#fff6e8;border:1px solid rgba(47,37,23,.06);font-size:.9rem;color:var(--color-text-muted)}.icon-btn{width:40px;height:40px;border-radius:999px;border:1px solid rgba(47,37,23,.06);background:var(--color-surface);display:grid;place-items:center;cursor:pointer}.icon-btn.small{width:32px;height:32px;font-size:.9rem}.hero{padding:2.5rem 0 1.5rem}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem;align-items:center}.eyebrow{display:inline-flex;padding:.5rem .9rem;border-radius:999px;background:var(--color-surface-2);border:1px solid rgba(47,37,23,.06);font-size:.9rem;color:var(--color-text-muted);margin-bottom:.75rem}h1{font-size:2.1rem;margin-bottom:.75rem}.hero-card{background:var(--color-surface);border-radius:1.5rem;padding:1rem;border:1px solid rgba(47,37,23,.06)}.hero-letters{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.letter-bubble{aspect-ratio:1/1;border-radius:18px;display:grid;place-items:center;background:var(--color-surface-2);font-size:2rem}.game-grid{display:grid;grid-template-columns:280px 1fr;gap:1.25rem;align-items:flex-start}.panel{background:var(--color-surface);border-radius:1.5rem;padding:1rem;border:1px solid rgba(47,37,23,.06)}.mode-list{display:grid;gap:.5rem;margin:.5rem 0 1rem}.mode-btn{text-align:left;padding:.75rem;border-radius:.9rem;border:1px solid rgba(47,37,23,.06);background:var(--color-surface);cursor:pointer}.mode-btn.active{background:#d8efe9}.stats-stack{display:grid;gap:.5rem;margin-top:.75rem}.stats-card{padding:.75rem;border-radius:.9rem;background:var(--color-surface-2)}.label{font-size:.9rem;color:var(--color-text-muted)}.value{font-size:1.6rem;font-weight:800}.game-board{padding:1rem 0 2rem;position:relative}.progress-bar{height:10px;background:#f8edd9;border-radius:999px;overflow:hidden;margin-bottom:.75rem}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),#e48b1d)}.question-box{padding:1.25rem;border-radius:1.5rem;background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2));border:1px solid rgba(47,37,23,.08);margin-bottom:1rem}.question-meta{display:flex;justify-content:space-between;font-size:.9rem;color:var(--color-text-muted);margin-bottom:.5rem}.question-title{font-size:2.4rem;margin-bottom:.5rem}.question-prompt{font-size:1.2rem;font-weight:700;display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}.question-sub{font-size:.95rem;color:var(--color-text-muted)}.icon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:.75rem}.icon-option{min-height:150px;border-radius:1.2rem;border:1px solid rgba(47,37,23,.06);background:linear-gradient(180deg,#fffdf7,#fff6e8);display:grid;align-content:center;justify-items:center;gap:.4rem;cursor:pointer}.option-emoji{font-size:3rem}.option-symbol{font-size:1.8rem;font-weight:700;color:var(--color-text)}.option-hint{font-size:.95rem;color:var(--color-text-muted);font-weight:700}.option-btn.correct{background:#e7f1e6;color:var(--color-success)}.option-btn.wrong{background:#fae8eb;color:var(--color-error)}.option-btn.correct-flash{animation:pop .4s ease}.feedback-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:.75rem}.feedback-box{flex:1;min-height:60px;padding:0 .75rem;border-radius:.9rem;background:var(--color-surface);border:1px solid rgba(47,37,23,.06);font-size:.95rem;font-weight:700;color:var(--color-text-muted)}.feedback-box.success{color:var(--color-success)}.feedback-box.error{color:var(--color-error)}.toolbar{display:flex;gap:.5rem}.primary-btn,.ghost-btn{padding:0 .9rem;min-height:42px;border-radius:999px;font-weight:700;cursor:pointer}.primary-btn{background:var(--color-primary);color:#fffdf7;border:none}.ghost-btn{background:var(--color-surface);border:1px solid rgba(47,37,23,.06)}.cheer-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.cheer-burst{position:absolute;top:0;right:0;bottom:0;left:0}.sparkle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:sparkleFly .9s ease-out forwards}@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.08) rotate(-2deg)}70%{transform:scale(.97) rotate(1deg)}to{transform:scale(1)}}@keyframes sparkleFly{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.3)}}.voice-panel{margin-top:1rem;padding:.75rem;border-radius:1rem;background:var(--color-surface);border:1px solid rgba(47,37,23,.06)}.voice-row{display:flex;flex-wrap:wrap;gap:.75rem}.voice-row label{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}.voice-actions{margin-top:.75rem;display:flex;gap:.5rem}@media(max-width:900px){.hero-grid,.game-grid{grid-template-columns:1fr}}@media(max-width:640px){.icon-grid{grid-template-columns:1fr}.topbar-inner{flex-direction:column;align-items:flex-start}}