/* style.css — Core Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');



/* --- GLOBAL RESET --- */
a {
  text-decoration: none; /* Kills the underline */
  color: inherit;        /* Inherits color from parent instead of standard blue link color */
}

/* Optional: Add a subtle effect on hover instead */
a:hover {
  color: var(--primary); 
}

:root {
  --primary: #2563eb;       /* Royal Blue */
  --primary-dark: #1e40af;
  --primary-soft: #eff6ff;
  --text-main: #0b2a5f;     /* Deep Navy */
  --text-body: #475569;     /* Slate Grey */
  --text-muted: #94a3b8;    /* Light Grey */
--bg-body: #ffffff;
  --bg-card: #ffffff;
  --border: #e2e8f0;
  --radius: 16px;
--shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg-body);
  color: var(--text-body);
  margin: 0;
  padding-bottom: 60px;
  -webkit-font-smoothing: antialiased;
}

/* --- MAIN LAYOUT --- */
.container { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }

.hero {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 30px; margin-bottom: 24px; text-align: center;
  background: linear-gradient(to bottom, #ffffff, #f9fafb);
}
.hero h1 { margin: 0 0 8px; color: var(--text-main); font-size: 1.8rem; }
.hero p { margin: 0; color: var(--text-muted); font-size: 1rem; }

/* --- 3-COLUMN GRID (For the Sciences) --- */
.grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr); /* Forces 3 columns */
}
@media (max-width: 850px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

/* --- COURSE CARDS --- */
.card {
  background: #ffffff;
  /* Make the border crisp to define the edge */
  border: 1px solid #e2e8f0; 
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* Apply the new shadow */
  box-shadow: var(--shadow);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: #dbeafe;
}

.card-media {
  height: 160px; background: #f1f5f9; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
/* Fallback emoji styles */
.card-media span { font-size: 4rem; }
.card-media.chem { background: #fdf4ff; color: #d946ef; }
.card-media.phys { background: #ecfeff; color: #06b6d4; }

.card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 99px;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  background: var(--primary-soft); color: var(--primary);
  width: fit-content; margin-bottom: 10px;
}
.card-title { margin: 0 0 6px; font-size: 1.25rem; color: var(--text-main); font-weight: 700; }
.card-sub { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin: 0; }

.card-foot {
  margin-top: auto; padding-top: 15px;
  font-weight: 700; color: var(--primary); font-size: 0.9rem;
}

/* Utilities */
.hidden { display: none !important; }

/* --- Detailed Lesson Card (Grid + Stats) --- */

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.lesson-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
overflow: visible;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
}

.lesson-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  border-color: #dbeafe;
}

/* Image/Banner Area */
.lesson-media {
  height: 140px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.lesson-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 10px;
}

/* Badge (Cambridge/Topic) */
.lesson-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(255,255,255,0.9);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  border: 1px solid var(--border);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.lesson-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lesson-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  line-height: 1.3;
}

/* Stats Rows */
.stat-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}


/* Variant for Accuracy (Different color) */
.progress-fill.accuracy {
  background: #10b981; /* Green */
}

