:root {
  --bg: #171a21;
  --bg-2: #1e222b;
  --panel: #2a2f3a;
  --panel-2: #242933;
  --panel-3: #1f232b;
  --line: #3d4452;
  --line-soft: #333a46;
  --text: #f5f5f5;
  --muted: #a8b0bd;
  --muted-2: #7f8794;
  --gold: #f0c75e;
  --gold-2: #d9a93e;
  --teal: #4ecdc4;
  --green: #6fcf97;
  --red: #e06c5a;
  --heavy: #b87333;
  --spirit: #4ecdc4;
  --mech: #d4a843;
  --radius: 16px;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
}

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(240, 199, 94, 0.08), transparent 60%),
    radial-gradient(800px 500px at 100% 20%, rgba(78, 205, 196, 0.06), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
}

#app {
  position: relative;
  width: 100%;
  max-width: 540px;
  min-height: 100vh;
  margin: 0 auto;
  background: linear-gradient(180deg, #20242d 0%, #1b1f27 45%, #171a21 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 96px;
}

/* ---------------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 10px 14px 8px;
  background: rgba(23, 26, 33, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.resource-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.res {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 7px 8px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.res-icon {
  font-size: 13px;
  line-height: 1;
}

.res b {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.env-chip {
  width: 100%;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--c, #8fa3b8) 45%, transparent);
  background: color-mix(in srgb, var(--c, #8fa3b8) 14%, transparent);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
}

.env-chip .env-icon {
  font-size: 14px;
}

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

#screens {
  padding: 12px 14px 20px;
}

.screen {
  display: none;
}

.screen.active {
  display: block;
  animation: fadeUp 0.22s ease both;
}

.card {
  position: relative;
  background: linear-gradient(180deg, #2d323d 0%, #272c36 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

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

.card-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.eyebrow {
  font-size: 10px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 3px;
}

.muted {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.small {
  font-size: 10px;
}

.divider {
  height: 1px;
  background: var(--line-soft);
  margin: 12px 0;
}

.row {
  display: flex;
  align-items: center;
}

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

.gap {
  gap: 8px;
}

.wrap {
  flex-wrap: wrap;
}

.advice {
  margin: 8px 0 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.empty {
  color: var(--muted-2);
  font-size: 11px;
  padding: 10px 0;
  text-align: center;
}

/* ---------------------------------------------------------------- hero */

.hero {
  border-top: 3px solid var(--gold);
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(240, 199, 94, 0.12), transparent 65%),
    linear-gradient(180deg, #303541 0%, #282d37 100%);
}

.hero-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.stage-title {
  margin: 0 0 4px;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.stage-title span {
  color: var(--gold);
}

.env-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 64px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  font-size: 10px;
  color: var(--text);
}

.env-badge .env-icon {
  font-size: 20px;
}

.enemy-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 10px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  white-space: nowrap;
}

.type-tag.type-heavy {
  color: #e8b27a;
  border-color: rgba(184, 115, 51, 0.5);
  background: rgba(184, 115, 51, 0.12);
}

.type-tag.type-spirit {
  color: #8ce8e1;
  border-color: rgba(78, 205, 196, 0.5);
  background: rgba(78, 205, 196, 0.1);
}

.type-tag.type-mech {
  color: #f0cf7a;
  border-color: rgba(212, 168, 67, 0.5);
  background: rgba(212, 168, 67, 0.1);
}

.counter-pill {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.counter-pill.good {
  background: rgba(111, 207, 151, 0.16);
  color: var(--green);
  border: 1px solid rgba(111, 207, 151, 0.4);
}

.counter-pill.bad {
  background: rgba(224, 108, 90, 0.14);
  color: var(--red);
  border: 1px solid rgba(224, 108, 90, 0.4);
}

.counter-pill.mid {
  background: rgba(240, 199, 94, 0.12);
  color: var(--gold);
  border: 1px solid rgba(240, 199, 94, 0.35);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: #343a46;
  color: var(--text);
  border-radius: 10px;
  min-height: 40px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
  white-space: nowrap;
}

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

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  border-color: transparent;
  color: #1b1a14;
  font-weight: 800;
}

.btn-teal {
  background: linear-gradient(135deg, #3d8f89 0%, #2f6f6b 100%);
  border-color: rgba(78, 205, 196, 0.55);
  color: #eafffd;
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}

.btn-danger {
  background: rgba(192, 57, 43, 0.2);
  border-color: rgba(192, 57, 43, 0.6);
  color: #f3a79c;
}

.btn-sm {
  min-height: 32px;
  padding: 0 9px;
  font-size: 11px;
  border-radius: 8px;
}

.btn-block {
  flex: 1;
  width: 100%;
}

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.tag.good {
  color: var(--green);
  border-color: rgba(111, 207, 151, 0.4);
  background: rgba(111, 207, 151, 0.1);
}

/* ---------------------------------------------------------------- main city scene */

.city-scene {
  --sky1: #070c17;
  --sky2: #1a2740;
  --sun: #dbe8ff;
  --sunGlow: rgba(190, 215, 255, 0.28);
  --m1: #121a28;
  --m2: #1b2a3e;
  --ground1: #202c2a;
  --ground2: #0d1414;
  --skyline: #0a111b;
  --cloud: #9fb2c8;
  position: relative;
  height: 348px;
  margin-bottom: 10px;
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, var(--sky1), var(--sky2));
}

.city-scene.day {
  --sky1: #6f9fbf;
  --sky2: #cfd9cf;
  --sun: #ffe8a3;
  --sunGlow: rgba(255, 224, 140, 0.45);
  --m1: #47626a;
  --m2: #334a50;
  --ground1: #3d4d3f;
  --ground2: #1d2822;
  --skyline: #26343a;
  --cloud: #e8f0f4;
}

.city-scene.dawn {
  --sky1: #3c4b76;
  --sky2: #d99a76;
  --sun: #ffd6a0;
  --sunGlow: rgba(255, 170, 120, 0.38);
  --m1: #33405a;
  --m2: #27354a;
  --ground1: #35463d;
  --ground2: #17201d;
  --skyline: #1c2834;
  --cloud: #f0d8c8;
}

.city-scene.dusk {
  --sky1: #2b2140;
  --sky2: #c96f4a;
  --sun: #ffb06a;
  --sunGlow: rgba(255, 140, 80, 0.35);
  --m1: #2a2236;
  --m2: #3a2d3a;
  --ground1: #3a2f2a;
  --ground2: #171313;
  --skyline: #17131e;
  --cloud: #d8b6a6;
}

.scene-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 220px at 72% 16%, var(--sunGlow), transparent 65%),
    linear-gradient(180deg, var(--sky1), var(--sky2));
  transition: background 0.6s ease;
}

.scene-sun {
  position: absolute;
  z-index: 1;
  top: 14%;
  right: 16%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 34px 14px var(--sunGlow);
  transition: all 0.6s ease;
}

.city-scene.night .scene-sun {
  width: 32px;
  height: 32px;
  top: 11%;
  right: 19%;
  box-shadow: 0 0 22px 6px rgba(190, 215, 255, 0.22);
}

.city-scene.night .scene-sun::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  box-shadow: 5px 2px 0 0 var(--sky2);
}

