Embed

<div id="pc-live-nav">
  <div class="pc-nav-inner">

    <div class="pc-brand">
      <span class="pc-king">♚</span>
      <span>PC LIVE CENTER</span>
    </div>

    <div class="pc-actions">

      
      <a class="pc-btn pc-home"
         href="https://professional-chess.com/"
         target="_top">
        ← INICIO
      </a>

      
      <div class="pc-menu">
        <button class="pc-btn pc-live-button"
                type="button"
                onclick="pcToggle('pc-live-dropdown', event)">
          <span class="pc-red-dot"></span>
          EN VIVO
          <span class="pc-arrow">▾</span>
        </button>

        <div id="pc-live-dropdown" class="pc-dropdown pc-live-dropdown">

          <div class="pc-section-label pc-red">
            EN VIVO AHORA
          </div>

          <a class="pc-event"
             href="https://professional-chess.com/pc-live?event=leyendas-prodigios-2"
             target="_top">

            <div class="pc-event-main">
              <strong>♟ Leyendas y Prodigios II</strong>
              <small>
                Madrid 2026 · Sigue la cobertura desde Professional Chess
              </small>
            </div>

            <span class="pc-status-live">● EN VIVO</span>
          </a>

          <div class="pc-divider"></div>

          <div class="pc-section-label pc-gold">
            PRÓXIMAMENTE
          </div>

          <a class="pc-event"
             href="https://professional-chess.com/pc-live?event=kasparov-topalov"
             target="_top">

            <div class="pc-event-main">
              <strong>♟ Kasparov vs Topalov</strong>
              <small>
                Clutch Chess: The Legends · Saint Louis 2026 · 11–13 septiembre
              </small>
            </div>

            <span class="pc-status-soon">PRÓXIMO</span>
          </a>

        </div>
      </div>


      
      <div class="pc-menu">

        <button class="pc-btn pc-shop-button"
                type="button"
                onclick="pcToggle('pc-shop-dropdown', event)">
          ♚ CHESS SETS
          <span class="pc-arrow">▾</span>
        </button>

        <div id="pc-shop-dropdown" class="pc-dropdown pc-shop-dropdown">

          <div class="pc-shop-title">
            PC PROFESSIONAL CHESS
          </div>

          <div class="pc-shop-subtitle">
            Compra tu Chess Set
          </div>

          <a class="pc-country"
             href="https://www.amazon.com/dp/B0FJPJQWTV"
             target="_blank"
             rel="noopener noreferrer">
            <span>🇺🇸</span>
            <div>
              <strong>USA</strong>
              <small>Comprar en Amazon</small>
            </div>
            <b>›</b>
          </a>

          <a class="pc-country"
             href="https://www.amazon.ca/dp/B0FJPJQWTV"
             target="_blank"
             rel="noopener noreferrer">
            <span>🇨🇦</span>
            <div>
              <strong>CANADÁ</strong>
              <small>Comprar en Amazon</small>
            </div>
            <b>›</b>
          </a>

          <a class="pc-country"
             href="https://www.amazon.com.mx/dp/B0FJPJQWTV"
             target="_blank"
             rel="noopener noreferrer">
            <span>🇲🇽</span>
            <div>
              <strong>MÉXICO</strong>
              <small>Comprar en Amazon</small>
            </div>
            <b>›</b>
          </a>

        </div>
      </div>

    </div>
  </div>
</div>


<style>

#pc-live-nav,
#pc-live-nav * {
  box-sizing: border-box;
}

#pc-live-nav {
  width: 100%;
  background: #101827;
  border-bottom: 2px solid #B8913F;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  z-index: 9999;
}

.pc-nav-inner {
  max-width: 1450px;
  min-height: 82px;
  margin: 0 auto;
  padding: 12px 25px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}


/* BRAND */

.pc-brand {
  display: flex;
  align-items: center;
  gap: 11px;

  color: #fff;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .8px;
  white-space: nowrap;
}

