:root{
  --bg:#FFF4E0; --ink:#3A2E2A; --ink-soft:#8A7A70; --card:#FFFFFF;
  --shadow:0 6px 0 rgba(58,46,42,.12);
  --radius:28px;
  --good:#4CC38A; --bad:#FF6B6B; --star:#FFC531;
  --font:"Baloo 2","PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;overflow:hidden;
  background-image:radial-gradient(circle at 10% 10%,#FFE7BD 0 60px,transparent 61px),
                   radial-gradient(circle at 92% 88%,#FFE0E6 0 90px,transparent 91px);
}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0;}
#app{
  height:100%;max-width:960px;margin:0 auto;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 16px);
}
.screen{flex:1;display:flex;flex-direction:column;min-height:0;animation:enter .28s ease-out;}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- top bar ---------- */
.bar{display:flex;align-items:center;gap:12px;min-height:64px;}
.bar h1{flex:1;margin:0;font-size:28px;line-height:1.1;font-weight:800;}
.bar h1 small{display:block;font-size:15px;font-weight:600;color:var(--ink-soft);}
.round{
  width:56px;height:56px;border-radius:50%;background:var(--card);box-shadow:var(--shadow);
  display:grid;place-items:center;font-size:26px;flex:none;transition:transform .1s;
}
.round:active,.press:active{transform:translateY(3px) scale(.97);box-shadow:0 3px 0 rgba(58,46,42,.12);}
.stars{display:flex;align-items:center;gap:6px;background:var(--card);box-shadow:var(--shadow);
  border-radius:999px;padding:8px 16px;font-size:22px;font-weight:800;}

/* ---------- home ---------- */
.hello{margin:8px 4px 16px;}
.hello .big{font-size:34px;font-weight:800;line-height:1.1;}
.hello .sub{font-size:16px;color:var(--ink-soft);}
.scroll{flex:1;overflow-y:auto;margin:0 -16px;padding:4px 16px 24px;-webkit-overflow-scrolling:touch;}
.themes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(min-width:640px){.themes{grid-template-columns:repeat(3,1fr);gap:22px;}}
.theme{
  position:relative;background:var(--c);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 16px 16px;text-align:left;color:#fff;overflow:hidden;aspect-ratio:1/1.05;
  display:flex;flex-direction:column;justify-content:flex-end;transition:transform .1s;
}
.theme::before{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.18);}
.theme .emo{position:absolute;top:12px;right:14px;font-size:clamp(56px,16vw,84px);filter:drop-shadow(0 4px 0 rgba(0,0,0,.08));}
.theme .en{font-size:clamp(24px,6vw,30px);font-weight:800;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.1);}
.theme .zh{font-size:16px;font-weight:600;opacity:.95;margin-top:2px;}
.progress{margin-top:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.35);overflow:hidden;}
.progress i{display:block;height:100%;background:#fff;border-radius:99px;}

/* ---------- word grid ---------- */
.words{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(min-width:640px){.words{grid-template-columns:repeat(5,1fr);gap:16px;}}
.word{
  position:relative;background:var(--card);border-radius:22px;box-shadow:var(--shadow);
  aspect-ratio:1/1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:transform .1s;border:4px solid transparent;
}
.word .v{font-size:clamp(40px,11vw,56px);line-height:1.1;}
.word .t{font-size:17px;font-weight:700;}
.word .z{font-size:12px;color:var(--ink-soft);margin-top:-4px;}
.word.seen::after{content:"⭐";position:absolute;top:4px;right:6px;font-size:14px;}
.swatch{width:1em;height:1em;border-radius:50%;background:var(--c);display:inline-block;
  box-shadow:inset 0 -.08em 0 rgba(0,0,0,.12);border:2px solid rgba(0,0,0,.06);}
.footer{padding-top:12px;}
.cta{
  width:100%;height:72px;border-radius:999px;background:var(--c,#FF8A5C);color:#fff;
  font-size:26px;font-weight:800;box-shadow:0 6px 0 rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;gap:10px;
}
.cta.ghost{background:var(--card);color:var(--ink);}

/* ---------- detail ---------- */
.stage{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:0;}
.flash{
  flex:1;max-width:460px;background:var(--card);border-radius:36px;box-shadow:0 10px 0 rgba(58,46,42,.12);
  padding:28px 20px 24px;text-align:center;border:6px solid var(--c);
}
.flash .pic{font-size:clamp(120px,38vw,200px);line-height:1.1;display:inline-block;}
.flash .pic.pop{animation:pop .5s;}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.95) rotate(4deg)}100%{transform:scale(1)}}
.flash .w{font-size:clamp(44px,12vw,64px);font-weight:800;line-height:1;margin-top:6px;color:var(--c-dark,var(--ink));}
.flash .z{font-size:20px;color:var(--ink-soft);margin-top:4px;}
.flash .row{display:flex;gap:12px;justify-content:center;margin-top:18px;}
.pill{height:60px;padding:0 22px;border-radius:999px;background:var(--bg);font-size:20px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:0 4px 0 rgba(58,46,42,.1);}
.pill.speaking{background:var(--c);color:#fff;}
.arrow{width:60px;height:60px;border-radius:50%;background:var(--card);box-shadow:var(--shadow);font-size:28px;display:grid;place-items:center;flex:none;}
.arrow[disabled]{opacity:.3;}
.dots{display:flex;gap:6px;justify-content:center;padding:14px 0 4px;flex-wrap:wrap;}
.dots i{width:10px;height:10px;border-radius:50%;background:rgba(58,46,42,.15);}
.dots i.on{background:var(--c);width:26px;border-radius:99px;}

/* ---------- game ---------- */
.gstars{display:flex;gap:4px;font-size:26px;}
.gstars span{filter:grayscale(1);opacity:.35;transition:all .3s;}
.gstars span.got{filter:none;opacity:1;animation:pop .5s;}
.prompt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 14px;}
.listen{
  width:112px;height:112px;border-radius:50%;background:var(--c);color:#fff;font-size:50px;
  display:grid;place-items:center;box-shadow:0 8px 0 rgba(0,0,0,.15);position:relative;
}
.listen::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:4px solid var(--c);opacity:0;}
.listen.pulse::after{animation:ring 1.2s ease-out infinite;}
@keyframes ring{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}
.q{font-size:24px;font-weight:700;}
.q b{color:var(--c-dark,var(--ink));}
.opts{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:center;max-width:560px;width:100%;margin:0 auto;}
.opt{
  background:var(--card);border-radius:28px;box-shadow:var(--shadow);aspect-ratio:1/1;
  display:grid;place-items:center;font-size:clamp(64px,20vw,110px);border:6px solid transparent;transition:transform .1s;
}
.opt.right{border-color:var(--good);background:#E8FFF2;animation:pop .5s;}
.opt.wrong{border-color:var(--bad);animation:shake .45s;}
.opt.dim{opacity:.35;}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}

