/* ==========================================================================
   KEMBARA BELAJAR: LKS DIGITAL SD (KURIKULUM MERDEKA)
   Design System: Child-Friendly, Playful Gamification & Accessible
   ========================================================================== */

:root {
  --primary: #4f46e5;
  --primary-light: #818cf8;
  --primary-dark: #3730a3;
  --secondary: #06b6d4;
  --accent-yellow: #f59e0b;
  --accent-gold: #fbbf24;
  --accent-green: #10b981;
  --accent-red: #ef4444;
  --accent-purple: #8b5cf6;
  --accent-pink: #ec4899;

  --bg-gradient: linear-gradient(135deg, #e0f2fe 0%, #fef3c7 50%, #fdf2f8 100%);
  --card-bg: #ffffff;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --border-light: #e2e8f0;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 6px 12px -2px rgba(50, 50, 93, 0.1), 0 3px 7px -3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 24px -4px rgba(50, 50, 93, 0.15), 0 8px 16px -8px rgba(0, 0, 0, 0.1);
  --shadow-bouncy: 0 8px 0 #cbd5e1;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  --font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

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

body {
  font-family: var(--font-family);
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ==========================================================================
   HEADER & TOP GAMIFICATION BAR
   ========================================================================== */
.top-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 3px solid #e2e8f0;
  box-shadow: var(--shadow-sm);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

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

.brand-icon {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
  animation: gentle-wobble 4s ease-in-out infinite;
}

.brand-text h1 {
  font-size: 1.25rem;
  font-weight: 800;
  background: linear-gradient(90deg, #4338ca, #0284c7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.brand-text span {
  font-size: 0.75rem;
  font-weight: 700;
  color: #059669;
  background: #d1fae5;
  padding: 2px 8px;
  border-radius: 99px;
  display: inline-block;
}

/* Gamification Stats in Header */
.game-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 2px 0 #cbd5e1;
  transition: transform 0.2s;
}

.stat-pill:hover {
  transform: translateY(-2px);
}

.stat-pill.xp-pill {
  background: #fdf4ff;
  border-color: #f0abfc;
  color: #a21caf;
}

.stat-pill.streak-pill {
  background: #fff7ed;
  border-color: #fdba74;
  color: #ea580c;
}

.stat-pill.star-pill {
  background: #fefce8;
  border-color: #fde047;
  color: #ca8a04;
}

.level-badge {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 3px 0 #d97706;
}

.xp-progress-container {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 110px;
}

.xp-progress-bar {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}

.xp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #a855f7, #ec4899);
  border-radius: 99px;
  transition: width 0.5s ease-out;
  width: 0%;
}

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

.btn-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: #fff;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 3px 0 #cbd5e1;
  transition: all 0.2s;
}

.btn-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #cbd5e1;
}

.btn-icon:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #cbd5e1;
}

.btn-switch-mode {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  border: 2px solid #6366f1;
  background: #e0e7ff;
  color: #4338ca;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-switch-mode:hover {
  background: #4338ca;
  color: #fff;
}

/* ==========================================================================
   MAIN CONTAINER & HERO
   ========================================================================== */
.main-wrapper {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* Mascot Banner */
.mascot-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border: 3px solid #bbf7d0;
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.mascot-hero::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.mascot-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mascot-avatar {
  font-size: 64px;
  width: 88px;
  height: 88px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 0 #86efac;
  animation: bounce-gentle 2.5s infinite;
  flex-shrink: 0;
}

.mascot-bubble {
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  position: relative;
  box-shadow: var(--shadow-sm);
  max-width: 650px;
}

.mascot-bubble::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 12px 8px 0;
  border-style: solid;
  border-color: transparent #ffffff transparent transparent;
  display: block;
  width: 0;
}

.mascot-bubble h2 {
  font-size: 1.15rem;
  color: #1e293b;
  margin-bottom: 4px;
}

.mascot-bubble p {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.45;
}

