/* ============================================================
   汉字工坊 · 一年级识字  ——  样式（第九套）

   视觉体系：活字印刷工坊
     底 = **木格字盘**（格子矩阵，九条里第一次用格子当底）
     元件 = 铅字块（方字模 + 排字脚）
     质感 = 凸版压痕（硬边、不渗）—— 与第八套的「拓片墨晕」正相反

   ⚠ 两条从第八套带过来的硬教训（别改回去）：
     ① `.phone` 宽度**不要写死 390**：414 / 430 的真机占比不小，
        写死就是中间一条 390、两侧各留底色，像在看预览器。
     ② 中文长标题换行容易掉出「孤字」，用 `text-wrap:balance`，
        不要手写 <br>（字号或屏宽一改，<br> 的位置就错了）。
   ============================================================ */

:root{
  --ink:#2E4A6B;      /* 油墨靛 —— 主色 */
  --ink-d:#1E3450;    /* 深墨 */
  --ink-l:#4A6E93;    /* 浅墨 */
  --ink-05:rgba(46,74,107,.05);
  --ink-10:rgba(46,74,107,.10);
  --ink-18:rgba(46,74,107,.18);
  --paper:#FBF8F1;    /* 米白纸 */
  --paper-d:#EFE8DA;
  --coral:#E2703A;    /* 珊瑚橙 —— 强调色（不用红：红=批改的压迫感） */
  --coral-l:#F4A47A;
  --coral-12:rgba(226,112,58,.12);
  --wood:#DEC9A4;
  --wood-d:#C2A87C;
  --wood-l:#EFE0C4;
  --tray:#EADFC8;
  --tray-d:#D3C3A2;
  --moss:#5E7A56;
  --kai:KaiTi,STKaiti,'楷体','Kaiti SC',serif;
  --sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Source Han Sans SC',sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:#DDD2BC;
  font-family:var(--sans);
  color:var(--ink-d);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* ---------------- 机身 ----------------
   ⚠ 宽度用 clamp，不要写死 390 */
.phone{
  position:relative;width:clamp(320px,100vw,430px);height:844px;max-height:100vh;
  overflow:hidden;background:var(--tray);
  box-shadow:0 18px 60px rgba(46,74,107,.22);
}
@media(min-width:431px){ .phone{border-radius:34px} }

/* ---------------- 木格字盘底 ----------------
   格线用 repeating-linear-gradient 做，不逐像素画。
   格子 64px 一格，2px 格线 —— 像真的字盘。 */
.tray-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(211,195,162,.85) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(90deg, rgba(211,195,162,.85) 0 2px, transparent 2px 64px),
    linear-gradient(160deg,#F1E8D6 0%,#E7DCC3 55%,#DED1B4 100%);
}
/* 字盘格子的浅凹：每格中央一块更亮的方，做出"槽"的感觉 */
.tray-bg::after{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.34) 0 3px, transparent 3px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 3px, transparent 3px 64px);
  background-position:2px 2px;
}
/* 木纹：极淡的斜纹，别做重，重了像塑料 */
.tray-bg::before{
  content:'';position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(101deg, rgba(194,168,124,.14) 0 1px, transparent 1px 9px);
}

#app{position:relative;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#app::-webkit-scrollbar{display:none}
#fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:60}

/* ---------------- 状态栏 ---------------- */
.statusbar{
  position:relative;height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;font-size:13.5px;font-weight:600;color:var(--ink);
  letter-spacing:.2px;
}
.sb-right{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.85}
.sb-bat{width:22px;height:11px;border:1.4px solid var(--ink);border-radius:3px;position:relative;opacity:.9}
.sb-bat i{position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:12px;background:var(--ink);border-radius:1.5px}
.sb-bat::after{content:'';position:absolute;right:-3.4px;top:3px;width:2px;height:5px;background:var(--ink);border-radius:0 2px 2px 0}

/* ---------------- 底部标签栏 ---------------- */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;height:76px;z-index:30;
  display:flex;align-items:flex-start;padding:9px 6px 0;
  background:linear-gradient(180deg, rgba(251,248,241,.86), rgba(251,248,241,.99) 42%);
  backdrop-filter:blur(14px);border-top:1.5px solid var(--ink-10);
}
.tab{
  flex:1;border:0;background:none;font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:5px 0 0;color:var(--ink-l);opacity:.72;transition:.18s;
}
.tab svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tab span{font-size:10.5px;font-weight:600;letter-spacing:.3px}
.tab.on{color:var(--ink-d);opacity:1}
.tab.on svg{stroke:var(--ink);fill:none}
.tab:active{transform:scale(.93)}

