html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1d2a1a;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

canvas {
  position: fixed;
  inset: 0;
  display: block;
}

.btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(30, 26, 22, 0.35);
  color: #fff;
  font: bold 14px system-ui, -apple-system, sans-serif;
  touch-action: none;
  cursor: pointer;
}
.btn.on {
  background: rgba(255, 220, 120, 0.6);
  color: #1e1a16;
}
.btn.big {
  width: 100px;
  height: 100px;
  font-size: 18px;
}
.btn.small {
  width: 48px;
  height: 48px;
  font-size: 18px;
}
.btn[hidden] {
  display: none;
}

#btn-fullscreen {
  top: calc(env(safe-area-inset-top) + 12px);
  right: calc(env(safe-area-inset-right) + 12px);
}

#btn-mute {
  top: calc(env(safe-area-inset-top) + 68px);
  right: calc(env(safe-area-inset-right) + 12px);
}
/* No fullscreen on iPhone: move the sound button up into the corner. */
#btn-fullscreen[hidden] + #btn-mute {
  top: calc(env(safe-area-inset-top) + 12px);
}

#touch-ui {
  display: none;
}
body.touch #touch-ui {
  display: block;
}

#btn-pause {
  top: calc(env(safe-area-inset-top) + 12px);
  left: calc(env(safe-area-inset-left) + 12px);
}
#btn-pounce {
  right: calc(env(safe-area-inset-right) + 28px);
  bottom: calc(env(safe-area-inset-bottom) + 28px);
}
#btn-sneak {
  right: calc(env(safe-area-inset-right) + 144px);
  bottom: calc(env(safe-area-inset-bottom) + 24px);
}
#btn-growl {
  right: calc(env(safe-area-inset-right) + 140px);
  bottom: calc(env(safe-area-inset-bottom) + 112px);
}
#btn-fish {
  right: calc(env(safe-area-inset-right) + 236px);
  bottom: calc(env(safe-area-inset-bottom) + 30px);
  font-size: 13px;
}
#btn-costume {
  right: calc(env(safe-area-inset-right) + 236px);
  bottom: calc(env(safe-area-inset-bottom) + 118px);
  font-size: 12px;
}
#btn-prev,
#btn-next {
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  width: 64px;
  height: 64px;
  font-size: 26px;
  z-index: 2;
}
#btn-prev {
  left: calc(50% - 90px);
}
#btn-next {
  left: calc(50% + 26px);
}
#btn-sprint {
  right: calc(env(safe-area-inset-right) + 46px);
  bottom: calc(env(safe-area-inset-bottom) + 144px);
}

/* Joystick: rests in the corner, jumps to wherever the left thumb lands. */
#stick {
  position: fixed;
  left: calc(env(safe-area-inset-left) + 32px);
  bottom: calc(env(safe-area-inset-bottom) + 32px);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  opacity: 0.4; /* faint while resting, so it doesn't hide Bruno */
}
#stick.active {
  bottom: auto;
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.6);
}
#knob {
  position: absolute;
  left: 35px;
  top: 35px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1d2a1a;
  color: #fcf8ec;
  font-size: 20px;
  text-align: center;
}
#rotate div {
  font-size: 72px;
}
@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    display: flex;
  }
}

/* Short phone screens (landscape): smaller, tighter buttons so they hide less of the game. */
@media (max-height: 500px) {
  .btn { width: 54px; height: 54px; font-size: 12px; }
  .btn.big { width: 84px; height: 84px; font-size: 16px; }
  .btn.small { width: 42px; height: 42px; font-size: 16px; }
  #btn-mute { top: calc(env(safe-area-inset-top) + 60px); }
  #btn-pounce { right: calc(env(safe-area-inset-right) + 18px); bottom: calc(env(safe-area-inset-bottom) + 18px); }
  #btn-sneak { right: calc(env(safe-area-inset-right) + 112px); bottom: calc(env(safe-area-inset-bottom) + 12px); }
  #btn-sprint { right: calc(env(safe-area-inset-right) + 32px); bottom: calc(env(safe-area-inset-bottom) + 112px); }
  #btn-growl { right: calc(env(safe-area-inset-right) + 104px); bottom: calc(env(safe-area-inset-bottom) + 80px); }
  #btn-fish { right: calc(env(safe-area-inset-right) + 176px); bottom: calc(env(safe-area-inset-bottom) + 12px); font-size: 11px; }
  #btn-costume { right: calc(env(safe-area-inset-right) + 168px); bottom: calc(env(safe-area-inset-bottom) + 80px); font-size: 10px; }
  #stick { width: 104px; height: 104px; }
  #knob { left: 29px; top: 29px; width: 46px; height: 46px; }
}