.scene-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 26% 8%, #dfe8ff, transparent),
    radial-gradient(1.5px 1.5px at 38% 24%, #fff, transparent),
    radial-gradient(1px 1px at 52% 12%, #cfe0ff, transparent),
    radial-gradient(1px 1px at 66% 28%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 9%, #fff, transparent),
    radial-gradient(1px 1px at 88% 22%, #dfe8ff, transparent),
    radial-gradient(1px 1px at 8% 36%, #fff, transparent),
    radial-gradient(1px 1px at 46% 34%, #fff, transparent);
  animation: starTwinkle 4.5s ease-in-out infinite alternate;
  transition: opacity 0.6s ease;
}

.city-scene.night .scene-stars {
  opacity: 0.9;
}

.city-scene.dusk .scene-stars {
  opacity: 0.25;
}

.scene-clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.scene-clouds span {
  position: absolute;
  height: 20px;
  border-radius: 999px;
  background: var(--cloud);
  opacity: 0.16;
  filter: blur(7px);
  animation: cloudDrift 34s linear infinite;
}

.scene-clouds span:nth-child(1) {
  width: 120px;
  top: 18%;
  left: -20%;
}

.scene-clouds span:nth-child(2) {
  width: 90px;
  top: 9%;
  left: 30%;
  animation-duration: 46s;
  animation-delay: -12s;
  opacity: 0.11;
}

.scene-clouds span:nth-child(3) {
  width: 150px;
  top: 25%;
  left: 65%;
  animation-duration: 58s;
  animation-delay: -26s;
  opacity: 0.13;
}

.scene-mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24%;
  height: 42%;
  z-index: 1;
}

.scene-mountains::before,
.scene-mountains::after {
  content: "";
  position: absolute;
  inset: 0;
}

.scene-mountains::before {
  background: var(--m1);
  clip-path: polygon(0 72%, 10% 48%, 20% 62%, 32% 30%, 44% 60%, 56% 38%, 68% 64%, 80% 42%, 92% 62%, 100% 50%, 100% 100%, 0 100%);
}

.scene-mountains::after {
  background: var(--m2);
  clip-path: polygon(0 82%, 14% 66%, 28% 78%, 40% 54%, 52% 74%, 66% 58%, 78% 76%, 90% 60%, 100% 70%, 100% 100%, 0 100%);
  opacity: 0.85;
}

.scene-skyline {
  position: absolute;
  left: 0;
  bottom: 21%;
  width: 100%;
  height: 28%;
  z-index: 2;
  color: var(--skyline);
  opacity: 0.95;
}

.scene-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  z-index: 2;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(240, 199, 94, 0.08), transparent 70%),
    linear-gradient(180deg, var(--ground1), var(--ground2));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.scene-ground::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  width: 62%;
  height: 66%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.06), transparent 72%);
  box-shadow: 0 0 0 18px rgba(255, 255, 255, 0.015);
}

.scene-ground::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 54%;
  height: 88%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(240, 199, 94, 0.1), rgba(240, 199, 94, 0.02) 55%, transparent);
  clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
  opacity: 0.65;
  pointer-events: none;
}

.scene-fog {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.35;
  background: linear-gradient(180deg, transparent 32%, rgba(190, 205, 220, 0.1) 58%, rgba(190, 205, 220, 0.22));
  filter: blur(3px);
  transition: opacity 0.5s ease;
}

.city-scene.env-fog .scene-fog {
  opacity: 1;
}

.scene-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scene-tint {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--env, #8fa3b8);
  opacity: 0.07;
  mix-blend-mode: screen;
}

.city-scene.env-forge .scene-tint {
  opacity: 0.13;
}

.city-scene.env-arc .scene-tint {
  opacity: 0.1;
}

.city-scene.env-silence .scene-tint {
  opacity: 0.12;
}

.city-scene.env-harvest .scene-tint {
  opacity: 0.1;
}

.scene-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 80px 22px rgba(0, 0, 0, 0.48);
}

.scene-top {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.scene-stage,
.scene-env {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 14, 20, 0.62);
  backdrop-filter: blur(8px);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.scene-stage b {
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
}

.scene-env {
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 16%, rgba(10, 14, 20, 0.7));
  font-size: 9px;
}

.scene-hint {
  position: absolute;
  left: 11px;
  bottom: 8px;
  z-index: 10;
  font-size: 7px;
  color: rgba(235, 242, 250, 0.55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.scene-building {
  position: absolute;
  z-index: 5;
  width: 64px;
  height: 72px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.35));
}

.b-gold {
  left: 9%;
  bottom: 18%;
  width: 66px;
  height: 74px;
}

.b-exp {
  left: 28%;
  bottom: 22%;
  width: 54px;
  height: 76px;
}

.b-mat {
  left: 76%;
  bottom: 18%;
  width: 70px;
  height: 72px;
}

.b-gem {
  left: 64%;
  bottom: 30%;
  width: 54px;
  height: 60px;
}

.b-arena {
  left: 90%;
  bottom: 20%;
  width: 66px;
  height: 70px;
}

.b-altar {
  left: 20%;
  bottom: 40%;
  width: 56px;
  height: 62px;
}

.b-tavern {
  left: 5%;
  bottom: 36%;
  width: 58px;
  height: 58px;
}

.b-svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.16s ease;
}

.scene-building:active .b-svg {
  transform: scale(0.94);
}

.b-glow {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 199, 94, 0.2), transparent 66%);
  opacity: 0.6;
  animation: buildingGlow 3.4s ease-in-out infinite;
  pointer-events: none;
}

.b-level {
  position: absolute;
  top: -3px;
  right: -2px;
  z-index: 2;
  font-size: 7px;
  line-height: 1.2;
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(10, 14, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--gold);
}

.b-label {
  position: absolute;
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(10, 14, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #dbe3ee;
  font-size: 6.5px;
  line-height: 1.3;
  white-space: nowrap;
}

.scene-units {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  height: 64px;
  z-index: 7;
  pointer-events: none;
}

.scene-unit {
  position: absolute;
  bottom: 0;
  width: 46px;
  height: 58px;
  border: 0;
  padding: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
  pointer-events: auto;
  animation: unitBob 2.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.scene-unit:nth-child(1) { left: 30%; }
.scene-unit:nth-child(2) { left: 50%; }
.scene-unit:nth-child(3) { left: 70%; }

.su-shadow {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 32px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.48);
  filter: blur(2px);
}

.su-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}

.scene-unit.type-heavy .su-icon {
  background: rgba(184, 115, 51, 0.22);
  border-color: rgba(184, 115, 51, 0.55);
}

.scene-unit.type-spirit .su-icon {
  background: rgba(78, 205, 196, 0.2);
  border-color: rgba(78, 205, 196, 0.55);
}

.scene-unit.type-mech .su-icon {
  background: rgba(212, 168, 67, 0.2);
  border-color: rgba(212, 168, 67, 0.55);
}

.su-name {
  display: block;
  width: max-content;
  max-width: 46px;
  margin: 1px auto 0;
  padding: 0 3px;
  border-radius: 999px;
  background: rgba(10, 14, 20, 0.7);
  color: #e8eef8;
  font-size: 6.5px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scene-npcs {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.scene-npc {
  position: absolute;
  bottom: 10%;
  width: 42px;
  height: 48px;
  border: 0;
  padding: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
  pointer-events: auto;
  animation: npcWander 6.5s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

.scene-npc.npc-0 { left: 16%; }
.scene-npc.npc-1 { left: 83%; bottom: 13%; }

.sn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  margin: 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 24%, rgba(10, 14, 20, 0.6));
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  font-size: 14px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--c) 20%, transparent);
}

.sn-name {
  display: block;
  width: max-content;
  max-width: 48px;
  margin: 1px auto 0;
  padding: 0 3px;
  border-radius: 999px;
  background: rgba(10, 14, 20, 0.68);
  color: #e8eef8;
  font-size: 6.5px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scene-gate {
  position: absolute;
  left: 50%;
  bottom: 18%;
  z-index: 6;
  width: 140px;
  height: 82px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
}

.gate-arch {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 92px;
  height: 70px;
  transform: translateX(-50%);
  border-radius: 46px 46px 0 0;
  background: linear-gradient(180deg, #5a4636, #2a211b);
  border: 2px solid #b87333;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.28), 0 0 24px rgba(240, 199, 94, 0.16);
}

.gate-arch::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62px;
  height: 54px;
  transform: translateX(-50%);
  border-radius: 31px 31px 0 0;
  background: #0d0b0a;
  box-shadow: inset 0 0 22px rgba(240, 199, 94, 0.18);
}

.gate-glow {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 112px;
  height: 72px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 199, 94, 0.22), transparent 68%);
  animation: gatePulse 2.6s ease-in-out infinite;
}

