/* 小叮咚英语 · 自用版 v0.1 — App 固定浅色（儿童使用场景，刻意不做深色） */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --cream:#FFF9EF; --paper:#FFFFFF; --sun:#FFD95E; --sun2:#FFC93C; --sun-sh:#EBB62F;
  --coral:#FF7A59; --coral-sh:#D95B3C; --mint:#63C79C; --mint-sh:#47A57D; --mintbg:#E2F6EC;
  --sky:#8EC9F0; --skybg:#E8F3FC; --lilac:#EFE8FC; --ink:#4A3B32; --ink2:#9A8A75; --soft:#F4EBDB;
}
html, body { margin:0; padding:0; }
[hidden] { display:none !important; }
body {
  background:var(--cream); color:var(--ink); min-height:100dvh;
  font-family:"SF Pro Rounded", ui-rounded, "PingFang SC", -apple-system, sans-serif;
  line-height:1.5; user-select:none; -webkit-user-select:none;
}
.en { font-family:"Arial Rounded MT Bold","SF Pro Rounded", ui-rounded, sans-serif; }
button { font:inherit; color:inherit; border:none; background:none; cursor:pointer; }

#app { max-width:440px; margin:0 auto; padding:18px 16px calc(84px + env(safe-area-inset-bottom)); }
.page { display:flex; flex-direction:column; gap:14px; }

/* ---- 底部导航 ---- */
.nav {
  position:fixed; bottom:0; left:0; right:0; display:flex; z-index:20;
  background:var(--paper); border-top:1.5px solid var(--soft);
  padding:8px 6px calc(10px + env(safe-area-inset-bottom));
  max-width:440px; margin:0 auto;
}
.nav a { flex:1; text-align:center; font-size:11px; color:var(--ink2); text-decoration:none;
  display:flex; flex-direction:column; gap:2px; align-items:center; }
