:root {
  --ink: #f6ead2;
  --muted: #c5b38f;
  --panel: rgba(21, 19, 22, 0.94);
  --panel2: rgba(28, 25, 27, 0.97);
  --solid-panel: #111315;
  --solid-panel-2: #191816;
  --solid-button: #24221e;
  --line: #6d573d;
  --line-bright: #9b8352;
  --gold: #efc461;
  --good: #8fb36a;
  --bad: #9a6b3a;
  --cursor: url("assets/kenney/cursor-pack/PNG/Basic/Default/pointer_a.png") 2 2, auto;
  --cursor-hand: url("assets/kenney/cursor-pack/PNG/Basic/Default/hand_point.png") 6 2, pointer;
  --cursor-off: url("assets/kenney/cursor-pack/PNG/Basic/Default/cursor_disabled.png") 8 8, not-allowed;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #07080c;
  cursor: var(--cursor);
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

button, a { font: inherit; }
button, a { cursor: var(--cursor-hand); }

#game {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(960px, calc(100vw - 24px), calc((100vh - 24px) * 16 / 9));
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  border: 3px solid var(--line-bright);
  background: #07080c;
  box-shadow: 0 0 0 4px rgba(7, 8, 12, 0.86), 0 16px 38px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

#game canvas {
  width: 100% !important;
  height: 100% !important;
}

canvas { image-rendering: pixelated; }

#overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.is-running #overlay {
  inset: auto;
  left: 50%;
  top: 50%;
  width: min(960px, calc(100vw - 24px), calc((100vh - 24px) * 16 / 9));
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}

.hud, .run-panel, .cards, .weapon-skills, .camp, .result { pointer-events: auto; }
[data-view="run"] { display: none; }
.is-running [data-view="run"] { display: flex; }
.is-camp-open [data-view="run"] { display: none; }
body:not(.is-running):not(.is-camp-open):not(.has-result) .hud {
  display: flex;
}

body:not(.is-running):not(.is-camp-open):not(.has-result) .hud div {
  display: none;
}

.hud {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  align-items: start;
  gap: 8px;
}

.hud div, .run-panel, .card, .weapon-skill, .camp-side, .camp-main, .node {
  border: 2px solid var(--line);
  background: var(--solid-panel);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
}

.hud div {
  min-width: 86px;
  padding: 7px 9px;
}

.hud span, .camp-resources span, .kicker, .camp-main header span, .node span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
}

.hud strong, .camp-resources strong { color: var(--gold); }

.hud span,
.run-panel p,
#openCamp {
  color: var(--muted);
}

.hud strong {
  color: var(--gold);
}

#openCamp {
  margin-left: auto;
  padding: 9px 13px;
  border: 2px solid var(--line-bright);
  color: var(--ink);
  background: var(--solid-button);
}

.run-panel {
  position: absolute;
  top: 70px;
  left: 12px;
  width: min(286px, calc(100vw - 24px));
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.bar {
  position: relative;
  height: 14px;
  border: 1px solid #342821;
  background: #201615;
  overflow: hidden;
}

.bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: #d63a32;
}

.bar strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff2cf;
  font-size: 10px;
  line-height: 1;
  text-shadow: 1px 1px 0 #141010, -1px 1px 0 #141010, 1px -1px 0 #141010, -1px -1px 0 #141010;
  pointer-events: none;
}

.mana-bar i {
  background: #3f8bff;
}

.potion-belt {
  display: grid;
  grid-template-columns: repeat(6, 34px);
  gap: 5px;
}

.potion-belt button {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid #5f4a35;
  background: rgba(20, 27, 28, 0.92);
  padding: 0;
}

.potion-belt img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}

.potion-belt button::before {
  content: attr(data-size-label);
  position: absolute;
  left: 2px;
  top: 1px;
  color: #f1d27a;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 1px 1px 0 #050609;
}

.potion-belt strong {
  position: absolute;
  right: 2px;
  bottom: 1px;
  color: var(--gold);
  font-size: 11px;
  line-height: 1;
  text-shadow: 1px 1px 0 #050609;
}

.potion-belt button:disabled {
  cursor: var(--cursor-off);
  opacity: 0.46;
}

