:root {
  --bg: #fff6e0;
  --bg-soft: #ffedc7;
  --panel: rgba(255, 249, 234, 0.94);
  --panel-solid: #fffaf0;
  --line: rgba(43, 35, 64, 0.16);
  --line-strong: rgba(43, 35, 64, 0.34);
  --text: #2b2340;
  --text-dim: #5a4a72;
  --text-faint: #87769d;
  --jade: #12b886;
  --jade-deep: #0b8a63;
  --gold: #f0a020;
  --gold-bright: #b06a00;
  --violet: #7c5cff;
  --danger: #e0453f;
  --ink: #2b2340;
  --paper: #fff8e6;
  --paper-deep: #ffe9bd;
  --sky: #58c7ff;
  --crimson: #ef4f5f;
  --radius-lg: 6px;
  --radius-md: 4px;
  --radius-sm: 3px;
  --shadow-deep: 6px 6px 0 rgba(43, 35, 64, 0.22);
  --serif: "STKaiti", "KaiTi", "Songti SC", "STSong", "Noto Serif SC", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --pixel-border: 2px solid var(--ink);
  --pixel-shadow: 3px 3px 0 rgba(43, 35, 64, 0.24);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: rgba(111, 214, 176, 0.35) transparent;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::selection {
  background: rgba(111, 214, 176, 0.28);
}

h1,
h2,
h3,
p,
dl,
dd,
dt {
  margin: 0;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

/* ---------- atmosphere ---------- */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #0c1a17 0%, #060b0a 55%, #040706 100%);
}

.atmosphere-image {
  position: absolute;
  inset: -4%;
  background-image: url("./assets/ink-mountain.jpg");
  background-size: cover;
  background-position: center 42%;
  opacity: 0.5;
  filter: saturate(0.72) brightness(0.7) contrast(1.05);
  transform: scale(1.02);
  animation: drift-in 1.6s ease-out both;
}

.atmosphere-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 42% at 24% 12%, rgba(111, 214, 176, 0.16), transparent 70%),
    radial-gradient(48% 36% at 82% 8%, rgba(231, 201, 135, 0.1), transparent 72%);
  mix-blend-mode: screen;
}

.atmosphere-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 8, 7, 0.5) 0%, rgba(4, 8, 7, 0.72) 42%, rgba(4, 8, 7, 0.94) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(5, 12, 10, 0.2), rgba(3, 6, 5, 0.9));
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

@keyframes drift-in {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 0.5;
    transform: scale(1.02);
  }
}

/* ---------- shell ---------- */

.app-shell {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(14px, 2.4vw, 30px) clamp(14px, 3vw, 34px) 34px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  gap: clamp(14px, 2vw, 22px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-seal {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--gold-bright);
  background: linear-gradient(155deg, rgba(231, 201, 135, 0.2), rgba(14, 36, 31, 0.7));
  border: 1px solid rgba(231, 201, 135, 0.35);
  box-shadow: inset 0 0 18px rgba(231, 201, 135, 0.12), 0 8px 22px rgba(0, 0, 0, 0.38);
  text-shadow: 0 0 14px rgba(231, 201, 135, 0.4);
}

.brand-copy h1 {
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.25;
  color: #f2f6ef;
}

.brand-copy p {
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--text-faint);
  margin-top: 2px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10, 22, 20, 0.6);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.mode-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 9px rgba(111, 214, 176, 0.9);
}

.mode-badge.is-local {
  color: #cfc0a3;
  border-color: rgba(231, 201, 135, 0.24);
}

.mode-badge.is-local i {
  background: var(--gold);
  box-shadow: 0 0 9px rgba(231, 201, 135, 0.85);
}

.mode-badge.is-offline {
  color: #c9b8a0;
}

.mode-badge.is-offline i {
  background: var(--danger);
  box-shadow: 0 0 9px rgba(224, 139, 109, 0.8);
}

.icon-btn {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(10, 22, 20, 0.6);
  color: var(--text-dim);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.icon-btn:hover {
  color: var(--gold-bright);
  border-color: rgba(231, 201, 135, 0.32);
}

.icon-btn .icon-off {
  display: none;
}

.icon-btn[aria-pressed="false"] .icon-on {
  display: none;
}

.icon-btn[aria-pressed="false"] .icon-off {
  display: block;
}

/* ---------- layout ---------- */

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas:
    "character character"
    "map cultivate";
  gap: clamp(14px, 1.8vw, 20px);
  align-items: stretch;
  flex: 1;
}

.character-card {
  grid-area: character;
}

.map-card {
  grid-area: map;
}

.cultivate-card {
  grid-area: cultivate;
}

.map-card,
.cultivate-card,
.character-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(13, 30, 26, 0.82), rgba(6, 14, 12, 0.9));
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.map-card::before,
.cultivate-card::before,
.character-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(80% 50% at 50% 0%, rgba(111, 214, 176, 0.07), transparent 70%);
}

.map-card {
  display: flex;
  flex-direction: column;
}

/* ---------- character ---------- */

.character-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.75fr);
  grid-template-areas:
    "identity attrs"
    "elements elements";
  align-items: center;
  gap: 12px clamp(14px, 1.8vw, 22px);
  padding: 14px clamp(14px, 2vw, 22px) 13px;
}

.char-identity {
  grid-area: identity;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.char-copy {
  min-width: 0;
}

.char-copy h2 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #eef6ec;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.char-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  min-width: 0;
}

.char-sub i {
  width: 3px;
  height: 3px;
  flex: none;
  border-radius: 50%;
  background: rgba(167, 184, 173, 0.45);
}

#charRealm {
  color: var(--gold);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.realm-chip {
  padding: 0;
  border: 0;
  border-bottom: 1px dashed rgba(231, 201, 135, 0.45);
  background: none;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

#charRealm.realm-chip {
  color: var(--gold);
  font-size: 10.5px;
  letter-spacing: 0.12em;
}

.realm-chip:hover {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

.realm-chip:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.char-sub .device-label {
  min-width: 0;
}

.char-detail {
  flex: none;
  margin-left: auto;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(231, 201, 135, 0.26);
  background: rgba(231, 201, 135, 0.06);
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.char-detail:hover {
  background: rgba(231, 201, 135, 0.14);
  border-color: rgba(231, 201, 135, 0.44);
  color: var(--gold-bright);
}

.attr-panel {
  grid-area: attrs;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.attr-cell {
  min-width: 0;
  padding: 7px 9px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.16));
}

.attr-cell span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  white-space: nowrap;
}

.attr-cell i {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--attr-color, #e7c987);
  box-shadow: 0 0 7px var(--attr-color, #e7c987);
}

.attr-cell b {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 600;
  color: #eaf3ea;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.character-card .player-elements {
  grid-area: elements;
  padding: 6px 9px;
}

.avatar-md {
  width: 48px;
  height: 48px;
  font-size: 21px;
}

/* ---------- map ---------- */

.map-stage {
  position: relative;
  flex: 1;
  min-height: clamp(280px, 40vh, 440px);
  overflow: hidden;
  background: #040a09;
  cursor: grab;
  touch-action: none;
}

.map-stage:active {
  cursor: grabbing;
}

#mapCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.map-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  pointer-events: none;
  z-index: 3;
}

.coord-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(178, 214, 195, 0.14);
  background: rgba(4, 11, 10, 0.6);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  min-width: 0;
}

.coord-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

.coord-value {
  font-family: var(--serif);
  font-size: 13px;
  color: #dbe9dc;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

.coord-guide {
  margin-top: 1px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(207, 224, 212, 0.4);
}

.map-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.map-btn.icon-only {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
}

.map-btn.icon-only svg {
  width: 16px;
  height: 16px;
}

.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(231, 201, 135, 0.3);
  background: rgba(4, 11, 10, 0.66);
  color: var(--gold-bright);
  font-size: 12px;
  letter-spacing: 0.12em;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.map-btn svg {
  width: 15px;
  height: 15px;
}

.map-btn:hover {
  background: rgba(231, 201, 135, 0.12);
  box-shadow: 0 0 20px rgba(231, 201, 135, 0.16);
}

.map-btn:active {
  transform: scale(0.97);
}

.map-btn.is-scanning svg {
  animation: spin 1.4s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.north-mark {
  position: absolute;
  top: 68px;
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: var(--serif);
  font-size: 10px;
  color: rgba(231, 201, 135, 0.62);
  letter-spacing: 0.1em;
  pointer-events: none;
  z-index: 2;
}

.north-mark i {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, rgba(231, 201, 135, 0.6), transparent);
}

.select-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 30px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px 9px 13px;
  border-radius: 12px;
  border: 1px solid rgba(231, 201, 135, 0.34);
  background: rgba(5, 12, 10, 0.9);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  animation: select-in 0.18s ease-out;
}

.select-bar[hidden] {
  display: none;
}

@keyframes select-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.select-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.select-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

.select-copy b {
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: #eaf3ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-copy small {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-attribution {
  position: absolute;
  right: 10px;
  bottom: 5px;
  z-index: 2;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: rgba(207, 224, 212, 0.34);
  pointer-events: none;
}

.map-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(4, 9, 8, 0.74);
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.18em;
  backdrop-filter: blur(5px);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.map-loading.is-done {
  opacity: 0;
  visibility: hidden;
}

.loading-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(111, 214, 176, 0.18);
  border-top-color: var(--jade);
  border-right-color: rgba(231, 201, 135, 0.7);
  animation: spin 1.1s linear infinite;
  box-shadow: 0 0 22px rgba(111, 214, 176, 0.16);
}

/* ---------- grid card ---------- */

.grid-card {
  position: relative;
  padding: 15px clamp(15px, 2vw, 20px) 17px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 20, 17, 0.9), rgba(5, 13, 11, 0.94));
}

.grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.grid-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.grid-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 12px currentColor;
  color: var(--jade);
  transition: background 0.4s ease, color 0.4s ease;
}

.grid-level {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.14em;
  color: #eef4ea;
}

.grid-name {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--text-faint);
  letter-spacing: 0.14em;
  padding-left: 9px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-mult {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(231, 201, 135, 0.22);
  background: rgba(231, 201, 135, 0.06);
  white-space: nowrap;
}

.grid-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.el-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  border: 1px solid rgba(178, 214, 195, 0.12);
  background: rgba(255, 255, 255, 0.025);
  font-size: 11px;
  color: var(--text-dim);
}

.el-chip i {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-style: normal;
  font-family: var(--serif);
  font-size: 10px;
  color: #08110e;
  background: currentColor;
  flex: none;
}

.el-chip i span {
  color: #08110e;
}

.el-chip b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #dce8de;
}

.grid-desc {
  margin-top: 9px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-faint);
  letter-spacing: 0.03em;
}

/* ---------- cultivate ---------- */

.cultivate-card {
  padding: clamp(17px, 2.4vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.realm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.eyebrow {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.realm-head h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-top: 3px;
  color: #f4f7ee;
  text-shadow: 0 0 26px rgba(111, 214, 176, 0.22);
}

.realm-seal {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 19px;
  color: rgba(231, 201, 135, 0.9);
  border: 1px solid rgba(231, 201, 135, 0.3);
  background: radial-gradient(circle at 35% 30%, rgba(231, 201, 135, 0.16), rgba(8, 20, 17, 0.6));
  box-shadow: inset 0 0 16px rgba(231, 201, 135, 0.1);
  letter-spacing: 0;
}

.exp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin-top: 2px;
}

.exp-value {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.exp-track {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(178, 214, 195, 0.08);
  overflow: hidden;
  margin-top: -8px;
}

.exp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f8a72, #6fd6b0 55%, #e7c987);
  box-shadow: 0 0 16px rgba(111, 214, 176, 0.5);
  transition: width 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.exp-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-100%);
  animation: exp-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes exp-shine {
  0%,
  55% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(240%);
  }
}

.realm-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  margin-top: -6px;
}

.auto-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.auto-state::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(167, 184, 173, 0.4);
}

.auto-state.is-on {
  color: var(--jade);
}

.auto-state.is-on::before {
  background: var(--jade);
  box-shadow: 0 0 8px var(--jade);
  animation: breathe 2.4s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

.cultivate-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 34px);
  padding: 4px 0 2px;
  margin: auto 0;
}

.absorb-wrap {
  position: relative;
  flex: none;
}

.absorb-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(138px, 20vw, 158px);
  height: clamp(138px, 20vw, 158px);
  border-radius: 50%;
  border: 1px solid rgba(231, 201, 135, 0.32);
  background:
    radial-gradient(circle at 38% 30%, rgba(111, 214, 176, 0.28), transparent 58%),
    radial-gradient(circle at 50% 65%, rgba(231, 201, 135, 0.16), transparent 66%),
    linear-gradient(160deg, rgba(15, 40, 34, 0.95), rgba(5, 14, 12, 0.98));
  box-shadow:
    0 0 0 6px rgba(111, 214, 176, 0.045),
    0 18px 44px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(111, 214, 176, 0.1);
  isolation: isolate;
  transition: transform 0.18s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.absorb-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 7px rgba(111, 214, 176, 0.07),
    0 22px 50px rgba(0, 0, 0, 0.6),
    inset 0 0 48px rgba(111, 214, 176, 0.16);
}

.absorb-btn:active:not(:disabled) {
  transform: scale(0.975);
}

.absorb-btn:disabled {
  opacity: 0.72;
}

.absorb-btn:focus-visible,
.auto-btn:focus-visible,
.action-btn:focus-visible,
.map-btn:focus-visible,
.icon-btn:focus-visible,
.link-btn:focus-visible,
.wide-btn:focus-visible,
.primary-btn:focus-visible,
.close-btn:focus-visible {
  outline: 2px solid rgba(231, 201, 135, 0.6);
  outline-offset: 3px;
}

.absorb-halo {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 214, 176, 0.22), transparent 62%);
  filter: blur(14px);
  z-index: -1;
  animation: halo-breathe 4.6s ease-in-out infinite;
}

@keyframes halo-breathe {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.05);
  }
}

.absorb-ring {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px dashed rgba(231, 201, 135, 0.34);
  animation: spin 26s linear infinite;
  pointer-events: none;
}

.absorb-ring::before,
.absorb-ring::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(231, 201, 135, 0.9);
}

.absorb-ring::before {
  top: -2px;
  left: 50%;
}

.absorb-ring::after {
  bottom: -2px;
  left: 50%;
}

.absorb-cooldown {
  --p: 0turn;
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(rgba(231, 201, 135, 0.5) var(--p), rgba(255, 255, 255, 0.04) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.absorb-btn.cooling .absorb-cooldown {
  opacity: 1;
}

.absorb-btn.cooling .absorb-ring {
  animation-duration: 60s;
  opacity: 0.4;
}

.absorb-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  text-align: center;
}

.absorb-verb {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 32px);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: #f6f2e2;
  text-shadow: 0 0 24px rgba(231, 201, 135, 0.35);
}

.absorb-sub {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: rgba(231, 201, 135, 0.72);
  font-variant-numeric: tabular-nums;
}

.absorb-btn.is-pulsing .absorb-halo {
  animation: absorb-burst 0.75s ease-out;
}

@keyframes absorb-burst {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0.25;
  }
}

.float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}

.float-num {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, 0);
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  text-shadow: 0 0 16px rgba(231, 201, 135, 0.6), 0 2px 8px rgba(0, 0, 0, 0.8);
  animation: float-up 1.5s ease-out forwards;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.float-num.is-item {
  color: #a9f0d4;
  font-size: 13px;
  text-shadow: 0 0 14px rgba(111, 214, 176, 0.7), 0 2px 8px rgba(0, 0, 0, 0.8);
}

@keyframes float-up {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.9);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.04);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -74px) scale(1);
  }
}

.auto-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.022);
  color: var(--text-dim);
  min-width: 82px;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.auto-btn:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.auto-figure {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
}