.last-studied {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.lesson-card.gold {
border: 2px solid #facc15;
background: linear-gradient(
135deg,
#fffbea 0%,
#fde68a 25%,
#facc15 50%,
#fde68a 75%,
#fffbea 100%
);
box-shadow:
0 0 0 1px rgba(250, 204, 21, 0.6),
0 8px 20px rgba(234, 179, 8, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.lesson-card.gold:hover {
transform: translateY(-4px);
box-shadow:
0 0 0 1px rgba(250, 204, 21, 0.8),
0 14px 30px rgba(234, 179, 8, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.lesson-card.gold .lesson-title {
color: #78350f;
}

.lesson-card.gold .lesson-title::before {
content: "👑 ";
}

.lesson-card.gold::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
transparent 20%,
rgba(255,255,255,0.35) 50%,
transparent 80%
);
opacity: 0.35;
pointer-events: none;
}

/* --- V2 Topbar Styles --- */
.topbar {
  background: #0b2a5f; /* Deep Navy */
  color: white;
  position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-family: system-ui, -apple-system, sans-serif;
}

.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 16px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Sections */
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; flex: 1; }
.topbar-right { justify-content: flex-end; }
.topbar-center { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.3rem; color: white; text-decoration: none; }

.brand-logo { height: 32px; width: 32px; object-fit: contain; }

/* Buttons & Pills */
.pill {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: white; padding: 6px 12px; border-radius: 20px;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 8px; transition: all 0.2s;
}
.pill:hover { background: rgba(255,255,255,0.2); }

/* XP Bar (The complex part) */
.xp-wrap {
  display: flex; flex-direction: column; align-items: flex-end; width: 140px;
}
.xp-text { font-size: 0.75rem; font-weight: 700; color: #cbd5e1; margin-bottom: 2px; }
.xp-bar {
  width: 100%; height: 8px; background: rgba(0,0,0,0.3); border-radius: 4px; overflow: visible; position: relative;
}
.xp-fill {
  height: 100%; background: linear-gradient(90deg, #facc15, #eab308);
  border-radius: 4px; width: 0%; transition: width 0.5s ease;
}
.xp-star {
  position: absolute; top: -4px; margin-left: -6px;
  width: 16px; height: 16px; background: #eab308; border: 2px solid #0b2a5f;
  border-radius: 50%; box-shadow: 0 0 0 2px #eab308;
}

/* Language Dropdown */
.lang-wrap { position: relative; }
.lang-btn { padding-right: 8px; }
.flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.lang-list {
  position: absolute; top: 120%; right: 0;
  background: white; color: #333; border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  list-style: none; padding: 8px; margin: 0; min-width: 140px;
  display: none; /* Hidden by default */
}
.lang-list.show { display: block; }
.lang-list li {
  padding: 8px 12px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem;
}
.lang-list li:hover { background: #f1f5f9; }

/* Streak Fire */
.streak { color: #f97316; font-weight: 800; display: flex; align-items: center; gap: 4px; font-size: 1rem; }

/* --- PROFILE & SETTINGS PAGE --- */

/* Profile Header */
.profile-header {
  display: flex; align-items: center; gap: 20px;
  background: white; padding: 30px; border-radius: 16px;
  border: 1px solid var(--border); box-shadow: var(--shadow);
  margin-bottom: 30px;
}
.big-avatar {
  font-size: 4rem; width: 100px; height: 100px;
  background: #f8fafc; border-radius: 50%; border: 4px solid var(--primary-soft);
  display: flex; align-items: center; justify-content: center;
}

/* Avatar Selector */
.avatar-grid {
  display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.avatar-option {
  font-size: 1.5rem; width: 45px; height: 45px;
  border: 2px solid var(--border); border-radius: 50%;
  background: white; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.avatar-option:hover { background: var(--primary-soft); }
.avatar-option.selected { border-color: var(--primary); background: var(--primary-soft); transform: scale(1.1); }

/* Forms & Settings */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--text-main); }
.form-input {
  width: 100%; padding: 12px; border: 2px solid var(--border); border-radius: 8px;
  font-size: 1rem; font-family: inherit; color: var(--text-body);
}
.form-input:focus { border-color: var(--primary); outline: none; }

.setting-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 0; border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-info h4 { margin: 0 0 4px; color: var(--text-main); }
.setting-info p { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

/* Toggle Switch */
.toggle-switch {
  position: relative; width: 50px; height: 26px;
  background: #e2e8f0; border-radius: 20px; cursor: pointer; transition: 0.3s;
}
.toggle-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; background: white; border-radius: 50%;
  transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-checkbox:checked + .toggle-switch { background: var(--primary); }
.toggle-checkbox:checked + .toggle-switch::after { transform: translateX(24px); }
.toggle-checkbox { display: none; }

/* Dark Mode Overrides (Basic) */
body.dark-mode {
  --bg-body: #0f172a; --bg-card: #1e293b; --text-main: #f8fafc; --text-body: #cbd5e1; --border: #334155;
}

.mini-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:0.85rem;
  color:#64748b;
  margin-top:14px;
}

.progress-bar{
  height:10px;
  background:#eef2f7;
  border-radius:999px;
  overflow:hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.progress-fill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  transition: width 300ms ease;
}

.progress-fill.accuracy{
  background: linear-gradient(90deg, #16a34a, #86efac);
}

/* --- STAT BUBBLES --- */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 30px;
}
.stat-bubble {
  background: white; border: 2px solid #e2e8f0; border-radius: 16px; padding: 15px;
  text-align: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.stat-bubble h4 { margin: 0; color: #64748b; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-bubble .val { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin-top: 5px; }
.stat-bubble.highlight { border-color: #3b82f6; background: #eff6ff; }

/* --- PREMIER LEAGUE TABLE --- */
.league-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; }
.league-table thead { background: #1e293b; color: white; }
.league-table th { padding: 12px 15px; font-size: 0.85rem; text-align: left; font-weight: 600; }
.league-table td { padding: 12px 15px; border-bottom: 1px solid #f1f5f9; font-size: 0.9rem; color: #94a3b8; font-style: italic; }
.row-locked td { filter: blur(0.5px); opacity: 0.7; }

#quiz-mount {
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.correct {
  animation: pop 0.25s ease;
  background: #dcfce7 !important;
}

.wrong {
  animation: shake 0.25s ease;
  background: #fee2e2 !important;
}

@keyframes pop {
  0% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* --- BrainSTEM Quiz UI polish --- */

#quizHud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: blur(8px);
  margin-bottom: 12px;
}

#quizHud .quiz-hud-left,
#quizHud .quiz-hud-right {
  font-weight: 600;
}


#quizMount.wrong .quiz-card {
  border-color: rgba(239,68,68,0.35);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}


.quiz-prompt {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}


.quiz-controls {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

/* Buttons */
.bs-btn {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  color: #0b1b2b;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.bs-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.bs-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.bs-btn.primary {
  background: rgba(37,99,235,0.12);
  border-color: rgba(37,99,235,0.25);
}

.bs-btn.danger {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.22);
}

/* MCQ */
.mcq-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.mcq-btn {
  text-align: left;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  cursor: pointer;
  font-weight: 600;
}

.mcq-btn.selected {
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.mcq-btn.correct {
  border-color: rgba(34,197,94,0.35);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
  background: rgba(34,197,94,0.08);
}

.mcq-btn.wrong {
  border-color: rgba(239,68,68,0.35);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
  background: rgba(239,68,68,0.08);
}

/* Cloze */
.cloze-text {
  line-height: 1.9;
}

.cloze-input {
  width: 220px;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  margin: 0 6px;
  font-weight: 700;
}

.cloze-input.correct {
  border-color: rgba(34,197,94,0.55);
  background: rgba(34,197,94,0.10);
}

.cloze-input.wrong {
  border-color: rgba(239,68,68,0.55);
  background: rgba(239,68,68,0.10);
}

/* Match */
.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}


.match-item.selected {
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.match-item.correct {
  border-color: rgba(34,197,94,0.45);
  background: rgba(34,197,94,0.10);
}

.match-item.wrong {
  border-color: rgba(239,68,68,0.45);
  background: rgba(239,68,68,0.10);
}

.match-item.done {
  opacity: 0.6;
  cursor: default;
}

/* Finish */
.quiz-finish {
  text-align: left;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  padding: 18px;
}

.quiz-finish-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}

.quiz-finish-stats .label {
  font-weight: 700;
  opacity: 0.7;
  margin-right: 8px;
}

.quiz-empty {
  padding: 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
}

/* ---- BrainSTEM Quiz Styling ---- */
.quiz-card{
  max-width: 920px;
  margin: 24px auto;
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.quiz-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.quiz-meta{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.quiz-qcount{
  font-size: 14px;
  color: rgba(15, 23, 42, 0.75);
}
.quiz-score{
  font-size: 16px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.90);
}
.quiz-timer{
  min-width: 92px;
  text-align:center;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(14,165,233,0.12));
  border: 1px solid rgba(59,130,246,0.25);
  color: rgba(2, 6, 23, 0.85);
}
.quiz-body{
  padding-top: 6px;
}
.quiz-question-title{
  font-size: 18px;
  font-weight: 800;
  color: rgba(2, 6, 23, 0.92);
  margin: 6px 0 14px;
}
.quiz-question-text{
  font-size: 18px;
  line-height: 1.55;
  color: rgba(2, 6, 23, 0.92);
}
.quiz-input{
  display:inline-block;
  min-width: 160px;
  max-width: 320px;
  margin: 0 6px 0 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: rgba(248, 250, 252, 1);
  outline: none;
}
.quiz-input:focus{
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
}
.quiz-input.correct{
  border-color: rgba(34,197,94,0.55);
  box-shadow: 0 0 0 4px rgba(34,197,94,0.12);
}
.quiz-input.wrong{
  border-color: rgba(239,68,68,0.55);
  box-shadow: 0 0 0 4px rgba(239,68,68,0.12);
}
.quiz-hint{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.65);
}
.quiz-actions{
  display:flex;
  gap: 10px;
  margin-top: 16px;
  align-items:center;
}
.quiz-btn{
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(248, 250, 252, 1);
  color: rgba(2, 6, 23, 0.9);
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.quiz-btn:hover{
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.10);
}
.quiz-btn:active{
  transform: translateY(1px);
}
.quiz-btn-primary{
  background: linear-gradient(135deg, rgba(59,130,246,1), rgba(14,165,233,1));
  border-color: rgba(59,130,246,0.55);
  color: #ffffff;
}
.quiz-btn-ghost{
  background: transparent;
}
.quiz-feedback{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 800;
  display:none;
}
.quiz-feedback.good{
  display:block;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.28);
  color: rgba(20,83,45,0.95);
}
.quiz-feedback.bad{
  display:block;
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.25);
  color: rgba(127,29,29,0.95);
}

/* MCQ */
.mcq-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 860px){
  .mcq-grid{ grid-template-columns: 1fr 1fr; }
}
.mcq-option{
  text-align:left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(248, 250, 252, 1);
  font-weight: 700;
  cursor:pointer;
}
.mcq-option:hover{
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
}
.mcq-option.selected{
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}
.mcq-option.correct{
  border-color: rgba(34,197,94,0.55);
  box-shadow: 0 0 0 4px rgba(34,197,94,0.10);
}
.mcq-option.wrong{
  border-color: rgba(239,68,68,0.55);
  box-shadow: 0 0 0 4px rgba(239,68,68,0.10);
}

/* Matching */
.match-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 860px){
  .match-wrap{ grid-template-columns: 1fr 1fr; }
}
.match-col{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.match-item{
  text-align:left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(248, 250, 252, 1);
  font-weight: 750;
  cursor:pointer;
}
.match-item.pending{
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}
.match-item.matched{
  border-color: rgba(34,197,94,0.55);
  box-shadow: 0 0 0 4px rgba(34,197,94,0.10);
}

/* Start + finish cards */
.quiz-start-card{
  max-width: 920px;
  margin: 24px auto;
  padding: 22px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.quiz-start-title{
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 10px;
}
.quiz-start-sub{
  font-size: 15px;
  color: rgba(15, 23, 42, 0.70);
  margin-bottom: 14px;
}
.quiz-finish-title{
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 8px;
}
.quiz-finish-sub{
  font-size: 15px;
  color: rgba(15, 23, 42, 0.75);
}
.quiz-empty{
  text-align:center;
  padding: 24px;
  color: rgba(15, 23, 42, 0.60);
}

/* --- Blue Gradient Accordion Styles --- */
    details.unit-group {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      margin-bottom: 16px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }
    
    summary.unit-header {
      padding: 18px 24px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      /* THE BLUE GRADIENT */
      background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
      color: white;
      
      font-weight: 700;
      list-style: none;
      transition: all 0.2s;
    }
    
    summary.unit-header:hover {
      filter: brightness(1.1); /* Slight highlight on hover */
    }
    
    summary.unit-header::-webkit-details-marker { display: none; }
    
    .unit-title span { 
      display: block; 
      font-size: 0.75rem; 
      text-transform: uppercase; 
      opacity: 0.8; /* Slightly transparent white */
      margin-bottom: 4px;
      letter-spacing: 1px;
    }
    
    .unit-title h2 { 
      margin: 0; 
      font-size: 1.2rem; 
      color: white; /* White text */
    }
    
    /* Stats Pill inside the header */
    .unit-stats-pill {
      background: rgba(255, 255, 255, 0.2); /* Glass effect */
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      padding: 6px 14px; 
      border-radius: 20px;
      font-size: 0.85rem; 
      color: white;
      display: flex; align-items: center; gap: 8px;
    }
    
    .unit-stats-pill b { color: #bfdbfe; } /* Lighter blue for number */
    
    .chevron { 
      font-size: 0.8rem; 
      color: rgba(255,255,255,0.7); 
      transition: transform 0.2s; 
    }
    details[open] .chevron { transform: rotate(180deg); }
    
    .unit-content { 
      padding: 24px; 
      background: #f8fafc; /* Very light grey interior */
    }
    
    /* Navigation Button Style (for topbar) */
    .nav-btn {
      background: white; border:1px solid #e2e8f0; 
      padding: 6px 12px; border-radius: 8px; 
      font-size: 0.9rem; text-decoration:none; color: #475569;
      font-weight: 600;
      transition: all 0.1s;
    }
    .nav-btn:hover { background: #f1f5f9; color: #0f172a; }

    /* --- GLOBAL PREFERENCES --- */

/* 1. Dark Mode Variables */
html.dark-mode {
  --bg-body: #0f172a;
  --bg-card: #1e293b;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --border: #334155;
  --primary: #3b82f6; /* Keep blue bright */
}

/* Apply Dark Mode Colors */
html.dark-mode body {
  background-color: var(--bg-body);
  color: var(--text-main);
}

html.dark-mode .card, 
html.dark-mode .unit-accordion, 
html.dark-mode .unit-header,
html.dark-mode details .roadmap-grid,
html.dark-mode .unit-stats-pill {
  background-color: var(--bg-card);
  border-color: var(--border);
  color: var(--text-main);
}

html.dark-mode .unit-title h2,
html.dark-mode .lesson-title {
  color: #f8fafc;
}

html.dark-mode .nav-back-btn,
html.dark-mode .unit-stats-pill {
  background-color: rgba(255,255,255,0.05);
  color: #e2e8f0;
}

/* 2. Dyslexic Font */
/* Falls back to Comic Sans (widely available/readable) if OpenDyslexic isn't loaded */
html.font-dyslexic body {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Chalkboard SE', sans-serif !important;
  line-height: 1.6;
}

/* 3. Font Scaling */
html.size-small { font-size: 14px; }
html { font-size: 16px; /* Default */ }
html.size-large { font-size: 19px; }

/* Adjustments for Large Font Mode */
html.size-large .container { max-width: 1400px; } /* Widen container */

/* HEATMAP STYLES */
.hm-container {
  margin-top: 20px;
  background: white; border: 1px solid var(--border);
  border-radius: 16px; padding: 20px;
}
.hm-header { display: flex; justify-content: space-between; margin-bottom: 15px; }
.hm-title { font-weight: 800; font-size: 1.1rem; }
.hm-grid { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 5px; }
.hm-col { display: flex; flex-direction: column; gap: 4px; }
.hm-cell {
  width: 10px; height: 10px; border-radius: 2px;
  background-color: #ebedf0; position: relative;
}
.hm-cell:hover::after {
  content: attr(data-date) ": " attr(data-xp) " XP";
  position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
  background: #0f172a; color: white; padding: 4px; border-radius: 4px;
  font-size: 0.6rem; white-space: nowrap; pointer-events: none; z-index:10;
}
/* Levels */
.l1 { background: #93c5fd; } /* Light Blue */
.l2 { background: #60a5fa; }
.l3 { background: #3b82f6; }
.l4 { background: #1e40af; } /* Deep Blue */

/* --- LEADERBOARD TABLE STYLES --- */
    #leaderboardTable {
        width: 100%;
        border-collapse: separate; /* Use separate to allow rounded corners/spacing */
        border-spacing: 0 8px; /* Vertical space between rows */
    }

    #leaderboardTable thead th {
        color: #64748b;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding-bottom: 10px;
        text-align: left;
    }
    
    #leaderboardTable tbody tr {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        transition: all 0.1s;
    }
    #leaderboardTable tbody tr:hover {
        background: #f8fafc;
        box-shadow: 0 4px 6px rgba(0,0,0,0.08);
        transform: translateY(-1px);
    }
    
    #leaderboardTable tbody td {
        padding: 12px 16px;
        font-size: 0.95rem;
        vertical-align: middle;
        border: none;
    }

    /* Rank Cell Styling */
    .rank-cell, .rank-1, .rank-2, .rank-3 { 
        font-weight: 800; 
        color: var(--text-muted); 
        width: 10%;
        text-align: center !important;
    }

    .rank-1, .rank-2, .rank-3 {
        font-size: 1.2rem;
        color: #0f172a;
    }
    
    /* User Styling */
    .user-cell {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
        width: 45%;
    }
    .lb-avatar {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: #e0f2fe;
        display: flex; align-items: center; justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
    }
    
    /* Time Styling (emphasize speed) */
    .time-cell {
        font-weight: 800;
        color: var(--primary); /* Assuming var(--primary) is blue */
        width: 25%;
    }
    
    /* Highlight User's Row */
    .is-me {
        border: 2px solid var(--primary) !important;
        background: #eff6ff !important;
        box-shadow: 0 4px 6px rgba(37,99,235,0.15) !important;
    }
    
    /* Responsive adjustment for small screens */
    @media (max-width: 600px) {
        #leaderboardTable thead th { display: none; } /* Hide headers */
        #leaderboardTable tbody td { padding: 10px 8px; font-size: 0.9rem; }
        .user-cell { width: 60%; }
        .time-cell { width: 20%; font-size: 1rem; }
        .rank-cell, .rank-1, .rank-2, .rank-3 { width: 10%; font-size: 1rem; }
        
        #leaderboardTable tbody tr {
            grid-template-columns: 1fr; /* Stack vertically if needed */
        }
    }

    /* --- CUSTOM LOCK/BLUR EFFECT CLASS --- */
.locked-blur-cell {
    /* Apply the blur filter */
    filter: blur(2px);
    /* Make the text unselectable */
    user-select: none;
    cursor: not-allowed;
    /* Optional: A subtle background to make the blur stand out more */
    background-color: #f7f7f7; 
}

.tab-bar {
  display: flex;
  gap: 10px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #64748b;
  font-weight: 800;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.tab-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
  transform: translateY(-1px);
}

.tab-btn.active {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.user-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06) inset;
  font-size: 18px;
}

.user-flag {
  font-size: 18px;
  line-height: 1;
  min-width: 22px;
  text-align: center;
  opacity: 0.95;
}

.user-name {
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* --- GRIND CAP STATUS STYLING (logic.js driven) --- */

/* Gold (Tier 1: 100% XP) */
.lesson-card.status-gold {
    border-left: 5px solid #fbbf24; /* Amber-500 */
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

/* Blue (Tier 2: 50% XP) */
.lesson-card.status-blue {
    border-left: 5px solid #3b82f6; /* Blue-500 */
    background: #f0f9ff; /* Very light blue background */
}

/* Grey (Tier 3: 25% XP) */
.lesson-card.status-grey {
    border-left: 5px solid #94a3b8; /* Slate-400 */
    opacity: 0.7;
    filter: grayscale(20%);
}

/* Add a visual indicator for the multiplier */
.lesson-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 0.8rem;
    font-weight: 700;
}

.xp-multiplier-tag {
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-gold .xp-multiplier-tag {
    background: #fcd34d; /* Amber-300 */
    color: #b45309; /* Dark Amber Text */
}
.status-blue .xp-multiplier-tag {
    background: #93c5fd; /* Blue-300 */
    color: #1e40af; /* Dark Blue Text */
}
.status-grey .xp-multiplier-tag {
    background: #e2e8f0; /* Slate-200 */
    color: #64748b; /* Slate Text */
}

/* --- GRIND CAP OVERRIDES (Add to bottom of style.css) --- */
.lesson-item.status-gold {
    border-left: 6px solid #fbbf24 !important;
    background: linear-gradient(to right, #fffbeb, #ffffff);
}
.lesson-item.status-blue {
    border-left: 6px solid #3b82f6 !important;
    background: #eff6ff !important;
}
.lesson-item.status-grey {
    border-left: 6px solid #94a3b8 !important;
    opacity: 0.8;
    filter: grayscale(10%);
}

.flag-emoji {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* --- CUSTOM COUNTRY PICKER STYLES --- */
.country-picker {
  position: relative;
  font-family: inherit;
}

/* The visible preview box */
.country-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  background: white;
  transition: all 0.2s;
}
.country-preview:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.country-flag {
  font-size: 1.4rem;
  margin-right: 12px;
  display: flex; 
  align-items: center;
}
.country-name {
  flex-grow: 1;
  font-weight: 600;
  color: #334155;
}
.country-chev {
  color: #94a3b8;
  font-size: 0.8rem;
}

/* The Dropdown Panel (Hidden by default) */
.country-panel {
  display: none; /* JS toggles this to 'block' */
  position: absolute;
  top: 105%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
  z-index: 100;
  padding: 10px;
  box-sizing: border-box;
}

/* Search Input inside panel */
#countrySearch {
  width: 100%;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  box-sizing: border-box;
}
#countrySearch:focus {
  border-color: #3b82f6;
  outline: none;
}

/* The List of Options */
.country-list {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  color: #475569;
  cursor: pointer;
  overflow-y: auto;
  max-height: 220px; /* Scrollable height */
}

.country-list option {
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 2px;
}
.country-list option:checked, .country-list option:hover {
  background-color: #eff6ff;
  color: #2563eb;
  font-weight: 700;
}

/* --- QUESTION DETAIL MODAL --- */
.modal-overlay {
  display: none; /* Hidden by default */
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(15, 23, 42, 0.6); /* Dark backdrop */
  backdrop-filter: blur(4px);
  z-index: 2000;
  align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
}

.modal-overlay.open { display: flex; animation: fadeIn 0.2s ease-out; }

.modal-card {
  background: white; width: 100%; max-width: 550px;
  border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative; overflow: hidden;
  max-height: 90vh; overflow-y: auto;
  border: 1px solid #e2e8f0;
}

.modal-close {
  position: absolute; top: 15px; right: 15px;
  background: #f1f5f9; border: none; width: 32px; height: 32px;
  border-radius: 50%; font-size: 1.2rem; cursor: pointer; color: #64748b;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.modal-close:hover { background: #e2e8f0; color: #ef4444; }

.modal-header {
  padding: 24px 24px 0; display: flex; justify-content: space-between; align-items: center;
}

.modal-badge {
  background: #eff6ff; color: #2563eb; padding: 4px 10px; border-radius: 6px;
  font-weight: 800; font-size: 0.8rem; text-transform: uppercase;
}

.modal-meta { font-size: 0.85rem; color: #94a3b8; font-weight: 600; margin-right: 40px; }

.modal-body { padding: 20px 24px 30px; }

.answer-box {
  background: #f0fdf4; border: 1px solid #bbf7d0;
  padding: 15px; border-radius: 12px; margin-top: 15px;
}

.expl-box {
  background: #fffbeb; border: 1px solid #fde68a;
  padding: 15px; border-radius: 12px; margin-top: 15px; font-size: 0.95rem;
}

.q-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.q-stat-col { display: flex; flex-direction: column; }
.q-stat-label { font-size: 0.7rem; text-transform: uppercase; color: #64748b; font-weight: 700; margin-bottom: 4px; }
.q-stat-val { font-size: 1.1rem; font-weight: 800; color: #0f172a; }

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* Add to style.css */
.clickable-row { 
    cursor: pointer !important; 
    transition: background 0.1s; 
}
.clickable-row:hover { 
    background: #f1f5f9; 
}
.locked-row { 
    opacity: 0.6; 
    cursor: not-allowed; 
    background: #f9fafb; 
}
/* Blur locked text to prevent cheating */
.locked-blur-cell {
    filter: blur(4px);
    user-select: none;
}

/* --- NEW QUIZ RESULTS LIST --- */
.quiz-review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.05);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  background: white;
}

.result-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* CORRECT (Green) */
.result-row.correct {
  background: #f0fdf4;
  border-left: 5px solid #22c55e;
}
.result-row.correct .rr-xp { color: #16a34a; }

/* WRONG (Red) */
.result-row.wrong {
  background: #fef2f2;
  border-left: 5px solid #ef4444;
}
.result-row.wrong .rr-xp { color: #ef4444; }

/* Layout inside the row */
.rr-left { display: flex; align-items: center; gap: 12px; overflow: hidden; }
.rr-icon { font-size: 1.2rem; flex-shrink: 0; }
.rr-text { 
    font-weight: 700; color: #334155; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    max-width: 300px;
}

.rr-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.rr-time { font-family: monospace; font-weight: 600; color: #64748b; background: rgba(255,255,255,0.5); padding: 2px 6px; border-radius: 4px; }
.rr-xp { font-weight: 900; font-size: 0.95rem; min-width: 60px; text-align: right; }

@media (max-width: 500px) {
    .rr-text { max-width: 140px; font-size: 0.9rem; }
    .rr-time { display: none; } /* Hide time on very small screens */
}

/* The container must be relative so the pin (absolute) knows where to sit */
/* --- DIAGRAM & POINTER STYLES --- */

.quiz-img-container {
  position: relative;
  display: inline-block;
  line-height: 0;
  margin: 20px auto; /* Added margin for arrow space */
  border-radius: 12px;
  /* IMPORTANT: Visible overflow so arrows pointing to edges aren't cut off */
  overflow: visible; 
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  max-height: 40vh;
  max-width: 100%;
}

.quiz-q-img {
  display: block;
  width: auto;
  height: auto;
  max-height: 40vh;
  object-fit: contain;
  border-radius: 12px; /* Re-apply radius to image since container spills */
}

/* The Arrow Pointer */
/* The Arrow Head */
.quiz-pointer-arrow {
  position: absolute;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #ef4444; /* Red Head */
  
  /* Positioning: Tip touches the target */
  transform: translate(-50%, -100%); 
  z-index: 20;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3)); /* Shadow for depth */
  
  /* The Bounce Animation */
  animation: bounce-point 1.2s infinite ease-in-out;
}

/* The Arrow Shaft (Longer tail) */
.quiz-pointer-arrow::after {
  content: '';
  position: absolute;
  bottom: 15px; /* Starts where the head ends */
  left: -3px;   /* Center the shaft (width 6px / 2) */
  width: 6px;
  height: 40px; /* Length of the stick */
  background: #ef4444;
  border-radius: 4px;
}

/* The Bounce: Moves the whole arrow up and down */


/* The Target Dot (The precise spot) */
.quiz-pointer-dot {
  position: absolute;
  width: 8px; height: 8px;
  background: white;
  border: 2px solid #ef4444;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 19;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

@keyframes bounce-point {
  0% { transform: translate(-50%, -100%) translateY(-5px) scale(1); }
  100% { transform: translate(-50%, -100%) translateY(-15px) scale(1.1); }
}

/* --- SMART REVIEW BUTTON --- */
.hero-action-box {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.btn-smart-review {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); /* Indigo */
  color: white;
  border: none;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-smart-review:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
}

.smart-badge {
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
}
/* --- HERO LAYOUT (Flex Mode) --- */
.hero {
  display: flex !important; /* Force flex to align items */
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 30px 40px; /* More padding for a premium feel */
  text-align: left; /* Ensure text stays left */
}

/* Wrapper for the text (H1 + P) created by JS */
.hero-text-wrap {
  flex: 1;
}

.hero-action-box {
  margin: 0; /* Remove old margin */
  flex-shrink: 0;
}

/* --- SMART REVIEW TILE BUTTON --- */
.btn-smart-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #475569;
}

/* Icon (Top) */
.tile-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
  transition: transform 0.2s;
}

/* Text (Middle) */
.tile-text {
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Badge (Bottom) */
.tile-badge {
  margin-top: 6px;
  font-size: 0.7rem;
  background: #eff6ff;
  color: #2563eb;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
}

/* --- HOVER EFFECTS --- */
.btn-smart-tile:hover {
  border-color: #6366f1;
  background: #eef2ff; /* Very light indigo */
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 30px -5px rgba(99, 102, 241, 0.2);
  color: #4338ca;
}

.btn-smart-tile:hover .tile-icon {
  transform: scale(1.1) rotate(5deg);
}

.btn-smart-tile:hover .tile-badge {
  background: #6366f1;
  color: white;
}

/* Mobile Fallback */
@media (max-width: 600px) {
  .hero { flex-direction: column; text-align: center; }
  .btn-smart-tile { width: 100%; height: auto; flex-direction: row; padding: 15px; }
  .tile-icon { font-size: 1.5rem; margin: 0 10px 0 0; }
  .tile-badge { margin: 0 0 0 auto; }
}

/* --- UPDATED HERO: COMMAND CENTER --- */
.hero {
  /* Deep Navy to Royal Blue Gradient */
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  color: white;
  border: none; /* Remove grey border */
  box-shadow: 0 20px 40px -10px rgba(30, 58, 138, 0.2); /* Soft blue glow below */
  position: relative;
  z-index: 1;
}

/* Force text to be white/light */
.hero h1 { 
  color: white !important; 
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hero p { 
  color: #bfdbfe !important; /* Light Blue text */
  font-weight: 500;
}

/* --- SMART REVIEW TILE (Floating Style) --- */
.btn-smart-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px; /* Slightly larger */
  height: 140px;
  
  /* Bright White Background */
  background: #ffffff;
  border: none; /* No border needed on dark background */
  border-radius: 24px; /* Smoother corners */
  
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Deep Shadow to lift it off the dark background */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #1e3a8a; /* Dark Blue Text */
}

/* Icon (Top) */
.tile-icon {
  font-size: 3rem; /* Bigger Icon */
  margin-bottom: 8px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy transition */
}

/* Text (Middle) */
.tile-text {
  font-weight: 900;
  font-size: 0.85rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #0f172a;
}

/* Badge (Bottom) */
.tile-badge {
  margin-top: 8px;
  font-size: 0.7rem;
  background: #eff6ff;
  color: #2563eb;
  padding: 4px 10px;
  border-radius: 99px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px #dbeafe; /* Subtle inset border */
}

/* --- HOVER EFFECTS --- */
.btn-smart-tile:hover {
  transform: translateY(-6px) scale(1.05); /* Lift up */
  box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.4); /* Stronger shadow */
  background: #ffffff;
}

.btn-smart-tile:hover .tile-icon {
  transform: scale(1.2) rotate(10deg); /* Icon pops */
}

.btn-smart-tile:hover .tile-badge {
  background: #2563eb;
  color: white;
  box-shadow: none;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  .hero { flex-direction: column; text-align: center; padding: 20px; }
  .hero-text-wrap { margin-bottom: 20px; }
  .btn-smart-tile { width: 100%; height: auto; flex-direction: row; padding: 16px; justify-content: space-between;}
  .tile-icon { font-size: 1.8rem; margin: 0; }
  .tile-badge { margin: 0; }
}

/* --- IMAGE OCCLUSION (Anki Style) --- */
.io-wrapper {
  position: relative;
  display: inline-block;
  margin: 20px auto;
  max-width: 100%;
}

.io-image {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  user-select: none;
}

.io-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let clicks pass through to rects */
}

/* The Box Styles */
.io-box {
  fill: #f59e0b; /* Anki Orange */
  fill-opacity: 0.4; /* See-through to the anatomy */
  stroke: #f59e0b;
  stroke-width: 2px;
  cursor: pointer;
  pointer-events: auto; /* Catch clicks */
  transition: all 0.2s ease;
}

.io-box:hover {
  fill-opacity: 0.6;
  stroke-width: 3px;
}

/* Interaction States */
.io-box.correct {
  fill: #22c55e !important; /* Green */
  fill-opacity: 0.6;
  stroke: #22c55e !important;
}

.io-box.wrong {
  fill: #ef4444 !important; /* Red */
  fill-opacity: 0.6;
  stroke: #ef4444 !important;
}

.io-box.dimmed {
  fill-opacity: 0.1;
  stroke-opacity: 0.2;
  pointer-events: none;
}

/* --- ACHIEVEMENTS SYSTEM --- */

/* Grid Container */
.achievement-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Base Card Style */
.achievement-card {
  width: 150px;
  height: 180px;
  padding: 14px;
  border-radius: 14px;
}


/* --- LOCKED STATE (The "Stone" Effect) --- */
.achievement-card.locked {
  background-color: #94a3b8; /* Base stone grey */
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2364748b' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  border-color: #64748b;
  filter: grayscale(100%);
  cursor: not-allowed;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

.achievement-card.locked .ach-icon {
  background: #cbd5e1;
  color: #475569;
  font-size: 1.5rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.achievement-card.locked .ach-title {
  color: #475569;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  letter-spacing: 1px;
}

.achievement-card.locked .ach-desc {
  color: #475569;
  font-style: italic;
  font-family: monospace;
}

/* --- UNLOCKED STATE --- */
.achievement-card.unlocked {
  background: #ffffff;
  border-color: #bfdbfe; /* Light Blue */
  box-shadow: 0 10px 20px -5px rgba(37,99,235,0.15);
  transform: translateY(-2px);
  border-left: 5px solid #2563eb;
}

.achievement-card.unlocked .ach-icon {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #2563eb;
  font-size: 2rem;
  border: 2px solid #fff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  animation: popIcon 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.achievement-card.unlocked .ach-title {
  color: #0f172a;
  font-weight: 800;
}

.achievement-card.unlocked .ach-desc {
  color: #64748b;
}

/* Reward Badge */
.ach-reward {
  margin-left: auto; /* Push to right */
  background: #f0fdf4;
  color: #16a34a;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid #bbf7d0;
  text-transform: uppercase;
}
.locked .ach-reward { display: none; }

/* Icon Wrapper */
.ach-icon-wrapper {
  width: 60px; height: 60px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.ach-icon {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}

.achievement-icon {
  width: 47px;
  height: 47px;
  font-size: 22px;
}

/* Animations */
@keyframes popIcon {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes flashUnlock {
  0% { background: #fff; }
  50% { background: #bfdbfe; }
  100% { background: #fff; }
}

/* --- ACHIEVEMENTS GRID FIX --- */
.ach-section {
  background: white;
  border-radius: 16px;
  padding: 25px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
  /* Full width container */
  width: 100%; 
  box-sizing: border-box;
}

.achievement-grid {
  display: grid;
  /* Columns automatically fit, minimum 180px wide */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
  gap: 15px;
  margin-top: 20px;
}

.achievement-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: white;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  /* FIXED HEIGHT TO PREVENT OVERLAP */
  height: 220px; 
}

/* Scroll content if description is too long */
.ach-info-scroll {
  width: 100%;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Hide scrollbar for cleaner look */
  scrollbar-width: none; 
}
.ach-info-scroll::-webkit-scrollbar { display: none; }

/* Locked State (Stone Texture) */
.achievement-card.locked {
  background-color: #94a3b8;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z' fill='%2364748b' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  filter: grayscale(100%);
  opacity: 0.9;
  border-color: #cbd5e1;
}

.achievement-card.unlocked {
  border-bottom: 5px solid #2563eb;
  background: linear-gradient(to bottom, #ffffff, #f8fafc);
}

.ach-icon-wrapper {
  margin-bottom: 10px;
  flex-shrink: 0;
}
.ach-icon { font-size: 2.5rem; }

.ach-title { 
  font-weight: 800; 
  color: #0f172a; 
  font-size: 0.95rem; 
  margin-bottom: 6px; 
  line-height: 1.2; 
}
.locked .ach-title { color: #334155; }

.ach-desc { 
  font-size: 0.8rem; 
  color: #64748b; 
  line-height: 1.4; 
}

.ach-reward {
  margin-top: auto; 
  padding-top: 8px;
  font-size: 0.7rem; 
  color: #16a34a; 
  font-weight: 700; 
  text-transform: uppercase; 
  width: 100%;
  border-top: 1px dashed #e2e8f0;
}
.locked .ach-reward { visibility: hidden; }


/* =========================
   Achievement Toasts
   ========================= */
#ach-toast-host {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.ach-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 44px 1fr 26px;
  gap: 12px;
  align-items: start;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 22, 48, 0.92);
  color: #e5e7eb;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  transform: translateY(-8px);
  opacity: 0;
  animation: achToastIn 260ms ease forwards;
}

.ach-toast.leaving {
  animation: achToastOut 260ms ease forwards;
}

.ach-toast-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(37, 99, 235, 0.22);
  border: 1px solid rgba(37, 99, 235, 0.35);
  font-size: 22px;
  line-height: 1;
  margin-top: 2px;
}

.ach-toast-content { min-width: 0; }

.ach-toast-title {
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
  margin-top: 1px;
}

.ach-toast-desc {
  margin-top: 4px;
  color: rgba(229, 231, 235, 0.9);
  font-size: 0.92rem;
  line-height: 1.25rem;
}

.ach-toast-reward {
  margin-top: 6px;
  color: rgba(191, 219, 254, 0.95);
  font-size: 0.9rem;
  font-weight: 600;
}

.ach-toast-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(229, 231, 235, 0.8);
  font-size: 22px;
  line-height: 1;
  padding: 0;
  margin-top: -2px;
  cursor: pointer;
  justify-self: end;
}

.ach-toast-close:hover { color: #ffffff; }

@keyframes achToastIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes achToastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

.lesson-card.gold {
position: relative;
border: 3px solid #d4a514; /* thicker, deeper gold */
border-radius: 16px;
background:
linear-gradient(
135deg,
#fffdf4 0%,
#fff7d6 45%,
#fffdf4 100%
);
box-shadow:
0 0 0 2px rgba(212, 165, 20, 0.35),
0 10px 22px rgba(212, 165, 20, 0.25);
}

.lesson-card.gold::before {
content: "";
position: absolute;
inset: -3px; /* lets the shine sit on the border */
border-radius: 18px;
background: linear-gradient(
135deg,
#b38700 0%,
#facc15 20%,
transparent 50%,
#facc15 80%,
#b38700 100%
);
opacity: 0.35;
pointer-events: none;
}

.lesson-card.gold .lesson-title {
color: #4a2c0a; /* darker brown-gold for contrast */
}

.lesson-card.gold .lesson-title::before {
content: "👑 ";
}

.lesson-card.gold:hover {
box-shadow:
0 0 0 3px rgba(212, 165, 20, 0.45),
0 16px 30px rgba(212, 165, 20, 0.35);
}

.lesson-card:not(.gold):hover {
background: linear-gradient(
180deg,
#ffffff 0%,
#f5f9ff 100%
);
border-color: #bfdbfe;
}

.lesson-card:not(.gold):hover .lesson-title {
color: #1e40af;
}

.lesson-card.gold:hover {
background:
linear-gradient(
135deg,
#fffdf6 0%,
#fff2c2 45%,
#fffdf6 100%
);
}

.lesson-card:hover .progress-fill {
filter: brightness(1.05);
}

.lesson-card.gold:hover .progress-fill {
filter: brightness(1.08);
}

.bs-tip {
position: relative;
cursor: help;
}

.bs-tip::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(6px);

background: linear-gradient(135deg, #0b2a5f, #1e40af);
color: white;
padding: 10px 14px;
border-radius: 14px;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;

opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
box-shadow: 0 12px 25px rgba(15, 23, 42, 0.35);
z-index: 50;
}

.bs-tip::before {
content: "";
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);

border-width: 6px;
border-style: solid;
border-color: #1e40af transparent transparent transparent;

opacity: 0;
transition: opacity 0.2s ease;
}

.bs-tip:hover::after,
.bs-tip:hover::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}

.lesson-media {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
overflow: hidden;
}

.bs-tip {
position: relative;
cursor: help;
}

.bs-tip::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(6px);
background: linear-gradient(135deg, #0b2a5f, #1e40af);
color: #ffffff;
padding: 10px 14px;
border-radius: 14px;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
box-shadow: 0 12px 25px rgba(15, 23, 42, 0.35);
z-index: 9999;
white-space: nowrap;
max-width: min(420px, 90vw);
text-align: left;


}

.bs-tip::before {
content: "";
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: #1e40af transparent transparent transparent;
opacity: 0;
transition: opacity 0.2s ease;
}

.bs-tip:hover::after,
.bs-tip:hover::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}

.bs-tip.tip-right::after {
left: 0;
transform: translateX(0) translateY(6px);
}

.bs-tip.tip-right::before {
left: 18px;
transform: translateX(0);
}

.bs-tip.tip-left::after {
left: auto;
right: 0;
transform: translateX(0) translateY(6px);
}

.bs-tip.tip-left::before {
left: auto;
right: 18px;
transform: translateX(0);
}

/* --- AUTO TOOLTIP EDGE FIX (roadmap lesson cards) --- */
@media (min-width: 900px) {
  /* Left column cards (1st of each row in a 3-col grid) */
  .roadmap-grid > a.lesson-card:nth-child(3n + 1) .bs-tip::after {
    left: 0;
    transform: translateX(0) translateY(6px);
  }
  .roadmap-grid > a.lesson-card:nth-child(3n + 1) .bs-tip::before {
    left: 18px;
    transform: translateX(0);
  }
  .roadmap-grid > a.lesson-card:nth-child(3n + 1) .bs-tip:hover::after {
    transform: translateX(0) translateY(0);
  }

  /* Right column cards (3rd of each row in a 3-col grid) */
  .roadmap-grid > a.lesson-card:nth-child(3n) .bs-tip::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(6px);
  }
  .roadmap-grid > a.lesson-card:nth-child(3n) .bs-tip::before {
    left: auto;
    right: 18px;
    transform: translateX(0);
  }
  .roadmap-grid > a.lesson-card:nth-child(3n) .bs-tip:hover::after {
    transform: translateX(0) translateY(0);
  }
}

/* --- TOPBAR TOOLTIPS OPEN DOWN --- */
#topbar-nav .bs-tip::after {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-6px);
}

#topbar-nav .bs-tip::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-color: transparent transparent #1e40af transparent;
}

#topbar-nav .bs-tip:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* --- WIDER TOOLTIP FOR STAT ROWS --- */
.stat-row.bs-tip::after {
  white-space: normal;
  max-width: 320px;
  line-height: 1.25;
  text-align: left;
}

.bs-tip.tip-down::after {
bottom: auto;
top: calc(100% + 10px);
}
.bs-tip.tip-down::before {
bottom: auto;
top: calc(100% + 2px);
border-color: transparent transparent #1e40af transparent;
}

/* ===== BrainSTEM tooltip override (paste at very bottom) ===== */
.bs-tip{
  position: relative;
  cursor: help;
}

.bs-tip::after{
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  background: linear-gradient(135deg, #0b2a5f, #1e40af);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.8rem;
  font-weight: 600;

  white-space: normal;          /* allow wrapping (fixes huge overlays) */
  max-width: 260px;             /* keeps bubble compact */
  line-height: 1.25;
  text-align: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.35);
  z-index: 999999;
}

.bs-tip::before{
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);

  border-width: 7px;
  border-style: solid;
  border-color: #1e40af transparent transparent transparent;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 999999;
}

.bs-tip:hover::after,
.bs-tip:hover::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.bs-tip.tip-right::after{ left: 0; transform: translateX(0) translateY(6px); text-align: left; }
.bs-tip.tip-right::before{ left: 18px; transform: translateX(0); }

.bs-tip.tip-left::after{ left: auto; right: 0; transform: translateX(0) translateY(6px); text-align: left; }
.bs-tip.tip-left::before{ left: auto; right: 18px; transform: translateX(0); }

/* show tooltip below the hovered element (fixes off-screen near top) */
.bs-tip.tip-down::after{
  bottom: auto;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
}
.bs-tip.tip-down::before{
  bottom: auto;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border-color: transparent transparent #1e40af transparent;
}
.bs-tip.tip-down:hover::after{
  transform: translateX(-50%) translateY(0);
}

/* Topbar: keep bubbles inside the viewport (fixes profile bubble cut-off) */
#topbar-nav .bs-tip::after{
  left: 0;
  transform: translateX(0) translateY(-6px);
  text-align: left;
}
#topbar-nav .bs-tip::before{
  left: 18px;
  transform: translateX(0);
}
#topbar-nav .bs-tip.tip-down:hover::after{
  transform: translateX(0) translateY(0);
}

.profile-icon {
  width: 45px; /* Adjust based on your navbar height */
  height: 45px;
  object-fit: cover; /* Ensures the image doesn't stretch if dimensions change */
  border-radius: 50%; /* This turns the square image into a circle */
  background-color: #f0f0f0; /* Fallback color */
  border: 2px solid #2ecc71; /* A nice "sciencey" green border */
  padding: 2px; /* Space between the border and the image */
  transition: transform 0.2s ease; /* smooth hover effect */
}

/* Optional: Add a hover effect for interactivity */
.profile-icon:hover {
  transform: scale(1.1);
  border-color: #27ae60;
  cursor: pointer;
}

/* ===== Duel History ===== */
.duel-history-panel{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,248,255,0.95));
  box-shadow: 0 10px 30px rgba(10, 30, 70, 0.10);
  padding: 18px 18px 10px;
}

