/* 竖屏手机适配（宽度 ≤ 767px，与 device.mjs 一致）。桌面布局留在各页面样式中，这里只做覆盖。
   背景原画按高度铺满后裁切，原画上画好的按钮与画框改为真实控件；背景、人物与界面分层，便于后续加入人物动画。 */
.paper-divider,.ref-mobile-title,.selection-swipe-hint,#rotate-hint{display:none}

@media (max-width:767px){
  :root{--sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px);--sa-r:env(safe-area-inset-right,0px);--top-bar:calc(var(--sa-t) + .6rem)}
  body{display:block;min-height:100dvh}
  #app{width:100%;min-height:100dvh}
  .stage{width:100%;height:100vh;height:100dvh;aspect-ratio:auto;min-height:0}
  .stage>.scene{object-fit:cover}
  .ghost{min-height:36px}
  /* 声音按钮移到右上角，面板向下展开；各页右上角控件为它让出位置。 */
  #sound-control{left:auto;right:calc(var(--sa-r) + .6rem);bottom:auto;top:var(--top-bar)}
  .sound-toggle{width:36px;height:36px}
  .sound-panel{left:auto;right:0;bottom:auto;top:44px}
  #toast{bottom:calc(var(--sa-b) + 1.2rem)}

  /* 首页：竖版阳台底图，标题与菜单项为美术分层切图；选中项（按下时，默认开始占卜）衬一条渐隐的高亮带。 */
  .stage.home{--row-w:min(80vw,21rem);height:auto;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:calc(var(--row-w) * .1);padding:calc(var(--sa-t) + 3.5rem) calc(var(--sa-r) + 1rem) calc(var(--sa-b) + 4.5rem) calc(var(--sa-l) + .2rem)}
  .home>.scene{position:fixed;content:url('/assets/scenes/home-mobile.webp');object-position:center}
  .stage.home::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,#0b0c1ccc 0,#0b0c1c99 45%,#0b0c1c33 75%,transparent),linear-gradient(#0b0c1c99,transparent 40%,#0b0c1c80)}
  .home-title{display:block;width:min(74vw,20rem);margin:0 0 calc(var(--row-w) * .12) calc(var(--row-w) * .02)}
  .home-title img{display:block;width:100%;height:auto}
  .home-link{position:relative;left:auto;top:auto;width:calc(var(--row-w) * 545 / 492);height:auto;padding:calc(var(--row-w) * 18 / 492) 0 calc(var(--row-w) * 18 / 492) calc(var(--row-w) * 53 / 492)}
  .home-link::before{background:linear-gradient(90deg,#1e1e29 0,#393944f7 12.5%,#85858dc2 40%,#85858c6e 68%,#85858c00 96%)}
  .home:has(.home-link:active) .home-link:not(:active)::before{opacity:0}
  .home-link:active::before{opacity:1}
  .home-row{position:relative;display:block;width:var(--row-w);height:auto}
  .home-tools{position:fixed;left:auto;right:calc(var(--sa-r) + 1rem);bottom:calc(var(--sa-b) + 1.2rem)}
  .home-note{display:none}

  /* 开场：画面比屏幕宽，镜头随点亮步骤平移到当前光源（烛光 → 水晶球 → 全景）。 */
  .entrance-stage{height:100dvh}
  .entrance-canvas{inset:0 auto 0 0;width:177.7778vh;width:177.7778dvh;height:100vh;height:100dvh;--fx:.074;transform:translateX(clamp(calc(100vw - 177.7778dvh),calc(50vw - var(--fx) * 177.7778dvh),0px));transition:transform 1.8s cubic-bezier(.45,0,.2,1)}
  .entrance-stage[data-phase="1"] .entrance-canvas{--fx:.91}
  .entrance-stage[data-phase="2"] .entrance-canvas,.entrance-stage[data-phase="3"] .entrance-canvas,.entrance-video-mode .entrance-canvas{--fx:.5}
  .entrance-stage .entrance-exit{top:var(--top-bar);left:calc(var(--sa-l) + .4rem)}
  .entrance-stage .entrance-skip{top:var(--top-bar);right:calc(var(--sa-r) + 3.4rem)}
  .entrance-stage .entrance-hint{bottom:calc(var(--sa-b) + 12%);font-size:.9rem}

  /* 对话与提问：占卜师居中，对话框和输入区改为底部的真实控件。 */
  .stage.room-stage{container-type:normal;height:100dvh;aspect-ratio:auto}
  .room-stage>.scene{object-fit:cover;object-position:52% 30%}
  .room-stage::after{content:'';position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,#0a0b1ae6 70%);pointer-events:none}
  .room-back{left:calc(var(--sa-l) + .75rem);top:var(--top-bar);font-size:.85rem;padding:.5rem .9rem}
  .room-frame{display:none}
  .dialog-overlay{inset:auto calc(var(--sa-r) + .75rem) calc(var(--sa-b) + 1.25rem) calc(var(--sa-l) + .75rem);z-index:1}
  .dialog-name{left:1.1rem;top:-1.05rem;width:auto;z-index:2;padding:.25rem 1.1rem;font:1rem var(--serif);letter-spacing:.2em;background:linear-gradient(90deg,#6f5ca6,#4a3d7a);border:1px solid #cdb9ff88;border-radius:1rem;box-shadow:0 4px 12px #0007}
  .dialog-next,.dialog-thinking{position:relative;left:auto;top:auto;width:100%;height:auto;min-height:8rem;margin:0;padding:1.6rem 1.3rem 1.4rem;font:1.05rem/1.85 var(--serif);letter-spacing:.06em;color:#f2e9fa;text-align:left;background:linear-gradient(160deg,#4b3d7ae0,#262046f0);border:1px solid #c9b6ff70;border-radius:18px;box-shadow:0 12px 32px #000a,inset 0 0 30px #b9a2ff1f}
  .dialog-next::after{content:'▾';position:absolute;right:1rem;bottom:.5rem;color:#e7dcff;animation:dialog-more 1.4s ease-in-out infinite}
  @keyframes dialog-more{50%{translate:0 .2rem;opacity:.5}}
  .farewell-dialog{font-size:1rem;gap:.6rem}
  .farewell-dialog::after{content:none}
  .question-stage .room-question-form{inset:auto calc(var(--sa-r) + .75rem) calc(var(--sa-b) + 1.25rem) calc(var(--sa-l) + .75rem);z-index:1;display:flex;flex-direction:column;gap:.75rem;padding:1.1rem 1rem 1rem;background:linear-gradient(160deg,#4b3d7ae6,#262046f2);border:1px solid #c9b6ff70;border-radius:18px;box-shadow:0 12px 32px #000a}
  .room-question-form::before{content:'写下你想询问的问题';font:1.02rem var(--serif);letter-spacing:.14em;color:#efe6ff}
  .room-question-form textarea{position:static;width:100%;height:7rem;padding:.8rem .9rem;border:1px solid #b9a3ec66;border-radius:12px;background:#17122ccc;font:1rem/1.7 var(--serif);color:#f6edff}
  .room-question-form textarea:focus-visible{border-color:#e3d4ff}
  .room-count{position:static;width:auto;align-self:flex-end;margin-top:-.4rem;font-size:.78rem}
  .room-question-form .error{position:static;width:auto;font-size:.85rem}
  .room-submit{position:static;width:100%;height:3.2rem;color:#fff0ff;border:1px solid #e3d5ff99;border-radius:2rem;background:linear-gradient(110deg,#6e54c2,#a58cf0 50%,#6e54c2);font:1.25rem var(--serif);letter-spacing:.32em;box-shadow:0 0 20px #a88cff55}

  /* 牌桌（牌阵介绍 / 选牌 / 入阵）：桌面原画铺满，标题在上、操作在下。 */
  .reference-table{height:100dvh;aspect-ratio:auto;container-type:normal}
  .reference-table>.scene{object-fit:cover}
  .table-back{left:calc(var(--sa-l) + .75rem);top:var(--top-bar);font-size:.85rem;padding:.5rem .9rem}
  .table-heading{top:calc(var(--sa-t) + 3.6rem);left:1rem;right:1rem;width:auto;padding:.7rem .9rem;background:linear-gradient(90deg,transparent,#10142699 15%,#10142699 85%,transparent)}
  .table-heading h2{font-size:1.3rem;margin-bottom:.3rem}
  .table-heading p{font-size:.95rem;max-height:none}
  .table-heading small{font-size:.8rem}
  .table-proceed{bottom:calc(var(--sa-b) + 1.6rem);font-size:1.05rem;padding:.8em 2.6em}
  .table-position{font-size:.72rem;padding:.1rem .35rem}
  .table-error{left:1rem;right:1rem;bottom:calc(var(--sa-b) + 5rem);max-width:none}
  /* 选牌：78 张牌叠成横向牌带，左右滑动，越靠近中间的牌越大。 */
  .selection-swipe-hint{display:block;position:absolute;left:0;right:0;bottom:calc(var(--sa-b) + 18.4rem);margin:0;text-align:center;font-size:.85rem;letter-spacing:.2em;color:#d9cbe8;text-shadow:0 1px 6px #000}
  .selection-fan{inset:auto 0 calc(var(--sa-b) + 6rem);height:12rem;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;padding:0 calc(50vw - 2.6rem);pointer-events:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .selection-fan::-webkit-scrollbar{display:none}
  .selection-pick{position:relative;left:auto!important;top:auto!important;flex:none;width:5.2rem;height:7.8rem;margin-inline:-1.55rem;transform:none;scale:calc(.82 + var(--near,0) * .36);translate:0 calc(var(--near,0) * -.9rem);box-shadow:0 4px 10px #000b}
  .selection-pick:not(:disabled):hover,.selection-pick:not(:disabled):focus-visible{scale:calc(.82 + var(--near,0) * .36)}
  .selection-pick.is-chosen,.selection-pick:disabled.is-chosen{translate:0 calc(var(--near,0) * -.9rem - 1.4rem)}
  .selection-order{display:none}
  .is-dealing .selection-pick{animation:strip-deal .5s ease-out var(--deal-delay) both}
  @keyframes strip-deal{from{opacity:0;translate:0 2.5rem}}
  .selection-shuffle{top:auto;bottom:calc(var(--sa-b) + 8.1rem);width:5.2rem;height:7.8rem;translate:-50% 0}
  .selection-chosen{left:1rem;right:1rem;width:auto;top:auto;bottom:calc(var(--sa-b) + 20.6rem);height:6.4rem;gap:.6rem}
  .selection-chosen-card{width:3.4rem}
  .selection-chosen-card span{font-size:.7rem}
  .selection-proceed{top:auto;bottom:calc(var(--sa-b) + 1.4rem);font-size:1.05rem;padding:.75em 2.4em}

  /* 解读页：整页上下滚动，上方牌阵、下方拼接成长卷的纸张。 */
  .reading-room{display:block;width:100%;height:100vh;height:100dvh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--sa-t) + .4rem) calc(var(--sa-r) + .75rem) calc(var(--sa-b) + 1.5rem) calc(var(--sa-l) + .75rem);--caption-h:2.5rem;--gap-y:.5rem;--gap-x:.55rem;--pw:calc(100vw - 1.5rem - var(--sa-l) - var(--sa-r))}
  .reading-backdrop,.reading-room::before{position:fixed}
  .reading-table{height:min(66dvh,150vw);min-height:22rem}
  .reading-heading{padding-top:.2rem}
  .reading-heading h1{font-size:1.35rem}
  .reading-heading p{margin-top:.15em;font-size:.7rem}
  .spread-slot figcaption span{font-size:.66rem;letter-spacing:.06em}
  .spread-slot figcaption strong{font-size:clamp(.66rem,3.1vw,.78rem);letter-spacing:0}
  .reading-hint{min-height:2.4rem;gap:.6rem;font-size:.8rem}
  .reading-side{display:block}
  .reading-close{position:fixed;top:var(--top-bar);right:calc(var(--sa-r) + 3.3rem);z-index:20;display:grid;place-items:center;width:36px;height:36px;min-height:0;padding:0;border-radius:50%;font-size:0}
  .reading-close::after{content:'✕';font-size:.95rem;color:var(--ink)}
  .paper-slot{display:block;container-type:normal}
  .reading-paper{width:100%;min-height:calc(var(--pw) * 1.2);aspect-ratio:auto;container-type:normal;display:flex;flex-direction:column;padding:calc(var(--pw) * .068) calc(var(--pw) * .09) calc(var(--pw) * .2) calc(var(--pw) * .1);background:none;filter:none;font-size:16px;border-style:solid;border-width:0;border-image-source:url('/assets/reading-paper-mobile.webp');border-image-slice:280 0 296 0 fill;border-image-width:calc(var(--pw) * 280 / 839) 0 calc(var(--pw) * 296 / 839) 0;border-image-repeat:round}
  .paper-meta,.paper-question,.paper-toc,.paper-scroll{position:static;left:auto;top:auto;width:auto;height:auto;max-height:none;overflow:visible}
  .paper-meta{margin-left:calc(var(--pw) * .14);font-size:.8rem}
  .paper-question{display:block;-webkit-line-clamp:unset;margin:calc(var(--pw) * .045) 0 0 calc(var(--pw) * .14);font-size:1.02rem}
  .paper-toc{margin-top:1.1rem;gap:.5rem .6rem;align-content:start}
  .toc-row{min-width:0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .toc-row::-webkit-scrollbar{display:none}
  .toc-item{flex:none;white-space:nowrap;padding:.25rem .6rem;font-size:.95rem}
  .paper-divider{display:block;height:calc(var(--pw) * 32 / 839);margin:.9rem 0;background:url('/assets/paper-divider.webp') center/100% 100% no-repeat;mix-blend-mode:darken}
  .paper-scroll{padding:0;-webkit-mask-image:none;mask-image:none}
  .paper-copy .chapter-text{font-size:1.05rem}
  .reading-room .ref-result-menu{position:relative;left:auto;right:auto;bottom:auto;margin-top:1.6rem;font-size:.9rem}
  .reading-room .ref-result-tools{left:0;right:0;max-height:70dvh}
  .ink-hint{position:fixed;left:50%;bottom:calc(var(--sa-b) + 1rem);translate:-50% 0;padding:.35rem 1rem;border-radius:1rem;background:#ece3f2e6;box-shadow:0 4px 14px #0006;font-size:.82rem;white-space:nowrap}

  /* 每日一抽 / 历史 / 收藏 / 今日牌面：阳台底图 + 与原画风格一致的面板，内容按顺序排布。 */
  .stage.reference-stage{height:auto;min-height:100dvh;overflow:visible}
  .reference-canvas{aspect-ratio:auto;min-height:100dvh;container-type:normal;font-size:16px;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:calc(var(--sa-t) + 5.2rem) calc(var(--sa-r) + 1.6rem) calc(var(--sa-b) + 2.4rem) calc(var(--sa-l) + 1.6rem)}
  .reference-canvas::before{content:'';position:absolute;inset:calc(var(--sa-t) + 3.4rem) calc(var(--sa-r) + .75rem) calc(var(--sa-b) + 1rem) calc(var(--sa-l) + .75rem);z-index:-1;border:1px solid #bc9f73;border-radius:22px;background:radial-gradient(ellipse at 15% 0,#34314ef2,#1a1f34f5 65%);box-shadow:0 0 0 4px #151a2bcc,0 0 0 5px #7d6b5099,0 25px 70px #03081780}
  .reference-scene{position:fixed;z-index:-2;content:url('/assets/scenes/entrance.webp');object-fit:cover;object-position:64% center;filter:brightness(.5) blur(2px);transform:scale(1.04)}
  .ref-mobile-title{display:block;margin:0 0 .4rem;text-align:center;font-size:1.6rem;letter-spacing:.3em;color:#f0dfc5}
  .ref-mobile-title::before{content:'☾';display:block;margin-bottom:.2rem;font-size:1rem;color:var(--gold)}
  .ref-mobile-title small{display:block;margin-top:.5rem;font-size:.8rem;letter-spacing:.2em;color:#c5bed0}
  .ref-hotspot.ref-close{left:auto;top:calc(var(--sa-t) + 4rem);right:calc(var(--sa-r) + 1.4rem);width:2.4rem;height:2.4rem;border:1px solid #bda77f;border-radius:50%;background:#1d2034;color:#ead8b6}
  .ref-hotspot.ref-close::after{content:'×';position:absolute;inset:0;display:grid;place-items:center;font-size:1.4rem;line-height:1;color:#ead8b6}
  .ref-daily-card{position:static;width:46%;max-width:12rem;height:auto;aspect-ratio:2/3;margin-top:.6rem;border-radius:10px;box-shadow:0 12px 30px #000a}
  .ref-daily-date{position:static;width:auto;font-size:.9rem}
  .ref-daily .ref-daily-button{position:static;width:min(100%,16rem);height:3.2rem;border-radius:2rem;font-size:1.05rem}
  .ref-daily-note{position:static;width:auto;font-size:.82rem;text-align:center}
  .ref-history .reference-canvas{align-items:stretch}
  .ref-history-row,.ref-history-row.row-0,.ref-history-row.row-1,.ref-history-row.row-2{position:relative;left:auto;top:auto;width:100%;height:auto;display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.65rem 0;border-bottom:1px solid #bda47d40}
  .ref-history-card{position:static;width:100%;height:auto;aspect-ratio:2/3;border:1px solid #bda47d;border-radius:4px;overflow:hidden}
  .ref-history-copy{position:static;width:auto;height:auto;min-width:0;background:none;box-shadow:none;gap:.3em}
  .ref-history-copy strong{font-size:.92rem}
  .ref-history-copy span{font-size:.85rem;color:#d8cfe0}
  .ref-history-open{position:static;width:auto;height:auto;padding:.5rem .2rem;background:none;font-size:.85rem}
  .ref-history-empty{position:static;grid-column:1/-1;padding:1.2rem 0;background:none;text-align:center}
  .ref-pagination{position:static;width:auto;height:auto;margin-top:.4rem;background:none;font-size:.9rem}
  .ref-storage-note{position:static;width:auto;font-size:.75rem;text-align:center}
  .ref-empty-start{position:static;width:auto;height:auto;align-self:center;padding:.7rem 1.8rem;border-radius:2rem}
  .ref-collection .reference-canvas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;align-items:start;column-gap:.7rem;row-gap:1rem}
  .ref-collection .reference-canvas>:not(.ref-collection-slot){grid-column:1/-1;justify-self:center}
  .ref-collection-slot,.ref-collection-slot.slot-0,.ref-collection-slot.slot-1,.ref-collection-slot.slot-2{position:relative;left:auto;top:auto;width:auto;height:auto}
  .ref-collection-card,.ref-collection-slot.slot-1 .ref-collection-card{display:block;width:100%;height:auto;aspect-ratio:2/3;border-radius:6px}
  .ref-collection-caption,.ref-collection-slot.slot-1 .ref-collection-caption{position:static;width:auto;min-height:0;margin-top:.5rem;background:none;box-shadow:none;font-size:.78rem}
  .stage.ref-result.ref-result-daily{width:100%;height:auto;min-height:100dvh;aspect-ratio:auto}
  .ref-result-daily .ref-detail-cards{position:relative;left:auto;top:auto;flex:none;width:46%;max-width:12rem;height:auto;aspect-ratio:2/3}
  .ref-result-daily .ref-detail-cards::before{display:none}
  .ref-result-focused.ref-result-daily .ref-detail-card.is-focused{inset:0;width:100%;height:100%}
  .ref-result-daily .ref-focus-back{position:static}
  .ref-result-daily .ref-focus-hint{position:static;width:auto;font-size:.8rem}
  .ref-result-daily .ref-result-scroll{position:static;width:100%;height:auto;padding:0;overflow:visible;background:none;box-shadow:none;font-size:.95rem}
  .ref-result-daily .ref-result-menu{position:relative;left:auto;bottom:auto;width:100%}
  .ref-result-daily .ref-result-tools{left:0;right:0;width:auto;transform:none;max-height:60dvh}
  .ref-result-daily .ref-daily-button{position:static;width:min(100%,14rem);height:3rem;border:1px solid #cfa770;border-radius:2rem;background:radial-gradient(ellipse,#fffbed,#f6dfb9);color:#30291f}
  .ref-result-daily .ref-daily-button .sr-only{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;font-size:1.05rem;font-weight:600;letter-spacing:.3em}

  /* 设置等面板页：面板随内容增高，整页滚动。 */
  .stage.panel-stage{height:auto;min-height:100dvh;overflow:visible;padding:calc(var(--sa-t) + 4.2rem) calc(var(--sa-r) + .75rem) calc(var(--sa-b) + 1.5rem) calc(var(--sa-l) + .75rem)}
  .panel-stage>.scene,.panel-stage>.shade{position:fixed}
  .panel-stage .topbar{padding:var(--top-bar) calc(var(--sa-r) + 3.6rem) .6rem calc(var(--sa-l) + .75rem)}
  .panel,.panel.wide{position:relative;inset:auto;padding:1.5rem 1.1rem;border-radius:18px;overflow:visible}
  .panel h2{font-size:1.6rem;padding-right:1.5rem}
  .settings-row{gap:1rem}
  .skin-image{height:14rem}

  /* 分享图：长按保存（微信内无法直接下载）。 */
  .share-dialog{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 2rem);padding:1.1rem}
  .share-dialog>img{-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
  .share-save-hint{margin:.4rem 0 0;font-size:.9rem;color:var(--gold)}
}

/* 旧版内核（部分安卓微信）不支持容器查询单位时，牌高改按屏幕尺寸估算。 */
@supports not (container-type:size){
  @media (max-width:767px){.reading-room .spread-layout{--card-h:min(calc((min(66vh,150vw) - 9rem - var(--rows) * var(--caption-h)) / var(--rows)),calc((100vw - 3rem) / var(--cols) * 1.5))}}
}

/* 触屏没有悬停：去掉会“粘住”的悬停效果。 */
@media (hover:none){
  .reading-room .ref-detail-card:not(:disabled):hover{translate:none;filter:none;box-shadow:0 1rem 2rem #000b,0 0 0 1px #0007}
  button.toc-item:not(.is-active):hover{background:none;border-color:transparent}
}

/* 横屏手机：提示竖屏使用。 */
@media (orientation:landscape) and (max-height:500px) and (hover:none){
  #rotate-hint{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:#090e1cf7;color:var(--ink);text-align:center}
  #rotate-hint span{font-size:2rem;color:var(--gold)}
  #rotate-hint p{margin:0;font:1.2rem var(--serif);letter-spacing:.2em}
}