/* Visual radial/circular de llaves con banderas */
.knockout-visual{
  margin: 8px 0 28px;
}

.knockout-visual--radial{
  position:relative;
  width:min(100%,1120px);
  aspect-ratio:1 / 1;
  margin:0 auto 28px;
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at center, rgba(237,190,92,.24) 0 10%, rgba(237,190,92,.08) 11% 20%, transparent 21%),
    radial-gradient(circle at center, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(135deg,#151b19,#0e1211 70%,#101615);
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
}

.kv-radial-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}

.kv-line{
  stroke:rgba(180,186,182,.34);
  stroke-width:1.8;
  fill:none;
  vector-effect:non-scaling-stroke;
}

.kv-line.is-active{
  stroke:#e5b74b;
  stroke-width:3;
  filter:drop-shadow(0 0 5px rgba(229,183,75,.42));
}

.kv-line.is-eliminated{
  stroke:rgba(125,132,128,.22);
}

.kv-node{
  position:absolute;
  z-index:2;
  transform:translate(-50%,-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.92);
  border:2px solid rgba(255,255,255,.78);
  box-shadow:0 8px 18px rgba(0,0,0,.3);
  font-size:1.55rem;
  line-height:1;
}

.kv-node--team{
  width:46px;
  height:46px;
}

.kv-node--winner{
  width:38px;
  height:38px;
  background:rgba(255,255,255,.86);
  border-color:rgba(229,183,75,.72);
  font-size:1.32rem;
}

.kv-node--pending{
  background:rgba(95,101,97,.52);
  border-color:rgba(255,255,255,.14);
  box-shadow:none;
}

.kv-node--pending::after{
  content:"";
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
}

.kv-node--eliminated{
  opacity:.28;
  filter:grayscale(1);
}

.kv-node--champion{
  width:64px;
  height:64px;
  background:radial-gradient(circle,#fff4bf,#e3a72d);
  border-color:#f7d879;
  font-size:2.05rem;
  box-shadow:0 0 28px rgba(227,167,45,.55),0 10px 24px rgba(0,0,0,.35);
}

.kv-code-label{
  position:absolute;
  z-index:3;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,.66);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
  pointer-events:none;
}

.kv-round-label{
  position:absolute;
  z-index:3;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.72);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
}

.kv-center-title{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  gap:6px;
  color:white;
  text-align:center;
  pointer-events:none;
}

.kv-center-title strong{
  font-size:2.3rem;
  line-height:1;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));
}

.kv-center-title span{
  font-size:.72rem;
  color:rgba(255,255,255,.72);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:900;
}

.kv-mobile-hint{
  display:none;
}

@media(max-width:900px){
  .knockout-visual--radial{
    width:860px;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }

  .knockout-visual{
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:12px;
    -webkit-overflow-scrolling:touch;
  }

  .kv-mobile-hint{
    display:block;
    position:sticky;
    left:0;
    width:max-content;
    max-width:calc(100vw - 40px);
    margin:0 0 8px;
    padding:8px 11px;
    border-radius:999px;
    background:var(--soft);
    color:var(--muted);
    font-size:.72rem;
    font-weight:900;
  }
}

@media(max-width:560px){
  .knockout-visual--radial{
    width:760px;
  }

  .kv-node--team{
    width:38px;
    height:38px;
    font-size:1.3rem;
  }

  .kv-node--winner{
    width:32px;
    height:32px;
    font-size:1.08rem;
  }

  .kv-node--champion{
    width:54px;
    height:54px;
    font-size:1.65rem;
  }

  .kv-code-label{
    font-size:.55rem;
  }
}


/* v2 radial: tamaño legible */
.knockout-visual{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:10px 0 24px;
  -webkit-overflow-scrolling:touch;
}

.knockout-visual--radial{
  width:1280px;
  max-width:none;
  min-width:1280px;
  height:1280px;
  aspect-ratio:auto;
}

.kv-node{
  width:68px;
  height:68px;
  font-size:2.25rem;
  border-width:3px;
}

.kv-node--team{
  width:72px;
  height:72px;
  font-size:2.35rem;
}

.kv-node--winner{
  width:58px;
  height:58px;
  font-size:1.9rem;
}

.kv-node--champion{
  width:92px;
  height:92px;
  font-size:2.8rem;
}

.kv-code-label{
  font-size:.82rem;
  top:auto;
  transform:translate(-50%, 22px);
  background:rgba(0,0,0,.45);
  color:rgba(255,255,255,.92);
  padding:2px 6px;
  border-radius:999px;
}

.kv-line{
  stroke-width:2.4;
  stroke:rgba(205,212,207,.48);
}

.kv-line.is-active{
  stroke-width:4.4;
}

.kv-round-label{
  top:22px;
  font-size:.95rem;
}

.kv-center-title strong{
  font-size:3.2rem;
}

.kv-center-title span{
  font-size:.9rem;
}

