:root{
  --primary:#0ac9c9;
  --secondary:#0a3d62;
  --dark:#0b132b;
  --light:#eafcff;
  --success:#2ecc71;
  --danger:#e74c3c;
}

*{box-sizing:border-box;font-family:'Segoe UI',sans-serif}

body{
  margin:0;
  background:#050b18;
  color:white;
}

/* ---------- WELCOME SCREEN ---------- */
#welcome{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  overflow:hidden;
}

.bg-slider{
  position:absolute;
  inset:0;
  animation:slide 12s infinite;
  background-size:cover;
  background-position:center;
  filter:brightness(0.35);
}

@keyframes slide{
  0%{background-image:url('https://images.unsplash.com/photo-1580281657527-47aaf3f98f07')}
  33%{background-image:url('https://images.unsplash.com/photo-1579684385127-1ef15d508118')}
  66%{background-image:url('https://images.unsplash.com/photo-1582719478185-2f8f6a4b4a3d')}
}

.welcome-card{
  z-index:2;
  background:rgba(5,15,40,0.85);
  padding:30px;
  width:350px;
  border-radius:20px;
  box-shadow:0 0 30px rgba(0,255,255,.3);
  text-align:center;
}

.welcome-card h1{
  color:var(--primary);
  font-size:22px;
}

select,input,button{
  width:100%;
  margin:8px 0;
  padding:10px;
  border-radius:8px;
  border:none;
}

button{
  background:linear-gradient(135deg,var(--primary),#00f5ff);
  color:#000;
  font-weight:bold;
  cursor:pointer;
}

.socials{
  margin-top:10px;
  font-size:14px;
}

footer{
  position:absolute;
  bottom:10px;
  width:100%;
  text-align:center;
  font-size:12px;
  color:#aaa;
}

/* ---------- EXAM PAGE ---------- */
#exam{
  display:none;
  padding:20px;
}

.top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.timer{
  font-weight:bold;
  color:var(--primary);
}

.exam-container{
  display:grid;
  grid-template-columns:3fr 1fr;
  gap:15px;
  margin-top:15px;
}

.question-box{
  background:#0b1d3a;
  padding:20px;
  border-radius:15px;
}

.option{
  margin:8px 0;
}

.nav-box{
  background:#08172f;
  padding:10px;
  border-radius:15px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
}

.nav-box button{
  padding:8px;
  background:#1a2b4c;
  color:white;
}

.answered{
  background:var(--primary)!important;
}

.nav-arrows{
  margin-top:10px;
  display:flex;
  gap:10px;
}

/* ---------- RESULT PAGE ---------- */
#result,#certificate{
  display:none;
  padding:30px;
  text-align:center;
}

.correct{color:var(--success)}
.wrong{color:var(--danger)}

/* ---------- CERTIFICATE ---------- */
.cert{
  background:linear-gradient(135deg,#ffffff,#e0ffff);
  color:#000;
  padding:30px;
  border-radius:20px;
  max-width:500px;
  margin:auto;
  box-shadow:0 0 40px gold;
}

/* Certificate container - make sure it's visible and centered */
.cert {
  position: relative;
  max-width: 800px;
  margin: 40px auto;
  padding: 40px;
  background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
  z-index: 10;
  border: 8px solid #ffd700; /* gold border for certificate feel */
}

/* Confetti particles - pure CSS animated falling confetti */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5; /* behind the certificate text but above background */
}

/* Individual confetti piece */
.confetti::before,
.confetti::after,
.confetti span {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ff3366; /* random colors below */
  border-radius: 50% 50% 0 0 / 60% 60% 40% 40%;
  animation: fall linear infinite;
  opacity: 0.9;
}

/* Multiple pieces with different colors, sizes, delays, positions */
.confetti::before {
  background: #ff3366;
  left: 10%;
  animation-duration: 4s;
  animation-delay: 0s;
  width: 14px;
  height: 18px;
  border-radius: 20% 80% 30% 70%;
}

.confetti::after {
  background: #33ff99;
  left: 25%;
  animation-duration: 5.5s;
  animation-delay: 1.2s;
  width: 10px;
  height: 16px;
  border-radius: 60% 40% 70% 30%;
}

.confetti span:nth-child(1) {
  background: #ffd700;
  left: 40%;
  animation-duration: 6s;
  animation-delay: 0.5s;
}

