/* 幼乐学堂 · 全局样式 —— 幼儿向色块风，低开销科技感，无模糊/闪烁 */
:root{
  --ink:#1f2a44; --paper:#ffffff; --bg:#f4f7ff;
  --brand:#ff7a3d; --brand2:#ffb347;
  --green:#4caf7d; --blue:#3b82f6; --purple:#8b5cf6; --pink:#ec4899; --red:#ef4444; --teal:#14b8a6;
  --line:#dbe3f2; --shadow:0 2px 6px rgba(31,42,68,.08);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:18px;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;}
/* 所有可点的卡片：关掉长按选中和双击缩放，手指点下去就是一次点击 */
.item-cell,.big-slot,.piece,.drag-item,.drop-zone,.module-card,.story-card,
.book-arrow,.nav button,.cat-tabs button,.diff-chip,.pzl-type,.hero-parent{
  touch-action:manipulation;-webkit-user-select:none;user-select:none;}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:10px 16px;background:var(--paper);box-shadow:var(--shadow);flex-wrap:wrap;}
.topbar .brand{font-size:24px;font-weight:900;color:var(--brand);letter-spacing:1px;}
.nav-toggle{display:none;width:44px;height:44px;border-radius:12px;background:var(--bg);
  align-items:center;justify-content:center;font-size:24px;line-height:1;color:var(--ink);}
.nav{display:flex;gap:6px;flex-wrap:wrap;flex:1;}
.nav button{padding:8px 14px;border-radius:999px;font-weight:700;color:var(--ink);
  background:var(--bg);border:2px solid transparent;}
