/* ============================================================
   Action Completion Modal — HypeCity Tycoon · Phase B.2
   Success: electric teal accents. Failure: soft amber.
   ============================================================ */

.completion-modal-card {
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
}

/* ── Hero ──────────────────────────────────────────────── */
.completion-modal__hero {
  text-align: center;
  padding: var(--space-4) 0 var(--space-2);
}
.completion-modal__hero-emoji {
  font-size: 48px;
  display: block;
  margin-bottom: var(--space-2);
}
.completion-modal__hero-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}
.completion-modal--success .completion-modal__hero-title {
  color: var(--color-primary);
}
.completion-modal--failure .completion-modal__hero-title {
  color: var(--color-warning);
}

/* ── Location ─────────────────────────────────────────── */
.completion-modal__location {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  line-height: 1.6;
}

/* ── Failure Note ─────────────────────────────────────── */
.completion-modal__failure-note {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-warning);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 184, 0, 0.06);
  border: 1px solid rgba(255, 184, 0, 0.15);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

/* ── Divider ──────────────────────────────────────────── */
.completion-modal__divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-3) 0;
}

/* ── Metric Blocks ────────────────────────────────────── */
.completion-modal__metric {
  margin-bottom: var(--space-3);
}
.completion-modal__metric-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-1);
}
.completion-modal__metric-change {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
.completion-modal__metric-before {
  color: var(--color-text-secondary);
}
.completion-modal__metric-arrow {
  color: var(--color-text-disabled);
  font-size: var(--text-lg);
}
.completion-modal__metric-after {
  color: var(--color-text-primary);
}
.completion-modal__metric-after-solo {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}
.completion-modal__metric-delta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin-top: 2px;
}
.completion-modal__metric-delta--positive { color: var(--color-primary); }
.completion-modal__metric-delta--negative { color: var(--color-warning); }

/* ── Multiplier (Demolition success) ──────────────────── */
.completion-modal__multiplier {
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  padding: var(--space-3);
  background: rgba(0, 217, 126, 0.06);
  border: 1px solid rgba(0, 217, 126, 0.2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

/* ── Transform Block (Develop / Split) ────────────────── */
.completion-modal__transform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-3);
}
.completion-modal__transform-from,
.completion-modal__transform-to {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  text-align: center;
}
.completion-modal__transform-from { color: var(--color-text-secondary); }
.completion-modal__transform-to { color: var(--color-primary); }
.completion-modal__transform-arrow {
  font-size: 24px;
  color: var(--color-text-disabled);
}
.completion-modal__split-summary {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-2);
}

/* ── Summary ──────────────────────────────────────────── */
.completion-modal__summary {
  margin-bottom: var(--space-3);
}
.completion-modal__summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
  color: var(--color-text-secondary);
}
.completion-modal__summary-row--highlight {
  padding: var(--space-2) 0;
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-border-subtle);
}

/* ── Actions ──────────────────────────────────────────── */
.completion-modal__actions {
  display: flex;
  justify-content: center;
  padding-top: var(--space-2);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
  .completion-modal-card {
    max-width: 100%;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .completion-modal__metric-change {
    flex-wrap: wrap;
  }
  .completion-modal__transform {
    flex-direction: column;
    gap: var(--space-2);
  }
}