.potion-belt button.is-blocked {
  animation: card-blocked 0.24s ease-out;
}

.run-panel p {
  position: absolute;
  left: 12px;
  bottom: 28px;
  z-index: 25;
  max-width: min(460px, calc(100% - 24px));
  margin: 0;
  padding: 7px 9px;
  border: 2px solid rgba(109, 87, 61, 0.72);
  color: rgba(246, 234, 210, 0.92);
  background: rgba(17, 19, 21, 0.76);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 1px 1px 0 #050609;
  pointer-events: none;
  animation: run-log-fade 4.8s ease-out both;
}

.is-running .run-panel p {
  position: fixed;
  left: 12px;
  bottom: 86px;
  max-width: min(420px, calc(100% - 24px));
}

.run-panel p.is-fading {
  animation: none;
}

@keyframes run-log-fade {
  0%, 48% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}

.cards {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 35;
  gap: 8px;
}

.weapon-skills {
  position: absolute;
  right: 14px;
  bottom: 86px;
  z-index: 35;
  display: flex;
  gap: 8px;
}

.weapon-skills[hidden] {
  display: none;
}

.cards::before {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  color: #c5b38f;
  content: attr(data-piles);
  font-size: 11px;
  font-weight: 800;
  text-shadow: 1px 1px 0 #050609;
  white-space: nowrap;
  pointer-events: none;
}

.cards::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + 24px);
  max-width: min(420px, calc(100vw - 28px));
  padding: 5px 7px;
  border: 2px solid rgba(143, 179, 106, 0.76);
  color: #e7ffd0;
  background: rgba(17, 19, 21, 0.82);
  content: attr(data-active);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-align: right;
  text-shadow: 1px 1px 0 #050609;
  white-space: normal;
  pointer-events: none;
}

.cards:not([data-active])::after,
.cards[data-active=""]::after {
  display: none;
}

.version-badge {
  position: absolute;
  left: 8px;
  bottom: 6px;
  z-index: 30;
  color: #8f8066;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #050609;
  pointer-events: none;
}

.result {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  place-items: start center;
  padding: 18px;
  overflow: auto;
  background: rgba(7, 8, 12, 0.44);
}

.result.is-open { display: grid; }

body.has-result .camp {
  pointer-events: none;
}

.result-panel {
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  margin: auto 0;
  border: 2px solid var(--line);
  padding: 18px;
  overflow: auto;
  background: var(--solid-panel);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5);
}

.result h2 {
  margin: 4px 0 14px;
  font-size: 28px;
  line-height: 1;
}

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

.result-grid div {
  min-height: 58px;
  border: 2px solid var(--line);
  background: var(--solid-panel-2);
  padding: 8px;
}

.result-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.result-grid strong {
  color: var(--gold);
  font-size: 20px;
}

.result-breakdown {
  margin-top: 12px;
  border: 2px solid var(--line);
  background: var(--solid-panel-2);
  overflow: hidden;
}

