/* ------------------------------------------------------------------ */
/* Combate                                                            */
/* ------------------------------------------------------------------ */

.combat-screen {
  position: relative;
  isolation: isolate;
  width: min(1440px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem 0 2rem;
  min-height: calc(100vh - 2rem);
}
.combat-backdrop {
  position: absolute;
  inset: -1.5rem 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.33;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 42%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 42%, #000 20%, transparent 78%);
}
.combat-backdrop .scene-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(1px) brightness(0.72) saturate(0.9);
}
.combat-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 9, 13, 0.55), rgba(7, 9, 13, 0.7)),
    radial-gradient(ellipse 80% 60% at 50% 30%, transparent 20%, rgba(7, 9, 13, 0.8));
}


.combat-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0 0.8rem;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.combat-header h1 {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  margin: 0;
}
.combat-header .eyebrow { margin-bottom: 0.2rem; }
.combat-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.turn-order {
  display: flex;
  gap: 0.35rem;
  padding: 0.65rem 0;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--line-soft);
}
.order-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.014);
  color: var(--ink-faint);
  font-size: 0.68rem;
  max-width: 170px;
}
.order-chip.is-current {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(201, 164, 92, 0.1);
  box-shadow: 0 0 16px rgba(201, 164, 92, 0.1);
}
.order-chip.enemy { border-color: rgba(185, 86, 79, 0.18); }
.order-chip.is-dead { opacity: 0.35; text-decoration: line-through; }
.order-init {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  font-family: var(--font-display);
  font-size: 0.62rem;
}
.order-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 1rem;
  padding-top: 1rem;
  align-items: start;
}

.battlefield {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
}
.party-field,
.enemy-field {
  padding: 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(201, 164, 92, 0.04), transparent 70%),
    rgba(255, 255, 255, 0.008);
}
.enemy-field {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(185, 86, 79, 0.06), transparent 70%),
    rgba(255, 255, 255, 0.008);
}
.field-label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.45rem;
}
.field-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dim);
  opacity: 0.45;
  height: 14px;
}
.field-divider::before,
.field-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.field-divider span { padding: 0 0.7rem; }
.party-grid,
.enemy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.enemy-grid:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.combatant {
  position: relative;
  padding: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 9px;
  background: rgba(9, 12, 17, 0.5);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  min-width: 0;
}
.combatant.is-current {
  border-color: var(--gold);
  background:
    radial-gradient(ellipse 80% 80% at 20% 0%, rgba(201, 164, 92, 0.1), transparent 70%),
    rgba(9, 12, 17, 0.65);
  box-shadow: 0 0 22px rgba(201, 164, 92, 0.08);
}
.combatant.is-downed { opacity: 0.72; border-color: rgba(185, 86, 79, 0.3); }
.combatant.is-dead { opacity: 0.35; filter: grayscale(1); }
.combatant.is-targetable {
  border-color: rgba(185, 86, 79, 0.65);
  cursor: pointer;
}
.combatant.is-targetable:hover {
  background: rgba(185, 86, 79, 0.08);
}
.party-member.is-targetable {
  border-color: rgba(121, 167, 131, 0.7);
  background: rgba(121, 167, 131, 0.045);
}
.target-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: rgba(8, 10, 14, 0.5);
  color: var(--ink);
  backdrop-filter: blur(1px);
}
.target-overlay span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--current-color, var(--gold));
  border-radius: 999px;
  background: rgba(8, 10, 14, 0.85);
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.party-member .target-overlay span {
  border-color: var(--heal);
  color: #b7ddbe;
}

