/* ===== 乐谱跳动 · 手机全屏/横屏增强 (V1) ===== */

/* 全屏悬浮按钮 */
#pianoFsBtn {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(200px + env(safe-area-inset-bottom));
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--line, #e4e7df);
  background: var(--surface, #fff);
  color: var(--ink, #252c29);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(30, 50, 40, .14);
  opacity: .92;
}
#pianoFsBtn:active { transform: scale(.96); }
#pianoFsBtn .icon { width: 17px; height: 17px; }
#pianoFsBtn.is-on {
  background: var(--accent, #246653);
  color: var(--on-accent, #fff);
  border-color: transparent;
}

/* 首次进入的全屏引导条 */
#pianoFsTip {
  position: fixed;
  left: 50%;
  bottom: calc(210px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 901;
  max-width: 86vw;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(37, 44, 41, .92);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  animation: pianoFsTipIn .3s ease;
}
@keyframes pianoFsTipIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* 全屏模式下隐藏悬浮按钮以外的干扰，利用整个屏幕 */
body.piano-fullscreen .appShell {
  max-width: none;
}

/* ===== 手机竖屏紧凑化：让小屏也铺满 ===== */
@media (max-width: 480px) {
  :root { --page-width: 100vw; }
  .appShell { max-width: 100vw; }
  .header { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .main { padding-left: 10px; padding-right: 10px; }
}

/* ===== 横屏模式：谱面最大化 ===== */
@media (orientation: landscape) and (max-height: 620px) {
  :root { --dock-height: 132px; }
  .header { min-height: 40px; padding-top: 2px; padding-bottom: 2px; }
  .header h1 { font-size: 15px; }
  .pieceIntro { padding-top: 4px; padding-bottom: 4px; }
  .pieceIntro .sub, .pieceIntro .eyebrow { display: none; }
  .pieceTitle h2 { font-size: 16px; }
  .viewSwitch { padding-top: 2px; padding-bottom: 2px; }
  .viewSwitch button { min-height: 34px; padding: 5px 10px; font-size: 12px; }
  .scoreTools { padding-top: 2px; padding-bottom: 2px; }
  .scoreHint { padding-top: 0; padding-bottom: 0; font-size: 11px; }
  .practiceDock { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .practiceDock .quickControls { flex-wrap: nowrap; }
  .practiceDock .pill { min-height: 34px; padding: 5px 10px; font-size: 12px; }
  .practiceDock .action { min-height: 38px; }
  .practiceDock .message { display: none; }
  .dockStatus { font-size: 11px; }
  #pianoFsBtn { bottom: calc(140px + env(safe-area-inset-bottom)); }
  .scoreFrame { min-height: 0; }
  .detailLink { display: none; }
}

/* 横屏 + 全屏时，谱面区域进一步放大 */
body.piano-fullscreen .scorePanel { flex: 1 1 auto; }
body.piano-fullscreen .scoreFrame { flex: 1 1 auto; }

/* iOS 软横屏（旋转变换方案）：JS 会给 body 加 .piano-soft-landscape */
body.piano-soft-landscape {
  overflow: hidden;
}
body.piano-soft-landscape .appShell {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vw;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  z-index: 800;
  background: var(--bg, #f6f5f1);
}
body.piano-soft-landscape .modal,
body.piano-soft-landscape #toast,
body.piano-soft-landscape #pianoFsBtn,
body.piano-soft-landscape #pianoFsTip {
  /* 弹层保持竖屏方向，避免双重旋转造成操作困难 */
  z-index: 1200;
}

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  #pianoFsTip { animation: none; }
}

/* ===== V2 · 小屏/内嵌浏览器铺满修复 ===== */
/* 高度回退链：老内核吃 100vh，新内核用 svh/dvh，最后由 JS 写入 --app-height 兜底 */
.appShell{
  height:100vh;
  height:100svh;
  height:100dvh;
  height:var(--app-height,100dvh);
  min-height:100vh;
  min-height:100svh;
}
html,body{height:100%;overscroll-behavior:none}
/* 部分内置浏览器（AI助手/社交App内嵌）忽略 viewport 导致整体缩成一点点：
   JS 检测后会修复 meta，并给 html 加 .piano-vp-fixed，这里保证重排后占满 */
html.piano-vp-fixed body{position:relative;width:100%}

/* ===== V3 · 软横屏下弹层/提示跟随旋转 ===== */
body.piano-soft-landscape .modal.open{
  position:fixed;top:50%;left:50%;
  width:100vh;height:100vw;
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center center;
  z-index:1100;
}
body.piano-soft-landscape #toast{
  position:fixed;top:auto;bottom:auto;
  left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(90deg) translateY(calc(40vw - 40px));
  z-index:1200;max-width:80vh;
}
/* 横屏时谱面工具条单行排列，减少换行挤压谱面 */
@media (orientation:landscape) and (max-height:620px){
  .scoreTools{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .scoreTools::-webkit-scrollbar{display:none}
  .sheet{max-height:92vh}
}

/* ===== V4 · 识谱上传优化提示条 ===== */
#rbHint{
  margin:6px 2px 0;font-size:12px;line-height:1.5;
  color:var(--soft,#7a857f);display:none;
}
#rbHint.show{display:block}
#rbHint.ok{color:#2e7d5b}
#rbHint.warn{color:#b0782a}
#rbHint .rb-elapsed{font-variant-numeric:tabular-nums;font-weight:600}

/* ===== V6 · 细节打磨 ===== */
@media (prefers-reduced-motion:reduce){
  #pianoFsBtn{transition:none}
}
html[data-theme="dark"] #pianoFsBtn{
  background:#1c2422;color:#e8eeeb;border-color:rgba(255,255,255,.12);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
html[data-theme="dark"] #pianoFsBtn.is-on{background:#35e0d0;color:#06131a}
html[data-theme="dark"] #pianoFsTip{background:rgba(230,238,234,.94);color:#131a18}
/* 软横屏下隐藏「全屏横屏」按钮以外的悬浮引导，避免遮挡谱面 */
body.piano-soft-landscape #pianoFsTip{z-index:1300}

/* ===== V10 · 锁屏防拖动 + 深色浏览器护谱 ===== */
html, body { overscroll-behavior: none !important; }

/* 谱面图片永远垫白底：
   部分国产浏览器“夜间模式”会反色页面 CSS（把 --paper 变深），
   但 <img> 里的 SVG 不反色，黑谱线落在深底上就像罩了一层黑罩 */
#scoreImgs img, .scorePage img, .scorePage svg, .scoreFrame svg {
  background: #ffffff !important;
}
/* 核对弹窗里的“对照原图”同样垫白，避免暗图上半透明层显得更脏 */
.modal img { background: #ffffff; }

/* ===== V12: 夸克/UC 悬浮工具栏适配 + 谱面防滤镜调暗 ===== */
/* 夸克/UC 等浏览器底部工具栏悬浮遮挡网页：UA 命中时 html.uaBar 抬高底部内容 */
.uaBar .practiceDock { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
.uaBar .sheet { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
.uaBar #pianoFsBtn { bottom: calc(256px + env(safe-area-inset-bottom)); }
.uaBar #pianoFsTip { bottom: calc(266px + env(safe-area-inset-bottom)); }
/* 防止浏览器夜间模式用滤镜调暗谱面图片（黑谱线压深底的根因之一） */
#scoreImgs img, .scorePage img, .scorePage svg, .scoreFrame svg {
  filter: none !important;
  -webkit-filter: none !important;
}