@font-face{
  font-family:"Zpix";
  src:url("fonts/zpix.woff2") format("woff2");
  font-display:swap;
}
:root{
  --felt:#1c3a30; --felt2:#16302a; --ink:#2b2218;
  --parch:#f3ead6; --parch2:#e9dcbf; --parch-line:#cbb98c;
  --gold:#d6ad5c; --red:#a23b2e; --redhead:#9c3a2c;
  --c-math:#5b86c4; --c-cs:#8a6fc0; --c-econ:#d8b24a; --c-lit:#6f86b8;
  --c-biz:#d98a4a; --c-psy:#4aa6a0; --c-soc:#5fa45e; --c-art:#cf7aa0;
  --skill:#c9b27e; --opp:#7bbf86; --chal:#cf8b6f; --special:#b9a878;
  --font-pixel:"Zpix","PingFang SC",monospace;
  --font-body:"PingFang SC","Microsoft Yahei",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--font-body);background:#0b1712;color:var(--ink)}

/* 像素美术全局：所有 SVG 像素插画都用最近邻放大，保持硬边 */
img.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block}

/* =========================================================
   舞台 stage — 16/10 桌面观感，缩放适配 iframe / 视口
   墨绿桌布 + 暗描边 + 内阴影，模拟铺在桌上的棋盘箱
   ========================================================= */
#app{height:100%}
.frame{
  height:100%;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:14px;
  /* 桌布纹理：墨绿渐变 + 极淡的斜向编织噪点 */
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 4px),
    radial-gradient(120% 90% at 50% 0%, #224a3c 0%, #1c3a30 45%, #122a23 100%);
}
.stage{
  position:relative;
  aspect-ratio:16/10;
  width:min(100%, calc((100vh - 28px) * 1.6));
  max-height:calc(100vh - 28px);
  background:
    linear-gradient(160deg, var(--felt) 0%, var(--felt2) 100%);
  border:4px solid #0a1d17;
  border-radius:16px;
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    inset 0 0 70px rgba(0,0,0,.40),
    inset 0 2px 0 rgba(255,255,255,.05);
  display:grid;
  grid-template-columns:206px 1fr 250px;
  grid-template-rows:50px 1fr 70px;
  gap:11px;
  padding:13px;
  overflow:hidden;
  /* 金色内描边：用一层伪元素画华丽细描边 */
}
.stage::before{
  content:"";position:absolute;inset:5px;border-radius:11px;pointer-events:none;
  border:1px solid rgba(214,173,92,.45);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
  z-index:6;
}

/* =========================================================
   顶部栏 top bar — 标题 + 红绶带副标题 + 羊皮纸按钮
   ========================================================= */
