/* Karaoke.chat — reproductor (spec §18). Controles operables por D-pad. */
#player{
  position:fixed; inset:0; z-index:70; background:#000;
  display:flex; align-items:center; justify-content:center;
}
#player video{ width:100%; height:100%; object-fit:contain; background:#000; }

.k-player__chrome{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:var(--k-safe);
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 26%,
                                    rgba(0,0,0,0) 58%,rgba(0,0,0,.86) 100%);
  transition:opacity 240ms var(--k-ease);
}
body.player-idle .k-player__chrome{ opacity:0; pointer-events:none; }

.k-player__top{ display:flex; align-items:flex-start; gap:var(--k-s4); }
.k-player__info{ flex:1 1 auto; min-width:0; }
.k-player__title{ font-size:var(--k-fs-h1); font-weight:900; letter-spacing:-.02em;
  margin:0; text-shadow:0 2px 18px rgba(0,0,0,.9); }
.k-player__artist{ color:var(--k-text-2); font-size:var(--k-fs-h2); margin:2px 0 0;
  text-shadow:0 2px 12px rgba(0,0,0,.9); }
.k-player__next{ font-size:var(--k-fs-meta); color:var(--k-accent-2);
  margin-top:var(--k-s2); font-weight:700; }

.k-player__bottom{ display:flex; flex-direction:column; gap:var(--k-s3); }

.k-scrub{
  position:relative; height:var(--k-tap); display:flex; align-items:center;
  border-radius:var(--k-radius-pill); padding:0 var(--k-s3);
  cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none;
}
.k-scrub__track{ position:relative; flex:1 1 auto; height:8px; border-radius:99px;
  background:rgba(255,255,255,.22); overflow:hidden; }
body.tv .k-scrub__track{ height:12px; }
.k-scrub__fill{ position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--k-accent); border-radius:99px; }
.k-scrub__buf{ position:absolute; inset:0 auto 0 0; width:0%;
  background:rgba(255,255,255,.28); }
.k-scrub__knob{
  position:absolute; top:50%; left:0; width:20px; height:20px; margin-left:-10px;
  border-radius:50%; background:#fff; transform:translateY(-50%) scale(.8);
  box-shadow:0 2px 10px rgba(0,0,0,.6); transition:transform var(--k-dur) var(--k-ease);
}
body.tv .k-scrub__knob{ width:28px; height:28px; margin-left:-14px; }
.k-scrub.is-focused .k-scrub__knob{ transform:translateY(-50%) scale(1.25); }
.k-scrub.is-focused .k-scrub__fill{ background:var(--k-accent-2); }

.k-player__times{ display:flex; justify-content:space-between;
  font-variant-numeric:tabular-nums; color:var(--k-text-2);
  font-size:var(--k-fs-meta); padding:0 var(--k-s3); }

.k-player__controls{ display:flex; align-items:center; justify-content:center;
  gap:var(--k-s3); flex-wrap:wrap; }
