/* SeriesAntiguas TV — v10 */
:root{
  --bg:#05060a;
  --card:rgba(8,10,16,.72);
  --stroke:rgba(255,255,255,.08);
  --text:#eef1ff;
  --muted:rgba(238,241,255,.75);
  --shadow: 0 20px 90px rgba(0,0,0,.65);
  --radius: 18px;

  --btnBg: rgba(20,22,33,.66);
  --btnBgHover: rgba(30,34,52,.82);
  --btnStroke: rgba(255,255,255,.14);

  --fadeMs: 680ms; /* longer fade to feel smoother */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: var(--bg-url) no-repeat center center fixed, var(--bg);
  background-size: cover;
  color:var(--text);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.42));
  pointer-events:none;
}

.stage{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px 16px 28px;
  position:relative;
  z-index:1;
}

.playerCard{
  width: min(1080px, 100%); /* slightly smaller than before */
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(75px);
  padding: 14px;
}

.playerFrame{
  position:relative;
  width:100%;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(255,255,255,.10);
  outline:none;
}

/* Dual layers */
.playerLayer{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity var(--fadeMs) ease;
}
.playerLayer.isActive{ opacity:1; }

#playerA, #playerB,
#playerA iframe, #playerB iframe{
  width:100% !important;
  height:100% !important;
  border:0 !important;
}

/* Shield */
.shield{
  position:absolute; inset:0;
  z-index:10;
  background: transparent;
  touch-action: manipulation;
}

/* Curtain + spinner */
.curtain{
  position:absolute; inset:0;
  z-index:11;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.94);
  backdrop-filter: blur(75px);
  opacity:0;
  pointer-events:none;
  transition: opacity 240ms ease;
}
.curtain.show{ opacity:1; }
.curtainInner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  transform: translateY(2px);
}
.curtainSpinner{
  width:34px;height:34px;
  border-radius:50%;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.85);
  animation: spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.curtainLogo{
  width:min(360px, 62vw);
  height:auto;
  opacity:.96;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.6));
}

/* Pause overlay */
.pauseOverlay{
  position:absolute; inset:0;
  z-index:13;
  background: rgba(0,0,0,.94);
  backdrop-filter: blur(85px) saturate(1.6);
  display:none;
  align-items:center;
  justify-content:center;
}
.pauseOverlay.show{ display:flex; }
.pauseCenter{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.pauseLogo{
  width:min(320px, 56vw);
  height:auto;
  opacity:.95;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.6));
}
.pauseTag{
  font-weight:900;
  letter-spacing:1.2px;
  font-size:13px;
  padding:10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

/* Live badge */
.liveBadge{
  position:absolute;
  left:14px;
  top:14px;
  z-index:14;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  pointer-events:none;
}
.liveDot{
  width:8px;height:8px;border-radius:50%;
  background:#ff2d55;
  box-shadow: 0 0 0 0 rgba(255,45,85,.6);
  animation: ping 1.4s infinite;
}
@keyframes ping{
  0%{ box-shadow: 0 0 0 0 rgba(255,45,85,.55) }
  70%{ box-shadow: 0 0 0 10px rgba(255,45,85,0) }
  100%{ box-shadow: 0 0 0 0 rgba(255,45,85,0) }
}
.liveText{ font-weight:850; letter-spacing:.6px; font-size:12px; }

/* Corner logo */
.cornerLogo{
  position:absolute;
  right:14px;
  top:14px;
  height:26px;
  width:auto;
  opacity:.92;
  z-index:14;
  pointer-events:none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}

/* Controls */
.hud{
  position:absolute; inset:0;
  z-index:15;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  opacity:1;
  pointer-events:none;
}
.hudBottom{
  display:flex; align-items:center; gap:10px;
  padding:14px;
  background: linear-gradient(to top, rgba(0,0,0,.70), transparent 70%);
  pointer-events:none;
  flex-wrap: wrap; /* responsive: avoid overlapping controls */
  row-gap: 10px;
  position:relative; /* allow mobile reaction overlay without layout shifts */
}
.spacer{flex:1}

.hudRight{
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:none; /* keep default, children re-enable */
  position:relative;
  overflow:hidden; /* allow reactions to slide out without shifting buttons */
}

.hudRight > *{ pointer-events:auto; }

.iconBtn{
  pointer-events:auto;
  width:46px;height:46px;
  border-radius: 14px;
  border: 1px solid var(--btnStroke);
  background: var(--btnBg);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor:pointer;
  display:grid; place-items:center;
  transition: transform .06s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
  touch-action: manipulation;
}
.iconBtn:active{transform: scale(.98)}
.iconBtn:hover{background: var(--btnBgHover)}
.icon{width:20px;height:20px;display:block}
.icon svg{width:20px;height:20px;display:block}
.icon svg *{stroke: rgba(255,255,255,.92); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;}
.icon .fill{fill: rgba(255,255,255,.92); stroke:none;}

.vol{
  pointer-events:auto;
  width:160px;
  accent-color: white;
  touch-action: manipulation;
}

/* Fallback loader */
.loader{
  position:absolute; inset:0;
  z-index:20;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(10px);
}
.spinner{
  width:34px;height:34px;
  border-radius:50%;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.85);
  animation: spin .8s linear infinite;
}
.loaderText{color:var(--muted); font-weight:650}

