:root{
  --bg:#0d0f17; --panel:#161a28; --panel2:#1e2334; --ink:#eae7d6;
  --muted:#8b90a0; --gold:#ffce43; --green:#66d16b; --red:#e8595f;
  --blue:#5fb0f0; --line:#2b3145; --shadow:#000;
  --pixel:"Press Start 2P", ui-monospace, monospace;
  --term:"VT323", ui-monospace, monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--term); font-size:20px; line-height:1.15;
  -webkit-font-smoothing:none; image-rendering:pixelated;
}
a{color:var(--blue)}
.wrap{max-width:1080px; margin:0 auto; padding:22px 18px 60px; position:relative; z-index:1;}

/* header / cabinet */
.cab{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 20px; margin-bottom:20px;
  border-bottom:3px solid var(--line); padding-bottom:16px;}
.logo{font-family:var(--pixel); font-size:30px; letter-spacing:1px; color:var(--gold);
  text-shadow:3px 3px 0 var(--shadow); line-height:1.1; text-decoration:none;}
.logo b{color:var(--ink); font-weight:400;}
.tag{font-family:var(--pixel); font-size:9px; color:var(--muted); letter-spacing:2px;
  text-transform:uppercase; align-self:center;}
.meta{margin-left:auto; text-align:right; font-size:18px; color:var(--muted);}
.meta b{color:var(--green);}
.blink{color:var(--gold);}
@media (prefers-reduced-motion:no-preference){.blink{animation:bl 1.1s steps(1) infinite;}}
@keyframes bl{50%{opacity:0;}}

/* game selector (chooser pages + nav fallback) */
.games{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start; margin-bottom:16px;}
.game{font-family:var(--pixel); font-size:8px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink); background:var(--panel); border:2px solid var(--line);
  box-shadow:3px 3px 0 var(--shadow); padding:8px 10px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;}