/* ---------------- 通用块 ---------------- */
.wrap{position:relative;padding:0 18px 200px}
.card{
  background:var(--paper);border-radius:16px;padding:16px 17px;
  box-shadow:0 3px 0 rgba(194,168,124,.5), 0 8px 20px rgba(46,74,107,.07);
  position:relative;
}
.sec{margin-top:16px}
.sec-t{
  display:flex;align-items:center;gap:9px;margin:0 0 10px;padding-left:2px;
  font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.6px;
}
.sec-t .bar{width:4px;height:15px;border-radius:2px;background:var(--coral)}
.sec-t .n{font-family:var(--kai);font-size:15px;color:var(--coral);font-weight:700}
.sec-t em{font-style:normal;font-weight:500;color:var(--ink-l);font-size:12px;margin-left:auto}

.btn{
  border:0;font-family:inherit;cursor:pointer;border-radius:13px;
  font-size:15.5px;font-weight:700;letter-spacing:.4px;color:var(--paper);
  background:var(--ink);padding:14px 20px;transition:.16s;
  box-shadow:0 3px 0 var(--ink-d);
}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink-d)}
.btn.sun{background:var(--coral);box-shadow:0 3px 0 #B85624}
.btn.sun:active{box-shadow:0 1px 0 #B85624}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink-18)}
.btn.ghost:active{box-shadow:inset 0 0 0 2px var(--ink-18)}
.btn.wide{width:100%}

/* ---------------- 首页 ---------------- */
.hero{position:relative;padding:6px 18px 4px}
.hero-badge{
  width:74px;height:82px;margin-bottom:10px;
  animation:badge-in .5s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes badge-in{from{opacity:0;transform:translateY(-10px) rotate(-6deg)}to{opacity:1;transform:none}}
.hero-badge svg{width:100%;height:100%;display:block}
.hero h1{
  margin:0;font-size:29px;font-weight:800;letter-spacing:1.5px;color:var(--ink-d);
  line-height:1.16;text-wrap:balance;
}
.hero h1 .k{font-family:var(--kai);letter-spacing:3px}
.hero .tag{
  display:inline-block;margin-top:9px;padding:4px 11px;border-radius:8px;
  background:var(--coral-12);color:var(--coral);font-size:12.5px;font-weight:700;letter-spacing:.4px;
}
.hero .sub{margin:11px 0 0;font-size:13.5px;color:var(--ink-l);line-height:1.62;font-weight:500}

/* 今天来找你的字朋友 */
.today{
  margin-top:18px;background:var(--paper);border-radius:18px;padding:15px 16px 17px;
  box-shadow:0 3px 0 rgba(194,168,124,.5), 0 10px 24px rgba(46,74,107,.08);
  position:relative;overflow:hidden;
}
.today::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--coral),var(--coral-l));
}
.today-h{display:flex;align-items:baseline;gap:8px;margin-bottom:13px}
.today-h b{font-size:16px;font-weight:800;color:var(--ink-d);letter-spacing:.6px}
.today-h span{font-size:11.5px;color:var(--ink-l);font-weight:600}
.today-sub{font-size:12px;color:var(--ink-l);font-weight:600;margin:13px 0 7px;letter-spacing:.3px}

