/* 톡톡놀이터 — 클레이 톤(승인 1안). 아이 화면 글자 0, 타겟 110px+, 탭만. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:#F3E9D8;font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;touch-action:manipulation}
#app{position:fixed;inset:0;max-width:560px;margin:0 auto;overflow:hidden;background:#DCE9D2}
#scene{position:absolute;inset:0;overflow:hidden}
img{pointer-events:none;-webkit-user-drag:none}

/* 공통 */
.abs{position:absolute}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tap{position:absolute;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer}
.tap img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(60,40,20,.28))}
.tap:active img{transform:scale(.92)}
.tap.correct img{animation:hop .55s ease}
.tap.wrong img{animation:wig .45s ease}
@keyframes hop{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-26px) scale(1.08)}70%{transform:translateY(0) scale(.97)}}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.bob{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.pulse{animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.pop{animation:pop .3s ease}
@keyframes pop{0%{transform:scale(.6);opacity:.4}100%{transform:scale(1);opacity:1}}
.fadein{animation:fi .45s ease}
@keyframes fi{from{opacity:0}to{opacity:1}}
.glow{box-shadow:0 0 0 8px rgba(255,236,150,.55),0 0 44px 16px rgba(255,220,120,.65);border-radius:50%}
@media (prefers-reduced-motion:reduce){.bob,.pulse{animation:none}}

/* 토리 */
.tori{position:absolute;pointer-events:none;filter:drop-shadow(0 10px 12px rgba(60,40,20,.3));transition:opacity .3s}
.tori-talk{animation:talk .5s ease-in-out infinite alternate}
@keyframes talk{from{transform:translateY(0)}to{transform:translateY(-4px)}}
/* 토리 다시듣기 버튼(게임 상단) */
.tori-btn{position:absolute;left:8px;top:8px;width:110px;height:110px;border:0;background:none;padding:0;z-index:5}
.tori-btn img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(60,40,20,.3))}
.tori-btn:active img{transform:scale(.92)}