.result-breakdown > span {
  display: block;
  padding: 8px 10px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.result-breakdown table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.result-breakdown th,
.result-breakdown td {
  padding: 7px 10px;
  border-top: 1px solid rgba(109, 87, 61, 0.58);
  color: var(--ink);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.result-breakdown th:first-child,
.result-breakdown td:first-child {
  width: 34%;
  color: var(--muted);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-breakdown th {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.result-actions button {
  min-height: 42px;
  border: 2px solid var(--line-bright);
  color: var(--ink);
  background: var(--solid-button);
  font-weight: 800;
}

.card,
.weapon-skill {
  width: 118px;
  min-height: 54px;
  padding: 8px;
  color: #f6ead2;
  font-weight: 800;
  text-align: left;
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  touch-action: manipulation;
}

.weapon-skill {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  column-gap: 7px;
}

.weapon-skill img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}

.weapon-skill strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card small,
.weapon-skill small {
  display: block;
  margin-top: 3px;
  color: #c5b38f;
}

.weapon-skill small {
  grid-column: 2;
}

.card::after {
  position: absolute;
  inset: -24px;
  background: linear-gradient(115deg, transparent 36%, rgba(185, 247, 255, 0.42) 48%, transparent 60%);
  content: "";
  opacity: 0;
  transform: translateX(-80%);
  pointer-events: none;
}

.card.is-drawn {
  animation: card-draw-in 0.28s ease-out;
}

.card.is-playing,
.weapon-skill.is-playing {
  animation: card-play 0.38s ease-out;
}

.card.is-active,
.weapon-skill:not(:disabled) {
  border-color: var(--good);
  box-shadow: 0 0 0 2px rgba(143, 179, 106, 0.18), 0 4px 0 rgba(0, 0, 0, 0.45);
}

.card.is-blocked,
.weapon-skill.is-blocked {
  animation: card-blocked 0.24s ease-out;
}

.card.is-playing::after {
  animation: card-shine 0.38s ease-out;
}

@keyframes card-draw-in {
  0% {
    opacity: 0.4;
    transform: translateY(10px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes card-play {
  0% { transform: translateY(0) scale(1); }
  36% {
    border-color: #b9f7ff;
    box-shadow: 0 0 0 2px rgba(185, 247, 255, 0.24), 0 6px 0 rgba(0, 0, 0, 0.5);
    transform: translateY(-8px) scale(1.04);
  }
  100% { transform: translateY(0) scale(1); }
}

@keyframes card-shine {
  0% {
    opacity: 0;
    transform: translateX(-80%);
  }

  30% { opacity: 1; }

  100% {
    opacity: 0;
    transform: translateX(80%);
  }
}

@keyframes card-blocked {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% {
    border-color: #ff9f92;
    transform: translateX(4px);
  }
  75% { transform: translateX(-2px); }
}

.card:disabled, .weapon-skill:disabled, .node:disabled, .primary:disabled {
  cursor: var(--cursor-off);
  filter: grayscale(0.7);
  opacity: 0.6;
}

.camp {
  position: absolute;
  inset: 0;
  display: none;
  grid-template-columns: 300px minmax(0, 1fr);
  align-content: center;
  justify-content: stretch;
  gap: 14px;
  padding: 22px;
  overflow: auto;
  background: linear-gradient(90deg, rgba(7, 8, 12, 0.94), rgba(7, 8, 12, 0.72));
}

.camp.is-open { display: grid; }

.camp-side, .camp-main {
  height: min(642px, calc(100vh - 44px));
  min-height: 520px;
  background: var(--solid-panel);
}

.camp-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  outline: 1px solid rgba(239, 196, 97, 0.18);
  outline-offset: -8px;
}

.camp-login {
  width: 100%;
}

h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1;
}

.camp-side p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.camp-resources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.camp-resources div {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 2px solid var(--line);
  background: var(--solid-panel-2);
}

.camp-resources span {
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
  text-transform: none;
}

.hero-summary {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 2px solid var(--line);
  background: var(--solid-panel-2);
}

.is-choosing-loadout .hero-summary {
  display: none;
}

.hero-level-line,
.hero-race-line,
.xp-line > div:first-child,
.hero-points-line,
.hero-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hero-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-summary strong {
  color: var(--gold);
  font-weight: 900;
}

.xp-bar {
  height: 12px;
  margin-top: 6px;
  border: 1px solid #342821;
  background: #201615;
}

.xp-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: #7fb7d8;
}

.hero-points-line {
  padding: 7px 8px;
  border: 1px solid rgba(155, 131, 82, 0.5);
  background: rgba(8, 9, 10, 0.55);
}

.hero-stat-list {
  display: grid;
  gap: 6px;
}

.hero-stat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  padding: 6px 7px;
  border: 1px solid rgba(155, 131, 82, 0.5);
  background: rgba(8, 9, 10, 0.55);
}

.hero-stat-row button {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line-bright);
  background: var(--solid-button);
  color: var(--ink);
  font: 900 19px/1 system-ui, sans-serif;
  cursor: var(--cursor-hand);
}

.hero-stat-row button:disabled {
  border-color: rgba(155, 131, 82, 0.45);
  color: #8c8171;
  background: #252124;
  cursor: var(--cursor-off);
}

.start-loadout {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--line-bright);
  background: var(--solid-panel-2);
}