.gate-lamp {
  position: absolute;
  bottom: 26px;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f0c75e;
  box-shadow: 0 0 12px 4px rgba(240, 199, 94, 0.55);
}

.gate-lamp.left {
  left: 24px;
}

.gate-lamp.right {
  right: 24px;
}

.gate-label {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 3;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(10, 14, 20, 0.82);
  border: 1px solid rgba(240, 199, 94, 0.45);
  color: var(--gold);
  font-size: 7px;
  line-height: 1.4;
  white-space: nowrap;
}

.scene-quest {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -14px 10px 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(28, 33, 42, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

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

.quest-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  margin: 1px 0 2px;
}

.quest-sub {
  color: var(--muted-2);
  font-size: 9px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quest-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

@keyframes starTwinkle {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@keyframes cloudDrift {
  from { transform: translateX(-10%); }
  to { transform: translateX(120vw); }
}

@keyframes buildingGlow {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50% { opacity: 0.75; transform: scale(1.04); }
}

@keyframes unitBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

@keyframes npcWander {
  from { transform: translateX(-50%) translateY(0); }
  to { transform: translateX(-50%) translateY(-3px); }
}

@keyframes gatePulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(0.96); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

@media (max-width: 380px) {
  .city-scene {
    height: 320px;
  }

  .b-arena {
    left: 86%;
  }

  .b-mat {
    left: 70%;
  }

  .quest-sub {
    max-width: 200px;
  }
}

/* ---------------------------------------------------------------- production */

.production-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.prod {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.prod-icon {
  font-size: 17px;
}

.prod b {
  display: block;
  font-size: 12px;
}

.prod small {
  display: block;
  color: var(--muted-2);
  font-size: 10px;
  margin-top: 2px;
}

/* ---------------------------------------------------------------- offline & tutorial */

.offline-card {
  border-color: rgba(240, 199, 94, 0.35);
  background:
    radial-gradient(300px 140px at 100% 0%, rgba(240, 199, 94, 0.12), transparent 70%),
    linear-gradient(180deg, #2f343f 0%, #282d37 100%);
}

.gain-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.gain {
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(240, 199, 94, 0.08);
  border: 1px solid rgba(240, 199, 94, 0.2);
  font-size: 10px;
}

.tutorial-card {
  border-style: dashed;
  border-color: rgba(78, 205, 196, 0.35);
}

.tutorial-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.tutorial-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.tutorial-item.done {
  color: var(--green);
  text-decoration: line-through;
  text-decoration-color: rgba(111, 207, 151, 0.4);
}

.tutorial-item .check {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--panel-3);
  border: 1px solid var(--line);
  font-size: 11px;
}

.tutorial-item.done .check {
  background: rgba(111, 207, 151, 0.15);
  border-color: rgba(111, 207, 151, 0.4);
}

/* ---------------------------------------------------------------- todo & feed */

.todo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.todo-card {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: linear-gradient(180deg, #2c313c 0%, #262b35 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
  min-height: 68px;
}

.todo-icon {
  font-size: 20px;
}

.todo-body {
  min-width: 0;
  flex: 1;
}

.todo-body b {
  display: block;
  font-size: 12px;
}

.todo-body small {
  display: block;
  color: var(--muted-2);
  font-size: 10px;
  margin-top: 2px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.chev {
  color: var(--muted-2);
  font-size: 18px;
  line-height: 1;
}

.feed {
  margin-top: 8px;
}

.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}

.feed-item:last-child {
  border-bottom: none;
}

.feed-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 5px;
  flex: 0 0 auto;
}

.feed-item time {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 9px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- team */

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

.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  background: var(--panel-3);
  border: 1px dashed var(--line);
  border-radius: 12px;
  cursor: pointer;
  min-height: 92px;
}

.slot.active {
  border: 1px solid var(--gold);
  background: rgba(240, 199, 94, 0.08);
  box-shadow: 0 0 0 1px rgba(240, 199, 94, 0.25) inset;
}

.slot-pos {
  font-size: 9px;
  color: var(--muted-2);
}

.slot-icon {
  font-size: 22px;
}

.slot-name {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
}

.slot-lv {
  font-size: 9px;
  color: var(--muted-2);
}

.formation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.formation {
  text-align: left;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 9px;
  cursor: pointer;
}

.formation.active {
  border-color: var(--gold);
  background: rgba(240, 199, 94, 0.07);
}

.formation b {
  display: block;
  font-size: 11px;
  margin-bottom: 2px;
}

.formation small {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
  line-height: 1.35;
}

.unit-grid {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.unit-card {
  --type-color: var(--line);
  background: linear-gradient(180deg, #292e38 0%, #242933 100%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--type-color);
  border-radius: 13px;
  padding: 11px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.12s ease;
}

.unit-card:active {
  transform: scale(0.995);
}

.unit-card.type-heavy {
  --type-color: var(--heavy);
}

.unit-card.type-spirit {
  --type-color: var(--spirit);
}

.unit-card.type-mech {
  --type-color: var(--mech);
}

.unit-card.in-lineup {
  background: linear-gradient(180deg, #2e3440 0%, #272c36 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--type-color) 35%, transparent) inset;
}

.unit-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unit-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--type-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--type-color) 35%, transparent);
  font-size: 20px;
  flex: 0 0 auto;
}

.unit-name-wrap {
  min-width: 0;
  flex: 1;
}

.unit-name {
  font-size: 13px;
  font-weight: 700;
}

.unit-meta {
  font-size: 10px;
  color: var(--muted-2);
  margin-top: 2px;
}

.badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(240, 199, 94, 0.15);
  border: 1px solid rgba(240, 199, 94, 0.4);
  color: var(--gold);
  font-size: 9px;
  white-space: nowrap;
}

.unit-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 8px 0;
  padding: 6px;
  background: var(--panel-3);
  border-radius: 8px;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}

.unit-skill {
  font-size: 10px;
  color: var(--muted-2);
  line-height: 1.5;
  margin-bottom: 8px;
}

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

.recruit-grid,
.recruit-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 9px;
}

.mini-unit {
  --type-color: var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: var(--panel-3);
  min-width: 0;
}

.mini-unit.type-heavy {
  --type-color: var(--heavy);
}

.mini-unit.type-spirit {
  --type-color: var(--spirit);
}

.mini-unit.type-mech {
  --type-color: var(--mech);
}

.mini-unit span {
  font-size: 18px;
}

.mini-unit b {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-unit.locked {
  opacity: 0.35;
  filter: grayscale(1);
}

/* ---------------------------------------------------------------- world */

.env-card {
  border-left: 3px solid var(--c, var(--gold));
}

.npc-list {
  display: grid;
  gap: 9px;
  margin-top: 9px;
}

.npc-card {
  --c: var(--muted);
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--c);
  border-radius: 12px;
  padding: 11px;
}

.npc-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.npc-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  font-size: 19px;
  flex: 0 0 auto;
}

.npc-avatar.big {
  width: 46px;
  height: 46px;
  font-size: 23px;
}

.npc-name-wrap {
  min-width: 0;
  flex: 1;
}

.npc-name {
  font-size: 13px;
  font-weight: 700;
}

.npc-title {
  color: var(--muted-2);
  font-size: 9px;
  margin-top: 2px;
}

.tier {
  font-size: 9px;
  color: var(--gold);
  border: 1px solid rgba(240, 199, 94, 0.3);
  background: rgba(240, 199, 94, 0.08);
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.affinity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 9px;
  color: var(--muted-2);
}

.bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #151920;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c, var(--teal)), var(--gold));
  transition: width 0.4s ease;
}

