/* MONA Quiz App — Reusable Premium Greek UI Components
   Source of truth for the Apps Script inline override.
   Keep selectors mapped to existing IDs/classes so quiz logic remains untouched.
*/

:root {
  --mona-aegean-950:#030813;
  --mona-aegean-900:#061326;
  --mona-aegean-850:#081A33;
  --mona-aegean-800:#0B2342;
  --mona-aegean-700:#12365F;
  --mona-gold-500:#D7B35A;
  --mona-gold-600:#B98E34;
  --mona-gold-300:#F1D98B;
  --mona-gold-glow:rgba(215,179,90,.25);
  --mona-marble-50:#FBFAF6;
  --mona-marble-100:#F1ECE2;
  --mona-marble-vein:#D8D1C2;
  --mona-ink:#091426;
  --mona-muted:#AEB8C8;
  --mona-success:#78BF7A;
  --mona-danger:#D95F64;
  --quiz-radius-sm:10px;
  --quiz-radius-md:16px;
  --quiz-radius-lg:24px;
  --quiz-shadow-card:0 18px 56px rgba(0,0,0,.34);
  --quiz-shadow-soft:0 12px 34px rgba(0,0,0,.22);
  --quiz-greek-key:linear-gradient(90deg,var(--mona-gold-500) 0 10px,transparent 10px 15px,var(--mona-gold-500) 15px 25px,transparent 25px 30px);
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(215,179,90,.16), transparent 24%),
    radial-gradient(circle at 84% 8%, rgba(18,54,95,.38), transparent 30%),
    linear-gradient(145deg,var(--mona-aegean-950),var(--mona-aegean-900) 52%,#02050c) !important;
  color:var(--mona-marble-50) !important;
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif !important;
  padding:14px !important;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    radial-gradient(circle at 50% -12%, rgba(251,250,246,.11), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px);
  z-index:0;
}

.screen { position:relative; z-index:1; max-width:720px !important; }
.screen.active { animation:quizFadeUp .28s ease both; }
@keyframes quizFadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

#startScreen,
#questionScreen,
#endScreen,
#submittedScreen {
  width:min(100%,720px) !important;
}

#startScreen.active {
  max-width:460px !important;
  padding:22px 20px 20px !important;
  border:1px solid rgba(215,179,90,.40) !important;
  border-radius:var(--quiz-radius-lg) !important;
  background:linear-gradient(180deg,rgba(8,26,51,.86),rgba(3,8,19,.92)) !important;
  box-shadow:var(--quiz-shadow-card) !important;
  overflow:hidden;
}

#startScreen::before,
#questionScreen::before,
#endScreen::before,
#submittedScreen::before {
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:8px;
  height:3px;
  background:var(--quiz-greek-key);
  opacity:.18;
  border-radius:999px;
  pointer-events:none;
}

.logo-area { margin-bottom:12px !important; }
.mona-logo-img {
  width:164px !important;
  max-width:54vw !important;
  border-radius:8px !important;
  filter:drop-shadow(0 8px 28px rgba(215,179,90,.25)) !important;
  margin-bottom:10px !important;
}
.ccg-logo-img {
  height:54px !important;
  max-width:160px !important;
  object-fit:contain !important;
  opacity:.78 !important;
  filter:grayscale(.05) drop-shadow(0 4px 14px rgba(0,0,0,.25)) !important;
}
.medit-divider { margin-bottom:8px !important; max-width:220px !important; }
.medit-line { background:linear-gradient(90deg,transparent,rgba(215,179,90,.62),transparent) !important; }
.medit-icon { color:var(--mona-gold-300) !important; font-size:13px !important; }

.app-title {
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:clamp(2.05rem,9vw,3.4rem) !important;
  line-height:.96 !important;
  color:var(--mona-marble-50) !important;
  text-shadow:0 8px 28px rgba(0,0,0,.48) !important;
  margin-bottom:7px !important;
  letter-spacing:.015em !important;
}
.app-subtitle {
  font-family:'Montserrat',system-ui,sans-serif !important;
  font-size:.68rem !important;
  line-height:1.45 !important;
  color:var(--mona-gold-300) !important;
  text-transform:uppercase !important;
  letter-spacing:.15em !important;
  margin-bottom:18px !important;
}
.select-label {
  font-size:.65rem !important;
  color:var(--mona-gold-300) !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  margin:0 0 8px !important;
}
#staffSelect {
  width:100% !important;
  min-height:48px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  border:1px solid rgba(215,179,90,.48) !important;
  background:rgba(251,250,246,.06) !important;
  color:var(--mona-marble-50) !important;
  outline:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  margin-bottom:12px !important;
}
#staffSelect:focus { border-color:var(--mona-gold-300) !important; box-shadow:0 0 0 3px rgba(215,179,90,.13) !important; }
#staffSelect option { color:#111; }

