/* 主题变量同时用于页面和选择器缩略图。经典深色沿用原页面样式。 */
:root,
[data-theme="sky"],
[data-theme="pine"],
[data-theme="paper"],
[data-theme="cinnabar"],
[data-theme="mist"] {
  --theme-on-primary: #ffffff;
  --theme-success: #246d4c;
  --theme-success-rgb: 36, 109, 76;
  --theme-danger: #b23b36;
  --theme-danger-rgb: 178, 59, 54;
  --theme-warning: #8a6017;
  --theme-warning-rgb: 138, 96, 23;
  --theme-info: #24659a;
  --theme-info-rgb: 36, 101, 154;
  --theme-shadow: 0 16px 48px rgba(var(--theme-ink-rgb), .12);
  /* 游戏画布、内嵌面板与可操作卡片各自保留层次，换肤时一起更新。 */
  --theme-stage-image:
    radial-gradient(ellipse 78% 100% at 112% 138%, rgba(var(--theme-primary-rgb), .07) 0 64%, transparent 64.2%),
    radial-gradient(ellipse 75% 100% at 104% 134%, rgba(var(--theme-primary-rgb), .04) 0 65%, transparent 65.2%),
    radial-gradient(ellipse at 0% 0%, rgba(var(--theme-surface-rgb), .72), transparent 58%),
    linear-gradient(125deg, var(--theme-canvas), var(--theme-soft));
  --theme-panel-image: linear-gradient(145deg, rgba(var(--theme-surface-rgb), .62), rgba(var(--theme-surface-rgb), .1));
  --theme-card-image: linear-gradient(145deg, rgba(var(--theme-surface-rgb), .98), rgba(var(--theme-canvas-rgb), .8));
  --theme-button-image: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-hover));
}

