*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

body{
background:linear-gradient(135deg,#5B5CF0,#7C3AED);
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
}

.quizContainer{
width:100%;
max-width:900px;
background:rgba(255,255,255,.15);
backdrop-filter:blur(18px);
border-radius:28px;
padding:35px;
box-shadow:0 20px 50px rgba(0,0,0,.25);
text-align:center;
color:#fff;
}

#quizTitle{
font-size:2.4rem;
font-weight:800;
margin-bottom:10px;
}

#quizLevel{
font-size:1.1rem;
opacity:.9;
margin-bottom:35px;
}

.levelGrid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.level{
padding:22px;
border:none;
border-radius:22px;
font-size:20px;
font-weight:700;
cursor:pointer;
transition:.35s;
color:#fff;
}

.level:hover{
transform:translateY(-8px) scale(1.03);
}

.easy{
background:#22c55e;
}

.medium{
background:#3b82f6;
}

.hard{
background:#f97316;
}

.tooHard{
background:#ef4444;
}

.extreme{
background:#111827;
}

.levelInfo{
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.25);
font-size:15px;
font-weight:600;
line-height:1.8;
opacity:.95;
}

.level h2{
margin-bottom:10px;
font-size:26px;
}

.level p{
margin-bottom:8px;
font-size:17px;
font-weight:700;
}

.level span{
display:block;
font-size:14px;
opacity:.9;
}

/* ===== PREMIUM QUIZ LEVEL SELECTOR ===== */
body{
  background:
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.20),transparent 24%),
    radial-gradient(circle at 88% 90%,rgba(6,182,212,.18),transparent 24%),
    linear-gradient(135deg,#4338ca,#7c3aed 55%,#2563eb);
}
.quizContainer{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 30px 80px rgba(15,23,42,.35);
}
.quizContainer::before{
  content:"";
  position:absolute;inset:-2px;
  border-radius:30px;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.20),transparent 35%,rgba(255,255,255,.08));
}
#quizTitle{position:relative;text-shadow:0 6px 25px rgba(0,0,0,.20)}
.level{
  position:relative;
  overflow:hidden;
  min-height:220px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 35px rgba(0,0,0,.16);
}
.level::after{
  content:"";
  position:absolute;top:0;left:-120%;width:70%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg);
  transition:.7s;
}
.level:hover::after{left:140%}
.level.locked{
  filter:saturate(.55);
}
.lockBadge,.recommended{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  margin-bottom:12px;
  background:rgba(0,0,0,.22);
}
.recommended{background:rgba(255,255,255,.22)}
.levelInfo{font-size:14px}
@media(max-width:600px){
  .quizContainer{padding:24px 16px}
  #quizTitle{font-size:2rem}
}