/* 字模格（今天的字 / 字盘） */
.blocks{display:flex;flex-wrap:wrap;gap:11px}
.bk{
  width:62px;border:0;background:none;padding:0;cursor:pointer;position:relative;
  transition:.16s;
}
.bk svg{width:100%;display:block;filter:drop-shadow(0 2.5px 0 rgba(194,168,124,.55))}
.bk:active{transform:translateY(3px)}
.bk .nm{
  display:block;text-align:center;font-size:10.5px;font-weight:700;color:var(--ink-l);
  margin-top:1px;letter-spacing:.3px;
}
/* 蒙灰的字：很久没见 —— 「擦灰」是本套复习队列的核心动效 */
.bk.dust svg{filter:drop-shadow(0 2.5px 0 rgba(194,168,124,.55)) grayscale(.55) opacity(.62)}
.bk.dust::after{
  content:'';position:absolute;left:6px;right:6px;top:8px;height:40px;border-radius:8px;
  background:
    radial-gradient(circle at 26% 34%, rgba(255,255,255,.9) 0 4px, transparent 5px),
    radial-gradient(circle at 66% 62%, rgba(255,255,255,.8) 0 3px, transparent 4px),
    radial-gradient(circle at 44% 76%, rgba(255,255,255,.7) 0 3px, transparent 4px),
    rgba(222,214,197,.5);
  pointer-events:none;transition:opacity .45s;
}
.bk.dust.clean::after{opacity:0}
.bk .dot{
  position:absolute;right:5px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--coral);box-shadow:0 0 0 2.5px var(--paper);
}
.bk.done .dot{background:var(--moss)}

/* 新增字（今天没学过的）—— 用描边块表示"位置还空着" */
.bk.empty svg{opacity:.34}
.bk.empty::after{
  content:'?';position:absolute;left:0;right:0;top:26px;text-align:center;
  font-family:var(--kai);font-size:26px;color:var(--ink-l);opacity:.5;
}

/* 字盘（收集进度，实物感，不是分数）
   ⚠ 列宽必须写 `minmax(0,1fr)`，不能写 `1fr`：
     `1fr` 等价于 `minmax(auto,1fr)`，而 auto 的**最小值是 min-content** ——
     10 列时格子里那个字的 min-content 会把轨道顶开，
     390 视口下最后一格跑到 x=466（多视口验收报的正是这个）。
     `minmax(0,1fr)` 把最小值压到 0，轨道才会老老实实等分。 */
.traybar{
  display:grid;gap:4px;margin-top:4px;
  grid-template-columns:repeat(10,minmax(0,1fr));
}
.cell{
  min-width:0;aspect-ratio:1;border-radius:4px;background:rgba(211,195,162,.42);
  box-shadow:inset 0 1px 2px rgba(46,74,107,.10);
  display:flex;align-items:center;justify-content:center;
  /* 字号跟着视口走：390 下约 13.7px，320 下约 11.2px —— 格子再小也放得下 */
  font-family:var(--kai);font-size:clamp(10px,3.5vw,14px);color:var(--ink-d);line-height:1;
  transition:.25s;
}
.cell.on{
  background:var(--paper);
  box-shadow:0 2px 0 rgba(194,168,124,.7), inset 0 0 0 1.5px var(--ink-10);
  animation:cell-in .38s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes cell-in{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.cell.today{box-shadow:0 2px 0 rgba(194,168,124,.7), inset 0 0 0 2px var(--coral)}
.tray-note{font-size:11.5px;color:var(--ink-l);font-weight:600;margin-top:9px;letter-spacing:.3px}

/* 游戏入口 */
.ggrid{display:flex;flex-direction:column;gap:11px}
.gitem{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  border:0;font-family:inherit;cursor:pointer;padding:12px 14px;border-radius:15px;
  background:var(--paper);box-shadow:0 3px 0 rgba(194,168,124,.5), 0 6px 16px rgba(46,74,107,.06);
  transition:.16s;
}
.gitem:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(194,168,124,.5)}
.gitem .ic{
  width:47px;height:47px;flex:0 0 47px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-05);box-shadow:inset 0 0 0 1.5px var(--ink-10);
}
.gitem .ic svg{width:31px;height:31px;display:block}
.gitem .tx{flex:1;min-width:0}
.gitem .tx b{display:block;font-size:15.5px;font-weight:800;color:var(--ink-d);letter-spacing:.5px;margin-bottom:3px}
.gitem .tx span{display:block;font-size:12.5px;color:var(--ink-l);font-weight:500;line-height:1.45}
.gitem .st{display:flex;gap:2.5px;flex:0 0 auto}
.gitem .st i{width:13px;height:13px;display:block}
.gitem .st i svg{width:100%;height:100%;display:block}
.gitem .st i.on svg path{fill:var(--coral)}
.gitem .st i svg path{fill:var(--ink-18)}

