/* ============================================================
   DREA'S ARCADE - MODERN SOFT-PINK & CLEAN TWEEN AESTHETIC
   Designed for an 11-Year-Old Reader with Glasses
   +25% Font Size, Zero Heavy Bold Glare, High Legibility
   ============================================================ */

/* Base font scaling (+25% increase from standard 16px to 20px) */
html {
  font-size: 20px;
  -webkit-text-size-adjust: 100%;
}

:root {
  /* Baby Pink & Soft Pastel Palette */
  --pink-light: #fff3f6;
  --pink-soft: #ffe8ee;
  --pink-card: #ffffff;
  --pink-accent: #ff85a2;
  --pink-deep: #f05077;
  --pink-shadow: #d84368;
  
  /* Modern Accents */
  --accent-blue: #3d8fd1;
  --accent-green: #27ae60;
  --accent-yellow: #e6b800;
  --accent-purple: #8e54e9;

  /* Neutrals & Text - Easy on Eyes with Glasses */
  --text-dark: #382e3d;
  --text-body: #4a3e50;
  --text-muted: #74667c;
  --border-line: #ecd0d8;
  --border-card: 2px solid #3c3242;
  --card-shadow: 0 6px 0 #3c3242;

  /* Typography - Plus Jakarta Sans (Crystal clear, balanced x-height) */
  --font-main: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-main);
  background-color: var(--pink-light);
  background-image: 
    radial-gradient(#ffd5e0 1px, transparent 1px),
    radial-gradient(#ffe8ee 1px, #fff3f6 1px);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
  color: var(--text-body);
  font-weight: 450;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Headings: Clean definition without heavy eye-straining bold */
h1, h2, h3, h4 {
  color: var(--text-dark);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.3px;
}

/* ============================================================
   TOP NAVIGATION
   Clean, sleek & uncluttered
   ============================================================ */

.roblox-navbar {
  background: #ffffff;
  border-bottom: 2.5px solid #3c3242;
  box-shadow: 0 4px 12px rgba(240, 80, 119, 0.08);
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.nirvana-smiley-icon {
  width: 44px;
  height: 44px;
  background: #ffe566;
  border: 2px solid #3c3242;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 #3c3242;
  flex-shrink: 0;
}

.brand-title {
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--pink-deep);
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-title span {
  color: var(--text-dark);
}

.nav-stats {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Points Badge */
.points-pill {
  background: #ffffff;
  border: 2px solid #3c3242;
  box-shadow: 0 3px 0 #3c3242;
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1rem;
  color: #8c6800;
}

/* Logout Button */
.btn-logout {
  background: #ffffff;
  border: 2px solid #3c3242;
  box-shadow: 0 3px 0 #3c3242;
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pink-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s ease;
}

.btn-logout:hover {
  background: var(--pink-soft);
  transform: translateY(-1px);
}

.btn-logout:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #3c3242;
}

/* ============================================================
   MAIN CONTAINER & SECTIONS
   ============================================================ */

.main-content {
  max-width: 1240px;
  margin: 28px auto;
  padding: 0 20px;
  width: 100%;
  flex: 1;
}

/* Hero Banner */
.welcome-hero {
  background: linear-gradient(135deg, #ffeef2 0%, #ffdce5 100%);
  border: 2.5px solid #3c3242;
  box-shadow: 0 6px 0 #3c3242;
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hero-text h1 {
  font-size: 1.7rem;
  font-weight: 650;
  margin-bottom: 6px;
}

.hero-text p {
  font-size: 1.05rem;
  color: var(--text-body);
  font-weight: 450;
}

.hero-decorations {
  font-size: 2.4rem;
  display: flex;
  gap: 10px;
}

/* Section Headers */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-title {
  font-size: 1.35rem;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-badge {
  background: #ffffff;
  color: var(--pink-deep);
  border: 1.5px solid var(--pink-accent);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
}

/* ============================================================
   BUTTONS (CLEAN & SLEEK)
   ============================================================ */

.roblox-btn {
  font-family: inherit;
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 11px 22px;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid #3c3242;
  box-shadow: 0 4px 0 #3c3242;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.1s ease;
  text-decoration: none;
  user-select: none;
}

.roblox-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #3c3242;
}

.roblox-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #3c3242;
}

.btn-pink {
  background: var(--pink-deep);
  color: #ffffff;
}
.btn-pink:hover {
  background: #e04169;
}

.btn-green {
  background: var(--accent-green);
  color: #ffffff;
}
.btn-green:hover {
  background: #219653;
}

.btn-blue {
  background: var(--accent-blue);
  color: #ffffff;
}
.btn-blue:hover {
  background: #2c7ab9;
}

.btn-yellow {
  background: #fff066;
  color: #3c3242;
}
.btn-yellow:hover {
  background: #ffe833;
}

.btn-locked-step {
  background: #f4edf2;
  color: #8c7e8a;
  border: 2px dashed #baaab5;
  box-shadow: 0 3px 0 #baaab5;
  cursor: pointer;
  opacity: 0.9;
  transition: all 0.15s ease;
}

.btn-locked-step:hover {
  background: #eae2e8;
  color: #6d5f6b;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #baaab5;
}

/* ============================================================
   AVAILABLE LESSONS GRID
   ============================================================ */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 22px;
  margin-bottom: 36px;
}

.lesson-card {
  background: #ffffff;
  border: 2.5px solid #3c3242;
  box-shadow: 0 6px 0 #3c3242;
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.12s ease;
}

.lesson-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #3c3242;
}

.lesson-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.lesson-icon-box {
  width: 58px;
  height: 58px;
  background: var(--pink-soft);
  border: 2px solid #3c3242;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 3px 0 #3c3242;
  flex-shrink: 0;
}

.lesson-meta h3 {
  font-size: 1.25rem;
  font-weight: 650;
  margin-bottom: 3px;
}

.lesson-category-tag {
  background: #eef6fd;
  color: #2b78b5;
  border: 1.5px solid #9bc5e8;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-block;
}

.lesson-desc {
  color: var(--text-body);
  font-size: 0.95rem;
  margin-bottom: 18px;
  line-height: 1.55;
}

.lesson-badges-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pill-info {
  background: #fffbee;
  border: 1.5px solid #f2cf66;
  color: #7d5e00;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lesson-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lesson-actions-grid .btn-main {
  grid-column: span 2;
}

/* ============================================================
   SCORE CARDS (VISUAL TRACKER)
   ============================================================ */

.score-cards-panel {
  background: #ffffff;
  border: 2.5px solid #3c3242;
  box-shadow: 0 6px 0 #3c3242;
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 36px;
}

.score-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.score-card-item {
  background: #fff8fa;
  border: 2px solid #ecd0d8;
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.score-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.score-trophy {
  font-size: 1.8rem;
}

.score-info h4 {
  font-size: 1rem;
  font-weight: 650;
}

.score-info p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.score-badge {
  background: #e8f8f0;
  color: #1e824c;
  border: 2px solid #27ae60;
  border-radius: var(--radius-md);
  padding: 5px 12px;
  font-weight: 650;
  font-size: 1.05rem;
}

.empty-history-box {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ============================================================
   POINTS SHOP (REWARDS - 5 BOXES)
   ============================================================ */

.shop-panel {
  background: #ffffff;
  border: 2.5px solid #3c3242;
  box-shadow: 0 6px 0 #3c3242;
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 36px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

@media (max-width: 1024px) {
  .shop-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.reward-box {
  background: #fff8fa;
  border: 2px solid #3c3242;
  box-shadow: 0 4px 0 #3c3242;
  border-radius: var(--radius-md);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  position: relative;
  min-height: 240px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.reward-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #3c3242;
}

.reward-box.grand-prize {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 45%, #fde68a 100%);
  border: 3px solid #d97706;
  box-shadow: 0 6px 0 #b45309, 0 10px 25px rgba(217, 119, 6, 0.25);
}

.reward-box.grand-prize:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #b45309, 0 14px 30px rgba(217, 119, 6, 0.35);
}

.reward-slot-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #fff066;
  border: 1.5px solid #3c3242;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.reward-box.grand-prize .reward-slot-tag {
  background: #f59e0b;
  color: #ffffff;
  border-color: #b45309;
}

.reward-chest-icon {
  font-size: 2.8rem;
  margin: 16px 0 8px;
}

.reward-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.reward-cost {
  background: #fff9db;
  border: 1.5px solid #f2cf66;
  color: #7d5e00;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.reward-box .roblox-btn {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.reward-box.pending {
  border-color: #e67e22;
  background: #fffcf5;
}

/* ============================================================
   LESSON WORKSPACE VIEW (CHAPTERS, REVIEWER, TEST)
   ============================================================ */

.lesson-workspace {
  display: none;
}

.lesson-workspace.active {
  display: block;
}

.workspace-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.tabs-nav {
  display: flex;
  gap: 8px;
  background: #ffe8ee;
  padding: 5px;
  border: 2px solid #3c3242;
  box-shadow: 0 3px 0 #3c3242;
  border-radius: var(--radius-pill);
}

.tab-pill {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  background: transparent;
  color: #554452;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s ease;
}

.tab-pill.active {
  background: var(--pink-deep);
  color: #ffffff;
  border: 2px solid #3c3242;
  box-shadow: 0 3px 0 #3c3242;
}

/* CHAPTERS CONTENT */
.chapters-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chapter-row-card {
  background: #ffffff;
  border: 2.5px solid #3c3242;
  box-shadow: 0 5px 0 #3c3242;
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.chapter-number-badge {
  width: 44px;
  height: 44px;
  background: #ffe566;
  border: 2px solid #3c3242;
  box-shadow: 0 3px 0 #3c3242;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 700;
  color: #3c3242;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chapter-content-box {
  flex: 1;
}

.chapter-content-box h3 {
  font-size: 1.2rem;
  font-weight: 650;
  margin-bottom: 4px;
}

.chapter-summary {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.content-placeholder-slot {
  background: #fff8fa;
  border: 2px dashed #f2a6ba;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  color: #5a4552;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* REVIEWER FLASHCARDS */
.reviewer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.reviewer-card {
  background: #ffffff;
  border: 2.5px solid #3c3242;
  box-shadow: 0 5px 0 #3c3242;
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.reviewer-card-topic {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin-bottom: 4px;
}

.reviewer-card h3 {
  font-size: 1.2rem;
  font-weight: 650;
  margin-bottom: 10px;
}

.reviewer-card-body {
  background: #fff4f7;
  border: 1.5px solid #ffd0db;
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-body);
}

/* TEST / QUIZ ENGINE */
.quiz-wrapper {
  background: #ffffff;
  border: 2.5px solid #3c3242;
  box-shadow: 0 6px 0 #3c3242;
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 780px;
  margin: 0 auto;
}

.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px dashed #ffd0db;
}

.quiz-progress-bar-bg {
  width: 100%;
  height: 14px;
  background: #ffe8ee;
  border: 2px solid #3c3242;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 24px;
}

.quiz-progress-bar-fill {
  height: 100%;
  background: var(--accent-green);
  width: 0%;
  transition: width 0.3s ease;
}

.quiz-question-box {
  margin-bottom: 24px;
}

.quiz-question-text {
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--text-dark);
  line-height: 1.45;
  margin-bottom: 18px;
}

.quiz-options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-btn {
  background: #ffffff;
  border: 2px solid #3c3242;
  box-shadow: 0 3px 0 #3c3242;
  border-radius: var(--radius-md);
  padding: 13px 18px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 550;
  color: var(--text-dark);
  text-align: left;
  cursor: pointer;
  transition: all 0.1s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.option-btn:hover {
  background: var(--pink-soft);
  transform: translateY(-1px);
}

.option-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #3c3242;
}

.option-btn.selected {
  background: #ffe0e8;
  border-color: var(--pink-deep);
}

.option-btn.correct {
  background: #e8f8f0;
  border-color: #27ae60;
  box-shadow: 0 3px 0 #27ae60;
  color: #1e824c;
}

.option-btn.incorrect {
  background: #fdebee;
  border-color: #e74c3c;
  box-shadow: 0 3px 0 #e74c3c;
  color: #c0392b;
}

.quiz-feedback-box {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 2px solid #3c3242;
  font-size: 0.95rem;
  line-height: 1.5;
  display: none;
}

.quiz-feedback-box.active {
  display: block;
}

/* ============================================================
   ADMIN DASHBOARD VIEW
   ============================================================ */

.admin-workspace {
  display: none;
}

.admin-workspace.active {
  display: block;
}

.admin-panel {
  background: #ffffff;
  border: 2.5px solid #3c3242;
  box-shadow: 0 6px 0 #3c3242;
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 28px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
}

.admin-table th,
.admin-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1.5px solid #ffedf2;
  font-size: 0.95rem;
}

.admin-table th {
  background: #ffe8ef;
  font-weight: 650;
  color: var(--pink-deep);
  border-bottom: 2px solid #ffd0db;
}

.alert-badge {
  background: #fff8e1;
  color: #8c6800;
  border: 1.5px solid #f2cf66;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.8rem;
  display: inline-block;
}

/* ============================================================
   CENTERED FULL-SCREEN LOGIN VIEW
   ============================================================ */

.login-screen-wrapper {
  min-height: calc(75vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-center-card {
  background: #ffffff;
  border: 2.5px solid #3c3242;
  box-shadow: 0 8px 0 #3c3242;
  border-radius: var(--radius-lg);
  max-width: 440px;
  width: 100%;
  padding: 36px 32px;
  text-align: center;
}

.login-center-card h2 {
  font-size: 1.6rem;
  font-weight: 650;
  margin-bottom: 4px;
}

.login-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 22px;
}

.login-form-group {
  margin-bottom: 16px;
  text-align: left;
}

.login-form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 5px;
  color: var(--text-dark);
}

.roblox-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #3c3242;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  background: #fffafc;
  color: var(--text-dark);
  font-weight: 500;
}

.roblox-input:focus {
  border-color: var(--pink-deep);
  background: #ffffff;
}

.login-error-msg {
  background: #ffeef1;
  border: 1.5px solid #f05077;
  color: #c0392b;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 550;
  margin-bottom: 16px;
  display: none;
}

/* ============================================================
   FIRST-TIME WELCOME CELEBRATION MODAL
   ============================================================ */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(40, 32, 45, 0.45);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}

.modal-backdrop.active {
  display: flex;
}

.welcome-modal-card {
  background: #ffffff;
  border: 2.5px solid #3c3242;
  box-shadow: 0 10px 0 #3c3242;
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  padding: 34px 28px;
  text-align: center;
}

.welcome-top-banner {
  background: linear-gradient(135deg, #ffeef2 0%, #ffdce5 100%);
  border: 2px solid #3c3242;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
}

.welcome-top-banner h2 {
  font-size: 1.7rem;
  font-weight: 650;
}

.welcome-features-list {
  background: #fff8fa;
  border: 1.5px dashed #f2a6ba;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.95rem;
}

.welcome-features-list div {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   SUBJECT TABS & NAVIGATION (FUTURE LESSONS READY)
   ============================================================ */

.dashboard-nav-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.dashboard-nav-btn {
  background: #ffffff;
  border: 2px solid #3c3242;
  box-shadow: 0 3px 0 #3c3242;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #554452;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.12s ease;
}

.dashboard-nav-btn:hover {
  background: var(--pink-soft);
  transform: translateY(-1px);
}

.dashboard-nav-btn.active {
  background: var(--pink-deep);
  color: #ffffff;
  box-shadow: 0 4px 0 #3c3242;
  transform: translateY(-1px);
}

/* Locked & Unlocked Badges */
.pill-locked {
  background: #f5f0f3;
  border: 1.5px solid #d4c2cb;
  color: #83727d;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pill-unlocked {
  background: #e8f8f0;
  border: 1.5px solid #27ae60;
  color: #1e824c;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-locked {
  background: #ece7eb !important;
  color: #8c7d88 !important;
  border-color: #baaab4 !important;
  box-shadow: 0 3px 0 #baaab4 !important;
  cursor: not-allowed !important;
  opacity: 0.85;
}

/* ============================================================
   15-SECOND QUIZ TIMER & COOLDOWN
   ============================================================ */

.quiz-timer-pill {
  background: #ffffff;
  border: 2px solid #3c3242;
  box-shadow: 0 3px 0 #3c3242;
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 0.95rem;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #3c3242;
}

.quiz-timer-pill.urgent {
  background: #ffebee;
  border-color: #e74c3c;
  color: #c0392b;
  animation: pulseTimer 1s infinite alternate;
}

@keyframes pulseTimer {
  0% { transform: scale(1); }
  100% { transform: scale(1.04); }
}

.quiz-cooldown-card {
  background: #fff9e6;
  border: 2px solid #f39c12;
  box-shadow: 0 4px 0 #f39c12;
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  margin-bottom: 24px;
}

.quiz-cooldown-card h3 {
  color: #b7791f;
  margin-bottom: 6px;
}

/* ============================================================
   ARCADE GAMES (MINI-GAMES FOR DREA)
   ============================================================ */

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px;
  margin-bottom: 36px;
}

@media (max-width: 640px) {
  .games-grid {
    grid-template-columns: 1fr;
  }
}

.game-panel-card {
  background: #ffffff;
  border: 2.5px solid #3c3242;
  box-shadow: 0 6px 0 #3c3242;
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.game-panel-card h3 {
  font-size: 1.3rem;
  font-weight: 650;
  margin-bottom: 6px;
}

.game-area-box {
  background: #fff8fa;
  border: 2px solid #ecd0d8;
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 18px 0;
  text-align: center;
}

/* Word Scramble Tiles */
.scramble-letters-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.letter-tile-btn {
  width: 44px;
  height: 48px;
  background: #ffffff;
  border: 2px solid #3c3242;
  box-shadow: 0 3px 0 #3c3242;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  color: #3c3242;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
}

.letter-tile-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #3c3242;
}

.letter-tile-btn.used {
  opacity: 0.35;
  cursor: not-allowed;
}

.word-answer-slots {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin: 14px 0;
}

.answer-letter-slot {
  width: 44px;
  height: 48px;
  background: #ffe8ee;
  border: 2px dashed #f05077;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--pink-deep);
}

/* Binary Switcher Game */
.binary-switch-board {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 18px 0;
  flex-wrap: wrap;
}

.bit-switch-card {
  background: #ffffff;
  border: 2px solid #3c3242;
  box-shadow: 0 3px 0 #3c3242;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  width: 72px;
  transition: all 0.1s ease;
}

.bit-switch-card:hover {
  transform: translateY(-2px);
}

.bit-switch-card.on {
  background: #e8f8f0;
  border-color: #27ae60;
  box-shadow: 0 4px 0 #27ae60;
}

.bit-power-val {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.bit-state-toggle {
  font-size: 1.8rem;
  font-weight: 800;
  color: #3c3242;
}

.bit-switch-card.on .bit-state-toggle {
  color: #27ae60;
}

/* ============================================================
   WILD CARD INTERACTIVE LESSON VIEWER (ONE TOPIC AT A TIME)
   ============================================================ */

.wildcard-lesson-wrapper {
  max-width: 820px;
  margin: 0 auto;
  padding: 10px 0 40px;
}

.wildcard-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}

.wildcard-card {
  background: #ffffff;
  border: 2.5px solid #3c3242;
  box-shadow: 0 8px 0 #3c3242;
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: popIn 0.2s ease;
}

.wildcard-topic-title {
  font-size: 1.55rem;
  font-weight: 650;
  color: var(--text-dark);
  text-align: center;
}

.wildcard-visual-center {
  background: linear-gradient(180deg, #fffafd 0%, #fff0f4 100%);
  border: 2px solid #f2c7d3;
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.8), 0 6px 18px rgba(230, 80, 125, 0.08);
}

.wildcard-photo-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wildcard-photo-frame {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(60, 45, 65, 0.14);
  border: 3px solid #ffffff;
  background: #ffffff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wildcard-photo-frame:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 14px 28px rgba(240, 80, 119, 0.22);
}

.wildcard-real-photo {
  max-width: 100%;
  max-height: 280px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 14px;
}

.wildcard-photo-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 240, 245, 0.95);
  color: #ab1947;
  font-size: 0.82rem;
  font-weight: 750;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid #f07b99;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(4px);
  letter-spacing: 0.3px;
}

.wildcard-photo-caption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid #ebd0da;
  border-radius: 30px;
  padding: 8px 18px;
  font-size: 0.96rem;
  color: #4a3b4a;
  line-height: 1.45;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  max-width: 95%;
  text-align: center;
  justify-content: center;
}