.duel-history-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 6px 6px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.duel-history-title{
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.duel-history-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.duel-history-select{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.75);
  padding: 10px 12px;
  font-weight: 600;
  outline: none;
}

.duel-history-collapsible{
  margin-top: 14px;
}

.duel-history-collapsible summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.65);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  font-weight: 700;
}

.duel-history-collapsible summary::-webkit-details-marker{ display:none; }

.duel-history-collapsible summary .chev{
  opacity:0.8;
  transition: transform 0.18s ease;
}
.duel-history-collapsible[open] summary .chev{
  transform: rotate(180deg);
}

.duel-table-wrap{
  padding: 14px 6px 6px;
}

.duel-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.duel-table thead th{
  text-align:left;
  font-size: 0.88rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #334155;
  font-weight: 900;
  padding: 8px 10px;
}

.duel-table tbody tr.duel-row-win{
  background:
    linear-gradient(180deg, rgba(34,197,94,0.10), rgba(34,197,94,0.03)),
    #ffffff;
  border: 1px solid rgba(34,197,94,0.22);
}

.duel-table tbody tr.duel-row-loss{
  background:
    linear-gradient(180deg, rgba(239,68,68,0.10), rgba(239,68,68,0.03)),
    #ffffff;
  border: 1px solid rgba(239,68,68,0.22);
}

