:root{
  --bg:#08080a;
  --bg-elevated:#141417;
  --text:#f4f4f6;
  --muted:#9a9aa5;
  --accent:#4a8ee0;      /* Mr Entertainer brand blue */
  --accent-bright:#6fa8ea;
  --accent-deep:#2f6fc4;
  --gold:#f5b942;        /* stage-light gold, used sparingly */
  --line:#232329;
  --radius:12px;
  --announce-h:34px;
  --nav-h:88px;
  --header-h:calc(var(--announce-h) + var(--nav-h));
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

/* ---------- Header (matches mrentertainershop.co.uk / karaokedownloads.co.uk family look) ---------- */
.announce-bar{
  position:fixed; top:0; left:0; right:0; z-index:101; height:var(--announce-h);
  background:var(--gold); color:#241a02;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800; letter-spacing:.05em; text-align:center; padding:0 16px;
}
.announce-bar span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
header.site{
  position:fixed; top:var(--announce-h); left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; height:var(--nav-h);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%),
    radial-gradient(ellipse at 50% -30%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    linear-gradient(120deg, var(--accent-deep), var(--accent) 60%, var(--accent-deep));
  background-image:
    url("assets/header-pattern.png"),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%),
    radial-gradient(ellipse at 50% -30%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    linear-gradient(120deg, var(--accent-deep), var(--accent) 60%, var(--accent-deep));
  background-repeat:repeat, no-repeat, no-repeat, no-repeat;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.header-left{display:flex; align-items:center; flex:none;}
.logo-text{
  display:flex; align-items:baseline; gap:1px; font-size:1.5rem; font-weight:400; color:#fff;
  white-space:nowrap; letter-spacing:.01em;
}
.logo-text strong{font-weight:800;}
.logo-text span{font-size:1rem; font-weight:600; color:var(--gold); margin-left:2px;}

.header-search{
  flex:1 1 auto; max-width:640px; margin:0 32px; position:relative; display:flex; align-items:center;
}
.header-search .search-icon{
  position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:1.05rem; color:rgba(20,40,80,.55); pointer-events:none;
}
.header-search input{
  width:100%; height:48px; padding:0 18px 0 46px; border-radius:999px; border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.96); color:#111; font-size:.95rem; font-weight:500;
  box-shadow:0 6px 18px rgba(0,0,0,.18); transition:box-shadow .2s, border-color .2s;
}
.header-search input::placeholder{color:#7a7a85;}
.header-search input:focus{outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.18);}

.header-right{display:flex; align-items:center; gap:14px; flex:none;}
.btn-surprise{
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.3); padding:9px 18px; border-radius:999px;
  font-weight:700; font-size:.8rem; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:background .2s, transform .15s;
}
.btn-surprise:hover{background:rgba(255,255,255,.28); transform:translateY(-1px);}
.btn-fav{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); padding:9px 14px; border-radius:999px;
  font-weight:700; font-size:.8rem; display:inline-flex; align-items:center; gap:6px;
  transition:background .2s, transform .15s, color .2s;
}
.btn-fav:hover{background:rgba(255,255,255,.24); transform:translateY(-1px);}
.btn-fav.has-favs{color:#ff5d7a; background:rgba(255,93,122,.14); border-color:rgba(255,93,122,.4);}

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--bg); overflow:hidden;
  padding-top:calc(var(--header-h) + 36px);
}
.hero::before{
  content:''; position:absolute; top:0; left:50%; width:1200px; height:600px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(74,142,224,.16) 0%, rgba(74,142,224,0) 70%);
  pointer-events:none;
}
#heroSlides{position:relative; max-width:1240px; margin:0 auto; padding:0 32px;}
.hero-slide{
  display:none; align-items:center; gap:48px;
}
.hero-slide.active{display:flex;}
.hero-content{flex:1 1 46%; min-width:0;}
.hero-eyebrow{
  color:var(--gold); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.14em;
  margin-bottom:12px;
}
.hero-title{
  font-size:clamp(1.5rem,3vw,2.3rem); font-weight:800; line-height:1.18; margin:0 0 14px;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.8rem;
  background:rgba(255,255,255,.07); border:1px solid var(--line); padding:5px 12px; border-radius:999px; margin-bottom:20px;
}
.hero-actions{display:flex; gap:12px;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 26px; border-radius:8px;
  font-weight:700; font-size:.88rem; border:none; transition:transform .15s, opacity .2s, background .2s;
}
.btn:hover{transform:translateY(-1px);}
.btn.play{background:var(--accent); color:#fff;}
.btn.play:hover{background:var(--accent-bright);}
.btn.ghost{background:rgba(130,130,140,.16); border:1px solid var(--line); color:#fff;}
.btn.ghost:hover{background:rgba(130,130,140,.28);}

.hero-art{flex:1 1 54%; min-width:0;}
.hero-art-frame{
  position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/9;
  box-shadow:0 24px 60px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.22);
}
.hero-art-frame img{width:100%; height:100%; object-fit:cover;}
.hero-art-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0); transition:background .2s; cursor:pointer;
}
.hero-art-play:hover{background:rgba(0,0,0,.2);}
.hero-art-play span{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.94); color:#0a0a0c;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition:transform .18s;
}
.hero-art-play:hover span{transform:scale(1.08);}

