/* ============================================================
   墨兔行 · 样式表
   设计基调：宣纸底色（米白）+ 墨色（黑/灰）+ 淡墨渲染
   舞台固定 960x540（16:9），用 transform:scale 整体缩放，
   非 16:9 屏幕自动出现黑边（letterbox），画面永不变形。
   ============================================================ */

:root{
  --paper:#efe9dd;        /* 宣纸底色 */
  --paper2:#e4dccb;       /* 宣纸暗部 */
  --ink:#1c1a18;          /* 浓墨 */
  --ink2:#3c3833;         /* 重墨 */
  --ink3:#6d665c;         /* 中墨 */
  --ink4:#a39a8c;         /* 淡墨 */
  --cinnabar:#9d2b20;     /* 朱砂（印章色） */
  --seal:#b03a2e;
  --gold:#c9a227;
  --font-ink:"STKaiti","KaiTi_GB2312","KaiTi","Kaiti SC","楷体","STSong","SimSun",serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;padding:0;background:#000;overflow:hidden;}
body{
  font-family:var(--font-ink);
  color:var(--ink);
  user-select:none;-webkit-user-select:none;
  touch-action:none;
}

#app{position:fixed;inset:0;background:#000;overflow:hidden;}

/* 舞台：固定 960x540，JS 计算 scale 后整体缩放居中 */
#stage{
  position:absolute;left:50%;top:50%;
  width:960px;height:540px;
  transform-origin:50% 50%;
  transform:translate(-50%,-50%) scale(1);
  background:var(--paper);
  overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.8);
}

#game{position:absolute;left:0;top:0;width:960px;height:540px;display:block;}

/* ---------------- 通用界面层 ---------------- */
.screen{
  position:absolute;left:0;top:0;width:960px;height:540px;
  display:none;opacity:0;
  z-index:20;
}
.screen.show{display:block;animation:scrFade .35s ease forwards;}
@keyframes scrFade{from{opacity:0}to{opacity:1}}

.full-bg{position:absolute;left:0;top:0;width:960px;height:540px;}

/* 宣纸纹理（用 CSS 渐变模拟，避免外部图片） */
.paper-grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%,rgba(0,0,0,.03) 0 2px,transparent 3px),
    radial-gradient(circle at 70% 60%,rgba(0,0,0,.025) 0 2px,transparent 3px),
    radial-gradient(circle at 45% 85%,rgba(0,0,0,.02) 0 2px,transparent 3px);
  background-size:37px 41px,53px 47px,61px 59px;
}

/* ---------------- 毛笔风格按钮 ---------------- */
.ink-btn{
  position:relative;
  font-family:var(--font-ink);
  font-size:26px;letter-spacing:2px;
  color:var(--paper);
  background:linear-gradient(180deg,#2b2724,#141210);
  border:none;border-radius:4px;
  padding:10px 30px;margin:6px;
  cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.35),inset 0 0 18px rgba(255,255,255,.06);
  transition:transform .12s ease,filter .12s ease;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.ink-btn::before{
  content:"";position:absolute;inset:-4px -6px;
  border-radius:8px;
  background:radial-gradient(ellipse at center,rgba(28,26,24,.18),transparent 70%);
  z-index:-1;filter:blur(2px);
}
.ink-btn:hover{transform:translateY(-2px);filter:brightness(1.15);}
.ink-btn:active{transform:translateY(1px) scale(.97);}
.ink-btn.ghost{
  background:transparent;color:var(--ink2);
  border:2px solid rgba(28,26,24,.55);
  box-shadow:none;text-shadow:none;
}
.ink-btn.ghost:hover{background:rgba(28,26,24,.08);}
.ink-btn.tiny{font-size:16px;padding:4px 14px;}

.center-row{display:flex;justify-content:center;margin-top:14px;}

/* ---------------- 载入画面 ---------------- */
#scr-loading{
  background:radial-gradient(ellipse at center,#f4efe4 0%,#ded5c3 70%,#c8bda9 100%);
}
.loading-inner{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;}
#logoCanvas{width:480px;height:240px;}
.brush-progress{
  width:420px;height:10px;background:rgba(28,26,24,.10);
  border-radius:6px;overflow:hidden;position:relative;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
}
.brush-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#8d8577,#1c1a18 60%,#000);
  border-radius:6px;
  transition:width .18s linear;
  box-shadow:0 0 8px rgba(28,26,24,.5);
}
.load-tip{font-size:20px;color:var(--ink3);letter-spacing:6px;}

