/* Boopaboo styles — v1.3.0 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fef6e4;
  --ink:#3a1a4a;
  --boop:#ff6b9d;
  --boop-deep:#e84a82;
  --pink:#f582ae;
  --mint:#8bd3dd;
  --sun:#fbc740;
  --leaf:#a3d977;
  --berry:#c084fc;
  --coral:#fb923c;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --font-body:'Quicksand','Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue','Hiragino Sans','Noto Sans CJK SC','Noto Sans CJK JP','Noto Sans CJK KR','Microsoft YaHei','Noto Sans Arabic','Noto Sans Hebrew','Noto Sans Devanagari','Noto Sans',Arial,sans-serif;
  --font-display:'Fredoka',-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Noto Sans CJK SC','Noto Sans CJK JP','Noto Sans CJK KR','Microsoft YaHei','Noto Sans Arabic','Noto Sans Hebrew','Noto Sans Devanagari','Noto Sans',Arial,sans-serif;
}
html,body{height:100%;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
body{
  font-family:var(--font-body);
  font-weight:700;
  background:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(58,26,74,.12) 1px, transparent 0);
  background-size:24px 24px;
  color:var(--ink);
  min-height:100dvh;
  overflow-x:hidden;
}
.screen{position:relative;min-height:100dvh;padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));padding-top:max(16px,env(safe-area-inset-top));display:none;flex-direction:column}
.screen.active{display:flex}

.deco{position:absolute;font-size:2rem;opacity:.4;pointer-events:none;animation:float 6s ease-in-out infinite}
.deco:nth-child(2){animation-delay:-2s}
.deco:nth-child(3){animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(8deg)}}

.lang-btn{
  position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;z-index:10;
  width:48px;height:48px;
  background:#fff;color:var(--ink);
  border:3px solid var(--ink);border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.lang-btn:active{transform:translateY(2px);box-shadow:2px 2px 0 var(--ink)}
[dir="rtl"] .lang-btn{right:auto;left:14px}

dialog.lang-dialog{
  border:5px solid var(--ink);border-radius:28px;
  background:var(--bg);
  padding:0;max-width:340px;width:90vw;
  box-shadow:8px 8px 0 var(--ink);
  font-family:var(--font-body);color:var(--ink);
}
dialog.lang-dialog::backdrop{background:rgba(58,26,74,.5)}
.lang-dialog-inner{padding:22px 22px 18px}
.lang-dialog h3{
  font-family:var(--font-display);font-weight:700;
  font-size:1.4rem;text-align:center;margin-bottom:14px;color:var(--boop);
}
.lang-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto}
.lang-list button{
  background:#fff;border:3px solid var(--ink);
  border-radius:999px;padding:10px 16px;
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  color:var(--ink);cursor:pointer;text-align:start;
  display:flex;align-items:center;gap:10px;
  box-shadow:3px 3px 0 var(--ink);
}
.lang-list button:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--ink)}
.lang-list button.active{background:var(--sun)}
.lang-list .flag{font-size:1.4rem;flex:0 0 auto}
.lang-close{
  display:block;width:100%;margin-top:14px;
  background:var(--boop);color:#fff;
  border:3px solid var(--ink);border-radius:999px;
  padding:10px;font-family:var(--font-display);font-weight:700;
  font-size:1rem;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
}
.lang-close:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--ink)}

.home-header{text-align:center;padding:18px 0 6px;position:relative}
.brand{display:inline-flex;align-items:center;gap:14px;transform:rotate(-2deg)}
.mascot{
  width:74px;height:74px;flex:0 0 74px;
  background:var(--boop);
  border:4px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:5px 5px 0 var(--ink);
  position:relative;
  transform:rotate(4deg);
  animation:wobble 4s ease-in-out infinite;
}
.mascot::before{
  content:'';position:absolute;top:-9px;left:50%;
  width:14px;height:18px;
  background:var(--boop-deep);
  border:3px solid var(--ink);
  border-radius:50% 50% 30% 30% / 60% 60% 40% 40%;
  transform:translateX(-50%) rotate(-12deg);
}
.mascot::after{
  content:'';position:absolute;bottom:18px;right:10px;
  width:10px;height:6px;
  background:rgba(255,255,255,.5);
  border-radius:50%;
}
.mascot-face{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;z-index:1}
.mascot-eyes{display:flex;gap:8px}
.mascot-eyes span{width:9px;height:9px;background:#fff;border-radius:50%;border:2px solid var(--ink);position:relative}
.mascot-eyes span::after{content:'';position:absolute;width:4px;height:4px;background:var(--ink);border-radius:50%;top:2px;left:2px}
.mascot-mouth{width:14px;height:7px;border:2.5px solid var(--ink);border-top:none;border-radius:0 0 14px 14px;background:#ff7eb6;margin-top:1px}
@keyframes wobble{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-4deg) translateY(-3px)}}

.home-header h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.4rem,11vw,4.2rem);
  color:var(--boop);
  text-shadow:3px 3px 0 #fff, 4px 4px 0 var(--ink), 8px 8px 0 rgba(58,26,74,.15);
  letter-spacing:-.02em;
  line-height:1;
  display:inline-block;
  direction:ltr;
}
.home-header .sub{
  font-family:var(--font-display);font-weight:500;
  font-size:1.05rem;margin-top:18px;opacity:.7;
}

.section-row{text-align:center;margin:8px 0 0}
.section-tag{
  display:inline-block;
  font-family:var(--font-display);font-weight:700;
  font-size:.95rem;color:var(--ink);
  background:var(--sun);
  padding:8px 18px;
  border:3px solid var(--ink);border-radius:999px;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-2deg);
  margin:24px 0 4px;
}
.section-row:nth-of-type(2) .section-tag{background:var(--mint);transform:rotate(2deg)}

.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:14px auto 8px;max-width:560px;width:100%}
.game-tile{
  border:4px solid var(--ink);
  border-radius:28px;
  aspect-ratio:1;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:14px;cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1rem,3.8vw,1.3rem);
  color:var(--ink);gap:6px;
  position:relative;overflow:hidden;
  text-align:center;
  word-break:break-word;
  hyphens:auto;
}
.game-tile:nth-child(1){background:#ffd4e5;transform:rotate(-2deg)}
.game-tile:nth-child(2){background:#c8efff;transform:rotate(1.5deg)}
.game-tile:nth-child(3){background:#ffe79a;transform:rotate(-1deg)}
.game-tile:nth-child(4){background:#d9f5b1;transform:rotate(2deg)}
.game-tile:nth-child(5){background:#e8d5ff;transform:rotate(-1.5deg)}
.game-tile:nth-child(6){background:#ffd9b8;transform:rotate(1deg)}
.game-tile:active{transform:translateY(4px) rotate(0);box-shadow:2px 2px 0 var(--ink)}
.game-tile-emoji{font-size:clamp(3rem,10vw,4.4rem);line-height:1;filter:drop-shadow(2px 3px 0 rgba(58,26,74,.2))}

.about-section{
  max-width:600px;margin:32px auto 8px;padding:18px 22px;
  background:#fff;border:4px solid var(--ink);border-radius:24px;
  box-shadow:var(--shadow);
  font-family:var(--font-body);
}
.about-section h2{
  font-family:var(--font-display);font-weight:700;
  font-size:1.3rem;color:var(--boop);margin-bottom:8px;
}
.about-section p{
  font-size:.95rem;line-height:1.5;color:var(--ink);font-weight:500;
}

.footer-mark{text-align:center;font-family:var(--font-display);font-weight:500;font-size:.85rem;opacity:.6;padding:18px 0 4px;display:flex;flex-direction:column;gap:4px;align-items:center}
.footer-mark a{color:var(--ink);text-decoration:none;border-bottom:1px dashed rgba(58,26,74,.3)}
.footer-mark a:active{opacity:.6}

.game-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 0 16px}
.icon-btn{
  background:#fff;color:var(--ink);
  border:3px solid var(--ink);
  border-radius:999px;
  padding:10px 18px;
  font-family:var(--font-display);font-weight:600;
  font-size:1rem;cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.icon-btn:active{transform:translateY(2px);box-shadow:2px 2px 0 var(--ink)}
.icon-btn.round{width:48px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.game-title{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--ink);text-align:center;flex:1}

.game-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding-bottom:20px}

.big-tile{
  background:#fff;border:4px solid var(--ink);border-radius:24px;
  box-shadow:var(--shadow);padding:14px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .25s ease;
  font-size:clamp(2.6rem,9vw,4rem);aspect-ratio:1;
}
.big-tile:active{transform:translateY(4px);box-shadow:2px 2px 0 var(--ink)}
.big-tile.correct{animation:bounce .55s;background:var(--leaf)}
.big-tile.wrong{animation:shake .4s}
.big-tile.letter-style{font-family:var(--font-display);font-weight:700;color:var(--boop);direction:ltr}
.big-tile.number-style{font-family:var(--font-display);font-weight:700;color:var(--boop);font-size:clamp(2.8rem,10vw,4.2rem);direction:ltr}
@keyframes bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.18) rotate(-3deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}

.prompt{
  background:var(--sun);border:4px solid var(--ink);
  border-radius:22px;padding:18px 26px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,4.8vw,1.9rem);text-align:center;
  box-shadow:var(--shadow);transform:rotate(-1deg);
  max-width:90vw;line-height:1.2;
}

.grid-2x2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:480px;width:100%}
.grid-3x2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:520px;width:100%}
.grid-3x3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:520px;width:100%}

.color-circle{
  border:5px solid var(--ink);border-radius:50%;aspect-ratio:1;
  box-shadow:var(--shadow);cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.color-circle:active{transform:translateY(4px);box-shadow:2px 2px 0 var(--ink)}
.color-circle.correct{animation:bounce .55s}
.color-circle.wrong{animation:shake .4s}

.memory-card{
  aspect-ratio:1;background:var(--boop);
  border:4px solid var(--ink);border-radius:22px;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(2.6rem,9vw,4rem);cursor:pointer;
  box-shadow:var(--shadow);
  transition:background .25s, transform .15s;
  color:#fff;
}
.memory-card:active{transform:translateY(2px)}
.memory-card.flipped{background:#fff;color:var(--ink)}
.memory-card.matched{background:var(--leaf);pointer-events:none;animation:bounce .55s}
.back-q{font-size:2.4rem;font-family:var(--font-display);font-weight:700;color:#fff}

.count-stage{
  width:100%;max-width:540px;min-height:260px;
  background:#fff;border:4px solid var(--ink);
  border-radius:24px;padding:18px;
  display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;justify-content:center;
  box-shadow:var(--shadow);
}
.count-item{
  font-size:clamp(2.4rem,9vw,3.6rem);cursor:pointer;
  transition:transform .15s;line-height:1;
  filter:drop-shadow(2px 2px 0 rgba(58,26,74,.15));
}
.count-item:active{transform:scale(1.2)}
.count-item.tapped{animation:pop .5s forwards;opacity:.3;pointer-events:none}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(15deg)}100%{transform:scale(.7) rotate(0)}}

.letter-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:680px;width:100%;direction:ltr}
@media (max-width:480px){.letter-grid{grid-template-columns:repeat(5,1fr);gap:7px}}
.letter-tile{
  aspect-ratio:1;background:#fff;
  border:3px solid var(--ink);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,6vw,2.1rem);
  cursor:pointer;box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s, background .25s;
}
.letter-tile:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--ink)}
.letter-tile.active{background:var(--sun);animation:bounce .45s}

.abc-display{
  background:#fff;border:4px solid var(--ink);border-radius:24px;
  box-shadow:var(--shadow);padding:18px 24px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:100%;max-width:340px;transform:rotate(-1deg);
  direction:ltr;
}
.abc-display .letter{font-family:var(--font-display);font-weight:700;font-size:5rem;line-height:1;color:var(--boop)}
.abc-display .word{font-family:var(--font-display);font-weight:600;font-size:1.3rem}

.hero-emoji{font-size:clamp(5rem,18vw,7.5rem);line-height:1;filter:drop-shadow(3px 3px 0 rgba(58,26,74,.2))}
.hero-word{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,6vw,2.4rem);color:var(--ink);letter-spacing:.05em;direction:ltr}

.pattern-strip{
  display:flex;gap:6px;flex-wrap:nowrap;justify-content:center;align-items:center;
  background:#fff;border:4px solid var(--ink);border-radius:24px;
  padding:14px 12px;box-shadow:var(--shadow);max-width:90vw;
  font-size:clamp(1.9rem,7vw,2.8rem);line-height:1;
  direction:ltr;
}
.pattern-strip span{filter:drop-shadow(1px 1px 0 rgba(58,26,74,.15))}
.pattern-strip .qmark{opacity:.7;color:var(--boop-deep);font-family:var(--font-display);font-weight:700}

.size-stage{
  display:flex;gap:24px;align-items:center;justify-content:center;
  background:#fff;border:4px solid var(--ink);border-radius:24px;
  padding:30px 24px;box-shadow:var(--shadow);
  min-height:240px;width:100%;max-width:480px;
}
.size-item{cursor:pointer;line-height:1;transition:transform .15s;filter:drop-shadow(2px 2px 0 rgba(58,26,74,.2))}
.size-item.big{font-size:clamp(5rem,22vw,9rem)}
.size-item.small{font-size:clamp(2rem,8vw,3rem)}
.size-item.correct{animation:bounce .55s}
.size-item.wrong{animation:shake .4s}

.math-eq{
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
  background:#fff;border:4px solid var(--ink);border-radius:24px;
  padding:18px;box-shadow:var(--shadow);max-width:90vw;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,7vw,3rem);
  direction:ltr;
}
.math-group{display:flex;gap:2px}
.math-op{color:var(--boop)}
.math-q{color:var(--boop-deep);min-width:1.2em;text-align:center}

.sort-display{
  font-size:clamp(5rem,18vw,7.5rem);
  background:#fff;border:4px solid var(--ink);border-radius:24px;
  width:160px;height:160px;
  display:flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:var(--shadow);
}
.sort-bins{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:480px;width:100%}
.sort-bin{
  aspect-ratio:1.4;background:#fff;
  border:4px solid var(--ink);border-radius:22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow);
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;
  gap:6px;color:var(--ink);
  transition:background .25s, transform .15s;
  text-align:center;padding:6px;
}
.sort-bin:active{transform:translateY(2px)}
.sort-bin .bin-emoji{font-size:3rem;line-height:1}
.sort-bin.correct{background:var(--leaf);animation:bounce .55s}
.sort-bin.wrong{animation:shake .4s}

.stars{position:fixed;pointer-events:none;inset:0;overflow:hidden;z-index:100}
.star{position:absolute;font-size:2rem;animation:rise 1.5s ease-out forwards}
@keyframes rise{
  0%{transform:translateY(0) rotate(0) scale(.5);opacity:1}
  100%{transform:translateY(-340px) rotate(540deg) scale(1.2);opacity:0}
}

.banner{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:var(--sun);border:5px solid var(--ink);
  border-radius:32px;padding:22px 44px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.2rem,8vw,3rem);
  box-shadow:8px 8px 0 var(--ink);
  z-index:200;animation:pop-banner .6s ease-out;
  pointer-events:none;
}
@keyframes pop-banner{
  0%{transform:translate(-50%,-50%) scale(0) rotate(-15deg)}
  60%{transform:translate(-50%,-50%) scale(1.15) rotate(3deg)}
  100%{transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
}

.next-btn{
  background:var(--boop);color:#fff;
  border:4px solid var(--ink);border-radius:999px;
  padding:14px 28px;
  font-family:var(--font-display);font-weight:700;
  font-size:1.1rem;cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.next-btn:active{transform:translateY(2px);box-shadow:2px 2px 0 var(--ink)}

/* ===== Two Words bilingual game ===== */
.tw-picker-heading{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,5vw,1.8rem);
  text-align:center;color:var(--boop);margin-bottom:8px;
}
.tw-picker-wrap{
  display:flex;flex-direction:column;gap:18px;width:100%;max-width:520px;
}
.tw-row{
  background:#fff;border:4px solid var(--ink);border-radius:22px;
  box-shadow:var(--shadow);padding:14px 16px;
}
.tw-row-label{
  font-family:var(--font-display);font-weight:700;
  font-size:1rem;color:var(--ink);margin-bottom:10px;
}
.tw-lang-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}
@media (min-width:520px){.tw-lang-grid{grid-template-columns:repeat(3,1fr)}}
.tw-lang-chip{
  background:#fff;border:3px solid var(--ink);border-radius:999px;
  padding:8px 12px;
  font-family:var(--font-display);font-weight:600;
  font-size:.9rem;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;gap:6px;
  box-shadow:3px 3px 0 var(--ink);
  text-align:start;
}
.tw-lang-chip:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--ink)}
.tw-lang-chip.active{background:var(--sun)}
.tw-lang-chip .flag{font-size:1.1rem;flex:0 0 auto}
.tw-start-btn{
  background:var(--boop);color:#fff;
  border:4px solid var(--ink);border-radius:999px;
  padding:14px 32px;
  font-family:var(--font-display);font-weight:700;
  font-size:1.15rem;cursor:pointer;
  box-shadow:var(--shadow-sm);
  margin-top:6px;
}
.tw-start-btn:active{transform:translateY(2px);box-shadow:2px 2px 0 var(--ink)}