.npc-line {
  padding: 7px 9px;
  border-radius: 8px;
  background: #181c23;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  margin-bottom: 8px;
  font-style: italic;
}

.npc-actions,
.npc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.opponent-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.opponent {
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  padding: 9px;
}

.opponent.revenge {
  border-color: rgba(224, 108, 90, 0.3);
  background: rgba(224, 108, 90, 0.05);
}

.opp-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.opp-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  font-size: 16px;
}

.opp-head b {
  display: block;
  font-size: 11px;
}

.opp-head small {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
  margin-top: 1px;
}

.history {
  margin-top: 6px;
}

.history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 10px;
  color: var(--muted);
}

.history-row:last-child {
  border-bottom: none;
}

.result {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  flex: 0 0 auto;
}

.result.win {
  background: rgba(111, 207, 151, 0.14);
  color: var(--green);
}

.result.lose {
  background: rgba(224, 108, 90, 0.14);
  color: var(--red);
}

.news-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.news-item {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  padding: 8px;
  border-radius: 9px;
  background: var(--panel-3);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.45;
}

.letter {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 9px;
  margin-top: 7px;
  cursor: pointer;
}

.letter-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  font-size: 16px;
}

.letter-body {
  min-width: 0;
  flex: 1;
}

.letter-body b {
  display: block;
  font-size: 11px;
}

.letter-body small {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- me */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 9px;
}

.stat {
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 8px 10px;
}

.stat small {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
}

.stat b {
  display: block;
  font-size: 15px;
  margin-top: 2px;
}

.prestige-card {
  border-color: rgba(167, 139, 250, 0.28);
}

.prestige-card.unlocked {
  background:
    radial-gradient(300px 160px at 100% 0%, rgba(167, 139, 250, 0.15), transparent 70%),
    linear-gradient(180deg, #2f303d 0%, #282a35 100%);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-row b {
  display: block;
  font-size: 12px;
}

.setting-row small {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
  margin-top: 2px;
}

.switch {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #1b1f27;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted-2);
  transition: transform 0.18s ease, background 0.18s ease;
}

.switch.on {
  background: rgba(240, 199, 94, 0.18);
  border-color: rgba(240, 199, 94, 0.45);
}

.switch.on::after {
  transform: translateX(18px);
  background: var(--gold);
}

.about {
  opacity: 0.85;
}

/* ---------------------------------------------------------------- bottom nav */

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 540px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  background: rgba(20, 23, 30, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
  z-index: 50;
}

.bottom-nav button {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 0;
  color: var(--muted-2);
  cursor: pointer;
  border-radius: 8px;
}

.bottom-nav button span {
  font-size: 18px;
  line-height: 1.1;
  filter: grayscale(0.6);
}

.bottom-nav button b {
  font-size: 9px;
  font-weight: 600;
}

.bottom-nav button.active {
  color: var(--gold);
  background: rgba(240, 199, 94, 0.07);
}

.bottom-nav button.active span {
  filter: none;
}

/* ---------------------------------------------------------------- modal */

body.modal-open {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(5, 7, 10, 0.72);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.16s ease;
}

.modal-sheet {
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(180deg, #282d37 0%, #22272f 100%);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.modal-head h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.3px;
}

.modal-head .close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}

.modal-body {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.modal-body p {
  margin: 0 0 8px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: 9px 0 2px;
  background: linear-gradient(180deg, rgba(34, 39, 47, 0), #22272f 30%);
}

.modal-actions .btn {
  flex: 1;
}

.npc-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.welcome-list {
  margin: 10px 0 0;
  padding-left: 18px;
}

.welcome-list li {
  margin-bottom: 7px;
}

.offline-gains {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.gain-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(240, 199, 94, 0.07);
  border: 1px solid rgba(240, 199, 94, 0.18);
}

.gain-card span {
  font-size: 18px;
}

.gain-card b {
  font-size: 16px;
}

.gain-card small {
  color: var(--muted-2);
  font-size: 9px;
}

.building-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
}

.building-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(240, 199, 94, 0.1);
  border: 1px solid rgba(240, 199, 94, 0.3);
  font-size: 28px;
}

.building-hero b {
  display: block;
  font-size: 16px;
}

.building-hero small {
  display: block;
  color: var(--muted-2);
  font-size: 10px;
  margin-top: 2px;
}

.building-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}

.building-stats > div {
  padding: 10px;
  border-radius: 10px;
  background: rgba(240, 199, 94, 0.06);
  border: 1px solid rgba(240, 199, 94, 0.16);
}

.building-stats small {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
}

.building-stats b {
  display: block;
  color: var(--gold);
  font-size: 14px;
  margin-top: 2px;
}

.upgrade-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.upgrade-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 9px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
}

.upgrade-icon {
  font-size: 17px;
}

.upgrade-item > div {
  flex: 1;
  min-width: 0;
}

.upgrade-item b {
  display: block;
  font-size: 11px;
}

.upgrade-item small {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
}

.upgrade-cost {
  font-size: 10px;
  color: var(--gold);
  white-space: nowrap;
}

.total-row {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
}

.total-row b {
  color: var(--gold);
}

.recruit-result {
  --type-color: var(--line);
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--type-color);
  background: var(--panel-3);
}

.recruit-result.type-heavy {
  --type-color: var(--heavy);
}

.recruit-result.type-spirit {
  --type-color: var(--spirit);
}

.recruit-result.type-mech {
  --type-color: var(--mech);
}

.recruit-icon {
  font-size: 34px;
}

.recruit-result b {
  display: block;
  font-size: 15px;
}

.recruit-result small {
  display: block;
  color: var(--muted-2);
  font-size: 10px;
}

.recruit-result p {
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--muted);
}

.dialogue {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #181c23;
  border: 1px solid var(--line-soft);
}

.dialogue p {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}

.dialogue small {
  color: var(--muted-2);
  font-size: 9px;
}

.npc-ai {
  margin-top: 10px;
  padding: 9px;
  border-radius: 11px;
  background: rgba(240, 199, 94, 0.04);
  border: 1px solid rgba(240, 199, 94, 0.2);
}
.npc-ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.npc-ai-head b {
  font-size: 10px;
  color: var(--gold);
}
.npc-ai-head small {
  font-size: 8px;
  color: var(--muted-2);
}
.npc-ai-log {
  display: grid;
  gap: 5px;
  max-height: 180px;
  overflow: auto;
  margin-bottom: 7px;
  padding-right: 3px;
}
.npc-ai-msg {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1.55;
  color: var(--muted);
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  word-break: break-word;
}
.npc-ai-msg.user {
  border-color: rgba(78, 205, 196, 0.22);
  background: rgba(78, 205, 196, 0.05);
}
.npc-ai-msg.assistant {
  border-color: rgba(240, 199, 94, 0.2);
  background: rgba(240, 199, 94, 0.04);
}
.npc-ai-typing {
  color: var(--muted-2);
  font-style: italic;
}

.tip-box {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(78, 205, 196, 0.07);
  border: 1px solid rgba(78, 205, 196, 0.25);
}

.tip-box b {
  color: var(--teal);
  font-size: 11px;
}

.tip-box p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.letter-paper {
  margin-top: 10px;
  padding: 14px;
  border-radius: 12px;
  background: #f3ead7;
  color: #3a3226;
  font-size: 12px;
  line-height: 1.8;
  border: 1px solid #d9c9a7;
  box-shadow: inset 0 0 30px rgba(120, 90, 40, 0.08);
  font-family: "KaiTi", "STKaiti", "Microsoft YaHei", serif;
}

.reset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}

.reset-grid > div {
  padding: 9px;
  border-radius: 9px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
}

.reset-grid b {
  display: block;
  font-size: 11px;
  margin-bottom: 3px;
}

.reset-grid span {
  font-size: 10px;
  color: var(--muted-2);
  line-height: 1.45;
}

