body{
  font-family: Arial, sans-serif;
  text-align:center;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,245,200,0.95) 0%, rgba(255,245,200,0) 22%),
    radial-gradient(circle at 85% 8%, rgba(215,241,255,0.95) 0%, rgba(215,241,255,0) 24%),
    radial-gradient(circle at 50% 100%, rgba(236,226,255,0.65) 0%, rgba(236,226,255,0) 28%),
    linear-gradient(180deg,#eefaff 0%,#e3f6ff 45%,#d8f0ff 100%);
  margin:0;
  padding:20px;
  color:#17324c;
}
.screen{
  max-width:540px;
  margin:auto;
  background:rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding:22px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,0.65);
  box-shadow:
    0 18px 40px rgba(34,64,104,0.12),
    0 2px 0 rgba(255,255,255,0.6) inset;
  animation:fadeIn 0.30s ease;
}
@keyframes fadeIn{
  from{opacity:0; transform:translateY(8px) scale(0.992);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.hidden{display:none !important;}
.premierSurface{position:relative; overflow:hidden;}
.subtitle{
  margin-top:-5px;
  color:#55708e;
  line-height:1.4;
}
.smallSubtitle{
  color:#6a84a1;
  font-size:14px;
}
.topRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.menuHeaderBlock{text-align:right;}
.smallBtn,.tabBtn,button{
  border:none;
  cursor:pointer;
  border-radius:14px;
  background:linear-gradient(180deg,#ffe66b 0%,#ffd93d 100%);
  color:#17324c;
  box-shadow:
    0 8px 16px rgba(255,217,61,0.32),
    0 2px 0 rgba(255,255,255,0.45) inset;
  transition:transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}
.smallBtn:active,.tabBtn:active,button:active,.categoryCard:active,.itemBtn:active,.choiceBtn:active,.lessonCard:active{
  transform:scale(0.98);
}
.smallBtn{
  padding:10px 16px;
  font-size:15px;
}
button{
  margin:8px;
  padding:12px 18px;
  font-size:16px;
}
.premierHero,.heroCard{
  position:relative;
  background:
    linear-gradient(135deg, rgba(255,249,214,0.98) 0%, rgba(245,252,255,0.98) 55%, rgba(237,246,255,0.98) 100%);
  border-radius:28px;
  padding:20px;
  text-align:left;
  margin-bottom:18px;
  box-shadow:
    0 12px 24px rgba(75,120,170,0.10),
    0 1px 0 rgba(255,255,255,0.85) inset;
}
.heroTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.heroTop h1{
  margin:0 0 6px 0;
  font-size:36px;
  letter-spacing:-0.6px;
}
.heroBadge{
  background:rgba(255,255,255,0.88);
  border-radius:999px;
  padding:9px 14px;
  font-size:12px;
  font-weight:bold;
  color:#45627f;
  box-shadow:0 6px 14px rgba(60,97,141,0.08);
  white-space:nowrap;
}
.floatingStars{
  position:absolute;
  right:18px;
  bottom:18px;
  display:flex;
  gap:8px;
  opacity:0.75;
  font-size:18px;
}
.heroMascots{
  display:flex;
  gap:12px;
  margin-top:14px;
}
.mascot{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.82);
  border-radius:16px;
  font-size:24px;
  box-shadow:0 8px 16px rgba(56,93,134,0.08);
}
.heroStats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:18px;
}
.miniStat,.statCard,.panel,.traceHeaderCard,.stickerRewardCard,.celebrationPanel,.lessonIntroCard,.learnHero,.gamePrompt,.albumSticker{
  background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(245,250,255,0.95));
  border-radius:20px;
  padding:14px;
  box-shadow:
    0 8px 18px rgba(72,106,145,0.08),
    0 1px 0 rgba(255,255,255,0.8) inset;
}
.miniStatLabel,.statLabel,.progressLabel,.stickerTitle{
  font-size:13px;
  color:#67809b;
}
.miniStatValue,.statValue{
  font-size:28px;
  font-weight:bold;
  margin-top:4px;
}
.categoryGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:18px;
}
.categoryCard{
  border:none;
  border-radius:24px;
  padding:18px 14px;
  cursor:pointer;
  text-align:left;
  min-height:132px;
  box-shadow:
    0 12px 24px rgba(70,107,148,0.08),
    0 1px 0 rgba(255,255,255,0.75) inset;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.categoryCard:hover{box-shadow:0 16px 28px rgba(70,107,148,0.11);}
.lettersCard{background:linear-gradient(135deg,#fff6c6,#fffdf1);}
.numbersCard{background:linear-gradient(135deg,#ddf6ff,#f3fcff);}
.progressCard{background:linear-gradient(135deg,#f4ecff,#fbf7ff);}
.stickersCard{background:linear-gradient(135deg,#ffe8f3,#fff6fb);}
.pathCard{background:linear-gradient(135deg,#e8fff2,#f6fff9);}
.gameCard{background:linear-gradient(135deg,#fff0df,#fff8f2);}
.categoryIcon{font-size:30px;margin-bottom:8px;}
.categoryTitle{
  font-size:22px;
  font-weight:bold;
  margin-bottom:8px;
}
.categoryText{
  font-size:15px;
  color:#5e7895;
  line-height:1.35;
}
#itemGrid,.gameChoices{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:18px;
}
.itemBtn,.choiceBtn{
  font-size:24px;
  padding:16px 0;
  border-radius:16px;
  border:none;
  background:linear-gradient(180deg,#ffe66b 0%,#ffd93d 100%);
  cursor:pointer;
  font-weight:bold;
  box-shadow:
    0 10px 18px rgba(255,217,61,0.24),
    0 2px 0 rgba(255,255,255,0.45) inset;
}
.lessonList{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.lessonCard{
  border:none;
  border-radius:20px;
  background:linear-gradient(135deg,#f8fbff,#eef8ff);
  padding:16px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(75,117,160,0.08);
}
.lessonTitle{
  font-size:18px;
  font-weight:bold;
}
.lessonText{
  color:#5f7895;
  margin-top:4px;
}
.traceArea{
  position:relative;
  width:320px;
  height:320px;
  margin:14px auto 0 auto;
  border-radius:24px;
  background:linear-gradient(180deg,#fbfdff,#f1f8fd);
  box-shadow:
    inset 0 0 0 1px #ebf1f6,
    0 10px 22px rgba(70,108,148,0.08);
}
#traceSvg,#canvas{
  position:absolute;
  left:0;
  top:0;
}
#canvas{touch-action:none;}
h1{margin-bottom:10px;}
h2{
  font-size:64px;
  margin:6px 0 0 0;
}
h3{
  color:#2f9e44;
  margin:5px 0 2px 0;
}
#stars{
  font-size:22px;
  font-weight:bold;
}
.progressWrap{
  margin:14px 8px 6px 8px;
}
.progressBar{
  width:100%;
  height:16px;
  background:#e6eef6;
  border-radius:999px;
  overflow:hidden;
  box-shadow: inset 0 1px 3px rgba(40,70,110,0.08);
}
#progressFill{
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#6bcB77,#4dabf7);
  border-radius:999px;
  transition:width 0.12s ease;
}
.messageText{
  min-height:24px;
  font-weight:bold;
  color:#58718d;
  margin-top:10px;
}
.dotStart{fill:#ff4d4d;}
.dotGuide{fill:#4dabf7;}
.dotFinish{fill:#f4b400;}
.dotPassed{fill:#2f9e44 !important;}
.strokeNumCircle{
  fill:white;
  stroke:#2c5282;
  stroke-width:1.5;
}
.strokeNumText{
  font-size:12px;
  font-weight:bold;
  fill:#2c5282;
  text-anchor:middle;
  dominant-baseline:middle;
}
.statsGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:18px;
}
.twoColumn{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:18px;
}
.sectionTitle{
  font-weight:bold;
  margin-bottom:10px;
}
.badgePill,.badgeItem,.stickerItem{
  background:linear-gradient(180deg,#fff7cf,#fff1a6);
  color:#5d4e14;
  border-radius:999px;
  padding:8px 12px;
  display:inline-block;
  font-weight:bold;
  box-shadow:0 6px 12px rgba(255,217,61,0.14);
}
.badgeList,.stickerShelf{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.bigSticker{
  font-size:42px;
  margin-top:6px;
}
.progressHeading{
  font-size:34px;
  margin-top:16px;
}
.albumGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.celebrationIcon{font-size:56px;}
.lessonRewardRow{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin:18px 0;
}
.rewardBox{
  background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(250,252,255,0.98));
  border-radius:20px;
  padding:14px;
  box-shadow:0 10px 18px rgba(77,110,150,0.08);
}
.rewardBig{font-size:34px;}
.gameTabs{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:12px;
}
.lessonStepper{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:8px;
}
.stepDot{
  width:14px;
  height:14px;
  border-radius:999px;
  background:#dce9f5;
  box-shadow: inset 0 1px 2px rgba(63,95,129,0.08);
}
.stepDot.active{background:#4dabf7;}
.stepDot.done{background:#6bcB77;}
.learnCard{
  background:linear-gradient(135deg,#fffaf0,#f6fcff);
}
.learnBig{
  font-size:72px;
  font-weight:bold;
  margin:6px 0;
}
.learnMeaning{
  font-size:22px;
  color:#2f9e44;
  margin-top:6px;
}
.learnActions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:16px;
}
.learnHint{
  margin-top:12px;
  color:#5d7895;
  font-size:14px;
}


.shapesCard{background:linear-gradient(135deg,#eef0ff,#f9f8ff);}
.shapeChoiceSvg{
  width:54px;
  height:54px;
  display:block;
  margin:auto;
}


/* Shapes visual emphasis */
#learnBig{
  font-size: 98px !important;
  line-height: 1;
}
#itemDisplay{
  font-size: 92px !important;
  line-height: 1;
}
#learnMeaning{
  font-size: 20px !important;
}
#wordDisplay{
  font-size: 24px !important;
}


/* Shapes should feel primary */
#learnBig{
  font-size: 120px !important;
  line-height: 1;
  font-weight: 700;
}
#itemDisplay{
  font-size: 112px !important;
  line-height: 1;
  font-weight: 700;
}
#learnMeaning{
  font-size: 18px !important;
  color: #2f9e44 !important;
  margin-top: 10px !important;
}
#wordDisplay{
  font-size: 20px !important;
  color: #2f9e44 !important;
  margin-top: 10px !important;
}


/* Shape menu symbols should read clearly */
.itemBtn{
  min-height: 86px;
}


.colorsCard{background:linear-gradient(135deg,#fff2de,#fff9f1);}
.colorSwatch{
  width:54px;
  height:54px;
  border-radius:14px;
  display:block;
  margin:auto;
  border:3px solid rgba(0,0,0,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}


.countingCard{background:linear-gradient(135deg,#eef8ea,#fbfff8);}
.countingObjects{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:18px auto 10px;
  max-width:280px;
}
.countObj{
  font-size:42px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
}


.countingHub{
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,252,255,0.96));
}
.countingHero{
  margin-top:16px;
  padding:20px 16px 18px;
  border-radius:24px;
  background:linear-gradient(135deg,#fff8d5 0%, #eef9ff 100%);
  box-shadow:0 10px 22px rgba(72,106,145,0.08);
}
.countingHeroIcons{
  display:flex;
  justify-content:center;
  gap:12px;
  font-size:30px;
  margin-bottom:10px;
}
.countingPreviewRow{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 8px;
}
.countBubble{
  width:46px;
  height:46px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-size:20px;
  color:#17324c;
  background:linear-gradient(180deg,#ffe66b 0%,#ffd93d 100%);
  box-shadow:0 8px 14px rgba(255,217,61,0.24);
}
.countingCards{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.countingModeCard, .countingTipCard{
  border:none;
  border-radius:24px;
  padding:18px;
  text-align:left;
  box-shadow:0 10px 22px rgba(72,106,145,0.08);
}
.countingModeCard{
  background:linear-gradient(135deg,#f2fbff 0%, #e7f8ef 100%);
  cursor:pointer;
}
.countingTipCard{
  background:linear-gradient(135deg,#fff7e0 0%, #fffdf6 100%);
}
.countingModeIcon{
  font-size:30px;
  margin-bottom:8px;
}
.countingModeTitle{
  font-size:28px;
  font-weight:800;
  color:#17324c;
  margin-bottom:6px;
}
.countingModeText{
  font-size:18px;
  line-height:1.4;
  color:#5b7794;
}


.lowercaseCard{background:linear-gradient(135deg,#eef4ff,#f8fbff);}
.upperLowerPair{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.upperChip, .lowerChip{
  min-width:72px;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,0.96),rgba(245,250,255,0.96));
  box-shadow:0 8px 18px rgba(72,106,145,0.08);
  font-size:46px;
  font-weight:700;
  color:#17324c;
}
.lowerChip{color:#2f9e44;}


.lowercaseCard .categoryIcon{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #2f9e44;
}
#learnBig{
  font-size: 118px !important;
  line-height: 1;
}
#itemDisplay{
  font-size: 110px !important;
  line-height: 1;
}
#learnMeaning{
  font-size: 22px !important;
  margin-top: 12px !important;
}
#wordDisplay{
  font-size: 24px !important;
  margin-top: 12px !important;
}


/* Mini-game tabs layout fix */
.gameTabs{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:10px !important;
  margin-top:12px !important;
  width:100% !important;
}
.tabBtn{
  flex:1 1 140px !important;
  max-width:160px !important;
  min-width:120px !important;
  white-space:normal !important;
  line-height:1.2 !important;
  padding:12px 14px !important;
  text-align:center !important;
  margin:0 !important;
}


.alphabetCard{background:linear-gradient(135deg,#eef3ff,#fbfcff);}
.alphabetCard .categoryIcon{
  font-size:30px;
  font-weight:800;
  letter-spacing:1px;
  color:#17324c;
}
.alphabetHero{
  padding-top:22px;
  padding-bottom:18px;
}
.upperLowerPairDisplay{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:20px;
  line-height:1;
}
.pairUpper{
  font-size:108px;
  font-weight:800;
  color:#17324c;
}
.pairLower{
  font-size:92px;
  font-weight:800;
  color:#2f9e44;
}
.tracePairRow{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:4px;
}
.miniPairUpper{
  font-size:30px;
  font-weight:800;
  color:#17324c;
}
.miniPairLower{
  font-size:28px;
  font-weight:800;
  color:#2f9e44;
}


.traceChoiceLabel{
  font-size:14px;
  color:#5d7895;
  margin-top:10px;
  font-weight:700;
}


.learnActionPanel{
  margin-top:18px;
}
.learnPrimaryRow,
.learnSecondaryRow{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.learnSecondaryRow{
  margin-top:14px;
}
.traceChoiceCard{
  margin:14px auto 0;
  max-width:520px;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(245,250,255,0.98));
  box-shadow:0 10px 22px rgba(72,106,145,0.08);
}
.traceChoiceTitle{
  font-size:15px;
  font-weight:700;
  color:#5c7694;
  margin-bottom:12px;
  text-align:center;
}
.traceChoiceRow{
  display:grid;
  grid-template-columns:repeat(2,minmax(140px,1fr));
  gap:12px;
}
.premierBtn{
  border:none;
  cursor:pointer;
  border-radius:18px;
  padding:14px 18px;
  font-size:16px;
  font-weight:700;
  color:#17324c;
  background:linear-gradient(180deg,#ffe66b 0%,#ffd93d 100%);
  box-shadow:
    0 10px 18px rgba(255,217,61,0.24),
    0 2px 0 rgba(255,255,255,0.42) inset;
  transition:transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}
.premierBtn:active{
  transform:scale(0.98);
}
.audioBtn{
  min-width:220px;
}
.traceChoiceBtn{
  min-height:58px;
}
.secondaryBtn{
  min-width:150px;
  background:linear-gradient(180deg,#fff2ad 0%,#ffe06a 100%);
}
.learnHint{
  margin-top:16px;
  text-align:center;
}

@media (max-width: 560px){
  .traceChoiceRow{
    grid-template-columns:1fr;
  }
  .audioBtn{
    min-width:unset;
    width:100%;
  }
  .secondaryBtn{
    flex:1 1 140px;
  }
}


.guidedFlowPanel{
  margin-top: 20px;
}
.stepLabel{
  text-align:center;
  font-size:15px;
  font-weight:800;
  color:#5c7694;
  margin-bottom:10px;
}
.guidedTraceCard{
  border:1px solid rgba(90,120,160,0.08);
}
.guidedTraceRow{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.primaryTraceBtn{
  min-height:64px;
  font-size:18px;
  background:linear-gradient(180deg,#ffe66b 0%,#ffd93d 100%);
  box-shadow:
    0 12px 22px rgba(255,217,61,0.28),
    0 2px 0 rgba(255,255,255,0.42) inset;
}
.secondaryTraceBtn{
  min-height:56px;
  font-size:16px;
  background:linear-gradient(180deg,#fff2ad 0%,#ffe06a 100%);
}
.guidedNavRow{
  justify-content:center;
}
.guidedNavRow .secondaryBtn{
  min-width:160px;
}
.audioBtn{
  min-width:240px;
}
@media (min-width: 700px){
  .guidedTraceRow{
    grid-template-columns:1fr 1fr;
  }
}


.audioBtn{
  min-width:74px !important;
  width:74px !important;
  height:74px !important;
  padding:0 !important;
  border-radius:20px !important;
  font-size:28px !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stepLabel{display:none !important;}


.pairSoundBtn{
  border:none;
  background:transparent;
  padding:0;
  margin:0 auto;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.miniPairSoundBtn{
  margin:0 auto 4px;
}
.objectSoundBtn,
.traceObjectBtn{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  margin:10px auto 0;
  display:block;
  font-weight:700;
  text-align:center;
}
.objectSoundBtn{
  font-size:22px !important;
  color:#2f9e44 !important;
}
.traceObjectBtn{
  font-size:24px !important;
  color:#2f9e44 !important;
}
.visualPrompt{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:110px;
}
.promptLabel{
  font-size:15px;
  font-weight:700;
  color:#5c7694;
}
.promptObject{
  font-size:56px;
  line-height:1;
}


.objectSoundBtn{
  font-size:54px !important;
  line-height:1 !important;
  min-height:60px;
}


.objectSoundBtn{
  font-size:30px !important;
  line-height:1.2 !important;
  min-height:44px;
}


/* ===== UI Polish Pass ===== */
body{
  background:
    radial-gradient(circle at 10% 8%, rgba(255,245,194,0.95) 0%, rgba(255,245,194,0) 18%),
    radial-gradient(circle at 88% 10%, rgba(214,242,255,0.92) 0%, rgba(214,242,255,0) 22%),
    radial-gradient(circle at 50% 100%, rgba(242,229,255,0.7) 0%, rgba(242,229,255,0) 26%),
    linear-gradient(180deg,#effaff 0%,#e1f5ff 45%,#d9efff 100%) !important;
}

.screen{
  border-radius: 32px !important;
  box-shadow:
    0 20px 42px rgba(47,88,132,0.14),
    0 2px 0 rgba(255,255,255,0.8) inset !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
}

.heroCard,
.traceHeaderCard,
.learnHero,
.lessonIntroCard,
.gamePrompt,
.stickerRewardCard,
.celebrationPanel,
.panel,
.statCard,
.miniStat,
.albumSticker{
  border-radius: 24px !important;
  box-shadow:
    0 12px 24px rgba(73,108,146,0.09),
    0 1px 0 rgba(255,255,255,0.82) inset !important;
}

.heroCard{
  background:
    linear-gradient(135deg, rgba(255,249,219,0.98) 0%, rgba(245,252,255,0.98) 60%, rgba(238,246,255,0.98) 100%) !important;
  padding: 22px !important;
}

.heroTop h1{
  font-size: 38px !important;
  letter-spacing: -0.8px;
}

.heroBadge{
  background: linear-gradient(180deg,#ffffff 0%,#f4fbff 100%) !important;
  color:#4d6885 !important;
  padding:10px 15px !important;
  border-radius:999px !important;
  box-shadow: 0 8px 16px rgba(69,104,144,0.08) !important;
}

.categoryGrid{
  gap: 16px !important;
}

.categoryCard{
  min-height: 138px !important;
  border-radius: 26px !important;
  box-shadow:
    0 14px 26px rgba(74,109,146,0.09),
    0 1px 0 rgba(255,255,255,0.78) inset !important;
  transform: translateY(0);
}

.categoryCard:hover{
  transform: translateY(-1px);
}

.categoryTitle{
  font-size: 23px !important;
  letter-spacing: -0.2px;
}

.categoryText{
  font-size: 15px !important;
  line-height: 1.4 !important;
}

.itemBtn,
.choiceBtn{
  border-radius: 18px !important;
  min-height: 82px;
  font-size: 28px !important;
  box-shadow:
    0 10px 18px rgba(255,217,61,0.24),
    0 2px 0 rgba(255,255,255,0.44) inset !important;
}

.learnCard,
.traceHeaderCard,
.alphabetTraceHeader{
  background: linear-gradient(180deg,rgba(255,255,255,0.96),rgba(245,250,255,0.96)) !important;
}

.pairUpper{
  font-size: 116px !important;
  text-shadow: 0 4px 12px rgba(23,50,76,0.08);
}

.pairLower{
  font-size: 96px !important;
  text-shadow: 0 4px 12px rgba(47,158,68,0.08);
}

.upperLowerPairDisplay{
  gap: 24px !important;
}

.learnMeaning,
.traceObjectBtn{
  margin-top: 12px !important;
}

.objectSoundBtn,
.traceObjectBtn{
  border-radius: 18px;
}

.traceArea{
  border-radius: 28px !important;
  background: linear-gradient(180deg,#fcfeff,#f3f9fd) !important;
  box-shadow:
    inset 0 0 0 1px #ebf1f6,
    0 12px 24px rgba(70,108,148,0.09) !important;
}

.progressBar{
  height: 18px !important;
}

.progressLabel{
  font-weight: 700;
}

.controls{
  margin-top: 10px;
}

.controls button,
.premierBtn,
.smallBtn,
.tabBtn{
  border-radius: 16px !important;
  font-weight: 700 !important;
  box-shadow:
    0 10px 18px rgba(255,217,61,0.22),
    0 2px 0 rgba(255,255,255,0.42) inset !important;
}

.secondaryBtn{
  box-shadow:
    0 8px 16px rgba(255,214,102,0.18),
    0 2px 0 rgba(255,255,255,0.40) inset !important;
}

.traceChoiceCard{
  background: linear-gradient(180deg,rgba(255,255,255,0.98),rgba(247,251,255,0.98)) !important;
  border-radius: 26px !important;
  padding: 18px !important;
}

.traceChoiceTitle{
  font-size: 16px !important;
  font-weight: 800 !important;
}

.primaryTraceBtn{
  font-size: 18px !important;
  min-height: 66px !important;
}

.secondaryTraceBtn{
  min-height: 58px !important;
}

.learnSecondaryRow{
  margin-top: 16px !important;
}

.gameTabs{
  gap: 10px !important;
  margin-top: 14px !important;
}

.tabBtn{
  background: linear-gradient(180deg,#fff4b8 0%,#ffe57a 100%) !important;
  color:#17324c !important;
}

.visualPrompt{
  min-height: 128px !important;
  border-radius: 24px !important;
}

.promptLabel{
  font-size: 15px !important;
  font-weight: 800 !important;
}

.promptObject{
  font-size: 62px !important;
  filter: drop-shadow(0 4px 8px rgba(47,88,132,0.08));
}

.countingObjects{
  gap: 14px !important;
}

.countObj{
  font-size: 46px !important;
}

.badgePill,.badgeItem,.stickerItem{
  border-radius: 999px !important;
  box-shadow: 0 7px 13px rgba(255,217,61,0.16) !important;
}

.lessonCard,
.countingModeCard,
.countingTipCard{
  border-radius: 24px !important;
  box-shadow:
    0 12px 22px rgba(72,106,145,0.08),
    0 1px 0 rgba(255,255,255,0.75) inset !important;
}

.progressHeading{
  letter-spacing: -0.5px;
}

.messageText{
  font-size: 16px;
  color:#5a7490 !important;
}

@media (max-width: 560px){
  .screen{
    padding: 18px !important;
    border-radius: 28px !important;
  }
  .pairUpper{
    font-size: 94px !important;
  }
  .pairLower{
    font-size: 80px !important;
  }
  .heroTop h1{
    font-size: 32px !important;
  }
  .promptObject{
    font-size: 54px !important;
  }
}


/* ===== Alphabet menu redesign ===== */
#itemGrid{
  grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  gap: 18px !important;
  margin-top: 22px !important;
}

.itemBtn{
  min-height: 118px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg,#ffe45f 0%, #ffd63d 100%) !important;
  box-shadow:
    0 14px 26px rgba(255,214,61,0.28),
    0 3px 0 rgba(255,255,255,0.48) inset !important;
  border: 3px solid rgba(255,255,255,0.35);
  position: relative;
  overflow: hidden;
}

.itemBtn::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 18%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 18% 82%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 18%);
  pointer-events: none;
}

.itemBtn span{
  position: relative;
  z-index: 1;
}

.itemBtn:hover{
  transform: translateY(-2px) scale(1.01);
}

.itemBtn .upperLetter{
  font-size: 38px;
  font-weight: 900;
  color: #17324c;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 0 rgba(255,255,255,0.18);
}

.itemBtn .lowerLetter{
  font-size: 34px;
  font-weight: 900;
  color: #35a647;
  text-shadow: 0 2px 0 rgba(255,255,255,0.18);
}

.itemBtn .pairWrap{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#menuScreen .topRow{
  align-items: flex-start !important;
}

#menuTitle{
  font-size: 42px !important;
  letter-spacing: -0.8px;
  margin: 6px 0 2px !important;
}

#menuSubtitle{
  font-size: 18px !important;
  color: #5e7895 !important;
  margin-bottom: 4px !important;
}

#menuScreen{
  background:
    radial-gradient(circle at 12% 10%, rgba(255,243,184,0.5) 0%, rgba(255,243,184,0) 18%),
    radial-gradient(circle at 88% 12%, rgba(210,240,255,0.5) 0%, rgba(210,240,255,0) 20%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,251,255,0.96)) !important;
}

@media (max-width: 820px){
  #itemGrid{
    grid-template-columns: repeat(3, minmax(100px, 1fr)) !important;
  }
}

@media (max-width: 560px){
  #itemGrid{
    grid-template-columns: repeat(2, minmax(110px, 1fr)) !important;
    gap: 14px !important;
  }
  .itemBtn{
    min-height: 102px !important;
    border-radius: 22px !important;
  }
  .itemBtn .upperLetter{
    font-size: 34px;
  }
  .itemBtn .lowerLetter{
    font-size: 30px;
  }
}


/* ===== 3D tile + home-card upgrade ===== */
.categoryCard{
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  box-shadow:
    0 16px 0 rgba(214, 190, 74, 0.55),
    0 22px 30px rgba(73,108,146,0.10),
    0 3px 0 rgba(255,255,255,0.78) inset !important;
}

.categoryCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 20%),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 24%);
  pointer-events:none;
}

.categoryCard:active{
  transform: translateY(6px) scale(0.99) !important;
  box-shadow:
    0 9px 0 rgba(214, 190, 74, 0.55),
    0 12px 18px rgba(73,108,146,0.10),
    0 3px 0 rgba(255,255,255,0.78) inset !important;
}

.lettersCard,
.alphabetCard,
.numbersCard,
.shapesCard,
.colorsCard,
.countingCard,
.progressCard,
.stickersCard,
.pathCard,
.gameCard{
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(180deg,#ffe96f 0%, #ffd83e 100%) !important;
}

.alphabetCard .categoryIcon,
.lettersCard .categoryIcon,
.numbersCard .categoryIcon,
.shapesCard .categoryIcon,
.colorsCard .categoryIcon,
.countingCard .categoryIcon,
.progressCard .categoryIcon,
.stickersCard .categoryIcon,
.pathCard .categoryIcon,
.gameCard .categoryIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.18));
  box-shadow:
    0 8px 14px rgba(255,255,255,0.12) inset,
    0 6px 14px rgba(97,78,9,0.08);
}

#itemGrid{
  gap: 20px !important;
}

.itemBtn{
  min-height: 126px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0) 24%),
    radial-gradient(circle at 78% 84%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 24%),
    linear-gradient(180deg,#ffe96f 0%, #ffd83e 100%) !important;
  border: 3px solid rgba(255,255,255,0.34);
  box-shadow:
    0 12px 0 rgba(221, 193, 65, 0.92),
    0 22px 28px rgba(73,108,146,0.12),
    0 4px 0 rgba(255,255,255,0.50) inset !important;
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease;
}

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

.itemBtn:active{
  transform: translateY(8px) scale(0.985) !important;
  box-shadow:
    0 5px 0 rgba(221, 193, 65, 0.92),
    0 10px 16px rgba(73,108,146,0.10),
    0 4px 0 rgba(255,255,255,0.50) inset !important;
}

.itemBtn .upperLetter{
  font-size: 44px;
  font-weight: 900;
  color: #17324c;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.20),
    0 5px 10px rgba(23,50,76,0.10);
}

.itemBtn .lowerLetter{
  font-size: 38px;
  font-weight: 900;
  color: #35a647;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.22),
    0 5px 10px rgba(53,166,71,0.10);
}

.itemBtn .pairWrap{
  gap: 10px !important;
}

.heroCard{
  box-shadow:
    0 18px 0 rgba(236, 222, 139, 0.55),
    0 26px 34px rgba(47,88,132,0.10),
    0 2px 0 rgba(255,255,255,0.82) inset !important;
}

.smallBtn,
.premierBtn,
.controls button,
.tabBtn{
  transform: translateY(0);
  box-shadow:
    0 8px 0 rgba(225, 194, 70, 0.92),
    0 14px 18px rgba(255,217,61,0.20),
    0 2px 0 rgba(255,255,255,0.42) inset !important;
}

.smallBtn:active,
.premierBtn:active,
.controls button:active,
.tabBtn:active{
  transform: translateY(5px) scale(.985);
  box-shadow:
    0 4px 0 rgba(225, 194, 70, 0.92),
    0 8px 10px rgba(255,217,61,0.15),
    0 2px 0 rgba(255,255,255,0.42) inset !important;
}

.choiceBtn{
  box-shadow:
    0 8px 0 rgba(225, 194, 70, 0.92),
    0 14px 18px rgba(255,217,61,0.20),
    0 2px 0 rgba(255,255,255,0.42) inset !important;
}
.choiceBtn:active{
  transform: translateY(5px) scale(.985);
  box-shadow:
    0 4px 0 rgba(225, 194, 70, 0.92),
    0 8px 10px rgba(255,217,61,0.15),
    0 2px 0 rgba(255,255,255,0.42) inset !important;
}

@media (max-width: 560px){
  .itemBtn{
    min-height: 112px !important;
    border-radius: 26px !important;
  }
  .itemBtn .upperLetter{
    font-size: 38px;
  }
  .itemBtn .lowerLetter{
    font-size: 33px;
  }
}


/* Restore generic tile text for non-alphabet menus */
.itemBtn{
  font-size: 28px !important;
  font-weight: 800;
  color: #17324c;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.20),
    0 5px 10px rgba(23,50,76,0.08);
}

/* Alphabet tiles still use richer custom sizing */
.itemBtn .pairWrap{
  font-size: inherit;
}
.itemBtn .upperLetter{
  font-size: 44px !important;
}
.itemBtn .lowerLetter{
  font-size: 38px !important;
}

@media (max-width: 560px){
  .itemBtn{
    font-size: 24px !important;
  }
  .itemBtn .upperLetter{
    font-size: 38px !important;
  }
  .itemBtn .lowerLetter{
    font-size: 33px !important;
  }
}


/* ===== Mascot tryout ===== */
.mascotWelcomeCard{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  margin-bottom:18px;
  border-radius:24px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 24%),
    linear-gradient(135deg,#fff7cc 0%,#f5fbff 100%);
  box-shadow:
    0 12px 24px rgba(74,109,146,0.09),
    0 2px 0 rgba(255,255,255,0.72) inset;
}
.mascotWrap{
  flex:0 0 auto;
}
.mascotFace{
  position:relative;
  width:110px;
  height:96px;
  border-radius:28px;
  background:linear-gradient(180deg,#b87835 0%,#9a6129 100%);
  box-shadow:
    0 10px 0 rgba(129,77,25,0.45),
    0 10px 18px rgba(73,108,146,0.10);
}
.mascotFace::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:12px;
  height:52px;
  border-radius:26px;
  background:linear-gradient(180deg,#fff7ef 0%,#ffeedd 100%);
}
.mascotEar{
  position:absolute;
  top:-10px;
  width:28px;
  height:28px;
  border-radius:10px;
  background:linear-gradient(180deg,#b87835 0%,#9a6129 100%);
}
.mascotEarLeft{ left:16px; transform:rotate(-12deg); }
.mascotEarRight{ right:16px; transform:rotate(12deg); }
.mascotEye{
  position:absolute;
  top:34px;
  width:12px;
  height:16px;
  border-radius:999px;
  background:#17324c;
  z-index:2;
}
.mascotEyeLeft{ left:30px; }
.mascotEyeRight{ right:30px; }
.mascotBlush{
  position:absolute;
  top:54px;
  width:14px;
  height:8px;
  border-radius:999px;
  background:rgba(255,160,160,0.55);
  z-index:2;
}
.mascotBlushLeft{ left:20px; }
.mascotBlushRight{ right:20px; }
.mascotMouth{
  position:absolute;
  left:50%;
  top:58px;
  width:18px;
  height:10px;
  transform:translateX(-50%);
  border-bottom:3px solid #17324c;
  border-radius:0 0 20px 20px;
  z-index:2;
}
.mascotBook{
  position:absolute;
  right:-10px;
  bottom:-6px;
  width:46px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:800;
  color:#17324c;
  background:linear-gradient(180deg,#ffe96f 0%,#ffd83e 100%);
  box-shadow:
    0 8px 0 rgba(221,193,65,0.92),
    0 10px 14px rgba(73,108,146,0.10);
  z-index:3;
}
.mascotText{
  min-width:0;
}
.mascotName{
  font-size:24px;
  font-weight:900;
  color:#17324c;
  letter-spacing:-0.4px;
}
.mascotLine{
  margin-top:4px;
  font-size:17px;
  color:#5c7694;
  line-height:1.35;
}
@media (max-width:560px){
  .mascotWelcomeCard{
    flex-direction:column;
    text-align:center;
    gap:12px;
  }
  .mascotName{
    font-size:22px;
  }
  .mascotLine{
    font-size:16px;
  }
}


.mascotBubble{
  margin:14px auto 0;
  padding:12px 14px;
  border-radius:20px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 24%),
    linear-gradient(135deg,#fff7cf 0%,#f3fbff 100%);
  box-shadow:
    0 10px 18px rgba(72,106,145,0.08),
    0 2px 0 rgba(255,255,255,0.75) inset;
  color:#5c7694;
  line-height:1.4;
}
.gameBubble{
  margin-top:16px;
  min-height:24px;
}
.mascotBubbleName{
  font-weight:800;
  color:#17324c;
}
.messageTextInline{
  font-weight:700;
  color:#5a7490;
}


.mascotBubble{
  display:flex;
  align-items:center;
  gap:12px;
}
.mascotBubbleContent{
  flex:1;
  min-width:0;
}
.mascotBubbleAvatar{
  flex:0 0 auto;
}
.miniOwlFace{
  position:relative;
  width:54px;
  height:48px;
  border-radius:16px;
  background:linear-gradient(180deg,#b87835 0%,#9a6129 100%);
  box-shadow:
    0 5px 0 rgba(129,77,25,0.35),
    0 6px 12px rgba(73,108,146,0.08);
}
.miniOwlFace::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:6px;
  height:24px;
  border-radius:14px;
  background:linear-gradient(180deg,#fff7ef 0%,#ffeedd 100%);
}
.miniOwlEar{
  position:absolute;
  top:-5px;
  width:14px;
  height:14px;
  border-radius:5px;
  background:linear-gradient(180deg,#b87835 0%,#9a6129 100%);
}
.miniOwlEarLeft{ left:8px; transform:rotate(-12deg); }
.miniOwlEarRight{ right:8px; transform:rotate(12deg); }
.miniOwlEye{
  position:absolute;
  top:16px;
  width:6px;
  height:8px;
  border-radius:999px;
  background:#17324c;
  z-index:2;
}
.miniOwlEyeLeft{ left:15px; }
.miniOwlEyeRight{ right:15px; }
.miniOwlBeak{
  position:absolute;
  left:50%;
  top:24px;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:8px solid #f4b400;
  z-index:2;
}


/* ===== Animated mascot behavior ===== */
.mascotWrap{
  animation: ollieFloat 3.6s ease-in-out infinite;
  transform-origin: center bottom;
}

.mascotFace{
  animation: ollieSway 4.2s ease-in-out infinite;
  transform-origin: center center;
}

.miniOwlFace{
  animation: miniOllieFloat 3.2s ease-in-out infinite;
  transform-origin: center bottom;
}

.mascotBook{
  animation: ollieBookBob 2.8s ease-in-out infinite;
  transform-origin: center center;
}

.mascotEye,
.miniOwlEye{
  transform-origin: center center;
  animation: ollieBlink 4.8s infinite;
}

.mascotWelcomeCard:hover .mascotFace,
.mascotBubble:hover .miniOwlFace{
  animation-duration: 1.8s;
}

.mascotWelcomeCard:active .mascotFace,
.mascotBubble:active .miniOwlFace{
  animation: olliePop .28s ease;
}

@keyframes ollieFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}

@keyframes miniOllieFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

@keyframes ollieSway{
  0%,100%{ transform: rotate(0deg); }
  25%{ transform: rotate(-2deg); }
  50%{ transform: rotate(0deg); }
  75%{ transform: rotate(2deg); }
}

@keyframes ollieBookBob{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-2px) rotate(-3deg); }
}

@keyframes ollieBlink{
  0%, 44%, 48%, 100%{
    transform: scaleY(1);
  }
  46%{
    transform: scaleY(0.12);
  }
}

@keyframes olliePop{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .mascotWrap,
  .mascotFace,
  .miniOwlFace,
  .mascotBook,
  .mascotEye,
  .miniOwlEye{
    animation: none !important;
  }
}


/* ===== Mascot welcome moment ===== */
.mascotWelcomeCard{
  position: relative;
}

.mascotWelcomeCard.welcome-active .mascotFace{
  animation: ollieWave 1.1s ease-in-out 3;
}

.mascotWelcomeCard.welcome-active .mascotBook{
  animation: ollieBookWave 1.1s ease-in-out 3;
}

.mascotWelcomeCard.welcome-active .mascotLine{
  animation: welcomePop 0.9s ease 1;
}

.mascotWelcomeCard.welcome-active::after{
  content:"👋";
  position:absolute;
  right:14px;
  top:10px;
  font-size:28px;
  animation: waveEmoji 1s ease-in-out 3;
}

@keyframes ollieWave{
  0%,100%{ transform: rotate(0deg) translateY(0); }
  20%{ transform: rotate(-5deg) translateY(-2px); }
  40%{ transform: rotate(4deg) translateY(-1px); }
  60%{ transform: rotate(-4deg) translateY(-2px); }
  80%{ transform: rotate(3deg) translateY(0); }
}

@keyframes ollieBookWave{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  25%{ transform: translateY(-3px) rotate(-8deg); }
  50%{ transform: translateY(-1px) rotate(6deg); }
  75%{ transform: translateY(-3px) rotate(-6deg); }
}

@keyframes welcomePop{
  0%{ transform: scale(.96); opacity:.75; }
  60%{ transform: scale(1.03); opacity:1; }
  100%{ transform: scale(1); }
}

@keyframes waveEmoji{
  0%,100%{ transform: rotate(0deg) scale(1); opacity:0; }
  20%{ transform: rotate(-18deg) scale(1.06); opacity:1; }
  40%{ transform: rotate(15deg) scale(1.12); opacity:1; }
  60%{ transform: rotate(-12deg) scale(1.06); opacity:1; }
  80%{ transform: rotate(10deg) scale(1.02); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .mascotWelcomeCard.welcome-active .mascotFace,
  .mascotWelcomeCard.welcome-active .mascotBook,
  .mascotWelcomeCard.welcome-active .mascotLine,
  .mascotWelcomeCard.welcome-active::after{
    animation:none !important;
  }
}


/* ===== Illustrated objects ===== */
.illustrationStage{
  width: 170px;
  height: 130px;
  margin: 14px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:28px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg,#f8fcff 0%, #eef8ff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(225,235,245,0.9),
    0 14px 24px rgba(73,108,146,0.08);
}
.smallStage{
  width: 150px;
  height: 112px;
  margin-top: 10px;
}
.illustrationSvg{
  width: 120px;
  height: 100px;
  filter: drop-shadow(0 6px 8px rgba(40,70,110,0.12));
}
.smallStage .illustrationSvg{
  width: 100px;
  height: 84px;
}

.countObj{
  font-size: 0 !important;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg,#fff9de 0%, #f5fbff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(225,235,245,0.9),
    0 10px 18px rgba(73,108,146,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.countObj .miniIllustration{
  width: 40px;
  height: 40px;
}

/* ===== Stronger reward animation ===== */
.rewardBurst{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}
.rewardBurst.hidden{ display:none; }
.rewardPiece{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:8px;
  opacity:0;
  animation: rewardFly 1100ms ease-out forwards;
}
.rewardPiece.star{
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.rewardPiece.circle{ border-radius:999px; }
.rewardPiece.diamond{ transform: rotate(45deg); border-radius:4px; }
@keyframes rewardFly{
  0%{ transform: translate(0,0) scale(.6) rotate(0deg); opacity:0; }
  12%{ opacity:1; }
  100%{ transform: translate(var(--tx), var(--ty)) scale(1.15) rotate(var(--rot)); opacity:0; }
}
.rewardPulse{
  animation: rewardPulse 500ms ease;
}
@keyframes rewardPulse{
  0%{ transform: scale(.95); }
  55%{ transform: scale(1.04); }
  100%{ transform: scale(1); }
}


/* Mini games simplification */
.iconTabBtn{
  min-width: 84px !important;
  max-width: 96px !important;
  min-height: 64px !important;
  font-size: 28px !important;
  line-height: 1 !important;
  padding: 10px 12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px !important;
}

.gameTabs{
  margin-bottom: 14px !important;
}


/* Real mini-games simplification */
.iconTabBtn{
  min-width: 90px !important;
  max-width: 98px !important;
  min-height: 64px !important;
  font-size: 30px !important;
  line-height: 1 !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 18px !important;
}

.visualPrompt{
  min-height: 120px !important;
}

.promptObject{
  margin-top: 0 !important;
}


/* Bigger shapes */
#shapePrompt.promptObject{
  font-size: 92px !important;
  line-height: 1 !important;
}
.shapeChoiceSvg{
  width: 82px !important;
  height: 82px !important;
}
.itemBtn[title="Circle"],
.itemBtn[title="Square"],
.itemBtn[title="Triangle"],
.itemBtn[title="Rectangle"],
.itemBtn[title="Star"],
.itemBtn[title="Heart"]{
  font-size: 64px !important;
}
@media (max-width: 560px){
  #shapePrompt.promptObject{
    font-size: 76px !important;
  }
  .shapeChoiceSvg{
    width: 70px !important;
    height: 70px !important;
  }
}


/* richer illustration pass */
.illustrationStage{
  width: 196px;
  height: 146px;
}
.smallStage{
  width: 172px;
  height: 126px;
}
.illustrationSvg{
  width: 138px;
  height: 112px;
}
.smallStage .illustrationSvg{
  width: 116px;
  height: 94px;
}


/* ===== Stronger visible illustration focus ===== */
.illustrationStage{
  width: 260px !important;
  height: 190px !important;
  margin: 18px auto 6px !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0) 24%),
    radial-gradient(circle at 80% 76%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 24%),
    linear-gradient(180deg,#fff8d9 0%, #eef8ff 100%) !important;
  box-shadow:
    0 18px 0 rgba(228,212,120,0.55),
    0 24px 34px rgba(73,108,146,0.12),
    inset 0 0 0 2px rgba(255,255,255,0.72) !important;
}

.smallStage{
  width: 220px !important;
  height: 160px !important;
  margin-top: 14px !important;
}

.illustrationSvg{
  width: 190px !important;
  height: 150px !important;
  filter: drop-shadow(0 10px 14px rgba(40,70,110,0.16)) !important;
}

.smallStage .illustrationSvg{
  width: 162px !important;
  height: 126px !important;
}

.learnMeaning{
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #17324c !important;
  margin-top: 18px !important;
  background: linear-gradient(180deg,#ffffff 0%,#f6fbff 100%);
  padding: 10px 18px !important;
  border-radius: 18px !important;
  box-shadow:
    0 10px 18px rgba(73,108,146,0.08),
    inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

.traceObjectBtn{
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #17324c !important;
  margin-top: 12px !important;
  background: linear-gradient(180deg,#ffffff 0%,#f6fbff 100%);
  padding: 8px 16px !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 14px rgba(73,108,146,0.08),
    inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

.learnHero{
  padding-bottom: 26px !important;
}

.traceHeaderCard{
  padding-bottom: 20px !important;
}

@media (max-width:560px){
  .illustrationStage{
    width: 220px !important;
    height: 166px !important;
  }
  .smallStage{
    width: 192px !important;
    height: 140px !important;
  }
  .illustrationSvg{
    width: 166px !important;
    height: 132px !important;
  }
  .smallStage .illustrationSvg{
    width: 142px !important;
    height: 112px !important;
  }
}


/* ===== Bigger, more obvious visual upgrade ===== */
.learnHero,
.traceHeaderCard{
  position: relative;
  overflow: visible;
}

.illustrationStage{
  width: 320px !important;
  height: 220px !important;
  margin: 22px auto 10px !important;
  border-radius: 40px !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.56) 0%, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 82% 80%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(180deg,#fff6cf 0%, #eef8ff 100%) !important;
  box-shadow:
    0 22px 0 rgba(231,214,118,0.55),
    0 28px 42px rgba(73,108,146,0.14),
    inset 0 0 0 2px rgba(255,255,255,0.78) !important;
  animation: stageFloat 3.2s ease-in-out infinite;
}

.smallStage{
  width: 280px !important;
  height: 194px !important;
  margin-top: 16px !important;
}

.illustrationSvg{
  width: 230px !important;
  height: 178px !important;
  filter: drop-shadow(0 12px 16px rgba(40,70,110,0.18)) !important;
  animation: illustrationBob 3.4s ease-in-out infinite;
}

.smallStage .illustrationSvg{
  width: 202px !important;
  height: 156px !important;
}

.learnMeaning,
.traceObjectBtn{
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #17324c !important;
  margin-top: 22px !important;
  background: linear-gradient(180deg,#ffffff 0%,#f7fbff 100%) !important;
  padding: 10px 18px !important;
  border-radius: 18px !important;
  box-shadow:
    0 12px 20px rgba(73,108,146,0.10),
    inset 0 1px 0 rgba(255,255,255,0.84) !important;
}

.rewardBurst{
  z-index: 99999 !important;
}

.rewardPiece{
  width: 26px !important;
  height: 26px !important;
  box-shadow: 0 6px 12px rgba(73,108,146,0.14);
}

.correctGlow{
  animation: correctGlow 700ms ease;
}

.bigCelebrate{
  animation: bigCelebrate 700ms ease;
}

.mascotBubble.celebrateBubble{
  transform-origin: left center;
  animation: mascotCheer 650ms ease;
}

@keyframes stageFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}
@keyframes illustrationBob{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-4px) scale(1.01); }
}
@keyframes correctGlow{
  0%{ box-shadow: 0 0 0 rgba(255,214,61,0); }
  40%{ box-shadow: 0 0 0 12px rgba(255,214,61,0.18), 0 0 30px rgba(255,214,61,0.32); }
  100%{ box-shadow: 0 0 0 rgba(255,214,61,0); }
}
@keyframes bigCelebrate{
  0%{ transform: scale(.9); }
  50%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}
@keyframes mascotCheer{
  0%,100%{ transform: rotate(0deg); }
  25%{ transform: rotate(-3deg) scale(1.03); }
  50%{ transform: rotate(3deg) scale(1.05); }
  75%{ transform: rotate(-2deg) scale(1.03); }
}

@media (max-width: 560px){
  .illustrationStage{
    width: 255px !important;
    height: 182px !important;
    border-radius: 32px !important;
  }
  .smallStage{
    width: 230px !important;
    height: 164px !important;
  }
  .illustrationSvg{
    width: 182px !important;
    height: 142px !important;
  }
  .smallStage .illustrationSvg{
    width: 166px !important;
    height: 130px !important;
  }
  .learnMeaning,
  .traceObjectBtn{
    font-size: 21px !important;
  }
}


/* ===== Alphabet learn cleanup ===== */
.illustrationSoundBtn{
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

.alphabetHero .pairUpper,
.alphabetHero .pairLower{
  font-size: 64px !important;
}

.alphabetHero .upperLowerPairDisplay{
  gap: 16px !important;
  margin-bottom: 8px !important;
}

.alphabetHero .learnBig{
  display: none !important;
}

.alphabetHero #learnBig{
  display: none !important;
}

.alphabetHero{
  padding-top: 14px !important;
}

.alphabetHero .illustrationStage{
  margin-top: 16px !important;
}

.alphabetHero .learnMeaning{
  margin-top: 14px !important;
}

.illustrationSoundBtn:active{
  transform: scale(0.985);
}

.illustrationSoundBtn::after{
  content: "🔊";
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 12px rgba(73,108,146,0.10);
  font-size: 16px;
}

.smallStage.illustrationSoundBtn::after{
  width: 30px;
  height: 30px;
  right: 12px;
  bottom: 10px;
  font-size: 14px;
}


/* Number tiles as visual counts */
.numberTileWrap{
  position: relative;
  width: 84px;
  min-height: 68px;
  display: grid;
  grid-template-columns: repeat(3, 16px);
  justify-content: center;
  align-content: center;
  gap: 8px;
  padding: 8px 10px 12px;
}
.numberDot{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg,#5aa9ff 0%, #3d8de3 100%);
  box-shadow:
    0 3px 0 rgba(56,118,193,0.75),
    0 5px 8px rgba(73,108,146,0.12);
}
.numberBadge{
  position: absolute;
  right: -6px;
  top: -8px;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  font-weight: 900;
  color: #17324c;
  background: linear-gradient(180deg,#ffffff 0%,#f5fbff 100%);
  box-shadow:
    0 8px 12px rgba(73,108,146,0.10),
    inset 0 1px 0 rgba(255,255,255,0.85);
}

@media (max-width:560px){
  .numberTileWrap{
    width: 76px;
    min-height: 62px;
    grid-template-columns: repeat(3, 14px);
    gap: 7px;
  }
  .numberDot{
    width: 14px;
    height: 14px;
  }
  .numberBadge{
    min-width: 28px;
    height: 28px;
    font-size: 15px;
  }
}



/* Number learn/trace illustration fit */
.illustrationStage .illustrationSvg[viewBox="0 0 200 200"]{
  width: 220px !important;
  height: 180px !important;
}
.smallStage .illustrationSvg[viewBox="0 0 200 200"]{
  width: 190px !important;
  height: 154px !important;
}


/* Restore main Numbers menu to clear numerals and make them more visible */
.itemBtn{
  font-size: 34px !important;
  font-weight: 900 !important;
}
#menuScreen #itemGrid .itemBtn{
  min-height: 138px !important;
  min-width: 138px !important;
}
#menuScreen #itemGrid .itemBtn[title^="Number "]{
  font-size: 52px !important;
  font-weight: 900 !important;
  color: #17324c !important;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.25),
    0 6px 12px rgba(23,50,76,0.12);
}

/* Keep alphabet custom styling */
#menuScreen #itemGrid .itemBtn .upperLetter{
  font-size: 44px !important;
}
#menuScreen #itemGrid .itemBtn .lowerLetter{
  font-size: 38px !important;
}

/* Remove visual clutter from old number-tile internals if present */
.numberTileWrap{ display:none !important; }

/* Inside number learn/trace screen: bigger count tiles/illustrations */
.illustrationStage .illustrationSvg[viewBox="0 0 200 200"]{
  width: 250px !important;
  height: 205px !important;
}
.smallStage .illustrationSvg[viewBox="0 0 200 200"]{
  width: 214px !important;
  height: 174px !important;
}

/* Make the number learn card itself feel bigger and clearer */
.illustrationStage{
  width: 340px !important;
  height: 236px !important;
}
.smallStage{
  width: 300px !important;
  height: 206px !important;
}

@media (max-width:560px){
  #menuScreen #itemGrid .itemBtn{
    min-height: 122px !important;
    min-width: 122px !important;
  }
  #menuScreen #itemGrid .itemBtn[title^="Number "]{
    font-size: 46px !important;
  }
  .illustrationStage{
    width: 270px !important;
    height: 188px !important;
  }
  .smallStage{
    width: 238px !important;
    height: 168px !important;
  }
  .illustrationStage .illustrationSvg[viewBox="0 0 200 200"]{
    width: 198px !important;
    height: 158px !important;
  }
  .smallStage .illustrationSvg[viewBox="0 0 200 200"]{
    width: 176px !important;
    height: 140px !important;
  }
}


/* Bigger number count visuals inside the learn/trace card */
.illustrationStage .illustrationSvg[viewBox="0 0 200 200"]{
  width: 300px !important;
  height: 240px !important;
}
.smallStage .illustrationSvg[viewBox="0 0 200 200"]{
  width: 250px !important;
  height: 200px !important;
}

@media (max-width:560px){
  .illustrationStage .illustrationSvg[viewBox="0 0 200 200"]{
    width: 235px !important;
    height: 188px !important;
  }
  .smallStage .illustrationSvg[viewBox="0 0 200 200"]{
    width: 205px !important;
    height: 164px !important;
  }
}