*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;touch-action:manipulation;font-family:"Baloo 2","Comic Sans MS","Segoe UI",system-ui,sans-serif}
body{background:#7c3aed}
#app{height:100%;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.home{background:linear-gradient(135deg,#f472b6 0%,#a78bfa 50%,#38bdf8 100%);align-items:center;justify-content:center;gap:3vmin;padding:4vmin}
.home h1{margin:0;color:#fff;font-size:min(9vw,64px);text-shadow:0 3px 0 rgba(0,0,0,.2);text-align:center}
.profiles{display:flex;gap:4vmin;width:100%;max-width:900px;flex:1;max-height:60vh;flex-wrap:wrap;justify-content:center}
.profile{flex:1;min-width:40%;min-height:30vmin;border:0;border-radius:6vmin;color:#fff;font-size:min(8vw,56px);font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vmin;box-shadow:0 1.2vmin 0 rgba(0,0,0,.2);cursor:pointer;font-family:inherit}
.profile:active{transform:translateY(.8vmin);box-shadow:0 .4vmin 0 rgba(0,0,0,.2)}
.profile .big{font-size:min(24vw,170px);line-height:1}
.profile.girl{background:linear-gradient(160deg,#ec4899,#f472b6)}
.profile.boy{background:linear-gradient(160deg,#0ea5e9,#22c55e)}
.gear{position:absolute;right:2vmin;bottom:2vmin;font-size:28px;background:rgba(255,255,255,.35);border:0;border-radius:50%;width:52px;height:52px;cursor:pointer}
.theme-girl{background:linear-gradient(180deg,#fdf2f8,#fbcfe8)}
.theme-boy{background:linear-gradient(180deg,#e0f2fe,#bbf7d0)}
.bar{display:flex;align-items:center;gap:2vmin;padding:1.5vmin 2vmin;background:rgba(255,255,255,.7)}
.bar .title{flex:1;font-size:min(6vw,32px);font-weight:800;color:#4c1d95;text-align:center}
.bar .stars{font-size:min(5vw,26px);font-weight:800;min-width:70px;text-align:right}
.btn{border:0;border-radius:3vmin;background:#fff;font-size:min(6vw,30px);font-weight:800;padding:1.2vmin 2.4vmin;box-shadow:0 .8vmin 0 rgba(0,0,0,.18);cursor:pointer;font-family:inherit;color:#4c1d95;position:relative;overflow:hidden}
.btn:active{transform:translateY(.5vmin)}
.holdfill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(124,58,237,.35)}
.cards{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(38vmin,1fr));gap:3vmin;padding:3vmin;align-content:center;overflow:auto}
.card{border:0;border-radius:5vmin;background:#fff;box-shadow:0 1vmin 0 rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vmin;padding:3vmin;font-size:min(6vw,34px);font-weight:800;color:#4c1d95;cursor:pointer;font-family:inherit;min-height:26vmin}
.card:active{transform:translateY(.6vmin)}
.card .em{font-size:min(16vw,100px);line-height:1}
.stage{flex:1;min-height:0;position:relative;overflow:hidden;display:flex}
/* makeup / dress */
.split{flex:1;display:flex;gap:2vmin;padding:2vmin;min-height:0;align-items:stretch}
.split>svg{flex:1;min-width:0;min-height:0;height:100%}
.panel{width:min(38%,300px);display:flex;flex-direction:column;gap:1.4vmin;overflow:auto}
.tabs{display:flex;gap:1vmin;flex-wrap:wrap}
.tab{flex:1;border:0;border-radius:2vmin;padding:1.2vmin;background:#fff;font-size:min(4.5vw,22px);font-weight:800;font-family:inherit;cursor:pointer;color:#4c1d95}
.tab.on{background:#7c3aed;color:#fff}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2vmin}
.sw{aspect-ratio:1;border-radius:50%;border:.7vmin solid #fff;box-shadow:0 .5vmin 0 rgba(0,0,0,.2);cursor:pointer}
.sw.on{outline:.8vmin solid #7c3aed}
.pick{display:flex;align-items:center;gap:1vmin;background:#fff;border-radius:2vmin;padding:1vmin 1.4vmin}
.pick span{flex:1;font-weight:800;color:#4c1d95;font-size:min(4.5vw,22px)}
.pick button{border:0;background:#ede9fe;border-radius:50%;width:min(11vw,52px);height:min(11vw,52px);font-size:min(6vw,26px);cursor:pointer}
/* paint */
.paintwrap{flex:1;position:relative;margin:2vmin;border-radius:4vmin;background:#fff;box-shadow:0 1vmin 0 rgba(0,0,0,.12);overflow:hidden;touch-action:none}
.paintwrap canvas,.paintwrap svg{position:absolute;inset:0;width:100%;height:100%}
.paintwrap svg{pointer-events:none}
.tools{display:flex;gap:1.2vmin;padding:0 2vmin 2vmin;flex-wrap:wrap;justify-content:center;align-items:center}
.tools .sw{width:min(10vw,48px);aspect-ratio:1;height:auto}
/* count */
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vmin;padding:3vmin}
.q{font-size:min(8vw,44px);font-weight:800;color:#4c1d95}
.things{display:flex;flex-wrap:wrap;gap:1vmin;justify-content:center;max-width:90vmin;font-size:min(13vw,72px)}
.answers{display:flex;gap:3vmin}
.ans{border:0;border-radius:4vmin;background:#fff;font-size:min(14vw,80px);font-weight:800;color:#4c1d95;width:min(24vw,140px);aspect-ratio:1;box-shadow:0 1vmin 0 rgba(0,0,0,.18);cursor:pointer;font-family:inherit}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
/* animals */
.grid6{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5vmin;padding:2.5vmin}
@media (orientation:portrait){.grid6{grid-template-columns:repeat(2,1fr)}}
.animal{border:0;border-radius:5vmin;font-size:min(22vw,150px);background:#fff;box-shadow:0 1vmin 0 rgba(0,0,0,.15);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:inherit}
.animal small{font-size:min(5vw,28px);font-weight:800;color:#065f46}
.bounce{animation:bounce .5s}
@keyframes bounce{30%{transform:scale(1.25) rotate(-6deg)}60%{transform:scale(.92) rotate(5deg)}}
/* soccer */
.field{background:linear-gradient(180deg,#86efac 0%,#22c55e 100%);width:100%;position:relative}
.goal{position:absolute;top:3%;left:50%;transform:translateX(-50%);font-size:min(40vw,260px);line-height:1}
.ball{position:absolute;left:50%;bottom:6%;font-size:min(20vw,110px);transform:translateX(-50%);transition:all .6s cubic-bezier(.2,.8,.3,1);line-height:1}
.gol{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:min(24vw,160px);font-weight:900;color:#fff;text-shadow:0 .8vmin 0 #166534;pointer-events:none;animation:pop .8s}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.conf{position:absolute;font-size:5vmin;pointer-events:none;animation:fall 1.4s ease-out forwards}
@keyframes fall{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(40vmin) rotate(360deg);opacity:0}}
/* bubbles */
.bub{position:absolute;bottom:-20vmin;width:min(22vw,130px);aspect-ratio:1;border-radius:50%;border:0;box-shadow:inset -1vmin -1vmin 2vmin rgba(0,0,0,.2),inset 1vmin 1vmin 2vmin rgba(255,255,255,.5);animation:rise linear forwards;cursor:pointer}
@keyframes rise{to{transform:translateY(-130vh)}}
.bub.popped{animation:none;transform:scale(1.6);opacity:0;transition:all .25s}
/* overlay */
.overlay{position:fixed;inset:0;background:rgba(76,29,149,.96);z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vmin;color:#fff;text-align:center;padding:5vmin}
.overlay h2{font-size:min(9vw,52px);margin:0}
.overlay input,.overlay select{font-size:28px;padding:1.5vmin;border-radius:2vmin;border:0;width:min(60vw,240px);text-align:center;font-family:inherit}
/* v2 */
.split{overflow:hidden}
.facebox{flex:1;min-width:0;min-height:0;position:relative;border-radius:4vmin;display:flex}
.facebox svg{width:100%;height:100%}
.facebox .conf{font-size:6vmin}
.order{flex-wrap:wrap;justify-content:center}
.dotc{display:inline-block;width:min(9vw,40px);height:min(9vw,40px);border-radius:50%;border:.6vmin solid #fff;box-shadow:0 .4vmin 0 rgba(0,0,0,.2)}
.sw.num{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:min(6vw,28px);font-family:inherit;text-shadow:0 1px 2px #000}
.panel .tab{flex:none;width:100%}
.runway{overflow:hidden}
.doll.walk{animation:walk 3s linear}
@keyframes walk{0%{transform:translateX(-90%) rotate(-3deg)}25%{transform:translateX(-45%) rotate(3deg)}50%{transform:translateX(0) rotate(-3deg)}75%{transform:translateX(45%) rotate(3deg)}100%{transform:translateX(90%) rotate(0)}}
.kid{position:absolute;right:4%;bottom:4%;font-size:min(16vw,100px);pointer-events:none}
.keeper{position:absolute;font-size:min(16vw,90px);transform:translate(-50%,-50%);transition:left .4s ease-out;line-height:1}
.ball.free{left:0;bottom:auto;top:0;transition:none}
.count{position:absolute;top:2%;left:0;right:0;text-align:center;font-size:min(22vw,150px);font-weight:900;color:#fff;text-shadow:0 .8vmin 0 #166534;pointer-events:none}
.eggs .animal{font-size:min(26vw,160px)}