:root {
  --bg: #07090e;
  --bg-2: #0d1119;
  --panel: rgba(18, 22, 31, 0.86);
  --panel-solid: #12161f;
  --line: rgba(200, 170, 110, 0.16);
  --line-strong: rgba(200, 170, 110, 0.34);
  --gold: #c8aa6e;
  --gold-bright: #f0d9a8;
  --text: #d9dee8;
  --muted: #7f8899;
  --good: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 15% -10%, #1a2338 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 0%, #2a1c30 0%, transparent 55%),
    var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

.wrap { max-width: 1360px; margin: 0 auto; padding: 22px 20px 80px; }

/* ---------- header ---------- */

.topbar { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.brand { display: flex; flex-direction: column; gap: 2px; }
.brand h1 {
  margin: 0; font-size: 25px; letter-spacing: 0.5px; font-weight: 700;
  background: linear-gradient(100deg, var(--gold-bright), var(--gold) 55%, #8d7541);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand .sub { color: var(--muted); font-size: 12.5px; }
.topbar .spacer { flex: 1; }

.groupscore { text-align: right; line-height: 1.1; }
.groupscore .n { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.groupscore .l { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; }

.ghost {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 14px; transition: 0.15s;
}
.ghost:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.08); }
.ghost[disabled] { opacity: 0.5; cursor: progress; }

.buildbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 12.5px;
}
.buildbar.ok { border-color: rgba(74, 222, 128, 0.35); }
.buildbar.bad { border-color: rgba(248, 113, 113, 0.4); }
.buildbar .log { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.spinner {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 2px solid rgba(200, 170, 110, 0.25); border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- roster ---------- */

.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }

.pc {
  position: relative; display: flex; gap: 12px; align-items: center; text-align: left;
  padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(120deg, var(--panel), rgba(12, 15, 22, 0.9));
  box-shadow: var(--shadow); transition: 0.18s; overflow: hidden;
}
.pc::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--cc, var(--gold));
}
.pc:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.pc.off { opacity: 0.34; filter: saturate(0.35); }
.pc img.face { width: 46px; height: 46px; border-radius: 9px; border: 1px solid var(--line-strong); }
.pc .who { flex: 1; min-width: 0; }
.pc .nm { font-weight: 650; font-size: 15px; color: var(--cc, var(--text)); }
.pc .meta { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .rio { text-align: right; line-height: 1.15; }
.pc .rio b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.pc .rio span { font-size: 10.5px; color: var(--muted); }

/* ---------- controls ---------- */

.controls {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 22px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.controls label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; }
.controls input[type="range"] { width: 190px; accent-color: var(--gold); }
.keybadge {
  font-weight: 700; font-size: 18px; color: var(--gold-bright);
  min-width: 46px; text-align: center; font-variant-numeric: tabular-nums;
}
.rewards { display: flex; gap: 16px; font-size: 12px; }
.rewards b { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.hint { color: var(--muted); font-size: 11.5px; }

/* ---------- panels ---------- */

section { margin-bottom: 26px; }
.head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.head h2 { margin: 0; font-size: 15px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); font-weight: 650; }
.head .note { color: var(--muted); font-size: 11.5px; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }

/* ---------- push board ---------- */

.scrollx { overflow-x: auto; }
table.board { width: 100%; border-collapse: collapse; min-width: 640px; }
table.board th, table.board td { padding: 9px 12px; text-align: left; }
table.board thead th {
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
  font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.board thead th.num, table.board td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.board tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
table.board tbody tr:last-child { border-bottom: none; }
table.board tbody tr:hover { background: rgba(255, 255, 255, 0.035); }

.dcell { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.dcell img { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line-strong); }
.dcell .dn { font-weight: 600; }
.dcell .dt { color: var(--muted); font-size: 11px; }

.run { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.run .lv {
  font-weight: 700; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid transparent;
}
.run .sc { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.run .up { color: var(--gold); letter-spacing: -2px; font-size: 12px; }
.run.none { color: #4a5163; }

.bar { position: relative; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; min-width: 70px; }
.bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.bar.g > i { background: linear-gradient(90deg, #2f7a4f, var(--good)); }

/* ---------- ranking cards ---------- */

/* Two columns only when each is wide enough for the loot table underneath;
   below that a single full-width column beats a horizontal scrollbar. */
.ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 18px; }

.rank { display: flex; flex-direction: column; }
.rank ol { list-style: none; margin: 0; padding: 0; }
.rank li {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background-size: cover; background-position: 50% 35%; isolation: isolate;
}
.rank li::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 13, 19, 0.93) 30%, rgba(10, 13, 19, 0.72) 100%);
}
.rank li:last-child { border-bottom: none; }
.rank .pos { width: 20px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank li.top .pos { color: var(--gold-bright); }
.rank .body { flex: 1; min-width: 0; }
.rank .t { font-weight: 620; }
.rank .d { color: var(--muted); font-size: 11.5px; }
.rank .f { color: #5c6478; font-size: 10.5px; margin-top: 1px; }
.rank .v { text-align: right; font-variant-numeric: tabular-nums; }
.rank .v b { font-size: 17px; color: var(--gold-bright); }
.rank .v span { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.rank li.clickable { cursor: pointer; }
.rank .chev { color: var(--muted); font-size: 11px; width: 12px; text-align: center; }

.loot { padding: 4px 14px 12px 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: rgba(0, 0, 0, 0.3); }
/* The chips column is the first thing to get squeezed off the card, so the
   table scrolls instead of being crushed. */
.loot table { width: 100%; min-width: 540px; border-collapse: collapse; }
.loot .iname { white-space: nowrap; }
.loot td { padding: 4px 8px 4px 0; vertical-align: middle; }
/* Chips wrap onto more rows rather than being pushed off the card; the
   scroll container is only a fallback for very narrow panels. */
.loot td.n { text-align: right; font-variant-numeric: tabular-nums; }
.loot td.n .who-chip { margin: 1px 0 1px 5px; }
.loot tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.045); }
.loot .iname { display: flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; }
.loot .iname img { width: 22px; height: 22px; border-radius: 5px; flex: none; }
.loot .slotl { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.9px; white-space: nowrap; }
.loot .bossl { color: #5c6478; font-size: 10.5px; white-space: nowrap; }
.who-chip {
  display: inline-flex; align-items: baseline; gap: 4px; margin-left: 6px; padding: 1px 7px;
  border-radius: 20px; font-size: 10.5px; border: 1px solid currentColor; white-space: nowrap;
}
.who-chip b { font-variant-numeric: tabular-nums; }

/* ---------- character sheets ---------- */

.sheets { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 18px; }
.sheet { display: flex; flex-direction: column; }
.sheet .shead {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 18%, transparent), transparent);
}
.sheet .shead img { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line-strong); }
.sheet .shead .nm { font-weight: 650; color: var(--cc); }
.sheet .shead .meta { color: var(--muted); font-size: 11.5px; }
.sheet .shead .ilvl { margin-left: auto; text-align: right; }
.sheet .shead .ilvl b { font-size: 19px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.sheet .shead .ilvl span { display: block; font-size: 10px; color: var(--muted); letter-spacing: 1.2px; }

.nometa {
  padding: 7px 14px; font-size: 11px; color: var(--muted);
  border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
}

.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, 0.05); }
.slot {
  display: flex; gap: 9px; align-items: center; padding: 8px 10px; background: var(--panel-solid);
  border-left: 2px solid transparent; text-align: left; width: 100%; border-top: 0; border-right: 0; border-bottom: 0;
  transition: 0.14s;
  /* Grid items default to min-width:auto, which lets a long item name push the
     item level column off the card. Every part of the row must be shrinkable
     except the number itself. */
  min-width: 0;
}
.slot:hover { background: #171c27; }
.slot.sel { background: #1b2130; border-left-color: var(--gold); }
.slot.up { border-left-color: var(--bad); }
.slot.up-small { border-left-color: var(--warn); }
.slot.done { border-left-color: rgba(74, 222, 128, 0.5); }
.slot img { width: 32px; height: 32px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.14); }
.slot .si { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.slot .sl { font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .sn { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .sv { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.slot .trk { font-size: 9.5px; letter-spacing: 0.5px; font-weight: 600; white-space: nowrap; margin-top: 1px; }
.slot .delta { font-size: 10.5px; font-weight: 600; }
.slot .delta.pos { color: var(--good); }
.warnpin { font-size: 9.5px; color: var(--warn); margin-left: 6px; letter-spacing: 0.4px; }
.bis { color: var(--gold); font-size: 10.5px; margin-right: 4px; white-space: nowrap; }
.bis.hot { color: var(--gold-bright); text-shadow: 0 0 8px rgba(240, 217, 168, 0.5); }
.slot .sright { flex: 0 0 auto; text-align: right; min-width: 62px; }

.q1 { color: #ffffff; } .q2 { color: #1eff00; } .q3 { color: #0070dd; }
.q4 { color: #a335ee; } .q5 { color: #ff8000; }

/* ---------- upgrade drilldown ---------- */

.drill { padding: 12px 14px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); }
.recs { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.recs-h {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.rec {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 4px 8px 4px 4px;
  border: 1px solid var(--line-strong); border-radius: 7px; font-size: 11.5px;
  background: rgba(200, 170, 110, 0.07);
}
.rec.off { border-color: var(--line); background: none; opacity: 0.55; }
.rec:hover { border-color: var(--gold); }
.rec img { width: 20px; height: 20px; border-radius: 4px; }
.rec b { color: var(--gold-bright); font-variant-numeric: tabular-nums; }

.drill h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); }
.drill .empty { color: var(--muted); font-size: 12px; }
.dgroup { margin-bottom: 10px; }
.dgroup .dh { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 5px; }
.dgroup .dh img { width: 20px; height: 20px; border-radius: 5px; }
.dgroup .dh .cnt { color: var(--muted); font-size: 11px; }
.items { display: flex; flex-wrap: wrap; gap: 6px; }
.it {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px;
  border: 1px solid var(--line); border-radius: 7px; background: rgba(255, 255, 255, 0.03); font-size: 11.5px;
}
.it:hover { border-color: var(--line-strong); }
.it img { width: 20px; height: 20px; border-radius: 4px; }
.it .bs { color: var(--muted); font-size: 10px; }

/* ---------- misc ---------- */

.notice { padding: 10px 14px; border: 1px solid rgba(248, 113, 113, 0.35); border-radius: var(--radius); background: rgba(248, 113, 113, 0.08); margin-bottom: 16px; font-size: 12.5px; }
.loading { padding: 60px 0; text-align: center; color: var(--muted); }
.foot { color: var(--muted); font-size: 11px; text-align: center; margin-top: 30px; }

@media (max-width: 720px) {
  .wrap { padding: 16px 12px 60px; }
  .slots { grid-template-columns: 1fr; }
  .dcell { min-width: 150px; }
}