/* ============================================================
   Learn — game hub + games (letters, sounds, numbers, songs)
   ============================================================ */

.learn-view { max-width: 900px; margin: 0 auto; }

/* the [hidden] attribute must beat the display rules below */
.learn-hub[hidden], .game-stage[hidden] { display: none !important; }

/* hub of big game tiles */
.learn-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(12px, 3vw, 22px);
  padding: 6px;
}
.game-tile {
  border: none; cursor: pointer;
  background: var(--paper);
  border-radius: 30px;
  padding: clamp(18px, 4vw, 30px) 14px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-display);
  border: 5px solid #fff;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.game-tile:active { transform: scale(.94); }
.game-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.game-tile .g-emoji { font-size: clamp(48px, 12vw, 76px); line-height: 1; }
.game-tile .g-name { font-size: clamp(18px, 4.6vw, 26px); font-weight: 800; color: var(--ink); }
.game-tile .g-sub { font-size: clamp(12px, 3vw, 15px); font-weight: 700; color: var(--ink-soft); }
.game-tile.gt-0 { background: #FFF0D6; } .game-tile.gt-1 { background: #E7F5DE; }
.game-tile.gt-2 { background: #E4F1FB; } .game-tile.gt-3 { background: #FBE4EC; }

/* game stage */
.game-stage { position: relative; padding-top: 8px; }
.back-btn {
  border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(16px, 4vw, 20px);
  color: #fff; background: var(--marigold);
  padding: 12px 22px; border-radius: 40px;
  box-shadow: var(--shadow); margin-bottom: 14px;
}
.back-btn:active { transform: scale(.94); }
.game-mount { min-height: 40vh; }

.game-title {
  text-align: center; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 6vw, 34px); color: var(--ink); margin: 0 0 6px;
}
.game-tip { text-align: center; color: var(--ink-soft); font-weight: 700; margin: 0 0 18px; font-size: clamp(14px,3.6vw,17px); }

/* ---- Letters grid ---- */
.letters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: clamp(8px, 2.2vw, 14px); max-width: 760px; margin: 0 auto;
}
.letter {
  aspect-ratio: 1; border: none; cursor: pointer;
  border-radius: 22px; background: #fff;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(26px, 7vw, 40px); color: var(--ink);
  box-shadow: var(--shadow);
  display: grid; place-items: center;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .2s, color .2s;
}
.letter:nth-child(3n)   { color: var(--coral); }
.letter:nth-child(3n+1) { color: #5aa9e0; }
.letter:nth-child(3n+2) { color: #6bbb5e; }
.letter:active { transform: scale(.9); }
.letter.say { background: var(--marigold); color: #fff !important; transform: scale(1.14); box-shadow: var(--shadow-lg); }

.big-btn {
  display: block; margin: 22px auto 0;
  border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(18px, 5vw, 26px); color: #fff;
  background: linear-gradient(145deg, #FF9F6B, #FF7E5F);
  padding: 16px 34px; border-radius: 50px;
  box-shadow: var(--shadow-lg);
}
.big-btn:active { transform: scale(.95); }
.big-btn.singing { animation: wiggle .5s ease-in-out infinite; }
@keyframes wiggle { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }

/* the pop-up card that shows the letter word */
.reveal {
  max-width: 420px; margin: 20px auto 0;
  background: #fff; border-radius: 28px; box-shadow: var(--shadow-lg);
  padding: 22px; text-align: center; border: 5px solid var(--tint-soft);
  min-height: 168px; display: grid; place-items: center;
}
.reveal .r-emoji { font-size: clamp(70px, 18vw, 110px); line-height: 1; }
.reveal .r-word { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 6vw, 32px); color: var(--ink); margin-top: 8px; }
.reveal .r-word b { color: var(--marigold); }
.reveal.pop { animation: reveal-pop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes reveal-pop { 0%{transform:scale(.6);opacity:0} 100%{transform:scale(1);opacity:1} }

/* ---- Animal sounds barnyard ---- */
.barn {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(10px, 2.6vw, 18px); max-width: 760px; margin: 0 auto;
}
.critter {
  aspect-ratio: 1; border: none; cursor: pointer;
  border-radius: 30px; background: #fff;
  box-shadow: var(--shadow);
  display: grid; place-items: center;
  font-size: clamp(52px, 13vw, 84px);
  position: relative;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.critter:active { transform: scale(.9); }
.critter.wiggle { animation: critter-hop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes critter-hop { 0%{transform:translateY(0) scale(1)} 30%{transform:translateY(-18px) scale(1.16)} 60%{transform:translateY(0) scale(.96)} 100%{transform:translateY(0) scale(1)} }
.critter .say-bubble {
  position: absolute; top: -8px; right: -6px;
  background: var(--marigold); color: #fff;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(14px, 3.5vw, 20px);
  padding: 6px 14px; border-radius: 30px;
  box-shadow: var(--shadow);
  opacity: 0; transform: scale(.4) translateY(6px);
}
.critter .say-bubble.show { animation: bubble .9s ease forwards; }
@keyframes bubble { 15%{opacity:1;transform:scale(1.1) translateY(0)} 80%{opacity:1;transform:scale(1) translateY(0)} 100%{opacity:0;transform:scale(1) translateY(-6px)} }

/* ---- Numbers ---- */
.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px,1fr)); gap: clamp(8px,2.4vw,14px); max-width: 620px; margin: 0 auto; }
.num {
  aspect-ratio: 1; border: none; cursor: pointer; border-radius: 26px; background: #fff;
  box-shadow: var(--shadow); display: grid; place-items: center;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.num .n-digit { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px,8vw,44px); color: var(--ink); }
.num .n-dots { font-size: clamp(13px,3.4vw,18px); letter-spacing: 1px; }
.num:active { transform: scale(.9); }
.num.say { background: #5aa9e0; }
.num.say .n-digit { color: #fff; }

/* ---- Songs ---- */
.songs { display: grid; gap: 14px; max-width: 520px; margin: 0 auto; }
.song-btn {
  border: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 26px; padding: 16px 20px;
  box-shadow: var(--shadow);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(18px, 4.6vw, 24px); color: var(--ink);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.song-btn:active { transform: scale(.96); }
.song-btn .s-emoji { font-size: clamp(40px, 10vw, 56px); }
.song-btn.playing { background: var(--tint-soft); }
.song-btn.playing .s-emoji { animation: wiggle .6s ease-in-out infinite; }
.now-singing { text-align:center; margin: 18px auto 0; max-width: 560px; min-height: 60px;
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(20px, 5.5vw, 30px); }
.now-singing b { color: var(--marigold); }