@import url("styles.css?v=navmenu1");

body.npc-forest-page .page {
  max-width: 64rem;
}

.npc-toolbar {
  margin-bottom: 1.25rem;
}

.npc-toolbar .search-label {
  display: block;
  font-size: 0.8rem;
  color: var(--ts-muted);
  margin-bottom: 0.35rem;
}

.npc-toolbar input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #ffffff1a;
  background: var(--ts-surface);
  color: var(--ts-text);
  font: inherit;
}

.npc-tab-card {
  background: #222e35e6;
  border: 1px solid var(--ts-border-gold);
  border-radius: 1rem;
  overflow: visible;
  margin-bottom: 1.5rem;
  color: var(--ts-text);
  padding: 0 0 0.35rem;
}

.npc-tab-head {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #222e35;
  border-radius: 1rem 1rem 0 0;
}

.npc-tab-title {
  margin: 0;
  padding: 1.1rem 1.15rem 0.65rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ts-gold);
}

.npc-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0 0.9rem 0.55rem;
}

.npc-tab {
  flex: 1 1 auto;
  min-width: 6.5rem;
  border: 1px solid #ffffff14;
  border-radius: 0.5rem;
  background: var(--ts-surface);
  color: var(--ts-muted);
  font: inherit;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
}

.npc-tab:hover {
  border-color: #20b2aa55;
  color: var(--ts-text);
}

.npc-tab.is-active {
  background: #20b2aa22;
  border-color: var(--ts-jade);
  color: var(--ts-gold);
  font-weight: 600;
}

.npc-tab-panel {
  padding: 0.55rem 1.1rem 1.15rem;
  min-height: 12rem;
}

.npc-group-h {
  margin: 1rem 0 0.55rem;
  font-size: 1.05rem;
  color: var(--ts-gold);
}

.npc-group-h:first-child {
  margin-top: 0.15rem;
}

.npc-region {
  margin: 1.15rem 0 0.35rem;
  font-size: 1.05rem;
  text-decoration: underline;
  color: var(--ts-text);
}

.npc-place {
  margin: 0.65rem 0 0.25rem;
  font-weight: 600;
  color: var(--ts-gold);
}

.npc-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.npc-table col.col-name { width: 22%; }
.npc-table col.col-lv { width: 8%; }
.npc-table col.col-hp { width: 9%; }
.npc-table col.col-place { width: 27%; }
.npc-table col.col-drop { width: 34%; }

.npc-table th,
.npc-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.4rem 0.45rem;
  border-bottom: 1px solid #ffffff14;
  overflow-wrap: anywhere;
}

.npc-table th {
  color: var(--ts-muted);
  font-weight: 600;
  font-size: 0.75rem;
  position: sticky;
  top: 6.75rem;
  z-index: 2;
  background: #1c272c;
  box-shadow: 0 1px 0 #ffffff14;
}

.npc-table .cell-name,
.npc-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #222e35e6;
}

.npc-table th:first-child {
  z-index: 3;
  background: #1c272c;
}

.npc-table .num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.npc-table .cell-lv,
.npc-table .cell-hp {
  overflow: hidden;
  text-overflow: ellipsis;
}

.npc-drop {
  color: var(--ts-muted);
}

.npc-sacred-line {
  margin: 0.15rem 0;
  font-size: 0.9rem;
}

.elem-earth { color: #e6c35c; }
.elem-water { color: #6eb6ff; }
.elem-wind { color: #5fd68a; }
.elem-fire { color: #ff7a6e; }

.npc-empty {
  text-align: center;
  color: var(--ts-muted);
  padding: 2rem 1rem;
}

.npc-source {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ts-muted);
  text-align: center;
}

.npc-source a {
  color: var(--ts-jade);
}

@media (max-width: 640px) {
  .npc-table .col-drop,
  .npc-table th.col-drop,
  .npc-table td.col-drop {
    display: none;
  }

  .npc-table col.col-name { width: 34%; }
  .npc-table col.col-lv { width: 12%; }
  .npc-table col.col-hp { width: 14%; }
  .npc-table col.col-place { width: 40%; }

  .npc-table th {
    top: 8.6rem;
  }

  .npc-tab {
    flex: 1 1 40%;
    font-size: 0.8rem;
    padding: 0.55rem 0.4rem;
  }
}