.rule-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.rule {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--panel-3);
  font-size: 10px;
}

.rule b {
  color: var(--muted);
}

.rule span {
  color: var(--muted-2);
  text-align: right;
}

.help-list p {
  margin: 0 0 9px;
}

.save-textarea {
  width: 100%;
  min-height: 200px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #151920;
  color: var(--muted);
  padding: 10px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px;
  line-height: 1.5;
  resize: vertical;
}

/* ---------------------------------------------------------------- battle */

.battle-modal .modal-sheet {
  max-height: 94vh;
}

.battle-body {
  margin-top: 8px;
}

.battle-arena {
  position: relative;
  padding: 8px 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(340px 150px at 50% 0%, rgba(224, 108, 90, 0.08), transparent 65%),
    radial-gradient(340px 150px at 50% 100%, rgba(78, 205, 196, 0.08), transparent 65%),
    linear-gradient(180deg, #1c2029 0%, #171b23 52%, #1a2028 100%);
  overflow: hidden;
}

.arena-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.arena-moon {
  position: absolute;
  top: 3%;
  right: 4%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dbe8ff;
  box-shadow: 0 0 20px 6px rgba(190, 215, 255, 0.22);
  opacity: 0.65;
}

.arena-mountain {
  position: absolute;
  bottom: 17%;
  width: 62%;
  height: 36%;
  background: #10151d;
  opacity: 0.9;
}

.arena-mountain.am1 {
  left: -8%;
  clip-path: polygon(0 100%, 8% 58%, 22% 74%, 38% 30%, 52% 64%, 68% 42%, 84% 70%, 100% 52%, 100% 100%);
}

.arena-mountain.am2 {
  right: -8%;
  height: 29%;
  background: #161d28;
  opacity: 0.8;
  clip-path: polygon(0 100%, 12% 52%, 28% 72%, 44% 38%, 60% 66%, 76% 46%, 92% 72%, 100% 58%, 100% 100%);
}

.arena-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 21%;
  background: linear-gradient(180deg, rgba(60, 70, 58, 0.5), rgba(12, 16, 18, 0.92));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.battle-arena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
}

.arena-token.casting::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 3;
  border-radius: 12px;
  border: 1px solid rgba(240, 199, 94, 0.8);
  pointer-events: none;
  animation: castRing 0.5s ease-out forwards;
}

.projectile {
  position: absolute;
  z-index: 6;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  pointer-events: none;
  animation: projectileFly 0.3s linear forwards;
}

.projectile.damage {
  color: #f0c75e;
}

.projectile.reflect {
  color: #c7a6ff;
}

.projectile.heal {
  color: #8ef0b1;
}

.impact {
  position: absolute;
  z-index: 6;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(240, 199, 94, 0.35) 42%, transparent 70%);
  animation: impactPop 0.4s ease-out forwards;
}

.impact.heal {
  background: radial-gradient(circle, rgba(190, 255, 214, 0.9), rgba(111, 207, 151, 0.3) 45%, transparent 70%);
}

.impact.burn {
  background: radial-gradient(circle, rgba(255, 190, 110, 0.9), rgba(217, 108, 74, 0.3) 45%, transparent 70%);
}

.impact.reflect {
  background: radial-gradient(circle, rgba(220, 200, 255, 0.9), rgba(167, 139, 250, 0.3) 45%, transparent 70%);
}

@keyframes castRing {
  from { opacity: 1; transform: scale(0.96); }
  to { opacity: 0; transform: scale(1.12); }
}

@keyframes projectileFly {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0.15; transform: translate(var(--dx), var(--dy)) scale(0.4); }
}

@keyframes impactPop {
  from { opacity: 1; transform: scale(0.3); }
  to { opacity: 0; transform: scale(1.9); }
}


.arena-side-label {
  position: relative;
  z-index: 1;
  font-size: 8px;
  color: var(--muted-2);
  letter-spacing: 1px;
  margin: 0 2px 4px;
}

.arena-side-label.enemy {
  color: #d99b8c;
}

.arena-side-label.player {
  color: #7fd8cf;
}

.arena-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 5px;
}

.arena-row.enemy .arena-token {
  background: linear-gradient(180deg, rgba(224, 108, 90, 0.08), rgba(31, 35, 43, 0.9));
}

.arena-row.player .arena-token {
  background: linear-gradient(180deg, rgba(78, 205, 196, 0.08), rgba(31, 35, 43, 0.9));
}

.arena-token {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 4px 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.2s ease;
}

.arena-token.type-heavy {
  border-color: rgba(184, 115, 51, 0.55);
}

.arena-token.type-spirit {
  border-color: rgba(78, 205, 196, 0.55);
}

.arena-token.type-mech {
  border-color: rgba(212, 168, 67, 0.55);
}

.arena-token.dead {
  opacity: 0.32;
  filter: grayscale(1);
}

.arena-token.attacking {
  animation: lungeUp 0.28s ease;
  z-index: 2;
}

.arena-token.hit {
  animation: tokenShake 0.28s ease;
  box-shadow: 0 0 0 1px rgba(224, 108, 90, 0.55) inset;
}

.arena-token.casting {
  box-shadow: 0 0 16px rgba(240, 199, 94, 0.35);
  border-color: rgba(240, 199, 94, 0.65);
}

.arena-token.healed {
  box-shadow: 0 0 14px rgba(111, 207, 151, 0.4);
  border-color: rgba(111, 207, 151, 0.6);
}

.token-pos {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 7px;
  color: var(--muted-2);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 0 2px;
  line-height: 1.3;
}

.token-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 20px;
  margin-top: 2px;
}

.arena-token.type-heavy .token-icon {
  background: rgba(184, 115, 51, 0.14);
  border-color: rgba(184, 115, 51, 0.35);
}

.arena-token.type-spirit .token-icon {
  background: rgba(78, 205, 196, 0.14);
  border-color: rgba(78, 205, 196, 0.35);
}

.arena-token.type-mech .token-icon {
  background: rgba(212, 168, 67, 0.14);
  border-color: rgba(212, 168, 67, 0.35);
}

.token-name {
  width: 100%;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.token-hp {
  width: 92%;
  height: 4px;
  margin-top: 4px;
  border-radius: 999px;
  background: #11151c;
  overflow: hidden;
}

.token-hp-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6fcf97, #4ecdc4);
  transition: width 0.26s ease;
}

.arena-token.dead .token-hp-fill {
  background: #5a3030;
}

.token-hp-text {
  margin-top: 2px;
  font-size: 7.5px;
  color: var(--muted-2);
  line-height: 1;
}

.token-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 14px;
  margin-top: 2px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 8px;
  line-height: 1;
}

.arena-vs {
  position: relative;
  z-index: 1;
  margin: 3px 0;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--gold);
}

.arena-vs::before,
.arena-vs::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 199, 94, 0.35));
}

.arena-vs::before {
  left: 10%;
}

.arena-vs::after {
  right: 10%;
  transform: scaleX(-1);
}

.arena-banner {
  position: absolute;
  z-index: 4;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(20, 24, 31, 0.94);
  border: 1px solid rgba(240, 199, 94, 0.45);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.arena-banner.show {
  animation: bannerPop 0.72s ease both;
}

.float-text {
  position: absolute;
  z-index: 5;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 900;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  animation: floatUp 0.85s ease-out forwards;
}

.damage-float {
  color: #ff8a75;
}

.burn-float {
  color: #ffb066;
}

.reflect-float {
  color: #c7a6ff;
}

.heal-float {
  color: #8ef0b1;
}

@keyframes lungeUp {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-5px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes tokenShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
  25% { opacity: 1; transform: translate(-50%, -2px) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -24px) scale(1); }
}

@keyframes bannerPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.98); }
}

.battle-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: start;
}

