/* ============================================================
   桌面端（宽窗口 + 鼠标）适配：把手机版整页收进一个居中的「手机列」
   ------------------------------------------------------------
   页面是按手机宽度用 vw 排版的，电脑宽窗口里 1vw 就有十几像素，直接用会整体放大到不可用。
   这里不改任何尺寸口径，只做三件事：

     · #app 整体按 --ui-scale 缩放（宽度仍是 100vw，页面内所有 vw 尺寸口径不变）
       ⇒ 视觉上就是一条固定宽度、居中的窄列；
     · #frame 高度由 js/desktop-frame.js 同步成「缩放后的高度」，并 overflow:hidden
       裁掉未缩放布局的溢出 ⇒ 文档滚动区高度正确（否则底部会多出大片空白）；
· .desktopLayer 与 #app 同一缩放，但定位基准是窗口 ⇒ 底部操作栏 / 全屏浮层 / 状态提示
       滚动时原地不动，且与内容列逐像素对齐。

   is-desktop-frame 类与 --ui-scale 都由 js/desktop-frame.js 给出（判定条件只写一处），
   CSS 只认这个类。命中不了（手机 / 平板触摸设备、窄窗口、Android WebView）时本文件全部规则
   都不生效，页面行为与改造前一致。
   ============================================================ */

html.is-desktop-frame {
  --ui-scale: 1;              /* JS 覆盖；兜底 1 = 不缩放，避免 calc(100vw * var(--ui-scale)) 失效 */
  --page-canvas: #fff;        /* 窄列自身底色（页面可用同名变量覆盖，如登录页的灰底） */
}

/* ---------- 窄列之外：深色底，衬托中间的手机列 ---------- */
html.is-desktop-frame body {
  background: radial-gradient(120% 70% at 50% 0%, #1b1d21 0%, #0a0b0d 65%);
}

/* ---------- 内容列 ---------- */
html.is-desktop-frame #frame {
  position: relative;
  width: 100%;
  height: 100vh;              /* 兜底：JS 会同步成「缩放后的内容高度」 */
  min-height: 100vh;          /* 内容比窗口矮时（如登录页）也让窄列铺满一屏 */
  overflow: hidden;           /* 裁掉未缩放布局的溢出，让文档高度只听上面这个 height */
  background: var(--page-canvas);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html.is-desktop-frame #app {
  width: 100vw;               /* 关键：内容仍按真实窗口宽度排版，1vw 的口径不变 */
  /* 内容不足一屏时也让窄列铺满一屏（登录页白板、某天只有一两场球）：
     100vh / --ui-scale = 「一屏高」在缩放前坐标系里的长度，缩放后正好等于窗口高度 */
  min-height: calc(100vh / var(--ui-scale));
  transform: scale(var(--ui-scale));
  transform-origin: 0 0;
  /* 居中：百分比按「去掉滚动条后的宽度」算，与下面 .desktopLayer 的 left 同一口径 */
  margin-left: calc((100% - 100vw * var(--ui-scale)) / 2);
}

/* ---------- 吸附窗口的元素（底部操作栏 / 全屏浮层 / 状态提示） ---------- */
html.is-desktop-frame .desktopLayer {
  position: fixed;
  top: 0;
  left: calc((100% - 100vw * var(--ui-scale)) / 2);   /* 与 #app 左边缘对齐 */
  width: 100vw;
  height: calc(100vh / var(--ui-scale));             /* 缩放后正好是一屏高 */
  transform: scale(var(--ui-scale));
  transform-origin: 0 0;
  pointer-events: none;       /* 只有里面的元素吃点击，其余穿透给内容 */
  z-index: 20;                /* 默认与底部操作栏一致 */
}
html.is-desktop-frame .desktopLayer > * { pointer-events: auto; }

/* 层级对齐原页面：浮层 40 > 状态提示 30 > 底部操作栏 20（同 z-index 会按 DOM 顺序串层） */
html.is-desktop-frame .desktopLayer:has(> .pageNotice) { z-index: 30; }
html.is-desktop-frame .desktopLayer:has(> .seasonPicker, > .dayCalendar) { z-index: 40; }

/* 全屏浮层：铺满浮层（= 窗口可视区）。
   两个选择器（日期 / 赛季）都要写：它们画的是同一个东西，只给其中一个会漏。 */
html.is-desktop-frame .desktopLayer > .dayCalendar,
html.is-desktop-frame .desktopLayer > .seasonPicker { width: 100%; height: 100%; }