/* 물방울 — 화면 */
:root{
  --sky1:#eaf7ff;
  --sky2:#cfeaff;
  --ink:#17384f;
  --dim:#6d8ea6;
  --blue:#1c7fd6;
  --blue-d:#1466ab;
  --line:#c5e2f7;
  --paper:#ffffff;
  --good:#3fbf5a;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none}
body{
  background:var(--sky2);color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  overflow:hidden;user-select:none;touch-action:none;
}
#app{
  position:relative;height:100%;max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 100%);
  box-shadow:0 0 40px rgba(20,70,110,.14);
}

/* ── HUD ────────────────────────────────────────────── */
#hud{flex:0 0 auto;padding:12px 16px 10px}
#hud .row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:12.5px;font-weight:700}
#stagenum{background:var(--paper);border:2px solid var(--line);border-radius:999px;
  padding:3px 11px;color:var(--blue-d);font-weight:900}
#goaltxt{flex:1;text-align:center;color:var(--dim);font-weight:800}
#leftbox{color:var(--dim)}
#leftbox b{color:var(--ink);font-size:14px}
#hud .track{height:12px;border-radius:999px;background:rgba(255,255,255,.72);
  border:2px solid var(--line);overflow:hidden}
#hud .track i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#7cc8f5,var(--blue));transition:width .18s ease}
#hud .track i.full{background:linear-gradient(90deg,#6ce08a,var(--good))}

/* ── 무대 ───────────────────────────────────────────── */
#stage{flex:1 1 auto;position:relative;min-height:0;touch-action:none}
#cv{display:block;width:100%;height:100%}

#recenter{
  position:absolute;right:12px;top:64px;z-index:5;
  width:38px;height:38px;border-radius:12px;
  background:rgba(255,255,255,.86);border:2px solid var(--line);
  color:var(--blue-d);font-size:19px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 3px 0 var(--line)
}
#recenter:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}

/* ── 덮개 화면 ──────────────────────────────────────── */
.ov{
  display:none;position:absolute;inset:0;z-index:20;
  background:linear-gradient(180deg,rgba(234,247,255,.96),rgba(190,225,250,.98));
  padding:24px 20px;overflow-y:auto;
}
.ov.on{display:grid;place-items:center}
.card{width:100%;max-width:400px;text-align:center}
.card h1{font-size:38px;font-weight:900;color:var(--blue-d);letter-spacing:.02em;margin-bottom:8px}
.card .lead{font-size:15.5px;line-height:1.75;color:var(--ink);margin-bottom:18px;font-weight:600}
.card .lead b{color:var(--blue-d)}
.how{
  text-align:left;max-width:320px;margin:0 auto 22px;
  background:var(--paper);border:2px solid var(--line);border-radius:18px;
  padding:14px 18px 14px 34px;box-shadow:0 4px 0 var(--line);
}
.how li{font-size:14px;line-height:1.95;font-weight:600}
.how li b{color:var(--blue-d)}
.go,.ghost{
  display:block;width:100%;max-width:320px;margin:0 auto 10px;padding:16px;
  border-radius:16px;font:inherit;font-size:17px;font-weight:900;cursor:pointer;
  transition:transform .08s,box-shadow .08s;
}
.go{background:var(--blue);border:2px solid var(--blue-d);color:#fff;box-shadow:0 5px 0 var(--blue-d)}
.go small{display:block;font-size:12px;font-weight:600;opacity:.85;margin-top:2px}
.go:active{transform:translateY(4px);box-shadow:0 1px 0 var(--blue-d)}
.ghost{background:var(--paper);border:2px solid var(--line);color:var(--dim);box-shadow:0 4px 0 var(--line)}
.ghost:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.note{margin-top:12px;font-size:12px;color:var(--dim);font-weight:600}

/* 물방울 장식 */
.big-drop{
  width:96px;height:96px;margin:0 auto 14px;border-radius:50% 50% 50% 50%/58% 58% 42% 42%;
  background:radial-gradient(circle at 34% 30%, #bfe9ff 0%, #4aa8ee 46%, #1466ab 100%);
  box-shadow:inset -6px -10px 18px rgba(10,60,110,.28), 0 8px 18px rgba(20,90,150,.28);
  position:relative;animation:bob 2.6s ease-in-out infinite;
}
.big-drop::after{
  content:"";position:absolute;left:22%;top:20%;width:26%;height:17%;
  border-radius:50%;background:rgba(255,255,255,.9);transform:rotate(-24deg)
}
.big-drop.small{width:70px;height:70px}
.big-drop.dry{
  background:radial-gradient(circle at 34% 30%, #e6eef2 0%, #b9cbd6 46%, #8ea4b2 100%);
  opacity:.85
}
@keyframes bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.03,.97)}}

@media (max-height:640px){
  .big-drop{width:66px;height:66px;margin-bottom:8px}
  .card h1{font-size:30px}
  .how{padding:10px 16px 10px 30px}
  .how li{line-height:1.7;font-size:13px}
}