/* ================= 万以内位值积木 · 共用样式 =================
   两件工具（认识万以内的数字／万以内数的拆分）用 <link> 引这一份：
   积木本身的颜色 token、3D 立方体的六个类、叠放容器、滚动条。
   ⚠️ 类名要和 blocks-kit.js 里写 DOM 的那几处一一对应（blk／box3d／cf／u／fan／fitem）。 */

/* 位值积木的颜色档：工具里的 :root 不必再声明一遍 */
:root{
  --one:#f76707;     /* 一（个位）橙色 */
  --ten:#4f8cff;     /* 十 蓝色 */
  --b100:#12b886;    /* 百 绿色 */
  --b1000:#7a5cff;   /* 千 紫色 */
  --b10000:#e5484d;  /* 万＝报错红 */
}

/* ---------- 通用 3D 单位立方体盒子 ----------
   以「单位小立方体」为基准：一个单位的积木就是 1×1×1 的小立方体；
   十＝10 个小立方体排成一条(10×1×1)，百＝100 个平放一层(10×10×1)，千＝10×10×10。
   外层 .blk 预留旋转后的投影包围盒 → 绝不与相邻列／数字标签重叠。 */
.blk{position:relative; flex:none;}
.box3d{
  position:absolute; transform-style:preserve-3d;
  transform:rotateX(-30deg) rotateY(-28deg);
}
.box3d .cf{
  position:absolute; top:0; left:0;
  display:grid; background:var(--ck);
  border:1px solid rgba(0,0,0,.16); border-radius:2px;
}
/* 每个单位小立方体用「高光＋阴影」画出立体感，一眼是一颗颗小立方体 */
.box3d .cf .u{
  background:var(--ck);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.6),
    inset -1px -1px 0 rgba(0,0,0,.22);
}
.box3d .cf.top{ filter:brightness(1.18); }
.box3d .cf.right{ filter:brightness(.7); }

/* ---------- 一摞同类积木（fanStack 的容器） ----------
   .fan 定好宽高＝这一摞的占地，里面的 .fitem 靠 left/top 错落排开。 */
.fan{position:relative; flex:none;}
.fan .fitem{position:absolute;}

/* ---------- 滚动条：一个页面只该有一两个滚动区，样式统一 ---------- */
.kitScroll{scrollbar-width:thin; scrollbar-color:#b3c2dc #edf2fa;}
.kitScroll::-webkit-scrollbar{width:10px; height:10px;}
.kitScroll::-webkit-scrollbar-track{background:#edf2fa; border-radius:6px;}
.kitScroll::-webkit-scrollbar-thumb{background:#b3c2dc; border-radius:6px; border:2px solid #edf2fa;}
.kitScroll::-webkit-scrollbar-thumb:hover{background:#8fa3c6;}