/* ================================================================
   Prediction — Card, scenarios, passed states
   ================================================================ */

.prediction-section { margin-top: 16px; animation: fadeIn 1s ease-out 1.9s both; }

.prediction-content { padding: 20px 0 8px; max-width: 700px; margin: 0 auto; text-align: center; }

.prediction-card {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(163,107,255,0.08); border-radius: 8px;
  padding: 24px; margin-bottom: 12px; position: relative; overflow: hidden;
}

.prediction-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(163,107,255,0.05) 0%, transparent 60%);
  pointer-events: none;
}

.prediction-label {
  font-size: clamp(8px, 1.8vw, 10px); color: rgba(183,199,223,0.3);
  text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 8px;
}

.prediction-date {
  font-size: clamp(20px, 4vw, 28px); font-weight: 700;
  color: var(--accent); margin-bottom: 4px; letter-spacing: -0.01em;
}

.prediction-sub { font-size: clamp(9px, 2vw, 11px); color: var(--text-faint); line-height: 1.5; }

.prediction-disclaimer {
  font-size: clamp(7px, 1.5vw, 9px); color: rgba(183,199,223,0.15);
  font-style: italic; margin-top: 12px; letter-spacing: 0.02em;
}

.prediction-scenarios { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }

.scenario-card {
  background: rgba(255,255,255,0.01); border: 1px solid rgba(255,255,255,0.04);
  border-radius: 4px; padding: 12px; text-align: center; transition: all 0.3s ease;
}

.scenario-card:hover { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); }

.scenario-label {
  font-size: clamp(7px, 1.5vw, 9px); color: rgba(183,199,223,0.25);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px;
}

.scenario-date { font-size: clamp(12px, 2.5vw, 16px); font-weight: 600; color: rgba(255,255,255,0.6); margin-bottom: 2px; }
.scenario-gap { font-size: clamp(7px, 1.5vw, 9px); color: rgba(183,199,223,0.2); }

/* ── Passed prediction dates ───────────────────────────────────── */
.prediction-date.passed,
.scenario-date.passed {
  text-decoration: line-through;
  color: rgba(255,80,80,0.5);
}

.prediction-passed-indicator,
.scenario-passed-indicator {
  display: inline-block;
  color: rgba(255,80,80,0.7);
  font-size: 1.2em;
  margin-left: 8px;
  vertical-align: middle;
}

.scenario-card.passed {
  opacity: 0.6;
  border-color: rgba(255,80,80,0.15);
}

.scenario-card.passed .scenario-label {
  color: rgba(255,80,80,0.3);
}

.prediction-card.passed {
  border-color: rgba(255,80,80,0.15);
}

.prediction-card.passed .prediction-label {
  color: rgba(255,80,80,0.3);
}