/* ═══════════════════════════════════════════════════════════════
   أدب لورد - Design System
   Duolingo-inspired, RTL-first, vibrant & premium
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
  --primary: #00E676;
  --primary-dark: #00C853;
  --primary-shadow: #00A844;
  --secondary: #1DE9B6;
  --accent: #FF9600;
  --error: #FF4B4B;
  --error-dark: #E63E3E;
  --purple: #CE82FF;
  --gold: #FFD900;
  --streak: #FF9600;

  --bg: #F0F4F0;
  --surface: #FFFFFF;
  --text-primary: #1A1A1A;
  --text-secondary: #6B6B6B;
  --text-light: #AFAFAF;
  --border: #E5E5E5;
  --border-light: #F0F0F0;

  --correct: #00E676;
  --correct-bg: #D7FFE8;
  --wrong: #FF4B4B;
  --wrong-bg: #FFE0E0;

  /* Category colors */
  --cat-bookerArabic: #1CB0F6;
  --cat-bookerArabic-shadow: #0077B3;
  --cat-bookerInternational: #00E676;
  --cat-bookerInternational-shadow: #00A844;
  --cat-katara: #CE82FF;
  --cat-katara-shadow: #8B35E0;
  --cat-top100Arabic: #FF9600;
  --cat-top100Arabic-shadow: #CC7700;
  --cat-top100World: #FF6B35;
  --cat-top100World-shadow: #CC4400;
  --cat-nobel: #FFD900;
  --cat-nobel-shadow: #CCAE00;
  --cat-neustadt: #FF4B82;
  --cat-neustadt-shadow: #CC2D5E;
  --cat-naguibMahfouz: #1DE9B6;
  --cat-naguibMahfouz-shadow: #00BFA5;
  --cat-generalLiterature: #78909C;
  --cat-generalLiterature-shadow: #546E7A;
  --cat-sawiris: #E8563D;
  --cat-sawiris-shadow: #B5402D;
  --cat-bestSelling: #E91E63;
  --cat-bestSelling-shadow: #C2185B;
  --cat-mostTranslated: #00BCD4;
  --cat-mostTranslated-shadow: #00838F;
  --cat-top100Africa: #FF9800;
  --cat-top100Africa-shadow: #E65100;
  --cat-top100LatinAmerican: #4CAF50;
  --cat-top100LatinAmerican-shadow: #2E7D32;
  --cat-top100Asian: #E91E63;
  --cat-top100Asian-shadow: #C2185B;
  --cat-bokklubbenWorldLibrary: #9C27B0;
  --cat-bokklubbenWorldLibrary-shadow: #7B1FA2;

  --nav-height: 64px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 20px;
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Cairo', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  direction: rtl;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 18px 80px 18px;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80% { transform: translateX(6px); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes confettiFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.animate-fade { animation: fadeIn 0.4s ease-out both; }
.animate-fade-left { animation: fadeInLeft 0.5s ease-out both; }
.animate-scale { animation: scaleIn 0.5s ease-out both; }
.animate-slide-up { animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-shake { animation: shake 0.5s ease both; }

/* ── Bottom Navigation ── */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: var(--surface);
  border-top: 2px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  padding: 0 2px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.03);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 14px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Cairo', sans-serif;
}

.nav-item .material-icons-round {
  font-size: 20px;
  color: var(--text-light);
  transition: all 0.2s ease;
}

.nav-item .nav-label {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-light);
  transition: all 0.2s ease;
}

.nav-item.active {
  background: rgba(0, 230, 118, 0.12);
}

.nav-item.active .material-icons-round {
  color: var(--primary);
  font-size: 24px;
}

.nav-item.active .nav-label {
  color: var(--primary);
  font-weight: 800;
}

/* ── Header ── */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.header-info { flex: 1; }

.greeting-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.greeting-icon { font-size: 16px; color: var(--gold); }

.greeting-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.app-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-name {
  font-size: 26px;
  font-weight: 900;
  color: var(--text-primary);
}

