/* RATS — Loot history page. Addon (Okanvil) exports MRT loot -> Firebase `loot` node.
   theme.css gives the body reset, .wrap.wide, gold h2/.sub/scrollbar; ui.css gives button/.card/.msg/textarea.
   Only page-specific structure lives here — all colours through tokens (never hard-code the gold or a width). */

/* Bank sentinel color: an emerald GREEN, distinct from the Hunter lime (#AAD372) and
   from every other class color / purple (Disenchant) / gold (accent). */
:root {
  --bank: #22c55e;
}

/* ---- top controls + tab strip (same vocabulary as rankings) ---- */
.ctrls {
  margin-top: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.tabs { margin: 18px 0 14px }
.panel[hidden] {
  display: none;
}

/* ---- expand/collapse-all toolbar ---- */
.runbar {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}

/* ---- run group (By run tab) — collapsible ---- */
.run {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 12px 16px;
  margin-bottom: 10px;
}
.run .rhd {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
  user-select: none;
}
.run .rhd:hover .rtitle {
  color: var(--accent-hi);
}
.run .rhd .caret {
  color: var(--text-dim-2);
  font-size: 12px;
  flex: 0 0 auto;
  width: 12px;
}
/* body hidden until the run is open; newest run starts open */
.run .rbody {
  display: none;
  margin-top: 8px;
}
.run.open .rbody {
  display: block;
}
.run .rtitle {
  font-weight: 800;
  color: var(--white);
  font-size: 16px;
}
.run .rmeta {
  color: var(--text-dim-2);
  font-size: 12.5px;
}
.run .rcount {
  margin-left: auto;
  color: var(--accent);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.4px;
}
/* discreet officer-only delete on a run header — no gold fill, red on hover */
.run .delrun {
  background: none;
  border: 0;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px 6px;
  margin-left: 10px;
  border-radius: var(--radius, 6px);
  opacity: 0.5;
  transition: color 0.12s, background 0.12s, opacity 0.12s;
}
.run .rhd:hover .delrun {
  opacity: 1;
}
.run .delrun:hover {
  color: #fff;
  background: var(--vt, #ff6b6b);
  opacity: 1;
}
.bossgrp {
  margin: 8px 0 0;
}
.bossgrp .bn {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 800;
  margin: 10px 0 4px;
}

/* ---- a single looted item row ---- */
.lootitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #232529;
}
.lootitem:last-child {
  border-bottom: 0;
}
.lootitem .iic {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid var(--border-2);
  flex: 0 0 auto;
  background: var(--surface);
}
.lootitem .iname {
  font-weight: 700;
  color: #cfd2d6;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* disenchanted loot — WoW epic purple + Abyss Crystal icon */
.disenchant {
  color: var(--purple);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* banked loot (orbs/patterns -> guild bank) -- same layout as disenchant, emerald green */
.banked {
  color: var(--bank, #22c55e);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* pinned-sentinel header icon (Disenchant crystal / Bank box) -- replaces the pin emoji */
.phead-ic {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  vertical-align: -3px;
  margin-right: 4px;
}
.lootitem .banked {
  min-width: 110px;
}
.de-ic {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex: 0 0 auto;
}
/* edit-winner picker (themed, replaces native select) */
#editItem {
  margin: 0 0 14px;
}
.edit-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.edit-head .iic {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.edit-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.edit-name {
  font-weight: 800;
  color: var(--white);
  font-size: 15px;
}
.edit-sub {
  color: var(--text-dim-2);
  font-size: 12px;
}
.edit-from {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
}
.edit-arrow {
  color: var(--accent);
  font-weight: 800;
  margin: 0 4px;
}
/* winner picker — search + floating typeahead list (same pattern as the vacations picker) */
.ac-wrap {
  position: relative;
}
#editSearch {
  width: 100%;
  margin-top: 4px;
}
.picklist {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  z-index: 10;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-3);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
.picklist .opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}
.picklist .opt:hover {
  background: #23262b;
}
.picklist .opt.on {
  background: rgba(192, 148, 58, 0.16);
  box-shadow: inset 2px 0 0 var(--accent);
}
.opt-cur {
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
}
/* rank group header in the picker */
/* small edit (✎) button to change who won an item */
.editbtn {
  background: none;
  border: 0;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  flex: 0 0 auto;
  height: auto;
}
.editbtn:hover {
  color: var(--accent);
}
/* delete button sits next to the pencil; danger red on hover */
.delbtn {
  background: none;
  border: 0;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  flex: 0 0 auto;
  height: auto;
}
.delbtn:hover {
  color: #e5484d;
}
/* winner row: raider input (70%) + Disenchant button (30%) */
.winrow {
  display: flex;
  gap: 2%;
  align-items: stretch;
}
.winrow .ac-wrap {
  position: relative;
}
.winrow .de-btn {
  color: var(--purple, #a335ee);
  border: 1px solid color-mix(in srgb, var(--purple, #a335ee) 45%, transparent);
  background: color-mix(in srgb, var(--purple, #a335ee) 12%, transparent);
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.winrow .bank-btn {
  color: var(--bank, #22c55e);
  border: 1px solid color-mix(in srgb, var(--bank, #22c55e) 45%, transparent);
  background: color-mix(in srgb, var(--bank, #22c55e) 12%, transparent);
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.winrow .bank-btn .de-ic {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}
.winrow .de-btn .de-ic {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}
.winrow .de-btn:hover {
  color: #fff;
  background: var(--purple, #a335ee);
  border-color: var(--purple, #a335ee);
}
.lootitem .won {
  font-weight: 800;
  flex: 0 0 auto;
  min-width: 110px; /* fixed winner column so the pencil + date line up */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lootitem .disenchant {
  min-width: 110px;
}
.lootitem .editbtn,
.lootitem .delbtn {
  flex: 0 0 auto;
}
.lootitem .wat {
  color: var(--text-faint);
  font-size: 12px;
  flex: 0 0 auto;
  min-width: 82px; /* fixed date column, right-aligned so all dates line up */
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* unassigned drop — officer needs to set the winner */
.lootitem.unassigned {
  opacity: 0.9;
}
.unassignedtag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--accent);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  padding: 2px 7px;
  flex: 0 0 auto;
}
/* BoE = Bind on Equip: tradeable / sellable. Small gold pill after the item name. */
.boe-tag {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 1px 5px;
  margin-left: 6px;
  flex: 0 0 auto;
  vertical-align: middle;
  opacity: 0.85;
}
.assignbtn {
  height: var(--ctl-h);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* ---- By player tab ---- */
.plist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.pcard {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 12px 14px;
}
/* Disenchant card pinned to the top, purple */
.pcard.de-card {
  border-color: color-mix(in srgb, var(--purple, #a335ee) 55%, transparent);
  background: color-mix(in srgb, var(--purple, #a335ee) 8%, var(--surface-2));
}
/* Bank card pinned right below Disenchant, green */
.pcard.bank-card {
  border-color: color-mix(in srgb, var(--bank, #22c55e) 55%, transparent);
  background: color-mix(in srgb, var(--bank, #22c55e) 8%, var(--surface-2));
}
.pcard .ph {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.pcard .ph:hover .pn {
  filter: brightness(1.2);
}
.pcard .pcaret {
  color: var(--text-dim-2);
  font-size: 12px;
  flex: 0 0 auto;
  width: 12px;
}
.pcard .pn {
  font-weight: 800;
  font-size: 15px;
}
.pcard .pc {
  margin-left: auto;
  font-weight: 800;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.pcard .pd {
  color: var(--text-dim-2);
  font-size: 11.5px;
  margin-top: 2px;
}
.pcard .drought {
  color: var(--accent);
  font-weight: 700;
}
.pcard .pitems {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pcard .pitems img {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--border-2);
}
/* merged Val'anyr fragment badge in the collapsed peek */
.fragpeek {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.fragpeek img {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--border-2);
}
.fragpeek i {
  font-style: normal;
  font-weight: 800;
  font-size: 11px;
  color: var(--text-dim);
}
/* merged fragment row in the expanded list */
.frag-row .frag-x {
  margin-left: auto;
  font-weight: 800;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.frag-row {
  opacity: 0.85;
}

/* expanded player: full editable item list, spans the whole grid row */
.pcard.open {
  grid-column: 1 / -1;
  border-color: var(--accent);
}
.pcard .pfull {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

/* ---- shared empty state ---- */
.empty {
  color: var(--text-faint);
}

/* ---- search bar (filters every tab) ---- */
.searchbar {
  margin: 12px 0 0;
}
.searchbar input {
  width: 100%;
}

/* ---- import overlay ---- */
.importOv {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.importOv.open {
  display: flex;
}
.importCard {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px;
  width: 100%;
  max-width: 560px;
  text-align: left;
}
.importCard h2 {
  margin: 0 0 4px;
}
.importCard textarea {
  width: 100%;
  min-height: 180px;
  font-family: Consolas, monospace;
  font-size: 12px;
  resize: vertical;
  margin-top: 10px;
}
.importCard .x {
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
  color: var(--text-dim);
  background: none;
  border: 0;
  font-size: 18px;
}
.importCard .x:hover {
  color: var(--white);
}

/* ---- Import preview (what the merge will add / skip, before saving) ---- */
.importPreview {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.importPreview .pvSum {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
}
.importPreview .pvAdd { color: var(--ok); }
.importPreview .pvDup,
.importPreview .pvSkip { color: var(--text-dim); }
.importPreview .pvList {
  max-height: 200px;
  overflow-y: auto;
}
.importPreview .pvRow {
  display: grid;
  grid-template-columns: 140px 1fr 120px;
  gap: 8px;
  padding: 3px 10px;
  font-size: 12px;
  align-items: center;
}
.importPreview .pvRow:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.importPreview .pvBoss { color: var(--accent); }
.importPreview .pvItem { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importPreview .pvWho { text-align: right; }
.importPreview .muted { color: var(--text-dim); }
.importPreview .pvMore,
.importPreview .pvEmpty {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-dim);
}
/* dropped list (craft/orb, duplicate fragments) -- shown with the reason */
.importPreview .pvDropHdr {
  padding: 8px 10px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}
.importPreview .pvDropRow {
  grid-template-columns: 1fr auto;
  opacity: 0.75;
}
.importPreview .pvDropRow .pvItem { color: var(--text-dim); text-decoration: line-through; }
.importPreview .pvReason { color: var(--text-dim-2, var(--text-dim)); font-size: 11px; text-align: right; }

/* import overlay actions: Cancel on the left, Merge & save pushed to the right */
.importCard .importActions { gap: 14px; margin-top: 4px; }
.importCard .importActions #importGo { margin-left: auto; }

/* ---- Priority (fair loot) tab ---- */
.prio-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 14px;
}
.prio-formula {
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 10px;
  color: var(--text-dim);
  font-size: 12px;
}
.prio-formula b {
  color: var(--text);
}
.prio-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 12px;
}
.prio-key .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.prio-key .dot.ok {
  background: var(--ok, #7cfc8a);
}
.prio-key .dot.vt {
  background: var(--vt, #ff6b6b);
  margin-left: 8px;
}
.prio-hint {
  color: var(--text-faint);
  font-size: 11.5px;
}
.prio-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* quick dashboard: Top 3 owed + Bottom 3 got-the-most */
.prio-dash {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 16px;
}
.dcard {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 10px);
  padding: 12px 14px;
}
.dcard.hi {
  border-color: color-mix(in srgb, var(--ok, #7cfc8a) 40%, var(--border));
}
.dcard.lo {
  border-color: color-mix(in srgb, var(--vt, #ff6b6b) 40%, var(--border));
}
.dcard .dhd {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  padding-left: 14px;
  position: relative;
}
.dcard .dhd::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dcard.hi .dhd::before {
  background: var(--ok, #7cfc8a);
}
.dcard.lo .dhd::before {
  background: var(--vt, #ff6b6b);
}
.dcard .dsub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim-2);
  letter-spacing: 0.1px;
}
.dchip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.dchip:first-of-type {
  border-top: 0;
}
.dchip .dname {
  font-weight: 800;
  flex: 0 0 auto;
  min-width: 92px;
}
.dchip .dmeta {
  color: var(--text-dim-2);
  font-size: 11.5px;
  flex: 1 1 auto;
}
.dchip .dscore {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.dcard.hi .dscore {
  color: var(--ok, #7cfc8a);
}
.dcard.lo .dscore {
  color: var(--vt, #ff6b6b);
}
@media (max-width: 640px) {
  .prio-dash {
    grid-template-columns: 1fr;
  }
}

/* aligned columns: rank · name · raids · items · fairness bar · score */
.prow {
  display: grid;
  grid-template-columns: 26px minmax(110px, 1fr) 68px 68px 2fr 58px;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.prow {
  cursor: pointer;
}
.prow:hover {
  border-color: var(--border-2);
}
.prow.open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.prow.hi {
  background: color-mix(in srgb, var(--ok, #7cfc8a) 7%, var(--surface-2));
}
.prow.lo {
  background: color-mix(in srgb, var(--vt, #ff6b6b) 8%, var(--surface-2));
}
/* expanded items under a priority row (reuses .lootitem styling) */
.prow-items {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 4px 10px 8px;
  margin-top: -8px;
  cursor: default;
}
.prow .prank {
  color: var(--text-faint);
  font-weight: 700;
  text-align: center;
  font-size: 12px;
}
.prow .pname {
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.prow .pstat {
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
}
.prow .pstat b {
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* items-per-raid bar: shorter = fewer items/raid = more owed (green track behind) */
/* bidirectional points bar: centre tick; + grows right (green), − grows left (red) */
.fbar {
  position: relative;
  height: 10px;
  background: var(--field);
  border-radius: 5px;
}
.fbar-center {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--border-2);
  transform: translateX(-50%);
}
.fbar-pos {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  background: var(--ok, #7cfc8a);
  border-radius: 0 5px 5px 0;
}
.fbar-neg {
  position: absolute;
  right: 50%;
  top: 0;
  bottom: 0;
  background: var(--vt, #ff6b6b);
  border-radius: 5px 0 0 5px;
}
.prow .pscore {
  text-align: right;
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.pscore.hi {
  color: var(--ok, #7cfc8a);
}
.pscore.lo {
  color: var(--vt, #ff6b6b);
}
.pscore.mid {
  color: var(--text-dim);
}

/* ---- in-game item tooltip ------------------------------------------------
   One reusable floating node (see loot.js tipEl). Mimics the WoW tooltip:
   near-black plate, gold hairline, tight line rhythm. Line colours come from
   the addon's tooltip scan, so they are the client's real stat colours. */
.iname.hastip {
  cursor: help;
}
.wowtip {
  position: fixed;
  z-index: 200;
  display: none;
  max-width: 340px;
  padding: 10px 12px;
  background: #05060a;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.75);
  pointer-events: none; /* never let the tooltip eat the hover it depends on */
}
.wowtip.on {
  display: block;
}
/* icon floats top-left; the stat lines wrap around and past it */
.wowtip-ic {
  float: left;
  width: 40px;
  height: 40px;
  margin: 0 9px 4px 0;
  border-radius: 5px;
  border: 1px solid var(--border-2);
  background: var(--surface);
}
.wowtip-body {
  overflow: hidden; /* new block formatting context: lines clear the float cleanly */
}
.wowtip-body::after {
  content: "";
  display: block;
  clear: both;
}
.wowtip-l {
  color: var(--white);
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
}
/* the item name: first LINE, not first child (the icon is the first child now) */
.wowtip-body .wowtip-l:first-child {
  font-size: 13px;
  font-weight: 600;
}
/* socket row: coloured gem square + label. WoW sends these as plain grey text,
   so the square is ours -- see socketColor() in loot.js. */
.wowtip-sock {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
}
.wowtip-gem {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  flex: 0 0 auto;
}
/* "Classes: Paladin, Warrior" -- label dimmed, each class in its own colour */
.wowtip-dim {
  color: var(--text-dim);
}
.wowtip-sep {
  color: var(--text-dim);
}

/* ---------- site makeover (assets/css/site.css) ---------- */
/* ui.css gives every button display:inline-flex, which beats the hidden attribute: without
   this the officer-only Import button and Priority tab showed for every visitor */
button[hidden] { display: none }
/* empty state: centred rat, same feel as the rankings page */
.lootempty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 240px; text-align: center; gap: 6px;
}
.le-emoji { font-size: 44px; line-height: 1; margin-bottom: 6px; opacity: .9 }
.le-title { font-family: var(--body); font-weight: 800; font-size: 16px; color: var(--text) }
.le-joke { max-width: 420px; font-size: 13px; line-height: 1.5; color: var(--text-dim) }

/* ---------- By run: the tier's art behind each header, bosses as cards ---------- */
.run { position: relative; overflow: hidden; padding: 0; border-color: var(--line-warm) }
.run .rhd { position: relative; min-height: 96px; padding: 16px 20px; gap: 16px; flex-wrap: nowrap }
.run .rart {
  position: absolute; top: 0; right: 0; width: 60%; height: 100%; object-fit: cover; object-position: center 40%;
  opacity: .6; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 75%);
  mask-image: linear-gradient(90deg, transparent 0, #000 75%);
}
.run .rhd > :not(.rart) { position: relative; z-index: 1 }
.run .rtitle { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--heading) }
.run .rhd:hover .rtitle { color: var(--accent-hi) }
.run .rsize {
  font-size: 11.5px; font-weight: 700; color: var(--text); white-space: nowrap;
  border: 1px solid var(--border-2); background: rgba(12, 12, 14, .55); border-radius: 999px; padding: 2px 9px;
}
.run .rmeta { color: var(--text-dim); font-size: 13px; text-shadow: 0 1px 4px rgba(0, 0, 0, .8) }
.run .rcount {
  font-size: 12.5px; color: var(--accent-hi); text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
  background: rgba(12, 12, 14, .55); border-radius: 999px; padding: 3px 10px;
}
.run.open .rbody {
  display: block; margin: 0; padding: 14px 16px 6px; border-top: 1px solid var(--border);
  columns: 2 420px; column-gap: 12px;
}
.bossgrp {
  margin: 0 0 12px; padding: 4px 14px 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); break-inside: avoid;
}
.bossgrp .bn {
  margin: 8px 0 4px; font-size: 11.5px; letter-spacing: .08em; color: var(--accent);
  display: flex; align-items: center; gap: 10px;
}
.bossgrp .bn::after { content: ""; flex: 1; height: 1px; background: var(--line-warm) }
.bossgrp .lootitem { border-bottom-color: var(--border) }
@media (max-width: 760px) {
  .run.open .rbody { columns: 1; padding: 12px 12px 2px }
  .run .rart { width: 100% }
}

/* ---------- By player: the raider's banner fades in on the right of their card ---------- */
.plist { grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 36px) / 4)), 1fr)) }
.pcard { position: relative; overflow: hidden; min-height: 108px }
.pcard .part {
  position: absolute; top: 0; right: 0; width: 62%; height: 100%; object-fit: cover; object-position: 70% 20%;
  opacity: .55; pointer-events: none; transition: opacity .2s;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 75%);
  mask-image: linear-gradient(90deg, transparent 0, #000 75%);
}
.pcard:hover .part { opacity: .8 }
.pcard.open .part { width: 36%; opacity: .35 }
.pcard > :not(.part) { position: relative; z-index: 1 }
.pcard .pn { font-size: 16px; text-shadow: 0 1px 6px rgba(0, 0, 0, .85) }
.pcard .pc { font-size: 17px; text-shadow: 0 1px 6px rgba(0, 0, 0, .85) }
.pcard .pd { text-shadow: 0 1px 4px rgba(0, 0, 0, .9) }
.pcard:not(.open):hover { border-color: var(--border-2) }

/* Disenchant / Bank: the hub's art (chest on the right of the loot picture, the camp centred) */
.pcard .part.pool { object-position: 80% 45% }
.pcard.bank-card .part.pool { object-position: 55% 40% }

/* ---- run header: title line, the run in numbers, the top winners' faces ---- */
.run .rhead { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.run .rline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.run .rtitle { font-size: 26px; line-height: 1.1 }
.run .rstats { display: flex; gap: 6px; flex-wrap: wrap }
.run .rst {
  font-size: 12px; color: var(--text-dim); white-space: nowrap;
  background: rgba(12, 12, 14, .6); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}
.run .rst b { color: var(--accent-hi); font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 2px }
.run .rfaces { display: flex; align-items: center; margin-left: auto; padding-left: 10px }
.run .rface {
  position: relative; width: 44px; height: 44px; margin-left: -8px; border-radius: 50%; overflow: hidden;
  background: var(--surface); border: 2px solid var(--cc); box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.run .rface .rface-art { width: 100%; height: 100%; object-fit: cover; object-position: 70% 20% }
.run .rface i {
  position: absolute; right: 0; bottom: 0; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px;
  background: #16120a; color: var(--accent-hi); font-style: normal; font-size: 10.5px; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
}
.run .delrun { align-self: center }
.bossgrp .bnc { font-style: normal; font-weight: 700; letter-spacing: 0; color: var(--text-faint); order: 2 }

/* inside a run every row has the run's date, already in the header: give that room to the name */
.run .lootitem .wat { display: none }
.run .lootitem .won, .run .lootitem .disenchant { min-width: 96px }
@media (max-width: 760px) {
  .run .rhd { flex-wrap: wrap; min-height: 0 }
  .run .rfaces { margin-left: 8px; padding-left: 0 }
  .run .rtitle { font-size: 22px }
}

/* ---------- Change winner: keyboard-driven picker ---------- */
.editCard { max-width: 600px; border-color: var(--line-warm); box-shadow: 0 24px 60px rgba(0, 0, 0, .6) }
.editCard h2 { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--heading); text-transform: none; letter-spacing: 0 }
.editCard .edit-head {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.editCard .edit-head .iic { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border-2) }
.editCard .edit-name { font-size: 16px; font-weight: 800 }
.editCard .edit-from { margin-top: 10px; padding: 0 2px }
.picklist { max-height: 320px }
.picklist .opt { gap: 9px; padding: 8px 12px }
.picklist .opt .de-ic { width: 18px; height: 18px; border-radius: 4px; flex: none }
.picklist .opt.hl { background: rgba(192, 148, 58, .2); box-shadow: inset 3px 0 0 var(--accent) }
.picklist .opt.none { color: var(--text-dim-2); font-weight: 500; font-size: 13px; cursor: default }
.opt-cur { font-weight: 700; letter-spacing: .02em }
.kbd-hint { margin: 10px 2px 0; font-size: 11.5px; color: var(--text-faint) }
.kbd-hint kbd {
  display: inline-block; min-width: 18px; padding: 1px 5px; margin: 0 2px; text-align: center;
  font: 700 10.5px/1.5 var(--body, sans-serif); color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 4px;
}