.battle-side {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.side-label {
  font-size: 9px;
  color: var(--muted-2);
  text-align: center;
  margin-bottom: 1px;
}

.vs {
  align-self: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  padding-top: 20px;
}

.battle-unit {
  --type-color: var(--line);
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--type-color);
  border-radius: 9px;
  padding: 5px 6px;
  transition: opacity 0.2s ease;
}

.battle-unit.type-heavy {
  --type-color: var(--heavy);
}

.battle-unit.type-spirit {
  --type-color: var(--spirit);
}

.battle-unit.type-mech {
  --type-color: var(--mech);
}

.battle-unit.dead {
  opacity: 0.35;
  filter: grayscale(1);
}

.bu-top {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 9px;
  line-height: 1.3;
  margin-bottom: 4px;
}

.bu-top small {
  color: var(--muted-2);
  font-size: 8px;
  white-space: nowrap;
}

.hp-bar {
  height: 5px;
  border-radius: 999px;
  background: #14171d;
  overflow: hidden;
}

.hp-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6fcf97, #4ecdc4);
  transition: width 0.28s ease;
}

.battle-unit.dead .hp-fill {
  background: #5a3030;
}

.bu-hp {
  margin-top: 3px;
  font-size: 8px;
  color: var(--muted-2);
  text-align: right;
}

.battle-log {
  margin-top: 10px;
  height: 170px;
  overflow: auto;
  padding: 8px;
  border-radius: 10px;
  background: #15181f;
  border: 1px solid var(--line-soft);
  font-size: 10px;
  line-height: 1.45;
  scroll-behavior: smooth;
}

.log-line {
  display: flex;
  gap: 6px;
  padding: 3px 0;
  color: var(--muted);
  animation: logIn 0.18s ease;
}

.log-round {
  color: var(--gold);
  font-size: 8px;
  flex: 0 0 auto;
  padding-top: 1px;
}

.log-line.damage {
  color: #f0b4a8;
}

.log-line.heal {
  color: #a8e6c1;
}

.log-line.skill {
  color: var(--gold);
}

.log-line.death {
  color: var(--muted-2);
}

.log-line.status,
.log-line.burn,
.log-line.reflect,
.log-line.stun {
  color: #c7b3f0;
}

.battle-result {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-3);
}

.battle-result.win {
  border-color: rgba(111, 207, 151, 0.4);
  background: rgba(111, 207, 151, 0.07);
}

.battle-result.lose {
  border-color: rgba(224, 108, 90, 0.4);
  background: rgba(224, 108, 90, 0.06);
}

.battle-result .result-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 2px;
}

.battle-result.win .result-title {
  color: var(--green);
}

.battle-result.lose .result-title {
  color: var(--red);
}

.result-meta {
  font-size: 9px;
  color: var(--muted-2);
  margin-bottom: 6px;
}

.battle-result p {
  margin: 4px 0;
  font-size: 11px;
}

/* ---------------------------------------------------------------- toast */

#toastRoot {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  z-index: 200;
  width: max-content;
  max-width: 90vw;
  pointer-events: none;
}

.toast {
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(12, 15, 20, 0.96);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 11px;
  box-shadow: var(--shadow);
  animation: toastIn 0.2s ease both;
  text-align: center;
}

/* ---------------------------------------------------------------- animations */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes logIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------- world chat */

.chat-messages {
  display: grid;
  gap: 5px;
  max-height: 220px;
  overflow: auto;
  padding-right: 3px;
  margin: 4px 0 8px;
}
.chat-line {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 7px;
  background: var(--panel-3);
  font-size: 10px;
  color: var(--muted);
}
.chat-line.mine {
  background: rgba(240, 199, 94, 0.06);
}
.chat-line b {
  color: var(--teal);
  font-size: 9px;
  white-space: nowrap;
}
.chat-line.mine b {
  color: var(--gold);
}
.chat-line span {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.chat-line small {
  color: var(--muted-2);
  font-size: 8px;
  white-space: nowrap;
}
.chat-form {
  display: flex;
  gap: 5px;
}
.chat-form input {
  flex: 1;
  min-width: 0;
  background: #11161e;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 9px;
  font-size: 10px;
  outline: none;
}

/* ---------------------------------------------------------------- equipment */

.equip-summary {
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(78, 205, 196, 0.07);
  border: 1px solid rgba(78, 205, 196, 0.2);
  font-size: 10px;
  color: var(--muted);
}

.equip-summary b {
  color: var(--teal);
  margin-left: 5px;
}

.equip-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 9px 0;
}

.equip-slot {
  text-align: left;
  padding: 8px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--muted);
  cursor: pointer;
}

.equip-slot.active {
  border-color: var(--gold);
  background: rgba(240, 199, 94, 0.07);
}

.equip-slot-name {
  display: block;
  font-size: 9px;
  color: var(--muted-2);
}

.equip-slot b {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equip-slot small {
  display: block;
  margin-top: 1px;
  font-size: 8px;
  color: var(--muted-2);
}

.equip-section-title {
  margin: 10px 0 6px;
  font-size: 10px;
  color: var(--muted);
}

.equip-inventory {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
}

.equip-item {
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--rarity, var(--line));
  background: var(--panel-3);
}

.equip-item.rarity-common { --rarity: #9aa5b5; }
.equip-item.rarity-rare { --rarity: #64a8ff; }
.equip-item.rarity-epic { --rarity: #a78bfa; }
.equip-item.rarity-legendary { --rarity: #f0c75e; }

.equip-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
}

.rarity-tag {
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  border-radius: 999px;
  font-size: 8px;
  padding: 1px 5px;
}

.equip-item-stats {
  color: var(--muted-2);
  font-size: 9px;
  margin-top: 3px;
}

.equip-item-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.equip-bonus {
  display: block;
  color: var(--teal);
  font-size: 9px;
  margin-top: 3px;
}

.drop-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 9px;
  background: rgba(240, 199, 94, 0.07);
  border: 1px solid rgba(240, 199, 94, 0.25);
}

.drop-icon {
  font-size: 22px;
}

.drop-card b {
  display: block;
  color: var(--gold);
  font-size: 11px;
}

.drop-card small {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
  margin-top: 2px;
}

/* ---------------------------------------------------------------- daily & chest */

.daily-streak {
  padding: 8px 9px;
  border-radius: 8px;
  background: rgba(240, 199, 94, 0.07);
  border: 1px solid rgba(240, 199, 94, 0.2);
  color: var(--muted);
  font-size: 10px;
}
.daily-streak b {
  color: var(--gold);
  font-size: 14px;
}
.daily-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 8px 0;
}
.daily-day {
  min-width: 0;
  padding: 6px 3px;
  border-radius: 7px;
  border: 1px solid var(--line-soft);
  background: var(--panel-3);
  text-align: center;
  font-size: 9px;
  color: var(--muted-2);
}
.daily-day small {
  display: block;
  font-size: 7px;
  white-space: nowrap;
}
.daily-day span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
}
.daily-day em {
  display: block;
  font-style: normal;
  font-size: 7px;
  color: var(--muted-2);
}
.daily-day.done {
  border-color: rgba(111, 207, 151, 0.3);
  background: rgba(111, 207, 151, 0.06);
  opacity: 0.75;
}
.daily-day.today {
  border-color: var(--gold);
  background: rgba(240, 199, 94, 0.1);
  box-shadow: 0 0 10px rgba(240, 199, 94, 0.12);
}
.daily-tasks {
  display: grid;
  gap: 6px;
}
.daily-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 8px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
}
.daily-task b {
  display: block;
  font-size: 10px;
}
.daily-task small {
  display: block;
  color: var(--muted-2);
  font-size: 8px;
  margin-top: 2px;
}
.daily-task .btn {
  flex-shrink: 0;
}
.achievement-list {
  display: grid;
  gap: 5px;
}
.achievement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  opacity: 0.7;
}
.achievement-row.done {
  opacity: 1;
  border-color: rgba(240, 199, 94, 0.22);
}
.achievement-row b {
  display: block;
  font-size: 10px;
}
.achievement-row small {
  display: block;
  color: var(--muted-2);
  font-size: 8px;
  margin-top: 1px;
}
.achievement-row .btn {
  flex-shrink: 0;
}
.idle-chest {
  position: absolute;
  right: 5%;
  bottom: 17%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--gold);
  font-size: 9px;
  animation: chestFloat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(240, 199, 94, 0.5));
}
.idle-chest span {
  font-size: 30px;
}
.idle-chest b {
  font-size: 8px;
  color: var(--gold);
  text-shadow: 0 1px 4px #000;
}
@keyframes chestFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ---------------------------------------------------------------- social & season */