.pc-king {
  color: #D5A94B;
  font-size: 31px;
}


/* BUTTON AREA */

.pc-actions {
  display: flex;
  align-items: center;
  gap: 11px;
}

.pc-menu {
  position: relative;
}

.pc-btn {
  min-height: 48px;

  padding: 0 21px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  border-radius: 8px;
  border: 1px solid #536078;

  background: #182438;
  color: #fff;

  font-size: 14px;
  font-weight: 900;

  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;

  transition: .18s ease;
}

.pc-btn:hover {
  transform: translateY(-1px);
  border-color: #D5A94B;
}


/* HOME */

.pc-home:hover {
  background: #24334A;
  color: #fff;
}


/* LIVE */

.pc-live-button {
  border: 2px solid #F04444;
  background: #fff;
  color: #101827;
}

.pc-live-button:hover {
  background: #fff;
  color: #101827;
}

.pc-red-dot {
  width: 10px;
  height: 10px;

  background: #F04444;
  border-radius: 50%;

  display: inline-block;

  animation: pcPulse 1.4s infinite;
}

@keyframes pcPulse {
  0%,100% { opacity: 1; }
  50% { opacity: .35; }
}


/* SHOP - MOST VISIBLE BUTTON */

.pc-shop-button {
  min-height: 52px;
  padding: 0 27px;

  background: #D5A94B;
  border: 2px solid #D5A94B;

  color: #101827;

  font-size: 15px;

  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.pc-shop-button:hover {
  background: #E5BB59;
  border-color: #E5BB59;
  color: #101827;
}


/* DROPDOWNS */

.pc-dropdown {
  display: none;

  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  background: #fff;

  border: 1px solid #D8DDE5;
  border-radius: 11px;

  box-shadow: 0 15px 38px rgba(0,0,0,.30);

  overflow: hidden;

  z-index: 99999;
}

.pc-dropdown.pc-open {
  display: block;
}


/* LIVE DROPDOWN */

.pc-live-dropdown {
  width: 430px;
  padding: 15px;
}

.pc-section-label {
  padding: 3px 2px 10px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
}

.pc-red {
  color: #F04444;
}

.pc-gold {
  color: #B8913F;
}

.pc-event {
  padding: 10px 4px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;

  text-decoration: none;
  color: #101827;

  border-radius: 7px;
}

.pc-event:hover {
  background: #F4F5F7;
}

.pc-event-main {
  min-width: 0;
}

.pc-event strong {
  display: block;

  font-size: 17px;
  margin-bottom: 5px;
}

.pc-event small {
  display: block;

  color: #5E6879;
  font-size: 12px;
  line-height: 1.35;
}

.pc-status-live {
  color: #F04444;

  font-size: 10px;
  font-weight: 900;

  white-space: nowrap;
}

.pc-status-soon {
  color: #B8913F;

  font-size: 10px;
  font-weight: 900;

  white-space: nowrap;
}

.pc-divider {
  height: 1px;

  background: #E1E4E8;

  margin: 10px -15px 14px;
}


/* SHOP DROPDOWN */

.pc-shop-dropdown {
  width: 330px;
  padding: 10px;
}

.pc-shop-title {
  color: #B8913F;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;

  padding: 8px 10px 3px;
}

.pc-shop-subtitle {
  color: #697386;

  font-size: 11px;

  padding: 0 10px 10px;
}

.pc-country {
  min-height: 65px;

  padding: 10px 12px;

  display: grid;
  grid-template-columns: 35px 1fr 20px;
  align-items: center;
  gap: 8px;

  color: #101827;
  text-decoration: none;

  border-radius: 7px;
}

.pc-country:hover {
  background: #F3F4F6;
}

.pc-country > span {
  font-size: 23px;
}

.pc-country strong {
  display: block;

  font-size: 15px;
  font-weight: 900;
}

.pc-country small {
  display: block;

  color: #697386;

  margin-top: 2px;

  font-size: 11px;
}

.pc-country b {
  color: #B8913F;
  font-size: 22px;
}


/* MOBILE */

@media (max-width: 720px) {

  .pc-nav-inner {
    flex-direction: column;

    padding: 12px;
    gap: 10px;
  }

  .pc-brand {
    font-size: 18px;
  }

  .pc-actions {
    width: 100%;

    display: grid;
    grid-template-columns: .8fr 1fr 1.25fr;

    gap: 6px;
  }

  .pc-menu {
    position: static;
  }

  .pc-btn {
    width: 100%;

    min-height: 45px;

    padding: 0 7px;

    font-size: 10px;
  }

  .pc-shop-button {
    min-height: 45px;
    padding: 0 7px;

    font-size: 10px;
  }

  .pc-dropdown {
    position: absolute;

    left: 10px;
    right: 10px;
    top: calc(100% + 6px);

    width: auto;
  }

  .pc-event strong {
    font-size: 14px;
  }

}

</style>


<script>

function pcToggle(id, ev) {

  if (ev) {
    ev.stopPropagation();
  }

  const selected =
    document.getElementById(id);

  document
    .querySelectorAll("#pc-live-nav .pc-dropdown")
    .forEach(function(menu) {

      if (menu !== selected) {
        menu.classList.remove("pc-open");
      }

    });

  selected.classList.toggle("pc-open");
}


/* CLOSE WHEN CLICKING OUTSIDE */

document.addEventListener("click", function(e) {

  if (!e.target.closest("#pc-live-nav .pc-menu")) {

    document
      .querySelectorAll("#pc-live-nav .pc-dropdown")
      .forEach(function(menu) {
        menu.classList.remove("pc-open");
      });

  }

});

</script>

<section id="pc-live-center">
<style>
#pc-live-center,
#pc-live-center *{box-sizing:border-box}
#pc-live-center{
  --pc-bg:#101827;
  --pc-card:#172235;
  --pc-card2:#111a29;
  --pc-gold:#D5A94B;
  --pc-gold2:#B8913F;
  --pc-white:#fff;
  --pc-muted:#aab2c0;
  --pc-line:rgba(213,169,75,.34);
  width:100%;
  max-width:100%;
  background:var(--pc-bg);
  color:var(--pc-white);
  font-family:Arial,Helvetica,sans-serif;
  padding:34px 16px 46px;
  overflow:hidden;
}
#pc-live-center .pc-wrap{width:100%;max-width:1440px;margin:0 auto}
#pc-live-center .pc-kicker{
  color:var(--pc-gold);font-size:13px;font-weight:900;letter-spacing:2.7px;
  text-align:center;text-transform:uppercase;margin-bottom:8px
}
#pc-live-center .pc-title{
  margin:0;text-align:center;color:#fff;font-size:clamp(29px,4.5vw,50px);
  line-height:1.06;font-weight:900
}
#pc-live-center .pc-subtitle{
  margin:10px auto 18px;text-align:center;color:var(--pc-gold);
  font-size:clamp(14px,2vw,19px);font-weight:700
}
#pc-live-center .pc-status{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:max-content;max-width:100%;margin:0 auto 15px;padding:9px 16px;
  border:1px solid var(--pc-gold);border-radius:999px;background:rgba(0,0,0,.22);
  font-size:13px;font-weight:900;letter-spacing:.8px
}
#pc-live-center .pc-dot{
  width:11px;height:11px;border-radius:50%;background:#9CA3AF;flex:0 0 11px
}
#pc-live-center .pc-dot.live{
  background:#ff2525;box-shadow:0 0 10px rgba(255,37,37,.9);
  animation:pcPulse 1.15s infinite
}
@keyframes pcPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.78)}
}
#pc-live-center .pc-round{
  max-width:900px;margin:0 auto 24px;padding:15px 18px;text-align:center;
  border:1px solid var(--pc-line);border-radius:12px;background:rgba(255,255,255,.045)
}
#pc-live-center .pc-round-label{color:var(--pc-gold);font-size:12px;font-weight:900;letter-spacing:1.8px}
#pc-live-center .pc-match{margin-top:5px;font-size:clamp(18px,2.5vw,25px);font-weight:900}
#pc-live-center .pc-time{margin-top:5px;color:#c9ced8;font-size:13px;font-weight:600}
#pc-live-center .pc-countdown{margin-top:7px;color:var(--pc-gold);font-size:14px;font-weight:900}

