/* 꾸미기: 맨 마지막에 불러와서 다른 모양을 덮어씀 */
body {
  font-family: ui-rounded, "Apple SD Gothic Neo", -apple-system, sans-serif;
  background: linear-gradient(160deg, #8ec5fc 0%, #e0c3fc 55%, #ffd6e8 100%) fixed;
  min-height: 100vh;
}
body::before {
  content: "⭐ ☁️ 🌈 ✏️ ⭐ ☁️ 🌈";
  position: fixed; left: 0; right: 0; bottom: 12px; text-align: center;
  font-size: 2rem; letter-spacing: 1em; opacity: 0.35; pointer-events: none; z-index: 0;
}
#app { position: relative; z-index: 1; }
h1 {
  font-size: 2.8rem; font-weight: 900; color: #fff;
  text-shadow: 3px 3px 0 #5b8cff, 6px 6px 0 rgba(0,0,0,0.12);
  animation: title-float 2.5s ease-in-out infinite;
}
h2 { color: #4a3f8f; font-weight: 900; }
#app > p:not(.msg) { font-size: 1.4rem; font-weight: 800; color: #4a3f8f; }

/* 아이 버튼: 아이마다 색과 동물 */
.kid {
  position: relative; min-width: 190px; min-height: 170px; padding-top: 72px;
  border-radius: 28px; font-size: 1.8rem; font-weight: 800; color: #fff;
  box-shadow: 0 8px 0 rgba(0,0,0,0.18), 0 14px 24px rgba(0,0,0,0.15);
  transition: transform 0.12s, box-shadow 0.12s;
}
.kid::before { position: absolute; top: 14px; left: 0; right: 0; font-size: 3.2rem; }
.kid:nth-child(1) { background: linear-gradient(145deg, #5b8cff, #7b5cff); }
.kid:nth-child(1)::before { content: "🦁"; }
.kid:nth-child(2) { background: linear-gradient(145deg, #ff7eb3, #ff5e7e); }
.kid:nth-child(2)::before { content: "🐰"; }
.kid:nth-child(3) { background: linear-gradient(145deg, #34d399, #10b981); }
.kid:nth-child(3)::before { content: "🐶"; }
.kid small {
  display: block; width: fit-content; margin: 8px auto 0; padding: 4px 12px;
  border-radius: 999px; background: rgba(255,255,255,0.28); font-size: 1rem;
}
.kid:active { transform: translateY(6px); box-shadow: 0 2px 0 rgba(0,0,0,0.18); }

/* 난이도 버튼 */
.lv {
  min-height: 150px; border-radius: 28px; font-size: 1.8rem; font-weight: 800;
  box-shadow: 0 8px 0 rgba(0,0,0,0.18), 0 14px 24px rgba(0,0,0,0.15);
  transition: transform 0.12s, box-shadow 0.12s;
}
.lv.easy { background: linear-gradient(145deg, #4ade80, #16a34a); }
.lv.normal { background: linear-gradient(145deg, #ffc857, #ff8c1a); }
.lv.hard { background: linear-gradient(145deg, #ff6b8b, #c026d3); }
.lv:active { transform: translateY(6px); box-shadow: 0 2px 0 rgba(0,0,0,0.18); }
@media (hover: hover) { .kid:hover, .lv:hover { transform: translateY(-4px); } }

/* 위쪽 막대, 버튼, 콤보박스 */
.topbar { background: rgba(255,255,255,0.75); border-radius: 22px; padding: 10px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.back { border-radius: 999px; background: #fff; border: 3px solid #c9d3ff; font-weight: 800; color: #4a3f8f; }
.who { font-size: 1.6rem; color: #5b3fd1; }
select { border-radius: 999px; border: 3px solid #7b5cff; font-weight: 800; color: #4a3f8f; }

/* 게임 카드 */
.game { border-radius: 30px; background: rgba(255,255,255,0.95); border: 4px solid #fff;
  box-shadow: 0 10px 0 rgba(123,92,255,0.25), 0 20px 40px rgba(0,0,0,0.12); }

/* 쉬움 자판 */
.key { border-radius: 14px; background: #fff; color: #4a3f8f; box-shadow: 0 5px 0 #c7cde8; }
.key.glow { background: linear-gradient(#ffe259, #ffa751); color: #fff; }
.easy-target { font-size: 6rem; color: #7b5cff; text-shadow: 4px 4px 0 #ffd6e8; }

/* 완료 화면 */
.easy-done, .nm-done, .hd-done { font-size: 2.8rem; color: #ff5e7e; animation: done-pop 0.6s ease-out; }
.again, .nm-again, .hd-again { border-radius: 999px; font-weight: 800;
  background: linear-gradient(145deg, #5b8cff, #7b5cff); box-shadow: 0 6px 0 #4b3bb5; }

@keyframes title-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes done-pop { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }