:root {
  --ink: #24443d;
  --ink-soft: #58716b;
  --paper: #fffdf4;
  --paper-deep: #f6f0d9;
  --green: #2f715f;
  --green-bright: #57a57c;
  --mint: #cce7d8;
  --sky: #dff4f4;
  --sun: #f6c85f;
  --coral: #e7785d;
  --rose: #d9979f;
  --line: rgba(49, 95, 80, .18);
  --shadow: 0 18px 50px rgba(46, 79, 65, .16), 0 3px 0 rgba(255,255,255,.75) inset;
  --display: "STKaiti", "KaiTi", "Kaiti SC", "Comic Sans MS", cursive;
  --body: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #dff4f4; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  background:
    radial-gradient(circle at 80% 15%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    linear-gradient(180deg, #dff4f4 0%, #eef8e8 68%, #d6ebc3 100%);
  overflow-x: hidden;
}
button, input { font: inherit; }
button { touch-action: manipulation; }

.world { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.sun { position:absolute; width:124px; height:124px; right:8vw; top:5vh; border-radius:50%; background:rgba(246,200,95,.62); box-shadow:0 0 0 22px rgba(246,200,95,.12), 0 0 90px rgba(246,200,95,.4); }
.cloud { position:absolute; width:130px; height:36px; border-radius:40px; background:rgba(255,255,255,.66); filter:blur(.2px); }
.cloud::before,.cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.cloud::before { width:58px; height:58px; left:20px; bottom:0; }
.cloud::after { width:76px; height:76px; right:12px; bottom:0; }
.cloud-one { left:8vw; top:10vh; transform:scale(.8); }
.cloud-two { right:18vw; top:25vh; transform:scale(.52); opacity:.7; }
.hill { position:absolute; border-radius:50% 50% 0 0 / 100% 100% 0 0; bottom:-22vh; }
.hill-back { width:110vw; height:44vh; left:-28vw; background:#bddca9; transform:rotate(4deg); }
.hill-front { width:120vw; height:36vh; right:-42vw; background:#a9d18f; transform:rotate(-4deg); }
.leaf { position:absolute; color:rgba(47,113,95,.18); font-size:72px; }
.leaf-a { left:4vw; bottom:8vh; transform:rotate(-24deg); }
.leaf-b { right:3vw; bottom:14vh; transform:rotate(155deg); }

.app-shell { position:relative; z-index:1; width:min(920px, 100%); min-height:100vh; margin:0 auto; padding:max(18px, env(safe-area-inset-top)) clamp(16px,4vw,42px) max(22px, env(safe-area-inset-bottom)); display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:50px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:clamp(20px,4vw,28px); font-weight:700; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:50% 54% 46% 50%; background:var(--paper); box-shadow:0 7px 20px rgba(47,113,95,.16); transform:rotate(-4deg); }
.icon-button { width:46px; height:46px; border:1px solid rgba(47,113,95,.16); border-radius:50%; background:rgba(255,253,244,.84); color:var(--ink); box-shadow:0 8px 22px rgba(47,113,95,.11); cursor:pointer; }
.icon-button:focus-visible,.primary-button:focus-visible,.soft-button:focus-visible,.answer-button:focus-visible { outline:4px solid rgba(246,200,95,.82); outline-offset:3px; }

.paper-card { position:relative; width:100%; background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,251,234,.96)); border:1px solid rgba(255,255,255,.9); border-radius:34px 34px 44px 28px; box-shadow:var(--shadow); overflow:hidden; }
.paper-card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background-image:repeating-linear-gradient(0deg, transparent 0 13px, rgba(52,85,69,.04) 14px); mix-blend-mode:multiply; }
.home-card { margin:auto 0; padding:clamp(24px,6vw,56px); text-align:center; }
.eyebrow { color:var(--green); font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.hero-emoji { position:relative; display:inline-grid; place-items:center; width:150px; height:150px; margin:12px auto 0; font-size:82px; background:radial-gradient(circle, rgba(255,255,255,.9), rgba(204,231,216,.72)); border-radius:47% 53% 54% 46%; filter:drop-shadow(0 14px 16px rgba(47,113,95,.15)); animation:float 4s ease-in-out infinite; }
.hero-emoji::after { content:""; position:absolute; width:72px; height:17px; bottom:-7px; border-radius:50%; background:rgba(47,113,95,.14); filter:blur(5px); }
@keyframes float { 50% { transform:translateY(-7px) rotate(2deg); } }
.home-title { margin:18px 0 6px; font-family:var(--display); font-size:clamp(34px,7vw,58px); line-height:1.08; }
.home-subtitle { max-width:550px; margin:0 auto 24px; color:var(--ink-soft); font-size:clamp(15px,2.8vw,19px); line-height:1.7; }
.progress-track { width:min(520px,100%); height:14px; margin:14px auto 8px; padding:3px; background:#dbe8dc; border-radius:99px; box-shadow:inset 0 2px 5px rgba(34,68,61,.1); }
.progress-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--green-bright),#82bd75); transition:width .5s ease; }
.progress-copy { color:var(--ink-soft); font-size:13px; }
.primary-button { position:relative; z-index:2; width:min(520px,100%); min-height:62px; margin:26px auto 0; border:0; border-radius:23px 23px 27px 18px; background:linear-gradient(135deg,#367a64,#4a9671); color:white; font-weight:850; font-size:clamp(18px,3.5vw,22px); letter-spacing:.03em; box-shadow:0 12px 0 #245a4c, 0 18px 30px rgba(36,90,76,.24); cursor:pointer; transition:transform .15s, box-shadow .15s; }
.primary-button:active { transform:translateY(8px); box-shadow:0 4px 0 #245a4c,0 8px 16px rgba(36,90,76,.2); }
.primary-button[disabled] { opacity:.55; cursor:not-allowed; transform:none; box-shadow:0 7px 0 #6e9186; }
.soft-button { position:relative; z-index:2; min-height:48px; padding:10px 18px; border:1px solid rgba(47,113,95,.2); border-radius:18px; background:rgba(255,255,255,.8); color:var(--green); font-weight:800; cursor:pointer; }
.soft-button.danger { color:#9c4539; border-color:#ecc3bb; }
.button-row { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px; }

.lesson-shell { flex:1; display:flex; flex-direction:column; gap:14px; }
.lesson-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; }
.day-badge { display:grid; place-items:center; min-width:64px; height:52px; padding:0 12px; border-radius:19px; background:var(--paper); font-family:var(--display); font-weight:700; box-shadow:0 7px 18px rgba(47,113,95,.12); }
.lesson-title { margin:0; font-family:var(--display); font-size:clamp(19px,4vw,30px); }
.lesson-progress { grid-column:1/-1; height:10px; background:rgba(255,255,255,.65); border-radius:10px; overflow:hidden; }
.lesson-progress > div { height:100%; background:linear-gradient(90deg,var(--sun),var(--coral)); border-radius:inherit; transition:width .35s ease; }
.activity-card { flex:1; min-height:540px; padding:clamp(24px,5vw,48px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.phase-label { position:relative; z-index:1; align-self:flex-start; margin-bottom:auto; padding:7px 12px; border-radius:999px; background:var(--mint); color:var(--green); font-size:12px; font-weight:850; letter-spacing:.08em; }
.activity-content { position:relative; z-index:1; width:100%; max-width:620px; margin:auto; }
.word-emoji { font-size:clamp(72px,18vw,124px); line-height:1.1; filter:drop-shadow(0 9px 10px rgba(54,86,71,.12)); }
.word-title { margin:14px 0 3px; font-family:var(--display); font-size:clamp(34px,9vw,68px); line-height:1.12; color:#28594c; }
.word-meaning { margin:5px 0 12px; font-size:clamp(18px,4vw,25px); font-weight:800; color:#506b63; }
.chunks { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:14px 0; }
.chunk { padding:5px 10px; border-radius:12px; background:#fff3c9; color:#775b22; font-weight:800; }
.example { margin:16px auto; padding:15px 18px; border-left:5px solid var(--sun); border-radius:8px 18px 18px 8px; background:rgba(255,255,255,.72); font-size:clamp(16px,3vw,20px); line-height:1.5; text-align:left; }
.audio-button { border:0; border-radius:22px; padding:13px 20px; background:#dceddc; color:var(--green); font-weight:850; cursor:pointer; }
.record-panel { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px; }
.record-status { width:100%; color:var(--ink-soft); font-size:13px; }

.answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; }
.answer-button { min-height:62px; border:2px solid #d7e5dc; border-radius:20px; background:rgba(255,255,255,.9); color:var(--ink); font-weight:800; font-size:17px; cursor:pointer; transition:.18s; }
.answer-button:hover { transform:translateY(-2px); border-color:#7eb59f; }
.answer-button.correct { background:#d8f0dd; border-color:#62a977; }
.answer-button.wrong { background:#fde0d9; border-color:#da7966; }

.tile-answer { min-height:72px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px; padding:12px; margin:18px 0; border:2px dashed #9fc2b2; border-radius:20px; background:rgba(255,255,255,.56); font-size:24px; font-weight:850; }
.tile-bank { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.letter-tile { min-width:48px; min-height:48px; padding:8px 12px; border:0; border-radius:14px 14px 16px 11px; background:#fff1ba; color:#604d20; font-weight:900; font-size:21px; box-shadow:0 5px 0 #ddc36d; cursor:pointer; }
.letter-tile.used { opacity:.25; box-shadow:none; pointer-events:none; }
.spelling-input { width:min(480px,100%); height:70px; margin:20px auto 4px; padding:0 18px; border:3px solid #a8c9bb; border-radius:22px; background:white; color:var(--ink); text-align:center; font-size:clamp(22px,5vw,34px); font-weight:850; outline:none; }
.spelling-input:focus { border-color:var(--sun); box-shadow:0 0 0 6px rgba(246,200,95,.2); }
.prompt-card { margin:16px 0; padding:20px; border-radius:22px; background:#fff9dc; color:#5d512c; font-size:clamp(18px,4vw,25px); font-weight:800; }
.feedback { min-height:30px; margin:13px 0 0; color:var(--ink-soft); font-weight:800; }
.feedback.success { color:#287355; }
.feedback.retry { color:#b6513f; }
.hint-copy { color:#8a713b; font-size:14px; }
.break-bubble { width:200px; height:200px; display:grid; place-items:center; margin:auto; border-radius:45% 55% 47% 53%; background:linear-gradient(145deg,#d9efcf,#bde1cd); font-size:84px; animation:breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform:scale(1.07) rotate(2deg); box-shadow:0 0 0 24px rgba(189,225,205,.28); } }

.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
.stat-card { padding:17px 8px; border-radius:19px; background:rgba(255,255,255,.72); border:1px solid rgba(47,113,95,.12); }
.stat-number { display:block; font-family:var(--display); font-size:clamp(28px,6vw,44px); color:var(--green); }
.stat-label { color:var(--ink-soft); font-size:12px; }
.parent-panel { margin:18px 0 auto; padding:clamp(22px,5vw,42px); }
.panel-title { position:relative; z-index:1; margin:0 0 8px; font-family:var(--display); font-size:clamp(28px,6vw,44px); }
.panel-subtitle { position:relative; z-index:1; color:var(--ink-soft); }
.summary-list { position:relative; z-index:1; display:grid; gap:12px; margin:20px 0; }
.summary-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:14px; border-radius:17px; background:rgba(255,255,255,.72); }
.summary-day { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--mint); font-weight:900; }
.summary-meta { color:var(--ink-soft); font-size:13px; }
.summary-score { font-family:var(--display); font-size:26px; color:var(--green); }
.word-chip-list { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.word-chip { padding:7px 10px; border-radius:12px; background:#fff4cf; color:#6a572b; font-size:13px; font-weight:800; }
.daily-detail { margin-top:8px; color:var(--ink-soft); font-size:13px; }
.daily-detail summary { color:var(--green); font-weight:850; cursor:pointer; }
.daily-detail p { margin:8px 0; line-height:1.55; }
.final-report { position:relative; z-index:1; margin:28px 0 12px; padding:20px; border-radius:24px; background:linear-gradient(135deg,#e0f0d7,#fff4cf); border:1px solid rgba(47,113,95,.15); }
.final-report h2 { margin:6px 0; font-family:var(--display); font-size:28px; }
.final-report p { color:var(--ink-soft); }
.modal-backdrop { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; background:rgba(27,56,49,.5); backdrop-filter:blur(7px); }
.modal { width:min(560px,100%); max-height:90vh; overflow:auto; padding:28px; border-radius:28px; background:var(--paper); box-shadow:0 28px 80px rgba(23,48,41,.35); }
.modal h2 { margin-top:0; font-family:var(--display); font-size:34px; }
.form-field { display:grid; gap:7px; margin:16px 0; text-align:left; font-weight:800; }
.form-field input { height:54px; padding:0 15px; border:2px solid #c7dacf; border-radius:16px; background:white; font-size:18px; outline:none; }
.pin-input { letter-spacing:.5em; text-align:center; }
.toast { position:fixed; z-index:40; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); transform:translate(-50%,140%); max-width:calc(100vw - 32px); padding:12px 18px; border-radius:16px; background:#24443d; color:white; font-weight:750; box-shadow:0 12px 30px rgba(0,0,0,.25); transition:transform .25s; }
.toast.show { transform:translate(-50%,0); }
.offline-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.62); color:var(--green); font-size:12px; font-weight:800; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (max-width:640px) {
  .app-shell { padding-left:12px; padding-right:12px; }
  .activity-card { min-height:calc(100vh - 150px); border-radius:28px 28px 34px 22px; }
  .answer-grid { grid-template-columns:1fr; }
  .stats-grid { gap:7px; }
  .lesson-header { grid-template-columns:auto 1fr auto; }
  .lesson-title { font-size:19px; }
}

@media (min-width:800px) and (orientation:landscape) {
  .activity-card { min-height:560px; }
  .activity-content.two-column { display:grid; grid-template-columns:.9fr 1.1fr; gap:38px; align-items:center; text-align:left; }
  .activity-content.two-column .word-side { text-align:center; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}