@media(min-width:1350px){
  .knockout-visual--radial{
    margin-left:auto;
    margin-right:auto;
  }
}

@media(max-width:1349px){
  .knockout-visual::before{
    content:"Desliza horizontalmente para ver toda la llave";
    position:sticky;
    left:0;
    z-index:5;
    display:block;
    width:max-content;
    max-width:calc(100vw - 40px);
    margin:0 0 10px;
    padding:8px 12px;
    border-radius:999px;
    background:var(--soft);
    color:var(--muted);
    font-size:.78rem;
    font-weight:900;
  }
}

@media(max-width:900px){
  .knockout-visual--radial{
    width:1080px;
    min-width:1080px;
    height:1080px;
  }

  .kv-node{
    width:58px;
    height:58px;
    font-size:1.95rem;
  }

  .kv-node--team{
    width:62px;
    height:62px;
    font-size:2rem;
  }

  .kv-node--winner{
    width:50px;
    height:50px;
    font-size:1.65rem;
  }

  .kv-node--champion{
    width:78px;
    height:78px;
    font-size:2.35rem;
  }

  .kv-code-label{
    font-size:.72rem;
    transform:translate(-50%, 19px);
  }
}

@media(max-width:560px){
  .knockout-visual--radial{
    width:980px;
    min-width:980px;
    height:980px;
  }

  .kv-node{
    width:54px;
    height:54px;
    font-size:1.75rem;
  }

  .kv-node--team{
    width:58px;
    height:58px;
    font-size:1.85rem;
  }

  .kv-node--winner{
    width:46px;
    height:46px;
    font-size:1.48rem;
  }

  .kv-node--champion{
    width:72px;
    height:72px;
    font-size:2.1rem;
  }

  .kv-code-label{
    font-size:.68rem;
    transform:translate(-50%, 18px);
  }
}


/* v3 radial: acabado visual más estético */
.knockout-visual{
  border-radius:28px;
}

.knockout-visual--radial{
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,207,100,.32) 0 5%, rgba(255,207,100,.15) 6% 13%, transparent 14%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0 19%, transparent 20%),
    radial-gradient(circle at 50% 50%, transparent 0 54%, rgba(255,255,255,.035) 55%, transparent 56%),
    radial-gradient(circle at 25% 18%, rgba(11,110,79,.35), transparent 26%),
    radial-gradient(circle at 78% 72%, rgba(229,183,75,.20), transparent 24%),
    linear-gradient(145deg,#111716 0%,#0b0f0e 58%,#15150f 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 90px rgba(255,255,255,.03),
    0 28px 70px rgba(0,0,0,.34);
}

.knockout-visual--radial::before{
  content:"";
  position:absolute;
  inset:32px;
  border-radius:50%;
  background:
    repeating-conic-gradient(from -10deg,
      rgba(255,255,255,.045) 0deg 1deg,
      transparent 1deg 11.25deg);
  opacity:.55;
  z-index:0;
  pointer-events:none;
  mask:radial-gradient(circle, transparent 0 25%, #000 26% 58%, transparent 59%);
}

.knockout-visual--radial::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, transparent 0 42%, rgba(0,0,0,.14) 76%, rgba(0,0,0,.42) 100%);
  z-index:0;
  pointer-events:none;
}

.kv-bg-orbit{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}

.kv-bg-orbit--1{
  width:22%;
  height:22%;
  border:1px solid rgba(229,183,75,.55);
  box-shadow:0 0 28px rgba(229,183,75,.18);
}

.kv-bg-orbit--2{
  width:42%;
  height:42%;
  border:1px solid rgba(229,183,75,.34);
}

.kv-bg-orbit--3{
  width:72%;
  height:72%;
  border:1px solid rgba(255,255,255,.10);
}

.kv-radial-svg{
  z-index:1;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));
}

.kv-line{
  stroke:rgba(176,183,179,.30);
  stroke-width:2.2;
  stroke-linecap:round;
  opacity:.9;
}

.kv-line.is-eliminated{
  stroke:rgba(130,137,134,.17);
  stroke-width:1.8;
  opacity:.72;
}