.auto-figure svg {
  width: 38px;
  height: 38px;
  overflow: visible;
  animation: meditate-breathe 4.4s ease-in-out infinite;
}

.auto-halo {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.22;
  stroke-width: 0.8;
  stroke-dasharray: 2 5;
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 22s linear infinite;
}

.auto-halo-inner {
  stroke-opacity: 0.14;
  stroke-dasharray: 1 4;
  animation: spin 14s linear infinite reverse;
}

.auto-body {
  fill: currentColor;
  fill-opacity: 0.55;
  stroke: currentColor;
  stroke-width: 0.6;
  stroke-linejoin: round;
}

.auto-bun {
  fill: currentColor;
  fill-opacity: 0.75;
}

.auto-limbs {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-opacity: 0.6;
}

@keyframes meditate-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1.2px) scale(1.02);
  }
}

.auto-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}

.auto-copy b {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.16em;
  font-weight: 500;
}

.auto-copy small {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-top: 2px;
}

.auto-btn[aria-pressed="true"] {
  color: #dff7ea;
  border-color: rgba(111, 214, 176, 0.42);
  background: rgba(111, 214, 176, 0.1);
  box-shadow: 0 0 26px rgba(111, 214, 176, 0.14), inset 0 0 22px rgba(111, 214, 176, 0.08);
}

.auto-btn[aria-pressed="true"] .auto-figure {
  color: var(--jade);
  filter: drop-shadow(0 0 9px rgba(111, 214, 176, 0.5));
}

.auto-btn[aria-pressed="true"] .auto-halo {
  stroke-opacity: 0.7;
  animation-duration: 8s;
}

.auto-btn[aria-pressed="true"] .auto-halo-inner {
  stroke-opacity: 0.45;
  animation-duration: 5s;
}

.auto-btn[aria-pressed="true"] .auto-body {
  fill-opacity: 0.9;
}

.action-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.action-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.12em;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.16s ease;
  overflow: hidden;
}

.action-btn svg {
  width: 19px;
  height: 19px;
}

.action-btn:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.055);
}

.action-btn:active {
  transform: scale(0.98);
}

.action-btn.breakthrough {
  color: var(--gold-bright);
  border-color: rgba(231, 201, 135, 0.28);
}

.action-btn.breakthrough:hover {
  background: rgba(231, 201, 135, 0.1);
}

.action-btn.breakthrough.is-ready {
  border-color: rgba(231, 201, 135, 0.6);
  background: rgba(231, 201, 135, 0.12);
  animation: ready-glow 2.6s ease-in-out infinite;
}

@keyframes ready-glow {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(231, 201, 135, 0);
  }
  50% {
    box-shadow: 0 0 24px rgba(231, 201, 135, 0.24);
  }
}

.action-count {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.action-glow {
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 70%;
  background: radial-gradient(circle, rgba(231, 201, 135, 0.22), transparent 68%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.action-btn.breakthrough.is-ready .action-glow {
  opacity: 1;
}

/* ---------- player ---------- */

.player-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 7px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(178, 214, 195, 0.1);
  background: rgba(0, 0, 0, 0.16);
}

.player-elements .el-chip {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.03);
  padding-right: 4px;
}

.player-elements .el-chip b {
  min-width: 2.4em;
  text-align: right;
}

.player-elements .el-chip span {
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.device-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  color: var(--avatar-color, #e7c987);
  border: 1px solid var(--avatar-color, #e7c987);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.18), rgba(7, 15, 13, 0.94) 70%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.03), 0 6px 16px rgba(0, 0, 0, 0.45);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  line-height: 1;
  user-select: none;
}

.avatar-lg {
  width: 66px;
  height: 66px;
  font-size: 27px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.03), 0 10px 26px rgba(0, 0, 0, 0.5);
}

.link-btn {
  color: var(--text-faint);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.link-btn:hover {
  color: var(--gold);
  border-bottom-color: rgba(231, 201, 135, 0.4);
}

.link-btn.danger {
  color: rgba(224, 139, 109, 0.72);
}

.link-btn.danger:hover {
  color: var(--danger);
  border-bottom-color: rgba(224, 139, 109, 0.5);
}

.site-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(167, 184, 173, 0.42);
}

.site-foot i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(167, 184, 173, 0.3);
}

/* ---------- boot ---------- */

.boot-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: radial-gradient(circle at 50% 42%, #0b1a16 0%, #040807 62%);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.boot-veil.is-done {
  opacity: 0;
  visibility: hidden;
}

.boot-seal {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 32px;
  color: var(--gold-bright);
  border: 1px solid rgba(231, 201, 135, 0.32);
  box-shadow: 0 0 44px rgba(231, 201, 135, 0.16), inset 0 0 22px rgba(231, 201, 135, 0.1);
  animation: seal-breathe 3s ease-in-out infinite;
}

@keyframes seal-breathe {
  0%,
  100% {
    box-shadow: 0 0 30px rgba(231, 201, 135, 0.12), inset 0 0 18px rgba(231, 201, 135, 0.08);
  }
  50% {
    box-shadow: 0 0 54px rgba(231, 201, 135, 0.24), inset 0 0 26px rgba(231, 201, 135, 0.14);
  }
}

.boot-veil p {
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--text-faint);
}

.boot-line {
  width: 96px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 201, 135, 0.6), transparent);
  position: relative;
  overflow: hidden;
}

.boot-line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 30%;
  background: rgba(244, 231, 195, 0.9);
  filter: blur(1px);
  animation: boot-scan 1.5s ease-in-out infinite;
}

@keyframes boot-scan {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* ---------- realm flash ---------- */

.realm-flash {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.realm-flash.is-active {
  opacity: 1;
  visibility: visible;
  animation: flash-veil 2.6s ease-out forwards;
}

@keyframes flash-veil {
  0% {
    background: rgba(244, 231, 195, 0.28);
  }
  18% {
    background: rgba(8, 18, 15, 0.72);
  }
  80% {
    background: rgba(8, 18, 15, 0.72);
  }
  100% {
    background: rgba(8, 18, 15, 0);
  }
}

.flash-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 80px 24px rgba(231, 201, 135, 0.5);
  animation: flash-core 2.4s ease-out forwards;
}

@keyframes flash-core {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  60% {
    transform: scale(26);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.flash-copy {
  position: relative;
  text-align: center;
  animation: flash-copy 2.4s ease-out forwards;
}

.flash-copy small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.6em;
  color: rgba(244, 231, 195, 0.7);
  margin-bottom: 6px;
  text-indent: 0.6em;
}

.flash-copy strong {
  font-family: var(--serif);
  font-size: clamp(32px, 7vw, 48px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: #fdf8e8;
  text-shadow: 0 0 40px rgba(231, 201, 135, 0.7);
}

@keyframes flash-copy {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
  22% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  76% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) scale(1.02);
  }
}

/* ---------- toasts ---------- */

.toast-stack {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(92vw, 420px);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(178, 214, 195, 0.18);
  background: rgba(6, 16, 13, 0.94);
  color: #dce8de;
  font-size: 12px;
  letter-spacing: 0.05em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  animation: toast-in 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.toast::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 8px var(--jade);
}

.toast.is-error {
  border-color: rgba(224, 139, 109, 0.3);
  color: #f0d4c7;
}

.toast.is-error::before {
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger);
}

.toast.is-gold {
  border-color: rgba(231, 201, 135, 0.3);
  color: #f6eed6;
}

.toast.is-gold::before {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

.toast.is-out {
  animation: toast-out 0.3s ease forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
}

/* ---------- dialogs ---------- */

dialog {
  color: var(--text);
}

.panel-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: min(86vh, 720px);
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(178, 214, 195, 0.2);
  background: linear-gradient(168deg, #0c1a17, #060f0d 72%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  overflow-y: auto;
  overscroll-behavior: contain;
}

dialog::backdrop {
  background: rgba(2, 5, 4, 0.72);
  backdrop-filter: blur(5px);
}

dialog[open] {
  animation: dialog-in 0.26s cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.panel-head h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.12em;
  margin-top: 3px;
}

.close-btn {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  flex: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.close-btn:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.bag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.bag-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 11px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(178, 214, 195, 0.14);
  background: rgba(255, 255, 255, 0.028);
  text-align: center;
}

.bag-item .item-icon {
  width: 34px;
  height: 34px;
}

.bag-item .item-name {
  font-size: 11.5px;
  color: #dce8de;
  letter-spacing: 0.04em;
}

.bag-item .item-rarity {
  font-size: 9px;
  letter-spacing: 0.14em;
}

.bag-item .item-count {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.item-icon {
  display: block;
  filter: drop-shadow(0 0 10px rgba(231, 201, 135, 0.28));
}

.bag-empty {
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  padding: 20px 0;
}

.panel-note {
  margin-top: 16px;
  font-size: 10.5px;
  line-height: 1.75;
  color: var(--text-faint);
  letter-spacing: 0.03em;
}

.profile-hero {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.18));
}

.hero-copy {
  min-width: 0;
}

.hero-copy h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #eef6ec;
}

.hero-copy p {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold);
}

.hero-id {
  display: block;
  margin-top: 5px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.stat-cell {
  padding: 10px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.stat-cell span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}

.stat-cell b {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  color: #eaf3ea;
  font-variant-numeric: tabular-nums;
}

.stat-cell small {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.4;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.element-map {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--line);
}

.element-stat,
.element-total {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: rgba(9, 20, 17, 0.96);
  font-size: 11px;
}

.element-stat i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.element-stat span {
  color: var(--text-dim);
}

.element-stat b,
.element-total b {
  margin-left: auto;
  color: #eaf3ea;
  font-variant-numeric: tabular-nums;
}

.element-total {
  background: rgba(6, 15, 13, 0.98);
  color: var(--text-faint);
  letter-spacing: 0.12em;
}

.profile-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 14px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--line);
}

.profile-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 13px;
  background: rgba(9, 20, 17, 0.96);
}

.profile-list dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  flex: none;
}

.profile-list dd {
  font-size: 12px;
  color: #dce8de;
  text-align: right;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

.profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 16px;
}

.wide-btn {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.1em;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.wide-btn:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
}

.profile-links {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* ---------- offline ---------- */

.offline-dialog {
  text-align: center;
  padding-top: 30px;
}

.offline-seal {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--gold-bright);
  border: 1px solid rgba(231, 201, 135, 0.32);
  box-shadow: 0 0 34px rgba(231, 201, 135, 0.18), inset 0 0 18px rgba(231, 201, 135, 0.1);
}

.offline-dialog h2 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0.14em;
  margin-top: 4px;
}

.offline-copy {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

.offline-reward {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1px;
  margin-top: 18px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
}

.reward-main,
.reward-side {
  padding: 16px 12px;
  background: rgba(9, 20, 17, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.reward-main span,
.reward-side span {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}

.reward-main strong {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--gold-bright);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(231, 201, 135, 0.4);
}

.reward-side b {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: #dce8de;
  line-height: 1.9;
}

.offline-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}

.offline-items .el-chip {
  border-color: rgba(231, 201, 135, 0.22);
}

.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 12px 26px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(231, 201, 135, 0.42);
  background: linear-gradient(160deg, rgba(231, 201, 135, 0.2), rgba(231, 201, 135, 0.08));
  color: #fdf6e0;
  font-size: 13px;
  letter-spacing: 0.18em;
  box-shadow: 0 10px 26px rgba(231, 201, 135, 0.12);
  transition: background 0.2s ease, transform 0.16s ease, box-shadow 0.2s ease;
}

.primary-btn:hover:not(:disabled) {
  background: linear-gradient(160deg, rgba(231, 201, 135, 0.3), rgba(231, 201, 135, 0.12));
  box-shadow: 0 12px 32px rgba(231, 201, 135, 0.2);
}

.primary-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.primary-btn:disabled {
  opacity: 0.5;
}

.primary-btn.small {
  margin-top: 0;
  min-height: 38px;
  padding: 8px 18px;
  font-size: 12px;
}

/* ---------- wallet ---------- */

.wallet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}

.stone-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(231, 201, 135, 0.24);
  background: rgba(231, 201, 135, 0.07);
  color: var(--gold);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.stone-chip svg {
  width: 14px;
  height: 14px;
}

.stone-chip b {
  color: var(--gold-bright);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tech-best {
  color: var(--text-faint);
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tech-best b {
  color: var(--jade);
  font-weight: 500;
}

/* ---------- techniques ---------- */

.tech-dialog {
  width: min(560px, calc(100vw - 28px));
}

.tech-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 14px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
}

.tech-tab {
  padding: 8px;
  border-radius: 999px;
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: 0.16em;
  transition: color 0.2s ease, background 0.2s ease;
}

.tech-tab.is-active {
  background: rgba(111, 214, 176, 0.14);
  color: var(--jade);
}

.tech-panels {
  margin-top: 14px;
}

.tech-panel[hidden] {
  display: none;
}

.tech-summary {
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-faint);
  letter-spacing: 0.03em;
}

.shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.shop-filters {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.filter-chip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.filter-chip.is-active {
  border-color: rgba(231, 201, 135, 0.5);
  color: var(--gold);
  background: rgba(231, 201, 135, 0.08);
}

.shop-stone {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.shop-stone b {
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.tech-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(178, 214, 195, 0.13);
  background: rgba(255, 255, 255, 0.025);
}

.tech-item.is-locked {
  opacity: 0.72;
}

.tier-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--tier-color, var(--gold));
  background: rgba(255, 255, 255, 0.04);
  color: var(--tier-color, var(--gold));
  font-family: var(--serif);
  font-size: 17px;
}

.tech-info {
  flex: 1;
  min-width: 0;
}

