/* RadioBG compact gallery v1: scoped to directory only. */
#radio-grid.radio-grid {
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:24px 17px!important; align-items:start!important;
  grid-auto-rows:auto!important; grid-template-rows:none!important;
}
#radio-grid .radio-card {
  display:flex; flex-direction:column; gap:6px!important;
  min-width:0; min-height:0!important; height:auto!important; padding:0!important;
  margin:0!important; background:transparent!important;
  border:0!important; border-radius:0!important;
  box-shadow:none!important; overflow:visible!important; align-self:start;
}
#radio-grid .radio-card:hover {transform:translateY(-2px);box-shadow:none!important;border:0!important;}
#radio-grid .radio-card.is-unavailable {opacity:.68;}
#radio-grid .radio-artwork {position:relative;width:100%;aspect-ratio:1;isolation:isolate;flex:none;}
#radio-grid .radio-card .radio-logo.has-photo {
  display:block; width:100%; height:100%; aspect-ratio:1; margin:0;
  border:1px solid rgba(161,117,255,.38); border-radius:14px; padding:0;
  background:#100c21; overflow:hidden;
  box-shadow:0 8px 21px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}
#radio-grid .radio-card .radio-logo.has-photo img {
  width:100%;height:100%;display:block;object-fit:contain;border-radius:inherit;
  transition:transform .25s ease;
}
#radio-grid .radio-card:hover .radio-logo.has-photo img {transform:scale(1.025);}
#radio-grid .radio-card.is-playing .radio-artwork {
  border-radius: 14px;
  box-shadow:
    0 0 0 2px #28ff70,
    0 0 11px rgba(31, 255, 103, .86),
    0 0 25px rgba(24, 255, 94, .58),
    0 0 38px rgba(14, 255, 90, .25);
  transition: box-shadow .22s ease;
}
#radio-grid .radio-card.is-playing .radio-logo.has-photo {
  border-color: #38ff7d !important;
  box-shadow: inset 0 0 0 1px rgba(138, 255, 171, .8);
}
#radio-grid .radio-card.is-playing .radio-name {
  color: #b7ffcc;
}

#radio-grid .radio-card .radio-favorite {
  position:absolute;top:8px;right:8px;left:auto;bottom:auto;z-index:4;
  display:grid;place-items:center;width:44px;height:44px;min-height:44px;
  padding:0;margin:0;
  border:1.5px solid #ff4343!important;border-radius:10px!important;
  background:rgba(15,8,25,.18)!important;
  box-shadow:0 0 8px rgba(255,45,45,.22)!important;
  color:#fff;font-size:33px;line-height:1;cursor:pointer;
  -webkit-text-stroke:.5px rgba(18,9,30,.65);
  text-shadow:0 2px 5px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.65);
  transition:color .15s ease,transform .15s ease,border-color .15s ease;
}
#radio-grid .radio-card .radio-favorite:hover {
  transform:scale(1.09);
  background:rgba(34,9,20,.33)!important;
  box-shadow:0 0 13px rgba(255,45,45,.5)!important;
}
#radio-grid .radio-card .radio-favorite[aria-pressed="true"] {
  color:#ffce36!important;border-color:#ff4343!important;
  background:rgba(15,8,25,.18)!important;
  box-shadow:0 0 9px rgba(255,45,45,.25)!important;
  -webkit-text-stroke:.4px rgba(82,48,0,.65);
  text-shadow:0 0 6px rgba(255,218,72,.8),0 0 15px rgba(255,190,35,.46);
}
#radio-grid .radio-card .radio-favorite:focus-visible {
  outline:2px solid #76d9ff;outline-offset:1px;border-radius:5px!important;
}
#radio-grid .radio-card:has(.radio-logo.has-photo) .radio-play-button {
  position:absolute!important;left:8px;bottom:8px;top:auto;right:auto;z-index:4;
  display:grid;place-items:center;width:50px;height:50px;min-height:50px!important;
  padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  color:#ff3333!important;cursor:pointer;transition:transform .15s ease;
}
#radio-grid .radio-card:has(.radio-logo.has-photo) .radio-play-button:hover {
  transform:scale(1.12);background:transparent!important;box-shadow:none!important;
}
#radio-grid .radio-card:has(.radio-logo.has-photo) .radio-play-button:disabled {
  opacity:.48;cursor:not-allowed;background:transparent!important;box-shadow:none!important;
}
#radio-grid .radio-card.is-playing:has(.radio-logo.has-photo) .radio-play-button {
  background:transparent!important;box-shadow:none!important;
}
#radio-grid .radio-card:has(.radio-logo.has-photo) .radio-play-button:focus-visible {
  outline:2px solid #76d9ff;outline-offset:1px;border-radius:5px!important;
}
#radio-grid .radio-play-symbol {
  position:relative;display:block;width:48px;height:48px;
}
#radio-grid .radio-play-symbol > span {
  position:absolute;inset:0;display:grid;place-items:center;
  font:900 43px/1 Arial,system-ui,sans-serif;
  transform-origin:50% 50%;pointer-events:none;
}
#radio-grid .radio-play-triangle {
  color:#ff3030;-webkit-text-stroke:1.6px #fff;
  text-shadow:1px 1px 0 #fff,-1px -1px 0 #fff,
    1px -1px 0 #fff,-1px 1px 0 #fff,
    0 2px 5px rgba(0,0,0,.9),0 0 12px rgba(255,36,36,.35);
}
#radio-grid .radio-play-square {
  color:#ffd234;opacity:0;visibility:hidden;
  -webkit-text-stroke:1px #482700;
  text-shadow:0 0 7px rgba(255,215,65,.95),0 0 18px rgba(255,192,31,.64);
}
#radio-grid .radio-card.is-playing .radio-play-triangle {
  opacity:0;visibility:hidden;
}
#radio-grid .radio-card.is-playing .radio-play-square {
  opacity:1;visibility:visible;
}
#radio-grid .radio-card .radio-play-button.play-just-started .radio-play-triangle {
  visibility:visible;
  animation:rbg-red-triangle-turn .46s ease-in-out both;
}
#radio-grid .radio-card .radio-play-button.play-just-started .radio-play-square {
  visibility:visible;
  animation:rbg-gold-square-appear .46s ease-in-out both;
}
@keyframes rbg-red-triangle-turn {
  0% {opacity:1;transform:rotate(0deg) scale(1);}
  58% {opacity:1;transform:rotate(90deg) scale(1.05);}
  73%,100% {opacity:0;transform:rotate(90deg) scale(.8);}
}
@keyframes rbg-gold-square-appear {
  0%,62% {opacity:0;transform:rotate(-10deg) scale(.66);}
  100% {opacity:1;transform:rotate(90deg) scale(1);}
}

