HTML, CSS and JavaScript playground

<div class="containerA">
      <div class="containerB">
        <div class="buttonContainerA">
        </div>
        <div id="lb" class="modal">
          <div class="inner-modal">
            <div class="buttonContainerB">
              <a href="https://onlineradiobox.com/gr/heat/playlist/" class="linkButton btnB-primary btnB" target="_blank">heat radio</a>
              <a href="https://onlineradiobox.com/gr/heatclassic/playlist/" class="linkButton btnB-primary btnB" target="_blank">heat classic</a>
              <a href="https://the-radio.ru/radio/svoe-fm-r2268" class="linkButton btnB-primary btnB" target="_blank">CBOE FM</a>
              <a href="https://the-radio.ru/radio/deep-fm-rcm-r2762" class="linkButton btnB-primary btnB" target="_blank">Relax Club Music</a>
              <a href="https://the-radio.ru/radio/sound-park-deep-r1980" class="linkButton btnB-primary btnB" target="_blank">SoundPark #Deep</a>
              <a href="https://the-radio.ru/radio/soundpark-classic-r2959" class="linkButton btnB-primary btnB" target="_blank">Sound Park Classic</a>
              <a href="https://www.radiobells.com/deephouse/delishdeep/" class="linkButton btnB-primary btnB" target="_blank">Delish Deep</a>
              <a href="https://the-radio.ru/radio/best-deep-fm-r2723" class="linkButton btnB-primary btnB" target="_blank">BEST DEEP FM</a>
              <a href="https://the-radio.ru/radio/deep-one-r1781" class="linkButton btnB-primary btnB" target="_blank">DEEP ONE</a>
              <a href="https://onlineradiobox.com/gr/musicfactory/playlist/" class="linkButton btnB-primary btnB" target="_blank">Music Factory</a>
              <a href="https://the-radio.ru/radio/mdeep-r2673" class="linkButton btnB-primary btnB" target="_blank">M.Deep Radio</a>
              <a href="https://onlineradiobox.com/gr/fly104/playlist/" class="linkButton btnB-primary btnB" target="_blank">Fly 104</a>
              <a href="https://the-radio.ru/radio/luxury-music-r2198" class="linkButton btnB-primary btnB" target="_blank">Luxury Music</a>
              <a href="https://fmcube.net/radio/nu-euphoria-trance-radio" class="linkButton btnB-primary btnB" target="_blank">Nu Euphoria</a>
              <a href="https://onlineradiobox.com/gr/cavoparadiso/playlist/" class="linkButton btnB-primary btnB" target="_blank">Cavo Paradiso</a>
              <a href="https://fmcube.net/radio/soho-fm" class="linkButton btnB-primary btnB" target="_blank">Soho FM</a>
              <a href="https://onlineradiobox.com/kz/diskoteka90/playlist/" class="linkButton btnB-primary btnB" target="_blank">90s Eurodance</a>
              <a href="https://fmcube.net/radio/coffee-fm" class="linkButton btnB-primary btnB" target="_blank">Coffee FM</a>
              <a href="https://nightride.fm/stations?station=nightride" class="linkButton btnB-primary btnB" target="_blank">Nightride FM</a>
              <a href="https://retrowave.one/" class="linkButton btnB-primary btnB" target="_blank">RetroWave.One</a>
              <a href="https://www.synthwaveradio.eu/" class="linkButton btnB-primary btnB" target="_blank">Synthwave Radio</a>
              <a href="https://onlineradiobox.com/nl/synthwavecity/playlist/" class="linkButton btnB-primary btnB" target="_blank">Synthwave City FM</a>
              <a href="https://onlineradiobox.com/gr/rockmelodic/playlist/" class="linkButton btnB-primary btnB" target="_blank">Rock Melodic Radio</a>
              <button class="close" title="Close" aria-label="Close">Back To Radios</button>
            </div>
          </div>
        </div>
      </div>
    </div>

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #15202b;
  /*padding: 0 8px 0;*/
}

body:has(.modal.active) {
  overflow: hidden;
}

