/* =============================================================
   DemoWrld v0.12 — 手機版
   · 觸控裝置：底部四大區常駐（沒有滑鼠可以「靠過去」）
   · 寬度 ≤ 760px：面板變成從下往上滑的全螢幕抽屜、播放器變底部卡片
   ============================================================= */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }

/* ---------- 觸控裝置（手機、平板、觸控筆電） ---------- */
@media (hover: none) and (pointer: coarse) {
  body.shell .dock { opacity: 1 !important; pointer-events: auto !important; transform: translateX(-50%) !important; }
  .edge-h, body.shell .zoom-ctrl, #hoverToggle, .hint { display: none !important; }
  .nb kbd.nb-k { display: none; }
}

@media (max-width: 760px) {
  html, body { overscroll-behavior: none; }
  body.hud.shell { --dockH: calc(58px + var(--sab)); }

  /* 頂部：品牌只留光球，NOVA 輸入列吃掉剩下的空間 */
  body.hud .topbar { height: calc(54px + var(--sat)); padding: var(--sat) 10px 0; gap: 8px; }
  body.shell .brand { gap: 0; translate: none; flex: none; }
  body.shell .brand-name, body.shell .brand-tag { display: none; }
  body.shell .geo-search.nb { flex: 1; min-width: 0; max-width: none; height: 38px; margin: 0; padding: 0 8px 0 4px; gap: 6px; translate: none; }
  body.shell.street .geo-search.nb { padding: 0 12px 0 10px; }
  .nb #novaQ { font-size: 13px !important; letter-spacing: .02em !important; }
  .nb .nb-mic { padding: 2px; }
  body.shell .top-right { gap: 6px; translate: none; flex: none; }
  body.shell .bell-btn { padding: 4px; }
  body.shell .credit-chip small { display: none; }
  body.shell .credit-chip { padding: 4px 6px; gap: 4px; }
  body.shell .credit-chip span#creditVal { font-size: 15px !important; }
  .guest-chip { padding: 5px 8px; font-size: 10.5px; }
  .nb-res { position: fixed; left: 8px; right: 8px; top: calc(56px + var(--sat)); max-height: calc(100vh - 140px - var(--sat) - var(--sab)); }
  .nb-row { padding: 10px 14px; }

  /* 地球名稱與資訊 */
  body.hud.shell .hud-readout, body.hud.shell.orbit .hud-readout, body.hud.shell.street .hud-readout { top: calc(64px + var(--sat)); left: 14px; max-width: calc(100vw - 28px); translate: none; }
  body.hud .hud-readout h1, body.hud.orbit .hud-readout h1 { font-size: 26px !important; margin: 2px 0 !important; letter-spacing: .12em; }
  body.hud.street .hud-readout h1 { font-size: 18px !important; }
  body.hud .hud-readout p { font-size: 10.5px; max-width: 78vw; }
  body.hud .hud-readout .no { font-size: 9px; }
  body.shell .hud-data, body.hud .hud-frame, .center-reticle { display: none !important; }

  /* 平行地球切換：點地球名稱叫出來，橫向滑動 */
  body.hud.shell .multiverse { top: calc(60px + var(--sat)) !important; left: 0 !important; right: 0; width: auto !important; max-width: none !important; transform: translateY(-8px) !important; justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding: 6px 12px; gap: 6px !important; z-index: 26; background: linear-gradient(180deg, rgba(4,3,6,.92), rgba(4,3,6,.6)); }
  body.hud.shell.chrome-top .multiverse { transform: none !important; }
  body.hud.shell .multiverse::-webkit-scrollbar { display: none; }
  body.hud .multiverse .verse-btn { flex: none; white-space: nowrap; }
  body.shell.chrome-top .hud-readout { opacity: 0; }

  /* 底部四大區 */
  body.shell .dock, body.shell.chrome-bottom .dock { left: 0 !important; right: 0; bottom: 0 !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; translate: none !important; justify-content: space-around; gap: 0 !important; padding: 6px 4px calc(6px + var(--sab)); background: linear-gradient(0deg, rgba(4,3,6,.96), rgba(4,3,6,.82)); border-top: 1px solid var(--hud-faint); }
  .dock::before, .dock::after { display: none !important; }
  .dock button { flex: 1; flex-direction: column; gap: 3px !important; padding: 4px 0 !important; min-width: 0 !important; height: auto !important; clip-path: none !important; background: none !important; box-shadow: none !important; border: none !important; }
  .dock button small { font-size: 10px !important; letter-spacing: .12em !important; }
  .dock button .ic { width: 20px; height: 20px; }
  body.orbit .dock button.on { color: #fff; } body.orbit .dock button.on .ic { color: var(--g1, #e8c98f); }
  body.street .dock button.on { color: #fff; text-shadow: 0 0 10px var(--g1); } body.street .dock button.on .ic { color: var(--g1); filter: drop-shadow(0 0 6px var(--g1)); }
  .dock .rail-badge { top: 0; right: calc(50% - 22px); }
  body.player-open .dock { bottom: 0 !important; }

  /* 面板：從下往上的全螢幕抽屜（留出上面的輸入列和下面的四大區） */
  body.shell .drawer, body.shell .drawer.left, body.shell .drawer.right {
    left: 0 !important; right: 0 !important; width: auto !important; top: calc(54px + var(--sat)) !important; bottom: var(--dockH) !important; max-height: none !important;
    transform: translateY(calc(100% + 80px)) !important; translate: none !important; clip-path: none !important; border-left: none !important; border-right: none !important; z-index: 30 !important; }
  body.shell .drawer.open { transform: none !important; }
  body.shell .drawer .drawer-bar { padding-top: 10px; }
  body.shell #sideTabs { overflow-x: auto; scrollbar-width: none; }
  body.shell #sideTabs button { flex: 0 0 auto !important; padding: 10px 14px !important; font-size: 12.5px !important; }
  body.shell .side-body, body.shell #sideBody { padding-bottom: 24px; }
  body.shell .form-grid { grid-template-columns: 1fr !important; }
  body.shell .priv-grid { grid-template-columns: 1fr 1fr !important; }
  body.shell .prof-btns.three { grid-template-columns: 1fr 1fr !important; }
  body.shell .lb-scopes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.shell .lb-scopes button { flex: none; }

  /* 播放器：右下膠囊 → 底部長條；展開後是底部卡片 */
  .pill { left: 10px; right: 10px; bottom: calc(var(--dockH) + 8px) !important; max-width: none; translate: none !important; }
  .pill .pl-t { flex: 1; } .pill .pl-t b, .pill .pl-t small { max-width: none; }
  body.left-open .pill, body.right-open .pill { display: none; }
  body.hud.shell .player { left: 8px !important; right: 8px !important; width: auto !important; bottom: calc(var(--dockH) + 8px) !important; height: auto !important; transform: translateY(20px) !important; padding: 12px 12px 10px !important;
    display: grid !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto auto auto; gap: 8px 10px !important; z-index: 31; }
  body.hud.shell.player-open .player { transform: none !important; }
  body.hud .player .p-meta { grid-column: 1; grid-row: 1; min-width: 0; }
  body.hud .player .p-cover { width: 44px !important; height: 44px !important; }
  body.hud .player .p-ctrl { grid-column: 2; grid-row: 1; gap: 4px; }
  body.hud .player .p-btn { width: 38px; height: 38px; }
  body.hud .player .p-btn.play { width: 46px; height: 46px; }
  body.hud .player .p-wave { grid-column: 1 / -1; grid-row: 2; height: 64px !important; overflow: hidden; }
  body.hud .player .p-wave canvas { height: 48px !important; max-height: 48px; }
  body.hud .player .p-actions { grid-column: 1 / -1; grid-row: 3; max-width: none !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 6px; }
  body.hud .quick-tags { flex: 1 1 100%; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }
  body.hud .quick-tags .qt-l { display: none; }
  body.hud .quick-tags button { padding: 7px 0 !important; justify-content: center; }
  .p-collapse { right: 50%; margin-right: -13px; top: -2px; }
  body.player-open .empty-card, body.player-open .ppl-filter { display: none; }
  body.player-open.left-open .player, body.player-open.right-open .player { display: none !important; }

  /* 其他浮動元件 */
  .ppl-filter { left: auto !important; right: 10px; bottom: auto !important; top: calc(66px + var(--sat)); font-size: 9.5px; }
  .ppl-filter span { display: none; }
  body.chrome-top .ppl-filter { opacity: 0; pointer-events: none; }
  .empty-card { bottom: calc(var(--dockH) + 12px) !important; padding: 14px 16px; }
  .empty-card b { font-size: 15px !important; } .empty-card p { font-size: 12px; }
  .target-card { width: calc(100vw - 20px) !important; top: calc(112px + var(--sat)) !important; }
  .toasts, #toasts { top: calc(60px + var(--sat)) !important; width: calc(100vw - 24px); }
  .toast { max-width: 100%; font-size: 12.5px; }
  .modal-box, body.hud .modal-box { width: calc(100vw - 20px) !important; max-height: calc(100vh - 40px - var(--sat) - var(--sab)); overflow-y: auto; padding: 18px 16px !important; }
  .modal-foot { flex-wrap: wrap; }
  .noti-panel { left: 8px !important; right: 8px !important; width: auto !important; top: calc(56px + var(--sat)) !important; }
  .nova-panel { left: 8px !important; right: 8px !important; width: auto !important; top: calc(60px + var(--sat)) !important; bottom: calc(var(--dockH) + 8px) !important; height: auto !important; }
  #hoverCard, .gesture-hud, #gReticle, #gLock { display: none !important; }
  .tour-card { padding: 16px 16px 12px; } .tour-card h3 { font-size: 17px; } .tour-card p { font-size: 12.5px; }
  .sh-card { height: min(40vh, 360px); }
  .ld-card { padding: 22px 18px 18px; } .ld-card h2 { font-size: 22px; }
  .people .hav.lg { width: 44px; height: 44px; }
  body.hud .globe-label { font-size: 10px; }
}

/* 很窄的手機 */
@media (max-width: 380px) {
  .dock button small { font-size: 9px !important; letter-spacing: .06em !important; }
  body.hud .hud-readout p { display: none; }
}

/* 從主畫面打開（App 模式） */
@media (display-mode: standalone) {
  body.hud .topbar { padding-top: var(--sat); }
}