/* 登录页与主页的三套视觉皮肤。剧情状态仍由 data-home-theme 控制，不与 data-skin 混用。 */
:root {
  --skin-page: #edf6ec;
  --skin-surface: rgba(250, 255, 250, .92);
  --skin-surface-strong: #fffdf5;
  --skin-text: #244b43;
  --skin-muted: #536b63;
  --skin-primary: #b74d3d;
  --skin-primary-deep: #752c2d;
  --skin-secondary: #3f8379;
  --skin-border: rgba(145, 108, 61, .48);
  --skin-shadow: rgba(29, 66, 56, .18);
  --skin-overlay: rgba(237, 246, 236, .18);
}

html[data-skin="light"] {
  --skin-page: #f4f8ed;
  --skin-surface: rgba(255, 255, 248, .93);
  --skin-surface-strong: #fffff8;
  --skin-text: #173f3b;
  --skin-muted: #466b61;
  --skin-primary: #b34c36;
  --skin-primary-deep: #7f302c;
  --skin-secondary: #337c70;
  --skin-border: rgba(153, 117, 56, .56);
  --skin-shadow: rgba(55, 94, 73, .2);
  --skin-overlay: rgba(255, 250, 220, .08);
}

html[data-skin="dark"] {
  --skin-page: #102326;
  --skin-surface: rgba(8, 31, 34, .91);
  --skin-surface-strong: #122c2f;
  --skin-text: #f6e8c1;
  --skin-muted: #bfd0c4;
  --skin-primary: #c65a46;
  --skin-primary-deep: #6f2e31;
  --skin-secondary: #6cb3a0;
  --skin-border: rgba(221, 181, 99, .54);
  --skin-shadow: rgba(0, 8, 10, .44);
  --skin-overlay: rgba(2, 16, 19, .32);
}

html[data-skin] body,
html[data-skin] #app {
  background-color: var(--skin-page);
  color: var(--skin-text);
}

body[data-view="auth"],
body[data-view="auth"] #app,
body[data-view="auth"] .auth-view {
  color-scheme: light;
  background-color: var(--skin-page);
}

html[data-skin="normal"] body[data-view="auth"] .auth-view {
  background-color: #74becb;
}

html[data-skin="light"] body[data-view="auth"] .auth-view {
  background-image:
    linear-gradient(180deg, rgba(240, 252, 245, .12), rgba(248, 244, 218, .1)),
    url("/images/login/login-bg-light.webp?v=20260921");
  background-position: center top;
  background-size: cover;
}

html[data-skin="dark"] body[data-view="auth"] .auth-view {
  color-scheme: dark;
  background-image:
    linear-gradient(180deg, rgba(4, 22, 26, .2), rgba(2, 13, 17, .16)),
    url("/images/login/login-bg-dark.webp?v=20260921");
  background-position: center top;
  background-size: cover;
}

html[data-skin="light"] .auth-header h1,
html[data-skin="light"] .auth-header p,
html[data-skin="dark"] .auth-header h1,
html[data-skin="dark"] .auth-header p {
  color: var(--skin-text);
}

html[data-skin="dark"] .auth-header h1 {
  text-shadow: 0 1px rgba(255, 238, 190, .18), 0 3px 12px rgba(0, 0, 0, .45);
  -webkit-text-stroke-color: rgba(224, 174, 82, .56);
}

html[data-skin="dark"] .auth-header p,
html[data-skin="dark"] .auth-form .form-hint,
html[data-skin="dark"] .auth-foot {
  color: rgba(246, 232, 193, .88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .86);
}

html[data-skin="dark"] .auth-panel {
  background-image: linear-gradient(rgba(5, 26, 29, .12), rgba(5, 26, 29, .12)), url("/images/login/login-panel.webp?v=20260811-01");
  filter: hue-rotate(125deg) saturate(.76) brightness(.72);
}

