body {
  padding-top: 76px;
}

.arcade-nav,
.arcade-nav * {
  box-sizing: border-box;
}

.arcade-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10000;
  height: 64px;
  border-bottom: 4px solid #111111;
  color: #111111;
  background: #f3efe4;
}

.arcade-nav__back {
  width: 100%;
  height: 60px;
  padding: 8px clamp(12px, 3vw, 32px);
  display: grid;
  grid-template-columns: 42px auto 1fr;
  gap: 12px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.arcade-nav__arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 3px solid #111111;
  font-family: "Courier New", monospace;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  background: #ffd84a;
  transition: transform 120ms ease;
}

.arcade-nav__wordmark {
  display: inline-flex;
  align-items: center;
  font-family: "Avenir Next Condensed", "Arial Narrow", "Arial Black", sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.arcade-nav__wordmark strong {
  margin-right: 8px;
  padding: 8px 9px 6px;
  color: #f3efe4;
  background: #111111;
}

.arcade-nav__label {
  justify-self: end;
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.arcade-nav__back:hover .arcade-nav__arrow {
  transform: translateX(-4px);
}

.arcade-nav__back:focus-visible {
  outline: 4px solid #68c9f5;
  outline-offset: -4px;
}

.arcade-nav + .app-shell .topbar {
  top: 78px;
}

.arcade-nav + .game-shell,
.arcade-nav + .game-shell > .cookie-panel,
.arcade-nav + .game-shell > .world-panel,
.arcade-nav + .game-shell > .store-panel {
  min-height: calc(100vh - 76px);
}

@media (max-width: 560px) {
  body {
    padding-top: 68px;
  }

  .arcade-nav {
    height: 58px;
  }

  .arcade-nav__back {
    height: 54px;
  }

  .arcade-nav__label {
    display: none;
  }

  .arcade-nav + .app-shell .topbar {
    top: 68px;
  }

  .arcade-nav + .game-shell,
  .arcade-nav + .game-shell > .cookie-panel,
  .arcade-nav + .game-shell > .world-panel,
  .arcade-nav + .game-shell > .store-panel {
    min-height: calc(100vh - 68px);
  }
}

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