:root{--ink:#4a3426;--card:#ffffffee;--ok:#3fbf6b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#bfe6ff;font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-weight:800;color:var(--ink);touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
#bg{position:fixed;inset:0;background:url(img/bg_meadow.jpg) center/cover no-repeat}
#bg::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.18)}
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.screen.on{display:flex}

/* 그림 */
.pic{display:flex;align-items:center;justify-content:center;container-type:size}
.pic img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.pic .emo{font-size:62cqmin;line-height:1}
.pic svg{width:100%;height:100%}

/* 공통 버튼 */
.round-btn{border:0;background:var(--card);border-radius:50%;width:min(14vw,11vh);height:min(14vw,11vh);min-width:52px;min-height:52px;font-size:min(7vw,5.5vh);box-shadow:0 .8vmin 0 #0002;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.round-btn:active{transform:translateY(.4vmin);box-shadow:0 .3vmin 0 #0002}
.holdfill{position:absolute;left:0;bottom:0;width:100%;height:0;background:#ffb70388;pointer-events:none}
.holdfill.run{height:100%;transition:height .8s linear}
.title{margin:0;text-align:center;text-shadow:0 .5vmin 0 #fff,0 0 2vmin #fff}

/* 홈 · 단계 */
#home{justify-content:center;gap:3.5vh;padding:3vh 4vw}
#home h1{font-size:min(9vw,6.5vh)}
#stageCards{display:grid;grid-template-columns:repeat(2,1fr);gap:3vmin;width:min(94vw,640px)}
.stage-card{border:0;background:var(--card);border-radius:5vmin;padding:2.6vmin 1.5vmin;box-shadow:0 1.2vmin 0 #0002;display:flex;flex-direction:column;align-items:center;gap:.6vmin}
.stage-card:active{transform:translateY(.8vmin);box-shadow:0 .4vmin 0 #0002}
.sc-emoji{font-size:min(14vw,9vh);line-height:1}
.sc-label{font-size:min(6vw,3.8vh)}
.sc-desc{font-size:min(3.8vw,2.3vh);opacity:.75}
#homeMascot{position:fixed;right:2vw;bottom:1.5vh;width:min(24vw,19vh);height:min(24vw,19vh);display:flex;align-items:center;justify-content:center;pointer-events:none}
#homeMascot img,#doneMascot img,#praisePic img{width:100%;height:100%;object-fit:contain}
.emoji-mascot{font-size:min(18vw,14vh);line-height:1}
.bounce{animation:bounce 1.1s ease-in-out infinite}

/* 메뉴 */
#menu{padding:1.6vh 3vw 2vh;gap:2vh}
.menubar{display:flex;align-items:center;gap:3vw;width:100%}
#menuTitle{font-size:min(8vw,5.6vh);flex:1;text-align:center;margin-right:min(14vw,11vh)}
#menuGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.6vmin;width:min(94vw,640px);overflow-y:auto;padding-bottom:2vh;align-content:start}
.menu-card{border:0;background:var(--card);border-radius:4.5vmin;padding:2vmin 1vmin;box-shadow:0 1vmin 0 #0002;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8vmin;min-height:min(30vw,17vh)}
.menu-card:active{transform:translateY(.7vmin);box-shadow:0 .3vmin 0 #0002}
.mc-icon{font-size:min(9vw,6vh);line-height:1.1;white-space:nowrap}
.mc-title{font-size:min(4.4vw,2.8vh);text-align:center;line-height:1.2}
.mc-best{font-size:min(3.6vw,2.2vh);color:#e8890c}

/* 놀이 */
#play{padding:1.6vh 3vw 2vh;gap:1.2vh}
.bar{display:flex;align-items:center;justify-content:space-between;width:100%;gap:2vw}
.stars{display:flex;gap:.8vmin;flex:1;justify-content:center;flex-wrap:wrap}
.stars img,.stars .star-emo{width:min(7vw,5vh);height:min(7vw,5vh);object-fit:contain;filter:grayscale(1) opacity(.35);transition:filter .2s;font-size:min(6vw,4.4vh);text-align:center;line-height:1}
.stars img.on,.stars .star-emo.on{filter:none;animation:pop .5s}
.banner{font-size:min(5.4vw,3.6vh);text-align:center;text-shadow:0 .4vmin 0 #fff,0 0 1.6vmin #fff;min-height:1.3em;line-height:1.25}
#stage{flex:1;display:flex;flex-direction:column;align-items:center;gap:1.4vh;width:100%;min-height:0;position:relative}

.prompt{--ps:min(50vw,25vh);width:var(--ps);height:var(--ps);flex:0 0 auto;background:var(--card);border:1.2vmin dashed #ffb703;border-radius:6vmin;display:flex;align-items:center;justify-content:center;box-shadow:0 1vmin 0 #0002;position:relative}
.prompt>.pic{width:86%;height:86%;transition:filter .6s}
.prompt.shadow>.pic{filter:brightness(0) opacity(.85)}
.prompt.shadow.reveal>.pic{filter:brightness(1) opacity(1)}
.prompt.ok{animation:pop .6s}
.prompt.multibox,.prompt.addprompt{width:auto;height:auto;max-width:96%;padding:2vmin}
.multiwrap{display:flex;flex-wrap:wrap;justify-content:center;align-content:center}
.prompt.speakerbox{--ps:min(34vw,16vh);border-style:solid;border-color:#ffd166}
.speaker{border:0;background:#ffd166;border-radius:50%;width:80%;height:80%;font-size:min(12vw,7vh);box-shadow:0 .8vmin 0 #0002}
.speaker:active{transform:translateY(.5vmin)}
.prompt.cuebox{--ps:min(40vw,17vh);height:var(--ps)}
.sizecue{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.sizecue .big{font-size:min(14vw,7vh)}
.sizecue .t{font-size:min(7vw,4vh)}
.prompt.swatchbox{--ps:min(40vw,19vh)}
.swatch{width:80%;height:80%;border-radius:50%;border:1vmin solid #4a3426}
.addbox{max-width:94%;flex-wrap:wrap;display:flex;align-items:center;justify-content:center;gap:1vmin;min-height:calc(var(--is) * 3.4)}
.grp{display:flex;flex-wrap:wrap;width:calc(var(--is) * 3.1);gap:2px;justify-content:center}
.grp .pic{width:var(--is);height:var(--is)}
.op{font-size:calc(var(--is) * .9);line-height:1}

.choices{flex:1;min-height:0;width:100%;display:grid;justify-content:center;align-content:center;--cs:130px}
.choice{width:var(--cs);height:var(--cs);border:1vmin solid #fff;border-radius:5vmin;background:var(--card);padding:0;display:flex;align-items:center;justify-content:center;box-shadow:0 1vmin 0 #0002;animation:rise .35s backwards}
.choice>.pic{width:86%;height:86%}
.choice:active{transform:translateY(.6vmin);box-shadow:0 .4vmin 0 #0002}
.choice.ok{border-color:var(--ok);animation:pop .6s;box-shadow:0 0 0 1.2vmin #3fbf6b66,0 1vmin 0 #0002}
.choice.no{animation:shake .45s}
.choice.hint{animation:hint .7s 2}
.choice.num{background:#fff6e0}
.digit{font-size:calc(var(--cs) * .6);font-weight:900;color:#e8590c;line-height:1}
.scalebox{width:86%;height:86%;display:flex;align-items:center;justify-content:center;transform-origin:center}
.scalebox .pic{width:100%;height:100%}
.multi-in{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:2%;width:94%;height:94%}
.multi-in .pic{width:calc(var(--cs) * .27);height:calc(var(--cs) * .27)}

/* 하나씩 세어요 */
.countarea{flex:1;min-height:0;width:100%;display:grid;justify-content:center;align-content:center}
.cnt{width:var(--cs);height:var(--cs);border:1vmin solid #fff;border-radius:5vmin;background:var(--card);box-shadow:0 1vmin 0 #0002;position:relative;padding:0;display:flex;align-items:center;justify-content:center}
.cnt>.pic{width:80%;height:80%}
.cnt.counted{border-color:var(--ok);animation:pop .5s}
.badge{position:absolute;right:-1vmin;top:-1vmin;width:36%;height:36%;border-radius:50%;background:var(--ok);color:#fff;font-size:calc(var(--cs) * .24);display:flex;align-items:center;justify-content:center;border:.8vmin solid #fff}

/* 짝 맞추기 */
.board{flex:1;min-height:0;width:100%;display:grid;justify-content:center;align-content:center}
.mcard{width:var(--cs);height:var(--cs);border:0;background:none;padding:0;perspective:700px}
.mc-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s}
.mcard.open .mc-inner,.mcard.done .mc-inner{transform:rotateY(180deg)}
.mc-face{position:absolute;inset:0;border-radius:4vmin;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 .8vmin 0 #0002}
.mc-front{background:linear-gradient(135deg,#ffb703,#fb8500);border:1vmin solid #fff}
.mc-front .q{font-size:calc(var(--cs) * .5)}
.mc-back{background:var(--card);transform:rotateY(180deg);border:1vmin solid #fff}
.mc-back .pic{width:84%;height:84%}
.mcard.done .mc-back{border-color:var(--ok)}

/* 끌어 놓기 (모양 끼우기 · 분류) */
.zone{display:flex;gap:2.4vmin;justify-content:center;align-items:center;width:100%;flex:0 0 auto}
.hole{width:var(--ss);height:var(--ss);background:#ffffffaa;border-radius:3vmin;padding:6%}
.hole.filled{background:#bff0cc}
.tray{display:flex;gap:2.4vmin;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;flex:1;min-height:0;align-content:center}
.token{width:var(--ss);height:var(--ss);position:relative;z-index:5;touch-action:none;padding:6%}
.token.dragging{z-index:60;filter:drop-shadow(0 1.4vmin .8vmin #0004)}
.token.no{animation:shake .45s}
.token svg{pointer-events:none}
.sorttoken{width:var(--ts);height:var(--ts);background:var(--card);border-radius:3vmin;box-shadow:0 .8vmin 0 #0002;padding:4%;display:flex;align-items:center;justify-content:center}
.sorttoken .pic{width:100%;height:100%}
.basket{flex:1;max-width:46vw;height:min(28vh,42vw);background:#ffe7a8cc;border:1vmin dashed #e8890c;border-radius:5vmin;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6vmin}
.basket.got{background:#bff0cc;border-color:var(--ok)}
.b-icon{font-size:min(14vw,8vh);line-height:1}
.b-name{font-size:min(5.4vw,3.2vh)}

/* 규칙 찾기 */
.seq{display:flex;gap:6px;justify-content:center;width:100%;flex:0 0 auto}
.sitem{width:var(--ss);height:var(--ss);background:var(--card);border-radius:2.4vmin;display:flex;align-items:center;justify-content:center;box-shadow:0 .6vmin 0 #0002}
.sitem .pic{width:88%;height:88%}
.sitem.slot{border:.8vmin dashed #ffb703;font-size:calc(var(--ss) * .6);color:#e8890c;animation:hint 1s infinite}

/* 숫자 따라 그리기 */
.tracebox{position:relative;margin:auto;background:#fff;border-radius:5vmin;box-shadow:0 1vmin 0 #0002;overflow:hidden}
.tracebox canvas{position:absolute;left:0;top:0}
.skipbtn{position:absolute;right:0;bottom:0;border:0;background:var(--card);border-radius:50%;width:min(14vw,10vh);height:min(14vw,10vh);align-items:center;justify-content:center;font-size:min(7vw,5vh);box-shadow:0 .8vmin 0 #0002;z-index:30}

/* 풍선 */
.sky{position:relative;flex:1;width:100%;overflow:hidden;min-height:0}
.balloon{position:absolute;bottom:-30%;width:min(22vw,17vh);animation:rise 7s linear forwards;touch-action:none}
.balloon svg{width:100%;height:auto;display:block;pointer-events:none}
.balloon.pop{animation:popB .3s forwards;pointer-events:none}

/* 칭찬 */
#praise{position:fixed;left:50%;bottom:-40vh;transform:translateX(-50%);z-index:20;pointer-events:none;transition:bottom .4s cubic-bezier(.2,1.4,.4,1);display:flex;flex-direction:column;align-items:center}
#praise.show{bottom:2vh}
#praise .bubble{background:#fff;border-radius:4vmin;padding:1vmin 3vmin;font-size:min(7vw,5vh);box-shadow:0 .8vmin 0 #0002;margin-bottom:1vmin}
#praise .pic2,#praisePic{width:min(34vw,24vh);height:min(34vw,24vh);display:flex;align-items:center;justify-content:center}
#confetti{position:fixed;inset:0;z-index:15;pointer-events:none;background:url(img/confetti.png) center/cover;opacity:0}
#confetti.go{animation:fall 1.6s ease-out}

/* 끝 */
#done{justify-content:center;gap:2.6vh}
#done h2{margin:0;font-size:min(10vw,7vh)}
#doneMascot{width:min(34vw,22vh);height:min(34vw,22vh);display:flex;align-items:center;justify-content:center}
.big-stars{display:flex;gap:1.4vmin;flex-wrap:wrap;justify-content:center;max-width:90vw}
.big-stars img,.big-stars .star-emo{width:min(14vw,10vh);height:min(14vw,10vh);object-fit:contain;animation:pop .6s backwards;font-size:min(11vw,8vh);line-height:1;text-align:center}
.done-btns{display:flex;gap:4vmin}
.done-btns .round-btn{width:min(24vw,16vh);height:min(24vw,16vh);font-size:min(12vw,8.5vh)}

@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-1.6vmin) rotate(-3deg)}40%{transform:translateX(1.6vmin) rotate(3deg)}60%{transform:translateX(-1vmin)}80%{transform:translateX(1vmin)}}
@keyframes rise{from{opacity:0;transform:translateY(3vmin) scale(.9)}to{opacity:1;transform:none}}
@keyframes hint{0%,100%{transform:scale(1)}50%{transform:scale(1.1);border-color:#ffb703}}
@keyframes fall{0%{opacity:0;transform:translateY(-12%)}15%{opacity:1}100%{opacity:0;transform:translateY(10%)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
@keyframes popB{0%{transform:scale(1);opacity:1}60%{transform:scale(1.5);opacity:.8}100%{transform:scale(1.8);opacity:0}}
.balloon{animation-name:floatUp}
.balloon.pop{animation-name:popB}
@keyframes floatUp{from{bottom:-30%}to{bottom:105%}}