:root {
  color-scheme: dark;
  --void: #020202;
  --ink: #08090a;
  --charcoal: #141516;
  --ash: #d3cec5;
  --ash-dim: #817b74;
  --blood: #a81218;
  --blood-bright: #ef3e32;
  --gold: #b79a62;
  --number-font: "Noto Sans CJK SC", "PingFang SC", "Heiti SC", sans-serif;
  --line: rgba(215, 205, 188, 0.18);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--void);
}

body {
  color: var(--ash);
  font-family: "Noto Sans CJK SC", "PingFang SC", "Heiti SC", sans-serif;
  letter-spacing: 0;
}

button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--blood-bright); outline-offset: 3px; }

#app {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #020202;
}

body[data-booting="true"] .view { visibility: hidden; }

.view {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: calc(28px + var(--safe-top)) 24px calc(28px + var(--safe-bottom));
}

.view::-webkit-scrollbar { display: none; }

.eyebrow {
  display: block;
  color: var(--blood-bright);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.ritual-form {
  display: grid;
  gap: 16px;
  margin-top: 42px;
  padding: 24px 22px 20px;
  border: 1px solid var(--line);
  border-top-color: rgba(239,62,50,.38);
  background: rgba(3,3,3,.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
}

.ritual-form label, .avatar-field { display: grid; gap: 8px; }
.ritual-form label > span, .avatar-field > span {
  color: var(--ash-dim);
  font-size: 11px;
  letter-spacing: .14em;
}

.ritual-form input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(215,205,188,.25);
  border-radius: 0;
  padding: 10px 0 11px;
  color: #f2eee5;
  background: transparent;
  outline: none;
}

.ritual-form input::placeholder { color: #4f4b47; }
.ritual-form input:focus { border-bottom-color: var(--blood-bright); }

.primary-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  border: 1px solid rgba(239,62,50,.66);
  border-radius: 0;
  padding: 0 17px;
  color: #fff3eb;
  background: linear-gradient(105deg, rgba(110,8,14,.93), rgba(31,4,6,.98));
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.primary-action:hover { transform: translateY(-2px); border-color: #ff7568; background: linear-gradient(105deg, rgba(159,13,20,.98), rgba(38,4,6,1)); }
.primary-action i { font-style: normal; font-size: 20px; }
.form-hint, .form-error { margin: 0; font-size: 11px; line-height: 1.5; }
.form-hint { color: #6e6962; }
.form-error { min-height: 16px; color: #f0695b; }

/* 登录页由背景、青铜登录框和青玉按钮三张图片组合。 */
body[data-view="auth"],
body[data-view="auth"] #app {
  color-scheme: light;
  color: #203f3a;
  background-color: #74becb;
}

.auth-view {
  width: 100%;
  max-width: none;
  padding: calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom));
  background-color: #74becb;
  background-image: url("/images/login/login-bg.webp?v=20260811-01");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.auth-shell {
  width: min(100%, 420px);
  min-height: calc(100dvh - 48px - var(--safe-top) - var(--safe-bottom));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0 auto;
  padding-top: clamp(34px, 6vh, 56px);
}

.auth-header {
  padding: 0;
  text-align: center;
}

.auth-header h1 {
  margin: 0;
  color: #173f3b;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.08;
  text-shadow: 0 1px rgba(255, 252, 225, .96), 0 3px 12px rgba(47, 80, 72, .2);
  -webkit-text-stroke: .35px rgba(157, 117, 52, .52);
}

.auth-header p {
  margin: 10px 0 0;
  color: #315650;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  line-height: 1.5;
  text-shadow: 0 1px rgba(255, 255, 239, .9);
}

.auth-form {
  width: min(100%, 380px);
  align-self: center;
  gap: 0;
  margin-top: clamp(145px, 22vh, 195px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.auth-panel {
  width: 100%;
  aspect-ratio: 900 / 527;
  display: grid;
  align-content: center;
  padding: clamp(28px, 9.5vw, 38px) clamp(30px, 10vw, 42px) clamp(25px, 8.5vw, 34px);
  background: url("/images/login/login-panel.webp?v=20260811-01") center / 100% 100% no-repeat;
}

.auth-form .auth-field {
  display: grid;
  min-height: clamp(48px, 13.5vw, 54px);
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.auth-form .auth-field:focus-within {
  background: transparent;
  box-shadow: none;
}

.auth-form .auth-field > label {
  display: block;
  color: #5a452d;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 1px rgba(255, 250, 225, .86);
}

.auth-form .auth-field input {
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(29, 72, 68, .5);
  border-radius: 18px;
  padding: 0 14px;
  color: #ffffff;
  background: #2a5652;
  caret-color: #ffe6a2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  box-shadow: inset 0 1px 2px rgba(17, 43, 41, .25);
}

.auth-form .auth-field input::placeholder {
  color: rgba(245, 249, 240, .8);
  font-size: 13px;
}

.auth-form .auth-field > input:focus {
  border-color: #d6b765;
  box-shadow: 0 0 0 2px rgba(214, 183, 101, .22), inset 0 1px 2px rgba(17, 43, 41, .25);
}

.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffe6a2;
  box-shadow: 0 0 0 1000px #315f59 inset;
}

.auth-submit {
  width: min(54.4%, 200px);
  min-height: 0;
  aspect-ratio: 800 / 250;
  justify-content: center;
  margin: 3px auto 0;
  border: 0;
  border-radius: 0;
  padding: 0 18px 2px;
  color: #fff9dd;
  background: url("/images/login/login-button.webp?v=20260811-01") center / contain no-repeat;
  box-shadow: none;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  font-weight: 700;
  filter: saturate(.9) brightness(.96);
  text-shadow: 0 2px 2px rgba(17, 60, 53, .82), 0 0 5px rgba(255, 223, 129, .25);
}

.auth-submit > span {
  display: block;
  text-align: center;
  letter-spacing: 1px;
  transform: translateY(4px);
}

.auth-submit:hover {
  background: url("/images/login/login-button.webp?v=20260811-01") center / contain no-repeat;
  filter: saturate(.98) brightness(1.04);
  transform: translateY(-1px);
}

.auth-submit:active { filter: saturate(.9) brightness(.9); transform: translateY(1px) scale(.99); }
.auth-submit:disabled { cursor: wait; filter: grayscale(.45); opacity: .68; transform: none; }
.auth-submit:focus-visible { outline: 2px solid #fff0b4; outline-offset: -9px; }

.auth-form .form-hint {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 244, .92);
  font-size: 11px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(16, 42, 40, .9);
}

.auth-form .form-error {
  min-height: 0;
  margin-top: 0;
  color: #ffe0d2;
  text-align: center;
  text-shadow: 0 1px 3px rgba(65, 24, 20, .9);
}
.auth-form .form-error:not(:empty) { min-height: 16px; margin-top: 5px; }

.auth-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: auto 2px 0;
  padding-top: 20px;
  color: rgba(255, 255, 244, .92);
  font-family: var(--number-font);
  font-size: 10px;
  letter-spacing: 0;
  text-shadow: 0 1px 3px rgba(16, 42, 40, .9);
}

body[data-view="auth"] .toast {
  border: 1px solid #bfd2c8;
  border-left: 3px solid #3d7e69;
  border-radius: 2px;
  color: #214f43;
  background: #fffef9;
  box-shadow: 0 10px 28px rgba(47, 107, 88, .14);
}

@media (max-width: 420px) {
  .auth-view { padding-right: 18px; padding-left: 18px; }
  .auth-shell { padding-top: 34px; }
  .auth-header h1 { font-size: 44px; }
}

@media (max-height: 680px) {
  .auth-shell { padding-top: 22px; }
  .auth-header h1 { font-size: 40px; }
  .auth-header p { margin-top: 7px; font-size: 11px; }
  .auth-form { margin-top: 145px; }
}

.profile-view { display: grid; place-items: center; }
.profile-panel {
  width: min(100%, 480px);
  padding: 30px 26px 26px;
  border: 1px solid var(--line);
  border-top-color: rgba(239,62,50,.38);
  background: rgba(3,3,3,.74);
  backdrop-filter: blur(16px);
}
.server-view { display: grid; place-items: center; }
.server-panel {
  width: min(100%, 520px);
  padding: 30px 26px 26px;
  border: 1px solid var(--line);
  border-top-color: rgba(239,62,50,.58);
  background: rgba(3,3,3,.78);
  backdrop-filter: blur(16px);
}
.server-panel h2 { margin: 8px 0 7px; color: #f2eee5; font-family: "Noto Serif CJK SC", "Songti SC", serif; font-size: 32px; font-weight: 600; }
.server-panel .panel-copy { max-width: 390px; }
.server-list { display: grid; gap: 8px; margin-top: 25px; }
.server-option {
  display: grid;
  gap: 7px;
  width: 100%;
  min-height: 76px;
  border: 1px solid rgba(215,205,188,.2);
  border-left: 3px solid rgba(183,154,98,.5);
  padding: 12px 14px;
  color: #d3cec5;
  background: rgba(12,12,13,.72);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.server-option:hover:not(:disabled), .server-option[aria-current="true"] { border-color: var(--blood-bright); background: rgba(43,5,7,.78); transform: translateY(-1px); }
.server-option:disabled { cursor: not-allowed; opacity: .48; }
.server-option-head, .server-option-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.server-option-code { color: var(--blood-bright); font-family: var(--number-font); font-size: 10px; letter-spacing: .1em; }
.server-option-name { color: #f1e8de; font-family: "Noto Serif CJK SC", "Songti SC", serif; font-size: 16px; font-weight: 600; }
.server-option-status { color: #b79a62; font-size: 10px; white-space: nowrap; }
.server-option-status.is-closed { color: #8b6c66; }
.server-option-meta { color: #817a71; font-size: 10px; }
.server-option-meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-option-meta b { color: #f3c789; font-family: var(--number-font); font-weight: 600; }
.server-logout-button { width: 100%; margin-top: 18px; }
.profile-panel .panel-copy b { color: #f3c789; font-family: var(--number-font); font-weight: 600; }
.profile-panel h2 { margin: 8px 0 7px; color: #f2eee5; font-family: "Noto Serif CJK SC", "Songti SC", serif; font-size: 32px; font-weight: 600; }
.panel-copy { max-width: 300px; margin: 0; color: var(--ash-dim); font-size: 12px; line-height: 1.7; }
.profile-panel .ritual-form { margin-top: 30px; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }

.story-view {
  width: min(100%, 680px);
  margin: 0 auto;
  padding: calc(22px + var(--safe-top)) 28px calc(22px + var(--safe-bottom));
  background: #000000;
}
.story-panel {
  width: min(100%, 560px);
  min-height: calc(100dvh - 44px - var(--safe-top) - var(--safe-bottom));
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0 auto;
  padding: 10px 0 6px;
  background: #000000;
}
.story-body { align-self: center; width: 100%; max-width: 460px; padding: 30px 0 36px; }
.story-sequence {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: #b6a289;
  font-family: var(--number-font);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .12em;
}
.story-sequence::after { width: 30px; height: 1px; background: rgba(183,154,98,.52); content: ""; }
.story-panel h2 { max-width: 420px; margin: 0 0 27px; color: #f3eee8; font-family: "Noto Serif CJK SC", "Songti SC", serif; font-size: 36px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.story-copy { max-width: 448px; margin: 0; border-top: 1px solid rgba(183,154,98,.26); padding-top: 20px; color: #aaa39b; font-size: 14px; line-height: 1.92; }
.story-copy-strong { margin-top: 23px; border: 0; border-left: 2px solid rgba(202, 67, 58, .78); padding: 13px 16px; color: #dfcbb5; background: rgba(76, 14, 14, .18); font-weight: 600; line-height: 1.8; }
.story-footer { width: 100%; }
.story-panel .primary-action {
  position: relative;
  width: 100%;
  min-height: 54px;
  justify-content: center;
  gap: 10px;
  margin: 0;
  border: 1px solid #c33430;
  border-radius: 6px;
  padding: 0 20px;
  background: #921a1d;
  box-shadow: inset 0 1px rgba(255, 237, 229, .16), 0 8px 20px rgba(68, 5, 7, .28);
  transform: none;
}

.story-panel .primary-action::before { display: none; }

.story-panel .primary-action > span {
  flex: 0 1 auto;
  padding: 0;
  color: #fff7f1;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
}

.story-panel .primary-action:hover {
  border-color: #ec5a4f;
  background: #b12225;
  transform: translateY(-1px);
}

.story-panel .primary-action:active { transform: translateY(0); }

.story-panel .primary-action:focus-visible {
  outline: 0;
  border-color: #d5b178;
  box-shadow: 0 0 0 1px rgba(213,177,120,.68), inset 0 1px rgba(255, 232, 222, .07);
}

.story-panel .primary-action:disabled {
  cursor: wait;
  opacity: .58;
  transform: none;
}

@media (max-width: 360px) {
  .story-view { padding-right: 20px; padding-left: 20px; }
  .story-panel h2 { font-size: 32px; }
  .story-copy { font-size: 13px; }
}
.story-panel .form-error { min-height: 0; margin: 9px 0 0; }
.story-panel.is-changing .story-body,
.story-panel.is-changing .story-footer { animation: story-scene-in .32s ease-out both; }

@keyframes story-scene-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar-option {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215,205,188,.18);
  border-radius: 0;
  overflow: hidden;
  color: #c8c0b5;
  background: #0c0d0e;
  cursor: pointer;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 18px;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}
.avatar-option { background-position: center; background-repeat: no-repeat; background-size: contain; }
.role-option-label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5px 3px 4px;
  overflow: hidden;
  color: #f2eee5;
  background: linear-gradient(transparent, rgba(0, 0, 0, .86));
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar-option:hover, .avatar-option.selected { border-color: var(--blood-bright); color: #fff3eb; background-color: rgba(121,12,17,.42); transform: translateY(-2px); }

.home-view {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 10px;
  width: min(100%, 760px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(12px + var(--safe-top)) 12px calc(8px + var(--safe-bottom));
  overflow-y: auto;
}

.account-menu-button {
  position: absolute;
  z-index: 8;
  top: calc(10px + var(--safe-top));
  right: 12px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 4px;
  padding: 5px;
  color: #ffffff;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(21, 59, 49, .48);
  transition: opacity .45s ease .55s, color .18s ease, transform .18s ease;
}
.account-menu-button span { font-size: 33px; line-height: 1; }
.account-menu-button:hover,
.account-menu-button:focus-visible { color: #ffffff; background: transparent; transform: scale(1.08); }
.account-menu-button:focus-visible { outline: 2px solid rgba(255, 255, 255, .76); outline-offset: 2px; }

.chaoge-location-seal {
  position: absolute;
  z-index: 8;
  top: calc(15px + var(--safe-top));
  left: 14px;
  display: grid;
  min-height: 30px;
  place-items: center;
  border: 1px solid rgba(133, 34, 31, .88);
  border-radius: 3px;
  padding: 0 9px;
  color: #fff9ed;
  background: rgba(177, 47, 43, .94);
  box-shadow: inset 0 0 0 2px rgba(255, 224, 199, .28), 0 3px 8px rgba(102, 36, 34, .18);
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transition: opacity .55s ease .45s, transform .55s ease .45s;
  white-space: nowrap;
}

.home-player-summary {
  position: absolute;
  z-index: 8;
  top: calc(16px + var(--safe-top));
  left: 50%;
  display: inline-flex;
  max-width: calc(100% - 182px);
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  color: #ffffff;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  line-height: 1;
  text-shadow: -1px -1px 1px rgba(7, 33, 27, .9), 1px -1px 1px rgba(7, 33, 27, .9), -1px 1px 1px rgba(7, 33, 27, .9), 1px 1px 1px rgba(7, 33, 27, .9), 0 2px 4px rgba(7, 33, 27, .76);
  transform: translateX(-50%);
  transition: opacity .55s ease .45s;
  white-space: nowrap;
}

.home-player-summary b {
  max-width: 5em;
  color: #ffffff;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
}

.home-player-summary-divider,
.home-player-server {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .96);
  font-size: 11px;
}

.home-player-server {
  max-width: 4.6em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resource-gain-float {
  --merit-start-x: clamp(-136px, -18vw, -72px);
  --merit-start-y: clamp(86px, 18vh, 150px);
  position: absolute;
  z-index: 5;
  top: 52%;
  left: calc(50% + clamp(72px, 18vw, 136px));
  display: inline-flex;
  min-width: 42px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  color: #8cf7b4;
  font-family: var(--number-font);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(4, 6, 10, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 5px 14px rgba(0, 0, 0, .18);
  -webkit-text-stroke: .8px rgba(7, 10, 14, .88);
  paint-order: stroke fill;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .42), 0 2px 8px rgba(140, 247, 180, .18);
  transform: translateY(-50%);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
  white-space: nowrap;
}
.resource-gain-float.is-active { animation: merit-float 1.12s cubic-bezier(.22, .68, .28, 1) forwards; }

.guardian-counterattack {
  --counterattack-travel: -72px;
  position: absolute;
  z-index: 4;
  width: 86px;
  height: 1px;
  pointer-events: none;
}

.guardian-counterattack i {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  opacity: 0;
  transform-origin: 50% 100%;
}

.guardian-counterattack-trail {
  width: 30px;
  height: 106px;
  background: rgba(246, 174, 49, .82);
  box-shadow: 0 0 13px rgba(246, 184, 75, .95), 0 0 32px rgba(255, 238, 176, .82);
  clip-path: polygon(50% 0, 100% 100%, 50% 78%, 0 100%);
}

.guardian-counterattack-core {
  width: 10px;
  height: 124px;
  background: #fff8d1;
  box-shadow: 0 0 8px #ffffff, 0 0 22px rgba(255, 225, 120, 1);
  clip-path: polygon(50% 0, 100% 100%, 50% 80%, 0 100%);
}

.guardian-counterattack-core::before,
.guardian-counterattack-core::after {
  position: absolute;
  bottom: 2px;
  width: 4px;
  height: 92px;
  content: "";
  background: rgba(255, 242, 182, .9);
  box-shadow: 0 0 9px rgba(255, 212, 92, .92);
}

.guardian-counterattack-core::before { left: -16px; transform: rotate(-15deg); }
.guardian-counterattack-core::after { right: -16px; transform: rotate(15deg); }

.guardian-counterattack-flare {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 248, 207, 1);
  box-shadow: 0 0 14px rgba(255, 210, 86, .95), 0 0 28px rgba(255, 242, 189, .68);
  transform: translate(-50%, 0) rotate(45deg) scale(.25);
}

.guardian-counterattack-burst {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 247, 197, .96);
  box-shadow: 0 0 18px rgba(255, 202, 64, 1), inset 0 0 12px rgba(255, 244, 185, .9);
  transform: translate(-50%, 0) rotate(45deg) scale(.16);
}

.guardian-counterattack.is-active .guardian-counterattack-trail {
  animation: guardian-counterattack-trail .66s cubic-bezier(.14, .77, .25, 1) forwards;
}

.guardian-counterattack.is-active .guardian-counterattack-core {
  animation: guardian-counterattack-core .62s cubic-bezier(.1, .76, .22, 1) .02s forwards;
}

.guardian-counterattack.is-active .guardian-counterattack-flare {
  animation: guardian-counterattack-flare .48s ease-out .28s forwards;
}

.guardian-counterattack.is-active .guardian-counterattack-burst {
  animation: guardian-counterattack-burst .42s ease-out .34s forwards;
}

@keyframes guardian-counterattack-trail {
  0% { opacity: 0; transform: translate(-50%, 0) scaleY(.18); }
  12% { opacity: .95; }
  78% { opacity: .96; }
  100% { opacity: 0; transform: translate(-50%, var(--counterattack-travel)) scaleY(.86); }
}

@keyframes guardian-counterattack-core {
  0% { opacity: 0; transform: translate(-50%, 0) scaleY(.16); }
  14% { opacity: 1; }
  76% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, var(--counterattack-travel)) scaleY(.9); }
}

@keyframes guardian-counterattack-flare {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(45deg) scale(.25); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, var(--counterattack-travel)) rotate(135deg) scale(2); }
}

@keyframes guardian-counterattack-burst {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(45deg) scale(.16); }
  38% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, var(--counterattack-travel)) rotate(135deg) scale(2.5); }
}

.experience-gain-float {
  --merit-start-x: clamp(-116px, -16vw, -64px);
  --merit-start-y: clamp(62px, 13vh, 112px);
  color: #9cf5c2;
}
.fortune-gain-float {
  --merit-start-x: clamp(-156px, -22vw, -92px);
  --merit-start-y: clamp(48px, 10vh, 92px);
  left: calc(50% - clamp(48px, 11vw, 84px));
  color: #d7a2ff;
  transform: translateY(-50%) scale(.94);
}
.true-energy-gain-float {
  --merit-start-x: clamp(-176px, -26vw, -112px);
  --merit-start-y: clamp(102px, 21vh, 168px);
  left: calc(50% - clamp(72px, 15vw, 112px));
  color: #8fd3ff;
  transform: translateY(-50%) scale(.88);
}
.quiet-button { display: inline-flex; align-items: center; gap: 5px; min-width: 44px; min-height: 44px; justify-content: center; border: 1px solid rgba(215,205,188,.2); padding: 0 8px; color: #837d75; background: transparent; cursor: pointer; font-size: 10px; letter-spacing: .08em; }
.quiet-button i { color: var(--blood-bright); font-size: 18px; font-style: normal; line-height: 1; }
.quiet-button:hover { border-color: var(--blood-bright); color: #fff3eb; }

.toast { position: fixed; z-index: 10; top: calc(18px + var(--safe-top)); left: 50%; max-width: min(86vw, 420px); padding: 10px 14px; border: 1px solid rgba(239,62,50,.48); color: #f2ded5; background: rgba(25,3,5,.92); opacity: 0; pointer-events: none; transform: translate(-50%, -10px); transition: opacity .2s ease, transform .2s ease; font-size: 11px; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

[hidden] { display: none !important; }

@keyframes gain-in { 0% { opacity: 0; transform: translateY(6px); } 25% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-9px); } }
@keyframes merit-float {
  0% {
    opacity: 0;
    transform: translate(var(--merit-start-x), calc(-50% + var(--merit-start-y) + 8px)) scale(.82);
  }
  12% {
    opacity: 1;
    transform: translate(var(--merit-start-x), calc(-50% + var(--merit-start-y))) scale(.96);
  }
  72% { opacity: 1; transform: translate(0, calc(-50% - 16px)) scale(1); }
  100% { opacity: 0; transform: translate(0, calc(-50% - 28px)) scale(1); }
}
@keyframes merit-pulse {
  0% { color: #fff4c9; text-shadow: 0 0 0 rgba(239, 62, 50, 0); }
  35% { color: #fff9e6; text-shadow: 0 0 14px rgba(239, 62, 50, .9); }
  100% { color: #f3c789; text-shadow: none; }
}

@media (min-width: 700px) {
  .view { padding-right: 42px; padding-left: 42px; }
  .home-view { padding-right: 42px; padding-left: 42px; }
}

@media (max-height: 700px) {
  .home-view { gap: 8px; padding-top: calc(9px + var(--safe-top)); }
}

@media (max-width: 360px) {
  .home-view { padding-right: 9px; padding-left: 9px; }
  .account-menu-button { right: 9px; }
  .home-player-summary { max-width: calc(100% - 130px); gap: 3px; }
  .home-player-summary b { max-width: 3.5em; }
  .home-player-server { max-width: 3.2em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* 朝歌守城挂机：Pixi 只承载主角待机与头顶封印，不运行战斗循环。 */
.combat-panel {
  grid-template-rows: minmax(220px, 1fr);
  gap: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #000000;
}

.chaoge-spine-stage {
  position: relative;
  min-height: clamp(450px, calc(100dvh - 114px - var(--safe-top) - var(--safe-bottom)), 750px);
  overflow: hidden;
  isolation: isolate;
  background: #000000;
}

.home-module-nav {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  min-height: 42px;
  padding: 0;
  transition: opacity .55s ease .65s, transform .55s ease .65s;
}

.home-module-dock {
  position: fixed;
  z-index: 14;
  left: 50%;
  bottom: calc(10px + var(--safe-bottom));
  display: grid;
  gap: 6px;
  width: min(760px, calc(100vw - 24px));
  transform: translateX(-50%);
}

.home-module-button {
  --module-accent: #5f9682;
  --module-line: #977044;
  --module-line-inner: rgba(205, 174, 112, .66);
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--module-line);
  border-radius: 5px;
  padding: 0 8px;
  color: #405e55;
  background: rgba(255, 246, 242, .94);
  box-shadow: 0 2px 7px rgba(69, 52, 34, .11), inset 0 1px 0 rgba(255, 253, 244, .9);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease, transform .1s ease;
}

.home-module-button::after {
  position: absolute;
  inset: 2px;
  border: 1px solid var(--module-line-inner);
  border-radius: 3px;
  content: "";
  pointer-events: none;
}

.home-module-button[data-module-name="人皇"] { --module-accent: #c96c58; }
.home-module-button[data-module-name="战场"] { --module-accent: #668fa7; }
.home-module-button[data-module-name="帝皇灵"] { --module-accent: #9a7042; }
.home-module-button[data-module-name="城内建筑"] { --module-accent: #55998f; }
.home-module-button[data-module-name="国库"] { --module-accent: #a57839; }

.home-module-label {
  overflow: hidden;
  min-width: 0;
  color: inherit;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.home-module-button:active {
  border-color: #79542f;
  background: color-mix(in srgb, var(--module-accent) 14%, #fff8f4);
  box-shadow: inset 0 2px 4px rgba(78, 55, 31, .16);
  transform: translateY(1px) scale(.98);
}
.home-module-button:focus-visible { outline: 2px solid #8b6438; outline-offset: 2px; }

.pixi-render-surface {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  visibility: hidden;
}

.chaoge-spine-stage.is-layout-ready .pixi-render-surface { visibility: visible; }

.pixi-loading {
  position: absolute;
  z-index: 6;
  top: 43%;
  left: 50%;
  color: rgba(215, 205, 188, .64);
  font-size: 10px;
  letter-spacing: .14em;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

@media (max-height: 700px) {
  .chaoge-spine-stage { min-height: 450px; }
}

@media (max-width: 420px) {
  .home-module-nav { gap: 5px; }
  .home-module-button { padding: 0 5px; }
}

@media (max-width: 360px) {
  .home-module-nav { min-height: 42px; gap: 4px; }
  .home-module-button { min-height: 42px; padding: 0 4px; }
  .home-module-label { font-size: 12px; }
}

@media (max-width: 330px) {
  .home-module-button { padding: 0 3px; }
  .home-module-label { font-size: 11px; }
}

/* 暗黑只属于开幕；人皇入场后，首页恢复清晨朝歌的明亮色调。 */
:root {
  --void: #000000;
  --morning-sky: #c8e9ef;
  --morning-mist: #edf6ec;
  --morning-ground: #e1eed6;
  --morning-ink: #315b52;
}
html,
body,
#app,
.view {
  background: #000000;
}

body[data-view="auth"],
body[data-view="auth"] #app,
body[data-view="auth"] .auth-view {
  background-color: #74becb;
}
body[data-view="auth"] .auth-view {
  background-image: url("/images/login/login-bg.webp?v=20260811-01");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 已登录玩家返回首页时，先固定显示主页加载底色，避免认证页的蓝底闪过。 */
html[data-session-restoring="true"] body[data-booting="true"],
html[data-session-restoring="true"] body[data-booting="true"] #app {
  background: #edf6ec;
}
html[data-session-restoring="true"] body[data-booting="true"] #app {
  background:
    linear-gradient(180deg, rgba(237,246,236,.28), rgba(237,246,236,.7)),
    url("/images/bg.jpg?v=20260809-01") center / cover no-repeat,
    #edf6ec;
}

.home-view {
  color: var(--morning-ink);
  background: var(--morning-mist);
  isolation: isolate;
  transition: background-color 1.35s ease, color 1.1s ease;
}

.home-view::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("/images/bg.jpg?v=20260809-01") center / cover no-repeat;
  content: "";
  filter: brightness(.78) saturate(.68) contrast(.94);
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.35s ease, filter 1.35s ease;
}

.home-view::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(25, 72, 75, .18) 0%,
    rgba(45, 111, 108, .09) 48%,
    rgba(22, 73, 77, .28) 100%
  );
  content: "";
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.35s ease;
}

body[data-view="home"][data-home-theme="light"],
body[data-view="home"][data-home-theme="light"] #app { background: var(--morning-mist); }

.home-view .combat-panel,
.home-view .chaoge-spine-stage { background: transparent; }

.home-view .combat-panel { position: relative; z-index: 1; }

.home-view.is-intro-dark {
  color: #e8e1d7;
  background: #000000;
}

.home-view.is-intro-dark::before { opacity: 0; }
.home-view.is-intro-dark::after { opacity: 0; }

.home-view.is-intro-dark .home-module-nav,
.home-view.is-intro-dark .chaoge-location-seal,
.home-view.is-intro-dark .home-player-summary,
.home-view.is-intro-dark .account-menu-button {
  opacity: 0;
  pointer-events: none;
}

.home-view.is-intro-dark .home-module-nav { transform: translateY(10px); }

.home-view.is-world-restored .home-module-nav,
.home-view.is-world-restored .chaoge-location-seal,
.home-view.is-world-restored .home-player-summary,
.home-view.is-world-restored .account-menu-button { opacity: 1; }

.home-view.is-intro-dark .pixi-loading { color: rgba(215, 205, 188, .64); }
.home-view.is-world-restored .pixi-loading { color: rgba(53, 91, 80, .66); }

body[data-view="home"] .toast {
  border-color: rgba(83, 139, 119, .35);
  color: #315b52;
  background: rgba(250, 255, 250, .94);
  box-shadow: 0 8px 24px rgba(42, 80, 67, .16);
}

body[data-view="home"][data-home-theme="light"] .merit-gain-float {
  color: #ffd474;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 8px rgba(255, 212, 116, .24);
}

body[data-view="home"][data-home-theme="light"] .experience-gain-float {
  color: #a9ffd0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 8px rgba(91, 220, 151, .22);
}

body[data-view="home"][data-home-theme="light"] .fortune-gain-float {
  color: #e3a8ff;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 8px rgba(227, 168, 255, .22);
}

body[data-view="home"][data-home-theme="light"] .true-energy-gain-float {
  color: #9fddff;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 8px rgba(159, 221, 255, .22);
}

/* 朝歌挂机主视觉：城池不超过屏宽 60%，与骨骼动画分层渲染。 */
.chaoge-city {
  position: absolute;
  z-index: 1;
  top: 55%;
  left: 50%;
  width: min(60vw, 360px);
  max-width: 60%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  visibility: hidden;
}

.chaoge-spine-stage.is-layout-ready .chaoge-city { visibility: visible; }

.chaoge-city::before,
.chaoge-city::after {
  position: absolute;
  z-index: 2;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.chaoge-city::before {
  top: 61.5%;
  left: 44%;
  width: 12%;
  height: 15%;
  border-radius: 50% 50% 2px 2px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 0 10px rgba(255, 255, 255, .72), 0 0 22px rgba(220, 232, 242, .38);
  filter: blur(1px);
  transform: scale(.72, .82);
  transform-origin: 50% 100%;
}

.chaoge-city::after {
  top: 53.5%;
  right: 8%;
  left: 8%;
  height: 1px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 0 7px rgba(255, 255, 255, .68);
  transform: scaleX(.72);
}

.chaoge-city.is-resonating::before { animation: city-gate-response .62s ease-out; }
.chaoge-city.is-resonating::after { animation: city-wall-response .62s ease-out; }

.chaoge-city-image {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: opacity 1.35s ease, filter 1.35s ease;
  -webkit-mask-image: radial-gradient(ellipse at 50% 52%, #000 0 68%, rgba(0, 0, 0, .78) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 52%, #000 0 68%, rgba(0, 0, 0, .78) 82%, transparent 100%);
}

.chaoge-city-image-light {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
.chaoge-city-image-dark { opacity: 0; }
.home-view.is-intro-dark .chaoge-city-image-light { opacity: 0; }
.home-view.is-intro-dark .chaoge-city-image-dark { opacity: 1; }

@keyframes city-gate-response {
  0% { opacity: 0; transform: scale(.72, .82); }
  22% { opacity: .82; transform: scale(1, 1); }
  100% { opacity: 0; transform: scale(.82, .92); }
}

@keyframes city-wall-response {
  0% { opacity: 0; transform: scaleX(.72); }
  30% { opacity: .64; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(.86); }
}

.pixi-render-surface { z-index: 2; }
.pixi-loading { z-index: 6; }
.resource-gain-float {
  z-index: 6;
}

.guardian-speech {
  position: absolute;
  z-index: 6;
  min-width: 76px;
  padding: 7px 9px;
  border: 1px solid rgba(88, 139, 122, .3);
  border-right-color: rgba(88, 139, 122, .58);
  border-radius: 8px;
  color: #315b52;
  background: rgba(252, 255, 250, .9);
  box-shadow: 0 6px 18px rgba(57, 94, 81, .13);
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.92);
  transform-origin: 100% 50%;
  white-space: normal;
}

.guardian-speech::before {
  position: absolute;
  top: 50%;
  right: -7px;
  width: 10px;
  height: 1px;
  content: "";
  background: rgba(88, 139, 122, .56);
  box-shadow: none;
  transform: rotate(-20deg);
  transform-origin: 0 50%;
}

.guardian-speech.is-active { animation: guardian-speech 2.4s ease-out forwards; }

@keyframes guardian-speech {
  0% { opacity: 0; transform: translateY(calc(-50% + 5px)) scale(.92); }
  12%, 72% { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(calc(-50% - 7px)) scale(.98); }
}

@media (max-height: 700px) {
  .chaoge-city { top: 57%; }
}

/* 首页挂机改为可选择的封神战场：演出与服务端收益结算彼此独立。 */
.story-panel.is-intro-playing {
  display: block;
  min-height: calc(100dvh - 44px - var(--safe-top) - var(--safe-bottom));
}
.story-panel.is-intro-playing .story-body,
.story-panel.is-intro-playing .story-footer { display: none; }
.story-intro-stage {
  width: 100%;
  min-height: min(620px, calc(100dvh - 44px - var(--safe-top) - var(--safe-bottom)));
  background: #000;
}
.story-intro-stage .pixi-loading { color: rgba(215, 205, 188, .68); }

.home-view {
  /* Keep 70px clear on both sides for the fixed quick actions. */
  --home-battlefield-layout-size: min(calc(100vw - 140px), calc(100dvh - 300px));
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: start;
  gap: 5px;
}
.home-view .account-menu-button {
  position: fixed;
  top: calc(14px + var(--safe-top));
  right: 16px;
  z-index: 12;
}
.home-view .battlefield-shell,
.home-view .home-recommended-goal {
  --battlefield-grid-size: var(--home-battlefield-layout-size);
  width: min(100%, var(--battlefield-grid-size));
}
.home-recommended-goal {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  gap: 12px;
  border: 1px solid rgba(109, 91, 55, .48);
  border-left: 3px solid #b48758;
  border-radius: 4px;
  padding: 7px 10px;
  color: #315b52;
  background: rgba(255, 253, 239, .58);
}
.home-recommended-goal-copy { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.home-recommended-goal-copy > span { flex: 0 0 auto; color: #947047; font-size: 10px; font-weight: 800; }
.home-recommended-goal-copy strong { overflow: hidden; color: #315b52; font-family: "Kaiti SC", "STKaiti", "Songti SC", serif; font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.home-recommended-goal button { min-height: 32px; border: 1px solid rgba(164, 87, 57, .72); border-radius: 3px; padding: 0 10px; color: #fff9ed; background: #ad6043; cursor: pointer; font-family: "Kaiti SC", "STKaiti", "Songti SC", serif; font-size: 11px; font-weight: 800; white-space: nowrap; }
.home-recommended-goal button:active { transform: translateY(1px); }
.battlefield-shell {
  --battlefield-grid-size: var(--home-battlefield-layout-size, min(calc(100vw - 130px), calc(100dvh - 122px)));
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, var(--battlefield-grid-size));
  overflow: hidden;
  border: 1px solid rgba(109, 91, 55, .78);
  border-radius: 6px;
  background: rgba(238, 242, 232, .93);
  box-shadow: 0 10px 25px rgba(38, 78, 69, .18), inset 0 0 0 3px rgba(255, 253, 238, .62);
}
.battlefield-power {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 28px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(109, 91, 55, .28);
  color: #647d73;
  background: rgba(250, 248, 235, .72);
  font-size: 12px;
  font-weight: 700;
}
.battlefield-player-name { overflow: hidden; color: #41695f; font-family: "Kaiti SC", "STKaiti", "Songti SC", serif; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.battlefield-power-value { display: flex; flex: 0 0 auto; align-items: baseline; gap: 5px; white-space: nowrap; }
.battlefield-power-value strong { color: #a25b31; font-family: var(--number-font); font-size: 18px; font-weight: 900; line-height: 1; }
.home-view .battlefield-header {
  --battlefield-grid-size: var(--home-battlefield-layout-size);
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 48px;
  align-self: start;
  justify-self: center;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(109, 91, 55, .52);
  border-radius: 0;
  background:
    repeating-linear-gradient(0deg, rgba(103, 78, 42, .018) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, rgba(247, 242, 224, .94), rgba(232, 226, 204, .9));
  box-shadow: inset 0 -1px 0 rgba(255, 253, 238, .72);
  padding: 4px 12px;
}
.home-view .battlefield-picker { min-height: 38px; }
.home-view .combat-panel.battlefield-panel {
  --battlefield-grid-size: var(--home-battlefield-layout-size);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto auto;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  align-self: start;
  justify-self: center;
  margin-right: auto;
  margin-left: auto;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(238, 242, 232, .93);
  box-shadow: inset 0 0 0 3px rgba(255, 253, 238, .58), inset 0 0 0 5px rgba(125, 146, 132, .08);
}
.home-side-gift {
  position: fixed;
  z-index: 10;
  top: calc(24px + var(--safe-top));
  left: 10px;
  display: grid;
  width: 56px;
  min-height: 72px;
  grid-template-rows: 48px auto;
  place-items: center;
  padding: 4px 3px 6px;
  color: #5d4631;
  background: transparent;
  text-align: center;
  text-decoration: none;
}
.home-side-gift img { width: 46px; height: 46px; object-fit: contain; }
.home-side-gift span { color: #fff; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px rgba(32, 58, 51, .72); }
.home-side-gift:focus-visible { outline: 2px solid #c05e43; outline-offset: 2px; }
.home-side-gift:active { transform: translateY(1px); }
.home-side-ranking {
  position: fixed;
  z-index: 10;
  top: calc(104px + var(--safe-top));
  left: 10px;
  display: grid;
  width: 56px;
  min-height: 72px;
  grid-template-rows: 48px auto;
  place-items: center;
  padding: 4px 3px 6px;
  color: #5d4631;
  background: transparent;
  text-align: center;
  text-decoration: none;
}
.home-side-ranking img { width: 46px; height: 46px; object-fit: contain; }
.home-side-ranking span { color: #fff; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px rgba(32, 58, 51, .72); }
.home-side-ranking:focus-visible { outline: 2px solid #c05e43; outline-offset: 2px; }
.home-side-ranking:active { transform: translateY(1px); }
.home-view .chaoge-location-seal {
  display: none;
}
.battlefield-panel::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  opacity: .18;
  pointer-events: none;
  background-image: linear-gradient(rgba(91, 123, 107, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 123, 107, .3) 1px, transparent 1px);
  background-size: 20% 20%;
}
.battlefield-header,
.battlefield-grid,
.battlefield-fury { position: relative; z-index: 1; }
.battlefield-grid { z-index: 2; }
.battlefield-header {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
  padding: 7px 12px;
}
.battlefield-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(145, 111, 55, .68);
  border-radius: 4px;
  padding: 5px 30px 5px 14px;
  color: #315b52;
  background: rgba(255, 252, 235, .76);
  box-shadow: inset 0 0 0 2px rgba(255, 250, 228, .58), 0 2px 5px rgba(73, 57, 32, .08);
  cursor: pointer;
  justify-self: center;
  grid-column: 2;
  width: min(100%, 188px);
  text-align: center;
}
.battlefield-picker strong {
  min-width: 0;
  overflow: hidden;
  color: #28594f;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.battlefield-picker i {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 10px;
  height: 7px;
  color: transparent;
  font-style: normal;
  transform: translateY(-50%);
}
.battlefield-picker::before {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(181, 145, 78, .28);
  border-radius: 2px;
  content: "";
  pointer-events: none;
}
.battlefield-picker i::before,
.battlefield-picker i::after {
  position: absolute;
  top: 2px;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  content: "";
  background: #9a673a;
  transition: background-color .16s ease, transform .16s ease;
}
.battlefield-picker i::before { right: 4px; transform: rotate(42deg); transform-origin: 100% 50%; }
.battlefield-picker i::after { left: 4px; transform: rotate(-42deg); transform-origin: 0 50%; }
.battlefield-picker:hover,
.battlefield-picker:focus-visible { border-color: #bd7545; background: #fffdf1; }
.battlefield-picker:hover i::before,
.battlefield-picker:hover i::after,
.battlefield-picker:focus-visible i::before,
.battlefield-picker:focus-visible i::after { background: #b6533c; }
.battlefield-income-button {
  display: inline-flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  justify-self: center;
  grid-column: 1;
  border: 0;
  padding: 0 8px;
  color: #315b52;
  background: transparent;
  cursor: pointer;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(49, 91, 82, .34);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.battlefield-income-button:hover,
.battlefield-income-button:focus-visible { color: #a35d35; text-decoration-color: currentColor; }
.battlefield-info-button {
  display: inline-flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  justify-self: center;
  grid-column: 3;
  border: 0;
  padding: 0 8px;
  color: #315b52;
  background: transparent;
  cursor: pointer;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(49, 91, 82, .34);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.battlefield-info-button:hover,
.battlefield-info-button:focus-visible { color: #a35d35; text-decoration-color: currentColor; }
.battlefield-rates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 7px;
  align-content: center;
  min-width: 0;
  padding: 3px 2px;
}
.battlefield-rate {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 3px;
  color: #40675b;
  font-family: var(--number-font);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}
.battlefield-rate i { overflow: hidden; color: #789183; font-style: normal; text-overflow: ellipsis; }
.battlefield-rate b { overflow: hidden; color: #9c5d32; font-weight: 800; text-overflow: ellipsis; }
.battlefield-grid {
  --battlefield-grid-gap: 6px;
  --battlefield-grid-horizontal-padding: 24px;
  --battlefield-cell-size: calc((var(--battlefield-grid-size) - 2px - var(--battlefield-grid-horizontal-padding) - (var(--battlefield-grid-gap) * 4)) / 5);
  display: grid;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: calc((var(--battlefield-cell-size) * 5) + (var(--battlefield-grid-gap) * 4) + 18px);
  align-self: start;
  align-content: start;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, var(--battlefield-cell-size));
  gap: var(--battlefield-grid-gap);
  padding: 7px 12px 11px;
}
.battlefield-cell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(116, 131, 123, .5);
  border-radius: 3px;
  background: rgba(223, 229, 222, .86);
  box-shadow: inset 0 0 0 1px rgba(250, 251, 246, .52), inset 0 -8px 14px rgba(65, 91, 80, .035);
  transform-origin: center;
  --battlefield-attack-retreat-x: 0px;
  --battlefield-attack-retreat-y: 0px;
  --battlefield-attack-lunge-x: 0px;
  --battlefield-attack-lunge-y: 0px;
  --battlefield-move-x: 0px;
  --battlefield-move-y: 0px;
}
.battlefield-cell:nth-child(3n) { background: rgba(229, 234, 227, .88); }
.battlefield-cell:nth-child(4n) { background: rgba(216, 224, 216, .88); }
.battlefield-cell.is-player-zone {
  border-color: rgba(211, 177, 100, .94);
  background: #252925;
  box-shadow: inset 0 0 0 2px rgba(255, 239, 189, .24), 0 0 11px rgba(27, 35, 29, .36);
}
.battlefield-cell.is-enemy-zone {
  border-color: rgba(190, 109, 96, .82);
  background: #b96c63;
  box-shadow: inset 0 0 0 1px rgba(255, 229, 207, .28), inset 0 -9px 15px rgba(121, 49, 44, .11), 0 0 6px rgba(166, 84, 75, .18);
}
.battlefield-unit {
  position: relative;
  display: grid;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  box-sizing: border-box;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: center;
  justify-items: center;
  gap: 12px;
  margin: 5px;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  padding: 7px 5px 5px;
  color: #345c52;
  background: rgba(255, 253, 241, .34);
  box-shadow: none;
  transform-origin: center;
  --battlefield-attack-retreat-x: 0px;
  --battlefield-attack-retreat-y: 0px;
  --battlefield-attack-lunge-x: 0px;
  --battlefield-attack-lunge-y: 0px;
}
.battlefield-cell.is-player-zone .battlefield-unit {
  border: 0;
  color: #fff4d9;
  background: rgba(20, 24, 23, .72);
  box-shadow: none;
}
.battlefield-cell.is-enemy-zone .battlefield-unit {
  border: 0;
  color: #fff5ea;
  background: rgba(119, 48, 43, .14);
  box-shadow: none;
}
.battlefield-player {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.battlefield-enemy {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.battlefield-unit-portrait {
  display: block;
  position: absolute;
  z-index: 0;
  inset: -4px -3px 7px;
  width: 100%;
  height: calc(100% - 3px);
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 2px 2px rgba(61, 31, 24, .28));
}
.battlefield-enemy .battlefield-unit-name,
.battlefield-enemy .battlefield-health,
.battlefield-player .battlefield-health {
  position: relative;
  z-index: 1;
}
.battlefield-player .battlefield-unit-portrait {
  inset: -4px -3px 7px;
  width: 100%;
  height: calc(100% - 3px);
}
.battlefield-enemy .battlefield-unit-name {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1.15em;
  max-width: none;
  max-height: calc(100% - 25px);
  overflow: hidden;
  font-size: clamp(8px, calc(2.15vw - 5px), 10px);
  line-height: 1.05;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: normal;
}
.battlefield-enemy .battlefield-health {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}
.battlefield-player .battlefield-health {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}
.battlefield-cell.is-player-zone .battlefield-unit-meta,
.battlefield-cell.is-enemy-zone .battlefield-unit-meta {
  border-color: rgba(255, 232, 200, .3);
  color: rgba(255, 241, 213, .9);
  background: rgba(67, 40, 32, .22);
}
.battlefield-unit-name {
  align-self: end;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: clamp(13px, 2.25vw, 16px);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px 0 rgba(62, 37, 28, .28);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.battlefield-unit-meta {
  box-sizing: border-box;
  max-width: 88%;
  overflow: hidden;
  border: 1px solid rgba(67, 96, 84, .16);
  border-radius: 3px;
  padding: 2px 6px;
  color: rgba(61, 101, 87, .78);
  background: rgba(255, 255, 249, .38);
  font-family: var(--number-font);
  font-size: clamp(8px, 1.55vw, 10px);
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.battlefield-health {
  display: block;
  width: min(74%, 66px);
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(50, 64, 55, .4);
  border-radius: 3px;
  background: rgba(38, 49, 43, .34);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .18);
}
.battlefield-health i {
  display: block;
  height: 100%;
  background: #d9ac61;
  box-shadow: inset 0 1px 0 rgba(255, 246, 192, .46);
  transition: width .18s ease;
}
.battlefield-enemy .battlefield-health i { background: #f1bd78; }
.battlefield-player .battlefield-health i { background: #58bd76; }
.battlefield-unit.is-hit { animation: battlefield-unit-hit .28s ease-out; }
.battlefield-cell.is-attacking {
  z-index: 10;
  will-change: transform, filter;
  animation: battlefield-cell-attack .68s cubic-bezier(.16, .8, .24, 1) both;
}
.battlefield-unit.is-defeated { opacity: .28; filter: grayscale(1); transform: scale(.86); }
.battlefield-unit.is-defeat-flashing {
  animation: battlefield-unit-defeat-flash .5s linear both;
}
.battlefield-cell.is-moving {
  z-index: 2;
  animation: battlefield-cell-step .46s cubic-bezier(.22, .72, .24, 1) both;
}
.battlefield-enemy.is-skill-pulled {
  z-index: 7;
  filter: brightness(1.17) saturate(1.18) drop-shadow(0 9px 7px rgba(39, 27, 17, .58));
  transform-origin: center bottom;
  will-change: transform, filter;
  animation: battlefield-skill-enemy-pull .3s cubic-bezier(.14, .76, .2, 1) both;
}
.battlefield-enemy.is-skill-pulled::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(246, 196, 85, .9);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(238, 156, 55, .72), inset 0 0 8px rgba(255, 234, 150, .5);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.52);
  animation: battlefield-skill-enemy-lock .3s ease-out both;
}
.battlefield-cell.is-under-attack { z-index: 3; animation: battlefield-cell-shake .36s ease-out; }
.battlefield-damage-float {
  position: absolute;
  z-index: 15;
  top: -12px;
  left: 50%;
  min-width: 28px;
  color: #ff3e2e;
  font-family: var(--number-font);
  font-size: clamp(19px, 3.6vw, 26px);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  -webkit-text-stroke: 1.2px rgba(72, 20, 16, .96);
  paint-order: stroke fill;
  text-shadow: 0 1px #fff6d1, 0 0 7px rgba(195, 26, 21, .92), 0 0 13px rgba(255, 147, 65, .74);
  transform: translate(-50%, 8px) scale(.78);
  white-space: nowrap;
  animation: battlefield-damage-float .72s cubic-bezier(.18, .7, .25, 1) forwards;
}
.battlefield-damage-float.is-skill {
  color: #ffd039;
  font-size: clamp(22px, 5vw, 30px);
  -webkit-text-stroke: 1.2px rgba(95, 49, 18, .94);
  text-shadow: 0 1px #fffbd9, 0 0 10px rgba(236, 142, 19, .98), 0 0 18px rgba(255, 200, 56, .8);
}
.battlefield-damage-unit {
  margin-left: 1px;
  font: inherit;
  font-size: calc(1em - 3px);
  vertical-align: baseline;
}
.battlefield-fury {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 33px;
  border-top: 1px solid rgba(117, 86, 40, .5);
  padding: 6px 10px 7px;
  color: #6d5330;
  background: rgba(255, 250, 231, .8);
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 11px;
  font-weight: 700;
}
.battlefield-fury-track {
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(137, 89, 49, .42);
  border-radius: 4px;
  background: rgba(151, 98, 57, .14);
}
.battlefield-fury-track i { display: block; width: 0; height: 100%; background: #d56c42; transition: width .2s ease; }
.battlefield-fury strong { min-width: 46px; color: #9d5637; font-family: var(--number-font); font-size: 10px; text-align: right; }
.battlefield-skill-overlay { position: absolute; z-index: 7; inset: 0; overflow: hidden; pointer-events: none; }
.battlefield-skill-overlay.is-active { animation: battlefield-skill-flash .72s ease-out; }
.battlefield-skill-overlay .pixi-render-surface { visibility: visible; }
.battlefield-hit-effects { position: absolute; z-index: 9; inset: 0; overflow: hidden; pointer-events: none; }
.battlefield-hit-effect {
  position: absolute;
  overflow: hidden;
  border-radius: 7px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.battlefield-hit-effect .pixi-render-surface { display: block; visibility: visible; }
.battlefield-damage-layer { position: absolute; z-index: 12; inset: 0; overflow: visible; pointer-events: none; }
.battlefield-income-feed {
  position: absolute;
  z-index: 14;
  right: 10px;
  bottom: 7px;
  left: 10px;
  min-height: 68px;
  overflow: visible;
  pointer-events: none;
}
.battlefield-income-recent {
  position: absolute;
  right: auto;
  bottom: 55px;
  left: 50%;
  display: flex;
  width: max-content;
  max-width: calc(100% - 18px);
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  color: rgba(255, 243, 213, .5);
  font-family: var(--number-font);
  font-size: 8px;
  line-height: 1;
  opacity: .72;
  text-shadow: 0 1px 3px rgba(47, 18, 13, .72);
  transform: translateX(-50%);
  white-space: nowrap;
}
.battlefield-income-recent-label {
  color: rgba(231, 174, 83, .72);
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-weight: 800;
}
.battlefield-income-recent-item { display: inline-flex; gap: 2px; min-width: 0; }
.battlefield-income-recent-item b { color: rgba(255, 243, 213, .42); font-weight: 600; }
.battlefield-income-recent-item strong { overflow: hidden; color: rgba(255, 243, 213, .64); font-weight: 700; text-overflow: ellipsis; }
.battlefield-income-float {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  animation: battlefield-income-float 2.2s ease-out both;
}
.battlefield-income-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 7px 0;
}
.battlefield-income-track::before {
  position: absolute;
  top: 4px;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 70, 56, .18) 14%, rgba(231, 174, 83, .42) 50%, rgba(183, 70, 56, .18) 86%, transparent);
  box-shadow: 0 0 4px rgba(231, 174, 83, .18);
  content: "";
}
.battlefield-income-group {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 1px;
  justify-items: start;
  padding: 7px 4px 0;
  color: #fff3d5;
  font-family: var(--number-font);
  text-align: left;
  text-shadow: 0 1px 3px rgba(47, 18, 13, .96), 0 0 8px rgba(113, 39, 26, .45);
}
.battlefield-income-group::before {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(255, 243, 213, .62);
  border-radius: 50%;
  background: rgba(231, 174, 83, .72);
  box-shadow: 0 0 5px rgba(231, 174, 83, .6);
  content: "";
  transform: translateX(-50%);
}
.battlefield-income-primary {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
.battlefield-income-primary img { width: 19px; height: 19px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(36, 13, 10, .6)); }
.battlefield-income-primary-copy { display: flex; min-width: 0; align-items: baseline; gap: 4px; text-align: left; }
.battlefield-income-label { overflow: hidden; color: rgba(255, 243, 213, .66); font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.battlefield-income-value { overflow: hidden; color: #e7ae53; font-size: 15px; font-weight: 900; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.battlefield-income-secondary { display: flex; min-width: 0; max-width: calc(100% - 23px); align-items: baseline; gap: 3px; margin-left: 23px; color: rgba(255, 243, 213, .48); font-size: 8px; font-style: normal; line-height: 1; white-space: nowrap; }
.battlefield-income-secondary b { font-weight: 600; }
.battlefield-income-secondary strong { overflow: hidden; color: rgba(255, 243, 213, .62); font-weight: 700; text-overflow: ellipsis; }
.battlefield-income-group.is-vermilion .battlefield-income-value { color: #ff8b70; text-shadow: 0 0 8px rgba(183, 70, 56, .88), 0 1px 3px rgba(47, 18, 13, .96); animation: battlefield-income-rare-flash 1.2s .16s ease-out both; }
.battlefield-income-group.is-high-value::after {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 224, 143, .72);
  border-radius: 50%;
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
  animation: battlefield-income-burst .72s .25s ease-out both;
}
.battlefield-income-spark {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff3d5;
  box-shadow: 0 0 5px 2px rgba(231, 174, 83, .92), 0 0 11px rgba(183, 70, 56, .58);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.3);
  animation: battlefield-income-spark 1.12s cubic-bezier(.2, .76, .25, 1) both;
}
.battlefield-panel.is-skill-casting .battlefield-grid,
.battlefield-panel.is-skill-casting .battlefield-fury { z-index: 8; }
.battlefield-panel.is-skill-casting .battlefield-cell {
  background: transparent !important;
  box-shadow: none;
}
.battlefield-panel.is-impact-small,
.battlefield-panel.is-impact-medium,
.battlefield-panel.is-impact-large {
  transform-origin: center;
  will-change: transform, filter;
}
.battlefield-panel.is-impact-small { animation: battlefield-panel-impact-small .16s ease-out both; }
.battlefield-panel.is-impact-medium { animation: battlefield-panel-impact-medium .22s cubic-bezier(.18, .8, .24, 1) both; }
.battlefield-panel.is-impact-large { animation: battlefield-panel-impact-large .34s cubic-bezier(.16, .82, .22, 1) both; }
.battlefield-hit-effect.is-large { filter: brightness(1.16) saturate(1.24); }

.battlefield-dialog {
  width: min(600px, calc(100vw - 30px));
  max-height: min(740px, calc(100dvh - 30px));
  overflow: auto;
  border: 1px solid #8f6740;
  border-radius: 6px;
  padding: 0;
  color: #315b52;
  background: #f7f5e9;
  box-shadow: 0 18px 60px rgba(24, 52, 45, .35);
}
.battlefield-dialog::backdrop { background: rgba(22, 54, 49, .5); }
.battlefield-income-dialog {
  width: min(520px, calc(100vw - 30px));
  max-height: min(620px, calc(100dvh - 30px));
  overflow: auto;
  border: 1px solid #7b9d83;
  border-radius: 6px;
  padding: 0;
  color: #315b52;
  background: #f7f5e9;
  box-shadow: 0 18px 60px rgba(24, 52, 45, .35);
}
.battlefield-info-dialog {
  width: min(calc(100% - 28px), 430px);
  max-height: calc(100dvh - 28px);
  margin: auto;
  overflow: auto;
  border: 1px solid rgba(151, 117, 58, .48);
  border-radius: 6px;
  padding: 0;
  color: #315b52;
  background: #f8fbf3;
  box-shadow: 0 18px 48px rgba(18, 39, 33, .32);
}
.battlefield-info-dialog::backdrop { background: rgba(22, 54, 49, .5); }
.battlefield-info-content { padding: 13px; }
.battlefield-info-summary {
  display: grid;
  gap: 3px;
  border-left: 3px solid #b48758;
  padding: 8px 10px;
  background: rgba(235, 242, 226, .72);
}
.battlefield-info-kicker { color: #947047; font-size: 10px; font-weight: 700; }
.battlefield-info-name { color: #28594f; font-size: 18px; }
.battlefield-info-list { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.battlefield-info-list li { position: relative; padding-left: 15px; color: #527266; font-size: 12px; line-height: 1.55; }
.battlefield-info-list li::before { position: absolute; top: .62em; left: 2px; width: 5px; height: 5px; background: #b48758; content: ""; transform: rotate(45deg); }
.battlefield-info-threshold { margin: 13px 0 0; border-top: 1px solid rgba(73, 110, 96, .14); padding-top: 10px; color: #71857f; font-size: 11px; line-height: 1.5; }
.battlefield-info-threshold b { color: #9c5d32; font-family: var(--number-font); font-weight: 800; }
.battlefield-income-dialog::backdrop { background: rgba(22, 54, 49, .5); }
.battlefield-income-list { display: grid; gap: 11px; padding: 12px; }
.battlefield-income-section {
  display: grid;
  gap: 6px;
  border-top: 1px solid rgba(92, 127, 106, .2);
  padding-top: 10px;
}
.battlefield-income-section:first-child { border-top: 0; padding-top: 0; }
.battlefield-income-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.battlefield-income-section-heading span { color: #71857f; font-size: 11px; white-space: nowrap; }
.battlefield-income-section-title {
  margin: 0;
  color: #28594f;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 14px;
  line-height: 20px;
}
.battlefield-income-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.battlefield-income-row {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(92, 127, 106, .24);
  border-left: 4px solid #65987e;
  border-radius: 4px;
  padding: 0 10px;
  background: rgba(255, 255, 250, .72);
}
.battlefield-income-section:first-child .battlefield-income-row:nth-child(2) { border-left-color: #8b739d; }
.battlefield-income-section:first-child .battlefield-income-row:nth-child(3) { border-left-color: #b48758; }
.battlefield-income-section:first-child .battlefield-income-row:nth-child(4) { border-left-color: #6f94a8; }
.battlefield-income-section:nth-child(2) .battlefield-income-row { border-left-color: #b96f52; }
.battlefield-income-row span { min-width: 0; color: #527266; font-size: 12px; font-weight: 700; }
.battlefield-income-row strong {
  flex: 0 0 auto;
  color: #9c5d32;
  font-family: var(--number-font);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.battlefield-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(130, 93, 47, .4);
  padding: 16px 17px 12px;
  background: #edf3e5;
}
.battlefield-dialog-head span { color: #947047; font-family: var(--number-font); font-size: 10px; font-weight: 700; }
.battlefield-dialog-head h2 { margin: 3px 0 0; color: #315b52; font-family: "Noto Serif CJK SC", "Songti SC", serif; font-size: 22px; line-height: 1.2; }
.battlefield-dialog-close {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(129, 92, 51, .5);
  border-radius: 3px;
  color: #7a5633;
  background: rgba(255, 253, 242, .86);
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
}
.battlefield-dialog-close:hover,
.battlefield-dialog-close:focus-visible { border-color: #b6533c; color: #a64735; }
.battlefield-list { display: grid; gap: 6px; padding: 10px; }
.battlefield-progress-summary { border: 1px solid rgba(129, 99, 55, .34); border-left: 3px solid #b48758; border-radius: 4px; padding: 8px 10px; background: rgba(244, 239, 216, .72); }
.battlefield-progress-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; }
.battlefield-progress-row { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; color: #71857f; font-size: 11px; }
.battlefield-progress-row span { flex: 0 0 auto; }
.battlefield-progress-row b { overflow: hidden; color: #496a60; font-family: var(--number-font); font-size: 11px; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.battlefield-progress-row.is-emphasized span { color: #947047; font-weight: 700; }
.battlefield-progress-row.is-emphasized b { color: #a25b31; }
.battlefield-progress-row:last-child { grid-column: 1 / -1; border-top: 1px solid rgba(117, 92, 55, .16); padding-top: 7px; }
.battlefield-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 55px;
  align-items: center;
  border: 1px solid rgba(116, 87, 46, .34);
  border-radius: 4px;
  padding: 7px 9px;
  color: #315b52;
  background: #fffdf3;
  cursor: pointer;
  text-align: left;
}
.battlefield-option:hover:not(:disabled),
.battlefield-option:focus-visible { border-color: #b66143; background: #fff9e8; }
.battlefield-option:disabled { cursor: default; }
.battlefield-option-order { color: #b57c49; font-family: var(--number-font); font-size: 12px; font-weight: 800; }
.battlefield-option-copy { display: grid; min-width: 0; gap: 2px; }
.battlefield-option-copy b { overflow: hidden; color: #315b52; font-family: "Noto Serif CJK SC", "Songti SC", serif; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.battlefield-option-copy small { overflow: hidden; color: #73877c; font-family: var(--number-font); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.battlefield-option-state { color: #3f8765; font-family: var(--number-font); font-size: 10px; font-weight: 700; white-space: nowrap; }
.battlefield-option.is-selected { border-color: #b26042; background: #fff1d9; }
.battlefield-option.is-selected .battlefield-option-state { color: #a34f36; }
.battlefield-option.is-locked { opacity: .58; background: #edf0e8; }
.battlefield-option.is-locked .battlefield-option-state { color: #8c765e; }

@keyframes battlefield-unit-hit {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(.94); filter: brightness(1.5) saturate(.65); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes battlefield-cell-attack {
  0% { filter: brightness(1); transform: translate(0, 0) scale(1); }
  20% {
    filter: brightness(1.05) saturate(.9);
    transform: translate(var(--battlefield-attack-retreat-x), var(--battlefield-attack-retreat-y)) scale(.94);
  }
  44% {
    filter: brightness(1.2) saturate(1.16);
    transform: translate(var(--battlefield-attack-lunge-x), var(--battlefield-attack-lunge-y)) scale(1.08);
  }
  60% {
    filter: brightness(1.3) saturate(1.28);
    transform: translate(var(--battlefield-attack-lunge-x), var(--battlefield-attack-lunge-y)) scale(1.04);
  }
  70% {
    filter: brightness(1.08) saturate(1.06);
    transform: translate(var(--battlefield-attack-lunge-x), var(--battlefield-attack-lunge-y)) scale(1.01);
  }
  100% { filter: brightness(1); transform: translate(0, 0) scale(1); }
}
@keyframes battlefield-unit-defeat-flash {
  0%, 19% { opacity: 1; }
  20%, 32% { opacity: .12; }
  33%, 49% { opacity: 1; }
  50%, 59% { opacity: .12; }
  60%, 69% { opacity: 1; }
  70%, 77% { opacity: .12; }
  78%, 88% { opacity: 1; }
  100% { opacity: .28; }
}
@keyframes battlefield-cell-step {
  0% { opacity: .72; transform: translate(var(--battlefield-move-x), var(--battlefield-move-y)); }
  78% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes battlefield-skill-enemy-pull {
  0% { filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(39, 27, 17, 0)); transform: translateY(0) scale(1); }
  62% { filter: brightness(1.25) saturate(1.3) drop-shadow(0 12px 8px rgba(39, 27, 17, .62)); transform: translateY(-11px) scale(1.34); }
  100% { filter: brightness(1.17) saturate(1.18) drop-shadow(0 9px 7px rgba(39, 27, 17, .58)); transform: translateY(-7px) scale(1.22); }
}
@keyframes battlefield-skill-enemy-lock {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.52); }
  44% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  100% { opacity: .62; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes battlefield-cell-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  42% { transform: translateX(4px); }
  64% { transform: translateX(-2px); }
  82% { transform: translateX(2px); }
}
@keyframes battlefield-panel-impact-small {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35% { transform: translate3d(-1px, 0, 0); }
  70% { transform: translate3d(1px, 0, 0); }
}
@keyframes battlefield-panel-impact-medium {
  0%, 100% { filter: brightness(1); transform: translate3d(0, 0, 0); }
  22% { filter: brightness(1.14); transform: translate3d(-2px, 1px, 0) scale(1.006); }
  55% { filter: brightness(1.04); transform: translate3d(2px, 0, 0) scale(.998); }
}
@keyframes battlefield-panel-impact-large {
  0%, 100% { filter: brightness(1); transform: translate3d(0, 0, 0) scale(1); }
  18% { filter: brightness(1.2) saturate(1.16); transform: translate3d(-4px, 1px, 0) scale(1.012); }
  46% { filter: brightness(1.08); transform: translate3d(4px, -1px, 0) scale(.998); }
  72% { filter: brightness(1.02); transform: translate3d(-1px, 0, 0) scale(1.002); }
}
@keyframes battlefield-damage-float {
  0% { opacity: 0; transform: translate(-50%, 9px) scale(.76); }
  16% { opacity: 1; transform: translate(-50%, 1px) scale(1.04); }
  72% { opacity: 1; transform: translate(-50%, -19px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -27px) scale(.96); }
}
@keyframes battlefield-income-float {
  0% { opacity: 0; transform: translateY(9px); }
  14% { opacity: 1; transform: translateY(0); }
  74% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes battlefield-income-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72% { opacity: .82; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--income-spark-dx)), calc(-50% + var(--income-spark-dy))) scale(.18);
  }
}
@keyframes battlefield-income-rare-flash {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.55); }
  55% { filter: brightness(1.05); }
}
@keyframes battlefield-income-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  35% { opacity: .9; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.65); }
}
@keyframes battlefield-skill-flash {
  0% { background: rgba(255, 232, 155, 0); }
  18% { background: rgba(255, 239, 182, .72); }
  100% { background: rgba(255, 232, 155, 0); }
}

@media (max-width: 520px) {
  .home-view { --home-battlefield-layout-size: min(calc(100vw - 140px), calc(100dvh - 230px)); }
  .battlefield-shell,
  .home-view .battlefield-header,
  .home-view .combat-panel.battlefield-panel {
    --battlefield-grid-size: var(--home-battlefield-layout-size);
    width: min(100%, var(--battlefield-grid-size));
    height: auto;
  }
  .home-view .account-menu-button { top: calc(8px + var(--safe-top)); right: 7px; }
  .battlefield-power { gap: 5px; padding-right: 7px; padding-left: 7px; font-size: 11px; }
  .battlefield-player-name { font-size: 12px; }
  .battlefield-power-value { gap: 3px; }
  .battlefield-power-value strong { font-size: 16px; }
  .home-view .battlefield-header { min-height: 44px; }
  .battlefield-header { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px 8px; }
  .home-view .battlefield-picker { min-height: 34px; padding: 3px 25px 3px 8px; }
  .battlefield-picker strong { font-size: 13px; }
  .battlefield-income-button, .battlefield-info-button { padding: 0 4px; font-size: 11px; }
  .battlefield-grid {
    --battlefield-grid-gap: 4px;
    --battlefield-grid-horizontal-padding: 16px;
    height: calc((var(--battlefield-cell-size) * 5) + (var(--battlefield-grid-gap) * 4) + 12px);
    gap: var(--battlefield-grid-gap);
    padding: 5px 8px 7px;
  }
  .battlefield-unit {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    gap: 9px;
    margin: 4px;
    padding: 5px 3px 3px;
  }
  .battlefield-health { width: min(80%, 56px); height: 7px; }
  .battlefield-unit-name { font-size: clamp(10px, 3.3vw, 13px); }
  .battlefield-fury { min-height: 29px; padding: 5px 7px; font-size: 10px; }
  .battlefield-income-feed { right: 8px; bottom: 38px; left: 8px; }
  .home-view .chaoge-location-seal { display: none; }
}

@media (max-width: 360px) {
  .home-view { --home-battlefield-layout-size: min(calc(100vw - 140px), calc(100dvh - 220px)); }
  .battlefield-shell,
  .home-view .battlefield-header,
  .home-view .combat-panel.battlefield-panel {
    --battlefield-grid-size: var(--home-battlefield-layout-size);
    width: min(100%, var(--battlefield-grid-size));
    height: auto;
  }
}

/* 短屏设备将底部功能坞纳入页面流，保证角色信息和推荐目标不被固定菜单覆盖。 */
@media (max-height: 700px) {
  .home-view { --home-battlefield-layout-size: min(calc(100vw - 140px), 320px); }
  .home-module-dock {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(760px, 100%);
    margin-top: 8px;
    transform: none;
  }
}

@media (max-width: 360px) and (max-height: 700px) {
  .home-view { --home-battlefield-layout-size: min(calc(100vw - 140px), 300px); }
}

/* 窗口仍能容纳战场时，缩小战场并保留可见的固定功能菜单。 */
@media (min-width: 521px) and (min-height: 541px) and (max-height: 700px) {
  .home-view {
    --home-battlefield-layout-size: min(
      calc(100vw - 140px),
      max(210px, calc(100dvh - 290px))
    );
  }
  .home-module-dock {
    position: fixed;
    right: auto;
    bottom: calc(10px + var(--safe-bottom));
    left: 50%;
    margin-top: 0;
    transform: translateX(-50%);
  }
}

/* 桌面窗口保留固定底部菜单时，按剩余可视高度收缩战场。 */
@media (min-width: 521px) and (min-height: 701px) {
  .home-view { --home-battlefield-layout-size: min(calc(100vw - 140px), calc(100dvh - 300px)); }
}

@media (max-width: 980px) {
  .home-view .chaoge-location-seal { display: none; }
}

/* 首页主场景：朝歌战场 HUD。保留战斗功能，移除网页式卡片布局。 */
html[data-session-restoring="true"] body[data-booting="true"],
html[data-session-restoring="true"] body[data-booting="true"] #app,
body[data-view="home"],
body[data-view="home"] #app {
  background: #163a3c;
}

.home-view {
  --home-battlefield-layout-size: min(calc(100vw - 24px), calc(100dvh - 226px), 540px);
  display: grid;
  width: 100%;
  min-height: 100dvh;
  box-sizing: border-box;
  grid-template-rows: minmax(0, 1fr);
  align-items: start;
  justify-items: center;
  padding: calc(12px + var(--safe-top)) 12px calc(92px + var(--safe-bottom));
  overflow: hidden;
  color: #fff7df;
  background: #163a3c;
}

.home-view::before {
  background: url("/images/backgrounds/chaoge-war-hud.png?v=20260916-01") center / cover no-repeat;
  filter: saturate(1.02) contrast(1.03) brightness(.92);
}

.home-view::after {
  background:
    linear-gradient(180deg, rgba(9, 37, 49, .38) 0%, rgba(16, 73, 73, .10) 28%, rgba(9, 44, 50, .14) 66%, rgba(5, 27, 31, .56) 100%),
    linear-gradient(90deg, rgba(8, 35, 43, .24), transparent 21%, transparent 79%, rgba(8, 35, 43, .24));
  opacity: 1;
}

.home-view .battlefield-shell {
  --battlefield-grid-size: var(--home-battlefield-layout-size);
  position: relative;
  z-index: 2;
  display: grid;
  width: min(100%, var(--battlefield-grid-size));
  align-self: start;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-view .battlefield-power {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 231, 159, .42);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  padding: 0 50px 0 12px;
  color: rgba(255, 248, 220, .84);
  background: linear-gradient(90deg, rgba(8, 33, 43, .88), rgba(15, 73, 72, .72));
  box-shadow: inset 0 1px 0 rgba(255, 247, 213, .18), 0 5px 16px rgba(5, 28, 35, .22);
  backdrop-filter: blur(8px);
}

.home-view .battlefield-player-name {
  max-width: 38%;
  overflow: hidden;
  color: #fff4ca;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-view .battlefield-player-server {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid rgba(255, 232, 176, .34);
  padding-left: 8px;
  color: rgba(226, 251, 238, .9);
  font-family: var(--number-font);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-view .battlefield-power-value {
  margin-left: auto;
  color: rgba(255, 244, 205, .76);
  font-size: 10px;
}

.home-view .battlefield-power-value strong {
  color: #ffd46b;
  font-size: 17px;
  text-shadow: 0 0 10px rgba(255, 205, 85, .44);
}

.home-view .battlefield-header {
  min-height: 44px;
  border: 1px solid rgba(233, 189, 90, .48);
  border-bottom: 0;
  padding: 3px 10px;
  background: linear-gradient(90deg, rgba(7, 44, 50, .84), rgba(26, 86, 79, .72), rgba(7, 44, 50, .84));
  box-shadow: inset 0 1px 0 rgba(255, 243, 191, .15);
  backdrop-filter: blur(8px);
}

.home-view .battlefield-picker {
  min-height: 34px;
  border-color: rgba(255, 215, 113, .6);
  border-radius: 3px;
  color: #fff3c7;
  background: rgba(5, 34, 40, .56);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 196, .12), 0 0 14px rgba(242, 180, 69, .14);
}

.home-view .battlefield-picker::before { border-color: rgba(255, 231, 164, .19); }
.home-view .battlefield-picker strong { color: #fff0bd; font-size: 15px; }
.home-view .battlefield-picker i::before,
.home-view .battlefield-picker i::after { background: #f7c75e; }
.home-view .battlefield-income-button,
.home-view .battlefield-info-button {
  color: rgba(237, 251, 231, .88);
  font-size: 11px;
  text-decoration-color: rgba(236, 251, 231, .38);
}
.home-view .battlefield-income-button:hover,
.home-view .battlefield-info-button:hover,
.home-view .battlefield-income-button:focus-visible,
.home-view .battlefield-info-button:focus-visible { color: #ffdc73; }

.home-view .combat-panel.battlefield-panel {
  display: grid;
  width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0 0 5px 5px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.home-view .battlefield-panel::before {
  display: none;
}

.home-view .battlefield-grid { padding-top: 9px; }
.home-view .battlefield-cell {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.home-view .battlefield-cell:nth-child(3n),
.home-view .battlefield-cell:nth-child(4n) { background: transparent; }
.home-view .battlefield-cell.is-player-zone {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.home-view .battlefield-cell.is-enemy-zone {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.home-view .battlefield-fury {
  min-height: 31px;
  border-top-color: rgba(255, 221, 127, .36);
  padding: 5px 10px 6px;
  color: #ffedbd;
  background: rgba(4, 37, 42, .68);
}
.home-view .battlefield-fury-track { border-color: rgba(255, 210, 91, .48); background: rgba(255, 220, 121, .12); }
.home-view .battlefield-fury-track i { background: linear-gradient(90deg, #f08e3e, #ffe070); box-shadow: 0 0 10px rgba(255, 196, 73, .62); }
.home-view .battlefield-fury strong { color: #ffd36b; }

.home-view .home-quick-nav { position: static; }
.home-view .home-side-gift,
.home-view .home-side-ranking,
.home-view .home-side-settings {
  position: fixed;
  z-index: 15;
  right: 9px;
  left: auto;
  display: grid;
  width: 42px;
  min-height: 50px;
  grid-template-rows: 31px auto;
  place-items: center;
  border: 0;
  border-radius: 0;
  padding: 3px 0;
  color: #fff8e3;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  text-shadow: -1px -1px 0 rgba(67, 34, 25, .78), 1px -1px 0 rgba(67, 34, 25, .78), -1px 1px 0 rgba(67, 34, 25, .78), 1px 1px 0 rgba(67, 34, 25, .78), 0 3px 6px rgba(54, 28, 22, .48);
  -webkit-tap-highlight-color: transparent;
}
.home-view .home-side-gift { top: calc(120px + var(--safe-top)); }
.home-view .home-side-ranking { top: calc(184px + var(--safe-top)); }
.home-view .home-side-settings { top: calc(248px + var(--safe-top)); }
.home-view .home-side-gift img,
.home-view .home-side-ranking img { width: 31px; height: 31px; filter: drop-shadow(0 2px 2px rgba(59, 29, 22, .58)); }
.home-view .home-side-gift span,
.home-view .home-side-ranking span,
.home-view .home-side-settings > span:last-child { color: currentColor; font-family: "Noto Serif CJK SC", "Songti SC", serif; font-size: 11px; font-weight: 900; line-height: 1; }
.home-view .home-side-settings-icon { color: #ffe4a2; font-size: 27px; font-style: normal; line-height: 1; text-shadow: 0 2px 4px rgba(67, 34, 25, .66); }
.home-view .home-side-gift:hover,
.home-view .home-side-ranking:hover,
.home-view .home-side-settings:hover,
.home-view .home-side-gift:focus-visible,
.home-view .home-side-ranking:focus-visible,
.home-view .home-side-settings:focus-visible { color: #ce4e3f; transform: translateY(-1px); }
.home-view .home-side-settings:focus-visible { outline: 2px solid rgba(255, 231, 163, .9); outline-offset: 2px; }

.home-view .home-recommended-goal {
  position: fixed;
  z-index: 9;
  right: 12px;
  bottom: calc(83px + var(--safe-bottom));
  left: 12px;
  display: grid;
  width: auto;
  min-height: 36px;
  gap: 8px;
  border: 1px solid rgba(198, 75, 62, .44);
  border-left: 3px solid #d95849;
  border-radius: 4px;
  padding: 4px 9px;
  color: #712b26;
  background: rgba(255, 250, 239, .88);
  box-shadow: 0 5px 14px rgba(125, 49, 40, .13), inset 0 1px 0 rgba(255, 255, 252, .9);
  backdrop-filter: blur(9px);
}
.home-view .home-recommended-goal-copy > span { color: #c64d41; }
.home-view .home-recommended-goal-copy strong { color: #742a25; font-size: 13px; }
.home-view .home-recommended-goal button {
  min-height: 27px;
  border-color: #bd4a3e;
  border-radius: 2px;
  padding: 0 8px;
  color: #fff7df;
  background: linear-gradient(180deg, #d75f4d, #b63d34);
  font-size: 10px;
}

.home-view .home-module-dock {
  position: fixed;
  z-index: 14;
  bottom: calc(8px + var(--safe-bottom));
  width: min(680px, calc(100vw - 20px));
  padding: 3px 4px 4px;
  border: 1px solid rgba(202, 86, 70, .48);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 253, 246, .95), rgba(255, 242, 221, .94));
  box-shadow: 0 5px 16px rgba(124, 48, 39, .16), inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
}
.home-view .home-module-nav { min-height: 56px; gap: 0; }
.home-view .home-module-button {
  display: grid;
  min-height: 56px;
  grid-template-rows: 31px auto;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border: 0;
  border-radius: 3px;
  padding: 3px 2px;
  color: #8d3730;
  background: transparent;
  box-shadow: none;
}
.home-view .home-module-button::after { display: none; }
.home-view .home-module-icon {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
}
.home-view .home-module-icon img {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(95, 44, 34, .3));
}
.home-view .home-module-label {
  color: currentColor;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}
.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible { color: #b84337; background: rgba(214, 87, 67, .08); }
.home-view .home-module-button.is-current {
  color: #b43e34;
  background: transparent;
  box-shadow: none;
}
.home-view .home-module-button.is-current::before {
  position: absolute;
  right: 16%;
  bottom: 1px;
  left: 16%;
  height: 2px;
  border-radius: 2px;
  content: "";
  background: #c54b3e;
  box-shadow: 0 0 7px rgba(210, 72, 56, .38);
  animation: home-current-pulse 2.1s ease-in-out infinite;
}

@keyframes home-current-pulse {
  0%, 100% { opacity: .58; transform: scaleX(.82); }
  50% { opacity: 1; transform: scaleX(1); }
}

@media (min-width: 700px) {
  .home-view { --home-battlefield-layout-size: min(calc(100vw - 80px), calc(100dvh - 226px), 580px); padding-right: 40px; padding-left: 40px; }
  .home-view .home-recommended-goal { right: max(40px, calc((100vw - 680px) / 2)); left: max(40px, calc((100vw - 680px) / 2)); }
}

@media (max-width: 520px) {
  .home-view { --home-battlefield-layout-size: min(calc(100vw - 68px), calc(100dvh - 218px), 500px); }
  .home-view .battlefield-player-name { max-width: 34%; font-size: 13px; }
  .home-view .battlefield-player-server { max-width: 25%; padding-left: 6px; }
  .home-view .battlefield-power { gap: 6px; padding: 0 47px 0 9px; }
  .home-view .battlefield-power-value { font-size: 9px; }
  .home-view .battlefield-power-value strong { font-size: 15px; }
  .home-view .battlefield-grid { --battlefield-grid-gap: 4px; padding: 6px 8px 8px; }
  .home-view .home-side-gift,
  .home-view .home-side-ranking,
  .home-view .home-side-settings { right: 6px; width: 40px; min-height: 52px; grid-template-rows: 30px auto; }
  .home-view .home-side-gift img,
  .home-view .home-side-ranking img { width: 29px; height: 29px; }
  .home-view .home-side-gift { top: calc(116px + var(--safe-top)); }
  .home-view .home-side-ranking { top: calc(176px + var(--safe-top)); }
  .home-view .home-side-settings { top: calc(236px + var(--safe-top)); }
}

@media (max-height: 700px) {
  .home-view { --home-battlefield-layout-size: min(calc(100vw - 68px), calc(100dvh - 200px), 390px); overflow-y: auto; }
  .home-view .home-module-dock { position: fixed; margin-top: 0; }
  .home-view .home-recommended-goal { bottom: calc(78px + var(--safe-bottom)); }
  .home-view .home-module-nav,
  .home-view .home-module-button { min-height: 54px; }
}

@media (max-width: 520px) and (orientation: portrait) {
  .home-view::before { background-image: url("/images/backgrounds/chaoge-war-hud-mobile.png?v=20260916-01"); }
}

/* 顶部 HUD 作为全宽界面层，战斗阵型仍维持居中尺寸。 */
.home-view {
  padding-top: 0;
}

.home-view .battlefield-power,
.home-view .battlefield-header {
  width: 100vw;
  box-sizing: border-box;
}

.home-view .battlefield-power {
  display: none;
}

.home-view .battlefield-header {
  position: fixed;
  z-index: 12;
  top: 0;
  right: 0;
  left: 0;
  width: 100vw;
  margin-left: 0;
  transform: none;
  min-height: 0;
  height: 50px;
}

.home-view .battlefield-shell {
  padding-top: 92px;
}

.home-view .battlefield-shell > .battlefield-fury {
  position: absolute;
  z-index: 11;
  top: 52px;
  right: 0;
  left: 0;
  display: grid;
  width: 100%;
  min-height: 5px;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  border: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
}

.home-view .battlefield-shell > .battlefield-fury > span,
.home-view .battlefield-shell > .battlefield-fury > strong {
  display: none;
}

.home-view .battlefield-shell > .battlefield-fury .battlefield-fury-track {
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(4, 42, 46, .42);
  box-shadow: none;
}

.home-view .battlefield-shell > .battlefield-fury .battlefield-fury-track i {
  border-radius: inherit;
}

@media (max-width: 520px) {
  .battlefield-income-feed { right: 4px; bottom: 4px; left: 4px; min-height: 64px; }
  .battlefield-income-recent { right: auto; bottom: 51px; gap: 5px; font-size: 7px; }
  .battlefield-income-track { gap: 2px; padding: 9px 2px 0; }
  .battlefield-income-track::before { right: 5%; left: 5%; }
  .battlefield-income-primary { gap: 2px; }
  .battlefield-income-primary img { width: 16px; height: 16px; }
  .battlefield-income-primary-copy { gap: 2px; }
  .battlefield-income-label { font-size: 7px; }
  .battlefield-income-value { font-size: 12px; }
  .battlefield-income-secondary { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .battlefield-income-float,
  .battlefield-income-spark,
  .battlefield-income-group.is-vermilion .battlefield-income-value,
  .battlefield-income-group.is-high-value::after { animation-duration: .01ms; animation-iteration-count: 1; }
  .battlefield-damage-float {
    animation: none !important;
    opacity: 1;
    transform: translate(-50%, -8px) scale(1);
  }
}

/* 首页底部战斗 HUD：信息贴近场景，功能入口保持悬浮感。 */
.home-view .battlefield-income-feed::before {
  position: absolute;
  right: 9%;
  bottom: 1px;
  left: 9%;
  height: 52px;
  background: linear-gradient(180deg, transparent, rgba(30, 25, 24, .18));
  content: "";
  pointer-events: none;
}

.home-view .battlefield-income-track {
  z-index: 1;
}

.home-view .battlefield-income-group {
  text-shadow: 0 1px 2px rgba(23, 18, 17, .98), 0 0 5px rgba(23, 18, 17, .75);
}

.home-view .battlefield-income-label {
  color: rgba(255, 246, 221, .84);
  text-shadow: 0 1px 2px rgba(23, 18, 17, .96);
}

.home-view .battlefield-income-value {
  color: #ffe4a0;
  -webkit-text-stroke: .15px rgba(67, 24, 18, .8);
  text-shadow: 0 1px 2px rgba(53, 20, 15, .98), 0 0 7px rgba(231, 174, 83, .22);
}

.home-view .battlefield-income-group.is-vermilion .battlefield-income-value {
  color: #ffb08d;
  text-shadow: 0 1px 2px rgba(66, 18, 14, .98), 0 0 8px rgba(183, 70, 56, .46);
}

.home-view .battlefield-income-secondary {
  color: rgba(255, 242, 212, .7);
  text-shadow: 0 1px 2px rgba(23, 18, 17, .96);
}

.home-view .battlefield-income-secondary strong {
  color: rgba(255, 226, 169, .84);
}

.home-view .battlefield-income-recent {
  color: rgba(255, 241, 208, .7);
  text-shadow: 0 1px 3px rgba(21, 16, 15, .92);
}

.home-view .battlefield-income-recent-label {
  color: #f1bd6b;
}

.home-view .home-recommended-goal {
  right: max(14px, calc((100vw - 620px) / 2));
  bottom: calc(91px + var(--safe-bottom));
  left: max(14px, calc((100vw - 620px) / 2));
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 14px;
  border: 0;
  border-top: 1px solid rgba(231, 174, 83, .54);
  border-bottom: 1px solid rgba(183, 70, 56, .62);
  border-left: 2px solid #cf5a43;
  border-radius: 0 3px 3px 0;
  padding: 3px 8px 3px 11px;
  color: #fff1cf;
  background: linear-gradient(90deg, rgba(51, 27, 25, .84), rgba(56, 31, 27, .62) 72%, rgba(48, 26, 24, .8));
  box-shadow: 0 4px 12px rgba(18, 15, 14, .22), inset 0 1px 0 rgba(255, 232, 182, .08);
  backdrop-filter: blur(8px);
}

.home-view .home-recommended-goal::before {
  width: 5px;
  height: 5px;
  border: 1px solid #ffe1a0;
  border-radius: 50%;
  background: #c44e3c;
  box-shadow: 0 0 8px rgba(231, 174, 83, .68);
  content: "";
  flex: 0 0 auto;
}

.home-view .home-recommended-goal-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.home-view .home-recommended-goal-copy > span {
  color: #e7ae53;
  font-family: var(--number-font);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}

.home-view .home-recommended-goal-copy strong {
  overflow: hidden;
  color: #fff2d2;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-view .home-recommended-goal button {
  min-width: 72px;
  min-height: 27px;
  margin-left: auto;
  border: 1px solid rgba(255, 218, 148, .46);
  border-radius: 2px;
  padding: 0 10px;
  color: #fff4d8;
  background: linear-gradient(180deg, #ce5a45, #9e332e);
  box-shadow: 0 2px 6px rgba(60, 17, 13, .3), inset 0 1px 0 rgba(255, 237, 193, .22);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.home-view .home-module-dock {
  right: 0;
  bottom: calc(7px + var(--safe-bottom));
  left: 0;
  width: min(680px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 0 8px 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.home-view .home-module-dock::before {
  position: absolute;
  right: 4%;
  bottom: 0;
  left: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 174, 83, .58) 12%, rgba(255, 224, 157, .8) 50%, rgba(183, 70, 56, .58) 88%, transparent);
  box-shadow: 0 0 7px rgba(231, 174, 83, .28);
  content: "";
}

.home-view .home-module-nav {
  position: relative;
  display: grid;
  min-height: 70px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
  padding: 0 4px;
}

.home-view .home-module-button {
  position: relative;
  display: grid;
  min-height: 66px;
  grid-template-rows: 42px auto;
  align-content: end;
  justify-items: center;
  gap: 3px;
  border: 0;
  border-radius: 4px 4px 0 0;
  padding: 2px 2px 7px;
  color: rgba(255, 242, 215, .84);
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 3px rgba(30, 16, 14, .94);
  transition: color .18s ease, transform .18s ease;
}

.home-view .home-module-button::after {
  position: absolute;
  right: 18%;
  bottom: 0;
  left: 18%;
  height: 1px;
  background: rgba(255, 243, 210, .22);
  content: "";
  opacity: .8;
}

.home-view .home-module-icon {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 226, 158, .34);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(76, 48, 37, .62), rgba(26, 23, 24, .74));
  box-shadow: 0 3px 8px rgba(20, 15, 15, .32), inset 0 1px 0 rgba(255, 237, 189, .16);
  transform: translateY(0);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.home-view .home-module-icon::before {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 238, 188, .16);
  border-radius: inherit;
  content: "";
}

.home-view .home-module-icon img {
  position: relative;
  z-index: 1;
  width: 31px;
  height: 31px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(27, 14, 12, .54));
}

.home-view .home-module-label {
  color: currentColor;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible {
  color: #ffe1a0;
  background: transparent;
  transform: translateY(-2px);
}

.home-view .home-module-button:hover .home-module-icon,
.home-view .home-module-button:focus-visible .home-module-icon {
  border-color: rgba(255, 221, 133, .75);
  box-shadow: 0 4px 12px rgba(20, 15, 15, .42), 0 0 10px rgba(231, 174, 83, .2), inset 0 1px 0 rgba(255, 237, 189, .2);
  transform: translateY(-1px);
}

.home-view .home-module-button.is-current {
  color: #ffe3a1;
  background: linear-gradient(180deg, rgba(172, 61, 47, .2), transparent 75%);
}

.home-view .home-module-button.is-current .home-module-icon {
  border-color: #e7ae53;
  background: radial-gradient(circle at 50% 38%, rgba(152, 55, 42, .82), rgba(50, 25, 25, .86));
  box-shadow: 0 4px 13px rgba(31, 16, 14, .46), 0 0 14px rgba(183, 70, 56, .35), inset 0 1px 0 rgba(255, 241, 190, .32);
  transform: translateY(-5px);
}

.home-view .home-module-button.is-current::before {
  right: 27%;
  bottom: -3px;
  left: 27%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #e7ae53 25%, #d35440 50%, #e7ae53 75%, transparent);
  box-shadow: 0 0 8px rgba(231, 174, 83, .58);
  content: "";
  animation: home-current-pulse 2.1s ease-in-out infinite;
}

@media (max-width: 520px) {
  .home-view .home-recommended-goal {
    right: 10px;
    bottom: calc(81px + var(--safe-bottom));
    left: 10px;
  }
  .home-view .home-module-dock { width: calc(100vw - 14px); padding-right: 3px; padding-left: 3px; }
  .home-view .home-module-nav { min-height: 62px; padding: 0 1px; }
  .home-view .home-module-button { min-height: 59px; grid-template-rows: 36px auto; padding-bottom: 6px; }
  .home-view .home-module-icon { width: 33px; height: 33px; }
  .home-view .home-module-icon img { width: 27px; height: 27px; }
  .home-view .home-module-label { font-size: 10px; }
  .home-view .home-module-button.is-current .home-module-icon { transform: translateY(-4px); }
}

/* 首页战斗 HUD 收束版：收益是战果徽记，底部是悬浮快捷栏。 */
.home-view .battlefield-income-feed {
  right: clamp(8px, 3vw, 28px);
  bottom: 10px;
  left: clamp(8px, 3vw, 28px);
  height: 78px;
  min-height: 0;
}

.home-view .battlefield-income-feed::before {
  right: 3%;
  bottom: 1px;
  left: 3%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 70, 56, .38) 18%, rgba(231, 174, 83, .86) 50%, rgba(183, 70, 56, .38) 82%, transparent);
  box-shadow: 0 0 9px rgba(231, 174, 83, .38);
}

.home-view .battlefield-income-feed::after {
  position: absolute;
  top: -17px;
  left: 50%;
  padding: 0 8px;
  color: rgba(255, 222, 154, .82);
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 14px;
  text-shadow: 0 1px 3px rgba(25, 13, 12, .95), 0 0 7px rgba(231, 174, 83, .22);
  background: linear-gradient(90deg, transparent, rgba(35, 21, 20, .46) 18%, rgba(35, 21, 20, .58) 82%, transparent);
  content: "战果";
  transform: translateX(-50%);
  white-space: nowrap;
}

.home-view .battlefield-income-recent {
  top: -17px;
  right: 0;
  bottom: auto;
  left: auto;
  width: min(52%, 270px);
  max-width: 52%;
  justify-content: flex-end;
  gap: 5px;
  padding: 0 4px;
  color: rgba(255, 241, 208, .66);
  font-size: 7px;
  opacity: .78;
  text-shadow: 0 1px 3px rgba(21, 16, 15, .95);
}

.home-view .battlefield-income-recent-label {
  color: rgba(231, 174, 83, .72);
  font-size: 8px;
}

.home-view .battlefield-income-track {
  right: 0;
  bottom: 0;
  left: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 11px 0 4px;
}

.home-view .battlefield-income-track::before {
  top: 4px;
  right: 5%;
  left: 5%;
  background: linear-gradient(90deg, transparent, rgba(255, 218, 137, .28) 18%, rgba(255, 218, 137, .7) 50%, rgba(255, 218, 137, .28) 82%, transparent);
}

.home-view .battlefield-income-group {
  display: grid;
  min-width: 0;
  grid-template-rows: 23px 16px auto;
  gap: 0;
  justify-items: center;
  padding: 4px 6px 2px;
  border-left: 1px solid rgba(255, 224, 157, .16);
  color: #fff3d5;
  text-align: center;
  text-shadow: 0 1px 2px rgba(23, 18, 17, .98), 0 0 5px rgba(23, 18, 17, .75);
  background: linear-gradient(180deg, rgba(36, 22, 21, .26), transparent 92%);
}

.home-view .battlefield-income-group:first-child { border-left: 0; }

.home-view .battlefield-income-group::before {
  top: 1px;
  width: 4px;
  height: 4px;
  border-color: rgba(255, 243, 213, .74);
  background: #e7ae53;
  box-shadow: 0 0 7px rgba(231, 174, 83, .72);
}

.home-view .battlefield-income-primary {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.home-view .battlefield-income-primary img {
  width: 19px;
  height: 19px;
  filter: drop-shadow(0 1px 3px rgba(36, 13, 10, .72));
}

.home-view .battlefield-income-primary-copy {
  display: grid;
  min-width: 0;
  grid-template-rows: 9px 16px;
  align-items: center;
  gap: 0;
  text-align: left;
}

.home-view .battlefield-income-label {
  color: rgba(255, 246, 221, .76);
  font-size: 8px;
  line-height: 9px;
}

.home-view .battlefield-income-value {
  color: #ffe4a0;
  font-size: 14px;
  line-height: 16px;
  -webkit-text-stroke: .15px rgba(67, 24, 18, .8);
  text-shadow: 0 1px 2px rgba(53, 20, 15, .98), 0 0 7px rgba(231, 174, 83, .22);
}

.home-view .battlefield-income-secondary {
  width: 100%;
  max-width: 100%;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  margin-left: 0;
  color: rgba(255, 242, 212, .62);
  font-size: 7px;
  line-height: 10px;
  text-align: center;
}

.home-view .battlefield-income-secondary strong { color: rgba(255, 226, 169, .82); }

.home-view .battlefield-income-group.is-vermilion .battlefield-income-value {
  color: #ffb08d;
  text-shadow: 0 1px 2px rgba(66, 18, 14, .98), 0 0 8px rgba(183, 70, 56, .46);
}

.home-view .home-recommended-goal {
  right: max(14px, calc((100vw - 620px) / 2));
  bottom: calc(91px + var(--safe-bottom));
  left: max(14px, calc((100vw - 620px) / 2));
  min-height: 34px;
  gap: 10px;
  border: 0;
  border-top: 1px solid rgba(231, 174, 83, .6);
  border-bottom: 1px solid rgba(183, 70, 56, .62);
  border-left: 2px solid #cf5a43;
  border-radius: 0 2px 2px 0;
  padding: 2px 7px 2px 10px;
  background: linear-gradient(90deg, rgba(44, 24, 23, .78), rgba(56, 29, 26, .46) 78%, transparent);
  box-shadow: 0 3px 9px rgba(18, 15, 14, .18), inset 0 1px 0 rgba(255, 232, 182, .08);
  backdrop-filter: blur(7px);
}

.home-view .home-recommended-goal-copy { gap: 7px; }
.home-view .home-recommended-goal-copy > span { font-size: 8px; letter-spacing: .12em; }
.home-view .home-recommended-goal-copy strong { color: #fff2d2; font-size: 12px; }
.home-view .home-recommended-goal button { min-width: 66px; min-height: 25px; padding: 0 8px; font-size: 9px; }

.home-view .home-module-dock {
  right: auto;
  bottom: calc(5px + var(--safe-bottom));
  left: 50%;
  width: min(660px, calc(100vw - 18px));
  transform: translateX(-50%);
  padding: 0 5px 3px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent, rgba(16, 20, 22, .22));
  box-shadow: none;
  backdrop-filter: none;
}

.home-view .home-module-dock::before {
  right: 3%;
  bottom: 0;
  left: 3%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 174, 83, .42) 12%, rgba(255, 224, 157, .78) 50%, rgba(183, 70, 56, .42) 88%, transparent);
  box-shadow: 0 0 8px rgba(231, 174, 83, .22);
}

.home-view .home-module-nav {
  min-height: 68px;
  gap: 5px;
  padding: 0 3px;
}

.home-view .home-module-button {
  min-height: 64px;
  grid-template-rows: 42px auto;
  gap: 2px;
  border: 0;
  border-radius: 4px 4px 0 0;
  padding: 2px 2px 6px;
  color: rgba(255, 242, 215, .82);
  background: transparent;
  text-shadow: 0 1px 3px rgba(30, 16, 14, .94);
}

.home-view .home-module-button::after { display: none; }

.home-view .home-module-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 226, 158, .34);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(76, 48, 37, .62), rgba(26, 23, 24, .74));
  box-shadow: 0 3px 8px rgba(20, 15, 15, .32), inset 0 1px 0 rgba(255, 237, 189, .16);
}

.home-view .home-module-icon::before { inset: 3px; border-color: rgba(255, 238, 188, .16); }
.home-view .home-module-icon img { width: 32px; height: 32px; }
.home-view .home-module-label { font-size: 11px; }

.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible {
  color: #ffe1a0;
  background: linear-gradient(180deg, rgba(172, 61, 47, .12), transparent 78%);
  transform: translateY(-2px);
}

.home-view .home-module-button.is-current {
  color: #ffe3a1;
  background: linear-gradient(180deg, rgba(172, 61, 47, .22), transparent 78%);
}

.home-view .home-module-button.is-current .home-module-icon {
  border-color: #e7ae53;
  background: radial-gradient(circle at 50% 38%, rgba(152, 55, 42, .82), rgba(50, 25, 25, .86));
  box-shadow: 0 4px 13px rgba(31, 16, 14, .46), 0 0 14px rgba(183, 70, 56, .35), inset 0 1px 0 rgba(255, 241, 190, .32);
  transform: translateY(-4px);
}

.home-view .home-module-button.is-current::before {
  right: 25%;
  bottom: -3px;
  left: 25%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #e7ae53 25%, #d35440 50%, #e7ae53 75%, transparent);
  box-shadow: 0 0 8px rgba(231, 174, 83, .58);
  content: "";
  animation: home-current-pulse 2.1s ease-in-out infinite;
}

@media (max-width: 520px) {
  .home-view .battlefield-income-feed {
    right: 5px;
    bottom: 7px;
    left: 5px;
    height: 73px;
  }
  .home-view .battlefield-income-feed::after { top: -16px; font-size: 8px; }
  .home-view .battlefield-income-recent { top: -16px; width: 48%; max-width: 48%; gap: 3px; font-size: 6px; }
  .home-view .battlefield-income-track { padding-top: 10px; }
  .home-view .battlefield-income-group { grid-template-rows: 21px 15px auto; padding-right: 3px; padding-left: 3px; }
  .home-view .battlefield-income-primary { grid-template-columns: 17px minmax(0, 1fr); gap: 3px; }
  .home-view .battlefield-income-primary img { width: 17px; height: 17px; }
  .home-view .battlefield-income-primary-copy { grid-template-rows: 8px 15px; }
  .home-view .battlefield-income-label { font-size: 7px; line-height: 8px; }
  .home-view .battlefield-income-value { font-size: 12px; line-height: 15px; }
  .home-view .battlefield-income-secondary { font-size: 6px; line-height: 9px; }
  .home-view .home-recommended-goal { right: 10px; bottom: calc(83px + var(--safe-bottom)); left: 10px; }
  .home-view .home-module-dock { width: calc(100vw - 12px); padding-right: 2px; padding-left: 2px; }
  .home-view .home-module-nav { min-height: 62px; gap: 2px; padding: 0 1px; }
  .home-view .home-module-button { min-height: 58px; grid-template-rows: 36px auto; padding-bottom: 5px; }
  .home-view .home-module-icon { width: 34px; height: 34px; }
  .home-view .home-module-icon img { width: 27px; height: 27px; }
  .home-view .home-module-button.is-current .home-module-icon { transform: translateY(-3px); }
  .home-view .home-module-label { font-size: 10px; }
}

/* 战果层级优化：每个资源徽记固定为图标、主收益、次收益三段。 */
.home-view .battlefield-income-feed {
  bottom: 12px;
  height: 76px;
}

.home-view .battlefield-income-feed::after {
  display: none;
}

.home-view .battlefield-income-recent {
  display: none;
}

.home-view .battlefield-income-recent-item { display: none; }
.home-view .battlefield-income-recent-label { font-size: 9px; }

.home-view .battlefield-income-track {
  gap: 0;
  padding: 8px 0 5px;
}

.home-view .battlefield-income-group {
  display: grid;
  min-width: 0;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 5px 8px 3px;
  border-left-color: rgba(255, 224, 157, .24);
  text-align: center;
  background: none;
}

.home-view .battlefield-income-group::before,
.home-view .battlefield-income-group.is-high-value::after,
.home-view .battlefield-income-spark { display: none; }

.home-view .battlefield-income-primary {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
}

.home-view .battlefield-income-primary-copy {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
}

.home-view .battlefield-income-label {
  color: #2b241f;
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 247, 226, .82), 0 0 2px rgba(255, 247, 226, .56);
}

.home-view .battlefield-income-value {
  color: #8f382d;
  font-size: 13px;
  font-weight: 900;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 247, 226, .86), 0 0 2px rgba(255, 247, 226, .58);
}

.home-view .battlefield-income-group.is-gold .battlefield-income-value {
  color: #795018;
}

.home-view .battlefield-income-secondary {
  width: 100%;
  max-width: 100%;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding-top: 3px;
  border-top: 1px solid rgba(255, 224, 157, .28);
  color: #4b4036;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 247, 226, .78), 0 0 2px rgba(255, 247, 226, .5);
}

.home-view .battlefield-income-secondary b {
  color: #4b4036;
  font-weight: 800;
}

.home-view .battlefield-income-secondary strong {
  color: #6c541d;
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.home-view .battlefield-income-group.is-vermilion .battlefield-income-secondary strong {
  color: #8f382d;
}

/* 以轻透底色稳定文字对比，同时保留战场画面的可见度。 */
.home-view .battlefield-income-track {
  overflow: hidden;
  border: 1px solid rgba(231, 174, 83, .38);
  border-radius: 5px;
  padding: 8px 5px 5px;
  background: rgba(16, 39, 34, .58);
  box-shadow: 0 3px 10px rgba(9, 20, 18, .24), inset 0 1px 0 rgba(255, 239, 196, .08);
}

.home-view .battlefield-income-label,
.home-view .battlefield-income-secondary,
.home-view .battlefield-income-secondary b {
  color: #f4ead1;
  text-shadow: 0 1px 2px #07130f;
}

.home-view .battlefield-income-value,
.home-view .battlefield-income-group.is-gold .battlefield-income-value,
.home-view .battlefield-income-secondary strong {
  color: #f2c56e;
  text-shadow: 0 1px 2px #07130f;
}

.home-view .battlefield-income-group.is-vermilion .battlefield-income-value,
.home-view .battlefield-income-group.is-vermilion .battlefield-income-secondary strong {
  color: #ff9d82;
}

.battlefield-star-map-income {
  position: absolute;
  z-index: 15;
  right: clamp(12px, 5vw, 52px);
  bottom: 92px;
  left: clamp(12px, 5vw, 52px);
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.8vw, 16px);
  border: 1px solid rgba(231, 174, 83, .42);
  border-radius: 4px;
  padding: 5px 10px;
  color: #f5ead0;
  background: rgba(15, 38, 33, .88);
  box-shadow: 0 3px 10px rgba(7, 19, 16, .34);
  font-family: var(--number-font);
  font-size: 11px;
  line-height: 16px;
  pointer-events: none;
  white-space: nowrap;
}

.battlefield-star-map-income[hidden] { display: none; }
.battlefield-star-map-income b { color: #f0c36b; font-family: "Noto Serif CJK SC", "Songti SC", serif; }
.battlefield-star-map-income.is-gain { border-color: rgba(255, 207, 105, .8); color: #fff1bd; animation: battlefield-income-rare-flash 1.2s ease-out both; }

.battlefield-star-map-row { border-left-color: #b88740; }
.battlefield-star-map-rule { margin: 0 2px; color: #647c74; font-size: 10px; line-height: 1.45; }

@media (max-width: 520px) {
  .home-view .battlefield-income-feed {
    bottom: 8px;
    height: 70px;
  }
  .home-view .battlefield-income-track { padding-top: 8px; }
  .home-view .battlefield-income-group { gap: 2px; padding: 4px 2px 2px; }
  .home-view .battlefield-income-primary,
  .home-view .battlefield-income-primary-copy { gap: 2px; }
  .home-view .battlefield-income-label,
  .home-view .battlefield-income-value,
  .home-view .battlefield-income-secondary,
  .home-view .battlefield-income-secondary strong { font-size: 11px; line-height: 15px; }
  .home-view .battlefield-income-secondary {
    gap: 2px;
    padding-top: 2px;
  }
  .battlefield-star-map-income {
    right: 6px;
    bottom: 82px;
    left: 6px;
    flex-wrap: wrap;
    row-gap: 2px;
    gap: 5px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 9px;
    white-space: normal;
  }
  .battlefield-star-map-income b {
    flex: 0 0 100%;
    text-align: center;
  }
  .battlefield-star-map-income span {
    flex: 1 1 calc(20% - 5px);
    text-align: center;
    white-space: nowrap;
  }
  .battlefield-income-dialog { width: min(520px, calc(100vw - 16px)); }
  .battlefield-income-list { gap: 9px; padding: 9px; }
  .battlefield-income-section { gap: 5px; padding-top: 8px; }
  .battlefield-income-grid { gap: 5px; }
  .battlefield-income-row { min-height: 36px; gap: 5px; padding: 0 7px; }
  .battlefield-income-row span,
  .battlefield-income-row strong { font-size: 11px; }
}

/* 下一目标收窄为居中任务条，避免横向铺满战场。 */
.home-view .home-recommended-goal {
  right: auto;
  left: 50%;
  width: min(50%, 520px);
  min-width: min(330px, calc(100% - 20px));
  transform: translateX(-50%);
}

/* 底部菜单强化识别：图标与名称作为同一组视觉焦点。 */
.home-view .home-module-nav { min-height: 84px; }

.home-view .home-module-button {
  min-height: 80px;
  grid-template-rows: 58px auto;
}

.home-view .home-module-icon {
  width: 55px;
  height: 55px;
}

.home-view .home-module-icon img {
  width: 47px;
  height: 47px;
}

.home-view .home-module-label {
  font-size: 14px;
  font-weight: 900;
}

/* 首页主功能改为五点指挥阵：不再使用整块底栏，由中央帝皇入口统领两侧功能。 */
.home-view .home-module-dock {
  bottom: calc(4px + var(--safe-bottom));
  width: min(720px, calc(100vw - 12px));
  padding: 0;
  background: none;
}

.home-view .home-module-dock::before {
  right: 8%;
  left: 8%;
  bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(187, 68, 51, .45) 14%, rgba(240, 190, 95, .92) 50%, rgba(187, 68, 51, .45) 86%, transparent);
  box-shadow: 0 0 9px rgba(233, 173, 77, .42);
}

.home-view .home-module-nav {
  min-height: 104px;
  align-items: end;
  gap: 0;
  padding: 0;
}

.home-view .home-module-button {
  min-height: 80px;
  grid-template-rows: 52px 20px;
  align-content: end;
  gap: 5px;
  border-radius: 0;
  padding: 0 1px 6px;
  color: #fff6dc;
  background: transparent;
  text-shadow: 0 2px 3px rgba(63, 23, 17, .9), 0 0 7px rgba(79, 28, 19, .54);
  transition: color .16s ease, transform .16s ease, filter .16s ease;
}

.home-view .home-module-button:nth-child(2),
.home-view .home-module-button:nth-child(4) {
  transform: translateY(-8px);
}

.home-view .home-module-button--core {
  min-height: 100px;
  grid-template-rows: 64px 20px;
  gap: 5px;
  padding-bottom: 8px;
  transform: translateY(-18px);
  color: #fff0bd;
}

.home-view .home-module-icon {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 227, 151, .84);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(126, 46, 37, .9), rgba(67, 27, 27, .86));
  box-shadow: 0 3px 8px rgba(55, 18, 13, .52), inset 0 1px 0 rgba(255, 247, 207, .43);
}

.home-view .home-module-icon::before {
  inset: 3px;
  border-color: rgba(255, 241, 193, .36);
  border-radius: 4px;
}

.home-view .home-module-icon img {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 2px 2px rgba(42, 12, 8, .62));
}

.home-view .home-module-button--core .home-module-icon {
  width: 60px;
  height: 60px;
  border-color: #ffe49d;
  background: radial-gradient(circle at 50% 27%, rgba(225, 100, 63, .96), rgba(117, 38, 31, .95) 68%, rgba(57, 22, 24, .95));
  box-shadow: 0 5px 13px rgba(63, 18, 12, .58), 0 0 13px rgba(224, 143, 60, .5), inset 0 1px 0 rgba(255, 249, 215, .58);
}

.home-view .home-module-button--core .home-module-icon img {
  width: 49px;
  height: 49px;
}

.home-view .home-module-label {
  overflow: visible;
  font-size: 15px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible {
  color: #fff7da;
  background: transparent;
  filter: brightness(1.14);
}

.home-view .home-module-button:hover .home-module-icon,
.home-view .home-module-button:focus-visible .home-module-icon {
  border-color: #fff1bd;
  box-shadow: 0 4px 11px rgba(63, 18, 12, .64), 0 0 13px rgba(242, 179, 77, .52), inset 0 1px 0 rgba(255, 249, 215, .58);
}

.home-view .home-module-button.is-current {
  color: #fff0bd;
  background: transparent;
}

.home-view .home-module-button.is-current .home-module-icon {
  transform: none;
}

.home-view .home-module-button.is-current::before {
  right: 20%;
  bottom: 0;
  left: 20%;
  height: 2px;
}

@media (max-width: 520px) {
  .home-view .home-module-dock { width: calc(100vw - 4px); }
  .home-view .home-module-nav { min-height: 94px; }
  .home-view .home-module-button {
    min-height: 72px;
    grid-template-rows: 46px 18px;
    gap: 3px;
    padding-bottom: 5px;
  }
  .home-view .home-module-button:nth-child(2),
  .home-view .home-module-button:nth-child(4) { transform: translateY(-6px); }
  .home-view .home-module-button--core {
    min-height: 90px;
    grid-template-rows: 58px 18px;
    transform: translateY(-14px);
  }
  .home-view .home-module-icon { width: 42px; height: 42px; }
  .home-view .home-module-icon img { width: 33px; height: 33px; }
  .home-view .home-module-button--core .home-module-icon { width: 54px; height: 54px; }
  .home-view .home-module-button--core .home-module-icon img { width: 44px; height: 44px; }
  .home-view .home-module-label { font-size: 13px; line-height: 18px; }
}

@media (max-width: 520px) {
  .home-view .home-module-nav { min-height: 78px; }
  .home-view .home-module-button {
    min-height: 72px;
    grid-template-rows: 53px auto;
  }
  .home-view .home-module-icon {
    width: 49px;
    height: 49px;
  }
  .home-view .home-module-icon img {
    width: 42px;
    height: 42px;
  }
  .home-view .home-module-label { font-size: 13px; }
}

/* 保持五点指挥阵在手机端的安全点击尺寸，覆盖旧版横排菜单的收缩规则。 */
@media (max-width: 520px) {
  .home-view .home-module-dock { width: calc(100vw - 4px); padding: 0; }
  .home-view .home-module-nav { min-height: 94px; gap: 0; padding: 0; }
  .home-view .home-module-button {
    min-height: 72px;
    grid-template-rows: 46px 18px;
    gap: 3px;
    padding: 0 1px 5px;
  }
  .home-view .home-module-button:nth-child(2),
  .home-view .home-module-button:nth-child(4) { transform: translateY(-6px); }
  .home-view .home-module-button--core {
    min-height: 90px;
    grid-template-rows: 58px 18px;
    transform: translateY(-14px);
  }
  .home-view .home-module-icon { width: 42px; height: 42px; }
  .home-view .home-module-icon img { width: 33px; height: 33px; }
  .home-view .home-module-button--core .home-module-icon { width: 54px; height: 54px; }
  .home-view .home-module-button--core .home-module-icon img { width: 44px; height: 44px; }
  .home-view .home-module-label { font-size: 13px; line-height: 18px; }
}

/* 战场军令 HUD：图标脱离应用式方框，以军令签和阵线保持常驻识别。 */
.home-view .home-module-dock {
  bottom: calc(2px + var(--safe-bottom));
  width: min(700px, calc(100vw - 8px));
}

.home-view .home-module-dock::before {
  right: 7%;
  bottom: 10px;
  left: 7%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(194, 66, 47, .44) 10%, rgba(245, 198, 92, .94) 50%, rgba(194, 66, 47, .44) 90%, transparent);
  box-shadow: 0 0 8px rgba(239, 171, 64, .45);
}

.home-view .home-module-nav {
  min-height: 110px;
  align-items: end;
}

.home-view .home-module-button {
  min-height: 86px;
  grid-template-rows: 56px 24px;
  gap: 4px;
  padding: 0 1px 11px;
  color: #701f19;
  text-shadow: none;
}

.home-view .home-module-button:nth-child(2),
.home-view .home-module-button:nth-child(4) { transform: translateY(-7px); }

.home-view .home-module-button--core {
  min-height: 108px;
  grid-template-rows: 72px 24px;
  gap: 4px;
  padding-bottom: 11px;
  transform: translateY(-16px);
}

.home-view .home-module-icon,
.home-view .home-module-button--core .home-module-icon {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.home-view .home-module-icon::before { display: none; }

.home-view .home-module-icon img {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 3px 2px rgba(71, 27, 18, .42)) drop-shadow(0 0 6px rgba(255, 218, 124, .24));
}

.home-view .home-module-button--core .home-module-icon {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 0 12px rgba(235, 144, 42, .44));
}

.home-view .home-module-button--core .home-module-icon img {
  width: 72px;
  height: 72px;
}

.home-view .home-module-label {
  min-width: 66px;
  padding: 3px 6px 4px;
  color: #7a221c;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 17px;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #fff0c4, #e7b56b);
  box-shadow: 0 1px 0 rgba(255, 255, 232, .72), 0 2px 4px rgba(91, 33, 21, .26);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
}

.home-view .home-module-button--core .home-module-label {
  color: #fff4cc;
  background: linear-gradient(180deg, #c94e3b, #8e2a22);
  box-shadow: 0 1px 0 rgba(255, 223, 148, .5), 0 2px 5px rgba(89, 26, 18, .38);
}

.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible,
.home-view .home-module-button.is-current {
  color: #7a221c;
  background: transparent;
  filter: brightness(1.08);
}

.home-view .home-module-button:hover .home-module-icon,
.home-view .home-module-button:focus-visible .home-module-icon {
  border: 0;
  box-shadow: none;
  transform: translateY(-2px);
}

.home-view .home-module-button.is-current .home-module-icon { transform: none; }

.home-view .home-module-button.is-current::before {
  right: 28%;
  bottom: 7px;
  left: 28%;
  height: 2px;
  background: #c64a3a;
  box-shadow: 0 0 6px rgba(198, 74, 58, .5);
}

@media (max-width: 520px) {
  .home-view .home-module-nav { min-height: 100px; }
  .home-view .home-module-button {
    min-height: 78px;
    grid-template-rows: 51px 21px;
    gap: 3px;
    padding-bottom: 9px;
  }
  .home-view .home-module-button:nth-child(2),
  .home-view .home-module-button:nth-child(4) { transform: translateY(-6px); }
  .home-view .home-module-button--core {
    min-height: 100px;
    grid-template-rows: 66px 21px;
    transform: translateY(-14px);
  }
  .home-view .home-module-icon,
  .home-view .home-module-icon img { width: 51px; height: 51px; }
  .home-view .home-module-button--core .home-module-icon,
  .home-view .home-module-button--core .home-module-icon img { width: 66px; height: 66px; }
  .home-view .home-module-label { min-width: 60px; padding: 2px 5px 3px; font-size: 12px; line-height: 16px; }
  .home-view .home-module-button.is-current::before { bottom: 5px; }
}

/* 半透明战术托盘：为底部军令提供统一落点，仍让战场地面延续可见。 */
.home-view .home-module-dock {
  bottom: calc(3px + var(--safe-bottom));
  width: min(720px, calc(100vw - 10px));
  min-height: 96px;
  padding: 5px 8px 3px;
  overflow: hidden;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px);
  background: linear-gradient(180deg, rgba(255, 248, 221, .72) 0%, rgba(248, 226, 172, .58) 47%, rgba(224, 171, 96, .4) 100%);
  box-shadow: 0 -1px 0 rgba(255, 248, 214, .74), 0 -8px 20px rgba(103, 56, 27, .15), inset 0 1px 0 rgba(255, 255, 235, .82);
  backdrop-filter: blur(5px) saturate(1.06);
}

.home-view .home-module-dock::before {
  top: 0;
  right: 16px;
  bottom: auto;
  left: 16px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(186, 64, 46, .45) 8%, rgba(244, 197, 84, .98) 50%, rgba(186, 64, 46, .45) 92%, transparent);
  box-shadow: 0 1px 5px rgba(232, 172, 67, .45);
}

.home-view .home-module-nav {
  min-height: 88px;
  align-items: end;
}

.home-view .home-module-button {
  min-height: 80px;
  grid-template-rows: 53px 22px;
  gap: 2px;
  padding: 0 1px 4px;
}

.home-view .home-module-button:nth-child(2),
.home-view .home-module-button:nth-child(4) { transform: none; }

.home-view .home-module-button--core {
  min-height: 90px;
  grid-template-rows: 62px 22px;
  gap: 2px;
  padding-bottom: 4px;
  transform: none;
}

.home-view .home-module-icon,
.home-view .home-module-icon img { width: 52px; height: 52px; }

.home-view .home-module-button--core .home-module-icon,
.home-view .home-module-button--core .home-module-icon img { width: 62px; height: 62px; }

.home-view .home-module-label {
  min-width: 68px;
  padding: 2px 6px 3px;
  font-size: 13px;
  line-height: 17px;
}

.home-view .home-module-button--core .home-module-label { min-width: 70px; }

.home-view .home-module-button.is-current::before { bottom: 0; }

@media (max-width: 520px) {
  .home-view .home-module-dock {
    width: calc(100vw - 6px);
    min-height: 88px;
    padding: 4px 3px 2px;
    clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%, 0 13px);
  }
  .home-view .home-module-dock::before { right: 12px; left: 12px; }
  .home-view .home-module-nav { min-height: 80px; }
  .home-view .home-module-button {
    min-height: 72px;
    grid-template-rows: 47px 19px;
    gap: 2px;
    padding-bottom: 3px;
  }
  .home-view .home-module-button:nth-child(2),
  .home-view .home-module-button:nth-child(4) { transform: none; }
  .home-view .home-module-button--core {
    min-height: 81px;
    grid-template-rows: 56px 19px;
    transform: none;
  }
  .home-view .home-module-icon,
  .home-view .home-module-icon img { width: 46px; height: 46px; }
  .home-view .home-module-button--core .home-module-icon,
  .home-view .home-module-button--core .home-module-icon img { width: 56px; height: 56px; }
  .home-view .home-module-label { min-width: 60px; padding: 2px 5px; font-size: 12px; line-height: 15px; }
  .home-view .home-module-button--core .home-module-label { min-width: 64px; }
}

/* 朱红飘带导航：撤去整块面板，让图标重新属于战场画面。 */
.home-view .home-module-dock {
  bottom: calc(4px + var(--safe-bottom));
  width: min(700px, calc(100vw - 8px));
  min-height: 86px;
  padding: 0;
  overflow: visible;
  clip-path: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

.home-view .home-module-dock::before {
  top: auto;
  right: 7%;
  bottom: 4px;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218, 160, 55, .25) 9%, rgba(247, 207, 112, .76) 50%, rgba(218, 160, 55, .25) 91%, transparent);
  box-shadow: 0 0 5px rgba(239, 184, 71, .34);
}

.home-view .home-module-nav {
  min-height: 86px;
  align-items: end;
  gap: 3px;
}

.home-view .home-module-button {
  min-height: 80px;
  grid-template-rows: 54px 22px;
  gap: 2px;
  padding: 0 1px 7px;
}

.home-view .home-module-button:nth-child(2),
.home-view .home-module-button:nth-child(4) { transform: none; }

.home-view .home-module-button--core {
  min-height: 84px;
  grid-template-rows: 58px 22px;
  gap: 2px;
  padding-bottom: 7px;
  transform: none;
}

.home-view .home-module-icon,
.home-view .home-module-icon img { width: 52px; height: 52px; }

.home-view .home-module-button--core .home-module-icon,
.home-view .home-module-button--core .home-module-icon img { width: 56px; height: 56px; }

.home-view .home-module-label,
.home-view .home-module-button--core .home-module-label {
  min-width: 70px;
  padding: 3px 8px 4px;
  color: #fff2cf;
  font-size: 13px;
  font-weight: 900;
  line-height: 16px;
  letter-spacing: .05em;
  text-shadow: 0 1px 1px rgba(85, 22, 16, .72);
  background: linear-gradient(180deg, #d95a48 0%, #aa3029 100%);
  box-shadow: 0 1px 0 rgba(255, 217, 141, .62), 0 2px 4px rgba(75, 20, 15, .36);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}

.home-view .home-module-button--core .home-module-label {
  background: linear-gradient(180deg, #d84437 0%, #8d2420 100%);
  box-shadow: 0 1px 0 rgba(255, 228, 148, .7), 0 2px 5px rgba(78, 18, 15, .46);
}

.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible,
.home-view .home-module-button.is-current {
  color: #fff2cf;
  filter: brightness(1.1);
}

.home-view .home-module-button.is-current::before {
  right: 32%;
  bottom: 2px;
  left: 32%;
  height: 2px;
  background: #ffd46d;
  box-shadow: 0 0 6px rgba(255, 200, 85, .58);
}

@media (max-width: 520px) {
  .home-view .home-module-dock {
    width: calc(100vw - 4px);
    min-height: 80px;
    padding: 0;
  }
  .home-view .home-module-dock::before { right: 7%; bottom: 3px; left: 7%; }
  .home-view .home-module-nav { min-height: 80px; gap: 1px; }
  .home-view .home-module-button {
    min-height: 75px;
    grid-template-rows: 49px 21px;
    gap: 2px;
    padding-bottom: 5px;
  }
  .home-view .home-module-button--core {
    min-height: 78px;
    grid-template-rows: 52px 21px;
    padding-bottom: 5px;
  }
  .home-view .home-module-icon,
  .home-view .home-module-icon img { width: 48px; height: 48px; }
  .home-view .home-module-button--core .home-module-icon,
  .home-view .home-module-button--core .home-module-icon img { width: 51px; height: 51px; }
  .home-view .home-module-label,
  .home-view .home-module-button--core .home-module-label {
    min-width: 64px;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 15px;
  }
}

/* 帝玺指挥中枢：左右双翼命令围绕中央阵眼，不再使用横向五等分导航。 */
.home-view .home-module-dock {
  bottom: calc(6px + var(--safe-bottom));
  width: min(560px, calc(100vw - 18px));
  min-height: 108px;
  overflow: visible;
}

.home-view .home-module-dock::before {
  position: absolute;
  inset: auto 10% 0;
  display: block;
  height: 42px;
  background: radial-gradient(ellipse at 50% 100%, rgba(231, 174, 83, .16), rgba(255, 243, 213, .08) 48%, transparent 78%);
  box-shadow: none;
  content: "";
  filter: blur(2px);
  pointer-events: none;
}

.home-view .home-module-nav {
  position: relative;
  display: block;
  min-height: 108px;
  padding: 0;
}

.home-view .home-module-button {
  position: absolute;
  display: grid;
  width: min(178px, calc(50% - 52px));
  min-height: 42px;
  grid-template-columns: 39px minmax(0, 1fr);
  grid-template-rows: 42px;
  align-items: center;
  justify-items: stretch;
  gap: 4px;
  border: 1px solid rgba(224, 174, 82, .48);
  border-radius: 0;
  padding: 2px 8px 2px 4px;
  color: #4d2d24;
  background: linear-gradient(90deg, rgba(255, 249, 221, .7), rgba(218, 233, 207, .5));
  box-shadow: 0 2px 5px rgba(44, 51, 37, .16), inset 0 1px 0 rgba(255, 255, 239, .68);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  filter: none;
}

.home-view .home-module-button:nth-child(1) { top: 9px; left: 0; }
.home-view .home-module-button:nth-child(2) { bottom: 10px; left: 0; }
.home-view .home-module-button:nth-child(4) { top: 9px; right: 0; }
.home-view .home-module-button:nth-child(5) { right: 0; bottom: 10px; }

.home-view .home-module-button::after { display: none; }

.home-view .home-module-button--core {
  top: 2px;
  left: 50%;
  display: grid;
  width: 88px;
  min-height: 98px;
  grid-template-columns: 1fr;
  grid-template-rows: 70px 22px;
  align-items: end;
  justify-items: center;
  gap: 1px;
  border: 0;
  padding: 4px 0 0;
  color: #fff4cf;
  background: none;
  box-shadow: none;
  clip-path: none;
  isolation: isolate;
  z-index: 2;
  transform: translateX(-50%);
}

.home-view .home-module-button--core::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(239, 192, 89, .62);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255, 249, 215, .54), rgba(230, 205, 134, .26) 56%, rgba(104, 91, 57, .12) 73%, transparent 74%);
  box-shadow: 0 2px 7px rgba(48, 48, 33, .2), inset 0 1px 0 rgba(255, 255, 239, .62);
  content: "";
  transform: translateX(-50%);
}

.home-view .home-module-button--core::after {
  position: absolute;
  z-index: 0;
  top: 5px;
  left: 50%;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 239, 166, .36);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(231, 174, 83, .06), 0 0 10px rgba(231, 174, 83, .18);
  content: "";
  opacity: .78;
  pointer-events: none;
  transform: translateX(-50%) scale(.94);
  animation: emperor-core-breathe 2.8s ease-in-out infinite;
}

.home-view .home-module-icon,
.home-view .home-module-icon img {
  width: 36px;
  height: 36px;
}

.home-view .home-module-button--core .home-module-icon,
.home-view .home-module-button--core .home-module-icon img {
  width: 54px;
  height: 54px;
}

.home-view .home-module-button--core .home-module-icon,
.home-view .home-module-button--core .home-module-label { position: relative; z-index: 1; }

.home-view .home-module-label,
.home-view .home-module-button--core .home-module-label {
  display: block;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #4d2d24;
  font-size: 13px;
  font-weight: 900;
  line-height: 17px;
  letter-spacing: .03em;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 255, 236, .88);
  background: none;
  box-shadow: none;
  clip-path: none;
}

.home-view .home-module-button--core .home-module-label {
  width: 100%;
  color: #fff4cf;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: .05em;
  text-align: center;
  text-shadow: 0 2px 2px rgba(46, 42, 28, .78);
}

.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible,
.home-view .home-module-button.is-current {
  color: #4d2d24;
  background: linear-gradient(90deg, rgba(255, 252, 230, .98), rgba(206, 231, 201, .9));
  filter: none;
}

.home-view .home-module-button:hover .home-module-icon,
.home-view .home-module-button:focus-visible .home-module-icon { transform: scale(1.06); }

.home-view .home-module-button--core:hover,
.home-view .home-module-button--core:focus-visible,
.home-view .home-module-button--core.is-current {
  color: #fff4cf;
  background: none;
}

.home-view .home-module-button.is-current {
  border-color: #ad3b31;
  background: linear-gradient(90deg, rgba(217, 90, 72, .94), rgba(164, 49, 39, .92));
}

.home-view .home-module-button.is-current .home-module-label {
  color: #fff4d2;
  text-shadow: 0 1px 1px rgba(78, 20, 15, .78);
}

.home-view .home-module-button--core.is-current::before {
  border-color: #c74d3e;
  background: radial-gradient(circle at 50% 42%, rgba(255, 241, 188, .9), rgba(211, 97, 70, .58) 56%, rgba(96, 38, 27, .26) 73%, transparent 74%);
}

.home-view .home-module-button.is-current::after { display: none; }

@keyframes emperor-core-breathe {
  0%, 100% { opacity: .54; transform: translateX(-50%) scale(.91); }
  50% { opacity: .9; transform: translateX(-50%) scale(1.04); }
}

@media (max-width: 520px) {
  .home-view .home-module-dock {
    width: calc(100vw - 16px);
    min-height: 104px;
  }
  .home-view .home-module-dock::before { height: 38px; }
  .home-view .home-module-nav { min-height: 104px; }
  .home-view .home-module-button {
    width: calc(50% - 46px);
    min-height: 38px;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: 38px;
    gap: 3px;
    padding: 2px 5px 2px 3px;
  }
  .home-view .home-module-button:nth-child(1),
  .home-view .home-module-button:nth-child(4) { top: 8px; }
  .home-view .home-module-button:nth-child(2),
  .home-view .home-module-button:nth-child(5) { bottom: 6px; }
  .home-view .home-module-button--core {
    top: 2px;
    width: 84px;
    min-height: 96px;
    grid-template-rows: 68px 20px;
    padding-top: 2px;
  }
  .home-view .home-module-button--core::before { width: 66px; height: 66px; }
  .home-view .home-module-button--core::after { top: 5px; width: 56px; height: 56px; }
  .home-view .home-module-icon,
  .home-view .home-module-icon img { width: 33px; height: 33px; }
  .home-view .home-module-button--core .home-module-icon,
  .home-view .home-module-button--core .home-module-icon img { width: 51px; height: 51px; }
  .home-view .home-module-label,
  .home-view .home-module-button--core .home-module-label { font-size: 12px; line-height: 15px; }
  .home-view .home-module-button--core .home-module-label { font-size: 12px; line-height: 17px; }
}

/* 战场快捷阵列：五枚浮动令印沿一条低亮能量线落位，取消横幅、卡片和大圆盘。 */
.home-view .home-module-dock {
  right: auto;
  bottom: calc(7px + var(--safe-bottom));
  left: 50%;
  width: min(570px, calc(100vw - 22px));
  min-height: 86px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: translateX(-50%);
}

.home-view .home-module-dock::before {
  position: absolute;
  right: 7%;
  bottom: 11px;
  left: 7%;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 220, 129, .48) 12%, rgba(183, 70, 56, .72) 50%, rgba(255, 220, 129, .48) 88%, transparent);
  box-shadow: 0 0 7px rgba(231, 174, 83, .36);
  content: "";
  filter: none;
  pointer-events: none;
}

.home-view .home-module-dock::after {
  position: absolute;
  right: 50%;
  bottom: 7px;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 222, 132, .8);
  background: rgba(183, 70, 56, .78);
  box-shadow: 0 0 8px rgba(231, 174, 83, .58);
  content: "";
  pointer-events: none;
  transform: translateX(50%) rotate(45deg);
}

.home-view .home-module-nav {
  position: relative;
  display: grid;
  min-height: 86px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 5px;
  padding: 0 4px;
}

.home-view .home-module-button,
.home-view .home-module-button--core {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  grid-template-columns: 1fr;
  grid-template-rows: 46px 20px;
  align-items: end;
  justify-items: center;
  gap: 2px;
  border: 0;
  border-radius: 0;
  padding: 0 1px 8px;
  color: #fff1c7;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  isolation: auto;
  z-index: 1;
  transform: none;
}

.home-view .home-module-button:nth-child(1),
.home-view .home-module-button:nth-child(2),
.home-view .home-module-button:nth-child(4),
.home-view .home-module-button:nth-child(5) { top: auto; right: auto; bottom: auto; left: auto; }

.home-view .home-module-button:nth-child(1),
.home-view .home-module-button:nth-child(5) { transform: translateY(4px); }

.home-view .home-module-button:nth-child(2),
.home-view .home-module-button:nth-child(4) { transform: translateY(1px); }

.home-view .home-module-button--core {
  min-height: 86px;
  grid-template-rows: 57px 20px;
  padding-bottom: 8px;
  color: #fff7d9;
  transform: translateY(-5px);
}

.home-view .home-module-button--core::before,
.home-view .home-module-button--core::after { display: none; }

.home-view .home-module-button.is-current::before { display: none; }

.home-view .home-module-icon,
.home-view .home-module-icon img {
  width: 39px;
  height: 39px;
}

.home-view .home-module-icon {
  position: relative;
  display: grid;
  place-items: center;
}

.home-view .home-module-icon::before {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 218, 125, .36);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(231, 174, 83, .22);
  content: "";
  opacity: .76;
  pointer-events: none;
  transform: rotate(45deg);
}

.home-view .home-module-icon img {
  position: relative;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(34, 20, 15, .6));
  transition: transform .18s ease, filter .18s ease;
}

.home-view .home-module-button--core .home-module-icon,
.home-view .home-module-button--core .home-module-icon img {
  width: 51px;
  height: 51px;
}

.home-view .home-module-button--core .home-module-icon::before {
  inset: 1px;
  border-color: rgba(255, 222, 132, .7);
  box-shadow: 0 0 13px rgba(231, 174, 83, .48);
}

.home-view .home-module-label,
.home-view .home-module-button--core .home-module-label {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #fff1c7;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: .03em;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(80, 31, 20, .95), 0 2px 5px rgba(35, 20, 15, .9);
  white-space: nowrap;
  background: none;
  box-shadow: none;
  clip-path: none;
}

.home-view .home-module-button--core .home-module-label {
  color: #ffe4a0;
  font-size: 14px;
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(84, 28, 17, .98), 0 0 8px rgba(231, 174, 83, .48);
}

.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible,
.home-view .home-module-button.is-current,
.home-view .home-module-button--core:hover,
.home-view .home-module-button--core:focus-visible,
.home-view .home-module-button--core.is-current {
  color: #fff8df;
  background: transparent;
  filter: none;
}

.home-view .home-module-button:hover .home-module-icon img,
.home-view .home-module-button:focus-visible .home-module-icon img {
  filter: drop-shadow(0 2px 4px rgba(34, 20, 15, .72)) brightness(1.12);
  transform: translateY(-2px) scale(1.08);
}

.home-view .home-module-button:hover .home-module-icon::before,
.home-view .home-module-button:focus-visible .home-module-icon::before {
  border-color: rgba(255, 232, 157, .78);
  box-shadow: 0 0 12px rgba(231, 174, 83, .52);
}

.home-view .home-module-button.is-current .home-module-label {
  color: #ffe4a0;
  text-shadow: 0 1px 0 rgba(84, 28, 17, .98), 0 0 8px rgba(231, 174, 83, .48);
}

@media (max-width: 520px) {
  .home-view .home-module-dock {
    bottom: calc(5px + var(--safe-bottom));
    width: calc(100vw - 12px);
    min-height: 78px;
  }

  .home-view .home-module-dock::before { right: 5%; bottom: 9px; left: 5%; }
  .home-view .home-module-dock::after { bottom: 5px; width: 7px; height: 7px; }
  .home-view .home-module-nav { min-height: 78px; gap: 1px; padding: 0 1px; }
  .home-view .home-module-button,
  .home-view .home-module-button--core {
    min-height: 70px;
    grid-template-rows: 41px 18px;
    gap: 1px;
    padding-bottom: 7px;
  }
  .home-view .home-module-button:nth-child(1),
  .home-view .home-module-button:nth-child(5) { transform: translateY(3px); }
  .home-view .home-module-button:nth-child(2),
  .home-view .home-module-button:nth-child(4) { transform: translateY(1px); }
  .home-view .home-module-button--core {
    min-height: 78px;
    grid-template-rows: 51px 18px;
    padding-bottom: 7px;
    transform: translateY(-3px);
  }
  .home-view .home-module-icon,
  .home-view .home-module-icon img { width: 33px; height: 33px; }
  .home-view .home-module-button--core .home-module-icon,
  .home-view .home-module-button--core .home-module-icon img { width: 44px; height: 44px; }
  .home-view .home-module-label,
  .home-view .home-module-button--core .home-module-label { font-size: 11px; line-height: 18px; letter-spacing: .01em; }
  .home-view .home-module-button--core .home-module-label { font-size: 12px; }
}

/* 最终定位覆盖：菜单跟随战场内容，收益区结束后保持 30px 间距。 */
.home-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.home-view .home-module-dock {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  flex: 0 0 auto;
  width: min(700px, calc(100vw - 24px));
  min-height: 110px;
  margin: 30px auto 20px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

.home-view .home-module-dock::before,
.home-view .home-module-dock::after { display: none; }

@media (max-width: 520px) {
  .home-view .home-module-dock {
    width: calc(100vw - 24px);
    min-height: 98px;
    margin-top: 30px;
    margin-bottom: calc(16px + var(--safe-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-view .home-module-icon img { transition: none; }
}

/* 五域战术托盘：亮色半透明底座、切角令牌与中央主徽章。 */
.home-view .home-module-dock {
  --dock-ink: #3b2520;
  --dock-cream: #fff8e9;
  --dock-gold: #e2a53f;
  --dock-red: #b94338;
  --dock-cyan: #4c9e9c;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 108px;
  padding: 10px max(10px, env(safe-area-inset-right)) calc(7px + var(--safe-bottom)) max(10px, env(safe-area-inset-left));
  overflow: visible;
  border-top: 1px solid rgba(255, 231, 168, .9);
  background: linear-gradient(180deg, rgba(255, 248, 230, .74), rgba(255, 242, 216, .88));
  box-shadow: 0 -10px 28px rgba(58, 29, 23, .22), inset 0 1px 0 rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px) saturate(115%);
  transform: none;
}

.home-view .home-module-dock::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #c75042 0%, #efc565 24%, #fff0ad 50%, #efc565 76%, #c75042 100%);
  box-shadow: 0 0 10px rgba(224, 165, 63, .42);
  content: "";
  filter: none;
  pointer-events: none;
}

.home-view .home-module-dock::after {
  position: absolute;
  top: -5px;
  right: 50%;
  bottom: auto;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 244, 193, .95);
  background: #c34b3d;
  box-shadow: 0 0 0 3px rgba(255, 224, 131, .22), 0 0 12px rgba(193, 75, 61, .5);
  content: "";
  pointer-events: none;
  transform: translateX(50%) rotate(45deg);
}

.home-view .home-module-nav {
  position: relative;
  display: grid;
  min-height: 90px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
  padding: 0;
}

.home-view .home-module-button,
.home-view .home-module-button--core {
  --module-accent: #c75042;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 84px;
  grid-template-rows: 58px 20px;
  align-content: end;
  align-items: center;
  justify-items: center;
  gap: 3px;
  border: 0;
  border-radius: 0;
  padding: 2px 3px 4px;
  color: var(--dock-ink);
  background: transparent;
  box-shadow: none;
  clip-path: none;
  isolation: isolate;
  transform: none;
}

.home-view .home-module-button::before {
  position: absolute;
  z-index: -1;
  inset: 6px 0 0;
  border: 1px solid rgba(182, 109, 54, .34);
  background: linear-gradient(145deg, rgba(255, 255, 246, .73), rgba(255, 226, 178, .4));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84), 0 4px 10px rgba(92, 43, 27, .14);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 8px), 0 8px);
  content: "";
  opacity: .9;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.home-view .home-module-button::after {
  position: absolute;
  z-index: -1;
  right: 13%;
  bottom: 1px;
  left: 13%;
  height: 2px;
  background: var(--module-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--module-accent) 45%, transparent);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 5px 100%, 0 50%);
  content: "";
  opacity: .72;
}

.home-view .home-module-button:nth-child(1) { --module-accent: #c95043; }
.home-view .home-module-button:nth-child(2) { --module-accent: #4b8ea4; }
.home-view .home-module-button:nth-child(3) { --module-accent: #be812f; }
.home-view .home-module-button:nth-child(4) { --module-accent: #4b9b86; }
.home-view .home-module-button:nth-child(5) { --module-accent: #775da0; }

.home-view .home-module-icon,
.home-view .home-module-icon img {
  width: 50px;
  height: 50px;
}

.home-view .home-module-icon {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.home-view .home-module-icon::before {
  position: absolute;
  z-index: -1;
  inset: 1px;
  border: 1px solid color-mix(in srgb, var(--module-accent) 64%, white);
  background: linear-gradient(145deg, rgba(255, 255, 247, .96), color-mix(in srgb, var(--module-accent) 16%, white));
  box-shadow: 0 3px 7px rgba(74, 35, 23, .2), inset 0 1px 0 rgba(255, 255, 255, .95);
  clip-path: polygon(50% 0, 92% 18%, 100% 50%, 92% 82%, 50% 100%, 8% 82%, 0 50%, 8% 18%);
  content: "";
  opacity: .96;
  transform: none;
}

.home-view .home-module-icon img {
  position: relative;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(49, 27, 20, .32));
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), filter .2s ease;
}

.home-view .home-module-button--core {
  z-index: 2;
  min-height: 100px;
  grid-template-rows: 72px 20px;
  margin-top: -16px;
  padding: 2px 0 4px;
}

.home-view .home-module-button--core::before {
  inset: 0 -8px 0;
  border: 2px solid rgba(184, 125, 38, .7);
  background: linear-gradient(145deg, rgba(255, 252, 224, .98), rgba(244, 186, 84, .63));
  box-shadow: 0 7px 15px rgba(93, 43, 20, .23), inset 0 1px 0 rgba(255, 255, 255, .96);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  opacity: 1;
}

.home-view .home-module-button--core::after {
  right: 22%;
  bottom: 1px;
  left: 22%;
  height: 3px;
  background: #b94338;
  box-shadow: 0 0 10px rgba(185, 67, 56, .56);
  opacity: 1;
}

.home-view .home-module-button--core .home-module-icon,
.home-view .home-module-button--core .home-module-icon img {
  width: 62px;
  height: 62px;
}

.home-view .home-module-button--core .home-module-icon::before {
  inset: 0;
  border-color: rgba(184, 125, 38, .9);
  background: linear-gradient(145deg, #fffbe7, #f1c36d);
  box-shadow: 0 3px 10px rgba(104, 52, 18, .28), inset 0 1px 0 rgba(255, 255, 255, .98);
}

.home-view .home-module-label,
.home-view .home-module-button--core .home-module-label {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  color: var(--dock-ink);
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: .04em;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .92);
  white-space: nowrap;
}

.home-view .home-module-button--core .home-module-label {
  color: #7f2c26;
  font-size: 14px;
  letter-spacing: .07em;
}

.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible,
.home-view .home-module-button.is-current {
  color: var(--dock-ink);
  filter: none;
  transform: translateY(-3px);
}

.home-view .home-module-button:hover::before,
.home-view .home-module-button:focus-visible::before,
.home-view .home-module-button.is-current::before {
  border-color: color-mix(in srgb, var(--module-accent) 72%, #fff);
  background: linear-gradient(145deg, rgba(255, 255, 250, .95), color-mix(in srgb, var(--module-accent) 27%, white));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 7px 15px rgba(92, 43, 27, .2);
}

.home-view .home-module-button:hover .home-module-icon img,
.home-view .home-module-button:focus-visible .home-module-icon img,
.home-view .home-module-button.is-current .home-module-icon img {
  filter: drop-shadow(0 3px 3px rgba(49, 27, 20, .38)) brightness(1.06);
  transform: translateY(-3px) scale(1.08);
}

.home-view .home-module-button--core:hover,
.home-view .home-module-button--core:focus-visible,
.home-view .home-module-button--core.is-current { transform: translateY(-19px); }

.home-view .home-module-button:focus-visible {
  outline: 2px solid #b94338;
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .home-view .home-module-dock {
    min-height: 96px;
    padding-top: 8px;
    padding-bottom: calc(5px + var(--safe-bottom));
  }

  .home-view .home-module-nav { min-height: 83px; gap: 3px; }
  .home-view .home-module-button,
  .home-view .home-module-button--core {
    min-height: 78px;
    grid-template-rows: 52px 19px;
    gap: 2px;
    padding-right: 1px;
    padding-left: 1px;
  }
  .home-view .home-module-icon,
  .home-view .home-module-icon img { width: 43px; height: 43px; }
  .home-view .home-module-button--core {
    min-height: 91px;
    grid-template-rows: 65px 19px;
    margin-top: -14px;
  }
  .home-view .home-module-button--core .home-module-icon,
  .home-view .home-module-button--core .home-module-icon img { width: 54px; height: 54px; }
  .home-view .home-module-label,
  .home-view .home-module-button--core .home-module-label { font-size: 11px; line-height: 19px; letter-spacing: .02em; }
  .home-view .home-module-button--core .home-module-label { font-size: 12px; }
  .home-view .home-module-button--core:hover,
  .home-view .home-module-button--core:focus-visible,
  .home-view .home-module-button--core.is-current { transform: translateY(-17px); }
}

/* 五域悬浮徽章带：取消卡片化底板，用纵向层级制造游戏 HUD 的指挥感。 */
.home-view .home-module-dock {
  --nav-ink: #fff9e7;
  --nav-shadow: rgba(39, 21, 22, .86);
  --nav-gold: #f1c96d;
  right: 0;
  bottom: calc(6px + var(--safe-bottom));
  left: 0;
  width: min(700px, calc(100vw - 12px));
  min-height: 110px;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

.home-view .home-module-dock::before {
  position: absolute;
  right: 4%;
  bottom: 7px;
  left: 4%;
  display: block;
  height: 25px;
  border-top: 1px solid rgba(255, 231, 164, .78);
  border-bottom: 1px solid rgba(176, 57, 51, .58);
  background: linear-gradient(180deg, rgba(45, 25, 26, .48), rgba(37, 19, 22, .72));
  box-shadow: 0 6px 16px rgba(30, 13, 15, .27), 0 0 14px rgba(226, 165, 63, .14);
  clip-path: polygon(0 28%, 2.5% 0, 97.5% 0, 100% 28%, 97.5% 100%, 2.5% 100%);
  content: "";
  pointer-events: none;
}

.home-view .home-module-dock::after {
  position: absolute;
  right: 50%;
  bottom: 3px;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 238, 169, .92);
  background: #bd493c;
  box-shadow: 0 0 0 3px rgba(189, 73, 60, .16), 0 0 13px rgba(240, 182, 75, .58);
  content: "";
  pointer-events: none;
  transform: translateX(50%) rotate(45deg);
}

.home-view .home-module-nav {
  position: relative;
  display: grid;
  min-height: 110px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 3px;
  padding: 0 4%;
}

.home-view .home-module-button,
.home-view .home-module-button--core {
  --module-accent: #d45949;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 86px;
  grid-template-rows: 56px 22px;
  align-content: end;
  align-items: center;
  justify-items: center;
  gap: 2px;
  border: 0;
  border-radius: 0;
  padding: 0 1px 9px;
  color: var(--nav-ink);
  background: transparent;
  box-shadow: none;
  clip-path: none;
  isolation: isolate;
  text-shadow: 0 2px 4px var(--nav-shadow);
  transform: translateY(7px);
}

.home-view .home-module-button:nth-child(2),
.home-view .home-module-button:nth-child(4) { transform: translateY(3px); }

.home-view .home-module-button:nth-child(1) { --module-accent: #d15a4b; }
.home-view .home-module-button:nth-child(2) { --module-accent: #59a0b5; }
.home-view .home-module-button:nth-child(3) { --module-accent: #e0a53d; }
.home-view .home-module-button:nth-child(4) { --module-accent: #52a58a; }
.home-view .home-module-button:nth-child(5) { --module-accent: #8a6eb0; }

.home-view .home-module-button::before {
  position: absolute;
  right: 25%;
  bottom: 5px;
  left: 25%;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--module-accent), transparent);
  box-shadow: 0 0 7px var(--module-accent);
  clip-path: none;
  content: "";
  opacity: .72;
  transition: opacity .2s ease, box-shadow .2s ease;
}

.home-view .home-module-button::after {
  position: absolute;
  right: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border: 1px solid rgba(255, 246, 201, .82);
  border-radius: 50%;
  background: var(--module-accent);
  box-shadow: 0 0 7px var(--module-accent);
  clip-path: none;
  content: "";
  opacity: .86;
  transform: translateX(50%);
}

.home-view .home-module-icon,
.home-view .home-module-icon img {
  width: 50px;
  height: 50px;
}

.home-view .home-module-icon {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  transform: translateY(0);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}

.home-view .home-module-icon::before {
  position: absolute;
  z-index: -1;
  inset: 1px;
  border: 1px solid color-mix(in srgb, var(--module-accent) 78%, #fff1c5);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(64, 29, 28, .9), rgba(38, 23, 28, .72));
  box-shadow: inset 0 1px 0 rgba(255, 249, 211, .46), 0 4px 9px rgba(31, 14, 16, .4), 0 0 10px color-mix(in srgb, var(--module-accent) 35%, transparent);
  clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%);
  content: "";
  opacity: .96;
}

.home-view .home-module-icon::after {
  position: absolute;
  z-index: -1;
  inset: 5px;
  border: 1px solid rgba(255, 236, 177, .2);
  clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%);
  content: "";
  pointer-events: none;
}

.home-view .home-module-icon img {
  position: relative;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(13, 8, 10, .7));
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), filter .2s ease;
}

.home-view .home-module-button--core {
  z-index: 3;
  min-height: 108px;
  grid-template-rows: 76px 22px;
  margin-top: -20px;
  padding-bottom: 9px;
  transform: translateY(0);
}

.home-view .home-module-button--core::before {
  right: 16%;
  bottom: 5px;
  left: 16%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f2c65e, transparent);
  box-shadow: 0 0 12px rgba(242, 198, 94, .9);
  opacity: 1;
}

.home-view .home-module-button--core::after {
  right: 50%;
  bottom: 2px;
  width: 7px;
  height: 7px;
  background: #d14e3e;
  box-shadow: 0 0 10px #f0b84d;
  transform: translateX(50%) rotate(45deg);
}

.home-view .home-module-button--core .home-module-icon,
.home-view .home-module-button--core .home-module-icon img {
  width: 68px;
  height: 68px;
}

.home-view .home-module-button--core .home-module-icon::before {
  border-width: 2px;
  border-color: #f0bd50;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(112, 60, 25, .96), rgba(83, 34, 26, .9));
  box-shadow: inset 0 1px 0 rgba(255, 247, 192, .66), 0 5px 14px rgba(57, 19, 15, .48), 0 0 15px rgba(240, 182, 75, .5);
}

.home-view .home-module-button--core .home-module-icon::after { inset: 6px; border-color: rgba(255, 239, 176, .4); }

.home-view .home-module-label,
.home-view .home-module-button--core .home-module-label {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  color: var(--nav-ink);
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 22px;
  letter-spacing: .04em;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(62, 22, 19, .98), 0 2px 5px rgba(17, 10, 12, .92);
  white-space: nowrap;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.home-view .home-module-button--core .home-module-label {
  color: #ffe7a0;
  font-size: 14px;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 #68251c, 0 0 8px rgba(247, 196, 78, .62);
}

.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible,
.home-view .home-module-button.is-current {
  color: var(--nav-ink);
  filter: none;
  transform: translateY(2px);
}

.home-view .home-module-button--core:hover,
.home-view .home-module-button--core:focus-visible,
.home-view .home-module-button--core.is-current { transform: translateY(-4px); }

.home-view .home-module-button:hover .home-module-icon,
.home-view .home-module-button:focus-visible .home-module-icon,
.home-view .home-module-button.is-current .home-module-icon { transform: translateY(-4px) scale(1.06); }

.home-view .home-module-button:hover .home-module-icon img,
.home-view .home-module-button:focus-visible .home-module-icon img,
.home-view .home-module-button.is-current .home-module-icon img {
  filter: drop-shadow(0 3px 3px rgba(13, 8, 10, .8)) brightness(1.1);
}

.home-view .home-module-button:hover::before,
.home-view .home-module-button:focus-visible::before,
.home-view .home-module-button.is-current::before { opacity: 1; box-shadow: 0 0 11px var(--module-accent); }

.home-view .home-module-button:focus-visible {
  outline: 2px solid #ffe09a;
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .home-view .home-module-dock {
    bottom: calc(3px + var(--safe-bottom));
    width: calc(100vw - 4px);
    min-height: 98px;
  }

  .home-view .home-module-dock::before { right: 2%; bottom: 5px; left: 2%; height: 22px; }
  .home-view .home-module-dock::after { bottom: 1px; width: 12px; height: 12px; }
  .home-view .home-module-nav { min-height: 98px; gap: 1px; padding: 0 2%; }
  .home-view .home-module-button,
  .home-view .home-module-button--core {
    min-height: 77px;
    grid-template-rows: 49px 20px;
    gap: 1px;
    padding-bottom: 7px;
  }
  .home-view .home-module-button:nth-child(2),
  .home-view .home-module-button:nth-child(4) { transform: translateY(2px); }
  .home-view .home-module-button--core {
    min-height: 95px;
    grid-template-rows: 67px 20px;
    margin-top: -17px;
    padding-bottom: 7px;
  }
  .home-view .home-module-icon,
  .home-view .home-module-icon img { width: 43px; height: 43px; }
  .home-view .home-module-button--core .home-module-icon,
  .home-view .home-module-button--core .home-module-icon img { width: 56px; height: 56px; }
  .home-view .home-module-label,
  .home-view .home-module-button--core .home-module-label { font-size: 11px; line-height: 20px; letter-spacing: .02em; }
  .home-view .home-module-button--core .home-module-label { font-size: 12px; }
}

/* 最终覆盖：菜单固定在屏幕底部，并与底部保持 25px 间距。 */
.home-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.home-view .home-module-dock {
  position: fixed;
  top: auto;
  right: auto;
  bottom: calc(25px + var(--safe-bottom));
  left: 50%;
  flex: 0 0 auto;
  width: min(700px, calc(100vw - 24px));
  min-height: 116px;
  margin: 0;
  padding: 3px 10px 5px;
  overflow: visible;
  border: 1px solid rgba(255, 238, 190, .2);
  background: rgba(0, 0, 0, .3);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 18px rgba(33, 20, 14, .16);
  backdrop-filter: blur(3px);
  transform: translateX(-50%);
}

.home-view .home-module-dock::before,
.home-view .home-module-dock::after { display: none; }

.home-view .home-module-nav {
  min-height: 106px;
  gap: 0;
  padding: 0 1%;
}

.home-view .home-module-button {
  transform: translateY(4px);
}

.home-view .home-module-button:nth-child(2),
.home-view .home-module-button:nth-child(4) {
  transform: translateY(4px);
}

.home-view .home-module-button--core {
  transform: translateY(-1px);
}

.home-view .home-module-button--core:hover,
.home-view .home-module-button--core:focus-visible,
.home-view .home-module-button--core.is-current {
  transform: translateY(-5px);
}

@media (max-width: 520px) {
  .home-view .home-module-dock {
    width: calc(100vw - 24px);
    min-height: 104px;
    margin-top: 0;
    margin-bottom: 0;
    bottom: calc(25px + var(--safe-bottom));
    padding: 2px 4px 4px;
    border-radius: 24px;
  }

  .home-view .home-module-nav { min-height: 96px; padding: 0 1%; }
  .home-view .home-module-button,
  .home-view .home-module-button:nth-child(2),
  .home-view .home-module-button:nth-child(4) { transform: translateY(3px); }
  .home-view .home-module-button--core { transform: translateY(-1px); }
}

/* ============================================================
   首页底部功能菜单 · 重设计 v3
   用「金玉御栏 + 五方石龛」替换原先的半透明黑色药丸、
   飘浮色线与圆点，并让中央「帝皇至尊」真正成为主位。
   ============================================================ */
.home-view .home-module-dock {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: min(680px, calc(100vw - 16px));
  min-height: 0;
  margin: auto auto calc(10px + var(--safe-bottom));
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

.home-view .home-module-dock::before,
.home-view .home-module-dock::after { display: none; }

/* 御栏本体：青玉底 + 鎏金描边 */
.home-view .home-module-nav {
  --dock-gold: #eacb7c;
  --dock-gold-deep: #b8892f;
  position: relative;
  display: grid;
  min-height: 86px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
  padding: 13px 10px 9px;
  border: 1px solid rgba(234, 203, 124, .55);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(96, 138, 122, .34), transparent 62%),
    linear-gradient(180deg, rgba(38, 66, 62, .95) 0%, rgba(19, 43, 42, .97) 48%, rgba(11, 29, 30, .98) 100%);
  box-shadow:
    0 14px 30px rgba(6, 19, 20, .5),
    inset 0 1px 0 rgba(255, 242, 202, .32),
    inset 0 0 0 1px rgba(0, 0, 0, .28),
    inset 0 -18px 28px rgba(0, 0, 0, .42);
}

/* 顶部鎏金横线 + 中央菱形结 */
.home-view .home-module-nav::before {
  position: absolute;
  top: 7px;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234, 203, 124, .85) 22%, rgba(234, 203, 124, .85) 78%, transparent);
  box-shadow: 0 0 9px rgba(234, 203, 124, .5);
  content: "";
  pointer-events: none;
}

.home-view .home-module-nav::after {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(243, 216, 146, .9);
  background: linear-gradient(180deg, #f4d78f, #bc8a2f);
  box-shadow: 0 0 10px rgba(240, 197, 110, .8);
  content: "";
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

/* 每个入口 = 一方石龛 */
.home-view .home-module-button,
.home-view .home-module-button--core {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  grid-template-rows: auto auto;
  align-content: end;
  align-items: center;
  justify-items: center;
  gap: 5px;
  padding: 6px 2px 5px;
  border: 0;
  border-radius: 11px;
  color: #f3e7cb;
  background: linear-gradient(180deg, rgba(255, 240, 205, .06), rgba(3, 17, 17, .18));
  box-shadow: inset 0 0 0 1px rgba(234, 203, 124, .12);
  clip-path: none;
  filter: none;
  isolation: auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 2px 6px rgba(0, 0, 0, .55);
  transform: none;
  transition: background-color .16s ease, box-shadow .16s ease, transform .18s ease;
}

/* 龛内灵光，取代原先飘浮的色线与圆点 */
.home-view .home-module-button::before {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 11px;
  background: radial-gradient(58% 52% at 50% 36%, color-mix(in srgb, var(--module-accent) 40%, transparent), transparent 72%);
  box-shadow: none;
  clip-path: none;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* 选中标记：龛底鎏金细线 */
.home-view .home-module-button::after {
  position: absolute;
  right: 24%;
  bottom: 2px;
  left: 24%;
  width: auto;
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--dock-gold), transparent);
  box-shadow: 0 0 8px rgba(234, 203, 124, .7);
  clip-path: none;
  content: "";
  opacity: 0;
  transform: none;
  transition: opacity .2s ease;
  pointer-events: none;
}

/* 石龛底托 */
.home-view .home-module-icon {
  position: relative;
  z-index: 0;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  transform: translateY(0);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}

.home-view .home-module-icon::before {
  position: absolute;
  z-index: -1;
  inset: 1px;
  border: 1px solid rgba(234, 203, 124, .5);
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(70, 104, 94, .95), rgba(15, 38, 38, .96));
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 214, .42),
    inset 0 -8px 12px rgba(0, 0, 0, .32),
    0 3px 8px rgba(2, 12, 12, .55);
  clip-path: none;
  content: "";
  opacity: 1;
}

.home-view .home-module-icon::after { display: none; }

.home-view .home-module-icon img {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), filter .2s ease;
}

/* 主位：帝皇至尊 */
.home-view .home-module-button--core {
  z-index: 3;
  min-height: 84px;
  margin-top: -20px;
  padding: 10px 2px 5px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 226, 152, .18), rgba(150, 96, 30, .1) 55%, rgba(3, 17, 17, .2));
  box-shadow:
    inset 0 0 0 1px rgba(245, 210, 130, .5),
    0 8px 18px rgba(0, 0, 0, .32);
}

.home-view .home-module-button--core::before {
  inset: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: 14px;
  background: radial-gradient(58% 52% at 50% 40%, rgba(255, 216, 130, .42), transparent 72%);
  box-shadow: none;
  opacity: 0;
}

.home-view .home-module-button--core::after {
  right: 20%;
  bottom: 2px;
  left: 20%;
  width: auto;
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #f4d488, transparent);
  box-shadow: 0 0 10px rgba(240, 197, 110, .85);
  opacity: 0;
  transform: none;
}

.home-view .home-module-button--core .home-module-icon { width: 64px; height: 64px; }

.home-view .home-module-button--core .home-module-icon::before {
  inset: 0;
  border: 2px solid rgba(246, 214, 132, .85);
  border-radius: 17px;
  background:
    radial-gradient(70% 60% at 50% 34%, rgba(255, 238, 180, .3), rgba(255, 210, 110, .06) 62%, transparent 74%),
    linear-gradient(180deg, rgba(40, 74, 66, .96), rgba(12, 32, 32, .98));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .45),
    0 0 0 4px rgba(234, 203, 124, .1),
    0 0 22px rgba(240, 197, 110, .5);
  clip-path: none;
}

.home-view .home-module-button--core .home-module-icon img { width: 54px; height: 54px; }
.home-view .home-module-button--core .home-module-icon::after { display: none; }

/* 文案 */
.home-view .home-module-label,
.home-view .home-module-button--core .home-module-label {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  color: #f2e5c6;
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .03em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(28, 14, 10, .95), 0 2px 5px rgba(0, 0, 0, .75);
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.home-view .home-module-button--core .home-module-label {
  color: #ffe6a2;
  font-size: 14px;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 #6b2a1e, 0 0 10px rgba(247, 196, 78, .65);
}

/* 归位：清掉旧版给 2/4 号位的错位 */
.home-view .home-module-button:nth-child(2),
.home-view .home-module-button:nth-child(4) { transform: translateY(0); }

/* 交互态 */
.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible {
  color: #fff3d6;
  background: linear-gradient(180deg, rgba(255, 240, 205, .16), rgba(3, 17, 17, .12));
  box-shadow: inset 0 0 0 1px rgba(234, 203, 124, .34);
  filter: none;
  transform: none;
}

.home-view .home-module-button.is-current {
  color: #ffe9b0;
  background: linear-gradient(180deg, rgba(255, 233, 170, .2), rgba(120, 74, 22, .1) 60%, rgba(3, 17, 17, .16));
  box-shadow: inset 0 0 0 1px rgba(245, 210, 130, .55), 0 4px 12px rgba(0, 0, 0, .26);
  transform: none;
}

.home-view .home-module-button:hover::before,
.home-view .home-module-button:focus-visible::before,
.home-view .home-module-button.is-current::before { opacity: 1; box-shadow: none; }

.home-view .home-module-button.is-current::after { opacity: 1; }

.home-view .home-module-button:hover .home-module-icon,
.home-view .home-module-button:focus-visible .home-module-icon,
.home-view .home-module-button.is-current .home-module-icon { transform: translateY(-4px) scale(1.06); }

.home-view .home-module-button:hover .home-module-icon img,
.home-view .home-module-button:focus-visible .home-module-icon img,
.home-view .home-module-button.is-current .home-module-icon img {
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .75)) brightness(1.12);
}

.home-view .home-module-button--core:hover,
.home-view .home-module-button--core:focus-visible,
.home-view .home-module-button--core.is-current { transform: translateY(-3px); }

.home-view .home-module-button--core.is-current::before { opacity: 1; }
.home-view .home-module-button--core.is-current::after { opacity: 1; }

.home-view .home-module-button:focus-visible { outline: 2px solid #ffe09a; outline-offset: 3px; }

@media (max-width: 520px) {
  .home-view .home-module-dock {
    width: calc(100vw - 10px);
    margin-bottom: calc(6px + var(--safe-bottom));
  }

  .home-view .home-module-nav {
    min-height: 76px;
    gap: 0;
    padding: 11px 5px 7px;
    border-radius: 14px;
  }

  .home-view .home-module-button,
  .home-view .home-module-button--core {
    min-height: 56px;
    gap: 4px;
    padding: 5px 1px 4px;
    border-radius: 10px;
  }

  .home-view .home-module-icon { width: 46px; height: 46px; }
  .home-view .home-module-icon img { width: 39px; height: 39px; }

  .home-view .home-module-button--core {
    min-height: 76px;
    margin-top: -18px;
    padding-top: 9px;
  }

  .home-view .home-module-button--core .home-module-icon { width: 58px; height: 58px; }
  .home-view .home-module-button--core .home-module-icon img { width: 49px; height: 49px; }

  .home-view .home-module-label,
  .home-view .home-module-button--core .home-module-label { font-size: 11.5px; }
  .home-view .home-module-button--core .home-module-label { font-size: 12.5px; }
}

@media (max-width: 360px) {
  .home-view .home-module-label,
  .home-view .home-module-button--core .home-module-label { font-size: 10.5px; letter-spacing: 0; }
  .home-view .home-module-button--core .home-module-label { font-size: 11.5px; }
  .home-view .home-module-icon { width: 42px; height: 42px; }
  .home-view .home-module-icon img { width: 36px; height: 36px; }
}

/* 底部功能菜单最终版：朱砂漆金御案，取消青玉底与独立大格。 */
.home-view .home-module-dock {
  position: fixed;
  top: auto;
  right: auto;
  bottom: calc(25px + var(--safe-bottom));
  left: 50%;
  width: min(680px, calc(100vw - 16px));
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: translateX(-50%);
}

.home-view .home-module-nav {
  --dock-gold: #f1cf7a;
  --dock-gold-deep: #b9792c;
  min-height: 88px;
  gap: 0;
  padding: 12px 11px 8px;
  border: 1px solid rgba(243, 203, 111, .72);
  border-radius: 20px;
  background:
    radial-gradient(88% 90% at 50% -28%, rgba(238, 135, 79, .35), transparent 58%),
    linear-gradient(180deg, rgba(122, 36, 35, .96), rgba(78, 20, 25, .98) 52%, rgba(50, 10, 15, .99));
  box-shadow:
    0 9px 20px rgba(54, 11, 14, .36),
    inset 0 1px 0 rgba(255, 239, 178, .38),
    inset 0 -12px 20px rgba(23, 3, 7, .28);
}

.home-view .home-module-nav::before {
  top: 7px;
  right: 9%;
  left: 9%;
  background: linear-gradient(90deg, transparent, rgba(255, 225, 144, .72) 18%, rgba(255, 225, 144, .92) 50%, rgba(255, 225, 144, .72) 82%, transparent);
  box-shadow: 0 0 8px rgba(241, 183, 73, .42);
}

.home-view .home-module-nav::after {
  top: 4px;
  border-color: rgba(255, 234, 167, .92);
  background: linear-gradient(180deg, #ffe3a1, #bf632e);
  box-shadow: 0 0 9px rgba(255, 187, 77, .68);
}

.home-view .home-module-button,
.home-view .home-module-button--core {
  min-height: 66px;
  gap: 4px;
  padding: 4px 3px 5px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-view .home-module-button:nth-child(1) { --module-accent: #e05b46; }
.home-view .home-module-button:nth-child(2) { --module-accent: #e7a34b; }
.home-view .home-module-button:nth-child(3) { --module-accent: #f2c36b; }
.home-view .home-module-button:nth-child(4) { --module-accent: #d87945; }
.home-view .home-module-button:nth-child(5) { --module-accent: #c95b43; }

.home-view .home-module-button + .home-module-button {
  border-left: 1px solid rgba(255, 219, 139, .16);
}

.home-view .home-module-button::before {
  inset: auto 14% 4px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 203, 112, .92), transparent);
  box-shadow: 0 0 7px rgba(242, 173, 61, .58);
}

.home-view .home-module-button::after { display: none; }

.home-view .home-module-icon {
  width: 50px;
  height: 50px;
}

.home-view .home-module-icon::before {
  border-color: rgba(246, 199, 108, .56);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(137, 50, 37, .95), rgba(69, 14, 20, .98));
  box-shadow: inset 0 1px 0 rgba(255, 233, 177, .34), inset 0 -7px 12px rgba(40, 4, 8, .38), 0 3px 8px rgba(35, 5, 8, .42);
}

.home-view .home-module-button--core {
  min-height: 84px;
  margin-top: -20px;
  padding-top: 9px;
  border: 1px solid rgba(251, 209, 125, .72);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(221, 124, 58, .3), rgba(122, 37, 29, .6) 57%, rgba(72, 12, 18, .72));
  box-shadow: 0 7px 16px rgba(45, 5, 8, .4), inset 0 1px 0 rgba(255, 238, 178, .38);
}

.home-view .home-module-button--core .home-module-icon::before {
  border-color: rgba(255, 221, 139, .96);
  background:
    radial-gradient(70% 62% at 50% 32%, rgba(255, 233, 161, .36), transparent 68%),
    linear-gradient(180deg, rgba(174, 67, 39, .98), rgba(79, 15, 21, .99));
  box-shadow: inset 0 1px 0 rgba(255, 246, 203, .55), 0 0 17px rgba(244, 176, 63, .44);
}

.home-view .home-module-label,
.home-view .home-module-button--core .home-module-label {
  color: #fff0cd;
  text-shadow: 0 1px 0 rgba(69, 10, 13, .96), 0 2px 5px rgba(28, 3, 6, .76);
}

.home-view .home-module-button--core .home-module-label {
  color: #ffe7a3;
  text-shadow: 0 1px 0 #79221b, 0 0 9px rgba(248, 181, 63, .62);
}

.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible,
.home-view .home-module-button.is-current {
  background: rgba(255, 217, 138, .08);
  box-shadow: none;
}

.home-view .home-module-button--core:hover,
.home-view .home-module-button--core:focus-visible,
.home-view .home-module-button--core.is-current {
  background: linear-gradient(180deg, rgba(237, 149, 70, .42), rgba(135, 38, 28, .68) 58%, rgba(73, 10, 16, .78));
  box-shadow: 0 7px 16px rgba(45, 5, 8, .4), inset 0 1px 0 rgba(255, 238, 178, .45);
}

@media (max-width: 520px) {
  .home-view .home-module-dock {
    width: calc(100vw - 10px);
    bottom: calc(25px + var(--safe-bottom));
  }

  .home-view .home-module-nav {
    min-height: 76px;
    padding: 10px 5px 7px;
    border-radius: 16px;
  }

  .home-view .home-module-button,
  .home-view .home-module-button--core {
    min-height: 56px;
    gap: 3px;
    padding: 3px 1px 4px;
  }

  .home-view .home-module-button--core {
    min-height: 76px;
    margin-top: -18px;
    padding-top: 8px;
    border-radius: 13px;
  }

  .home-view .home-module-icon { width: 46px; height: 46px; }
  .home-view .home-module-button--core .home-module-icon { width: 58px; height: 58px; }
}

/* 外层导航去底：让战场背景直接延伸到五个菜单之间。 */
.home-view .home-module-nav {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.home-view .home-module-nav::before,
.home-view .home-module-nav::after { display: none; }

/* 中央主入口彻底去底：只保留图标与名称。 */
.home-view .home-module-button--core,
.home-view .home-module-button--core:hover,
.home-view .home-module-button--core:focus-visible,
.home-view .home-module-button--core.is-current {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.home-view .home-module-button--core::before,
.home-view .home-module-button--core::after {
  display: none !important;
}

/* 主页右侧快捷入口：按功能顺序稳定纵排，GM入口由角色权限控制。 */
.home-view .home-quick-nav {
  position: fixed;
  z-index: 15;
  top: calc(88px + var(--safe-top));
  right: 6px;
  display: flex;
  width: 46px;
  flex-direction: column;
  gap: 6px;
}
.home-view .home-quick-nav > .home-side-market,
.home-view .home-quick-nav > .home-side-gm,
.home-view .home-quick-nav > .home-side-gift,
.home-view .home-quick-nav > .home-side-ranking,
.home-view .home-quick-nav > .home-side-settings {
  position: static;
  display: grid;
  width: 46px;
  min-height: 54px;
  grid-template-rows: 32px auto;
  place-items: center;
  border: 0;
  padding: 2px 0;
  color: #fff4d5;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(55, 18, 14, .95), 0 2px 5px rgba(35, 8, 7, .72);
}
.home-view .home-quick-nav > [hidden] { display: none; }
.home-view .home-quick-nav .home-side-seal {
  display: grid;
  width: 31px;
  height: 31px;
  box-sizing: border-box;
  place-items: center;
  border: 1px solid rgba(255, 224, 144, .82);
  border-radius: 9px;
  color: #ffe6a1;
  background: linear-gradient(145deg, #c84f3b, #7c1f25);
  box-shadow: inset 0 1px 0 rgba(255, 241, 187, .36), 0 2px 5px rgba(50, 13, 12, .5);
  font-family: inherit;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.home-view .home-quick-nav > a > span:last-child,
.home-view .home-quick-nav > button > span:last-child {
  color: currentColor;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* 大招喊话：当前主角头像与台词叠在技能特效上层。 */
.battlefield-skill-callout {
  position: absolute;
  z-index: 20;
  top: 9%;
  left: 4%;
  display: flex;
  width: min(300px, 72%);
  align-items: center;
  opacity: 0;
  filter: drop-shadow(0 5px 10px rgba(14, 7, 28, .5));
  transform: translateX(-24px) scale(.94);
  animation: battlefield-skill-callout-in .28s cubic-bezier(.2, .88, .3, 1.18) .08s forwards;
}

.battlefield-skill-callout-avatar {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(52px, 15%, 72px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid #ffe8a8;
  border-radius: 50%;
  background-color: #4a2469;
  box-shadow: 0 0 0 2px rgba(101, 54, 151, .9), 0 0 18px rgba(132, 104, 255, .86);
}

.battlefield-skill-callout-copy {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 42px;
  margin-left: -8px;
  align-items: center;
  padding: 7px 18px 7px 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 224, 143, .9);
  border-radius: 0 18px 18px 0;
  color: #fff8dc;
  background: linear-gradient(100deg, rgba(48, 21, 84, .94), rgba(80, 42, 137, .86) 66%, rgba(99, 55, 170, .5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 15px rgba(94, 72, 218, .46);
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: clamp(15px, 4.5vw, 20px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.25;
  text-shadow: 0 1px 2px #27123f, 0 0 8px rgba(255, 225, 135, .68);
  white-space: nowrap;
}

.battlefield-skill-callout-copy::after {
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 207, .42), transparent);
  content: "";
  transform: skewX(-18deg);
  animation: battlefield-skill-callout-shine .72s ease-out .28s both;
}

@keyframes battlefield-skill-callout-in {
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes battlefield-skill-callout-shine {
  to { left: 118%; }
}

@media (max-width: 520px) {
  .battlefield-skill-callout { top: 6%; left: 3%; width: min(280px, 92%); }
  .battlefield-skill-callout-avatar { width: clamp(48px, 16vw, 62px); }
  .battlefield-skill-callout-copy { min-height: 38px; padding: 6px 12px 6px 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .battlefield-skill-callout,
  .battlefield-skill-callout-copy::after { animation-duration: .01ms; animation-delay: 0ms; }
}

/* 战场指挥台主题：以专用竖屏背景为环境层，统一顶部、棋盘和快捷入口的材质。 */
.home-view {
  --command-ink: #0b282d;
  --command-ink-deep: #071a20;
  --command-bronze: #c5964e;
  --command-bronze-light: #e5c47a;
  --command-ivory: #f8e8bd;
  --command-cinnabar: #a9473a;
  background-color: var(--command-ink-deep);
}

.home-view::before {
  background-image: url("/images/backgrounds/battlefield-command-background.png?v=20260917-01");
  background-position: center top;
  background-size: cover;
  filter: saturate(1.02) contrast(1.01) brightness(1.08);
}

.home-view::after {
  background:
    linear-gradient(180deg, rgba(5, 25, 30, .18) 0%, rgba(8, 38, 40, .015) 19%, rgba(9, 39, 39, 0) 60%, rgba(4, 19, 23, .2) 100%),
    radial-gradient(ellipse at 50% 42%, transparent 0 34%, rgba(4, 21, 24, .025) 72%, rgba(3, 15, 19, .12) 100%);
}

.home-view .battlefield-shell {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-view .battlefield-header {
  height: 50px;
  min-height: 50px;
  border-bottom: 1px solid rgba(229, 196, 122, .38);
  background-color: var(--command-ink);
  background-image:
    linear-gradient(90deg, rgba(4, 24, 27, .62), rgba(55, 91, 78, .08) 50%, rgba(4, 24, 27, .62)),
    url("/images/backgrounds/battlefield-header-strip-v1.png?v=20260917-01");
  background-position: center, center;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: multiply, normal;
  box-shadow: 0 7px 18px rgba(2, 15, 18, .28), inset 0 1px 0 rgba(255, 239, 181, .24), inset 0 -1px 0 rgba(232, 201, 127, .26);
}

.home-view .battlefield-header::before {
  position: absolute;
  inset: 4px 7px;
  border: 1px solid rgba(229, 196, 122, .2);
  content: "";
  pointer-events: none;
}

.home-view .battlefield-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229, 196, 122, .54) 18%, rgba(229, 196, 122, .78) 50%, rgba(229, 196, 122, .54) 82%, transparent);
  content: "";
  pointer-events: none;
}

.home-view .battlefield-income-button,
.home-view .battlefield-info-button {
  color: rgba(248, 232, 189, .9);
  text-decoration-color: rgba(229, 196, 122, .42);
  text-shadow: 0 1px 2px rgba(2, 16, 19, .8);
}

.home-view .battlefield-income-button:hover,
.home-view .battlefield-income-button:focus-visible,
.home-view .battlefield-info-button:hover,
.home-view .battlefield-info-button:focus-visible {
  color: #fff1c7;
  text-decoration-color: var(--command-bronze-light);
}

.home-view .battlefield-picker {
  border-color: rgba(229, 196, 122, .72);
  color: var(--command-ivory);
  background: rgba(6, 31, 35, .68);
  box-shadow: inset 0 0 0 1px rgba(229, 196, 122, .18), 0 3px 8px rgba(2, 14, 17, .22);
}

.home-view .battlefield-picker::before {
  border-color: rgba(229, 196, 122, .28);
}

.home-view .battlefield-picker strong { color: var(--command-ivory); }
.home-view .battlefield-picker i::before,
.home-view .battlefield-picker i::after { background: var(--command-bronze-light); }

.home-view .battlefield-picker:hover,
.home-view .battlefield-picker:focus-visible {
  border-color: var(--command-bronze-light);
  background: rgba(9, 46, 48, .84);
}

.home-view .battlefield-shell > .battlefield-fury .battlefield-fury-track {
  border: 1px solid rgba(229, 196, 122, .28);
  background: rgba(5, 26, 30, .64);
  box-shadow: 0 1px 5px rgba(1, 14, 17, .28);
}

.home-view .battlefield-shell > .battlefield-fury .battlefield-fury-track i {
  background: linear-gradient(90deg, #a85639, #d9a552 72%, #f1cf7a);
  box-shadow: 0 0 8px rgba(225, 170, 75, .28);
}

.home-view .combat-panel.battlefield-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-view .battlefield-panel::before {
  display: none;
}

.home-view .battlefield-cell,
.home-view .battlefield-cell:nth-child(3n),
.home-view .battlefield-cell:nth-child(4n),
.home-view .battlefield-cell.is-player-zone,
.home-view .battlefield-cell.is-enemy-zone {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-view .battlefield-unit {
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: 0 7px 10px rgba(4, 18, 18, .22);
}

.home-view .battlefield-cell.is-player-zone .battlefield-unit,
.home-view .battlefield-cell.is-enemy-zone .battlefield-unit { background: transparent; }

.home-view .battlefield-health {
  border-color: rgba(238, 211, 155, .54);
  background: rgba(5, 24, 24, .72);
}

.home-view .battlefield-enemy .battlefield-health i { background: #dc9c61; }
.home-view .battlefield-player .battlefield-health i { background: #65bd83; }

.home-view .home-quick-nav {
  top: calc(88px + var(--safe-top));
  right: 10px;
  width: 50px;
  gap: 7px;
  padding: 5px 2px;
  border-left: 1px solid rgba(229, 196, 122, .16);
  background: linear-gradient(180deg, rgba(7, 31, 34, .2), rgba(7, 31, 34, .06));
}

.home-view .home-quick-nav > .home-side-market,
.home-view .home-quick-nav > .home-side-gm,
.home-view .home-quick-nav > .home-side-gift,
.home-view .home-quick-nav > .home-side-ranking,
.home-view .home-quick-nav > .home-side-settings {
  width: 46px;
  min-height: 55px;
  color: rgba(248, 232, 189, .94);
  text-shadow: 0 1px 2px rgba(4, 18, 20, .94);
}

.home-view .home-quick-nav .home-side-seal {
  width: 34px;
  height: 34px;
  border-color: rgba(229, 196, 122, .86);
  border-radius: 8px;
  color: #ffe6a1;
  background:
    linear-gradient(145deg, rgba(171, 76, 57, .98), rgba(101, 32, 34, .98)),
    url("/images/backgrounds/battlefield-header-material-v1.png?v=20260917-01") center / cover;
  box-shadow: inset 0 1px 0 rgba(255, 241, 187, .24), 0 3px 7px rgba(3, 15, 17, .54);
}

.home-view .home-quick-nav > a > span:last-child,
.home-view .home-quick-nav > button > span:last-child {
  color: rgba(248, 232, 189, .92);
  font-size: 11px;
  font-weight: 800;
}

.home-view .home-module-dock {
  bottom: calc(17px + var(--safe-bottom));
  width: min(700px, calc(100vw - 18px));
  min-height: 88px;
  padding: 0 7px 4px;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 23, 26, .14) 42%, rgba(5, 20, 23, .44) 100%);
}

.home-view .home-module-nav {
  min-height: 84px;
  gap: 0;
  padding: 8px 4px 5px;
}

.home-view .home-module-button,
.home-view .home-module-button--core {
  min-height: 72px;
  grid-template-rows: 50px 20px;
  gap: 2px;
  padding: 2px 2px 4px;
  color: rgba(248, 232, 189, .94);
  text-shadow: 0 1px 2px rgba(4, 18, 20, .96), 0 0 5px rgba(3, 17, 19, .7);
}

.home-view .home-module-button + .home-module-button { border-left-color: rgba(229, 196, 122, .18); }

.home-view .home-module-button::before,
.home-view .home-module-button::after { display: none; }

.home-view .home-module-icon,
.home-view .home-module-icon img {
  width: 48px;
  height: 48px;
}

.home-view .home-module-icon {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-view .home-module-icon::before { display: none; }
.home-view .home-module-icon img { filter: drop-shadow(0 3px 3px rgba(3, 16, 18, .64)); }

.home-view .home-module-button--core {
  min-height: 80px;
  grid-template-rows: 57px 20px;
  padding-top: 0;
  color: #ffe5a0;
}

.home-view .home-module-button--core .home-module-icon,
.home-view .home-module-button--core .home-module-icon img {
  width: 55px;
  height: 55px;
}

.home-view .home-module-button--core .home-module-icon { filter: drop-shadow(0 3px 4px rgba(3, 16, 18, .7)); }

.home-view .home-module-label,
.home-view .home-module-button--core .home-module-label {
  color: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(4, 18, 20, .96), 0 0 5px rgba(3, 17, 19, .66);
}

.home-view .home-module-button--core .home-module-label {
  color: #ffe4a0;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(59, 24, 14, .98), 0 0 7px rgba(229, 169, 72, .36);
}

.home-view .home-module-button.is-current::before {
  display: block;
  right: 24%;
  bottom: 0;
  left: 24%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--command-bronze-light), transparent);
  box-shadow: 0 0 7px rgba(229, 196, 122, .54);
}

.home-view .home-module-button:hover,
.home-view .home-module-button:focus-visible,
.home-view .home-module-button.is-current {
  color: #fff1c7;
  background: rgba(7, 33, 35, .16);
  box-shadow: none;
  filter: none;
}

.home-view .home-module-button:hover .home-module-icon img,
.home-view .home-module-button:focus-visible .home-module-icon img,
.home-view .home-module-button.is-current .home-module-icon img {
  filter: drop-shadow(0 3px 4px rgba(3, 16, 18, .72)) brightness(1.08);
}

@media (max-width: 520px) {
  .home-view .battlefield-header { background-position: center 50%; }
  .home-view .home-quick-nav { right: 7px; }
  .home-view .home-module-dock {
    bottom: calc(8px + var(--safe-bottom));
    width: calc(100vw - 12px);
  }
  .home-view .home-module-nav { min-height: 78px; padding: 5px 2px 3px; }
  .home-view .home-module-button,
  .home-view .home-module-button--core {
    min-height: 68px;
    grid-template-rows: 47px 18px;
    padding-bottom: 3px;
  }
  .home-view .home-module-icon,
  .home-view .home-module-icon img { width: 43px; height: 43px; }
  .home-view .home-module-button--core { min-height: 74px; grid-template-rows: 53px 18px; }
  .home-view .home-module-button--core .home-module-icon,
  .home-view .home-module-button--core .home-module-icon img { width: 50px; height: 50px; }
  .home-view .home-module-label { font-size: 12px; line-height: 18px; }
  .home-view .home-module-button--core .home-module-label { font-size: 13px; }
}

/* 首页战场纵深版：把网格、单位和下方地面演出组织成三层空间。 */
.home-view .battlefield-shell {
  overflow: visible;
}

.home-view .combat-panel.battlefield-panel {
  --battlefield-depth-space: clamp(88px, 12vw, 132px);
  position: relative;
  display: grid;
  grid-template-rows: auto;
  align-content: start;
  min-height: calc(var(--battlefield-grid-size) + var(--battlefield-depth-space));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.home-view .battlefield-grid {
  --battlefield-depth-row: clamp(3px, .75vw, 7px);
  --battlefield-grid-horizontal-padding: 24px;
  position: relative;
  z-index: 3;
  grid-template-rows: repeat(5, calc(var(--battlefield-cell-size) + var(--battlefield-depth-row)));
  height: calc((var(--battlefield-cell-size) * 5) + (var(--battlefield-depth-row) * 5) + (var(--battlefield-grid-gap) * 4) + 30px);
  padding-top: clamp(14px, 2.6vw, 22px);
  padding-bottom: 8px;
}

/* 行号代表战场距离：后排、交战线、近身区分别抬高层级。 */
.home-view .battlefield-cell:nth-child(-n + 10) { z-index: 1; }
.home-view .battlefield-cell:nth-child(n + 11):nth-child(-n + 20) { z-index: 2; }
.home-view .battlefield-cell:nth-child(n + 21) { z-index: 3; }
.home-view .battlefield-cell.is-enemy-zone { z-index: 4; }
.home-view .battlefield-cell.is-player-zone {
  z-index: 6;
  padding-top: clamp(10px, 2vw, 18px);
}

.home-view .battlefield-cell.is-player-zone::before,
.home-view .battlefield-cell.is-player-zone::after,
.home-view .battlefield-cell.is-enemy-zone::before {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.home-view .battlefield-cell.is-player-zone::before {
  right: -34%;
  bottom: -13%;
  left: -34%;
  height: 46%;
  border: 1px solid rgba(246, 199, 102, .42);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(224, 158, 61, .16), inset 0 0 8px rgba(244, 200, 103, .12);
  transform: perspective(60px) rotateX(56deg);
}

.home-view .battlefield-cell.is-player-zone::after {
  right: -12%;
  bottom: 1%;
  left: -12%;
  height: 24%;
  border-top: 1px solid rgba(255, 232, 158, .25);
  border-radius: 50%;
  opacity: .78;
  transform: perspective(50px) rotateX(54deg);
}

.home-view .battlefield-cell.is-enemy-zone::before {
  right: 12%;
  bottom: 3%;
  left: 12%;
  height: 18%;
  border: 1px solid rgba(235, 124, 98, .24);
  border-radius: 50%;
  opacity: .72;
  transform: perspective(46px) rotateX(56deg);
}

.home-view .battlefield-cell.is-player-zone .battlefield-unit,
.home-view .battlefield-cell.is-enemy-zone .battlefield-unit {
  z-index: 1;
}

.battlefield-stage-floor {
  position: absolute;
  z-index: 0;
  inset: 35% 0 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 24, 27, 0), rgba(4, 23, 27, .08) 72%, rgba(4, 18, 22, .16));
}

.battlefield-stage-floor::before {
  position: absolute;
  right: 8%;
  bottom: 6%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234, 188, 96, .22) 22%, rgba(234, 188, 96, .42) 50%, rgba(234, 188, 96, .22) 78%, transparent);
  box-shadow: 0 0 8px rgba(226, 165, 70, .18);
  content: "";
}

.battlefield-floor-ring,
.battlefield-floor-trace,
.battlefield-floor-spark {
  position: absolute;
  display: block;
  pointer-events: none;
}

.battlefield-floor-ring {
  left: 50%;
  border: 1px solid rgba(235, 185, 85, .24);
  border-radius: 50%;
  transform: translateX(-50%) perspective(110px) rotateX(58deg);
}

.battlefield-floor-ring--outer {
  bottom: 9%;
  width: min(86%, 440px);
  height: 46%;
  box-shadow: 0 0 12px rgba(233, 173, 69, .11), inset 0 0 12px rgba(233, 173, 69, .08);
  animation: battlefield-floor-ring-breathe 4.8s ease-in-out infinite;
}

.battlefield-floor-ring--inner {
  bottom: 16%;
  width: min(62%, 310px);
  height: 31%;
  border-color: rgba(218, 105, 75, .22);
  animation: battlefield-floor-ring-breathe 4.8s 1.1s ease-in-out infinite reverse;
}

.battlefield-floor-trace {
  opacity: .42;
  background: repeating-linear-gradient(180deg, rgba(240, 193, 100, .24) 0 2px, transparent 2px 10px);
}

.battlefield-floor-trace--axis {
  top: 4%;
  bottom: 13%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.battlefield-floor-trace--cross {
  top: 58%;
  right: 14%;
  left: 14%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(219, 113, 78, .22) 0 2px, transparent 2px 12px);
  transform: rotate(-3deg);
}

.battlefield-floor-spark {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 228, 151, .9);
  box-shadow: 0 0 7px 2px rgba(236, 171, 70, .32);
  opacity: .25;
  animation: battlefield-floor-spark-drift 4.2s ease-in-out infinite;
}

.battlefield-floor-spark--one { top: 26%; left: 34%; }
.battlefield-floor-spark--two { top: 45%; left: 68%; animation-delay: -2.1s; }

/* 顶部只保留一层细线，中央战场名称承担主要视觉焦点。 */
.home-view .battlefield-header {
  border: 1px solid rgba(239, 207, 126, .26);
  border-bottom-color: rgba(239, 207, 126, .32);
  box-shadow: 0 5px 14px rgba(2, 15, 18, .2), inset 0 -1px 0 rgba(255, 239, 181, .12);
}

.home-view .battlefield-header::before {
  display: none;
}

.home-view .battlefield-header::after {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 207, 126, .42) 24%, rgba(239, 207, 126, .65) 50%, rgba(239, 207, 126, .42) 76%, transparent);
  opacity: .7;
}

.home-view .battlefield-picker {
  min-height: 38px;
  border: 1px solid rgba(239, 207, 126, .48);
  background: rgba(5, 28, 32, .48);
  box-shadow: 0 2px 8px rgba(2, 15, 18, .18), inset 0 1px 0 rgba(255, 239, 181, .1);
}

.home-view .battlefield-picker::before {
  display: none;
}

.home-view .battlefield-picker strong {
  color: #fff0bd;
  text-shadow: 0 1px 2px rgba(2, 15, 18, .9), 0 0 9px rgba(241, 196, 102, .22);
}

.home-view .battlefield-income-button,
.home-view .battlefield-info-button {
  min-height: 32px;
  color: rgba(248, 232, 189, .68);
  font-size: 10px;
  font-weight: 700;
  text-decoration-color: rgba(239, 207, 126, .24);
  text-shadow: 0 1px 2px rgba(2, 16, 19, .82);
}

.home-view .battlefield-income-button:hover,
.home-view .battlefield-income-button:focus-visible,
.home-view .battlefield-info-button:hover,
.home-view .battlefield-info-button:focus-visible {
  color: #ffe9ae;
  text-decoration-color: rgba(239, 207, 126, .72);
}

/* 怒气是 HUD 能量线：端点、填充高光和满能量状态共同表达可释放性。 */
.home-view .battlefield-shell > .battlefield-fury {
  z-index: 11;
  overflow: visible;
}

.home-view .battlefield-shell > .battlefield-fury .battlefield-fury-track {
  position: relative;
  height: 6px;
  margin: 0 7px;
  border: 1px solid rgba(239, 207, 126, .34);
  background: rgba(4, 28, 32, .48);
  box-shadow: 0 0 5px rgba(2, 15, 18, .24), inset 0 1px 0 rgba(255, 239, 181, .1);
  overflow: visible;
}

.home-view .battlefield-shell > .battlefield-fury .battlefield-fury-track::before,
.home-view .battlefield-shell > .battlefield-fury .battlefield-fury-track::after {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 9px;
  border: 1px solid rgba(255, 225, 143, .72);
  background: #6e392e;
  box-shadow: 0 0 6px rgba(227, 166, 72, .36);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.home-view .battlefield-shell > .battlefield-fury .battlefield-fury-track::before { left: -4px; }
.home-view .battlefield-shell > .battlefield-fury .battlefield-fury-track::after { right: -4px; }

.home-view .battlefield-shell > .battlefield-fury .battlefield-fury-track i {
  position: relative;
  background: linear-gradient(90deg, #a84939, #df9d4b 72%, #ffe08a);
  box-shadow: 0 0 8px rgba(231, 174, 83, .4), inset 0 1px 0 rgba(255, 248, 202, .5);
}

.home-view .battlefield-shell > .battlefield-fury .battlefield-fury-track i::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  border-radius: inherit;
  background: rgba(255, 252, 214, .95);
  box-shadow: 0 0 6px 1px rgba(255, 218, 105, .8);
  content: "";
}

.home-view .battlefield-fury.is-charging .battlefield-fury-track i {
  animation: battlefield-fury-charge 1.8s ease-in-out infinite;
}

.home-view .battlefield-fury.is-ready .battlefield-fury-track {
  border-color: rgba(255, 222, 125, .76);
  box-shadow: 0 0 9px rgba(241, 184, 72, .34), inset 0 1px 0 rgba(255, 248, 202, .18);
}

.home-view .battlefield-fury.is-ready .battlefield-fury-track::after {
  background: #e4a94f;
  box-shadow: 0 0 9px 2px rgba(255, 209, 92, .68);
  animation: battlefield-fury-ready 1.5s ease-in-out infinite;
}

.home-view .battlefield-fury.is-ready::after {
  position: absolute;
  right: 12px;
  top: 7px;
  color: rgba(255, 227, 151, .86);
  content: "可释放";
  font-family: "Noto Serif CJK SC", "Songti SC", serif;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(2, 15, 18, .92), 0 0 7px rgba(238, 176, 73, .3);
  animation: battlefield-fury-ready 1.5s ease-in-out infinite;
}

/* 临时战果抬到地面层上方，常驻背景仍保持通透。 */
.home-view .battlefield-income-feed {
  bottom: clamp(76px, 10vw, 108px);
}

.home-view .battlefield-star-map-income {
  bottom: clamp(154px, 19vw, 190px);
}

@keyframes battlefield-floor-ring-breathe {
  0%, 100% { opacity: .48; transform: translateX(-50%) perspective(110px) rotateX(58deg) scaleX(.98); }
  50% { opacity: .8; transform: translateX(-50%) perspective(110px) rotateX(58deg) scaleX(1.015); }
}

@keyframes battlefield-floor-spark-drift {
  0%, 100% { opacity: .16; transform: translate3d(0, 0, 0) scale(.72); }
  45% { opacity: .72; transform: translate3d(9px, -8px, 0) scale(1); }
  72% { opacity: .28; transform: translate3d(16px, 3px, 0) scale(.84); }
}

@keyframes battlefield-fury-charge {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

@keyframes battlefield-fury-ready {
  0%, 100% { opacity: .52; }
  50% { opacity: 1; }
}

@media (max-width: 520px) {
  .home-view .battlefield-grid {
    --battlefield-grid-horizontal-padding: 16px;
    --battlefield-depth-row: 4px;
    height: calc((var(--battlefield-cell-size) * 5) + (var(--battlefield-depth-row) * 5) + (var(--battlefield-grid-gap) * 4) + 28px);
    padding-top: 14px;
    padding-bottom: 7px;
  }

  .home-view .battlefield-income-feed { bottom: 74px; }
  .home-view .battlefield-star-map-income { bottom: 148px; }
}

@media (prefers-reduced-motion: reduce) {
  .battlefield-floor-ring,
  .battlefield-floor-spark,
  .home-view .battlefield-fury.is-charging .battlefield-fury-track i,
  .home-view .battlefield-fury.is-ready .battlefield-fury-track::after,
  .home-view .battlefield-fury.is-ready::after {
    animation: none;
  }
}