/* Local trial for the enemy detail opened during battle. */
#enemy-detail-modal {
  gap: 8px;
}

#enemy-detail-modal #enemy-detail-dialog {
  display: block;
  gap: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--ga-radius-panel);
  background: var(--dialog);
  box-shadow: 0 20px 60px rgb(0 0 0 / 35%);
  scrollbar-color: var(--muted) transparent;
}

#enemy-detail-modal #enemy-detail-dialog > .skill-book-card-header {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--dialog);
  box-shadow: none;
}

#enemy-detail-modal #enemy-detail-dialog .skill-book-card-category,
#enemy-detail-modal #enemy-detail-dialog .skill-book-card-category > span {
  color: var(--muted);
  font-size: var(--ga-font-caption);
  letter-spacing: .04em;
}

#enemy-detail-modal #enemy-detail-dialog .skill-book-card-title {
  flex-wrap: wrap;
  gap: 8px 12px;
}

#enemy-detail-modal #enemy-detail-dialog .skill-book-card-title h2 {
  flex: 1 1 160px;
  margin: 0;
  color: var(--text);
  font-size: var(--ga-font-page);
  line-height: 1.5;
  text-shadow: none;
}

#enemy-detail-modal #enemy-detail-dialog .enemy-form-status {
  gap: 4px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--ga-font-note);
}

#enemy-detail-modal #enemy-detail-dialog .enemy-form-status.is-owned {
  color: var(--gold-strong);
}

#enemy-detail-modal #enemy-detail-dialog > .enemy-detail-art {
  height: clamp(160px, 24dvh, 220px);
  min-height: 0;
  margin: 0;
  padding: 12px 24px;
  border: 0;
  border-radius: 0;
  background-image:
    linear-gradient(90deg, rgb(var(--accent-rgb) / 15%) 1px, transparent 1px),
    linear-gradient(0deg, rgb(var(--accent-rgb) / 15%) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 75%, rgb(var(--accent-rgb) / 10%), transparent 70%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  background-position: center;
  box-shadow: none;
}

#enemy-detail-modal #enemy-detail-dialog > .enemy-detail-art::after {
  display: none;
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-card-body {
  padding: 0 16px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-vitals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 0 0;
  color: var(--muted);
  font-size: var(--ga-font-note);
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-vitals > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-vitals strong {
  color: var(--text);
  font-size: var(--ga-font-body);
  font-variant-numeric: tabular-nums;
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-hp-track {
  margin-top: 8px;
  border-radius: 4px;
  background: var(--surface-deep);
  box-shadow: none;
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-hp-track > rect {
  fill: var(--green, #96cda1);
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-section {
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-color: var(--line);
  font-size: var(--ga-font-body);
  line-height: 1.65;
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-section > strong {
  color: var(--text);
  font-size: var(--ga-font-section);
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-section p,
#enemy-detail-modal #enemy-detail-dialog .enemy-detail-section small,
#enemy-detail-modal #enemy-detail-dialog .battle-state-empty {
  color: var(--muted);
  font-size: var(--ga-font-note);
  line-height: 1.65;
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-section.enemy-big-preview {
  padding: 12px;
  border: 0;
  border-left: 2px solid var(--red);
  border-radius: var(--ga-radius-choice);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

#enemy-detail-modal #enemy-detail-dialog .enemy-big-preview > strong {
  color: var(--red);
  font-size: var(--ga-font-body);
}

#enemy-detail-modal #enemy-detail-dialog .enemy-big-preview.is-weakened {
  border-left-color: var(--green, #96cda1);
  background: color-mix(in srgb, var(--green, #96cda1) 8%, transparent);
}

#enemy-detail-modal #enemy-detail-dialog .enemy-big-preview.is-weakened > strong {
  color: var(--green, #96cda1);
}

#enemy-detail-modal #enemy-detail-dialog .enemy-resistance-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

#enemy-detail-modal #enemy-detail-dialog .enemy-resistance-list > span {
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}

#enemy-detail-modal #enemy-detail-dialog .enemy-resistance-list b {
  color: var(--text);
  font-size: var(--ga-font-note);
}

#enemy-detail-modal #enemy-detail-dialog .battle-state-badges {
  display: grid;
  gap: 8px;
}

#enemy-detail-modal #enemy-detail-dialog .battle-state-badge {
  padding: 8px 12px;
  border: 0;
  border-left: 2px solid currentColor;
  border-radius: var(--ga-radius-choice);
  background: var(--surface);
  color: var(--muted);
}

#enemy-detail-modal #enemy-detail-dialog .battle-state-badge.positive { color: var(--green, #96cda1); }
#enemy-detail-modal #enemy-detail-dialog .battle-state-badge.negative { color: var(--red); }
#enemy-detail-modal #enemy-detail-dialog .battle-state-badge strong { font-size: var(--ga-font-body); }
#enemy-detail-modal #enemy-detail-dialog .battle-state-badge small { color: inherit; }

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-technique {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-technique > strong {
  color: var(--text);
  font-size: var(--ga-font-body);
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-technique p {
  margin: 4px 0 0;
}

#enemy-detail-modal #enemy-detail-dialog .enemy-detail-technique:last-child { border-bottom: 0; }
#enemy-detail-modal #enemy-detail-dialog .enemy-detail-technique:not(:has(p)) > strong { color: var(--muted); }

@media (max-width: 360px) {
  #enemy-detail-modal #enemy-detail-dialog > .skill-book-card-header { padding: 12px; }
  #enemy-detail-modal #enemy-detail-dialog .enemy-detail-card-body { padding-inline: 12px; }
  #enemy-detail-modal #enemy-detail-dialog .enemy-resistance-list { grid-template-columns: minmax(0, 1fr); }
}