/* rage-mage admin UI -- a small shared design system so components stop
   scattering ad hoc inline {:style {...}} maps. Light/dark via
   prefers-color-scheme; everything else is plain CSS custom properties
   so a future real theme picker (if ever wanted) only has to override
   these, not hunt through every component. */

:root {
  --rm-bg: #ffffff;
  --rm-bg-alt: #f6f7f9;
  --rm-fg: #1a1a1a;
  --rm-fg-dim: #666666;
  --rm-border: #d8dbe0;
  --rm-accent: #3b6fd4;
  --rm-accent-bg: #eaf0fd;
  --rm-danger: #c0392b;
  --rm-danger-bg: #fdecea;
  --rm-success: #2f8f4e;
  --rm-success-bg: #e9f7ee;
  --rm-warn: #b5860b;
  --rm-warn-bg: #fbf3de;
  --rm-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --rm-radius: 6px;

  --rm-health: #d34848;
  --rm-energy: #3d9b52;
  --rm-focus: #3b6fd4;
  --rm-armor: #7f8c8d;
  --rm-block: #7f8c8d;
  --rm-dodge: #16a085;
  --rm-resource-default: #888888;
  /* "spent" -- near-black in both themes so it reads as heaviest/consumed;
     it needs the inset outline (added where it's used) to stay visible on
     dark backgrounds */
  --rm-spent: #141416;
  /* over-committed cost (caution) -- yellow to avoid colliding with health red */
  --rm-caution: #e0a800;
  /* "acting" -- the character/ability currently performing; violet so it reads
     apart from the green legal-target glow and the blue selection accent */
  --rm-acting: #7c3aed;
  --rm-acting-bg: #f0e9fd;
  /* a character chosen as a target of the in-progress ability -- orange, apart
     from the green "legal target" glow (which only means "clickable") */
  --rm-target: #e8590c;
  /* the target-slot row currently being picked, highlighted on the card */
  --rm-armed: rgba(88, 138, 170, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --rm-bg: #1c1e22;
    --rm-bg-alt: #26292e;
    --rm-fg: #e8e8e8;
    --rm-fg-dim: #9a9fa6;
    --rm-border: #383c42;
    --rm-accent: #6d97e6;
    --rm-accent-bg: #22314f;
    --rm-danger: #e5766a;
    --rm-danger-bg: #4a2320;
    --rm-success: #5cc07f;
    --rm-success-bg: #1e3a27;
    --rm-warn: #dcb44a;
    --rm-warn-bg: #423616;
    --rm-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --rm-acting: #a78bfa;
    --rm-acting-bg: #2f2547;
    --rm-target: #ff922b;
    --rm-armed: rgba(109, 151, 230, 0.28);
  }
}

* { box-sizing: border-box; }