.tech-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.tech-line b {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #e9f1e7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tech-dmg {
  flex: none;
  font-size: 10.5px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.tech-sub,
.tech-req {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.tech-req em {
  font-style: normal;
  margin-left: 6px;
  color: var(--jade);
}

.tech-req em.is-locked {
  color: rgba(224, 139, 109, 0.9);
}

.tech-action {
  flex: none;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(231, 201, 135, 0.32);
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.tech-action:hover:not(:disabled) {
  border-color: rgba(231, 201, 135, 0.6);
  background: rgba(231, 201, 135, 0.1);
}

.tech-action:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.tech-empty {
  padding: 22px 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.tech-empty[hidden] {
  display: none;
}

.trial-card {
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
}

.trial-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

.trial-head b {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
}

.trial-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.trial-stat {
  flex: 1;
  min-width: 92px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
}

.trial-stat span {
  display: block;
  font-size: 9.5px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
}

.trial-stat b {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  color: #e4efe6;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trial-copy {
  margin: 12px 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-faint);
}

.trial-copy strong {
  color: var(--gold);
  font-weight: 500;
}

#npcBtn {
  width: 100%;
}

.trial-log {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(178, 214, 195, 0.12);
  background: rgba(0, 0, 0, 0.22);
  max-height: 34vh;
  overflow-y: auto;
}

.trial-log[hidden] {
  display: none;
}

.trial-line {
  font-size: 10.5px;
  line-height: 1.95;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.trial-line.is-win {
  color: var(--jade);
}

.trial-line.is-lose {
  color: var(--danger);
}

.trial-line.is-crit {
  color: var(--gold-bright);
}

.trial-line strong {
  color: var(--gold-bright);
  font-weight: 500;
}

/* ---------- coordinate form ---------- */

.coord-form {
  margin-top: 16px;
  padding: 13px;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(178, 214, 195, 0.18);
  background: rgba(0, 0, 0, 0.15);
}

.form-title {
  margin-bottom: 9px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}

.coord-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.coord-inputs label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

.coord-inputs input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.coord-inputs input:focus {
  outline: none;
  border-color: rgba(111, 214, 176, 0.55);
}

.coord-form .wide-btn {
  width: 100%;
  margin-top: 9px;
  border-color: rgba(111, 214, 176, 0.3);
  color: var(--jade);
}

.coord-hint {
  margin-top: 7px;
  font-size: 9.5px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ---------- xianxia ornaments ---------- */

.spirit-motes {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.spirit-motes span {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(111, 214, 176, 0.8);
  box-shadow: 0 0 9px rgba(111, 214, 176, 0.75);
  opacity: 0;
  animation: mote-rise 24s linear infinite;
}

.spirit-motes span:nth-child(3n) {
  background: rgba(231, 201, 135, 0.75);
  box-shadow: 0 0 9px rgba(231, 201, 135, 0.7);
}

.spirit-motes span:nth-child(1) { left: 5%; animation-delay: -3s; animation-duration: 27s; }
.spirit-motes span:nth-child(2) { left: 14%; animation-delay: -12s; animation-duration: 31s; width: 2px; height: 2px; }
.spirit-motes span:nth-child(3) { left: 23%; animation-delay: -7s; animation-duration: 23s; }
.spirit-motes span:nth-child(4) { left: 33%; animation-delay: -18s; animation-duration: 34s; width: 2px; height: 2px; }
.spirit-motes span:nth-child(5) { left: 42%; animation-delay: -1s; animation-duration: 26s; }
.spirit-motes span:nth-child(6) { left: 51%; animation-delay: -15s; animation-duration: 29s; width: 2px; height: 2px; }
.spirit-motes span:nth-child(7) { left: 60%; animation-delay: -9s; animation-duration: 25s; }
.spirit-motes span:nth-child(8) { left: 68%; animation-delay: -21s; animation-duration: 33s; width: 2px; height: 2px; }
.spirit-motes span:nth-child(9) { left: 76%; animation-delay: -5s; animation-duration: 22s; }
.spirit-motes span:nth-child(10) { left: 84%; animation-delay: -14s; animation-duration: 30s; width: 2px; height: 2px; }
.spirit-motes span:nth-child(11) { left: 91%; animation-delay: -19s; animation-duration: 28s; }
.spirit-motes span:nth-child(12) { left: 97%; animation-delay: -8s; animation-duration: 24s; width: 2px; height: 2px; }

@keyframes mote-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.6);
  }
  10% {
    opacity: 0.7;
  }
  55% {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
    transform: translate3d(26px, -96vh, 0) scale(1);
  }
}

.map-card::after,
.cultivate-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 210px;
  height: 26px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 30'%3E%3Cg fill='none' stroke='%23e7c987' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M0 1h220' stroke-opacity='.16'/%3E%3Cpath d='M72 1v5.5c0 5 4.5 9 9.5 9h57c5 0 9.5-4 9.5-9V1' stroke-opacity='.5'/%3E%3Cpath d='M81 1v3.6c0 3 2.6 5.4 5.8 5.4h46.4c3.2 0 5.8-2.4 5.8-5.4V1' stroke-opacity='.3'/%3E%3Ccircle cx='110' cy='23' r='2.2' stroke-opacity='.55'/%3E%3Cpath d='M110 25.5v3.2' stroke-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") center top / contain no-repeat;
  opacity: 0.75;
  pointer-events: none;
  z-index: 4;
}

.grid-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 64px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(231, 201, 135, 0.5), transparent);
  pointer-events: none;
}

.brand-seal {
  position: relative;
}

.brand-seal::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 15px;
  border: 1px dashed rgba(231, 201, 135, 0.22);
  animation: spin 30s linear infinite;
  pointer-events: none;
}

.mode-badge i {
  animation: breathe 3.4s ease-in-out infinite;
}

.avatar {
  position: relative;
  isolation: isolate;
}

.avatar::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed currentColor;
  opacity: 0.32;
  animation: spin 28s linear infinite;
  pointer-events: none;
}

.avatar::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  box-shadow: 0 0 18px currentColor;
  opacity: 0.18;
  pointer-events: none;
}

.char-copy h2 {
  text-shadow: 0 0 22px rgba(231, 201, 135, 0.14);
}

.attr-panel {
  border-left: 1px solid rgba(231, 201, 135, 0.12);
  padding-left: clamp(12px, 1.4vw, 18px);
}

.attr-cell {
  transition: border-color 0.25s ease, background 0.25s ease;
}

.attr-cell:hover {
  border-color: rgba(231, 201, 135, 0.3);
  background: rgba(255, 255, 255, 0.055);
}

.attr-cell:hover b {
  color: var(--attr-color, var(--gold));
  text-shadow: 0 0 14px currentColor;
}

.attr-cell i {
  animation: breathe 4.2s ease-in-out infinite;
}

.el-chip i {
  animation: breathe 5.4s ease-in-out infinite;
}

.grid-dot {
  animation: breathe 3.2s ease-in-out infinite;
}

.realm-head h2 {
  animation: realm-shimmer 6.5s ease-in-out infinite;
}

@keyframes realm-shimmer {
  0%,
  100% {
    text-shadow: 0 0 18px rgba(111, 214, 176, 0.18);
  }
  50% {
    text-shadow: 0 0 30px rgba(111, 214, 176, 0.34), 0 0 12px rgba(231, 201, 135, 0.18);
  }
}

.realm-seal {
  position: relative;
}

.realm-seal::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(231, 201, 135, 0.24);
  animation: spin 24s linear infinite;
  pointer-events: none;
}

.realm-seal::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(231, 201, 135, 0.12);
  animation: seal-pulse 4.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes seal-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.3;
  }
}

.exp-fill::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  transform: translateY(-50%) rotate(45deg);
  background: #fbf4de;
  box-shadow: 0 0 9px rgba(244, 231, 195, 0.9);
}

.stone-chip svg {
  animation: gem-glow 4.2s ease-in-out infinite;
}

@keyframes gem-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(231, 201, 135, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(231, 201, 135, 0.85));
  }
}

.absorb-orbit {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  animation: spin 18s linear infinite;
  pointer-events: none;
}

.absorb-orbit i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 9px rgba(244, 231, 195, 0.95);
  transform: translate(-50%, -50%);
}

.absorb-orbit i:nth-child(1) {
  left: 50%;
  top: 0;
}

.absorb-orbit i:nth-child(2) {
  left: 50%;
  top: 100%;
}

.absorb-orbit i:nth-child(3) {
  left: 0;
  top: 50%;
  width: 3.5px;
  height: 3.5px;
  opacity: 0.7;
}

.absorb-orbit i:nth-child(4) {
  left: 100%;
  top: 50%;
  width: 3.5px;
  height: 3.5px;
  opacity: 0.7;
}

.absorb-btn.is-pulsing .absorb-orbit {
  animation-duration: 4s;
}

.action-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}

.action-icon::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px dashed transparent;
  transition: border-color 0.3s ease;
  pointer-events: none;
}

.action-btn:hover .action-icon::after {
  border-color: rgba(231, 201, 135, 0.28);
  animation: spin 14s linear infinite;
}

.action-btn:active .action-icon {
  transform: scale(0.94);
}

#breakthroughBtn .action-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 18px;
  height: 15px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(231, 201, 135, 0.5), transparent 70%);
  filter: blur(2px);
  opacity: 0;
  animation: qi-rise 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes qi-rise {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, 3px) scaleY(0.8);
  }
  45% {
    opacity: 0.8;
    transform: translate(-50%, -1px) scaleY(1);
  }
}

.action-btn.breakthrough.is-ready .action-icon::after {
  border-color: rgba(231, 201, 135, 0.55);
  animation: spin 6s linear infinite;
}

.action-btn.breakthrough.is-ready .action-icon::before {
  opacity: 1;
  animation-duration: 1.8s;
}

#techBtn .action-icon::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 7px rgba(244, 231, 195, 0.95);
  animation: twinkle 2.8s ease-in-out infinite;
  pointer-events: none;
}

#bagBtn .action-icon {
  transform-origin: 50% 18%;
  animation: bag-sway 6.4s ease-in-out infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes bag-sway {
  0%,
  100% {
    transform: rotate(-2.4deg);
  }
  50% {
    transform: rotate(2.4deg);
  }
}

.map-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(231, 201, 135, 0.16), inset 0 0 46px rgba(3, 8, 7, 0.5);
}

#locateBtn svg circle[stroke-dasharray] {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 12s linear infinite;
}

.select-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.select-label::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: breathe 2s ease-in-out infinite;
}

.primary-btn {
  position: relative;
  overflow: hidden;
}

.primary-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -60%;
  width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 224, 0.26), transparent);
  transform: skewX(-18deg) translateX(0);
  animation: btn-sheen 5.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btn-sheen {
  0%,
  60% {
    transform: skewX(-18deg) translateX(0);
  }
  100% {
    transform: skewX(-18deg) translateX(360%);
  }
}

.tier-badge {
  box-shadow: inset 0 0 12px -6px var(--tier-color, var(--gold)), 0 0 16px -9px var(--tier-color, var(--gold));
}

.tech-item {
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.tech-item:hover {
  border-color: rgba(178, 214, 195, 0.24);
  background: rgba(255, 255, 255, 0.04);
}

.boot-seal {
  position: relative;
}

.boot-seal::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px dashed rgba(231, 201, 135, 0.24);
  animation: spin 14s linear infinite;
}

.boot-seal::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(111, 214, 176, 0.45);
  animation: spin 3.2s linear infinite;
}

.offline-seal {
  position: relative;
}

.offline-seal::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(231, 201, 135, 0.24);
  animation: spin 22s linear infinite;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .game-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "character"
      "cultivate"
      "map";
  }

  .map-stage {
    min-height: clamp(292px, 42vh, 380px);
  }

  .cultivate-card {
    gap: 14px;
  }

  .site-foot {
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .character-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identity"
      "attrs"
      "elements";
    align-items: stretch;
    gap: 10px;
  }

  .attr-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .app-shell {
    padding: 12px 12px calc(20px + env(safe-area-inset-bottom));
    gap: 12px;
  }

  .brand-seal {
    width: 38px;
    height: 38px;
    font-size: 20px;
    border-radius: 11px;
  }

  .brand-copy p {
    display: none;
  }

  .top-actions {
    gap: 6px;
  }

  .mode-badge {
    padding: 5px 9px;
    font-size: 10px;
  }

  .icon-btn {
    width: 34px;
    height: 34px;
    padding: 8px;
  }

  .map-stage {
    min-height: 268px;
  }

  .map-top {
    padding: 11px;
  }

  .coord-block {
    padding: 5px 10px;
  }

  .coord-value {
    font-size: 12px;
  }

  .coord-guide {
    display: none;
  }

  .map-tools {
    gap: 4px;
  }

  .map-btn {
    padding: 7px 10px;
  }

  .map-btn.icon-only {
    width: 32px;
    height: 32px;
    padding: 0;
  }

  .map-btn span {
    display: none;
  }

  .select-bar {
    left: 10px;
    right: 10px;
    bottom: 26px;
    gap: 8px;
    padding: 8px 10px;
  }

  .select-copy b {
    font-size: 12.5px;
  }

  .select-copy small {
    font-size: 9.5px;
  }

  .character-card {
    padding: 12px 13px 11px;
  }

  .char-copy h2 {
    font-size: 18px;
  }

  .avatar-md {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .char-detail {
    padding: 5px 9px;
    font-size: 9.5px;
  }

  .attr-cell {
    padding: 6px 8px 7px;
  }

  .attr-cell b {
    font-size: 13.5px;
  }

  .attr-panel {
    gap: 6px;
  }

  .grid-card {
    padding: 13px 14px 15px;
  }

  .grid-level {
    font-size: 16px;
  }

  .grid-name {
    font-size: 12px;
    padding-left: 7px;
  }

  .cultivate-card {
    padding: 16px 15px;
  }

  .realm-head h2 {
    font-size: 24px;
  }

  .cultivate-main {
    gap: 18px;
  }

  .absorb-btn {
    width: 132px;
    height: 132px;
  }

  .auto-btn {
    min-width: 74px;
    padding: 12px 10px;
  }

  .action-btn {
    padding: 10px 4px 9px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }

  .action-btn svg {
    width: 17px;
    height: 17px;
  }

  .wallet-row {
    font-size: 10px;
  }

  .tech-best {
    max-width: 54%;
  }

  .tech-dialog {
    padding: 16px 14px;
  }

  .tech-list {
    max-height: 46vh;
  }

  .tech-item {
    padding: 9px 10px;
    gap: 8px;
  }

  .tech-line b {
    font-size: 14px;
  }

  .tech-action {
    padding: 6px 8px;
    font-size: 10px;
  }

  .coord-inputs {
    gap: 6px;
  }

  .player-elements {
    padding: 9px 10px;
    gap: 5px;
  }

  .player-elements .el-chip {
    font-size: 10px;
    padding: 2px 7px 2px 3px;
  }

  .player-elements .el-chip i {
    width: 15px;
    height: 15px;
    font-size: 9px;
  }

  .panel-dialog {
    width: calc(100vw - 20px);
    padding: 18px;
    max-height: 88vh;
  }

  .profile-list > div {
    padding: 9px 11px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .stat-cell {
    padding: 9px 10px;
  }

  .avatar-lg {
    width: 58px;
    height: 58px;
    font-size: 23px;
  }

  .profile-hero {
    padding: 12px;
    gap: 12px;
  }

  .toast-stack {
    width: calc(100vw - 28px);
  }

  .site-foot {
    font-size: 9px;
    gap: 7px;
  }
}

@media (max-width: 360px) {
  .absorb-btn {
    width: 116px;
    height: 116px;
  }

  .absorb-verb {
    font-size: 23px;
  }

  .auto-btn {
    min-width: 66px;
    padding: 10px 8px;
  }

  .action-row {
    gap: 6px;
  }
}

@media (max-width: 640px) {
  .attr-panel {
    border-left: none;
    padding-left: 0;
  }

  .map-card::after,
  .cultivate-card::after {
    width: 150px;
    opacity: 0.6;
  }
}

@media (max-width: 520px) {
  .action-icon {
    width: 24px;
    height: 24px;
  }

  .absorb-orbit i {
    width: 4px;
    height: 4px;
  }
}

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

  .grain {
    display: none;
  }
}

/* ============================================================
   game HUD — full-screen map with floating panels
   ============================================================ */

body {
  overflow: hidden;
}

.app-shell {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
}

.app-shell > .map-card {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: #040a09;
  box-shadow: none;
  backdrop-filter: none;
  overflow: hidden;
}

.app-shell > .map-card::before,
.app-shell > .map-card::after {
  display: none;
}

.map-stage {
  position: absolute;
  inset: 0;
  flex: none;
  min-height: 0;
}

.map-stage::after {
  box-shadow:
    inset 0 0 0 1px rgba(231, 201, 135, 0.1),
    inset 0 0 140px rgba(2, 6, 5, 0.62);
}

.map-top {
  top: 84px;
  right: 18px;
  left: auto;
  display: block;
  padding: 0;
  z-index: 5;
}

