/* ===== 通用组件 ===== */

/* --- 大按钮（儿童触摸目标 >=64px） --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap);min-width:var(--tap);
  padding:0 28px;border-radius:var(--r-xl);
  font-size:var(--fs-md);font-weight:900;letter-spacing:1px;
  color:#fff;background:var(--kc-blue);
  box-shadow:0 6px 0 rgba(0,0,0,.12), var(--sh-1);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease;
}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.12);}
.btn[disabled]{opacity:.45;pointer-events:none;filter:grayscale(.4);}
.btn.green{background:var(--kc-green);}
.btn.yellow{background:var(--kc-yellow);color:#6B4E00;}
.btn.orange{background:var(--kc-orange);}
.btn.pink{background:var(--kc-pink);}
.btn.purple{background:var(--kc-purple);}
.btn.ghost{background:var(--kc-card);color:var(--kc-ink);border:3px solid var(--kc-line);box-shadow:0 5px 0 rgba(0,0,0,.06);}
.btn.lg{min-height:var(--tap-lg);padding:0 40px;font-size:var(--fs-lg);}
.btn.sm{min-height:52px;padding:0 20px;font-size:var(--fs-sm);border-radius:var(--r-l);}
.btn.round{width:var(--tap);height:var(--tap);padding:0;border-radius:50%;}
.btn.round.lg{width:var(--tap-lg);height:var(--tap-lg);}
.btn svg{width:30px;height:30px;}

/* --- 卡片 --- */
.card{
  background:var(--kc-card);border-radius:var(--r-l);
  padding:20px;box-shadow:var(--sh-1);
  border:3px solid #fff;
}
.card.tap:active{transform:scale(.97);}
.card.blue{background:var(--kc-blue-l);}
.card.green{background:var(--kc-green-l);}
.card.yellow{background:var(--kc-yellow-l);}
.card.pink{background:var(--kc-pink-l);}
.card.purple{background:var(--kc-purple-l);}
.card.orange{background:var(--kc-orange-l);}

/* --- 岛屿 / 关卡卡（学习地图） --- */
.island{
  position:relative;border-radius:var(--r-xl);
  padding:22px 20px;min-height:150px;
  color:#fff;box-shadow:var(--sh-2);
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
}
.island::after{
  content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,.16);
}
.island:active{transform:scale(.97);}
.island .ico{width:76px;height:76px;}
.island .name{font-size:var(--fs-lg);font-weight:900;letter-spacing:1px;}
.island .desc{font-size:var(--fs-xs);opacity:.92;font-weight:600;margin-top:4px;}
.island .lock{
  position:absolute;inset:0;background:rgba(60,50,40,.35);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(1px);
}
.island .badge-mini{position:absolute;right:14px;top:14px;}

/* 进度条 */
.pbar{height:16px;border-radius:99px;background:var(--kc-line);overflow:hidden;}
.pbar > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--kc-yellow),var(--kc-orange));transition:width var(--dur-slow) var(--ease);}

/* --- 星星计数 --- */
.starbox{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--kc-yellow-l);border-radius:99px;padding:6px 18px;
  font-size:var(--fs-md);font-weight:900;color:#8A6100;
}
.starbox svg{width:30px;height:30px;}

/* --- 徽章 --- */
.badge{
  width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#fff6d8,#FFC53D);
  box-shadow:0 4px 0 rgba(0,0,0,.1),var(--sh-1);
  font-size:44px;
}
.badge.off{background:#EFEAE1;filter:grayscale(1);opacity:.55;}

/* --- 顶部统计条 --- */
.stat{
  display:flex;align-items:center;gap:8px;
  background:#fff;border-radius:99px;padding:6px 16px;
  font-size:var(--fs-sm);font-weight:800;box-shadow:var(--sh-1);
}
.stat svg{width:28px;height:28px;}

/* --- 弹窗 --- */
#modal-layer{position:fixed;inset:0;pointer-events:none;z-index:900;}
.mask{
  position:absolute;inset:0;background:rgba(50,40,30,.5);
  display:flex;align-items:center;justify-content:center;
  padding:32px;pointer-events:auto;
  animation:fadeIn var(--dur) ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  width:min(720px,92%);background:var(--kc-card);border-radius:var(--r-xl);
  padding:32px;box-shadow:var(--sh-2);text-align:center;
  animation:pop var(--dur) var(--ease);max-height:86vh;overflow:auto;
}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
/* 悬浮按钮组：不占弹窗高度，用于内容较高的弹窗 */
.mask-corner{position:absolute;top:18px;right:18px;display:flex;gap:10px;z-index:3;}
.modal h3{font-size:var(--fs-xl);font-weight:900;margin-bottom:12px;}
.modal p{font-size:var(--fs-md);color:var(--kc-ink2);font-weight:600;line-height:1.6;}

/* --- Toast --- */
#toast-layer{position:fixed;left:0;right:0;top:12%;z-index:950;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:12px;}
.toast{
  background:rgba(58,50,38,.94);color:#fff;
  padding:14px 28px;border-radius:99px;
  font-size:var(--fs-sm);font-weight:800;
  animation:toastIn var(--dur) var(--ease);
  max-width:80%;text-align:center;
}
@keyframes toastIn{from{transform:translateY(-20px);opacity:0}to{transform:none;opacity:1}}

/* --- 撒花 / 星星特效 --- */
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:940;overflow:hidden;}
.fx-star,.fx-petal{
  position:absolute;will-change:transform,opacity;
  animation:fxFall linear forwards;
}
@keyframes fxFall{
  0%{transform:translate(0,0) rotate(0deg) scale(.6);opacity:0;}
  12%{opacity:1;}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1);opacity:0;}
}

