/* ============================================================
 *  style.css —— 四五快读识字小程序 样式
 *  设计：超大字体、柔和配色、圆角大按钮、平板/手机自适应
 * ============================================================ */
:root{
  --bg:#FFF7F0; --card:#FFFFFF; --ink:#4A4A4A; --ink-soft:#8A8A8A;
  --primary:#FF9F68; --primary-d:#F57E45; --mint:#7FC8A9; --mint-d:#5BAE8C;
  --blue:#8EC5FF; --blue-d:#5FA8F5; --yellow:#FFD66B; --pink:#FFB4C4;
  --green:#9ED99B; --shadow:0 6px 18px rgba(255,150,100,.18);
  --radius:22px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;font-family:"PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);font-size:18px;line-height:1.5;
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img{display:block;}

/* ---------- 顶部状态条 ---------- */
#topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;background:linear-gradient(90deg,#FFE3D0,#FFD6E8);box-shadow:0 2px 10px rgba(0,0,0,.05);}
.top-left .logo{font-weight:800;font-size:20px;color:var(--primary-d);}
.top-right{display:flex;gap:10px;align-items:center;}
.top-pet{font-size:26px;background:#fff;border-radius:50%;width:42px;height:42px;display:flex;
  align-items:center;justify-content:center;box-shadow:var(--shadow);}
.top-gold{font-size:18px;font-weight:800;color:#C9821B;background:#FFF3D6;border-radius:30px;
  padding:6px 14px;box-shadow:var(--shadow);}

/* ---------- 主内容 ---------- */
#app{padding:16px 16px 96px;max-width:1000px;margin:0 auto;min-height:60vh;}

/* ---------- 底部导航 ---------- */
#nav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:space-around;
  background:#fff;border-top:3px solid #FFE0CE;padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 16px rgba(0,0,0,.06);}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;opacity:.55;
  transition:transform .15s;}
.nav-btn span{font-size:24px;}
.nav-btn em{font-style:normal;font-size:12px;font-weight:700;}
.nav-btn.active{opacity:1;color:var(--primary-d);transform:translateY(-3px);}

