/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --app-bg: #f4f7fb;
  --hero-start: #ffffff;
  --hero-end: #e7f0ff;
}

body.app-shell {
  background:
    radial-gradient(circle at top right, rgba(13, 110, 253, 0.12), transparent 28%),
    linear-gradient(180deg, #fbfcfe 0%, var(--app-bg) 100%);
  min-height: 100vh;
}

.quiz-hero {
  background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
}

.stat-card {
  background: rgba(255, 255, 255, 0.85);
}

.answer-option {
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.answer-option:hover {
  border-color: rgba(13, 110, 253, 0.35);
  box-shadow: 0 0.5rem 1.25rem rgba(13, 110, 253, 0.08);
  transform: translateY(-1px);
}

.sticky-actions {
  position: sticky;
  bottom: 1rem;
}

.result-box {
  background: rgba(13, 110, 253, 0.04);
  border: 1px solid rgba(13, 110, 253, 0.12);
  border-radius: 1rem;
  padding: 1rem;
}