/* Extra styles for the quiz subpage (keeps the main page intact) */

.quiz-top-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:14px;
}

.soft-btn{
  border:none;
  cursor:pointer;
  padding:12px 14px;
  border-radius:14px;
  color:#e9e9ee;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
  transition: transform .2s ease, background .2s ease;
}
.soft-btn:hover{ transform: translateY(-1px); background:rgba(255,255,255,.11) }

.btn-strong{
  border:none;
  cursor:pointer;
  padding:12px 16px;
  border-radius:14px;
  font-weight:800;
  color:#10131c;
  background:linear-gradient(135deg,#ff66b3,#ff8ad0);
  box-shadow:0 10px 26px rgba(255,102,179,.28);
}
.btn-strong:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none }

.quiz-wrap{ max-width:1100px; margin:0 auto; padding: 8px 14px 50px; }

.quiz-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:18px 16px;
  box-shadow:0 14px 44px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}

.progress{
  height:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:14px;
}
.bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#ff66b3,#7ecef5);
  transition: width .25s ease;
}

.quiz-title{ margin:4px 0 4px; font-size:clamp(18px, 3.4vw, 26px); }
.quiz-sub{ margin:0 0 14px; opacity:.86; }

.q{ padding: 10px 8px 2px; }
.q-title{ margin:0 0 10px; font-weight:800; }

.opt{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  margin:10px 0;
  cursor:pointer;
  user-select:none;
  transition: transform .15s ease, background .15s ease;
}
.opt:hover{ transform: translateY(-1px); background:rgba(255,255,255,.09) }
.opt input{ margin-top:3px; }

.nav{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 12px 8px 4px;
}

.result-card{
  margin-top:16px;
  background:radial-gradient(900px 500px at 20% 10%, rgba(255,102,179,.14), transparent 60%),
             rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:18px 16px;
  backdrop-filter: blur(6px);
  box-shadow:0 14px 44px rgba(0,0,0,.25);
}

.result-title{ margin:0 0 6px; font-size:clamp(18px, 3.4vw, 28px); }
.result-text{ margin:0; opacity:.92; line-height:1.55; }

.result-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.secret, .ritual{
  margin-top:14px;
  padding:14px 14px;
  border-radius:18px;
  background:rgba(16,19,28,.55);
  border:1px solid rgba(255,255,255,.10);
}

.secret-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,102,179,.16);
  border:1px solid rgba(255,102,179,.28);
  margin-bottom:10px;
}

@media (min-width:820px){
  .quiz-card, .result-card{ padding:22px 22px; }
  .q{ padding: 14px 10px 2px; }
}