/* ---------- result ---------- */
.result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;}
.result .trophy{font-size:140px;animation:pop 1s;}
.result h2{margin:0;font-size:40px;font-weight:800;}
.result .gstars{font-size:44px;}
.result .btns{display:flex;flex-direction:column;gap:14px;width:100%;max-width:380px;margin-top:20px;}

/* ---------- parent gate & settings ---------- */
.hold{position:relative;}
.hold svg{position:absolute;inset:-4px;width:64px;height:64px;transform:rotate(-90deg);pointer-events:none;}
.hold circle{fill:none;stroke:var(--c,#FF8A5C);stroke-width:4;stroke-dasharray:188;stroke-dashoffset:188;}
.hold.holding circle{transition:stroke-dashoffset 1.6s linear;stroke-dashoffset:0;}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:15px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;z-index:50;}
.toast.show{opacity:.92;}
.mask{position:fixed;inset:0;background:rgba(58,46,42,.45);display:flex;align-items:flex-end;justify-content:center;z-index:40;animation:fade .2s;}
@keyframes fade{from{opacity:0}}
.sheet{background:var(--card);width:100%;max-width:560px;border-radius:28px 28px 0 0;padding:22px 20px calc(env(safe-area-inset-bottom) + 22px);animation:up .25s ease-out;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;}
@keyframes up{from{transform:translateY(100%)}}
.sheet h3{margin:0 0 4px;font-size:22px;}
.sheet .note{color:var(--ink-soft);font-size:13px;margin:0 0 14px;}
.set{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px solid #F1E8DE;font-size:17px;}
.seg{display:flex;background:var(--bg);border-radius:999px;padding:4px;}
.seg button{padding:8px 14px;border-radius:999px;font-size:15px;}
.seg button.on{background:var(--card);box-shadow:0 2px 4px rgba(0,0,0,.08);font-weight:700;}
.switch{width:54px;height:32px;border-radius:99px;background:#E4D9CE;position:relative;transition:background .2s;}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.switch.on{background:var(--good);}
.switch.on::after{left:25px;}
.danger{color:var(--bad);font-size:16px;}

.confetti{position:fixed;top:-40px;font-size:28px;pointer-events:none;z-index:60;animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);}}
.hide-zh .z,.hide-zh .zh{display:none;}