@charset "UTF-8";
/* =============================================================================
   点界 DOTVERSE · 寂静星海 —— 移动端 App 化样式模块 (mobile.css)
   -----------------------------------------------------------------------------
   1) 作用域：整份文件只有一个顶层媒体查询，只在「窄屏」或「触屏竖屏设备」生效。
      桌面端（精确指针 + 可悬停 + 宽度 > 1024px）不会匹配任何一条规则。
   2) 载入顺序：必须排在 /style.css 之后（index.html 现为 style.css -> mobile.css）。
   3) 前置依赖：index.html 的 viewport 需含 viewport-fit=cover，否则
      env(safe-area-inset-*) 恒为 0（已确认现网 index.html 已带该参数）。
   4) 分区：
      01 变量与全局视口            02 顶部 App 条 (header / .status / #online + .console 一体控制台)
      03 画布与提示条 (#toast)      04 状态带 (.app-status / #app-status-text / #hint)
      05 顶部坐标 HUD (.intro)      06 底部 App 坞 (.dock / #stick / #stick-knob)
      07 坞内 FAB (body > .tools)   08 比例尺 / 停止前往 / footer 清理
      09 旅人抽屉 (aside#person.sheet)   10 紧凑：小屏竖屏
      11 独立窗口 (body.standalone)      12 降低动效
      13 横屏双摇杆（触屏 且 max-height:560px）
         左下走位摇杆 / 右下视角摇杆 / 右上 FAB 2x2 / 左上信息列 / 底部中央提示
   6) 第 13 段必须放在文件最末，才能压过第 11 段 standalone 的定位（同权重靠后生效）。
   7) 权重注意：style.css 里的 #hint / #toast 是 ID 选择器（1,0,0），会压过本文件的
      body > #hint（0,1,1）。凡是要控制这两个元素的定位/字号，必须用
      body.in-world > #hint / body.in-world > #toast（1,1,1）才生效。
   5) 约定：零强制覆盖（全文没有任何 important 标记）；不使用内联样式；
      动效只用 opacity / transform。几何全部由 01 段的变量推导，便于整体缩放。
   ========================================================================== */
@media (max-width:700px), (pointer:coarse) and (hover:none) and (max-width:1024px) {
body #dv-zen-exit{min-width:44px;min-height:44px}
/* Focused conversations stay inside the visual viewport above a software keyboard. */
body #dv-chat-input,body #dv-npc-input{font-size:16px;min-height:44px}
body #dv-chat-composer,body #dv-npc-bar{transition:opacity 180ms ease}
body #dv-chat-close{
  display:grid;place-items:center;flex:none;min-width:44px;min-height:44px;padding:0;
  border:0;border-radius:50%;background:rgba(180,130,255,.1);color:#cdb5e4;font:22px/1 system-ui;
}
body.in-world.text-entry #dv-chat-composer,body.in-world.text-entry #dv-npc-bar{
  left:calc(var(--text-left,0px) + env(safe-area-inset-left) + 12px);
  right:calc(var(--text-right,0px) + env(safe-area-inset-right) + 12px);
  bottom:calc(var(--text-bottom,0px) + env(safe-area-inset-bottom) + 8px);
  width:auto;max-width:none;max-height:calc(var(--text-height,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
  overflow-y:auto;overscroll-behavior:contain;transform:translateY(0);
}
body.in-world.text-entry #dv-chat-send,body.in-world.text-entry #dv-npc-send,
body.in-world.text-entry #dv-npc-close{min-width:44px;min-height:44px}
body.in-world.text-entry #dv-npc-bar{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"who who close" "input count send";border-radius:18px;
}
body.in-world.text-entry #dv-npc-who{grid-area:who;max-width:100%}
body.in-world.text-entry #dv-npc-input{grid-area:input}
body.in-world.text-entry #dv-npc-count{grid-area:count}
body.in-world.text-entry #dv-npc-close{grid-area:close}
body.in-world.text-entry #dv-npc-send{grid-area:send}
body.in-world.text-entry > #dock,body.in-world.text-entry > #cam-pad,
body.in-world.text-entry > .tools,body.in-world.text-entry > #dv-toolbar{
  visibility:hidden;pointer-events:none;
}
/* Entry content must remain reachable when a short viewport or a loading/error
   message makes it taller. Only this overlay scrolls; the world stays fixed. */