.start-loadout[hidden] {
  display: none;
}

.start-loadout-head {
  display: grid;
  gap: 2px;
}

.start-loadout-head span,
.start-loadout button small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.start-loadout-head span {
  text-transform: uppercase;
}

.start-loadout-head strong {
  color: var(--gold);
  font-size: 15px;
  font-weight: 900;
}

.start-loadout-grid {
  display: grid;
  gap: 6px;
}

.start-loadout button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 8px;
  border: 2px solid var(--line);
  background: var(--solid-button);
  color: var(--ink);
  text-align: left;
  cursor: var(--cursor-hand);
}

.start-loadout button:hover,
.start-loadout button:focus-visible {
  border-color: var(--line-bright);
}

.start-loadout img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}

.start-loadout-choice-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--line-bright);
  color: var(--gold);
  background: rgba(8, 9, 10, 0.55);
  font-size: 15px;
  line-height: 1;
}

.start-loadout button span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.start-loadout button strong,
.start-loadout button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.25;
}

.hero-stat-row button[data-attribute-preview]::after,
.attribute-card button[data-attribute-preview]::after {
  content: attr(data-attribute-preview);
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  z-index: 80;
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border: 2px solid var(--line-bright);
  background: rgba(12, 15, 15, 0.98);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.55);
  color: var(--ink);
  font: 900 11px/1.35 system-ui, sans-serif;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateY(-50%) translateX(4px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: pre-line;
}

.hero-stat-row button[data-attribute-preview]:hover::after,
.hero-stat-row button[data-attribute-preview]:focus-visible::after,
.attribute-card button[data-attribute-preview]:hover::after,
.attribute-card button[data-attribute-preview]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%);
}

.attribute-card button[data-attribute-preview]::after {
  left: 50%;
  right: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}

.attribute-card button[data-attribute-preview]:hover::after,
.attribute-card button[data-attribute-preview]:focus-visible::after {
  transform: translateX(-50%);
}

.level-select {
  display: none;
  gap: 6px;
}

.camp.is-choosing-level::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 34;
  background: rgba(4, 5, 7, 0.68);
}

.camp.is-choosing-level .level-select {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 35;
  width: min(620px, calc(100vw - 32px));
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--line);
  background: var(--solid-panel);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.52);
  transform: translate(-50%, -50%);
}

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

.level-act-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.level-select .level-act-tabs button {
  min-height: 34px;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  padding: 0 4px;
  text-align: center;
  font-size: 12px;
}

.level-act-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 1px 4px;
}

.level-act-title strong {
  font-size: 15px;
}

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

.level-select-head button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  color: var(--ink);
  background: var(--solid-button);
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.level-select button {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 2px solid var(--line);
  color: var(--muted);
  background: var(--solid-panel-2);
  font-weight: 900;
  text-align: left;
}

.level-select .level-card {
  min-height: 58px;
}

.level-card span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.level-card strong,
.level-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-card em {
  color: var(--gold);
  font-size: 11px;
  font-style: normal;
}

.level-card.dungeon {
  border-color: #6d6f7a;
  background: #20242b;
}

.level-card.boss {
  border-color: #b87054;
  background: #2c1e1c;
}

.level-select .level-select-head button {
  min-height: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  text-align: center;
}

.level-select button.active {
  border-color: var(--line-bright);
  color: var(--ink);
  background: var(--solid-button);
}

.level-select small {
  color: var(--gold);
  font-size: 11px;
  white-space: nowrap;
}

.level-select button:disabled {
  color: #766851;
  cursor: var(--cursor-off);
  filter: grayscale(0.65);
  opacity: 0.7;
}

.level-tbc {
  grid-column: 1 / -1;
  min-height: 110px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 18px;
  border: 2px dashed rgba(155, 131, 82, 0.5);
  color: var(--muted);
  text-align: center;
}

.level-tbc strong {
  color: var(--ink);
  font-size: 18px;
}

.level-tbc span {
  max-width: 300px;
  font-size: 12px;
}

.primary, .camp-side a {
  min-height: 42px;
  border: 2px solid var(--line-bright);
  color: var(--ink);
  background: var(--solid-button);
  font-weight: 800;
  text-align: center;
}

