/* =========================================================
 * device.css — 设备外壳层（第 2.1 章 / 第 1.4 章）
 * 画布固定 440×956pt，外层中框、侧键、听筒、灵动岛
 * ========================================================= */
.stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
}

.device {
  position: relative;
  transform-origin: center center;
  flex: none;
}

/* ---- 无边框机身（已去除金属中框，仅保留屏幕本体） ---- */
.dev-body {
  position: relative;
  padding: 0;
  border-radius: var(--corner);
  background: none;
  box-shadow: 0 34px 80px rgba(0,0,0,.6);
}

/* ---- 侧键（悬浮式，仅画布模式可见） ---- */
.side-btn {
  position: absolute;
  background: linear-gradient(90deg, #4a4e54, #868b91 45%, #3c4046);
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 .5px rgba(255,255,255,.22);
  border: none;
  padding: 0;
  opacity: .88;
  transition: opacity 160ms var(--ease), filter 160ms var(--ease);
}
.side-btn:hover { opacity: 1; }
.side-btn:active { filter: brightness(.82); }
.side-silent { left: -15px; top: 119px; width: 5px; height: 30px; }
.side-left { position: absolute; left: -15px; top: 177px; display: flex; flex-direction: column; gap: 20px; }
.side-vol { width: 5px; height: 62px; }
.side-power { right: -15px; top: 197px; width: 5px; height: 100px; }

/* ---- 屏幕 ---- */
.dev-screen-wrap {
  position: relative;
  width: var(--screen-w);
  height: var(--screen-h);
  border-radius: var(--corner);
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}
.dev-screen {
  position: absolute;
  inset: 0;
  width: var(--screen-w);
  height: var(--screen-h);
  overflow: hidden;
  border-radius: var(--corner);
  background: #000;
  isolation: isolate;
}
.dev-glare {
  position: absolute;
  inset: 0;
  border-radius: var(--corner);
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.10), transparent 60%);
  mix-blend-mode: screen;
}
.dev-shadow {
  position: absolute;
  left: 6%; right: 6%; bottom: -26px; height: 40px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.5), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

