* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #0f5f80; color: #fff;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overscroll-behavior: none;
}
canvas { display: block; touch-action: none; }

#loading {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(circle at 50% 30%, #3fb8d6, #0b4a68 70%);
  z-index: 10;
}
#loading h1 { margin: 0; font-size: clamp(32px, 8vw, 64px); text-shadow: 0 4px 0 #0b4a68, 0 0 24px #9ff3ff; }
.bar { width: min(70vw, 360px); height: 14px; border-radius: 7px; background: #0006; overflow: hidden; }
#bar-fill { width: 0; height: 100%; background: linear-gradient(90deg, #ff8ad8, #8affea); transition: width .2s; }
#start {
  font: inherit; font-size: 28px; padding: 14px 40px; border: 0; border-radius: 40px;
  background: #ff7fc8; color: #fff; box-shadow: 0 6px 0 #c24d93; cursor: pointer;
}
#start:active { transform: translateY(4px); box-shadow: 0 2px 0 #c24d93; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; }

/* Left 45% of the screen: touch anywhere to spawn the joystick */
#joy-zone { position: absolute; left: 0; top: 0; bottom: 0; width: 45%; }
#joy-base {
  position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px;
  border-radius: 50%; background: #ffffff22; border: 3px solid #ffffff66;
  left: calc(env(safe-area-inset-left) + 110px); bottom: calc(env(safe-area-inset-bottom) + 45px);
  pointer-events: none; opacity: .55; transition: opacity .2s;
}
#joy-base.active { opacity: 1; }
#joy-knob {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%; background: #ffffffcc; box-shadow: 0 2px 10px #0005;
}

.btn {
  width: 64px; height: 64px; border-radius: 50%; border: 3px solid #ffffff88;
  background: #ffffff2e; color: #fff; font-size: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
  touch-action: none; cursor: pointer;
}
.btn.big { width: 78px; height: 78px; font-size: 32px; }
.btn.small { width: 46px; height: 46px; font-size: 22px; }
.btn.pressed { background: #ffffff77; }

#swim-pad {
  position: absolute; display: flex; flex-direction: column; gap: 14px;
  right: calc(env(safe-area-inset-right) + 22px); bottom: calc(env(safe-area-inset-bottom) + 22px);
}
#rotate-pad {
  position: absolute; display: flex; gap: 14px;
  right: calc(env(safe-area-inset-right) + 118px); bottom: calc(env(safe-area-inset-bottom) + 22px);
}
#btn-sound { position: absolute; top: calc(env(safe-area-inset-top) + 14px); right: calc(env(safe-area-inset-right) + 70px); }
#btn-full { position: absolute; top: calc(env(safe-area-inset-top) + 14px); right: calc(env(safe-area-inset-right) + 14px); }

#score {
  position: absolute; top: calc(env(safe-area-inset-top) + 14px); left: calc(env(safe-area-inset-left) + 14px);
  padding: 8px 16px; border-radius: 24px; background: #0006; color: #fff;
  font: bold 22px system-ui, sans-serif; pointer-events: none;
}
#score.bump { animation: bump .45s ease-out; }
#score.big { animation: bump .45s ease-out 3; }
@keyframes bump { 40% { transform: scale(1.35); background: #ff7fc8cc; } }
#banner {
  position: absolute; left: 50%; top: 22%; transform: translate(-50%, 0) scale(.6); opacity: 0;
  padding: 14px 28px; border-radius: 30px; background: #ff7fc8e6; color: #fff; white-space: nowrap;
  font: bold clamp(22px, 5vw, 40px) system-ui, sans-serif; text-shadow: 0 2px 6px #0004; pointer-events: none;
}
#banner.show { animation: banner 3.2s ease-out; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  20%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -20px) scale(1); }
}