.coord-block {
  align-items: flex-end;
  text-align: right;
  border-color: rgba(231, 201, 135, 0.22);
  background: linear-gradient(160deg, rgba(13, 30, 26, 0.82), rgba(5, 12, 10, 0.88));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.map-tools {
  position: absolute;
  right: 18px;
  top: 152px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 7;
}

.map-btn,
.map-btn.icon-only {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  border-color: rgba(231, 201, 135, 0.28);
  background: rgba(5, 13, 11, 0.72);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.map-btn svg,
.map-btn.icon-only svg {
  width: 18px;
  height: 18px;
}

.north-mark {
  top: 150px;
  right: 80px;
}

.map-attribution {
  top: 68px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  color: rgba(207, 224, 212, 0.36);
}

.select-bar {
  left: 86px;
  right: calc(min(392px, 34vw) + 52px);
  bottom: 24px;
  width: auto;
  max-width: 540px;
  margin: 0 auto;
  z-index: 25;
}

/* ---------- hud layer ---------- */

.hud {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.hud > * {
  pointer-events: auto;
}

.hud-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px clamp(12px, 2vw, 22px) 26px;
  background: linear-gradient(180deg, rgba(3, 8, 7, 0.9), rgba(3, 8, 7, 0.5) 62%, rgba(3, 8, 7, 0));
  pointer-events: none;
}

.hud-top > * {
  pointer-events: auto;
}

.hud-player {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(231, 201, 135, 0.18);
  background: rgba(5, 13, 11, 0.58);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
}

.hud-player .avatar-md {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.hud-player .char-copy h2 {
  font-size: 16px;
  letter-spacing: 0.08em;
}

.hud-player .char-sub {
  font-size: 9px;
  gap: 5px;
  margin-top: 1px;
}

.hud-player .char-detail {
  margin-left: 8px;
  padding: 4px 10px;
  font-size: 9px;
}

.hud-top .brand {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 15px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(231, 201, 135, 0.14);
  background: rgba(5, 13, 11, 0.42);
  backdrop-filter: blur(10px);
}

.hud-top .brand-seal {
  width: 38px;
  height: 38px;
  font-size: 20px;
  border-radius: 11px;
}

.hud-top .brand-copy h1 {
  font-size: 17px;
  letter-spacing: 0.2em;
}

.hud-top .brand-copy p {
  font-size: 9px;
  letter-spacing: 0.3em;
}

.hud-res {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-stone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(231, 201, 135, 0.3);
  background: linear-gradient(160deg, rgba(231, 201, 135, 0.16), rgba(10, 22, 20, 0.72));
  color: var(--gold-bright);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.hud-stone svg {
  width: 15px;
  height: 15px;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(231, 201, 135, 0.55));
  animation: gem-glow 4.2s ease-in-out infinite;
}

.hud-stone b {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- side rail ---------- */

.hud-rail {
  position: absolute;
  left: clamp(10px, 1.6vw, 20px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 26;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rail-btn {
  width: 60px;
  padding: 8px 4px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-radius: 16px;
  border: 1px solid rgba(178, 214, 195, 0.18);
  background: linear-gradient(170deg, rgba(12, 27, 23, 0.84), rgba(5, 12, 10, 0.88));
  color: var(--text-dim);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.rail-btn i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-style: normal;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--gold-bright);
  border: 1px solid rgba(231, 201, 135, 0.3);
  background: radial-gradient(circle at 34% 28%, rgba(231, 201, 135, 0.2), rgba(7, 16, 13, 0.85));
  text-shadow: 0 0 10px rgba(231, 201, 135, 0.4);
}

.rail-btn span {
  font-size: 9.5px;
  letter-spacing: 0.14em;
}

.rail-btn:hover {
  color: var(--gold-bright);
  border-color: rgba(231, 201, 135, 0.4);
  transform: translateY(-1px);
}

.rail-btn.is-active {
  color: var(--gold-bright);
  border-color: rgba(231, 201, 135, 0.55);
  background: linear-gradient(170deg, rgba(231, 201, 135, 0.16), rgba(10, 24, 20, 0.92));
  box-shadow: 0 0 24px rgba(231, 201, 135, 0.18), 0 12px 26px rgba(0, 0, 0, 0.42);
}

.rail-btn.is-active i {
  animation: breathe 3.4s ease-in-out infinite;
}

/* ---------- floating panels ---------- */

.hud-panel {
  position: absolute;
  left: clamp(76px, 6.4vw, 96px);
  top: 88px;
  width: min(340px, calc(100vw - 120px));
  max-height: min(64vh, 560px);
  z-index: 28;
  padding: 15px 16px 17px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(231, 201, 135, 0.24);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(111, 214, 176, 0.1), transparent 60%),
    linear-gradient(168deg, rgba(13, 30, 26, 0.94), rgba(5, 13, 11, 0.96));
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-16px);
  transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.2, 1), visibility 0.26s;
  pointer-events: none;
}

.hud-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(231, 201, 135, 0.7), transparent);
  pointer-events: none;
}

.hud-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.hud-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(178, 214, 195, 0.14);
}

.hud-panel-head h2 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.14em;
  margin-top: 2px;
}

.panel-close {
  width: 30px;
  height: 30px;
  padding: 7px;
  flex: none;
  border-radius: 9px;
  border: 1px solid rgba(178, 214, 195, 0.18);
  color: var(--text-dim);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.panel-close:hover {
  color: var(--gold-bright);
  border-color: rgba(231, 201, 135, 0.4);
}

.char-panel .attr-panel {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 12px;
  border-left: 0;
  padding-left: 0;
}

.char-panel .attr-cell {
  padding: 9px 11px 10px;
}

.char-panel .player-elements {
  margin-top: 10px;
}

.grid-panel {
  top: 500px;
  max-height: calc(100vh - var(--grid-top, 500px) - 20px);
  padding: 12px 14px 13px;
  transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.2, 1), visibility 0.26s, top 0.3s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.grid-panel .grid-card {
  padding: 0;
  border-top: 0;
  background: none;
}

.grid-panel .grid-head {
  margin-top: 0;
  align-items: center;
  gap: 10px;
}

.grid-panel .grid-title {
  flex: 1;
  min-width: 0;
}

.grid-panel .grid-name {
  display: inline;
  margin: 0;
  padding-left: 9px;
  border-left: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-faint);
}

.grid-panel .grid-elements {
  margin-top: 9px;
}

.grid-close {
  width: 26px;
  height: 26px;
  padding: 5px;
  flex: none;
}

.grid-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.grid-panel .grid-desc {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  line-height: 1.55;
}

.grid-exp {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(231, 201, 135, 0.3);
  background: rgba(231, 201, 135, 0.08);
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- cultivate dock ---------- */

.hud-cultivate {
  position: absolute;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2.4vh, 24px);
  z-index: 24;
  width: min(392px, 34vw);
  padding: 14px 16px 16px;
  display: grid;
  gap: 8px;
  border-radius: 20px;
  border: 1px solid rgba(231, 201, 135, 0.24);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(111, 214, 176, 0.13), transparent 62%),
    linear-gradient(168deg, rgba(14, 32, 27, 0.94), rgba(5, 12, 10, 0.96));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  isolation: isolate;
}

.hud-cultivate::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 190px;
  height: 23px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 30'%3E%3Cg fill='none' stroke='%23e7c987' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M0 1h220' stroke-opacity='.16'/%3E%3Cpath d='M72 1v5.5c0 5 4.5 9 9.5 9h57c5 0 9.5-4 9.5-9V1' stroke-opacity='.5'/%3E%3Cpath d='M81 1v3.6c0 3 2.6 5.4 5.8 5.4h46.4c3.2 0 5.8-2.4 5.8-5.4V1' stroke-opacity='.3'/%3E%3Ccircle cx='110' cy='23' r='2.2' stroke-opacity='.55'/%3E%3Cpath d='M110 25.5v3.2' stroke-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") center top / contain no-repeat;
  opacity: 0.75;
  pointer-events: none;
}

.hud-cultivate .realm-head h2 {
  font-size: clamp(21px, 2vw, 25px);
}

.hud-cultivate .realm-seal {
  width: 42px;
  height: 42px;
  font-size: 17px;
}

.hud-cultivate .exp-track {
  height: 8px;
  margin-top: -3px;
}

.hud-cultivate .realm-meta {
  margin-top: -2px;
  font-size: 10px;
}

.hud-cultivate .tech-best {
  margin-top: -2px;
  font-size: 10px;
}

.hud-cultivate .cultivate-main {
  margin: 4px 0 0;
  padding: 0;
  gap: clamp(14px, 2vw, 22px);
}

.hud-cultivate .absorb-btn {
  width: 128px;
  height: 128px;
}

.hud-cultivate .auto-btn {
  min-width: 70px;
  padding: 10px 10px;
}

.hud-cultivate .action-row {
  gap: 7px;
}

.hud-cultivate .action-btn {
  padding: 9px 4px 8px;
  font-size: 11px;
}

/* ---------- chrome bits ---------- */

.site-foot {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  padding: 0;
  pointer-events: none;
  font-size: 9.5px;
  white-space: nowrap;
}

.toast-stack {
  top: 84px;
  bottom: auto;
}

.panel-dialog {
  border-color: rgba(231, 201, 135, 0.24);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(111, 214, 176, 0.1), transparent 60%),
    linear-gradient(168deg, #0c1a17, #060f0d 72%);
}

/* ---------- hud responsive ---------- */

@media (max-width: 1100px) {
  .hud-top .brand-copy p {
    display: none;
  }

  .select-bar {
    right: calc(340px + 46px);
  }

  .hud-cultivate {
    width: 340px;
  }

  .hud-panel {
    left: 78px;
    width: 318px;
  }
}

@media (max-width: 900px) {
  .hud-top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 10px 18px;
  }

  .hud-top .brand {
    display: none;
  }

  .hud-player {
    gap: 8px;
    padding: 5px 8px 5px 5px;
  }

  .hud-player .avatar-md {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .hud-player .char-copy h2 {
    font-size: 15px;
  }

  .hud-player .char-sub {
    font-size: 9px;
  }

  .hud-player .char-detail {
    margin-left: 2px;
    padding: 3px 8px;
    font-size: 9px;
  }

  .hud-res {
    gap: 6px;
  }

  .hud-stone {
    padding: 5px 9px;
  }

  .mode-badge {
    padding: 5px 8px;
  }

  .mode-badge span {
    display: none;
  }

  .hud-rail {
    left: 10px;
    top: 70px;
    transform: none;
    flex-direction: row;
    gap: 8px;
  }

  .rail-btn {
    width: auto;
    padding: 5px 10px 5px 5px;
    flex-direction: row;
    gap: 6px;
    border-radius: 12px;
  }

  .rail-btn i {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .rail-btn span {
    font-size: 9px;
  }

  .map-top {
    display: none;
  }

  .map-tools {
    right: 10px;
    top: auto;
    bottom: 252px;
    transform: none;
    gap: 6px;
  }

  .map-btn,
  .map-btn.icon-only {
    width: 38px;
    height: 38px;
  }

  .north-mark {
    display: none;
  }

  .map-attribution {
    top: 58px;
    right: 12px;
    bottom: auto;
    left: auto;
    transform: none;
  }

  .hud-panel {
    left: 10px;
    right: 10px;
    top: 116px;
    width: auto;
    max-height: min(50vh, 380px);
    transform: translateY(-10px);
  }

  .hud-panel.is-open {
    transform: none;
  }

  .hud-cultivate {
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "exp exp"
      "track track"
      "meta meta"
      "actions main";
    gap: 6px 10px;
  }

  .hud-cultivate .realm-head {
    display: none;
  }

  .hud-cultivate .exp-row {
    grid-area: exp;
  }

  .hud-cultivate .exp-track {
    grid-area: track;
    height: 6px;
    margin-top: 0;
  }

  .hud-cultivate .realm-meta {
    grid-area: meta;
    margin-top: 0;
    font-size: 9.5px;
  }

  .hud-cultivate .tech-best {
    display: none;
  }

  .hud-cultivate .cultivate-main {
    grid-area: main;
    gap: 8px;
    margin: 2px 0 0;
    justify-self: end;
    align-self: end;
  }

  .hud-cultivate .absorb-btn {
    width: 92px;
    height: 92px;
  }

  .hud-cultivate .absorb-verb {
    font-size: 20px;
  }

  .hud-cultivate .absorb-sub {
    font-size: 8.5px;
    letter-spacing: 0.1em;
  }

  .hud-cultivate .auto-btn {
    min-width: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }

  .hud-cultivate .auto-figure {
    width: 24px;
    height: 24px;
  }

  .hud-cultivate .auto-figure svg {
    width: 23px;
    height: 23px;
  }

  .hud-cultivate .auto-copy {
    display: none;
  }

  .hud-cultivate .action-row {
    grid-area: actions;
    align-self: end;
    justify-self: start;
    width: 100%;
    max-width: 236px;
    gap: 6px;
  }

  .hud-cultivate .action-btn {
    padding: 7px 2px 6px;
    gap: 3px;
    border-radius: 12px;
    font-size: 9.5px;
  }

  .hud-cultivate .action-icon {
    width: 22px;
    height: 22px;
  }

  .hud-cultivate .action-btn svg {
    width: 16px;
    height: 16px;
  }

  .select-bar {
    left: 10px;
    right: 10px;
    bottom: calc(196px + env(safe-area-inset-bottom));
    max-width: none;
    margin: 0;
  }

  .site-foot {
    display: none;
  }

  .toast-stack {
    top: 62px;
    bottom: auto;
  }

  .grid-panel {
    max-height: none;
    padding: 10px 12px 11px;
    transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.2, 1), visibility 0.26s;
  }

  .grid-panel .grid-desc {
    font-size: 10px;
  }

  .grid-exp {
    padding: 3px 8px;
    font-size: 10.5px;
  }
}

