.quiz-card-host{
  margin:12px 0 6px;
  position:relative;
}

.quiz-card{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:14px;
  border-radius:24px;
  border:1px solid rgba(139,92,246,.18);
  background:
    radial-gradient(circle at 100% 0%,rgba(34,211,238,.1),transparent 30%),
    radial-gradient(circle at 0% 100%,rgba(139,92,246,.12),transparent 42%),
    linear-gradient(160deg,rgba(19,15,35,.98),rgba(10,8,20,.99));
  box-shadow:
    0 12px 28px rgba(4,4,10,.34),
    0 0 0 1px rgba(139,92,246,.05),
    0 10px 22px rgba(139,92,246,.1);
  animation:quizCardReveal .28s cubic-bezier(.22,1,.36,1);
}

.quiz-card::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(199,181,253,.35),transparent);
}

.quiz-card::after{
  content:'';
  position:absolute;
  right:-48px;
  top:-40px;
  width:140px;
  height:140px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(139,92,246,.18),transparent 66%);
  filter:blur(14px);
  pointer-events:none;
}

.quiz-card--live{
  border-color:rgba(34,211,238,.18);
}

.quiz-card--answered{
  border-color:rgba(82,229,138,.18);
}

.quiz-card--blocked,
.quiz-card--unavailable{
  border-color:rgba(255,255,255,.08);
}

.quiz-card__shell{
  position:relative;
  z-index:1;
  display:grid;
  gap:12px;
}

