* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: "Trebuchet MS", system-ui, sans-serif; color: #5a3a6a; user-select: none; -webkit-user-select: none; touch-action: none; background: #ffe3f0; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

.scene { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 20% 15%, #fff 0 3px, transparent 4px) 0 0 / 60px 60px, linear-gradient(180deg, #ffd6ea 0%, #e9dcff 100%); }
#home h1 { margin: 10px 0 0; font-size: clamp(28px, 7vw, 44px); color: #e0457b; text-shadow: 0 3px 0 #fff; text-align: center; }
.back { position: absolute; left: 12px; top: max(10px, env(safe-area-inset-top)); width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #e0457b; font-size: 26px; font-weight: 900; display: grid; place-items: center; text-decoration: none; box-shadow: 0 4px 0 #f2a7c6; }
.cat { width: auto; height: 100%; max-width: 100%; display: block; overflow: visible; }
#home-cat { flex: 1; min-height: 0; margin: 6px 0; }
.bob .luna { animation: bob 2.4s ease-in-out infinite; transform-origin: 200px 560px; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1.5deg); } }
.eyes { animation: blink 4s infinite; transform-origin: 200px 200px; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
.choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(640px, 100%); }
@media (max-width: 520px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice { border: 5px solid #fff; border-radius: 24px; padding: 8px 6px; font-size: 18px; font-weight: 900; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.choice span { font-size: 44px; line-height: 1.05; }
.choice.eat { background: #ff9a3c; }
.choice.dance { background: #b07cff; }
.choice.dress { background: #ff6fa8; }
.choice.teeth { background: #5aa9ff; }
.choice:active, .round:active, .tool:active { transform: translateY(3px); }

.bar { width: 100%; display: flex; align-items: center; gap: 8px; }
.bar-title { flex: 1; text-align: center; font-size: 22px; font-weight: 900; color: #e0457b; }
.round { width: 50px; height: 50px; border-radius: 50%; border: 4px solid #fff; background: #ff8fbf; color: #fff; font-size: 22px; font-weight: 900; box-shadow: 0 4px 0 rgba(0,0,0,.15); flex: none; }

/* Vestir */
.dress-stage { flex: 1; min-height: 0; width: 100%; position: relative; display: flex; justify-content: center; padding: 6px 0; }
#flash { position: fixed; inset: 0; background: #fff; animation: flash .6s ease-out forwards; pointer-events: none; z-index: 20; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.cat.wiggle .luna { animation: wiggle .5s; transform-origin: 200px 560px; }
@keyframes wiggle { 25% { transform: rotate(-4deg) scale(1.03); } 75% { transform: rotate(4deg) scale(1.03); } }
.tabs { display: flex; gap: 6px; width: 100%; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.tabs button { flex: none; border: 3px solid #fff; border-radius: 16px; background: #f6e9ff; padding: 4px 10px; font-weight: 900; font-size: 13px; color: #5a3a6a; display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.tabs button span { font-size: 24px; }
.tabs button.on { background: #ff6fa8; color: #fff; }
.colors { display: flex; gap: 8px; justify-content: center; padding: 6px 0; flex-wrap: wrap; min-height: 46px; }
.colors button { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.colors button.on { transform: scale(1.25); border-color: #5a3a6a; }
.items { display: flex; gap: 8px; width: 100%; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.items button { flex: none; width: 78px; height: 78px; border-radius: 20px; border: 4px solid #fff; background: #fff; font-size: 38px; box-shadow: 0 4px 0 rgba(0,0,0,.12); display: grid; place-items: center; }
.items button.on { background: #ffe066; transform: translateY(-4px); }

/* Dientes */
.meter { width: 110px; height: 22px; border-radius: 999px; background: #fff; border: 3px solid #fff; overflow: hidden; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7fd0c0, #5aa9ff); border-radius: 999px; transition: width .2s; }
.teeth-stage { flex: 1; min-height: 0; width: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
#mouth { height: 100%; max-width: 100%; touch-action: none; }
.tool-float { position: fixed; width: 60px; height: 200px; pointer-events: none; z-index: 5; transform: translate(-50%, -8%) rotate(-25deg); transform-origin: 50% 8%; filter: drop-shadow(0 6px 6px rgba(0,0,0,.2)); }
.tool-float svg { width: 100%; height: 100%; }
.hand { position: fixed; font-size: 48px; pointer-events: none; z-index: 6; animation: tap 1s infinite; }
@keyframes tap { 50% { transform: translateY(14px) scale(.9); } }
.tools { display: flex; gap: 14px; justify-content: center; padding-top: 6px; }
.tool { width: 96px; border: 4px solid #fff; border-radius: 22px; background: #fff; padding: 6px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 5px 0 rgba(0,0,0,.12); color: #5a3a6a; }
.tool span { font-size: 46px; line-height: 1.1; }
.tool svg { width: 52px; height: 52px; }
.tool b { font-size: 14px; }
.tool.glow { background: #ffe066; animation: glow 1s infinite alternate; }
@keyframes glow { to { box-shadow: 0 5px 0 rgba(0,0,0,.12), 0 0 0 8px rgba(255,224,102,.6); } }
.tool:disabled { opacity: .4; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(90,58,106,.35); z-index: 10; padding: 16px; }
.panel { background: #fff; border-radius: 30px; padding: 22px; text-align: center; width: min(380px, 100%); box-shadow: 0 10px 0 rgba(0,0,0,.15); animation: pop .35s cubic-bezier(.2,1.5,.5,1); }
@keyframes pop { from { transform: scale(.5); } }
.panel h2 { margin: 6px 0; color: #e0457b; font-size: 30px; }
.panel p { font-weight: 700; }
.big-emoji { font-size: 58px; }
.row { display: flex; gap: 10px; }
.btn { flex: 1; border: none; border-radius: 18px; padding: 14px; font-size: 19px; font-weight: 900; color: #fff; background: #ff6fa8; box-shadow: 0 5px 0 #c93f78; }
.btn.alt { background: #b07cff; box-shadow: 0 5px 0 #7a4cc9; }
.confetti { position: fixed; top: -20px; z-index: 30; pointer-events: none; font-size: 26px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

/* Inicio: nivel y mimos */
.level-pill { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 4px 14px; margin-top: 6px; font-weight: 900; box-shadow: 0 3px 0 #f2a7c6; }
.lv-bar { width: 90px; height: 12px; border-radius: 999px; background: #f6e9ff; overflow: hidden; }
.lv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #ff6fa8); border-radius: 999px; transition: width .4s; }
.hint-pet { margin: 0 0 6px; font-weight: 800; font-size: 14px; opacity: .75; }
.float-up { position: fixed; z-index: 30; pointer-events: none; font-size: 30px; animation: floatup 1.8s ease-out forwards; }
@keyframes floatup { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-160px) scale(1.2); opacity: 0; } }
.lv-new { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-size: 40px; margin-bottom: 10px; }
.items button.locked { background: #eee6f5; font-size: 22px; flex-direction: column; color: #8a7a99; font-weight: 900; }
.items button.locked small { font-size: 11px; }
.pill-lv { background: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 900; box-shadow: 0 3px 0 rgba(0,0,0,.12); }

/* Comer */
.kitchen { background: repeating-linear-gradient(90deg, #fff4e0 0 40px, #ffe9c7 40px 80px); }
.eat-stage { flex: 1; min-height: 0; width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
#eat-cat { height: 82%; position: relative; z-index: 1; }
.table { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(520px, 100%); height: 26%; background: #d98b4a; border: 5px solid #8a5228; border-radius: 26px 26px 8px 8px; z-index: 2; box-shadow: inset 0 14px 0 #e8a468; }
.table::after { content: ''; position: absolute; left: 50%; top: 10px; width: 150px; height: 26px; transform: translateX(-50%); background: #fff; border: 4px solid #c9b9d6; border-radius: 50%; }
.order { position: absolute; top: 2%; right: 4%; z-index: 3; background: #fff; border: 4px solid #5a3a6a; border-radius: 24px; padding: 8px 12px; display: flex; gap: 6px; font-size: 38px; box-shadow: 0 5px 0 rgba(0,0,0,.12); animation: pop .35s cubic-bezier(.2,1.5,.5,1); }
.order::after { content: ''; position: absolute; left: 22px; bottom: -18px; border: 10px solid transparent; border-top-color: #5a3a6a; }
.order span { position: relative; }
.order span.done { opacity: .35; }
.order span.done::after { content: '✔'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #2fb84a; font-size: 34px; font-weight: 900; opacity: 1; }
.tummy { position: absolute; left: 3%; top: 3%; z-index: 3; background: #fff; border-radius: 18px; padding: 6px 10px; font-weight: 900; font-size: 13px; text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.tummy .meter { width: 90px; height: 16px; margin-top: 2px; }
#tummy-bar { background: linear-gradient(90deg, #ffd23f, #ff9a3c); }
.foods { display: flex; flex-wrap: wrap; gap: 8px; width: min(640px, 100%); padding: 8px 2px 4px; justify-content: center; }
.food { flex: none; width: 64px; height: 64px; border-radius: 20px; border: 4px solid #fff; background: #fff8ee; font-size: 38px; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(0,0,0,.12); touch-action: none; }
.food.wanted { background: #fff3a8; }
.food-drag { position: fixed; z-index: 20; font-size: 64px; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }
.cat.shake .luna { animation: shake .5s; transform-origin: 200px 300px; }
@keyframes shake { 20%, 60% { transform: rotate(-5deg); } 40%, 80% { transform: rotate(5deg); } }
.cat.munch .head { animation: munch .18s 4 alternate; transform-origin: 200px 280px; }
@keyframes munch { to { transform: scale(1.04, .96); } }

/* Bailar */
.disco { background: radial-gradient(circle at 50% 30%, #4a2a8a, #1b0f3a 75%); }
.lights { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lights i { position: absolute; top: -20%; width: 40vmax; height: 140%; opacity: 0; mix-blend-mode: screen; transform-origin: 50% 0; filter: blur(8px);
  background: linear-gradient(180deg, var(--c) 0%, transparent 90%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); }
.lights i:nth-child(1) { left: -5%; --c: #ff6fa8; } .lights i:nth-child(2) { left: 20%; --c: #ffd23f; } .lights i:nth-child(3) { left: 40%; --c: #5aa9ff; }
.lights i:nth-child(4) { left: 60%; --c: #6fdc8c; } .lights i:nth-child(5) { left: 75%; --c: #b07cff; }
.disco.party .lights i { opacity: .45; animation: sweep 2.4s ease-in-out infinite alternate; }
.disco.party .lights i:nth-child(2n) { animation-duration: 1.8s; animation-direction: alternate-reverse; }
@keyframes sweep { from { transform: rotate(-25deg); } to { transform: rotate(25deg); } }
.bar-title.light { color: #fff; text-shadow: 0 3px 0 #b03a78; }
.modes { display: flex; gap: 8px; margin-top: 6px; z-index: 1; }
.mode { border: 4px solid #fff; border-radius: 999px; padding: 6px 16px; font-weight: 900; font-size: 16px; background: rgba(255,255,255,.2); color: #fff; }
.mode.on { background: #ff6fa8; }
.simon-info { z-index: 1; margin-top: 6px; background: #fff; border-radius: 999px; padding: 4px 16px; font-weight: 900; font-size: 17px; }
.dance-stage { flex: 1; min-height: 0; width: 100%; position: relative; display: flex; justify-content: center; align-items: flex-end; }
#dance-cat { height: 92%; position: relative; z-index: 1; }
.floor { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(420px, 90%); height: 40px; border-radius: 50%;
  background: repeating-conic-gradient(#ff6fa8 0 30deg, #ffd23f 0 60deg, #5aa9ff 0 90deg, #6fdc8c 0 120deg); opacity: .7; }
.pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(640px, 100%); z-index: 1; padding-top: 8px; }
.pad { border: 5px solid #fff; border-radius: 24px; padding: 8px 4px; font-weight: 900; font-size: 15px; color: #fff; display: flex; flex-direction: column; align-items: center; box-shadow: 0 6px 0 rgba(0,0,0,.3); transition: transform .1s, filter .1s; }
.pad span { font-size: 40px; line-height: 1.1; }
.pad[data-move="jump"] { background: #ff6fa8; } .pad[data-move="spin"] { background: #5aa9ff; }
.pad[data-move="sway"] { background: #ffb02e; } .pad[data-move="clap"] { background: #3cc45a; }
.pad.lit { transform: scale(1.12); filter: brightness(1.35); box-shadow: 0 0 0 8px rgba(255,255,255,.6), 0 6px 0 rgba(0,0,0,.3); }
.pad:disabled { opacity: .55; }
.cat .luna { transform-origin: 200px 560px; }
.cat.m-jump .luna { animation: m-jump .6s ease-out; }
@keyframes m-jump { 30% { transform: translateY(-90px) scale(1.02, .98); } 55% { transform: translateY(0) scale(1.08, .9); } 75% { transform: scale(.97, 1.04); } }
.cat.m-spin .luna { animation: m-spin .6s ease-in-out; transform-origin: 200px 330px; }
@keyframes m-spin { 25% { transform: scaleX(.05); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(-.05); } }
.cat.m-sway .luna { animation: m-sway .6s ease-in-out; }
@keyframes m-sway { 25% { transform: rotate(-12deg) translateX(-20px); } 75% { transform: rotate(12deg) translateX(20px); } }
.cat.m-clap .luna { animation: m-clap .6s ease-in-out; }
@keyframes m-clap { 20%, 60% { transform: scale(1.1, .92); } 40%, 80% { transform: scale(.95, 1.05); } }
.dance-note { position: fixed; z-index: 30; pointer-events: none; font-size: 32px; animation: floatup 1.4s ease-out forwards; }