/* Big, bright and thumb-sized. Nothing under 64px that has to be tapped. */
:root{
  --bg:#fff6e8; --ink:#3a2a1e; --soft:#8a7462;
  --card:#ffffff; --edge:#f0dcc2;
  --pink:#ff8fa3; --blue:#6fc3ff; --green:#57d58a; --yellow:#ffd66b; --purple:#c2a6ff;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); overflow-x:hidden;
  font-family:"Comic Sans MS","Chalkboard SE",system-ui,-apple-system,sans-serif;
  padding:0 12px calc(20px + env(safe-area-inset-bottom));
  background-image:
    radial-gradient(700px 380px at 10% -8%, rgba(255,214,107,.34), transparent 60%),
    radial-gradient(620px 340px at 95% 4%, rgba(111,195,255,.30), transparent 58%);
}

/* ---- top bar ---- */
#bar{display:flex; align-items:center; gap:10px; padding:14px 2px 8px; position:sticky; top:0;
  background:linear-gradient(180deg,var(--bg) 76%,transparent); z-index:5}
#title{flex:1; text-align:center; font-size:clamp(22px,6vw,32px); font-weight:800; letter-spacing:-.5px}
.stars{background:#fff; border:2px solid var(--edge); border-radius:99px; padding:6px 14px; font-size:17px}
.round{width:52px; height:52px; border-radius:50%; border:3px solid var(--edge); background:#fff;
  font-size:22px; color:var(--ink); cursor:pointer; flex:0 0 auto}
.round.big{width:76px; height:76px; font-size:30px}
.round:active{transform:scale(.94)}

/* ---- screens ---- */
.scene{display:none; animation:in .22s ease}
.scene.active{display:block}
@keyframes in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.lead{text-align:center; color:var(--soft); font-size:17px; margin:4px 0 14px}

/* ---- topic buttons ---- */
.topics{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); padding-bottom:20px}
.topic{display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer;
  background:var(--card); border:3px solid var(--edge); border-radius:22px; padding:16px 10px 12px;
  font-family:inherit; color:inherit; box-shadow:0 4px 0 var(--edge)}
