*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#f3d9e6;overscroll-behavior:none;touch-action:none;
  font-family:"Jua","Cafe24 Ssurround","NanumSquareRound","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif}
#stage{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(100vw,62vh);overflow:hidden;background:#ffeef5;
  box-shadow:0 0 60px rgba(120,60,90,.25)}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#fx{z-index:2}
.hidden{display:none!important}
button{font:inherit;border:0;padding:0;cursor:pointer;color:inherit;background:none}

/* round buttons */
.rb{width:54px;height:54px;border-radius:50%;background:#fff;color:#ff7fa8;box-shadow:0 4px 0 #f3b8cd,0 8px 14px rgba(160,80,110,.18);
  display:grid;place-items:center;transition:transform .08s}
.rb svg{width:30px;height:30px}
.rb:active{transform:translateY(3px) scale(.96);box-shadow:0 1px 0 #f3b8cd}
.rb.off{color:#c9c3cf}

/* HUD */
#hud{position:absolute;inset:0;z-index:3;pointer-events:none}
#hud>*{pointer-events:auto}
#bHome{position:absolute;left:12px;top:calc(12px + env(safe-area-inset-top))}
#bReset{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top));color:#6fb7f0;box-shadow:0 4px 0 #b9d9f3,0 8px 14px rgba(80,110,160,.18)}
#meter{position:absolute;left:78px;right:78px;top:calc(22px + env(safe-area-inset-top));height:34px;display:flex;align-items:center;pointer-events:none}
#meterIc{width:40px;height:40px;color:#ffd04a;filter:drop-shadow(0 2px 0 #e9a92c);z-index:1;margin-right:-14px}
#meterIc svg{width:40px;height:40px}
#meterBar{flex:1;height:22px;border-radius:12px;background:rgba(255,255,255,.85);box-shadow:inset 0 2px 4px rgba(150,90,120,.25);overflow:hidden}
#meterFill{height:100%;width:0;border-radius:12px;background:linear-gradient(#ffe88a,#ffc23d);transition:width .25s}
#tray{position:absolute;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));padding:8px 6px;border-radius:26px;background:rgba(255,255,255,.82);
  box-shadow:0 6px 18px rgba(160,80,110,.18);display:flex;flex-direction:column;gap:6px}
.row{display:flex;gap:8px;overflow-x:auto;padding:2px 4px;scrollbar-width:none;justify-content:safe center}
.row::-webkit-scrollbar{display:none}
.sw,.mx,.bs{flex:0 0 auto;width:48px;height:48px;border-radius:50%;position:relative;display:grid;place-items:center;background:#fff;
  box-shadow:0 3px 0 #e6d3dc;transition:transform .08s}
.sw i,.bs i{width:38px;height:38px;border-radius:50%;display:block;box-shadow:inset -3px -4px 6px rgba(0,0,0,.12),inset 3px 3px 5px rgba(255,255,255,.6)}
.sw.sel,.mx.sel,.bs.sel{box-shadow:0 0 0 4px #ff9cc4,0 3px 0 #e6d3dc;transform:scale(1.06)}
.sw.locked i{filter:grayscale(.7) opacity(.45)}
.sw svg{position:absolute;width:22px;height:22px;color:#a79bb0}
.mx svg{width:32px;height:32px}
.mx{background:#f6f1f5}.mx.sel{background:#fff}
.mx:not(.sel) svg{filter:grayscale(.85) opacity(.6)}
.mx.scent{margin-left:10px}
.b-clear i{background:radial-gradient(circle at 35% 30%,#fff,#cfe9ff 40%,#9fd0ff)}
.b-butter i{background:#ffe9a8;box-shadow:inset -3px -4px 6px rgba(0,0,0,.08)}
.b-cloud i{background:radial-gradient(circle at 30% 30%,#fff 20%,#e8edfa 60%,#d5dcf2)}
.b-jelly i{background:radial-gradient(circle at 35% 30%,#fff 0 12%,#ffb3d1 30%,#ff7fb0)}
.sw:active,.mx:active,.bs:active{transform:scale(.92)}

/* hint: pulsing finger */
#hint{position:absolute;left:50%;z-index:3;pointer-events:none;width:0;height:0}
#hint i{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;border:6px solid rgba(255,255,255,.9);animation:ring 1.2s ease-out infinite}
#hint b{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 4px 10px rgba(120,60,90,.3);animation:tap 1.2s ease-in-out infinite}
@keyframes ring{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.25);opacity:0}}
@keyframes tap{0%,100%{transform:scale(1.15)}35%{transform:scale(.8)}}

/* home */
#home{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;padding:calc(18px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom));
  background:radial-gradient(circle at 20% 10%,#fff6c9 0 18%,transparent 19%),radial-gradient(circle at 85% 22%,#d6f3ff 0 14%,transparent 15%),radial-gradient(circle at 12% 80%,#dff8e9 0 16%,transparent 17%),linear-gradient(#ffe6f0,#ffd3e4)}
#logo{display:flex;flex-direction:column;align-items:center;margin:6px 0 10px}
#logo .l1{font-size:min(15vw,9.2vh);font-weight:900;color:#fff;letter-spacing:.02em;line-height:1;
  text-shadow:0 4px 0 #ff8fb8,0 -3px 0 #ff8fb8,3px 0 0 #ff8fb8,-3px 0 0 #ff8fb8,3px 3px 0 #ff8fb8,-3px 3px 0 #ff8fb8,3px -3px 0 #ff8fb8,-3px -3px 0 #ff8fb8,0 9px 0 #e0608f,0 14px 14px rgba(190,70,120,.3)}
#logo .l2{margin-top:14px;font-size:12px;font-weight:800;letter-spacing:.32em;color:#e0608f}
#shelf{flex:1;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:center;overflow-y:auto;padding:6px 2px}
.card{position:relative;aspect-ratio:1/1.12;border-radius:24px;background:#fff;box-shadow:0 5px 0 #f3b8cd,0 10px 16px rgba(160,80,110,.16);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:transform .08s}
.card.big{grid-column:span 3;aspect-ratio:auto;height:min(27vh,190px);flex-direction:row;gap:18px;background:linear-gradient(120deg,#fff,#fff3c9)}
.card:active{transform:translateY(3px) scale(.97)}
.thumb{width:62%;aspect-ratio:1;border-radius:50%;box-shadow:inset -8px -10px 16px rgba(0,0,0,.14),inset 6px 6px 10px rgba(255,255,255,.65),0 6px 8px rgba(120,60,90,.18);animation:bob 2.6s ease-in-out infinite}
.card.big .thumb{width:auto;height:74%}
.card:nth-child(2n) .thumb{animation-delay:-.9s}.card:nth-child(3n) .thumb{animation-delay:-1.7s}
@keyframes bob{0%,100%{transform:scale(1,1)}50%{transform:scale(1.05,.95)}}
.nm{font-size:14px;font-weight:800;color:#b0577a}
.card.big .nm{font-size:30px;color:#ff6f9f}
.card.locked .thumb{filter:grayscale(.9) brightness(1.08) opacity(.55);animation:none}
.card.locked .nm{color:#bdb3bb}
.lk{position:absolute;top:30%;left:50%;width:38px;height:38px;margin-left:-19px;color:#9d8fa6}
.lk svg{width:38px;height:38px}
.card.wig{animation:wig .35s}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
#homeBar{display:flex;gap:12px;align-items:center;width:100%;padding-top:8px}
.pb{margin-left:auto;height:40px;padding:0 14px 0 10px;border-radius:20px;background:rgba(255,255,255,.7);color:#a8869a;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.pb svg{width:20px;height:20px}

/* modals */
.modal{position:absolute;inset:0;z-index:9;background:rgba(90,50,80,.45);display:grid;place-items:center;padding:18px}
.sheet{background:#fff;border-radius:24px;padding:20px 20px 16px;max-width:420px;width:100%;color:#5c4a58;font-size:14px;line-height:1.55;font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;user-select:text;max-height:92%;overflow:auto}
.sheet h2{margin:0 0 8px;font-size:19px;color:#e0608f}
.sheet ul{padding-left:18px;margin:8px 0}
.sheet .en{font-size:12px;color:#9a8b96}
.sheet label{display:flex;align-items:center;gap:8px;padding:6px 0;font-weight:700}
.sheet input{width:20px;height:20px}
.pbtns{display:flex;gap:10px;margin-top:10px}
.pbtns button{flex:1;height:44px;border-radius:14px;background:#ffe3ee;color:#d9578a;font-weight:800}
#pReset{background:#f1eef2;color:#8d7f8a}
.giftWrap{position:relative;display:grid;place-items:center}
.rays{position:absolute;width:300px;height:300px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.55) 0 12deg,transparent 12deg 24deg);animation:spin 8s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
#gift{width:150px;height:150px;border-radius:50%;box-shadow:inset -12px -14px 22px rgba(0,0,0,.14),inset 8px 8px 14px rgba(255,255,255,.65),0 0 0 8px #fff,0 14px 24px rgba(90,40,70,.35);animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
#giftName{position:absolute;bottom:-56px;font-size:26px;font-weight:900;color:#fff;text-shadow:0 3px 0 #e0608f;white-space:nowrap}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
#fps{position:absolute;left:6px;bottom:6px;z-index:20;font:11px/1.3 monospace;background:rgba(0,0,0,.6);color:#9f9;padding:3px 6px;border-radius:6px;pointer-events:none}

/* ASMR streak: hearts light up next to the star while the kid keeps playing */
#streak{display:flex;gap:3px;margin-left:6px}
#streak i{width:16px;height:16px;display:block;background:#fff;opacity:.55;transition:all .25s;
  clip-path:path("M8 15C2.5 10.8 1 7.6 2.6 5.2 4.4 2.9 7 3.6 8 5.6 9 3.6 11.6 2.9 13.4 5.2 15 7.6 13.5 10.8 8 15z")}
#streak[data-lv="1"] i:nth-child(-n+1),#streak[data-lv="2"] i:nth-child(-n+2),#streak[data-lv="3"] i{background:#ff6f9f;opacity:1;transform:scale(1.25)}
#streak[data-lv="3"] i{animation:beat .5s ease-in-out infinite alternate}
#meterIc.hot{animation:beat .45s ease-in-out infinite alternate;color:#ffb92e}
@keyframes beat{to{transform:scale(1.22)}}

/* v3: touch scrolling inside lists, calm mode, shapes, jars shelf, rest screen */
#shelf{touch-action:pan-y}.row{touch-action:pan-x}
.rb.sm{width:42px;height:42px}.rb.sm svg{width:22px;height:22px}
#bCalm{position:absolute;left:18px;top:calc(76px + env(safe-area-inset-top));color:#b9b3d6;box-shadow:0 3px 0 #dcd6ee}
#bCalm.sel{background:#4a4a86;color:#ffe9a6;box-shadow:0 3px 0 #2c2c5a,0 0 14px rgba(255,233,166,.6)}
#stage.calm #meter{display:none}
#stage.calm #tray{background:rgba(255,255,255,.62)}
.shp i{background:#ffb3d1;border-radius:50%;box-shadow:none}
.s-heart i{border-radius:0;width:34px;height:34px;clip-path:path("M17 31C5 22 2 15.5 5.4 10.4 9.3 5.6 14.8 7 17 11.4 19.2 7 24.7 5.6 28.6 10.4 32 15.5 29 22 17 31z")}
.s-star i{border-radius:0;width:36px;height:36px;clip-path:polygon(50% 3%,62% 36%,97% 38%,69% 59%,79% 93%,50% 73%,21% 93%,31% 59%,3% 38%,38% 36%)}
.mx.jarb{margin-left:10px;background:#fff}.mx.jarb svg{filter:none}
#jars{width:100%;padding:8px 4px 2px;justify-content:flex-start}
.jar{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;width:66px}
.jar i{width:50px;height:54px;border-radius:14px 14px 20px 20px;border:4px solid #fff;box-shadow:0 3px 0 #f3b8cd,inset -5px -6px 8px rgba(0,0,0,.12),inset 4px 4px 6px rgba(255,255,255,.6);display:block}
.jar span{font-size:10.5px;font-weight:800;color:#b0577a;white-space:nowrap}
#dice{position:absolute;bottom:-128px;width:60px;height:60px}#dice svg{width:40px;height:40px}
.sheet .lbl{font-weight:700;padding:8px 0 4px}
.seg{display:flex;gap:6px}.seg button{flex:1;height:38px;border-radius:12px;background:#f1eef2;color:#8d7f8a;font-weight:800}
.seg button.sel{background:#ff9cc4;color:#fff}
#rest{background:rgba(36,38,78,.92)}
.restBox{display:flex;flex-direction:column;align-items:center;color:#fff;text-align:center}
.moonBig{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe0,#ffe58a 60%,#f5c94e);box-shadow:0 0 60px rgba(255,229,138,.55);animation:bob 3s ease-in-out infinite}
.zz{margin-top:14px;font-size:26px;font-weight:900;letter-spacing:.4em;color:#cfd3ff;animation:beat 1.4s ease-in-out infinite alternate}
.restBox p{font-size:24px;font-weight:900;margin:18px 0 34px}
#restOk{position:relative;overflow:hidden;height:46px;padding:0 20px;border-radius:23px;background:rgba(255,255,255,.16);color:#dfe2ff;font-size:13px;font-weight:700;font-family:"Malgun Gothic",system-ui,sans-serif}
#restOk span{position:absolute;inset:0;width:0;background:rgba(255,255,255,.28)}
#restOk.holding span{width:100%;transition:width 1.5s linear}

/* ---------- 키캡 toy ---------- */
#kb{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:84px 12px 12px;background:radial-gradient(circle at 80% 12%,#fff6c9 0 14%,transparent 15%),linear-gradient(#efe8ff,#ffe3ee);--stem:#ff6b6b}
#hud.kbmode #bReset,#hud.kbmode #bCalm,#hud.kbmode #tray{display:none}
.kbCase{width:100%;max-width:440px;padding:14px 14px 18px;border-radius:28px;background:linear-gradient(#fff,#f3e8f7);box-shadow:0 9px 0 #d9c3e3,0 18px 26px rgba(120,70,130,.25)}
.kbGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;background:#3a3350;padding:11px 11px 15px;border-radius:18px;box-shadow:inset 0 4px 8px rgba(0,0,0,.4)}
.key{position:relative;aspect-ratio:1;touch-action:none;cursor:pointer}
.key.space{grid-column:span 4;aspect-ratio:4.4/1}
.key .glow{position:absolute;inset:-5px;border-radius:16px;background:hsl(calc(var(--h,0)*1deg) 95% 62%);filter:blur(7px);opacity:0;pointer-events:none}
.key .sw{position:absolute;inset:15%;border-radius:10px;background:#221c33;box-shadow:inset 0 0 0 3px #4a4266;display:grid;place-items:center}
.key.space .sw{inset:15% 39%}
.key .sw i{width:36%;aspect-ratio:1;background:var(--stem);clip-path:polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%)}
.capBox{position:absolute;inset:0;transition:transform .17s cubic-bezier(.3,2.6,.5,1)}
.key.down .capBox{transform:translateY(7px);transition:transform .04s}
.key.space.down .capBox{transform:translateY(8px)}
.cap{position:absolute;inset:0;border-radius:16%;background:var(--side);box-shadow:0 7px 0 rgba(0,0,0,.3),inset 0 -5px 0 rgba(0,0,0,.12);transition:box-shadow .05s}
.key.down .cap{box-shadow:0 1px 0 rgba(0,0,0,.3),inset 0 -5px 0 rgba(0,0,0,.12)}
.cap .top{position:absolute;left:9%;right:9%;top:5%;bottom:17%;border-radius:20%;background:var(--top);box-shadow:inset 0 3px 3px rgba(255,255,255,.75),inset 0 -3px 4px rgba(0,0,0,.07)}
.key.space .cap{border-radius:14px}.key.space .top{left:2.2%;right:2.2%;border-radius:11px}
.cap .top>svg{position:absolute;left:6%;top:6%;width:88%;height:88%;pointer-events:none}
.key.space .top>svg{left:40%;width:20%}
.cap.clear .top{box-shadow:inset 0 3px 4px rgba(255,255,255,.95),inset 0 0 12px rgba(255,255,255,.55)}
.part{position:absolute;width:54%;aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 2px 1px rgba(60,30,70,.38))}
.key.space .part{width:10.5%}
.part svg{width:100%;height:100%;display:block}
.part::after{content:"";position:absolute;left:14%;top:9%;width:38%;height:20%;border-radius:50%;background:rgba(255,255,255,.6);transform:rotate(-25deg)}
#kb[data-mode=deco] .cap .part{pointer-events:auto;touch-action:none;cursor:grab}
.key.down .part{animation:wob .34s}
@keyframes wob{0%{margin-top:0}30%{margin-top:6%}62%{margin-top:-3%}100%{margin-top:0}}
.part.plop{animation:plop .26s cubic-bezier(.3,2.2,.5,1)}
@keyframes plop{from{scale:1.9}to{scale:1}}
.part.ghost{width:54px;transform:translate(-50%,-70%) scale(1.25);z-index:9}
.part.big{position:relative;width:104px}
.fly{position:absolute!important;z-index:8;pointer-events:none}
.key.pop .capBox{animation:popon .22s cubic-bezier(.3,2.4,.5,1)}
@keyframes popon{from{transform:translateY(-24px)}to{transform:none}}
.key.sel::after{content:"";position:absolute;inset:-5px;border:3px dashed #ff9cc4;border-radius:18px;pointer-events:none}
.kbBar{width:100%;max-width:440px;margin-top:16px;padding:8px 6px;border-radius:24px;background:rgba(255,255,255,.88);box-shadow:0 6px 18px rgba(160,80,110,.16);display:flex;flex-direction:column;gap:8px}
.kbBar .row{justify-content:flex-start;align-items:center;min-height:58px}
.swb{flex:0 0 auto;height:46px;min-width:46px;padding:0 11px;border-radius:23px;background:#f6f1f5;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:800;color:#8d7f8a}
.swb i{width:15px;height:15px;border-radius:5px;display:block}
.swb.sel{background:#fff;box-shadow:0 0 0 3px #ff9cc4;color:#e0608f}
.swb.tool{padding:0}.swb.tool svg{width:26px;height:26px;color:#b9a3c9}.swb.tool.sel svg{color:#e0608f}
.capb{flex:0 0 auto;width:48px;height:48px;position:relative;margin:2px 2px 7px}
.capb .cap{box-shadow:0 5px 0 rgba(0,0,0,.24)}
.capb.sel{outline:3px solid #ff9cc4;outline-offset:4px;border-radius:10px}
.capb.locked,.partb.locked{filter:grayscale(.9) opacity(.4)}
.partb{flex:0 0 auto;width:50px;height:50px;background:#fff;box-shadow:0 3px 0 #e6d3dc;border-radius:50%;display:grid;place-items:center;touch-action:none}
.partb svg{width:34px;height:34px;pointer-events:none}
#gift{position:relative;display:grid;place-items:center}
#gift .cap{inset:22%}
.th-keys{border-radius:22%!important}

/* home shelf with 11+ toys: start-aligned, scrollable, smaller hero card */
#shelf{align-content:start;grid-template-columns:repeat(3,1fr);padding-bottom:10px}
.card{aspect-ratio:1/1.02}
.card.big{height:min(17vh,136px)}
.card.big .nm{font-size:26px}
#logo .l1{font-size:min(13vw,8vh)}