@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Press+Start+2P&display=swap');

/* ── TOKENS ──────────────────────────────────────────── */
:root {
  --bg:#0d0f0d; --bg2:#141814; --bg3:#1c221c; --card:#181e18; --card-h:#202820;
  --border:#2a342a; --border-hi:#3e523e;

  --grass:#4caf3c; --grass-dk:#2d7020; --grass-lt:#7dd668;
  --dirt:#7a5430; --wood:#8f6533; --stone:#7a8a7a; --stone-dk:#445044;
  --diamond:#3dd4d8; --gold:#f0c020; --iron:#b8c4b8; --red:#d03030;
  --nether:#b83a20; --end:#6045a0; --water:#2860c0; --emerald:#18b858;
  --lapis:#2848c8; --copper:#c07040;

  --text:#dce8dc; --text2:#a8bca8; --text3:#607060; --text4:#3a483a;

  --passive:#4caf3c; --neutral:#f0c020; --hostile:#d03030; --boss:#6045a0;

  --sw:256px;
  --fp:'Press Start 2P', monospace;
  --fb:'Nunito', system-ui, sans-serif;

  --r:6px; /* card radius */
}

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
}
a { color: var(--grass-lt); text-decoration: none; }
a:hover { color: var(--diamond); }
img { max-width: 100%; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--stone-dk); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--stone); }

/* ── TYPOGRAPHY HELPERS ──────────────────────────────── */
.pixel        { font-family: var(--fp); line-height: 1.5; }
.px-xs        { font-family: var(--fp); font-size: 7px; }
.px-sm        { font-family: var(--fp); font-size: 9px; }
.px-md        { font-family: var(--fp); font-size: 12px; }
.px-lg        { font-family: var(--fp); font-size: 16px; }
.body-lg      { font-size: 16px; line-height: 1.7; }
.body-md      { font-size: 14px; line-height: 1.65; }
.body-sm      { font-size: 13px; line-height: 1.6; }
.muted        { color: var(--text2); }
.dim          { color: var(--text3); }

/* ── LAYOUT ──────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

/* ── SIDEBAR ─────────────────────────────────────────── */
.sidebar {
  width: var(--sw);
  background: var(--bg2);
  border-right: 2px solid var(--border);
  position: fixed; top: 0; left: 0; height: 100vh;
  overflow-y: auto; z-index: 100;
  display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.sidebar-logo {
  padding: 16px 14px 12px;
  border-bottom: 2px solid var(--border);
  background: var(--bg3);
}
.sidebar-logo a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.logo-big   { font-size: 28px; line-height: 1; }
.logo-name  { font-family: var(--fp); font-size: 7.5px; color: var(--grass-lt); text-shadow: 0 2px 8px #4caf3c55; line-height: 1.6; }
.logo-sub   { font-size: 12px; color: var(--text3); }

.sidebar-section { border-bottom: 1px solid var(--border); padding: 6px 0; }
.sst {
  font-family: var(--fp); font-size: 6.5px;
  color: var(--text4); padding: 8px 14px 4px;
  letter-spacing: 1px; text-transform: uppercase;
}
.snav { list-style: none; }
.snav a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px;
  color: var(--text2); font-size: 14px; font-weight: 600;
  transition: all .15s; border-left: 3px solid transparent;
}
.snav a:hover, .snav a.active {
  color: var(--text); background: var(--card); border-left-color: var(--grass);
}
.ni { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.nb {
  margin-left: auto; font-family: var(--fp); font-size: 6px;
  background: var(--bg3); border: 1px solid var(--border);
  padding: 2px 5px; color: var(--text3);
}

/* ── MAIN CONTENT ────────────────────────────────────── */
.main-content { margin-left: var(--sw); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }

/* ── TOPBAR ──────────────────────────────────────────── */
.topbar {
  background: var(--bg2); border-bottom: 2px solid var(--border);
  padding: 10px 20px; display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 50;
}
.hamburger {
  display: none; background: none; border: 1px solid var(--border);
  color: var(--text2); padding: 6px 10px; cursor: pointer; font-size: 16px;
  border-radius: 4px;
}
.sw { flex: 1; max-width: 460px; position: relative; }
.si { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--text3); }
.sinput {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); font-family: var(--fb); font-size: 14px;
  padding: 8px 12px 8px 33px; border-radius: var(--r); outline: none;
  transition: border-color .18s;
}
.sinput:focus { border-color: var(--grass); }
.sinput::placeholder { color: var(--text3); }
.sresults {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg3); border: 1px solid var(--border-hi);
  border-radius: var(--r); max-height: 300px; overflow-y: auto; z-index: 200; display: none;
  box-shadow: 0 8px 24px #00000088;
}
.sresults.open { display: block; }
.sri {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  cursor: pointer; border-bottom: 1px solid var(--border); transition: background .13s;
}
.sri:hover { background: var(--card-h); }
.sri-icon { font-size: 20px; width: 24px; flex-shrink: 0; }
.sri-name { font-size: 14px; font-weight: 600; flex: 1; }
.sri-cat {
  font-family: var(--fp); font-size: 5.5px; color: var(--text3);
  background: var(--bg); border: 1px solid var(--border); padding: 2px 5px; border-radius: 2px;
}
.sempty { padding: 16px; color: var(--text3); font-size: 14px; text-align: center; }