.wildcard-photo-caption .caption-icon {
  font-size: 1.1rem;
}

.wildcard-photo-caption strong {
  color: var(--pink-deep);
  font-weight: 700;
}

.wildcard-definition-box {
  background: #ffffff;
  border-left: 4px solid var(--pink-deep);
  padding: 12px 18px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.wildcard-note-box {
  background: #fffcee;
  border: 1.5px solid #f2cf66;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #634b00;
}

.wildcard-keyword-box {
  background: #ffeef2;
  border: 2px solid #f05077;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 1.05rem;
  color: #3c3242;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wildcard-keyword-box span.kw-highlight {
  color: var(--pink-deep);
  font-weight: 700;
}

.wildcard-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  gap: 16px;
  flex-wrap: wrap;
}

.keyboard-nav-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff0f5;
  border: 1.5px dashed #f29bb0;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.88rem;
  color: #7b4a5d;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.keyboard-nav-hint strong {
  color: var(--pink-deep);
  margin: 0 2px;
}

.key-hint {
  display: inline-block;
  font-size: 0.82rem;
  opacity: 0.88;
  margin-left: 6px;
  font-weight: 700;
}

/* Bottom Progress Bar */
.wildcard-bottom-progress {
  margin-top: 24px;
}

.wildcard-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.wildcard-bar-bg {
  width: 100%;
  height: 16px;
  background: #ffe8ee;
  border: 2px solid #3c3242;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.wildcard-bar-fill {
  height: 100%;
  background: var(--pink-deep);
  width: 2%;
  transition: width 0.25s ease;
}

/* Locked "Coming Soon" Lesson Card */
.lesson-card.locked-card {
  background: #faf7f9;
  border-color: #7b6d7a;
  box-shadow: 0 5px 0 #7b6d7a;
  opacity: 0.85;
}

.lesson-card.locked-card .lesson-icon-box {
  background: #eee8ec;
  border-color: #7b6d7a;
  color: #7b6d7a;
}

.badge-coming-soon {
  background: #f0eaf0;
  color: #6d5b6c;
  border: 1.5px solid #b8a9b6;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Footer */
.app-footer {
  text-align: center;
  padding: 24px 20px;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: auto;
}

/* ============================================================
   REVIEWER & QUIZ VIEWS STYLES
   ============================================================ */
.reviewer-card {
  padding: 26px;
  background: #ffffff;
  border: 2px solid #ecd0d8;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(60, 45, 65, 0.08);
}

.reviewer-image-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 260px;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 22px;
  background: linear-gradient(180deg, #fffafd 0%, #fff0f4 100%);
  border: 2.5px solid #f2c7d3;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.8), 0 6px 16px rgba(60, 45, 65, 0.08);
  padding: 10px;
}

.reviewer-photo {
  max-height: 240px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}

.reviewer-question-text {
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--text-dark);
  line-height: 1.6;
  margin-bottom: 22px;
  text-align: left;
}

