/* Political Trivia. — the brand bar ABOVE each game (dev only for now; build.sh
   injects it). Every rule but the first is scoped to #ptbar so nothing here
   touches the game's own stylesheet, and the game's CSS can't reach in. Same
   navy band as the hub, the nameplate as the way home, the game names to switch,
   and on the right the streak, the record, sign-in and a menu.

   The one rule that reaches into the games: their own button row is hidden,
   because the bar now carries everything it did (see gamebar.js). The buttons
   stay in the page; the bar's stand-ins click them. */
.utility-bar, .topbar-nav { display: none !important; }

#ptbar { box-sizing: border-box; min-height: 42px; background: #14233f; color: #dbe3ee; font: 500 14px/1 "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; position: relative; z-index: 50; }
#ptbar * { box-sizing: border-box; }
#ptbar [hidden] { display: none !important; }
#ptbar .ptbar-in { width: min(100% - 40px, 1180px); margin: 0 auto; min-height: 42px; display: flex; align-items: center; gap: 0 22px; }
#ptbar .ptbar-home { font: 800 22px/1 "Noto Serif Display", "Times New Roman", Georgia, serif; font-stretch: 75%; letter-spacing: -.012em; color: #fff; text-decoration: none; white-space: nowrap; padding: 8px 0; }
#ptbar .ptbar-home:hover { text-decoration: underline; text-underline-offset: 4px; }
#ptbar .ptbar-stop { color: #e8412f; }
#ptbar nav { display: flex; align-items: stretch; gap: 0 4px; min-height: 42px; min-width: 0; padding-left: 22px; border-left: 1px solid #ffffff2e; overflow-x: auto; scrollbar-width: none; }
#ptbar nav::-webkit-scrollbar { display: none; }
#ptbar nav a { display: inline-flex; align-items: center; padding: 0 10px; color: #dbe3ee; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
#ptbar nav a:hover { color: #fff; background: #ffffff14; }
#ptbar nav a[aria-current="page"] { color: #fff; font-weight: 700; border-bottom-color: #e8412f; }

/* the tools */
#ptbar .ptbar-tools { margin-left: auto; display: flex; align-items: center; gap: 0 4px; flex: none; }
#ptbar .ptbar-btn { appearance: none; margin: 0; height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: #fff; font: 600 14px/1 "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
#ptbar .ptbar-btn:hover { background: #ffffff1f; }
#ptbar .ptbar-streak { border-color: #ffffff47; font-variant-numeric: tabular-nums; gap: 4px; }
#ptbar .ptbar-streak .ptbar-long { margin-left: -4px; }
#ptbar .ptbar-signin { background: #fff; color: #14233f; margin-left: 6px; }
#ptbar .ptbar-signin:hover { background: #dbe3ee; }
#ptbar .ptbar-caret { font-size: 11px; color: #a9b6c9; }
#ptbar .ptbar-menu-wrap { position: relative; }
#ptbar .ptbar-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 210px; padding: 6px 0; background: #fff; color: #0f1419; border: 1px solid #0f1419; border-radius: 2px; }
#ptbar .ptbar-menu-stats { display: none; }
#ptbar .ptbar-menu a, #ptbar .ptbar-signout, #ptbar .ptbar-menu-stats { display: block; width: 100%; margin: 0; padding: 10px 16px; border: 0; border-radius: 0; background: none; color: #0f1419; font: 500 14.5px/1.2 "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-transform: none; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
#ptbar .ptbar-menu a:hover, #ptbar .ptbar-signout:hover, #ptbar .ptbar-menu-stats:hover { background: #e9eef3; }
#ptbar .ptbar-signout { border-top: 1px solid #b7c2cd; margin-top: 6px; padding-top: 12px; }
#ptbar .ptbar-out { color: #46505c; }
#ptbar a:focus-visible, #ptbar button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
#ptbar .ptbar-menu a:focus-visible, #ptbar .ptbar-signout:focus-visible { outline-color: #a61b1b; }

@media (max-width: 1080px) { #ptbar .ptbar-streak .ptbar-long { display: none; } #ptbar .ptbar-in { gap: 0 14px; } #ptbar nav { padding-left: 14px; } #ptbar nav a { padding: 0 8px; } }
@media (max-width: 860px) {
  #ptbar .ptbar-in { width: min(100% - 32px, 1180px); flex-wrap: wrap; }
  #ptbar .ptbar-home { font-size: 20px; }
  #ptbar nav { flex: 1 1 100%; order: 3; padding-left: 0; border-left: 0; border-top: 1px solid #ffffff2e; min-height: 40px; }
  #ptbar nav a { padding: 0 12px 0 0; }
}
@media (max-width: 520px) {
  #ptbar .ptbar-in { gap: 0 10px; }
  #ptbar .ptbar-home { font-size: 18px; }
  #ptbar .ptbar-btn { padding: 0 8px; }
  #ptbar .ptbar-stats { display: none; }
  #ptbar .ptbar-menu-stats { display: block; }
}