.bc { font-size: 13px; color: var(--text3); white-space: nowrap; }
.bc a { color: var(--text2); }
.bc span { color: var(--text4); margin: 0 5px; }

/* ── PAGE AREA ───────────────────────────────────────── */
.page-area { padding: 24px 20px; flex: 1; max-width: 1200px; }

/* ── PAGE HEADER ─────────────────────────────────────── */
.page-header { margin-bottom: 24px; }
.page-title {
  font-family: var(--fp); font-size: 13px; color: var(--text);
  text-shadow: 0 2px 12px #4caf3c33; line-height: 1.5; margin-bottom: 8px;
}
.page-title .ti { margin-right: 10px; }
.page-desc { font-size: 15px; color: var(--text2); max-width: 680px; line-height: 1.7; }
.page-stats { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.stp {
  background: var(--bg3); border: 1px solid var(--border);
  padding: 4px 12px; border-radius: var(--r);
  font-size: 12px; color: var(--text2);
}
.stp strong { color: var(--grass-lt); }

/* ── FILTER BAR ──────────────────────────────────────── */
.fbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.flabel { font-family: var(--fp); font-size: 6.5px; color: var(--text3); margin-right: 4px; }
.fbtn {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text2); font-family: var(--fb); font-size: 13px; font-weight: 600;
  padding: 5px 14px; cursor: pointer; border-radius: var(--r); transition: all .14s;
}
.fbtn:hover { border-color: var(--border-hi); color: var(--text); }
.fbtn.active { background: var(--grass); border-color: var(--grass-dk); color: #fff; }
.fbtn.f-hostile.active  { background: var(--hostile); border-color: #900; color: #fff; }
.fbtn.f-neutral.active  { background: #7a6000; border-color: #554400; color: var(--gold); }
.fbtn.f-passive.active  { background: var(--grass); border-color: var(--grass-dk); color: #fff; }
.fbtn.f-boss.active     { background: var(--boss); border-color: #2a1860; color: #d8c8ff; }

/* ── CARD GRID ───────────────────────────────────────── */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cgrid-sm { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cgrid-lg { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

/* ── INFO CARD ───────────────────────────────────────── */
.icard {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  transition: border-color .14s, transform .14s, background .14s;
}
.icard:hover { border-color: var(--border-hi); background: var(--card-h); transform: translateY(-2px); box-shadow: 0 4px 16px #00000044; }
.icard.exp { border-color: var(--grass); }

.ch { display: flex; align-items: center; gap: 12px; padding: 14px 15px; border-bottom: 1px solid var(--border); }
.cico {
  font-size: 28px; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; flex-shrink: 0;
}
.ctw { flex: 1; min-width: 0; }
.cname { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.3; display: block; }
.csub  { font-size: 12px; color: var(--text2); display: block; margin-top: 1px; }

/* BADGES */
.cbadge {
  font-family: var(--fp); font-size: 5.5px;
  padding: 3px 7px; border: 1px solid; border-radius: 2px; flex-shrink: 0;
}
.b-passive  { color: var(--passive);  border-color: var(--passive); }
.b-neutral  { color: var(--neutral);  border-color: var(--neutral); }
.b-hostile  { color: var(--hostile);  border-color: var(--hostile); }
.b-boss     { color: #b09ae0;         border-color: var(--boss); }
.b-weapon   { color: var(--diamond);  border-color: var(--diamond); }
.b-armor    { color: var(--iron);     border-color: var(--iron); }
.b-food     { color: var(--emerald);  border-color: var(--emerald); }
.b-ore      { color: var(--diamond);  border-color: var(--diamond); }
.b-block    { color: var(--stone);    border-color: var(--stone); }
.b-biome    { color: var(--water);    border-color: var(--water); }
.b-structure{ color: var(--wood);     border-color: var(--wood); }
.b-enchant  { color: #c088ff;         border-color: #c088ff; }
.b-potion   { color: #88aaff;         border-color: #88aaff; }

.cb { padding: 13px 15px; }
.cdesc { font-size: 14px; color: var(--text2); line-height: 1.65; margin-bottom: 10px; }
.cqs { display: flex; gap: 6px; flex-wrap: wrap; }
.qsi {
  background: var(--bg3); border: 1px solid var(--border);
  padding: 3px 9px; font-size: 12px; color: var(--text2); border-radius: 3px;
}
.qsi strong { color: var(--text); }

/* EXPAND BUTTON */
.cebtn {
  width: 100%; background: var(--bg3); border: none; border-top: 1px solid var(--border);
  color: var(--text3); font-family: var(--fb); font-size: 12px; font-weight: 700;
  padding: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 5px; transition: all .13s; letter-spacing: 0.3px;
}
.cebtn:hover { color: var(--text); background: var(--card-h); }
.earr { transition: transform .2s; display: inline-block; font-size: 10px; }
.icard.exp .earr { transform: rotate(180deg); }

/* EXPANDED DETAILS */
.cdetails {
  display: none; padding: 14px 15px; border-top: 1px solid var(--border); background: var(--bg);
}
.icard.exp .cdetails { display: block; animation: sd .18s ease; }
@keyframes sd { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.ds { margin-bottom: 12px; }
.ds:last-child { margin-bottom: 0; }
.dlabel {
  font-family: var(--fp); font-size: 6.5px; color: var(--text3);
  text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;
}
.dcont { font-size: 14px; color: var(--text2); line-height: 1.65; }
.dtags { display: flex; gap: 5px; flex-wrap: wrap; }
.dtag {
  background: var(--bg3); border: 1px solid var(--border);
  padding: 3px 9px; font-size: 12px; color: var(--text2); border-radius: 3px;
}
.dtag.g { border-color: var(--grass); color: var(--grass-lt); }
.dtag.r { border-color: var(--red);   color: #ff8888; }
.dtag.b { border-color: var(--water); color: #7aaaf0; }
.dtag.y { border-color: var(--gold);  color: var(--gold); }
.dtag.p { border-color: var(--end);   color: #b09ae0; }
.dtag.c { border-color: var(--diamond); color: var(--diamond); }
.dtag.e { border-color: var(--emerald); color: var(--emerald); }

.tipbox {
  background: var(--bg2); border-left: 3px solid var(--grass);
  padding: 8px 12px; font-size: 14px; color: var(--text2); border-radius: 0 4px 4px 0;
  line-height: 1.65;
}

/* ── SECTION DIVIDER ─────────────────────────────────── */
.sdiv { display: flex; align-items: center; gap: 11px; margin: 28px 0 16px; }
.sdiv-title { font-family: var(--fp); font-size: 9px; color: var(--text); white-space: nowrap; }
.sdiv-line  { flex: 1; height: 1px; background: linear-gradient(to right, var(--border), transparent); }
.sdiv-ico   { font-size: 16px; }

/* ── HERO ────────────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, #050f05 0%, #0a180a 55%, #111008 100%);
  border-bottom: 2px solid var(--border);
  padding: 52px 20px 44px; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 32px, #ffffff015 32px, #ffffff015 33px),
    repeating-linear-gradient(90deg, transparent, transparent 32px, #ffffff015 32px, #ffffff015 33px);
}
.hero-content { position: relative; max-width: 640px; }
.hero-eye { font-family: var(--fp); font-size: 7px; color: var(--grass); letter-spacing: 2px; margin-bottom: 14px; }
.hero-title {
  font-family: var(--fp); font-size: 18px; line-height: 1.4; color: var(--text);
  text-shadow: 0 0 32px #4caf3c44; margin-bottom: 14px;
}
.hero-title .tg { color: var(--grass-lt); }
.hero-body { font-size: 16px; color: var(--text2); line-height: 1.75; margin-bottom: 24px; max-width: 500px; }
.hcta { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  font-family: var(--fp); font-size: 7px; padding: 11px 18px; cursor: pointer;
  border: 2px solid; transition: all .14s; display: inline-flex; align-items: center;
  gap: 7px; text-decoration: none; border-radius: 4px;
}
.btn-p { background: var(--grass); border-color: var(--grass-dk); color: #fff; }
.btn-p:hover { background: var(--grass-lt); color: #fff; transform: translateY(-2px); }
.btn-s { background: var(--bg3); border-color: var(--border); color: var(--text); }
.btn-s:hover { border-color: var(--border-hi); color: var(--grass-lt); transform: translateY(-2px); }

/* ── HOME CATS ───────────────────────────────────────── */
.hcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 24px 20px; }
.ccat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 18px 14px; text-align: center; cursor: pointer; transition: all .18s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text);
}
.ccat:hover { border-color: var(--grass); background: var(--card-h); transform: translateY(-3px); box-shadow: 0 4px 16px #4caf3c22; }
.ccat-ico  { font-size: 32px; }
.ccat-name { font-family: var(--fp); font-size: 6.5px; line-height: 1.6; color: var(--text2); }
.ccat:hover .ccat-name { color: var(--grass-lt); }
.ccat-n    { font-size: 11px; color: var(--text3); }

/* ── OVERLAY ─────────────────────────────────────────── */
.overlay { display: none; position: fixed; inset: 0; background: #000a; z-index: 90; backdrop-filter: blur(2px); }
.overlay.open { display: block; }

/* ── NO RESULTS ──────────────────────────────────────── */
.nores { grid-column: 1/-1; text-align: center; padding: 48px; color: var(--text3); }
.nores-ico { font-size: 40px; display: block; margin-bottom: 10px; }
.nores-title { font-family: var(--fp); font-size: 9px; margin-bottom: 7px; color: var(--text2); }

/* ── FOOTER ──────────────────────────────────────────── */
.footer {
  background: var(--bg2); border-top: 1px solid var(--border);
  padding: 16px 20px; font-size: 12px; color: var(--text3); text-align: center;
}

/* ── GRASS STRIP ─────────────────────────────────────── */
.gstrip {
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--grass) 0, var(--grass) 8px, var(--grass-dk) 8px, var(--grass-dk) 16px);
}

/* ── ANIMATIONS ──────────────────────────────────────── */
@keyframes fin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.icard { animation: fin .25s ease both; }
.icard:nth-child(1) { animation-delay: .03s; }
.icard:nth-child(2) { animation-delay: .06s; }
.icard:nth-child(3) { animation-delay: .09s; }
.icard:nth-child(4) { animation-delay: .12s; }
.icard:nth-child(5) { animation-delay: .15s; }
.icard:nth-child(n+6) { animation-delay: .17s; }

/* ── PROGRESS BAR ────────────────────────────────────── */
.prog-wrap { margin: 6px 0; }
.prog-lbl { font-family: var(--fp); font-size: 6px; color: var(--text3); margin-bottom: 3px; }
.prog-bar { height: 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }

/* ── ORE CARD ────────────────────────────────────────── */
.ore-rarity {
  font-family: var(--fp); font-size: 6px; padding: 2px 6px; border: 1px solid; border-radius: 2px;
}
.depth-chart {
  margin: 10px 0; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 4px; padding: 10px 12px;
}
.depth-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.depth-row:last-child { margin-bottom: 0; }
.depth-row-lbl { font-size: 12px; color: var(--text2); min-width: 70px; }
.depth-row-bar { flex: 1; height: 10px; background: var(--bg2); border-radius: 3px; overflow: hidden; }
.depth-row-fill { height: 100%; border-radius: 3px; transition: width .5s ease; }
.depth-row-val { font-family: var(--fp); font-size: 6px; color: var(--text3); min-width: 40px; text-align: right; }

/* ── BIOME CARD ──────────────────────────────────────── */
.biome-accent { height: 4px; }
.climate-icon { font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 3px; font-weight: 700; }

/* ── STRUCTURE CARD ──────────────────────────────────── */
.dim-tag {
  font-family: var(--fp); font-size: 5.5px; padding: 2px 6px; border: 1px solid; border-radius: 2px;
}
.loot-chip {
  background: var(--bg3); border: 1px solid var(--gold); color: var(--gold);
  padding: 2px 9px; font-size: 12px; border-radius: 3px;
}
.mob-chip {
  background: var(--bg3); border: 1px solid var(--red); color: #ff9999;
  padding: 2px 9px; font-size: 12px; border-radius: 3px;
}

/* ── DIMENSION FULL CARD ─────────────────────────────── */
.dim-full {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; margin-bottom: 18px;
  transition: border-color .15s;
}
.dim-full:hover { border-color: var(--border-hi); }
.dim-full-hdr {
  padding: 20px; display: flex; align-items: flex-start; gap: 16px;
  border-bottom: 1px solid var(--border);
}
.dim-full-ico { font-size: 52px; flex-shrink: 0; filter: drop-shadow(0 0 12px currentColor); }
.dim-full-name { font-family: var(--fp); font-size: 12px; line-height: 1.45; margin-bottom: 4px; }
.dim-full-sub  { font-size: 14px; color: var(--text2); line-height: 1.6; }
.dim-full-body { padding: 18px 20px; }
.dim-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 12px 0;
}
.dim-stat-box { background: var(--bg3); border: 1px solid var(--border); padding: 10px 13px; border-radius: 4px; }
.dim-stat-lbl  { font-family: var(--fp); font-size: 6px; color: var(--text3); margin-bottom: 3px; }
.dim-stat-val  { font-size: 14px; color: var(--text2); line-height: 1.4; }
.dim-mob-list  { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.dim-mob-chip  { background: var(--bg3); border: 1px solid var(--border); padding: 3px 9px; font-size: 12px; color: var(--text2); border-radius: 3px; }
.dim-access-box {
  background: var(--bg2); border-left: 3px solid var(--gold);
  padding: 9px 12px; font-size: 14px; color: var(--text2); margin-top: 12px; border-radius: 0 4px 4px 0;
}

/* ── BOSS CARDS ──────────────────────────────────────── */
.boss-full {
  background: var(--card); border: 1px solid var(--boss);
  border-radius: var(--r); overflow: hidden; margin-bottom: 20px;
  box-shadow: 0 0 24px #6045a018;
}
.boss-full-hdr {
  background: linear-gradient(135deg, #120820 0%, #0d0d18 100%);
  padding: 22px; display: flex; align-items: center; gap: 18px;
  border-bottom: 1px solid var(--boss);
}
.boss-ico { font-size: 60px; filter: drop-shadow(0 0 18px #c088ff); }
.boss-name { font-family: var(--fp); font-size: 12px; color: #c088ff; text-shadow: 0 0 20px #c088ff44; line-height: 1.45; }
.boss-hp-row { font-size: 14px; color: var(--text2); margin-top: 4px; }
.boss-dim-tag { font-family: var(--fp); font-size: 6px; padding: 2px 6px; border: 1px solid #c088ff55; color: #c088ff; border-radius: 2px; margin-top: 5px; display: inline-block; }
.boss-body { padding: 20px; }
.boss-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.boss-sect { background: var(--bg3); border: 1px solid var(--border); padding: 12px 14px; border-radius: 4px; }
.boss-sect-title { font-family: var(--fp); font-size: 6.5px; color: #c088ff; margin-bottom: 8px; }
.atk-list { list-style: none; }
.atk-list li { padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text2); }
.atk-list li:last-child { border-bottom: none; }
.atk-list li::before { content: '⚔ '; color: var(--red); }
.drop-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.drop-chip { background: var(--bg2); border: 1px solid var(--gold); color: var(--gold); padding: 3px 9px; font-size: 12px; border-radius: 3px; }
.boss-weakpoint { background: var(--bg2); border-left: 3px solid var(--red); padding: 9px 12px; font-size: 14px; color: var(--text2); margin-top: 12px; border-radius: 0 4px 4px 0; }
.boss-tip { background: var(--bg2); border-left: 3px solid #c088ff; padding: 9px 12px; font-size: 14px; color: var(--text2); margin-top: 8px; border-radius: 0 4px 4px 0; }

/* ── ENCHANT CARDS ───────────────────────────────────── */
.ench-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; transition: all .15s; border-top: 2px solid #c088ff33;
}
.ench-card:hover { border-top-color: #c088ff99; transform: translateY(-2px); }
.ench-hdr { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-bottom: 1px solid var(--border); }
.ench-ico { font-size: 26px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: #12081e; border: 1px solid #c088ff33; border-radius: 4px; }
.ench-name { font-size: 15px; font-weight: 800; color: #c088ff; line-height: 1.3; }
.ench-max  { font-family: var(--fp); font-size: 6px; padding: 2px 6px; border: 1px solid var(--gold); color: var(--gold); border-radius: 2px; }
.ench-rar  { font-family: var(--fp); font-size: 5.5px; padding: 2px 5px; border: 1px solid; border-radius: 2px; margin-top: 3px; display: inline-block; }
.rar-common   { color: var(--text3); border-color: var(--text3); }
.rar-uncommon { color: var(--grass-lt); border-color: var(--grass); }
.rar-rare     { color: var(--diamond); border-color: var(--diamond); }
.rar-treasure { color: #c088ff; border-color: #c088ff; }
.ench-body { padding: 13px 14px; }
.level-list { list-style: none; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.level-list li { padding: 6px 11px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 8px; }
.level-list li:last-child { border-bottom: none; }
.level-num { font-family: var(--fp); font-size: 6px; color: var(--gold); min-width: 14px; }
.applies-tag { background: var(--bg3); border: 1px solid var(--diamond); color: var(--diamond); padding: 2px 8px; font-size: 12px; border-radius: 3px; }
.conflict-tag { background: var(--bg3); border: 1px solid var(--red); color: #ff9999; padding: 2px 8px; font-size: 12px; border-radius: 3px; }

/* ── POTION CARDS ────────────────────────────────────── */
.pot-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; transition: all .15s;
}
.pot-card:hover { transform: translateY(-2px); }
.pot-glow { height: 3px; }
.pot-hdr { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.pot-flask { font-size: 30px; }
.pot-name { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.3; }
.pot-dur  { font-size: 12px; color: var(--text2); margin-top: 2px; }
.pot-body { padding: 12px 14px; }
.pot-desc { font-size: 14px; color: var(--text2); margin-bottom: 10px; line-height: 1.65; }
.pot-levels { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.pot-level { padding: 6px 11px; border-bottom: 1px solid var(--border); font-size: 13px; display: flex; gap: 8px; }
.pot-level:last-child { border-bottom: none; }
.pot-t { font-family: var(--fp); font-size: 6px; color: #88aaff; min-width: 14px; }
.pot-ingr { background: var(--bg3); border: 1px solid var(--gold); padding: 4px 11px; font-size: 12px; color: var(--gold); border-radius: 3px; margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; }

/* ── FOOD / ARMOR specific ───────────────────────────── */
.hunger-dots { display: flex; gap: 2px; flex-wrap: wrap; margin: 4px 0; font-size: 16px; }
.sat-bar   { height: 7px; background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; margin: 4px 0; }
.sat-fill  { height: 100%; background: linear-gradient(90deg, var(--gold), #ff9900); transition: width .4s; border-radius: 3px; }
.dmg-bar   { height: 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; margin: 6px 0; overflow: hidden; }
.dmg-fill  { height: 100%; background: linear-gradient(90deg, var(--red), #ff5500); border-radius: 3px; transition: width .4s; }
.prot-bar  { height: 9px; background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; margin: 6px 0; overflow: hidden; }
.prot-fill { height: 100%; background: linear-gradient(90deg, var(--iron), var(--diamond)); border-radius: 3px; transition: width .4s; }
.armor-pieces { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0; }
.ap { background: var(--bg3); border: 1px solid var(--border); padding: 3px 9px; font-size: 12px; display: flex; align-items: center; gap: 5px; border-radius: 3px; }
.ap-val { font-family: var(--fp); font-size: 6.5px; color: var(--diamond); }

/* ── WEAPON TIER BADGE ───────────────────────────────── */
.tier-badge { font-family: var(--fp); font-size: 5.5px; padding: 2px 6px; border: 1px solid; border-radius: 2px; }
.t-wood        { color: #c09060; border-color: #c09060; }
.t-stone       { color: var(--stone); border-color: var(--stone); }
.t-iron        { color: var(--iron);  border-color: var(--iron); }
.t-gold        { color: var(--gold);  border-color: var(--gold); }
.t-diamond     { color: var(--diamond); border-color: var(--diamond); }
.t-netherite   { color: #a066d0; border-color: #a066d0; }
.t-unique      { color: var(--gold);  border-color: var(--gold); }
.t-stringwood  { color: #c09060; border-color: #c09060; }

/* ARMOR TIER */
.tier-lbl { font-family: var(--fp); font-size: 5.5px; padding: 2px 6px; border: 1px solid; border-radius: 2px; }
.t-leather   { color: #c09060; border-color: #c09060; }
.t-chainmail { color: var(--stone); border-color: var(--stone); }
.t-golden    { color: var(--gold);  border-color: var(--gold); }
.t-turtle    { color: var(--emerald); border-color: var(--emerald); }

/* ── FOOD EFFECT PILL ────────────────────────────────── */
.effect-pill {
  display: inline-block; background: var(--bg3); border: 1px solid #88aaff;
  color: #aaccff; padding: 2px 8px; font-size: 12px; border-radius: 3px; margin: 2px;
}
.rarity-badge { font-family: var(--fp); font-size: 5.5px; padding: 2px 6px; border: 1px solid; border-radius: 2px; }
.r-common    { color: var(--text3); border-color: var(--text3); }
.r-good      { color: var(--grass-lt); border-color: var(--grass); }
.r-rare      { color: var(--gold); border-color: var(--gold); }
.r-legendary { color: #c088ff; border-color: #c088ff; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sw: 260px; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .hamburger { display: block; }
  .page-title { font-size: 10px; }
  .hero-title { font-size: 13px; }
  .boss-cols { grid-template-columns: 1fr; }
  .dim-stats-grid { grid-template-columns: 1fr 1fr; }
  .cgrid { grid-template-columns: 1fr; }
  .cgrid-lg { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .page-area { padding: 16px 14px; }
  .topbar { padding: 9px 14px; }
  .hero { padding: 28px 14px 32px; }
  .hero-title { font-size: 11px; }
  .hero-body { font-size: 14px; }
  .hcats { grid-template-columns: repeat(2, 1fr); padding: 14px; }
  .dim-stats-grid { grid-template-columns: 1fr; }
  .bc { display: none; }
}