/* ============================================================
   result.css
   Dashboard Hasil Akhir: grade glow, statistik, evaluasi
   per kategori, dan tombol Main Lagi.
   ============================================================ */

/* ── Result Screen Alignment ── */
#screen-result {
  text-align: center;
}

/* ── Grade Display ── */
.result-glow {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  font-size: 3.2rem;
  margin: 8px 0;
}

.result-grade-S { color: var(--yellow); text-shadow: 0 0 30px rgba(255,214,0,.6); }
.result-grade-A { color: var(--green);  text-shadow: 0 0 30px rgba(0,255,157,.5); }
.result-grade-B { color: var(--accent); text-shadow: 0 0 30px rgba(0,212,255,.5); }
.result-grade-C { color: var(--accent2);text-shadow: 0 0 20px rgba(255,107,53,.4); }
.result-grade-D { color: var(--red);    text-shadow: 0 0 20px rgba(255,51,102,.4); }

/* ── Result Title & Message ── */
.result-title {
  font-family: 'Orbitron', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.result-msg {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* ── Stat Cards ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 10px;
}

.stat-card .s-val {
  font-family: 'Orbitron', monospace;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}

.stat-card .s-lbl {
  font-size: .7rem;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Category Evaluation Cards ── */
.eval-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.eval-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  font-size: .8rem;
}

.eval-card .e-cat {
  font-family: 'Orbitron', monospace;
  font-size: .7rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.eval-card.A .e-cat { color: var(--cat-a); }
.eval-card.B .e-cat { color: var(--cat-b); }
.eval-card.C .e-cat { color: var(--cat-c); }

.eval-card .e-score {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.eval-card .e-note {
  font-size: .7rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Replay Button ── */
.replay-btn {
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 13px 32px;
  color: var(--accent);
  font-family: 'Orbitron', monospace;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .08em;
  transition: background .2s, transform .15s;
}

.replay-btn:hover {
  background: rgba(0,212,255,.1);
  transform: translateY(-2px);
}