/* 御案·手机竖屏版（docs/MOBILE_UI_PLAN.md 第 3 节）。电脑版仍在 game.css；第 4 期两边合成一套。
   版面自上而下：顶栏（匾、银两、闻、更多）→ 天下条（精力、五剑、心愿）→ 风向条（只列告急的）→ 主区（朕的心事）
   → 奏匣标题行（未批、已批、暗匣）→ 横滑奏匣 → 底栏（群臣、降旨、密查、翻牌子、结束本月）。
   打开奏本铺满全屏，四颗批法按钮贴在拇指底下。 */

.m-only, .hand-bar { display: none; }

@media (max-width: 860px) {
  :root { --cw: min(96px, calc((100vw - 32px - 24px) / 4)); }

  .scr-court {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "hud" "realm" "desk" "handbar" "hand" "dock";
  }

  /* ——顶栏 + 天下条—— */
  /* 两行各排各的：上行匾、银两、按钮；下行精力、五剑、心愿。用折行的 flex，免得两行互相撑列宽 */
  .hud { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: calc(6px + var(--safe-t)) 10px 6px; }
  .hud::before { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .plaque { order: 1; }
  .treasury { order: 2; margin-left: auto; }
  .hud-btns { order: 3; }
  .flames { order: 5; }
  .swords { order: 6; flex: 1 1 0; }
  .hud-wish { order: 7; }
  .plaque { padding: 3px 28px 3px 8px; }
  .plaque b { font-size: 15px; letter-spacing: 0.02em; }
  .plaque small { font-size: 11px; }
  .treasury { gap: 0; justify-self: end; font-size: 12px; }
  .coin { gap: 4px; line-height: 1.35; }
  .coin b { font-size: 14px; min-width: 2.2em; }
  .hud-btns { gap: 6px; }
  .hud-btns [data-h="rail"] { display: none; }
  .ibtn { width: 40px; height: 40px; font-size: 17px; position: relative; }
  .flames { gap: 1px; height: 40px; align-self: end; }
  .flame { width: 6px; }
  .swords { gap: 0; justify-content: space-between; min-width: 0; }
  .sword { width: auto; flex: 1 1 0; min-width: 0; }
  .sw-art { height: 36px; width: 15px; }
  .sw-name { font-size: 11.5px; color: var(--text); opacity: 0.8; letter-spacing: 0.05em; }
  .hud-wish { grid-area: wish; align-self: center; width: 34px; padding: 3px; }

  /* ——风向条：平稳的收进「全部风向」，只把告急、不安的摆出来—— */
  .realm { gap: 6px; padding: 6px 10px; align-items: center; }
  .realm .chip { padding: 4px 10px; font-size: 13.5px; }
  .realm .chip em { color: #cbb994; }
  .realm > .chip.quiet { display: none; }
  .realm-all.m-only { display: inline-flex; position: sticky; right: 0; margin-left: auto; border: 1px solid rgba(201, 161, 74, 0.35); background: #120c08; box-shadow: -10px 0 12px #0b0806; }
  .realm-all b { color: var(--gold-bright); font-weight: 400; }

  /* ——主区：朕的心事—— */
  .desk { padding: 10px 12px 12px; }
  .desk-empty { position: relative; inset: auto; min-height: 100%; justify-content: flex-start; padding: 0; gap: 10px; }
  .desk-empty-seal { display: none; }
  .desk-empty > p { font-size: 12.5px; }
  .agenda-slot { width: 100%; }
  .ag-t { font-size: 15px; }
  .ag-go { min-height: 36px; padding: 4px 14px; font-size: 14px; }

  /* ——奏匣标题行：未批几本；已批、暗匣是右边两枚小签—— */
  .hand-bar { grid-area: handbar; display: flex; align-items: baseline; gap: 10px; padding: 6px 14px 0; z-index: 4; }
  .hand-bar b { font: 400 17px/1 var(--f-brush); color: var(--gold); letter-spacing: 0.2em; }
  .hb-n { font-size: 13px; color: var(--dim); }
  .scr-court .pile, .anxia {
    grid-area: handbar; position: relative; left: auto; right: auto; bottom: auto; justify-self: end; align-self: end;
    width: auto; height: 34px; margin: 0 12px 0 0; padding: 0 12px; z-index: 5;
    display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
    border: 1px solid rgba(201, 161, 74, 0.3); border-radius: 17px; background: rgba(18, 12, 8, 0.9);
  }
  .scr-court .pile { margin-right: 104px; }
  .pile-stack, .ax-box, .ui-leverage-box .anxia .ax-box { display: none; }
  .pile-n, .ax-n, .ui-leverage-box .ax-n { position: static; order: 2; margin: 0; padding: 0; min-width: 0; border: 0; background: none; font: 600 15px/1 var(--f-serif); color: var(--gold-bright); }
  .pile small, .anxia small { order: 1; padding: 0; background: none; font-size: 13px; color: var(--text); letter-spacing: 0.1em; }
  .anxia .ax-n { color: #e2c6ff; }
  .ax-r { display: none; }

  /* ——奏匣：一排横滑，不叠，题目完整—— */
  .hand {
    display: flex; gap: 8px; padding: 8px 16px 10px; overflow-x: auto; overflow-y: hidden; clip-path: none;
    scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .hand::-webkit-scrollbar { display: none; }
  .hand .mcard { position: relative; flex: none; transform: none; scroll-snap-align: start; transition: none; }
  .hand .bob { animation: none; }
  /* 牌身略高、上下两枚小签收紧，竖排题目一列能写三四个字 */
  .hand .mcard { height: calc(var(--cw) * 1.5); }
  .mface { padding: 6px 5px 5px; }
  .mk { font-size: 10.5px; line-height: 1.5; }
  .mt { margin: 4px 0; padding: 4px 3px; max-height: none; min-height: 0; font-size: 15px; line-height: 1.25; letter-spacing: 0; }
  .mf { font-size: 11px; line-height: 1.3; }
  .hand:empty::before { content: "奏匣已空。按住右下角「结束本月」。"; margin: auto; color: var(--faint); font-size: 13px; letter-spacing: 0.1em; }

  /* ——底栏—— */
  .dock { gap: 6px; padding: 6px 8px calc(8px + var(--safe-b)); align-items: center; }
  .dock .m-only { display: flex; }
  .dbtn { flex: 1 1 0; min-width: 0; width: auto; height: 56px; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 0; }
  .dbtn i { font-size: 20px; }
  .dbtn span { font-size: 12px; letter-spacing: 0.08em; white-space: nowrap; }
  .endbtn { flex: none; width: 68px; height: 68px; margin: -14px 0 0 2px; }
  .endbtn b { font-size: 15px; }

  /* ——抽屉：群臣、风闻从下往上拉，压暗御案—— */
  .court-rail, .feeds {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; height: min(74dvh, 680px); z-index: 8;
    padding: 0 0 var(--safe-b); border: 1px solid var(--gold-dim); border-bottom: 0; border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg, #1e140e, #0f0a07); box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.6);
    transform: translateY(105%); transition: transform 0.36s var(--out);
  }
  .court-rail.open, .feeds.open { transform: none; }
  .court-rail { display: flex; flex-direction: column; overflow-y: auto; padding: 0 12px var(--safe-b); }
  .court-rail::before, .feeds::before { content: ""; flex: none; align-self: center; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: rgba(239, 228, 204, 0.25); }
  .feeds::before { display: block; }
  .rail-title { margin: 4px 0 8px; }
  .summon { order: -1; margin: 0 0 10px; }
  .court-rail .rail-title { order: -2; }
  .tok { grid-template-columns: 44px 1fr; min-height: 56px; padding: 6px 10px; }
  .av { width: 44px; height: 44px; }
  .tn { font-size: 15px; }
  .tt { font-size: 12px; }
  .tok-i { min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; }
  .feed-tabs button { min-height: 44px; }
  .feed { font-size: 14px; }
  .feed small { font-size: 11.5px; }

  /* ——打开奏本：铺满全屏，四颗批法贴在拇指底下—— */
  .scr-court:has(.paper:not([hidden])) .desk {
    position: fixed; inset: 0; z-index: 9; padding: 0 0 calc(84px + max(var(--safe-b), var(--kb)));
    background: #1a110b; overflow-y: auto;
  }
  .scr-court:has(.paper:not([hidden])) .desk-empty { display: none; }
  .paper { max-width: none; min-height: 100%; margin: 0; padding: 0 18px 24px; border-radius: 0; box-shadow: none; }
  .paper::before { inset: 0 6px; border-top: 0; border-bottom: 0; }
  .p-head {
    position: sticky; top: 0; z-index: 4; margin: 0 -18px 6px; padding: calc(6px + var(--safe-t)) 10px 6px 18px;
    background: linear-gradient(180deg, #efe3c6 80%, rgba(239, 227, 198, 0.92)); border-bottom: 1px solid rgba(179, 38, 30, 0.18);
  }
  .paper.k-mi .p-head, .paper.k-cha .p-head { background: linear-gradient(180deg, #e3dccd 80%, rgba(227, 220, 205, 0.92)); }
  .p-x { width: 44px; height: 44px; font-size: 28px; }
  /* 表头挤：密折只留一个"密"字，文言/白话拨片收紧 */
  .p-secret i { display: none; }
  .wb-btn span { padding: 6px 8px; }
  .p-title { font-size: 25px; margin-top: 4px; }
  .p-body { font-size: 16px; line-height: 1.95; }
  .quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 10px; padding: 2px 18px; }
  .quick::-webkit-scrollbar { display: none; }
  .quick button { flex: none; min-height: 36px; padding: 4px 14px; font-size: 18px; }
  .zp-ta { min-height: 88px; }
  .zp-actions {
    position: fixed; left: 0; right: 0; bottom: var(--kb); z-index: 10; margin: 0;
    display: block;
    padding: 10px 12px calc(10px + var(--safe-b)); background: linear-gradient(0deg, rgba(10, 6, 4, 0.98), rgba(18, 12, 8, 0.95));
    border-top: 1px solid var(--gold-dim); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
  }
  .zp-actions .gbtn { width: 100%; min-height: 52px; padding: 4px 6px; font-size: 17px; letter-spacing: 0.25em; }
  .zp-actions .gbtn small { font-size: 11px; }
  .p-zhupi { padding: 18px 12px 12px; margin-top: 24px; }
  .pn-seal { width: 52px; height: 52px; }
  .aside-btn { min-height: 48px; }

  /* ——小金点限流：同屏最多两枚—— */
  .dot-wait[data-fresh]::after { display: none; }
}

/* ——更多、天下（js：openMoreSheet、openRealmSheet）：手机和平板横持都用这两张抽屉—— */
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.more-grid button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 92px; padding: 10px 4px;
  border: 1px solid rgba(201, 161, 74, 0.2); border-radius: 6px; background: rgba(239, 228, 204, 0.04);
}
.more-grid button:active { background: rgba(179, 38, 30, 0.2); }
@media (hover: hover) { .more-grid button:hover { border-color: var(--gold-bright); background: rgba(201, 161, 74, 0.1); } }
.more-grid i { font: normal 26px/1.2 var(--f-brush); color: var(--gold-bright); }
.more-grid b { font-size: 15px; font-weight: 600; }
.more-grid small { font-size: 11.5px; color: var(--dim); text-align: center; line-height: 1.3; }
.more-grid .dot::after { content: ""; position: absolute; top: 8px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #f08aa0; box-shadow: 0 0 8px #f08aa0; }
.realm-sheet .tx-swords { display: flex; justify-content: space-around; margin: 4px 0 14px; }
.realm-sheet .tx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.realm-sheet .tx-chips .chip { padding: 6px 12px; font-size: 14px; }
.realm-sheet .tx-chips .chip em { color: #cbb994; }