.social-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.social-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 9px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: var(--panel-3);
  color: var(--muted);
  cursor: pointer;
}
.social-action span { font-size: 20px; }
.social-action b { color: var(--text); font-size: 11px; }
.social-action small { color: var(--muted-2); font-size: 8px; line-height: 1.35; }
.guild-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 9px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  margin: 8px 0;
}
.guild-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 7px;
  padding: 6px;
  font-size: 10px;
}
.guild-tabs button.active {
  color: var(--gold);
  background: rgba(240, 199, 94, 0.1);
  font-weight: 700;
}
.guild-list, .friend-list, .guild-member-list { display: grid; gap: 5px; }
.guild-row, .friend-row, .guild-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
}
.guild-row b, .friend-row b, .guild-member-row b { color: var(--text); font-size: 11px; }
.guild-row small, .friend-row small, .guild-member-row small {
  display: block;
  color: var(--muted-2);
  font-size: 8px;
  margin-top: 2px;
}
.friend-actions, .guild-member-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.btn-xs {
  min-height: 25px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 9px;
}
.guild-hero {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(240, 199, 94, 0.08), var(--panel-3));
  border: 1px solid rgba(240, 199, 94, 0.2);
}
.guild-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-weight: 800;
  font-size: 12px;
  border: 1px solid rgba(240, 199, 94, 0.3);
  background: rgba(240, 199, 94, 0.08);
}
.guild-hero > div:nth-child(2) { flex: 1; min-width: 0; }
.guild-hero h3 { margin: 0; font-size: 15px; }
.guild-hero p { margin: 2px 0 0; font-size: 9px; }
.guild-actions { display: flex; gap: 6px; margin-top: 8px; }
.friend-add-form { display: flex; align-items: flex-end; gap: 6px; }
.friend-add-form label { flex: 1; }
.friend-add-form input { margin-top: 3px; }
.friend-row .friend-actions { flex-shrink: 0; }
.season-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: var(--muted);
}
.season-head b { display: block; color: var(--gold); font-size: 18px; }
.season-head span { display: block; margin-top: 2px; }
.season-bar {
  height: 8px;
  border-radius: 999px;
  background: #11161e;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  margin: 7px 0;
}
.season-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
}
.season-premium-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(78, 205, 196, 0.05);
  border: 1px solid rgba(78, 205, 196, 0.18);
  font-size: 10px;
  color: var(--muted);
}
.season-tiers {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  max-height: 360px;
  overflow: auto;
}
.season-tier {
  display: grid;
  grid-template-columns: 30px 1fr 1fr;
  gap: 5px;
  align-items: stretch;
}
.season-tier.locked { opacity: 0.55; }
.season-tier-no {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
}
.season-reward {
  padding: 6px 7px;
  border-radius: 8px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  min-width: 0;
}
.season-reward.premium { border-color: rgba(78, 205, 196, 0.2); }
.season-reward small { display: block; color: var(--muted-2); font-size: 8px; }
.season-reward span {
  display: block;
  color: var(--text);
  font-size: 9px;
  margin: 2px 0 4px;
  min-height: 18px;
}
.season-reward .btn { width: 100%; }

/* ---------------------------------------------------------------- market & pvp */

.market-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 9px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  margin: 8px 0;
}
.market-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 7px;
  padding: 6px;
  font-size: 10px;
}
.market-tabs button.active {
  background: rgba(240, 199, 94, 0.12);
  color: var(--gold);
  font-weight: 700;
}
.market-filters {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}
.filter-row {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.filter-chip {
  border: 1px solid var(--line-soft);
  background: var(--panel-3);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  white-space: nowrap;
}
.filter-chip.active {
  color: var(--gold);
  border-color: rgba(240, 199, 94, 0.4);
  background: rgba(240, 199, 94, 0.08);
}
.market-list {
  display: grid;
  gap: 7px;
}
.market-item {
  padding: 9px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--rarity, var(--line));
  background: var(--panel-3);
}
.market-item.rarity-common { --rarity: #9aa5b5; }
.market-item.rarity-rare { --rarity: #64a8ff; }
.market-item.rarity-epic { --rarity: #a78bfa; }
.market-item.rarity-legendary { --rarity: #f0c75e; }
.market-item-head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.market-icon {
  font-size: 20px;
}
.market-item-head > div {
  min-width: 0;
  flex: 1;
}
.market-item-head b {
  display: block;
  font-size: 11px;
}
.market-item-head small {
  display: block;
  color: var(--muted-2);
  font-size: 8px;
  margin-top: 1px;
}
.market-price {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.market-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 9px;
}

.pvp-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 8px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 10px;
}
.pvp-meta b {
  color: var(--gold);
}
.pvp-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}
.pvp-opponent {
  padding: 9px;
  border-radius: 10px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
}
.pvp-opponent-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pvp-opponent-head b {
  font-size: 11px;
  flex: 1;
}
.pvp-rating {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
}
.pvp-opponent-meta {
  color: var(--muted-2);
  font-size: 9px;
  margin-top: 2px;
}
.pvp-lineup {
  display: flex;
  gap: 5px;
  margin: 6px 0;
}
.pvp-lineup .mini-unit {
  flex: 1;
  min-width: 0;
}
.leaderboard {
  display: grid;
  gap: 4px;
}
.leader-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--panel-3);
  font-size: 10px;
}
.rank {
  color: var(--gold);
  width: 20px;
  font-weight: 700;
}
.leader-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.leader-row b {
  color: var(--gold);
}
.tag.live {
  color: var(--teal);
  border-color: rgba(78, 205, 196, 0.4);
}

/* ---------------------------------------------------------------- auth & account */

