/* ———————— 手机端适配（叠加在 app.css 之后）————————
   --app-h / --app-top：可见视口（js/responsive.js 由 visualViewport 写入；无 JS 时退回 dvh）
   --bar-h：底栏实际高度（含底部安全区），浮在底栏上方的东西都以它为基准
   --snd-h：声音面板实际高度 */
:root{
  --sa-t:env(safe-area-inset-top,0px);--sa-r:env(safe-area-inset-right,0px);
  --sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px);
  --gut-l:max(12px,var(--sa-l));--gut-r:max(12px,var(--sa-r));
  --vh-fallback:100vh;
}
@supports (height:100dvh){:root{--vh-fallback:100dvh}}

/* —— 1. 视口：整页不滚、不回弹，画布铺满可见区域 —— */
html,body{overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#gl{-webkit-touch-callout:none}
body,button,.bar,.top{-webkit-touch-callout:none}

/* 弹窗面板：贴住可见视口（软键盘弹出时整体上移），四周留安全区，卡片内部滚动 */
.panel{top:var(--app-top,0px);bottom:auto;height:var(--app-h,var(--vh-fallback));
  padding:max(16px,var(--sa-t)) max(16px,var(--sa-r)) max(16px,var(--sa-b)) max(16px,var(--sa-l))}
.panel .card{max-height:100%;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.kb-open .panel{padding-bottom:10px;align-items:flex-start}
.kb-open .panel .card{margin-top:auto;margin-bottom:auto}
dialog.monk-look{max-height:calc(var(--app-h,var(--vh-fallback)) - 32px);overscroll-behavior:contain}

/* 顶部栏、底栏避开刘海与横屏侧边 */
.top{padding-left:max(16px,var(--sa-l));padding-right:max(16px,var(--sa-r))}
.bar{padding-left:max(12px,var(--sa-l));padding-right:max(12px,var(--sa-r))}
.pill{right:max(12px,var(--sa-r))}
.toast{top:max(34%,calc(14px + var(--sa-t)))}

/* 浮在底栏上方：提示、木鱼、声音面板、提示卡、摇杆 */
.hint{bottom:calc(var(--bar-h,80px) + 10px);text-wrap:balance}
.notice{bottom:calc(var(--bar-h,80px) + 14px)}
.snd-pop{bottom:calc(var(--bar-h,80px) + 10px);right:max(16px,var(--sa-r));max-height:calc(var(--app-h,var(--vh-fallback)) - var(--bar-h,80px) - 24px - var(--sa-t));overflow:auto;overscroll-behavior:contain}
.muyu{bottom:calc(var(--bar-h,80px) + 10px);right:max(28px,var(--sa-r))}
#joy{left:max(20px,calc(var(--sa-l) + 8px));bottom:calc(var(--bar-h,80px) + 12px)}
/* 声音面板打开时，木鱼让到它左边，不叠在一起 */
body:has(.snd-pop.show) .muyu{right:calc(max(16px,var(--sa-r)) + 300px + 14px)}
.muyu{transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.3,1.2),right .3s,bottom .3s}

/* 抽签：内容比屏幕高时从顶部开始、可滚动（不再被居中裁掉上半截） */
.qian-stage{top:var(--app-top,0px);bottom:auto;height:var(--app-h,var(--vh-fallback));align-items:flex-start;justify-content:flex-start;
  padding:calc(20px + var(--sa-t)) max(16px,var(--sa-r)) calc(20px + var(--sa-b)) max(16px,var(--sa-l));
  overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.qian-stage>.q-draw,.qian-stage>.q-result{margin:auto}
.q-x{right:max(16px,var(--sa-r))}
.q-tube{width:min(210px,52vw,max(110px,calc((var(--app-h,var(--vh-fallback)) - 230px) * .66)))}

/* 排队：同样从顶部开始、可滚动 */
.qwait{top:var(--app-top,0px);bottom:auto;height:var(--app-h,var(--vh-fallback));align-items:flex-start;overflow:auto;
  padding:calc(20px + var(--sa-t)) max(16px,var(--sa-r)) calc(20px + var(--sa-b)) max(16px,var(--sa-l));overscroll-behavior:contain;touch-action:pan-y}
.qw-in{margin:auto}
.qw-muyu{width:min(280px,72vw,max(150px,calc((var(--app-h,var(--vh-fallback)) - 230px) * 1.25)))}

/* 小窗不可用时隐藏 */
.no-pip #btnPip{display:none!important}

/* —— 2. 触屏细节 —— */
button,[role=button],.mu-stage,.q-tube,a.btnlink,input,label{touch-action:manipulation}
#joy{touch-action:none}
@media (hover:none){
  /* 触屏没有真正的悬停：取消“点过以后一直亮着” */
  button:hover{background:rgba(46,28,17,.8);border-color:var(--line)}
  button.primary:hover,.q-again:hover{background:linear-gradient(#d9a441,#a8741f);border-color:#f6d98e}
  button.danger:hover{background:linear-gradient(#a8452c,#7e2e1b);border-color:#d8846a}
  .q-go:hover{background:transparent;border-color:rgba(242,198,107,.6)}
  .eye:hover{background:rgba(242,198,107,.08)}
  .tabs button:hover,.linkbtn:hover{background:none}
  .bar button:hover svg{transform:none}
  .bar:hover{opacity:var(--bar-op,1)!important}
}
@media (pointer:coarse){
  /* 点按区域不小于 44px */
  .card .row button,.snd-mute,.q-acts button,.gate-acts button{min-height:44px}
  .top button{position:relative}
  .top button::after{content:"";position:absolute;inset:-8px -3px}
  .mu-close{width:36px;height:36px;top:-4px}
  .snd-x{width:36px;height:36px}
  .q-x{width:44px;height:44px}
  .snd-grid button{min-height:52px}
}

/* —— 3. 「更多」按钮与底部面板 —— */
.bar .more-btn[hidden]{display:none}
.bar .more-btn.on{border-color:var(--gold);background:rgba(100,64,28,.9)}
.more-scrim{position:fixed;inset:0;z-index:3;background:rgba(5,3,2,.45);opacity:0;pointer-events:none;transition:opacity .25s;touch-action:none}
.more-scrim.show{opacity:1;pointer-events:auto}
.more-sheet{position:fixed;left:0;right:0;bottom:0;z-index:4;margin:0 auto;max-width:520px;
  padding:8px max(14px,var(--sa-r)) calc(14px + var(--sa-b)) max(14px,var(--sa-l));
  border-radius:20px 20px 0 0;background:linear-gradient(#2a1a12,#1a100a);border:1px solid rgba(242,198,107,.4);border-bottom:none;
  box-shadow:0 -14px 40px rgba(0,0,0,.6);transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.3,1);visibility:hidden;touch-action:none}
.more-sheet.show{transform:none;visibility:visible}
.ms-grip{width:40px;height:4px;border-radius:2px;margin:2px auto 8px;background:rgba(242,198,107,.35)}
.ms-hd{text-align:center;font-size:13px;letter-spacing:.3em;padding-left:.3em;color:var(--gold);margin-bottom:12px}
.ms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ms-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:72px;padding:10px 4px;border-radius:16px;line-height:1}
.ms-grid button[hidden]{display:none}
.ms-grid button svg{width:26px;height:26px;display:block;color:#f2c66b}
.ms-grid button span{font-size:13px;letter-spacing:.12em;padding-left:.12em}
.ms-grid #btnSnd[aria-pressed="true"] svg{color:#bba57a}

/* —— 4. 窄屏（竖屏手机）：底栏 5 个大按钮 —— */
@media (max-width:599px){
  .bar{gap:6px;padding:8px max(10px,var(--sa-r)) calc(8px + var(--sa-b)) max(10px,var(--sa-l));flex-wrap:nowrap}
  .bar button{flex:1 1 0;min-width:0;max-width:84px;min-height:56px;padding:8px 2px 7px;gap:5px;border-radius:16px}
  .bar button svg{width:22px;height:22px}
  .bar button span{font-size:13px;letter-spacing:.1em;padding-left:.1em}

  /* 顶部：标题与右侧记录不挤在一起 */
  .top{padding-top:10px;padding-left:max(12px,var(--sa-l));padding-right:max(12px,var(--sa-r));gap:8px}
  .temple-brand{flex:none}
  .right{flex:1 1 auto;min-width:0}
  .trow{flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .presence{text-align:right}
  #btnAcct{max-width:8.5em;letter-spacing:.04em}

  .hint{max-width:calc(100vw - 32px);border-radius:16px;padding:6px 12px}
  /* 触屏站立时，提示放在摇杆上方 */
  body.touch:not(.seated) .hint{bottom:calc(var(--bar-h,80px) + 136px)}
  #joy{width:112px;height:112px;left:max(16px,calc(var(--sa-l) + 8px))}
  #joy i{left:36px;top:36px}

  .muyu{right:max(8px,var(--sa-r));width:164px;bottom:calc(var(--bar-h,80px) + 10px)}
  .snd-pop{left:max(8px,var(--sa-l));right:max(8px,var(--sa-r));width:auto;max-width:none;bottom:calc(var(--bar-h,80px) + 10px)}
  /* 声音面板铺满宽度：木鱼叠在它上方 */
  body:has(.snd-pop.show) .muyu{right:max(8px,var(--sa-r));bottom:calc(var(--bar-h,80px) + var(--snd-h,240px) + 18px)}
  .notice{bottom:calc(var(--bar-h,80px) + 12px)}

  .hud{top:calc(96px + var(--sa-t))}
  .pill{top:calc(100px + var(--sa-t))}
}
@media (max-width:359px){
  .bar{gap:4px}
  .bar button span{font-size:12px;letter-spacing:.04em;padding-left:.04em}
  button.stats{font-size:11px;padding:5px 8px}
}

/* —— 5. 矮屏（横屏手机等）：底栏单行、图标与文字并排 —— */
@media (max-height:500px){
  .bar{flex-wrap:nowrap;gap:6px;padding-top:6px;padding-bottom:calc(6px + var(--sa-b))}
  .bar button{flex-direction:row;min-width:0;min-height:44px;padding:6px 12px;gap:6px;border-radius:14px;white-space:nowrap;flex:0 1 auto}
  .bar button svg{width:18px;height:18px}
  .bar button span{font-size:12px;letter-spacing:.08em}
  .top{padding-top:8px}
  .title{font-size:17px}
  .hud{top:calc(10px + var(--sa-t))}
  .time{font-size:28px}
  .bcirc{width:46px;height:46px;margin-top:4px}
  .pill{top:calc(76px + var(--sa-t))}
  #joy{width:100px;height:100px;bottom:calc(var(--bar-h,56px) + 10px)}
  #joy i{left:30px;top:30px}
  body.touch:not(.seated) .hint{bottom:calc(var(--bar-h,56px) + 10px)}
  .hint{max-width:calc(100vw - 2 * (max(20px,var(--sa-l)) + 120px));font-size:13px;border-radius:16px}
  .muyu{width:170px}
  .mu-tip{display:none}
  .snd-pop{padding:10px 12px 12px}
  .snd-grid{grid-template-columns:repeat(8,1fr);gap:6px}
  .snd-grid button{min-height:0;padding:7px 0 6px;font-size:11px}
  .snd-grid button svg{width:18px;height:18px}
  .snd-pop{width:min(520px,calc(100vw - 32px))}
  body:has(.snd-pop.show) .muyu{opacity:0;pointer-events:none}
  .card{padding:16px 18px}
  .card h2{margin-bottom:8px}
  /* 抽签签文在矮屏上收小 */
  .q-title{font-size:19px;margin:8px 0 4px}
  .q-poem{gap:12px;padding:8px 4px;margin:2px auto 8px}
  .q-poem span{font-size:16px;letter-spacing:.22em}
  .q-sec p{font-size:13px;line-height:1.7}
  .q-lead{font-size:14px;line-height:1.7}
  .q-acts{margin-top:10px}
  .q-today{margin-top:10px}
  .qw-k{margin-bottom:2px}
  .qw-pos{font-size:18px}
  .qw-pos b{font-size:26px}
}
@media (max-height:500px) and (max-width:720px){
  .bar{gap:5px}
  .bar button{padding:6px 8px;gap:4px}
  .bar button span{letter-spacing:.04em;padding-left:0}
}
/* 矮且窄（极小屏横竖都挤）：底栏只显示图标 */
@media (max-height:500px) and (max-width:599px){
  .bar button{flex-direction:column;gap:3px;min-height:48px;padding:5px 2px}
}
/* 横屏手机：签文与按钮左右排开，减少滚动 */
@media (max-height:500px) and (min-width:600px){
  .q-result{display:grid;grid-template-columns:auto minmax(180px,260px);grid-template-areas:"slip today" "slip acts" "slip foot";column-gap:28px;align-items:center;align-content:center}
  .q-slip{grid-area:slip;width:min(340px,48vw)}
  .q-today{grid-area:today;align-self:end}
  .q-acts{grid-area:acts;flex-wrap:wrap}
  .q-foot{grid-area:foot;align-self:start}
}
/* 平板及以上触屏：摇杆稍大一些，与桌面保持一致 */
@media (min-width:600px) and (min-height:501px){
  #joy{bottom:calc(var(--bar-h,80px) + 14px)}
}