.camp-side a {
  display: grid;
  place-items: center;
  margin-top: 0;
  text-decoration: none;
}

.camp-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.camp-main header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid rgba(239, 196, 97, 0.22);
}

.camp-main header button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  color: var(--ink);
  background: var(--solid-button);
  line-height: 1;
  padding: 0;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 6px;
  padding: 10px;
}

.tabs button {
  min-height: 36px;
  border: 2px solid var(--line);
  color: var(--muted);
  background: var(--solid-panel-2);
  font-weight: 800;
}

.tabs button.active {
  color: var(--ink);
  border-color: var(--line-bright);
  background: var(--solid-button);
}

.skill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px 10px;
}

.skill-tabs[hidden] {
  display: none;
}

.skill-tabs button {
  min-height: 30px;
  border: 2px solid rgba(239, 196, 97, 0.32);
  color: var(--muted);
  background: rgba(16, 21, 23, 0.92);
  font-size: 12px;
  font-weight: 800;
}

.skill-tabs button.active {
  color: var(--ink);
  border-color: var(--line-bright);
  background: var(--solid-button);
}

.menu-points {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 10px 10px;
  padding: 8px 10px;
  border: 2px solid rgba(239, 196, 97, 0.34);
  color: var(--ink);
  background: rgba(16, 21, 23, 0.92);
  font-weight: 900;
}

.menu-points[hidden] {
  display: none;
}

.menu-points span {
  color: var(--muted);
  font-size: 12px;
}

.menu-points strong {
  color: var(--gold);
  font-size: 18px;
}

.tree {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 14px;
  overflow: auto;
  background: rgba(5, 7, 8, 0.64);
}

.admin-management-tree {
  padding: 10px;
}

.admin-panel {
  display: grid;
  gap: 10px;
}

.admin-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  align-items: end;
  gap: 12px;
  padding: 10px;
  border: 2px solid rgba(239, 196, 97, 0.28);
  background: rgba(16, 21, 23, 0.92);
}

.admin-head span,
.admin-summary span,
.admin-row span,
.admin-row small,
.admin-summary em {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-head strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 18px;
}

.admin-head label {
  display: grid;
  gap: 5px;
}

.admin-head input {
  width: 100%;
  min-height: 38px;
  border: 2px solid var(--line);
  color: var(--ink);
  background: #14171a;
  font: 800 13px system-ui, sans-serif;
  padding: 0 10px;
  outline: none;
}

.admin-head input:focus {
  border-color: var(--line-bright);
}

.admin-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-summary div {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 2px solid rgba(155, 131, 82, 0.55);
  background: var(--solid-panel-2);
}

.admin-summary strong {
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
}

.admin-summary em {
  font-style: normal;
  text-transform: none;
}

.admin-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(230px, 0.8fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid rgba(239, 196, 97, 0.28);
  background: rgba(12, 15, 17, 0.86);
}

.admin-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-editor label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.admin-editor span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-editor input,
.admin-editor select {
  width: 100%;
  min-height: 36px;
  border: 2px solid var(--line);
  color: var(--ink);
  background: #14171a;
  font: 800 13px system-ui, sans-serif;
  padding: 0 9px;
  outline: none;
}

.admin-editor input:focus,
.admin-editor select:focus {
  border-color: var(--line-bright);
}

.admin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-actions button {
  min-height: 36px;
  border: 2px solid rgba(239, 196, 97, 0.4);
  color: var(--ink);
  background: linear-gradient(180deg, #2b3335, #171b1d);
  box-shadow: 0 3px 0 #07090a;
  cursor: pointer;
  font: 900 11px system-ui, sans-serif;
  text-transform: uppercase;
}

.admin-actions button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #07090a;
}

.admin-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.admin-list {
  min-width: 0;
  border: 2px solid rgba(155, 131, 82, 0.5);
  background: rgba(10, 12, 14, 0.72);
}

.admin-list h2 {
  margin: 0;
  padding: 10px;
  border-bottom: 1px solid rgba(239, 196, 97, 0.2);
  color: var(--ink);
  font-size: 14px;
}

