/* ════════════════════════════════════════════════════════════════
   Next Up panel — mobile-first (90% traffic mobile hai, isliye
   mobile ko full bottom-sheet treatment, desktop ko halka corner card)
   ════════════════════════════════════════════════════════════════ */

.tb-nu-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .25s ease;
  z-index:9998;
}
.tb-nu-backdrop.show{opacity:1;visibility:visible}

.tb-nu-sheet{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--bg2);border-top:1px solid var(--border2);
  border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.18);
  padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);
  z-index:9999;max-height:78vh;overflow-y:auto;
}
.tb-nu-sheet.show{transform:translateY(0)}

.tb-nu-handle{
  width:36px;height:4px;border-radius:99px;background:var(--border2);
  margin:0 auto 12px;
}

.tb-nu-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.tb-nu-title{font-size:16px;font-weight:800;color:var(--text);margin:0 0 2px;letter-spacing:-.2px}
.tb-nu-sub{font-size:12.5px;color:var(--orange,#f59e0b);font-weight:600;margin:0}
.tb-nu-close{
  background:var(--bg3);border:1px solid var(--border2);color:var(--text3);
  width:30px;height:30px;border-radius:50%;font-size:14px;cursor:pointer;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
}

.tb-nu-cards{
  display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px;
}
.tb-nu-cards::-webkit-scrollbar{display:none}

.tb-nu-card{
  flex:0 0 78%;scroll-snap-align:start;
  background:var(--bg3);border:1px solid var(--border2);border-radius:16px;
  padding:16px;text-decoration:none;position:relative;
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .15s,transform .15s;
}
.tb-nu-card:active{transform:scale(.97)}

.tb-nu-badge{
  position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:99px;background:var(--green-bg);color:var(--green);
}
.tb-nu-icon{font-size:30px;line-height:1}
.tb-nu-name{font-size:14.5px;font-weight:700;color:var(--text);margin:0}
.tb-nu-plays{font-size:11.5px;color:var(--text3);margin:0}
.tb-nu-cta{font-size:12.5px;font-weight:700;color:var(--purple);margin-top:4px}

/* ── Desktop: lighter corner-card instead of a full takeover ───── */
@media (min-width:768px){
  .tb-nu-backdrop{display:none}

  .tb-nu-sheet{
    left:auto;right:24px;bottom:24px;
    width:380px;max-height:none;
    border-radius:16px;border:1px solid var(--border2);
    box-shadow:var(--shadow2,0 10px 30px rgba(0,0,0,.15));
    transform:translateY(20px) scale(.96);opacity:0;
    transition:transform .28s ease,opacity .28s ease;
    visibility:hidden;
  }
  .tb-nu-sheet.show{transform:translateY(0) scale(1);opacity:1;visibility:visible}
  .tb-nu-handle{display:none}

  .tb-nu-cards{overflow-x:visible;flex-wrap:wrap;scroll-snap-type:none}
  .tb-nu-card{flex:1 1 100%}
}