.hero-dots{display:flex; justify-content:center; gap:7px; padding:24px 0 8px; position:relative;}
.hero-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); border:none; padding:0; transition:background .2s, transform .2s;}
.hero-dot.active{background:var(--accent); transform:scale(1.25);}

/* ---------- SEO intro blurb (static, always in the raw HTML regardless of JS) ---------- */
.seo-intro{max-width:900px; margin:0 auto; padding:6px 32px 26px;}
.seo-intro h2{font-size:1.05rem; font-weight:800; color:var(--text); margin:0 0 8px;}
.seo-intro p{font-size:.84rem; line-height:1.65; color:var(--muted); margin:0;}

/* ---------- Rows ---------- */
main{position:relative; z-index:1; padding-bottom:80px;}
.rows{position:relative; z-index:2; margin-top:8px;}
.row{margin-bottom:30px; position:relative;}
.row-arrow{
  position:absolute; top:0; bottom:10px; width:56px; z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer;
  opacity:0; transition:opacity .2s; padding:0;
}
.row-arrow.left{left:0; background:linear-gradient(to right, var(--bg) 15%, transparent);}
.row-arrow.right{right:0; background:linear-gradient(to left, var(--bg) 15%, transparent);}
.row:hover .row-arrow{opacity:1;}
.row-arrow:hover span{transform:scale(1.15);}
.row-arrow span{
  width:38px; height:38px; border-radius:50%; background:rgba(20,20,24,.85); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:transform .15s;
}
@media (hover:none){ .row-arrow{display:none;} }
.row-head{display:flex; align-items:baseline; justify-content:space-between; padding:0 32px; margin-bottom:8px;}
.row-title{font-size:1.02rem; font-weight:700;}
.row-track{
  display:flex; gap:8px; overflow-x:auto; padding:4px 32px 10px; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.row-track::-webkit-scrollbar{display:none;}
.row-placeholder{background:linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.05), rgba(255,255,255,.02)); border-radius:8px; margin:0 32px 30px;}

.card{
  flex:none; width:220px; cursor:pointer; position:relative;
}
.card-thumb-wrap{
  position:relative; border-radius:var(--radius); overflow:hidden; background:#000;
  border:1px solid rgba(255,255,255,.2);
}
.card-thumb{
  width:100%; aspect-ratio:16/9; object-fit:cover; background:#000;
  transition:transform .25s;
}
.card:hover .card-thumb{transform:scale(1.08);}
.card:hover .card-thumb-wrap{box-shadow:0 10px 26px rgba(0,0,0,.6);}
.card-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.16); opacity:.55; transition:opacity .2s, background .2s;
}
.card:hover .card-play{opacity:1; background:rgba(0,0,0,.28);}
.card-play span{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); color:#0a0a0c;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.card-duration{
  position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,.78); color:#fff;
  font-size:.66rem; font-weight:700; padding:2px 6px; border-radius:4px;
}

