/*!
 * PlayVlay promo strip — the dismissible gold line above the top nav.
 * Pairs with /js/promo-strip.js; each page supplies the markup (see the
 * .promobar block in games.html / rooms.html) so the strip ships in the served
 * HTML and never paints late.
 *
 * MUST be linked AFTER the page's own catalog styles (pv-catalog.css, or
 * games.html's inline <style>): the .webbar / .app offsets below deliberately
 * override theirs at equal specificity, so document order decides.
 *
 * Gold because the coin is the offer — the same gold the balance and the store
 * CTA use, so the strip reads as part of the rewards programme rather than an
 * ad someone bolted on. Those golds are written as LITERALS here, not as
 * var(--accent)/var(--accentInk): the room page (/r/:code) redefines --accent
 * to its room blue, which would have tinted the coin badge on that page only.
 * The strip looks the same everywhere by design, so it owns its own colours —
 * the same call roomPage.js already makes for the nav's "Get the app" pill.
 */

:root { --promoH: 40px; }

/* One var carries the whole layout cost: the nav's top, the page's padding and
   any anchor offset all read it. `:root.promo-off` zeroing it is therefore the
   entire act of removing the strip — and it is written with a class ON :root on
   purpose, so it outranks the plain `:root` inside the phone media query below.
   Without that extra specificity it lost there, and anyone who had dismissed
   the strip kept a 36px dead band above the nav. */
:root.promo-off { --promoH: 0px; }
.promo-off .promobar { display: none; }

.webbar { top: var(--promoH); }
.app { padding-top: calc(var(--navH) + var(--promoH)); }

.promobar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 61;
  height: var(--promoH);
  display: flex; align-items: center; justify-content: center;
  padding: 0 40px;
  background: linear-gradient(90deg, #F5C451, #FFDD8E 52%, #F5C451);
  color: #1A1408;
}
.promoIn {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  color: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: -0.1px;
}
.promoIn b { font-weight: 800; }

/* Coin badge, not an emoji: the system coin glyph renders silver-grey and goes
   muddy on gold. This is the store's own coin (.coinIco), inverted. */
.promoIco {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1A1408; color: #F5C451;
  font-size: 10px; font-weight: 800; line-height: 1;
}
.promoTxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promoShort { display: none; }
.promoGo {
  flex: none; font-weight: 800; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px;
}
.promoIn:hover .promoGo { text-decoration-color: rgba(26, 20, 8, 0.45); }
.promoX {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 20px; line-height: 1;
  color: rgba(26, 20, 8, 0.55);
}
.promoX:hover { background: rgba(26, 20, 8, 0.10); color: #1A1408; }

/* Copy drops a tier at a time rather than ellipsing: a half-sentence with a "…"
   reads as a bug, and this line is the whole point of the strip. */
@media (max-width: 900px) { .promoTail { display: none; } }
@media (max-width: 680px) {
  :root { --promoH: 36px; }
  .promobar { padding: 0 32px 0 10px; }
  .promoIn { gap: 7px; font-size: 12.5px; }
  .promoHead { display: none; }
  .promoShort { display: inline; }
  .promoIco { width: 16px; height: 16px; font-size: 9px; }
  .promoGo {
    font-size: 11.5px; text-decoration: none;
    padding: 4px 9px; border-radius: 999px; background: rgba(26, 20, 8, 0.15);
  }
}