.kv-line.is-active{
  stroke:url(#kvActiveGradient);
  stroke:#f4c957;
  stroke-width:4.2;
  filter:drop-shadow(0 0 8px rgba(244,201,87,.38));
}

.kv-node{
  backdrop-filter:blur(8px);
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0 22%, rgba(255,255,255,.88) 45%, rgba(238,244,240,.82) 100%);
  border:3px solid rgba(255,255,255,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -10px 18px rgba(0,0,0,.05),
    0 10px 22px rgba(0,0,0,.34);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.kv-node:hover{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 16px 32px rgba(0,0,0,.42),
    0 0 0 5px rgba(229,183,75,.12);
  z-index:6;
}

.kv-node--team{
  outline:1px solid rgba(255,255,255,.16);
  outline-offset:3px;
}

.kv-node--winner{
  background:
    radial-gradient(circle at 35% 30%, #fff8d1 0 18%, #ffffff 34%, rgba(255,255,255,.86) 100%);
  border-color:rgba(248,214,123,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 4px rgba(248,214,123,.10),
    0 12px 28px rgba(0,0,0,.36),
    0 0 22px rgba(248,214,123,.26);
}

.kv-node--champion{
  background:
    radial-gradient(circle at 35% 25%, #fff8ca 0 20%, #f4c957 42%, #b5771f 100%);
  border-color:#ffe29a;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.65),
    0 0 0 7px rgba(244,201,87,.14),
    0 0 44px rgba(244,201,87,.72),
    0 16px 35px rgba(0,0,0,.46);
}

.kv-node--pending{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 0 24px rgba(255,255,255,.04);
  outline:none;
}

.kv-node--pending::after{
  background:rgba(255,255,255,.24);
  box-shadow:0 0 16px rgba(255,255,255,.14);
}

.kv-node--eliminated{
  opacity:.22;
  filter:grayscale(1) saturate(.3);
}

.kv-code-label{
  background:rgba(8,13,12,.72);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.9);
  box-shadow:0 4px 10px rgba(0,0,0,.26);
  letter-spacing:.08em;
}

.kv-round-label{
  top:24px;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);
}

.kv-center-title{
  width:150px;
  height:150px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(244,201,87,.24), rgba(244,201,87,.05) 56%, transparent 72%);
}

.kv-center-title strong{
  filter:drop-shadow(0 0 16px rgba(244,201,87,.55)) drop-shadow(0 8px 12px rgba(0,0,0,.4));
}

.kv-center-title span{
  padding:5px 9px;
  border-radius:999px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.09);
}

.kv-mobile-hint,
.knockout-visual::before{
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}


/* v4: banderas como imágenes para evitar fallas de emojis del sistema */
.kv-flag-img{
  width:78%;
  height:78%;
  object-fit:cover;
  border-radius:50%;
  display:block;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 2px 5px rgba(0,0,0,.18);
}

.kv-node--winner .kv-flag-img{
  width:76%;
  height:76%;
}

.kv-node--champion .kv-flag-img{
  width:74%;
  height:74%;
}


/* v5: centrado visual de banderas dentro de los nodos */
.kv-node{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0;
}

.kv-flag-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  border-radius:50%;
  display:block;
  transform:scale(1.08);
  transform-origin:center center;
  box-shadow:none;
}

.kv-node--team .kv-flag-img{
  width:100%;
  height:100%;
  transform:scale(1.08);
}

.kv-node--winner .kv-flag-img{
  width:100%;
  height:100%;
  transform:scale(1.1);
}

.kv-node--champion .kv-flag-img{
  width:100%;
  height:100%;
  transform:scale(1.1);
}

.kv-node::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -10px 18px rgba(0,0,0,.12);
  z-index:2;
}

.kv-node--pending::before{
  display:none;
}

.kv-node .kv-flag-img{
  position:relative;
  z-index:1;
}


/* v6: etiquetas de equipos alineadas con su bandera */
.kv-code-label{display:none !important;}
.kv-name-label{
  position:absolute;
  z-index:4;
  max-width:132px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(8,13,12,.78);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.94);
  font-size:.72rem;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 4px 10px rgba(0,0,0,.28);
  pointer-events:none;
}
.kv-name-label--right{
  transform:translate(6px,-50%);
  text-align:left;
}
.kv-name-label--left{
  transform:translate(calc(-100% - 6px),-50%);
  text-align:right;
}
.kv-name-label--center{
  transform:translate(-50%,-50%);
  text-align:center;
}
.kv-name-label--top{ }
.kv-name-label--bottom{ }

@media(max-width:900px){
  .kv-name-label{
    max-width:112px;
    padding:3px 7px;
    font-size:.64rem;
  }
}

@media(max-width:560px){
  .kv-name-label{
    max-width:102px;
    padding:3px 6px;
    font-size:.6rem;
  }
}


/* v7: nombres más cerca y dentro del tablero */
.kv-name-label{
  max-width:118px;
  padding:3px 7px;
  font-size:.68rem;
  line-height:1.1;
}
.kv-name-label--right{
  transform:translate(3px,-50%);
}
.kv-name-label--left{
  transform:translate(calc(-100% - 3px),-50%);
}
.kv-name-label--center{
  transform:translate(-50%,-50%);
}

@media(max-width:900px){
  .kv-name-label{
    max-width:104px;
    padding:3px 6px;
    font-size:.62rem;
  }
  .kv-name-label--right{ transform:translate(2px,-50%); }
  .kv-name-label--left{ transform:translate(calc(-100% - 2px),-50%); }
}

@media(max-width:560px){
  .kv-name-label{
    max-width:94px;
    padding:2px 5px;
    font-size:.58rem;
  }
}