#pc-live-center .pc-main-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,28%);gap:24px;align-items:start
}
#pc-live-center .pc-left{min-width:0}
#pc-live-center .pc-side{display:flex;flex-direction:column;gap:16px;min-width:0}
#pc-live-center .pc-card{
  border:1px solid var(--pc-line);border-radius:13px;background:var(--pc-card);
  overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.18)
}
#pc-live-center .pc-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.08);
  background:var(--pc-card2)
}
#pc-live-center .pc-card-head h3{
  margin:0;color:var(--pc-gold);font-size:15px;font-weight:900;letter-spacing:1.4px
}
#pc-live-center .pc-sync{font-size:11px;color:#8f98a7;font-weight:700}
#pc-live-center .pc-card-body{padding:12px 14px}
#pc-live-center .pc-empty{
  padding:20px 12px;text-align:center;color:var(--pc-muted);font-size:12px;line-height:1.45
}

#pc-live-center .pc-standing-row{
  display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;
  padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.065)
}
#pc-live-center .pc-standing-row:last-child{border-bottom:0}
#pc-live-center .pc-pos{
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(213,169,75,.12);color:var(--pc-gold);font-size:12px;font-weight:900
}
#pc-live-center .pc-player{min-width:0;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pc-live-center .pc-score{font-size:15px;color:#fff;font-weight:900}
#pc-live-center .pc-result-row{
  padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.065)
}
#pc-live-center .pc-result-row:last-child{border-bottom:0}
#pc-live-center .pc-result-round{font-size:11px;color:var(--pc-gold);font-weight:900;margin-bottom:5px}
#pc-live-center .pc-result-game{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:7px;align-items:center;
  font-size:13px;line-height:1.3
}
#pc-live-center .pc-result-game .white{text-align:right}
#pc-live-center .pc-result-game .black{text-align:left}
#pc-live-center .pc-result-game .res{
  color:#fff;font-weight:900;background:rgba(255,255,255,.07);border-radius:5px;padding:3px 5px
}

