:root {
  --ink: #0e0c0a;
  --panel: rgba(22, 18, 14, 0.88);
  --line: rgba(228, 194, 122, 0.28);
  --gold: #e4c27a;
  --gold-deep: #8c6733;
  --paper: #f4ecdf;
  --muted: #b7ab96;
  --blood: #c4493a;
  --moss: #8ea572;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Outfit", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--paper);
  font-family: var(--sans);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(228, 194, 122, 0.16), transparent 55%),
    radial-gradient(800px 500px at 100% 100%, rgba(120, 42, 32, 0.2), transparent 50%),
    linear-gradient(180deg, #16130f 0%, var(--ink) 40%, #090807 100%);
  min-height: 100vh;
}
button, input { font: inherit; color: inherit; }
button {
  cursor: pointer;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
}
body { font-size: 18px; }
.vignette {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
}
#app { position: relative; z-index: 1; }

.wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 64px; }
.combat-wrap { width: min(1480px, calc(100% - 24px)); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0.02em; margin: 0; }
h1 { font-size: clamp(72px, 12vw, 132px); line-height: 0.85; }
h2 { font-size: clamp(36px, 5vw, 58px); line-height: 0.95; }
p { margin: 0; }
.eyebrow {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 8px;
}
.lead, .prose { color: var(--muted); line-height: 1.55; max-width: 68ch; font-size: 18px; }
.fine { color: var(--muted); font-size: 16px; margin-top: 10px; }
.tagline { margin: 18px 0 28px; font-family: var(--serif); font-size: 22px; font-style: italic; color: #ddd2bc; }

.title-screen, .prologue, .class-screen {
  min-height: 100vh;
  display: grid;
  align-content: center;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  position: relative;
}
.title-screen { padding: 48px 0 72px; }
.tower {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 90px;
  height: 70vh;
  background:
    linear-gradient(180deg, transparent, rgba(228, 194, 122, 0.05) 20%, rgba(228, 194, 122, 0.16)),
    repeating-linear-gradient(180deg, transparent 0 28px, rgba(228, 194, 122, 0.25) 28px 29px);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  opacity: 0.7;
}
.title-actions, .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.title-actions { margin-bottom: 18px; }

.btn, .tabs button, .chips button, .bag button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  padding: 14px 22px;
  min-height: 52px;
  font-size: 18px;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover, .tabs button:hover, .menu-card:hover, .offer button:hover, .bag button:hover { transform: translateY(-1px); border-color: var(--gold); }
.btn.solid, .tabs button.on, .chip.on {
  background: linear-gradient(180deg, #f0d7a2, #c49a4a);
  color: #24180b;
  border-color: transparent;
  font-weight: 600;
}
.btn.danger, .danger { border-color: rgba(196, 73, 58, 0.5); color: #f0b2aa; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.back { margin-top: 18px; }

.scene, .hero-panel, .menu-card, .offer, .class-card, .zone, .stat, .unit, .foe, .log, .result, .side-note {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.scene { padding: 36px; max-width: 760px; }
.prose { margin: 18px 0 28px; font-size: 18px; }
.scene .row { justify-content: space-between; }

.class-grid, .menu-grid, .zone-grid, .hire-grid { display: grid; gap: 14px; }
.class-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 22px; }
.menu-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.class-card, .zone, .menu-card, .offer, .class-mini { padding: 18px; text-align: left; }
.class-card { display: flex; flex-direction: column; gap: 8px; }
.class-card .mark, .portrait, .unit .mark, .foe .mark {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 28px;
  background: color-mix(in srgb, var(--hue, var(--gold)) 28%, #1a140e);
  border: 1px solid color-mix(in srgb, var(--hue, var(--gold)) 70%, transparent);
  color: var(--paper);
}
.class-card ul { margin: 0; padding-left: 16px; color: var(--muted); font-size: 13px; }
.skill { font-size: 16px; color: #ddd4c4; line-height: 1.45; }
.section-head { margin: 12px 0 18px; }
.section-head p { margin-top: 8px; }

.topbar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  align-items: center;
  margin-bottom: 18px;
}
.brand { font-family: var(--serif); font-size: 28px; padding: 4px 12px; background: transparent; }
.crumbs, .top-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.crumbs span, .top-hp em { color: var(--muted); font-size: 13px; font-style: normal; }
.gold { color: var(--gold) !important; }
.soul { color: #d7b6ff !important; }
.top-hp { grid-column: 1 / -1; }
.top-actions button { padding: 8px 12px; background: transparent; }

.hero-panel { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px; }
.portrait { width: 92px; height: 120px; border-radius: 24px; font-size: 52px; }
.meters { display: grid; gap: 8px; margin-top: 14px; }
.meters em, .stat span, .foe small, .unit small { color: var(--muted); font-style: normal; font-size: 15px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 14px 0; }
.stat { padding: 14px 16px; text-align: left; }
.stat strong { display: block; margin-top: 4px; font-size: 28px; font-family: var(--serif); }
.menu-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 14px;
  align-items: center;
  min-height: 112px;
  text-align: left;
}
.menu-card img {
  width: 76px;
  height: 76px;
  border-radius: 16px;
  object-fit: cover;
  grid-row: 1 / span 2;
}
.menu-card b { font-family: var(--serif); font-size: 28px; font-weight: 600; }
.menu-card span, .class-mini span { color: var(--muted); font-size: 16px; }
.side-note { margin-top: 14px; padding: 16px 18px; display: grid; gap: 8px; }

.bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 8px 0; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, #8ea572, #d7e2b8); }
.bar.mid span { background: linear-gradient(90deg, #c49a4a, #f0d7a2); }
.bar.low span { background: linear-gradient(90deg, #8a2e24, #e07a68); }
.top-hp .bar { margin-bottom: 4px; }

.tabs, .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chips button {
  background: transparent;
  color: var(--muted);
  border-color: rgba(228, 194, 122, 0.22);
}
.chips button.on {
  background: linear-gradient(180deg, #f0d7a2, #c49a4a);
  color: #24180b;
  border-color: transparent;
}
.offers, .bag { display: grid; gap: 10px; }
.offer, .bag li {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 14px 16px;
  background: #17140f;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.bag { list-style: none; padding: 0; margin: 12px 0 0; }
.bag .empty { color: var(--muted); }
.offer p, .bag small, .slot small { color: var(--muted); font-size: 13px; display: block; margin-top: 4px; }
.bag { list-style: none; padding: 0; }
.bag li, .empty { border: 1px solid var(--line); border-radius: 16px; background: rgba(0,0,0,0.2); }
.empty { padding: 16px; color: var(--muted); }
.row.tight { gap: 6px; }
.row.tight button, .bag button { padding: 8px 10px; border-radius: 999px; background: transparent; border: 1px solid var(--line); }
.hire-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.class-mini { border-radius: 18px; border: 1px solid var(--line); background: rgba(0,0,0,0.25); }
.rarity-common b { color: #f4ecdf; }
.rarity-rare b { color: #8eb7ff; }
.rarity-epic b { color: #d2a4ff; }
.rarity-legendary b { color: #f0b16a; }
.rarity-mythic b { color: #ff8d86; }

.zone-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 16px; }
.tone-forest { background: linear-gradient(180deg, rgba(40, 58, 36, 0.9), rgba(14, 16, 12, 0.92)); }
.tone-cave { background: linear-gradient(180deg, rgba(42, 40, 48, 0.92), rgba(12, 12, 14, 0.94)); }
.tone-swamp { background: linear-gradient(180deg, rgba(36, 48, 32, 0.92), rgba(12, 16, 12, 0.94)); }
.tone-ruins { background: linear-gradient(180deg, rgba(62, 48, 32, 0.92), rgba(16, 12, 10, 0.94)); }
.tone-abyss { background: linear-gradient(180deg, rgba(48, 24, 36, 0.94), rgba(10, 8, 12, 0.96)); }

.combat { display: grid; gap: 12px; }
.combat-head { display: grid; gap: 8px; }
.battle {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(300px, 1.25fr) minmax(220px, 0.9fr);
  gap: 14px;
  align-items: stretch;
}
.allies, .foes { display: grid; gap: 12px; align-content: start; }
.unit, .foe {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px;
  position: relative;
}
.art-wrap { position: relative; display: block; }
.foe-art, .unit-art {
  width: 190px;
  height: 240px;
  border-radius: 22px;
  object-fit: cover;
  display: block;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
}
.foe.is-boss .foe-art { width: 220px; height: 280px; }
.foe { border-radius: 18px; }
.foe.is-selected { outline: 2px solid var(--gold); }
.foe.is-boss { border-color: rgba(196, 73, 58, 0.7); }
.is-dead { opacity: 0.45; filter: grayscale(0.6); }
.log {
  min-height: 480px;
  max-height: 72vh;
  overflow: auto;
  padding: 18px 20px;
  font-size: 18px;
  line-height: 1.5;
}
.log p { margin: 0 0 4px; }
.lg-hit { color: #f4ecdf; }
.lg-crit { color: #f0b16a; }
.lg-miss { color: #8d867a; }
.lg-heal, .lg-good { color: #b7d39a; }
.lg-bad { color: #f0a097; }
.lg-loot { color: #f0b16a; font-weight: 600; }
.lg-item { color: #d7c4a4; }
.lg-gold { color: var(--gold); }
.lg-skill { color: #d7b6ff; }
.lg-sys { color: var(--muted); }
.result, .actions { padding: 14px; border-radius: 18px; background: rgba(0,0,0,0.28); border: 1px solid var(--line); }
.result h3 { margin-bottom: 8px; }
.result.win { border-color: rgba(142, 165, 114, 0.7); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: #f4ecdf; color: #24180b; padding: 12px 16px; border-radius: 999px;
  z-index: 5; box-shadow: var(--shadow); max-width: min(520px, calc(100% - 24px));
}
#loot-pop {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: rgba(6, 4, 3, 0.35);
}
#loot-pop[hidden] { display: none; }
.loot-window {
  width: min(440px, calc(100% - 32px));
  padding: 18px;
  border-radius: 22px;
  background: rgba(18, 14, 10, 0.94);
  border: 1px solid var(--gold);
  box-shadow: var(--shadow);
  animation: loot-in 0.25s ease;
}
.loot-window > p {
  font-family: var(--serif);
  font-size: 32px;
  margin-bottom: 10px;
}
.loot-card {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}
.loot-card img { width: 84px; height: 84px; border-radius: 16px; object-fit: cover; }
.loot-card em { font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; color: var(--gold); }
.loot-card b { display: block; font-family: var(--serif); font-size: 26px; }
.loot-card small, .loot-card span { display: block; color: var(--muted); font-size: 15px; }
@keyframes loot-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.tower { display: none; }
.title-screen {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 10vh 8vw;
  border-radius: 0;
  box-sizing: border-box;
  background:
    linear-gradient(90deg, rgba(8, 6, 4, 0.62) 0%, rgba(8, 6, 4, 0.22) 42%, rgba(8, 6, 4, 0.08) 100%),
    url("../img/title-tower.jpg") center center / cover no-repeat;
  background-color: #0c0a08;
}
.title-copy { max-width: 640px; }
.prologue { grid-template-columns: minmax(180px, 280px) minmax(0, 760px); gap: 18px; align-items: center; }
.prologue-art {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.class-art, .unit-art, .foe-art, .offer-icon, .face, .class-badge, .portrait, .class-mini img, .boss-chip, .slot-icon {
  object-fit: cover;
  background: #1a140e;
}
.class-art { width: 100%; height: 180px; border-radius: 16px; }
.portrait-stack { position: relative; width: 150px; }
.portrait { width: 150px; height: 200px; border-radius: 24px; display: block; border: 1px solid var(--line); }
.class-badge {
  position: absolute; right: -10px; bottom: -10px;
  width: 72px; height: 72px; border-radius: 18px;
  border: 2px solid #1a140e; box-shadow: var(--shadow);
}
.with-face { display: flex; gap: 16px; align-items: center; }
.face { width: 84px; height: 112px; border-radius: 18px; border: 1px solid var(--line); }
.slot {
  display: flex;
  gap: 14px;
  align-items: center;
  text-align: left;
  background: #17140f;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  min-height: 112px;
  color: var(--paper);
}
.slot-icon { width: 88px; height: 88px; border-radius: 14px; flex: none; object-fit: cover; background: #1a140e; }
.slot-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slot-copy em { font-style: normal; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.slot-copy b { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.1; }
.slot-copy small { color: var(--muted); font-size: 15px; }
.foe > b, .foe > .bar, .foe > small, .unit > b, .unit > .bar, .unit > small { width: 100%; }
.unit.is-strike .unit-art { animation: lunge-right 0.42s ease; }
.foe.is-strike .foe-art { animation: lunge-left 0.42s ease; }
.unit.is-hurt .unit-art, .foe.is-hurt .foe-art { animation: hurt-shake 0.45s ease; }
.float-dmg {
  position: absolute;
  left: 50%;
  top: 12%;
  font-family: var(--serif);
  font-size: 42px;
  font-style: normal;
  color: #ffd0c8;
  text-shadow: 0 3px 0 #4a120c;
  animation: float-dmg 0.75s ease forwards;
  pointer-events: none;
  z-index: 2;
}
.float-dmg.crit { color: #ffe08a; font-size: 52px; }
@keyframes lunge-right {
  0% { transform: translateX(0); }
  40% { transform: translateX(34px) scale(1.05); }
  100% { transform: translateX(0); }
}
@keyframes lunge-left {
  0% { transform: translateX(0); }
  40% { transform: translateX(-34px) scale(1.05); }
  100% { transform: translateX(0); }
}
@keyframes hurt-shake {
  0% { filter: none; transform: translateX(0); }
  25% { filter: brightness(1.9); transform: translateX(8px); }
  50% { transform: translateX(-8px); }
  100% { filter: none; transform: translateX(0); }
}
@keyframes float-dmg {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -40px); }
}
.slot-copy em { font-style: normal; }
.bag li { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; }
.offer { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; }
.offer-icon { width: 64px; height: 64px; border-radius: 14px; }
.class-mini { display: grid; grid-template-columns: 64px 1fr; gap: 4px 10px; align-items: center; }
.class-mini img { width: 64px; height: 64px; border-radius: 14px; grid-row: 1 / span 2; }
.zone { position: relative; overflow: hidden; min-height: 220px; }
.zone::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--scene) center/cover;
  opacity: 0.85;
}
.zone::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.15), rgba(10, 8, 6, 0.88));
}
.zone > * { position: relative; z-index: 1; }
.boss-row { display: flex; gap: 8px; margin-top: 10px; }
.boss-chip { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--line); }
.tower-list { display: grid; gap: 16px; margin: 8px 0 18px; }
.tower-band {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 280px;
  background: #16130f;
  border: 1px solid rgba(228, 194, 122, 0.35);
  border-radius: 22px;
  overflow: hidden;
}
.tower-band.is-here { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.tower-scene { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; }
.tower-copy { padding: 18px 20px 16px; }
.tower-copy h3 { font-size: 42px; margin-bottom: 6px; }
.tower-copy > p { font-size: 17px; color: #efe6d6; max-width: 62ch; }
.mob-row, .boss-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.mob-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #221c16;
  border: 1px solid rgba(228, 194, 122, 0.28);
  border-radius: 14px;
  padding: 6px 12px 6px 6px;
}
.mob-pill img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.mob-pill span { font-size: 16px; }
.boss-card { margin: 0; width: 132px; }
.boss-card img {
  width: 132px;
  height: 160px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  border: 1px solid rgba(228, 194, 122, 0.4);
}
.boss-card figcaption { margin-top: 6px; font-size: 15px; line-height: 1.25; }
.boss-card b { display: block; color: var(--gold); font-family: var(--serif); font-size: 20px; }
.combat { position: relative; overflow: hidden; padding: 14px; border-radius: 24px; }
.combat::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--scene) center/cover;
  opacity: 0.42;
  pointer-events: none;
}
.combat > * { position: relative; }
.ico { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; vertical-align: -4px; margin-right: 6px; }
.crumbs span { display: inline-flex; align-items: center; }
.actions .btn { display: inline-flex; align-items: center; }

.offer b { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.offer p, .bag small { font-size: 16px; }
.offer-icon, .bag .slot-icon { width: 80px; height: 80px; }
.bag li { grid-template-columns: 80px 1fr auto; }
.class-card ul { font-size: 16px; }

.shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
  width: min(1320px, 100%);
  margin: 0 auto;
}
.stage { padding: 28px 28px 80px; min-width: 0; }
.dock {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(12, 10, 8, 0.94);
  border-right: 1px solid var(--line);
}
.dock-hero { display: flex; gap: 12px; align-items: center; }
.dock-hero img { width: 72px; height: 92px; object-fit: cover; border-radius: 16px; }
.dock-hero b { display: block; font-family: var(--serif); font-size: 32px; line-height: 1; }
.dock-hero span { color: var(--muted); font-size: 16px; }
.dock-res { display: grid; gap: 8px; }
.dock-res div { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 28px; }
.dock-res img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.dock nav { display: flex; flex-direction: column; gap: 8px; }
.dock nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-family: var(--serif);
  font-size: 24px;
  padding: 8px 10px 8px 8px;
  border-radius: 16px;
  border: 1px solid rgba(228, 194, 122, 0.28);
  background: rgba(255, 255, 255, 0.05);
}
.dock nav button img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
}
.dock nav button:hover { border-color: var(--gold); background: rgba(228, 194, 122, 0.12); }
.dock nav button.on {
  background: linear-gradient(180deg, #f0d7a2, #c49a4a);
  color: #24180b;
  border-color: transparent;
}

.town-stage {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 520px;
}
.town-bg { width: 100%; height: 560px; object-fit: cover; display: block; }
.places {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  padding: 24px;
}
.place {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  padding: 16px;
  border-radius: 20px;
  text-align: left;
  background: linear-gradient(180deg, rgba(8, 6, 4, 0.05), rgba(8, 6, 4, 0.86));
  border: 1px solid rgba(228, 194, 122, 0.45);
}
.place img { width: 78px; height: 78px; border-radius: 16px; object-fit: cover; }
.place b { font-family: var(--serif); font-size: 36px; line-height: 1; }
.place span { font-size: 16px; color: #efe6d6; }
.place.on { background: rgba(24, 18, 12, 0.9); box-shadow: inset 0 0 0 2px var(--gold); }
.map-hint { margin-top: 16px; font-size: 18px; color: var(--muted); }
.shop-panel { margin-top: 18px; }
.tree-head { margin: 8px 0 16px; }
.tree-head h3 { margin-bottom: 6px; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.set-card {
  background: #17140f;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
}
.set-card b { font-size: 22px; }
.set-card li { color: #efe6d6; font-size: 16px; line-height: 1.35; }
.set-card header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 0; margin-bottom: 8px; }
.talent { --hue: var(--gold); }
.talent-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.talent-top h3 { font-size: clamp(36px, 4vw, 52px); }
.talent-points {
  min-width: 92px;
  padding: 10px 16px 12px;
  border-radius: 18px;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, rgba(228, 194, 122, 0.28), rgba(20, 16, 12, 0.9) 70%);
  border: 1px solid var(--gold);
}
.talent-points b { display: block; font-family: var(--serif); font-size: 42px; line-height: 0.9; color: var(--gold); }
.talent-points span { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.talent-board::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  left: 22%;
  top: 4%;
  border-radius: 50%;
  background: var(--hue);
  opacity: 0.22;
  filter: blur(48px);
  pointer-events: none;
}
.talent-board {
  position: relative;
  height: 640px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(360px 240px at 82% 55%, rgba(142, 165, 114, 0.16), transparent 70%),
    linear-gradient(180deg, #1c1712 0%, #100e0c 100%);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 24px 50px rgba(0, 0, 0, 0.35);
}
.talent-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.talent-wires path {
  fill: none;
  stroke: rgba(228, 194, 122, 0.22);
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.talent-wires path.live { stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(228, 194, 122, 0.7)); }
.gem {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 148px;
  min-height: 132px;
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(36, 30, 24, 0.96), rgba(16, 13, 10, 0.96));
  border: 1px solid rgba(228, 194, 122, 0.35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.gem b { font-family: var(--serif); font-size: 20px; line-height: 1.05; font-weight: 600; }
.gem-ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--gold);
  background: radial-gradient(circle at 50% 40%, rgba(228, 194, 122, 0.35), rgba(0, 0, 0, 0.35));
}
.gem-ring em { font-family: var(--serif); font-style: normal; font-size: 22px; color: var(--gold); }
.gem.b-s1 .gem-ring { border-color: var(--hue); }
.gem.b-s1 .gem-ring em { color: var(--hue); }
.gem.b-pass .gem-ring { border-color: var(--moss); }
.gem.b-pass .gem-ring em { color: var(--moss); }
.gem.b-cap { width: 168px; border-color: var(--gold); box-shadow: 0 0 0 1px rgba(228, 194, 122, 0.25), 0 16px 30px rgba(0, 0, 0, 0.4); }
.pips { display: flex; gap: 6px; min-height: 12px; align-items: center; }
.pips i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(228, 194, 122, 0.35); }
.pips i.lit { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.pips em { font-style: normal; color: var(--gold); font-size: 14px; }
.gem.locked { opacity: 0.48; filter: grayscale(0.45); }
.gem.done { box-shadow: inset 0 0 0 2px var(--gold), 0 10px 24px rgba(0, 0, 0, 0.35); }
.gem.ready { animation: gem-ready 1.8s ease-in-out infinite; }
.gem.focus { transform: translate(-50%, -50%) scale(1.05); border-color: var(--gold); z-index: 2; }
.trunk {
  position: absolute;
  bottom: 16px;
  transform: translateX(-50%);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
}
.talent-detail, .talent-over {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #17140f;
  border: 1px solid var(--line);
}
.talent-detail h3 { font-size: 32px; margin: 2px 0 6px; }
.talent-detail p { color: #efe6d6; max-width: 68ch; }
.talent-detail .btn, .talent-over .btn { flex: 0 0 auto; }
.talent-detail .btn[disabled], .talent-over .btn[disabled] { opacity: 0.45; cursor: default; }
.talent-over span { display: block; color: var(--muted); margin-top: 4px; }
@keyframes gem-ready {
  0%, 100% { box-shadow: 0 0 0 1px rgba(228, 194, 122, 0.35), 0 10px 24px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(228, 194, 122, 0.35); }
}
.set-card header { margin-top: 0; margin-bottom: 8px; }
.set-card header span { font-size: 22px; color: var(--gold); }
.set-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.set-card li { padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); }
.set-card li.on { background: rgba(196, 154, 74, 0.18); box-shadow: inset 0 0 0 1px var(--gold); }
.set-card.live { box-shadow: inset 0 0 0 2px var(--gold); }
.node .btn[disabled] { opacity: 0.45; cursor: default; }
.shop-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.ico { width: 28px; height: 28px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .dock {
    position: sticky;
    top: 0;
    height: auto;
    z-index: 4;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .dock nav { flex-direction: row; flex-wrap: wrap; }
  .dock nav button { flex: 1 1 30%; font-size: 22px; text-align: center; }
  .town-bg, .town-stage { height: auto; min-height: 420px; }
  .town-bg { height: 420px; }
  .battle, .hero-panel, .prologue, .tower-band { grid-template-columns: 1fr; }
  .tower-scene { height: 180px; min-height: 180px; }
  h1 { font-size: 76px; }
  .prologue-art { max-height: 240px; aspect-ratio: 16/9; }
  .offer, .bag li { grid-template-columns: 72px 1fr; }
  .offer .btn, .bag .row { grid-column: 1 / -1; }
  .talent-board { height: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
  .talent-wires, .trunk, .talent-board::before { display: none; }
  .gem, .gem.focus { position: static; transform: none; width: 100%; flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; }
  .talent-detail, .talent-over { flex-direction: column; align-items: stretch; }
}