.player{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:clamp(12px,3vw,34px); }
.player[hidden]{ display:none; }

.player-scrim{
  position:absolute; inset:0;
  background:rgba(3,2,8,.92);
  animation:fade .25s var(--ease);
}
@keyframes fade{ from{ opacity:0 } }

.player-box{
  position:relative;
  width:min(1060px, 100%, max(340px, (78vh - 215px) * 16 / 9));
  max-height:100%;
  overflow:auto;
  background:var(--deep);
  border:1px solid var(--line);
  animation:rise .32s var(--ease);
}
@keyframes rise{ from{ opacity:0; transform:translateY(20px) scale(.985) } }

.player-x{
  position:absolute; top:10px; right:10px; z-index:12;
  width:33px; height:33px; display:grid; place-items:center;
  background:rgba(6,4,14,.85); border:1px solid var(--line);
  color:var(--mid); cursor:pointer;
  transition:color .2s, border-color .2s, background .2s, transform .2s var(--ease);
}
.player-x:hover{ color:var(--star); border-color:var(--magenta); background:var(--panel-hi); transform:rotate(90deg); }

.player-stage{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; }
.player-stage video,
.player-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.player-stage video[hidden], #ytmount[hidden]{ display:none; }
#ytmount{ position:absolute; inset:0; }

.player-hit{ position:absolute; inset:0; z-index:5; cursor:pointer; }
.player-hit.off{ display:none; }

.player-fail{
  position:absolute; inset:0; z-index:8;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-align:center; padding:26px;
  background:rgba(6,4,14,.94);
  font-size:12px; color:#ff9daa; line-height:1.9;
}
.player-fail a{
  color:var(--accent); border:1px solid var(--accent); padding:8px 14px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  transition:background .25s, color .25s;
}
.player-fail a:hover{ background:var(--accent); color:var(--void); }

.yt-card{ position:absolute; inset:0; overflow:hidden; background:#07050f; }
.yt-card-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(20px) saturate(.65) brightness(.36);
  transform:scale(1.14);
}
.yt-card-in{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:13px; text-align:center; padding:26px;
  background:radial-gradient(78% 78% at 50% 50%, rgba(6,4,14,.52), rgba(6,4,14,.9));
}
.yt-card-in strong{
  font-size:14.5px; font-weight:700; letter-spacing:-.03em;
  color:var(--star); max-width:44ch; line-height:1.35;
}
.yt-card-in p{ font-size:12.5px; color:var(--mid); line-height:1.95; max-width:52ch; }
.yt-card-in a{
  margin-top:3px;
  color:var(--accent); border:1px solid var(--accent); padding:9px 15px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  transition:background .25s, color .25s;
}
.yt-card-in a:hover{ background:var(--accent); color:var(--void); }
@media (max-width:520px){
  .yt-card-in{ gap:10px; padding:16px; }
  .yt-card-in strong{ font-size:12.5px; }
  .yt-card-in p{ font-size:11.5px; line-height:1.75; }
}