@media (max-width: 520px) {
  .hud-top {
    padding: 6px 8px 14px;
  }

  .hud-player .avatar-md {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .hud-player .char-copy h2 {
    font-size: 14px;
  }

  .hud-player .device-label {
    display: none;
  }

  .hud-player .char-sub i {
    display: none;
  }

  .hud-stone {
    padding: 5px 8px;
  }

  .hud-stone svg {
    width: 13px;
    height: 13px;
  }

  .hud-stone b {
    font-size: 13px;
  }

  .hud-rail {
    top: 62px;
  }

  .map-attribution {
    top: 54px;
    right: 10px;
  }

  .hud-panel {
    top: 106px;
    max-height: min(48vh, 330px);
    padding: 13px;
  }

  .grid-panel {
    top: 106px;
    max-height: none;
  }

  .hud-panel-head h2 {
    font-size: 17px;
  }

  .char-panel .attr-panel {
    gap: 6px;
    margin-top: 10px;
  }

  .char-panel .attr-cell {
    padding: 7px 8px 8px;
  }

  .char-panel .attr-cell b {
    font-size: 14px;
  }

  .map-tools {
    bottom: 236px;
  }

  .hud-cultivate {
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  }

  .hud-cultivate .absorb-btn {
    width: 84px;
    height: 84px;
  }

  .hud-cultivate .absorb-verb {
    font-size: 18px;
  }

  .select-bar {
    bottom: calc(184px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 360px) {
  .hud-cultivate .absorb-btn {
    width: 78px;
    height: 78px;
  }

  .hud-cultivate .absorb-verb {
    font-size: 17px;
  }

  .hud-cultivate .absorb-sub {
    font-size: 8px;
  }

  .hud-cultivate .auto-btn {
    width: 38px;
    height: 38px;
  }

  .hud-rail {
    gap: 6px;
  }

  .rail-btn {
    padding: 4px 8px 4px 4px;
  }
}

/* =========================================================
   明亮像素武侠主题
   ========================================================= */

body {
  background:
    radial-gradient(120% 90% at 50% -20%, #d3f1ff 0%, #ffeec6 46%, #ffcf87 100%);
  color: var(--text);
}

body::selection {
  background: rgba(255, 184, 48, 0.4);
  color: var(--ink);
}

html {
  scrollbar-color: rgba(43, 35, 64, 0.4) transparent;
}

.atmosphere {
  background: linear-gradient(180deg, #c9ecff 0%, #ffe7b3 48%, #ffd189 100%);
}

.atmosphere-image {
  opacity: 0.24;
  filter: saturate(1.3) brightness(1.4) contrast(0.85) sepia(0.14);
}

.atmosphere-glow {
  background:
    radial-gradient(50% 36% at 22% 10%, rgba(255, 214, 102, 0.8), transparent 70%),
    radial-gradient(42% 32% at 84% 6%, rgba(88, 199, 255, 0.7), transparent 72%),
    radial-gradient(70% 40% at 60% 100%, rgba(18, 184, 134, 0.35), transparent 70%);
  mix-blend-mode: screen;
}

.atmosphere-veil {
  background: linear-gradient(180deg, rgba(255, 249, 232, 0.2) 0%, rgba(255, 240, 208, 0.34) 42%, rgba(255, 209, 137, 0.52) 100%);
}

.grain {
  opacity: 0.07;
  mix-blend-mode: multiply;
}

.spirit-motes span {
  width: 4px;
  height: 4px;
  border-radius: 0;
  background: rgba(18, 184, 134, 0.85);
  box-shadow: 0 0 8px rgba(18, 184, 134, 0.55);
}

.spirit-motes span:nth-child(3n) {
  background: rgba(255, 184, 48, 0.9);
  box-shadow: 0 0 8px rgba(255, 184, 48, 0.6);
}

.spirit-motes span:nth-child(4n) {
  background: rgba(239, 79, 95, 0.85);
  box-shadow: 0 0 8px rgba(239, 79, 95, 0.5);
}

/* ---------- 地图 ---------- */

.app-shell > .map-card {
  background: #f2e6c8;
}

.map-card {
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(43, 35, 64, 0.3);
}

.map-stage {
  background: #f2e6c8;
}

.map-stage::after {
  box-shadow:
    inset 0 0 0 4px var(--ink),
    inset 0 0 110px rgba(140, 96, 42, 0.2);
}

.coord-block {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  box-shadow: var(--pixel-shadow);
  backdrop-filter: none;
}

.coord-label {
  color: var(--text-faint);
}

.coord-value {
  color: var(--ink);
}

.coord-guide {
  color: rgba(43, 35, 64, 0.5);
}

.map-btn,
.map-btn.icon-only {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--pixel-shadow);
  backdrop-filter: none;
}

.map-btn:hover {
  background: #ffe9b0;
  box-shadow: 4px 4px 0 rgba(43, 35, 64, 0.3);
}

.map-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(43, 35, 64, 0.3);
}

.north-mark {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.north-mark i {
  width: 2px;
  background: linear-gradient(180deg, rgba(43, 35, 64, 0.85), transparent);
}

.select-bar {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 5px 5px 0 rgba(43, 35, 64, 0.28);
  backdrop-filter: none;
}

.select-copy b {
  color: var(--ink);
}

.select-copy small {
  color: var(--gold-bright);
}

.map-attribution {
  padding: 1px 7px;
  border-radius: 2px;
  background: rgba(255, 248, 230, 0.82);
  color: rgba(43, 35, 64, 0.66);
}

.map-loading {
  background: rgba(255, 246, 224, 0.82);
  color: var(--text-dim);
  backdrop-filter: blur(3px);
}

.loading-ring {
  border: 3px solid rgba(43, 35, 64, 0.18);
  border-top-color: var(--gold);
  border-right-color: var(--jade);
  border-radius: 3px;
  box-shadow: 0 0 20px rgba(255, 184, 48, 0.3);
}

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

.hud-top {
  background: linear-gradient(180deg, rgba(255, 248, 230, 0.94), rgba(255, 248, 230, 0.55) 62%, rgba(255, 248, 230, 0));
}

.hud-player,
.hud-top .brand,
.hud-stone,
.mode-badge,
.icon-btn {
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: var(--pixel-shadow);
  backdrop-filter: none;
}

.hud-player {
  padding: 5px 8px 5px 5px;
  color: var(--ink);
}

.hud-player .char-copy h2,
.hud-top .brand-copy h1 {
  color: var(--ink);
  text-shadow: none;
}

.hud-player .char-sub,
.hud-top .brand-copy p {
  color: var(--text-faint);
}

.hud-top .brand {
  padding: 3px 12px 3px 3px;
}

.brand-seal {
  border: 2px solid var(--ink);
  border-radius: 4px;
  color: var(--ink);
  background: linear-gradient(160deg, #ffe28a, #ffb830);
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.3), inset 0 0 12px rgba(255, 255, 255, 0.5);
  text-shadow: none;
}

.brand-seal::after {
  border-radius: 6px;
  border-color: rgba(43, 35, 64, 0.3);
}

.char-detail {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #ffe9b0;
  color: var(--ink);
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.22);
  font-weight: 600;
}

.char-detail:hover {
  background: #ffd75e;
  color: var(--ink);
}

.char-detail:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.mode-badge {
  color: var(--text-dim);
}

.mode-badge i {
  border-radius: 0;
  background: var(--jade);
  box-shadow: 0 0 0 2px rgba(18, 184, 134, 0.22);
}

.mode-badge.is-local {
  color: var(--gold-bright);
  border-color: var(--ink);
}

.hud-stone {
  border-color: var(--ink);
  background: linear-gradient(160deg, #fff3cd, #ffdf95);
  color: var(--ink);
  font-weight: 600;
}

.hud-stone svg {
  color: #b06a00;
  filter: none;
}

.icon-btn {
  color: var(--ink);
}

.icon-btn:hover {
  color: var(--crimson);
  border-color: var(--ink);
  background: #ffe9b0;
}

/* ---------- 侧栏 ---------- */

.rail-btn {
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  color: var(--text-dim);
  box-shadow: var(--pixel-shadow);
  backdrop-filter: none;
}

.rail-btn i {
  border: 2px solid var(--ink);
  border-radius: 3px;
  color: var(--ink);
  background: linear-gradient(160deg, #ffe9b0, #ffc75e);
  text-shadow: none;
}

.rail-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: #ffefc9;
}

.rail-btn.is-active {
  color: var(--ink);
  border-color: var(--ink);
  background: #ffdf95;
  box-shadow: 3px 3px 0 var(--ink);
}

.rail-btn.is-active i {
  background: linear-gradient(160deg, #b8f5dd, #12b886);
  color: #05392a;
}

/* ---------- 浮层面板 ---------- */

.hud-panel {
  border: 3px solid var(--ink);
  border-radius: 5px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 231, 160, 0.5), transparent 62%),
    var(--paper);
  box-shadow: 7px 7px 0 rgba(43, 35, 64, 0.28);
  backdrop-filter: none;
}

.hud-panel::before {
  width: 90px;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 18px);
  opacity: 0.8;
}

.hud-panel-head {
  border-bottom: 2px dashed rgba(43, 35, 64, 0.22);
}

.hud-panel-head h2 {
  color: var(--ink);
}

.eyebrow {
  color: var(--gold-bright);
}

.panel-close,
.close-btn {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}

.panel-close:hover,
.close-btn:hover {
  border-color: var(--ink);
  color: var(--crimson);
  background: #ffe9b0;
}

.attr-cell {
  border: 2px solid rgba(43, 35, 64, 0.16);
  border-radius: 3px;
  background: #fffdf6;
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.1);
}

.attr-cell span {
  color: var(--text-faint);
}

.attr-cell i {
  border-radius: 0;
  box-shadow: none;
}

.attr-cell b {
  color: var(--ink);
}

.player-elements {
  border: 2px solid rgba(43, 35, 64, 0.14);
  border-radius: 3px;
  background: #fff5da;
}

.player-elements .el-chip {
  background: #fffdf6;
  border: 1px solid rgba(43, 35, 64, 0.12);
}

.player-elements .el-chip span {
  color: var(--text-faint);
}

.el-chip {
  border: 1px solid rgba(43, 35, 64, 0.16);
  border-radius: 3px;
  background: #fffdf6;
  color: var(--text-dim);
}

.el-chip i {
  border-radius: 2px;
}

.el-chip b {
  color: var(--ink);
}

.grid-level {
  color: var(--ink);
}

.grid-name {
  color: var(--text-faint);
  border-left: 2px dashed rgba(43, 35, 64, 0.18);
}

.grid-mult,
.grid-exp {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #ffe9b0;
  color: var(--ink);
  font-weight: 600;
}

.grid-desc {
  color: var(--text-dim);
}

.grid-card::before {
  background: linear-gradient(90deg, transparent, rgba(240, 160, 32, 0.7), transparent);
}

/* ---------- 修炼台 ---------- */

.hud-cultivate {
  border: 3px solid var(--ink);
  border-radius: 6px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 231, 160, 0.55), transparent 62%),
    var(--paper);
  box-shadow: 7px 7px 0 rgba(43, 35, 64, 0.3);
  backdrop-filter: none;
}

.hud-cultivate::before {
  opacity: 0.4;
  filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(0.85);
}

.realm-head h2 {
  color: var(--ink);
}

.realm-seal {
  border: 2px solid var(--ink);
  border-radius: 4px;
  color: var(--ink);
  background: linear-gradient(160deg, #fff3cd, #ffc75e);
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.28), inset 0 0 14px rgba(255, 255, 255, 0.55);
}

.exp-row {
  color: var(--text-faint);
}

.exp-value {
  color: var(--gold-bright);
}

.exp-track {
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: #f6e5bf;
}

.exp-fill {
  border-radius: 0;
  background: linear-gradient(90deg, #12b886, #8ee86b 42%, #ffd75e 72%, #ff9f1c);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.realm-meta {
  color: var(--text-faint);
}

.auto-state::before {
  background: rgba(43, 35, 64, 0.3);
}

.auto-state.is-on {
  color: var(--jade-deep);
}

.auto-state.is-on::before {
  border-radius: 0;
  background: var(--jade);
  box-shadow: 0 0 0 2px rgba(18, 184, 134, 0.2);
}

.tech-best {
  color: var(--text-faint);
}

.tech-best b {
  color: var(--gold-bright);
}

.absorb-btn {
  border: 4px solid var(--ink);
  background:
    radial-gradient(circle at 36% 28%, #fffbe0 0%, #ffe28a 30%, #ffb830 58%, #f07a1c 100%);
  box-shadow:
    0 0 0 6px rgba(255, 252, 235, 0.85),
    0 0 0 8px rgba(43, 35, 64, 0.18),
    7px 7px 0 rgba(43, 35, 64, 0.32),
    inset 0 -12px 0 rgba(196, 96, 12, 0.22),
    inset 0 8px 18px rgba(255, 255, 255, 0.55);
}

.absorb-btn:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow:
    0 0 0 6px rgba(255, 252, 235, 0.85),
    0 0 0 8px rgba(43, 35, 64, 0.18),
    9px 9px 0 rgba(43, 35, 64, 0.34),
    inset 0 -12px 0 rgba(196, 96, 12, 0.22),
    inset 0 8px 18px rgba(255, 255, 255, 0.55);
}

.absorb-btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow:
    0 0 0 6px rgba(255, 252, 235, 0.85),
    0 0 0 8px rgba(43, 35, 64, 0.18),
    3px 3px 0 rgba(43, 35, 64, 0.32),
    inset 0 -10px 0 rgba(196, 96, 12, 0.22);
}

.absorb-halo {
  inset: -16%;
  background: radial-gradient(circle, rgba(255, 214, 102, 0.6), transparent 62%);
  filter: blur(12px);
}

.absorb-ring {
  inset: 10px;
  border: 2px dashed rgba(43, 35, 64, 0.34);
}

.absorb-ring::before,
.absorb-ring::after {
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: #fffbe0;
  box-shadow: 0 0 0 2px var(--ink);
}

.absorb-orbit i {
  border-radius: 2px;
  background: #fffbe0;
  box-shadow: 0 0 0 2px var(--ink);
}

.absorb-cooldown {
  background: conic-gradient(rgba(43, 35, 64, 0.42) var(--p), rgba(43, 35, 64, 0.06) 0);
}

.absorb-verb {
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.65);
}

.absorb-sub {
  color: #7a3d00;
  font-weight: 600;
}

.absorb-btn.cooling .absorb-halo {
  opacity: 0.4;
}

.float-num {
  color: #8a4a00;
  text-shadow: 0 2px 0 #fffbe0, 0 0 14px rgba(255, 184, 48, 0.55);
}

.float-num.is-item {
  color: #0b8a63;
  text-shadow: 0 2px 0 #fffbe0, 0 0 14px rgba(18, 184, 134, 0.55);
}

.auto-btn {
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  color: var(--text-dim);
  box-shadow: var(--pixel-shadow);
}

.auto-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: #ffefc9;
}

.auto-copy small {
  color: var(--text-faint);
}

.auto-btn[aria-pressed="true"] {
  color: #05392a;
  border-color: var(--ink);
  background: linear-gradient(170deg, #b8f5dd, #4fdcae);
  box-shadow: 3px 3px 0 var(--ink), inset 0 0 18px rgba(255, 255, 255, 0.4);
}

.auto-btn[aria-pressed="true"] .auto-figure {
  color: #056b4c;
  filter: none;
}

.action-btn {
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  color: var(--text-dim);
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.18);
}

.action-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: #ffefc9;
}

.action-btn:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.action-btn.breakthrough {
  color: var(--gold-bright);
  border-color: var(--ink);
  background: linear-gradient(170deg, #fff3cd, #ffe08a);
}

.action-btn.breakthrough:hover {
  background: #ffdf95;
  color: var(--ink);
}

.action-btn.breakthrough.is-ready {
  border-color: var(--ink);
  background: linear-gradient(170deg, #fff8d8, #ffc75e);
  animation: ready-pixel 1.6s steps(2, jump-none) infinite;
}

.action-btn.breakthrough.is-ready .action-glow {
  background: radial-gradient(circle, rgba(255, 184, 48, 0.5), transparent 68%);
}

.action-count {
  color: var(--text-faint);
}

@keyframes ready-pixel {
  0%,
  100% {
    box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.2);
  }
  50% {
    box-shadow: 3px 3px 0 var(--ink), 0 0 18px rgba(255, 184, 48, 0.55);
  }
}

.site-foot {
  color: rgba(43, 35, 64, 0.55);
}

.site-foot i {
  border-radius: 0;
  background: rgba(43, 35, 64, 0.35);
}

/* ---------- 像素立绘 ---------- */

.avatar {
  border-radius: 4px;
  border: 2px solid var(--ink);
  background: linear-gradient(170deg, #fff4cd, #ffd07a);
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.28);
  overflow: hidden;
}

.avatar.is-sprite {
  font-size: 0;
  color: transparent;
}

.avatar.is-sprite::before,
.avatar.is-sprite::after {
  display: none;
}

.avatar-sprite {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.avatar-lg {
  border-width: 3px;
  box-shadow: 4px 4px 0 rgba(43, 35, 64, 0.28);
}

/* ---------- 外观选择 ---------- */

.appearance-block {
  margin-top: 16px;
  padding: 12px;
  border: 2px solid rgba(43, 35, 64, 0.16);
  border-radius: 4px;
  background: #fff5da;
}

.form-title {
  color: var(--gold-bright);
  letter-spacing: 0.22em;
}

.appearance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.look-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 4px 6px;
  border: 2px solid rgba(43, 35, 64, 0.18);
  border-radius: 3px;
  background: #fffdf6;
  color: var(--text-dim);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.12);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.look-sprite {
  width: 56px;
  height: 56px;
  display: block;
  border: 1px solid rgba(43, 35, 64, 0.14);
  border-radius: 2px;
  background: linear-gradient(180deg, #e9f7ff, #ffe9bd);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.look-option:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.2);
}

.look-option.is-active {
  border-color: var(--ink);
  background: #ffe9b0;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.look-option.is-active .look-sprite {
  border-color: var(--ink);
  background: linear-gradient(180deg, #ffe9a8, #ffd75e);
}

.appearance-hint {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

/* ---------- 弹窗 ---------- */

.panel-dialog {
  border: 3px solid var(--ink);
  border-radius: 6px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 231, 160, 0.45), transparent 62%),
    var(--paper);
  box-shadow: 8px 8px 0 rgba(43, 35, 64, 0.55);
}

dialog::backdrop {
  background: rgba(43, 35, 64, 0.52);
  backdrop-filter: blur(3px);
}

.panel-head {
  border-bottom: 2px dashed rgba(43, 35, 64, 0.22);
}

.panel-head h2 {
  color: var(--ink);
}

.realm-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  padding: 16px 16px 14px;
  overflow: hidden;
}

.realm-dialog-note {
  margin: 10px 2px 8px;
  font-size: 10.5px;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.realm-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 4px;
  scrollbar-width: thin;
}

.realm-group {
  margin: 9px 0 2px;
  padding: 3px 9px;
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(255, 199, 94, 0.34), transparent 82%);
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ink);
}