.hd{grid-column:1/4;display:flex;align-items:center;gap:14px;z-index:2}
.logo{display:flex;align-items:center;gap:10px}
.logo .name{
  font-family:var(--font-pixel);
  font-size:24px;line-height:1;letter-spacing:3px;
  color:var(--gold);
  text-shadow:0 2px 0 #5a3a18, 0 3px 0 #000, 2px 0 0 rgba(0,0,0,.4);
}
/* 红色绶带副标题：CSS 切角的丝带 */
.logo .ribbon{
  position:relative;
  font-family:var(--font-pixel);font-size:11px;letter-spacing:1px;
  color:#ffeccb;background:var(--red);
  padding:5px 12px;margin-left:2px;
  box-shadow:0 2px 0 #6e271d, inset 0 1px 0 rgba(255,255,255,.18);
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.logo .ribbon::after{
  content:"";position:absolute;left:-6px;top:100%;
  border-width:0 6px 6px 0;border-style:solid;
  border-color:transparent #6e271d transparent transparent;
}
.hd .tag{
  flex:1;text-align:center;color:#e7d9b3;
  font-family:var(--font-pixel);font-size:13px;letter-spacing:4px;
  text-shadow:0 1px 0 #000;
}
.hd .btns{display:flex;gap:7px}

/* 羊皮纸像素按钮：方角、双描边、底部高光做按压立体感 */
.pbtn{
  font-family:var(--font-pixel);font-size:11px;letter-spacing:1px;
  color:#4a3b22;
  background:linear-gradient(180deg, #f7efdb 0%, var(--parch) 60%, var(--parch2) 100%);
  border:2px solid var(--parch-line);
  border-radius:5px;
  padding:6px 10px;cursor:pointer;
  box-shadow:0 2px 0 #b09a68, inset 0 1px 0 rgba(255,255,255,.7);
  display:inline-flex;align-items:center;gap:5px;
}
.pbtn:active{transform:translateY(1px);box-shadow:0 1px 0 #b09a68}
.pbtn .i{width:14px;height:14px;flex:0 0 auto}
.pbtn.green{
  color:#eaf2e4;
  background:linear-gradient(180deg, #3a6e57 0%, #2f5d4a 70%, #285043 100%);
  border-color:#16302a;box-shadow:0 2px 0 #163027, inset 0 1px 0 rgba(255,255,255,.15);
}

/* =========================================================
   面板通用 — 羊皮纸纸面板：双描边 + 内阴影 + 顶部高光
   ========================================================= */
.panel{
  background:linear-gradient(180deg, #f7efdb 0%, var(--parch) 100%);
  border:2px solid var(--parch-line);
  border-radius:10px;
  padding:9px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 0 0 1px rgba(160,140,90,.25),
    inset 0 -8px 14px rgba(170,148,98,.18),
    0 2px 4px rgba(0,0,0,.25);
}
/* 小节标题：像素字 + 金红下划虚线 + 左侧方块装饰 */
.panel h4{
  font-family:var(--font-pixel);font-size:11px;color:#8a4a2a;letter-spacing:1px;
  display:flex;align-items:center;gap:6px;
  border-bottom:2px dotted var(--parch-line);
  padding-bottom:5px;margin-bottom:7px;
}
.panel h4::before{content:"";width:7px;height:7px;background:var(--red);box-shadow:1px 1px 0 #6e271d}

/* ===== 左栏 ===== */
.left{grid-row:2/3;display:flex;flex-direction:column;gap:9px;min-height:0;z-index:2}
.pcard{display:flex;gap:9px;align-items:center}
.ava{
  width:46px;height:46px;flex:0 0 auto;border-radius:7px;
  background:var(--parch2);border:2px solid var(--parch-line);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.2);
  padding:1px;
}
.ava img{width:100%;height:100%}
.pcard .nm{font-family:var(--font-pixel);font-size:15px;color:#3a2f1c;letter-spacing:1px}
.pcard .uni{font-size:11px;color:#6a5630;margin-top:2px;display:flex;align-items:center;gap:4px}
.pcard .uni .crest{width:14px;height:14px;border-radius:50%;background:var(--gold);color:#5a3a18;font-size:9px;font-weight:800;display:grid;place-items:center}
.persona{font-size:11px;color:#5b4a2c;line-height:1.55;margin-top:8px;border-top:1px dashed var(--parch-line);padding-top:7px}

/* 学期进度条 */
.term{display:flex;flex-direction:column;gap:6px}
.term .row{font-size:12px;color:#5b4a2c;display:flex;align-items:center;gap:6px}
.term .row b{font-family:var(--font-pixel);color:var(--red);font-size:14px;letter-spacing:1px}
.term .laps{display:flex;gap:4px;margin-top:2px}
.term .laps i{flex:1;height:7px;border-radius:3px;background:var(--parch2);border:1px solid var(--parch-line)}
.term .laps i.on{background:linear-gradient(90deg,#e0a23a,#f0c267);border-color:#b8862f}

/* 4 公共能力徽章：六边形像素徽章 */
.abilities{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.abil-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.badge{
  position:relative;text-align:center;padding:9px 4px 7px;
  background:linear-gradient(180deg, var(--parch2), #ded0ad);
  border:2px solid var(--parch-line);
  /* 六边形切角 */
  clip-path:polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.badge .ihex{
  width:30px;height:30px;margin:0 auto 4px;
  background:#fff;border:2px solid var(--gold);
  clip-path:polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  display:grid;place-items:center;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.badge .ihex img{width:24px;height:24px}
.badge .bn{font-size:9.5px;color:#4a3b22;line-height:1.1;letter-spacing:.5px}
.badge .lv{
  font-family:var(--font-pixel);font-size:9px;color:#fff;letter-spacing:.5px;
  background:var(--red);border-radius:3px;padding:1px 5px;margin-top:3px;display:inline-block;
  box-shadow:0 1px 0 #6e271d;
}
.tip{
  font-size:10px;color:#6a5630;line-height:1.5;
  background:var(--parch2);border:1px dashed var(--parch-line);border-radius:7px;
  padding:7px;display:flex;gap:6px;align-items:flex-start;
}
.tip::before{content:"💡";font-size:12px;filter:grayscale(.1)}

/* =========================================================
   中央棋盘 board — 7×7 = 24 格环 + 中心校园插画
   ========================================================= */
.board{
  grid-column:2/3;grid-row:2/3;min-height:0;position:relative;
  display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);
  gap:6px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 3px, transparent 3px 6px),
    linear-gradient(180deg,#15463b,#103128);
  border:3px solid #0a221c;border-radius:11px;padding:8px;
  box-shadow:inset 0 0 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(214,173,92,.18);
  z-index:2;
}
.tile{
  position:relative;border-radius:7px;overflow:hidden;
  background:linear-gradient(180deg,#f7efdb,var(--parch));
  border:1px solid rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.3);
  font-size:10px;line-height:1.12;color:#3a2f1c;
  padding:5px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;text-align:center;
}
/* 专业街区：顶部色带 + 图标 + 名 + 进度 */
.tile .bar{position:absolute;top:0;left:0;right:0;height:10px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.2)}
.tile.major{justify-content:flex-start;padding-top:13px}
.tile .ic{width:20px;height:20px;margin:1px 0}
.tile .ic img{width:100%;height:100%}
.tile .t{font-family:var(--font-pixel);font-size:10px;color:#3a2f1c;letter-spacing:.3px}
.tile .pg{font-size:9px;color:#6a5630;display:flex;align-items:center;gap:3px}
.tile .pg b{color:var(--red)}
/* 角格：浅色加重 */
.tile.corner{
  background:linear-gradient(180deg,#f3e6c4,#e7d6ad);
  border:2px solid var(--gold);
}
.tile.corner .ic{width:24px;height:24px}
.tile.corner .t{font-size:10px}
/* 能力 / 机会 / 挑战 图标格 */
.tile.glyph .t{font-size:9.5px}
/* 街区学满：金色强化 */
.tile.done{box-shadow:inset 0 0 0 2px var(--gold), 0 1px 2px rgba(0,0,0,.3)}
/* 当前落点：金色外发光 + 棋子 */
.tile.cur{outline:3px solid var(--gold);outline-offset:-1px;box-shadow:0 0 16px var(--gold);z-index:4}
.pawn{
  position:absolute;top:-6px;right:-4px;width:22px;height:26px;z-index:5;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.5));
}

/* 中心：校园插画框 + 回合/骰盘 overlay（占 5×5 中央） */
.center{
  grid-column:2/7;grid-row:2/7;position:relative;border-radius:10px;overflow:hidden;
  border:3px solid var(--gold);
  box-shadow:0 0 0 2px #0a221c, inset 0 0 24px rgba(0,0,0,.35);
  background:#9ec1a8;
}
.center .scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 顶部渐隐遮罩，让 overlay 文案可读 */
.center .veil{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(12,32,25,.0) 30%, rgba(12,32,25,.18) 62%, rgba(12,32,25,.62) 100%);}
.center .stack{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;padding:8px 10px 10px;text-align:center}
.turn-ribbon{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  font-family:var(--font-pixel);font-size:11px;letter-spacing:2px;color:#ffeccb;
  background:var(--red);padding:4px 16px;
  box-shadow:0 2px 0 #6e271d, inset 0 1px 0 rgba(255,255,255,.2);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
}
.dice{display:flex;gap:14px;align-items:center}
.die{
  width:46px;height:46px;background:#f7efdb;border:2px solid #2b2218;border-radius:9px;
  box-shadow:0 5px 12px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.7);
  display:grid;place-items:center;padding:5px;
}
.die img{width:100%;height:100%}
.pts{
  font-family:var(--font-pixel);font-size:15px;letter-spacing:1px;color:#fff;
  background:var(--red);padding:6px 18px;border-radius:6px;
  box-shadow:0 3px 0 #6e271d, inset 0 1px 0 rgba(255,255,255,.2);
}
.pts b{color:#ffe08a}
.movebtn{
  font-family:var(--font-pixel);font-size:13px;letter-spacing:1px;color:#eaf2e4;
  background:linear-gradient(180deg,#3a6e57,#2f5d4a 70%,#285043);
  border:2px solid #16302a;border-radius:8px;padding:8px 22px;cursor:pointer;
  box-shadow:0 3px 0 #163027, inset 0 1px 0 rgba(255,255,255,.15);
  display:inline-flex;align-items:center;gap:7px;
}
.movebtn:active{transform:translateY(1px);box-shadow:0 2px 0 #163027}
.movebtn .i{width:18px;height:18px}

/* =========================================================
   右栏 — 当前事件卡 + MUD 日志
   ========================================================= */
.right{grid-row:2/3;display:flex;flex-direction:column;gap:9px;min-height:0;z-index:2}
.evt{padding:0;overflow:hidden}
.evt .ehd{
  font-family:var(--font-pixel);font-size:11px;letter-spacing:1px;color:#fff;
  background:linear-gradient(180deg,var(--red),var(--redhead));
  padding:6px 9px;display:flex;align-items:center;gap:6px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.2);
}
.evt .ehd::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffe08a;box-shadow:0 0 6px #ffe08a}
.evt .body{padding:9px}
.evt .land{font-size:12px;font-weight:700;margin-bottom:7px;color:#3a2f1c}
.evt .land b{font-family:var(--font-pixel);color:var(--red);letter-spacing:.5px}
.stats3{display:flex;gap:6px;margin-bottom:9px}
.stats3 div{
  flex:1;text-align:center;padding:5px 3px;
  background:var(--parch2);border:1px solid var(--parch-line);border-radius:6px;
  font-size:9.5px;color:#6a5630;
}
.stats3 b{display:block;font-family:var(--font-pixel);font-size:13px;color:#3a2f1c;margin-top:2px;letter-spacing:.5px}
.stats3 b.r{color:var(--red)}
.stats3 b.g{color:#2f7d4a}
.act{display:flex;gap:7px}
.act .pbtn{flex:1;justify-content:center}

/* MUD 日志：深色终端框 + 彩色标签 */
.log{
  flex:1 1 auto;min-height:0;overflow:auto;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#11140f,#0c0f0a);
  border:2px solid #2a2a20;border-radius:10px;padding:9px;
  color:#cfe0c8;font-size:10px;line-height:1.6;
  box-shadow:inset 0 0 0 1px rgba(214,173,92,.12), inset 0 0 18px rgba(0,0,0,.5);
}
.log .lh{font-family:var(--font-pixel);font-size:9px;color:#7a8a72;letter-spacing:1px;margin-bottom:6px;display:flex;align-items:center;gap:5px}
.log .lh::before{content:"▌";color:#7fd08a}
.log .ln{margin-bottom:5px}
.log .ln:last-child{margin-bottom:0}
.log .k{color:#7fd08a;font-weight:700}
.log .k2{color:#e0c071;font-weight:700}
.log .k3{color:#e08a7f;font-weight:700}

/* =========================================================
   底部状态栏 — 毕业仪表盘
   ========================================================= */
.ft{
  grid-column:1/4;display:flex;align-items:center;gap:16px;
  background:linear-gradient(180deg,#13261e,#0e1f18);
  border:2px solid #0a1d17;border-radius:11px;padding:8px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(214,173,92,.14);
  z-index:2;
}
.stat{display:flex;flex-direction:column;gap:4px;min-width:128px}
.stat .top{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#cdbb8d}
.stat .top .lbl{display:flex;align-items:center;gap:5px}
.stat .top .lbl .i{width:14px;height:14px}
.stat .top b{font-family:var(--font-pixel);color:#fff;font-size:12px;letter-spacing:.5px}
.meter{height:8px;background:#06120e;border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.meter i{display:block;height:100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.m-time{background:linear-gradient(90deg,#e0a23a,#f0c267)}
.m-cred{background:linear-gradient(90deg,#5b86c4,#7fb0e0)}
.m-trans{background:linear-gradient(90deg,#6fce7a,#9fe0a6)}
.stat.exp{min-width:100px}
.stars{font-family:var(--font-pixel);font-size:15px;color:var(--gold);letter-spacing:2px;text-shadow:0 1px 0 #5a3a18}
.spacer{flex:1}
.goal{
  text-align:center;color:#ecd9b3;font-size:9.5px;line-height:1.5;
  background:#0a1d17;border:1px solid #2f5d4a;border-radius:8px;padding:7px 11px;
}
.goal b{color:#ffe08a}
.goal .warn{color:#e08a7f}

/* =========================================================
   移动端「建议用电脑」提示条 (mobile-only notice)
   默认隐藏；仅在 @media(max-width:760px) 下显示。
   羊皮纸 / 金边风格，与游戏整体一致；不遮挡棋盘。
   ========================================================= */
.mobile-notice{
  display:none; /* 桌面永不可见 */
}
@media (max-width:760px){
  .mobile-notice{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:linear-gradient(180deg,#f7efdb 0%,var(--parch2) 100%);
    border:2px solid var(--gold);border-radius:10px;
    padding:9px 12px;margin:10px 10px 0;
    box-shadow:0 2px 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.7);
    font-family:var(--font-body);
  }
  .mn-text{display:flex;flex-direction:column;gap:3px;min-width:0}
  .mn-main{
    font-family:var(--font-pixel);font-size:11px;letter-spacing:.5px;color:var(--ink);
    line-height:1.3;
  }
  .mn-sub{font-size:10px;color:#6a5630;line-height:1.4}
  .mn-close{
    flex:0 0 auto;
    width:22px;height:22px;line-height:1;padding:0;
    font-family:var(--font-pixel);font-size:12px;color:#6a5630;
    background:var(--parch2);border:1px solid var(--parch-line);border-radius:5px;
    cursor:pointer;display:grid;place-items:center;
    box-shadow:0 1px 0 #b09a68;
  }
  .mn-close:hover{background:#e2d5b4;color:var(--ink)}
  .mn-close:active{transform:translateY(1px)}
  .mn-close:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
}

/* =========================================================
   响应式：窄屏 / 移动端 — 取消 16/10 锁定，纵向重排可滚动
   棋盘为主、状态栏吸底、左右栏折叠在棋盘上下
   ========================================================= */
@media (max-width:760px){
  /* 安全网：移动竖排时若仍有溢出，宁可整页纵向滚动也绝不硬裁切
     （html/body/.frame 放开高度并允许 overflow-y，.stage 同样可纵向滚动）。
     桌面 16/10 宽布局走上面分支、不进此 media，不受影响。 */
  html,body{height:auto;min-height:100%;overflow-y:auto}
  .frame{padding:0;align-items:stretch;min-height:100dvh;height:auto;overflow-y:auto}
  .stage{
    aspect-ratio:auto;width:100%;max-height:none;min-height:100dvh;
    border-radius:0;border-width:0;
    display:flex;flex-direction:column;gap:10px;padding:10px 10px 64px;
    overflow:hidden;overflow-y:auto;
  }
  .stage::before{display:none}
  .hd{flex-wrap:wrap;gap:8px}
  .hd .tag{order:3;flex-basis:100%;font-size:11px;letter-spacing:2px}
  .left,.right{order:2}
  .board{order:1;aspect-ratio:1/1;min-height:0}
  .abil-grid{grid-template-columns:repeat(4,1fr)}
  /* 状态栏吸底 */
  .ft{
    position:fixed;left:0;right:0;bottom:0;z-index:20;border-radius:0;
    gap:10px;overflow-x:auto;padding:8px 12px;flex-wrap:nowrap;
  }
  .stat{min-width:120px}
  .goal{min-width:160px}
}

/* =========================================================
   Task 10 接线新增样式
   ========================================================= */

/* 真实点数骰面：3×3 DOM 点阵（白底深点，沿用像素观感） */
.die .pips{
  width:100%;height:100%;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:2px;padding:1px;
}
.die .pips i{
  border-radius:2px;background:transparent;
  align-self:center;justify-self:center;width:8px;height:8px;
}
.die .pips i.on{background:#2b2218;box-shadow:0 1px 0 rgba(0,0,0,.25)}

/* 右栏「本格行动」核心 CTA 区：金框 + 微光 + 标签，读作"在这里下手" */
.evt .cta{
  margin-top:2px;
  background:linear-gradient(180deg,#fff7e4,var(--parch2));
  border:2px solid var(--gold);border-radius:9px;
  padding:8px;position:relative;
  box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 0 14px rgba(214,173,92,.45), inset 0 1px 0 rgba(255,255,255,.7);
}
.evt .cta-label{
  position:absolute;top:-9px;left:9px;
  font-family:var(--font-pixel);font-size:9px;letter-spacing:1px;color:#fff;
  background:var(--red);padding:2px 8px;border-radius:4px;
  box-shadow:0 1px 0 #6e271d, inset 0 1px 0 rgba(255,255,255,.2);
}
.evt .cta-label::before{content:"▸ "}
.evt .done-note{font-size:11px;color:#3a6e57;font-weight:700;text-align:center;padding:6px 2px}
.evt .soon{font-size:10px;color:#8a4a2a;font-weight:700}

/* 当前事件：选课列表 */
.evt .courses{display:flex;flex-direction:column;gap:7px}
.evt .course{
  display:flex;flex-direction:column;gap:5px;
  background:var(--parch2);border:1px solid var(--parch-line);border-radius:7px;
  padding:6px 7px;
}
.evt .cmeta{display:flex;gap:6px;flex-wrap:wrap;font-size:9.5px;color:#6a5630}
.evt .cmeta .cl{
  font-family:var(--font-pixel);font-size:9px;color:#fff;background:var(--red);
  border-radius:3px;padding:1px 5px;box-shadow:0 1px 0 #6e271d;
}
.evt .cmeta .cv{color:#3a6e57;font-weight:700}
.evt .cmeta .ct{color:#8a4a2a;font-weight:700}
.evt .course .pbtn{justify-content:center;width:100%}
/* 灰态按钮（时间不足）：低饱和、禁用手势 */
.pbtn.ghost{
  color:#9a8a6a;
  background:linear-gradient(180deg,#e6dcc2,#d8cbab);
  border-color:#c2b288;box-shadow:0 1px 0 #b09a68;
  cursor:not-allowed;opacity:.75;
}
.pbtn.ghost:active{transform:none}
.evt .no-time{
  display:block;margin-top:3px;text-align:center;
  font-size:9.5px;color:var(--red);font-weight:700;
}
.evt .phase2{font-size:11px;color:#6a5630;line-height:1.55}

/* 续档卡（启动提示：继续上次 / 重新开始） */
.resume-card{
  margin:auto;text-align:center;
  background:linear-gradient(180deg,#f7efdb 0%,var(--parch) 100%);
  border:3px solid var(--gold);border-radius:14px;
  padding:28px 34px;max-width:340px;
  box-shadow:0 16px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.7);
}
.resume-logo{
  font-family:var(--font-pixel);font-size:26px;letter-spacing:3px;color:var(--red);
  text-shadow:0 2px 0 #6e271d;margin-bottom:10px;
}
.resume-sub{font-size:12px;color:#5b4a2c;margin-bottom:6px}
.resume-meta{
  font-family:var(--font-pixel);font-size:11px;color:#8a4a2a;letter-spacing:.5px;
  background:var(--parch2);border:1px dashed var(--parch-line);border-radius:7px;
  padding:7px 10px;margin-bottom:16px;
}
.resume-btns{display:flex;gap:10px;justify-content:center}
.resume-btns .pbtn{font-size:13px;padding:9px 18px}

/* 结局浮层 */
.ending-overlay{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:rgba(10,23,18,.72);backdrop-filter:blur(2px);
}
.ending-card{
  text-align:center;max-width:380px;
  background:linear-gradient(180deg,#f7efdb 0%,var(--parch) 100%);
  border:3px solid var(--gold);border-radius:14px;padding:26px 30px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.ending-title{
  font-family:var(--font-pixel);font-size:18px;color:var(--red);letter-spacing:2px;
  text-shadow:0 2px 0 #6e271d;margin-bottom:12px;
}
.ending-text{font-size:13px;color:#4a3b22;line-height:1.7;margin-bottom:18px}

/* =========================================================
   落点事件弹层 (landing event modal) —— 抢注意力的核心交互
   覆盖在 .stage 内（绝对定位铺满），暗化 + 模糊背景，卡居中压在骰子之上。
   像素观感：羊皮纸卡 + 金边 + 红绶带头 + Zpix 字体。
   ========================================================= */
.evt-modal-overlay{
  position:absolute;inset:0;z-index:40;
  display:grid;place-items:center;padding:18px;
  background:rgba(10,23,18,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:evt-fade 160ms ease both;
}
.evt-modal{
  position:relative;width:min(86%,330px);
  /* 高度封顶在视口内：卡头/卡底固定，长列表（如补录 24 门课）只让卡身滚动，绝不溢出屏幕 */
  max-height:calc(100vh - 36px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,#f7efdb 0%,var(--parch) 100%);
  border:3px solid var(--gold);border-radius:14px;
  box-shadow:0 20px 56px rgba(0,0,0,.6), 0 0 0 2px #0a221c, inset 0 1px 0 rgba(255,255,255,.7);
  padding:0 0 13px;overflow:hidden;
  animation:evt-pop 220ms cubic-bezier(.2,1.5,.4,1) both;
}
.evt-modal .m-head{flex:0 0 auto}
.evt-modal .m-actions{flex:0 0 auto}
/* 红绶带卡头 */
.evt-modal .m-head{
  background:linear-gradient(180deg,var(--red),var(--redhead));
  padding:11px 12px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2);
}
.evt-modal .m-tile{display:flex;align-items:center;gap:10px}
.evt-modal .m-ic{
  width:40px;height:40px;flex:0 0 auto;border-radius:8px;padding:4px;
  background:#fff;border:2px solid var(--tcol,var(--gold));
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.evt-modal .m-ic img{width:100%;height:100%}
.evt-modal .m-meta{min-width:0}
.evt-modal .m-name{
  font-family:var(--font-pixel);font-size:15px;letter-spacing:1px;color:#fff;
  text-shadow:0 1px 0 #000;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
}
.evt-modal .m-kind{
  font-family:var(--font-body);font-size:9.5px;letter-spacing:.5px;color:#ffe08a;
  background:rgba(0,0,0,.25);border-radius:4px;padding:1px 6px;font-weight:700;
}
.evt-modal .m-prog{font-size:11px;color:#ffeccb;margin-top:3px}
.evt-modal .m-prog b{font-family:var(--font-pixel);color:#ffe08a;font-size:13px}
/* 卡身（可滚动区：长列表在此滚动，卡头/卡底固定） */
.evt-modal .m-body{padding:12px 13px 4px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.evt-modal .m-soon,.evt-modal .m-done{
  font-size:12px;color:#5b4a2c;line-height:1.6;text-align:center;padding:6px 2px 10px;
}
.evt-modal .m-done{color:#3a6e57;font-weight:700}
.evt-modal .m-courses{display:flex;flex-direction:column;gap:8px}
/* 弹层里复用 .course 卡，但主按钮加大（.learn.big） */
.evt-modal .course{
  background:var(--parch2);border:1px solid var(--parch-line);border-radius:8px;
  padding:8px 9px;display:flex;flex-direction:column;gap:6px;
}
.evt-modal .cmeta{display:flex;gap:6px;flex-wrap:wrap;font-size:10px;color:#6a5630}
.evt-modal .cmeta .cl{
  font-family:var(--font-pixel);font-size:9px;color:#fff;background:var(--red);
  border-radius:3px;padding:1px 5px;box-shadow:0 1px 0 #6e271d;
}
.evt-modal .cmeta .cv{color:#3a6e57;font-weight:700}
.evt-modal .cmeta .ct{color:#8a4a2a;font-weight:700}
.evt-modal .no-time{display:block;text-align:center;font-size:10px;color:var(--red);font-weight:700;margin-top:2px}
/* 加大的主行动按钮 */
.pbtn.big{font-size:13px;padding:9px 14px;width:100%;justify-content:center}
/* 「暂不上课」次要按钮：低调但仍是真按钮 */
.pbtn.ghost-act{
  color:#6a5630;background:linear-gradient(180deg,#efe6cd,#e2d5b4);
  border-color:#c2b288;box-shadow:0 2px 0 #b09a68, inset 0 1px 0 rgba(255,255,255,.6);
}
/* 卡底行动区 */
.evt-modal .m-actions{padding:6px 13px 0;display:flex;gap:8px}
.evt-modal .m-actions .pbtn{flex:1}
/* 右上关闭 ✕ */
.evt-modal .m-x{
  position:absolute;top:7px;right:8px;z-index:2;
  width:24px;height:24px;line-height:1;
  font-family:var(--font-pixel);font-size:13px;color:#ffeccb;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.25);border-radius:6px;
  cursor:pointer;display:grid;place-items:center;padding:0;
}
.evt-modal .m-x:hover{background:rgba(0,0,0,.42)}
.evt-modal .m-x:active{transform:translateY(1px)}

@keyframes evt-fade{from{opacity:0}to{opacity:1}}
@keyframes evt-pop{
  0%{transform:translateY(8px) scale(.92);opacity:0}
  60%{transform:translateY(0) scale(1.02);opacity:1}
  100%{transform:translateY(0) scale(1)}
}
/* __instant / 无障碍：弹层即时出现，无入场动画（测试可立即拿到按钮） */
.evt-modal-overlay.instant,.evt-modal-overlay.instant .evt-modal{animation:none !important}

/* 弹层未确认前：掷骰按钮被锁（注意力节拍）— 视觉上"盖住" */
.movebtn.gated{cursor:not-allowed;opacity:.5;filter:saturate(.6) grayscale(.2)}

/* =========================================================
   Phase 2a：机会/挑战卡 · 能力升级 · 选课补录
   复用羊皮纸卡家族；右栏(.evt)与弹层(.evt-modal)共用 .ef/.choice/.skill-up/.makeup-row。
   ========================================================= */

/* effects 数值标签行（卡选项 / 升级一行小 chip） */
.ef-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.ef{
  font-size:9.5px;font-weight:700;letter-spacing:.3px;color:#6a5630;
  background:var(--parch2);border:1px solid var(--parch-line);border-radius:4px;padding:1px 5px;
}
.ef-time{color:#8a4a2a}
.ef-cred{color:#3a6e57}
.ef-trans{color:#7a4fae}
.ef-exp{color:#b07a1e}
.ef-vol{color:var(--red)}
.ef-skill{color:#3a6e57}
.ef-lv{font-family:var(--font-pixel);font-size:9px;color:#fff;background:var(--red);border-color:#6e271d;box-shadow:0 1px 0 #6e271d}
.ef-none{color:#9a8a6a;font-style:italic}

/* 卡身故事文字（机会/挑战卡 body） */
.card-body,.evt-modal .m-card-body{
  font-size:11px;color:#5b4a2c;line-height:1.6;margin-bottom:9px;
  background:var(--parch2);border:1px dashed var(--parch-line);border-radius:7px;padding:7px 8px;
}
.evt-modal .m-card-body{font-size:12px}

/* 卡选项列表（每个选项一张小卡：数值 chip + 主按钮 + 不可用原因） */
.choices,.evt-modal .m-choices{display:flex;flex-direction:column;gap:7px}
.evt-modal .m-choices{gap:8px}
.choice{
  background:var(--parch2);border:1px solid var(--parch-line);border-radius:7px;padding:6px 7px;
  display:flex;flex-direction:column;gap:5px;
}
.evt-modal .m-choices .choice{padding:8px 9px;gap:6px}
.choice .pick,.evt-modal .choice .pick{justify-content:center;width:100%}

/* 能力升级区（升级一行 + 主按钮 / 已满级） */
.skill-up{display:flex;flex-direction:column;gap:5px}
.skill-up .upskill{justify-content:center;width:100%}
.skill-maxed{
  font-size:11px;font-weight:700;color:#3a6e57;text-align:center;padding:6px 2px;
}
.evt-modal .skill-maxed{padding:6px 2px 10px}
.evt-modal .m-skill-help{
  font-size:11px;color:#5b4a2c;line-height:1.55;text-align:center;
  margin-bottom:9px;padding:0 2px;
}

/* 选课补录列表（复用 .course 卡；按钮 .makeup） */
.makeup-list{max-height:none}
.evt-modal .m-makeup-tip{
  font-size:11px;color:#5b4a2c;line-height:1.5;text-align:center;margin-bottom:8px;
}
.makeup-row .makeup,.evt-modal .makeup-row .makeup{justify-content:center;width:100%}
.makeup-used{
  display:block;text-align:center;font-size:10px;color:var(--red);font-weight:700;
  margin-bottom:6px;
}

/* MUD 日志：行动旁白行（card.flavor / 升级 / 补录的一句话） */
.log .ln.flavor{color:#d8c7a0;font-style:italic}
.log .k4{color:#caa6ff;font-weight:700;font-style:normal}

/* =========================================================
   可点暗示 (clickable affordance)
   棋盘格 .tile 和能力徽章 .badge 现在是真 <button>：
   重置 button 默认外观（保持像素卡原样），加 cursor + hover 微反馈。
   ========================================================= */
.board .tile{
  font-family:inherit;color:#3a2f1c; /* button 默认字体/色复位 */
  -webkit-appearance:none;appearance:none;
  cursor:pointer;text-align:center;
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.board .tile:hover{
  filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 8px rgba(0,0,0,.42), 0 0 0 1px rgba(214,173,92,.55);
  z-index:3;
}
.board .tile:active{transform:translateY(1px)}
.board .tile:focus-visible{outline:2px solid var(--gold);outline-offset:1px;z-index:5}
/* 当前落点格 hover 不抢 .cur 的金光层级 */
.board .tile.cur:hover{box-shadow:0 0 16px var(--gold)}

.abilities .badge{
  font-family:inherit;-webkit-appearance:none;appearance:none;
  cursor:pointer;color:inherit;
  transition:transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.abilities .badge:hover{
  filter:brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 7px rgba(0,0,0,.3);
}
.abilities .badge:active{transform:translateY(1px)}
.abilities .badge:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* =========================================================
   轻量 info popover —— 点格子/点能力徽章弹出的「这是什么」小气泡
   比落点行动弹层「轻」：小卡、无暗化背景、随手关。羊皮纸 + 金边像素观感。
   贴近被点元素（place-top/bottom，带小箭头）或退化为 .stage 居中（.centered）。
   ========================================================= */
.info-pop{
  position:absolute;z-index:42;
  width:min(78vw,230px);
  background:linear-gradient(180deg,#fffaf0 0%,var(--parch) 100%);
  border:2px solid var(--gold);border-radius:10px;
  padding:9px 11px 10px;
  box-shadow:0 10px 26px rgba(0,0,0,.42), 0 0 0 1px #0a221c, inset 0 1px 0 rgba(255,255,255,.8);
  animation:info-pop-in 130ms ease both;
}
/* 居中退化态：放不下时摆 stage 正中（无箭头） */
.info-pop.centered{
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(84%,300px);
}
.info-pop.centered .ip-arrow{display:none}
.info-pop .ip-head{display:flex;align-items:center;gap:7px;margin-bottom:5px;padding-right:18px}
.info-pop .ip-ic{
  width:24px;height:24px;flex:0 0 auto;border-radius:6px;padding:2px;
  background:#fff;border:2px solid var(--gold);box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.info-pop .ip-ic img{width:100%;height:100%}
.info-pop .ip-title{
  font-family:var(--font-pixel);font-size:11.5px;letter-spacing:.5px;color:#8a4a2a;line-height:1.2;
}
.info-pop .ip-text{font-size:11px;color:#5b4a2c;line-height:1.6}
/* 右上关闭 ✕（小） */
.info-pop .ip-x{
  position:absolute;top:5px;right:6px;
  width:20px;height:20px;line-height:1;padding:0;
  font-family:var(--font-pixel);font-size:11px;color:#8a4a2a;
  background:var(--parch2);border:1px solid var(--parch-line);border-radius:5px;
  cursor:pointer;display:grid;place-items:center;
}
.info-pop .ip-x:hover{background:#e2d5b4}
.info-pop .ip-x:active{transform:translateY(1px)}
.info-pop .ip-x:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* 指向被点元素的小箭头（金边羊皮纸三角，由 --arrow-x 水平定位） */
.info-pop .ip-arrow{
  position:absolute;left:var(--arrow-x,50%);width:12px;height:12px;
  background:var(--parch);border:2px solid var(--gold);
  transform:translateX(-50%) rotate(45deg);
}
.info-pop.place-top .ip-arrow{bottom:-7px;border-top:none;border-left:none}
.info-pop.place-bottom .ip-arrow{top:-7px;border-bottom:none;border-right:none}
@keyframes info-pop-in{from{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.info-pop.centered{animation:info-pop-in-c 130ms ease both}
@keyframes info-pop-in-c{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* __instant / 无障碍：即时出现，无入场动画 */
.info-pop.instant{animation:none !important}

/* =========================================================
   开学第一天 欢迎弹层 (onboarding welcome) —— 仅新游戏
   与落点弹层同家族（暗化+模糊背景、羊皮纸金边卡、红绶带头），暖色开场变体。
   ========================================================= */
.welcome-overlay{
  position:absolute;inset:0;z-index:44;
  display:grid;place-items:center;padding:18px;
  background:rgba(10,23,18,.58);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:evt-fade 160ms ease both;
}
.welcome-card{
  position:relative;width:min(90%,380px);max-height:calc(100% - 24px);overflow:auto;
  background:linear-gradient(180deg,#f7efdb 0%,var(--parch) 100%);
  border:3px solid var(--gold);border-radius:14px;
  box-shadow:0 20px 56px rgba(0,0,0,.6), 0 0 0 2px #0a221c, inset 0 1px 0 rgba(255,255,255,.7);
  padding:0 0 13px;
  animation:evt-pop 240ms cubic-bezier(.2,1.4,.4,1) both;
}
/* 卡头：校园插画带 + 红绶带标题压在上面 */
.welcome-card .wc-head{position:relative;height:78px;overflow:hidden;border-bottom:2px solid var(--gold)}
.welcome-card .wc-scene{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.welcome-card .wc-head::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,32,25,.05) 30%,rgba(12,32,25,.55) 100%);
}
.welcome-card .wc-ribbon{
  position:absolute;left:50%;bottom:9px;transform:translateX(-50%);z-index:2;
  font-family:var(--font-pixel);font-size:14px;letter-spacing:2px;color:#ffeccb;
  background:var(--red);padding:5px 18px;white-space:nowrap;
  box-shadow:0 2px 0 #6e271d, inset 0 1px 0 rgba(255,255,255,.2);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
}
.welcome-card .wc-body{padding:13px 16px 4px}
.welcome-card .wc-intro{font-size:12.5px;color:#5b4a2c;line-height:1.65;margin-bottom:11px}
.welcome-card .wc-bullets{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:11px}
.welcome-card .wc-bullets li{
  display:flex;align-items:center;gap:9px;font-size:11.5px;color:#4a3b22;line-height:1.4;
  background:var(--parch2);border:1px solid var(--parch-line);border-radius:8px;padding:6px 9px;
}
.welcome-card .wb-ic{font-size:16px;flex:0 0 auto;width:20px;text-align:center}
.welcome-card .wc-goal{
  font-size:12px;color:#3a2f1c;font-weight:700;line-height:1.5;
  background:linear-gradient(180deg,#fff7e4,var(--parch2));
  border:2px solid var(--gold);border-radius:9px;padding:8px 10px;margin-bottom:10px;
  box-shadow:0 0 12px rgba(214,173,92,.4), inset 0 1px 0 rgba(255,255,255,.7);
}
.welcome-card .wc-teaser{
  font-family:var(--font-pixel);font-size:11px;color:#8a4a2a;letter-spacing:.5px;
  line-height:1.6;text-align:center;padding:2px 2px 4px;
}
.welcome-card .wc-actions{padding:6px 16px 0;display:flex}
.welcome-card .wc-actions .pbtn{flex:1;font-size:14px;padding:11px 14px}
/* 复用落点弹层的右上 ✕ 样式（深底浅字），位置同 */
.welcome-card .m-x{
  position:absolute;top:7px;right:8px;z-index:3;
  width:24px;height:24px;line-height:1;padding:0;
  font-family:var(--font-pixel);font-size:13px;color:#ffeccb;
  background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.3);border-radius:6px;
  cursor:pointer;display:grid;place-items:center;
}
.welcome-card .m-x:hover{background:rgba(0,0,0,.5)}
.welcome-card .m-x:active{transform:translateY(1px)}
.welcome-card .m-x:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* __instant / 无障碍：即时出现，无入场动画 */
.welcome-overlay.instant,.welcome-overlay.instant .welcome-card{animation:none !important}

/* =========================================================
   游戏感动画 (game-feel animation)
   骰子翻滚→落定 + 棋子逐格跳跃 —— 纯 UI 表现，引擎仍是瞬时纯函数。
   持续时间用 CSS 变量集中管理，方便统一调速。
   ========================================================= */
:root{
  --roll-rattle-ms:700;   /* 骰子翻滚时长 (rattle) */
  --roll-settle-ms:260;   /* 落定回弹时长 (settle slam) */
  --pawn-hop-ms:140;      /* 每格跳跃时长 (per-tile hop) */
}

/* 翻滚中：抖动 + 轻微旋转/缩放，营造"正在滚"的不确定感 */
@keyframes die-rattle{
  0%  {transform:translateY(0)   rotate(-7deg) scale(1)}
  25% {transform:translateY(-4px) rotate(6deg)  scale(1.06)}
  50% {transform:translateY(2px)  rotate(-5deg) scale(.96)}
  75% {transform:translateY(-3px) rotate(8deg)  scale(1.04)}
  100%{transform:translateY(0)   rotate(-7deg) scale(1)}
}
.die.rattling{
  animation:die-rattle 160ms linear infinite;
  box-shadow:0 7px 16px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.7);
}
/* 第二颗骰子错相，两颗不同步更像真在翻 */
.die.rattling:last-child{animation-delay:-80ms;animation-duration:140ms}

/* 落定：一记下砸回弹（slam/bounce） */
@keyframes die-settle{
  0%  {transform:translateY(-10px) scale(1.18)}
  55% {transform:translateY(2px)   scale(.9)}
  78% {transform:translateY(-1px)  scale(1.05)}
  100%{transform:translateY(0)     scale(1)}
}
.die.settle{animation:die-settle calc(var(--roll-settle-ms) * 1ms) cubic-bezier(.2,1.5,.4,1) both}

/* 「本次点数」落定时弹出（reveal/pop），翻滚期间淡隐保持神秘 */
.pts.rolling{opacity:.35}
@keyframes pts-pop{
  0%  {transform:scale(.6);opacity:0}
  60% {transform:scale(1.22);opacity:1}
  100%{transform:scale(1)}
}
.pts.pop{animation:pts-pop 320ms cubic-bezier(.2,1.6,.4,1) both}

/* 滚动序列期间禁用掷骰按钮的视觉态（防连点） */
.movebtn:disabled{
  cursor:wait;opacity:.6;filter:saturate(.7);
  transform:none;box-shadow:0 3px 0 #163027, inset 0 1px 0 rgba(255,255,255,.15);
}
.movebtn:disabled:active{transform:none}

/* 漂浮棋子：绝对定位悬在棋盘之上，逐格 transition 到下一格中心 */
.fly-pawn{
  position:absolute;width:22px;height:26px;z-index:30;pointer-events:none;
  /* left/top 由 JS 写入；用 transition 让每一步平滑滑过去 */
  transition:left calc(var(--pawn-hop-ms) * 1ms) ease-in-out,
             top  calc(var(--pawn-hop-ms) * 1ms) ease-in-out;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.55));
  transform:translate(-50%,-50%);
}
/* 每落一格的小跳（hop）：叠加在水平/垂直滑动之上 */
@keyframes pawn-hop{
  0%  {transform:translate(-50%,-50%)            scale(1)}
  45% {transform:translate(-50%,calc(-50% - 9px)) scale(1.08)}
  100%{transform:translate(-50%,-50%)            scale(1)}
}
.fly-pawn.hop{animation:pawn-hop calc(var(--pawn-hop-ms) * 1ms) ease-in-out}
/* 漂浮期间，桌面上原本那颗静态 .pawn 先藏起来，避免出现两个棋子 */
.board.flying .pawn{visibility:hidden}

/* =========================================================
   无障碍：尊重 prefers-reduced-motion → 关闭所有动画，结果瞬时呈现
   （与 window.__instant 测试钩子同样走"瞬时"路径）
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .die.rattling,.die.settle,.pts.pop,.fly-pawn,.fly-pawn.hop{animation:none !important}
  .fly-pawn{transition:none !important}
  .pts.rolling{opacity:1}
  /* 落点弹层 / 欢迎弹层 / info 气泡仍出现（核心引导），但不做入场动画 */
  .evt-modal-overlay,.evt-modal,
  .welcome-overlay,.welcome-card,
  .info-pop{animation:none !important}
  /* 可点暗示也去掉位移过渡 */
  .board .tile,.abilities .badge{transition:none !important}
}