.quick-stats-pills {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

/* ==========================================================================
   NAVIGATION TABS (FASE A / B / C & MAPEL)
   ========================================================================== */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-title h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   NAVIGATION: KELAS 1 - 6 & MAPEL & KOMPETENSI
   ========================================================================== */
.kelas-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.kelas-nav-card {
  background: #ffffff;
  border: 3px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.22s;
  box-shadow: 0 4px 0 #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.kelas-nav-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 #cbd5e1;
  border-color: #93c5fd;
}

.kelas-nav-card.active {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 5px 0 #1d4ed8;
  transform: translateY(-2px);
}

.kelas-nav-icon {
  font-size: 28px;
}

.kelas-nav-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #1e293b;
}

.kelas-nav-fase {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: #f1f5f9;
  color: #475569;
}

.kelas-nav-card.active .kelas-nav-fase {
  background: #dbeafe;
  color: #1e40af;
}

/* Filter Controls Row: Elemen Kompetensi & Mode Konten (Materi vs Soal) */
.filter-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

.kompetensi-filter-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 260px;
}

.kompetensi-filter-box label {
  font-size: 0.88rem;
  font-weight: 800;
  color: #334155;
  white-space: nowrap;
}

.custom-select {
  flex: 1;
  padding: 8px 14px;
  border: 2px solid #cbd5e1;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  background: #f8fafc;
  outline: none;
  cursor: pointer;
}

.custom-select:focus {
  border-color: #6366f1;
  background: #ffffff;
}

.content-mode-tabs {
  display: flex;
  gap: 6px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: var(--radius-full);
}

.mode-tab-btn {
  border: none;
  background: none;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 800;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mode-tab-btn.active {
  background: #4f46e5;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
}

/* Card Badges: Elemen CP, Kode TP */
.elemen-cp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 6px;
}

.kode-tp-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #6366f1;
  background: #e0e7ff;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 6px;
}

.card-action-dual {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
}

.btn-read-materi {
  flex: 1;
  background: #ffffff;
  border: 2px solid #3b82f6;
  color: #1d4ed8;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 9px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 3px 0 #93c5fd;
}

.btn-read-materi:hover {
  background: #eff6ff;
  transform: translateY(-2px);
}

.btn-do-soal {
  flex: 1;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 9px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 3px 0 #047857;
}

.btn-do-soal:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #047857;
}

/* ==========================================================================
   VIEW: MATERI READER (MODUL BELAJAR MANDIRI)
   ========================================================================== */
.materi-reader-wrapper {
  background: #ffffff;
  border: 3px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  margin-bottom: 40px;
}

.materi-reader-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 18px;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}

.badge-pill {
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 800;
  background: #f1f5f9;
  color: #334155;
}

.materi-concept-card {
  background: #f8fafc;
  border-left: 5px solid #3b82f6;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.materi-concept-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e3a8a;
  margin-bottom: 6px;
}

.materi-concept-desc {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.5;
}

.materi-illustration-box {
  background: #fefce8;
  border: 2px dashed #facc15;
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 800;
  color: #854d0e;
  margin: 20px 0;
}

.glossary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.glossary-pill {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  color: #334155;
}

.glossary-pill strong {
  color: #4338ca;
}

.materi-reader-footer {
  text-align: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px dashed #e2e8f0;
}

/* Mapel Filter Pills */
.mapel-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.filter-pill {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: #ffffff;
  border: 2px solid #cbd5e1;
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-pill:hover {
  border-color: #6366f1;
  color: #4338ca;
}

.filter-pill.active {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4338ca;
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.35);
}

/* ==========================================================================
   LKPD CARDS GRID
   ========================================================================== */
.lkpd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
  margin-bottom: 40px;
}

.lkpd-card {
  background: #ffffff;
  border: 3px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 0 #cbd5e1;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.lkpd-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 0 #cbd5e1;
  border-color: #818cf8;
}

.card-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mapel-badge {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.time-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 8px;
}

.card-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 16px;
}

/* Legal badge tag */
.legal-tag {
  background: #f1f5f9;
  border-left: 3px solid #3b82f6;
  padding: 6px 10px;
  border-radius: 0 8px 8px 0;
  font-size: 0.74rem;
  color: #334155;
  margin-bottom: 16px;
}

