/* Goldfish Water Cooler: the bar every game wears at the very top.
   Copy this file into a game unchanged and paste gwc-bar.html as the first
   thing in <body>. It brings its own colors, so it looks the same in every game
   whatever the game's palette. It uses Gabarito and Archivo (see README.md) and
   falls back to system fonts without them. */

.gwc-bar {
  --gwc-water: #072b3d;
  --gwc-ink: #cfe6ef;
  --gwc-fish: #f26a1b;
  --gwc-fish-light: #ff9a4d;
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 36px;
  padding: 0 clamp(14px, 3vw, 28px);
  background: var(--gwc-water);
  color: var(--gwc-ink);
  font: 600 13px/1 "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

.gwc-bar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.gwc-bar .gwc-fish {
  width: 26px;
  height: 16px;
  margin-right: 2px;
  flex: none;
}

/* The hub's own wordmark: lowercase Gabarito. */
.gwc-bar .gwc-name {
  font: 800 15px/1 "Gabarito", "Archivo", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: #fff;
}

.gwc-bar .gwc-more {
  color: var(--gwc-fish-light);
  font-weight: 750;
}

.gwc-bar .gwc-short {
  display: none;
}

.gwc-bar a:hover .gwc-name,
.gwc-bar .gwc-more:hover {
  text-decoration: underline;
  text-decoration-color: var(--gwc-fish);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.gwc-bar a:focus-visible {
  outline: 2px solid var(--gwc-fish-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* On a phone: the fish, the name, and "More games". */
@media (max-width: 480px) {
  .gwc-bar .gwc-long {
    display: none;
  }

  .gwc-bar .gwc-short {
    display: inline;
  }
}

@media print {
  .gwc-bar {
    display: none;
  }
}