/* ===== FMSangi Public — Ultra-Premium Unified Layer =====
   Loaded last. ONE design model for mobile + desktop (scaled, not rearranged).
   Upgrades buttons, player, CTA, cards to crisp HD glass + glow. */

/* ---------- Unified Button System ---------- */
.btn,.btn-glow,.btn-live,.btn-outline2{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;letter-spacing:.2px;line-height:1;border:0;cursor:pointer;
  padding:14px 30px;border-radius:50px;font-size:1rem;transition:transform .16s,box-shadow .22s,filter .2s;
}
.btn{background:#fff;color:#14081a}
.btn-live{background:linear-gradient(135deg,#E63971,#FF6FB5);color:#fff;box-shadow:0 8px 26px rgba(230,57,113,.45)}
.btn-glow{background:linear-gradient(135deg,#FF8FC7,#E63971 45%,#A64BF2);color:#fff;
  padding:16px 38px;font-size:1.08rem;box-shadow:0 12px 38px rgba(230,57,113,.5)}
.btn-outline2{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(6px)}
.btn:hover,.btn-glow:hover,.btn-live:hover{transform:translateY(-3px);filter:brightness(1.05)}
.btn-glow:hover{box-shadow:0 18px 50px rgba(255,111,181,.65)}
.btn-outline2:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
.btn:active,.btn-glow:active{transform:translateY(-1px) scale(.99)}

/* ---------- Hero buttons ---------- */
.hero3 .actions,.ctabanner .actions{display:flex;gap:16px;flex-wrap:wrap}
.hero3 .btn-glow{font-size:1.12rem;padding:18px 42px}
.hero3 .btn-outline2{font-size:1.06rem;padding:17px 38px}

/* ---------- Play button (player) ---------- */
.playbtn{
  width:54px;height:54px;border-radius:50%;border:0;
  background:linear-gradient(135deg,#FF8FC7,#E63971 50%,#A64BF2);color:#fff;cursor:pointer;
  display:grid;place-items:center;flex-shrink:0;position:relative;overflow:hidden;
  box-shadow:0 0 0 4px rgba(230,57,113,.16),0 8px 26px rgba(230,57,113,.5);transition:.25s;
}
.playbtn:hover{transform:scale(1.07);box-shadow:0 0 0 6px rgba(230,57,113,.2),0 12px 32px rgba(255,111,181,.6)}
.playbtn.playing{animation:playpulse 1.8s infinite}
@keyframes playpulse{0%{box-shadow:0 0 0 4px rgba(230,57,113,.25),0 8px 26px rgba(230,57,113,.5)}
  70%{box-shadow:0 0 0 14px rgba(230,57,113,0),0 8px 26px rgba(230,57,113,.5)}
  100%{box-shadow:0 0 0 4px rgba(230,57,113,0),0 8px 26px rgba(230,57,113,.5)}}
.playbtn .play-ico{font-size:1.2rem;line-height:1;z-index:2}
.playbtn .eq-mini{display:none;gap:3px;align-items:flex-end;height:20px;z-index:2}
.playbtn .eq-mini i{width:3px;background:#fff;border-radius:2px;animation:eqb .8s infinite ease-in-out}
.playbtn .eq-mini i:nth-child(2){animation-delay:.2s}.playbtn .eq-mini i:nth-child(3){animation-delay:.4s}.playbtn .eq-mini i:nth-child(4){animation-delay:.1s}
.playbtn.playing .play-ico{display:none}.playbtn.playing .eq-mini{display:inline-flex}

/* ---------- Player bar (glass + glow) ---------- */
.player{
  backdrop-filter:blur(18px);background:rgba(20,8,20,.82);
  border-top:1px solid rgba(255,111,181,.22);box-shadow:0 -12px 44px rgba(0,0,0,.5);
  padding:12px 18px;display:flex;align-items:center;gap:14px;
}
.player .now{font-weight:800;font-size:1.02rem;letter-spacing:-.2px}
.player .now small{display:block;font-weight:500;font-size:.78rem;color:#c9a3bd;margin-top:2px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#FF6FB5;box-shadow:0 0 10px #FF6FB5;flex-shrink:0}
.live-dot.on{animation:pulse 1.3s infinite}
.viz{width:200px;height:44px;border-radius:10px;background:rgba(255,255,255,.04);cursor:pointer;flex:0 0 auto;border:1px solid rgba(255,111,181,.12)}
.np-title{font-weight:800;font-size:1rem;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.np-status{font-size:.72rem;color:#FF6FB5;font-weight:700;letter-spacing:.5px;min-height:14px;margin-top:1px}
@media(max-width:600px){.np-title{max-width:48vw}.viz{width:84px;height:34px}}

/* ---------- CTA banner ---------- */
.ctabanner{position:relative;overflow:hidden;border-radius:24px;padding:54px 34px;text-align:center;margin:44px 0;
  background:linear-gradient(135deg,#E63971,#A64BF2);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 70px rgba(166,75,242,.32)}
.ctabanner:before{content:"";position:absolute;top:0;left:-60%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);animation:shimmer 4.5s infinite}
.ctabanner h2{color:#fff;font-size:2.2rem;margin:0 0 12px;text-shadow:0 2px 16px rgba(0,0,0,.25)}
.ctabanner p{color:#ffffffea;margin:0 0 24px;font-size:1.05rem}
.ctabanner .btn-white{background:#fff;color:#A64BF2;font-size:1.05rem;padding:16px 40px;box-shadow:0 12px 34px rgba(0,0,0,.3)}
.ctabanner .btn-white:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.4)}

/* ---------- Section headings ---------- */
.sechead{display:flex;justify-content:space-between;align-items:baseline;margin:46px 0 22px;flex-wrap:wrap;gap:8px}
.sechead h2{position:relative;padding-left:18px;font-size:1.8rem;font-weight:800;letter-spacing:-.5px}
.sechead h2:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:6px;border-radius:6px;
  background:linear-gradient(180deg,#FF8FC7,#E63971,#A64BF2);box-shadow:0 0 14px rgba(230,57,113,.6)}
.sechead h2:after{content:"";position:absolute;left:18px;right:0;bottom:-10px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,111,181,.6),transparent)}
.sechead a{color:#FF8FC7;font-weight:600;font-size:.95rem}

/* ---------- Cards (subtle glow upgrade) ---------- */
.showcard,.nowcard,.hostcard,.newscard,.epitem,.statstrip .s{
  box-shadow:0 14px 40px rgba(0,0,0,.35);border:1px solid rgba(255,111,181,.14);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.showcard:hover,.nowcard:hover,.hostcard:hover,.newscard:hover{transform:translateY(-8px);border-color:rgba(255,111,181,.45);box-shadow:0 24px 60px rgba(230,57,113,.35)}
.epitem:hover{transform:translateX(6px);border-color:rgba(255,111,181,.4)}

/* ---------- ONE responsive model: desktop scales down, never rearranges ---------- */
@media(max-width:1100px){
  .hero3 h1{font-size:3.2rem}
  .ctabanner h2{font-size:1.9rem}
  .sechead h2{font-size:1.5rem}
}
@media(max-width:820px){
  .hero3 h1{font-size:2.6rem}
  .ctabanner{padding:44px 22px;border-radius:20px}
  .ctabanner h2{font-size:1.6rem}
  .sechead h2{font-size:1.3rem}
  .player{padding:10px 14px;gap:10px}
  .viz{width:120px;height:38px}
  .player .now{font-size:.92rem}
}
@media(max-width:560px){
  .hero3 h1{font-size:2.1rem}
  .hero3 .btn-glow,.hero3 .btn-outline2{flex:1 1 100%}
  .ctabanner h2{font-size:1.4rem}
  .viz{width:84px;height:34px}
  .playbtn{width:48px;height:48px}
  .player .now small{display:none}
  .btn,.btn-glow,.btn-live,.btn-outline2{padding:13px 24px;font-size:.95rem}
}