:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #03121f;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background:
    radial-gradient(circle at 50% 15%, rgba(26, 106, 127, 0.28), transparent 46%),
    #03121f;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.game-shell {
  position: relative;
  width: min(100vw, calc(100vh * 4 / 3));
  width: min(100vw, calc(100dvh * 4 / 3));
  aspect-ratio: 4 / 3;
  background: #031b2c;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  image-rendering: auto;
  touch-action: none;
}

.controls {
  position: absolute;
  top: 1.6%;
  right: 1.8%;
  display: flex;
  gap: 8px;
}

button {
  min-width: 94px;
  padding: 8px 12px;
  border: 1px solid rgba(117, 244, 244, 0.55);
  border-radius: 8px;
  color: #eafcff;
  background: rgba(3, 27, 44, 0.86);
  font: 800 12px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}

button:hover,
button:focus-visible {
  border-color: #75f4f4;
  background: rgba(17, 76, 90, 0.96);
  outline: none;
}

[hidden] {
  display: none !important;
}

.touch-joystick,
.rotate-device {
  display: none;
}

.touch-controls .touch-joystick {
    --joystick-x: 0px;
    --joystick-y: 0px;
    position: absolute;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    width: clamp(82px, 16%, 126px);
    aspect-ratio: 1;
    border-radius: 50%;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    z-index: 4;
}

.touch-controls .touch-joystick-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(137, 246, 255, 0.58);
    border-radius: inherit;
    background:
      radial-gradient(circle, rgba(117, 244, 244, 0.05) 0 27%, transparent 28%),
      rgba(3, 27, 44, 0.46);
    box-shadow:
      inset 0 0 24px rgba(101, 245, 255, 0.1),
      0 4px 20px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(2px);
}

.touch-controls .touch-joystick-knob {
    width: 46%;
    aspect-ratio: 1;
    border: 2px solid rgba(234, 252, 255, 0.88);
    border-radius: 50%;
    background: rgba(46, 156, 174, 0.76);
    box-shadow:
      0 0 18px rgba(101, 245, 255, 0.56),
      inset 0 0 10px rgba(234, 252, 255, 0.22);
    transform: translate(var(--joystick-x), var(--joystick-y));
    transition: transform 70ms ease-out;
    pointer-events: none;
}

.touch-controls .touch-joystick.is-active .touch-joystick-ring {
    border-color: rgba(234, 252, 255, 0.9);
    background-color: rgba(15, 86, 102, 0.56);
}

.touch-controls .touch-joystick.is-active .touch-joystick-knob {
    transition: none;
}

.touch-controls .controls {
    top: max(1.6%, env(safe-area-inset-top));
    right: max(1.8%, env(safe-area-inset-right));
}

.touch-controls button {
    min-width: 82px;
    min-height: 40px;
    padding: 9px 12px;
}

@media (orientation: portrait) {
  .touch-controls .game-shell {
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
  }

  .touch-controls #game,
  .touch-controls .controls,
  .touch-controls .touch-joystick {
    visibility: hidden;
  }

  .touch-controls .rotate-device {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
    color: #eafcff;
    text-align: center;
    background:
      radial-gradient(circle at 50% 42%, rgba(29, 126, 149, 0.34), transparent 40%),
      #031b2c;
  }

  .touch-controls .rotate-device-icon {
    color: #75f4f4;
    font: 800 72px/1 system-ui, sans-serif;
    text-shadow: 0 0 24px rgba(101, 245, 255, 0.48);
    transform: rotate(-32deg);
  }

  .touch-controls .rotate-device strong {
    font: 900 clamp(23px, 7vw, 34px)/1.05 system-ui, sans-serif;
  }

  .touch-controls .rotate-device span {
    color: #8fb8bf;
    font: 700 13px/1.3 system-ui, sans-serif;
    letter-spacing: 0.08em;
  }
}