/* ============================================
   Century Birthday - Summary (Elegant)
   ============================================ */

#section-summary {
  position: fixed; inset: 0; z-index: 200;
  background: #0a0818;
}

#summary-container {
  width: 100%; height: 100%;
  overflow-y: auto;
  display: flex; justify-content: center;
  padding: 80px 24px 40px;
}

#summary-inner {
  max-width: 680px; width: 100%;
}

/* --- Header --- */
#summary-header {
  text-align: center; margin-bottom: 40px;
}
#summary-title {
  font-family: var(--font-display); font-size: 2rem;
  color: var(--color-gold-light); letter-spacing: 0.1em;
  margin-bottom: 4px;
}
#summary-subtitle {
  font-family: var(--font-body); font-size: 0.85rem;
  color: rgba(200,180,150,0.4); letter-spacing: 0.15em;
}

/* --- Cards --- */
#summary-cards {
  display: flex; gap: 24px; margin-bottom: 36px;
}
.sum-card {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 28px 24px;
}

/* --- Achievements --- */
.ach-row {
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ach-row:last-child { border-bottom: none; }
.ach-header {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px;
}
.ach-icon { font-size: 0.9rem; opacity: 0.6; }
.ach-title {
  font-family: var(--font-display); font-size: 0.95rem;
  color: var(--color-gold); letter-spacing: 0.04em;
}
.ach-grade {
  margin-left: auto; font-family: var(--font-display);
  font-size: 0.88rem; font-weight: 700; color: var(--color-gold-light);
  background: rgba(240,215,140,0.08); padding: 2px 8px; border-radius: 4px;
}
.ach-detail {
  font-family: var(--font-body); font-size: 0.85rem;
  color: rgba(200,190,210,0.5); line-height: 1.6;
}

/* --- Fun Stats --- */
.stat-item {
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--font-body); font-size: 0.88rem;
  color: rgba(190,180,210,0.6); line-height: 1.6;
}
.stat-item:last-child { border-bottom: none; }
.stat-item span { color: var(--color-gold-light); font-weight: 600; }

/* --- Verdict --- */
#summary-verdict {
  text-align: center;
}
#final-comment {
  font-family: var(--font-body); font-size: 1.1rem;
  color: rgba(200,190,210,0.7); font-style: italic;
  line-height: 2; margin-bottom: 24px; max-width: 500px;
  margin-left: auto; margin-right: auto;
}
#final-comment b { color: var(--color-gold-light); font-weight: 600; }

/* --- Achievement Grid --- */
#achievement-grid {
  margin-top: 36px;
}
.ach-grid {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.ach-cell {
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.015);
  font-family: var(--font-body); font-size: 0.75rem;
  color: rgba(200,190,210,0.25); display: flex; align-items: center; gap: 6px;
  transition: all 0.3s;
}
.ach-cell.done {
  color: rgba(240,215,140,0.8); border-color: rgba(212,168,83,0.3);
  background: rgba(240,215,140,0.05);
}
.ach-cell-emoji { font-size: 0.9rem; opacity: 0.4; }
.ach-cell.done .ach-cell-emoji { opacity: 1; }
.ach-cell-name { white-space: nowrap; }

/* --- Responsive --- */
@media (max-width: 640px) {
  #summary-cards { flex-direction: column; }
  #summary-container { padding: 60px 16px 30px; }
}