#pc-live-center .pc-board-frame{
  width:100%;padding:3px;border-radius:14px;
  background:linear-gradient(135deg,var(--pc-gold),#826323,var(--pc-gold));
  overflow:hidden
}
#pc-live-center .pc-board-mask{
  position:relative;
  width:100%;
  height:405px;
  overflow:hidden;
  background:#262421;
  border-radius:11px
}
#pc-live-center .pc-board-mask iframe{
  position:absolute;
  width:1280px;
  height:820px;
  left:0;
  top:-315px;
  border:0;
  display:block;
  transform:scale(.98);
  transform-origin:top left;
  pointer-events:auto;
  background:#262421
}
#pc-live-center .pc-mobile-boards{display:none}

#pc-live-center .pc-video-wrap{margin-top:20px}
#pc-live-center .pc-video-border{
  width:100%;padding:3px;border-radius:14px;
  background:linear-gradient(135deg,var(--pc-gold),#826323,var(--pc-gold));
  overflow:hidden
}
#pc-live-center .pc-video{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:11px;overflow:hidden
}
#pc-live-center .pc-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#pc-live-center .pc-source-note{
  margin-top:8px;text-align:center;color:#7f8998;font-size:10px;line-height:1.4
}
#pc-live-center .pc-footer{
  margin-top:24px;text-align:center;border-top:1px solid rgba(255,255,255,.07);padding-top:18px
}
#pc-live-center .pc-footer-main{font-size:14px;font-weight:800}
#pc-live-center .pc-brand{margin-top:6px;color:var(--pc-gold);font-size:12px;font-weight:900;letter-spacing:2.5px}


