:root {
  --bg: #0e1016;
  --panel: #161a23;
  --panel-2: #1c2130;
  --edge: #262c3a;
  --text: #e6e9f0;
  --dim: #8b93a6;
  --accent: #d9c48a;
  --good: #6fbf73;
  --bad: #d1503a;
  --tide: #3d8ec9;
  --ember: #d1503a;
  --stone: #5f9e50;
  --gale: #8b6bc4;
  --radius: 10px;
  --hud-w: 340px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#app { height: 100%; }
.screen { height: 100%; }
.hidden { display: none !important; }

button {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
}
button:hover { background: #232a3a; border-color: #38415a; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.primary { background: var(--accent); color: #1a1608; border-color: #b9a56f; font-weight: 650; }
button.primary:hover { background: #e6d29a; }
button.ghost { background: transparent; }
button.big { padding: 12px 22px; font-size: 16px; }

select, input[type=text] {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 7px 10px;
  min-width: 0;
}

/* ------------------------------------------------------------------ Setup */
#setup { overflow: auto; }
.setup-inner { max-width: 1100px; margin: 0 auto; padding: 40px 24px 64px; }
.title { text-align: center; margin-bottom: 28px; }
.title h1 {
  margin: 0 0 6px;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: .06em;
  font-weight: 600;
  background: linear-gradient(90deg, var(--tide), var(--gale) 35%, var(--accent) 60%, var(--ember));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.title .sub { margin: 0; color: var(--dim); }

.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.card h2 {
  margin: 0 0 12px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--dim); font-weight: 600;
}
.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.row > span { color: var(--dim); font-size: 14px; }

.seg { display: flex; gap: 6px; margin-bottom: 14px; }
.seg button { flex: 1; padding: 7px 0; }
.seg button.on { background: var(--accent); color: #1a1608; border-color: #b9a56f; font-weight: 650; }

.map-list { display: flex; flex-direction: column; gap: 8px; }
.map-opt {
  text-align: left; padding: 10px 12px; line-height: 1.35;
  display: block; width: 100%;
}
.map-opt.on { border-color: var(--accent); background: #202536; }
.map-opt b { display: block; margin-bottom: 2px; }
.map-opt small { color: var(--dim); }

.seat-list { display: flex; flex-direction: column; gap: 10px; }
.seat {
  display: grid;
  grid-template-columns: 14px 1fr 1fr;
  align-items: center; gap: 8px;
}
.swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.5); }

.setup-actions {
  display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap;
}

/* ------------------------------------------------------------------- Game */
#game { display: grid; grid-template-columns: 1fr var(--hud-w); height: 100%; }
.board-wrap { position: relative; overflow: hidden; }
#board { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#board.dragging { cursor: grabbing; }


#hud {
  border-left: 1px solid var(--edge);
  background: var(--panel);
  padding: 12px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.panel {
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.panel:empty { display: none; }
.panel h3 {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); font-weight: 600;
}

.score-row {
  display: grid; grid-template-columns: 12px 1fr auto auto;
  gap: 8px; align-items: center; padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.score-row:last-child { border-bottom: none; }
.score-row.active { background: rgba(217,196,138,.08); margin: 0 -6px; padding-left: 6px; padding-right: 6px; border-radius: 6px; }
.score-row.dead { opacity: .38; text-decoration: line-through; }
.score-name { font-weight: 600; }
.score-sub { color: var(--dim); font-size: 12px; }
.pts { font-variant-numeric: tabular-nums; font-weight: 650; }
.pts.win { color: var(--good); }

.turn-line { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.turn-who { font-size: 17px; font-weight: 650; }
.turn-meta { color: var(--dim); font-size: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions button { flex: 1; min-width: 96px; }

.unit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.unit-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,.6); flex: none; }
.unit-name { font-weight: 650; }
.unit-rank { color: var(--dim); font-size: 12px; text-transform: capitalize; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13px; }
.stat-grid dt { color: var(--dim); }
.stat-grid dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.spell-list { display: flex; flex-direction: column; gap: 6px; }
.spell-btn { text-align: left; display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.spell-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.spell-btn.on { border-color: var(--accent); background: #202536; }
.spell-cost { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 13px; }
.spell-blurb { color: var(--dim); font-size: 12px; margin-top: 6px; line-height: 1.4; }
.spell-compare { display: block; margin-top: 5px; color: var(--accent); opacity: .85; }

/* Unavailable, and saying so.
   Deliberately NOT the `disabled` attribute: a disabled button eats the click,
   and pressing a spell that does nothing and explains nothing is the complaint
   this whole treatment exists to answer. It reads as unavailable, refuses to
   arm, and prints its reason when pressed. */
.spell-btn.off { opacity: .62; border-style: dashed; cursor: help; }
.spell-btn.off:hover { opacity: .85; border-color: var(--dim); background: #191d28; }
.spell-btn.off .spell-name { color: var(--dim); }
.spell-btn.off .spell-cost { color: var(--dim); }
.spell-why {
  font-size: 11.5px; line-height: 1.35; color: var(--dim);
  white-space: normal; font-weight: 400;
  /* Two lines is enough to carry the reason without pushing the log off the
     panel when several spells are unavailable at once, which is the common
     case early on. The full sentence is in the tooltip and in the banner. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.log { flex: 1; min-height: 120px; overflow-y: auto; font-size: 13px; }
.log-entry { padding: 3px 0; color: var(--dim); border-bottom: 1px solid rgba(255,255,255,.03); }
.log-entry b { color: var(--text); font-weight: 600; }
.log-entry.kill b { color: var(--bad); }

.banner {
  position: absolute; left: 50%; top: 24px; transform: translateX(-50%);
  background: rgba(14,16,22,.92); border: 1px solid var(--edge);
  padding: 10px 20px; border-radius: 999px; font-weight: 600;
  pointer-events: none; z-index: 4; backdrop-filter: blur(6px);
  max-width: 80%; text-align: center;
}

.tooltip {
  position: absolute; z-index: 6; pointer-events: none;
  background: rgba(14,16,22,.96); border: 1px solid var(--edge);
  border-radius: 8px; padding: 9px 11px; font-size: 13px; max-width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); line-height: 1.45;
}
.tooltip b { color: var(--accent); }
.odds-bar { height: 6px; border-radius: 3px; background: var(--bad); margin: 7px 0 4px; overflow: hidden; }
.odds-bar > i { display: block; height: 100%; background: var(--good); }

/* ---------------------------------------------------------------- Modal */
.modal {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(6,8,12,.72);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(3px);
}
.modal-card {
  position: relative; background: var(--panel); border: 1px solid var(--edge);
  border-radius: 14px; padding: 26px 28px; max-width: 640px; width: 100%;
  max-height: 86vh; overflow-y: auto;
}
.modal-close {
  position: absolute; top: 10px; right: 10px; border: none; background: none;
  font-size: 24px; line-height: 1; color: var(--dim); padding: 4px 8px;
}
.modal-card h2 { margin-top: 0; }
.modal-card h3 { margin: 18px 0 6px; font-size: 15px; }
.modal-card p, .modal-card li { line-height: 1.55; color: #cdd3e0; }
.modal-card code {
  background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 13px;
}
.win-title { font-size: 26px; margin-bottom: 4px; }

.room-code {
  font-size: 30px; letter-spacing: .32em; text-align: center;
  padding: 14px; background: var(--panel-2); border-radius: 10px;
  border: 1px solid var(--edge); margin: 12px 0; font-weight: 650;
}

/* --------------------------------------------------------------- Responsive */
@media (max-width: 900px) {
  #game { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  #hud {
    border-left: none; border-top: 1px solid var(--edge);
    max-height: 42vh; flex-direction: row; flex-wrap: wrap; align-items: flex-start;
  }
  #hud .panel { flex: 1 1 200px; }
  .log { flex-basis: 100%; max-height: 120px; }
}

/* ------------------------------------------------------- Start screen v2 */
.start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.start-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 22px 20px; text-align: left; line-height: 1.4;
  background: linear-gradient(160deg, #1b2130, #14181f);
  border: 1px solid var(--edge); border-radius: 14px;
}
.start-card:hover { border-color: var(--accent); background: linear-gradient(160deg, #232b3d, #171c26); }
.start-card b { font-size: 17px; }
.start-card small { color: var(--dim); }
.start-icon { font-size: 30px; line-height: 1; color: var(--accent); margin-bottom: 4px; }

.setup-secondary { display: flex; gap: 10px; justify-content: center; margin-bottom: 22px; }

/* ---------------------------------------------------------- Objective bar */
.objective {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 4; pointer-events: none; text-align: center;
  background: rgba(12,14,20,.86); border: 1px solid var(--edge);
  padding: 9px 20px; border-radius: 999px; backdrop-filter: blur(8px);
  max-width: min(560px, 76%); font-size: 14px;
}
.objective b { font-weight: 650; }
.objective .obj-sub { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
.objective:empty { display: none; }

/* ----------------------------------------------------------- Coach bubble */
.coach {
  position: absolute; left: 16px; bottom: 16px; z-index: 5;
  width: min(320px, 62vw);
  background: rgba(16,20,28,.95); border: 1px solid #3a4257;
  border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); backdrop-filter: blur(8px);
  animation: coachIn .22s ease-out;
}
@keyframes coachIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.coach h4 { margin: 0 0 6px; font-size: 15px; color: var(--accent); }
.coach p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #cdd3e0; }
.coach-actions { display: flex; gap: 8px; margin-top: 12px; }
.coach-actions button { padding: 6px 12px; font-size: 13px; }

/* --------------------------------------------------------- Camera controls */
.corner-left { position: absolute; top: 12px; left: 12px; z-index: 5; }
.corner-right { position: absolute; bottom: 12px; right: 12px; z-index: 5; }
.camera-bar { display: flex; gap: 6px; }
.camera-bar .corner-btn { padding: 7px 11px; font-size: 15px; line-height: 1; }
.corner-btn {
  background: rgba(16,20,28,.9); border: 1px solid var(--edge);
  border-radius: 8px; padding: 7px 13px; backdrop-filter: blur(6px);
}

/* ------------------------------------------------- Overlay HUD (v3) */
/* Laid out after the original: player banners top corners, the selected
   creature bottom-left, the ground under the cursor bottom-centre. */

.player-banner {
  position: absolute; top: 12px; z-index: 4; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  background: rgba(10,12,18,.82); border: 1px solid var(--edge);
  padding: 8px 14px; backdrop-filter: blur(8px);
}
.player-banner.left  { left: 12px;  border-radius: 8px 22px 22px 8px; }
.player-banner.right { right: 12px; border-radius: 22px 8px 8px 22px; flex-direction: row-reverse; }
.player-banner:empty { display: none; }
.pb-seat {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  color: #080a0f; border: 2px solid rgba(0,0,0,.55);
}
.pb-name { font-size: 15px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.player-banner.right .pb-body { text-align: right; }
.pb-pips { display: flex; gap: 3px; margin-top: 4px; }
.player-banner.right .pb-pips { justify-content: flex-end; }
.pip { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0,0,0,.6); }
.pip.off { background: transparent; border-color: rgba(255,255,255,.28); }
.tri { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.tri.on  { border-bottom: 9px solid var(--accent); }
.tri.off { border-bottom: 9px solid rgba(255,255,255,.2); }
.pb-turn { box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(217,196,138,.5); }

.creature-panel {
  position: absolute; left: 14px; bottom: 14px; z-index: 5; pointer-events: none;
  display: flex; align-items: flex-end; gap: 12px;
}
.cp-art {
  width: 92px; height: 92px; border-radius: 12px; flex: none;
  border: 2px solid rgba(0,0,0,.6); background-size: cover; background-position: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  display: grid; place-items: center; font-size: 34px;
}
.cp-name { font-size: 19px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.cp-rank { color: var(--dim); font-size: 12px; text-transform: capitalize; }
.cp-hp { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cp-bar { width: 120px; height: 8px; background: rgba(0,0,0,.7); border: 1px solid rgba(0,0,0,.8); }
.cp-bar > i { display: block; height: 100%; }
.cp-element { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; margin-top: 4px; }

.ground-panel {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 4; pointer-events: none; text-align: center;
}
.gp-name { font-size: 17px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.gp-el { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-top: 2px; }
.gp-tag {
  display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}

/* ------------------------------------------------------- Attack confirm */
.confirm {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 12; width: min(400px, 84vw);
  background: rgba(14,17,24,.97); border: 1px solid #3d4557;
  border-top: 3px solid var(--bad);
  border-radius: 14px; padding: 20px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.confirm h4 { margin: 0 0 10px; font-size: 17px; }
.confirm .cf-line { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: #cdd3e0; }
.confirm .cf-line b { color: var(--text); }
.confirm .cf-verdict { margin: 12px 0 4px; font-weight: 650; }
.confirm .actions { margin-top: 16px; }

/* ------------------------------------------------------------- Battle toast */
.clash {
  position: absolute; left: 50%; top: 84px; transform: translateX(-50%);
  z-index: 6; pointer-events: none; text-align: center;
  background: rgba(18,12,12,.93); border: 1px solid #5a3630;
  border-left: 3px solid var(--bad); border-right: 3px solid var(--bad);
  padding: 10px 22px; border-radius: 10px; backdrop-filter: blur(6px);
  animation: clashIn .18s ease-out;
}
@keyframes clashIn { from { opacity: 0; transform: translate(-50%, -8px) scale(.96); }
                     to   { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.clash-title { display: block; font-weight: 650; letter-spacing: .06em; }
.clash-sub { display: block; color: var(--dim); font-size: 12.5px; margin-top: 3px; }

/* The objective bar turns red when someone is one round from winning. Losing
   should never arrive without warning. */
.objective.alarm {
  border-color: var(--bad);
  background: rgba(58,16,12,.92);
  box-shadow: 0 0 26px rgba(209,80,58,.35);
  animation: alarmPulse 1.1s ease-in-out infinite;
}
@keyframes alarmPulse { 0%,100% { box-shadow: 0 0 20px rgba(209,80,58,.28); }
                        50%     { box-shadow: 0 0 34px rgba(209,80,58,.55); } }

/* Creature dossier */
.trait { font-size: 13px; line-height: 1.45; color: #cdd3e0; margin: 2px 0 10px; font-style: italic; }
.profile { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.chip {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  background: var(--panel); border: 1px solid var(--edge);
  border-radius: 999px; padding: 2px 9px; color: var(--text);
}
.roles { margin: 8px 0 0; padding-left: 16px; }
.roles li { font-size: 12.5px; line-height: 1.45; color: var(--dim); margin-bottom: 3px; }
.matchup { font-size: 12.5px; line-height: 1.45; margin-top: 7px; color: var(--dim); }
.matchup b { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.matchup b.good { color: var(--good); }
.matchup b.bad { color: var(--bad); }

/* ------------------------------------------------------------- Stat block */
.statblock { margin: 10px 0 12px; }
.sb-row { display: grid; grid-template-columns: 58px 1fr 20px; align-items: center; gap: 8px; margin-bottom: 5px; }
.sb-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.sb-track { height: 9px; background: rgba(0,0,0,.55); border: 1px solid var(--edge); border-radius: 2px; overflow: hidden; }
.sb-track > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #f0e3b8); }
.sb-num { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--text); font-weight: 600; }

.sb-line { display: flex; justify-content: space-between; font-size: 12.5px; padding: 2px 0; color: var(--dim); }
.sb-line b { color: var(--text); font-weight: 600; }

.sb-tag {
  display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.sb-tag.good { background: var(--good); color: #08140a; }
.sb-tag.ok   { background: #b7d98a; color: #0d1408; }
.sb-tag.flat { background: var(--panel); color: var(--dim); border: 1px solid var(--edge); }
.sb-tag.bad  { background: var(--bad); color: #1d0703; }

.rps { margin-top: 10px; border-top: 1px solid var(--edge); padding-top: 8px; }
.rps-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 2px 0; }
.rps-row span { letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; padding-top: 2px; }
.rps-row b { text-align: right; font-weight: 600; }
.rps-row.strong span { color: var(--good); }
.rps-row.weak span { color: var(--bad); }
.sb-roles { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--dim); }
.sb-holding {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--edge);
  font-size: 12px; line-height: 1.45; color: var(--dim);
}
.sb-holding b { color: var(--accent); }
.archetype {
  font-size: 12.5px; margin: 2px 0 10px; color: var(--accent); font-weight: 600;
  letter-spacing: .04em;
}
.archetype .turn-meta { font-weight: 400; letter-spacing: 0; }

/* The selection panel grew a lot with the stat block. Cap it and let it scroll
   internally, so selecting a creature can never reflow the page — a reflow
   fires a resize event, and chasing those moved the camera. */
#selectionPanel { max-height: 46vh; overflow-y: auto; }
#hud { width: var(--hud-w); }
@media (max-width: 900px) { #hud { width: auto; } }

/* ----------------------------------------------------------- Army builder */
/* The screen engine/army.js has been waiting for since the first build. Laid
   out as roster-on-the-left, force-on-the-right so a creature's numbers and the
   points you have left are on screen at the same moment as the decision. */

.army-summary {
  max-width: 620px; margin: 18px auto 0; text-align: center;
  font-size: 13px; line-height: 1.5;
}
.army-summary .as-label {
  display: block; color: var(--accent); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: 11px;
}
.army-summary .as-body { color: var(--dim); }

#armyScreen { overflow: auto; }
.army-inner { max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; }

.army-header {
  display: flex; gap: 24px; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 18px;
}
.army-header h2 { margin: 0 0 4px; font-size: 26px; font-weight: 600; }
.army-header .sub { margin: 0; color: var(--dim); font-size: 14px; }
.army-budget { min-width: 260px; flex: 1; max-width: 380px; }
.army-remaining { display: flex; align-items: baseline; gap: 7px; justify-content: flex-end; }
.army-remaining b { font-size: 30px; font-variant-numeric: tabular-nums; color: var(--accent); }
.army-remaining span { color: var(--dim); font-size: 13px; }
.army-bar {
  height: 7px; background: var(--panel-2); border: 1px solid var(--edge);
  border-radius: 999px; overflow: hidden; margin: 7px 0 6px;
}
.army-bar span { display: block; height: 100%; background: var(--accent); transition: width .12s; }
.army-bar span.over { background: var(--bad); }
.army-caps { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.army-caps .cap { color: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.army-caps .cap.full { color: var(--accent); }

.army-controls {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
}
.army-controls .row { margin-bottom: 0; }
#armyAuto { font-weight: 650; border-color: var(--accent); color: var(--accent); }
#armyAuto:hover { background: #202536; }

.army-errors:empty { display: none; }
.army-error {
  background: rgba(209,80,58,.12); border: 1px solid rgba(209,80,58,.4);
  color: #f0b4a6; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 13px;
}
.army-error.note {
  background: rgba(217,196,138,.1); border-color: rgba(217,196,138,.35); color: var(--accent);
}

.army-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .army-cols { grid-template-columns: 1fr; } }
.army-cols h3 {
  margin: 0 0 4px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--dim); font-weight: 600;
}
.army-hint { margin: 0 0 12px; color: var(--dim); font-size: 12px; line-height: 1.45; }
.army-count { color: var(--accent); letter-spacing: 0; text-transform: none; }
.army-empty { color: var(--dim); font-size: 13px; line-height: 1.5; }

#armyRoster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.roster-row {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 10px 12px; width: 100%;
}
.roster-row:hover { border-color: var(--accent); background: #1d2231; }
.roster-row.off { opacity: .5; border-style: dashed; cursor: help; }
.roster-row.off:hover { border-color: var(--dim); background: #191d28; }
.rr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rr-name { font-weight: 650; }
.rr-cost { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 650; }
.rr-cost i { font-style: normal; font-size: 10px; color: var(--dim); margin-left: 2px; }
.rr-meta, .rr-arch, .rr-why, .rr-owned { color: var(--dim); font-size: 11.5px; line-height: 1.35; }
.rr-arch { font-style: italic; }
.rr-owned { color: var(--accent); }
.rr-why { color: #d9a08a; }
.rr-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 2px 0; }
.ab { display: grid; grid-template-columns: 22px 1fr 14px; align-items: center; gap: 4px; }
.ab i { font-style: normal; font-size: 9.5px; color: var(--dim); text-transform: uppercase; }
.ab b {
  display: block; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--tide), var(--accent));
}
.ab u {
  text-decoration: none; font-size: 10px; color: var(--dim);
  font-variant-numeric: tabular-nums; text-align: right;
}
/* The bar sits in a track so a 3 reads as "low", not just "short". */
.ab b { box-shadow: 0 0 0 1px rgba(255,255,255,.05); }

#armyList { display: flex; flex-direction: column; gap: 5px; }
.picked-row {
  display: grid; grid-template-columns: 1fr auto 34px 20px;
  gap: 8px; align-items: center; text-align: left; padding: 7px 10px; width: 100%;
}
.picked-row:hover { border-color: var(--bad); background: #241b1c; }
.pr-name { font-weight: 600; }
.pr-rank { color: var(--dim); font-size: 11px; text-transform: capitalize; }
.pr-cost { color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; }
.pr-x { color: var(--dim); text-align: center; }
.picked-row:hover .pr-x { color: var(--bad); }

.army-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.army-actions button { min-width: 150px; padding: 10px 18px; }
#armyDone { border-color: var(--accent); color: var(--accent); font-weight: 650; }
#armyDone:disabled { opacity: .45; border-color: var(--edge); color: var(--dim); cursor: not-allowed; }

/* Which of your fallen to raise. Resurrect is the only spell whose price
   depends on the target, so it is the only one that needs this. */
.raise-pick {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--edge);
}
.raise-label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.raise-opt {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; text-align: left; padding: 6px 10px; font-size: 13px;
}
.raise-opt.on { border-color: var(--accent); background: #202536; }
.raise-opt.off { opacity: .55; border-style: dashed; cursor: help; }
.raise-opt.off .spell-cost { color: var(--bad); }

/* The reasoning behind the odds bar. Without it the forecast is a number with
   nothing behind it, and combat reads as a dice roll when it is a simulation. */
.fc-why { margin-top: 5px; color: var(--dim); font-size: 12px; line-height: 1.35; }
.fc-certainty {
  margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--edge);
  color: var(--accent); opacity: .8; font-size: 11px;
}