.pancasila-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.p-tag {
  background: #fdf2f8;
  color: #be185d;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #fbcfe8;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 2px dashed #f1f5f9;
}

.rewards-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: 700;
}

.reward-xp {
  color: #7c3aed;
}

.reward-star {
  color: #d97706;
}

.btn-start-lkpd {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 4px 0 #047857;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-start-lkpd:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #047857;
}

.btn-start-lkpd:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #047857;
}

/* Completed Badge on Card */
.card-completed-indicator {
  position: absolute;
  top: 14px;
  right: -32px;
  background: #10b981;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 34px;
  transform: rotate(45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ==========================================================================
   VIEW: LKPD RUNNER (LEARNING & GAMIFICATION FLOW)
   ========================================================================== */
.view-container {
  display: none;
}

.view-container.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

.lkpd-runner-header {
  background: #ffffff;
  border: 3px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-back {
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.9rem;
  color: #475569;
  cursor: pointer;
  box-shadow: 0 3px 0 #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-back:hover {
  background: #e2e8f0;
}

.runner-progress {
  flex: 1;
  max-width: 450px;
  margin: 0 16px;
}

.runner-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 6px;
}

.runner-progress-bar {
  width: 100%;
  height: 12px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
  border: 2px solid #cbd5e1;
}

.runner-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #06b6d4);
  border-radius: 99px;
  transition: width 0.4s ease;
  width: 20%;
}

.live-score-pill {
  background: #fef3c7;
  border: 2px solid #fde047;
  color: #b45309;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 0 #facc15;
}

/* Material Exploration Phase (Ruang Eksplorasi) */
.materi-card {
  background: #ffffff;
  border: 3px solid #fed7aa;
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}

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

.materi-header h3 {
  font-size: 1.3rem;
  color: #c2410c;
  font-weight: 800;
}

.materi-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.materi-points li {
  background: #fffaf0;
  border-left: 4px solid #f97316;
  padding: 12px 18px;
  border-radius: 0 12px 12px 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #334155;
}

.kiko-tip-box {
  background: #eff6ff;
  border: 2px dashed #60a5fa;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.92rem;
  color: #1e40af;
  margin-bottom: 20px;
}

.btn-proceed-mission {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #ffffff;
  border: none;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 5px 0 #c2410c;
  display: block;
  margin: 0 auto;
  transition: all 0.2s;
}

.btn-proceed-mission:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #c2410c;
}

/* Question Area */
.question-card {
  background: #ffffff;
  border: 3px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
}

.question-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

.question-text {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* Tipe 1: Pilihan Ganda */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.option-btn {
  background: #ffffff;
  border: 3px solid #cbd5e1;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 0 #cbd5e1;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 14px;
}

.option-btn:hover:not(:disabled) {
  border-color: #6366f1;
  background: #f5f3ff;
  transform: translateX(4px);
}

.option-btn.selected {
  border-color: #4f46e5;
  background: #e0e7ff;
}

.option-btn.correct {
  border-color: #10b981 !important;
  background: #d1fae5 !important;
  color: #065f46 !important;
  box-shadow: 0 4px 0 #059669 !important;
}

.option-btn.wrong {
  border-color: #ef4444 !important;
  background: #fee2e2 !important;
  color: #991b1b !important;
  box-shadow: 0 4px 0 #dc2626 !important;
}

/* Tipe 2: Menjodohkan (Matching Pairs) */
.matching-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.matching-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.match-item {
  background: #f8fafc;
  border: 3px solid #cbd5e1;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 0 #cbd5e1;
  transition: all 0.2s;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.match-item:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.match-item.selected {
  border-color: #f59e0b;
  background: #fef3c7;
  box-shadow: 0 4px 0 #d97706;
}

.match-item.paired {
  border-color: #10b981;
  background: #d1fae5;
  color: #065f46;
  box-shadow: 0 4px 0 #059669;
  cursor: default;
}

.match-item.wrong {
  border-color: #ef4444 !important;
  background: #fee2e2 !important;
  color: #991b1b !important;
  box-shadow: 0 4px 0 #dc2626 !important;
  animation: gentle-wobble 0.3s ease-in-out;
}

/* Tipe 3: Klasifikasi / Keranjang Sortir */
.classification-items-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  background: #f1f5f9;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  min-height: 70px;
}

.classify-token {
  background: #ffffff;
  border: 2px solid #6366f1;
  color: #4338ca;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 3px 0 #4338ca;
  transition: transform 0.2s;
}

.classify-token:hover {
  transform: translateY(-2px);
}

.classify-token.active-token {
  background: #facc15;
  color: #713f12;
  border-color: #ca8a04;
  box-shadow: 0 4px 0 #ca8a04;
}

.baskets-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.basket {
  background: #ffffff;
  border: 3px dashed #cbd5e1;
  border-radius: var(--radius-lg);
  padding: 18px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}

.basket-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #334155;
  margin-bottom: 12px;
  text-align: center;
}

