@font-face {
  font-family: "Odderf Basic";
  src: url("./Odderf%20Basic-Dfm0cr2I.ttf") format("truetype");
  font-display: swap;
}

:root {
  color: #eef7ff;
  background: #06080c;
  font-family: "Odderf Basic", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  overscroll-behavior: none;
}

#app {
  position: relative;
  display: block;
  min-height: 100dvh;
  background:
    linear-gradient(135deg, rgba(56, 215, 255, 0.08) 0 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(45deg, rgba(247, 209, 84, 0.04) 0 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(180deg, #10131a 0%, #06080c 58%, #070a0f 100%);
}

.play-frame {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: block;
  padding: 0;
}

#game {
  display: block;
  width: 100vw;
  height: 100dvh;
  background: #081018;
  border: 0;
  box-shadow: none;
  image-rendering: pixelated;
  touch-action: none;
}

#touch-layer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  display: none;
  z-index: 20;
}

#joystick-zone {
  pointer-events: auto;
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 174px;
  height: 174px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

body.touch #touch-layer {
  display: block;
}

body:not(.touch) #touch-layer {
  display: none;
}

@media (orientation: landscape) and (pointer: coarse) {
  #joystick-zone {
    left: max(22px, env(safe-area-inset-left));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 154px;
    height: 154px;
  }
}