.level-badge {
  padding: 2px 8px;
  background: linear-gradient(135deg, var(--primary), var(--text-primary));
  border-radius: var(--radius-sm);
  color: white;
  font-size: 11px;
  font-weight: 800;
  direction: ltr;
}

.header-icon-box {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary), var(--text-primary));
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0, 230, 118, 0.3);
  animation: float 2.4s ease-in-out infinite;
}

.header-icon-box .material-icons-round {
  color: white;
  font-size: 26px;
}

/* ── Hero Banner ── */
.hero-banner {
  width: 100%;
  padding: 16px 18px 16px 12px;
  background: linear-gradient(135deg, var(--primary), var(--text-primary));
  border-radius: var(--radius-xl);
  border-bottom: 4px solid var(--primary-shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.2s;
  margin-bottom: 16px;
}

.hero-banner:hover { transform: scale(1.01); }
.hero-banner:active { transform: scale(0.99); }

.hero-content { flex: 1; }

.hero-level-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: white;
  font-weight: 700;
  margin-bottom: 8px;
  direction: ltr;
}

.hero-motivation {
  font-size: 15px;
  color: white;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 12px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: white;
  border-radius: 12px;
  border: none;
  border-bottom: 3px solid var(--border);
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  transition: transform 0.15s;
}

.hero-btn:active { transform: translateY(2px); border-bottom-width: 1px; }

.hero-btn .material-icons-round { font-size: 18px; color: var(--primary); }