.basket-dropzone {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  padding: 8px;
  background: #fafafa;
  border-radius: var(--radius-sm);
}

/* Tipe 4: Susun Kata (Sentence Scramble) */
.sentence-drop-area {
  min-height: 64px;
  border: 3px dashed #6366f1;
  border-radius: var(--radius-md);
  background: #f5f3ff;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}

.word-chip {
  background: #ffffff;
  border: 2px solid #8b5cf6;
  color: #6d28d9;
  font-weight: 700;
  font-size: 1rem;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 3px 0 #7c3aed;
  transition: all 0.2s;
}

.word-chip:hover {
  transform: translateY(-2px);
}

.word-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

/* Feedback & Explanation Box */
.explanation-box {
  display: none;
  background: #f8fafc;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-top: 20px;
  border-left: 4px solid #10b981;
  animation: slideDown 0.3s ease;
}

.explanation-box.show {
  display: block;
}

.explanation-box.wrong {
  border-left-color: #ef4444;
  background: #fff5f5;
}

.explanation-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.explanation-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #334155;
}

/* Question Action Footer */
.question-footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 2px solid #f1f5f9;
}

.btn-check-answer {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #ffffff;
  border: none;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 4px 0 #312e81;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-check-answer:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #312e81;
}

.btn-next-question {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 4px 0 #047857;
  display: none;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-next-question:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #047857;
}

/* ==========================================================================
   VIEW: RESULTS & RAPOR MINI LKPD
   ========================================================================== */
.results-card {
  background: #ffffff;
  border: 3px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.trophy-animation {
  font-size: 80px;
  margin-bottom: 12px;
  animation: bounce-gentle 2s infinite;
}

.score-display-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef08a, #fde047);
  border: 6px solid #eab308;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 0 #ca8a04;
}

.score-number {
  font-size: 2.8rem;
  font-weight: 900;
  color: #854d0e;
  line-height: 1;
}

.score-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #a16207;
  text-transform: uppercase;
}

.results-stats-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 28px;
}

.result-stat-box {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 12px 20px;
  min-width: 130px;
}

.result-stat-val {
  font-size: 1.35rem;
  font-weight: 900;
}

.result-stat-lbl {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 700;
}

/* Formative Reflection (Refleksi Diri Anak Kurikulum Merdeka) */
.reflection-section {
  background: #f0fdf4;
  border: 2px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 28px;
  text-align: left;
}

.reflection-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #166534;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reflection-emojis {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 14px;
}

.emoji-choice-btn {
  background: #ffffff;
  border: 2px solid #86efac;
  border-radius: var(--radius-md);
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 3px 0 #86efac;
}

.emoji-choice-btn span:first-child {
  font-size: 28px;
}

.emoji-choice-btn span:last-child {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1e293b;
}

.emoji-choice-btn.selected {
  background: #dcfce7;
  border-color: #16a34a;
  transform: translateY(-3px);
  box-shadow: 0 5px 0 #15803d;
}

.results-action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-secondary {
  background: #ffffff;
  border: 2px solid #cbd5e1;
  color: #475569;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 4px 0 #cbd5e1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-secondary:hover {
  background: #f1f5f9;
}