.realm-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 2px solid transparent;
  border-radius: 3px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.realm-row-seal {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(43, 35, 64, 0.22);
  border-radius: 3px;
  background: #fffdf6;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink);
}

.realm-row-name {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realm-row-need {
  font-size: 10px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.realm-row.is-current {
  border-color: var(--ink);
  background: linear-gradient(170deg, #fff8d8, #ffd75e);
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.28);
}

.realm-row.is-current .realm-row-seal {
  border-color: var(--ink);
  background: var(--ink);
  color: #ffe9a8;
}

.realm-row.is-current .realm-row-name {
  font-weight: 700;
}

.realm-row.is-current .realm-row-need {
  color: #7a4b00;
}

.realm-row-tag {
  grid-column: 1 / -1;
  justify-self: start;
  margin-left: 2px;
  padding: 1px 8px;
  border-radius: 2px;
  background: var(--ink);
  color: #ffe9a8;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.18em;
}

.panel-note,
.coord-hint,
.bag-empty {
  color: var(--text-faint);
}

.profile-hero {
  border: 2px solid rgba(43, 35, 64, 0.16);
  border-radius: 4px;
  background: linear-gradient(160deg, #fff3cd, #ffe4a3);
}

.hero-copy h3 {
  color: var(--ink);
}

.hero-copy p {
  color: var(--gold-bright);
}

.hero-id {
  color: var(--text-faint);
  border-color: rgba(43, 35, 64, 0.2);
  background: rgba(255, 255, 255, 0.5);
}

.stat-cell,
.element-stat,
.element-total {
  border: 2px solid rgba(43, 35, 64, 0.14);
  border-radius: 3px;
  background: #fffdf6;
}

.stat-cell b,
.element-stat b,
.element-total b {
  color: var(--ink);
}

.stat-cell span,
.stat-cell small,
.element-stat span {
  color: var(--text-faint);
}

.element-map {
  border-color: rgba(43, 35, 64, 0.14);
}

.profile-list > div {
  border-bottom: 1px dashed rgba(43, 35, 64, 0.16);
}

.profile-list dt {
  color: var(--text-faint);
}

.profile-list dd {
  color: var(--ink);
}

.coord-inputs input {
  border: 2px solid rgba(43, 35, 64, 0.24);
  border-radius: 3px;
  background: #fffdf6;
  color: var(--ink);
}

.coord-inputs label {
  color: var(--text-faint);
}

.coord-inputs input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 184, 48, 0.35);
}

.wide-btn {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fff5da;
  color: var(--ink);
  box-shadow: var(--pixel-shadow);
}

.wide-btn:hover {
  background: #ffe9b0;
  border-color: var(--ink);
}

.primary-btn {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: linear-gradient(170deg, #ffe9a8, #ffc75e);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.3);
}

.primary-btn:hover:not(:disabled) {
  background: linear-gradient(170deg, #fff3cd, #ffd75e);
  box-shadow: 4px 4px 0 rgba(43, 35, 64, 0.3);
}

.primary-btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(43, 35, 64, 0.3);
}

.primary-btn:disabled {
  opacity: 0.55;
}

.link-btn {
  color: var(--text-faint);
}

.link-btn:hover {
  color: var(--gold-bright);
  border-bottom-color: rgba(240, 160, 32, 0.5);
}

.link-btn.danger {
  color: rgba(224, 69, 63, 0.8);
}

.link-btn.danger:hover {
  color: var(--danger);
}

.bag-item {
  border: 2px solid rgba(43, 35, 64, 0.16);
  border-radius: 3px;
  background: #fffdf6;
}

.bag-item .item-name {
  color: var(--ink);
}

.item-icon {
  filter: drop-shadow(0 2px 0 rgba(43, 35, 64, 0.16));
}

.tech-tabs {
  border-bottom: 2px dashed rgba(43, 35, 64, 0.2);
}

.tech-tab {
  border: 2px solid rgba(43, 35, 64, 0.18);
  border-radius: 3px;
  background: #fffdf6;
  color: var(--text-dim);
}

.tech-tab.is-active {
  border-color: var(--ink);
  background: #ffe9b0;
  color: var(--ink);
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.2);
}

.tech-item {
  border: 2px solid rgba(43, 35, 64, 0.16);
  border-radius: 3px;
  background: #fffdf6;
}

.tech-item.is-locked {
  opacity: 0.72;
}

.tech-line {
  color: var(--ink);
}

.tech-sub,
.tech-req {
  color: var(--text-faint);
}

.tech-action {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #ffe9b0;
  color: var(--ink);
}

.tech-action:hover:not(:disabled) {
  background: #ffd75e;
}

.tech-action:disabled {
  border-color: rgba(43, 35, 64, 0.2);
  background: #f3ead4;
  color: var(--text-faint);
}

.filter-chip {
  border: 2px solid rgba(43, 35, 64, 0.18);
  border-radius: 3px;
  background: #fffdf6;
  color: var(--text-dim);
}

.filter-chip.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff8e6;
}

.shop-stone {
  color: var(--gold-bright);
}

.trial-card {
  border: 2px solid rgba(43, 35, 64, 0.18);
  border-radius: 4px;
  background: #fff5da;
}

.trial-head,
.trial-head b {
  color: var(--ink);
}

.trial-stat {
  border: 2px solid rgba(43, 35, 64, 0.14);
  border-radius: 3px;
  background: #fffdf6;
}

.trial-copy {
  color: var(--text-dim);
}

.trial-copy strong {
  color: var(--crimson);
}

.trial-log {
  border: 2px solid rgba(43, 35, 64, 0.16);
  border-radius: 3px;
  background: #fffdf6;
}

.trial-line {
  color: var(--text-dim);
}

.offline-dialog {
  text-align: center;
}

.offline-seal {
  border: 2px solid var(--ink);
  background: linear-gradient(160deg, #ffe9a8, #ffc75e);
  color: var(--ink);
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.28);
}

.offline-copy {
  color: var(--text-dim);
}

.offline-reward {
  border: 2px solid rgba(43, 35, 64, 0.16);
  border-radius: 4px;
  background: #fff5da;
}

.reward-main strong {
  color: var(--gold-bright);
}

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

.toast {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 4px 4px 0 rgba(43, 35, 64, 0.3);
  backdrop-filter: none;
}

.toast::before {
  border-radius: 0;
  background: var(--jade);
  box-shadow: none;
}

.toast.is-error {
  border-color: var(--danger);
  color: var(--danger);
}

.toast.is-gold {
  border-color: var(--ink);
  color: var(--ink);
}

.toast.is-gold::before {
  background: var(--gold);
  box-shadow: none;
}

/* ---------- 启动 ---------- */

.boot-veil {
  background:
    radial-gradient(circle at 50% 42%, #fff8e6 0%, #ffe9bd 52%, #ffcf87 100%);
}

.boot-seal {
  border: 3px solid var(--ink);
  border-radius: 6px;
  color: var(--ink);
  background: linear-gradient(160deg, #ffe9a8, #ffc75e);
  box-shadow: 5px 5px 0 rgba(43, 35, 64, 0.25), inset 0 0 20px rgba(255, 255, 255, 0.55);
  animation: none;
}

.boot-veil p {
  color: var(--text-dim);
}

.boot-line {
  height: 4px;
  background: #f0dfb8;
  border: 2px solid var(--ink);
  border-radius: 2px;
}

.boot-line::after {
  background: var(--gold);
  filter: none;
}

/* ---------- 破境动画 ---------- */

.realm-flash {
  z-index: 95;
}

.realm-flash.is-active {
  animation: flash-veil-bright 2.8s ease-out forwards;
}

@keyframes flash-veil-bright {
  0% {
    background: rgba(255, 252, 235, 0);
  }
  6% {
    background: rgba(255, 255, 255, 0.96);
  }
  16% {
    background: rgba(255, 243, 200, 0.92);
  }
  62% {
    background: rgba(255, 236, 178, 0.86);
  }
  100% {
    background: rgba(255, 236, 178, 0);
  }
}

.flash-rays {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.realm-flash.is-active .flash-rays {
  opacity: 1;
}

.flash-rays i {
  --r: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 46vmax;
  transform-origin: 50% 0;
  transform: translateX(-50%) rotate(var(--r)) scaleY(0);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 214, 102, 0.85) 26%, rgba(255, 184, 48, 0) 82%);
  clip-path: polygon(50% 0, 100% 14%, 62% 100%, 38% 100%, 0 14%);
  animation: ray-burst 2.2s ease-out forwards;
}

.flash-rays i:nth-child(1) { --r: 0deg; }
.flash-rays i:nth-child(2) { --r: 30deg; }
.flash-rays i:nth-child(3) { --r: 60deg; }
.flash-rays i:nth-child(4) { --r: 90deg; }
.flash-rays i:nth-child(5) { --r: 120deg; }
.flash-rays i:nth-child(6) { --r: 150deg; }
.flash-rays i:nth-child(7) { --r: 180deg; }
.flash-rays i:nth-child(8) { --r: 210deg; }
.flash-rays i:nth-child(9) { --r: 240deg; }
.flash-rays i:nth-child(10) { --r: 270deg; }
.flash-rays i:nth-child(11) { --r: 300deg; }
.flash-rays i:nth-child(12) { --r: 330deg; }

@keyframes ray-burst {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(var(--r)) scaleY(0.08);
  }
  18% {
    opacity: 0.95;
  }
  56% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) rotate(var(--r)) scaleY(1);
  }
}

.flash-line {
  border-radius: 0;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 184, 48, 0.5), 0 0 120px 40px rgba(255, 184, 48, 0.6);
  animation: flash-core-bright 2.2s ease-out forwards;
}

@keyframes flash-core-bright {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  55% {
    transform: scale(34);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.flash-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 6px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.65), inset 0 0 0 6px rgba(255, 255, 255, 0.5);
  transform: rotate(45deg) scale(0.2);
  opacity: 0;
  pointer-events: none;
}

.realm-flash.is-active .flash-ring {
  animation: ring-burst-pixel 1.9s cubic-bezier(0.16, 0.9, 0.24, 1) forwards;
}

@keyframes ring-burst-pixel {
  0% {
    opacity: 1;
    transform: rotate(45deg) scale(0.2);
  }
  62% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(13);
  }
}

.flash-pixels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.flash-pixels i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 6px);
  height: var(--size, 6px);
  background: var(--gold);
  box-shadow: 0 0 0 2px rgba(43, 35, 64, 0.22);
  opacity: 0;
}

.realm-flash.is-active .flash-pixels i {
  animation: pixel-burst 1.5s steps(16) var(--delay, 0s) forwards;
}

@keyframes pixel-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.4);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(var(--spin, 0deg)) scale(1);
  }
}

.realm-flash.is-active .flash-copy {
  animation: flash-copy-pixel 2.8s ease-out forwards;
}

.flash-copy small {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 12px;
  font-size: 11px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--ink);
  background: #fff8e6;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.25);
}

.flash-copy strong {
  color: var(--ink);
  font-size: clamp(34px, 8vw, 56px);
  text-shadow:
    3px 3px 0 #ffd75e,
    6px 6px 0 rgba(43, 35, 64, 0.25);
}

.flash-copy em {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 14px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #7a3d00;
  background: #fff3c9;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.2);
}

@keyframes flash-copy-pixel {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.82);
  }
  14% {
    opacity: 1;
    transform: translateY(0) scale(1.06);
  }
  24% {
    transform: translateY(0) scale(1);
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-18px) scale(1.04);
  }
}

body.is-quaking .app-shell {
  animation: quake-pixel 0.9s steps(9) both;
}

@keyframes quake-pixel {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 3px); }
  20% { transform: translate(5px, -4px); }
  30% { transform: translate(-7px, -2px); }
  40% { transform: translate(6px, 4px); }
  50% { transform: translate(-4px, 5px); }
  60% { transform: translate(5px, -3px); }
  70% { transform: translate(-5px, 2px); }
  80% { transform: translate(4px, 3px); }
  90% { transform: translate(-2px, -2px); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body.is-quaking .app-shell,
  .realm-flash.is-active,
  .realm-flash.is-active .flash-rays i,
  .realm-flash.is-active .flash-ring,
  .realm-flash.is-active .flash-pixels i,
  .realm-flash.is-active .flash-copy {
    animation-duration: 0.01ms;
  }
}

/* 明亮主题下的余下文字与状态 */

.mode-badge.is-offline,
.mode-badge.is-offline i {
  color: var(--danger);
}

.tech-item {
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.tech-item:hover {
  border-color: var(--ink);
  background: #fff3d6;
}

.tech-line b {
  color: var(--ink);
}

.tech-dmg {
  color: var(--gold-bright);
}

.tech-req em {
  color: var(--jade-deep);
}

.trial-line.is-win {
  color: var(--jade-deep);
}

.trial-line.is-crit,
.trial-line strong {
  color: var(--gold-bright);
}

.trial-head b {
  color: var(--ink);
}

.reward-side b {
  color: var(--ink);
}

.bag-item .item-name {
  color: var(--ink);
}

.shop-stone {
  color: var(--text-faint);
}

.shop-stone b {
  color: var(--gold-bright);
}

.tech-summary {
  color: var(--text-faint);
}

.coord-form .wide-btn {
  border-color: var(--ink);
  color: var(--ink);
}

.hud-top .brand-seal {
  border-radius: 4px;
}

.hud-cultivate .realm-seal {
  border-radius: 4px;
}

/* ---------- 地脉可得 ---------- */

.grid-loot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 2px dashed rgba(43, 35, 64, 0.14);
}

.loot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.loot-hint {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.loot-title {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  flex: none;
}

.loot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.loot-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 3px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fff3cf;
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.22);
  font-size: 11px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.loot-chip .item-icon {
  width: 15px;
  height: 15px;
  flex: none;
}

.loot-chip b {
  font-weight: 700;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.loot-chip.is-unknown {
  border-style: dashed;
  background: #f2ead8;
  box-shadow: none;
  color: var(--text-faint);
  letter-spacing: 0.08em;
}

/* ---------- 声音设置 ---------- */

.hud-res {
  position: relative;
}

.sound-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 8px;
  width: 208px;
  padding: 10px 12px 12px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.3);
}

.sound-pop[hidden] {
  display: none;
}

.sound-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.sound-mute {
  padding: 2px 8px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #ffe9b0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.22);
}

.sound-mute[aria-pressed="false"] {
  background: #f2ead8;
  color: var(--text-faint);
}

