/* Kartonath Wiki — Modern Styles v3 */

/* ─── Page base ─── */
body {
  background: var(--bg); color: var(--text);
  font-family: 'Crimson Text', Georgia, serif; line-height: 1.65; min-height: 100vh;
}

/* ─── Container with top spacing ─── */
.container { max-width: 920px; margin: 0 auto; padding: 28px 24px 50px; }

/* ─── Page hero area — NPC/item name gets dramatic treatment ─── */
h1 {
  font-family: 'Cinzel', serif; color: var(--gold); font-size: 1.7rem;
  margin: 0 0 4px 0; padding: 0; border: none;
  text-shadow: 0 0 24px rgba(200,168,78,0.15);
  letter-spacing: 0.05em;
}

/* ─── Section headers — more visual weight ─── */
h2 {
  font-family: 'Cinzel', serif; color: var(--gold-dark); font-size: 0.82rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin: 32px 0 14px; padding: 0 0 8px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
h2::after {
  content: ''; position: absolute; bottom: -1px; left: 0; width: 40px; height: 1px;
  background: var(--gold);
}
h3 { font-family: 'Cinzel', serif; color: var(--text-dim); font-size: 0.82rem; margin: 16px 0 8px; }

/* ─── Era badge — more prominent ─── */
.era-badge {
  display: inline-block; font-family: 'Cinzel', serif; font-size: 0.58rem;
  letter-spacing: 0.2em; padding: 4px 14px; text-transform: uppercase;
  margin-bottom: 16px;
}
.era-classic { border: 1px solid var(--gold-dark); color: var(--gold); background: rgba(200,168,78,0.08); }
.era-kunark { border: 1px solid #2e8b57; color: #90ee90; background: rgba(144,238,144,0.06); }
.era-velious { border: 1px solid #4682b4; color: #87ceeb; background: rgba(135,206,235,0.06); }

/* ─── Stat grid — glass card ─── */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px; background: rgba(200,168,78,0.06);
  border: 1px solid var(--border); margin-bottom: 28px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.stat-item {
  background: var(--bg-card); padding: 11px 14px;
  transition: background 0.2s;
}
.stat-item:hover { background: rgba(200,168,78,0.05); }
.stat-label {
  font-size: 0.58rem; color: var(--text-dim); text-transform: uppercase;
  font-family: 'Cinzel', serif; letter-spacing: 0.14em;
}
.stat-value, .stat-val {
  color: var(--text); font-size: 0.95rem; margin-top: 3px;
  font-family: 'Cinzel', serif;
}

/* ─── Loot / data tables ─── */
.loot-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.loot-table thead { position: sticky; top: 0; }
.loot-table th {
  text-align: left; font-family: 'Cinzel', serif; font-size: 0.6rem;
  letter-spacing: 0.16em; color: var(--gold-dark); padding: 10px 12px;
  border-bottom: 2px solid var(--border); text-transform: uppercase;
  background: rgba(200,168,78,0.04);
}
.loot-table td {
  padding: 8px 12px; border-bottom: 1px solid rgba(200,168,78,0.06);
  font-size: 0.88rem; transition: background 0.15s; vertical-align: middle;
}
.loot-table tr:hover td { background: rgba(200,168,78,0.04); }
.loot-table a { color: var(--text); text-decoration: none; transition: color 0.15s; }
.loot-table a:hover { color: var(--gold); }

/* ─── Item icon — polished ─── */
.item-icon {
  width: 40px; height: 40px; image-rendering: pixelated; vertical-align: middle;
  margin-right: 10px; background: #08080c;
  border: 1px solid rgba(200,168,78,0.2); box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ─── NPC card grid ─── */
.npc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.npc-card {
  background: var(--bg-card); border: 1px solid var(--border); padding: 14px 16px;
  text-decoration: none; display: block;
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
}
.npc-card:hover {
  border-color: rgba(200,168,78,0.4); transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.npc-card-name { font-family: 'Cinzel', serif; color: var(--gold); font-size: 0.82rem; letter-spacing: 0.03em; }
.npc-card-zone { font-size: 0.73rem; color: var(--text-dim); margin-top: 4px; }
.npc-card-hp { font-size: 0.73rem; color: var(--text-dim); }

/* ─── Chance bar visual ─── */
.chance-bar {
  display: inline-block; width: 60px; height: 6px;
  background: rgba(200,168,78,0.12); vertical-align: middle;
  margin-left: 6px; border-radius: 3px; overflow: hidden;
}
.chance-fill { height: 100%; background: var(--gold-dark); border-radius: 3px; }

/* ─── Search box ─── */
.search-box {
  width: 100%; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); padding: 8px 12px; font-size: 0.88rem;
  font-family: Georgia, serif; transition: border-color 0.2s;
}
.search-box:focus { outline: none; border-color: var(--gold-dark); }

/* ─── Wiki home sections ─── */
.wiki-home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.wiki-section {
  background: var(--bg-card); border: 1px solid var(--border); padding: 0;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.wiki-section:hover { border-color: rgba(200,168,78,0.3); box-shadow: 0 6px 20px rgba(0,0,0,0.25); transform: translateY(-1px); }
.wiki-section h2 {
  font-size: 0.72rem; background: rgba(200,168,78,0.05);
  margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.wiki-section h2::after { display: none; }
.wiki-section ul { list-style: none; padding: 12px 20px 16px; margin: 0; }
.wiki-section ul li { margin: 6px 0; font-size: 0.88rem; }
.wiki-section ul li a { color: var(--gold); text-decoration: none; transition: color 0.15s; }
.wiki-section ul li .container a:hover { color: #e8c860; }
.wiki-section .sub { color: var(--text-dim); font-size: 0.78rem; margin-left: 8px; }
.wiki-section .sub a { color: var(--text-dim); } .wiki-section .sub a:hover { color: var(--gold); }

/* ─── Pagination ─── */
.pagination { display: flex; gap: 4px; flex-wrap: wrap; margin: 20px 0; }
.pagination a, .pagination span {
  padding: 5px 12px; font-size: 0.76rem; font-family: 'Cinzel', serif;
  text-decoration: none; border: 1px solid var(--border); color: var(--text-dim);
  transition: all 0.15s;
}
.pagination a:hover { color: var(--gold); border-color: var(--gold-dark); background: rgba(200,168,78,0.04); }
.pagination .active { color: var(--gold); border-color: var(--gold); background: rgba(200,168,78,0.08); }

/* ─── Links ─── */
.container a { color: var(--gold); transition: color 0.15s; }
.container a:hover { color: #e8c860; }
p { margin-bottom: 10px; }

/* ─── NPC image treatment ─── */
img[alt][src*="npc_images"] {
  border: 1px solid rgba(200,168,78,0.25) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  border-radius: 4px;
}

/* ─── Back links / footer ─── */
.wiki-footer, div[style*="border-top"] {
  margin-top: 36px; padding-top: 16px;
}

/* ─── Responsive ─── */
@media (max-width: 700px) {
  .wiki-home-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .npc-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  h1 { font-size: 1.3rem; }
  .container { padding: 16px 14px 30px; }
}

/* ─── Classes for elements that had inline styles ─── */
.npc-portrait {
  border: 1px solid rgba(200,168,78,0.25);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  border-radius: 4px;
}
.td-gold { color: var(--gold); }
.td-dim { color: var(--text-dim); font-size: 0.8rem; }
.td-red { color: #f87171; }
.td-green { color: #34d399; }

/* ─── Wiki page footer ─── */
.wiki-footer {
  margin-top: 36px; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem; color: var(--text-dim);
  text-align: center;
}
.wiki-footer a { color: var(--gold-dark); }