.admin-list > div {
  max-height: 430px;
  display: grid;
  gap: 6px;
  padding: 8px;
  overflow: auto;
}

.admin-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(155, 131, 82, 0.44);
  background: rgba(8, 9, 10, 0.62);
}

.admin-row img,
.admin-fallback {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

.admin-fallback {
  display: grid;
  place-items: center;
  border: 1px solid rgba(239, 196, 97, 0.35);
  color: var(--gold);
  background: #191d21;
  font-size: 16px;
}

.admin-row div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-row strong,
.admin-row span,
.admin-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-row strong {
  color: var(--ink);
  font-size: 13px;
}

.admin-row small {
  font-size: 10px;
  text-transform: none;
}

.admin-row em {
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gold);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.admin-empty {
  margin: 0;
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
}

.admin-sql {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 2px solid rgba(86, 180, 158, 0.42);
  background: rgba(9, 17, 18, 0.9);
}

.admin-sql header,
.admin-catalog-toolbar,
.admin-catalog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}

.admin-sql header {
  justify-content: space-between;
}

.admin-sql header span,
.admin-sql label span,
.admin-json summary,
.admin-message {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-sql header strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
}

.admin-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-sql label {
  display: grid;
  min-width: 0;
  flex: 1 1 160px;
  gap: 5px;
}

.admin-sql input,
.admin-sql select,
.admin-sql textarea {
  width: 100%;
  min-height: 36px;
  border: 2px solid rgba(86, 180, 158, 0.45);
  color: var(--ink);
  background: #11191a;
  font: 800 12px system-ui, sans-serif;
  padding: 7px 9px;
  outline: none;
}

.admin-sql textarea {
  min-height: 74px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.35;
}

.admin-json textarea {
  min-height: 190px;
  margin-top: 8px;
}

.admin-check {
  align-content: end;
}

.admin-check input {
  width: 22px;
  min-height: 22px;
}

.admin-sql button {
  min-height: 36px;
  border: 2px solid rgba(86, 180, 158, 0.5);
  color: var(--ink);
  background: linear-gradient(180deg, #203d3a, #13211f);
  box-shadow: 0 3px 0 #07090a;
  cursor: pointer;
  font: 900 11px system-ui, sans-serif;
  text-transform: uppercase;
}

.admin-message {
  margin: 0;
  color: var(--gold);
}

.tree.is-training {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.tree.is-training.is-panning {
  cursor: grabbing;
}

.tree-inner {
  position: relative;
  width: 770px;
  height: 520px;
  will-change: transform;
}

.tree.is-training .tree-inner {
  position: absolute;
  left: 50%;
  top: 50%;
}

.link {
  position: absolute;
  z-index: 0;
  height: 3px;
  background: #43362d;
  transform-origin: 0 50%;
}

.link.active { background: #bd8e47; }

.node {
  position: absolute;
  z-index: 1;
  width: 190px;
  height: 90px;
  display: grid;
  grid-template-columns: 1fr 45px;
  grid-template-rows: auto 1fr auto;
  gap: 2px 8px;
  padding: 8px;
  color: var(--ink);
  text-align: left;
}

.node strong {
  min-width: 0;
  line-height: 1.05;
}

.node em {
  color: var(--gold);
  font-style: normal;
  text-align: right;
  white-space: nowrap;
}

.node span {
  grid-column: 1 / 3;
  text-transform: none;
  line-height: 1.15;
}

.node b {
  grid-column: 1 / 3;
  color: var(--gold);
  font-size: 12px;
}

.node.locked { border-color: #3d332d; background: #191719; }
.node.maxed { border-color: #7da36c; }


@media (max-width: 760px) {
  .hud {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .hud div { min-width: 0; }
  #openCamp { grid-column: 3; margin-left: 0; }
  .cards {
    right: 10px;
    left: 10px;
    width: auto;
    justify-content: center;
  }
  .weapon-skills {
    right: 10px;
    left: 10px;
    bottom: 72px;
    width: auto;
    justify-content: center;
  }
  .card,
  .weapon-skill { width: min(31%, 150px); }
  .camp { grid-template-columns: 1fr; padding: 10px; }
  .camp-side, .camp-main { height: auto; min-height: 0; }
}