.reviewer-options-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.reviewer-opt-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 20px;
  font-size: 1.08rem;
  font-weight: 600;
  text-align: left;
  background: #ffffff;
  border: 2px solid #ecd0d8;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 0 #ecd0d8;
}

.reviewer-opt-btn:hover:not(:disabled) {
  background: #fff5f8;
  border-color: #f05077;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #f05077;
}

.reviewer-opt-btn .opt-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffe8ee;
  color: var(--pink-deep);
  font-weight: 750;
  font-size: 1.1rem;
  flex-shrink: 0;
  border: 1.5px solid #f29bb0;
}

.reviewer-opt-btn .opt-text {
  flex: 1;
  color: var(--text-dark);
  line-height: 1.45;
}

.reviewer-opt-btn.opt-correct {
  background: #eafaf1 !important;
  border-color: #27ae60 !important;
  color: #1e824c !important;
  box-shadow: 0 4px 0 #27ae60 !important;
}

.reviewer-opt-btn.opt-correct .opt-label {
  background: #27ae60 !important;
  color: #ffffff !important;
  border-color: #1e824c !important;
}

.reviewer-opt-btn.opt-incorrect {
  background: #fdf0f0 !important;
  border-color: #e74c3c !important;
  color: #c0392b !important;
  box-shadow: 0 4px 0 #e74c3c !important;
}