/* 阶段头 */
.stagehead{
  margin:20px 0 11px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(100deg,var(--paper) 0%,rgba(251,248,241,.55) 100%);
  box-shadow:inset 0 0 0 1.5px var(--ink-10);
}
.stagehead .r1{display:flex;align-items:center;gap:9px}
.stagehead .no{
  font-family:var(--kai);font-size:19px;font-weight:700;letter-spacing:1px;
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--paper);flex:0 0 30px;
}
.stagehead b{font-size:15px;font-weight:800;letter-spacing:.6px;color:var(--ink-d)}
.stagehead .gd{margin:8px 0 0;font-size:11.5px;color:var(--ink-l);line-height:1.5;font-weight:500}

/* 家长的话 */
.notice{margin-top:20px}
.notice p{margin:0 0 10px;font-size:13px;line-height:1.75;color:var(--ink);font-weight:500}
.notice p:last-child{margin-bottom:0}
.notice b{color:var(--coral);font-weight:700}

/* ---------------- 游戏外壳 ---------------- */
.g-top{
  position:relative;height:52px;display:flex;align-items:center;gap:10px;
  padding:0 14px;
}
.g-back{
  width:36px;height:36px;border:0;border-radius:11px;cursor:pointer;flex:0 0 36px;
  background:var(--paper);color:var(--ink);font-size:21px;line-height:1;
  box-shadow:0 2px 0 rgba(194,168,124,.55);padding:0 0 3px;
}
.g-back:active{transform:translateY(2px);box-shadow:none}
.g-ti{font-size:16.5px;font-weight:800;letter-spacing:.8px;color:var(--ink-d);flex:1}
.g-prog{display:flex;gap:5px}
.g-prog i{width:8px;height:8px;border-radius:50%;background:var(--ink-18);transition:.25s}
.g-prog i.on{background:var(--coral);transform:scale(1.18)}
.g-hint{
  margin:4px 18px 0;padding:11px 14px;border-radius:13px;
  background:var(--paper);font-size:14.5px;font-weight:600;color:var(--ink);
  line-height:1.55;box-shadow:0 2px 0 rgba(194,168,124,.45);
}
.g-body{position:relative;padding:16px 18px 0}

