:root{
  --bg1:#fff6e6; --bg2:#ffe6f2; --bg3:#e6f7ff;
  --ink:#3a2c5a; --ink-soft:#6b5b8a;
  --yellow:#ffb703; --orange:#fb8500; --pink:#ff5da2; --blue:#3aa0ff;
  --green:#27c46b; --purple:#9b5de5; --red:#ef476f;
  --card:#ffffff; --shadow:0 10px 0 rgba(0,0,0,.08), 0 18px 30px rgba(120,80,180,.18);
  --radius:26px;
  --font:'Baloo 2','Fredoka',system-ui,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:var(--font); color:var(--ink);
  background:linear-gradient(135deg,var(--bg1),var(--bg2) 45%,var(--bg3));
  background-attachment:fixed;
  min-height:100%; overflow-x:hidden; user-select:none;
}

#confetti{position:fixed; inset:0; pointer-events:none; z-index:50}

/* global sound / voice control, present on every screen */
.sound-dock{position:fixed; right:10px; bottom:10px; z-index:60; display:flex; align-items:center; gap:8px}
.sound-dock .fab{width:50px; height:50px; border-radius:50%; border:none; background:#fff; box-shadow:var(--shadow);
  font-size:23px; line-height:1; cursor:pointer}
.sound-dock .fab:active{transform:translateY(3px)}
.dock-voice{font:inherit; font-weight:700; font-size:13px; max-width:46vw; padding:9px 12px; border-radius:14px;
  border:none; background:#fff; box-shadow:var(--shadow); color:var(--ink); cursor:pointer; outline:none}
.dock-voice[hidden]{display:none}

/* screens */
.screen{display:none; min-height:100vh; padding:18px clamp(14px,4vw,40px) 30px; max-width:980px; margin:0 auto; flex-direction:column}
.screen.active{display:flex}

/* ---------- WELCOME / CHECK-IN ---------- */
.welcome-card{margin:auto; background:var(--card); border-radius:var(--radius); padding:clamp(24px,7vw,46px);
  text-align:center; box-shadow:var(--shadow); max-width:560px; width:100%}
.welcome-emoji{font-size:clamp(60px,16vw,110px); line-height:1; animation:bounce 1.6s ease-in-out infinite}
.welcome-title{font-size:clamp(24px,6.5vw,40px); margin:8px 0 2px; color:var(--purple); font-weight:800; line-height:1.15}
.welcome-sub{font-size:clamp(18px,5vw,26px); color:var(--ink-soft); font-weight:600; margin:4px 0 16px}
.welcome-body{display:flex; flex-direction:column; gap:14px; align-items:center; margin-top:8px}
.name-input{font-family:inherit; font-weight:800; font-size:clamp(22px,6vw,32px); text-align:center; color:var(--ink);
  border:4px dashed var(--pink); border-radius:18px; padding:12px 18px; width:100%; max-width:340px; outline:none; background:#fff7fb}
.name-input:focus{border-color:var(--purple)}
.entry-field{font-size:clamp(18px,5vw,24px); border-width:3px}
.shake-input{animation:shake .45s ease; border-color:var(--red)!important}
.welcome-note{font-size:clamp(13px,3.6vw,16px); color:var(--ink-soft); font-weight:700; margin:0 0 4px; background:#fff7e0; padding:6px 14px; border-radius:999px}
.welcome-options{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; width:100%}
.welcome-opt{font-family:inherit; font-weight:800; font-size:clamp(18px,5vw,24px); border:none; border-radius:999px;
  padding:16px 22px; cursor:pointer; color:#fff; box-shadow:0 7px 0 rgba(0,0,0,.15); flex:1 1 150px; min-width:140px}
.welcome-opt:active{transform:translateY(5px)}
.welcome-opt.green{background:linear-gradient(135deg,var(--green),#06d6a0)}
.welcome-opt.blue{background:linear-gradient(135deg,var(--blue),var(--purple))}
.welcome-opt.pink{background:linear-gradient(135deg,var(--pink),#9b5de5)}
.welcome-opt.orange{background:linear-gradient(135deg,var(--orange),#ffb703)}
.welcome-start{background:linear-gradient(135deg,var(--green),#06d6a0); font-size:clamp(20px,5.5vw,26px); max-width:340px; width:100%}

/* ---------- HOME ---------- */
.topbar{display:flex; justify-content:space-between; align-items:center; gap:10px}
.hello{font-size:clamp(18px,4.5vw,26px); font-weight:700; display:flex; align-items:center; gap:8px}
.wave{display:inline-block; animation:wave 2.2s ease-in-out infinite; transform-origin:70% 70%}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(16deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(16deg)}40%{transform:rotate(-4deg)}}
.name-pill{font:inherit; font-weight:800; color:var(--purple); background:#fff; border:3px dashed var(--purple);
  border-radius:999px; padding:2px 14px; cursor:pointer}
.score-pill{background:#fff; border-radius:999px; padding:8px 16px; font-weight:800; font-size:clamp(16px,4vw,20px); box-shadow:var(--shadow)}
.top-right{display:flex; align-items:center; gap:8px}
.round-btn.small{width:46px; height:46px; font-size:22px}

.hero{text-align:center; margin:14px 0 6px}
.title{font-size:clamp(40px,11vw,84px); line-height:.95; margin:6px 0;
  background:linear-gradient(90deg,var(--pink),var(--orange),var(--purple),var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 4px 0 rgba(255,255,255,.6); font-weight:800; letter-spacing:1px}
.subtitle{font-size:clamp(16px,4.5vw,24px); color:var(--ink-soft); font-weight:600; margin:2px}
.datechip{display:inline-block; background:#fff; border-radius:999px; padding:6px 16px; margin-top:8px;
  font-weight:600; color:var(--ink-soft); box-shadow:var(--shadow); font-size:clamp(12px,3.4vw,15px)}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(12px,3vw,20px); margin-top:22px}
.tile{border:none; cursor:pointer; border-radius:var(--radius); padding:22px 14px; color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:4px; box-shadow:var(--shadow);
  transition:transform .12s ease, filter .12s ease; font-family:inherit}
.tile:active{transform:translateY(6px) scale(.98); box-shadow:0 4px 0 rgba(0,0,0,.08)}
.tile:hover{filter:brightness(1.05)}
.tile-emoji{font-size:clamp(38px,9vw,56px); filter:drop-shadow(0 4px 2px rgba(0,0,0,.15))}
.tile-name{font-size:clamp(18px,4.6vw,24px); font-weight:800}
.tile-sub{font-size:clamp(11px,3vw,14px); opacity:.92; font-weight:600}
.t-daily{background:linear-gradient(135deg,#ffd166,#fb8500)}
.t-num{background:linear-gradient(135deg,#3aa0ff,#5e60ce)}
.t-abc{background:linear-gradient(135deg,#ff5da2,#9b5de5)}
.t-quiz{background:linear-gradient(135deg,#27c46b,#06d6a0)}
.t-logic{background:linear-gradient(135deg,#ef476f,#9b5de5)}
.t-story{background:linear-gradient(135deg,#ff8fab,#ffb703)}
.t-memory{background:linear-gradient(135deg,#00bbf9,#9b5de5)}
.t-add{background:linear-gradient(135deg,#06d6a0,#118ab2)}
.t-daily{grid-column:1/-1}

.home-foot{margin-top:auto; padding-top:20px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.ghost-btn{font:inherit; font-weight:700; background:#fff; border:none; border-radius:999px; padding:10px 18px; cursor:pointer; box-shadow:var(--shadow); color:var(--ink)}
.voice-pick{display:inline-flex; align-items:center; gap:6px; background:#fff; border-radius:999px; padding:6px 12px; box-shadow:var(--shadow); font-size:18px}
.voice-pick select{font:inherit; font-weight:700; font-size:14px; color:var(--ink); border:none; background:transparent; max-width:200px; cursor:pointer; outline:none}
.made{color:var(--ink-soft); font-weight:600; font-size:14px}

/* ---------- PLAY ---------- */
.play-top{display:flex; align-items:center; gap:14px}
.round-btn{font-size:24px; width:54px; height:54px; border-radius:50%; border:none; background:#fff; cursor:pointer; box-shadow:var(--shadow); flex:0 0 auto}
.round-btn:active{transform:translateY(4px)}
.progress{flex:1; height:22px; background:#fff; border-radius:999px; overflow:hidden; box-shadow:inset 0 3px 6px rgba(0,0,0,.12)}
.progress-fill{height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--green),var(--blue)); transition:width .35s ease}
.play-stars{background:#fff; border-radius:999px; padding:8px 14px; font-weight:800; box-shadow:var(--shadow); flex:0 0 auto}

.qcard{position:relative; background:var(--card); border-radius:var(--radius); margin-top:18px; padding:clamp(18px,5vw,34px);
  box-shadow:var(--shadow); text-align:center; flex:1; display:flex; flex-direction:column; justify-content:center; gap:14px}
.speak-btn{position:absolute; top:14px; right:14px; font-size:24px; width:50px; height:50px; border-radius:50%; border:none;
  background:#fff3d6; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.08)}
.speak-btn:active{transform:translateY(3px)}
.q-prompt{font-size:clamp(22px,5.5vw,34px); margin:0; padding:0 30px; font-weight:700; line-height:1.2}
.q-display{font-size:clamp(34px,10vw,70px); line-height:1.25; min-height:1.2em; word-break:break-word}
.q-display.huge{font-size:clamp(70px,22vw,150px); font-weight:800; color:var(--purple)}
.q-display .swatch{display:inline-block; width:clamp(70px,22vw,130px); height:clamp(70px,22vw,130px); border-radius:24px; box-shadow:var(--shadow); border:5px solid #fff}
.q-display .shape{display:inline-block}
.add-objects{font-size:clamp(30px,8vw,52px); line-height:1.45; word-break:break-word}
.add-objects .plus{color:var(--orange); font-weight:800; margin:0 4px}
.add-sentence{margin-top:14px; font-size:clamp(30px,9vw,48px); font-weight:800; color:var(--purple)}
.add-sentence b{color:var(--orange)}

.q-options{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,3vw,16px); margin-top:6px}
.opt{font-family:inherit; cursor:pointer; border:none; border-radius:22px; padding:clamp(14px,4vw,22px);
  font-size:clamp(24px,6vw,40px); font-weight:800; color:var(--ink); background:#fff;
  box-shadow:0 7px 0 rgba(0,0,0,.12); transition:transform .1s ease}
.opt .opt-emoji{font-size:clamp(40px,11vw,64px); display:block}
.opt .opt-label{font-size:clamp(16px,4.5vw,24px); display:block; margin-top:2px}
.opt:nth-child(4n+1){background:#fff0f6}
.opt:nth-child(4n+2){background:#e9f6ff}
.opt:nth-child(4n+3){background:#eafff2}
.opt:nth-child(4n+4){background:#fff7e0}
.opt:active{transform:translateY(5px)}
.opt.correct{background:var(--green)!important; color:#fff; animation:pop .4s ease}
.opt.wrong{background:var(--red)!important; color:#fff; animation:shake .4s ease}
.opt.dim{opacity:.45}
.opt:disabled{cursor:default}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

.feedback{text-align:center; font-size:clamp(22px,6vw,32px); font-weight:800; min-height:1.4em; margin-top:14px}
.feedback.good{color:var(--green)}
.feedback.try{color:var(--orange)}

/* ---------- MEMORY MATCH ---------- */
.mem-info{flex:1; text-align:center; background:#fff; border-radius:999px; padding:10px 14px; font-weight:800; box-shadow:var(--shadow); font-size:clamp(15px,4vw,20px)}
.mem-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,2.5vw,14px); max-width:560px; margin:18px auto 0; width:100%}
.mem-card{aspect-ratio:1; cursor:pointer; border:none; padding:0; border-radius:18px; background:#fff;
  box-shadow:0 6px 0 rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center;
  font-size:clamp(34px,9vw,56px); line-height:1;
  transition:transform .12s ease, box-shadow .15s ease, background .2s ease}
.mem-card:active{transform:translateY(4px)}
.mem-card.selected{background:#e9f6ff; transform:scale(1.05); box-shadow:0 0 0 5px var(--blue) inset, 0 6px 0 rgba(0,0,0,.12)}
.mem-card.matched{background:#eafff2; box-shadow:0 0 0 5px var(--green) inset; cursor:default; animation:pop .45s ease}
.mem-card.wrong{animation:shake .4s ease}
@media (max-width:430px){ .mem-grid{grid-template-columns:repeat(3,1fr)} }

/* ---------- STORY ---------- */
.story-card{position:relative; background:var(--card); border-radius:var(--radius); margin-top:18px; padding:clamp(20px,5vw,40px);
  box-shadow:var(--shadow); text-align:center; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px}
.story-title{margin:0; font-size:clamp(20px,5vw,30px); color:var(--purple); font-weight:800}
.story-scene{font-size:clamp(70px,20vw,140px); line-height:1.1; min-height:1.1em; animation:fadein .35s ease}
.story-text{font-size:clamp(20px,5vw,30px); font-weight:600; line-height:1.35; margin:0; max-width:18ch; color:var(--ink)}
.story-card.moral{background:linear-gradient(135deg,#fff7e0,#ffe6f2)}
.story-card.moral .story-text{color:var(--orange); font-weight:800}
@keyframes fadein{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.story-nav{display:flex; gap:14px; justify-content:center; margin-top:16px}
.story-prev{background:linear-gradient(135deg,#bdb2ff,#9b5de5)}
.story-next{background:linear-gradient(135deg,var(--green),#06d6a0)}
.big-btn:disabled{opacity:.4; cursor:default; transform:none}

/* ---------- PROFILE ---------- */
.profile-card{margin:18px auto 0; background:var(--card); border-radius:var(--radius); padding:clamp(22px,6vw,40px);
  text-align:center; box-shadow:var(--shadow); max-width:520px; width:100%}
.profile-photo{width:96px; height:96px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow); border:4px solid #fff}
.profile-avatar{font-size:84px; line-height:1}
.profile-name{font-size:clamp(26px,7vw,38px); margin:8px 0 2px; color:var(--purple); font-weight:800}
.profile-school{font-size:clamp(16px,4.5vw,20px); color:var(--ink-soft); font-weight:700; margin:2px 0}
.profile-email{font-size:clamp(12px,3.4vw,15px); color:var(--ink-soft); margin:2px 0 6px; opacity:.8}
.profile-stats{display:flex; gap:12px; justify-content:center; margin:18px 0; flex-wrap:wrap}
.profile-stats .stat{background:#fff7e0; border-radius:20px; padding:14px 10px; min-width:92px; flex:1 1 92px; box-shadow:0 4px 0 rgba(0,0,0,.06)}
.profile-stats .stat-num{font-size:clamp(26px,7vw,38px); font-weight:800; color:var(--orange); line-height:1}
.profile-stats .stat-label{font-size:clamp(11px,3vw,13px); font-weight:700; color:var(--ink-soft); margin-top:4px}
.profile-actions{display:flex; flex-direction:column; gap:12px; align-items:center; margin-top:8px}
.profile-actions .big-btn{width:100%; max-width:320px}

/* ---------- DONE ---------- */
.done-card{margin:auto; background:var(--card); border-radius:var(--radius); padding:clamp(24px,7vw,48px); text-align:center; box-shadow:var(--shadow); max-width:520px}
.trophy{font-size:clamp(70px,18vw,120px); animation:bounce 1.4s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
#doneTitle{font-size:clamp(30px,8vw,46px); margin:6px 0; color:var(--purple)}
.done-msg{font-size:clamp(16px,4.5vw,22px); color:var(--ink-soft); font-weight:600}
.star-row{font-size:clamp(34px,9vw,54px); margin:14px 0; letter-spacing:6px; min-height:1.2em}
.star-row .s{opacity:.25}
.star-row .s.lit{opacity:1; animation:pop .5s ease}
.done-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:10px}
.big-btn{font-family:inherit; font-weight:800; font-size:clamp(18px,5vw,24px); border:none; border-radius:999px;
  padding:16px 26px; cursor:pointer; color:#fff; box-shadow:0 7px 0 rgba(0,0,0,.15)}
.big-btn:active{transform:translateY(5px)}
.play-again{background:linear-gradient(135deg,var(--green),#06d6a0)}
.go-home{background:linear-gradient(135deg,var(--blue),var(--purple))}

@media (max-width:380px){ .q-options{grid-template-columns:1fr} }