:root {
  --font: "SF Pro Rounded", "Pretendard", "Nunito", ui-rounded, system-ui, sans-serif;
  --ink: #2A2A33; --muted: #9AA0AA; --line: #ECECF0; --line2: #F3F3F6;
  --accent: #2EA37A; --accent2: #4FBE93; --soft: #E4F4EC;
  --bg: #FAFAFB; --card: #fff; --spotify: #1DB954;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: #FFFFFF; font-family: var(--font); color: var(--ink);
  touch-action: manipulation; overscroll-behavior: none; word-break: keep-all; }

html, body { overflow: hidden; }
.app {
  max-width: 440px; margin: 0 auto; height: 100vh; height: 100dvh; overflow: hidden;
  background: var(--card); display: flex; flex-direction: column; position: relative;
}
.screen {
  flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 20px 22px; overflow: hidden;
  animation: screenIn .26s ease;
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.screen.center { align-items: center; justify-content: center; text-align: center; gap: 14px; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } }
.cosmos-count { display: flex; gap: 6px; align-items: center; }
.cdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(237,236,243,.16); transition: background .3s; }
.cdot.on { background: #EDECF3; box-shadow: 0 0 7px rgba(237,236,243,.85); }
.grow { flex: 1; }
.recent { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.recent-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; padding: 18px 0; }
.recent-empty .empty-alien { opacity: .9; }
.recent-empty .desc { margin: 0; }
.hidden { display: none !important; }

.wordmark { font-size: 30px; font-weight: 900; letter-spacing: -.5px; }
.wordmark .x { color: var(--accent); }

/* 표지(로그인) */
.screen.cover { animation: none; position: relative; overflow: hidden; }
.cover-sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.note { position: absolute; color: var(--accent2); opacity: 0; animation: coverDrift 7.5s ease-in-out infinite; }
.note svg { width: 100%; height: auto; display: block; }
.note.s1 { width: 22px; left: 14%; top: 20%; animation-delay: 0s; }
.note.s2 { width: 17px; left: 82%; top: 27%; animation-delay: 1.4s; }
.note.s3 { width: 20px; left: 19%; top: 60%; color: #F3C84C; animation-delay: 2.3s; }
.note.s4 { width: 15px; left: 78%; top: 57%; animation-delay: 3.2s; }
.note.s5 { width: 24px; left: 65%; top: 13%; color: #F3C84C; animation-delay: .7s; }
.note.s6 { width: 17px; left: 36%; top: 75%; animation-delay: 2s; }
@keyframes coverDrift {
  0%, 100% { transform: translateY(0) rotate(-8deg); opacity: 0; }
  25% { opacity: .42; }
  50% { transform: translateY(-20px) rotate(8deg); opacity: .55; }
  75% { opacity: .34; }
}

.cover-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; position: relative; z-index: 1; }
.cover-main > *, .cover-btn { animation: coverRise .6s cubic-bezier(.2,.7,.3,1) both; }
.cover-hero { animation-delay: .05s; }
.cover-mark { animation-delay: .18s; }
.cover-desc { animation-delay: .3s; }
.cover-btn { animation-delay: .42s; position: relative; z-index: 1; }
@keyframes coverRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.cover-hero { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 216px; }
.cover-trio { display: flex; align-items: flex-end; justify-content: center; position: relative; z-index: 1; }
.cover-mem { position: relative; animation: coverFloat 3.6s ease-in-out infinite; }
.cover-mem svg { width: 100%; height: auto; display: block; }
.m-mid { width: 152px; z-index: 2; animation-duration: 3.2s; }
.m-left { width: 116px; z-index: 1; margin-right: -14px; animation-delay: .5s; }
.m-right { width: 116px; z-index: 1; margin-left: -14px; animation-delay: 1s; animation-duration: 4s; }
.cover-aura {
  position: absolute; left: 50%; top: 46%; width: 330px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,190,147,.18), rgba(79,190,147,0) 70%);
  z-index: 0; animation: coverAura 4.2s ease-in-out infinite;
}
@keyframes coverFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes coverAura {
  0%, 100% { transform: translate(-50%, -50%) scale(.85); opacity: .7; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}
.cover-mark { font-size: 34px; }
.btn-sp { display: inline-flex; }
.btn-sp svg { width: 18px; height: 18px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .cover-mem, .cover-aura, .note, .cover-main > *, .cover-btn { animation: none !important; opacity: 1 !important; }
}
.lead { font-size: 18px; font-weight: 800; line-height: 1.35; }
.desc { font-size: 13px; color: var(--muted); font-weight: 700; line-height: 1.55; }
.muted { color: var(--muted); }

.btn {
  width: 100%; height: 48px; border-radius: 14px; background: var(--accent); color: #fff;
  font-weight: 900; font-size: 15px; border: none; display: flex; align-items: center;
  justify-content: center; gap: 8px; cursor: pointer; font-family: inherit;
}
.btn:active { transform: scale(.98); }
.btn.spotify { background: var(--spotify); }
.btn.ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn.sm { height: 40px; font-size: 13px; border-radius: 11px; }
.btn:disabled { opacity: .5; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; background: var(--soft); color: var(--accent);
  font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 20px;
}
.pill.blue { background: #EEF4FF; color: #3B7ED8; }

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.topbar .u { font-size: 14px; font-weight: 900; }
.topbar .r { display: flex; align-items: center; gap: 12px; }
.coin { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 900; color: #C98A2E; }
.coin i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(160deg, #FFD980, #E9A93B); }
.gearbtn { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); padding: 4px; line-height: 1; display: inline-flex; align-items: center; }
.gearbtn svg { width: 19px; height: 19px; display: block; }
.gearbtn.shr svg { width: 20px; height: 20px; }
.gearbtn.spinning { animation: spin .8s linear infinite; }

.nowplay {
  display: flex; align-items: center; gap: 9px; margin-top: 10px;
  padding: 9px 14px; border-radius: 12px; background: var(--soft); color: var(--accent);
  font-size: 12.5px; font-weight: 700;
}
.nowplay .np-marquee { flex: 1; min-width: 0; overflow: hidden; }
.nowplay .np-inner { display: inline-block; white-space: nowrap; }
.nowplay .np-inner b { font-weight: 800; }
.nowplay .np-inner.scroll { animation-name: marquee; animation-timing-function: linear; animation-iteration-count: infinite; }
.nowplay .np-artist { opacity: .7; }
@keyframes marquee {
  0%, 12% { transform: translateX(0); }
  88%, 100% { transform: translateX(var(--end, 0)); }
}
.eq { display: flex; gap: 2px; align-items: flex-end; height: 13px; flex: none; }
.eq b { width: 3px; background: currentColor; border-radius: 2px; animation: eq 1s infinite ease-in-out; }
.eq b:nth-child(2) { animation-delay: .2s; }
.eq b:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%,100% { height: 5px; } 50% { height: 13px; } }

.charwrap { position: relative; display: flex; align-items: center; justify-content: center; margin: 14px 0 6px; min-height: 190px; perspective: 1000px; -webkit-perspective: 1000px; }
.charwrap img { width: 180px; height: auto; filter: drop-shadow(0 10px 14px rgba(30,27,46,.14)); }

.egg {
  width: 130px; height: 165px; border-radius: 50% 50% 48% 48%/58% 58% 42% 42%;
  background: linear-gradient(160deg, #F3EEE2, #E6DCC7);
  box-shadow: inset -8px -10px 18px rgba(150,135,105,.25), 0 8px 14px rgba(30,27,46,.12); position: relative;
}
.egg::after {
  content: ""; position: absolute; left: 28px; top: 38px; width: 28px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.5); filter: blur(3px);
}
.egg.lg { width: 168px; height: 214px; }
.egg.lg::after { left: 36px; top: 48px; width: 34px; height: 44px; }

/* 이름 짓고 홈으로 넘어갈 때: 알이 작아지며 위로 올라가고 나머지는 사라짐 */
.naming-exit .egg { animation: eggSettle .5s cubic-bezier(.4,0,.25,1) forwards; }
.naming-exit .lead, .naming-exit .input, .naming-exit .btn, .naming-exit .lbl2 {
  animation: fadeAway .3s ease forwards;
}
@keyframes eggSettle { to { transform: translateY(-116px) scale(.55); opacity: 0; } }
@keyframes fadeAway { to { opacity: 0; transform: translateY(6px); } }
.charwrap.egg-enter .egg { animation: eggLand .5s ease-out; }
@keyframes eggLand { from { opacity: 0; transform: scale(.86); } }

.petname { display: flex; align-items: center; justify-content: center; gap: 2px; font-weight: 900; font-size: 16px; }
.nameedit {
  background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px;
  display: inline-flex; align-items: center;
}
.nameedit svg { width: 15px; height: 15px; display: block; }
.nameedit:active { transform: scale(.9); }
.stagerow { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 8px 0 15px; }
.stagerow .stage-tag { font-size: 12px; font-weight: 800; color: #2EA37A; background: #E8F5EE; padding: 3px 11px; border-radius: 999px; }
.stagerow .lv { font-size: 13px; font-weight: 900; color: var(--accent); }

.bar { height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #AEE06A, #2EA37A); transition: width 1s cubic-bezier(.4,0,.2,1); }
.hatch-n { display: inline-block; color: #2EA37A; font-weight: 800; margin-right: .13em; }
@keyframes num-slide { from { transform: translateY(-0.85em); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.swap-out { animation: swapOut .2s ease forwards; }
.swap-in { animation: swapIn .3s ease; }
@keyframes swapOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes swapIn { from { opacity: 0; transform: translateY(9px); } }


.lbl { font-size: 11px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 16px 0 4px; }
.lbl-recent { font-size: 12px; text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 5px; margin: 24px 0 7px; }
.lbl-sp { display: inline-flex; color: #B7B7BE; }
.lbl-sp svg { width: 13px; height: 13px; display: block; }
.song { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--line2); }
.song .cover { width: 40px; height: 40px; border-radius: 9px; flex: none; object-fit: cover; background: var(--line); }
.song .t { flex: 1; min-width: 0; }
.song .t .a { font-size: 13px; font-weight: 800; }
.song .t .b { font-size: 11px; color: var(--muted); font-weight: 700; }
.song .playcount { flex: none; font-size: 11px; font-weight: 800; color: var(--muted); background: var(--line2); padding: 2px 7px; border-radius: 10px; }

.marq { overflow: hidden; }
.marq-inner { display: inline-block; white-space: nowrap; }
.marq-inner.scroll { animation-name: marquee; animation-timing-function: linear; animation-iteration-count: infinite; }

.xpfloat {
  position: fixed; top: 118px; left: calc(50% + 88px); z-index: 90; pointer-events: none;
  color: var(--accent); font-weight: 900; font-size: 15px; animation: xpUp 1.4s ease forwards;
}
@keyframes xpUp {
  0% { opacity: 0; transform: translateY(6px); }
  25% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-42px); }
}

.tabbar {
  height: 58px; display: flex; background: #fff; flex: none;
  box-sizing: content-box; padding-bottom: env(safe-area-inset-bottom);
  border-radius: 20px 20px 0 0; box-shadow: 0 -3px 16px rgba(30,27,46,.07); z-index: 3;
}
.tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10px; font-weight: 800; color: #C2C2CB; background: none; border: none; cursor: pointer; font-family: inherit;
}
.tabbar .tab.on { color: var(--accent); }
.tabbar .tab.lock { opacity: .4; }
.tabbar .tab .ic { width: 23px; height: 23px; display: block; }
.tabbar .tab .ic svg { width: 100%; height: 100%; display: block; }

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(10px);
  max-width: 92vw; text-align: center; white-space: nowrap;
  background: #16241E; color: #EAF4EE; padding: 12px 20px; border-radius: 15px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; z-index: 300;
  box-shadow: 0 14px 34px rgba(14,30,22,.42), inset 0 0 0 1px rgba(122,224,170,.15);
  opacity: 0; transition: opacity .32s ease, transform .32s cubic-bezier(.2,1,.3,1); pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.spin { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }

#splash {
  position: fixed; inset: 0; z-index: 9999; background: #E5E5E7;
  display: flex; align-items: center; justify-content: center; transition: opacity .4s ease;
}
#splash.gone { opacity: 0; pointer-events: none; }
.splash-in { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.splash-alien svg { display: block; animation: splashBob 2.4s ease-in-out infinite; }
@keyframes splashBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ios-spin { transform-origin: 50% 50%; animation: iosSpin 1s steps(12) infinite; }
@keyframes iosSpin { to { transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.input {
  width: 100%; height: 50px; border-radius: 13px; border: 1.5px solid var(--line);
  padding: 0 15px; font-size: 15px; font-weight: 800; color: var(--ink); font-family: inherit; outline: none;
}
.input:focus { border-color: var(--accent); }
.lbl2 { font-size: 11px; font-weight: 900; color: var(--muted); letter-spacing: .4px; }
.notice { background: var(--soft); border-radius: 12px; padding: 12px 13px; font-size: 12px; font-weight: 700; color: #4C7A64; line-height: 1.7; margin-top: 14px; }

/* ── 온보딩 ── */
.ob-step { align-items: center; text-align: center; }
.ob-step .input { width: 100%; text-align: center; }
.ob-step .btn { width: 100%; }
.ob-hero { width: 80px; height: 80px; border-radius: 26px; background: linear-gradient(150deg, #EAF9F1, #D3F0E1); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(46,163,122,.18); }
.ob-hero svg { width: 40px; height: 40px; color: var(--spotify); }
.ob-list { width: 100%; margin-top: 22px; background: var(--soft); border-radius: 16px; padding: 4px 6px; }
.ob-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; text-align: left; }
.ob-row + .ob-row { border-top: 1px solid rgba(255,255,255,.7); }
.ob-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; }
.ob-ic svg { width: 18px; height: 18px; color: var(--accent); }
.ob-tx { display: flex; flex-direction: column; min-width: 0; }
.ob-tx b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.ob-tx span { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.ob-link { background: none; border: none; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 12px; margin-top: 2px; text-decoration: underline; text-underline-offset: 2px; }
.ob-dots { display: flex; gap: 7px; margin-bottom: 4px; }
.ob-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: .25s; }
.ob-dots i.on { width: 20px; border-radius: 4px; background: var(--accent); }
.ob-cosmos { position: relative; width: 158px; height: 158px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 42% 36%, #453f6d 0%, #2a2549 55%, #1d1934 100%);
  box-shadow: 0 16px 36px rgba(45,32,90,.3); }
.ob-planet { position: absolute; border-radius: 50%; box-shadow: 0 3px 10px rgba(0,0,0,.28); }
.ob-planet.a { width: 48px; height: 48px; right: 24px; top: 38px; background: radial-gradient(circle at 34% 30%, #ffffffcc, #F3C84C 76%); animation: obFloat 4s ease-in-out infinite; }
.ob-planet.b { width: 30px; height: 30px; left: 26px; bottom: 30px; background: radial-gradient(circle at 34% 30%, #ffffffcc, #6FB8E6 76%); animation: obFloat 4.8s ease-in-out infinite .5s; }
.ob-star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .8; animation: obTwinkle 2.8s ease-in-out infinite; }
@keyframes obFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes obTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }

.overlay {
  position: fixed; top: 0; bottom: var(--kb, 0); left: 50%; transform: translateX(-50%); width: 100%; max-width: 440px;
  background: rgba(30,27,46,.4); display: flex; align-items: flex-end;
  justify-content: center; z-index: 100; animation: fade .25s;
  transition: bottom .2s ease;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  background: #fff; width: 100%; max-width: 480px; border-radius: 26px 26px 0 0; padding: 26px 22px 26px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; animation: rise .3s;
}
@keyframes rise { from { transform: translateY(40px); } }
.sheet .btn { margin-top: 8px; }
.sheet .charwrap { min-height: 0; animation: pop .5s cubic-bezier(.2,1.4,.5,1); }

/* ── 튜토리얼 스포트라이트 투어 ── */
/* 앱 컬럼에 딱 맞는 컨테이너(밖으로 안 나감). 둥근 box-shadow 구멍으로 딤을 만들고,
   상호작용 스텝에선 투명 마스크 4장으로 구멍 밖만 클릭 차단. */
.tour { position: fixed; overflow: hidden; z-index: 200; animation: fade .3s; }
.tour-hole, .tour-mask, .tour-finger, .tour-card { position: absolute; }
.tour-hole {
  border-radius: 22px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(18, 18, 28, .72);
  transition: top .45s cubic-bezier(.4, 0, .2, 1), left .45s cubic-bezier(.4, 0, .2, 1), width .45s cubic-bezier(.4, 0, .2, 1), height .45s cubic-bezier(.4, 0, .2, 1);
}
.tour-mask { pointer-events: auto; }   /* 투명 클릭 차단(상호작용 스텝 전용) */
.tour-finger {
  z-index: 202; width: 46px; height: 46px; color: #fff; pointer-events: none;
  transform: translate(-50%, -50%); opacity: 0; transition: left .45s, top .45s;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}
.tour-finger svg { width: 100%; height: 100%; display: block; }
.tour-finger.show { opacity: 1; }
.tour-finger .tf-pulse {
  position: absolute; left: 50%; top: 48%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; border: 3px solid #fff; opacity: 0;
}
.tour-finger.tap { animation: fgTap 1.2s ease-in-out infinite; }
.tour-finger.tap .tf-pulse { animation: fgPulse 1.2s ease-out infinite; }
.tour-finger.swipe { animation: fgSwipe 1.7s ease-in-out infinite; }
@keyframes fgTap { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 45% { transform: translate(-50%, -42%) scale(.82); } }
@keyframes fgPulse { 0%, 40% { opacity: 0; transform: scale(.4); } 55% { opacity: .8; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes fgSwipe { 0%, 100% { transform: translate(-115%, -50%); } 50% { transform: translate(15%, -50%); } }
.tour-card {
  z-index: 203; pointer-events: auto; width: min(320px, calc(100% - 20px));
  background: var(--card); border-radius: 18px; padding: 14px 16px 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .3);
  transition: top .45s cubic-bezier(.4, 0, .2, 1), left .45s cubic-bezier(.4, 0, .2, 1);
}
.tour-t { font-size: 16px; font-weight: 900; color: var(--ink); }
.tour-b { font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.tour-row { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.tour-dots { display: flex; gap: 5px; flex: 1; justify-content: center; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: .22s; }
.tour-dots i.on { width: 16px; border-radius: 3px; background: var(--ink); }
.tour-skip { background: none; border: none; color: var(--muted); font-weight: 700; font-size: 12px; cursor: pointer; padding: 4px 2px; white-space: nowrap; }
.tour-next { width: auto; padding: 8px 18px; font-size: 14px; }

/* ── 게임 방법 데모 ── */
.game-overlay.demo { align-items: center; justify-content: center; background: rgba(18, 18, 28, .8); }
.demo-box { width: min(320px, calc(100vw - 48px)); background: var(--card); border-radius: 22px; padding: 20px; text-align: center; animation: rise .3s; }
.demo-title { font-size: 17px; font-weight: 900; color: var(--ink); }
.demo-stage { height: 148px; margin: 12px 0; border-radius: 16px; background: linear-gradient(160deg, #2b2740, #1b1830); position: relative; overflow: hidden; }
.demo-cap { font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.5; }
.demo-btns { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.demo-btns .btn { flex: 1; }
/* 리듬 데모: 외계인이 판정선에 닿고 Perfect 팝 */
.demo-rhythm { position: absolute; inset: 0; }
.dr-line { position: absolute; left: 20%; right: 20%; bottom: 34px; height: 3px; background: rgba(255, 255, 255, .35); border-radius: 2px; }
.dr-note { position: absolute; left: 50%; top: 0; width: 42px; margin-left: -21px; transform: translateY(-50%); animation: drFall 1.9s cubic-bezier(.5, 0, .9, .6) infinite; }
.dr-note svg { width: 100%; display: block; }
.dr-ring { position: absolute; left: 50%; bottom: 35px; width: 46px; height: 46px; margin-left: -23px; margin-bottom: -23px; border: 3px solid #4FBE93; border-radius: 50%; opacity: 0; animation: drRing 1.9s ease-out infinite; }
.dr-perfect { position: absolute; left: 50%; bottom: 82px; transform: translateX(-50%); color: #4FBE93; font-weight: 900; font-size: 16px; opacity: 0; animation: drPop 1.9s ease-out infinite; }
@keyframes drFall { 0% { top: -6%; } 70% { top: calc(100% - 40px); } 100% { top: calc(100% - 40px); } }
@keyframes drRing { 0%, 66% { opacity: 0; transform: scale(.4); } 72% { opacity: .95; } 88%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes drPop { 0%, 68% { opacity: 0; transform: translateX(-50%) translateY(6px); } 76% { opacity: 1; transform: translateX(-50%) translateY(0); } 92%, 100% { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
/* 메모리 데모: 손가락이 두 장을 차례로 뒤집어 같은 짝 → 초록 매치 */
.demo-memory { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 24px; }
.dm-card { width: 60px; height: 78px; perspective: 520px; }
.dm-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.dm-card.a .dm-in { animation: dmFlipA 4.4s ease-in-out infinite; }
.dm-card.b .dm-in { animation: dmFlipB 4.4s ease-in-out infinite; }
.dm-front, .dm-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 11px; backface-visibility: hidden; }
.dm-back { background: #6C5CE7; color: #fff; font-weight: 900; font-size: 26px; }
.dm-front { background: #fff; transform: rotateY(180deg); animation: dmGreen 4.4s ease-in-out infinite; }
.dm-front svg { width: 82%; display: block; }
.dm-finger { position: absolute; left: calc(50% - 19px); top: calc(50% + 2px); z-index: 5; width: 38px; height: 38px; color: #fff; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); animation: dmFinger 4.4s ease-in-out infinite; }
.dm-finger svg { width: 100%; display: block; }
.dm-match { position: absolute; top: 6px; color: #4FBE93; font-weight: 900; font-size: 18px; opacity: 0; animation: dmMatch 4.4s ease-out infinite; }
@keyframes dmFlipA { 0%, 12% { transform: rotateY(0); } 22%, 88% { transform: rotateY(180deg); } 96%, 100% { transform: rotateY(0); } }
@keyframes dmFlipB { 0%, 40% { transform: rotateY(0); } 50%, 88% { transform: rotateY(180deg); } 96%, 100% { transform: rotateY(0); } }
@keyframes dmGreen { 0%, 56% { background: #fff; } 64%, 86% { background: #BFEBD3; } 94%, 100% { background: #fff; } }
@keyframes dmFinger {
  0% { opacity: 0; transform: translate(-42px, 4px) scale(1); }
  6% { opacity: 1; }
  15% { transform: translate(-42px, 11px) scale(.82); }
  22% { transform: translate(-42px, 4px) scale(1); }
  38% { transform: translate(42px, 4px) scale(1); }
  46% { transform: translate(42px, 11px) scale(.82); }
  52% { opacity: 1; transform: translate(42px, 4px) scale(1); }
  60%, 100% { opacity: 0; }
}
@keyframes dmMatch { 0%, 58% { opacity: 0; transform: translateY(4px) scale(.6); } 66% { opacity: 1; transform: translateY(0) scale(1.1); } 86% { opacity: 1; } 94%, 100% { opacity: 0; } }

.planet-unit[data-planet] { cursor: pointer; }
.pinfo-char { display: flex; justify-content: center; perspective: 1000px; -webkit-perspective: 1000px; }
.pinfo-char .charflip { width: 156px; height: 172px; }
.pinfo-char .char-svg { display: block; }
.pinfo-namerow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: -10px; }
.wardrobe-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; border: none; background: var(--soft); color: var(--accent); cursor: pointer; }
.wardrobe-btn svg { width: 15px; height: 15px; }
.wardrobe-btn:active { transform: scale(.92); }
/* 리포트 4항목 공통 라벨 — 통일 */
.pstat-label { font-size: 11px; font-weight: 800; color: #9A94A8; letter-spacing: .2px; margin-bottom: 5px; text-align: left; white-space: nowrap; }
.pinfo-stats { width: 100%; display: flex; gap: 10px; }
.pstat { flex: 1; background: #F7F6FB; border-radius: 13px; padding: 10px 13px; text-align: left; }
.pstat-val { font-size: 13.5px; font-weight: 800; color: #1A1826; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pinfo-fav { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.pinfo-fav-item { background: #F7F6FB; border-radius: 13px; padding: 10px 13px; text-align: left; }
.pinfo-fav .song { border-bottom: none; background: transparent; padding: 0; }
.pinfo-fav .song .a { font-size: 14px; }
.wardrobe-char { display: flex; justify-content: center; min-height: 132px; align-items: center; }
.wardrobe-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ward-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 14px; border-radius: 13px; border: 1.5px solid #E7E4F1; background: #fff; cursor: pointer; font-family: inherit; }
.ward-item.on { border-color: var(--accent); background: var(--soft); }
.ward-item .ward-name { flex: 1; text-align: left; font-weight: 700; font-size: 14px; color: #1A1826; }
.ward-item .ward-toggle { font-size: 12px; font-weight: 800; color: #B4AEC2; }
.ward-item.on .ward-toggle { color: var(--accent); }
.pinfo-custom { width: 100%; }
.pinfo-custom .desc { margin: 4px 0; }
.pinfo-label { font-size: 12px; color: #8B8698; font-weight: 800; margin-bottom: 8px; text-align: left; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1.5px solid #E7E4F1; background: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.chip.on { background: #7C5CFF; color: #fff; border-color: #7C5CFF; }

.tryon-err { color: #E5484D; font-size: 13px; font-weight: 700; }
.tryon-err:empty { display: none; }
.name-err { color: #E5484D; font-size: 13px; font-weight: 700; margin-top: 8px; min-height: 18px; }
.name-err.shake { animation: nameShake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes nameShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
.tryon-info { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.tryon-name { font-size: 16px; color: #1A1826; }
.tryon-owned { font-size: 12px; color: var(--accent); background: var(--soft); padding: 3px 10px; border-radius: 999px; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } }

.screen.space { background: #1E1B2E; position: relative; }
.screen.space .u { color: #EDECF3; }
/* 우주(다크)에선 탭바도 다크로 — 흰 둥근 탭바가 어두운 배경에 떠서 이질적이던 문제 해결 */
/* 탭바 둥근 모서리가 드러내는 뒷배경(.app)도 우주색으로 → 흰 삼각형 안 보이게 */
.app:has(.screen.space) { background: #1E1B2E; }
.screen.space ~ .tabbar { background: #17131F; box-shadow: 0 -4px 22px rgba(0,0,0,.4); }
.screen.space ~ .tabbar .tab { color: #6E6780; }
.screen.space ~ .tabbar .tab.on { color: #C9BEF0; }
.stars {
  position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(1.5px 1.5px at 40px 80px, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 160px 160px, #fff5, transparent),
    radial-gradient(1.3px 1.3px at 280px 100px, #fff5, transparent),
    radial-gradient(1.5px 1.5px at 100px 280px, #fff6, transparent),
    radial-gradient(1.3px 1.3px at 240px 360px, #fff5, transparent);
}
.planets {
  position: relative; display: flex; flex-wrap: wrap; gap: 26px 34px;
  justify-content: center; align-content: center; flex: 1; padding: 20px 10px;
}
.planet-unit { display: flex; flex-direction: column; align-items: center; width: 118px; }
.planet-char { position: relative; margin-bottom: -26px; z-index: 2; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.planet-char img, .planet-char .char-svg { width: 66px; height: auto; display: block; }
.planet-glow { position: relative; }
/* soft glow behind the character (alien face) only — tucked behind the planet ball */
.planet-glow::before {
  content: ""; position: absolute; left: 50%; top: 18px; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,249,228,.82) 24%, rgba(255,246,214,.32) 50%, rgba(255,246,214,0) 72%);
}
.planet-ball {
  position: relative; z-index: 1;
  width: 96px; height: 96px; border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0,0,0,.4), inset -6px -8px 16px rgba(0,0,0,.25);
}
.planet-ball.empty {
  background: radial-gradient(circle at 40% 34%, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
  border: 1.5px solid rgba(237,236,243,.13);
  box-shadow: inset 0 3px 11px rgba(0,0,0,.3); opacity: 1;
}

/* 2-2-1 배치 — 크게, 우주 꽉 차게 */
.planets.col221 { flex-direction: column; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; gap: 0; padding: 8px 0 4px; }
.col221 .prow { display: flex; justify-content: center; align-items: center; gap: 42px; }
.col221 .planet-unit { transform: scale(1.24); }
.col221 .planet-unit.arriving { animation: planetArrive .78s cubic-bezier(.2,1.05,.35,1); }
@keyframes planetArrive {
  0% { opacity: 0; transform: translateY(-72px) scale(.5); }
  55% { opacity: 1; }
  100% { transform: translateY(0) scale(1.24); }
}

.evict-grid {
  position: relative; display: flex; flex-wrap: wrap; gap: 18px 22px;
  justify-content: center; align-content: center; flex: 1; padding: 16px 6px;
}
.evict-unit {
  display: flex; flex-direction: column; align-items: center; width: 92px;
  cursor: pointer; transition: transform .2s;
}
.evict-unit.sel { transform: scale(1.08); }
.evict-unit .planet-char { position: relative; margin-bottom: -20px; z-index: 2; }
.evict-unit .planet-char img { width: 54px; display: block; }
.evict-unit.sel .planet-char::before {
  content: ""; position: absolute; inset: -16px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,180,.95), rgba(255,220,120,0) 68%);
  animation: haloPulse 1.4s ease-in-out infinite;
}
@keyframes haloPulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.18); opacity: 1; } }
.evict-unit .planet-ball { width: 72px; height: 72px; }
.evict-actions { position: relative; display: flex; gap: 10px; padding: 0 4px 16px; }
.evict-actions .btn { flex: 1; }
.evict-head { position: relative; text-align: center; animation: evictIn .42s cubic-bezier(.2,.9,.3,1) both; }
.evict-title { font-size: 23px; font-weight: 800; color: #EDECF3; letter-spacing: -.02em; white-space: nowrap; }
.evict-sub { font-size: 14px; color: #A9A2C4; margin-top: 12px; line-height: 1.55; }
.evict-sub b { color: #EDECF3; font-weight: 800; }
.evict-screen .evict-grid { flex: 0 0 auto; padding: 20px 6px 4px; animation: evictIn .42s cubic-bezier(.2,.9,.3,1) .07s both; }
.evict-unit .planet-char .char-svg { width: 54px; display: block; }
@keyframes evictIn { from { opacity: 0; transform: translateY(16px); } }

.devpanel {
  position: fixed; right: 10px; top: 80px; z-index: 60; width: 148px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px;
  max-height: calc(100dvh - 160px); overflow-y: auto;
  background: #FFF6E9; border: 1px dashed #E9C08B; border-radius: 12px;
}
.devpanel span { grid-column: 1 / -1; }
.devpanel span { font-size: 10px; font-weight: 900; color: #C98A2E; text-align: center; }
.devpanel button {
  width: 100%; font-size: 11px; font-weight: 800; padding: 7px 6px; border-radius: 8px; border: none;
  background: #fff; color: #8A6A2E; cursor: pointer; font-family: inherit;
}
.devpanel button:active { transform: scale(.95); }

.charflip {
  position: relative; width: 180px; height: 210px; cursor: pointer;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,.2,.2,1);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.charflip img { -webkit-user-drag: none; user-drag: none; }
.charwrap.petted { animation: pet-hop .5s ease; }
@keyframes pet-hop {
  0% { transform: translateY(0) scale(1, 1); }
  28% { transform: translateY(-11px) scale(1.05, .96); }
  55% { transform: translateY(0) scale(.97, 1.04); }
  100% { transform: translateY(0) scale(1, 1); }
}
.heart {
  position: absolute; left: 48%; top: 34%; z-index: 5;
  pointer-events: none; animation: heart-rise 1s ease-out forwards;
  filter: drop-shadow(0 2px 3px rgba(255,92,138,.28));
}
.heart svg { width: 26px; height: 26px; display: block; }

.charwrap.annoyed { animation: annoyed-shake .5s ease; }
@keyframes annoyed-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-7px) rotate(-2deg); }
  30% { transform: translateX(6px) rotate(2deg); }
  45% { transform: translateX(-5px) rotate(-1.5deg); }
  60% { transform: translateX(5px) rotate(1.5deg); }
  75% { transform: translateX(-3px); }
}
.mark {
  position: absolute; z-index: 6; pointer-events: none;
  animation: mark-pop .8s ease-out forwards;
}
.mark svg { width: 24px; height: 24px; display: block; }
.char-svg .brows { animation: brow-pop .85s ease forwards; }
@keyframes brow-pop { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
.char-svg .shyb { animation: shy-fade 1.1s ease forwards; }
@keyframes shy-fade { 0%, 100% { opacity: 0; } 25%, 58% { opacity: .9; } }


.charwrap.dancing { animation: dance .6s ease-in-out 3; }
@keyframes dance {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-6px) rotate(-5deg); }
  50% { transform: translateY(0) rotate(0); }
  75% { transform: translateY(-6px) rotate(5deg); }
}
.charwrap.dance2 { animation: dance2 .42s ease-in-out 4; }  /* 콩콩 */
@keyframes dance2 {
  0%, 100% { transform: translateY(0) scaleY(1); }
  28% { transform: translateY(-15px) scaleY(1.06); }
  50% { transform: translateY(0) scaleY(.9); }
  64% { transform: translateY(0) scaleY(1); }
}
.charwrap.dance3 { animation: dance3 .46s ease-in-out 4; }  /* 시미(좌우 흔들) */
@keyframes dance3 {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-7px) rotate(-4deg); }
  40% { transform: translateX(6px) rotate(4deg); }
  60% { transform: translateX(-5px) rotate(-3deg); }
  80% { transform: translateX(5px) rotate(3deg); }
}

/* 장르별 춤 — 속성마다 성격이 다른 움직임 */
.charwrap.d-pop { animation: d-pop .46s ease-in-out 4; }         /* 팝: 옆으로 스텝 밟는 셔플-홉 */
@keyframes d-pop {
  0%, 100% { transform: translate(0, 0) rotate(0) scale(1); }
  25% { transform: translate(-11px, -9px) rotate(-4deg) scale(1.03); }
  50% { transform: translate(0, 0) rotate(0); }
  75% { transform: translate(11px, -9px) rotate(4deg) scale(1.03); }
}
.charwrap.d-hiphop { animation: d-hiphop .5s ease-in-out 4; }    /* 힙합: 무릎 굽히는 바운스+끄덕 */
@keyframes d-hiphop {
  0%, 100% { transform: translateY(0) rotate(0) scaleY(1); }
  25% { transform: translateY(5px) rotate(-3deg) scaleY(.93); }
  45% { transform: translateY(-7px) rotate(-3deg) scaleY(1.02); }
  70% { transform: translateY(5px) rotate(3deg) scaleY(.93); }
  90% { transform: translateY(-7px) rotate(3deg) scaleY(1.02); }
}
.charwrap.d-rock { animation: d-rock .32s ease-in-out 6; }       /* 록: 헤드뱅잉 */
@keyframes d-rock {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-5px) rotate(-14deg); }
  60% { transform: translateY(3px) rotate(13deg); }
}
.charwrap.d-edm { animation: d-edm .34s ease-in-out 6; }         /* EDM: 격한 점프+펄스 */
@keyframes d-edm {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-18px) scale(1.05); }
  55% { transform: translateY(0) scale(.94); }
  75% { transform: translateY(-8px) scale(1.02); }
}
.charwrap.d-rnb { animation: d-rnb .72s ease-in-out 3; }         /* 알앤비: 느리고 부드러운 웨이브 */
@keyframes d-rnb {
  0%, 100% { transform: translateX(0) rotate(0); }
  33% { transform: translateX(-10px) rotate(-5deg); }
  66% { transform: translateX(10px) rotate(5deg); }
}
.charwrap.d-jazz { animation: d-jazz .56s ease-in-out 4; }       /* 재즈: 여유로운 스윙(좌우+살짝 상하) */
@keyframes d-jazz {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-8px, -5px) rotate(-6deg); }
  50% { transform: translate(0, -2px) rotate(0); }
  75% { transform: translate(8px, -5px) rotate(6deg); }
}
.charwrap.d-acoustic { animation: d-acoustic .8s ease-in-out 3; } /* 어쿠스틱: 잔잔한 좌우 흔들 */
@keyframes d-acoustic {
  0%, 100% { transform: translateX(0) rotate(-3deg); }
  50% { transform: translateX(0) rotate(3deg); }
}
.charwrap.d-indie { animation: d-indie .9s ease-in-out 3; }      /* 인디: 몽환적 둥실 */
@keyframes d-indie {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  50% { transform: translate(0, -11px) rotate(3deg); }
}
@keyframes mark-pop {
  0% { opacity: 0; transform: scale(.3); }
  25% { opacity: 1; transform: scale(1.18); }
  60% { transform: scale(1); }
  100% { opacity: 0; transform: scale(1) translateY(-9px); }
}
@keyframes heart-rise {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -74px) scale(1.1); }
}
.charflip.flipped { transform: rotateY(180deg); }
.cf-face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* 사파리(WebKit)는 preserve-3d 내부 자식(.char-svg)에 filter: drop-shadow가 있으면
     backface 컬링이 깨져 뒤돌아선 면까지 그린다(크롬은 정상) → 앞·뒷면 겹침.
     backface-visibility에만 의존하지 않고 안 보이는 면을 visibility로 확실히 숨긴다.
     .6s 플립의 절반(90°, 모서리로 서는 순간)에 전환돼 회전 중 깜빡임이 없고,
     opacity와 달리 visibility는 preserve-3d를 평탄화하지 않아 캐릭터가 사라지지 않는다. */
  transition: visibility 0s linear .3s;
}
/* 앞면도 3D 변환을 명시해야 standalone WKWebView(설치형 PWA)가 backface-visibility로
   뒷면을 컬링한다. 없으면 앞·뒷면이 겹쳐 보임(브라우저는 정상, 설치 앱만 버그). */
.cf-front { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
.cf-back { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); visibility: hidden; }
.charflip.flipped .cf-front { visibility: hidden; }
.charflip.flipped .cf-back { visibility: visible; }
.cf-back img {
  width: 168px; height: auto; filter: drop-shadow(0 10px 14px rgba(30,27,46,.14));
  animation: float 3.6s ease-in-out infinite;
}

.egg .crackline {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none;
}
.egg .crackline path {
  fill: none; stroke: #9A9188; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; transition: stroke-dashoffset .55s cubic-bezier(.6,0,.35,1);
}
.egg.wobble { animation: eggwobble 1.4s ease-in-out infinite; }
@keyframes eggwobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }

/* 부화 임박: 7곡 약하게 → 8곡 → 9곡 엄청 흔들림 (알 밑동을 축으로 흔들) */
.egg.wobble1, .egg.wobble2, .egg.wobble3 { transform-origin: 50% 84%; }
.egg.wobble1 { animation: eggw1 1.5s ease-in-out infinite; }
.egg.wobble2 { animation: eggw2 .95s ease-in-out infinite; }
.egg.wobble3 { animation: eggw3 .9s ease-in-out infinite; }
@keyframes eggw1 { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes eggw2 { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes eggw3 {
  0%,100% { transform: rotate(0) translateY(0); }
  15% { transform: rotate(-10deg); }
  40% { transform: rotate(10deg) translateY(-4px); }
  65% { transform: rotate(-8deg); }
  85% { transform: rotate(6deg) translateY(-2px); }
}

.emojirow { text-align: center; font-size: 17px; letter-spacing: 3px; margin: 2px 0 4px; }

.bubble {
  display: flex; gap: 4px; background: #fff; padding: 6px 11px; border-radius: 13px;
  position: relative; box-shadow: 0 5px 14px rgba(0,0,0,.14);
}
.bubble::after {
  content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff; border-bottom: 0;
}
.bubble span { display: block; opacity: 0; transform: scale(0); animation: emojipop .4s cubic-bezier(.2,1.6,.4,1) forwards; }
.bubble span svg { width: 21px; height: 21px; display: block; }
@keyframes emojipop { to { opacity: 1; transform: scale(1); } }

.char-svg {
  width: 180px; height: auto; display: block;
  filter: drop-shadow(0 10px 14px rgba(30,27,46,.14));
  animation: float 3.6s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.char-svg .e, .char-svg .sh {
  transform-box: fill-box; transform-origin: center; animation: blink 4.5s ease-in-out infinite;
}
@keyframes blink { 0%, 91%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }

.hatch {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 440px;
  z-index: 200; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
  background: rgba(20,18,30,0); animation: hatchbg .6s ease forwards;
}
@keyframes hatchbg { to { background: rgba(20,18,30,.6); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } }
.hatch-stage { position: relative; width: 230px; height: 250px; display: grid; place-items: center; }
.hatch-stage > * { grid-area: 1 / 1; }
.egg.big { width: 150px; height: 190px; }
.egg.big { transform-origin: 50% 86%; }
.egg.big.shaking { animation: eggshake 2s ease-in .15s, egggone .4s ease 2.05s forwards; }
@keyframes eggshake {
  0% { transform: rotate(0); }
  8% { transform: rotate(-2deg); } 16% { transform: rotate(2deg); }
  26% { transform: rotate(-3.5deg); } 36% { transform: rotate(3.5deg); }
  48% { transform: rotate(-6deg); } 58% { transform: rotate(6deg); }
  68% { transform: rotate(-9deg) translateY(-2px); } 78% { transform: rotate(9deg) translateY(-3px); }
  87% { transform: rotate(-12deg); } 94% { transform: rotate(11deg) translateY(-2px); }
  100% { transform: rotate(0); }
}
@keyframes egggone { to { opacity: 0; transform: scale(.5); } }
.hatch-flash {
  width: 130px; height: 130px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #ffe9a8 38%, rgba(255,220,140,0) 70%);
  animation: hatchflash .9s ease 1.7s forwards;
}
@keyframes hatchflash { 0% { opacity: 0; transform: scale(.2); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(3.4); } }
.hatch-reveal {
  display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0;
  animation: hatchreveal .6s cubic-bezier(.2,1.5,.4,1) 2.2s forwards;
}
@keyframes hatchreveal { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: scale(1); } }
.hatch-cap { color: #fff; font-weight: 900; font-size: 20px; opacity: 0; animation: fadeup .5s ease 2.55s forwards; }
.hatch-ok { max-width: 220px; opacity: 0; animation: fadeup .5s ease 2.85s forwards; }
@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.evo {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 440px;
  z-index: 200; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  background: rgba(20,18,30,0); animation: hatchbg .5s ease forwards;
}
.evo-stage { position: relative; width: 220px; height: 220px; display: grid; place-items: center; }
.evo-stage > * { grid-area: 1 / 1; }
/* 말풍선을 스테이지(캐릭터) 위로 빼서 어떤 캐릭터·단계에서도 안 겹치게 */
.evo-bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px;
  z-index: 3; opacity: 0; animation: hatchreveal .5s cubic-bezier(.2,1.5,.4,1) 1.15s forwards; }
/* 리뷰 말풍선을 중앙 더듬이 피해 오른쪽 위로 */
.hatch-reveal .bubble, .maxfinal .bubble { align-self: flex-end; margin-right: 18px; }
.evo-char.silhouette img { filter: brightness(0) drop-shadow(0 0 12px rgba(170,140,255,.7)); }
.evo-char.silhouette { animation: evoshake .85s ease-in-out, evogone .01s linear .96s forwards; }
@keyframes evoshake {
  0% { transform: scale(1) rotate(0); } 25% { transform: scale(1.06) rotate(-5deg); }
  50% { transform: scale(1.12) rotate(5deg); } 75% { transform: scale(1.18) rotate(-4deg); }
  100% { transform: scale(1.24) rotate(0); }
}
@keyframes evogone { to { opacity: 0; } }
.evo-flash {
  width: 120px; height: 120px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #d9c6ff 40%, rgba(200,180,255,0) 70%);
  animation: hatchflash .8s ease .78s forwards;
}
.evo-char.final { opacity: 0; animation: hatchreveal .5s cubic-bezier(.2,1.5,.4,1) 1.0s forwards; }
.evo-cap { color: #fff; font-weight: 900; font-size: 20px; opacity: 0; animation: fadeup .5s ease 1.35s forwards; }
.evo-sub { color: #C7C1DB; font-weight: 700; font-size: 13px; line-height: 1.6; text-align: center; opacity: 0; animation: fadeup .5s ease 1.5s forwards; }
.evo-ok { max-width: 220px; opacity: 0; animation: fadeup .5s ease 1.75s forwards; }
.evo-char.final.maxfinal { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.send-wrap { position: relative; align-self: center; margin-top: 18px; }
.send-wrap::before {
  content: ""; position: absolute; inset: -10px -14px; border-radius: 26px; z-index: 0;
  background: linear-gradient(100deg, #6E9CF6, #A47BF0, #E486AE);
  filter: blur(16px); opacity: .55;
}
.btn.send-space {
  position: relative; z-index: 1; width: auto; padding: 0 36px; height: 52px;
  font-size: 15px; font-weight: 900; color: #5A4B7A;
  background: rgba(255,255,255,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.9); border-radius: 15px;
  box-shadow: 0 6px 20px rgba(140,120,240,.22);
}
.confirm-btns { display: flex; gap: 10px; width: 100%; margin-top: 8px; }
.confirm-btns .btn { flex: 1; margin: 0; }

.grad {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 440px;
  z-index: 200; background: #1E1B2E;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  animation: gradbg .5s ease forwards;
}
@keyframes gradbg { from { background: rgba(30,27,46,0); } to { background: #1E1B2E; } }
.grad-scene { position: relative; width: 240px; height: 320px; }
.grad-flyer {
  position: absolute; left: 50%; bottom: 20px; animation: gradfly 1.7s ease-in forwards;
}
.grad-ship { display: block; width: 150px; }
.grad-ship svg { width: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.grad-rider { position: absolute; left: 46%; bottom: 34px; transform: translateX(-50%); z-index: 2; }
.grad-rider img { width: 52px; display: block; }
@keyframes gradfly {
  0% { transform: translate(-50%, 20px) scale(1) rotate(-8deg); opacity: 1; }
  55% { opacity: 1; }
  100% { transform: translate(20%, -270px) scale(.4) rotate(-24deg); opacity: 0; }
}
.grad-landing {
  position: absolute; left: 50%; top: 88px; opacity: 0;
  display: flex; flex-direction: column; align-items: center;
  animation: gradLandUp .6s ease 1.35s forwards;
}
@keyframes gradLandUp { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.grad-landing .planet-char { margin-bottom: -30px; z-index: 2; }
.grad-landing .planet-char img, .grad-landing .planet-char .char-svg { width: 76px; display: block; }
.grad-landing .planet-ball { width: 110px; height: 110px; }
.grad-landing .planet-ball { width: 84px; height: 84px; }
.grad-cap { color: #fff; font-weight: 900; font-size: 19px; opacity: 0; animation: fadeup .5s ease 1.7s forwards; }
.grad-ok { max-width: 220px; opacity: 0; animation: fadeup .5s ease 1.95s forwards; }

/* ===== 상점 ===== */
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 4px; }
.shop-card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  cursor: pointer; font-family: var(--font); width: 100%;
}
.shop-card:active { transform: scale(.97); }
.shop-icon {
  width: 88px; height: 76px; display: flex; align-items: center; justify-content: center;
  background: var(--line2); border-radius: 14px;
}
.acc-icon { width: 62px; height: 56px; overflow: visible; }
.shop-name { font-size: 13px; font-weight: 800; color: var(--ink); }
.shop-tag {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: var(--accent); background: var(--soft);
  padding: 5px 12px; border-radius: 20px;
}
.shop-tag.own { color: var(--muted); background: var(--line2); }

/* 게임 탭 */
.game-list { display: flex; flex-direction: column; gap: 12px; }

/* 리듬 게임 진입 버튼 */
.game-cta {
  width: 100%; display: flex; align-items: center; gap: 12px; margin: 4px 0 4px;
  padding: 13px 15px; border: none; border-radius: 18px; cursor: pointer; font-family: var(--font);
  background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #fff;
  box-shadow: 0 8px 18px rgba(46,163,122,.28);
}
.game-cta.alt { background: linear-gradient(120deg, #7C6BF0, #9E88D6); box-shadow: 0 8px 18px rgba(124,107,240,.28); }
.game-cta:active { transform: scale(.98); }
.game-cta-ic {
  width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: rgba(255,255,255,.22); border-radius: 12px;
}
.game-cta-ic svg { width: 24px; height: 24px; display: block; }
.game-cta-tx { flex: 1; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.game-cta-tx b { font-size: 15px; font-weight: 900; }
.game-cta-tx small { font-size: 12px; font-weight: 700; opacity: .9; }
.game-cta-go { display: flex; align-items: center; opacity: .9; }
.game-cta-go svg { width: 15px; height: 15px; display: block; }
.game-sec { font-size: 11px; font-weight: 900; color: var(--muted); letter-spacing: .4px; margin: 14px 2px 8px; }
.game-list:first-of-type ~ .game-sec { margin-top: 20px; }
/* 준비 중 게임 — 눌리지 않는 점선 카드 */
.game-cta.soon { background: none; border: 1.5px dashed var(--line); box-shadow: none; color: var(--muted); cursor: default; }
.game-cta.soon:active { transform: none; }
.game-cta.soon .game-cta-ic { background: var(--line2); color: var(--muted); }
.game-cta.soon .game-cta-tx b { color: var(--ink); opacity: .7; }

/* 리듬 게임 화면(캔버스 스테이지) */
.game-overlay {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 440px; z-index: 60; display: flex; flex-direction: column;
  background: radial-gradient(120% 90% at 50% 0%, #14332B 0%, #0E1B2E 60%, #0B1220 100%);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.game-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px 8px; }
.game-x {
  width: 34px; height: 34px; flex: none; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 15px; font-family: var(--font);
}
.game-prog { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; }
.game-prog i { display: block; height: 100%; width: 0; background: var(--accent2); transition: width .12s linear; }
.game-combo { flex: none; display: flex; align-items: baseline; gap: 4px; color: #fff; }
.game-combo b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.game-combo span { font-size: 11px; font-weight: 800; opacity: .7; }
.game-canvas { flex: 1; width: 100%; display: block; }
.game-count {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 64px; font-weight: 900; color: #fff; pointer-events: none; text-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.game-result {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 440px; box-sizing: border-box; padding: 24px 22px 26px;
  background: var(--card); border-radius: 24px 24px 0 0; display: flex; flex-direction: column; gap: 10px;
  animation: sheetUp .28s cubic-bezier(.22,1,.36,1);
}
.gr-title { font-size: 21px; font-weight: 900; color: var(--ink); text-align: center; margin-bottom: 4px; }
.gr-rows { display: flex; flex-direction: column; gap: 2px; }
.gr-row { display: flex; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid var(--line2); font-size: 14px; font-weight: 800; color: var(--ink); }
.gr-row span { color: var(--muted); }
.gr-row b { font-variant-numeric: tabular-nums; }
.gr-earn { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 8px 0 4px; }
.gr-earn .coin { font-size: 22px; }
.gr-earn small { font-size: 12px; font-weight: 700; color: var(--muted); }
@keyframes sheetUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }

/* 카드 짝 맞추기 */
.mem-title { flex: 1; text-align: center; color: #fff; font-size: 15px; font-weight: 900; }
.mem-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 16px 28px; }
.mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 340px; }
.mem-grid .spin { grid-column: 1 / -1; margin: 40px auto; }
.mcard { aspect-ratio: 1 / 1.14; background: none; border: none; padding: 0; cursor: pointer; perspective: 640px; }
.mcard-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.2,.7,.3,1);
}
.mcard.up .mcard-inner, .mcard.done .mcard-inner { transform: rotateY(180deg); }
.mcard-face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.mcard-face { overflow: hidden; }   /* 더듬이 등 뷰박스 밖 요소는 카드에서 클리핑 */
.mcard-back {
  background: linear-gradient(160deg, #2f9e77, #1d7a5b);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14);
}
.mcard-back svg { width: 34%; height: auto; color: rgba(255,255,255,.42); }
.mcard-front {
  background: #fff; transform: rotateY(180deg);
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.mcard-front svg { width: 100%; height: 100%; display: block; animation: none; }   /* 카드는 둥실 애니메이션 끔(더듬이가 위에 닿음) */
.mcard.done { animation: matchPop .42s ease; }
/* 매치 표시는 앞면 틴트로 — .mcard-inner에 opacity를 주면 preserve-3d가 평탄화돼 캐릭터가 사라짐 */
.mcard.done .mcard-front { background: #E4F7EC; box-shadow: inset 0 0 0 2px rgba(79,190,147,.8); }
@keyframes matchPop { 40% { transform: scale(1.09); } }

/* 트라이온(내 캐릭터에 입혀보기) */
.tryon-char { display: flex; align-items: center; justify-content: center; min-height: 176px; margin-bottom: 4px; }
.tryon-char .char-svg { filter: drop-shadow(0 10px 14px rgba(30,27,46,.14)); }
.tryon-price { margin: 4px 0 12px; }
.tryon-price .coin { font-size: 15px; }

/* ===== 설정 ===== */
.set-list { display: flex; flex-direction: column; margin-top: 6px; flex: 1; min-height: 0; overflow-y: auto; }
.set-sec { font-size: 11px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 18px 0 6px; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line2); font-size: 14px; font-weight: 800; }
.set-row > span:first-child { flex: none; }
.set-val { color: var(--muted); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.set-item {
  text-align: left; background: none; border: none; cursor: pointer; font-family: var(--font);
  padding: 13px 2px; border-bottom: 1px solid var(--line2); font-size: 14px; font-weight: 800; color: var(--ink);
}
.set-item:active { opacity: .6; }
.set-item.danger { color: #E0574E; }
.set-item.accent { color: #1DB954; }
.set-val.edit { display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.set-val.edit .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-val .nameedit { flex: none; }
.set-gap { height: 16px; }
.privacy-body { text-align: left; width: 100%; max-height: 42vh; overflow-y: auto; font-size: 13.5px; line-height: 1.65; color: #4A4560; }
.privacy-body p { margin: 0 0 12px; }
.privacy-body b { color: #1A1826; }
.pv-withdraw { color: #D64535; background: #FDECEA; border: 1.5px solid #F3C3BC; font-weight: 800; }
.pv-withdraw:active { background: #FBDAD5; }
.set-credit { margin-top: auto; padding: 22px 0 12px; font-size: 11px; color: var(--muted); font-weight: 700; line-height: 1.7; text-align: center; }

/* ===== 더보기(...) 메뉴 ===== */
.menu-list { display: flex; flex-direction: column; width: 100%; }
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 15px 6px; border: none; background: none; cursor: pointer; font-family: var(--font);
  font-size: 15px; font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--line2);
}
.menu-item:active { opacity: .6; }
.menu-ic { width: 20px; height: 20px; display: inline-flex; color: var(--muted); flex: none; }
.menu-ic svg { width: 100%; height: 100%; display: block; }