.sound-mute:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.sound-row {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) 2.4em;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.sound-row b {
  text-align: right;
  font-size: 10px;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.sound-row input[type="range"] {
  width: 100%;
  height: 16px;
  margin: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

@media (max-width: 600px) {
  .sound-pop {
    width: 188px;
    padding: 8px 10px 10px;
  }
}

/* ---------- 符箓使用与渡劫 ---------- */

.bag-item.is-usable {
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-color: rgba(240, 160, 32, 0.55);
  background: linear-gradient(170deg, #fff6df, #ffe9b0);
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.16);
}

.bag-item.is-usable:hover {
  border-color: var(--ink);
  background: linear-gradient(170deg, #fff3cd, #ffd75e);
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 rgba(43, 35, 64, 0.22);
}

.bag-item.is-usable:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.item-dialog,
.tribulation-dialog {
  width: min(420px, calc(100vw - 32px));
}

.item-desc {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-dim);
}

.item-effects {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

.item-effects li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 2px solid rgba(43, 35, 64, 0.14);
  border-radius: 3px;
  background: #fffdf6;
  font-size: 11.5px;
  color: var(--text-faint);
}

.item-effects b {
  color: var(--ink);
  font-size: 12.5px;
}

.item-note {
  margin-top: 12px;
  font-size: 10.5px;
  line-height: 1.75;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

.item-dialog-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.absorb-btn.is-hasted {
  border-color: #f0a020;
  box-shadow: 0 0 0 3px rgba(240, 160, 32, 0.24), 0 0 22px rgba(255, 184, 48, 0.35);
}

.absorb-btn.is-hasted .absorb-verb {
  color: #a8600c;
}

.tech-action.is-poor {
  border-color: rgba(43, 35, 64, 0.22);
  background: #f3ead4;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.tribulation-copy {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.85;
  color: var(--text-dim);
}

.tribulation-board {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.tribulation-node {
  flex: 1;
  padding: 10px 8px;
  border: 2px solid rgba(43, 35, 64, 0.16);
  border-radius: 3px;
  background: #fffdf6;
  text-align: center;
}

.tribulation-node span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

.tribulation-node b {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink);
}

.tribulation-node.is-target {
  border-color: rgba(224, 69, 63, 0.55);
  background: #ffe6e1;
}

.tribulation-arrow {
  font-size: 16px;
  color: var(--gold-bright);
}

.tribulation-meter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: linear-gradient(170deg, #ffe9a8, #ffc75e);
}

.tribulation-meter span {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #5a3a12;
}

.tribulation-meter b {
  font-size: 18px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tribulation-note {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(224, 69, 63, 0.85);
}

.tribulation-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

/* ---------- 渡劫雷劫动画 ---------- */

.tribulation-flash {
  position: fixed;
  inset: 0;
  z-index: 96;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.tribulation-flash.is-active {
  opacity: 1;
  visibility: visible;
  animation: tribulation-veil 3.6s ease-out forwards;
}

@keyframes tribulation-veil {
  0% {
    background: rgba(10, 12, 32, 0);
  }
  7% {
    background: rgba(9, 11, 30, 0.95);
  }
  72% {
    background: rgba(9, 11, 30, 0.92);
  }
  100% {
    background: rgba(9, 11, 30, 0);
  }
}

.tribulation-flash.is-fail {
  animation-name: tribulation-veil-fail;
}

@keyframes tribulation-veil-fail {
  0% {
    background: rgba(30, 10, 14, 0);
  }
  7% {
    background: rgba(26, 9, 13, 0.96);
  }
  72% {
    background: rgba(26, 9, 13, 0.92);
  }
  100% {
    background: rgba(26, 9, 13, 0);
  }
}

.tribulation-sky {
  position: absolute;
  inset: -12%;
  opacity: 0;
  background:
    radial-gradient(58% 38% at 30% 0%, rgba(122, 156, 255, 0.4), transparent 70%),
    radial-gradient(48% 34% at 74% 5%, rgba(198, 216, 255, 0.34), transparent 72%),
    radial-gradient(84% 62% at 50% 104%, rgba(32, 24, 66, 0.9), transparent 72%);
}

.tribulation-flash.is-active .tribulation-sky {
  animation: tribulation-sky 3.6s ease-out forwards;
}

@keyframes tribulation-sky {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  9% {
    opacity: 1;
    transform: scale(1);
  }
  72% {
    opacity: 0.86;
  }
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

.tribulation-flash.is-fail .tribulation-sky {
  background:
    radial-gradient(58% 38% at 30% 0%, rgba(255, 118, 96, 0.36), transparent 70%),
    radial-gradient(48% 34% at 74% 5%, rgba(255, 182, 156, 0.3), transparent 72%),
    radial-gradient(84% 62% at 50% 104%, rgba(58, 14, 20, 0.92), transparent 72%);
}

.tribulation-bolt {
  position: absolute;
  top: -4%;
  height: 108%;
  opacity: 0;
  transform: scaleX(var(--flip, 1));
  filter:
    drop-shadow(0 0 10px rgba(206, 222, 255, 0.95))
    drop-shadow(0 0 34px rgba(118, 158, 255, 0.75));
}

.tribulation-bolt svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tribulation-bolt path {
  fill: none;
  stroke: #ffffff;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.tribulation-bolt .bolt-main {
  stroke-width: 4.5px;
}

.tribulation-bolt .bolt-branch {
  stroke-width: 2px;
  opacity: 0.75;
}

.tribulation-bolt.bolt-a {
  left: 33%;
  width: 13%;
  --strike-delay: 0.12s;
}

.tribulation-bolt.bolt-b {
  left: 55%;
  top: -2%;
  height: 98%;
  width: 10%;
  --flip: -1;
  --strike-delay: 0.66s;
}

.tribulation-bolt.bolt-c {
  left: 43%;
  height: 102%;
  width: 8%;
  --strike-delay: 1.24s;
}

.tribulation-flash.is-active .tribulation-bolt {
  animation: bolt-strike 0.66s linear var(--strike-delay, 0s) both;
}

@keyframes bolt-strike {
  0% {
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  18% {
    opacity: 0.12;
  }
  26% {
    opacity: 1;
  }
  42% {
    opacity: 0.28;
  }
  54% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}

.tribulation-flash.is-fail .tribulation-bolt {
  filter:
    drop-shadow(0 0 10px rgba(255, 196, 176, 0.95))
    drop-shadow(0 0 34px rgba(255, 92, 68, 0.8));
}

.tribulation-flash-white {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #f2f7ff;
}

.tribulation-flash.is-active .tribulation-flash-white {
  animation: tribulation-white 3.6s linear forwards;
}

@keyframes tribulation-white {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0.96;
  }
  9% {
    opacity: 0.1;
  }
  18% {
    opacity: 0.84;
  }
  22% {
    opacity: 0.08;
  }
  34% {
    opacity: 0.9;
  }
  39% {
    opacity: 0.12;
  }
  47% {
    opacity: 0.52;
  }
  58% {
    opacity: 0.06;
  }
  100% {
    opacity: 0;
  }
}

.tribulation-flash.is-fail .tribulation-flash-white {
  background: #ffe4dc;
}

.tribulation-shock {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border: 5px solid rgba(216, 232, 255, 0.95);
  border-radius: 2px;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.3),
    0 0 46px rgba(148, 188, 255, 0.8);
  opacity: 0;
}

.tribulation-flash.is-active .tribulation-shock {
  animation: tribulation-shock 1.1s cubic-bezier(0.12, 0.86, 0.2, 1) 0.66s forwards;
}

.tribulation-flash.is-active .tribulation-shock.shock-late {
  animation-duration: 1.35s;
  animation-delay: 1.24s;
}

@keyframes tribulation-shock {
  0% {
    opacity: 0.95;
    transform: rotate(45deg) scale(0.16);
  }
  68% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(11);
  }
}

.tribulation-pixels {
  position: absolute;
  inset: 0;
}

.tribulation-pixels i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 6px);
  height: var(--size, 6px);
  background: var(--tint, #e9f1ff);
  box-shadow: 0 0 0 2px rgba(20, 18, 48, 0.28);
  opacity: 0;
}

.tribulation-flash.is-active .tribulation-pixels i {
  animation: tribulation-shard 1.4s steps(14) var(--delay, 0s) forwards;
}

@keyframes tribulation-shard {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(var(--spin, 0deg)) scale(0.9);
  }
}

.tribulation-verdict {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
}

.tribulation-flash.is-active .tribulation-verdict {
  animation: tribulation-verdict 2.5s ease-out 0.52s both;
}

@keyframes tribulation-verdict {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.86);
  }
  16% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
  }
  27% {
    transform: translateY(0) scale(1);
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1.03);
  }
}

.tribulation-verdict small {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 14px;
  font-size: 11px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: #dbe7ff;
  background: rgba(22, 22, 56, 0.86);
  border: 2px solid #cfdcff;
  box-shadow: 0 0 20px rgba(148, 188, 255, 0.65);
}

.tribulation-verdict strong {
  font-family: var(--serif);
  font-size: clamp(36px, 8.4vw, 60px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: #ffffff;
  text-shadow:
    0 0 18px rgba(192, 216, 255, 0.95),
    0 0 44px rgba(118, 158, 255, 0.85),
    3px 3px 0 rgba(16, 14, 44, 0.45);
}

.tribulation-verdict em {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 16px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #1a2450;
  background: #dfe9ff;
  border: 2px solid #2b2340;
  box-shadow: 3px 3px 0 rgba(16, 14, 44, 0.3);
}

.tribulation-flash.is-fail .tribulation-verdict small {
  color: #ffd7cd;
  background: rgba(56, 14, 19, 0.88);
  border-color: #ffb0a0;
  box-shadow: 0 0 20px rgba(255, 96, 72, 0.6);
}

.tribulation-flash.is-fail .tribulation-verdict strong {
  color: #ffe4db;
  text-shadow:
    0 0 18px rgba(255, 154, 132, 0.9),
    0 0 44px rgba(255, 86, 62, 0.78),
    3px 3px 0 rgba(48, 10, 14, 0.5);
}

.tribulation-flash.is-fail .tribulation-verdict em {
  color: #7a1d16;
  background: #ffe0d8;
}

body.is-thunder .app-shell {
  animation: quake-thunder 1.5s steps(18) both;
}

@keyframes quake-thunder {
  0% { transform: translate(0, 0); }
  6% { transform: translate(-13px, 8px); }
  14% { transform: translate(11px, -9px); }
  22% { transform: translate(-15px, -6px); }
  30% { transform: translate(12px, 10px); }
  38% { transform: translate(-10px, 12px); }
  46% { transform: translate(14px, -8px); }
  54% { transform: translate(-11px, 7px); }
  62% { transform: translate(9px, 9px); }
  70% { transform: translate(-8px, -7px); }
  78% { transform: translate(6px, 6px); }
  86% { transform: translate(-4px, -4px); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body.is-thunder .app-shell,
  .tribulation-flash.is-active,
  .tribulation-flash.is-active .tribulation-sky,
  .tribulation-flash.is-active .tribulation-bolt,
  .tribulation-flash.is-active .tribulation-flash-white,
  .tribulation-flash.is-active .tribulation-shock,
  .tribulation-flash.is-active .tribulation-pixels i,
  .tribulation-flash.is-active .tribulation-verdict {
    animation-duration: 0.01ms;
    animation-delay: 0s;
  }
}

/* ---------- 地图妖兽与比武台 ---------- */

.select-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.select-bar .primary-btn.is-beast {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: linear-gradient(170deg, #ff9a7e, #ef4f5f);
  color: #fff8e6;
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.32);
}

.select-bar .primary-btn.is-beast:hover:not(:disabled) {
  background: linear-gradient(170deg, #ffb39c, #ff6172);
}

.select-beast {
  align-self: flex-start;
  display: inline-block;
  max-width: 100%;
  margin-top: 2px;
  padding: 1px 6px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: #ffe08a;
  color: #6b3d00;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-beast[hidden] {
  display: none;
}

body.is-battling {
  overflow: hidden;
}

.battle-screen {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: block;
  overflow: hidden;
  background: #14122c;
  touch-action: none;
}

.battle-screen[hidden] {
  display: none;
}

.battle-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.battle-hud {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px calc(env(safe-area-inset-bottom, 0px) + 12px);
  pointer-events: none;
}

.battle-side {
  width: min(46vw, 290px);
  padding: 6px 9px 7px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: rgba(255, 248, 230, 0.94);
  box-shadow: 4px 4px 0 rgba(20, 18, 44, 0.5);
}

.battle-id {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.battle-id b {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.battle-id span {
  flex: none;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
}

.battle-bar {
  position: relative;
  height: 12px;
  margin-top: 4px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: #2b2340;
  overflow: hidden;
}

.battle-bar i {
  display: block;
  width: 100%;
  height: 100%;
  transition: width 0.24s ease-out;
}

.battle-bar.is-foe i {
  background: linear-gradient(180deg, #ff9382, #e0453f);
}

.battle-bar.is-self i {
  background: linear-gradient(180deg, #7cf0c0, #12b886);
}

.battle-hp-text {
  display: block;
  margin-top: 1px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: rgba(43, 35, 64, 0.6);
}

.battle-spirit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.battle-spirit span {
  flex: none;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--gold-bright);
}

.battle-spirit .battle-bar {
  flex: 1;
  height: 7px;
  margin-top: 0;
}

.battle-bar.is-spirit i {
  background: linear-gradient(180deg, #ffe79a, #f0a020);
}

.battle-spirit b {
  flex: none;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink);
}

.battle-round {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 12px;
  border: 2px solid rgba(255, 233, 176, 0.45);
  border-radius: 3px;
  background: rgba(20, 18, 44, 0.72);
  color: #ffe9b0;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  white-space: nowrap;
  pointer-events: none;
}

.battle-callout {
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 5.4vw, 32px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #fff6d8;
  text-shadow: 0 0 16px rgba(255, 214, 120, 0.55), 3px 3px 0 rgba(20, 18, 44, 0.75);
  white-space: nowrap;
  pointer-events: none;
}

.battle-callout.is-pop {
  animation: battle-callout 1.2s ease-out forwards;
}

@keyframes battle-callout {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
  }
  74% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -62%) scale(1);
  }
}

.battle-log {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  transform: translateX(-50%);
  max-width: calc(100% - 28px);
  padding: 3px 12px;
  border: 2px solid rgba(255, 233, 176, 0.22);
  border-radius: 3px;
  background: rgba(14, 12, 34, 0.66);
  color: rgba(255, 244, 214, 0.86);
  font-size: 11px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.battle-flash {
  position: fixed;
  inset: 0;
  z-index: 116;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.95), rgba(255, 236, 178, 0.6) 42%, rgba(20, 18, 44, 0) 72%),
    #fff;
}

.battle-flash.is-active {
  animation: battle-enter-flash 0.9s ease-out forwards;
}

@keyframes battle-enter-flash {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  26% {
    opacity: 0.42;
  }
  46% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

/* 妖兽确认 */

.beast-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 10px;
  border: 2px solid rgba(43, 35, 64, 0.18);
  border-radius: 4px;
  background: linear-gradient(160deg, #fff3cd, #ffe4a3);
}

.beast-preview {
  flex: none;
  width: 112px;
  height: 112px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 78%, rgba(255, 255, 255, 0.85), rgba(255, 236, 178, 0) 66%),
    #fff8e6;
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.24);
  image-rendering: pixelated;
}

.beast-hero-copy {
  flex: 1;
  min-width: 0;
}

.beast-hero-copy h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.beast-hero-copy p {
  margin: 2px 0 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold-bright);
}

.beast-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 10px;
}

.beast-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 1px dashed rgba(43, 35, 64, 0.22);
  font-size: 11px;
  color: var(--text-faint);
}

.beast-stat b {
  font-size: 12px;
  color: var(--ink);
}

.beast-copy {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}

.beast-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.beast-actions .primary-btn {
  flex: 1;
  margin-top: 0;
}

.beast-actions .link-btn {
  flex: none;
}

/* 战斗结算 */

.battle-result {
  text-align: center;
}

.result-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 6px auto 12px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: linear-gradient(160deg, #ffe9a8, #ffc75e);
  box-shadow: 4px 4px 0 rgba(43, 35, 64, 0.4);
  color: #7a3b00;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  transform: rotate(-3deg);
}

