:root{
  --bg:#0d0c0b;
  --bg2:#15120f;
  --panel:#171411;
  --panel2:#1e1915;
  --line:#3a3026;
  --line2:#524231;
  --text:#e8e2da;
  --muted:#9f958b;
  --gold:#c9a45f;
  --gold2:#e7c77d;
  --link:#f1c96e;

  --common:#a7a7a7;
  --uncommon:#45d25a;
  --rare:#3e9cff;
  --epic:#b06cff;
  --legendary:#ff9f28;
  --mythical:#ed3d3d;
  --superior:#31d2aa;
  --darkmagic:#e03b3b;
  --eternal:#f4de9d;
  --abyssal:#7b63ff;
  --celestial:#33d8ed;
  --powerful:#ff57cf;
}

*{box-sizing:border-box}
html,body{margin:0;background:
  radial-gradient(circle at 50% -200px,rgba(128,77,25,.16),transparent 520px),
  linear-gradient(180deg,#100e0c,#0b0a09 420px,#0c0b0a);
  color:var(--text);font-family:Inter,Arial,sans-serif}
button,input,select{font:inherit}
a{color:inherit;text-decoration:none}

/* Page */
.page{max-width:1540px;margin:0 auto;padding:24px 20px 60px}
.titlebar{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  padding:6px 0 20px;border-bottom:1px solid #342a21
}
.breadcrumbs{display:flex;align-items:center;gap:8px;color:#776e66;font-size:12px}
.breadcrumbs a{color:#b3925a}
.titlebar h1{font-size:38px;margin:9px 0 5px;font-family:Cinzel,serif;color:#f2e8dc}
.titlebar p{margin:0;color:#9e948a;font-size:14px}
.beta-note{
  display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;
  padding:10px 14px;border:1px solid #4d3e2f;background:#17130f;border-radius:5px
}
.beta-note .dot{width:8px;height:8px;border-radius:50%;background:#5ee17a;box-shadow:0 0 10px rgba(94,225,122,.55);grid-row:1/3}
.beta-note strong{font-size:12px;color:#e8dccf}
.beta-note small{font-size:10px;color:#8d8176}

/* Wowhead-like filter block */
.filterbox{
  margin-top:18px;border:1px solid #453729;background:#17130f;
  box-shadow:0 10px 30px rgba(0,0,0,.18)
}
.filter-top{
  display:grid;grid-template-columns:1.35fr repeat(4,minmax(150px,1fr));gap:10px;
  padding:14px;background:linear-gradient(#211a14,#19140f)
}
.filter-top label span{
  display:block;margin:0 0 6px;color:#ac9e8e;font-size:11px;font-weight:700
}
.filter-top input,.filter-top select,.page-size select{
  width:100%;height:36px;background:#0f0d0b;color:#e8e1d9;
  border:1px solid #4a3a2a;border-radius:3px;padding:0 10px;outline:none
}
.filter-top input:focus,.filter-top select:focus{border-color:#a9864d;box-shadow:0 0 0 1px #a9864d inset}
.quality-quick{
  display:flex;flex-wrap:wrap;gap:6px;padding:11px 14px;border-top:1px solid #34281f
}
.quality-quick button{
  background:#100e0c;border:1px solid #3b3026;border-radius:3px;
  color:#aaa198;padding:6px 9px;cursor:pointer;font-size:11px;font-weight:700
}
.quality-quick button:hover,.quality-quick button.active{border-color:#9a7746;background:#251d15;color:#f1dfc4}
.filter-actions{
  min-height:40px;padding:8px 14px;border-top:1px solid #34281f;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#13100d
}
.active-filters{font-size:11px;color:#7f766e}
.reset{border:0;background:none;color:#c49e5c;cursor:pointer;font-size:11px}

/* Database list */
.dbbox{margin-top:18px;border:1px solid #453729;background:#14110e}
.db-head{
  height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;background:linear-gradient(#231c16,#19140f);border-bottom:1px solid #4b392a;
  color:#b4a79a;font-size:12px
}
.db-head strong{color:#ecd39d}
.sep{margin:0 7px;color:#675b50}
.page-size{display:flex;align-items:center;gap:8px}
.page-size select{width:70px;height:29px}

.table-wrap{overflow:auto}
.item-table{width:100%;border-collapse:collapse;table-layout:fixed}
.item-table th{
  text-align:left;font-size:11px;color:#a59687;font-weight:700;
  background:#1a1612;border-bottom:1px solid #4a392b;
  padding:9px 10px;white-space:nowrap
}
.item-table th.item-col{width:31%}
.item-table th:nth-child(2){width:12%}
.item-table th:nth-child(3){width:10%}
.item-table th:nth-child(4){width:21%}
.item-table th:nth-child(5){width:15%}
.item-table th:nth-child(6){width:7%}
.item-table th:nth-child(7){width:6%}
.item-table th.num,.item-table td.num{text-align:right}
.item-table tbody tr{
  background:#13110f;border-bottom:1px solid #29231e;cursor:pointer
}
.item-table tbody tr:nth-child(even){background:#171410}
.item-table tbody tr:hover{background:#241c15}
.item-table td{
  padding:8px 10px;vertical-align:middle;color:#bcb2a8;font-size:12px
}

.itemcell{display:flex;align-items:center;gap:10px;min-width:0}
.itemicon{
  width:42px;height:42px;flex:0 0 42px;object-fit:cover;
  border:1px solid #4d4135;background:#080706;border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.7) inset
}
.itemtext{min-width:0}
.itemname{
  display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.itemid{
  display:block;margin-top:3px;color:#6f6861;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.balancecell{color:#d0c5ba!important;line-height:1.45}
.dropcell{color:#a89c90!important}
.dps{color:#dcc389!important;font-variant-numeric:tabular-nums}
.status-badge{
  display:inline-block;border:1px solid #4b4036;background:#211c17;border-radius:3px;
  padding:3px 6px;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:#bfb5aa
}
.status-badge.patched{border-color:#315a39;color:#7fdb8c;background:#132319}
.status-badge.reviewed{border-color:#365873;color:#87bde8;background:#13202a}
.status-badge.planned{border-color:#665330;color:#e0bf75;background:#251f13}
.status-badge.utility{border-color:#505050;color:#bbb;background:#1b1b1b}

.q-common{color:var(--common)!important}
.q-uncommon{color:var(--uncommon)!important}
.q-rare{color:var(--rare)!important}
.q-epic{color:var(--epic)!important}
.q-legendary{color:var(--legendary)!important}
.q-mythical{color:var(--mythical)!important}
.q-superior{color:var(--superior)!important}
.q-darkmagic{color:var(--darkmagic)!important;text-shadow:0 0 8px rgba(224,59,59,.18)}
.q-eternal{color:var(--eternal)!important}
.q-abyssal{color:var(--abyssal)!important}
.q-celestial{color:var(--celestial)!important}
.q-powerful{color:var(--powerful)!important}
.q-unknown{color:#c0b5a9!important}

.mobile-cards{display:none}

.pager{
  min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;
  border-top:1px solid #3f3125;background:#15110e;padding:8px
}
.pager button{
  min-width:32px;height:30px;border:1px solid #44372b;background:#0f0d0b;color:#a99d91;border-radius:3px;cursor:pointer
}
.pager button.active,.pager button:hover{background:#322518;border-color:#9a7847;color:#f2d99f}
.pager button:disabled{opacity:.35;cursor:not-allowed}

/* Quality info */
.quality-info{
  margin-top:18px;padding:18px;border:1px solid #3e3228;background:#14110e
}
.quality-info h2{margin:0;font-family:Cinzel,serif;font-size:21px;color:#e3d5c7}
.quality-info p{margin:5px 0 13px;color:#8f857c;font-size:12px}
.quality-grid{display:flex;flex-wrap:wrap;gap:7px}
.quality-grid span{
  border:1px solid #3a3028;background:#0e0d0b;padding:7px 10px;border-radius:3px;font-size:11px;font-weight:700
}
.quality-warning{
  margin-top:13px;padding:10px 12px;border-left:3px solid #b68b46;background:#1c1711;
  color:#9f9488;font-size:11px;line-height:1.55
}

/* Drawer / item detail */
.drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.54);z-index:80;
  opacity:0;pointer-events:none;transition:.16s
}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
.item-drawer{
  position:fixed;top:0;right:0;z-index:90;width:min(520px,100%);height:100vh;
  background:#0d0c0a;border-left:1px solid #65503a;box-shadow:-18px 0 45px rgba(0,0,0,.45);
  transform:translateX(102%);transition:.2s ease;overflow:auto
}
.item-drawer.open{transform:translateX(0)}
.drawer-close{
  position:absolute;right:13px;top:11px;width:34px;height:34px;border:1px solid #4a3b2d;
  background:#17130f;color:#bdafa0;border-radius:3px;font-size:22px;cursor:pointer;z-index:3
}
.drawer-hero{
  min-height:168px;padding:28px 54px 20px 22px;
  background:radial-gradient(circle at 90% 0,rgba(184,129,55,.16),transparent 240px),linear-gradient(#1b1611,#100e0c);
  border-bottom:1px solid #46382b
}
.drawer-title{display:flex;gap:14px;align-items:center}
.drawer-title img{width:72px;height:72px;border:1px solid #5e4e3e;background:#070605;border-radius:5px;object-fit:cover}
.drawer-title h2{margin:0 0 5px;font-size:24px}
.drawer-title p{margin:0;color:#837970;font-size:11px}
.drawer-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.drawer-section{padding:18px 22px;border-bottom:1px solid #30271f}
.drawer-section h3{margin:0 0 10px;color:#d7c7b5;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.balance-box{padding:12px 13px;border:1px solid #4c3d2d;background:#17130f;color:#d4c8bb;font-size:13px;line-height:1.65}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#30271f;border:1px solid #30271f}
.detail-grid div{background:#12100e;padding:11px}
.detail-grid span{display:block;font-size:9px;color:#756d65;text-transform:uppercase}
.detail-grid strong{display:block;margin-top:5px;font-size:13px;color:#d8d0c7}
.drawer-foot{padding:18px 22px 28px;color:#6f6760;font-size:10px;line-height:1.5}

/* empty/error */
.empty-row{text-align:center!important;padding:34px!important;color:#7f756c!important}

/* Responsive */
@media(max-width:1100px){
  .filter-top{grid-template-columns:1fr 1fr 1fr}
  .filter-top .search{grid-column:1/-1}
  .item-table th:nth-child(5),.item-table td:nth-child(5){display:none}
}
@media(max-width:760px){
  .page{padding:17px 10px 35px}
  .titlebar{align-items:flex-start;flex-direction:column}
  .beta-note{align-self:stretch}
  .filter-top{grid-template-columns:1fr 1fr}
  .filter-top .search{grid-column:1/-1}
  .table-wrap{display:none}
  .mobile-cards{display:grid;gap:8px;padding:8px}
  .mobile-card{
    display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center;
    padding:10px;border:1px solid #372d25;background:#14110f;border-radius:4px
  }
  .mobile-card img{width:50px;height:50px;object-fit:cover;border:1px solid #493e34;border-radius:4px}
  .mobile-card h3{font-size:13px;margin:0}
  .mobile-card p{font-size:10px;color:#817870;margin:4px 0 0}
  .mobile-dps{text-align:right;color:#d8bd82;font-size:12px}
}
@media(max-width:520px){
  .filter-top{grid-template-columns:1fr}
  .filter-top .search{grid-column:auto}
}


/* ==========================================================
   V2.1 — Ingame quality colors + icon tile backgrounds
   Colors matched to the supplied Hytale screenshots.
   ========================================================== */
:root{
  --rare:#2070b0;
  --epic:#884898;
  --legendary:#b88828;
  --mythical:#ed3d3d;
  --mythic:#98d878;
  --superior:#31d2aa;
  --excellent:#d07818;
  --darkmagic:#9f1827;
  --eternal:#d82048;
  --abyssal:#c01838;
  --celestial:#0888f8;
  --powerful:#e82838;
}

.q-mythic{color:var(--mythic)!important}
.q-excellent{color:#e3b43d!important}

.itemicon-frame,
.mobile-icon-frame,
.drawer-icon-frame{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  overflow:hidden;
  background:#12100e;
  border:1px solid #4d4135;
  box-shadow:0 0 0 1px rgba(0,0,0,.72) inset;
}
.itemicon-frame{width:44px;height:44px;border-radius:4px}
.mobile-icon-frame{width:52px;height:52px;border-radius:4px}
.drawer-icon-frame{width:74px;height:74px;border-radius:5px}

.itemicon-frame .itemicon,
.mobile-icon-frame img,
.drawer-icon-frame img{
  width:88%!important;
  height:88%!important;
  object-fit:contain!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.qbg-common{background:radial-gradient(circle at 50% 42%,rgba(167,167,167,.30),rgba(54,54,54,.80));border-color:#777}
.qbg-uncommon{background:radial-gradient(circle at 50% 42%,rgba(69,210,90,.32),rgba(13,52,22,.88));border-color:#3f9c4c}
.qbg-rare{background:radial-gradient(circle at 50% 42%,rgba(32,112,176,.54),rgba(15,35,59,.92));border-color:#3978ad}
.qbg-epic{background:radial-gradient(circle at 50% 42%,rgba(136,72,152,.56),rgba(37,22,50,.94));border-color:#87519a}
.qbg-legendary{background:radial-gradient(circle at 50% 42%,rgba(184,136,40,.58),rgba(59,41,14,.94));border-color:#a47b2d}
.qbg-mythical{background:radial-gradient(circle at 50% 42%,rgba(237,61,61,.55),rgba(62,14,14,.94));border-color:#cf3a3a}
.qbg-mythic{background:radial-gradient(circle at 50% 42%,rgba(152,216,120,.55),rgba(34,58,27,.94));border-color:#87c765}
.qbg-superior{background:radial-gradient(circle at 50% 42%,rgba(49,210,170,.52),rgba(10,61,54,.94));border-color:#35bfa2}
.qbg-excellent{background:radial-gradient(circle at 50% 42%,rgba(208,120,24,.58),rgba(63,36,10,.94));border-color:#ca7e24}
.qbg-darkmagic{background:radial-gradient(circle at 50% 42%,rgba(159,24,39,.57),rgba(8,4,5,.98));border-color:#9d1f30}
.qbg-eternal{background:radial-gradient(circle at 50% 42%,rgba(216,32,72,.58),rgba(57,9,22,.96));border-color:#bd294a}
.qbg-abyssal{background:radial-gradient(circle at 50% 42%,rgba(192,24,56,.58),rgba(47,8,20,.96));border-color:#b51f3d}
.qbg-celestial{background:radial-gradient(circle at 50% 42%,rgba(8,136,248,.57),rgba(9,32,76,.96));border-color:#167dd2}
.qbg-powerful{background:radial-gradient(circle at 50% 42%,rgba(232,40,56,.58),rgba(58,5,18,.97));border-color:#cf273c}
.qbg-unknown{background:radial-gradient(circle at 50% 42%,rgba(128,116,104,.28),rgba(34,29,25,.95));border-color:#665a50}

.lore-text{
  margin:0 0 12px;
  color:#aaa39c;
  font-size:13px;
  line-height:1.65;
  white-space:normal;
}
.source-special{
  margin-top:10px;
  color:#b9b2aa;
  font-size:13px;
  line-height:1.6;
}
.source-special b{color:#e8e0d6}
.upgrade-text{
  margin-top:13px;
  padding:10px 11px;
  border-left:2px solid #d49a24;
  background:rgba(186,122,26,.08);
  color:#e2bd54;
  font-size:12px;
  line-height:1.65;
}
.effect-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.effect-list span{
  padding:5px 7px;
  border-radius:3px;
  border:1px solid #604c34;
  background:#17120e;
  color:#b897e8;
  font-size:11px;
}
.effect-list span:last-child{color:#d3ae4e}
.lore-empty{margin:0;color:#736c66;font-size:12px;font-style:italic}


/* ==========================================================
   Weapons V2.2 — Balance Update 2026-09-14
   ========================================================== */
.title-notes{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.patch-note{
  display:grid;align-content:center;padding:9px 13px;
  border:1px solid #7a542d;background:linear-gradient(180deg,#2b1c10,#17110d);
  border-radius:5px;min-width:170px
}
.patch-note strong{color:#efb861;font-size:11px;letter-spacing:.06em}
.patch-note small{margin-top:3px;color:#8f8174;font-size:9px}

.status-badge.rework{
  border-color:#8b4f22;color:#ffbd71;background:#2f190c
}
.status-badge.needs_review{
  border-color:#7b6235;color:#e7ca83;background:#292112
}
.update-date{
  display:inline-block;margin-left:6px;color:#766d63;font-size:9px;vertical-align:middle
}
.section-date{
  float:right;color:#806f5d;font-family:Inter,sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.04em;margin-top:3px
}
.balance-detail-list{
  margin-top:10px;border:1px solid #3c3025;background:#100e0c
}
.balance-detail-list>div{
  display:grid;grid-template-columns:16px 1fr;gap:5px;
  padding:7px 9px;border-bottom:1px solid #29221c
}
.balance-detail-list>div:last-child{border-bottom:0}
.balance-detail-list span{color:#c89543;font-size:9px}
.balance-detail-list strong{color:#d7cec4;font-size:11px;font-weight:600}
.mechanics-box,.review-box{
  margin-top:10px;padding:10px 11px;border:1px solid #3f352a;background:#15110e
}
.mechanics-box b,.review-box b{
  display:block;color:#cfaa62;font-size:10px;letter-spacing:.08em;margin-bottom:7px
}
.mechanics-box span{
  display:block;color:#9fb8a4;font-size:11px;line-height:1.65
}
.review-box{border-color:#66512f;background:#1c170e}
.review-box b{color:#e0bc67}
.review-box span{display:block;color:#aaa097;font-size:11px;line-height:1.55}

/* Placeholder weapon icons are intentional until exact ingame icons are supplied. */
.itemicon-frame.qbg-unknown,
.mobile-icon-frame.qbg-unknown,
.drawer-icon-frame.qbg-unknown{
  border-color:#6a5c4c;
}


/* V2.3 — Flame Longsword V2 Hotfix 1.2.1 */
.hotfix-note{
  margin-top:10px;
  padding:9px 11px;
  border:1px solid #6f4e29;
  background:linear-gradient(180deg,#21160d,#15100c);
  color:#caa970;
  font-size:10px;
  line-height:1.55;
}


/* ==========================================================
   Weapons V2.4 — Stats Pass 1.2.2 / 2026-09-15
   ========================================================== */
.stats-pass-note{
  border-color:#365d62;
  background:linear-gradient(180deg,#122326,#0d1718);
}
.stats-pass-note strong{color:#72d8dc}
.stats-pass-note small{color:#88a6a7}

.confirmed-box{
  margin-top:10px;padding:10px 11px;
  border:1px solid #31583a;
  background:linear-gradient(180deg,#102117,#0c160f);
}
.confirmed-box b{
  display:block;color:#75cf86;font-size:9px;letter-spacing:.08em;margin-bottom:5px
}
.confirmed-box span{
  display:block;color:#9eb5a2;font-size:11px;line-height:1.55
}
.stats-pass-box{
  margin-top:10px;padding:10px 11px;
  border:1px solid #31535c;
  background:#0d181c;
  display:flex;gap:7px;flex-wrap:wrap;align-items:center
}
.stats-pass-box b{
  width:100%;color:#65ccd5;font-size:9px;letter-spacing:.08em
}
.stats-pass-box span{
  padding:4px 7px;border:1px solid #27464e;background:#0a1417;
  color:#a2bdc1;font-size:9px;border-radius:3px
}