/* ===== Everest's Snow Rescue — kid-friendly UI ===== */
:root{
  --everest-teal:#2bbbe0;
  --everest-teal-dark:#1689b3;
  --snow:#f4fbff;
  --sky:#bfeaff;
  --pink:#ff7bac;
  --yellow:#ffd23f;
  --green:#5ad27a;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--sky);
  font-family:'Comic Sans MS','Baloo 2',Verdana,'Trebuchet MS',sans-serif;
  color:#0b3a4a;touch-action:none;user-select:none;-webkit-user-select:none;}

#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;}

/* ---------- Overlays ---------- */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:20;padding:16px;background:radial-gradient(circle at 50% 30%,rgba(43,187,224,.25),rgba(11,58,74,.55));}
.overlay-bottom{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;
  z-index:20;padding:18px;pointer-events:none;}
.overlay-bottom .rescue-box{pointer-events:auto;}
.hidden{display:none !important;}

/* ---------- Loading ---------- */
.loading-box{text-align:center;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.3);}
.paw-spin{font-size:72px;animation:spin 1.6s linear infinite;}
.loading-box p{font-size:20px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Pup Pad ---------- */
.puppad-device{width:min(92vw,520px);background:linear-gradient(160deg,#ffe169,#ffb300);
  border-radius:34px;padding:16px;box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 0 0 6px #ffd23f;
  animation:pop .4s ease;}
@keyframes pop{from{transform:scale(.7);opacity:0;}to{transform:scale(1);opacity:1;}}
.puppad-top{display:flex;align-items:center;justify-content:space-between;
  font-weight:bold;color:#7a4a00;padding:2px 10px 10px;letter-spacing:1px;}
.puppad-paw{font-size:26px;}
.puppad-title{font-size:18px;}
.puppad-screen{background:#0d2230;border-radius:22px;padding:18px;min-height:190px;
  box-shadow:inset 0 0 24px rgba(0,0,0,.6);color:#dff6ff;}
.caller{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.caller-avatar{font-size:48px;background:#15394d;border-radius:50%;padding:6px 10px;
  animation:bounce 1s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.caller-name{font-size:18px;color:#7fd4f2;font-weight:bold;}
.ryder-text{font-size:20px;line-height:1.5;min-height:90px;margin:0;}

/* ---------- Big buttons ---------- */
.big-btn{display:block;width:100%;margin-top:16px;border:none;cursor:pointer;
  background:linear-gradient(180deg,#ff8fc0,var(--pink));color:#fff;font-weight:bold;
  font-size:clamp(20px,5vw,28px);padding:16px 18px;border-radius:20px;
  box-shadow:0 8px 0 #d65891,0 12px 24px rgba(0,0,0,.3);
  font-family:inherit;transition:transform .08s,box-shadow .08s;animation:wiggle 2.5s ease-in-out infinite;}
.big-btn:active{transform:translateY(6px);box-shadow:0 2px 0 #d65891,0 4px 12px rgba(0,0,0,.3);}
@keyframes wiggle{0%,92%,100%{transform:rotate(0);}95%{transform:rotate(-1.5deg);}97%{transform:rotate(1.5deg);}}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:15;pointer-events:none;}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:10px 14px;}
.stars-box{background:rgba(255,255,255,.85);border-radius:16px;padding:6px 14px;
  font-size:22px;font-weight:bold;color:#e6a700;box-shadow:0 4px 10px rgba(0,0,0,.2);}
.progress-wrap{flex:1;background:rgba(255,255,255,.85);border-radius:16px;padding:6px 12px 8px;
  box-shadow:0 4px 10px rgba(0,0,0,.2);}
.progress-label{font-size:13px;font-weight:bold;color:var(--everest-teal-dark);margin-bottom:3px;}
.progress-track{position:relative;height:16px;background:#dff0f7;border-radius:10px;overflow:visible;}
.progress-fill{height:100%;width:0%;border-radius:10px;
  background:linear-gradient(90deg,#7fd4f2,var(--everest-teal));transition:width .2s linear;}
.progress-pup{position:absolute;top:-8px;left:0%;font-size:22px;transition:left .2s linear;transform:translateX(-50%);}
.progress-goal{position:absolute;top:-7px;right:-4px;font-size:20px;}
.icon-btn{pointer-events:auto;background:rgba(255,255,255,.85);border:none;border-radius:14px;
  font-size:22px;width:44px;height:44px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.2);}

/* ---------- Steering ---------- */
.steer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;
  padding:0 16px 22px;pointer-events:none;}
.steer-btn{pointer-events:auto;width:clamp(74px,22vw,120px);height:clamp(74px,22vw,120px);
  border-radius:50%;border:none;font-size:clamp(34px,9vw,52px);cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fff,#9fe3f7);color:#0b3a4a;
  box-shadow:0 8px 0 #4aa6c4,0 12px 20px rgba(0,0,0,.3);transition:transform .06s,box-shadow .06s;}
.steer-btn:active{transform:translateY(5px);box-shadow:0 3px 0 #4aa6c4;}

/* ---------- Rescue prompt ---------- */
.rescue-box{width:min(92vw,560px);background:rgba(255,255,255,.95);border-radius:24px;
  padding:16px 18px;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.35);animation:pop .35s ease;}
.rescue-text{font-size:clamp(18px,4.5vw,24px);font-weight:bold;color:var(--everest-teal-dark);margin:0;}

/* ---------- Win ---------- */
.win-box{width:min(92vw,560px);background:linear-gradient(160deg,#fff,#dff6ff);border-radius:30px;
  padding:24px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.4);animation:pop .4s ease;}
.win-emoji{font-size:54px;animation:bounce 1s ease-in-out infinite;}
.win-box h1{color:var(--everest-teal-dark);font-size:clamp(28px,7vw,40px);margin:6px 0;}
.win-box p{font-size:clamp(16px,4vw,20px);line-height:1.45;margin:10px 0;}
.win-score{font-weight:bold;color:#e6a700;}

/* Confetti pieces are created in JS */
.confetti{position:fixed;top:-20px;width:12px;height:18px;z-index:25;pointer-events:none;border-radius:3px;}

/* Crash banner (created in JS) — shown briefly when you hit a rock */
#crash-banner{position:fixed;inset:0;z-index:22;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:rgba(255,90,90,.35);color:#fff;font-weight:bold;
  font-size:clamp(26px,7vw,46px);text-shadow:0 3px 10px rgba(0,0,0,.5);
  animation:crashpop .3s ease;}
@keyframes crashpop{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}

@media (max-width:480px){
  .ryder-text{font-size:18px;}
}