/* Global and body styles */
*{ box-sizing:border-box; }
html, body { height: 100%; }
body {
  font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  margin: 0;
  background: #FBFDFB;
  color: #222;
  -webkit-font-smoothing: antialiased;
}

/* Dark mode styles */
body.dark {
  background: #121212;
  color: #e4e4e4;
}
body.dark .card {
  background: #1e1e1e;
  color: #e4e4e4;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
}
body.dark .menubtn {
  background: #1e1e1e;
  border-color: #444;
  color: #ddd;
}
body.dark .menubtn:hover {
  background: #2a2a2a;
}
body.dark header {
  background: #1e1e1e;
  color: #e4e4e4;
}
body.dark .hamb {
  background: #2a2a2a;
  color: #e4e4e4;
}
body.dark .options .opt {
  background: linear-gradient(180deg,#2a2a2a,#222);
  border-color: #444;
  color: #e4e4e4;
}
body.dark .opt.correct {
  border-color: #4caf50;
  box-shadow: 0 12px 28px rgba(76,175,80,0.28);
}
body.dark .opt.wrong {
  border-color: #e57373;
  box-shadow: 0 12px 28px rgba(229,115,115,0.28);
}
body.dark .explain {
  background: linear-gradient(180deg,#1d2b21,#162419);
  border-left-color: #4caf50;
  color: #e4e4e4;
}
body.dark .prog-table th {
  background: #2a2a2a;
  color: #e4e4e4;
}
body.dark .prog-table tr:nth-child(even){
  background: #1f1f1f;
}
body.dark .popup-content {
  background: #1e1e1e;
  color: #e4e4e4;
}
body.dark .footer-area {
  background: linear-gradient(90deg,#1e1e1e,#222);
  border-top-color: #333;
  color: #bbb;
}
body.dark .progress-bar {
  background: #333;
}
body.dark .progress-bar > i {
  background: linear-gradient(90deg,#66bb6a,#81c784);
}
body.dark .menu-panel {
  background: linear-gradient(180deg,#1e1e1e,#222);
  box-shadow: 10px 12px 40px rgba(0,0,0,0.5);
}

/* App container */
.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 12px 100px;
}

/* Header */
header {
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  padding-top: 6px;
  z-index: 40;
  background: #ffffff;
}
header h1 {
  font-size: 18px;
  margin: 0;
  flex: 1;
}
.hamb {
  font-size: 24px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  cursor: pointer;
  user-select: none;
}

/* Card */
.card {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
  box-shadow: 0 12px 36px rgba(31,41,55,0.04);
}

.qnum {
  font-weight: 700;
  color: #6b6b6b;
}
.question {
  font-size: 17px;
  margin: 10px 0;
  line-height: 1.45;
}

/* Options */
.options {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
.opt {
  position: relative;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #ececec;
  background: linear-gradient(180deg,#fff,#fbfffb);
  cursor: pointer;
  overflow: hidden;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease;
  user-select: none;
}
.opt:active {
  transform: scale(0.99);
}
.opt:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(34,34,34,0.06);
}
.opt.correct {
  border-color: #2f9a4b;
  box-shadow: 0 12px 28px rgba(47,154,75,0.08);
  transform: scale(1.02);
}
.opt.wrong {
  border-color: #ff6b6b;
  box-shadow: 0 12px 28px rgba(255,107,107,0.06);
  transform: translateX(2px);
}

/* Explanation box */
.explain {
  margin-top: 14px;
  padding: 12px;
  background: linear-gradient(180deg,#f7fff7,#ffffff);
  border-left: 4px solid #62b66a;
  border-radius: 10px;
  font-size: 14px;
  animation: fadeIn .28s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Buttons */
button {
  padding: 10px 14px;
  border-radius: 12px;
  border: 0;
  background: #6AA18A;
  color: #fff;
  font-weight: 700;
  min-width: 84px;
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
}
button:active {
  transform: scale(0.98);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.mutebtn {
  background: transparent;
  color: #6b6b6b;
  border: 1px solid #eee;
  padding: 9px 12px;
  border-radius: 12px;
}

/* Footer */
/* Footer-area holds the prev/next buttons; position it slightly above the sticky footer to avoid overlap */
.footer-area {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 56px; /* leave space for sticky Ashu footer */
  background: linear-gradient(90deg,#ffffff,#f7fff7);
  padding: 12px 14px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  z-index: 30;
}

/* Progress bar */
.progress-wrap { margin-top: 6px; }
.progress-bar {
  height: 10px;
  background: #eee;
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar > i {
  height: 100%;
  display: block;
  background: linear-gradient(90deg,#b6e6c6,#8fd2a3);
  width: 0%;
  transition: width .45s cubic-bezier(.2,.9,.2,1);
}

/* Confetti animation for correct answers */
/* Confetti container: positioned above the option element so that particles burst over the button rather than inside */
/* Confetti container and animation. This style positions the confetti
   effect centrally on the screen when a correct answer is chosen. It
   remains hidden until triggered by the script. */
.confetti {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
  z-index: 80;
}
.confetti span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  opacity: 0;
  animation: burst 0.9s ease forwards;
}
@keyframes burst {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-140px) rotate(360deg);
    opacity: 0;
  }
}

/* Sticky footer for Ashu message */
.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background: #fbfffb;
  color: #6b6b6b;
  padding: 8px;
  font-size: 14px;
  z-index: 50;
}
body.dark .footer-fixed {
  background: #1e1e1e;
  color: #aaa;
}

/* Menu panel */
.menu-panel {
  position: fixed;
  left: -320px;
  top: 0;
  height: 100%;
  width: 300px;
  background: linear-gradient(180deg,#fff,#f7fff7);
  box-shadow: 10px 12px 40px rgba(0,0,0,0.12);
  padding: 18px;
  transition: left .28s cubic-bezier(.2,.9,.2,1);
  z-index: 70;
  overflow-y: auto;
}
.menu-panel.open { left: 0; }
.menubtn {
  display: block;
  width: 100%;
  text-align: left;
  margin: 8px 0;
  background: transparent;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 10px;
  color: #333;
  font-weight: 600;
  cursor: pointer;
}
.menubtn:hover { background: #f4fff8; }

/* Button group for practice/mock menus */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.btn-group button {
  flex: 1 1 45%;
  margin-bottom: 8px;
  background: #6AA18A;
  color: #fff;
}

/* Progress table */
.prog-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 14px;
}
.prog-table th, .prog-table td {
  border: 1px solid #eee;
  padding: 6px;
  text-align: left;
}
.prog-table th {
  background: #f1fdf5;
  font-weight: 700;
}
.prog-table tr:nth-child(even){ background: #fafafa; }

/* Popup */
.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  z-index: 80;
}
.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  max-width: 280px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
}

@media (max-width: 480px) {
  .app { padding-bottom: 120px; }
  .menu-panel { width: 260px; }
}

/* ===== Unseen passage list styles ===== */
.list-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.list-group .list-item {
  padding: 10px 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
}
.list-group .list-item:hover {
  background: #f0f0f0;
}
body.dark .list-group .list-item {
  background: #2a2a2a;
  border-color: #444;
  color: #e4e4e4;
}
body.dark .list-group .list-item:hover {
  background: #333;
}