/* Project baseline + Yandex Games moderation-friendly defaults */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--app-bg);
}

body {
  position: fixed;
  inset: 0;
  font-family: var(--font-ui);
  color: var(--text-primary);
  background: var(--app-bg);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

button {
  margin: 0;
  padding: 0;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

#app {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.app-shell {
  position: relative;
  width: min(100%, var(--container-max));
  height: 100%;
  margin: 0 auto;
  background: var(--app-bg);
}

.app-main {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(124px + env(safe-area-inset-bottom));
  scrollbar-width: none;
}

.app-main.is-nav-hidden {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.app-main::-webkit-scrollbar {
  display: none;
}

.screen {
  min-height: 100%;
}

.hidden {
  display: none !important;
}

@media (min-width: 721px) {
  html,
  body {
    background: #000000;
  }

  #app {
    display: block;
    width: min(430px, calc((100dvh - 32px) * 0.461538), calc(100vw - 32px));
    height: auto;
    aspect-ratio: 1080 / 2340;
    padding: clamp(7px, 1.25vw, 11px);
  }

  .app-shell {
    width: 100%;
    height: 100%;
    border-radius: clamp(27px, 6vw, 36px);
    overflow: hidden;
    border: 0;
    box-shadow: none;
    background: var(--app-bg);
  }

  .app-main {
    background: var(--app-bg);
  }

  .bottom-nav {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
    transform: none;
  }

  .bottom-nav.hidden {
    transform: translateY(18px);
  }

  .app-overlay-layer,
  .app-modal-overlay,
  .onboarding-overlay {
    position: absolute;
  }
}

/* desktop bugfix: use normal full viewport instead of phone mockup */
@media (min-width: 721px) {
  html,
  body {
    background: var(--app-bg);
  }

  #app {
    width: 100%;
    height: 100dvh;
    aspect-ratio: auto;
    padding: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: var(--app-bg);
  }

  #app::before,
  #app::after {
    content: none !important;
  }

  .app-shell {
    width: 100%;
    max-width: none;
    border-radius: 0;
    overflow: hidden;
  }

  .bottom-nav {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .bottom-nav.hidden {
    transform: translateX(-50%) translateY(18px);
  }
}