body > #entry{
  display:block;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scroll-padding-top:calc(env(safe-area-inset-top) + 20px);
  scroll-padding-bottom:calc(env(safe-area-inset-bottom) + 20px);
}
body > #entry .entry-shell{
  height:auto;min-height:100%;
  padding:calc(env(safe-area-inset-top) + 24px) calc(env(safe-area-inset-right) + 24px) calc(env(safe-area-inset-bottom) + 24px) calc(env(safe-area-inset-left) + 24px);
}
body > #entry .entry-heading{flex-shrink:0;gap:16px}
body > #entry .entry-heading .brand{flex-shrink:0;white-space:nowrap}
body > #entry .entry-inner{flex-shrink:0;min-width:0;max-width:100%}
body > #entry .entry-bottom{flex-shrink:0;flex-wrap:wrap;row-gap:10px}
body > #entry #entry-form{min-width:0}
body > #entry #name{font-size:16px}
body > #entry button{touch-action:manipulation}
body > #entry .entry-inner #cancel-entry{min-width:88px;min-height:44px;padding:12px 0}

/* 01 变量与全局视口 -------------------------------------------------------- */
html{overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{
  --appbar-h:52px;--dock-h:152px;--dock-edge:12px;--dock-pad:10px;
  --fab-size:48px;--fab-gap:8px;--stick-size:132px;--status-gap:8px;
  --dim:#9d8cb0;
  height:100dvh;min-height:100vh;
  overflow:hidden;overscroll-behavior:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#world{touch-action:none;overscroll-behavior:none}

/* 02 顶部 App 条 ---------------------------------------------------------- */
/* 外层 pointer-events:none + 子元素 auto：毛玻璃条不吞掉画布手势 */
body > header,body > header.appbar{
  top:0;left:0;right:0;
  height:calc(var(--appbar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) calc(env(safe-area-inset-right) + 12px) 0 calc(env(safe-area-inset-left) + 12px);
  align-items:center;gap:10px;
  background:linear-gradient(180deg,#0b0813f2 0%,#0b0813cc 62%,#0b081300 100%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid #b482ff1a;
  pointer-events:none;z-index:8;
  transition:opacity .6s,transform .6s;
}
body > header > *{pointer-events:auto}
body:not(.in-world) > header{opacity:0;transform:translateY(-14px);pointer-events:none}
body > header .brand{gap:9px;align-items:center;flex:0 0 auto;white-space:nowrap}
body > header .brand i{width:13px;height:13px;box-shadow:5px 5px 0 #b482ff22}
body > header .brand b{font-size:20px;margin-left:3px;letter-spacing:.06em}
body > header .brand span{display:none}
body > header .status{gap:8px;align-items:center;min-width:0;font-size:11.5px;color:#bdb0ca}
body > header .status .live-dot{width:6px;height:6px;flex:0 0 auto}
body > header .status #online{
  min-width:56px;max-width:30vw;padding:7px 11px;border-radius:999px;
  background:#181126cc;border:1px solid #b482ff24;
  font-size:11px;line-height:1.3;color:#c8b9d6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 声音 / 横屏 / 离开 三个图标按钮 + 「玩法」下拉 = 右上角一体控制台：
   结构（index.html .console）、样式（modules/controlpad/controlpad.css）、
   行为（modules/controlpad/index.js）全部归 controlpad 模块。
   本文件不再为它们排布，只保留 header / .status 外壳与 #online 胶囊。 */

/* 03 画布与提示条 --------------------------------------------------------- */
/* #toast 由「屏幕中上」改为「App 条下方通栏」，不再与底部坞抢位置 */
body > #toast{
  /* 42px = 让开 App 条下方的坐标胶囊（其底边约在 appbar-h + 34） */
  top:calc(env(safe-area-inset-top) + var(--appbar-h) + 42px);bottom:auto;
  left:calc(env(safe-area-inset-left) + 14px);right:calc(env(safe-area-inset-right) + 14px);
  transform:none;max-width:none;padding:11px 14px;border-radius:14px;
  background:#241736f0;border:1px solid #b482ff40;
  font-size:12px;line-height:1.4;text-align:center;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
/* 04 状态带：坞上方一行，最多两行、省略号截断（不与坞重叠） --------------- */
/* 右侧 120px = 坞边距12 + 坞内缩10 + FAB 偏移2 + 比例尺胶囊88 + 间隙8 */
.app-status{
  position:fixed;
  left:calc(env(safe-area-inset-left) + var(--dock-edge) + 2px);
  right:calc(env(safe-area-inset-right) + 120px);
  bottom:calc(env(safe-area-inset-bottom) + var(--dock-edge) + var(--dock-h) + var(--status-gap));
  display:block;max-height:3em;overflow:hidden;
  font-size:11.5px;line-height:1.45;text-align:left;color:var(--dim);
  text-shadow:0 1px 8px #08070d;pointer-events:none;z-index:7;
  transition:opacity .6s,transform .6s;
}
body:not(.in-world) > .app-status{opacity:0;transform:translateY(10px)}
.app-status .live-dot{width:6px;height:6px;margin-right:6px;vertical-align:middle}
/* 行内元素必须 blockify 才吃 text-overflow；右留 18px 给前导圆点 */
.app-status #app-status-text{display:inline-block;max-width:calc(100% - 18px);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b5a4c6}
/* #hint 由 app.js 动态改写（安静提示 / 远处加载 / 拖动探索）：作为状态带第二行 */
body > #hint{
  position:fixed;
  left:calc(env(safe-area-inset-left) + var(--dock-edge) + 2px);
  right:calc(env(safe-area-inset-right) + var(--dock-edge) + 104px);
  bottom:calc(env(safe-area-inset-bottom) + var(--dock-edge) + var(--dock-h) + 50px);
  transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:10.5px;line-height:1.5;color:#7e708f;text-align:left;
  text-shadow:0 1px 8px #08070d;z-index:7;
}
/* 若把 #hint 挪进 .app-status：自动变成状态带第二行（上面的独立定位即失效） */
.app-status #hint{position:static;left:auto;right:auto;bottom:auto;display:block;font-size:10.5px;line-height:1.5}

/* 05 顶部坐标 HUD：把 .intro 压成一枚胶囊，保留 #position 实时坐标 -------- */
body > .intro{
  left:calc(env(safe-area-inset-left) + var(--dock-edge) + 2px);
  top:calc(env(safe-area-inset-top) + var(--appbar-h) + 8px);
  right:auto;bottom:auto;
  transition:opacity .6s,transform .6s;
}
body > .intro .eyebrow,body > .intro h1,body > .intro p{display:none}
body > .intro .coordinates{
  margin:0;padding:6px 11px;gap:7px;flex-wrap:nowrap;max-width:none;
  border-radius:999px;background:#140e20b3;border:1px solid #b482ff1f;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:10.5px;color:#8d7fa0;overflow:hidden;
}
body > .intro .coordinates > span{max-width:34vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body > .intro .trip-summary{
  margin-top:7px;padding:6px 10px;gap:7px;border-radius:10px;font-size:10.5px;
  max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 28px);
}
body:where(:has(#trip-summary:not([hidden]))) > #toast{
  top:calc(env(safe-area-inset-top) + var(--appbar-h) + 90px);
}

/* 06 底部 App 坞 + 虚拟摇杆 ----------------------------------------------- */
/* W18：右侧这 122px 的 FAB 预留已成空地 —— W10 起「视角四键」被 toolbar 模块搬进工具栏，
   body > .tools 被 toolbar.css 整块 display:none。这里收回预留（坞面板不再右半边空着），
   坞内只留摇杆 + 一行说明。 */
.dock{
  position:fixed;
  left:calc(env(safe-area-inset-left) + var(--dock-edge));
  right:calc(env(safe-area-inset-right) + var(--dock-edge));
  bottom:calc(env(safe-area-inset-bottom) + var(--dock-edge));
  height:var(--dock-h);
  display:flex;align-items:center;gap:10px;
  padding:var(--dock-pad) calc(var(--dock-pad) + 4px) var(--dock-pad) var(--dock-pad);
  border-radius:26px;
  background:linear-gradient(180deg,#160f22e0,#0c0913f2);
  border:1px solid #b482ff26;
  box-shadow:0 18px 44px #000000a6,inset 0 1px 0 #ffffff0a;
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  z-index:6;touch-action:none;
  transition:opacity .5s,transform .5s;
}
body:not(.in-world) > .dock{opacity:0;transform:translateY(16px);pointer-events:none}
#stick{
  position:relative;flex:0 0 auto;display:grid;place-items:center;
  width:var(--stick-size);height:var(--stick-size);border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#1f1633e6,#100b1af0 72%);
  border:1px solid #b482ff2e;
  box-shadow:inset 0 0 26px #b482ff14,0 8px 20px #00000059;
  touch-action:none;user-select:none;-webkit-user-select:none;
  transition:border-color .2s,box-shadow .2s;
}
#stick::before{content:"";position:absolute;inset:9px;border-radius:50%;border:1px dashed #b482ff1f}
#stick.active{border-color:#c79bff5c;box-shadow:inset 0 0 30px #b482ff26,0 0 26px #b482ff30}
/* #stick-knob 的 transform 由 app.js 内联写入 translate(px,px)：
   这里只给回弹过渡，CSS 不写 transform，避免与实时数据打架 */
#stick-knob{
  position:relative;display:block;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#d9b8ff,#8f5fd6 72%);
  box-shadow:0 0 20px #b482ff59,0 8px 16px #00000073,inset 0 1px 0 #ffffff40;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
  will-change:transform;pointer-events:none;
}
#stick.active #stick-knob{transition:none}
.dock-caption{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.dock-caption b{font-size:11.5px;font-weight:500;letter-spacing:.04em;color:#c2b0d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-caption span{font-size:9.5px;color:#796b8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 06b 视角摇杆：竖屏隐藏，只在横屏出现（完整样式在第 13 段） ---------------- */
body > .cam-pad{display:none}

/* 07 坞内 FAB：.tools 原地重排为 2×2（桌面端布局完全不受影响） ------------ */
body > .tools,body > .dock .tools{
  display:grid;grid-template-columns:repeat(2,var(--fab-size));gap:var(--fab-gap);
  padding:0;background:none;border:0;border-radius:0;transform:none;
  z-index:7;touch-action:manipulation;
}
body > .tools{
  position:fixed;top:auto;
  right:calc(env(safe-area-inset-right) + var(--dock-edge) + var(--dock-pad) + 2px);
  bottom:calc(env(safe-area-inset-bottom) + var(--dock-edge) + var(--dock-pad) + (var(--dock-h) - 2*var(--dock-pad) - (var(--fab-size)*2 + var(--fab-gap)))/2);
}
body > .dock .fab-stack{margin-left:auto;display:block}
body > .dock .tools{position:static;margin-left:auto}
body > .tools span,body > .dock .tools span{display:none}
body > .tools button,body > .dock .tools button{
  width:var(--fab-size);height:var(--fab-size);
  min-width:var(--fab-size);min-height:var(--fab-size);
  padding:0;font-size:19px;line-height:1;border-radius:16px;
  border:1px solid #b482ff26;background:#1b132bb3;color:#cdb6e8;
  box-shadow:0 6px 16px #00000059;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
/* 视觉顺序：上行 ＋ −，下行 ▦ ⌖（DOM 顺序是 ▦ ＋ − ⌖） */
body > .tools button:nth-of-type(1),body > .dock .tools button:nth-of-type(1){order:3}
body > .tools button:nth-of-type(2),body > .dock .tools button:nth-of-type(2){order:1}
body > .tools button:nth-of-type(3),body > .dock .tools button:nth-of-type(3){order:2}
body > .tools button:nth-of-type(4),body > .dock .tools button:nth-of-type(4){order:4}
body > .tools button[aria-pressed="true"],body > .dock .tools button[aria-pressed="true"]{color:#ecdcff;border-color:#b482ff4d}
body > .tools button:active,body > .dock .tools button:active{transform:scale(.94)}
/* 08 比例尺 / 停止前往 / footer 清理 ------------------------------------- */
/* footer 收缩为零尺寸容器：#stop 与 .scale 被重新定位，其余拥挤文字全部隐藏 */
body > footer{
  position:fixed;left:0;right:0;bottom:0;top:auto;
  display:block;padding:0;margin:0;gap:0;
  pointer-events:none;opacity:1;transform:none;
}
body > footer .foot-left{display:none}
/* 「停止前往」原先是底部中央的胶囊，现在住在右上角 #play-menu 里
   （样式见 modules/controlpad/controlpad.css，移动端同理，不再需要底部定位）。 */
/* 比例尺胶囊：与状态带同一行、贴右端，宽度硬上限 88px */
body > footer .scale{
  position:fixed;left:auto;
  right:calc(env(safe-area-inset-right) + var(--dock-edge) + var(--dock-pad) + 2px);
  bottom:calc(env(safe-area-inset-bottom) + var(--dock-edge) + var(--dock-h) + var(--status-gap));
  margin:0;max-width:88px;flex-direction:row;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  background:#140e20b3;border:1px solid #b482ff1f;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:10px;color:#9c8caf;pointer-events:none;z-index:7;
}
body > footer .scale #scale-label{flex:0 0 auto;white-space:nowrap}
/* #ruler 的 width 由 app.js 内联书写：用 max-width 收住，不会溢出胶囊 */
body > footer .scale i{height:5px;border-color:#8f76ab;max-width:30px;flex:0 1 auto}
body > footer .scale #ruler{max-width:30px}
body > footer .scale small{display:none}

/* 09 旅人抽屉：#person 改成底部抽屉 .sheet ------------------------------- */
aside#person.sheet{
  position:fixed;left:0;right:0;top:auto;bottom:0;width:100%;max-width:none;
  max-height:62vh;max-height:62dvh;
  padding:36px calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 22px) calc(env(safe-area-inset-left) + 20px);
  border-radius:24px 24px 0 0;border:1px solid #b482ff26;border-bottom:0;
  background:linear-gradient(180deg,#1b1229f5,#0c0913fa);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  backdrop-filter:blur(20px) saturate(130%);
  box-shadow:0 -18px 44px #000000a6;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  z-index:10;animation:app-sheet-in .34s cubic-bezier(.2,.8,.2,1) both;
}
/* 顶部抓握条（下拉收起的手势提示；拖动逻辑见 app-shell-spec.md） */
aside#person.sheet::before{
  content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:46px;height:4px;border-radius:999px;background:#b482ff3d;
}
aside#person #person-handle{display:block;position:absolute;left:0;right:0;top:0;height:32px;touch-action:none;cursor:grab}
@keyframes app-sheet-in{from{transform:translateY(102%);opacity:.4}to{transform:translateY(0);opacity:1}}
body > aside#person .eyebrow{font-size:9.5px}
body > aside#person h2{font-size:19px;margin:18px 0 10px}
body > aside#person h2 i{width:9px;height:9px}
body > aside#person #person-code.identity{display:block;margin:0 0 14px;max-width:none;font-size:10px;line-height:1.6;color:#8d7ba4}
body > aside#person strong{display:block;font-size:34px;line-height:1.2;margin:4px 0 8px}
body > aside#person p{font-size:12px;margin:6px 0 16px}
body > aside#person button{min-height:48px;border-radius:16px;font-size:14px;background:#241736b3;border:1px solid #b482ff30}
body > aside#person #wave{background:linear-gradient(115deg,#c3a3ea,#9d71d0);color:#180d24;border-color:#b889ee;letter-spacing:.08em}
body > aside#person #close-card.plain{min-height:44px;margin-top:8px;background:transparent;border:0;color:#8f7fa0;font-size:12px}
/* 下拉拖动 / 收起动画钩子：由 JS 加类，CSS 不自己动 */
aside#person.sheet-rest{animation:none;transition:transform .24s ease-out;transform:translateY(0)}
aside#person.sheet-dragging{animation:none;transition:none;transform:translateY(var(--sheet-dy,0px))}
aside#person.sheet-out{animation:none;transition:transform .24s ease-in,opacity .24s ease-in;transform:translateY(102%);opacity:0;pointer-events:none}

/* 10 紧凑：小屏竖屏（横屏整套布局见第 13 段） -------------------------------- */
  @media (max-width:340px){
  .dock-caption{display:none}
  body > header .status #online{max-width:26vw;padding:6px 9px}
}
/* 10b 矮屏竖屏（≤640px 高，如 360×640 / 320×568）：坞 / 摇杆 / 状态带 / 提示 / 工具栏
   这一竖排从底边往上码了五层，每层各让一档，地图才腾得出来（爷爷：「太大了 组件不够精简 紧凑」）。
   几何（自底边算起，单位 px）：坞 0~130 · 状态带 136~170 · #hint 180~196 · 工具栏 206~266
   —— 每层的底边都严格大于下一层的顶边，零相交（模型断言见 test/toolbar.test.js ㉚）。
   坞高 152→120、摇杆 132→104、中心球 56→48、坞边距 12→10、坞内距 10→8、状态带间距 8→6；
   工具栏那一档（两行 30→26、条高 71→60）在 toolbar.css §08c。 */
  @media (max-height:640px){
  body,body.standalone{--dock-h:120px;--dock-edge:10px;--dock-pad:8px;--stick-size:104px;--status-gap:6px}
  #stick-knob{width:48px;height:48px}
  .dock-caption b{font-size:11px}
  .dock-caption span{font-size:9px}
}
/* 11 独立窗口（已添加到主屏 / PWA standalone） ---------------------------- */
body.standalone{--appbar-h:56px}
body.standalone > .dock{bottom:calc(env(safe-area-inset-bottom) + var(--dock-edge) + 2px)}
body.standalone > .app-status{bottom:calc(env(safe-area-inset-bottom) + var(--dock-edge) + var(--dock-h) + var(--status-gap) + 2px)}
body.standalone > footer .scale{bottom:calc(env(safe-area-inset-bottom) + var(--dock-edge) + var(--dock-h) + var(--status-gap) + 2px)}

/* 12 降低动效 ------------------------------------------------------------- */
  @media (prefers-reduced-motion:reduce){
  body > header,body > .dock,body > .app-status,#stick,#stick-knob{animation:none;transition:none}
  aside#person.sheet{animation:none;transition:none;transform:none;opacity:1}
}

/* =============================================================================
   13 横屏双摇杆（触屏 且 max-height:560px）—— 王者式操作布局
   -----------------------------------------------------------------------------
   命中：orientation:landscape + pointer:coarse + max-height:560px
     844x390 / 926x428 / 932x430 / 667x375 / 740x360 / 568x320 全部命中
   不命中：iPad 横屏 1024x768（高 768 > 560）→ 退回上面的竖屏式布局；
          桌面端（精确指针）永不命中。
   分区（横屏 = 全屏画布 + 四个角 HUD）：
     App 条  顶部全宽 46px（品牌 / 在线胶囊 / 控制台：声音·横屏·离开 + 玩法下拉）
     左上    .intro 坐标胶囊 → .app-status 状态带 → footer .scale 比例尺（同列堆叠）
     右上    body > .tools 四个 FAB（2x2，44px）；玩法下拉打开时落在 FAB 列左侧（避开它）
     左下    .dock > #stick 走位摇杆；右下 .cam-pad 视角摇杆
     底部中央（两摇杆之间的空档）   #hint 单行提示 → #toast（#stop 已移入右上角玩法下拉）
   尺寸：摇杆直径 clamp(120px,36dvh,138px)（>=120px 触控、离安全区 >=12px）；
         走位摇杆中心球 58px、视角摇杆中心球 56px。
   ========================================================================== */
  @media (orientation:landscape) and (pointer:coarse) and (max-height:560px){
    body,body.standalone{
      --appbar-h:46px;--lap-edge:12px;--fab-size:44px;--fab-gap:6px;
      --lap-pad:clamp(120px,36dvh,138px);--stick-size:var(--lap-pad);
    }

    /* 13.1 App 条：收窄在线胶囊；控制台的按钮尺寸与下拉落位见 controlpad.css 第 09 段 */
    body > header .status{gap:6px}
    body > header .status #online{max-width:18vw;min-width:48px;padding:6px 9px}
    /* 横屏档的声音 / 横屏 / 离开 / 玩法：尺寸与下拉落位见 controlpad.css 第 09 段 */
    /* Keep the trip beside the coordinates; the status and scale occupy the rows below. */
    body > .intro{max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 270px)}
    body > .intro .coordinates{max-width:100%}
    body > .intro .trip-summary{
      position:absolute;left:calc(100% + 8px);top:0;margin:0;
      padding:5px 8px;gap:6px;max-width:180px;font-size:10px;
    }
    body > .intro .trip-summary .trip-glyph{font-size:12px}

    /* 13.2 左下：走位摇杆（坞退化成纯圆盘，去掉面板底色与内边距） */
    body > .dock{
      left:calc(env(safe-area-inset-left) + var(--lap-edge));
      right:auto;bottom:calc(env(safe-area-inset-bottom) + var(--lap-edge));
      width:var(--stick-size);height:var(--stick-size);
      padding:0;gap:0;border:0;background:none;box-shadow:none;
      -webkit-backdrop-filter:none;backdrop-filter:none;
    }
    body > .dock .dock-caption{display:none}
    #stick::before{inset:10px}
    #stick-knob{width:58px;height:58px}

    /* 13.3 右下：视角摇杆（虚线内环 + 环底「视角」小字 + 冷色描边，与走位摇杆区分） */
    body > .cam-pad{
      position:fixed;display:grid;place-items:center;
      right:calc(env(safe-area-inset-right) + var(--lap-edge));
      bottom:calc(env(safe-area-inset-bottom) + var(--lap-edge));
      width:var(--lap-pad);height:var(--lap-pad);border-radius:50%;
      background:radial-gradient(circle at 50% 58%,#111c2ce6,#0a0913f0 72%);
      border:1px solid #8ec7ff38;
      box-shadow:inset 0 0 26px #8ec7ff14,0 8px 20px #00000059;
      touch-action:none;user-select:none;-webkit-user-select:none;
      z-index:6;opacity:1;transform:none;
      transition:border-color .2s,box-shadow .2s,opacity .5s,transform .5s;
    }
    body > .cam-pad::before{content:"";position:absolute;inset:10px;border-radius:50%;border:1px dashed #8ec7ff2e}
    body > .cam-pad.active{border-color:#9ad4ff8c;box-shadow:inset 0 0 30px #8ec7ff26,0 0 26px #8ec7ff33}
    body:not(.in-world) > .cam-pad{opacity:0;transform:translateY(16px);pointer-events:none}
    /* .cam-knob 的 transform 由 app.js 内联写入 translate(px,px)，这里只给回弹过渡 */
    .cam-knob{
      position:relative;display:block;width:56px;height:56px;border-radius:50%;
      background:radial-gradient(circle at 38% 32%,#d5ecff,#6a97dd 72%);
      box-shadow:0 0 20px #8ec7ff4d,0 8px 16px #00000073,inset 0 1px 0 #ffffff40;
      transition:transform .18s cubic-bezier(.2,.8,.2,1);
      will-change:transform;pointer-events:none;
    }
    body > .cam-pad.active .cam-knob{transition:none}
    .cam-label{
      position:absolute;left:50%;bottom:11px;transform:translateX(-50%);
      font-size:9px;font-weight:500;letter-spacing:.18em;line-height:1;
      color:#8ec7ff9e;white-space:nowrap;pointer-events:none;
    }

    /* 13.4 右上：FAB 2x2，紧贴 App 条下方（44px，含 1px 边框仍 >=44 触控） */
    body > .tools{
      grid-template-columns:repeat(2,var(--fab-size));
      left:auto;top:calc(env(safe-area-inset-top) + var(--appbar-h) + 8px);
      right:calc(env(safe-area-inset-right) + var(--lap-edge));bottom:auto;
    }
    body > .tools button{border-radius:14px;font-size:17px}

    /* 13.5 左上信息列：坐标胶囊 -> 状态带 -> 比例尺（同列，纵向互不重叠） */
    body > .intro{top:calc(env(safe-area-inset-top) + var(--appbar-h) + 8px)}
    body > .intro .coordinates > span{max-width:16vw}
    body > .app-status{
      top:calc(env(safe-area-inset-top) + var(--appbar-h) + 40px);bottom:auto;
      right:calc(env(safe-area-inset-right) + var(--lap-edge) + 96px);   /* W18：右栏 78 + 边距 6 + 间隙 8 之后剩的余量（原 112 是给 83 宽面板留的） */
      max-height:1.5em;
    }
    body > footer .scale{
      top:calc(env(safe-area-inset-top) + var(--appbar-h) + 64px);bottom:auto;
      left:calc(env(safe-area-inset-left) + var(--lap-edge) + 2px);right:auto;
    }
    body.standalone > .app-status,body.standalone > footer .scale{bottom:auto}

    /* 13.6 底部中央：单行提示（夹在两个摇杆之间的空档里；#stop 已随玩法下拉搬到右上角）
       注意 #hint / #toast 在 style.css 里是 ID 选择器，必须用 body.in-world > 前缀压过 */
    body.in-world > #hint{
      left:calc(env(safe-area-inset-left) + var(--lap-edge) + var(--lap-pad) + 10px);
      right:calc(env(safe-area-inset-right) + var(--lap-edge) + var(--lap-pad) + 10px);
      top:auto;bottom:calc(env(safe-area-inset-bottom) + var(--lap-edge) + 6px);
      transform:none;max-width:none;text-align:center;
      font-size:10.5px;line-height:1.5;
    }
    body.in-world > #toast{
      top:auto;bottom:calc(env(safe-area-inset-bottom) + var(--lap-edge) + 66px);
      left:calc(env(safe-area-inset-left) + var(--lap-edge) + var(--lap-pad) + 10px);
      right:calc(env(safe-area-inset-right) + var(--lap-edge) + var(--lap-pad) + 10px);
      transform:none;max-width:none;font-size:12px;padding:10px 14px;border-radius:14px;
      text-align:center;
    }

    /* 13.7 旅人抽屉：横屏仍是底部抽屉，最多 76% 高 */
    aside#person.sheet{max-height:76vh;max-height:76dvh}

    /* 13.8 进入页：横屏两栏（品牌/标题 左，表单 右） */
    body > #entry .entry-shell{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr auto;
      grid-template-areas:"head form" "bottom bottom";
      align-content:start;align-items:center;gap:16px 20px;
      padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 12px) calc(env(safe-area-inset-left) + 20px);
    }
    body > #entry .entry-heading{grid-area:head;align-self:center;justify-content:center;flex-direction:column;gap:10px;text-align:center}
    body > #entry .entry-inner{grid-area:form;text-align:left;align-items:flex-start;width:100%;margin-left:0;max-width:100%}
    body > #entry .entry-bottom{grid-area:bottom}
    body > #entry .entry-mark{display:none}
    body > #entry .entry-inner h2{font-size:clamp(19px,3.2vw,24px);margin:8px 0 6px}
    body > #entry .entry-inner .entry-copy{font-size:11px;line-height:1.7;margin-bottom:12px}
    body > #entry #name{min-height:44px;font-size:16px}
    body > #entry #enter{min-height:48px}

    /* 13.9 极低高度（<=300px，如 480x280 分屏）保护档：再收一档，避免 FAB 撞摇杆 */
      @media (max-height:300px){
        body,body.standalone{--appbar-h:44px;--fab-size:40px;--fab-gap:4px;--lap-pad:clamp(110px,40dvh,138px)}
        body > header .status button{height:38px;min-height:38px}
        body > header .status #rotate{height:40px;min-height:40px}
      }
    }
}