/* ==========================================================================
   VIEW: DASHBOARD GURU & ORANG TUA (MODE PENDIDIK)
   ========================================================================== */
.teacher-dashboard {
  background: #ffffff;
  border: 3px solid #cbd5e1;
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  margin-bottom: 40px;
}

.teacher-header {
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 18px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.teacher-legal-banner {
  background: #eff6ff;
  border: 2px solid #bfdbfe;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 24px;
}

.teacher-legal-banner h4 {
  color: #1e40af;
  font-size: 0.98rem;
  font-weight: 800;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.teacher-legal-banner p {
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.45;
}

.teacher-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
}

.t-tab-btn {
  background: none;
  border: none;
  font-size: 0.95rem;
  font-weight: 800;
  color: #64748b;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.t-tab-btn.active {
  background: #e0e7ff;
  color: #4338ca;
}

/* Table */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 24px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.data-table th {
  background: #f8fafc;
  padding: 12px 14px;
  font-weight: 800;
  color: #475569;
  border-bottom: 2px solid #cbd5e1;
}

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
}

.status-badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 99px;
  display: inline-block;
}

.status-tercapai {
  background: #dcfce7;
  color: #166534;
}

.status-bimbingan {
  background: #fee2e2;
  color: #991b1b;
}

/* ==========================================================================
   VIEW: PROFIL SISWA & LENCANA (BADGES)
   ========================================================================== */
.profile-card {
  background: #ffffff;
  border: 3px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  margin-bottom: 28px;
}

.profile-header-area {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}

.avatar-large {
  font-size: 64px;
  width: 96px;
  height: 96px;
  background: #fef3c7;
  border: 4px solid #f59e0b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar-selector {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.avatar-opt {
  font-size: 24px;
  padding: 6px;
  background: #f1f5f9;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}

.avatar-opt:hover, .avatar-opt.active {
  border-color: #6366f1;
  background: #e0e7ff;
}

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

.badge-item {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  transition: all 0.2s;
}

.badge-item.unlocked {
  background: #fffbeb;
  border-color: #fde68a;
  box-shadow: 0 4px 0 #fcd34d;
}

.badge-item.locked {
  filter: grayscale(1);
  opacity: 0.6;
}

.badge-icon-lg {
  font-size: 40px;
  margin-bottom: 8px;
}

.badge-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: #1e293b;
  margin-bottom: 4px;
}

.badge-desc {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.35;
}

/* ==========================================================================
   CANVAS CONFETTI OVERLAY
   ========================================================================== */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* ==========================================================================
   TOAST NOTIFICATION (XP / BADGE UNLOCKED)
   ========================================================================== */
.toast-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1e293b;
  color: #ffffff;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
  transform: translateY(120px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-notification.show {
  transform: translateY(0);
}

.toast-icon {
  font-size: 28px;
}

.toast-title {
  font-weight: 800;
  font-size: 0.95rem;
}

.toast-subtitle {
  font-size: 0.8rem;
  color: #94a3b8;
}

/* ==========================================================================
   PRINT STYLES (RAPOR RESMI LKPD)
   ========================================================================== */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .top-navbar,
  .btn-icon,
  .btn-switch-mode,
  .btn-secondary,
  .btn-start-lkpd,
  .btn-back,
  .header-actions,
  .fase-nav-tabs,
  .mapel-filters,
  .mascot-hero,
  #confetti-canvas,
  .results-action-buttons {
    display: none !important;
  }

  .main-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .results-card, .teacher-dashboard {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    padding: 20px !important;
  }

  .print-header-official {
    display: block !important;
    text-align: center;
    border-bottom: 2px solid #000;
    padding-bottom: 12px;
    margin-bottom: 20px;
  }
}

.print-header-official {
  display: none;
}

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */
@keyframes bounce-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes gentle-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

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

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .top-navbar {
    padding: 10px 14px;
  }
  .brand-text h1 {
    font-size: 1.05rem;
  }
  .mascot-hero {
    flex-direction: column;
    text-align: center;
  }
  .mascot-content {
    flex-direction: column;
  }
  .mascot-bubble::after {
    display: none;
  }
  .matching-container, .baskets-container {
    grid-template-columns: 1fr;
  }
}


