/* ==========================================================================================
   The soundtrack's "now playing" card (9 Oct 2026). Its own sheet because it is the game's one deliberate exception to
   the sharp-edges rule: the user asked for it to follow the Apple design skill, rounded corners included.
   ========================================================================================== */
/* --- Now playing (9 Oct 2026, the user): the soundtrack card, top-left, after FIFA's, in Apple's material ---------
   The one rounded surface in the game, by the user's leave: a frosted banner like an iOS notification (continuous
   14px corners, a bright top edge where the light catches the glass) with an album-art tile for the icon. It never
   takes the pointer; NowPlayingCard.ts moves it on a spring. */
/* Laptops and desktops (the user, 9 Oct: top-left landed inside the dashboard's panels, as the career screens' --pad is
   wide; then "bottom right, slightly bigger, even if it covers something"): the bottom-right corner of the window. It
   never takes a tap, so covering an edge for a few seconds affects nothing. Phones keep the top-left placement the user
   approved (the max-height block below), with `right: auto`. */
.now-playing {
  --np-left: auto;
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 950;
  display: flex; align-items: center; gap: 12px; min-width: 236px; max-width: min(400px, 42vw);
  padding: 8px 20px 8px 8px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.74); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 0.5px rgba(16, 21, 31, 0.08), 0 2px 6px rgba(16, 24, 40, 0.10), 0 14px 34px rgba(16, 24, 40, 0.18);
  pointer-events: none; user-select: none; visibility: hidden; opacity: 0; will-change: transform, opacity;
}
.now-playing.is-on { visibility: visible; }
.np-art {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: #fff;
  background: linear-gradient(150deg, #2a3445, var(--ink-900)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.np-art svg { width: 22px; height: 22px; }
.np-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.np-title, .np-artist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.np-title { font: 700 21px/1.05 "Barlow Condensed", sans-serif; letter-spacing: 0.01em; color: var(--ink-900); }
.np-artist { font: 500 14.5px/1.25 Barlow, sans-serif; letter-spacing: 0.005em; color: var(--ink-500); }
.np-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 2200px) {
  .now-playing { gap: 14px; padding: 10px 24px 10px 10px; border-radius: 16px; bottom: 24px; right: 28px; }
  .np-art { width: 54px; height: 54px; border-radius: 12px; } .np-art svg { width: 27px; height: 27px; }
  .np-title { font-size: 26px; } .np-artist { font-size: 17px; }
}
@media (max-height: 520px) {
  .now-playing { --np-left: max(10px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); bottom: auto; right: auto; left: var(--np-left); min-width: 0; max-width: min(380px, 46vw); gap: 10px; padding: 7px 14px 7px 7px; border-radius: 12px; }
  .np-art { width: 32px; height: 32px; border-radius: 8px; } .np-art svg { width: 17px; height: 17px; }
  .np-title { font-size: 16px; } .np-artist { font-size: 12px; }
}
/* held upright the game asks to be turned; the card waits */
@media (orientation: portrait) and (max-width: 600px) { .now-playing { display: none; } }
@media (prefers-reduced-transparency: reduce) { .now-playing { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) { .now-playing { background: #fff; box-shadow: 0 0 0 1.5px var(--ink-900), var(--shadow-1); } }