/* ---------- Favourite (heart) button — appears on card thumbnails and chart list rows ---------- */
.fav-btn{
  position:absolute; top:7px; right:7px; z-index:3; width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.42); border:none; color:rgba(255,255,255,.85); font-size:.85rem;
  display:flex; align-items:center; justify-content:center; opacity:.7; line-height:1;
  transition:opacity .2s, transform .15s, background .2s, color .2s;
}
.fav-btn:hover{opacity:1; transform:scale(1.1); background:rgba(0,0,0,.6);}
.fav-btn.active{opacity:1; color:#ff5d7a; background:rgba(0,0,0,.55);}
.card:hover .fav-btn{opacity:1;}
.card-title{
  font-size:.78rem; font-weight:600; line-height:1.3; margin-top:7px; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-views{font-size:.68rem; color:var(--muted); margin-top:3px;}

/* ---------- Featured / ranked row (Trending Now) ---------- */
.row-featured{margin-bottom:40px;}
.row-featured .row-title{font-size:1.3rem;}
.row-featured .row-title::before{content:"🔥 "; }
.row-track-lg{padding-top:10px;}
.row-track-lg .card{width:280px;}
.card-rank{
  position:absolute; left:6px; bottom:6px; z-index:2; font-weight:900; font-size:2.2rem; line-height:1;
  color:#fff; -webkit-text-stroke:1.5px var(--bg); paint-order:stroke fill; text-shadow:0 2px 10px rgba(0,0,0,.7);
  font-family:'Segoe UI',system-ui,sans-serif; pointer-events:none;
}

/* ---------- Trending Now poster cards ---------- */
.row-track-poster{gap:14px;}
.poster-card{
  flex:none; width:220px; height:150px; border-radius:14px; position:relative; cursor:pointer; overflow:hidden;
  padding:14px; box-shadow:0 10px 26px rgba(0,0,0,.4); transition:transform .2s, box-shadow .2s;
  display:flex; flex-direction:column; justify-content:space-between;
}
.poster-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.55);}
.poster-rank{
  position:absolute; top:10px; left:10px; width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.32); color:#fff; font-weight:800; font-size:.9rem;
  display:flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.poster-body{margin-top:44px;}
.poster-song{
  font-size:1.02rem; font-weight:800; color:#fff; line-height:1.25; text-shadow:0 2px 8px rgba(0,0,0,.3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.poster-artist{font-size:.78rem; color:rgba(255,255,255,.85); margin-top:4px; font-weight:600;}
.poster-play{
  position:absolute; bottom:12px; right:12px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.94); color:#0a0a0c; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; opacity:.7; transform:scale(.9); transition:opacity .2s, transform .2s;
}
.poster-card:hover .poster-play{opacity:1; transform:scale(1);}