.btn-gold,
.btn-next {
  border-radius:999px !important;
  min-height:48px !important;
  padding:13px 18px !important;
  font-family:'Montserrat',system-ui,sans-serif !important;
  font-size:.75rem !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease !important;
}
.btn-gold {
  background:linear-gradient(135deg,var(--mona-gold-600),var(--mona-gold-300),var(--mona-gold-500)) !important;
  color:var(--mona-ink) !important;
  border:1px solid rgba(241,217,139,.70) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 24px rgba(215,179,90,.14) !important;
}
.btn-gold:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 16px 34px rgba(0,0,0,.32),0 0 28px rgba(215,179,90,.20) !important; }
.btn-gold:disabled { opacity:.45 !important; background:rgba(255,255,255,.08) !important; color:rgba(251,250,246,.55) !important; border-color:rgba(255,255,255,.10) !important; box-shadow:none !important; }
.btn-next {
  background:rgba(255,255,255,.03) !important;
  color:var(--mona-gold-300) !important;
  border:1px solid rgba(215,179,90,.62) !important;
}
.btn-next:hover { background:rgba(215,179,90,.14) !important; color:var(--mona-marble-50) !important; }

#questionScreen.active,
#endScreen.active,
#submittedScreen.active {
  padding:18px !important;
  border:1px solid rgba(215,179,90,.34) !important;
  border-radius:var(--quiz-radius-lg) !important;
  background:linear-gradient(180deg,rgba(8,26,51,.82),rgba(3,8,19,.90)) !important;
  box-shadow:var(--quiz-shadow-card) !important;
  overflow:hidden;
}
.timer-wrap,.progress-wrap { margin-bottom:10px !important; }
.timer-bar-bg,.progress-bar-bg { height:5px !important; background:rgba(255,255,255,.10) !important; border-radius:999px !important; }
.timer-bar,.progress-bar-fill { height:5px !important; background:linear-gradient(90deg,var(--mona-gold-600),var(--mona-gold-300)) !important; border-radius:999px !important; }
.timer-bar.urgent { background:var(--mona-danger) !important; }
.timer-count,.progress-text { color:var(--mona-muted) !important; font-size:.68rem !important; letter-spacing:.08em !important; }
.timer-count.urgent { color:var(--mona-danger) !important; }
.category-badge {
  background:rgba(215,179,90,.12) !important;
  border:1px solid rgba(215,179,90,.42) !important;
  color:var(--mona-gold-300) !important;
  border-radius:999px !important;
  font-size:.62rem !important;
  padding:5px 11px !important;
  margin:8px 0 14px !important;
}
.question-text {
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:clamp(1.45rem,5.8vw,2.15rem) !important;
  line-height:1.15 !important;
  color:var(--mona-marble-50) !important;
  margin-bottom:18px !important;
  letter-spacing:.005em !important;
}
.answers-grid { gap:9px !important; margin-bottom:14px !important; }
.answer-btn {
  padding:12px 13px !important;
  border-radius:14px !important;
  border:1px solid rgba(215,179,90,.24) !important;
  background:rgba(251,250,246,.07) !important;
  color:var(--mona-marble-50) !important;
  font-size:.95rem !important;
  line-height:1.32 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.answer-btn:not(:disabled):hover { border-color:rgba(215,179,90,.70) !important; background:rgba(215,179,90,.10) !important; }
.answer-btn .letter {
  min-width:30px !important; width:30px !important; height:30px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,var(--mona-gold-600),var(--mona-gold-300)) !important;
  color:var(--mona-ink) !important;
  font-size:.78rem !important;
  font-weight:900 !important;
}
.answer-btn.correct { border-color:rgba(120,191,122,.75) !important; background:rgba(120,191,122,.15) !important; }
.answer-btn.incorrect { border-color:rgba(217,95,100,.75) !important; background:rgba(217,95,100,.14) !important; }
.explanation-box {
  padding:12px 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(215,179,90,.35) !important;
  border-left:3px solid var(--mona-gold-500) !important;
  background:rgba(251,250,246,.07) !important;
  color:var(--mona-muted) !important;
  font-size:.9rem !important;
}
.score-circle-wrap { filter:drop-shadow(0 14px 34px rgba(0,0,0,.28)); }
.score-number { font-family:'Cormorant Garamond',Georgia,serif !important; color:var(--mona-gold-300) !important; }
.grade-text { font-family:'Cormorant Garamond',Georgia,serif !important; color:var(--mona-marble-50) !important; }
.grade-pct,.end-name { color:var(--mona-muted) !important; }
.missed-list {
  border-radius:16px !important;
  border:1px solid rgba(215,179,90,.28) !important;
  background:rgba(251,250,246,.06) !important;
}
.submitted-wrap {
  padding:26px 18px !important;
  border-radius:var(--quiz-radius-lg) !important;
}
.submitted-text { font-family:'Cormorant Garamond',Georgia,serif !important; color:var(--mona-marble-50) !important; }
.submitted-sub { color:var(--mona-muted) !important; }

@media (max-width:480px) {
  body { padding:10px !important; }
  #startScreen.active { padding:18px 16px 18px !important; }
  #questionScreen.active,#endScreen.active,#submittedScreen.active { padding:14px !important; }
  .mona-logo-img { width:144px !important; }
  .ccg-logo-img { height:44px !important; }
  .app-title { font-size:2.25rem !important; }
  .app-subtitle { font-size:.60rem !important; margin-bottom:15px !important; }
  .answer-btn { padding:11px 12px !important; font-size:.9rem !important; }
  .question-text { margin-bottom:15px !important; }
}