/* 数感小挑战 · 凑十法
   设计原则：一屏一件事、大字大按钮、作答靠拖和点数字，不出现 ABCD 选项。
   站点没有任何线上视频播放。 */
:root{
  --ind:#0ea5e9; --ind2:#0284c7; --deep:#075985; --sky:#f0f9ff;
  --ink:#0c4a6e; --ink2:#64748b; --line:#bae6fd; --card:#fff;
  --ok:#16a34a; --no:#ef4444; --amber:#f59e0b;
  --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--sky); min-height:100vh; padding-bottom:40px;
  background-image:radial-gradient(circle at 12% 4%,#e0f2fe 0,transparent 42%),
                   radial-gradient(circle at 88% 0%,#fef3c7 0,transparent 34%);
  background-attachment:fixed;
}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(240,249,255,.94);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.tb-in{max-width:900px;margin:0 auto;padding:12px 18px;
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;gap:11px;align-items:center;min-width:0}
.logo{width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:flex;
  align-items:center;justify-content:center;font-size:22px;background:#0ea5e9}
.brand h1{margin:0;font-size:19px;font-weight:700;color:var(--deep);letter-spacing:.5px}
.brand p{margin:2px 0 0;font-size:12px;color:var(--ink2)}
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink2);
  text-decoration:none;white-space:nowrap}
.pill b{color:var(--ind2)}
.pill.ghost{background:transparent}

.wrap{max-width:900px;margin:0 auto;padding:18px}

/* ---------- 阶段卡 ---------- */
.stage{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin-bottom:16px;box-shadow:0 4px 16px rgba(2,132,199,.08);
  display:block;text-decoration:none;color:inherit;transition:.16s;position:relative}
.stage.go:hover{transform:translateY(-3px);border-color:#7dd3fc;
  box-shadow:0 10px 24px rgba(2,132,199,.16)}