.hero-circle {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

.hero-circle .material-icons-round { color: white; font-size: 40px; }

/* ── Stats Row ── */
.stats-row {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.stat-chip {
  flex: 1;
  padding: 12px 6px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  text-align: center;
}

.stat-chip .material-icons-round { font-size: 20px; }
.stat-chip-value {
  font-size: 18px;
  font-weight: 900;
  direction: ltr;
  margin: 3px 0;
}
.stat-chip-label {
  font-size: 8px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* ── Section Title ── */
.section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.section-title .material-icons-round { font-size: 20px; }
.section-title span:last-child {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

/* ── Quick Access Grid ── */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.quick-card {
  background: var(--surface);
  border-radius: 16px;
  border: 2px solid var(--border);
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

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

.quick-card:active { transform: translateY(0); }

.quick-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
  border-bottom: 2px solid transparent;
}

.quick-card-icon .material-icons-round { font-size: 22px; }

.quick-card-title {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
  line-height: 1.3;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-card-count {
  font-size: 8px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* ── Progress Section ── */
.progress-section {
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-header-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.progress-header-left .material-icons-round { font-size: 18px; color: var(--secondary); }
.progress-header-left span:last-child {
  font-size: 13px;
  font-weight: 700;
}

.progress-header-right {
  font-size: 12px;
  font-weight: 800;
  color: var(--secondary);
  direction: ltr;
}

.progress-bar-container {
  height: 12px;
  background: rgba(29, 233, 182, 0.12);
  border-radius: 6px;
  overflow: hidden;
  direction: ltr;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--text-primary));
  border-radius: 6px;
  border-bottom: 2px solid var(--primary-shadow);
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-divider {
  height: 1px;
  background: var(--border-light);
  margin: 14px 0;
}

.progress-stats {
  display: flex;
}

.progress-stat {
  flex: 1;
  text-align: center;
}

.progress-stat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.progress-stat .material-icons-round { font-size: 16px; }
.progress-stat-value {
  font-size: 14px;
  font-weight: 900;
  direction: ltr;
}
.progress-stat-label {
  font-size: 8px;
  color: var(--text-secondary);
  font-weight: 600;
}

.progress-stat-separator {
  width: 1px;
  height: 32px;
  background: var(--border-light);
}

/* ═══════════════════ CATEGORIES PAGE ═══════════════════ */
.page-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 900;
}

.page-header .material-icons-round {
  font-size: 26px;
  color: var(--primary);
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* ── Category Card ── */
.category-card {
  display: flex;
  align-items: center;
  padding: 18px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  margin-bottom: 14px;
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: 0 3px 0 rgba(128,128,128,0.1);
}

.category-card:hover { transform: translateX(-4px); }
.category-card:active { transform: translateX(0); }

.cat-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 14px;
}

.cat-icon-box .material-icons-round { font-size: 28px; }

.cat-info { flex: 1; }
.cat-title { font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.cat-count { font-size: 11px; color: var(--text-secondary); }

.cat-filters {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.filter-badge {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  background: #F5F5F5;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.filter-badge .material-icons-round { font-size: 10px; color: var(--text-light); }
.filter-badge span:last-child { font-size: 8px; color: var(--text-light); font-weight: 600; }

.cat-play-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}

.cat-play-btn .material-icons-round { color: white; font-size: 24px; }

/* ═══════════════════ BROWSE PAGE ═══════════════════ */
.browse-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.back-btn {
  width: 40px;
  height: 40px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.back-btn:hover { background: #F5F5F5; }
.back-btn .material-icons-round { font-size: 20px; color: var(--text-secondary); }

.browse-title-section { flex: 1; }
.browse-title { font-size: 20px; font-weight: 900; }
.browse-count { font-size: 12px; color: var(--text-secondary); }

.browse-actions {
  display: flex;
  gap: 6px;
}

.icon-toggle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.icon-toggle.active {
  border-color: rgba(0,0,0,0.15);
}

.icon-toggle .material-icons-round { font-size: 18px; color: var(--text-secondary); }

/* Folder card */
.folder-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: 0 3px 0 rgba(128,128,128,0.06);
}

.folder-card:hover { transform: translateX(-3px); }

.folder-icon-box {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 14px;
}

.folder-icon-box .material-icons-round { font-size: 28px; }

.folder-info { flex: 1; }
.folder-title { font-size: 16px; font-weight: 800; }

.folder-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.folder-meta-item {
  display: flex;
  align-items: center;
  gap: 3px;
}

.folder-meta-item .material-icons-round { font-size: 12px; color: var(--text-light); }
.folder-meta-item span:last-child { font-size: 11px; color: var(--text-secondary); font-weight: 600; }

.folder-arrow .material-icons-round { font-size: 16px; }

/* Section header */
.section-header {
  margin: 8px 0 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header-title { font-size: 16px; font-weight: 800; }

.section-header-count {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
}

.section-header-spacer { flex: 1; }

.section-train-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: white;
}

/* Question item in browse */
.question-item {
  margin-bottom: 10px;
  padding: 14px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  animation: fadeIn 0.3s ease-out both;
}

.question-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  background: #F5F5F5;
  border-radius: 6px;
}

.meta-badge .material-icons-round { font-size: 10px; color: var(--text-light); }
.meta-badge span:last-child { font-size: 9px; color: var(--text-secondary); font-weight: 600; }

.list-type-badge {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
}

.list-type-winner { background: rgba(255, 217, 0, 0.15); color: var(--gold); }
.list-type-shortlist { background: #F0F0F0; color: var(--text-light); }
.list-type-longlist { background: #F0F0F0; color: var(--text-light); }

.question-item-year {
  margin-right: auto;
  font-size: 10px;
  color: var(--text-light);
  font-weight: 700;
}

.question-item-text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.question-item-answer {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(0, 230, 118, 0.08);
  border: 1px solid rgba(0, 230, 118, 0.2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.question-item-answer .material-icons-round { font-size: 16px; color: var(--primary); }
.question-item-answer span { font-size: 13px; font-weight: 800; color: var(--primary); }

.question-item-hint {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.question-item-hint .material-icons-round { font-size: 12px; color: var(--accent); }
.question-item-hint span { font-size: 10px; color: var(--accent); font-weight: 600; }

/* Sort indicator */
.sort-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px;
  animation: fadeIn 0.2s ease-out;
}

.sort-indicator .close-sort {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  display: flex;
}

/* ═══════════════════ STATS PAGE ═══════════════════ */
.stats-level-card {
  width: 100%;
  padding: 20px;
  background: linear-gradient(135deg, var(--primary), var(--text-primary));
  border-radius: var(--radius-xl);
  border-bottom: 4px solid var(--primary-shadow);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.stats-level-circle {
  width: 70px;
  height: 70px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stats-level-circle span {
  font-size: 20px;
  font-weight: 900;
  color: white;
  direction: ltr;
}

.stats-level-info { flex: 1; }
.stats-level-title { font-size: 22px; font-weight: 900; color: white; }
.stats-level-xp { font-size: 14px; color: rgba(255,255,255,0.7); font-weight: 600; }

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.stat-card {
  padding: 16px;
  background: var(--surface);
  border-radius: 16px;
  border: 2px solid var(--border);
  text-align: center;
}

.stat-card .material-icons-round { font-size: 28px; margin-bottom: 6px; }
.stat-card-value { font-size: 22px; font-weight: 900; direction: ltr; }
.stat-card-label { font-size: 11px; color: var(--text-secondary); font-weight: 600; }

/* Category stat item */
.cat-stat-item {
  display: flex;
  align-items: center;
  padding: 14px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  margin-bottom: 10px;
  gap: 12px;
}

.cat-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cat-stat-icon .material-icons-round { font-size: 20px; }

.cat-stat-info { flex: 1; }
.cat-stat-title { font-size: 13px; font-weight: 800; }

.cat-stat-bar {
  height: 6px;
  border-radius: 4px;
  margin-top: 4px;
  overflow: hidden;
  direction: ltr;
}

.cat-stat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.cat-stat-count {
  font-size: 16px;
  font-weight: 900;
  direction: ltr;
  flex-shrink: 0;
}

/* ═══════════════════ QUIZ OVERLAY ═══════════════════ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 2000;
  overflow-y: auto;
  transition: opacity 0.3s, transform 0.3s;
}

.overlay.hidden {
  display: none;
}

.quiz-container {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  direction: rtl;
}

/* Quiz top bar */
.quiz-top-bar {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 12px;
}

.quiz-close-btn {
  width: 36px;
  height: 36px;
  background: #E8E8E8;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.quiz-close-btn .material-icons-round { font-size: 20px; color: #777; }

.quiz-progress-track {
  flex: 1;
  height: 16px;
  background: #E8E8E8;
  border-radius: 10px;
  overflow: hidden;
  direction: ltr;
}

.quiz-progress-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.quiz-combo-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

.quiz-combo-badge .material-icons-round { font-size: 16px; }
.quiz-combo-badge span:last-child { font-size: 12px; font-weight: 800; }

/* Quiz body */
.quiz-body {
  flex: 1;
  padding: 0 24px;
  overflow-y: auto;
}

.quiz-info-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 4px 0;
}

.info-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--surface);
  border-radius: 10px;
  border: 1.5px solid var(--border);
}

.info-pill .material-icons-round { font-size: 14px; color: var(--text-secondary); }
.info-pill span:last-child { font-size: 12px; font-weight: 700; color: var(--text-secondary); direction: ltr; }

/* Retry banner */
.retry-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  margin-bottom: 8px;
  animation: slideDown 0.4s ease-out;
}

.retry-banner .material-icons-round { font-size: 18px; }
.retry-banner span:last-child { font-size: 13px; font-weight: 700; }

/* Combo indicator */
.combo-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #FF9600, #FF6B35);
  border-radius: 20px;
  margin: 8px auto;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(255, 150, 0, 0.3);
  animation: pulse 0.6s ease;
}

.combo-indicator .material-icons-round { font-size: 18px; color: white; }
.combo-indicator span { font-size: 13px; font-weight: 800; color: white; }

/* Question card */
.question-card {
  width: 100%;
  padding: 24px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 2px solid var(--border);
  margin: 20px 0 24px;
  text-align: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.question-card.correct-state {
  border-color: var(--correct);
  border-width: 2.5px;
  box-shadow: 0 4px 12px rgba(0, 230, 118, 0.08);
}

.question-card.wrong-state {
  border-color: var(--wrong);
  border-width: 2.5px;
  box-shadow: 0 4px 12px rgba(255, 75, 75, 0.08);
}

.question-card.animate-shake { animation: shake 0.5s ease both; }

.question-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.question-cat-badge .material-icons-round { font-size: 14px; }
.question-cat-badge span:last-child { font-size: 11px; font-weight: 700; }

.question-text {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.6;
  margin-bottom: 0;
}

.question-meta {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Answer input */
.answer-input-wrapper { margin-bottom: 12px; }

.answer-input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid var(--border);
  border-radius: 16px;
  font-family: 'Cairo', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  direction: rtl;
  background: var(--surface);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.3s, background-color 0.3s;
}

.answer-input:focus { border-color: var(--primary); border-width: 2.5px; }
.answer-input::placeholder { color: var(--text-light); font-weight: 500; font-size: 18px; }
.answer-input:disabled { background: var(--correct-bg); }

.answer-input.correct-input {
  border-color: var(--correct);
  border-width: 2.5px;
  background: var(--correct-bg);
  color: var(--correct);
}

.answer-input.wrong-input {
  border-color: var(--wrong);
  border-width: 2.5px;
  background: var(--wrong-bg);
  color: var(--wrong);
}

/* Hint */
.hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid rgba(255, 150, 0, 0.3);
  background: rgba(255, 150, 0, 0.1);
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 auto;
  transition: background 0.2s;
}

.hint-btn:hover { background: rgba(255, 150, 0, 0.15); }
.hint-btn .material-icons-round { font-size: 18px; color: var(--accent); }

.hint-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 150, 0, 0.08);
  border: 1.5px solid rgba(255, 150, 0, 0.2);
  border-radius: 12px;
  margin-top: 8px;
  animation: fadeIn 0.3s ease-out;
}

.hint-content .material-icons-round { font-size: 18px; color: var(--accent); flex-shrink: 0; }
.hint-content span { font-size: 13px; color: var(--accent); font-weight: 600; }

/* Feedback */
.feedback-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 2px solid;
  margin-top: 8px;
  animation: fadeIn 0.3s ease-out;
}

.feedback-box .material-icons-round { font-size: 28px; flex-shrink: 0; }
.feedback-box span { font-size: 15px; font-weight: 700; }

.feedback-correct {
  background: var(--correct-bg);
  border-color: var(--correct);
  color: var(--correct);
}

.feedback-wrong {
  background: var(--wrong-bg);
  border-color: var(--wrong);
  color: var(--wrong);
}

.feedback-close {
  background: rgba(255, 150, 0, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

/* Quiz bottom */
.quiz-bottom {
  padding: 12px 24px 20px;
  border-top: 2px solid var(--border);
  background: var(--surface);
  transition: background 0.3s, border-color 0.3s;
}

.quiz-bottom.correct-bg {
  background: #D7FFB8;
  border-color: transparent;
}

.quiz-bottom.wrong-bg {
  background: #FFDFDF;
  border-color: transparent;
}

/* Duo Button */
.duo-btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 16px;
  font-family: 'Cairo', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 80ms, border-bottom-width 80ms;
  border-bottom: 5px solid transparent;
  letter-spacing: 0.5px;
}

.duo-btn:active {
  transform: translateY(3px);
  border-bottom-width: 2px;
}

.duo-btn:disabled {
  background: #D4D4D4 !important;
  border-bottom-color: #B0B0B0 !important;
  cursor: not-allowed;
  color: #999;
}

.duo-btn .material-icons-round { font-size: 22px; }

/* ═══════════════════ RESULT OVERLAY ═══════════════════ */
.result-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px;
  direction: rtl;
}

.result-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto 16px;
  animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.result-icon .material-icons-round { font-size: 56px; }

.result-title {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 6px;
  animation: fadeIn 0.4s ease-out 0.2s both;
}

.result-cat-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 12px;
  width: fit-content;
  margin: 0 auto 28px;
  animation: fadeIn 0.4s ease-out 0.3s both;
}

.result-cat-badge .material-icons-round { font-size: 16px; }
.result-cat-badge span:last-child { font-size: 13px; font-weight: 700; }

/* Score card */
.score-card {
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 2px solid var(--border);
  margin-bottom: 28px;
  animation: fadeIn 0.5s ease-out 0.4s both;
}

/* Accuracy circle */
.accuracy-circle {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  position: relative;
}

.accuracy-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.accuracy-circle-bg {
  fill: none;
  stroke-width: 8;
}

.accuracy-circle-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.accuracy-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.accuracy-value { font-size: 24px; font-weight: 900; direction: ltr; }
.accuracy-label { font-size: 10px; color: var(--text-secondary); font-weight: 600; }

/* Result stats */
.result-stats {
  display: flex;
  margin-bottom: 16px;
}

.result-stat {
  flex: 1;
  text-align: center;
}

.result-stat .material-icons-round { font-size: 24px; margin-bottom: 4px; }
.result-stat-value { font-size: 20px; font-weight: 900; direction: ltr; }
.result-stat-label { font-size: 11px; color: var(--text-secondary); font-weight: 600; }

/* XP rows */
.xp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.xp-row-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.xp-row-value { font-size: 15px; font-weight: 800; direction: ltr; }

.total-xp-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, var(--primary), var(--text-primary));
  border-radius: var(--radius-md);
  border-bottom: 3px solid var(--primary-shadow);
  margin-top: 12px;
}

.total-xp-box .material-icons-round { font-size: 24px; color: white; }
.total-xp-box span:last-child { font-size: 20px; font-weight: 900; color: white; direction: ltr; }

.combo-result-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 150, 0, 0.3);
  background: rgba(255, 150, 0, 0.1);
  margin-top: 12px;
}

.combo-result-box .material-icons-round { font-size: 20px; color: var(--streak); }
.combo-result-box span:last-child { font-size: 14px; font-weight: 700; color: var(--streak); }

/* ── Confetti ── */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3000;
}

