:root {
  --cream: #FFF8EE;
  --cream2: #FFF0D8;
  --terra: #E8634A;
  --terra-dark: #C44A32;
  --green: #5A9E6F;
  --green-dark: #3D7A52;
  --gold: #F0A830;
  --gold-dark: #C8841A;
  --purple: #7C4DBC;
  --purple-dark: #5C2D9A;
  --brown: #3D2B1F;
  --brown-light: #6B4A35;
  --sand: #DEB887;
  --font: 'Baloo 2', sans-serif;
  --radius: 20px;
  --shadow: 0 6px 24px rgba(61,43,31,0.15);
  --shadow-sm: 0 3px 12px rgba(61,43,31,0.10);

  /* Alpha Race (retro LCD alphabet game) palette */
  --pixel-on: #2E3B24;
  --pixel-ghost: rgba(46,59,36,0.16);
  --pixel-ghost-word: rgba(46,59,36,0.38);
  --pixel-mid: rgba(46,59,36,0.55);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body { font-family: var(--font); background: var(--cream); color: var(--brown); user-select: none; }

.screen { display: none; height: 100vh; height: 100dvh; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.screen.active { display: flex; }

/* ═══ HOME ═══ */
#home {
  background: linear-gradient(180deg,
    #1A0A3A 0%, #2D1B6E 15%, #4A2090 25%, #7B3FA0 35%,
    #E8834A 55%, #F0A830 65%, #8DC86A 78%, #5A9E6F 88%, #3D7A52 100%);
  position: relative; overflow-x: hidden;
}
#home::before {
  content: '';
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: 118px;
  height: 130px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 74%, rgba(122,191,91,0.82) 0 26%, transparent 27%),
    radial-gradient(ellipse at 52% 82%, rgba(92,158,94,0.78) 0 34%, transparent 35%),
    radial-gradient(ellipse at 86% 76%, rgba(72,137,83,0.72) 0 30%, transparent 31%);
  z-index: 1;
}
#home::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 62%, rgba(255,248,208,0.18), transparent 18%),
    radial-gradient(circle at 82% 54%, rgba(255,255,255,0.12), transparent 20%),
    linear-gradient(180deg, transparent 0 55%, rgba(255,248,208,0.10) 78%, transparent 100%);
  z-index: 2;
}
.stars-bg { position: absolute; top: 0; left: 0; right: 0; height: 45%; pointer-events: none; }
.star-dot  { position: absolute; background: white; border-radius: 50%; animation: twinkle ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:0.3;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)} }
.moon { position: absolute; top: 18px; left: 28px; width: 52px; height: 52px; background: #FFF8D0; border-radius: 50%; box-shadow: 0 0 20px rgba(255,248,200,0.6), 0 0 40px rgba(255,248,200,0.3); }
.moon::after { content:''; position:absolute; top:6px; right:-4px; width:42px; height:42px; background:#2D1B6E; border-radius:50%; }
.sun-rise { position: absolute; top: 38%; right: 24px; width: 60px; height: 60px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 0 10px rgba(240,168,48,0.2), 0 0 0 22px rgba(240,168,48,0.1); animation: sunPulse 3s ease-in-out infinite; }
@keyframes sunPulse { 0%,100%{box-shadow:0 0 0 10px rgba(240,168,48,0.2),0 0 0 22px rgba(240,168,48,0.1)} 50%{box-shadow:0 0 0 16px rgba(240,168,48,0.25),0 0 0 32px rgba(240,168,48,0.12)} }
.ground { position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: linear-gradient(180deg, #6AAD50 0%, #5A9E6F 40%, #4A8A5C 100%); border-radius: 60% 60% 0 0 / 30% 30% 0 0; }
.home-cloud {
  position: absolute;
  z-index: 1;
  width: 104px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,0.38);
  box-shadow:
    24px -11px 0 7px rgba(255,255,255,0.32),
    58px -5px 0 3px rgba(255,255,255,0.28),
    76px 3px 0 -4px rgba(255,255,255,0.30);
  pointer-events: none;
  animation: homeCloudDrift 9s ease-in-out infinite alternate;
}
.home-cloud-a { left: 18px; top: 126px; transform: scale(0.78); }
.home-cloud-b { right: 36px; top: 214px; transform: scale(0.55); animation-duration: 11s; animation-delay: -2s; }
.home-firefly {
  position: absolute;
  z-index: 4;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  pointer-events: none;
  background: #fff7a8;
  box-shadow: 0 0 10px #fff7a8, 0 0 22px rgba(255,247,168,0.66);
  animation: fireflyFloat 4.8s ease-in-out infinite;
}
.home-firefly-a { left: 9%; top: 55%; }
.home-firefly-b { left: 82%; top: 47%; animation-delay: -1.6s; }
.home-firefly-c { left: 68%; top: 72%; animation-delay: -2.8s; }
@keyframes homeCloudDrift { from { margin-left: -8px; } to { margin-left: 18px; } }
@keyframes fireflyFloat {
  0%,100% { opacity: 0.32; transform: translate(0,0) scale(0.72); }
  45% { opacity: 1; transform: translate(10px,-15px) scale(1.08); }
  70% { opacity: 0.52; transform: translate(-8px,-5px) scale(0.86); }
}

.home-top { position: relative; z-index: 5; padding: 18px 20px 0; display: flex; justify-content: space-between; align-items: center; }
.app-logo { font-size: 24px; font-weight: 800; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.stars-counter { background: var(--gold); border-radius: 30px; padding: 8px 16px; display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 18px; color: white; box-shadow: 0 4px 12px rgba(240,168,48,0.5); }
.streak-counter { background: linear-gradient(135deg,#FF7A45,#E8342A); border-radius: 30px; padding: 8px 14px; display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 18px; color: white; box-shadow: 0 4px 12px rgba(232,52,42,0.45); }
.streak-milestone-popup { position: fixed; left: 50%; top: 30%; transform: translate(-50%,-50%) scale(0.8); z-index: 9999; background: linear-gradient(135deg,#FF7A45,#E8342A); color: white; padding: 22px 30px; border-radius: 24px; text-align: center; font-weight: 800; box-shadow: 0 12px 30px rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
.streak-milestone-popup.show { opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: auto; }
.streak-milestone-popup .streak-milestone-title { font-size: 22px; margin-bottom: 6px; }
.streak-milestone-popup .streak-milestone-sub { font-size: 15px; font-weight: 600; opacity: 0.9; }

/* PARENT GATE & PARENT SCREEN */
.parent-gate-body { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 24px; text-align: center; }
.parent-gate-emoji { font-size: 48px; }
.parent-gate-question { font-size: 28px; font-weight: 800; color: var(--brown); }
.parent-gate-input { width: 160px; text-align: center; font-size: 22px; font-weight: 700; padding: 12px; border-radius: 14px; border: 2px solid rgba(0,0,0,0.15); font-family: var(--font); }
.parent-gate-error { color: #C0392B; font-weight: 700; font-size: 14px; }

.parent-screen-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.parent-card { background: #FFF8EE; border-radius: 16px; padding: 16px; }
.parent-card-title { font-weight: 800; font-size: 15px; margin-bottom: 10px; color: var(--brown); }
.parent-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; color: #6B4A35; }
.parent-stat-row b { color: var(--brown); }
.parent-weak-letter { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(232,52,42,0.12); color: #C0392B; font-weight: 800; margin: 3px; }
.parent-empty-note { font-size: 13px; color: #8a7462; font-style: italic; }

/* PROFILE SWITCHER */
.profile-switch-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.15); font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.profiles-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.profile-card { display: flex; align-items: center; gap: 14px; background: #FFF8EE; border-radius: 16px; padding: 14px 16px; cursor: pointer; border: 2px solid transparent; }
.profile-card.active { border-color: var(--gold); background: #FFF1D6; }
.profile-card-avatar { font-size: 32px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.05); border-radius: 12px; flex-shrink: 0; }
.profile-card-info { flex: 1; min-width: 0; }
.profile-card-name { font-weight: 800; font-size: 16px; color: var(--brown); }
.profile-card-sub { font-size: 12px; color: #8a7462; margin-top: 2px; }
.profile-card-actions { display: flex; gap: 6px; }
.profile-card-actions button { width: 34px; height: 34px; border-radius: 10px; border: none; background: rgba(0,0,0,0.06); font-size: 15px; cursor: pointer; }
.profile-add-card { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 16px; border: 2px dashed rgba(0,0,0,0.2); color: #8a7462; font-weight: 700; cursor: pointer; }
.profile-add-card.disabled { opacity: 0.45; cursor: not-allowed; }
.profile-name-input { width: 100%; padding: 12px; border-radius: 12px; border: 2px solid rgba(0,0,0,0.15); font-family: var(--font); font-size: 15px; box-sizing: border-box; }
.profile-dialog-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(30,20,14,0.58); }
.profile-dialog { position: relative; width: min(100%, 360px); padding: 28px 22px 22px; border-radius: 24px; background: #FFF8EE; color: var(--brown); box-shadow: 0 20px 50px rgba(0,0,0,0.28); }
.profile-dialog h2 { margin: 0 32px 12px 0; font-size: 22px; line-height: 1.2; }
.profile-dialog-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #F0E6D6; color: var(--brown); font-size: 28px; line-height: 1; cursor: pointer; }
.profile-dialog-message { margin: 0 0 16px; color: #6B4A35; line-height: 1.45; }
.profile-dialog-error { min-height: 20px; padding-top: 6px; color: #C0392B; font-size: 13px; font-weight: 700; }
.profile-dialog-actions { display: flex; gap: 10px; margin-top: 18px; }
.profile-dialog-actions button { flex: 1; min-height: 46px; border: 0; border-radius: 14px; padding: 10px 12px; font-family: var(--font); font-size: 15px; font-weight: 800; cursor: pointer; }
.profile-dialog-cancel { background: #EDE3D4; color: var(--brown); }
.profile-dialog-confirm { background: var(--green); color: #fff; }
.profile-dialog-confirm.danger { background: #C0392B; }


/* Live Book home shell v3.0 */
.live-book-home {
  margin-top: 12px;
  padding: 0 14px 0;
}
.live-book-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 132px;
  margin: 2px 2px 14px;
  padding: 18px 16px;
  border-radius: 32px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(96,49,18,0.28) 0 18px, transparent 18px),
    radial-gradient(circle at 82% 18%, rgba(255,224,102,0.54), transparent 24%),
    linear-gradient(135deg, #fff7d7 0%, #f7e8bd 46%, #dff6d6 100%);
  color: #3d2b1f;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.86),
    inset 0 -12px 24px rgba(119,77,26,0.08),
    0 10px 0 rgba(91,59,28,0.16),
    0 20px 34px rgba(0,0,0,0.18);
}
.live-book-hero::before {
  content: '';
  position: absolute;
  inset: 12px 14px 12px 30px;
  border: 2px solid rgba(93,64,55,0.12);
  border-radius: 24px;
  background:
    linear-gradient(rgba(15,118,110,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,0.07) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}
.live-book-hero::after {
  content: '';
  position: absolute;
  right: -38px;
  bottom: -48px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,166,0.23), transparent 62%);
  pointer-events: none;
}
.live-book-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15,118,110,0.12);
  color: #0f766e;
  font-weight: 1000;
  font-size: 12px;
}
.live-book-copy {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  padding-left: 14px;
}
.live-book-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(15,118,110,0.12);
  color: #0f766e;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.3px;
}
.live-book-copy h1 {
  margin: 0;
  font-size: 26px;
  line-height: 0.94;
  letter-spacing: -0.8px;
  color: #3d2b1f;
}
.live-book-copy p {
  max-width: 245px;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.16;
  font-weight: 850;
  color: rgba(61,43,31,0.74);
}
.live-book-mini {
  position: relative;
  z-index: 1;
  width: 88px;
  min-width: 88px;
  height: 88px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.32));
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.74), 0 8px 0 rgba(93,64,55,0.10), 0 14px 20px rgba(93,64,55,0.16);
  transform: rotate(4deg);
}
.live-book-mini span {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 10px;
  color: #3d2b1f;
  font-weight: 1000;
  box-shadow: 0 4px 0 rgba(61,43,31,0.13);
}
.live-book-mini span:nth-child(1) { left: 10px; top: 10px; background: #ffe066; transform: rotate(-14deg); }
.live-book-mini span:nth-child(2) { right: 8px; top: 17px; background: #80deea; transform: rotate(13deg); }
.live-book-mini span:nth-child(3) { left: 12px; bottom: 12px; background: #ff9eba; transform: rotate(8deg); }
.live-book-mini span:nth-child(4) { right: 10px; bottom: 13px; background: #a5d6a7; transform: rotate(-12deg); }
.live-book-label {
  margin: 0 0 10px 6px;
  color: rgba(255,255,255,0.92);
}
.live-book-shell {
  position: relative;
  margin: 0 0 2px;
  padding: 18px 14px 20px;
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(116,78,38,0.18), transparent 12%, transparent 88%, rgba(116,78,38,0.14)),
    linear-gradient(135deg, #fffaf0 0%, #fff3d2 50%, #f1f8df 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.9),
    0 12px 0 rgba(91,59,28,0.18),
    0 22px 34px rgba(0,0,0,0.19);
  overflow: hidden;
}
.live-book-page {
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: calc(50% - 2px);
  border-radius: 24px;
  background:
    linear-gradient(rgba(15,118,110,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,0.055) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}
.live-book-page-left { left: 12px; }
.live-book-page-right { right: 12px; }
.live-book-center {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 18px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(93,64,55,0.12), transparent);
  filter: blur(0.2px);
  pointer-events: none;
}
.live-book-grid {
  position: relative;
  z-index: 1;
}
.live-book-grid .topic-card {
  min-height: 142px;
  border-radius: 24px;
}
.live-book-grid .topic-card:nth-child(odd):not(.topic-games) {
  transform: rotate(-0.6deg);
}
.live-book-grid .topic-card:nth-child(even):not(.topic-games) {
  transform: rotate(0.6deg);
}
.live-book-grid .topic-card:active,
.live-book-grid .topic-card.topic-pressing {
  transform: translateY(7px) scale(0.99) !important;
}
@media (max-width: 380px) {
  .live-book-hero { padding: 16px 12px; }
  .live-book-copy h1 { font-size: 23px; }
  .live-book-copy p { font-size: 12px; }
  .live-book-mini { width: 76px; min-width: 76px; height: 76px; }
  .live-book-shell { padding: 14px 10px 16px; }
  .live-book-grid .topic-card { min-height: 132px; padding: 14px 12px; }
}

/* MISSIONS */
.home-missions { position: relative; z-index: 5; margin-top: auto; padding: 0 14px 0; }

.home-missions.live-book-home {
  margin-top: 8px;
  padding: 0 14px env(safe-area-inset-bottom, 24px);
  padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
}

.missions-label { font-size: 20px; font-weight: 800; color: white; text-shadow: 0 2px 6px rgba(0,0,0,0.3); margin-bottom: 12px; padding-left: 4px; }
.missions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mission-card { background: white; border-radius: 20px; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.15s; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; border: 3px solid transparent; }
.mission-card::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; border-radius:20px 20px 0 0; }
.mission-card.letters::before { background: var(--terra); }
.mission-card.numbers::before { background: var(--green); }
.mission-card.colors::before  { background: var(--gold); }
.mission-card.heyvanlar_vehshi::before { background: var(--purple); }
.mission-card.heyvanlar_ev::before     { background: var(--purple); }
.mission-card.meyveler::before { background: var(--terra); }
.mission-card.fiqurlar::before { background: var(--green); }

.mission-card.peseler::before   { background: var(--terra); }
.mission-card.naqliyyat::before { background: var(--green); }
.mission-card.geyim::before     { background: var(--purple); }
.mission-card.terevezer::before { background: var(--green); }
.mission-card.test::before { background: #c0392b; }
.mission-card.test .mission-progress-fill { background: #FF6B6B; }


/* Əlifba card redesign */
.elifba-card {
  background: linear-gradient(135deg, #e84040 0%, #a01818 100%) !important;
  border-color: rgba(255,255,255,0.15) !important;
  padding: 0 !important;
  min-height: 140px;
}
.elifba-letters-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 900;
  color: white;
  overflow: hidden;
}
.elifba-letters-bg span {
  position: absolute;
  line-height: 1;
}
.elifba-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  width: 100%;
}
.elifba-card-title {
  font-size: 22px;
  font-weight: 900;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  letter-spacing: 1px;
}
.elifba-remind {
  font-size: 13px;
  font-weight: 800;
  color: #FFE066;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  animation: remind-pulse 2s ease-in-out infinite;
}
@keyframes remind-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.05); }
}
/* Fruits card — Tropical Garden */
.tropic-card {
  background: linear-gradient(145deg, #2E7D32 0%, #388E3C 30%, #1B5E20 65%, #33691E 100%) !important;
  border-color: rgba(200,230,150,0.25) !important;
  overflow: hidden;
  min-height: 140px;
  padding: 0 !important;
}
.tropic-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.tropic-leaf {
  position: absolute;
  border-radius: 0 100% 0 100%;
  opacity: 0.85;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.25);
}
.tropic-fruit {
  position: absolute;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35));
}
.tropic-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  width: 100%;
}
.tropic-card-title {
  font-size: 22px;
  font-weight: 900;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}

/* Vegetables card — Bazaar */
.bazaar-card {
  background: linear-gradient(145deg, #E53935 0%, #D32F2F 25%, #BF360C 55%, #FF6F00 85%, #F9A825 100%) !important;
  border-color: rgba(255,220,100,0.3) !important;
  overflow: hidden;
  min-height: 140px;
  padding: 0 !important;
}
.bazaar-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.bazaar-veg {
  position: absolute;
  line-height: 1;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.4));
}
.bazaar-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  width: 100%;
}
.bazaar-card-title {
  font-size: 22px;
  font-weight: 900;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}

/* Shapes card — Neon Cosmos */
.neon-card {
  background: linear-gradient(145deg, #0D0D2B 0%, #1A1040 35%, #0F1F4A 70%, #0A0A1E 100%) !important;
  border-color: rgba(150,100,255,0.3) !important;
  overflow: hidden;
  min-height: 140px;
  padding: 0 !important;
}
.neon-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.neon-shape {
  position: absolute;
}
.neon-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  width: 100%;
}
.neon-card-title {
  font-size: 22px;
  font-weight: 900;
  color: white;
  text-shadow: 0 0 12px rgba(180,130,255,0.9), 0 2px 8px rgba(0,0,0,0.7);
  letter-spacing: 0.5px;
}

/* Animals card — Safari */
.safari-card {
  background: linear-gradient(180deg, #FF8F00 0%, #F57C00 30%, #E65100 65%, #BF360C 100%) !important;
  border-color: rgba(255,204,128,0.3) !important;
  overflow: hidden;
  min-height: 140px;
  padding: 0 !important;
}
.safari-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.safari-grass {
  position: absolute;
  background: #4E342E;
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
  opacity: 0.45;
}
.safari-tree {
  position: absolute;
  width: 44px; height: 52px;
}
.safari-tree::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 28px;
  background: #4E342E;
  opacity: 0.5;
  border-radius: 3px;
}
.safari-tree::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 30px;
  background: #4E342E;
  opacity: 0.45;
  border-radius: 50% 50% 30% 30%;
}
.safari-sun {
  position: absolute;
  top: -18%; right: -5%;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFEE58 0%, #FFB300 60%, transparent 100%);
  opacity: 0.35;
}
.safari-animal {
  position: absolute;
  font-size: 28px;
  opacity: 0.55;
  filter: grayscale(0.3) brightness(0.6);
}
.safari-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  width: 100%;
}
.safari-card-title {
  font-size: 22px;
  font-weight: 900;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
  letter-spacing: 0.5px;
}

/* Ev heyvanları card — Farm */
.farm-card {
  background: linear-gradient(180deg, #9CCC65 0%, #7CB342 35%, #558B2F 70%, #33691E 100%) !important;
  border-color: rgba(220,237,200,0.3) !important;
  overflow: hidden;
  min-height: 140px;
  padding: 0 !important;
}
.farm-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.farm-hill {
  position: absolute;
  left: -10%; right: -10%; bottom: -30%;
  height: 60%;
  background: #689F38;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: 0.5;
}
.farm-fence {
  position: absolute;
  bottom: 0;
  width: 6px; height: 26px;
  background: #8D6E63;
  opacity: 0.55;
  border-radius: 2px 2px 0 0;
}
.farm-fence::before {
  content: '';
  position: absolute;
  left: -8px; top: 8px;
  width: 22px; height: 4px;
  background: #8D6E63;
}
.farm-sun {
  position: absolute;
  top: -18%; left: -5%;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF59D 0%, #FFEE58 60%, transparent 100%);
  opacity: 0.4;
}
.farm-animal {
  position: absolute;
  font-size: 28px;
  opacity: 0.6;
  filter: grayscale(0.2) brightness(0.75);
}
.farm-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  width: 100%;
}
.farm-card-title {
  font-size: 22px;
  font-weight: 900;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
  letter-spacing: 0.5px;
}

/* Colors card — Rainbow + blobs */
.rainbow-card {
  background: linear-gradient(135deg,
    #FF5252 0%, #FF9800 18%, #FFEB3B 35%,
    #4CAF50 52%, #2196F3 68%, #9C27B0 84%, #E91E63 100%) !important;
  border-color: rgba(255,255,255,0.25) !important;
  overflow: hidden;
  min-height: 140px;
  padding: 0 !important;
}
.rainbow-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.paint-blob {
  position: absolute;
  border-radius: 50% 44% 56% 40% / 48% 52% 44% 56%;
  opacity: 0.55;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.15), 0 3px 8px rgba(0,0,0,0.2);
}
.rainbow-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  width: 100%;
}
.rainbow-card-title {
  font-size: 22px;
  font-weight: 900;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}

/* Numbers card — Blocks style */
.blocks-card {
  background: linear-gradient(135deg, #FFF8E1 0%, #FFE0B2 60%, #FFCCBC 100%) !important;
  border-color: rgba(0,0,0,0.08) !important;
  overflow: hidden;
  min-height: 140px;
  padding: 0 !important;
}
.blocks-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.num-block {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 900;
  color: white;
  line-height: 1;
}
.blocks-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  width: 100%;
}
.blocks-card-title {
  font-size: 22px;
  font-weight: 900;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.65), 0 0 20px rgba(0,0,0,0.4);
  letter-spacing: 0.5px;
}
.mission-card:active { transform: scale(0.94); }
.mission-name { font-size: 18px; font-weight: 800; color: var(--brown); text-align: center; }
.mission-progress { width: 100%; height: 10px; background: rgba(0,0,0,0.13); border-radius: 10px; overflow: hidden; }
.mission-progress-fill { height: 100%; border-radius: 10px; transition: width 0.6s ease; }
/* Трек пульсирует пока прогресс = 0 */
@keyframes progressPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.35; }
}
.mission-progress.is-empty { animation: progressPulse 1.4s ease-in-out infinite; }
.mission-card.letters .mission-progress-fill { background: var(--terra); }
.mission-card.numbers .mission-progress-fill { background: var(--green); }
.mission-card.colors  .mission-progress-fill { background: var(--gold); }
.mission-card.heyvanlar_vehshi .mission-progress-fill { background: var(--purple); }
.mission-card.heyvanlar_ev     .mission-progress-fill { background: var(--purple); }
.mission-card.meyveler .mission-progress-fill { background: var(--terra); }
.mission-card.fiqurlar .mission-progress-fill { background: var(--green); }

.mission-card.peseler   .mission-progress-fill { background: var(--terra); }
.mission-card.naqliyyat .mission-progress-fill { background: var(--green); }
.mission-card.geyim     .mission-progress-fill { background: var(--purple); }
.mission-card.terevezer .mission-progress-fill { background: var(--green); }
.mission-pts { font-size: 13px; font-weight: 600; color: var(--brown-light); }
.badge-new { position: absolute; top: 10px; right: 10px; background: var(--purple); color: white; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }

.mute-btn { background: rgba(255,255,255,0.2); border: none; border-radius: 30px; padding: 8px 12px; font-size: 20px; cursor: pointer; }

/* HOME FOOTER — reset button */
.home-footer { position: relative; z-index: 5; padding: 16px 14px 32px; }
.reset-progress-btn { width: 100%; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 14px; font-family: var(--font); font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.75); cursor: pointer; }
.reset-progress-btn:active { background: rgba(255,255,255,0.22); }

