:root {
  --scale-factor: 1;
  @media (max-width: 600px) {
    --scale-factor: 0.5;
  }
  --tile-width: calc(var(--scale-factor) * 64px);
  --tile-height: calc(var(--scale-factor) * 64px);
  --viewport-width: calc(var(--scale-factor) * 576px);
  --viewport-height: calc(var(--scale-factor) * 576px);

  --scale-green: #9cbb29;
  --scale-green-dark: #7c9b09;
  --riverbed-brown: #8f563b;
  --jaw-red: #c05e4e;
  --jaw-red-dark: #491515;

  --stacking-layer-tiles: 10;
  --stacking-layer-action: 20;
  --stacking-layer-overlay: 30;
  --stacking-layer-ui: 40;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  image-rendering: pixelated; /* It's a pixel art game, yo! */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: black;
  font-family: "Tiny5", sans-serif;
  font-size: 1.25rem;
  font-optical-sizing: auto;
}

.splash-screen {
  color: white;

  a {
    color: inherit;
  }
}

.map {
  left: 50%;
  top: 50%;
  z-index: var(--stacking-layer-tiles);
  transform: translate(-50%, calc(-50% + var(--tile-height) / 2));
  overflow: hidden; /* Prevent any offscreen UI adding scrollbars */
  background-color: black;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;

  > .frame-inner {
    background-color: black;
  }
}

.viewport {
  display: grid;
  grid-template-columns: repeat(var(--map-width), var(--tile-width));
  grid-template-rows: repeat(var(--map-height), var(--tile-height));
  gap: 0;
  width: var(--viewport-width);
  height: var(--viewport-height);
  overflow: auto;
  scroll-snap-type: both mandatory;
  container-name: viewport;
  overscroll-behavior: none;

  /* Hide scrollbars */
  scrollbar-width: none;
  overflow: scroll;

  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}