@media(min-width:1400px){
  #pc-live-center .pc-main-grid{grid-template-columns:minmax(0,1fr) 410px}
}

@media(max-width:1100px){
  #pc-live-center .pc-main-grid{grid-template-columns:minmax(0,1fr) 350px;gap:18px}
  #pc-live-center .pc-board-mask{height:340px}
  #pc-live-center .pc-board-mask iframe{
    width:1280px;
    height:820px;
    left:0;
    top:-275px;
    transform:scale(.86)
  }
}
@media(max-width:820px){
  #pc-live-center{padding:26px 10px 36px}
  #pc-live-center .pc-main-grid{grid-template-columns:1fr}
  #pc-live-center .pc-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #pc-live-center .pc-board-frame{display:none}
  #pc-live-center .pc-mobile-boards{display:block;width:100%}
  #pc-live-center .pc-mobile-note{
    margin:0 0 8px;text-align:center;color:var(--pc-gold);font-size:11px;font-weight:800
  }
  #pc-live-center .pc-mobile-scroll{
    width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none
  }
  #pc-live-center .pc-mobile-scroll::-webkit-scrollbar{display:none}
  #pc-live-center .pc-mobile-strip{
    position:relative;width:1310px;height:350px;overflow:hidden;background:#262421;border-radius:10px
  }
  #pc-live-center .pc-mobile-strip iframe{
    position:absolute;width:1150px;height:760px;left:-6px;top:-374px;border:0;display:block;
    transform:scale(1.14);transform-origin:top left;pointer-events:none;background:#262421
  }
}
@media(max-width:600px){
  #pc-live-center .pc-title{font-size:28px}
  #pc-live-center .pc-side{grid-template-columns:1fr}
  #pc-live-center .pc-round{padding:13px 10px;margin-bottom:16px}
  #pc-live-center .pc-match{font-size:18px}
  #pc-live-center .pc-video-wrap{margin-top:14px}
}
@media(max-width:390px){
  #pc-live-center .pc-mobile-strip{width:1415px;height:330px}
  #pc-live-center .pc-mobile-strip iframe{left:-7px;top:-405px;transform:scale(1.23)}
}
</style>

<div class="pc-wrap">
  <div class="pc-kicker">PROFESSIONAL CHESS · PC LIVE</div>
  <h2 id="pc-title" class="pc-title">Cargando torneo...</h2>
  <div id="pc-subtitle" class="pc-subtitle">Cobertura desde Professional Chess</div>

  <div class="pc-status">
    <span id="pc-status-dot" class="pc-dot"></span>
    <span id="pc-status-text">CARGANDO...</span>
  </div>

  <div class="pc-round">
    <div id="pc-round-label" class="pc-round-label">PRÓXIMA RONDA</div>
    <div id="pc-match" class="pc-match">Cargando...</div>
    <div id="pc-time" class="pc-time"></div>
    <div id="pc-countdown" class="pc-countdown"></div>
  </div>

  <div class="pc-main-grid">
    <div class="pc-left">

      <div class="pc-board-frame">
        <div class="pc-board-mask">
          <iframe id="pc-board-desktop"
            src=""
            title="Tableros en vivo"
            loading="eager"
            tabindex="-1"
            aria-label="Tableros Lichess en vivo">
          </iframe>
        </div>
      </div>

      <div class="pc-mobile-boards">
        <div class="pc-mobile-note">← DESLIZA PARA VER LOS TABLEROS →</div>
        <div class="pc-mobile-scroll">
          <div class="pc-mobile-strip">
            <iframe id="pc-board-mobile"
              src=""
              title="Tableros en vivo móvil"
              loading="eager"
              tabindex="-1"
              aria-label="Tableros Lichess en vivo">
            </iframe>
          </div>
        </div>
      </div>

      <div class="pc-video-wrap">
        <div class="pc-video-border">
          <div class="pc-video">
            <iframe id="pc-video"
              src=""
              title="Transmisión oficial"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen>
            </iframe>
          </div>
        </div>
      </div>

    </div>

    <aside class="pc-side">
      <div class="pc-card">
        <div class="pc-card-head">
          <h3>♚ CLASIFICACIÓN</h3>
          <span id="pc-ranking-sync" class="pc-sync">AUTO</span>
        </div>
        <div id="pc-ranking" class="pc-card-body">
          <div class="pc-empty">Cargando clasificación...</div>
        </div>
      </div>

      <div class="pc-card">
        <div class="pc-card-head">
          <h3>♟ RESULTADOS</h3>
          <span id="pc-results-sync" class="pc-sync">AUTO</span>
        </div>
        <div id="pc-results" class="pc-card-body">
          <div class="pc-empty">Cargando resultados...</div>
        </div>
      </div>
    </aside>
  </div>

  <div class="pc-source-note">
    Tableros, resultados y clasificación alimentados desde el broadcast público del evento.
  </div>

  <div class="pc-footer">
    <div id="pc-footer-main" class="pc-footer-main">Professional Chess</div>
    <div class="pc-brand">THINK. PLAY. WIN.</div>
  </div>
