/* ============================================================
   像素寺 · 视觉系统 v2
   墨底 · 暖金 · 宣纸 · 朱印
   ============================================================ */

:root{
  --ink:#0a0806;
  --ink2:#12100b;
  --ink3:#1b1811;
  --paper:#efe4cc;
  --paper2:#e0d0ae;
  --gold:#e5bb6d;
  --gold2:#f7e2b4;
  --gold-dim:rgba(229,187,109,.35);
  --line:rgba(229,187,109,.16);
  --line2:rgba(229,187,109,.30);
  --red:#a8382a;
  --red2:#c9503a;
  --jade:#9ebd95;
  --txt:#e9dfc9;
  --dim:#9a8d76;
  --dim2:#6f6555;
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",STSong,SimSun,serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --r:2px;
  --sh:0 18px 46px rgba(0,0,0,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{
  background:var(--ink);
  color:var(--txt);
  font-family:var(--serif);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;}
canvas{display:block;}
::selection{background:rgba(229,187,109,.28);}

/* 滚动条 */
.scene *::-webkit-scrollbar{width:8px;height:8px;}
.scene *::-webkit-scrollbar-thumb{background:rgba(229,187,109,.22);border-radius:8px;}
.scene *::-webkit-scrollbar-track{background:transparent;}

/* ============================================================
   主场景
   ============================================================ */
#app{position:fixed;inset:0;}
#game{
  position:absolute;inset:0;width:100%;height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:#0d120e;
}

/* ---- HUD ---- */
#hud{
  position:fixed;left:0;right:0;top:0;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:14px 18px;
  padding-top:max(14px,env(safe-area-inset-top));
  pointer-events:none;
  z-index:20;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
#hud>*{pointer-events:auto;}
.hud-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hud-right{display:flex;align-items:center;gap:8px;}

.brand{display:flex;align-items:center;gap:10px;}
.brand-seal{
  width:38px;height:38px;flex:0 0 38px;
  display:grid;place-items:center;
  font-size:20px;color:#fff2e2;
  background:linear-gradient(160deg,var(--red2),var(--red));
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,200,160,.18) inset,0 6px 18px rgba(168,56,42,.35);
  letter-spacing:0;
}
.brand-txt{display:flex;flex-direction:column;line-height:1.15;}
.brand-txt b{font-size:16px;letter-spacing:5px;color:var(--gold2);font-weight:600;}
.brand-txt span{font-family:var(--mono);font-size:9px;letter-spacing:2.4px;color:var(--dim2);}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 12px;
  font-size:12px;letter-spacing:1px;color:#cdbfa4;
  background:linear-gradient(180deg,rgba(30,26,18,.86),rgba(18,16,11,.9));
  border:1px solid var(--line);
  border-radius:2px;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.chip.ghost{color:var(--dim);}
.chip .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--jade);
  box-shadow:0 0 8px rgba(158,189,149,.9);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---- 场景坞 ---- */
#dock{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(26px + env(safe-area-inset-bottom));
  display:flex;gap:8px;z-index:20;
  padding:8px;
  max-width:calc(100vw - 24px);
  overflow-x:auto;
  scrollbar-width:none;
  background:linear-gradient(180deg,rgba(24,20,14,.72),rgba(12,10,8,.86));
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:var(--sh);
  backdrop-filter:blur(10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
#dock::-webkit-scrollbar{display:none;}
.dock-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 13px 7px 8px;
  border:1px solid transparent;
  border-radius:2px;
  color:#cdbfa4;
  white-space:nowrap;
  transition:background .18s,border-color .18s,transform .18s,color .18s;
}
.dock-item .ds{
  width:26px;height:26px;flex:0 0 26px;
  display:grid;place-items:center;
  font-size:14px;color:var(--gold);
  border:1px solid var(--line2);
  border-radius:2px;
  background:rgba(229,187,109,.06);
}
.dock-item .dt{display:flex;flex-direction:column;line-height:1.2;text-align:left;}
.dock-item .dt b{font-size:13px;letter-spacing:2px;font-weight:500;}
.dock-item .dt span{font-family:var(--mono);font-size:9px;color:var(--dim2);letter-spacing:.6px;}
.dock-item:hover{
  background:rgba(229,187,109,.08);
  border-color:var(--line2);
  color:var(--gold2);
  transform:translateY(-2px);
}
.dock-item:active{transform:translateY(0);}

/* ---- 底部提示 ---- */
#tipbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(100px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;
  color:var(--dim2);
  z-index:19;
  white-space:nowrap;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
#tipbar .k{
  color:#c3b393;
  border:1px solid var(--line);
  border-radius:2px;
  padding:1px 5px;
  background:rgba(255,255,255,.03);
}
#tipbar .sep{opacity:.4;}

/* ---- 触屏方向盘 ---- */
#touch{
  position:fixed;
  left:14px;right:14px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:none;
  grid-template-columns:repeat(3,54px);
  grid-template-rows:repeat(3,54px);
  gap:6px;
  justify-content:space-between;
  z-index:21;
  pointer-events:none;
}
#touch .tbtn{
  pointer-events:auto;
  display:grid;place-items:center;
  font-size:15px;color:var(--gold2);
  background:rgba(20,17,12,.72);
  border:1px solid var(--line2);
  border-radius:3px;
  backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(0,0,0,.4);
  touch-action:none;
}
#touch .tbtn:active{background:rgba(229,187,109,.2);}
#touch .up{grid-area:1/2;}
#touch .left{grid-area:2/1;}
#touch .talk{grid-area:2/2;font-size:11px;letter-spacing:2px;color:#ffe9c0;}
#touch .right{grid-area:2/3;}
#touch .down{grid-area:3/2;}

/* ============================================================
   场景通用
   ============================================================ */
#scenes{position:fixed;inset:0;z-index:30;pointer-events:none;}
.scene{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  background:var(--ink);
  opacity:0;visibility:hidden;
  transform:scale(.985);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s;
  pointer-events:none;
  overflow:hidden;
}
.scene.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.scene-bg,.scene-layer{position:absolute;inset:0;width:100%;height:100%;}
.scene-bg{z-index:0;image-rendering:pixelated;}
.scene-layer{z-index:1;image-rendering:pixelated;pointer-events:none;}

body.in-scene #hud,
body.in-scene #dock,
body.in-scene #tipbar,
body.in-scene #touch{opacity:0;pointer-events:none;}

