* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
}

::selection {
  background: transparent;
}

::-moz-selection {
  background: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

:root {
  --viewport-h: 100dvh;
  --viewport-w: 100vw;
  --stage-w: 1920px;
  --stage-h: 1080px;
  --stage-scale: 1;
  --ui-text-scale: 1;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --stage-pad-x: 32px;
  --stage-pad-top: 28px;
  --stage-pad-bottom: 22px;
  --topbar-w: 620px;
  --evolution-w: 1160px;
  --modal-panel-w: 420px;
  --modal-panel-pad-y: 28px;
  --modal-panel-pad-x: 24px;
  --hud-gap: 18px;
  --board-size: 620px;
  --evolution-h: 96px;
}

body {
  margin: 0;
  min-height: var(--viewport-h);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  background: var(--mint);
  color: var(--brown);
  font-family: "Nunito", system-ui, sans-serif;
  background-image:
    linear-gradient(rgba(184, 224, 200, 0.16), rgba(184, 224, 200, 0.2)),
    url("../../assets/sprites/common/background.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#wrapper {
  min-height: var(--viewport-h);
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

#app {
  width: 100%;
  min-height: var(--viewport-h);
  display: grid;
  place-items: center;
  overflow: hidden;
}

#game-layer {
  width: 100%;
  min-height: var(--viewport-h);
  display: grid;
  place-items: center;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

button {
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  touch-action: none;
}

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  background: rgba(255, 244, 218, 0.97);
  color: var(--brown);
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.boot-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .boot-screen {
    transition: none;
  }

  .boot-screen-spinner {
    animation: none;
    border-top-color: rgba(111, 71, 38, 0.55);
  }
}

.boot-screen-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.boot-screen-spinner {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 8px solid rgba(111, 71, 38, 0.2);
  border-top-color: rgba(184, 100, 50, 0.95);
  animation: boot-spin 0.75s linear infinite;
}

@keyframes boot-spin {
  to {
    transform: rotate(360deg);
  }
}