.game:hover{border-color:var(--gold);}
.game[aria-current="true"]{background:var(--gold); color:#161018; border-color:var(--gold);}
.game .fac{color:var(--muted); font-size:7px;}
.game[aria-current="true"] .fac{color:#3a2b10;}

/* dropdown menubar */
.mgroup{position:relative;}
.mtop{font-family:var(--pixel); font-size:8px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink); background:var(--panel); border:2px solid var(--line);
  box-shadow:3px 3px 0 var(--shadow); padding:8px 10px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px; line-height:1;}
.mtop:hover,.mtop:focus-visible{border-color:var(--gold); outline:none;}
.mtop .car{color:var(--muted); font-size:7px;}
.mgroup.on .mtop,.mtop.active{background:var(--gold); color:#161018; border-color:var(--gold);}
.mgroup.on .mtop .car,.mtop.active .car{color:#3a2b10;}
.mdrop{display:none; position:absolute; top:calc(100% + 4px); left:0; z-index:20;
  min-width:210px; background:var(--panel2); border:2px solid var(--gold);
  box-shadow:5px 5px 0 var(--shadow); padding:5px;}
.mgroup.on .mdrop{display:block;}
.mitem{display:flex; justify-content:space-between; align-items:center; gap:14px;
  font-family:var(--pixel); font-size:8px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink); text-decoration:none; padding:9px; border:2px solid transparent; white-space:nowrap;}
.mitem:hover,.mitem:focus-visible{border-color:var(--gold); background:var(--panel); outline:none;}
.mitem[aria-current="true"]{color:var(--gold);}
.mitem.reg{color:var(--gold);}
.mitem .fac{color:var(--muted); font-size:7px;}
.mitem[aria-current="true"] .fac{color:var(--gold);}
.msep{height:2px; background:var(--line); margin:5px 3px;}
.mtop.mimport{border-style:dashed;}

/* tiles */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
@media (max-width:760px){.tiles{grid-template-columns:repeat(2,1fr);}}
/* five-across variant (population survey): tighter so all 5 fit one row */
.tiles5{grid-template-columns:repeat(5,1fr); gap:10px;}
.tiles5 .tile{padding:10px 10px 11px; overflow-wrap:anywhere;}
.tiles5 .tile .v{font-size:13px; margin-top:9px;}
.tiles5 .tile .s{font-size:15px;}
@media (max-width:900px){.tiles5{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.tiles5{grid-template-columns:repeat(2,1fr);}}
.tile{background:var(--panel); border:2px solid var(--line); box-shadow:5px 5px 0 var(--shadow); padding:12px 13px 13px;}
.tile .k{font-family:var(--pixel); font-size:8px; color:var(--muted); letter-spacing:1px; text-transform:uppercase;}
.tile .v{font-family:var(--pixel); font-size:16px; color:var(--gold); margin-top:12px; line-height:1.35;}
.tile .v.gr{color:var(--green);} .tile .v.mu{color:var(--ink);} .tile .v.g{color:var(--gold);}
.tile .s{font-size:18px; color:var(--muted); margin-top:6px;}

/* two-column panel layout (kills vertical scrolling on data-heavy pages) */
.panelgrid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:18px; align-items:start; margin-bottom:22px;}
.panelgrid > .panel{margin-bottom:0 !important;}
.panelgrid > .panelcol{display:flex; flex-direction:column; gap:18px; min-width:0;}
.panelgrid > .panelcol > .panel{margin-bottom:0 !important;}
@media (max-width:760px){.panelgrid{grid-template-columns:1fr;}}

/* controls */
.controls{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:16px;}
.search{flex:1 1 240px; display:flex; align-items:center; gap:10px; background:var(--panel);
  border:2px solid var(--line); box-shadow:4px 4px 0 var(--shadow); padding:8px 12px;}
.search span{font-family:var(--pixel); font-size:9px; color:var(--gold);}
.search input{flex:1; background:transparent; border:0; outline:none; color:var(--ink); font-family:var(--term); font-size:20px;}
.search input::placeholder{color:var(--muted);}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{font-family:var(--pixel); font-size:8px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink); background:var(--panel); border:2px solid var(--line); box-shadow:3px 3px 0 var(--shadow);
  padding:7px 9px; cursor:pointer;}
.chip:hover{border-color:var(--gold);}
.chip[aria-pressed="true"]{background:var(--gold); color:#161018; border-color:var(--gold);}
.chip:focus-visible,.game:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

/* seller-profile listed-value sparkline */
.spark{display:block; margin-top:6px; max-width:100%;}

/* table */
.tablewrap{background:var(--panel); border:2px solid var(--line); box-shadow:6px 6px 0 var(--shadow); overflow-x:auto;}
table{width:100%; border-collapse:collapse; min-width:720px; table-layout:fixed;}
tbody td, thead th{overflow:hidden; text-overflow:ellipsis;}
thead th{font-family:var(--pixel); font-size:8px; letter-spacing:1px; text-transform:uppercase; color:var(--gold);
  text-align:right; padding:12px; background:var(--panel2); border-bottom:2px solid var(--line);
  cursor:pointer; white-space:nowrap; position:sticky; top:0;}
thead th.l{text-align:left;}
thead th:hover{color:var(--ink);}
thead th .ar{color:var(--muted);}
thead th .ar.off{visibility:hidden;}
tbody td{padding:6px 12px; text-align:right; border-bottom:1px solid #20263a; font-variant-numeric:tabular-nums; white-space:nowrap;}
tbody td.l{text-align:left;}
tbody tr:hover{background:var(--panel2);}
tbody a.name{color:var(--ink); text-decoration:none;}
tbody a.name:hover{color:var(--gold); text-decoration:underline;}
/* Placeholder rows let Wowhead rename the link to the real item name; it also
   tags on a tiny background icon (icontinyl) — hide it, the row's own a.ic icon
   already sits in front of the name. */
tbody a.name.icontinyl{background-image:none !important; padding-left:0 !important;}
tbody td.cat{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35;}
.cat{font-family:var(--pixel); font-size:7px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; overflow-wrap:anywhere;}
/* Source badge under the market chip: crafted/gathered/... + producing profession. */
.cat .srcb{display:block; width:max-content; max-width:100%; margin-top:5px; padding:2px 5px; border-radius:3px;
  font-family:var(--pixel); font-size:7px; letter-spacing:1px; text-transform:uppercase;
  white-space:normal; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line);}
.cat .srcb.srcb-crafted{color:var(--green); border-color:rgba(102,209,107,.32);}
.cat .srcb.srcb-gathered{color:var(--gold); border-color:rgba(255,206,67,.30);}
.cat .srcb.srcb-disenchant{color:var(--blue); border-color:rgba(95,176,240,.30);}
.cat .srcb.srcb-noncrafted{color:var(--muted); border-color:rgba(139,144,160,.34);}
.g{color:var(--gold);} .gr{color:var(--green);} .rd{color:var(--red);} .mu{color:var(--muted);}
.meter{display:inline-flex; gap:2px; vertical-align:middle; margin-right:8px;}
.meter i{width:6px; height:13px; background:#31374d; display:inline-block;}
.meter i.on{background:var(--green);} .meter i.hi{background:var(--gold);}
.dv{display:inline-block; width:30px; text-align:right;}
.foot{padding:12px 14px; font-family:var(--pixel); font-size:8px; color:var(--muted); letter-spacing:1px;
  border-top:2px solid var(--line); background:var(--panel2);}
.src{margin-top:20px; font-size:16px; color:var(--muted); text-align:center; line-height:1.5;}

/* item page */
.back{display:inline-block; font-family:var(--pixel); font-size:9px; color:var(--gold);
  text-decoration:none; margin-bottom:16px; letter-spacing:1px;}
.ihead{border-bottom:3px solid var(--line); padding-bottom:14px; margin-bottom:18px;}
.iname{font-family:var(--pixel); font-size:20px; color:var(--gold); margin:0 0 10px; line-height:1.4; text-shadow:2px 2px 0 var(--shadow);}
/* Placeholder item pages let Wowhead rename this link to the real name; keep the
   heading's own gold styling and drop the tiny icon Wowhead tags on. */
a.iname-wh{color:inherit; text-decoration:none;}
a.iname-wh.icontinyl{background-image:none !important; padding-left:0 !important;}
.itag{font-family:var(--pixel); font-size:8px; color:var(--muted); letter-spacing:1px; text-transform:uppercase;}
.istats{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:22px;}
@media (max-width:760px){.istats{grid-template-columns:repeat(2,1fr);}}
.panel{background:var(--panel); border:2px solid var(--line); box-shadow:6px 6px 0 var(--shadow); padding:16px;}
.ptitle{font-family:var(--pixel); font-size:9px; color:var(--gold); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px;}
.chart{width:100%; height:280px;}
.chart svg{width:100%; height:100%; display:block;}
.legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:17px; color:var(--muted);}
.legend i{display:inline-block; width:12px; height:12px; vertical-align:middle; margin-right:5px;}
.hint{font-family:var(--pixel); font-size:8px; color:var(--muted); letter-spacing:1px; margin-top:12px; line-height:1.7;}
.gridline{stroke:#232a3d; stroke-width:1;}
.axislabel{fill:var(--muted); font-family:var(--term); font-size:15px;}
.dot{fill:var(--gold);}

/* Wowhead item icon in table rows (populated by tooltips.js). Fixed box so the
   layout stays stable before the icon image loads. */
a.ic{display:inline-block; width:18px; height:18px; vertical-align:middle;
     margin-right:7px; border-radius:2px; background-color:#0c0e16;
     background-repeat:no-repeat; background-position:center; background-size:18px 18px;}
a.ic img, a.ic ins, a.ic del{width:18px !important; height:18px !important;
     display:inline-block; border-radius:2px;}
.seller-sort{appearance:none; background:none; border:0; padding:0; color:inherit;
  font:inherit; text-transform:inherit; cursor:pointer; white-space:nowrap;}
.seller-sort:focus-visible{outline:2px solid var(--gold); outline-offset:4px;}