/* ═══════════════════════════════════════════════════════════════════════════
   Taskbar Fantasy — Wiki
   The token set and component library are lifted VERBATIM from the live site
   (taskbar-fantasy.web.app index.html + monster.html) so the wiki reads as the
   same product, not a cousin. New components are marked NEW.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg: #0b0d12;
  --bg-elev: #14171f;
  --card: #171b24;
  --card-border: rgba(255,255,255,0.08);
  --text: #e9edf4;
  --text-muted: #9aa3b5;
  --gold: #d9b86a;
  --gold-dim: rgba(217,184,106,0.4);
  --act1: #6fbf73;
  --act2: #e08a3c;
  --act3: #8b7ad6;
  --boss: #e0607a;
  --cardp: #c8b4ff;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1100px 500px at 50% -8%, rgba(217,184,106,0.07), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif; line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Cinzel',serif;}
a{color:inherit;}

/* ---------- top nav (verbatim) ---------- */
.topnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; background:rgba(11,13,18,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--card-border); flex-wrap:wrap; gap:10px;
}
.brand{display:flex; align-items:center; gap:10px; font-family:'Cinzel',serif; font-weight:700; font-size:1.05rem; letter-spacing:.03em; text-decoration:none;}
.brand-mark{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold);}
.navlinks{display:flex; gap:6px; flex-wrap:wrap;}
.navlinks a{
  padding:8px 14px; border-radius:999px; font-size:.85rem; font-weight:600;
  text-decoration:none; color:var(--text-muted); border:1px solid transparent; transition:all .2s ease;
}
.navlinks a:hover{color:var(--text); border-color:var(--card-border); background:rgba(255,255,255,0.04);}
.navlinks a.active{
  color:var(--gold); border-color:var(--gold-dim);
  background:rgba(217,184,106,0.08); text-shadow:0 0 12px rgba(217,184,106,0.45);
}

/* ---------- NEW: wiki sub-nav + search ---------- */
.subnav{
  position:sticky; top:57px; z-index:40;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 28px; background:rgba(13,15,21,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--card-border);
}
.subnav .sublinks{display:flex; gap:4px; flex-wrap:wrap; flex:1; min-width:0;}
.subnav .sublinks a{
  padding:5px 11px; border-radius:4px; font-size:.78rem; font-weight:600; letter-spacing:.02em;
  text-decoration:none; color:var(--text-muted); border:1px solid transparent;
}
.subnav .sublinks a:hover{color:var(--text); background:rgba(255,255,255,0.05);}
.subnav .sublinks a.active{color:var(--gold); border-color:var(--gold-dim); background:rgba(217,184,106,0.08);}

.searchwrap{position:relative; flex:0 0 300px; max-width:100%;}
.searchbox{
  width:100%; padding:7px 12px 7px 32px; border-radius:6px;
  background:var(--bg-elev); border:1px solid var(--card-border); color:var(--text);
  font-family:inherit; font-size:.85rem; outline:none;
}
.searchbox:focus{border-color:var(--gold-dim); box-shadow:0 0 0 3px rgba(217,184,106,0.08);}
.searchwrap::before{
  content:"\2315"; position:absolute; left:10px; top:50%; transform:translateY(-55%);
  color:var(--text-muted); font-size:.9rem; pointer-events:none;
}
.searchwrap .kbd{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:.62rem; color:var(--text-muted); border:1px solid var(--card-border);
  border-radius:3px; padding:1px 5px; pointer-events:none;
}
.searchbox:focus + .kbd{display:none;}
.results{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60;
  background:var(--card); border:1px solid var(--gold-dim); border-radius:6px;
  box-shadow:0 14px 40px rgba(0,0,0,0.6); overflow:hidden; display:none;
  max-height:70vh; overflow-y:auto;
}
.results.show{display:block;}
.results a{
  display:flex; align-items:center; gap:9px; padding:7px 12px;
  text-decoration:none; font-size:.82rem; border-bottom:1px solid rgba(255,255,255,0.05);
}
.results a:last-child{border-bottom:none;}
.results a:hover, .results a.sel{background:rgba(217,184,106,0.10);}
.results .rn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.results .rk{
  flex:none; font-size:.58rem; text-transform:uppercase; letter-spacing:.09em; font-weight:700;
  color:var(--text-muted); border:1px solid var(--card-border); border-radius:999px; padding:1px 7px;
}
.results .empty{padding:12px; font-size:.82rem; color:var(--text-muted); text-align:center;}

