/* 外壳：竖屏手机优先的地基（docs/MOBILE_UI_PLAN.md 第 5 节）。尺寸与安全区、触控规范、键盘、两种浮层、横屏提示。
   放在 game.css、guide.css 之后加载，同名规则以这里为准。 */

:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --kb: 0px; /* 软键盘挡住的高度，platform.js 写 */
  --tap: 44px; /* 手指点得准的最小边长 */
  --fs-body: 16px;
  --fs-2: 14px;
  --fs-note: 12px;
}

/* ——尺寸：跟着地址栏伸缩的真实可视高度—— */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
/* 不许下拉刷新、不许整页回弹；长按不弹系统菜单 */
html, body { overscroll-behavior: none; }
body { -webkit-touch-callout: none; }
.desk, .rail, .feed-list, .decree-wrap, .modal-box, .scr-chapter, .scr-ending, .sh-body, .pg-body { overscroll-behavior: contain; }

/* ——触控：输入框小于 16px，iOS 一聚焦就整页放大—— */
@media (pointer: coarse) {
  .aud-form input, .summon input, .auth input, .ed-ta, .yt-back textarea { font-size: 16px; }
}

/* ——安全区：刘海、灵动岛、圆角—— */
#toasts { top: calc(14px + var(--safe-t)); }
.modal-wrap { padding-top: max(20px, calc(var(--safe-t) + 12px)); }
.decree-wrap { padding-top: max(20px, calc(var(--safe-t) + 12px)); }
@media (max-width: 1100px) {
  .feeds { padding-top: var(--safe-t); }
}

/* ——软键盘弹起：贴底的东西往上让—— */
.aud-box { bottom: max(calc(3vh + var(--safe-b)), calc(var(--kb) + 8px)); }
.modal-wrap, .decree-wrap { padding-bottom: max(20px, calc(var(--kb) + 16px)); }
@media (max-width: 860px) {
  .aud-box { bottom: max(calc(1vh + var(--safe-b)), calc(var(--kb) + 8px)); }
}

/* ——御案抽屉的遮罩：抽屉开着时压暗御案，点一下收起—— */
.scr-court > .scrim { display: none; }
@media (max-width: 1100px) {
  .scr-court:has(.court-rail.open, .feeds.open) > .scrim { display: block; position: fixed; inset: 0; z-index: 7; background: rgba(4, 3, 2, 0.6); animation: scrimIn 0.3s ease both; }
}
@keyframes scrimIn { from { opacity: 0; } }

/* ——两种浮层（js/sheet.js）—— */
.sheet-wrap, .page-wrap { position: fixed; inset: 0; z-index: 16; display: flex; justify-content: center; background: rgba(4, 3, 2, 0.72); }
.sheet-wrap { align-items: flex-end; }

/* 底部抽屉：半屏起，full 为整屏（让出顶部安全区） */
.sheet {
  position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: 62dvh;
  padding: 0 var(--safe-r) 0 var(--safe-l); border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #1e140e, #120c08); border: 1px solid var(--gold-dim); border-bottom: 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(242, 207, 122, 0.12);
}
.sheet.full { max-height: calc(100dvh - var(--safe-t) - 12px); height: calc(100dvh - var(--safe-t) - 12px); }
.sh-head { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 16px 6px; touch-action: none; cursor: grab; }
.sh-grip { width: 40px; height: 5px; border-radius: 3px; background: rgba(239, 228, 204, 0.25); }
.sh-title { margin: 2px 0 0; font: 400 20px/1.3 var(--f-brush); color: var(--gold-bright); letter-spacing: 0.3em; }
.sh-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px calc(16px + max(var(--safe-b), var(--kb))); }

/* 全屏页：左上返回，正文单独滚，底部操作条贴着拇指 */
.page-wrap { align-items: stretch; background: var(--ink); }
.page {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  padding: var(--safe-t) var(--safe-r) 0 var(--safe-l);
  background: radial-gradient(ellipse at 50% 0%, rgba(122, 23, 18, 0.18), transparent 60%), linear-gradient(180deg, #1a110c, #0d0907);
}
.pg-head { flex: none; display: grid; grid-template-columns: var(--tap) 1fr var(--tap); align-items: center; min-height: 52px; padding: 0 6px; border-bottom: 1px solid var(--line); }
.pg-back { width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: transparent; color: var(--gold-bright); font: 32px/1 var(--f-serif); }
.pg-back:active { background: rgba(201, 161, 74, 0.12); }
.pg-title { margin: 0; text-align: center; font: 400 22px/1.2 var(--f-brush); color: var(--gold-bright); letter-spacing: 0.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 24px; font-size: var(--fs-body); }
.pg-foot {
  flex: none; display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  padding: 10px 16px calc(10px + max(var(--safe-b), var(--kb)));
  background: linear-gradient(0deg, rgba(8, 5, 4, 0.98), rgba(8, 5, 4, 0.9)); border-top: 1px solid var(--line);
}
.pg-foot .gbtn { min-height: var(--tap); }

/* 宽屏：全屏页收成居中的一栏，背后压暗（第 4 期再把常用的摊成侧栏） */
@media (min-width: 900px) and (min-height: 600px) {
  .page-wrap { align-items: center; padding: 4vh 16px; background: rgba(4, 3, 2, 0.78); }
  .page { width: min(760px, 100%); height: auto; max-height: 92vh; padding: 0; border: 1px solid var(--gold-dim); border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); overflow: hidden; }
  .sheet-wrap { align-items: center; }
  .sheet { border-radius: 8px; border-bottom: 1px solid var(--gold-dim); max-height: 80vh; }
  .sh-grip { display: none; }
  .sh-head { cursor: default; padding-top: 14px; }
}

/* 已批的奏本（御案上"已批"那一摞） */
.pile-sheet { display: flex; flex-direction: column; gap: 6px; }
.pile-sheet button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: var(--tap); padding: 10px 12px;
  border: 1px solid rgba(201, 161, 74, 0.14); border-radius: 4px; background: rgba(239, 228, 204, 0.04); text-align: left;
}
.pile-sheet button:active { background: rgba(179, 38, 30, 0.2); }
.pile-sheet b { font-weight: 600; font-size: 15px; }
.pile-sheet small { color: var(--dim); font-size: 12.5px; }

/* ——手机横着拿：请竖过来—— */
#turn { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #turn {
    position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(ellipse at center, #1a0f0b, var(--ink) 70%); color: var(--gold-bright);
  }
  #turn .seal { animation: turnPhone 2.4s var(--out) infinite; }
  #turn p { margin: 0; font-size: 15px; letter-spacing: 0.4em; color: var(--paper); }
}
@keyframes turnPhone { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(-4deg); } }

/* ——省电（第 5 期）：手机上不做毛玻璃（整屏 backdrop-filter 每帧重算，发热掉帧），底色加深补回去—— */
@media (pointer: coarse) {
  .modal-wrap, .wish-deal { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .modal-wrap { background: rgba(4, 3, 2, 0.88); }
}
.resizing *, .resizing *::before, .resizing *::after { transition: none !important; }