/* ---------------- 主菜单 ---------------- */
.menu-content{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;}
#titleCanvas{width:640px;height:230px;}
.menu-btns{display:flex;flex-direction:column;align-items:center;margin-top:6px;}
.menu-btns .ink-btn{width:250px;text-align:center;}
.menu-foot{margin-top:16px;font-size:20px;color:var(--ink3);}
.menu-foot b{color:var(--cinnabar);font-size:24px;}

/* ---------------- 标题（通用） ---------------- */
.paper-title{
  text-align:center;font-size:44px;letter-spacing:10px;color:var(--ink);
  margin-top:26px;text-shadow:0 2px 0 rgba(255,255,255,.5),0 0 22px rgba(28,26,24,.18);
  position:relative;
}
.paper-title::after{
  content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);
  width:280px;height:6px;
  background:radial-gradient(ellipse at center,rgba(28,26,24,.5),transparent 70%);
  filter:blur(1px);
}
.paper-title .sub{font-size:22px;color:var(--ink3);letter-spacing:4px;}

/* ---------------- 难度选择 ---------------- */
#scr-diff,#scr-levels,#scr-ach,#scr-rank{
  background:radial-gradient(ellipse at 50% 0%,#f6f1e6 0%,#e6ddcb 60%,#d3c8b3 100%);
}
.diff-list{display:flex;justify-content:center;gap:26px;margin-top:46px;}
.diff-card{
  width:300px;padding:10px 10px 14px;
  background:rgba(255,253,247,.55);
  border:2px solid rgba(28,26,24,.35);
  border-radius:6px;text-align:center;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s;
  position:relative;overflow:hidden;
}
.diff-card .thumb{width:280px;height:168px;display:block;border-radius:3px;}
.diff-card .diff-name{font-size:32px;letter-spacing:8px;margin-top:6px;}
.diff-card .diff-desc{font-size:15px;color:var(--ink3);line-height:1.5;margin-top:4px;}
.diff-card:hover{transform:translateY(-6px);box-shadow:0 10px 26px rgba(28,26,24,.28);}
/* 选中时的水墨高亮 */
.diff-card.sel{
  border-color:var(--cinnabar);
  box-shadow:0 0 0 3px rgba(157,43,32,.18),0 12px 30px rgba(28,26,24,.3);
  transform:translateY(-6px) scale(1.03);
}
.diff-card.sel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgba(157,43,32,.16),transparent 65%);
  animation:inkPulse 1.4s ease-in-out infinite;
}
@keyframes inkPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------------- 关卡选择 ---------------- */
.back-tl{position:absolute;left:20px;top:18px;font-size:20px;padding:6px 16px;z-index:5;}
.level-list{display:flex;justify-content:center;gap:30px;margin-top:52px;}
.level-card{
  width:270px;background:rgba(255,253,247,.5);
  border:2px solid rgba(28,26,24,.35);border-radius:6px;
  padding:10px;text-align:center;cursor:pointer;position:relative;
  transition:transform .18s ease,box-shadow .18s ease;
}
.level-card:hover{transform:translateY(-6px);box-shadow:0 10px 26px rgba(28,26,24,.25);}
.level-card .lv-thumb{width:248px;height:150px;display:block;border-radius:3px;background:#e9e2d3;}
.level-card .lv-name{font-size:26px;letter-spacing:4px;margin-top:6px;}
.level-card .lv-meta{font-size:14px;color:var(--ink3);line-height:1.6;}
.level-card .lv-stars{font-size:24px;color:var(--gold);letter-spacing:4px;height:30px;}
.level-card .lv-star-off{color:rgba(28,26,24,.18);}
/* 锁定状态：灰色水墨轮廓 + 锁 */
.level-card.locked{filter:grayscale(1) contrast(.75) opacity(.72);cursor:pointer;}
.level-card.locked .lv-lock{
  position:absolute;left:50%;top:78px;transform:translate(-50%,-50%);
  font-size:62px;color:rgba(28,26,24,.75);text-shadow:0 2px 8px rgba(255,255,255,.6);
  pointer-events:none;
}
.level-card.shake{animation:lockShake .45s ease;}
@keyframes lockShake{
  0%,100%{transform:translateX(0) rotate(0)}
  20%{transform:translateX(-8px) rotate(-4deg)}
  40%{transform:translateX(8px) rotate(4deg)}
  60%{transform:translateX(-5px) rotate(-2deg)}
  80%{transform:translateX(5px) rotate(2deg)}
}
.lv-toast{
  position:absolute;left:50%;top:130px;transform:translateX(-50%);
  background:rgba(28,26,24,.86);color:var(--paper);
  font-size:16px;padding:6px 14px;border-radius:4px;white-space:nowrap;
  animation:toastIn .25s ease;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------------- 暂停 ---------------- */
#scr-pause{background:rgba(28,26,24,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.pause-box{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:340px;padding:26px 30px;text-align:center;
  background:linear-gradient(180deg,rgba(247,243,234,.97),rgba(232,224,208,.97));
  border:2px solid rgba(28,26,24,.5);border-radius:8px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  display:flex;flex-direction:column;align-items:center;
  animation:boxIn .28s cubic-bezier(.2,1.4,.5,1);
}
@keyframes boxIn{from{opacity:0;transform:translate(-50%,-46%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.pause-title{font-size:40px;letter-spacing:12px;margin-bottom:12px;}
.pause-box .ink-btn{width:240px;font-size:22px;}
.hint{margin-top:10px;font-size:15px;color:var(--ink3);}

/* ---------------- 卷轴（结算 / 排行榜） ---------------- */
#scr-result,#scr-rank{
  background:rgba(28,26,24,.55);
  display:none;flex-direction:column;align-items:center;justify-content:center;
}
#scr-result.show,#scr-rank.show{display:flex;}
.scroll-wrap{display:flex;align-items:stretch;gap:0;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5));}
.scroll-wrap.tall .scroll-paper{max-height:420px;overflow:auto;}
.scroll-rod{
  width:22px;border-radius:11px;
  background:linear-gradient(90deg,#6b5537,#a98e5f 40%,#5e4a2e);
  box-shadow:inset 0 0 6px rgba(0,0,0,.5);
  flex:0 0 22px;
}
.scroll-paper{
  width:640px;min-height:60px;padding:26px 40px 24px;
  background:linear-gradient(180deg,#f7f2e6,#e9e0cc);
  border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15);
  transform-origin:center;
  overflow:hidden;
}
/* 画卷展开动画 */
.scroll-paper.unfurl{animation:unfurl .7s cubic-bezier(.25,1,.4,1) forwards;}
@keyframes unfurl{
  from{transform:scaleX(0);opacity:.2;filter:blur(4px)}
  to{transform:scaleX(1);opacity:1;filter:blur(0)}
}
.res-title{font-size:32px;letter-spacing:6px;text-align:center;margin-bottom:6px;}
.res-stars{text-align:center;font-size:46px;letter-spacing:10px;height:56px;color:var(--cinnabar);}
.res-stars .st{display:inline-block;opacity:0;}
.res-stars .st.stamp{animation:stampIn .45s cubic-bezier(.2,1.6,.4,1) forwards;}
@keyframes stampIn{
  0%{opacity:0;transform:scale(2.6) rotate(-18deg)}
  60%{opacity:1;transform:scale(.9) rotate(3deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.res-lines{margin-top:6px;}
.res-line{
  font-size:21px;color:var(--ink2);line-height:1.9;
  opacity:0;transform:translateX(-8px);
  border-bottom:1px dashed rgba(28,26,24,.16);
  display:flex;justify-content:space-between;
}
.res-line.write{animation:writeIn .42s ease forwards;}
@keyframes writeIn{to{opacity:1;transform:translateX(0)}}
.res-line b{color:var(--ink);font-weight:normal;}
.res-line .good{color:#2f7a3e;}
.res-line .bad{color:#9d2b20;}
.res-compare{text-align:center;font-size:20px;margin-top:10px;color:var(--ink3);opacity:0;}
.res-compare.write{animation:writeIn .4s .2s ease forwards;}
.res-btns{display:flex;justify-content:center;gap:10px;margin-top:16px;flex-wrap:wrap;}
.res-btns .ink-btn{font-size:20px;padding:8px 20px;}

/* 水墨进度条（铜钱收集率） */
.ink-bar{
  position:relative;width:100%;height:16px;margin-top:8px;
  background:rgba(28,26,24,.12);border-radius:8px;overflow:hidden;
}
.ink-bar i{
  position:absolute;left:0;top:0;height:100%;width:0%;
  background:linear-gradient(90deg,#8b8375,#1c1a18);
  border-radius:8px;transition:width .9s ease;
}
.ink-bar::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.35),transparent 60%);
}

/* ---------------- 最终结算 / 结局 ---------------- */
#scr-final{
  background:radial-gradient(ellipse at 50% 40%,#f6f1e5,#d9cfba);
  flex-direction:column;align-items:center;justify-content:center;display:none;
}
#scr-final.show{display:flex;}
.final-inner{text-align:center;width:760px;}
.final-rank{
  font-size:120px;line-height:1;color:var(--cinnabar);
  text-shadow:0 0 30px rgba(157,43,32,.35);
  animation:stampIn .6s cubic-bezier(.2,1.6,.4,1);
}
.final-ending{font-size:34px;letter-spacing:8px;margin:6px 0 10px;color:var(--ink);}
#finalLines{max-width:600px;margin:0 auto;}

/* ---------------- 游戏结束 ---------------- */
#scr-gameover{background:rgba(20,18,16,.9);flex-direction:column;
  align-items:center;justify-content:center;display:none;}
#scr-gameover.show{display:flex;}
.go-inner{width:620px;padding:30px 40px;background:linear-gradient(180deg,#f4efe3,#e2d9c6);
  border-radius:8px;border:2px solid rgba(28,26,24,.5);text-align:center;}
.go-title{font-size:52px;letter-spacing:14px;color:var(--ink);margin-bottom:12px;}

/* ---------------- 成就 ---------------- */
.ach-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  width:760px;margin:34px auto 0;
}
.ach-item{
  background:rgba(255,253,247,.5);border:2px solid rgba(28,26,24,.3);
  border-radius:6px;padding:12px 14px;display:flex;gap:12px;align-items:center;
}
.ach-item.locked{filter:grayscale(1) opacity(.55);}
.ach-seal{
  width:56px;height:56px;flex:0 0 56px;border-radius:6px;
  background:var(--seal);color:#fff;font-size:26px;line-height:56px;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.ach-item.locked .ach-seal{background:var(--ink3);}
.ach-name{font-size:22px;letter-spacing:2px;}
.ach-desc{font-size:14px;color:var(--ink3);line-height:1.4;}

/* ---------------- 排行榜 ---------------- */
.rank-list{margin-top:10px;max-height:320px;overflow:auto;}
.rank-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:19px;padding:6px 4px;border-bottom:1px dashed rgba(28,26,24,.18);
}
.rank-row .idx{width:44px;text-align:center;font-size:22px;}
.rank-row.g1 .idx{color:var(--gold);text-shadow:0 0 8px rgba(201,162,39,.6);}
.rank-row.g2 .idx{color:#8d8d8d;}
.rank-row.g3 .idx{color:#a9713d;}
.rank-row .rscore{color:var(--cinnabar);}
.rank-row .rmeta{color:var(--ink3);font-size:15px;}
.rank-empty{text-align:center;color:var(--ink3);font-size:18px;padding:30px 0;}

/* ---------------- 操作说明 ---------------- */
/* 移动端说明页：全屏自适应、可滚动，返回按钮吸底常驻，避免手机上卡在说明页 */
#scr-help{
  position:fixed;left:0;top:0;right:0;bottom:0;width:100%;height:100%;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(ellipse at 50% 0%,#f6f1e6,#ddd3bf);
  z-index:40;padding:18px 0 8px;
}
#scr-help .help-inner{width:auto;max-width:920px;margin:0 auto;padding:0 18px;box-sizing:border-box;}
#scr-help .help-grid{display:flex;gap:24px;margin-top:22px;align-items:flex-start;}
#scr-help .help-cols{flex:1;min-width:0;}
#scr-help .center-row{margin-top:18px;position:sticky;bottom:0;background:linear-gradient(180deg,rgba(246,241,230,0),#f6f1e6 28%);padding:10px 0 4px;}
@media (max-width:760px){
  #scr-help .help-grid{flex-direction:column;gap:14px;}
  #scr-help .help-inner{padding:0 14px;}
}
.hl{display:flex;gap:14px;font-size:19px;line-height:2.1;border-bottom:1px dashed rgba(28,26,24,.15);}
.hl b{
  display:inline-block;min-width:110px;text-align:center;
  background:linear-gradient(180deg,#2b2724,#141210);color:var(--paper);
  border-radius:4px;font-size:16px;padding:1px 8px;height:26px;line-height:24px;margin-top:5px;
}
.help-demos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.demo{text-align:center;font-size:15px;color:var(--ink3);}
.demo canvas{background:rgba(255,255,255,.45);border:1px solid rgba(28,26,24,.25);border-radius:4px;}

/* ---------------- 确认框 ---------------- */
#scr-confirm{background:rgba(28,26,24,.55);display:none;align-items:center;justify-content:center;}
#scr-confirm.show{display:flex;}
.confirm-box{
  width:520px;padding:28px 34px;text-align:center;
  background:linear-gradient(180deg,#f7f2e6,#e6ddc9);
  border:2px solid rgba(28,26,24,.5);border-radius:8px;
  animation:boxIn .26s cubic-bezier(.2,1.4,.5,1);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.confirm-text{font-size:24px;line-height:1.6;margin-bottom:6px;}

/* ---------------- 竖屏提示 ---------------- */
#scr-orient{background:var(--paper);display:none;flex-direction:column;
  align-items:center;justify-content:center;z-index:60;}
#scr-orient.show{display:flex;}
.orient-inner{text-align:center;}
.phone{
  width:120px;height:200px;position:relative;margin:0 auto 26px;
  animation:rotPhone 2s ease-in-out infinite;
}
.phone-body{
  position:absolute;inset:0;border:6px solid var(--ink2);border-radius:16px;
  background:rgba(255,255,255,.35);
}
.phone-screen{
  position:absolute;left:14px;right:14px;top:22px;bottom:22px;
  background:linear-gradient(180deg,rgba(28,26,24,.25),rgba(28,26,24,.08));
  border-radius:6px;
}
@keyframes rotPhone{
  0%,30%{transform:rotate(0)}
  60%,100%{transform:rotate(90deg)}
}
.orient-tip{font-size:30px;letter-spacing:8px;color:var(--ink);}

/* ---------------- 右上角工具按钮 ---------------- */
#topTools{position:absolute;right:12px;top:10px;display:flex;gap:8px;z-index:40;}
#topTools.hidden{display:none;}
.tool-btn{
  width:38px;height:38px;line-height:36px;text-align:center;font-size:20px;
  background:rgba(247,243,234,.72);border:2px solid rgba(28,26,24,.4);
  border-radius:6px;cursor:pointer;color:var(--ink);
  transition:transform .12s,background .12s;
}
.tool-btn:hover{background:rgba(247,243,234,.95);transform:translateY(-2px);}
.tool-btn:active{transform:scale(.92);}
.tool-btn.off{opacity:.45;}

/* ---------------- 移动端虚拟按键 ---------------- */
html,body{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;}
#touchPad{position:absolute;inset:0;z-index:30;pointer-events:none;touch-action:none;}
#touchPad.hidden{display:none;}
.t-left{position:absolute;left:18px;bottom:18px;display:flex;gap:10px;align-items:flex-end;pointer-events:auto;}
.t-actions{position:absolute;right:18px;bottom:18px;display:flex;gap:10px;align-items:flex-end;pointer-events:auto;z-index:33;}
.tbtn{
  width:74px;height:74px;line-height:72px;text-align:center;font-size:30px;
  background:rgba(28,26,24,.42);color:var(--paper);
  border:3px solid rgba(247,243,234,.55);border-radius:50%;
  pointer-events:auto;touch-action:none;
  transition:transform .06s,background .06s;
}
.tbtn.wide{width:74px;height:56px;line-height:52px;border-radius:28px;font-size:24px;}
.tbtn.round{width:80px;height:80px;line-height:76px;font-size:26px;}
/* 墨 / 跳 统一等大 80px（「跑」按钮已移除，加速改由转轮「划得远」完成） */
.tbtn.round[data-k="jump"]{width:160px;height:160px;line-height:156px;font-size:56px;border:none;background:transparent;box-shadow:none;}
.tbtn.round[data-k="jump"].press{background:transparent;transform:scale(.88);}
.tbtn.round.big{width:160px;height:160px;line-height:156px;font-size:56px;background:rgba(28,26,24,.55);border:none;}
.tbtn.press{background:rgba(28,26,24,.85);transform:scale(.88);}

/* 左半屏拖拽转轮（方向控制：左 / 右 / 蹲下） */
/* 宽度 50%（右边界 x=480）；跳键在右半屏，转轮在左半屏，左右分工 */
#stickZone{position:absolute;top:56px;left:0;bottom:0;width:50%;pointer-events:auto;touch-action:none;z-index:31;}
#stickWheel{position:absolute;width:172.8px;height:172.8px;margin:-86.4px 0 0 -86.4px;border:3px solid transparent;border-radius:50%;background:rgba(28,26,24,.32);display:none;pointer-events:none;z-index:32;}
#stickWheel .knob{position:absolute;left:50%;top:50%;width:76.8px;height:76.8px;margin:-38.4px 0 0 -38.4px;border-radius:50%;background:rgba(247,243,234,.55);transition:background .1s,box-shadow .1s;}
/* 右半屏任意位置点击=跳（与右下「跳」键共用 jump 动作；z-index 低于跳键使其浮于其上） */
#jumpZone{position:absolute;top:56px;right:0;bottom:0;width:50%;pointer-events:auto;touch-action:none;z-index:30;background:transparent;}
/* 按下右半屏时的淡反馈，确认「点到了」 */
#jumpZone.press{background:rgba(247,243,234,.14);}
/* 划得远 = 加速中：摇杆变红作为视觉反馈 */
#stickWheel .knob.fast{background:rgba(198,58,46,.85);box-shadow:0 0 12.8px rgba(198,58,46,.7);}

/* ---------------- 成就印章弹窗 ---------------- */
#achToast{
  position:absolute;left:50%;top:120px;transform:translateX(-50%);
  z-index:40;pointer-events:none;display:flex;flex-direction:column;gap:10px;align-items:center;
}
.ach-pop{
  background:rgba(247,243,234,.96);border:3px solid var(--seal);
  border-radius:8px;padding:10px 22px;text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  animation:sealPop .4s cubic-bezier(.2,1.7,.4,1);
}
.ach-pop .t{font-size:15px;color:var(--ink3);letter-spacing:4px;}
.ach-pop .n{font-size:26px;color:var(--seal);letter-spacing:3px;}
@keyframes sealPop{
  0%{opacity:0;transform:scale(2.4) rotate(-14deg)}
  55%{opacity:1;transform:scale(.94) rotate(3deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.ach-pop.out{animation:sealOut .5s forwards;}
@keyframes sealOut{to{opacity:0;transform:translateY(-16px) scale(.95)}}

/* ---------------- 画布暂停时的“水墨晕开”模糊 ---------------- */
#game{transition:filter .35s ease;}
#game.blur{filter:blur(4px) saturate(.85);}

/* ---------------- 水墨转场（墨色从中心扩散覆盖再褪去） ---------------- */
.ink-wipe{
  position:absolute;left:50%;top:50%;
  width:1400px;height:1400px;margin:-700px 0 0 -700px;
  border-radius:50%;pointer-events:none;z-index:80;
  background:radial-gradient(circle at center,
      rgba(20,18,16,.98) 0%,rgba(20,18,16,.96) 38%,
      rgba(20,18,16,.55) 52%,rgba(20,18,16,0) 68%);
  transform:scale(0);
  animation:inkWipe .9s cubic-bezier(.4,0,.35,1) forwards;
}
@keyframes inkWipe{
  0%{transform:scale(0);opacity:1}
  45%{transform:scale(1.1);opacity:1}
  62%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1.6);opacity:0}
}

/* ---------------- 小屏适配（舞台由 JS 缩放，这里只做安全区） ---------------- */
@media (max-width:900px){
  .tbtn{width:64px;height:64px;line-height:62px;font-size:26px;}
  /* 手机小屏同样保持「墨 / 跳」为 80px 等大，不被上面的 .tbtn(64px) 规则压小 */
  .tbtn.round[data-k="jump"]{width:160px;height:160px;line-height:156px;}
  .tbtn.round.big{width:160px;height:160px;line-height:156px;}
}