/* ═══ LESSON ═══ */
#lesson { background: var(--cream); overflow: hidden; }
.lesson-screen-letters { background: linear-gradient(180deg, #1A0A3A 0%, #2D1B6E 15%, #4A2090 25%, #7B3FA0 35%, #E8834A 55%, #F0A830 65%, #8DC86A 78%, #5A9E6F 88%, #3D7A52 100%) !important; }
.lesson-header { padding: 14px 16px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; z-index: 100; }
.lesson-header.terra  { background: linear-gradient(135deg, var(--terra), var(--terra-dark)); box-shadow: 0 3px 12px rgba(232,99,74,0.35); }
.lesson-header.green  { background: linear-gradient(135deg, var(--green), var(--green-dark)); box-shadow: 0 3px 12px rgba(90,158,111,0.35); }
.lesson-header.gold   { background: linear-gradient(135deg, var(--gold),  var(--gold-dark));  box-shadow: 0 3px 12px rgba(240,168,48,0.35); }
.lesson-header.purple { background: linear-gradient(135deg, var(--purple),var(--purple-dark));box-shadow: 0 3px 12px rgba(124,77,188,0.35); }
.back-btn {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.9) !important;
  border: 2px solid rgba(15,118,110,0.16) !important;
  border-radius: 16px;
  color: #0f766e !important;
  font-size: 22px;
  font-weight: 1000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 7px 0 rgba(15,118,110,0.16),
    0 10px 22px rgba(0,0,0,0.18),
    0 0 0 3px rgba(255,255,255,0.34);
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.back-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 3px 0 rgba(15,118,110,0.18),
    0 6px 16px rgba(0,0,0,0.16),
    0 0 0 3px rgba(255,255,255,0.36);
}

.lesson-header .back-btn,
.games-hub-header .back-btn,
.memory-header .back-btn {
  background: rgba(255,255,255,0.94) !important;
  border-color: rgba(255,255,255,0.72) !important;
  color: #0f766e !important;
  box-shadow:
    0 7px 0 rgba(0,0,0,0.22),
    0 12px 24px rgba(0,0,0,0.24),
    0 0 0 3px rgba(255,255,255,0.24);
}

.topic-header .back-btn,
#syllables-screen .back-btn,
#words-screen .back-btn {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(15,118,110,0.34) !important;
  color: #075f56 !important;
  box-shadow:
    0 7px 0 rgba(15,118,110,0.18),
    0 12px 24px rgba(0,0,0,0.16),
    0 0 0 3px rgba(15,118,110,0.10);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  perspective: 900px;
}
.legacy-home-lessons,
.legacy-home-grid {
  display: none !important;
}
.topic-card {
  min-height: 154px;
  border: none;
  border-radius: 28px;
  padding: 16px 14px;
  position: relative;
  overflow: hidden;
  text-align: left;
  color: #fff;
  font-family: var(--font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  isolation: isolate;
  transform: translateY(0);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  animation: topicCardRise 0.52s cubic-bezier(0.2,0.82,0.24,1) both;
  animation-delay: calc(var(--topic-i, 0) * 58ms);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.34),
    inset 0 -18px 34px rgba(0,0,0,0.10),
    0 12px 0 var(--topic-depth, rgba(0,0,0,0.18)),
    0 18px 28px rgba(0,0,0,0.20);
}
.topic-card:not(.book-topic-card)::before {
  content: var(--topic-decor, '');
  position: absolute;
  right: -12px;
  top: -16px;
  z-index: 0;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.55), transparent 30%),
    rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
  font-size: 46px;
  font-weight: 1000;
  transform: rotate(12deg);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.28),
    0 8px 0 rgba(0,0,0,0.09),
    0 18px 26px rgba(0,0,0,0.14);
}
.topic-card::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: auto -20% -30% -20%;
  height: 62%;
  background:
    linear-gradient(105deg, transparent 0 22%, rgba(255,255,255,0.20) 23% 58%, transparent 59%),
    rgba(255,255,255,0.13);
  transform: rotate(-7deg);
}
.topic-card:active,
.topic-card.topic-pressing {
  transform: translateY(7px) scale(0.99);
  filter: saturate(1.04);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.28),
    inset 0 -12px 24px rgba(0,0,0,0.12),
    0 5px 0 var(--topic-depth, rgba(0,0,0,0.20)),
    0 10px 18px rgba(0,0,0,0.16);
}
.topic-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  margin-bottom: 18px;
  background: rgba(255,255,255,0.22);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.28),
    0 6px 0 rgba(0,0,0,0.10),
    0 12px 18px rgba(0,0,0,0.14);
  font-size: 30px;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,0.16));
}
.topic-card b {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 78%;
  font-size: 22px;
  line-height: 0.98;
  font-weight: 1000;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.16), 0 5px 14px rgba(0,0,0,0.18);
}
.topic-card small {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 88%;
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.12;
  font-weight: 900;
  opacity: 0.92;
  text-shadow: 0 1px 0 rgba(0,0,0,0.10);
}
.topic-letters { background: linear-gradient(145deg, #0f766e, #14b8a6); }
.topic-numbers {
  --topic-decor: '1 2';
  --topic-depth: #1550a8;
  background:
    radial-gradient(circle at 16% 20%, rgba(255,255,255,0.30), transparent 22%),
    linear-gradient(145deg, #1d4ed8 0%, #2f80ed 52%, #38bdf8 100%);
}
.topic-plants {
  --topic-decor: '✿';
  --topic-depth: #257427;
  background:
    radial-gradient(circle at 78% 78%, rgba(255,240,160,0.35), transparent 28%),
    linear-gradient(145deg, #15803d 0%, #22a33a 52%, #84cc16 100%);
}
.topic-animals {
  --topic-decor: '🐾';
  --topic-depth: #b45309;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.28), transparent 24%),
    linear-gradient(145deg, #c2410c 0%, #f97316 56%, #f59e0b 100%);
}
.topic-shapes {
  --topic-decor: '△';
  --topic-depth: #8b1a6d;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,235,120,0.34), transparent 24%),
    linear-gradient(145deg, #be123c 0%, #ec4899 48%, #7c3aed 100%);
}
.topic-life {
  --topic-decor: '☀';
  --topic-depth: #9f1239;
  background:
    radial-gradient(circle at 80% 22%, rgba(255,214,130,0.34), transparent 26%),
    linear-gradient(145deg, #7c2d12 0%, #be185d 55%, #db2777 100%);
}
.topic-games {
  --topic-decor: '★';
  --topic-depth: #3b176f;
  grid-column: span 2;
  min-height: 128px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,214,96,0.42), transparent 25%),
    radial-gradient(circle at 78% 28%, rgba(96,239,255,0.30), transparent 24%),
    linear-gradient(145deg, #4c1d95 0%, #7c3aed 50%, #a855f7 100%);
}
.topic-games b { max-width: 72%; }
.topic-games small { max-width: 72%; }
.topic-games .topic-icon { position: absolute; right: 22px; top: 34px; margin: 0; width: 66px; height: 66px; font-size: 36px; transform: rotate(8deg); }
.topic-grid .topic-card:nth-child(1) { --topic-i: 0; }
.topic-grid .topic-card:nth-child(2) { --topic-i: 1; }
.topic-grid .topic-card:nth-child(3) { --topic-i: 2; }
.topic-grid .topic-card:nth-child(4) { --topic-i: 3; }
.topic-grid .topic-card:nth-child(5) { --topic-i: 4; }
.topic-grid .topic-card:nth-child(6) { --topic-i: 5; }
.topic-grid .topic-card:nth-child(7) { --topic-i: 6; }
@keyframes topicCardRise {
  0% { opacity: 0; transform: translateY(26px) scale(0.94) rotateX(8deg); }
  72% { opacity: 1; transform: translateY(-3px) scale(1.012) rotateX(0deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); }
}
.book-topic-card {
  background:
    linear-gradient(90deg, rgba(77,35,16,0.45) 0 18px, transparent 18px),
    linear-gradient(145deg, #0f766e 0%, #14b8a6 54%, #facc15 150%) !important;
  transform-style: preserve-3d;
}
.book-topic-card::before {
  content: '';
  position: absolute;
  inset: 8px 10px 8px 26px;
  border: 2px solid rgba(255,255,255,0.22);
  border-radius: 20px;
  pointer-events: none;
  z-index: 1;
}
.book-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(180deg, #6b2f12, #3d1b0c);
  box-shadow: inset -5px 0 0 rgba(255,255,255,0.08), 5px 0 12px rgba(0,0,0,0.16);
  z-index: 1;
}
.book-stitches {
  position: absolute;
  left: 8px;
  top: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.book-stitches i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,240,216,0.78);
  box-shadow: 0 2px 0 rgba(0,0,0,0.16);
}
.book-float {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 30px;
  padding: 0 7px;
  border-radius: 11px;
  background: rgba(255,255,255,0.3);
  color: #51321a;
  font-weight: 1000;
  box-shadow: 0 4px 0 rgba(0,0,0,0.12);
  transform: rotate(-9deg);
}
.book-float-a { right: 18px; top: 16px; background: #ffe066; }
.book-float-ba { right: 34px; bottom: 38px; background: #80deea; transform: rotate(10deg); }
.book-float-az { left: 44px; bottom: 16px; background: #ff9eba; transform: rotate(-14deg); }
.book-topic-card.book-pressed { transform: translateY(6px) scale(0.98); }

.book-open-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
  background: rgba(255,248,223,0);
  perspective: 900px;
  overflow: hidden;
  transition: background 0.26s ease, opacity 0.24s ease;
}
.book-open-overlay.open { background: rgba(255,248,223,0.62); }
.book-open-overlay.fade { opacity: 0; }
.book-stage {
  position: fixed;
  transform-style: preserve-3d;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(0.72);
  transition: transform 0.74s cubic-bezier(0.2,0.82,0.24,1);
}
.book-open-overlay.open .book-stage {
  transform: translate(-50%, -50%) scale(2.35);
}
.book-page {
  position: absolute;
  z-index: 1;
  top: 10px;
  bottom: 10px;
  width: 50%;
  background:
    linear-gradient(rgba(15,118,110,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,0.07) 1px, transparent 1px),
    linear-gradient(145deg, #fffaf0, #fff0d8);
  background-size: 20px 20px, 20px 20px, auto;
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px rgba(81,50,26,0.06), 0 10px 24px rgba(81,50,26,0.14);
  opacity: 1;
}
.book-page.left { left: 0; transform-origin: right center; }
.book-page.right { right: 0; transform-origin: left center; }
.book-open-overlay.open .book-page { opacity: 1; }
.book-cover {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(77,35,16,0.5) 0 28px, transparent 28px),
    linear-gradient(145deg, #0f766e, #14b8a6 56%, #facc15 155%);
  box-shadow: 0 14px 0 #0a514c, 0 22px 34px rgba(15,118,110,0.26);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.52s cubic-bezier(0.2,0.82,0.24,1) 0.12s, opacity 0.2s ease 0.5s;
}
.book-open-overlay.open .book-cover {
  transform: rotateY(-118deg);
  opacity: 0.18;
}
.book-cover-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(180deg, #6b2f12, #3d1b0c);
  border-radius: 28px 0 0 28px;
}
.book-cover-title {
  position: absolute;
  left: 48px;
  right: 18px;
  top: 34px;
  color: #fff;
  font-size: 26px;
  line-height: 0.92;
  font-weight: 1000;
  text-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
.book-cover-bits span {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 28px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.38);
  color: #51321a;
  font-weight: 1000;
}
.book-cover-bits span:nth-child(1) { right: 20px; top: 18px; background: #ffe066; transform: rotate(-8deg); }
.book-cover-bits span:nth-child(2) { right: 22px; bottom: 18px; background: #ff9eba; transform: rotate(12deg); }
.book-cover-bits span:nth-child(3) { left: 46px; bottom: 20px; background: #80deea; transform: rotate(-10deg); }
.book-cover-bits span:nth-child(4) { left: 92px; top: 18px; background: #a5d6a7; transform: rotate(9deg); }
.book-glow {
  position: absolute;
  inset: 16px 14px;
  z-index: 1;
  border-radius: 22px;
  background: radial-gradient(circle, rgba(255,255,255,0.92), rgba(255,224,102,0.42) 42%, transparent 70%);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.34s ease 0.28s, transform 0.44s ease 0.28s;
}
.book-open-overlay.open .book-glow {
  opacity: 1;
  transform: scale(1.2);
}
.book-inside-icons {
  position: absolute;
  inset: 20px 52% 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  opacity: 1;
  transform: none;
  z-index: 2;
}
.book-inside-icons-right {
  inset: 20px 16px 20px 52%;
}
.book-mini-card {
  position: relative;
  width: 44px;
  height: 40px;
  border-radius: 11px;
  overflow: hidden;
  display: grid;
  align-content: end;
  justify-items: start;
  padding: 5px 5px;
  font-family: var(--font);
  color: #fff;
  box-shadow: 0 4px 0 rgba(81,50,26,0.16), 0 8px 12px rgba(81,50,26,0.12);
  transform: rotate(-4deg);
}
.book-mini-card b {
  position: relative;
  z-index: 2;
  font-size: 8px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -0.2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.28);
}
.book-mini-elifba {
  background: linear-gradient(135deg, #e84040 0%, #a01818 100%);
}
.book-mini-hecalar {
  background: radial-gradient(circle at 18% 20%, rgba(255,255,255,0.35), transparent 28%), linear-gradient(145deg, #0f766e 0%, #22c55e 52%, #facc15 135%);
  transform: rotate(5deg);
}
.book-mini-words {
  background: linear-gradient(145deg, #f59e0b 0%, #fb7185 55%, #8b5cf6 130%);
  transform: rotate(-2deg);
}
.book-mini-letters,
.book-mini-heca-bg,
.book-mini-sozler-bg,
.book-mini-words-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.book-mini-letters span {
  position: absolute;
  font-weight: 1000;
  line-height: 1;
  opacity: 0.72;
}
.book-mini-letters span:nth-child(1) { left: 5px; top: 4px; color: #ffe066; transform: rotate(-14deg); font-size: 18px; }
.book-mini-letters span:nth-child(2) { right: 4px; bottom: 4px; color: #ff9eba; transform: rotate(13deg); font-size: 17px; opacity: 0.5; }
.book-mini-letters span:nth-child(3) { right: 7px; top: 5px; color: #80deea; transform: rotate(16deg); font-size: 13px; }
.book-mini-letters span:nth-child(4) { left: 8px; bottom: 6px; color: #a5d6a7; transform: rotate(-8deg); font-size: 11px; }
.book-mini-heca-bg::after {
  content: '';
  position: absolute;
  inset: auto -18% -38% -18%;
  height: 62%;
  background: rgba(255,255,255,0.16);
  transform: rotate(-8deg);
}
.book-mini-heca-bg span {
  position: absolute;
  min-width: 17px;
  height: 15px;
  padding: 0 3px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 1000;
  color: #5b3515;
  box-shadow: 0 2px 0 rgba(91,53,21,0.2), 0 3px 5px rgba(0,0,0,0.12);
}
.book-mini-heca-bg span:nth-child(1) { left: 4px; top: 5px; background: #ffe066; transform: rotate(-13deg); }
.book-mini-heca-bg span:nth-child(2) { right: 4px; top: 5px; background: #80deea; transform: rotate(13deg); }
.book-mini-heca-bg span:nth-child(3) { left: 7px; bottom: 7px; background: #ff9eba; transform: rotate(10deg); }
.book-mini-heca-bg span:nth-child(4) { right: 5px; bottom: 6px; background: #a5d6a7; transform: rotate(-15deg); }
.book-mini-words-bg span {
  position: absolute;
  min-width: 17px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 1000;
  color: #51321a;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 2px 0 rgba(81,50,26,0.12);
}
.book-mini-words-bg span:nth-child(1) { left: 5px; top: 5px; transform: rotate(-10deg); }
.book-mini-words-bg span:nth-child(2) { right: 4px; top: 9px; transform: rotate(12deg); }
.book-mini-words-bg span:nth-child(3) { left: 10px; bottom: 8px; transform: rotate(-4deg); }
.book-mini-sozler-bg {
  display: flex; align-items: center; justify-content: center; gap: 1px;
  font-family: var(--font); font-weight: 1000; font-size: 22px;
}
.book-open-overlay.open .book-mini-card {
  animation: bookMiniInPlace 0.34s cubic-bezier(0.34,1.56,0.64,1) both;
}
.book-open-overlay.open .book-mini-hecalar {
  animation-delay: 0.04s;
}
@keyframes bookMiniInPlace {
  0% { transform: scale(0.94) rotate(var(--icon-rot, 0deg)); }
  65% { transform: scale(1.08) rotate(var(--icon-rot, 0deg)); }
  100% { transform: scale(1) rotate(var(--icon-rot, 0deg)); }
}
.book-mini-elifba { --icon-rot: -4deg; }
.book-mini-hecalar { --icon-rot: 5deg; }
.book-mini-words { --icon-rot: -2deg; }

#topic-screen {
  background:
    radial-gradient(circle at 12% 10%, rgba(250,204,21,0.25), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(20,184,166,0.18), transparent 30%),
    linear-gradient(180deg, #e9fff4 0%, #fff8df 62%, #ffedc2 100%);
  color: #51321a;
}

.words-card {
  position: relative;
  overflow: hidden;
  min-height: 140px;
  padding: 0 !important;
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.36), transparent 30%),
    linear-gradient(145deg, #f59e0b 0%, #fb7185 52%, #8b5cf6 125%) !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: 0 14px 0 #9d4d0f, 0 18px 24px rgba(157,77,15,0.22);
}
.words-card::after {
  content: '';
  position: absolute;
  inset: auto -24% -36% -24%;
  height: 62%;
  background: rgba(255,255,255,0.16);
  transform: rotate(-8deg);
}
.words-card-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.words-card-bg span {
  position: absolute;
  min-width: 44px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #51321a;
  background: rgba(255,255,255,0.8);
  font-weight: 1000;
  box-shadow: 0 5px 0 rgba(81,50,26,0.16), 0 8px 14px rgba(0,0,0,0.14);
}
.words-card-bg span:nth-child(1) { left: 10px; top: 12px; transform: rotate(-10deg); }
.words-card-bg span:nth-child(2) { right: 18px; top: 16px; transform: rotate(12deg); }
.words-card-bg span:nth-child(3) { left: 34px; top: 54px; transform: rotate(7deg); }
.words-card-bg span:nth-child(4) { right: 12px; bottom: 34px; transform: rotate(-12deg); }
.words-card-bg span:nth-child(5) { left: 12px; bottom: 20px; transform: rotate(9deg); }
.words-card-content {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: 100%;
  padding: 16px 14px;
  text-align: left;
  text-shadow: 0 2px 7px rgba(0,0,0,0.24);
}
.words-card-title { font-size: 29px; font-weight: 1000; letter-spacing: -0.8px; }
.words-card-sub { margin-top: 4px; font-size: 13px; font-weight: 900; opacity: 0.92; }

.heca-oxu-card {
  position: relative;
  overflow: hidden;
  min-height: 140px;
  padding: 0 !important;
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.36), transparent 30%),
    linear-gradient(145deg, #34d399 0%, #06b6d4 52%, #6366f1 125%) !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: 0 14px 0 #047857, 0 18px 24px rgba(4,120,87,0.22);
}
.heca-oxu-card-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0.35;
}
.heca-oxu-card-bg span {
  font-family: 'Baloo 2', sans-serif;
  font-size: 38px;
  font-weight: 1000;
  display: inline-block;
}
.heca-oxu-card-bg span:nth-child(1) { transform: rotate(-12deg) translateY(-8px); }
.heca-oxu-card-bg span:nth-child(2) { transform: rotate(8deg) translateY(4px); }
.heca-oxu-card-bg span:nth-child(3) { transform: rotate(-6deg) translateY(-6px); }
.heca-oxu-card-bg span:nth-child(4) { transform: rotate(10deg) translateY(6px); }
.heca-oxu-card-content {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: 100%;
  padding: 16px 14px;
  text-align: left;
  text-shadow: 0 2px 7px rgba(0,0,0,0.24);
}
.heca-oxu-card-title { font-size: 26px; font-weight: 1000; letter-spacing: -0.8px; }
.heca-oxu-card-sub { margin-top: 4px; font-size: 13px; font-weight: 900; opacity: 0.92; }

#words-screen {
  background:
    linear-gradient(rgba(15,118,110,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,0.07) 1px, transparent 1px),
    linear-gradient(145deg, #fffaf0 0%, #fff0d8 100%);
  background-size: 20px 20px, 20px 20px, auto;
  color: #51321a;
}
.words-section-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 16px 24px;
}
.sentence-levels {
  max-width: 430px;
  margin: 0 auto 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.sentence-stage {
  max-width: 430px;
  margin: 0 auto 14px;
  padding: 14px 14px 16px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.86), rgba(255,247,221,0.72)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(15,118,110,0.08) 24px 25px);
  box-shadow:
    0 10px 0 rgba(81,50,26,0.08),
    0 18px 30px rgba(81,50,26,0.12);
  text-align: center;
}
.sentence-progress {
  width: fit-content;
  margin: 0 auto 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #0f766e;
  color: white;
  font-size: 15px;
  font-weight: 1000;
  box-shadow: 0 5px 0 rgba(15,118,110,0.22);
}
.sentence-picture {
  width: 220px;
  height: 220px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: linear-gradient(145deg, #fff, #fff2c9);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.75),
    0 8px 0 rgba(81,50,26,0.12),
    0 14px 22px rgba(81,50,26,0.12);
  font-size: 48px;
}
.sentence-task {
  color: rgba(81,50,26,0.78);
  font-size: 15px;
  font-weight: 1000;
}
.sentence-line {
  min-height: 64px;
  margin: 12px auto 4px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.sentence-slot {
  min-width: 70px;
  height: 54px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  border: 3px dashed rgba(15,118,110,0.30);
  border-radius: 18px;
  background: rgba(255,255,255,0.46);
  color: rgba(81,50,26,0.42);
  font-size: 21px;
  font-weight: 1000;
}
.sentence-slot.filled {
  border-style: solid;
  border-color: rgba(15,118,110,0.28);
  background: linear-gradient(145deg, #d9f99d, #bbf7d0);
  color: #365314;
  animation: sentencePop 0.2s ease;
}
.sentence-feedback {
  min-height: 28px;
  color: #c2410c;
  font-size: 16px;
  font-weight: 1000;
}
.sentence-feedback.done {
  color: #0f766e;
  font-size: 20px;
}
.sentence-bank {
  max-width: 430px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sentence-word-btn {
  min-height: 62px;
  border: none;
  border-radius: 20px;
  padding: 10px 12px;
  background: linear-gradient(145deg, #ffd166, #f59e0b);
  color: #51321a;
  font-family: var(--font);
  font-size: 22px;
  font-weight: 1000;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.36),
    0 7px 0 rgba(81,50,26,0.20),
    0 12px 18px rgba(81,50,26,0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
}
.sentence-word-btn:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.28),
    0 3px 0 rgba(81,50,26,0.20),
    0 7px 14px rgba(81,50,26,0.12);
}
.sentence-word-btn.used {
  opacity: 0.28;
  pointer-events: none;
  transform: scale(0.94);
}
.sentence-word-btn.wrong { animation: shake 0.32s ease; background: linear-gradient(145deg, #fecaca, #fb7185); }
.sentence-next-btn {
  width: min(430px, calc(100% - 0px));
  min-height: 58px;
  margin: 14px auto 0;
  display: block;
  border: none;
  border-radius: 20px;
  background: linear-gradient(145deg, #0f766e, #14b8a6);
  color: white;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 1000;
  box-shadow: 0 7px 0 rgba(15,118,110,0.30), 0 12px 18px rgba(15,118,110,0.18);
}
.sentence-next-btn:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 rgba(15,118,110,0.30), 0 8px 14px rgba(15,118,110,0.16);
}
@keyframes sentencePop {
  0% { transform: scale(0.82) rotate(-2deg); }
  75% { transform: scale(1.06) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.words-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}
.words-transition-stack {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.8);
}
.words-transition-stack span {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 72px;
  height: 44px;
  padding: 0 13px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #51321a;
  background: #fffaf0;
  font-size: 21px;
  font-weight: 1000;
  box-shadow: 0 8px 0 rgba(81,50,26,0.14), 0 14px 24px rgba(81,50,26,0.2);
  opacity: 0;
}
.words-transition.show .words-transition-stack span {
  animation: wordsFly 0.62s cubic-bezier(0.2,0.82,0.24,1) forwards;
}
.words-transition-stack span:nth-child(1) { --tx: -120px; --ty: -170px; --rot: -16deg; animation-delay: 0s; }
.words-transition-stack span:nth-child(2) { --tx: 110px; --ty: -150px; --rot: 14deg; animation-delay: 0.04s; }
.words-transition-stack span:nth-child(3) { --tx: -88px; --ty: 150px; --rot: 10deg; animation-delay: 0.08s; }
.words-transition-stack span:nth-child(4) { --tx: 122px; --ty: 130px; --rot: -10deg; animation-delay: 0.12s; }
@keyframes wordsFly {
  0% { opacity: 0; transform: translate(0,0) scale(0.55) rotate(0deg); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.25) rotate(var(--rot)); }
}

.topic-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top));
}
.topic-title {
  flex: 1;
  text-align: center;
  color: #0f766e;
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: -0.6px;
}
.topic-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 24px;
}
.topic-subtitle {
  max-width: 420px;
  margin: 2px auto 14px;
  text-align: center;
  color: rgba(81,50,26,0.72);
  font-size: 15px;
  font-weight: 900;
}
.topic-subgrid {
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.letters-topic-decor { display: none; }
.topic-screen-letters_words {
  background:
    linear-gradient(rgba(15,118,110,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,0.07) 1px, transparent 1px),
    linear-gradient(145deg, #fffaf0 0%, #fff0d8 100%) !important;
  background-size: 20px 20px, 20px 20px, auto;
}
.topic-screen-letters_words .topic-header {
  position: relative;
}
.topic-screen-letters_words .topic-title::before {
  content: '\1F4DA';
  margin-right: 7px;
}
.topic-screen-letters_words .topic-subtitle {
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.42);
  box-shadow: 0 5px 0 rgba(81,50,26,0.07);
}
.topic-screen-letters_words .topic-subgrid {
  position: relative;
  grid-template-columns: 1fr;
  max-width: 360px;
  gap: 34px;
  padding-top: 8px;
}
.topic-screen-letters_words .topic-subgrid::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 110px;
  bottom: 110px;
  width: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,224,102,0.95), rgba(20,184,166,0.75));
  transform: translateX(-50%);
  opacity: 0.45;
  box-shadow: 0 0 0 5px rgba(255,255,255,0.25);
}
.topic-screen-letters_words .topic-subgrid::after {
  content: '\2726  \2726  \2726';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  color: #0f766e;
  font-weight: 1000;
  letter-spacing: 4px;
  box-shadow: 0 4px 0 rgba(15,118,110,0.1);
  pointer-events: none;
  z-index: 2;
}
.topic-screen-letters_words .letters-topic-decor {
  display: block;
  position: absolute;
  inset: -40px -34px 0;
  pointer-events: none;
  z-index: 0;
}
.topic-screen-letters_words .letters-topic-decor span {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 1000;
  color: #51321a;
  background: rgba(255,255,255,0.38);
  box-shadow: 0 4px 0 rgba(81,50,26,0.08);
  animation: lettersTopicFloat 3.6s ease-in-out infinite;
}
.topic-screen-letters_words .letters-topic-decor span:nth-child(1) { left: -12px; top: 28px; color: #e8634a; animation-delay: -0.2s; }
.topic-screen-letters_words .letters-topic-decor span:nth-child(2) { right: -10px; top: 72px; color: #0f766e; animation-delay: -1s; }
.topic-screen-letters_words .letters-topic-decor span:nth-child(3) { left: -22px; bottom: 86px; color: #7c3aed; animation-delay: -1.7s; }
.topic-screen-letters_words .letters-topic-decor span:nth-child(4) { right: -20px; bottom: 116px; color: #2563eb; animation-delay: -2.1s; }
.topic-screen-letters_words .letters-topic-decor span:nth-child(5) { left: 38px; top: 148px; background: rgba(255,224,102,0.45); animation-delay: -0.6s; }
.topic-screen-letters_words .letters-topic-decor span:nth-child(6) { right: 42px; top: 190px; background: rgba(128,222,234,0.45); animation-delay: -1.3s; }
.topic-screen-letters_words .letters-topic-decor span:nth-child(7) { left: 24px; bottom: 12px; background: rgba(255,158,186,0.4); animation-delay: -2.4s; }
.topic-screen-letters_words .letters-topic-decor span:nth-child(8) { right: 16px; bottom: 20px; background: rgba(165,214,167,0.45); animation-delay: -0.9s; }
.topic-screen-letters_words .topic-mission-card {
  width: min(100%, 250px);
  justify-self: center;
  z-index: 1;
}
.topic-screen-letters_words .topic-mission-card::before {
  content: var(--step);
  display: grid !important;
  place-items: center;
  position: absolute;
  left: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: rgba(255,255,255,0.9);
  color: #0f766e;
  font-size: 20px;
  font-weight: 1000;
  box-shadow: 0 4px 0 rgba(81,50,26,0.14);
  z-index: 3;
}
@keyframes lettersTopicFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}
/* Heyvanlar aləmi — stack the two cards vertically and make them bigger,
   since there are only two options and a 2-col grid looks empty/cramped. */
.topic-screen-animals_world .topic-subgrid {
  grid-template-columns: 1fr;
  max-width: 420px;
  gap: 20px;
}
.topic-screen-animals_world .topic-mission-card {
  min-height: 200px !important;
}
.topic-screen-animals_world .safari-card-title,
.topic-screen-animals_world .farm-card-title {
  font-size: 26px !important;
}
/* Həyat bilgisi — same treatment: stack Peşələr/Nəqliyyat vertically and enlarge them. */
.topic-screen-life_world .topic-subgrid {
  grid-template-columns: 1fr;
  max-width: 420px;
  gap: 20px;
}
.topic-screen-life_world .topic-mission-card {
  min-height: 200px !important;
}
.topic-screen-life_world .peseler-mission-title {
  font-size: 26px !important;
}
.topic-screen-life_world .naq-title {
  font-size: 26px !important;
}
.topic-mission-card {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.12s;
}
.topic-mission-card.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.topic-mission-card,
.topic-mission-card.show {
  border-radius: 26px !important;
  border-width: 0 !important;
  min-height: 154px;
  box-shadow:
    0 13px 0 rgba(20,60,46,0.34),
    0 18px 24px rgba(20,60,46,0.22),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.topic-mission-card::before {
  display: none !important;
}
.topic-mission-card::after {
  content: '';
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: -34%;
  height: 64%;
  background: rgba(255,255,255,0.14);
  transform: rotate(-8deg);
  pointer-events: none;
}
.topic-mission-card:active {
  transform: translateY(8px) scale(0.98) !important;
  box-shadow:
    0 5px 0 rgba(20,60,46,0.36),
    0 10px 16px rgba(20,60,46,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.topic-mission-card.peseler,
.topic-mission-card.naqliyyat,
.topic-mission-card.geyim,
.topic-mission-card.peseler { background: linear-gradient(145deg, #8b5cf6 0%, #db2777 100%) !important; }
.topic-mission-card.naqliyyat { background: linear-gradient(145deg, #0284c7 0%, #22c55e 115%) !important; }
.topic-mission-card.geyim { background: linear-gradient(145deg, #f97316 0%, #ec4899 105%) !important; }
.topic-mission-card.peseler .mission-name,
.topic-mission-card.naqliyyat .mission-name,
.topic-mission-card.geyim .mission-name,
.topic-mission-card.peseler .mission-progress,
.topic-mission-card.naqliyyat .mission-progress,
.topic-mission-card.geyim .mission-progress,
.topic-mission-card.peseler .mission-pts,
.topic-mission-card.naqliyyat .mission-pts,
.topic-mission-card.geyim .mission-pts {
  display: none;
}
@media (max-width: 420px) {
  .topic-grid { gap: 10px; }
  .topic-card { min-height: 138px; padding: 14px 12px; border-radius: 24px; }
  .topic-icon { font-size: 34px; margin-bottom: 11px; }
  .topic-card b { font-size: 19px; }
  .topic-card small { font-size: 11px; }
  .topic-title { font-size: 20px; }
}
.lesson-title { font-size: 22px; font-weight: 800; color: white; flex: 1; }
.lesson-stars-box { font-size: 18px; font-weight: 700; color: white; display: flex; align-items: center; gap: 4px; }

/* TABS */
.lesson-tabs { display: flex; margin: 14px 14px 0; background: var(--cream2); border-radius: 14px; padding: 4px; gap: 4px; flex-shrink: 0; z-index: 100; }
.lesson-tab { flex: 1; padding: 10px; text-align: center; font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--brown-light); border: none; background: none; border-radius: 10px; cursor: pointer; transition: all 0.15s; }
.lesson-tab.active { background: white; color: var(--brown); box-shadow: var(--shadow-sm); }

/* SPOTLIGHT */
.spotlight { margin: 14px 14px 0; background: transparent; border-radius: var(--radius); padding: 0; display: flex; align-items: center; gap: 16px; border: none; box-shadow: none; }
.sp-box { width: 88px; height: 88px; border-radius: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 32px; font-weight: 800; letter-spacing: 3px; }
.sp-info { flex: 1; min-width: 0; }
.sp-emoji { font-size: 42px; line-height: 1; display: block; margin-bottom: 6px; }
.sp-word { font-size: 24px; font-weight: 800; color: var(--brown); margin-bottom: 8px; }
.sp-hi { border-bottom: 3px solid; padding-bottom: 2px; }
.sp-play { background: var(--cream2); border: none; border-radius: 12px; padding: 9px 16px; font-family: var(--font); font-weight: 700; font-size: 14px; color: var(--brown); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.sp-play:active { background: var(--sand); }

/* SPOTLIGHT — letters style */
.lesson-screen-letters .spotlight { display: none; }
.lesson-screen-letters .lesson-tabs { background: transparent; gap: 10px; margin: 10px 14px 0; }
.lesson-screen-letters .lesson-tab { display:flex; align-items:center; justify-content:center; min-height:50px; background: rgba(255,255,255,0.15); color: white; font-size: 16px; padding: 10px 10px; border-radius: 15px; backdrop-filter: blur(8px); border: 2px solid rgba(255,255,255,0.2); }
.lesson-screen-letters .lesson-tab.active { background: rgba(255,255,255,0.32); color: white; border-color: rgba(255,255,255,0.55); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.lesson-screen-letters .sp-box { display: none; }
.lesson-screen-letters .sp-info { display: flex; flex-direction: column; align-items: center; width: 100%; }
.lesson-screen-letters .sp-emoji { font-size: 0; margin: 0; position: relative; }
.lesson-screen-letters .sp-emoji img { width: 160px; height: 160px; object-fit: contain; border-radius: 24px; }
.lesson-screen-letters #sp-letter-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.45); color: white; font-size: 18px; font-weight: 800; padding: 2px 10px; border-radius: 10px; }
.lesson-screen-letters .sp-word { font-size: 28px; font-weight: 800; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.5); text-align: center; margin: 8px 0; }
.lesson-screen-letters .sp-hi { color: #FFD93D; border-color: #FFD93D; }
.lesson-screen-letters .sp-play { background: rgba(255,255,255,0.2); color: white; backdrop-filter: blur(8px); border: 2px solid rgba(255,255,255,0.4); }

/* SPOTLIGHT — peseler/naqliyyat: hide entirely, the grid below already shows full images */
.lesson-screen-peseler .spotlight,
.lesson-screen-naqliyyat .spotlight { display: none; }

/* GRID */
.grid-label { display: none; }
.items-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 14px; }
.bg-letters.items-grid { gap: 28px; padding: 4px 20px 28px; }

/* ═══ Per-lesson grid backgrounds ═══ */
.lesson-bg {
  border-radius: 20px;
  margin: 0 14px;
  padding: 16px 12px;
  position: relative;
}
.lesson-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  z-index: 0;
}
.lesson-bg .item-card {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.93);
}
.bg-letters.lesson-bg .item-card { background: transparent !important; box-shadow: none !important; border: none !important; }
.bg-letters.lesson-bg .item-card.h-card { border-top: none !important; border-left: none !important; border-right: none !important; }

/* Gradients */
.bg-letters  { background: transparent; }
.bg-numbers  { background: transparent; }
.lesson-screen-numbers { background: radial-gradient(ellipse at 60% 20%, #1A2A6C 0%, #0D1B4B 40%, #060C2A 100%) !important; }
#physics-overlay {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 445px; /* ровно 10 шариков × 42px + 25px донышко */
  z-index: 999;
  pointer-events: none;
  border-radius: 0 10px 0 0;
  /* стеклянная труба */
  background:
    linear-gradient(90deg,
      rgba(10,30,90,0.92)  0%,
      rgba(30,70,180,0.55) 18%,
      rgba(80,140,255,0.18) 50%,
      rgba(30,70,180,0.55) 82%,
      rgba(10,30,90,0.92)  100%
    );
  border: 1.5px solid rgba(90,150,255,0.45);
  box-shadow:
    inset  3px 0 8px rgba(60,120,255,0.18),
    inset -3px 0 8px rgba(60,120,255,0.18),
    inset  0  4px 12px rgba(120,180,255,0.12),
    0 0 18px rgba(40,80,220,0.35);
  overflow: hidden;
}
/* вертикальный блик-полоска слева — эффект стекла */
#physics-overlay::before {
  content: '';
  position: absolute;
  left: 4px; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg,
    rgba(180,220,255,0.35) 0%,
    rgba(180,220,255,0.10) 60%,
    transparent 100%);
  border-radius: 2px;
  pointer-events: none;
}
#physics-overlay canvas {
  position: absolute; inset: 0;
  pointer-events: none;
}
/* On a phone held sideways the 445px tube would reach over the lesson header: shrink it as a whole
   (the balls are laid out in tube pixels, so its size itself must not change). */
@media (max-height: 600px) { #physics-overlay { transform: scale(0.7); transform-origin: left bottom; } }
@media (max-height: 420px) { #physics-overlay { transform: scale(0.6); } }
.lesson-screen-numbers .sp-box,
.lesson-screen-numbers .sp-word,
.lesson-screen-numbers .sp-hi,
.lesson-screen-numbers .sp-emoji,
.lesson-screen-numbers .grid-label { display: none; }
.lesson-screen-numbers #spotlight { justify-content: center; padding: 20px 0 10px; }
.lesson-screen-numbers .sp-info { display: flex; justify-content: center; align-items: center; }
.lesson-screen-numbers .sp-play { margin: 0 auto; }
.lesson-screen-numbers .quiz-side-controls { display: none; }

/* ═══ FIQURLAR — Neon Cosmos ═══ */
.lesson-screen-fiqurlar {
  background: radial-gradient(ellipse at 40% 20%, #1A1040 0%, #0D0D2B 50%, #06060F 100%) !important;
}
.lesson-screen-fiqurlar .spotlight { display: none; }
.lesson-screen-fiqurlar .lesson-tabs { background: transparent; gap: 10px; margin: 14px 14px 0; }
.lesson-screen-fiqurlar .lesson-tab { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); font-size: 18px; padding: 16px 10px; border-radius: 16px; border: 2px solid rgba(255,255,255,0.12); }
.lesson-screen-fiqurlar .lesson-tab.active { background: rgba(255,255,255,0.14); border-color: rgba(180,130,255,0.5); color: white; box-shadow: 0 0 12px rgba(150,80,255,0.3); }
.lesson-screen-fiqurlar #panel-quiz {
  background: radial-gradient(ellipse at 40% 20%, #1A1040 0%, #0D0D2B 50%, #06060F 100%);
}
.lesson-screen-fiqurlar .quiz-card { background: transparent; box-shadow: none; padding: 6px 16px 4px; }
.lesson-screen-fiqurlar .quiz-question-label { color: rgba(200,170,255,0.9); }
.lesson-screen-fiqurlar .quiz-counter { color: rgba(180,140,255,0.7); }
.lesson-screen-fiqurlar #q-progress-fill { background: linear-gradient(90deg, #9C27B0, #E040FB); }
.lesson-screen-fiqurlar .quiz-next-btn { background: linear-gradient(135deg,#6A1FA0,#9C27B0); border-color: #AB47BC; color: white; }
.lesson-screen-fiqurlar .quiz-opt {
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(180,130,255,0.25);
  color: white;
  border-radius: 14px;
  box-shadow: 0 0 10px rgba(150,80,255,0.15);
}
.lesson-screen-fiqurlar .quiz-opt:active:not(.correct):not(.wrong) { transform: translateY(3px); }
.lesson-screen-fiqurlar .quiz-opt.correct { background: rgba(105,255,71,0.15); border-color: #69FF47; box-shadow: 0 0 16px rgba(105,255,71,0.4); color: #69FF47; }
.lesson-screen-fiqurlar .quiz-opt.wrong   { background: rgba(255,64,129,0.15); border-color: #FF4081; color: rgba(255,255,255,0.5); }
.bg-fiqurlar { background: transparent; }
.neon-item-card {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 10px 14px;
  cursor: pointer;
  transition: transform 0.15s;
}
.neon-item-card:active { transform: scale(0.91); }
.neon-shape-wrap { display: flex; align-items: center; justify-content: center; }
.neon-zoom-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0); pointer-events: all;
  transition: background 0.3s ease;
}

/* ═══ FRUITS SECTION — juicy & colorful ═══ */
.lesson-screen-fruits .spotlight { display: none; }
.lesson-screen-fruits .lesson-tabs { background: transparent; gap: 10px; margin: 14px 14px 0; }
.lesson-screen-fruits .lesson-tab { background: rgba(255,255,255,0.30); color: #1a4080; font-size: 18px; padding: 16px 10px; border-radius: 16px; border: 2px solid rgba(255,255,255,0.45); }
.lesson-screen-fruits .lesson-tab.active { background: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.80); color: #0a2860; box-shadow: 0 2px 10px rgba(0,80,200,0.15); }

.fruits-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; padding: 16px 16px 48px !important; }

.fruit-card {
  border-radius: 20px !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 12px 6px 10px !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
.fruit-card::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 100%);
  border-radius: 0 0 50% 50%;
  pointer-events: none;
}
.fruit-card:active { transform: scale(0.91); box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; }
.fruit-card-in { animation: fruit-card-in 0.42s cubic-bezier(0.22,1.2,0.5,1) both; }
@keyframes fruit-card-in {
  from { opacity: 0; transform: scale(0.70) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}

/* Per-fruit colors set from JS via data-id */
.fruit-card[data-id="alma"]     { background: linear-gradient(145deg, #ff6b6b, #c0392b) !important; }
.fruit-card[data-id="armud"]    { background: linear-gradient(145deg, #c8e642, #7db52e) !important; }
.fruit-card[data-id="banan"]    { background: linear-gradient(145deg, #ffe44a, #f0b800) !important; }
.fruit-card[data-id="gilas"]    { background: linear-gradient(145deg, #e84393, #9b1060) !important; }
.fruit-card[data-id="uzum"]     { background: linear-gradient(145deg, #a855f7, #6d28d9) !important; }
.fruit-card[data-id="limon"]    { background: linear-gradient(145deg, #fff176, #fdd835) !important; }
.fruit-card[data-id="portaqal"] { background: linear-gradient(145deg, #ffa040, #e06500) !important; }
.fruit-card[data-id="qarpiz"]   { background: linear-gradient(145deg, #6ee86e, #1e8c1e) !important; }
.fruit-card[data-id="kiwi"]     { background: linear-gradient(145deg, #a8d840, #5a8a10) !important; }
.fruit-card[data-id="ananas"]   { background: linear-gradient(145deg, #ffe066, #d4a000) !important; }
.fruit-card[data-id="nar"]      { background: linear-gradient(145deg, #ff6e7f, #c0132a) !important; }
.fruit-card[data-id="chiyalek"] { background: linear-gradient(145deg, #ff8fa3, #d41245) !important; }

/* Per-vegetable colors */
.fruit-card[data-id="pomidor"]  { background: linear-gradient(145deg, #ff7055, #c0241a) !important; }
.fruit-card[data-id="xiyar"]    { background: linear-gradient(145deg, #6ed86e, #1e7a28) !important; }
.fruit-card[data-id="kelem"]    { background: linear-gradient(145deg, #88e060, #3a8a18) !important; }
.fruit-card[data-id="kartof"]   { background: linear-gradient(145deg, #e8d080, #b08820) !important; }
.fruit-card[data-id="sogan"]    { background: linear-gradient(145deg, #d4a0e0, #8030a0) !important; }
.fruit-card[data-id="sarimsaq"] { background: linear-gradient(145deg, #f0e8c0, #b09840) !important; }
.fruit-card[data-id="biber"]    { background: linear-gradient(145deg, #70d870, #186030) !important; }
.fruit-card[data-id="yerkoku"]  { background: linear-gradient(145deg, #ffaa44, #d05800) !important; }
.fruit-card[data-id="badimcan"] { background: linear-gradient(145deg, #9060d0, #501890) !important; }
.fruit-card[data-id="ispanaq"]  { background: linear-gradient(145deg, #58c858, #1a6020) !important; }

.fruit-img {
  width: 110px; height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.22));
}
.fruit-name {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,0.28);
  border-radius: 8px;
  padding: 2px 10px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.50);
  letter-spacing: 0.3px;
}

/* Fruits quiz */
.lesson-screen-fruits #panel-quiz {
  background: radial-gradient(ellipse at 30% 20%, rgba(180,220,255,0.30) 0%, transparent 55%),
              radial-gradient(ellipse at 80% 80%, rgba(100,180,255,0.20) 0%, transparent 50%),
              #b8d8f8;
}
.lesson-screen-fruits .quiz-card { background: transparent; box-shadow: none; padding: 6px 16px 4px; position: relative; }
.lesson-screen-fruits .quiz-question-label { color: #1a3a70; }
.lesson-screen-fruits .quiz-counter { color: #2a5aaa; }
.lesson-screen-fruits .quiz-next-btn { background: #2a7aee; border-color: #1a5abf; color: white; }
.lesson-screen-fruits .quiz-opt {
  background: linear-gradient(160deg, #ffffff 0%, #e8f4ff 100%);
  border: 2px solid rgba(100,160,255,0.40);
  border-radius: 18px;
  color: #1a3a70;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 6px 0 rgba(80,130,220,0.35), 0 8px 16px rgba(0,60,180,0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lesson-screen-fruits .quiz-opt:active:not(.correct):not(.wrong) { transform: translateY(5px); box-shadow: 0 1px 0 rgba(80,130,220,0.35); }
.lesson-screen-fruits .quiz-opt.correct { transition: none; transform: none; }
.lesson-screen-fruits .quiz-opt.wrong { transition: none; transform: none; }
.lesson-screen-fruits #quiz-audio-btn { display: flex; }

/* ═══ ANIMALS SECTION — sunny savanna ═══ */
.lesson-screen-animals .spotlight { display: none; }
.lesson-screen-animals .lesson-tabs { background: transparent; gap: 10px; margin: 14px 14px 0; }
.lesson-screen-animals .lesson-tab { background: rgba(210,125,86,0.15); color: #7a4020; font-size: 18px; padding: 16px 10px; border-radius: 16px; border: 2px solid rgba(210,125,86,0.25); }
.lesson-screen-animals .lesson-tab.active { background: rgba(210,125,86,0.30); border-color: #D27D56; color: #5a2a10; box-shadow: 0 2px 8px rgba(210,125,86,0.20); }

.animals-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; padding: 14px 14px 48px !important; }

.animal-card {
  background: #fff !important;
  border: 2.5px solid #D27D56 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 0 #b85e38, 0 6px 16px rgba(180,90,40,0.18) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 10px 6px 8px !important;
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.14s cubic-bezier(0.34,1.56,0.64,1);
}
.animal-card.animal-card-in {
  animation: animal-card-in 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.animal-card:active { transform: scale(0.90) !important; }

.animal-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 10px;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}
.animal-name {
  font-size: 14px;
  font-weight: 800;
  color: #7a4020;
  text-align: center;
  margin-top: 5px;
  font-family: 'Baloo 2', sans-serif;
  line-height: 1.1;
}
@keyframes animal-card-in {
  0%   { transform: scale(0.4) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.10) rotate(2deg); opacity: 1; }
  80%  { transform: scale(0.95) rotate(-1deg); opacity: 1; }
  100% { transform: scale(1)    rotate(0deg); opacity: 1; }
}

/* Animal zoom overlay (backdrop) */
.animal-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(80, 30, 10, 0.72);
  backdrop-filter: blur(5px);
  z-index: 9999;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.animal-zoom-overlay.animal-zoom-show { opacity: 1; }
.animal-zoom-overlay.animal-zoom-hide { opacity: 0; }

/* Animals quiz image */
.aq-quiz-img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  border-radius: 20px;
}
.aq-silhouette {
  filter: brightness(0) drop-shadow(0 6px 20px rgba(0,0,0,0.30));
  transition: filter 0.7s ease;
}
.aq-silhouette.aq-reveal {
  filter: brightness(1) drop-shadow(0 6px 24px rgba(180,90,40,0.35));
}
@keyframes aq-burst {
  0%   { transform: scale(1); }
  45%  { transform: scale(2.8); }
  70%  { transform: scale(2.6); }
  88%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.aq-silhouette.aq-burst {
  animation: aq-burst 1.5s ease-in-out forwards;
  z-index: 100;
  position: relative;
}

.lesson-screen-animals #panel-quiz {
  background: radial-gradient(ellipse at 30% 20%, rgba(255,220,160,0.35) 0%, transparent 55%),
              radial-gradient(ellipse at 75% 80%, rgba(136,158,115,0.20) 0%, transparent 50%),
              #F2E8D5;
}
.lesson-screen-animals .quiz-card { background: transparent; box-shadow: none; padding: 6px 16px 4px; position: relative; }
.lesson-screen-animals .quiz-question-label { color: #7a4020; margin-bottom: 4px; }
.lesson-screen-animals .quiz-target { margin-bottom: 4px; }
.lesson-screen-animals .quiz-counter { color: #a06040; }
.lesson-screen-animals .quiz-opt {
  background: linear-gradient(160deg, #2d5a1b 0%, #1e3d10 40%, #162d0c 100%);
  border: 2.5px solid #4a8a28;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(120,220,60,0.25),
    inset 0 -3px 0 rgba(0,0,0,0.35),
    0 6px 0 #0e2008,
    0 8px 18px rgba(0,0,0,0.45);
  color: #d4f0a0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7), 0 0 12px rgba(80,200,30,0.3);
  font-size: 18px;
  font-weight: 800;
  padding: 15px 8px;
  position: relative;
  overflow: hidden;
  transition: transform 0.08s, box-shadow 0.08s;
  letter-spacing: 0.3px;
}
.lesson-screen-animals .quiz-opt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(120,220,60,0.15) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 14px;
}
.lesson-screen-animals .quiz-opt:active:not(.correct):not(.wrong) {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(120,220,60,0.20),
    0 2px 0 #0e2008,
    0 4px 8px rgba(0,0,0,0.35);
}
.lesson-screen-animals .quiz-opt.correct {
  background: linear-gradient(160deg, #3a8a1a 0%, #256010 40%, #1a4808 100%);
  border-color: #78d040;
  box-shadow:
    inset 0 1px 0 rgba(180,255,80,0.30),
    0 6px 0 #0a1e04,
    0 8px 18px rgba(0,0,0,0.40),
    0 0 20px rgba(100,220,40,0.4);
  color: #e8ffb0;
  transform: none;
  transition: none;
}
.lesson-screen-animals .quiz-opt.wrong {
  background: linear-gradient(160deg, #5a1a10 0%, #3d100a 40%, #2d0808 100%);
  border-color: #c04030;
  box-shadow:
    inset 0 1px 0 rgba(255,100,60,0.20),
    0 6px 0 #1a0404,
    0 8px 18px rgba(0,0,0,0.40);
  color: #ffd0c0;
  transform: none;
  transition: none;
}
.lesson-screen-animals .quiz-next-btn { background: #D27D56; border-color: #b85e38; color: white; }
.lesson-screen-animals #quiz-audio-btn { display: flex; }

/* ═══ COLORS SECTION — painter's canvas ═══ */
.lesson-screen-colors .spotlight { display: none; }
.lesson-screen-colors .lesson-tabs { background: transparent; gap: 10px; margin: 14px 14px 0; }
.lesson-screen-colors .lesson-tab { background: rgba(0,0,0,0.07); color: #5a3a1a; font-size: 18px; padding: 16px 10px; border-radius: 16px; border: 2px solid rgba(0,0,0,0.1); }
.lesson-screen-colors .lesson-tab.active { background: rgba(0,0,0,0.14); border-color: rgba(0,0,0,0.22); color: #3a1a08; box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.bg-colors.items-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 12px 24px; }
.bg-colors.items-grid .color-blob { width: 72px; height: 72px; }
.bg-colors.items-grid .color-blob-card { padding: 8px 4px !important; gap: 6px !important; }
.bg-colors.items-grid .color-blob-name { font-size: 14px; }

/* ── Colors quiz ── */
.lesson-screen-colors .quiz-card { background: transparent !important; box-shadow: none !important; padding: 8px 14px 20px; position: relative; }
.lesson-screen-colors #panel-quiz {
  background: radial-gradient(ellipse at 20% 20%, rgba(255,200,100,0.18) 0%, transparent 55%),
              radial-gradient(ellipse at 80% 75%, rgba(150,200,255,0.14) 0%, transparent 50%),
              #D8D0C4;
}
.cq-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.cq-title { font-size: 34px; font-weight: 900; text-align: center; margin: 8px 0 14px; letter-spacing: 1px; display: inline-block; transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1); user-select: none; }
.cq-title:active { transform: scale(0.88); }
.cq-blobs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 8px; width: 100%; box-sizing: border-box; }
.cq-blob-opt { background: none; border: none; padding: 4px; cursor: pointer; display: flex; justify-content: center; position: relative; overflow: visible; border-radius: 0; }
.cq-blob-opt .color-blob { width: 88px; height: 88px; }
.cq-blob-opt:disabled { cursor: default; opacity: 0.7; }
.lesson-bg.bg-colors .item-card { background: transparent !important; box-shadow: none !important; border: none !important; }

/* Paint blob card */
.color-blob-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 8px !important;
  cursor: pointer;
  position: relative;
  overflow: visible !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.color-blob-card:active .color-blob { transform: scale(0.84) !important; }

/* The blob itself */
.color-blob {
  width: 128px;
  height: 128px;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 8px 28px rgba(0,0,0,0.22), inset 0 -8px 16px rgba(0,0,0,0.18);
  overflow: hidden;
  flex-shrink: 0;
}
.color-blob::after {
  content: '';
  position: absolute;
  top: 13%;
  left: 17%;
  width: 36%;
  height: 28%;
  background: rgba(255,255,255,0.40);
  border-radius: 50%;
  filter: blur(5px);
  pointer-events: none;
}
.color-blob-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1;
}
/* Bounce-in animation */
@keyframes blob-in {
  0%   { transform: scale(0.2) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.14) rotate(3deg);  opacity: 1; }
  80%  { transform: scale(0.93) rotate(-1deg); }
  100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
}
.color-blob.blob-in {
  animation: blob-in 0.52s cubic-bezier(0.34,1.56,0.64,1) both;
}

.bg-colors {
  background:
    radial-gradient(ellipse at 8%  12%, rgba(255,82,82,0.28)   0%, transparent 38%),
    radial-gradient(ellipse at 90% 8%,  rgba(255,200,0,0.30)   0%, transparent 35%),
    radial-gradient(ellipse at 80% 88%, rgba(76,175,80,0.28)   0%, transparent 38%),
    radial-gradient(ellipse at 12% 90%, rgba(33,150,243,0.26)  0%, transparent 36%),
    radial-gradient(ellipse at 55% 48%, rgba(156,39,176,0.16)  0%, transparent 45%),
    radial-gradient(ellipse at 65% 28%, rgba(255,120,0,0.22)   0%, transparent 35%),
    radial-gradient(ellipse at 28% 58%, rgba(233,30,99,0.18)   0%, transparent 38%),
    #F5F0E8;
}
.bg-animals  { background: radial-gradient(ellipse at 30% 20%, rgba(255,220,160,0.35) 0%, transparent 55%), radial-gradient(ellipse at 75% 80%, rgba(136,158,115,0.20) 0%, transparent 50%), #F2E8D5; }
.bg-fruits { background:
  radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.40) 0%, transparent 50%),
  radial-gradient(ellipse at 20% 100%, rgba(100,180,255,0.25) 0%, transparent 50%),
  linear-gradient(180deg, #5bb8f5 0%, #2980d4 100%); }
.bg-meyveler { background: #2980d4; }
.bg-fiqurlar { background: linear-gradient(180deg, #04081C 0%, #08142C 30%, #0E1E40 55%, #08142C 80%, #04081C 100%); }

/* Decorative sparkles */
.bg-letters::before { background-image:
  radial-gradient(5px 5px at 10% 13%, rgba(255,140,20,0.65) 0%, transparent 100%),
  radial-gradient(4px 4px at 32%  8%, rgba(255,190,60,0.45) 0%, transparent 100%),
  radial-gradient(5px 5px at 56% 11%, rgba(255,120,10,0.55) 0%, transparent 100%),
  radial-gradient(4px 4px at 78%  7%, rgba(255,160,40,0.50) 0%, transparent 100%),
  radial-gradient(3px 3px at 90% 16%, rgba(255,140,20,0.40) 0%, transparent 100%),
  radial-gradient(4px 4px at 48% 18%, rgba(255,100,10,0.35) 0%, transparent 100%); }

.bg-numbers::before { display: none; }
.lesson-screen-numbers { background: radial-gradient(ellipse at 60% 20%, #1A2A6C 0%, #0D1B4B 40%, #060C2A 100%) !important; }
#numbers-bg-digits { display:none; }
.lesson-screen-numbers::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(3px 3px at  7%  8%, rgba(255,255,255,1.00) 0%, transparent 100%),
    radial-gradient(2px 2px at 18%  4%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(4px 4px at 29% 11%, rgba(255,255,200,1.00) 0%, transparent 100%),
    radial-gradient(2px 2px at 41%  6%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(3px 3px at 54%  9%, rgba(255,255,255,1.00) 0%, transparent 100%),
    radial-gradient(2px 2px at 64% 14%, rgba(255,255,200,0.90) 0%, transparent 100%),
    radial-gradient(4px 4px at 76%  7%, rgba(255,255,255,1.00) 0%, transparent 100%),
    radial-gradient(2px 2px at 85%  4%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(3px 3px at 93% 10%, rgba(255,255,200,1.00) 0%, transparent 100%),
    radial-gradient(2px 2px at 23% 22%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(3px 3px at 70% 18%, rgba(255,255,200,0.90) 0%, transparent 100%),
    radial-gradient(2px 2px at 12% 35%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(3px 3px at 88% 28%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(4px 4px at 45% 30%, rgba(255,255,200,0.80) 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 42%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(3px 3px at 33% 50%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(2px 2px at 78% 55%, rgba(255,255,200,0.85) 0%, transparent 100%),
    radial-gradient(4px 4px at 15% 62%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(2px 2px at 52% 68%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(3px 3px at 90% 72%, rgba(255,255,200,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at  5% 80%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(3px 3px at 38% 85%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(4px 4px at 68% 90%, rgba(255,255,200,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 82% 78%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(3px 3px at 25% 75%, rgba(255,255,255,0.80) 0%, transparent 100%);
}

.bg-colors::before { display: none; }

.bg-animals::before { background-image:
  radial-gradient(3px 3px at 12% 10%, rgba(210,125,86,0.40) 0%, transparent 100%),
  radial-gradient(2px 2px at 37%  6%, rgba(136,158,115,0.45) 0%, transparent 100%),
  radial-gradient(3px 3px at 62% 13%, rgba(210,125,86,0.35) 0%, transparent 100%),
  radial-gradient(2px 2px at 84%  9%, rgba(136,158,115,0.40) 0%, transparent 100%),
  radial-gradient(2px 2px at 26% 18%, rgba(210,125,86,0.28) 0%, transparent 100%),
  radial-gradient(2px 2px at 72% 17%, rgba(136,158,115,0.32) 0%, transparent 100%); }

.bg-meyveler::before { background-image:
  radial-gradient(3px 3px at 11%  9%, rgba(255,180,80, 0.55) 0%, transparent 100%),
  radial-gradient(2px 2px at 38%  6%, rgba(255,210,80, 0.45) 0%, transparent 100%),
  radial-gradient(3px 3px at 64% 12%, rgba(180,255,90, 0.55) 0%, transparent 100%),
  radial-gradient(2px 2px at 86%  8%, rgba(255,170,70, 0.45) 0%, transparent 100%),
  radial-gradient(2px 2px at 27% 17%, rgba(255,200,90, 0.35) 0%, transparent 100%),
  radial-gradient(2px 2px at 76% 15%, rgba(190,255,110,0.40) 0%, transparent 100%); }

.bg-fiqurlar::before { background-image:
  radial-gradient(2px 2px at 14%  9%, rgba(140,200,255,0.65) 0%, transparent 100%),
  radial-gradient(2px 2px at 40%  6%, rgba(190,220,255,0.55) 0%, transparent 100%),
  radial-gradient(2px 2px at 67% 12%, rgba(140,200,255,0.65) 0%, transparent 100%),
  radial-gradient(2px 2px at 88%  7%, rgba(170,210,255,0.60) 0%, transparent 100%),
  radial-gradient(2px 2px at 29% 18%, rgba(150,200,255,0.40) 0%, transparent 100%),
  radial-gradient(2px 2px at 79% 16%, rgba(190,220,255,0.50) 0%, transparent 100%); }


/* Peseler mission card on home screen */
.peseler-mission-card {
  background: linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #1976D2 100%) !important;
  overflow: hidden;
  position: relative;
  min-height: 110px;
  border: none !important;
  box-shadow: 0 4px 0 #0a3070, 0 6px 18px rgba(13,71,161,0.35) !important;
}
.peseler-mission-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.pes-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0D47A1 0%, #1565C0 55%, #1976D2 100%);
}
.pes-sun {
  position: absolute;
  top: -14%; right: -6%;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF59D 0%, #FFEE58 55%, transparent 100%);
  opacity: 0.5;
}
.pes-cloud {
  position: absolute;
  font-size: 22px;
  opacity: 0.55;
  animation: pes-drift linear infinite;
}
.pes-cloud1 { top: 14%; animation-duration: 14s; animation-delay: 0s; }
.pes-cloud2 { top: 26%; animation-duration: 20s; animation-delay: -7s; font-size: 16px; opacity: 0.4; }
@keyframes pes-drift {
  0%   { left: -15%; }
  100% { left: 110%; }
}
.pes-city {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
}
.pes-building {
  position: absolute;
  bottom: 0;
  background: #0B3175;
  border-radius: 3px 3px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  padding: 6px 4px;
}
.pes-window {
  display: block;
  width: 5px; height: 5px;
  background: rgba(255,220,120,0.75);
  border-radius: 1px;
}
.pes-icons {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  padding-bottom: 8px;
}
.pes-icon {
  font-size: 26px;
  opacity: 0.9;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35));
  animation: pes-bob 2.6s ease-in-out infinite;
}
.pes-icon2 { animation-delay: -0.8s; }
.pes-icon3 { animation-delay: -1.6s; }
@keyframes pes-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.peseler-mission-content {
  position: relative;
  z-index: 1;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.peseler-mission-title {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.bg-peseler   { background: linear-gradient(160deg, #0A1E3A 0%, #0E2A52 40%, #0E2448 80%, #081A38 100%); }
.peseler-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; padding: 14px 14px 48px !important; }
.peseler-card {
  background: #fff !important;
  border: 2.5px solid #3A6BB5 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 0 #1e3f7a, 0 6px 16px rgba(30,60,140,0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 10px 6px 8px !important;
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.14s cubic-bezier(0.34,1.56,0.64,1);
  cursor: pointer;
}
.peseler-card.peseler-card-in {
  animation: peseler-card-in 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.peseler-card:active { transform: scale(0.90) !important; }
.peseler-card.done { border-color: #4CAF50 !important; box-shadow: 0 4px 0 #2e7d32, 0 6px 16px rgba(46,125,50,0.25) !important; }
.peseler-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  pointer-events: none;
}
.peseler-emoji {
  font-size: 64px;
  line-height: 1;
  width: 100%;
  text-align: center;
  padding: 4px 0;
}
.peseler-name {
  font-size: 14px;
  font-weight: 800;
  color: #1a3a6a;
  text-align: center;
  margin-top: 5px;
  line-height: 1.1;
}
@keyframes peseler-card-in {
  0%   { transform: scale(0.4) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.10) rotate(2deg); opacity: 1; }
  80%  { transform: scale(0.95) rotate(-1deg); opacity: 1; }
  100% { transform: scale(1)    rotate(0deg); opacity: 1; }
}
.naqliyyat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; padding: 14px 14px 48px !important; }
.naqliyyat-card {
  background: #fff !important;
  border: 2.5px solid #3A9A5A !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 0 #1e6a38, 0 6px 16px rgba(30,120,60,0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 10px 6px 8px !important;
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.14s cubic-bezier(0.34,1.56,0.64,1);
  cursor: pointer;
}
.naqliyyat-card.naqliyyat-card-in {
  animation: peseler-card-in 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.naqliyyat-card:active { transform: scale(0.90) !important; }
.naqliyyat-card.done { border-color: #4CAF50 !important; box-shadow: 0 4px 0 #2e7d32, 0 6px 16px rgba(46,125,50,0.25) !important; }
.naqliyyat-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  pointer-events: none;
}
.naqliyyat-emoji {
  font-size: 64px;
  line-height: 1;
  width: 100%;
  text-align: center;
  padding: 4px 0;
}
.naqliyyat-name {
  font-size: 14px;
  font-weight: 800;
  color: #14532d;
  text-align: center;
  margin-top: 5px;
  line-height: 1.1;
}
.bg-naqliyyat { background: linear-gradient(180deg, #0C1420 0%, #141E30 35%, #1A2840 60%, #0C1420 100%); }
.bg-geyim     { background: linear-gradient(160deg, #1A0828 0%, #280840 40%, #200838 80%, #160620 100%); }
.bg-terevezer { background: linear-gradient(180deg, #081408 0%, #102010 35%, #142A14 60%, #081408 100%); }
.bg-peseler::before   { background-image: radial-gradient(2px 2px at 15% 10%, rgba(100,160,255,0.7) 0%, transparent 100%), radial-gradient(2px 2px at 50% 7%, rgba(140,190,255,0.5) 0%, transparent 100%), radial-gradient(2px 2px at 82% 12%, rgba(100,160,255,0.6) 0%, transparent 100%); }
.bg-naqliyyat::before { background-image: radial-gradient(2px 2px at 12% 9%, rgba(180,210,240,0.65) 0%, transparent 100%), radial-gradient(2px 2px at 50% 6%, rgba(200,220,255,0.5) 0%, transparent 100%), radial-gradient(2px 2px at 82% 11%, rgba(180,210,240,0.6) 0%, transparent 100%); }
.bg-geyim::before     { background-image: radial-gradient(2px 2px at 10% 10%, rgba(220,150,255,0.65) 0%, transparent 100%), radial-gradient(2px 2px at 48% 7%, rgba(240,170,255,0.5) 0%, transparent 100%), radial-gradient(2px 2px at 78% 12%, rgba(200,130,255,0.6) 0%, transparent 100%); }
.bg-terevezer::before { background-image: radial-gradient(2px 2px at 14% 8%, rgba(100,220,80,0.7) 0%, transparent 100%), radial-gradient(2px 2px at 52% 6%, rgba(140,230,100,0.5) 0%, transparent 100%), radial-gradient(2px 2px at 83% 10%, rgba(100,220,80,0.6) 0%, transparent 100%); }

/* ═══ CARTOON NUMBER CARDS ═══ */
.bg-numbers .items-grid { gap: 16px; padding: 16px 14px 50px; }
.num-card {
  perspective: 800px;
  height: 160px;
  cursor: pointer;
  border-radius: 22px;
  background: transparent;
}
.num-card-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* п.4 — пружина с лёгким overshoot */
  transition: transform 0.70s cubic-bezier(0.34,1.56,0.64,1);
  border-radius: 22px;
}
.num-card.flipped .num-card-inner { transform: rotateY(180deg); }
/* п.4 — тихое покачивание после остановки */
@keyframes cardSettle {
  0%   { transform: rotateY(180deg) rotate3d(0,1,0, 0deg); }
  20%  { transform: rotateY(180deg) rotate3d(0,0,1, 1.5deg); }
  45%  { transform: rotateY(180deg) rotate3d(0,0,1,-1.0deg); }
  70%  { transform: rotateY(180deg) rotate3d(0,0,1, 0.5deg); }
  100% { transform: rotateY(180deg) rotate3d(0,0,1, 0deg); }
}
.num-card.flipped .num-card-inner {
  animation: cardSettle 0.55s cubic-bezier(0.34,1.2,0.64,1) 0.62s both;
}

/* ── п.3 Glass candy cube ── */
.num-card-front, .num-card-back {
  position: absolute; inset: 0;
  border-radius: 22px;
  backface-visibility: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  /* п.1 — убрана белая подложка, только мягкая diffuse тень */
  box-shadow:
    inset 0  3px 16px rgba(255,255,255,0.55),
    inset 0 -5px 20px rgba(0,0,0,0.22),
    inset 3px  0  12px rgba(255,255,255,0.18),
    inset -3px 0  12px rgba(0,0,0,0.14),
    /* inner glow — glass cube feel */
    inset 0  0  30px rgba(255,255,255,0.08),
    /* п.1 — diffuse shadow, no solid bottom edge */
    0 8px 32px rgba(0,0,0,0.38),
    0 2px 8px  rgba(0,0,0,0.22),
    /* color glow */
    0 0 20px 2px var(--num-glow, rgba(255,255,255,0.12));
  /* п.3 — полупрозрачность для эффекта леденца */
  background-blend-mode: screen;
}
.num-card-back { transform: rotateY(180deg); }

.num-card-front::before, .num-card-back::before,
.num-card-front::after { content: none; }

/* ── 3D Polished Gold numeral ── */
.num-digit {
  font-size: 74px; font-weight: 900;
  line-height: 1;
  font-family: 'Nunito', sans-serif;
  position: relative; z-index: 2;
  background: linear-gradient(160deg,
    #FFFFFF  0%,
    #FFFFFF  4%,
    #FFF8B0  9%,
    #FFD700 22%,
    #FFB800 38%,
    #FFD700 52%,
    #C07800 68%,
    #FFD700 80%,
    #FFF5A0 92%,
    #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* п.2 — резкий белый блик (0px blur = твёрдая грань) + объём */
  filter:
    drop-shadow(0 -1px 0   rgba(255,255,255,1.0))
    drop-shadow(0  1px 0   rgba(255,255,100,0.90))
    drop-shadow(0  3px 0   rgba(140,70,0,0.75))
    drop-shadow(0  7px 12px rgba(0,0,0,0.60));
}
.num-word {
  font-size: 13px; font-weight: 800;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 1px 6px rgba(0,0,0,0.65);
  margin-top: 1px;
  letter-spacing: 0.6px;
  position: relative; z-index: 2;
}

/* Gold stud indicators */
.num-studs {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 0 8px;
  position: relative; z-index: 2;
}
.num-stud {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    #FFFFFF 0%, #FFF0A0 15%, #FFD700 45%, #C8860A 80%, #8B5E00 100%);
  box-shadow:
    inset 0 -2px 3px rgba(0,0,0,0.35),
    inset 0  2px 3px rgba(255,255,180,0.75),
    0 2px 6px rgba(0,0,0,0.45),
    0 0 4px rgba(255,200,0,0.40);
  position: relative;
}
.num-stud::after {
  content:''; position:absolute; top:2px; left:2px;
  width:5px; height:4px;
  border-radius:50%;
  background: rgba(255,255,230,0.85);
}

/* ── Gold coins on back ── */
.num-gold-coin {
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  /* п.2 — резкий блик в верхнем-левом секторе */
  background:
    radial-gradient(circle at 28% 22%,
      #FFFFFF 0%, #FFFFFF 8%,
      #FFF8A0 16%, #FFD700 38%,
      #FFA500 62%, #B8690A 84%, #7A4400 100%);
  box-shadow:
    /* п.2 — твёрдый белый ободок сверху */
    inset 0  2px 0  rgba(255,255,255,0.95),
    inset 0 -3px 6px rgba(0,0,0,0.35),
    /* п.1 — мягкая diffuse тень */
    0 6px 18px rgba(0,0,0,0.38),
    0 2px 5px  rgba(0,0,0,0.25),
    /* золотое свечение */
    0 0 10px 2px rgba(255,200,0,0.35);
  animation: coinFall 0.5s cubic-bezier(0.34,1.56,0.64,1) var(--d,0ms) both;
}
/* п.2 — яркий specular highlight */
.num-gold-coin::before {
  content:''; position:absolute;
  top:4px; left:5px;
  width:13px; height:7px;
  border-radius:50%;
  background: rgba(255,255,255,0.92);
  filter: blur(1px);
}
/* Sparkle */
.num-gold-coin::after {
  content:'\2726'; position:absolute;
  bottom:2px; right:3px;
  font-size:9px; line-height:1;
  color:rgba(255,245,140,0.95);
  text-shadow: 0 0 5px rgba(255,220,0,0.9);
}

/* Bulk bounce after landing */
@keyframes coinBulk {
  0%   { transform: translateY(0) scale(1); }
  28%  { transform: translateY(-7px) scale(1.10); }
  52%  { transform: translateY(2px) scale(0.94); }
  72%  { transform: translateY(-3px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
.num-gold-coin.bulk {
  animation: coinBulk 0.5s cubic-bezier(0.34,1.56,0.64,1) var(--bd,0ms) both;
}

@keyframes coinFall {
  0%   { top:-50px !important; opacity:0; transform:scale(0.25) rotate(-25deg); }
  55%  { opacity:1; transform:scale(1.18) rotate(10deg); }
  78%  { transform:scale(0.90) rotate(-4deg); }
  100% { transform:scale(1) rotate(0deg); opacity:1; }
}

/* ═══ LEGO NUMBER CARDS (5 & 6) ═══ */
.lego-num-card {
  perspective: 900px;
  height: 180px;
  cursor: pointer;
  border-radius: 22px;
  position: relative;
}
.lego-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.34,1.1,0.64,1);
  border-radius: 22px;
}
.lego-num-card.flipped .lego-inner { transform: rotateY(180deg); }
.lego-front, .lego-back {
  position: absolute; inset: 0;
  border-radius: 22px;
  backface-visibility: hidden;
  overflow: hidden;
}
.lego-back { transform: rotateY(180deg); }

/* Front — glossy LEGO brick face */
.lego-face {
  width: 100%;
  height: calc(100% - 12px);
  border-radius: 18px 18px 10px 10px;
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
}
/* Glossy top sheen */
.lego-face::before {
  content:''; position:absolute; top:0; left:0; right:0; height:45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 100%);
  border-radius: 18px 18px 0 0; pointer-events:none; z-index:1;
}
/* Stud dot grid texture */
.lego-face::after {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.28) 34%, transparent 35%);
  background-size: 22px 22px;
  background-position: 11px 11px;
  pointer-events:none; z-index:0;
}
/* Bottom wall — the LEGO brick depth */
.lego-wall {
  height: 12px;
  border-radius: 0 0 10px 10px;
  width: 100%; position: absolute; bottom: 0;
}
.lego-digit {
  font-size: 80px; font-weight: 900;
  color: white;
  font-family: 'Nunito', sans-serif;
  position: relative; z-index: 2; line-height: 1;
  text-shadow:
    2px 2px 0 rgba(0,0,0,0.18),
    4px 5px 0 rgba(0,0,0,0.14),
    0 0 30px rgba(255,255,255,0.25);
  -webkit-text-stroke: 2px rgba(0,0,0,0.15);
  filter: drop-shadow(0 5px 14px rgba(0,0,0,0.45));
}
.lego-word {
  font-size: 13px; font-weight: 800;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 5px rgba(0,0,0,0.55);
  position: relative; z-index: 2;
  margin-top: 4px; letter-spacing: 0.5px;
}

/* Back — LEGO construction plate */
.lego-plate {
  width: 100%; height: 100%;
  border-radius: 22px;
  background: #1B7D2E;
  position: relative;
  overflow: hidden;
}
/* Plate stud grid */
.lego-plate::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.22) 34%, transparent 35%);
  background-size: 18px 18px;
  background-position: 9px 9px;
  z-index: 0;
}
/* Plate glossy sheen */
.lego-plate::after {
  content:''; position:absolute; top:0; left:0; right:0; height:35%;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 100%);
  z-index: 0;
}

/* Mini LEGO bricks (pile on back) */
.lego-pile {
  position: absolute; inset: 0;
  z-index: 1;
}
.mini-brick {
  position: absolute;
  cursor: pointer;
}
.mini-stud {
  position: absolute;
  border-radius: 50% 50% 0 0;
  top: -6px;
}
.mini-face {
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.mini-face::before {
  content:''; position:absolute; top:0; left:0; right:0; height:45%;
  background: rgba(255,255,255,0.45);
  border-radius: 4px 4px 0 0;
}

@keyframes brickScatter {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); opacity:1; }
  20%  { opacity: 1; }
  100% { transform: translate(var(--bx,0px),var(--by,-80px)) rotate(var(--br,180deg)) scale(0.4); opacity:0; }
}
.mini-brick.scattered {
  animation: brickScatter 0.55s cubic-bezier(0.25,0,0.45,1) var(--bd,0ms) both;
  pointer-events: none;
}

/* Numbers — fixed card height */
.bg-numbers .item-card { height: 148px; justify-content: center; gap: 6px; }
.item-card { background: white; border-radius: 16px; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.15s; box-shadow: var(--shadow-sm); border: 3px solid transparent; min-height: 108px; }
.item-card:active { transform: scale(0.88); }
.item-card.selected { border-color: var(--green); background: #F0FFF4; }
.item-letter { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: 2px; }
.item-emoji  { font-size: 42px; line-height: 1; }
.item-emoji img { width: 80px !important; height: 80px !important; }
.bg-letters .item-card { aspect-ratio: 1; height: auto; padding: 0; gap: 0; background: transparent !important; border: none !important; box-shadow: none !important; position: relative; overflow: hidden; border-radius: 16px; justify-content: flex-end; }
.bg-letters .item-card:active { transform: scale(0.88); }
.bg-letters .item-card.selected { outline: none; background: transparent !important; border: none !important; box-shadow: none !important; }
@keyframes wobble1 {
  0%   { transform: scale(1,1) rotate(0deg); }
  20%  { transform: scaleX(1.3) scaleY(0.7) rotate(-20deg); }
  40%  { transform: scaleX(0.8) scaleY(1.25) rotate(20deg); }
  60%  { transform: scaleX(1.15) scaleY(0.9) rotate(-10deg); }
  80%  { transform: scaleX(0.95) scaleY(1.08) rotate(5deg); }
  100% { transform: scale(1,1) rotate(0deg); }
}
@keyframes wobble2 {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.3); }
  35%  { transform: scale(0.85); }
  55%  { transform: scale(1.15); }
  75%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes wobble3 {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-15deg) scale(1.1); }
  40%  { transform: rotate(15deg) scale(1.1); }
  60%  { transform: rotate(-8deg); }
  80%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes wobble4 {
  0%   { transform: scaleY(1) scaleX(1); }
  25%  { transform: scaleY(0.6) scaleX(1.2); }
  55%  { transform: scaleY(1.3) scaleX(0.9); }
  75%  { transform: scaleY(0.9) scaleX(1.05); }
  100% { transform: scaleY(1) scaleX(1); }
}
@keyframes wobble5 {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-20px) scale(1.1); }
  50%  { transform: translateY(0) scale(0.95); }
  70%  { transform: translateY(-8px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}
.bg-letters .item-card.wobble { animation-duration: 0.8s; animation-timing-function: ease; animation-fill-mode: both; }
@keyframes letter-stamp-in {
  0%   { transform: translate(-50%,-50%) scale(2); opacity: 0; }
  30%  { transform: translate(-50%,-50%) scale(0.9); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
.letter-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 72px; font-weight: 900; color: white; text-shadow: 0 0 20px rgba(0,0,0,0.8), 0 4px 12px rgba(0,0,0,0.6); z-index: 10; pointer-events: none; animation: letter-stamp-in 0.4s ease forwards; }
.h-card .letter-stamp { display: none; } /* временно отключено */
.bg-letters .item-card.wobble1 { animation-name: wobble1; }
.bg-letters .item-card.wobble2 { animation-name: wobble2; }
.bg-letters .item-card.wobble3 { animation-name: wobble3; }
.bg-letters .item-card.wobble4 { animation-name: wobble4; }
.bg-letters .item-card.wobble5 { animation-name: wobble5; }
@keyframes splash { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } }
@keyframes splash2 { 0% { transform: translate(0,0) scale(1) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0) rotate(360deg); opacity: 0; } }
@keyframes splash3 { 0% { transform: translate(0,0) scale(0.5); opacity: 1; } 50% { transform: translate(calc(var(--tx)*0.6), calc(var(--ty)*0.6)) scale(1.4); opacity: 0.8; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } }
.splash-particle { position: absolute; pointer-events: none; z-index: 10; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
/* ═══ TEST SECTION ═══ */
.lesson-screen-test { background: linear-gradient(160deg, #1a2a4a 0%, #1e3f6e 50%, #1a2a4a 100%) !important; }
.lesson-screen-test .spotlight { display:none; }

/* Quiz в тест-разделе — детский режим без текста */
.lesson-screen-test .quiz-question-label,
.lesson-screen-letters .quiz-question-label { display:none; }
.lesson-screen-test .quiz-feedback { display:none; }
.lesson-screen-test #q-emoji img { width:160px !important; height:160px !important; }

/* Стрелка-подсказка между картинкой и кнопками */
.quiz-tap-hint {
  text-align:center; font-size:34px; line-height:1;
  animation: quiz-hint-bounce 0.7s ease-in-out infinite alternate;
  margin: 4px 0 2px;
}
@keyframes quiz-hint-bounce {
  from { transform: translateY(0px); opacity:0.7; }
  to   { transform: translateY(6px); opacity:1; }
}

/* ── Quiz Tutorial overlay ── */
/* ── Quiz Tutorial Overlay ── */
/* overlay: transparent — затемнение делает только spot через box-shadow */
.quiz-tutorial {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background: transparent;
  transition: opacity 0.5s ease;
}
/* spotlight: поверх фейкового экрана, затемняет всё вокруг себя */
.tut-spotlight {
  position: fixed;
  z-index: 10002;
  pointer-events: none;
  background: transparent;
  border-radius: 20px;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,0.70),
    0 0 0 3px rgba(255,216,64,0.95),
    0 0 28px 8px rgba(255,216,64,0.65);
  transition:
    top    0.42s cubic-bezier(0.4,0,0.2,1),
    left   0.42s cubic-bezier(0.4,0,0.2,1),
    width  0.42s cubic-bezier(0.4,0,0.2,1),
    height 0.42s cubic-bezier(0.4,0,0.2,1),
    border-radius 0.35s ease,
    opacity 0.35s ease;
}

/* ── Tutorial fake screen ── */
.tut-screen {
  position: fixed; inset: 0;
  z-index: 10001;
  pointer-events: none;
  background: linear-gradient(180deg, #1A0A3A 0%, #2D1B6E 15%, #4A2090 25%, #7B3FA0 35%, #E8834A 55%, #F0A830 65%, #8DC86A 78%, #5A9E6F 88%, #3D7A52 100%);
}
.tut-sc-side {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tut-sc-round,
.tut-sc-audio {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.2);
  color: white;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.tut-sc-audio-tap {
  background: rgba(255,216,64,0.38) !important;
  border-color: rgba(255,245,175,0.95) !important;
}
/* apple image */
.tut-sc-img {
  position: fixed;
  object-fit: contain;
  border-radius: 20px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.55));
}
.tut-sc-opts {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
}
.tut-sc-row {
  width: 100%;
  display: flex;
  gap: 10px;
}
.tut-sc-single { justify-content: center; }
.tut-sc-btn {
  flex: 1;
  height: 72px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font);
  font-size: 26px; font-weight: 900;
  color: white;
  background: rgba(255,255,255,0.2);
  border: 3px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  box-sizing: border-box;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.tut-sc-single .tut-sc-btn { flex: 0 0 calc(50% - 5px); }
.tut-sc-btn-green {
  background: rgba(92,212,112,0.72) !important;
  border-color: #6BCB77 !important;
  box-shadow: 0 0 0 8px rgba(107,203,119,0.22), 0 0 28px rgba(107,203,119,0.55) !important;
  color: #fff !important;
}

/* finger */
.tut-finger {
  position: fixed; top: 0; left: 0;
  font-size: 52px;
  pointer-events: none;
  z-index: 10003;
  opacity: 0;
  transform: translate(-300px, -300px) scale(1);
  transition: transform 0.6s cubic-bezier(0.22,0.85,0.32,1), opacity 0.3s ease;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.quiz-exit-overlay {
  position:fixed; inset:0; z-index:10000;
  background:rgba(10,18,40,0.75); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
}
.quiz-exit-dialog {
  background:linear-gradient(160deg,#2a1a5a,#1a2a5a);
  border-radius:32px; padding:32px 28px 28px;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  animation: exit-dialog-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  width:82%; max-width:300px;
}
@keyframes exit-dialog-in {
  from { transform:scale(0.5) translateY(40px); opacity:0; }
  to   { transform:scale(1) translateY(0); opacity:1; }
}
.quiz-exit-btns { display:flex; gap:40px; }
.quiz-exit-btn  {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background:none; border:none; cursor:pointer;
}
.quiz-exit-emoji {
  font-size:68px; line-height:1; display:block;
}
.quiz-exit-emoji.nod   { animation: emoji-nod  1s ease infinite; }
.quiz-exit-emoji.shake { animation: emoji-shake 1s ease infinite; }
@keyframes emoji-nod {
  0%,100% { transform:rotate(0deg) translateY(0); }
  25%     { transform:rotate(-10deg) translateY(-6px); }
  50%     { transform:rotate(0deg) translateY(-8px); }
  75%     { transform:rotate(10deg) translateY(-6px); }
}
@keyframes emoji-shake {
  0%,100% { transform:rotate(0deg); }
  20%     { transform:rotate(-14deg); }
  40%     { transform:rotate(14deg); }
  60%     { transform:rotate(-12deg); }
  80%     { transform:rotate(12deg); }
}
.quiz-exit-circle {
  width:88px; height:88px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:44px; font-weight:900; color:white;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  transition:transform 0.12s;
}
.quiz-exit-circle:active { transform:scale(0.90); }
.quiz-exit-circle.green  { background:linear-gradient(135deg,#4ecb5a,#2d8f3a); }
.quiz-exit-circle.red    { background:linear-gradient(135deg,#FF6B6B,#c0392b); }

/* Кнопки прилетают снизу с пружиной */
@keyframes quiz-opt-appear {
  0%   { transform: translateY(60px) scale(0.7); opacity:0; }
  55%  { transform: translateY(-10px) scale(1.06); opacity:1; }
  75%  { transform: translateY(5px) scale(0.97); }
  90%  { transform: translateY(-3px) scale(1.02); }
  100% { transform: translateY(0) scale(1); opacity:1; }
}
.lesson-screen-test .quiz-opt {
  font-size:30px; padding:20px 8px;
  background:rgba(255,255,255,0.18); color:#FFD840;
  border-color:rgba(255,220,80,0.35); backdrop-filter:blur(4px);
  font-weight:900;
}
.quiz-opt.appear { animation: quiz-opt-appear 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.lesson-screen-test .quiz-opt.correct { background:rgba(100,220,100,0.35); border-color:#6BCB77; color:white; }
.lesson-screen-test .quiz-opt.wrong   { background:rgba(255,100,100,0.35); border-color:#FF6B6B; color:white; }
.lesson-screen-test .quiz-next-btn { background:rgba(255,255,255,0.25); color:white; border-color:rgba(255,255,255,0.4); }
.lesson-screen-test .quiz-card { background:transparent; box-shadow:none; }
.lesson-screen-test .quiz-counter { color:rgba(255,255,255,0.8); }
.lesson-screen-test .lesson-tabs {
  background: transparent; gap:10px; margin:10px 14px 0;
}
.lesson-screen-test .lesson-tab {
  display:flex; align-items:center; justify-content:center; min-height:50px;
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75);
  font-size:16px; padding:10px 10px; border-radius:15px;
  backdrop-filter:blur(8px); border:2px solid rgba(255,255,255,0.18);
}
.lesson-screen-test .lesson-tab.active {
  background: rgba(255,255,255,0.30); color: #FFD840;
  border-color: rgba(255,220,80,0.55); box-shadow:0 4px 16px rgba(0,0,0,0.25);
}
.bg-test.items-grid {
  display:grid; grid-template-columns: repeat(2,1fr);
  gap:24px 10px; padding:16px 12px 50px; background:transparent;
}

/* Уменьшенные карточки для двух в ряд */
.bg-test .abc-card-3d {
  width:100%; max-width:none; height:118px;
  border-radius:20px; padding:12px 0 12px 13px;
  position: relative;
}
/* маркер уверенности */
.abc-score-dot {
  position: absolute;
  top: 9px; right: 9px;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  pointer-events: none;
}
.abc-score-none { background: #FF5252; }
.abc-score-weak { background: #FFD740; }
.abc-score-done { background: #69F0AE; }
.bg-test .abc-card-ltr-big { font-size:58px; }
.bg-test .abc-card-ltr-sm  { font-size:36px; }
.bg-test .abc-card-ltrs-row { gap:6px; }
.bg-test .abc-card-word { font-size:23px; margin-top:4px; }
.bg-test .abc-card-img-wrap {
  right:-8px; top:-10px; width:138px; height:138px;
}
.bg-test .abc-card-3d:nth-child(1) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(7) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(9) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(11) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(16) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(17) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(18) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(20) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(22) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(25) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(26) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(29) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(31) .abc-card-img-wrap,
.bg-test .abc-card-3d:nth-child(32) .abc-card-img-wrap {
  right:-22px;
}
.bg-test .abc-card-emoji { font-size:72px; }

/* ABC cards */
.abc-card-3d {
  width: 85%; max-width:320px; height:170px;
  border-radius:28px; position:relative; overflow:visible;
  display:flex; flex-direction:row; align-items:center;
  padding:18px 0 18px 22px;
  cursor:pointer; transition:transform 0.10s, box-shadow 0.10s;
}
.abc-card-3d:active { transform:translateY(10px) !important; }
.abc-card-left {
  display:flex; flex-direction:column; align-items:flex-start;
  flex-shrink:0; gap:0; position:relative; z-index:2;
}
.abc-card-ltrs-row {
  display:flex; flex-direction:row; align-items:baseline; gap:10px;
}
.abc-card-ltr-big {
  font-family:'Baloo 2',sans-serif; font-weight:900; font-size:88px; line-height:1;
  color:#FFD840;
  text-shadow: 0 1px 0 rgba(255,255,255,0.28), 0 2px 0 rgba(0,0,0,0.30),
               0 4px 0 rgba(0,0,0,0.22), 0 7px 16px rgba(0,0,0,0.30);
}
.abc-card-ltr-sm {
  font-family:'Baloo 2',sans-serif; font-weight:900; font-size:54px; line-height:1;
  color:#FFD840;
  text-shadow: 0 1px 0 rgba(255,255,255,0.28), 0 2px 0 rgba(0,0,0,0.25),
               0 4px 10px rgba(0,0,0,0.25);
}
.abc-card-word {
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:36px;
  color:#FFD840; margin-top:6px;
  text-shadow:0 1px 5px rgba(0,0,0,0.35);
}
.abc-card-img-wrap {
  position:absolute; right:4px; top:-55px;
  width:215px; height:255px;
  display:flex; align-items:flex-end; justify-content:center;
  z-index:1;
}
.abc-card-img {
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.46));
}
.abc-card-emoji { font-size:110px; line-height:1; filter:drop-shadow(0 10px 16px rgba(0,0,0,0.38)); }

/* ── Thematic animations ── */
@keyframes abc-duck-waddle {
  0%,100% { transform: rotate(-10deg) translateX(-5px); }
  50%     { transform: rotate(10deg)  translateX(5px); }
}
@keyframes abc-lightning-shake {
  0%,100% { transform: translateX(0) rotate(0); }
  12%  { transform: translateX(-12px) rotate(-4deg); }
  25%  { transform: translateX(12px)  rotate(4deg); }
  37%  { transform: translateX(-8px)  rotate(-2deg); }
  50%  { transform: translateX(8px)   rotate(2deg); }
  62%  { transform: translateX(-5px); }
  75%  { transform: translateX(5px); }
  87%  { transform: translateX(-2px); }
}
@keyframes abc-lightning-flash {
  0%         { opacity:0; }
  8%,22%     { opacity:0.85; }
  15%,35%    { opacity:0.05; }
  42%,55%    { opacity:0.60; }
  65%,100%   { opacity:0; }
}
.abc-anim-duck .abc-card-img { transform-origin: bottom center; }

/* Bounce — Top, Alma, Nar, Əncir */
@keyframes abc-bounce {
  0%,100% { transform:translateY(0) scaleX(1) scaleY(1); }
  22%     { transform:translateY(-28px) scaleX(0.90) scaleY(1.08); }
  38%     { transform:translateY(0) scaleX(1.14) scaleY(0.88); }
  54%     { transform:translateY(-14px) scaleX(0.94) scaleY(1.04); }
  68%     { transform:translateY(0) scaleX(1.07) scaleY(0.94); }
  80%     { transform:translateY(-5px); }
  90%     { transform:translateY(0); }
}
/* Swim — Balıq */
@keyframes abc-swim {
  0%,100% { transform:translateX(-12px) rotate(-8deg); }
  25%     { transform:translateX(-4px)  rotate(4deg); }
  50%     { transform:translateX(12px)  rotate(8deg); }
  75%     { transform:translateX(4px)   rotate(-4deg); }
}
.abc-anim-fish .abc-card-img { transform-origin: center left; }
@keyframes abc-umbrella-tap {
  0%,100% { transform:translateY(0) rotate(0deg) scale(1); }
  28%     { transform:translateY(4px) rotate(-2deg) scaleX(1.04) scaleY(0.96); }
  58%     { transform:translateY(-2px) rotate(1.5deg) scaleX(0.98) scaleY(1.02); }
}
@keyframes abc-ship-sail {
  0%,100% { transform:translateY(0) rotate(-2deg); }
  25%     { transform:translateY(-8px) rotate(3deg); }
  50%     { transform:translateY(2px) rotate(-3deg); }
  75%     { transform:translateY(-5px) rotate(2deg); }
}
.abc-ship-wave-layer {
  position:absolute;
  left:7%;
  right:7%;
  bottom:4%;
  height:25%;
  z-index:1;
  pointer-events:none;
  opacity:0;
  animation:abc-ship-wave-in 0.24s ease forwards;
  transition:opacity 0.24s ease;
}
.abc-ship-wave-layer svg {
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 5px 7px rgba(0,70,120,0.18));
}
.ship-wave {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation:abc-wave-drift 1.25s ease-in-out infinite;
}
.ship-wave-back {
  stroke:rgba(82,207,231,0.58);
  stroke-width:9;
}
.ship-wave-main {
  stroke:rgba(44,151,217,0.78);
  stroke-width:11;
  animation-delay:-0.28s;
}
.ship-foam {
  fill:none;
  stroke:rgba(255,255,255,0.88);
  stroke-width:5;
  stroke-linecap:round;
  animation:abc-foam-sparkle 0.9s ease-in-out infinite;
}
@keyframes abc-ship-wave-in {
  from { opacity:0; transform:translateY(10px) scaleX(0.88); }
  to   { opacity:1; transform:translateY(0) scaleX(1); }
}
@keyframes abc-wave-drift {
  0%,100% { transform:translateX(-7px); }
  50%     { transform:translateX(7px); }
}
@keyframes abc-foam-sparkle {
  0%,100% { opacity:0.55; transform:translateX(4px); }
  50%     { opacity:1; transform:translateX(-4px); }
}
@keyframes abc-doctor-nod {
  0%,100% { transform:translateY(0) rotate(0deg); }
  28%     { transform:translateY(-5px) rotate(-2deg); }
  58%     { transform:translateY(2px) rotate(1.5deg); }
}
.abc-doctor-cross {
  position:absolute;
  right:12%;
  top:12%;
  z-index:4;
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#5ee7a7,#16a36d);
  color:white;
  font-weight:1000;
  font-size:29px;
  line-height:1;
  box-shadow:0 8px 18px rgba(22,163,109,0.36), inset 0 2px 0 rgba(255,255,255,0.45);
  animation:abc-doctor-cross-pulse 0.72s ease-in-out infinite alternate;
  transition:opacity 0.25s ease;
}
.abc-doctor-ring {
  position:absolute;
  left:50%;
  top:52%;
  z-index:1;
  width:34%;
  height:34%;
  border-radius:50%;
  border:4px solid rgba(94,231,167,0.48);
  transform:translate(-50%,-50%) scale(0.45);
  opacity:0;
  animation:abc-doctor-ring 1.2s ease-out forwards;
  pointer-events:none;
}
@keyframes abc-doctor-cross-pulse {
  from { transform:scale(0.92) rotate(-3deg); }
  to   { transform:scale(1.12) rotate(3deg); }
}
@keyframes abc-doctor-ring {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.45); }
  22%  { opacity:0.72; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.7); }
}
@keyframes abc-comb-brush {
  0%,100% { transform:translateX(0) rotate(0deg); }
  16%     { transform:translateX(-34px) rotate(-9deg); }
  34%     { transform:translateX(34px) rotate(8deg); }
  52%     { transform:translateX(-26px) rotate(-7deg); }
  70%     { transform:translateX(24px) rotate(6deg); }
  84%     { transform:translateX(-8px) rotate(-2deg); }
}
/* Hop — Cücə */
@keyframes abc-hop {
  0%,100% { transform:translateY(0) scaleX(1); }
  20%     { transform:translateY(-30px) scaleX(0.88) rotate(-8deg); }
  36%     { transform:translateY(0) scaleX(1.15) rotate(0deg); }
  52%     { transform:translateY(-15px) scaleX(0.92) rotate(5deg); }
  65%     { transform:translateY(0) scaleX(1.08); }
}
/* Sway — Çiçək, Ot, Üzüm, Zürafə */
@keyframes abc-sway {
  0%,100% { transform:rotate(-9deg) translateX(-4px); }
  50%     { transform:rotate(9deg) translateX(4px); }
}
/* Earthquake — Ev, Dağ */
@keyframes abc-quake {
  0%,100%         { transform:translate(0,0) rotate(0); }
  10%,30%,50%,70% { transform:translate(-6px,-3px) rotate(-1.5deg); }
  20%,40%,60%,80% { transform:translate(6px,2px) rotate(1.5deg); }
}
/* Rumble — Maşın, Qələm */
@keyframes abc-rumble {
  0%,100% { transform:translate(0,0) rotate(0); }
  20%     { transform:translate(-4px,-2px) rotate(-1deg); }
  40%     { transform:translate(4px,1px) rotate(1deg); }
  60%     { transform:translate(-3px,2px) rotate(-0.5deg); }
  80%     { transform:translate(3px,-1px) rotate(0.5deg); }
}
/* Flicker — Lampa */
@keyframes abc-flicker {
  0%,100%  { opacity:1; filter:brightness(1); }
  8%,32%   { opacity:0.25; filter:brightness(0.3); }
  18%,44%  { opacity:1; filter:brightness(1.6); }
  28%      { opacity:0.55; filter:brightness(0.7); }
  60%,80%  { opacity:1; filter:brightness(1.2); }
  70%      { opacity:0.4; filter:brightness(0.5); }
}
/* Spin+bounce — Əsgər */
/* Стойка смирно — Əsgər */
@keyframes abc-attention {
  0%   { transform: scale(1)    translateY(0);   }
  15%  { transform: scale(0.92) translateY(6px); }
  30%  { transform: scale(1.18) translateY(-14px); }
  45%  { transform: scale(1.18) translateY(-14px); }
  58%  { transform: scale(1.0)  translateY(0px);  }
  68%  { transform: scale(1.08) translateY(-6px); }
  80%  { transform: scale(1.0)  translateY(0px);  }
  90%  { transform: scale(1.04) translateY(-3px); }
  100% { transform: scale(1)    translateY(0);   }
}
/* Spin — Rəsm */
@keyframes abc-spin {
  0%   { transform:rotate(0deg) scale(1); }
  50%  { transform:rotate(180deg) scale(1.12); }
  100% { transform:rotate(360deg) scale(1); }
}
/* Clock tick — Saat */
@keyframes abc-clock-tick {
  0%,100% { transform:rotate(-14deg); }
  25%     { transform:rotate(14deg); }
  50%     { transform:rotate(-14deg); }
  75%     { transform:rotate(14deg); }
}
/* Snake slither — İlan */
@keyframes abc-slither {
  0%,100% { transform:translateX(-16px) skewX(-10deg); }
  25%     { transform:translateX(0) skewX(5deg); }
  50%     { transform:translateX(16px) skewX(10deg); }
  75%     { transform:translateX(0) skewX(-5deg); }
}
/* Roar — Şir */
@keyframes abc-roar {
  0%,100% { transform:scale(1) translate(0,0); }
  12%     { transform:scale(1.22) translate(-6px,0); }
  24%     { transform:scale(1.20) translate(6px,0); }
  36%     { transform:scale(1.18) translate(-4px,-2px); }
  52%     { transform:scale(1.10) translate(3px,0); }
  68%     { transform:scale(1.04) translate(-2px,0); }
  82%     { transform:scale(1.01) translate(1px,0); }
}
/* Roll — Fındıq, Velosiped */
@keyframes abc-roll {
  0%   { transform:translateX(-22px) rotate(-50deg); }
  55%  { transform:translateX(10px) rotate(22deg); }
  78%  { transform:translateX(-5px) rotate(-10deg); }
  100% { transform:translateX(0) rotate(0deg); }
}
@keyframes abc-veten-grow {
  0%   { transform:scale(1); filter:drop-shadow(0 10px 16px rgba(0,0,0,0.38)); }
  35%  { transform:scale(1.34); filter:drop-shadow(0 18px 24px rgba(0,0,0,0.42)) saturate(1.12); }
  62%  { transform:scale(1.22); filter:drop-shadow(0 16px 22px rgba(0,0,0,0.40)) saturate(1.08); }
  100% { transform:scale(1); filter:drop-shadow(0 10px 16px rgba(0,0,0,0.38)); }
}
/* Heartbeat — Həkim */
/* Hat tip — Papaq */
@keyframes abc-tip {
  0%,100% { transform:rotate(0) translateX(0); }
  28%     { transform:rotate(-22deg) translateX(-10px) translateY(-5px); }
  58%     { transform:rotate(12deg) translateX(5px); }
  80%     { transform:rotate(-5deg) translateX(-2px); }
}
/* Twinkle — Ulduz (используется в JS + CSS) */
@keyframes abc-twinkle {
  0%,100% { transform:scale(1) rotate(0deg); filter:brightness(1); }
  30%     { transform:scale(1.25) rotate(20deg); filter:brightness(1.6); }
  60%     { transform:scale(0.90) rotate(-10deg); filter:brightness(1.3); }
  80%     { transform:scale(1.12) rotate(5deg); filter:brightness(1.5); }
}
.mini-cube-wrap { position:absolute; cursor:pointer; perspective:150px; }
.mini-cube-inner { width:100%; height:100%; position:relative; transform-style:preserve-3d; }
.mini-face { position:absolute; border-radius:10px; border:2px solid rgba(255,255,255,0.5); box-sizing:border-box; overflow:hidden; backface-visibility:hidden; }
.mini-face img { width:100%; height:100%; object-fit:contain; padding:6px; }
@keyframes cube-pop { 0%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:0.5} 100%{transform:scale(0);opacity:0} }
.mini-cube-wrap.popping { animation:cube-pop 0.35s ease-out forwards; pointer-events:none; }
.pop-letter-display { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0); font-size:110px; font-weight:900; color:white; text-shadow:0 0 40px rgba(200,100,255,0.9),0 0 80px rgba(100,180,255,0.5),0 6px 20px rgba(0,0,0,0.4); pointer-events:none; z-index:5; opacity:0; transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s; }
.bg-letters .item-letter { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 72px; font-weight: 900; color: white; opacity: 0.35; text-shadow: 2px 2px 0 rgba(0,0,0,0.7), -2px -2px 0 rgba(0,0,0,0.7), 2px -2px 0 rgba(0,0,0,0.7), -2px 2px 0 rgba(0,0,0,0.7), 0 0 16px rgba(0,0,0,0.8); z-index: 3; pointer-events: none; }
/* ═══ Əlifba — горизонтальные карточки (первые 4 буквы) ═══ */
.bg-letters .item-card.h-card { grid-column: 1 / -1; aspect-ratio: auto; height: 100px; padding: 0; flex-direction: row; overflow: hidden; border-radius: 20px; transform: translateY(0); transition: transform 0.10s, box-shadow 0.10s; }
.bg-letters .item-card.h-card:active { transform: translateY(14px); box-shadow: inset 0 3px 0 rgba(255,255,255,0.7), inset 0 -4px 0 rgba(0,0,0,0.2), 0 2px 0 rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.2) !important; }
.h-card-left { width: 88px; height: 88px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 20px 0 0 20px; overflow: hidden; position: relative; }
.h-card-right { width: 88px; height: 88px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0 20px 20px 0; overflow: hidden; position: relative; }
/* Глянцевый блик — верхняя полоса как отражение света */
.h-card-left::after, .h-card-right::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.10) 70%, transparent 100%);
  border-radius: 20px 0 0 0;
  pointer-events: none;
  z-index: 2;
}
.h-card-right::after { border-radius: 0 20px 0 0; }
.h-card-mid { flex: 1; height: 88px; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0 16px; gap: 12px; }
.h-card-letter { font-size: 42px; font-weight: 900; color: white; font-family: 'Baloo 2', sans-serif; line-height: 1;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.40),
    0 -1px 0 rgba(0,0,0,0.25),
    0 2px 0 rgba(0,0,0,0.30),
    0 3px 0 rgba(0,0,0,0.25),
    0 4px 0 rgba(0,0,0,0.20),
    0 5px 0 rgba(0,0,0,0.15),
    0 6px 0 rgba(0,0,0,0.10),
    0 8px 16px rgba(0,0,0,0.40); }
.h-card-letter-sm { font-size: 32px;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.40),
    0 2px 0 rgba(0,0,0,0.28),
    0 3px 0 rgba(0,0,0,0.22),
    0 4px 0 rgba(0,0,0,0.16),
    0 5px 0 rgba(0,0,0,0.10),
    0 7px 12px rgba(0,0,0,0.35); }
.h-card-img { width: 90px; height: 90px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.h-card-emoji { font-size: 44px; line-height: 1; flex-shrink: 0; }
.h-card-word { font-size: 22px; font-weight: 800; color: var(--brown);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.80),
    0 2px 0 rgba(0,0,0,0.12),
    0 3px 0 rgba(0,0,0,0.08),
    0 4px 0 rgba(0,0,0,0.05),
    0 6px 10px rgba(0,0,0,0.15); }
.bg-letters .item-card.h-card.selected { outline: none; }
.bg-letters .item-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bg-letters .item-emoji img { width: 100% !important; height: 100% !important; object-fit: cover; }
.bg-letters .item-label { display: none; }
.bg-letters .item-card.selected .item-label { display: block; position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; font-size: 22px !important; font-weight: 800 !important; color: white; text-align: center; padding: 18px 4px 8px; background: transparent; text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
.item-label  { font-size: 14px; font-weight: 600; color: var(--brown-light); text-align: center; word-break: break-word; width: 100%; }

/* ═══ QUIZ PANEL ═══ */
.quiz-progress-wrap { padding: 14px 14px 0; }
.quiz-progress-bar  { height: 8px; background: var(--cream2); border-radius: 8px; overflow: hidden; }
.quiz-progress-fill { height: 100%; border-radius: 8px; background: var(--green); transition: width 0.4s; }
.quiz-counter { font-size: 13px; font-weight: 600; color: var(--brown-light); text-align: right; margin-top: 6px; }

.quiz-card { margin: 12px 14px; background: white; border-radius: var(--radius); padding: 20px 16px; box-shadow: var(--shadow-sm); position: relative; }
.quiz-question-label { font-size: 17px; font-weight: 700; color: var(--brown); margin-bottom: 14px; text-align: center; }
.quiz-target { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.quiz-target.col-layout { flex-direction: column; gap: 6px; }
.quiz-target.col-layout .quiz-big-emoji { font-size: 34px; max-width: 100%; white-space: normal; text-align: center; word-break: break-all; line-height: 1.4; }
.quiz-big-letter { font-size: 64px; font-weight: 800; line-height: 1; }
.quiz-big-emoji  { font-size: 52px; line-height: 1; }

/* options — equal width 2-column, no left-align bias */
.quiz-options { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.quiz-options .quiz-opts-row { display: flex; gap: 10px; width: 100%; }
.quiz-options .quiz-opts-row .quiz-opt { flex: 1; }
.quiz-options > .quiz-opt { width: 50%; }
.quiz-opt { background: var(--cream2); border: 3px solid transparent; border-radius: 14px; padding: 15px 8px; font-family: var(--font); font-size: 17px; font-weight: 700; color: var(--brown); cursor: pointer; transition: all 0.15s; text-align: center; width: 100%; }
.lesson-screen-letters .quiz-card { background: transparent; box-shadow: none; padding: 10px 16px; }
.lesson-screen-letters #q-emoji img { width: 130px !important; height: 130px !important; }
.lesson-screen-letters .quiz-options { gap: 8px; }
.lesson-screen-letters .quiz-opt { padding: 12px 8px; }
.lesson-screen-letters .quiz-next-btn { margin-top: 8px; padding: 12px; }
.lesson-screen-letters .quiz-feedback { position: absolute; top: -36px; left: 50%; transform: translateX(-50%) rotate(-6deg); font-size: 26px !important; font-weight: 900 !important; color: #FFD93D; text-shadow: 0 3px 12px rgba(0,0,0,0.6), 0 0 20px rgba(255,100,0,0.4); min-height: 0; z-index: 20; pointer-events: none; white-space: nowrap; animation: letter-stamp-in 0.4s ease forwards; }
.lesson-screen-letters .quiz-card { position: relative; }
.quiz-side-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 6;
}
.quiz-help-btn {
  position: static;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.2);
  color: white;
  font-size: 24px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  backdrop-filter: blur(4px);
  transition: background 0.2s, transform 0.15s;
}
.quiz-help-btn:active { transform: scale(0.9); }
.lesson-screen-letters .quiz-help-btn,
.lesson-screen-test .quiz-help-btn { display: flex; }
.lesson-screen-letters .quiz-question-label { color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.lesson-screen-letters .quiz-counter { color: white; }
.lesson-screen-letters .quiz-progress-bar { background: rgba(255,255,255,0.2); }
.lesson-screen-letters #quiz-audio-btn,
.lesson-screen-test #quiz-audio-btn {
  display: flex;
  position: static;
  width: 44px;
  height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0;
  background: rgba(255,255,255,0.2);
  color: white;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  backdrop-filter: blur(8px);
  z-index: 6;
}
.lesson-screen-letters .quiz-next-btn { background: rgba(255,255,255,0.25); color: white; border-color: rgba(255,255,255,0.4); }
.lesson-screen-letters .quiz-opt { font-size: 26px; padding: 18px 8px; background: rgba(255,255,255,0.2); color: white; border-color: rgba(255,255,255,0.2); backdrop-filter: blur(4px); }
@keyframes shake { 0%{transform:rotate(0)} 15%{transform:rotate(-8deg)} 30%{transform:rotate(8deg)} 45%{transform:rotate(-6deg)} 60%{transform:rotate(6deg)} 75%{transform:rotate(-3deg)} 90%{transform:rotate(3deg)} 100%{transform:rotate(0)} }
@keyframes quiz-pop { 0%{transform:scale(1)} 40%{transform:scale(1.25)} 70%{transform:scale(0.9)} 100%{transform:scale(1)} }
@keyframes quiz-correct-ring { 0%{box-shadow:0 0 0 0 rgba(107,203,119,0.9),0 0 0 0 rgba(255,217,61,0.7)} 60%{box-shadow:0 0 0 14px rgba(107,203,119,0),0 0 0 28px rgba(255,217,61,0)} 100%{box-shadow:0 0 0 0 rgba(107,203,119,0),0 0 0 0 rgba(255,217,61,0)} }
.quiz-opt.correct-burst { animation: quiz-pop 0.35s ease, quiz-correct-ring 0.6s ease !important; }

/* Reveal: картинка влево, буква+слово вправо */
.quiz-target { transition: none; }
.quiz-target.reveal-split { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:0; }
.quiz-target.reveal-split #q-emoji { transition: transform 0.45s cubic-bezier(0.34,1.2,0.64,1); transform: translateX(-18px); }
.quiz-reveal-letter {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; transform:translateX(20px) scale(0.6);
  transition: opacity 0.4s ease 0.2s, transform 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.2s;
  min-width:80px;
}
.quiz-reveal-letter.show { opacity:1; transform:translateX(0) scale(1); }
.quiz-reveal-ltr { font-family:'Baloo 2',sans-serif; font-weight:900; font-size:72px; line-height:1;
  color:#FFD840; text-shadow:0 2px 0 rgba(0,0,0,0.3), 0 6px 18px rgba(0,0,0,0.4); }
.quiz-reveal-word { font-family:'Baloo 2',sans-serif; font-weight:800; font-size:20px;
  color:rgba(255,255,255,0.9); text-shadow:0 1px 6px rgba(0,0,0,0.5); margin-top:2px; }
@keyframes dinle-pulse { 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,0.5)} 50%{transform:scale(1.08);box-shadow:0 0 0 10px rgba(255,255,255,0)} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,0)} }
.quiz-opt.shake { animation: shake 0.5s ease; }
.lesson-screen-letters #quiz-audio-btn.dinle-pop { animation: dinle-pulse 0.4s ease; }
.lesson-screen-letters .quiz-opt.correct { background: rgba(100,220,100,0.4); border-color: #6BCB77; color: white; }
.lesson-screen-letters .quiz-opt.wrong   { background: rgba(255,100,100,0.4); border-color: #FF6B6B; color: white; }
.lesson-screen-letters .quiz-big-letter { display: none; }
.lesson-screen-letters .quiz-target { flex-direction: column; align-items: center; gap: 0; position: relative; }
.lesson-screen-letters .quiz-target.reveal-split,
.lesson-screen-test .quiz-target.reveal-split { flex-direction: row !important; align-items: center; justify-content: center; gap: 12px; }
.lesson-screen-letters #q-emoji { position: relative; display: flex; align-items: center; justify-content: center; }
.quiz-opt:active { transform: scale(0.95); }
.quiz-opt.correct { background: #E8F8EC; border-color: var(--green); color: var(--green-dark); }
.quiz-opt.wrong   { background: #FEE8E5; border-color: var(--terra); color: var(--terra-dark); }
.quiz-opt:disabled { opacity: 0.55; cursor: default; }

.quiz-feedback { text-align: center; font-size: 18px; font-weight: 700; margin-top: 14px; min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.quiz-next-btn  { width: 100%; background: var(--green); border: none; border-radius: 14px; padding: 15px; font-family: var(--font); font-size: 18px; font-weight: 800; color: white; cursor: pointer; margin-top: 12px; box-shadow: 0 4px 12px rgba(90,158,111,0.4); display: none; }
.quiz-next-btn:active { transform: scale(0.97); }
.quiz-next-btn.show { display: block; animation: next-btn-pulse 3s ease-in-out 0.4s infinite; }
@keyframes next-btn-pulse {
  0%   { transform: scale(1);    background: #5A9E6F; }
  25%  { transform: scale(1.06); background: #4A90D9; }
  50%  { transform: scale(1);    background: #9B59B6; }
  75%  { transform: scale(1.06); background: #E8634A; }
  100% { transform: scale(1);    background: #5A9E6F; }
}

/* ═══ SCORE ═══ */
#score-screen { background: linear-gradient(135deg, var(--purple), var(--purple-dark)); flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; }
.score-emoji { font-size: 90px; margin-bottom: 16px; }
.score-title { font-size: 36px; font-weight: 800; color: white; margin-bottom: 8px; }
.score-sub   { font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 28px; }
.score-stars { font-size: 52px; margin-bottom: 16px; letter-spacing: 8px; }
.score-unlocks { display:none; margin-bottom: 20px; width: 100%; max-width: 290px; }
.score-unlock-item { background: rgba(255,255,255,0.18); border-radius: 14px; padding: 10px 16px; margin: 6px 0; font-size: 16px; font-weight: 700; color: #fff; text-align: center; animation: score-unlock-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes score-unlock-in { from { opacity:0; transform: scale(0.7); } to { opacity:1; transform: scale(1); } }
.score-btn { background: white; border: none; border-radius: 18px; padding: 18px 40px; font-family: var(--font); font-size: 20px; font-weight: 800; color: var(--purple-dark); cursor: pointer; box-shadow: var(--shadow); margin: 8px; display: block; width: 100%; max-width: 290px; }
.score-btn:active { transform: scale(0.97); }
.score-btn.secondary { background: rgba(255,255,255,0.2); color: white; box-shadow: none; }

/* ═══ CONFETTI ═══ */
.confetti-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10001; overflow: hidden; }
.confetti-piece { position: absolute; border-radius: 3px; animation: confettiFall 1.5s ease-in forwards; }
@keyframes confettiFall { 0%{transform:translateY(-20px) rotate(0deg);opacity:1} 100%{transform:translateY(100vh) rotate(720deg);opacity:0} }
@keyframes rain-fall { 0%{transform:translateY(0) rotate(12deg);opacity:0} 10%{opacity:1} 85%{opacity:0.9} 100%{transform:translateY(160px) rotate(12deg);opacity:0} }
@keyframes rain-ripple { 0%{transform:scale(0.2);opacity:0.9} 100%{transform:scale(2.5);opacity:0} }

/* ═══ INSTALL ═══ */
.install-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--brown); color: white; padding: 16px 20px; display: flex; align-items: center; gap: 12px; z-index: 500; transform: translateY(100%); transition: transform 0.3s; }
.install-banner.show { transform: translateY(0); }
.install-banner-text { flex: 1; font-size: 15px; font-weight: 700; }
.install-btn   { background: var(--gold); border: none; border-radius: 12px; padding: 12px 20px; font-family: var(--font); font-weight: 700; font-size: 15px; color: var(--brown); cursor: pointer; }
.install-close { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 22px; cursor: pointer; }

.spacer { height: 20px; flex-shrink: 0; }
#panel-learn, #panel-quiz { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }

/* ═══ GAMES HUB ═══ */
#games-hub { background: var(--cream); overflow-y: auto; }
.games-hub-header { padding: 14px 16px; display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #4A2090, #2D1B6E); position: sticky; top: 0; z-index: 20; box-shadow: 0 3px 12px rgba(74,32,144,0.4); }
.games-hub-title { font-size: 22px; font-weight: 800; color: white; flex: 1; }
.games-hub-body { padding: 20px 14px; }
.game-tile { background: white; border-radius: 20px; padding: 18px 16px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.15s; }
.game-tile ~ .game-tile { margin-top: 10px; }
.game-tile:active { transform: scale(0.97); }
.game-tile-icon { width: 60px; height: 60px; background: linear-gradient(135deg, #7B3FA0, #4A2090); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.game-tile-info { flex: 1; }
.game-tile-name { font-size: 19px; font-weight: 800; color: var(--brown); }
.game-tile-desc { font-size: 13px; font-weight: 600; color: var(--brown-light); margin-top: 3px; }

/* ═══ MEMORY GAME ═══ */
#memory-game { background: var(--cream); overflow-y: auto; position: relative; }
.memory-start-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: none; align-items: center; justify-content: center;
  background: rgba(45,27,110,0.30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.memory-start-btn {
  border: 0; border-radius: 20px;
  padding: 18px 40px;
  background: linear-gradient(145deg,#7B3FA0,#4A2090);
  color: white;
  font: 900 22px var(--font);
  box-shadow: 0 8px 0 #2D1B6E, 0 16px 28px rgba(45,27,110,0.4);
}
.memory-start-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #2D1B6E; }
.memory-header { padding: 14px 16px; display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #4A2090, #2D1B6E); position: sticky; top: 0; z-index: 31; box-shadow: 0 3px 12px rgba(74,32,144,0.4); }
.memory-game-title { font-size: 19px; font-weight: 800; color: white; flex: 1; }
.memory-stats-row { display: flex; gap: 10px; margin: 14px 14px 0; }
.memory-stat-box { flex: 1; background: white; border-radius: 14px; padding: 10px 8px; text-align: center; box-shadow: var(--shadow-sm); }
.memory-stat-label { font-size: 11px; font-weight: 600; color: var(--brown-light); text-transform: uppercase; letter-spacing: 0.5px; }
.memory-stat-value { font-size: 20px; font-weight: 800; color: var(--brown); margin-top: 2px; }
.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px; }
.mem-card { cursor: pointer; perspective: 800px; }
.mem-card-inner { width: 100%; aspect-ratio: 1; position: relative; transform-style: preserve-3d; transition: transform 0.35s ease; border-radius: 14px; }
.mem-card.flipped .mem-card-inner,
.mem-card.matched .mem-card-inner { transform: rotateY(180deg); }
.mem-card-front,
.mem-card-back { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.mem-card-front { background: linear-gradient(135deg, #4A2090 0%, #7B3FA0 100%); border: 2px solid rgba(255,255,255,0.2); }
.mem-card-back { background: white; border: 2px solid var(--cream2); transform: rotateY(180deg); flex-direction: column; gap: 2px; padding: 0; overflow: hidden; }
.mem-card-back .card-emoji, .mem-card-back .card-word { padding: 8px; }
.mem-card-back > img { width: 80px; height: 80px; object-fit: contain; }
.mem-card.matched .mem-card-back { border-color: var(--green); background: #F0FFF4; }
.mem-card-back .card-emoji { font-size: 44px; line-height: 1; display: flex; align-items: center; justify-content: center; flex: 1; }
.mem-card-back .card-word { font-size: 17px; font-weight: 800; color: var(--brown); text-align: center; line-height: 1.15; word-break: break-word; }

@keyframes shake { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-6px)} 70%{transform:translateX(6px)} }

/* ═══ BLOB TRANSITION ═══ */
.blob-svg-wrap {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden;
  transition: opacity 0.35s ease-in;
}
.blob-svg-wrap svg {
  position: absolute;
  width: 260px; height: 260px;
  transform: translate(-50%,-50%) scale(0);
  transform-origin: center;
  will-change: transform;
  transition: transform 3.1s cubic-bezier(0.22,0.1,0.1,1);
}

/* ═══ ODD ONE OUT ═══ */
.oddone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 14px; }
.oddone-card { background: white; border-radius: 20px; border: 3px solid transparent; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.15s; position: relative; aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.oddone-card:active { transform: scale(0.93) !important; }
.oddone-card.correct { border-color: var(--green); background: #F0FFF4; }
.oddone-card.wrong   { border-color: var(--terra); background: #FEE8E5; animation: shake 0.3s; }

/* ═══ STAR / LOCK SYSTEM ═══ */
.game-tile.locked { opacity: 1; cursor: default; position: relative; background: #F0EEF5; }
.game-tile-req { font-size: 12px; font-weight: 800; color: #9A8FAA; margin-top: 5px; }
.gtile-info-btn { width: 26px; height: 26px; border-radius: 50%; border: none; background: #EAE6F4; color: #7B5EA7; font-size: 13px; font-weight: 900; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; align-self: flex-start; margin-top: 2px; }
.gtile-info-btn:active { background: #D4CCE8; }
.game-info-overlay { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,0.45); display: flex; align-items: flex-end; justify-content: center; animation: walletFadeIn 0.2s ease; }
.game-info-sheet { background: #fff; border-radius: 28px 28px 0 0; padding: 22px 22px 40px; width: 100%; max-width: 420px; box-shadow: 0 -8px 32px rgba(0,0,0,0.2); animation: walletSlideUp 0.28s cubic-bezier(0.34,1.56,0.64,1); }
.game-info-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.game-info-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.game-info-title { font-size: 20px; font-weight: 900; color: #333; }
.game-info-desc { font-size: 14px; font-weight: 600; color: #666; line-height: 1.5; margin-bottom: 16px; }
.game-info-section { font-size: 12px; font-weight: 800; color: #AAA; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.game-info-reqs { display: flex; flex-wrap: wrap; gap: 8px; }
.game-info-req { display: flex; align-items: center; gap: 5px; background: #F4F0FF; border-radius: 10px; padding: 6px 12px; font-size: 13px; font-weight: 800; color: #5A3A8A; }
.game-info-req.done { background: #EAF7EE; color: #2E7D50; }
.game-tile.locked .game-tile-icon { filter: grayscale(0.6); opacity: 0.7; }
.game-tile.locked .game-tile-name { color: #9A8FAA; }
.game-tile.locked .game-tile-desc { color: #B8AEC8; }
.letter-prog-wrap { padding: 0 16px 10px; }
.letter-prog-bar { height: 5px; background: rgba(255,255,255,0.25); border-radius: 3px; overflow: hidden; }
.letter-prog-fill { height: 100%; background: #FFD700; border-radius: 3px; transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.letter-prog-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85); text-align: right; margin-top: 3px; }
.flying-star { position: fixed; font-size: 22px; pointer-events: none; z-index: 9999; will-change: transform; }
@keyframes starCountPulse { 0%,100%{transform:scale(1)} 40%{transform:scale(1.5)} }
.star-count-pulse { animation: starCountPulse 0.4s ease; }
@keyframes streakPop { 0%{opacity:0;transform:translateX(-50%) scale(0.4)} 25%{opacity:1;transform:translateX(-50%) scale(1.25)} 70%{opacity:1;transform:translateX(-50%) scale(1)} 100%{opacity:0;transform:translateX(-50%) translateY(-24px) scale(0.8)} }
.streak-badge { position: fixed; left: 50%; transform: translateX(-50%); top: 28%; z-index: 9998; font-size: 26px; font-weight: 900; color: white; text-shadow: 0 3px 10px rgba(0,0,0,0.35); pointer-events: none; animation: streakPop 1.4s ease forwards; }
@keyframes unlockBounce { 0%{transform:scale(0.6);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }
.unlock-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 9998; background: linear-gradient(135deg,#4A2090,#7B3FD0); color: white; font-size: 15px; font-weight: 800; padding: 14px 24px; border-radius: 20px; box-shadow: 0 8px 28px rgba(74,32,144,0.5); text-align: center; animation: unlockBounce 0.5s ease forwards; pointer-events: none; }
.wallet-overlay { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,0.45); display: flex; align-items: flex-end; justify-content: center; animation: walletFadeIn 0.2s ease; }
@keyframes walletFadeIn { from{opacity:0} to{opacity:1} }
.wallet-sheet { background: #fff; border-radius: 28px 28px 0 0; padding: 20px 20px 36px; width: 100%; max-width: 420px; box-shadow: 0 -8px 32px rgba(0,0,0,0.2); animation: walletSlideUp 0.28s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes walletSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.wallet-title { font-size: 18px; font-weight: 900; color: #333; text-align: center; margin-bottom: 18px; }
.wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wallet-row { display: flex; align-items: center; gap: 10px; background: #F7F5FF; border-radius: 14px; padding: 10px 14px; }
.wallet-row-icon { font-size: 26px; line-height: 1; }
.wallet-row-info { flex: 1; }
.wallet-row-name { font-size: 12px; font-weight: 700; color: #888; }
.wallet-row-val { font-size: 18px; font-weight: 900; color: #333; }
.wallet-row-bar { height: 5px; border-radius: 3px; background: #E0DCF0; margin-top: 4px; overflow: hidden; }
.wallet-row-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }

/* ═══ SEQUENCE GAME ═══ */
#game-seq { background: radial-gradient(ellipse at 50% 0%, #D8F0FF 0%, #EAF6FF 30%, #FFF9F0 65%, #FFF0DC 100%); }
.seq-question { text-align: center; padding: 12px 14px 4px; font-size: 16px; font-weight: 700; color: var(--brown); }
.seq-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 10px 4px; }
.seq-slot { background: rgba(255,255,255,0.5); border-radius: 18px; border: 3px dashed rgba(100,80,160,0.25); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; transition: border-color 0.2s, background 0.2s; }
.seq-slot.filled { background: white; border-style: solid; border-color: var(--purple); box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
.seq-slot.seq-correct { border-color: var(--green) !important; background: #F0FFF4 !important; }
.seq-slot.seq-wrong   { border-color: var(--terra)  !important; background: #FEE8E5 !important; animation: shake 0.3s; }
.seq-slot img { width: 78%; height: 78%; object-fit: contain; }
.seq-slot-num { font-size: 22px; font-weight: 900; color: rgba(100,80,160,0.18); pointer-events: none; }
.seq-slot.filled .seq-slot-num { display: none; }
.seq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 10px 4px; }
.seq-card { background: white; border-radius: 18px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.15s, opacity 0.25s; aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.seq-card:active { transform: scale(0.93); }
.seq-card img { width: 86%; height: 86%; object-fit: contain; }
.seq-card.seq-used { opacity: 0.18; pointer-events: none; transform: scale(0.9); }
.seq-feedback { text-align: center; padding: 8px 14px; font-size: 17px; font-weight: 700; min-height: 34px; }

/* ═══ SORT GAME ═══ */
#game-sort { background: radial-gradient(ellipse at 50% 0%, #EDE0FF 0%, #F5EEFF 30%, #FFF5E8 65%, #FFE8D5 100%); }
.sort-item-area { margin: 20px 14px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; }
.sort-q-card { background: white; border-radius: 24px; box-shadow: 0 6px 28px rgba(0,0,0,0.13); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 20px 16px; width: 200px; gap: 10px; }
.sort-q-img { width: 150px; height: 150px; object-fit: contain; }
.sort-q-name { font-size: 17px; font-weight: 800; color: var(--brown); text-align: center; }
.sort-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 14px 14px; }
.sort-cat-btn { background: white; border-radius: 20px; padding: 12px 6px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.15s; position: relative; overflow: hidden; border: 3px solid transparent; }
.sort-cat-btn::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; border-radius:20px 20px 0 0; }
.sort-cat-btn.animals::before  { background: var(--purple); }
.sort-cat-btn.meyveler::before { background: var(--terra); }
.sort-cat-btn.colors::before   { background: var(--gold); }
.sort-cat-btn.terevezer::before{ background: var(--green); }
.sort-cat-btn:active { transform: scale(0.95); }
.sort-cat-repr { width: 72px; height: 72px; object-fit: contain; display: block; }
.sort-cat-name { font-size: 13px; font-weight: 800; color: var(--brown); text-align: center; }
.sort-cat-btn.correct { border-color: var(--green); background: #F0FFF4; }
.sort-cat-btn.wrong   { border-color: var(--terra); background: #FEE8E5; animation: shake 0.3s; }
.sort-feedback { text-align: center; padding: 6px 14px; font-size: 17px; font-weight: 700; min-height: 34px; }

/* ═══ WORD GUESS GAME ═══ */
#game-word { background: var(--cream); overflow-y: auto; }
.word-stats-row { display: flex; gap: 8px; align-items: center; padding: 10px 14px 4px; }
.word-lives { font-size: 20px; flex: 1; letter-spacing: 2px; }
.word-round { font-size: 13px; font-weight: 700; color: var(--brown-light); }
.word-score { font-size: 15px; font-weight: 800; color: var(--gold-dark); }
.word-picture-box { text-align: center; padding: 10px 14px 2px; }
.word-picture { font-size: 88px; line-height: 1; }
.word-cat-hint { font-size: 13px; font-weight: 700; color: var(--brown-light); margin-top: 4px; }
.word-blanks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 10px 14px 4px; }
.word-tile { width: 34px; height: 42px; border-radius: 8px; background: white; border: 2px solid var(--sand); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: var(--brown); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.word-tile.revealed { border-color: var(--green); background: #F0FFF4; color: var(--green-dark); }
.word-tile-space { width: 14px; }
.word-feedback { text-align: center; font-size: 17px; font-weight: 800; min-height: 30px; padding: 2px 14px; }
.word-keyboard { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 10px 18px; justify-content: center; }
.word-key { width: 34px; height: 40px; border: none; border-radius: 10px; background: white; font-family: var(--font); font-size: 14px; font-weight: 800; color: var(--brown); cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,0.15); transition: transform 0.1s; }
.word-key:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.15); }
.word-key.key-correct { background: var(--green); color: white; box-shadow: 0 2px 0 var(--green-dark); }
.word-key.key-wrong   { background: #DDD; color: #AAA; box-shadow: 0 2px 0 #BBB; }
.word-key:disabled { pointer-events: none; }

/* ═══ TRACE GAME ═══ */
.trace-target-area { text-align: center; padding: 12px 14px 4px; }
.trace-target-letter { font-size: 80px; font-weight: 800; color: var(--purple); line-height: 1; }
.trace-target-word   { font-size: 16px; font-weight: 700; color: var(--brown-light); margin-top: 2px; }
.trace-canvas-wrap { position: relative; margin: 10px 14px 0; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); background: white; height: 210px; }
#trace-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.trace-coverage-wrap { padding: 10px 14px 4px; display: flex; align-items: center; gap: 10px; }
.trace-coverage-bar { flex: 1; height: 8px; background: #EAE6F4; border-radius: 6px; overflow: hidden; }
#trace-coverage-fill { height: 100%; width: 0%; border-radius: 6px; background: #7B5EA7; transition: width 0.3s ease, background 0.3s ease; }
.trace-progress { font-size: 13px; font-weight: 700; color: var(--brown-light); white-space: nowrap; }
@keyframes traceFlash { 0%{opacity:0;transform:scale(0.5)} 40%{opacity:1;transform:scale(1.1)} 70%{opacity:1;transform:scale(1)} 100%{opacity:0} }
.trace-btns { display: flex; gap: 10px; padding: 6px 14px 14px; }
.trace-btn { flex: 1; padding: 13px; border: none; border-radius: 14px; font-family: var(--font); font-size: 15px; font-weight: 700; cursor: pointer; }
.trace-btn.clear { background: var(--cream2); color: var(--brown); }
.trace-btn.next  { background: var(--purple); color: white; }

/* ═══ PIANO GAME ═══ */
#game-piano { background: #1A0A3A; overflow-y: auto; flex-direction: column; }
.piano-mode-tabs { display: flex; gap: 10px; padding: 14px 16px 6px; }
.piano-mode-tab { flex: 1; padding: 11px; border: none; border-radius: 16px; font-family: var(--font); font-size: 15px; font-weight: 800; cursor: pointer; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); transition: 0.2s; }
.piano-mode-tab.active { background: white; color: #4A2090; }
.piano-free-text { text-align: center; font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.55); padding: 18px 16px 4px; }
.piano-song-list { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 4px; }
.piano-song-btn { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid rgba(255,255,255,0.12); border-radius: 18px; background: rgba(255,255,255,0.07); cursor: pointer; font-family: var(--font); text-align: left; transition: 0.15s; }
.piano-song-btn.selected { border-color: #F0C030; background: rgba(240,192,48,0.15); }
.piano-song-btn-icon { font-size: 34px; line-height: 1; }
.piano-song-btn-name { font-size: 16px; font-weight: 800; color: white; }
.piano-song-actions { display: flex; gap: 10px; padding: 10px 16px 4px; }
.piano-action-btn { flex: 1; padding: 14px; border: none; border-radius: 16px; font-family: var(--font); font-size: 15px; font-weight: 800; cursor: pointer; transition: 0.15s; }
.piano-action-btn.demo { background: #F0C030; color: #5A3000; }
.piano-action-btn.practice { background: #44BB44; color: white; }
.piano-action-btn:disabled { opacity: 0.35; pointer-events: none; }
.piano-status { text-align: center; font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.8); padding: 8px 16px; min-height: 38px; }
.piano-keys { display: flex; gap: 4px; padding: 12px 8px 28px; flex-shrink: 0; }
.piano-key { flex: 1; height: 134px; border-radius: 0 0 14px 14px; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 10px; gap: 4px; box-shadow: 0 7px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform 0.08s, box-shadow 0.08s; }
.piano-key:active, .piano-key.key-active { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0,0,0,0.3); }
.piano-key.key-hint { animation: keyPulse 0.45s ease-in-out infinite alternate; }
@keyframes keyPulse { from { filter:brightness(1); transform:translateY(0); } to { filter:brightness(1.55); transform:translateY(4px); box-shadow:0 3px 0 rgba(0,0,0,0.3); } }
.piano-key-name { font-size: 11px; font-weight: 800; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.piano-key-emoji { font-size: 19px; line-height: 1; }

/* Tablets and desktops show each screen as a card. Not on a phone held sideways: with under 600px
   of height the card's margins would cut the bottom of every screen, so it stays full-screen there. */
@media (min-width: 600px) and (min-height: 600px) {
  body {
    background: #1A0A3A;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 32px 0 48px;
    min-height: 100vh;
  }
  .screen {
    /* Grows smoothly from phone width up to a comfortable tablet/desktop cap */
    max-width: clamp(420px, 92vw, 1100px);
    width: 100%;
    min-height: auto;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    container-type: inline-size;
  }
  .screen.active { display: flex; }
  #home { min-height: clamp(780px, 92vh, 1024px); }
  #lesson { min-height: clamp(780px, 92vh, 1024px); max-height: clamp(780px, 92vh, 1024px); }
  #score-screen { min-height: clamp(780px, 92vh, 1024px); }
  #games-hub    { min-height: clamp(780px, 92vh, 1024px); max-height: clamp(780px, 92vh, 1024px); overflow-y: auto; }
  #memory-game  { min-height: clamp(780px, 92vh, 1024px); max-height: clamp(780px, 92vh, 1024px); overflow-y: auto; }
  #game-seq     { min-height: clamp(780px, 92vh, 1024px); max-height: clamp(780px, 92vh, 1024px); overflow-y: auto; }
  #game-oddone  { min-height: clamp(780px, 92vh, 1024px); max-height: clamp(780px, 92vh, 1024px); overflow-y: auto; }
  #game-sort    { min-height: clamp(780px, 92vh, 1024px); max-height: clamp(780px, 92vh, 1024px); overflow-y: auto; }
  #game-word    { min-height: clamp(780px, 92vh, 1024px); max-height: clamp(780px, 92vh, 1024px); overflow-y: auto; }
  #game-trace   { min-height: clamp(780px, 92vh, 1024px); max-height: clamp(780px, 92vh, 1024px); overflow-y: auto; }
  #game-piano   { min-height: clamp(780px, 92vh, 1024px); max-height: clamp(780px, 92vh, 1024px); overflow-y: auto; }
  /* games in a shadow root lay out to the screen's height: keep the whole card on screen */
  .shadow-game-screen { height: calc(100dvh - 80px); }
}

/* Tablets — grid columns react to the .screen container's own width,
   so the layout adapts to any device (iPad mini, iPad Pro, etc.) without
   per-device breakpoints. */
@container (min-width: 600px) {
  .live-book-grid,
  .missions-grid,
  .topic-grid,
  .items-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container (min-width: 900px) {
  .live-book-grid,
  .missions-grid,
  .topic-grid,
  .items-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── Numbers quiz tube layout ── */
.lesson-screen-numbers .quiz-card {
  background: transparent;
  box-shadow: none;
  padding: 10px 12px;
}
.lesson-screen-numbers .quiz-question-label {
  color: white;
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
}
.lesson-screen-numbers .quiz-next-btn {
  background: rgba(255,255,255,0.22);
  color: white;
  border-color: rgba(255,255,255,0.35);
}
/* vertical layout (старый, резервный) */
.nq-layout {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
.nq-tube {
  position: relative;
  flex-shrink: 0;
  border-radius: 0 12px 0 0;
  overflow: hidden;
  background: linear-gradient(90deg,
    rgba(10,30,90,0.92)  0%,
    rgba(30,70,180,0.55) 18%,
    rgba(80,140,255,0.18) 50%,
    rgba(30,70,180,0.55) 82%,
    rgba(10,30,90,0.92)  100%
  );
  border: 2px solid rgba(90,150,255,0.45);
  box-shadow: inset 3px 0 8px rgba(60,120,255,0.18), 0 0 18px rgba(60,100,255,0.2);
}
.nq-opts { display:flex; flex-direction:column; gap:12px; flex:1; }

/* horizontal layout */
.nq-layout-h {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: 8px 0;
}
.nq-tube-h {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg,
    rgba(10,30,90,0.92)  0%,
    rgba(30,70,180,0.55) 20%,
    rgba(80,140,255,0.18) 50%,
    rgba(30,70,180,0.55) 80%,
    rgba(10,30,90,0.92)  100%
  );
  border: 2px solid rgba(90,150,255,0.5);
  box-shadow: inset 0 3px 10px rgba(60,120,255,0.2), 0 0 22px rgba(60,100,255,0.25);
}
.nq-opts-h {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

/* PNG digit buttons in numbers quiz */
.nq-digit-btn {
  flex: 1;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 14px 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
}
.nq-digit-btn:active img { transform: scale(0.82); }
.nq-digit-btn:disabled { opacity: 0.45; cursor: default; }
.nq-digit-btn.correct { background: rgba(105,255,71,0.30) !important; border-color: #69FF47 !important; box-shadow: 0 0 24px rgba(105,255,71,0.65) !important; opacity: 1 !important; }
.nq-digit-btn.wrong   { background: rgba(255,100,100,0.30); border-color: #FF6B6B; }
.nq-digit-btn { opacity: 0; transform: scale(0.5); }
.nq-digit-btn.appear  { animation: nq-digit-btn-in 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes nq-digit-btn-in {
  0%   { opacity: 0; transform: scale(0.4) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1)   rotate(0deg);  }
}
@keyframes nq-digit-in {
  0%   { transform: scale(0) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg);  opacity: 1; }
}

/* Bridge and puzzle games */
.number-color-header { background: linear-gradient(135deg, #38BDF8, #F59E0B); }
.color-math-header { background: linear-gradient(135deg, #F43F5E, #F59E0B); }
.bridge-header { background: linear-gradient(135deg, #00838F, #005662); }
.puzzle-header { background: linear-gradient(135deg, #F0A830, #B86D12); }
.nc-hint {
  margin: 12px 14px 8px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.75);
  box-shadow: var(--shadow-sm);
  color: var(--brown);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}
.nc-stage {
  margin: 10px 14px 12px;
  padding: 8px 8px 10px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.95), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,0.88), rgba(232,255,246,0.92));
  box-shadow: var(--shadow-sm);
}
.nc-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 10px 14px 14px;
}
.nc-gallery-tile {
  border: none;
  border-radius: 26px;
  padding: 12px 10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,247,224,0.94));
  color: var(--brown);
  font-family: var(--font);
  cursor: pointer;
  box-shadow: 0 8px 0 rgba(93,64,55,0.18), 0 16px 24px rgba(0,0,0,0.10);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nc-gallery-tile:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 rgba(93,64,55,0.18), 0 8px 14px rgba(0,0,0,0.08);
}
.nc-gallery-preview {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,0.95), transparent 42%),
    linear-gradient(135deg, #F0FDFA, #FFF7D6);
  overflow: hidden;
  margin-bottom: 10px;
}
.nc-gallery-preview .nc-art-svg {
  width: 96%;
  height: 150px;
  pointer-events: none;
}
.nc-gallery-preview .nc-zone[data-number="1"] { fill: #8ED6E8; }
.nc-gallery-preview .nc-zone[data-number="2"] { fill: #FFE64D; }
.nc-gallery-preview .nc-zone[data-number="3"] { fill: #B9D900; }
.nc-gallery-preview .nc-zone[data-number="4"] { fill: #E53935; }
.nc-gallery-preview .nc-zone[data-number="5"] { fill: #2F3A44; }
.nc-gallery-preview .nc-num {
  display: none;
}
.nc-empty {
  grid-column: 1 / -1;
  margin: 10px 4px 0;
  padding: 22px 18px;
  border-radius: 24px;
  background: rgba(255,255,255,0.82);
  border: 2px dashed rgba(0,121,107,0.28);
  color: var(--brown-light);
  font-weight: 850;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 10px 22px rgba(93,64,55,0.08);
}

.nc-gallery-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 950;
}
.nc-back-gallery-btn {
  display: block;
  width: calc(100% - 28px);
  max-width: 420px;
  margin: 10px auto 0;
  border: none;
  border-radius: 18px;
  padding: 13px 16px;
  background: linear-gradient(180deg, #FFF7DE, #E8D5B8);
  color: #5D4037;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 6px 0 #BCA27F, 0 12px 16px rgba(0,0,0,0.12);
}
.nc-back-gallery-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #BCA27F, 0 7px 10px rgba(0,0,0,0.10);
}
.nc-art-svg {
  display: block;
  width: min(96%, 390px);
  margin: 0 auto;
  overflow: visible;
}
.nc-zone {
  pointer-events: auto;
  fill: #FFFCF0;
  stroke: rgba(17,24,39,0.86);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.16s ease, transform 0.12s ease, filter 0.12s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.nc-zone:hover { filter: brightness(1.04); }
.nc-zone:active { transform: scale(0.985); }
.nc-zone.done {
  filter: saturate(1.12) drop-shadow(0 4px 4px rgba(0,0,0,0.12));
}
.nc-zone.wrong { animation: shake 0.3s; }


.nc-ink {
  pointer-events: none !important;
}

.nc-num {
  fill: #5D4037;
  font-size: 27px;
  font-weight: 950;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255,255,255,0.92);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.nc-palette {
  margin: 6px 14px 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}
.nc-color-btn {
  min-height: 66px;
  border: none;
  border-radius: 999px;
  background: var(--nc-color);
  color: white;
  font-family: var(--font);
  font-size: 23px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 7px 0 rgba(0,0,0,0.22), 0 12px 18px rgba(0,0,0,0.14), inset 0 5px 8px rgba(255,255,255,0.34);
  transition: transform 0.12s ease, box-shadow 0.12s ease, outline-color 0.12s ease;
}
.nc-color-btn.light { color: #4A3426; }
.nc-color-btn span {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  text-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
.nc-color-btn:active,
.nc-color-btn.active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.24), 0 7px 12px rgba(0,0,0,0.12), inset 0 4px 8px rgba(0,0,0,0.12);
  outline: 4px solid rgba(0,128,128,0.24);
}
.nc-feedback {
  min-height: 34px;
  padding: 10px 14px 0;
  text-align: center;
  color: var(--brown-light);
  font-size: 17px;
  font-weight: 950;
}
.game-win-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFF7DE, #E8D5B8);
  color: #5D4037;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 0 #BCA27F, 0 10px 16px rgba(0,0,0,0.16), inset 0 4px 6px rgba(255,255,255,0.55);
}
.game-win-close:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #BCA27F, 0 6px 10px rgba(0,0,0,0.12);
}

/* Celebration modals (memory win, game win, new story unlocked). JS shows them with style.display = 'flex'. */
.app-modal {
  display: none; position: fixed; inset: 0; z-index: 400;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,0.5);
}
.app-modal.app-modal-top { z-index: 410; }
.app-modal-card {
  position: relative; width: 100%; max-width: 320px;
  padding: 32px 24px 24px; border-radius: 28px;
  background: white; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.app-modal-emoji { font-size: 60px; margin-bottom: 10px; }
.app-modal-title { font-size: 28px; font-weight: 800; color: var(--brown); margin-bottom: 6px; }
.app-modal-title.small { font-size: 22px; }
.app-modal-sub { font-size: 14px; font-weight: 600; color: var(--brown-light); margin-bottom: 24px; }
.app-modal-sub.strong { font-size: 15px; font-weight: 700; }
.app-modal-btn {
  width: 100%; border: none; border-radius: 16px; cursor: pointer;
  font-family: var(--font);
}
.app-modal-btn.primary {
  padding: 15px; font-size: 17px; font-weight: 800; color: white;
  background: var(--purple); box-shadow: 0 4px 12px rgba(124,77,188,0.4);
}
.app-modal-btn.primary + .app-modal-btn { margin-top: 10px; }
.app-modal-btn.secondary {
  padding: 13px; font-size: 16px; font-weight: 700; color: var(--brown-light);
  background: var(--cream2);
}
.cm-hint {
  margin: 12px 14px 8px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow-sm);
  color: var(--brown);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}
.cm-stage {
  margin: 10px 14px 12px;
  padding: 14px 10px 16px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,0.95), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,0.86), rgba(255,247,218,0.92));
  box-shadow: var(--shadow-sm);
}
.cm-art-svg {
  display: block;
  width: min(94%, 390px);
  margin: 0 auto;
  overflow: visible;
}
.cm-gallery-preview .cm-art-svg {
  width: 96%;
  height: 150px;
  pointer-events: none;
}
.cm-zone {
  fill: #FFFEF8;
  stroke: #111827;
  stroke-width: 4;
  cursor: pointer;
  transition: fill 0.18s ease, transform 0.14s ease, filter 0.14s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.cm-zone:hover { filter: brightness(1.04); }
.cm-zone:active { transform: scale(0.985); }
.cm-zone.done {
  stroke: rgba(17,24,39,0.72);
  filter: saturate(1.15) drop-shadow(0 4px 4px rgba(0,0,0,0.12));
}
.cm-zone.wrong { animation: shake 0.3s; }
.cm-outline {
  fill: none;
  stroke: #111827;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.cm-expr {
  fill: #E11D48;
  font-size: 18px;
  font-weight: 950;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255,255,255,0.92);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.cm-palette {
  margin: 6px 14px 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.cm-color-btn {
  min-height: 72px;
  border: none;
  border-radius: 999px;
  background: var(--cm-color);
  color: white;
  font-family: var(--font);
  font-size: 23px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 7px 0 rgba(0,0,0,0.22), 0 12px 18px rgba(0,0,0,0.14), inset 0 5px 8px rgba(255,255,255,0.34);
  transition: transform 0.12s ease, box-shadow 0.12s ease, outline-color 0.12s ease;
}
.cm-color-btn.light { color: #4A3426; }
.cm-color-btn span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  text-shadow: 0 2px 0 rgba(0,0,0,0.14);
}
.cm-color-btn:active,
.cm-color-btn.active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.24), 0 7px 12px rgba(0,0,0,0.12), inset 0 4px 8px rgba(0,0,0,0.12);
  outline: 4px solid rgba(0,128,128,0.24);
}
.cm-feedback {
  min-height: 34px;
  padding: 10px 14px 0;
  text-align: center;
  color: var(--brown-light);
  font-size: 17px;
  font-weight: 950;
}
.cm-restart-btn {
  display: block;
  width: calc(100% - 28px);
  max-width: 420px;
  margin: 8px auto 0;
  border: none;
  border-radius: 18px;
  padding: 13px 16px;
  background: linear-gradient(180deg, #008577, #006A60);
  color: white;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 7px 0 #004A43, 0 13px 18px rgba(0,0,0,0.16);
}
.cm-restart-btn:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 #004A43, 0 8px 12px rgba(0,0,0,0.12);
}
.bridge-scene {
  margin: 16px 14px 8px;
  min-height: 330px;
  border-radius: 30px;
  background: linear-gradient(180deg, #8EE8FF 0%, #DDF9FF 42%, #A8E063 43%, #6DBB45 100%);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.bridge-river {
  position: absolute;
  left: -12%; right: -12%; top: 38%; bottom: 8%;
  background: repeating-radial-gradient(ellipse at 20% 35%, rgba(255,255,255,0.38) 0 8px, transparent 9px 34px), linear-gradient(135deg, #29B6F6, #0277BD);
  border-radius: 48% 52% 0 0 / 22% 24% 0 0;
  animation: bridgeWater 4s linear infinite;
}
.bridge-stones { position: absolute; inset: 28px 14px 24px; z-index: 2; }
.bridge-stone {
  position: absolute;
  width: 72px; height: 58px;
  border: none;
  border-radius: 50% 48% 46% 52%;
  background: linear-gradient(180deg, #FFF6D8, #C8B27A);
  box-shadow: 0 8px 0 #90794C, 0 13px 20px rgba(0,0,0,0.18), inset 0 5px 8px rgba(255,255,255,0.45);
  font-family: var(--font); font-size: 26px; font-weight: 900; color: #5D4037;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
}
.bridge-stone:active { transform: translateY(5px); box-shadow: 0 3px 0 #90794C, 0 8px 14px rgba(0,0,0,0.18); }
.bridge-stone.next { outline: 4px solid rgba(255,235,59,0.95); animation: bridgeNext 0.7s ease-in-out infinite alternate; }
.bridge-stone.done { filter: saturate(1.2) brightness(1.08); background: linear-gradient(180deg, #D8FFD6, #70C466); }
.bridge-stone.wrong { animation: shake 0.3s; background: linear-gradient(180deg, #FFD6D6, #E57373); }
.bridge-frog {
  position: absolute; z-index: 4;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; transform: translate(-50%, -50%);
  transition: left 0.34s cubic-bezier(0.34,1.56,0.64,1), top 0.34s cubic-bezier(0.34,1.56,0.64,1), scale 0.18s;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.25)); pointer-events: none;
}
.bridge-frog.jump { scale: 1.18; }
.bridge-prompt, .bridge-feedback, .puzzle-feedback {
  text-align: center; min-height: 32px; padding: 8px 14px 0;
  font-size: 18px; font-weight: 900; color: var(--brown);
}
.bridge-feedback, .puzzle-feedback { color: var(--brown-light); }
.puzzle-workbench {
  margin: 12px 14px 8px;
  padding: 12px 12px 14px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,244,214,0.9));
  box-shadow: var(--shadow-sm);
}
.puzzle-board-real {
  width: min(82vw, 330px);
  aspect-ratio: 1;
  margin: 0 auto;
  position: relative;
  border-radius: 24px;
  overflow: visible;
  background: #F3DCA3;
  box-shadow: inset 0 0 0 4px rgba(93,64,55,0.12), 0 12px 28px rgba(120,70,0,0.18);
}
.puzzle-template {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: grayscale(0.15) contrast(0.85);
  border-radius: 24px;
  pointer-events: none;
}
.puzzle-drop-zone {
  position: absolute;
  border: 2px dashed rgba(93,64,55,0.2);
  border-radius: 18px;
  pointer-events: none;
}
.puzzle-drop-zone::before,
.puzzle-drop-zone::after {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  border: 2px dashed rgba(93,64,55,0.2);
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
}
.puzzle-drop-zone.tab-r::before { right: -14%; top: 36%; border-left-color: transparent; }
.puzzle-drop-zone.tab-l::before { left: -14%; top: 36%; border-right-color: transparent; }
.puzzle-drop-zone.tab-b::after { left: 36%; bottom: -14%; border-top-color: transparent; }
.puzzle-drop-zone.tab-t::after { left: 36%; top: -14%; border-bottom-color: transparent; }
.puzzle-drop-zone.hot { background: rgba(255,255,255,0.23); border-color: rgba(255,213,79,0.9); }
.puzzle-drop-zone.hot::before,
.puzzle-drop-zone.hot::after { border-color: rgba(255,213,79,0.9); background: rgba(255,235,59,0.14); }
.puzzle-drop-zone.filled { border-color: transparent; }
.puzzle-drop-zone.filled::before,
.puzzle-drop-zone.filled::after { display: none; }
.puzzle-hint {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--brown-light);
}
.puzzle-tray {
  min-height: 168px;
  margin: 0 14px;
  padding: 12px;
  border-radius: 26px;
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 10px;
}
.puzzle-piece-real {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.18));
  transition: transform 0.12s, opacity 0.18s;
}
.puzzle-piece-real:active { cursor: grabbing; transform: scale(0.96); }
.puzzle-piece-real.used { opacity: 0.16; pointer-events: none; transform: scale(0.88); }
.puzzle-piece-real.wrong { animation: shake 0.3s; }
.puzzle-piece-face {
  position: absolute;
  inset: 0;
  background-image: url('games/puzzle/pirates.webp');
  background-repeat: no-repeat;
  border-radius: 18px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.35), inset 0 -4px 8px rgba(0,0,0,0.16);
}
.puzzle-piece-face::before,
.puzzle-piece-face::after {
  content: '';
  position: absolute;
  width: 28%; height: 28%;
  border-radius: 50%;
  background: inherit;
  background-size: inherit;
  background-position: inherit;
  box-shadow: inherit;
}
.puzzle-piece-real.tab-r .puzzle-piece-face::before,
.puzzle-placed-piece.tab-r .puzzle-piece-face::before { right: -14%; top: 36%; }
.puzzle-piece-real.tab-b .puzzle-piece-face::after,
.puzzle-placed-piece.tab-b .puzzle-piece-face::after { left: 36%; bottom: -14%; }
.puzzle-piece-real.tab-l .puzzle-piece-face::before,
.puzzle-placed-piece.tab-l .puzzle-piece-face::before { left: -14%; top: 36%; }
.puzzle-piece-real.tab-t .puzzle-piece-face::after,
.puzzle-placed-piece.tab-t .puzzle-piece-face::after { left: 36%; top: -14%; }
.puzzle-placed-piece {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
}
#puzzle-drag-ghost {
  position: fixed;
  z-index: 900;
  pointer-events: none;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.28));
  transform: scale(1.04);
}
@keyframes bridgeWater { to { background-position: 90px 0, 0 0; } }
@keyframes bridgeNext { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@media (max-width: 420px) {
  .bridge-scene { min-height: 300px; }
  .bridge-stone { width: 62px; height: 50px; font-size: 23px; }
  .bridge-frog { font-size: 38px; }
  .puzzle-workbench { margin: 10px 12px 8px; padding: 10px; }
  .puzzle-board-real { width: min(86vw, 300px); }
  .puzzle-tray { min-height: 154px; gap: 8px; padding: 10px; }
}

/* Heca Dunyasi */
.hecalar-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.35), transparent 28%),
    linear-gradient(145deg, #0f766e 0%, #22c55e 52%, #facc15 135%);
  color: #fff;
  box-shadow: 0 14px 0 #0b5f59, 0 18px 24px rgba(15,118,110,0.26);
}
.hecalar-card::after {
  content: '';
  position: absolute;
  inset: auto -20% -35% -20%;
  height: 64%;
  background: rgba(255,255,255,0.14);
  transform: rotate(-8deg);
}
.hecalar-bg { position: absolute; inset: 0; pointer-events: none; }
.heca-float {
  position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r));
  min-width: 38px; height: 32px; padding: 0 8px; border-radius: 12px;
  display: grid; place-items: center; background: var(--c); color: #5b3515;
  font-weight: 1000; font-size: 20px;
  box-shadow: 0 5px 0 rgba(91,53,21,0.22), 0 8px 14px rgba(0,0,0,0.18);
}
.heca-float.small { min-width: 32px; height: 28px; font-size: 16px; }
.hecalar-card-content { position: relative; z-index: 1; margin-top: auto; width: 100%; text-align: left; text-shadow: 0 2px 6px rgba(0,0,0,0.22); }
.hecalar-card-title { font-size: 27px; font-weight: 1000; letter-spacing: -0.8px; }
.hecalar-card-sub { margin-top: 5px; font-weight: 800; font-size: 13px; opacity: 0.92; }

#syllables-screen {
  background:
    radial-gradient(circle at 12% 14%, rgba(250,204,21,0.26), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(34,197,94,0.18), transparent 30%),
    linear-gradient(180deg, #e9fff4 0%, #fff8df 58%, #ffedc2 100%);
  color: #51321a;
  overflow: hidden;
}
.syllables-header {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px; padding-top: calc(16px + env(safe-area-inset-top));
}
.syllables-title { flex: 1; text-align: center; font-size: 24px; font-weight: 1000; letter-spacing: -0.7px; color: #0f766e; }
.syll-level-menu, .syll-game {
  flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0 14px 18px;
}
.syll-map-title { margin-top: 6px; text-align: center; color: #0f766e; font-size: 28px; font-weight: 1000; letter-spacing: -0.8px; }
.syll-map-sub { max-width: 360px; margin: 2px auto 16px; text-align: center; color: rgba(81,50,26,0.72); font-size: 14px; font-weight: 900; line-height: 1.18; }
.syll-map {
  position: relative; max-width: 440px; height: calc(100% - 76px); min-height: 420px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: space-around; gap: 14px;
}
.syll-map::before {
  content: ''; position: absolute; left: 44px; top: 54px; bottom: 54px; width: 10px; border-radius: 999px;
  background: linear-gradient(180deg, #57d6a3, #6fb6ff, #ff7aa8); opacity: 0.28;
}
.syll-map-card {
  position: relative; z-index: 1; width: 100%; min-height: 112px; border: 4px solid rgba(255,255,255,0.84);
  border-radius: 30px; padding: 14px 16px 14px 96px; background: rgba(255,255,255,0.82);
  color: #51321a; text-align: left; font-family: var(--font); box-shadow: 0 10px 0 rgba(81,50,26,0.08), 0 18px 28px rgba(81,50,26,0.12);
}
.syll-map-card::after { content: '?'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #0f766e; font-size: 34px; font-weight: 1000; }
.syll-map-card.locked { opacity: 0.56; filter: grayscale(0.35); }
.syll-map-card.locked::after { content: '\1F512'; font-size: 25px; }
.syll-map-badge {
  position: absolute; left: 18px; top: 22px; width: 58px; height: 58px; border-radius: 22px;
  display: grid; place-items: center; background: var(--tone); color: #51321a; font-size: 31px; font-weight: 1000;
  box-shadow: 0 7px 0 rgba(81,50,26,0.22);
}
.syll-map-stars { display: block; color: #f59e0b; font-size: 16px; letter-spacing: 2px; line-height: 1; }
.syll-map-card b { display: block; margin-top: 4px; color: #0f766e; font-size: 22px; font-weight: 1000; }
.syll-map-card small { display: block; color: rgba(81,50,26,0.72); font-size: 13px; font-weight: 900; }
.syll-map-card em { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(15,118,110,0.1); color: #0f766e; font-style: normal; font-size: 12px; font-weight: 1000; }

.syll-game { display: flex; flex-direction: column; }
.syll-game-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 520px; width: 100%; margin: 0 auto 8px; }
.syll-nav-btns {
  display: flex; align-items: center; gap: 6px;
}
.syll-nav-btn {
  width: 38px; height: 38px; border: none; border-radius: 50%;
  background: #0f766e; color: #fff;
  font-size: 18px; font-weight: 900; font-family: var(--font);
  box-shadow: 0 5px 0 #0a514c;
  cursor: pointer; transition: opacity 0.2s, transform 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.syll-nav-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #0a514c; }
.syll-nav-btn:disabled { opacity: 0.3; cursor: default; transform: none; box-shadow: 0 5px 0 #0a514c; }
.syll-progress {
  width: fit-content; padding: 9px 15px; border-radius: 999px; background: #0f766e; color: #fff;
  font-size: 15px; font-weight: 1000; box-shadow: 0 6px 0 #0a514c, 0 10px 16px rgba(15,118,110,0.2);
}
.syll-build-card, .syll-play-card {
  flex: 0 0 auto; max-width: 520px; width: 100%; margin: 0 auto 8px; padding: 10px 12px 12px;
  border: 3px solid rgba(255,255,255,0.72); border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,255,255,0.68)), repeating-linear-gradient(-45deg, rgba(15,118,110,0.08) 0 8px, transparent 8px 18px);
  box-shadow: 0 13px 24px rgba(81,50,26,0.13); text-align: center;
  position: relative;
}
.syll-formula-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.syll-card-controls {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 8px; z-index: 5;
}
.syll-ctrl-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(15,118,110,0.4);
  background: rgba(255,255,255,0.85);
  color: #0f766e; font-size: 20px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(6px);
  box-shadow: 0 4px 10px rgba(15,118,110,0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}
.syll-ctrl-btn:active { transform: scale(0.9); }
.syll-bounce { animation: syll-part-bounce 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes syll-part-bounce {
  0%   { transform: translateY(0)     scale(1); }
  25%  { transform: translateY(-22px) scale(1.22) rotate(-6deg); }
  55%  { transform: translateY(-10px) scale(1.12) rotate(4deg); }
  75%  { transform: translateY(-4px)  scale(1.05) rotate(-2deg); }
  100% { transform: translateY(0)     scale(1)    rotate(0deg); }
}
.syll-tut-formula { display:flex; align-items:center; justify-content:center; gap:6px; }
.syll-tut-part { padding:7px 13px; border-radius:12px; color:#583313; font-size:20px; font-weight:900; box-shadow:0 4px 0 rgba(81,50,26,0.24); }
.syll-tut-plus { color:#b45309; font-size:18px; font-weight:900; }
.syll-tut-word { padding:7px 16px; border-radius:12px; background:#0f766e; color:#fff; font-size:20px; font-weight:900; box-shadow:0 4px 0 #0a514c; }
.syll-build-top {
  display: flex; justify-content: center; margin-bottom: 8px;
}
.syll-hero-img, .syll-emoji-img {
  flex: 0 0 auto; width: 165px; height: 165px; object-fit: contain; margin: 0; padding: 8px; border-radius: 26px; background: rgba(255,255,255,0.72);
}
.syll-emoji-img { display: grid; place-items: center; font-size: 42px; }
.syll-formula { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; }
.syll-formula.pop { animation: syllPop 0.28s ease; }
.syll-formula-part {
  min-width: 80px; min-height: 62px; padding: 9px 12px; border-radius: 18px; display: inline-grid; place-items: center;
  background: linear-gradient(145deg, #fff7ad, #fbbf24);
  color: #51321a; font-size: 24px; font-weight: 1000;
  box-shadow: 0 7px 0 rgba(81,50,26,0.22), 0 10px 16px rgba(81,50,26,0.16);
}
.syll-formula-word {
  min-width: 90px; min-height: 62px; padding: 9px 14px; border-radius: 18px; display: inline-grid; place-items: center;
  background: linear-gradient(145deg, #0d9488, #0f766e);
  color: #fff; font-size: 24px; font-weight: 1000;
  box-shadow: 0 7px 0 #0a514c, 0 10px 16px rgba(15,118,110,0.20);
}
.syll-formula-plus { color: #b45309; font-size: 18px; font-weight: 1000; }
.syll-formula-3 .syll-formula-part, .syll-formula-3 .syll-formula-word { min-width: 38px; font-size: 18px; padding-inline: 7px; }
.syll-formula-4 .syll-formula-part, .syll-formula-4 .syll-formula-word { min-width: 34px; min-height: 36px; font-size: 16px; padding-inline: 6px; }

.syll-slots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.syll-slot {
  min-width: 80px; min-height: 62px; padding: 9px 12px; border: 3px dashed rgba(15,118,110,0.4); border-radius: 18px;
  display: grid; place-items: center; background: rgba(255,255,255,0.62); color: rgba(81,50,26,0.42); font-size: 24px; font-weight: 1000;
}
.syll-slot.filled { border-style: solid; background: #fef9c3; color: #365314; animation: syllPop 0.2s ease; }
.syll-slot.correct { border-style: solid; background: #d9f99d; color: #365314; pointer-events: none; }
.syll-slot.wrong-slot { border-color: #fb7185; background: #fecaca; animation: shake 0.3s ease; }
.syll-slot.returning { transition: background 0.35s ease, border-color 0.35s ease; }
.syll-choice-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; max-width: 520px; width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 8px; padding: 4px 0 16px;
}
.syll-choice {
  min-height: 62px; border: none; border-radius: 18px; padding: 9px 6px; background: linear-gradient(145deg, #fff7ad, #fbbf24);
  color: #51321a; font-family: var(--font); font-size: 24px; font-weight: 1000;
  box-shadow: 0 7px 0 rgba(81,50,26,0.22), 0 10px 16px rgba(81,50,26,0.16); transition: transform 0.12s, box-shadow 0.12s, opacity 0.18s;
}
.syll-choice:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(81,50,26,0.24), 0 6px 10px rgba(81,50,26,0.13); }
.syll-choice.used, .syll-choice:disabled { opacity: 0.45; }
.syll-choice.correct { background: linear-gradient(145deg, #bbf7d0, #22c55e); }
.syll-choice.wrong { background: linear-gradient(145deg, #fecaca, #fb7185); animation: shake 0.3s; }
.syll-choice.syll-dragging { opacity: 0.35; transform: scale(0.95); }
.syll-fly-back { display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
.syll-drag-clone { transition: none !important; }
.syll-slot.drag-over { border-color: #f59e0b; background: rgba(251,191,36,0.18); transform: scale(1.06); }
.syll-action-grid { flex: 0 0 auto; grid-template-columns: 1fr; max-width: 360px; padding-top: 10px; }
.syll-feedback { flex: 0 0 auto; min-height: 28px; margin-top: 6px; text-align: center; color: #0f766e; font-size: 17px; font-weight: 1000; }
.syll-done-badge { padding: 13px 18px; border-radius: 18px; background: #d9f99d; color: #365314; font-size: 18px; font-weight: 1000; box-shadow: 0 6px 0 rgba(54,83,20,0.2); }
.syll-action-btn {
  min-height: 58px; border: none; border-radius: 20px; padding: 12px 14px; background: linear-gradient(145deg, #0f766e, #14b8a6);
  color: #fff; font-family: var(--font); font-size: 17px; font-weight: 1000; box-shadow: 0 7px 0 #0a514c, 0 10px 16px rgba(15,118,110,0.2);
}
.syll-action-btn.primary { background: linear-gradient(145deg, #ff7aa8, #f97316); box-shadow: 0 7px 0 rgba(154,52,18,0.46), 0 10px 16px rgba(249,115,22,0.18); }
.syll-action-btn.secondary { background: linear-gradient(145deg, #fff7ad, #fbbf24); color: #51321a; box-shadow: 0 7px 0 rgba(81,50,26,0.24), 0 10px 16px rgba(81,50,26,0.16); }
.syll-victory-overlay {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center;
  padding: 18px; background: rgba(15,23,42,0.22); opacity: 0;
  transition: opacity 0.2s ease;
}
.syll-victory-overlay.show { opacity: 1; }
.syll-victory-dialog {
  position: relative; width: min(92vw, 380px); padding: 24px 18px 18px; border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(236,253,245,0.96));
  box-shadow: 0 14px 0 rgba(81,50,26,0.12), 0 24px 46px rgba(15,23,42,0.24);
  text-align: center; transform: translateY(10px) scale(0.94);
  transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1);
}
.syll-victory-overlay.show .syll-victory-dialog { transform: translateY(0) scale(1); }
.syll-victory-close {
  position: absolute; right: 12px; top: 10px; width: 38px; height: 38px; border: none; border-radius: 14px;
  background: rgba(15,118,110,0.12); color: #0f766e; font-size: 26px; font-weight: 1000;
}
.syll-victory-trophy { width: 72px; height: 72px; margin: 0 auto 8px; border-radius: 24px; display: grid; place-items: center; background: linear-gradient(145deg, #fff7ad, #fbbf24); font-size: 42px; box-shadow: 0 8px 0 rgba(81,50,26,0.18); }
.syll-victory-dialog h3 { margin: 6px 0 2px; color: #0f766e; font-size: 28px; font-weight: 1000; }
.syll-victory-dialog p { margin: 0 0 14px; color: rgba(81,50,26,0.76); font-size: 15px; font-weight: 900; }
.syll-victory-actions { display: grid; gap: 10px; }
@keyframes syllPop { 0% { transform: scale(0.86) rotate(-3deg); } 70% { transform: scale(1.08) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@media (max-width: 420px) {
  .syllables-title { font-size: 20px; }
  .syll-level-menu, .syll-game { padding-inline: 12px; }
  .syll-map-title { font-size: 24px; }
  .syll-map { min-height: 380px; gap: 10px; }
  .syll-map-card { min-height: 98px; padding: 12px 40px 12px 84px; border-radius: 26px; }
  .syll-map-badge { left: 16px; top: 20px; width: 52px; height: 52px; font-size: 28px; }
  .syll-map-card b { font-size: 20px; }
  .syll-hero-img, .syll-emoji-img { width: 165px; height: 165px; font-size: 100px; }
  .syll-formula-part, .syll-formula-word { min-width: 38px; min-height: 36px; padding: 5px 7px; font-size: 18px; border-radius: 12px; }
  .syll-formula-word { min-width: 64px; }
  .syll-formula-plus { font-size: 16px; }
  .syll-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .syll-choice { min-height: 56px; font-size: 22px; }
}

/* Heca Dunyasi adventure polish */
.syll-map-hero {
  position: relative; max-width: 440px; margin: 0 auto 12px; padding: 12px 14px; border-radius: 28px;
  display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.58);
  box-shadow: 0 8px 18px rgba(81,50,26,0.08);
}
.syll-map-owl {
  width: 64px; height: 64px; border-radius: 23px; display: grid; place-items: center;
  background: linear-gradient(145deg, #fff7ad, #fbbf24); font-size: 38px;
  box-shadow: 0 7px 0 rgba(81,50,26,0.22), 0 10px 18px rgba(81,50,26,0.12);
  animation: syllOwlFloat 2.4s ease-in-out infinite;
}
.syll-map-title { margin-top: 0; text-align: left; line-height: 1; }
.syll-map-sub { margin: 5px 0 0; text-align: left; }
.syll-world-progress {
  position: absolute; right: 14px; bottom: -14px; min-width: 112px; padding: 7px 10px;
  border-radius: 999px; background: rgba(255,255,255,0.92);
  box-shadow: 0 5px 0 rgba(81,50,26,0.12), 0 9px 16px rgba(81,50,26,0.1);
}
.syll-world-progress span {
  display: block; margin-bottom: 4px; color: #0f766e; font-size: 12px; font-weight: 1000; text-align: center;
}
.syll-world-progress i {
  display: block; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(15,118,110,0.13);
}
.syll-world-progress b {
  display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #57d6a3, #facc15);
  transition: width 0.35s ease;
}
.syll-master-badge {
  position: absolute; left: 76px; bottom: -14px; padding: 7px 11px; border-radius: 999px;
  background: linear-gradient(145deg, #fff7ad, #fbbf24); color: #51321a;
  font-size: 12px; font-weight: 1000;
  box-shadow: 0 5px 0 rgba(81,50,26,0.14), 0 9px 16px rgba(81,50,26,0.1);
}
.syll-map { height: calc(100% - 100px); min-height: 390px; }
.syll-map-card {
  transition: transform 0.16s, box-shadow 0.16s, filter 0.16s;
}
.syll-map-card:not(.locked):active {
  transform: translateY(6px);
  box-shadow: 0 4px 0 rgba(81,50,26,0.08), 0 10px 18px rgba(81,50,26,0.1);
}
.syll-map-card::after { content: '\203A'; font-size: 44px; }
.syll-map-card.locked::after { content: '\1F512'; font-size: 25px; }
.syll-map-card.done {
  border-color: rgba(87,214,163,0.85);
  background: linear-gradient(145deg, rgba(255,255,255,0.88), rgba(220,252,231,0.84));
}
.syll-map-level-icon {
  position: absolute; left: 58px; bottom: 15px; width: 30px; height: 30px; border-radius: 12px;
  display: grid; place-items: center; background: rgba(255,255,255,0.86);
  font-size: 17px; box-shadow: 0 4px 0 rgba(81,50,26,0.12);
}
.syll-helper {
  flex: 0 0 auto; max-width: 520px; width: 100%; margin: 0 auto 8px; display: none; align-items: center; gap: 9px;
}
.syll-helper-face {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(145deg, #fff7ad, #fbbf24); font-size: 42px;
  box-shadow: 0 5px 0 rgba(81,50,26,0.22), 0 9px 15px rgba(81,50,26,0.12);
  flex-shrink: 0;
}
.syll-helper-bubble {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 17px; background: rgba(255,255,255,0.82);
  color: #0f766e; font-size: 14px; font-weight: 1000; line-height: 1.15; box-shadow: 0 5px 0 rgba(15,118,110,0.09);
}
.syll-helper.talk .syll-helper-face { animation: syllHelperNod 0.36s ease; }
.syll-helper.talk .syll-helper-bubble { animation: syllBubblePop 0.26s ease; }
.syll-done-card {
  width: min(100%, 300px); margin: 0 auto; padding: 14px 16px; border-radius: 22px;
  background: linear-gradient(145deg, #dcfce7, #fff7ad); color: #365314;
  box-shadow: 0 8px 0 rgba(54,83,20,0.18), 0 14px 22px rgba(81,50,26,0.12);
}
.syll-done-card b { display: block; font-size: 20px; font-weight: 1000; color: #0f766e; }
.syll-done-card small { display: block; margin-top: 3px; font-size: 13px; font-weight: 1000; color: rgba(81,50,26,0.72); }
.syll-done-stars { color: #f59e0b; font-size: 24px; letter-spacing: 3px; line-height: 1; margin-bottom: 6px; }
@keyframes syllOwlFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes syllHelperNod { 0%, 100% { transform: rotate(0) scale(1); } 40% { transform: rotate(-8deg) scale(1.08); } 70% { transform: rotate(5deg) scale(1.02); } }
@keyframes syllBubblePop { 0% { transform: scale(0.96); opacity: 0.76; } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 420px) {
  .syll-map-hero { padding: 10px 12px; border-radius: 24px; }
  .syll-map-owl { width: 54px; height: 54px; font-size: 32px; border-radius: 20px; }
  .syll-map-sub { font-size: 12px; }
  .syll-map { min-height: 360px; height: calc(100% - 90px); }
  .syll-helper-face { width: 42px; height: 42px; font-size: 26px; }
  .syll-helper-bubble { font-size: 13px; padding: 8px 10px; }
}

/* Real level map: islands instead of menu cards */
.syll-map {
  min-height: 430px;
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.72) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 0 3px, transparent 4px),
    linear-gradient(145deg, #dff3ff 0%, #dff8e8 52%, #fff0bb 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.48), 0 12px 28px rgba(81,50,26,0.1);
}
.syll-map::before {
  display: none;
}
.syll-map::after {
  display: none;
}
.syll-map-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 150px;
  min-height: 130px;
  padding: 8px 8px 10px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 28px;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
}
.syll-map-card,
.syll-map-card.done,
.syll-map-card.locked {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.syll-map-card:not(.locked) {
  animation: syllMapPulse 1.9s ease-in-out infinite;
}
.syll-map-card:not(.locked):active {
  transform: translate(-50%, calc(-50% + 6px));
}
.syll-map-card::after { display: none; }
.syll-map-badge {
  display: none;
}
.syll-map-stars { display: none; }
.syll-map-card b {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.syll-map-card small {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.syll-map-card em { display: none; }
.syll-map-card.done {
  outline: none;
}
.syll-map-card.locked {
  animation: none;
}
.syll-helper-bubble {
  max-width: 100%;
  font-size: 13px;
  opacity: 0.86;
}
@keyframes syllMapPulse {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.18) brightness(1.04); }
}
@media (max-width: 420px) {
  .syll-map { min-height: 410px; }
  .syll-map-card { width: 132px; min-height: 112px; }
  .syll-map-badge { display: none; }
  .syll-map-card b { font-size: 14px; }
  .syll-map-card small { font-size: 10px; }
}

/* Classic Heca level list */
.syll-map {
  position: relative;
  max-width: 440px;
  height: calc(100% - 100px);
  min-height: 390px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 14px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.syll-map::before {
  content: '';
  display: block;
  position: absolute;
  left: 44px;
  top: 54px;
  bottom: 54px;
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #57d6a3, #6fb6ff, #ff7aa8);
  opacity: 0.28;
}
.syll-map::after { display: none; }
.syll-map-card,
.syll-map-card.done,
.syll-map-card.locked {
  position: relative;
  left: auto;
  top: auto;
  z-index: 1;
  width: 100%;
  min-height: 112px;
  border: 4px solid rgba(255,255,255,0.84) !important;
  border-radius: 30px;
  padding: 14px 16px 14px 96px;
  transform: none;
  display: block;
  background: rgba(255,255,255,0.82) !important;
  color: #51321a;
  text-align: left;
  font-family: var(--font);
  box-shadow: 0 10px 0 rgba(81,50,26,0.08), 0 18px 28px rgba(81,50,26,0.12) !important;
  animation: none;
}
.syll-map-card.done {
  border-color: rgba(87,214,163,0.85) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.88), rgba(220,252,231,0.84)) !important;
}
.syll-map-card.locked {
  opacity: 0.56;
  filter: grayscale(0.35);
}
.syll-map-card::after {
  content: '\203A';
  display: block;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #0f766e;
  font-size: 44px;
  font-weight: 1000;
}
.syll-map-card.locked::after {
  content: '\1F512';
  font-size: 25px;
}
.syll-map-badge {
  position: absolute;
  left: 18px;
  top: 22px;
  width: 58px;
  height: 58px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: var(--tone);
  color: #51321a;
  font-size: 31px;
  font-weight: 1000;
  box-shadow: 0 7px 0 rgba(81,50,26,0.22);
}
.syll-map-stars {
  display: block;
  color: #f59e0b;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
}
.syll-map-card b {
  display: block;
  margin-top: 4px;
  color: #0f766e;
  font-size: 22px;
  font-weight: 1000;
  line-height: 1.05;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.syll-map-card small {
  display: block;
  margin-top: 0;
  color: rgba(81,50,26,0.72);
  font-size: 13px;
  font-weight: 900;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.syll-map-card em {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15,118,110,0.1);
  color: #0f766e;
  font-style: normal;
  font-size: 12px;
  font-weight: 1000;
}
@media (max-width: 420px) {
  .syll-map { min-height: 360px; gap: 10px; height: calc(100% - 90px); }
  .syll-map-card,
  .syll-map-card.done,
  .syll-map-card.locked {
    min-height: 98px;
    padding: 12px 40px 12px 84px;
    border-radius: 26px;
  }
  .syll-map-badge {
    left: 16px;
    top: 20px;
    width: 52px;
    height: 52px;
    font-size: 28px;
  }
  .syll-map-card b { font-size: 20px; }
  .syll-map-card small { font-size: 12px; }
}

/* Heca final polish: compact task screen */
#syllables-screen .syllables-header {
  padding: 12px 14px 8px;
  padding-top: calc(12px + env(safe-area-inset-top));
}
#syllables-screen .back-btn,
#syllables-screen .mute-btn {
  width: 50px;
  height: 50px;
}
#syllables-screen .syllables-title {
  font-size: 22px;
}
.syll-game {
  padding-bottom: 12px;
}
.syll-game-top {
  margin-bottom: 6px;
}
.syll-helper {
  margin-bottom: 6px;
}
.syll-helper-face {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  font-size: 26px;
}
.syll-helper-bubble {
  padding: 8px 10px;
  font-size: 12px;
}
.syll-build-card,
.syll-play-card {
  margin-bottom: 8px;
  padding: 10px;
  border-radius: 24px;
}
.syll-hero-img,
.syll-emoji-img {
  width: 165px;
  height: 165px;
  border-radius: 26px;
}
.syll-emoji-img {
  font-size: 36px;
}
.syll-formula-part,
.syll-formula-word {
  min-width: 40px;
  min-height: 38px;
  padding: 5px 7px;
  border-radius: 12px;
  font-size: 19px;
}
.syll-slot {
  min-width: 80px;
  min-height: 62px;
  font-size: 24px;
}
.syll-choice-grid {
  gap: 7px;
  padding-bottom: 8px;
}
.syll-choice {
  min-height: 56px;
  border-radius: 17px;
}
@media (max-width: 420px) {
  .syll-world-progress {
    right: 10px;
    min-width: 96px;
  }
  .syll-master-badge {
    left: 68px;
  }
  .syll-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}





/* Test card for 11-20 numbers built from existing digit images */
.numbers20-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #1e40af 0%, #14b8a6 105%) !important;
}
.numbers20-card-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0.92;
  transform: rotate(-4deg) scale(1.04);
}
.numbers20-card-bg img {
  width: 68px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.32));
}
.numbers20-card-content {
  position: relative;
  z-index: 2;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.numbers20-card-title {
  font-size: 34px;
  font-weight: 1000;
  line-height: 1;
}
.numbers20-card-sub {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 900;
  opacity: 0.9;
}

/* ═══ ARIFMETIKA SCREEN ═══ */
.arifmetika-stage {
  margin: 18px 14px 8px;
  padding: 26px 14px;
  min-height: 180px;
  border-radius: 24px;
  background: rgba(255,255,255,0.75);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.arifmetika-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.arifmetika-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 160px;
  justify-content: center;
}
.arifmetika-item {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.18));
}
.arifmetika-op {
  font-size: 30px;
  font-weight: 900;
  color: var(--brown);
}
.arifmetika-result-num {
  font-size: 40px;
  font-weight: 1000;
  color: var(--green-dark, #2d7a4a);
  min-width: 44px;
  text-align: center;
}
.arifmetika-result-row {
  padding-top: 6px;
  border-top: 2px dashed rgba(0,0,0,0.12);
}
.arifmetika-learn-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 14px 0;
  gap: 10px;
}
.arifmetika-nav-btn {
  flex: 1;
  border: none;
  border-radius: 16px;
  padding: 14px;
  background: var(--green, #43A047);
  color: white;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 5px 0 rgba(0,0,0,0.18);
}
.arifmetika-nav-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.arifmetika-learn-counter {
  font-size: 15px;
  font-weight: 900;
  color: var(--brown-light);
  white-space: nowrap;
}
.arifmetika-quiz-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 6px 14px 0;
}
.arifmetika-quiz-btn {
  border: none;
  border-radius: 16px;
  padding: 18px 10px;
  background: white;
  box-shadow: var(--shadow-sm);
  font-family: var(--font);
  font-size: 26px;
  font-weight: 1000;
  color: var(--brown);
}
.arifmetika-quiz-btn.correct { background: #DFF5E1; color: var(--green-dark, #2d7a4a); box-shadow: 0 0 0 3px var(--green, #43A047); }
.arifmetika-quiz-btn.wrong { background: #FBE1DE; color: #B03020; box-shadow: 0 0 0 3px #E8634A; }
.arifmetika-quiz-done {
  font-size: 30px;
  font-weight: 1000;
  color: var(--brown);
  text-align: center;
}
.arifmetika-level-up {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 900;
  color: var(--green-dark, #2d7a4a);
  text-align: center;
}
.arifmetika-level-badge {
  font-size: 13px;
  font-weight: 900;
  color: white;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}
.arifmetika-item-removed {
  opacity: 0.25;
  filter: grayscale(1);
}

/* Pulse: brief scale-up while the matching audio segment is playing */
.arifmetika-pulse {
  animation: arifmetikaPulseKf 0.5s ease;
}
@keyframes arifmetikaPulseKf {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.46); }
  100% { transform: scale(1); }
}

.arifmetika-stage-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin: 18px 14px 8px;
}
.arifmetika-stage-wrap .arifmetika-stage { margin: 0; width: 100%; }
.arifmetika-audio-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: white;
  box-shadow: var(--shadow-sm);
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.arifmetika-audio-btn:active { transform: scale(0.94); }

/* ═══ ARIFMETIKA LEVEL SELECT ═══ */
.arifmetika-levels-hint {
  text-align: center;
  margin: 4px 14px 0;
  font-size: 15px;
  font-weight: 850;
  color: var(--brown-light);
}
.arifmetika-levels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 14px;
}
.arifmetika-level-tile {
  aspect-ratio: 1;
  border: none;
  border-radius: 22px;
  background: linear-gradient(145deg, #2d7a4a, #7bc96f);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.15), 0 10px 16px rgba(0,0,0,0.12);
}
.arifmetika-level-tile:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); }
.arifmetika-level-tile.locked {
  background: #E5E1D8;
  color: #9A8FAA;
  box-shadow: none;
}
.arifmetika-level-tile-icon { font-size: 26px; }
.arifmetika-level-tile-num { font-size: 22px; font-weight: 1000; }
.arifmetika-level-tile.shake { animation: shake 0.35s ease; }

/* ═══ NAĞILLAR ═══ */
.nagillar-hint {
  text-align: center;
  margin: 4px 14px 0;
  font-size: 15px;
  font-weight: 850;
  color: var(--brown-light);
}
.nagillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 16px 14px;
}
.nagil-tile {
  position: relative;
  min-height: 140px;
  border: none;
  border-radius: 22px;
  background: linear-gradient(145deg, #7B3FA0, #4A2090);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.15), 0 10px 16px rgba(0,0,0,0.12);
}
.nagil-tile:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); }
.nagil-tile.locked {
  background: #E5E1D8;
  color: #9A8FAA;
  box-shadow: none;
}
.nagil-tile.heard {
  outline: 3px solid #FFD700;
  outline-offset: -3px;
}
.nagil-tile-icon { font-size: 38px; }
.nagil-tile-title { font-size: 14px; font-weight: 900; text-align: center; }
.nagil-tile-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFD700;
  color: #4A2090;
  font-size: 13px;
  font-weight: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nagil-player-body {
  margin: 20px 14px;
  padding: 28px 20px;
  border-radius: 26px;
  background: rgba(255,255,255,0.75);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.nagil-player-cover { font-size: 64px; }
.nagil-player-desc {
  font-size: 15px;
  font-weight: 700;
  color: var(--brown);
  line-height: 1.4;
}
.nagil-player-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #9A8FAA;
  background: #F0EDE5;
  border-radius: 14px;
  padding: 10px 14px;
}
.nagil-player-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 340px;
}
.nagil-player-playpause-btn,
.nagil-player-stop-btn {
  flex: none;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #7B3FA0, #4A2090);
  color: white;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 5px 0 #2D1B6E;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nagil-player-playpause-btn:active,
.nagil-player-stop-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #2D1B6E; }
.nagil-player-stop-btn {
  background: linear-gradient(180deg, #C97B5A, #A5532F);
  box-shadow: 0 5px 0 #6E3418;
}
.nagil-player-stop-btn:active { box-shadow: 0 2px 0 #6E3418; }
.nagil-player-progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.nagil-player-seek {
  width: 100%;
  accent-color: #7B3FA0;
}
.nagil-player-time {
  font-size: 12px;
  font-weight: 800;
  color: var(--brown);
  text-align: center;
}
.nagil-player-text-btn {
  width: 100%;
  max-width: 260px;
  border: none;
  border-radius: 16px;
  padding: 12px;
  background: var(--cream2);
  color: var(--brown);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
}
.nagil-player-text-btn:active { transform: scale(0.97); }
.nagil-player-text {
  text-align: left;
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.6;
  color: var(--brown);
  background: rgba(255,255,255,0.9);
  border-radius: 16px;
  padding: 16px;
  max-height: 320px;
  overflow-y: auto;
}

/* ═══ ARIFMETIKA TOPIC CARD ═══ */
.arifmetika-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #2d7a4a 0%, #7bc96f 105%) !important;
}
.arifmetika-card-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0.5;
  transform: rotate(-4deg) scale(1.1);
}
.arifmetika-card-bg span {
  font-size: 46px;
  font-weight: 1000;
  color: #fff;
  text-shadow: 0 6px 10px rgba(0,0,0,0.25);
}
.arifmetika-card-content {
  position: relative;
  z-index: 2;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.arifmetika-card-title {
  font-size: 26px;
  font-weight: 1000;
  line-height: 1;
}
.arifmetika-card-sub {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 900;
  opacity: 0.9;
}

.composed-digit-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 150px;
  padding: 6px 10px;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 10%, rgba(255,255,255,0.24), transparent 70%);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6));
  cursor: pointer;
}
.composed-digit-wrap img {
  width: 66px;
  height: 92px;
  object-fit: contain;
  margin: 0 -8px;
}
.composed-digit-wrap.pressed {
  animation: composedDigitPress 0.26s cubic-bezier(0.34,1.56,0.64,1);
}
.composed-digit-label {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 900;
  color: #fff8bd;
  text-shadow: 0 3px 10px rgba(0,0,0,0.45);
}
@keyframes composedDigitPress {
  0% { transform: scale(1); }
  45% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

/* 11-50 composed number showcase */
.numbers50-grid {
  display: block;
  padding: 12px 12px 30px !important;
}
.numbers50-board {
  position: relative;
  z-index: 2;
  max-width: 430px;
  margin: 0 auto;
}
.numbers50-hero {
  position: relative;
  min-height: 285px;
  border-radius: 34px;
  padding: 16px 58px 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.52), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 24px 52px rgba(0,0,0,0.28);
}
.numbers50-hero::before {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: 28px;
  background-image:
    linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.55;
}
.numbers50-main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.numbers50-kicker {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.82);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.numbers50-main .composed-digit-wrap {
  max-width: 190px;
  padding: 8px 15px;
}
.numbers50-main .composed-digit-wrap img {
  width: 82px;
  height: 112px;
  margin: 0 -9px;
}
.numbers50-word {
  font-size: 27px;
  font-weight: 1000;
  line-height: 1;
  color: #fff8bd;
  text-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.numbers50-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 64px;
  border: 0;
  border-radius: 22px;
  background: rgba(255,255,255,0.20);
  color: white;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 0 rgba(0,0,0,0.22);
}
.numbers50-arrow:first-child { left: 10px; }
.numbers50-arrow:last-child { right: 10px; }
.numbers50-arrow:active {
  transform: translateY(calc(-50% + 6px));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 0 rgba(0,0,0,0.22);
}
.numbers50-strip {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: 310px;
  overflow-y: auto;
  padding: 2px 2px 12px;
  scrollbar-width: thin;
}
.numbers50-mini {
  min-height: 82px;
  border: 0;
  border-radius: 20px;
  background: rgba(255,255,255,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 0 rgba(0,0,0,0.20);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.numbers50-mini-digits {
  display: flex;
  align-items: center;
  justify-content: center;
}
.numbers50-mini-digits img {
  width: 32px;
  height: 43px;
  object-fit: contain;
  margin: 0 -4px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.30));
}
.numbers50-mini b {
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  font-weight: 1000;
  line-height: 1;
}
.numbers50-mini.active {
  background: linear-gradient(135deg, #fff6aa, #55d8ff);
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 0 rgba(0,0,0,0.20), 0 0 0 3px rgba(255,255,255,0.28);
}
.numbers50-mini.active b { color: #123047; }
@media (max-width: 420px) {
  .numbers50-hero { min-height: 265px; padding-inline: 52px; }
  .numbers50-main .composed-digit-wrap img { width: 74px; height: 102px; margin: 0 -9px; }
  .numbers50-word { font-size: 24px; }
  .numbers50-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .numbers50-mini { min-height: 74px; border-radius: 18px; }
  .numbers50-mini-digits img { width: 29px; height: 39px; }
}
.lesson-screen-numbers50 #spotlight { display: none !important; }

/* 11-50: fixed showcase, scrolling number bank */
.lesson-screen-numbers50 #panel-learn {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 0;
}
.lesson-screen-numbers50 .numbers50-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 8px !important;
}
.lesson-screen-numbers50 .numbers50-board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.lesson-screen-numbers50 .numbers50-hero {
  flex: 0 0 auto;
  min-height: 230px;
  padding-top: 12px;
  padding-bottom: 14px;
}
.lesson-screen-numbers50 .numbers50-strip {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-bottom: 22px;
}
.lesson-screen-numbers50 .numbers50-mini {
  min-height: 70px;
}
.lesson-screen-numbers50 .numbers50-mini b { display: none !important; }
.lesson-screen-numbers50 .numbers50-mini-digits img {
  width: 34px;
  height: 48px;
}
@media (max-width: 420px) {
  .lesson-screen-numbers50 .numbers50-hero { min-height: 218px; }
  .lesson-screen-numbers50 .numbers50-main .composed-digit-wrap img { width: 70px; height: 96px; }
  .lesson-screen-numbers50 .numbers50-word { font-size: 23px; }
  .lesson-screen-numbers50 .numbers50-mini { min-height: 64px; }
  .lesson-screen-numbers50 .numbers50-mini-digits img { width: 31px; height: 44px; }
}

/* 11-50 quiz: find the composed number */
.lesson-screen-numbers50 #panel-quiz {
  overflow-y: auto;
  padding: 0 12px 24px !important;
}
.lesson-screen-numbers50 .quiz-card {
  background: transparent;
  box-shadow: none;
  margin: 10px 0 0;
  padding: 0;
}
.lesson-screen-numbers50 .quiz-question-label {
  color: rgba(255,255,255,0.9);
  font-size: 18px;
  font-weight: 1000;
  text-align: center;
  margin: 6px 0 10px;
}
.n50q-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.n50q-card {
  position: relative;
  min-height: 190px;
  border-radius: 30px;
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,0.46), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 20px 44px rgba(0,0,0,0.26);
}
.n50q-card::before {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 24px;
  background-image:
    linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.52;
}
.n50q-word {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  color: #fff8bd;
  font-size: 24px;
  font-weight: 1000;
  text-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.n50q-option {
  min-height: 104px;
  border: 0;
  border-radius: 24px;
  background: rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 0 rgba(0,0,0,0.22), 0 15px 24px rgba(0,0,0,0.16);
  opacity: 0;
  transform: scale(0.78) translateY(12px);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease;
}
.n50q-option.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.n50q-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.34));
}
.n50q-option img {
  width: 54px;
  height: 72px;
  object-fit: contain;
  margin: 0 -7px;
}
.n50q-option.correct {
  background: linear-gradient(135deg, rgba(187,247,208,0.95), rgba(125,211,252,0.95)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 0 rgba(0,0,0,0.20), 0 0 0 3px rgba(255,255,255,0.28), 0 0 30px rgba(105,255,180,0.42) !important;
  opacity: 1 !important;
}
.n50q-option.wrong {
  background: rgba(255,100,100,0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 5px 0 rgba(120,0,0,0.26) !important;
}
.lesson-screen-numbers50 .quiz-next-btn {
  background: linear-gradient(135deg, #fff6aa, #55d8ff);
  color: #123047;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 7px 0 rgba(0,0,0,0.24), 0 14px 24px rgba(0,0,0,0.18);
}
@media (max-width: 420px) {
  .n50q-card { min-height: 176px; }
  .n50q-word { font-size: 22px; }
  .n50q-option { min-height: 92px; border-radius: 22px; }
  .n50q-option img { width: 48px; height: 64px; }
}

/* 11-50 quiz: build the number from two digits */
.n50q-build-card {
  min-height: 230px;
  gap: 8px;
}
.n50q-build-target {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  opacity: 0.32;
  filter: grayscale(0.2) drop-shadow(0 8px 14px rgba(0,0,0,0.35));
}
.n50q-build-target img {
  width: 46px;
  height: 62px;
  object-fit: contain;
  margin: 0 -5px;
}
.n50q-slots {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}
.n50q-slot {
  width: 82px;
  height: 94px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.18);
  border: 3px dashed rgba(255,255,255,0.32);
  color: rgba(255,255,255,0.68);
  font-size: 34px;
  font-weight: 1000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 0 rgba(0,0,0,0.18);
}
.n50q-slot img {
  width: 58px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.35));
}
.n50q-slot.filled {
  border-style: solid;
  background: rgba(255,255,255,0.24);
  animation: n50SlotIn 0.24s cubic-bezier(0.34,1.56,0.64,1);
}
.n50q-slot.correct {
  background: linear-gradient(135deg, rgba(187,247,208,0.95), rgba(125,211,252,0.95));
  border-color: rgba(255,255,255,0.7);
}
.n50q-slot.wrong {
  background: rgba(255,100,100,0.28);
  border-color: rgba(255,130,130,0.7);
}
@keyframes n50SlotIn {
  from { transform: scale(0.76); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}
.n50q-digit-bank {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.n50q-digit-choice {
  min-height: 92px;
  border: 0;
  border-radius: 24px;
  background: rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 0 rgba(0,0,0,0.22), 0 15px 24px rgba(0,0,0,0.16);
  opacity: 0;
  transform: scale(0.78) translateY(12px);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease;
}
.n50q-digit-choice.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.n50q-digit-choice img {
  width: 55px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.34));
}
.n50q-digit-choice.used {
  opacity: 0.42;
  transform: scale(0.94);
}
.n50q-digit-bank.shake {
  animation: shake 0.5s ease;
}
@media (max-width: 420px) {
  .n50q-build-card { min-height: 214px; }
  .n50q-slot { width: 74px; height: 86px; border-radius: 22px; }
  .n50q-slot img { width: 52px; height: 70px; }
  .n50q-digit-bank { gap: 9px; }
  .n50q-digit-choice { min-height: 82px; border-radius: 22px; }
  .n50q-digit-choice img { width: 49px; height: 66px; }
}
.n50q-build-target.solved {
  opacity: 1;
  transform: scale(1.08);
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.46));
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1), filter 0.25s ease;
}

/* 11-50 quiz compact layout so the Next button stays visible */
.lesson-screen-numbers50 .quiz-question-label {
  margin: 2px 0 6px !important;
  font-size: 16px !important;
}
.lesson-screen-numbers50 #panel-quiz {
  padding-bottom: 12px !important;
}
.lesson-screen-numbers50 .quiz-card {
  margin-top: 4px !important;
}
.lesson-screen-numbers50 .n50q-wrap {
  gap: 9px;
}
.lesson-screen-numbers50 .n50q-build-card {
  min-height: 172px;
  padding: 10px 14px 12px;
}
.lesson-screen-numbers50 .n50q-word {
  font-size: 20px;
  margin-top: 0;
}
.lesson-screen-numbers50 .n50q-build-target {
  min-height: 42px;
  margin-top: -2px;
}
.lesson-screen-numbers50 .n50q-build-target img {
  width: 34px;
  height: 46px;
  margin: 0 -4px;
}
.lesson-screen-numbers50 .n50q-slots {
  gap: 9px;
  margin-top: 0;
}
.lesson-screen-numbers50 .n50q-slot {
  width: 66px;
  height: 72px;
  border-radius: 20px;
  font-size: 28px;
}
.lesson-screen-numbers50 .n50q-slot img {
  width: 45px;
  height: 60px;
}
.lesson-screen-numbers50 .n50q-digit-bank {
  gap: 8px;
}
.lesson-screen-numbers50 .n50q-digit-choice {
  min-height: 70px;
  border-radius: 20px;
}
.lesson-screen-numbers50 .n50q-digit-choice img {
  width: 42px;
  height: 56px;
}
.lesson-screen-numbers50 .quiz-next-btn.show {
  margin-top: 8px;
  padding: 12px;
  font-size: 16px;
}
@media (max-width: 420px) {
  .lesson-screen-numbers50 .n50q-build-card { min-height: 160px; }
  .lesson-screen-numbers50 .n50q-word { font-size: 19px; }
  .lesson-screen-numbers50 .n50q-slot { width: 60px; height: 66px; }
  .lesson-screen-numbers50 .n50q-slot img { width: 40px; height: 54px; }
  .lesson-screen-numbers50 .n50q-digit-choice { min-height: 64px; }
  .lesson-screen-numbers50 .n50q-digit-choice img { width: 38px; height: 51px; }
}

/* ═══════════════════════════════════════
   SÖZLƏR SECTION — 4 modes
   ═══════════════════════════════════════ */

/* ── Screen shell ── */
.sozler-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  background: linear-gradient(135deg, #E8634A, #B84030);
  box-shadow: 0 3px 14px rgba(232,99,74,0.35);
  flex: 0 0 auto;
}
.sozler-title {
  font-size: 20px; font-weight: 900; color: white;
  text-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.sozler-prog-wrap {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 6px 16px; background: rgba(0,0,0,0.06);
}
.sozler-prog-bar {
  flex: 1; height: 8px; border-radius: 99px;
  background: rgba(255,255,255,0.3); overflow: hidden;
}
.sozler-prog-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg,#FFE066,#FFD700);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.sozler-prog-label {
  font-size: 13px; font-weight: 900; color: white; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.sozler-body {
  flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column;
  padding: 14px 14px 20px;
  background: linear-gradient(180deg,#fff8f5 0%,#fff3ef 100%);
}
#sozler-game {
  display: flex; flex-direction: column; gap: 12px;
  flex: 1; min-height: 0;
}

/* ── Topic card (on letters_words screen) ── */
.mission-card.sozler-topic-card {
  background: linear-gradient(135deg,#E8634A 0%,#B84030 100%);
  overflow: hidden; position: relative;
}
.sozler-topic-bg {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: 3px; pointer-events: none; overflow: hidden;
}
.sz-cube {
  width: 32px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  background: var(--c); font-family: var(--font); font-weight: 900; font-size: 18px;
  color: white; box-shadow: 0 var(--s,4px) 0 rgba(0,0,0,0.25);
  opacity: 0.35;
}
.sozler-topic-content { position: relative; z-index: 1; padding: 14px 16px; }
.sozler-topic-title { font-size: 22px; font-weight: 900; color: white; }
.sozler-topic-sub { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.82); margin-top: 4px; }

/* ── MENU ── */
.sozler-hero {
  display: flex; align-items: center; gap: 14px;
  background: white; border-radius: 22px; padding: 16px 18px;
  box-shadow: 0 6px 20px rgba(232,99,74,0.12);
  margin-bottom: 16px;
}
.sozler-hero-owl { font-size: 44px; line-height: 1; }
.sozler-hero-title { font-size: 20px; font-weight: 900; color: #B84030; }
.sozler-hero-sub { font-size: 13px; font-weight: 700; color: rgba(81,50,26,0.6); margin-top: 2px; }

.sozler-mode-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  flex: 1;
}
.sz-mode-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: white; border: none; border-radius: 24px; padding: 22px 18px;
  box-shadow: 0 8px 0 var(--ms,#999), 0 12px 24px rgba(0,0,0,0.1);
  cursor: pointer; text-align: left; font-family: var(--font);
  opacity: 0; transform: translateY(14px) scale(0.96);
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.25s ease;
  position: relative; overflow: hidden;
}
.sz-mode-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 22px;
  background: var(--mc); opacity: 0.08;
}
.sz-mode-card.show { opacity: 1; transform: translateY(0) scale(1); }
.sz-mode-card:active {
  transform: translateY(7px) scale(0.98);
  box-shadow: 0 1px 0 var(--ms,#999), 0 4px 10px rgba(0,0,0,0.1);
}
.sz-mode-icon { font-size: 42px; line-height: 1; margin-bottom: 6px; }
.sz-mode-title { font-size: 18px; font-weight: 900; color: var(--mc,#333); }
.sz-mode-sub { font-size: 13px; font-weight: 700; color: rgba(81,50,26,0.55); line-height: 1.3; }

/* ── SHARED: colored cube letter ── */
.sz-cube-word {
  display: flex; gap: 5px; flex-wrap: wrap; justify-content: center;
}
.sz-cube-word-lg { flex-wrap: nowrap; }
.sz-cube-letter {
  min-width: 38px; height: 44px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--cb,#E8634A);
  box-shadow: 0 5px 0 var(--cs,#B84030), 0 7px 14px rgba(0,0,0,0.18);
  font-family: var(--font); font-weight: 900; font-size: 22px;
  color: white; padding: 0 6px;
}

/* ── SHARED: audio button ── */
.sz-audio-btn {
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: linear-gradient(135deg,#E8634A,#B84030);
  color: white; font-size: 22px; cursor: pointer;
  box-shadow: 0 5px 0 #8C2010, 0 8px 18px rgba(232,99,74,0.35);
  display: grid; place-items: center;
  transition: transform 0.14s, box-shadow 0.14s;
}
.sz-audio-btn:active, .sz-audio-btn.pop {
  transform: scale(0.86) translateY(4px);
  box-shadow: 0 1px 0 #8C2010, 0 3px 8px rgba(232,99,74,0.25);
}
.sz-audio-inline { position: static; }

/* ── SHARED: feedback ── */
.sz-feedback {
  text-align: center; font-size: 17px; font-weight: 900;
  font-family: var(--font); min-height: 26px; color: #0f766e;
}
.sz-feedback.correct { color: #16a34a; }
.sz-feedback.wrong   { color: #dc2626; }

/* ── SHARED: correct / wrong on buttons ── */
@keyframes sz-shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-7px); }
  75%     { transform: translateX(7px); }
}

/* ── FINISH SCREEN ── */
.sz-finish {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: auto; padding: 28px 20px;
  background: white; border-radius: 28px;
  box-shadow: 0 10px 36px rgba(232,99,74,0.14);
  text-align: center;
}
.sz-finish-emoji { font-size: 64px; line-height: 1; }
.sz-finish-title { font-size: 28px; font-weight: 900; color: #B84030; }
.sz-finish-score { font-size: 20px; font-weight: 700; color: rgba(81,50,26,0.6); }
.sz-finish-btn {
  width: 100%; padding: 16px; border: none; border-radius: 18px;
  background: linear-gradient(135deg,#E8634A,#B84030);
  color: white; font-family: var(--font); font-size: 18px; font-weight: 900;
  box-shadow: 0 6px 0 #8C2010, 0 10px 22px rgba(232,99,74,0.3);
  cursor: pointer; transition: transform 0.14s, box-shadow 0.14s;
}
.sz-finish-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #8C2010; }
.sz-finish-btn-sec {
  background: var(--cream2,#f5e6d0);
  color: var(--brown,#51321a);
  box-shadow: 0 6px 0 rgba(81,50,26,0.15), 0 10px 20px rgba(81,50,26,0.08);
}
.sz-finish-btn-sec:active { box-shadow: 0 1px 0 rgba(81,50,26,0.15); }

/* ════════════════════════════════════════
   MODE 1 — FLASH CARDS
   ════════════════════════════════════════ */

/* ════════════════════════════════════════
   MODE 2 — BUILD WORD (кубики)
   ════════════════════════════════════════ */

/* ════════════════════════════════════════
   MODE 3 — READ & FIND
   ════════════════════════════════════════ */
.sz-read-word-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: nowrap;
}
.sz-read-task {
  text-align: center; font-size: 15px; font-weight: 700;
  color: rgba(81,50,26,0.55); margin: -4px 0 4px;
}
.sz-read-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-width: 440px; margin: 0 auto;
}
.sz-read-opt {
  border: 3px solid rgba(0,0,0,0.08); border-radius: 20px;
  background: #fafafa; padding: 8px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.08), 0 10px 20px rgba(0,0,0,0.08);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
  aspect-ratio: 1;
}
.sz-read-opt img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.sz-read-opt:active { transform: scale(0.93); box-shadow: 0 2px 0 rgba(0,0,0,0.08); }
.sz-read-opt.correct { border-color: #22c55e; box-shadow: 0 6px 0 #15803d, 0 10px 20px rgba(34,197,94,0.2); }
.sz-read-opt.wrong   { border-color: #ef4444; animation: sz-shake 0.38s ease; }

/* ════════════════════════════════════════
   MODE 4 — MATCH
   ════════════════════════════════════════ */

/* ── FLASH TEST ── */

@media (max-width: 420px) {
  .sz-cube-letter    { min-width: 32px; height: 38px; font-size: 19px; }
  .sz-read-opt       { border-radius: 16px; }
  .sozler-mode-grid  { grid-template-columns: 1fr 1fr; gap: 9px; }
}

/* ═══════════════ DRAG DROP GAME ═══════════════ */
#game-dragdrop-level {
  background: linear-gradient(160deg, #1a0a2e 0%, #2d1457 50%, #1a0a2e 100%);
  display: flex;
  flex-direction: column;
}
.dd-level-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
}
.dd-level-title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.dd-level-btn {
  width: 100%;
  max-width: 280px;
  padding: 18px 24px;
  border: none;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.3);
  transition: transform 0.12s, box-shadow 0.12s;
}
.dd-level-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.3); }
.dd-level-easy   { background: linear-gradient(135deg,#43A047,#2E7D32); color: #fff; }
.dd-level-medium { background: linear-gradient(135deg,#FB8C00,#E65100); color: #fff; }
.dd-level-hard   { background: linear-gradient(135deg,#E53935,#B71C1C); color: #fff; }

#game-dragdrop {
  background: linear-gradient(160deg, #1a0a2e 0%, #2d1457 50%, #1a0a2e 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dd-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 8px;
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.dd-title {
  flex: 1;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.dd-stats {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}
.dd-stats b { color: #FFD54F; }
.dd-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
  gap: 0;
}
.dd-field-wrap {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.dd-field {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 10px;
}
.dd-sidebar {
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  background: rgba(0,0,0,0.25);
  gap: 10px;
  overflow-y: auto;
}
.dd-bar-label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
}
.dd-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.dd-item {
  cursor: grab;
  transition: transform 0.15s, opacity 0.15s;
  user-select: none;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}
.dd-item:active { cursor: grabbing; }
.dd-item.dd-dragging { opacity: 0.25; }
.dd-item.dd-matched  { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.dd-zone {
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  transition: transform 0.15s;
  box-sizing: border-box;
}
.dd-zone.dd-hover {
  transform: scale(1.06);
}
.dd-zone.dd-matched {
  cursor: default;
}
.dd-clone {
  position: fixed;
  transform: translate(-50%, -50%) scale(1.1);
  pointer-events: none;
  z-index: 9000;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
}
.dd-silhouette {
  max-width: 88%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) opacity(0.6);
  transition: filter 0.2s;
}
.dd-zone.dd-hover .dd-silhouette {
  filter: brightness(0) opacity(0.9) drop-shadow(0 0 10px rgba(255,255,255,0.7));
}
.dd-silhouette-matched {
  filter: none !important;
  animation: dd-pop 0.38s cubic-bezier(0.34,1.56,0.64,1);
}
.dd-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.45));
}
.dd-clone .dd-img {
  width: 80px;
  height: 80px;
}
@keyframes dd-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes dd-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity:1; }
  100% { transform: translateY(160px) rotate(720deg); opacity:0; }
}

/* ═══════════════════
/* ═══════════════ SUPPORT MODAL ═══════════════ */
.support-btn { background: linear-gradient(135deg,#1565C0,#0D47A1) !important; color:#fff !important; }
.support-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.support-modal {
  background: linear-gradient(160deg,#1a0a2e,#2d1457);
  border-radius: 24px;
  padding: 24px 20px 20px;
  width: 100%; max-width: 360px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.1);
}
.support-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,0.1); border: none;
  border-radius: 50%; width: 32px; height: 32px;
  color: #fff; font-size: 14px; cursor: pointer;
}
.support-title {
  font-size: 20px; font-weight: 900; color: #fff;
  text-align: center; margin-bottom: 18px;
}
.support-types {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 16px;
}
.support-type {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 14px; padding: 12px 8px;
  color: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.support-type.active {
  background: rgba(100,180,255,0.2);
  border-color: rgba(100,180,255,0.6);
}
.support-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 14px; padding: 12px;
  color: #fff; font-size: 14px; font-family: inherit;
  margin-bottom: 10px; outline: none;
}
.support-input::placeholder { color: rgba(255,255,255,0.35); }
.support-input:focus { border-color: rgba(100,180,255,0.5); }
.support-textarea {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 14px; padding: 12px;
  color: #fff; font-size: 14px; font-family: inherit;
  resize: none; height: 100px; margin-bottom: 14px;
  outline: none;
}
.support-textarea::placeholder { color: rgba(255,255,255,0.35); }
.support-textarea:focus { border-color: rgba(100,180,255,0.5); }
.support-send-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg,#1E88E5,#1565C0);
  border: none; border-radius: 16px;
  color: #fff; font-size: 16px; font-weight: 900;
  cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,0.3);
  transition: transform 0.1s, box-shadow 0.1s;
}
.support-send-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.support-status {
  text-align: center; font-size: 13px; font-weight: 700;
  margin-top: 10px; min-height: 20px;
}

/* ═══ NƏQLIYYAT CARD ═══ */
.naq-card { padding: 0 !important; gap: 0 !important; border: none !important; background: #0D1B3E !important; overflow: hidden; min-height: 160px; flex-direction: column !important; align-items: stretch !important; position: relative !important; }
.naq-card::before { display: none !important; }
.naq-card.topic-mission-card { opacity: 1 !important; transform: none !important; }
.naq-bg { position: absolute; inset: 0; background: linear-gradient(175deg, #0D1B3E 0%, #1A2F6A 55%, #2A3F8F 80%, #E87030 100%); overflow: hidden; }
.naq-stars span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; animation: naq-twinkle 2s ease-in-out infinite; }
.naq-stars span:nth-child(1)  { top:8%;  left:10%; animation-delay:0s;    opacity:.9; }
.naq-stars span:nth-child(2)  { top:15%; left:28%; animation-delay:.4s;   opacity:.7; }
.naq-stars span:nth-child(3)  { top:6%;  left:55%; animation-delay:.8s;   opacity:.8; }
.naq-stars span:nth-child(4)  { top:18%; left:72%; animation-delay:1.1s;  opacity:.6; }
.naq-stars span:nth-child(5)  { top:10%; left:88%; animation-delay:.3s;   opacity:.9; }
.naq-stars span:nth-child(6)  { top:28%; left:18%; animation-delay:.6s;   opacity:.5; }
.naq-stars span:nth-child(7)  { top:22%; left:42%; animation-delay:1.4s;  opacity:.8; }
.naq-stars span:nth-child(8)  { top:30%; left:65%; animation-delay:.9s;   opacity:.6; }
.naq-stars span:nth-child(9)  { top:12%; left:80%; animation-delay:1.7s;  opacity:.7; }
.naq-stars span:nth-child(10) { top:25%; left:92%; animation-delay:.2s;   opacity:.5; }
@keyframes naq-twinkle { 0%,100% { opacity:.2; transform:scale(0.8); } 50% { opacity:1; transform:scale(1.3); } }
.naq-moon { position: absolute; top: 6px; right: 14px; font-size: 22px; filter: drop-shadow(0 0 6px #FFE08A); animation: naq-moon-glow 3s ease-in-out infinite; }
@keyframes naq-moon-glow { 0%,100% { filter:drop-shadow(0 0 6px #FFE08A); } 50% { filter:drop-shadow(0 0 14px #FFE08A); } }
.naq-cloud { position: absolute; font-size: 24px; opacity: .55; animation: naq-drift linear infinite; }
.naq-cloud1 { top: 22%; animation-duration: 12s; animation-delay: 0s;   }
.naq-cloud2 { top: 36%; animation-duration: 18s; animation-delay: -6s; font-size: 18px; opacity:.35; }
@keyframes naq-drift { 0% { left: -15%; } 100% { left: 110%; } }
.naq-city { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; }
.naq-building { position: absolute; bottom: 0; background: #0A1228; border-radius: 3px 3px 0 0; }
.naq-building::before { content:''; position:absolute; top:4px; left:3px; right:3px; height:4px; background:rgba(255,220,100,0.5); border-radius:1px; box-shadow: 0 8px 0 rgba(255,220,100,0.4), 0 16px 0 rgba(255,220,100,0.3); }
.naq-road { position: absolute; bottom: 0; left: 0; right: 0; height: 22px; background: #1A1A2E; border-top: 2px solid #FFD700; overflow: hidden; }
.naq-road::before { content:''; position:absolute; top:50%; left:0; right:0; height:2px; background: repeating-linear-gradient(90deg,#fff 0,#fff 14px,transparent 14px,transparent 28px); animation: naq-road-move 1s linear infinite; transform:translateY(-50%); }
@keyframes naq-road-move { 0% { transform:translateY(-50%) translateX(0); } 100% { transform:translateY(-50%) translateX(-28px); } }
.naq-car { position:absolute; bottom: 2px; font-size: 16px; animation: naq-car-move 4s linear infinite; }
.naq-bus { position:absolute; bottom: 2px; font-size: 16px; animation: naq-car-move 6s linear infinite; animation-delay: -2s; }
@keyframes naq-car-move { 0% { left:-15%; } 100% { left:110%; } }
.naq-overlay { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 22px; z-index: 2; }
.naq-title { font-size: 18px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6); text-align: center; }
.naq-card .mission-progress { background: rgba(26,47,106,0.12); }
.naq-card .mission-progress-fill { background: #2A3F8F; }
.naq-card .mission-pts { color: #2A3F8F; }
/* naq-bg children positions */
.naq-bg .naq-stars { position: absolute; inset: 0; }
.naq-bg .naq-moon { position: absolute; top: 8px; right: 14px; }
.naq-bg .naq-cloud { position: absolute; }
.naq-bg .naq-cloud1 { top: 20%; }
.naq-bg .naq-cloud2 { top: 38%; }
.naq-bg .naq-city { position: absolute; bottom: 18px; left: 0; right: 0; height: 80px; }
.naq-bg .naq-road { position: absolute; bottom: 0; left: 0; right: 0; height: 22px; background: #1A1A2E; border-top: 2px solid #FFD700; overflow: hidden; }
.naq-bg .naq-building { position: absolute; bottom: 0; background: #0A1228; border-radius: 3px 3px 0 0; }
.naq-bg .naq-car { position: absolute; bottom: 2px; font-size: 16px; animation: naq-car-move 4s linear infinite; }
.naq-bg .naq-bus { position: absolute; bottom: 2px; font-size: 16px; animation: naq-car-move 6s linear infinite; animation-delay: -2s; }

/* ═══════════════════════════════════════
   GAME: ALPHA RACE (retro LCD alphabet game)
   ═══════════════════════════════════════ */
.alpha-race-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 16px 24px;
  gap: 14px;
  overflow-y: auto;
}

.alpha-race-level-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 320px;
}
.alpha-race-level-tab {
  font-family: 'VT323', monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
  background: var(--cream2);
  border: 1.5px solid rgba(61,43,31,0.12);
  border-radius: 10px;
  padding: 8px 4px;
  color: var(--brown-light);
  cursor: pointer;
  text-align: center;
  opacity: 0.65;
}
.alpha-race-level-tab.active {
  opacity: 1;
  border-color: var(--terra);
  box-shadow: 0 0 0 1px var(--terra);
  color: var(--brown);
}
.alpha-race-level-tab small { display: block; font-size: 10px; opacity: 0.8; margin-top: 2px; }

.alpha-race-screen-frame {
  background: #101114;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.28);
  width: 100%;
  max-width: 260px;
}
.alpha-race-screen {
  background: linear-gradient(160deg, #9CB08B 0%, #8AA079 100%);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.alpha-race-screen::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.10) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.06) 100%);
  pointer-events: none;
}
#alpha-race-canvas { display: block; width: 100%; height: 100%; }

.alpha-race-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.alpha-race-lane-btn {
  width: 56px;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid rgba(61,43,31,0.12);
  background: var(--cream2);
  color: var(--brown);
  font-size: 20px;
  cursor: pointer;
}
.alpha-race-lane-btn:active { transform: translateY(2px); }

.alpha-race-action-row { display: flex; gap: 8px; }
.alpha-race-action-btn {
  font-family: 'VT323', monospace;
  font-size: 15px;
  letter-spacing: 0.03em;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(61,43,31,0.12);
  background: var(--cream2);
  color: var(--brown);
  cursor: pointer;
}
.alpha-race-action-btn.primary { background: var(--terra); color: white; border-color: var(--terra); }
.alpha-race-action-btn:active { transform: translateY(2px); }

.alpha-race-hint {
  text-align: center;
  font-size: 12px;
  color: var(--brown-light);
  opacity: 0.7;
  line-height: 1.6;
  max-width: 300px;
}

/* Экран выбора визуального стиля игры «Əlifba yarışı» */
.alpha-style-select {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 24px 20px;
}
.alpha-style-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(61,43,31,0.12);
  background: var(--cream2);
  cursor: pointer;
}
.alpha-style-card:active { transform: translateY(2px); }
.alpha-style-icon { font-size: 40px; }
.alpha-style-name { font-family: var(--font); font-weight: 800; font-size: 18px; color: var(--brown); }
.alpha-style-desc { font-family: var(--font); font-size: 13px; color: var(--brown-light); opacity: 0.75; text-align: center; }

/* ═══════════════════════════════════════
   GAME: ALPHA ROAD (2D road version of the alphabet race)
   ═══════════════════════════════════════ */
.alpha-road-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 16px 24px;
  gap: 14px;
  overflow-y: auto;
}
.alpha-road-level-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 340px;
}
.alpha-road-level-tab {
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  background: var(--cream2);
  border: 1.5px solid rgba(61,43,31,0.12);
  border-radius: 10px;
  padding: 8px 4px;
  color: var(--brown-light);
  cursor: pointer;
  text-align: center;
  opacity: 0.65;
}
.alpha-road-level-tab.active {
  opacity: 1;
  border-color: var(--terra);
  box-shadow: 0 0 0 1px var(--terra);
  color: var(--brown);
}
.alpha-road-level-tab small { display: block; font-size: 10px; font-weight: 600; opacity: 0.8; margin-top: 2px; }

.alpha-road-stage-frame {
  background: #fff;
  border: 1px solid rgba(61,43,31,0.10);
  border-radius: 24px;
  padding: 12px;
  box-shadow: 0 16px 32px rgba(61,43,31,0.14);
  width: 100%;
  max-width: 340px;
  /* Canvas стал выше (не осталось отдельного ряда кнопок ускорения под ним),
     поэтому ограничиваем высоту фрейма экраном телефона, а не только шириной —
     иначе игровое поле может не влезть на маленьком экране по высоте. */
  max-height: calc(100dvh - 220px);
}
.alpha-road-stage-frame .alpha-road-stage-wrap,
.alpha-road-stage-frame #alpha-road-canvas {
  max-height: calc(100dvh - 244px);
  width: auto;
  margin: 0 auto;
}
.alpha-road-stage-wrap { position: relative; }
#alpha-road-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  touch-action: none;
}

.alpha-road-pause-btn {
  position: absolute;
  top: 3%;
  left: 11.1%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.18);
  color: #FFFFFF;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.alpha-road-pause-btn:active { transform: translateX(-50%) translateY(1px); }

.alpha-road-start-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font);
  font-weight: 800;
  font-size: 18px;
  padding: 14px 32px;
  border-radius: 16px;
  border: none;
  background: var(--terra);
  color: white;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}
.alpha-road-start-btn:active { transform: translate(-50%, -50%) translateY(2px); }
.alpha-road-start-btn[hidden] { display: none; }

.alpha-road-pause-menu {
  position: absolute;
  inset: 0;
  background: rgba(20,16,12,0.55);
  border-radius: 14px;
  display: none;
  align-items: center;
  justify-content: center;
}
.alpha-road-pause-menu.show { display: flex; }
.alpha-road-pause-box {
  background: #fff;
  border-radius: 18px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.3);
}
.alpha-road-pause-title {
  font-family: var(--font);
  font-weight: 800;
  font-size: 20px;
  text-align: center;
  color: var(--brown);
  margin-bottom: 4px;
}

/* Туториал жестов — показывается один раз при первом заходе в «Əlifba yolu».
   Полупрозрачная плашка поверх canvas с плавающим пальцем, демонстрирующим
   по очереди: свайп влево, вправо, вверх (ускорение), вниз (замедление). */
.alpha-road-tutorial {
  position: absolute;
  inset: 0;
  background: rgba(20,16,12,0.72);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 5;
}
.alpha-road-tutorial[hidden] { display: none; }
.alpha-road-tutorial-finger {
  font-size: 44px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  animation: alphaRoadFingerFloat 1.1s ease-in-out infinite;
}
@keyframes alphaRoadFingerFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--finger-dx, 0), var(--finger-dy, 0)); }
}
.alpha-road-tutorial-text {
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-align: center;
  max-width: 220px;
  line-height: 1.5;
}
.alpha-road-tutorial-skip {
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 8px 18px;
  cursor: pointer;
}