body {
  background: var(--rm-bg);
  color: var(--rm-fg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.rm-app { max-width: 60rem; margin: 0 auto; padding: 1.5rem; position: relative; }

.rm-nav { margin-bottom: 1rem; display: flex; gap: 0.5rem; }
.rm-nav button.active { font-weight: 700; background: var(--rm-accent-bg); border-color: var(--rm-accent); }

/* which commit the loaded JS was built from -- quiet, but always on screen, so
   "am I looking at a stale bundle?" is a glance instead of an investigation */
.rm-build {
  margin-top: 2rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rm-border);
  font-size: 0.75rem;
  color: var(--rm-fg-dim);
}
.rm-build code { font-size: inherit; }
.rm-build-dirty { color: var(--rm-warn); font-weight: 700; }

button, select, input[type="text"], input[type="number"], input[type="file"] {
  font: inherit;
  color: var(--rm-fg);
  background: var(--rm-bg);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 0.3rem 0.6rem;
}

button {
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}
button:hover:not(:disabled) { border-color: var(--rm-accent); background: var(--rm-accent-bg); }
button:disabled { opacity: 0.5; cursor: default; }

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

.rm-panel {
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  background: var(--rm-bg-alt);
  box-shadow: var(--rm-shadow);
  padding: 0.75rem;
  margin: 0.75rem 0;
}

.rm-card {
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  background: var(--rm-bg);
  box-shadow: var(--rm-shadow);
  padding: 0.6rem 0.75rem;
  margin: 0.5rem 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.rm-card.incapacitated { opacity: 0.55; }

/* clickable selection states, used when a picker wants the character
   cards themselves to double as the actor/target control */
.rm-card.rm-clickable { cursor: pointer; }
.rm-card.rm-clickable:hover { border-color: var(--rm-accent); }
.rm-card.rm-legal { border-color: var(--rm-success); box-shadow: 0 0 0 2px var(--rm-success-bg); }
.rm-card.rm-illegal { opacity: 0.4; cursor: default; }
.rm-card.rm-selected { border-color: var(--rm-accent); box-shadow: 0 0 0 2px var(--rm-accent-bg); }
/* the actor while it's performing -- a distinct outline instead of the dimmed
   illegal-target look (it usually isn't a legal target of its own ability) */
.rm-card.rm-acting { opacity: 1; border-color: var(--rm-acting); box-shadow: 0 0 0 2px var(--rm-acting-bg); }
/* a character chosen as a target of the in-progress ability -- stays fully
   visible (opacity 1) even if it's not a legal candidate for the current slot */
.rm-card.rm-target { opacity: 1; border-color: var(--rm-target); box-shadow: 0 0 0 2px var(--rm-target); }

.rm-card-title { font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
.rm-card-icon { font-size: 1.2rem; }
.rm-card-owner { color: var(--rm-fg-dim); font-weight: 400; font-size: 0.85em; }
.rm-incap-flag { color: var(--rm-danger); font-size: 0.85em; margin-left: 0.4rem; }

.rm-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 40rem) { .rm-columns { grid-template-columns: 1fr; } }

/* --- design playground (Design tab) --- */
.rm-design-note { color: var(--rm-fg-dim); font-size: 0.9em; max-width: 42rem; }
.rm-design-columns {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem; align-items: start;
}
.rm-design-col > h3 {
  margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--rm-fg-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.rm-design-dmg { display: block; margin-top: 0.2rem; font-size: 0.78em; color: var(--rm-fg-dim); }
.rm-design-status { color: var(--rm-fg-dim); font-weight: 400; font-size: 0.85em; }
.rm-design-controls {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: 0.5rem 0; padding: 0.5rem 0.75rem; background: var(--rm-bg-alt);
  border-radius: var(--rm-radius);
}
.rm-design-controls button {
  padding: 0.3rem 0.75rem; border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius); background: var(--rm-bg); color: var(--rm-fg);
  cursor: pointer; font-size: 0.85em;
}
.rm-design-controls button:disabled { opacity: 0.45; cursor: default; }
.rm-design-phase { font-size: 0.85em; color: var(--rm-fg-dim); }
.rm-design-hint { font-size: 0.8em; color: var(--rm-fg-dim); font-style: italic; }
.rm-design-legend {
  display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 1rem;
  font-size: 0.78em; color: var(--rm-fg-dim);
}
.rm-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.rm-legend-swatch { width: 0.75rem; height: 0.75rem; border-radius: 2px; display: inline-block; }
.rm-design-target {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.2rem 0.55rem; border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius); cursor: pointer;
}
.rm-design-target.rm-armed {
  border-color: var(--rm-accent); box-shadow: 0 0 0 2px var(--rm-accent-bg);
}
.rm-design-target-label { font-size: 0.85em; }
.rm-target-bar { width: 7rem; height: 0.6rem; }
.rm-pip-ability.rm-arming { outline: 2px dashed var(--rm-accent); outline-offset: 3px; border-radius: 3px; }
/* an ability chip armed as a TARGET -- the same green a targetable character
   card gets, so "you may aim at this" looks the same wherever it appears */
.rm-pip-ability.rm-legal { border-color: var(--rm-success); box-shadow: 0 0 0 2px var(--rm-success-bg); border-radius: 3px; }
.rm-design-overcommit { font-size: 0.82em; color: var(--rm-caution); display: inline-flex; align-items: center; cursor: pointer; }
.rm-design-blocked { font-size: 0.82em; color: var(--rm-danger); font-weight: 600; }
/* over-committed elements pulse their fill in JS (shared phase), so no CSS
   animation here -- see rage-mage.ui.design/blink. */

.rm-pip { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.rm-square { display: inline-block; width: 0.62rem; height: 0.62rem; border-radius: 2px; }
.rm-square.faint { opacity: 0.3; }
.rm-pips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.22rem; }
.rm-squares { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.22rem; margin-top: 0.15rem; }
.rm-square-resource { margin-bottom: 0.5rem; }
.rm-square-resource-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.35rem; font-size: 0.85em;
}
.rm-square-res-name { flex: none; }
.rm-squares-right { margin-left: auto; justify-content: flex-end; }
.rm-square-res-count {
  flex: none; min-width: 2.8rem; text-align: right;
  color: var(--rm-fg-dim); font-variant-numeric: tabular-nums;
}
.rm-pip-row.rm-selectable { cursor: pointer; }
.rm-segbar { display: flex; width: 100%; height: 0.7rem; gap: 2px; margin-top: 0.15rem; }
.rm-seg { flex: 1; }
.rm-seg:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.rm-seg:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.rm-seg.faint { opacity: 0.3; }
.rm-pip-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem; }
.rm-pip-ability-body { display: flex; gap: 1.5rem; align-items: flex-start; margin-top: 0.3rem; }
.rm-pip-costs { display: flex; flex-direction: column; }
.rm-pip-costs .rm-pip-row { margin-top: 0.25rem; }
.rm-pip-costs .rm-pip-row:first-child { margin-top: 0; }
.rm-pip-effect { margin-top: 0; }
.rm-pip-icon { font-size: 1rem; width: 1.3rem; text-align: center; flex: none; }
.rm-pip-abilities { margin-top: 0.5rem; }
.rm-pip-ability { padding: 0.5rem 0; border-top: 1px solid var(--rm-border); }
.rm-pip-ability:first-child { border-top: none; }
.rm-pip-ability-head { display: flex; align-items: center; gap: 0.5rem; }
.rm-pip-ability-name { font-weight: 600; font-size: 0.9em; }
.rm-select-circle {
  width: 0.95rem; height: 0.95rem; border-radius: 50%;
  border: 2px solid var(--rm-resource-default); cursor: pointer; flex: none;
  box-sizing: border-box; transition: background 0.1s;
}
.rm-column-heading { font-weight: 700; color: var(--rm-fg-dim); margin: 0 0 0.25rem; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.03em; }