/* ---------- Surprise Me banner + Top chart lists ---------- */
.chart-surprise-wrap{padding:0 32px; margin-bottom:34px;}
.chart-list-row{display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start;}
.chart-list-row-standalone{padding:0 32px; margin-bottom:34px;}
.chart-list-col{flex:1 1 300px; min-width:0; display:flex; flex-direction:column;}
.chart-list{
  list-style:none; margin:8px 0 0; padding:0; background:var(--bg-elevated); border-radius:14px;
  border:1px solid var(--line); overflow:hidden;
}
.chart-item{
  display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .15s;
}
.chart-item:last-child{border-bottom:none;}
.chart-item:hover{background:rgba(255,255,255,.04);}
.chart-item-rank{flex:none; width:20px; text-align:center; font-weight:800; color:var(--muted); font-size:.9rem;}
.chart-item-thumb{
  flex:none; width:58px; aspect-ratio:16/9; object-fit:cover; border-radius:6px; background:#000;
  border:1px solid rgba(255,255,255,.2);
}
.chart-item-info{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.chart-item-title{font-size:.85rem; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chart-item-artist{font-size:.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chart-item-duration{flex:none; font-size:.74rem; color:var(--muted);}
.chart-item-fav{position:static; flex:none; width:26px; height:26px; background:rgba(255,255,255,.06); opacity:1;}
.chart-item-fav:hover{background:rgba(255,255,255,.14); transform:none;}
.chart-item-play{
  flex:none; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.65rem; transition:background .15s, transform .15s;
}
.chart-item:hover .chart-item-play{background:var(--accent); transform:scale(1.08);}
.chart-list-viewall{
  margin-top:14px; align-self:flex-start; background:none; border:1px solid var(--line); color:var(--text);
  padding:10px 18px; border-radius:999px; font-size:.8rem; font-weight:700; transition:border-color .2s, color .2s;
}
.chart-list-viewall:hover{border-color:var(--accent); color:var(--accent-bright);}

.surprise-panel{
  width:100%; max-width:760px; margin:0 auto 22px; position:relative; overflow:hidden; border-radius:16px;
  aspect-ratio:1586/992;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  box-shadow:0 16px 36px rgba(40,20,90,.35);
}
.surprise-btn{
  position:absolute; left:7%; top:64%; z-index:2;
  background:#fff; color:#241a4a; font-weight:800; padding:11px 22px; border-radius:999px; font-size:.85rem;
  border:none; display:inline-flex; align-items:center; gap:8px; transition:transform .15s, box-shadow .2s;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.surprise-btn:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.45);}

/* ---------- Quick picks (colour pills) ---------- */
.pill-track{
  display:flex; gap:12px; overflow-x:auto; padding:4px 32px 10px; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.pill-track::-webkit-scrollbar{display:none;}
.pill{
  flex:none; width:160px; height:64px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  text-align:center; font-weight:800; font-size:.92rem; color:#fff; cursor:pointer;
  transition:transform .18s; padding:8px; text-shadow:0 1px 4px rgba(0,0,0,.35);
}
.pill:hover{transform:translateY(-3px);}

/* ---------- Theme tiles (playlists/genres — deliberately bigger & bolder than video cards) ---------- */
.tile-track{
  display:flex; gap:18px; overflow-x:auto; padding:6px 32px 14px; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tile-track::-webkit-scrollbar{display:none;}
.tile{
  flex:none; width:340px; height:200px; border-radius:16px; overflow:hidden; position:relative; cursor:pointer;
  background-size:cover; background-position:center; transition:transform .2s, box-shadow .2s;
  border:1px solid rgba(255,255,255,.08); box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.tile:hover{transform:scale(1.035); box-shadow:0 16px 38px rgba(0,0,0,.55);}
.tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.05) 55%);
}
.tile-badge{
  position:absolute; top:12px; left:12px; z-index:1; background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
}
.tile-label{
  position:absolute; left:16px; bottom:34px; z-index:1; font-weight:800; font-size:1.25rem; color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.65); max-width:88%;
}
.tile-count{
  position:absolute; left:16px; bottom:14px; z-index:1; font-size:.76rem; color:rgba(255,255,255,.75); font-weight:600;
}

/* ---------- Search results / browse grid ---------- */
.grid-view{padding:calc(var(--header-h) + 30px) 32px 40px; display:none;}
.grid-view.active{display:block;}
.grid-view-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px;}
.grid-view h2{font-size:1.2rem; margin-bottom:4px;}
.grid-view .count{color:var(--muted); font-size:.85rem; margin:0;}
#gridBackBtn{flex:none; padding:9px 18px; font-size:.82rem;}
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px 16px;
}
.grid .card{width:100%;}
.empty-state{color:var(--muted); padding:60px 0; text-align:center;}

.rows-view.hidden, .hero.hidden{display:none;}