.duel-table tbody tr.duel-row-draw{
  background:
    linear-gradient(180deg, rgba(148,163,184,0.10), rgba(148,163,184,0.03)),
    #ffffff;
  border: 1px solid rgba(148,163,184,0.22);
}

/* Standardise single-row vs multi-row weight so nothing looks randomly bold */
.vs-row,
.vs-summary,
.vs-row-small{
  font-weight: 900;
  color: #0f172a;
}

.vs-mid{
  font-weight: 900;
  color: #64748b;
  padding: 0 6px;
}

.duel-table tbody tr{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 22px rgba(10,30,70,0.08);
}

.duel-table tbody td{
  padding: 14px 12px;
  vertical-align: middle;
}

.duel-table tbody tr td:first-child{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.duel-table tbody tr td:last-child{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

.duel-opponent{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}

.opp-ava{
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.opp-ava img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}


.result-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.3px;
  border: 1px solid rgba(0,0,0,0.10);
  white-space: nowrap;
}

.result-win{
  background: rgba(46, 204, 113, 0.18);
}
.result-loss{
  background: rgba(231, 76, 60, 0.18);
}

.result-icon{
  width:22px;
  height:22px;
  border-radius: 7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.65);
}

.lessons-details{
  display:inline-block;
}
.lessons-details summary{
  cursor:pointer;
  user-select:none;
  list-style:none;
  font-weight: 800;
  opacity:0.85;
}
.lessons-details summary::-webkit-details-marker{ display:none; }
.lessons-list{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lesson-chip{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.65);
  font-weight: 700;
  width: fit-content;
}

.duel-date{
  white-space: nowrap;
  opacity:0.75;
  font-weight: 700;
  text-align:right;
}
.duel-date-col{
  text-align:right;
}

/* ===== BrainSTEM: duel-history lesson stars ===== */
.lesson-stars-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.round-line{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:6px 0;
}

.round-label{
  font-size:0.85rem;
  font-weight:700;
  opacity:0.7;
}

.lesson-pair{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.lesson-name{
  font-weight:700;
}

.stars-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.stars{
  display:inline-flex;
  gap:3px;
  line-height:1;
  vertical-align:middle;
}

.star{
  font-size:0.95rem;
  opacity:0.95;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.10));
}

.star.off{
  opacity:0.25;
  filter:none;
}

.stars-tag{
  font-size:0.82rem;
  font-weight:700;
  opacity:0.65;
  min-width:58px;
}

/* Small screens: keep it tidy */
@media (max-width: 900px){
  .stars-tag{ min-width:48px; }
  .star{ font-size:0.9rem; }
}

.bs-tip {
  cursor: pointer;
}

.lb-avatar-img{
    width:44px;
    height:44px;
    border-radius:50%;
    overflow:hidden;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    border:3px solid #e2e8f0;
    box-shadow:0 2px 8px rgba(15,23,42,0.10);
}

.lb-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* This fixes the zoom issue */
    display: block;
    padding: 6px;         /* Keeps the image from touching the edges */
    border-radius: 50%;   /* Ensures the image itself is rounded */
}

.lb-avatar-emoji{
    font-size:22px;
    line-height:1;
}

/* Medal rings (match main leaderboard vibe) */
.lb-row-lesson.pos-1 .lb-avatar-img{
    border-color:#f59e0b;
    box-shadow:0 0 0 3px rgba(245,158,11,0.25), 0 2px 10px rgba(15,23,42,0.12);
}

.lb-row-lesson.pos-2 .lb-avatar-img{
    border-color:#94a3b8;
    box-shadow:0 0 0 3px rgba(148,163,184,0.25), 0 2px 10px rgba(15,23,42,0.12);
}

.lb-row-lesson.pos-3 .lb-avatar-img{
    border-color:#b45309;
    box-shadow:0 0 0 3px rgba(180,83,9,0.22), 0 2px 10px rgba(15,23,42,0.12);
}

.lb-avatar-img__img{
    width:100%;
    height:100%;
    object-fit:contain;   /* 🔑 show whole icon */
    display:block;
    padding:6px;          /* 🔑 breathing room inside ring */
}

.duel-lessons .lessons-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.75);
  cursor:pointer;
  font-weight:600;
  text-align:left;
}

.duel-lessons .lessons-caret{
  opacity:0.6;
  flex:0 0 auto;
}

.duel-lessons .lessons-panel{
  display:none;
  margin-top:10px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.55);
}

.duel-lessons .lessons-panel.open{
  display:block;
}

.round-line{
  padding:10px 0;
  border-top:1px solid rgba(0,0,0,0.06);
}
.round-line:first-child{ border-top:none; padding-top:0; }

.round-title{
  font-weight:800;
  font-size:0.95rem;
  margin-bottom:8px;
  opacity:0.85;
}

.who-line{
  display:grid;
  grid-template-columns: 90px 1fr auto;
  gap:10px;
  align-items:center;
  padding:6px 0;
}

.who-label{
  font-weight:800;
  opacity:0.7;
}

.lesson-stars{
  display:flex;
  gap:3px;
  font-size:0.95rem;
}

.lesson-stars .star.on{ opacity:1; }
.lesson-stars .star.off{ opacity:0.25; }

/* Make headers stronger */
.duel-table thead th{
  font-weight: 900;
  color: #1f2937;
  letter-spacing: 0.6px;
  font-size: 0.9rem;
}

/* Centre these columns (headers + cells) */
.duel-table th:nth-child(3),
.duel-table td:nth-child(3),
.duel-table th:nth-child(4),
.duel-table td:nth-child(4),
.duel-table th:nth-child(6),
.duel-table td:nth-child(6){
  text-align: center;
}

/* Matchups column spacing / clutter reduction */
.vs-list {
  margin: 0;
  padding: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vs-row-small{
  padding: 6px 0;
  font-size: 0.95rem;
  line-height: 1.2;
}

.vs-r-num{
  display: inline-block;
  width: 22px;
  opacity: 0.7;
}

.vs-mid{
  opacity: 0.5;
  padding: 0 8px;
}

/* career.html – CSS fixes */

/* Centre table headings */
.duel-table thead th{
  text-align:center;
}

/* Remove white capsule behind expanded lesson details */
.lessons-details summary{
  list-style:none;
  background:transparent;
  padding:0;
  border:none;
  box-shadow:none;
}
.lessons-details summary::-webkit-details-marker{
  display:none;
}

/* Smooth expand / collapse so it feels like row extension */
.lessons-list{
  margin-top:8px;
  padding-left:0;
}
.lessons-details .lessons-list{
  opacity:0;
  max-height:0;
  overflow:hidden;
  transform:translateY(-4px);
  transition:opacity .18s ease, max-height .22s ease, transform .18s ease;
}
.lessons-details[open] .lessons-list{
  opacity:1;
  max-height:220px;
  transform:translateY(0);
}

/* Numbering style (1. 2. 3.) instead of R1/R2 */
.vs-r-num{
  margin-right:6px;
  font-weight:600;
}

.duel-row.win{
  background: linear-gradient(90deg, rgba(46, 204, 113, 0.14), rgba(46, 204, 113, 0.06));
  border: 1px solid rgba(46, 204, 113, 0.28);
}
.duel-row.loss{
  background: linear-gradient(90deg, rgba(231, 76, 60, 0.14), rgba(231, 76, 60, 0.06));
  border: 1px solid rgba(231, 76, 60, 0.28);
}

.vs-row,
.vs-summary,
.vs-row-small{
  font-size: 16px;
}

.vs-r-num{
  display: inline-block;
  width: 22px;
  text-align: right;
  margin-right: 10px;
  font-weight: 900;
  opacity: 0.9;
}

.lessons-details summary,
.lessons-summary{
  background: transparent !important;
}
.lessons-details summary::-webkit-details-marker{
  display: none;
}

.duel-row.win,
tr.duel-row.win {
  background: rgba(34, 197, 94, 0.16) !important;
  border: 1px solid rgba(34, 197, 94, 0.18) !important;
}
.duel-row.loss,
tr.duel-row.loss {
  background: rgba(239, 68, 68, 0.14) !important;
  border: 1px solid rgba(239, 68, 68, 0.16) !important;
}

/* Expanded lessons: remove the weird white panel + unify typography */
.duel-lessons-compact,
.duel-lessons-expanded,
.duel-lessons-expanded * {
  background: transparent !important;
}
.duel-lessons-compact {
  font-size: 18px;
  font-weight: 700;
}
.duel-lessons-expanded {
  margin-top: 10px;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.duel-lessons-expanded .round-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0;
  font-size: 18px;
  font-weight: 700;
}
.duel-lessons-expanded .round-num {
  width: 26px;
  text-align: right;
  opacity: 0.85;
}
.duel-lessons-expanded .sep {
  opacity: 0.5;
  margin: 0 8px;
}

/* Headings centered */
.duel-history thead th {
  text-align: center !important;
}

/* Duel-history dropdown (career page) */
#duelHistoryLimit {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: linear-gradient(180deg, #ffffff, #f2f7ff);
  color: #1e2a44;

  border: 1px solid #cfe0ff;
  border-radius: 14px;

  padding: 10px 42px 10px 16px;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
  outline: none;

  box-shadow:
    0 4px 12px rgba(0, 90, 255, 0.08),
    inset 0 0 0 1px rgba(255,255,255,0.6);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a7cff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Hover */
#duelHistoryLimit:hover {
  background: linear-gradient(180deg, #ffffff, #eaf2ff);
  box-shadow:
    0 6px 18px rgba(0, 90, 255, 0.16);
}

/* Focus */
#duelHistoryLimit:focus {
  border-color: #6ea2ff;
  box-shadow:
    0 0 0 3px rgba(90, 124, 255, 0.25),
    0 6px 18px rgba(0, 90, 255, 0.18);
}

/* Dropdown options */
#duelHistoryLimit option {
  background: #ffffff;
  color: #1e2a44;
  font-weight: 500;
}

/* career.html (or style.css) */

/* Remove the score "bubble/pill" look */
.duel-score-pill,
.score-pill,
.duel-score,
td.score .pill,
td.score span {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* If your score element is the blue rounded badge specifically */
.duel-history .score-badge,
.duel-history .score-chip,
.duel-history .score-pill {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* =========================
   DUEL HISTORY TABLE FIX
   ========================= */

/* 1. The Table Container */
.duel-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed; /* CRITICAL: Allows ellipsis to work and fixes column widths */
}

/* 2. Column Widths (Adjusted to give Lessons maximum room) */
.duel-table th:nth-child(1) { width: 80px; }  /* Result */
.duel-table th:nth-child(2) { width: 180px; } /* Opponent */
.duel-table th:nth-child(3) { width: 80px; text-align: center; } /* Rounds */
.duel-table th:nth-child(4) { width: 110px; text-align: center; } /* Score */
.duel-table th:nth-child(5) { width: auto; }  /* Lessons (Takes remaining space) */
.duel-table th:nth-child(6) { width: 160px; text-align: right; } /* Date */

/* 3. Header Styling */
.duel-table thead th {
  padding: 14px 12px;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  color: #64748b;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* 4. Cell Styling (Vertical Alignment) */
.duel-table tbody td {
  padding: 12px;
  vertical-align: middle; /* Centers content vertically */
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

/* 5. STANDARDIZED LESSON ROW (The core fix) */
.vs-line {
  display: flex;
  align-items: center;
  gap: 10px; /* Space between number and text */
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.5;
  width: 100%;
}

/* The Number (1. 2. 3.) */
.vs-num {
  font-family: monospace;
  color: #94a3b8;
  font-weight: 700;
  min-width: 20px;
  flex-shrink: 0;
}

/* The Lesson Text (Truncates if too long) */
.vs-deck {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42%; /* Ensures two lessons fit side-by-side */
  color: #0f172a;
}

/* The Separator Dot */
.vs-sep {
  color: #cbd5e1;
  font-size: 0.6rem; /* Subtle dot size */
  display: flex;
  align-items: center;
}

/* 6. Dropdown/Details Styling */
.lessons-details {
  width: 100%;
}

.lessons-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-radius: 6px;
  transition: background 0.1s;
}

.lessons-details summary:hover {
  background: #f8fafc;
}

.lessons-details summary::-webkit-details-marker {
  display: none;
}



/* The Expanded List */
.vs-list {
  margin: 0;
  padding: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* =========================
   DUEL HISTORY TABLE FIX
   ========================= */

/* 1. The Table Container - STRICT LAYOUT */
.duel-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed; /* CRITICAL: This fixes the "squashed" columns */
}

/* 2. Column Widths - Give 'Lessons' all the room */
.duel-table th:nth-child(1) { width: 80px; }  /* Result */
.duel-table th:nth-child(2) { width: 180px; } /* Opponent */
.duel-table th:nth-child(3) { width: 80px; text-align: center; } /* Rounds */
.duel-table th:nth-child(4) { width: 110px; text-align: center; } /* Score */
.duel-table th:nth-child(5) { width: auto; }  /* Lessons (Takes all remaining space) */
.duel-table th:nth-child(6) { width: 160px; text-align: right; } /* Date */

/* 3. Header Styling */
.duel-table thead th {
  padding: 14px 12px;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  color: #64748b;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* 4. Cell Styling (Strict Vertical Center) */
.duel-table tbody td {
  padding: 12px;
  vertical-align: middle; /* Forces text to middle */
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

/* 5. STANDARDIZED LESSON ROW */
.vs-line {
  display: flex;
  align-items: center;
  gap: 12px; /* Space between number and text */
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.5;
  width: 100%;
}

/* The Number (1. 2. 3.) - Fixed width so they align perfectly */
.vs-num {
  font-family: monospace;
  color: #94a3b8;
  font-weight: 700;
  min-width: 20px; 
  flex-shrink: 0;
  text-align: right;
}

/* The Lesson Text - Auto truncation */
.vs-deck {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42%; /* Ensures two lessons fit side-by-side */
  color: #0f172a;
}

/* The Separator Dot */
.vs-sep {
  color: #cbd5e1;
  font-size: 0.6rem; /* Small, neat dot */
  display: flex;
  align-items: center;
}

/* 6. Dropdown/Details Styling */
.lessons-details {
  width: 100%;
}

.lessons-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-radius: 6px;
  transition: background 0.1s;
}

.lessons-details summary:hover {
  background: #f8fafc;
}

.lessons-details summary::-webkit-details-marker {
  display: none;
}

.lessons-details[open] .vs-chevron {
  transform: rotate(180deg);
  color: #64748b;
}

/* The Expanded List */
.vs-list {
  margin: 0;
  padding: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lessons-details summary {
  list-style: none;
  cursor: pointer;
  display: block;              /* so summary row renders exactly like the others */
  padding: 4px 0;
  border-radius: 6px;
  transition: background 0.12s ease;
}

.lessons-details summary::-webkit-details-marker {
  display: none;
}


/* Opponent column: more breathing room from Result */
.duel-cell.duel-opponent,
.duel-table tbody td:nth-child(2){
  padding-left: 18px;
}

/* Date: wrap, never overflow the table */
.duel-cell.duel-date,
.duel-table tbody td:nth-child(6){
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: right;
}

/* Duel-style custom dropdown */

.duel-history-dropdown {
  position: relative;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 16px;
  border-radius: 14px;

  background:
    linear-gradient(180deg, #ffffff, #f4f8ff);

  border: 1px solid rgba(59,130,246,0.35);

  font-weight: 900;
  color: #0f172a;

  cursor: pointer;

  box-shadow: 0 10px 20px rgba(2,6,23,0.06);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.dropdown-trigger:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 26px rgba(2,6,23,0.08);
}

.dropdown-chevron {
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5l4.5 4.8 4.5-4.8' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 160ms ease;
}

.duel-history-dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;

  min-width: 140px;
  padding: 6px;

  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  border-radius: 14px;

  border: 1px solid rgba(59,130,246,0.25);
  box-shadow: 0 18px 40px rgba(2,6,23,0.12);

  display: none;
  z-index: 50;
}

.duel-history-dropdown.open .dropdown-menu {
  display: block;
}

.dropdown-menu button {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;

  background: none;
  border: none;

  font-weight: 800;
  color: #0f172a;
  text-align: left;

  cursor: pointer;
}

.dropdown-menu button:hover {
  background: rgba(59,130,246,0.10);
}

.dropdown-menu button.active {
  background: rgba(59,130,246,0.18);
}

/* Add to the bottom of style.css */

/* Clickable Lesson Links in Duel History */
a.vs-deck {
  text-decoration: none;
  color: #2563eb; /* BrainSTEM Blue */
  cursor: pointer;
  transition: color 0.1s;
}

a.vs-deck:hover {
  color: #1e3a8a; /* Darker Navy on hover */
  text-decoration: underline;
}

/* Ensure the link respects the table layout (truncation) */
.vs-deck {
  display: block; /* Required for text-overflow to work on anchors */
  min-width: 0;
}

/* --- Clickable Lesson Text (Hidden Link Style) --- */

a.vs-deck {
  text-decoration: none;      /* No underline */
  color: inherit;             /* Inherit the parent's dark text color (#0f172a) */
  cursor: pointer;            /* Show pointer hand on hover */
  transition: color 0.1s;
}

a.vs-deck:hover {
  color: #2563eb;             /* Optional: Slight blue only when hovering */
  /* text-decoration: underline;  <-- Uncomment if you want a subtle underline on hover */
}

/* Ensure consistent font weight/size matches the non-link version */
.vs-deck {
  font-weight: 700;           /* Maintain bold weight */
  color: #0f172a;             /* Force dark color base */
  display: block;             /* Helpers for layout/truncation */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 1. Compact Result Button (Win/Loss Pill) --- */
.res-pill {
  min-width: 50px !important; /* Reduced from 74px */
  padding: 6px 8px !important; /* Tighter padding */
  gap: 4px !important;         /* Closer icon/text */
}

/* --- 2. Center Opponent Column (Horizontal & Vertical) --- */

/* Center the Table Header */
.duel-table thead th:nth-child(2) {
  text-align: center !important;
}

/* Center the Table Cell */
.duel-table tbody td:nth-child(2),
.duel-cell.duel-opponent {
  text-align: center !important;
  padding-left: 0 !important; /* Remove the old offset padding */
}

/* Center the Flex Wrapper inside the cell */
.opp-wrap{
  display: grid;
  grid-template-columns: 32px auto;
  column-gap: 10px;
  align-items: center;
}


/* --- CLEAN & LIGHT TABLE HEADER --- */
.duel-table thead th {
  background: #f8fafc;            /* Light/Clean background */
  color: #64748b;                 /* Muted Slate text */
  padding: 16px 12px !important;
  
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  
  border-bottom: 2px solid #e2e8f0; /* Crisp separator line */
  border-radius: 0;                 /* Clean edges */
  box-shadow: none;                 /* Remove the floating shadow */
  
  text-align: center !important;    /* Force ALL columns to center */
}

/* Optional: Slight color shift on hover for a modern feel */
.duel-table thead th:hover {
  background: #f1f5f9;
  color: #475569;
}

/* --- STYLISH & FRESH TABLE HEADER --- */
.duel-table thead th {
  /* Fresh Blue Gradient */
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  
  /* Deep Blue Text */
  color: #1e40af;
  
  padding: 18px 10px !important;
  font-size: 0.8rem;
  font-weight: 900; /* Extra bold to make it stand out */
  text-transform: uppercase;
  letter-spacing: 1px;
  
  /* A nice distinct border at the bottom */
  border-bottom: 2px solid #93c5fd;
  
  /* Force Center Alignment */
  text-align: center !important;
}

/* Rounded "Pill" Edges for the Header Row */
.duel-table thead th:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.duel-table thead th:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* --- UNIFIED "INTERESTING" SECTION CARDS --- */

/* 1. The Main Card Container */
.career-section {
  background: #ffffff;
  border-radius: 18px; /* Smooth rounded corners */
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06); /* Premium shadow */
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.career-section:hover {
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1); /* Lift effect on hover */
  transform: translateY(-2px);
  border-color: #cbd5e1;
}

/* 2. The Header Row (Fresh Blue Gradient) */
.career-header-row {
  /* Subtle, modern gradient background */
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border-bottom: 1px solid #e0f2fe;
  padding: 20px 24px;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  cursor: pointer;
  user-select: none;
}

.career-header-row:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
}

/* 3. Title Styling */
.cs-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cs-arrow {
  font-size: 1rem;
  color: #94a3b8;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 20px;
  display: flex; 
  align-items: center; justify-content: center;
}

.cs-title {
  font-size: 1.35rem;
  font-weight: 900;       /* Extra Bold */
  color: #0f172a;         /* Dark Navy */
  letter-spacing: -0.5px;
  display: flex; align-items: center; gap: 8px;
}

/* 4. Controls (Right Side) */
.cs-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 5. Custom Dropdown (Duel History) */
.cs-select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  font-size: 0.9rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
  transition: all 0.2s;
}

.cs-select:hover {
  border-color: #3b82f6;
  color: #1d4ed8;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.1);
}

/* 6. Progress Bar (Achievements) */
.cs-progress-pill {
  background: #e0f2fe;
  color: #0284c7;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid #bae6fd;
}

.cs-track {
  width: 120px;
  height: 10px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.cs-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  width: 0%;
  transition: width 1s ease;
  border-radius: 99px;
}

/* 7. Collapsible Behavior */
/* For Details Element */
details.career-section-details[open] .cs-arrow {
  transform: rotate(90deg);
  color: #3b82f6;
}
details.career-section-details summary {
  list-style: none;
  outline: none;
}
details.career-section-details summary::-webkit-details-marker {
  display: none;
}

/* For Div Element (Achievements) */
.ach-body { 
  display: block; 
  padding: 0; /* Let grid handle padding */
}
.ach-body.collapsed { display: none; }
.cs-arrow.collapsed-chevron { transform: rotate(-90deg); }

/* --- CAREER SECTIONS: "POP" STYLE --- */

/* 1. Main Card Styling */
.career-section {
  background: #ffffff;
  border-radius: 20px;
  /* Crisp Border + Deep Shadow */
  border: 1px solid #e2e8f0;
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.08), 0 5px 15px -3px rgba(0,0,0,0.03);
  margin-bottom: 35px;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover Lift */
.career-section:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -5px rgba(15, 23, 42, 0.12);
  border-color: #cbd5e1;
}

/* 2. Distinct Header Row */
.career-header-row {
  /* Subtle Blue-to-White Gradient */
  background: linear-gradient(90deg, #f0f9ff 0%, #ffffff 100%);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  /* Strong accent line on the left */
  border-left: 6px solid #2563eb; 
  border-bottom: 1px solid #f1f5f9;
}

.career-header-row:hover {
  background: linear-gradient(90deg, #e0f2fe 0%, #f8fafc 100%);
}

/* 3. Left Side: Icon + Title */
.cs-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cs-icon-circle {
  width: 42px;
  height: 42px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15);
  border: 2px solid #e0f2fe;
}

.cs-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.5px;
}

/* 4. Right Side: Controls */
.cs-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Chevron Arrow */
.cs-arrow {
  font-size: 0.9rem;
  color: #94a3b8;
  background: #f1f5f9;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
}

.career-header-row:hover .cs-arrow {
  background: #e2e8f0;
  color: #475569;
}

/* 5. Progress Bar (Achievements) */
.cs-track-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.8);
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid #e2e8f0;
}

