*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
html,body{ height:100%; overflow:hidden; background:#16121f; font-family:'Fredoka',system-ui,sans-serif;
  word-break:keep-all; overflow-wrap:break-word; }  /* 한글 음절중간 줄바꿈 금지(어절 단위). 예: '더 높이'가 '높/이'로 쪼개지지 않게. CLAUDE 절대규칙 */
#cv{ position:fixed; inset:0; width:100%; height:100%; image-rendering:auto; touch-action:none; display:block; }

#hud{ position:fixed; top:calc(env(safe-area-inset-top,8px) + 2px); left:52px; right:52px; display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; z-index:5; }
#height{ position:absolute; left:0; right:0; top:-2px; text-align:center; font-size:34px; font-weight:700; color:#fff; letter-spacing:.5px;
  text-shadow:-2px 0 0 #8a2f6e, 2px 0 0 #8a2f6e, 0 -2px 0 #8a2f6e, 0 2px 0 #8a2f6e, -1.5px -1.5px 0 #8a2f6e, 1.5px 1.5px 0 #8a2f6e, -1.5px 1.5px 0 #8a2f6e, 1.5px -1.5px 0 #8a2f6e, 0 5px 0 #5e1e4b, 0 6px 14px rgba(60,10,40,.45); }
#right{ position:absolute; right:-44px; top:42px; }
#candy{ font-size:17px; font-weight:700; color:#ffe14d; background:rgba(60,18,48,.55); padding:3px 10px 3px 8px; border-radius:14px; text-shadow:0 1.5px 0 rgba(0,0,0,.35); }
#combo{ position:fixed; top:34%; left:0; right:0; text-align:center; font-size:42px; font-weight:700; color:#fff;
  text-shadow:-2px 0 0 #e0459c, 2px 0 0 #e0459c, 0 -2px 0 #e0459c, 0 2px 0 #e0459c, 0 5px 0 #7a2e66, 0 0 26px rgba(255,120,200,.9); pointer-events:none; z-index:5; opacity:0; transition:opacity .15s; }

.overlay{ position:fixed; inset:0; bottom:var(--ad-h,0px); z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  background:radial-gradient(ellipse at 50% 36%, rgba(80,40,110,.35), rgba(18,12,30,.82)); }
.logo{ font-size:clamp(48px,17vw,96px); font-weight:700; line-height:.95; color:#ff9ed6; text-shadow:0 6px 0 #c44e9b, 0 10px 18px rgba(0,0,0,.5), 0 0 30px rgba(255,150,215,.5); }
.logo span{ display:block; color:#9be0ff; text-shadow:0 6px 0 #3f8fc4, 0 10px 18px rgba(0,0,0,.5), 0 0 30px rgba(150,220,255,.5); }
.sub{ font-size:clamp(15px,4.6vw,20px); font-weight:600; color:#ffe9b0; text-shadow:0 2px 0 rgba(0,0,0,.4); }
.tip{ font-size:clamp(11px,3.3vw,14px); color:#d9cdf0; max-width:80%; text-align:center; line-height:1.7;
  text-wrap:balance; }            /* 좌우 여백 균형(지원 브라우저). 미지원이어도 아래 .ph nowrap이 절 경계 끊김 보장 */
.tip .ph{ white-space:nowrap; }   /* 절(節)은 통째 유지 → 줄바꿈은 '·' 구분자에서만(단어/절 중간 끊김 0) */
.over-title{ font-size:clamp(40px,12vw,64px); font-weight:700; color:#ff6aa6; text-shadow:0 5px 0 #8a2a55, 0 0 22px rgba(255,90,140,.6); }
.stat{ font-size:clamp(24px,8vw,34px); font-weight:700; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.3); }
.stat.small{ font-size:clamp(12px,3.6vw,15px); font-weight:500; color:#ffe14d; }

.jbtn{ margin-top:6px; cursor:pointer; font-family:inherit; font-size:clamp(18px,5.5vw,24px); font-weight:700; color:#fff; letter-spacing:.5px;
  background:linear-gradient(#ff9ed6,#ff5fb0); padding:16px 40px; border:none; border-radius:40px;
  box-shadow:0 7px 0 #c0397f, 0 12px 20px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.5); text-shadow:0 2px 2px rgba(0,0,0,.2); }
.jbtn:active{ transform:translateY(6px); box-shadow:0 1px 0 #c0397f, 0 4px 10px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.5); }
#startBtn{ animation:bob 1s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* 타이틀: 위 = 로고, 가운데 = 실제 게임 장면(젤리 조준), 아래 = 시작 */
#startScreen{ justify-content:space-between; gap:0; padding:58px 0 18px;
  background:linear-gradient(to bottom, rgba(44,14,42,.62) 0%, rgba(44,14,42,.18) 26%, rgba(44,14,42,0) 36%, rgba(44,14,42,0) 70%, rgba(44,14,42,.55) 100%); }
#startScreen .ttl,#startScreen .cta{ display:flex; flex-direction:column; align-items:center; gap:14px; }
#startScreen .cta{ gap:12px; width:100%; }
#startScreen .sub{ text-shadow:-1.5px 0 0 #6a2552, 1.5px 0 0 #6a2552, 0 -1.5px 0 #6a2552, 0 1.5px 0 #6a2552, 0 3px 0 #4a1838; }
#startScreen .tip{ color:#fff3fb; text-shadow:0 1px 3px rgba(40,10,30,.8); }
.bestRow{ font-size:15px; font-weight:600; color:#ffe9b0; letter-spacing:1px; background:rgba(60,18,48,.5); padding:4px 14px; border-radius:14px; }
.bestRow b{ color:#fff; font-weight:700; font-size:17px; }

.jbtn:disabled{ opacity:.6; }