.quiz-card__topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.quiz-card__signals{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.quiz-card__promo{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  background:rgba(139,92,246,.12);
  border:1px solid rgba(139,92,246,.22);
  color:#f1eaff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
}

.quiz-card__promo--ghost{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
  color:#d8d2f6;
}

.quiz-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:#efeaff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

.quiz-card__badge--live{
  border-color:rgba(34,211,238,.22);
  background:rgba(34,211,238,.12);
  color:#defcff;
}

.quiz-card__badge--answered{
  border-color:rgba(82,229,138,.18);
  background:rgba(82,229,138,.1);
  color:#ddffe9;
}

.quiz-card__board{
  display:grid;
  gap:10px;
}

.quiz-card__prompt{
  padding:12px;
  border-radius:18px;
  background:linear-gradient(150deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.quiz-card__prompt-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.quiz-card__prompt-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9e95ca;
}

.quiz-card__difficulty{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#f3ecff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.quiz-card__question{
  font-size:16px;
  line-height:1.32;
  font-weight:700;
  color:#fff;
}

.quiz-card__options{
  display:grid;
  gap:8px;
}

.quiz-card__option{
  width:100%;
  min-height:50px;
  padding:11px 12px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:10px;
  border:none;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  color:#f6f2ff;
  font:inherit;
  text-align:left;
  transition:transform .18s cubic-bezier(.22,1,.36,1),background .18s,border-color .18s,box-shadow .18s,opacity .18s;
  cursor:pointer;
  will-change:transform, box-shadow;
  touch-action:manipulation;
}

.quiz-card__option:active{
  transform:scale(.96);
  box-shadow:0 10px 22px rgba(139,92,246,.14);
}

.quiz-card__option:hover{
  border-color:rgba(139,92,246,.22);
  background:rgba(139,92,246,.09);
}

.quiz-card__option[disabled]{
  cursor:default;
}

.quiz-card__option.is-selected{
  border-color:rgba(34,211,238,.28);
  background:rgba(34,211,238,.12);
  box-shadow:0 8px 18px rgba(34,211,238,.08),0 0 0 1px rgba(34,211,238,.12);
}

.quiz-card__option.is-disabled:not(.is-correct):not(.is-wrong){
  opacity:.58;
}

.quiz-card__option.is-correct{
  background:linear-gradient(145deg,rgba(0,200,83,.22),rgba(0,200,83,.1));
  border-color:rgba(0,200,83,.42);
  box-shadow:0 0 0 1px rgba(0,200,83,.1),0 0 18px rgba(0,200,83,.34),0 10px 22px rgba(0,200,83,.12);
}

.quiz-card__option.is-wrong{
  background:linear-gradient(145deg,rgba(255,82,82,.2),rgba(255,82,82,.08));
  border-color:rgba(255,82,82,.42);
  box-shadow:0 0 0 1px rgba(255,82,82,.08),0 0 14px rgba(255,82,82,.18);
}

.quiz-card__option.is-pop{
  animation:quizCardPop .28s ease-out;
}

.quiz-card__option.is-shake{
  animation:quizCardWrongShake .34s ease-out, quizCardWrongFade .34s ease-out;
}

.quiz-card__option-index{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:#cfc7ee;
  font-size:11px;
  font-weight:800;
}

.quiz-card__option-text{
  min-width:0;
  font-size:13px;
  line-height:1.4;
  font-weight:600;
}

.quiz-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.quiz-card__note{
  font-size:11px;
  line-height:1.45;
  color:#aca3d3;
}

.quiz-card__meta{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#e8e2ff;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.quiz-card__state{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(150deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  display:grid;
  gap:8px;
}

.quiz-card__state-title{
  font-family:'Syne',sans-serif;
  font-size:17px;
  line-height:1.08;
  color:#fff;
}

.quiz-card__state-copy{
  font-size:12px;
  line-height:1.5;
  color:#c0b8e2;
}

.quiz-card__statusline{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(150deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}

.quiz-card__statusline.is-success{
  border-color:rgba(0,200,83,.24);
  background:linear-gradient(150deg,rgba(0,200,83,.12),rgba(255,255,255,.02));
  box-shadow:0 0 18px rgba(0,200,83,.14);
  animation:quizStatusRise .34s ease-out;
}

.quiz-card__statusline.is-error{
  border-color:rgba(255,82,82,.2);
  background:linear-gradient(150deg,rgba(255,82,82,.1),rgba(255,255,255,.02));
  animation:quizStatusRise .3s ease-out;
}

.quiz-card__statusline-copy{
  display:grid;
  gap:4px;
}

.quiz-card__statusline-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#f4f1ff;
}

.quiz-card__statusline-detail{
  font-size:12px;
  line-height:1.45;
  color:#c9c1eb;
}

.quiz-card__statusline.is-success .quiz-card__statusline-detail{
  color:#e6ffee;
}

.quiz-card__statusline.is-error .quiz-card__statusline-detail{
  color:#ffe0e0;
}

.quiz-card__loading{
  display:grid;
  gap:8px;
}

.quiz-card__skeleton{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:rgba(255,255,255,.05);
}

.quiz-card__skeleton::after{
  content:'';
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  animation:quizCardShimmer 1.25s ease-in-out infinite;
}

.quiz-card__skeleton--question{
  height:72px;
}

.quiz-card__skeleton--option{
  height:50px;
}

.quiz-card__confetti{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:4;
}

.quiz-card-host--success .quiz-card{
  animation:quizSurfaceSuccess .42s ease-out;
}

.quiz-card-host--error .quiz-card{
  animation:quizSurfaceError .38s ease-out;
}

@keyframes quizCardReveal{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes quizCardShimmer{
  100%{
    transform:translateX(100%);
  }
}

@keyframes quizCardPop{
  0%{
    transform:scale(1);
  }
  40%{
    transform:scale(1.05);
  }
  100%{
    transform:scale(1);
  }
}

@keyframes quizCardWrongShake{
  0%{
    transform:translateX(0);
  }
  20%{
    transform:translateX(-4px);
  }
  40%{
    transform:translateX(4px);
  }
  60%{
    transform:translateX(-4px);
  }
  80%{
    transform:translateX(4px);
  }
  100%{
    transform:translateX(0);
  }
}

@keyframes quizCardWrongFade{
  0%{
    opacity:1;
  }
  45%{
    opacity:.86;
  }
  100%{
    opacity:1;
  }
}

@keyframes quizStatusRise{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes quizSurfaceSuccess{
  0%{
    box-shadow:0 0 0 0 rgba(0,200,83,0);
  }
  35%{
    box-shadow:0 0 0 1px rgba(0,200,83,.16),0 0 24px rgba(0,200,83,.22);
  }
  100%{
    box-shadow:none;
  }
}

@keyframes quizSurfaceError{
  0%{
    transform:translateX(0);
  }
  25%{
    transform:translateX(-3px);
  }
  50%{
    transform:translateX(3px);
  }
  75%{
    transform:translateX(-2px);
  }
  100%{
    transform:translateX(0);
  }
}

@media (max-width:380px){
  .quiz-card{
    padding:12px;
    border-radius:20px;
  }

  .quiz-card__question{
    font-size:15px;
  }

  .quiz-card__option{
    min-height:48px;
    padding:10px 11px;
    gap:8px;
  }

  .quiz-card__option-index{
    width:28px;
    height:28px;
  }

  .quiz-card__signals{
    gap:6px;
  }

  .quiz-card__promo,
  .quiz-card__badge{
    min-height:28px;
    padding:0 10px;
    font-size:9px;
  }

  .quiz-card__footer{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media (prefers-reduced-motion:reduce){
  .quiz-card,
  .quiz-card__option,
  .quiz-card__skeleton::after,
  .quiz-card__statusline,
  .quiz-card__confetti{
    animation:none !important;
    transition:none !important;
  }
}