/* ---- 壁纸 ---- */
.wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: background var(--t-overlay) var(--ease), filter 300ms var(--ease);
}
/* 粉调凯蒂：用户提供的主屏壁纸（根相对路径——CSS 里的 url() 相对的是本文件，不能写 img/…） */
.wallpaper.w-kitty {
  background-image: url("/img/wallpaper/kitty.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* 自定义壁纸（壁纸商城/设置上传）：URL 由 applyWallpaper() 写进 --wp-custom，
 * 任何 .w-custom 元素（全局 #wallpaper、主屏 home-bg）统一从变量取图，避免只有全局层有图、主屏白屏 */
.wallpaper.w-custom {
  background-image: var(--wp-custom, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.wallpaper.w-aurora {
  background:
    radial-gradient(90% 60% at 20% 15%, #7f5cff 0%, transparent 55%),
    radial-gradient(80% 60% at 85% 30%, #ff6ec7 0%, transparent 55%),
    radial-gradient(100% 70% at 50% 95%, #1b1f4b 0%, #05060f 70%);
}
.wallpaper.w-dusk {
  background:
    radial-gradient(90% 70% at 15% 20%, #ff9a3c 0%, transparent 55%),
    radial-gradient(90% 70% at 80% 60%, #7b2ff7 0%, transparent 60%),
    linear-gradient(180deg, #241b3a, #0a0714);
}
.wallpaper.w-sand {
  background:
    radial-gradient(80% 60% at 20% 20%, #ffd6a5 0%, transparent 60%),
    radial-gradient(90% 70% at 85% 40%, #bfe6ff 0%, transparent 60%),
    linear-gradient(180deg, #ffeede, #f3e7dd);
}
.wallpaper.w-landscape {
  background:
    radial-gradient(70% 40% at 30% 18%, #9be7ff 0%, transparent 60%),
    linear-gradient(180deg, #0b3d5c 0%, #1f7a6c 45%, #123c2c 100%);
  position: absolute;
}
.wallpaper.w-ink {
  background: linear-gradient(180deg, #101215, #000);
}

/* ---- 遮罩 ---- */
.aod-veil {
  position: absolute; inset: 0; z-index: 1;
  background: #000;
  opacity: 0;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}
.aod-veil.on { opacity: .15; }
.aod-veil.off { opacity: 1; }

.brightness-veil {
  position: absolute; inset: 0; z-index: 60;
  background: #000;
  opacity: 0;
  transition: opacity 250ms var(--ease);
  pointer-events: none;
}

/* ---- 状态栏（表4.2） ---- */
.statusbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--sb-h);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 30px 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #fff;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.statusbar.dark-text { color: #000; }
.statusbar .sb-left { display: flex; align-items: center; gap: 6px; min-width: 120px; }
.statusbar .sb-right { display: flex; align-items: center; gap: 5px; }
.statusbar .sb-icon { display: flex; align-items: center; opacity: .95; }
.statusbar .sb-net { font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.statusbar .batt-wrap { display: flex; align-items: center; gap: 3px; }
.statusbar .batt-body {
  width: 25px; height: 12.5px; border-radius: 3.8px;
  border: 1.2px solid currentColor; opacity: .45;
  position: relative; padding: 1.4px;
}
.statusbar .batt-body::after {
  content: ''; position: absolute; right: -3.4px; top: 3.6px;
  width: 1.8px; height: 4px; border-radius: 0 2px 2px 0; background: currentColor; opacity: .5;
}
.statusbar .batt-fill { height: 100%; border-radius: 2.2px; background: currentColor; opacity: 1; }
.statusbar .batt-fill.low { background: var(--red); }
.statusbar .batt-pct { font-size: 12px; font-weight: 600; opacity: .85; }
.statusbar .sb-plane { color: var(--orange); }

/* ---- 灵动岛（1.4） ---- */
.island {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  height: 37px;
  width: 126px;
  background: #000;
  border-radius: 20px;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 14px;
  color: #fff;
  overflow: hidden;
  transition: width 320ms var(--ease), height 320ms var(--ease), border-radius 320ms var(--ease);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.06);
}
.island .is-cam {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #23324a 0%, #0a0f18 60%, #000 100%);
  box-shadow: inset 0 0 2px rgba(120,160,255,.35);
}
.island .is-flash {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: #ffe066; opacity: 0;
  box-shadow: 0 0 8px 2px rgba(255,204,0,.6);
  transition: opacity 200ms var(--ease);
}
.island .is-flash.on { opacity: 1; }
.island .is-content {
  display: flex; align-items: center; gap: 6px;
  opacity: 0; transform: scale(.9);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  font-size: 12px; width: 100%;
}
.island.expanded { width: 300px; height: 37px; }
.island.expanded .is-content { opacity: 1; transform: scale(1); }
.island.expanded .is-cam { opacity: 0; }
.island.tall { height: 64px; border-radius: 26px; }

/* ---- Home 指示条（1.4） ---- */
.home-indicator {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--safe-b);
  z-index: 58;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.home-indicator span {
  width: 134px; height: 5px; border-radius: 3px;
  background: #fff; opacity: .95;
  box-shadow: 0 0 4px rgba(0,0,0,.18);
}
.home-indicator.dark span { background: #000; }
.home-indicator.hidden { opacity: 0; }

/* ---- 底部手势区 ----
 * 2026-10-06：改为 pointer-events:none，不再拦截点击。
 * 它原本盖在屏幕最底部 26px（全屏模式 38px），把微信/商城底部 Tab 栏
 * 一半以上的高度都吞掉了 —— Tab 只有最上面十来像素能点。
 * 现在只保留「量位置用的几何条」这一个用途，长按手势改由
 * js/main.js#bindSwitcherGesture() 在 document 上按坐标判定，普通点击照常穿透。 */
.gesture-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26px;
  z-index: 57;
  pointer-events: none;
}
.gesture-bar::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 60px; height: 4px; border-radius: 3px;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.35);
  opacity: 0; transition: opacity 160ms var(--ease);
}
.gesture-bar.pressed::after { opacity: 1; }

/* ---- 悬浮返回主屏球 ---- */
.float-home {
  position: absolute;
  right: 12px;
  bottom: calc(var(--tab-h) + var(--safe-b) + 8px);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .34);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), background 160ms var(--ease);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.float-home.show {
  opacity: .88;
  transform: scale(1);
  pointer-events: auto;
}
.float-home.show:active {
  opacity: 1;
  transform: scale(.9);
}
.float-home.dragging { transition: none; opacity: 1; }
.float-home svg { width: 22px; height: 22px; }
html.dark .float-home { background: rgba(255, 255, 255, .22); color: #fff; }
/* 全屏模式：底部跟随设备安全区 */
html.fs .float-home {
  right: 10px;
  bottom: calc(49px + env(safe-area-inset-bottom, 0px) + 8px);
}

/* ---- 覆盖层根 ---- */
.overlay-root {
  position: absolute;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.overlay-root > .ov {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: rgba(0, 0, 0, .38);
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.overlay-root > .ov.in { opacity: 1; }
.overlay-root > .ov-nobg { background: transparent; }
.overlay-root > .ov-toast {
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 40px;
}

/* ---- 页面栈 ---- */
.page-stack {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
}
.page-stack.is-locked { pointer-events: none; }

/* 转场（2.3） */
.page.enter-right { transform: translateX(100%); }
.page.leaving-right { transform: translateX(100%); }
.page.enter-up { transform: translateY(100%); }
.page.leaving-up { transform: translateY(100%); }
.page.enter-fade { opacity: 0; }
.page.leaving-fade { opacity: 0; }
.page.enter-zoom { transform: scale(.86); opacity: 0; transform-origin: var(--zo, 50% 60%); }
.page.leaving-zoom { transform: scale(.9); opacity: 0; transform-origin: var(--zo, 50% 60%); }
.page.pushed { transform: translateX(-26%); opacity: .92; }
.page.dimmed { filter: brightness(.92); }

/* ---- 舞台提示 ---- */
.stage-tip {
  font-size: 12px;
  color: rgba(230, 232, 236, .45);
  letter-spacing: .3px;
  text-align: center;
}
@media (max-height: 900px) { .stage-tip { display: none; } }

/* =========================================================
 * 全屏自适应模式（html.fs）
 * 由 main.js 的 applyLayout() 在手机 / 触屏设备上自动开启：
 * 无外壳、无圆角、无缩放，屏幕铺满视口并遵循系统安全区。
 * ======================================================= */
html.fs, html.fs body { height: 100%; overscroll-behavior: none; }
html.fs body {
  background: #000;
  align-items: stretch;
  justify-content: stretch;
}
html.fs .stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 0;
  align-items: stretch;
  justify-content: stretch;
}
html.fs .device {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: none !important;
}
html.fs .dev-body {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html.fs .dev-screen-wrap {
  flex: none;
  width: var(--stage-w);
  height: var(--stage-h);
  border-radius: 0;
  box-shadow: none;
}
html.fs .dev-screen {
  /* 设计稿尺寸（≈440 宽），由 transform: scale 等比缩到真实视口，
     保证任意小屏都能按比例整屏显示，不再溢出 / 显得过大 */
  width: var(--screen-w);
  height: var(--screen-h);
  border-radius: 0;
  transform: scale(var(--ui-scale, 1));
  transform-origin: 0 0;
}
html.fs .dev-glare,
html.fs .dev-shadow,
html.fs .side-btn,
html.fs .side-left,
html.fs .stage-tip { display: none !important; }

/* 手势区在真机上加高，贴合底部安全区 */
html.fs .gesture-bar {
  height: calc(var(--safe-b) + 16px);
}
html.fs .gesture-bar::after { opacity: 0 !important; }

/* 灵动岛跟随顶部安全区 */
html.fs .island { top: max(9px, calc(env(safe-area-inset-top, 0px) * .18)); }