/* ── Exit Dialog ── */
.dialog-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.dialog-box {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 24px;
  width: 90%;
  max-width: 340px;
  text-align: center;
  animation: scaleIn 0.3s ease-out;
}

.dialog-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}

.dialog-message {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.dialog-actions {
  display: flex;
  gap: 12px;
}

.dialog-btn {
  flex: 1;
  padding: 12px;
  border-radius: 14px;
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: transform 80ms;
}

.dialog-btn:active { transform: translateY(2px); }

.dialog-btn-primary {
  background: var(--primary);
  color: white;
  border-bottom: 4px solid var(--primary-shadow);
}

.dialog-btn-danger {
  background: var(--surface);
  color: var(--text-primary);
  border: 2.5px solid var(--border);
}

/* ═══════════════════ ONLINE MODE ═══════════════════ */

/* Setup needed card */
.online-setup-card, .online-join-card {
  padding: 30px 24px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 2px solid var(--border);
  text-align: center;
  margin-bottom: 20px;
}

.online-setup-icon, .online-join-icon {
  width: 80px;
  height: 80px;
  background: #1CB0F61A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.online-setup-icon .material-icons-round,
.online-join-icon .material-icons-round {
  font-size: 36px;
  color: #1CB0F6;
}

.online-setup-title, .online-join-title {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 8px;
}

.online-setup-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.online-setup-desc code {
  background: #F0F0F0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.online-setup-steps { text-align: right; }

.setup-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: #F8F8F8;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.step-num {
  width: 28px;
  height: 28px;
  background: #1CB0F6;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Name entry */
.online-name-input {
  width: 100%;
  padding: 14px 20px;
  border: 2px solid var(--border);
  border-radius: 16px;
  font-family: 'Cairo', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  direction: rtl;
  background: var(--surface);
  outline: none;
  margin-bottom: 16px;
  transition: border-color 0.3s;
}

.online-name-input:focus { border-color: #1CB0F6; border-width: 2.5px; }
.online-name-input::placeholder { color: var(--text-light); font-weight: 500; }

.online-join-btn { margin-top: 0; }

/* Info cards */
.online-info-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* ── Room Choice ── */
.room-choice-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.room-choice-card {
  padding: 24px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 2px solid var(--border);
  text-align: center;
}

.room-choice-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.room-choice-icon .material-icons-round { font-size: 32px; }

.room-choice-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
}

.room-choice-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.room-code-input {
  width: 100%;
  padding: 14px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-family: 'Cairo', sans-serif;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 4px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.3s;
}

.room-code-input:focus { border-color: #1CB0F6; border-width: 2.5px; }

.room-error {
  margin-top: 10px;
  color: var(--wrong);
  font-size: 13px;
  font-weight: 700;
  background: var(--wrong-bg);
  padding: 8px;
  border-radius: 8px;
}

.change-name-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  margin-top: 4px;
}

.change-name-btn:hover { color: #1CB0F6; }
.change-name-btn .material-icons-round { font-size: 18px; }

/* ── Lobby Room Code Display ── */
.room-code-display {
  background: #F8F8F8;
  border: 2px dashed #D0D0D0;
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.room-code-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
}

.room-code-value {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #1CB0F6;
}

.room-code-copy {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: var(--text-main);
  font-family: 'Cairo', sans-serif;
}

.room-code-copy .material-icons-round { font-size: 20px; margin-bottom: 2px; }
.room-code-copy span { font-size: 11px; font-weight: 700; }
.room-code-copy:active { background: #F0F0F0; }

.room-code-badge {
  background: #F0F0F0;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: 1px;
}

.waiting-host-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #F8F8F8;
  border: 1.5px solid var(--border);
  padding: 16px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  margin-top: 16px;
}

.waiting-host-msg .material-icons-round { animation: pulse 1.5s infinite; }

.online-info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
}

.online-info-card .material-icons-round { font-size: 28px; flex-shrink: 0; }

.info-card-title { font-size: 14px; font-weight: 800; }
.info-card-desc { font-size: 11px; color: var(--text-secondary); font-weight: 500; }

/* ── Lobby ── */
.lobby-container { padding-bottom: 20px; }

.lobby-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.lobby-title { font-size: 22px; font-weight: 900; margin: 0; }
.lobby-subtitle { font-size: 12px; color: var(--text-secondary); }

.lobby-status-badge {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(28, 176, 246, 0.1);
  border-radius: 20px;
  border: 1.5px solid rgba(28, 176, 246, 0.25);
}

.lobby-status-badge span:last-child {
  font-size: 11px;
  font-weight: 700;
  color: #1CB0F6;
}

.online-dot {
  width: 8px;
  height: 8px;
  background: #00E676;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 1.5s ease infinite;
}

.lobby-players-section { margin-bottom: 20px; }
.lobby-players-list { display: flex; flex-direction: column; gap: 8px; }

.lobby-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
}

.lobby-player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lobby-player-avatar .material-icons-round { font-size: 22px; }
.lobby-player-name { flex: 1; font-size: 14px; font-weight: 800; }

.lobby-player-status {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lobby-player-status span:last-child {
  font-size: 10px;
  color: #00E676;
  font-weight: 600;
}

.lobby-rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
  padding: 14px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
}

.lobby-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.lobby-rule .material-icons-round { font-size: 18px; }

.online-start-btn { margin-top: 0; }

/* ── Online Playing ── */
.online-playing-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 20px;
  direction: rtl;
  min-height: 100vh;
  min-height: 100dvh;
}

.online-top-bar {
  display: flex;
  align-items: center;
  padding: 8px 0;
  gap: 12px;
  margin-bottom: 4px;
}

.online-progress-track {
  flex: 1;
  height: 16px;
  background: #E8E8E8;
  border-radius: 10px;
  overflow: hidden;
  direction: ltr;
}

.online-progress-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.online-q-counter {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-secondary);
  direction: ltr;
  flex-shrink: 0;
}

