:root{
  --pink:#ff9ec4; --pink-d:#ff6fa5; --pink-l:#ffe3ef; --pink-ll:#fff5fa;
  --grape:#b79bff; --sun:#ffd23f; --mint:#8fd9b0; --ink:#6b4358;
  --card:#ffffff; --line:#ffd9e8; --shadow:0 6px 16px rgba(255,130,180,.25);
  --radius:22px;
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Yuanti SC",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:#ffeef6;color:var(--ink);}
body{overflow-x:hidden;}

.app-shell{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#fff0f7,#ffe3ef 40%,#ffeede);}
.view{display:none;padding:14px 14px 90px;}
.view.active{display:block;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* 顶部 */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:rgba(255,240,247,.92);backdrop-filter:blur(6px);
  box-shadow:0 3px 12px rgba(255,140,185,.18);}
.avatar-box{width:52px;height:52px;flex:0 0 52px;}
.mouse{width:52px;height:52px;display:block;animation:bob 3s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-3px) rotate(2deg);}}
.who{flex:1;min-width:0;}
.nick{font-weight:800;font-size:17px;color:var(--pink-d);cursor:pointer;}
.nick::after{content:"✏️";font-size:11px;margin-left:4px;opacity:.6;}
.points{font-size:13px;color:#a8788f;margin-top:1px;}
.points b{color:var(--pink-d);}
.checkin-btn{border:none;cursor:pointer;font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(135deg,var(--sun),#ffb03f);padding:9px 13px;border-radius:999px;box-shadow:var(--shadow);}
.checkin-btn:disabled{background:#e9d3df;color:#fff;box-shadow:none;}
.checkin-btn.done{background:linear-gradient(135deg,var(--mint),#5fc98a);}

/* 标题 */
.h-title{font-size:22px;font-weight:800;color:var(--pink-d);margin:6px 2px 12px;}
.h-sub{font-size:13px;color:#b08aa0;margin:-6px 2px 12px;}

/* 首页卡片 */
.home-card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:14px;border:2px solid var(--pink-l);}
.home-card h3{margin:0 0 8px;font-size:16px;color:var(--ink);}
.tip{font-size:13px;color:#a8788f;line-height:1.6;}
.big-emoji{font-size:40px;text-align:center;margin:6px 0;}

/* 首页：年级选择（简约美观 · 响应式移动端） */
.grade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px;}
.grade-card{position:relative;background:linear-gradient(160deg,#ffffff,#fff3f9);border-radius:20px;padding:16px 8px 13px;
  text-align:center;box-shadow:var(--shadow);border:2px solid var(--pink-l);cursor:pointer;
  transition:transform .12s,box-shadow .12s;overflow:hidden;}
.grade-card:active{transform:translateY(2px) scale(.97);box-shadow:0 3px 9px rgba(255,130,180,.22);}
.grade-card .ge{font-size:32px;line-height:1;}
.grade-card .gn{font-weight:800;font-size:15px;color:var(--pink-d);margin-top:6px;}
.grade-card .gc{font-size:11px;color:#b08aa0;margin-top:2px;}
.gbar{height:6px;border-radius:999px;background:var(--pink-l);overflow:hidden;margin:9px 6px 4px;}
.gbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--sun),var(--pink-d));transition:width .4s;}
.gpct{font-size:10px;color:#c79bb0;font-weight:700;}
.home-quick{display:flex;gap:12px;margin-top:16px;}
.qk{flex:1;background:var(--card);border-radius:18px;padding:14px;text-align:center;font-weight:800;color:var(--pink-d);box-shadow:var(--shadow);border:2px solid var(--pink-l);cursor:pointer;transition:transform .12s;}
.qk:active{transform:scale(.95);}
@media (max-width:360px){
  .grade-grid{gap:9px;}
  .grade-card{padding:13px 5px 11px;}
  .grade-card .gn{font-size:14px;}
  .grade-card .ge{font-size:28px;}
  .gpct{font-size:9px;}
}

/* 按钮 */
.btn{border:none;cursor:pointer;font-weight:800;font-size:15px;color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--pink-d));padding:12px 16px;border-radius:999px;
  box-shadow:var(--shadow);transition:transform .1s;}
.btn:active{transform:scale(.95);}
.btn.alt{background:linear-gradient(135deg,var(--grape),#8f6bff);}
.btn.mint{background:linear-gradient(135deg,var(--mint),#4fb983);}
.btn.ghost{background:#fff;color:var(--pink-d);border:2px solid var(--line);box-shadow:none;}

/* 游戏网格 */
.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.game-tile{position:relative;background:var(--card);border-radius:20px;padding:14px 10px;text-align:center;
  box-shadow:var(--shadow);border:2px solid var(--pink-l);cursor:pointer;transition:transform .12s;}
.game-tile:active{transform:scale(.95);}
.game-tile .ge{font-size:34px;}
.game-tile .gn{font-weight:800;font-size:14px;margin-top:4px;color:var(--ink);}
.game-tile .lock{position:absolute;inset:0;background:rgba(110,80,100,.45);border-radius:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:800;}
.game-tile .lock .lk{font-size:30px;}
.game-tile .lock small{font-size:12px;opacity:.9;margin-top:4px;}

/* 朗读 */
.grade-row{display:flex;flex-wrap:wrap;gap:10px;}
.grade-pill{flex:1 1 28%;text-align:center;background:var(--card);border-radius:18px;padding:14px 6px;
  box-shadow:var(--shadow);border:2px solid var(--pink-l);cursor:pointer;font-weight:800;color:var(--pink-d);}
.grade-pill .e{font-size:26px;}
.char-cloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px;}
.tap-char{position:relative;width:64px;height:64px;border-radius:18px;background:#fff;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900;color:var(--ink);
  cursor:pointer;box-shadow:var(--shadow);transition:transform .1s;}
.tap-char:active{transform:scale(.9);background:var(--pink-l);}
.py-tag{font-size:11px;color:var(--grape);font-weight:700;}
/* 已学会留痕颜色标识 */
.tap-char.learned{border-color:var(--mint);background:#f1fbf5;}
.tap-char .lk-dot{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--mint),#4fb983);color:#fff;font-size:12px;line-height:22px;text-align:center;
  box-shadow:var(--shadow);z-index:2;}
.grade-pill.learned{border-color:var(--mint);background:#f6fcf9;}
.uprog{font-size:10px;color:#3aa86a;margin-top:4px;font-weight:800;}

/* 字卡详情：笔顺动画 + 描红临摹 */
.cd-overlay{position:fixed;inset:0;z-index:100;background:linear-gradient(180deg,#fff0f7,#ffe3ef);
  display:none;flex-direction:column;animation:fade .2s ease;}
.cd-overlay.show{display:flex;}
.cd-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;background:rgba(255,240,247,.96);
  box-shadow:0 2px 10px rgba(255,140,185,.18);}
.cd-bar .cd-title{flex:1;text-align:center;font-weight:800;color:var(--pink-d);font-size:15px;}
.cd-bar button{border:none;background:#fff;color:var(--pink-d);border-radius:999px;padding:8px 14px;font-weight:800;cursor:pointer;box-shadow:var(--shadow);transition:transform .1s;}
.cd-bar button:active{transform:scale(.92);}
.cd-bar .cd-speak{font-size:18px;padding:8px 12px;}
.cd-body{flex:1;overflow-y:auto;padding:14px 14px 30px;}
.cd-hero{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);border:2px solid var(--pink-l);margin-bottom:14px;}
.cd-picto-box{flex:0 0 auto;text-align:center;}
.cd-picto{width:104px;height:104px;border-radius:24px;background:linear-gradient(160deg,#fff3f9,#ffe3ef);
  display:flex;align-items:center;justify-content:center;font-size:62px;box-shadow:inset 0 0 0 2px var(--line);}
.cd-picto.seal{position:relative;background:linear-gradient(135deg,#ff6fa5,#e23e7e);color:#fff;font-size:54px;font-weight:900;}
.cd-char{flex:1;min-width:0;text-align:center;}
.cd-big{font-size:60px;font-weight:900;color:var(--ink);line-height:1;}
.cd-py{font-size:33px;color:var(--grape);font-weight:900;margin-top:0;margin-bottom:7px;letter-spacing:1px;}
.cd-words{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:center;margin-top:9px;}
.cd-words-label{flex:0 0 100%;font-size:12px;font-weight:800;color:var(--pink-d);text-align:center;margin-bottom:2px;}
.zw{font-size:14px;font-weight:800;color:var(--ink);background:var(--pink-l);border-radius:999px;padding:3px 11px;box-shadow:inset 0 0 0 1px var(--line);}
.cd-words-none{font-size:13px;color:#b08aa0;margin-top:8px;}
.cd-panel{background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);border:2px solid var(--pink-l);margin-bottom:14px;}
.cd-h{font-weight:800;color:var(--ink);font-size:15px;margin-bottom:8px;text-align:center;}
.cd-writer{display:flex;align-items:center;justify-content:center;min-height:248px;margin:0 auto;background:var(--pink-ll);border-radius:16px;border:2px dashed var(--line);}
.cd-toolbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
.cd-toolbar button{position:relative;overflow:hidden;flex:1 1 auto;min-width:62px;border:none;cursor:pointer;font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--pink-d));border-radius:999px;padding:10px 8px;
  box-shadow:0 4px 12px rgba(255,111,165,.38);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;}
.cd-toolbar button:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(255,111,165,.45);}
.cd-toolbar button:active{transform:scale(.9);filter:brightness(1.08);box-shadow:0 2px 7px rgba(255,111,165,.5);}
.cd-toolbar button::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.6);transform:translate(-50%,-50%) scale(0);opacity:.7;pointer-events:none;}
.cd-toolbar button:active::after{animation:cdripple .5s ease-out;}
@keyframes cdripple{from{transform:translate(-50%,-50%) scale(0);opacity:.7;}to{transform:translate(-50%,-50%) scale(22);opacity:0;}}
.cd-hint{font-size:13px;color:#b08aa0;margin-top:10px;text-align:center;}
.cd-retry{display:block;margin:10px auto 0;border:none;cursor:pointer;font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(135deg,var(--grape),#8f6bff);border-radius:999px;padding:9px 18px;box-shadow:var(--shadow);}
.cd-fallback{color:#b08aa0;font-size:13px;padding:30px 10px;line-height:1.6;}

/* 游戏进行中 */
.play-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.g-stage{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;border:2px solid var(--pink-l);}
.g-progress{height:10px;border-radius:999px;background:var(--pink-l);overflow:hidden;margin:8px 0 4px;}
.g-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--sun),var(--pink-d));transition:width .3s;}
.g-score{font-weight:800;font-size:15px;color:var(--pink-d);}
.g-prompt{text-align:center;font-size:18px;font-weight:800;margin:10px 0;color:var(--ink);}
.g-big{font-size:84px;font-weight:900;text-align:center;color:var(--pink-d);margin:6px 0;}
.g-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.g-opt{border:none;cursor:pointer;font-size:22px;font-weight:800;padding:18px 8px;border-radius:18px;
  background:#fff6fb;color:var(--ink);box-shadow:var(--shadow);transition:transform .1s;}
.g-opt:active{transform:scale(.95);}
.g-opt.ok{background:#d8f7e6;color:#2e9b5e;}
.g-opt.no{background:#ffd9e3;color:#d6336c;}
.g-opt:disabled{cursor:default;}
.g-opt.sm{font-size:18px;}

/* 记忆翻牌 */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.mem-cell{aspect-ratio:1;border-radius:14px;background:linear-gradient(135deg,var(--pink),var(--grape));
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:#fff;cursor:pointer;
  box-shadow:var(--shadow);user-select:none;transition:transform .15s;}
.mem-cell.flip{background:#fff;color:var(--ink);transform:rotateY(180deg) scale(1.02);}
.mem-cell.matched{background:#d8f7e6;color:#2e9b5e;pointer-events:none;}
.mem-cell.pinyin{font-size:16px;}

/* 朗读练习内嵌发音按钮 */
.speak-btn{border:none;cursor:pointer;background:var(--pink-l);color:var(--pink-d);border-radius:999px;
  font-size:13px;font-weight:800;padding:6px 12px;margin:4px 0;}

/* 我的 */
.me-card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  border:2px solid var(--pink-l);text-align:center;margin-bottom:14px;}
.me-avatar{width:96px;height:96px;margin:0 auto 8px;}
.me-avatar .mouse{width:96px;height:96px;}
.me-nick{font-size:20px;font-weight:800;color:var(--pink-d);}
.me-stat{display:flex;gap:10px;justify-content:center;margin:12px 0;}
.me-stat .b{flex:1;background:var(--pink-ll);border-radius:16px;padding:10px;}
.me-stat .b .v{font-size:22px;font-weight:900;color:var(--pink-d);}
.me-stat .b .l{font-size:12px;color:#a8788f;}

/* 底部导航 */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;
  display:flex;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  box-shadow:0 -4px 14px rgba(255,140,185,.18);z-index:20;padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
.tab{flex:1;border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  gap:2px;font-size:11px;font-weight:700;color:#c79bb0;padding:4px 0;}
.tab span{font-size:22px;}
.tab.active{color:var(--pink-d);}

/* Toast & 撒花 */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(30px);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:999px;font-weight:800;font-size:14px;
  opacity:0;pointer-events:none;transition:all .3s;z-index:90;box-shadow:var(--shadow);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden;}
.confetti i{position:absolute;top:-12px;width:10px;height:14px;border-radius:3px;animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.15;}}

.empty{text-align:center;color:#b08aa0;padding:40px 10px;font-size:14px;}
.pop{animation:pop .3s ease;}
@keyframes pop{0%{transform:scale(.6);}60%{transform:scale(1.1);}100%{transform:scale(1);}}