button,
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.containerA,
.modal {
  display: flex;
  position: fixed;
  inset: 0;
  overflow: auto;
  /* Enable scroll if needed */
}

.flex-container {
  position: absolute;
  inset: 0 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.containerB {
  margin: auto;
}

.buttonContainerA,
.buttonContainerB {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 569px;
  gap: 10px;
}

.playButton,
.linkButton,
.close {
  flex-basis: 183px;

/* 
  width of each button */
  margin: 0;

/* 
  spacing between buttons */
  cursor: pointer;
}

.modal {
  /*background: rgba(0, 0, 0, 0.4);*/
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transform: translateY(-25%);
  opacity: 0;
  pointer-events: none;
  z-index: -99;
  border-radius: 50%;
  --units: 8px;
  --brick1: #222;
  --brick2: #222;
  --lines: #121212;
  --gp-ln: 50% / calc(var(--units) * 10) calc(var(--units) * 5);
  --gp-cn: 50% / calc(var(--units) * 5) calc(var(--units) * 5);
  background: repeating-conic-gradient(
        from 90deg at 95% 55%,
        var(--lines) 0% 25%,
        #fff0 0% 100%
      )
      var(--gp-cn),
    repeating-linear-gradient(
        180deg,
        var(--lines) 0 5%,
        #fff0 0 50%,
        var(--lines) 0 55%,
        var(--brick2) 0 100%
      )
      var(--gp-ln),
    repeating-linear-gradient(
        90deg,
        var(--brick1) 0 47.5%,
        var(--lines) 0 50%,
        var(--brick1) 0 97.5%,
        var(--lines) 0 100%
      )
      var(--gp-ln);
}

.modal.active {
  opacity: 1;
  transform: translateY(0);
  z-index: 1000;
  pointer-events: initial;
  border-radius: 0;
  overflow: auto;
  /*padding: 8px 8px;*/
}

.inner-modal {
  position: relative;
  margin: auto;
}

.btnA-primary,
.close {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btnA,
.btnB,
.close {
  display: inline-block;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #0d6efd;
  border: 1px solid transparent;
  box-sizing: border-box;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 4px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.btnA:hover {
  background-color: #0056b3;
  border-color: #0a58ca;
  color: #fff;
}

.played {
  border-color: #0a58ca;
  background-color: #0056b3;
  box-shadow: 0 0 0 2px rgb(255 0 0);
}

.btnB-primary {
  color: #2fdcfe;
  background-color: #000;
  border-color: #2fdcfe;
}

.btnB {
  border: 1px solid #2fdcfe;
}

.btnB:hover {
  background-color: #121212;
}

.btnB:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(47 254 185 / 100%);
}

.hide {
  display: none;
}

(function manageRadiosAndModal() {

// Define your radio stations
    const radioStations = [{
        src: "https://solid67.streamupsolutions.com/proxy/" +
        "qrynsxmv?mp=/stream",
        title: "heat radio"
    }, {
        src: "https://solid1.streamupsolutions.com/proxy/" +
        "neukptkl?mp=/stream",
        title: "heat classic"
    }, {
        src: "https://relay2.radiotoolkit.com/svoefm",
        title: "CBOE FM"
    }, {
        src: "https://relay2.radiotoolkit.com/rcmdeep",
        title: "Relax Club Music"
    }, {
        src: "https://relay1.radiotoolkit.com/spdeep",
        title: "SoundPark #Deep"
    }, {
        src: "https://relay2.radiotoolkit.com/spclassic",
        title: "SoundPark Classic"
    }, {
        src: "https://relay2.radiotoolkit.com/delishdeep",
        title: "Delish Deep"
    }, {
        src: "https://myradio24.org/5129",
        title: "BEST DEEP FM"
    }, {
        src: "https://stream.deep1.ru/deep1aac",
        title: "DEEP ONE"
    }, {
        src: "https://i4.streams.ovh/sc/musicfactory/stream",
        title: "Music Factory"
    }, {
        src: "https://deephousex.ru/live",
        title: "M.Deep Radio"
    }, {
        src: "https://imagine2.radioca.st/;",
        title: "Fly 104"
    }, {
        src: "https://luxury.radiotoolkit.com:8000/radio",
        title: "Luxury Music"
    }, {
        src: "https://radio.nueuphoria.com:8443/live",
        title: "Nu Euphoria"
    }, {
        src: "https://neos.win:48488/1",
        title: "Cavo Paradiso"
    }, {
        src: "https://listen4.myradio24.com/sohofm",
        title: "Soho FM"
    }, {
        src: "https://myradio24.org/5967",
        title: "90s Eurodance"
    }, {
        src: "https://stream06.pcradio.ru/Vintazh_kafe-hi",
        title: "Coffee FM"
    }, {
        src: "https://stream.nightride.fm/nightride.mp3",
        title: "Nightride FM"
    }, {
        src: "https://waveretro.ru:8443/stream",
        title: "RetroWave.One"
    }, {
        src: "https://stream.synthwaveradio.eu/listen/" +
            "synthwaveradio.eu/radio.mp3",
        title: "Synthwave Radio"
    }, {
        src: "https://synthwave-rex.radioca.st/;",
        title: "Synthwave City FM"
    }, {
        src: "https://i4.streams.ovh:2200/ssl/rockmelo?mp=/stream",
        title: "Rock Melodic Radio"
    }];

// Link button config
    const linkButton = {
        className: "linkButton btnB-primary btnB",
        destination: "#lb",
        text: "Last Song Played"
    };

// Get button container (with early exit)
    const buttonContainer = document.querySelector(".buttonContainerA");
    if (!buttonContainer) {
        return; // Exit if container not found
    }

// Audio setup
    const audio = document.createElement("audio");
    audio.preload = "none";
    document.body.appendChild(audio);

// Play button creator
    function createPlayButton(station) {
        const button = document.createElement("button");
        button.className = "playButton btnA-primary btnA";
        button.textContent = station.title;
        button.dataset.src = station.src;
        button.setAttribute("aria-label", "Play " + station.title);
        return button;
    }

// Better play handler
    function handlePlayButtonClick(src, button) {
        const isSameStream = audio.src === src;

if (isSameStream) {
            if (audio.paused) {
                audio.play();
                button.classList.add("played");
            } else {
                audio.pause();
                button.classList.remove("played");
            }
        } else {
            audio.src = src;
            audio.play();

const allButtons = buttonContainer.querySelectorAll(".playButton");
            allButtons.forEach(function (btn) {
                btn.classList.remove("played");
            });
            button.classList.add("played");
        }
    }

// Modal functions
    function openModal(target) {
        const modal = document.querySelector(target);
        if (modal) {
            modal.classList.add("active");
        }
    }

function closeModal(modal) {
        if (modal) {
            modal.classList.remove("active");
        }
    }

function setupModalHandlers() {
        const linkBtn = document.createElement("button");
        linkBtn.className = linkButton.className;
        linkBtn.textContent = linkButton.text;
        linkBtn.setAttribute("data-destination", linkButton.destination);
        linkBtn.setAttribute("aria-label", linkButton.text);
        buttonContainer.appendChild(linkBtn);

linkBtn.addEventListener("click", function () {
            openModal(linkBtn.dataset.destination);
        });

const modal = document.querySelector(linkButton.destination);
        const closeBtn = modal?.querySelector(".close");

if (closeBtn) {
            closeBtn.addEventListener("click", function () {
                closeModal(modal);
            });
        }

window.addEventListener("click", function (e) {
            if (e.target === modal) {
                closeModal(modal);
            }
        });

document.addEventListener("keydown", function (e) {
            if (e.key === "Escape" && modal.classList.contains("active")) {
                closeModal(modal);
            }
        });
    }

radioStations.forEach(function (station) {
        buttonContainer.appendChild(createPlayButton(station));
    });

// Event delegation with closest()
    buttonContainer.addEventListener("click", function (e) {
        const button = e.target.closest(".playButton");
        if (!button) {
            return; // Exit if container not found
        }
        handlePlayButtonClick(button.dataset.src, button);
    });

// Setup modal
    setupModalHandlers();
}());