:root { --ink:#3b2a6b; --card:#fff; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; }
html,body { margin:0; height:100%; font-family:"Comic Sans MS","Chalkboard SE","Baloo 2",system-ui,sans-serif; color:var(--ink); }
body { background:linear-gradient(160deg,#a1f0ff,#ffd6f5 55%,#fff3b0); background-attachment:fixed; }
#app { max-width:820px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; padding:12px 16px 24px; }
#top { display:flex; align-items:center; gap:10px; }
#title { flex:1; font-size:26px; font-weight:900; text-align:center; letter-spacing:1px;
  background:linear-gradient(90deg,#ff5252,#ffb300,#43a047,#1e88e5,#8e24aa); -webkit-background-clip:text; background-clip:text; color:transparent; }
#totalStars { background:#fff; padding:6px 12px; border-radius:20px; font-weight:900; box-shadow:0 3px 0 #0002; }
.round { width:46px; height:46px; border-radius:50%; border:0; background:#fff; font-size:22px; box-shadow:0 4px 0 #0002; cursor:pointer; }
.round:active, .btn:active, .choice:active, .tile:active { transform:translateY(3px); box-shadow:none; }
#screen { flex:1; display:flex; flex-direction:column; align-items:center; padding-top:14px; }

h2 { margin:6px 0 14px; font-size:28px; text-align:center; }
.map { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px; width:100%; }
.level { border:0; border-radius:26px; padding:16px 8px; color:#fff; font:inherit; cursor:pointer;
  box-shadow:0 7px 0 #0003; display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; }
.level .ic { font-size:52px; line-height:1; }
.level .nm { font-weight:900; font-size:18px; }
.level .num { position:absolute; top:8px; left:12px; font-weight:900; opacity:.85; }
.level .st { font-size:20px; letter-spacing:2px; }
.level.locked { filter:grayscale(1) brightness(1.1); opacity:.6; cursor:not-allowed; }
.level:not(.locked):active { transform:translateY(4px); box-shadow:0 3px 0 #0003; }
.level:not(.locked):hover { animation:wob .5s; }

.bar { width:100%; height:18px; background:#fff; border-radius:12px; overflow:hidden; box-shadow:inset 0 2px 0 #0002; margin-bottom:14px; }
.bar > i { display:block; height:100%; width:0; background:linear-gradient(90deg,#ffca28,#ff7043); transition:width .4s; border-radius:12px; }
.prompt { font-size:24px; font-weight:900; text-align:center; margin:4px 0 10px; }
.big { font-size:110px; line-height:1.1; background:#fff; border-radius:36px; padding:14px 34px; box-shadow:0 8px 0 #0002; margin-bottom:18px; }
.big.speak { font-size:80px; cursor:pointer; animation:pulse 1.4s infinite; }
.choices { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; width:100%; }
.choice { flex:1 1 150px; max-width:240px; font:inherit; font-size:30px; font-weight:900; padding:18px 10px; border:0; border-radius:24px;
  background:#fff; color:var(--ink); box-shadow:0 6px 0 #0002; cursor:pointer; }
.choice.emoji { font-size:64px; padding:10px; }
.choice.right { background:#8be08b; animation:pop .4s; }
.choice.wrong, .tile.wrong, .card.wrong { background:#ff9a9a; animation:shake .4s; }
.slots { display:flex; gap:8px; margin:6px 0 22px; flex-wrap:wrap; justify-content:center; }
.slot { width:54px; height:64px; border-radius:14px; background:#fff8; border:3px dashed #7b61c9; display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:900; }
.slot.filled { background:#fff; border-style:solid; border-color:#43a047; animation:pop .3s; }
.tile { font:inherit; width:62px; height:68px; font-size:36px; font-weight:900; border:0; border-radius:16px; background:#ffd54f; box-shadow:0 6px 0 #c99a00; cursor:pointer; }
.tile.used { visibility:hidden; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:100%; }
.card { aspect-ratio:1; border:0; border-radius:18px; font:inherit; font-size:34px; font-weight:900; background:#7e57c2; color:#fff; box-shadow:0 5px 0 #0003; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.card.word.up, .card.word.done { font-size:20px; }
.card.up { background:#fff; color:var(--ink); }
.card.done { background:#8be08b; color:var(--ink); }
.btn { font:inherit; font-size:26px; font-weight:900; padding:14px 34px; border:0; border-radius:30px; background:#43a047; color:#fff; box-shadow:0 6px 0 #1b5e20; cursor:pointer; margin:8px; }
.btn.alt { background:#1e88e5; box-shadow:0 6px 0 #0d47a1; }
.result .stars { font-size:70px; letter-spacing:6px; }
.result .stars .off { filter:grayscale(1); opacity:.3; }
.cheer { font-size:30px; font-weight:900; margin:8px 0; text-align:center; }

#confetti { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.bit { position:absolute; top:-20px; width:12px; height:16px; animation:fall linear forwards; }
@keyframes fall { to { transform:translateY(110vh) rotate(720deg); } }
@keyframes pop { 50% { transform:scale(1.15); } }
@keyframes shake { 25% { transform:translateX(-8px); } 75% { transform:translateX(8px); } }
@keyframes pulse { 50% { transform:scale(1.06); } }
@keyframes wob { 30% { transform:rotate(-3deg); } 60% { transform:rotate(3deg); } }
@media (max-width:480px) { .big { font-size:84px; } .tile { width:50px; height:58px; font-size:30px; } .slot { width:44px; height:54px; font-size:30px; } }

/* ---- v2 additions ---- */
.tabs { display:flex; gap:8px; width:100%; margin-bottom:14px; }
.tab { flex:1; font:inherit; font-size:18px; font-weight:900; padding:12px 6px; border:0; border-radius:20px; background:#fff9; color:var(--ink); box-shadow:0 4px 0 #0002; cursor:pointer; }
.tab.on { background:#fff; box-shadow:0 4px 0 #7b61c9; color:#6a1b9a; }
.level .sub { font-size:12px; opacity:.9; text-align:center; }
.level .ic { font-size:46px; }
.map { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.big.sm { font-size:64px; padding:8px 26px; margin-bottom:12px; }
.sent { font-size:28px; font-weight:900; text-align:center; background:#fff; border-radius:24px; padding:18px 20px; margin-bottom:14px; box-shadow:0 6px 0 #0002; cursor:pointer; line-height:1.4; }
.blank { display:inline-block; min-width:70px; border-bottom:4px dashed #7b61c9; color:#7b61c9; padding:0 6px; }
.blank.ok { color:#2e7d32; border-bottom-style:solid; border-color:#43a047; animation:pop .4s; }
.tr { font-size:18px; color:#6a1b9a; margin:-4px 0 12px; text-align:center; }
.built { min-height:70px; width:100%; background:#fff; border-radius:24px; padding:12px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin-bottom:18px; box-shadow:0 6px 0 #0002; }
.chip { background:#c8e6c9; border-radius:12px; padding:6px 12px; font-size:24px; font-weight:900; animation:pop .3s; }
.chip.ghost { background:none; color:#bbb; }
.tile.word { width:auto; min-width:56px; padding:0 14px; font-size:24px; background:#ffd54f; }
.choice.two { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:60px; }
.choice.two small { font-size:20px; font-weight:900; }
.choices.col { flex-direction:column; align-items:stretch; }
.choice.sentbtn { max-width:none; font-size:22px; padding:14px 16px; text-align:left; }
.tipcard { background:#fff; border:6px solid; border-radius:32px; padding:20px; text-align:center; width:100%; box-shadow:0 8px 0 #0002; }
.tipic { font-size:70px; }
.tiptxt { font-size:21px; line-height:1.5; margin:6px 0 14px; }
.exs { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:10px; }
.ex { background:#fff3b0; border-radius:16px; padding:8px 16px; font-size:22px; font-weight:900; }

/* ---- mascot ---- */
#app { padding-bottom: 150px; }
#mascot { position: fixed; bottom: 4px; right: max(8px, calc((100vw - 820px) / 2 + 8px)); display: flex; align-items: flex-end; gap: 4px; pointer-events: none; z-index: 5; }
#mascot img { height: 118px; width: auto; filter: drop-shadow(0 4px 4px #0003); }
#mascot .bubble { background: #fff; border-radius: 18px; padding: 8px 12px; font-weight: 900; font-size: 18px; max-width: 160px; margin-bottom: 70px; box-shadow: 0 4px 0 #0002; position: relative; }
#mascot .bubble::after { content: ""; position: absolute; right: -8px; bottom: 12px; border: 8px solid transparent; border-left-color: #fff; border-right: 0; }
#mascot.pop img { animation: mpop .45s; transform-origin: bottom center; }
@keyframes mpop { 0% { transform: scale(.8) translateY(10px); } 50% { transform: scale(1.12) translateY(-8px); } 100% { transform: scale(1); } }
@media (max-width: 480px) { #mascot img { height: 92px; } #app { padding-bottom: 120px; } #mascot .bubble { font-size: 15px; max-width: 120px; margin-bottom: 52px; } }

/* ---- bigger, front-and-center brothers ---- */
.hero { display:flex; align-items:flex-end; justify-content:center; gap:10px; width:100%; margin:-6px 0 12px; }
#heroImg { height:200px; width:auto; cursor:pointer; filter:drop-shadow(0 6px 6px #0003); transform-origin:bottom center; }
#heroImg.pop { animation:mpop .45s; }
.herobubble { background:#fff; border-radius:22px; padding:12px 18px; font-size:24px; font-weight:900; max-width:300px; margin-bottom:60px; box-shadow:0 5px 0 #0002; position:relative; }
.herobubble::after { content:""; position:absolute; left:-10px; bottom:18px; border:10px solid transparent; border-right-color:#fff; border-left:0; }
.namebox { display:flex; flex-direction:column; gap:12px; align-items:center; width:100%; max-width:360px; }
.namebox input { font:inherit; font-size:26px; font-weight:900; text-align:center; width:100%; padding:12px; border:4px solid #7b61c9; border-radius:20px; color:var(--ink); background:#fff; outline:none; }
.resultImg { height:230px; width:auto; filter:drop-shadow(0 6px 6px #0003); animation:mpop .6s; }
#title { cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:clamp(18px,5vw,28px); }
#mascot img { height:150px; }
#mascot .bubble { font-size:20px; max-width:190px; margin-bottom:90px; }
#app { padding-bottom:175px; }
@media (max-width:480px) {
  #heroImg { height:140px; } .herobubble { font-size:18px; max-width:180px; margin-bottom:40px; }
  .resultImg { height:170px; } #mascot img { height:112px; } #mascot .bubble { font-size:16px; max-width:130px; margin-bottom:60px; } #app { padding-bottom:135px; }
}

/* sticker pictures used as word images */
.stk { height:1em; width:auto; vertical-align:middle; filter:drop-shadow(0 3px 3px #0003); }
.big .stk { height:130px; margin:-6px 0; }
.big.sm .stk { height:118px; margin:-4px 0; }
.choice.emoji .stk { height:104px; }
.choice.emoji { padding:6px 10px; }
.choice.two .stk { height:74px; }
.card .stk { height:78%; }
@media (max-width:480px) { .big .stk { height:100px; } .choice.emoji .stk { height:64px; } .card .stk { height:70%; } }

/* ---- non-reader UI: icons, big buttons, tap-to-hear options ---- */
.tab { font-size:34px; padding:8px 6px; }
.big-go { font-size:44px; padding:10px 38px; min-width:110px; }
.resbtns { display:flex; justify-content:center; flex-wrap:wrap; }
.yn { display:flex; gap:22px; justify-content:center; width:100%; }
.yn-b { font:inherit; font-size:70px; line-height:1; width:46%; max-width:240px; padding:18px 0; border:0; border-radius:28px; background:#fff; box-shadow:0 7px 0 #0002; cursor:pointer; }
.yn-b:active { transform:translateY(4px); box-shadow:none; }
.yn-b.right { background:#8be08b; animation:pop .4s; }
.yn-b.wrong { background:#ff9a9a; animation:shake .4s; }
.speakp { cursor:pointer; }
.choice.armed { outline:6px solid #7b61c9; transform:scale(1.04); background:#f3ecff; }
.ex { border:0; font:inherit; cursor:pointer; box-shadow:0 4px 0 #0002; }
.ex { font-size:26px; padding:12px 20px; }