/*!
 * The Prodigies rainbow bar — one line at the top of every game.
 *
 *   <link rel="stylesheet" href="../../assets/rainbow-bar.css" />
 *
 * The 8 deskbell stripes: C D E F G A B High-C. MASTER COLORS 2020.
 * ALWAYS these 8, never the 12 chromatic — this is the same set the Shopify
 * header, the family nav and the PK-5 portal use, and matching it is the whole
 * point. A game with a chromatic bar would read as a different product.
 *
 * Implementation notes:
 *  - `position: fixed` so it survives games that scroll, games that lock the
 *    viewport, and games that draw a full-screen canvas.
 *  - `pointer-events: none` so it can never intercept a tap meant for the game
 *    underneath — several of these are played by four-year-olds on tablets.
 *  - z-index just under the family nav's, so on pages that carry both the nav
 *    still wins.
 *  - Loaded as its own file rather than pasted into each game's stylesheet, so
 *    changing the brand means changing one line in one place.
 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 2147482999;
  pointer-events: none;
  background: linear-gradient(to right,
    #E72829 0% 12.5%,    /* C  */
    #F39422 12.5% 25%,   /* D  */
    #F1E606 25% 37.5%,   /* E  */
    #6AB845 37.5% 50%,   /* F  */
    #009999 50% 62.5%,   /* G  */
    #7B569E 62.5% 75%,   /* A  */
    #EA6BA3 75% 87.5%,   /* B  */
    #E72829 87.5% 100%   /* High C — the octave closes on C again */
  );
}

/* Nudge the fixed page furniture the games park in the top corners, so the
   bar never sits on top of a Menu link or a mute button. */
body .app-menu-link,
body .portal-back-link,
body .mute-btn,
body .si-menu-link,
body .mm-menu-link,
body .wi-menu-link {
  margin-top: 5px;
}

@media print {
  body::before { display: none; }
}