/* 모건과 제인 — 어린이 톤 스킨 (파스텔 하늘/구름, 사탕색) 2026-08-24 */
:root{
  --sky1:#cdeaff; --sky2:#ffeef7;
  --panel:#ffffff; --line:#ffd9e6;
  --text:#5a4668; --sub:#9a8aa8;
  --pink:#ff8fb5; --pink2:#e86f9c;
  --yellow:#ffd166; --green:#7cc576; --blue:#6fb3e8;
  --card:#fff8fb;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 100%) fixed;
  font-family:"Jua","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  -webkit-user-select:none; user-select:none; overflow:hidden;
  touch-action:manipulation;
}
input{-webkit-user-select:text; user-select:text}
#loading{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--pink2); background:linear-gradient(180deg,var(--sky1),var(--sky2)); z-index:99}

/* ---------- 화면 전환 ---------- */
.scr{position:fixed; inset:0; display:none; overflow:hidden}
.scr.show{display:block}
.scr.game.show{display:flex; flex-direction:column}

/* ---------- 하늘 장식 ---------- */
.sky-deco{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.cl{position:absolute; background:#fff; border-radius:999px; opacity:.85; filter:blur(2px)}
.cl::before,.cl::after{content:''; position:absolute; background:#fff; border-radius:999px}
.c1{width:120px; height:44px; left:8%; top:12%; animation:drift 34s linear infinite}
.c1::before{width:60px; height:60px; left:16px; top:-26px}
.c1::after{width:44px; height:44px; right:18px; top:-16px}
.c2{width:90px; height:34px; right:10%; top:22%; animation:drift 46s linear infinite reverse}
.c2::before{width:44px; height:44px; left:14px; top:-18px}
.c3{width:140px; height:50px; left:20%; bottom:16%; opacity:.6; animation:drift 52s linear infinite}
.c3::before{width:70px; height:70px; left:22px; top:-30px}
@keyframes drift{0%{transform:translateX(0)}50%{transform:translateX(26px)}100%{transform:translateX(0)}}
.rainbow{position:absolute; left:50%; top:-210px; transform:translateX(-50%);
  width:520px; height:520px; border-radius:50%;
  border:16px solid transparent; opacity:.5;
  background:
    radial-gradient(closest-side, transparent calc(100% - 66px),
      #ffb3c7 calc(100% - 66px), #ffb3c7 calc(100% - 55px),
      #ffd9a0 calc(100% - 55px), #ffd9a0 calc(100% - 44px),
      #fff3b0 calc(100% - 44px), #fff3b0 calc(100% - 33px),
      #c9ecc4 calc(100% - 33px), #c9ecc4 calc(100% - 22px),
      #bcdcf5 calc(100% - 22px), #bcdcf5 calc(100% - 11px),
      #ddc9f0 calc(100% - 11px), #ddc9f0 100%)}

/* ---------- 타이틀 ---------- */
.title-in,.menu-in{position:relative; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; padding:20px; max-width:520px; margin:0 auto}
.logo{margin:0; font-size:52px; line-height:1.1; text-align:center; letter-spacing:2px;
  color:var(--pink2);
  text-shadow:0 3px 0 #fff, 0 6px 0 rgba(232,111,156,.25)}
.logo.sm{font-size:34px}
.tagline{margin:0; font-size:18px; color:var(--sub)}
.angel-btn{position:relative; border:0; background:none; cursor:pointer; padding:22px; margin-top:6px;
  animation:bob 2.6s ease-in-out infinite}
.angel-btn img{width:150px; height:150px; display:block; position:relative; z-index:1;
  filter:drop-shadow(0 8px 14px rgba(180,140,80,.35))}
.angel-glow{position:absolute; inset:0; border-radius:50%; z-index:0;
  background:radial-gradient(circle,#fff6c9 0%,rgba(255,246,201,.0) 68%);
  animation:glow 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes glow{0%,100%{opacity:.6; transform:scale(.94)}50%{opacity:1; transform:scale(1.06)}}
.tap-hint{margin:0; font-size:19px; color:var(--pink2); animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- 버튼 ---------- */
.btn{appearance:none; border:0; cursor:pointer; font-family:inherit; color:#fff;
  background:var(--blue); font-size:17px; padding:12px 18px; border-radius:16px;
  box-shadow:0 4px 0 rgba(0,0,0,.12); transition:transform .06s}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.12)}
.btn.big{width:100%; max-width:320px; font-size:22px; padding:16px}
.btn.start{background:linear-gradient(180deg,#ff9fbe,#ee7ba3); box-shadow:0 5px 0 #d4638b}
.btn.start:disabled{background:#cfc4d8; box-shadow:0 5px 0 #b6abbf; cursor:default}
.btn.ghost{background:#fff; color:var(--pink2); border:3px solid var(--line); box-shadow:0 4px 0 var(--line)}

/* ---------- 메뉴 ---------- */
.menu-angel{width:104px; height:104px; animation:bob 2.6s ease-in-out infinite}
.plays-chip{background:#fff; border:3px solid var(--line); color:var(--pink2);
  border-radius:999px; padding:8px 20px; font-size:18px}
.countdown{display:none; font-size:15px; color:var(--sub)}
.menu-note{margin:2px 0 0; font-size:14px; color:var(--sub)}

/* ---------- 모달 공통 ---------- */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(90,70,104,.45); z-index:40; padding:18px}
.modal.show{display:flex}
.modal-card{position:relative; width:100%; max-width:360px; background:var(--panel);
  border:4px solid var(--line); border-radius:24px; padding:22px 20px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  box-shadow:0 14px 30px rgba(120,80,120,.25); max-height:92dvh; overflow-y:auto}
.modal-card h2{margin:0; font-size:24px; color:var(--pink2)}
.modal-card input{width:100%; font-family:inherit; font-size:19px; text-align:center;
  border:3px solid var(--line); border-radius:14px; padding:12px; color:var(--text); background:var(--card); outline:none}
.modal-card input:focus{border-color:var(--pink)}
.mc-x{position:absolute; right:10px; top:10px; border:0; background:none; font-size:20px;
  color:var(--sub); cursor:pointer; padding:6px}
.gate-angel{width:110px; height:110px}
.gate-angel.shake{animation:headshake .6s ease}
@keyframes headshake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}
  60%{transform:rotate(-9deg)}80%{transform:rotate(6deg)}}

/* ---------- 게임 화면 ---------- */
.scr.game{background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 100%)}
.g-top{flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top))}
.gt-x{border:0; background:#fff; color:var(--sub); width:34px; height:34px; border-radius:12px;
  font-size:16px; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.08)}
.gt-title{flex:1 1 auto; font-size:18px; color:var(--pink2)}
.gt-score{display:inline-flex; align-items:center; gap:5px; background:#fff; border:2px solid var(--line);
  border-radius:999px; padding:4px 14px; font-size:16px; color:#c07f1f}
.gt-score i{width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 34% 30%,#ffe9a8,#f2b93c)}
/* 폰은 화면 폭 그대로, 아이패드에서는 판을 키운다(세로 여유가 많아 560px 는 작아 보였다) */
#game-root{flex:1 1 auto; position:relative; min-height:0; max-width:560px; width:100%; margin:0 auto}
@media (min-width:700px){ #game-root{max-width:700px} }

/* 게임 내부(디펜스) — 원본 클래스명 유지, 파스텔로 재정의 */
.g-wrap{position:absolute; inset:0; display:flex; flex-direction:column}
.g-bar{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:7px 14px;
  font-size:16px; color:var(--text)}
.g-bar .sp{flex:1 1 auto}
.mg-heart{color:#ff6b81; font-size:17px; line-height:1; letter-spacing:1px; vertical-align:-2px}
.mg-heart.off{color:rgba(120,100,130,.25)}
.g-stage{flex:1 1 auto; min-height:0; position:relative; overflow:hidden; padding:6px 10px}
/* 판은 스테이지 안에서 세로 가운데 — 어린이 화면이라 아래 큰 여백이 어색했다(2026-08-24) */
.g-canvas{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:block; touch-action:none; border-radius:16px;
  background:#fffdf6; box-shadow:0 0 0 4px #fff, 0 8px 18px rgba(150,110,150,.18)}
.d-info{flex:0 0 auto; margin:4px 10px 0; padding:6px 12px; background:#fff; border-radius:12px;
  font-size:14px; color:var(--sub); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.d-cards{flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  padding:6px 10px calc(10px + env(safe-area-inset-bottom))}
.d-card{display:flex; align-items:flex-start; gap:4px;
  background:var(--card); border:3px solid var(--line); border-radius:14px;
  padding:4px 5px; cursor:pointer; color:var(--text); font-family:inherit; text-align:left; min-width:0;
  box-shadow:0 3px 0 rgba(230,180,205,.4)}
.dc-pic{flex:0 0 auto; position:relative; display:block; line-height:0}
.d-card canvas{flex:0 0 auto; display:block}
.dc-dmg{position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  padding:0 4px; border-radius:6px; background:rgba(255,255,255,.9);
  font-size:10.5px; color:#b5731f; line-height:1.35; white-space:nowrap}
.dc-txt{flex:1 1 auto; min-width:0; display:block}
.d-card b{display:block; font-size:15px; letter-spacing:-.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.d-card i{display:block; font-style:normal; font-size:11.5px; color:var(--sub); font-weight:400;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dc-cost{display:flex; align-items:center; gap:3px; font-size:12px; color:#c07f1f; line-height:1.3}
.dc-coin,.d-gold::before{content:''; flex:0 0 auto; width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffe9a8,#f2b93c)}
.d-gold{display:inline-flex; align-items:center; gap:4px; color:#c07f1f}
.d-gold::before{display:inline-block}
.d-card.on{border-color:var(--yellow); background:#fff6dc}
.d-card.able{opacity:1; filter:none}
.d-card.poor{opacity:.45; filter:grayscale(.8); cursor:default}
.d-card:active{transform:translateY(2px)}

/* ---------- 튜토리얼 ---------- */
.tut{position:absolute; left:0; right:0; bottom:calc(118px + env(safe-area-inset-bottom));
  display:none; flex-direction:column; align-items:center; gap:2px; pointer-events:none; z-index:20}
.tut.show{display:flex}
.tut-bubble{background:#fff; border:3px solid var(--yellow); color:var(--text);
  border-radius:16px; padding:10px 16px; font-size:16px; text-align:center;
  box-shadow:0 6px 14px rgba(150,110,60,.25)}
.tut-arrow{color:var(--yellow); font-size:26px; text-shadow:0 2px 0 rgba(0,0,0,.08);
  animation:tutbounce 1s ease-in-out infinite}
@keyframes tutbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ---------- 게임 오버 ---------- */
.over-card{gap:10px}
.ov-confetti{display:flex; gap:10px; font-size:22px}
.ov-confetti i{font-style:normal; animation:bob 1.8s ease-in-out infinite}
.ov-confetti i:nth-child(2){animation-delay:.2s}
.ov-confetti i:nth-child(3){animation-delay:.4s}
.ov-confetti i:nth-child(4){animation-delay:.6s}
.ov-confetti i:nth-child(5){animation-delay:.8s}
.ov-score{font-size:40px; color:var(--pink2); line-height:1}
.ov-score span{font-size:46px}
.ov-stats{width:100%; display:flex; flex-direction:column; gap:2px}
.ov-stat{display:flex; justify-content:space-between; font-size:14px; color:var(--sub); padding:2px 6px}
.ov-stat b{color:var(--text); font-weight:400}
.ov-name-row{display:flex; gap:8px; width:100%}
.ov-name-row input{flex:1 1 auto; min-width:0; font-size:16px; padding:10px}
.ov-name-row .btn{flex:0 0 auto; font-size:15px; padding:10px 14px; background:var(--green); box-shadow:0 4px 0 #5da457}
.ov-rank{width:100%; display:flex; flex-direction:column; gap:3px}

/* ---------- 랭킹 ---------- */
.rank-in{height:100%; display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:26px 18px calc(20px + env(safe-area-inset-bottom)); max-width:520px; margin:0 auto}
.rank-title{margin:6px 0 0; font-size:30px; color:var(--pink2);
  text-shadow:0 2px 0 #fff}
.rank-list{flex:1 1 auto; width:100%; overflow-y:auto; display:flex; flex-direction:column; gap:8px}
.rk-row{display:flex; align-items:center; gap:12px; background:#fff; border:3px solid var(--line);
  border-radius:16px; padding:12px 16px; font-size:17px}
.rk-row.sm{padding:7px 12px; font-size:14px; gap:8px; border-width:2px}
.rk-row.me{border-color:var(--yellow); background:#fff6dc}
.rk-row:nth-child(1) .rk-no{background:linear-gradient(180deg,#ffe08a,#f2b93c)}
.rk-row:nth-child(2) .rk-no{background:linear-gradient(180deg,#e8e8e8,#c9c9c9)}
.rk-row:nth-child(3) .rk-no{background:linear-gradient(180deg,#f0c2a0,#d89a6a)}
.rk-no{flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:#efe6f2;
  display:flex; align-items:center; justify-content:center; color:#7a5f86; font-size:15px}
.rk-row.sm .rk-no{width:24px; height:24px; font-size:12px}
.rk-name{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rk-score{flex:0 0 auto; color:var(--pink2)}
.rk-load{text-align:center; color:var(--sub); padding:30px 0; font-size:15px}

/* ---------- 토스트 ---------- */
.toast{position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(12px);
  background:#5a4668; color:#fff; padding:11px 20px; border-radius:999px; font-size:15px; opacity:0;
  transition:opacity .2s, transform .2s; pointer-events:none; z-index:60; white-space:nowrap}
.toast.show{opacity:.95; transform:translateX(-50%) translateY(0)}

/* 시뮬 모드 — 화면 갱신 최소화 */
body.simming .g-canvas{opacity:.25}