/* ---------- layout (verbatim) ---------- */
.wrap{max-width:1160px; margin:0 auto; padding:0 24px;}
.hero{text-align:center; padding:52px 20px 4px;}
.hero .eyebrow{text-transform:uppercase; letter-spacing:.3em; font-size:.7rem; color:var(--gold); font-weight:600;}
.hero h1{margin:10px 0 8px; font-size:clamp(1.8rem,4.4vw,2.7rem); letter-spacing:.04em;}
.hero p{color:var(--text-muted); max-width:680px; margin:0 auto; font-size:.95rem;}
.divider{display:flex; align-items:center; gap:12px; margin:20px auto 26px; color:var(--gold); max-width:520px;}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-dim));}
.divider::after{background:linear-gradient(90deg, var(--gold-dim), transparent);}
.divider .gem{font-size:.7rem; letter-spacing:.4em; transform:translateX(.2em);}

.panel{
  position:relative; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--card);
  border:1px solid var(--gold-dim); border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.55), inset 0 0 0 4px rgba(217,184,106,0.05), 0 10px 34px rgba(0,0,0,0.35);
}
.panel::before, .panel::after{content:""; position:absolute; width:16px; height:16px; pointer-events:none; z-index:2;}
.panel::before{top:6px; left:6px; border-top:2px solid var(--gold); border-left:2px solid var(--gold);}
.panel::after{bottom:6px; right:6px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold);}
.panel.pad{padding:22px 24px;}

.zone-head{text-align:center; margin:40px 0 22px;}
.zone-head .z-eyebrow{font-size:.72rem; text-transform:uppercase; letter-spacing:.3em; font-weight:600; color:var(--gold);}
.zone-head h2{margin:8px 0 0; font-size:clamp(1.3rem,3vw,1.85rem); letter-spacing:.03em;}
.zone-head .divider{margin-top:12px;}
.zone-note{font-size:.82rem; color:var(--text-muted); max-width:680px; margin:10px auto 0;}
.act1 .z-eyebrow,.act1 .divider{color:var(--act1);} .act2 .z-eyebrow,.act2 .divider{color:var(--act2);} .act3 .z-eyebrow,.act3 .divider{color:var(--act3);}

