/* AIRSPACE STANDOFF: Sortie Replay and Performance Evaluation */

.aar-replay-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--glass-3d-card-bg);
  border: 1px solid var(--glass-3d-card-border);
  border-top: 1px solid var(--liquid-glass-border-top);
  border-bottom: 1px solid var(--liquid-glass-border-bottom);
  border-radius: var(--radius-card);
  padding: 8px 12px;
  box-shadow: var(--glass-3d-card-shadow);
}

.aar-replay-heading,
.aar-replay-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.aar-replay-heading {
  justify-content: space-between;
}

.aar-replay-status {
  color: var(--color-moon-mist);
  font: 700 0.58rem var(--font-dotdigital);
}

.aar-replay-canvas {
  display: block;
  width: 100%;
  height: clamp(170px, 27vh, 270px);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 5px;
  background: #020711;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

.aar-replay-controls .hud-btn {
  flex: 0 0 auto;
}

.aar-replay-slider {
  flex: 1 1 auto;
  min-width: 70px;
  accent-color: var(--theme-accent);
}

.aar-replay-clock {
  color: var(--color-ice-highlight);
  font: 700 0.62rem var(--font-dotdigital);
  white-space: nowrap;
}

.aar-replay-events {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 1px 0 3px;
}

.aar-replay-event {
  flex: 0 0 auto;
  max-width: 220px;
  overflow: hidden;
  padding: 4px 8px;
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--liquid-glass-border-top);
  border-radius: 4px;
  background: var(--glass-3d-btn-bg);
  color: var(--color-moon-mist);
  font: 700 0.56rem var(--font-dotdigital);
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: var(--glass-3d-btn-shadow);
  transition: all 0.14s ease;
}

.aar-replay-event:hover {
  border-color: var(--theme-accent);
  color: #ffffff;
  transform: translateY(-1px);
}

.aar-replay-no-events {
  color: #8494ab;
  font: 0.60rem var(--font-dotdigital);
}

.aar-report-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.aar-report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.aar-report-card {
  background: #020712;
  border: 1px solid var(--theme-primary);
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.aar-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(56, 189, 248, 0.25);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.aar-card-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  font-family: var(--font-aeonikpro), var(--font-untitled-sans);
}

.aar-card-badge {
  font-size: 0.58rem;
  font-weight: 700;
  font-family: var(--font-dotdigital);
  padding: 1px 6px;
  border-radius: 4px;
  background: transparent;
  color: var(--theme-accent);
  border: 1px solid var(--theme-accent);
  letter-spacing: 0.4px;
}

.aar-card-badge.highlight {
  color: #00f5a0;
  border-color: #00f5a0;
  background: transparent;
}

.aar-metrics-table {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.aar-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  font-family: var(--font-dotdigital);
  padding: 2px 0;
}

.aar-metric-row span {
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.aar-metric-row b {
  font-weight: 700;
  font-family: var(--font-dotdigital);
  letter-spacing: 0.3px;
}

.aar-score-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #020712;
  border: 1.5px solid #00f5a0;
  border-radius: 6px;
  padding: 12px 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 16px rgba(0, 245, 160, 0.2);
}

.aar-score-banner.defeat {
  background: rgba(20, 4, 10, 0.95);
  border-color: #f43f5e;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 16px rgba(244, 63, 94, 0.25);
}

.aar-score-banner.victory {
  background: rgba(2, 20, 14, 0.95);
  border-color: #00f5a0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 16px rgba(0, 245, 160, 0.25);
}

.aar-banner-lead {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.aar-banner-status {
  font-size: 0.88rem;
  font-weight: 800;
  color: #00f5a0;
  font-family: var(--font-aeonikpro), var(--font-untitled-sans);
  letter-spacing: 0.6px;
}

.aar-score-banner.defeat .aar-banner-status {
  color: #f43f5e;
}

.aar-banner-sub {
  font-size: 0.62rem;
  color: #94a3b8;
  font-family: var(--font-dotdigital);
}

.aar-banner-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.aar-score-num {
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-dotdigital);
  letter-spacing: 0.6px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.aar-score-unit {
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--font-dotdigital);
  color: #ffffff;
}

@media (max-width: 768px) {
  .aar-report-grid {
    grid-template-columns: 1fr;
  }

  .aar-replay-controls {
    flex-wrap: wrap;
  }

  .aar-replay-slider {
    order: 2;
    flex-basis: 100%;
  }

  .aar-replay-clock {
    margin-left: auto;
  }
}