/*
 * 扫雷（MINESWEEPER）· 样式
 *
 * 版面只有四层，**整页不滚动**（长按插旗时页面跟着动是最难受的）：
 *   顶栏（按钮） / 副栏（剩雷 + 用时 + 最佳） / 提示一行 / 游戏区（吃掉剩下的全部空间）
 * 画布的尺寸不是 CSS 定的，是 `game.mjs` 的 `layout()` 按可用空间算出来写上去的
 * （画布铺满游戏区，**盘面**由 core.fitView 决定格子大小、居中画在里面）。
 */

/* ① [hidden] 必须压过作者样式 —— 下面的 .scores / .overlay / .title 都写了 display:flex，
      浏览器给 [hidden] 的 display:none 会被盖掉 → 面板一进页面就浮着、点「关闭」没反应。 */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0d1219;
  color: #e6edf7;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* 桌面：窗口居中浮在上面。
   浅色主题的壁纸 = **纯 CSS 画的 Windows XP 「Bliss」**（蓝天 + 白云 + 绿草坡），
   零素材、零依赖（这是本项目的红线），换主题时整体换掉。 */
.mine-app {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100vh;
  height: 100dvh;
  padding: 0 0 env(safe-area-inset-bottom);
  overflow: hidden;
}

/* 桌面区：窗口在它里面居中（壁纸铺在 html / body 上） */
.desk-area {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* 🔴 壁纸铺在 **html**（天空）与 **body**（白云 + 草坡）上，而不是 `.mine-app`：
   踩过 —— 后面还有一条 `.theme-light .mine-app { background: … }`（shorthand），
   把 `.mine-app` 上的壁纸整个盖成了灰底，手机上就只剩灰的。
   层层分开写之后，任何一条出问题都还能看到天空，不至于退回纯灰。 */
html.theme-light {
  background-color: #14418f;
  /* 第一层是自绘的 Bliss 风格壁纸（见 img/CREDITS.md）；文件不在/加载失败时，
     下面那层渐变还兜着，绝不会变成一块纯色 */
  background-image:
    url(../img/wallpaper.jpg),
    linear-gradient(180deg, #0f3f8f 0%, #2a63c4 34%, #6ba7e6 62%, #b9d9f2 86%, #dcecf8 100%);
  background-repeat: no-repeat;
  background-position: center center, center center;
  background-size: cover, 100% 100%;
}

/* ⚠️ body 上不许再叠任何背景图：壁纸是 html 上那张贴图，body 再叠一层渐变
   就会盖在照片上面（踩过：残留的「云 + 草坡」渐变变成了照片上几个大白圆圈）。
   兜底交给 html 那一层的渐变就够了。 */
.theme-light body {
  background-color: transparent;
}

.theme-light .mine-app {
  background-color: transparent;   /* ⚠️ 只能用 background-color：简写会连背景图一起清掉 */
}

/* ---------- 窗口：标题栏 + 工具栏 + 液晶面板 + 状态行 + 雷区 ---------- */

.window {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
  max-height: 100%;
}

.window__title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}

.window__icon { font-size: 13px; }

.window__name {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.window__sysbtns {
  display: flex;
  gap: 3px;
  font-style: normal;
}

.window__sysbtns i {
  display: inline-block;
  width: 16px;
  height: 14px;
  line-height: 13px;
  text-align: center;
  font-style: normal;
  font-size: 10px;
}

.theme-light .window {
  background: #c0c0c0;
  box-shadow: inset -2px -2px 0 #000000, inset 2px 2px 0 #ffffff,
    inset -3px -3px 0 #808080, inset 3px 3px 0 #dfdfdf,
    0 14px 40px rgba(0, 0, 0, 0.45);
  padding: 3px;
}

.theme-light .window__title {
  color: #ffffff;
  background: linear-gradient(180deg, #2f6fd0 0%, #1c4fa1 55%, #2a63c4 100%);
  margin-bottom: 3px;
}

.theme-light .window__sysbtns i {
  background: #c0c0c0;
  color: #000000;
  box-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff;
}

.theme-dark .window {
  background: #101720;
  border: 1px solid #2b3648;
  border-radius: 16px;
  padding: 4px 6px 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.theme-dark .window__title { color: #93a9c4; }

.theme-dark .window__sysbtns i {
  background: #1f2937;
  border-radius: 4px;
  color: #93a9c4;
}

/* ---------- 顶栏 ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: calc(6px + env(safe-area-inset-top)) 8px 6px;
  flex: 0 0 auto;
}

/* 浅色主题：顶栏做成 Windows 98 任务栏那种「一条灰条 + 3D 边」 */
.theme-light .topbar {
  background: #c0c0c0;
  padding: calc(4px + env(safe-area-inset-top)) 6px 4px;
  box-shadow: inset 0 2px 0 #ffffff, inset 0 -2px 0 #808080, 0 2px 6px rgba(0, 0, 0, 0.28);
}

.theme-dark .topbar { background: transparent; }

.back-link {
  color: #c7d7ea;
  text-decoration: none;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}

.back-link:active { background: rgba(255, 255, 255, 0.16); }

.tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  min-width: 34px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #e9f1fb;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.icon-btn--wide {
  font-size: 12px;
  padding: 0 8px;
}

.icon-btn:active { transform: translateY(1px); }

.icon-btn--off { opacity: 0.45; }

/* 插旗模式开着：整颗按钮点亮（🚩 是彩色 emoji，靠底色和描边区分，不靠 color） */
.icon-btn--on {
  background: rgba(244, 63, 94, 0.28);
  border-color: rgba(244, 63, 94, 0.75);
}

/* ---------- 副栏：剩雷 + 用时 + 最佳 ---------- */

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 12px;
  flex: 0 0 auto;
}

.stat {
  margin: 0;
  font-size: 12px;
  color: #93a9c4;
  white-space: nowrap;
}

.stat__value {
  color: #ffffff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

.stat__label { margin-left: 0; }

.mode {
  margin: 0;
  padding: 0 12px 3px;
  font-size: 11px;
  color: #7f95ae;
  text-align: center;
  flex: 0 0 auto;
}

/* ---------- 游戏区 ---------- */

.stage {
  position: relative;
  flex: 0 0 auto;      /* 贴着雷区：窗口高度 = 标题栏 + 工具栏 + 液晶 + 状态行 + 雷区，不留空 */
  overflow: hidden;
}

.board {
  display: block;
  /* 盘面全靠手指在画布上：禁掉浏览器的滚动 / 缩放 / 长按选择 */
  touch-action: none;
  cursor: pointer;
}

/* ---------- 结束横幅：踩雷红 / 通关金（比结算面板先出现 0.9 秒） ---------- */

.banner {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: rgba(12, 18, 28, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
  z-index: 6;
}

.banner--lost {
  border-color: #f87171;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.22), 0 10px 26px rgba(0, 0, 0, 0.5);
  color: #fecaca;
}

.banner--won {
  border-color: #fbbf24;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.22), 0 10px 26px rgba(0, 0, 0, 0.5);
  color: #fde68a;
}

/* ---------- 缩放条：盘面装不下 / 格子偏小时出现，**左下角** ----------
   用户口径：双指只能放大，**缩小只能点这里的 −**。 */

.zoombar {
  position: absolute;
  left: 10px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

.zoombar__btn {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(16, 23, 32, 0.86);
  color: #e9f1fb;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.zoombar__btn:active { transform: translateY(1px); }

.zoombar__btn--fit { font-size: 15px; }

/* ---------- 经典面板：剩雷液晶 / 笑脸 / 计时液晶 ----------
   三块都是 `game.mjs` 现场画的（7 段数码管 + 笑脸），没有任何字体或图片依赖。
   面板宽度由 JS 设成「盘面宽度」（跟 1990 年那版窗口一样宽）。 */

.panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0 0 2px;
  padding: 4px 6px;
  flex: 0 0 auto;
  background: transparent;      /* 底色交给窗口（浅色 = 经典灰，深色 = 暗） */
}

.panel__box {
  line-height: 0;
  padding: 2px;
  background: #000;
  /* 凹陷的液晶窗口 */
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

.led {
  display: block;
  image-rendering: pixelated;
}

.panel__face {
  padding: 0;
  border: 0;
  line-height: 0;
  cursor: pointer;
  background: #c0c0c0;
  /* 凸起的方按钮 */
  box-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff,
    inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

.panel__face:active {
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

.face { display: block; }

/* 深色主题下的面板：暗底 + 暗红液晶，笑脸按钮变成圆角暗块 */
.theme-dark .panel { background: transparent; }

.theme-dark .panel__box {
  background: #0b0f16;
  box-shadow: inset 1px 1px 0 #05070d, inset -1px -1px 0 #2b3648;
}

.theme-dark .panel__face {
  background: #1f2937;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #2b3648;
}

/* ---------- 提示条 ---------- */

.toast {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  margin: 0;
  max-width: 88%;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(10, 16, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e9f1fb;
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}

/* ---------- 通用按钮 ---------- */

.btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.09);
  color: #e9f1fb;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(180deg, #7dd3fc, #0284c7);
  border-color: rgba(255, 255, 255, 0.3);
  color: #04202f;
  font-weight: 700;
}

.btn--ghost {
  background: transparent;
  color: #c7d7ea;
}

.btn--small { padding: 8px 14px; font-size: 14px; }

/* ---------- 覆盖面板：暂停 / 结束 / 主界面 / 高分榜 ---------- */

.overlay,
.title,
.scores {
  position: absolute;
  inset: 0;
  overflow-y: auto;         /* 主界面内容比窗口高时能滚，不许顶出去 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  background: rgba(7, 12, 19, 0.86);
  backdrop-filter: blur(2px);
  z-index: 8;
}

/* ⚠️ 居中 + 可滚动是互斥的：`justify-content: center` 在内容超高时会把**顶上那截**
   顶到滚不到的地方（主界面「开始游戏 / 高分榜 / 提示」就是这么被切掉的）。
   正解：靠 `margin-block: auto` 做「放得下就居中、放不下就从顶部可滚」。 */
.overlay,
.title,
.scores {
  justify-content: flex-start;
}

.overlay > :first-child,
.title > :first-child,
.scores > :first-child { margin-top: auto; }

.overlay > :last-child,
.title > :last-child,
.scores > :last-child { margin-bottom: auto; }

/* 通关 / 踩雷是**两副面孔**（用户口径：「被炸了和全解开了界面太相似，看不出来」）：
   通关金框 + 浅金标题，踩雷红框 + 浅红标题，暂停那种中性的保持原样。 */
.overlay--won {
  background: radial-gradient(circle at 50% 38%, rgba(251, 191, 36, 0.18), rgba(7, 12, 19, 0.9) 68%);
  box-shadow: inset 0 0 0 3px rgba(251, 191, 36, 0.55);
}

.overlay--won .overlay__title {
  color: #fde68a;
  text-shadow: 0 2px 18px rgba(251, 191, 36, 0.45);
  font-size: 27px;
}

.overlay--lost {
  background: radial-gradient(circle at 50% 38%, rgba(248, 113, 113, 0.2), rgba(7, 12, 19, 0.92) 68%);
  box-shadow: inset 0 0 0 3px rgba(248, 113, 113, 0.55);
}

.overlay--lost .overlay__title {
  color: #fecaca;
  text-shadow: 0 2px 18px rgba(248, 113, 113, 0.45);
  font-size: 27px;
}

/* 通关面板里的主按钮变金色，踩雷时变红 —— 一眼就知道是哪种结局 */
.overlay--won .btn--primary {
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  color: #3b1d05;
}

.overlay--lost .btn--primary {
  background: linear-gradient(180deg, #fca5a5, #dc2626);
  color: #2a0a0a;
}

.overlay__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.overlay__stats {
  margin: 0;
  font-size: 13px;
  color: #cfe0f2;
  line-height: 1.6;
}

.overlay__tip {
  margin: 0;
  font-size: 12px;
  color: #8aa3bd;
}

.overlay__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.save-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.save-row__input {
  width: 132px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  font-size: 15px;
  font-family: inherit;
}

/* ---------- 主界面 ---------- */

.title__card {
  max-width: 340px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.title__mines {
  margin: 0;
  font-size: 28px;
  letter-spacing: 4px;
}

.title__name {
  margin: 6px 0 2px;
  font-size: 26px;
  letter-spacing: 4px;
}

.title__sub {
  margin: 0 0 10px;
  font-size: 11px;
  color: #8aa3bd;
  letter-spacing: 1px;
}

.title__rules {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 13px;
  line-height: 1.75;
  color: #d5e4f4;
}

.title__rules b { color: #7dd3fc; }

/* 难度三连：选中的那颗亮起来（扫雷的难度差别很大，必须一眼看出现在选的是哪个） */
.diff {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.diff__btn {
  flex: 1 1 auto;
  padding: 8px 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: #d5e4f4;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.diff__btn--on {
  background: linear-gradient(180deg, #7dd3fc, #0284c7);
  border-color: rgba(255, 255, 255, 0.3);
  color: #04202f;
  font-weight: 700;
}

.title__btn { min-width: 190px; }

.title__hint {
  margin: 0;
  max-width: 320px;
  font-size: 11px;
  color: #7f95ae;
  line-height: 1.5;
}

/* ---------- 高分榜 ---------- */

.scores__title {
  margin: 0;
  font-size: 18px;
}

.scores__note {
  margin: 0;
  font-size: 11px;
  color: #8aa3bd;
}

.scores__list {
  margin: 0;
  padding: 0;
  list-style: none;
  width: min(320px, 88vw);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scores__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 13px;
}

.scores__rank {
  width: 18px;
  color: #7dd3fc;
  font-weight: 700;
}

.scores__name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.scores__meta {
  color: #8aa3bd;
  font-size: 11px;
  white-space: nowrap;
}

.scores__score {
  min-width: 46px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scores__empty {
  padding: 10px;
  color: #8aa3bd;
  font-size: 13px;
}

/* ==================================================================== *
 * 浅色主题 = 复刻 1990 年那版 Windows 扫雷（用户口径：「100% 复刻这个界面」）
 *
 * 做法：**其他样式一个字不改**，全部用 `.theme-light …` 覆盖 ——
 * 深色主题因此跟改动前的观感完全一致（用户口径：「深色可以用你现在这个」）。
 * 经典那套的硬规矩：
 *   ① 一个圆角都没有（`border-radius: 0`）；
 *   ② 立体感全部来自「左上白 + 右下深灰 + 外圈黑」三色 2px 描边（`box-shadow` inset）；
 *   ③ 字体是 Tahoma / MS Sans Serif 那种无衬线小字，纯黑；
 *   ④ 面板/按钮的底色就是 `#c0c0c0`。
 * ==================================================================== */

.theme-light body {
  color: #000000;
  font-family: Tahoma, "MS Sans Serif", Verdana, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 顶栏：经典工具栏（凸起小方按钮） */
.theme-light .back-link,
.theme-light .icon-btn {
  border: 0;
  border-radius: 0;
  background: #c0c0c0;
  color: #000000;
  font-size: 13px;
  height: 26px;
  min-width: 30px;
  box-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff,
    inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

.theme-light .back-link { line-height: 26px; padding: 0 8px; }

.theme-light .icon-btn:active,
.theme-light .back-link:active {
  transform: none;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

.theme-light .icon-btn--wide { font-size: 12px; }

/* 🚩 开着 / 🔇 关着：经典界面里没有彩色状态，用「按下去」来表示 */
.theme-light .icon-btn--on,
.theme-light .icon-btn--off {
  opacity: 1;
  background: #b0b0b0;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

/* 经典面板已经显示了剩雷与计时，那条老副栏就收起来 */
.theme-light .statusbar { display: none; }

/* 提示行 = 经典状态栏 */
.theme-light .mode {
  color: #000000;
  font-size: 12px;
  padding: 3px 6px;
  margin: 2px 0 4px;
  background: #c0c0c0;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

/* 游戏区 = 凹陷的雷区边框 */
.theme-light .stage {
  background: #c0c0c0;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff,
    inset 2px 2px 0 #000000;
}

/* 提示条 / 横幅：灰底黑字，边框也别圆 */
.theme-light .toast {
  border-radius: 0;
  background: #ffffe1;
  border: 1px solid #000000;
  color: #000000;
  font-size: 12px;
}

.theme-light .banner {
  border-radius: 0;
  background: #c0c0c0;
  color: #000000;
  border-width: 2px;
}

.theme-light .banner--lost { border-color: #ff0000; box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3); color: #800000; }
.theme-light .banner--won { border-color: #000080; box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.3); color: #000080; }

/* 缩放条：经典小方按钮（位置在左下角，见上面 .zoombar） */
.theme-light .zoombar__btn {
  border-radius: 0;
  border: 0;
  background: #c0c0c0;
  color: #000000;
  box-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff,
    inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

.theme-light .zoombar__btn:active {
  transform: none;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

/* 面板（暂停 / 结算 / 主界面 / 高分榜）= 经典对话框 */
.theme-light .overlay,
.theme-light .title,
.theme-light .scores {
  border-radius: 0;
  background: #c0c0c0;
  backdrop-filter: none;
  color: #000000;
  box-shadow: inset -2px -2px 0 #000000, inset 2px 2px 0 #ffffff,
    inset -3px -3px 0 #808080, inset 3px 3px 0 #dfdfdf;
}

/* 通关 / 踩雷仍是两副面孔：经典里用蓝 / 红标题区分 */
.theme-light .overlay--won {
  background: #c0c0c0;
  box-shadow: inset 0 0 0 4px #000080, inset -2px -2px 0 #000000, inset 2px 2px 0 #ffffff;
}

.theme-light .overlay--won .overlay__title { color: #000080; text-shadow: none; }

.theme-light .overlay--lost {
  background: #c0c0c0;
  box-shadow: inset 0 0 0 4px #ff0000, inset -2px -2px 0 #000000, inset 2px 2px 0 #ffffff;
}

.theme-light .overlay--lost .overlay__title { color: #800000; text-shadow: none; }

.theme-light .overlay__stats { color: #000000; }
.theme-light .overlay__tip { color: #404040; }

/* 按钮：经典 3D 方按钮（主按钮不搞彩色渐变，靠「默认按钮」的粗黑边区分） */
.theme-light .btn {
  border: 0;
  border-radius: 0;
  background: #c0c0c0;
  color: #000000;
  font-size: 14px;
  font-family: inherit;
  box-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff,
    inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

.theme-light .btn:active {
  transform: none;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

.theme-light .btn--primary {
  background: #c0c0c0;
  color: #000000;
  font-weight: 700;
  box-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff,
    inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf,
    0 0 0 1px #000000;
}

.theme-light .btn--ghost { background: #c0c0c0; color: #000000; }

.theme-light .save-row__input {
  border-radius: 0;
  border: 0;
  background: #ffffff;
  color: #000000;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
}

/* 主界面卡片：经典凹陷板 */
.theme-light .title__card {
  border-radius: 0;
  background: #c0c0c0;
  border: 0;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

.theme-light .title__rules { color: #000000; }
.theme-light .title__rules b { color: #000080; }
.theme-light .title__sub,
.theme-light .title__hint,
.theme-light .scores__note,
.theme-light .scores__meta { color: #404040; }

/* 难度三连：选中的那颗是「按下」的样子 */
.theme-light .diff__btn {
  border: 0;
  border-radius: 0;
  background: #c0c0c0;
  color: #000000;
  box-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff,
    inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

.theme-light .diff__btn--on {
  background: #b0b0b0;
  color: #000000;
  font-weight: 700;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

/* 高分榜行：白底 / 深灰字 */
.theme-light .scores__row { background: #ffffff; color: #000000; }
.theme-light .scores__rank { color: #000080; }
.theme-light .scores__score { color: #000000; }
.theme-light .scores__empty { color: #404040; }

/* ---------- 高分榜的难度分栏（初级 / 中级 / 高级 各一个榜） ---------- */

.scores__tabs {
  display: flex;
  gap: 6px;
  margin: 2px 0 4px;
}

.scores__tab {
  flex: 1 1 auto;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #dbe7f5;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.scores__tab--on {
  background: linear-gradient(180deg, #7dd3fc, #0284c7);
  border-color: rgba(255, 255, 255, 0.3);
  color: #04202f;
  font-weight: 700;
}

/* 高分榜必须压在「已暂停」面板之上（原来两个都是 z-index 8，点🏆会看到暂停面板） */
.scores { z-index: 9; }

/* ---------- 确认框：玩到一半要返回 / 重开 / 换难度时先问一声 ---------- */

.confirm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: min(300px, 84vw);
  padding: 16px;
  border-radius: 14px;
  background: rgba(10, 16, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  z-index: 10;
}

.confirm__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: #e6eef8;
}

.confirm__actions {
  display: flex;
  gap: 8px;
}

/* 浅色（经典）主题：确认框 = 经典对话框 */
.theme-light .confirm {
  border-radius: 0;
  background: #c0c0c0;
  border: 0;
  color: #000000;
  box-shadow: inset -2px -2px 0 #000000, inset 2px 2px 0 #ffffff,
    inset -3px -3px 0 #808080, inset 3px 3px 0 #dfdfdf, 0 10px 30px rgba(0, 0, 0, 0.5);
}

.theme-light .confirm__text { color: #000000; }

.theme-light .scores__tab {
  border-radius: 0;
  border: 0;
  background: #c0c0c0;
  color: #000000;
  box-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff,
    inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

.theme-light .scores__tab--on {
  background: #b0b0b0;
  color: #000000;
  font-weight: 700;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}


/* ---------- 主界面（经典主题）：更紧凑一点，别把内容顶出窗口 ---------- */

.theme-light .title__card { max-width: 320px; padding: 10px 12px; }
.theme-light .title__mines { font-size: 24px; }
.theme-light .title__name { font-size: 22px; margin: 4px 0 2px; }
.theme-light .title__rules { font-size: 12.5px; line-height: 1.45; margin-bottom: 6px; }
.theme-light .title__btn { min-width: 170px; padding: 8px 14px; font-size: 14px; }
.theme-light .title { gap: 5px; padding: 8px; }   /* 卡片更紧凑：16×20 的窗口里刚好放得下 */

/* ---------- 高分榜：主指标是「用时」（用户口径：高分榜应该是秒数） ---------- */

.scores__time {
  min-width: 78px;
  text-align: right;
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  color: #7dd3fc;
}

.theme-light .scores__time {
  color: #000080;
  font-family: Tahoma, "MS Sans Serif", monospace;
}

/* 分数退到小灰字里，别抢戏 */
.scores__meta { font-size: 10px; opacity: 0.85; }