/* ---------- chips + pills (verbatim) ---------- */
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding:3px 9px; border-radius:999px; border:1px solid; text-decoration:none; display:inline-block;
}
.chip.race,.chip.size,.chip.neutralchip{color:var(--text-muted); border-color:rgba(255,255,255,0.16); background:rgba(255,255,255,0.04);}
a.chip:hover{filter:brightness(1.25);}
.el-water  {color:#7cbcff; border-color:rgba(124,188,255,0.45); background:rgba(124,188,255,0.08);}
.el-earth  {color:#9ed07f; border-color:rgba(158,208,127,0.45); background:rgba(158,208,127,0.08);}
.el-wind   {color:#7fe3d0; border-color:rgba(127,227,208,0.45); background:rgba(127,227,208,0.08);}
.el-fire   {color:#ff9a6a; border-color:rgba(255,154,106,0.45); background:rgba(255,154,106,0.08);}
.el-neutral{color:#cfd8e3; border-color:rgba(207,216,227,0.35); background:rgba(207,216,227,0.06);}
.el-shadow {color:#b79ae8; border-color:rgba(183,154,232,0.45); background:rgba(183,154,232,0.08);}
.el-holy   {color:#f4e2a8; border-color:rgba(244,226,168,0.45); background:rgba(244,226,168,0.08);}
.el-ghost  {color:#a9d8d4; border-color:rgba(169,216,212,0.45); background:rgba(169,216,212,0.08);}
.el-undead {color:#9ba98c; border-color:rgba(155,169,140,0.45); background:rgba(155,169,140,0.08);}
.el-poison {color:#c58fd8; border-color:rgba(197,143,216,0.45); background:rgba(197,143,216,0.08);}

.pill{
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  font-size:.7rem; padding:2px 8px; border-radius:12px; text-decoration:none;
  background:var(--bg-elev); border:1px solid var(--card-border); color:var(--text);
}
a.pill:hover{border-color:var(--gold-dim); background:rgba(217,184,106,0.08);}
.pill .n{min-width:0; white-space:normal; overflow-wrap:anywhere;}
.pill .r{color:var(--gold); font-weight:700; flex:none;}
.pill.card{border-color:rgba(200,180,255,0.4); color:var(--cardp);} .pill.card .r{color:var(--cardp);}
.pill.motes{color:var(--text-muted);} .pill.motes .r{color:var(--text-muted); font-weight:600;}
.droprow{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}

/* ---------- stat grid (verbatim) ---------- */
.statgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:1px;
  background:rgba(255,255,255,0.07); border:1px solid var(--card-border); border-radius:6px; overflow:hidden;
  margin-bottom:14px;
}
.stat{background:var(--bg-elev); padding:7px 10px;}
.stat .k{font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); font-weight:700;}
.stat .v{font-size:.9rem; font-weight:700;}
.stat .v a{color:var(--gold); text-decoration:none;}
.stat .v a:hover{text-decoration:underline;}

.drops-title, .sec-title{
  font-size:.6rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold);
  font-weight:700; margin:0 0 7px;
}
.mechs{list-style:none; margin:0; padding:0;}
.mechs li{font-size:.78rem; color:var(--text-muted); padding:2px 0; line-height:1.5;}
.mechs li::before{content:"\25C6  "; color:var(--gold); font-size:.56rem;}
.mechs li b{color:var(--text);}

/* ---------- NEW: filter bar ---------- */
.filterbar{
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;
  padding:13px 16px; margin-bottom:14px;
}
.fgroup{display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.fgroup > .flabel{
  font-size:.58rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700;
  color:var(--text-muted); margin-right:2px;
}
.fchip{
  font-size:.68rem; font-weight:600; padding:3px 9px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid var(--card-border); color:var(--text-muted);
  font-family:inherit; transition:all .15s ease;
}
.fchip:hover{color:var(--text); border-color:var(--gold-dim);}
.fchip.on{color:var(--gold); border-color:var(--gold-dim); background:rgba(217,184,106,0.10);}
.ftext{
  padding:5px 10px; border-radius:5px; background:var(--bg-elev);
  border:1px solid var(--card-border); color:var(--text); font-family:inherit; font-size:.78rem; outline:none;
  min-width:150px;
}
.ftext:focus{border-color:var(--gold-dim);}
.fcount{font-size:.72rem; color:var(--text-muted); margin-left:auto;}
.fcount b{color:var(--gold);}

/* ---------- NEW: dense data table (the RMS list view) ---------- */
.tablewrap{overflow-x:auto; border-radius:6px; border:1px solid var(--card-border); background:var(--bg-elev);}
table.dtable{border-collapse:collapse; width:100%; font-size:.78rem; min-width:640px;}
table.dtable thead th{
  position:sticky; top:0; z-index:2; text-align:left; white-space:nowrap;
  background:#10131a; color:var(--gold); font-weight:700; font-size:.6rem;
  text-transform:uppercase; letter-spacing:.1em; padding:8px 10px;
  border-bottom:1px solid var(--gold-dim); cursor:pointer; user-select:none;
}
table.dtable thead th:hover{color:#f2d795;}
table.dtable thead th[aria-sort]::after{content:" \25B4"; opacity:.85;}
table.dtable thead th[aria-sort="descending"]::after{content:" \25BE";}
table.dtable tbody td{padding:6px 10px; border-bottom:1px solid rgba(255,255,255,0.05); vertical-align:middle;}
table.dtable tbody tr:hover{background:rgba(217,184,106,0.055);}
table.dtable tbody tr:last-child td{border-bottom:none;}
table.dtable td.num{text-align:right; font-variant-numeric:tabular-nums;}
table.dtable td.nm a{color:var(--text); text-decoration:none; font-weight:600;}
table.dtable td.nm a:hover{color:var(--gold);}
table.dtable td.mut{color:var(--text-muted);}
.rare a{color:var(--gold) !important;}
.boss-name a{color:var(--boss) !important;}
.mb-name a{color:#f0c99a !important;}

/* ---------- NEW: detail layout ---------- */
.breadcrumb{font-size:.74rem; color:var(--text-muted); margin:26px 0 8px;}
.breadcrumb a{color:var(--gold); text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb span{opacity:.5; margin:0 6px;}
.dhead{display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-bottom:6px;}
.dhead h1{margin:0 0 4px; font-size:clamp(1.5rem,3.4vw,2.15rem); letter-spacing:.03em;}
.dhead .sub{font-size:.86rem; color:var(--text-muted); margin-bottom:9px;}
.dhead.is-boss h1{color:var(--boss);}
.dhead.is-mb h1{color:#f0c99a;}
.dhead.is-card h1{color:var(--cardp);}
.dhead.is-rare h1{color:var(--gold);}
.sprite-box{
  width:78px; height:78px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(60% 42% at 50% 85%, rgba(0,0,0,0.5), transparent 70%), #0d0a16;
  border:1px solid var(--card-border); border-radius:6px; overflow:hidden;
  color:var(--text-muted); font-size:1.7rem;
}
.detail-grid{display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:16px; margin:18px 0 40px;}
.block{padding:16px 18px; margin-bottom:14px;}
.block > h2{
  margin:0 0 11px; font-size:.68rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--gold); font-weight:700; font-family:'Inter',sans-serif;
}
.block p{margin:0 0 9px; font-size:.85rem; color:var(--text-muted);}
.block p:last-child{margin-bottom:0;}
.block p b{color:var(--text);}
.block .empty{font-size:.8rem; color:var(--text-muted); font-style:italic; opacity:.7;}

.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:.82rem;}
.kv dt{color:var(--text-muted); white-space:nowrap;}
.kv dd{margin:0; color:var(--text);}
.kv dd a{color:var(--gold); text-decoration:none;}
.kv dd a:hover{text-decoration:underline;}

.relgroup{margin-bottom:12px;}
.relgroup:last-child{margin-bottom:0;}
.relgroup .rlabel{
  font-size:.58rem; text-transform:uppercase; letter-spacing:.13em; font-weight:700;
  color:var(--text-muted); margin-bottom:5px;
}

/* ---------- NEW: rate bar ---------- */
.ratebar{display:inline-block; width:46px; height:5px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden; vertical-align:middle;}
.ratebar i{display:block; height:100%; background:linear-gradient(90deg,#8a6a24,var(--gold));}

/* ---------- NEW: tier toggle, badges, cross-refs ---------- */
.tiertoggle{display:inline-flex; border:1px solid var(--card-border); border-radius:5px; overflow:hidden;}
.tiertoggle button{
  padding:3px 11px; font-size:.68rem; font-weight:700; font-family:inherit; cursor:pointer;
  background:var(--bg-elev); color:var(--text-muted); border:none; border-right:1px solid var(--card-border);
}
.tiertoggle button:last-child{border-right:none;}
.tiertoggle button.on{background:rgba(217,184,106,0.16); color:var(--gold);}
.badge{
  display:inline-block; font-size:.56rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  padding:2px 8px; border-radius:999px; border:1px solid; margin-right:5px;
}
.badge.b4{color:var(--gold); border-color:var(--gold-dim); background:rgba(217,184,106,0.12);}
.badge.bfrozen{color:#8fc4e8; border-color:rgba(143,196,232,0.45); background:rgba(143,196,232,0.08);}
.badge.bvendor{color:var(--text-muted); border-color:rgba(255,255,255,0.16); background:rgba(255,255,255,0.04);}
.badge.bboss{color:var(--boss); border-color:rgba(224,96,122,0.5); background:rgba(224,96,122,0.1);}
.badge.bmb{color:#f0c99a; border-color:rgba(240,201,154,0.45); background:rgba(240,201,154,0.09);}
.badge.bov{color:#e0b0ff; border-color:rgba(224,176,255,0.5); background:rgba(224,176,255,0.10);}
a.xlink{color:var(--gold); text-decoration:none; border-bottom:1px dotted rgba(217,184,106,0.4);}
a.xlink:hover{border-bottom-style:solid;}

/* ---------- NEW: hub tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin:28px 0 10px;}
.tile{padding:18px 20px; text-decoration:none; display:block; transition:transform .13s ease, box-shadow .13s ease;}
.tile:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.55), inset 0 0 0 4px rgba(217,184,106,0.08), 0 14px 40px rgba(0,0,0,0.45);}
.tile h3{margin:0 0 5px; font-size:1rem; letter-spacing:.03em; color:var(--gold);}
.tile .cnt{font-size:1.55rem; font-weight:800; font-family:'Cinzel',serif; line-height:1.1;}
.tile p{margin:5px 0 0; font-size:.78rem; color:var(--text-muted);}

.notebar{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.75rem; color:var(--text-muted);
  border:1px dashed rgba(217,184,106,0.30); border-radius:5px;
  padding:9px 13px; margin:16px 0 0; background:rgba(217,184,106,0.035);
}
.notebar b{color:var(--gold);}

footer{
  text-align:center; padding:52px 20px 34px; color:var(--text-muted); font-size:.8rem;
  border-top:1px solid var(--card-border); margin-top:60px;
}
footer .fbrand{font-family:'Cinzel',serif; color:var(--gold); letter-spacing:.14em; font-size:.85rem; margin-bottom:6px;}
footer .meta{font-size:.7rem; opacity:.75; margin-top:7px;}

.loading{text-align:center; padding:70px 20px; color:var(--text-muted); font-size:.9rem;}

/* ---------- responsive (the live site's breakpoints) ---------- */
@media (max-width:900px){
  .detail-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .topnav{padding:12px 16px;} .subnav{padding:9px 16px; top:auto; position:static;}
  .wrap{padding:0 14px;}
  .searchwrap{flex:1 1 100%;}
  .tiles{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .tiles{grid-template-columns:1fr;}
  .dhead{gap:12px;}
}

/* sprite images (added) */
.sprite-box.has-img{display:flex;align-items:center;justify-content:center;overflow:hidden}
.sprite-box.has-img img{min-width:72%;min-height:72%;max-width:92%;max-height:92%;object-fit:contain;
  image-rendering:pixelated}

/* list-page thumbnails (add-list-thumbs.py) */
.tico{width:22px;height:22px;object-fit:contain;image-rendering:pixelated;vertical-align:-5px;margin-right:8px;}