.combatant-top {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.combatant-identity {
  flex: 1;
  min-width: 0;
}
.combatant-identity h3 {
  font-size: 0.84rem;
  margin: 0 0 0.08rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combatant-identity p {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.66rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.combatant-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 0.25rem;
}
.state-badge {
  display: inline-flex;
  padding: 0.06rem 0.35rem;
  border-radius: 3px;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-faint);
}
.state-badge.active { color: var(--gold-bright); border-color: rgba(201, 164, 92, 0.45); background: rgba(201, 164, 92, 0.08); }
.state-badge.downed { color: #e39a94; border-color: rgba(185, 86, 79, 0.4); }
.state-badge.dead { color: #8c7e78; }
.condition-chip {
  display: inline-flex;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-size: 0.52rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.condition-raging { color: #e7a58d; }
.condition-bless { color: #e2cb8a; }
.condition-faerie { color: #b9a4e0; }
.condition-stunned { color: #e3b67d; }
.condition-poisoned { color: #a8c47e; }
.condition-hidden { color: #9ec0dc; }
.condition-hexed { color: #c59bda; }
.condition-frightened { color: #d89797; }

.combatant-ac {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  padding: 0.25rem 0.3rem;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  flex: none;
}
.combatant-ac span {
  font-family: var(--font-display);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.combatant-ac strong {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.combatant-hp { margin-top: 0.55rem; }
.hp-line {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  color: var(--ink-faint);
  font-size: 0.62rem;
  margin-bottom: 0.2rem;
}
.hp-line strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
}
.hp-line small { font-size: 0.58rem; }
.temp-hp {
  margin-left: auto;
  color: var(--cold);
  font-size: 0.62rem;
}
.death-saves {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.3rem;
}
.death-saves span {
  display: inline-flex;
  gap: 0.15rem;
}
.death-saves i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.death-success i.on { background: var(--heal); border-color: var(--heal); }
.death-failure i.on { background: var(--danger); border-color: var(--danger); }

.enemy-member {
  border-color: rgba(185, 86, 79, 0.16);
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(185, 86, 79, 0.06), transparent 68%),
    rgba(10, 11, 15, 0.55);
}
.enemy-member.is-boss {
  border-color: rgba(201, 164, 92, 0.35);
  background:
    radial-gradient(ellipse 80% 70% at 30% 0%, rgba(201, 164, 92, 0.1), transparent 70%),
    rgba(14, 12, 11, 0.65);
}
.enemy-sigil {
  position: relative;
  float: right;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin: 0 0 0.2rem 0.5rem;
}
.enemy-art {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(185, 86, 79, 0.24);
  color: #d58f86;
  background: radial-gradient(circle at 40% 35%, rgba(185, 86, 79, 0.16), rgba(8, 9, 12, 0.6));
}
.boss-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-family: var(--font-display);
  font-size: 0.45rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-transform: uppercase;
}
.enemy-member .combatant-identity h3 { font-size: 0.8rem; }
.enemy-member .combatant-identity p { display: none; }
.enemy-member .combatant-top { flex-wrap: nowrap; }

/* --- panel lateral ------------------------------------------------- */

.combat-side {
  position: sticky;
  top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}
.combat-panel {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(201, 164, 92, 0.055), transparent 70%),
    var(--panel);
  padding: 0.9rem;
}
.actor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--line-soft);
}
.actor-head h2 { font-size: 1.2rem; margin: 0; }
.actor-head .eyebrow { margin-bottom: 0.1rem; }
.actor-vitals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-family: var(--font-display);
}
.actor-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.55rem 0;
}
.action-tabs {
  display: flex;
  gap: 0.15rem;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 0.55rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.action-tabs::-webkit-scrollbar { display: none; }
.action-tabs button {
  flex: none;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.action-tabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  margin-left: 0.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.5rem;
}
.action-tabs button:hover { color: var(--ink-soft); }
.action-tabs button.is-active {
  color: var(--gold-bright);
  border-color: var(--gold);
}
.action-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 345px;
  overflow-y: auto;
  padding-right: 0.2rem;
}
.combat-action {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.018);
  color: var(--ink-soft);
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.combat-action:hover:not(.is-disabled) {
  border-color: rgba(201, 164, 92, 0.5);
  background: rgba(201, 164, 92, 0.055);
}
.combat-action.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.action-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  color: var(--gold);
  background: rgba(201, 164, 92, 0.045);
}
.action-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.action-copy strong {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ink);
}
.action-copy small {
  color: var(--ink-faint);
  font-size: 0.62rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.action-cost {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.04em;
  color: var(--gold-dim);
  text-transform: uppercase;
  max-width: 72px;
  text-align: right;
}
.combat-hint {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.6rem 0 0;
  color: var(--ink-faint);
  font-size: 0.63rem;
  font-style: italic;
}

.target-panel { border-color: rgba(201, 164, 92, 0.4); }
.target-head h3 { font-size: 1.1rem; margin: 0 0 0.2rem; }
.target-head p { color: var(--ink-muted); font-size: 0.76rem; margin-bottom: 0.7rem; }
.target-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.target-choice {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.018);
  color: var(--ink);
  text-align: left;
}
.target-choice:hover {
  border-color: var(--gold);
  background: rgba(201, 164, 92, 0.06);
}
.target-choice span:not(.emblem):not(.tag) {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  flex: 1;
}
.target-choice strong {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
}
.target-choice small { color: var(--ink-faint); font-size: 0.64rem; }

.waiting-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-height: 180px;
  justify-content: center;
}
.waiting-panel h2 { font-size: 1.25rem; margin: 0; }
.waiting-panel p { color: var(--ink-muted); font-size: 0.8rem; margin: 0 0 0.5rem; }
.enemy-turn-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 0 rgba(185, 86, 79, 0.5);
  animation: enemy-pulse 1.5s infinite;
}
@keyframes enemy-pulse {
  0% { box-shadow: 0 0 0 0 rgba(185, 86, 79, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(185, 86, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(185, 86, 79, 0); }
}
.death-panel { border-color: rgba(185, 86, 79, 0.4); }

.combat-log-wrap {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(8, 10, 14, 0.42);
  overflow: hidden;
}
.combat-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--line-soft);
}
.round-pill {
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.combat-log {
  list-style: none;
  padding: 0.55rem 0.7rem;
  margin: 0;
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.72rem;
}
.combat-log li {
  display: flex;
  gap: 0.4rem;
  line-height: 1.42;
  color: var(--ink-muted);
}
.log-round {
  flex: none;
  width: 16px;
  color: var(--ink-faint);
  font-size: 0.55rem;
  text-align: right;
  padding-top: 0.12rem;
}
.log-header { color: var(--gold-bright); font-family: var(--font-display); font-size: 0.68rem; }
.log-danger { color: #e39a94; }
.log-heal { color: #a8d1b0; }
.log-attack { color: var(--ink-soft); }
.log-miss { color: var(--ink-faint); }
.log-damage { color: #e0ad91; }
.log-condition { color: #d7bf8d; }
.log-buff { color: #b8acee; }
.log-spell { color: #b7aee6; }
.log-enemy { color: #d59b93; }
.log-muted { color: var(--ink-faint); font-style: italic; }
.log-important { color: var(--gold); }

.resolution-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem 0 0.8rem;
  color: var(--gold-bright);
  text-align: center;
}
.resolution-hero h3 { margin: 0; font-size: 1.5rem; }
.resolution-hero p { margin: 0; color: var(--ink-muted); font-style: italic; font-size: 0.85rem; }
.resolution-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.resolution-stats div {
  padding: 0.55rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.resolution-stats span {
  font-family: var(--font-display);
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.resolution-stats strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--gold-bright);
  font-weight: 500;
}
.loot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin-top: 0.8rem;
}
.loot-list .eyebrow { width: 100%; margin: 0; }

/* Matices de criaturas */
.enemy-member.art-goblin .enemy-art { color: #b8c46c; border-color: rgba(184, 196, 108, 0.3); }
.enemy-member.art-wolf .enemy-art { color: #b7b6a6; border-color: rgba(183, 182, 166, 0.3); }
.enemy-member.art-skeleton .enemy-art,
.enemy-member.art-ghoul .enemy-art,
.enemy-member.art-zombie .enemy-art,
.enemy-member.art-ghost .enemy-art { color: #9ab7a7; border-color: rgba(154, 183, 167, 0.3); }
.enemy-member.art-dragon .enemy-art { color: #e2925a; border-color: rgba(226, 146, 90, 0.4); }
.enemy-member.art-hag .enemy-art { color: #b591b6; }
.enemy-member.art-mage .enemy-art,
.enemy-member.art-necromancer .enemy-art { color: #a294da; }
.enemy-member.art-ogre .enemy-art,
.enemy-member.art-treant .enemy-art { color: #a7b37b; }
.enemy-member.art-spider .enemy-art { color: #b0a18d; }
.enemy-member.art-guard .enemy-art,
.enemy-member.art-armor .enemy-art { color: #aab3c0; }

@media (max-width: 1180px) {
  .combat-layout { grid-template-columns: 1fr 390px; }
}
@media (max-width: 1020px) {
  .combat-layout { grid-template-columns: 1fr; }
  .combat-side { position: static; order: -1; }
  .action-list { max-height: 280px; }
  .combat-log { max-height: 190px; }
}
@media (max-width: 700px) {
  .combat-screen { width: calc(100% - 1.2rem); }
  .combat-backdrop { opacity: 0.2; inset: -1rem 0; }
  .combat-header h1 { font-size: 1.3rem; }
  .party-grid, .enemy-grid { grid-template-columns: 1fr; }
  .combat-side { order: 0; }
  .battlefield { order: 1; }
  .combat-log { max-height: 160px; }
  .action-list { max-height: 300px; }
  .combatant-top { align-items: center; }
  .enemy-member .combatant-identity p { display: none; }
  .combat-header-actions .btn span { display: none; }
}
@media (max-width: 420px) {
  .combat-panel { padding: 0.75rem; }
  .action-copy small { -webkit-line-clamp: 1; }
  .resolution-stats { grid-template-columns: 1fr; }
}