.nav button:hover{background:#eaf0ff;}
.nav button.active{background:var(--brand);color:#fff;}
/* 手机端：顶部导航折叠为下拉菜单，标题始终保持显示 */
@media (max-width:760px){
  .topbar{flex-wrap:nowrap;}
  .topbar .brand{font-size:20px;}
  .nav-toggle{display:inline-flex;margin-left:auto;}
  .nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:4px;
    background:var(--paper);box-shadow:0 8px 20px rgba(31,42,68,.12);
    padding:10px 16px 14px;border-top:1px solid var(--line);}
  .nav.open{display:flex;}
  .nav button{width:100%;text-align:left;padding:14px 12px;border-radius:12px;font-size:19px;}
}

main{max-width:1080px;margin:0 auto;padding:18px 16px 80px;}

/* 通用卡片/按钮 */
.card{background:var(--paper);border-radius:18px;box-shadow:var(--shadow);padding:16px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;
  border-radius:999px;font-weight:800;font-size:20px;}
.btn.big{font-size:24px;padding:18px 26px;}
.btn.solid{background:var(--brand);color:#fff;}
.btn.line{background:#fff;color:var(--ink);border:3px solid var(--brand);}
.btn.green{background:var(--green);color:#fff;}
.btn:active{transform:translateY(1px);}

h1.module-title{font-size:28px;margin:4px 0 14px;color:var(--ink);}
h2.sub-title{font-size:22px;margin:16px 0 10px;color:var(--blue);}
.sec{margin-bottom:8px;}

/* 首页 */
.home-hero{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  border-radius:22px;padding:28px;margin-bottom:18px;}
.home-hero h1{margin:0 0 6px;font-size:34px;}
.home-hero p{margin:0;opacity:.95;font-size:20px;}
.diff-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0;}
.stage-card{background:var(--paper);border-radius:18px;box-shadow:var(--shadow);padding:18px;text-align:center;
  border:3px solid transparent;font-size:22px;font-weight:800;color:var(--ink);}
.stage-card small{display:block;font-size:15px;color:#6b7690;font-weight:600;margin-top:4px;}
.stage-card.active{border-color:var(--blue);background:#eef4ff;}
.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px;}
.module-card{display:block;width:100%;background:var(--paper);border-radius:18px;box-shadow:var(--shadow);
  padding:22px;text-align:center;font-size:24px;font-weight:800;color:var(--ink);border:3px solid transparent;}
.module-card:hover{border-color:var(--brand);transform:translateY(-2px);}
.module-card .ico{font-size:48px;line-height:1;}
.module-card span{display:block;margin-top:8px;}
.module-card small{display:block;font-size:15px;color:#6b7690;font-weight:600;margin-top:4px;}

/* 认知模块 */
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;align-content:flex-start;margin:10px 0 16px;
  max-height:130px;overflow-y:auto;padding:2px;}
.cat-tabs button{padding:8px 14px;border-radius:999px;font-weight:800;background:var(--paper);
  box-shadow:var(--shadow);font-size:17px;}
.cat-tabs button.active{background:var(--blue);color:#fff;}
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;}
.item-cell{background:var(--paper);border-radius:16px;box-shadow:var(--shadow);padding:12px;text-align:center;}
.item-cell .img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#f0f4ff;}
.item-cell .name{font-weight:800;font-size:22px;margin-top:8px;}
.item-cell .sub{font-size:15px;color:#6b7690;font-weight:700;margin-top:2px;}

/* CSS/SVG 缩略图（颜色/形状/数字/拼音） */
.img.swatch{border:2px solid rgba(31,42,68,.06);}
.img.shape-ico{display:flex;align-items:center;justify-content:center;background:#f0f4ff;}
.img.shape-ico svg{width:72%;height:72%;}
.img.numcard{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#fff7ed,#ffedd5);gap:6px;padding:8px;border-radius:14px;}
.img.numcard .num{font-size:46px;font-weight:900;color:var(--brand);line-height:1;}
.img.numcard .numbox{display:flex;flex-wrap:wrap;gap:4px;width:100%;justify-content:center;max-width:120px;}
.img.numcard .dp{width:12px;height:12px;border-radius:50%;}
.img.numcard.sm .num{font-size:34px;line-height:1.05;}
.img.numcard.sm .numbox{gap:2px;max-width:104px;}
/* 拼音卡：整张卡就是一个大字母 */
.img.pycard{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#eef2ff,#e0e7ff);}
.img.pycard .py{font-weight:900;color:#4f46e5;line-height:1;}
/* emoji 卡（新增的 12 个生活类目 + 古诗词）：零图片资源，任意尺寸都清晰 */
.img.imgwrap.emo{background:#f0f4ff;}
.img.imgwrap.emo .em{font-size:72px;}
.ec-vehicle{background:linear-gradient(135deg,#e0f2fe,#bae6fd);}
.ec-body{background:linear-gradient(135deg,#ffe4e6,#fecdd3);}
.ec-vegetable{background:linear-gradient(135deg,#dcfce7,#bbf7d0);}
.ec-clothes{background:linear-gradient(135deg,#fae8ff,#f5d0fe);}
.ec-daily{background:linear-gradient(135deg,#eef2f7,#dbe3ee);}
.ec-instrument{background:linear-gradient(135deg,#ede9fe,#ddd6fe);}
/* 图片缩略图容器：图片加载失败时露出 emoji 兜底图，避免裂图 */
.img.imgwrap{position:relative;overflow:hidden;background:#f0f4ff;}
.img.imgwrap .em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:64px;line-height:1;}
.img.imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.zone-items .mini .img.imgwrap .em{font-size:30px;}
.drag-item .img.imgwrap .em{font-size:46px;}
.big-slot .img.imgwrap .em{font-size:72px;}
.big-slot .img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;}
.big-slot .img.swatch{border:3px solid rgba(255,255,255,.8);}
.big-slot .img.shape-ico{background:#eef4ff;}
.big-slot .img.numcard{background:linear-gradient(135deg,#fff7ed,#ffedd5);}
.big-slot .img.numcard .num{font-size:40px;}
.big-slot .img.emo .em{font-size:84px;}
.big-slot .slot-name{font-weight:800;font-size:22px;margin-top:6px;}
.quiz-bar{display:flex;align-items:center;gap:12px;justify-content:space-between;background:var(--teal);
  color:#fff;padding:14px 16px;border-radius:16px;margin-bottom:14px;flex-wrap:wrap;}
.quiz-bar b{font-size:22px;}
.item-opt{border:4px solid transparent;}
.item-opt.correct{border-color:var(--green);}
.item-opt.wrong{border-color:var(--red);}

/* 游戏 */
.game-shell{background:var(--paper);border-radius:18px;box-shadow:var(--shadow);padding:20px;}
.slot-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.big-slot{width:150px;text-align:center;cursor:pointer;}
.big-slot .img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;border:4px solid transparent;background:#f0f4ff;}
.big-slot.sel .img,.big-slot:hover .img{border-color:var(--blue);}
.prompt-box{background:var(--brand);color:#fff;padding:14px 18px;border-radius:16px;text-align:center;
  font-size:24px;font-weight:800;margin-bottom:16px;}
/* 拼图 */
.puzzle-board{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:520px;margin:0 auto;}
.piece{aspect-ratio:1/1;border-radius:12px;cursor:pointer;background-size:200% 200%;background-repeat:no-repeat;border:3px solid #fff;box-shadow:var(--shadow);}
.piece.sel{border-color:var(--blue);outline:3px solid rgba(59,130,246,.4);}
/* 分类拖拽 */
.drop-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:14px 0;}
.drop-zone{flex:1 1 200px;min-height:150px;background:#eef4ff;border:3px dashed var(--blue);border-radius:16px;
  padding:12px;text-align:center;font-size:22px;font-weight:800;}
.drop-zone.hit{border-color:var(--green);background:#e7f8ee;}
.drag-pool{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.drag-item{width:120px;cursor:grab;background:var(--paper);border-radius:14px;padding:8px;box-shadow:var(--shadow);text-align:center;font-weight:800;}
.drag-item .img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:#f0f4ff;pointer-events:none;}
.drag-item.dragging{opacity:.4;}
.zone-items{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:80px;margin-top:8px;}
.zone-items .mini{width:60px;font-size:12px;background:#fff;border-radius:10px;padding:4px;box-shadow:var(--shadow);text-align:center;}
.zone-items .mini img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;}

/* 家长面板 */
input[type=password],input[type=text],input[type=date]{font:inherit;padding:12px 14px;border-radius:12px;
  border:2px solid var(--line);width:100%;font-size:20px;}
.ck-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:12px 0;}
.ck-list label{background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:12px;font-size:20px;font-weight:700;
  display:flex;align-items:center;gap:10px;}
.ck-list input[type=checkbox]{width:24px;height:24px;}
.checkin-row{display:flex;gap:10px;align-items:center;margin:10px 0;}
.muted{color:#6b7690;font-size:15px;}

/* 通用反馈提示条 */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:var(--green);color:#fff;
  padding:14px 22px;border-radius:999px;font-weight:800;font-size:20px;z-index:99;box-shadow:0 6px 18px rgba(0,0,0,.25);}
.toast.err{background:var(--red);}

.empty{text-align:center;color:#6b7690;padding:40px 10px;font-size:20px;}

/* 模块内难度选择 */
.diff-chip-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--paper);
  border-radius:16px;box-shadow:var(--shadow);padding:10px 14px;margin-bottom:12px;}
.diff-chip-row .diff-label{font-weight:900;color:var(--ink);font-size:18px;}
.diff-chip{padding:8px 18px;border-radius:999px;font-weight:800;background:var(--bg);color:var(--ink);
  border:2px solid var(--line);}
.diff-chip.active{background:var(--brand);color:#fff;border-color:var(--brand);}

/* 首页家长面板按钮 */
.hero-parent{margin-top:16px;background:#fff;color:var(--brand);font-size:20px;font-weight:900;}

/* 拼图类型选择 */
.puzzle-types{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 12px;}
.pzl-type{padding:8px 16px;border-radius:999px;font-weight:800;background:var(--paper);
  box-shadow:var(--shadow);font-size:18px;}
.pzl-type.active{background:var(--blue);color:#fff;}

/* 英文学习 */
.img.emoji{display:flex;align-items:center;justify-content:center;font-size:60px;background:#fff7ed;}
.en-cell .en{font-weight:900;font-size:24px;color:var(--purple);margin-top:2px;letter-spacing:.5px;}
.en-cell .name{font-size:18px;color:#6b7690;margin-top:4px;}

/* 讲故事：书目选择 */
.story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:8px;}
.story-card{background:var(--paper);border-radius:18px;box-shadow:var(--shadow);padding:12px;text-align:center;
  border:3px solid transparent;}
.story-card:hover{border-color:var(--brand);transform:translateY(-2px);}
.story-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#eef2fb;}
.story-card b{display:block;font-size:22px;margin-top:8px;color:var(--ink);}
.story-card span{display:inline-block;font-size:15px;color:#fff;background:var(--brand);border-radius:999px;
  padding:2px 12px;margin-top:6px;font-weight:700;}

/* 讲故事：阅读页 */
.book-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tag-pill{background:var(--blue);color:#fff;font-size:14px;font-weight:700;border-radius:999px;padding:3px 12px;}
.back-btn{margin-bottom:12px;}
.book-image{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper);max-width:760px;margin:0 auto;}
.book-image img{width:100%;display:block;}
.book-text{max-width:760px;margin:12px auto 0;background:#fff8ec;border:2px solid #ffe0b3;border-radius:18px;
  padding:18px 22px;font-size:26px;font-weight:700;color:#5b3a1e;line-height:1.8;text-align:center;min-height:120px;}
.book-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;}
.page-ind{font-weight:800;font-size:20px;}
.book-arrow{width:64px;height:64px;font-size:32px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;}
.book-arrow:disabled{background:#c4cede;}

/* 分类迷你卡（支持颜色/形状等非图片缩略图） */
.zone-items .mini{width:72px;font-size:12px;background:#fff;border-radius:10px;padding:4px;
  box-shadow:var(--shadow);text-align:center;}
.zone-items .mini .img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;background:#f0f4ff;}
.zone-items .mini .num{font-size:26px;}
.zone-items .mini .numbox .dp{width:8px;height:8px;}
.drag-item .numcard{padding:4px;}
.drag-item .num{font-size:30px;}
/* 小尺寸容器里的 emoji 也要跟着缩，否则会顶出卡片 */
.drag-item .img.emo .em{font-size:56px;}
.zone-items .mini .img.emo .em{font-size:30px;}
.zone-items .mini .img.numcard .num{font-size:22px;}
/* 分类拖拽：选中态 */
.drag-item.sel{outline:4px solid var(--blue);outline-offset:2px;}

/* 学古诗：诗单 */
.poem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:8px;}
.poem-card{background:var(--paper);border-radius:18px;box-shadow:var(--shadow);padding:12px;text-align:center;
  border:3px solid transparent;}
.poem-card:hover{border-color:var(--brand);transform:translateY(-2px);}
.poem-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#fdf6e3;display:block;}
.poem-card b{display:block;font-size:22px;margin-top:8px;color:var(--ink);}
.poem-card span{display:inline-block;font-size:15px;color:#fff;background:var(--brand);border-radius:999px;
  padding:2px 12px;margin-top:6px;font-weight:700;}

/* 学古诗：详情页（插图 + 全文 + 白话小提示） */
.poem-detail{max-width:760px;margin:0 auto;}
.poem-figure{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#fdf6e3;margin-bottom:14px;}
.poem-figure img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;}
.poem-figure.noimg{display:none;}
.poem-title{font-size:32px;margin:6px 0 2px;text-align:center;color:var(--ink);}
.poem-author{text-align:center;color:#6b7690;font-size:17px;font-weight:700;margin:0 0 14px;}
.poem-lines{background:#fff8ec;border:2px solid #ffe0b3;border-radius:18px;padding:20px 18px;
  display:flex;flex-direction:column;gap:10px;align-items:center;}
.poem-line{font-size:28px;font-weight:800;color:#5b3a1e;line-height:1.5;letter-spacing:2px;
  border-radius:12px;padding:2px 12px;}
.poem-line.on{background:#ffe0b3;}
.poem-tip{margin-top:14px;background:#eef7ff;border-radius:14px;padding:14px 16px;font-size:18px;
  color:#284b73;font-weight:700;line-height:1.7;}
.poem-actions{display:flex;justify-content:center;margin-top:16px;}
.poem-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;}
.poem-nav .btn[disabled]{opacity:.4;cursor:default;}
.poem-idx{font-weight:800;color:#6b7690;}