/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Dark scrollbar — global ──────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #444 #181818; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: #181818; }
*::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: #555; }

:root {
  --bg:          #0f0f0f;
  --bg2:         #181818;
  --bg3:         #222;
  --bg4:         #2a2a2a;
  --border:      #333;
  --border2:     #444;
  --text:        #e8e8e8;
  --text-muted:  #999;
  --text-faint:  #666;
  --accent:      #c9a84c;
  --radius:      8px;
  --radius-sm:   5px;
  --nav-h:       56px;
  font-size:     16px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* ── Loading screen ───────────────────────────────────────────────────────── */
#loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  gap: 16px;
  padding: 24px;
  text-align: center;
}

.loading-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .05em;
}

.loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

#loading-status { color: var(--text-muted); font-size: .9rem; }

.load-error { max-width: 400px; }
.load-error p { margin-bottom: 8px; }
.error-detail { color: #f66; font-size: .85rem; }
code { background: var(--bg3); padding: 2px 6px; border-radius: 4px; font-size: .85em; }

/* ── App shell ────────────────────────────────────────────────────────────── */
#app {
  display: none;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

#content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

/* ── Bottom nav ───────────────────────────────────────────────────────────── */
#nav {
  display: flex;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg2);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .65rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: color .15s;
  padding: 8px 4px;
  -webkit-tap-highlight-color: transparent;
}

.nav-btn .nav-icon { font-size: 1.4rem; line-height: 1; }
.nav-btn.nav-active { color: var(--accent); }
.nav-btn:active { opacity: .7; }

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header {
  background: var(--alliance-bg, var(--bg2));
  padding: 16px 16px 12px;
  border-bottom: 2px solid var(--alliance-accent, var(--accent));
  position: sticky;
  top: 0;
  z-index: 10;
}

.page-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
}

.page-subtitle { color: var(--text-muted); font-size: .85rem; margin-top: 2px; }

.back-btn {
  background: none;
  border: none;
  color: var(--alliance-accent, var(--accent));
  font-size: .85rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}

.back-btn:active { opacity: .6; }

/* ── Alliance grid ────────────────────────────────────────────────────────── */
.recent-factions {
  display: flex;
  gap: 10px;
  padding: 8px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.recent-factions::-webkit-scrollbar { display: none; }
.recent-faction-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: 80px;
  background: var(--bg2);
  border: 1px solid var(--alliance-accent, var(--border2));
  border-radius: var(--radius);
  padding: 8px 4px;
  cursor: pointer;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  transition: opacity .1s;
}
.recent-faction-btn:active { opacity: .7; }
.recent-faction-img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.recent-faction-name { font-size: .65rem; text-align: center; line-height: 1.2; color: var(--text-muted); }

.alliance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}

.alliance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 12px;
  background: var(--alliance-bg, var(--bg3));
  border: 2px solid var(--alliance-accent, var(--border2));
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s, box-shadow .1s;
}

.alliance-card:active { transform: scale(.97); }

.alliance-icon { width: 84px; height: 84px; object-fit: contain; font-size: 3.75rem; }
.alliance-name { font-size: 1.1rem; letter-spacing: .03em; }
.alliance-count { font-size: .75rem; color: var(--alliance-accent, var(--text-muted)); font-weight: 400; }

/* ── Faction list ─────────────────────────────────────────────────────────── */
.faction-list { padding: 8px; display: flex; flex-direction: column; gap: 4px; }

.faction-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--alliance-accent, var(--accent));
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
  text-align: left;
}

.faction-card:active { background: var(--bg3); }

.faction-thumb {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--bg3);
}

.faction-thumb-placeholder {
  width: 48px; height: 48px;
  background: var(--bg3);
  border-radius: 4px;
  flex-shrink: 0;
}

.faction-card-body { flex: 1; min-width: 0; }
.faction-card-name { font-weight: 600; font-size: .95rem; }
.faction-card-meta { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.faction-card-arrow { color: var(--alliance-accent, var(--text-muted)); font-size: 1.4rem; line-height: 1; }

.section-divider {
  padding: 8px 12px 4px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  margin-top: 8px;
}

/* ── Faction lore ─────────────────────────────────────────────────────────── */
.faction-lore-details {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
}

.faction-lore-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .85rem;
  color: var(--text-muted);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.faction-lore-details summary::before { content: '▸'; }
.faction-lore-details[open] summary::before { content: '▾'; }

.lore-text {
  margin-top: 10px;
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  border-bottom: 2px solid var(--border);
  background: var(--bg2);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 0;
  z-index: 9;
}

.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-hidden { display: none !important; }

/* ── Warscroll list rows ──────────────────────────────────────────────────── */
.warscroll-list { display: flex; flex-direction: column; }

.warscroll-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  width: 100%;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}

.warscroll-row:active { background: var(--bg2); }

.wr-thumb {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--bg3);
}

.wr-thumb-placeholder {
  width: 40px; height: 40px;
  background: var(--bg3);
  border-radius: 4px;
  flex-shrink: 0;
}

.wr-main { flex: 1; min-width: 0; }
.wr-name { display: block; font-weight: 600; font-size: .95rem; }
.wr-subname { display: block; font-size: .8rem; color: var(--text-muted); }
.wr-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wr-pts { font-size: .8rem; color: var(--text-muted); }
.wr-arrow { font-size: 1.3rem; color: var(--alliance-accent, var(--accent)); }