.reviewer-opt-btn.opt-incorrect .opt-label {
  background: #e74c3c !important;
  color: #ffffff !important;
  border-color: #c0392b !important;
}

/* Instant Pop-up Feedback Card */
.reviewer-feedback-popup {
  margin-top: 18px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  animation: popUpBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popUpBounce {
  0% { opacity: 0; transform: translateY(12px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.reviewer-feedback-popup.card-correct {
  background: #f0fbf5;
  border: 2.5px solid #27ae60;
  box-shadow: 0 6px 18px rgba(39, 174, 96, 0.15);
}

.reviewer-feedback-popup.card-incorrect {
  background: #fff9f0;
  border: 2.5px solid #e67e22;
  box-shadow: 0 6px 18px rgba(230, 126, 34, 0.15);
}

.feedback-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feedback-icon {
  font-size: 1.6rem;
}

.feedback-title {
  font-size: 1.25rem;
  font-weight: 750;
  margin: 0;
}

.card-correct .feedback-title {
  color: #1e824c;
}

.card-incorrect .feedback-title {
  color: #d35400;
}

.feedback-explanation {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #4a3b4a;
  margin: 12px 0 18px;
}

/* Quiz Timer Badge */
.quiz-timer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffebee;
  border: 2px solid #ef5350;
  color: #c62828;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 750;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(239, 83, 80, 0.2);
}

.quiz-timer-badge.timer-warning {
  background: #ffcdd2;
  animation: timerPulse 0.6s infinite alternate;
}

@keyframes timerPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); box-shadow: 0 0 12px rgba(244, 67, 54, 0.6); }
}