:fullscreen .cornerLogo{ right:18px; top:18px; height:28px; }
:fullscreen .liveBadge{ left:18px; top:18px; }
:fullscreen .hudBottom{ padding:18px; }

@media (max-width: 620px){
  .stage{padding:16px 14px 22px}
  .playerCard{padding:10px}
  .cornerLogo{right:10px; top:10px; height:22px}
  .liveBadge{left:10px; top:10px; padding:7px 9px}
  .vol{width:120px}
  .hudBottom{padding:12px}
  /* Mobile controls: keep Play/Vol on the bottom row (no wrap "upwards") */
  .hudBottom{
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
    min-height: 68px; /* reserve space so controls don't jump when reactions overlay */
  }
  .iconBtn{ width:42px; height:42px; border-radius: 13px; }
  .vol{
    width:auto;
    flex: 1 1 auto;
    min-width: 86px;
    max-width: 130px;
  }
  .spacer{ display:none; }
  .hudRight{ margin-left:auto; }

  /* Mobile: smooth hide of play/vol controls when reactions are opened.
     We avoid display:none to prevent layout jumps. */
  #btnPlay, #btnMute, #vol{ transition: opacity .22s ease, transform .22s ease; }
  .hudBottom.mobileReactOpen #btnPlay,
  .hudBottom.mobileReactOpen #btnMute,
  .hudBottom.mobileReactOpen #vol{
    opacity:0;
    transform: translateY(6px);
    pointer-events:none;
  }

  /* Reactions become an overlay pill anchored to the bottom bar, so buttons don't shift */
  .hudBottom.mobileReactOpen .hudRight{
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    width:auto;
    justify-content:flex-end;
    transition: opacity .22s ease, transform .22s ease;
  }
  .hudBottom.mobileReactOpen .hudRight{ opacity:1; transform: translateY(0); }
  .hudBottom.mobileReactOpen .reactBar{ flex: 1 1 auto; max-width: 100%; }

}

/* very wide screens: avoid feeling too huge */
@media (min-width: 1500px){
  .playerCard{ width: min(980px, 92vw); }
}


:fullscreen .curtainLogo{ width:min(420px, 54vw); }
:fullscreen .curtainSpinner{ width:38px; height:38px; }

/* capa extra para tapar aún más lo de atrás */
.curtain::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(90% 60% at 50% 45%, rgba(0,0,0,.55), rgba(0,0,0,.98));
  pointer-events:none;
}
.curtainInner{ position:relative; z-index:1; }

/* Transición oscura entre videos (sin loading) */
.veil{
  position:absolute;
  inset:0;
  z-index:12; /* debajo de HUD (15), encima del video */
  background: rgba(0,0,0,0);
  opacity:0;
  pointer-events:none;
  transition: opacity 340ms ease;
}
.veil.show{
  opacity:1;
  background: rgba(0,0,0,.86);
}

/* === Reactions (TikTok + Facebook) === */
.floatReactions{
  position:absolute;
  inset:0;
  z-index:16; /* above HUD */
  pointer-events:none;
  overflow:hidden;
}

