@font-face {
  font-family: Manrope;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("fonts/dm-mono-latin.woff2") format("woff2");
  font-display: swap;
}

:root {
  --arcade-header-height: 6.4rem;
  color-scheme: dark;
  font-family: Manrope, system-ui, sans-serif;
  background: #020714;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-block-size: 100%;
  margin: 0;
}

body {
  min-block-size: 100dvh;
  font-size: 1rem;
  line-height: 1.5;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% -20%, rgb(51 230 244 / 24%), transparent 34rem),
    radial-gradient(circle at 88% -20%, rgb(255 78 186 / 22%), transparent 34rem),
    #020714;
  color: #f7ffff;
}

.arcade-header {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.65rem, 1.4vw, 1.25rem);
  padding:
    max(.66rem, env(safe-area-inset-top))
    max(7.2rem, env(safe-area-inset-right))
    .72rem
    max(.8rem, env(safe-area-inset-left));
  border-block-end: .08rem solid rgb(133 244 255 / 42%);
  background: linear-gradient(145deg, rgb(5 21 46 / 98%), rgb(20 13 58 / 98%));
  box-shadow: 0 .5rem 1.6rem rgb(0 0 0 / 42%);
  transition: opacity 220ms ease, transform 360ms cubic-bezier(.2, .82, .2, 1);
  will-change: transform;
}

.arcade-heading {
  display: contents;
  min-inline-size: 0;
}

.arcade-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .58rem;
  color: #fff;
  text-decoration: none;
}

.arcade-brand > span {
  display: grid;
  inline-size: 2.35rem;
  aspect-ratio: 1;
  place-items: center;
  border: .12rem solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #72f6ff, #756cff 54%, #f44eae);
  color: #fff;
  font: 1000 1.05rem/1 "DM Mono", monospace;
  box-shadow: 0 0 1rem rgb(93 229 255 / 58%);
}

.arcade-brand strong {
  font-size: clamp(1.05rem, .9rem + .65vw, 1.5rem);
  letter-spacing: -.03em;
}

.arcade-heading p {
  display: grid;
  min-inline-size: 0;
  justify-items: start;
  gap: .12rem;
  margin: 0;
  overflow: hidden;
  text-align: start;
}

.arcade-heading p strong {
  max-inline-size: 100%;
  overflow: hidden;
  color: #fff17b;
  font-size: .875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arcade-heading p span {
  max-inline-size: 100%;
  overflow: hidden;
  color: #bfeaf3;
  font-size: .875rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arcade-menu {
  display: flex;
  min-inline-size: 0;
  max-inline-size: min(52vw, 50rem);
  gap: .45rem;
  overflow-x: auto;
  padding: .12rem .08rem .22rem;
  scrollbar-color: #52dce8 #0b1733;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
}

.arcade-menu a {
  flex: 0 0 auto;
  display: grid;
  min-block-size: 2.75rem;
  place-items: center;
  scroll-snap-align: start;
  padding: .58rem .8rem;
  border: .08rem solid rgb(159 233 246 / 44%);
  border-radius: 999px;
  background: rgb(10 33 67 / 94%);
  color: #eafbff;
  font: 900 .875rem/1 "DM Mono", monospace;
  letter-spacing: .015em;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.arcade-menu a:is(:hover, :focus-visible) {
  border-color: #fff;
  background: #164c81;
  box-shadow: inset 0 0 0 .08rem rgb(255 255 255 / 28%);
  outline: none;
}

.arcade-menu a[aria-current="page"] {
  border-color: #fff;
  background: linear-gradient(135deg, #fff064, #ff8751 52%, #ee46aa);
  color: #28102e;
  box-shadow: 0 .22rem 0 #6e275f, 0 0 .82rem rgb(255 130 85 / 54%);
}

.arcade-stage {
  position: fixed;
  inset: var(--arcade-header-height, 6.4rem) 0 0;
  min-block-size: 0;
  background: #020714;
  transition: inset-block-start 360ms cubic-bezier(.2, .82, .2, 1);
}

.arcade-stage iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  background: #020714;
}

.arcade-chrome-toggle {
  position: fixed;
  z-index: 12;
  inset:
    max(.38rem, env(safe-area-inset-top))
    max(.42rem, env(safe-area-inset-right))
    auto auto;
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: .36rem;
  padding: .48rem .7rem;
  border: .08rem solid rgb(188 245 250 / 68%);
  border-radius: 999px;
  background: rgb(4 25 52 / 94%);
  color: #f7ffff;
  box-shadow: 0 .35rem 1rem rgb(0 0 0 / 38%), inset 0 .08rem rgb(255 255 255 / 16%);
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, inset 360ms cubic-bezier(.2, .82, .2, 1);
}

.arcade-chrome-toggle span {
  font: 900 1rem/1 "DM Mono", monospace;
}

.arcade-chrome-toggle strong {
  font: 900 .875rem/1 "DM Mono", monospace;
  letter-spacing: .04em;
}

.arcade-chrome-toggle:is(:hover, :focus-visible) {
  border-color: #fff;
  background: #164c81;
  box-shadow: 0 0 0 .15rem #fff17b, 0 .35rem 1rem rgb(0 0 0 / 38%);
  outline: none;
}

body.is-game-active:not(.is-arcade-menu-revealed) .arcade-header {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-100% - .75rem));
}

body.is-game-active:not(.is-arcade-menu-revealed) .arcade-stage {
  inset-block-start: 0;
}

body.is-game-active:not(.is-arcade-menu-revealed) .arcade-chrome-toggle {
  inset:
    max(.22rem, env(safe-area-inset-top))
    50%
    auto auto;
  min-block-size: 2.15rem;
  padding: .34rem .62rem;
  border-color: rgb(188 245 250 / 46%);
  background: rgb(4 25 52 / 78%);
  opacity: .72;
  transform: translateX(50%);
  backdrop-filter: blur(.6rem);
}

body.is-game-active:not(.is-arcade-menu-revealed) .arcade-chrome-toggle:is(:hover, :focus-visible) {
  opacity: 1;
}

@media (max-width: 64rem) {
  .arcade-header {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .5rem;
    padding-block-end: .52rem;
  }

  .arcade-menu {
    grid-column: 1 / -1;
    max-inline-size: 100%;
  }

  .arcade-header {
    padding-inline-end: max(7.2rem, env(safe-area-inset-right));
  }
}

@media (max-width: 38rem) {
  .arcade-heading p span {
    display: none;
  }

  .arcade-brand strong {
    max-inline-size: 7rem;
    line-height: 1;
  }

  .arcade-menu a {
    padding: .52rem .7rem;
    font-size: .875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arcade-header,
  .arcade-stage,
  .arcade-chrome-toggle,
  .arcade-menu a {
    transition: none;
  }
}