/* Systems pages (crafting professions, Farming, Forge, Gates) */

.systems-intro {
  max-width: 74ch;
}

/* ---------- Index cards ---------- */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.systems-card {
  position: relative;
  display: block;
  background: linear-gradient(180deg, #2a241b, #1e1a14);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.systems-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--sys-accent, #a98e59);
}
.systems-card:hover {
  border-color: var(--sys-accent, #a98e59);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.systems-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(169, 142, 89, .12);
  color: var(--sys-accent, #e7d4a2);
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.systems-card__title {
  font-weight: 800;
  color: #e7d4a2;
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.systems-card__desc {
  margin: 0;
  font-size: .87rem;
  color: #cfc8b3;
  opacity: .8;
  line-height: 1.45;
}

/* ---------- Item chips (materials / rewards) ---------- */
.item-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1c1712;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px 3px 4px;
  font-size: .82rem;
  white-space: nowrap;
  line-height: 1;
}
.item-chip img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
  border-radius: 4px;
  background: rgba(255,255,255,.04);
}
.item-chip b { color: #e7d4a2; font-weight: 700; }

.materials-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- Tables ---------- */
.systems-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin: 10px 0 22px;
}
table.systems-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
table.systems-table thead th {
  text-align: left;
  padding: 10px 12px;
  background: linear-gradient(180deg, #3a3122, #2a2418);
  color: #e7d4a2;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid #a98e59;
  white-space: nowrap;
}
table.systems-table tbody td {
  padding: 9px 12px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}
table.systems-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.015); }
table.systems-table tbody tr:hover { background: rgba(169, 142, 89, .08); }
table.systems-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.systems-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.systems-name img {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
  flex: none;
}
.systems-name b { color: #ece4d4; }

/* ---------- Rank badges ---------- */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  font-weight: 800;
  font-size: .85rem;
  background: #3a3122;
  color: #e7d4a2;
  border: 1px solid #a98e59;
  box-shadow: 0 0 0 3px rgba(169,142,89,.08);
}
.rank-badge--E { background: #24361f; border-color: #4c7a3a; color: #cfe9d1; }
.rank-badge--D { background: #1f2c36; border-color: #3a5f7a; color: #cfe0e9; }
.rank-badge--C { background: #362a1f; border-color: #7a5a3a; color: #e9d7cf; }
.rank-badge--B { background: #362034; border-color: #7a3a6f; color: #e9cfe4; }
.rank-badge--A { background: #3a1f1f; border-color: #7a3a3a; color: #e9cfcf; }
.rank-badge--S { background: #1f1f3a; border-color: #3a3a7a; color: #cfcfe9; }
.rank-badge--SS { background: #000; border-color: #ffd75e; color: #ffd75e; }

.rank-section {
  margin: 28px 0 10px;
  padding: 10px 14px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.03);
  border-left: 4px solid #a98e59;
}
.rank-section--E { border-left-color: #4c7a3a; }
.rank-section--D { border-left-color: #3a5f7a; }
.rank-section--C { border-left-color: #7a5a3a; }
.rank-section--B { border-left-color: #7a3a6f; }
.rank-section--A { border-left-color: #7a3a3a; }
.rank-section--S { border-left-color: #3a3a7a; }
.rank-section--SS { border-left-color: #ffd75e; }
.rank-section__title { font-weight: 800; color: #e7d4a2; }
.rank-section__meta {
  color: #cfc8b3;
  font-size: .85rem;
  opacity: .75;
}

tr.row--upgrade td {
  background: rgba(169, 142, 89, .1) !important;
}
tr.row--upgrade .systems-name b::before {
  content: "\2699\fe0e";
  margin-right: 6px;
  opacity: .8;
}
tr.row--upgrade .unlock-tag {
  display: inline-block;
  margin-top: 4px;
  font-size: .75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,215,94,.12);
  color: #ffd75e;
  border: 1px solid rgba(255,215,94,.35);
}

/* ---------- Gates dungeon cards ---------- */
.dungeon-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 14px 0;
  background: radial-gradient(140% 140% at 0% 0%, rgba(169,142,89,.06), rgba(255,255,255,.015));
}
.dungeon-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.dungeon-card__name {
  font-weight: 800;
  color: #e7d4a2;
  font-size: 1.1rem;
}
.dungeon-card__meta {
  color: #cfc8b3;
  opacity: .8;
  font-size: .85rem;
}
.dungeon-card__meta span:not(:last-child)::after { content: " \00b7 "; opacity: .6; }

.loot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
.loot-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.15);
  text-align: center;
}
.loot-tile img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}
.loot-tile__name {
  font-size: .72rem;
  color: #cfc8b3;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loot-tile__chance {
  font-size: .7rem;
  font-weight: 700;
  color: #cfc8b3;
  opacity: .7;
}
.loot-tile--guaranteed {
  border-color: #a3e9a5;
  background: rgba(163,233,165,.06);
}
.loot-tile--guaranteed .loot-tile__chance { color: #a3e9a5; opacity: 1; }
.loot-tile--rare { border-color: #ffd75e; }
.loot-tile--rare .loot-tile__chance { color: #ffd75e; opacity: 1; }
.loot-tile--xp {
  background: rgba(126, 178, 255, .08);
  border-color: #7eb2ff;
}
.loot-tile--xp .loot-tile__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* ---------- Forge ---------- */
.forge-tier-table td, .forge-tier-table th { text-align: center; }
.forge-tier-table td:first-child, .forge-tier-table th:first-child { text-align: left; }

.forge-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 14px 0 22px;
}
.forge-rule {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,.02);
}
.forge-rule__num {
  font-weight: 800;
  font-size: 1.3rem;
  color: #e7d4a2;
  display: block;
}
.forge-rule__label {
  font-size: .82rem;
  color: #cfc8b3;
  opacity: .8;
}

/* ---------- Cooking: dish bonuses ---------- */
.bonus-cell { min-width: 190px; }
.bonus-list { display: flex; flex-wrap: wrap; gap: 5px; }
.bonus-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #1c1712;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}
.bonus-chip--skill  { color: #ffb37a; border-color: rgba(255,150,80,.4);  background: rgba(255,150,80,.09); }
.bonus-chip--health { color: #9fe0a0; border-color: rgba(110,200,110,.4); background: rgba(110,200,110,.09); }
.bonus-chip--mana   { color: #8fc4ff; border-color: rgba(100,160,255,.4); background: rgba(100,160,255,.09); }
.bonus-chip--speed  { color: #ffe08a; border-color: rgba(255,215,94,.4);  background: rgba(255,215,94,.09); }
.bonus-chip--regen  { color: #8fe6d8; border-color: rgba(90,210,190,.4);  background: rgba(90,210,190,.09); }
.bonus-duration {
  display: block;
  margin-top: 4px;
  font-size: .75rem;
  color: #cfc8b3;
  opacity: .7;
}
.seasoning-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  color: #e7d4a2;
  border: 1px solid rgba(231,212,162,.4);
  background: rgba(231,212,162,.09);
}
.bonus-note {
  display: block;
  margin-top: 4px;
  font-size: .78rem;
  color: #cfc8b3;
  opacity: .75;
  line-height: 1.35;
}

/* ---------- Farming: numbered steps ---------- */
.steplist { margin: 10px 0 12px 22px; list-style: decimal; }
.steplist > li { margin: 7px 0; line-height: 1.45; }

/* ---- Hunting guide ---- */
.hg-intro { color:#cfc6b0; line-height:1.6; margin:6px 2px 12px; }
.hg-intro a { color:#f1c96b; }
.hg-tabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:6px; margin:4px 0 10px; }
.hg-tab { cursor:pointer; border:1px solid #5c4f3d; border-radius:10px; padding:8px 6px; background:linear-gradient(180deg,#2e271d,#221d16); color:#d9cba4; display:flex; flex-direction:column; align-items:center; gap:2px; transition:.15s; }
.hg-tab:hover { border-color:#a98e59; }
.hg-tab.is-active { background:linear-gradient(180deg,#e9b949,#c48a1f); color:#2a1d07; border-color:#f3cf72; box-shadow:0 2px 10px rgba(233,185,73,.25); }
.hg-tab__lvl { font-family:Cinzel,serif; font-weight:800; font-size:1.05rem; }
.hg-tab__count { font-size:.72rem; opacity:.8; }
.hg-tools { margin:0 0 10px; }
.hg-search { width:100%; box-sizing:border-box; padding:9px 12px; border-radius:10px; border:1px solid #5c4f3d; background:#1a1611; color:#eadfc3; font-size:.95rem; }
.hg-search:focus { outline:none; border-color:#e9b949; }
.hg-cities { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.hg-city { cursor:pointer; padding:5px 11px; border-radius:999px; border:1px solid #4a3f2f; background:#221d16; color:#cfc6b0; font-size:.85rem; }
.hg-city:hover { border-color:#a98e59; }
.hg-city.is-active { background:#6b5a3e; color:#fff3d1; border-color:#a98e59; }
.hg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.hg-card { display:flex; flex-direction:column; background:linear-gradient(180deg,#2a241b,#1d1914); border:1px solid #4a3f2f; border-radius:12px; padding:10px 12px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.hg-card:hover { border-color:#7a6748; }
.hg-card__head { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.hg-card__title { margin:0 0 4px; font-family:Cinzel,serif; font-size:1rem; color:#f1dca0; line-height:1.25; }
.hg-card__meta { display:flex; flex-wrap:wrap; gap:4px; }
.hg-badge { font-size:.72rem; padding:2px 7px; border-radius:999px; background:#3a3125; color:#d9cba4; border:1px solid #5c4f3d; }
.hg-badge--city { background:#3d4a2a; border-color:#5f7a3e; color:#e3f0c8; }
.hg-badge--prem { background:#5a3b12; border-color:#a7742a; color:#ffe2a8; }
.hg-card__level { flex:none; min-width:44px; text-align:center; padding:6px 6px; border-radius:10px; background:#7a2e1c; border:1px solid #b5553a; color:#ffe9c9; font-weight:800; font-size:.95rem; }
.hg-monsters { list-style:none; padding:0; margin:10px 0 4px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.hg-mon { display:flex; flex-direction:column; align-items:center; text-align:center; background:rgba(0,0,0,.22); border-radius:8px; padding:4px 2px 5px; }
.hg-mon img { width:48px; height:48px; image-rendering:pixelated; }
.hg-mon__name { font-size:.74rem; color:#e6dcc2; line-height:1.15; margin-top:2px; }
.hg-mon__exp { font-size:.7rem; color:#e9b949; font-weight:700; }
.hg-more { margin:2px 0 0; font-size:.75rem; color:#a99a7a; text-align:right; }
.hg-card__foot { margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.hg-copy { cursor:pointer; font-size:.8rem; padding:4px 9px; border-radius:8px; border:1px dashed #6b5a3e; background:#1a1611; color:#d9cba4; font-family:ui-monospace,Consolas,monospace; }
.hg-copy:hover { border-color:#e9b949; color:#f1dca0; }
.hg-copy.is-copied { border-style:solid; border-color:#58a24f; color:#bfe8b8; }
.hg-copy.is-copied::after { content:" ✓ copied"; font-family:Inter,sans-serif; }
.hg-spots { font-size:.72rem; color:#a99a7a; }
.hg-empty { text-align:center; color:#a99a7a; padding:20px 0; }
.is-hidden { display:none !important; }
.hg-section { font-family:Cinzel,serif; color:#e7d4a2; margin:22px 0 4px; font-size:1.15rem; }
.hg-gates { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px; }
.hg-gate { display:flex; gap:10px; align-items:center; background:rgba(0,0,0,.22); border:1px solid #4a3f2f; border-radius:10px; padding:8px 10px; }
.hg-gate__rank { flex:none; width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:Cinzel,serif; font-weight:900; font-size:1.1rem; background:linear-gradient(180deg,#3b2f63,#241c40); border:1px solid #6d5bb3; color:#e6dcff; }
.hg-gate__lvl { font-size:.8rem; color:#e9b949; font-weight:700; }
.hg-gate__names { font-size:.85rem; color:#cfc6b0; }