/* Плеер Наталии Музыки. Цвета берёт из токенов страницы (--wine, --red, --lime…), свои — запасные. */
.nmp-host { --nmp-wine: var(--wine, #5E1030); --nmp-red: var(--red, #8C1538); --nmp-red2: var(--red-2, #A91C45);
  --nmp-lilac: var(--lime, #D9C4EC); --nmp-ink: var(--ink, #190A11); --nmp-r: var(--r-card, 22px); display: grid; gap: 16px; }

.nmp { position: relative; border-radius: var(--nmp-r); overflow: hidden; background: #0d0509;
  box-shadow: 0 24px 50px -28px rgba(25, 10, 17, .55); isolation: isolate; }
.nmp-stage { position: relative; aspect-ratio: 16 / 9; background: #0d0509; }
.nmp-frame, .nmp-frame iframe, .nmp-shield { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nmp-shield { z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nmp-shield.is-open { pointer-events: none; }

.nmp-big { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px 16px 20px; border: 0; border-radius: 999px; cursor: pointer; color: #fff;
  font: 600 16px/1 var(--sans, system-ui); background: linear-gradient(135deg, var(--nmp-red2), var(--nmp-red) 55%, var(--nmp-wine));
  box-shadow: 0 14px 30px -12px rgba(140, 21, 56, .7); transition: transform .25s var(--ease, ease), opacity .25s; }
.nmp-big svg { width: 22px; height: 22px; fill: currentColor; }
.nmp-big:hover { transform: scale(1.04); }
.nmp-big:active { transform: scale(.97); }
.nmp:not(.is-ready) .nmp-big { opacity: 0; pointer-events: none; }
.nmp-big[hidden], .nmp-hint[hidden], .nmp-msg[hidden] { display: none; }

.nmp-hint { position: absolute; z-index: 3; left: 50%; bottom: 14px; translate: -50% 0; padding: 8px 14px; border-radius: 999px;
  background: rgba(13, 5, 9, .78); color: #fff; font: 500 13px/1.3 var(--sans, system-ui); pointer-events: none; white-space: nowrap; }
.nmp-msg { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center;
  color: rgba(255, 255, 255, .8); font: 500 14px/1.45 var(--sans, system-ui); background: #0d0509; }

.nmp-resume { position: absolute; z-index: 4; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 20px; background: radial-gradient(80% 80% at 50% 40%, rgba(94, 16, 48, .55), rgba(13, 5, 9, .88)); }
.nmp-resume.is-on { display: flex; animation: nmp-in .35s var(--ease, ease) both; }
.nmp-rbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 12px 22px; border-radius: 999px; cursor: pointer;
  font: 600 15px/1.2 var(--sans, system-ui); color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); }
.nmp-rbtn--main { border: 0; background: linear-gradient(135deg, var(--nmp-red2), var(--nmp-red) 55%, var(--nmp-wine)); box-shadow: 0 14px 30px -12px rgba(169, 28, 69, .8); }
.nmp-rbtn svg { width: 18px; height: 18px; fill: currentColor; }

.nmp-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px 12px; background: #140810; color: #fff; }
.nmp-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; transition: background .2s; }
.nmp-ic:hover { background: rgba(255, 255, 255, .16); }
.nmp-ic svg { width: 20px; height: 20px; fill: currentColor; }
.nmp-fsb svg { fill: none; }
.nmp-sp { flex: none; min-width: 52px; height: 34px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  background: transparent; color: #fff; font: 600 13px/1 var(--sans, system-ui); cursor: pointer; font-variant-numeric: tabular-nums; }
.nmp-sp:hover { border-color: var(--nmp-lilac); }

.nmp-track { position: relative; flex: 1; height: 28px; cursor: pointer; touch-action: none; }
.nmp-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 6px; translate: 0 -50%; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.nmp-fill { position: absolute; left: 0; top: 50%; height: 6px; translate: 0 -50%; border-radius: 99px; width: 0;
  background: linear-gradient(90deg, var(--nmp-red2), var(--nmp-lilac)); transition: width .25s linear; }
.nmp-knob { position: absolute; top: 50%; width: 16px; height: 16px; translate: -50% -50%; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(217, 196, 236, .35); left: 0; transition: left .25s linear, transform .2s; }
.nmp.is-drag .nmp-fill, .nmp.is-drag .nmp-knob { transition: none; }
.nmp.is-drag .nmp-knob { transform: scale(1.2); }

/* полноэкранный режим: и настоящий, и «растянутый» для iPhone */
.nmp.is-fs, .nmp.is-fs-css, .nmp:fullscreen { display: flex; flex-direction: column; border-radius: 0; background: #000; }
.nmp.is-fs .nmp-stage, .nmp.is-fs-css .nmp-stage, .nmp:fullscreen .nmp-stage { flex: 1; aspect-ratio: auto; background: #000; }
.nmp.is-fs .nmp-bar, .nmp.is-fs-css .nmp-bar { padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.nmp.is-fs-css { position: fixed; inset: 0; z-index: 9999; width: 100vw; height: 100dvh; padding-top: env(safe-area-inset-top); }
html.nmp-lock, html.nmp-lock body { overflow: hidden; }

/* кнопки под плеером */
.nmp-btns { display: grid; gap: 10px; }
.nmp-btns:empty { display: none; }
.nmp-cta { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 22px; border-radius: 999px; text-align: center;
  text-decoration: none; font: 600 16px/1.25 var(--sans, system-ui); transition: transform .2s var(--ease, ease), box-shadow .2s; }
.nmp-cta:active { transform: scale(.98); }
.nmp-cta--offer { color: #fff; background: linear-gradient(135deg, var(--nmp-red2), var(--nmp-red) 55%, var(--nmp-wine)); box-shadow: 0 14px 28px -14px rgba(140, 21, 56, .7); }
.nmp-cta--gift { color: var(--nmp-wine); background: linear-gradient(160deg, var(--lime-2, #E6D7F2), var(--nmp-lilac)); }
.nmp-cta--support { color: var(--nmp-wine); background: transparent; border: 1.5px solid rgba(94, 16, 48, .28); }
.nmp-cta.is-new { animation: nmp-pop .55s var(--ease, ease) both; }
@keyframes nmp-in { from { opacity: 0; } }
@keyframes nmp-pop { 0% { opacity: 0; transform: translateY(10px) scale(.97); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nmp-cta.is-new, .nmp-resume.is-on { animation: none; } .nmp-fill, .nmp-knob { transition: none; } }

@media (max-width: 480px) {
  .nmp { border-radius: 16px; }
  .nmp-bar { gap: 8px; padding: 8px 10px 10px; }
  .nmp-ic { width: 38px; height: 38px; }
  .nmp-big { padding: 14px 22px 14px 18px; font-size: 15px; }
}