/* The site's top bar on every game page: the duck, "Ducklark Games", and
   Games · The flock · About back to the home page. The Worker adds the bar
   and this stylesheet as it serves a game (src/worker.mjs), so a game run
   anywhere else (the dev server, the phone apps) has neither.

   --dl-bar is the bar's height. Games that fill the screen subtract it
   (`calc(100dvh - var(--dl-bar, 0px))`), so with no bar the sum is unchanged.
   Everything here is under .dl-sitebar so no game's own styles are touched. */

:root {
  --dl-bar: 44px;
}

.dl-sitebar {
  --sb-paper: #f6f1e7;
  --sb-ink: #1e1a15;
  --sb-line: #e2d9c8;
  --sb-pond: #1f5f66;
  --sb-bill: #f28b2b;
  position: relative;
  z-index: 2147483000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--dl-bar);
  margin: 0;
  padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
  background: var(--sb-paper);
  border-bottom: 1px solid var(--sb-line);
  color: var(--sb-ink);
  font: 700 15px/1 Nunito, 'Segoe UI', Roboto, system-ui, sans-serif;
  flex: none;
}

@media (prefers-color-scheme: dark) {
  .dl-sitebar {
    --sb-paper: #171410;
    --sb-ink: #f3ede2;
    --sb-line: #322c23;
  }
}

.dl-sitebar a {
  color: inherit;
  text-decoration: none;
}

.dl-sitebar .dl-sb-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dl-sitebar .dl-sb-brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: none;
}

.dl-sitebar .dl-sb-brand b {
  display: block;
  font-family: 'Baloo 2', 'Trebuchet MS', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}

.dl-sitebar .dl-sb-brand small {
  display: block;
  margin-top: 1px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sb-bill);
}

.dl-sitebar nav {
  display: flex;
  gap: 2px;
  flex: none;
}

.dl-sitebar nav a {
  padding: 7px 9px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
}

.dl-sitebar a:hover,
.dl-sitebar a:focus-visible {
  color: var(--sb-pond);
}

.dl-sitebar a:focus-visible {
  outline: 2px solid var(--sb-pond);
  outline-offset: 2px;
}

/* A narrow phone keeps the duck and the three links; the word mark goes. */
@media (max-width: 359px) {
  .dl-sitebar .dl-sb-brand span {
    display: none;
  }
}