/* Shared navigation above every game. */
:root { --site-game-bar-height: 40px; }
body[data-site-game] { padding-top: var(--site-game-bar-height); }
.site-game-header {
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  place-items: center;
  justify-content: center;
  align-content: center;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  letter-spacing: normal;
  height: var(--site-game-bar-height);
  margin: 0;
  padding: 0;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #eee;
}
.site-game-header .site-game-home {
  position: relative;
  display: block;
  width: min(200px, calc(100vw - 32px));
  height: 20px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #fff;
  cursor: pointer;
}
.site-game-home img {
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  transform: translateY(-54.2%);
}
.site-game-header .site-game-home:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}
body[data-site-game="digital-fruit-fly"] .app {
  top: var(--site-game-bar-height);
  height: calc(100% - var(--site-game-bar-height));
}
body[data-site-game="human-art-generator"] main,
body[data-site-game="human-art-generator"] .home,
body[data-site-game="vs"] #setup {
  min-height: calc(100svh - var(--site-game-bar-height));
}
body[data-site-game="human-art-generator"] .art-waterfall {
  top: var(--site-game-bar-height);
}
body[data-site-game="vs"] #fight-screen {
  top: var(--site-game-bar-height);
}
body[data-site-game="vs"] #arena-background,
body[data-site-game="vs"] #arena-fallback {
  top: var(--site-game-bar-height);
  height: calc(100% - var(--site-game-bar-height));
}

body[data-site-game="wikibingo"] .menu-view { min-height: calc(100svh - 190px - var(--site-game-bar-height)); }
body[data-site-game="wikibingo"] .sidebar { top: calc(20px + var(--site-game-bar-height)); }

body[data-site-game="earth-patch-notes"] #starfield { top: var(--site-game-bar-height); height: calc(100% - var(--site-game-bar-height)); }

body[data-site-game="volume-control"] main { min-height: calc(100svh - var(--site-game-bar-height)); }
body[data-site-game="volume-control"] header:not(.site-game-header) { top: calc(28px + var(--site-game-bar-height)); }

body[data-site-game="sell-me-this"] .notebook { min-height: calc(100svh - var(--site-game-bar-height)); }

body[data-site-game="learn-how-to-walk"] > .site-game-header {
  height: var(--site-game-bar-height);
  flex: none;
  gap: 0;
}

body[data-site-game="find-a-font"] .room-grid {
  min-height: calc(100vh - 90px - var(--site-game-bar-height));
}

body[data-site-game="cursor-wars"] main { min-height: calc(100svh - var(--site-game-bar-height)); }
body[data-site-game="cursor-wars"] #arena:not(:fullscreen) {
  top: var(--site-game-bar-height);
  height: calc(100dvh - var(--site-game-bar-height));
}