/* Kembara Belajar account and school application */
.kb-account-overlay[hidden], .kb-account-form[hidden], .kb-account-session[hidden], #account-notice[hidden] { display: none !important; }
.kb-account-overlay {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: 18px; background: rgba(15, 23, 42, .68); overflow-y: auto;
}
.kb-account-card {
  position: relative; width: min(100%, 510px); max-height: calc(100vh - 36px);
  overflow-y: auto; background: #fff; color: #172033; border-radius: 22px;
  padding: 28px; box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.kb-account-close {
  position: absolute; right: 14px; top: 10px; border: 0; background: #f1f5f9;
  width: 36px; height: 36px; border-radius: 50%; font-size: 24px; cursor: pointer;
}
.kb-account-brand { font-weight: 900; color: #4338ca; margin-bottom: 10px; }
.kb-account-card h2 { margin: 0 36px 6px 0; font-size: 1.45rem; }
.kb-account-intro, .kb-account-footnote { color: #64748b; font-size: .88rem; line-height: 1.5; }
.kb-account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin: 18px 0; background: #f1f5f9; border-radius: 12px; }
.kb-account-tabs button { border: 0; padding: 11px 8px; border-radius: 9px; background: transparent; font-weight: 800; cursor: pointer; }
.kb-account-tabs button.active { background: #fff; color: #4338ca; box-shadow: 0 1px 5px #0f172a16; }
.kb-account-form { display: grid; gap: 13px; }
.kb-account-form label { display: grid; gap: 6px; color: #334155; font-size: .88rem; font-weight: 750; }
.kb-account-form input, .kb-account-form select, .kb-account-form textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 10px;
  padding: 11px 12px; font: inherit; color: #0f172a; background: #fff;
}
.kb-account-form input:focus, .kb-account-form select:focus, .kb-account-form textarea:focus {
  outline: 3px solid #c7d2fe; border-color: #6366f1;
}
.kb-account-primary, .kb-account-secondary {
  border: 0; border-radius: 11px; padding: 13px 16px; font-weight: 850; cursor: pointer;
}
.kb-account-primary { background: #4338ca; color: white; }
.kb-account-primary:disabled { opacity: .6; cursor: wait; }
.kb-account-secondary { background: #e2e8f0; color: #1e293b; }
.kb-account-link { border: 0; background: transparent; color: #4338ca; cursor: pointer; font-weight: 700; }
.kb-account-notice { padding: 10px 12px; margin: 12px 0; border-radius: 10px; background: #eff6ff; color: #1e40af; font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere; }
.kb-account-notice[data-type="error"], .kb-account-notice[data-type="warning"] { background: #fff7ed; color: #9a3412; }
.kb-account-notice[data-type="success"] { background: #ecfdf5; color: #065f46; }
.kb-school-note { margin: 0; padding: 11px; border-radius: 10px; background: #eff6ff; color: #1e40af; font-size: .84rem; line-height: 1.5; }
.kb-account-session { display: grid; gap: 10px; padding: 15px; border: 1px solid #c7d2fe; border-radius: 12px; background: #eef2ff; overflow-wrap: anywhere; }
.kb-account-footnote { margin: 18px 0 0; font-size: .78rem; }
@media (max-width: 520px) {
  .kb-account-card { padding: 22px 18px; border-radius: 17px; }
  .kb-account-tabs button { font-size: .8rem; }
}


/* Kembara Belajar access flow: Landing -> Login -> Learning application */
#landing-page[hidden], #account-overlay[hidden], #app-shell[hidden] {
  display: none !important;
}
.kb-landing-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #172554;
  background:
    radial-gradient(circle at 12% 82%, rgba(45,212,191,.20), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(251,191,36,.22), transparent 27%),
    linear-gradient(135deg,#f4fbff 0%,#fff9e8 52%,#fff4f2 100%);
}
.kb-landing-nav {
  height: 78px; padding: 0 clamp(20px,6vw,88px); display:flex;
  align-items:center; justify-content:space-between; background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(148,163,184,.2); backdrop-filter:blur(12px);
}
.kb-landing-brand {display:flex;align-items:center;gap:12px;font-size:1.25rem;font-weight:950;color:#3730a3}
.kb-landing-mark {display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:#4f46e5;color:white;font-size:1.6rem;box-shadow:0 8px 20px #4f46e544}
.kb-landing-login,.kb-landing-secondary {border:1px solid #c7d2fe;background:white;color:#4338ca;border-radius:14px;padding:11px 20px;font-weight:850;cursor:pointer}
.kb-landing-content {width:min(1180px,90vw);margin:auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;padding:55px 0 45px}
.kb-landing-eyebrow {display:inline-block;padding:8px 13px;border-radius:99px;background:#e0e7ff;color:#4338ca;font-size:.75rem;font-weight:900;letter-spacing:.07em}
.kb-landing-copy h1 {font-size:clamp(2.5rem,5vw,4.8rem);line-height:1.04;letter-spacing:-.045em;margin:22px 0;color:#172554;font-weight:950}
.kb-landing-copy h1 em {font-style:normal;color:#4f46e5}
.kb-landing-copy p {max-width:590px;color:#526078;font-size:1.12rem;line-height:1.8}
.kb-landing-actions {display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}
.kb-landing-primary {border:0;border-radius:15px;padding:15px 22px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:white;font-weight:900;font-size:1rem;box-shadow:0 10px 24px #4f46e544;cursor:pointer}
.kb-landing-primary span {margin-left:12px}
.kb-landing-points {display:flex;gap:18px;flex-wrap:wrap;color:#64748b;font-size:.88rem;font-weight:750}
.kb-landing-art {min-height:390px;position:relative;display:grid;place-items:center}
.kb-landing-orbit {position:absolute;border:2px dashed #a5b4fc;border-radius:50%;width:330px;height:330px}
.orbit-two {width:420px;height:420px;border-color:#fcd34d;transform:rotate(25deg)}
.kb-landing-book {position:absolute;right:15%;top:13%;font-size:4rem;transform:rotate(12deg)}
.kb-landing-mascot {z-index:1;display:grid;place-items:center;width:210px;height:210px;border-radius:48% 52% 45% 55%;background:linear-gradient(145deg,#bbf7d0,#dbeafe);font-size:8rem;box-shadow:0 24px 65px #64748b33}
.kb-landing-star {position:absolute;font-size:2.5rem}
.star-one {left:13%;top:20%}.star-two {right:13%;bottom:19%}
.kb-landing-caption {position:absolute;bottom:2%;padding:11px 18px;border-radius:99px;background:white;color:#4338ca;font-weight:850;box-shadow:0 8px 25px #64748b22}
.kb-landing-footer {text-align:center;padding:20px;color:#94a3b8;font-size:.82rem}
#account-overlay.kb-account-overlay {
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  padding:24px;background:
    radial-gradient(circle at 10% 90%,rgba(45,212,191,.18),transparent 28%),
    linear-gradient(135deg,#eef2ff,#fff7ed);
  overflow-y:auto;
}
#account-overlay .kb-account-card {width:min(100%,510px);max-height:calc(100vh - 48px);border:1px solid #e2e8f0}
#account-overlay .kb-account-close {cursor:pointer}
body.kb-account-open {overflow:hidden}
@media(max-width:760px) {
  .kb-landing-nav {height:68px;padding:0 18px}
  .kb-landing-content {grid-template-columns:1fr;text-align:center;padding:42px 0 28px}
  .kb-landing-copy p {margin-inline:auto;font-size:1rem}
  .kb-landing-actions,.kb-landing-points {justify-content:center}
  .kb-landing-art {min-height:300px;order:-1}
  .kb-landing-orbit {width:245px;height:245px}
  .orbit-two {width:300px;height:300px}
  .kb-landing-mascot {width:155px;height:155px;font-size:6rem}
  .kb-landing-book {font-size:3rem}
}