/* 앱 내장 폰트 (외부 요청 없음 — 오프라인·개인정보) */
@font-face { font-family: 'Jua'; src: url('assets/fonts/Jua.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('assets/fonts/Fredoka.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'M PLUS Rounded 1c'; src: url('assets/fonts/MPLUSRounded1c.woff2') format('woff2'); font-weight: 700 800; font-display: swap; }
@font-face { font-family: 'ZCOOL KuaiLe'; src: url('assets/fonts/ZCOOLKuaiLe.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Mitr'; src: url('assets/fonts/Mitr.woff2') format('woff2'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('assets/fonts/Nunito.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }

:root {
  --pink: #ff6fae;
  --pink-d: #e0438a;
  --purple: #8a5cff;
  --purple-d: #6a3ee0;
  --mint: #4fd6b8;
  --mint-d: #2fb394;
  --gold: #ffc93d;
  --gold-d: #e8a300;
  --ink: #4a2a5a;
  --cream: #fff8fb;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #ffe9f3;
  font-family: 'Jua', 'Fredoka', system-ui, sans-serif;
  color: var(--ink);
  user-select: none; -webkit-user-select: none;
  touch-action: none; overscroll-behavior: none;
}
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; border: 0; cursor: pointer; touch-action: manipulation; }

/* ── 캔디 버튼 ── */
.candy-btn {
  --c: var(--pink); --d: var(--pink-d);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, white) 0%, var(--c) 55%);
  color: #fff; font-size: 20px; padding: 12px 22px; border-radius: 999px;
  box-shadow: 0 5px 0 var(--d), 0 8px 16px rgba(120, 40, 100, .25), inset 0 2px 0 rgba(255,255,255,.6);
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
  transition: transform .08s, box-shadow .08s;
  position: relative;
}
.candy-btn::after { content: ''; position: absolute; left: 14%; right: 14%; top: 5px; height: 30%; border-radius: 999px; background: rgba(255,255,255,.35); pointer-events: none; }
.candy-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--d), 0 3px 8px rgba(120,40,100,.25); }
.candy-btn.green { --c: var(--mint); --d: var(--mint-d); }
.candy-btn.purple { --c: var(--purple); --d: var(--purple-d); }
.candy-btn.gold { --c: var(--gold); --d: var(--gold-d); color: #7a4a00; text-shadow: none; }
.candy-btn.gray { --c: #b9b0c9; --d: #968ca8; }
.candy-btn.big { font-size: 28px; padding: 16px 44px; }
.candy-btn.small { font-size: 15px; padding: 8px 14px; }
.candy-btn:disabled { filter: grayscale(.7) opacity(.7); }

.icon-btn {
  width: 46px; height: 46px; border-radius: 16px; font-size: 20px;
  background: #fff; box-shadow: 0 4px 0 #f0c6dc, 0 6px 12px rgba(120,40,100,.18);
  display: grid; place-items: center; font-family: 'Fredoka', 'Jua', sans-serif; font-weight: 700; color: var(--pink-d);
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #f0c6dc; }
.pill {
  background: rgba(255,255,255,.92); border-radius: 999px; padding: 6px 12px; font-size: 18px;
  box-shadow: 0 3px 0 #f0c6dc, 0 5px 10px rgba(120,40,100,.12);
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.pill b { font-family: 'Fredoka', 'Jua', sans-serif; font-weight: 700; }

/* ── 화면 ── */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b));
  background: radial-gradient(circle at 50% 20%, #fff6fb 0%, #ffd9ec 45%, #e4d4ff 100%);
  z-index: 20;
}
.screen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(#fff 2px, transparent 2.5px), radial-gradient(#ffc2e0 2px, transparent 2.5px);
  background-size: 34px 34px, 34px 34px; background-position: 0 0, 17px 17px;
}
.screen > * { position: relative; }
.logo { width: min(86vw, 440px); filter: drop-shadow(0 10px 18px rgba(160, 60, 140, .3)); }
.bounce { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1deg); } }
.tagline { margin: 0; font-size: 19px; text-align: center; color: var(--pink-d); }
.sub { margin: 0; color: #9a6a9a; }
.loadbar { width: min(70vw, 300px); height: 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,.1); overflow: hidden; }
#loadFill { height: 100%; width: 0; border-radius: 999px; background: repeating-linear-gradient(45deg, #ff8fc7 0 12px, #ffb3d9 12px 24px); transition: width .2s; }

