:root{
  --deep:#053d64;
  --aqua:#4ed8ff;
  --foam:#f7fcff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#063d63;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:white}
#game-wrap{position:fixed;inset:0;overflow:hidden;background:linear-gradient(#063d63,#16b9e8)}
canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#hud{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top));
  left:14px;
  right:14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  z-index:20;
  pointer-events:none;
}
.pill{
  min-width:78px;
  padding:9px 12px;
  border-radius:18px;
  background:rgba(3,35,58,.45);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 25px rgba(0,30,60,.16);
  backdrop-filter:blur(8px);
  font-weight:800;
}
#mission{
  position:fixed;
  top:calc(74px + env(safe-area-inset-top));
  left:16px;
  right:16px;
  z-index:20;
  font-weight:900;
  font-size:clamp(18px,4.2vw,28px);
  text-shadow:0 4px 18px rgba(0,35,70,.45);
  pointer-events:none;
}
#boostBtn{
  position:fixed;
  right:24px;
  bottom:calc(38px + env(safe-area-inset-bottom));
  width:116px;
  height:116px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.55);
  background:linear-gradient(145deg,#ffd451,#ff8b00);
  color:#093857;
  font-size:20px;
  font-weight:1000;
  box-shadow:0 22px 60px rgba(0,30,60,.25), inset 0 0 18px rgba(255,255,255,.4);
  z-index:55;
}
#boostBtn:active{transform:scale(.96)}
@media(max-width:420px){
  .pill{font-size:13px;min-width:66px;padding:8px 10px}
  #mission{top:calc(68px + env(safe-area-inset-top));font-size:20px}
  #boostBtn{width:96px;height:96px;font-size:16px}
}