.tw-card-header{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;max-width:480px;
}
.tw-pair{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:3px solid var(--ink);border-radius:999px;
  padding:6px 14px;box-shadow:3px 3px 0 var(--ink);
  font-size:1.4rem;
}
.tw-pair .tw-arrow{
  font-family:var(--font-display);font-weight:700;
  font-size:1rem;color:var(--boop);
}
.tw-change-btn{
  background:#fff;color:var(--ink);
  border:3px solid var(--ink);border-radius:999px;
  padding:8px 14px;
  font-family:var(--font-display);font-weight:600;
  font-size:.85rem;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
}
.tw-change-btn:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--ink)}

.tw-card{
  background:#fff;border:4px solid var(--ink);border-radius:28px;
  box-shadow:var(--shadow);
  padding:24px 22px;
  width:100%;max-width:480px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transform:rotate(-1deg);
}
.tw-emoji{
  font-size:clamp(5rem,18vw,7rem);line-height:1;
  filter:drop-shadow(3px 3px 0 rgba(58,26,74,.2));
}
.tw-word{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,5.5vw,2rem);
  text-align:center;
  word-break:break-word;
  max-width:100%;
}
.tw-word.tw-native{color:var(--ink)}
.tw-word.tw-learning{color:var(--boop-deep)}
.tw-flag-sm{font-size:1.3rem;flex:0 0 auto}
.tw-divider{
  width:60%;height:3px;
  background:var(--ink);
  border-radius:2px;
  opacity:.2;
}
.tw-speak-btn{
  background:var(--mint);color:var(--ink);
  border:4px solid var(--ink);border-radius:999px;
  padding:14px 28px;
  font-family:var(--font-display);font-weight:700;
  font-size:1.1rem;cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.tw-speak-btn:active{transform:translateY(2px);box-shadow:2px 2px 0 var(--ink)}

/* ===== v1.6.0: Star badges on home tiles ===== */
.star-badge{
  position:absolute;top:8px;right:8px;
  background:#fff;border:2.5px solid var(--ink);border-radius:999px;
  padding:3px 10px;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;
  color:var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  pointer-events:none;
  display:flex;align-items:center;gap:3px;
  z-index:2;
}
.star-badge.mastered{background:var(--sun)}
.star-badge.expert{background:var(--boop);color:#fff}

/* ===== v1.6.0: Sticker book ===== */
.sb-header{
  display:flex;gap:18px;justify-content:center;width:100%;max-width:520px;
  margin-bottom:6px;
}
.sb-stat{
  background:#fff;border:4px solid var(--ink);border-radius:22px;
  box-shadow:var(--shadow);padding:14px 22px;flex:1;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transform:rotate(-1deg);
}
.sb-stat:nth-child(2){transform:rotate(1.5deg);background:var(--sun)}
.sb-stat-num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.2rem,8vw,3rem);color:var(--boop-deep);line-height:1;
}
.sb-stat-label{
  font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--ink);
}
.sb-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  width:100%;max-width:520px;
}
.sb-card{
  border:4px solid var(--ink);border-radius:22px;
  padding:12px 10px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:var(--shadow-sm);
  position:relative;
  transition:transform .15s;
}
.sb-card:nth-child(odd){transform:rotate(-1.5deg)}
.sb-card:nth-child(even){transform:rotate(1.5deg)}
.sb-card.mastered{box-shadow:5px 5px 0 var(--sun), 6px 6px 0 var(--ink)}
.sb-card.expert{box-shadow:5px 5px 0 var(--boop), 6px 6px 0 var(--ink)}
.sb-emoji{
  font-size:clamp(2.8rem,9vw,3.6rem);line-height:1;
  filter:drop-shadow(2px 2px 0 rgba(58,26,74,.15));
}
.sb-emoji.locked{filter:grayscale(1) opacity(.5)}
.sb-name{
  font-family:var(--font-display);font-weight:700;
  font-size:.9rem;text-align:center;color:var(--ink);
}
.sb-bar{
  width:90%;height:8px;background:rgba(58,26,74,.15);
  border-radius:4px;overflow:hidden;
  border:2px solid var(--ink);
}
.sb-bar-fill{
  height:100%;background:var(--boop);
  transition:width .4s ease-out;
}
.sb-card.mastered .sb-bar-fill{background:var(--sun)}
.sb-card.expert .sb-bar-fill{background:var(--boop-deep)}
.sb-stars{
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  display:flex;align-items:center;gap:4px;
  color:var(--ink);
}
.sb-badge{
  font-size:.7rem;
  background:var(--sun);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:2px 8px;
  margin-left:4px;
}
.sb-note{
  text-align:center;
  font-family:var(--font-display);font-weight:500;
  font-size:.95rem;color:var(--ink);opacity:.7;
  max-width:480px;margin:8px auto 0;
}

