/* ──────────────────────────────────────────────────────────────────────
   PLYR — textured-bg utility
   Adds the layered fairway/contour/glow texture from /demo.html to any
   dark-green section. Apply class="plyr-textured-bg" to the section.
   The element must be position: relative (or static — we set it).
   ────────────────────────────────────────────────────────────────────── */

.plyr-textured-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Soft glow + fairway radials */
.plyr-textured-bg::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 70% 20%, rgba(126,200,80,0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(200,168,75,0.06), transparent 60%),
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(46,107,64,0.45), transparent 70%);
}

/* Topographic course-contour artwork (inline SVG data URI) */
.plyr-textured-bg::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.36;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='cf' x1='0' x2='0' y1='0' y2='1'><stop offset='0%25' stop-color='%237ec850' stop-opacity='0.08'/><stop offset='60%25' stop-color='%23c8a84b' stop-opacity='0.18'/><stop offset='100%25' stop-color='%237ec850' stop-opacity='0.05'/></linearGradient></defs><path d='M 100 220 Q 280 180 460 230 T 820 240 Q 1020 260 1180 220 T 1440 230' fill='none' stroke='url(%23cf)' stroke-width='1' opacity='0.55'/><path d='M -40 360 Q 200 320 400 360 T 760 360 Q 980 380 1180 350 T 1500 370' fill='none' stroke='url(%23cf)' stroke-width='1' opacity='0.51'/><path d='M -40 480 Q 240 440 480 480 T 880 480 Q 1100 500 1300 460 T 1500 480' fill='none' stroke='url(%23cf)' stroke-width='1' opacity='0.47'/><path d='M -40 600 Q 280 560 520 600 T 920 600 Q 1140 620 1340 580 T 1500 600' fill='none' stroke='url(%23cf)' stroke-width='1' opacity='0.43'/><path d='M -40 720 Q 320 680 580 720 T 980 720 Q 1200 740 1380 700 T 1500 720' fill='none' stroke='url(%23cf)' stroke-width='1' opacity='0.39'/><path d='M -40 840 Q 360 800 640 840 T 1040 840 Q 1240 860 1420 820 T 1500 840' fill='none' stroke='url(%23cf)' stroke-width='1' opacity='0.35'/><path d='M 1100 540 Q 1200 480 1300 540 Q 1340 620 1240 660 Q 1140 660 1100 600 Z' fill='none' stroke='url(%23cf)' stroke-width='1.5' opacity='0.31'/><path d='M 220 660 Q 320 600 420 660 Q 460 740 360 780 Q 240 770 220 700 Z' fill='none' stroke='url(%23cf)' stroke-width='1.5' opacity='0.27'/><circle cx='180' cy='700' r='3' fill='%23c8a84b' opacity='0.65'/><circle cx='1240' cy='600' r='4' fill='%237ec850' opacity='0.7'/><line x1='1240' y1='600' x2='1240' y2='555' stroke='%23c8a84b' stroke-width='0.8' opacity='0.6'/><polygon points='1240,555 1262,562 1240,572' fill='%23c8a84b' opacity='0.8'/><path d='M 200 700 Q 600 540 1100 580 T 1240 600' fill='none' stroke='%23c8a84b' stroke-width='1' stroke-dasharray='2 6' opacity='0.5'/></svg>");
  background-size: cover;
  background-position: center;
}

/* Lift content above the texture layers */
.plyr-textured-bg > * { position: relative; z-index: 1; }