* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #0b2a4a; color: #fff;
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none; touch-action: none;
}
#cam, #sky, #gl { position: fixed; inset: 0; width: 100%; height: 100%; }
#cam { object-fit: cover; opacity: 0; transition: opacity .6s; background: #000; }
#cam.on { opacity: 1; }
#sky {
  background:
    radial-gradient(ellipse 60% 22% at 22% 30%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse 45% 16% at 78% 22%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(ellipse 70% 20% at 60% 48%, rgba(255,255,255,.25), transparent 70%),
    linear-gradient(#3d8fe0 0%, #79b9f0 45%, #bfe0f7 70%, #9fd18d 71%, #5f9f4f 100%);
}
#sky.hide { display: none; }
#gl { display: block; touch-action: none; }

#overlay { position: fixed; inset: 0; pointer-events: none; }
#overlay > * { pointer-events: auto; }
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud[hidden] { display: none; }

.pill {
  position: absolute; left: calc(12px + env(safe-area-inset-left)); top: calc(12px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; border-radius: 30px;
  background: rgba(10, 25, 45, .38); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.18); max-width: 70vw;
}
#windArrow { flex: none; }
.wtext { display: flex; flex-direction: column; min-width: 0; }
.wtext b { font-size: 16px; font-weight: 650; letter-spacing: .2px; }
.wtext span { font-size: 11.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.round {
  position: absolute; right: calc(12px + env(safe-area-inset-right)); top: calc(12px + env(safe-area-inset-top));
  width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(10, 25, 45, .38); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.18); cursor: pointer;
}
.round:active { transform: scale(.92); }

#hint {
  position: absolute; left: 50%; bottom: calc(122px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  padding: 6px 14px; border-radius: 20px; background: rgba(10, 25, 45, .32);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px; white-space: nowrap; transition: opacity .8s; pointer-events: none;
}
#hint.fade { opacity: 0; }

#blowBtn {
  position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: 84px; height: 84px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle, transparent 52%, rgba(255,255,255,.10) 60%, transparent 72%);
  touch-action: none;
}
#meter { position: absolute; inset: 2px; width: 80px; height: 80px; }
#meterArc { transition: stroke-dashoffset .08s linear; }
.wand { display: none;
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 5px solid #ff6fb5; box-shadow: inset 0 0 8px rgba(255,255,255,.6), 0 0 0 1px rgba(255,255,255,.2);
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.55), rgba(140,220,255,.18) 45%, rgba(255,150,240,.12) 70%, transparent);
}
#blowBtn.on .wand { transform: scale(1.12); transition: transform .1s; }

#debug {
  position: absolute; left: 10px; bottom: calc(120px + env(safe-area-inset-bottom)); font: 11px/1.3 ui-monospace, Menlo, monospace;
  background: rgba(0,0,0,.5); padding: 6px 8px; border-radius: 8px; white-space: pre; pointer-events: none;
}

#start {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #2f74c0 0%, #154a86 45%, #0b2a4a 100%);
  transition: opacity .5s;
}
#start.gone { opacity: 0; pointer-events: none; }
#start h1 {
  margin: 0 0 10px; font-size: 64px; font-weight: 800; letter-spacing: -1px;
  background: linear-gradient(100deg, #9ff3ff, #ffffff 30%, #ffb2f0 55%, #fff2a8 80%, #a9ffd8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 18px rgba(120, 200, 255, .45));
}
#start .sub { margin: 0 0 34px; font-size: 18px; opacity: .92; }
#start .fine { position: absolute; bottom: calc(22px + env(safe-area-inset-bottom)); margin: 0; font-size: 12px; opacity: .6; }
.big {
  font: inherit; font-size: 19px; font-weight: 650; color: #0b2a4a; border: 0; cursor: pointer;
  padding: 16px 40px; border-radius: 40px; background: linear-gradient(120deg, #ffffff, #d9f6ff);
  box-shadow: 0 8px 30px rgba(120, 210, 255, .45), inset 0 -2px 0 rgba(0,0,0,.08);
}
.big:active { transform: scale(.96); }
.link { margin-top: 18px; font: inherit; font-size: 14px; color: #cfe9ff; background: none; border: 0; text-decoration: underline; cursor: pointer; }

.floaters i {
  position: absolute; bottom: -120px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.9) 0 6%, transparent 13%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(160,240,255,.35) 68%, rgba(255,160,240,.5) 78%, rgba(255,240,150,.55) 86%, rgba(255,255,255,.75) 96%, transparent 100%);
  animation: rise linear infinite;
}
.floaters i:nth-child(1) { left: 8%;  width: 70px;  height: 70px;  animation-duration: 11s; }
.floaters i:nth-child(2) { left: 26%; width: 34px;  height: 34px;  animation-duration: 8s;  animation-delay: -3s; }
.floaters i:nth-child(3) { left: 44%; width: 110px; height: 110px; animation-duration: 15s; animation-delay: -7s; }
.floaters i:nth-child(4) { left: 64%; width: 48px;  height: 48px;  animation-duration: 9s;  animation-delay: -1s; }
.floaters i:nth-child(5) { left: 80%; width: 82px;  height: 82px;  animation-duration: 13s; animation-delay: -5s; }
.floaters i:nth-child(6) { left: 15%; width: 24px;  height: 24px;  animation-duration: 7s;  animation-delay: -4s; }
.floaters i:nth-child(7) { left: 88%; width: 30px;  height: 30px;  animation-duration: 10s; animation-delay: -8s; }
@keyframes rise {
  0%   { transform: translate(0, 0) scale(1, 1); }
  25%  { transform: translate(14px, -30vh) scale(1.03, .97); }
  50%  { transform: translate(-10px, -60vh) scale(.97, 1.03); }
  75%  { transform: translate(12px, -90vh) scale(1.02, .98); }
  100% { transform: translate(0, -125vh) scale(1, 1); }
}

#toast {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); max-width: 84vw;
  padding: 12px 18px; border-radius: 14px; background: rgba(10, 25, 45, .75); text-align: center;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 14px; pointer-events: none;
}
#toast[hidden] { display: none; }
#flash { position: fixed; inset: 0; background: #fff; opacity: .85; pointer-events: none; transition: opacity .4s; }