.k-pbtn{
  display:grid; place-items:center; min-width:var(--k-tap); height:var(--k-tap);
  padding:0 var(--k-s4); border-radius:var(--k-radius-pill);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  font-weight:700; backdrop-filter:none;
}
.k-pbtn--main{ min-width:calc(var(--k-tap) * 1.5); background:rgba(255,255,255,.2); }
.k-pbtn.is-focused{ background:var(--k-accent-2); color:#04120f; border-color:transparent; }

.k-player__hint{
  position:absolute; left:50%; bottom:var(--k-safe); transform:translateX(-50%);
  z-index:3; font-size:var(--k-fs-meta); color:var(--k-text-2);
  background:rgba(0,0,0,.6); padding:var(--k-s2) var(--k-s4);
  border-radius:var(--k-radius-pill); opacity:0; transition:opacity 240ms;
  /* Está por encima del chrome y justo sobre los botones centrales («Cola»):
     con opacity:0 seguía capturando clics y toques. Ningún overlay
     informativo del reproductor debe recibir puntero. */
  pointer-events:none;
}
/* Regla general: solo el chrome y el panel de cola reciben puntero. */
.k-player__hint, .k-player__seekhint, .k-player__seek, .k-player__spinner{ pointer-events:none; }
body.player-idle .k-player__hint{ opacity:1; }

/* «◀ ▶ adelantar»: solo la primera vez en TV, encima de los controles. */
.k-player__seekhint{
  position:absolute; left:50%; bottom:calc(var(--k-safe) + var(--k-tap) * 2.6);
  transform:translateX(-50%); z-index:3; font-size:var(--k-fs-h2); font-weight:800;
  color:#fff; background:rgba(0,0,0,.66); border:1px solid rgba(255,255,255,.28);
  padding:var(--k-s2) var(--k-s5); border-radius:var(--k-radius-pill);
  box-shadow:0 0 24px var(--k-accent-glow, rgba(0,229,255,.35));
  animation:k-seekhint-in 320ms var(--k-ease);
  pointer-events:none;
}
@keyframes k-seekhint-in{ from{ opacity:0; transform:translate(-50%,12px); } to{ opacity:1; transform:translate(-50%,0); } }

/* Tiempo destino tras un seek (2 s): grande, centrado, legible a 4 m. */
.k-player__seek{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:var(--k-s1);
  padding:var(--k-s3) var(--k-s5); border-radius:var(--k-radius-lg);
  background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.22);
  font-variant-numeric:tabular-nums; pointer-events:none;
  animation:k-seek-in 160ms var(--k-ease);
}
.k-player__seek-delta{ font-size:var(--k-fs-h2); font-weight:800; color:var(--k-accent-2); }
.k-player__seek-time{ font-size:var(--k-fs-h1); font-weight:900; color:#fff; letter-spacing:-.02em; }
@keyframes k-seek-in{ from{ opacity:0; transform:translate(-50%,-50%) scale(.92); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
#player.is-seeking .k-player__spinner{ visibility:hidden; }   /* «Cargando…» no pisa el badge */
@media (prefers-reduced-motion: reduce){
  .k-player__seek, .k-player__seekhint{ animation:none; }
}

.k-player__spinner{
  position:absolute; inset:0; z-index:4; display:grid; place-items:center;
  color:var(--k-text-2); font-size:var(--k-fs-h2); pointer-events:none;
}

/* Cola dentro del player */
.k-player__queue{
  position:absolute; right:var(--k-safe); top:calc(var(--k-safe) + 90px);
  bottom:calc(var(--k-safe) + 160px); width:min(420px,32vw); z-index:3;
  background:rgba(14,14,22,.92); border:1px solid var(--k-line);
  border-radius:var(--k-radius-lg); padding:var(--k-s4);
  overflow-y:auto; display:flex; flex-direction:column; gap:var(--k-s2);
}
@media (max-width:600px){
  .k-player__queue{ left:var(--k-safe); right:var(--k-safe); width:auto; }
  .k-player__title{ font-size:var(--k-fs-h2); }
  .k-player__artist{ font-size:var(--k-fs-body); }
}

/* ================= INTRO «Prepárate para cantar» =================
   Capa sobre el vídeo (que ya carga detrás). Solo opacity/transform. */
.k-intro{
  position:absolute; inset:0; z-index:6; display:grid; place-items:center;
  overflow:hidden; background:var(--k-bg); cursor:pointer; outline:none;
  animation:k-fade-in 240ms var(--k-ease);
}
.k-intro__bg{ position:absolute; inset:0; z-index:0; background:var(--k-bg-2); }
.k-intro__bg img{ width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity 500ms var(--k-ease); transform:scale(1.04); }
.k-intro__bg img.is-loaded{ opacity:.55; }
.k-intro__bg--blur img{ filter:blur(8px); }   /* solo carátulas sin hero propio (el hero ya viene desenfocado) */
.k-intro__bg::after{ content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse at center, rgba(7,7,11,.35) 0%, rgba(7,7,11,.85) 75%, #07070b 100%); }
.k-intro__body{ position:relative; z-index:2; text-align:center; padding:var(--k-safe);
  max-width:min(1400px, 92vw); display:flex; flex-direction:column; align-items:center; gap:var(--k-s3); }
.k-intro__eyebrow{ margin:0; font-size:var(--k-fs-h2); font-weight:700; color:var(--k-accent-2);
  letter-spacing:.08em; text-transform:uppercase; }
.k-intro__title{ margin:0; font-size:var(--k-fs-display); font-weight:900; letter-spacing:-.02em;
  line-height:1.1; text-shadow:0 2px 24px rgba(0,0,0,.9); }
.k-intro__artist{ margin:0; font-size:var(--k-fs-h1); font-weight:600; color:var(--k-text-2); }
/* Letra de karaoke: cada palabra entra (opacity/transform, nada más) y el
   glow es un ::after fijo que se desvanece: sin animar color ni text-shadow,
   que obligan a repintar en cada frame en una TV. */
.k-intro__w{ position:relative; display:inline-block; opacity:0; transform:translateY(.35em);
  animation:k-word-in 420ms var(--k-ease) forwards; }
.k-intro__w::after{ content:attr(data-w); position:absolute; inset:0; color:var(--k-accent);
  text-shadow:0 0 22px rgba(255,45,120,.9); opacity:0; animation:k-word-glow 900ms var(--k-ease) forwards;
  animation-delay:inherit; pointer-events:none; }
@keyframes k-word-in{ from{ opacity:0; transform:translateY(.35em); } to{ opacity:1; transform:translateY(0); } }
@keyframes k-word-glow{ 0%{ opacity:0; } 30%{ opacity:1; } 100%{ opacity:0; } }
.k-intro__count{ height:calc(var(--k-fs-display) * 2.2); display:grid; place-items:center; margin-top:var(--k-s3); }
.k-intro__digit{ font-size:calc(var(--k-fs-display) * 2); font-weight:900; line-height:1;
  color:#fff; text-shadow:0 0 30px rgba(33,230,193,.75), 0 0 60px rgba(124,77,255,.55);
  font-variant-numeric:tabular-nums; opacity:0; }
.k-intro__digit.is-in{ animation:k-digit 900ms var(--k-ease) forwards; }
@keyframes k-digit{
  0%{ opacity:0; transform:scale(1.8); } 18%{ opacity:1; transform:scale(1); }
  86%{ opacity:1; transform:scale(1); } 100%{ opacity:.25; transform:scale(.88); }
}
.k-intro__mic{ display:flex; align-items:flex-end; gap:var(--k-s3); opacity:.9; }
.k-intro__micico{ font-size:var(--k-fs-h1); line-height:1; }
.k-intro__waves{ display:flex; align-items:flex-end; gap:6px; height:calc(var(--k-fs-h1) * 1.1); }
.k-intro__waves i{ display:block; width:6px; height:14px; border-radius:99px; background:var(--k-accent-2);
  transform-origin:bottom; animation:k-wave 900ms ease-in-out infinite; }
.k-intro__waves i:nth-child(2){ animation-delay:120ms; } .k-intro__waves i:nth-child(3){ animation-delay:240ms; }
.k-intro__waves i:nth-child(4){ animation-delay:360ms; } .k-intro__waves i:nth-child(5){ animation-delay:480ms; }
.k-intro__hint{ margin:var(--k-s4) 0 0; font-size:var(--k-fs-meta); color:var(--k-text-3);
  background:rgba(0,0,0,.45); padding:var(--k-s2) var(--k-s4); border-radius:var(--k-radius-pill);
  border:1px solid rgba(255,255,255,.14); }
.k-intro.is-focused .k-intro__hint{ color:var(--k-text); border-color:var(--k-accent-2);
  box-shadow:0 0 0 3px rgba(33,230,193,.25); }
@keyframes k-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@media (max-width:600px){
  .k-intro__digit{ font-size:calc(var(--k-fs-display) * 1.6); }
  .k-intro__count{ height:calc(var(--k-fs-display) * 1.8); }
}

/* ================= RESULTADO / PUNTAJE ================= */
.k-result{
  position:absolute; inset:0; z-index:6; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(ellipse at center, rgba(30,30,43,.92) 0%, rgba(7,7,11,.96) 70%, #07070b 100%);
  animation:k-fade-in 240ms var(--k-ease);
}
.k-result__body{ position:relative; z-index:2; text-align:center; padding:var(--k-safe);
  display:flex; flex-direction:column; align-items:center; gap:var(--k-s2); max-width:min(1200px, 94vw); }
.k-result__eyebrow{ margin:0; font-size:var(--k-fs-h2); color:var(--k-text-2); }
.k-result__score{ display:flex; align-items:baseline; gap:var(--k-s2); line-height:1; }
.k-result__num{ font-size:calc(var(--k-fs-display) * 2.4); font-weight:900; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:#fff;
  text-shadow:0 0 28px rgba(33,230,193,.7), 0 0 70px rgba(255,45,120,.45); }
.k-result.is-counted .k-result__num{ animation:k-score-pop 480ms var(--k-ease); }
@keyframes k-score-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
.k-result__pts{ font-size:var(--k-fs-h1); font-weight:700; color:var(--k-accent-2); }
.k-result__msg{ margin:0; font-size:var(--k-fs-h1); font-weight:900; color:var(--k-warn);
  text-shadow:0 0 20px rgba(255,176,32,.45); }
.k-result__mode{ margin:0; font-size:var(--k-fs-meta); color:var(--k-text-3); text-transform:uppercase; letter-spacing:.1em; }
.k-result__next{ margin-top:var(--k-s4); width:min(720px, 90vw); display:flex; flex-direction:column; gap:var(--k-s2); }
.k-result__nextlabel{ margin:0; font-size:var(--k-fs-body); color:var(--k-text-2); }
.k-result__nextlabel strong{ color:var(--k-text); }
.k-result__bar{ height:8px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden; }
.k-result__bar i{ display:block; height:100%; width:100%; background:var(--k-accent-2);
  transform-origin:left; transform:scaleX(1); transition:transform 5000ms linear; }
.k-result__bar i.is-running{ transform:scaleX(0); }
.k-result__actions{ display:flex; gap:var(--k-s3); flex-wrap:wrap; justify-content:center; margin-top:var(--k-s4); }
/* Destello inicial y confeti: solo opacity/transform, se apagan solos. */
.k-result__flash{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at center, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 60%);
  animation:k-flash 900ms var(--k-ease) forwards; }
@keyframes k-flash{ 0%{ opacity:0; transform:scale(.6); } 30%{ opacity:1; } 100%{ opacity:0; transform:scale(1.4); } }
.k-result__confetti{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.k-result__confetti i{ position:absolute; top:-4vh; width:10px; height:18px; border-radius:2px; opacity:0;
  animation:k-confetti 2400ms linear forwards; }
@keyframes k-confetti{
  0%{ opacity:0; transform:translate3d(0,0,0) rotate(0deg); }
  10%{ opacity:1; }
  100%{ opacity:0; transform:translate3d(0,110vh,0) rotate(540deg); }
}
body.tv .k-result__confetti i{ width:14px; height:26px; }
@media (max-width:600px){
  .k-result__num{ font-size:calc(var(--k-fs-display) * 2); }
  .k-result__msg{ font-size:var(--k-fs-h2); }
}
@media (prefers-reduced-motion: reduce){
  .k-intro, .k-result, .k-result__flash, .k-result__confetti i, .k-intro__digit.is-in, .k-intro__w{ animation:none; opacity:1; transform:none; }
  .k-intro__w::after{ animation:none; opacity:0; }
  .k-result__bar i{ transition:none; }
}