:root,
[data-theme="sky"] {
  --theme-canvas: #edf4fb;
  --theme-canvas-rgb: 237, 244, 251;
  --theme-surface: #ffffff;
  --theme-surface-rgb: 255, 255, 255;
  --theme-soft: #e3edf7;
  --theme-soft-rgb: 227, 237, 247;
  --theme-text: #203b53;
  --theme-secondary: #415d74;
  --theme-muted: #516b81;
  --theme-ink-rgb: 32, 59, 83;
  --theme-primary: #2366a4;
  --theme-primary-hover: #195486;
  --theme-primary-rgb: 35, 102, 164;
  --theme-line: #c6d8e8;
  --theme-sky: linear-gradient(118deg, #f5f9fd 0%, #e6f1f9 48%, #d6e6ed 100%);
  --theme-mountain-back: #b7cfde;
  --theme-mountain-front: #8dabbf;
  --theme-sun: #e4c493;
}

[data-theme="pine"] {
  --theme-canvas: #edf5ef;
  --theme-canvas-rgb: 237, 245, 239;
  --theme-surface: #fbfefb;
  --theme-surface-rgb: 251, 254, 251;
  --theme-soft: #e0ede4;
  --theme-soft-rgb: 224, 237, 228;
  --theme-text: #263f35;
  --theme-secondary: #466455;
  --theme-muted: #4e6b5c;
  --theme-ink-rgb: 38, 63, 53;
  --theme-primary: #286b53;
  --theme-primary-hover: #1c5541;
  --theme-primary-rgb: 40, 107, 83;
  --theme-line: #c6dacf;
  --theme-sky: linear-gradient(118deg, #f5faf4 0%, #e5f0e6 48%, #d7e6d7 100%);
  --theme-mountain-back: #b3cdb9;
  --theme-mountain-front: #88ad96;
  --theme-sun: #dfc690;
}

[data-theme="paper"] {
  --theme-canvas: #f7f2e8;
  --theme-canvas-rgb: 247, 242, 232;
  --theme-surface: #fffdf7;
  --theme-surface-rgb: 255, 253, 247;
  --theme-soft: #eee5d5;
  --theme-soft-rgb: 238, 229, 213;
  --theme-text: #493e2e;
  --theme-secondary: #6c5d47;
  --theme-muted: #70614c;
  --theme-ink-rgb: 73, 62, 46;
  --theme-primary: #886137;
  --theme-primary-hover: #6f4e2a;
  --theme-primary-rgb: 136, 97, 55;
  --theme-line: #ded1bb;
  --theme-sky: linear-gradient(118deg, #fcf9f0 0%, #f2eadb 48%, #e8dcc6 100%);
  --theme-mountain-back: #d2c5aa;
  --theme-mountain-front: #b4a185;
  --theme-sun: #d8b477;
}

[data-theme="cinnabar"] {
  --theme-canvas: #fbf0ed;
  --theme-canvas-rgb: 251, 240, 237;
  --theme-surface: #fffcfa;
  --theme-surface-rgb: 255, 252, 250;
  --theme-soft: #f5e2dc;
  --theme-soft-rgb: 245, 226, 220;
  --theme-text: #533832;
  --theme-secondary: #78564f;
  --theme-muted: #7d5d55;
  --theme-ink-rgb: 83, 56, 50;
  --theme-primary: #ac4437;
  --theme-primary-hover: #90372c;
  --theme-primary-rgb: 172, 68, 55;
  --theme-line: #e5c9c0;
  --theme-sky: linear-gradient(118deg, #fff8f3 0%, #f8e9e2 48%, #efd6c9 100%);
  --theme-mountain-back: #ddbbb0;
  --theme-mountain-front: #c69586;
  --theme-sun: #debc87;
}

[data-theme="mist"] {
  --theme-canvas: #f3eff9;
  --theme-canvas-rgb: 243, 239, 249;
  --theme-surface: #fefcff;
  --theme-surface-rgb: 254, 252, 255;
  --theme-soft: #e9e1f3;
  --theme-soft-rgb: 233, 225, 243;
  --theme-text: #443554;
  --theme-secondary: #635277;
  --theme-muted: #6d5a82;
  --theme-ink-rgb: 68, 53, 84;
  --theme-primary: #75519b;
  --theme-primary-hover: #604180;
  --theme-primary-rgb: 117, 81, 155;
  --theme-line: #d7c8e6;
  --theme-sky: linear-gradient(118deg, #faf7fe 0%, #eee7f6 48%, #e0d6ed 100%);
  --theme-mountain-back: #c8b8db;
  --theme-mountain-front: #aa95c1;
  --theme-sun: #dcc09d;
}

[data-theme="classic"] {
  --theme-canvas: #080b09;
  --theme-canvas-rgb: 8, 11, 9;
  --theme-surface: #17201a;
  --theme-surface-rgb: 23, 32, 26;
  --theme-soft: #243128;
  --theme-soft-rgb: 36, 49, 40;
  --theme-text: #f5f1e7;
  --theme-secondary: #d4d9ce;
  --theme-muted: #a6b5a8;
  --theme-ink-rgb: 245, 241, 231;
  --theme-primary: #e1bc68;
  --theme-primary-hover: #eed398;
  --theme-primary-rgb: 225, 188, 104;
  --theme-line: #3b4b3e;
  --theme-sky: linear-gradient(118deg, #101410 0%, #1d2a22 48%, #343026 100%);
  --theme-mountain-back: #1c2922;
  --theme-mountain-front: #0d1511;
  --theme-sun: #d8bd7a;
  --theme-on-primary: #20291e;
  --theme-shadow: 0 16px 48px rgba(0, 0, 0, .32);
}

/* 首页景色和主界面：配色的变化落到整个环境。 */
:root[data-color-scheme="light"] :is(body, .design-viewport, .page-scaled, .boot-loading) {
  background: var(--theme-canvas);
  color: var(--theme-text);
}

:root[data-color-scheme="light"] :is(.home-sky, .command-backdrop, .victory-backdrop, .conduct-backdrop, .rotate-hint) {
  background: var(--theme-sky);
}

/* 仅移除装饰网格，所有配色均生效；扫雷、连连看等棋盘仍保留。 */
:root :is(.home-grid, .command-grid, .victory-grid, .conduct-grid, .signal-grid, .scene-art .grid) {
  display: none;
  background: none;
}

:root[data-color-scheme="light"] .sun {
  background: var(--theme-sun);
  box-shadow: 0 0 90px 20px rgba(255, 250, 231, .6);
  opacity: .82;
}

:root[data-color-scheme="light"] .mountain.back { background: var(--theme-mountain-back); opacity: .72; }
:root[data-color-scheme="light"] .mountain.front { background: var(--theme-mountain-front); }
:root[data-color-scheme="light"] .mast { background: var(--theme-secondary); }
:root[data-color-scheme="light"] .base { background: var(--theme-mountain-front); }
:root[data-color-scheme="light"] .home-vignette { box-shadow: inset 0 0 130px 35px rgba(var(--theme-canvas-rgb), .28); }
:root[data-color-scheme="light"] .cover-rule { background: var(--theme-primary); }

:root[data-color-scheme="light"] .mission {
  background: linear-gradient(145deg, var(--theme-surface), var(--theme-soft));
  color: var(--theme-text);
  border: 1px solid var(--theme-line);
  box-shadow: 0 8px 24px rgba(var(--theme-ink-rgb), .06);
}

:root[data-color-scheme="light"] .mission :is(.mission-order, .mission-keyword, .mission-mark) {
  color: var(--theme-primary);
  border-color: rgba(var(--theme-primary-rgb), .36);
}

:root[data-color-scheme="light"] .mission-shade { border-color: var(--theme-primary); }
:root[data-color-scheme="light"] .mission-mark { background: var(--theme-soft); }
:root[data-color-scheme="light"] .mission.completed { border-bottom: 5px solid var(--theme-success); }
:root[data-color-scheme="light"] .mission.locked { filter: saturate(.6); opacity: .78; }
:root[data-color-scheme="light"] :is(.command-node.locked, .campaign-node.locked, .conduct-node.locked) { opacity: .7; }
:root[data-color-scheme="light"] .mission-bottom-tail { color: var(--theme-primary); }
:root[data-color-scheme="light"] .report-mark { border-color: var(--theme-primary) !important; color: var(--theme-primary); }
:root[data-color-scheme="light"] .side-panel { background: var(--theme-surface); box-shadow: var(--theme-shadow); }
:root[data-color-scheme="light"] :is(.start-button, .continue-button) { border-left-color: var(--theme-sun); box-shadow: 0 6px 18px rgba(var(--theme-primary-rgb), .16); }
:root[data-color-scheme="light"] .switch { background: var(--theme-line); }
:root[data-color-scheme="light"] .switch-knob { background: var(--theme-surface); }
:root[data-color-scheme="light"] .switch.on { background: var(--theme-primary); }
:root[data-color-scheme="light"] :is(.reset-row, .wx-modal-btn.confirm) { color: var(--theme-danger); border-color: rgba(var(--theme-danger-rgb), .5); background: rgba(var(--theme-danger-rgb), .08); }
:root[data-color-scheme="light"] .wx-modal-btn.confirm { background: var(--theme-danger); color: #fff; }
:root[data-color-scheme="light"] .buddy-speech { --buddy-speech-bg: var(--theme-surface); background: var(--theme-surface); border-color: var(--theme-line); box-shadow: var(--theme-shadow); }
:root[data-color-scheme="light"] .llk-lines polyline { stroke: var(--theme-primary); }

/* 原场景内联调色板的 H5 浅色适配。插画、红旗、照片和武器图标保留原色。 */
:root[data-color-scheme="light"] .scene-page {
  --dark: var(--theme-canvas) !important;
  --base: var(--theme-soft) !important;
  --accent: var(--theme-primary) !important;
  --glow: var(--theme-primary) !important;
}
:root[data-color-scheme="light"] .scene-shade { background: linear-gradient(90deg, rgba(var(--theme-canvas-rgb), .96), rgba(var(--theme-canvas-rgb), .8) 58%, rgba(var(--theme-canvas-rgb), .65)); }
:root[data-color-scheme="light"] :is(.daily-progress-value, .morale-value, .road-progress-value, .quiz-progress-value) { color: var(--theme-text); text-shadow: 0 1px 3px var(--theme-surface); }

/* 设置按钮与顶部信息栏共用占位，横屏刘海的安全边距也计入其中。 */
:root {
  --theme-launcher-width: 44px;
  --theme-launcher-right: max(16px, env(safe-area-inset-right, 0px));
  --theme-launcher-space: calc(var(--theme-launcher-right) + var(--theme-launcher-width) + 16px);
}

body:not(.portrait) :is(.command-hud, .victory-hud, .conduct-hud, .hud) {
  right: max(132px, var(--theme-launcher-space));
}

/* 指标保留完整文字，窄屏优先收缩章节标题和进度条。 */
body:not(.portrait) :is(.command-hud, .victory-hud, .conduct-hud, .hud) :is(.hud-metric, .hud-stat) {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 1050px), (max-height: 400px) {
  body:not(.portrait) :is(.command-hud, .victory-hud, .conduct-hud, .hud) {
    right: var(--theme-launcher-space);
  }
  body:not(.portrait) :is(.command-hud, .victory-hud, .conduct-hud) {
    grid-template-columns: minmax(90px, 1fr) minmax(64px, 240px) minmax(max-content, 1.1fr);
    gap: 8px;
  }
}

@media (max-width: 700px), (max-height: 400px) {
  body:not(.portrait) :is(.command-hud, .victory-hud, .conduct-hud) {
    grid-template-columns: minmax(90px, 1fr) minmax(64px, 190px) minmax(max-content, 1.1fr);
  }
}

@media (max-width: 600px), (max-height: 320px) {
  body:not(.portrait) :is(.command-hud, .victory-hud, .conduct-hud) {
    grid-template-columns: 34px minmax(48px, 1fr) max-content;
  }
  body:not(.portrait) :is(.command-brand, .victory-brand, .conduct-brand) { display: none; }
}

.theme-launcher {
  position: fixed;
  z-index: 10002;
  top: max(12px, env(safe-area-inset-top));
  right: var(--theme-launcher-right);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: var(--theme-launcher-width);
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--theme-line);
  border-radius: 18px;
  background: var(--theme-surface);
  color: var(--theme-primary);
  box-shadow: 0 3px 12px rgba(var(--theme-ink-rgb), .06);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.theme-launcher svg { width: 16px; height: 16px; flex-shrink: 0; }
.theme-launcher:hover { background: var(--theme-soft); }
.theme-launcher:focus-visible,
.theme-dialog button:focus-visible { outline: 3px solid var(--theme-primary); outline-offset: 3px; }

.theme-picker[hidden] { display: none; }
.theme-picker {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: rgba(15, 26, 33, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: pan-y;
}
.theme-dialog {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: 20px;
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 28px 90px rgba(7, 20, 29, .24);
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}
.theme-dialog-head { display: flex; flex-shrink: 0; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 26px 18px; }
.theme-eyebrow { display: block; color: var(--theme-primary); font-size: 11px; font-weight: 700; letter-spacing: 2px; }
.theme-dialog h2 { margin: 5px 0 4px; font-size: 24px; font-weight: 800; line-height: 1.35; letter-spacing: -.5px; }
.theme-dialog-head p { margin: 0; color: var(--theme-muted); font-size: 12px; }
.theme-close { width: 32px; height: 32px; padding: 0; flex-shrink: 0; border: 1px solid var(--theme-line); border-radius: 50%; background: var(--theme-surface); color: var(--theme-secondary); font-size: 24px; font-weight: 400; line-height: 28px; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-height: 0; margin: 0; padding: 4px 26px 20px; border: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.theme-option { position: relative; display: block; min-width: 0; cursor: pointer; }
.theme-option input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme-card { display: block; overflow: hidden; padding: 4px; border: 2px solid var(--theme-line); border-radius: 12px; background: var(--theme-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.theme-option:hover .theme-card { border-color: var(--theme-primary); }
.theme-option input:checked + .theme-card { border-color: var(--theme-primary); box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), .12); }
.theme-option input:focus-visible + .theme-card { outline: 3px solid var(--theme-primary); outline-offset: 3px; }
.theme-preview { display: block; position: relative; overflow: hidden; height: 86px; border-radius: 7px; background: var(--theme-sky); }
.theme-preview-sun { position: absolute; width: 30px; height: 30px; border-radius: 50%; top: 12px; right: 30px; background: var(--theme-sun); }
.theme-preview-mountain { position: absolute; width: 72%; height: 65%; right: -6%; bottom: 0; clip-path: polygon(0 100%, 17% 60%, 33% 73%, 55% 8%, 71% 54%, 87% 36%, 100% 80%, 100% 100%); }
.theme-preview-back { background: var(--theme-mountain-back); bottom: 8%; right: -1%; opacity: .8; }
.theme-preview-front { background: var(--theme-mountain-front); }
.theme-preview-copy { position: absolute; top: 15px; left: 12px; width: 70px; }
.theme-preview-kicker { display: block; margin-bottom: 7px; color: var(--theme-text); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.theme-preview-line { display: block; width: 56px; height: 3px; margin-bottom: 4px; background: var(--theme-secondary); border-radius: 2px; opacity: .6; }
.theme-preview-line.short { width: 35px; }
.theme-preview-button { display: block; width: 28px; height: 8px; margin-top: 9px; border-radius: 2px; background: var(--theme-primary); }
.theme-selected { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 21px; height: 21px; border: 2px solid var(--theme-surface); border-radius: 50%; background: var(--theme-primary); color: var(--theme-on-primary); opacity: 0; font-size: 12px; font-weight: 900; }
.theme-option input:checked + .theme-card .theme-selected { opacity: 1; }
.theme-card-copy { display: flex; flex-direction: column; gap: 2px; padding: 9px 7px 7px; }
.theme-card-name { color: var(--theme-text); font-size: 13px; font-weight: 800; }
.theme-card-description { color: var(--theme-muted); font-size: 10px; line-height: 1.5; }
.theme-dialog-footer { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 26px; border-top: 1px solid var(--theme-line); background: var(--theme-canvas); }
.theme-save-status { margin: 0; color: var(--theme-muted); font-size: 11px; }
.theme-done { min-width: 88px; height: 36px; padding: 0 22px; border-radius: 8px; background: var(--theme-primary); color: var(--theme-on-primary); font-size: 13px; }
.theme-done:hover { background: var(--theme-primary-hover); }

/* 给 iPhone 安装提示的关闭按钮留出空间。 */
.ios-install-tip:not([hidden]) { right: var(--theme-launcher-space); }

@media (max-height: 500px) and (min-width: 600px) {
  .theme-picker { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .theme-dialog { width: min(760px, 100%); border-radius: 14px; }
  .theme-dialog-head { padding: 13px 22px 10px; }
  .theme-eyebrow { display: none; }
  .theme-dialog h2 { margin-top: 0; font-size: 20px; }
  .theme-options { gap: 10px; padding: 4px 22px 12px; }
  .theme-preview { height: 53px; }
  .theme-preview-copy { top: 8px; }
  .theme-preview-line { margin-bottom: 3px; }
  .theme-preview-button, .theme-preview-line.short { display: none; }
  .theme-card-copy { padding: 4px 6px; gap: 0; }
  .theme-card-name { font-size: 12px; }
  .theme-dialog-footer { padding: 9px 22px; }
  .theme-done { height: 32px; }
}

@media (max-width: 599px) {
  .theme-picker { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .theme-dialog-head { padding: 20px 18px 14px; }
  .theme-dialog h2 { font-size: 21px; }
  .theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 4px 18px 18px; }
  .theme-dialog-footer { padding: 12px 18px; }
  .theme-preview { height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-card { transition: none; }
}