/* ===========================================================
   一年级板块升级：第一单元「表内乘法」的图形化互动组件
   （点一点 · 圈一圈 · 拖一拖 · 拼一拼）
   =========================================================== */

/* 盒子 */
.mbox{border-radius:22px;padding:16px 14px;display:flex;flex-direction:column;gap:12px}
.mbox.cream{background:#FFFDF8;border:2px dashed #EADCC6}
.mbox.mint{background:#F2FCF8;border:2px dashed #B4E8D8}
.mbox.sky{background:#F3F8FF;border:2px dashed #C3DAF8}
.mbox.sun{background:#FFFAEC;border:2px dashed #F1DDA6}
.mplane{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.mtip{text-align:center;font-size:15.5px;font-weight:800;color:#6C6355}
.mtip.warn{color:#C2568A}
.mnote{text-align:center;font-size:13.5px;font-weight:700;color:#9A9083}
.mact{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.mz{margin:0}

/* 算式卡片 */
.mez{
  width:100%;display:flex;justify-content:center;align-items:baseline;gap:8px;
  font-size:24px;font-weight:900;letter-spacing:1px;color:#4A4540;
  background:#fff;border-radius:16px;padding:10px 14px;box-shadow:inset 0 0 0 2px #F1E8DC;
  flex-wrap:wrap;
}
.mez>i{font-style:normal;color:#A79E90}
.mez.tight{gap:4px;font-size:21px}
.mez .fill{
  display:inline-grid;place-items:center;min-width:56px;height:46px;border-radius:13px;
  background:#FFF3EA;border:2.5px dashed #F5BFA6;color:#E45B39;font-size:21px;
}
.mez .fill.ok{animation:mezpop .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes mezpop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* 会动的数 */
.cnum{color:#E45B39;font-size:30px;transition:transform .14s}
.cnum.pop{animation:cnumPop .3s}
@keyframes cnumPop{0%{transform:scale(1)}45%{transform:scale(1.45) rotate(-4deg)}100%{transform:scale(1)}}

/* 点一点计数圆点 */
.dotbar{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;align-items:center}
.tapdot{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2.5px solid var(--gc,#F5BFA6);font-size:19px;font-weight:900;color:#BCAFA0;
  transition:transform .12s,background .18s,border-color .18s,color .18s;
}
.tapdot:active{transform:scale(.86)}
.tapdot.on{background:var(--gc,#FF7A59);border-color:var(--gc,#FF7A59);color:#fff;animation:tapPop .32s}
.tapdot.pulse{animation:dotRing .55s ease-out}
@keyframes tapPop{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes dotRing{0%{box-shadow:0 0 0 0 rgba(255,122,89,.55)}100%{box-shadow:0 0 0 16px rgba(255,122,89,0)}}

/* 几个几 · 手指点一点，圈成一组 */
.bunbox{display:flex;flex-wrap:wrap;justify-content:center;gap:11px}
.bundle{
  display:flex;gap:5px;align-items:center;padding:9px 12px;border-radius:16px;
  background:#fff;border:2.5px dashed #F1C9A8;transition:all .18s;--gc:#FF7A59;
}
.bundle.done{background:#FFF3EA;border-color:#FFC59F;border-style:solid}
.bundle.cur{border-color:#FF7A59;background:#FFF8F3;box-shadow:0 4px 0 rgba(255,122,89,.18)}
.bundle i{font-style:normal;font-size:20px;line-height:1;transition:transform .15s}
.bundle.cur i{font-size:21px}
.bdig{
  min-width:38px;height:38px;padding:0 8px;border-radius:12px;background:#fff3ea;
  border:2.5px solid #F5BFA6;color:#E45B39;font-size:20px;font-weight:900;
  display:grid;place-items:center;
}

/* 拖一拖放进篮子 */
.dndscene{position:relative;border-radius:18px;overflow:hidden;background:#FBF8F3;border:2px dashed #E7DDD1}
.it{
  position:absolute;display:grid;place-items:center;font-size:26px;line-height:1;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform .12s;
}
.it.dragging{z-index:40;transform:scale(1.4);filter:drop-shadow(0 6px 8px rgba(0,0,0,.2))}
.it.cell{font-size:22px;background:#fff;border-radius:9px;box-shadow:inset 0 0 0 1.5px #EFE6DA}
.it.locked{cursor:default}
.it.spawn{animation:itIn .3s backwards}
@keyframes itIn{from{transform:scale(0)}to{transform:scale(1)}}
.trayrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.tray{
  background:#fff;border:3px dashed #E0D5C6;border-radius:18px;padding:9px 10px 7px;
  min-width:96px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .18s;
}
.tray.hot{border-color:#FF9E7E;background:#FFF6F1;transform:translateY(-3px)}
.tray.full{border-style:solid;border-color:#9EE0CB;background:#F1FCF8}
.tray .slots{display:grid;gap:4px;place-items:center}
.slot{
  width:26px;height:26px;border-radius:9px;background:#F7F2EB;
  display:grid;place-items:center;font-size:17px;line-height:1;
}
.slot.on{background:#FFEFE4;animation:slotIn .3s backward}
@keyframes slotIn{from{transform:scale(0)}to{transform:scale(1)}}
.tray .tlab{font-size:11.5px;font-weight:800;color:#A79E90}

/* 圈一圈：选中就打勾 */
.circbar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;--gc:#2FC2A4}
.circ{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:#fff;border:2.5px dashed #CBD5D0;font-size:22px;line-height:1;transition:all .15s;
}
.circ.sel{background:var(--gc);border-color:var(--gc);border-style:solid;transform:translateY(-3px)}
.circ.done{opacity:.35}
.circ:active{transform:scale(.9)}

/* 一排一排数 */
.rows{display:flex;flex-direction:column;gap:8px;align-items:center}
.mrow{
  display:flex;gap:6px;align-items:center;padding:6px 9px;border-radius:14px;
  background:#fff;border:2.5px solid #F0E8DE;transition:all .18s;--gc:#4D96FF;
}
.mrow.hl{border-color:var(--gc);background:#F2F8FF;transform:scale(1.02)}
.mrow.lit i{animation:cellPop .3s}
.mrow i{font-style:normal;font-size:23px;line-height:1}
.mrow .mcnt{
  min-width:34px;height:30px;padding:0 6px;border-radius:10px;background:#F4F7FB;color:#96A0AC;
  font-size:15px;font-weight:900;display:grid;place-items:center;
}
.mrow.lit .mcnt{background:#DFECFF;color:#2B77E4}
@keyframes cellPop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
.mmode{display:inline-flex;background:#F1ECE5;border-radius:999px;padding:3px;gap:3px;margin:0 auto}
.mmode button{padding:6px 14px;border-radius:999px;font-size:14px;font-weight:800;color:#8C8377}
.mmode button.on{background:#fff;color:#E45B39;box-shadow:0 2px 6px rgba(0,0,0,.07)}
.mmode button i{font-style:normal;font-size:17px}

/* 口袋表格 */
.tlab{overflow-x:auto;padding-bottom:4px}
.gridt{border-collapse:separate;border-spacing:5px;margin:0 auto}
.gridt th{font-size:15px;font-weight:900;color:#A79E90;min-width:40px;padding:3px 5px}
.gridt th.cur{color:#E45B39;background:#FFF1E8;border-radius:11px}
.gridt td{
  min-width:44px;height:44px;border-radius:13px;background:#fff;text-align:center;
  box-shadow:inset 0 0 0 2.5px #F1E8DC;font-weight:900;font-size:16px;
  color:#C2B8AB;cursor:pointer;transition:all .15s;
}
.gridt td.tap{animation:dotRing .5s ease-out}
.gridt td.on{background:#FFF1E8;color:#E45B39;box-shadow:inset 0 0 0 2.5px #FFCFB8;font-size:21px}
.gridt td.peek{background:#F1FCF8;color:#1FAD91;box-shadow:inset 0 0 0 2.5px #B4E8D8;font-size:21px}
.gridt td.now{background:#E45B39;color:#fff;box-shadow:0 5px 0 #C94A2C;transform:translateY(-3px)}
.gridt td:active{transform:scale(.93)}
/* 表格左下角没有口诀的空位：只留一点底色，不能点 */
.gridt td.void{background:#F8F4ED;box-shadow:none;cursor:default}
.gridt td.void:active{transform:none}

/* 乘法小工厂 */
.mach{display:flex;gap:10px;justify-content:center;align-items:stretch}
.mcol{display:flex;flex-direction:column;gap:4px;justify-content:center;min-height:230px}
.mcol.lift i{opacity:0;transform:translateY(-24px)}
.mcol i{font-style:normal;font-size:22px;line-height:1;transition:all .4s ease}
.mcore{
  flex:1;min-width:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:#F7F2EA;border-radius:18px;box-shadow:inset 0 0 0 3px #EFE6DA;padding:14px 10px;
}
.mcore b{font-size:23px;color:#E45B39;letter-spacing:1px}
.mcore em{font-style:normal;font-size:16px;color:#C2B8AB;font-weight:800}
.mcore.cur{background:#FFF3EA;box-shadow:inset 0 0 0 3px #FFCFB8;animation:tapPop .4s}
.mcol.out i{animation:itIn .3s backwards}

/* 买东西 */
.shopbox{display:flex;flex-direction:column;align-items:center;gap:10px}
.shelfbox{background:#FFFDF8;border-radius:16px;padding:6px 8px}
.shelfbar{display:flex;gap:6px;font-size:34px;line-height:1.15}
.shelftag{font-size:14px;font-weight:900;color:#A79E90}
.pricetag{
  background:#FFF1E8;border-radius:999px;padding:6px 15px;font-size:20px;font-weight:900;color:#E45B39;
}
.pricetag b{font-size:26px}

/* 贴纸算式表 */
.stickrow{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.stick{
  display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:13px;
  padding:7px 13px;box-shadow:inset 0 0 0 2.5px #F1E8DC;font-size:17px;font-weight:900;color:#5E564C;
}
.stick em{font-style:normal;font-size:19px}

/* 数字飞快计数器 */
.quickcount{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.qcbtn{
  min-width:78px;padding:7px 4px;border-radius:14px;background:#fff;
  box-shadow:inset 0 0 0 2.5px #F1E8DC;text-align:center;transition:all .14s;cursor:pointer;
}
.qcbtn b{display:block;font-size:24px;color:#C2B8AB;transition:all .14s}
.qcbtn span{font-size:11.5px;font-weight:800;color:#B0A79A}
.qcbtn:active{transform:scale(.94)}
.qcbtn.on{background:#FFF3EA;box-shadow:inset 0 0 0 2.5px #FFCFB8}
.qcbtn.on b{color:#E45B39;animation:cnumPop .3s}
.qcbtn.on span{color:#E45B39}

/* 点一点提示条 */
.qbox .inq{
  font-size:13px;font-weight:900;color:#E45B39;background:#FFF1E8;
  border-radius:999px;padding:3px 12px;margin:0 0 8px;
}

/* 互动小舞台 */
.vis-box.plab{
  background:#FFFCF7;border:2px solid #F2E7DA;
  background-image:radial-gradient(#F3EADF 1.2px,transparent 1.2px);
  background-size:19px 19px;padding:15px 13px;
}
.vis-box.plab.inq{margin-top:8px}

/* 知识卡里的小舞台 */
.lc-body .vis-box.plab{background:#FFFDF9}
.lc-body .mbox{gap:10px}
.lc-body .mez{font-size:22px}

@media (max-width:560px){
  .mez{font-size:21px;gap:6px;padding:9px 10px}
  .mez .fill{min-width:48px;height:42px;font-size:19px}
  .tapdot{width:40px;height:40px;font-size:17px}
  .bundle{padding:7px 9px;gap:4px}
  .bundle i{font-size:17px}
  .bdig{min-width:33px;height:33px;font-size:18px}
  .mrow i{font-size:20px}
  .mrow .mcnt{min-width:29px;height:27px;font-size:13px}
  .gridt td{min-width:37px;height:38px;font-size:14px}
  .gridt td.on,.gridt td.peek{font-size:18px}
  .gridt th{font-size:13.5px;min-width:32px}
  .mcore{min-width:96px}
  .mcore b{font-size:20px}
  .tray{min-width:82px;padding:7px 8px 6px}
  .slot{width:23px;height:23px;font-size:15px}
  .circ{width:41px;height:41px;font-size:19px}
  .it{font-size:22px}
  .it.cell{font-size:19px}
  .shelfbar{font-size:27px}
  .stickrow{gap:7px}
  .stick{padding:6px 10px;font-size:15px}
  .qcbtn{min-width:66px}
  .qcbtn b{font-size:21px}
}