/* ★10/31 10차 — 만3 눈높이 · 새 놀이 5가지 */

/* 점 잇기 점 : 88px 이상 (세 살 손가락) */
.dot-btn { width: 88px !important; height: 88px !important; margin: -44px 0 0 -44px !important; }

/* 놀이터 32칸 : 8칸 × 4줄 */
.acts.n29, .acts.n30, .acts.n31, .acts.n32, .acts.n33 { grid-template-columns: repeat(8, 1fr); gap: 8px 10px; padding: 0 14px 60px; }
.acts.n29 .act-card, .acts.n30 .act-card, .acts.n31 .act-card, .acts.n32 .act-card, .acts.n33 .act-card { height: 138px; gap: 0; padding: 4px; min-width: 0 !important; }
.acts.n29 .act-icon, .acts.n30 .act-icon, .acts.n31 .act-icon, .acts.n32 .act-icon, .acts.n33 .act-icon { width: 86px !important; height: 86px !important; }
.acts.n29 .act-stars, .acts.n30 .act-stars, .acts.n31 .act-stars, .acts.n32 .act-stars, .acts.n33 .act-stars, .acts.n29 .act-new, .acts.n30 .act-new, .acts.n31 .act-new, .acts.n32 .act-new, .acts.n33 .act-new { display: none; }
.acts.n29 .act-name, .acts.n30 .act-name, .acts.n31 .act-name, .acts.n32 .act-name, .acts.n33 .act-name { font-size: 19px !important; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.acts.n29 .act-card:nth-child(n+8), .acts.n30 .act-card:nth-child(n+8), .acts.n31 .act-card:nth-child(n+8), .acts.n32 .act-card:nth-child(n+8), .acts.n33 .act-card:nth-child(n+8) { animation-delay: .3s !important; }
@media (max-height: 810px) { .acts.n29 .act-card, .acts.n30 .act-card, .acts.n31 .act-card, .acts.n32 .act-card, .acts.n33 .act-card { height: 132px; } }
/* 섬 15·12칸 */
.acts.n15 { grid-template-columns: repeat(8, 1fr); gap: 12px; padding: 4px 18px 60px; }
.acts.n15 .act-card { height: 232px; padding: 6px; min-width: 0 !important; } .acts.n15 .act-icon { width: 96px; height: 96px; } .acts.n15 .act-name { font-size: 21px !important; line-height: 1.1; }
@media (max-height: 810px) { .acts.n15 .act-card { height: 222px; } }

/* ① 찾을 친구 (숨바꼭질) */
.w10-find { display: flex; align-items: center; gap: 6px; padding: 6px 18px 6px 10px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 6px 0 rgba(0,0,0,.08); animation: w10둥 2.2s ease-in-out infinite; pointer-events: none; z-index: 3; }
.w10-find-glass { font-size: 44px; } .w10-find-glass img { width: 52px; height: 52px; }
.w10-find-pic img, .w10-find-pic .emo { width: 86px !important; height: 86px !important; font-size: 72px; object-fit: contain; display: block; }
@keyframes w10둥 { 50% { translate: 0 -6px; } }
.w10-ask { position: relative; }
.w10-ask-q { position: absolute; right: -10px; top: -14px; width: 54px; height: 54px; border-radius: 50%; background: #FF922B; color: #fff; font-size: 38px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 rgba(0,0,0,.12); }

/* 공통 */
.w10-thing { width: 150px; height: 150px; border-radius: 30px; display: flex; align-items: center; justify-content: center; touch-action: none; }
.w10-thing img, .w10-thing .emo { width: 112px; height: 112px; font-size: 96px; object-fit: contain; pointer-events: none; }
.w10-gone { animation: w10사라짐 .3s ease-in forwards; pointer-events: none; }
@keyframes w10사라짐 { to { scale: 0; opacity: 0; } }
.w10-pop { animation: w10팡 .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes w10팡 { 40% { scale: 1.15; } }
.w10-g-pic { width: 100%; height: 100%; object-fit: contain; display: block; filter: brightness(0) opacity(.28); font-size: 110px; transition: filter .4s; }
.found .w10-g-pic { filter: none; }

/* (1) 그림자 짝꿍 */
.k-그림자짝 { justify-content: center; }
.w10-sh { width: min(1000px, 90vw); display: flex; flex-direction: column; gap: 30px; }
.w10-sh-row { display: flex; justify-content: center; gap: 28px; }
.w10-ghost { width: 170px; height: 170px; border-radius: 34px; border: 5px dashed rgba(120,100,80,.35); background: rgba(255,255,255,.55); padding: 14px; box-sizing: border-box; }
.w10-ghost.found { border: 5px solid #8CE0A8; background: #E6F8EC; }

/* (2) 콩이 빵집 */
.k-빵집 { justify-content: center; }
.w10-bake { width: min(1040px, 92vw); display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 16px 24px; align-items: center; }
.w10-guest { display: flex; align-items: center; gap: 10px; }
.w10-guest-pic img, .w10-guest-pic .emo { width: 150px; height: 150px; font-size: 130px; object-fit: contain; display: block; }
.w10-guest.happy .w10-guest-pic { animation: w10팡 .6s 2; }
.w10-guest.w10-no .w10-guest-pic { animation: w10도리 .5s; }
@keyframes w10도리 { 25% { rotate: -10deg; } 75% { rotate: 10deg; } }
.w10-bubble { position: relative; flex: 1; min-height: 120px; padding: 12px 16px; border-radius: 30px; background: #fff; box-shadow: 0 8px 0 rgba(0,0,0,.08); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; }
.w10-bubble::before { content: ''; position: absolute; left: -18px; top: 50%; margin-top: -14px; border: 14px solid transparent; border-right: 20px solid #fff; border-left: 0; }
.w10-ord { display: flex; gap: 4px; }
.w10-ord i { width: 66px; height: 66px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #FFF4E0; transition: background .2s; }
.w10-ord i img, .w10-ord i .emo { width: 56px; height: 56px; font-size: 48px; object-fit: contain; }
.w10-ord i.got { background: #D3F9D8; box-shadow: 0 0 0 3px #8CE0A8 inset; }
.w10-box { position: relative; height: 200px; border-radius: 26px; background: linear-gradient(180deg, #F6D8B0, #E9BD85); box-shadow: 0 10px 0 rgba(150,100,50,.25), inset 0 0 0 6px rgba(255,255,255,.4); }
.w10-box-in { position: absolute; inset: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-end; justify-content: center; }
.w10-in { width: 90px; height: 90px; border-radius: 22px; display: flex; align-items: center; justify-content: center; animation: w10쏙 .35s cubic-bezier(.3,1.6,.5,1); }
.w10-in img, .w10-in .emo { width: 70px; height: 70px; font-size: 60px; object-fit: contain; pointer-events: none; }
@keyframes w10쏙 { from { translate: 0 -60px; scale: .6; } }
.w10-box-lid { position: absolute; left: -8px; right: -8px; top: -30px; height: 34px; border-radius: 14px; background: #E0A96A; transform-origin: center bottom; transform: scaleY(0); opacity: 0; transition: transform .35s, opacity .2s; }
.w10-box.closed .w10-box-lid { transform: none; opacity: 1; }
.w10-shelf { grid-column: 1 / -1; display: flex; justify-content: center; gap: 16px; padding: 12px; border-radius: 26px; background: rgba(255,255,255,.65); }
.w10-bread { width: 132px; height: 132px; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.w10-bread img, .w10-bread .emo { width: 84px; height: 84px; font-size: 72px; object-fit: contain; pointer-events: none; }
.w10-bread .lbl { font-size: 18px; }

/* (3) 동물 병원 */
.k-병원 { justify-content: center; }
.w10-vet { display: flex; align-items: center; justify-content: center; gap: 60px; }
.w10-pet { position: relative; width: min(420px, 52vh); height: min(420px, 52vh); border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0 55%, #E7F5FF 70%, transparent 72%); }
.w10-pet-pic img, .w10-pet-pic .emo { width: 100%; height: 100%; object-fit: contain; display: block; font-size: 320px; filter: drop-shadow(0 12px 10px rgba(0,0,0,.15)); }
.w10-tear { position: absolute; left: 40%; top: 48%; font-size: 40px; animation: w10눈물 1.4s ease-in infinite; pointer-events: none; }
.w10-tear img { width: 44px; height: 44px; }
@keyframes w10눈물 { 0% { translate: 0 0; opacity: 1; } 100% { translate: 0 40px; opacity: 0; } }
.w10-pet.well { animation: w10팡 .6s 2; }
.w10-sore { position: absolute; width: 96px !important; height: 96px !important; min-width: 0 !important; margin: -48px 0 0 -48px; border-radius: 50% !important; padding: 0; background: transparent !important; box-shadow: none !important; }
.w10-sore i { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(255,80,80,.95) 0 30%, rgba(255,120,120,.55) 55%, transparent 72%); animation: w10아파 1s ease-in-out infinite; }
@keyframes w10아파 { 50% { scale: 1.25; } }
.w10-sore.w10-look i { animation: w10아파 .25s ease-in-out 4; }
.w10-sore.healed { pointer-events: none; }
.w10-band, .w10-band-on { position: relative; display: block; }
.w10-band { width: 150px !important; height: 110px !important; border-radius: 28px; display: flex; align-items: center; justify-content: center; touch-action: none; }
.w10-band i, .w10-band-on i { display: block; width: 110px; height: 40px; border-radius: 20px; background: #F5C99B; box-shadow: inset 0 0 0 3px rgba(0,0,0,.06); position: relative; rotate: -20deg; }
.w10-band i::after, .w10-band-on i::after { content: ''; position: absolute; left: 34%; right: 34%; top: 6px; bottom: 6px; border-radius: 6px; background: #EBAE76 radial-gradient(circle, rgba(0,0,0,.15) 1.5px, transparent 2px) 0 0 / 7px 7px; }
.w10-band-on { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: w10쏙 .3s; }
.w10-band-on i { width: 84px; height: 32px; }
.w10-kit { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; border-radius: 30px; background: rgba(255,255,255,.8); box-shadow: 0 8px 0 rgba(0,0,0,.08); }

/* (4) 똑같이 쌓기 */
.k-탑쌓기 { justify-content: center; }
.w10-tw { display: grid; grid-template-columns: 220px 220px auto; gap: 40px; align-items: end; }
.w10-model, .w10-build { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: min(430px, 52vh); border-radius: 30px; padding: 12px; background: rgba(255,255,255,.6); }
.w10-model { background: rgba(255,255,255,.85); }
.w10-stack { display: flex; flex-direction: column; align-items: center; }
.w10-blk { display: block; width: 150px; height: 74px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 75%, white), var(--c) 60%, color-mix(in srgb, var(--c) 85%, black)); box-shadow: inset 0 -6px 0 rgba(0,0,0,.12), 0 3px 0 rgba(0,0,0,.08); position: relative; }
.w10-blk::before { content: ''; position: absolute; left: 28px; right: 28px; top: -10px; height: 14px; border-radius: 8px; background: color-mix(in srgb, var(--c) 80%, white); }
.w10-model .w10-blk.now { outline: 6px solid #fff; box-shadow: 0 0 0 10px #FFD43B, 0 0 22px #FFD43B; animation: w10숨 1s ease-in-out infinite; z-index: 1; }
.w10-model .w10-blk.done { opacity: .45; }
@keyframes w10숨 { 50% { scale: 1.05; } }
.w10-blk.drop { animation: w10떨어짐 .35s cubic-bezier(.3,1.4,.5,1); }
@keyframes w10떨어짐 { from { translate: 0 -160px; } }
.w10-base { display: block; width: 190px; height: 16px; border-radius: 8px; background: #B08968; margin-top: 2px; }
.w10-stack.w10-wob { animation: w10도리 .45s; }
.w10-build.w10-yay { box-shadow: 0 0 0 6px #8CE0A8 inset; }
.w10-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-self: center; }
.w10-cbtn { width: 170px; height: 112px; border-radius: 26px; display: flex; align-items: center; justify-content: center; }
.w10-cbtn .w10-blk { width: 128px; height: 64px; pointer-events: none; }

/* (5) 놀이터 어디에? */
.k-어디에 { justify-content: center; gap: 14px; }
.w10-park { width: min(1000px, 90vw); display: flex; flex-direction: column; gap: 14px; }
.w10-scene { position: relative; height: min(400px, calc(100vh - 380px)); min-height: 320px; border-radius: 34px; background: linear-gradient(180deg, rgba(255,255,255,.35) 0 72%, rgba(150,210,120,.55) 72%); }
.w10-slide { position: absolute; left: 22%; bottom: 6%; width: 46%; height: 82%; }
.w10-slide img, .w10-slide .emo { width: 100%; height: 100%; object-fit: contain; display: block; font-size: 260px; }
.w10-crate { position: absolute; right: 4%; bottom: 8%; width: 26%; height: 46%; }
.w10-crate img, .w10-crate .emo { width: 100%; height: 100%; object-fit: contain; display: block; font-size: 160px; }
.w10-spot { position: absolute; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; border: 5px dashed rgba(255,140,90,.8); background: rgba(255,255,255,.45); padding: 10px; box-sizing: border-box; z-index: 2; animation: w10숨 1.6s ease-in-out infinite; }
.w10-spot.found { border: 5px solid #8CE0A8; animation: none; }
.w10-friends { display: flex; justify-content: center; gap: 30px; }
.w10-friends .w10-thing { width: 136px; height: 136px; }