.cs-progress-text {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0284c7;
}

.cs-track {
  width: 100px;
  height: 8px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}

.cs-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  width: 0%;
  border-radius: 99px;
  transition: width 1s ease;
}

/* 6. Custom Select Dropdown */
.cs-select {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  font-weight: 700;
  color: #334155;
  background: white;
  cursor: pointer;
  outline: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.cs-select:hover { border-color: #3b82f6; color: #1e3a8a; }

/* 7. Logic for Collapsing */
details.career-section-details summary { list-style: none; outline: none; }
details.career-section-details summary::-webkit-details-marker { display: none; }

/* Rotate Arrow Logic */
/* Default (Open): Point UP */
details.career-section-details[open] .cs-arrow { transform: rotate(180deg); }
/* Closed: Point DOWN (default state for div toggle) */

/* Achievements JS toggle logic override needed below */

.duel-table tbody tr:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(2,6,23,0.12);
  background: linear-gradient(
    180deg,
    rgba(37,99,235,0.18),
    rgba(37,99,235,0.06)
  );
}

.tb-user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;              /* space between name and title */
}

.tb-username {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.tb-title {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-transform: none;      /* remove all caps */
  letter-spacing: 0.2px;
}

.tb-username { 
  font-weight: 700; 
  font-size: 1.05rem;              /* bigger */
  color: #ffffff;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.35); 
}

.tb-title { 
  font-size: 0.9rem;               /* bigger */
  font-weight: 600;
  color: rgba(255,255,255,0.95);   /* stronger white */
  letter-spacing: 0.3px;
}

/* ACHIEVEMENT GRID – DARK UNIFORM BORDERS */

.achievement-card,
.achievement-tile {
  border: 2px solid #142a4f; /* dark navy */
  border-radius: 16px;
  box-shadow: none;
}

/* kill any accent strips or pseudo elements */
.achievement-card::before,
.achievement-card::after,
.achievement-tile::before,
.achievement-tile::after {
  content: none !important;
}

/* unlocked cards */
.achievement-card.unlocked,
.achievement-tile.unlocked {
  border-color: #1d3f7a; /* slightly brighter navy */
}

/* locked cards */
.achievement-card.locked,
.achievement-tile.locked {
  border-color: #9aa8bf; /* muted blue-grey */
}

/* ===============================
   ACHIEVEMENT GRID – FINAL STYLES
   =============================== */

.achievement-card,
.achievement-tile {
  border: 3px solid #142a4f;   /* SAME thickness everywhere */
  border-radius: 18px;
  box-sizing: border-box;
  background: #ffffff;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

/* unlocked */
.achievement-card.unlocked,
.achievement-tile.unlocked {
  border-color: #142a4f;       /* dark navy */
}

/* locked */
.achievement-card.locked,
.achievement-tile.locked {
  border-color: #8fa1bf;       /* muted blue-grey */
}

/* remove old accent strips */
.achievement-card::before,
.achievement-card::after,
.achievement-tile::before,
.achievement-tile::after {
  content: none !important;
}

/* hover effect – subtle blue wash */
.achievement-card:hover,
.achievement-tile:hover {
  background: #f1f6ff;         /* very light blue */
  box-shadow: 0 6px 18px rgba(20, 42, 79, 0.08);
}

/* ACHIEVEMENT GRID – FORCE UNIFORM BORDER (NO LEFT/BOTTOM THICKNESS) */

.achievement-card,
.achievement-tile {
  box-sizing: border-box !important;

  border-style: solid !important;
  border-color: #12284a !important;

  border-top-width: 4px !important;
  border-right-width: 4px !important;
  border-bottom-width: 4px !important;
  border-left-width: 4px !important;

  outline: none !important;
  box-shadow: none !important;

  background: #ffffff !important;
  border-radius: 18px !important;

  transition: background 0.18s ease, box-shadow 0.18s ease !important;
}

/* remove any accent bars / pseudo elements */
.achievement-card::before,
.achievement-card::after,
.achievement-tile::before,
.achievement-tile::after {
  content: none !important;
  display: none !important;
}

/* locked vs unlocked: colour only (NOT width) */
.achievement-card.locked,
.achievement-tile.locked {
  border-color: #7f92b2 !important;
}

.achievement-card.unlocked,
.achievement-tile.unlocked {
  border-color: #12284a !important;
}

/* hover – very light blue shading, still no border/size changes */
.achievement-card:hover,
.achievement-tile:hover {
  background: #eef5ff !important;
  box-shadow: 0 6px 18px rgba(18, 40, 74, 0.10) !important;
}

/* ===== ACHIEVEMENTS GRID SPACING ===== */
.achievements-grid {
  gap: 14px !important; /* reduced spacing */
}

/* ===== BASE CARD ===== */
.achievement-card,
.achievement-tile {
  box-sizing: border-box !important;

  border: 4px solid #12284a !important;
  border-radius: 18px !important;

  background: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;

  transition: background 0.18s ease, box-shadow 0.18s ease !important;
}

/* ===== UNLOCKED ===== */
.achievement-card.unlocked,
.achievement-tile.unlocked {
  background: #ffffff !important;
  border-color: #12284a !important;
}

/* hover for unlocked only */
.achievement-card.unlocked:hover,
.achievement-tile.unlocked:hover {
  background: #eef5ff !important;
  box-shadow: 0 6px 18px rgba(18, 40, 74, 0.12) !important;
}

/* ===== LOCKED (RESTORED GREY BLOCK STYLE) ===== */
.achievement-card.locked,
.achievement-tile.locked {
  background: #b8b8b8 !important;
  border-color: #9c9c9c !important;

  filter: grayscale(1);
}

/* prevent hover glow on locked */
.achievement-card.locked:hover,
.achievement-tile.locked:hover {
  background: #b8b8b8 !important;
  box-shadow: none !important;
}

/* ===== KILL ANY OLD ACCENT BARS ===== */
.achievement-card::before,
.achievement-card::after,
.achievement-tile::before,
.achievement-tile::after {
  content: none !important;
  display: none !important;
}

/* =========================
   MODULE NOTES (Slide Flow)
   ========================= */
.module-stage {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1));
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.module-stage-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.module-stage-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(59,130,246,0.18);
  background: rgba(59,130,246,0.08);
  color: rgba(30, 64, 175, 0.95);
  font-weight: 800;
  font-size: 0.82rem;
}

.module-stage-title {
  margin: 8px 0 0;
  font-size: 1.6rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.module-stage-sub {
  margin: 6px 0 0;
  color: #64748b;
  font-weight: 600;
}

.module-stage-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.module-btn {
  appearance: none;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.75);
  color: #0f172a;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.module-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.92);
}

.module-btn.primary {
  background: linear-gradient(135deg, rgba(59,130,246,0.14), rgba(14,165,233,0.12));
  border-color: rgba(59,130,246,0.22);
}

.module-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.module-slide-shell {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.9);
}

.module-slide {
  padding: 18px 18px 16px;
  min-height: 240px;
  animation: moduleSlideIn 220ms ease;
}

@keyframes moduleSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.module-slide h2, .module-slide h3 {
  margin: 0 0 10px;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.module-slide p, .module-slide li {
  color: rgba(2,6,23,0.92);
  line-height: 1.65;
  font-weight: 550;
}

.module-slide ul {
  padding-left: 18px;
  margin: 10px 0 0;
}

.module-slide .note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(59,130,246,0.18);
  background: rgba(59,130,246,0.08);
  color: rgba(30,64,175,0.95);
  font-weight: 650;
}

.module-slide-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.module-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}

.module-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(15,23,42,0.08);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}

.module-dot:hover { transform: scale(1.15); }
.module-dot.active {
  background: rgba(59,130,246,0.55);
  border-color: rgba(59,130,246,0.65);
}

.module-quiz-banner {
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(14,165,233,0.08));
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.module-quiz-banner .left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.module-quiz-banner .title {
  font-weight: 900;
  color: #0f172a;
}

.module-quiz-banner .sub {
  color: #64748b;
  font-weight: 650;
  font-size: 0.95rem;
}

/* =========================
   Career: Custom Duel History dropdown
   ========================= */

.cs-dd{
  position: relative;
  display: inline-block;
}

.cs-dd-native{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.cs-dd-btn{
  width: 140px;
  text-align: left;
}

.cs-dd-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 140px;
  background: linear-gradient(180deg, #ffffff, #eef5ff);
  border: 1px solid rgba(59,130,246,0.35);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(2,6,23,0.12);
  overflow: hidden;
  padding: 6px;
  display: none;
  z-index: 9999;
}

.cs-dd.open .cs-dd-menu{
  display: block;
}

.cs-dd-item{
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 800;
  color: #0f172a;
  cursor: pointer;
  user-select: none;
  transition: filter 120ms ease, transform 120ms ease, background 120ms ease;
}

.cs-dd-item:hover{
  background: rgba(59,130,246,0.10);
  filter: brightness(1.02);
}

.cs-dd-item:active{
  transform: translateY(1px);
}

.cs-dd-item.active{
  background: linear-gradient(180deg, rgba(59,130,246,0.16), rgba(59,130,246,0.08));
  border: 1px solid rgba(59,130,246,0.28);
}

/* Stronger outline for duel history dropdown button */
.cs-select,
.cs-dd-btn {
  border: 2px solid rgba(30, 64, 175, 0.45); /* darker blue outline */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 8px 20px rgba(30,64,175,0.12);
}

/* Dropdown menu itself */
.cs-dd-menu {
  border: 2px solid rgba(30, 64, 175, 0.45);
}

.cs-dd-btn:hover {
  border-color: rgba(30, 64, 175, 0.65);
}

/* Stronger outline for Duel History section */
.duel-history {
  border: 2px solid rgba(30, 64, 175, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 20px 40px rgba(30,64,175,0.10);
}

.ach-icon-img{
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  pointer-events: none;
}

.cs-dd { position: relative; width: 100%; }
.cs-dd-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
}
.cs-dd.open .cs-dd-btn { border-color: #94a3b8; }
.cs-dd-btn-text { font-weight: 700; color: #0f172a; }
.cs-dd-caret { color: #94a3b8; font-size: 0.85rem; }

.cs-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(2, 8, 23, 0.12);
  padding: 8px;
  z-index: 9999;
  display: none;
}
.cs-dd.open .cs-dd-menu { display: block; }

.cs-dd-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  color: #0f172a;
}
.cs-dd-item:hover { background: #eff6ff; }

/* Profile dropdown – match duel/career style */
#titleSelect {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #ffffff;
  border: 2px solid #cfe0ff;
  border-radius: 14px;

  padding: 14px 44px 14px 16px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2f55;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.6),
    0 8px 20px rgba(37, 99, 235, 0.08);

  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */
#titleSelect:hover {
  border-color: #2563eb;
  box-shadow:
    0 10px 26px rgba(37, 99, 235, 0.14);
}

/* Focus (click) */
#titleSelect:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.25),
    0 12px 28px rgba(37, 99, 235, 0.18);
}

