*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#1a1a1a;
  --bg-card:#222;
  --bg-row-alt:#1e1e1e;
  --bg-row-hover:#2a2519;
  --border:#3d3426;
  --text:#e0d6c2;
  --text-dim:#8a8070;
  --gold:#d4a017;
  --red:#c0392b;
  --green:#27ae60;
}

html{font-size:14px}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline;color:#e6b422}

/* --- Header --- */
header{
  text-align:center;
  padding:1.25rem 1rem .75rem;
  border-bottom:2px solid var(--gold);
  box-shadow:0 2px 12px rgba(212,160,23,.15);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
}

.header-brand{
  display:flex;
  justify-content:center;
}
.dmm-logo{
  height:80px;
  width:auto;
  filter:drop-shadow(0 2px 8px rgba(192,57,43,.4));
}

.header-title{
  display:flex;
  flex-direction:column;
  align-items:center;
}
header h1{
  font-size:1.5rem;
  color:var(--gold);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
}

.skull-icon{
  height:24px;
  width:auto;
  image-rendering:pixelated;
  flex-shrink:0;
  filter:drop-shadow(0 0 4px rgba(192,57,43,.5));
}
.skull-icon-sm{
  height:16px;
  width:auto;
  image-rendering:pixelated;
  vertical-align:middle;
  filter:drop-shadow(0 0 3px rgba(192,57,43,.4));
}

.subtitle{
  color:var(--text-dim);
  font-size:.85rem;
  margin-top:.15rem;
  display:flex;
  align-items:center;
  gap:.3rem;
}
.world-icon{
  height:14px;
  width:auto;
  image-rendering:pixelated;
}

.skulls-divider{
  height:18px;
  width:auto;
  image-rendering:pixelated;
  opacity:.6;
}

/* --- Controls --- */
.controls{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem 1rem;
  max-width:1200px;
  margin:0 auto;
  width:100%;
  flex-wrap:wrap;
}

#search{
  flex:1 1 220px;
  padding:.45rem .7rem;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--bg-card);
  color:var(--text);
  font-size:.9rem;
  outline:none;
  transition:border-color .2s;
}
#search:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(212,160,23,.2);
}

.toggle{
  display:flex;
  align-items:center;
  gap:.35rem;
  cursor:pointer;
  font-size:.85rem;
  color:var(--text-dim);
  user-select:none;
  white-space:nowrap;
}
.toggle input{accent-color:var(--gold);cursor:pointer}

.status{
  margin-left:auto;
  font-size:.8rem;
  color:var(--text-dim);
  white-space:nowrap;
}

/* --- Table --- */
.table-wrap{
  flex:1;
  overflow-x:auto;
  padding:0 1rem 1rem;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  padding:.5rem .6rem;
  text-align:left;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}

th{
  position:sticky;
  top:0;
  background:var(--bg-card);
  color:var(--gold);
  font-weight:600;
  cursor:pointer;
  user-select:none;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:2px solid var(--gold);
}
th.num{text-align:right}
td.num{text-align:right;font-variant-numeric:tabular-nums}

th:hover{color:#e6b422}
th .arrow{font-size:.7rem;margin-left:.25rem;opacity:.5}
th.active .arrow{opacity:1}

tbody tr:nth-child(even){background:var(--bg-row-alt)}
tbody tr:hover{background:var(--bg-row-hover)}

.item-cell{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.item-cell img{
  width:24px;
  height:24px;
  image-rendering:pixelated;
  flex-shrink:0;
}
.item-name{overflow:hidden;text-overflow:ellipsis}

/* Members badge — gold star */
.members-badge{
  display:inline-block;
  flex-shrink:0;
  width:auto;
  height:auto;
  font-size:.75rem;
  line-height:1;
  color:var(--gold);
}
.members-badge::before{
  content:"\2605";
}

.price-buy{color:var(--green)}
.price-sell{color:var(--red)}
.spread-pos{color:var(--green)}
.spread-neg{color:var(--red)}

.empty{
  text-align:center;
  padding:2rem;
  color:var(--text-dim);
}

/* --- History chart row --- */
.history-row td{
  padding:0;
  border-bottom:2px solid var(--gold);
  background:var(--bg);
}
.history-chart-wrap{
  height:220px;
  padding:.75rem 1rem;
}
.history-row:hover{background:var(--bg)}
tbody tr.item-row{cursor:pointer}

/* --- Footer --- */
footer{
  text-align:center;
  padding:.75rem 1rem;
  color:var(--text-dim);
  font-size:.78rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
}
.footer-flavor{
  color:var(--red);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  gap:.35rem;
}

.version{opacity:.45;margin-left:.25rem}

/* --- Responsive --- */
@media(max-width:640px){
  .controls{gap:.5rem}
  th,td{padding:.4rem .35rem;font-size:.8rem}
  .item-cell img{width:20px;height:20px}
  header h1{font-size:1.2rem}
  .dmm-logo{height:56px}
  .skull-icon{height:18px}
  .skull-icon-sm{height:12px}
}