.topic:active{transform:translateY(3px); box-shadow:none}
.t-ic{font-size:44px; line-height:1}
.t-pt{font-size:19px; font-weight:800}
.t-en{font-size:13px; color:var(--soft)}
.t-stars{font-size:13px; letter-spacing:2px; color:#e0cdb4}

/* ---- learn or play ---- */
.big-topic{text-align:center; font-size:clamp(24px,7vw,34px); font-weight:800; margin:10px 0 22px}
.big-topic span{font-size:1.5em; display:block}
.big-topic i{display:block; font-size:.55em; color:var(--soft); font-style:normal}
.two{display:grid; gap:14px; grid-template-columns:1fr 1fr; max-width:520px; margin:0 auto}
.mode{display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  background:var(--card); border:3px solid var(--edge); border-radius:24px; padding:22px 12px;
  font-family:inherit; color:inherit; box-shadow:0 5px 0 var(--edge)}
.mode:active{transform:translateY(4px); box-shadow:none}
.mode-ic{font-size:48px; line-height:1}
.mode-pt{font-size:21px; font-weight:800}
.mode-en{font-size:12.5px; color:var(--soft)}

/* ---- flashcards ---- */
.card{background:var(--card); border:3px solid var(--edge); border-radius:28px; padding:22px 16px 26px;
  text-align:center; max-width:460px; margin:0 auto; box-shadow:0 6px 0 var(--edge)}
.card-ic{font-size:min(38vw,150px); line-height:1}
.card-ic.pop{animation:pop .4s ease}
@keyframes pop{0%{transform:scale(.7)} 60%{transform:scale(1.12)} 100%{transform:scale(1)}}
.card-en{font-size:clamp(30px,9vw,46px); font-weight:800; margin-top:6px}
.card-pt{font-size:clamp(16px,4.6vw,22px); color:var(--soft)}
.say{width:74px; height:74px; border-radius:50%; border:0; background:var(--blue); color:#053349;
  font-size:32px; cursor:pointer; box-shadow:0 4px 0 #46a5e0; margin:6px 0}
.say:active{transform:translateY(3px); box-shadow:none}
.say.huge{width:104px; height:104px; font-size:46px}
.rowbtns{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:18px}
.count{font-size:17px; color:var(--soft); min-width:74px; text-align:center}

/* ---- listen and tap ---- */
.ask{text-align:center; margin-bottom:16px}
.ask-pt{font-size:17px; color:var(--soft); margin-top:2px}
.cards{display:grid; gap:14px; max-width:560px; margin:0 auto}
.cards.n2{grid-template-columns:1fr 1fr}
.cards.n3{grid-template-columns:1fr 1fr}
.cards.n4{grid-template-columns:1fr 1fr}
.pcard{background:var(--card); border:4px solid var(--edge); border-radius:26px; cursor:pointer;
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  font-size:min(22vw,86px); box-shadow:0 5px 0 var(--edge); font-family:inherit}
.pcard:active{transform:translateY(4px); box-shadow:none}
.pcard.yes{border-color:var(--green); background:#eafbf1; animation:pop .45s ease}
.pcard.no{border-color:#ffc0c9; opacity:.5; animation:wob .4s ease}
@keyframes wob{25%{transform:translateX(-9px)} 75%{transform:translateX(9px)}}
.dots{display:flex; gap:6px; justify-content:center; margin:18px 0 8px}
.dots i{width:11px; height:11px; border-radius:50%; background:#e6d5bd}
.dots i.done{background:var(--green)}
.dots i.now{background:var(--yellow); transform:scale(1.35)}

/* ---- well done ---- */
#done{text-align:center; padding-top:14px}
.done-ic{font-size:80px; animation:pop .5s ease}
.done-pt{font-size:clamp(26px,8vw,40px); font-weight:800; line-height:1.35; margin:6px 0}
.done-en{font-size:19px; color:var(--soft); margin-bottom:22px}

/* ---- the little word that pops up when you get one right ---- */

@media (max-width:380px){
  .topics{grid-template-columns:1fr 1fr}
  .t-ic{font-size:38px}
}

/* ---- the letter card, and the cue above a question ---- */
.card-en b{font-size:1.1em}
.l-cap{color:var(--soft); font-size:.7em}
.cue{min-height:56px; display:flex; align-items:center; justify-content:center; margin-bottom:2px}
.cue-letter{font-size:min(24vw,92px); font-weight:800; line-height:1; color:var(--purple);
  text-shadow:0 4px 0 #a98cf0}
.cue-pair{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center}
.cue-pair b{font-size:clamp(24px,7vw,38px); color:var(--purple)}
.cue-pair i{color:#d8c6ad; font-style:normal; font-size:26px}
.cue-word{display:flex; align-items:center; gap:10px; font-size:34px}
.cue-word b{font-size:clamp(28px,8vw,42px)}
.cue-ear{font-size:56px}
.pcard.words{font-size:clamp(26px,8vw,44px); font-weight:800; aspect-ratio:2/1}

/* ---- sounding a word out ---- */
.cards.blend{display:flex; flex-direction:column; align-items:center; gap:18px}
.blend-row{display:flex; gap:12px; justify-content:center}
.bl{width:min(24vw,96px); height:min(28vw,112px); border-radius:22px; border:4px solid var(--edge);
  background:#fff; font-family:inherit; font-size:min(16vw,60px); font-weight:800; color:var(--ink);
  cursor:pointer; box-shadow:0 5px 0 var(--edge)}
.bl:active{transform:translateY(4px); box-shadow:none}
.bl.lit{background:#fff6d8; border-color:var(--yellow); color:#b07d00}
.bl.no{animation:wob .4s ease}
.bl-go{min-width:min(80vw,340px); min-height:104px; border-radius:26px; border:4px dashed var(--edge);
  background:#fff; font-family:inherit; cursor:pointer; font-size:34px; color:var(--soft)}
.bl-go.ready{border-style:solid; border-color:var(--green); background:#eafbf1; color:#1c8a4d;
  box-shadow:0 5px 0 #b6ecc9}
.bl-go:disabled{opacity:.55}
.bl-hidden{display:flex; align-items:center; justify-content:center; gap:12px}
.bl-hidden.shown{font-size:min(16vw,58px)}
.bl-hidden b{font-size:clamp(30px,9vw,50px); color:var(--ink)}

/* ============ making it worth playing ============ */

/* the little one hopping along towards the cup */
.track{position:relative; height:44px; margin:2px 0 6px; border-radius:99px;
  background:linear-gradient(90deg,#ffe6b8,#ffd08a); border:3px solid var(--edge); overflow:hidden}
.track i{position:absolute; left:0; top:50%; transform:translate(-50%,-50%); font-size:30px;
  transition:left .5s cubic-bezier(.34,1.56,.64,1); font-style:normal}
.track i.hop{animation:hop .5s ease}
@keyframes hop{50%{transform:translate(-50%,-135%) rotate(-14deg) scale(1.15)}}
.track .prize{position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:26px}
.track .prize.won{animation:pop .6s ease 3}

/* the dragon who eats the right answer */
.mascot{font-size:64px; line-height:1; transition:transform .2s; cursor:default}
.mascot.chomp{animation:chomp .55s ease}
.mascot.sad{animation:wob .5s ease}
.mascot.party{animation:party .7s ease infinite}
@keyframes chomp{30%{transform:scale(1.35) rotate(-8deg)} 60%{transform:scale(.86) rotate(6deg)}}
@keyframes party{0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-14px) rotate(6deg)}}

/* the card flying into its mouth */
.pcard.eaten{animation:eaten .55s ease forwards; pointer-events:none}
@keyframes eaten{to{transform:translate(var(--dx),var(--dy)) scale(.15) rotate(20deg); opacity:0}}

.streak{text-align:center; margin-top:10px; font-size:20px; font-weight:800; color:#e07a1f;
  animation:pop .45s ease}

/* confetti */
#confetti{position:fixed; inset:0; pointer-events:none; z-index:20; overflow:hidden}
#confetti b{position:absolute; font-size:22px; animation:fall 1.5s linear forwards}
@keyframes fall{
  0%{transform:translateY(0) rotate(0); opacity:1}
  100%{transform:translateY(85vh) rotate(540deg); opacity:0}}

#msg{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:9;
  background:#2f2418; color:#fff; padding:12px 22px; border-radius:99px;
  font-size:clamp(18px,5vw,24px); font-weight:800; box-shadow:0 6px 20px rgba(0,0,0,.22)}

/* ---- balloons ---- */
.sky{position:relative; height:min(52vh,440px); margin:6px auto 0; max-width:560px; overflow:hidden;
  border-radius:26px; border:3px solid var(--edge);
  background:linear-gradient(180deg,#bfe6ff,#e8f6ff 70%,#d9f0d0)}
.balloon{position:absolute; width:88px; text-align:center; cursor:pointer; border:0; background:none;
  padding:0; font-family:inherit}
.balloon .bod{display:flex; align-items:center; justify-content:center;
  width:88px; height:104px; border-radius:50% 50% 46% 46%; font-size:44px;
  box-shadow:inset -8px -8px 0 rgba(0,0,0,.08)}
.balloon .str{display:block; width:2px; height:26px; margin:0 auto; background:rgba(0,0,0,.25)}
.balloon.gone{animation:burst .4s ease forwards; pointer-events:none}
@keyframes burst{to{transform:scale(1.6); opacity:0}}
.balloon.miss{animation:wob .4s ease}

/* ---- the egg you are carrying, and the zoo it fills ---- */
.zoobar{display:flex; align-items:center; gap:14px; width:100%; margin:2px 0 14px; cursor:pointer;
  background:linear-gradient(100deg,#fff3d6,#ffe6f0); border:3px solid var(--edge);
  border-radius:22px; padding:12px 16px; font-family:inherit; color:inherit;
  box-shadow:0 4px 0 var(--edge); text-align:left}
.zoobar:active{transform:translateY(3px); box-shadow:none}
.zb-egg{font-size:42px; line-height:1; animation:wobble 2.6s ease-in-out infinite}
@keyframes wobble{0%,88%,100%{transform:rotate(0)} 92%{transform:rotate(-9deg)} 96%{transform:rotate(9deg)}}
.zb-txt{flex:1; font-size:18px; font-weight:800; line-height:1.35}
.zb-txt i{font-style:normal; font-size:13px; font-weight:400; color:var(--soft)}
.zb-go{font-size:22px; color:var(--soft)}

.eggbar{display:flex; align-items:center; gap:10px; justify-content:center; margin:14px auto 4px; max-width:320px}
.eggbar span{font-size:26px}
.eggbar i{display:block; flex:1; height:12px; border-radius:99px; background:#f0dcc2; overflow:hidden}
.eggbar u{display:block; height:100%; width:0; text-decoration:none;
  background:linear-gradient(90deg,#ffd66b,#ff9db1); transition:width .45s ease}

.zoo{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); padding-bottom:24px}
.pet{background:#fff; border:3px solid var(--edge); border-radius:20px; padding:12px 6px 10px;
  text-align:center; box-shadow:0 4px 0 var(--edge)}
.pet .p-ic{font-size:44px; line-height:1}
.pet .p-n{font-size:15px; font-weight:800; margin-top:2px}
.pet .p-s{font-size:11px; color:var(--soft); line-height:1.3; margin-top:2px}
.pet.locked{background:#f7efe3; box-shadow:none; border-style:dashed}
.pet.locked .p-ic{filter:grayscale(1) brightness(1.7) contrast(.2); opacity:.65}
.pet.locked .p-n{color:#cbb89e}
.pet.rare3{border-color:#ffc76b; background:linear-gradient(180deg,#fffaf0,#fff3dd)}

/* ---- the hatching ---- */
.hatch-box{text-align:center; padding-top:20px}
.hatch-egg{font-size:min(46vw,180px); line-height:1; animation:shake .5s ease infinite}
@keyframes shake{25%{transform:rotate(-11deg)} 75%{transform:rotate(11deg)}}
.hatch-egg.out{animation:burstout .8s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes burstout{0%{transform:scale(.6)} 60%{transform:scale(1.25) rotate(8deg)} 100%{transform:scale(1)}}
.hatch-name{font-size:clamp(26px,8vw,40px); font-weight:800; min-height:44px}
.hatch-says{font-size:16px; color:var(--soft); min-height:44px; padding:0 14px}
.mode.wide{grid-column:1/-1; max-width:300px; margin:12px auto 0; width:100%}

/* ---- choosing the voice ---- */
.voices{display:grid; gap:10px; padding-bottom:24px; max-width:520px; margin:14px auto 0}
.voice{display:flex; align-items:center; gap:12px; cursor:pointer; text-align:left;
  background:#fff; border:3px solid var(--edge); border-radius:18px; padding:14px 16px;
  font-family:inherit; color:inherit; box-shadow:0 4px 0 var(--edge)}
.voice:active{transform:translateY(3px); box-shadow:none}
.voice.on{border-color:var(--green); background:#eafbf1}
.voice .v-n{flex:1; font-size:17px; font-weight:800}
.voice .v-l{font-size:12.5px; color:var(--soft)}
.voice .v-go{font-size:22px}

.hatch-top{font-size:clamp(19px,5.4vw,26px); font-weight:800; color:#e07a1f; min-height:36px;
  padding:0 10px; line-height:1.3}

.voice-now{text-align:center; color:var(--soft); font-size:14px; margin:14px 0 0}

.speeds{display:flex; gap:8px; justify-content:center; margin:14px 0 0}
.speeds .speed{flex:1; max-width:150px; padding:12px 6px; border-radius:16px; cursor:pointer;
  border:3px solid var(--edge); background:#fff; font-family:inherit; font-size:16px; color:var(--ink);
  box-shadow:0 4px 0 var(--edge)}
.speeds .speed:active{transform:translateY(3px); box-shadow:none}
.speeds .speed.on{border-color:var(--green); background:#eafbf1}