/* game-banner.css -- the home page's live game banner (js/game-banner.js).
   Oilers blue for our game, pre-scout orange otherwise: the same glows as
   the Scores cards (.lg-ours / .lg-prescout in index.html). */
#app-layout .chart-header { align-items: center; }
#app-layout .chart-meta { white-space: nowrap; }
#game-banner-slot { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; min-width: 0; }
#game-banner-slot[hidden] { display: none; }
.game-banner {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.35rem 0.5rem 0.35rem 0.85rem;
  background: var(--surface); border-radius: 10px;
  font-family: 'Rubik', sans-serif; font-size: 0.8rem; white-space: nowrap;
}
.game-banner.gb-ours {
  border: 1px solid #041e42;
  box-shadow: 0 0 0 1px rgba(4,30,66,0.45), 0 0 11px 2px rgba(4,30,66,0.55);
}
.game-banner.gb-ps {
  border: 1px solid rgba(252,76,2,0.55);
  box-shadow: 0 0 0 1px rgba(252,76,2,0.25), 0 0 10px 1px rgba(252,76,2,0.35);
}
.gb-kicker { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.gb-ours .gb-kicker { color: #041e42; }
.gb-ps .gb-kicker { color: #c43c00; }
.gb-score { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.gb-n { font-size: 1.05rem; font-weight: 700; min-width: 0.8em; text-align: center; }
.gb-dash { color: var(--text3); }
.gb-score .lg-team-logo { width: 20px; height: 20px; }
.gb-status { color: #c01c1c; font-weight: 700; font-size: 0.76rem; display: flex; align-items: center; gap: 0.35rem; }
.gb-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #c01c1c;
  animation: lg-live-pulse 1.6s ease-in-out infinite;
}
.gb-status.gb-paused { color: var(--text2); }
.gb-status.gb-paused::before { background: var(--text3); animation: none; }
.gb-btn {
  font: inherit; font-size: 0.74rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 6px;
  cursor: pointer; border: 1px solid var(--border); background: var(--surface2); color: var(--text);
}
.gb-ours .gb-btn { background: #041e42; color: #fff; border-color: #041e42; }

/* Same breakpoint as css/mobile.css (phones, portrait and landscape). */
@media screen and (max-width: 700px), screen and (max-height: 500px) and (pointer: coarse), screen and (orientation: portrait) and (pointer: coarse) and (max-width: 1100px) {
  /* Above the strength toggle, full width. */
  #game-banner-slot { order: -1; flex-basis: 100%; margin: 0.15rem 0 0.3rem; }
  .game-banner { flex-wrap: wrap; gap: 0.45rem 0.7rem; white-space: normal; padding: 0.5rem 0.6rem 0.55rem 0.8rem; }
  .gb-status { margin-left: auto; }
  .gb-btn { flex: 1 1 100%; padding: 0.45rem 0.7rem; font-size: 0.8rem; }
}