/* 시작 화면 */
.start-orb{position:absolute;left:50%;bottom:12%;width:44vmin;max-width:190px;aspect-ratio:1;transform:translateX(-50%);border:0;background:none;padding:0}
.start-orb .disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFE7B8,#F3B36B);box-shadow:0 12px 0 #D68E4B,0 20px 30px rgba(120,70,20,.35)}
.start-orb .ring{position:absolute;inset:0;border-radius:50%;border:6px solid #F3C98F}
.start-orb:active .disc{transform:translateY(6px);box-shadow:0 6px 0 #D68E4B,0 12px 20px rgba(120,70,20,.3)}
.start-orb svg{position:absolute;inset:20%;width:60%;height:60%;fill:#7A4B24;opacity:.9}

/* 홈 지도 */
.map{position:absolute;top:0;height:100%;aspect-ratio:768/1152;left:50%;transform:translateX(-50%)}
.map>img:first-child{position:absolute;inset:0;width:100%;height:100%}
.map .tap{width:24%;aspect-ratio:1;transform:translate(-50%,-50%)}
.map .tap.bob{animation:none}.map .tap.bob img{animation:bob 2.6s ease-in-out infinite}
.parent-dot{position:absolute;right:10px;top:10px;width:64px;height:64px;border-radius:50%;border:0;background:rgba(255,255,255,.5);display:grid;place-items:center;z-index:6}

/* 끝 화면 버튼 */
.big{position:absolute;width:34vmin;max-width:150px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:0;box-shadow:0 10px 0 rgba(0,0,0,.14),0 14px 26px rgba(60,40,20,.25)}
.big:active{transform:translateY(5px);box-shadow:0 5px 0 rgba(0,0,0,.14),0 8px 16px rgba(60,40,20,.2)}
.big svg{width:46%;height:46%}
.big.again{left:12%;bottom:14%;background:radial-gradient(circle at 40% 35%,#FFE7B8,#F3B36B)}
.big.rest{right:12%;bottom:14%;background:radial-gradient(circle at 40% 35%,#C9DDF5,#7FA6D6)}

/* 색종이 */
.confetti{position:absolute;pointer-events:none;border-radius:3px;animation:fall 2.6s linear forwards}
@keyframes fall{from{transform:translateY(-40px) rotate(0)}to{transform:translateY(110vh) rotate(540deg)}}

/* 별 반짝 */
.star-dot{position:absolute;border-radius:50%;background:#FFF3C4;box-shadow:0 0 10px #FFF3C4;animation:tw 2.4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.3}50%{opacity:1}}

/* 그림책 */
.book-page{position:absolute;inset:0;display:grid;place-items:center;background:#1D2233}
.book-page img{max-width:100%;max-height:82%;object-fit:contain;border-radius:14px}
.book-next{position:absolute;right:4%;bottom:3%;width:110px;height:110px;border-radius:50%;border:0;background:radial-gradient(circle at 40% 35%,#FFE7B8,#F3B36B);box-shadow:0 8px 0 #D68E4B;display:grid;place-items:center}
.book-next:active{transform:translateY(4px);box-shadow:0 4px 0 #D68E4B}
.book-next svg{width:50%;height:50%;fill:#7A4B24}

/* ─── 부모 영역(글자 OK) ─── */
#overlay{position:absolute;inset:0;background:linear-gradient(180deg,#F8F1E4,#EFE6D5);z-index:20;overflow-y:auto;overscroll-behavior:contain}
.pt{position:sticky;top:0;display:flex;align-items:center;gap:10px;padding:14px 20px;font-weight:700;color:#4A4036;font-size:17px;background:rgba(248,241,228,.94);backdrop-filter:blur(4px);z-index:2}
.pt .x{margin-left:auto;width:44px;height:44px;border-radius:50%;border:0;background:#E6DAC5;color:#7A6A55;font-size:20px;display:grid;place-items:center}
.card{margin:10px 18px;background:#fff;border-radius:22px;box-shadow:0 8px 0 #E7DCC8,0 12px 24px rgba(90,70,40,.12);padding:16px 18px;color:#3F372E}
.card h4{margin:0 0 6px;font-size:14px;color:#8B7C68;font-weight:600}
.eq{font-size:44px;font-weight:800;text-align:center;color:#3F372E;font-variant-numeric:tabular-nums}
.eq span{display:inline-block;min-width:64px;border-bottom:4px solid #EFB48C;margin-left:8px;color:#C77B3F}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pad button{height:64px;border-radius:18px;border:0;background:#F4EBDD;font-size:26px;font-weight:700;color:#3F372E;box-shadow:0 5px 0 #E1D3BC;font-family:inherit}
.pad button:active{transform:translateY(3px);box-shadow:0 2px 0 #E1D3BC}
.pad button.ok{background:#8FBA8A;color:#fff;box-shadow:0 5px 0 #6F9A6B}
.pad button.ghost{background:transparent;box-shadow:none;color:#B5A88F}
.gate-hint{text-align:center;font-size:13px;color:#8B7C68;margin:18px}
.gate-err{animation:wig .4s ease}
.rowi{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #F0E8DA;font-size:14.5px;color:#3F372E}
.rowi:first-of-type{border-top:0}
.rowi img{width:34px;height:34px;object-fit:contain}
.rowi small{color:#8B7C68}
.sw{margin-left:auto;width:50px;height:28px;border-radius:14px;border:0;background:#8FBA8A;position:relative;flex:0 0 auto;transition:background .2s}
.sw:after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:all .2s}
.sw.off{background:#D9D0C0}.sw.off:after{right:25px}
.seg{margin-left:auto;display:flex;background:#F4EBDD;border-radius:12px;padding:3px;font-size:13px}
.seg button{padding:6px 11px;border-radius:9px;border:0;background:none;font-weight:600;color:#8B7C68;font-family:inherit;font-size:13px}
.seg button.on{background:#fff;color:#3F372E;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.chip{display:inline-flex;align-items:center;gap:8px;background:#F4EBDD;border-radius:999px;padding:6px 12px 6px 6px;font-size:13.5px;margin:4px 6px 4px 0;color:#3F372E}
.chip img{width:26px;height:26px;object-fit:contain}
.bar{height:12px;border-radius:6px;background:#F0E8DA;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#8FBA8A,#B9D9A8);border-radius:6px;transition:width .4s}
.tabs{display:flex;gap:8px;margin:4px 18px 0}
.tabs button{flex:1;padding:10px;border-radius:14px;border:0;background:#EFE6D5;font-weight:700;color:#8B7C68;font-family:inherit;font-size:14px}
.tabs button.on{background:#fff;color:#3F372E;box-shadow:0 4px 0 #E7DCC8}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.photo-grid .ph{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#F4EBDD;display:grid;place-items:center}
.photo-grid .ph img{width:100%;height:100%;object-fit:cover}
.photo-grid .ph .del{position:absolute;right:4px;top:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:13px}
.photo-grid .ph .who{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);color:#fff;font-size:12px;text-align:center;padding:2px 0}
.addph{width:100%;padding:12px;border-radius:14px;border:2px dashed #D9CDB6;background:none;color:#8B7C68;font-family:inherit;font-size:14px;margin-top:10px}
.btn{display:block;width:100%;padding:13px;border-radius:16px;border:0;background:#8FBA8A;color:#fff;font-weight:700;font-size:15px;font-family:inherit;box-shadow:0 5px 0 #6F9A6B;margin-top:10px}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #6F9A6B}


/* ─── v2 생동감 레이어 ─── */
#app.punch{animation:punch .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes punch{0%{transform:scale(1)}25%{transform:scale(1.06)}55%{transform:scale(.99)}100%{transform:scale(1)}}
#app.shake{animation:appshake .45s ease}
@keyframes appshake{0%,100%{transform:translate(0,0)}20%{transform:translate(-8px,3px)}40%{transform:translate(7px,-4px)}60%{transform:translate(-5px,2px)}80%{transform:translate(4px,-2px)}}
.sunray{position:absolute;left:50%;top:-26%;width:170vmin;height:170vmin;margin-left:-85vmin;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,244,180,.26) 0 12deg,transparent 12deg 30deg);animation:sunspin 26s linear infinite}
@keyframes sunspin{to{transform:rotate(360deg)}}
.cloudp{position:absolute;pointer-events:none;filter:blur(.5px);opacity:.95;animation:drift linear infinite;
  background:radial-gradient(circle at 30% 60%,#fff 28%,transparent 30%),radial-gradient(circle at 55% 45%,#fff 32%,transparent 34%),radial-gradient(circle at 75% 62%,#fff 26%,transparent 28%),radial-gradient(circle at 50% 72%,#fff 38%,transparent 40%)}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.sparkle{position:absolute;width:10px;height:10px;pointer-events:none;animation:spk 2.8s ease-in-out infinite}
.sparkle:before{content:"";position:absolute;inset:0;background:#FFF6C8;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
@keyframes spk{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(90deg)}}
.idle img{animation:idlejelly 1.6s ease-in-out infinite}
@keyframes idlejelly{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-10px) scale(.98,1.03)}60%{transform:translateY(0) scale(1.04,.96)}}
.dance img{animation:dancev2 .5s ease-in-out 6}
@keyframes dancev2{0%,100%{transform:translateY(0) rotate(0) scale(1.25)}25%{transform:translateY(-34px) rotate(-10deg) scale(1.3)}50%{transform:translateY(0) rotate(0) scale(1.28,1.16)}75%{transform:translateY(-34px) rotate(10deg) scale(1.3)}}
.dim img{transition:all .4s;opacity:.25;filter:grayscale(.4)}
.burstfx{position:absolute;width:150vmin;height:150vmin;left:50%;top:50%;margin:-75vmin 0 0 -75vmin;border-radius:50%;pointer-events:none;
  background:conic-gradient(#FF9AA2 0 30deg,#FFD3A5 30deg 60deg,#FFF3A3 60deg 90deg,#B5EAAF 90deg 120deg,#A5D8FF 120deg 150deg,#D5B5FF 150deg 180deg,#FF9AA2 180deg 210deg,#FFD3A5 210deg 240deg,#FFF3A3 240deg 270deg,#B5EAAF 270deg 300deg,#A5D8FF 300deg 330deg,#D5B5FF 330deg 360deg);
  -webkit-mask:radial-gradient(circle,transparent 26%,#000 27%);mask:radial-gradient(circle,transparent 26%,#000 27%);
  animation:burstv2 2.8s ease-out forwards}
@keyframes burstv2{0%{opacity:0;transform:scale(.2) rotate(0)}12%{opacity:.95}100%{opacity:0;transform:scale(1.25) rotate(160deg)}}
.ptfx{position:absolute;pointer-events:none;will-change:transform,opacity}
.ptfx.star{background:#FFE28A;clip-path:polygon(50% 0,62% 38%,100% 38%,69% 60%,80% 100%,50% 76%,20% 100%,31% 60%,0 38%,38% 38%);filter:drop-shadow(0 0 6px #FFE28A)}
.balloonfx{position:absolute;pointer-events:none;width:52px;height:66px;border-radius:50% 50% 50% 50%/56% 56% 44% 44%;animation:balloonup 3.4s ease-in forwards}
.balloonfx:after{content:"";position:absolute;left:50%;top:100%;width:2px;height:44px;background:rgba(90,70,50,.5)}
@keyframes balloonup{0%{transform:translateY(30vh);opacity:0}12%{opacity:1}100%{transform:translateY(-120vh);opacity:1}}
.tori-cheer-in{position:absolute;left:0;right:0;margin:0 auto;bottom:-4%;width:56%;max-width:260px;pointer-events:none;transform:translateY(120%);z-index:7;filter:drop-shadow(0 10px 12px rgba(60,40,20,.3))}
.tori-cheer-in.in{animation:torin 2.9s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes torin{0%{transform:translateY(120%)}18%{transform:translateY(0)}30%{transform:translateY(-6%)}42%{transform:translateY(0)}54%{transform:translateY(-6%)}66%{transform:translateY(0)}84%{transform:translateY(0)}100%{transform:translateY(120%)}}
.notefly{position:absolute;pointer-events:none;font-size:36px;color:#E07A3F;text-shadow:0 2px 0 #fff;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.sunray,.cloudp,.sparkle,.idle img,.dance img{animation:none}}

.exit-btn{position:absolute;right:10px;top:10px;width:68px;height:68px;border-radius:50%;border:0;background:rgba(255,255,255,.6);display:grid;place-items:center;z-index:9;box-shadow:0 4px 10px rgba(60,40,20,.18)}
.exit-btn svg{width:34px;height:34px}
.exit-btn:active{transform:scale(.9)}

.fximg{position:absolute;pointer-events:none;will-change:transform,opacity;z-index:8}
.wobble img{animation:wobble 2.2s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:translateX(0) scale(1,1)}25%{transform:translateX(-6px) scale(1.03,.97)}50%{transform:translateX(0) scale(.97,1.03)}75%{transform:translateX(6px) scale(1.02,.98)}}
.boing{animation:boing .3s cubic-bezier(.2,1.8,.4,1)}
@keyframes boing{0%{transform:scale(1,1)}35%{transform:scale(1.12,.8)}70%{transform:scale(.94,1.08)}100%{transform:scale(1,1)}}
#app.thump{animation:thump .28s ease}
@keyframes thump{0%,100%{transform:translateY(0)}40%{transform:translateY(5px)}}

/* X → 홈 확인 모달 */
.home-ask{position:absolute;inset:0;background:rgba(40,32,20,.45);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:40}
.ha-card{background:#FFF9EF;border-radius:28px;padding:22px 20px 18px;width:min(82%,300px);display:grid;gap:12px;justify-items:center;box-shadow:0 10px 0 #E1D3BC,0 18px 40px rgba(60,40,20,.4)}
.ha-card img{width:110px;height:110px;object-fit:contain}
.ha-card button{width:100%;min-height:64px;border:0;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;font-size:18px;font-weight:800}
.ha-card svg{width:30px;height:30px;flex:0 0 auto}
.ha-go{background:linear-gradient(180deg,#FFE7B8,#F3B36B);color:#5A3410;box-shadow:0 6px 0 #D68E4B}
.ha-stay{background:linear-gradient(180deg,#D9EDCB,#A9CE96);color:#2F5E2B;box-shadow:0 6px 0 #7FA86C}
.ha-card button:active{transform:translateY(4px);box-shadow:none}

/* 동화 나라 */
.tale-card{position:absolute;left:50%;transform:translateX(-50%);width:78%;max-width:340px;aspect-ratio:3/2;border:8px solid #fff;border-radius:26px;padding:0;background:#fff;overflow:hidden;box-shadow:0 10px 0 rgba(120,90,50,.35),0 16px 30px rgba(60,40,20,.35)}
.tale-card img{width:100%;height:100%;object-fit:cover}
.tale-card:active{transform:translateX(-50%) scale(.96)}
.book-nav{position:absolute;bottom:3%;width:110px;height:110px;border-radius:50%;border:0;display:grid;place-items:center;box-shadow:0 8px 0 rgba(0,0,0,.2)}
.book-nav svg{width:52px;height:52px;fill:#5A3410}
.book-prev{left:4%;background:radial-gradient(circle at 40% 35%,#EDE3D2,#CBBBA0)}
.book-nextb{right:4%;background:radial-gradient(circle at 40% 35%,#FFE7B8,#F3B36B)}
.book-nav:active{transform:translateY(4px);box-shadow:0 4px 0 rgba(0,0,0,.2)}
.book-dots{position:absolute;left:0;right:0;top:4%;display:flex;gap:7px;justify-content:center}
.book-dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.35)}
.book-dots i.on{background:#F3C98F}