/* ===== v1.6.0: Install banner ===== */
.install-banner{
  position:fixed;left:0;right:0;bottom:0;
  z-index:300;
  display:flex;align-items:flex-end;justify-content:center;
  padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  pointer-events:none;
  animation:install-slide-up .35s ease-out;
}
@keyframes install-slide-up{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
.install-card{
  pointer-events:auto;
  background:#fff;
  border:4px solid var(--ink);border-radius:24px;
  box-shadow:var(--shadow);
  padding:18px 20px 16px;
  width:100%;max-width:480px;
  position:relative;
}
.install-mascot{
  position:absolute;top:-18px;left:50%;
  transform:translateX(-50%) rotate(-8deg);
  width:46px;height:46px;
  background:var(--boop);
  border:3px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  box-shadow:3px 3px 0 var(--ink);
}
.install-title{
  font-family:var(--font-display);font-weight:700;
  font-size:1.2rem;color:var(--boop-deep);
  text-align:center;margin-top:12px;margin-bottom:6px;
}
.install-body{
  font-family:var(--font-body);font-weight:600;
  font-size:.95rem;color:var(--ink);
  text-align:center;line-height:1.4;
  margin-bottom:14px;
}
.install-btns{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}
.install-cta{
  background:var(--boop);color:#fff;
  border:3px solid var(--ink);border-radius:999px;
  padding:10px 22px;
  font-family:var(--font-display);font-weight:700;
  font-size:1rem;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
}
.install-cta:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--ink)}
.install-later{
  background:#fff;color:var(--ink);
  border:3px solid var(--ink);border-radius:999px;
  padding:10px 18px;
  font-family:var(--font-display);font-weight:600;
  font-size:.95rem;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
}
.install-later:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--ink)}
.install-close{
  position:absolute;top:6px;right:10px;
  background:transparent;border:none;
  font-size:1.6rem;line-height:1;
  cursor:pointer;color:var(--ink);
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
}
.ios-steps{display:flex;flex-direction:column;gap:8px;text-align:start}
.ios-step{
  display:flex;align-items:center;gap:10px;
  background:rgba(58,26,74,.05);
  border-radius:12px;padding:10px 12px;
}
.ios-step-num{
  width:28px;height:28px;flex:0 0 28px;
  background:var(--boop);color:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  border:2px solid var(--ink);
}
.ios-icon{font-size:1.2rem;margin-left:auto}