:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  color-scheme: light;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #7fd7ff;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  touch-action: none;
  user-select: none;
}

.game-shell {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  background: #7fd7ff;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hud {
  position: absolute;
  top: max(10px, var(--safe-top));
  left: max(12px, var(--safe-left));
  display: flex;
  gap: 10px;
  align-items: center;
  color: #fff;
  font-size: clamp(13px, 2.2vw, 18px);
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    3px 0 #111,
    -3px 0 #111,
    0 3px #111,
    0 -3px #111,
    3px 3px #111;
  pointer-events: none;
  z-index: 2;
}

.hud span {
  min-width: 58px;
}

.top-controls {
  position: absolute;
  top: max(10px, var(--safe-top));
  right: max(12px, var(--safe-right));
  z-index: 3;
  display: flex;
  gap: 8px;
}

.control-button {
  width: clamp(46px, 8vw, 60px);
  height: clamp(40px, 7vw, 52px);
  border: 4px solid #141414;
  border-radius: 8px;
  background: linear-gradient(#ffffff, #d9f1ff 58%, #8fd2ff);
  color: #141414;
  box-shadow: 0 5px 0 #31566c;
  font: inherit;
  font-size: clamp(12px, 2vw, 16px);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.control-button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #31566c;
}

.control-button.is-active {
  background: linear-gradient(#ffd4d4, #ff8170);
}

@media (orientation: portrait) {
  .hud {
    font-size: 13px;
  }

  .hud span {
    min-width: 44px;
  }

  .control-button {
    width: 44px;
    height: 40px;
    font-size: 11px;
  }

}