@font-face {
  font-family: Gilroy;
  src: url("../assets/fonts/Gilroy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url("../assets/fonts/Gilroy-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url("../assets/fonts/Gilroy-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url("../assets/fonts/Gilroy-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url("../assets/fonts/Gilroy-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: #49A9E8;
  color: #F1F1F1;
  font-family: Gilroy, system-ui, sans-serif;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

#app {
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

#game {
  display: block;
  width: min(100vw, calc(100dvh * 0.75));
  height: min(100dvh, calc(100vw / 0.75));
  background: #49A9E8;
  box-shadow: 0 0 0 4px #902FF2, 0 20px 80px rgba(30, 0, 65, 0.55);
  border-radius: 12px;
}

@media (orientation: portrait) {
  #game {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }
}

#touch-hint {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 520px) {
  #touch-hint { display: none; }
}