.player-spinner{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:6; }
.player-spinner[hidden]{ display:none; }
.player-spinner i{
  width:32px; height:32px;
  border:2px solid rgba(155,60,211,.22);
  border-top-color:var(--plasma);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.player-bigplay{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:72px; height:72px;
  display:grid; place-items:center;
  background:rgba(9,6,20,.72); border:1px solid rgba(155,60,211,.62);
  color:var(--star); cursor:pointer; z-index:7;
  border-radius:50%;
  transition:background .25s, border-color .25s, color .25s;
}
.player-bigplay[hidden]{ display:none; }
.player-bigplay:hover{ background:var(--accent); border-color:var(--accent); color:var(--void); }

.player-flash{
  position:absolute; top:50%; left:14%; translate:-50% -50%;
  padding:9px 14px;
  background:rgba(8,5,18,.85); border:1px solid var(--line);
  font-size:13px; font-weight:700; color:var(--star);
  opacity:0; pointer-events:none; z-index:7;
}
.player-flash.right{ left:86%; }
.player-flash.show{ animation:flash .55s var(--ease); }
@keyframes flash{ 0%{opacity:0; scale:.9} 25%{opacity:1; scale:1} 100%{opacity:0} }

.player-ui{ padding:10px 14px 12px; background:var(--deep); border-top:1px solid var(--line-soft); }
.player-ui.off{ display:none; }

.scrub{ position:relative; padding:9px 0; cursor:pointer; }
.scrub-track{ position:relative; height:4px; background:#211a42; transition:height .15s var(--ease); }
.scrub-buf{ position:absolute; inset:0 auto 0 0; width:0%; background:#342a60; }
.scrub-fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--plasma);
}
.scrub-knob{
  position:absolute; right:-6px; top:50%; translate:0 -50%;
  width:12px; height:12px; border-radius:50%;
  background:var(--accent);
  scale:0; transition:scale .18s var(--ease);
}
.scrub:hover .scrub-knob, .scrub:focus-visible .scrub-knob{ scale:1; }
.scrub:hover .scrub-track{ height:6px; }

.scrub-tip{
  position:absolute; bottom:calc(100% + 2px); left:0; translate:-50% 0;
  padding:3px 7px;
  background:var(--panel-hi); border:1px solid var(--line);
  font-size:12px; color:var(--star);
  opacity:0; pointer-events:none; white-space:nowrap;
  transition:opacity .15s;
}
.scrub:hover .scrub-tip{ opacity:1; }

.ctl-row{ display:flex; align-items:center; gap:4px; margin-top:2px; }
.ctl-spacer{ flex:1; }

.ctl{
  width:35px; height:33px;
  display:grid; place-items:center;
  background:none; border:1px solid transparent;
  color:var(--mid); cursor:pointer;
  transition:color .18s, background .18s, border-color .18s;
}
.ctl:hover{ color:var(--star); background:var(--panel); border-color:var(--line); }
.ctl-wide{ width:auto; padding:0 11px; font-size:11.5px; font-weight:700; }
.ctl-skip{ width:auto; padding:0 8px; gap:3px; grid-auto-flow:column; }
.ctl-n{ font-size:10px; font-weight:800; letter-spacing:-.02em; pointer-events:none; }
.ctl[disabled]{ opacity:.4; pointer-events:none; }

#btn-play .i-pause{ display:none; }
.player.playing #btn-play .i-play{ display:none; }
.player.playing #btn-play .i-pause{ display:block; }
#btn-mute .i-mute{ display:none; }
.player.muted #btn-mute .i-vol{ display:none; }
.player.muted #btn-mute .i-mute{ display:block; }

.vol{ display:flex; align-items:center; gap:6px; }
.vol input{
  width:70px; height:4px;
  -webkit-appearance:none; appearance:none;
  background:#211a42; cursor:pointer;
}
.vol input::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background:var(--plasma); border:0; cursor:pointer;
}
.vol input::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%;
  background:var(--plasma); border:0; cursor:pointer;
}
@media (max-width:620px){ .vol input{ display:none; } }

.tcode{ font-size:12px; color:var(--dim); padding-left:8px; white-space:nowrap; }
.tcode b{ color:var(--star); font-weight:500; }
.tcode i{ font-style:normal; margin:0 4px; color:var(--faint); }

.speed{ position:relative; }
.speed-menu{
  position:absolute; bottom:calc(100% + 7px); right:0;
  background:var(--panel); border:1px solid var(--line);
  padding:5px; min-width:86px; z-index:14;
  max-height:224px; overflow:auto;
}
.speed-menu[hidden]{ display:none; }
.speed-menu button{
  display:block; width:100%; text-align:left;
  padding:6px 9px; background:none; border:0; cursor:pointer;
  font-size:12px; color:var(--mid);
  transition:background .15s, color .15s;
}
.speed-menu button:hover{ background:var(--panel-hi); color:var(--star); }
.speed-menu button.on{ color:var(--void); background:var(--accent); font-weight:700; }

.player-meta{
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  flex-wrap:wrap;
  padding:15px 17px 19px;
  border-top:1px solid var(--line-soft);
}
.player-meta h3{ font-size:15px; font-weight:700; letter-spacing:-.03em; margin-bottom:5px; }
.player-meta p{
  font-size:12px; color:var(--dim); max-width:60ch; line-height:1.75;
  max-height:22vh; overflow-y:auto;
  scrollbar-width:thin;
}
.player-meta .player-note{
  flex:1 1 100%;
  font-size:11px; color:var(--faint); line-height:1.8;
  border-top:1px solid var(--line-soft);
  padding-top:10px; margin-top:4px;
}
.player-keys{ font-size:12px; color:var(--dim); letter-spacing:.03em; max-width:290px; line-height:2.2; }
.player-keys kbd{
  font-family:var(--mono);
  display:inline-block; padding:1px 5px; margin-right:2px;
  border:1px solid var(--line); background:var(--panel);
  font-size:11px; color:var(--mid);
}
@media (max-width:760px){ .player-keys{ display:none; } }