/* ============================================================
   数智 Math Game · 星空版（夜间主题）扩展样式（css/theme-night.css）
   规范：零外部资源（无图片/字体/CDN/外链）；纯 CSS 动画（不占用主线程逐帧 JS）；
        尊重 prefers-reduced-motion；320px 起不出现横向滚动；不以颜色单独传递信息。

   工作原理
   1) <html data-theme="day|night"> 由 js/theme.js 写入（默认跟随系统 prefers-color-scheme），
      本文件只负责按该属性覆盖 CSS 变量与少量组件细节，白天外观与旧版完全一致。
   2) 夜间星空背景 #gmSky 由 js/theme.js 一次性生成（默认 ≤120 颗星），
      之后全部靠 CSS keyframes 缓动闪烁，不注册 resize / rAF / interval。
   3) 8 款游戏模块（games/<key>/game.js）已被冻结验收、含硬编码浅色，不在允许改动范围。
      夜间对「舞台内已挂载的游戏 UI」整体施加 invert(1) hue-rotate(180deg) 反向滤镜，
      用一条规则让全部 8 款游戏一致变暗且保持原有配色关系；白天不加任何滤镜。
   ============================================================ */

/* ---------------- 一、夜间配色（data-theme="night"） ---------------- */
html[data-theme="night"] {
  color-scheme: dark;
  /* 底色：深空渐变，避免纯黑 */
  --g-night-1: #070c1c;
  --g-night-2: #0d1730;
  --g-night-3: #141f45;
  --g-bg: linear-gradient(180deg, #070c1c 0%, #0d1730 45%, #131d3d 100%);
  --g-bg-solid: #0b1226;
  /* 文字 */
  --g-ink: #e7eeff;
  --g-ink-2: #a7b8dc;
  --g-ghost: #7b8db3;
  /* 强调色：星辉蓝；金：月华金 */
  --g-accent: #8cb9ff;
  --g-accent-2: #bcd7ff;
  --g-accent-soft: rgba(140, 185, 255, .14);
  --g-gold: #f2d18b;
  --g-gold-soft: rgba(242, 209, 139, .15);
  /* 语义色 */
  --g-ok: #6ee7a8;
  --g-bad: #ff8f85;
  --g-warn: #f3c67e;
  /* 卡片：玻璃拟态（半透明 + 背景模糊） */
  --g-card: rgba(24, 36, 70, .58);
  --g-card-2: rgba(30, 43, 82, .72);
  --g-line: rgba(158, 190, 255, .16);
  --g-line-2: rgba(158, 190, 255, .30);
  --g-btn-bg: rgba(255, 255, 255, .07);
  --g-btn-bg-hover: rgba(255, 255, 255, .13);
  --g-shadow: 0 2px 12px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .07);
  --g-shadow-lg: 0 18px 50px rgba(0, 0, 0, .58);
  /* 国风（华夏算馆）夜间：暖木深色，不用生硬反色 */
  --g-huaxia-bg: rgba(58, 42, 26, .72);
  --g-huaxia-ink: #f4e8d0;
  --g-huaxia-red: #ff9f8c;
  /* 舞台（含游戏模块）夜间刷底：内置游戏经反向滤镜后正好落在这个色上 */
  --g-stage-bg: linear-gradient(180deg, #1a2140 0%, #10162c 100%);
  /* 浮层遮罩 */
  --g-mask: rgba(4, 8, 20, .72);
}

/* 白天：保持既有明亮国风儿童风（仅补齐新增变量，避免与 game.css 冲突） */
html[data-theme="day"] {
  color-scheme: light;
  --g-bg-solid: #f4f8fd;
  --g-accent-soft: rgba(43, 108, 176, .10);
  --g-gold-soft: rgba(200, 162, 74, .14);
  --g-ghost: #9fb0c2;
  --g-btn-bg: #ffffff;
  --g-btn-bg-hover: #ffffff;
  --g-line-2: #c6d7ea;
  --g-shadow-lg: 0 12px 40px rgba(20, 32, 45, .25);
  --g-stage-bg: #ffffff;
  --g-mask: rgba(20, 32, 45, .45);
}

/* 无 data-theme（极端兜底）：沿用白天 */
html:not([data-theme]) {
  color-scheme: light;
  --g-bg-solid: #f4f8fd;
  --g-accent-soft: rgba(43, 108, 176, .10);
  --g-gold-soft: rgba(200, 162, 74, .14);
  --g-ghost: #9fb0c2;
  --g-btn-bg: #ffffff;
  --g-btn-bg-hover: #ffffff;
  --g-line-2: #c6d7ea;
  --g-shadow-lg: 0 12px 40px rgba(20, 32, 45, .25);
  --g-stage-bg: #ffffff;
  --g-mask: rgba(20, 32, 45, .45);
}

/* ---------------- 二、切主题时的平滑过渡（不闪不跳） ---------------- */
/* 只过渡颜色相关属性，绝不过渡布局属性（width/height/padding 等），避免布局跳动。
   页面内的 .gm-sky 由 JS 加 .gm-themefade，避免首屏淡入被误认为主题切换动画。 */
.gm-themefade,
.gm-themefade body,
.gm-themefade .gm-top,
.gm-themefade .gm-btn,
.gm-themefade .gm-cat,
.gm-themefade .gm-lv,
.gm-themefade .gm-pill,
.gm-themefade .gm-game,
.gm-themefade .gm-block,
.gm-themefade .gm-stage,
.gm-themefade .gm-panel,
.gm-themefade .gm-step-card,
.gm-themefade .gm-toast,
.gm-themefade .gm-result-card,
.gm-themefade .gm-login-card,
.gm-themefade .gm-input,
.gm-themefade .gm-panel-note,
.gm-themefade .kousuan-card,
.gm-themefade .kousuan-key,
.gm-themefade .tag {
  transition: background-color .38s ease, color .38s ease, border-color .38s ease,
    box-shadow .38s ease, background-image .38s ease, opacity .38s ease;
}

/* body 背景是渐变：不能靠 background-color 过渡，改用叠加层做淡入淡出 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--g-bg); opacity: 0; transition: opacity .38s ease;
}
html[data-theme="night"] body::before { opacity: 1; }

/* ---------------- 三、星空背景层（#gmSky） ---------------- */
#gmSky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  contain: strict;                 /* 隔离布局/绘制，绝不产生滚动条 */
  background: linear-gradient(180deg, #070c1c 0%, #0d1730 45%, #131d3d 100%);
  opacity: 0; visibility: hidden;
}
html[data-theme="night"] #gmSky { opacity: 1; visibility: visible; }

/* 极淡星云光晕（两层径向渐变 + 大半径模糊，静态不耗电） */
#gmSky::before,
#gmSky::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(46px);
}
#gmSky::before {
  width: 62vw; height: 62vw; min-width: 280px; min-height: 280px;
  left: -14vw; top: -10vh; background: radial-gradient(circle at 50% 50%, rgba(88, 126, 255, .30), rgba(88, 126, 255, 0) 70%);
}
#gmSky::after {
  width: 72vw; height: 72vw; min-width: 320px; min-height: 320px;
  right: -20vw; top: 34vh; background: radial-gradient(circle at 50% 50%, rgba(150, 96, 232, .24), rgba(150, 96, 232, 0) 70%);
}