</div>

<script>
(function(){

  const EVENTS = {
    "leyendas-prodigios-2": {
      title: "LEYENDAS Y PRODIGIOS II",
      subtitle: "Madrid 2026 · Sigue el torneo desde Professional Chess",
      locationLabel: "Madrid",
      timeZone: "Europe/Madrid",
      broadcastId: "0SZaPFp7",
      youtubeId: "Dl1uXWYKZlQ",
      footer: "♔ GM Pepe Cuenca × Professional Chess",
      liveWindowHours: 4.5,
      rounds: [
        {round:1,start:"2026-09-07T17:00:00+02:00",match:"GM Pepe Cuenca vs GM David Antón"},
        {round:2,start:"2026-09-08T11:00:00+02:00",match:"GM Pepe Cuenca vs GM Faustino Oro"},
        {round:3,start:"2026-09-08T17:00:00+02:00",match:"GM Ivan Sokolov vs GM Pepe Cuenca"},
        {round:4,start:"2026-09-09T11:00:00+02:00",match:"GM Pepe Cuenca vs GM José Eduardo Martínez"},
        {round:5,start:"2026-09-09T17:00:00+02:00",match:"GM Diego Flores vs GM Pepe Cuenca"},
        {round:6,start:"2026-09-10T11:00:00+02:00",match:"GM David Antón vs GM Pepe Cuenca"},
        {round:7,start:"2026-09-10T17:00:00+02:00",match:"GM Faustino Oro vs GM Pepe Cuenca"},
        {round:8,start:"2026-09-11T11:00:00+02:00",match:"GM Pepe Cuenca vs GM Ivan Sokolov"},
        {round:9,start:"2026-09-11T17:00:00+02:00",match:"GM José Eduardo Martínez vs GM Pepe Cuenca"},
        {round:10,start:"2026-09-12T17:00:00+02:00",match:"GM Pepe Cuenca vs GM Diego Flores"}
      ]
    }
  };

  function getTopSearch(){
    try { return window.top.location.search || ""; }
    catch(e){ return window.location.search || ""; }
  }

  const params = new URLSearchParams(getTopSearch());
  const eventId = params.get("event") || "leyendas-prodigios-2";
  const E = EVENTS[eventId] || EVENTS["leyendas-prodigios-2"];

  const $ = id => document.getElementById(id);

  $("pc-title").textContent = E.title;
  $("pc-subtitle").textContent = E.subtitle;
  $("pc-footer-main").textContent = E.footer;

  const broadcastEmbed =
    "https://lichess.org/embed/broadcast/-/" + E.broadcastId +
    "?theme=brown&bg=dark&pieceSet=cburnett";

  $("pc-board-desktop").src = broadcastEmbed;
  $("pc-board-mobile").src = broadcastEmbed;
  $("pc-video").src = "https://www.youtube.com/embed/" + E.youtubeId;

  function eventDate(iso){
    return new Intl.DateTimeFormat("es-ES",{
      timeZone:E.timeZone,
      weekday:"long",
      day:"numeric",
      month:"long",
      hour:"2-digit",
      minute:"2-digit",
      hour12:false
    }).format(new Date(iso));
  }

  function countdownText(ms){
    if(ms <= 0) return "";
    const s = Math.floor(ms/1000);
    const d = Math.floor(s/86400);
    const h = Math.floor((s%86400)/3600);
    const m = Math.floor((s%3600)/60);
    const sec = s%60;
    return "Comienza en " + (d>0 ? d+"d " : "") +
      String(h).padStart(2,"0")+":"+
      String(m).padStart(2,"0")+":"+
      String(sec).padStart(2,"0");
  }

  function updateClock(){
    const now = Date.now();
    const win = E.liveWindowHours*60*60*1000;
    let live = null, next = null;

    for(const r of E.rounds){
      const start = new Date(r.start).getTime();
      if(now >= start && now < start + win){ live = r; break; }
      if(now < start && !next) next = r;
    }

    if(live){
      $("pc-status-dot").classList.add("live");
      $("pc-status-text").textContent = "EN VIVO AHORA";
      $("pc-round-label").textContent = "RONDA " + live.round + " · EN DIRECTO";
      $("pc-match").textContent = live.match;
      $("pc-time").textContent = eventDate(live.start) + " · " + E.locationLabel;
      $("pc-countdown").textContent = "🔴 Transmisión en curso";
      return;
    }

    $("pc-status-dot").classList.remove("live");

    if(next){
      $("pc-status-dot").style.background = "#D5A94B";
      $("pc-status-text").textContent = "PRÓXIMA TRANSMISIÓN";
      $("pc-round-label").textContent = "RONDA " + next.round;
      $("pc-match").textContent = next.match;
      $("pc-time").textContent = eventDate(next.start) + " · " + E.locationLabel;
      $("pc-countdown").textContent = countdownText(new Date(next.start).getTime()-now);
    }else{
      $("pc-status-dot").style.background = "#9CA3AF";
      $("pc-status-text").textContent = "TORNEO FINALIZADO";
      $("pc-round-label").textContent = E.title;
      $("pc-match").textContent = "Ver partidas y transmisión";
      $("pc-time").textContent = E.locationLabel + " · 2026";
      $("pc-countdown").textContent = "▶ Repetición disponible";
    }
  }

  function cleanName(s){
    return (s || "")
      .replace(/^GM\s+/i,"")
      .replace(/^IM\s+/i,"")
      .replace(/^FM\s+/i,"")
      .replace(/^WGM\s+/i,"")
      .replace(/^WIM\s+/i,"")
      .trim();
  }

  function splitGames(pgn){
    return pgn
      .replace(/\r/g,"")
      .split(/\n(?=\[Event\s+")/)
      .map(x=>x.trim())
      .filter(Boolean);
  }

  function tag(game,name){
    const re = new RegExp("^\\["+name+"\\s+\"([^\"]*)\"\\]","m");
    const m = game.match(re);
    return m ? m[1] : "";
  }

  function parseRoundNumber(v){
    const n = parseInt(String(v||"").split(".")[0],10);
    return Number.isFinite(n) ? n : 0;
  }

  function scoreFor(result, side){
    if(result === "1-0") return side==="white" ? 1 : 0;
    if(result === "0-1") return side==="black" ? 1 : 0;
    if(result === "1/2-1/2") return .5;
    return null;
  }

  function esc(s){
    return String(s||"").replace(/[&<>"']/g,c=>({
      "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"
    })[c]);
  }

  function renderFromPGN(pgn){
    const games = splitGames(pgn);
    const completed = [];
    const scores = new Map();

    for(const g of games){
      const white = cleanName(tag(g,"White"));
      const black = cleanName(tag(g,"Black"));
      const result = tag(g,"Result");
      const round = parseRoundNumber(tag(g,"Round"));

      if(!white || !black) continue;

      if(!scores.has(white)) scores.set(white,{name:white,pts:0,games:0,wins:0});
      if(!scores.has(black)) scores.set(black,{name:black,pts:0,games:0,wins:0});

      if(["1-0","0-1","1/2-1/2"].includes(result)){
        const ws = scoreFor(result,"white");
        const bs = scoreFor(result,"black");

        const W = scores.get(white);
        const B = scores.get(black);

        W.pts += ws; W.games += 1; if(ws===1) W.wins += 1;
        B.pts += bs; B.games += 1; if(bs===1) B.wins += 1;

        completed.push({white,black,result,round});
      }
    }

    const standings = Array.from(scores.values())
      .filter(x=>x.games>0)
      .sort((a,b)=> b.pts-a.pts || b.wins-a.wins || a.name.localeCompare(b.name));

    if(standings.length){
      $("pc-ranking").innerHTML = standings.map((p,i)=>`
        <div class="pc-standing-row">
          <div class="pc-pos">${i+1}</div>
          <div class="pc-player" title="${esc(p.name)}">${esc(p.name)}</div>
          <div class="pc-score">${p.pts.toFixed(p.pts%1?1:0)}</div>
        </div>
      `).join("");
    }else{
      $("pc-ranking").innerHTML = '<div class="pc-empty">La clasificación aparecerá cuando haya resultados oficiales.</div>';
    }

    completed.sort((a,b)=> b.round-a.round);
    const recent = completed.slice(0,12);

    if(recent.length){
      $("pc-results").innerHTML = recent.map(g=>`
        <div class="pc-result-row">
          <div class="pc-result-round">RONDA ${g.round || "—"}</div>
          <div class="pc-result-game">
            <span class="white" title="${esc(g.white)}">${esc(g.white)}</span>
            <span class="res">${esc(g.result)}</span>
            <span class="black" title="${esc(g.black)}">${esc(g.black)}</span>
          </div>
        </div>
      `).join("");
    }else{
      $("pc-results").innerHTML = '<div class="pc-empty">Los resultados aparecerán automáticamente al finalizar las partidas.</div>';
    }

    const now = new Date();
    const stamp = now.toLocaleTimeString("es-ES",{hour:"2-digit",minute:"2-digit"});
    $("pc-ranking-sync").textContent = "ACT. " + stamp;
    $("pc-results-sync").textContent = "ACT. " + stamp;
  }

  async function updateData(){
    const url = "https://lichess.org/api/broadcast/" + E.broadcastId + ".pgn?clocks=false&comments=false";
    try{
      const r = await fetch(url,{cache:"no-store"});
      if(!r.ok) throw new Error("HTTP "+r.status);
      const pgn = await r.text();
      renderFromPGN(pgn);
    }catch(err){
      $("pc-ranking-sync").textContent = "REINTENTANDO";
      $("pc-results-sync").textContent = "REINTENTANDO";
      if(!$("pc-ranking").querySelector(".pc-standing-row")){
        $("pc-ranking").innerHTML = '<div class="pc-empty">Esperando datos del broadcast...</div>';
      }
      if(!$("pc-results").querySelector(".pc-result-row")){
        $("pc-results").innerHTML = '<div class="pc-empty">Esperando resultados del broadcast...</div>';
      }
    }
  }

  updateClock();
  setInterval(updateClock,1000);

  updateData();
  setInterval(updateData,30000);

})();
</script>
</section>