.scene-head{
  position:relative;z-index:5;
  display:flex;align-items:center;gap:14px;
  padding:12px 18px;
  padding-top:max(12px,env(safe-area-inset-top));
  min-height:60px;
  background:linear-gradient(180deg,rgba(8,7,5,.94),rgba(8,7,5,.55) 70%,rgba(8,7,5,0));
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.scene-back{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 12px;
  font-size:12px;letter-spacing:1.5px;color:#c9ba9c;
  border:1px solid var(--line2);
  border-radius:2px;
  background:rgba(255,255,255,.02);
  transition:.18s;
  flex:0 0 auto;
}
.scene-back:hover{color:var(--gold2);border-color:var(--gold-dim);background:rgba(229,187,109,.08);}
.scene-title{display:flex;align-items:center;gap:10px;min-width:0;}
.scene-title .seal{
  width:26px;height:26px;flex:0 0 26px;
  display:grid;place-items:center;
  font-size:14px;color:#fff0e0;
  background:linear-gradient(150deg,var(--red2),var(--red));
  border-radius:2px;
}
.scene-title b{font-size:19px;letter-spacing:6px;color:var(--gold2);font-weight:500;}
.scene-title em{
  font-style:normal;font-size:11.5px;letter-spacing:1px;color:var(--dim);
  padding-left:10px;border-left:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scene-meta{
  margin-left:auto;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.5px;color:var(--dim);
  white-space:nowrap;
}
.scene-meta b{color:var(--gold);font-weight:400;}
.scene-foot{
  flex:0 0 auto;position:relative;z-index:5;
  text-align:center;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  font-family:var(--mono);font-size:10px;letter-spacing:1.2px;color:var(--dim2);
  border-top:1px solid rgba(229,187,109,.08);
}

/* 通用按钮 */
.big-btn{
  height:44px;padding:0 30px;
  font-size:15px;letter-spacing:5px;color:#fff4e0;
  background:linear-gradient(180deg,#c0503a,#8f3020);
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,190,150,.24) inset,0 10px 26px rgba(168,56,42,.4);
  transition:.18s;
}
.big-btn:hover{filter:brightness(1.12);transform:translateY(-1px);}
.big-btn:active{transform:translateY(1px);filter:brightness(.95);}
.big-btn.ready{animation:breathe 2.6s ease-in-out infinite;}
@keyframes breathe{0%,100%{box-shadow:0 0 0 1px rgba(255,190,150,.24) inset,0 10px 26px rgba(168,56,42,.32);}50%{box-shadow:0 0 0 1px rgba(255,214,170,.5) inset,0 12px 34px rgba(200,90,60,.55);}}
.link-btn{
  font-size:12px;letter-spacing:1.5px;color:var(--dim);
  padding:6px 10px;border-bottom:1px dashed rgba(229,187,109,.25);
  transition:.18s;
}
.link-btn:hover{color:var(--gold);}

/* toast */
.toast{
  position:absolute;left:50%;bottom:14%;
  transform:translate(-50%,8px);
  padding:9px 18px;
  font-size:12.5px;letter-spacing:1.4px;color:var(--gold2);
  background:rgba(12,10,7,.92);
  border:1px solid var(--line2);
  border-radius:2px;
  opacity:0;pointer-events:none;
  transition:opacity .26s,transform .26s;
  z-index:8;white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ============================================================
   禅堂
   ============================================================ */
.med-wrap{
  position:relative;z-index:2;flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:1fr 260px;
  gap:26px;align-items:end;align-content:end;      /* 整片蒲团靠下，上方留给佛像 */
  padding:18px 30px 40px;      /* 底部留白：让最后一行蒲团落在 scene-foot 之上 */
  max-width:1180px;width:100%;margin:0 auto;
}
/* 蒲团区：真网格排布，24 席必然成行成列，不再用百分比散点定位 */
.med-grid{
  position:relative;
  align-self:end;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(4,minmax(64px,1fr));
  gap:clamp(6px,1.1vw,16px) clamp(4px,.8vw,12px);
  width:100%;
  max-height:min(62vh,500px);
  margin:0 auto;
  padding:clamp(8px,1.4vw,18px) clamp(6px,1vw,14px);
  border:1px solid rgba(229,187,109,.10);
  border-radius:3px;
  background:
    radial-gradient(ellipse at 50% 30%,rgba(229,187,109,.05),transparent 62%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 42px);
}
.seat{
  position:relative;transform:none;
  width:100%;height:100%;
  display:grid;place-items:center;
  border-radius:50%;
  transition:transform .16s var(--ease),background .16s,box-shadow .16s;
}
.seat .cushion{
  width:clamp(34px,3.9vw,54px);height:clamp(34px,3.9vw,54px);border-radius:50%;
  background:radial-gradient(circle at 42% 34%,#8c4227,#5f2a17 62%,#3a1a0e);
  border:1px solid rgba(255,200,150,.22);
  box-shadow:0 6px 14px rgba(0,0,0,.5),0 0 0 6px rgba(229,187,109,.03);
  transition:.16s;
}
.seat .seat-tip{
  position:absolute;bottom:-6px;
  font-size:9.5px;letter-spacing:1px;color:var(--gold);
  opacity:0;transition:.16s;white-space:nowrap;
}
.seat:hover{transform:scale(1.06);}
.seat:hover .cushion{
  background:radial-gradient(circle at 42% 34%,#b05a33,#7a3a20 62%,#4a2112);
  box-shadow:0 8px 20px rgba(0,0,0,.55),0 0 0 3px rgba(229,187,109,.16),0 0 26px rgba(229,187,109,.2);
}
.seat:hover .seat-tip{opacity:1;bottom:-11px;}
.seat.taken{cursor:default;}
.seat.taken:hover{transform:none;}
.seat.taken .seat-monk{width:48px;height:46px;opacity:.92;image-rendering:pixelated;}
.seat.mine{cursor:default;}
.seat.mine:hover{transform:none;}
.seat.mine .cushion{
  background:radial-gradient(circle at 42% 34%,#cf8a3f,#8a4a22 62%,#4a2112);
  box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 0 3px rgba(229,187,109,.32),0 0 30px rgba(229,187,109,.28);
  animation:mineBreath 2.8s ease-in-out infinite;
}
.seat.mine .seat-tip{opacity:1;bottom:-11px;}
@keyframes mineBreath{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}

.med-note{
  align-self:center;
  padding:22px 20px;
  border-left:1px solid var(--line);
  color:#b6a88f;font-size:13px;line-height:2;letter-spacing:.6px;
}
.med-note p{margin:0 0 12px;}
.med-note .dim{color:var(--dim2);font-size:12px;line-height:1.9;}

/* 横版（宽屏）：蒲团区独占整行并严格居中，说明文字收成网格下方一行，避免被右栏挤得左偏 */
@media (min-width:901px){
  .med-wrap{grid-template-columns:1fr;gap:4px;}
  .med-grid{max-width:min(100%,940px);max-height:min(62vh,500px);margin:0 auto;}
  .med-note{
    align-self:end;
    width:min(100%,940px);margin:2px auto 0;
    padding:10px 10px 0;
    border-left:none;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px;
    text-align:center;font-size:12.5px;line-height:1.9;
  }
  .med-note p{margin:0;}
}

/* ---- 打坐全屏画面 ---- */
#med-stage{
  position:fixed;inset:0;z-index:60;
  background:#050403;
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility .55s;
}
#med-stage.on{opacity:1;visibility:visible;}
#med-canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto;}
.stage-top{
  position:absolute;left:0;right:0;top:0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px;padding-top:max(16px,env(safe-area-inset-top));
  font-family:var(--mono);font-size:11px;letter-spacing:2px;color:rgba(240,232,214,.66);
}
.stage-clock{color:rgba(229,187,109,.8);}
.stage-line{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(31% + env(safe-area-inset-bottom));
  width:min(720px,86vw);
  text-align:center;
  font-size:clamp(15px,2.4vw,22px);
  letter-spacing:3px;line-height:1.9;
  color:rgba(246,240,214,.86);
  text-shadow:0 0 30px rgba(255,214,150,.25);
  transition:opacity .5s;
}
.stage-foot{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(13% + env(safe-area-inset-bottom));
  font-family:var(--mono);font-size:11.5px;letter-spacing:1.2px;
  color:rgba(241,233,213,.74);
  text-shadow:0 1px 10px rgba(0,0,0,.9);
  white-space:nowrap;
}
/* ---- 这一炷香：时长设置条 ---- */
.stage-incense{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(20.5% + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  max-width:min(720px,92vw);
  padding:8px 14px;
  background:rgba(14,11,8,.74);
  border:1px solid rgba(229,187,109,.22);
  border-radius:24px;
  backdrop-filter:blur(6px);
  font-size:11.5px;letter-spacing:1px;color:rgba(240,232,214,.8);
}
.st-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:rgba(229,187,109,.85);white-space:nowrap;}
.st-durs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;}
.st-durs button{
  height:28px;padding:0 11px;
  font-family:var(--serif);font-size:11.5px;letter-spacing:1px;
  color:rgba(224,212,188,.84);
  border:1px solid rgba(229,187,109,.22);border-radius:14px;
  background:rgba(255,255,255,.03);
  transition:.16s;white-space:nowrap;
}
.st-durs button:hover{color:#fff2df;border-color:rgba(229,187,109,.5);}
.st-durs button.on{
  color:#1a1409;font-weight:500;
  background:linear-gradient(180deg,#ecd093,#c9a566);
  border-color:#e8c98b;
  box-shadow:0 0 14px rgba(229,187,109,.3);
}
#med-dur-input{
  width:76px;height:28px;padding:0 8px;text-align:center;
  font-family:var(--mono);font-size:11.5px;color:#f0e8d6;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(229,187,109,.22);border-radius:14px;
  outline:none;appearance:textfield;-moz-appearance:textfield;
}
#med-dur-input::-webkit-outer-spin-button,
#med-dur-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#med-dur-input::placeholder{color:rgba(200,186,158,.5);font-size:10px;letter-spacing:0;}
#med-dur-input:focus{border-color:rgba(229,187,109,.55);background:rgba(255,255,255,.09);}
.st-durs .st-ok{
  color:#1a1409;font-weight:500;
  background:linear-gradient(180deg,#ecd093,#c9a566);
  border-color:transparent;
}
.st-relight{
  height:28px;padding:0 13px;
  font-size:11.5px;letter-spacing:2px;color:#ffe9c0;
  border:1px solid rgba(229,187,109,.4);border-radius:14px;
  background:rgba(168,56,42,.5);
  transition:.16s;white-space:nowrap;
}
.st-relight:hover{background:rgba(190,70,50,.65);}
.st-relight.hot{box-shadow:0 0 18px rgba(229,187,109,.34);animation:breathe 2.4s ease-in-out infinite;}
.st-left{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:rgba(200,186,158,.72);white-space:nowrap;}

/* 香燃尽的居中提醒 */
.tip-burnt{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  padding:12px 24px;
  font-size:clamp(13px,2vw,16px);letter-spacing:3px;color:#ffe6b8;
  background:rgba(10,8,6,.78);
  border:1px solid rgba(229,187,109,.3);
  border-radius:3px;
  backdrop-filter:blur(4px);
  text-shadow:0 0 22px rgba(255,190,120,.35);
  animation:tipIn .5s var(--ease);
  pointer-events:none;z-index:5;
}
.tip-burnt.out{opacity:0;transition:opacity .8s;}
@keyframes tipIn{from{opacity:0;transform:translate(-50%,-46%) scale(.96);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}

.stage-exit{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(4.5% + env(safe-area-inset-bottom));
  height:38px;padding:0 26px;
  font-size:12.5px;letter-spacing:4px;color:rgba(247,226,180,.85);
  border:1px solid rgba(229,187,109,.28);
  border-radius:2px;
  background:rgba(20,17,12,.6);
  backdrop-filter:blur(4px);
  transition:.2s;
}
.stage-exit:hover{color:#fff3dd;border-color:rgba(229,187,109,.6);background:rgba(168,56,42,.35);}

/* ============================================================
   经阁
   ============================================================ */
/* 经阁：头部整块实底、单一信息层级，避免与书页大标题叠加显花 */
#sc-sutra .scene-head{
  min-height:52px;gap:12px;
  padding:10px 18px;
  padding-top:max(10px,env(safe-area-inset-top));
  background:#0b0a07;                      /* 不透明实底，杜绝背景纹样透上来 */
  border-bottom:1px solid rgba(229,187,109,.16);
}
#sc-sutra .scene-head::before,
#sc-sutra .scene-head::after{display:none;}
.sut-head{min-height:50px;gap:12px;}
.sut-crumb{
  font-size:13px;letter-spacing:5px;color:#e8d7b4;
  padding-left:0;border-left:none;
}
#sc-sutra .scene-back{background:#141109;border-color:rgba(229,187,109,.28);color:#d9c9a8;}
/* 卷数信息统一收进书页工具条，顶栏不再重复 */
#sc-sutra #sut-meta{display:none;}
/* 经阁：整屏压一层暗纱，背景书架的书脊色块不再抢字 */
#sc-sutra::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 92% at 50% 0%,rgba(9,8,6,.40),rgba(6,5,4,.80) 78%),
    linear-gradient(180deg,rgba(8,7,5,.58),rgba(8,7,5,.82));
}
#sc-sutra .sut-wrap{position:relative;z-index:2;}
.sut-wrap{
  position:relative;z-index:2;flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:210px 1fr;
  gap:20px;padding:18px 26px;
  max-width:1240px;width:100%;margin:0 auto;
}
.sut-side{
  position:relative;
  display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;padding:10px 8px 12px;
  /* 深色半透明层：背景画的书架/蓝块被压下去，经名一行一行清楚可读 */
  background:linear-gradient(180deg,rgba(14,11,8,.92),rgba(10,8,6,.94));
  border:1px solid rgba(229,187,109,.18);
  border-radius:3px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.55),0 12px 28px rgba(0,0,0,.35);
  scrollbar-width:thin;
}
.book{
  display:flex;align-items:center;gap:0;
  padding:10px 12px;
  text-align:left;
  border:1px solid transparent;
  border-radius:2px;
  color:#b8aa90;
  transition:.16s;
}
/* 书签方块与副标题小字一律不显示，经名独占一行 */
.book .book-seal{display:none;}
.book .book-m{display:none;}
.book .book-t{
  flex:1 1 auto;min-width:0;
  font-size:14px;letter-spacing:2px;color:#dccfb2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.book:hover{background:rgba(229,187,109,.06);border-color:var(--line);}
.book.on{
  background:linear-gradient(90deg,rgba(229,187,109,.14),rgba(229,187,109,.02));
  border-color:var(--line2);
  color:var(--gold2);
}
.book.on .book-t{color:var(--gold2);}

.sut-main{display:flex;flex-direction:column;min-height:0;min-width:0;}
.sut-tools{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  margin-bottom:10px;
  background:rgba(10,9,6,.92);            /* 实底工具条，与书页纸色拉开层次 */
  border:1px solid rgba(229,187,109,.16);
  border-radius:3px;
  flex-wrap:wrap;
}
.sut-heading{display:flex;align-items:baseline;gap:10px;min-width:0;}
.sut-heading b{font-size:16px;letter-spacing:3px;color:#f0d9a4;font-weight:500;}
.sut-heading span{font-family:var(--mono);font-size:9.5px;color:rgba(200,186,158,.62);letter-spacing:.4px;}
.sut-btns button{
  height:26px;padding:0 9px;
  font-size:10.5px;letter-spacing:1px;color:rgba(176,161,137,.66);
  border:1px solid transparent;border-radius:2px;
  background:none;
  transition:.16s;
}
.sut-btns button:hover{color:var(--gold2);border-color:var(--line2);background:rgba(229,187,109,.07);}

.sut-paper{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:26px clamp(18px,3.4vw,44px) 40px;
  border:1px solid rgba(229,187,109,.14);
  border-radius:3px;
  background:
    linear-gradient(180deg,rgba(239,228,204,.97),rgba(228,214,186,.95));
  color:#2b2519;
  box-shadow:inset 0 0 90px rgba(120,88,40,.18),0 20px 40px rgba(0,0,0,.4);
  scroll-behavior:smooth;
  user-select:text;
}
.sut-paper::selection{background:rgba(168,56,42,.2);}
.sut-intro{
  margin:0 0 22px;padding:0 0 14px;
  font-size:12.5px;line-height:1.95;letter-spacing:.6px;color:#54452c;
  border-bottom:1px solid rgba(90,70,40,.18);
}
.sut-body{font-size:17px;line-height:2.25;letter-spacing:1.4px;}
.sut-body p{margin:0 0 14px;text-indent:2em;}
.sut-body p.sec{
  text-indent:0;margin:26px 0 12px;
  font-size:14px;letter-spacing:3px;color:#8f2f22;
  border-left:2px solid #8f2f22;padding-left:10px;
}
.sut-body .kai{
  text-indent:0;font-size:14.5px;color:#7a6440;letter-spacing:2px;
  margin-bottom:22px;padding:10px 14px;
  background:rgba(143,47,34,.06);
  border:1px dashed rgba(143,47,34,.28);
}
.sut-body p.tail{
  text-indent:0;text-align:right;font-size:12.5px;color:#7d6642;
  letter-spacing:2px;margin-top:26px;
}

/* ============================================================
   木鱼台
   ============================================================ */
.fish-wrap{
  position:relative;z-index:2;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  padding:0 0 0;
}
.fish-stage{position:relative;flex:1 1 auto;min-height:0;}
.fish-stage .scene-bg{z-index:0;}
.fish-stage .scene-layer{z-index:1;pointer-events:auto;cursor:pointer;}
.fish-panel{
  flex:0 0 auto;position:relative;z-index:3;
  display:flex;align-items:center;gap:22px;
  padding:12px 26px 4px;
  justify-content:center;
  flex-wrap:wrap;
}
.fish-num{display:flex;align-items:baseline;gap:8px;}
.fish-num b{
  font-family:var(--mono);font-size:34px;line-height:1;
  color:var(--gold2);letter-spacing:1px;
  text-shadow:0 0 26px rgba(229,187,109,.35);
}
.fish-num span{font-size:11px;letter-spacing:2px;color:var(--dim2);}
.fish-combo{
  font-size:11.5px;letter-spacing:2px;color:var(--jade);
  padding:4px 12px;border:1px dashed rgba(158,189,149,.35);border-radius:2px;
  opacity:0;transition:.3s;
}
.fish-combo.on{opacity:1;}
#fish-btn{
  width:70px;height:70px;border-radius:50%;
  font-size:19px;letter-spacing:2px;color:#fff2df;
  background:radial-gradient(circle at 38% 30%,#c0583c,#8b2f1e 70%);
  box-shadow:0 0 0 1px rgba(255,200,160,.28) inset,0 10px 28px rgba(168,56,42,.45),0 0 0 8px rgba(229,187,109,.05);
  transition:transform .08s,box-shadow .2s;
  touch-action:manipulation;
}
#fish-btn:hover{box-shadow:0 0 0 1px rgba(255,220,180,.5) inset,0 12px 34px rgba(200,80,50,.6),0 0 0 10px rgba(229,187,109,.09);}
#fish-btn.hit{transform:scale(.9);}
.fish-hint{font-family:var(--mono);font-size:10px;letter-spacing:.8px;color:var(--dim2);}
.fish-panel .link-btn{align-self:center;}

/* ============================================================
   书法廊
   ============================================================ */
.brush-wrap{
  position:relative;z-index:2;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;align-items:center;
  padding:0 18px;
  overflow-y:auto;
}
/* 廊檐 + 挂钩 */
.eave{
  position:relative;width:min(100%,900px);
  padding-top:14px;flex:0 0 auto;
}
.eave-bar{
  height:12px;border-radius:2px;
  background:linear-gradient(180deg,#4a2f19,#2a1a0d);
  box-shadow:0 3px 0 rgba(0,0,0,.5),0 8px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,200,140,.18);
}
.hooks{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(10px,3vw,34px);
  padding:0 8px;
  min-height:150px;
}
.hook{
  position:relative;
  width:clamp(46px,10vw,66px);
  display:flex;justify-content:center;
  padding-top:16px;
}
.hook::before{
  content:'';position:absolute;top:0;left:50%;
  width:1px;height:16px;background:rgba(229,187,109,.45);
}
.hook .hung{
  width:100%;min-height:112px;
  padding:12px 6px 16px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:clamp(15px,2.6vw,20px);letter-spacing:8px;
  color:#2c2416;
  background:linear-gradient(180deg,#f3e8cf,#e2d2ae);
  border:1px solid rgba(120,90,50,.4);
  border-radius:1px;
  box-shadow:0 10px 22px rgba(0,0,0,.45),inset 0 0 30px rgba(150,110,60,.16);
  animation:hangIn .5s var(--ease) both;
}
@keyframes hangIn{from{transform:translateY(-14px) rotate(-1.5deg);opacity:0;}to{transform:none;opacity:1;}}

/* 已挂上的挂幅：下方常驻一枚「撤下」按钮，随时可摘 */
.hung-cell{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;}
.unhang{
  position:relative;z-index:3;
  font-family:var(--serif);
  font-size:10.5px;letter-spacing:1.5px;line-height:1;
  padding:5px 7px;white-space:nowrap;
  color:#e9c98d;background:rgba(18,14,9,.92);
  border:1px solid rgba(229,187,109,.42);border-radius:2px;
  transition:.16s;cursor:pointer;
}
.unhang:hover{color:#fff2df;border-color:var(--gold);background:rgba(168,56,42,.6);}
.unhang:active{transform:translateY(1px);}
/* 「撤下最后一幅」只在廊上有字时出现 */
#brush-unhang{display:none;}
#brush-unhang.on{display:inline-flex;align-items:center;}

/* 挂幅书写区 */
.scroll-zone{
  position:relative;
  margin:20px auto 0;
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;
  gap:10px;
}
.scroll-write{
  position:relative;
  width:clamp(120px,26vw,168px);
  min-height:clamp(240px,40vh,330px);
  padding:26px 14px 40px;
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:clamp(24px,4.6vw,32px);letter-spacing:14px;line-height:1.5;
  color:#231c10;
  background:
    linear-gradient(180deg,rgba(247,238,219,.99),rgba(228,213,183,.98));
  border:1px solid rgba(120,90,50,.42);
  border-radius:1px;
  box-shadow:0 22px 44px rgba(0,0,0,.55),inset 0 0 40px rgba(150,110,60,.16);
  outline:none;
  cursor:text;
  user-select:text;
  overflow-wrap:break-word;
  transition:box-shadow .2s;
  caret-color:#8f2f22;
}
.scroll-write:focus{
  box-shadow:0 22px 50px rgba(0,0,0,.6),inset 0 0 40px rgba(150,110,60,.2),0 0 0 1px rgba(229,187,109,.55),0 0 30px rgba(229,187,109,.18);
}
.scroll-write:empty::before{
  content:attr(data-ph);
  color:rgba(60,48,28,.3);
  letter-spacing:8px;
}
/* 挂幅上下轴 */
.scroll-write::after{
  content:'';position:absolute;left:-8px;right:-8px;bottom:-9px;height:10px;
  background:linear-gradient(180deg,#4a2f19,#2a1a0d);
  border-radius:2px;
  box-shadow:0 4px 12px rgba(0,0,0,.6);
}
.scroll-write::before{
  content:'';position:absolute;left:50%;top:-10px;transform:translateX(-50%);
  width:2px;height:10px;background:rgba(229,187,109,.4);
}
.scroll-count{
  font-family:var(--mono);font-size:10px;letter-spacing:1.4px;color:var(--dim2);
}
.brush-tools{
  display:flex;align-items:center;gap:14px;
  padding:20px 0 12px;flex-wrap:wrap;justify-content:center;
}
.brush-note{font-family:var(--mono);font-size:10px;letter-spacing:.6px;color:var(--dim2);flex:0 0 100%;text-align:center;margin-top:2px;}

/* 挂幅动画 */
#brush-anim{
  position:fixed;inset:0;z-index:70;
  background:radial-gradient(ellipse at 50% 30%,rgba(20,16,10,.55),rgba(4,3,2,.92));
  opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s;
  pointer-events:none;
}
#brush-anim.on{opacity:1;visibility:visible;}
.anim-eave{
  position:absolute;left:50%;top:11%;transform:translateX(-50%);
  width:min(520px,72vw);height:12px;
  background:linear-gradient(180deg,#4a2f19,#241408);
  border-radius:2px;
  box-shadow:0 6px 22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,200,140,.2);
}
.anim-banner{
  position:absolute;left:50%;top:52%;
  transform:translate(-50%,-50%);
  width:clamp(70px,16vw,100px);height:clamp(170px,34vh,230px);
  padding:16px 8px;
  writing-mode:vertical-rl;text-orientation:upright;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(19px,3.4vw,24px);letter-spacing:10px;color:#2a2114;
  background:linear-gradient(180deg,#f6ecd5,#e3d3af);
  border:1px solid rgba(120,90,50,.45);
  border-radius:1px;
  box-shadow:0 26px 50px rgba(0,0,0,.6);
}
.anim-banner.go{animation:flyUp 1.5s var(--ease) forwards;}
@keyframes flyUp{
  0%{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:0;}
  14%{opacity:1;}
  55%{transform:translate(-50%,-95%) rotate(-4deg) scale(.8);}
  82%{transform:translate(-50%,-178%) rotate(2deg) scale(.5);opacity:.9;}
  100%{transform:translate(-50%,-205%) rotate(0) scale(.34);opacity:0;}
}
.anim-word{
  position:absolute;left:50%;bottom:16%;transform:translateX(-50%);
  font-size:11.5px;letter-spacing:8px;color:rgba(229,187,109,.7);
  font-family:var(--mono);
}

/* ============================================================
   祈福殿
   ============================================================ */
.pray-wrap{
  position:relative;z-index:2;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  padding:16px 20px 0;
}
.pray-top{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding-top:6px;
}
/* 问事输入：先写下所问之事，再掷筊 */
.pray-ask{
  display:flex;align-items:center;gap:10px;
  width:min(560px,92vw);
}
.pray-ask .ask-lbl{
  flex:0 0 auto;
  font-family:var(--serif);font-size:11.5px;letter-spacing:3px;line-height:1;
  color:rgba(229,187,109,.74);
  padding:7px 9px;
  border:1px solid rgba(229,187,109,.22);border-radius:2px;
  background:rgba(255,255,255,.02);
}
.pray-ask input{
  flex:1 1 auto;min-width:0;
  font-family:var(--serif);font-size:13px;letter-spacing:1.2px;color:#efe4cd;
  padding:7px 10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(229,187,109,.20);border-radius:2px;
  outline:none;transition:border-color .2s,background .2s,box-shadow .2s;
}
.pray-ask input::placeholder{color:rgba(154,141,118,.72);letter-spacing:.6px;}
.pray-ask input:focus{
  border-color:rgba(229,187,109,.55);background:rgba(255,255,255,.05);
  box-shadow:0 0 0 3px rgba(229,187,109,.08);
}
.pray-ask.warn input{border-color:rgba(224,120,95,.85);animation:askShake .34s;}
.pray-ask.warn .ask-lbl{color:#e0a392;border-color:rgba(224,120,95,.5);}
@keyframes askShake{0%,100%{transform:none;}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
.pray-result{
  font-size:clamp(20px,3.6vw,30px);letter-spacing:9px;
  color:rgba(233,223,201,.4);
  transition:color .3s,text-shadow .3s,transform .3s;
  text-align:center;
}
.pray-result.sheng{color:#f7d792;text-shadow:0 0 34px rgba(247,215,146,.55);transform:scale(1.04);}
.pray-result.xiao{color:#cfe3c4;text-shadow:0 0 30px rgba(207,227,196,.4);}
.pray-result.yin{color:#e0a392;text-shadow:0 0 30px rgba(224,163,146,.4);}
.pray-sign{
  font-size:12.5px;letter-spacing:1.6px;line-height:1.9;color:#b0a189;
  max-width:min(560px,88vw);text-align:center;min-height:20px;
}
.pray-stage{
  position:relative;flex:1 1 auto;min-height:0;margin-top:4px;
  border-radius:4px;overflow:hidden;
}
.pray-stage .scene-bg,.pray-stage .scene-layer{position:absolute;inset:0;}
.pray-tip{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:min(620px,92%);margin:0;
  font-family:var(--mono);font-size:9.5px;line-height:1.8;letter-spacing:.3px;
  color:rgba(154,141,118,.75);text-align:center;
}
.pray-stats{
  flex:0 0 auto;display:flex;justify-content:center;gap:clamp(8px,2vw,18px);
  padding:10px 0 4px;
}
.stat{
  min-width:clamp(84px,20vw,120px);
  padding:8px 10px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  border:1px solid var(--line);border-radius:2px;
  background:rgba(255,255,255,.02);
  transition:.22s;
}
.stat b{font-family:var(--mono);font-size:19px;letter-spacing:1px;font-weight:400;}
.stat span{font-size:11.5px;letter-spacing:2px;}
.stat em{font-family:var(--mono);font-size:8.5px;font-style:normal;color:var(--dim2);letter-spacing:.4px;}
.stat.sheng b,.stat.sheng span{color:#f0cd88;}
.stat.xiao b,.stat.xiao span{color:#cfe3c4;}
.stat.yin b,.stat.yin span{color:#e0a392;}
.stat.flash{transform:translateY(-3px);border-color:var(--line2);background:rgba(229,187,109,.1);box-shadow:0 0 24px rgba(229,187,109,.2);}

/* ============================================================
   对话
   ============================================================ */
#chat{
  position:fixed;right:22px;bottom:calc(22px + var(--kb,0px));z-index:80;
  width:min(380px,calc(100vw - 32px));
  max-height:min(560px,calc(100vh - 120px - var(--kb,0px)));
  transition:opacity .26s var(--ease),transform .26s var(--ease),bottom .18s ease-out;
}
#chat.hidden{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;}
.chat-card{
  display:flex;flex-direction:column;
  max-height:inherit;
  background:linear-gradient(180deg,rgba(24,20,14,.97),rgba(12,10,7,.98));
  border:1px solid var(--line2);
  border-radius:3px;
  box-shadow:0 26px 60px rgba(0,0,0,.7);
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.chat-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 12px 12px 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(229,187,109,.06),transparent);
}
.chat-avatar{
  width:40px;height:40px;flex:0 0 40px;
  display:grid;place-items:center;
  background:rgba(229,187,109,.08);
  border:1px solid var(--line2);border-radius:2px;
  overflow:hidden;
}
.chat-avatar canvas{image-rendering:pixelated;}
.chat-who{display:flex;flex-direction:column;line-height:1.35;min-width:0;}
.chat-who b{font-size:14px;letter-spacing:2px;color:var(--gold2);font-weight:500;}
.chat-who span{font-family:var(--mono);font-size:9.5px;color:var(--dim2);letter-spacing:.4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-x{
  margin-left:auto;width:28px;height:28px;
  font-size:17px;color:var(--dim);border-radius:2px;transition:.16s;
}
.chat-x:hover{color:#fff;background:rgba(168,56,42,.4);}

.chat-log{
  flex:1 1 auto;min-height:120px;
  padding:14px;
  display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;
  scroll-behavior:smooth;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(229,187,109,.05),transparent 60%);
}
.msg{
  max-width:86%;padding:9px 13px;
  font-size:13.5px;line-height:1.75;letter-spacing:.5px;
  border-radius:3px;
  animation:msgIn .22s var(--ease) both;
  word-break:break-word;
  user-select:text;
}
@keyframes msgIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.msg.them{
  align-self:flex-start;
  color:#e5dac2;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(229,187,109,.12);
  border-top-left-radius:0;
}
.msg.me{
  align-self:flex-end;
  color:#fff0dc;
  background:linear-gradient(180deg,rgba(176,74,52,.85),rgba(140,52,36,.9));
  border:1px solid rgba(255,180,150,.18);
  border-top-right-radius:0;
}
.msg.sys{
  align-self:center;max-width:100%;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.6px;
  color:var(--dim2);background:none;border:0;padding:2px 0;
}
.typingbox{padding:12px 14px;}
.typing{display:inline-flex;gap:4px;}
.typing i{
  width:5px;height:5px;border-radius:50%;background:rgba(229,187,109,.7);
  animation:ty 1.2s infinite;
}
.typing i:nth-child(2){animation-delay:.18s;}
.typing i:nth-child(3){animation-delay:.36s;}
@keyframes ty{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

.chat-quick{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:0 12px 10px;
}
.chat-quick button{
  font-size:11.5px;letter-spacing:.6px;color:#bcae94;
  padding:5px 10px;border:1px dashed rgba(229,187,109,.24);border-radius:2px;
  background:rgba(255,255,255,.02);transition:.16s;
}
.chat-quick button:hover{color:var(--gold2);border-color:var(--line2);background:rgba(229,187,109,.1);}

.chat-form{
  display:flex;gap:8px;padding:10px 12px 12px;
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.25);
}
#chat-text{
  flex:1 1 auto;height:38px;padding:0 12px;
  font-family:var(--serif);font-size:13.5px;letter-spacing:.5px;
  color:var(--txt);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:2px;
  outline:none;transition:.16s;
  user-select:text;
}
#chat-text:focus{border-color:var(--line2);background:rgba(255,255,255,.07);}
#chat-text::placeholder{color:var(--dim2);}
.chat-form button{
  height:38px;padding:0 18px;
  font-size:13px;letter-spacing:3px;color:#fff2df;
  background:linear-gradient(180deg,#b34c37,#8b3020);
  border-radius:2px;
  box-shadow:0 6px 16px rgba(168,56,42,.35);
  transition:.16s;
}
.chat-form button:hover{filter:brightness(1.1);}

/* ============================================================
   入寺
   ============================================================ */
#boot{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  background:
    radial-gradient(ellipse at 50% 34%,rgba(70,52,28,.55),rgba(6,5,4,.97) 62%),
    #060504;
  transition:opacity .72s var(--ease),visibility .72s;
}
#boot.hide{opacity:0;visibility:hidden;pointer-events:none;}
.boot-inner{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 24px;text-align:center;}
.boot-seal{
  width:64px;height:64px;display:grid;place-items:center;
  font-size:32px;color:#fff1e2;
  background:linear-gradient(150deg,var(--red2),var(--red));
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,200,160,.2) inset,0 16px 40px rgba(168,56,42,.45);
  animation:sealIn 1s var(--ease) both;
}
@keyframes sealIn{from{transform:scale(.7) rotate(-6deg);opacity:0;}to{transform:none;opacity:1;}}
#boot h1{
  margin:6px 0 0;font-size:clamp(26px,5vw,38px);letter-spacing:14px;
  color:var(--gold2);font-weight:500;
  text-indent:14px;
  animation:fadeUp .8s .1s var(--ease) both;
}
.boot-sub{
  margin:0;font-size:13px;letter-spacing:5px;color:#a2937a;
  animation:fadeUp .8s .2s var(--ease) both;
}
#boot-go{
  margin-top:16px;
  height:46px;padding:0 44px;
  font-size:15px;letter-spacing:8px;color:#fff4e2;
  background:linear-gradient(180deg,#bd533c,#8a2f1f);
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,200,160,.24) inset,0 14px 34px rgba(168,56,42,.45);
  transition:.2s;
  animation:fadeUp .8s .3s var(--ease) both;
}
#boot-go:hover{transform:translateY(-2px);filter:brightness(1.1);}
.boot-tip{
  margin:4px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:#5f5545;
  animation:fadeUp .8s .4s var(--ease) both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ============================================================
   响应式：竖屏手机
   ============================================================ */
@media (max-width:900px){
  .med-wrap{grid-template-columns:1fr;gap:10px;padding:10px 16px;align-content:end;}
  .med-note{border-left:0;border-top:1px solid var(--line);padding:12px 0 0;order:2;
    display:flex;gap:14px;justify-content:center;text-align:center;font-size:11.5px;flex-wrap:wrap;}
  .med-note p{margin:0;}
  .med-note .dim{font-size:10.5px;}
  .med-grid{max-height:min(48vh,360px);height:auto;padding:8px 6px;gap:4px 2px;}
  .seat{width:48px;height:48px;}
  .seat .cushion{width:38px;height:38px;}
  .seat.taken .seat-monk{width:40px;height:38px;}

  .sut-wrap{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px;padding:10px 14px;}
  .sut-side{
    flex-direction:row;overflow-x:auto;overflow-y:hidden;
    padding:8px;gap:6px;
    background:linear-gradient(180deg,rgba(14,11,8,.92),rgba(10,8,6,.94));
    border:1px solid rgba(229,187,109,.18);
  }
  .sut-side .book{flex:0 0 auto;padding:8px 11px;}
  .sut-side .book .book-t{font-size:12.5px;letter-spacing:1.6px;}
  .book .book-m{display:none;}
  .book .book-seal{height:26px;}
  .sut-paper{padding:18px 16px 28px;}
  .sut-body{font-size:15.5px;line-height:2.05;letter-spacing:1px;}

  .fish-panel{gap:12px;padding:8px 12px 2px;}
  .fish-num b{font-size:26px;}
  #fish-btn{width:58px;height:58px;font-size:16px;}
  .fish-hint{display:none;}
  .pray-stats{gap:6px;}
  .stat{min-width:0;flex:1 1 0;padding:6px 4px;}
  .stat b{font-size:16px;}
  .stat span{font-size:10.5px;letter-spacing:1px;}
  .stat em{display:none;}
  .hooks{min-height:120px;gap:8px;}
  .hook .hung{min-height:88px;font-size:14px;letter-spacing:5px;}
  .scroll-write{min-height:clamp(200px,34vh,280px);}
  .eave{padding-top:8px;}
  .brush-tools{padding:14px 0 8px;gap:10px;}
  .big-btn{padding:0 22px;letter-spacing:3px;}
  .scene-title em{display:none;}
  .scene-head{gap:10px;padding:10px 12px;min-height:54px;}
  .scene-title b{font-size:16px;letter-spacing:4px;}
  .scene-back{padding:0 9px;font-size:11px;letter-spacing:1px;}
  .scene-meta{font-size:9.5px;}
  .scene-foot{font-size:9px;letter-spacing:.6px;padding:8px 10px calc(10px + env(safe-area-inset-bottom));}

  #dock{
    left:12px;right:12px;transform:none;
    max-width:none;
    bottom:calc(76px + env(safe-area-inset-bottom));
    justify-content:flex-start;
  }
  .dock-item{padding:5px 8px;gap:6px;}
  .dock-item .ds{width:22px;height:22px;flex:0 0 22px;font-size:12px;}
  .dock-item .dt b{font-size:11.5px;letter-spacing:1px;}
  .dock-item .dt span{display:none;}
  #tipbar{display:none;}
  #chat{
    right:8px;left:8px;width:auto;
    bottom:calc(8px + env(safe-area-inset-bottom) + var(--kb,0px));
    max-height:calc(100vh - 16px - var(--kb,0px));
  }
  .chat-log{min-height:100px;}
  .chat-form{padding:8px 10px calc(10px + env(safe-area-inset-bottom));}
  #chat-text{height:42px;font-size:15px;}  /* iOS 小于 16px 会放大页面 */
  .chat-form button{height:42px;padding:0 16px;font-size:13.5px;}
  .stage-line{bottom:calc(34% + env(safe-area-inset-bottom));font-size:15px;letter-spacing:2px;width:92vw;}
  .stage-foot{bottom:calc(15% + env(safe-area-inset-bottom));font-size:9px;letter-spacing:.6px;}
  .stage-exit{bottom:calc(6% + env(safe-area-inset-bottom));padding:0 20px;letter-spacing:3px;}
  /* 手机上香时长条改成两行紧凑布局，不与静坐文字、起身按钮打架 */
  .stage-incense{
    flex-direction:row;flex-wrap:wrap;gap:6px 8px;
    bottom:calc(22% + env(safe-area-inset-bottom));
    padding:7px 10px;border-radius:12px;
    width:92vw;max-width:92vw;justify-content:center;
  }
  .stage-incense .st-lbl{font-size:9.5px;letter-spacing:1px;}
  #med-durs{order:3;flex:0 0 100%;gap:4px;}   /* 时长选择独占一行，第一行只放标签/状态/点香 */
  .st-durs button{height:25px;padding:0 8px;font-size:10.5px;letter-spacing:0;}
  .st-durs .st-ok{height:25px;padding:0 9px;}
  #med-dur-input{width:64px;height:25px;font-size:10.5px;}
  .st-relight{height:25px;padding:0 10px;font-size:10.5px;letter-spacing:1px;}
  .st-left{font-size:9.5px;}
}

/* 触屏设备优先用方向键 */
@media (hover:none){
  #touch{display:grid;}
  #dock{bottom:calc(190px + env(safe-area-inset-bottom));left:12px;right:12px;transform:none;max-width:none;}
  #tipbar{display:none;}
}

/* 极窄竖屏 */
@media (max-width:420px){
  .brand-txt span{display:none;}
  .chip{height:26px;padding:0 9px;font-size:10.5px;}
  .hooks{min-height:108px;}
  .hook{width:clamp(40px,13vw,52px);}
  .hook .hung{min-height:80px;letter-spacing:4px;font-size:13px;}
}

/* 横屏矮屏（手机横放） */
@media (max-height:520px) and (orientation:landscape){
  .scene-head{min-height:46px;padding:6px 12px;}
  .scene-title em{display:none;}
  .scene-foot{display:none;}
  .hook .hung{min-height:70px;font-size:12.5px;letter-spacing:3px;}
  .hooks{min-height:96px;}
  .scroll-write{min-height:160px;font-size:20px;letter-spacing:8px;}
  .brush-tools{padding:8px 0 4px;}
  #dock{bottom:calc(10px + env(safe-area-inset-bottom));}
  .stage-line{bottom:26%;}
  #touch{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);}
}

/* 手机竖屏：24 席改 4 列 6 行，避免横向溢出 */
@media (max-width:520px){
  #med-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(46px,1fr);gap:0;}
  #med-grid .seat .cushion{width:clamp(26px,7vw,36px);height:clamp(26px,7vw,36px);}
  #med-grid .seat .seat-monk{width:38px;height:36px;}
  .med-note p{font-size:11px;}
}

/* 手机禅堂：给底部说明文字让出空间 */
@media (max-width:900px){
  .med-wrap{grid-template-columns:1fr;gap:10px;padding:12px 12px 66px;align-items:end;}
  .med-note{display:none;}
}


/* ============================================================
   静音按钮（广场与所有殿内通用，始终可点）
   ============================================================ */
#audio-ctl{
  position:fixed;
  right:16px;
  top:calc(56px + env(safe-area-inset-top));
  z-index:65;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
#mute-fab{
  display:inline-flex;align-items:center;gap:7px;
  height:32px;padding:0 12px;
  font-family:var(--serif);
  font-size:12px;letter-spacing:1.4px;color:#e5bb6d;
  background:linear-gradient(180deg,rgba(30,26,18,.88),rgba(18,16,11,.92));
  border:1px solid var(--line2);
  border-radius:2px;
  backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease);
}
#mute-fab .mf-ico{
  font-family:var(--mono);font-size:13px;line-height:1;
  width:11px;text-align:center;color:#e5bb6d;
  transition:color .2s var(--ease);
}
#mute-fab:hover{border-color:rgba(229,187,109,.55);color:#f7e2b4;}
#mute-fab:active{transform:translateY(1px);}
#mute-fab.off{color:var(--dim2);border-color:rgba(229,187,109,.14);}
#mute-fab.off .mf-ico{color:var(--dim2);}
/* 点开后的音量面板 */
.audio-panel{
  display:none;
  width:200px;padding:11px 13px 12px;
  background:linear-gradient(180deg,rgba(32,28,20,.96),rgba(15,13,9,.97));
  border:1px solid var(--line2);
  border-radius:2px;
  box-shadow:0 12px 30px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
}
#audio-ctl.on .audio-panel{display:block;animation:auIn .16s var(--ease);}
@keyframes auIn{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}
.au-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.au-k{font-family:var(--serif);font-size:12px;letter-spacing:1.4px;color:#e5bb6d;}
.au-v{font-family:var(--mono);font-size:11px;color:var(--dim2);letter-spacing:1px;}
.au-vol{
  -webkit-appearance:none;appearance:none;
  width:100%;height:16px;margin:9px 0 11px;background:transparent;cursor:pointer;
}
.au-vol::-webkit-slider-runnable-track{
  height:3px;border:1px solid rgba(229,187,109,.28);background:rgba(229,187,109,.14);
}
.au-vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:11px;height:11px;margin-top:-5px;border:none;border-radius:50%;
  background:#e5bb6d;box-shadow:0 0 8px rgba(229,187,109,.55);
}
.au-vol::-moz-range-track{height:3px;background:rgba(229,187,109,.16);border:1px solid rgba(229,187,109,.28);}
.au-vol::-moz-range-thumb{width:11px;height:11px;border:none;border-radius:50%;background:#e5bb6d;}
.au-btns{justify-content:space-between;}
.au-mute,.au-x{
  font-family:var(--serif);font-size:11.5px;letter-spacing:1.2px;
  height:26px;padding:0 10px;cursor:pointer;
  color:#e5bb6d;background:rgba(229,187,109,.07);
  border:1px solid rgba(229,187,109,.32);border-radius:2px;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.au-mute:hover,.au-x:hover{border-color:rgba(229,187,109,.6);color:#f7e2b4;background:rgba(229,187,109,.13);}
.au-mute[aria-pressed="true"]{color:#b9a684;border-color:rgba(229,187,109,.16);background:rgba(229,187,109,.03);}
.au-x{color:var(--dim2);border-color:rgba(229,187,109,.16);background:transparent;}
@media (max-width:560px){
  #audio-ctl{right:12px;top:calc(52px + env(safe-area-inset-top));}
  #mute-fab{padding:0 10px;height:30px;}
  #mute-fab .mf-tip{display:none;}
  .audio-panel{width:184px;}
}

/* 蒲团在各自格子里居中：窄屏切成 4 列时不会整体左靠 */
#med-grid .seat{justify-self:center;align-self:center;}

/* 横版矮屏（手机横屏等）：蒲团不压底栏、四行不被挤压溢出 */
@media (max-height:540px){
  .med-wrap{padding-bottom:34px;}
  #med-grid{grid-auto-rows:minmax(0,1fr);padding:4px 6px;}
  #med-grid .seat{width:clamp(26px,6.4vh,44px);height:clamp(26px,6.4vh,44px);}
  #med-grid .seat .cushion{width:calc(100% - 3px);height:calc(100% - 3px);}
}


/* ============================================================
   禅堂补丁：有人坐的蒲团 —— 蒲团在下、人像放大坐在蒲团上
   ============================================================ */
#med-grid .seat.taken .cushion{
  position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  width:clamp(34px,3.6vw,50px);height:clamp(34px,3.6vw,50px);border-radius:50%;
  background:radial-gradient(circle at 42% 34%,#a0502e,#6c321b 62%,#3d1c0f);
  border:1px solid rgba(255,205,155,.24);
  box-shadow:0 6px 14px rgba(0,0,0,.5),0 0 0 5px rgba(229,187,109,.05);
}
#med-grid .seat.taken .seat-monk{
  position:absolute;left:50%;bottom:11px;transform:translateX(-50%);
  width:clamp(60px,6.4vw,80px);height:clamp(55px,5.9vw,73px);
  opacity:.97;image-rendering:pixelated;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.55));
}
@media (max-width:900px){
  #med-grid .seat.taken .seat-monk{width:54px;height:49px;bottom:9px;}
  #med-grid .seat.taken .cushion{width:34px;height:34px;bottom:3px;}
}
@media (max-width:520px){
  #med-grid .seat.taken .seat-monk{width:46px;height:42px;bottom:7px;}
  #med-grid .seat.taken .cushion{width:28px;height:28px;bottom:2px;}
}
@media (max-height:540px){
  #med-grid .seat.taken .seat-monk{width:44px;height:40px;bottom:6px;}
  #med-grid .seat.taken .cushion{width:26px;height:26px;bottom:1px;}
}

/* ============================================================
   联机 · 入寺法号 / 客堂
   ============================================================ */
.boot-name{
  margin:2px 0 -2px;
  width:min(268px,74vw);height:40px;
  text-align:center;
  font-family:var(--serif);font-size:14px;letter-spacing:3px;color:var(--gold2);
  background:linear-gradient(180deg,rgba(28,24,16,.9),rgba(14,12,9,.94));
  border:1px solid var(--line2);
  border-radius:2px;
  outline:none;
  animation:fadeUp .8s .24s var(--ease) both;
  transition:border-color .2s,box-shadow .2s;
}
.boot-name::placeholder{color:#6b6151;letter-spacing:1.6px;font-size:12px;}
.boot-name:focus{border-color:rgba(229,187,109,.6);box-shadow:0 0 0 3px rgba(229,187,109,.12);}

#hud-net{font:inherit;cursor:pointer;background-image:linear-gradient(180deg,rgba(30,26,18,.86),rgba(18,16,11,.9));}
#hud-net:hover{color:var(--gold2);border-color:var(--line2);}
#hud-net.live .dot{background:#7fe0a8;box-shadow:0 0 10px rgba(127,224,168,.95);}
#hud-net:not(.live) .dot{background:#8a7f6a;box-shadow:none;animation:none;opacity:.6;}

#netpanel{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  padding:16px;
  background:rgba(4,3,2,.72);
  backdrop-filter:blur(5px);
  transition:opacity .24s var(--ease),visibility .24s;
}
#netpanel.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.np-card{
  width:min(760px,calc(100vw - 24px));
  max-height:min(78vh,600px);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(24,20,14,.98),rgba(12,10,7,.99));
  border:1px solid var(--line2);
  border-radius:3px;
  box-shadow:var(--sh),0 0 0 1px rgba(0,0,0,.6) inset;
  overflow:hidden;
  transform:translateY(6px);
  transition:transform .28s var(--ease);
}
#netpanel:not(.hidden) .np-card{transform:none;}
.np-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(46,36,22,.55),transparent);
}
.np-title{display:flex;align-items:center;gap:9px;font-family:var(--serif);color:var(--gold2);}
.np-title .seal{
  width:22px;height:22px;display:grid;place-items:center;
  font-size:12px;color:#fff1e2;background:linear-gradient(150deg,var(--red2),var(--red));
  border-radius:2px;
}
.np-title b{font-size:15px;font-weight:500;letter-spacing:4px;}
.np-status{
  font-family:var(--mono);font-size:10px;font-style:normal;letter-spacing:1px;
  color:var(--dim2);padding:2px 7px;border:1px solid var(--line);border-radius:2px;
}
.np-status.on{color:#7fe0a8;border-color:rgba(127,224,168,.35);}
.np-status.off{color:#b08a5e;border-color:rgba(176,138,94,.35);}
.np-x{
  width:30px;height:30px;font-size:18px;line-height:1;color:var(--dim);
  border:0;background:none;cursor:pointer;border-radius:2px;transition:.2s;
}
.np-x:hover{color:var(--gold2);background:rgba(229,187,109,.1);}

.np-body{flex:1;display:grid;grid-template-columns:200px 1fr;gap:0;min-height:0;}
.np-col{display:flex;flex-direction:column;min-height:0;padding:12px 14px;}
.np-col+.np-col{border-left:1px solid var(--line);}
.np-h{
  font-family:var(--mono);font-size:9.5px;letter-spacing:2px;color:var(--dim2);
  margin:0 0 8px;
}
.np-h b{color:var(--gold);font-family:var(--serif);font-size:12px;}
.np-people{display:flex;flex-direction:column;gap:4px;overflow:auto;max-height:150px;margin-bottom:12px;}
.np-person{
  font-size:12px;letter-spacing:1px;color:#cbbfa6;
  padding:3px 7px;border-left:2px solid rgba(229,187,109,.22);
  background:rgba(255,255,255,.02);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.np-person.me{color:var(--gold2);border-left-color:var(--gold);}
.np-merit{flex:1;overflow:auto;display:flex;flex-direction:column;gap:3px;min-height:40px;}
.np-merit-row{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:#cbbfa6;padding:3px 7px;border-bottom:1px dashed rgba(229,187,109,.1);
}
.np-merit-row i{font-family:var(--mono);font-size:10px;font-style:normal;color:var(--dim2);width:12px;}
.np-merit-row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.np-merit-row b{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--gold);}
.np-empty{font-size:11.5px;color:var(--dim2);letter-spacing:1px;padding:6px 0;}
.np-col-main{min-height:0;}
.np-log{
  flex:1;min-height:180px;overflow-y:auto;
  display:flex;flex-direction:column;gap:6px;
  padding:8px 10px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(229,187,109,.08);
  border-radius:2px;
}
.np-line{font-size:12.5px;line-height:1.6;color:#d9cfb8;word-break:break-word;}
.np-line b{
  font-family:var(--serif);font-weight:400;color:var(--gold);
  margin-right:7px;letter-spacing:1px;
}
.np-line.sys{color:#8c8270;font-size:11.5px;letter-spacing:.4px;}
.np-line.sys b{color:#7f7460;}
.np-form{display:flex;gap:8px;margin-top:10px;}
.np-form input{
  flex:1;height:38px;padding:0 12px;
  font-size:13px;color:var(--txt);letter-spacing:1px;
  background:rgba(0,0,0,.4);
  border:1px solid var(--line);
  border-radius:2px;outline:none;transition:border-color .2s;
}
.np-form input:focus{border-color:rgba(229,187,109,.5);}
.np-form input::placeholder{color:#6b6151;}
.np-form button{
  height:38px;padding:0 20px;
  font-family:var(--serif);font-size:13px;letter-spacing:3px;color:#fff4e2;
  background:linear-gradient(180deg,#bd533c,#8a2f1f);
  border:0;border-radius:2px;cursor:pointer;transition:.2s;
}
.np-form button:hover{filter:brightness(1.1);}
.np-foot{
  padding:8px 14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;color:var(--dim2);
  text-align:center;
}

@media (max-width:720px){
  .np-body{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .np-col+.np-col{border-left:0;border-top:1px solid var(--line);}
  .np-people{max-height:80px;flex-direction:row;flex-wrap:wrap;}
  .np-log{min-height:130px;}
  .np-card{max-height:86vh;}
}