/* Shared components: music bar, action dock, Yaad modal, carousel.
   Loaded by both index.html and yaadein.html. */

:root{
  --bg:#080b12; --panel:#101725; --panel-2:#141d2e; --line:#1e2a3f; --line-soft:#182335;
  --ink:#f3f6fb; --ink-2:#a9b6cc; --ink-3:#6b7a94;
  --accent:#c9962f; --accent-2:#e8bd5c; --blue:#2f7fd4; --blue-2:#7fb4ea;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------------- bottom-right action dock ---------------- */
#dock{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;gap:9px;
  align-items:stretch;width:246px}
#dock.hid{display:none}
.dock-btn{display:flex;align-items:center;gap:10px;width:100%;padding:12px 17px;border-radius:12px;
  font-family:var(--ui);font-size:13.5px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  border:1px solid var(--line);background:#0c1220e0;color:var(--ink);backdrop-filter:blur(14px);
  box-shadow:0 12px 34px #0008;transition:.22s;text-decoration:none;text-align:left}
.dock-btn:hover{transform:translateY(-2px);border-color:#3a4a6a}
.dock-btn .ic{font-size:15px;line-height:1}
.dock-btn small{display:block;font-size:10.5px;font-weight:500;color:var(--ink-3);margin-top:1px}
.dock-btn.gold{background:linear-gradient(135deg,#e0761c,#f5a623);color:#1a1004;border-color:#f7b64a;
  box-shadow:0 12px 30px #e0761c40}
.dock-btn.gold small{color:#1a1004;opacity:.75}
.dock-btn.gold:hover{filter:brightness(1.07)}
.dock-btn.music.playing .ic{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
#dockX{position:absolute;top:-9px;right:-7px;width:21px;height:21px;border-radius:50%;border:1px solid var(--line);
  background:#0c1220;color:var(--ink-3);font-size:11px;line-height:1;cursor:pointer;font-family:var(--ui)}
#dockX:hover{color:var(--ink)}

/* ---------------- music player ---------------- */
#music{position:fixed;right:20px;bottom:20px;z-index:71;width:322px;border-radius:15px;overflow:hidden;
  background:#0c1220f2;border:1px solid var(--line);backdrop-filter:blur(18px);
  box-shadow:0 22px 60px #000a;display:none;font-family:var(--ui)}
#music.on{display:block}
#music .mhd{display:flex;align-items:center;gap:10px;padding:13px 15px 11px}
#music .mhd .eq{display:flex;gap:2px;align-items:flex-end;height:15px}
#music .mhd .eq i{width:3px;background:var(--accent-2);border-radius:2px;height:5px}
#music.playing .mhd .eq i:nth-child(1){animation:eq .9s ease-in-out infinite}
#music.playing .mhd .eq i:nth-child(2){animation:eq .9s ease-in-out .2s infinite}
#music.playing .mhd .eq i:nth-child(3){animation:eq .9s ease-in-out .4s infinite}
#music.playing .mhd .eq i:nth-child(4){animation:eq .9s ease-in-out .1s infinite}
@keyframes eq{0%,100%{height:4px}50%{height:15px}}
#music .mhd b{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
#music .mhd .sp{flex:1}
#music .mhd button{background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:14px;
  font-family:var(--ui);padding:2px 5px}
#music .mhd button:hover{color:var(--ink)}
#music .tt{padding:0 15px 3px;font-size:14.5px;font-weight:700;letter-spacing:-.015em;line-height:1.3;
  color:var(--ink)}
#music .sub{padding:0 15px 12px;font-size:11.5px;color:var(--ink-3)}
#music .bar{height:2.5px;background:#ffffff12;position:relative}
#music .bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0}
#music .ctl{display:flex;align-items:center;gap:5px;padding:11px 13px}
#music .ctl button{flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:#ffffff08;color:var(--ink);cursor:pointer;font-size:13px;display:flex;align-items:center;
  justify-content:center;transition:.18s;font-family:var(--ui)}
#music .ctl button:hover{background:#ffffff14;border-color:#3a4a6a}
#music .ctl button.pp{width:40px;height:40px;background:linear-gradient(135deg,#c9962f,#e8bd5c);
  color:#0b0d12;border-color:#e8bd5c;font-size:15px}
#music .ctl .sp{flex:1}
/* prominent, unmissable route to his channel */
#music .hearmore{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:2px 13px 13px;padding:11px 14px;border-radius:9px;text-decoration:none;
  background:linear-gradient(135deg,#c0271d,#e0362a);color:#fff;font-size:12.8px;font-weight:800;
  letter-spacing:-.01em;transition:.2s;box-shadow:0 6px 18px #c0271d3d}
#music .hearmore:hover{filter:brightness(1.08);transform:translateY(-1px)}
#music .hearmore .ar{opacity:.85;font-weight:700}
#ytwrap{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px}
@media(max-width:640px){
  #music{left:10px;right:10px;width:auto;bottom:10px}
  #music .tt{font-size:14px}
  #dock{left:10px;right:10px;bottom:10px;width:auto;flex-direction:row;gap:8px}
  .dock-btn{flex:1;padding:11px 12px;font-size:12.5px;justify-content:center;text-align:center;gap:7px}
  .dock-btn small{display:none}
  #dockX{top:-10px;right:-4px}
  .mod{padding:0;align-items:flex-end}
  .mod .box{max-width:none;border-radius:18px 18px 0 0;padding:24px 20px 28px;max-height:92vh;overflow-y:auto}
  .mod h3{font-size:21px}
  .mod textarea{min-height:104px}
  #songLb{align-items:center;padding:16px}
  #songLb .cls{top:-32px}
}

/* song video lightbox */
#songLb .vbox{width:100%;max-width:920px;position:relative;margin:auto}
#songLb .vframe{width:100%;aspect-ratio:16/9;border-radius:13px;overflow:hidden;background:#000;
  box-shadow:0 30px 90px #000c}
#songLb .vframe iframe{width:100%;height:100%;border:0;display:block}
#songLb .vcap{margin-top:14px;text-align:center;font-family:var(--ui)}
#songLb .vcap b{display:block;font-size:17px;font-weight:700;color:var(--ink)}
#songLb .vcap span{display:block;margin-top:3px;font-size:13px;color:var(--ink-3)}
#songLb .cls{position:absolute;top:-38px;right:0;background:none;border:none;color:var(--ink-2);
  font-size:22px;cursor:pointer;font-family:var(--ui)}
#songLb .cls:hover{color:var(--ink)}

/* ---------------- modal (Yaad form) ---------------- */
.mod{position:fixed;inset:0;z-index:120;background:#05070ce6;backdrop-filter:blur(7px);
  display:none;align-items:center;justify-content:center;padding:22px;overflow-y:auto}
.mod.on{display:flex}
.mod .box{width:100%;max-width:560px;background:linear-gradient(168deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:18px;padding:32px;font-family:var(--ui);
  box-shadow:0 34px 100px #000b;position:relative;margin:auto}
.mod .cls{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--ink-3);
  font-size:20px;cursor:pointer;line-height:1;font-family:var(--ui)}
.mod .cls:hover{color:var(--ink)}
.mod .k{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.mod h3{margin-top:9px;font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.15}
.mod .sb{margin-top:9px;font-size:15px;color:var(--ink-2);line-height:1.55}
.mod label{display:block;margin-top:16px;margin-bottom:6px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.mod label span{font-weight:500;color:var(--ink-3)}
.mod input,.mod textarea{width:100%;background:#0a0f1a;border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-family:var(--ui);font-size:15.5px;padding:12px 14px;outline:none;transition:.18s}
.mod input:focus,.mod textarea:focus{border-color:var(--accent);background:#0c111c}
.mod textarea{min-height:128px;resize:vertical;line-height:1.6}
.mod .send{width:100%;margin-top:20px;padding:15px;border:none;border-radius:11px;cursor:pointer;
  background:linear-gradient(135deg,#e0761c,#f5a623);color:#1a1004;font-family:var(--ui);
  font-size:15.5px;font-weight:800;letter-spacing:-.01em;transition:.18s}
.mod .send:hover{filter:brightness(1.07)}
.mod .send:disabled{opacity:.55;cursor:default}
.mod .note{margin-top:13px;font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.5}
.mod .msg{margin-top:12px;text-align:center;font-size:14.5px;color:var(--accent-2);min-height:20px}
.mod .done{text-align:center;padding:26px 8px}
.mod .done .tk{font-size:44px}
.mod .done h4{margin-top:14px;font-size:22px;font-weight:800;color:var(--ink)}
.mod .done p{margin-top:10px;font-size:15px;color:var(--ink-2);line-height:1.6}

/* ---------------- yaadein carousel (home peek) ---------------- */
.ycar{position:relative;max-width:1240px;margin:0 auto}
.ytrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 20px;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.ytrack::-webkit-scrollbar{display:none}
.ycard{flex:0 0 300px;scroll-snap-align:center;border-radius:15px;overflow:hidden;position:relative;
  border:1px solid var(--line);background:var(--panel);cursor:pointer;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .45s,filter .45s,border-color .25s}
.ycard:hover{border-color:#3a4a6a}
.ycard .th{position:relative;aspect-ratio:16/10;background:#0a1018;overflow:hidden}
.ycard .th img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ycard:hover .th img{transform:scale(1.05)}
.ycard .pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ycard .pl i{width:50px;height:50px;border-radius:50%;background:#080b12b0;border:1.5px solid #ffffff40;
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:16px;color:#fff;padding-left:3px;transition:.25s}
.ycard:hover .pl i{background:var(--accent);border-color:var(--accent-2);color:#0b0d12;transform:scale(1.08)}
.ycard .meta{padding:13px 15px 15px}
.ycard .meta b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.ycard .meta span{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3)}
.ycard .kind{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 9px;border-radius:5px;background:#080b12c4;color:var(--accent-2);
  backdrop-filter:blur(6px);border:1px solid #c9962f38}
/* text tribute cards */
.ycard.txt .th{aspect-ratio:16/10;padding:20px;display:flex;align-items:center;
  background:linear-gradient(160deg,#141d2e,#0e1521)}
.ycard.txt .th p{font-size:14.5px;line-height:1.6;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* the blur-at-the-edges effect */
.ycar .fade{position:absolute;top:0;bottom:20px;width:130px;pointer-events:none;z-index:3}
.ycar .fade.l{left:0;background:linear-gradient(90deg,var(--bg) 12%,transparent)}
.ycar .fade.r{right:0;background:linear-gradient(270deg,var(--bg) 12%,transparent)}
.ycar .arw{position:absolute;top:38%;z-index:4;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:#0c1220e6;color:var(--ink);cursor:pointer;font-size:15px;
  backdrop-filter:blur(10px);transition:.2s;font-family:var(--ui)}
.ycar .arw:hover{border-color:var(--accent);color:var(--accent-2)}
.ycar .arw.l{left:-6px}
.ycar .arw.r{right:-6px}
@media(max-width:820px){
  .ycar .fade{width:52px}
  .ycar .arw{display:none}
  .ycard{flex:0 0 78vw}
}

/* view counter pill */
.views{display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-size:12px;
  font-weight:600;color:var(--ink-3);padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  background:#ffffff06}
.views i{width:6px;height:6px;border-radius:50%;background:#4ade80;font-style:normal;
  box-shadow:0 0 8px #4ade8099}