:root{
  --brand:#124289;
  --brand-600:#0f3a79;
  --brand-400:#2b67c5;
  --bg-image:url('https://logo.experience-radio.com/experience2025.jpg');
  /* Covers slightly smaller on desktop to make cards lighter */
  --art: 210px;
}
@media (min-width:1536px){ :root{ --art: 240px; } }
@media (max-width:1024px){ :root{ --art: 190px; } }
@media (max-width:780px){ :root{ --art: 40vw; } }
@media (max-width:480px){ :root{ --art: 38vw; } }

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#fff;line-height:1.35}
.banner{padding:10px 14px;border-bottom:1px solid #f5c2c0}
.banner.error{background:#ffebe9;color:#9a0000}

body::before{content:"";position:fixed;inset:0;background-image:var(--bg-image);background-size:cover;background-position:center;filter:blur(34px) brightness(.6);transform:scale(1.06);z-index:-2}
body::after{content:"";position:fixed;inset:0;background:linear-gradient(180deg, rgba(24,55,110,.65), rgba(8,20,60,.92));z-index:-1}

/* Header */
.site-header{display:flex;justify-content:center;align-items:center;padding:14px}
.site-logo{height:66px;max-width:95vw;width:auto}

/* Grid */
main{padding:0 1.25rem 11rem}
.grid{display:grid;gap:0.9rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
/* Desktop: 5 cards per row */
@media (min-width:1280px){ .grid{grid-template-columns:repeat(5, 1fr);} }

/* Tile */
.tile{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
/* Fixed-size cover everywhere */
.art-wrap{position:relative;width:var(--art);height:var(--art);border-radius:12px;overflow:hidden;flex:none}
.art-wrap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.round-btn{position:absolute;left:10px;bottom:10px;width:54px;height:54px;border-radius:50%;border:1px solid rgba(0,0,0,.08);cursor:pointer;display:grid;place-items:center;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.round-btn svg{width:24px;height:24px;fill:var(--brand)}
.badge-station{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.55);color:#fff;padding:.32rem .56rem;border-radius:999px;font-size:.74rem;font-weight:700}

/* Titles aligned (fixed heights) */
.title{
  margin:4px 6px 2px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  display:block;
  width:100%;
  max-width:var(--art);
  height:22px;
  display:flex;align-items:center;
}
.subtitle{
  margin:0 6px 6px;
  font-size:.9rem;
  color:#fff;
  opacity:.95;
  width:100%;
  max-width:var(--art);
  height:22px;
  display:flex;align-items:center;
}
.subtitle .scroll-wrap{max-width:100%}

/* Actions aligned */
.tile-actions{
  display:flex;gap:.45rem;align-items:center;
  margin:0 6px 6px;
  flex-wrap:wrap;
  margin-top:auto;
  width:100%;max-width:var(--art);
  justify-content:center
}
.chip{background:#fff;color:var(--brand);border-radius:999px;padding:.36rem .64rem;font-size:.76rem;border:1px solid var(--brand);cursor:pointer}
.chip:hover{background:#f4f7ff}

/* Marquee always on */
.scroll-wrap{position:relative;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%)}
.scroll-text{display:inline-block;padding-left:100%;animation:marquee 14s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* Bottom player (unchanged) */
#global-player{position:fixed;left:0;right:0;bottom:0;padding:12px 16px;background:rgba(0,0,0,.82);border-top:2px solid var(--brand-400);
  display:grid;grid-template-columns:minmax(0,2.8fr) auto minmax(0,1fr);gap:16px;align-items:center;backdrop-filter:blur(6px)}
@media (min-width:1600px){ #global-player{grid-template-columns:minmax(0,3.2fr) auto minmax(0,1fr);} }
#left{display:flex;align-items:center;gap:14px;min-width:0}
#gp-cover{width:120px;height:120px;border-radius:12px;object-fit:cover}
#gp-meta{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%}
#gp-meta .station{text-transform:uppercase;font-weight:800;letter-spacing:.4px;color:#fff}
#gp-meta .title{color:#fff;opacity:1}
#center{display:flex;justify-content:center}
.btn-round{width:68px;height:68px;border-radius:50%;border:1px solid rgba(0,0,0,.08);display:grid;place-items:center;cursor:pointer;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.btn-round svg{width:34px;height:34px;fill:var(--brand)}
#right{display:flex;justify-content:flex-end;align-items:center;gap:10px}
#vol{-webkit-appearance:none;appearance:none;width:200px;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--brand-400),#9dbaf0)}
#vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--brand);box-shadow:0 2px 6px rgba(0,0,0,.2)}
#vol::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--brand)}

/* Modal (unchanged) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:50}
.modal.active{display:flex}
.panel{background:#fff;color:#0d1b2a;border:1px solid #e7ecf3;border-radius:12px;width:min(980px,96%);max-height:80vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.panel header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #eef2f7}
.panel h3{margin:0;font-size:1rem}
.badge{background:var(--brand);color:#fff;border-radius:10px;padding:.45rem .8rem;font-weight:800;display:inline-block;letter-spacing:.2px}
.close{background:transparent;border:none;color:#1b2430;font-size:22px;cursor:pointer}
.list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:16px}
.item{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;background:#fff;border:1px solid #edf1f7;border-radius:12px;padding:10px;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.item img{width:64px;height:64px;border-radius:8px;object-fit:cover}
.when{background:var(--brand);color:#fff;border-radius:6px;padding:4px 8px;font-size:.72rem;display:inline-block;margin-bottom:4px}
.artist{font-weight:900;color:#0b1f3a}
.titleItem{opacity:.9;font-size:.92rem;color:#1e2a3a}

/* Responsive */
@media (max-width:1024px){
  #gp-cover{width:100px;height:100px}
  #vol{width:160px}
}
@media (max-width:780px){
  .site-logo{height:60px}
  main{padding:0 .8rem 10rem}
  #global-player{grid-template-columns:1fr auto;grid-template-areas:
    "left center"
    "right right";row-gap:10px}
  #left{grid-area:left}
  #center{grid-area:center}
  #right{grid-area:right;justify-content:center}
  #gp-cover{width:90px;height:90px}
  #vol{width:130px}
}
@media (max-width:480px){
  .site-logo{height:50px}
  #gp-cover{width:78px;height:78px}
  #vol{width:110px}
  .badge-station{font-size:.68rem}
  .chip{font-size:.7rem;padding:.32rem .56rem}
  .btn-round{width:56px;height:56px}
  .btn-round svg{width:26px;height:26px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}