/* 月亮：夜间显示，带极淡月晕呼吸 */
.gm-sky-moon {
  position: absolute; right: 8%; top: 7%; width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffdf3 0%, #ffeec2 46%, #f0dcae 72%, rgba(240, 220, 174, 0) 74%);
  box-shadow: 0 0 26px 10px rgba(255, 238, 194, .30), 0 0 74px 30px rgba(255, 238, 194, .14);
}
.gm-sky-moon::after {
  content: ""; position: absolute; left: -6px; top: 12px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(24, 36, 70, .16); box-shadow: 16px 12px 0 -4px rgba(24, 36, 70, .13), 6px 26px 0 -6px rgba(24, 36, 70, .12);
}

/* 星空层整体在夜间缓慢漂浮（只动 transform，GPU 合成） */
html[data-theme="night"] .gm-sky-layer {
  animation: gmSkyDrift 44s ease-in-out infinite alternate;
}
@keyframes gmSkyDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-1.4%, -1.1%, 0); }
}

/* 星星：亮度缓动闪烁（每颗用内联 --iv 控制节奏，避免整片同频闪） */
.gm-sky-layer { position: absolute; inset: 0; }
.gm-sky-layer i {
  position: absolute; display: block; border-radius: 50%;
  background: var(--g-star, #dbe8ff);
  box-shadow: 0 0 6px rgba(190, 214, 255, .55);
  animation-name: gmTwinkle; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
  will-change: opacity;
}
@keyframes gmTwinkle {
  0%, 100% { opacity: .18; }
  50% { opacity: .98; }
}
/* 亮星：稍微大一点，额外带一圈微光 */
.gm-sky-layer i.big { box-shadow: 0 0 10px 2px rgba(190, 214, 255, .55); }
/* 星辉金（月华金）的少数暖色星，给夜空加一点国风金调 */
.gm-sky-layer i.gold { --g-star: #f6dfa8; box-shadow: 0 0 8px rgba(246, 223, 168, .55); }

/* 流星：纯 CSS，间隔约 9~17 秒（见 JS 内联 delay），不参与 JS 计时 */
.gm-sky-shoot {
  position: absolute; width: 132px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(211, 230, 255, .95) 72%, #ffffff);
  animation: gmShoot 11s linear infinite;
}
@keyframes gmShoot {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(21deg) scaleX(.5); }
  5% { opacity: 1; }
  22% { opacity: 0; transform: translate3d(-320px, 130px, 0) rotate(21deg) scaleX(1); }
  100% { opacity: 0; transform: translate3d(-320px, 130px, 0) rotate(21deg) scaleX(1); }
}

/* 白天：星空层彻底移出渲染（省电），星星元素仍保留在 DOM 中 */
html[data-theme="day"] #gmSky,
html:not([data-theme]) #gmSky { display: none; }
html[data-theme="day"] #gmSky .gm-sky-layer i,
html:not([data-theme]) #gmSky .gm-sky-layer i { display: none; }

/* ---------------- 四、按变量落到组件（夜间玻璃拟态） ---------------- */
html[data-theme="night"] body { color: var(--g-ink); background: var(--g-bg-solid); }

html[data-theme="night"] .gm-top {
  background: rgba(11, 18, 38, .72);
  border-bottom-color: var(--g-line);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
}
html[data-theme="night"] .gm-brand { color: var(--g-ink); }
html[data-theme="night"] .gm-brand .logo { color: #0b1226; }
html[data-theme="night"] a { color: var(--g-accent); }
html[data-theme="night"] .ghost { color: var(--g-ghost); }

html[data-theme="night"] .gm-btn {
  background: var(--g-btn-bg); border-color: var(--g-line-2); color: var(--g-ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html[data-theme="night"] .gm-btn:hover { background: var(--g-btn-bg-hover); box-shadow: var(--g-shadow); }
html[data-theme="night"] .gm-btn.primary {
  background: linear-gradient(135deg, #4f86e6, #7fb0ff); border-color: rgba(190, 214, 255, .5);
  color: #0a1022; font-weight: 700;
}
html[data-theme="night"] .gm-btn.ghost { background: transparent; }

/* 卡片统一玻璃拟态（半透明 + 背景模糊，元素数量受控，性能可接受） */
html[data-theme="night"] .gm-game,
html[data-theme="night"] .gm-block,
html[data-theme="night"] .gm-panel,
html[data-theme="night"] .gm-step-card,
html[data-theme="night"] .gm-pill,
html[data-theme="night"] .gm-cat,
html[data-theme="night"] .gm-lv,
html[data-theme="night"] .gm-result-card,
html[data-theme="night"] .gm-login-card,
html[data-theme="night"] .gm-input {
  background-color: var(--g-card);
  border-color: var(--g-line);
  color: var(--g-ink);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
html[data-theme="night"] .gm-cat.on {
  background: linear-gradient(135deg, #4f86e6, #7fb0ff); border-color: rgba(190, 214, 255, .5);
  color: #0a1022; font-weight: 700;
}
html[data-theme="night"] .gm-lv .st { color: var(--g-gold); }
html[data-theme="night"] .gm-lv .st.zero { color: #3d4c73; }
html[data-theme="night"] .gm-game .g-desc,
html[data-theme="night"] .gm-game .g-name { color: var(--g-ink); }
html[data-theme="night"] .gm-game .g-meta,
html[data-theme="night"] .gm-game .g-prog { color: var(--g-ink-2); }
html[data-theme="night"] .gm-game.huaxia {
  background-color: var(--g-huaxia-bg); border-color: rgba(242, 209, 139, .32);
}
html[data-theme="night"] .gm-game.huaxia .g-name { color: var(--g-huaxia-red); }
html[data-theme="night"] .gm-panel-note {
  background: var(--g-accent-soft); color: var(--g-accent-2); border-radius: 8px;
}
html[data-theme="night"] .gm-panel-row { color: var(--g-ink); }
html[data-theme="night"] .gm-rank-list li { border-bottom-color: var(--g-line); }
html[data-theme="night"] .gm-rank-list .sc { color: var(--g-gold); }
html[data-theme="night"] .tag { background: var(--g-accent-soft); color: var(--g-accent-2); }
html[data-theme="night"] .tag.ghost { background: rgba(255, 255, 255, .07); color: var(--g-ink-2); }
html[data-theme="night"] .gm-input::placeholder { color: var(--g-ghost); }
html[data-theme="night"] .gm-overlay { background: var(--g-mask); }
html[data-theme="night"] .gm-result-card,
html[data-theme="night"] .gm-login-card {
  background-color: var(--g-card-2);
  box-shadow: var(--g-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-theme="night"] .gm-result-stars { color: var(--g-gold); text-shadow: 0 0 14px rgba(242, 209, 139, .45); }
html[data-theme="night"] .gm-explain { border-top-color: var(--g-line); }
html[data-theme="night"] .gm-toast { background: rgba(220, 232, 255, .94); color: #0b1226; font-weight: 600; }
html[data-theme="night"] .gm-foot { border-top-color: var(--g-line); }
html[data-theme="night"] .gm-sec h2,
html[data-theme="night"] .gm-hero h1 { color: var(--g-ink); }

/* 舞台（闯关页）：给舞台刷夜间底色；游戏模块 UI 由反向滤镜统一变暗 */
html[data-theme="night"] .gm-stage { background: var(--g-stage-bg); border-color: var(--g-line); }
html[data-theme="night"] .gm-stage .gm-empty { color: var(--g-ink-2); }

/* 反向滤镜：只作用于舞台内已挂载的游戏 UI（提亮 & 保持原有配色关系）
   说明：8 款模块的样式在各自 game.js 内硬编码浅色且已冻结，这里用一条规则整体适配，
   保证「口算/24点/数独/七巧板/华容道/迷宫/九章/洛书」在夜间一致可读。 */
html[data-theme="night"] .gm-stage > * {
  filter: invert(1) hue-rotate(180deg);
}

/* 页面内容压在星空之上 */
html[data-theme="night"] .gm-hero,
html[data-theme="night"] .gm-wrap,
html[data-theme="night"] .gm-stage-wrap,
html[data-theme="night"] .gm-foot,
html[data-theme="night"] .gm-top { position: relative; z-index: 1; }
html[data-theme="night"] .gm-top { z-index: 30; }
html[data-theme="night"] .gm-side { z-index: 40; }

/* ---------------- 五、主题切换按钮 ---------------- */
.gm-theme-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 6px 12px;
  border: 1px solid var(--g-line-2); border-radius: 12px; cursor: pointer;
  background: var(--g-btn-bg); color: var(--g-ink);
  font-size: 15px; font-weight: 600; line-height: 1;
  font-family: inherit;
  white-space: nowrap;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .18s ease, transform .08s ease;
}
.gm-theme-btn:hover { background: var(--g-btn-bg-hover); box-shadow: var(--g-shadow); }
.gm-theme-btn:active { transform: translateY(1px); }
.gm-theme-btn:focus-visible { outline: 3px solid var(--g-accent); outline-offset: 2px; }
.gm-theme-btn .tt-ic { font-size: 17px; line-height: 1; }
html[data-theme="night"] .gm-theme-btn {
  background: rgba(255, 255, 255, .09); border-color: rgba(190, 214, 255, .34);
  color: var(--g-ink); box-shadow: 0 0 0 1px rgba(140, 185, 255, .10), 0 2px 10px rgba(0, 0, 0, .3);
}
html[data-theme="night"] .gm-theme-btn:hover { background: rgba(255, 255, 255, .16); }
/* 窄屏只留图标：保证闯关页顶栏不挤压、不溢出，热区仍 ≥44px */
@media (max-width: 430px) {
  .gm-theme-btn .tt-tx { display: none; }
  .gm-theme-btn { padding: 6px 10px; }
}

/* ---------------- 六、手机端省电与触控保护 ---------------- */
@media (max-width: 600px) {
  html[data-theme="night"] .gm-sky-moon { width: 44px; height: 44px; right: 10%; top: 5%; }
  .gm-sky-shoot { display: none; }            /* 手机端不跑流星，只留星星闪烁 */
  /* 分页玻璃模糊在低端机上代价偏高：手机端改成更高不透明度、少糊一层 */
  html[data-theme="night"] .gm-game,
  html[data-theme="night"] .gm-block,
  html[data-theme="night"] .gm-panel,
  html[data-theme="night"] .gm-step-card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(24, 36, 70, .78); }
  html[data-theme="night"] .gm-top { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

/* 不支持 backdrop-filter 的浏览器：退回较高不透明度纯色，保证可读 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  html[data-theme="night"] .gm-game,
  html[data-theme="night"] .gm-block,
  html[data-theme="night"] .gm-panel,
  html[data-theme="night"] .gm-step-card,
  html[data-theme="night"] .gm-result-card,
  html[data-theme="night"] .gm-login-card { background-color: rgba(24, 36, 70, .94); }
  html[data-theme="night"] .gm-top { background: rgba(11, 18, 38, .96); }
}

/* ---------------- 七、窄屏兜底：绝不横向溢出 ---------------- */
/* 【既有问题修复·与主题无关】.gm-play-grid 的单列轨道默认是 minmax(auto,1fr)，
   而 grid 子项默认 min-width:auto，于是子项的 min-content（如数独 9×9 棋盘）会把轨道顶宽：
   实测「数独」在 390px 视口下把 #gmStage/#gmPanel 顶到 385px（容器只有 362px），
   文档 scrollWidth 399 > innerWidth 390，出现横向滚动；resize 回调还会让它继续变宽（408/426）。
   这与主题无关（白天同样复现），但违反"320px 起不得出现横向滚动"，故在此按 grid 常规做法收敛：
   只把子项的最小宽度交给容器，不再改变任何视觉样式与模块内部实现。 */
.gm-play-grid > * { min-width: 0; }
.gm-play-grid { min-width: 0; }
#gmStage { overflow-x: auto; }              /* 极端情况下棋盘在舞台内滚动，而不是把整页顶宽 */
#gmPanel { overflow-x: hidden; }

@media (max-width: 380px) {
  html[data-theme="night"] .gm-sky-moon { display: none; }
  .gm-theme-btn { padding: 6px 10px; }
}

/* ---------------- 七之二、手机安全区（触控与底部手势条） ---------------- */
@media (max-width: 600px) {
  .gm-side { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
  .gm-theme-btn { max-width: 44vw; }
}

/* ---------------- 八、动效偏好 ---------------- */
/* 用户选择「减少动态效果」时：星空完全静止（不闪、不漂、不划流星），也没有过渡动画 */
@media (prefers-reduced-motion: reduce) {
  #gmSky,
  #gmSky::before,
  #gmSky::after,
  #gmSky .gm-sky-layer,
  #gmSky .gm-sky-layer i,
  #gmSky .gm-sky-shoot {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  #gmSky .gm-sky-layer i { opacity: .72; }
  #gmSky .gm-sky-shoot { opacity: 0; display: none; }
  .gm-themefade, .gm-themefade body, .gm-themefade .gm-top, .gm-themefade .gm-btn,
  .gm-themefade .gm-cat, .gm-themefade .gm-lv, .gm-themefade .gm-game, .gm-themefade .gm-block,
  .gm-themefade .gm-stage, .gm-themefade .gm-panel, .gm-themefade .gm-toast,
  .gm-themefade .gm-result-card, .gm-themefade .gm-login-card, body::before { transition: none !important; }
}