.stage.lock{background:#f8fafc;border-color:#e2e8f0;cursor:default}
.s-top{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.s-id{font-size:12.5px;font-weight:700;color:#fff;background:var(--ind);
  border-radius:999px;padding:3px 11px;flex:0 0 auto}
.stage.lock .s-id{background:#94a3b8}
.s-name{font-size:20px;font-weight:700;color:var(--deep)}
.s-sub{font-size:13px;color:var(--ink2);margin-top:6px;line-height:1.6}
.s-tool{font-size:12px;color:var(--ind2);background:#f0f9ff;border-radius:8px;
  padding:3px 9px;margin-top:9px;display:inline-block}
.dots{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}
.dot{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;background:#f1f5f9;color:#94a3b8}
.dot.ok{background:#dcfce7;color:#15803d}
.dot.cur{background:var(--ind);color:#fff}
.s-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:10px}
.s-prog{font-size:13px;color:var(--ink2)}
.s-prog b{color:var(--ind2);font-size:15px}
.s-go{font-size:14px;font-weight:700;color:var(--ind2)}
.stage.lock .s-go{color:#94a3b8}
.s-lockmsg{font-size:12.5px;color:#94a3b8;margin-top:10px}

/* ---------- 游戏 ---------- */
.playwrap{max-width:760px;margin:0 auto;padding:16px}
.lvhead{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.lvname{font-size:17px;font-weight:700;color:var(--deep);flex:1;min-width:0}
.timer{font-size:15px;font-weight:700;color:var(--ind2);background:#fff;
  border:1.5px solid var(--line);border-radius:999px;padding:6px 15px;font-variant-numeric:tabular-nums}
.timer.warn{color:var(--no);border-color:#fca5a5;background:#fef2f2}
.combo{font-size:13px;font-weight:700;color:var(--amber)}

.board{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
  padding:20px 18px;text-align:center;box-shadow:0 4px 16px rgba(2,132,199,.08)}
.ask{font-size:19px;font-weight:700;color:var(--deep);line-height:1.5;margin-bottom:4px}
.ask-sub{font-size:13px;color:var(--ink2);margin-bottom:16px;line-height:1.55}

/* 十宫格：2 行 × 5 列 */
.frames{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px}
.frame{display:flex;flex-direction:column;gap:4px;align-items:center}
.frame .cap{font-size:12px;color:var(--ink2);margin-top:6px}
.tf{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  padding:8px;border-radius:14px;background:#f8fafc;border:1.5px solid #e2e8f0}
.tf.full{background:#eff6ff;border-color:#bfdbfe}
.cell{width:52px;height:52px;border-radius:10px;background:#eef2f7;border:1.5px solid #dbe3ec}
.cell.on{background:var(--c,#0ea5e9);border-color:rgba(0,0,0,.12)}
.cell.hit{cursor:pointer;background:#fff;border:1.5px dashed var(--ind)}
.cell.hit:hover{border-style:solid;background:#e0f2fe}
.cell.moving{background:#fbbf24;border-color:#f59e0b}
.loose{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:200px;margin-top:8px}
.loose .cell{width:40px;height:40px}

.expr{font-size:26px;font-weight:800;color:var(--deep);margin:16px 0 2px;
  font-variant-numeric:tabular-nums;letter-spacing:1px}
.expr .hl{color:var(--ind2)}

.nums{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.num{width:58px;height:58px;border-radius:15px;border:1.5px solid var(--line);background:#fff;
  color:var(--ind2);font-size:23px;font-weight:800;cursor:pointer;font-family:inherit;transition:.14s}
.num:hover{border-color:var(--ind);background:#e0f2fe}
.num.right{background:#dcfce7;border-color:#86efac;color:#15803d}
.num.wrong{background:#fee2e2;border-color:#fca5a5;color:#b91c1c;animation:shake .3s}
.num:disabled{cursor:default}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

.fb{margin-top:15px;font-size:15px;font-weight:700;min-height:22px}
.fb.ok{color:var(--ok)}
.fb.no{color:var(--no)}
.sayline{margin-top:12px;padding:10px 13px;border-radius:12px;background:#fffbeb;
  border:1.5px solid #fde68a;font-size:14px;font-weight:700;color:#78350f;line-height:1.6}

.row{display:flex;gap:11px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.btn{border:0;background:linear-gradient(135deg,#38bdf8,#0284c7);color:#fff;font-weight:700;
  font-size:15px;padding:12px 26px;border-radius:999px;cursor:pointer;font-family:inherit}
.btn.ghost{background:#fff;color:var(--ind2);border:1.5px solid var(--line)}
.btn:disabled{background:#cbd5e1;cursor:default}

/* 过关 / 阶段完成 */
.done-box{text-align:center;padding:26px 18px}
.done-box .big{font-size:52px;line-height:1;margin-bottom:10px}
.done-box h2{font-size:22px;color:var(--deep);margin:0 0 8px}
.done-box p{font-size:14px;color:var(--ink2);line-height:1.7;margin:0 0 6px}
.done-box .stat2{font-size:15px;color:var(--ind2);font-weight:700;margin:12px 0 4px}

.hint{text-align:center;font-size:12px;color:var(--ink2);padding:14px 20px 0;line-height:1.7}

@media (max-width:560px){
  .wrap{padding:14px 13px}
  .playwrap{padding:12px}
  .brand h1{font-size:17px}
  .cell{width:46px;height:46px}
  .loose .cell{width:34px;height:34px}
  .num{width:52px;height:52px;font-size:21px}
  .s-name{font-size:18px}
  .dot{width:28px;height:28px}
}

/* ---------- 实物引导层：教孩子用真积木 / 真扑克牌 ---------- */
.modes{display:flex;gap:8px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.mtab{border:1.5px solid var(--line);background:#fff;color:var(--ind2);border-radius:999px;
  padding:8px 16px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.mtab:hover{border-color:var(--ind);background:#e0f2fe}
.mtab.on{background:var(--ind);border-color:var(--ind);color:#fff}

.guide{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:14px;box-shadow:0 4px 16px rgba(2,132,199,.08)}
.g-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.g-title{font-size:15px;font-weight:700;color:var(--deep)}
.g-what{font-size:12px;color:#fff;background:var(--ind);border-radius:999px;padding:3px 11px;font-weight:700}
.gp{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:4px 0 2px}
.gsteps{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.gsteps li{display:flex;gap:10px;align-items:flex-start;background:#f8fafc;
  border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;
  font-size:13.5px;line-height:1.6;text-align:left}
.gsteps .gn{flex:0 0 23px;height:23px;border-radius:50%;background:var(--ind);color:#fff;
  font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.grow{display:flex;gap:10px;justify-content:center;margin-top:13px;flex-wrap:wrap}

/* 扑克牌 */
.cards{display:flex;gap:14px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.pcard{width:76px;height:108px;border-radius:10px;background:#fff;
  border:1.5px solid var(--border-secondary,#cbd5e1);position:relative;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(15,23,42,.08)}
.pcard .pr{font-size:34px;font-weight:800;color:var(--ind2)}
.pcard.back{background:#eef2f7;border:1.5px dashed #94a3b8}
.pcard.back .pr{color:#94a3b8;font-size:30px}
.pcard.hl{border-color:var(--ind);background:#e0f2fe}
.pcard .pcap{position:absolute;bottom:-20px;left:0;right:0;text-align:center;
  font-size:11.5px;color:var(--ink2)}
.pcard.flip{animation:flipin .5s ease-out backwards}
@keyframes flipin{0%{transform:rotateY(90deg) scale(.9);opacity:0}
  100%{transform:none;opacity:1}}

/* 积木落下的动画 */
.cell.dropin{animation:dropin .42s ease-out backwards}
@keyframes dropin{
  0%{transform:translateY(-16px) scale(.55);opacity:0}
  60%{transform:translateY(2px) scale(1.08)}
  100%{transform:none;opacity:1}}

@media (prefers-reduced-motion: reduce){
  .cell.dropin,.pcard.flip,.num.wrong{animation:none}
}

/* ---------- 家长手册 ---------- */
.blk{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin-bottom:16px;box-shadow:0 4px 16px rgba(2,132,199,.07)}
.blk h2{margin:0 0 4px;font-size:18px;color:var(--deep)}
.blk .sub{margin:0 0 14px;font-size:13px;color:var(--ink2);line-height:1.65}
.note{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#f0f9ff;
  border:1.5px dashed var(--line);font-size:13px;line-height:1.72}
.note b{color:var(--ind2)}
.steps{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.step{background:#f8fafc;border:1.5px solid var(--line);border-radius:13px;padding:13px 14px}
.step h3{margin:0 0 6px;font-size:15px;color:var(--deep)}
.step .tm{font-size:11.5px;color:#fff;background:var(--ind);border-radius:999px;
  padding:2px 9px;font-weight:700}
.step p{margin:8px 0 0;font-size:13px;line-height:1.68}
.mats{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.mat{display:flex;gap:11px;background:#f8fafc;border:1.5px solid var(--line);
  border-radius:12px;padding:11px 13px}
.mat .m-emo{font-size:23px;line-height:1.2;flex:0 0 auto}
.mat .m-t{font-size:13.5px;font-weight:700;color:var(--deep)}
.mat .m-d{font-size:12.5px;color:var(--ink2);line-height:1.6;margin-top:2px}
.rules{display:grid;gap:11px}
.rule{display:flex;gap:12px;align-items:flex-start;background:#f8fafc;
  border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.7}
.rule .rn{flex:0 0 26px;height:26px;border-radius:50%;background:var(--ind);color:#fff;
  font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.rule b{color:var(--deep)}
.rhythm{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.rh{background:#f8fafc;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
.rh .rw{font-size:11.5px;font-weight:700;color:#fff;background:var(--ind);
  border-radius:999px;padding:2px 10px;display:inline-block}
.rh .rt{font-size:14px;font-weight:700;color:var(--deep);margin:8px 0 4px}
.rh .rd{font-size:12.5px;color:var(--ink2);line-height:1.65}
.song{background:#fffbeb;border:1.5px solid #fde68a;border-radius:13px;padding:14px 16px;
  font-size:15px;line-height:2;font-weight:700;color:#78350f;text-align:center}
.foot{text-align:center;font-size:12.5px;color:var(--ink2);padding:6px 0 10px;line-height:1.8}
.foot a{color:var(--ind2);text-decoration:none}

/* 打印成 A4 家长手册 */
@media print{
  @page{size:A4;margin:13mm}
  html,body{background:#fff!important;background-image:none!important;padding:0}
  .topbar,.hint,.playwrap .lvhead{display:none!important}
  .brand h1{font-size:16px}
  .blk{box-shadow:none;border-color:#e2e8f0;break-inside:auto;padding:13px 15px;margin-bottom:11px}
  .step,.mat,.rule,.rh,.song{break-inside:avoid}
  .blk h2{font-size:15px}
  a{color:inherit;text-decoration:none}
  .foot{display:none}
}