/*
  12-spoils.css — v41.17 the Coin & Plunder pane

  Two coin cards, a sale table (which reuses the existing .lrow list styling),
  and a small worth ledger. The cards are deliberately large: these are the
  two numbers people open this screen to read across a table, often at arm's
  length, so the value gets display-size type and the controls stay a full
  44px tap target.

  Unlayered, loaded after styles.css. No !important.
*/

.coin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.coin-grid.single { grid-template-columns: minmax(0, 1fr); }

.coin-card {
  display: grid;
  gap: var(--s2);
  padding: var(--s4) var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: linear-gradient(180deg, var(--chart), var(--chart-2));
  box-shadow: var(--e1);
  text-align: center;
}

.coin-card .coin-label {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.coin-value {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: clamp(1.5rem, 1.1rem + 3.2vw, 2.1rem);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.coin-value.is-static { cursor: default; }
.coin-value:hover { color: var(--lagoon-deep); }
.coin-value .coin-unit {
  display: block;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 3px;
}

.coin-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}
.coin-step {
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--field, #f4e9cd);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .14s ease, border-color .14s ease;
}
.coin-step:hover { background: var(--chart); border-color: var(--brass); }
.coin-step:active { transform: translateY(1px); }

.coin-card .coin-note {
  font-size: .68rem;
  line-height: 1.3;
  color: var(--faint);
}

/* A negative plunder count is a debt, not a quantity — say so in colour as
   well as in the note text underneath. */
.coin-card.is-debt { border-color: var(--danger); background: linear-gradient(180deg, var(--danger-bg), var(--chart-2)); }
.coin-card.is-debt .coin-value { color: var(--danger); }
.coin-card.is-debt .coin-note { color: var(--danger); }

/* ==========================================================
   Party worth ledger
   ========================================================== */
.worth-strip {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--chart);
}
.worth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 11px var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
}
.worth-row:last-child { border-bottom: 0; }
.worth-row .worth-label { color: var(--ink-soft); }
.worth-row .worth-value { font-weight: 750; font-variant-numeric: tabular-nums; }
.worth-row.is-total {
  background: var(--chart-2);
  font-size: 1rem;
}
.worth-row.is-total .worth-label { color: var(--ink); font-weight: 850; }
.worth-row.is-total .worth-value { font-weight: 900; }

.spoils-chips { margin-bottom: var(--s3); }
.spoils-pane-body > .section-title:first-child { margin-top: 0; }

@media (max-width: 340px) {
  .coin-grid { grid-template-columns: minmax(0, 1fr); }
}