html[data-skin="dark"] .auth-form .auth-field > label { color: #f2dbad; }
html[data-skin="dark"] .auth-form .auth-field input { color: #fff4d7; background: #183d3e; border-color: rgba(216, 177, 95, .58); }
html[data-skin="dark"] .auth-form .auth-field input::placeholder { color: rgba(238, 227, 198, .7); }
html[data-skin="dark"] .auth-form .auth-field > input:focus { border-color: #e4c16b; box-shadow: 0 0 0 2px rgba(228, 193, 107, .24), inset 0 1px 2px rgba(0, 0, 0, .4); }
html[data-skin="dark"] .auth-submit { filter: hue-rotate(330deg) saturate(1.12) brightness(.82); }
html[data-skin="dark"] .auth-submit:hover { filter: hue-rotate(330deg) saturate(1.18) brightness(.98); }

.skin-settings-dialog {
  width: min(420px, calc(100vw - 28px));
  border: 1px solid var(--skin-border);
  border-radius: 8px;
  padding: 0;
  color: var(--skin-text);
  background: var(--skin-surface-strong);
  box-shadow: 0 22px 70px var(--skin-shadow);
}

.skin-settings-dialog::backdrop { background: rgba(3, 16, 18, .58); backdrop-filter: blur(3px); }
.skin-settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 20px 12px; border-bottom: 1px solid var(--skin-border); }
.skin-settings-kicker { color: var(--skin-secondary); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.skin-settings-head h2 { margin: 5px 0 0; color: var(--skin-text); font-family: "Noto Serif CJK SC", "Songti SC", serif; font-size: 22px; }
.skin-settings-close { width: 32px; height: 32px; border: 1px solid var(--skin-border); border-radius: 4px; color: var(--skin-text); background: transparent; font-size: 22px; cursor: pointer; }
.skin-settings-close:hover, .skin-settings-close:focus-visible { color: var(--skin-primary); border-color: var(--skin-primary); }
.skin-options { display: grid; gap: 8px; padding: 14px 20px 18px; }
.skin-option { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 58px; border: 1px solid color-mix(in srgb, var(--skin-border) 70%, transparent); border-radius: 6px; padding: 7px 10px; color: var(--skin-text); background: var(--skin-surface); text-align: left; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.skin-option:hover, .skin-option:focus-visible { border-color: var(--skin-primary); background: color-mix(in srgb, var(--skin-primary) 8%, var(--skin-surface)); transform: translateY(-1px); }
.skin-option.is-selected { border-color: var(--skin-primary); box-shadow: inset 0 0 0 1px var(--skin-primary); }
.skin-option-swatch { width: 40px; height: 40px; border: 1px solid var(--skin-border); border-radius: 5px; box-shadow: inset 0 0 0 5px rgba(255,255,255,.13); }
.skin-option[data-skin-option="normal"] .skin-option-swatch { background: linear-gradient(135deg, #5d302d, #efd07b 52%, #316f6a); }
.skin-option[data-skin-option="light"] .skin-option-swatch { background: linear-gradient(135deg, #f6f6df, #9fd8c0 55%, #c89147); }
.skin-option[data-skin-option="dark"] .skin-option-swatch { background: linear-gradient(135deg, #091b20, #244b48 58%, #b25742); }
.skin-option strong { display: block; font-size: 14px; }
.skin-option small { display: block; margin-top: 3px; color: var(--skin-muted); font-size: 11px; line-height: 1.35; }
.skin-option-check { color: var(--skin-primary); font-size: 18px; opacity: 0; }
.skin-option.is-selected .skin-option-check { opacity: 1; }
.skin-settings-footer { display: flex; justify-content: space-between; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid color-mix(in srgb, var(--skin-border) 58%, transparent); }
.skin-settings-footer button { min-height: 34px; border: 1px solid var(--skin-border); border-radius: 4px; padding: 0 12px; color: var(--skin-text); background: transparent; cursor: pointer; }
.skin-settings-footer button:hover, .skin-settings-footer button:focus-visible { border-color: var(--skin-primary); color: var(--skin-primary); }

html[data-skin="light"] .home-view { color: #204d44; background: #f4f8ed; }
html[data-skin="light"] .home-view::before { background-image: url("/images/backgrounds/chaoge-war-hud-light-home.webp?v=20260923-01"); filter: brightness(1.04) saturate(.84) contrast(.94); opacity: .92; }
html[data-skin="light"] .home-view::after { background: linear-gradient(180deg, rgba(238, 249, 235, .18), rgba(231, 242, 218, .1) 48%, rgba(241, 218, 172, .14)); }
html[data-skin="light"] .home-view .battlefield-header {
  border-color: rgba(156, 119, 58, .52);
  background-color: rgba(239, 246, 226, .92);
  background-image: linear-gradient(90deg, rgba(238, 247, 229, .95), rgba(255, 249, 220, .86) 50%, rgba(238, 247, 229, .95));
  background-blend-mode: normal;
  box-shadow: 0 6px 16px rgba(82, 103, 71, .14), inset 0 1px 0 rgba(255, 255, 241, .92), inset 0 -1px 0 rgba(183, 143, 68, .34);
}
html[data-skin="light"] .home-view .battlefield-header::after {
  background: linear-gradient(90deg, transparent, rgba(177, 135, 60, .4) 24%, rgba(177, 135, 60, .68) 50%, rgba(177, 135, 60, .4) 76%, transparent);
}
html[data-skin="light"] .home-view .home-quick-nav { border-left-color: rgba(111, 126, 85, .24); background: linear-gradient(180deg, rgba(255, 255, 244, .28), rgba(255, 255, 244, .04)); }
html[data-skin="light"] .home-view .home-quick-nav > .home-side-market,
html[data-skin="light"] .home-view .home-quick-nav > .home-side-gm,
html[data-skin="light"] .home-view .home-quick-nav > .home-side-gift,
html[data-skin="light"] .home-view .home-quick-nav > .home-side-ranking,
html[data-skin="light"] .home-view .home-quick-nav > .home-side-settings { color: #355f54; text-shadow: 0 1px 2px rgba(255, 255, 255, .75); }
html[data-skin="light"] .home-view .home-quick-nav .home-side-seal { color: #fff1c3; background: linear-gradient(145deg, #c45a42, #8c3936); box-shadow: inset 0 1px 0 rgba(255, 255, 235, .5), 0 3px 7px rgba(88, 70, 36, .24); }
html[data-skin="light"] .home-view .home-quick-nav > a > span:last-child,
html[data-skin="light"] .home-view .home-quick-nav > button > span:last-child {
  color: #342419;
  text-shadow: 0 1px 0 rgba(255, 255, 244, .92), 0 0 2px rgba(255, 255, 240, .84), 0 1px 3px rgba(62, 38, 20, .48);
  -webkit-text-stroke: .1px rgba(255, 249, 224, .72);
}
html[data-skin="light"] .home-view .home-quick-nav > a:hover > span:last-child,
html[data-skin="light"] .home-view .home-quick-nav > a:focus-visible > span:last-child,
html[data-skin="light"] .home-view .home-quick-nav > button:hover > span:last-child,
html[data-skin="light"] .home-view .home-quick-nav > button:focus-visible > span:last-child { color: #8e3f2b; }
html[data-skin="light"] .home-view .home-module-dock {
  background: linear-gradient(180deg, transparent 0%, rgba(248, 246, 222, .3) 34%, rgba(248, 246, 222, .9) 100%);
}
html[data-skin="light"] .home-view .home-module-button,
html[data-skin="light"] .home-view .home-module-label {
  color: #302116;
  text-shadow: 0 1px 0 rgba(255, 255, 246, .92), 0 0 2px rgba(255, 255, 240, .8), 0 1px 3px rgba(67, 42, 22, .5);
  -webkit-text-stroke: .12px rgba(255, 249, 224, .7);
}
html[data-skin="light"] .home-view .home-module-button--core,
html[data-skin="light"] .home-view .home-module-button--core,
html[data-skin="light"] .home-view .home-module-button--core .home-module-label {
  color: #6b3d19;
  text-shadow: 0 1px 0 rgba(255, 255, 246, .95), 0 0 2px rgba(255, 255, 240, .86), 0 1px 3px rgba(67, 42, 22, .48);
  -webkit-text-stroke: .12px rgba(255, 249, 224, .72);
}
html[data-skin="light"] .home-view .home-module-button:hover,
html[data-skin="light"] .home-view .home-module-button:focus-visible,
html[data-skin="light"] .home-view .home-module-button.is-current { color: #9b4930; }
html[data-skin="light"] .home-view .battlefield-picker { background: rgba(245, 252, 236, .72); }
html[data-skin="light"] .home-view .battlefield-picker strong { color: #315b52; text-shadow: 0 1px 2px rgba(255,255,255,.9); }
html[data-skin="light"] .home-view .battlefield-income-button,
html[data-skin="light"] .home-view .battlefield-info-button { color: #285c51; text-shadow: 0 1px 0 rgba(255, 255, 250, .9); }
html[data-skin="light"] .home-view .battlefield-income-button:hover,
html[data-skin="light"] .home-view .battlefield-income-button:focus-visible,
html[data-skin="light"] .home-view .battlefield-info-button:hover,
html[data-skin="light"] .home-view .battlefield-info-button:focus-visible { color: #9b4930; }

html[data-skin="dark"] .home-view { color: #e9dfc1; background: #102326; }
html[data-skin="dark"] .home-view::before { background-image: url("/images/backgrounds/chaoge-war-hud-dark-home.webp?v=20260923-01"); filter: brightness(.7) saturate(.86) contrast(1.04); opacity: 1; }
html[data-skin="dark"] .home-view::after { background: linear-gradient(180deg, rgba(4, 22, 25, .36), rgba(3, 24, 27, .18) 48%, rgba(2, 13, 17, .52)); }
html[data-skin="dark"] .home-view .home-quick-nav { border-left-color: rgba(220, 177, 93, .22); background: linear-gradient(180deg, rgba(2, 17, 20, .42), rgba(2, 17, 20, .14)); }
html[data-skin="dark"] .home-view .home-quick-nav > .home-side-market,
html[data-skin="dark"] .home-view .home-quick-nav > .home-side-gm,
html[data-skin="dark"] .home-view .home-quick-nav > .home-side-gift,
html[data-skin="dark"] .home-view .home-quick-nav > .home-side-ranking,
html[data-skin="dark"] .home-view .home-quick-nav > .home-side-settings { color: #f2dfad; }
html[data-skin="dark"] .home-view .home-quick-nav .home-side-seal { background: linear-gradient(145deg, #a6473d, #542a31); }
html[data-skin="dark"] .home-view .home-module-dock { background: linear-gradient(180deg, transparent, rgba(3, 18, 22, .24) 42%, rgba(2, 13, 17, .7)); }
html[data-skin="dark"] .home-view .home-module-button, html[data-skin="dark"] .home-view .home-module-button--core { color: #f2dfad; text-shadow: 0 1px 2px rgba(0,0,0,.96), 0 0 5px rgba(0,0,0,.72); }
html[data-skin="dark"] .home-view .battlefield-header { border-color: rgba(220, 177, 93, .36); background: rgba(5, 28, 32, .34); }
html[data-skin="dark"] .home-view .battlefield-picker { background: rgba(5, 28, 32, .7); }
html[data-skin="dark"] .home-view .battlefield-picker strong { color: #f7e6b5; }
html[data-skin="dark"] .home-view .battlefield-dialog,
html[data-skin="dark"] .home-view .battlefield-income-dialog,
html[data-skin="dark"] .home-view .battlefield-info-dialog { color: #f3e6c2; background: #102a2d; border-color: rgba(220, 177, 93, .5); }
html[data-skin="dark"] .home-view .battlefield-dialog-head h2 { color: #f3e6c2; }

html[data-skin="light"] .home-view .home-recommended-goal {
  border-color: rgba(156, 119, 58, .5);
  border-left-color: #b34c36;
  color: #214f45;
  background: rgba(255, 255, 244, .94);
  box-shadow: 0 5px 16px rgba(73, 92, 64, .2), inset 0 1px 0 rgba(255, 255, 255, .92);
}
html[data-skin="light"] .home-view .home-recommended-goal-copy > span { color: #a46e2d; }
html[data-skin="light"] .home-view .home-recommended-goal-copy strong { color: #204d44; }
html[data-skin="light"] .home-view .home-recommended-goal-copy small { color: #5c756b; }

html[data-skin="dark"] .home-view .home-recommended-goal {
  border-color: rgba(220, 177, 93, .46);
  background: rgba(7, 26, 29, .9);
}

.auth-skin-button {
  position: absolute;
  z-index: 4;
  top: calc(4px + var(--safe-top));
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 80%, transparent);
  border-radius: 4px;
  padding: 0 9px;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--skin-surface) 78%, transparent);
  box-shadow: 0 3px 9px var(--skin-shadow);
  cursor: pointer;
  font-size: 11px;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.auth-skin-button span { font-size: 17px; line-height: 1; }
.auth-skin-button b { font-weight: 800; }
.auth-skin-button:hover, .auth-skin-button:focus-visible { border-color: var(--skin-primary); color: var(--skin-primary); transform: translateY(-1px); }
.auth-skin-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--skin-primary) 60%, transparent); outline-offset: 2px; }

html[data-skin="dark"] .auth-skin-button { color: #f4e5bd; background: rgba(7, 26, 29, .74); }
html[data-skin="light"] .auth-skin-button { background: rgba(255, 255, 247, .72); }

@media (max-width: 520px) {
  html[data-skin="light"] .home-view::before { background-image: url("/images/backgrounds/chaoge-war-hud-light-mobile-home.webp?v=20260923-01"); }
  html[data-skin="dark"] .home-view::before { background-image: url("/images/backgrounds/chaoge-war-hud-dark-mobile-home.webp?v=20260923-01"); }
  .skin-settings-dialog { width: min(390px, calc(100vw - 20px)); }
  .skin-settings-head { padding: 16px 16px 11px; }
  .skin-options { padding: 12px 16px 15px; }
  .skin-settings-footer { padding: 10px 16px 14px; }
}