:root {
  --pink: #ff5d8f; --yellow: #ffd23f; --green: #3bceac; --blue: #4d96ff; --purple: #9b6dff; --orange: #ff8c42;
  --red: #ff6b6b; --ink: #3b2f63; --muted: #8a7fb0; --bg: #fff7ec; --card: #ffffff;
  --shadow: 0 6px 0 rgba(59, 47, 99, .15), 0 10px 24px rgba(59, 47, 99, .12);
  --radius: 22px;
  font-family: 'Varela Round', 'Arial Rounded MT Bold', 'Rubik', system-ui, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font-family: inherit; color: inherit; border: none; cursor: pointer; }
input { font-family: inherit; }
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; animation: screenIn .35s ease; }
@keyframes screenIn { from { opacity: 0; transform: scale(.98); } }
.eq { direction: ltr; unicode-bidi: isolate; display: inline-block; white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 10px 26px; border-radius: 999px; font-size: 22px; font-weight: bold;
  background: var(--yellow); box-shadow: 0 6px 0 #d9a800; transition: transform .1s, box-shadow .1s;
}
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #d9a800; }
.btn.green { background: var(--green); color: #fff; box-shadow: 0 6px 0 #229b80; }
.btn.pink { background: var(--pink); color: #fff; box-shadow: 0 6px 0 #c93a69; }
.btn.blue { background: var(--blue); color: #fff; box-shadow: 0 6px 0 #2c6ccc; }
.btn.purple { background: var(--purple); color: #fff; box-shadow: 0 6px 0 #6c45c9; }
.btn.white { background: #fff; box-shadow: 0 6px 0 #ddd3f3; }
.btn.big { font-size: 30px; min-height: 72px; padding: 12px 40px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn {
  width: 52px; height: 52px; border-radius: 50%; background: #fff; font-size: 26px;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 #ddd3f3; flex-shrink: 0;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #ddd3f3; }

.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.choice {
  min-width: 84px; min-height: 72px; padding: 8px 18px; border-radius: 20px; background: #fff; font-size: clamp(24px, 5vmin, 40px);
  font-weight: bold; box-shadow: 0 6px 0 #ddd3f3, 0 8px 18px rgba(0,0,0,.08); transition: transform .12s, background .2s;
  direction: ltr;
}
.choice:active { transform: translateY(4px) scale(.97); box-shadow: 0 2px 0 #ddd3f3; }
.choice.right { background: var(--green); color: #fff; box-shadow: 0 6px 0 #229b80; animation: bounce .6s; }
.choice.wrong { background: #ffd0d0; color: #b33; animation: shake .45s; opacity: .7; }

.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.big-q { font-size: clamp(34px, 9vmin, 72px); font-weight: bold; text-align: center; }

/* ---------- animations ---------- */
@keyframes bounce { 0%,100% { transform: translateY(0) } 30% { transform: translateY(-18px) scale(1.06) } 60% { transform: translateY(0) scale(.97) } 80% { transform: translateY(-5px) } }
@keyframes shake { 0%,100% { transform: translateX(0) } 20% { transform: translateX(-10px) rotate(-3deg) } 40% { transform: translateX(10px) rotate(3deg) } 60% { transform: translateX(-6px) } 80% { transform: translateX(6px) } }
@keyframes wiggle { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-8deg) } 75% { transform: rotate(8deg) } }
@keyframes floatY { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes popIn { 0% { transform: scale(0); opacity: 0 } 70% { transform: scale(1.12); opacity: 1 } 100% { transform: scale(1) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.08) } }
.bounce { animation: bounce .6s; }
.shake { animation: shake .45s; }
.wiggle { animation: wiggle 1s ease-in-out infinite; }
.float-y { animation: floatY 2.4s ease-in-out infinite; }
.pop-in { animation: popIn .45s cubic-bezier(.3,1.6,.6,1) both; }
.pulse { animation: pulse 1.4s ease-in-out infinite; }

.confetti { position: fixed; width: 10px; height: 14px; border-radius: 3px; pointer-events: none; z-index: 9999; animation: confetti 1.1s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes confetti { to { transform: translate(var(--dx), calc(var(--dy) + 160px)) rotate(var(--rot)); opacity: 0; } }
.float-text { position: fixed; transform: translate(-50%, 0); font-size: 30px; font-weight: bold; pointer-events: none; z-index: 9999; text-shadow: 0 2px 0 #fff, 0 0 8px #fff; animation: floatUp 1.2s ease-out forwards; }
@keyframes floatUp { to { transform: translate(-50%, -80px); opacity: 0; } }
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); text-align: center; background: var(--ink); color: #fff; padding: 14px 26px; border-radius: 999px; font-size: 20px; z-index: 9999; animation: popIn .3s; transition: opacity .4s; }
.toast.out { opacity: 0; }
.draggable { cursor: grab; touch-action: none; }
.dragging { z-index: 1000; cursor: grabbing; filter: drop-shadow(0 10px 10px rgba(0,0,0,.25)); }
.drop-hover { outline: 4px dashed var(--yellow); outline-offset: 4px; }

/* ---------- avatar ---------- */
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.avatar .face { line-height: 1; }
.avatar .hat { position: absolute; top: -38%; left: 50%; transform: translateX(-50%) rotate(-8deg); line-height: 1; font-size: 62%; }
.avatar .acc { position: absolute; bottom: -6%; right: -14%; font-size: 40%; line-height: 1; }
.avatar.frame-gold { box-shadow: 0 0 0 5px #ffd23f, 0 0 18px #ffd23f; }
.avatar.frame-rainbow { box-shadow: 0 0 0 5px transparent; background-clip: padding-box; outline: 5px solid; outline-color: #ff5d8f; animation: rainbowOutline 3s linear infinite; }
@keyframes rainbowOutline { 0% { outline-color: #ff5d8f } 25% { outline-color: #ffd23f } 50% { outline-color: #3bceac } 75% { outline-color: #4d96ff } 100% { outline-color: #ff5d8f } }
.avatar.frame-galaxy { box-shadow: 0 0 0 5px #6b5bd6, 0 0 22px #b388eb; }
.avatar.frame-fire { box-shadow: 0 0 0 5px #ff8c42, 0 0 20px #ff5d1f; }
.avatar.frame-ice { box-shadow: 0 0 0 5px #9be0ff, 0 0 20px #bfefff; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; height: 68px; flex-shrink: 0; z-index: 20; }
.topbar .spacer { flex: 1; }
.coins-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; padding: 6px 16px 6px 12px; border-radius: 999px; font-size: 22px; font-weight: bold; box-shadow: 0 4px 0 #ddd3f3; }
.coin-ic { display: inline-block; filter: sepia(1) saturate(6) hue-rotate(-8deg) brightness(1.05); } /* the system 🪙 is silver on Apple */
.coins-pill .coin-ic { font-size: 24px; }
.rank-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--purple); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 18px; font-weight: bold; box-shadow: 0 4px 0 #6c45c9; }

/* ---------- profiles ---------- */
.profiles-screen { background: linear-gradient(160deg, #ffe0ef, #fff6d6 50%, #d9f6ff); align-items: center; padding: 20px; overflow-y: auto; }
.title-logo { font-size: clamp(34px, 8vmin, 64px); font-weight: bold; text-align: center; margin: 10px 0 6px; color: var(--ink); text-shadow: 0 4px 0 #fff; }
.title-logo span { display: inline-block; animation: floatY 2.4s ease-in-out infinite; }
.subtitle { font-size: 22px; color: var(--muted); margin-bottom: 20px; text-align: center; }
.profile-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; max-width: 900px; }
.profile-card { width: 170px; padding: 18px 10px 14px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 22px; font-weight: bold; transition: transform .15s; }
.profile-card:active { transform: scale(.95); }
.profile-card .meta { font-size: 15px; color: var(--muted); font-weight: normal; }
.profile-card.add { border: 4px dashed #cbbcf2; background: rgba(255,255,255,.6); box-shadow: none; justify-content: center; color: var(--purple); }
.profile-card.add .plus { font-size: 60px; line-height: 1; }
.corner-btn { position: absolute; top: 14px; left: 14px; }

/* ---------- wizard ---------- */
.wizard { background: linear-gradient(160deg, #e7ddff, #fff2f8); align-items: center; padding: 18px; overflow-y: auto; }
.wizard h2 { font-size: clamp(26px, 6vmin, 40px); margin: 14px 0; text-align: center; }
.wizard .dots { display: flex; gap: 8px; margin-top: 4px; }
.wizard .dots i { width: 12px; height: 12px; border-radius: 50%; background: #d8ccf7; }
.wizard .dots i.on { background: var(--purple); }
.name-input { font-size: 36px; text-align: center; padding: 14px 20px; border-radius: 22px; border: 4px solid #d8ccf7; width: min(420px, 90vw); outline: none; color: var(--ink); }
.name-input:focus { border-color: var(--purple); }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 12px; width: min(640px, 94vw); }
.opt { aspect-ratio: 1; border-radius: 22px; background: #fff; font-size: 44px; box-shadow: 0 5px 0 #ddd3f3; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: transform .12s; }
.opt small { font-size: 15px; color: var(--muted); }
.opt.sel { background: var(--yellow); box-shadow: 0 5px 0 #d9a800; transform: scale(1.06); }
.color-dot { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.color-dot.sel { outline: 5px solid var(--ink); outline-offset: 3px; }
.wizard-nav { display: flex; gap: 14px; margin: 22px 0 10px; }
.preview-ava { margin: 6px 0 4px; }

/* ---------- map ---------- */
.map-screen { background: #cfeec8; }
.map-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; scroll-behavior: smooth; }
.map-inner { position: relative; width: 100%; }
.zone-band { position: absolute; left: 0; right: 0; }
.zone-sign { position: absolute; left: 50%; transform: translateX(-50%); background: #fff; padding: 6px 20px; border-radius: 999px; font-weight: bold; font-size: 20px; box-shadow: var(--shadow); white-space: nowrap; z-index: 3; }
.map-svg { position: absolute; inset: 0; pointer-events: none; }
.deco { position: absolute; font-size: 38px; pointer-events: none; opacity: .9; }
.node {
  position: absolute; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: bold; z-index: 4;
  background: #fff; color: var(--ink); box-shadow: 0 6px 0 rgba(0,0,0,.18);
}
.node.done { background: var(--green); color: #fff; box-shadow: 0 6px 0 #229b80; }
.node.locked { background: #e9e4f5; color: #b5aacb; box-shadow: 0 6px 0 #cfc6e4; }
.node.current { background: var(--pink); color: #fff; box-shadow: 0 6px 0 #c93a69; width: 92px; height: 92px; margin: -46px 0 0 -46px; font-size: 40px; animation: pulse 1.4s infinite; }
.node.boss { background: linear-gradient(145deg, #ffe66d, #ffb400); color: #7a4b00; box-shadow: 0 6px 0 #c98a00; }
.node.boss.locked { opacity: .8; }
.node.chest::after { content: '🎁'; position: absolute; top: -18px; right: -14px; font-size: 26px; }
.node.boss::after { content: '👑'; position: absolute; top: -24px; font-size: 28px; }
.node .stars { position: absolute; bottom: -20px; font-size: 15px; letter-spacing: -2px; white-space: nowrap; }
.node .nlabel { font-size: 15px; position: absolute; bottom: -22px; color: var(--ink); background: #fff; border-radius: 99px; padding: 0 8px; box-shadow: 0 2px 0 rgba(0,0,0,.1); }
.map-hero { position: absolute; z-index: 6; transform: translate(-50%, -100%); pointer-events: none; transition: left .8s, top .8s; }
.map-bottom { display: flex; justify-content: center; gap: 12px; padding: 10px; flex-shrink: 0; z-index: 20; }

/* ---------- game screen ---------- */
.game-screen { background: linear-gradient(180deg, #dff4ff, #fff7ec); }
.game-top { display: flex; align-items: center; gap: 10px; padding: 6px 10px; height: 64px; flex-shrink: 0; z-index: 30; position: relative; }
.progress { flex: 1; display: flex; gap: 6px; justify-content: center; align-items: center; min-width: 0; }
.progress i { flex: 0 1 26px; min-width: 9px; aspect-ratio: 1; overflow: hidden; height: auto; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: inset 0 2px 0 rgba(0,0,0,.08); font-style: normal; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: transform .3s; }
.progress i.ok { background: var(--green); transform: scale(1.15); }
.progress i.half { background: var(--yellow); transform: scale(1.1); }
.progress i.miss { background: #ffb3b3; }
.hint-line { text-align: center; font-size: 19px; color: var(--ink); min-height: 0; padding: 0 12px; position: relative; z-index: 30; }
.hint-line:not(:empty) { padding: 2px 12px 6px; }
.stage { flex: 1; position: relative; overflow: hidden; }

/* ---------- intro / result overlays ---------- */
.overlay { position: absolute; inset: 0; background: rgba(59,47,99,.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; animation: screenIn .25s; }
.card { background: #fff; border-radius: 30px; padding: 26px 24px; width: min(460px, 94vw); text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 94vh; overflow-y: auto; }
.card .game-icon { font-size: 86px; line-height: 1; animation: floatY 2.4s ease-in-out infinite; }
.card h2 { margin: 0; font-size: 34px; }
.card p { margin: 0; font-size: 21px; color: var(--muted); line-height: 1.4; }
.card .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.result-stars { display: flex; gap: 10px; font-size: 64px; }
.result-stars span { opacity: .2; filter: grayscale(1); }
.result-stars span.on { opacity: 1; filter: none; animation: popIn .5s cubic-bezier(.3,1.6,.6,1) both; }
.levelup { background: linear-gradient(90deg, #ffe66d, #ffb3d1); border-radius: 18px; padding: 10px 16px; font-size: 20px; font-weight: bold; }
/* result card: "how much did you like the game?" 1–5 stars (the kid's rating; the step score above is trophies) */
.rate-box { margin: 18px 0 6px; padding: 14px 16px 12px; border-radius: 18px; background: #f3efff; text-align: center; }
.rate-q { font-size: 17px; font-weight: bold; color: #6a4fb3; margin-bottom: 6px; }
.rate-stars { display: flex; justify-content: center; gap: 0; direction: ltr; } /* star 1 on the left, also in Hebrew */
.rate-star { background: none; border: 0; padding: 2px 7px; font-size: 40px; line-height: 1; color: #d9d2ee; cursor: pointer; transition: transform .15s, color .12s; -webkit-tap-highlight-color: transparent; }
.rate-star.on { color: #ffc21a; text-shadow: 0 2px 0 #e59a00; }
.rate-star:active { transform: scale(1.25); }
/* hover preview (mouse only — on touch screens :hover sticks after a tap): stars up to the pointer half-lit */
@media (hover: hover) {
  .rate-stars:hover .rate-star { color: #ffe199; text-shadow: none; }
  .rate-stars:hover .rate-star:hover ~ .rate-star { color: #d9d2ee; }
  .rate-stars:hover .rate-star.on { color: #ffc21a; }                          /* the kid's current rating stays visible */
  .rate-stars:hover .rate-star:hover ~ .rate-star.on { color: #ece3c4; text-shadow: none; }
  .rate-stars .rate-star:hover { transform: scale(1.12); }
}
.boss-banner { background: linear-gradient(90deg, #ffd23f, #ffb400); color: #6b4300; padding: 4px 18px; border-radius: 999px; font-weight: bold; }

/* ---------- shop ---------- */
.shop-screen { background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.7) 0 3px, transparent 4px) 0 0 / 46px 46px,
  radial-gradient(circle at 70% 60%, rgba(255,210,63,.35) 0 3px, transparent 4px) 0 0 / 58px 58px, linear-gradient(180deg, #fff0d4, #ffe1ef); }
.tabs { display: flex; gap: 8px; justify-content: center; padding: 4px 10px 10px; flex-wrap: wrap; flex-shrink: 0; }
.tab { padding: 10px 18px; border-radius: 999px; background: #fff; font-size: 19px; font-weight: bold; box-shadow: 0 4px 0 #ddd3f3; }
.tab.on { background: var(--purple); color: #fff; box-shadow: 0 4px 0 #6c45c9; }
.shop-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; padding: 10px 18px 30px; align-content: start; }
.item { background: #fff; border-radius: 26px; padding: 16px 10px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.item .ic { font-size: 68px; line-height: 1.1; height: 84px; display: flex; align-items: center; justify-content: center; }
.item .ic.thumb img { width: 104px; height: 104px; object-fit: contain; display: block; margin: -10px 0; }
.item .nm { font-size: 17px; font-weight: bold; text-align: center; }
.item .price { font-size: 18px; font-weight: bold; }
.item button, .item .btn { min-height: 48px; font-size: 19px; padding: 6px 18px; }
.item.owned { background: #f1fff8; }
.item.equipped { outline: 4px solid var(--green); }
/* the real items (2026-11-11): house items = their studio picture, wearables = the kid's own drawing, auras = a tiny kid wearing it */
.item.tappable { cursor: pointer; }
.item.trying { outline: 4px dashed var(--purple); outline-offset: 2px; }
.item .ic.thumb { width: 104px; height: 84px; }
.item .ic.thumb img { aspect-ratio: 1; }
.item .ic.art { width: 100%; }
.item .ic.art .kid-item { width: 96px; height: 80px; overflow: visible; display: block; }
.item .ic.aura-ic { height: 96px; margin: -6px 0 -4px; }
.item .ic.aura-ic .kid { width: 64px; height: 96px; }
/* the item sheet: a house item up close, its live 3D turntable (House3D.preview) */
.sheet-ov { z-index: 120; }
.sheet-ov.closing { opacity: 0; transition: opacity .18s; }
.shop-sheet { position: relative; width: min(460px, 94vw); max-height: 94%; background: #fff; border-radius: 30px; box-shadow: 0 18px 50px rgba(40,20,80,.35); display: flex; flex-direction: column; overflow: hidden; animation: popIn .32s cubic-bezier(.3,1.5,.6,1) both; }
.shop-sheet .sheet-pv { width: 100%; aspect-ratio: 1 / .86; min-height: 0; flex-shrink: 1; border-radius: 30px 30px 0 0; overflow: hidden; background: linear-gradient(#fdf6ff, #e4d6fb); }
.shop-sheet .sheet-pv > .ic { font-size: 120px; height: 100%; display: flex; align-items: center; justify-content: center; }
.sheet-info { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 18px 18px; text-align: center; }
.sheet-grp { font-size: 15px; font-weight: bold; color: var(--muted, #7a6fa0); background: #f4efff; border-radius: 99px; padding: 4px 12px; }
.sheet-nm { font-size: 26px; font-weight: bold; color: var(--ink, #3b2f63); line-height: 1.2; }
.sheet-dream { font-size: 16px; font-weight: bold; color: #8a5a00; }
.sheet-info .btn { min-height: 54px; font-size: 22px; padding: 6px 26px; }
.sheet-hint { font-size: 14px; color: var(--muted, #7a6fa0); }
.sheet-x { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; width: 46px; height: 46px; font-size: 20px; }
.shop-sheet.dream { background: linear-gradient(160deg, #fffbe6 0%, #ffe9a3 60%, #ffd45a 100%); box-shadow: 0 18px 50px rgba(120,70,0,.35), 0 0 0 4px #fff3b8 inset, 0 0 40px rgba(255,210,60,.7); }
.shop-sheet.dream .sheet-pv, .shop-sheet.dream .sheet-pv .hs-pv { background: radial-gradient(circle at 50% 45%, #fffbe0, #ffe08a 70%, #ffc93c); }
.shop-sheet.dream .sheet-nm { color: #6b3f00; }
.shop-sheet.dream .sheet-grp { background: rgba(255,255,255,.6); color: #8a5a00; }
@media (orientation: landscape) and (max-height: 560px) {
  .shop-sheet { flex-direction: row; width: min(720px, 96vw); height: min(340px, 88vh); max-height: 92%; }
  .shop-sheet .sheet-pv { width: 56%; aspect-ratio: auto; height: auto; align-self: stretch; border-radius: 30px 0 0 30px; }
  .sheet-info { flex: 1; justify-content: center; }
  .sheet-nm { font-size: 22px; }
}
.closet-preview { display: flex; justify-content: center; padding: 10px 0 18px; flex-shrink: 0; }
.closet-preview:empty { display: none; }
.swatch { width: 54px; height: 54px; border-radius: 50%; }

/* ---------- album ---------- */
.album-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; padding: 10px 16px 30px; align-content: start; }
.sticker { aspect-ratio: 1; border-radius: 20px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 52px; box-shadow: 0 4px 0 #ddd3f3; position: relative; }
.sticker.missing { background: rgba(255,255,255,.5); font-size: 30px; color: #cbbcf2; box-shadow: none; border: 3px dashed #d8ccf7; }
.sticker .cnt { position: absolute; bottom: 4px; left: 6px; font-size: 14px; background: var(--purple); color: #fff; border-radius: 99px; padding: 0 6px; }
.egg-big { font-size: 140px; line-height: 1; cursor: pointer; }
.egg-big.crack { animation: wiggle .25s infinite; }
/* (flex-shrink 0: the result card is a scrolling flex column; squashed, the reveal covered the rating + the sticker's name) */
.chest-stk { position: relative; width: min(260px, 70vw); height: 250px; margin: 0 auto; flex-shrink: 0; }
.card > .rv-cap { flex-shrink: 0; }

/* ---------- parent ---------- */
.parent-screen { background: #f4f1fb; overflow-y: auto; }
.parent-screen .content { padding: 10px 18px 40px; max-width: 900px; margin: 0 auto; width: 100%; }
.kid-report { margin-bottom: 18px; }
.kid-report h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 24px; }
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.stat { background: #f4f1fb; border-radius: 14px; padding: 8px 14px; font-size: 16px; }
.stat b { font-size: 20px; display: block; }
.skill-row { display: grid; grid-template-columns: 130px 1fr 54px 64px; align-items: center; gap: 10px; font-size: 16px; padding: 4px 0; }
.skill-row.locked { opacity: .45; }
.bar { height: 14px; background: #e9e4f5; border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--blue)); border-radius: 99px; }
.skill-row .adj { display: flex; gap: 4px; }
.skill-row .adj button { width: 28px; height: 28px; border-radius: 8px; background: #fff; box-shadow: 0 2px 0 #ddd3f3; font-size: 16px; }
.small-note { font-size: 14px; color: var(--muted); line-height: 1.5; }
.settings-list { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; font-size: 22px; background: #f4f1fb; border-radius: 16px; padding: 10px 16px; }
.switch { width: 64px; height: 36px; border-radius: 99px; background: #d8ccf7; position: relative; transition: background .2s; }
/* the knob moves toward the end of the line when on (left in Hebrew, right in English); ::before widens the tap area to 48px */
.switch::after { content: ''; position: absolute; top: 4px; inset-inline-start: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; }
.switch::before { content: ''; position: absolute; inset: -6px -4px; }
.switch.on { background: var(--green); }
.switch.on::after { inset-inline-start: 32px; }
/* wizard age step */
.age-step { display: flex; flex-direction: column; align-items: center; gap: 14px; }

@media (max-width: 520px) {
  .profile-card { width: 140px; }
  .skill-row { grid-template-columns: 96px 1fr 44px 60px; font-size: 14px; }
  .btn { font-size: 19px; padding: 8px 18px; }
  .btn.big { font-size: 24px; }
}

/* games style their root with .g-<id>; the stage carries that class too, so pin the stage's own layout */
.game-body > .stage.stage, .game-screen > .stage.stage { position: relative !important; inset: auto !important; flex: 1 1 auto !important; width: auto !important; height: auto !important; min-height: 0; transform: none !important; }

/* ================= the kid character =================
   Bone animation on nested SVG groups (js/core/kid.js): every layer has its own rhythm, so the motion never loops in sync.
   Transform / opacity only. No jumps anywhere (parent 2026-11-10): reactions squash, stretch, lean and wiggle on the spot.
   --gx / --gy (-1..1) = where the kid looks (set from JS: look-around, glances at the buddy, a finger dragging);
   --side (-1 | 1) = the side a touch came from. --kid-t = tempo (slower with reduced motion, never frozen). */
.kid { position: relative; display: inline-block; line-height: 0; --kid-t: 1; --gx: 0; --gy: 0; --side: 1; }
.kid-svg { width: 100%; height: 100%; overflow: visible; }
.kid-svg g, .kid-svg text { transform-box: view-box; }
.kid.touchable { touch-action: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
/* idle layers (periods chosen not to line up: 7.4 / 3.6 / 9.3 / 4.8 s ...) */
.kid-rig { transform-origin: 100px 290px; }
.kid-all { transform-origin: 100px 290px; animation: kidShift calc(7.4s * var(--kid-t)) ease-in-out infinite; }
.kid-shadow { transform-origin: 100px 292px; animation: kidShadow calc(7.4s * var(--kid-t)) ease-in-out infinite; }
.kid-body { transform-origin: 100px 236px; animation: kidBreathe calc(3.6s * var(--kid-t)) ease-in-out infinite; }
.kid-gaze { transform-origin: 100px 152px; transform: rotate(calc(var(--gx) * 5deg)); transition: transform .6s cubic-bezier(.3, 1.35, .5, 1); }
.kid-headr { transform-origin: 100px 152px; }
.kid-head { transform-origin: 100px 152px; animation: kidHead calc(9.3s * var(--kid-t)) ease-in-out infinite; }
.kid-face { transform-origin: 100px 112px; transform: translate(calc(var(--gx) * 5px), calc(var(--gy) * 4px)); transition: transform .45s cubic-bezier(.3, 1.25, .5, 1); }
.kid-iris { transform: translate(calc(var(--gx) * 3.5px), calc(var(--gy) * 3px)); transition: transform .22s ease-out; }
.kid-hairb { transform-origin: 100px 60px; animation: kidHair calc(4.8s * var(--kid-t)) ease-in-out -1.2s infinite; }
.kid-hairl { transform-origin: 100px 60px; animation: kidHair calc(4.8s * var(--kid-t)) ease-in-out -2s infinite; }
.kid-hairf { transform-origin: 100px 40px; }
.kid-pt-l { transform-origin: 42px 84px; animation: kidPonyL calc(3.3s * var(--kid-t)) ease-in-out infinite; }
.kid-pt-r { transform-origin: 158px 84px; animation: kidPonyR calc(3.3s * var(--kid-t)) ease-in-out -.5s infinite; }
.kid-bun { transform-origin: 100px 46px; animation: kidHair calc(3.1s * var(--kid-t)) ease-in-out infinite; }
.kid-arm-l { transform-origin: 57px 160px; }
.kid-arm-r { transform-origin: 143px 160px; }
.kid-arm-li { transform-origin: 57px 160px; animation: kidArmIL calc(3.6s * var(--kid-t)) ease-in-out -.3s infinite; }
.kid-arm-ri { transform-origin: 143px 160px; animation: kidArmIR calc(3.6s * var(--kid-t)) ease-in-out -.8s infinite; }
.kid-balloon { transform-origin: 54px 228px; animation: kidPonyL calc(4.2s * var(--kid-t)) ease-in-out infinite; }
.kid-cape { transform-origin: 100px 150px; animation: kidCape calc(3.9s * var(--kid-t)) ease-in-out infinite; }
.kid-wings { transform-origin: 100px 180px; animation: kidWings calc(1.2s * var(--kid-t)) ease-in-out infinite; }
/* (.kid-svg prefix: must beat '.kid-svg g' above, or the blink squashes the eyes toward the view-box centre = the chin) */
.kid-svg .kid-eye { transform-box: fill-box; transform-origin: center; transition: transform .08s; }
.kid.blink .kid-eye { transform: scaleY(.1); }
.kid-happy, .kid-yay { display: none; }
.kid-blush { opacity: .45; transition: opacity .35s; }
.kid-brow { transform-origin: 100px 80px; transition: transform .2s; }
.kid-yay { transform-origin: 100px 96px; }
@keyframes kidShift { 0%,100% { transform: rotate(-1.1deg); } 42% { transform: rotate(.9deg); } 55% { transform: rotate(1.1deg); } 92% { transform: rotate(-.9deg); } }
@keyframes kidShadow { 0%,100% { transform: translateX(-2.5px) scaleX(1.02); } 50% { transform: translateX(2.5px) scaleX(1.02); } }
@keyframes kidBreathe { 0%,100% { transform: scale(1, 1); } 45% { transform: scale(1.012, 1.022); } }
@keyframes kidHead { 0%,100% { transform: rotate(0); } 18% { transform: rotate(-2.6deg); } 34% { transform: rotate(-1.4deg); } 52% { transform: rotate(2.8deg); } 70% { transform: rotate(1.2deg); } 84% { transform: rotate(-.6deg); } }
@keyframes kidHair { 0%,100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes kidPonyL { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes kidPonyR { 0%,100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } }
@keyframes kidArmIL { 0%,100% { transform: rotate(1deg); } 50% { transform: rotate(5deg); } }
@keyframes kidArmIR { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(-5deg); } }
@keyframes kidCape { 0%,100% { transform: skewX(-2deg); } 50% { transform: skewX(2deg); } }
@keyframes kidWings { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.85); } }
/* talking: the head rocks a little (no bob up) */
.kid.talking .kid-head { animation: kidTalk calc(.7s * var(--kid-t)) ease-in-out infinite; }
@keyframes kidTalk { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }

/* happy closed eyes + blush */
.kid.r-cheer .kid-eyes, .kid.t-pat .kid-eyes, .kid.t-hug .kid-eyes, .kid.t-tickle .kid-eyes, .kid.t-dance .kid-eyes, .kid.a-aww .kid-eyes,
.kid.a-laugh .kid-eyes, .kid.f-stretch .kid-eyes, .kid.f-yawn .kid-eyes { display: none; }
.kid.r-cheer .kid-happy, .kid.t-pat .kid-happy, .kid.t-hug .kid-happy, .kid.t-tickle .kid-happy, .kid.t-dance .kid-happy, .kid.a-aww .kid-happy,
.kid.a-laugh .kid-happy, .kid.f-stretch .kid-happy, .kid.f-yawn .kid-happy { display: inline; }
.kid.t-pat .kid-blush, .kid.t-hug .kid-blush, .kid.a-aww .kid-blush, .kid.t-tickle .kid-blush, .kid.r-cheer .kid-blush { opacity: .85; }
.kid.t-boop .kid-brow, .kid.r-think .kid-brow, .kid.t-follow .kid-brow { transform: translateY(-4px); }

/* ---- reactions (games call these on every answer) ---- */
/* cheer: squash, stretch, wiggle on the spot; arms up with overshoot + fist pumps; head shakes with joy; sparkles */
.kid.r-cheer .kid-rig { animation: kidCheer 1.3s cubic-bezier(.3, .7, .4, 1) both; }
.kid.r-cheer .kid-arm-l { animation: kidCheerL 1.3s ease-out both; }
.kid.r-cheer .kid-arm-r { animation: kidCheerR 1.3s ease-out both; }
.kid.r-cheer .kid-headr { animation: kidJoyHead 1.3s ease-in-out both; }
.kid.r-cheer .kid-yay { display: inline; animation: kidYay 1.3s ease-out both; }
.kid.r-cheer .kid-pt-l, .kid.r-cheer .kid-pt-r, .kid.t-dance .kid-pt-l, .kid.t-dance .kid-pt-r, .kid.t-tickle .kid-pt-l, .kid.t-tickle .kid-pt-r { animation-duration: .55s; }
@keyframes kidCheer { 0% { transform: scale(1, 1) rotate(0); } 12% { transform: scale(1.06, .92) rotate(0); } 28% { transform: scale(.95, 1.07) rotate(-2deg); }
  42% { transform: scale(1.03, .97) rotate(2deg); } 56% { transform: scale(.98, 1.03) rotate(-1.5deg); } 70% { transform: scale(1.01, .99) rotate(1deg); } 85%,100% { transform: scale(1, 1) rotate(0); } }
@keyframes kidCheerL { 0% { transform: rotate(0); } 18% { transform: rotate(136deg); } 30% { transform: rotate(110deg); } 42% { transform: rotate(130deg); } 54% { transform: rotate(112deg); } 66% { transform: rotate(127deg); } 82% { transform: rotate(116deg); } 100% { transform: rotate(0); } }
@keyframes kidCheerR { 0% { transform: rotate(0); } 18% { transform: rotate(-136deg); } 30% { transform: rotate(-110deg); } 42% { transform: rotate(-130deg); } 54% { transform: rotate(-112deg); } 66% { transform: rotate(-127deg); } 82% { transform: rotate(-116deg); } 100% { transform: rotate(0); } }
@keyframes kidJoyHead { 0%,100% { transform: rotate(0); } 22% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 56% { transform: rotate(-5deg); } 72% { transform: rotate(3deg); } 88% { transform: rotate(-1deg); } }
@keyframes kidYay { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 25% { transform: scale(1.12) rotate(4deg); opacity: 1; } 45% { transform: scale(1) rotate(0); } 80% { opacity: 1; } 100% { transform: scale(1.05) rotate(6deg); opacity: 0; } }
/* oops: a little shrug + head tilt, a sway (no jump) */
.kid.r-oops .kid-rig { animation: kidOops 1.3s ease-in-out both; }
.kid.r-oops .kid-headr { animation: kidOopsHead 1.3s ease-in-out both; }
.kid.r-oops .kid-arm-l { animation: kidShrugL 1.3s ease-in-out both; }
.kid.r-oops .kid-arm-r { animation: kidShrugR 1.3s ease-in-out both; }
@keyframes kidOops { 0%,100% { transform: rotate(0) scale(1, 1); } 15% { transform: rotate(-2deg) scale(1.01, .98); } 30% { transform: rotate(2deg) scale(1.01, .98); } 45% { transform: rotate(-1.5deg) scale(1.01, .985); } 62% { transform: rotate(1deg) scale(1.01, .985); } 80% { transform: rotate(0) scale(1.01, .985); } }
@keyframes kidOopsHead { 0%,100% { transform: rotate(0); } 20%,80% { transform: rotate(-9deg); } }
@keyframes kidShrugL { 0%,100% { transform: rotate(0); } 22% { transform: rotate(40deg); } 34% { transform: rotate(32deg); } 78% { transform: rotate(34deg); } }
@keyframes kidShrugR { 0%,100% { transform: rotate(0); } 22% { transform: rotate(-40deg); } 34% { transform: rotate(-32deg); } 78% { transform: rotate(-34deg); } }
/* wave */
.kid.r-wave .kid-arm-r, .kid.f-wave .kid-arm-r { animation: kidWaveR 1.8s ease-in-out both; }
.kid.r-wave .kid-headr { animation: kidTiltHi 1.8s ease-in-out both; }
.kid.r-wave .kid-rig { animation: kidLean 1.8s ease-in-out both; }
@keyframes kidWaveR { 0% { transform: rotate(0); } 14% { transform: rotate(-134deg); } 26% { transform: rotate(-104deg); } 38% { transform: rotate(-132deg); } 50% { transform: rotate(-104deg); } 62% { transform: rotate(-132deg); } 74% { transform: rotate(-106deg); } 86% { transform: rotate(-126deg); } 100% { transform: rotate(0); } }
@keyframes kidTiltHi { 0%,100% { transform: rotate(0); } 15%,85% { transform: rotate(6deg); } }
@keyframes kidLean { 0%,100% { transform: rotate(0); } 20%,80% { transform: rotate(2deg); } }
/* think: hand up, head tilted, eyes up (JS sets the look) */
.kid.r-think .kid-arm-r { animation: kidThinkR 1.3s ease-out both; }
.kid.r-think .kid-headr { animation: kidThinkHead 1.3s ease-in-out both; }
@keyframes kidThinkR { 0% { transform: rotate(0); } 25% { transform: rotate(-132deg); } 35%,85% { transform: rotate(-124deg); } 100% { transform: rotate(0); } }
@keyframes kidThinkHead { 0%,100% { transform: rotate(0); } 25%,85% { transform: rotate(7deg); } }

/* ---- touch gestures (opts.touch) + answers to the buddy ---- */
/* pat on the head: leans into the hand (v1), nuzzles (v2), happy squish (v3) */
.kid.t-pat .kid-headr { animation: kidPat 1.5s ease-in-out both; }
.kid.t-pat.t-v2 .kid-headr { animation-name: kidNuzzle; }
.kid.t-pat .kid-rig { animation: kidPress 1.5s ease-in-out both; }
.kid.t-pat.t-v3 .kid-rig { animation-name: kidSquish; }
@keyframes kidPat { 0%,100% { transform: rotate(0); } 18% { transform: rotate(calc(var(--side) * 9deg)); } 38% { transform: rotate(calc(var(--side) * 6deg)); } 58% { transform: rotate(calc(var(--side) * 9deg)); } 78% { transform: rotate(calc(var(--side) * 6deg)); } }
@keyframes kidNuzzle { 0%,100% { transform: rotate(0); } 14% { transform: rotate(calc(var(--side) * 7deg)); } 28% { transform: rotate(calc(var(--side) * -3deg)); } 42% { transform: rotate(calc(var(--side) * 7deg)); } 56% { transform: rotate(calc(var(--side) * -3deg)); } 72% { transform: rotate(calc(var(--side) * 5deg)); } }
@keyframes kidPress { 0%,100% { transform: scale(1, 1); } 16% { transform: scale(1.025, .97); } 60% { transform: scale(1.015, .985); } }
@keyframes kidSquish { 0%,100% { transform: scale(1, 1); } 14% { transform: scale(1.06, .93); } 30% { transform: scale(.97, 1.04); } 46% { transform: scale(1.04, .96); } 62% { transform: scale(.99, 1.015); } 78% { transform: scale(1.01, .99); } }
/* boop on the face: flinch back, then giggle (v2 = cross-eyed, v3 = nose scrunch) */
.kid.t-boop .kid-headr { animation: kidBoop 1s ease-out both; }
.kid.t-boop.t-v3 .kid-face { animation: kidScrunch 1s ease-out both; }
.kid.t-boop.t-v2 .kid-iris-l { transform: translate(4px, 1px); }
.kid.t-boop.t-v2 .kid-iris-r { transform: translate(-4px, 1px); }
.kid.t-boop .kid-rig { animation: kidGiggle .85s ease-in-out .15s both; }
@keyframes kidBoop { 0% { transform: rotate(0) scale(1); } 10% { transform: rotate(calc(var(--side) * -4deg)) scale(.94, .96); } 26% { transform: rotate(calc(var(--side) * 2deg)) scale(1.03); }
  40% { transform: rotate(-4deg) scale(1); } 54% { transform: rotate(4deg); } 68% { transform: rotate(-3deg); } 82% { transform: rotate(2deg); } 100% { transform: rotate(0); } }
@keyframes kidScrunch { 0%,100% { transform: scale(1, 1); } 12%,40% { transform: scale(1.04, .9); } }
@keyframes kidGiggle { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-1.5deg); } 40% { transform: rotate(1.5deg); } 60% { transform: rotate(-1deg); } 80% { transform: rotate(1deg); } }
/* tickle on the body: wiggle (v1), squirm (v2), fold up laughing (v3); arms hug the belly */
.kid.t-tickle .kid-rig { animation: kidTickle 1.4s ease-in-out both; }
.kid.t-tickle.t-v2 .kid-rig { animation-name: kidSquirm; }
.kid.t-tickle.t-v3 .kid-rig { animation-name: kidFold; }
.kid.t-tickle .kid-headr, .kid.a-laugh .kid-headr { animation: kidLaughHead 1.3s ease-in-out both; }
.kid.t-tickle .kid-arm-l { animation: kidTuckL 1.4s ease-in-out both; }
.kid.t-tickle .kid-arm-r { animation: kidTuckR 1.4s ease-in-out both; }
.kid.t-tickle.t-v3 .kid-arm-l { animation-name: kidFlailL; }
.kid.t-tickle.t-v3 .kid-arm-r { animation-name: kidFlailR; }
@keyframes kidTickle { 0%,100% { transform: rotate(0) scale(1, 1); } 8% { transform: rotate(-3deg) scale(1.03, .96); } 16% { transform: rotate(3deg) scale(1.02, .97); } 24% { transform: rotate(-3deg) scale(1.03, .96); }
  32% { transform: rotate(3deg); } 42% { transform: rotate(-2.5deg) scale(1.02, .98); } 52% { transform: rotate(2.5deg); } 62% { transform: rotate(-2deg); } 72% { transform: rotate(2deg); } 84% { transform: rotate(-1deg); } }
@keyframes kidSquirm { 0%,100% { transform: skewX(0) scale(1, 1); } 12% { transform: skewX(-6deg) scale(1.03, .96); } 26% { transform: skewX(6deg) scale(1.02, .97); } 40% { transform: skewX(-5deg) scale(1.03, .96); }
  54% { transform: skewX(5deg); } 68% { transform: skewX(-3deg); } 84% { transform: skewX(2deg); } }
@keyframes kidFold { 0%,100% { transform: scale(1, 1) rotate(0); } 14% { transform: scale(1.06, .91) rotate(-2deg); } 28% { transform: scale(1.05, .92) rotate(2deg); } 42% { transform: scale(1.06, .91) rotate(-2deg); }
  56% { transform: scale(1.04, .94) rotate(2deg); } 72% { transform: scale(.98, 1.03) rotate(0); } 86% { transform: scale(1.01, .99); } }
@keyframes kidLaughHead { 0%,100% { transform: rotate(0); } 12% { transform: rotate(-5deg); } 26% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 54% { transform: rotate(4deg); } 68% { transform: rotate(-3deg); } 84% { transform: rotate(2deg); } }
@keyframes kidTuckL { 0%,100% { transform: rotate(0); } 15%,80% { transform: rotate(-32deg); } 45% { transform: rotate(-26deg); } }
@keyframes kidTuckR { 0%,100% { transform: rotate(0); } 15%,80% { transform: rotate(32deg); } 45% { transform: rotate(26deg); } }
@keyframes kidFlailL { 0%,100% { transform: rotate(0); } 15% { transform: rotate(70deg); } 30% { transform: rotate(40deg); } 45% { transform: rotate(75deg); } 60% { transform: rotate(45deg); } 80% { transform: rotate(60deg); } }
@keyframes kidFlailR { 0%,100% { transform: rotate(0); } 15% { transform: rotate(-45deg); } 30% { transform: rotate(-75deg); } 45% { transform: rotate(-40deg); } 60% { transform: rotate(-70deg); } 80% { transform: rotate(-50deg); } }
/* high five: the touched hand comes up (v2 both hands), the body leans in */
.kid.t-five.t-hl .kid-arm-l, .kid.t-five.t-v2 .kid-arm-l { animation: kidFiveL 1.2s cubic-bezier(.2, .9, .3, 1.15) both; }
.kid.t-five.t-hr .kid-arm-r, .kid.t-five.t-v2 .kid-arm-r { animation: kidFiveR 1.2s cubic-bezier(.2, .9, .3, 1.15) both; }
.kid.t-five.t-v3.t-hl .kid-arm-l { animation-name: kidFiveWiggleL; }
.kid.t-five.t-v3.t-hr .kid-arm-r { animation-name: kidFiveWiggleR; }
.kid.t-five .kid-rig { animation: kidFiveLean 1.2s ease-in-out both; }
.kid.t-five .kid-headr { animation: kidTiltHi 1.2s ease-in-out both; }
@keyframes kidFiveL { 0% { transform: rotate(0); } 16% { transform: rotate(134deg); } 24% { transform: rotate(118deg); } 32% { transform: rotate(126deg); } 78% { transform: rotate(124deg); } 100% { transform: rotate(0); } }
@keyframes kidFiveR { 0% { transform: rotate(0); } 16% { transform: rotate(-134deg); } 24% { transform: rotate(-118deg); } 32% { transform: rotate(-126deg); } 78% { transform: rotate(-124deg); } 100% { transform: rotate(0); } }
@keyframes kidFiveWiggleL { 0% { transform: rotate(0); } 16% { transform: rotate(132deg); } 28% { transform: rotate(112deg); } 40% { transform: rotate(132deg); } 52% { transform: rotate(112deg); } 64% { transform: rotate(130deg); } 80% { transform: rotate(120deg); } 100% { transform: rotate(0); } }
@keyframes kidFiveWiggleR { 0% { transform: rotate(0); } 16% { transform: rotate(-132deg); } 28% { transform: rotate(-112deg); } 40% { transform: rotate(-132deg); } 52% { transform: rotate(-112deg); } 64% { transform: rotate(-130deg); } 80% { transform: rotate(-120deg); } 100% { transform: rotate(0); } }
@keyframes kidFiveLean { 0%,100% { transform: rotate(0) scale(1, 1); } 14% { transform: rotate(calc(var(--side) * 3deg)) scale(.98, 1.03); } 26% { transform: rotate(calc(var(--side) * 1.5deg)) scale(1.03, .97); } 40%,78% { transform: rotate(calc(var(--side) * 2deg)) scale(1, 1); } }
/* double tap: a little dance on the spot (v1 disco, v2 arms up twist, v3 swing) */
.kid.t-dance .kid-rig { animation: kidDance 2.2s ease-in-out both; }
.kid.t-dance.t-v2 .kid-rig { animation-name: kidTwist; }
.kid.t-dance .kid-headr { animation: kidDanceHead 2.2s ease-in-out both; }
.kid.t-dance .kid-arm-l { animation: kidDiscoL 2.2s ease-in-out both; }
.kid.t-dance .kid-arm-r { animation: kidDiscoR 2.2s ease-in-out both; }
.kid.t-dance.t-v2 .kid-arm-l { animation-name: kidUpL; }
.kid.t-dance.t-v2 .kid-arm-r { animation-name: kidUpR; }
.kid.t-dance.t-v3 .kid-arm-l { animation-name: kidSwingL; }
.kid.t-dance.t-v3 .kid-arm-r { animation-name: kidSwingR; }
@keyframes kidDance { 0%,100% { transform: rotate(0) scale(1, 1); } 12% { transform: rotate(-6deg) scale(1.03, .97); } 25% { transform: rotate(0) scale(.98, 1.03); } 37% { transform: rotate(6deg) scale(1.03, .97); }
  50% { transform: rotate(0) scale(.98, 1.03); } 62% { transform: rotate(-6deg) scale(1.03, .97); } 75% { transform: rotate(0) scale(.98, 1.03); } 87% { transform: rotate(6deg) scale(1.03, .97); } }
@keyframes kidTwist { 0%,100% { transform: skewX(0) scale(1, 1); } 8% { transform: skewX(-6deg) scale(1.02, .98); } 16% { transform: skewX(6deg) scale(.99, 1.02); } 25% { transform: skewX(-6deg) scale(1.02, .98); } 33% { transform: skewX(6deg); }
  42% { transform: skewX(-6deg) scale(1.02, .98); } 50% { transform: skewX(6deg); } 58% { transform: skewX(-6deg); } 67% { transform: skewX(6deg) scale(1.02, .98); } 75% { transform: skewX(-6deg); } 83% { transform: skewX(6deg); } 92% { transform: skewX(-3deg); } }
@keyframes kidDanceHead { 0%,100% { transform: rotate(0); } 12% { transform: rotate(5deg); } 37% { transform: rotate(-5deg); } 62% { transform: rotate(5deg); } 87% { transform: rotate(-5deg); } }
@keyframes kidDiscoL { 0%,100% { transform: rotate(0); } 12% { transform: rotate(130deg); } 25% { transform: rotate(20deg); } 50% { transform: rotate(10deg); } 62% { transform: rotate(130deg); } 75% { transform: rotate(20deg); } }
@keyframes kidDiscoR { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 37% { transform: rotate(-130deg); } 50% { transform: rotate(-20deg); } 75% { transform: rotate(-10deg); } 87% { transform: rotate(-130deg); } }
@keyframes kidUpL { 0%,100% { transform: rotate(0); } 10% { transform: rotate(132deg); } 25% { transform: rotate(108deg); } 40% { transform: rotate(132deg); } 55% { transform: rotate(108deg); } 70% { transform: rotate(132deg); } 88% { transform: rotate(118deg); } }
@keyframes kidUpR { 0%,100% { transform: rotate(0); } 10% { transform: rotate(-108deg); } 25% { transform: rotate(-132deg); } 40% { transform: rotate(-108deg); } 55% { transform: rotate(-132deg); } 70% { transform: rotate(-108deg); } 88% { transform: rotate(-118deg); } }
@keyframes kidSwingL { 0%,100% { transform: rotate(0); } 12% { transform: rotate(-40deg); } 37% { transform: rotate(50deg); } 62% { transform: rotate(-40deg); } 87% { transform: rotate(50deg); } }
@keyframes kidSwingR { 0%,100% { transform: rotate(0); } 12% { transform: rotate(-50deg); } 37% { transform: rotate(40deg); } 62% { transform: rotate(-50deg); } 87% { transform: rotate(40deg); } }
/* long press: a hug (arms cross, squeeze, sway, hearts) */
.kid.t-hug .kid-rig { animation: kidHug 2s ease-in-out both; }
.kid.t-hug .kid-arm-l { animation: kidHugL 2s ease-in-out both; }
.kid.t-hug .kid-arm-r { animation: kidHugR 2s ease-in-out both; }
.kid.t-hug .kid-headr { animation: kidCozy 2s ease-in-out both; }
.kid.a-aww .kid-headr { animation: kidCozy 1.4s ease-in-out both; }
@keyframes kidHug { 0%,100% { transform: scale(1, 1) rotate(0); } 14% { transform: scale(.95, 1.04) rotate(0); } 30% { transform: scale(.97, 1.02) rotate(-3deg); } 50% { transform: scale(.95, 1.04) rotate(3deg); } 70% { transform: scale(.97, 1.02) rotate(-2deg); } 86% { transform: scale(.99, 1.01) rotate(0); } }
@keyframes kidHugL { 0%,100% { transform: rotate(0); } 16%,84% { transform: rotate(-56deg); } 50% { transform: rotate(-50deg); } }
@keyframes kidHugR { 0%,100% { transform: rotate(0); } 16%,84% { transform: rotate(56deg); } 50% { transform: rotate(50deg); } }
@keyframes kidCozy { 0%,100% { transform: rotate(0); } 18% { transform: rotate(calc(var(--side) * 8deg)); } 50% { transform: rotate(calc(var(--side) * 5deg)); } 80% { transform: rotate(calc(var(--side) * 8deg)); } }
/* answers to the buddy being touched: aww (above), laugh (above), clap */
.kid.a-laugh .kid-rig { animation: kidGiggle 1.2s ease-in-out both; }
.kid.a-clap .kid-arm-l { animation: kidClapL 1.2s ease-in-out both; }
.kid.a-clap .kid-arm-r { animation: kidClapR 1.2s ease-in-out both; }
.kid.a-clap .kid-headr { animation: kidJoyHead 1.2s ease-in-out both; }
@keyframes kidClapL { 0%,100% { transform: rotate(0); } 15% { transform: rotate(-18deg); } 25% { transform: rotate(-36deg); } 35% { transform: rotate(-18deg); } 45% { transform: rotate(-36deg); } 55% { transform: rotate(-18deg); } 65% { transform: rotate(-36deg); } 82% { transform: rotate(-24deg); } }
@keyframes kidClapR { 0%,100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 25% { transform: rotate(36deg); } 35% { transform: rotate(18deg); } 45% { transform: rotate(36deg); } 55% { transform: rotate(18deg); } 65% { transform: rotate(36deg); } 82% { transform: rotate(24deg); } }

/* ---- idle fidgets (one now and then, picked at random from JS) ---- */
.kid.f-stretch .kid-arm-l { animation: kidStretchL 2s ease-in-out both; }
.kid.f-stretch .kid-arm-r { animation: kidStretchR 2s ease-in-out both; }
.kid.f-stretch .kid-rig { animation: kidStretch 2s ease-in-out both; }
@keyframes kidStretchL { 0%,100% { transform: rotate(0); } 32%,66% { transform: rotate(134deg); } 50% { transform: rotate(130deg); } }
@keyframes kidStretchR { 0%,100% { transform: rotate(0); } 32%,66% { transform: rotate(-134deg); } 50% { transform: rotate(-130deg); } }
@keyframes kidStretch { 0%,100% { transform: scale(1, 1); } 12% { transform: scale(1.02, .98); } 36%,62% { transform: scale(.98, 1.035); } 80% { transform: scale(1.01, .99); } }
.kid.f-scratch .kid-arm-r { animation: kidScratchR 1.6s ease-in-out both; }
.kid.f-scratch .kid-headr { animation: kidScratchHead 1.6s ease-in-out both; }
@keyframes kidScratchR { 0%,100% { transform: rotate(0); } 22% { transform: rotate(-146deg); } 32% { transform: rotate(-138deg); } 42% { transform: rotate(-148deg); } 52% { transform: rotate(-138deg); } 62% { transform: rotate(-148deg); } 76% { transform: rotate(-140deg); } }
@keyframes kidScratchHead { 0%,100% { transform: rotate(0); } 22%,76% { transform: rotate(6deg); } }
.kid.f-yawn .kid-headr { animation: kidYawnHead 2s ease-in-out both; }
.kid.f-yawn .kid-arm-l { animation: kidYawnL 2s ease-in-out both; }
.kid.f-yawn .kid-arm-r { animation: kidYawnR 2s ease-in-out both; }
@keyframes kidYawnHead { 0%,100% { transform: rotate(0) scale(1); } 30%,64% { transform: rotate(-4deg) scale(1.02, .98); } }
@keyframes kidYawnL { 0%,100% { transform: rotate(0); } 34%,66% { transform: rotate(62deg); } }
@keyframes kidYawnR { 0%,100% { transform: rotate(0); } 34%,66% { transform: rotate(-62deg); } }
.kid.f-wave .kid-arm-r { animation-duration: 1.5s; }
.kid.f-wave .kid-headr { animation: kidTiltHi 1.5s ease-in-out both; }
.kid.f-hum .kid-headr { animation: kidHum 2.4s ease-in-out both; }
.kid.f-hum .kid-rig { animation: kidHumBody 2.4s ease-in-out both; }
@keyframes kidHum { 0%,100% { transform: rotate(0); } 15% { transform: rotate(4deg); } 35% { transform: rotate(-4deg); } 55% { transform: rotate(4deg); } 75% { transform: rotate(-4deg); } 90% { transform: rotate(1deg); } }
@keyframes kidHumBody { 0%,100% { transform: rotate(0); } 15% { transform: rotate(-1.4deg); } 35% { transform: rotate(1.4deg); } 55% { transform: rotate(-1.4deg); } 75% { transform: rotate(1.4deg); } }
/* ---- hand items held properly (js/core/kid.js Kid.grip, 2026-11-11): the arm pose per grip (.kid-arm-lh / -rh, between the
   gesture layer and the idle swing). A holding arm keeps holding: no reaction / touch / fidget moves it (the free arm still
   gestures); two-handed holds keep both arms on the item, the body still squashes and sways. ---- */
.kid-arm-lh { transform-origin: 57px 160px; }
.kid-arm-rh { transform-origin: 143px 160px; }
.kid-svg.hold-l .kid-arm-l, .kid-svg.hold-2 .kid-arm-l, .kid-svg.hold-2 .kid-arm-r { animation: none !important; }
.kid-svg.hold-2 .kid-arm-li, .kid-svg.hold-2 .kid-arm-ri { animation: none; }
.g-wand .kid-arm-lh { transform: rotate(30deg); }
.g-icecream .kid-arm-lh { transform: rotate(-30deg); }
.g-star .kid-arm-lh { transform: rotate(118deg); }
.g-balloon .kid-arm-lh { transform: rotate(18deg); }
.g-diamond .kid-arm-lh { transform: rotate(-21deg); }
.g-diamond .kid-arm-rh { transform: rotate(21deg); }
.g-guitar .kid-arm-lh { transform: rotate(38deg); }
.g-guitar .kid-arm-rh { animation: kidStrum calc(2.6s * var(--kid-t)) ease-in-out infinite; }
.g-teddy .kid-arm-lh { animation: kidCarry calc(3.6s * var(--kid-t)) ease-in-out infinite; }   /* the carrying arm presses the teddy in now and then */
.kid-g-squeeze { transform-origin: 36px 214px; animation: kidSqueeze calc(3.6s * var(--kid-t)) ease-in-out infinite; }
@keyframes kidCarry { 0%,60%,100% { transform: rotate(0); } 72%,82% { transform: rotate(-3deg); } }
.kid-g-glow { animation: kidGGlow calc(1.8s * var(--kid-t)) ease-in-out infinite; }
@keyframes kidStrum { 0%,46%,100% { transform: rotate(20deg); } 52% { transform: rotate(14deg); } 58% { transform: rotate(26deg); } 64% { transform: rotate(14deg); } 70% { transform: rotate(26deg); } 78% { transform: rotate(16deg); } 86% { transform: rotate(24deg); } }
@keyframes kidSqueeze { 0%,60%,100% { transform: scale(1, 1); } 72%,82% { transform: scale(.93, 1.04); } }
@keyframes kidGGlow { 0%,100% { transform: scale(.85); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
.kid-g-twinkle { animation: kidGTwinkle 1.6s ease-in-out infinite; }   /* the sparkles of a wand / star / diamond in the hand */
@keyframes kidGTwinkle { 0%,100% { transform: scale(.15) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kid { --kid-t: 2.2; } }

/* companion placement */
.kid-side { position: absolute; z-index: 25; pointer-events: none; }
.game-body { flex: 1; display: flex; min-height: 0; position: relative; }
.game-body > .stage { flex: 1; }
.kid-col { width: 0; display: none; align-items: flex-end; justify-content: center; padding-bottom: 8px; flex-shrink: 0; background: linear-gradient(180deg, transparent, rgba(255,255,255,.35)); }
.kid-col .kid { width: 150px; height: 225px; }
.top-kid { width: 60px; height: 60px; flex-shrink: 0; }
.top-kid .kid { width: 60px; height: 60px; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .kid-col { display: flex; width: 170px; }
  .top-kid { display: none; }
}
.map-kid { position: absolute; left: clamp(20px, 4vw, 44px); bottom: 26px; width: 120px; height: 180px; z-index: 22; pointer-events: auto; cursor: pointer; }
.map-kid .kid { width: 100%; height: 100%; }
.speech { position: absolute; background: #fff; border-radius: 18px; padding: 8px 14px; font-size: 17px; line-height: 1.3; box-shadow: var(--shadow); max-width: 220px; z-index: 26; animation: popIn .3s; }

.kid-avatar .kid { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } /* the circle crops the kid, not the avatar (an aura's ring shows around it) */
/* the small round avatars keep every animation (parent 2026-11-09: never remove animations for performance, on any device);
   their own layer, so the avatar's animation repaints less of the frosted bar / card behind it */
.kid-avatar { will-change: transform; }
/* character designer */
.look-editor { display: flex; gap: 18px; align-items: flex-start; justify-content: center; flex-wrap: wrap; width: min(900px, 96vw); }
.look-preview { width: 170px; height: 255px; flex-shrink: 0; position: sticky; top: 0; background: radial-gradient(circle at 50% 60%, #fff 0, rgba(255,255,255,0) 70%); border-radius: 30px; }
.look-preview .kid { width: 100%; height: 100%; }
.look-panel { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,.7); border-radius: 22px; padding: 12px; }
.look-row { display: flex; flex-direction: column; gap: 6px; }
.look-label { font-weight: bold; font-size: 17px; }
.look-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.look-sw { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 3px 0 rgba(0,0,0,.15), inset 0 0 0 2px rgba(0,0,0,.08); }
.look-sw.sel { outline: 4px solid var(--purple); outline-offset: 2px; }
.look-pill { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; min-height: 48px; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #ddd3f3; font-size: 15px; }
.look-pill.sel { background: var(--yellow); box-shadow: 0 3px 0 #d9a800; }
.look-mini { width: 54px; height: 54px; line-height: 0; }
.look-mini svg { width: 100%; height: 100%; overflow: hidden; }
.kid-bust .kid-svg, .top-kid .kid-svg { overflow: hidden; }
.look-mini .kid-svg * { animation: none !important; }
.map-hero .avatar { box-shadow: 0 4px 0 rgba(0,0,0,.2); }

/* the home base's house (Screens.houseArt, 2026-11-10: no shop on the map, just a nicer, bigger house). Only transform /
   opacity animate: the chimney smoke, the windows' warm glow, the flowers */
.map-house { position: absolute; left: calc(clamp(20px, 4vw, 44px) + 112px); bottom: 18px; z-index: 21; background: none; padding: 0; line-height: 0; cursor: pointer; }
.map-house .mh-art { display: block; width: clamp(140px, 23vmin, 220px); transition: transform .14s; transform-origin: 50% 100%; }
.map-house .mh-art svg { width: 100%; height: auto; display: block; overflow: visible; }
.map-house:hover .mh-art { transform: scale(1.04); }
.map-house:active .mh-art { transform: scale(.94); }
.mh-smoke circle { transform-box: fill-box; transform-origin: center; opacity: 0; animation: mhSmoke 3.6s ease-out infinite; }
.mh-smoke circle:nth-child(2) { animation-delay: -1.2s; } .mh-smoke circle:nth-child(3) { animation-delay: -2.4s; }
@keyframes mhSmoke { 0% { transform: translate(0, 4px) scale(.45); opacity: 0; } 18% { opacity: .9; } 100% { transform: translate(10px, -24px) scale(1.5); opacity: 0; } }
.mh-glow { transform-box: fill-box; transform-origin: center; animation: mhGlow 2.8s ease-in-out infinite alternate; }
@keyframes mhGlow { from { opacity: .45; transform: scale(.9); } to { opacity: 1; transform: scale(1.06); } }
.mh-fl { transform-box: fill-box; transform-origin: 50% 100%; animation: mhSway 2.6s ease-in-out infinite alternate; }
@keyframes mhSway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@media (max-width: 430px) { .map-house { left: 138px; bottom: 14px; } .map-house .mh-art { width: min(150px, calc(100vw - 150px)); } }
@media (orientation: landscape) and (max-height: 560px) { .map-house { left: 112px; bottom: 4px; } .map-house .mh-art { width: 104px; } }

/* ================= screens polish (2nd review) ================= */
/* screens that scroll as a page: their children keep their natural height */
.profiles-screen > *, .wizard > * { flex-shrink: 0; }
.login-card { width: min(460px, 94vw); max-height: none; overflow: visible; }
.login-input { font-size: 22px; padding: 12px 16px; width: 100%; }
.login-card .tabs { padding: 0; }
.parents-btn { min-height: 48px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 17px; font-weight: bold; color: var(--muted); box-shadow: 0 4px 0 #ddd3f3; z-index: 2; }
@media (max-width: 640px) { .profiles-screen { padding-top: 70px; } }
/* white buttons on white cards need an edge */
.card .btn.white { background: #f4f1fb; box-shadow: 0 6px 0 #d8ccf7; }
.card .btn.white:active { box-shadow: 0 1px 0 #d8ccf7; }
/* game frame: dots shrink to fit (8 dots on a phone) */
.progress i.ok, .progress i.half { font-size: clamp(9px, 2.6vw, 16px); }
@media (max-width: 420px) {
  .game-top { gap: 6px; padding: 6px 8px; }
  .game-top .icon-btn { width: 46px; height: 46px; font-size: 22px; }
  .game-top .coins-pill { font-size: 18px; padding: 5px 10px 5px 8px; gap: 4px; }
  .game-top .coins-pill .coin-ic { font-size: 19px; }
  /* not enough width for a row of dots: let them wrap into two short rows */
  .progress { flex-wrap: wrap; gap: 3px 4px; align-content: center; }
  .progress i { flex: 0 0 17px; height: 17px; min-width: 0; font-size: 10px; }
  .progress i.ok, .progress i.half { font-size: 10px; }
}
/* shop: the category tabs are one sideways-scrolling row */
.shop-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: safe center; scrollbar-width: none; padding: 4px 12px 12px; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs .tab { flex-shrink: 0; white-space: nowrap; min-height: 48px; }
/* the shop's festive header */
.shop-top { gap: 12px; }
.shop-title { display: inline-flex; align-items: center; gap: 8px; padding: 6px 22px 8px; border-radius: 999px; font-size: 26px; font-weight: bold; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, #ff6d9b, #b388eb); box-shadow: 0 5px 0 #c8447a, 0 10px 22px rgba(232,69,122,.28); text-shadow: 0 2px 0 rgba(120,30,80,.25); }
.shop-title .st-ic { font-size: 1.15em; animation: floatY 2.4s ease-in-out infinite; }
/* the house tab stands out (the parent: "make it highlighted") */
.shop-tabs .tab.house { background: linear-gradient(135deg, #fff3c4, #ffe08a); box-shadow: 0 4px 0 #e8b93a; }
.shop-tabs .tab.house.on { background: linear-gradient(135deg, #ff9f43, #ff6d9b); color: #fff; box-shadow: 0 4px 0 #c8447a; }
/* the house groups (HouseCatalog.GROUPS): a second sideways-scrolling row of smaller pills */
.shop-sub { flex-wrap: nowrap; overflow-x: auto; justify-content: safe center; scrollbar-width: none; padding: 0 12px 12px; gap: 8px; }
.shop-sub:empty { display: none; }
.shop-sub::-webkit-scrollbar { display: none; }
.shop-sub .tab { flex-shrink: 0; white-space: nowrap; min-height: 44px; font-size: 17px; padding: 8px 15px; background: rgba(255,255,255,.85); }
.shop-sub .tab.on { background: #ff9f43; color: #fff; box-shadow: 0 4px 0 #d9792a; }
.shop-grid .slot-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: bold; color: var(--ink, #3b2f63); padding: 10px 6px 4px; border-bottom: 3px dashed rgba(155,109,255,.28); }
.shop-grid .slot-head:first-child { padding-top: 0; }
.slot-head .sh-ic { font-size: 26px; line-height: 1; }
.worn-badge { position: absolute; top: 8px; inset-inline-end: 8px; background: var(--green); color: #fff; font-weight: bold; font-size: 14px; line-height: 1; padding: 5px 9px; border-radius: 99px; box-shadow: 0 2px 0 rgba(0,0,0,.12); pointer-events: none; }
.shop-sub .tab.dream { background: linear-gradient(135deg, #fff6c8, #ffd84a); color: #7a4b00; box-shadow: 0 4px 0 #d9a800, 0 0 14px rgba(255,200,40,.6); }
.shop-sub .tab.dream.on { background: linear-gradient(135deg, #ffd84a, #f5a800); color: #fff; text-shadow: 0 1px 0 rgba(120,70,0,.4); }
.shop-decor .item .nm { font-size: 18px; }
/* the dreams: golden, glowing tiles, the price big, how far the kid is */
.shop-dreams { background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.8) 0 2px, transparent 3px) 0 0 / 38px 38px,
  radial-gradient(circle at 60% 70%, rgba(255,216,74,.55) 0 2.5px, transparent 3.5px) 0 0 / 52px 52px, linear-gradient(180deg, #3b2f63, #6b4fb0 55%, #9b6dff); }
.shop-dreams .shop-top .icon-btn { background: rgba(255,255,255,.9); }
.dream-head { grid-column: 1 / -1; text-align: center; color: #fff; padding: 2px 0 4px; }
.dream-head .dh-t { font-size: clamp(22px, 5vw, 30px); font-weight: bold; color: #ffe27a; text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 0 18px rgba(255,216,74,.7); }
.dream-head .dh-s { font-size: 17px; opacity: .92; }
.shop-grid .dream-head.in-list { margin-top: 10px; padding: 14px 10px 12px; border-radius: 24px; background: linear-gradient(135deg, #3f2a8c 0%, #6b45d6 45%, #b07a10 100%); box-shadow: 0 6px 0 #a87800, 0 0 24px rgba(255,200,40,.45); }
.item.dream { background: linear-gradient(160deg, #fffbe6 0%, #ffe9a3 55%, #ffd45a 100%); box-shadow: 0 6px 0 #d9a800, 0 0 0 3px #fff3b8 inset, 0 0 26px rgba(255,210,60,.65);
  animation: dreamGlow 2.8s ease-in-out infinite alternate; }
@keyframes dreamGlow { from { box-shadow: 0 6px 0 #d9a800, 0 0 0 3px #fff3b8 inset, 0 0 16px rgba(255,210,60,.45); } to { box-shadow: 0 6px 0 #d9a800, 0 0 0 3px #fff3b8 inset, 0 0 34px rgba(255,210,60,.95); } }
.item.dream::before { content: '✨'; position: absolute; top: 8px; inset-inline-end: 10px; font-size: 22px; animation: floatY 2s ease-in-out infinite; }
.item.dream .ic { font-size: 80px; height: 96px; filter: drop-shadow(0 4px 8px rgba(160,100,0,.35)); }
.item.dream .ic.thumb img { width: 120px; height: 120px; }
.item.dream .nm { font-size: 19px; color: #6b3f00; }
.item.dream .btn.buy { font-size: 26px; min-height: 56px; padding: 6px 22px; }
.item.dream.owned { background: linear-gradient(160deg, #f4fff7, #c8f5da); animation: none; box-shadow: 0 6px 0 #6fcf97; }
.dr-bar { width: 88%; height: 14px; border-radius: 99px; background: rgba(122,75,0,.15); overflow: hidden; box-shadow: inset 0 2px 0 rgba(0,0,0,.08); }
.dr-bar i { display: block; height: 100%; min-width: 14px; border-radius: 99px; background: linear-gradient(90deg, #ffb703, #ff6d9b); }
.dr-bar.full i { background: linear-gradient(90deg, #3bceac, #6fe08a); }
.dr-have { font-size: 14px; color: #7a4b00; text-align: center; line-height: 1.25; display: flex; flex-direction: column; align-items: center; }
.dr-have .dr-n { white-space: nowrap; } .dr-have b { font-size: 15px; }
.dr-have.can { font-weight: bold; color: #1d8a70; }
.item .nm { min-height: 1.3em; overflow-wrap: anywhere; }
.item button .coin-ic, .btn .coin-ic { font-size: .95em; }
@media (max-height: 700px) { .closet-preview { padding: 4px 0 8px; } .shop-screen .topbar { height: 60px; } }
@media (max-width: 520px) {
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; padding: 8px 12px 24px; }
  .item .ic { font-size: 60px; height: 74px; } .item .ic.thumb img { width: 92px; height: 92px; }
  .shop-title { font-size: 21px; padding: 5px 16px 7px; }
  .item.dream .btn.buy { font-size: 22px; padding: 6px 14px; }
}
/* narrow phones: the shop's top bar keeps a 5-digit coin count whole (12,345 at 360 px) */
@media (max-width: 420px) {
  .shop-top { gap: 8px; padding: 8px 8px; }
  .shop-top .icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
  .shop-title { font-size: 19px; padding: 5px 13px 6px; gap: 5px; min-width: 0; }
  .shop-top .coins-pill { font-size: 18px; padding: 5px 10px 5px 8px; gap: 4px; flex-shrink: 0; } .shop-top .coins-pill .coin-ic { font-size: 19px; }
}
@media (max-width: 340px) { .shop-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
/* phone held sideways: the kid preview stands at the side, the tabs + items take the rest (not one row of items under it) */
@media (orientation: landscape) and (max-height: 500px) {
  .shop-screen { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); }
  .shop-screen > .topbar { grid-column: 1 / -1; height: 54px; }
  .shop-screen > .closet-preview { grid-column: 1; grid-row: 2 / 5; align-items: center; padding: 0 0 0 12px; }
  .shop-screen > .shop-tabs, .shop-screen > .shop-sub, .shop-screen > .shop-grid { grid-column: 2; }
  .shop-tabs { padding: 2px 10px 6px; } .shop-sub { padding: 0 10px 6px; }
  .shop-tabs .tab, .shop-sub .tab { min-height: 40px; padding: 6px 13px; font-size: 16px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; padding: 6px 10px 20px; }
  .item { padding: 10px 8px; gap: 5px; } .item .ic { font-size: 50px; height: 58px; } .item .ic.thumb img { width: 76px; height: 76px; }
  .item.dream .ic { font-size: 58px; height: 66px; } .dream-head .dh-t { font-size: 20px; } .dream-head .dh-s { display: none; }
}
/* album */
.album-screen { background: linear-gradient(180deg, #e7ddff, #fff2f8); }
.album-title { font-size: clamp(19px, 5vw, 26px); font-weight: bold; white-space: nowrap; display: flex; align-items: center; gap: 8px; min-width: 0; }
.album-count { font-size: .75em; background: var(--purple); color: #fff; border-radius: 99px; padding: 2px 10px; }
.album-egg { flex-shrink: 0; }
@media (max-width: 520px) { .album-egg { min-height: 48px; padding: 6px 14px; } }
.sticker.r2 { background: #eef6ff; box-shadow: 0 4px 0 #b9d4ff; }
.sticker.r3 { background: linear-gradient(145deg, #fff6c2, #ffd6ec); box-shadow: 0 4px 0 #f0c040, 0 0 14px rgba(255, 200, 60, .55); }
/* parents */
.lock-card { max-width: min(440px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lock-card .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lock-input { direction: ltr; width: min(300px, 76vw); font-size: 22px; text-align: center; }
.lock-panel .lock-input { font-size: 20px; text-align: start; }
.lock-msg { min-height: 22px; color: #c33; text-align: center; margin: 0; }
.link-btn { background: none; border: 0; color: #6b5fb0; text-decoration: underline; font: inherit; font-size: 16px; cursor: pointer; padding: 6px; }
.skill-row .adj button { width: 36px; height: 36px; font-size: 20px; }
.skill-row { grid-template-columns: 130px 1fr 54px 80px; }
.kid-report h3 { overflow-wrap: anywhere; }
@media (max-width: 520px) { .skill-row { grid-template-columns: 92px 1fr 36px 78px; gap: 8px; } }
.toggle-row { gap: 10px; }
.toggle-row input[type=range] { flex-shrink: 1; min-width: 90px; }
/* long names never push the layout */
.profile-card > div:nth-child(2) { max-width: 100%; overflow-wrap: anywhere; line-height: 1.15; }
.login-card .tab { font-size: 16px; padding: 8px 14px; }
@media (max-width: 400px) { .album-ic { display: none; } .album-screen .topbar { gap: 8px; } .album-egg { padding: 6px 12px; font-size: 17px; } }

/* game screen: the game uses the whole width; the kid + buddy stand in a little "window" at the bottom-left (wide screens only) */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .game-body > .kid-col.kid-col {
    position: absolute; left: 16px; bottom: 16px; width: 220px; height: clamp(210px, 30vh, 250px); z-index: 40; pointer-events: none;
    display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: 0; padding: 0 10px 14px; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, #f6f0ff 45%, #e9ddff 100%);
    border: 5px solid #fff; border-radius: 34px;
    box-shadow: 0 7px 0 rgba(155,109,255,.28), 0 16px 34px rgba(59,47,99,.20), inset 0 0 0 2px rgba(155,109,255,.15);
  }
  /* grassy floor + a little glow behind the kid */
  .game-body > .kid-col.kid-col::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: -34px; height: 70px; border-radius: 50%;
    background: radial-gradient(60% 60% at 50% 30%, #9be58a 0%, #6fcf6a 60%, #57b85a 100%); box-shadow: inset 0 6px 0 rgba(255,255,255,.35); }
  .game-body > .kid-col.kid-col::after { content: ''; position: absolute; left: 50%; top: 18%; width: 150px; height: 150px; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,232,140,.55) 0%, rgba(255,232,140,0) 70%); }
  .game-body > .kid-col.kid-col > .kid { position: relative; left: 0; width: 136px; height: 204px; z-index: 1; margin-bottom: -6px; }
  .game-body > .kid-col.kid-col > .kid-col-bd { position: relative; right: auto; bottom: 0; width: 86px; height: 86px; z-index: 1; margin-inline-start: -14px; }
}

/* the game's instructions: a speech bubble from the kid over the (still empty) game, read aloud; "play" skips it.
   Phones: it hangs from the kid's head in the top bar (tail up at --tail-x). Wide screens: it comes out of the kid window. */
.intro-layer { position: absolute; inset: 0; z-index: 45; display: flex; justify-content: center; align-items: flex-start; padding: 14px 14px 0;
  background: rgba(59,47,99,.10); }
/* the game behind the bubble stands still (CSS animations; Web animations + transitions are paused by the engine) */
.stage.intro-frozen, .stage.intro-frozen * { animation-play-state: paused !important; }
.intro-bubble { position: relative; max-width: min(520px, 100%); background: #fff; border-radius: 30px; padding: 18px 24px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 6px 0 rgba(155,109,255,.25), 0 16px 34px rgba(59,47,99,.22);
  border: 4px solid #e9ddff; }
.intro-bubble::before { content: ''; position: absolute; top: -18px; left: var(--tail-x, 50%); transform: translateX(-50%);
  border: 14px solid transparent; border-bottom: 18px solid #e9ddff; border-top: 0; }
.intro-bubble::after { content: ''; position: absolute; top: -12px; left: var(--tail-x, 50%); transform: translateX(-50%);
  border: 10px solid transparent; border-bottom: 13px solid #fff; border-top: 0; }
.intro-bubble .ib-head { display: flex; align-items: center; gap: 12px; }
.intro-bubble .ib-icon { font-size: 54px; line-height: 1; animation: floatY 2.4s ease-in-out infinite; }
.intro-bubble h2 { margin: 0; }
.intro-bubble p { margin: 0; font-size: 21px; line-height: 1.4; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .intro-layer { display: block; padding: 0; }
  .intro-bubble { position: absolute; left: 262px; bottom: calc(clamp(210px, 30vh, 250px) - 60px); max-width: min(560px, calc(100% - 290px)); padding: 24px 32px 24px; }
  .intro-bubble p { font-size: 24px; }
  /* tail on the bubble's bottom-left corner, pointing down-left at the kid in the window */
  .intro-bubble::before { top: auto; bottom: 18px; left: -28px; transform: none; border: 14px solid transparent; border-right: 28px solid #e9ddff; border-left: 0; }
  .intro-bubble::after { top: auto; bottom: 22px; left: -20px; transform: none; border: 10px solid transparent; border-right: 21px solid #fff; border-left: 0; }
}

/* offline indicator (main.js offlineBadge, parent 2026-11-09): a round wifi-off button at the top right, just under the
   top bar (68px), above games; tap = explanation bubble under it. Always on the right, in Hebrew and English. */
.offline-tab { position: fixed; top: calc(76px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); z-index: 9000;
  display: none; width: 48px; height: 48px; padding: 0; border: 2px solid #ffd0d0; border-radius: 50%; background: #fff; color: #e5484d;
  box-shadow: 0 3px 10px rgba(59,47,99,.25); cursor: pointer; animation: offlinePulse 2.4s ease-in-out infinite; }
.offline-tab.show { display: flex; align-items: center; justify-content: center; }
@keyframes offlinePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.offline-tip { position: fixed; top: calc(132px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); z-index: 9001;
  display: none; width: min(320px, calc(100vw - 32px)); background: var(--ink); color: #fff; padding: 14px 16px; border-radius: 18px;
  font-size: 17px; line-height: 1.4; box-shadow: 0 6px 18px rgba(0,0,0,.25); animation: popIn .25s; }
.offline-tip.show { display: block; }
.offline-tip b { display: block; font-size: 19px; margin-bottom: 6px; }
.offline-tip p { margin: 0; }

/* ---------- new-topic lessons (js/core/tutorial.js): the overlay, the 💡 buttons, the map's shelf ---------- */
.tut-card { position: relative; width: min(560px, 94vw); max-height: 94vh; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow: hidden; }
.tut-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 40px; height: 40px; font-size: 18px; }
.tut-head { display: flex; align-items: center; gap: 12px; align-self: stretch; padding-inline-end: 44px; }
.tut-ic { flex-shrink: 0; width: 58px; height: 58px; border-radius: 18px; background: #ece8fb; display: flex; align-items: center; justify-content: center; font-size: 34px; line-height: 1; }   /* a badge, so ✖️ (multiplication) never looks like the close button */
.tut-ic.sign { width: auto; padding: 0 12px; font-size: 26px; font-weight: bold; color: #6c5ce7; direction: ltr; }
.tut-btns { margin-top: 24px; }   /* (parent, 2026-11-10: the buttons 24 px lower, always shown) */
.tut-kicker { font-size: 14px; color: #7a6fb0; font-weight: bold; }
.tut-head h2 { margin: 2px 0 0; font-size: 26px; }
.tut-stage { position: relative; width: 100%; min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #f4f1ff; border-radius: 22px; padding: 14px 8px; box-sizing: border-box; }
.tut-cap { margin: 0; min-height: 2.6em; font-size: 20px; line-height: 1.3; text-align: center; color: #3b2f63; font-weight: bold; }
.tut-dots { display: flex; gap: 8px; }
.tut-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d8d2f0; transition: background .3s; }
.tut-dots i.on { background: var(--green); }
.tut-btns { gap: 10px; }
.tut-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tut-it { display: inline-block; font-size: 40px; line-height: 1.1; will-change: transform, opacity; }
.tut-eq { display: flex; gap: 10px; font-size: 36px; font-weight: bold; color: #2d3a6e; direction: ltr; }
.tut-eq span { display: inline-block; }
.tut-box { min-width: 44px; padding: 0 6px; border: 3px dashed #7a6fb0; border-radius: 10px; text-align: center; }
.tut-box.ok, .tut-card-n.ok { color: #1f9d55; border-color: #1f9d55; }
.tut-frame { display: grid; grid-template-columns: repeat(5, 46px); grid-template-rows: repeat(2, 46px); gap: 4px; background: #2d3a6e; padding: 4px; border-radius: 10px; }
.tut-frame i { background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.tut-dot { width: 30px; height: 30px; border-radius: 50%; background: #e5484d; font-size: 0; }
.tut-dot.y { background: #ffc531; }
.tut-seq { gap: 4px; }
.tut-card-n { font-size: 34px; font-weight: bold; color: #2d3a6e; background: #fff; border: 3px solid #2d3a6e; border-radius: 12px; min-width: 52px; text-align: center; padding: 4px 0; }
.tut-arc { font-size: 20px; font-weight: bold; color: #1f9d55; align-self: flex-start; }
.tut-measure { position: relative; width: min(440px, 86vw); padding: 40px 0 34px; }
.tut-unit { position: absolute; top: 40px; height: 6px; background: #1f9d55; border-radius: 3px; }
.tut-unitn { position: absolute; bottom: 2px; translate: -50% 0; font-size: 20px; font-weight: bold; color: #1f9d55; }
.tut-total { font-size: 34px; font-weight: bold; color: #fff; background: #1f9d55; border-radius: 12px; padding: 0 14px; }
.tut-nl { position: relative; width: min(420px, 80vw); height: 120px; }
.tut-line { position: absolute; left: 0; right: 0; top: 74px; height: 6px; background: #2d3a6e; border-radius: 3px; }
.tut-end { position: absolute; top: 88px; translate: -50% 0; font-size: 22px; font-weight: bold; color: #2d3a6e; }
.tut-midtick { position: absolute; left: 50%; top: 64px; width: 4px; height: 26px; margin-left: -2px; background: #e5484d; border-radius: 2px; }
.tut-pin { position: absolute; left: 50%; top: 4px; translate: -50% 0; }
.tut-pin::after { content: ""; position: absolute; left: 50%; bottom: -22px; margin-left: -2px; width: 4px; height: 20px; background: #2d3a6e; }
.tut-ruler { display: flex; justify-content: space-between; background: #ffe7a3; border: 3px solid #c9952b; border-radius: 6px; padding: 18px 4px 4px; font-size: 15px; font-weight: bold; color: #6b4e12; }
.tut-ruler span { width: 0; display: flex; justify-content: center; position: relative; }
.tut-ruler span::before { content: ""; position: absolute; top: -18px; width: 2px; height: 12px; background: #6b4e12; }
.tut-pencil { position: absolute; top: 8px; height: 22px; border-radius: 4px 14px 14px 4px; background: linear-gradient(90deg, #ff9f43 0 88%, #f5d6a8 88% 96%, #333 96%); }
.tut-graph { display: flex; align-items: flex-end; gap: 22px; height: 180px; padding: 0 14px; border-bottom: 3px solid #2d3a6e; border-inline-start: 3px solid #2d3a6e; }
.tut-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tut-col .tut-it { font-size: 30px; }
.tut-bar { position: relative; width: 50px; background: #6c8cff; border-radius: 8px 8px 0 0; transform-origin: bottom; display: flex; justify-content: center; }
.tut-bar b { color: #fff; font-size: 18px; margin-top: 4px; }
.tut-bar.top { background: #1f9d55; }
.tut-star { position: absolute; top: -40px; font-size: 30px; }
.tut-eo { display: flex; align-items: center; gap: 12px; }
.tut-eo > b { font-size: 30px; color: #2d3a6e; min-width: 30px; }
.tut-pairs { gap: 12px; }
.tut-pair { display: flex; gap: 2px; padding: 2px 6px; border: 3px solid #6c8cff; border-radius: 16px; }
.tut-pair .tut-it { font-size: 30px; }
.tut-pair.lone { border-color: #e5484d; }
.tut-col2 { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tut-mirror { display: flex; align-items: center; gap: 10px; }
.tut-mirror .tut-it { font-size: 30px; }
.tut-split { width: 3px; align-self: stretch; background: #7a6fb0; border-radius: 2px; }
.tut-col2 .tut-eq { font-size: 26px; }
.tut-gap { width: 16px; }
.tut-cubes { gap: 3px; }
.tut-cube { display: inline-block; width: 20px; height: 20px; background: #ffc531; border: 2px solid #b8860b; border-radius: 3px; }
.tut-cubes.rod { outline: 3px dashed #1f9d55; outline-offset: 5px; border-radius: 4px; }
.tut-rod { display: flex; flex-direction: column-reverse; gap: 1px; }
.tut-rod .tut-cube { width: 16px; height: 11px; background: #6c8cff; border-color: #3550c4; }
.tut-ones { display: flex; flex-direction: column-reverse; gap: 3px; align-self: flex-end; }
.tut-ones .tut-cube { width: 16px; height: 14px; }
.tut-pvrow { align-items: flex-end; gap: 10px; }
.tut-pv { display: flex; font-size: 48px; font-weight: bold; margin-inline-start: 12px; }
.tut-pv .t { color: #3550c4; } .tut-pv .o { color: #b8860b; }
.tut-coins { gap: 16px; }
.tut-coin { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; color: #5a4300; background: radial-gradient(circle at 35% 30%, #fff3b0, #f2c230 60%, #c9952b); border: 3px solid #a57712; will-change: transform, opacity; }
.tut-coin.c5 { width: 76px; height: 76px; font-size: 34px; }
.tut-coin.c2 { width: 62px; height: 62px; font-size: 28px; }
.tut-coin.c1 { width: 52px; height: 52px; font-size: 24px; background: radial-gradient(circle at 35% 30%, #fff, #cfd6de 60%, #8a96a3); border-color: #6b7682; color: #2d3a4e; }
.tut-clock { width: 170px; height: 170px; }
.tut-digital { font-size: 30px; font-weight: bold; color: #2d3a6e; background: #fff; border-radius: 10px; padding: 2px 12px; border: 3px solid #2d3a6e; }
.tut-plates { gap: 16px; }
.tut-plate { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 96px; height: 62px; border-radius: 50%; background: #fff; border: 3px solid #c9c2e8; box-shadow: inset 0 -4px 0 #ece8fb; }
.tut-plate .tut-it { font-size: 28px; }
.tut-pizza { width: 150px; height: 150px; overflow: visible; }
.tut-pizza path { transform-box: view-box; }
.tut-frac { display: flex; flex-direction: column; align-items: center; font-size: 34px; font-weight: bold; color: #2d3a6e; line-height: 1.05; }
.tut-frac i { width: 40px; height: 4px; background: #2d3a6e; border-radius: 2px; margin: 3px 0; }
@media (max-height: 560px) { .tut-stage { min-height: 170px; } .tut-it { font-size: 30px; } .tut-head h2 { font-size: 21px; } .tut-cap { font-size: 17px; } }
/* in a game, the kid (side window) is tappable: the instructions again (the window itself lets taps through) */
.kid-col .kid-tap { pointer-events: auto; cursor: pointer; }
/* the map's 💡: the dialog of every lesson (Screens.lessons) */
.lesson-btn.dot { position: relative; }
.lesson-btn.dot::after { content: ""; position: absolute; top: 4px; inset-inline-end: 4px; width: 12px; height: 12px; border-radius: 50%; background: #e5484d; border: 2px solid #fff; }
.lessons-card { width: min(520px, 94vw); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lessons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; width: 100%; max-height: 60vh; overflow-y: auto; }
.lesson { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; background: #f4f1ff; font-size: 16px; font-weight: bold; color: #3b2f63; position: relative; }
.lesson .l-ic { font-size: 32px; }
.lesson.new::after { content: ""; position: absolute; top: 8px; inset-inline-end: 8px; width: 12px; height: 12px; border-radius: 50%; background: #e5484d; }