/* --- which player you're controlling ------------------------------------ */

.rm-controlling-bar { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.rm-controlling-label { color: var(--rm-fg-dim); font-size: 0.9em; }
.rm-player-toggle {
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--rm-border);
  background: var(--rm-bg-alt);
  color: var(--rm-fg);
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
}
.rm-player-toggle:hover { border-color: var(--rm-accent); }
.rm-player-toggle.rm-active {
  background: var(--rm-accent);
  border-color: var(--rm-accent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--rm-accent-bg);
}
/* frame the column of whoever you're currently controlling */
.rm-controlling-column {
  outline: 2px solid var(--rm-accent);
  outline-offset: 5px;
  border-radius: 4px;
}
.rm-controlling-column .rm-column-heading { color: var(--rm-accent); }
.rm-you-badge {
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--rm-accent);
  color: #fff;
  font-size: 0.85em;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}

/* --- resource bars ------------------------------------------------------ */

.rm-resource-bar { margin: 0.3rem 0; }
.rm-resource-bar-label { font-size: 0.85em; color: var(--rm-fg-dim); display: flex; justify-content: space-between; }
.rm-resource-descriptor { opacity: 0.7; font-size: 0.9em; }
.rm-minor-resources {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.8rem;
  margin: 0.35rem 0 0.1rem;
}
.rm-minor-res { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.9em; }
.rm-minor-res-icon { font-size: 1.05em; line-height: 1; }
.rm-minor-res-val { font-weight: 600; font-variant-numeric: tabular-nums; }
/* predicted change to a minor resource from a simulated perform (e.g. a dodge
   charge about to be spent) -- the "→N" pulses to echo the flashing unit-bar pips */