/* ---------- Modal player ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.open{display:flex;}
.modal{
  width:min(960px, 100%); background:var(--bg-elevated); border-radius:12px; overflow:hidden;
  border:1px solid var(--line);
}
.modal-player{position:relative; width:100%; aspect-ratio:16/9; background:#000;}
.modal-player iframe{position:absolute; inset:0; width:100%; height:100%; border:none;}
.modal-info{padding:18px 22px 22px; display:flex; justify-content:space-between; gap:20px; align-items:flex-start;}
.modal-title{font-size:1.05rem; font-weight:700; line-height:1.3;}
.modal-meta{color:var(--muted); font-size:.82rem; margin-top:6px;}
.modal-close{
  background:rgba(255,255,255,.08); border:none; color:#fff; width:34px; height:34px; border-radius:50%;
  font-size:1rem; flex:none;
}
.modal-close:hover{background:rgba(255,255,255,.18);}

/* ---------- Loading ---------- */
.loading-screen{
  position:fixed; inset:0; background:var(--bg); z-index:2000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.loading-screen.hidden{display:none;}
.spinner{
  width:36px; height:36px; border:3px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-screen p{color:var(--muted); font-size:.85rem;}

/* ---------- Facts strip ---------- */
.facts-strip{
  display:flex; flex-wrap:wrap; gap:20px 32px; justify-content:center; align-items:center;
  padding:32px 32px; border-top:1px solid var(--line); background:rgba(255,255,255,.015);
}
.fact{display:flex; align-items:center; gap:12px; flex:none;}
.fact-icon{font-size:1.6rem; flex:none;}
.fact-num{font-weight:800; font-size:.92rem; color:var(--text);}
.fact-label{font-size:.74rem; color:var(--muted); margin-top:1px;}

/* ---------- Footer ---------- */
footer{
  padding:24px 32px 60px; color:var(--muted); font-size:.78rem;
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
}
footer a:hover{color:var(--text);}
.footer-copy{line-height:1.6;}
.footer-legal{
  flex-basis:100%; padding-top:14px; margin-top:4px; border-top:1px solid var(--line);
}

/* ---------- Legal / static content pages (privacy, cookies, terms) ---------- */
.legal-page{max-width:760px; margin:0 auto; padding:calc(var(--header-h) + 44px) 32px 80px;}
.legal-back{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.85rem; margin-bottom:22px;}
.legal-back:hover{color:var(--text);}
.legal-page h1{font-size:1.7rem; font-weight:800; margin:0 0 6px;}
.legal-page .legal-updated{color:var(--muted); font-size:.8rem; margin-bottom:30px;}
.legal-page h2{font-size:1rem; font-weight:700; margin:28px 0 10px; color:var(--text);}
.legal-page p{font-size:.9rem; line-height:1.7; color:rgba(244,244,246,.85); margin:0 0 14px;}
.legal-page ul{margin:0 0 14px; padding-left:20px;}
.legal-page li{font-size:.9rem; line-height:1.7; color:rgba(244,244,246,.85); margin-bottom:6px;}
.legal-page a{color:var(--accent-bright);}
.legal-page a:hover{text-decoration:underline;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  :root{--nav-h:76px;}
  header.site{padding:0 18px;}
  .announce-bar{font-size:.64rem; padding:0 12px;}
  .header-search{margin:0 16px;}
  .logo-text{font-size:1.25rem;}
  .logo-text span{font-size:.85rem;}
  #heroSlides{padding:0 18px;}
  .hero-slide{flex-direction:column; align-items:stretch; gap:24px;}
  .hero-content{max-width:none;}
  .row-head, .row-track, .pill-track, .tile-track, .grid-view, .seo-intro{padding-left:18px; padding-right:18px;}
  .card{width:165px;}
  .tile{width:280px; height:165px;}
  .row-track-lg .card{width:220px;}
  .poster-card{width:180px; height:130px;}
  .row-arrow{display:none;}
  .chart-surprise-wrap, .chart-list-row-standalone{padding:0 18px;}
  .surprise-panel{max-width:none;}
}
@media (max-width:560px){
  /* Logo + buttons don't leave enough room for a real search bar on one line at
     phone widths — drop search to its own full-width row underneath instead of
     letting it get squeezed down to nothing. */
  :root{--nav-h:114px;}
  header.site{flex-wrap:wrap; align-content:flex-start; padding:10px 14px;}
  .header-left{order:1;}
  .header-right{order:2;}
  .header-search{order:3; flex-basis:100%; max-width:none; margin:10px 0 0;}
  .btn-surprise span.label{display:none;}
  .btn-surprise{padding:9px 12px;}
  .logo-text{font-size:1rem;}
  .logo-text span{font-size:.7rem;}
  .header-search input{height:42px; padding:0 12px 0 40px; font-size:.85rem;}
  .header-search .search-icon{left:14px; font-size:.9rem;}
  .hero{padding-top:calc(var(--header-h) + 20px);}
  .hero-title{font-size:1.4rem;}
  .card{width:138px;}
  .tile{width:240px; height:145px;}
  .tile-label{font-size:1.05rem; bottom:30px;}
  .pill{width:130px; height:54px; font-size:.8rem;}
  .modal-info{flex-direction:column;}
  .row-track-lg .card{width:180px;}
  .card-rank{font-size:1.8rem;}
  .poster-card{width:160px; height:120px; padding:11px;}
  .poster-song{font-size:.88rem;}
  .chart-surprise-wrap, .chart-list-row-standalone{padding:0 12px;}
  .chart-list-row{gap:16px;}
  .chart-item{padding:9px 12px; gap:9px;}
  .chart-item-thumb{width:46px;}
  .surprise-btn{padding:9px 16px; font-size:.78rem;}
  .grid-view-head{flex-direction:column;}
}