:root {
  --bg: #101217;
  --panel: #1b1f2a;
  --panel-2: #242a37;
  --panel-3: #10141c;
  --text: #f4f6fb;
  --muted: #aab2c5;
  --accent: #d8b35a;
  --danger: #ff7676;
  --ok: #80d28a;
  --warn: #ffd166;
  --border: #343b4d;
  --combat-grid: minmax(0, 1fr) minmax(360px, .95fr) minmax(0, 1fr);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #202638 0, var(--bg) 45%);
  color: var(--text);
  font-size: 14px;
}
.app-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 28px clamp(18px, 4vw, 48px);
  border-bottom: 1px solid var(--border);
}
h1, h2, h3 { margin: 0; }
h1 { font-size: clamp(24px, 4vw, 38px); }
h3 { margin-top: 18px; font-size: 16px; color: var(--accent); }
p { color: var(--muted); }
.header-actions, .toolbar, .actions, .card-title { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(340px, .85fr);
  gap: 18px;
  padding: 24px clamp(18px, 4vw, 48px) 48px;
}
.card {
  background: rgba(27, 31, 42, 0.94);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.list-card, .results { grid-row: span 2; }
.grid { display: grid; gap: 14px; margin-top: 16px; }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label { display: grid; gap: 6px; color: var(--muted); font-weight: 700; }
textarea, select, input, pre {
  width: 100%;
  background: #0d1017;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
textarea { min-height: 610px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
pre { white-space: pre-wrap; overflow: auto; }
button {
  border: 0;
  background: var(--accent);
  color: #111;
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
}
button.secondary, .tab { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
button:hover { filter: brightness(1.05); }
.tabs { display: flex; gap: 8px; margin: 14px 0; }
.tab.active { background: var(--accent); color: #111; border-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.hint { font-size: 14px; color: var(--muted); }
.profile-editor {
  margin-top: 16px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
.profile-editor .mini-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.profile-editor label { font-size: 14px; }
.profile-editor input { padding: 8px; }
.mod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.mod-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: 12px;
  color: var(--text);
}
.mod-card small { grid-column: 2 / 4; color: var(--muted); font-weight: 500; }
.mod-card b { color: var(--accent); font-size: 14px; }
.active-modifiers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; min-height: 28px; }
.chip { background: #0d1017; border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; color: var(--muted); font-size: 14px; }
.chip strong { color: var(--accent); }
.summary {
  display: grid;
  gap: 8px;
  background: #0d1017;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin: 12px 0;
}
.summary strong { color: var(--accent); }
.empty { color: var(--muted); }
.error { color: var(--danger); }
.ok { color: var(--ok); }
.schema { max-height: 360px; }
.dice-board { display: grid; gap: 14px; margin: 12px 0; }
.empty-board { color: var(--muted); background: #0d1017; border: 1px dashed var(--border); padding: 16px; border-radius: 16px; }
.dice-stage { background: #0d1017; border: 1px solid var(--border); border-radius: 16px; padding: 12px; }
.dice-stage h3 { margin: 0 0 10px; color: var(--text); display: flex; justify-content: space-between; gap: 10px; }
.dice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.die {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: #f4f6fb;
  color: #111;
  font-weight: 900;
  border: 3px solid #0a0c10;
  box-shadow: 0 4px 0 rgba(0,0,0,.25);
  position: relative;
}
.die.success { outline: 3px solid var(--ok); }
.die.fail { opacity: .52; }
.die.crit { outline: 3px solid var(--accent); }
.die.rerolled::after { content: "↻"; position: absolute; right: -7px; top: -9px; background: var(--accent); color: #111; border-radius: 99px; font-size: 14px; width: 20px; height: 20px; display: grid; place-items: center; }
.die.auto { background: var(--ok); }
.rules-list { display: grid; gap: 10px; margin-top: 12px; }
.rule-item { background: #0d1017; border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.rule-item b { color: var(--accent); }
.rule-item p { margin: 6px 0 0; font-size: 14px; }
.army-overview { display: grid; gap: 12px; margin-top: 12px; max-height: 540px; overflow: auto; }
.player-box { background: #0d1017; border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.player-box h3 { margin: 0 0 8px; color: var(--accent); }
.unit-line { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(255,255,255,.06); padding: 7px 0; color: var(--muted); }
.unit-line span:first-child { color: var(--text); }
@media (max-width: 1060px) {
  .layout { grid-template-columns: 1fr; }
  .list-card, .results { grid-row: auto; }
  .two, .mod-grid, .profile-editor .mini-grid { grid-template-columns: 1fr; }
  .app-header { align-items: flex-start; flex-direction: column; }
}

/* Vista VS */
.vs-section {
  margin-top: 18px;
  background: linear-gradient(180deg, rgba(216,179,90,.08), rgba(13,16,23,.35));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
}
.vs-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 12px;
}
.vs-title h3 { margin: 0; }
.vs-title span { color: var(--muted); font-size: 14px; }
.vs-panel.empty { color: var(--muted); }
.vs-grid {
  display: grid;
  grid-template-columns: var(--combat-grid);
  gap: 12px;
  align-items: stretch;
}
.unit-vs-card {
  background: #0d1017;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
}
.attacker-card { box-shadow: inset 4px 0 0 rgba(216,179,90,.85); }
.defender-card { box-shadow: inset -4px 0 0 rgba(128,210,138,.65); }
.unit-vs-header { margin-bottom: 12px; }
.unit-vs-header h4 {
  margin: 4px 0 2px;
  font-size: 20px;
  line-height: 1.15;
}
.unit-vs-header p { margin: 0; font-size: 14px; }
.side-label {
  display: inline-block;
  color: #111;
  background: var(--accent);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.defender-card .side-label { background: var(--ok); }
.unit-stats, .weapon-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.stat-pill {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.hover-stat-pill {
  position: relative;
  cursor: help;
}
.hover-stat-pill::after {
  content: attr(data-hover-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 20;
  width: max-content;
  max-width: min(280px, 80vw);
  transform: translateX(-50%) translateY(4px);
  padding: 9px 10px;
  border: 1px solid rgba(216,179,90,.5);
  border-radius: 10px;
  background: #10141c;
  color: var(--text);
  box-shadow: 0 14px 36px rgba(0,0,0,.42);
  font-size: 14px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.hover-stat-pill::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  z-index: 21;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: #10141c;
  border-right: 1px solid rgba(216,179,90,.5);
  border-bottom: 1px solid rgba(216,179,90,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}
.hover-stat-pill:hover::after,
.hover-stat-pill:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.hover-stat-pill:hover::before,
.hover-stat-pill:focus-visible::before {
  opacity: 1;
}
.stat-pill span {
  font-size: 14px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.stat-pill strong {
  font-size: 16px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.icon-stat-pill span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.icon-stat-pill span i {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(216,179,90,.16);
  border: 1px solid rgba(216,179,90,.44);
  color: var(--accent);
  font-style: normal;
  font-size: 14px;
  line-height: 1;
}
.icon-stat-pill span b {
  font-size: 14px;
  color: var(--muted);
}
.stat-pill.gold strong { color: var(--accent); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tag {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 700;
}
.selected-tag { color: #111; background: var(--accent); border-color: var(--accent); }
.muted-tag { opacity: .6; }
.unit-vs-card h5, .quick-calc h5 {
  margin: 14px 0 8px;
  color: var(--accent);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.compact-weapons {
  display: grid;
  gap: 8px;
  max-height: 330px;
  overflow: auto;
  padding-right: 4px;
}
.weapon-line {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius: 13px;
  padding: 10px;
  color: var(--text);
  text-align: left;
  width: 100%;
}
.weapon-line.selected {
  border-color: var(--accent);
  background: rgba(216,179,90,.09);
}
.weapon-line:hover {
  border-color: rgba(216,179,90,.65);
  background: rgba(216,179,90,.06);
}
.weapon-line-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.weapon-line-head strong { overflow-wrap: anywhere; }
.weapon-line .weapon-stats {
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 6px;
}
.weapon-line .stat-pill { padding: 6px; border-radius: 10px; }
.weapon-line .stat-pill strong { font-size: 14px; }
.weapon-line .stat-pill span { font-size: 14px; }
.vs-middle {
  display: grid;
  gap: 12px;
  align-content: start;
  background: linear-gradient(180deg, rgba(216,179,90,.08), rgba(13,16,23,.72));
  border: 1px solid rgba(216,179,90,.35);
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
}
.vs-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #111;
  font-size: 24px;
  font-weight: 1000;
  box-shadow: 0 8px 0 rgba(0,0,0,.25);
}
.quick-calc {
  background: rgba(13,16,23,.86);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.dice-needs-panel {
  display: grid;
  gap: 8px;
}
.center-control .quick-calc {
  border-color: rgba(216,179,90,.38);
  background: rgba(13,16,23,.68);
}
.quick-calc .stat-pill { text-align: center; }
@media (max-width: 1180px) {
  .vs-grid { grid-template-columns: 1fr; }
  .vs-middle { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .unit-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .weapon-line .weapon-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .vs-title { flex-direction: column; }
  .vs-middle { grid-template-columns: 1fr; }
}

/* Carga en modal y prioridad de vista VS */
.prioritized-layout {
  grid-template-columns: minmax(520px, 1.25fr) minmax(360px, .75fr);
}
.priority-card {
  grid-column: 1 / -1;
}
.prioritized-layout .results {
  grid-row: auto;
}
.combat-card {
  position: relative;
}
.split-title {
  justify-content: space-between;
  align-items: flex-start;
}
.split-title p { margin: 6px 0 0; }
.selection-grid {
  max-width: 980px;
}
.main-vs {
  padding: 18px;
  border-color: rgba(216,179,90,.45);
}
.unified-combat-section {
  display: grid;
  gap: 16px;
}
.unified-combat-section .battle-controls {
  margin-top: 0;
}
.modifier-panel {
  margin-top: 14px;
  margin-bottom: 0;
}
.modifier-panel .mod-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}
.advanced-panel {
  margin-top: 14px;
  background: rgba(13,16,23,.45);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
}
.advanced-panel summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--accent);
}
.advanced-panel .profile-editor {
  margin-top: 12px;
}
.sticky-actions {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  margin-top: 16px;
  padding: 12px;
  background: rgba(16,18,23,.9);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}
.load-modal {
  width: min(1180px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--panel) !important;
  background-color: var(--panel) !important;
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0,0,0,.62);
}
.load-modal::backdrop {
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(4px);
}
.modal-shell {
  padding: 22px;
  background: var(--panel);
  border-radius: 22px;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.modal-header p { margin: 6px 0 0; }
.icon-button {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.load-modal textarea {
  min-height: min(520px, 52vh);
}
.load-modal .schema {
  max-height: min(620px, 62vh);
}
.help-modal {
  width: min(620px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel) !important;
  background-color: var(--panel) !important;
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0,0,0,.62);
}
.help-modal::backdrop {
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(4px);
}
.help-modal-shell {
  padding: 18px;
  background: var(--panel);
  border-radius: 18px;
}
.help-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.help-modal-header h2 {
  color: var(--accent);
  font-size: 22px;
}
.help-modal-body {
  display: grid;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
}
.help-modal-body p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}
.lists-summary-card {
  grid-column: 1 / -1;
}
@media (max-width: 1060px) {
  .prioritized-layout { grid-template-columns: 1fr; }
  .priority-card, .lists-summary-card { grid-column: auto; }
  .selection-grid { max-width: none; }
}

/* Stats junto al nombre y tooltips */
.enhanced-header {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.unit-name-block { min-width: 0; }
.group-info-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(216,179,90,.55);
  border-radius: 12px;
  background: rgba(216,179,90,.11);
  color: var(--accent);
  cursor: help;
}
.group-icon {
  position: relative;
  width: 24px;
  height: 20px;
  display: block;
}
.group-icon i {
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.group-icon i:nth-child(1) { left: 8px; top: 0; }
.group-icon i:nth-child(2) { left: 1px; top: 9px; }
.group-icon i:nth-child(3) { right: 1px; top: 9px; }
.control-info-block {
  margin-top: 2px;
}
.control-info-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(216,179,90,.28);
  border-radius: 13px;
  padding: 10px;
  background: rgba(255,255,255,.025);
}
.control-info-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: var(--accent);
  font-size: 14px;
  font-weight: 1000;
  text-transform: uppercase;
}
.control-info-card .group-info-button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.control-info-card .extra-box {
  max-height: 170px;
}
.unit-header-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.unit-header-stats .stat-pill {
  padding: 6px;
  border-color: rgba(216,179,90,.35);
  background: rgba(216,179,90,.06);
}
.unit-header-stats .stat-pill strong { font-size: 14px; }
.unit-header-stats .stat-pill span { font-size: 14px; }
.stat-pill[data-help-body], .weapon-line .stat-pill[data-help-body] {
  cursor: help;
}
.summary-stats {
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.profile-summary-stats {
  grid-template-columns: repeat(7, minmax(0,1fr));
}
.extra-box {
  display: grid;
  gap: 8px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 10px;
  max-height: 240px;
  overflow: auto;
}
.ability-item {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 7px;
}
.ability-item:first-child { border-top: 0; padding-top: 0; }
.ability-item summary,
.weapon-json-rules summary,
.player-extra summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 900;
  font-size: 14px;
}
.ability-item > summary {
  display: grid;
  gap: 3px;
}
.ability-item > summary strong {
  color: var(--text);
  font-size: 14px;
}
.ability-item > summary small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.ability-kind {
  color: var(--accent);
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ability-copy {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.ability-lang {
  background: rgba(13,16,23,.62);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 8px;
}
.ability-lang b {
  display: block;
  color: var(--ok);
  font-size: 14px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.ability-lang-en summary {
  color: var(--muted);
  font-size: 14px;
}
.ability-item p,
.weapon-json-rules p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.weapon-json-rules {
  margin-top: 8px;
  background: rgba(13,16,23,.55);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 8px;
}
.player-extra {
  margin: 10px 0;
  background: rgba(13,16,23,.45);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
@media (max-width: 980px) {
  .enhanced-header { grid-template-columns: 1fr; }
  .unit-header-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .profile-summary-stats { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .unit-header-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .summary-stats { grid-template-columns: 1fr; }
  .profile-summary-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Controles principales en 3 columnas: Atacante / VS / Defensor */
.translate-toggle {
  margin-top: 8px;
  display: inline-flex;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}
.translate-toggle input { width: auto; }
.battle-controls {
  display: grid;
  grid-template-columns: var(--combat-grid);
  gap: 14px;
  margin-top: 18px;
  align-items: start;
}
.battle-control-col {
  background: rgba(13,16,23,.72);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.battle-control-col h3 {
  margin: 0 0 4px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(216,179,90,.26);
  color: var(--accent);
  font-size: 18px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.center-control h3 {
  text-align: center;
  color: var(--text);
  border-bottom-color: rgba(216,179,90,.42);
}
.defender-control h3 {
  color: var(--ok);
  border-bottom-color: rgba(128,210,138,.28);
}
.weapon-select-legacy,
.weapon-select-legacy + .select2-container {
  display: none !important;
}
.attacker-weapon-picker {
  display: grid;
  gap: 10px;
}
.attacker-weapon-picker h4 {
  margin: 0;
  color: var(--accent);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.weapon-choice-panel {
  display: grid;
  gap: 10px;
}
.control-unit-summary {
  display: grid;
  gap: 8px;
}
.control-unit-summary-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(216,179,90,.42);
  border-radius: 13px;
  background: rgba(13,16,23,.7);
}
.control-unit-summary-card .unit-vs-header {
  margin-bottom: 0;
}
.control-unit-summary-card h4 {
  margin: 4px 0 2px;
  font-size: 18px;
  line-height: 1.1;
}
.control-unit-summary-card p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.control-unit-summary-card .profile-summary-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.control-unit-summary-card .stat-pill {
  min-height: 54px;
  padding: 9px 10px;
  border-radius: 11px;
  background: rgba(39,46,64,.88);
}
.control-unit-summary-card .stat-pill span {
  font-size: 15px;
  letter-spacing: .03em;
}
.control-unit-summary-card .stat-pill strong {
  font-size: 19px;
  line-height: 1.05;
}
.defender-control .control-unit-summary-card {
  border-color: rgba(128,210,138,.34);
}
.defender-control .control-unit-summary-card .side-label {
  background: var(--ok);
}
.weapon-choice-group {
  display: grid;
  gap: 8px;
}
.weapon-choice-group h5 {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  text-transform: uppercase;
}
.weapon-choice-group > div {
  display: grid;
  gap: 8px;
}
.weapon-choice {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.035);
  color: var(--text);
  text-align: left;
  font-size: 14px;
}
.weapon-choice span {
  font-weight: 900;
}
.weapon-choice-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.weapon-choice-stats small {
  display: grid;
  gap: 1px;
  min-height: 40px;
  padding: 6px 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(39,46,64,.64);
  line-height: 1.05;
}
.weapon-choice-stats b {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}
.weapon-choice-stats strong {
  color: var(--text);
  font-size: 17px;
  overflow-wrap: anywhere;
}
.weapon-choice-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: 800;
}
.weapon-choice-rules em {
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(128,210,138,.38);
  color: var(--ok);
  background: rgba(128,210,138,.08);
  font-style: normal;
  font-size: 14px;
}
.weapon-rule-tip {
  cursor: help;
}
.weapon-rule-tip::after {
  content: attr(data-hover-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: min(330px, 82vw);
  padding: 9px 10px;
  border: 1px solid rgba(128,210,138,.48);
  border-radius: 10px;
  background: #10141c;
  color: var(--text);
  box-shadow: 0 14px 36px rgba(0,0,0,.42);
  font-size: 14px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
}
.weapon-rule-tip:hover::after,
.weapon-rule-tip:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.weapon-choice-rules .muted-rule {
  border-color: var(--border);
  color: var(--muted);
  background: rgba(255,255,255,.035);
}
.weapon-choice.selected {
  border-color: var(--accent);
  background: rgba(216,179,90,.13);
  box-shadow: 0 0 0 2px rgba(216,179,90,.14);
}
.weapon-choice.selected .weapon-choice-stats small {
  border-color: rgba(216,179,90,.28);
  background: rgba(216,179,90,.09);
}
.weapon-choice.selected .weapon-choice-stats strong {
  color: var(--accent);
}
.weapon-choice:hover {
  border-color: rgba(216,179,90,.7);
}
.attacker-control { box-shadow: inset 4px 0 0 rgba(216,179,90,.85); }
.defender-control { box-shadow: inset -4px 0 0 rgba(128,210,138,.65); }
.center-control {
  border-color: rgba(216,179,90,.48);
  background: linear-gradient(180deg, rgba(216,179,90,.08), rgba(13,16,23,.65));
}
.small-vs {
  width: 58px;
  height: 58px;
  font-size: 18px;
}
.center-actions { justify-content: center; }
.center-control .summary { margin: 0; }
.center-control .dice-board { max-height: 470px; overflow: auto; }
.weapon-type-tag {
  color: var(--ok);
  border-color: rgba(128,210,138,.38);
}
.quick-calc p.hint { margin: 0; font-size: 14px; line-height: 1.35; }
@media (max-width: 1180px) {
  .battle-controls { grid-template-columns: 1fr; }
  .modifier-panel .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tooltips explicativos en dados necesarios */
.quick-calc .info-pill {
  position: relative;
  padding-right: 26px;
}
.quick-calc .info-pill::after {
  content: "?";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(216,179,90,.55);
  color: var(--accent);
  font-size: 14px;
  font-weight: 1000;
}
.quick-calc .info-pill:hover {
  border-color: rgba(216,179,90,.75);
  background: rgba(216,179,90,.08);
}
.quick-calc .flow-pill {
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease;
}
.quick-calc .flow-active {
  border-color: var(--accent);
  background: rgba(216,179,90,.18);
  box-shadow: 0 0 0 3px rgba(216,179,90,.2);
  transform: translateY(-1px);
}
.quick-calc .flow-dependent {
  border-color: var(--ok);
  background: rgba(128,210,138,.13);
  box-shadow: 0 0 0 3px rgba(128,210,138,.16);
}
.quick-calc .flow-dependent span,
.quick-calc .flow-dependent strong {
  color: var(--ok);
}
.quick-calc .flow-dimmed {
  opacity: .48;
}
.flow-popover {
  --bs-popover-bg: #10141c;
  --bs-popover-border-color: var(--accent);
  --bs-popover-header-bg: rgba(216,179,90,.18);
  --bs-popover-header-color: var(--text);
  --bs-popover-body-color: var(--text);
  --bs-popover-max-width: 360px;
  font-size: 14px;
  pointer-events: none;
}
.flow-popover .popover-header {
  font-size: 14px;
  font-weight: 900;
}
.flow-popover .popover-body {
  font-size: 14px;
  line-height: 1.45;
}

/* Bootstrap / Docker edition additions */
.load-modal .tabs {
  margin: 18px 0 14px;
}
.load-modal .tab-panel {
  padding-top: 4px;
}
.load-modal .tab-panel .toolbar {
  margin-bottom: 12px;
}
.db-toolbar {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto auto auto;
  gap: 14px 12px;
  align-items: end;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(13,16,23,.52);
}
.db-toolbar > strong {
  align-self: center;
  color: var(--accent);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.db-toolbar #rosterName {
  max-width: none !important;
  min-height: 38px;
}
.db-toolbar #dbStatus {
  grid-column: 1 / -1;
  min-height: 18px;
  margin-top: -4px;
}
.db-toolbar .json-upload-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid rgba(245,194,75,.28);
  border-radius: 12px;
  background: rgba(245,194,75,.08);
}
.json-upload-panel .form-control {
  min-width: min(100%, 320px);
  flex: 1 1 320px;
}
.db-toolbar .saved-roster-picker {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 10px;
  padding-top: 14px;
  padding-bottom: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.saved-roster-picker > div {
  gap: 10px !important;
}
.load-target-selector {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #0d1017;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.load-target-selector span {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}
.load-target-selector label {
  display: inline-flex;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  padding: 5px 8px;
  border-radius: 8px;
}
.load-target-selector input {
  width: auto;
}
.load-target-selector label:has(input:checked) {
  background: var(--accent);
  color: #111;
}
.saved-roster-picker .form-select {
  min-width: min(100%, 360px);
  flex: 1 1 360px;
}
@media (max-width: 980px) {
  .db-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
.select2-container {
  color: var(--text);
  min-width: min(100%, 260px);
}
.select2-container--default .select2-selection--single {
  height: 38px;
  background: #0d1017;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text);
  line-height: 36px;
  padding-left: 12px;
  padding-right: 28px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--muted);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
}
.select2-dropdown {
  background: #0d1017;
  border: 1px solid var(--border);
  color: var(--text);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  outline: none;
}
.select2-container--default .select2-results__option--selected {
  background: rgba(216,179,90,.18);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--accent);
  color: #111;
}
.select2-results__option {
  color: var(--text);
}

/* Flujo didáctico final */
.learning-card {
  grid-column: 1 / -1;
}
.core-rules-card {
  grid-column: 1 / -1;
}
.core-rules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 14px;
}
.core-rules-grid article {
  min-width: 0;
  width: 100%;
}
.rules-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.rules-chip-grid button {
  min-height: 42px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
}
.rules-chip-grid button:hover {
  border-color: var(--accent);
  background: rgba(216,179,90,.12);
}
.phase-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.phase-flow article {
  background: rgba(13,16,23,.7);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.phase-flow h3,
.quiz-game h3 {
  margin: 0 0 12px;
}
.phase-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.phase-steps button,
.quiz-options button {
  min-height: 48px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
}
.phase-steps button:hover,
.quiz-options button:hover {
  border-color: var(--accent);
  background: rgba(216,179,90,.12);
}
.factor-table-wrap {
  margin-top: 14px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.factor-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  background: rgba(13,16,23,.62);
}
.core-rules-table {
  min-width: 1180px;
}
.factor-table th,
.factor-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  font-size: 14px;
  vertical-align: top;
}
.core-rules-table td:first-child {
  color: var(--text);
  font-weight: 900;
  min-width: 160px;
}
.core-rules-table td:nth-child(2),
.core-rules-table td:nth-child(3) {
  color: var(--muted);
  font-weight: 800;
}
.core-rules-table td:last-child {
  line-height: 1.45;
}
.factor-table th {
  color: var(--accent);
  background: rgba(216,179,90,.1);
  text-transform: uppercase;
}
.quiz-game {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  background: rgba(13,16,23,.72);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.quiz-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.quiz-prompt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}
.quiz-prompt p {
  margin: 4px 0 0;
}
.quiz-prompt small {
  display: block;
  margin-top: 6px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
}
.quiz-die {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #f4f6fb;
  color: #111;
  border: 3px solid #0a0c10;
  font-weight: 1000;
  font-size: 24px;
  box-shadow: 0 5px 0 rgba(0,0,0,.28);
}
.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.quiz-options button {
  text-align: left;
  padding: 12px 14px;
  line-height: 1.25;
}
.quiz-new-button {
  width: 100%;
  min-height: 46px;
  font-size: 14px;
}
.quiz-feedback {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 14px;
}
.quiz-feedback.ok {
  color: var(--ok);
  border-color: rgba(128,210,138,.45);
}
.quiz-feedback.error {
  color: var(--danger);
  border-color: rgba(255,118,118,.45);
}
@media (max-width: 900px) {
  .phase-flow,
  .quiz-options,
  .core-rules-grid {
    grid-template-columns: 1fr;
  }
  .phase-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rules-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}