/* style.css - Premium, Colorful, Tactile Arabic Learning Application for Kids */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@600;700;800&family=Manjari:wght@700;800&family=Outfit:wght@600;700;800&display=swap');

:root {
  /* CoComelon Inspired Vibrant Joyful Palette */
  --coco-watermelon: #FF3366;
  --coco-watermelon-dark: #E11D48;
  --coco-melon-green: #10AC84;
  --coco-melon-bright: #2ED573;
  --coco-sky-blue: #0ABDE3;
  --coco-sky-dark: #0284C7;
  --coco-sun-yellow: #FFBE0B;
  --coco-mango-orange: #FA8231;
  --coco-grape-purple: #8854D0;
  
  --primary-coral: #FF3366;
  --primary-green: #10AC84;
  --primary-blue: #0ABDE3;
  --primary-indigo: #8854D0;
  --primary-amber: #FA8231;
  
  --font-arabic: 'Baloo Bhaijaan 2', cursive, sans-serif;
  --font-ml: 'Manjari', sans-serif;
  --font-ui: 'Outfit', 'Manjari', sans-serif;
  
  --radius-card: 20px;
  --radius-btn: 16px;
  --anim-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Smartphone Safe Area Inset Tokens */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

#class1-home-screen *,
#game-kaliveedu-screen * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

@media (max-width: 539px) {
}

/* SMARTPHONE & TABLET CONTAINER (Max-width 440px) */

.app-screen::-webkit-scrollbar {
  display: none;
}

@media (min-width: 540px) {
}

/* SMARTPHONE SAFE AREA BOTTOM SPACER */
.safe-area-bottom-spacer {
  width: 100%;
  height: env(safe-area-inset-bottom, 0px);
  flex-shrink: 0;
  pointer-events: none;
}

/* =====================================================================
   16 LETTERS RIBBON (Single Row Horizontally Scrollable)
   ===================================================================== */
.letters-ribbon-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 6px 2px;
  direction: rtl;
  flex-shrink: 0;
}

.letters-ribbon-container::-webkit-scrollbar {
  display: none;
}

.letters-ribbon {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: clamp(6px, 1.6vw, 10px);
  width: max-content;
  direction: rtl;
  padding: 0 2px;
}

.ribbon-letter-btn {
  flex: 0 0 auto;
  width: clamp(42px, 5.5vh, 48px);
  height: clamp(42px, 5.5vh, 48px);
  border-radius: 14px;
  border: 2px solid #E2E8F0;
  box-shadow: 0 3px 0 #CBD5E0, 0 3px 6px rgba(0, 0, 0, 0.04);
  background: #FFFFFF;
  font-family: var(--font-arabic);
  font-size: clamp(1.35rem, 2.4vh, 1.65rem);
  font-weight: 800;
  color: #0F172A; /* High-contrast readable ink color */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s var(--anim-bounce);
  padding: 0;
  line-height: 1;
}

