*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --pink:#FF2D78;--blue:#00B4FF;--yellow:#FFD600;--green:#39FF14;
  --orange:#FF6B00;--purple:#9B00FF;--teal:#00E5CC;--dark:#1A0040;
  --white:#FFFFFF;
}
html,body{height:100%;height:-webkit-fill-available;overflow:hidden;font-family:'Nunito',sans-serif;background:var(--dark);color:#fff}

/* SPLASH */
#splash{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:999;
  background:linear-gradient(160deg,#1A0040,#0D0030,#001A40);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:30px;
  transition:opacity .5s,transform .5s;
}
#splash.hide{opacity:0;transform:scale(1.04);pointer-events:none}
.splash-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sstar{position:absolute;border-radius:50%;animation:twinkle 2.5s infinite}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}
.splash-emoji{font-size:2rem;animation:eFloat 2s ease-in-out infinite}
@keyframes eFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.splash-title{
  font-family:'Fredoka One',cursive;
  font-size:clamp(2.6rem,10vw,4.2rem);
  background:linear-gradient(135deg,var(--yellow),var(--pink),var(--blue));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-align:center;line-height:1.05;
  animation:logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.splash-sub{font-size:clamp(.9rem,3vw,1.15rem);color:rgba(255,255,255,.85);font-weight:700;text-align:center}
#openBtn{
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  color:var(--dark);border:none;border-radius:50px;
  padding:18px 52px;
  font-family:'Fredoka One',cursive;font-size:clamp(1.2rem,4vw,1.5rem);
  cursor:pointer;
  box-shadow:0 6px 30px rgba(255,214,0,.6);
  animation:btnPulse 2s ease-in-out infinite;
  transition:transform .15s;
}
#openBtn:hover{transform:scale(1.04)}
#openBtn:active{transform:scale(.96)}
@keyframes btnPulse{
  0%,100%{box-shadow:0 6px 30px rgba(255,214,0,.5)}
  50%{box-shadow:0 6px 50px rgba(255,214,0,.9),0 0 0 8px rgba(255,107,0,.3)}
}
.splash-author{font-size:.8rem;color:rgba(255,255,255,.4);letter-spacing:1px;font-weight:700}

/* APP SHELL */
#app{
  display:none;flex-direction:column;
  width:100%;
  height:100vh;
  height:100dvh;
  height:-webkit-fill-available;
  max-height:-webkit-fill-available;
}
#app.show{display:flex}

/* TOP BAR */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 8px;
  background:linear-gradient(90deg,var(--pink),var(--purple));
  flex-shrink:0;
}
.tb-home{
  background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.35);
  border-radius:50%;width:36px;height:36px;
  color:#fff;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;flex-shrink:0;
}
.tb-home:active{background:rgba(255,255,255,.4)}
.tb-title{
  font-family:'Fredoka One',cursive;
  font-size:clamp(.9rem,3vw,1.1rem);
  color:var(--yellow);text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.tb-right{display:flex;align-items:center;gap:8px}
.stars-badge{
  background:rgba(0,0,0,.3);border:2px solid rgba(255,214,0,.5);
  border-radius:20px;padding:3px 10px;
  font-size:.75rem;font-weight:900;color:var(--yellow);
}
.pg-badge{
  background:rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.2);
  border-radius:20px;padding:3px 10px;
  font-size:.75rem;font-weight:900;color:#fff;
}

/* PROGRESS */
.progress{height:5px;background:rgba(255,255,255,.15);flex-shrink:0}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--yellow),var(--green),var(--teal));
  transition:width .35s ease;
}

/* PAGE AREA */
#pageArea{
  flex:1;position:relative;overflow:hidden;
  display:flex;align-items:stretch;min-height:0;
}

/* NAV ARROWS */
.nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;z-index:30;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  border:3px solid var(--yellow);border-radius:50%;
  color:#fff;font-size:1.5rem;font-weight:900;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(255,45,120,.6);
  transition:transform .15s;
}
.nav-btn:active{transform:translateY(-50%) scale(.9)}
.nav-btn:disabled{opacity:.2;pointer-events:none}
.nav-btn.prev{left:4px}
.nav-btn.next{right:4px}

/* READ PAGE */
.read-page{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:8px;
}
.read-page img{
  max-height:100%;max-width:100%;
  object-fit:contain;border-radius:14px;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
  animation:pageIn .3s ease;
}
@keyframes pageIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}

/* INTERACT PAGE */
.interact-wrap{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:8px 8px 80px;
  scrollbar-width:thin;scrollbar-color:rgba(255,45,120,.4) transparent;
}
.interact-wrap::-webkit-scrollbar{width:4px}
.interact-wrap::-webkit-scrollbar-thumb{background:rgba(255,45,120,.4);border-radius:4px}
.page-img-top{
  width:100%;max-width:480px;max-height:45vh;
  object-fit:contain;border-radius:12px;
  box-shadow:0 6px 30px rgba(0,0,0,.5);flex-shrink:0;
}

/* BOTTOM BAR */
.botbar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 12px 14px;
  background:linear-gradient(90deg,#1A0040,#0D0030);
  flex-shrink:0;
}
.bot-btn{
  background:linear-gradient(135deg,var(--pink),var(--purple));
  border:none;border-radius:50px;padding:9px 18px;
  color:#fff;font-family:'Nunito',sans-serif;font-weight:900;font-size:.82rem;
  cursor:pointer;display:flex;align-items:center;gap:5px;
  box-shadow:0 4px 15px rgba(155,0,255,.4);
  transition:transform .15s;white-space:nowrap;
}
.bot-btn:active{transform:scale(.95)}
.amz-btn{
  background:linear-gradient(135deg,var(--yellow),var(--orange)) !important;
  color:var(--dark) !important;
  box-shadow:0 4px 15px rgba(255,107,0,.5) !important;
}