.floatReactions .float{
  position:absolute;
  left: var(--x, 92%);
  bottom:-18px;
  font-size:26px;
  opacity:0;
  transform: translate3d(-50%,0,0) scale(var(--s1, .9));
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
  animation: floatUp var(--dur, 2.8s) cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes floatUp{
  0%{ opacity:0; transform: translate3d(-50%,0,0) scale(var(--s1, .85)); }
  10%{ opacity:1; }
  100%{ opacity:0; transform: translate3d(calc(-50% + var(--dx, 0px)), var(--dy, -460px), 0) scale(var(--s2, 1.18)); }
}

.reactBar{
  position:relative;
  z-index:1;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  max-width: min(560px, 100%);
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  transition: opacity .22s ease, transform .22s ease, max-width .22s ease;
}

.reactBar::-webkit-scrollbar{ display:none; }

.reactBtn{
  width:44px;
  height:44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(20,22,33,.55);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .08s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.reactBtn:hover{ background: rgba(30,34,52,.72); }
.reactBtn:active{ transform: scale(.96); }

.reactBtn .emo{ font-size:20px; line-height:1; transform: translateY(1px); }

.reactCounts{
  display:flex;
  align-items:center;
  margin-left:8px;
  padding-left:12px;
  border-left:1px solid rgba(255,255,255,.10);
  user-select:none;
}

/* Slot-style total counter (0..9999) */
.slot{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.slotLabel{
  font-size:11px;
  font-weight:750;
  letter-spacing:.35px;
  color: rgba(238,241,255,.78);
  margin-right:2px;
}

.slotDigits{
  display:flex;
  align-items:center;
  gap:3px;
  font-variant-numeric: tabular-nums;
}

.digit{
  width:14px;
  height:18px;
  border-radius: 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  overflow:hidden;
  position:relative;
}

.digit span{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
  color: rgba(238,241,255,.95);
  transform: translateY(0);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.digit.rolling span{
  transform: translateY(-120%);
}

.digit .next{
  position:absolute;
  top:120%;
  left:0; right:0;
  text-align:center;
}
.reactCounts .pill{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:6px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
}
.reactCounts .pill .emo{ font-size:14px; }


/* Mobile inline toggle (only used as an accessibility fallback inside the HUD).
   We keep it visually consistent with other icon buttons. */
.reactToggle{
  display:none;
  width:42px;
  height:42px;
  border-radius: 14px;
  border: 1px solid var(--btnStroke);
  background: var(--btnBg);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.reactToggle:active{ transform: scale(.98); }
.reactToggle:hover{ background: var(--btnBgHover); }
.reactToggle .icon{ width:20px; height:20px; display:block; }

/* Mobile floating open/close toggle (always visible even when the right HUD is hidden) */
/* Mobile floating toggle (only on small screens).
   Placed above the bottom controls, so it never blocks fullscreen/volume. */
.reactMobileToggle{
  display:none;
  position:absolute;
  right:calc(14px + env(safe-area-inset-right));
  bottom:calc(92px + env(safe-area-inset-bottom));
  width:46px;
  height:46px;
  border-radius: 16px;
  border: 1px solid var(--btnStroke);
  background: var(--btnBg);
  color: var(--text);
  box-shadow: 0 14px 44px rgba(0,0,0,.42);
  backdrop-filter: blur(18px);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:16;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, background .18s ease, opacity .18s ease;
}
.reactMobileToggle:hover{ background: var(--btnBgHover); }
.reactMobileToggle:active{ transform: scale(.98); }
.reactMobileToggle .icon{ width:20px; height:20px; display:block; }
.reactMobileToggle .icon svg{ width:22px; height:22px; }

@media (max-width: 620px){
  .reactMobileToggle{ display:flex; }
}


/* Desktop toggle removed (user requested). */
.reactDeskToggle{ display:none !important; }


.reactBar.desktopCollapsed{
  opacity:0;
  transform: translateX(110%) scale(.98);
  filter: blur(2px);
  pointer-events:none;
}

.reactBar.desktopShown{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
  transition: opacity .22s ease, transform .22s ease, max-width .22s ease;
}
.reactBar.mobileCollapsed{
  opacity:0;
  transform: translateX(110%) scale(.98);
  filter: blur(2px);
  pointer-events:none;
}
.reactBar.mobileShown{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
  transition: opacity .22s ease, transform .22s ease, max-width .22s ease;
}

.floatReactions.mobileHidden{
  opacity:0;
  transition: opacity .18s ease;
}

@media (max-width: 620px){
  .hudRight{ width:100%; justify-content:flex-end; }
  .reactToggle{ display:flex; }
  .reactBar{ gap:8px; padding:8px 8px; max-width: 100%; transition: opacity .22s ease, transform .22s ease, max-width .22s ease; }
  .reactBtn{ width:40px; height:40px; }
  .reactCounts{ display:none; } /* mobile: keep it clean */
}