/* Rhythmic CoComelon Pastel Candy Tints for 16 Letters Ribbon */
.ribbon-letter-btn:nth-child(6n+1) { border-color: #A7F3D0; box-shadow: 0 3px 0 #34D399, 0 3px 6px rgba(16, 185, 129, 0.15); background: #F0FDF4; }
.ribbon-letter-btn:nth-child(6n+2) { border-color: #BAE6FD; box-shadow: 0 3px 0 #38BDF8, 0 3px 8px rgba(14, 165, 233, 0.15); background: #F0F9FF; }
.ribbon-letter-btn:nth-child(6n+3) { border-color: #FED7AA; box-shadow: 0 3px 0 #FB923C, 0 3px 8px rgba(249, 115, 22, 0.15); background: #FFF7ED; }
.ribbon-letter-btn:nth-child(6n+4) { border-color: #DDD6FE; box-shadow: 0 3px 0 #A78BFA, 0 3px 8px rgba(139, 92, 246, 0.15); background: #F5F3FF; }
.ribbon-letter-btn:nth-child(6n+5) { border-color: #FECDD3; box-shadow: 0 3px 0 #FB7185, 0 3px 8px rgba(244, 63, 94, 0.15); background: #FFF1F2; }
.ribbon-letter-btn:nth-child(6n+6) { border-color: #FEF08A; box-shadow: 0 3px 0 #FACC15, 0 3px 8px rgba(234, 179, 8, 0.15); background: #FEFCE8; }

.ribbon-letter-btn .r-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(2px);
}

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

.ribbon-letter-btn.active {
  background: linear-gradient(135deg, #10AC84 0%, #059669 100%) !important;
  color: #FFFFFF !important;
  border-color: #047857 !important;
  box-shadow: 0 3.5px 0 #065F46, 0 6px 16px rgba(16, 172, 132, 0.45) !important;
  transform: translateY(-2px) scale(1.06);
}

/* =====================================================================
   4 SEQUENTIAL FLOW TABS (അക്ഷരം | ഹർക്കത്ത് | വാക്ക് | പരീക്ഷ)
   ===================================================================== */
.flow-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(3px, 1vw, 6px);
  background: #FFFFFF;
  padding: clamp(3px, 0.7vh, 6px);
  border-radius: 16px;
  border: 2px solid #E2E8F0;
  border-bottom: 3.5px solid #CBD5E1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  direction: rtl;
}

.flow-tab-btn {
  padding: clamp(4px, 0.7vh, 8px) 2px;
  border: none;
  background: transparent;
  border-radius: 12px;
  font-family: var(--font-ml);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.2s var(--anim-bounce);
  color: #475569;
}

.flow-tab-btn .step-num {
  font-family: var(--font-ui);
  font-size: clamp(0.7rem, 1.1vh, 0.8rem);
  font-weight: 800;
  width: clamp(18px, 2.4vh, 22px);
  height: clamp(18px, 2.4vh, 22px);
  border-radius: 50%;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  transition: all 0.2s;
}

.flow-tab-btn .step-title {
  font-size: clamp(0.78rem, 1.3vh, 0.95rem);
  font-weight: 800;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* Individual CoComelon Step Colors */
/* Step 1: Letter - Sky Blue */
.flow-tab-btn[data-step="letter"] .step-num { background: #E0F2FE; color: #0284C7; }
.flow-tab-btn[data-step="letter"].active {
  background: #F0F9FF;
  color: #0284C7;
  border: 1.5px solid #BAE6FD;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
  transform: translateY(-1px);
}
.flow-tab-btn[data-step="letter"].active .step-num {
  background: linear-gradient(135deg, #0EA5E9, #0284C7);
  color: #FFFFFF;
}

/* Step 2: Harkath - Melon Green */
.flow-tab-btn[data-step="harkath"] .step-num { background: #ECFDF5; color: #059669; }
.flow-tab-btn[data-step="harkath"].active {
  background: #F0FDF4;
  color: #059669;
  border: 1.5px solid #A7F3D0;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
  transform: translateY(-1px);
}
.flow-tab-btn[data-step="harkath"].active .step-num {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
}

/* Step 3: Word - Joyful Mango Orange */
.flow-tab-btn[data-step="word"] .step-num { background: #FFF7ED; color: #EA580C; }
.flow-tab-btn[data-step="word"].active {
  background: #FFF7ED;
  color: #EA580C;
  border: 1.5px solid #FED7AA;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
  transform: translateY(-1px);
}
.flow-tab-btn[data-step="word"].active .step-num {
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #FFFFFF;
}

/* Step 4: Test - Watermelon Pink/Red */
.flow-tab-btn[data-step="test"] .step-num { background: #FFF1F2; color: #E11D48; }
.flow-tab-btn[data-step="test"].active {
  background: #FFF1F2;
  color: #E11D48;
  border: 1.5px solid #FECDD3;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2);
  transform: translateY(-1px);
}
.flow-tab-btn[data-step="test"].active .step-num {
  background: linear-gradient(135deg, #F43F5E, #E11D48);
  color: #FFFFFF;
}

/* =====================================================================
   VIEW PANELS
   ===================================================================== */
.view-panel {
  display: none;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 12px);
}

.view-panel.active {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* =====================================================================
   PRESENTATION CARD (LEARN & LISTEN)
   ===================================================================== */
.card-display {
  background: #FFFFFF;
  border: 2.5px solid #A7F3D0;
  border-bottom: 4.5px solid #10B981;
  border-radius: var(--radius-card);
  padding: clamp(8px, 1.2vh, 12px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8vh, 8px);
  align-items: center;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.08);
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
}

/* HARKATH SELECTOR STRIP (Step 2: PURE ARABIC, TWO ROWS: 1-3 TOP, 4-7 BOTTOM) */
.harkath-strip {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.7vh, 6px);
  width: 100%;
  padding: 0 0 2px;
  flex-shrink: 0;
  direction: rtl;
}

.harkath-row {
  display: grid;
  gap: clamp(4px, 1vw, 7px);
  width: 100%;
  direction: rtl;
}

.harkath-row-top {
  grid-template-columns: repeat(3, 1fr);
}

.harkath-row-bottom {
  grid-template-columns: repeat(4, 1fr);
}

.harkath-btn {
  width: 100%;
  height: clamp(38px, 5.2vh, 48px);
  padding: 0;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  box-shadow: 0 3px 0 #CBD5E0, 0 3px 6px rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s var(--anim-bounce);
  font-family: var(--font-arabic);
}

/* CoComelon Candy Tints for Harkath Buttons */
.harkath-row-top .harkath-btn:nth-child(1) { border-color: #A7F3D0; border-bottom-color: #34D399; background: #F0FDF4; }
.harkath-row-top .harkath-btn:nth-child(2) { border-color: #BAE6FD; border-bottom-color: #38BDF8; background: #F0F9FF; }
.harkath-row-top .harkath-btn:nth-child(3) { border-color: #FED7AA; border-bottom-color: #FB923C; background: #FFF7ED; }

.harkath-row-bottom .harkath-btn:nth-child(1) { border-color: #DDD6FE; border-bottom-color: #A78BFA; background: #F5F3FF; }
.harkath-row-bottom .harkath-btn:nth-child(2) { border-color: #FECDD3; border-bottom-color: #FB7185; background: #FFF1F2; }
.harkath-row-bottom .harkath-btn:nth-child(3) { border-color: #FEF08A; border-bottom-color: #FACC15; background: #FEFCE8; }
.harkath-row-bottom .harkath-btn:nth-child(4) { border-color: #99F6E4; border-bottom-color: #2DD4BF; background: #F0FDFA; }

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

.harkath-btn.active {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  border-color: #047857 !important;
  border-bottom-color: #065F46 !important;
  box-shadow: 0 3px 0 #065F46, 0 6px 14px rgba(16, 185, 129, 0.4) !important;
}

.harkath-btn.active .h-char {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.harkath-btn .h-char {
  font-size: clamp(1.2rem, 2.2vh, 1.55rem);
  font-weight: 800;
  color: #0F172A; /* Maximum readability with deep ink color */
  line-height: 1;
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: translateY(2px);
}

/* PRESENTATION BOX - ALWAYS INSIDE BOX */
.char-box {
  width: 100%;
  flex: 1;
  min-height: 0;
  background: radial-gradient(circle at 50% 35%, #FFFFFF 0%, #F8FCF9 70%, #F0FDF4 100%);
  border: 3px solid #6EE7B7;
  border-bottom: 5px solid #10B981;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.9), 0 8px 24px rgba(16, 185, 129, 0.12);
  cursor: pointer;
  transition: transform 0.15s var(--anim-bounce), border-color 0.2s;
  padding: 0 clamp(20px, 8vw, 54px);
}

.char-box:hover {
  border-color: #34D399;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.9), 0 10px 28px rgba(16, 185, 129, 0.2);
}

.char-box:active:not(:has(.word-nav-arrow:active)) {
  transform: scale(0.985);
  border-color: #059669;
}

/* CORNER SPEAKER BADGE (Right Top Corner of Presentation Card) */
.char-box-speaker-badge {
  position: absolute;
  top: clamp(8px, 1.3vh, 12px);
  right: clamp(10px, 1.8vw, 14px);
  width: clamp(30px, 4.2vh, 36px);
  height: clamp(30px, 4.2vh, 36px);
  border-radius: 50%;
  background: #FFF1F2;
  border: 1.5px solid #FECDD3;
  color: #E11D48;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.18);
  pointer-events: none;
  transition: all 0.2s var(--anim-bounce);
  z-index: 12;
}

.char-box-speaker-badge svg {
  width: clamp(16px, 2.2vh, 20px);
  height: clamp(16px, 2.2vh, 20px);
  transform: translateX(-1px);
}

.char-box:hover .char-box-speaker-badge {
  transform: scale(1.08);
  background: #E11D48;
  color: #FFFFFF;
  border-color: #BE123C;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
}

.char-box-speaker-badge.is-speaking {
  animation: cornerSpeakerPulse 0.65s var(--anim-bounce);
}

@keyframes cornerSpeakerPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); background: #E11D48; color: #FFFFFF; box-shadow: 0 0 0 6px rgba(225, 29, 72, 0.25); }
  100% { transform: scale(1); }
}

.arabic-char {
  font-family: var(--font-arabic);
  font-weight: 800;
  color: #0F172A; /* Maximum readability: crisp deep ink black */
  text-align: center;
  line-height: 1.1;
  direction: rtl;
  max-width: 100%;
  max-height: 95%;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.arabic-char.is-letter {
  font-size: clamp(5.2rem, 15vh, 7.8rem);
  transform: translateY(8px);
}

.arabic-char.is-harkath {
  font-size: clamp(4.2rem, 11vh, 5.8rem);
  transform: translateY(6px);
}

.arabic-char.is-word {
  font-size: clamp(2.8rem, 6.5vh, 4.2rem);
  transform: translateY(4px);
}

/* WORD NAVIGATION ARROWS (Inside the Card) */
.word-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(36px, 5vh, 44px);
  height: clamp(36px, 5vh, 44px);
  border-radius: 12px;
  border: 2px solid #BAE6FD;
  border-bottom: 3.5px solid #0284C7;
  background: #FFFFFF;
  color: #0284C7;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.18);
  transition: all 0.15s var(--anim-bounce);
  padding: 0;
  z-index: 10;
}

.word-nav-arrow.nav-arrow-prev {
  right: clamp(6px, 1.8vw, 10px);
  left: auto;
}

.word-nav-arrow.nav-arrow-next {
  left: clamp(6px, 1.8vw, 10px);
  right: auto;
}

.word-nav-arrow:hover {
  background: #F0F9FF;
  border-color: #0284C7;
  color: #0369A1;
  transform: translateY(calc(-50% - 1px));
  box-shadow: 0 5px 12px rgba(2, 132, 199, 0.25);
}

.word-nav-arrow:active {
  transform: translateY(calc(-50% + 2px));
  border-bottom-width: 2px;
}

/* WORD LETTERS & SPEAKER ROW (Step 3: വാക്ക് - Speaker on Right with Visual Divider) */
.word-letters-row {
  display: flex;
  align-items: center;
  justify-content: center;
  direction: rtl; /* Right-to-Left: Speaker on the Right, then Divider, then Arabic Letters */
  gap: clamp(6px, 1.5vw, 10px);
  width: 100%;
  padding: clamp(4px, 0.8vh, 6px) clamp(6px, 2vw, 12px);
  background: #F0FDF4;
  border: 2px solid #A7F3D0;
  border-radius: 16px;
  box-shadow: inset 0 1px 3px rgba(16, 185, 129, 0.05);
}

.btn-row-speaker {
  width: clamp(40px, 5vh, 48px);
  height: clamp(40px, 5vh, 48px);
  min-width: clamp(40px, 5vh, 48px);
  min-height: clamp(40px, 5vh, 48px);
  flex-shrink: 0;
  border-bottom-width: 3.5px;
}

.word-letters-divider {
  width: 2px;
  height: clamp(24px, 3.5vh, 36px);
  background: #A7F3D0;
  border-radius: 2px;
  flex-shrink: 0;
  margin: 0 2px;
}

/* SYLLABLES STRIP (Step 3: വാക്ക് - Pure Right-to-Left Arabic Alignment) */
.syllables-strip {
  display: flex;
  direction: rtl;
  gap: clamp(4px, 1vw, 8px);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.syllable-chip {
  padding: clamp(2px, 0.5vh, 5px) clamp(8px, 2vw, 14px);
  min-width: clamp(38px, 5vw, 48px);
  height: clamp(36px, 5vh, 44px);
  background: #FFFFFF;
  border: 2px solid #BAE6FD;
  border-bottom: 3.5px solid #0284C7;
  border-radius: 12px;
  font-family: var(--font-arabic);
  font-size: clamp(1.35rem, 2.5vh, 1.75rem);
  font-weight: 800;
  color: #0369A1;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.12);
  transition: all 0.15s var(--anim-bounce);
  direction: rtl;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(1px);
}

/* Candy Tints for Multi-Syllables */
.syllable-chip:nth-child(3n+1) { border-color: #BAE6FD; border-bottom-color: #0284C7; color: #0369A1; background: #F0F9FF; }
.syllable-chip:nth-child(3n+2) { border-color: #FED7AA; border-bottom-color: #EA580C; color: #C2410C; background: #FFF7ED; }
.syllable-chip:nth-child(3n+3) { border-color: #DDD6FE; border-bottom-color: #7C3AED; color: #6D28D9; background: #F5F3FF; }

.syllable-chip:active {
  transform: translateY(3px) scale(0.96);
  border-bottom-width: 2px;
}

.syllable-chip.active-speaking {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: #FFFFFF !important;
  border-color: #047857 !important;
  border-bottom-color: #065F46 !important;
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 0 6px 16px rgba(16, 172, 132, 0.4) !important;
  transition: all 0.18s var(--anim-bounce);
}

.arabic-char.pulse-word {
  animation: wordBlendPulse 0.45s var(--anim-bounce);
}

@keyframes wordBlendPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); color: #0284C7; }
  100% { transform: scale(1); }
}

/* SPEAKER AUDIO BUTTON */
.btn-speaker,
.btn-listen {
  width: clamp(44px, 5.8vh, 54px);
  height: clamp(44px, 5.8vh, 54px);
  min-width: clamp(44px, 5.8vh, 54px);
  min-height: clamp(44px, 5.8vh, 54px);
  padding: 0;
  border: 2px solid #34D399;
  border-bottom: 4px solid #047857;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 172, 132, 0.35);
  transition: all 0.15s var(--anim-bounce);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-speaker svg,
.btn-listen svg {
  width: clamp(22px, 3vh, 28px);
  height: clamp(22px, 3vh, 28px);
  display: block;
  transition: transform 0.15s var(--anim-bounce);
}

.btn-speaker:hover,
.btn-listen:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 172, 132, 0.45);
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.btn-speaker:active,
.btn-listen:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow: 0 2px 6px rgba(16, 172, 132, 0.25);
}

.btn-speaker.is-speaking svg,
.btn-listen.is-speaking svg {
  animation: speakerPulse 0.35s ease-in-out infinite alternate;
}

@keyframes speakerPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.22); }
}

/* =====================================================================
   WRITING SECTION (Combined inside Main Card)
   ===================================================================== */
.card-writing-section,
.card-writing {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.6vh, 6px);
  flex: 0 0 auto;
  min-height: 0;
  border-top: 1.5px dashed #A7F3D0;
  padding-top: clamp(4px, 0.8vh, 8px);
}

.card-writing-section.is-draw-mode,
.card-writing-section:has(#panelModeDraw.active) {
  flex: 1 1 0;
}

.pad-header-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  flex-shrink: 0;
}

/* WRITING MODE TABS (Segmented Control: Icon-Only for Maximum Space) */
.writing-mode-tabs {
  display: inline-flex;
  gap: 4px;
  background: #FFFFFF;
  padding: 2px 3px;
  border-radius: 12px;
  border: 1.5px solid #E2E8F0;
  border-bottom: 2.5px solid #CBD5E1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.w-mode-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 4.8vh, 40px);
  height: clamp(28px, 3.8vh, 32px);
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #64748B;
  cursor: pointer;
  transition: all 0.18s var(--anim-bounce);
  line-height: 1;
}

.w-mode-tab svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
  transition: transform 0.18s var(--anim-bounce);
}

.w-mode-tab:active {
  transform: scale(0.92);
}

.w-mode-tab.active {
  background: #F0FDF4;
  color: #059669;
  box-shadow: 0 2px 6px rgba(16, 172, 132, 0.2);
  border: 1px solid #A7F3D0;
}

.w-mode-tab.active svg {
  color: #059669;
  transform: scale(1.1);
}

/* WRITING SUBPANELS */
.writing-subpanel {
  display: none !important;
  flex-direction: column;
  gap: clamp(6px, 1vh, 10px);
  width: 100%;
}

.writing-subpanel.active {
  display: flex !important;
  flex: 1;
  min-height: 0;
}

/* MODE 1: LETTER WRITING STYLES GRID (Short Words with Red Letter Highlight) */
#panelModeStyles {
  flex-direction: column;
  gap: clamp(4px, 0.7vh, 6px);
  flex: 0 0 auto;
  min-height: 0;
}

.ws-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(4px, 1.2vw, 8px);
  width: 100%;
  align-items: stretch;
  flex: 0 0 auto;
  direction: rtl;
}

.ws-column {
  border-radius: 12px;
  padding: 5px 3px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: auto;
  min-height: 0;
}

/* CoComelon Joyful Column Themes (Mint, Sky, Mango) */
.ws-column:nth-child(1) {
  background: #F0FDF4;
  border: 2px solid #A7F3D0;
  border-bottom: 3.5px solid #6EE7B7;
}
.ws-column:nth-child(1) .ws-col-label { color: #047857; }

.ws-column:nth-child(2) {
  background: #F0F9FF;
  border: 2px solid #BAE6FD;
  border-bottom: 3.5px solid #7DD3FC;
}
.ws-column:nth-child(2) .ws-col-label { color: #0369A1; }

.ws-column:nth-child(3) {
  background: #FFF7ED;
  border: 2px solid #FED7AA;
  border-bottom: 3.5px solid #FDBA74;
}
.ws-column:nth-child(3) .ws-col-label { color: #C2410C; }

.ws-col-label {
  font-family: var(--font-ml);
  font-size: clamp(0.76rem, 1.3vh, 0.88rem);
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ws-chips-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  flex: 0 0 auto;
  min-height: 0;
}

.ws-chip {
  width: 96%;
  height: clamp(34px, 4.8vh, 44px);
  flex: none;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-bottom: 3px solid #CBD5E1;
  border-radius: 10px;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s var(--anim-bounce);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.ws-chip:hover {
  border-color: #38BDF8;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.18);
}

.ws-chip:active {
  transform: translateY(1.5px);
  border-bottom-width: 1.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ws-chip.ws-active-pulse {
  animation: chipPulse 0.35s var(--anim-bounce);
}

@keyframes chipPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); border-color: #0284C7; }
  100% { transform: scale(1); }
}

.ws-word {
  font-family: var(--font-arabic);
  font-size: clamp(1.35rem, 2.4vh, 1.85rem);
  font-weight: 800;
  line-height: 1.1;
  direction: rtl;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

.char-target-red {
  color: #DC2626 !important; /* Bold vivid watermelon red for target letter */
  font-weight: 800;
  opacity: 1 !important;
}

.char-dim {
  color: #0F172A; /* Crisp deep ink for maximum contrast */
  opacity: 1;
  font-weight: 800;
}

/* MODE 2: DRAWING & WRITING SLATE */
#panelModeDraw {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 10px);
}

/* CANVAS BOX */
.canvas-box {
  width: 100%;
  flex: 1;
  min-height: 0;
  border: 2.5px solid #BAE6FD;
  border-bottom: 4px solid #38BDF8;
  border-radius: 14px;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03);
}

.drawing-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* PAD CONTROLS */
.pad-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  padding: 3px 6px 1px;
  width: 100%;
}

.crayon-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 14px);
}

.c-dot {
  width: clamp(26px, 3.8vh, 32px);
  height: clamp(26px, 3.8vh, 32px);
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
  transition: transform 0.15s, box-shadow 0.15s;
}

.c-dot.active {
  transform: scale(1.18);
  outline: 2.5px solid #2D3748;
  outline-offset: 2px;
}

.btn-clear-compact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: clamp(28px, 3.8vh, 33px);
  padding: 0 clamp(8px, 2vw, 12px);
  background: #FFF5F5;
  border: 1.5px solid #FED7D7;
  border-bottom: 2.5px solid #FEB2B2;
  border-radius: 8px;
  font-family: var(--font-ml);
  font-size: clamp(0.76rem, 1.3vh, 0.86rem);
  font-weight: 800;
  color: #E53E3E;
  cursor: pointer;
  transition: all 0.15s var(--anim-bounce);
  white-space: nowrap;
}

.btn-clear-compact:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
}

.btn-clear-compact:active {
  transform: translateY(1.5px);
  border-bottom-width: 1.5px;
  background: #FECACA;
}

.btn-clear-compact svg {
  flex-shrink: 0;
}

.c-rainbow {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) !important;
}

.btn-tool {
  padding: clamp(5px, 0.8vh, 7px) clamp(8px, 2vw, 12px);
  border: 2px solid #E2E8F0;
  border-bottom: 3px solid #CBD5E0;
  border-radius: 10px;
  background: #F8FAFD;
  font-family: var(--font-ml);
  font-size: clamp(0.82rem, 1.3vh, 0.95rem);
  font-weight: 800;
  color: #4A5568;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-tool:active {
  transform: translateY(1px);
  border-bottom-width: 2px;
  background: #EDF2F7;
}

.btn-tool.active-eraser {
  background: #2D3748;
  color: #FFFFFF;
  border-color: #2D3748;
  border-bottom-color: #1A202C;
}

.btn-clear {
  color: #E53E3E;
  border-color: #FED7D7;
  border-bottom-color: #FEB2B2;
  background: #FFF5F5;
}

/* BIG CHECK WRITING BUTTON */
.btn-check {
  width: 100%;
  padding: clamp(8px, 1.2vh, 12px);
  border: none;
  border-bottom: 3.5px solid #10AC84;
  border-radius: var(--radius-btn);
  background: linear-gradient(135deg, #2ED573 0%, #1DD1A1 100%);
  color: #FFFFFF;
  font-family: var(--font-ml);
  font-size: clamp(1.05rem, 1.8vh, 1.25rem);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(46, 213, 115, 0.3);
  transition: all 0.15s var(--anim-bounce);
  text-align: center;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.btn-check:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow: 0 2px 6px rgba(46, 213, 115, 0.25);
}

/* =====================================================================
   TESTING MODE (STEP 4)
   ===================================================================== */
.test-card {
  padding: clamp(10px, 1.6vh, 16px);
  gap: clamp(8px, 1.4vh, 16px);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #FFFFFF;
  border: 2.5px solid #FECDD3;
  border-bottom: 4.5px solid #F43F5E;
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(244, 63, 94, 0.08);
}

.test-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(0.9rem, 1.4vh, 1.05rem);
  font-weight: 800;
  color: #334155;
  flex-shrink: 0;
}

.test-top strong {
  color: #E11D48;
  font-family: var(--font-ui);
  font-size: clamp(1.1rem, 1.6vh, 1.25rem);
}

.test-prompt-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vh, 10px);
  text-align: center;
  flex-shrink: 0;
}

.prompt-text {
  font-size: clamp(1.05rem, 1.7vh, 1.25rem);
  font-weight: 800;
  color: #0F172A;
}

/* 2x2 CHOICE OPTIONS GRID (Zero Emojis, Pure Arabic Cards) */
.test-options-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 1.5vw, 12px);
  flex: 1;
  min-height: 0;
  direction: rtl;
}

.test-choice-card {
  height: 100%;
  min-height: clamp(75px, 10.5vh, 105px);
  max-height: 140px;
  background: #FFFFFF;
  border: 2.5px solid #E2E8F0;
  border-bottom: 4.5px solid #CBD5E1;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.15s var(--anim-bounce);
}

/* CoComelon Candy Tints for Test Choice Cards */
.test-choice-card:nth-child(1) { border-color: #BAE6FD; border-bottom-color: #38BDF8; background: #F0F9FF; }
.test-choice-card:nth-child(2) { border-color: #FED7AA; border-bottom-color: #FB923C; background: #FFF7ED; }
.test-choice-card:nth-child(3) { border-color: #DDD6FE; border-bottom-color: #A78BFA; background: #F5F3FF; }
.test-choice-card:nth-child(4) { border-color: #A7F3D0; border-bottom-color: #34D399; background: #F0FDF4; }

.test-choice-card:active {
  transform: translateY(2px);
  border-bottom-width: 2.5px;
}

.choice-arabic {
  font-family: var(--font-arabic);
  font-size: clamp(2.2rem, 3.8vh, 2.9rem);
  font-weight: 800;
  color: #0F172A; /* Maximum readability: crisp deep ink black */
  line-height: 1.1;
  text-align: center;
  direction: rtl;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(5px);
}

.choice-arabic.is-word {
  font-size: clamp(1.4rem, 2.6vh, 2.1rem);
  transform: none;
  padding: 0 4px;
  word-break: keep-all;
  white-space: nowrap;
}

.test-choice-card.correct-choice {
  border-color: #059669 !important;
  border-bottom-color: #047857 !important;
  background: #DCFCE7 !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45) !important;
  transform: scale(1.03);
}

.test-choice-card.correct-choice .choice-arabic {
  color: #065F46 !important;
}

.test-choice-card.wrong-choice {
  border-color: #E11D48 !important;
  border-bottom-color: #BE123C !important;
  background: #FFE4E6 !important;
  animation: shakeCard 0.4s ease;
}

.test-choice-card.wrong-choice .choice-arabic {
  color: #9F1239 !important;
}

@keyframes shakeCard {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.feedback-banner {
  width: 100%;
  padding: 10px;
  border-radius: 14px;
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  display: none;
}

.feedback-banner.show {
  display: block;
}

.feedback-banner.correct {
  background: #DEF7EC;
  color: #03543F;
}

.feedback-banner.wrong {
  background: #FDE8E8;
  color: #9B1C1C;
}

/* =====================================================================
   CELEBRATION MODAL & CONFETTI
   ===================================================================== */
#confettiCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  padding-top: max(20px, env(safe-area-inset-top, 20px));
  padding-bottom: max(28px, env(safe-area-inset-bottom, 28px));
  padding-left: max(16px, env(safe-area-inset-left, 16px));
  padding-right: max(16px, env(safe-area-inset-right, 16px));
}

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

.modal-box {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 28px 24px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
  animation: modalPop 0.3s var(--anim-bounce);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@keyframes modalPop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.modal-box h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #2ED573;
}

.modal-box p {
  font-size: 1.15rem;
  font-weight: 700;
  color: #4A5568;
}

.btn-modal-close {
  padding: 12px;
  border: none;
  border-bottom: 4px solid #0056B3;
  border-radius: 14px;
  background: linear-gradient(135deg, #1E90FF 0%, #0984E3 100%);
  color: #FFFFFF;
  font-family: var(--font-ml);
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: 0 6px 16px rgba(30, 144, 255, 0.3);
}

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

/* =====================================================================
   RESPONSIVE SMARTPHONE MEDIA QUERIES (Zero-Scroll on All Devices)
   ===================================================================== */

/* Height Breakpoint: Compact Smartphones (height <= 760px, e.g. iPhone 12/13 mini, Galaxy S, standard mobile viewports) */
@media (max-height: 760px) {
  .card-display, .card-writing, .test-card {
    padding: 8px 10px;
    gap: 6px;
  }
  .safe-area-bottom-spacer {
    height: 0px;
  }
}

/* Height Breakpoint: Small Smartphones (height <= 680px, e.g. iPhone SE, iPhone 8, compact screens) */
@media (max-height: 680px) {
  .letters-ribbon {
    gap: 5px;
  }
  .ribbon-letter-btn {
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
  }
  .flow-tabs {
    gap: 3px;
    padding: 3px;
    border-radius: 12px;
  }
  .flow-tab-btn {
    padding: 3px 2px;
    gap: 1px;
  }
  .flow-tab-btn .step-num {
    width: 16px;
    height: 16px;
    font-size: 0.68rem;
  }
  .flow-tab-btn .step-title {
    font-size: 0.76rem;
  }
  .card-display {
    padding: 6px 8px;
    gap: 5px;
  }
  .harkath-strip {
    gap: 3px;
  }
  .harkath-row {
    gap: 3px;
  }
  .harkath-btn {
    height: 35px;
  }
  .harkath-btn .h-char {
    font-size: 1.15rem;
  }
  .char-box {
    flex: 1.6;
    min-height: 140px;
    height: auto;
    border-radius: 14px;
    padding: 0 clamp(16px, 5vw, 36px);
  }
  .arabic-char.is-letter {
    font-size: clamp(4.4rem, 12vh, 6.2rem);
    transform: translateY(6px);
  }
  .arabic-char.is-harkath {
    font-size: clamp(3.8rem, 10vh, 5.2rem);
    transform: translateY(4px);
  }
  .arabic-char.is-word {
    font-size: clamp(2.4rem, 5.5vh, 3.6rem);
    transform: translateY(2px);
  }
  .btn-speaker,
  .btn-listen {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
  .btn-speaker svg,
  .btn-listen svg {
    width: 20px;
    height: 20px;
  }
  .card-writing {
    padding: 6px 8px;
    gap: 5px;
  }
  .w-mode-tab {
    padding: 3px 8px;
    font-size: 0.78rem;
  }
  .ws-grid {
    gap: 4px;
  }
  .ws-column {
    padding: 4px 2px 6px;
    gap: 3px;
    border-radius: 9px;
  }
  .ws-col-label {
    font-size: 0.72rem;
  }
  .char-box {
    min-height: 85px;
  }
  .ws-chip {
    min-height: 28px;
    max-height: 36px;
    border-radius: 8px;
  }
  .ws-word {
    font-size: 1.35rem;
  }
  .canvas-box {
    min-height: 95px;
  }
  .test-card {
    padding: 8px 10px;
    gap: 6px;
  }
  .test-choice-card {
    min-height: 62px;
  }
  .choice-arabic {
    font-size: 2.0rem;
    transform: translateY(3px);
  }
}

/* Width Breakpoint: Narrow Smartphones (width <= 360px, e.g. Galaxy A01, small Androids) */
@media (max-width: 360px) {
  .letters-ribbon {
    gap: 5px;
  }
  .ribbon-letter-btn {
    width: 38px;
    height: 38px;
    border-width: 1.5px;
    font-size: 1.3rem;
  }
  .flow-tabs {
    gap: 2px;
    padding: 2px;
  }
  .flow-tab-btn .step-title {
    font-size: 0.74rem;
  }
  .harkath-strip {
    gap: 2px;
  }
  .ws-grid {
    gap: 3px;
  }
  .ws-col-label {
    font-size: 0.72rem;
  }
  .ws-word {
    font-size: 1.45rem;
  }
}

/* =====================================================================
   DEDICATED ARABI KALIVEEDU SCREEN & MINIMAL HEADER (NO BULKY TOP BAR)
   ===================================================================== */
#game-kaliveedu-screen {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 440px;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  background: radial-gradient(circle at 50% 0%, #FFFFFF 0%, #F0FDF4 55%, #F5F3FF 100%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 10px 12px;
  gap: clamp(4px, 0.8vh, 8px);
  box-sizing: border-box;
  overflow: hidden;
  direction: ltr;
}

#game-kaliveedu-screen.hidden {
  display: none !important;
}

.kaliveedu-minimal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 4px 0;
  margin-bottom: 2px;
  width: 100%;
}

.kaliveedu-minimal-header .btn-back {
  background: #FFFFFF;
  color: #0F172A;
  border: 2px solid #E2E8F0;
  border-bottom: 3.5px solid #CBD5E1;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.kaliveedu-minimal-header .btn-back:active {
  transform: scale(0.92);
}

.kaliveedu-minimal-header .flow-tabs {
  flex: 1;
  min-width: 0;
  margin-bottom: 0 !important;
}