/* Discord Inspired Theme for Live Quiz Interactive Platform */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Outfit:wght@600;700;800;900&display=swap');

:root {
  --discord-blurple: #5865F2;
  --discord-blurple-hover: #4752C4;
  --discord-dark: #313338;
  --discord-darker: #2b2d31;
  --discord-darkest: #1e1f22;
  --discord-green: #57F287;
  --discord-yellow: #FEE75C;
  --discord-fuchsia: #EB459E;
  --discord-red: #ED4245;
  --discord-cyan: #00b0f4;

  /* Card Option Colors (Clean Discord Gamified Palette) */
  --opt-a: #5865F2; /* Blurple */
  --opt-b: #00A8FC; /* Cyan */
  --opt-c: #FEE75C; /* Amber */
  --opt-d: #57F287; /* Emerald */
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--discord-darkest);
  color: #f2f3f5;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
}

.font-heading {
  font-family: 'Outfit', sans-serif;
}

/* Modern Discord Option Buttons (QCM) */
.opt-card {
  position: relative;
  background-color: #2b2d31;
  border: 2px solid #383a40;
  border-radius: 1.25rem;
  padding: 1.25rem;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.opt-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #5865F2;
  box-shadow: 0 10px 15px -3px rgba(88, 101, 242, 0.2);
}

.opt-card:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.opt-badge-a {
  background: linear-gradient(135deg, #5865F2, #7983f5);
  color: white;
}
.opt-badge-b {
  background: linear-gradient(135deg, #00A8FC, #38c3ff);
  color: #0b192c;
}
.opt-badge-c {
  background: linear-gradient(135deg, #FEE75C, #fff089);
  color: #1e1f22;
}
.opt-badge-d {
  background: linear-gradient(135deg, #57F287, #7df5a3);
  color: #0b2212;
}

/* Free Text Written Response Area */
.textarea-answer {
  background-color: #1e1f22;
  border: 2px solid #3f4147;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  color: #ffffff;
  font-size: 1.125rem;
  line-height: 1.6;
  outline: none;
  transition: all 0.2s ease;
  width: 100%;
  resize: none;
}

.textarea-answer:focus {
  border-color: var(--discord-blurple);
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.25);
}

/* Glow effects */
.glow-blurple {
  box-shadow: 0 0 35px rgba(88, 101, 242, 0.35);
}

.glow-podium-gold {
  box-shadow: 0 0 45px rgba(254, 231, 92, 0.45);
}

/* Pulse scale animation */
@keyframes pulse-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.animate-pulse-scale {
  animation: pulse-scale 2s infinite ease-in-out;
}

@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.animate-float {
  animation: float-badge 3s ease-in-out infinite;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #1e1f22;
}
::-webkit-scrollbar-thumb {
  background: #3f4147;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #5865f2;
}