/* style.css — Final polished UI with multi-level celebrations */
/* --- variables & reset --- */
:root{
  --bg1:#0f172a; --bg2:#0b1220;
  --accent:#7c3aed; --accent-2:#06b6d4;
  --glass:rgba(255,255,255,0.06); --muted:rgba(255,255,255,0.6);
  --ok:#21bf73; --bad:#ff6b6b; --gold:#ffd166;
}
*{box-sizing:border-box}

/* --- Body layout adjustment for fixed footer --- */
html, body{height:100%}
body{
  display: flex;
  flex-direction: column; /* vertical stacking */
  min-height: 100vh;      /* full viewport height */
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:24px;
}

/* layout */
.container{
  flex:1; /* takes remaining vertical space to push footer down */
  width:100%;
  max-width:980px;
  display:grid;
  gap:18px;
}

/* card */
.card{ background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
 border-radius:14px; padding:22px; box-shadow:0 8px 30px rgba(2,6,23,0.6); backdrop-filter:blur(8px);
 transition: transform .45s, opacity .4s; }

/* login */
#loginSection{ max-width:420px; margin:0 auto; text-align:center; }
#loginSection h1{ margin:6px 0 12px; font-size:1.4rem; color:var(--accent-2) }
#loginSection input[type="text"]{
  width:100%; padding:12px 14px; border-radius:10px; border:none; font-size:1rem; margin:10px 0;
  background: rgba(255,255,255,0.95); color:#111; outline:none; transition: transform .14s;
}
#loginSection input[readonly]{ background: rgba(255,255,255,0.12); color: var(--muted); }
#loginSection input:focus{ transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }

.btn{ display:inline-block; padding:10px 16px; border-radius:10px; border:none; cursor:pointer; font-weight:600; transition: transform .2s, box-shadow .2s, opacity .15s; }
.btn.primary{ background: linear-gradient(90deg,var(--accent),#5b21b6); color:#fff; box-shadow: 0 8px 20px rgba(124,58,237,0.14); }
.btn:active{ transform: translateY(1px) } .btn[disabled]{ opacity:.55; cursor:not-allowed }

.muted-hr{ border:0; border-top:1px dashed rgba(255,255,255,0.06); margin:14px 0 } .muted{ color:var(--muted); font-size:0.85rem }

/* quiz */
#quizApp{ max-width:820px; margin:0 auto; text-align:right; }
.quiz-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.quiz-header .left{ display:flex; gap:10px; align-items:center; }
.badge{ background: rgba(255,255,255,0.06); padding:6px 10px; border-radius:999px; font-size:0.85rem; color:var(--muted) }
.timers{ display:flex; gap:10px; align-items:center; color:var(--muted) } .timer{ font-size:0.9rem; margin-left:6px; }

/* question & options */
.question{ font-size:1.2rem; margin:6px 0 12px; color:#fff; }
.options-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.option{
  background: rgba(255,255,255,0.95); color:#111; padding:12px 14px; border-radius:10px; cursor:pointer;
  font-weight:600; box-shadow: 0 6px 16px rgba(2,6,23,0.3); user-select:none; position:relative; overflow:hidden;
  transition: transform .18s, box-shadow .18s, background .18s, opacity .18s;
}
.option:hover{ transform: translateY(-4px); box-shadow: 0 12px 26px rgba(2,6,23,0.35) }
.option.disabled{ pointer-events:none; opacity:0.86; transform:none; box-shadow: none }

/* correct / wrong */
.option.correct{ background: linear-gradient(90deg,var(--ok), #61e6a6); color:#063a1c; box-shadow:0 10px 30px rgba(33,191,115,0.18); }
.option.wrong{ background: linear-gradient(90deg,var(--bad), #ff9b9b); color:#400; box-shadow:0 10px 30px rgba(255,107,107,0.18); }

/* ripple */
.option::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle, rgba(255,255,255,0.6) 10%, transparent 10.5%); background-position:center; background-repeat:no-repeat; transform:scale(0); opacity:0; transition: transform .7s, opacity .7s; }
.option:active::after{ transform: scale(25); opacity:1; transition:0s; }

/* navigation */
.navigation{ display:flex; justify-content:center; gap:10px; margin-top:6px }

/* fireworks container */
.fireworks{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:9999; display:flex; align-items:flex-start; justify-content:center }
.confetti{ position:absolute; width:10px; height:18px; opacity:0.95; transform-origin:center; animation: confettiFall linear forwards; border-radius:2px; }
@keyframes confettiFall{ 0%{ transform: translateY(-10vh) rotate(0deg) } 100%{ transform: translateY(110vh) rotate(540deg); opacity:0 } }

/* RESULT MODAL */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:10000; background:rgba(2,6,23,0.6); backdrop-filter: blur(4px); }
.modal.hidden{ display:none } .modal-card{ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border-radius:14px; padding:22px; width:92%; max-width:520px; text-align:center; box-shadow: 0 20px 60px rgba(2,6,23,0.7); transform: translateY(-10px); animation: modalIn .45s ease forwards; }
@keyframes modalIn{ from{ opacity:0; transform: translateY(-24px) scale(.98) } to{ opacity:1; transform: translateY(0) scale(1) } }

.modal-emoji{ font-size:48px; margin-bottom:8px; transform: translateY(-6px); } .modal-title{ font-size:1.3rem; margin:6px 0 10px; color:#fff; } .modal-message{ font-size:1.05rem; margin:6px 0; color:var(--muted); }

/* animated headline for "Better luck next time" */
.modal-message.bad{ font-weight:800; font-size:1.25rem; color: transparent; background: linear-gradient(90deg, #ffd166, #fca311); -webkit-background-clip:text; background-clip:text; animation: popPulse 1.6s ease-in-out; }
@keyframes popPulse{ 0%{ transform: scale(.96); opacity:0 } 40%{ transform: scale(1.06); opacity:1 } 70%{ transform: scale(.98) } 100%{ transform: scale(1) } }

/* success title look */
.modal-message.good{ font-weight:800; font-size:1.25rem; color: transparent; background: linear-gradient(90deg, #7ee787, #06d6a0); -webkit-background-clip:text; background-clip:text; animation: floatUp 1.2s ease; }
@keyframes floatUp{ from{ transform: translateY(6px); opacity:0 } to{ transform: translateY(0); opacity:1 } }

/* VIP special */
.vip-glow{ box-shadow: 0 0 40px rgba(255,215,0,0.18), 0 0 80px rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.12); }

/* modal actions */
.modal-actions{ display:flex; gap:10px; justify-content:center; margin-top:14px }

/* responsive */
@media (max-width:720px){ body{ padding:14px } .card{ padding:16px } .question{ font-size:1.05rem } #loginSection input{ font-size:0.95rem } }

/* --- Footer fix at bottom --- */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  text-align: center;
  padding: 12px 0;
  font-size: 0.9rem;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
  z-index: 5000;
}