/* Global Styles for Joyful Learning Tree */
:root{
  --bg: #e8f9ff;
  --bg2:#fff7e8;
  --primary:#23c4ff;
  --accent:#ff7ac8;
  --grass:#b4f1a0;
  --tree:#7c5f38;
  --leaf:#5ecb66;
  --sky:#aee7ff;
  --text:#2b2b2b;
  --focus:#ffbf47;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Fredoka', 'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--sky) 0%, var(--bg) 60%, var(--grass) 100%);
  color:var(--text);
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:rgba(255,255,255,0.7);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  backdrop-filter:saturate(140%) blur(6px);
  position:sticky;top:0;z-index:10;
}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:40px;height:40px}
.brand h1{font-weight:700;font-size:1.4rem;margin:0;color:#1479ff}
.controls{display:flex;gap:8px}
.btn{
  padding:10px 14px;border:none;border-radius:14px;cursor:pointer;text-decoration:none;
  background:var(--primary);color:#fff;font-weight:700;box-shadow:0 4px 0 rgba(0,0,0,0.08);
}
.btn:focus{outline:3px solid var(--focus);outline-offset:2px}
.btn:active{transform:translateY(1px)}
.install-btn[hidden]{display:none}

.home .scene{position:relative; height:48vh; min-height:320px; overflow:hidden}
.tree{position:absolute;left:10%;bottom:0;width:280px;max-width:35vw}
.bird{position:absolute;top:18%;left:55%;width:80px}
.bird.flip{transform:scaleX(-1)}
#bird2{top:28%;left:70%}
.flower{position:absolute;bottom:0;width:72px}
#flower1{left:30%}
#flower2{left:48%}

.nav-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px; padding:16px;
}
.card{
  display:block;padding:18px;border-radius:16px;background:linear-gradient(135deg,#ffffffaa,#ffffff);
  text-decoration:none;color:inherit; box-shadow:0 6px 16px rgba(0,0,0,0.08);
}
.card-emoji{font-size:2rem}
.card h2{margin:.4rem 0 0; font-size:1.25rem;color:#0a63d1}
.card p{margin:.25rem 0 0}
.card:focus{outline:3px solid var(--focus);outline-offset:4px}
.card:hover{transform:translateY(-2px);transition:transform .2s ease}

.ad-area{padding:12px}
.ad-slot{border:2px dashed #cdd7e1;border-radius:12px;padding:12px;text-align:center;background:#fff}

.site-footer{padding:20px;text-align:center;color:#4a4a4a}
.footer-nav{display:flex;gap:16px;justify-content:center;margin-bottom:8px}
.footer-nav a{color:#0a63d1;text-decoration:none;font-weight:600}
.footer-nav a:focus{outline:3px solid var(--focus);outline-offset:2px}
.small{font-size:.9rem}

/* Animations */
.sway{animation:sway 6s ease-in-out infinite}
.flap{animation:flap 1.6s ease-in-out infinite}
.bloom{animation:bloom 2.2s ease-in-out infinite alternate}
.bloom.delay{animation-delay:1.2s}
@keyframes sway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.4deg)}}
@keyframes flap{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bloom{0%{transform:scale(.96)}100%{transform:scale(1.06)}}

/* Section layouts */
.section-wrap{padding:16px}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.back-link{color:#0a63d1;text-decoration:none;font-weight:700}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* Force 4 rows (7 columns) for alphabet grid */
#alphabetGrid{grid-template-columns:repeat(7, minmax(168px,1fr)); place-items:center}
.tile{background:#fff;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.08);padding:14px;text-align:center}
.tile button{margin-top:8px}

/* Global button: yellow background with black text */
.btn{background:#ffd400;color:#111;border:none;border-radius:14px;padding:10px 14px;font-weight:800;box-shadow:0 4px 0 #c9aa00;transition:transform .06s ease, box-shadow .06s ease}
.btn:hover{filter:brightness(1.02)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #c9aa00}
.btn[disabled]{opacity:.6;filter:grayscale(.1);box-shadow:none}
.btn-row{display:flex;gap:10px;justify-content:center;align-items:center}
.btn--play{background:#ffd400;color:#111}

/* Accessibility helpers */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Forms */
.form{max-width:720px;margin:0 auto;display:grid;gap:12px}
.input, textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #cfe2f3;font-size:1rem}
label{font-weight:700}

/* Ads spacing rules per UX */
.ad-inline{margin:16px auto;max-width:728px}

/* Utility layout classes to avoid inline styles */
.flex-center-wrap{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.wrap-gapped{display:flex;gap:8px;flex-wrap:wrap}
.drop-zone{min-width:180px;min-height:140px}
.flex-gap-wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.paint-canvas{width:100%;max-width:480px;border-radius:12px;border:1px solid #cfe2f3;background:#fff;margin-top:8px}
.prose{max-width:900px;margin:0 auto}
.mt-16{margin-top:16px}
.mt-8{margin-top:8px}
.btn-row{display:flex;gap:8px;justify-content:center;margin-top:8px}
.letter-xl{font-size:2rem;font-weight:800;color:#0a63d1}

/* Shapes & Colors utilities */
.swatch{width:64px;height:40px;border-radius:8px;margin:0 auto}
.swatch-sm{width:48px;height:32px;border-radius:6px;margin:0 auto}
.emoji-xl{font-size:2rem}

/* Extra large emoji (generic) */
.emoji-xxl{font-size:5rem; line-height:1}

/* Pop animation (generic) */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.pop{animation:pop .6s ease}

/* Gentle highlight when content updates */
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(255, 200, 0, 0.0)}40%{box-shadow:0 0 0 6px rgba(255, 200, 0, 0.35)}100%{box-shadow:0 0 0 0 rgba(255, 200, 0, 0.0)}}
.highlight{animation:glow .8s ease}

/* Large letter buttons for Alphabet quiz */
.letter-option{
  font-size:2.25rem;
  font-weight:700;
  line-height:1;
  padding:18px 22px;
  min-height:84px;
  border:3px solid #111;
  border-radius:16px;
  background:#fff;
  color:#111;
}
.letter-option:focus-visible{outline:none; box-shadow:0 0 0 4px #fde68a, 0 0 0 8px #f59e0b}
.letter-option.matched{background:#dcfce7; border-color:#22c55e}

/* Alphabet grid tiles with in-tile emoji */
.alphabet-tile{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:nowrap}
.alphabet-tile .letter-box{position:relative; width:148px; height:184px; border:3px solid #111; border-radius:22px; background:#fff; flex:0 0 auto; display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; overflow:visible; padding:12px 14px}
.alphabet-tile .box-top{display:flex; align-items:center; justify-content:space-between; width:100%}
.alphabet-tile .letter-char{font-size:3.8rem; font-weight:800; color:#111}
.alphabet-tile .tile-emoji{position:static; font-size:3.4rem; line-height:1; transition:transform .2s ease; flex-shrink:0; transform-origin:center right}
.alphabet-tile .box-word{margin:8px 0 10px; text-align:center; font-size:1.15rem; font-weight:900; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.alphabet-tile .box-controls{display:flex; justify-content:center}
.alphabet-tile .box-controls .btn--play{width:100%; padding:10px 12px; font-size:1rem; margin-bottom:-8px}
.alphabet-tile .letter-text{flex:1 1 auto}

/* Stronger pop for in-box emoji */
.tile-emoji.pop{animation:pop .28s ease}
/* Make alphabet emoji pop bigger for better visibility */
.alphabet-tile .tile-emoji.pop{animation:popBig .3s ease}
@keyframes popBig{0%{transform:scale(.9)}60%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* Pulse animation for numbers and targets (scale up then back) */
.letter-xl.pulse, #targetNum.pulse{animation:numberPulse .35s ease}
@keyframes numberPulse{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
.pop-box{animation:popBox .5s ease}

/* Word Match: bigger, colorful words */
.letter-option{font-size:1.25rem; padding:12px 16px; border-radius:12px; border:3px solid transparent; font-weight:800}
.letter-option[aria-pressed="true"]{background:#fee2e2; border-color:#ef4444}
.letter-option.matched{background:#dcfce7; border-color:#22c55e}

/* Counting Garden visuals */
#treeDrop{font-size:1.25rem; padding:18px; border:3px dashed #2e7d32; background:#e8f5e9; border-radius:16px}
#birdsWrap .btn{font-size:1.5rem; padding:10px 12px}

/* Picture box styling for emoji tiles to match word boxes */
.pic-box{display:flex;align-items:center;justify-content:center;width:92px;height:92px;border:3px solid #111;border-radius:16px;background:#fff;margin:6px auto 0;font-size:2.2rem}
.word-box{display:flex;align-items:center;justify-content:center;min-width:92px;min-height:92px;border:3px solid #111;border-radius:16px;background:#fff;margin:6px auto 0;padding:8px 10px;font-size:1.15rem;font-weight:900;color:#111;text-align:center}

/* Rhymes decorative scene */
.scene-decor{position:relative;min-height:140px;margin:8px 0 16px}
.scene-decor .dec{position:absolute; font-size:2rem; opacity:.9; animation:floatY 6s ease-in-out infinite}
.scene-decor .dec:nth-child(1){left:6%; top:6%}
.scene-decor .dec:nth-child(2){left:24%; top:24%; animation-duration:7s}
.scene-decor .dec:nth-child(3){left:66%; top:18%; animation-duration:8s}
.scene-decor .dec:nth-child(4){left:82%; top:42%; animation-duration:7.5s}
.scene-decor .dec:nth-child(5){left:12%; top:58%; animation-duration:6.8s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.strong-word{font-weight:900; font-size:1.15rem}

/* Rhymes: per-card colorful backgrounds */
.rhyme-card{border-radius:16px}
.rhyme-card.c0{background:#fff1f2}
.rhyme-card.c1{background:#fef9c3}
.rhyme-card.c2{background:#dcfce7}
.rhyme-card.c3{background:#e0f2fe}
.rhyme-card.c4{background:#ede9fe}
.letter-option--c4{background:#f0fdf4; border-color:#22c55e}
.letter-option--c5{background:#fdf2f8; border-color:#ec4899}
.letter-option--c6{background:#fef2f2; border-color:#ef4444}
.letter-option--c1:hover{background:#fff7d6}
.letter-option--c2:hover{background:#e0e7ff}
.letter-option--c3:hover{background:#cffafe}
.letter-option--c4:hover{background:#dcfce7}
.letter-option--c5:hover{background:#fce7f3}
.letter-option--c6:hover{background:#fee2e2}

/* Small screens: slightly reduce sizes to fit */
@media (max-width: 360px){
  #alphabetGrid{grid-template-columns:repeat(4, minmax(128px,1fr))}
  .alphabet-tile .letter-box{width:136px; height:168px; padding:10px 12px}
  .alphabet-tile .letter-char{font-size:3.4rem}
  .alphabet-tile .tile-emoji{font-size:3rem}
  .alphabet-tile .box-word{font-size:1.1rem}
}

/* Word Match: bigger, colorful words */
#matchGrid .tile{min-height:88px}
#matchGrid .tile[data-type="word"]{
  font-size:1.5rem; font-weight:800; color:#0a63d1;
  background:linear-gradient(135deg,#ffffff,#f0f7ff);
  border:3px solid #0a63d1;
}
#matchGrid .tile[data-type="word"].matched{
  background:#dcfce7; border-color:#22c55e; color:#14532d;
}

/* Counting: prominent target number */
#counting #targetNum{
  font-size:2rem; font-weight:900; padding:14px 18px; border:3px solid #111; border-radius:16px;
  background:linear-gradient(135deg,#fffbeb,#fde68a); color:#111;
}

/* Number Sounds: bigger numbers and pulse effect */
#numberSounds .letter-xl{font-size:3rem; font-weight:900; color:#0a63d1}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.pulse{animation:pulse .5s ease}

/* Prominent Play button used across sections */
.btn--play{background:linear-gradient(135deg,#fde047,#facc15); color:#111; box-shadow:0 6px 0 rgba(0,0,0,0.14);
  padding:12px 18px; border-radius:16px; font-size:1rem; font-weight:900; transition:transform .08s ease, box-shadow .08s ease;
  border:2px solid #111;
}
.btn--play:active{transform:translateY(2px) scale(.98); box-shadow:0 2px 0 rgba(0,0,0,0.14)}