.diff { display: flex; gap: 8px; background: rgba(255,255,255,.7); padding: 6px; border-radius: 999px; }
.diff button { padding: 10px 14px; border-radius: 999px; font-size: 17px; background: transparent; }
.diff button.on { background: #fff; box-shadow: 0 3px 0 #f0c6dc; color: var(--pink-d); }
.title-row { display: flex; gap: 12px; }

/* ── 레벨 맵 (캔디 로드) ── */
#screen-levels { justify-content: flex-start; padding-left: 0; padding-right: 0; }
.levels-top { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 520px; padding: 0 16px; }
.levels-top .pill { margin-right: auto; }
#levelMap { flex: 1; width: 100%; max-width: 520px; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch; position: relative; padding: 20px 0 60px; }
.lvl {
  position: relative; width: 84px; height: 84px; margin: 0 auto 26px; border-radius: 50%;
  display: grid; place-items: center; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 30px; color: #fff;
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--c, #ff6fae) 45%);
  box-shadow: 0 6px 0 var(--d, #e0438a), 0 10px 18px rgba(120, 40, 100, .25);
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.lvl img.boss { position: absolute; width: 58px; height: 58px; right: -52px; top: 6px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.lvl .stars { position: absolute; bottom: -22px; font-size: 14px; letter-spacing: -2px; white-space: nowrap; }
.lvl .lock { position: absolute; top: -8px; left: -8px; font-size: 22px; }
.lvl .price { position: absolute; top: -10px; right: -18px; background: var(--gold); color: #7a4a00; font-size: 11px; padding: 3px 7px; border-radius: 999px; text-shadow: none; font-family: 'Jua'; box-shadow: 0 2px 0 var(--gold-d); }
.lvl.locked { filter: grayscale(.6) brightness(1.05); }
.lvl.current { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.lvl-name { position: absolute; top: 88px; width: 140px; left: -28px; text-align: center; font-size: 12px; color: #8a5a8a; text-shadow: none; font-family: 'Jua'; }

/* ── HUD ── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; }
.hud-top { position: absolute; top: calc(8px + var(--safe-t)); left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); display: flex; gap: 6px; align-items: center; }
.hud-top .spacer { flex: 1; }
.hud-top .pill { font-size: 17px; padding: 6px 10px; }
#bossbar { position: absolute; top: calc(62px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(80vw, 360px); text-align: center; }
.boss-name { font-size: 16px; color: #fff; text-shadow: 0 2px 0 var(--purple-d), 0 0 6px var(--purple); }
#bossbar .bar { position: relative; height: 16px; border-radius: 999px; background: rgba(74, 42, 90, .6); overflow: hidden; border: 2px solid #fff; }
#bossFill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff5f8f, #ff9fc4); transition: width .15s; }
#bossShield { position: absolute; left: 0; top: 0; height: 40%; width: 0; background: #7fd8ff; }
#bossbar.invuln #bossFill { background: repeating-linear-gradient(45deg, #ffd23f 0 8px, #fff 8px 16px); }

#waveBtn { position: absolute; right: calc(10px + var(--safe-r)); bottom: calc(118px + var(--safe-b)); font-size: 17px; padding: 10px 18px; }
#waveBtn.boss { --c: var(--purple); --d: var(--purple-d); animation: pulse 1s infinite; }

#buildbar {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l));
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 30%);
  scrollbar-width: none;
}
#buildbar::-webkit-scrollbar { display: none; }
.card {
  flex: 0 0 auto; width: 76px; height: 96px; border-radius: 18px; background: #fff; position: relative;
  box-shadow: 0 4px 0 #f0c6dc, 0 6px 12px rgba(120,40,100,.15);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6px;
}
.card img { position: absolute; top: 2px; width: 68px; height: 68px; }
.card .cost { position: relative; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 15px; background: #fff4c7; border-radius: 999px; padding: 1px 8px; }
.card .nm { position: absolute; top: 3px; left: 0; right: 0; font-size: 10px; text-align: center; color: #a07aa0; }
.card.on { box-shadow: 0 0 0 3px var(--pink), 0 4px 0 var(--pink-d); transform: translateY(-4px); }
.card.poor { filter: grayscale(.8) opacity(.6); }

#towerPanel {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(118px + var(--safe-b));
  width: min(92vw, 380px); background: #fff; border-radius: 22px; padding: 12px 14px;
  box-shadow: 0 6px 0 #f0c6dc, 0 12px 24px rgba(120,40,100,.2);
  display: grid; grid-template-columns: 64px 1fr; gap: 4px 10px; align-items: center;
}
#towerPanel img { width: 64px; height: 64px; grid-row: span 2; }
#towerPanel h3 { margin: 0; font-size: 19px; }
#towerPanel .st { font-size: 13px; color: #8a6a8a; }
#towerPanel .row { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 6px; }
#towerPanel .row .candy-btn { flex: 1; font-size: 16px; padding: 10px 8px; }

#toast {
  position: absolute; left: 50%; top: calc(110px + var(--safe-t)); transform: translateX(-50%) scale(.8); opacity: 0;
  background: rgba(74, 42, 90, .85); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 16px;
  transition: opacity .2s, transform .2s; pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) scale(1); }
#hint {
  position: absolute; left: 50%; bottom: calc(210px + var(--safe-b)); transform: translateX(-50%);
  background: #fff; border-radius: 18px; padding: 10px 16px; font-size: 16px; text-align: center; width: max-content; max-width: 88vw;
  box-shadow: 0 4px 0 #f0c6dc, 0 8px 16px rgba(120,40,100,.2); pointer-events: none;
  animation: bob 1.6s ease-in-out infinite;
}

#floaters { position: fixed; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.ft { position: absolute; font-family: 'Fredoka', 'Jua', sans-serif; font-weight: 700; font-size: 17px; color: #fff; transform: translate(-50%, -50%);
  text-shadow: 0 2px 0 rgba(74,42,90,.7), 0 0 4px rgba(74,42,90,.5); animation: floatUp .9s ease-out forwards; white-space: nowrap; }
.ft.coin { color: #ffd23f; }
.ft.bad { color: #ff6f8f; }
.ft.miss { color: #bfe9ff; font-size: 15px; }
@keyframes floatUp { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -46px; } }

#hurtFlash { position: fixed; inset: 0; pointer-events: none; z-index: 7; box-shadow: inset 0 0 80px 30px rgba(255, 60, 110, .0); transition: box-shadow .3s; }
#hurtFlash.on { box-shadow: inset 0 0 80px 30px rgba(255, 60, 110, .55); transition: none; }

#bossIntro {
  position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none;
  background: radial-gradient(circle, rgba(138,92,255,.55), rgba(74,42,90,.7));
  animation: fadeInOut 2.6s forwards; color: #fff; text-align: center; gap: 6px;
}
#bossIntro img { width: 160px; height: 160px; animation: popIn .5s cubic-bezier(.3,1.6,.5,1); }
#bossIntro .warn { font-size: 18px; color: #ffd23f; letter-spacing: 4px; }
#bossIntro .nm { font-size: 34px; text-shadow: 0 3px 0 var(--purple-d); }
#bossIntro .ds { font-size: 16px; opacity: .9; padding: 0 20px; }
@keyframes fadeInOut { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes popIn { from { transform: scale(.2) rotate(-20deg); } to { transform: scale(1); } }

/* ── 모달 ── */
#modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(74, 42, 90, .45); padding: 16px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-card {
  width: min(92vw, 400px); max-height: 88vh; overflow-y: auto; background: var(--cream); border-radius: 28px; padding: 20px 18px;
  box-shadow: 0 8px 0 #f0c6dc, 0 20px 40px rgba(74,42,90,.3); text-align: center; animation: popIn .35s cubic-bezier(.3,1.6,.5,1);
  touch-action: pan-y;
}
.modal-card h2 { margin: 4px 0 8px; font-size: 26px; color: var(--pink-d); }
.modal-card p { margin: 6px 0; font-size: 16px; line-height: 1.45; }
.modal-card .btns { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.modal-card .bossPic { width: 130px; height: 130px; }
.modal-card .tip { background: #fff; border-radius: 16px; padding: 10px 12px; font-size: 15px; color: #7a5a8a; box-shadow: inset 0 0 0 2px #ffe0ef; }
.modal-card .big-stars { font-size: 44px; letter-spacing: 4px; }
.perks { text-align: left; background: #fff; border-radius: 16px; padding: 12px 16px; margin: 10px 0; font-size: 15px; line-height: 1.8; }
.pass-price { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 34px; color: var(--pink-d); }
.fine { font-size: 12px !important; color: #a58aa5; }
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; text-align: left; font-size: 13px; }
.help-grid div { background: #fff; border-radius: 12px; padding: 6px 8px; display: flex; gap: 6px; align-items: center; }
.help-grid img { width: 40px; height: 40px; flex: none; }

@media (min-width: 900px) and (min-height: 600px) {
  .card { width: 88px; height: 108px; }
  .card img { width: 78px; height: 78px; }
  #waveBtn, #towerPanel { bottom: calc(130px + var(--safe-b)); }
}

/* ───── v2: 아이콘 · 3D 메뉴 오버레이 · 로그인 ───── */
.ico { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.28em; flex: none; }
i[data-icon], .icon-btn i, .candy-btn i { font-style: normal; display: inline-flex; }
.icon-btn .ico { width: 24px; height: 24px; }
.icon-btn small { position: absolute; right: 4px; bottom: 2px; font-size: 11px; font-family: 'Fredoka', sans-serif; }
.icon-btn { position: relative; }
.gold-btn { background: linear-gradient(180deg, #fff3b0, #ffc93d); box-shadow: 0 4px 0 #e8a300, 0 6px 12px rgba(120,40,100,.18); }
.candy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.candy-btn .ico { width: 1.1em; height: 1.1em; vertical-align: 0; }
.pill .ico { width: 22px; height: 22px; }
.pill .dim { opacity: .5; font-size: 14px; }

.screen.overlay { background: none; pointer-events: none; }
.screen.overlay::before { display: none; }
.screen.overlay > * { pointer-events: auto; }
.screen.solid { background: radial-gradient(circle at 50% 20%, #fff6fb 0%, #ffd9ec 45%, #e4d4ff 100%); }

#screen-title { justify-content: flex-start; gap: 6px; }
#screen-title::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,230,244,0) 0%, rgba(255,230,244,.75) 60%, rgba(255,230,244,.95) 100%); }
#screen-title > * { position: relative; z-index: 1; }
.title-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.title-icons { display: flex; gap: 8px; }
.profile-chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 4px 14px 4px 4px; font-size: 16px;
  box-shadow: 0 3px 0 #f0c6dc, 0 6px 12px rgba(120,40,100,.15); }
.profile-chip .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(180deg, #ffe0ef, #e6d9ff); display: grid; place-items: center; overflow: hidden; color: var(--pink-d); }
.profile-chip .avatar img { width: 120%; height: 120%; object-fit: cover; }
.float { animation: bob 3s ease-in-out infinite; margin-top: 4px; }
.grow { flex: 1; }
.title-bottom { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.title-bottom .candy-btn.big { width: min(80vw, 320px); }
.tagline { color: #b0407e; font-size: 16px; }
.diff button { min-width: 78px; }

#screen-levels { justify-content: flex-start; padding-left: 12px; padding-right: 12px; }
#screen-levels .levels-top { max-width: none; padding: 0; position: relative; z-index: 2; }
.levels-top .spacer { flex: 1; }
#lvlLabels { position: absolute; inset: 0; pointer-events: auto; overflow: hidden; touch-action: none; }
.lvl-label { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; padding: 0; will-change: transform; }
.lvl-label .num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 22px; color: #fff;
  background: radial-gradient(circle at 35% 30%, #ffc2e0 0 12%, #ff5fa2 55%); box-shadow: 0 4px 0 #d9387f, 0 6px 12px rgba(120,40,100,.3); border: 3px solid #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.lvl-label .num.locked { background: radial-gradient(circle at 35% 30%, #fff 0 12%, #d6cbe6 55%); box-shadow: 0 4px 0 #b0a2c4; }
.lvl-label .num .ico { width: 24px; height: 24px; vertical-align: 0; }
.lvl-label .stars .ico { width: 16px; height: 16px; }
.lvl-label .nm { font-size: 12px; background: rgba(255,255,255,.9); padding: 2px 8px; border-radius: 999px; color: #8a4a8a; white-space: nowrap; }
.lvl-label.current .num { animation: pulse 1s ease-in-out infinite; background: radial-gradient(circle at 35% 30%, #fff6b0 0 12%, #ffb000 55%); box-shadow: 0 4px 0 #d98a00, 0 0 0 6px rgba(255, 210, 63, .35); }

.card .lockbadge { position: absolute; top: 20px; }
.card .lockbadge .ico { width: 30px; height: 30px; }
.card.locked img { filter: grayscale(1) brightness(1.15) opacity(.45); }
.card.locked .cost { background: #efe6f6; color: #9a86b0; font-size: 12px; }
.card .cost .ico { width: 15px; height: 15px; vertical-align: -3px; }
#towerPanel .lvstars .ico { width: 15px; height: 15px; }
#towerPanel .candy-btn .ico { width: 16px; height: 16px; }
#waveBtn .ico { width: 18px; height: 18px; }
#toast.bad { background: rgba(224, 67, 110, .92); }
.ft .ico { width: 18px; height: 18px; vertical-align: -4px; margin-right: 2px; }
.boss-name { display: flex; align-items: center; justify-content: center; gap: 4px; }
.big-stars .ico { width: 54px; height: 54px; margin: 0 2px; }
.perks > div { display: flex; align-items: center; gap: 8px; }
.newtower { display: flex; gap: 10px; align-items: center; text-align: left; background: linear-gradient(90deg, #fff6c9, #ffe3f1); border-radius: 16px; padding: 8px 12px; margin: 8px 0; font-size: 14px; box-shadow: inset 0 0 0 2px #ffd23f; }
.newtower img { width: 56px; height: 56px; }
.help-grid em { font-style: normal; font-size: 11px; color: #fff; background: var(--purple); border-radius: 999px; padding: 0 6px; }
.avatar-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.avatar-pick button { background: #fff; border-radius: 18px; padding: 4px; box-shadow: 0 3px 0 #f0c6dc; }
.avatar-pick button.on { box-shadow: 0 0 0 3px var(--pink), 0 3px 0 var(--pink-d); }
.avatar-pick img { width: 100%; aspect-ratio: 1; }
#nickIn { width: 100%; font-family: inherit; font-size: 20px; text-align: center; padding: 12px; border-radius: 16px; border: 3px solid #ffd0e6; outline: none; color: var(--ink); background: #fff; user-select: text; -webkit-user-select: text; }
#nickIn:focus { border-color: var(--pink); }

/* ───── v3: 언어 · 온보딩 ───── */
body[data-lang="ja"], body[data-lang="zh-TW"] { font-family: 'M PLUS Rounded 1c', 'Jua', system-ui, sans-serif; }
body[data-lang="zh-CN"] { font-family: 'ZCOOL KuaiLe', 'Jua', system-ui, sans-serif; }
body[data-lang="th"] { font-family: 'Mitr', 'Jua', system-ui, sans-serif; }
body[data-lang="ru"] { font-family: 'Nunito', 'Fredoka', system-ui, sans-serif; font-weight: 800; }
body:is([data-lang="en"], [data-lang="es"], [data-lang="pt"], [data-lang="fr"], [data-lang="de"], [data-lang="id"]) { font-family: 'Fredoka', 'Jua', system-ui, sans-serif; font-weight: 600; }
.lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.lang-grid button { background: #fff; border-radius: 14px; padding: 12px 8px; font-size: 16px; box-shadow: 0 3px 0 #f0c6dc; }
.lang-grid button.on { background: linear-gradient(180deg, #ffb3d9, #ff6fae); color: #fff; box-shadow: 0 3px 0 #e0438a; }
#onboarding { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 30%, #fff6fb, #ffd9ec 50%, #e4d4ff); }
.onb-card { position: relative; width: min(92vw, 420px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.onb-skip { position: absolute; top: calc(-6px + var(--safe-t)); right: 0; background: rgba(255,255,255,.8); border-radius: 999px; padding: 6px 14px; font-size: 14px; color: #9a6a9a; }
.onb-art { position: relative; width: 300px; height: 240px; margin-top: 30px; }
.onb-art img { position: absolute; width: 150px; height: 150px; filter: drop-shadow(0 10px 14px rgba(120,40,100,.25)); animation: bob 2.6s ease-in-out infinite; }
.onb-art .a0 { left: 75px; top: 0; width: 170px; height: 170px; }
.onb-art .a1 { left: -10px; top: 100px; animation-delay: .4s; }
.onb-art .a2 { right: -10px; top: 100px; animation-delay: .8s; }
.onb-card h2 { margin: 6px 0 0; font-size: 26px; color: var(--pink-d); }
.onb-card p { margin: 0 8px; font-size: 16px; line-height: 1.5; color: #7a4a7a; }
.onb-dots { display: flex; gap: 8px; margin: 8px 0; }
.onb-dots span { width: 10px; height: 10px; border-radius: 50%; background: #f0c6dc; }
.onb-dots span.on { width: 26px; border-radius: 999px; background: var(--pink); }
.onb-card .candy-btn.big { width: min(80vw, 300px); }

/* ───── v4: 키아트 로딩 화면 ───── */
/* ───── v5: 만화 인트로 로딩 — 로고가 톡 튀어나와 위로 올라가고, 장난감들이 날아와 착 붙는다 ───── */
#screen-loading.solid { background: linear-gradient(180deg, #bfe6ff 0%, #e6dcff 42%, #ffd9ec 72%, #ffc4e2 100%); justify-content: flex-start; overflow: hidden; }
#screen-loading.solid::before { display: none; }
#screen-loading .loadbar { position: absolute; bottom: calc(70px + var(--safe-b)); box-shadow: 0 4px 0 rgba(160,60,140,.25), inset 0 2px 4px rgba(0,0,0,.1); border: 3px solid #fff; opacity: 0; animation: introBar .5s cubic-bezier(.3,1.7,.5,1) 2.2s forwards; }
#screen-loading .sub { position: absolute; bottom: calc(36px + var(--safe-b)); color: #fff; text-shadow: 0 2px 4px rgba(120,40,100,.6); opacity: 0; animation: introFade .4s ease 2.45s forwards; }
.intro-sky .cloud { position: absolute; width: 34vw; max-width: 180px; aspect-ratio: 2.2; border-radius: 999px; background: #fff; opacity: .85; box-shadow: 18px -12px 0 -2px #fff, -16px -8px 0 -4px #fff; animation: cloudDrift 14s linear infinite; }
.intro-sky .c1 { top: 12%; left: -10%; } .intro-sky .c2 { top: 30%; left: 60%; transform: scale(.7); animation-duration: 18s; } .intro-sky .c3 { top: 6%; left: 78%; transform: scale(.55); animation-duration: 22s; }
.intro-logo { position: absolute; left: 50%; top: 44%; width: min(84vw, 420px); transform: translate(-50%, -50%) scale(0); animation: introLogo 1.35s cubic-bezier(.35,.9,.4,1) .1s forwards; z-index: 3; }
.intro-stage { position: absolute; left: 50%; bottom: calc(110px + var(--safe-b)); width: min(96vw, 460px); height: min(62vh, 520px); transform: translateX(-50%); }
.intro-hill { position: absolute; left: -8%; right: -8%; bottom: -4%; height: 70%; border-radius: 50% 50% 0 0 / 60% 60% 0 0; background: radial-gradient(ellipse at 50% 20%, #c8f0b4 0%, #9edc8a 60%, #86cf74 100%); box-shadow: inset 0 10px 0 rgba(255,255,255,.35); opacity: 0; transform: translateY(150%); animation: introHill .55s cubic-bezier(.3,1.5,.5,1) 1s forwards; }
.intro-stage .toy { position: absolute; left: var(--x); top: var(--y); width: var(--w); translate: -50% -50%; opacity: 0; filter: drop-shadow(0 8px 6px rgba(120,40,110,.25)); transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.6); animation: toyFly .7s cubic-bezier(.25,.8,.35,1) var(--d) forwards, toyBob 2.4s ease-in-out calc(var(--d) + .75s) infinite; }
@keyframes introLogo {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-14deg); }
  22% { transform: translate(-50%, -50%) scale(1.2) rotate(5deg); }
  32% { transform: translate(-50%, -50%) scale(.92, 1.06) rotate(-2deg); }
  42% { transform: translate(-50%, -50%) scale(1.04) rotate(0); }
  55% { top: 44%; transform: translate(-50%, -50%) scale(1); }
  66% { top: 47%; transform: translate(-50%, -50%) scale(1.06, .92); }
  100% { top: calc(28px + var(--safe-t)); transform: translate(-50%, 0) scale(.8); }
}
@keyframes toyFly {
  0% { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.6); }
  12% { opacity: 1; }
  68% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1.12, .84); }
  82% { transform: translate(0, -9%) rotate(0) scale(.94, 1.08); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}
@keyframes toyBob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -4%); } }
@keyframes introHill { 0% { opacity: 1; } to { opacity: 1; transform: translateY(0); } }
@keyframes introBar { 0% { opacity: 0; transform: translateY(40px) scale(.6); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes introFade { to { opacity: 1; } }
@keyframes cloudDrift { from { translate: 0 0; } to { translate: 120vw 0; } }
@media (prefers-reduced-motion: reduce) {
  .intro-logo { animation: none; top: calc(28px + var(--safe-t)); transform: translate(-50%, 0) scale(.8); }
  .intro-stage .toy, .intro-hill, #screen-loading .loadbar, #screen-loading .sub { animation: none; opacity: 1; transform: none; }
}
#mNoAds { margin: 12px auto 0; display: flex; }