.rm-minor-res-delta { font-weight: 700; font-variant-numeric: tabular-nums; animation: rm-preview-pulse 1.65s ease-in-out infinite; }
@keyframes rm-preview-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.rm-resource-bar-track {
  height: 0.5rem;
  background: var(--rm-border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.rm-resource-bar-fill { height: 100%; border-radius: 999px; transition: width 0.25s ease; background: var(--rm-resource-default); }
.rm-resource-health { background: var(--rm-health); }
.rm-resource-energy { background: var(--rm-energy); }
.rm-resource-focus { background: var(--rm-focus); }
.rm-resource-armor { background: var(--rm-armor); }
.rm-resource-block { background: var(--rm-block); }
.rm-resource-dodge { background: var(--rm-dodge); }

.rm-resource-bar-fill.rm-flash { animation: rm-flash 0.5s ease; }
@keyframes rm-flash {
  0% { filter: brightness(1); }
  25% { filter: brightness(1.9); }
  100% { filter: brightness(1); }
}

.rm-abilities { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rm-ability-chip {
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.85em;
  background: var(--rm-bg-alt);
}
.rm-ability-chip.rm-clickable { cursor: pointer; }
.rm-ability-chip.rm-clickable:hover { border-color: var(--rm-accent); }
.rm-ability-chip.rm-selected { border-color: var(--rm-accent); background: var(--rm-accent-bg); font-weight: 600; }

/* --- abilities on character cards (name + costs) ------------------------- */

.rm-card-abilities {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
/* pip-style abilities inside a character card: full bordered clickable items
   (overriding the Design tab's top-border-only separators) */
.rm-card-abilities .rm-pip-ability {
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 0.4rem 0.5rem;
}
.rm-card-abilities .rm-pip-ability.rm-clickable { cursor: pointer; }
.rm-card-abilities .rm-pip-ability.rm-clickable:hover { border-color: var(--rm-accent); }
.rm-card-abilities .rm-pip-ability.rm-selected { border-color: var(--rm-accent); background: var(--rm-accent-bg); }
.rm-card-abilities .rm-pip-ability.rm-acting {
  border-color: var(--rm-acting); background: var(--rm-acting-bg);
  outline: 2px solid var(--rm-acting); outline-offset: 2px; border-radius: 3px;
}
.rm-card-abilities .rm-pip-ability.rm-unaffordable { border-color: var(--rm-danger); }
/* performance phase: activated abilities still available to perform (green
   ready-bar) vs already used this turn (dimmed + struck) */
.rm-card-abilities .rm-pip-ability.rm-performable {
  border-color: var(--rm-success);
  box-shadow: inset 3px 0 0 var(--rm-success);
  background: var(--rm-success-bg);
}
.rm-card-abilities .rm-pip-ability.rm-performed { opacity: 0.5; }
.rm-card-abilities .rm-pip-ability.rm-performed .rm-pip-ability-name { text-decoration: line-through; }
.rm-pip-effects { display: flex; flex-direction: column; gap: 0.15rem; }

.rm-ability {
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  background: var(--rm-bg-alt);
}
.rm-ability.rm-clickable { cursor: pointer; }
.rm-ability.rm-clickable:hover { border-color: var(--rm-accent); }
.rm-ability.rm-selected {
  border-color: var(--rm-accent);
  background: var(--rm-accent-bg);
  box-shadow: 0 0 0 2px var(--rm-accent-bg);
}
.rm-ability-name { font-weight: 600; font-size: 0.9em; }
.rm-ability-buffs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.2rem;
}
.rm-buff-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.03rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 600;
  color: var(--rm-warn);
  background: var(--rm-warn-bg);
  border: 1px solid var(--rm-warn);
}
.rm-ability-costs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
  font-size: 0.78em;
}
.rm-cost-group { display: inline-flex; align-items: center; gap: 0.3rem; }
.rm-cost-group-label {
  color: var(--rm-fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
}
.rm-cost-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--rm-bg);
  border: 1px solid var(--rm-border);
}
.rm-cost-badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
}
/* the cost the current phase actually spends is emphasized; the other dimmed */
.rm-cost-group.rm-focused .rm-cost-group-label { color: var(--rm-accent); font-weight: 700; }
.rm-cost-group.rm-focused .rm-cost-badge { border-color: var(--rm-accent); font-weight: 600; }
.rm-cost-group.rm-dimmed { opacity: 0.4; }
/* the phase-relevant cost, but the character can't currently pay it */
.rm-cost-group.rm-error .rm-cost-group-label { color: var(--rm-danger); font-weight: 700; }
.rm-cost-group.rm-error .rm-cost-badge {
  border-color: var(--rm-danger);
  color: var(--rm-danger);
  font-weight: 600;
  background: var(--rm-danger-bg);
}
/* a selected ability you can't afford -- override the accent selection in red */
.rm-ability.rm-selected.rm-unaffordable {
  border-color: var(--rm-danger);
  background: var(--rm-danger-bg);
  box-shadow: 0 0 0 2px var(--rm-danger-bg);
}

/* --- phase banner -------------------------------------------------------- */

.rm-phase-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--rm-radius);
  background: var(--rm-accent-bg);
  border: 1px solid var(--rm-accent);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.rm-phase-banner.rm-game-over { background: var(--rm-danger-bg); border-color: var(--rm-danger); }

/* Prose describing a mode/phase -- the :description an entry in one of
   rage-mage.game.mode's registries (or a PhaseSpec) carries. Deliberately
   quiet: it's there to be read when you're deciding, not to compete with the
   control it sits under. */
.rm-mode-desc {
  color: var(--rm-fg-dim);
  font-size: 0.85em;
  line-height: 1.45;
  max-width: 42rem;
  margin: 0.15rem 0 0.6rem 0;
}
/* the punchy one-liner that leads a mode/phase's prose -- brighter and
   tighter than the description under it, since it's the part that gets read */
.rm-mode-summary {
  color: var(--rm-fg);
  font-size: 0.9em;
  font-style: italic;
  max-width: 42rem;
  margin: 0.25rem 0 0 0;
}

.rm-mode-row { margin-bottom: 0.5rem; }
.rm-mode-row .rm-mode-desc,
.rm-mode-row .rm-mode-summary { margin-left: 0.25rem; }

/* --- toast ---------------------------------------------------------------- */

