:root{
  --bg:#FFF8EC; --ink:#3B2E2A; --dim:#8C7B72;
  --y:#FFCE3A; --pink:#FF8FAB; --green:#5FD068; --blue:#4D96FF; --purple:#A66CFF;
  --card:#FFFFFF; --line:rgba(59,46,42,.10);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(circle at 12% 4%, #FFE9B0 0%, transparent 42%),
    radial-gradient(circle at 92% 92%, #D9F0FF 0%, transparent 40%),
    var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  min-height:100dvh; -webkit-user-select:none; user-select:none; touch-action:manipulation;
  overflow-x:hidden;
}
header{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-top)) 16px;padding-top:calc(12px + env(safe-area-inset-top));
  background:rgba(255,248,236,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.back{width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:var(--ink);
  font-size:19px;line-height:1;box-shadow:0 2px 8px rgba(59,46,42,.10);cursor:pointer;flex:0 0 auto}
.back[hidden]{display:none}
.brand{flex:1;font-size:17px;font-weight:700;letter-spacing:.5px;text-align:center;padding-right:0}
.stars{display:flex;align-items:center;gap:5px;background:#fff;border-radius:20px;padding:6px 12px;
  font-size:15px;font-weight:700;box-shadow:0 2px 8px rgba(59,46,42,.08)}
.stars b{color:#E8A200;font-variant-numeric:tabular-nums}
main{padding:16px 16px calc(28px + env(safe-area-inset-bottom))}
.screen{display:none;animation:fade .25s ease}
.screen.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.hello{font-size:15px;color:var(--dim);margin:6px 4px 14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{
  border:0;border-radius:26px;background:var(--card);padding:20px 14px 18px;text-align:left;
  box-shadow:0 6px 20px rgba(59,46,42,.09);cursor:pointer;color:var(--ink);
  display:flex;flex-direction:column;gap:6px;min-height:132px;position:relative;overflow:hidden;
  transition:transform .12s ease}
.card:active{transform:scale(.96)}
.card .ico{font-size:40px;line-height:1}
.card .tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.card:last-child{grid-column:1/-1;min-height:96px;flex-direction:row;align-items:center;gap:16px;padding:18px 20px}
.card:last-child .ico{font-size:36px}
.card:last-child:after{width:132px;height:132px;right:-34px;bottom:-54px}
.card b{font-size:20px;font-weight:800}
.card i{font-style:normal;font-size:12.5px;color:var(--dim)}
.card:after{content:'';position:absolute;right:-26px;bottom:-26px;width:86px;height:86px;border-radius:50%;opacity:.22}
.c1:after{background:var(--y)} .c2:after{background:var(--pink)} .c3:after{background:var(--green)}
.c4:after{background:var(--blue)} .c5:after{background:var(--purple)}
.tip{text-align:center;color:var(--dim);font-size:12.5px;margin-top:22px;line-height:1.7}

.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--dim);border-radius:20px;
  padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.zcard{background:#fff;border-radius:30px;padding:26px 18px 22px;text-align:center;
  box-shadow:0 8px 24px rgba(59,46,42,.09);cursor:pointer}
.zcard .emoji{font-size:64px;line-height:1;margin-bottom:6px}
.zcard .hanzi{font-size:118px;line-height:1.05;font-weight:800;letter-spacing:4px;color:#2E2420}
.zcard .pinyin{font-size:22px;color:var(--pink);font-weight:700;letter-spacing:2px;margin-top:4px}
.zcard .word{font-size:15px;color:var(--dim);margin-top:8px}
.speak{margin-top:16px;border:0;border-radius:22px;background:#FFF2C9;color:#8A5A00;
  padding:11px 20px;font-size:14.5px;font-weight:700;cursor:pointer}
.znav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.znav button{border:0;border-radius:20px;background:#fff;padding:13px 20px;font-size:15px;font-weight:700;
  color:var(--ink);box-shadow:0 4px 14px rgba(59,46,42,.08);cursor:pointer}
.znav button:active{transform:scale(.96)}
.znav span{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}

.q{font-size:22px;font-weight:800;text-align:center;margin:6px 0 18px}
.q .qemoji{font-size:40px;vertical-align:-6px}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cell{aspect-ratio:1;border:0;border-radius:22px;background:#fff;font-size:38px;cursor:pointer;
  box-shadow:0 4px 14px rgba(59,46,42,.07);display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease}
.cell:active{transform:scale(.94)}
.cell.hit{background:#E6FBEA;animation:pop .4s ease}
.cell.miss{animation:shake .38s ease}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.dots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.dot{width:8px;height:8px;border-radius:50%;background:#E5D9CE}
.dot.on{background:var(--green)}
.dot.cur{background:var(--y);transform:scale(1.35)}

.board.pair{grid-template-columns:repeat(4,1fr);gap:9px}
.pcard{aspect-ratio:.78;position:relative;border:0;background:transparent;padding:0;cursor:pointer;perspective:600px}
.pcard .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .32s ease;border-radius:18px}
.pcard.open .inner,.pcard.done .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:18px;display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;font-size:34px}
.face.back{background:linear-gradient(160deg,#FFD86B,#FF9F68);box-shadow:0 4px 12px rgba(59,46,42,.10)}
.face.front{background:#fff;transform:rotateY(180deg);box-shadow:0 4px 12px rgba(59,46,42,.10)}
.pcard.done .face.front{background:#EAFBEE}
.pcard.done{opacity:.92}

.countArea{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;
  min-height:240px;background:#fff;border-radius:28px;padding:18px;box-shadow:0 6px 20px rgba(59,46,42,.07)}
.citem{font-size:46px;line-height:1;transition:transform .15s ease;cursor:pointer}
.citem.counted{transform:scale(1.06);filter:saturate(.7);opacity:.75}
.answers{display:flex;gap:12px;justify-content:center;margin-top:18px}
.answers button{width:58px;height:58px;border:0;border-radius:20px;background:#fff;font-size:24px;font-weight:800;
  color:var(--ink);box-shadow:0 4px 14px rgba(59,46,42,.08);cursor:pointer}
.answers button:active{transform:scale(.94)}
.answers button.hit{background:#E6FBEA}
.answers button.miss{animation:shake .38s ease}

.pads{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.pad{height:min(26vh,150px);border:0;border-radius:26px;opacity:.55;cursor:pointer;transition:opacity .12s,transform .12s}
.pad.lit{opacity:1;transform:scale(1.03)}
.pad.p0{background:#FF6B6B} .pad.p1{background:#FFCE3A} .pad.p2{background:#5FD068} .pad.p3{background:#4D96FF}

.overlay{position:fixed;inset:0;z-index:50;background:rgba(46,36,32,.55);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:24px}
.overlay.on{display:flex}
.sheet{background:#fff;border-radius:30px;padding:30px 24px;text-align:center;max-width:340px;width:100%;
  animation:pop .35s ease}
.sheet .big{font-size:58px;line-height:1}
.sheet h3{margin:12px 0 6px;font-size:21px}
.sheet p{margin:0 0 18px;color:var(--dim);font-size:14px;line-height:1.6}
.sheet button{border:0;border-radius:22px;background:var(--ink);color:#fff;padding:13px 26px;font-size:15px;
  font-weight:700;cursor:pointer}
.float{position:fixed;z-index:60;font-size:26px;font-weight:800;color:#E8A200;pointer-events:none;
  animation:up .8s ease forwards}
@keyframes up{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-58px)}}