.result-mark.is-lose {
  background: linear-gradient(160deg, #ffd9d2, #ff9a8a);
  color: #8c1f2a;
}

.battle-result h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--ink);
}

.result-copy {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-dim);
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 16px;
}

.result-stat {
  padding: 6px 4px;
  border: 2px solid rgba(43, 35, 64, 0.2);
  border-radius: 3px;
  background: #fff3cd;
}

.result-stat span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.result-stat b {
  display: block;
  margin-top: 1px;
  font-size: 15px;
  color: var(--ink);
}

.battle-result .primary-btn {
  width: 100%;
  margin-top: 18px;
}

@media (max-width: 560px) {
  .select-bar {
    gap: 6px;
    padding: 8px 9px;
  }

  .select-bar .primary-btn.small {
    padding: 7px 7px;
    font-size: 10.5px;
    letter-spacing: 0;
  }

  .select-copy b {
    font-size: 12px;
  }

  .select-copy small {
    font-size: 9px;
  }

  .battle-side {
    width: min(47vw, 240px);
    padding: 5px 7px 6px;
  }

  .battle-id b {
    font-size: 12.5px;
  }

  .battle-round {
    top: calc(env(safe-area-inset-top, 0px) + 112px);
  }

  .beast-preview {
    width: 92px;
    height: 92px;
  }

  .result-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .battle-flash.is-active,
  .battle-callout.is-pop {
    animation-duration: 0.01ms;
    animation-delay: 0s;
  }
}

/* ---------- 城池（客栈 / 茶馆） ---------- */

.select-bar .primary-btn.is-city {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: linear-gradient(170deg, #9ee6c4, #34b98a);
  color: #0c3b2b;
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.32);
}

.select-bar .primary-btn.is-city:hover:not(:disabled) {
  background: linear-gradient(170deg, #b8f0d6, #46cf9c);
}

.select-bar .primary-btn[hidden] {
  display: none;
}

.city-dialog {
  width: min(540px, calc(100vw - 28px));
}

.city-copy {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}

.city-spirit {
  margin-top: 12px;
  padding: 9px 11px 10px;
  border: 2px solid rgba(43, 35, 64, 0.18);
  border-radius: 4px;
  background: linear-gradient(160deg, #eaf7ff, #cfe9ff);
}

.city-spirit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #2c6a86;
}

.city-spirit-head b {
  font-size: 14px;
  color: var(--ink);
}

.city-spirit-track {
  height: 10px;
  margin-top: 6px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fffdf6;
  overflow: hidden;
}

.city-spirit-track i {
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 4px, transparent 4px 8px),
    linear-gradient(90deg, #4fb6e8, #7fd4ff);
  transition: width 0.32s ease;
}

.city-spirit small {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.city-buildings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.city-building {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 11px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: linear-gradient(165deg, #fffdf4, #ffeec6);
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.22);
}

.city-building.is-wide {
  grid-column: 1 / -1;
  background: linear-gradient(165deg, #fff6f0, #ffdcc4);
}

.city-building.is-wide .city-building-seal {
  background: linear-gradient(160deg, #ffd3a8, #ff9d5c);
  color: #6a2400;
}

.treasure-copy {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.city-building-seal {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: linear-gradient(160deg, #ffe9a8, #ffc75e);
  color: #7a3b00;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1;
  transform: rotate(4deg);
}

.city-building h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.city-building p {
  flex: 1;
  margin: 6px 0 10px;
  font-size: 11px;
  line-height: 1.65;
  color: var(--text-dim);
}

.city-building-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.city-building-foot .primary-btn {
  flex: 1;
  margin-top: 0;
  padding: 7px 6px;
  font-size: 12px;
}

.city-price {
  flex: none;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  white-space: nowrap;
}

.city-rumor {
  margin: 12px 0 0;
  padding: 9px 11px;
  border: 2px dashed rgba(43, 35, 64, 0.26);
  border-left: 5px solid var(--gold);
  border-radius: 3px;
  background: #fff8e2;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}

.city-rumor.is-new {
  animation: city-rumor-in 0.42s ease-out;
}

@keyframes city-rumor-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (max-width: 560px) {
  .city-buildings {
    grid-template-columns: minmax(0, 1fr);
  }

  .select-bar .primary-btn.is-city {
    padding: 7px 7px;
    font-size: 10.5px;
    letter-spacing: 0;
  }
}

@media (max-width: 430px) {
  .select-bar {
    flex-wrap: wrap;
  }

  .select-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .select-actions .primary-btn {
    flex: 1;
  }
}

/* ---------- 破境按钮 · 上阵功法 · 坊市 · 功法残卷 ---------- */

.exp-tail {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.breakthrough-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 58px;
  height: 26px;
  padding: 0 9px;
  overflow: hidden;
  border: 2px solid rgba(43, 35, 64, 0.24);
  border-radius: 3px;
  background: #f2e9cf;
  color: rgba(43, 35, 64, 0.4);
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.14);
  cursor: not-allowed;
  transition: background 0.24s ease, color 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, transform 0.16s ease;
}

.breakthrough-btn:disabled {
  opacity: 0.92;
}

.breakthrough-btn b {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.breakthrough-glow {
  position: absolute;
  inset: -30% -40%;
  opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.75) 50%, transparent 62%);
  transform: translateX(-60%);
  pointer-events: none;
}

.breakthrough-btn:not(:disabled),
.breakthrough-btn.is-ready {
  color: #5a3200;
  border-color: var(--ink);
  background: linear-gradient(180deg, #ffe9a8, #ffc94f);
  box-shadow:
    2px 2px 0 rgba(43, 35, 64, 0.3),
    0 0 0 2px rgba(255, 201, 79, 0.24),
    0 0 18px rgba(255, 196, 60, 0.55);
  cursor: pointer;
  animation: breakthrough-ready 1.7s ease-in-out infinite;
}

.breakthrough-btn:not(:disabled):hover,
.breakthrough-btn.is-ready:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #fff3c2, #ffd465);
}

.breakthrough-btn:not(:disabled):active,
.breakthrough-btn.is-ready:active {
  transform: translateY(1px);
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.3);
}

.breakthrough-btn:not(:disabled) .breakthrough-glow,
.breakthrough-btn.is-ready .breakthrough-glow {
  opacity: 1;
  animation: breakthrough-sheen 2.3s ease-in-out infinite;
}

@keyframes breakthrough-ready {
  0%, 100% {
    box-shadow:
      2px 2px 0 rgba(43, 35, 64, 0.3),
      0 0 0 2px rgba(255, 201, 79, 0.2),
      0 0 12px rgba(255, 196, 60, 0.4);
  }
  50% {
    box-shadow:
      2px 2px 0 rgba(43, 35, 64, 0.3),
      0 0 0 3px rgba(255, 201, 79, 0.34),
      0 0 24px rgba(255, 196, 60, 0.72);
  }
}

@keyframes breakthrough-sheen {
  0% { transform: translateX(-70%); }
  55%, 100% { transform: translateX(70%); }
}

@media (prefers-reduced-motion: reduce) {
  .breakthrough-btn:not(:disabled),
  .breakthrough-btn.is-ready,
  .breakthrough-btn:not(:disabled) .breakthrough-glow,
  .breakthrough-btn.is-ready .breakthrough-glow {
    animation: none;
  }
}

/* 上阵功法条 */

.loadout-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: 4px;
  background: #fff8e2;
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.14);
}

.loadout-label {
  flex: none;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.loadout-label b {
  font-size: 14px;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.loadout-label small {
  color: var(--text-faint);
}

.loadout-slots {
  display: flex;
  flex: 1;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
}

.loadout-slot {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 5px;
  border: 2px dashed rgba(43, 35, 64, 0.2);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  text-align: center;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loadout-slot.is-filled {
  border-style: solid;
  border-color: var(--ink);
  background: #fffdf6;
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--slot-color, var(--gold));
}

/* 已学功法卡片与上阵按钮 */

.tech-item.is-equipped {
  border-color: var(--ink);
  background: linear-gradient(180deg, #fff6dc, #ffefc7);
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.16);
}

.tech-action.equip {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fffdf6;
  color: var(--ink);
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.2);
}

.tech-action.equip:hover:not(:disabled) {
  background: #fff3d6;
}

.tech-action.equip.is-on {
  background: linear-gradient(180deg, #ffe9a8, #ffc94f);
  color: #5a3200;
}

/* 珍宝阁独立弹窗 */

.shop-dialog .tech-list {
  max-height: 54vh;
}

.shop-dialog .shop-bar {
  margin-top: 10px;
}

.shop-dialog .panel-note {
  margin-top: 10px;
}

/* 功法残卷物品 */

.bag-item.is-technique {
  border-color: var(--ink);
  background: linear-gradient(180deg, #fffaf0, #ffedbe);
  box-shadow: 2px 2px 0 rgba(43, 35, 64, 0.16);
}

.bag-item.is-technique .item-rarity {
  font-weight: 600;
}

.bag-item.is-technique::after {
  content: "功";
  position: absolute;
  top: 4px;
  left: 5px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--gold);
  color: #3d2a08;
  font-family: var(--serif);
  font-size: 9px;
  line-height: 1;
}

/* 敌方灵力条 */

.battle-spirit.is-foe span {
  color: #ffb257;
}

.battle-spirit.is-foe .battle-bar.is-spirit i {
  background: linear-gradient(180deg, #ffc98a, #e07a2c);
}

/* ---------- 长按地块浮层 · 勘脉未明 · 破境印章 ---------- */

.map-stage .select-bar {
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  z-index: 6;
  width: min(320px, calc(100% - 20px));
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  padding: 11px 12px;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transform-origin: top left;
  animation: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}

.map-stage .select-bar.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.map-stage .select-bar .select-copy {
  gap: 2px;
}

.map-stage .select-bar .select-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.map-stage .select-bar .select-actions .primary-btn {
  flex: 1 1 auto;
}

.select-bar .primary-btn.is-survey {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: linear-gradient(170deg, #b8f0d7, #45c79a);
  color: #063a2a;
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.28);
}

.el-chip.is-unknown b {
  color: rgba(43, 35, 64, 0.38);
  letter-spacing: 0.1em;
}

.el-chip.is-unknown i {
  opacity: 0.45;
}

@media (max-width: 560px) {
  .exp-tail {
    gap: 6px;
  }

  .breakthrough-btn {
    min-width: 52px;
    height: 24px;
    padding: 0 7px;
  }

  .breakthrough-btn b {
    font-size: 11px;
  }
}

/* ---------- 道籍登录 ---------- */

body.is-auth {
  overflow: hidden;
}

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(1100px 560px at 12% 0%, rgba(18, 184, 134, 0.28), transparent 62%),
    radial-gradient(900px 520px at 96% 100%, rgba(240, 160, 32, 0.26), transparent 58%),
    #122019;
  overflow-y: auto;
}

.auth-screen[hidden] {
  display: none;
}

.auth-card {
  width: min(400px, 100%);
  padding: 26px 24px 22px;
  border: 3px solid #2b2340;
  border-radius: 8px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 231, 160, 0.5), transparent 64%),
    #fff8e6;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.42);
  color: #2b2340;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.auth-brand h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 0.2em;
  color: #2b2340;
}

.auth-brand p {
  margin: 2px 0 0;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: #87769d;
}

.auth-seal {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border: 3px solid #2b2340;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffe9a8, #ffd75e);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.28);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  margin-bottom: 16px;
  border: 2px solid #2b2340;
  border-radius: 6px;
  background: #ffedc7;
}

.auth-tab {
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #5a4a72;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.14em;
  cursor: pointer;
}

.auth-tab.is-active {
  background: linear-gradient(180deg, #ffe9a8, #ffd75e);
  color: #2b2340;
  box-shadow: inset 0 0 0 2px #2b2340;
  font-weight: 600;
}

.auth-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-field span {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #87769d;
}

.auth-field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 2px solid #2b2340;
  border-radius: 5px;
  background: #fffdf6;
  color: #2b2340;
  font: inherit;
  font-size: 14px;
}

.auth-field input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(18, 184, 134, 0.28);
}

.auth-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: #87769d;
}

.auth-error {
  margin: 0;
  padding: 8px 10px;
  border: 2px solid #e0453f;
  border-radius: 4px;
  background: rgba(224, 69, 63, 0.1);
  color: #b02a25;
  font-size: 12px;
}

.auth-error[hidden] {
  display: none;
}

.auth-submit {
  margin-top: 4px;
  width: 100%;
  border: 2px solid #2b2340;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffe9a8, #ffd75e);
  color: #2b2340;
  font-size: 14px;
  letter-spacing: 0.22em;
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.28);
}

.auth-submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #fff0bd, #ffdf80);
}

.auth-notice {
  margin: 14px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--gold);
  background: rgba(240, 160, 32, 0.14);
  font-size: 12px;
  color: #7a5a10;
}

.auth-notice[hidden] {
  display: none;
}

.auth-foot {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: #87769d;
  text-align: center;
}

/* ---------- 同脉修士 ---------- */

.primary-btn.is-player {
  border-color: #2b2340;
  background: linear-gradient(180deg, #aef3dd, #5fd9b4);
  color: #08402f;
}

.select-actions .is-player {
  margin-top: 0;
}

.panel-dialog.nearby-dialog,
.panel-dialog.other-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: min(84vh, 720px);
  border: 3px solid #2b2340;
  border-radius: 6px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 231, 160, 0.45), transparent 62%),
    #fff8e6;
  color: #2b2340;
  box-shadow: 8px 8px 0 rgba(43, 35, 64, 0.55);
}

.nearby-note {
  margin: 12px 0;
  font-size: 12px;
  color: #87769d;
}

.nearby-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nearby-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #2b2340;
  border-radius: 5px;
  background: #fffdf6;
  color: #2b2340;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(43, 35, 64, 0.18);
}

.nearby-item:hover {
  background: #fff3d2;
}

.nearby-item i {
  width: 12px;
  height: 12px;
  flex: none;
  border: 2px solid #2b2340;
  border-radius: 2px;
}

.nearby-item div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.nearby-item b {
  font-size: 14px;
  letter-spacing: 0.06em;
}

.nearby-item small {
  font-size: 11px;
  color: #87769d;
}

.nearby-item em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--jade-deep);
}

.other-body {
  padding-top: 14px;
  font-size: 13px;
  color: #2b2340;
}

.other-body.is-loading {
  color: #87769d;
  padding: 28px 0;
  text-align: center;
}

.other-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px dashed rgba(43, 35, 64, 0.22);
}

.other-hero h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.1em;
}

.other-hero p {
  margin: 2px 0 4px;
  font-size: 12px;
  color: #87769d;
}

.other-tag {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid rgba(43, 35, 64, 0.3);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #87769d;
}

.other-tag.is-online {
  border-color: var(--jade-deep);
  background: rgba(18, 184, 134, 0.14);
  color: var(--jade-deep);
}

.other-title {
  margin: 14px 0 6px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #b06a00;
}

.other-kv {
  display: flex;
  flex-direction: column;
}

.other-kv > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(43, 35, 64, 0.14);
}

.other-kv > div span {
  color: #87769d;
  font-size: 12px;
}

.other-kv > div b {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.other-techs,
.other-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #87769d;
}

.other-tech {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(43, 35, 64, 0.18);
  border-radius: 4px;
  background: #fffdf6;
}

.other-tech span {
  color: #2b2340;
  font-weight: 600;
}

.other-tech em {
  font-style: normal;
  color: #87769d;
  text-align: right;
}

.other-items {
  flex-direction: row;
  flex-wrap: wrap;
}

.other-item {
  padding: 3px 8px;
  border: 1px solid rgba(43, 35, 64, 0.22);
  border-radius: 4px;
  background: #fffdf6;
  color: #5a4a72;
}