/**
 * arcade-bar.css — the chrome a game wears inside the arcade.
 *
 * Replaces the site navbar on game pages. A console does not show you a
 * website's navigation while you are playing, and the door out of a game
 * should lead to the shelf, not to the homepage.
 *
 * Loaded by includes/header.php only in arcade mode, and by RMChrome as a
 * fallback on the handful of games that are static .html and cannot include
 * the header at all.
 *
 * Palette is the launcher's (docs/launcher/README.md §4) so the bar reads as
 * part of the same device rather than a third piece of chrome.
 */

.arcbar {
  --brass: #C9A227;
  --bone:  #EDE6D8;
  --dim:   #9A8E7E;

  position: sticky;
  top: 0;
  z-index: 1030;                 /* the Bootstrap sticky-top level it replaces */
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
  padding: 0 clamp(12px, 3vw, 26px);
  min-height: 52px;              /* close to the navbar it stands in for, so
                                    games that assumed that height still sit right */
  background: linear-gradient(180deg, #241F1A 0%, #1B1714 100%);
  border-bottom: 1px solid rgba(237, 230, 216, .12);
  color: var(--bone);
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}

/* the door back to the shelf */
.arcbar-home {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  flex: 0 0 auto;
  color: var(--brass);
  text-decoration: none;
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 8px 0;
  border-radius: 2px;
  transition: color .2s ease;
}
.arcbar-home:hover,
.arcbar-home:focus-visible { color: var(--bone); }
.arcbar-home:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.arcbar-home .chev { font-size: 1.1em; line-height: 1; }

.arcbar-rule {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  margin: 12px 0;
  background: rgba(237, 230, 216, .14);
}

/* the game's own name, in the engraved voice the shelf uses */
.arcbar-title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(17px, 2.6vw, 22px);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* right-hand side is left free for RMChrome's fullscreen / how-to cluster */
.arcbar-spacer { flex: 1 1 auto; }

.arcbar-site {
  flex: 0 0 auto;
  color: var(--dim);
  text-decoration: none;
  font-size: clamp(10px, 1.3vw, 12px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.arcbar-site:hover,
.arcbar-site:focus-visible { color: var(--bone); }

/* Fullscreen puts the game element over everything; the bar must not sit on
   top of it, and there is a Back affordance inside the game anyway. */
:fullscreen .arcbar,
:-webkit-full-screen .arcbar { display: none; }

/* A narrow phone keeps the door and the title and drops the rest. */
@media (max-width: 430px) {
  .arcbar { gap: 10px; padding: 0 12px; min-height: 46px; }
  .arcbar-site { display: none; }
  .arcbar-home span.label { display: none; }   /* chevron only */
}

@media (prefers-reduced-motion: reduce) {
  .arcbar * { transition: none !important; }
}