:root {
  --stone: #1e222b;
  --panel: #262b36;
  --line: #363d4b;
  --bone: #ece6d8;
  --muted: #979eab;
  --gold: #d9ae4f;
  --warn: #e0714f;

  /* WoW item quality colors */
  --q-poor: #9d9d9d;
  --q-common: #ffffff;
  --q-uncommon: #1eff00;
  --q-rare: #0070dd;
  --q-epic: #a335ee;
  --q-legendary: #ff8000;
  --q-empty: #2f3542;

  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 32px clamp(16px, 4vw, 48px) 64px;
  background: var(--stone);
  color: var(--bone);
  font: 400 15px/1.45 var(--sans);
  max-width: 1200px;
  margin-inline: auto;
}

button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Header */
.top h1 {
  font: 700 clamp(40px, 7vw, 72px)/0.95 var(--cond);
  margin: 0;
  letter-spacing: -0.01em;
}
.meta { color: var(--muted); margin: 8px 0 0; }

/* Composition */
.composition { margin: 28px 0 24px; }
.comp-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--panel);
}
.comp-bar span { display: block; height: 100%; }
.comp-legend {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  color: var(--muted);
  font-size: 14px;
}
.comp-legend b { font-weight: 600; margin-left: 4px; color: var(--bone); }
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}

/* Controls */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.segmented { display: inline-flex; background: var(--panel); border-radius: 8px; padding: 3px; }
.segmented button {
  border: 0;
  background: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
}
.segmented button[aria-pressed="true"] { background: var(--stone); color: var(--bone); }
.controls input, .controls select {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
}
.controls input { flex: 1 1 180px; min-width: 0; }

.count { color: var(--muted); font-size: 14px; margin: 16px 0 8px; }

/* Roster list */
.roster { list-style: none; margin: 0; padding: 0; }
.roster > li { border-bottom: 1px solid var(--line); }

.row {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(150px, 220px) 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 8px 10px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
/* The open character shows its gear below, so hide the row's icon strip */
.row[aria-expanded="true"] .strip { display: none; }

.spec-icon { width: 36px; height: 36px; border-radius: 4px; border: 1px solid var(--line); background: var(--q-empty) center / cover no-repeat; }

.who .name { font: 600 19px/1.1 var(--cond); display: block; }
.who .sub { color: var(--muted); font-size: 13px; }
.who .sub b { color: var(--bone); font-weight: 600; }

/* The gear strip: one icon per slot, bordered by item quality.
   Two groups (armor | rings to ranged) that wrap onto two lines when needed. */
/* Space between the two groups matches the trinket-to-weapon gap (.gap + two icon gaps) */
.strip { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 14px; }
.strip .grp { display: flex; gap: 3px; }
.strip .icon, .doll .icon {
  width: 28px;
  height: 28px;
  border: 1px solid var(--q-empty);
  border-radius: 4px;
  background: var(--q-empty) center / cover no-repeat;
  position: relative;
  flex: none;
}
.strip .icon.no-ench::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px; bottom: -6px;
  height: 2px;
  border-radius: 1px;
  background: var(--warn);
}
.strip .gap { width: 8px; }

.q-POOR { border-color: var(--q-poor) !important; }
.q-COMMON { border-color: var(--q-common) !important; }
.q-UNCOMMON { border-color: var(--q-uncommon) !important; }
.q-RARE { border-color: var(--q-rare) !important; }
.q-EPIC { border-color: var(--q-epic) !important; }
.q-LEGENDARY { border-color: var(--q-legendary) !important; }

.t-POOR { color: var(--q-poor); }
.t-COMMON { color: var(--q-common); }
.t-UNCOMMON { color: var(--q-uncommon); }
.t-RARE { color: #3d9bff; }
.t-EPIC { color: #c07bf5; }
.t-LEGENDARY { color: var(--q-legendary); }



/* Expanded detail */
/* Expanded detail: armory-style paperdoll */
.detail { padding: 8px 0 24px; }
.doll {
  display: grid;
  grid-template-columns: 1fr minmax(160px, 260px) 1fr;
  gap: 8px 16px;
  font-size: 14px;
}
.doll-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Weapons sit at the bottom of each column with a little extra space above */
.doll .weapons { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.slot { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.doll .icon { width: 40px; height: 40px; border-radius: 5px; }
/* Names never wrap; on narrow screens they run over the render instead */
.slot-text { display: flex; flex-direction: column; flex: none; white-space: nowrap; line-height: 1.3; cursor: default; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.doll-col.right .slot { flex-direction: row-reverse; text-align: right; }
.slot.is-empty .icon { opacity: 0.5; }
.detail .ench { color: #1eff00; font-size: 12px; opacity: 0.85; }
.detail .ench.missing { color: var(--warn); opacity: 1; }
.detail a { text-decoration: none; }

/* Blizzard renders are 1600x1200 with the character standing in roughly the
   37-82% band vertically. Scaling the image to 200% of the column height makes the
   character ~90% as tall as the columns, and it may spill behind the gear sideways. */
.doll-figure { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; }
.render {
  position: absolute;
  top: 0; bottom: 0;
  left: -60%; right: -60%;
  background: no-repeat 50% 70% / auto 200%;
  pointer-events: none;
}
.doll-col { position: relative; z-index: 1; }
.avatar { width: 84px; height: 84px; border-radius: 50%; opacity: 0.9; }

.empty { padding: 48px 0; color: var(--muted); max-width: 52ch; }
.empty strong { color: var(--bone); display: block; font-size: 17px; margin-bottom: 4px; }

@media (max-width: 720px) {
  .row { grid-template-columns: 36px 1fr; row-gap: 10px; }
  .row .strip { grid-column: 2 / -1; grid-row: 2; }
  /* Full row width and tighter spacing so ten 28px armor icons fit on a 360px phone */
  .row .strip { grid-column: 1 / -1; }
  .strip { justify-content: flex-start; column-gap: 12px; }
  .strip .grp { gap: 2px; }
  .doll { grid-template-columns: 1fr; }
  /* Single column on phones: nothing to run behind, so let long names wrap */
  .slot-text { white-space: normal; flex: 1 1 auto; min-width: 0; }
  .doll-figure { display: none; }
  /* 8px between icons: rows are exactly icon height, text tightened to fit two lines in 32px */
  .doll .icon { width: 32px; height: 32px; border-radius: 4px; }
  .slot { min-height: 32px; }
  .slot-text { line-height: 1.2; }
  .doll { row-gap: 8px; }
  .doll-col, .doll .weapons { gap: 8px; }
  .doll-col.right .slot { flex-direction: row; text-align: left; }
  /* Unwrap the columns so all three weapons can move to the end of the list */
  .doll-col { display: contents; }
  .doll .weapons { order: 1; }
  .doll-col.right .weapons { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}