:root{
  --ink:#2B2A4C; --sub:#4A5A7A; --sky:#BFE6FF; --cream:#FFF6E4;
  --wood:#E9C38C; --wood-d:#D4A35F; --wood-s:#B9874A; --slot:#F6E9D3;
  --cell:48px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#E8F6FF;overscroll-behavior:none}
body{font-family:'Jua',system-ui,sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font-family:inherit;color:inherit;cursor:pointer;border:none}
.latin{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800}
.hidden{display:none!important}
#app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#BFE6FF 0%,#E8F6FF 55%,#FFF6E4 100%)}
.screen{position:absolute;inset:0;display:none;flex-direction:column;gap:12px;
  padding:max(14px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom))}
.screen.active{display:flex}

/* 공통 */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}
.pill{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 14px;box-shadow:0 4px 0 #9CC9E8;font-size:16px;min-height:44px}
.pill.grow{flex:1}
.center-txt{justify-content:center;font-size:20px}
.avatar{width:32px;height:32px;border-radius:50%;background:#FFD43B;display:flex;align-items:center;justify-content:center;margin-left:-8px}
.star-ico{color:#FFB300;font-size:20px}
.sq-btn{width:48px;height:48px;border-radius:16px;background:#fff;box-shadow:0 4px 0 #9CC9E8;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sq-spacer{width:48px}
svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sq-btn svg{stroke:var(--ink)}
.sq-btn svg.fill{fill:var(--ink);stroke:none}
.bar{flex:1;height:14px;border-radius:999px;background:#E3EEF7;overflow:hidden}
#barFill{height:100%;width:0;background:#69DB7C;border-radius:999px;transition:width .3s}
#progressLabel{color:var(--sub);font-size:15px;white-space:nowrap}
#stageLabel{white-space:nowrap}

/* 홈 */
.cloud{position:absolute;background:#fff;border-radius:40px;opacity:.9}
.c1{left:-30px;top:130px;width:140px;height:50px}.c2{right:-20px;top:220px;width:120px;height:42px}
.logo{display:flex;flex-direction:column;align-items:center;margin-top:12px;position:relative}
.logo-blocks{display:flex;gap:6px}
.logo-blocks span{width:54px;height:54px;border-radius:14px;background:var(--bg);box-shadow:inset 0 -6px 0 rgba(0,0,0,.12),0 4px 0 var(--sh);
  display:flex;align-items:center;justify-content:center;font-family:'Baloo 2';font-weight:800;font-size:36px;color:#fff}
.logo h1{margin:14px 0 0;font-size:44px;font-weight:400}
.logo p{margin:0;font-size:17px;color:var(--sub)}
.mascot-row{display:flex;justify-content:center;align-items:flex-end;gap:12px;position:relative;min-height:80px}
.mascot-row.small{min-height:60px}
.bubble{background:#fff;border-radius:16px;padding:8px 12px;font-size:15px;box-shadow:0 3px 0 #9CC9E8;margin-bottom:30px}
.caterpillar{display:flex;align-items:flex-end;animation:wiggle 2.4s ease-in-out infinite}
.caterpillar i{width:40px;height:40px;border-radius:50%;background:#8CE99A;border:3px solid #51CF66;margin-right:-10px}
.caterpillar b{width:62px;height:62px;border-radius:50%;background:#A9E34B;border:3px solid #74B816;position:relative;display:flex;align-items:center;justify-content:center;gap:10px}
.caterpillar em{width:10px;height:14px;border-radius:6px;background:var(--ink)}
.caterpillar u{position:absolute;bottom:11px;left:20px;width:20px;height:9px;border-radius:0 0 12px 12px;background:#E8590C}
@keyframes wiggle{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.menu{display:flex;flex-direction:column;gap:12px;margin-top:auto;position:relative}
.level-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#fff;padding:6px;border-radius:18px;box-shadow:0 4px 0 #C9D6E3}
.lv{background:transparent;border-radius:14px;min-height:44px;font-size:16px;color:var(--sub)}
.lv.active{background:#FFD43B;color:var(--ink)}
.big-btn{display:flex;align-items:center;gap:14px;border-radius:24px;padding:14px 20px;min-height:64px;color:#fff;text-align:left;transition:transform .08s}
.big-btn:active,.sub-btn:active,.ctl:active,.sq-btn:active{transform:translateY(4px);box-shadow:none}
.big-btn.center{justify-content:center;font-size:24px}
.big-btn.red{background:#FF8787;box-shadow:0 6px 0 #D9534F}
.big-btn.blue{background:#4DABF7;box-shadow:0 6px 0 #1C7ED6}
.big-btn.green{background:#51CF66;box-shadow:0 6px 0 #2F9E44}
.big-btn .ico{width:52px;height:52px;border-radius:14px;background:#fff;color:#E03131;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2';font-weight:800;font-size:26px;flex-shrink:0}
.big-btn .txt{display:flex;flex-direction:column}
.big-btn b{font-weight:400;font-size:24px}
.big-btn small{font-size:14px;opacity:.95}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sub-btn{background:#fff;border-radius:18px;min-height:54px;font-size:18px;box-shadow:0 4px 0 #C9D6E3}

/* 게임 */
.info-row{display:flex;gap:10px}
.card{background:#fff;border-radius:18px;padding:8px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 0 #C9D6E3}
.card.grow{flex:1}
.card small{font-size:13px;color:var(--sub);white-space:nowrap}
.card b{font-size:22px;letter-spacing:2px}
.card.next{flex-direction:column;gap:2px;padding:6px 10px;min-width:78px}
.next-cells{display:flex;gap:3px}
.next-cells .cell{--cell:26px;font-size:17px;border-radius:8px}
.word-card{background:#fff;border-radius:24px;padding:10px 14px;display:flex;align-items:center;gap:14px;box-shadow:0 6px 0 #F2B8C6}
.word-card .pic{width:76px;height:76px;border-radius:20px;background:#FFF0F0;display:flex;align-items:center;justify-content:center;font-size:50px;flex-shrink:0}
.word-txt{flex:1;display:flex;flex-direction:column}
.word-txt span{font-size:22px;color:var(--sub)}
.word-txt b{font-size:40px;line-height:1;color:#E03131;letter-spacing:1px}
.word-txt b .done{color:#E03131}.word-txt b .todo{color:#F1BFC6}
.speak{width:52px;height:52px;border-radius:50%;background:#FFD43B;box-shadow:0 4px 0 #F2B705;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.speak svg{stroke:var(--ink);stroke-width:2.4}.speak svg .solid{fill:var(--ink)}
.board-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.frame{position:relative;padding:10px;border-radius:24px;background:var(--wood);box-shadow:inset 0 0 0 4px var(--wood-d),0 8px 0 var(--wood-s);display:flex;flex-direction:column;gap:8px}
.board{display:grid;gap:4px}
.cell{width:var(--cell);height:var(--cell);border-radius:calc(var(--cell)*.26);background:var(--slot);display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:calc(var(--cell)*.6);line-height:1;color:var(--ink)}
.cell.blk{background:var(--bg);box-shadow:inset 0 calc(var(--cell)*-.12) 0 var(--sh),inset 0 calc(var(--cell)*.08) 0 rgba(255,255,255,.55)}
.cell.ghost{background:transparent;border:3px dashed #C9A36B}
.cell.col-hint{background:#FFF1B8}
.cell.pop{animation:pop .35s ease-out forwards}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25);box-shadow:0 0 0 4px #FFD43B,0 0 18px 6px rgba(255,212,59,.9)}100%{transform:scale(0);opacity:0}}
.shelf{background:#C98F4F;border-radius:14px;padding:6px;display:flex;flex-direction:column;gap:4px}
.shelf small{font-size:12px;color:#fff;text-align:center}
.shelf-cells{display:grid;gap:4px}
.cell.slot{background:rgba(255,255,255,.35);border:3px dashed #fff;color:rgba(255,255,255,.9)}
.cell.slot.target{box-shadow:0 0 0 3px #FFD43B,0 0 14px 4px rgba(255,212,59,.8);animation:glow 1s ease-in-out infinite alternate}
.cell.slot.filled{background:#fff;border:none;box-shadow:inset 0 -5px 0 #F1D5DC;color:#E03131}
.cell.slot.empty{background:transparent;border:none}
@keyframes glow{to{box-shadow:0 0 0 3px #FFD43B,0 0 22px 8px rgba(255,212,59,.95)}}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.toast{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.8);background:#fff;border-radius:18px;padding:10px 18px;font-size:22px;
  box-shadow:0 4px 0 #C9D6E3;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap;z-index:5}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.toast .latin{font-size:26px;color:#7048E8}
.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.controls.three{grid-template-columns:repeat(3,1fr)}
.ctl{height:68px;border-radius:22px;display:flex;align-items:center;justify-content:center}
.ctl svg{width:34px;height:34px}
.ctl svg.dark{stroke:var(--ink);stroke-width:2.6}
.ctl.purple{background:#B197FC;box-shadow:0 6px 0 #7950F2}
.ctl.yellow{background:#FFC34D;box-shadow:0 6px 0 #E09A1A}
.ctl.green{background:#69DB7C;box-shadow:0 6px 0 #2F9E44}
.layer{position:absolute;inset:0;background:rgba(43,42,76,.45);display:flex;align-items:center;justify-content:center;z-index:10;padding:24px}
.dialog{background:#fff;border-radius:28px;padding:24px;width:100%;max-width:320px;display:flex;flex-direction:column;gap:14px;text-align:center}
.dialog h2{margin:0;font-weight:400;font-size:30px}

/* 단어 모드 테마 */
#game.word-mode{background:linear-gradient(180deg,#FFE3EC 0%,#FFF4F7 55%,#FFF6E4 100%)}
#game.word-mode .ctl.purple{background:#F783AC;box-shadow:0 6px 0 #D6336C}

/* 클리어 */
#clear{background:linear-gradient(180deg,#D3C4FF 0%,#EDE6FF 50%,#FFF6E4 100%);align-items:stretch}
.clear-card{background:#fff;border-radius:32px;padding:24px 18px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 8px 0 #B9A6F0;margin-top:56px;position:relative}
.stars{display:flex;align-items:flex-end;gap:4px;margin-top:-70px}
.stars span{font-size:64px;color:#FFC107;text-shadow:0 3px 0 #E0A000;animation:starIn .5s both}
.stars span.big{font-size:90px;animation-delay:.15s}
.stars span:last-child{animation-delay:.3s}
@keyframes starIn{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1)}}
.clear-card h1{margin:0;font-size:40px;font-weight:400;color:#7048E8}
.clear-card p{margin:0;font-size:18px;color:var(--sub)}
.learned{width:100%;background:#F8F4FF;border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:8px}
.learned small{color:var(--sub);font-size:14px}
.learned-cells{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.learned-cells .cell{--cell:54px;width:auto;min-width:54px;padding:0 8px;font-size:24px}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:12px;height:16px;border-radius:4px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

/* 단어장 */
.hint{margin:0;text-align:center;color:var(--sub)}
.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow-y:auto;padding-bottom:8px}
.book-item{background:#fff;border-radius:18px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 4px 0 #C9D6E3}
.book-item .e{font-size:38px}
.book-item b{font-size:20px;color:#E03131}
.book-item span{font-size:14px;color:var(--sub)}
.book-item.locked{opacity:.45}

.squirrel{animation:wiggle 2.4s ease-in-out infinite;line-height:0}
.squirrel svg{width:auto;height:auto;stroke:none}
.acorns{position:absolute;inset:0;pointer-events:none}
.acorns svg{width:auto;height:auto;stroke:none}
.mascot-row .bubble{position:relative;z-index:1}

/* 짝꿍 단어 카드 */
.word-pop{position:absolute;left:50%;top:44%;width:min(250px,80%);transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;
  background:#fff;border-radius:28px;padding:16px 16px 18px;box-shadow:0 8px 0 #C9D6E3,0 10px 30px rgba(43,42,76,.25);
  display:flex;flex-direction:column;align-items:center;gap:2px;z-index:6;transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.word-pop.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.wp-letters{background:var(--bg);box-shadow:inset 0 -5px 0 var(--sh);border-radius:14px;padding:2px 14px;font-size:26px;color:#2B2A4C;margin-top:-38px}
.wp-pic{font-size:84px;line-height:1.15}
.wp-ko{font-size:26px;color:#4A5A7A}
.wp-en{font-size:40px;line-height:1;color:#2B2A4C}
.wp-en em{font-style:normal;color:#E03131}

/* 플랫 아이콘 · 두 줄 표기 */
.ico-img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.word-card .pic{padding:10px}
.wp-pic{width:110px;height:110px;margin:6px 0 4px;background:#F3F8FF;border-radius:28px;padding:14px;box-sizing:border-box}
.toast .two{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.toast .two span{font-size:20px;color:#4A5A7A}
.toast .two b{font-size:30px;color:#7048E8;font-weight:800}
.learned-cells .cell.rich{height:auto;min-height:58px;padding:6px 10px;gap:6px;font-size:20px}
.li-img{width:34px;height:34px}
.li-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.li-txt small{font-family:'Jua',sans-serif;font-weight:400;font-size:13px;color:#2B2A4C;opacity:.8}
.book-item .e{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:34px}

/* 영어 위, 한글 아래(작게) */
.wp-en{margin-top:2px}
.wp-ko{font-size:18px;margin-top:4px}
#wordKo{font-size:16px;margin-top:4px}
.word-txt b span{font-size:inherit;color:inherit}
.word-txt b .todo{color:#F1BFC6}
.toast .two span{font-size:15px;margin-top:2px}
.li-txt small{font-size:11px;margin-top:2px}
.book-item span{font-size:12px}

/* 부모님 메뉴 */
.parent-link{background:transparent;color:var(--sub);font-size:14px;min-height:40px;text-decoration:underline;text-underline-offset:3px}
.gate-card,.p-card{background:#fff;border-radius:24px;padding:20px;box-shadow:0 4px 0 #C9D6E3;display:flex;flex-direction:column;gap:12px}
.gate-card{margin-top:24px;align-items:stretch;text-align:center}
.gate-card p{margin:0;color:var(--sub);line-height:1.5}
.gate-card b{font-size:40px}
.gate-card input{font-family:'Baloo 2',sans-serif;font-size:28px;text-align:center;border:3px solid #C9D6E3;border-radius:16px;padding:8px;min-height:56px}
.gate-card small{color:#E03131;min-height:18px}
.parent-scroll{display:flex;flex-direction:column;gap:14px;overflow-y:auto;padding-bottom:12px}
.p-card h3{margin:0;font-weight:400;font-size:22px}
.p-card p{margin:0;color:var(--sub);line-height:1.55;font-size:15px}
.donate{display:flex;flex-direction:column;gap:10px}
.don{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:16px;text-decoration:none;font-size:17px}
.don.toss{background:#3182F6;color:#fff;box-shadow:0 4px 0 #1B64DA}
.don.kakao{background:#FEE500;color:#191919;box-shadow:0 4px 0 #D9C300}
.don.bmc{background:#FFDD00;color:#191919;box-shadow:0 4px 0 #D9BC00}
.small-print p{font-size:13px}