/* 反馈条 */
.g-fb{
  position:fixed;left:50%;bottom:0;transform:translate(-50%,110%);
  width:clamp(320px,100vw,430px);max-width:100vw;
  background:var(--paper);border-radius:20px 20px 0 0;padding:17px 19px 26px;
  box-shadow:0 -6px 30px rgba(46,74,107,.18);transition:transform .3s cubic-bezier(.2,.9,.3,1);
  z-index:50;
}
.g-fb.on{transform:translate(-50%,0)}
.g-fb .h{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:800;color:var(--ink-d);letter-spacing:.4px}
.g-fb .h .dot{
  width:24px;height:24px;border-radius:50%;flex:0 0 24px;color:#fff;font-size:14px;
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.g-fb .b{margin:9px 0 0;font-size:13.5px;line-height:1.72;color:var(--ink);font-weight:500}
.g-fb .b b{color:var(--coral)}
.g-fb .act{margin-top:15px}

/* ---------------- 通用选项卡 ---------------- */
.opts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.opt{
  border:0;font-family:inherit;cursor:pointer;background:var(--paper);border-radius:16px;
  padding:14px 10px;min-width:88px;transition:.16s;position:relative;
  box-shadow:0 3px 0 rgba(194,168,124,.62), 0 7px 18px rgba(46,74,107,.07);
}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(194,168,124,.62)}
.opt .zi{font-family:var(--kai);font-size:44px;line-height:1.06;color:var(--ink-d);display:block}
.opt .lb{font-size:12.5px;font-weight:700;color:var(--ink-l);letter-spacing:.4px;margin-top:2px;display:block}
.opt svg{width:100%;height:100%;display:block}
.opt.miss{animation:shake .34s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.opt.got{background:rgba(94,122,86,.13);box-shadow:0 3px 0 rgba(94,122,86,.4)}

/* 大画卡（认字模） */
.bigcard{
  background:var(--paper);border-radius:20px;padding:18px;margin:0 auto;
  width:min(260px,68%);aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 rgba(194,168,124,.6), 0 12px 26px rgba(46,74,107,.09);
  position:relative;
}
.bigcard svg{width:82%;height:82%;display:block}
.bigcard::before{
  content:'';position:absolute;inset:11px;border-radius:13px;
  box-shadow:inset 0 0 0 1.5px var(--ink-10);
}

/* 数笔画 */
.cnt-wrap{text-align:center}
.cnt-stage{
  background:var(--paper);border-radius:20px;padding:16px;margin:0 auto;
  width:min(250px,64%);box-shadow:0 4px 0 rgba(194,168,124,.6), 0 12px 26px rgba(46,74,107,.09);
}
.cnt-stage svg{width:100%;display:block}
.cnt-strip{
  display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:14px;min-height:40px;
  align-items:center;padding:0 4px;
}
.cnt-strip .s{width:26px;height:52px;display:block;animation:pop .3s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{transform:scale(.3) translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.cnt-strip .s svg{width:100%;height:100%;display:block}
.cnt-go{
  margin:14px auto 0;display:block;
}

/* 笔画认名 */
.bn-shape{
  background:var(--paper);border-radius:18px;padding:14px;margin:0 auto;
  width:min(190px,52%);aspect-ratio:1.25;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 rgba(194,168,124,.6), 0 12px 26px rgba(46,74,107,.09);
}
.bn-shape svg{width:76%;height:76%;display:block}

/* 拼字模 */
.bd-wrap{position:relative;margin:0 auto;width:min(300px,86%)}
.bd-grid{position:relative}
.bd-grid svg{width:100%;display:block}
.bd-fly{position:absolute;inset:0;pointer-events:none}
.bd-fly svg{width:100%;height:100%;display:block}
.bd-pool{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px;min-height:70px;
}
.bd-pool .pz{
  width:76px;height:70px;border:0;background:var(--paper);border-radius:13px;cursor:pointer;
  padding:7px;transition:.16s;
  box-shadow:0 3px 0 rgba(194,168,124,.6), inset 0 0 0 1.5px var(--ink-10);
}
.bd-pool .pz svg{width:100%;height:100%;display:block}
.bd-pool .pz:active{transform:translateY(2px)}
.bd-pool .pz.used{opacity:.2;pointer-events:none;transform:scale(.9)}

/* 补一笔 */
.ms-stage{
  background:var(--paper);border-radius:20px;padding:16px;margin:0 auto;
  width:min(230px,60%);box-shadow:0 4px 0 rgba(194,168,124,.6), 0 12px 26px rgba(46,74,107,.09);
  position:relative;
}
.ms-stage svg{width:100%;display:block}
.ms-ghost{
  position:absolute;inset:16px;border-radius:10px;
  background:repeating-linear-gradient(45deg,rgba(226,112,58,.10) 0 7px,transparent 7px 14px);
  pointer-events:none;
}

/* 印正字（镜像） */
.mr-wrap{text-align:center}
.mr-paper{
  margin:0 auto;width:min(210px,56%);background:var(--paper);border-radius:8px;
  padding:14px;box-shadow:0 4px 0 rgba(194,168,124,.6), 0 12px 26px rgba(46,74,107,.09);
  position:relative;
}
.mr-paper svg{width:100%;display:block}
.mr-paper::after{
  content:'印出来的';position:absolute;bottom:-19px;left:0;right:0;text-align:center;
  font-size:10.5px;font-weight:700;color:var(--ink-l);letter-spacing:.6px;
}
.mr-opts{margin-top:34px}
.mr-opts .opt{padding:8px}
.mr-opts .opt svg{width:66px;height:74px;margin:0 auto}

/* 组词 */
.wd-zi{
  background:var(--paper);border-radius:18px;width:112px;height:112px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 rgba(194,168,124,.6), 0 12px 26px rgba(46,74,107,.09);
}
.wd-zi svg{width:78%;height:78%}
.wd-opts{display:flex;flex-direction:column;gap:11px}
.wd-opts .opt{width:100%;padding:15px 16px;text-align:center}
.wd-opts .opt .lb{font-size:18px;color:var(--ink-d);font-family:var(--kai);letter-spacing:3px;margin:0}

/* 配对子 */
.pr-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:4px}
.pr-zi{width:118px;height:118px;background:var(--paper);border-radius:18px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 rgba(194,168,124,.6), 0 12px 26px rgba(46,74,107,.09)}
.pr-zi svg{width:78%;height:78%}
.pr-link{font-size:26px;color:var(--coral);font-weight:800;letter-spacing:2px}
.pr-opts{display:flex;gap:12px;justify-content:center;margin-top:20px}

/* 印刷台 */
.press-wrap{text-align:center}
.press-plate{
  margin:0 auto;width:min(300px,86%);background:var(--paper);border-radius:10px;padding:15px;
  box-shadow:0 4px 0 rgba(194,168,124,.6), 0 12px 26px rgba(46,74,107,.09);
  position:relative;
}
.press-plate .ttl{
  font-family:var(--kai);font-size:16px;color:var(--ink-d);letter-spacing:3px;
  text-align:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1.5px dashed var(--ink-18);
}
.press-grid{display:grid;gap:6px;justify-content:center}
.press-grid .pb{display:block}
.press-grid .pb svg{width:100%;display:block}
.press-roll{margin:14px auto 0;width:44%;opacity:.9}
.press-lever{margin:10px auto 0;width:56px}

/* 结果页 */
.res-wrap{position:relative;padding:26px 20px 200px;text-align:center}
.res-badge{width:88px;height:96px;margin:0 auto 12px;animation:badge-in .45s cubic-bezier(.2,.9,.3,1) both}
.res-badge svg{width:100%;height:100%}
.res-t{font-size:21px;font-weight:800;letter-spacing:1px;color:var(--ink-d)}
.res-s{margin-top:7px;font-size:13.5px;color:var(--ink-l);font-weight:600}
.res-stars{display:flex;gap:9px;justify-content:center;margin-top:14px}
.res-stars span{width:32px;height:32px;display:block}
.res-stars span svg{width:100%;height:100%}
.res-stars span svg path{fill:var(--ink-18)}
.res-stars span.on svg path{fill:var(--coral)}
.res-stars span.on{animation:star-in .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes star-in{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
.res-act{display:flex;flex-direction:column;gap:10px;margin-top:22px}

/* ---------------- 特效 ---------------- */
.fx-star{position:absolute;width:16px;height:16px;pointer-events:none}
.fx-star svg{width:100%;height:100%}
.fx-star svg path{fill:var(--coral)}
.fx-ring{
  position:absolute;border-radius:50%;border:2.6px solid var(--coral);pointer-events:none;
}
.toast{
  position:absolute;left:50%;bottom:104px;transform:translate(-50%,14px);
  background:rgba(30,52,80,.94);color:#fff;font-size:13px;font-weight:700;letter-spacing:.4px;
  padding:10px 17px;border-radius:11px;opacity:0;transition:.26s;pointer-events:none;z-index:70;
  max-width:82%;text-align:center;line-height:1.5;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 空态 */
.empty-tip{
  text-align:center;padding:34px 20px;color:var(--ink-l);font-size:13.5px;font-weight:600;line-height:1.7;
}

/* ---------------- 字盘页 ----------------
   ⚠ 同 .traybar：列宽用 minmax(0,1fr)，别写 1fr */
.tray-page .tl{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;
}
.tp{display:flex;flex-direction:column;align-items:center;gap:0;border:0;background:none;padding:0;cursor:pointer;transition:.16s}
.tp:active{transform:translateY(3px)}
.tp svg{width:100%;display:block}
.tp .zz{font-size:10px;font-weight:700;color:var(--ink-l);margin-top:1px}
.tp.locked svg{opacity:.26;filter:grayscale(1)}
.tp.locked .zz{opacity:.5}
.tp.dust svg{filter:grayscale(.5) opacity(.66)}
.tp.dust::after{
  content:'';position:absolute;inset:4px 4px 16px;border-radius:7px;background:rgba(226,219,203,.62);
  pointer-events:none;transition:opacity .4s;
}
.tp.dust.clean::after{opacity:0}
.tp{position:relative}

/* ---------------- 印刷品页 ---------------- */
.prints{display:flex;flex-direction:column;gap:14px}
.pr-card{
  background:var(--paper);border-radius:12px;padding:14px 15px 15px;position:relative;
  box-shadow:0 3px 0 rgba(194,168,124,.55), 0 8px 20px rgba(46,74,107,.07);
}
.pr-card .ttl{
  font-family:var(--kai);font-size:15px;letter-spacing:3px;color:var(--ink-d);
  text-align:center;padding-bottom:8px;margin-bottom:10px;border-bottom:1.5px dashed var(--ink-18);
}
.pr-card .row{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.pr-card .row .z{width:38px}
.pr-card .row .z svg{width:100%;display:block}