:root { --ink:#342d3d; --muted:#716a78; --paper:#fffdf9; --cream:#fff7eb; --peach:#ffd9b4; --orange:#ef794b; --purple:#7654b8; --lavender:#eee7ff; --green:#37785a; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 90% 0,#fde3c5 0,transparent 28%),var(--cream); font-family: ui-rounded, "Nunito", "PingFang TC", "Microsoft JhengHei", sans-serif; }
button { font:inherit; cursor:pointer; border:0; touch-action:manipulation; }
.app-shell { width:min(100%, 620px); min-height:100svh; margin:auto; padding:18px 20px 32px; }
.site-header { display:flex; justify-content:space-between; align-items:center; min-height:38px; }
.brand { color:var(--ink); font-size:1.05rem; font-weight:900; text-decoration:none; letter-spacing:.02em; }.brand span { color:var(--orange); }
.text-button,.back-button { background:transparent; color:var(--purple); font-weight:800; padding:8px; }.back-button { font-size:1.5rem; padding:4px 12px 4px 0; }
.screen { padding-top:42px; animation:appear .25s ease-out; }.hero-screen { padding-top:62px; }.eyebrow { margin:0 0 8px; color:var(--purple); font-size:.86rem; font-weight:900; letter-spacing:.08em; }.screen h1 { font-size:clamp(2rem,8vw,3.1rem); line-height:1.14; margin:0 0 16px; letter-spacing:-.04em; }.intro,#welcome-copy { color:var(--muted); line-height:1.7; font-size:1.05rem; max-width:32rem; }
.profile-grid { display:grid; gap:15px; margin-top:34px; }.profile-card { display:flex; align-items:center; gap:11px; padding:17px; background:var(--paper); border:2px solid transparent; border-radius:24px; box-shadow:0 8px 22px #a1603220; }.profile-card:hover { border-color:var(--peach); }.profile-select { display:flex; flex:1; align-items:center; gap:16px; min-width:0; padding:0; color:var(--ink); background:transparent; text-align:left; }.profile-select:active { transform:scale(.98); }.avatar { display:grid; place-items:center; flex:none; width:66px; height:66px; border-radius:22px; font-size:2.25rem; background:var(--lavender); }.profile-card:nth-child(2) .avatar { background:#dff4dc; }.profile-card strong { display:block; font-size:1.25rem; }.profile-card small { display:block; margin-top:5px; color:var(--muted); }.profile-actions { display:grid; gap:6px; flex:none; }.customize-button { min-height:34px; padding:0 9px; color:var(--purple); background:var(--lavender); border-radius:11px; font-size:.76rem; font-weight:900; }.add-child-button { width:100%; min-height:58px; margin-top:15px; color:var(--purple); background:var(--lavender); border:2px dashed #bca7e0; border-radius:20px; font-weight:900; }.mini-avatar-options { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }.mini-avatar { display:grid; place-items:center; min-height:50px; background:#fff7eb; border:2px solid transparent; border-radius:14px; font-size:1.7rem; }.mini-avatar.selected { border-color:var(--purple); background:var(--lavender); }
.avatar-screen,.name-screen { padding-top:34px; }.avatar-screen .back-button,.name-screen .back-button { margin-left:-12px; }.avatar-options { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:28px; }.avatar-option { display:grid; place-items:center; min-height:104px; background:var(--paper); border:2px solid transparent; border-radius:24px; font-size:3rem; box-shadow:0 7px 16px #a1603220; }.avatar-option.selected { border-color:var(--purple); background:var(--lavender); }.avatar-option:active { transform:scale(.96); }.name-form { display:grid; gap:10px; margin-top:30px; padding:20px; background:var(--paper); border-radius:24px; box-shadow:0 8px 22px #a1603220; }.name-form label { color:var(--purple); font-weight:900; }.name-form input { width:100%; min-height:57px; padding:0 15px; color:var(--ink); background:#fffaf2; border:2px solid #e4d6e8; border-radius:15px; font:inherit; font-size:1.2rem; font-weight:800; }.name-form input:focus { outline:3px solid #d8c6f5; border-color:var(--purple); }.input-help { margin:0 0 6px; color:var(--muted); font-size:.85rem; }
.welcome-card { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }.welcome-card h1 { font-size:2.25rem; margin-bottom:8px; }.home-side { display:grid; gap:7px; justify-items:end; }.home-avatar { display:grid; gap:1px; place-items:center; width:70px; min-height:70px; padding:7px; background:var(--paper); border-radius:20px; font-size:2rem; box-shadow:0 5px 13px #a1603220; }.home-avatar small { color:var(--purple); font-size:.65rem; font-weight:900; }.edit-name-link { padding:4px 8px; color:var(--purple); background:transparent; font-size:.78rem; font-weight:900; }.streak-badge { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:4px; padding:12px; min-width:98px; background:#fff0dd; border-radius:20px; text-align:center; }.streak-badge span { grid-row:span 2; font-size:1.55rem; }.streak-badge strong { font-size:1.45rem; }.streak-badge small { color:var(--muted); font-size:.72rem; }
.mission-card { display:flex; gap:18px; margin-top:28px; padding:22px; background:var(--paper); border-radius:28px; box-shadow:0 12px 30px #a1603220; }.mission-icon { display:grid; place-items:center; flex:none; width:58px; height:58px; background:#fff0dd; border-radius:19px; font-size:2rem; }.mission-content h2 { font-size:1.45rem; margin:0; }.mission-content p:not(.eyebrow) { color:var(--muted); line-height:1.5; }.primary-button,.secondary-button { min-height:51px; padding:0 20px; border-radius:16px; font-weight:900; }.primary-button { background:var(--orange); color:white; box-shadow:0 5px 0 #c45b35; }.primary-button:active { transform:translateY(3px); box-shadow:0 2px 0 #c45b35; }.primary-button span { margin-left:8px; }.tip-card { display:flex; gap:10px; margin-top:20px; padding:14px; color:var(--green); background:#e7f5e8; border-radius:16px; }.tip-card p { margin:0; line-height:1.5; font-size:.92rem; }
.install-button { display:block; width:100%; min-height:48px; margin-top:16px; color:var(--purple); background:transparent; border:1px solid #d9cce8; border-radius:16px; font-weight:900; }.install-help { margin:9px 5px 0; color:var(--muted); font-size:.86rem; line-height:1.55; text-align:center; }
.progress-row { display:flex; align-items:center; gap:8px; }.progress-row > div { flex:1; }.progress-row .eyebrow { margin-bottom:7px; }.progress-track { height:8px; overflow:hidden; background:#eadfec; border-radius:9px; }.progress-track span { display:block; width:33.3%; height:100%; background:var(--purple); border-radius:inherit; transition:width .25s; }.question-card { margin:32px 0 17px; text-align:center; }.scene-art { display:grid; place-items:center; width:104px; height:104px; margin:auto auto 16px; border-radius:34px; background:#fff0dd; font-size:4rem; }.question-card h1 { font-size:2.25rem; margin-bottom:8px; }.question-help { margin:0; color:var(--muted); line-height:1.55; }.answer-area { min-height:92px; text-align:center; }.answer-label { margin:0 0 7px; color:var(--muted); font-size:.88rem; }.syllable-display { min-height:43px; color:var(--purple); font-size:1.85rem; font-weight:900; letter-spacing:.14em; }.feedback { min-height:20px; margin:4px 0 0; color:var(--green); font-weight:800; }.feedback.error { color:#bc4d4d; }
.keyboard-title { margin:14px 0 8px; color:var(--muted); font-size:.82rem; font-weight:900; }.keyboard { display:grid; gap:12px; }.keyboard-row { display:grid; gap:8px; }.keyboard-row.row-1 { grid-template-columns:repeat(11,1fr); }.keyboard-row.row-2 { grid-template-columns:repeat(10,1fr); margin-left:3.5%; margin-right:3.5%; }.keyboard-row.row-3 { grid-template-columns:repeat(10,1fr); margin-left:6.5%; margin-right:6.5%; }.keyboard-row.row-4 { grid-template-columns:repeat(10,1fr); margin-left:6.5%; margin-right:6.5%; }.key { min-height:50px; padding:2px; color:var(--ink); background:var(--paper); border:1px solid #eadfea; border-radius:12px; font-size:1.2rem; font-weight:900; box-shadow:0 3px 0 #e1d5df; }.key.selected { color:white; background:var(--purple); box-shadow:0 3px 0 #5a3e91; }.key.dimmed { opacity:.35; }.key.tone { color:var(--purple); background:var(--lavender); }.key.tone.selected { color:white; background:var(--purple); }.keyboard-note { margin:8px 0 0; color:var(--muted); font-size:.78rem; text-align:center; }.edit-row { display:flex; gap:8px; margin-top:15px; }.edit-button { flex:1; min-height:42px; color:var(--purple); background:transparent; border:1px solid #d9cce8; border-radius:13px; font-size:.88rem; font-weight:900; }.edit-button:disabled { opacity:.38; }.action-row { display:flex; gap:12px; margin-top:14px; }.action-row button { flex:1; }.secondary-button { color:var(--purple); background:var(--lavender); }.choice-panel { display:grid; gap:10px; margin-top:20px; padding:16px; background:#fff0dd; border-radius:22px; }.choice-panel::before { content:"你想選哪一個字？"; text-align:center; font-weight:900; }.choice { min-height:52px; border-radius:14px; background:white; color:var(--ink); font-size:1.25rem; font-weight:900; }.choice.correct { background:#cfeeda; color:var(--green); }.choice.wrong { background:#ffe1df; color:#ae4848; }
.complete-screen { padding-top:72px; text-align:center; }.celebration { margin:auto auto 20px; font-size:5rem; animation:float 1.4s infinite ease-in-out; }.complete-screen h1 { font-size:2.5rem; }.complete-screen > p:not(.eyebrow) { color:var(--muted); line-height:1.7; }.streak-summary { display:grid; grid-template-columns:auto auto; justify-content:center; align-items:center; column-gap:8px; margin:28px auto; padding:15px; width:210px; background:#fff0dd; border-radius:22px; }.streak-summary span { grid-row:span 2; font-size:2rem; }.streak-summary strong { text-align:left; font-size:1.7rem; }.streak-summary p { margin:0; color:var(--muted); font-size:.8rem; }
@keyframes appear { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } } @keyframes float { 50% { transform:translateY(-8px) rotate(6deg); } }
@media (min-width:600px) { .profile-grid { grid-template-columns:1fr 1fr; } .profile-card { min-height:126px; display:block; }.profile-card .avatar { margin-bottom:10px; } .key { min-height:56px; font-size:1.35rem; } }