/* Timer */
.online-timer-row {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

.online-timer-circle {
  width: 64px;
  height: 64px;
  position: relative;
}

.online-timer-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-bg {
  fill: none;
  stroke: #E8E8E8;
  stroke-width: 5;
}

.timer-fill {
  fill: none;
  stroke: #1CB0F6;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.15s linear, stroke 0.3s;
}

.timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 900;
  color: #1CB0F6;
  direction: ltr;
}

.online-timer-circle.timer-warning .timer-fill { stroke: #FF9600; }
.online-timer-circle.timer-warning .timer-text { color: #FF9600; }
.online-timer-circle.timer-danger .timer-fill { stroke: #FF4B4B; }
.online-timer-circle.timer-danger .timer-text { color: #FF4B4B; animation: pulse 0.5s ease infinite; }

/* Online question card */
.online-question-card {
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 2px solid var(--border);
  margin: 12px 0;
  text-align: center;
}

/* Online answer */
.online-answer-section { margin-bottom: 16px; }

.answered-input {
  background: #F5F5F5 !important;
  color: var(--text-light) !important;
  border-color: var(--border) !important;
}

/* Online feedback */
.online-feedback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 2px solid;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
}

.correct-fb {
  background: var(--correct-bg);
  border-color: var(--correct);
  color: var(--correct);
}

.wrong-fb {
  background: var(--wrong-bg);
  border-color: var(--wrong);
  color: var(--wrong);
}

.online-feedback .material-icons-round { font-size: 22px; }

/* Live scoreboard */
.live-scoreboard {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  padding: 12px;
  margin-top: 8px;
}

.live-scoreboard-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.live-scoreboard-header span:last-child {
  font-size: 13px;
  font-weight: 800;
}

.live-score-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  margin-bottom: 4px;
  transition: background 0.3s;
}

.live-score-item.is-me {
  background: rgba(28, 176, 246, 0.08);
  border: 1px solid rgba(28, 176, 246, 0.2);
}

.live-rank {
  width: 22px;
  height: 22px;
  background: #F0F0F0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.live-name { flex: 1; font-size: 13px; font-weight: 700; }

.live-pts {
  font-size: 14px;
  font-weight: 900;
  color: #1CB0F6;
  direction: ltr;
}

/* ── Leaderboard ── */
.leaderboard-container {
  padding: 16px 0;
  text-align: center;
}

.lb-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.lb-title { font-size: 28px; font-weight: 900; }

.lb-my-result {
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 2px solid;
  margin-bottom: 20px;
}

.lb-my-rank { font-size: 22px; font-weight: 900; }
.lb-my-perf { font-size: 16px; font-weight: 700; margin: 4px 0; }
.lb-my-score { font-size: 13px; color: var(--text-secondary); font-weight: 600; }

/* Podium */
.lb-podium {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.podium-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
}

.podium-medal { font-size: 28px; flex-shrink: 0; }
.podium-name { flex: 1; font-size: 16px; font-weight: 800; text-align: right; }
.podium-name.podium-me { color: #1CB0F6; }
.podium-score { font-size: 18px; font-weight: 900; flex-shrink: 0; }

/* Rest list */
.lb-rest-list { margin-bottom: 20px; }

.lb-rest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: 12px;
  border: 1.5px solid var(--border);
  margin-bottom: 6px;
}

.lb-rest-item.lb-rest-me {
  background: rgba(28, 176, 246, 0.06);
  border-color: rgba(28, 176, 246, 0.25);
}

.lb-rest-rank {
  width: 26px;
  height: 26px;
  background: #F0F0F0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.lb-rest-name { flex: 1; font-size: 14px; font-weight: 700; text-align: right; }
.lb-rest-score { font-size: 15px; font-weight: 900; color: #1CB0F6; }

.lb-actions { padding: 0 10px; }

/* ── Responsive ── */
@media (min-width: 481px) {
  #app { padding: 16px 24px 80px 24px; }
  .quiz-body { padding: 0 32px; }
  .quiz-bottom { padding: 12px 32px 24px; }
}

@media (min-width: 768px) {
  .quick-grid { grid-template-columns: repeat(4, 1fr); }
}