/* Dropdown arrow */
#titleSelect {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

/* ===== Profile Title Dropdown (match Career style) ===== */

#titleSelect {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 14px 44px 14px 16px;

  border-radius: 14px;
  border: 2px solid #e2e8f0;

  background-color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;

  cursor: pointer;

  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 52%,
    calc(100% - 14px) 52%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

#titleSelect:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

#titleSelect:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Dropdown options */
#titleSelect option {
  font-weight: 500;
  padding: 10px;
}

#titleSelect option:checked {
  background: #2563eb;
  color: #ffffff;
}

.module-stage {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1));
  box-shadow: 0 10px 30px rgba(15,23,42,0.06);
}

.module-stage-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.module-stage-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(59,130,246,0.18);
  background: rgba(59,130,246,0.08);
  color: rgba(30, 64, 175, 0.95);
  font-weight: 800;
  font-size: 0.82rem;
}

.module-stage-title {
  margin: 8px 0 0;
  font-size: 1.6rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.module-stage-sub {
  margin: 6px 0 0;
  color: #64748b;
  font-weight: 600;
}

.module-stage-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.module-btn {
  appearance: none;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.75);
  color: #0f172a;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.module-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.92);
}

.module-btn.primary {
  background: linear-gradient(135deg, rgba(59,130,246,0.14), rgba(14,165,233,0.12));
  border-color: rgba(59,130,246,0.22);
}

.module-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.module-slide-shell {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.9);
}

.module-slide {
  padding: 18px 18px 16px;
  min-height: 240px;
  animation: moduleSlideIn 220ms ease;
}

@keyframes moduleSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.module-slide h2, .module-slide h3 {
  margin: 0 0 10px;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.module-slide p, .module-slide li {
  color: rgba(2,6,23,0.92);
  line-height: 1.65;
  font-weight: 550;
}

.module-slide ul {
  padding-left: 18px;
  margin: 10px 0 0;
}

.module-slide-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.module-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}

.module-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(15,23,42,0.08);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}

.module-dot:hover { transform: scale(1.15); }
.module-dot.active {
  background: rgba(59,130,246,0.55);
  border-color: rgba(59,130,246,0.65);
}

.module-quiz-banner {
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(14,165,233,0.08));
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.module-quiz-banner .left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.module-quiz-banner .title {
  font-weight: 900;
  color: #0f172a;
}

.module-quiz-banner .sub {
  color: #64748b;
  font-weight: 650;
  font-size: 0.95rem;
}

.module-node.locked { opacity: 0.35; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.module-node.done { border-color: #22c55e; background: #f0fdf4; color: #16a34a; }

/* Custom dropdown (div-based) — used by career + profile */
.cs-select { position: relative; }

.cs-native { display: none; }

.cs-dd-btn{
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  border: 2px solid #cfe0ff;
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.cs-dd-btn:hover{
  background: #f5f9ff;
  border-color: #9fc1ff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

.cs-dd-btn:active{
  transform: translateY(1px);
}

.cs-dd-btn:focus{
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18), 0 10px 22px rgba(15, 23, 42, 0.12);
}

.cs-dd-caret{
  margin-left: 12px;
  font-size: 0.85rem;
  color: #2563eb;
}

.cs-dd-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  z-index: 9999;
  display: none;
}

.cs-dd-menu.open{ display: block; }

.cs-dd-item{
  padding: 12px 14px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  background: #ffffff;
  transition: background .12s ease, color .12s ease;
}

.cs-dd-item:hover{
  background: #eef6ff;
}

.cs-dd-item.active{
  background: linear-gradient(180deg, #e8f1ff, #dbeafe);
  color: #0b2a6f;
}

.module-tree {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.module-tree-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.92);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.module-tree-node:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.module-tree-node .ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: centre;
  font-size: 18px;
  background: rgba(59,130,246,0.10);
}

.module-tree-node .t {
  font-weight: 900;
  color: #0f172a;
}

.module-tree-node .s {
  font-weight: 650;
  color: #64748b;
  font-size: 0.92rem;
}

.module-tree-node.locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.module-tree-node.done .ico {
  background: rgba(34,197,94,0.12);
}

.flow-img{
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(248,250,252,1);
  margin-top: 10px;
}

.flow-img{
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(248,250,252,1);
  margin-top: 10px;
}

.flow-complete {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flow-complete-title {
  font-size: 28px;
  font-weight: 900;
  color: #0f172a;
}
.flow-complete-xp {
  font-weight: 800;
  color: #2563eb;
}
.flow-complete-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.bs-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.55);
  z-index: 9999;
}
.bs-modal-card{
  width: min(520px, calc(100vw - 28px));
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(148,163,184,0.45);
  box-shadow: 0 30px 90px rgba(2,6,23,0.35);
  padding: 18px 18px 16px;
  backdrop-filter: blur(10px);
}
.bs-modal-title{
  font-size: 22px;
  font-weight: 1000;
  color: #0f172a;
  margin-bottom: 6px;
}
.bs-modal-text{
  color: #475569;
  font-weight: 750;
  line-height: 1.35;
}
.bs-modal-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.bs-track-wrap{
  width: min(980px, calc(100vw - 60px));
  margin: 0 auto;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 30px 90px rgba(2,6,23,0.28);
  backdrop-filter: blur(10px);
}
.bs-track-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 14px;
}
.bs-track-title{
  font-size: 20px;
  font-weight: 1000;
  color:#0f172a;
}
.bs-track-sub{
  color:#64748b;
  font-weight: 800;
}

.bs-track{
  position: relative;
  height: 120px;
  border-radius: 14px;
  padding: 32px 18px 10px;
  background: rgba(241,245,249,0.65);
  border: 1px solid rgba(148,163,184,0.25);
  overflow: hidden;
}

.bs-rail{
  position:absolute;
  left: 18px;
  right: 18px;
  top: 58px;
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.35);
}
.bs-fill{
  position:absolute;
  left: 18px;
  top: 58px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59,130,246,0.95), rgba(34,197,94,0.92));
  width: 0%;
  transition: width 900ms cubic-bezier(.2,.8,.2,1);
}

.bs-node{
  position:absolute;
  top: 28px;
  transform: translateX(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
  width: 120px;
  padding: 0;
}
.bs-node:disabled{
  cursor: not-allowed;
  opacity: 0.55;
}

.bs-node-ring{
  width: 52px;
  height: 52px;
  margin: 0 auto 8px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.95);
  border: 2px solid rgba(148,163,184,0.45);
  box-shadow: 0 10px 24px rgba(2,6,23,0.12);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.bs-node-icon{
  font-size: 22px;
}

.bs-node-label{
  font-weight: 900;
  color:#0f172a;
  line-height: 1.05;
  font-size: 14px;
}
.bs-node.unlocked .bs-node-ring{
  border-color: rgba(59,130,246,0.75);
}
.bs-node.done .bs-node-ring{
  border-color: rgba(34,197,94,0.75);
}
.bs-node.locked .bs-node-ring{
  filter: grayscale(0.25);
}

.bs-node:hover:not(:disabled) .bs-node-ring{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 32px rgba(2,6,23,0.18);
}

.bs-track-actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}
.flow-launch.ghost{
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(148,163,184,0.45);
}

/* style.css (paste at very bottom) */

/* ===== Unit bar "gold box" when unit is fully mastered ===== */
.unit-group.gold{
  border: 2px solid #fbbf24;
  box-shadow: 0 10px 26px rgba(251,191,36,0.22);
}

.unit-group.gold > .unit-header{
  position: relative;
}

.unit-group.gold > .unit-header::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(180deg, #fde68a, #fbbf24, #d97706);
}

/* keep the tooltip bubble inside the viewport on the right side */
.unit-stats-pill.bs-tip.tip-left::after{
  max-width: 240px;
}

details.unit-group {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: visible; /* was hidden: this was clipping the Unit Mastery hover popup */
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Unit fully mastered (gold treatment) */
details.unit-group.unit-complete summary.unit-header {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 55%, #fde68a 110%);
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.25);
}

details.unit-group.unit-complete summary.unit-header:hover {
  filter: brightness(1.05);
}

details.unit-group.unit-complete .unit-title span {
  opacity: 0.95;
  color: rgba(15, 23, 42, 0.85);
}

details.unit-group.unit-complete .unit-title h2 {
  color: #0f172a;
}

details.unit-group.unit-complete .unit-stats-pill {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #0f172a;
}

details.unit-group.unit-complete .unit-stats-pill b {
  color: rgba(15, 23, 42, 0.9);
}

details.unit-group.unit-complete .chevron {
  color: rgba(15, 23, 42, 0.75);
}

/* Gold Header Style */
.unit-group.unit-mastered .unit-header {
  background: linear-gradient(135deg, #fef9c3 0%, #fde047 100%);
  border-left: 5px solid #eab308; /* Darker gold border */
  color: #854d0e;
}

/* Optional: Make the pill inside look compatible */
.unit-group.unit-mastered .unit-stats-pill {
  background: rgba(255, 255, 255, 0.6);
  color: #854d0e;
  border: 1px solid #eab308;
}

/* === BrainSTEM Quiz Toolbar === */
.bs-qtbar{
  max-width: 980px;
  margin: 0 auto 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(2,6,23,0.10);
  overflow: hidden;
}

.bs-qtbar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.10);
}

.bs-qt-tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bs-qt-tab{
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(2,6,23,0.04);
  color: rgba(2,6,23,0.88);
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
  transition: box-shadow 0.15s ease, background 0.15s ease, transform 0.06s ease;
}

.bs-qt-tab:hover{
  box-shadow: 0 10px 22px rgba(2,6,23,0.10);
}

.bs-qt-tab.active{
  background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(14,165,233,0.14));
  border-color: rgba(59,130,246,0.35);
}

.bs-qt-right{
  display:flex;
  gap: 8px;
  align-items:center;
}

.bs-qt-mini{
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(248,250,252,1);
  color: rgba(2,6,23,0.88);
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
}

.bs-qt-mini:hover{
  box-shadow: 0 10px 22px rgba(2,6,23,0.10);
}

.bs-qt-panel{
  display:none;
  padding: 12px;
}

.bs-qt-panel.active{
  display:block;
}

.bs-qt-chipgrid{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bs-qt-chip{
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(248,250,252,1);
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 900;
  color: rgba(2,6,23,0.92);
  user-select:none;
  transition: box-shadow 0.15s ease, transform 0.06s ease;
}

.bs-qt-chip:hover{
  box-shadow: 0 10px 22px rgba(2,6,23,0.10);
}

.bs-qt-chip:active{
  transform: translateY(1px);
}

/* Periodic Table panel */
.bs-qt-ptwrap{
  overflow:auto;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.14);
  background: #fff;
}

.bs-qt-ptwrap img{
  width: 100%;
  min-width: 980px;
  display:block;
}

/* Calculator panel */
.bs-qt-calc{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.bs-qt-calc-display{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(248,250,252,1);
  padding: 10px 12px;
  font-weight: 900;
  font-size: 16px;
  outline: none;
}

.bs-qt-calc-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.bs-qt-calc-btn{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(248,250,252,1);
  padding: 12px 0;
  font-weight: 900;
  cursor:pointer;
}

.bs-qt-calc-btn:hover{
  box-shadow: 0 10px 22px rgba(2,6,23,0.10);
}

.bs-qt-calc-btn.primary{
  background: linear-gradient(135deg, rgba(59,130,246,1), rgba(14,165,233,1));
  border-color: rgba(59,130,246,0.55);
  color: #fff;
}

.bs-qt-calc-btn.danger{
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.25);
}

/* --- REVISED GOLD MASTERED UNIT --- */

/* 1. The Container Border */
details.unit-group.unit-mastered {
  border: 1px solid #d97706; /* distinct dark gold border */
}

