/* "Play it natively in the Hearth app" (renderer/native-offer.js): the update card's sibling
   (.shell-update-ribbon, lock/lock.css) in night colours. Only what differs is here. */
.shell-update-ribbon.native-offer {
  width: min(420px, calc(100vw - 24px));
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(140, 180, 255, .26), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(255, 170, 110, .12), transparent 60%),
    linear-gradient(180deg, #2a2456, #1d1a40);
}
.shell-update-ribbon.native-offer .ur-mark {
  width: 60px; height: 60px;
  filter: drop-shadow(0 4px 0 rgba(27, 15, 36, .55)) drop-shadow(0 0 16px rgba(150, 190, 255, .55));
}
.shell-update-ribbon.native-offer .ur-kicker { color: #a9c8ff; }
.shell-update-ribbon.native-offer .ur-sub { color: #cfd6f6; line-height: 1.4; }
.shell-update-ribbon.native-offer .ur-msg:not(:empty) { color: #c9dcff; }
/* The primary button keeps the fire: it is the one warm thing on a cool card. */
.shell-update-ribbon.native-offer .ur-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }
.shell-update-ribbon.native-offer .ur-site { background: #34306a; }
.shell-update-ribbon.native-offer .ur-site:hover { background: #403b80; }
.shell-update-ribbon.native-offer .ur-btn.is-busy { filter: saturate(.6); cursor: progress; }
.shell-update-ribbon.native-offer .no-never {
  align-self: flex-start;
  margin-top: 10px; padding: 6px 0; min-height: 32px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  color: #9aa3d6; text-decoration: underline; text-underline-offset: 3px;
}
.shell-update-ribbon.native-offer .no-never:hover { color: #cfd6f6; }
.shell-update-ribbon.native-offer .no-never:focus-visible { outline: 3px solid #ffc857; outline-offset: 2px; border-radius: 6px; }
/* The Streaming card's way in, for a browser without the app. */
#moonlight-pref-card.in-shell .moon-get-app { display: none; }
@media (prefers-reduced-motion: reduce) {
  .shell-update-ribbon.native-offer, .shell-update-ribbon.native-offer .ur-mark { animation: none; }
}