/* Summary Card */
.reviewer-summary-box {
  text-align: center;
  padding: 30px 20px;
}

.summary-score-large {
  font-size: 3rem;
  font-weight: 800;
  color: var(--pink-deep);
  margin: 14px 0 6px;
}

.summary-score-msg {
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.summary-bonus-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e8f8f0;
  border: 2px solid #27ae60;
  color: #1e824c;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: 750;
  margin-bottom: 24px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  html {
    font-size: 18px;
  }
  .nav-container {
    flex-wrap: wrap;
  }
  .lesson-actions-grid {
    grid-template-columns: 1fr;
  }
  .lesson-actions-grid .btn-main {
    grid-column: span 1;
  }
}

/* ============================================================
   BOSS LEVEL CHALLENGE QUESTION STYLES (TIMED QUIZ)
   ============================================================ */
.quiz-boss-banner {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%);
  color: #ffffff;
  border: 2.5px solid #7f1d1d;
  box-shadow: 0 6px 0 #7f1d1d, 0 8px 24px rgba(220, 38, 38, 0.35);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  text-align: center;
  margin-bottom: 20px;
  animation: pulse-boss 2s infinite ease-in-out;
}

@keyframes pulse-boss {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); box-shadow: 0 6px 0 #7f1d1d, 0 12px 28px rgba(220, 38, 38, 0.45); }
}

.boss-flame {
  font-size: 1.35rem;
  display: inline-block;
  animation: flicker 0.9s infinite alternate;
}

@keyframes flicker {
  0% { transform: scale(1) rotate(-6deg); }
  100% { transform: scale(1.22) rotate(6deg); }
}

.boss-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.boss-subtitle {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fee2e2;
  margin-top: 4px;
}

.boss-question-text {
  color: #991b1b !important;
  font-weight: 800 !important;
  border-left: 4px solid #dc2626;
  padding-left: 12px;
}