/* 2. The Header Background */
details.unit-group.unit-mastered .unit-header {
  /* Richer, warmer gold gradient (top to bottom) */
  background: linear-gradient(to bottom, #fcd34d 0%, #fbbf24 100%); 
  color: #451a03; /* Very dark brown text for maximum readability */
}

/* 3. The Title Text */
details.unit-group.unit-mastered .unit-title h2 {
  color: #451a03; /* Dark brown/black */
  text-shadow: 0 1px 0 rgba(255,255,255,0.2); /* Subtle depth */
}

details.unit-group.unit-mastered .unit-title span {
  color: #78350f; /* Slightly lighter brown for the sub-label */
  font-weight: 700;
}

/* 4. The Stats Pill (The button on the right) */
details.unit-group.unit-mastered .unit-stats-pill {
  background: #ffffff; /* Solid white background */
  color: #b45309;      /* Dark gold text */
  border: 1px solid #d97706;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Lift it off the header */
  font-weight: 700;
}

/* 5. The Chevron */
details.unit-group.unit-mastered .chevron {
  color: #451a03; /* Make the arrow dark so it's visible */
}

/* --- FINAL GOLD MASTERED UNIT --- */

/* 1. The Container (Gradient Border Logic) */
details.unit-group.unit-mastered {
  /* This creates the gradient border effect */
  border: 4px solid transparent; /* Define thickness here */
  border-radius: 16px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  
  /* Layer 1: White background (inside), Layer 2: Gradient (border) */
  /* Border Gradient: Dark Bronze (Left) -> Bright Gold (Right) */
  background-image: 
    linear-gradient(to bottom, white, white), 
    linear-gradient(90deg, #78350f 0%, #b45309 30%, #fbbf24 100%);
    
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3); /* Gold glow shadow */
}

/* 2. The Header Bar (The Sheen) */
details.unit-group.unit-mastered .unit-header {
  border-radius: 12px; /* Matches inner radius */
  
  /* Metallic Sheen Gradient: Darker edges, shiny streak in middle */
  background: linear-gradient(110deg, #f59e0b 0%, #fbbf24 40%, #fde68a 50%, #fbbf24 60%, #f59e0b 100%);
  background-size: 200% 100%; /* Helps smooth the metallic look */
  
  color: #451a03;
  border-bottom: 1px solid rgba(255,255,255,0.4); /* Subtle bevel at bottom */
}

/* 3. The Text */
details.unit-group.unit-mastered .unit-title h2 {
  color: #451a03;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

details.unit-group.unit-mastered .unit-title span {
  color: #78350f;
  font-weight: 700;
  opacity: 0.9;
}

/* 4. The Mastery Bubble (High Contrast) */
details.unit-group.unit-mastered .unit-stats-pill {
  /* Deep Brown Background for max contrast */
  background: #451a03; 
  color: #ffffff;
  border: 2px solid #78350f;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* 5. The Chevron */
details.unit-group.unit-mastered .chevron {
  color: #451a03;
  font-weight: bold;
}

/* =========================================
   MASTER ACCORDION STYLES
   ========================================= */

/* --- 1. BASE CONTAINER (Wrapper) --- */
details.unit-group {
  margin-bottom: 20px;
  border-radius: 16px;
  overflow: hidden; /* Key for rounded corners */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  background: white; /* Content background */
}

/* --- 2. STANDARD UNIT HEADER (The Blue Bar) --- */
summary.unit-header {
  list-style: none;
  padding: 20px 24px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* BLUE GRADIENT BACKGROUND */
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
  
  /* White Text */
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

summary.unit-header:hover {
  filter: brightness(1.1); /* Slight highlight on hover */
}

summary.unit-header::-webkit-details-marker { display: none; }


/* --- STANDARD TEXT & ELEMENTS --- */
/* Subtitle (Unit ID) */
.unit-title span {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
  font-weight: 600;
  margin-bottom: 4px;
}

/* Main Title */
.unit-title h2 {
  margin: 0;
  font-size: 1.25rem;
  color: white; /* Pure White */
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* The Pill (Stats Button) */
.unit-stats-pill {
  background: rgba(255, 255, 255, 0.2); /* Glass effect */
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: white;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
}

.chevron {
  color: white;
  opacity: 0.8;
  transition: transform 0.3s;
}
details[open] .chevron { transform: rotate(180deg); }


/* =========================================
   GOLD MASTERED OVERRIDES (The "Gold Mode")
   ========================================= */

/* Container Border for Gold */
details.unit-group.unit-mastered {
  /* Gradient Border Trick */
  border: 4px solid transparent; 
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: 
    linear-gradient(white, white), 
    linear-gradient(90deg, #78350f 0%, #b45309 30%, #fbbf24 100%);
    
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.3);
}

/* Gold Header Background */
details.unit-group.unit-mastered .unit-header {
  border-radius: 0;
  
  /* Metallic Gold Sheen */
  background: linear-gradient(110deg, #f59e0b 0%, #fbbf24 40%, #fde68a 50%, #fbbf24 60%, #f59e0b 100%);
  background-size: 200% 100%;
  
  border-bottom: 1px solid rgba(255,255,255,0.4);
}

/* Gold Text Overrides (Dark Brown) */
details.unit-group.unit-mastered .unit-title h2 {
  color: #451a03; 
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

details.unit-group.unit-mastered .unit-title span {
  color: #78350f;
  opacity: 1;
}

details.unit-group.unit-mastered .chevron {
  color: #451a03;
  opacity: 1;
}

/* Gold Pill Override (Dark Brown Pill) */
details.unit-group.unit-mastered .unit-stats-pill {
  background: #451a03; 
  color: #ffffff;
  border: 2px solid #78350f;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  text-shadow: none;
}

/* =========================================
   STANDARD UNIT STYLES (Blue Gradient Border + Glow)
   ========================================= */

/* --- 1. BASE CONTAINER (Wrapper) --- */
details.unit-group {
  margin-bottom: 20px;
  border-radius: 16px;
  overflow: hidden; /* Keeps content inside the border */
  
  /* --- THE BORDER GLOW MAGIC --- */
  
  /* 1. Define the width of the border */
  border: 3px solid transparent; 
  
  /* 2. Paint the border using a Blue Gradient */
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: 
    linear-gradient(white, white), /* Inner content background */
    linear-gradient(90deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%); /* Border Gradient */
    
  /* 3. The Glow Effect (Blue/Cyan) */
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); 
  
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover Effect: Lift and stronger glow */
details.unit-group:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 25px rgba(59, 130, 246, 0.6);
}

/* --- 2. STANDARD UNIT HEADER (Inner Content) --- */
summary.unit-header {
  /* This stays exactly as you liked it */
  list-style: none;
  padding: 20px 24px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* The Blue Background for the Bar itself */
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
  
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

summary.unit-header::-webkit-details-marker { display: none; }

/* Gender Toggle Styles */
.gender-option {
    flex: 1;
    position: relative;
    cursor: pointer;
}

.gender-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.gender-option span {
    display: block;
    padding: 10px;
    background: #f3f4f6;
    border: 2px solid transparent;
    border-radius: 8px;
    text-align: center;
    color: #6b7280;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Hover State */
.gender-option:hover span {
    background: #e5e7eb;
}

/* Selected State */
.gender-option input:checked + span {
    background: #eff6ff;     /* Light Blue Bg */
    border-color: #3b82f6;   /* Blue Border */
    color: #2563eb;          /* Blue Text */
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
}

.btn-save:hover {
    background-color: #2563eb !important;
}

/* --- GLOSSARY STYLES --- */

/* The word in the text */
.glossary-term {
  border-bottom: 2px dashed #60a5fa;
  cursor: help;
  color: #1e3a8a;
}
.glossary-term:hover {
  background: #eff6ff;
  border-bottom-style: solid;
}

/* The Popup Bubble */
#glossary-popup {
  position: absolute;
  z-index: 99999;
  width: 280px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border: 1px solid #cbd5e1;
  display: none;
  overflow: hidden;
}

.g-head {
  background: #f8fafc;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  display: flex; justify-content: space-between; align-items: center;
}
.g-word { font-weight: 800; text-transform: capitalize; color: #0f172a; }
.g-badge { font-size: 0.65rem; font-weight: 900; padding: 2px 6px; border-radius: 4px; color: white; }
.g-badge.bio { background: #16a34a; }
.g-badge.chem { background: #ea580c; }
.g-badge.phys { background: #7c3aed; }

.g-body { padding: 14px; }
.g-def-formal { font-size: 0.9rem; color: #334155; margin-bottom: 10px; line-height: 1.4; }
.g-def-simple { font-size: 0.85rem; color: #0f766e; background: #ccfbf1; padding: 8px; border-radius: 6px; line-height: 1.4; }

.g-bank-btn {
  width: 100%; border: none; background: #f1f5f9; color: #64748b;
  padding: 10px; font-weight: 700; cursor: pointer; border-top: 1px solid #e2e8f0;
  transition: all 0.2s;
}
.g-bank-btn:hover { background: #e2e8f0; color: #0f172a; }
.g-bank-btn.saved { background: #fffbeb; color: #b45309; }

/* --- GLOSSARY POPUP CARD --- */
#glossary-popup {
    position: absolute;
    z-index: 10000;
    width: 340px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px); /* Glass effect */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 20px 40px -5px rgba(15, 23, 42, 0.15); /* Deep shadow */
    font-family: 'Segoe UI', sans-serif;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none; /* Click-through when hidden */
    display: block; /* We control visibility via opacity now */
}

#glossary-popup.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Header Section */
.pop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.pop-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    text-transform: capitalize;
    letter-spacing: -0.5px;
}

/* Subject Badges */
.pop-badge {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 20px;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.badge-bio  { background: linear-gradient(135deg, #16a34a, #15803d); }
.badge-chem { background: linear-gradient(135deg, #2563eb, #1d4ed8); } /* Blue for Chem now */
.badge-phys { background: linear-gradient(135deg, #ea580c, #c2410c); }

/* Body Content */
.pop-body {
    padding: 16px 20px;
}

.pop-def {
    font-size: 1rem;
    line-height: 1.6;
    color: #334155;
    margin-bottom: 16px;
}

/* ELI5 Box ("Simple Mode") */
.pop-eli5 {
    background: #f1f5f9;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-left: 4px solid #94a3b8; /* Default gray border */
}
.pop-eli5.bio  { background: #f0fdf4; border-color: #22c55e; }
.pop-eli5.chem { background: #eff6ff; border-color: #3b82f6; }
.pop-eli5.phys { background: #fff7ed; border-color: #f97316; }

.pop-eli5-icon { font-size: 1.2rem; line-height: 1; margin-top: 2px; }
.pop-eli5-text { font-size: 0.9rem; color: #475569; font-weight: 600; line-height: 1.5; }

/* Footer / Action Button */
.pop-footer {
    padding: 0 20px 20px;
}

.pop-btn {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: white;
    color: #64748b;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

.pop-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-1px);
}

/* Saved State (Green) */
.pop-btn.saved {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}
.pop-btn.saved:hover {
    background: #bbf7d0;
}

/* --- POPUP HEADER (Simplified) --- */
.pop-header {
    display: flex;
    justify-content: center; /* Centered title looks cleaner without the badge */
    align-items: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.pop-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    text-transform: capitalize;
    letter-spacing: -0.5px;
    margin: 0;
}

/* Remove the old badge styles (Optional, but keeps CSS clean) */
.pop-badge { display: none; } 

/* --- THE NEW "ADD TO BANK" BUTTON --- */
.pop-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    
    /* THE GRADIENT BORDER TRICK */
    background: 
        linear-gradient(#fff, #fff) padding-box, /* White inside */
        linear-gradient(90deg, #38bdf8 0%, #6366f1 100%) border-box; /* Gradient border */
    border: 2px solid transparent; /* Transparent real border to show gradient */
    
    color: #1e3a8a; /* Dark Blue Text */
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 4px 10px rgba(56, 189, 248, 0.1);
}

.pop-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(56, 189, 248, 0.25);
    /* Make the text slightly brighter blue on hover */
    color: #2563eb; 
}

.pop-btn:active {
    transform: translateY(0);
}

/* SAVED STATE (Solid Green for clear feedback) */
.pop-btn.saved {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) padding-box,
                linear-gradient(135deg, #22c55e 0%, #15803d 100%) border-box;
    color: white;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
}
.pop-btn.saved:hover {
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
    color: white;
}

/* --- POPUP HEADER (Simplified) --- */
.pop-header {
    display: flex;
    justify-content: center; /* Center the title */
    align-items: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.pop-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    text-transform: capitalize;
    letter-spacing: -0.5px;
    margin: 0;
}

/* Force hide badges in case JS still generates them */
.pop-badge { display: none !important; }

/* --- THE GRADIENT BORDER BUTTON --- */
.pop-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    
    /* 1. White background inside (padding-box) */
    /* 2. Gradient background outside (border-box) */
    background: 
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, #38bdf8 0%, #6366f1 100%) border-box;
        
    /* 3. Make the real border transparent so the gradient shows through */
    border: 2px solid transparent;
    
    /* Dark Blue Text */
    color: #1e3a8a; 
    
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px;
    
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(56, 189, 248, 0.1);
}

.pop-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(56, 189, 248, 0.25);
    color: #2563eb; /* Slightly brighter text on hover */
}

.pop-btn:active {
    transform: translateY(0);
}

/* SAVED STATE (Green Overlay) */
/* We override the gradient background with a solid green one */
.pop-btn.saved {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
    box-shadow: none;
}
.pop-btn.saved:hover {
    background: #bbf7d0;
    color: #14532d;
}

/* Stats Table Image Handling */
.stat-img-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-thumb {
    width: 60px;
    height: 40px;
    object-fit: cover; /* Keeps aspect ratio neat */
    border-radius: 4px;
    border: 1px solid #30363d;
    cursor: zoom-in;
    transition: transform 0.2s;
    background-color: #000;
}

.stat-thumb:hover {
    transform: scale(1.5); /* Pop out effect on hover */
    z-index: 10;
    border-color: #38bdf8; /* Blue border on hover */
}

/* --- VECTOR ARROW STYLES (For New Occlusion Tool) --- */
.shape-arrow-container {
  position: absolute;
  height: 20px;
  transform-origin: 0% 50%; /* Pivot at the tip */
  pointer-events: none; /* Let clicks pass through */
  z-index: 10;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); /* Shadow for visibility */
}

.arrow-head {
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 12px solid #ef4444; 
  margin-right: -1px; 
  flex-shrink: 0;
}

.arrow-shaft {
  height: 3px;
  background: #ef4444; 
  flex-grow: 1;
  border-radius: 0 2px 2px 0;
}

/* --- INLINE MODULE QUIZ STYLES --- */

/* The Container Card */
.flow-quiz-container {
  background: #f8fafc; /* Very light grey to separate it from the white notes */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin: 30px 0; /* Breathing room above/below */
  box-shadow: var(--shadow);
}

/* "Check Your Understanding" Header */
.flow-q-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* The Question Text */
.flow-q-text {
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 20px;
  font-size: 1.1rem;
  line-height: 1.5;
}

/* --- MCQ GRID (2 Columns) --- */
.flow-mcq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .flow-mcq-grid { grid-template-columns: 1fr; } /* Stack on mobile */
}

.flow-mcq-btn {
  background: #fff;
  border: 2px solid var(--border);
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-body);
  transition: all 0.2s ease;
  text-align: center;
  user-select: none;
}

.flow-mcq-btn:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
  transform: translateY(-2px);
}

/* Correct / Wrong States */
.flow-mcq-btn.correct {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  color: #15803d !important;
  transform: none;
  cursor: default;
}

.flow-mcq-btn.wrong {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
  opacity: 0.6;
}

/* --- TEXT INPUT (For Cloze/Basic) --- */
.flow-input-group {
  display: flex;
  gap: 10px;
}

.flow-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}

.flow-input:focus {
  border-color: var(--primary);
}

.flow-check-btn {
  background: var(--text-main);
  color: #fff;
  border: none;
  padding: 0 24px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.flow-check-btn:hover {
  opacity: 0.9;
}

/* --- FEEDBACK MESSAGE --- */
.flow-feedback {
  margin-top: 15px;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  display: none; /* Hidden by default */
  animation: fadeIn 0.3s ease;
}

.flow-feedback.success {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.flow-feedback.error {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* WIDESCREEN MODE for Split Quizzes */
.flow-card.quiz-mode {
  max-width: 900px !important; /* Forces the card to be wider */
  transition: max-width 0.3s ease;
}

/* Ensure the image container respects height */
.iq-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Make image scale down if needed to fit */
.iq-img-wrapper img {
  max-height: 400px; /* Cap height so it doesn't push feedback off screen */
  object-fit: contain;
  width: auto;
  max-width: 100%;
}

/* 4. ARCHIVE (Slate Blue) */
    .card-archive { border-bottom: 6px solid #64748b; }
    .card-archive .card-title { color: #475569; }

    .card-archive:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(100, 116, 139, 0.25);
        border-color: #64748b;
    }
    .card-archive:hover .card-media div { transform: scale(1.1); transition: transform 0.5s ease; }
    .card-archive:hover .card-foot {
        background: #64748b;
        color: white;
        box-shadow: 0 4px 10px rgba(100, 116, 139, 0.4);
    }

    /* 4. ARROWS (Fixed Visibility) */
    .shape-arrow-container {
        position: absolute;
        z-index: 20;
        pointer-events: none;
        transform-origin: 0 50%; /* Pivot from the tail */
        display: flex;
        align-items: center;
        /* CRITICAL: No width property here. We let the JS set the width inline. */
    }

    /* The arrowhead needs content-box to render borders correctly */
    .arrow-head {
        width: 0; 
        height: 0; 
        border-style: solid;
        box-sizing: content-box; /* Necessary for border-based shapes */
        background: transparent;
        flex-shrink: 0; /* Ensures head stays pointing shape */
    }
    
    .arrow-shaft {
        flex-grow: 1; /* Fills the rest of the container's width */
        height: 3px;  /* Thickness of the line */
        background-color: inherit; /* Inherits color from parent */
        box-sizing: border-box;
    }

    /* --- QUESTION & MS BUTTON GROUP --- */
    .q-group {
        display: inline-flex;
        align-items: center;
        margin: 4px;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.03);
        transition: all 0.2s;
    }
    .q-group:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        border-color: #cbd5e1;
    }

    /* The Question Link (Primary) */
    .q-btn {
        display: inline-block;
        padding: 6px 10px;
        background: white;
        color: #0f172a;
        font-weight: 700;
        font-size: 0.85rem;
        text-decoration: none;
        border-right: 1px solid #f1f5f9;
    }
    .q-btn:hover {
        background: #f0f9ff;
        color: #0284c7;
    }

    /* The Mark Scheme Link (Secondary) */
    .ms-btn {
        display: inline-block;
        padding: 6px 8px;
        background: #f8fafc;
        color: #94a3b8;
        font-size: 0.75rem;
        font-weight: 600;
        text-decoration: none;
    }
    .ms-btn:hover {
        background: #ecfdf5;
        color: #059669; /* Green for Mark Scheme */
    }

    /* --- FILTER DROPDOWN (Mini Version) --- */
    .custom-select { position: relative; cursor: pointer; user-select: none; font-size: 0.85rem; }
    .select-selected {
        background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 12px;
        font-weight: 700; color: #334155; display: flex; justify-content: space-between; align-items: center;
    }
    .select-items {
        position: absolute; background: white; top: 110%; left: 0; right: 0; z-index: 99;
        border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        display: none; overflow: hidden;
    }
    .select-show { display: block; }
    .select-items div { padding: 8px 12px; cursor: pointer; transition: background 0.1s; }
    .select-items div:hover { background: #f0f9ff; color: #0284c7; }

    /* --- EXAM ROWS --- */
    .exam-row { display: flex; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
    .exam-row:last-child { border-bottom: none; }
    
    .exam-label {
        width: 120px; font-weight: 800; color: #475569; font-size: 0.8rem; flex-shrink: 0;
        padding-top: 6px; /* Align with buttons */
    }

    .exam-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

    /* --- BUTTONS WITH TAGS --- */
    .q-group {
        display: inline-flex; align-items: center; gap: 0;
        background: white; border: 1px solid #cbd5e1; border-radius: 6px;
        overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        transition: transform 0.2s;
    }
    .q-group:hover { transform: translateY(-2px); border-color: #38bdf8; }

    /* Paper Tag (P2, P4, P6) */
    .paper-tag {
        background: #f1f5f9; color: #64748b; font-size: 0.65rem; font-weight: 800;
        padding: 6px 6px; border-right: 1px solid #e2e8f0;
        display: flex; align-items: center; justify-content: center;
    }
    
    /* Color coding for papers */
    .paper-tag.p2 { color: #d97706; background: #fffbeb; } /* Orange for MCQ */
    .paper-tag.p4 { color: #0284c7; background: #e0f2fe; } /* Blue for Theory */
    .paper-tag.p6 { color: #059669; background: #ecfdf5; } /* Green for Prac */

    .q-btn {
        display: inline-block; padding: 6px 10px; background: white; color: #334155;
        font-weight: 700; font-size: 0.8rem; text-decoration: none;
    }
    .q-btn:hover { background: #f8fafc; color: #0f172a; }

    .ms-btn {
        display: inline-block; padding: 6px 8px; background: #f8fafc; color: #94a3b8;
        font-size: 0.7rem; font-weight: 700; text-decoration: none; border-left: 1px solid #e2e8f0;
    }
    .ms-btn:hover { background: #10b981; color: white; }


    /* --- QUESTION STATS MODAL --- */
.stats-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.2s ease;
}

.stats-modal {
    background: white; width: 90%; max-width: 600px; max-height: 85vh;
    border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    display: flex; flex-direction: column; overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stats-header {
    padding: 20px; border-bottom: 1px solid #e2e8f0;
    display: flex; justify-content: space-between; align-items: center;
    background: #f8fafc;
}

.stats-header h3 { margin: 0; font-size: 1.25rem; color: #0f172a; }
.close-stats-btn {
    background: #e2e8f0; border: none; padding: 6px 12px;
    border-radius: 8px; cursor: pointer; font-weight: 600; color: #475569;
}
.close-stats-btn:hover { background: #cbd5e1; color: #1e293b; }

.stats-content { padding: 20px; overflow-y: auto; }

/* Grid for the 4 big stats */
.stats-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px;
}
.stat-card {
    background: #f1f5f9; padding: 15px; border-radius: 10px; text-align: center;
    border: 1px solid #e2e8f0;
}
.stat-card small { display: block; color: #64748b; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.stat-card strong { font-size: 1.2rem; color: #0f172a; }

/* History List */
.history-list { list-style: none; padding: 0; margin: 0; }
.history-item {
    display: flex; justify-content: space-between; padding: 12px;
    border-bottom: 1px solid #f1f5f9; font-size: 0.9rem;
}
.history-item:last-child { border-bottom: none; }
.history-item.correct { border-left: 4px solid #22c55e; background: #f0fdf4; }
.history-item.incorrect { border-left: 4px solid #ef4444; background: #fef2f2; }

.quiz-sort-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    min-height: 50px; /* Ensures container doesn't collapse */
}

.quiz-sort-btn {
    padding: 12px 24px;
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    min-width: 60px;
}

.quiz-sort-btn.selected {
    background: #f0f0f0;
    color: #ccc;
    border-color: #ddd;
    transform: scale(0.95);
}

.quiz-order-item {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    padding: 12px;
    margin: 8px 0;
    border-radius: 8px;
    cursor: grab;
    display: flex;
    align-items: center;
    font-weight: 500;
}
.quiz-order-item:active { cursor: grabbing; }

/* Add this to style.css */
.slide-image {
    width: 100%;
    max-width: 450px; /* limits width on big screens */
    max-height: 25vh; /* limits height to 25% of viewport height */
    height: auto;
    object-fit: contain;
    display: block;
    margin: 10px auto;
    border-radius: 8px;
}

/* Style for the Flag button in the quiz */
.flag-btn {
    background: none;
    border: 1px solid #ddd;
    color: #666;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9em;
}

.flag-btn.active {
    background-color: #ffe6e6;
    color: #d9534f;
    border-color: #d9534f;
}

/* Style for the flagged item in the Stats list */
.stat-item.flagged-issue {
    border-left: 4px solid #d9534f; /* Red marker on the side */
    background-color: #fff5f5;
}

.stat-item.flagged-issue h4 {
    color: #d9534f; /* Make the title red */
}

/* Optional: Add a little "Flagged" label */
.flag-label {
    font-size: 0.8em;
    color: #d9534f;
    margin-left: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

/* --- GLOSSARY STYLES (Less Intrusive) --- */

/* Base Style: Subtle dotted line, same color as text */
.glossary-term {
  border-bottom: 1px dotted #94a3b8; /* Thin, slate-grey dotted line */
  cursor: help;
  color: inherit; /* Keeps the text color the same as surrounding text */
  transition: all 0.2s ease;
}

/* Hover State: Becomes obvious only when interacted with */
.glossary-term:hover {
  background: rgba(59, 130, 246, 0.1); /* Light blue highlight */
  border-bottom: 2px solid #3b82f6;     /* Solid blue underline */
  color: #1e40af;                       /* Dark blue text */
}

/* --- DISABLE GLOSSARY IN HEADINGS --- */
/* This forces glossary terms inside headers to look/act like normal text */
h1 .glossary-term,
h2 .glossary-term,
h3 .glossary-term,
h4 .glossary-term,
h5 .glossary-term,
h6 .glossary-term {
  border-bottom: none !important;
  color: inherit !important;
  cursor: inherit !important;
  background: transparent !important;
  pointer-events: none !important; /* Prevents the popup from triggering */
}

/* --- 1. CENTER THE QUIZ CONTAINER --- */
#quiz-mount {
  /* Make the container take up the full visible screen height (minus nav bar approx 60px) */
  min-height: calc(100vh - 70px); 
  width: 100%;
  
  /* Flexbox Centering Magic */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers Vertically */
  align-items: center;     /* Centers Horizontally */
  
  padding: 20px;
  box-sizing: border-box;
}

/* --- 2. CONSTRAIN THE CARD SIZE --- */
.quiz-card {
  width: 100%;
  max-width: 750px; /* Keep your preferred width */
  
  /* Force the card to NEVER be taller than the screen */
  max-height: 85vh; 
  
  /* If content is too long, scroll INSIDE the card, not the whole page */
  overflow-y: auto; 
  
  /* Reset margins since flexbox handles centering now */
  margin: 0 !important;
  
  /* Ensure relative positioning for your new Flag button */
  position: relative; 
  
  /* Optional: Smooth scrolling */
  scroll-behavior: smooth;
}

/* --- 3. CUSTOM SCROLLBAR (Optional - Makes it look cleaner) --- */
.quiz-card::-webkit-scrollbar {
  width: 8px;
}
.quiz-card::-webkit-scrollbar-track {
  background: transparent;
}
.quiz-card::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}
.quiz-card::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* --- 1. CENTER THE QUIZ CONTAINER --- */
#quiz-mount {
  /* Full viewport height minus header */
  min-height: calc(100vh - 70px); 
  width: 100%;
  
  /* Flexbox Centering */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertical Center */
  align-items: center;     /* Horizontal Center */
  
  padding: 10px;
  box-sizing: border-box;
}

/* --- 2. CONSTRAIN THE CARD --- */
.quiz-card {
  width: 100%;
  max-width: 750px; 
  
  /* Prevent pushing off screen */
  max-height: 85vh; 
  overflow-y: auto; /* Scroll INSIDE the card if needed */
  
  /* Reset layout */
  margin: 0 !important;
  position: relative; /* Anchor for the Flag button */
  
  /* Aesthetics */
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1);
}

/* --- 3. FLAG BUTTON (High Visibility Fix) --- */
.q-flag-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  
  /* Force visibility */
  z-index: 100; 
  opacity: 0.4; /* Visible but subtle (was 0.1) */
  
  /* Styling */
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.q-flag-btn:hover {
  opacity: 1;
  background: #fee2e2; /* Light red hover */
  border-color: #ef4444;
  transform: scale(1.1);
}

/* Scrollbar polish for the internal card scroll */
.quiz-card::-webkit-scrollbar { width: 6px; }
.quiz-card::-webkit-scrollbar-track { background: transparent; }

/* Module quiz overlay styles */
#quizModuleOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: none; /* toggled via JS */
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#quizModuleOverlay .flow-shell {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#quizModuleOverlay .flow-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}

#quizModuleOverlay .flow-progress {
  flex: 1;
  height: 12px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}

#quizModuleOverlay .flow-progress-bar {
  height: 100%;
  width: 0%;
  background: #2563eb;
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}

#quizModuleOverlay .flow-card {
  padding: 20px 20px;
  flex: 1;
  overflow-y: auto;
}

#quizModuleOverlay .flow-bottom {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
}

#quizModuleOverlay .flow-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

#quizModuleOverlay .flow-btn.primary {
  background: #0b2a5f;
  color: white;
}

#quizModuleOverlay .flow-btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Remove colored top border and match module card styling */
#quizModuleOverlay .q-container {
  border-top: none;
  border: 2px solid #e2e8f0;
  box-shadow: 0 8px 0 #e2e8f0;
  border-radius: 24px;
  padding: 22px 42px;
}

/* Prevent default quiz-mount height inside overlay */
#quizModuleOverlay #quiz-mount {
  position: static;
  height: auto;
  min-height: auto;
  width: 100%;
  flex: none;
  padding: 0;
}

.quiz-card::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }

/* --- 1. QUIZ CONTAINER (The Layout Wrapper) --- */
#quiz-mount {
  /* 1. Fit to screen, minus the Topbar height (approx 70px) */
  height: calc(100vh - 70px);
  width: 100%;
  
  /* 2. Flexbox Centering */
  display: flex;
  flex-direction: column;
  align-items: center; 
  /* 'center' puts it in the middle, 'flex-start' puts it at the top. 
     Using center is good, provided we constrain the child height. */
  justify-content: center; 
  
  /* 3. Safety Padding */
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden; /* Prevents double scrollbars */
}

/* --- 2. QUIZ CARD (The White Box) --- */
.quiz-card {
  width: 100%;
  max-width: 750px;
  
  /* 4. TIGHTER PADDING (Fixes "Insane" padding) */
  padding: 20px 24px; /* Reduced from likely 40px */
  
  /* 5. INTERNAL SCROLLING (Crucial) 
     We cap the height at 75% of the viewport. 
     This leaves 25% for the Topbar and HUD. */
  max-height: 75vh; 
  overflow-y: auto; 
  
  /* Aesthetics */
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  position: relative; /* Anchor for Flag Button */
  margin: 0; /* Remove external margins to let Flexbox handle it */
}

/* Scrollbar Polish */
.quiz-card::-webkit-scrollbar { width: 6px; }
.quiz-card::-webkit-scrollbar-track { background: transparent; }
.quiz-card::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }


/* --- 3. FLAG BUTTON (High Visibility) --- */
.q-flag-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  
  opacity: 0.5; /* Visible but not distracting */
  transition: all 0.2s;
}

.q-flag-btn:hover {
  opacity: 1;
  background: #fee2e2;
  border-color: #ef4444;
  transform: scale(1.1);
}

/* --- 1. LAYOUT CONTAINER --- */
#quiz-mount {
  /* Use absolute positioning to fill the space between Header and Bottom */
  position: absolute;
  top: 70px; /* Below Topbar */
  bottom: 0; 
  left: 0; 
  right: 0;
  
  /* Flexbox Centering */
  display: flex;
  justify-content: center; /* Center Horizontal */
  align-items: center;     /* Center Vertical */
  
  padding: 20px;
  overflow: hidden; /* No scroll on the background */
  background-color: #f8fafc; /* Ensure bg color matches page */
}

/* --- 2. THE CARD (White Box) --- */
.quiz-card {
  width: 100%;
  max-width: 800px; /* Slightly wider for better text flow */
  
  /* Height Logic: */
  /* Auto height for short questions, but cap it for long ones */
  height: auto; 
  max-height: calc(100vh - 140px); /* Leave space for Header (70px) + Padding */
  
  /* Aesthetics */
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 40px -5px rgba(0,0,0,0.1);
  padding: 30px; /* Comfortable padding restored */
  
  /* Scroll handling */
  overflow-y: auto; 
  position: relative; 
  display: flex;
  flex-direction: column;
}

/* --- 3. FLAG BUTTON (Subtle & Functional) --- */
.q-flag-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 50;
  
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  opacity: 0.3;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity 0.2s;
}

.q-flag-btn:hover {
  opacity: 1;
  background: #f1f5f9;
}

/* Scrollbar Styling */
.quiz-card::-webkit-scrollbar { width: 8px; }
.quiz-card::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.quiz-card::-webkit-scrollbar-track { background: transparent; }

    /* Module-style quiz overlay for lesson quiz */
#quizModuleOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: none; /* shown/hidden by JS */
  padding: 0;
}

#quizModuleOverlay .flow-shell {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#quizModuleOverlay .flow-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}

#quizModuleOverlay .flow-progress {
  flex: 1;
  height: 12px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}

#quizModuleOverlay .flow-progress-bar {
  height: 100%;
  width: 0%;
  background: #2563eb;
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}

#quizModuleOverlay .flow-card {
  padding: 20px 20px;
  flex: 1;
  overflow-y: auto;
}

#quizModuleOverlay .flow-bottom {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
}

#quizModuleOverlay .flow-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

#quizModuleOverlay .flow-btn.primary {
  background: #0b2a5f;
  color: white;
}

#quizModuleOverlay .flow-btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Override q-container style inside overlay: remove yellow bar and match module card */
#quizModuleOverlay .q-container {
  border-top: none;
  border: 2px solid #e2e8f0;
  box-shadow: 0 8px 0 #e2e8f0;
  border-radius: 24px;
  padding: 22px 42px;
}


/* ============================
   FORCE LESSON QUIZ = FULL-PAGE MODULE (OVERRIDES)
   ============================ */

#quizModuleOverlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #f8fafc !important;
  padding: 0 !important;
  margin: 0 !important;
  display: none; /* JS sets this */
  z-index: 999999 !important;
  overflow: hidden !important;
}

/* if your overlay also has flow-overlay class, force it too */
#quizModuleOverlay.flow-overlay {
  align-items: stretch !important;
  justify-content: stretch !important;
}

/* the outer shell MUST fill the viewport */
#quizModuleOverlay .flow-shell {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #f8fafc !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* top bar like module */
#quizModuleOverlay .flow-top {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 14px 24px !important;
}

/* progress bar full width */
#quizModuleOverlay .flow-progress {
  height: 12px !important;
  background: #e2e8f0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

#quizModuleOverlay .flow-progress-bar {
  height: 100% !important;
  width: 0%;
  background: #58cc02 !important;
  border-radius: 999px !important;
}

/* the main quiz area MUST stretch */
#quizModuleOverlay .flow-card,
#quizModuleOverlay .flow-slide {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 10px 24px 0 24px !important;
  overflow: auto !important;
}

/* make the quiz question card look like module inner card */
#quizModuleOverlay .q-container {
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 8px 0 #e2e8f0 !important;
  border-radius: 24px !important;
  padding: 22px 42px !important;
  background: #ffffff !important;
}

