/* Count Quest — playful, touch-first styles */
:root {
  --ink: #2b2d42;
  --white: #fff;
  --btn: clamp(52px, 9vmin, 78px);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #7fd3ff;
  font-family: var(--font); color: var(--ink);
  touch-action: manipulation; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}
button { font-family: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus { outline: none; }
button:focus-visible { outline: 4px solid #3a86ff; outline-offset: 3px; }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; overflow: hidden; }
#bg { position: absolute; inset: 0; overflow: hidden; transition: background .6s; }
#screen { position: absolute; inset: 0; z-index: 1; }
#overlay { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#overlay > * { pointer-events: auto; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }
noscript { position: fixed; inset: 0; display: grid; place-items: center; font-size: 24px; background: #fff; z-index: 99; }

.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.enter { animation: screenIn .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes screenIn { from { opacity: 0; transform: scale(.96); } }

/* ---------- shared bits */
.topbar { display: flex; align-items: center; gap: clamp(8px, 2vmin, 16px); padding: clamp(8px, 2vmin, 16px); position: relative; z-index: 5; flex: none; }
.spacer { flex: 1; }
.icon-btn {
  width: var(--btn); height: var(--btn); border-radius: 50%; flex: none;
  background: #fff; display: grid; place-items: center;
  font-size: calc(var(--btn) * .48); font-family: var(--emoji);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .15), 0 8px 18px rgba(0, 0, 0, .12);
  transition: transform .12s;
}
.icon-btn svg { width: 82%; height: 82%; }
.icon-btn.me { background: var(--c); border: 4px solid #fff; font-size: calc(var(--btn) * .58); }
button:active { transform: scale(.9); }

.go-btn, .round-btn {
  width: clamp(84px, 16vmin, 130px); height: clamp(84px, 16vmin, 130px); border-radius: 50%;
  background: linear-gradient(#5ee077, #2fb94c); color: #fff; font-size: clamp(40px, 8vmin, 64px); font-weight: 900;
  border: 6px solid #fff; box-shadow: 0 8px 0 #1f8a36, 0 12px 24px rgba(0, 0, 0, .2);
  display: grid; place-items: center; font-family: var(--font);
}
.go-btn:disabled { filter: grayscale(1); opacity: .5; }
.round-btn.tomap { background: linear-gradient(#6cc4ff, #2f8fe0); box-shadow: 0 8px 0 #1d63a8, 0 12px 24px rgba(0, 0, 0, .2); font-family: var(--emoji); }
.round-btn.again { background: linear-gradient(#ffc94d, #ff9f1c); box-shadow: 0 8px 0 #c76f00, 0 12px 24px rgba(0, 0, 0, .2); }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }

/* ---------- splash */
.splash { align-items: center; justify-content: center; gap: 3vmin; }
.logo { margin: 0; text-align: center; line-height: .95; font-size: clamp(56px, 15vmin, 150px); font-weight: 900; letter-spacing: .02em; }
.logo span {
  display: inline-block; color: var(--c);
  -webkit-text-stroke: .06em #fff; paint-order: stroke fill;
  text-shadow: 0 .06em 0 rgba(0, 0, 0, .18);
  animation: letterIn .7s var(--d) cubic-bezier(.2, 1.6, .4, 1) both, bob 2.4s calc(var(--d) + .7s) ease-in-out infinite;
}
@keyframes letterIn { from { transform: translateY(-60vh) rotate(-30deg); } }
@keyframes bob { 50% { transform: translateY(-6%); } }
.parade { display: flex; gap: 1vmin; }
.parade-buddy { width: clamp(64px, 13vmin, 120px); animation: letterIn .8s calc(.6s + var(--d)) both, hop 1.2s calc(1.4s + var(--d)) ease-in-out infinite; }
.big-play {
  width: clamp(110px, 22vmin, 190px); height: clamp(110px, 22vmin, 190px); border-radius: 50%;
  background: linear-gradient(#5ee077, #2fb94c); border: 8px solid #fff;
  box-shadow: 0 10px 0 #1f8a36, 0 16px 30px rgba(0, 0, 0, .25);
  animation: pulse 1.3s ease-in-out infinite; display: grid; place-items: center;
}
.big-play svg { width: 60%; }

/* ---------- profiles */
.profiles { align-items: stretch; }
.profile-title { text-align: center; font-size: clamp(50px, 12vmin, 110px); font-family: var(--emoji); }
.who { display: inline-block; animation: wave 1.5s ease-in-out infinite; transform-origin: 70% 80%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(20deg); } 30% { transform: rotate(-10deg); } }
.profile-list { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: clamp(16px, 4vmin, 40px); padding: 2vmin 4vmin 8vmin; }
.avatar-btn {
  position: relative; width: clamp(110px, 22vmin, 190px); height: clamp(110px, 22vmin, 190px); border-radius: 50%;
  background: var(--c, #fff); border: 7px solid #fff; box-shadow: 0 8px 0 rgba(0, 0, 0, .15), 0 14px 26px rgba(0, 0, 0, .15);
  display: grid; place-items: center; animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
.avatar-btn .av { font-size: clamp(60px, 12vmin, 110px); font-family: var(--emoji); line-height: 1; }
.avatar-btn.add { background: rgba(255, 255, 255, .7); border-style: dashed; color: #3a86ff; }
.avatar-btn.add .av { font-family: var(--font); font-weight: 900; }
.avatar-btn.add.pulse { animation: popIn .5s both, pulse 1.4s .5s infinite; }
.av-name { position: absolute; bottom: -1.4em; left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 800; font-size: clamp(16px, 2.8vmin, 24px); background: #fff; padding: 2px 12px; border-radius: 99px; box-shadow: 0 3px 0 rgba(0, 0, 0, .1); }
@keyframes popIn { from { transform: scale(0); opacity: 0; } }

.new-profile { align-items: center; gap: 2vmin; }
.np-preview { width: clamp(100px, 20vmin, 170px); height: clamp(100px, 20vmin, 170px); border-radius: 50%; background: var(--c); border: 7px solid #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); margin-top: -6vmin; transition: background .3s; }
.np-preview .av { font-size: clamp(56px, 11vmin, 100px); font-family: var(--emoji); }
.np-preview.pop { animation: bounce .5s; }
.avatar-grid { display: grid; grid-template-columns: repeat(8, auto); gap: clamp(6px, 1.6vmin, 14px); }
.pick-av { width: clamp(56px, 10vmin, 92px); height: clamp(56px, 10vmin, 92px); border-radius: 22%; background: #fff; font-size: clamp(34px, 6.6vmin, 60px); font-family: var(--emoji); box-shadow: 0 4px 0 rgba(0, 0, 0, .12); transition: transform .15s; }
.pick-av.sel { transform: scale(1.12); box-shadow: 0 0 0 5px #3a86ff, 0 4px 0 rgba(0, 0, 0, .12); }
.color-row { display: flex; gap: clamp(8px, 1.6vmin, 14px); flex-wrap: wrap; justify-content: center; }
.pick-color { width: clamp(40px, 7vmin, 60px); height: clamp(40px, 7vmin, 60px); border-radius: 50%; background: var(--c); border: 4px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.pick-color.sel { transform: scale(1.18); box-shadow: 0 0 0 4px var(--ink); }
.np-bottom { display: flex; align-items: center; gap: 3vmin; }
.np-name { font: inherit; font-size: 18px; padding: 12px 16px; border-radius: 16px; border: 3px solid #fff; background: rgba(255, 255, 255, .85); width: min(300px, 50vw); -webkit-user-select: text; user-select: text; }
@media (orientation: portrait) { .avatar-grid { grid-template-columns: repeat(4, auto); } .np-preview { margin-top: 0; } }

/* ---------- map */
.map-area { position: relative; flex: 1; margin: 0 2vmin 2vmin; }
.map-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-path path { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 2 26; vector-effect: non-scaling-stroke; opacity: .9; }
.world-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1vmin; animation: popIn .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.world-btn {
  position: relative; width: clamp(92px, 19vmin, 170px); height: clamp(92px, 19vmin, 170px); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--s2), var(--s1)); border: 7px solid #fff;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .15), 0 14px 26px rgba(0, 0, 0, .18);
}
.world-icon { font-size: clamp(46px, 9.5vmin, 86px); font-family: var(--emoji); line-height: 1; display: block; }
.node-buddy { position: absolute; right: -18%; bottom: -14%; width: 52%; animation: bob 2s ease-in-out infinite; }
.lock { position: absolute; right: -8%; bottom: -8%; font-size: clamp(28px, 5vmin, 44px); font-family: var(--emoji); }
.world-node.locked .world-btn { filter: grayscale(.85) brightness(.95); opacity: .75; }
.world-node.current .world-btn { animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, .6), 0 0 40px 14px var(--a); transform: scale(1.06); } }
.here { position: absolute; top: -9vmin; left: 0; right: 0; text-align: center; font-size: clamp(34px, 7vmin, 60px); font-family: var(--emoji); animation: point 1s ease-in-out infinite; pointer-events: none; }
@keyframes point { 50% { transform: translateY(-30%); } }
.stage-pills { display: flex; gap: 6px; }
.pill { background: #fff; border-radius: 99px; padding: 4px 12px 2px; display: flex; flex-direction: column; align-items: center; line-height: 1; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); min-width: clamp(48px, 8vmin, 70px); }
.pill b { font-size: clamp(20px, 3.8vmin, 32px); color: var(--a); }
.pill-stars { font-size: clamp(11px, 2vmin, 16px); color: #ffb703; letter-spacing: 1px; }
.pill.locked { opacity: .5; }
.wiggle { animation: wiggle .5s !important; }
.world-node.wiggle { animation: wiggleNode .5s !important; }
@keyframes wiggleNode { 25% { transform: translate(-50%, -50%) rotate(-8deg); } 75% { transform: translate(-50%, -50%) rotate(8deg); } }

/* ---------- play */
.play .topbar { justify-content: space-between; }
.dots { flex: 1; display: flex; justify-content: center; gap: clamp(6px, 1.5vmin, 14px); }
.dots i { width: clamp(16px, 3.2vmin, 28px); height: clamp(16px, 3.2vmin, 28px); border-radius: 50%; background: rgba(255, 255, 255, .55); border: 3px solid #fff; transition: all .3s; position: relative; }
.dots i.now { background: #fff; transform: scale(1.3); }
.dots i.done { background: #ffd60a; border-color: #fff; box-shadow: 0 0 12px #ffd60a; animation: bounce .5s; }
.bignum {
  position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + clamp(58px, 11vmin, 100px)); transform: translateX(-50%);
  font-size: clamp(56px, 13vmin, 130px); font-weight: 900; line-height: 1; z-index: 4; pointer-events: none;
  -webkit-text-stroke: .08em #fff; paint-order: stroke fill; text-shadow: 0 .06em 0 rgba(0, 0, 0, .2);
  opacity: 0; transition: opacity .2s, font-size .3s;
}
.bignum.show { opacity: 1; }
.bignum.huge { font-size: clamp(80px, 20vmin, 200px); }
.bignum.pop { animation: numPop .4s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes numPop { from { transform: translateX(-50%) scale(.4); } }

.stage { flex: 1; position: relative; display: flex; flex-direction: column; padding: clamp(60px, 13vmin, 130px) clamp(12px, 3vmin, 30px) clamp(12px, 3vmin, 30px); min-height: 0; animation: stageIn .4s ease both; }
@keyframes stageIn { from { opacity: 0; transform: translateY(20px); } }
.stage.leaving { opacity: 0; transform: scale(.96); transition: all .4s; }
.stage.act-missing, .stage.act-give { padding-top: clamp(10px, 3vmin, 30px); }

.buddy-dock { position: absolute; left: calc(env(safe-area-inset-left) + 1vmin); bottom: calc(env(safe-area-inset-bottom) + 1vmin); width: clamp(84px, 15vmin, 150px); z-index: 6; }
.buddy-dock svg { animation: bob 2.2s ease-in-out infinite; display: block; }
.buddy-dock.hop { animation: hop .45s; }
.buddy-dock.cheer { animation: cheer 1s; }
.buddy-dock.think { animation: think 1s; }
@keyframes hop { 40% { transform: translateY(-14%); } }
@keyframes cheer { 20% { transform: translateY(-30%) rotate(-10deg) scale(1.1); } 45% { transform: translateY(0) rotate(0); } 65% { transform: translateY(-22%) rotate(10deg) scale(1.1); } }
@keyframes think { 30%, 70% { transform: rotate(-12deg); } }

/* objects */
.objs { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; gap: calc(var(--cell, 80px) * .3); margin: 0 auto; width: 100%; position: relative; }
.frame { display: grid; gap: calc(var(--cell) * .06); }
.frame.framed { padding: calc(var(--cell) * .1); background: rgba(255, 255, 255, .35); border-radius: calc(var(--cell) * .2); border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); transition: background .3s, transform .3s; }
.frame.framed .obj, .frame.framed .slot { background: rgba(255, 255, 255, .55); border-radius: calc(var(--cell) * .18); }
.frame.counted-frame { background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 4px #ffd60a, 0 0 22px rgba(255, 214, 10, .8); }
.slot { width: var(--cell); height: var(--cell); }
.obj {
  position: relative; width: var(--cell); height: var(--cell); display: grid; place-items: center; cursor: pointer;
  transform: rotate(var(--tilt, 0deg)); animation: objIn .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes objIn { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.obj .emo { font-family: var(--emoji); font-size: calc(var(--cell) * .74); line-height: 1; filter: drop-shadow(0 calc(var(--cell) * .04) 0 rgba(0, 0, 0, .15)); pointer-events: none; }
.obj::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%); transform: scale(0); transition: transform .3s; }
.obj.counted::before { transform: scale(1.1); }
.badge {
  position: absolute; top: -8%; right: -8%; min-width: calc(var(--cell) * .44); height: calc(var(--cell) * .44); padding: 0 .2em;
  border-radius: 99px; color: #fff; font-weight: 900; font-size: calc(var(--cell) * .28); display: grid; place-items: center;
  border: 3px solid #fff; transform: scale(0); transition: transform .3s cubic-bezier(.2, 1.8, .4, 1); pointer-events: none; z-index: 2;
}
.counted .badge, .badge.show { transform: scale(1); }
.obj.waiting { opacity: .5; }
.bounce { animation: bounce .5s ease 0s !important; }
@keyframes bounce { 30% { transform: scale(1.35) rotate(-6deg); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes wiggle { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.hint { animation: hint 1.2s ease 0s 2 !important; }
@keyframes hint { 50% { transform: scale(1.25); filter: drop-shadow(0 0 14px #fff) brightness(1.15); } }
.jump { animation: jump .6s ease 0s !important; }
@keyframes jump { 40% { transform: translateY(-40%) rotate(10deg); } }
.all-done .obj { animation: bounce .6s ease 0s !important; }
.all-done.dance .obj { animation: danceObj .5s ease-in-out infinite alternate !important; }
.all-done.dance .obj:nth-child(2n) { animation-delay: .25s !important; }
@keyframes danceObj { to { transform: translateY(-14%) rotate(8deg); } }
.hidden-obj { opacity: 0; transform: scale(0); }
.hidden-frame { opacity: 0; }

/* scenes */
.scene-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.scene { width: 100%; height: 100%; max-width: 900px; overflow: visible; }
.scene .part { cursor: pointer; transform-box: fill-box; transform-origin: center; }
.scene .part.counted { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px #ffd60a); }
.badges { position: absolute; inset: 0; pointer-events: none; }
.badges .badge { position: absolute; top: auto; right: auto; --cell: clamp(60px, 11vmin, 100px); transform: translate(-50%, -50%) scale(1); animation: popIn .35s cubic-bezier(.2, 1.8, .4, 1); }

/* choices */
.choices { order: 2; display: flex; justify-content: center; gap: clamp(14px, 4vmin, 40px); padding: 2vmin 0 0; flex: none; margin-left: clamp(70px, 14vmin, 140px); margin-right: clamp(70px, 14vmin, 140px); }
.choice {
  width: clamp(88px, 17vmin, 150px); height: clamp(88px, 17vmin, 150px); border-radius: 30%;
  background: var(--c); color: #fff; font-size: clamp(48px, 10vmin, 90px); font-weight: 900; border: 6px solid #fff;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .22), 0 12px 22px rgba(0, 0, 0, .15); text-shadow: 0 3px 0 rgba(0, 0, 0, .2);
  animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1) both; transition: opacity .3s, transform .2s;
}
.choice.right { transform: scale(1.18); box-shadow: 0 0 0 8px #ffd60a, 0 0 40px #ffd60a; }
.choice.faded { opacity: .3; }
.nope { animation: nope .5s ease 0s !important; }
@keyframes nope { 20%, 60% { transform: translateX(-10%); } 40%, 80% { transform: translateX(10%); } }

/* give me N */
.stage.give-layout { flex-direction: row; align-items: stretch; gap: 2vmin; padding-left: clamp(90px, 16vmin, 160px); }
.pool { flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: calc(var(--cell, 80px) * .12); min-width: 0; }
.pool .obj { touch-action: none; }
.obj.dragging { z-index: 50; transition: none; animation: none !important; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .25)); }
.basket-wrap { width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin; }
.basket-target { display: flex; align-items: center; gap: 1vmin; background: #fff; border-radius: 99px; padding: .5vmin 3vmin .5vmin 2vmin; box-shadow: 0 6px 0 rgba(0, 0, 0, .12); border: 5px solid var(--c); }
.basket-target .emo { font-family: var(--emoji); font-size: clamp(36px, 7vmin, 64px); }
.basket-target b { font-size: clamp(48px, 10vmin, 90px); color: var(--c); line-height: 1; }
.basket { position: relative; width: clamp(200px, 36vmin, 340px); height: clamp(150px, 26vmin, 250px); }
.basket-in { position: absolute; left: 6%; right: 6%; top: -25%; bottom: 14%; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; gap: 2px; }
.basket-in .obj { width: calc(var(--cell) * .66); height: calc(var(--cell) * .66); }
.basket-in .obj .emo { font-size: calc(var(--cell) * .54); }
.basket-front { position: absolute; left: 0; bottom: 0; width: 100%; height: 62%; pointer-events: none; z-index: 2; }
.basket-count { position: absolute; right: -6%; bottom: -6%; z-index: 3; min-width: 1.6em; height: 1.6em; border-radius: 99px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: clamp(28px, 5.4vmin, 46px); border: 4px solid #fff; }
.basket-count:empty { border: 0; }
.pop { animation: numPop2 .35s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes numPop2 { from { transform: scale(.3); } }
.check-btn { width: clamp(76px, 14vmin, 120px); height: clamp(76px, 14vmin, 120px); border-radius: 50%; background: linear-gradient(#5ee077, #2fb94c); color: #fff; font-size: clamp(38px, 7vmin, 60px); border: 6px solid #fff; box-shadow: 0 7px 0 #1f8a36; transition: opacity .3s, transform .2s; animation: pulse 1.4s infinite; }
.check-btn.hidden { display: block !important; opacity: 0; pointer-events: none; }
@media (orientation: portrait) {
  .stage.give-layout { flex-direction: column; padding-left: clamp(12px, 3vmin, 30px); padding-bottom: clamp(90px, 16vmin, 160px); }
  .basket-wrap { width: 100%; flex-direction: row; flex-wrap: wrap; }
}

/* missing number train */
.train-wrap { overflow: visible; transition: transform 1.1s ease-in; }
.train-wrap.leave { transform: translateX(120vw); }
.train { display: inline-flex; align-items: flex-end; gap: 10px; transform-origin: center; }
.engine { width: 130px; position: relative; order: 99; }
.puff { position: absolute; left: 14%; top: -14%; width: 26px; height: 26px; border-radius: 50%; background: #fff; opacity: .8; animation: puff 1.4s ease-out infinite; }
@keyframes puff { to { transform: translate(-30px, -50px) scale(2.4); opacity: 0; } }
.car { position: relative; padding-bottom: 18px; animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.car-box { width: 104px; height: 104px; border-radius: 20px; background: var(--c); color: #fff; font-size: 66px; font-weight: 900; display: grid; place-items: center; border: 5px solid var(--ink); text-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.car i { position: absolute; bottom: 0; width: 32px; height: 32px; border-radius: 50%; background: #3d405b; border: 4px solid var(--ink); }
.car i:first-of-type { left: 12px; } .car i:last-of-type { right: 12px; }
.car.gap .car-box { background: rgba(255, 255, 255, .6); color: #666; border-style: dashed; animation: pulse 1.2s infinite; }

/* mic */
.mic-bubble { position: absolute; right: 3vmin; bottom: 3vmin; width: clamp(80px, 15vmin, 130px); height: clamp(80px, 15vmin, 130px); border-radius: 50%; background: #fff; font-size: clamp(40px, 7vmin, 64px); font-family: var(--emoji); box-shadow: 0 8px 0 rgba(0, 0, 0, .15); z-index: 8; animation: popIn .4s both; }
.mic-bubble.listening { animation: listen 1s ease-in-out infinite; }
@keyframes listen { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 95, .7); } 50% { box-shadow: 0 0 0 22px rgba(255, 90, 95, 0); transform: scale(1.08); } }

/* ---------- buddies */
.buddy-svg { width: 100%; height: auto; overflow: visible; display: block; }
.buddy-svg .eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.buddy-svg .tent { animation: sway 2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: top center; }
@keyframes sway { to { transform: rotate(8deg); } }
.buddy-svg .glow { animation: glowball 1.2s ease-in-out infinite alternate; }
@keyframes glowball { to { fill: #ff9ff3; } }
.buddy-svg .spark { animation: twinkle 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 50% { transform: scale(.3); opacity: .4; } }
.buddy-svg.dance { animation: dance .7s ease-in-out infinite alternate; transform-origin: bottom center; }
@keyframes dance { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(8deg) translateY(-8%); } }
.buddy-svg.sleepy .eyes { animation: none; transform: scaleY(.15); }
.buddy-svg.sleepy { animation: bob 3s ease-in-out infinite; }
.buddy-svg.jump { animation: jump .6s; }

.buddy-room .topbar { justify-content: space-between; }
.buddy-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vmin; padding: 2vmin 5vmin 5vmin; align-content: center; justify-items: center; }
@media (orientation: portrait) { .buddy-grid { grid-template-columns: repeat(2, 1fr); } }
.buddy-card { position: relative; width: clamp(120px, 24vmin, 220px); background: rgba(255, 255, 255, .55); border: 5px solid #fff; border-radius: 30px; padding: 2vmin 2vmin 4.5vmin; animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1) both; box-shadow: 0 8px 0 rgba(0, 0, 0, .1); }
.buddy-card.locked svg { filter: brightness(0); opacity: .22; }
.buddy-name { position: absolute; left: 50%; bottom: .4vmin; transform: translateX(-50%); font-weight: 900; font-size: clamp(16px, 3vmin, 26px); }
.buddy-card .q { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(50px, 10vmin, 90px); font-weight: 900; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.tickles { position: absolute; top: -12px; right: -12px; min-width: 1.6em; height: 1.6em; padding: 0 .2em; border-radius: 99px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: clamp(22px, 4vmin, 36px); }
.tickles:empty { display: none; }

/* ---------- modals */
.modal { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vmin; background: rgba(30, 20, 80, .45); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: fadeIn .3s both; padding: env(safe-area-inset-top) 4vmin env(safe-area-inset-bottom); }
@keyframes fadeIn { from { opacity: 0; } }
.done-stars { display: flex; gap: 1vmin; font-size: clamp(44px, 9vmin, 80px); font-family: var(--emoji); }
.done-stars span { animation: starIn .6s cubic-bezier(.2, 1.8, .4, 1) both; filter: drop-shadow(0 0 10px #ffd60a); }
@keyframes starIn { from { transform: scale(0) rotate(-180deg); } }
.done-buddy, .intro-buddy, .gift-buddy { width: clamp(160px, 38vmin, 320px); animation: popIn .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.done-btns { display: flex; gap: 5vmin; }
.gift-box { width: clamp(180px, 44vmin, 360px); }
.gift-box svg { width: 100%; overflow: visible; }
.gift-box .lid { transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
.gift-box.open .lid { transform: translateY(-160%) rotate(-25deg); }
.shake { animation: shake 1.2s ease-in-out infinite; }
@keyframes shake { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-8deg) scale(1.03); } 20%, 40% { transform: rotate(8deg) scale(1.03); } }
#overlay > .levelup { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 12; }
.lv-num { font-size: clamp(140px, 45vmin, 420px); font-weight: 900; color: var(--c); -webkit-text-stroke: .05em #fff; paint-order: stroke fill; text-shadow: 0 0 60px #fff; animation: lvIn 2.6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes lvIn { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 20% { transform: scale(1.1); opacity: 1; } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.moon-big { font-size: clamp(60px, 14vmin, 120px); font-family: var(--emoji); animation: bob 3s infinite; }

.gate .close { position: absolute; top: calc(env(safe-area-inset-top) + 16px); right: 16px; }
.gate-text { color: #fff; font-size: clamp(18px, 3.4vmin, 28px); font-weight: 800; text-align: center; margin: 0; text-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.hold-btn { position: relative; width: clamp(150px, 30vmin, 240px); height: clamp(150px, 30vmin, 240px); border-radius: 50%; background: #fff; display: grid; place-items: center; touch-action: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.hold-btn:active { transform: none; }
.hold-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hold-btn .ring-bg { fill: none; stroke: #e9ecef; stroke-width: 8; }
.hold-btn .ring { fill: none; stroke: #2fb94c; stroke-width: 8; stroke-linecap: round; }
.hold-btn span { font-size: clamp(60px, 12vmin, 100px); font-family: var(--emoji); }

/* ---------- parent area (for grown-ups: normal readable UI) */
.parent { position: fixed; inset: 0; background: #f4f6fb; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 15; -webkit-user-select: text; user-select: text; animation: fadeIn .25s; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.parent-inner { max-width: 780px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 40px); }
.parent header { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #f4f6fb; padding: 8px 0; z-index: 2; }
.parent h2 { margin: 0; font-size: 28px; }
.parent h3 { margin: 0 0 12px; font-size: 20px; }
.parent section { background: #fff; border-radius: 18px; padding: 18px; margin: 14px 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
.parent p { line-height: 1.5; }
.parent .muted { color: #8a8fa3; }
.parent .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #eef0f5; font-size: 17px; }
.parent .row:last-child { border-bottom: 0; }
.parent .row small { display: block; color: #8a8fa3; font-size: 13px; margin-top: 2px; max-width: 460px; }
.parent input[type=checkbox] { width: 28px; height: 28px; accent-color: #2fb94c; flex: none; }
.parent select { font: inherit; font-size: 16px; padding: 8px; border-radius: 10px; border: 1px solid #d0d4e0; max-width: 55%; background: #fff; }
.parent input[type=range] { width: 50%; accent-color: #3a86ff; }
.btn { font: inherit; font-size: 16px; padding: 10px 18px; border-radius: 12px; background: #e9ecf5; font-weight: 600; }
.btn.armed { background: #ff5a5f; color: #fff; }
.p-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.p-tab { padding: 8px 14px; border-radius: 99px; background: #eef0f5; font-size: 17px; border: 3px solid transparent; }
.p-tab .av, .p-tab { font-family: inherit; }
.p-tab.sel { border-color: var(--c); background: #fff; }
.stage-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 12px; font-size: 14px; margin: 8px 0 14px; }
.num-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.nc { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; font-size: 13px; font-weight: 700; color: #495057; }
.nc.lv0 { background: #eef0f5; color: #adb5bd; } .nc.lv1 { background: #ffe8a3; } .nc.lv2 { background: #b2f2bb; } .nc.lv3 { background: #40c057; color: #fff; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; margin-top: 10px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 16px; aspect-ratio: auto; display: inline-block; }
.danger { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.parent .close { width: 48px; height: 48px; font-size: 22px; }

/* ---------- world decorations */
#bg .deco { position: absolute; pointer-events: none; }
.drift { animation: drift linear infinite; }
@keyframes drift { from { transform: translateX(-60vw); } to { transform: translateX(110vw); } }
.sun { position: absolute; top: 5%; right: 7%; width: 18vmin; height: 18vmin; border-radius: 50%; background: radial-gradient(circle, #fff6a8, #ffd60a 60%); box-shadow: 0 0 40px 18px rgba(255, 220, 60, .55); animation: sunpulse 4s ease-in-out infinite; }
@keyframes sunpulse { 50% { box-shadow: 0 0 60px 26px rgba(255, 220, 60, .65); } }
.ground { position: absolute; left: 0; bottom: 0; width: 100%; height: 30%; }
.volcano { right: 4%; bottom: 20%; width: 36vmin; }
.smoke { animation: smoke 3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.smoke.s2 { animation-delay: -1.5s; }
@keyframes smoke { from { transform: translateY(0) scale(.6); opacity: .9; } to { transform: translateY(-30px) scale(1.8); opacity: 0; } }
.leaf { width: 30vmin; animation: leafsway 5s ease-in-out infinite alternate; }
.leaf.l1 { top: -4vmin; left: -4vmin; transform-origin: top left; }
.leaf.l2 { top: -4vmin; right: -4vmin; transform: scaleX(-1); transform-origin: top right; animation-name: leafsway2; }
@keyframes leafsway { to { transform: rotate(6deg); } }
@keyframes leafsway2 { to { transform: scaleX(-1) rotate(6deg); } }
.rays { position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .12) 0 6vmin, transparent 6vmin 18vmin); animation: rays 8s ease-in-out infinite alternate; }
@keyframes rays { to { opacity: .4; transform: translateX(4vmin); } }
.bubble { position: absolute; bottom: -6%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .75); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .05) 60%); animation: rise linear infinite; }
@keyframes rise { to { transform: translateY(-115vh) translateX(3vmin); } }
.weed { bottom: 0; width: 6vmin; transform-origin: bottom center; animation: weed 3s ease-in-out infinite alternate; }
@keyframes weed { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.star { position: absolute; border-radius: 50%; background: #fff; animation: twinkleStar 2.4s ease-in-out infinite; }
@keyframes twinkleStar { 50% { opacity: .2; transform: scale(.5); } }
.planet { top: 9%; right: 6%; width: 28vmin; animation: bob 6s ease-in-out infinite; }
.moon { position: absolute; top: 12%; left: 9%; width: 12vmin; height: 12vmin; border-radius: 50%; background: #f1f3f5; box-shadow: inset -2vmin -1vmin 0 #ced4da, 0 0 30px rgba(255, 255, 255, .5); }
.lolly { bottom: 18%; width: 7vmin; animation: bob 4s ease-in-out infinite; }

.float-num { position: fixed; transform: translate(-50%, -50%); font-weight: 900; font-size: 40px; pointer-events: none; z-index: 25; animation: floatUp 1.1s ease-out forwards; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; }
@keyframes floatUp { to { transform: translate(-50%, -160%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .drift, .bubble, .star, .weed, .leaf, .rays, .smoke, .logo span, .parade-buddy { animation: none !important; }
}
.choice.long span { font-size: .72em; }
.car-box.long { font-size: 48px; }
.avatar-btn .plus { width: 60%; height: 60%; display: block; margin: auto; }
.avatar-btn.add .av { width: 100%; height: 100%; display: grid; place-items: center; }
.num-grid { max-width: 560px; }
.new-profile .topbar, .buddy-room .topbar { align-self: stretch; }