/* Torneos (tourney): lista de torneos y cuadro en directo. Raíz: .screen.ui.s-tourney (spec 8.17). */

/* ---- Lista: conmutador arriba y tres tarjetas ------------------------------------------------------ */
.s-tourney .tl-body { display: flex; flex-direction: column; min-height: 0; }
.s-tourney .thead { flex: none; display: flex; justify-content: center; margin: 10px 12px 0; }
.s-tourney .tourney-list { flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; padding: 12px; justify-content: center; align-items: center; }
.s-tourney .stagger > * { animation-fill-mode: backwards; }
.s-tourney .tcard { width: 240px; height: 100%; max-height: 320px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 12px 14px; }
.s-tourney .tcard .hd { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.s-tourney .tcard .hd .ty-h3 { font-size: 22px; white-space: nowrap; }
.s-tourney .tcard .persp { position: relative; flex: 1 1 96px; width: 100%; min-height: 60px; max-height: calc(100px * var(--art-k)); perspective: 460px; perspective-origin: 50% 0%; }
.s-tourney .tcard .timg { position: absolute; left: 50%; top: 2px; height: 116%; width: auto; max-width: 96%; object-fit: contain; transform: translateX(-50%) rotateX(40deg); transform-origin: 50% 0; filter: drop-shadow(0 12px 10px rgba(0,0,0,.6)); }
#stage[data-h="l"] .s-tourney .tcard .persp, #stage[data-h="xl"] .s-tourney .tcard .persp { max-height: 150px; }
.s-tourney .tcard .timg[src=""] { visibility: hidden; }
.s-tourney .tcard .wells { flex: none; display: flex; gap: 8px; }
.s-tourney .tcard .tw { width: 104px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.s-tourney .tcard .tv { display: flex; align-items: center; gap: 4px; }
.s-tourney .tcard .tv img { width: 18px; height: 18px; }
.s-tourney .tcard .tv .ty-num { font-size: 20px; color: #fff; }
.s-tourney .tcard .tv .ty-num.c-gold { color: var(--gold-2); }
.s-tourney .tcard .go { flex: none; width: 180px; margin-top: 4px; }
/* En la cola: la tarjeta pasa a dorada y enseña el estado y SALIR DE LA COLA */
.s-tourney .tcard .queue { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.s-tourney .tcard .qtxt { margin: 0; text-align: center; font-size: 10.5px; line-height: 1.3; }
/* Bloqueado: velo, placa con candado sobre la mesa y el nivel en lugar del botón, como en Elige mesa */
.s-tourney .tcard.locked .timg { filter: grayscale(.75) brightness(.42); }
/* la mesa (con su placa) va por encima del velo: se apaga con su propio filtro */
.s-tourney .tcard.locked .persp { z-index: 4; }
.s-tourney .tcard.locked::after { content: ''; position: absolute; z-index: 3; inset: 0; background: rgba(4,12,34,.62); pointer-events: none; }
.s-tourney .tcard .plate {
  position: absolute; z-index: 4; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 3px solid transparent;
  display: flex; align-items: center; justify-content: center; color: var(--gold-1);
  background: radial-gradient(circle at 50% 35%, #1d4a9a, #0a1f47 75%) padding-box, var(--gold-frame) border-box; box-shadow: 0 6px 14px rgba(0,0,0,.55);
}
.s-tourney .tcard .plate svg { filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.s-tourney .tcard .need { position: relative; z-index: 4; flex: none; margin-top: 4px; height: 26px; padding: 0 12px; font-size: 12px; }

/* ---- Cuadro en directo ----------------------------------------------------------------------------- */
.s-tourney .br-body { display: flex; flex-direction: column; min-height: 0; padding: 10px 12px 12px; }
.s-tourney .bstatus { flex: none; margin: 0 auto 6px; max-width: 560px; text-align: center; font-size: 12px; }
.s-tourney .bstatus.win { color: var(--gold-2); font-weight: 800; }
.s-tourney .bracket { flex: 1 1 auto; min-height: 0; display: flex; gap: 22px; justify-content: center; align-items: stretch; max-height: 420px; margin: auto 0; }
.s-tourney .bcol { position: relative; display: flex; flex-direction: column; justify-content: space-around; width: 170px; flex: none; padding-top: 16px; }
/* Parejas de partidos que alimentan uno de la ronda siguiente: cada pareja ocupa la misma altura, así
   los centros caen en 1/4 y 3/4 y el partido siguiente, en el medio (sin huecos entre parejas para
   que las alturas cuadren al píxel) */
.s-tourney .bpair { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; }
.s-tourney .bpair::after { content: ''; position: absolute; right: -12px; top: 25%; bottom: 25%; width: 2px; border-radius: 1px; background: rgba(231,164,18,.7); }
.s-tourney .bcol .bh { position: absolute; top: 0; left: 0; right: 0; text-align: center; }
/* Partido: pozo con dos filas */
.s-tourney .bmatch { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 4px; }
.s-tourney .bp { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px; border-radius: 6px; font: 800 11.5px/1 var(--f-ui); color: #fff; white-space: nowrap; overflow: hidden; }
.s-tourney .bp img { width: 16px; height: 16px; flex: none; }
.s-tourney .bp .bn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.s-tourney .bp .botbadge { margin-left: auto; }
.s-tourney .bp.me { background: rgba(255,211,77,.18); box-shadow: inset 0 0 0 1px rgba(255,211,77,.35); }
.s-tourney .bp.win { color: var(--c-green-hi); }
.s-tourney .bp.lose { opacity: .45; }
.s-tourney .bp.lose .bn { text-decoration: line-through; }
.s-tourney .bp.tbd { color: var(--tx-4); font-weight: 700; }
.s-tourney .bp .bdot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #030a1d; box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 0 0 1px rgba(126,174,255,.2); }
/* Conectores: un trazo a la derecha de cada partido y otro a la izquierda de los de la ronda siguiente */
.s-tourney .bmatch::after { content: ''; position: absolute; top: 50%; right: -11px; width: 11px; height: 2px; margin-top: -1px; background: rgba(231,164,18,.7); }
.s-tourney .bcol.r1 .bmatch::before, .s-tourney .bcol.r2 .bmatch::before { content: ''; position: absolute; top: 50%; left: -11px; width: 11px; height: 2px; margin-top: -1px; background: rgba(231,164,18,.7); }
/* Campeón */
.s-tourney .champion { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 150px; flex: none; text-align: center; }
.s-tourney .champion::before { content: ''; position: absolute; top: 50%; left: -11px; width: 11px; height: 2px; margin-top: -1px; background: rgba(231,164,18,.7); }
.s-tourney .champion .tro { position: relative; width: calc(72px * var(--art-k)); height: calc(72px * var(--art-k)); }
.s-tourney .champion .tro .halo { left: -30px; top: -30px; right: -30px; bottom: -30px; --gc: rgba(255,200,60,.42); }
.s-tourney .champion .trimg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.s-tourney .champion .cname { font-size: 20px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.s-tourney .champion .cprize { display: flex; align-items: center; gap: 4px; }
.s-tourney .champion .cprize img { width: 14px; height: 14px; }
.s-tourney .champion .cprize .ty-num { font-size: 15px; color: var(--gold-2); }