/* READ ALOUD */
#readBtn{
  position:fixed;bottom:70px;right:12px;
  width:50px;height:50px;z-index:50;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  border:3px solid var(--yellow);border-radius:50%;
  color:#fff;font-size:1.4rem;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,180,255,.6);
  animation:speakerPulse 2.5s ease-in-out infinite;
}
#readBtn.show{display:flex}
#readBtn.speaking{
  background:linear-gradient(135deg,var(--pink),var(--orange));
  animation:speakingAnim .6s ease-in-out infinite;
}
@keyframes speakerPulse{0%,100%{box-shadow:0 4px 20px rgba(0,180,255,.5)}50%{box-shadow:0 4px 30px rgba(0,180,255,1)}}
@keyframes speakingAnim{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* THUMBS */
#thumbPanel{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:rgba(10,0,30,.97);
  border-top:2px solid rgba(255,45,120,.4);
  padding:14px 12px 20px;
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
#thumbPanel.open{transform:translateY(0)}
.thumb-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.thumb-ttl{font-family:'Fredoka One',cursive;color:var(--yellow);font-size:1rem}
.thumb-close{
  background:rgba(255,45,120,.3);border:2px solid rgba(255,45,120,.5);
  border-radius:50%;width:30px;height:30px;
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.thumb-row{
  display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.thumb-row::-webkit-scrollbar{height:3px}
.thumb-row::-webkit-scrollbar-thumb{background:rgba(255,45,120,.4);border-radius:4px}
.thumb{
  flex-shrink:0;width:56px;height:74px;position:relative;
  border-radius:8px;overflow:hidden;cursor:pointer;
  border:2.5px solid transparent;scroll-snap-align:start;
  transition:border-color .2s,transform .2s;
}
.thumb.active{border-color:var(--yellow);transform:scale(1.1)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb span{
  position:absolute;bottom:2px;right:3px;
  font-size:.55rem;color:#fff;font-weight:900;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
#thumbOverlay{
  display:none;position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.5);
}
#thumbOverlay.show{display:block}

/* STAR POP */
#starPop{
  position:fixed;top:50%;left:50%;z-index:200;
  transform:translate(-50%,-50%) scale(0);
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  border-radius:20px;padding:16px 28px;text-align:center;
  pointer-events:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 10px 40px rgba(255,214,0,.6);
}
#starPop.show{transform:translate(-50%,-50%) scale(1)}
#starPop .icon{font-size:2.5rem}
#starPop .msg{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--dark);margin-top:4px}

/* COMPLETION */
#completion{
  display:none;position:fixed;inset:0;z-index:300;
  background:linear-gradient(160deg,#1A0040,#0D0030,#001A40);
  flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:40px;text-align:center;
}
#completion.show{display:flex}
.comp-icon{font-size:4rem;animation:compBounce 1s ease-in-out infinite}
@keyframes compBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.comp-title{
  font-family:'Fredoka One',cursive;font-size:clamp(1.8rem,6vw,2.6rem);
  background:linear-gradient(135deg,var(--yellow),var(--pink),var(--blue));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.comp-text{color:rgba(255,255,255,.85);font-size:1rem;line-height:1.6;max-width:320px;font-weight:700}
.comp-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.comp-btn{
  padding:12px 28px;border-radius:50px;border:none;
  font-family:'Nunito',sans-serif;font-weight:900;font-size:.95rem;cursor:pointer;
}
.comp-primary{background:linear-gradient(135deg,var(--yellow),var(--orange));color:var(--dark)}
.comp-sec{background:rgba(255,255,255,.15);color:#fff;border:2px solid rgba(255,255,255,.3)!important}

/* ── ACTIVITY PANELS ── */
.act-panel{width:100%;max-width:480px;border-radius:16px;padding:14px;margin-top:10px;flex-shrink:0}

/* MAZE */
.maze-panel{background:linear-gradient(135deg,var(--pink),var(--purple))}
.maze-title{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--yellow);text-align:center;margin-bottom:8px}
.color-row{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.color-dot{
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:3px solid transparent;box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:all .15s;flex-shrink:0;
}
.color-dot.active{border-color:#fff;transform:scale(1.2)}
.maze-canvas-wrap{
  position:relative;width:100%;border-radius:12px;overflow:hidden;
  border:3px solid var(--yellow);background:#fff;touch-action:none;
}
.maze-canvas-wrap img{display:block;width:100%;pointer-events:none;user-select:none}
.maze-canvas-wrap canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
.maze-hint{font-size:.78rem;color:rgba(255,255,255,.9);text-align:center;margin:6px 0;font-weight:800}
.maze-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.maze-btn{
  border:none;border-radius:50px;padding:9px 18px;
  font-family:'Fredoka One',cursive;font-size:.95rem;cursor:pointer;
  transition:transform .15s;box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.maze-btn:active{transform:scale(.95)}
.btn-clear{background:linear-gradient(135deg,var(--orange),var(--pink));color:#fff}
.btn-markers{background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff}
.btn-solved{background:linear-gradient(135deg,var(--green),var(--teal));color:var(--dark)}
.maze-done{
  display:none;text-align:center;font-family:'Fredoka One',cursive;
  font-size:1rem;color:var(--yellow);margin-top:8px;padding:10px;
  background:rgba(0,0,0,.25);border-radius:12px;
}

/* DICE */
.dice-panel{background:linear-gradient(135deg,var(--blue),var(--purple))}
.dice-title{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--yellow);text-align:center;margin-bottom:10px}
.dice-face{
  width:88px;height:88px;background:#fff;border-radius:16px;
  border:4px solid var(--yellow);margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  font-size:3.4rem;cursor:pointer;user-select:none;
  box-shadow:0 8px 25px rgba(0,0,0,.4);transition:transform .1s;
}
.dice-face.rolling{animation:diceRoll .6s ease}
@keyframes diceRoll{
  0%{transform:rotate(0) scale(1)}
  25%{transform:rotate(-20deg) scale(1.2)}
  50%{transform:rotate(20deg) scale(.9)}
  75%{transform:rotate(-10deg) scale(1.1)}
  100%{transform:rotate(0) scale(1)}
}
.dice-result{
  background:rgba(0,0,0,.25);border-radius:12px;padding:12px 16px;
  text-align:center;border:2px solid rgba(255,255,255,.2);
}
.dice-num{font-family:'Fredoka One',cursive;font-size:1rem;color:var(--yellow);margin-bottom:4px}
.dice-act{font-size:1.05rem;font-weight:900;color:#fff;line-height:1.3}
.roll-btn{
  display:block;width:100%;margin-top:12px;
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  color:var(--dark);border:none;border-radius:50px;
  padding:13px;font-family:'Fredoka One',cursive;font-size:1.1rem;
  cursor:pointer;box-shadow:0 5px 20px rgba(255,214,0,.5);transition:transform .15s;
}
.roll-btn:active{transform:scale(.96)}

/* CHECKLIST */
.check-panel{background:linear-gradient(135deg,var(--orange),var(--pink))}
.check-title{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--yellow);text-align:center;margin-bottom:8px}
.check-prog{
  background:rgba(0,0,0,.25);border-radius:8px;padding:4px 10px;
  margin-bottom:8px;text-align:center;color:#fff;font-weight:900;font-size:.82rem;
}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.check-item{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.25);
  border-radius:12px;padding:8px 10px;cursor:pointer;
  transition:all .2s;user-select:none;
}
.check-item.done{background:linear-gradient(135deg,var(--green),var(--teal));border-color:var(--green)}
.check-item.done .check-lbl{color:var(--dark)}
.check-box{
  width:26px;height:26px;flex-shrink:0;
  border:3px solid rgba(255,255,255,.6);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;background:rgba(255,255,255,.1);transition:all .2s;
}
.check-item.done .check-box{background:var(--yellow);border-color:var(--yellow);color:var(--dark)}
.check-lbl{font-size:.68rem;font-weight:900;color:#fff;line-height:1.2;text-transform:uppercase}
.reset-btn{
  display:block;width:100%;margin-top:10px;
  background:rgba(0,0,0,.3);color:#fff;
  border:2px solid rgba(255,255,255,.3);border-radius:50px;
  padding:8px;font-weight:900;font-size:.82rem;cursor:pointer;
}

/* BINGO */
.bingo-panel{background:linear-gradient(135deg,var(--purple),var(--pink))}
.bingo-title{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--yellow);text-align:center;margin-bottom:4px}
.bingo-sub{font-size:.78rem;color:rgba(255,255,255,.8);text-align:center;font-weight:700;margin-bottom:8px}
.bingo-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.bingo-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.bingo-cell{
  background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.3);
  border-radius:10px;padding:6px 4px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:.62rem;font-weight:900;color:#fff;
  text-transform:uppercase;line-height:1.2;cursor:pointer;
  transition:all .2s;min-height:52px;user-select:none;
}
.bingo-grid-5 .bingo-cell{min-height:40px;font-size:.52rem;border-radius:7px}
.bingo-cell.free{background:linear-gradient(135deg,var(--yellow),var(--orange));color:var(--dark);border-color:var(--yellow)}
.bingo-cell.marked{background:linear-gradient(135deg,var(--green),var(--teal));border-color:var(--green);color:var(--dark);transform:scale(1.05)}
.bingo-status{
  text-align:center;font-family:'Fredoka One',cursive;font-size:1.1rem;
  color:var(--yellow);min-height:28px;margin-top:8px;
}

/* GRATITUDE */
.grat-panel{background:linear-gradient(135deg,var(--blue),var(--teal))}
.grat-title{font-family:'Fredoka One',cursive;font-size:1.1rem;color:var(--dark);text-align:center;margin-bottom:10px}
.grat-fields{display:flex;flex-direction:column;gap:8px}
.grat-field label{font-size:.72rem;font-weight:900;color:var(--dark);text-transform:uppercase;display:block;margin-bottom:3px}
.grat-field input{
  width:100%;background:rgba(255,255,255,.95);
  border:2px solid rgba(0,0,0,.15);border-radius:8px;
  padding:8px 10px;font-family:'Nunito',sans-serif;
  font-weight:700;font-size:.9rem;color:var(--dark);outline:none;
}
.grat-field input:focus{border-color:var(--pink)}
.grat-save{
  display:block;width:100%;margin-top:10px;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;border:none;border-radius:50px;
  padding:11px;font-family:'Fredoka One',cursive;font-size:1.1rem;cursor:pointer;
}
.grat-saved{display:none;text-align:center;color:var(--dark);font-weight:900;font-size:.9rem;margin-top:6px}

/* AWARD */
.award-panel{background:linear-gradient(135deg,var(--yellow),var(--orange))}
.award-title{font-family:'Fredoka One',cursive;font-size:1.1rem;color:var(--dark);text-align:center;margin-bottom:10px}
.award-label{font-size:.75rem;font-weight:900;color:var(--dark);text-transform:uppercase;display:block;margin-bottom:4px}
.award-name-input{
  width:100%;background:rgba(255,255,255,.95);
  border:3px solid rgba(0,0,0,.2);border-radius:10px;
  padding:10px 14px;font-family:'Fredoka One',cursive;
  font-size:1.3rem;color:var(--dark);outline:none;
}
.award-name-input:focus{border-color:var(--pink)}
.award-date-input{
  width:100%;margin-top:8px;background:rgba(255,255,255,.95);
  border:3px solid rgba(0,0,0,.2);border-radius:10px;
  padding:9px 14px;font-family:'Nunito',sans-serif;
  font-weight:700;font-size:1rem;color:var(--dark);outline:none;
}
.award-claim{
  display:block;width:100%;margin-top:10px;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;border:none;border-radius:50px;
  padding:12px;font-family:'Fredoka One',cursive;font-size:1.1rem;cursor:pointer;
}
.award-download{
  display:none;width:100%;margin-top:8px;
  background:linear-gradient(135deg,var(--green),var(--teal));
  color:var(--dark);border:none;border-radius:50px;
  padding:12px;font-family:'Fredoka One',cursive;font-size:1.1rem;cursor:pointer;
}
.award-congrats{display:none;text-align:center;font-family:'Fredoka One',cursive;font-size:1rem;color:var(--dark);margin-top:8px}