/* ============ 3D 立体效果层（积分 + 学习 + 商店） ============
   全部用 CSS transform-3d 实现，不加 WebGL，老平板也不卡
   ---------------------------------------------------------- */

/* 全局透视：让子元素的 translateZ / rotateX / rotateY 有立体纵深 */
.wrap{perspective:1400px;perspective-origin:50% 0%}

/* —— 首页积分主卡：立体浮起 + 轻微漂浮呼吸 —— */
.hero{
  transform-style:preserve-3d;
  box-shadow:0 18px 40px rgba(79,140,255,.22), 0 4px 0 #e6eefc, 0 30px 60px rgba(79,140,255,.12);
  animation:heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{transform:rotateX(0deg) rotateY(0deg)}
  50%{transform:rotateX(1.6deg) rotateY(-1.8deg)}
}

/* —— 累计积分大数字：浮雕 + 变化时 3D 弹起 —— */
.score{
  /* 这个数字是渐变透明字（background-clip:text），不能用 text-shadow，否则糊成一坨 */
  filter:drop-shadow(0 3px 5px rgba(79,140,255,.35)) drop-shadow(0 8px 18px rgba(34,197,94,.18));
  transform-style:preserve-3d;
}
.score.pop{animation:pop3d .6s cubic-bezier(.2,1.7,.4,1)}
@keyframes pop3d{
  0%{transform:translateZ(0) scale(1)}
  35%{transform:translateZ(46px) scale(1.24) rotateX(-10deg)}
  100%{transform:none}
}

