/* ===== General ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: #f1f5f9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  padding: 10px;
  transition: background 0.3s, color 0.3s;
}

/* ===== Background Animation ===== */
.bg-animation {
  position: fixed;
  top:0; left:0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.bg-animation span {
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  color: rgba(59, 130, 246, 0.2);
  white-space: nowrap;
  animation: float 10s linear infinite;
}
@keyframes float {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { transform: translateY(-100vh) translateX(100vw); opacity: 0; }
}

/* ===== Modal ===== */
.modal {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  transition: background 0.3s;
}
.modal-content {
  background:#fff;
  padding:20px;
  border-radius:15px;
  text-align:center;
  width:90%;
  max-width:400px;
  box-shadow:0 8px 25px rgba(0,0,0,0.2);
  transition: background 0.3s, color 0.3s;
}

/* ===== Quiz Container ===== */
.quiz-container {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 20px;
  width: 100%;
  max-width: 700px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  z-index:2;
  transition: background 0.3s, color 0.3s;
}
textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px;
  border-radius: 10px;
  margin: 10px 0;
  font-size: 16px;
  resize: vertical;
}

/* #live-users {
  position: fixed;
  bottom: 15px;
  right: 15px;
  background: #23a6d5;
  color: white;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
 */

/* ===== Buttons ===== */
.btn {
  background: #3b82f6;
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  margin: 5px;
  transition: 0.3s;
}
.btn:hover { background:#2563eb; }

/* Button Group */
.button-group {
  display: flex;
  gap: 10px; /* space between buttons */
  margin-top: 10px;
}

.button-group .btn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  background-color: #4CAF50;
  color: white;
  transition: background 0.3s;
}

.button-group .btn:hover {
  background-color: #45a049;
}

/* Optional: make Convert slightly different color */
#convert-btn {
  background-color: #2196F3;
}

#convert-btn:hover {
  background-color: #0b7dda;
}

/* ===== Theme Toggle Button ===== */
.theme-btn {
  position: fixed;
  top: 15px;
  right: 15px;   /* right-top corner */
  z-index: 10;
  width: 50px;
  height: 25px;
  background: #3b82f6; /* light mode color */
  border-radius: 15px;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  transition: background 0.3s;
}
.theme-btn .toggle-circle {
  width: 21px;
  height: 21px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
  transform: translateX(0);
}
body.dark-mode .theme-btn {
  background: #475569; /* dark mode button color */
}
body.dark-mode .theme-btn .toggle-circle {
  transform: translateX(25px); /* slide circle */
}

/* ===== Options ===== */
.option {
  display: block;
  background: #edf2f7;
  padding: 12px;
  border-radius: 10px;
  margin: 8px 0;
  cursor: pointer;
  transition: 0.3s;
  border: 1px solid transparent;
}
.option:hover { background: #dbeafe; transform: scale(1.02); }
.option.correct { background: #d1fae5; border:1px solid #10b981; animation: pulse 0.5s; }
.option.wrong { background: #fee2e2; border:1px solid #ef4444; animation: shake 0.5s; }


/* ===== Sidebar Toggle Button ===== */
.sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 10px 0 0 10px;
  padding: 10px;
  cursor: pointer;
  z-index: 20;
  transition: background 0.3s;
}
.sidebar-toggle:hover {
  background: #2563eb;
}

/* ===== Hidden Sidebar (Slide from Right) ===== */
.sidebar {
  position: fixed;
  top: 0;
  right: -250px;  /* hidden by default */
  width: 110px;
  height: 100%;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: -4px 0 15px rgba(0,0,0,0.2);
  border-radius: 20px 0 0 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: right 0.4s ease;
  z-index: 15;
  overflow-y: auto;
}

/* Sidebar visible */
.sidebar.show {
  right: 0;
}

/* Sidebar Buttons */
.sidebar button {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: #e5e7eb;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
}

.sidebar button:hover {
  background: #3b82f6;
  color: #fff;
  transform: scale(1.05);
}

.sidebar button.active {
  background: #facc15;
  color: #000;
}
.sidebar button.answered {
  background: #22c55e;
  color: #fff;
}
.sidebar button.locked {
  background: #9ca3af;
  color: #fff;
  cursor: not-allowed;
}

/* Dark Mode Support */
body.dark-mode .sidebar {
  background: rgba(30, 41, 59, 0.97);
}
body.dark-mode .sidebar button {
  background: #475569;
  color: #f1f5f9;
}
body.dark-mode .sidebar button.active {
  background: #facc15;
  color: #000;
}
body.dark-mode .sidebar button.answered {
  background: #16a34a;
}
body.dark-mode .sidebar button.locked {
  background: #334155;
}


/* ===== Timer ===== */
#timer { font-weight: bold; transition: color 0.3s; }
#timer.warning { color: red; animation: flash 1s infinite; }
@keyframes flash { 0%,100%{opacity:1;}50%{opacity:0.3;} }

/* ===== Hidden ===== */
.hidden { display:none; }

/* ===== Dark Mode ===== */
body.dark-mode { background: #1e293b; color: #f1f5f9; }
body.dark-mode .quiz-container { background: #334155d9; color: #f1f5f9; }
body.dark-mode .option { background: #475569; color:#f1f5f9; }
body.dark-mode .option.correct { background: #065f46; }
body.dark-mode .option.wrong { background: #b91c1c; }
body.dark-mode .sidebar { background: #475569cc; }
body.dark-mode .sidebar button { background: #94a3b8; color:#1e293b; }
body.dark-mode .sidebar button.active { background:#fde68a; color:#1e293b; }
body.dark-mode .sidebar button.answered { background:#bbf7d0; color:#1e293b; }
body.dark-mode .modal { background: rgba(0,0,0,0.7); }
body.dark-mode .modal-content { background:#334155d9; color:#f1f5f9; }

/* ===== Responsive ===== */
@media(max-width: 600px){
  .quiz-container { padding:15px; }
  .option { padding:10px; font-size:14px; }
  .sidebar button { height:35px; font-size:12px; }
  .theme-btn { width:40px; height:22px; }
  .theme-btn .toggle-circle { width:20px; height:20px; }
}