/*
 * REFERENCE
 * - ui/companion/mote.html (host page: --card-inset/--accent/--dim tokens, .mini, .confirm-row)
 * - ui/companion/mote-kellari.js (renders .kellari*)
 * - ui/companion/mote-kellari-report.js (renders .kellari-room/.kellari-book/.kellari-past)
 * - ui/companion/mote-kellari-stats.js (renders .kellari-stat*)
 * - ui/companion/mote-kellari-actions.js (renders .kellari-weapon/.kellari-craft/.kellari-actions)
 * - ui/companion/mote-kellari-stage.css (the replay arena — separate file)
 * - .claude/UI-RULES.md (no hardcoded colors, hover fenced behind (hover: hover))
 *
 * Sammalkellari card. Colors come from the page's palette tokens; the one
 * literal is the low-HP red, which has no token yet and reads as danger.
 */

.kellari { display: flex; flex-direction: column; gap: 10px; }
.kellari-head { display: flex; align-items: baseline; gap: 10px; }
.kellari-head h2 {
  font-family: "Nunito", Georgia, serif; font-weight: 800; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); flex: 1;
}
.kellari-counts { font-size: 12.5px; font-weight: 700; color: var(--gold, #dfb668); font-variant-numeric: tabular-nums; }
.kellari-combat { font-size: 12px; color: var(--muted); margin-top: -6px; }

.kellari-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kellari-row__label { flex: 1; min-width: 140px; font-size: 13px; }

/* ── Ase-slotti: varustettu ase, terä x/3, Teroita; Varusta-napit alle ── */
.kellari-weapon .mini { min-height: 32px; padding: 4px 10px; font-size: 12px; }
.kellari-weapon .mini:disabled { opacity: 0.45; cursor: default; }
.kellari-edge { color: var(--accent); font-variant-numeric: tabular-nums; }
.kellari-weapon[data-edge="0"] .kellari-edge { color: var(--palette-danger); }
.kellari-equip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -4px; }
.kellari-equip__btn { min-height: 32px; padding: 4px 10px; font-size: 12px; }

/* ── Veistä-kirja: neljä riviä, vaikutus palvelimen sanoin, hinta napissa ── */
.kellari-lead { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.kellari-craft { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kellari-craft__row { display: grid; grid-template-columns: minmax(96px, auto) 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; }
.kellari-craft__name { font-weight: 700; }
.kellari-craft__kind { color: var(--dim); font-weight: 400; font-size: 11px; }
.kellari-craft__effect { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kellari-craft__own { color: var(--accent); font-size: 12px; white-space: nowrap; }
.kellari-craft__btn { min-height: 32px; padding: 4px 10px; font-size: 12px; white-space: nowrap; }
.kellari-craft__btn:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 420px) { .kellari-craft__row { grid-template-columns: 1fr auto; } .kellari-craft__effect { grid-column: 1 / -1; white-space: normal; } }

/* ── Statsikortti: viisi lukua, jokaisen alla palvelimen oma erittely ── */
.kellari-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.kellari-stat { display: grid; grid-template-columns: 86px 34px 1fr; align-items: baseline; gap: 8px; font-size: 12.5px; }
.kellari-stat__name { color: var(--muted); }
.kellari-stat__num { font-variant-numeric: tabular-nums; text-align: right; }
.kellari-stat__src { color: var(--dim); font-size: 11.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kellari-est { font-size: 14px; font-weight: 800; color: var(--accent); }
.kellari-tips { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.5; }

.kellari-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kellari-actions .mini { flex: 1; min-width: 150px; }
.kellari-send { border-color: var(--accent); color: var(--accent); }
.kellari-actions .mini:disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) { .kellari-actions .mini:not(:disabled):hover { border-color: var(--gold, #dfb668); } }
.kellari-note, .kellari-confirm { font-size: 12.5px; color: var(--muted); }
.kellari-status { font-size: 12.5px; color: var(--palette-danger); min-height: 15px; }
.kellari-sub {
  font-family: "Nunito", Georgia, serif; font-weight: 800; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
  border-top: 1px solid var(--border); padding-top: 8px;
}

/* ── Raportti: huoneet ✓/✗, HP-palkki jokaisen jälkeen, vaikutukset nimeltä ── */
.kellari-report { display: flex; flex-direction: column; gap: 8px; }
.kellari-report__head { display: flex; align-items: baseline; gap: 10px; }
.kellari-report__verdict { font-size: 14px; }
.kellari-report__verdict.is-win { color: var(--accent); }
.kellari-report__verdict.is-loss { color: var(--palette-danger); }
.kellari-report__rooms { font-size: 12px; color: var(--muted); }
.kellari-rooms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.kellari-room { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; }
.kellari-room__mark { text-align: center; }
.kellari-room--won .kellari-room__mark { color: var(--accent); }
.kellari-room--lost .kellari-room__mark { color: var(--palette-danger); }
.kellari-room__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kellari-room__fx { color: var(--gold, #dfb668); font-size: 11px; }
.kellari-room__hp { display: inline-flex; align-items: center; gap: 6px; }
.kellari-hp {
  display: inline-block; width: 56px; height: 7px; border-radius: 4px;
  background: var(--card-inset); border: 1px solid var(--border); overflow: hidden;
}
.kellari-hp__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #7fae5c); }
.kellari-hp__fill--low { background: linear-gradient(90deg, #c0563c, #e07a52); }
.kellari-hp__num { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.kellari-warnings, .kellari-loot { list-style: none; margin: 0; padding: 0; font-size: 12.5px; line-height: 1.6; }
.kellari-warnings { color: var(--gold, #dfb668); }
.kellari-loot__new { color: var(--accent); font-weight: 700; }
.kellari-loot__none { color: var(--muted); }

/* ── Löytökirja ── */
.kellari-book { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kellari-book__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.kellari-book__name { font-weight: 700; }
.kellari-book__meta { color: var(--muted); flex: 1; min-width: 100px; }
.kellari-book__own { color: var(--dim); font-variant-numeric: tabular-nums; }
.kellari-book__row.is-owned .kellari-book__own { color: var(--accent); }
.kellari-book__kind { color: var(--dim); font-weight: 400; font-size: 11px; }
.kellari-skip { border-color: var(--border-strong); }
.kellari-book__redeem { min-height: 32px; padding: 4px 10px; font-size: 12px; }

/* ── Viimeisimmät raportit ── */
.kellari-pastlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kellari-past { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.kellari-past__verdict.is-win { color: var(--accent); }
.kellari-past__verdict.is-loss { color: var(--palette-danger); }
.kellari-past__rooms, .kellari-past__when { color: var(--muted); }
.kellari-past__when { margin-left: auto; white-space: nowrap; }
.kellari-past__hat { color: var(--gold, #dfb668); }
.kellari-empty { font-size: 12.5px; color: var(--muted); }