/* 灵响 ECHO — 完整样式 */
:root {
  --bg: #0b0f1a; --bg2: #121829; --cell: #161d31; --cell-hi: #1d2640;
  --line: #2a3352; --text: #e6e9f2; --muted: #8b93ad;
  --accent: #7cc4ff; --stone: #ffd27a; --stone-glow: rgba(255,210,122,.55);
  --ring: rgba(124,196,255,.22); --ring-edge: #7cc4ff;
  --ok: #7be0a8; --bad: #ff7a8a;
  --cell-size: 56px; --gap: 4px;
  font-family: -apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box;} html,body{margin:0;background:var(--bg);color:var(--text);min-height:100dvh;overflow-x:hidden;}
[hidden]{display:none !important;}

/* Canvas 背景 */
#scene{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;}
.veil{position:fixed;inset:0;z-index:200;background:#0b0f1a;opacity:0;pointer-events:none;transition:opacity .42s;}
.veil.on{opacity:1;pointer-events:auto;}

/* 通用 */
button{font:inherit;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 14px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s,opacity .2s;}
button:hover{background:var(--cell-hi);border-color:#3a4670;}
button:active{transform:translateY(1px);}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
button.primary{background:#1f3b63;border-color:#2f5a93;}
button.primary:hover{background:#26497a;}
button.ghost{background:none;border:none;padding:6px 10px;color:var(--muted);}
button.ghost:hover{color:#fff;}
button.big{padding:14px 36px;font-size:17px;border-radius:14px;min-width:200px;letter-spacing:2px;}
button.on,[aria-selected="true"]{background:#24304f;border-color:var(--accent);color:#fff;}
button:disabled,button.locked{opacity:.38;cursor:default;pointer-events:none;}
button.danger{border-color:#7a3040;color:#ff7a8a;}
kbd{font:12px ui-monospace,monospace;background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--muted);}
input[type="range"]{accent-color:var(--accent);width:120px;}
select{font:inherit;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:4px 8px;}
.muted{color:var(--muted);}

/* 屏幕 */
.screen{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;animation:fadeIn .6s ease both;}
@keyframes fadeIn{from{opacity:0}}
.bar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:8px;z-index:10;}
.bar-title{font-size:15px;color:var(--muted);text-align:center;flex:1;}
.bar-title b{color:var(--text);margin-left:4px;}

/* ========== 标题 ========== */
.title-screen{align-items:center;justify-content:center;text-align:center;padding:40px 20px;}
.title-wrap{position:relative;}
.logo{margin:0;font-size:72px;letter-spacing:20px;font-weight:700;
  background:linear-gradient(135deg,#fff 20%,var(--stone));-webkit-background-clip:text;background-clip:text;color:transparent;}
.logo-en{color:var(--muted);letter-spacing:12px;font-size:14px;margin:-4px 0 14px;}
.tagline{color:#8b93ad;font-size:15px;margin:0 0 32px;letter-spacing:2px;line-height:1.8;}
.title-menu{display:flex;flex-direction:column;gap:10px;align-items:center;}
.title-foot{position:fixed;bottom:20px;left:0;right:0;text-align:center;color:#4a5678;font-size:13px;}

/* ========== 地图 ========== */
.map-screen{padding-bottom:40px;}
.chapters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 20px;}
.ch-tab{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;min-width:120px;}
.ch-tab .ch-emb{width:28px;height:28px;}
.ch-tab .ch-emb svg{width:100%;height:100%;}
.ch-tab .ch-n{font-size:13px;color:var(--muted);}
.ch-tab .ch-name{font-weight:600;}
.ch-tab.done{border-color:#4a7050;}
/* 刚解锁、还没玩过的章节：右上角“新”角标 + 呼吸光 */
.ch-tab{position:relative;}
.ch-tab.fresh{border-color:var(--accent);animation:pulse 2s ease-in-out infinite;}
.ch-tab.fresh::after{content:"新";position:absolute;top:-7px;right:-6px;font-size:11px;line-height:1;padding:3px 5px;border-radius:8px;background:var(--stone);color:#2a1f10;font-weight:700;}
/* 本章完成后的“前往下一章”按钮 */
.next-chapter{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:16px;padding:14px 16px;border-radius:14px;font-size:16px;font-weight:600;letter-spacing:1px;animation:pulse 2s ease-in-out infinite;}
.next-chapter .nc-emb{width:26px;height:26px;flex-shrink:0;}
.next-chapter .nc-emb svg{width:100%;height:100%;}
.chapter-detail{max-width:660px;margin:20px auto;padding:0 20px;}
.cd-head{text-align:center;margin-bottom:16px;}
.cd-head h2{margin:6px 0;font-size:28px;letter-spacing:6px;}
.cd-head p{color:var(--muted);margin:4px 0 12px;}
.cd-kicker{color:var(--muted);font-size:13px;letter-spacing:4px;}
.cd-prog{height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;}
.cd-prog i{display:block;height:100%;background:var(--ok);border-radius:2px;transition:width .4s;}
.cd-count{text-align:right;font-size:13px;color:var(--muted);margin-top:4px;}
.path{display:flex;flex-direction:column;gap:6px;margin-top:16px;}
.node{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;text-align:left;}
.node .nd-dot{width:32px;height:32px;border-radius:50%;background:var(--bg2);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;transition:background .3s,border-color .3s;}
.node.done .nd-dot{background:#1a3028;border-color:var(--ok);color:var(--ok);}
.node.next .nd-dot{border-color:var(--accent);animation:pulse 2s ease-in-out infinite;}
.node.final .nd-dot{background:#2a2010;border-color:var(--stone);color:var(--stone);}
.node .nd-name{font-weight:600;flex:1;}
.node .nd-meta{color:var(--muted);font-size:13px;}
@keyframes pulse{50%{box-shadow:0 0 12px var(--accent);}}

/* ========== 关卡 ========== */
.level-screen .stage{display:flex;justify-content:center;align-items:flex-start;gap:24px;flex-wrap:wrap;padding:0 14px;}
.panel{width:210px;display:flex;flex-direction:column;gap:10px;}
.note{background:linear-gradient(180deg,#17213a,#131a2d);border:1px solid #2c3c66;border-radius:12px;padding:10px 12px;line-height:1.7;font-size:13px;}
.note b{color:var(--stone);}
.spirits{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.sp-label{font-size:12px;color:var(--muted);margin-bottom:6px;}
.sp-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;}
.sp-bar i{display:block;height:100%;background:var(--ok);border-radius:3px;transition:width .5s;}
.sp-num{text-align:right;font-size:13px;color:var(--muted);margin-top:4px;}
.sp-num b{color:var(--ok);}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.stats>div{display:flex;justify-content:space-between;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;}
.stats span{color:var(--muted);}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.hintbox{min-height:80px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.7;color:var(--muted);}
.hintbox .tech{color:var(--accent);font-weight:600;margin-right:6px;}
.hintbox .tier{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 6px;}
.legend{font-size:12px;color:var(--muted);text-shadow:0 1px 3px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:5px;}
.free-bar{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:8px 20px 4px;}
.free-bar button{padding:6px 12px;font-size:13px;}

/* 盘面 */
.board-wrap{position:relative;}
.board{display:grid;gap:var(--gap);padding:12px;background:rgba(18,24,41,.72);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);user-select:none;touch-action:none;}
.board.mini{--cell-size:34px;--gap:3px;padding:8px;pointer-events:none;}
.cell{width:var(--cell-size);height:var(--cell-size);border-radius:10px;background:var(--cell);position:relative;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;border:none;padding:0;font-size:0;}
.cell:hover{background:var(--cell-hi);}
.cell .num{font-size:calc(var(--cell-size)*.44);font-weight:600;color:#cfd6ee;position:relative;z-index:1;}
.cell.clue{cursor:default;background:transparent;}
.cell.clue::before{content:"";position:absolute;inset:13%;border-radius:50%;border:1.5px solid #3a4670;transition:border-color .2s,box-shadow .2s;}
.cell.clue.ok .num{color:var(--ok);}
.cell.clue.ok::before{border-color:rgba(123,224,168,.6);}
.cell.clue.over .num{color:var(--bad);}
.cell.clue.over::before{border-color:rgba(255,122,138,.7);}
.cell.clue.focus::before{border-color:var(--accent);box-shadow:0 0 18px rgba(124,196,255,.45);}
.cell.wall{background:#1a1e2e;cursor:default;}
.cell.wall::after{content:"";width:38%;height:56%;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#3a4060,#262c44);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);}
.cell .stone{width:46%;height:46%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6dc,var(--stone) 45%,#c98a2a);
  box-shadow:0 0 18px var(--stone-glow);transform:scale(0);transition:transform .18s cubic-bezier(.3,1.6,.5,1);}
.cell.st .stone{transform:scale(1);}
.cell.dot::after{content:"";width:14%;height:14%;border-radius:50%;background:#4a557a;}
.cell.err{box-shadow:inset 0 0 0 2px var(--bad);}
.cell.unheard .stone{background:radial-gradient(circle at 35% 30%,#fff,#b7bfd8 45%,#6f7899);box-shadow:none;opacity:.8;}
.cell.st.clash .stone{background:radial-gradient(circle at 35% 30%,#ffe3e6,var(--bad) 45%,#b23a4c);box-shadow:0 0 18px rgba(255,122,138,.6);opacity:1;}
.cell.inner{background:linear-gradient(rgba(124,196,255,.07),rgba(124,196,255,.07)),var(--cell);}
.cell.ring{background:linear-gradient(var(--ring),var(--ring)),var(--cell);box-shadow:inset 0 0 0 1.5px rgba(124,196,255,.55);}
.cell.ring.pulse{animation:ringpulse .5s ease-out both;}
@keyframes ringpulse{from{box-shadow:inset 0 0 0 3px var(--ring-edge);}}
.cell.hint{animation:hintAnim 1.2s ease-in-out infinite;}
@keyframes hintAnim{50%{box-shadow:inset 0 0 0 3px var(--accent),0 0 16px rgba(124,196,255,.6)}}
.cell.hint-src{box-shadow:inset 0 0 0 2px var(--stone);}
.wave{position:absolute;border-radius:50%;border:2px solid var(--stone);pointer-events:none;animation:wave 1.8s ease-out forwards;}
@keyframes wave{from{opacity:.9;transform:translate(-50%,-50%) scale(.1)} to{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.board.solved .cell.st .stone{animation:chime 1.6s ease-in-out infinite;animation-delay:var(--delay,0s);}
@keyframes chime{50%{box-shadow:0 0 34px 6px var(--stone-glow)}}

/* 章节主题：石柱样式 */
[data-chapter="salt"] .cell.wall::after{background:linear-gradient(180deg,#d0c5e0,#a899bf);border-radius:3px 3px 1px 1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
[data-chapter="temple"] .cell.wall::after{background:linear-gradient(180deg,#8a7560,#5a4a3a);border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.15);}
[data-chapter="sky"] .cell.wall{background:#141b33;}
[data-chapter="sky"] .cell.wall::after{background:#8fa3d9;border-radius:0;width:34%;height:34%;box-shadow:none;opacity:.55;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);}

/* ========== 对话 ========== */
.dialog{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;gap:0;padding:0 20px 28px;animation:fadeIn .3s;}
.dlg-portrait{width:110px;flex-shrink:0;margin:0 -6px -2px 0;position:relative;z-index:1;}
.dlg-portrait.none{width:0;}
.dlg-portrait svg{width:100%;height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));}
.dlg-box{flex:1;max-width:620px;background:rgba(18,24,41,.92);backdrop-filter:blur(6px);border:1px solid #2a3560;border-radius:16px;padding:16px 20px 18px;position:relative;min-height:72px;cursor:pointer;line-height:1.8;font-size:15px;}
.dlg-name{font-weight:600;color:var(--accent);margin-bottom:4px;min-height:20px;font-size:14px;}
.dialog.narration .dlg-name{display:none;}
.dialog.narration .dlg-box{text-align:center;font-style:italic;color:#c9cfe2;}
.dialog[data-who="ji"] .dlg-name{color:#9aa6c8;}
.dialog[data-who="ww"] .dlg-name{color:#c9b496;}
.dlg-more{position:absolute;bottom:8px;right:14px;color:#4a557a;font-size:11px;animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{50%{transform:translateY(3px)}}
.dlg-skip{position:absolute;top:10px;right:14px;font-size:13px;z-index:101;}

/* ========== 章节标题卡 ========== */
.card{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(11,15,26,.7);backdrop-filter:blur(3px);animation:fadeIn .8s ease both;text-align:center;gap:8px;}
/* 淡出过程中仍然挡住点按：否则手指正好点在下面地图的关卡上，会在开场对话之前直接进关（#25） */
.card.out{animation:fadeOut .9s ease both;pointer-events:auto;}
@keyframes fadeOut{to{opacity:0}}
.card-emblem{width:80px;height:80px;}
.card-emblem svg{width:100%;height:100%;}
.card-kicker{color:var(--muted);font-size:13px;letter-spacing:6px;margin-top:4px;}
.card-title{font-size:40px;letter-spacing:12px;font-weight:700;
  background:linear-gradient(135deg,#fff,var(--stone));-webkit-background-clip:text;background-clip:text;color:transparent;}
.card-sub{color:var(--muted);font-size:14px;letter-spacing:8px;}

/* ========== 通关弹窗 ========== */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(11,15,26,.55);backdrop-filter:blur(2px);animation:fadeIn .5s ease both;}
.modal-card{background:#131a2d;border:1px solid #2f3d66;border-radius:18px;padding:24px 28px;box-shadow:0 20px 60px rgba(0,0,0,.5);text-align:center;max-width:340px;width:90%;}
.result-card .res-title{font-size:28px;letter-spacing:8px;color:var(--stone);margin:8px 0 4px;}
.result-card .res-sub{color:var(--muted);margin-bottom:16px;font-size:14px;}
.result-card .res-actions{display:flex;gap:10px;justify-content:center;}
.res-bells{display:flex;gap:6px;justify-content:center;}
.res-bells .rb{width:28px;height:28px;opacity:.2;filter:grayscale(1);}
.res-bells .rb.on{opacity:1;filter:none;animation:pop .4s ease both;}
.res-bells .rb:nth-child(2).on{animation-delay:.15s;}
.res-bells .rb:nth-child(3).on{animation-delay:.3s;}
.res-bells svg{width:100%;height:100%;}
@keyframes pop{from{transform:scale(0)} to{transform:scale(1)}}

/* 设置 */
.settings-card{text-align:left;max-width:360px;}
.settings-card h2{margin:0 0 14px;font-size:18px;letter-spacing:4px;text-align:center;}
.row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.row span{color:var(--muted);}
.settings-actions{display:flex;justify-content:center;margin-top:14px;}

/* ========== 手册 ========== */
.guide-screen{align-items:center;}
.guide{max-width:700px;padding:0 20px 40px;line-height:1.9;}
.guide h2{font-weight:600;margin-top:28px;}
.guide ol{padding-left:22px;}
b.st{color:var(--stone);}
.diagram{display:flex;gap:20px;flex-wrap:wrap;margin:16px 0;}
.diagram figure{margin:0;}
.diagram figcaption{color:var(--muted);font-size:13px;margin-top:8px;max-width:260px;}
.tech-list{display:grid;gap:8px;}
.tech-item{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:8px 12px;}
.tech-item .n{color:var(--accent);font-weight:600;margin-right:8px;}

/* ========== 制作 ========== */
.credits-screen{align-items:center;justify-content:flex-end;overflow:hidden;}
.credits-roll{text-align:center;padding:40px 48px 60px;margin-bottom:60px;background:rgba(20,16,28,.55);backdrop-filter:blur(4px);border-radius:24px;text-shadow:0 1px 4px rgba(0,0,0,.6);animation:none;will-change:transform;}
.credits-roll.rolling{animation:roll 30s linear forwards;}
@keyframes roll{from{transform:translateY(100vh)} to{transform:translateY(-100%)}}
.cr-logo{font-size:56px;letter-spacing:16px;font-weight:700;background:linear-gradient(135deg,#fff,var(--stone));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:2px;}
.cr-en{color:var(--muted);letter-spacing:12px;font-size:14px;margin-bottom:40px;}
.cr-sec{margin-bottom:32px;}
.cr-h{color:#ffd9a0;font-size:13px;letter-spacing:4px;margin-bottom:8px;}
.cr-end{font-size:18px;color:#c9cfe2;font-style:italic;margin-top:40px;letter-spacing:3px;}
.credits-skip{position:fixed;bottom:20px;right:20px;z-index:10;}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;transition:.25s;
  background:#1c2540;border:1px solid var(--line);border-radius:10px;padding:10px 16px;pointer-events:none;z-index:300;}
.toast.show{opacity:1;transform:translateX(-50%);}

/* 响应式 */
@media(max-width:900px){
  .panel{width:min(100%,520px);}
  .panel.left{order:0} .board-wrap{order:1} .panel.right{order:2}
  .tools{grid-template-columns:repeat(4,1fr);}
  .logo{font-size:48px;letter-spacing:12px;}
  .tagline{font-size:14px;}
  .dialog{padding:0 10px 16px;}
  .dlg-portrait{width:60px;}
  .card-title{font-size:28px;letter-spacing:8px;}
  .board{padding:6px;border-radius:14px;}
  .cell{border-radius:7px;}

  /* ---------- 关卡页：一屏布局 ----------
   * 自上而下：顶栏 / 状态条 / 规则提示 / 盘面 / 画笔栏 / 工具行 / 提示框。
   * 整页高度锁定为视口高度（dvh 会扣掉浏览器地址栏），提示框吃掉剩余空间，内容多时在框内滚动。
   * board.js layout() 按这里的固定高度预留空间来算格子大小，两边的数字要一起改。 */
  .level-screen{height:100dvh;min-height:0;overflow:hidden;}
  .level-screen .bar{padding:6px 10px;min-height:40px;}
  .level-screen .bar-title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .level-screen .stage{flex:1;min-height:0;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px;padding:0 8px 8px;}
  .level-screen .panel{width:auto;gap:6px;}
  /* 左栏：灵的进度条、用时、音石压成一行；规则提示单独一行 */
  .level-screen .panel.left{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;}
  .level-screen .panel.left .note{grid-column:1 / -1;padding:6px 10px;font-size:12.5px;line-height:1.55;}
  .level-screen .spirits{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:9px;}
  .level-screen .sp-label{display:none;}
  .level-screen .sp-bar{flex:1;}
  .level-screen .sp-num{margin:0;font-size:12px;white-space:nowrap;}
  .level-screen .stats{display:flex;gap:6px;}
  .level-screen .stats>div{padding:5px 9px;gap:6px;font-size:13px;border-radius:9px;white-space:nowrap;}
  .level-screen .board-wrap{display:flex;flex-direction:column;align-items:center;flex-shrink:0;}
  .level-screen .pen-bar{margin-top:6px;}
  /* 右栏：工具一行，提示框占满剩下的高度；重做 / 重来 / 说明收进“更多” */
  .level-screen .panel.right{flex:1;min-height:0;display:flex;flex-direction:column;}
  .level-screen .tools{grid-template-columns:repeat(4,1fr);gap:6px;}
  .level-screen .tools button{padding:8px 4px;white-space:nowrap;}
  .level-screen .tools .t-more{display:none;}
  .level-screen .tools .t-more-toggle{display:block;}
  .level-screen .tools #b-skip:not([hidden]) ~ .t-more-toggle{display:none;}
  .level-screen .hintbox{flex:1;min-height:44px;overflow-y:auto;padding:8px 10px;font-size:12.5px;line-height:1.6;}
  .level-screen .panel.right > .legend{display:none;}
  .level-screen .free-bar{order:-1;padding:4px 8px 2px;gap:4px;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;}
  .level-screen .free-bar button{flex-shrink:0;padding:4px 10px;font-size:12px;}

  /* ---------- 对话：关卡页上压成底部窄条，不挡盘面和按钮 ----------
   * 只盖住提示框所在的底部区域；立绘缩成小头像嵌在框内左侧。 */
  body[data-screen="level"] .dialog{padding:0 8px calc(8px + env(safe-area-inset-bottom));}
  /* 小头像放在对话框左上角、与名字同一行（对话框高度可变，所以按 top 对齐而不是 bottom） */
  body[data-screen="level"] .dialog{align-items:flex-start;}
  body[data-screen="level"] .dlg-portrait{width:44px;position:absolute;left:16px;top:7px;margin:0;z-index:2;}
  body[data-screen="level"] .dlg-portrait.none{width:0;}
  /* 不透明，并用 --dlg-min（game.js 按提示框位置写入）盖满提示框区域，两层文字不混在一起 */
  body[data-screen="level"] .dlg-box{max-width:none;min-height:var(--dlg-min,0px);padding:9px 52px 10px 62px;font-size:14px;line-height:1.6;border-radius:12px;background:#121829;backdrop-filter:none;box-shadow:0 -6px 18px rgba(11,15,26,.85);}
  body[data-screen="level"] .dialog.narration .dlg-box{padding-left:14px;padding-right:52px;}
  body[data-screen="level"] .dlg-name{font-size:12px;margin-bottom:1px;min-height:0;}
  body[data-screen="level"] .dlg-skip{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));right:14px;padding:4px 8px;font-size:12px;}
}

/* 宽屏不显示“更多”按钮和面板 */
.t-more-toggle{display:none;}
.more-sheet{position:fixed;inset:0;z-index:110;display:flex;align-items:flex-end;justify-content:center;background:rgba(11,15,26,.5);animation:fadeIn .2s;}
.more-card{width:100%;max-width:520px;background:#131a2d;border:1px solid #2f3d66;border-bottom:none;border-radius:18px 18px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;}
.more-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.more-actions button,.more-card > button{min-height:44px;}
.more-legend{gap:8px;font-size:13px;}

/* ========== 触屏 ========== */
/* 只在“粗指针、无悬停”的设备（手机、平板）显示触屏控件；鼠标设备显示原有说明 */
.touch-only{display:none !important;}
@media (hover:none) and (pointer:coarse){
  .touch-only{display:block !important;}
  .pen-bar.touch-only{display:flex !important;}
  .mouse-only{display:none !important;}
  /* 按钮至少 44px 高，满足触控目标尺寸 */
  .tools button{min-height:44px;}
  /* 灵没有悬停态：去掉 hover 背景，免得点过的格子一直高亮 */
  .cell:hover{background:var(--cell);}
  .cell.clue:hover{background:transparent;}
}
.pen-bar{gap:6px;justify-content:center;margin-top:10px;}
.pen{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:12px;font-size:15px;}
.pen.on{background:#24304f;border-color:var(--accent);color:#fff;}
.pen-ic{width:14px;height:14px;border-radius:50%;flex-shrink:0;}
.stone-ic{background:radial-gradient(circle at 35% 30%,#fff6dc,var(--stone) 45%,#c98a2a);box-shadow:0 0 8px var(--stone-glow);}
.dot-ic{width:6px;height:6px;margin:4px;background:#8b93ad;}
#pen-undo{font-size:20px;padding:8px 14px;}
/* 盘面内不触发滚动、缩放、长按菜单和文字选择 */
.board{-webkit-touch-callout:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:contain;}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
.reduce-motion *{animation:none!important;transition:none!important;}