/* —— 进度条：凹槽 + 立体填充 + 流光 —— */
.bar{
  transform:translateZ(8px);
  box-shadow:inset 0 3px 8px rgba(30,50,90,.16), inset 0 -2px 0 rgba(255,255,255,.85);
}
.bar i{
  background:linear-gradient(180deg,#8ebcff,#4f8cff 55%,#2f6bff);
  box-shadow:inset 0 -3px 0 rgba(255,255,255,.45), 0 3px 12px rgba(47,107,255,.55);
  position:relative;overflow:hidden;
}
.bar i::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.9) 50%,transparent 68%);
  animation:barShine 2.6s linear infinite;
}
@keyframes barShine{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* —— 任务卡 / 学习入口卡：立体抬起，按压下沉 —— */
.task{
  transform-style:preserve-3d;
  box-shadow:0 8px 18px rgba(31,41,55,.08), 0 3px 0 rgba(226,234,247,1);
  transition:transform .16s ease, box-shadow .16s ease;
}
.task:active{
  transform:translateY(3px) rotateX(7deg) scale(.97);
  box-shadow:0 2px 6px rgba(31,41,55,.14), 0 1px 0 rgba(226,234,247,1);
}
.task .ico{
  display:inline-block;
  filter:drop-shadow(0 6px 9px rgba(79,140,255,.3));
  transition:transform .28s cubic-bezier(.2,1.5,.4,1);
}
.task:active .ico{transform:translateZ(26px) scale(1.14)}

/* —— 列表行：立体按压 —— */
.row{background:#fff;transition:transform .14s ease, background .14s}
.row:active{transform:scale(.985) rotateX(3deg);background:#f7faff}

/* —— 按钮：厚底立体，按下去真的"压进去" —— */
.btn{
  box-shadow:0 4px 0 rgba(31,41,55,.16), 0 10px 20px rgba(47,107,255,.16);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 rgba(31,41,55,.16), 0 3px 8px rgba(47,107,255,.14);
}

/* —— 学习卡片（识字/拼音/古诗/天文）：立体抬起 + 下沿阴影 —— */
.zi{
  transform-style:preserve-3d;
  box-shadow:0 12px 28px rgba(31,41,55,.1), 0 4px 0 #eef3fc;
  transition:box-shadow .3s;
}
/* 大字本身也做出立体感 */
.big{
  display:inline-block;
  transition:transform .45s cubic-bezier(.2,1.4,.4,1);
  text-shadow:0 3px 0 #e8eefb, 0 7px 16px rgba(31,41,55,.16);
}
/* 藏起拼音时（要自己想），大字往前"顶"出来，像浮在纸面上 */
.zi.peek .big{
  transform:rotateY(-13deg) rotateX(7deg) translateZ(34px) scale(1.05);
  text-shadow:0 6px 0 #e2eaf8, 0 14px 28px rgba(31,41,55,.22);
}
/* 古诗卡翻页感 */
.zi.book3d{transform:rotateY(-8deg) rotateX(3deg);box-shadow:-18px 18px 36px rgba(31,41,55,.14), 0 4px 0 #eef3fc}

/* —— 选项按钮（识字小字格 / 单词 / 口算 / 小测）：立体按键 —— */
.opt{
  box-shadow:0 4px 0 #e3eaf7, 0 8px 16px rgba(31,41,55,.08);
  transition:transform .14s ease, box-shadow .14s ease;
}
.opt:active{
  transform:translateY(3px) scale(.96);
  box-shadow:0 1px 0 #e3eaf7, 0 2px 6px rgba(31,41,55,.1);
}

/* —— 加分飘分数字：3D 飞起 —— */
.fx{
  text-shadow:0 4px 0 rgba(0,0,0,.1), 0 10px 24px currentColor;
  will-change:transform,opacity;
}

/* —— 商店奖励卡：立体陈列 —— */
.reward,.goods,.item{
  box-shadow:0 10px 24px rgba(31,41,55,.1), 0 4px 0 #eef3fc;
  transition:transform .18s ease, box-shadow .18s ease;
}
.reward:active,.goods:active,.item:active{transform:translateY(4px) rotateX(5deg)}

/* —— 周进度小格：做成小立体柱 —— */
.week .d,.week b{
  box-shadow:0 3px 0 rgba(31,41,55,.1), 0 6px 12px rgba(79,140,255,.14);
}

/* —— 小字格居中（识字 52px 方格）—— */
.opt[style*="height:52px"]{padding:0;display:flex;align-items:center;justify-content:center;line-height:1}

/* —— 记忆翻牌：牌没翻开前不能露出图案（emoji 不随 color 变化，只能靠字号藏）—— */
.mcard{transition:transform .2s, box-shadow .2s}
.mcard:not(.open):not(.gone){font-size:0}
.mcard:active{transform:scale(.94) rotateX(6deg)}

/* ============ 游戏：中英配对 ============ */
.mm{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}
.mmc{
  background:#fff;border:2px solid #dbe7ff;border-radius:14px;
  height:62px;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:900;color:var(--pri);cursor:pointer;
  box-shadow:0 5px 0 #e3eaf7, 0 8px 16px rgba(31,41,55,.08);
  transition:transform .18s cubic-bezier(.2,1.5,.4,1), box-shadow .18s, background .18s, opacity .3s;
  transform-style:preserve-3d;
}
.mmc:active{transform:translateY(3px) rotateX(6deg) scale(.96);box-shadow:0 1px 0 #e3eaf7}
.mmc.sel{background:#fff5d6;border-color:#f0a33a;transform:translateZ(14px) scale(1.04);
  box-shadow:0 8px 0 #f6d79a, 0 16px 28px rgba(240,163,58,.3)}
.mmc.done{background:#dcfce7;border-color:#86efac;color:#15803d;opacity:.55;
  transform:rotateY(180deg) scale(.94);pointer-events:none}
.mmc.bad{background:#fee2e2;border-color:#fca5a5;color:#b91c1c;
  animation:shake3d .45s}
@keyframes shake3d{
  0%,100%{transform:rotateY(0)}
  25%{transform:rotateY(-16deg)}
  75%{transform:rotateY(16deg)}
}

/* ============ 游戏：心算闯关 ============ */
.qzwrap{background:#fff;border-radius:18px;padding:16px;
  box-shadow:0 12px 28px rgba(31,41,55,.1), 0 4px 0 #eef3fc;transform-style:preserve-3d}
.qzbar{height:10px;border-radius:99px;background:#e8eefb;overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(30,50,90,.16)}
.qzbar i{display:block;height:100%;background:linear-gradient(180deg,#ffd76e,#ffb020);
  box-shadow:0 0 12px rgba(255,176,32,.7);transition:width .1s linear}
.qzexpr{font-size:34px;font-weight:900;text-align:center;margin:16px 0 14px;
  color:var(--pri);text-shadow:0 3px 0 #e8eefb, 0 8px 18px rgba(79,140,255,.22)}
.qzopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qzopt{
  padding:16px 8px;border-radius:14px;border:2px solid #dbe7ff;background:#f2f7ff;
  font-size:24px;font-weight:900;color:var(--pri);
  box-shadow:0 5px 0 #e3eaf7, 0 10px 18px rgba(79,140,255,.12);
  transition:transform .12s, box-shadow .12s, background .18s;
}
.qzopt:active{transform:translateY(3px);box-shadow:0 1px 0 #e3eaf7}
.qzopt.right{background:#dcfce7;border-color:#86efac;color:#15803d;
  animation:pop3d .42s cubic-bezier(.2,1.7,.4,1)}
.qzopt.wrong{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}
.qzstat{text-align:center;margin-top:12px;font-size:13px;color:var(--sub);font-weight:700}

/* ============ 管理：孩子档案 ============ */
.pfrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pfrow label{font-size:12px;color:var(--sub);font-weight:700;display:block}
.pfrow input{width:100%;margin-top:4px}

/* ============ 太空模块（iframe）============ */
#p-space iframe{display:block}

/* 低端设备减负：只在支持 preserve-3d 的环境启用动画 */
@media (prefers-reduced-motion: reduce){
  .hero{animation:none}
  .bar i::after{animation:none}
}