#radio-grid .radio-card .radio-name {
  margin:5px 0 0;min-height:40px;max-height:40px;padding:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;color:#f7f5ff;font-weight:800;font-size:15px;line-height:1.35;
  overflow-wrap:anywhere;
}
#radio-grid .radio-card .radio-meta {
  min-height:19px;height:19px;margin:0;padding:0;max-width:100%;
  color:#afa2db;font-size:12px;line-height:19px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
#radio-grid .radio-card .radio-stream-state {
  position:absolute;top:11px;left:8px;right:55px;z-index:3;
  min-height:0;margin:0;padding:4px 6px;max-width:none;
  border-radius:6px;background:#2a1534e8;color:#ffced1;
  font-size:10px;line-height:1.25;pointer-events:none;
}
#radio-grid .radio-stream-state:empty {display:none!important;}
#radio-grid .radio-card .radio-report-form {
  position:absolute;right:8px;bottom:9px;z-index:4;margin:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,visibility .16s ease;
}
#radio-grid .radio-card:hover .radio-report-form,
#radio-grid .radio-card:focus-within .radio-report-form {
  opacity:1;visibility:visible;pointer-events:auto;
}
#radio-grid .radio-card .radio-report-button {
  display:block;width:auto;height:auto;min-height:30px;
  padding:6px 9px;margin:0;
  border:1px solid rgba(255,205,205,.23)!important;border-radius:7px!important;
  background:rgba(15,10,26,.93)!important;
  box-shadow:0 2px 7px rgba(0,0,0,.56)!important;
  color:#f6d6db!important;font:500 11px/16px system-ui,sans-serif!important;
  letter-spacing:0!important;white-space:nowrap;cursor:pointer;
}
#radio-grid .radio-card .radio-report-button:hover {
  color:#fff!important;border-color:#ff7676!important;
  background:rgba(72,18,34,.95)!important;
}
#radio-grid .radio-card .radio-report-button:focus-visible {
  outline:2px solid #76d9ff;outline-offset:1px;
}

@media (max-width:1399px) {
  #radio-grid.radio-grid {grid-template-columns:repeat(5,minmax(0,1fr))!important;}
}
@media (max-width:1199px) {
  #radio-grid.radio-grid {grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media (max-width:960px) {
  #radio-grid.radio-grid {grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media (max-width:720px) {
  #radio-grid.radio-grid {grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px 12px!important;}
}
@media (max-width:600px) {
  #radio-grid.radio-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 12px!important;}
  #radio-grid .radio-card {padding:0!important;}
  #radio-grid .radio-card .radio-name {font-size:13px;min-height:36px;max-height:36px;}
  #radio-grid .radio-card .radio-meta {font-size:11px;}
  #radio-grid .radio-card .radio-favorite {width:44px;height:44px;min-height:44px;font-size:25px;}
  #radio-grid .radio-card:has(.radio-logo.has-photo) .radio-play-button {
    width:45px;height:45px;min-height:45px!important;font-size:20px;
  }
  #radio-grid .radio-play-symbol {width:44px;height:44px;}
  #radio-grid .radio-play-symbol > span {font-size:39px;}
}
@media (prefers-reduced-motion:reduce) {
  #radio-grid .radio-card, #radio-grid .radio-logo img {transition:none!important;}
  #radio-grid .radio-card:hover .radio-logo img {transform:none!important;}
  #radio-grid .radio-card .radio-play-button.play-just-started .radio-play-triangle {
    animation:none!important;visibility:hidden!important;opacity:0!important;
  }
  #radio-grid .radio-card .radio-play-button.play-just-started .radio-play-square {
    animation:none!important;visibility:visible!important;opacity:1!important;
  }
}