.confetti span:nth-child(2) {
  background: #6a5acd;
  left: 55%;
  animation-duration: 4.8s;
  animation-delay: 2s;
  width: 16px;
  height: 12px;
}

.confetti span:nth-child(3) {
  background: #ff6b6b;
  left: 70%;
  animation-duration: 7s;
  animation-delay: 1.8s;
}

.confetti span:nth-child(4) {
  background: #4ecdc4;
  left: 85%;
  animation-duration: 5.2s;
  animation-delay: 0.8s;
  border-radius: 0 50% 50% 0;
}

/* Falling animation */
@keyframes fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
  }
}

/* Optional: add more confetti pieces by duplicating <span> in HTML or using more pseudo-elements */

.confetti span,
.confetti::before,
.confetti::after {
  animation: fall 5s linear infinite, spin 3s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}






.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--color, #ff3366);
  opacity: 0.9;
  animation: fall 4s linear infinite;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
}

/* Multiple pieces with different properties */
.confetti-piece:nth-child(odd)  { background: #33ff99; animation-duration: 5s; }
.confetti-piece:nth-child(even) { background: #ffd700; animation-duration: 6s; }
.confetti-piece:nth-child(3n)   { background: #6a5acd; width: 14px; height: 6px; }
.confetti-piece:nth-child(4n)   { background: #ff6b6b; animation-delay: 0.5s; }

/* More particles – duplicate this block or use JS to generate */
.confetti-piece:nth-child(5n)   { left: 15%; animation-delay: 0.8s; }
.confetti-piece:nth-child(6n)   { left: 30%; animation-duration: 7s; }
.confetti-piece:nth-child(7n)   { left: 45%; background: #4ecdc4; }
.confetti-piece:nth-child(8n)   { left: 60%; animation-delay: 1.2s; }
.confetti-piece:nth-child(9n)   { left: 75%; width: 8px; height: 12px; }
.confetti-piece:nth-child(10n)  { left: 90%; background: #ffcc00; }

@keyframes fall {
  0%   { transform: translateY(-100vh) rotate(0deg); }
  100% { transform: translateY(120vh) rotate(1080deg); }
}


.confetti-ribbon {
  position: absolute;
  width: 4px;
  height: 80px;
  background: linear-gradient(to bottom, #ff3366, transparent);
  opacity: 0.7;
  transform-origin: top center;
  animation: ribbon-fall 6s linear infinite;
  border-radius: 50% 50% 0 0;
}

.confetti-ribbon:nth-child(odd)  { background: linear-gradient(to bottom, #33ff99, transparent); animation-duration: 7s; }
.confetti-ribbon:nth-child(even) { background: linear-gradient(to bottom, #ffd700, transparent); animation-duration: 8s; }

@keyframes ribbon-fall {
  0%   { transform: translateY(-120vh) rotate(0deg) skew(10deg); }
  100% { transform: translateY(120vh) rotate(720deg) skew(-10deg); }
}


.confetti-balloon {
  position: absolute;
  width: 28px;
  height: 38px;
  background: radial-gradient(circle at 30% 30%, white, #ff3366 40%, #cc0066);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: balloon-rise 8s ease-in-out infinite;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.confetti-balloon::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 2px;
  height: 40px;
  background: #333;
  transform: translateX(-50%);
}

@keyframes balloon-rise {
  0%   { transform: translateY(120vh) scale(0.6) rotate(-15deg); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-20vh) scale(1.1) rotate(15deg); opacity: 0; }
}



.glow-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  box-shadow: 
    0 0 8px #fff,
    0 0 16px #ff3366,
    0 0 24px #33ff99;
  animation: sparkle 3s ease-in-out infinite;
  opacity: 0;
}

.glow-particle:nth-child(odd)  { box-shadow: 0 0 12px #ffd700, 0 0 20px #ffcc00; }
.glow-particle:nth-child(even) { box-shadow: 0 0 12px #6a5acd, 0 0 20px #7b68ee; }

@keyframes sparkle {
  0%   { opacity: 0; transform: scale(0.5) translateY(0); }
  50%  { opacity: 1; transform: scale(1.5) translateY(-30px); }
  100% { opacity: 0; transform: scale(0.5) translateY(-60px); }
}


.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

/* Then add all the classes above: .confetti-piece, .confetti-ribbon, .confetti-balloon, .glow-particle */