/* ensure quiz-mount is not constrained */
#quizModuleOverlay #quiz-mount {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

/* bottom bar like module */
#quizModuleOverlay .flow-bottom,
#quizModuleOverlay .quiz-footer {
  flex: 0 0 auto !important;
  width: 100% !important;
  background: #ffffff !important;
  border-top: 2px solid #e2e8f0 !important;
  padding: 16px 24px !important;
}

#quizModuleOverlay .flow-bottom > *,
#quizModuleOverlay .quiz-footer > * {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* ============================
   LESSON QUIZ HUD BEAUTIFY (OVERRIDES)
   ============================ */

/* top row layout */
#quizModuleOverlay .flow-top {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 18px 24px !important;
}

/* progress bar container */
#quizModuleOverlay .flow-progress {
  height: 14px !important;
  background: #e5e7eb !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: inset 0 2px 0 rgba(0,0,0,0.06) !important;
}

/* progress fill */
#quizModuleOverlay .flow-progress-bar {
  height: 100% !important;
  width: 0%;
  background: #58cc02 !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.12) !important;
}

/* meta row (title + pills) */
#quizModuleOverlay .flow-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

/* title */
#quizModuleOverlay #quizTitle {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: #0f172a !important;
}

/* pill row */
#quizModuleOverlay .hud-stats-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* timer + score pills */
#quizModuleOverlay .hud-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  border: 2px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 6px 0 #e2e8f0 !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  min-width: 132px !important;
  justify-content: center !important;
}

/* timer pill accent */
#quizModuleOverlay .hud-pill.timer {
  border-color: #fde68a !important;
  box-shadow: 0 6px 0 #fde68a !important;
}

/* score pill accent */
#quizModuleOverlay .hud-pill.score {
  border-color: #bfdbfe !important;
  box-shadow: 0 6px 0 #bfdbfe !important;
}

/* ================================
   LESSON QUIZ = MODULE LAYOUT
   ================================ */

#quizModuleOverlay {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start !important;

  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  background: var(--bg, #f8fafc);
  padding: 0;
}

#quizModuleOverlay .quiz-stage {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
  padding: 12px;
}

#quizModuleOverlay .slide-card {
  width: 100%;
  max-width: 900px;

  max-height: calc(100vh - 160px);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
}


/* Add to style.css */

/* The Rarity Glows */
.rarity-common    { box-shadow: 0 0 10px #94a3b8; border-color: #94a3b8 !important; }
.rarity-rare      { box-shadow: 0 0 15px #3b82f6; border-color: #3b82f6 !important; }
.rarity-epic      { box-shadow: 0 0 20px #a855f7; border-color: #a855f7 !important; animation: pulse-purple 2s infinite; }
.rarity-legendary { box-shadow: 0 0 30px #eab308; border-color: #eab308 !important; animation: shine-gold 1s infinite; }

@keyframes shine-gold {
  0% { box-shadow: 0 0 10px #eab308; }
  50% { box-shadow: 0 0 40px #fde047; }
  100% { box-shadow: 0 0 10px #eab308; }
}

/* The Loot Modal */
#loot-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 10000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.loot-crate {
    width: 150px; height: 150px;
    background: #1e293b;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem;
    cursor: pointer;
    transition: transform 0.1s;
    border: 4px solid #fff;
}

.loot-crate:active { transform: scale(0.95); }

.loot-reveal {
    animation: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    color: white;
}

.loot-item-icon { font-size: 6rem; margin-bottom: 20px; display: block; }