.rm-toast {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: var(--rm-danger-bg);
  color: var(--rm-danger);
  border: 1px solid var(--rm-danger);
  border-radius: var(--rm-radius);
  padding: 0.6rem 1rem;
  box-shadow: var(--rm-shadow);
  animation: rm-toast-in 0.15s ease;
  z-index: 10;
}
@keyframes rm-toast-in {
  from { transform: translateY(0.5rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* --- event history -------------------------------------------------------- */

.rm-event-list {
  max-height: 18rem;
  overflow-y: auto;
  margin-top: 0.4rem;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  background: var(--rm-bg-alt);
}
.rm-event-row {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.25rem 0.55rem;
  border-bottom: 1px solid var(--rm-border);
  font-size: 0.82em;
}
.rm-event-row:last-child { border-bottom: none; }
.rm-event-type {
  font-family: ui-monospace, monospace;
  font-weight: 600;
  color: var(--rm-accent);
  white-space: nowrap;
  flex-shrink: 0;
}
.rm-event-payload {
  font-family: ui-monospace, monospace;
  color: var(--rm-fg-dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
}
.rm-empty { color: var(--rm-fg-dim); font-style: italic; }

/* --- large character card (design.cljs: play + edit, one component) ------- */

.rm-lc-stage { display: inline-block; }
.rm-lc {
  position: relative;
  width: 22rem; max-width: 100%;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  background: var(--rm-bg);
  box-shadow: var(--rm-shadow);
  padding: 0.85rem 1rem 1rem;
}
/* a subtle dashed frame while editing, so the mode reads at a glance */
.rm-lc.rm-lc-editing { border-style: dashed; border-color: var(--rm-accent); }

.rm-lc-topbar { position: absolute; top: 0.6rem; right: 0.7rem; }
.rm-lc-mode {
  font-size: 0.72em; padding: 0.15rem 0.5rem;
  border-radius: 999px; border: 1px solid var(--rm-border);
  background: var(--rm-bg-alt); color: var(--rm-fg-dim); cursor: pointer;
}
.rm-lc-mode:hover { border-color: var(--rm-accent); color: var(--rm-accent); }

.rm-lc-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; padding-right: 6rem; }
.rm-lc-title .rm-card-icon { font-size: 1.5rem; align-self: center; }
.rm-lc-name { font-weight: 700; font-size: 1.15rem; flex: 0 1 auto; min-width: 4rem; max-width: 12rem; }
.rm-lc-desc {
  display: block; margin: 0.25rem 0 0.6rem;
  color: var(--rm-fg-dim); font-size: 0.85em; font-style: italic; line-height: 1.35;
}

/* the WYSIWYG affordance: an input/textarea that reads as plain text until
   hovered/focused, when a faint box appears to say "this is editable". */
.rm-inline-edit {
  font: inherit; color: inherit;
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: 0.05rem 0.25rem; margin: -0.05rem -0.25rem;
  width: auto; min-width: 3rem;
}
textarea.rm-inline-edit { width: 100%; resize: vertical; font-style: italic; }
.rm-inline-edit:hover { border-color: var(--rm-border); }
.rm-inline-edit:focus { outline: none; border-color: var(--rm-accent); background: var(--rm-bg-alt); }
.rm-inline-edit::placeholder { color: var(--rm-fg-dim); opacity: 0.6; font-style: italic; }

/* resources -- the pip unit-bar plus its head/foot lines */
.rm-lc-resources { margin: 0.3rem 0 0.2rem; }
.rm-lc-resource { margin: 0.55rem 0; }
.rm-lc-resource-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 0.85em;
}
.rm-lc-resource-name { font-weight: 600; text-transform: capitalize; }
.rm-lc-readout { color: var(--rm-fg-dim); font-variant-numeric: tabular-nums; }
.rm-lc-steppers { display: inline-flex; align-items: center; gap: 0.15rem; }
.rm-lc-sep { color: var(--rm-fg-dim); }
.rm-lc-resource .rm-segbar { height: 0.8rem; }
.rm-lc-resource-foot {
  min-height: 1rem; margin-top: 0.15rem;
  font-size: 0.75em; color: var(--rm-fg-dim);
}
.rm-lc-anno { opacity: 0.85; }
.rm-lc-minor-resources {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem;
  margin: 0.35rem 0 0.2rem;
}
.rm-lc-minor {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.9em;
}
.rm-lc-minor-icon { font-size: 1.05em; line-height: 1; }
.rm-lc-minor-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.rm-lc-res-extra { display: inline-flex; align-items: center; gap: 0.9rem; }
.rm-lc-regen { display: inline-flex; align-items: center; gap: 0.25rem; }
.rm-lc-reset { display: inline-flex; align-items: center; gap: 0.2rem; cursor: pointer; }

/* -/+ stepper -- shared by resource numbers and ability cost counts */
.rm-stepper { display: inline-flex; align-items: center; gap: 0.1rem; }
.rm-step {
  width: 1.15rem; height: 1.15rem; line-height: 1; padding: 0;
  border: 1px solid var(--rm-border); border-radius: 4px;
  background: var(--rm-bg-alt); color: var(--rm-fg); cursor: pointer;
  font-size: 0.9em; display: inline-flex; align-items: center; justify-content: center;
}
.rm-step:hover { border-color: var(--rm-accent); background: var(--rm-accent-bg); }
.rm-step-val { min-width: 1.1rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

/* abilities */
.rm-lc-abilities { margin-top: 0.4rem; }
.rm-lc-ability { padding: 0.5rem 0; border-top: 1px solid var(--rm-border); }
.rm-lc-ability-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.rm-lc-ability-name { font-weight: 600; }
.rm-lc-active { font-size: 0.75em; color: var(--rm-fg-dim); display: inline-flex; align-items: center; gap: 0.2rem; cursor: pointer; }
.rm-lc-ability-body { margin-top: 0.35rem; }
.rm-lc-cost-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
/* pinned to the right edge so the steppers hold their column regardless of how
   many cost pips are shown (they don't jump around as cost is added/removed) */
.rm-lc-cost-edit { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.rm-lc-effect { margin-top: 0.35rem; font-size: 0.85em; color: var(--rm-fg-dim); display: flex; gap: 0.9rem; }

/* --- card as the authoring character editor -------------------------------- */
/* compact in play preview; wide in edit so ability effect/rule editors fit,
   but keep the resource bars from stretching the full width */
.rm-lc.rm-lc-card-editor { width: 22rem; margin: 0.75rem 0; }
.rm-lc.rm-lc-card-editor.rm-lc-editing { width: auto; max-width: 54rem; }
.rm-lc-card-editor.rm-lc-editing .rm-lc-resources { max-width: 24rem; }
.rm-lc-card-editor .rm-lc-abilities { margin-top: 0.6rem; }

/* number field flanked by our own -/+ buttons: hide the browser's native
   up/down spinner so there's only one set of controls */
.rm-stepper-num::-webkit-inner-spin-button,
.rm-stepper-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rm-stepper-num { -moz-appearance: textfield; appearance: textfield; }

/* --- multiplayer control panel (ui/multiplayer) --- */
.rm-mp-panel { border: 1px solid #3a3a4a; border-radius: 6px; padding: .5rem .75rem;
  margin-bottom: .75rem; background: rgba(255,255,255,.03); font-size: .9rem; }
.rm-mp-header { display: flex; align-items: center; gap: .5rem; font-weight: 600;
  margin-bottom: .4rem; }
.rm-mp-user { font-weight: 400; opacity: .8; }
.rm-mp-user::before { content: "— "; }
.rm-mp-status { opacity: .6; }
.rm-mp-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.rm-mp-row input { padding: .2rem .4rem; }
.rm-mp-or { opacity: .6; margin: 0 .2rem; }
.rm-mp-id { user-select: all; }
.rm-mp-players { opacity: .8; margin-left: .5rem; }
.rm-mp-error { color: #ff8080; margin-top: .4rem; }

/* Google login button (ui/multiplayer login-form) */
.rm-mp-login { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.rm-mp-google { display: inline-block; padding: .4rem .8rem; border-radius: 4px;
  background: #fff; color: #3c4043; border: 1px solid #dadce0; font-weight: 600;
  text-decoration: none; }
.rm-mp-google:hover { background: #f7f8f8; }