/* ================= Little Legends Academy ================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Nunito', 'Comic Sans MS', sans-serif;
  background: linear-gradient(180deg, #bfe6ff 0%, #e8f7ff 60%, #f6fbff 100%);
  color: #33415c;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

.screen { display: none; position: absolute; inset: 0; flex-direction: column; z-index: 1; }
.screen.active { display: flex; }

/* ---------------- top bars / hud ---------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: rgba(255,255,255,.75); backdrop-filter: blur(6px);
  border-bottom: 3px solid #dcecfb;
}
.bar-title { font-size: 1.25rem; font-weight: 800; color: #33415c; }
.icon-btn {
  width: 48px; height: 48px; border-radius: 16px; font-size: 1.35rem;
  background: #fff; box-shadow: 0 3px 0 #cfe2f7; transition: transform .1s;
  flex: none;
}
.icon-btn:active { transform: scale(.92); }
.hud { display: flex; gap: 8px; }
.hud-pill {
  background: #fff; border-radius: 999px; padding: 7px 14px;
  font-weight: 800; font-size: 1rem; box-shadow: 0 3px 0 #cfe2f7;
}
.hud-pill b { color: #e8960c; }

/* ---------------- HOME ---------------- */
.home-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
}
.home-mascot { font-size: 5.5rem; animation: floaty 3s ease-in-out infinite; }
.app-title {
  font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 900; color: #2b6cb0;
  text-shadow: 0 3px 0 rgba(255,255,255,.8);
}
.home-sub { font-size: 1.2rem; font-weight: 700; color: #64748b; }
.big-btn {
  min-height: 84px; min-width: 240px; padding: 14px 34px; border-radius: 999px;
  font-size: 2rem; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #63a7ff, #3f86f0);
  box-shadow: 0 7px 0 #2f6fd0, 0 12px 20px rgba(63,134,240,.35);
  transition: transform .1s;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 #2f6fd0; }
.home-row { display: flex; gap: 18px; margin-top: 6px; }
.round-btn {
  width: 76px; height: 76px; border-radius: 50%; font-size: 2rem;
  background: #fff; box-shadow: 0 5px 0 #cfe2f7;
}
.round-btn:active { transform: scale(.92); }
.hold-btn {
  width: 54px; height: 54px; border-radius: 50%; font-size: 1.4rem;
  background: rgba(255,255,255,.6); box-shadow: 0 3px 0 #d8e6f5; margin-top: 4px;
  position: relative;
}
.hold-btn.holding { background: #ffd93d; }
.hold-btn.holding::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 4px solid #ffd93d; animation: holdring 1s linear infinite;
}
@keyframes holdring { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }

/* ---------------- WORLD MAP ---------------- */
.map-grid {
  flex: 1; overflow-y: auto; padding: 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; align-content: start;
}
.world-card {
  border-radius: 26px; padding: 18px 16px 14px; color: #fff;
  box-shadow: 0 7px 0 rgba(0,0,0,.18), 0 10px 18px rgba(0,0,0,.12);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .1s;
}
.world-card:active { transform: scale(.97); }
.world-card .wc-emoji { font-size: 3rem; line-height: 1; }
.world-card h3 { font-size: 1.35rem; font-weight: 900; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.world-card .wc-games { font-size: 1.5rem; letter-spacing: 2px; opacity: .95; }
.world-card .wc-stars {
  align-self: flex-start; background: rgba(255,255,255,.9); color: #e8960c;
  border-radius: 999px; padding: 4px 12px; font-weight: 900;
}

/* practice recommendation banner (Learning Engine) */
.rec-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 16px 0; padding: 12px 16px;
  background: linear-gradient(135deg, #fff7dd, #ffe9a8);
  border: 3px solid #ffd93d; border-radius: 22px;
  box-shadow: 0 5px 0 #f0c33c, 0 8px 16px rgba(232,150,12,.18);
  cursor: pointer; transition: transform .1s;
}
.rec-banner:active { transform: scale(.97); }
.rec-banner .rec-ico {
  font-size: 2.4rem; width: 64px; height: 64px; border-radius: 18px;
  background: #fff; box-shadow: 0 3px 0 #f0d48a;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.rec-banner .rec-txt { display: flex; flex-direction: column; gap: 2px; }
.rec-banner .rec-title { font-size: .85rem; font-weight: 800; color: #b07d10; letter-spacing: .5px; text-transform: uppercase; }
.rec-banner .rec-game { font-size: 1.2rem; font-weight: 900; color: #7a5200; }
.rec-banner .rec-go { margin-left: auto; font-size: 1.8rem; }

/* ---------------- WORLD: game list ---------------- */
.game-list { flex: 1; overflow-y: auto; padding: 18px 16px 28px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.game-card {
  width: min(520px, 100%); display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 24px; padding: 16px 18px;
  box-shadow: 0 5px 0 #d7e7f8, 0 8px 16px rgba(51,65,92,.08);
  transition: transform .1s;
}
.game-card:active { transform: scale(.97); }
.game-card .gc-icon {
  font-size: 2.6rem; width: 74px; height: 74px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.game-card .gc-name { font-size: 1.25rem; font-weight: 800; }
.game-card .gc-stars { font-size: 1.15rem; letter-spacing: 2px; margin-top: 2px; }
.game-card .gc-go { margin-left: auto; font-size: 1.9rem; }

/* ---------------- GAME screen ---------------- */
#screen-game { background: linear-gradient(180deg, #cfeaff 0%, #eef7ff 100%); }
#stage { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.round-dots { display: flex; gap: 7px; align-items: center; }
.round-dots .dot {
  width: 18px; height: 18px; border-radius: 50%; background: #d7e7f8;
  transition: background .2s, transform .2s;
}
.round-dots .dot.done { background: #ffd93d; box-shadow: 0 0 0 3px rgba(255,217,61,.35); transform: scale(1.12); }

/* praise + toast */
.praise {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%,-50%);
  font-size: 2.6rem; font-weight: 900; color: #2e9e50; z-index: 30;
  text-shadow: 0 2px 0 #fff, 0 4px 10px rgba(0,0,0,.12);
  animation: praise-pop 1.3s ease forwards; pointer-events: none; white-space: nowrap;
}
@keyframes praise-pop {
  0% { transform: translate(-50%,-50%) scale(.3); opacity: 0; }
  25% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
  45% { transform: translate(-50%,-50%) scale(1); }
  80% { opacity: 1; }
  100% { transform: translate(-50%,-60%) scale(1); opacity: 0; }
}
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: rgba(30,41,59,.92); color: #fff; padding: 10px 20px;
  border-radius: 999px; font-weight: 700; z-index: 200; animation: toast-in .25s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* confetti */
.confetti-bit {
  position: absolute; top: -16px; width: 11px; height: 16px; border-radius: 3px;
  z-index: 40; pointer-events: none; animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: .7; }
}

/* ---------------- shared game pieces ---------------- */
.hint-bubble {
  align-self: center; margin: 14px 16px 4px; background: #fff; border-radius: 999px;
  padding: 12px 22px; font-size: 1.25rem; font-weight: 800; color: #33415c;
  box-shadow: 0 4px 0 #d7e7f8; display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 32px);
}
.opt-row {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  padding: 16px; align-content: flex-end; flex: 1; align-items: flex-end;
}
.num-btn {
  min-width: 84px; min-height: 84px; border-radius: 26px; font-size: 2.3rem; font-weight: 900;
  color: #fff; background: linear-gradient(180deg, #63a7ff, #3f86f0);
  box-shadow: 0 5px 0 #2f6fd0; transition: transform .1s;
}
.num-btn:active { transform: scale(.92); }
.num-btn.opt-pick {
  background: linear-gradient(180deg, #ffd93d, #f5b301); color: #6b4e00; box-shadow: 0 5px 0 #c98e00;
}
.obj-grid {
  flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 6px; padding: 10px 20px;
}
.obj {
  font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1.15;
  transition: transform .12s;
}
.obj.bounce { animation: bounce .45s ease; }
@keyframes bounce {
  0% { transform: scale(1); } 35% { transform: scale(1.5) rotate(-8deg); } 70% { transform: scale(.9); } 100% { transform: scale(1); }
}
.obj.fly { animation: flyaway .8s ease forwards; pointer-events: none; }
@keyframes flyaway { to { transform: translateY(-90px) scale(.3) rotate(20deg); opacity: 0; } }
.shake { animation: shake .4s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px) rotate(-3deg); }
  40% { transform: translateX(8px) rotate(3deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(5px); }
}

/* baskets (number matching) */
.basket-row { flex: 1; display: flex; gap: 14px; align-items: flex-end; justify-content: center; padding: 16px 14px; }
.basket {
  flex: 1; max-width: 150px; background: #fff; border-radius: 18px 18px 46px 46px;
  border: 4px solid #8fd0a8; box-shadow: 0 6px 0 rgba(46,158,80,.25);
  display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center;
  gap: 2px; padding: 10px 8px 14px; min-height: 190px; transition: transform .12s;
}
.basket .b-obj { font-size: 1.7rem; }
.basket:active { transform: scale(.95); }

/* math (add/sub) */
.math-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12px; }
.math-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.math-box {
  background: #fff; border-radius: 20px; padding: 10px; min-width: 120px; min-height: 96px;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px;
  box-shadow: 0 4px 0 #d7e7f8; max-width: 180px;
}
.math-box .m-obj { font-size: 1.8rem; }
.math-box .m-obj.fly { animation: flyaway .8s ease forwards; }
.math-sign { font-size: 2.6rem; font-weight: 900; color: #33415c; }
.eq-box {
  width: 84px; height: 84px; border-radius: 22px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 900; color: #94a3b8; box-shadow: 0 4px 0 #d7e7f8;
}

/* shape matching / hunt */
.target-card {
  align-self: center; margin: 14px 0 4px; background: #fff; border-radius: 24px;
  padding: 12px 26px; box-shadow: 0 4px 0 #d7e7f8; display: flex; align-items: center; gap: 14px;
}
.target-card .tc-label { font-size: 1.5rem; }
.shape-opt-grid {
  flex: 1; display: grid; gap: 12px; padding: 16px 22px;
  grid-template-columns: repeat(2, 1fr); align-content: center; justify-items: center;
}
.shape-opt {
  width: min(170px, 40vw); aspect-ratio: 1; background: #fff; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 0 #d7e7f8; transition: transform .12s;
}
.shape-opt:active { transform: scale(.92); }
.hunt-grid {
  flex: 1; display: grid; gap: 10px; padding: 16px 22px;
  grid-template-columns: repeat(4, 1fr); align-content: center; justify-items: center;
}
.hunt-cell {
  width: 100%; max-width: 92px; aspect-ratio: 1; background: #fff; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 #d7e7f8;
  transition: transform .15s, opacity .15s;
}
.hunt-cell:active { transform: scale(.9); }
.hunt-cell.popped { transform: scale(0) rotate(90deg); opacity: 0; }

/* shape construction */
.build-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 16px 14px; }
.build-board {
  width: min(340px, 86vw); aspect-ratio: 1; background: #fff; border-radius: 26px;
  box-shadow: 0 6px 0 #d7e7f8; padding: 8px;
}
.build-board svg { width: 100%; height: 100%; display: block; }
.build-slot { cursor: pointer; animation: slotpulse 1.4s ease-in-out infinite; }
@keyframes slotpulse {
  0%,100% { opacity: .55; } 50% { opacity: .95; }
}
.build-slot.selected { stroke-width: 0.3; animation: none; opacity: 1; }
.tray { display: flex; gap: 12px; justify-content: center; padding: 12px 0 6px; flex-wrap: wrap; }
.tray-item {
  width: 84px; height: 84px; border-radius: 22px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 0 #d7e7f8; transition: transform .12s;
}
.tray-item:active { transform: scale(.9); }
.tray-item.used { opacity: .3; pointer-events: none; }

/* colour sorting */
.ball-tray {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  padding: 16px 12px 10px; min-height: 84px;
}
.ball {
  width: 62px; height: 62px; border-radius: 50%; position: relative;
  box-shadow: inset -6px -10px 0 rgba(0,0,0,.14), 0 4px 0 rgba(0,0,0,.12);
  transition: transform .15s, opacity .15s;
}
.ball::after {
  content: ''; position: absolute; left: 14%; top: 10%; width: 26%; height: 20%;
  background: rgba(255,255,255,.75); border-radius: 50%; transform: rotate(-25deg);
}
.ball.selected { transform: scale(1.2); outline: 5px solid #fff; outline-offset: 3px; }
.ball.gone { transform: scale(0); opacity: 0; }
.ball.drag-src { opacity: .35; }
.bins { display: flex; gap: 14px; justify-content: center; padding: 12px 14px 22px; flex-wrap: wrap; }
.bin {
  width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.bin-hole {
  width: 96px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.18); position: relative; z-index: 2;
}
.bin-body {
  width: 88px; height: 92px; margin-top: -12px; border-radius: 18px 18px 34px 34px;
  box-shadow: inset -8px -12px 0 rgba(0,0,0,.16), 0 5px 0 rgba(0,0,0,.18);
  display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center;
  gap: 3px; padding: 8px 6px 10px;
}
.bin .mini-ball { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset -2px -4px 0 rgba(0,0,0,.18); }
.drag-ghost {
  position: fixed; z-index: 300; pointer-events: none;
  transform: translate(-50%, -60%) scale(1.15);
}

/* catch arena */
.hint-bar {
  margin: 14px 16px 6px; background: #fff; border-radius: 22px; padding: 10px 16px;
  box-shadow: 0 4px 0 #d7e7f8; display: flex; align-items: center; gap: 14px;
}
.hint-bar .hb-icon { display: flex; align-items: center; gap: 6px; font-size: 2rem; }
.hint-bar .hb-icon svg { flex: none; }
.hb-counter { display: flex; gap: 8px; }
.hb-counter .c-dot {
  width: 22px; height: 22px; border-radius: 50%; background: #e2ecf8;
  transition: background .15s, transform .15s;
}
.hb-counter .c-dot.full { background: #ffd93d; transform: scale(1.15); box-shadow: 0 0 0 4px rgba(255,217,61,.35); }
.arena { flex: 1; position: relative; overflow: hidden; margin: 4px 14px 18px; border-radius: 24px; background: rgba(255,255,255,.35); }
.mole {
  position: absolute; font-size: 3.4rem; line-height: 1;
  transition: transform .18s ease, opacity .18s;
  animation: mole-in .22s ease;
}
.mole svg { display: block; filter: drop-shadow(0 4px 4px rgba(0,0,0,.15)); }
@keyframes mole-in { from { transform: scale(0); } }
.mole.caught { transform: scale(1.6) rotate(20deg); opacity: 0; }
.mole.nope { transform: scale(.7); opacity: .4; }
.mole.bye { transform: scale(.4); opacity: 0; }

/* homes */
.homes-top {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  padding: 20px 16px 8px; min-height: 110px; align-items: center;
}
.homes-top .animal { font-size: 3.4rem; line-height: 1; transition: transform .15s, opacity .15s; }
.homes-top .animal.drag-src { opacity: .35; }
.homes-top .animal.gone { transform: scale(0); opacity: 0; }
.homes-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; padding: 18px 16px 30px; }
.house { width: 104px; display: flex; flex-direction: column; align-items: center; }
.house .roof { width: 104px; height: 38px; background: #ff9f40; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.house .body {
  width: 84px; height: 84px; margin-top: -2px; background: #fff; border-radius: 16px;
  box-shadow: 0 5px 0 #d7e7f8; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; transition: transform .15s;
}
.house.lit .body { transform: scale(1.12); background: #fff7dd; }
.house .body.got { background: #eafff0; }

/* pattern */
.pattern-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 14px; }
.pattern-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.chip { width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; }
.chip.slot {
  background: rgba(255,255,255,.7); border: 3px dashed #9db8d6; border-radius: 20px;
}
.opt-chip {
  width: 92px; height: 92px; border-radius: 24px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 0 #d7e7f8; transition: transform .12s;
}
.opt-chip:active { transform: scale(.9); }

/* puzzle mosaic */
.puzzle-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 14px; }
.puzzle-board {
  display: grid; gap: 6px; padding: 10px; background: #fff; border-radius: 22px;
  box-shadow: 0 5px 0 #d7e7f8; width: min(300px, 78vw);
}
.p-cell { aspect-ratio: 1; border-radius: 10px; }
.p-cell.hole { background: repeating-linear-gradient(45deg, #e2ecf8, #e2ecf8 8px, #f2f8ff 8px, #f2f8ff 16px); border: 3px dashed #9db8d6; }
.puzzle-opts { display: flex; gap: 12px; }
.p-opt { width: 86px; height: 86px; border-radius: 22px; box-shadow: 0 5px 0 rgba(0,0,0,.18); transition: transform .12s; }
.p-opt:active { transform: scale(.9); }

/* memory */
.mem-area { flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px; }
.mem-board {
  display: grid; gap: 12px; width: min(320px, 80vw);
  grid-template-columns: repeat(2, 1fr);
}
.mem-board.three { grid-template-columns: repeat(3, 1fr); }
.mem-tile {
  aspect-ratio: 1; border-radius: 22px; background: linear-gradient(180deg, #ffd93d, #f5b301);
  box-shadow: 0 5px 0 #c98e00; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; transition: transform .15s;
}
.mem-tile:active { transform: scale(.94); }
.mem-tile .gem { transform: scale(0); transition: transform .18s; }
.mem-tile.reveal .gem { transform: scale(1); }
.mem-tile.wrongflash { animation: shake .4s ease; }

/* ---------------- reward overlay ---------------- */
.overlay {
  position: absolute; inset: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(30,58,95,.55); backdrop-filter: blur(3px);
}
.overlay.show { display: flex; }
.reward-card {
  background: #fff; border-radius: 30px; padding: 26px 24px 22px;
  width: min(400px, 100%); text-align: center; position: relative;
  box-shadow: 0 14px 40px rgba(0,0,0,.3); animation: card-in .35s ease;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
@keyframes card-in { from { transform: scale(.7); opacity: 0; } }
.reward-mascot { font-size: 4.5rem; animation: floaty 2.4s ease-in-out infinite; }
.reward-stars { display: flex; gap: 10px; }
.reward-stars .r-star { font-size: 3rem; opacity: .25; transform: scale(.6); }
.reward-stars .r-star.on { opacity: 1; animation: star-pop .5s ease forwards; }
@keyframes star-pop {
  0% { transform: scale(.2) rotate(-40deg); opacity: 0; }
  60% { transform: scale(1.4) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.reward-unlocks { display: flex; flex-direction: column; gap: 8px; }
.unlock-item {
  display: flex; align-items: center; gap: 10px; background: #fff7dd;
  border: 2px dashed #f5b301; border-radius: 16px; padding: 8px 14px; font-weight: 800;
}
.unlock-item .ui-e { font-size: 2rem; }
.reward-coins { font-size: 1.3rem; font-weight: 900; color: #e8960c; }
.reward-actions { display: flex; gap: 12px; margin-top: 4px; }
.mid-btn {
  min-width: 140px; padding: 14px 18px; border-radius: 999px; font-size: 1.05rem; font-weight: 800;
  color: #fff; background: linear-gradient(180deg, #63a7ff, #3f86f0); box-shadow: 0 5px 0 #2f6fd0;
}
.mid-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #2f6fd0; }
.ghost-btn { background: #eef3fa; color: #33415c; box-shadow: 0 5px 0 #cfe2f7; }
.ghost-btn:active { box-shadow: 0 2px 0 #cfe2f7; }

/* ---------------- sticker book ---------------- */
.book-scroll { flex: 1; overflow-y: auto; padding: 18px 16px 40px; }
.book-h { font-size: 1.3rem; font-weight: 900; margin: 8px 4px 12px; }
.sticker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px;
}
.sticker-slot {
  aspect-ratio: 1; background: #fff; border-radius: 20px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 4px 0 #d7e7f8; font-size: 2.4rem;
}
.sticker-slot.locked { font-size: 1.4rem; color: #b6c5da; background: rgba(255,255,255,.6); }
.sticker-slot .sl-at { font-size: .72rem; font-weight: 700; color: #8fa3bd; }
.pet-grid .sticker-slot { font-size: 2.8rem; }

/* ---------------- parent dashboard ---------------- */
.parent-scroll { flex: 1; overflow-y: auto; padding: 16px 14px 40px; }
.p-summary {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px;
}
.p-stat {
  background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 3px 0 #d7e7f8;
}
.p-stat .v { font-size: 1.5rem; font-weight: 900; color: #2b6cb0; }
.p-stat .l { font-size: .8rem; color: #64748b; font-weight: 700; }
.p-section-title { font-weight: 900; margin: 16px 4px 8px; font-size: 1.05rem; }
.p-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 3px 0 #d7e7f8; }
.p-table th { text-align: left; font-size: .78rem; color: #64748b; padding: 8px 10px; border-bottom: 2px solid #eaf1fa; }
.p-table td { padding: 8px 10px; font-size: .88rem; border-bottom: 1px solid #f0f5fc; }
.p-table tr:last-child td { border-bottom: none; }
.p-bar { height: 8px; border-radius: 99px; background: #eaf1fa; overflow: hidden; min-width: 70px; }
.p-bar i { display: block; height: 100%; background: linear-gradient(90deg, #63a7ff, #2e9e50); border-radius: 99px; }
.diff-dots { display: inline-flex; gap: 3px; }
.diff-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e2ecf8; }
.diff-dots i.on { background: #f5b301; }
.p-chip { display: inline-block; background: #eaf1fa; border-radius: 99px; padding: 4px 12px; margin: 0 4px 6px 0; font-weight: 700; font-size: .85rem; }
.p-chip.good { background: #eafff0; color: #1d7a3c; }
.p-chip.practice { background: #fff2cc; color: #8a6d1a; }
.p-reset {
  margin-top: 18px; padding: 12px 20px; border-radius: 999px; font-weight: 800;
  background: #fff; box-shadow: 0 3px 0 #f3caca; color: #c0392b;
}
.p-reset.armed { background: #c0392b; color: #fff; box-shadow: 0 3px 0 #922b1f; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (max-width: 420px) {
  .basket { min-height: 150px; }
  .basket .b-obj { font-size: 1.4rem; }
  .shape-opt-grid { grid-template-columns: repeat(2, 1fr); }
}