/* ---------- 通用卡片/按钮 ---------- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:20px;
  color:#fff;background:var(--primary);border-radius:40px;padding:14px 26px;box-shadow:var(--shadow);
  transition:transform .12s,filter .12s;}
.btn:active{transform:scale(.95);filter:brightness(.95);}
.btn.mint{background:var(--mint);} .btn.blue{background:var(--blue);}
.btn.yellow{background:var(--yellow);color:#8a6d00;} .btn.pink{background:var(--pink);}
.btn.ghost{background:#fff;color:var(--primary-d);border:2px solid var(--primary);box-shadow:none;}
.btn.block{display:flex;width:100%;}
.btn:disabled{opacity:.45;filter:grayscale(.4);cursor:not-allowed;}
.btn.sm{font-size:16px;padding:10px 18px;border-radius:30px;}

/* ---------- 首页 ---------- */
.home-hero{background:linear-gradient(135deg,#FFE9D6,#FFD9EC);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin-bottom:16px;text-align:center;}
.home-hero h1{margin:0 0 6px;font-size:26px;color:var(--primary-d);}
.home-hero p{margin:0;color:#9a6b52;font-weight:600;}
.due-banner{display:flex;align-items:center;gap:12px;background:#FFF3D6;border:2px dashed #FFC861;
  border-radius:18px;padding:14px 16px;margin-bottom:16px;}
.due-banner .big{font-size:34px;}
.due-banner .txt{font-weight:800;color:#B9791A;}
.stat-row{display:flex;gap:12px;}
.stat{flex:1;background:var(--card);border-radius:18px;padding:14px;text-align:center;box-shadow:var(--shadow);}
.stat .num{font-size:30px;font-weight:900;color:var(--primary-d);}
.stat .lab{font-size:13px;color:var(--ink-soft);font-weight:700;}
.progress-wrap{background:#fff;border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:16px;}
.bar{height:16px;background:#FFE6D6;border-radius:20px;overflow:hidden;margin-top:8px;}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--mint));border-radius:20px;
  transition:width .5s;}
.bar-lab{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ink-soft);}

/* 课程网格 */
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:12px;}
.lesson-cell{aspect-ratio:1;border-radius:18px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;font-weight:800;box-shadow:var(--shadow);background:#fff;font-size:15px;}
.lesson-cell .lv{font-size:12px;color:var(--ink-soft);}
.lesson-cell.done{background:linear-gradient(135deg,#C8F0D0,#A9E4F0);color:#2e7d4f;}
.lesson-cell.cur{background:linear-gradient(135deg,var(--yellow),#FFB36B);color:#7a4a00;
  animation:pulse 1.4s infinite;}
.lesson-cell.lock{background:#F0F0F0;color:#bbb;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ---------- 大字学习区 ---------- */
.stage{text-align:center;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 18px;margin-bottom:16px;}
.char-big{font-size:130px;font-weight:900;color:var(--primary-d);line-height:1.1;
  cursor:pointer;display:inline-block;transition:transform .12s;}
.char-big:active{transform:scale(1.08);}
.pinyin{font-size:40px;color:var(--blue-d);font-weight:800;letter-spacing:2px;margin:6px 0;}
.meaning{font-size:24px;font-weight:800;margin-top:6px;}
.emoji-big{font-size:64px;display:flex;justify-content:center;align-items:center;}
/* 直映识字插图：在 emoji-big / quiz-prompt 内自适应显示 */
.zhiying-img{width:180px;height:auto;max-width:100%;object-fit:contain;border-radius:12px;
  border:3px solid #FF8A5C;box-shadow:0 2px 8px rgba(255,138,92,.25);display:block;margin:0 auto;}
.word-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
.word-chip{background:#FFF1E2;border-radius:16px;padding:10px 18px;font-size:24px;font-weight:800;color:var(--primary-d);
  cursor:pointer;box-shadow:var(--shadow);}
.word-chip:active{transform:scale(.95);}
.step-tip{font-size:20px;font-weight:800;color:var(--mint-d);margin:4px 0 14px;}

/* 测验选项 */
.quiz-prompt{font-size:64px;margin:6px 0;display:flex;justify-content:center;align-items:center;}
.quiz-hint{font-size:22px;font-weight:800;color:var(--ink-soft);margin-bottom:14px;}
.options{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:560px;margin:0 auto;}
.opt{background:#fff;border:3px solid #FFE0CE;border-radius:20px;padding:18px;font-size:60px;font-weight:900;
  color:var(--primary-d);box-shadow:var(--shadow);transition:transform .12s,background .2s,border-color .2s;}
.opt:active{transform:scale(.95);}
.opt.right{background:#D7F5D9;border-color:var(--mint);}
.opt.wrong{background:#FFE0E0;border-color:#FF9A9A;animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* 结算 */
.result-big{font-size:60px;}
.reward-list{text-align:left;max-width:420px;margin:14px auto;font-size:18px;font-weight:700;}
.reward-list li{margin:6px 0;}

/* ---------- 宠物 ---------- */
.pet-stage{background:linear-gradient(135deg,#E7F6FF,#FFF0D9);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px;text-align:center;margin-bottom:16px;}
.pet-arena{position:relative;height:320px;display:flex;align-items:flex-start;justify-content:center;padding-top:4px;}
/* pet-body 动画状态（全身SVG用） */
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.pet-zzz{position:absolute;top:18px;right:30%;font-size:30px;animation:floatup 2s infinite;}
.pet-heart{position:absolute;font-size:34px;animation:floatup 1.4s infinite;color:#FF7AA2;}
@keyframes floatup{0%{opacity:0;transform:translateY(10px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translateY(-40px) scale(1.2)}}
.pet-state-name{font-size:26px;font-weight:900;margin-top:6px;}
.pet-state-desc{font-size:17px;color:var(--ink-soft);font-weight:700;}
.pet-meta{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap;}
.pet-meta .tag{background:#fff;border-radius:20px;padding:6px 12px;font-size:14px;font-weight:800;box-shadow:var(--shadow);}

/* 宠物状态进度条：饥饿程度 & 心情指数 */
.pet-bars{margin-top:14px;display:flex;flex-direction:column;gap:10px;padding:0 4px;}
.pbar-row{display:flex;align-items:center;gap:10px;}
.pbar-ic{font-size:20px;width:24px;text-align:center;flex:0 0 auto;}
.pbar{flex:1;height:18px;background:#fff;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.14);}
.pbar-fill{height:100%;border-radius:10px;transition:width .5s ease;}
.pbar-fill.good{background:linear-gradient(90deg,#9BE3C0,#5BAE8C);}
.pbar-fill.warn{background:linear-gradient(90deg,#FFE08A,#FFC44D);}
.pbar-fill.bad{background:linear-gradient(90deg,#FFB4A0,#FF7A6B);}
.pbar-txt{font-size:13px;font-weight:800;color:var(--ink-soft);flex:0 0 auto;min-width:78px;text-align:right;}
.feed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
.food-btn{background:#fff;border-radius:18px;padding:14px 10px;box-shadow:var(--shadow);text-align:center;
  transition:transform .12s;}
.food-btn:active{transform:scale(.95);}
.food-btn .fe{font-size:40px;}
.food-btn .fn{font-weight:800;font-size:16px;margin-top:4px;}
.food-btn .fc{font-size:14px;color:#C9821B;font-weight:800;margin-top:2px;}
.food-btn.disabled{opacity:.45;filter:grayscale(.5);}
.pet-pick{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.pet-pick .pick{background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow);text-align:center;width:180px;}
.pet-pick .pick .pe{font-size:90px;}

/* ---------- 家长 ---------- */
.parent-table{width:100%;border-collapse:collapse;font-size:14px;}
.parent-table th,.parent-table td{border:1px solid #FFE0CE;padding:8px 10px;text-align:center;}
.parent-table th{background:#FFF1E2;color:var(--primary-d);}
.parent-table tr:nth-child(even) td{background:#FFFBF6;}
.log-box{background:#fff;border-radius:16px;padding:12px;box-shadow:var(--shadow);max-height:300px;overflow:auto;font-size:14px;}
.log-item{display:flex;justify-content:space-between;padding:6px 4px;border-bottom:1px dashed #eee;}
.log-item .t{color:var(--ink-soft);}

/* ================= 字库总览 Gallery ================= */
.char-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin-top:10px;}
.char-gallery-card{background:#fff;border:2px solid var(--border);border-radius:16px;padding:10px 8px;text-align:center;transition:all .2s;cursor:pointer;position:relative;overflow:hidden;}
.char-gallery-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.12);}
.char-gallery-card.mastered{border-color:#7ECEC0;background:#F6FFF4;}
.char-gallery-card.weak{border-color:#FFB6C1;background:#FFF5F5;}
.char-gallery-card.learning{border-color:#A8D8EA;background:#F5FAFF;}
.char-gallery-img{width:125px;height:96px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background:#FAFAFA;border:1px solid #f0e8e0;}
.char-gallery-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.char-gallery-card:hover .char-gallery-img img{transform:scale(1.05);}
.char-gallery-ch{font-size:28px;font-weight:900;color:#333;margin-top:2px;letter-spacing:2px;}
.char-gallery-py{font-size:11px;color:var(--ink-soft);font-weight:600;margin-top:1px;}
.char-gallery-status{position:absolute;top:6px;right:8px;font-size:15px;z-index:2;}

/* 直映图库浏览器 */
.zhiying-browser-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-top:10px;}
.zhiying-browser-card{background:#fff;border:1.5px solid #eee;border-radius:10px;padding:6px;text-align:center;transition:border-color .2s;}
.zhiying-browser-card:hover{border-color:#E85D9A;}
.zhiying-browser-img{width:70px;height:70px;margin:0 auto 2px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;background:#FAFAFA;}
.zhiying-browser-img img{max-width:100%;max-height:100%;object-fit:contain;}
.zhiying-browser-ch{font-size:15px;font-weight:800;color:#444;margin-top:2px;}

/* 筛选按钮状态 */
.gallery-filter.active{background:var(--primary-d);color:#fff;border-color:var(--primary-d);}

/* ---------- toast / modal ---------- */
.toast{position:fixed;left:50%;top:20%;transform:translateX(-50%);background:rgba(74,74,74,.92);color:#fff;
  padding:12px 22px;border-radius:30px;font-weight:800;z-index:60;opacity:0;pointer-events:none;transition:opacity .25s;}
.toast.show{opacity:1;}
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;display:flex;align-items:center;
  justify-content:center;padding:20px;}
.modal-mask.hidden{display:none;}
.modal-box{background:#fff;border-radius:24px;padding:24px;max-width:440px;width:100%;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.25);max-height:86vh;overflow:auto;}
.modal-box h2{margin:0 0 10px;color:var(--primary-d);}
.modal-box p{font-weight:700;color:var(--ink);}
.hidden{display:none;}

/* 计时小条 */
.timer-strip{position:fixed;top:0;left:0;height:4px;background:var(--mint);z-index:40;width:0;transition:width .3s linear;}

/* 小屏适配 */
@media (max-width:480px){
  .char-big{font-size:100px;}
  .opt{font-size:48px;padding:14px;}
  .quiz-prompt{font-size:52px;}
}

/* ---------- 字库 ---------- */
.lib-h{font-weight:900;color:var(--primary-d);margin-bottom:10px;font-size:16px;}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px;}
.lib-char{background:#fff;border-radius:18px;padding:10px 4px;text-align:center;box-shadow:var(--shadow);
  cursor:pointer;transition:transform .12s;position:relative;}
.lib-char:active{transform:scale(.94);}
.lib-char .lc{font-size:34px;font-weight:900;color:var(--primary-d);line-height:1.1;}
.lib-char .lb{font-size:14px;margin-top:2px;}
.lib-char.ok{background:#EAFaf0;border:2px solid #9ED99B;}
.lib-char.weak{background:#FFF0F0;border:2px solid #F2B5B5;}

/* ---------- 游戏乐园 ---------- */
.game-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:6px;}
.game-card{background:#fff;border:3px solid #FFE6D2;border-radius:22px;padding:18px 12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--shadow);transition:transform .12s;}
.game-card:active{transform:scale(.95);}
.game-card:hover{transform:translateY(-3px);border-color:var(--primary);}
.gc-emoji{font-size:48px;}
.gc-title{font-size:20px;font-weight:900;color:var(--primary-d);}
.gc-sub{font-size:13px;font-weight:700;color:var(--ink-soft);text-align:center;}
.big-play{font-size:64px;background:var(--primary);color:#fff;border:none;border-radius:50%;width:120px;height:120px;
  display:flex;align-items:center;justify-content:center;margin:8px auto;cursor:pointer;box-shadow:0 8px 18px rgba(255,138,101,.4);}
.big-play:active{transform:scale(.93);}
.game-score{text-align:center;font-size:20px;font-weight:900;color:var(--primary-d);margin-top:14px;}
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:520px;margin:6px auto;}
.mem-card{aspect-ratio:1;border-radius:18px;background:#FFE6D2;border:3px solid #FFD0B5;font-size:42px;font-weight:900;
  color:var(--primary-d);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s;box-shadow:var(--shadow);}
.mem-card:active{transform:scale(.94);}
.mem-card.up{background:#fff;border-color:var(--primary);}
.mem-card.matched{background:#D7F5D9;border-color:var(--mint);color:#3a9d5d;}
@media (max-width:480px){
  .mem-grid{grid-template-columns:repeat(4,1fr);gap:8px;}
  .mem-card{font-size:32px;}
  .game-list{grid-template-columns:repeat(3,1fr);}
}

/* ---------- 宠物全身 + 换装 ---------- */
.dress-arena{height:320px;position:relative;}
.pet-body{width:160px;height:240px;margin:0 auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.1));}
.pet-body svg{width:100%;height:100%;}
/* 全身动画状态（替代原 pet-emoji 动画） */
.pet-body.lively{animation:bounce 1s infinite;}
.pet-body.normal{animation:sway 2.4s infinite ease-in-out;}
.pet-body.hungry1{animation:sway 4s infinite ease-in-out;opacity:.88;}
.pet-body.hungry2{animation:sway 6s infinite ease-in-out;opacity:.78;transform:scale(.97);}
.pet-body.weak{opacity:.65;transform:scale(.93);transition:all .8s;}
.pet-body.sleep{transform:translateY(20px) scale(.94);opacity:.55;filter:grayscale(.25) drop-shadow(0 2px 4px rgba(0,0,0,.08));}
.cloth{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;filter:drop-shadow(0 3px 4px rgba(0,0,0,.12));}
/* 衣服层z-index（服装SVG内部已包含正确坐标） */
.c-hat{z-index:10;}
.c-top{z-index:6;}
.c-dress{z-index:7;}
.c-pants{z-index:5;}
.c-shoes{z-index:8;}
.c-bag{z-index:9;}

/* 服装店 / 衣柜 网格 */
.cloth-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;}
.cloth-card{background:#fff;border-radius:18px;padding:10px 6px;text-align:center;box-shadow:var(--shadow);
  cursor:pointer;transition:transform .12s,border-color .12s;border:3px solid transparent;}
.cloth-card:active{transform:scale(.95);}
.cloth-card.on{border-color:var(--mint);background:#EAFaf0;}
.cloth-thumb{width:64px;height:64px;margin:0 auto;}
.cloth-name{font-size:14px;font-weight:800;color:var(--ink);margin-top:6px;}
.cloth-state{font-size:12px;font-weight:800;color:var(--mint-d);margin-top:2px;min-height:16px;}
.buy-btn{margin-top:8px;font-size:14px;font-weight:800;color:#fff;background:var(--primary);
  border-radius:20px;padding:7px 4px;}
.buy-btn.disabled{opacity:.45;filter:grayscale(.4);}
.buy-btn.owned{background:#EDEDED;color:var(--mint-d);}

/* ================= 小女孩衣橱样式 ================= */
.girl-showcase{background:linear-gradient(180deg,#FFF0F0 0%,#FFE8E0 40%,#FFDDE0 100%);border-radius:24px;padding:20px;text-align:center;margin-bottom:16px;box-shadow:inset 0 2px 12px rgba(255,138,101,.15),var(--shadow);}
.girl-stage-wrap{width:200px;height:340px;margin:0 auto;position:relative;}
.girl-arena{position:relative;width:100%;height:100%;}
.girl-body{width:100%;height:100%;filter:drop-shadow(0 8px 20px rgba(255,138,101,.25));}
.girl-body svg{width:100%;height:100%;}
/* 小女孩衣服层定位（服装SVG已用200x340坐标系，直接覆盖全身） */
.g-cloth{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
.g-hat{z-index:5;}
.g-top{z-index:2;}
.g-pants{z-index:1;}
.g-dress{z-index:2;} /* dress覆盖top+pants */
.g-shoes{z-index:3;}
.g-bag{z-index:4;}
.g-cloth svg{width:100%;height:100%;}
/* 衣柜卡片增强 */
.cloth-lock{font-size:11px;color:#BBB;margin-top:2px;}
.cloth-price{font-size:12px;color:#999;font-weight:700;margin-top:4px;}
/* 小女孩主题覆盖 */
.girl-showcase .cloth-card.on{border-color:#FF8A65;background:#FFF0F0;}
.girl-info{margin-top:10px;}