/* Site banner + nav injected at the top of the game pages (games/views.py). Scoped to .games-site-bar so it
   neither uses nor overrides the games' own tokens in public/css/base.css. Logical properties, AA contrast. */

.games-site-bar {
  --gs-surface: #f5f5f2;
  --gs-text: #1b1b1b;
  --gs-border: #d4d4cf;
  --gs-link: #0b5c3b;
  --gs-accent: #0b5c3b;
  --gs-accent-text: #ffffff;
  --gs-banner-bg: #6b1d00;
  --gs-banner-text: #ffffff;
  --gs-focus: #1a5fb4;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  .games-site-bar {
    --gs-surface: #1e1e1c;
    --gs-text: #ececec;
    --gs-border: #3a3a37;
    --gs-link: #7fd1a8;
    --gs-accent: #7fd1a8;
    --gs-accent-text: #0d1f16;
    --gs-banner-bg: #ffcf8a;
    --gs-banner-text: #2a1300;
    --gs-focus: #8ab4f8;
  }
}

.games-site-bar .test-banner {
  background: var(--gs-banner-bg);
  color: var(--gs-banner-text);
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
}
.games-site-bar .test-banner p { margin: 0; }
.games-site-bar .test-banner a { color: inherit; font-weight: 600; }

.games-site-bar .site-header {
  background: var(--gs-surface);
  border-block-end: 1px solid var(--gs-border);
}
.games-site-bar .site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  max-inline-size: 60rem;
  margin-inline: auto;
  padding-block: 0.5rem;
  padding-inline: 1rem;
}
.games-site-bar .site-name { font-weight: 700; font-size: 1.15rem; color: var(--gs-text); text-decoration: none; }
.games-site-bar .nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.games-site-bar .nav-list a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--gs-link);
  text-decoration: none;
}
.games-site-bar .nav-list a[aria-current="page"] { text-decoration: underline; font-weight: 600; }
.games-site-bar .nav-list .nav-donate {
  background: var(--gs-accent);
  color: var(--gs-accent-text);
  border-radius: 6px;
  padding-inline: 1rem;
  font-weight: 600;
}
.games-site-bar a:focus-visible { outline: 3px solid var(--gs-focus); outline-offset: 2px; }

/* One dismissible donate line on a game's result screen (public/js/api.js), at most once a day. */
.donate-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block: 0.75rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border, #d3d6da);
  border-radius: 8px;
  font-size: 0.95rem;
}
.donate-line a { font-weight: 600; }
.donate-line button {
  margin-inline-start: auto;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* The game header (rendered by public/js/api.js) gained "My account" and "Donate" buttons; let its action
   buttons wrap on narrow phones instead of pushing the page sideways. */
.app-header .header-actions {
  flex-wrap: wrap;
  max-inline-size: 100%;
}