.empty { padding: 32px 16px; text-align: center; color: var(--text-faint); }
.error { padding: 16px; color: #f66; }

/* ── Ability cards ────────────────────────────────────────────────────────── */
.ability-group-card {
  margin: 12px 12px 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.ability-group-header {
  padding: 10px 12px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}

.ability-group-name { font-size: .95rem; font-weight: 700; }
.ability-group-type {
  display: inline-block;
  margin-top: 2px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
}

.ability-group-restriction { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }

.ability-card {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}

.ability-card:first-child { border-top: none; }

.ability-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.ability-icon { font-size: 1rem; }
.ability-name { font-weight: 700; font-size: .9rem; flex: 1; min-width: 0; }
.ability-cp, .ability-cast, .ability-cost {
  font-size: .75rem;
  font-weight: 700;
  background: var(--bg4);
  border: 1px solid var(--border2);
  padding: 2px 6px;
  border-radius: 12px;
  white-space: nowrap;
}
.ability-cp { color: #60a5fa; }
.ability-cast { color: #a78bfa; }
.ability-kw-tag {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  color: var(--text-muted);
  white-space: nowrap;
  align-self: center;
}
.ability-kw-tag--purple  { color: #a855f7; background: #a855f722; border-color: #a855f755; }
.ability-kw-tag--deploy  { color: #16a34a; background: #16a34a22; border-color: #16a34a55; }
.ability-kw-tag--spell   { color: #2563eb; background: #2563eb22; border-color: #2563eb55; }
.ability-kw-tag--rampage { color: #92400e; background: #92400e22; border-color: #92400e55; }

.ability-phase {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.ability-lore {
  font-size: .8rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 6px;
  line-height: 1.5;
}

.ability-section {
  font-size: .85rem;
  line-height: 1.5;
  margin-bottom: 4px;
}

.ability-label {
  font-weight: 700;
  color: var(--accent);
}

.ability-section .md-p { display: inline; }

/* Lore / formation cards (same padding, no group wrapper) */
.lore-card, .formation-card {
  margin: 12px 12px 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 10px 12px;
}

.lore-name, .formation-name { font-size: .95rem; font-weight: 700; margin-bottom: 6px; }
.lore-restriction { font-size: .8rem; color: var(--text-muted); margin-bottom: 6px; }
.formation-pts { font-size: .8rem; color: var(--accent); margin-bottom: 6px; }
.lore-card .ability-card, .formation-card .ability-card { padding-left: 0; padding-right: 0; }

/* ── Faction header image ─────────────────────────────────────────────────── */
.faction-page-header {
  position: relative;
  overflow: hidden;
}

.faction-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--faction-header-img);
  background-size: cover;
  background-position: center top;
  opacity: .18;
  pointer-events: none;
}

/* ── Warscroll detail ─────────────────────────────────────────────────────── */
.ws-page { --accent: #c9a84c; }

.ws-banner {
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
  background: var(--bg2);
}

.ws-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.ws-header {
  background: var(--bg2);
  padding: 14px 16px;
  border-bottom: 2px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ws-title-block { flex: 1; min-width: 0; }
.ws-name { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.ws-subname { font-size: .85rem; color: var(--text-muted); margin-top: 2px; }
.ws-faction-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.faction-tag {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--bg4);
  border: 1px solid var(--border2);
  padding: 2px 6px;
  border-radius: 12px;
  color: var(--text-muted);
}

.ws-points {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  background: var(--accent);
  color: #000;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  min-width: 50px;
}
.pts-value { font-size: 1.1rem; font-weight: 800; line-height: 1; }
.pts-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.ws-stats-bar {
  display: flex;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}

.stat-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px;
  border-right: 1px solid var(--border);
}
.stat-box:last-child { border-right: none; }

.stat-value { font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.stat-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-top: 2px; }

.ws-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  font-size: .8rem;
}
.ws-meta-item { color: var(--text-muted); }
.meta-label { font-weight: 600; color: var(--text); }

/* Tags */
.tag {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 10px;
}.tag-legends   { background: #78350f22; color: #f59e0b; border: 1px solid #78350f55; }
.tag-spearhead { background: #1e40af22; color: #60a5fa; border: 1px solid #1e40af55; }

/* Sections */
.ws-section {
  padding: 14px 16px 0;
}

.section-title {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 8px;
}

/* Weapon table */
.weapon-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 4px; }

.weapon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  table-layout: fixed;
}

.weapon-table th {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border2);
  padding: 4px 6px;
  text-align: center;
}

.weapon-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.weapon-table .col-name { text-align: left; }
.weapon-table .col-num  { text-align: center; white-space: nowrap; width: 40px; }
.weapon-table tr:last-child td { border-bottom: none; }
.weapon-table tr.battle-damaged td { color: var(--text-muted); font-style: italic; }

.weapon-type-tag {
  display: inline-block;
  margin-left: 5px;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
  line-height: 1.4;
}
.weapon-type-tag--ranged { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.weapon-type-tag--melee  { background: #fce7f3; color: #9d174d; border: 1px solid #f9a8d4; }

.weapon-ability-tag {
  display: inline-block;
  margin-top: 3px;
  margin-right: 4px;
  font-size: .68rem;
  background: var(--bg4);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text-muted);
  cursor: help;
}

/* Weapon option groups (units with wargear choices) */
.weapon-option-group { margin-bottom: 12px; }
.weapon-option-group-header { font-size: .8rem; color: var(--text-muted); margin-bottom: 6px; }
.weapon-option-group-header strong { color: var(--text-secondary); }
.weapon-option { margin-bottom: 4px; }
.weapon-option-name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
  padding: 3px 0 2px;
  margin-bottom: 2px;
}
.weapon-option-or {
  text-align: center;
  font-size: .75rem;
  color: var(--text-muted);
  padding: 4px 0;
}

/* Wargear option descriptions (shown above weapon table) */
.wargear-options-list { margin-bottom: 6px; }
.wargear-option-line {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 1px 0;
}
.wargear-option-line strong { color: var(--text-secondary); }

/* Wargear */
.wargear-text { font-size: .85rem; line-height: 1.6; }
.wargear-text .md-list { padding-left: 16px; }
.wargear-text .md-list li { margin-bottom: 4px; }
.wargear-text .md-p { display: block; margin-bottom: 6px; }

/* Keywords */
.keyword-list { display: flex; flex-wrap: wrap; gap: 6px; }
.keyword-pill {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--bg4);
  border: 1px solid var(--border2);
  padding: 3px 8px;
  border-radius: 12px;
  color: var(--text-muted);
}

.ws-notes {
  font-size: .82rem;
  color: var(--text-muted);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.ws-lore-details {
  margin: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ── Faction print selection view ─────────────────────────────────────────── */
.fprint-action-bar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px 4px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}

.fprint-open-btn { color: var(--accent); }

.fprint-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.fprint-print-btn {
  font-size: .8rem;
  padding: 6px 14px;
}

.fprint-sel-bar {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

.fprint-row { cursor: pointer; }

.fprint-selected {
  background: color-mix(in srgb, var(--alliance-accent, var(--accent)) 12%, transparent) !important;
  border-left-color: var(--alliance-accent, var(--accent)) !important;
}

.fprint-check {
  font-size: 1.1rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.fprint-selected .fprint-check { color: var(--alliance-accent, var(--accent)); }

/* Print button in warscroll header */
.ws-print-btn {
  background: none;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  align-self: center;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, border-color .15s;
}
.ws-print-btn:active { color: var(--accent); border-color: var(--accent); }
@media (hover: hover) { .ws-print-btn:hover { color: var(--accent); border-color: var(--accent); } }

.ws-lore-details summary {
  padding: 10px 12px;
  background: var(--bg2);
  cursor: pointer;
  font-weight: 600;
  font-size: .85rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ws-lore-details summary::before { content: '▸'; }
.ws-lore-details[open] summary::before { content: '▾'; }
.ws-lore-details .lore-text { padding: 12px; }

.ws-base-text {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  color: var(--accent, var(--fg));
  padding: 14px 12px;
}

/* Inline markdown */
.md-p { display: block; margin-bottom: 4px; }
.md-list { padding-left: 18px; margin-bottom: 4px; }
.md-list li { margin-bottom: 2px; }
.md-table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: .85rem; }
.md-table th, .md-table td { border: 1px solid var(--border2); padding: 5px 10px; text-align: left; }
.md-table thead th { background: var(--bg3); font-weight: 700; color: var(--accent, #c9a84c); }
.md-table tbody tr:nth-child(even) { background: var(--bg3); }

/* ── Search ───────────────────────────────────────────────────────────────── */
.search-page { display: flex; flex-direction: column; height: 100%; }

.search-header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-header .page-title { margin-bottom: 8px; }

.search-box-wrap { position: relative; }

.search-input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1rem;
  padding: 10px 14px;
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}

.search-input:focus { border-color: var(--accent); }

.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--text-muted);
  cursor: pointer;
}

.search-results { flex: 1; overflow-y: auto; }
.search-hint { padding: 32px 16px; text-align: center; color: var(--text-faint); }

.search-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  border-left: 3px solid var(--accent, var(--text-faint));
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}

.search-hit:active { background: var(--bg2); }

.hit-main { flex: 1; min-width: 0; }
.hit-name { display: block; font-weight: 600; font-size: .95rem; }
.hit-sub  { display: block; font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.hit-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-left: 8px; }
.hit-pts  { font-size: .8rem; color: var(--text-muted); }

.search-hit-rule { display: block; align-items: unset; }
.search-hit-rule .hit-main { display: flex; flex-direction: column; }
.hit-rule-snippet {
  margin-top: 5px;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
}
.search-mark {
  background: rgba(201,168,76,.35);
  color: var(--text);
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Army Builder ─────────────────────────────────────────────────────────── */
.builder-page { padding-bottom: 24px; }

.builder-page .page-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.page-header-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

.roster-list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }

.roster-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, #c9a84c);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.roster-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--roster-bg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  opacity: .20;
  mask-image: linear-gradient(to left, black 0%, black 30%, transparent 75%);
  -webkit-mask-image: linear-gradient(to left, black 0%, black 30%, transparent 75%);
  pointer-events: none;
}
.roster-card-body {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  cursor: pointer; color: var(--text);
  width: 100%; text-align: left;
  position: relative; z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.roster-card-body:active { background: var(--bg3); }
.roster-card-main { flex: 1; min-width: 0; }
.roster-name  { display: block; font-weight: 700; font-size: .95rem; }
.roster-faction { display: block; font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.roster-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.roster-pts   { font-weight: 700; font-size: .9rem; color: var(--accent, #c9a84c); }
.roster-unit-count { font-size: .75rem; color: var(--text-muted); }
.roster-meta-row { display: flex; align-items: center; gap: 6px; }
.roster-delete, .roster-export, .roster-print {
  background: none; border: 2px solid var(--border2);
  border-radius: 6px; cursor: pointer;
  font-size: .72rem; font-weight: 600;
  padding: 2px 7px; -webkit-tap-highlight-color: transparent;
}
.roster-export { color: var(--text); }
.roster-export:active { color: var(--accent); border-color: var(--accent); }
.roster-delete { color: #f66; border-color: #f664; }
.roster-delete:active { color: #ff4444; border-color: #ff4444; }
.roster-print { color: var(--text-muted); display: flex; align-items: center; padding: 3px 6px; }
.roster-print:active { color: var(--accent); border-color: var(--accent); }

/* ── Roster detail header ─────────────────────────────────────────────────── */
.builder-detail { padding-bottom: 32px; }

.bd-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 10px;
  background: var(--bg2);
  border-bottom: 2px solid var(--accent);
  position: sticky; top: 0; z-index: 10;
}

.bd-title-block { flex: 1; min-width: 0; }

.bd-header-right {
  display: flex; flex-direction: row; align-items: center;
  gap: 6px; flex-shrink: 0;
}
.btn-export, .btn-phases { font-size: .7rem; padding: 4px 8px; }
.bd-name {
  font-size: 1.15rem; font-weight: 800; line-height: 1.2;
  cursor: pointer;
}
.bd-name:hover { text-decoration: underline dotted; }
.bd-faction { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }

.bd-pts-block {
  display: flex; flex-direction: column; align-items: center;
  background: var(--accent); color: #000; border-radius: var(--radius-sm);
  padding: 4px 10px; flex-shrink: 0; min-width: 60px;
  transition: background .2s;
}
.bd-pts-block.over-limit { background: #e53; color: #fff; }
.bd-pts-value { font-size: 1.2rem; font-weight: 800; line-height: 1; }
.bd-pts-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* Battle formation row */
.formation-picker-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 16px;
  background: var(--bg2); border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text); cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.formation-picker-row:active { background: var(--bg3); }
.fpr-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); width: 110px; flex-shrink: 0; }
.fpr-value { flex: 1; font-size: .9rem; font-weight: 600; }
.fpr-none  { color: var(--text-faint); font-weight: 400; }
.fpr-arrow { color: var(--accent); font-size: 1.2rem; flex-shrink: 0; }

/* Section headings */
.section-heading {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 4px;
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-faint);
}

.empty-inline { padding: 8px 16px; font-size: .85rem; color: var(--text-faint); }

/* ── Validation bar ───────────────────────────────────────────────────────── */
.vbar {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.vbar--ok {
  font-size: .78rem; color: #4ade80;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
}

.vchip {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: .8rem; line-height: 1.4;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid;
}
.vchip--error   { background: rgba(229,51,51,.1);  border-color: #e53; color: #f88; }
.vchip--warning { background: rgba(251,191,36,.08); border-color: #fbbf24; color: #fcd34d; }
.vchip--info    { background: rgba(99,179,237,.08); border-color: #63b3ed; color: #90cdf4; }

/* Regiment-level warning badge */
.reg-warn-badge {
  font-size: .72rem; font-weight: 700;
  color: #fbbf24; padding: 2px 5px;
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 10px;
}

/* ── Regiment card ────────────────────────────────────────────────────────── */
.regiment-card {
  margin: 4px 10px 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.regiment-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--bg3);
  border-left: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
}
.rh-left { flex: 1; min-width: 0; }
.rh-regiment-num {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--alliance-accent, var(--accent));
  margin-bottom: 3px;
}
.rh-leader-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rh-leader-pts  { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.rh-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.general-badge {
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: #000;
  background: var(--accent); padding: 1px 5px; border-radius: 8px;
}
.general-star { color: var(--accent); font-size: 1rem; }

/* Enhancements */
.regiment-enhancements { border-bottom: 1px solid var(--border); }

.enhancement-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 12px;
  background: none; border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text); cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.enhancement-row:last-child { border-bottom: none; }
.enhancement-row:active { background: var(--bg3); }
.enh-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); width: 110px; flex-shrink: 0; }
.enh-value { flex: 1; font-size: .85rem; }
.enh-none  { color: var(--text-faint); }
.enh-arrow { color: var(--accent); font-size: 1.1rem; flex-shrink: 0; }

/* Regiment options reference */
.regiment-options-ref {
  border-bottom: 1px solid var(--border);
  font-size: .8rem;
}
.regiment-options-ref summary {
  padding: 6px 12px;
  cursor: pointer; color: var(--text-faint);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.regiment-options-ref summary::before { content: '▸'; }
.regiment-options-ref[open] summary::before { content: '▾'; }
.ro-list { padding: 4px 12px 8px 24px; display: flex; flex-direction: column; gap: 3px; }
.ro-item .md-p { display: inline; }

/* Units inside regiment */
.regiment-units { padding: 4px 0; }
.aux-units-list  { padding: 0; min-height: 36px; }

.regiment-unit {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  cursor: default;
}
.regiment-unit:last-child { border-bottom: none; }
.aux-unit { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.unit-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }

/* Drag handle */
.drag-handle {
  font-size: 1rem; color: var(--text-faint);
  cursor: grab; flex-shrink: 0; user-select: none;
  padding: 0 2px;
}
.drag-handle:active { cursor: grabbing; }

/* Dragging state */
.regiment-unit.dragging { opacity: .35; }

/* Drop zone highlight */
.regiment-units.drag-over,
.aux-units-list.drag-over {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--radius-sm);
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* Insertion position indicators */
.regiment-unit.drag-insert-before {
  border-top: 2px solid var(--accent);
}
.regiment-units.drag-insert-end::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--accent);
  margin: 0 12px 4px;
  border-radius: 1px;
}

.ws-link {
  background: none; border: none; cursor: pointer;
  color: var(--accent); text-align: left; padding: 0;
  text-decoration: underline dotted;
  font-size: .88rem; font-weight: 600;
  flex: 1; min-width: 0;
  -webkit-tap-highlight-color: transparent;
}
.ws-link:active { opacity: .7; }

.unit-name { flex: 1; }
.unit-controls { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.unit-pts { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.unit-warning { font-size: .72rem; color: #f59e0b; margin-top: 2px; }

.reinforce-btn {
  font-size: .7rem; font-weight: 800; padding: 2px 6px;
  background: var(--bg4); border: 1px solid var(--border2);
  border-radius: 4px; color: var(--text-muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reinforce-btn.reinforced {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent); color: var(--accent);
}

.unit-remove {
  background: none; border: none; color: var(--text-faint);
  cursor: pointer; padding: 4px; font-size: .9rem;
  -webkit-tap-highlight-color: transparent;
}
.unit-remove:active { color: #f66; }

.btn-add-unit {
  display: block; width: 100%;
  padding: 8px 12px; background: none; border: none;
  border-top: 1px dashed var(--border2);
  color: var(--accent); font-size: .82rem; font-weight: 600;
  text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-add-unit:active { background: var(--bg3); }

.btn-add-regiment {
  display: block; width: calc(100% - 20px);
  margin: 20px 10px 8px;
  padding: 9px 12px; background: none;
  border: 1px dashed var(--border2); border-radius: var(--radius);
  color: var(--accent); font-size: .85rem; font-weight: 600;
  text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-add-regiment:active { background: var(--bg2); }

/* ── Picker modals ────────────────────────────────────────────────────────── */
.picker-list {
  display: flex; flex-direction: column;
  max-height: 55vh; overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

.picker-item {
  display: flex; flex-direction: column;
  width: 100%; padding: 10px 12px;
  background: none; border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text); cursor: pointer; text-align: left;
  gap: 4px; -webkit-tap-highlight-color: transparent;
}
.picker-item:last-child { border-bottom: none; }
.picker-item:active { background: var(--bg3); }
.picker-item--clear { color: var(--text-muted); }
.picker-recent-header {
  padding: 5px 12px 4px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--accent);
  background: var(--bg3); border-bottom: 1px solid var(--border);
}
.picker-section-divider {
  padding: 5px 12px 4px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
  background: var(--bg3);
  border-top: 2px solid var(--border2);
  border-bottom: 1px solid var(--border);
}
.picker-section-divider::after { content: 'All units'; }

.pi-main { display: flex; align-items: center; gap: 8px; }
.pi-name { font-weight: 600; font-size: .9rem; flex: 1; }
.pi-name--link { cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: transparent; transition: text-decoration-color .15s; }
.pi-name--link:hover { text-decoration-color: var(--accent); }
.btn-pick-add { flex-shrink: 0; padding: 3px 10px; font-size: .75rem; font-weight: 700; background: var(--accent); color: #000; border: none; border-radius: 5px; cursor: pointer; }
.pi-pts  { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.pi-tag  { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--bg4); border: 1px solid var(--border2); padding: 1px 5px; border-radius: 8px; color: var(--text-muted); }
.pi-group { font-size: .72rem; color: var(--text-faint); }
.pi-phase { font-size: .68rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; display: block; margin: 2px 0 4px; }
.pi-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }
.pi-desc .md-p { display: inline; }

/* Small buttons */
.btn-small {
  font-size: .75rem; font-weight: 700; padding: 4px 10px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); color: var(--accent);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn-small:active { background: var(--bg4); }

.btn-tiny {
  font-size: .8rem; padding: 3px 7px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 4px; color: var(--text-muted);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn-tiny:active { background: var(--bg4); }
.btn-danger { color: #f66; }
.btn-danger:active { border-color: #f66; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); }

.modal-box {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-height: 85dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-box h2 { font-size: 1.1rem; font-weight: 700; }
.modal-box--large { max-height: 90dvh; }

.form-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .85rem;
  color: var(--text-muted);
  font-weight: 600;
}

.form-input {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1rem;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.form-input:focus { border-color: var(--accent); }

.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* ── Confirm dialog ───────────────────────────────────────────────────────── */
.modal-confirm { align-items: center; z-index: 200; }
.modal-box--confirm {
  max-width: 320px;
  margin: auto;
  border-radius: var(--radius);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.confirm-message {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text);
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.prompt-input { margin-bottom: 0; }
.btn-danger-solid {
  font-size: .85rem; font-weight: 700; padding: 8px 16px;
  background: #c0392b; border: 1px solid #e74c3c;
  border-radius: var(--radius-sm); color: #fff;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn-danger-solid:active { background: #a93226; }
@media (hover: hover) { .btn-danger-solid:hover { background: #a93226; } }

/* ── Export / Import ──────────────────────────────────────────────────────── */
.export-section { margin-bottom: 14px; }

.export-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
}

.export-hint { font-weight: 400; color: var(--text-faint); }

.export-textarea {
  width: 100%;
  min-height: 140px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'Courier New', Courier, monospace;
  font-size: .75rem;
  line-height: 1.5;
  padding: 10px;
  resize: vertical;
}

.export-textarea--data { min-height: 90px; }

.export-textarea:focus { outline: none; border-color: var(--accent); }

.import-hint {
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.import-file-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .82rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.import-file-input {
  font-size: .8rem;
  color: var(--text-secondary);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  cursor: pointer;
}
.import-or-divider {
  font-size: .75rem;
  color: var(--text-muted);
  text-align: center;
  margin: 4px 0 6px;
}

.import-error {
  font-size: .8rem;
  color: #f66;
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(255,68,68,.08);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,68,68,.3);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn-primary:active { opacity: .85; }

.btn-secondary {
  background: var(--bg4);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
  padding: 10px 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-secondary:active { opacity: .85; }

/* ── Desktop tweaks ───────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  #content { max-width: 720px; margin: 0 auto; }
  .alliance-grid { grid-template-columns: repeat(4, 1fr); }
  .modal-box { max-width: 480px; margin: auto; border-radius: var(--radius); align-self: center; }
  .modal { align-items: center; }
}

/* ── Hover states for pointer devices (desktop) ─────────────────────────── */
@media (hover: hover) {
  .alliance-card:hover { transform: scale(.97); }
  .faction-card:hover { background: var(--bg3); }
  .warscroll-row:hover { background: var(--bg2); }
  .search-hit:hover { background: var(--bg2); }
  .roster-card-body:hover { background: var(--bg3); }
  .formation-picker-row:hover { background: var(--bg3); }
  .enhancement-row:hover { background: var(--bg3); }
  .ws-link:hover { opacity: .7; }
  .picker-item:hover { background: var(--bg3); }
  .btn-add-unit:hover { background: var(--bg3); }
  .btn-add-regiment:hover { background: var(--bg2); }
  .pub-card:hover { background: var(--bg3); }
  .section-row:hover { background: var(--bg2); }
  .config-btn:hover { background: var(--bg3); color: var(--accent); }
  .btn-primary:hover { opacity: .9; }
  .btn-secondary:hover { opacity: .9; }
  .btn-small:hover { background: var(--bg4); }
  .btn-tiny:hover { background: var(--bg4); }
  .roster-export:hover { color: var(--accent); border-color: var(--accent); }
  .roster-delete:hover { color: #ff4444; border-color: #ff4444; }
  .roster-print:hover { color: var(--accent); border-color: var(--accent); }
  .tactic-toggle-btn:hover { opacity: .8; }
  .manifestation-ws-row:hover { background: var(--bg3); }
}

/* ── Small-screen builder header: hide name/faction when buttons crowd it ── */
@media (max-width: 480px) {
  .bd-title-block { display: none; }
}

/* ── Rules browser ────────────────────────────────────────────────────────── */
.rules-home { padding: 8px 12px 16px; }

.rules-group { margin-bottom: 12px; }

.rules-group-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
  padding: 10px 4px 4px;
}

.pub-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  margin-bottom: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.pub-card:active { background: var(--bg3); }

.pub-icon { font-size: 1.4rem; flex-shrink: 0; }
.pub-card-body { flex: 1; min-width: 0; }
.pub-name { font-weight: 600; font-size: .9rem; }
.pub-meta { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.pub-arrow { color: var(--accent); font-size: 1.3rem; flex-shrink: 0; }

/* Section list */
.section-list { display: flex; flex-direction: column; }

.section-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  width: 100%;
  text-align: left;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.section-row:active { background: var(--bg2); }
.section-row--empty { opacity: .5; pointer-events: none; }

.section-row-main { flex: 1; min-width: 0; }
.section-name { display: block; font-weight: 600; font-size: .9rem; }
.section-meta { display: block; font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.section-arrow { color: var(--accent); font-size: 1.3rem; flex-shrink: 0; }

/* Rule containers */
.rules-content { padding: 8px 0 16px; }

.rule-container {
  margin: 0 12px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.rule-container--intro {
  background: var(--bg3);
  border-color: var(--border2);
}

.rule-title {
  font-size: 1rem;
  font-weight: 800;
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
}

.rule-subtitle {
  font-size: .8rem;
  color: var(--text-muted);
  padding: 4px 14px 6px;
  font-style: italic;
  border-bottom: 1px solid var(--border);
}

.rule-components { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }

/* Component types */
.rc-text { font-size: .88rem; line-height: 1.6; }
.rc-italic { font-style: italic; color: var(--text-muted); }
.rc-bold { font-weight: 700; }

.rc-header {
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  margin-top: 4px;
}

.rc-bullets { padding-left: 18px; }
.rc-bullet { font-size: .88rem; line-height: 1.6; margin-bottom: 4px; }

.rc-boxed {
  background: var(--bg4);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: .85rem;
  line-height: 1.6;
}

.rc-accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.rc-accordion summary {
  padding: 8px 12px;
  background: var(--bg3);
  cursor: pointer;
  font-weight: 600;
  font-size: .85rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rc-accordion summary::before { content: '▸'; color: var(--accent); }
.rc-accordion[open] summary::before { content: '▾'; }
.rc-accordion--lore summary { color: var(--text-muted); font-style: italic; }

.rc-accordion-body {
  padding: 10px 12px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.rc-image-wrap { text-align: center; }
.rc-image { max-width: 100%; border-radius: var(--radius-sm); }

/* Inline battle tactic (inside rule containers) */
.battle-tactic-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  position: relative;
}
.bt-type {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 2px;
}
.bt-name { font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
.bt-lore { font-size: .8rem; color: var(--text-muted); font-style: italic; margin-bottom: 6px; }
.bt-rule { font-size: .85rem; line-height: 1.5; }
.bt-vp {
  position: absolute; top: 10px; right: 12px;
  font-weight: 800; font-size: .85rem; color: var(--accent);
}

/* ── Battle Tactics (scenario cards) ─────────────────────────────────────── */
.tactics-page { padding: 8px 12px 16px; }

.tactic-scenario-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.tsc-header {
  background: var(--bg3);
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.tsc-name { font-size: 1rem; font-weight: 800; }

.tsc-lore-details {
  border-bottom: 1px solid var(--border);
}
.tsc-lore-details summary,
.tsc-tactic-lore-details summary {
  padding: 6px 14px;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  list-style: none;
  display: flex; align-items: center; gap: 5px;
  user-select: none;
}
.tsc-lore-details summary::before,
.tsc-tactic-lore-details summary::before { content: '▸'; font-size: .7rem; }
.tsc-lore-details[open] summary::before,
.tsc-tactic-lore-details[open] summary::before { content: '▾'; }

.tsc-lore {
  padding: 4px 14px 10px;
  font-size: .82rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
}

.tsc-tactic-lore-details {
  margin-top: 4px;
}
.tsc-tlore {
  padding: 4px 14px 8px;
}

.tsc-rules {
  padding: 8px 14px;
  font-size: .83rem;
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}

.tsc-tactics { display: flex; flex-direction: column; }

.tsc-tactic {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--ttype-color, var(--accent));
}

.tsc-tactic-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.tsc-ttype {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ttype-color, var(--accent));
  background: color-mix(in srgb, var(--ttype-color, var(--accent)) 15%, transparent);
  padding: 2px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}
.tsc-tname { font-weight: 700; font-size: .9rem; flex: 1; }
.tsc-tvp { font-weight: 800; font-size: .85rem; color: var(--accent); flex-shrink: 0; }
.tsc-tlore { font-size: .8rem; color: var(--text-muted); font-style: italic; line-height: 1.4; }
.tsc-trule { font-size: .83rem; line-height: 1.5; }

/* ── Builder additions ────────────────────────────────────────────────────── */
.unique-badge, .manifestation-badge {
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: #a855f7;
  background: #a855f722; border: 1px solid #a855f755;
  padding: 1px 5px; border-radius: 8px;
}

.general-toggle-btn { color: var(--text-faint); }
.general-toggle-btn.is-general { color: #f5c518; border-color: #f5c518; background: #f5c51822; }

.pi-tag--limit {
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  color: #f59e0b; background: #f59e0b22;
  border: 1px solid #f59e0b55; padding: 1px 5px; border-radius: 8px;
}

.picker-item--limit { opacity: .55; cursor: not-allowed; }

.pi-opt-hint {
  font-size: .75rem; color: var(--text-faint); margin-top: 2px;
}
.pi-opt-hint .md-p { display: inline; }

/* ── Battle Tactic card picker & builder display ───────────────────────────── */

/* Card item in picker list */
.tactic-card-item {
  border-bottom: 1px solid var(--border);
}
.tactic-card-item:last-child { border-bottom: none; }

.tactic-card-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
}

/* Toggle button (shared: picker + builder extras) */
.tactic-toggle-btn {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: none; border: none; color: inherit;
  cursor: pointer; text-align: left; padding: 0; font-size: inherit;
}
.tactic-toggle-btn:active { opacity: .7; }
.tactic-toggle-arrow { font-size: .75rem; flex-shrink: 0; color: var(--text-muted); }
.tactic-toggle-name  { font-weight: 600; font-size: .9rem; }

/* Extra toggle in builder uses .extra-name instead of .tactic-toggle-name */
.extra-tactic-toggle .extra-name { font-weight: 600; font-size: .9rem; }

/* Collapsible body */
.tactic-card-body { display: none; padding: 0 12px 10px; }
.tactic-card-body.open { display: block; }

/* Individual tactic row inside expanded body */
.tactic-mini {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.tactic-mini:first-child { border-top: none; }
.tactic-mini-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.tactic-mini-name  { font-weight: 600; font-size: .85rem; flex: 1; }
.tactic-mini-rules { font-size: .78rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.tactic-card-lore  { font-size: .78rem; font-style: italic; color: var(--text-faint); line-height: 1.45; margin: 0 0 4px; }
.tactic-card-rules { font-size: .78rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 8px; white-space: pre-line; }

/* Type badge (shared across picker & detail) */
.tactic-type-badge {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 7px; border-radius: 10px;
  border: 1px solid var(--border2); background: var(--bg3);
  flex-shrink: 0;
}
.tactic-type-affray     { color: #c97a50; border-color: #c97a5055; background: #c97a5018; }
.tactic-type-domination { color: #6aafdc; border-color: #6aafdc55; background: #6aafdc18; }
.tactic-type-strike     { color: #8fc96a; border-color: #8fc96a55; background: #8fc96a18; }

/* ── Unit config button & summary ─────────────────────────────────────────── */
.config-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: none; border: 1px solid var(--border2);
  border-radius: 50%; color: var(--text-muted);
  font-size: .85rem; cursor: pointer; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}
.config-btn:active { background: var(--bg3); color: var(--accent); }

.unit-enh-summary {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px;
}

.enh-tag {
  font-size: .68rem; font-weight: 600;
  border-radius: 10px; padding: 1px 7px; white-space: nowrap;
}
.enh-tag--trait {
  background: rgba(96,165,250, .1);
  border: 1px solid rgba(96,165,250, .3);
  color: #60a5fa;
}
.enh-tag--weapon {
  background: rgba(var(--accent-rgb, 201,168,76), .12);
  border: 1px solid rgba(var(--accent-rgb, 201,168,76), .3);
  color: var(--accent);
}

/* ── Unit config modal ────────────────────────────────────────────────────── */
.ucm-section {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.ucm-section:last-child { border-bottom: none; }

.ucm-section-title {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--accent); margin-bottom: 6px;
}

.ucm-restriction {
  font-size: .72rem; color: var(--text-faint); margin-bottom: 6px;
}

.ucm-picker {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: min(45vh, calc(100svh - 220px)); overflow-y: auto;
}

.ucm-empty { font-size: .85rem; color: var(--text-muted); padding: 8px 0; }

.picker-item--selected {
  background: rgba(var(--accent-rgb, 201,168,76), .12) !important;
  border-left: 3px solid var(--accent);
}
.pi-selected-badge {
  font-size: .7rem; font-weight: 700; color: var(--accent);
  background: rgba(var(--accent-rgb, 201,168,76), .15);
  border: 1px solid var(--accent); border-radius: 4px;
  padding: 1px 6px; flex-shrink: 0;
}

/* ── Army extras section ──────────────────────────────────────────────────── */
.army-extras {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
}

.extras-group {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}

.extras-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}

.extras-group-title {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--accent); flex: 1;
}

.extra-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.extra-row:last-child { border-bottom: none; }
.extra-row--col { flex-direction: column; align-items: stretch; gap: 4px; }
.extra-row-top  { display: flex; align-items: center; gap: 8px; }
.extra-row-top .extra-name { flex: 1; }

.extra-name { flex: 1; font-size: .9rem; font-weight: 500; }
.extra-pts  { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }

/* Manifestation warscroll list inside builder lore section */
.manifestation-ws-list { padding: 4px 0 4px 8px; border-left: 2px solid var(--border2); margin: 2px 12px 6px; }
.manifestation-ws-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 5px 6px; border-radius: 6px; text-align: left;
  color: var(--text); transition: background .15s;
}
.manifestation-ws-row:hover { background: var(--bg3); }
.mani-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.mani-thumb--placeholder { background: var(--bg4); }
.mani-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mani-name { font-size: .85rem; font-weight: 600; color: var(--accent); }
.mani-pts  { font-size: .72rem; color: var(--text-muted); }
.mani-arrow { font-size: 1.1rem; color: var(--text-faint); flex-shrink: 0; }

/* ── Phase view ──────────────────────────────────────────────────────────────── */

.modal-box--fullscreen {
  width: 100%; max-width: 780px;
  max-height: 88vh;
  margin-top: max(12px, env(safe-area-inset-top));
  display: flex; flex-direction: column;
  padding: 0;
}
.modal:has(.modal-box--fullscreen) { align-items: center; }
.phase-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.phase-modal-header h2 { margin: 0; font-size: 1.1rem; }
.phase-modal-body {
  overflow-y: auto;
  flex: 1;
  padding: 0 0 16px;
}

.phase-section { margin-bottom: 4px; }
.phase-section-header {
  position: sticky; top: 0; z-index: 2;
  background: var(--accent, #c9a84c);
  color: #000;
  font-size: .78rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 6px 14px;
}
.phase-timing-group { border-bottom: 1px solid var(--border); }
.phase-timing-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
  padding: 6px 14px 2px;
}
.phase-ability-card {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
  transition: background .15s;
}
.phase-ability-card:last-child { border-bottom: none; }
.phase-ability-card.highlighted {
  background: #f5c51814;
  border-left: 3px solid #f5c518;
  padding-left: 11px;
}
.phase-ability-card.collapsed .ability-body { display: none; }
.phase-ability-header {
  display: flex; align-items: flex-start; gap: 6px;
  margin-bottom: 4px;
}
.phase-ability-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
}
.phase-ability-name {
  font-weight: 700; line-height: 1.3;
}
.phase-ability-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.phase-ability-source {
  font-size: .7rem; color: var(--text-muted);
  font-style: italic;
}
.ability-collapse-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: .8rem; padding: 0 2px;
  flex-shrink: 0; line-height: 1;
}
.ability-collapse-placeholder { display: inline-block; width: 14px; flex-shrink: 0; }
.ability-highlight-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-faint); font-size: .85rem; padding: 0 2px;
  flex-shrink: 0; line-height: 1; margin-left: auto;
}
.ability-highlight-btn.is-highlighted { color: #f5c518; }

/* ── Phase modal tabs ─────────────────────────────────────────────────────────── */
.phase-modal-tabs {
  display: flex; gap: 4px; flex: 1;
}
.phase-tab {
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text-muted); padding: 5px 14px;
  border-radius: 6px; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.phase-tab.active {
  background: var(--accent, #c9a84c); color: #000;
  border-color: transparent;
}

/* ── Spell cards ─────────────────────────────────────────────────────────────── */
.spell-type-badge {
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 7px; border-radius: 10px;
  white-space: nowrap; flex-shrink: 0;
}
.spell-type-badge.spell        { background: #1e3a6e; color: #7eb3ff; }
.spell-type-badge.prayer       { background: #3a2800; color: #f5c842; }
.spell-type-badge.manifestation { background: #2a0a3a; color: #c084fc; }

.spell-cast-value {
  font-size: .78rem; font-weight: 700;
  background: var(--bg4); border: 1px solid var(--border2);
  padding: 1px 7px; border-radius: 8px; white-space: nowrap;
}
.ability-lore-text {
  font-size: .78rem; color: var(--text-muted); font-style: italic;
  margin-bottom: 4px; line-height: 1.4;
}

/* ── Lore sub-groups ─────────────────────────────────────────────────────────── */
.extras-sub-group { border-top: 1px solid var(--border); }
.extras-sub-group:first-child { border-top: none; }
.extras-sub-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 2px;
}
.extras-sub-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); flex: 1;
}

/* ── Battle view — PC only ───────────────────────────────────────────────────── */

/* Hide nav button and battle pages on mobile */
@media (max-width: 767px) {
  .nav-btn[data-path="/battle"] { display: none; }
  #content:has(.battle-detail-header),
  #content:has(.battle-list) { display: none; }
}

.battle-list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.battle-empty { color: var(--text-muted); font-size: .85rem; padding: 16px; text-align: center; }
.battle-new-wrap { padding: 12px 16px; }
.battle-turn-modal { z-index: 200; }
.battle-turn-box { max-width: 320px; text-align: center; }
.battle-turn-hint { font-size: .8rem; color: var(--text-muted); margin: 8px 0 0; line-height: 1.4; }
.battle-turn-hint strong { color: #f59e0b; }
.battle-turn-hint--regiment { display: flex; align-items: center; gap: 6px; justify-content: center; }
.turn-hint-dismiss { background: none; border: none; padding: 0 2px; cursor: pointer; color: var(--text-faint); font-size: .75rem; line-height: 1; }
.turn-hint-dismiss:hover { color: #f87171; }
.battle-turn-choices { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.battle-turn-choices .btn-primary,
.battle-turn-choices .btn-secondary { flex: 1; padding: 12px 8px; font-size: 1rem; }

.battle-list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: background .1s;
}
.battle-list-row:active { background: var(--bg3); }
.battle-list-info { flex: 1; min-width: 0; }
.battle-list-name { font-weight: 600; font-size: .95rem; display: block; }
.battle-list-meta { font-size: .75rem; color: var(--text-muted); }
.battle-list-vp { font-weight: 700; font-size: .9rem; color: var(--accent); white-space: nowrap; }
.battle-list-delete {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 1rem; padding: 4px 6px;
  -webkit-tap-highlight-color: transparent;
}
.battle-list-delete:active { color: #f66; }

.battle-roster-select,
.battle-name-input {
  width: 100%; padding: 8px 10px; margin-bottom: 12px;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text); border-radius: var(--radius-sm); font-size: .9rem;
}
.battle-name-input::placeholder { color: var(--text-muted); }

/* Detail header */
.battle-detail-header {
  background: var(--bg2); padding: 12px 16px 10px;
  border-bottom: 2px solid var(--accent); position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.battle-detail-header .battle-scoreboard { flex: 1; }
.battle-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.battle-title { font-size: 1.1rem; font-weight: 800; }
.battle-vp-total { display: flex; align-items: center; gap: 6px; }
.battle-vp-my { font-size: 1.1rem; font-weight: 700; color: var(--army1-accent, var(--accent)); }
.battle-vp-sep { color: var(--text-muted); font-weight: 700; }
.battle-vp-opp { font-size: 1.1rem; font-weight: 700; color: var(--army2-accent, #7dd3fc); }

.battle-round-nav {
  display: flex; align-items: center; gap: 10px;
}
.battle-round-btn {
  background: var(--bg4); border: 1px solid var(--border2);
  color: var(--text); border-radius: 6px; padding: 4px 10px;
  font-size: .85rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.battle-round-btn:disabled { opacity: .35; cursor: default; }
.battle-round-btn:not(:disabled):active { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.battle-round-label { font-size: .85rem; font-weight: 700; color: var(--text-muted); }

/* Sections */
.battle-section {
  padding: 12px 16px 8px; border-bottom: 1px solid var(--border);
}
.battle-section-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--col-accent, var(--text-muted)); margin-bottom: 8px;
}

/* Unit rows */
.battle-unit-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-bottom: 1px solid var(--border);
  border-left: 2px solid color-mix(in srgb, var(--col-accent, var(--accent)) 30%, transparent);
  padding-left: 6px;
}
.battle-unit-row:last-child { border-bottom: none; }
.battle-unit-row.unit-royed { opacity: .4; }
.battle-unit-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.battle-unit-name { flex: 1; font-size: .88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--col-accent, var(--text)); }
.battle-unit-max { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }

/* Tactic cards */
.battle-tactic-card {
  border: 1px solid color-mix(in srgb, var(--col-accent, var(--border)) 30%, var(--border));
  border-radius: var(--radius-sm); margin-bottom: 8px; padding: 8px 10px;
}
.battle-tactic-card-header {
  margin-bottom: 6px;
}
.battle-tactic-toggle {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; cursor: pointer; width: 100%; text-align: left;
}
.battle-tactic-card-name {
  font-size: .75rem; font-weight: 700;
  color: color-mix(in srgb, var(--col-accent, var(--text-muted)) 70%, var(--text-muted));
  text-transform: uppercase; letter-spacing: .05em;
}
.battle-tactic-toggle .tactic-toggle-arrow {
  font-size: .7rem;
  color: color-mix(in srgb, var(--col-accent, var(--text-muted)) 70%, var(--text-muted));
  flex-shrink: 0;
}
.battle-tactic-card .tactic-card-body { padding: 0 0 4px; }
.battle-tactic-card .battle-tactic-row { padding: 6px 0; }

/* Tactic rows */
.battle-tactic-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.battle-tactic-row:last-child { border-bottom: none; }
.battle-tactic-row.tactic-done .battle-tactic-name { text-decoration: line-through; opacity: .5; }
.battle-tactic-row.tactic-prev-done { opacity: .5; pointer-events: none; }
.battle-tactic-row.tactic-prev-done .battle-tactic-name { text-decoration: line-through; }
.battle-tactic-row.tactic-locked { opacity: .35; pointer-events: none; }
.battle-next-wrap { display: flex; justify-content: center; padding: 10px 14px; }
.battle-tactic-check { width: 16px; height: 16px; accent-color: var(--col-accent, var(--accent)); flex-shrink: 0; cursor: pointer; }
.battle-tactic-name { flex: 1; font-size: .88rem; color: var(--col-accent, var(--text)); }
.battle-tactic-type {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 1px 5px; border-radius: 8px;
  background: var(--bg4); border: 1px solid var(--border2); color: var(--text-muted);
}
.battle-tactic-vp { font-size: .82rem; font-weight: 700; color: var(--col-accent, var(--accent)); white-space: nowrap; }

/* VP row */
.battle-vp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.battle-vp-label { font-size: .82rem; color: var(--col-accent, var(--text-muted)); }
.battle-cp-row { display: flex; align-items: center; gap: 8px; background: var(--bg3); border-radius: var(--radius-sm); }
.battle-cp-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--col-accent, var(--accent)); flex: 1; display: inline-flex; align-items: center; gap: 5px; }
.underdog-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #f59e0b; background: #f59e0b22; border: 1px solid #f59e0b55; border-radius: 4px; padding: 1px 5px; }
.underdog-badge--red { color: #f87171; background: #f8717122; border-color: #f8717155; }
.lucky-coin { font-size: .9rem; vertical-align: middle; cursor: default; }
.battle-vp-opp-label { margin-left: 8px; }
.battle-vp-my-round { font-size: .95rem; font-weight: 700; color: var(--accent); min-width: 20px; }

/* Model loss buttons (shared with builder plan) */
.model-loss-ctrl { display: inline-flex; align-items: center; gap: 2px; }
.model-loss-btn {
  background: var(--bg4); border: 1px solid color-mix(in srgb, var(--col-accent, var(--border2)) 40%, var(--border2));
  color: var(--col-accent, var(--text));
  border-radius: 4px; width: 24px; height: 24px; font-size: 15px; line-height: 1;
  cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
}
.model-loss-btn:active { background: color-mix(in srgb, var(--col-accent, var(--accent)) 20%, transparent); }
.model-loss-count { min-width: 20px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--col-accent, var(--text)); }

/* Log */
.battle-log { display: flex; flex-direction: column; gap: 8px; }
.battle-log-entry { font-size: .8rem; color: #fbbf24; padding: 1px 0; }
.battle-log-entry.log-loss    { color: #f87171 !important; }
.battle-log-entry.log-restore { color: #4ade80 !important; }
.battle-log-entry.log-reminder { display: flex; align-items: center; gap: 6px; color: #fbbf24; font-style: italic; }
.log-reminder-dismiss { background: none; border: none; padding: 0 2px; cursor: pointer; color: var(--text-faint); font-size: .75rem; line-height: 1; flex-shrink: 0; }
.log-reminder-dismiss:hover { color: #f87171; }

.blg-round-group {
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.blg-round-header {
  background: var(--bg3); padding: 4px 10px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent);
}
.blg-turn { padding: 6px 10px; border-top: 1px solid var(--border); }
.blg-turn:first-child { border-top: none; }
.blg-turn-header {
  font-size: .7rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
}
.blg-turn[data-player="1"] .blg-turn-header { color: var(--army1-accent, var(--accent)); }
.blg-turn[data-player="2"] .blg-turn-header { color: var(--army2-accent, #7dd3fc); }
.blg-turn[data-player="1"] .battle-log-entry { color: color-mix(in srgb, var(--army1-accent, var(--accent)) 75%, var(--text-muted)); }
.blg-turn[data-player="2"] .battle-log-entry { color: color-mix(in srgb, var(--army2-accent, #7dd3fc) 75%, var(--text-muted)); }
.log-unit-name[data-army="1"] { color: var(--army1-accent, var(--accent)); font-weight: 600; }
.log-unit-name[data-army="2"] { color: var(--army2-accent, #7dd3fc); font-weight: 600; }

/* Scoreboard */
.battle-scoreboard {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 0 8px;
}
.battle-army-name {
  flex: 1; font-weight: 700; font-size: .95rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.army1-name { text-align: left; color: var(--army1-accent, var(--accent)); }
.army2-name { text-align: right; color: var(--army2-accent, #7dd3fc); }
.army-pts { font-size: .7rem; font-weight: 600; color: var(--text-muted); vertical-align: middle; margin-left: 4px; }
.battle-score { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Select labels in modal */
.battle-select-label {
  display: block; font-size: .78rem; font-weight: 600;
  color: var(--text-muted); margin-bottom: 4px; margin-top: 10px;
}
.battle-select-label:first-of-type { margin-top: 0; }

/* VS in list */
.battle-list-vs { color: var(--text-muted); font-size: .75rem; font-weight: 400; margin: 0 4px; }

/* Column army headers */
.battle-col-header {
  padding: 8px 14px; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 2px solid var(--border);
  position: sticky; top: 0; z-index: 5; background: var(--bg2);
}
.army1-header { color: var(--army1-accent, var(--accent)); border-bottom-color: var(--army1-accent, var(--accent)); }
.army2-header { color: var(--army2-accent, #7dd3fc); border-bottom-color: var(--army2-accent, #7dd3fc); }

/* Round list */
.battle-round-list {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--border);
}
.battle-round-tab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; background: none; border: none; border-bottom: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; width: 100%; text-align: left;
  transition: background .1s; -webkit-tap-highlight-color: transparent;
}
.battle-round-tab:last-child { border-bottom: none; }
.battle-round-tab:hover:not(:disabled) { background: var(--bg3); }
.battle-round-tab:disabled { opacity: .35; cursor: default; }
.battle-round-tab.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}
.brt-label { font-size: .85rem; font-weight: 600; }
.brt-vp { font-size: .8rem; font-weight: 700; color: var(--accent); }
.battle-round-tab.active .brt-label { color: var(--accent); }

/* Desktop layout — 3 columns */
@media (min-width: 768px) {
  #content:has(.battle-detail-header),
  #content:has(.battle-list) { max-width: 1400px; }

  .battle-detail-body {
    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    align-items: start;
    min-height: calc(100dvh - 120px);
  }
  .battle-col { display: flex; flex-direction: column; }
  .battle-col-army { border-right: 1px solid var(--border); }
  .battle-col-army:last-child { border-right: none; border-left: 1px solid var(--border); }
  .battle-section { border-bottom: 1px solid var(--border); }

  .battle-list { max-width: 680px; }
}