/* Minimal custom styling for the footprint quiz. */
:root{ --sky1:#0a3552; --sky2:#225b79; --accent:#17a673; }

.quiz-body { background: radial-gradient(1200px 800px at 50% 110%, rgba(255,255,255,0.03), transparent 60%),
             linear-gradient(180deg, var(--sky2), var(--sky1));
             min-height:100vh; color:#fff; }
.sky::before, .sky::after { content:""; position:fixed; inset:0; pointer-events:none; }
.sky::before { background: transparent url('../assets/images/stars.svg') repeat; opacity:.35; animation: drift 120s linear infinite; }
.sky::after { background: radial-gradient(circle at 80% -20%, rgba(255,199,97,.35), transparent 40%),
                          radial-gradient(circle at -10% 10%, rgba(78,205,196,.25), transparent 35%);
               mix-blend-mode:screen; }
@keyframes drift{ from{background-position:0 0;} to{background-position:10000px 0;} }

.quiz { padding-top: 7rem; padding-bottom: 4rem; }
.quiz-card { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.15); padding: 1.25rem; backdrop-filter: blur(10px); }

.slide { display:none; }
.slide.active { display:block; animation: fadeUp .45s ease both; }
@keyframes fadeUp { from { opacity:0; transform: translateY(12px);} to { opacity:1; transform:none; } }

.option { border:1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); color:#fff; padding:.85rem 1rem; border-radius:.75rem; cursor:pointer; transition: all .2s ease; }
.option:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.option input { display:none; }
.option.selected { outline:2px solid var(--accent); background: rgba(23,166,115,.15); }

.progress { height: 8px; background: rgba(255,255,255,.15); }
.progress-bar { background: var(--accent); }

.result { text-align:center; }
.earths { display:flex; align-items:center; justify-content:center; gap:.4rem; flex-wrap:wrap; }
.earth { width:56px; height:56px; background:url('../assets/images/earth.svg') center/contain no-repeat; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.earth.half { clip-path: inset(0 50% 0 0); }
.earth.quarter { clip-path: inset(0 75% 0 0); }

.small { opacity:.85 }

/* Responsive */
@media (max-width: 520px){ .earth{width:44px;height:44px;} }