.nav a b { width:40px; height:28px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.nav a.on { color:var(--coral); font-weight:700; }
.nav a.on b { background:#FFE9E1; }

/* ---- 今日 ---- */
.hello { display:flex; align-items:center; gap:10px; }
.mascot { flex:none; }
.bubble { background:var(--paper); border:1.5px solid var(--soft); border-radius:18px 18px 18px 4px;
  padding:9px 13px; font-size:14px; box-shadow:0 3px 0 var(--soft); }
.datechip { align-self:flex-start; background:var(--lilac); color:#6C5A9E; font-size:12px; font-weight:700;
  border-radius:999px; padding:3px 12px; }

.theme-card { background:linear-gradient(160deg,var(--sun),var(--sun2)); border-radius:24px;
  padding:16px 16px 14px; box-shadow:0 6px 0 var(--sun-sh); }
.theme-card .tag { font-size:11px; font-weight:700; color:#8A6A12; letter-spacing:.08em; }
.theme-card .tt { font-size:24px; font-weight:800; margin:2px 0 10px; }
.core { background:rgba(255,255,255,.88); border-radius:16px; padding:10px 12px; display:flex; align-items:center; gap:10px; }
.core .txt { flex:1; min-width:0; }
.core .en { font-size:17px; font-weight:700; display:block; }
.core small { color:var(--ink2); font-size:12px; }
.play-btn { width:42px; height:42px; border-radius:50%; background:var(--coral); flex:none;
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 0 var(--coral-sh); font-size:16px; color:#fff; }
.play-btn:active, .pill:active, .checkin:active, .g-final-btn:active { transform:translateY(2px); box-shadow:none; }
.play-btn.slow { width:34px; height:34px; background:var(--sky); box-shadow:0 3px 0 #5FA5D6; font-size:13px; }

.tasks { display:flex; flex-direction:column; gap:9px; }
.task { display:flex; align-items:center; gap:10px; background:var(--paper); border:1.5px solid var(--soft);
  border-radius:18px; padding:11px 13px; font-size:14.5px; font-weight:600; flex-wrap:wrap; }
/* 第 4 项与其他任务同样式，强调只靠珊瑚橙的打卡按钮 */
.task .st { width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:800; background:var(--soft); color:var(--ink2); }
.task.done .st { background:var(--mint); color:#fff; }
.task .t-label { flex:1; white-space:nowrap; }
.task .t-act { flex-wrap:wrap; justify-content:flex-end; row-gap:6px; }
.t-chips { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:4px; }
.t-chips .pill { width:100%; text-align:center; padding:11px 6px; white-space:nowrap; }
.task .t-sub { width:100%; font-size:12px; color:var(--ink2); font-weight:500; padding-left:36px; }
.task .t-act { display:flex; gap:6px; }
.pill { font-size:12.5px; font-weight:700; border-radius:999px; padding:7px 14px; min-height:34px;
  background:var(--sun); color:#7A5C0D; box-shadow:0 3px 0 var(--sun-sh); }
.pill.coral { background:var(--coral); color:#fff; box-shadow:0 3px 0 var(--coral-sh); }
.pill.ghost { background:var(--skybg); color:#3F7FB5; box-shadow:0 3px 0 #BBD9EF; }
.pill:disabled { opacity:.55; box-shadow:none; transform:none; }
.listen-now { width:100%; padding-left:36px; font-size:13px; color:#3F7FB5; font-weight:600; min-height:1.3em; }
.all-done { background:var(--mintbg); color:#2E8A63; border-radius:18px; padding:13px 15px;
  font-weight:700; font-size:14px; text-align:center; }

/* ---- 小抄 ---- */
.c-head { display:flex; align-items:baseline; gap:8px; }
.c-head b { font-size:20px; }
.c-head span { color:var(--ink2); font-size:12.5px; }
#cheat-cards { display:flex; flex-direction:column; gap:12px; }
.scard { background:var(--paper); border:1.5px solid var(--soft); border-radius:20px; padding:13px 15px; }
.scard .en { font-size:17.5px; font-weight:700; }
.scard .cn { color:var(--ink2); font-size:13px; margin-top:2px; }
.scard .pills { display:flex; gap:8px; margin-top:10px; }
.tipbox { margin-top:11px; border-top:1.5px dashed var(--soft); padding-top:10px; font-size:12.5px; color:var(--ink2); }
.tipbox b { color:var(--ink); }
.c-cta { background:var(--sun); border-radius:16px; text-align:center; font-size:13.5px; font-weight:800;
  color:#7A5C0D; padding:12px; box-shadow:0 4px 0 var(--sun-sh); margin-top:14px; }

/* ---- 成长 ---- */
.streak { background:linear-gradient(160deg,#FF8A5C,var(--coral)); color:#fff; border-radius:24px;
  padding:16px 18px; box-shadow:0 6px 0 var(--coral-sh); }
.streak .n { font-size:32px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.streak p { margin:2px 0 0; font-size:12px; opacity:.92; }
.week { display:flex; justify-content:space-between; background:var(--paper); border:1.5px solid var(--soft);
  border-radius:18px; padding:11px 15px; }
.day { text-align:center; font-size:10px; color:var(--ink2); }
.day i { display:block; width:24px; height:24px; border-radius:50%; margin:0 auto 3px; background:var(--soft); }
.day.ok i { background:var(--mint); }
.day.today i { background:var(--paper); border:2px dashed var(--coral); }
.stats { display:flex; gap:10px; }
.stat { flex:1; background:var(--paper); border:1.5px solid var(--soft); border-radius:18px; padding:11px 13px; }
.stat b { font-size:22px; font-variant-numeric:tabular-nums; }
.stat span { display:block; font-size:11px; color:var(--ink2); }
.checkin { background:var(--coral); color:#fff; border-radius:20px; text-align:center; font-size:16px;
  font-weight:800; padding:16px; box-shadow:0 5px 0 var(--coral-sh); width:100%; }
.checkin.done { background:var(--mint); box-shadow:0 5px 0 var(--mint-sh); }
.memo-box { background:var(--paper); border:1.5px solid var(--soft); border-radius:18px; padding:13px 15px; }
.memo-title { font-size:13px; font-weight:700; margin-bottom:8px; }
.memo-row { display:flex; gap:8px; }
.memo-row input { flex:1; border:1.5px solid var(--soft); border-radius:12px; padding:8px 11px;
  font:inherit; font-size:13px; background:var(--cream); color:var(--ink); min-width:0; }
.memo-row input:focus { outline:2px solid var(--sun2); }
.memo-row button { background:var(--sun); border-radius:12px; padding:0 15px; font-weight:700; font-size:13px;
  color:#7A5C0D; box-shadow:0 3px 0 var(--sun-sh); }
.memo-list { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.memo-list li { font-size:12.5px; color:var(--ink2); background:var(--cream); border-radius:10px; padding:6px 10px; }
.memo-list li b { color:var(--ink); font-weight:600; margin-right:6px; }

/* ---- 游戏浮层 ---- */
.game { position:fixed; inset:0; z-index:50; background:var(--cream); max-width:440px; margin:0 auto;
  display:flex; flex-direction:column; gap:14px; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); }
.g-top { display:flex; align-items:center; }
.g-exit { width:36px; height:36px; border-radius:50%; background:var(--paper); border:1.5px solid var(--soft);
  color:var(--ink2); font-size:15px; }
.dots { display:flex; gap:6px; margin:0 auto; }
.dots i { width:9px; height:9px; border-radius:50%; background:var(--soft); transition:all .25s; }
.dots i.on { background:var(--coral); width:24px; border-radius:6px; }
.dots i.won { background:var(--mint); }
.g-bubble { font-size:18px; font-weight:700; border-radius:4px 18px 18px 18px;
  display:flex; gap:10px; align-items:center; }
.replay { width:32px; height:32px; border-radius:50%; background:var(--skybg); font-size:14px; flex:none; }
.g-cn { font-size:12px; color:var(--ink2); padding-left:4px; }
.opts { display:flex; flex-direction:column; gap:14px; flex:1; }
.opt { background:var(--paper); border:3px solid var(--soft); border-radius:28px; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:8px; min-height:120px; }
.opt .pic { font-size:74px; line-height:1.15; }
.opt .w { font-weight:700; color:var(--ink2); font-size:19px; }
.opt.win { border-color:var(--mint); background:var(--mintbg); }
.opt.win .w { color:#2E8A63; }
.opt.shake { animation:shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
.g-final { position:absolute; inset:0; background:var(--cream); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; border-radius:0; }
.g-final-emoji { font-size:72px; }
.g-final-text { font-size:30px; font-weight:800; color:#2E8A63; }
.g-final-btn { background:var(--mint); color:#fff; font-size:16px; font-weight:800; border-radius:18px;
  padding:14px 34px; box-shadow:0 5px 0 var(--mint-sh); margin-top:10px; }
/* ---- 磨耳朵 ---- */
.ov-title { margin:0 auto; font-size:15px; }
.ear-entry { display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--skybg); border:1.5px solid #CFE4F5; border-radius:18px; padding:12px 15px; font-size:24px; }
.ear-entry span { flex:1; display:flex; flex-direction:column; }
.ear-entry b { font-size:15px; }
.ear-entry small { font-size:11.5px; color:var(--ink2); font-weight:500; }
.ear-entry em { font-style:normal; width:36px; height:36px; border-radius:50%; background:var(--sky);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; box-shadow:0 3px 0 #5FA5D6; }
.ear-entry:active em { transform:translateY(2px); box-shadow:none; }
.ear-now { background:var(--paper); border:1.5px solid var(--soft); border-radius:26px;
  padding:30px 20px; text-align:center; display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.ear-now .ear-emoji { font-size:58px; line-height:1.2; }
.ear-now .en { font-size:25px; font-weight:700; }
.ear-now .ear-cn { color:var(--ink2); font-size:14px; }
.ear-count { text-align:center; color:var(--ink2); font-size:12.5px; }
.ear-toggle { width:92px; height:92px; border-radius:50%; background:var(--coral); color:#fff;
  font-size:32px; box-shadow:0 5px 0 var(--coral-sh); margin:auto auto 34px; }
.ear-toggle:active { transform:translateY(2px); box-shadow:none; }

/* ---- 动一动（TPR）：动作提示居中悬浮在画面中部 ---- */
.tpr-emoji { font-size:150px; text-align:center; margin-top:auto; line-height:1.2; }
.tpr-text { text-align:center; display:flex; flex-direction:column; gap:6px; }
.tpr-text .en { font-size:30px; font-weight:800; }
.tpr-text small { color:var(--ink2); font-size:15px; }
.tpr-acts { margin-top:auto; margin-bottom:20px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.tpr-ok { background:var(--mint); color:#fff; font-size:21px; font-weight:800; border-radius:22px;
  padding:19px 20px; width:100%; box-shadow:0 5px 0 var(--mint-sh); }
.tpr-ok:active { transform:translateY(2px); box-shadow:none; }

/* ---- 今日成就卡 ---- */
.achieve-wrap { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; }
#achieve-img { max-width:100%; max-height:100%; border-radius:22px; box-shadow:0 12px 32px rgba(74,59,50,.16); }
.achieve-dl { background:var(--coral); color:#fff; font-size:15px; font-weight:800;
  border-radius:18px; padding:13px; width:100%; box-shadow:0 4px 0 var(--coral-sh); }
.achieve-dl:active { transform:translateY(2px); box-shadow:none; }
.achieve-hint { text-align:center; font-size:12.5px; color:var(--ink2); padding-bottom:10px; }
.card-link { align-self:center; background:var(--lilac); color:#6C5A9E; font-weight:700;
  font-size:13px; border-radius:999px; padding:8px 18px; }

@media (prefers-reduced-motion: reduce) { .opt.shake { animation:none; } .dots i { transition:none; } }