/* Page backdrop */
.quiz-body{
  background:#f0f9ff;
  padding:20px 15px;
  border-radius:16px;
}

/* CTA button in navbar */
.btn-lms-login{
  background:#1d4ed8;color:#fff!important;padding:8px 16px;border-radius:999px;
  font-weight:700;text-transform:uppercase;margin-left:12px;transition:.25s;
}
.btn-lms-login:hover{ background:#2563eb; box-shadow:0 6px 14px rgba(0,0,0,.18); transform:translateY(-1px) }

.game-header .lbl{ font-weight:600; margin-bottom:6px; display:block }
.pill{ border-radius:999px }
.v-gap{ margin-top:10px }
.btn-group-wrap .btn{ margin:2px }

.score-box{ display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:flex-end }
.score-box .stat{ background:#e2e8f0; border-radius:12px; padding:6px 10px; font-weight:700 }

/* Cards */
.game-card{
  background:#fff;
  border-radius:16px;
  padding:16px;
  box-shadow:0 12px 24px rgba(2,8,23,0.06);
  margin-bottom:18px;
}

/* Grid table */
.math-grid th, .math-grid td{ text-align:center; vertical-align:middle }
.math-grid thead th{ background:#f8fafc; font-weight:700 }
.math-grid .cell{ min-width:90px }
.math-grid .q{ font-weight:700; letter-spacing:.3px }
.math-grid .qop{ display:inline-block; width:16px }
.math-grid .inp{
  width:70px; margin:4px auto; text-align:center;
  border-radius:10px; border:1px solid #cbd5e1; padding:6px 8px;
}
.math-grid .inp:focus{ outline:none; border-color:#1d4ed8; box-shadow:0 0 0 2px rgba(29,78,216,.2) }
.tick{ height:18px; font-weight:700 }
.tick.ok{ color:#16a34a }
.tick.bad{ color:#dc2626 }