/* --- 选项按钮（答题） --- */
.opt{
  min-height:96px;padding:16px 24px;border-radius:var(--r-l);
  background:#fff;border:4px solid var(--kc-line);
  font-size:var(--fs-lg);font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:14px;
  box-shadow:0 5px 0 rgba(0,0,0,.06);
  transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast),background var(--dur-fast);
  word-break:break-word;
}
.opt:active{transform:scale(.97);}
.opt.right{background:var(--kc-green-l);border-color:var(--kc-green);}
.opt.wrong{background:#FFF0F0;border-color:var(--kc-red);animation:shake .42s ease;}
.opt.dim{opacity:.4;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-7px)}80%{transform:translateX(7px)}}

/* --- 汉字大卡 --- */
.hanzi{
  font-size:var(--fs-hanzi);line-height:1;font-weight:900;
  color:var(--kc-ink);letter-spacing:4px;
}
.hanzi-card{
  background:#fff;border-radius:var(--r-xl);
  box-shadow:var(--sh-2);border:6px solid var(--kc-yellow-l);
  display:flex;align-items:center;justify-content:center;
  padding:20px;min-height:260px;
}

/* --- 田字格 --- */
.tianzi{position:relative;background:#fff;border:5px solid var(--kc-pink);border-radius:var(--r-m);overflow:hidden;}
.tianzi::before,.tianzi::after{content:'';position:absolute;background:repeating-linear-gradient(to right,var(--kc-pink) 0 6px,transparent 6px 12px);opacity:.55;}
.tianzi::before{left:0;right:0;top:50%;height:2px;transform:translateY(-1px);}
.tianzi::after{top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);
  background:repeating-linear-gradient(to bottom,var(--kc-pink) 0 6px,transparent 6px 12px);}
.tianzi .hz{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12em;color:#E8DFD2;}
.tianzi canvas,.tianzi svg{position:absolute;inset:0;width:100%;height:100%;}

/* --- 拼音卡 --- */
.py-card{
  min-width:120px;min-height:120px;border-radius:var(--r-l);
  background:#fff;border:4px solid var(--kc-blue-l);
  display:flex;align-items:center;justify-content:center;
  font-size:56px;font-weight:900;color:var(--kc-blue);
  box-shadow:0 5px 0 rgba(0,0,0,.06);
}
.py-card:active{transform:scale(.95);}
.py-card.on{background:var(--kc-blue);color:#fff;border-color:var(--kc-blue);}

/* --- 拼音文本（上方注音） --- */
.py-text{display:inline-flex;flex-direction:column;align-items:center;line-height:1.25;}
.py-text .py{font-size:.42em;color:var(--kc-blue);font-weight:700;letter-spacing:0;}
.py-text .hz{font-size:1em;font-weight:700;}

/* --- 步骤指示 --- */
.steps{display:flex;align-items:center;justify-content:center;gap:8px;}
.steps i{width:14px;height:14px;border-radius:50%;background:var(--kc-line);}
.steps i.on{background:var(--kc-orange);transform:scale(1.35);}
.steps i.done{background:var(--kc-green);}

/* --- 标签 --- */
.tag{
  display:inline-block;padding:4px 14px;border-radius:99px;
  font-size:var(--fs-xs);font-weight:800;background:var(--kc-line);color:var(--kc-ink2);
}
.tag.blue{background:var(--kc-blue-l);color:#2C6BB0;}
.tag.green{background:var(--kc-green-l);color:#3C8B3C;}
.tag.red{background:#FFE7EA;color:#C93B55;}
.tag.orange{background:var(--kc-orange-l);color:#C25A14;}

/* --- 空状态 --- */
.empty{padding:60px 24px;text-align:center;color:var(--kc-ink3);}
.empty .ico{font-size:88px;margin-bottom:12px;}
.empty .txt{font-size:var(--fs-md);font-weight:700;}

/* --- 图标按钮（返回等） --- */
.iconbtn{
  width:var(--tap);height:var(--tap);border-radius:50%;
  background:#fff;box-shadow:var(--sh-1);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.iconbtn:active{transform:scale(.9);}
.iconbtn svg{width:34px;height:34px;}

/* --- 段标题 --- */
.sec-title{font-size:var(--fs-lg);font-weight:900;display:flex;align-items:center;gap:10px;margin:8px 0 12px;}
.sec-title .bar{width:10px;height:34px;border-radius:99px;background:var(--kc-orange);}

/* --- 网格 --- */
.grid{display:grid;gap:18px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g5{grid-template-columns:repeat(5,1fr);}
.g6{grid-template-columns:repeat(6,1fr);}
@media (max-width:900px){
  .g4,.g5,.g6{grid-template-columns:repeat(3,1fr);}
}