.auth-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background: #0a0e15;
}
.auth-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(167, 139, 250, 0.08), transparent 65%),
    linear-gradient(180deg, #070b13 0%, #111a2a 55%, #17221f 100%);
}
.auth-moon {
  position: absolute;
  top: 12%;
  right: 16%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #dbe8ff;
  box-shadow: 0 0 50px 18px rgba(190, 215, 255, 0.18);
}
.auth-moon::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  box-shadow: 8px 3px 0 0 #111a2a;
}
.auth-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 30% 9%, #dfe8ff, transparent),
    radial-gradient(1.5px 1.5px at 48% 24%, #fff, transparent),
    radial-gradient(1px 1px at 64% 12%, #fff, transparent),
    radial-gradient(1px 1px at 82% 28%, #dfe8ff, transparent),
    radial-gradient(1px 1px at 90% 8%, #fff, transparent),
    radial-gradient(1px 1px at 22% 38%, #fff, transparent),
    radial-gradient(1px 1px at 72% 40%, #cfe0ff, transparent);
  opacity: 0.8;
  animation: starTwinkle 5s ease-in-out infinite alternate;
}
.auth-mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  height: 45%;
  background: #0c1420;
  clip-path: polygon(0 78%, 8% 52%, 18% 68%, 30% 34%, 42% 64%, 55% 42%, 68% 70%, 80% 48%, 92% 66%, 100% 50%, 100% 100%, 0 100%);
}
.auth-city {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12%;
  height: 24%;
  background:
    linear-gradient(90deg, transparent 0 2%, #0a111b 2% 6%, transparent 6% 8%, #0a111b 8% 12%, transparent 12% 14%, #0a111b 14% 18%, transparent 18% 21%, #0a111b 21% 27%, transparent 27% 29%, #0a111b 29% 34%, transparent 34% 36%, #0a111b 36% 40%, transparent 40% 43%, #0a111b 43% 50%, transparent 50% 52%, #0a111b 52% 57%, transparent 57% 60%, #0a111b 60% 66%, transparent 66% 69%, #0a111b 69% 74%, transparent 74% 77%, #0a111b 77% 84%, transparent 84% 87%, #0a111b 87% 93%, transparent 93% 96%, #0a111b 96% 100%);
  opacity: 0.85;
}
.auth-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14%;
  background: linear-gradient(180deg, #1d2a22, #0c1210);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.auth-internal-test {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(224, 108, 90, 0.55);
  background: rgba(224, 108, 90, 0.12);
  color: #ffb3a6;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.auth-internal-test::before {
  content: "●";
  color: #e06c5a;
  animation: internalPulse 1.4s ease-in-out infinite;
}

.internal-test-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid rgba(224, 108, 90, 0.62);
  background:
    repeating-linear-gradient(135deg, rgba(224, 108, 90, 0.16) 0 9px, rgba(224, 108, 90, 0.06) 9px 18px),
    #24191a;
  box-shadow: 0 0 22px rgba(224, 108, 90, 0.12);
}
.internal-test-icon {
  font-size: 19px;
  line-height: 1;
}
.internal-test-copy {
  min-width: 0;
  flex: 1;
}
.internal-test-copy b {
  display: block;
  color: #ffb3a6;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.internal-test-copy small {
  display: block;
  margin-top: 1px;
  color: #c99a92;
  font-size: 9px;
}
.internal-test-tag {
  flex-shrink: 0;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(224, 108, 90, 0.45);
  background: rgba(224, 108, 90, 0.12);
  color: #ffb3a6;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.8px;
}
@keyframes internalPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.auth-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(30, 38, 50, 0.96), rgba(18, 24, 33, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}
.auth-brand > span {
  font-size: 30px;
}
.auth-brand b {
  display: block;
  font-size: 15px;
}
.auth-brand small {
  display: block;
  color: var(--muted-2);
  font-size: 8px;
  letter-spacing: 2px;
}
.auth-card h1 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.7px;
}
.auth-card p {
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.6;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: #11161e;
  border: 1px solid var(--line-soft);
  margin: 14px 0;
}
.auth-tabs button {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 7px;
  padding: 7px;
  font-size: 11px;
}
.auth-tabs button.active {
  background: rgba(240, 199, 94, 0.12);
  color: var(--gold);
  font-weight: 700;
}
.auth-form {
  display: grid;
  gap: 9px;
}
.auth-form label {
  display: grid;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
}
.auth-form input,
.auth-form select,
.auth-form textarea {
  width: 100%;
  background: #11161e;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 10px;
  font-size: 12px;
  outline: none;
}
.auth-form input:focus,
.auth-form textarea:focus {
  border-color: rgba(240, 199, 94, 0.55);
  box-shadow: 0 0 0 3px rgba(240, 199, 94, 0.08);
}
.auth-form textarea {
  resize: vertical;
  line-height: 1.5;
}
.auth-form .btn {
  margin-top: 4px;
}
.auth-code-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.auth-code-row input {
  min-width: 0;
  flex: 1;
  letter-spacing: 3px;
  font-family: ui-monospace, Consolas, monospace;
}
.auth-code-row .btn {
  flex-shrink: 0;
  min-width: 86px;
  margin-top: 0;
  padding: 0 9px;
  font-size: 10px;
}
.auth-link {
  display: block;
  margin: 10px auto 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.auth-link:hover {
  color: var(--gold);
}
.auth-info {
  color: #a8e6c1;
  background: rgba(111, 207, 151, 0.09);
  border: 1px solid rgba(111, 207, 151, 0.3);
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 10px;
  line-height: 1.4;
}
.auth-error {
  color: #f3a79c;
  background: rgba(224, 108, 90, 0.1);
  border: 1px solid rgba(224, 108, 90, 0.3);
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 10px;
  line-height: 1.4;
}
.auth-error.hidden {
  display: none;
}
.auth-note {
  margin-top: 12px !important;
  color: var(--muted-2);
  font-size: 9px !important;
  line-height: 1.5 !important;
}
.maintenance-card {
  text-align: center;
}
.maintenance-card .auth-brand {
  justify-content: center;
}
.maintenance-card .btn {
  margin-top: 12px;
}

.announcement-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 9px 11px;
  margin-bottom: 9px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(240, 199, 94, 0.13), rgba(30, 35, 44, 0.9));
  border: 1px solid rgba(240, 199, 94, 0.32);
  color: var(--text);
  cursor: pointer;
}
.announcement-bar.level-warning {
  border-color: rgba(224, 108, 90, 0.4);
  background: linear-gradient(135deg, rgba(224, 108, 90, 0.12), rgba(30, 35, 44, 0.9));
}
.announcement-icon {
  font-size: 17px;
}
.announcement-bar span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.announcement-bar b {
  display: block;
  font-size: 11px;
}
.announcement-bar small {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.announcement-body {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}

.account-card {
  border-color: rgba(240, 199, 94, 0.25);
}
.account-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.account-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 199, 94, 0.1);
  border: 1px solid rgba(240, 199, 94, 0.3);
  font-size: 20px;
}
.account-head > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.account-head b {
  display: block;
  font-size: 13px;
}
.account-head small {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cloud-pill {
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.cloud-pill.synced {
  color: var(--green);
  border-color: rgba(111, 207, 151, 0.35);
  background: rgba(111, 207, 151, 0.08);
}
.cloud-pill.saving {
  color: var(--gold);
  border-color: rgba(240, 199, 94, 0.35);
  background: rgba(240, 199, 94, 0.08);
}
.cloud-pill.error {
  color: var(--red);
  border-color: rgba(224, 108, 90, 0.35);
  background: rgba(224, 108, 90, 0.08);
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.mail-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.mail-item {
  padding: 11px;
  border-radius: 11px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
}
.mail-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mail-item-head b {
  font-size: 12px;
}
.mail-item p {
  margin: 5px 0 7px;
  font-size: 10px;
  line-height: 1.55;
}
.mail-item .btn {
  margin-top: 7px;
}

.player-tickets {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}
.ticket-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  padding: 9px;
  border-radius: 9px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  color: var(--muted);
  cursor: pointer;
}
.ticket-row b {
  display: block;
  color: var(--text);
  font-size: 11px;
}
.ticket-row small {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
  margin-top: 2px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-ticket-messages {
  display: grid;
  gap: 7px;
  margin: 10px 0;
  max-height: 320px;
  overflow: auto;
}
.ticket-message {
  padding: 8px 9px;
  border-radius: 8px;
  background: var(--panel-3);
  border-left: 2px solid var(--line);
}
.ticket-message.admin {
  border-left-color: var(--gold);
  background: rgba(240, 199, 94, 0.04);
}
.ticket-message.player {
  border-left-color: var(--teal);
}
.ticket-message small {
  display: block;
  color: var(--muted-2);
  font-size: 8px;
  margin-bottom: 3px;
}
.ticket-message p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

@media (min-width: 620px) {
  .modal-overlay {
    align-items: center;
    padding: 20px;
  }

  .modal-sheet {
    border-radius: 20px;
    border-bottom: 1px solid var(--line);
    max-height: 84vh;
  }
}

@media (max-width: 380px) {
  .res b {
    font-size: 11px;
  }

  .stage-title {
    font-size: 24px;
  }

  .unit-stats {
    font-size: 9px;
  }

  .todo-grid {
    grid-template-columns: 1fr;
  }
}